@adia-ai/web-components 0.8.39 → 0.8.41

package/components/card/card.css

@@ -120,6 +120,36 @@
   :scope[elevation="2"] { --card-shadow: var(--card-shadow-2); }
   :scope[elevation="3"] { --card-shadow: var(--card-shadow-3); }
 
+  /* ═══════ Padding — token override (gh#1416) ═══════
+     Overrides --card-inset (the header/section/footer inset token) for
+     the whole card. Named scale mirrors block-ui's own [padding] contract
+     + the global [padding] attribute API (api/sizing.css) — same
+     --a-padding-{xs..xl} tokens, so <card-ui padding="md"> == [padding="md"].
+     Literal rungs are the same k-independent --a-space-N set as the
+     universal [gap]/[padding] attribute (api/sizing.css). Unset (empty)
+     keeps the ambient --card-inset (context/[size]-driven) — this section
+     only fires when an author writes the attribute explicitly, so the many
+     existing cards that never set [padding] are unaffected. */
+  :scope[padding="none"] { --card-inset: 0; }
+  :scope[padding="xs"]   { --card-inset: var(--a-padding-xs); }
+  :scope[padding="sm"]   { --card-inset: var(--a-padding-sm); }
+  :scope[padding="md"]   { --card-inset: var(--a-padding-md); }
+  :scope[padding="lg"]   { --card-inset: var(--a-padding-lg); }
+  :scope[padding="xl"]   { --card-inset: var(--a-padding-xl); }
+  :scope[padding="0"]    { --card-inset: 0; }
+  :scope[padding="1"]    { --card-inset: var(--a-space-1); }
+  :scope[padding="2"]    { --card-inset: var(--a-space-2); }
+  :scope[padding="3"]    { --card-inset: var(--a-space-3); }
+  :scope[padding="4"]    { --card-inset: var(--a-space-4); }
+  :scope[padding="5"]    { --card-inset: var(--a-space-5); }
+  :scope[padding="6"]    { --card-inset: var(--a-space-6); }
+  :scope[padding="7"]    { --card-inset: var(--a-space-7); }
+  :scope[padding="8"]    { --card-inset: var(--a-space-8); }
+  :scope[padding="9"]    { --card-inset: var(--a-space-9); }
+  :scope[padding="10"]   { --card-inset: var(--a-space-10); }
+  :scope[padding="12"]   { --card-inset: var(--a-space-12); }
+  :scope[padding="16"]   { --card-inset: var(--a-space-16); }
+
   /* ═══════ Loading ═══════ */
 
   :scope[loading] {
@@ -194,7 +224,7 @@
     align-items: center;
   }
 
