@adia-ai/web-components 0.8.23 → 0.8.25

package/components/input/input.class.js

@@ -66,6 +66,11 @@ export class UIInput extends UIFormElement {
   // motivated the deprecation.
   static labelDeprecated = false;
 
+  // Phosphor icons this primitive auto-stamps (without consumer markup).
+  // Aggregated by installIconLoadersForRegistered() across all defined
+  // elements. Audited by check-required-icons.mjs.
+  static requiredIcons = ['caret-up', 'caret-down'];
+
   static properties = {
     ...UIFormElement.properties,
     placeholder: { type: String,  default: '', reflect: true },

package/components/input/input.yaml

@@ -238,6 +238,9 @@ tokens:
     description: Override border radius
   --input-transition:
     description: Override transition timing
+requiredIcons:
+  - caret-up
+  - caret-down
 a2ui:
   rules:
     - >-

package/components/list/list.css

@@ -107,11 +107,11 @@
   }
 
   /* Anatomy (header-row model):
-     row 1 = icon (col 1) · text/title (col 2) · action (col 3), all aligned
-     on the title row. row 2 = description, spanning col 2 / -1 (under the
+     row 1 = text/title (col 2) · action (col 3), aligned on the title row.
+     icon (col 1) spans both rows, centered on the whole item (gh#558).
+     row 2 = description, spanning col 2 / -1 (under the
      action) so multi-line supporting text uses the full content width rather
-     than being boxed into col 2 beside the action. For icon+text-only items
-     there is a single row, so `grid-row: 1` is identical to the old `1 / -1`.
+     than being boxed into col 2 beside the action.
      `[slot="content"]` (used when consumer provides custom rendering)
      spans all columns. */
   :scope {
@@ -147,6 +147,15 @@
     /* carries the old column-gap (gh#524) */
     margin-inline-end: var(--list-item-gap-column);
   }
+  /* Two-line items center the glyph on the WHOLE item (gh#558) — Material's
+     two-line convention; pinned to row 1 it hung above the item center.
+     The span must be explicit (`span 2`): with no grid-template-rows the
+     explicit grid has zero rows, so `1 / -1` collapses back to one row.
+     Scoped by :has() so single-line items don't mint an empty second row
+     (which would charge row-gap below the content). */
+  :scope:has([slot="description"]) [slot="icon"] {
+    grid-row: 1 / span 2;
+  }
   /* An empty stamped icon span must not resurrect the ghost track. */
   :scope [slot="icon"]:empty {
     display: none;

package/components/modal/modal.class.js

@@ -51,6 +51,11 @@ export class UIModal extends UIElement {
   #closeTimer = null;
   #dialogRef = null;
 
+  // Phosphor icons this primitive auto-stamps (without consumer markup).
+  // Aggregated by installIconLoadersForRegistered() across all defined
+  // elements. Audited by check-required-icons.mjs.
+  static requiredIcons = ['x'];
+
   static properties = {
     text:      { type: String,  default: '', reflect: true },
     size:      { type: String,  default: 'md', reflect: true },

package/components/modal/modal.yaml

@@ -79,6 +79,8 @@ tokens:
     description: Override surface border radius
   --modal-shadow:
     description: Override surface box shadow
+requiredIcons:
+  - x
 a2ui:
   rules:
     - >-

package/components/nav-group/nav-group.class.js

@@ -30,6 +30,11 @@ import { anchorPopover } from '../../core/anchor.js';
 import { logicalSlotted } from '../../core/logical-children.js';
 
 export class UINavGroup extends UIElement {
+  // Phosphor icons this primitive auto-stamps (without consumer markup).
+  // Aggregated by installIconLoadersForRegistered() across all defined
+  // elements. Audited by check-required-icons.mjs.
+  static requiredIcons = ['caret-right'];
+
   static properties = {
     text:        { type: String,  default: '',    reflect: true },
     icon:        { type: String,  default: '',    reflect: true },

package/components/nav-group/nav-group.yaml

@@ -81,6 +81,8 @@ states:
 
 traits: []
 tokens: {}
+requiredIcons:
+  - caret-right
 a2ui:
   rules:
     - >-

package/components/pagination/pagination.yaml

@@ -64,6 +64,9 @@ states:
     description: Default, ready for interaction.
 traits: []
 tokens: {}
+requiredIcons:
+  - caret-left
+  - caret-right
 a2ui:
   rules:
     - rule: 'Renders below tables, card grids, or list views for paginated data. Emits page-change events.'

package/components/select/select.class.js

@@ -26,8 +26,8 @@ export class UISelect extends UIFormElement {
   // across all defined elements. Audited by check-required-icons.mjs
   // (slot 11). Per FEEDBACK-06 §4 + FEEDBACK-07 §4.
   // SPEC-040: [multiple] mode stamps <tag-ui> chips (own `x`), checkbox
-  // indicator (`check`), and search-input prefix (`magnifying-glass`).
-  static requiredIcons = ['caret-down', 'check', 'x', 'magnifying-glass'];
+  // indicator (`check`).
+  static requiredIcons = ['caret-down', 'check', 'x'];
 
   // §225 (v0.5.9, FEEDBACK-10 §3): once-per-element console.warn dedup when
   // consumer authors children that aren't native <option>/<optgroup>. The

package/components/select/select.yaml

@@ -274,7 +274,6 @@ requiredIcons:
   - caret-down
   - check               # checkbox indicator on each option in [multiple] mode
   - x                   # chip dismiss + clear-all affordance ([multiple] + [clearable])
-  - magnifying-glass    # search-input prefix ([searchable])
 a2ui:
   rules:
     - >-

package/components/stat/stat.a2ui.json

@@ -13,6 +13,11 @@
     }
   ],
   "properties": {
+    "band": {
+      "description": "Chart-band KPI layout. With a `slot=\"chart\"` child, label / value / change stack full width top to bottom and the chart forms a short full-width band between the value and the change row (the Gmail/Vercel/shadcn stat-card shape). Composes with `icon` exactly as the base layout does. No effect without a chart slot.",
+      "type": "boolean",
+      "default": false
+    },
     "bleed": {
       "description": "Horizontal-bleed KPI layout. With a `slot=\"chart\"` child, the value / label / change stack on the left while the chart fills the right column at full height and bleeds to the card's top / right / bottom edges (the horizontal counterpart to a chart in a card `<section bleed>`). No effect without a chart slot.",
       "type": "boolean",
@@ -233,6 +238,9 @@
       "--stat-change-size": {
         "description": "Font size for the change badge"
       },
+      "--stat-chart-band-height": {
+        "description": "Fixed height of the full-width chart band in `band` layout"
+      },
       "--stat-column-gap": {
         "description": "Horizontal gap between grid columns"
       },

package/components/stat/stat.css

@@ -16,6 +16,9 @@
     --stat-column-gap:   var(--a-gap-self, var(--a-gap));
     --stat-row-gap:      var(--a-gap-sm);
     text-align: start;  /* §text-align-reset — blocks inheritance from centered ancestors */
+
+    /* ── Chart-band mode ── */
+    --stat-chart-band-height: 3rem;
 }
 
   :scope {
@@ -127,6 +130,42 @@
     aspect-ratio: auto;
   }
 
+  /* ── Chart-band KPI tile ──
+     label / value / chart-band / change stack full width, top to bottom —
+     the Gmail/Vercel/shadcn stat-card shape: a short full-width trend band
+     sits between the hero number and the delta footer, instead of the
+     inline chart resting beside the value (compact) or the bleed panel
+     replacing the text column (wide). Text rows stay baseline-aligned;
+     the band row stretches to its own fixed height. Compose inside a card
+     section:
+       <stat-ui band value=… label=… change=… trend=…>
+         <chart-ui slot="chart" type="sparkline" …></chart-ui>
+       </stat-ui>  */
+  :scope[band]:has([slot="chart"]) {
+    grid-template-columns: minmax(0, 1fr) auto;
+    grid-template-areas:
+      "label  icon"
+      "value  value"
+      "chart  chart"
+      "change change";
+    align-items: baseline;
+  }
+  /* Restore full-width value span — the inline-chart reflow above confines
+     value to column 1 to make room for the beside-value chart; band has no
+     such column, so the value spans both again. */
+  :scope[band] [slot="value"] {
+    grid-column: 1 / -1;
+  }
+  :scope[band] [slot="chart"] {
+    grid-area: chart;
+    /* Band row stretches to its own fixed short height rather than the
+       inline-chart's baseline-anchored 4:3 box — aspect-ratio released. */
+    align-self: stretch;
+    width: 100%;
+    height: var(--stat-chart-band-height);
+    aspect-ratio: auto;
+  }
+
   /* ── Label (eyebrow) ── */
   [slot="label"] {
     grid-area: label;

package/components/stat/stat.d.ts

@@ -13,6 +13,8 @@
 import { UIElement } from '../../core/element.js';
 
 export class UIStat extends UIElement {
+  /** Chart-band KPI layout. With a `slot="chart"` child, label / value / change stack full width top to bottom and the chart forms a short full-width band between the value and the change row (the Gmail/Vercel/shadcn stat-card shape). Composes with `icon` exactly as the base layout does. No effect without a chart slot. */
+  band: boolean;
   /** Horizontal-bleed KPI layout. With a `slot="chart"` child, the value / label / change stack on the left while the chart fills the right column at full height and bleeds to the card's top / right / bottom edges (the horizontal counterpart to a chart in a card `<section bleed>`). No effect without a chart slot. */
   bleed: boolean;
   /** Change indicator text (e.g. '+12%', '-3%') */

package/components/stat/stat.js

@@ -23,6 +23,11 @@ class UIStat extends UIElement {
     // slot="chart" child fills the right column and bleeds to the card edges.
     // Reflected so the [bleed] CSS selector gates the layout.
     bleed:   { type: Boolean, default: false, reflect: true },
+    // Chart-band layout: label/value/chart/change stack full width, top to
+    // bottom, with the slot="chart" child forming a short full-width band
+    // between the value and the change row. Reflected so the [band] CSS
+    // selector gates the layout.
+    band:    { type: Boolean, default: false, reflect: true },
   };
 
   static template = () => null;

package/components/stat/stat.yaml

@@ -58,6 +58,15 @@ props:
       without a chart slot.
     type: boolean
     default: false
+  band:
+    description: >-
+      Chart-band KPI layout. With a `slot="chart"` child, label / value /
+      change stack full width top to bottom and the chart forms a short
+      full-width band between the value and the change row (the
+      Gmail/Vercel/shadcn stat-card shape). Composes with `icon` exactly as
+      the base layout does. No effect without a chart slot.
+    type: boolean
+    default: false
 events: {}
 slots:
   change:
@@ -81,6 +90,8 @@ traits: []
 tokens:
   --stat-change-size:
     description: Font size for the change badge
+  --stat-chart-band-height:
+    description: Fixed height of the full-width chart band in `band` layout
   --stat-column-gap:
     description: Horizontal gap between grid columns
   --stat-down-fg:

package/components/swiper/swiper.class.js

@@ -37,6 +37,11 @@
 import { UIElement } from '../../core/element.js';
 
 export class UISwiper extends UIElement {
+  // Phosphor icons this primitive auto-stamps (without consumer markup).
+  // Aggregated by installIconLoadersForRegistered() across all defined
+  // elements. Audited by check-required-icons.mjs.
+  static requiredIcons = ['caret-left', 'caret-right'];
+
   static properties = {
     autoplay:          { type: Boolean, default: false, reflect: true },
     interval:          { type: Number,  default: 5000,  reflect: true },

package/components/swiper/swiper.yaml

@@ -95,6 +95,9 @@ states:
   description: Default, ready for interaction.
 traits: []
 tokens: {}
+requiredIcons:
+  - caret-left
+  - caret-right
 a2ui:
   rules:
     - rule: 'Horizontal slide carousel with touch + arrow nav. Hosts arbitrary children as slides.'

package/components/toolbar/toolbar.class.js

@@ -90,6 +90,11 @@ function outerWidth(el) {
 }
 
 export class UIToolbar extends UIElement {
+  // Phosphor icons this primitive auto-stamps (without consumer markup).
+  // Aggregated by installIconLoadersForRegistered() across all defined
+  // elements. Audited by check-required-icons.mjs.
+  static requiredIcons = ['dots-three'];
+
   static properties = {
     gap:      { type: String,  default: 'sm', reflect: true },
     align:    { type: String,  default: 'start', reflect: true },
@@ -320,6 +325,12 @@ export class UIToolbar extends UIElement {
       trigger.hidden = true;
 
       // 2. Measure.
+      // Hidden-ancestor guard (gh#528): a display:none mount reads
+      // clientWidth 0 — committing a spill from that reading strands the
+      // bar collapsed. Step 1 already restored everything visible, so
+      // leaving now is the correct state; the ResizeObserver fires again
+      // with a real size when the ancestor becomes visible.
+      if (this.clientWidth === 0) return;
       const style = getComputedStyle(this);
       const padL = parseFloat(style.paddingLeft) || 0;
       const padR = parseFloat(style.paddingRight) || 0;
@@ -329,7 +340,16 @@ export class UIToolbar extends UIElement {
       // Include horizontal margins — components like divider-ui add their own
       // margin-inline which getBoundingClientRect() does NOT include but flex
       // layout DOES count toward the row width.
+      // Grow-item guard (gh#528): a flex-grow child (a spacer, a stretched
+      // group) measures at its EXPANDED width — the row then always reads
+      // "full" and the last real action spills unrecoverably (the pattern
+      // bug gh#494's build hit). Measure grow items at their natural size
+      // by zeroing flex-grow for the read, then restoring.
+      const grown = all.filter(el => parseFloat(getComputedStyle(el).flexGrow) > 0);
+      const savedGrow = grown.map(el => el.style.flexGrow);
+      for (const el of grown) el.style.flexGrow = '0';
       const widths = all.map(el => outerWidth(el));
+      grown.forEach((el, i) => { el.style.flexGrow = savedGrow[i]; });
       const total = widths.reduce((a, w) => a + w, 0) + Math.max(0, all.length - 1) * gap;
 
       // Reserve OVERFLOW_BUFFER worth of headroom — start spilling sooner

package/components/toolbar/toolbar.yaml

@@ -41,6 +41,8 @@ states:
     description: Default, ready for interaction.
 traits: []
 tokens: {}
+requiredIcons:
+  - dots-three
 a2ui:
   rules:
     - rule: 'Horizontal action bar — hosts <button-ui>, <toolbar-group-ui>, and <divider-ui> children.'

package/components/tooltip/tooltip.class.js

@@ -192,22 +192,28 @@ export class UITooltip extends UIElement {
   /* Copy per-series `--color-{key}` custom properties from the target chart
      to the popover so inner rows can reference them. The popover lives in
      the top layer and does NOT inherit custom properties from the host,
-     so we bridge them explicitly at show time. */
+     so we bridge them explicitly at show time.
+
+     gh#561 — chart-ui no longer writes `--color-{key}` as an inline style
+     on itself (that shadowed ancestor overrides — the bug this issue
+     fixed). Resolve each declared series key's *effective* value via
+     getComputedStyle instead, which correctly picks up a value set on
+     the chart itself OR any ancestor. `legendData` (chart-ui's public
+     getter) enumerates every declared series key; targets without it
+     (non-chart-ui `for` targets, or charts with no y-keys) have nothing
+     to copy. */
   #copySeriesColorsFromTarget() {
     if (!this.#target || !this.#popover) return;
-    /* Prefer inline style on the target (what chart-ui's #injectSeriesColors
-       writes). Fall back to computed style resolution for any --color-* vars
-       the author set on ancestors. */
-    const inline = this.#target.style;
-    for (let i = 0; i < inline.length; i++) {
-      const name = inline[i];
-      if (name.startsWith('--color-')) {
-        this.#popover.style.setProperty(name, inline.getPropertyValue(name));
-      }
+    const cs = getComputedStyle(this.#target);
+    const keys = Array.isArray(this.#target.legendData)
+      ? this.#target.legendData.map((it) => it.key).filter(Boolean)
+      : [];
+    for (const key of keys) {
+      const v = cs.getPropertyValue(`--color-${key}`).trim();
+      if (v) this.#popover.style.setProperty(`--color-${key}`, v);
     }
     /* Also copy the 10 categorical palette slots so the fallback
        `var(--color-{key}, var(--chart-{slot}))` resolves. */
-    const cs = getComputedStyle(this.#target);
     for (let i = 0; i < 10; i++) {
       const v = cs.getPropertyValue(`--chart-${i}`).trim();
       if (v) this.#popover.style.setProperty(`--chart-${i}`, v);