@adia-ai/web-components 0.5.3 → 0.5.5

package/components/accordion/accordion-item.a2ui.json

@@ -0,0 +1,50 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://adiaui.dev/a2ui/v0_9/components/AccordionItem.json",
+  "title": "AccordionItem",
+  "description": "Child of <accordion-ui>. One collapsible section with header + body. Use inside <accordion-ui> only.",
+  "type": "object",
+  "allOf": [
+    {
+      "$ref": "common_types.json#/$defs/ComponentCommon"
+    },
+    {
+      "$ref": "common_types.json#/$defs/CatalogComponentCommon"
+    }
+  ],
+  "properties": {
+    "component": {
+      "const": "AccordionItem"
+    },
+    "open": {
+      "description": "Whether the section is expanded.",
+      "type": "boolean",
+      "default": false
+    },
+    "text": {
+      "description": "Header text — the clickable label that toggles the section.",
+      "type": "string"
+    }
+  },
+  "required": [
+    "component"
+  ],
+  "unevaluatedProperties": false,
+  "x-adiaui": {
+    "anti_patterns": [],
+    "category": "layout",
+    "composes": [],
+    "events": {},
+    "examples": [],
+    "keywords": [],
+    "name": "UIAccordionItem",
+    "related": [],
+    "slots": {},
+    "states": [],
+    "synonyms": {},
+    "tag": "accordion-item-ui",
+    "tokens": {},
+    "traits": [],
+    "version": 1
+  }
+}

package/components/accordion/accordion-item.yaml

@@ -0,0 +1,27 @@
+# Edit this file; run `npm run build:components` to regenerate a2ui.json.
+#
+# §176 (v0.5.5): authored to close the §175 baseline-orphan class. The
+# component already existed as a sibling class in the parent's class.js
+# + was registered alongside the parent (e.g. UIList + UIListItem both
+# from list/class.js). The catalog just lacked its own entry. With the
+# §172 sibling-yaml scanner, this file gets picked up next to the parent
+# yaml.
+
+# Child component of <accordion-ui>. Surface only inside that parent.
+$schema: ../../../../scripts/schemas/component.yaml.schema.json
+name: UIAccordionItem
+tag: accordion-item-ui
+component: AccordionItem
+category: layout
+version: 1
+description: |-
+  Child of <accordion-ui>. One collapsible section with header + body. Use inside <accordion-ui> only.
+
+props:
+  text:
+    description: Header text — the clickable label that toggles the section.
+    type: string
+  open:
+    description: Whether the section is expanded.
+    type: boolean
+    default: false

package/components/action-list/action-item.a2ui.json

@@ -0,0 +1,63 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://adiaui.dev/a2ui/v0_9/components/ActionItem.json",
+  "title": "ActionItem",
+  "description": "Child of <action-list-ui>. One actionable row — icon + label, forwards activation to the parent action-list.",
+  "type": "object",
+  "allOf": [
+    {
+      "$ref": "common_types.json#/$defs/ComponentCommon"
+    },
+    {
+      "$ref": "common_types.json#/$defs/CatalogComponentCommon"
+    }
+  ],
+  "properties": {
+    "component": {
+      "const": "ActionItem"
+    },
+    "disabled": {
+      "description": "Disables click + keyboard activation; aria-disabled is set.",
+      "type": "boolean",
+      "default": false
+    },
+    "icon": {
+      "description": "Leading icon name (Phosphor).",
+      "type": "string"
+    },
+    "text": {
+      "description": "Action label.",
+      "type": "string"
+    },
+    "value": {
+      "description": "Identifier passed to the action-list change/activate handlers.",
+      "type": "string"
+    },
+    "variant": {
+      "description": "Visual variant (default | accent | danger).",
+      "type": "string",
+      "default": "default"
+    }
+  },
+  "required": [
+    "component"
+  ],
+  "unevaluatedProperties": false,
+  "x-adiaui": {
+    "anti_patterns": [],
+    "category": "navigation",
+    "composes": [],
+    "events": {},
+    "examples": [],
+    "keywords": [],
+    "name": "UIActionItem",
+    "related": [],
+    "slots": {},
+    "states": [],
+    "synonyms": {},
+    "tag": "action-item-ui",
+    "tokens": {},
+    "traits": [],
+    "version": 1
+  }
+}

package/components/action-list/action-item.yaml

