@adia-ai/web-components 0.8.9 → 0.8.11

package/components/adia-wordmark/adia-wordmark.test.js

@@ -0,0 +1,69 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import '../../core/element.js';
+import './adia-wordmark.js';
+
+const tick = () => new Promise((r) => queueMicrotask(r));
+
+function mount(html) {
+  const wrap = document.createElement('div');
+  wrap.innerHTML = html;
+  document.body.appendChild(wrap);
+  return wrap.firstElementChild;
+}
+
+describe('adia-wordmark-ui', () => {
+  beforeEach(() => { document.body.innerHTML = ''; });
+
+  it('registers adia-wordmark-ui as a custom element', () => {
+    expect(customElements.get('adia-wordmark-ui')).toBeDefined();
+  });
+
+  it('defaults to size="md"', async () => {
+    const el = mount('<adia-wordmark-ui></adia-wordmark-ui>');
+    await tick();
+    expect(el.size).toBe('md');
+  });
+
+  it('reflects an explicit [size]', async () => {
+    const el = mount('<adia-wordmark-ui size="lg"></adia-wordmark-ui>');
+    await tick();
+    expect(el.size).toBe('lg');
+  });
+
+  it('defaults to inline=false and reflects an explicit [inline]', async () => {
+    const a = mount('<adia-wordmark-ui></adia-wordmark-ui>');
+    const b = mount('<adia-wordmark-ui inline></adia-wordmark-ui>');
+    await tick();
+    expect(a.inline).toBe(false);
+    expect(b.inline).toBe(true);
+    expect(b.getAttribute('inline')).toBe('');
+  });
+
+  it('sets role="img" and a default aria-label on connect', async () => {
+    const el = mount('<adia-wordmark-ui></adia-wordmark-ui>');
+    await tick();
+    expect(el.getAttribute('role')).toBe('img');
+    expect(el.getAttribute('aria-label')).toBe('Adia');
+  });
+
+  it('does not overwrite a consumer-authored aria-label', async () => {
+    const el = mount('<adia-wordmark-ui aria-label="Adia — home"></adia-wordmark-ui>');
+    await tick();
+    expect(el.getAttribute('aria-label')).toBe('Adia — home');
+  });
+
+  it('stamps the wordmark SVG with five glyph paths, no consumer-content conflict', async () => {
+    const el = mount('<adia-wordmark-ui></adia-wordmark-ui>');
+    await tick();
+    const svg = el.querySelector('svg');
+    expect(svg).toBeTruthy();
+    expect(el.querySelectorAll('[data-wordmark-glyph]').length).toBe(5);
+  });
+
+  it('renders identically regardless of size — static template, no interpolation', async () => {
+    const a = mount('<adia-wordmark-ui size="sm"></adia-wordmark-ui>');
+    const b = mount('<adia-wordmark-ui size="lg"></adia-wordmark-ui>');
+    await tick();
+    expect(a.innerHTML).toBe(b.innerHTML);
+  });
+});

package/components/adia-wordmark/adia-wordmark.yaml

