@adia-ai/web-components 0.8.40 → 0.8.42

package/components/chart-legend/chart-legend.yaml

@@ -48,10 +48,24 @@ props:
       - right
     reflect: true
   static:
-    description: When set, rows are non-interactive <span>s (no click, no toggle).
+    description: >-
+      DEPRECATED (ADR-0063, gh#1563) — use `interactive` instead. When set
+      (and `interactive` is absent), rows are non-interactive <span>s (no
+      click, no toggle). Kept working as a dual-read compat shim (one-time
+      console.warn when it's the name that resolves). Removed in 0.9.0.
     type: boolean
     default: false
     reflect: true
+  interactive:
+    description: >-
+      Canonical opt-in spelling (ADR-0063, gh#1563) replacing `static`'s
+      opt-out polarity. Rows are interactive <button>-role badges by
+      default — this default stays `true` in 0.8.42 (deliberately NOT
+      flipped yet; the 0.9.0 cut inverts it to `false` after a full
+      consumer scan of every `<chart-legend-ui>` tag per the ADR).
+    type: boolean
+    default: true
+    reflect: true
   onToggle:
     description: >-
       Series-toggle mode emitted via the `toggle` event. `hide` removes the

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

@@ -110,6 +110,7 @@
       "submit"
     ],
     "name": "UIChatInput",
+    "parts": {},
     "related": [
       "ChatShell",
       "ChatThread",

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

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json-schema.org/draft/2020-12/schema",
-  "$id": "https://adiaui.dev/a2ui/v0_9/components/ChatThread.json",
-  "title": "ChatThread",
+  "$id": "https://adiaui.dev/a2ui/v0_9/components/UIChatThread.json",
+  "title": "UIChatThread",
   "description": "Primitive chat message thread surface — a minimal scroll container\nfor ad-hoc message rendering. Distinct from the bespoke shell\nchild <chat-thread> (module-tier, lives inside <chat-shell>, owns\nscroll-to-bottom + [streaming] + [empty] reflected state). Use\nchat-thread-ui when embedding chat-like rows OUTSIDE a chat-shell\n(e.g. a comment thread inside <card-ui>); use <chat-thread> when\nauthoring a chat-shell.\n",
   "type": "object",
   "allOf": [
@@ -14,7 +14,7 @@
   ],
   "properties": {
     "component": {
-      "const": "ChatThread"
+      "const": "UIChatThread"
     },
     "streaming": {
       "description": "Component property: streaming.",
@@ -48,22 +48,22 @@
     "examples": [
       {
         "description": "Basic Chat usage",
-        "a2ui": "[\n  {\n    \"id\": \"root\",\n    \"component\": \"Card\",\n    \"children\": [\n      \"sec\"\n    ]\n  },\n  {\n    \"id\": \"sec\",\n    \"component\": \"Section\",\n    \"children\": [\n      \"comp\"\n    ]\n  },\n  {\n    \"id\": \"comp\",\n    \"component\": \"Chat\"\n  }\n]",
+        "a2ui": "[\n  {\n    \"id\": \"root\",\n    \"component\": \"Card\",\n    \"children\": [\n      \"sec\"\n    ]\n  },\n  {\n    \"id\": \"sec\",\n    \"component\": \"Section\",\n    \"children\": [\n      \"comp\"\n    ]\n  },\n  {\n    \"id\": \"comp\",\n    \"component\": \"UIChatThread\"\n  }\n]",
         "name": "basic-chat"
       },
       {
-        "description": "Chat transcript with user and assistant messages; role attribute styles turns.",
-        "a2ui": "[\n  {\n    \"id\": \"root\",\n    \"component\": \"Chat\",\n    \"children\": [\n      \"m1\",\n      \"m2\"\n    ]\n  },\n  {\n    \"id\": \"m1\",\n    \"component\": \"Text\",\n    \"role\": \"user\",\n    \"textContent\": \"What's the capital of France?\"\n  },\n  {\n    \"id\": \"m2\",\n    \"component\": \"Text\",\n    \"role\": \"assistant\",\n    \"textContent\": \"The capital of France is Paris.\"\n  }\n]",
+        "description": "Chat transcript with user and assistant messages; textContent prefixes the speaker (Text has no role/streaming prop).",
+        "a2ui": "[\n  {\n    \"id\": \"root\",\n    \"component\": \"UIChatThread\",\n    \"children\": [\n      \"m1\",\n      \"m2\"\n    ]\n  },\n  {\n    \"id\": \"m1\",\n    \"component\": \"Text\",\n    \"textContent\": \"User: What's the capital of France?\"\n  },\n  {\n    \"id\": \"m2\",\n    \"component\": \"Text\",\n    \"textContent\": \"Assistant: The capital of France is Paris.\"\n  }\n]",
         "name": "basic"
       },
       {
-        "description": "Chat with streaming cursor on an in-progress assistant message.",
-        "a2ui": "[\n  {\n    \"id\": \"root\",\n    \"component\": \"Chat\",\n    \"streaming\": true,\n    \"children\": [\n      \"m1\",\n      \"m2\"\n    ]\n  },\n  {\n    \"id\": \"m1\",\n    \"component\": \"Text\",\n    \"role\": \"user\",\n    \"textContent\": \"Explain black holes briefly.\"\n  },\n  {\n    \"id\": \"m2\",\n    \"component\": \"Text\",\n    \"role\": \"assistant\",\n    \"streaming\": true,\n    \"textContent\": \"A black hole is a region of spacetime where gravity is so strong that\"\n  }\n]",
+        "description": "Chat with the container's own streaming indicator on while an assistant message is in progress (streaming is a UIChatThread prop, not a Text prop).",
+        "a2ui": "[\n  {\n    \"id\": \"root\",\n    \"component\": \"UIChatThread\",\n    \"streaming\": true,\n    \"children\": [\n      \"m1\",\n      \"m2\"\n    ]\n  },\n  {\n    \"id\": \"m1\",\n    \"component\": \"Text\",\n    \"textContent\": \"User: Explain black holes briefly.\"\n  },\n  {\n    \"id\": \"m2\",\n    \"component\": \"Text\",\n    \"textContent\": \"Assistant: A black hole is a region of spacetime where gravity is so strong that\"\n  }\n]",
         "name": "streaming"
       },
       {
         "description": "Chat transcript composed with ChatInput for a full conversation surface.",
-        "a2ui": "[\n  {\n    \"id\": \"root\",\n    \"component\": \"Column\",\n    \"gap\": \"2\",\n    \"children\": [\n      \"chat\",\n      \"input\"\n    ]\n  },\n  {\n    \"id\": \"chat\",\n    \"component\": \"Chat\",\n    \"children\": [\n      \"m1\",\n      \"m2\"\n    ]\n  },\n  {\n    \"id\": \"m1\",\n    \"component\": \"Text\",\n    \"role\": \"user\",\n    \"textContent\": \"Give me a short haiku about the ocean.\"\n  },\n  {\n    \"id\": \"m2\",\n    \"component\": \"Text\",\n    \"role\": \"assistant\",\n    \"textContent\": \"Waves whisper secrets — the tide retreats then returns, carrying the moon.\"\n  },\n  {\n    \"id\": \"input\",\n    \"component\": \"ChatInput\",\n    \"placeholder\": \"Type a message...\"\n  }\n]",
+        "a2ui": "[\n  {\n    \"id\": \"root\",\n    \"component\": \"Column\",\n    \"gap\": \"2\",\n    \"children\": [\n      \"chat\",\n      \"input\"\n    ]\n  },\n  {\n    \"id\": \"chat\",\n    \"component\": \"UIChatThread\",\n    \"children\": [\n      \"m1\",\n      \"m2\"\n    ]\n  },\n  {\n    \"id\": \"m1\",\n    \"component\": \"Text\",\n    \"textContent\": \"User: Give me a short haiku about the ocean.\"\n  },\n  {\n    \"id\": \"m2\",\n    \"component\": \"Text\",\n    \"textContent\": \"Assistant: Waves whisper secrets — the tide retreats then returns, carrying the moon.\"\n  },\n  {\n    \"id\": \"input\",\n    \"component\": \"ChatInput\",\n    \"placeholder\": \"Type a message...\"\n  }\n]",
         "name": "with-input"
       }
     ],
@@ -87,6 +87,7 @@
       "support"
     ],
     "name": "UIChatThread",
+    "parts": {},
     "related": [
       "ChatThread",
       "List",

package/components/chat-thread/chat-thread.yaml

@@ -4,7 +4,7 @@ $schema: ../../../../scripts/schemas/component.yaml.schema.json
 name: UIChatThread
 tag: chat-thread-ui
 status: stable
-component: ChatThread
+component: UIChatThread
 category: agent
 version: 1
 description: |
@@ -70,16 +70,16 @@ examples:
         },
         {
           "id": "comp",
-          "component": "Chat"
+          "component": "UIChatThread"
         }
       ]
   - name: basic
-    description: Chat transcript with user and assistant messages; role attribute styles turns.
+    description: Chat transcript with user and assistant messages; textContent prefixes the speaker (Text has no role/streaming prop).
     a2ui: >-
       [
         {
           "id": "root",
-          "component": "Chat",
+          "component": "UIChatThread",
           "children": [
             "m1",
             "m2"
@@ -88,23 +88,21 @@ examples:
         {
           "id": "m1",
           "component": "Text",
-          "role": "user",
-          "textContent": "What's the capital of France?"
+          "textContent": "User: What's the capital of France?"
         },
         {
           "id": "m2",
           "component": "Text",
-          "role": "assistant",
-          "textContent": "The capital of France is Paris."
+          "textContent": "Assistant: The capital of France is Paris."
         }
       ]
   - name: streaming
-    description: Chat with streaming cursor on an in-progress assistant message.
+    description: Chat with the container's own streaming indicator on while an assistant message is in progress (streaming is a UIChatThread prop, not a Text prop).
     a2ui: >-
       [
         {
           "id": "root",
-          "component": "Chat",
+          "component": "UIChatThread",
           "streaming": true,
           "children": [
             "m1",
@@ -114,15 +112,12 @@ examples:
         {
           "id": "m1",
           "component": "Text",
-          "role": "user",
-          "textContent": "Explain black holes briefly."
+          "textContent": "User: Explain black holes briefly."
         },
         {
           "id": "m2",
           "component": "Text",
-          "role": "assistant",
-          "streaming": true,
-          "textContent": "A black hole is a region of spacetime where gravity is so strong that"
+          "textContent": "Assistant: A black hole is a region of spacetime where gravity is so strong that"
         }
       ]
   - name: with-input
@@ -140,7 +135,7 @@ examples:
         },
         {
           "id": "chat",
-          "component": "Chat",
+          "component": "UIChatThread",
           "children": [
             "m1",
             "m2"
@@ -149,14 +144,12 @@ examples:
         {
           "id": "m1",
           "component": "Text",
-          "role": "user",
-          "textContent": "Give me a short haiku about the ocean."
+          "textContent": "User: Give me a short haiku about the ocean."
         },
         {
           "id": "m2",
           "component": "Text",
-          "role": "assistant",
-          "textContent": "Waves whisper secrets — the tide retreats then returns, carrying the moon."
+          "textContent": "Assistant: Waves whisper secrets — the tide retreats then returns, carrying the moon."
         },
         {
           "id": "input",

package/components/check/check.a2ui.json

@@ -76,7 +76,7 @@
         "wrong": "<field-ui inline label=\"Agree\">\n  <check-ui></check-ui>\n</field-ui>\n"
       }
     ],
-    "category": "layout",
+    "category": "input",
     "composes": [],
     "events": {
       "change": {
@@ -94,19 +94,20 @@
       "check"
     ],
     "name": "UICheck",
-    "related": [
-      "Switch",
-      "Radio",
-      "Field"
-    ],
-    "slots": {
+    "parts": {
       "box": {
-        "description": "Visual checkbox indicator"
+        "description": "Visual checkbox indicator — template-owned anatomy part, not a light-DOM insertion point"
       },
       "label": {
-        "description": "Label text beside the checkbox"
+        "description": "Label text beside the checkbox — set via the `label` attribute (rendered by CSS `attr(label)` on `::after`, exposed as `aria-label`); template-owned, not a light-DOM insertion point (gh#1435, gh#1447)"
       }
     },
+    "related": [
+      "Switch",
+      "Radio",
+      "Field"
+    ],
+    "slots": {},
     "states": [
       {
         "description": "Default, ready for interaction.",

package/components/check/check.yaml

@@ -5,7 +5,7 @@ name: UICheck
 tag: check-ui
 status: stable
 component: Check
-category: layout
+category: input
 version: 1
 description: |
   Checkbox primitive — the host IS the control (per ADR-0025, no
@@ -66,11 +66,11 @@ props:
 events:
   change:
     description: Fired when checked state changes
-slots:
+parts:
   box:
-    description: Visual checkbox indicator
+    description: Visual checkbox indicator — template-owned anatomy part, not a light-DOM insertion point
   label:
-    description: Label text beside the checkbox
+    description: Label text beside the checkbox — set via the `label` attribute (rendered by CSS `attr(label)` on `::after`, exposed as `aria-label`); template-owned, not a light-DOM insertion point (gh#1435, gh#1447)
 states:
   - name: idle
     description: Default, ready for interaction.

package/components/code/code.a2ui.json

@@ -150,6 +150,7 @@
       "developer"
     ],
     "name": "UICode",
+    "parts": {},
     "related": [
       "badge",
       "button"

package/components/col/col.a2ui.json

@@ -63,6 +63,7 @@
       "col"
     ],
     "name": "UICol",
+    "parts": {},
     "related": [
       "avatar",
       "input",

package/components/color-area/color-area.a2ui.json

@@ -0,0 +1,148 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://adiaui.dev/a2ui/v0_9/components/ColorArea.json",
+  "title": "ColorArea",
+  "description": "OKLCH-native color picker with 2D area and H/C/L sliders. Form-associated input emitting OKLCH color strings; canonical color authoring surface in the AdiaUI token system. Use for color input in design tools or theming UIs; for simple color swatches use <swatch-ui> or <color-input-ui> instead. Renamed from `<color-picker-ui>` (ADR-0063, gh#1563 — `-picker` is reserved for the outer trigger + popover composite shape; this is the inline substrate, mirroring <calendar-grid-ui>'s naming precedent). `<color-picker-ui>` is now a thin deprecated alias subclassing this component.",
+  "type": "object",
+  "allOf": [
+    {
+      "$ref": "common_types.json#/$defs/ComponentCommon"
+    },
+    {
+      "$ref": "common_types.json#/$defs/CatalogComponentCommon"
+    }
+  ],
+  "properties": {
+    "baseHue": {
+      "description": "Reference hue (degrees) for the [hue-drift-max] constraint. Default\nNaN — falls back to the picker's hue at first commit so the consumer\ncan pre-seed the picker and constrain drift from that initial value.\n",
+      "type": "number",
+      "default": "NaN"
+    },
+    "component": {
+      "const": "ColorArea"
+    },
+    "disabled": {
+      "description": "Disables all interaction",
+      "type": "boolean",
+      "default": false
+    },
+    "format": {
+      "description": "Output format for the value property",
+      "type": "string",
+      "enum": [
+        "hex",
+        "oklch"
+      ],
+      "default": "hex"
+    },
+    "hueDriftMax": {
+      "description": "Generation constraint — maximum allowed signed-shortest-path hue\ndeviation (degrees) from [base-hue] (or the first-committed hue\nif [base-hue] is unset). Default NaN (no constraint). Wrap-aware\nso a drift of 350 degrees resolves as -10.\n",
+      "type": "number",
+      "default": "NaN"
+    },
+    "maxChroma": {
+      "description": "Generation constraint (v0.4.9 §99h, FEEDBACK-02 #7) — clamp the\nOKLCH chroma channel to at most this value before commit. Out-of-\nbound mutations round-trip to the nearest in-bound equivalent +\nfire `constraint-clamp`. Default Infinity (no constraint).\n",
+      "type": "number",
+      "default": "Infinity"
+    },
+    "maxL": {
+      "description": "Generation constraint — clamp OKLCH lightness to at most this value (0..1). Default 1 (no constraint).",
+      "type": "number",
+      "default": 1
+    },
+    "minL": {
+      "description": "Generation constraint — clamp OKLCH lightness to at least this value (0..1). Default 0 (no constraint).",
+      "type": "number",
+      "default": 0
+    },
+    "name": {
+      "description": "Form field name",
+      "type": "string",
+      "default": ""
+    },
+    "value": {
+      "description": "Current color as hex string",
+      "type": "string",
+      "default": "#3b82f6"
+    }
+  },
+  "required": [
+    "component"
+  ],
+  "unevaluatedProperties": false,
+  "x-adiaui": {
+    "anti_patterns": [],
+    "category": "input",
+    "composes": [
+      "slider-ui"
+    ],
+    "events": {
+      "change": {
+        "description": "Fired on every color change"
+      },
+      "constraint-clamp": {
+        "description": "Fired immediately before `change` / `input` when one or more\nconsumer-declared constraints (max-chroma / max-l / min-l /\nhue-drift-max) clamped a channel away from the user-requested\nvalue. detail.clamps is an array of axis-specific clamp records.\n",
+        "detail": {
+          "clamps": {
+            "description": "Array of `{ axis, requested, clamped, reason }` objects. axis is\none of \"l\" / \"c\" / \"h\". reason names the triggering constraint\nprop. Empty arrays are never emitted.\n",
+            "type": "array"
+          }
+        }
+      },
+      "input": {
+        "description": "Fired during continuous interaction (drag)"
+      }
+    },
+    "examples": [
+      {
+        "description": "Color picker card with a color picker component for selecting colors with swatches.",
+        "a2ui": "[\n  {\n    \"id\": \"root\",\n    \"component\": \"Card\",\n    \"children\": [\n      \"sec\"\n    ]\n  },\n  {\n    \"id\": \"sec\",\n    \"component\": \"Section\",\n    \"children\": [\n      \"cp\"\n    ]\n  },\n  {\n    \"id\": \"cp\",\n    \"component\": \"ColorArea\",\n    \"value\": \"#6366f1\"\n  }\n]",
+        "name": "color-area-demo"
+      },
+      {
+        "description": "Color picker with swatch selection in a card.",
+        "a2ui": "[\n  {\n    \"id\": \"root\",\n    \"component\": \"Card\",\n    \"children\": [\n      \"sec\"\n    ]\n  },\n  {\n    \"id\": \"sec\",\n    \"component\": \"Section\",\n    \"children\": [\n      \"cp\"\n    ]\n  },\n  {\n    \"id\": \"cp\",\n    \"component\": \"ColorArea\",\n    \"value\": \"#3b82f6\"\n  }\n]",
+        "name": "color-area-panel"
+      }
+    ],
+    "keywords": [
+      "colorarea",
+      "color-area",
+      "colorpicker",
+      "color-picker",
+      "color",
+      "picker"
+    ],
+    "name": "UIColorArea",
+    "parts": {},
+    "related": [
+      "grid",
+      "button"
+    ],
+    "slots": {},
+    "states": [
+      {
+        "description": "Default, ready for interaction.",
+        "name": "idle"
+      },
+      {
+        "description": "Non-interactive; dimmed.",
+        "attribute": "disabled",
+        "name": "disabled"
+      }
+    ],
+    "status": "stable",
+    "synonyms": {
+      "color-area": [
+        "color-canvas",
+        "color-surface",
+        "swatch-picker",
+        "color-picker"
+      ]
+    },
+    "tag": "color-area-ui",
+    "tokens": {},
+    "traits": [],
+    "version": 1
+  }
+}