-  & > header[padding] {
+  & > header[padded] {
     margin: 0;
     padding: var(--card-inset);
     background: var(--card-bg-padded);
@@ -271,7 +301,7 @@
   & > header > :is(text-ui[variant="display"], text-ui[variant="title"], text-ui[variant="heading"], text-ui[variant="subsection"]):not([slot]),
   & > header > [slot="heading"] :is(h1, h2, h3, h4, h5, h6) {
     grid-row: 1;
-    line-height: 1.3;
+    line-height: var(--a-font-leading-normal);
     margin: 0;
   }
   /* Heading slot is a flex container — can hold title + inline badges/metadata.
@@ -304,7 +334,7 @@
   & > header > :is(text-ui[variant="body"], text-ui[variant="caption"]):not([slot]) {
     grid-row: 2;
     grid-column: 1 / -1;
-    line-height: 1.4;
+    line-height: var(--a-font-leading-relaxed);
     margin: 0;
   }
   & > header:has(> [slot="icon"]) > :is([slot="description"], p, small) { grid-column: 2 / -1; }
@@ -489,7 +519,7 @@
     font-size: var(--card-font-size);
     font-weight: var(--a-weight-medium);
     color: var(--card-heading-fg);
-    line-height: 1.3;
+    line-height: var(--a-font-leading-normal);
     margin: 0;
     flex: 0 0 auto;
   }

package/components/card/card.d.ts

@@ -17,8 +17,8 @@ export class UICard extends UIElement {
   draggable: boolean;
   /** Shadow depth 0-3 */
   elevation: 0 | 1 | 2 | 3;
-  /** Interior padding scale (overrides --card-padding). Accepts the named scale (none/xs/sm/md/lg/xl) or a numeric rung ("1"…"16"). */
-  padding: string;
+  /** 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. */
+  padding: '' | 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '12' | '16';
   /** Strips background, border, and shadow. Parent owns the surface. Content structure still applies. */
   raw: boolean;
   /** Card scale. Controls inset, radius, gap, and font sizes. Default (empty) = md. */

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

@@ -53,6 +53,14 @@
     "component": {
       "const": "Chart"
     },
+    "cornerRadius": {
+      "description": "Bar corner radius in px (null = let CSS tokens decide)",
+      "type": [
+        "number",
+        "null"
+      ],
+      "default": null
+    },
     "data": {
       "description": "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.",
       "$ref": "common_types.json#/$defs/DynamicObjectList"
@@ -99,11 +107,6 @@
       "type": "boolean",
       "default": false
     },
-    "radius": {
-      "description": "Bar corner radius (null = let CSS tokens decide)",
-      "type": "number",
-      "default": null
-    },
     "seriesEmphasis": {
       "description": "Multi-line only. Names one series key (matching a `y` key) to render at full strength — area fill + full-opacity line. Every other series drops its area fill and renders line-only at --chart-deemphasized-opacity. Empty (default) applies full treatment to every series, unchanged from pre-gh#561 behavior.",
       "type": "string",
@@ -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

@@ -25,7 +25,7 @@
  *   color        — accent/success/warning/danger/info
  *   hide-grid    — hide gridlines
  *   hide-values  — hide value labels
- *   radius       — bar corner radius (default: 4)
+ *   corner-radius — bar corner radius in px (default: null, falls back to --a-radius)
  *   dots         — line/multi-line marker visibility: all|none|hover|last (default: all)
  *   series-emphasis — multi-line: series key that keeps full area+line treatment; others render line-only, dimmed
  *
@@ -219,7 +219,7 @@ export class UIChart extends UIElement {
     color:       { type: String,  default: '',       reflect: true },
     hideGrid:    { type: Boolean, default: false,    reflect: true, attribute: 'hide-grid' },
     hideValues:  { type: Boolean, default: false,    reflect: true, attribute: 'hide-values' },
-    radius:      { type: Number,  default: null,     reflect: true },
+    cornerRadius: { type: Number, default: null,     reflect: true, attribute: 'corner-radius' },
     smooth:      { type: Number,  default: 0.4,      reflect: true },
     size:        { type: String,  default: '',       reflect: true },
     format:      { type: String,  default: 'abbr',   reflect: true },
@@ -255,11 +255,11 @@ export class UIChart extends UIElement {
      re-render without a full DOM query. */
   #activeDotEl = null;
 
-  /** Resolves the corner radius: the `radius` prop if explicitly set,
+  /** Resolves the corner radius: the `cornerRadius` prop if explicitly set,
    *  otherwise `--a-radius` from the host's computed style. Falls back
    *  to 6 if the token is unset (should not happen in practice). */
   #resolveRadius() {
-    if (this.radius != null) return this.radius;
+    if (this.cornerRadius != null) return this.cornerRadius;
     const val = getComputedStyle(this).getPropertyValue('--a-radius').trim();
     const parsed = parseFloat(val);
     return Number.isFinite(parsed) && parsed > 0 ? parsed : 6;
@@ -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;
@@ -176,7 +178,7 @@
 
   [data-value] {
     font-size: var(--chart-font-size);
-    font-weight: 600;
+    font-weight: var(--a-weight-semibold);
     fill: var(--chart-value);
     font-family: var(--chart-font);
   }
@@ -265,7 +267,7 @@
   [data-avg-label] {
     fill: var(--chart-avg);
     font-family: var(--chart-font);
-    font-weight: 600;
+    font-weight: var(--a-weight-semibold);
   }
 
   /* ── Radar ── */
@@ -388,7 +390,7 @@
   /* ── Donut center text ── */
 
   [data-donut-total] {
-    font-weight: 700;
+    font-weight: var(--a-weight-bold);
     fill: var(--chart-fg);
     font-family: var(--chart-font);
     /* font-size set by JS on the element — scales with donut radius */
@@ -719,7 +721,7 @@
   color: var(--chart-tooltip-fg);
   font-family: var(--a-font-family);
   font-size: var(--a-ui-sm);
-  line-height: 1.35;
+  line-height: var(--a-font-leading-normal);
   border: none;
   border-radius: var(--chart-tooltip-radius);
   box-shadow: var(--chart-tooltip-shadow);
@@ -741,11 +743,11 @@
   font-size: var(--a-ui-tiny);
   opacity: 0.75;
   text-transform: uppercase;
-  letter-spacing: 0.04em;
+  letter-spacing: var(--a-font-tracking-wide);
 }
 
 .chart-tooltip-popup [data-tip-role="label"] {
-  font-weight: 500;
+  font-weight: var(--a-weight-medium);
 }
 
 .chart-tooltip-popup [data-tip-role="value"] {

package/components/chart/chart.d.ts

@@ -22,6 +22,8 @@ export class UIChart extends UIElement {
   type: 'bar' | 'line' | 'pie' | 'donut' | 'radar' | 'sparkline' | 'segments' | 'area' | 'scatter' | 'radial-bar' | 'gauge' | 'stacked-bar' | 'grouped-bar' | 'multi-line' | 'funnel' | 'treemap' | 'sankey' | 'composed';
   /** Color scheme */
   color: 'accent' | 'success' | 'warning' | 'danger' | 'info';
+  /** Bar corner radius in px (null = let CSS tokens decide) */
+  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. */
@@ -36,8 +38,6 @@ export class UIChart extends UIElement {
   hideValues: boolean;
   /** Show a skeleton placeholder instead of the chart body. Set to true while data is being fetched; clear once data arrives. Preserves the element's aspect-ratio dimensions so the skeleton occupies the same space the chart will fill. Parity with stat-ui[loading] and table-ui[loading] (§FB-12, v0.6.27). */
   loading: boolean;
-  /** Bar corner radius (null = let CSS tokens decide) */
-  radius: number;
   /** Multi-line only. Names one series key (matching a `y` key) to render at full strength — area fill + full-opacity line. Every other series drops its area fill and renders line-only at --chart-deemphasized-opacity. Empty (default) applies full treatment to every series, unchanged from pre-gh#561 behavior. */
   seriesEmphasis: string;
   /** Chart size */

package/components/chart/chart.yaml

@@ -76,10 +76,11 @@ props:
     type: boolean
     default: false
     attribute: hide-values
-  radius:
-    description: Bar corner radius (null = let CSS tokens decide)
+  cornerRadius:
+    description: Bar corner radius in px (null = let CSS tokens decide)
     type: number
     default: null
+    attribute: corner-radius
   size:
     description: Chart size
     type: string
@@ -178,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
@@ -186,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.css

@@ -50,7 +50,7 @@
     --chat-msg-avatar-size-font:  var(--a-ui-sm);
     --chat-msg-avatar-weight:     var(--a-weight-semibold);
     --chat-bubble-font-size:      var(--a-body-size);
-    --chat-bubble-line-height:    var(--a-leading-normal);
+    --chat-bubble-line-height:    var(--a-font-leading-relaxed);
   }
 
   :scope {

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.",