@@ -0,0 +1,37 @@
+# Edit this file; run `npm run build:components` to regenerate a2ui.json.
+#
+# §176 (v0.5.5): authored to close the §175 baseline-orphan class. The
+# component already existed as a sibling class in the parent's class.js
+# + was registered alongside the parent (e.g. UIList + UIListItem both
+# from list/class.js). The catalog just lacked its own entry. With the
+# §172 sibling-yaml scanner, this file gets picked up next to the parent
+# yaml.
+
+# Child component of <action-list-ui>. Surface only inside that parent.
+$schema: ../../../../scripts/schemas/component.yaml.schema.json
+name: UIActionItem
+tag: action-item-ui
+component: ActionItem
+category: navigation
+version: 1
+description: |-
+  Child of <action-list-ui>. One actionable row — icon + label, forwards activation to the parent action-list.
+
+props:
+  icon:
+    description: Leading icon name (Phosphor).
+    type: string
+  text:
+    description: Action label.
+    type: string
+  value:
+    description: Identifier passed to the action-list change/activate handlers.
+    type: string
+  variant:
+    description: Visual variant (default | accent | danger).
+    type: string
+    default: 'default'
+  disabled:
+    description: Disables click + keyboard activation; aria-disabled is set.
+    type: boolean
+    default: false

package/components/avatar/avatar-group.a2ui.json

@@ -0,0 +1,50 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://adiaui.dev/a2ui/v0_9/components/AvatarGroup.json",
+  "title": "AvatarGroup",
+  "description": "Cluster of overlapping <avatar-ui> children. Stacks the first `max` avatars with a negative inline-start margin; if more children are present, renders a +N overflow indicator.",
+  "type": "object",
+  "allOf": [
+    {
+      "$ref": "common_types.json#/$defs/ComponentCommon"
+    },
+    {
+      "$ref": "common_types.json#/$defs/CatalogComponentCommon"
+    }
+  ],
+  "properties": {
+    "component": {
+      "const": "AvatarGroup"
+    },
+    "max": {
+      "description": "Maximum avatars to show before the +N overflow indicator.",
+      "type": "number",
+      "default": 5
+    },
+    "size": {
+      "description": "Forwards to each child <avatar-ui> (xs|sm|md|lg|xl). Empty uses the per-avatar size.",
+      "type": "string"
+    }
+  },
+  "required": [
+    "component"
+  ],
+  "unevaluatedProperties": false,
+  "x-adiaui": {
+    "anti_patterns": [],
+    "category": "feedback",
+    "composes": [],
+    "events": {},
+    "examples": [],
+    "keywords": [],
+    "name": "UIAvatarGroup",
+    "related": [],
+    "slots": {},
+    "states": [],
+    "synonyms": {},
+    "tag": "avatar-group-ui",
+    "tokens": {},
+    "traits": [],
+    "version": 1
+  }
+}

package/components/avatar/avatar-group.yaml

@@ -0,0 +1,26 @@
+# Edit this file; run `npm run build:components` to regenerate a2ui.json.
+#
+# §176 (v0.5.5): authored to close the §175 baseline-orphan class. The
+# component already existed as a sibling class in the parent's class.js
+# + was registered alongside the parent (e.g. UIList + UIListItem both
+# from list/class.js). The catalog just lacked its own entry. With the
+# §172 sibling-yaml scanner, this file gets picked up next to the parent
+# yaml.
+
+$schema: ../../../../scripts/schemas/component.yaml.schema.json
+name: UIAvatarGroup
+tag: avatar-group-ui
+component: AvatarGroup
+category: feedback
+version: 1
+description: |-
+  Cluster of overlapping <avatar-ui> children. Stacks the first `max` avatars with a negative inline-start margin; if more children are present, renders a +N overflow indicator.
+
+props:
+  max:
+    description: Maximum avatars to show before the +N overflow indicator.
+    type: number
+    default: 5
+  size:
+    description: Forwards to each child <avatar-ui> (xs|sm|md|lg|xl). Empty uses the per-avatar size.
+    type: string

package/components/avatar/avatar.a2ui.json

