@adia-ai/web-components 0.8.10 → 0.8.11

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

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/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) {

package/components/icon/icon.css

@@ -18,19 +18,11 @@
     height: 100%;
   }
 
-  /* ── Named size scale ─────────────────────────────────────────────
-     sm/md/lg are also driven by the universal `[size]` token system
-     on ancestors (tokens.css §SIZE PRESETS) — these rules let an
-     icon-ui set its own size locally. xs / xl / 2xl / 3xl / 4xl
-     extend the scale beyond the universal range for hero placeholder
-     contexts. `fill` matches the parent box. */
-  :scope[size="xs"]   { --icon-size: 0.75rem; }   /* 12px */
-  :scope[size="sm"]   { --icon-size: 0.875rem; }  /* 14px */
-  :scope[size="md"]   { --icon-size: 1rem; }      /* 16px */
-  :scope[size="lg"]   { --icon-size: 1.25rem; }   /* 20px */
-  :scope[size="xl"]   { --icon-size: 2rem; }      /* 32px */
-  :scope[size="2xl"]  { --icon-size: 3rem; }      /* 48px */
-  :scope[size="3xl"]  { --icon-size: 4rem; }      /* 64px */
-  :scope[size="4xl"]  { --icon-size: 6rem; }      /* 96px */
-  :scope[size="fill"] { --icon-size: 100%; }
+  /* ── Size ─────────────────────────────────────────────────────────
+     Grid-native: sm/md/lg come from the universal `[size]` token
+     system (--a-icon-size), which the ancestor [scale] tiers re-table
+     — no per-size rules of icon's own. Values beyond the row (hero
+     placeholders, fill-the-parent) use the free-form string prop
+     (size="48", size="3rem", size="100%"), which sets --icon-size
+     inline from icon.class.js. */
 }

package/components/icon/icon.d.ts

@@ -17,7 +17,7 @@ export class UIIcon extends UIElement {
   label: string;
   /** Icon name from registry */
   name: string;
-  /** 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. */
+  /** 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). */
   size: string;
   /** Icon weight — selects the Phosphor weight variant (thin/light/regular/bold/fill/duotone). */
   weight: 'thin' | 'light' | 'regular' | 'bold' | 'fill' | 'duotone';

package/components/icon/icon.examples.md

@@ -9,7 +9,7 @@
 ## size
 
 ```html
-<icon-ui name="star" size="xs"></icon-ui>
+<icon-ui name="star" size="12"></icon-ui>
 ```
 
 ## label

package/components/icon/icon.yaml

@@ -24,12 +24,11 @@ props:
     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.
+      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: ""
   weight:
@@ -58,10 +57,11 @@ a2ui:
       beside a text label. The host stamps role="img" + aria-label
       when [label] is set.
     - >-
-      Use named [size] tokens (sm | md | lg | xl) — px / rem values
-      only when matching a strict design spec. [size="xl"] is
-      conventional for empty-state hero icons; [size="md"] is the
-      default for inline use.
+      Use named [size] tokens (sm | md | lg) — free-form px / rem
+      values ("32", "48") for anything beyond the row, e.g.
+      empty-state hero icons; [size="md"] is the default for inline
+      use. A denser or larger register comes from an ancestor [scale]
+      tier, which the named tokens track automatically.
     - >-
       Use slot="icon" on parent primitives (<button-ui>, <badge-ui>,
       <alert-ui>, <list-item-ui>, <input-ui>, <nav-item-ui>, every

package/components/index.js

@@ -59,6 +59,7 @@ export { UIUpload } from './upload/upload.js';
 export { UICard } from './card/card.js';
 export { UIAvatar, UIAvatarGroup } from './avatar/avatar.js';
 export { UIAdiaMark } from './adia-mark/adia-mark.js';
+export { UIAdiaWordmark } from './adia-wordmark/adia-wordmark.js';
 export { UIProgress } from './progress/progress.js';
 export { UIStepProgress } from './step-progress/step-progress.js';
 export { UISkeleton } from './skeleton/skeleton.js';

package/components/input/input.class.js

@@ -223,9 +223,9 @@ export class UIInput extends UIFormElement {
 
     const controls = this.#isNumberMode ? `
       <span slot="controls" data-controls aria-hidden="true">
-        <button-ui type="button" tabindex="-1" variant="ghost" size="xs"
+        <button-ui type="button" tabindex="-1" variant="ghost" size="sm"
                    icon="caret-up" data-step="up" aria-label="Increase"></button-ui>
-        <button-ui type="button" tabindex="-1" variant="ghost" size="xs"
+        <button-ui type="button" tabindex="-1" variant="ghost" size="sm"
                    icon="caret-down" data-step="down" aria-label="Decrease"></button-ui>
       </span>` : '';
 

package/components/modal/modal.a2ui.json

@@ -27,13 +27,12 @@
       "default": false
     },
     "size": {
-      "description": "Width preset. sm=24rem, md=32rem, lg=48rem, full=95vw.",
+      "description": "Width preset. sm=24rem, md=32rem, lg=48rem (each capped at 90vw).",
       "type": "string",
       "enum": [
         "sm",
         "md",
-        "lg",
-        "xl"
+        "lg"
       ],
       "default": "md"
     },

package/components/modal/modal.d.ts

@@ -28,8 +28,8 @@ export class UIModal extends UIElement {
   open: boolean;
   /** When true, suppress backdrop click and Escape key dismissal of the overlay */
   permanent: boolean;
-  /** Width preset. sm=24rem, md=32rem, lg=48rem, full=95vw. */
-  size: 'sm' | 'md' | 'lg' | 'xl';
+  /** Width preset. sm=24rem, md=32rem, lg=48rem (each capped at 90vw). */
+  size: 'sm' | 'md' | 'lg';
   /** Aria label applied to the surface element for accessibility */
   text: string;
 

package/components/modal/modal.yaml

@@ -26,14 +26,13 @@ props:
     type: boolean
     default: false
   size:
-    description: Width preset. sm=24rem, md=32rem, lg=48rem, full=95vw.
+    description: Width preset. sm=24rem, md=32rem, lg=48rem (each capped at 90vw).
     type: string
     default: md
     enum:
     - sm
     - md
     - lg
-    - xl
   text:
     description: Aria label applied to the surface element for accessibility
     type: string