{
 "id": "key-facts",
 "name": "Key facts",
 "purpose": "The facts about one thing as label and value rows, with a short note where it helps and a status colour on values that are a status.",
 "use_when": [
  "to give the details of one booking, order, place or product at a glance",
  "the person asks for the details of one thing: a flight, a parcel, an apartment, a plan"
 ],
 "avoid_when": [
  "several things side by side: use comparison",
  "two to four headline numbers for a period: use kpi-strip",
  "a step-by-step status over time: use progress-status"
 ],
 "type": "data",
 "style": "quiet",
 "width": "medium",
 "tags": {
  "audience": "work",
  "industries": [
   "travel",
   "retail",
   "logistics",
   "saas",
   "any"
  ],
  "keywords": [
   "facts",
   "details",
   "specs",
   "summary",
   "at a glance"
  ]
 },
 "root": ".odl-key-facts",
 "parts": [
  {
   "name": "title",
   "selector": "h3",
   "what": "the thing the facts are about",
   "slot": "text"
  },
  {
   "name": "subtitle",
   "selector": ".odl-sub",
   "what": "one line that places it: where, when or which",
   "slot": "text"
  },
  {
   "name": "facts",
   "selector": "dl > div",
   "what": "one fact: a label, its value and an optional note",
   "slot": "list"
  },
  {
   "name": "label",
   "selector": "dt",
   "what": "what the fact is",
   "slot": "text"
  },
  {
   "name": "value",
   "selector": ".odl-value",
   "what": "the value, coloured only when it is a status",
   "slot": "text"
  },
  {
   "name": "tone",
   "selector": ".odl-value[data-tone]",
   "what": "the value's status colour: neutral unless it is a status",
   "slot": "none"
  },
  {
   "name": "note",
   "selector": ".odl-note",
   "what": "a short line of context under the value",
   "slot": "text"
  }
 ],
 "data": {
  "type": "object",
  "required": [
   "title",
   "facts"
  ],
  "properties": {
   "title": {
    "type": "string",
    "maxLength": 70,
    "part": "title"
   },
   "subtitle": {
    "type": "string",
    "maxLength": 90,
    "part": "subtitle"
   },
   "facts": {
    "type": "array",
    "minItems": 2,
    "maxItems": 10,
    "part": "facts",
    "items": {
     "type": "object",
     "required": [
      "label",
      "value"
     ],
     "properties": {
      "label": {
       "type": "string",
       "maxLength": 32,
       "part": "label"
      },
      "value": {
       "type": "string",
       "maxLength": 120,
       "part": "value"
      },
      "note": {
       "type": "string",
       "maxLength": 80,
       "part": "note"
      },
      "tone": {
       "type": "string",
       "enum": [
        "neutral",
        "accent",
        "success",
        "warning",
        "danger",
        "info"
       ],
       "part": "tone"
      }
     }
    }
   },
   "action": {
    "type": "object",
    "required": [
     "label",
     "event"
    ],
    "properties": {
     "label": {
      "type": "string",
      "maxLength": 40
     },
     "event": {
      "type": "object"
     }
    }
   }
  }
 },
 "states": {
  "shown": [
   "status value (success, warning, danger, info, accent)",
   "value with note",
   "label over value on a phone"
  ],
  "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": "not_built",
    "how": "a fact that could not load shows a dash, and the note says why with tone danger"
   },
   "disabled": {
    "status": "not_built",
    "how": "the part has no controls, so there is no disabled state"
   },
   "overflow": {
    "status": "handled",
    "how": "up to ten rows stack in the card; on a phone each label sits over its value",
    "evidence": "@container (max-width: 26rem)"
   },
   "long_text": {
    "status": "handled",
    "how": "labels, values and notes wrap in their column, and long words break",
    "evidence": "overflow-wrap: anywhere"
   },
   "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-border-focus",
  "--ds-color-border-subtle",
  "--ds-color-surface-raised",
  "--ds-color-text-accent",
  "--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-label",
  "--ds-motion-duration-short",
  "--ds-motion-easing-standard",
  "--ds-radius-container",
  "--ds-radius-control",
  "--ds-radius-full",
  "--ds-size-control-md",
  "--ds-size-row-md",
  "--ds-size-target-min",
  "--ds-space-2",
  "--ds-space-6",
  "--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-xs",
  "--ds-text-body-md",
  "--ds-text-label-lg",
  "--ds-text-label-md",
  "--ds-text-title-md"
 ],
 "a11y": {
  "summary": "A description list, so each value is read with its label; a status is said in the value's words, and its colour and dot only repeat it.",
  "roles": [
   "banner",
   "region"
  ],
  "keyboard": [
   "When the card has a next step, Tab reaches its button",
   "Enter or Space presses it"
  ],
  "controls": {
   "button": 1,
   "input": 0,
   "link": 0,
   "select": 0,
   "textarea": 0,
   "summary": 0
  },
  "focus_visible": true,
  "reduced_motion": true,
  "min_target": true
 },
 "files": {
  "html": "components/key-facts/component.html",
  "bytes": 6052,
  "script": false
 },
 "source": null,
 "photos": 0,
 "urls": {
  "html": "https://opendesigner.dev/library/key-facts.html",
  "json": "https://opendesigner.dev/library/key-facts.json",
  "page": "https://opendesigner.dev/library/key-facts/"
 },
 "get": {
  "curl": "curl -fsSLo key-facts.html https://opendesigner.dev/library/key-facts.html",
  "opendesigner": "python3 path/to/skills/opendesigner/scripts/library.py add key-facts --from https://opendesigner.dev",
  "prompt": "Add the OpenDesigner component key-facts to this project: https://opendesigner.dev/library/key-facts.html. Keep its markup and states; map its --ds-* variables to my tokens."
 }
}