{
 "id": "progress-status",
 "name": "Progress status",
 "purpose": "Where something stands: a status line coloured by its tone, an optional progress bar, the steps done and still to come, and when it was last updated.",
 "use_when": [
  "to answer where an order, refund, request or job is right now",
  "an answer to 'where is my order', 'is it done yet' or 'what happens next', with one status and a few steps"
 ],
 "avoid_when": [
  "a list of tasks the person still has to do: use setup-steps",
  "a finished action with its reference number: use receipt",
  "something that failed and can be retried: use error-retry",
  "a live delivery on a map: use delivery-tracker"
 ],
 "type": "feedback",
 "style": "friendly",
 "width": "narrow",
 "tags": {
  "audience": "work",
  "industries": [
   "any"
  ],
  "keywords": [
   "status",
   "progress",
   "steps",
   "tracking",
   "timeline"
  ]
 },
 "root": ".odl-progress-status",
 "parts": [
  {
   "name": "title",
   "selector": ".odl-progress-status h3",
   "what": "what is being tracked",
   "slot": "text"
  },
  {
   "name": "status",
   "selector": ".odl-status",
   "what": "where it is now, in a pill whose colour and icon follow the tone",
   "slot": "text"
  },
  {
   "name": "progress",
   "selector": ".odl-progress",
   "what": "a bar and the share done, when a share is known",
   "slot": "number"
  },
  {
   "name": "steps",
   "selector": ".odl-steps li",
   "what": "one step: done, now or next, with an optional time",
   "slot": "list"
  },
  {
   "name": "updated",
   "selector": ".odl-updated",
   "what": "when the status was last checked",
   "slot": "text"
  }
 ],
 "data": {
  "type": "object",
  "required": [
   "title",
   "status",
   "tone"
  ],
  "properties": {
   "title": {
    "type": "string",
    "maxLength": 48,
    "part": "title"
   },
   "status": {
    "type": "string",
    "maxLength": 60,
    "part": "status"
   },
   "tone": {
    "type": "string",
    "enum": [
     "neutral",
     "info",
     "success",
     "warning",
     "danger"
    ],
    "part": "status"
   },
   "progress": {
    "type": "number",
    "minimum": 0,
    "maximum": 100,
    "part": "progress"
   },
   "steps": {
    "type": "array",
    "minItems": 0,
    "maxItems": 6,
    "part": "steps",
    "items": {
     "type": "object",
     "required": [
      "label",
      "state"
     ],
     "properties": {
      "label": {
       "type": "string",
       "maxLength": 60
      },
      "time": {
       "type": "string",
       "maxLength": 32
      },
      "state": {
       "type": "string",
       "enum": [
        "done",
        "now",
        "next"
       ]
      }
     }
    }
   },
   "updated": {
    "type": "string",
    "maxLength": 40,
    "part": "updated"
   }
  }
 },
 "states": {
  "shown": [
   "neutral, info, success, warning and danger tones",
   "step done",
   "current step",
   "next step",
   "progress bar"
  ],
  "edge": {
   "empty": {
    "status": "handled",
    "how": "with no steps and no progress, only the title and the status line show",
    "evidence": "<div class=\"odl-progress\" data-od-optional>"
   },
   "loading": {
    "status": "handled",
    "evidence": "data-od-slot",
    "how": "the Smart UI renderer draws each marked slot as a quiet block of its size while the data arrives; the static file shows the filled part"
   },
   "error": {
    "status": "shown",
    "how": "the danger tone turns the status pill red with a cross icon, for a step that failed",
    "evidence": ".odl-status[data-tone=\"danger\"]"
   },
   "disabled": {
    "status": "not_built",
    "how": "the part has no controls"
   },
   "overflow": {
    "status": "handled",
    "how": "up to six steps stack down the card; the line between markers grows with each step's text",
    "evidence": "li:not(:last-child)::after"
   },
   "long_text": {
    "status": "handled",
    "how": "the title, status, step labels and times wrap and break long words; the share beside the bar never wraps",
    "evidence": "overflow-wrap: anywhere"
   },
   "missing_image": {
    "status": "none",
    "how": "the part has no photo"
   }
  }
 },
 "tokens": [
  "--ds-border-width-default",
  "--ds-border-width-emphasis",
  "--ds-color-bg-accent-bold",
  "--ds-color-bg-danger-subtle",
  "--ds-color-bg-info-subtle",
  "--ds-color-bg-neutral-subtle",
  "--ds-color-bg-success-subtle",
  "--ds-color-bg-warning-subtle",
  "--ds-color-border-strong",
  "--ds-color-border-subtle",
  "--ds-color-surface-raised",
  "--ds-color-text-danger",
  "--ds-color-text-info",
  "--ds-color-text-on-accent",
  "--ds-color-text-primary",
  "--ds-color-text-secondary",
  "--ds-color-text-success",
  "--ds-color-text-warning",
  "--ds-elevation-raised",
  "--ds-font-weight-heading",
  "--ds-icon-stroke-lg",
  "--ds-icon-stroke-md",
  "--ds-radius-container",
  "--ds-radius-control-sm",
  "--ds-radius-full",
  "--ds-size-icon-md",
  "--ds-size-icon-sm",
  "--ds-space-2",
  "--ds-space-8",
  "--ds-space-inline-md",
  "--ds-space-inline-sm",
  "--ds-space-inset-lg",
  "--ds-space-inset-sm",
  "--ds-space-inset-xl",
  "--ds-space-inset-xs",
  "--ds-space-stack-lg",
  "--ds-space-stack-md",
  "--ds-space-stack-sm",
  "--ds-text-body-md",
  "--ds-text-label-lg",
  "--ds-text-label-md",
  "--ds-text-title-md"
 ],
 "a11y": {
  "summary": "The status is plain text with a decorative icon; the steps are an ordered list and each step's state is read out before its label; the bar is decorative and its value is in the text beside it.",
  "roles": [
   "list",
   "region"
  ],
  "keyboard": [],
  "controls": {
   "button": 0,
   "input": 0,
   "link": 0,
   "select": 0,
   "textarea": 0,
   "summary": 0
  },
  "focus_visible": false,
  "reduced_motion": false,
  "min_target": false
 },
 "files": {
  "html": "components/progress-status/component.html",
  "bytes": 10024,
  "script": false
 },
 "source": null,
 "photos": 0,
 "urls": {
  "html": "https://opendesigner.dev/library/progress-status.html",
  "json": "https://opendesigner.dev/library/progress-status.json",
  "page": "https://opendesigner.dev/library/progress-status/"
 },
 "get": {
  "curl": "curl -fsSLo progress-status.html https://opendesigner.dev/library/progress-status.html",
  "opendesigner": "python3 path/to/skills/opendesigner/scripts/library.py add progress-status --from https://opendesigner.dev",
  "prompt": "Add the OpenDesigner component progress-status to this project: https://opendesigner.dev/library/progress-status.html. Keep its markup and states; map its --ds-* variables to my tokens."
 }
}