{
 "id": "answer-sources",
 "name": "Answer with sources",
 "purpose": "A written answer in a few short paragraphs, each with small numbered chips that point to the sources listed under it.",
 "use_when": [
  "for an assistant's answer that has to show where each statement comes from",
  "an answer drawn from documents, policies or pages, where the person may want to check each statement"
 ],
 "avoid_when": [
  "a short factual answer that fits in one sentence: answer in plain text",
  "only the list of sources, with no answer: use citation-list",
  "one term or idea explained in a few lines: use summary-card"
 ],
 "type": "ai",
 "style": "editorial",
 "width": "medium",
 "tags": {
  "audience": "work",
  "industries": [
   "productivity",
   "saas",
   "education",
   "any"
  ],
  "keywords": [
   "answer",
   "sources",
   "citations",
   "ai",
   "research"
  ]
 },
 "root": ".odl-answer-sources",
 "parts": [
  {
   "name": "title",
   "selector": ".odl-title",
   "what": "the question or the subject of the answer",
   "slot": "text"
  },
  {
   "name": "paragraphs",
   "selector": ".odl-text > p",
   "what": "one paragraph of the answer",
   "slot": "list"
  },
  {
   "name": "text",
   "selector": ".odl-text > p > span:first-child",
   "what": "the paragraph's words",
   "slot": "text"
  },
  {
   "name": "cites",
   "selector": ".odl-cite",
   "what": "a small chip with the number of a source this paragraph uses",
   "slot": "list"
  },
  {
   "name": "sources",
   "selector": ".odl-src",
   "what": "one source: its number, title, where it is from and its date",
   "slot": "list"
  },
  {
   "name": "number",
   "selector": ".odl-num",
   "what": "the source's number, matching the chips",
   "slot": "number"
  },
  {
   "name": "source_title",
   "selector": ".odl-src-title",
   "what": "the source's title",
   "slot": "text"
  },
  {
   "name": "publisher",
   "selector": ".odl-meta",
   "what": "the site, team or publisher, as plain text",
   "slot": "text"
  },
  {
   "name": "date",
   "selector": ".odl-date",
   "what": "when the source was published or updated",
   "slot": "text"
  }
 ],
 "data": {
  "type": "object",
  "required": [
   "paragraphs",
   "sources"
  ],
  "properties": {
   "title": {
    "type": "string",
    "maxLength": 90,
    "part": "title"
   },
   "paragraphs": {
    "type": "array",
    "minItems": 1,
    "maxItems": 6,
    "part": "paragraphs",
    "items": {
     "type": "object",
     "required": [
      "text"
     ],
     "properties": {
      "text": {
       "type": "string",
       "maxLength": 600,
       "part": "text"
      },
      "cites": {
       "type": "array",
       "minItems": 0,
       "maxItems": 4,
       "part": "cites",
       "items": {
        "type": "object",
        "required": [
         "number"
        ],
        "properties": {
         "number": {
          "type": "integer",
          "minimum": 1,
          "maximum": 10,
          "part": "cites"
         }
        }
       }
      }
     }
    }
   },
   "sources": {
    "type": "array",
    "minItems": 1,
    "maxItems": 10,
    "part": "sources",
    "items": {
     "type": "object",
     "required": [
      "number",
      "title",
      "publisher"
     ],
     "properties": {
      "number": {
       "type": "integer",
       "minimum": 1,
       "maximum": 10,
       "part": "number"
      },
      "title": {
       "type": "string",
       "maxLength": 100,
       "part": "source_title"
      },
      "publisher": {
       "type": "string",
       "maxLength": 60,
       "part": "publisher"
      },
      "date": {
       "type": "string",
       "maxLength": 24,
       "part": "date"
      }
     }
    }
   }
  }
 },
 "states": {
  "shown": [
   "with title",
   "paragraph without citations",
   "source without date",
   "wraps on a phone"
  ],
  "edge": {
   "empty": {
    "status": "handled",
    "how": "a paragraph with no citations shows no chips, and an answer with no sources hides the sources block",
    "evidence": ".odl-sources:has(.od-empty) { display: none; }"
   },
   "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": "if the answer could not be written, say so in plain text instead of this part"
   },
   "disabled": {
    "status": "not_built",
    "how": "the part has no controls, so there is no disabled state"
   },
   "overflow": {
    "status": "handled",
    "how": "up to six paragraphs and ten sources stack in the card; a phone gets less padding",
    "evidence": "@container (max-width: 30rem)"
   },
   "long_text": {
    "status": "handled",
    "how": "paragraphs, titles and publishers wrap, and long words or domains 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-subtle",
  "--ds-color-surface-raised",
  "--ds-color-text-primary",
  "--ds-color-text-secondary",
  "--ds-elevation-raised",
  "--ds-font-weight-label",
  "--ds-radius-container",
  "--ds-radius-control-sm",
  "--ds-radius-full",
  "--ds-size-control-md",
  "--ds-size-control-sm",
  "--ds-size-target-min",
  "--ds-space-2",
  "--ds-space-inline-md",
  "--ds-space-inset-lg",
  "--ds-space-inset-xl",
  "--ds-space-stack-lg",
  "--ds-space-stack-md",
  "--ds-space-stack-sm",
  "--ds-space-stack-xs",
  "--ds-text-body-md",
  "--ds-text-label-lg",
  "--ds-text-label-md",
  "--ds-text-label-sm",
  "--ds-text-title-md"
 ],
 "a11y": {
  "summary": "An article with a heading; each citation chip is read as 'source 2', and the sources are an ordered list whose numbers match the chips.",
  "roles": [
   "article",
   "list",
   "region"
  ],
  "keyboard": [],
  "controls": {
   "button": 0,
   "input": 0,
   "link": 0,
   "select": 0,
   "textarea": 0,
   "summary": 0
  },
  "focus_visible": false,
  "reduced_motion": false,
  "min_target": true
 },
 "files": {
  "html": "components/answer-sources/component.html",
  "bytes": 6263,
  "script": false
 },
 "source": null,
 "photos": 0,
 "urls": {
  "html": "https://opendesigner.dev/library/answer-sources.html",
  "json": "https://opendesigner.dev/library/answer-sources.json",
  "page": "https://opendesigner.dev/library/answer-sources/"
 },
 "get": {
  "curl": "curl -fsSLo answer-sources.html https://opendesigner.dev/library/answer-sources.html",
  "opendesigner": "python3 path/to/skills/opendesigner/scripts/library.py add answer-sources --from https://opendesigner.dev",
  "prompt": "Add the OpenDesigner component answer-sources to this project: https://opendesigner.dev/library/answer-sources.html. Keep its markup and states; map its --ds-* variables to my tokens."
 }
}