{
 "id": "quick-replies",
 "name": "Quick replies",
 "purpose": "An optional question and two to six short answers as chips, so the person can reply with one tap instead of typing.",
 "use_when": [
  "under an assistant's message, when the next reply is one of a few known answers",
  "the assistant asks a question whose answer is one of two to six short options, such as a day, a size or a next step"
 ],
 "avoid_when": [
  "options that need prices or details to choose between: use comparison or result-list",
  "a free answer is likely: ask in text and let the person type",
  "more than six answers: use a list or a select field in form-fields"
 ],
 "type": "ai",
 "style": "friendly",
 "width": "medium",
 "tags": {
  "audience": "work",
  "industries": [
   "any"
  ],
  "keywords": [
   "chips",
   "suggestions",
   "replies",
   "assistant",
   "choices"
  ]
 },
 "root": ".odl-quick-replies",
 "parts": [
  {
   "name": "prompt",
   "selector": ".odl-prompt",
   "what": "the question, when the message above does not already ask it",
   "slot": "text"
  },
  {
   "name": "replies",
   "selector": ".odl-quick-replies li",
   "what": "one answer",
   "slot": "list"
  },
  {
   "name": "reply",
   "selector": ".odl-chip",
   "what": "the chip that sends this answer",
   "slot": "action"
  }
 ],
 "data": {
  "type": "object",
  "required": [
   "replies"
  ],
  "properties": {
   "prompt": {
    "type": "string",
    "maxLength": 80,
    "part": "prompt"
   },
   "replies": {
    "type": "array",
    "minItems": 2,
    "maxItems": 6,
    "part": "replies",
    "items": {
     "type": "object",
     "required": [
      "reply"
     ],
     "properties": {
      "reply": {
       "type": "object",
       "part": "reply",
       "properties": {
        "label": {
         "type": "string",
         "maxLength": 40
        },
        "event": {
         "type": "object"
        }
       },
       "required": [
        "label",
        "event"
       ]
      }
     }
    }
   }
  }
 },
 "states": {
  "shown": [
   "hover",
   "pressed",
   "picked",
   "focus",
   "disabled",
   "wraps to more lines"
  ],
  "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": "if a reply cannot be sent, the host says so in the conversation; the chips stay"
   },
   "disabled": {
    "status": "shown",
    "how": "after the conversation moves on, the host may disable the chips; they stay readable",
    "evidence": ".odl-chip:disabled"
   },
   "overflow": {
    "status": "handled",
    "how": "chips wrap to more lines; a long answer wraps inside its chip",
    "evidence": "flex-wrap: wrap"
   },
   "long_text": {
    "status": "handled",
    "how": "a long answer wraps inside its chip instead of running out of it",
    "evidence": "overflow-wrap: anywhere"
   },
   "missing_image": {
    "status": "none",
    "how": "the part has no photo"
   }
  }
 },
 "tokens": [
  "--ds-border-width-default",
  "--ds-color-bg-accent-subtle",
  "--ds-color-bg-neutral-subtle",
  "--ds-color-bg-neutral-subtle-pressed",
  "--ds-color-border-accent",
  "--ds-color-border-default",
  "--ds-color-border-focus",
  "--ds-color-border-strong",
  "--ds-color-border-subtle",
  "--ds-color-surface-raised",
  "--ds-color-text-primary",
  "--ds-color-text-secondary",
  "--ds-focus-ring-offset",
  "--ds-focus-ring-width",
  "--ds-font-weight-label",
  "--ds-motion-duration-short",
  "--ds-motion-easing-standard",
  "--ds-radius-full",
  "--ds-size-control-md",
  "--ds-size-target-min",
  "--ds-space-inline-sm",
  "--ds-space-inset-md",
  "--ds-space-inset-xs",
  "--ds-space-stack-md",
  "--ds-space-target-gap",
  "--ds-text-body-md",
  "--ds-text-label-lg"
 ],
 "a11y": {
  "summary": "A labelled group of buttons, each named by its own words; the picked one is marked with aria-pressed.",
  "roles": [
   "group",
   "list"
  ],
  "keyboard": [
   "Tab moves from chip to chip",
   "Enter or Space sends that answer"
  ],
  "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/quick-replies/component.html",
  "bytes": 3649,
  "script": true
 },
 "source": null,
 "photos": 0,
 "urls": {
  "html": "https://opendesigner.dev/library/quick-replies.html",
  "json": "https://opendesigner.dev/library/quick-replies.json",
  "page": "https://opendesigner.dev/library/quick-replies/"
 },
 "get": {
  "curl": "curl -fsSLo quick-replies.html https://opendesigner.dev/library/quick-replies.html",
  "opendesigner": "python3 path/to/skills/opendesigner/scripts/library.py add quick-replies --from https://opendesigner.dev",
  "prompt": "Add the OpenDesigner component quick-replies to this project: https://opendesigner.dev/library/quick-replies.html. Keep its markup and states; map its --ds-* variables to my tokens."
 }
}