@@ -0,0 +1,102 @@
+$schema: ../../../../scripts/schemas/component.yaml.schema.json
+name: UIAdiaWordmark
+tag: adia-wordmark-ui
+status: stable
+component: AdiaWordmark
+category: display
+version: 1
+description: >-
+  The Adia wordmark — the "Adia" text logotype rendered as inline SVG.
+  Unlike `adia-mark-ui` (gh#283's fixed inverse-on-inverse square tile),
+  this is a standalone mark meant to sit directly on a surface: its fill
+  defaults to the current scheme's on-surface foreground token
+  (`--a-fg-strong`) rather than a fixed inverse pairing, so it reads
+  correctly wherever it's placed — a login header, a footer, a splash
+  screen — without needing a background chip (gh#390).
+props:
+  size:
+    description: Height of the wordmark; width follows via the fixed aspect ratio. Matches adia-mark-ui's size ladder for visual consistency when the two sit side by side.
+    type: string
+    default: md
+    enum:
+      - sm
+      - md
+      - lg
+    reflect: true
+  inline:
+    description: Renders as `display:inline-block` instead of the block-level default (ADR-0037) — set this when the wordmark sits beside a text run rather than standing alone.
+    type: boolean
+    default: false
+    reflect: true
+events: {}
+slots: {}
+states:
+  - name: default
+    description: The only state — a static, non-interactive wordmark.
+traits: []
+tokens:
+  --adia-wordmark-height:
+    description: Height of the wordmark; width follows via aspect-ratio.
+    default: 1.5rem
+  --adia-wordmark-fg:
+    description: Wordmark fill — defaults to the on-surface foreground token. Themeable (unlike adia-mark-ui's fixed inverse pairing), since this mark already sits directly on a surface rather than owning its own background chip.
+    default: var(--a-fg-strong)
+a2ui:
+  rules:
+    - Use <AdiaWordmark> for the Adia text logotype standing alone directly on a surface — a login/marketing header, a footer, an about panel, a splash screen with no background chip. Use <AdiaMark> instead for the square icon/tile use (app-switcher slot, favicon-style avatar).
+    - Do not wrap <AdiaWordmark> in <Icon> or pass it a color/tone override tied to an inverse pairing — it has no [name] prop, always renders the same logotype path data, and its fill is meant to track the current surface's foreground token.
+    - Prefer <AdiaWordmark size="sm"> in a nav/topbar brand slot; reserve larger sizes (lg, xl) for splash or login screens. Set [inline] only when the wordmark sits directly inside a run of prose text, not inside a Row/flex layout (block-level children compose fine as flex items already).
+anti_patterns:
+  - wrong: |
+      <icon-ui name="adia"></icon-ui>
+    why: |
+      icon-ui only resolves Phosphor glyph names from the registry; there
+      is no "adia" Phosphor icon, and registering one would misuse a
+      third-party glyph set for a proprietary wordmark.
+    fix: |
+      <adia-wordmark-ui size="sm"></adia-wordmark-ui>
+  - wrong: |
+      <adia-mark-ui size="sm"></adia-mark-ui>
+    why: |
+      adia-mark-ui is the fixed inverse-on-inverse SQUARE TILE (gh#283) —
+      always a background chip with the wordmark cut out, sized for an
+      app-switcher/favicon slot. It is not interchangeable with the
+      standalone text logotype meant to sit directly on a surface.
+    fix: |
+      <adia-wordmark-ui size="sm"></adia-wordmark-ui>
+examples:
+  - name: login-header-wordmark
+    description: Standalone wordmark in a login/marketing header, no background chip needed.
+    a2ui: >-
+      [
+        {
+          "id": "brand-row",
+          "component": "Row",
+          "gap": "2",
+          "align": "center",
+          "children": ["wordmark"]
+        },
+        {
+          "id": "wordmark",
+          "component": "AdiaWordmark",
+          "size": "sm"
+        }
+      ]
+keywords:
+  - adia
+  - wordmark
+  - logotype
+  - text logo
+  - identity
+synonyms:
+  wordmark:
+    - adia
+    - logotype
+    - text logo
+  logotype:
+    - adia
+    - wordmark
+related:
+  - AdiaMark
+  - Icon
+  - Image

package/components/avatar/avatar-group.a2ui.json

@@ -22,7 +22,7 @@
       "default": 5
     },
     "size": {
-      "description": "Forwards to each child <avatar-ui> (xs|sm|md|lg|xl). Empty uses the per-avatar size.",
+      "description": "Forwards to each child <avatar-ui> (sm|md|lg). Empty uses the per-avatar size. For denser or larger sets, set [scale] on an ancestor.",
       "type": "string"
     }
   },

package/components/avatar/avatar-group.yaml

@@ -23,7 +23,7 @@ props:
     type: number
     default: 5
   size:
-    description: Forwards to each child <avatar-ui> (xs|sm|md|lg|xl). Empty uses the per-avatar size.
+    description: Forwards to each child <avatar-ui> (sm|md|lg). Empty uses the per-avatar size. For denser or larger sets, set [scale] on an ancestor.
     type: string
 
 keywords:

package/components/avatar/avatar.a2ui.json

@@ -31,14 +31,12 @@
       "default": "circle"
     },
     "size": {
-      "description": "Avatar size — canonical scale.",
+      "description": "Avatar size (sm/md/lg). The former xs/xl diameters are the ancestor-[scale] grid cells (scale=\"ui-sm\", size=\"sm\") / (scale=\"ui-lg\", size=\"lg\").",
       "type": "string",
       "enum": [
-        "xs",
         "sm",
         "md",
-        "lg",
-        "xl"
+        "lg"
       ],
       "default": "md"
     },

package/components/avatar/avatar.css

@@ -11,12 +11,12 @@
     --avatar-font-size:   var(--a-ui-sm);
     --avatar-font-weight: var(--a-weight-medium);
 
-    /* Sizes */
-    --avatar-size-xs:     1.25rem;
+    /* Sizes — sm/md/lg only; the removed xs/xl rows live on as the
+       ancestor-[scale] grid cells (ui-sm, sm) / (ui-lg, lg), which
+       re-table this family (styles/scale.css). */
     --avatar-size-sm:     1.75rem;
     --avatar-size-md:     2.5rem;
     --avatar-size-lg:     3.5rem;
-    --avatar-size-xl:     4.5rem;
   }
 
   :scope {
@@ -59,11 +59,9 @@
   }
 
   /* ── Sizes ── */
