@adia-ai/web-components 0.8.40 → 0.8.41

package/components/card/card.examples.md

@@ -16,10 +16,10 @@
 </card-ui>
 ```
 
-## elevation
+## padding
 
 ```html
-<card-ui elevation="0">
-  <section>No shadow</section>
+<card-ui padding="none">
+  <section>No interior padding</section>
 </card-ui>
 ```

package/components/card/card.yaml

@@ -12,11 +12,35 @@ description: Bordered container with header, body, and footer sections. The nest
   a [slot="description"] + [slot="action"] space-between pattern; multiple <section> siblings stack as the body.
 props:
   padding:
-    description: Interior padding scale (overrides --card-padding). Accepts the named scale (none/xs/sm/md/lg/xl) or a numeric
-      rung ("1"…"16").
+    description: Interior padding scale — overrides --card-inset (the header/section/footer inset token) for the whole
+      card. Accepts the named scale (none/xs/sm/md/lg/xl — the parametric --a-padding-* tokens, same vocabulary as
+      block-ui's [padding]) or a literal space rung ("0"/"1"…"10"/"12"/"16", mapped to --a-space-N). Empty (default)
+      defers to the ambient --card-inset (context/[size]-driven) — unchanged behavior for the many existing cards
+      that never set this attribute.
     type: string
-    default: md
-    reflect: false  # declarative presentational attribute — CSS/author-time read, non-reactive by design
+    default: ''
+    enum:
+    - ''
+    - none
+    - xs
+    - sm
+    - md
+    - lg
+    - xl
+    - '0'
+    - '1'
+    - '2'
+    - '3'
+    - '4'
+    - '5'
+    - '6'
+    - '7'
+    - '8'
+    - '9'
+    - '10'
+    - '12'
+    - '16'
+    reflect: true
   draggable:
     description: Enables drag handle + cursor:grab. Wires the draggable trait; dispatches drag-end.
     type: boolean

package/components/chart/chart.a2ui.json

@@ -55,7 +55,10 @@
     },
     "cornerRadius": {
       "description": "Bar corner radius in px (null = let CSS tokens decide)",
-      "type": "number",
+      "type": [
+        "number",
+        "null"
+      ],
       "default": null
     },
     "data": {
@@ -191,6 +194,7 @@
       "poll"
     ],
     "name": "UIChart",
+    "parts": {},
     "related": [
       "button",
       "grid",
@@ -204,7 +208,7 @@
         "description": "Chart rendering area"
       },
       "empty": {
-        "description": "Shown in place of the SVG when `.data` is empty or missing. Typically an `<empty-state-ui>` with icon + heading + description + optional action. Visibility is CSS-toggled via `[data-has-data]` on the host — authors don't need to manage it imperatively."
+        "description": "Shown in place of the SVG when `.data` is empty or missing. Typically an `<empty-state-ui>` with icon + heading + description + optional action. Visibility is CSS-toggled via `[has-data]` on the host — authors don't need to manage it imperatively."
       }
     },
     "states": [
@@ -213,8 +217,9 @@
         "name": "idle"
       },
       {
-        "description": "No data — the empty slot (if provided) is rendered; otherwise the chart area renders nothing. Host carries [data-has-data] only when data is present.",
-        "name": "empty"
+        "description": "No data — the empty slot (if provided) is rendered; otherwise the chart area renders nothing. Host carries [has-data] only when data is present (gh#1332 Category A — converged off the private [data-has-data] mirror).",
+        "name": "empty",
+        "selector": ":not([has-data])"
       }
     ],
     "status": "stable",

package/components/chart/chart.class.js

@@ -467,7 +467,7 @@ export class UIChart extends UIElement {
        author-provided <* slot="empty"> into a template; subsequent renders
        restore it so data-empty → data-present → data-empty transitions
        don't lose the slotted empty-state-ui. Visibility is CSS-toggled via
-       [data-has-data] on the host. */
+       [has-data] on the host. */
     const existingEmpty = this.querySelector(':scope > [slot="empty"]');
     if (existingEmpty && !this.#emptySlotTemplate) {
       this.#emptySlotTemplate = existingEmpty.cloneNode(true);
@@ -477,10 +477,10 @@ export class UIChart extends UIElement {
     if (this.#emptySlotTemplate) this.appendChild(this.#emptySlotTemplate.cloneNode(true));
 
     if (!this.#data.length) {
-      this.removeAttribute('data-has-data');
+      this.removeAttribute('has-data');
       return;
     }
-    this.setAttribute('data-has-data', '');
+    this.setAttribute('has-data', '');
 
     /* gh#561 — the DOM this pointed at is about to be wiped; drop the
        reference so a stale node isn't held onto (its data-dot-active
@@ -1044,7 +1044,7 @@ export class UIChart extends UIElement {
       const safeRange = tickRange || 1; // Prevent division by zero
       for (const t of displayTicks) {
         const gy = p.top + (height - p.top - p.bottom) * (1 - (t - ticks[0]) / safeRange);
-        s += `<line data-grid x1="${p.left}" y1="${gy}" x2="${width - p.right}" y2="${gy}"/>`;
+        s += `<line data-chart-grid x1="${p.left}" y1="${gy}" x2="${width - p.right}" y2="${gy}"/>`;
       }
 
       /* Y-axis labels */
@@ -1315,7 +1315,7 @@ export class UIChart extends UIElement {
         ring += (i === 0 ? 'M' : 'L') + ` ${px} ${py}`;
       }
       ring += ' Z';
-      svg += `<path data-grid d="${ring}"/>`;
+      svg += `<path data-chart-grid d="${ring}"/>`;
     }
 
     /* Axis lines */
@@ -1323,7 +1323,7 @@ export class UIChart extends UIElement {
       const a = -Math.PI / 2 + angleStep * i;
       const px = cx + r * Math.cos(a);
       const py = cy + r * Math.sin(a);
-      svg += `<line data-grid x1="${cx}" y1="${cy}" x2="${px}" y2="${py}"/>`;
+      svg += `<line data-chart-grid x1="${cx}" y1="${cy}" x2="${px}" y2="${py}"/>`;
     }
 
     /* Data polygon + per-vertex hit targets */

package/components/chart/chart.css

@@ -108,10 +108,12 @@
   [data-legend]      { flex: 0 0 auto; }
 
   /* Empty-state slot — author places <empty-state-ui slot="empty"> inside
-     chart-ui. CSS toggles visibility on [data-has-data] (set by chart.js
-     when .data is non-empty). No data ⇒ empty-state visible; data ⇒ hidden. */
+     chart-ui. CSS toggles visibility on [has-data] (set by chart.class.js
+     when .data is non-empty; gh#1332 Category A — converged off the
+     private [data-has-data] mirror). No data ⇒ empty-state visible;
+     data ⇒ hidden. */
   & > [slot="empty"] { display: none; }
-  :scope:not([data-has-data]) > [slot="empty"] {
+  :scope:not([has-data]) > [slot="empty"] {
     display: flex;
     flex: 1 1 auto;
     align-items: center;
@@ -150,7 +152,7 @@
 
   /* ── Grid lines ── */
 
-  [data-grid] {
+  [data-chart-grid] {
     stroke: var(--chart-grid);
     stroke-width: 1;
     fill: none;

package/components/chart/chart.d.ts

@@ -23,7 +23,7 @@ export class UIChart extends UIElement {
   /** Color scheme */
   color: 'accent' | 'success' | 'warning' | 'danger' | 'info';
   /** Bar corner radius in px (null = let CSS tokens decide) */
-  cornerRadius: number;
+  cornerRadius: number | null;
   /** JS property (set programmatically — `el.data = [...]`). An array of plain objects; each object's keys are named by the `x` and `y` attributes — e.g. `<chart-ui x="month" y="revenue">` consumes `[{month:'Jan', revenue:3200}, {month:'Feb', revenue:4100}]`. The Chart.js `{labels, datasets}` envelope is NOT chart-ui's API — passing it (or any non-array value) renders an empty chart. May also be supplied declaratively as a JSON-array `data="[…]"` attribute, hydrated once at connect. Custom accessor on the element class, not a reflected attribute. */
   data: string;
   /** Marker (dot) visibility for line and multi-line series. `all` draws a circle[data-dot] on every datum (default — matches pre-gh#561 behavior). `none` hides all dots so a dense series reads as a clean line. `hover` shows only the currently-hovered datum's dot. `last` shows only the terminal point per series (sparkline convention). Tooltip hit targets ([data-hit]) are a separate always-rendered layer — every mode keeps hover/click working along the whole line. */

package/components/chart/chart.yaml

@@ -179,7 +179,7 @@ slots:
     description: >-
       Shown in place of the SVG when `.data` is empty or missing. Typically an
       `<empty-state-ui>` with icon + heading + description + optional action.
-      Visibility is CSS-toggled via `[data-has-data]` on the host — authors
+      Visibility is CSS-toggled via `[has-data]` on the host — authors
       don't need to manage it imperatively.
 states:
   - name: idle
@@ -187,8 +187,10 @@ states:
   - name: empty
     description: >-
       No data — the empty slot (if provided) is rendered; otherwise the chart
-      area renders nothing. Host carries [data-has-data] only when data
-      is present.
+      area renders nothing. Host carries [has-data] only when data
+      is present (gh#1332 Category A — converged off the private
+      [data-has-data] mirror).
+    selector: ":not([has-data])"
 traits: []
 tokens: {}
 a2ui:

package/components/chart-legend/chart-legend.a2ui.json

@@ -116,6 +116,7 @@
       "visualization"
     ],
     "name": "UIChartLegend",
+    "parts": {},
     "related": [
       "chart",
       "badge",

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-input/color-input.a2ui.json

@@ -175,6 +175,7 @@
       "compact"
     ],
     "name": "UIColorInput",
+    "parts": {},
     "related": [
       "color-picker",
       "popover",

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

@@ -112,6 +112,7 @@
       "picker"
     ],
     "name": "UIColorPicker",
+    "parts": {},
     "related": [
       "grid",
       "button"

package/components/combobox/combobox.a2ui.json

@@ -138,8 +138,8 @@
         "wrong": "{\"component\": \"Combobox\", \"value\": \"xx\", \"options\": [{\"value\": \"us\", \"label\": \"United States\"}]}\n"
       },
       {
-        "fix": "{\"component\": \"SegmentedControl\", \"options\": [{\"value\": \"a\", \"label\": \"A\"}, {\"value\": \"b\", \"label\": \"B\"}]}\n",
-        "why": "Only 2 options. Combobox is overkill — use SegmentedControl or Radio.\n",
+        "fix": "{\"component\": \"Segmented\", \"children\": [{\"component\": \"Segment\", \"value\": \"a\", \"text\": \"A\"}, {\"component\": \"Segment\", \"value\": \"b\", \"text\": \"B\"}]}\n",
+        "why": "Only 2 options. Combobox is overkill — use Segmented or Radio.\n",
         "wrong": "{\"component\": \"Combobox\", \"options\": [{\"value\": \"a\", \"label\": \"A\"}, {\"value\": \"b\", \"label\": \"B\"}]}\n"
       },
       {
@@ -246,6 +246,7 @@
       "member-picker"
     ],
     "name": "UICombobox",
+    "parts": {},
     "related": [
       "select",
       "search",

package/components/combobox/combobox.yaml

@@ -297,9 +297,9 @@ anti_patterns:
   - wrong: |
       {"component": "Combobox", "options": [{"value": "a", "label": "A"}, {"value": "b", "label": "B"}]}
     why: |
-      Only 2 options. Combobox is overkill — use SegmentedControl or Radio.
+      Only 2 options. Combobox is overkill — use Segmented or Radio.
     fix: |
-      {"component": "SegmentedControl", "options": [{"value": "a", "label": "A"}, {"value": "b", "label": "B"}]}
+      {"component": "Segmented", "children": [{"component": "Segment", "value": "a", "text": "A"}, {"component": "Segment", "value": "b", "text": "B"}]}
   - wrong: |
       {"component": "Combobox", "multiple": true, "options": [...]}
     why: |

package/components/command/command.a2ui.json

@@ -92,6 +92,17 @@
       "keybinding"
     ],
     "name": "UICommand",
+    "parts": {
+      "footer": {
+        "description": "Keyboard hint bar — template-owned anatomy part, not a light-DOM insertion point (gh#1454). render() unconditionally stamps a fixed `<footer>` with hard-coded kbd hints; no consumer override path exists in source."
+      },
+      "input": {
+        "description": "The auto-stamped search field — a contenteditable=\"plaintext-only\" span carrying role=\"combobox\" (per ADR-0025/ADR-0055; no native <input>). Internal only; not consumer-slottable — template-owned anatomy part, not a light-DOM insertion point (gh#1454)."
+      },
+      "list": {
+        "description": "Container for command items and groups — template-owned anatomy part, not a light-DOM insertion point (gh#1454). render() always populates it wholesale from `.options`/parsed `<option>` children; any pre-existing content is discarded, not adopted."
+      }
+    },
     "related": [
       "AdminCommand",
       "Menu",
@@ -100,16 +111,7 @@
     ],
     "slots": {
       "empty": {
-        "description": "Empty state shown when no items match"
-      },
-      "footer": {
-        "description": "Keyboard hint bar"
-      },
-      "input": {
-        "description": "The auto-stamped search field — a contenteditable=\"plaintext-only\" span carrying role=\"combobox\" (per ADR-0025/ADR-0055; no native <input>). Internal only; not consumer-slottable."
-      },
-      "list": {
-        "description": "Container for command items and groups"
+        "description": "Empty state shown when no items match. Consumer-supplied [slot=\"empty\"] content is captured before the internal shell renders and re-inserted — a genuine light-DOM insertion point."
       }
     },
     "states": [

package/components/command/command.class.js

@@ -13,6 +13,7 @@
 
 import { UIElement } from '../../core/element.js';
 import { logicalSlotted } from '../../core/logical-children.js';
+import { isElement } from '../../core/dom.js';
 
 function escapeHTML(s) {
   return String(s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
@@ -69,14 +70,14 @@ export class UICommand extends UIElement {
   static #RECENTS_MAX = 3;
 
   #onListClick = (e) => {
-    const el = e.target instanceof Element ? e.target.closest('[role="option"]:not([aria-disabled])') : null;
+    const el = isElement(e.target) ? e.target.closest('[role="option"]:not([aria-disabled])') : null;
     if (!el) return;
     const item = this.#itemByEl.get(el);
     if (item) this.#select(item);
   };
 
   #onListPointerOver = (e) => {
-    const el = e.target instanceof Element ? e.target.closest('[role="option"]:not([aria-disabled])') : null;
+    const el = isElement(e.target) ? e.target.closest('[role="option"]:not([aria-disabled])') : null;
     if (!el) return;
     const idx = parseInt(el.dataset.idx);
     if (Number.isFinite(idx) && idx !== this.#activeIdx) this.#activate(idx);

package/components/command/command.yaml

@@ -64,16 +64,29 @@ events:
         description: Parent optgroup label (empty string when item has no group).
 slots:
   empty:
-    description: Empty state shown when no items match
+    description: >-
+      Empty state shown when no items match. Consumer-supplied [slot="empty"]
+      content is captured before the internal shell renders and re-inserted —
+      a genuine light-DOM insertion point.
+parts:
   footer:
-    description: Keyboard hint bar
+    description: >-
+      Keyboard hint bar — template-owned anatomy part, not a light-DOM
+      insertion point (gh#1454). render() unconditionally stamps a fixed
+      `<footer>` with hard-coded kbd hints; no consumer override path exists
+      in source.
   input:
     description: >-
       The auto-stamped search field — a contenteditable="plaintext-only"
       span carrying role="combobox" (per ADR-0025/ADR-0055; no native
-      <input>). Internal only; not consumer-slottable.
+      <input>). Internal only; not consumer-slottable — template-owned
+      anatomy part, not a light-DOM insertion point (gh#1454).
   list:
-    description: Container for command items and groups
+    description: >-
+      Container for command items and groups — template-owned anatomy part,
+      not a light-DOM insertion point (gh#1454). render() always populates it
+      wholesale from `.options`/parsed `<option>` children; any pre-existing
+      content is discarded, not adopted.
 states:
 - name: idle
   description: Default, ready for interaction.

package/components/context-menu/context-menu.a2ui.json

@@ -103,6 +103,7 @@
       "popup-menu"
     ],
     "name": "UIContextMenu",
+    "parts": {},
     "related": [
       "menu",
       "menu-item",

package/components/date-range-picker/date-range-picker.a2ui.json

@@ -192,6 +192,7 @@
       "reporting-period"
     ],
     "name": "UIDateRangePicker",
+    "parts": {},
     "related": [
       "calendar-picker",
       "popover",
@@ -301,7 +302,7 @@
         "default": "var(--a-space-2)"
       },
       "--date-range-picker-selected-bg": {
-        "description": "Selected day-cell background (cascaded into the inner calendar via --calendar-picker-day-bg-selected).",
+        "description": "Selected day-cell background (cascaded into the inner calendar via --calendar-grid-day-bg-selected).",
         "default": "var(--md-sys-color-primary)"
       },
       "--date-range-picker-selected-fg": {