{
 "id": "citation-list",
 "name": "Citation list",
 "purpose": "Numbered sources on their own: title, publisher and date, a short excerpt where it helps, and a button to open each one.",
 "use_when": [
  "to list the sources behind an answer, or reading to follow up on",
  "the person asks where an answer came from, or for sources or further reading on a topic"
 ],
 "avoid_when": [
  "an answer with its sources: use answer-sources",
  "files the person can download: use file-card",
  "search results to choose from: use result-list"
 ],
 "type": "content",
 "style": "editorial",
 "width": "medium",
 "tags": {
  "audience": "consumer",
  "industries": [
   "education",
   "media",
   "productivity",
   "any"
  ],
  "keywords": [
   "sources",
   "references",
   "citations",
   "reading list"
  ]
 },
 "root": ".odl-citation-list",
 "parts": [
  {
   "name": "title",
   "selector": "h3",
   "what": "a heading for the list, such as Sources or Further reading",
   "slot": "text"
  },
  {
   "name": "items",
   "selector": "li",
   "what": "one numbered source",
   "slot": "list"
  },
  {
   "name": "item_title",
   "selector": ".odl-src-title",
   "what": "the source's title",
   "slot": "text"
  },
  {
   "name": "publisher",
   "selector": ".odl-meta",
   "what": "who published it, as plain text",
   "slot": "text"
  },
  {
   "name": "date",
   "selector": ".odl-date",
   "what": "when it was published or updated",
   "slot": "text"
  },
  {
   "name": "excerpt",
   "selector": ".odl-excerpt",
   "what": "a short passage from the source that matters here",
   "slot": "text"
  },
  {
   "name": "open",
   "selector": ".odl-open",
   "what": "opens the source; the host decides where (no raw URL in the data)",
   "slot": "action"
  }
 ],
 "data": {
  "type": "object",
  "required": [
   "items"
  ],
  "properties": {
   "title": {
    "type": "string",
    "maxLength": 40,
    "part": "title"
   },
   "items": {
    "type": "array",
    "minItems": 1,
    "maxItems": 10,
    "part": "items",
    "items": {
     "type": "object",
     "required": [
      "title",
      "publisher"
     ],
     "properties": {
      "title": {
       "type": "string",
       "maxLength": 100,
       "part": "item_title"
      },
      "publisher": {
       "type": "string",
       "maxLength": 60,
       "part": "publisher"
      },
      "date": {
       "type": "string",
       "maxLength": 24,
       "part": "date"
      },
      "excerpt": {
       "type": "string",
       "maxLength": 240,
       "part": "excerpt"
      },
      "open": {
       "type": "object",
       "properties": {
        "label": {
         "type": "string",
         "maxLength": 40
        },
        "event": {
         "type": "object"
        }
       },
       "required": [
        "label",
        "event"
       ],
       "part": "open"
      }
     }
    }
   }
  }
 },
 "states": {
  "shown": [
   "with excerpt",
   "without date",
   "hover",
   "focus",
   "button under the text 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 source that cannot be opened leaves out its open action"
   },
   "disabled": {
    "status": "not_built",
    "how": "an item with no open action shows no button rather than a disabled one"
   },
   "overflow": {
    "status": "handled",
    "how": "up to ten rows stack; on a phone the button moves under the text",
    "evidence": "@container (max-width: 28rem)"
   },
   "long_text": {
    "status": "handled",
    "how": "titles, publishers and excerpts wrap, 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-neutral-subtle",
  "--ds-color-border-default",
  "--ds-color-border-focus",
  "--ds-color-border-subtle",
  "--ds-color-surface-raised",
  "--ds-color-text-primary",
  "--ds-color-text-secondary",
  "--ds-elevation-raised",
  "--ds-focus-ring-offset",
  "--ds-focus-ring-width",
  "--ds-font-weight-label",
  "--ds-icon-stroke-md",
  "--ds-motion-duration-short",
  "--ds-motion-easing-standard",
  "--ds-radius-container",
  "--ds-radius-control",
  "--ds-radius-control-sm",
  "--ds-size-control-md",
  "--ds-size-control-sm",
  "--ds-size-icon-sm",
  "--ds-size-target-min",
  "--ds-space-2",
  "--ds-space-inline-md",
  "--ds-space-inline-sm",
  "--ds-space-inset-lg",
  "--ds-space-inset-md",
  "--ds-space-inset-sm",
  "--ds-space-inset-xl",
  "--ds-space-inset-xs",
  "--ds-space-stack-md",
  "--ds-space-stack-xs",
  "--ds-text-body-md",
  "--ds-text-body-sm",
  "--ds-text-label-lg",
  "--ds-text-label-md",
  "--ds-text-title-md"
 ],
 "a11y": {
  "summary": "An ordered list, so each source is read with its number; every Open button is named with its source's title.",
  "roles": [
   "list",
   "region"
  ],
  "keyboard": [
   "Tab moves from one Open button to the next",
   "Enter or Space presses it"
  ],
  "controls": {
   "button": 4,
   "input": 0,
   "link": 0,
   "select": 0,
   "textarea": 0,
   "summary": 0
  },
  "focus_visible": true,
  "reduced_motion": true,
  "min_target": true
 },
 "files": {
  "html": "components/citation-list/component.html",
  "bytes": 7301,
  "script": false
 },
 "source": null,
 "photos": 0,
 "urls": {
  "html": "https://opendesigner.dev/library/citation-list.html",
  "json": "https://opendesigner.dev/library/citation-list.json",
  "page": "https://opendesigner.dev/library/citation-list/"
 },
 "get": {
  "curl": "curl -fsSLo citation-list.html https://opendesigner.dev/library/citation-list.html",
  "opendesigner": "python3 path/to/skills/opendesigner/scripts/library.py add citation-list --from https://opendesigner.dev",
  "prompt": "Add the OpenDesigner component citation-list to this project: https://opendesigner.dev/library/citation-list.html. Keep its markup and states; map its --ds-* variables to my tokens."
 }
}