@@ -24,7 +24,10 @@
     "name": {
       "description": "Deprecated alias for `text` (logs a one-shot console warning; will be removed in a future release). New code should use `text=` instead.",
       "type": "string",
-      "default": ""
+      "default": "",
+      "deprecated": true,
+      "deprecated_reason": "Use `text` instead. Will be removed in v0.6.0.",
+      "deprecated_since": "0.4.x"
     },
     "shape": {
       "description": "Avatar shape",

package/components/avatar/avatar.yaml

@@ -19,6 +19,13 @@ props:
   name:
     description: "Deprecated alias for `text` (logs a one-shot console warning; will be removed in a future release). New code should use `text=` instead."
     type: string
+    # §179 (v0.5.5): principled deprecation metadata. The build pipeline
+    # propagates this into the sidecar + catalog; the LLM prompt builder
+    # surfaces "(deprecated, do not use)" based on this field rather than
+    # substring-matching the description.
+    deprecated: true
+    deprecated_since: "0.4.x"
+    deprecated_reason: "Use `text` instead. Will be removed in v0.6.0."
     default: ""
   icon:
     description: Phosphor icon name shown instead of initials when `src`/`text` are empty.

package/components/button/class.js

@@ -52,8 +52,47 @@ export class UIButton extends UIElement {
         this.prepend(iconEl);
       }
     }
+
+    // §184 (v0.5.5, FEEDBACK-08 §8): icon-only a11y warning + title→aria-label
+    // auto-derive. Two complementary mechanisms (consumer chooses):
+    //   (a) When [title="Undo"] is set on an icon-only button without an
+    //       explicit aria-label, mirror title → aria-label. Matches the
+    //       common icon-only-button-with-tooltip pattern (zero authoring
+    //       cost — already had to write the tooltip text).
+    //   (b) When the button is icon-only AND has no aria-label AND no
+    //       aria-labelledby AND no title, console.warn ONCE per element
+    //       so the bug class is diagnosable in dev without firing every
+    //       render tick. The warning is suppressed via a one-shot
+    //       WeakSet so subsequent re-renders stay quiet.
+    if (this.icon && !this.text) {
+      const ariaLabel = this.getAttribute('aria-label');
+      const ariaLabelledBy = this.getAttribute('aria-labelledby');
+      const titleAttr = this.getAttribute('title');
+      if (!ariaLabel && !ariaLabelledBy && titleAttr) {
+        this.setAttribute('aria-label', titleAttr);
+      } else if (!ariaLabel && !ariaLabelledBy && !titleAttr) {
+        if (!UIButton.#a11yWarned.has(this)) {
+          UIButton.#a11yWarned.add(this);
+          // eslint-disable-next-line no-console
+          console.warn(
+            `[button-ui] Icon-only button is missing an accessible name.\n` +
+            `  Element: <button-ui icon="${this.icon}">\n` +
+            `  Add one of:\n` +
+            `    aria-label="Undo"        ← explicit accessible name\n` +
+            `    title="Undo"             ← auto-mirrored to aria-label + tooltip\n` +
+            `    aria-labelledby="..."    ← reference an existing label element\n` +
+            `  Without an accessible name screen readers announce nothing meaningful.`
+          );
+        }
+      }
+    }
   }
 
