{"name":"progress","title":"Progress","description":"Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.","installCommand":"bunx marko-ui add progress -y","usageTags":"<Progress>","importSnippet":"import Progress from \"@/components/ui/progress/progress.marko\";","usageSnippet":"<Progress value=66/>","tags":["Progress"],"parts":[],"props":[{"name":"defaultValue","type":"number | null | undefined","required":false,"default":"50","description":"The initial value of the progress bar when rendered.\nUse when you don't need to control the value of the progress bar."},{"name":"dir","type":"'ltr' | 'rtl' | undefined","required":false,"default":"ltr","description":"The document's text/writing direction."},{"name":"formatOptions","type":"Intl.NumberFormatOptions | undefined","required":false,"description":"The options to use for formatting the value."},{"name":"getRootNode","type":"(() => ShadowRoot | Document | Node) | undefined","required":false,"description":"A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron."},{"name":"ids","type":"ElementIds | undefined","required":false,"description":"The ids of the elements in the progress bar. Useful for composition."},{"name":"label","type":"string","required":false},{"name":"locale","type":"string | undefined","required":false,"default":"en-US","description":"The locale to use for formatting the value."},{"name":"max","type":"number | undefined","required":false,"default":"100","description":"The maximum allowed value of the progress bar."},{"name":"min","type":"number | undefined","required":false,"default":"0","description":"The minimum allowed value of the progress bar."},{"name":"orientation","type":"'horizontal' | 'vertical' | undefined","required":false,"default":"horizontal","description":"The orientation of the element."},{"name":"translations","type":"IntlTranslations | undefined","required":false,"description":"The localized messages to use."},{"name":"value","type":"number | null | undefined","required":false,"description":"The controlled value of the progress bar."}],"events":[{"name":"onValueChange","arg":"ValueChangeDetails","description":"Callback fired when the value changes."},{"name":"valueChange","arg":"number"}],"keyboard":[],"accessibilityNotes":["The root exposes `role=\"progressbar\"` with `aria-valuenow`, `aria-valuemin`, and `aria-valuemax` (or `aria-valuetext` for indeterminate progress) via Zag's `getRootProps()` — no manual ARIA wiring needed.","Progress is a passive status indicator with no keyboard interaction of its own — nothing needs `accessibilityKeyboard` here.","When `label` is set, the caption and value text are linked to the root through `getLabelProps()`/`getValueTextProps()`, so assistive tech announces both together."],"examples":[{"id":"progress-demo","title":"Basic","source":"import Progress from \"@marko-ui/shadcn/ui/progress/progress.marko\";\n\n<Progress value=66 class=\"w-64\"/>","description":"A progress bar filled to a fixed `value` out of the default 0-100 range."},{"id":"progress-label","title":"With label","source":"import Progress from \"@marko-ui/shadcn/ui/progress/progress.marko\";\n\n<Progress value=40 label=\"Uploading...\" class=\"w-64\"/>","description":"Pass `label` to render a caption and live value text above the track."},{"id":"progress-controlled","title":"Controlled","source":"import Progress from \"@marko-ui/shadcn/ui/progress/progress.marko\";\n\n<let/value=45/>\n\n<div class=\"flex w-64 flex-col gap-3\">\n  <Progress value=value label=\"Progress\"/>\n  <div class=\"flex gap-2\">\n    <button\n      type=\"button\"\n      class=\"rounded-md border px-2 py-1 text-sm\"\n      onClick() { value = Math.max(0, value - 10); }\n    >\n      -10\n    </button>\n    <button\n      type=\"button\"\n      class=\"rounded-md border px-2 py-1 text-sm\"\n      onClick() { value = Math.min(100, value + 10); }\n    >\n      +10\n    </button>\n    <span class=\"self-center text-sm text-muted-foreground\">\n      value: ${value}\n    </span>\n  </div>\n</div>","description":"Zag machines are controlled: a `value` prop without a change handler never moves. Pair it with `valueChange`, or use Marko's bind shorthand `value:=state`."},{"id":"progress-rtl","title":"RTL","source":"import Progress from \"@marko-ui/shadcn/ui/progress/progress.marko\";\n\n<div dir=\"rtl\" class=\"w-full max-w-sm\">\n  <Progress value=66 label=\"تقدم الرفع\" class=\"w-full\"/>\n</div>","description":"To enable RTL support, set `dir=\"rtl\"` on an ancestor. Our indicator fills via Zag's `getRangeProps()`, not a manual transform, so no extra RTL class is needed."},{"id":"progress-min-max","title":"Min / Max","source":"import Progress from \"@marko-ui/shadcn/ui/progress/progress.marko\";\n\n<Progress value=150 min=0 max=200 label=\"Storage used\" class=\"w-64\"/>","description":"Set a custom `min` and `max` when the value isn't a 0-100 percentage."},{"id":"progress-indeterminate","title":"Indeterminate","source":"import Progress from \"@marko-ui/shadcn/ui/progress/progress.marko\";\n\n<Progress value=null label=\"Loading...\" class=\"w-64\"/>","description":"Pass `value=null` when progress can't be measured yet."}],"importInstallCommand":"bun add @marko-ui/shadcn marko-zag","nativeAttributes":"div","composition":"`Progress` renders its full anatomy — an optional label row and a\ntrack/indicator pair — from one tag. Pass `label` to render the caption\nand live value text above the track; without it, only the track renders.\n\n```text\nProgress\n├── (label row, when `label` is set)\n│   ├── label\n│   └── value text\n└── track\n    └── indicator\n```"}