@adia-ai/web-components 0.6.37 → 0.6.38

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

@@ -105,6 +105,9 @@
     "slots": {
       "default": {
         "description": "Optional override of the default icon + text + badge stamping."
+      },
+      "icon": {
+        "description": "Override the leading [icon] glyph with a custom slotted element (custom icon-ui, image, avatar). Mutually exclusive with the [icon] attribute — slot child wins."
       }
     },
     "states": [

package/components/nav-item/nav-item.yaml

@@ -68,6 +68,11 @@ events:
 slots:
   default:
     description: "Optional override of the default icon + text + badge stamping."
+  icon:
+    description: >-
+      Override the leading [icon] glyph with a custom slotted element
+      (custom icon-ui, image, avatar). Mutually exclusive with the
+      [icon] attribute — slot child wins.
 
 states:
   - name: idle

package/components/segmented/segmented.class.js

@@ -152,9 +152,17 @@ export class UISegmented extends UIFormElement {
       return;
     }
 
-    // Lazy-create indicator (prepend so it's behind segments in paint order)
-    const isNew = !this.#indicator;
+    // Indicator — there must be EXACTLY ONE [data-indicator] child at all
+    // times. If the instance ref is missing OR detached, strip every stale
+    // indicator from the DOM (defensive: re-renders after disconnect/
+    // reconnect cycles, HMR, or stamp() can leave the field nulled while
+    // the previous indicator span persists in DOM → multiple translateX'd
+    // pills paint simultaneously). Then create a fresh one.
+    const isNew = !this.#indicator || !this.contains(this.#indicator);
     if (isNew) {
+      for (const stale of this.querySelectorAll(':scope > [data-indicator]')) {
+        stale.remove();
+      }
       this.#indicator = document.createElement('span');
       this.#indicator.setAttribute('data-indicator', '');
       this.prepend(this.#indicator);

package/components/select/select.a2ui.json

@@ -220,6 +220,9 @@
       "upload"
     ],
     "slots": {
+      "hint": {
+        "description": "Override slot for hint markup richer than the plain [hint] attribute string (inline links, code spans). Renders beneath the trigger at body-subtle typography. Mutually exclusive with [hint]."
+      },
       "label": {
         "description": "Label element above the trigger"
       },

package/components/select/select.yaml

@@ -220,6 +220,11 @@ slots:
     description: Popover container for options (role=listbox)
   trigger:
     description: Button that opens the listbox
+  hint:
+    description: >-
+      Override slot for hint markup richer than the plain [hint] attribute
+      string (inline links, code spans). Renders beneath the trigger at
+      body-subtle typography. Mutually exclusive with [hint].
 states:
   - name: idle
     description: Default, ready for interaction.

package/components/slider/slider.a2ui.json

@@ -133,6 +133,12 @@
       "embed"
     ],
     "slots": {
+      "header": {
+        "description": "Wholesale override of the stamped label + value-readout header row. Use only when full custom-header markup is needed; otherwise prefer the granular `label` / `value` slots and the [label] attribute."
+      },
+      "hint": {
+        "description": "Override slot for hint markup richer than the plain [hint] attribute string (inline links, code spans). Renders beneath the slider at body-subtle typography. Mutually exclusive with [hint]."
+      },
       "input": {
         "description": "Native range input element"
       },

package/components/slider/slider.yaml

@@ -96,6 +96,16 @@ slots:
     description: Label element above the slider
   value:
     description: Current value display
+  header:
+    description: >-
+      Wholesale override of the stamped label + value-readout header row.
+      Use only when full custom-header markup is needed; otherwise prefer
+      the granular `label` / `value` slots and the [label] attribute.
+  hint:
+    description: >-
+      Override slot for hint markup richer than the plain [hint] attribute
+      string (inline links, code spans). Renders beneath the slider at
+      body-subtle typography. Mutually exclusive with [hint].
 states:
   - name: idle
     description: Default, ready for interaction.

package/components/stat/stat.css

@@ -38,34 +38,38 @@
 
   /* ── Chart slot (inline sparkline) ──
      When an author adds <chart-ui slot="chart"> (or any sparkline-shape
-     child), the grid reflows so the chart occupies the right column
-     across the value + change rows, fixed to the stat's right edge.
-     Hero number and chart read as a single visual unit. */
+     child), the grid reflows so the chart sits in the value row and
+     ends at the value's baseline — hero number and chart read as one
+     visual unit, the chart "resting on" the value text. */
   :scope:has([slot="chart"]) {
     grid-template-columns: minmax(0, 1fr) minmax(5rem, 40%);
     grid-template-areas:
       "label  icon"
       "value  chart"
-      "change chart";
+      "change .";
     align-items: end;
   }
 
-  /* Cap the chart slot at a sparkline-appropriate size — otherwise the
-     chart's default aspect ratio stretches the row heights and bloats
-     the whole card. Consumers who want a taller inline chart can
-     override --stat-chart-max-height on the host. Uses `chart-ui[slot]`
-     compound selector to beat chart-ui's own `:scope { max-height: 28rem }`
-     (specificity 0,1,1 beats 0,0,1). `[slot="chart"]` alone is (0,1,0)
-     — enough on paper but empirically losing to chart-ui's own scope in
-     practice; the type selector makes it explicit. */
+  /* Chart cell — bottom-aligned to the value row's baseline; aspect
+     ratio 4:3 (width:height) keeps it readable as a small inline chart
+     rather than a thin sparkline rail. Consumers override via
+     --stat-chart-aspect. */
   [slot="chart"] {
     grid-area: chart;
-    align-self: center;
+    align-self: end;
     min-width: 0;
     width: 100%;
+    aspect-ratio: var(--stat-chart-aspect, 4 / 3);
   }
   chart-ui[slot="chart"] {
-    max-height: var(--stat-chart-max-height, 3rem);
+    height: 100%;
+  }
+
+  /* When chart is present, value must NOT span into the chart column
+     (its default `grid-column: 1 / -1` would overlap the chart cell and
+     misalign both). Confine it to col 1. */
+  :scope:has([slot="chart"]) [slot="value"] {
+    grid-column: 1;
   }
 
   /* ── Label (eyebrow) ── */

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

@@ -70,6 +70,9 @@
       "description": {
         "description": "Custom description content; falls through to `[description]` prop if not slotted."
       },
+      "icon": {
+        "description": "Override the step-status glyph with a custom slotted element. By default the step renders a numeral / check / x indicator based on [status]; slot an `<icon-ui>` or image to customize."
+      },
       "label": {
         "description": "Custom label content; falls through to `[text]` prop if not slotted."
       }

package/components/stepper/stepper-item.yaml

@@ -44,6 +44,11 @@ slots:
     description: Custom label content; falls through to `[text]` prop if not slotted.
   description:
     description: Custom description content; falls through to `[description]` prop if not slotted.
+  icon:
+    description: >-
+      Override the step-status glyph with a custom slotted element. By default
+      the step renders a numeral / check / x indicator based on [status];
+      slot an `<icon-ui>` or image to customize.
 
 keywords:
   - stepper-item

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

@@ -75,7 +75,14 @@
       "FeedItem",
       "Stepper"
     ],
-    "slots": {},
+    "slots": {
+      "description": {
+        "description": "Override slot for rich description markup (inline links, code spans, embedded badges). Renders beneath the primary text at body-subtle typography."
+      },
+      "icon": {
+        "description": "Override the [icon] glyph with a custom slotted element. Use for branded icons, avatars, or non-Phosphor sources. Mutually exclusive with the [icon] attribute."
+      }
+    },
     "states": [],
     "status": "stable",
     "synonyms": {

package/components/timeline/timeline-item.yaml

@@ -47,6 +47,18 @@ props:
     type: boolean
     default: false
 
+slots:
+  icon:
+    description: >-
+      Override the [icon] glyph with a custom slotted element. Use for
+      branded icons, avatars, or non-Phosphor sources. Mutually exclusive
+      with the [icon] attribute.
+  description:
+    description: >-
+      Override slot for rich description markup (inline links, code spans,
+      embedded badges). Renders beneath the primary text at body-subtle
+      typography.
+
 keywords:
   - timeline-item
   - timeline-row

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

@@ -64,7 +64,11 @@
       "Nav",
       "Accordion"
     ],
-    "slots": {},
+    "slots": {
+      "icon": {
+        "description": "Override the leading [icon] glyph with a custom slotted element (custom icon-ui, folder open/closed glyph, file-type marker). Mutually exclusive with the [icon] attribute — slot child wins."
+      }
+    },
     "states": [],
     "status": "stable",
     "synonyms": {

package/components/tree/tree-item.yaml

@@ -41,6 +41,13 @@ props:
       Added in §184 (v0.5.5, FEEDBACK-08 §1).
     type: string
 
+slots:
+  icon:
+    description: >-
+      Override the leading [icon] glyph with a custom slotted element (custom
+      icon-ui, folder open/closed glyph, file-type marker). Mutually exclusive
+      with the [icon] attribute — slot child wins.
+
 a2ui:
   rules:
     - >-

package/components/tree/tree.a2ui.json

@@ -79,6 +79,9 @@
     "slots": {
       "default (tree-item-ui children)": {
         "description": "Child content region for the `default (tree-item-ui children)` slot."
+      },
+      "icon": {
+        "description": "Override slot for the per-node icon glyph. Tree-item's `[icon]` attr stamps a default Phosphor icon; the slot lets consumers fill custom icons (folder open/closed, file-type glyphs, branded markers)."
       }
     },
     "states": [

package/components/tree/tree.yaml

@@ -43,6 +43,11 @@ events:
 slots:
   default (tree-item-ui children):
     description: "Child content region for the `default (tree-item-ui children)` slot."
+  icon:
+    description: >-
+      Override slot for the per-node icon glyph. Tree-item's `[icon]` attr
+      stamps a default Phosphor icon; the slot lets consumers fill custom
+      icons (folder open/closed, file-type glyphs, branded markers).
 states:
   - name: idle
     description: Default, ready for interaction.