{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "progress",
  "type": "registry:ui",
  "title": "Progress (MIAN)",
  "description": "Linear progress, determinate from aria-valuenow, or indeterminate without it.",
  "categories": [
    "feedback",
    "progress",
    "progress bar",
    "loading",
    "upload"
  ],
  "registryDependencies": [
    "https://mian.ro/r/mian-base.json"
  ],
  "files": [
    {
      "path": "mian/components/progress.css",
      "type": "registry:file",
      "target": "mian/components/progress.css",
      "content": ".mn-progress {\n  --_v: 0%;\n  --_p: var(--_c, var(--mn-primary));\n  position: relative; display: block; width: 100%; height: .5rem;\n  border-radius: 999px; background: var(--mn-surface-2); overflow: hidden;\n  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--mn-input) 45%, transparent);\n}\n.mn-progress::after {\n  content: \"\"; position: absolute; inset: 0 auto 0 0; width: var(--_v);\n  border-radius: inherit; background: var(--_p);\n  transition: width 300ms var(--mn-ease);\n}\n.mn-progress:not([aria-valuenow])::after { width: auto; left: 0; right: 100%; animation: mn-indeterminate 1.4s var(--mn-ease) infinite; }\n.mn-progress-sm { height: .3rem; } .mn-progress-lg { height: .8rem; }\n.mn-progress-label { display: flex; justify-content: space-between; margin-bottom: .45rem; font-size: var(--mn-text-sm); }\n.mn-progress-label span:last-child { color: var(--mn-muted); font-variant-numeric: tabular-nums; }\n/* The sweep never leaves the track, so skins may drop overflow: hidden. */\n@keyframes mn-indeterminate { 0% { left: 0; right: 100%; } 50% { left: 15%; right: 25%; } 100% { left: 100%; right: 0; } }\n@media (prefers-reduced-motion: reduce) { .mn-progress:not([aria-valuenow])::after { animation: none; left: 0; right: 0; opacity: .35; } }"
    },
    {
      "path": "mian/examples/progress.html",
      "type": "registry:file",
      "target": "mian/examples/progress.html",
      "content": "<!-- Determinate -->\n<div style=\"max-width:26rem\">\n  <div class=\"mn-progress-label\"><span id=\"up-l\">Uploading report.pdf</span><span>64%</span></div>\n  <div class=\"mn-progress\" role=\"progressbar\" aria-labelledby=\"up-l\" aria-valuenow=\"64\"></div>\n</div>\n\n<!-- Colours, sizes, indeterminate -->\n<div class=\"mn-stack\" style=\"max-width:26rem\">\n  <div class=\"mn-progress mn-progress-sm mn-success\" role=\"progressbar\" aria-label=\"Storage\" aria-valuenow=\"30\"></div>\n  <div class=\"mn-progress mn-warning\" role=\"progressbar\" aria-label=\"Quota\" aria-valuenow=\"78\"></div>\n  <div class=\"mn-progress mn-progress-lg mn-danger\" role=\"progressbar\" aria-label=\"Disk\" aria-valuenow=\"95\"></div>\n  <div class=\"mn-progress\" role=\"progressbar\" aria-label=\"Loading\"></div>\n</div>"
    }
  ],
  "docs": "MIAN components are HTML + CSS classes, not React components. The styles are already included in mian-base; this item adds the component's CSS section and example markup for reference. Docs: https://mian.ro/components/progress",
  "meta": {
    "mian": {
      "license": "LicenseRef-MIAN-1.0",
      "requiresJs": true,
      "classes": [
        "mn-progress",
        "mn-progress-sm · mn-progress-lg",
        "mn-progress-label"
      ],
      "accessibility": [
        "role=\"progressbar\" with aria-valuenow, and an accessible name. Omit aria-valuenow for indeterminate."
      ],
      "intents": [
        "progress bar",
        "upload progress",
        "loading bar",
        "completion"
      ]
    }
  }
}