-  :scope[size="xs"] { --avatar-size: var(--avatar-size-xs); --avatar-font-size: var(--a-ui-sm); }
   :scope[size="sm"] { --avatar-size: var(--avatar-size-sm); --avatar-font-size: var(--a-ui-sm); }
   :scope[size="md"] { --avatar-size: var(--avatar-size-md); --avatar-font-size: var(--a-ui-sm); }
   :scope[size="lg"] { --avatar-size: var(--avatar-size-lg); --avatar-font-size: var(--a-ui-md); }
-  :scope[size="xl"] { --avatar-size: var(--avatar-size-xl); --avatar-font-size: var(--a-ui-lg); }
 
   /* ── Shape ── */
   :scope[shape="circle"] { --avatar-radius: var(--a-radius-full); }
@@ -84,11 +82,19 @@ avatar-group-ui:hover > [slot="overflow"] {
 
 @scope (avatar-group-ui) {
   :where(:scope) {
-    /* ── Layout ── */
-    --avatar-group-overlap:       -0.5rem;
+    /* ── Layout — counter/overlap are 3-row families so the ancestor
+       [scale] tiers can re-table them (styles/scale.css), mirroring
+       the --avatar-size-* family. ── */
+    --avatar-group-counter-size-sm: 1.75rem;
+    --avatar-group-counter-size-md: 2rem;
+    --avatar-group-counter-size-lg: 3.5rem;
+    --avatar-group-overlap-sm:    -0.4rem;
+    --avatar-group-overlap-md:    -0.5rem;
+    --avatar-group-overlap-lg:    -0.625rem;
+    --avatar-group-overlap:       var(--avatar-group-overlap-md);
     --avatar-group-spread:        var(--a-space-0-5);
     --avatar-group-overflow-px:   var(--a-space-1);
-    --avatar-group-counter-size:  2rem;
+    --avatar-group-counter-size:  var(--avatar-group-counter-size-md);
 
     /* ── Colors ── */
     --avatar-group-border:        2px solid var(--md-sys-color-neutral-background);
@@ -151,8 +157,6 @@ avatar-group-ui:hover > [slot="overflow"] {
   }
 
   /* Size variants — adjust counter + overlap */
-  :scope[size="xs"] { --avatar-group-counter-size: 1.25rem; --avatar-group-overlap: -0.3rem; }
-  :scope[size="sm"] { --avatar-group-counter-size: 1.75rem; --avatar-group-overlap: -0.4rem; }
-  :scope[size="lg"] { --avatar-group-counter-size: 3.5rem;  --avatar-group-overlap: -0.625rem; }
-  :scope[size="xl"] { --avatar-group-counter-size: 4.5rem;  --avatar-group-overlap: -0.75rem; }
+  :scope[size="sm"] { --avatar-group-counter-size: var(--avatar-group-counter-size-sm); --avatar-group-overlap: var(--avatar-group-overlap-sm); }
+  :scope[size="lg"] { --avatar-group-counter-size: var(--avatar-group-counter-size-lg); --avatar-group-overlap: var(--avatar-group-overlap-lg); }
 }

package/components/avatar/avatar.d.ts

@@ -23,8 +23,8 @@ export class UIAvatar extends UIElement {
   icon: string;
   /** Avatar shape */
   shape: 'circle' | 'square';
-  /** Avatar size — canonical scale. */
-  size: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  /** Avatar size (sm/md/lg). The former xs/xl diameters are the ancestor-[scale] grid cells (scale="ui-sm", size="sm") / (scale="ui-lg", size="lg"). */
+  size: 'sm' | 'md' | 'lg';
   /** Image source URL. Falls back to initials on error. */
   src: string;
   /** Display string (full name or initials). Initials derive from spaces — first letter of each word, max 2. */
@@ -34,6 +34,6 @@ export class UIAvatar extends UIElement {
 export class UIAvatarGroup extends UIElement {
   /** Maximum avatars to show before the +N overflow indicator. */
   max: number;
-  /** Forwards to each child <avatar-ui> (xs|sm|md|lg|xl). Empty uses the per-avatar size. */
+  /** Forwards to each child <avatar-ui> (sm|md|lg). Empty uses the per-avatar size. For denser or larger sets, set [scale] on an ancestor. */
   size: string;
 }

package/components/avatar/avatar.examples.md

@@ -9,7 +9,7 @@
 ## size
 
 ```html
-<avatar-ui text="XS" size="xs"></avatar-ui>
+<avatar-ui text="SM" size="sm"></avatar-ui>
 ```
 
 ## shape

package/components/avatar/avatar.yaml

@@ -35,15 +35,13 @@ props:
       - circle
       - square
   size:
-    description: Avatar size — canonical scale.
+    description: Avatar size (sm/md/lg). The former xs/xl diameters are the ancestor-[scale] grid cells (scale="ui-sm", size="sm") / (scale="ui-lg", size="lg").
     type: string
     default: md
     enum:
-      - xs
       - sm
       - md
       - lg
-      - xl
   src:
     description: Image source URL. Falls back to initials on error.
     type: string

package/components/badge/badge.a2ui.json

@@ -22,14 +22,12 @@
       "default": ""
     },
     "size": {
-      "description": "Badge size",
+      "description": "Badge size (sm/md/lg). For a denser or larger register, set [scale] on an ancestor.",
       "type": "string",
       "enum": [
-        "xs",
         "sm",
         "md",
-        "lg",
-        "xl"
+        "lg"
       ],
       "default": "md"
     },

package/components/badge/badge.d.ts

@@ -21,8 +21,8 @@ import { UIElement } from '../../core/element.js';
 export class UIBadge extends UIElement {
   /** Optional leading icon (any registered name). Use icon="dot" for chart-legend / status-pip chips. Inherits the variant's foreground color so the dot matches the label. */
   icon: string;
-  /** Badge size */
-  size: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  /** Badge size (sm/md/lg). For a denser or larger register, set [scale] on an ancestor. */
+  size: 'sm' | 'md' | 'lg';
   /** Semantic status shorthand. Auto-maps to variant and sets text. `new` → success "New"; `updated` → info "Updated"; `deprecated` → warning "Deprecated"; `removed` → danger "Removed"; `beta` → accent "Beta". Use `variant` + `text` directly for custom chips. */
   status: 'new' | 'updated' | 'deprecated' | 'removed' | 'beta';
   /** Badge text content. Falls back to existing textContent. */

package/components/badge/badge.yaml

@@ -25,15 +25,13 @@ props:
     type: string
     default: ""
   size:
-    description: Badge size
+    description: Badge size (sm/md/lg). For a denser or larger register, set [scale] on an ancestor.
     type: string
     default: md
     enum:
-      - xs
       - sm
       - md
       - lg
-      - xl
   status:
     description: Semantic status shorthand. Auto-maps to variant and sets text.
       `new` → success "New"; `updated` → info "Updated"; `deprecated` → warning

package/components/button/button.a2ui.json

@@ -54,14 +54,12 @@
       "default": ""
     },
     "size": {
-      "description": "Sizing scale (xs/sm/md/lg/xl).",
+      "description": "Sizing scale (sm/md/lg). For a denser or larger register, set [scale] on an ancestor (scale=\"ui-sm\" … \"content-lg\") — scale picks the table, size picks the row.",
       "type": "string",
       "enum": [
-        "xs",
         "sm",
         "md",
-        "lg",
-        "xl"
+        "lg"
       ],
       "default": "md"
     },

package/components/button/button.d.ts

@@ -23,8 +23,8 @@ export class UIButton extends UIElement {
   disabled: boolean;
   /** Leading Phosphor icon name (rendered before text). */
   icon: string;
-  /** Sizing scale (xs/sm/md/lg/xl). */
-  size: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  /** Sizing scale (sm/md/lg). For a denser or larger register, set [scale] on an ancestor (scale="ui-sm" … "content-lg") — scale picks the table, size picks the row. */
+  size: 'sm' | 'md' | 'lg';
   /** Makes the button stretch to fill the parent's width */
   stretch: boolean;
   /** Button text, rendered via CSS attr(text) on ::after */

package/components/button/button.yaml

@@ -42,15 +42,13 @@ props:
     type: string
     default: ""
   size:
-    description: "Sizing scale (xs/sm/md/lg/xl)."
+    description: "Sizing scale (sm/md/lg). For a denser or larger register, set [scale] on an ancestor (scale=\"ui-sm\" … \"content-lg\") — scale picks the table, size picks the row."
     type: string
     default: md
     enum:
-      - xs
       - sm
       - md
       - lg
-      - xl
   text:
     description: Button text, rendered via CSS attr(text) on ::after
     type: string

package/components/calendar-grid/calendar-grid.class.js

@@ -168,9 +168,9 @@ export class UICalendarGrid extends UIElement {
     // respects the consumer-authored tabindex="-1", so the nav carets stay
     // out of the roving-tabindex day-grid's tab sequence exactly as before.
     let h = `<div data-cal-header>
-      <button-ui variant="ghost" size="xs" icon="caret-left" data-cal-prev aria-label="Previous month" tabindex="-1"></button-ui>
+      <button-ui variant="ghost" size="sm" icon="caret-left" data-cal-prev aria-label="Previous month" tabindex="-1"></button-ui>
       <span data-cal-title>${MONTHS_LONG[month]} ${year}</span>
-      <button-ui variant="ghost" size="xs" icon="caret-right" data-cal-next aria-label="Next month" tabindex="-1"></button-ui>
+      <button-ui variant="ghost" size="sm" icon="caret-right" data-cal-next aria-label="Next month" tabindex="-1"></button-ui>
     </div>`;
 
     // Day-of-week header
@@ -181,36 +181,39 @@ export class UICalendarGrid extends UIElement {
     const daysInMonth  = new Date(year, month + 1, 0).getDate();
     const daysInPrev   = new Date(year, month, 0).getDate();
 
-    h += '<div data-cal-grid>';
-
-    // Previous-month trailing days (outside, disabled)
-    for (let i = firstDay - 1; i >= 0; i--) {
-      const day = daysInPrev - i;
-      h += `<button-ui variant="ghost" data-cal-day data-outside disabled tabindex="-1" text="${day}"></button-ui>`;
-    }
-
-    // Current-month days
-    for (let d = 1; d <= daysInMonth; d++) {
-      const date       = new Date(year, month, d);
-      const iso        = toISO(year, month, d);
-      const isToday    = sameDay(date, today);
-      const isSelected = selected && sameDay(date, selected);
-      const isDisabled = (minDate && date < minDate) || (maxDate && date > maxDate);
-      const isFocused  = this.#focusedDay === d;
+    // <button-ui variant="ghost" text="…"> (gh issue 276 wave 4) — the day
+    // number moves from element text content to the `text` attribute, which
+    // button-ui renders via CSS attr(text) on its ::after.
+    //
+    // Shared by all three day-loops (prev-month filler / current-month /
+    // next-month filler) so today/selected/in-range predicates stay
+    // consistent across a month boundary (gh#368) — a range spanning two
+    // months must show a continuous in-range band through the filler days
+    // representing the adjacent month, not just within each month's own
+    // cells. Filler days pass `outside: true`, which forces them
+    // disabled/unfocusable/unclickable regardless of the computed
+    // predicates — this only affects the highlight band's visual
+    // continuity, never selectability.
+    const dayCell = (date, day, outside) => {
+      const iso = toISO(date.getFullYear(), date.getMonth(), date.getDate());
+      const isToday      = sameDay(date, today);
+      const isSelected   = !!(selected && sameDay(date, selected));
       // In-range: strictly between rangeStart and rangeEnd (endpoints
       // themselves render as `[data-selected]` via the `value` prop;
       // marking them in-range too would double-up the styling).
-      const isInRange = !!(rangeFrom && rangeTo
+      const isInRange    = !!(rangeFrom && rangeTo
         && date > rangeFrom && date < rangeTo);
       // Range endpoint flags — let CSS render the start/end cell with
-      // half-pill caps so the in-range strip reads as a continuous
-      // band when displayed next to the in-range cells.
+      // half-pill caps so the in-range strip reads as a continuous band
+      // when displayed next to the in-range cells.
       const isRangeStart = !!(rangeFrom && sameDay(date, rangeFrom));
       const isRangeEnd   = !!(rangeTo   && sameDay(date, rangeTo));
+      const isDisabled   = outside || (minDate && date < minDate) || (maxDate && date > maxDate);
+      const isFocused    = !outside && this.#focusedDay === day;
 
       const attrs = [
         'data-cal-day',
-        `data-date="${iso}"`,
+        outside ? 'data-outside' : `data-date="${iso}"`,
         isToday      ? 'data-today' : '',
         isSelected   ? 'data-selected' : '',
         isInRange    ? 'data-in-range' : '',
@@ -221,17 +224,31 @@ export class UICalendarGrid extends UIElement {
         `tabindex="${isFocused ? '0' : '-1'}"`,
       ].filter(Boolean).join(' ');
 
-      // <button-ui variant="ghost" text="…"> (gh issue 276 wave 4) — the day
-      // number moves from element text content to the `text` attribute,
-      // which button-ui renders via CSS attr(text) on its ::after.
-      h += `<button-ui variant="ghost" ${attrs} text="${d}"></button-ui>`;
+      return `<button-ui variant="ghost" ${attrs} text="${day}"></button-ui>`;
+    };
+
+    h += '<div data-cal-grid>';
+
+    // Previous-month trailing days (outside, disabled)
+    const prevMonth = month === 0 ? 11 : month - 1;
+    const prevYear  = month === 0 ? year - 1 : year;
+    for (let i = firstDay - 1; i >= 0; i--) {
+      const day = daysInPrev - i;
+      h += dayCell(new Date(prevYear, prevMonth, day), day, true);
+    }
+
+    // Current-month days
+    for (let d = 1; d <= daysInMonth; d++) {
+      h += dayCell(new Date(year, month, d), d, false);
     }
 
     // Next-month leading days
     const totalCells = firstDay + daysInMonth;
     const remaining  = (7 - (totalCells % 7)) % 7;
+    const nextMonth = month === 11 ? 0 : month + 1;
+    const nextYear  = month === 11 ? year + 1 : year;
     for (let d = 1; d <= remaining; d++) {
-      h += `<button-ui variant="ghost" data-cal-day data-outside disabled tabindex="-1" text="${d}"></button-ui>`;
+      h += dayCell(new Date(nextYear, nextMonth, d), d, true);
     }
 
     h += '</div>';

package/components/calendar-grid/calendar-grid.css

@@ -115,7 +115,7 @@
     color: var(--calendar-grid-title-fg);
   }
 
-  /* Stamped <button-ui variant="ghost" size="xs" icon="caret-…"> (gh issue
+  /* Stamped <button-ui variant="ghost" size="sm" icon="caret-…"> (gh issue
      276 wave 4) — icon-only (no [text], no child text) so button-ui's own
      [data-icon-only] rule already squares it to --button-height; pointing
      --button-height at the nav size (not just literal width/height) avoids

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

@@ -196,9 +196,9 @@ export class UICalendarPicker extends UIFormElement {
     // the default tab order (unlike calendar-grid-ui's, which are pulled out
     // via tabindex="-1" for its inline roving-tabindex day grid).
     let h = `<div data-cal-header>
-      <button-ui variant="ghost" size="xs" icon="caret-left" data-cal-prev aria-label="Previous month"></button-ui>
+      <button-ui variant="ghost" size="sm" icon="caret-left" data-cal-prev aria-label="Previous month"></button-ui>
       <span data-cal-title>${MONTHS_LONG[month]} ${year}</span>
-      <button-ui variant="ghost" size="xs" icon="caret-right" data-cal-next aria-label="Next month"></button-ui>
+      <button-ui variant="ghost" size="sm" icon="caret-right" data-cal-next aria-label="Next month"></button-ui>
     </div>`;
 
     // Day-of-week header

package/components/calendar-picker/calendar-picker.css

@@ -232,7 +232,7 @@ calendar-picker-ui [data-cal-title] {
   color: var(--calendar-picker-title-fg);
 }
 
-/* Stamped <button-ui variant="ghost" size="xs" icon="caret-…"> (gh issue 276
+/* Stamped <button-ui variant="ghost" size="sm" icon="caret-…"> (gh issue 276
    wave 4) — icon-only (no [text], no child text) so button-ui's own
    [data-icon-only] rule already squares it to --button-height; pointing
    --button-height at the nav size (not just literal height below) avoids

package/components/card/card.css

@@ -61,7 +61,7 @@
     box-shadow: var(--card-shadow);
     overflow: hidden;
     corner-shape: superellipse(1.1);
-    width: stretch;
+    flex: 1 1 auto;
   }
 
   /* ═══════ Variants — token-only overrides ═══════ */

package/components/chat-thread/chat-input.css

@@ -241,7 +241,7 @@ chat-input-ui textarea-ui:not([disabled]) [slot="text"]:hover {
     border: 1px solid var(--chat-input-image-border);
   }
 
-  /* Attachment-remove — a stamped <button-ui variant="ghost" size="xs"
+  /* Attachment-remove — a stamped <button-ui variant="ghost" size="sm"
      icon="x"> (gh issue 276: no native <button> in stamped DOM); the
      floating filled-circle look rides button token re-points. */
   [slot="preview"] [data-preview-remove] {

package/components/combobox/combobox.class.js

@@ -241,7 +241,7 @@ export class UICombobox extends UIFormElement {
               aria-controls="${listboxId}"
               aria-labelledby="${labelId}"
               data-placeholder="${escapeHTML(this.placeholder || '')}"></span>
-        <button-ui variant="ghost" size="xs" data-clear aria-label="Clear" tabindex="-1" style="display:none"><icon-ui slot="icon" name="x-circle"></icon-ui></button-ui>
+        <button-ui variant="ghost" size="sm" data-clear aria-label="Clear" tabindex="-1" style="display:none"><icon-ui slot="icon" name="x-circle"></icon-ui></button-ui>
         <span data-suffix>
           <icon-ui name="caret-down"></icon-ui>
         </span>

package/components/combobox/combobox.css

@@ -161,7 +161,7 @@
     align-items: center;
   }
 
-  /* Clear x — a stamped <button-ui variant="ghost" size="xs"> kept
+  /* Clear x — a stamped <button-ui variant="ghost" size="sm"> kept
      mouse-only via tabindex="-1" (gh issue 276: no native <button> in
      stamped DOM); colors/geometry ride button token re-points. */
   [data-clear] {

package/components/icon/icon.a2ui.json

@@ -27,7 +27,7 @@
       "default": ""
     },
     "size": {
-      "description": "Icon size. Accepts the named scale (`xs` 12px / `sm` 14px / `md` 16px / `lg` 20px / `xl` 32px / `2xl` 48px / `3xl` 64px / `4xl` 96px / `fill` 100% of parent) or a free-form pixel / rem / em value as a string (\"48\", \"3rem\", \"1.25em\"). Overrides the inherited `--a-icon-size` from the universal `[size]` system on ancestors.",
+      "description": "Icon size. Named tiers `sm` 14px / `md` 16px / `lg` 20px ride the universal `[size]` system (`--a-icon-size`), which the ancestor `[scale]` tiers re-table. Anything beyond the row is a free-form pixel / rem / em / percent string (\"48\", \"3rem\", \"1.25em\", \"100%\" fills the parent box).",
       "type": "string",
       "default": ""
     },

package/components/icon/icon.class.js

@@ -100,10 +100,10 @@ export class UIIcon extends UIElement {
     // and is correctly NOT flagged here.
     else if (this.name && !svg) warnIfIconRegistryUnwired();
 
-    // Pixel / rem / em passthrough — `size="48"` → 48px,
-    // `size="3.5rem"` → 3.5rem. Named-scale values (xs/sm/md/lg/xl/
-    // 2xl/3xl/4xl/fill) are handled by `:scope[size="…"]` rules in
-    // icon.css; we only set --icon-size inline for free-form values.
+    // Pixel / rem / em / % passthrough — `size="48"` → 48px,
+    // `size="3.5rem"` → 3.5rem, `size="100%"` → fill the parent box.
+    // Named sm/md/lg ride the universal [size] system (--a-icon-size);
+    // we only set --icon-size inline for free-form values.
     if (this.size && this.#isFreeFormSize(this.size)) {
       this.style.setProperty('--icon-size', this.#normalizeSize(this.size));
     } else if (this.style.getPropertyValue('--icon-size')) {
@@ -112,7 +112,7 @@ export class UIIcon extends UIElement {
   }
 
   #isFreeFormSize(s) {
-    return /^\d+(\.\d+)?(px|rem|em)?$/.test(s);
+    return /^\d+(\.\d+)?(px|rem|em|%)?$/.test(s);
   }
 
   #normalizeSize(s) {