@adia-ai/web-components 0.8.23 → 0.8.24

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog — @adia-ai/web-components
 
+## [0.8.24] — 2026-07-30
+
+### Fixed
+- **`list-item-ui` two-line items center the leading glyph on the whole item** (gh#558, operator screenshot). The icon was pinned to the title row, hanging 9–18px above the item center on title+description rows — Material's two-line convention centers it. Explicit `grid-row: 1 / span 2` scoped by `:has([slot="description"])` (with no `grid-template-rows` the explicit grid has zero rows, so the old `1 / -1` collapsed to one row — the reason the earlier anatomy comment called them "identical"); single-line items untouched (probe: two-line offset 0/0/0, single-line 24px rows unchanged).
+- **`card-ui` pins a direct `<footer>` to the card bottom** (gh#559, operator screenshot). In an equal-height grid row, a shorter card's CTA floated at content end (Free tier 42px above the edge vs 17px on its siblings) — the buttons were already in footers; the card just had no pinning rule. `:has(> footer)` promotes the card to a flex column with `margin-top: auto` on the footer; footerless cards keep block flow. Probe: 17/17/17.
+- **`requiredIcons` drift cleared across 16 components** (gh#550). Eight primitives that auto-stamp icons (alert/drawer/feed/modal `x`, input steppers `caret-up`/`caret-down`, nav-group `caret-right`, swiper `caret-left`/`caret-right`, toolbar overflow `dots-three`) now declare `static requiredIcons`, mirrored in their yaml SoTs (calendar-grid and pagination gained the missing yaml blocks); four stale declarations pruned (combobox `check`, date-range-picker `arrow-right`, datetime-picker `clock`, select `magnifying-glass` — none ever stamped) and agent-questions' leftover yaml block removed (options render via option-card-ui since gh#276). Checker itself hardened: `//` line comments no longer read as stamp sites (button `plus` false positive) and yaml list entries may carry trailing `#` comments (select's three phantom mismatches). 125/125 components clean.
+- **`toolbar-ui` overflow measurement traps closed** (gh#528). (1) Flex-grow children (spacers, stretched groups) measured at their EXPANDED width, so the row always read "full" and the last action spilled unrecoverably — grow is zeroed for the read and restored. (2) A `display:none` mount committed a spill from a 0-width reading and stranded the bar collapsed — a zero-width guard now leaves everything visible until the ResizeObserver delivers a real size. Browser-verified both ways.
+- **Corpus/demo enum drift swept** (gh#529): 41 uses of never-implemented values (Tag `muted`/`primary`, Text `primary`/`muted`/`xxl`, Card `soft`/`primary`, Badge `subtle`, Chart `muted`, Button `danger`) mapped to their nearest real values across 15 harvest sources — they silently rendered as defaults. `verify:corpus` warnings 138 → 97.
+- **10 standalone example routes actually render** (gh#530): the sitemap pointed iframe-served routes at headless `.contents.html` fragments; thin standalone wrappers added (single-source fetch-inject), annotations repointed, `frame`/`theme-provider` demos wired for phosphor. 108/108 clean. The `check-required-icons` checker also now reads `<comp>.class.js` and all stamp shapes — 20 false positives gone, 19 real findings exposed → gh#550.
+
+### Maintenance
+- **`dist/` bundles rebuilt** in this cut's window (4 file(s)) — regenerated from the source changes described above, not independent edits.
+- **`patterns/` touched in this release window** (7 file(s), e.g. `admin-keys-and-export/admin-keys-and-export.examples.html`) — carried by the entries above.
+
 ## [0.8.23] — 2026-07-30
 
 ### Removed

package/components/agent-questions/agent-questions.yaml

@@ -56,8 +56,6 @@ states:
     description: Default, ready for interaction.
 traits: []
 tokens: {}
-requiredIcons:
-  - check
 a2ui:
   rules:
     - rule: 'Multi-choice clarifying-question card emitted by an agent when it needs disambiguation before proceeding.'

package/components/alert/alert.class.js

@@ -42,6 +42,11 @@ function _warnOnce(key, message) {
 }
 
 export class UIAlert 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 = ['x'];
+
   static properties = {
     text:        { type: String,  default: '', reflect: true },
     title:       { type: String,  default: '', reflect: true },

package/components/alert/alert.yaml

@@ -173,6 +173,8 @@ states:
     description: Default, ready for interaction.
 traits: []
 tokens: {}
+requiredIcons:
+  - x
 a2ui:
   rules:
     - rule: 'Inline alert/banner for status messages within a content region. Severity via variant (info, success, warn, error).'

package/components/calendar-grid/calendar-grid.yaml

@@ -108,6 +108,9 @@ tokens:
   --calendar-grid-day-today-color:
     description: Accent color used for the today-indicator dot + numeral tint.
     default: var(--md-sys-color-primary)
+requiredIcons:
+  - caret-left
+  - caret-right
 a2ui:
   rules:
     - >-

package/components/card/card.css

@@ -68,6 +68,18 @@
     flex: 1 1 auto;
   }
 
+  /* A card with a direct footer pins it to the bottom edge (gh#559):
+     in an equal-height grid/flex row, a shorter card's CTA otherwise
+     floats at content end while its siblings' sit lower. Scoped via
+     :has(> footer) so footerless cards keep plain block flow. */
+  :scope:has(> footer) {
+    display: flex;
+    flex-direction: column;
+  }
+  :scope > footer {
+    margin-top: auto;
+  }
+
   /* ═══════ Variants — token-only overrides ═══════ */
 
   /* `outline` is a documented alias for `outlined` (yaml). */

package/components/combobox/combobox.class.js

@@ -58,7 +58,7 @@ export class UICombobox extends UIFormElement {
   // base-class deprecation warning that targets inert above-field labels.
   static labelDeprecated = false;
 
-  static requiredIcons = ['caret-down', 'x-circle', 'check'];
+  static requiredIcons = ['caret-down', 'x-circle'];
 
   static properties = {
     ...UIFormElement.properties,

package/components/combobox/combobox.yaml

@@ -257,7 +257,6 @@ tokens:
 requiredIcons:
   - caret-down
   - x-circle
-  - check
 a2ui:
   rules:
     - >-

package/components/date-range-picker/date-range-picker.class.js

@@ -130,7 +130,7 @@ export class UIDateRangePicker extends UIFormElement {
   // §154: Phosphor icons this primitive auto-stamps (without consumer
   // markup). Aggregated by installIconLoadersForRegistered() across all
   // defined elements. Audited by check-required-icons.mjs.
-  static requiredIcons = ['calendar', 'caret-down', 'arrow-right'];
+  static requiredIcons = ['calendar', 'caret-down'];
 
   static get properties() {
     return {

package/components/date-range-picker/date-range-picker.yaml

@@ -195,7 +195,6 @@ tokens:
 requiredIcons:
   - calendar
   - caret-down
-  - arrow-right
 a2ui:
   rules:
     - rule: 'DateRangePicker.value MUST be `{from, to}` with both ISO 8601 dates, OR null. Either side null is invalid mid-state and the validator should reject it (use `input` event for partial state).'

package/components/datetime-picker/datetime-picker.class.js

@@ -122,7 +122,7 @@ export class UIDatetimePicker extends UIFormElement {
   // §154: Phosphor icons this primitive auto-stamps (without consumer
   // markup). Aggregated by installIconLoadersForRegistered() across all
   // defined elements. Audited by check-required-icons.mjs.
-  static requiredIcons = ['calendar', 'clock', 'caret-down'];
+  static requiredIcons = ['calendar', 'caret-down'];
 
   static get properties() {
     return {

package/components/datetime-picker/datetime-picker.yaml

@@ -210,7 +210,6 @@ tokens:
     default: var(--a-easing)
 requiredIcons:
   - calendar
-  - clock
   - caret-down
 a2ui:
   rules:

package/components/drawer/drawer.class.js

@@ -60,6 +60,11 @@ export class UIDrawer extends UIElement {
   // doesn't carry a stale reason. Per FEEDBACK-06 §2.
   #closeReason = 'programmatic';
 
+  // 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 },
     side:      { type: String,  default: 'right', reflect: true },

package/components/drawer/drawer.yaml

@@ -131,6 +131,8 @@ states:
     description: Default, ready for interaction.
 traits: []
 tokens: {}
+requiredIcons:
+  - x
 a2ui:
   rules:
     - >-

package/components/feed/feed.class.js

@@ -43,6 +43,11 @@ import { UIElement, html } from '../../core/element.js';
 /* ── Container — one per position, mounted into document.body ── */
 
 export class UIFeedContainer 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 = ['x'];
+
   static properties = {
     position: { type: String, default: 'bottom-right', reflect: true },
     max:      { type: Number, default: 5,              reflect: true },

package/components/feed/feed.yaml

@@ -57,6 +57,8 @@ related:
   - Toast
   - Alert
 
+requiredIcons:
+  - x
 a2ui:
   rules:
     - rule: 'Top-layer notification feed channel — singleton per position (top-right, bottom-center, etc.) mounted lazily into document.body.'

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/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.'