+  // §184: WeakSet of elements we've already warned about. Prevents
+  // repeat warnings across re-renders. GC-friendly — when the element
+  // is gone the entry is collected.
+  static #a11yWarned = new WeakSet();
+
   #onClick = (e) => {
     if (this.disabled) { e.stopPropagation(); return; }
     if (this.type === 'submit') {

package/components/calendar-picker/class.js

@@ -53,6 +53,7 @@ function sameDay(a, b) {
 }
 
 export class UICalendarPicker extends UIFormElement {
+  static labelDeprecated = false;  // §170 (v0.5.4): label is first-class per calendar-picker.yaml
   // §154 (v0.5.3): Phosphor icons this primitive auto-stamps (without
   // consumer markup). Aggregated by installIconLoadersForRegistered()
   // across all defined elements. Audited by check-required-icons.mjs

package/components/chart/chart.a2ui.json

@@ -47,7 +47,8 @@
         "square",
         "tall"
       ],
-      "default": "std"
+      "default": "std",
+      "deprecated": true
     },
     "color": {
       "description": "Color scheme",
@@ -78,7 +79,8 @@
     "heading": {
       "description": "DEPRECATED (OD-CHART-02). Place chart titles in an enclosing card-ui's `<header><span slot=\"heading\">...</span></header>` instead. Still honored for back-compat; emits a one-shot console.warn per instance when set. Used as the chart's `aria-label` when no explicit label is provided.",
       "type": "string",
-      "default": ""
+      "default": "",
+      "deprecated": true
     },
     "hideAverage": {
       "description": "When true, suppress the overlaid average line",

package/components/chat-thread/chat-input.a2ui.json

@@ -0,0 +1,158 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://adiaui.dev/a2ui/v0_9/components/ChatInput.json",
+  "title": "ChatInput",
+  "description": "Composable chat input bar — a self-contained chat-message composer\nthat stamps its OWN inner structure (textarea + model picker + send\nbutton) when authored as a bare `<chat-input-ui>` tag.\n\nIMPORTANT (closes the 2026-05-14 redundant-send-button class): the\ncomponent stamps a built-in send button (paper-plane-right icon,\nprimary variant). DO NOT add a separate Button sibling for \"send\" —\nthe user gets two send buttons. The submit event fires on Enter or\nsend-button click; `detail` is `{ text, model }`.\n\nInner stamped structure (default):\n  <chat-input-ui>\n    <textarea-ui placeholder=\"Type a message...\" rows=\"1\"></textarea-ui>\n    <div slot=\"toolbar\">\n      <select-ui slot=\"model\" placeholder=\"Model\">...</select-ui>\n      <button-ui icon=\"paper-plane-right\" variant=\"primary\" slot=\"send\"></button-ui>\n    </div>\n  </chat-input-ui>\n\nLayout:\n  ┌──────────────────────────────────┐\n  │  textarea (grows vertically)     │\n  ├──────────────────────────────────┤\n  │  [model ▾]           [⏎ send]   │  ← toolbar (model picker + built-in send)\n  └──────────────────────────────────┘\n\nComposite wrapper, not a form field itself. The inner textarea-ui\nis form-associated via UIFormElement and submits through the parent\nform. `chat-input-ui`'s `disabled` / `placeholder` props propagate\nto the inner textarea.\n\nFor module-tier composer surfaces (slot vocabulary for file attach,\nautocomplete, trailing/leading controls), wrap inside\n`<chat-composer>` — see ChatComposer for the module-tier shape.\n",
+  "type": "object",
+  "allOf": [
+    {
+      "$ref": "common_types.json#/$defs/ComponentCommon"
+    },
+    {
+      "$ref": "common_types.json#/$defs/CatalogComponentCommon"
+    }
+  ],
+  "properties": {
+    "component": {
+      "const": "ChatInput"
+    },
+    "disabled": {
+      "description": "Disable the entire input. Textarea becomes contenteditable=false;\nsend button disabled.\n",
+      "type": "boolean",
+      "default": false
+    },
+    "loading": {
+      "description": "In-flight / streaming state. Send button disabled, submit events\nsuppressed, but textarea stays editable so the user can draft a\nfollow-up while the model is still responding.\n",
+      "type": "boolean",
+      "default": false
+    },
+    "model": {
+      "description": "Currently selected model value (reflected, two-way with inner\n`<select-ui slot=\"model\">`). Empty when no model picker is shown.\n",
+      "type": "string",
+      "default": ""
+    },
+    "models": {
+      "description": "JSON array of model options for the inner model picker —\n[{value, label}] or [{label, options: [...]}] groups. Empty array\nhides the model picker.\n",
+      "type": "array",
+      "default": []
+    },
+    "placeholder": {
+      "description": "Textarea placeholder. Defaults to \"Type a message...\".",
+      "type": "string",
+      "default": "Type a message..."
+    }
+  },
+  "required": [
+    "component"
+  ],
+  "unevaluatedProperties": false,
+  "x-adiaui": {
+    "anti_patterns": [
+      {
+        "description": "Adding a separate Button(primary) sibling next to ChatInput for \"send\". The component stamps its own send button (paper-plane-right icon). Two send buttons render side-by-side, confusing users."
+      },
+      {
+        "description": "Stamping a Select next to ChatInput for model picker. The component has a built-in model picker driven by the `models` prop. Set `models=[{value, label}, ...]` instead of stamping a separate Select."
+      },
+      {
+        "description": "Wrapping ChatInput inside <field-ui label=\"...\"> for label association. ChatInput is a composite container, not a form field. For a labeled composer surface, use <chat-composer> + slot label markup."
+      }
+    ],
+    "category": "agent",
+    "composes": [],
+    "events": {
+      "submit": {
+        "description": "Fires when the user presses Enter (without Shift) in the textarea OR clicks the built-in send button. The composer suppresses submission while `[loading]` is set.",
+        "detail": {
+          "model": {
+            "description": "Currently selected model value (empty if no model picker).",
+            "type": "string"
+          },
+          "text": {
+            "description": "Submitted message text from the inner textarea.",
+            "type": "string"
+          }
+        }
+      }
+    },
+    "examples": [
+      {
+        "description": "Minimal chat input — placeholder, no model picker. Sits inside a chat shell footer.",
+        "a2ui": "[\n  {\"id\": \"root\", \"component\": \"ChatInput\", \"placeholder\": \"Ask me anything...\"}\n]",
+        "name": "basic-chat-input"
+      },
+      {
+        "description": "Chat input with model selection. The `models` prop drives the built-in model picker — DO NOT add a separate Select sibling.",
+        "a2ui": "[\n  {\n    \"id\": \"root\",\n    \"component\": \"ChatInput\",\n    \"placeholder\": \"Type a message...\",\n    \"model\": \"claude-opus-4-7\",\n    \"models\": [\n      {\"value\": \"claude-opus-4-7\", \"label\": \"Claude Opus 4.7\"},\n      {\"value\": \"claude-haiku-4-5\", \"label\": \"Claude Haiku 4.5\"},\n      {\"value\": \"claude-sonnet-4-5\", \"label\": \"Claude Sonnet 4.5\"}\n    ]\n  }\n]",
+        "name": "chat-input-with-models"
+      },
+      {
+        "description": "Streaming response state. `[loading]` reflects on the host; send button disables; textarea stays editable so the user can draft a follow-up while the LLM is responding.",
+        "a2ui": "[\n  {\n    \"id\": \"root\",\n    \"component\": \"ChatInput\",\n    \"placeholder\": \"Drafting follow-up while streaming...\",\n    \"loading\": true\n  }\n]",
+        "name": "chat-input-loading-state"
+      },
+      {
+        "description": "Full chat shell — header + thread + ChatInput in the footer. Note: ChatInput is the sole footer child; no separate send button.",
+        "a2ui": "[\n  {\"id\": \"root\", \"component\": \"ChatShell\", \"children\": [\"header\", \"thread\", \"input\"]},\n  {\"id\": \"header\", \"component\": \"ChatHeader\", \"title\": \"Chat\"},\n  {\"id\": \"thread\", \"component\": \"ChatThread\"},\n  {\"id\": \"input\", \"component\": \"ChatInput\", \"placeholder\": \"Send a message...\"}\n]",
+        "name": "chat-shell-with-chat-input"
+      }
+    ],
+    "keywords": [
+      "chat-input",
+      "chat",
+      "message-input",
+      "composer",
+      "send-message",
+      "conversation",
+      "prompt",
+      "submit"
+    ],
+    "name": "UIChatInput",
+    "related": [
+      "ChatShell",
+      "ChatThread",
+      "ChatComposer",
+      "ChatHeader",
+      "TextArea",
+      "Input"
+    ],
+    "slots": {
+      "model": {
+        "description": "Override slot for the model picker. Most authors should NOT override this — set the `models` prop instead."
+      },
+      "send": {
+        "description": "Override slot for the send button only. The default stamped send button has `[icon=\"paper-plane-right\"] [variant=\"primary\"]`. Most authors should NOT override this — the built-in send button IS the send control. Adding a separate Button sibling for \"send\" duplicates this functionality."
+      },
+      "toolbar": {
+        "description": "Override slot for the entire toolbar row (model picker + send button). Most authors should NOT override this — the built-in toolbar handles model selection + send. Use this only when custom toolbar layout is required."
+      }
+    },
+    "states": [
+      {
+        "description": "Default, accepting input. Send button enabled when textarea has content.",
+        "name": "idle"
+      },
+      {
+        "description": "Input fully disabled (typically during initial form setup).",
+        "attribute": "disabled",
+        "name": "disabled"
+      },
+      {
+        "description": "LLM is responding. Send button disabled + submit events suppressed, but textarea stays editable for follow-up drafts.",
+        "attribute": "loading",
+        "name": "loading"
+      }
+    ],
+    "synonyms": {
+      "message-input": [
+        "conversation-input",
+        "prompt-input",
+        "send-bar"
+      ]
+    },
+    "tag": "chat-input-ui",
+    "tokens": {},
+    "traits": [],
+    "version": 1
+  }
+}