{
 "id": "receipt",
 "name": "Receipt",
 "purpose": "What just happened: a status line in its tone, what was done, a reference number, the lines that matter, a total, a note and up to two next steps.",
 "use_when": [
  "right after a booking, payment, order or change went through (or did not), to say what happened",
  "an action finished and the person needs the outcome, its reference number and what to do next"
 ],
 "avoid_when": [
  "the action has not happened yet and needs a yes: use approval-prompt",
  "the action failed and can be tried again: use error-retry",
  "a long history of payments or orders: use data-table"
 ],
 "type": "commerce",
 "style": "quiet",
 "width": "narrow",
 "tags": {
  "audience": "work",
  "industries": [
   "any"
  ],
  "keywords": [
   "receipt",
   "confirmation",
   "booking",
   "order",
   "summary"
  ]
 },
 "root": ".odl-receipt",
 "parts": [
  {
   "name": "status",
   "selector": ".odl-status",
   "what": "the outcome in a few words, with an icon in its tone",
   "slot": "text"
  },
  {
   "name": "title",
   "selector": ".odl-receipt h3",
   "what": "what was done",
   "slot": "text"
  },
  {
   "name": "reference",
   "selector": ".odl-ref",
   "what": "the booking or order number",
   "slot": "text"
  },
  {
   "name": "lines",
   "selector": ".odl-lines > div",
   "what": "one detail: label and value",
   "slot": "list"
  },
  {
   "name": "total",
   "selector": ".odl-total",
   "what": "the amount paid or due, set heavier",
   "slot": "text"
  },
  {
   "name": "note",
   "selector": ".odl-note",
   "what": "one plain sentence: what happens next or a rule to know",
   "slot": "text"
  },
  {
   "name": "primary",
   "selector": ".odl-primary",
   "what": "the main next step",
   "slot": "action"
  },
  {
   "name": "secondary",
   "selector": ".odl-secondary",
   "what": "a quieter next step",
   "slot": "action"
  }
 ],
 "data": {
  "type": "object",
  "required": [
   "status",
   "title",
   "lines"
  ],
  "properties": {
   "tone": {
    "type": "string",
    "enum": [
     "success",
     "warning",
     "danger",
     "info"
    ],
    "part": "status"
   },
   "status": {
    "type": "string",
    "maxLength": 32,
    "part": "status"
   },
   "title": {
    "type": "string",
    "maxLength": 60,
    "part": "title"
   },
   "reference": {
    "type": "string",
    "maxLength": 24,
    "part": "reference"
   },
   "lines": {
    "type": "array",
    "minItems": 1,
    "maxItems": 10,
    "part": "lines",
    "items": {
     "type": "object",
     "required": [
      "label",
      "value"
     ],
     "properties": {
      "label": {
       "type": "string",
       "maxLength": 28
      },
      "value": {
       "type": "string",
       "maxLength": 40
      }
     }
    }
   },
   "total_label": {
    "type": "string",
    "maxLength": 24,
    "part": "total"
   },
   "total_value": {
    "type": "string",
    "maxLength": 16,
    "part": "total"
   },
   "note": {
    "type": "string",
    "maxLength": 160,
    "part": "note"
   },
   "primary": {
    "type": "object",
    "part": "primary",
    "properties": {
     "label": {
      "type": "string",
      "maxLength": 40
     },
     "event": {
      "type": "object"
     }
    },
    "required": [
     "label",
     "event"
    ]
   },
   "secondary": {
    "type": "object",
    "part": "secondary",
    "properties": {
     "label": {
      "type": "string",
      "maxLength": 40
     },
     "event": {
      "type": "object"
     }
    },
    "required": [
     "label",
     "event"
    ]
   }
  }
 },
 "states": {
  "shown": [
   "success",
   "warning",
   "danger",
   "info",
   "hover",
   "focus",
   "disabled"
  ],
  "edge": {
   "empty": {
    "status": "handled",
    "evidence": "data-od-list",
    "how": "the Smart UI renderer puts one plain 'Nothing to show yet.' line in an empty list"
   },
   "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 says the action did not go through, with its icon and text colour",
    "evidence": "[data-tone=\"danger\"]"
   },
   "disabled": {
    "status": "shown",
    "how": "a disabled or still-loading button turns quiet neutral (secondary text on a subtle fill), still readable at AA",
    "evidence": "button:disabled { cursor: not-allowed;"
   },
   "overflow": {
    "status": "handled",
    "how": "up to ten lines; the buttons wrap to a full-width stack when there is no room side by side",
    "evidence": "flex: 1 1 10rem"
   },
   "long_text": {
    "status": "handled",
    "how": "labels, values, the title and the reference wrap; values never take more than 60% of a row",
    "evidence": "max-inline-size: 60%"
   },
   "missing_image": {
    "status": "none",
    "how": "the part has no photo"
   }
  }
 },
 "tokens": [
  "--ds-border-width-default",
  "--ds-color-bg-action-primary",
  "--ds-color-bg-action-primary-hover",
  "--ds-color-bg-neutral-subtle",
  "--ds-color-border-default",
  "--ds-color-border-focus",
  "--ds-color-border-subtle",
  "--ds-color-surface-raised",
  "--ds-color-text-danger",
  "--ds-color-text-info",
  "--ds-color-text-on-action",
  "--ds-color-text-primary",
  "--ds-color-text-secondary",
  "--ds-color-text-success",
  "--ds-color-text-warning",
  "--ds-elevation-raised",
  "--ds-focus-ring-offset",
  "--ds-focus-ring-width",
  "--ds-font-weight-heading",
  "--ds-font-weight-label",
  "--ds-icon-stroke-md",
  "--ds-motion-duration-short",
  "--ds-motion-easing-standard",
  "--ds-radius-container",
  "--ds-radius-control",
  "--ds-size-control-md",
  "--ds-size-icon-md",
  "--ds-size-icon-sm",
  "--ds-size-target-min",
  "--ds-space-inline-md",
  "--ds-space-inline-sm",
  "--ds-space-inline-xs",
  "--ds-space-inset-lg",
  "--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-code-md",
  "--ds-text-label-lg",
  "--ds-text-label-md",
  "--ds-text-label-md-tracking",
  "--ds-text-title-lg",
  "--ds-text-title-md"
 ],
 "a11y": {
  "summary": "An article named by its heading; the status is text next to a decorative icon, so it never relies on colour, and the lines are a description list.",
  "roles": [
   "article"
  ],
  "keyboard": [
   "Tab reaches the main step, then the quieter one",
   "Enter or Space presses either"
  ],
  "controls": {
   "button": 2,
   "input": 0,
   "link": 0,
   "select": 0,
   "textarea": 0,
   "summary": 0
  },
  "focus_visible": true,
  "reduced_motion": true,
  "min_target": true
 },
 "files": {
  "html": "components/receipt/component.html",
  "bytes": 8160,
  "script": false
 },
 "source": null,
 "photos": 0,
 "urls": {
  "html": "https://opendesigner.dev/library/receipt.html",
  "json": "https://opendesigner.dev/library/receipt.json",
  "page": "https://opendesigner.dev/library/receipt/"
 },
 "get": {
  "curl": "curl -fsSLo receipt.html https://opendesigner.dev/library/receipt.html",
  "opendesigner": "python3 path/to/skills/opendesigner/scripts/library.py add receipt --from https://opendesigner.dev",
  "prompt": "Add the OpenDesigner component receipt to this project: https://opendesigner.dev/library/receipt.html. Keep its markup and states; map its --ds-* variables to my tokens."
 }
}