@adia-ai/web-components 0.8.9 → 0.8.11

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

package/components/select/select.class.js

@@ -423,7 +423,7 @@ export class UISelect extends UIFormElement {
       // render. The `data-select-leading` marker scopes that reconciliation to
       // our element. mark wins over avatar, which wins over icon (gh#339).
       const leading = this.mark
-        ? `<adia-mark-ui slot="leading" data-select-leading size="xs"></adia-mark-ui>`
+        ? `<adia-mark-ui slot="leading" data-select-leading size="sm"></adia-mark-ui>`
         : this.avatar
           ? `<img slot="leading" data-select-leading src="${escapeHTML(this.avatar)}" alt="" />`
           : this.icon
@@ -447,7 +447,7 @@ export class UISelect extends UIFormElement {
           ${leading}
           <span data-chips></span>
           ${displayMarkup}
-          <button-ui variant="ghost" size="xs" icon="x" aria-label="Clear all" data-clear-all hidden></button-ui>
+          <button-ui variant="ghost" size="sm" icon="x" aria-label="Clear all" data-clear-all hidden></button-ui>
           <icon-ui name="caret-down" slot="caret"></icon-ui>
         </span>
         ${hintMarkup}
@@ -683,7 +683,7 @@ export class UISelect extends UIFormElement {
   // (resolved against the selected option).
   static #optionLeadHTML(opt) {
     if (!opt) return '';
-    if (opt.mark) return `<adia-mark-ui size="xs"></adia-mark-ui>`;
+    if (opt.mark) return `<adia-mark-ui data-select-mark size="sm"></adia-mark-ui>`;
     if (opt.avatar) return `<img data-option-avatar src="${escapeHTML(opt.avatar)}" alt="" />`;
     if (opt.icon) return `<icon-ui name="${escapeHTML(opt.icon)}"></icon-ui>`;
     return '';
@@ -708,7 +708,7 @@ export class UISelect extends UIFormElement {
     const icon = (sel && sel.icon) || this.icon || '';
     const existing = trigger.querySelector(':scope > [data-select-leading]');
     let html = '';
-    if (mark) html = `<adia-mark-ui slot="leading" data-select-leading size="xs"></adia-mark-ui>`;
+    if (mark) html = `<adia-mark-ui slot="leading" data-select-leading size="sm"></adia-mark-ui>`;
     else if (avatar) html = `<img slot="leading" data-select-leading src="${escapeHTML(avatar)}" alt="" />`;
     else if (icon) html = `<icon-ui slot="leading" data-select-leading name="${escapeHTML(icon)}"></icon-ui>`;
     if (!html) { existing?.remove(); return; }

package/components/select/select.css

@@ -225,7 +225,7 @@
     /* Chip styling tracks the active variant via tag-ui's own tokens. */
     --tag-size: var(--a-ui-tiny);
   }
-  /* "+N more" overflow pill — a stamped <button-ui variant="ghost" size="xs">
+  /* "+N more" overflow pill — a stamped <button-ui variant="ghost" size="sm">
      (gh issue 276: no native <button> in stamped DOM); pill shape + chip-row
      height via button token re-points, chrome stays button-ui's own. */
   :scope[data-multi-chips] [data-chips] [data-more] {
@@ -236,7 +236,7 @@
     flex-shrink: 0;
   }
 
-  /* Clear-all `x` affordance — stamped <button-ui variant="ghost" size="xs"
+  /* Clear-all `x` affordance — stamped <button-ui variant="ghost" size="sm"
      icon="x"> (gh issue 276). Visible only when [clearable] AND chips. */
   :scope[data-multi-chips] [data-clear-all] {
     --button-radius: var(--a-radius-full);
@@ -426,7 +426,7 @@ select-ui [slot="listbox"] [data-select-all] {
   border-bottom: 1px solid var(--md-sys-color-neutral-outline-variant);
   margin-bottom: var(--a-space-1);
 }
-/* Select-all / Clear — stamped <button-ui variant="ghost" size="xs">
+/* Select-all / Clear — stamped <button-ui variant="ghost" size="sm">
    (gh issue 276); link-colored via the button fg token, chrome is button-ui's. */
 select-ui [slot="listbox"] [data-select-all-btn] {
   --button-fg: var(--md-sys-color-primary);
@@ -495,3 +495,12 @@ select-ui [slot="listbox"] [data-empty] {
   text-align: center;
   font-size: var(--a-ui-xs);
 }
+
+/* Stamped leading marks (trigger + option rows) stay at the compact
+   1.25rem diameter the removed xs tier gave them — a select row is
+   denser than the mark's own sm (1.75rem). The extra [size] attr
+   out-specifies adia-mark's own :scope[size] variant rule. */
+select-ui adia-mark-ui[data-select-leading][size],
+select-ui adia-mark-ui[data-select-mark][size] {
+  --adia-mark-size: 1.25rem;
+}

package/components/swatch/swatch.css

@@ -288,7 +288,7 @@
     color: color-mix(in oklab, var(--a-chrome-dark, #111) 70%, transparent);
   }
 
-  /* ═══════ Copy button — a stamped <button-ui variant="ghost" size="xs">
+  /* ═══════ Copy button — a stamped <button-ui variant="ghost" size="sm">
      (gh issue 276: no native <button> in stamped DOM). Geometry/colors
      ride button token re-points; focus ring is button-ui's own. ═══════ */
   :scope > [data-copy] {

package/components/switch/switch.a2ui.json

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

package/components/switch/switch.yaml

@@ -42,15 +42,13 @@ props:
     type: string
     default: ''
   size:
-    description: Sizing scale (full tier — xs / sm / md / lg / xl).
+    description: Sizing scale (sm / md / lg). For a denser or larger register, set [scale] on an ancestor.
     type: string
     default: ''
     enum:
-    - xs
     - sm
     - md
     - lg
-    - xl
     reflect: true
   value:
     description: Form value (submitted as 'on' when checked)

package/components/table/table.yaml

@@ -269,9 +269,15 @@ a2ui:
       multiline, or per-cell with [data-wrap] on a single column /
       cell.
     - >-
-      Use [raw] in production app consumers — it disables the demo
-      seed data so the table renders only consumer-provided rows /
-      columns / data props.
+      [raw] is a visual-and-lifecycle chrome reset for consumer-owned
+      body markup — render()'s early return (`if (this.raw) return;`)
+      is unconditional: no header injection, no .data/.columns
+      reconciliation, no empty/loading overlays, no aggregation or
+      pagination footers, even if .columns and .data are set. Reach
+      for it only when the consumer authors 100% of the body
+      (spreadsheet / inline-edit style patterns wrapping a native
+      <table>) — never to "keep the data lifecycle but skip demo
+      seeding."
     - >-
       Listen for the `sort` event with detail.key + detail.dir (NOT
       .column / .direction). `cell-click` detail carries {key, row,

package/components/tag/tag.a2ui.json

@@ -55,10 +55,11 @@
       "default": "solid"
     },
     "variant": {
-      "description": "Semantic variant — `default | info | success | warning | danger`.",
+      "description": "Semantic variant — `default | accent | info | success | warning | danger`. `accent` is brand-primary emphasis for non-semantic labels — a filter chip or taxonomy tag that shouldn't imply a success/warning/danger state. Mirrors <badge-ui>'s `accent` variant token-for-token.",
       "type": "string",
       "enum": [
         "default",
+        "accent",
         "info",
         "success",
         "warning",

package/components/tag/tag.class.js

@@ -57,7 +57,7 @@ export class UITag extends UIElement {
   static parts = {
     // button-ui, not a native <button> (gh issue 276) — the icon slots in
     // explicitly to keep its bold weight (the icon= prop stamps regular).
-    dismiss: '<button-ui slot="dismiss" variant="ghost" size="xs" aria-label="Remove"><icon-ui slot="icon" name="x" weight="bold"></icon-ui></button-ui>',
+    dismiss: '<button-ui slot="dismiss" variant="ghost" size="sm" aria-label="Remove"><icon-ui slot="icon" name="x" weight="bold"></icon-ui></button-ui>',
   };
 
   static template = () => null;

package/components/tag/tag.css

@@ -93,6 +93,15 @@ tag-ui[removable]:not([disabled]):hover {
      text, near-white in both schemes by design). Reads as a status pill
      where the chip IS the state. Opt out per-tag via [tone="muted"] for
      metadata-chip surfaces in dense lists. */
+  /* `accent` is brand-primary emphasis for non-semantic labels — mirrors
+     <badge-ui>'s `accent` variant token-for-token (--a-primary-bg /
+     on-primary for the solid fill), applied to tag-ui's own solid-default
+     tone shape. Not a status color — no success/warning/danger implication. */
+  :scope[variant="accent"] {
+    --tag-bg: var(--a-primary-bg);
+    --tag-fg: var(--md-sys-color-primary-on-primary);
+  }
+
   :scope[variant="info"] {
     --tag-bg: var(--a-info-bg);
     --tag-fg: var(--md-sys-color-info-on-info);
@@ -149,11 +158,21 @@ tag-ui[removable]:not([disabled]):hover {
     --tag-bg: var(--md-sys-color-danger-container);
     --tag-fg: var(--md-sys-color-danger-on-surface);
   }
+  /* Mirrors <badge-ui>'s default (muted) accent pair —
+     --md-sys-color-primary-container / -on-surface. */
+  :scope[tone="muted"][variant="accent"] {
+    --tag-bg: var(--md-sys-color-primary-container);
+    --tag-fg: var(--md-sys-color-primary-on-surface);
+  }
 
   /* `[tone="solid"]` on the neutral default (or no variant) inverts the
      chrome — solid fg-color bg with bg-color text. High-contrast neutral
-     stamp. Explicit opt-in; the variant-less default stays quiet chrome. */
-  :scope[tone="solid"]:not([variant="info"]):not([variant="success"]):not([variant="warning"]):not([variant="danger"]) {
+     stamp. Explicit opt-in; the variant-less default stays quiet chrome.
+     [variant="accent"] is excluded — it already has an explicit solid
+     pair above (the plain [variant="accent"] rule) that this higher-
+     specificity fallback would otherwise clobber when tone="solid" is
+     set explicitly alongside it. */
+  :scope[tone="solid"]:not([variant="info"]):not([variant="success"]):not([variant="warning"]):not([variant="danger"]):not([variant="accent"]) {
     --tag-bg: var(--md-sys-color-neutral-on-surface);
     --tag-fg: var(--md-sys-color-neutral-background);
   }
@@ -182,8 +201,15 @@ tag-ui[removable]:not([disabled]):hover {
     --tag-fg:     var(--md-sys-color-danger-on-surface);
     --tag-border: var(--md-sys-color-danger-outline);
   }
-  /* Outline on neutral (no family) — fg-muted text + subtle border. */
-  :scope[tone="outline"]:not([variant="info"]):not([variant="success"]):not([variant="warning"]):not([variant="danger"]) {
+  /* Mirrors <badge-ui>'s outline accent pair —
+     --md-sys-color-primary-on-surface / -primary-outline. */
+  :scope[tone="outline"][variant="accent"] {
+    --tag-fg:     var(--md-sys-color-primary-on-surface);
+    --tag-border: var(--md-sys-color-primary-outline);
+  }
+  /* Outline on neutral (no family) — fg-muted text + subtle border.
+     [variant="accent"] excluded — see the [tone="solid"] fallback note above. */
+  :scope[tone="outline"]:not([variant="info"]):not([variant="success"]):not([variant="warning"]):not([variant="danger"]):not([variant="accent"]) {
     --tag-fg:     var(--a-fg-muted);
     --tag-border: var(--md-sys-color-neutral-outline);
   }
@@ -223,7 +249,7 @@ tag-ui[removable]:not([disabled]):hover {
     gap: var(--tag-gap-icon, 0.2em);
   }
 
-  /* ── Dismiss button — a stamped <button-ui variant="ghost" size="xs">
+  /* ── Dismiss button — a stamped <button-ui variant="ghost" size="sm">
      (gh issue 276: no native <button> in stamped DOM); geometry + hover
      ride button token re-points, chrome is button-ui's own. */
   [slot="dismiss"] {

package/components/tag/tag.d.ts

@@ -54,8 +54,8 @@ tone unless `tone="solid"` is set explicitly (high-contrast neutral
 inverse), or `tone="outline"` (fg-muted text + subtle border).
  */
   tone: 'solid' | 'muted' | 'outline';
-  /** Semantic variant — `default | info | success | warning | danger`. */
-  variant: 'default' | 'info' | 'success' | 'warning' | 'danger';
+  /** Semantic variant — `default | accent | info | success | warning | danger`. `accent` is brand-primary emphasis for non-semantic labels — a filter chip or taxonomy tag that shouldn't imply a success/warning/danger state. Mirrors <badge-ui>'s `accent` variant token-for-token. */
+  variant: 'default' | 'accent' | 'info' | 'success' | 'warning' | 'danger';
 
   addEventListener<K extends keyof HTMLElementEventMap>(
     type: K,

package/components/tag/tag.yaml

@@ -45,11 +45,15 @@ props:
     type: string
     dynamic: true
   variant:
-    description: Semantic variant — `default | info | success | warning | danger`.
+    description: Semantic variant — `default | accent | info | success | warning | danger`.
+      `accent` is brand-primary emphasis for non-semantic labels — a filter chip
+      or taxonomy tag that shouldn't imply a success/warning/danger state. Mirrors
+      <badge-ui>'s `accent` variant token-for-token.
     type: string
     default: default
     enum:
       - default
+      - accent
       - info
       - success
       - warning

package/components/theme-provider/theme-provider.a2ui.json

@@ -22,8 +22,18 @@
       "const": "ThemeProvider"
     },
     "scale": {
-      "description": "Typographic / density register for the subtree — \"verse\" (compact) or \"prose\" (long-form). Adopts the matching register layer on demand; maps onto the [verse]/[prose] attribute (additive).",
+      "description": "Sizing register for the subtree — one of the six [scale] tiers: ui-sm (dense product UI), ui-md (base), ui-lg (touch/presentation), content-sm (compact article), content-md (long-form), content-lg (hero/marketing). Adopts the scale layer on demand; the reflected attribute is the [scale=\"…\"] CSS hook. Deprecated aliases \"verse\" (→ ui-sm) and \"prose\" (→ content-md) still map onto the legacy [verse]/[prose] attributes; removed at v1.0.",
       "type": "string",
+      "enum": [
+        "ui-sm",
+        "ui-md",
+        "ui-lg",
+        "content-sm",
+        "content-md",
+        "content-lg",
+        "verse",
+        "prose"
+      ],
       "default": ""
     }
   },

package/components/theme-provider/theme-provider.class.js

@@ -64,10 +64,11 @@ function provideFoundation() {
 // the first time a provider needs one, deduped by sheet identity. Dynamic-imported
 // (static paths, so bundlers can code-split) so the element stays lean — a provider
 // that does no theming never pulls these in.
-const TWIN_LOADED = { themes: false, verse: false, prose: false };
+const TWIN_LOADED = { themes: false, verse: false, prose: false, scale: false };
 function loadTwin(name) {
   switch (name) {
     case 'themes': return import('../../dist/themes.sheet.js');
+    case 'scale': return import('../../dist/scale.sheet.js');
     case 'verse': return import('../../dist/verse.sheet.js');
     case 'prose': return import('../../dist/prose.sheet.js');
     default: return null;
@@ -96,10 +97,11 @@ export class UIThemeProvider extends UIElement {
     // Named theme preset (ocean / forest / slate / …). Reflected, so the attribute
     // — which IS the `[theme="…"]` CSS hook in themes.css — tracks the property.
     theme: { type: String, reflect: true },
-    // Typographic/density register: "verse" (compact) | "prose" (long-form).
-    // Mapped onto the existing `[verse]` / `[prose]` attribute below (additive —
-    // the register CSS is untouched), so every register rule incl. `[size]`
-    // sub-tiers applies for free.
+    // Sizing register — one of the six [scale] tiers (ui-sm | ui-md | ui-lg |
+    // content-sm | content-md | content-lg). Reflected, so the attribute IS the
+    // `[scale="…"]` CSS hook in scale.css (the `theme` prop's mechanism).
+    // DEPRECATED aliases: "verse" (→ ui-sm) and "prose" (→ content-md) still
+    // map onto the legacy [verse]/[prose] attributes; removed at v1.0.
     scale: { type: String, reflect: true },
   };
   static template = () => null;
@@ -128,7 +130,25 @@ export class UIThemeProvider extends UIElement {
     const scale = this.scale;
     this.toggleAttribute('verse', scale === 'verse');
     this.toggleAttribute('prose', scale === 'prose');
-    if (scale === 'verse') ensureTwin('verse');
-    else if (scale === 'prose') ensureTwin('prose');
+    if (scale === 'verse' || scale === 'prose') {
+      // Legacy register aliases — the reflected scale="verse|prose" attribute
+      // matches no scale.css tier selector, so only the toggled [verse]/[prose]
+      // attribute has CSS effect. Removed at v1.0.
+      warnDeprecatedScaleAlias(scale);
+      ensureTwin(scale);
+    } else if (SCALE_TIERS.has(scale)) {
+      // Tier names match [scale="…"] in scale.css directly via reflection.
+      ensureTwin('scale');
+    }
   }
 }
+
+const SCALE_TIERS = new Set(['ui-sm', 'ui-md', 'ui-lg', 'content-sm', 'content-md', 'content-lg']);
+
+const warnedAliases = new Set();
+function warnDeprecatedScaleAlias(alias) {
+  if (warnedAliases.has(alias)) return;
+  warnedAliases.add(alias);
+  const tier = alias === 'verse' ? 'ui-sm' : 'content-md';
+  console.warn(`[theme-provider] scale="${alias}" is deprecated — use scale="${tier}" (removed at v1.0).`);
+}

package/components/theme-provider/theme-provider.d.ts

@@ -40,6 +40,6 @@ import { UIElement } from '../../core/element.js';
 export class UIThemeProvider extends UIElement {
   /** Named theme preset for the wrapped subtree (default, ocean, forest, sunset, lavender, rose, slate, midnight). Adopts the themes layer on demand + matches the [theme="…"] hook. */
   theme: string;
-  /** Typographic / density register for the subtree — "verse" (compact) or "prose" (long-form). Adopts the matching register layer on demand; maps onto the [verse]/[prose] attribute (additive). */
-  scale: string;
+  /** Sizing register for the subtree — one of the six [scale] tiers: ui-sm (dense product UI), ui-md (base), ui-lg (touch/presentation), content-sm (compact article), content-md (long-form), content-lg (hero/marketing). Adopts the scale layer on demand; the reflected attribute is the [scale="…"] CSS hook. Deprecated aliases "verse" (→ ui-sm) and "prose" (→ content-md) still map onto the legacy [verse]/[prose] attributes; removed at v1.0. */
+  scale: 'ui-sm' | 'ui-md' | 'ui-lg' | 'content-sm' | 'content-md' | 'content-lg' | 'verse' | 'prose';
 }

package/components/theme-provider/theme-provider.yaml

@@ -39,9 +39,18 @@ props:
     default: ""
     reflect: true
   scale:
-    description: 'Typographic / density register for the subtree — "verse" (compact) or "prose" (long-form). Adopts the matching register layer on demand; maps onto the [verse]/[prose] attribute (additive).'
+    description: 'Sizing register for the subtree — one of the six [scale] tiers: ui-sm (dense product UI), ui-md (base), ui-lg (touch/presentation), content-sm (compact article), content-md (long-form), content-lg (hero/marketing). Adopts the scale layer on demand; the reflected attribute is the [scale="…"] CSS hook. Deprecated aliases "verse" (→ ui-sm) and "prose" (→ content-md) still map onto the legacy [verse]/[prose] attributes; removed at v1.0.'
     type: string
     default: ""
+    enum:
+      - ui-sm
+      - ui-md
+      - ui-lg
+      - content-sm
+      - content-md
+      - content-lg
+      - verse
+      - prose
     reflect: true
 events: {}
 slots: {}

package/components/timeline/timeline.css

@@ -362,7 +362,7 @@ agent-reasoning-ui timeline-ui:not([orientation="horizontal"]),
 
   /* ═══════ Toggle caret (outcomes) ═══════ */
 
-  /* A stamped <button-ui variant="ghost" size="xs" icon="caret-*">
+  /* A stamped <button-ui variant="ghost" size="sm" icon="caret-*">
      (gh issue 276: no native <button> in stamped DOM). Geometry/colors
      ride button token re-points; focus ring + hover are button-ui's own. */
   :scope > [data-timeline-toggle] {

package/components/toggle-scheme/toggle-scheme.a2ui.json

@@ -81,14 +81,12 @@
       "default": "auto"
     },
     "size": {
-      "description": "Sizing scale forwarded to the internal <button-ui>.",
+      "description": "Sizing scale (sm/md/lg) forwarded to the internal <button-ui>.",
       "type": "string",
       "enum": [
-        "xs",
         "sm",
         "md",
-        "lg",
-        "xl"
+        "lg"
       ],
       "default": "md"
     },

package/components/toggle-scheme/toggle-scheme.d.ts

@@ -40,8 +40,8 @@ export class UIToggleScheme extends UIElement {
   persist: boolean;
   /** Initial scheme — "auto" follows prefers-color-scheme; "light" / "dark" force. */
   scheme: 'auto' | 'light' | 'dark';
-  /** Sizing scale forwarded to the internal <button-ui>. */
-  size: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  /** Sizing scale (sm/md/lg) forwarded to the internal <button-ui>. */
+  size: 'sm' | 'md' | 'lg';
   /** LocalStorage key prefix; default matches <theme-panel> for cross-element interop. */
   storagePrefix: string;
   /** CSS selector for the element receiving `color-scheme`. ":root" → <html>. */

package/components/toggle-scheme/toggle-scheme.yaml

@@ -69,15 +69,13 @@ props:
     attribute: label-dark
     reflect: true
   size:
-    description: Sizing scale forwarded to the internal <button-ui>.
+    description: Sizing scale (sm/md/lg) forwarded to the internal <button-ui>.
     type: string
     default: md
     enum:
-      - xs
       - sm
       - md
       - lg
-      - xl
     reflect: true
   variant:
     description: Visual style forwarded to the internal <button-ui>. Defaults to "ghost" (matches app practice).