npm - @uni-design-system/uni-mcp - Versions diffs - 4.7.1 → 4.7.2 - Mend

@uni-design-system/uni-mcp 4.7.1 → 4.7.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (8) hide show

package/CHANGELOG.md +24 -0
package/dist/{chunk-YLYBDQAV.js → chunk-HXXP4PTK.js} +945 -237
package/dist/chunk-HXXP4PTK.js.map +1 -0
package/dist/http.js +1 -1
package/dist/server.js +1 -1
package/dist/stdio.js +1 -1
package/package.json +2 -2
package/dist/chunk-YLYBDQAV.js.map +0 -1

package/dist/{chunk-YLYBDQAV.js → chunk-HXXP4PTK.js} RENAMED Viewed

@@ -7,16 +7,16 @@ import { z } from "zod";
 // src/data/uni-index.json
 var uni_index_default = {
   meta: {
-    version: "8.3.0",
-    builtAt: "2026-08-21T15:54:42.627Z",
+    version: "9.0.0",
+    builtAt: "2026-08-23T15:31:18.523Z",
     frameworks: [
       "angular"
     ],
     counts: {
       components: 79,
-      tokens: 396,
+      tokens: 401,
       themes: 2,
-      examples: 184
+      examples: 194
     }
   },
   components: [
@@ -27,7 +27,7 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "feedback",
-      version: "8.3.0",
+      version: "9.0.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
@@ -90,7 +90,7 @@ var uni_index_default = {
       relatedTokens: [
         "alert.behavior.topPosition",
         "alert.behavior.borderRadius",
-        "alert.behavior.transitionSpeed",
+        "alert.behavior.motion",
         "alert.behavior.elevation"
       ]
     },
@@ -101,7 +101,7 @@ var uni_index_default = {
       summary: "Horizontal application bar: project leading controls (menu button, logo) with the `leading` attribute, actions with `trailing` (pushed to the far edge), and either pass `title` or project custom center content.",
       description: "Horizontal application bar: project leading controls (menu button, logo) with the `leading` attribute, actions with `trailing` (pushed to the far edge), and either pass `title` or project custom center content. Surface, divider, height, typography and spacing all resolve from `appBar` tokens. Place it inside your page's `<header>` landmark.",
       category: "components",
-      version: "8.3.0",
+      version: "9.0.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
@@ -158,7 +158,7 @@ var uni_index_default = {
       summary: "Identity avatar with a graceful fallback chain: image \u2192 initials from `name` \u2192 themed symbol.",
       description: "Identity avatar with a graceful fallback chain: image \u2192 initials from `name` \u2192 themed symbol. Coloring, radius, typeface and sizes all resolve from `avatar` theme tokens; `variant` picks the container palette.",
       category: "components",
-      version: "8.3.0",
+      version: "9.0.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
@@ -237,7 +237,7 @@ var uni_index_default = {
       summary: "Overlapping stack of avatars.",
       description: "Overlapping stack of avatars. `max` collapses the overflow into a themed \u201C+N\u201D chip (itself a `uni-avatar`). Overlap and separator ring resolve from `avatarGroup` theme tokens.",
       category: "components",
-      version: "8.3.0",
+      version: "9.0.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
@@ -270,7 +270,7 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "primitives",
-      version: "8.3.0",
+      version: "9.0.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
@@ -351,7 +351,7 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "feedback",
-      version: "8.3.0",
+      version: "9.0.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
@@ -432,7 +432,7 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "directives",
-      version: "8.3.0",
+      version: "9.0.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
@@ -454,20 +454,20 @@ var uni_index_default = {
       name: "Box",
       status: "stable",
       summary: 'The base layout primitive, applied as an attribute to any element so semantics stay yours: `<main box-layout [grow]="1" padding="md">`.',
-      description: 'The base layout primitive, applied as an attribute to any element so semantics stay yours: `<main box-layout [grow]="1" padding="md">`. Exception: other components\' host elements (`<uni-card box-layout>` would put two components on one element) \u2014 wrap those in a `<div box-layout>`. Sizing convention (height/width/min/max/inset): a **number is px and needs a binding** \u2014 `[height]="420"`; a **plain attribute is a CSS length string** \u2014 `height="420px"`. Spacing/radius/color inputs take theme tokens.',
+      description: 'The base layout primitive, applied as an attribute to any element so semantics stay yours: `<main box-layout [grow]="1" padding="md">`. It is a directive, so it composes freely \u2014 with another layout attribute (`<div stack-layout uni-text="body-1-long">`) and with a component\'s own host element (`<uni-card box-layout padding="lg">`); Angular merges the host `class` bindings rather than letting one win. Sizing convention (height/width/min/max/inset): a **number is px and needs a binding** \u2014 `[height]="420"`; a **plain attribute is a CSS length string** \u2014 `height="420px"`. Spacing/radius/color inputs take theme tokens.',
       category: "layout",
-      version: "8.3.0",
+      version: "9.0.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
           selectorOrTag: "[uni-box-layout], [box-layout]",
           api: [
             {
-              name: "color",
+              name: "containerColor",
               kind: "input",
               type: "ContainerColorToken",
               required: false,
-              description: ""
+              description: "A container color *pair*: the named surface plus its paired on-color, so a box and its contents stay legible together. Named `containerColor`, not `color`, because it is not the CSS `color` property \u2014 `uni-text` owns that name, and it maps to it directly. The two directives share elements routinely (`<div row-layout uni-text>`), and one `color` binding would feed both: the box would paint the surface and the text would take the same token, rendering ink on identical ink."
             },
             {
               name: "backgroundColor",
@@ -638,6 +638,34 @@ var uni_index_default = {
               required: false,
               description: ""
             },
+            {
+              name: "flex",
+              kind: "input",
+              type: "number | string",
+              required: false,
+              description: 'The `flex` shorthand. `[flex]="1"` is `flex: 1` \u2014 grow, shrink and a zero basis \u2014 which `grow` alone cannot express, since it leaves `flex-basis: auto`. Wins over `grow` when both are set.'
+            },
+            {
+              name: "shrink",
+              kind: "input",
+              type: "number",
+              required: false,
+              description: ""
+            },
+            {
+              name: "basis",
+              kind: "input",
+              type: "number | string",
+              required: false,
+              description: ""
+            },
+            {
+              name: "marginInline",
+              kind: "input",
+              type: "'auto' | NullableSize",
+              required: false,
+              description: 'Inline-axis margin. `marginInline="auto"` centers a `maxWidth` container \u2014 the one thing flex centering cannot do without an extra wrapper. Only the inline axis is exposed: block margins collapse and fight `gap`, which is why the primitives carry no margin otherwise.'
+            },
             {
               name: "display",
               kind: "input",
@@ -801,11 +829,26 @@ var uni_index_default = {
         {
           title: "Primary",
           framework: "angular",
-          code: "<!-- Storybook story: Primary -->\n<div box-layout ${argsToTemplate(props)}>\n<span uni-text>${ngContent}</span>\n</div>\n<!-- args:\n{\n    color: 'secondary-container',\n    borderRadius: 'md',\n    padding: 'lg',\n    ngContent: 'Box Content.',\n  }\n-->"
+          code: "<!-- Storybook story: Primary -->\n<div box-layout ${argsToTemplate(props)}>\n<span uni-text>${ngContent}</span>\n</div>\n<!-- args:\n{\n    containerColor: 'secondary-container',\n    borderRadius: 'md',\n    padding: 'lg',\n    ngContent: 'Box Content.',\n  }\n-->"
+        },
+        {
+          title: "Flex children",
+          framework: "angular",
+          code: "<!-- Storybook story: Flex children -->\n<div box-layout ${argsToTemplate(props)}>\n<span uni-text>${ngContent}</span>\n</div>"
+        },
+        {
+          title: "Centered page shell",
+          framework: "angular",
+          code: "<!-- Storybook story: Centered page shell -->\n<div box-layout ${argsToTemplate(props)}>\n<span uni-text>${ngContent}</span>\n</div>"
+        },
+        {
+          title: "Composition",
+          framework: "angular",
+          code: "<!-- Storybook story: Composition -->\n<div box-layout ${argsToTemplate(props)}>\n<span uni-text>${ngContent}</span>\n</div>"
         }
       ],
       guidelines: {
-        whenToUse: "Box is the base Layout component. It is highly configurable.\nEach layout component extends the Box component while providing presets to support their application.",
+        whenToUse: "Box is the base layout primitive \u2014 an attribute directive you put on any element, so\nyour HTML semantics stay yours. It is highly configurable; every other layout\ndirective extends it and adds presets.\nBecause it is a directive rather than a component, it composes freely: with another\nlayout attribute, with `uni-text`, and with a component's own host element. Angular\nmerges the host `class` bindings, so each contributor's styles survive.\n```html\n```\nColors stay unambiguous across that composition. The box's surface is\n`containerColor` \u2014 a **pair**: the named surface plus its paired on-color \u2014 while\nplain `color` belongs to `uni-text` and maps to the CSS property. So an element\nwearing both can set each independently:\n```html\n```\nLayout attributes only apply when the directive is in your component's `imports`.\nAn unimported attribute compiles cleanly and silently does nothing \u2014 import\n`UNI_LAYOUT` to bring the whole family in at once.",
         dos: [],
         donts: [],
         accessibility: []
@@ -819,7 +862,7 @@ var uni_index_default = {
       summary: 'WAI-ARIA breadcrumb: a `nav` landmark wrapping an ordered list; the last item is the current page (`aria-current="page"`), separators are decorative.',
       description: 'WAI-ARIA breadcrumb: a `nav` landmark wrapping an ordered list; the last item is the current page (`aria-current="page"`), separators are decorative. Items with `href` render as real links; without one they render as link-styled buttons emitting `itemClicked` \u2014 wire that to your router.',
       category: "components",
-      version: "8.3.0",
+      version: "9.0.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
@@ -888,7 +931,7 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "primitives",
-      version: "8.3.0",
+      version: "9.0.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
@@ -1031,7 +1074,7 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "primitives",
-      version: "8.3.0",
+      version: "9.0.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
@@ -1063,7 +1106,7 @@ var uni_index_default = {
       summary: "Inline month calendar: single-date or start\u2013end range selection, day markers (availability dots), min/max fences and disabled dates.",
       description: "Inline month calendar: single-date or start\u2013end range selection, day markers (availability dots), min/max fences and disabled dates. One tab stop with a roving-tabindex `role=\"grid\"`; every day is a real button named with its full date. Values are plain ISO strings (`'YYYY-MM-DD'`), never `Date` objects, so bindings are timezone-free and serializable. Selection and today colours come from the theme's `primary` role pair; geometry and glyphs come from the `calendar` theme entry.",
       category: "forms",
-      version: "8.3.0",
+      version: "9.0.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
@@ -1289,7 +1332,7 @@ var uni_index_default = {
       summary: "Anchored coach-mark panel that dims the page and cuts a spotlight hole around its target.",
       description: 'Anchored coach-mark panel that dims the page and cuts a spotlight hole around its target. Both the scrim and the panel are `popover="manual"` elements shown in order, so they stack deterministically in the top layer above every app z-index, and every scrim piece is CSS-anchor-positioned to the target \u2014 the hole tracks scroll/resize/layout with zero listeners. The panel is a non-modal `role="dialog"` (deliberately no `aria-modal`): focus moves into it on open, Tab runs a "duet loop" over the panel\'s focusables plus the spotlit target while it stays interactive, and on close focus returns to the pre-open element \u2014 unless the user moved into the target, where it stays. Storage-free by rule: `key` and the `dismissed` output are the "don\'t show again" hooks; persistence is the app\'s business (e.g. cdk local-storage).',
       category: "components",
-      version: "8.3.0",
+      version: "9.0.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
@@ -1476,7 +1519,7 @@ var uni_index_default = {
         "callout.behavior.spotlightPadding",
         "callout.behavior.spotlightRadius",
         "callout.behavior.ringWidth",
-        "callout.behavior.transitionMs"
+        "callout.behavior.motion"
       ]
     },
     {
@@ -1486,7 +1529,7 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "layout",
-      version: "8.3.0",
+      version: "9.0.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
@@ -1531,7 +1574,7 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "layout",
-      version: "8.3.0",
+      version: "9.0.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
@@ -1555,7 +1598,7 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "layout",
-      version: "8.3.0",
+      version: "9.0.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
@@ -1596,7 +1639,7 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "layout",
-      version: "8.3.0",
+      version: "9.0.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
@@ -1651,7 +1694,7 @@ var uni_index_default = {
       summary: "",
       description: "",
       category: "forms",
-      version: "8.3.0",
+      version: "9.0.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
@@ -1789,8 +1832,8 @@ var uni_index_default = {
       status: "stable",
       summary: "Form-bound, closed-set, single-select autocomplete: `FormValueControl<T | null>` over object `Options<T>`, type-to-filter, commit-on-select.",
       description: "Form-bound, closed-set, single-select autocomplete: `FormValueControl<T | null>` over object `Options<T>`, type-to-filter, commit-on-select. Typing produces a draft \u2014 a filter, never a value; the value changes only when an option commits, `clear()` runs, or the model is written from outside. Select semantics, not search: a real label, a chevron, no magnifier, nothing submits. For short lists with no need to type, prefer `uni-select` \u2014 the value contract is identical, so swapping is a template-only change.",
-      category: "layout",
-      version: "8.3.0",
+      category: "forms",
+      version: "9.0.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
@@ -1990,6 +2033,11 @@ emptyText="No countries found"
           framework: "angular",
           code: '<!-- Storybook story: Async -->\n<uni-combobox\nlabel="Country"\nplaceholder="Type to search countries"\nemptyText="No countries found"\n[filterLocally]="false"\n[options]="options"\n(query)="onQuery($event)"\n/>\n<!-- args:\n{ required: true, invalid: true, touched: true }\n-->'
         },
+        {
+          title: "Create New Values",
+          framework: "angular",
+          code: '<!-- Storybook story: Create New Values -->\n<uni-combobox\nlabel="Country"\nplaceholder="Type to search countries"\nemptyText="No countries found"\n[filterLocally]="false"\n[options]="options"\n(query)="onQuery($event)"\n/>\n<!-- args:\n{ required: true, invalid: true, touched: true }\n-->'
+        },
         {
           title: "Invalid",
           framework: "angular",
@@ -2016,12 +2064,13 @@ emptyText="No countries found"
         whenToUse: "The form-bound, **closed-set, single-select** autocomplete: object\n`Options<T>`, `FormValueControl<T | null>`, type-to-filter, commit-on-select.\nTyping produces a *draft* \u2014 a filter, never a value; the value changes only\nwhen an option commits, the field clears, or the model is written from\noutside. Select semantics, not search: a real label, a chevron, no magnifier,\nnothing submits.\nUnder ~10 options and no need to type \u2192 `uni-select`, the native, zero-JS,\nmobile-friendly answer. More options, or users know what they're looking for \u2192\n`uni-combobox`. The value contract is identical (`T | null`, `compareWith`),\nso swapping one for the other as a list grows is a template-only change \u2014 that\nis deliberate. For open sets, where typing *creates* values, use\n`uni-tag-input` (multi) or `uni-search-input` (queries); for closed multi\nsets, `uni-multi-select-dropdown`.",
         dos: [],
         donts: [
-          "Don't bolt \"create new\" onto it \u2014 that's an open set; use `uni-tag-input`'s",
+          "Don't expect free text to commit implicitly \u2014 it never does. Offer creation",
           "Don't wire `(query)` \u2192 filter \u2192 `[options]` when the list is already in",
           "Don't use `Escape` to clear: it closes, then reverts. The \u2715 and an emptied"
         ],
         accessibility: [
           'The input is `role="combobox"` with `aria-expanded`, `aria-controls` and',
+          "Home and End move the caret, never the list, per APG's editable-combobox",
           "`aria-selected` marks the **committed** option; the active one is carried by",
           "Disabled options are rendered, announced (`aria-disabled`), and skipped by",
           'Commits (*"Alabama selected."*), clears, refusals and debounced result',
@@ -2047,7 +2096,7 @@ emptyText="No countries found"
       summary: "",
       description: "",
       category: "feedback",
-      version: "8.3.0",
+      version: "9.0.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
@@ -2094,7 +2143,7 @@ emptyText="No countries found"
       summary: "",
       description: "",
       category: "forms",
-      version: "8.3.0",
+      version: "9.0.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
@@ -2177,7 +2226,7 @@ emptyText="No countries found"
       summary: "",
       description: "",
       category: "data",
-      version: "8.3.0",
+      version: "9.0.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
@@ -2278,7 +2327,7 @@ emptyText="No countries found"
       summary: "Date field with free-typed parsing and a popup calendar.",
       description: "Date field with free-typed parsing and a popup calendar. Type `aug 20`, `8/20/2026` or `2026-08-20`, or pick from the grid \u2014 the form gets the same canonical `'YYYY-MM-DD'` string either way. Parsing is `Intl`-driven (locale digit order and month names, never hardcoded); unreadable text stays in the field, flagged, with a `rejected` event. The popup is a native popover hosting the same `uni-calendar` an app could render inline.",
       category: "forms",
-      version: "8.3.0",
+      version: "9.0.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
@@ -2486,7 +2535,7 @@ emptyText="No countries found"
       summary: "One field for a date and a time: a thin composer seating a uni-date-input and a uni-time-input in one input-box chrome under one label, yielding one combined `'YYYY-MM-DDTHH:mm'` value.",
       description: "One field for a date and a time: a thin composer seating a uni-date-input and a uni-time-input in one input-box chrome under one label, yielding one combined `'YYYY-MM-DDTHH:mm'` value. The value emits only when both parts are set \u2014 a time without a day is not an answer \u2014 and clearing the date clears it. With `slotsFor`, the time part stays disabled until a day is chosen and offers exactly that day's slots: the scheduling flow in one attribute. Two honest tab stops (it is two questions); apps needing a different arrangement compose the primitives directly.",
       category: "forms",
-      version: "8.3.0",
+      version: "9.0.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
@@ -2656,7 +2705,7 @@ emptyText="No countries found"
       summary: "Text input that emits `change` only after the user pauses typing.",
       description: "Text input that emits `change` only after the user pauses typing. Wears the shared input chrome (themed color, border, typeface, focus ring) via `uni-input-box`; project adornments with the `pre-input` / `post-input` slots, matching `uni-input`'s convention. The ARIA passthrough inputs let a wrapping composite (e.g. SearchInput's combobox) annotate the real input element.",
       category: "forms",
-      version: "8.3.0",
+      version: "9.0.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
@@ -2707,6 +2756,28 @@ emptyText="No countries found"
               default: "false",
               description: ""
             },
+            {
+              name: "type",
+              kind: "input",
+              type: "UniInputType",
+              required: false,
+              default: "'text'",
+              description: "Native input type; text-like only, matching `uni-input`."
+            },
+            {
+              name: "autocomplete",
+              kind: "input",
+              type: "string",
+              required: false,
+              description: ""
+            },
+            {
+              name: "inputMode",
+              kind: "input",
+              type: "UniInputMode",
+              required: false,
+              description: ""
+            },
             {
               name: "role",
               kind: "input",
@@ -2737,11 +2808,11 @@ emptyText="No countries found"
               description: ""
             },
             {
-              name: "change",
+              name: "valueChange",
               kind: "output",
               type: "string",
               required: false,
-              description: ""
+              description: "The debounced value, emitted once the user pauses typing."
             }
           ]
         }
@@ -2751,7 +2822,7 @@ emptyText="No countries found"
           title: "Primary",
           framework: "angular",
           code: `<!-- Storybook story: Primary -->
-<uni-debounce-input \${argsToTemplate(props)} (change)="lastEmitted = $event" #debounce />
+<uni-debounce-input \${argsToTemplate(props)} (valueChange)="lastEmitted = $event" #debounce />
 <div box-layout paddingTop="md">
   <div>Live value: {{ debounce.value() }}</div>
   <div>Debounced value: {{ lastEmitted }}</div>
@@ -2765,7 +2836,7 @@ emptyText="No countries found"
         }
       ],
       guidelines: {
-        whenToUse: "A themed text input that emits its `change` output only after the user pauses typing\n(400&nbsp;ms by default) and only when the value actually changed \u2014 a signal-based\ndebounce with no rxjs involved. The live value is exposed as the `value` signal, and\n`clear()` empties the field immediately (cancelling any pending emit).\nIt wears the shared input chrome (color, border, typeface, focus ring) via the input\nbox, and offers `pre-input` / `post-input` attribute slots for adornments plus ARIA\npassthrough inputs (`role`, `ariaExpanded`, `ariaControls`, `ariaActivedescendant`)\nso composite widgets can annotate the real input element.\nUsed by the [Search Input](?path=/docs/components-forms-search-input--search-input), which\nprojects its magnifier and clear button through the slots and drives the combobox\nARIA through the passthroughs.",
+        whenToUse: "A themed text input that emits its `valueChange` output only after the user pauses typing\n(400&nbsp;ms by default) and only when the value actually changed \u2014 a signal-based\ndebounce with no rxjs involved. The live value is exposed as the `value` signal, and\n`clear()` empties the field immediately (cancelling any pending emit).\nIt wears the shared input chrome (color, border, typeface, focus ring) via the input\nbox, and offers `pre-input` / `post-input` attribute slots for adornments plus ARIA\npassthrough inputs (`role`, `ariaExpanded`, `ariaControls`, `ariaActivedescendant`)\nso composite widgets can annotate the real input element.\nUsed by the [Search Input](?path=/docs/components-forms-search-input--search-input), which\nprojects its magnifier and clear button through the slots and drives the combobox\nARIA through the passthroughs.",
         dos: [],
         donts: [],
         accessibility: [
@@ -2782,7 +2853,7 @@ emptyText="No countries found"
       summary: "",
       description: "",
       category: "feedback",
-      version: "8.3.0",
+      version: "9.0.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
@@ -2860,7 +2931,7 @@ emptyText="No countries found"
       summary: "",
       description: "",
       category: "feedback",
-      version: "8.3.0",
+      version: "9.0.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
@@ -2948,7 +3019,7 @@ emptyText="No countries found"
       summary: "",
       description: "",
       category: "feedback",
-      version: "8.3.0",
+      version: "9.0.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
@@ -2972,7 +3043,7 @@ emptyText="No countries found"
       summary: "",
       description: "",
       category: "layout",
-      version: "8.3.0",
+      version: "9.0.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
@@ -3028,18 +3099,18 @@ emptyText="No countries found"
       summary: "",
       description: "",
       category: "directives",
-      version: "8.3.0",
+      version: "9.0.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
           selectorOrTag: "[uni-drag-n-drop], [dragAndDrop]",
           api: [
             {
-              name: "onFileDropped",
+              name: "fileDropped",
               kind: "output",
               type: "FileList",
               required: false,
-              description: ""
+              description: "The dropped files."
             }
           ]
         }
@@ -3060,7 +3131,7 @@ emptyText="No countries found"
       summary: "Navigation drawer with two modes sharing one content slot: - `side` \u2014 an in-flow `<aside>` that pushes content (dashboard sidenav); opening/closing animates its width, and the divider border primitive separates it from the page.",
       description: "Navigation drawer with two modes sharing one content slot: - `side` \u2014 an in-flow `<aside>` that pushes content (dashboard sidenav); opening/closing animates its width, and the divider border primitive separates it from the page. - `over` \u2014 a native `<dialog>` in the top layer: focus trap, Escape and scrim backdrop come from the platform (same machinery as `uni-dialog`), sliding in from its edge. Surface, width, divider, elevation, padding and backdrop all resolve from `drawer` theme tokens.",
       category: "components",
-      version: "8.3.0",
+      version: "9.0.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
@@ -3139,7 +3210,7 @@ emptyText="No countries found"
       summary: "",
       description: "",
       category: "components",
-      version: "8.3.0",
+      version: "9.0.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
@@ -3212,11 +3283,11 @@ emptyText="No countries found"
               description: ""
             },
             {
-              name: "color",
+              name: "containerColor",
               kind: "input",
               type: "ContainerColorToken | undefined",
               required: false,
-              description: ""
+              description: "A container color pair; `color` belongs to `uni-text` across the library."
             },
             {
               name: "dropdownShowing",
@@ -3246,7 +3317,8 @@ emptyText="No countries found"
         "dropdown.behavior.border",
         "dropdown.behavior.borderRadius",
         "dropdown.behavior.color",
-        "dropdown.behavior.shadow"
+        "dropdown.behavior.shadow",
+        "dropdown.behavior.motion"
       ]
     },
     {
@@ -3256,7 +3328,7 @@ emptyText="No countries found"
       summary: "",
       description: "",
       category: "layout",
-      version: "8.3.0",
+      version: "9.0.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
@@ -3334,7 +3406,7 @@ emptyText="No countries found"
         ]
       },
       relatedTokens: [
-        "expand.behavior.transitionSpeed"
+        "expand.behavior.motion"
       ]
     },
     {
@@ -3344,7 +3416,7 @@ emptyText="No countries found"
       summary: "",
       description: "",
       category: "layout",
-      version: "8.3.0",
+      version: "9.0.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
@@ -3414,8 +3486,8 @@ emptyText="No countries found"
       status: "stable",
       summary: "Trigger for a {@link UniExpandComponent} region.",
       description: "Trigger for a {@link UniExpandComponent} region. Two shapes, chosen by whether `label` is set: - **Icon only** (default) \u2014 the bare chevron, sized for a Card Header. - **Labelled** \u2014 chevron plus a label and optional muted sublabel, as a single full-width button. Most real disclosures need a name for the section, and building that row by hand is the thing this saves; it also makes the label the button's accessible name rather than adjacent text.",
-      category: "forms",
-      version: "8.3.0",
+      category: "layout",
+      version: "9.0.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
@@ -3500,7 +3572,7 @@ emptyText="No countries found"
       summary: "",
       description: "",
       category: "forms",
-      version: "8.3.0",
+      version: "9.0.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
@@ -3658,7 +3730,7 @@ emptyText="No countries found"
       summary: "",
       description: "",
       category: "layout",
-      version: "8.3.0",
+      version: "9.0.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
@@ -3716,19 +3788,19 @@ emptyText="No countries found"
           framework: "angular",
           code: `<!-- Storybook story: Simple Grid -->
 <div grid-layout \${argsToTemplate(props)}>
-  <div box-layout gridArea="nav" color="quaternary" padding="md" borderRadius="sm">
+  <div box-layout gridArea="nav" containerColor="quaternary" padding="md" borderRadius="sm">
     <span uni-text>nav</span>
   </div>
-  <div box-layout gridArea="a1" color="primary" padding="md" borderRadius="sm">
+  <div box-layout gridArea="a1" containerColor="primary" padding="md" borderRadius="sm">
     <span uni-text>a1</span>
   </div>
-  <div box-layout gridArea="a2" color="secondary" padding="md" borderRadius="sm">
+  <div box-layout gridArea="a2" containerColor="secondary" padding="md" borderRadius="sm">
     <span uni-text>a2</span>
   </div>
-  <div box-layout gridArea="b1" color="tertiary" padding="md" borderRadius="sm">
+  <div box-layout gridArea="b1" containerColor="tertiary" padding="md" borderRadius="sm">
     <span uni-text>b1</span>
   </div>
-  <div box-layout gridArea="b2" color="warn" padding="md" borderRadius="sm">
+  <div box-layout gridArea="b2" containerColor="warn" padding="md" borderRadius="sm">
     <span uni-text>b2</span>
   </div>
 </div>
@@ -3755,7 +3827,7 @@ emptyText="No countries found"
       summary: "",
       description: "",
       category: "layout",
-      version: "8.3.0",
+      version: "9.0.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
@@ -3787,7 +3859,7 @@ emptyText="No countries found"
       summary: "",
       description: "",
       category: "primitives",
-      version: "8.3.0",
+      version: "9.0.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
@@ -3847,7 +3919,7 @@ emptyText="No countries found"
       summary: "",
       description: "",
       category: "primitives",
-      version: "8.3.0",
+      version: "9.0.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
@@ -3950,7 +4022,7 @@ emptyText="No countries found"
       summary: "",
       description: "",
       category: "forms",
-      version: "8.3.0",
+      version: "9.0.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
@@ -4025,6 +4097,129 @@ emptyText="No countries found"
               required: false,
               default: "''",
               description: ""
+            },
+            {
+              name: "type",
+              kind: "input",
+              type: "UniInputType",
+              required: false,
+              default: "'text'",
+              description: "Native input type. Text-like types only \u2014 `date`/`time` have dedicated components, and non-text types break the input chrome and the string value."
+            },
+            {
+              name: "readonly",
+              kind: "input",
+              type: "boolean",
+              required: false,
+              default: "false",
+              description: ""
+            },
+            {
+              name: "name",
+              kind: "input",
+              type: "string",
+              required: false,
+              default: "''",
+              description: ""
+            },
+            {
+              name: "min",
+              kind: "input",
+              type: "number | undefined",
+              required: false,
+              default: "undefined",
+              description: ""
+            },
+            {
+              name: "max",
+              kind: "input",
+              type: "number | undefined",
+              required: false,
+              default: "undefined",
+              description: ""
+            },
+            {
+              name: "minLength",
+              kind: "input",
+              type: "number | undefined",
+              required: false,
+              default: "undefined",
+              description: ""
+            },
+            {
+              name: "maxLength",
+              kind: "input",
+              type: "number | undefined",
+              required: false,
+              default: "undefined",
+              description: ""
+            },
+            {
+              name: "pattern",
+              kind: "input",
+              type: "readonly RegExp[]",
+              required: false,
+              default: "[]",
+              description: "Patterns the value must match \u2014 all of them, per Signal Forms. The native `pattern` attribute can only express one, so it is reflected only when there is exactly one; Signal Forms validates the rest either way."
+            },
+            {
+              name: "step",
+              kind: "input",
+              type: "number | string",
+              required: false,
+              description: "Granularity for `type=\"number\"`, e.g. `0.01` or `'any'`."
+            },
+            {
+              name: "autocomplete",
+              kind: "input",
+              type: "string",
+              required: false,
+              description: "Autofill hint, e.g. `email`, `current-password`, `off`."
+            },
+            {
+              name: "inputMode",
+              kind: "input",
+              type: "UniInputMode",
+              required: false,
+              description: "On-screen keyboard hint; defaults to whatever `type` implies."
+            },
+            {
+              name: "list",
+              kind: "input",
+              type: "string",
+              required: false,
+              description: "Id of a `<datalist>` supplying suggestions."
+            },
+            {
+              name: "spellcheck",
+              kind: "input",
+              type: "boolean",
+              required: false,
+              description: ""
+            },
+            {
+              name: "width",
+              kind: "input",
+              type: "string | number | undefined",
+              required: false,
+              default: "undefined",
+              description: ""
+            },
+            {
+              name: "fullWidth",
+              kind: "input",
+              type: "boolean",
+              required: false,
+              default: "false",
+              description: ""
+            },
+            {
+              name: "grow",
+              kind: "input",
+              type: "number | undefined",
+              required: false,
+              default: "undefined",
+              description: ""
             }
           ]
         }
@@ -4059,6 +4254,16 @@ emptyText="No countries found"
           title: "Long Label",
           framework: "angular",
           code: "<!-- Storybook story: Long Label -->\n<uni-input ${argsToTemplate(props)}>\n</uni-input>\n<!-- args:\n{\n    label: 'A Very Long Label That Demonstrates How The Component Handles Extended Text',\n    placeholder: 'Enter some text',\n    value: '',\n    disabled: false,\n    touched: false,\n    invalid: false,\n    dirty: false,\n  }\n-->"
+        },
+        {
+          title: "Types",
+          framework: "angular",
+          code: "<!-- Storybook story: Types -->\n<uni-input ${argsToTemplate(props)}>\n</uni-input>"
+        },
+        {
+          title: "With datalist",
+          framework: "angular",
+          code: "<!-- Storybook story: With datalist -->\n<uni-input ${argsToTemplate(props)}>\n</uni-input>"
         }
       ],
       guidelines: {
@@ -4095,7 +4300,7 @@ emptyText="No countries found"
       summary: "",
       description: "",
       category: "forms",
-      version: "8.3.0",
+      version: "9.0.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
@@ -4132,6 +4337,30 @@ emptyText="No countries found"
               required: false,
               default: "undefined",
               description: "Override the themed field height, e.g. `'auto'` for multi-line fields."
+            },
+            {
+              name: "width",
+              kind: "input",
+              type: "string | number | undefined",
+              required: false,
+              default: "undefined",
+              description: ""
+            },
+            {
+              name: "fullWidth",
+              kind: "input",
+              type: "boolean",
+              required: false,
+              default: "false",
+              description: ""
+            },
+            {
+              name: "grow",
+              kind: "input",
+              type: "number | undefined",
+              required: false,
+              default: "undefined",
+              description: ""
             }
           ]
         }
@@ -4168,7 +4397,7 @@ emptyText="No countries found"
       summary: "",
       description: "",
       category: "components",
-      version: "8.3.0",
+      version: "9.0.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
@@ -4238,7 +4467,7 @@ emptyText="No countries found"
       summary: "",
       description: "",
       category: "layout",
-      version: "8.3.0",
+      version: "9.0.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
@@ -4281,7 +4510,7 @@ emptyText="No countries found"
           title: "Primary",
           framework: "angular",
           code: `<!-- Storybook story: Primary -->
-<div box-layout color="primary" padding="sm">
+<div box-layout containerColor="primary" padding="sm">
   <uni-menu \${argsToTemplate(props)}>
     <button text-button variant="ghost" symbolRight="arrow_drop_down">Menu</button>
   </uni-menu>
@@ -4300,7 +4529,7 @@ emptyText="No countries found"
           title: "Tones",
           framework: "angular",
           code: `<!-- Storybook story: Tones -->
-<div box-layout color="primary" padding="sm">
+<div box-layout containerColor="primary" padding="sm">
   <uni-menu \${argsToTemplate(props)}>
     <button text-button variant="ghost" symbolRight="arrow_drop_down">Menu</button>
   </uni-menu>
@@ -4342,7 +4571,7 @@ emptyText="No countries found"
       summary: "",
       description: "",
       category: "layout",
-      version: "8.3.0",
+      version: "9.0.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
@@ -4424,7 +4653,7 @@ emptyText="No countries found"
       summary: "",
       description: "",
       category: "forms",
-      version: "8.3.0",
+      version: "9.0.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
@@ -4488,6 +4717,11 @@ emptyText="No countries found"
           framework: "angular",
           code: "<!-- Storybook story: Single Selection -->\n<uni-multi-select ${argsToTemplate(props)}>\n</uni-multi-select>\n<!-- args:\n{\n    options: [\n      { value: 'red', label: 'Red' },\n      { value: 'green', label: 'Green' },\n      { value: 'blue', label: 'Blue' },\n    ],\n    selections: ['red'],\n  }\n-->"
         },
+        {
+          title: "Disabled Options",
+          framework: "angular",
+          code: "<!-- Storybook story: Disabled Options -->\n<uni-multi-select ${argsToTemplate(props)}>\n</uni-multi-select>\n<!-- args:\n{\n    options: [\n      { value: 'email', label: 'Email' },\n      { value: 'sms', label: 'SMS \u2014 verify a phone number first', disabled: true },\n      { value: 'push', label: 'Push' },\n      { value: 'fax', label: 'Fax \u2014 retired', disabled: true },\n    ],\n    selections: ['email'],\n  }\n-->"
+        },
         {
           title: "Many Options",
           framework: "angular",
@@ -4500,7 +4734,8 @@ emptyText="No countries found"
         donts: [],
         accessibility: [
           "Options are real checkboxes in a labelled group \u2014 Space toggles, Tab moves between them.",
-          "Selection state is announced per option."
+          "Selection state is announced per option.",
+          "Disabled options stay rendered and announced, not hidden \u2014 removing them would"
         ]
       },
       relatedTokens: []
@@ -4512,7 +4747,7 @@ emptyText="No countries found"
       summary: "",
       description: "",
       category: "forms",
-      version: "8.3.0",
+      version: "9.0.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
@@ -4627,6 +4862,11 @@ emptyText="No countries found"
           framework: "angular",
           code: "<!-- Storybook story: Many Options -->\n<uni-multi-select-dropdown ${argsToTemplate(props)}>\n</uni-multi-select-dropdown>\n<!-- args:\n{\n    options: [\n      { value: 'option1', label: 'First Option' },\n      { value: 'option2', label: 'Second Option' },\n      { value: 'option3', label: 'Third Option' },\n      { value: 'option4', label: 'Fourth Option' },\n      { value: 'option5', label: 'Fifth Option' },\n      { value: 'option6', label: 'Sixth Option' },\n      { value: 'option7', label: 'Seventh Option' },\n      { value: 'option8', label: 'Eighth Option' },\n    ],\n    value: ['option2', 'option4', 'option6'],\n  }\n-->"
         },
+        {
+          title: "Disabled Options",
+          framework: "angular",
+          code: "<!-- Storybook story: Disabled Options -->\n<uni-multi-select-dropdown ${argsToTemplate(props)}>\n</uni-multi-select-dropdown>\n<!-- args:\n{\n    options: [\n      { value: 'email', label: 'Email' },\n      { value: 'sms', label: 'SMS \u2014 verify a phone number first', disabled: true },\n      { value: 'push', label: 'Push' },\n      { value: 'fax', label: 'Fax \u2014 retired', disabled: true },\n    ],\n    value: ['email'],\n  }\n-->"
+        },
         {
           title: "Disabled",
           framework: "angular",
@@ -4650,7 +4890,8 @@ emptyText="No countries found"
         accessibility: [
           'The trigger is a disclosure (`aria-haspopup="dialog"`, `aria-expanded`); the popover contains native focusables Tab reaches normally.',
           "The search input is labelled; options are real checkboxes announced with their state.",
-          "Escape closes the popover and returns focus to the trigger."
+          "Escape closes the popover and returns focus to the trigger.",
+          "Disabled options stay rendered and announced; arrows step over them and"
         ]
       },
       relatedTokens: []
@@ -4662,7 +4903,7 @@ emptyText="No countries found"
       summary: "",
       description: "",
       category: "feedback",
-      version: "8.3.0",
+      version: "9.0.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
@@ -4906,7 +5147,7 @@ emptyText="No countries found"
       summary: "",
       description: "",
       category: "feedback",
-      version: "8.3.0",
+      version: "9.0.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
@@ -4930,7 +5171,7 @@ emptyText="No countries found"
       summary: "",
       description: "",
       category: "data",
-      version: "8.3.0",
+      version: "9.0.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
@@ -5015,7 +5256,7 @@ emptyText="No countries found"
       summary: "Anchored, top-layer panel on the native `popover` element \u2014 the browser owns positioning (CSS anchor positioning), stacking, and, in rich mode, light dismissal.",
       description: 'Anchored, top-layer panel on the native `popover` element \u2014 the browser owns positioning (CSS anchor positioning), stacking, and, in rich mode, light dismissal. Two modes share one implementation: - `rich` (default): a click-toggled disclosure. The projected `[trigger]` carries `aria-expanded`/`aria-controls`; with no trigger content the app drives `open` and no element claims controller ARIA. Focus stays on the trigger (APG disclosure) unless the panel marks an `[autofocus]` field, and returns to the trigger on close. - `tooltip`: hover/focus-triggered, `role="tooltip"` + `aria-describedby`, WCAG 1.4.13 dismissable/hoverable/persistent. Content must not contain focusable elements. Anchoring and control are separate: `anchor` re-anchors the panel to any element (or id) while the trigger keeps the disclosure semantics.',
       category: "layout",
-      version: "8.3.0",
+      version: "9.0.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
@@ -5180,7 +5421,8 @@ emptyText="No countries found"
         "popover.behavior.headerTypeface",
         "popover.behavior.tooltipPadding",
         "popover.behavior.tooltipOpenDelay",
-        "popover.behavior.tooltipCloseDelay"
+        "popover.behavior.tooltipCloseDelay",
+        "popover.behavior.motion"
       ]
     },
     {
@@ -5190,7 +5432,7 @@ emptyText="No countries found"
       summary: "",
       description: "",
       category: "feedback",
-      version: "8.3.0",
+      version: "9.0.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
@@ -5254,7 +5496,7 @@ emptyText="No countries found"
       summary: "",
       description: "",
       category: "feedback",
-      version: "8.3.0",
+      version: "9.0.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
@@ -5310,7 +5552,7 @@ emptyText="No countries found"
       summary: "",
       description: "",
       category: "forms",
-      version: "8.3.0",
+      version: "9.0.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
@@ -5452,7 +5694,7 @@ emptyText="No countries found"
         "radio.behavior.size",
         "radio.behavior.ringColor",
         "radio.behavior.fillColor",
-        "radio.behavior.transitionSpeed"
+        "radio.behavior.motion"
       ]
     },
     {
@@ -5462,7 +5704,7 @@ emptyText="No countries found"
       summary: "",
       description: "",
       category: "directives",
-      version: "8.3.0",
+      version: "9.0.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
@@ -5486,7 +5728,7 @@ emptyText="No countries found"
       summary: "",
       description: "",
       category: "layout",
-      version: "8.3.0",
+      version: "9.0.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
@@ -5541,18 +5783,18 @@ emptyText="No countries found"
       summary: "Native scroll area with theme-driven scrollbar styling.",
       description: "Native scroll area with theme-driven scrollbar styling. Scrollbars are styled entirely through Emotion-generated CSS: `::-webkit-scrollbar` rules cover Chromium/Safari, with a `scrollbar-width`/`scrollbar-color` fallback for Firefox.",
       category: "layout",
-      version: "8.3.0",
+      version: "9.0.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
           selectorOrTag: "[uni-scroll-area], [scroll-area]",
           api: [
             {
-              name: "color",
+              name: "containerColor",
               kind: "input",
               type: "ContainerColorToken",
               required: false,
-              description: ""
+              description: "A container color *pair*: the named surface plus its paired on-color. Named `containerColor`, not `color`, for the same reason as the layout primitives: this is an attribute directive-style selector that shares elements with `uni-text`, which owns `color` and maps it to the CSS property. One `color` binding feeding both would render ink on ink."
             },
             {
               name: "borderRadius",
@@ -5670,7 +5912,7 @@ emptyText="No countries found"
         {
           title: "Primary",
           framework: "angular",
-          code: '<!-- Storybook story: Primary -->\n<div scroll-area ${argsToTemplate(props)} #scrollArea>\n  <button size="sm" text-button variant="ghost" symbolLeft="arrow_downward" (click)="scrollArea.scrollToBottom()">Scroll to bottom</button>\n  ${ngContent}\n  <button size="sm" text-button variant="ghost" symbolLeft="arrow_upward" (click)="scrollArea.scrollToTop()">Back to top</button>\n</div>\n<!-- args:\n{\n    border: \'quaternary\',\n    color: \'tertiary-surface\',\n    height: 200,\n    ngContent: `\n      <span uni-text="headline-medium">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span>\n      <span uni-text="body-1-long">\n      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis facere debitis ullam, quae quidem, impedit\n              culpa nam\n              repellat in voluptatibus esse ab harum, hic? Aliquam nesciunt voluptates repellendus assumenda labore.\n            </p>\n            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro quos voluptate doloribus. Optio unde\n              inventore, tempore\n              nemo repellat expedita! Quod, accusamus nobis iure. Aliquam quibusdam, nemo explicabo ipsum provident\n              asperiores.</p>\n            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat, qui, rem! Debitis cum maiores iste,\n              possimus!\n              Obcaecati accusamus eaque expedita quo soluta quis, repudiandae similique, veritatis repellendus facere\n              suscipit!\n              Et!</p>\n            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum doloremque repellat praesentium quae et\n              consectetur\n              iure quos porro, provident voluptates reprehenderit a. Accusamus ut, quaerat asperiores blanditiis\n              voluptate, sint\n              facilis.</p>\n            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus beatae inventore nobis esse\n              temporibus\n              exercitationem\n              eos illo minima non magnam, provident sit doloribus maiores odio in animi quidem unde. Perferendis.</p>\n\n      </span>\n\n\n    `,\n  }\n-->'
+          code: '<!-- Storybook story: Primary -->\n<div scroll-area ${argsToTemplate(props)} #scrollArea>\n  <button size="sm" text-button variant="ghost" symbolLeft="arrow_downward" (click)="scrollArea.scrollToBottom()">Scroll to bottom</button>\n  ${ngContent}\n  <button size="sm" text-button variant="ghost" symbolLeft="arrow_upward" (click)="scrollArea.scrollToTop()">Back to top</button>\n</div>\n<!-- args:\n{\n    border: \'quaternary\',\n    containerColor: \'tertiary-surface\',\n    height: 200,\n    ngContent: `\n      <span uni-text="headline-medium">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span>\n      <span uni-text="body-1-long">\n      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis facere debitis ullam, quae quidem, impedit\n              culpa nam\n              repellat in voluptatibus esse ab harum, hic? Aliquam nesciunt voluptates repellendus assumenda labore.\n            </p>\n            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro quos voluptate doloribus. Optio unde\n              inventore, tempore\n              nemo repellat expedita! Quod, accusamus nobis iure. Aliquam quibusdam, nemo explicabo ipsum provident\n              asperiores.</p>\n            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat, qui, rem! Debitis cum maiores iste,\n              possimus!\n              Obcaecati accusamus eaque expedita quo soluta quis, repudiandae similique, veritatis repellendus facere\n              suscipit!\n              Et!</p>\n            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum doloremque repellat praesentium quae et\n              consectetur\n              iure quos porro, provident voluptates reprehenderit a. Accusamus ut, quaerat asperiores blanditiis\n              voluptate, sint\n              facilis.</p>\n            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus beatae inventore nobis esse\n              temporibus\n              exercitationem\n              eos illo minima non magnam, provident sit doloribus maiores odio in animi quidem unde. Perferendis.</p>\n\n      </span>\n\n\n    `,\n  }\n-->'
         }
       ],
       guidelines: {
@@ -5688,7 +5930,7 @@ emptyText="No countries found"
       summary: "Generic search field: shared input chrome with a leading magnifier, a clear button while there's a query, Enter to submit, and optional type-ahead \u2014 pass `suggestions` (refresh them from `change`) and the field becomes an ARIA combobox with a keyboard-navigable listbox.",
       description: "Generic search field: shared input chrome with a leading magnifier, a clear button while there's a query, Enter to submit, and optional type-ahead \u2014 pass `suggestions` (refresh them from `change`) and the field becomes an ARIA combobox with a keyboard-navigable listbox. Escape closes the list first, then clears the query.",
       category: "forms",
-      version: "8.3.0",
+      version: "9.0.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
@@ -5733,18 +5975,18 @@ emptyText="No countries found"
               description: "Type-ahead entries. Keep them fresh from `change` emissions; the list shows while the field has focus and entries exist."
             },
             {
-              name: "change",
+              name: "searchChange",
               kind: "output",
               type: "string",
               required: false,
-              description: ""
+              description: "The debounced query, emitted as the user types."
             },
             {
-              name: "search",
+              name: "searchSubmit",
               kind: "output",
               type: "string",
               required: false,
-              description: ""
+              description: "A committed search: Enter, or a suggestion chosen from the list."
             },
             {
               name: "suggestionSelected",
@@ -5766,8 +6008,8 @@ emptyText="No countries found"
   label="Search the docs"
   [debounceTime]="200"
   [suggestions]="suggestions"
-  (change)="filter($event)"
-  (search)="log($event)"
+  (searchChange)="filter($event)"
+  (searchSubmit)="log($event)"
 ></uni-search-input>
 </div>
 <!-- args:
@@ -5777,11 +6019,11 @@ emptyText="No countries found"
         {
           title: "Type-ahead",
           framework: "angular",
-          code: '<!-- Storybook story: Type-ahead -->\n<div box-layout maxWidth="420px">\n<uni-search-input\n  label="Search the docs"\n  [debounceTime]="200"\n  [suggestions]="suggestions"\n  (change)="filter($event)"\n  (search)="log($event)"\n></uni-search-input>\n</div>'
+          code: '<!-- Storybook story: Type-ahead -->\n<div box-layout maxWidth="420px">\n<uni-search-input\n  label="Search the docs"\n  [debounceTime]="200"\n  [suggestions]="suggestions"\n  (searchChange)="filter($event)"\n  (searchSubmit)="log($event)"\n></uni-search-input>\n</div>'
         }
       ],
       guidelines: {
-        whenToUse: "Generic search field wearing the shared input chrome: a decorative leading magnifier,\na clear button while there's a query, and Enter to submit (`search`). `change` emits\ndebounced as the user types \u2014 use it to refresh results or the `suggestions` input.\nWith `suggestions`, the field becomes an ARIA combobox: entries render in a listbox\nunder the field, ArrowUp/Down move the highlight, Enter selects (emitting both\n`suggestionSelected` and `search`), and Escape closes the list first, then clears the\nquery. The suggestion list's surface, elevation and radius resolve from the theme's\n`searchInput` options, alongside the search/clear symbols.",
+        whenToUse: "Generic search field wearing the shared input chrome: a decorative leading magnifier,\na clear button while there's a query, and Enter to submit (`searchSubmit`). `searchChange` emits\ndebounced as the user types \u2014 use it to refresh results or the `suggestions` input.\nWith `suggestions`, the field becomes an ARIA combobox: entries render in a listbox\nunder the field, ArrowUp/Down move the highlight, Enter selects (emitting both\n`suggestionSelected` and `searchSubmit`), and Escape closes the list first, then clears the\nquery. The suggestion list's surface, elevation and radius resolve from the theme's\n`searchInput` options, alongside the search/clear symbols.",
         dos: [],
         donts: [],
         accessibility: [
@@ -5799,7 +6041,7 @@ emptyText="No countries found"
       summary: "",
       description: "",
       category: "forms",
-      version: "8.3.0",
+      version: "9.0.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
@@ -5875,6 +6117,30 @@ emptyText="No countries found"
               required: false,
               description: ""
             },
+            {
+              name: "width",
+              kind: "input",
+              type: "string | number | undefined",
+              required: false,
+              default: "undefined",
+              description: ""
+            },
+            {
+              name: "fullWidth",
+              kind: "input",
+              type: "boolean",
+              required: false,
+              default: "false",
+              description: ""
+            },
+            {
+              name: "grow",
+              kind: "input",
+              type: "number | undefined",
+              required: false,
+              default: "undefined",
+              description: ""
+            },
             {
               name: "ariaLabel",
               kind: "input",
@@ -5901,6 +6167,11 @@ emptyText="No countries found"
           framework: "angular",
           code: "<!-- Storybook story: Disabled -->\n<uni-select ${argsToTemplate(props)}>\n</uni-select>\n<!-- args:\n{\n    placeholder: 'Cannot select...',\n    options: [\n      { value: 'option1', label: 'Option 1' },\n      { value: 'option2', label: 'Option 2' },\n      { value: 'option3', label: 'Option 3' },\n    ],\n    value: 'option2',\n    disabled: true,\n    touched: false,\n    invalid: false,\n    dirty: false,\n  }\n-->"
         },
+        {
+          title: "Disabled Options",
+          framework: "angular",
+          code: "<!-- Storybook story: Disabled Options -->\n<uni-select ${argsToTemplate(props)}>\n</uni-select>\n<!-- args:\n{\n    placeholder: 'Select a plan...',\n    options: [\n      { value: 'free', label: 'Free' },\n      { value: 'pro', label: 'Pro' },\n      { value: 'team', label: 'Team \u2014 requires an organization', disabled: true },\n      { value: 'enterprise', label: 'Enterprise \u2014 contact sales', disabled: true },\n    ],\n    value: null,\n    disabled: false,\n    touched: false,\n    invalid: false,\n    dirty: false,\n  }\n-->"
+        },
         {
           title: "Invalid",
           framework: "angular",
@@ -5923,7 +6194,8 @@ emptyText="No countries found"
         donts: [],
         accessibility: [
           "Native `<select>`: platform keyboard interaction and mobile pickers for free.",
-          "`label` becomes the accessible name; `aria-invalid` reflects the touched error state."
+          "`label` becomes the accessible name; `aria-invalid` reflects the touched error state.",
+          "Disabled options are rendered and announced, not hidden \u2014 removing them would"
         ]
       },
       relatedTokens: []
@@ -5933,9 +6205,9 @@ emptyText="No countries found"
       name: "Skeleton",
       status: "stable",
       summary: "Loading placeholder painted with surface tokens.",
-      description: "Loading placeholder painted with surface tokens. `text` renders one or more lines (the last line shortened, as real text would be), `rect` and `circle` render fixed shapes. The shimmer only animates when the user allows motion; it degrades to static blocks under `prefers-reduced-motion`.",
+      description: "Loading placeholder painted with surface tokens. `text` renders one or more lines (the last line shortened, as real text would be), `rect` and `circle` render fixed shapes. The shimmer only animates when the user allows motion; it degrades to static blocks under `prefers-reduced-motion`. Color and radius are theme options with per-instance overrides, because one app routinely needs several: skeletons on a card and on the page background want different tints, and a pill placeholder wants a different corner than the text bars beside it.",
       category: "components",
-      version: "8.3.0",
+      version: "9.0.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
@@ -5972,6 +6244,38 @@ emptyText="No countries found"
               required: false,
               default: "1",
               description: "Number of text lines (text shape only)."
+            },
+            {
+              name: "color",
+              kind: "input",
+              type: "ColorKey | undefined",
+              required: false,
+              default: "undefined",
+              description: "Base color token; overrides the theme option for this skeleton."
+            },
+            {
+              name: "highlightColor",
+              kind: "input",
+              type: "ColorKey | undefined",
+              required: false,
+              default: "undefined",
+              description: "Shimmer highlight token; overrides the theme option for this skeleton."
+            },
+            {
+              name: "borderRadius",
+              kind: "input",
+              type: "Radius | undefined",
+              required: false,
+              default: "undefined",
+              description: "Radius token; overrides the theme option. Circles are always round."
+            },
+            {
+              name: "label",
+              kind: "input",
+              type: "string | undefined",
+              required: false,
+              default: "undefined",
+              description: "Announces the skeleton to assistive tech as a polite status. Leave unset when a container already carries `aria-busy` \u2014 the skeleton then stays `aria-hidden`, as a decorative placeholder should."
             }
           ]
         }
@@ -5981,37 +6285,42 @@ emptyText="No countries found"
           title: "Text Lines",
           framework: "angular",
           code: `<!-- Storybook story: Text Lines -->
-<div box-layout maxWidth="360px">
+<div box-layout maxWidth="360px" gap="md">
 <uni-card>
-  <div row-layout gap="sm" alignItems="center" padding="md">
-    <uni-skeleton shape="circle" [height]="40" />
-    <div box-layout [grow]="1">
-      <uni-skeleton [lines]="2" />
+  <div box-layout padding="md" gap="sm">
+    <div row-layout gap="sm" alignItems="center">
+      <uni-skeleton shape="rect" borderRadius="max" [width]="56" [height]="20" />
+      <uni-skeleton shape="rect" [width]="120" [height]="12" />
     </div>
-  </div>
-  <div box-layout paddingHorizontal="md" paddingBottom="md">
-    <uni-skeleton shape="rect" [height]="120" />
+    <uni-skeleton [lines]="2" />
   </div>
 </uni-card>
+<uni-skeleton color="surface" highlightColor="surface-variant" [lines]="2" />
 </div>
 <!-- args:
 { shape: 'text', lines: 3 }
 -->`
         },
+        {
+          title: "Per Instance Tokens",
+          framework: "angular",
+          code: '<!-- Storybook story: Per Instance Tokens -->\n<div box-layout maxWidth="360px" gap="md">\n<uni-card>\n  <div box-layout padding="md" gap="sm">\n    <div row-layout gap="sm" alignItems="center">\n      <uni-skeleton shape="rect" borderRadius="max" [width]="56" [height]="20" />\n      <uni-skeleton shape="rect" [width]="120" [height]="12" />\n    </div>\n    <uni-skeleton [lines]="2" />\n  </div>\n</uni-card>\n<uni-skeleton color="surface" highlightColor="surface-variant" [lines]="2" />\n</div>'
+        },
         {
           title: "Card Placeholder",
           framework: "angular",
-          code: '<!-- Storybook story: Card Placeholder -->\n<div box-layout maxWidth="360px">\n<uni-card>\n  <div row-layout gap="sm" alignItems="center" padding="md">\n    <uni-skeleton shape="circle" [height]="40" />\n    <div box-layout [grow]="1">\n      <uni-skeleton [lines]="2" />\n    </div>\n  </div>\n  <div box-layout paddingHorizontal="md" paddingBottom="md">\n    <uni-skeleton shape="rect" [height]="120" />\n  </div>\n</uni-card>\n</div>'
+          code: '<!-- Storybook story: Card Placeholder -->\n<div box-layout maxWidth="360px" gap="md">\n<uni-card>\n  <div box-layout padding="md" gap="sm">\n    <div row-layout gap="sm" alignItems="center">\n      <uni-skeleton shape="rect" borderRadius="max" [width]="56" [height]="20" />\n      <uni-skeleton shape="rect" [width]="120" [height]="12" />\n    </div>\n    <uni-skeleton [lines]="2" />\n  </div>\n</uni-card>\n<uni-skeleton color="surface" highlightColor="surface-variant" [lines]="2" />\n</div>'
         }
       ],
       guidelines: {
-        whenToUse: "Loading placeholder that sketches the shape of incoming content: `text` renders one or\nmore lines (ending on a short line, as real copy would), `rect` stands in for media and\ncharts, `circle` for avatars. Skeletons paint with the theme's surface tokens so they\nsit naturally on any brand in both modes, and the shimmer sweep only animates for users\nwho allow motion \u2014 under `prefers-reduced-motion` it degrades to calm static blocks.\nSkeletons are `aria-hidden`; announce loading on the container (e.g. `aria-busy`)\nwhere your app knows what is actually loading.",
+        whenToUse: "Loading placeholder that sketches the shape of incoming content: `text` renders one or\nmore lines (ending on a short line, as real copy would), `rect` stands in for media and\ncharts, `circle` for avatars. Skeletons paint with the theme's surface tokens so they\nsit naturally on any brand in both modes, and the shimmer sweep only animates for users\nwho allow motion \u2014 under `prefers-reduced-motion` it degrades to calm static blocks.\nSkeletons are `aria-hidden` by default; announce loading on the container (e.g. `aria-busy`)\nwhere your app knows what is actually loading, or give a standalone skeleton a `label`.",
         dos: [],
         donts: [
-          "Announce individual skeletons to assistive tech \u2014 they are decorative placeholders"
+          "Announce every skeleton in a group \u2014 label the container, or one skeleton, not twelve"
         ],
         accessibility: [
-          "Skeletons are `aria-hidden` \u2014 announce loading on the container (e.g. `aria-busy`) where your app knows what is loading.",
+          "Skeletons are `aria-hidden` unless given a `label` \u2014 announce loading on the container (e.g. `aria-busy`) where your app knows what is loading.",
+          'A `label` puts `role="status"` on the host with visually hidden text, so a standalone skeleton announces politely on mount.',
           "The shimmer respects `prefers-reduced-motion`, degrading to static blocks."
         ]
       },
@@ -6021,6 +6330,8 @@ emptyText="No countries found"
         "skeleton.behavior.borderRadius",
         "skeleton.behavior.animation",
         "skeleton.behavior.duration",
+        "skeleton.behavior.direction",
+        "skeleton.behavior.highlightWidth",
         "skeleton.behavior.gap"
       ]
     },
@@ -6031,7 +6342,7 @@ emptyText="No countries found"
       summary: 'Range slider on a native `<input type="range">` \u2014 keyboard interaction and the ARIA slider contract come from the platform.',
       description: 'Range slider on a native `<input type="range">` \u2014 keyboard interaction and the ARIA slider contract come from the platform. Fill, track, thumb and radii resolve from `slider` theme tokens; the fill percentage rides a CSS custom property so dragging never regenerates styles.',
       category: "forms",
-      version: "8.3.0",
+      version: "9.0.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
@@ -6168,7 +6479,7 @@ emptyText="No countries found"
       summary: "",
       description: "",
       category: "feedback",
-      version: "8.3.0",
+      version: "9.0.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
@@ -6245,11 +6556,15 @@ emptyText="No countries found"
         whenToUse: "The Snackbar component is used to give feedback to users after an action has taken place.\nIt appears near the bottom center of the screen temporarily and floats above the UI to not affect the application's layout.\nA side action can be defined (e.g. undoing a process or navigating to the details of a newly created record).",
         dos: [],
         donts: [],
-        accessibility: []
+        accessibility: [
+          '`role="status"` announces the message politely, without moving focus away',
+          "The bar renders in the browser's top layer, so it cannot be covered by a",
+          'It is a `popover="manual"`, not a modal: the rest of the page stays'
+        ]
       },
       relatedTokens: [
         "snackbar.behavior.bottomPosition",
-        "snackbar.behavior.transitionDelay",
+        "snackbar.behavior.motion",
         "snackbar.behavior.autoCloseDelay"
       ]
     },
@@ -6260,7 +6575,7 @@ emptyText="No countries found"
       summary: "",
       description: "",
       category: "data",
-      version: "8.3.0",
+      version: "9.0.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
@@ -6319,7 +6634,7 @@ emptyText="No countries found"
       summary: "",
       description: "",
       category: "layout",
-      version: "8.3.0",
+      version: "9.0.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
@@ -6374,7 +6689,7 @@ emptyText="No countries found"
       summary: 'KPI stat tile: muted label, large value (numbers auto-compact: 48234 \u2192 "48.2K"), an optional delta whose ink is decided by *direction \xD7 whether up is good* (never direction alone \u2014 churn going down is good news), and an optional decorative sparkline.',
       description: 'KPI stat tile: muted label, large value (numbers auto-compact: 48234 \u2192 "48.2K"), an optional delta whose ink is decided by *direction \xD7 whether up is good* (never direction alone \u2014 churn going down is good news), and an optional decorative sparkline. Frame, typography and inks are all `stat` theme tokens.',
       category: "components",
-      version: "8.3.0",
+      version: "9.0.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
@@ -6476,7 +6791,7 @@ emptyText="No countries found"
       summary: "",
       description: "",
       category: "primitives",
-      version: "8.3.0",
+      version: "9.0.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
@@ -6549,7 +6864,7 @@ emptyText="No countries found"
       summary: "One tab inside `uni-tabs`: a label for the tablist plus projected panel content.",
       description: "One tab inside `uni-tabs`: a label for the tablist plus projected panel content. Content is captured in a template and only instantiated while the tab is selected, so inactive panels cost nothing.",
       category: "components",
-      version: "8.3.0",
+      version: "9.0.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
@@ -6589,7 +6904,7 @@ emptyText="No countries found"
       summary: "WAI-ARIA tabs: roving tabindex, automatic activation (arrow keys move focus and select), Home/End, disabled tabs skipped.",
       description: "WAI-ARIA tabs: roving tabindex, automatic activation (arrow keys move focus and select), Home/End, disabled tabs skipped. Only the selected panel is instantiated. All styling resolves from `tabs` theme option tokens.",
       category: "components",
-      version: "8.3.0",
+      version: "9.0.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
@@ -6653,7 +6968,7 @@ emptyText="No countries found"
       summary: "Compact chip for categories, states, filters and tokens.",
       description: "Compact chip for categories, states, filters and tokens. Two orthogonal style axes: `variant` picks the colour role and `tone` picks the archetype (soft / solid / outline). Both live in the theme's `tag` entry, so a theme restyles every chip in the app without touching markup. Structurally a chip is **body + trailing action as siblings**, never nested buttons: an interactive chip whose body is a `<button>` cannot contain the remove `<button>` (invalid HTML, and the inner control becomes unreachable for keyboard users). Both stay independently operable.",
       category: "data",
-      version: "8.3.0",
+      version: "9.0.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
@@ -7015,7 +7330,7 @@ emptyText="No countries found"
       summary: "",
       description: "",
       category: "forms",
-      version: "8.3.0",
+      version: "9.0.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
@@ -7330,9 +7645,9 @@ placeholder="Name or address\u2026"
       name: "Text",
       status: "stable",
       summary: "The typography primitive, applied as an attribute to any element so semantics stay yours.",
-      description: 'The typography primitive, applied as an attribute to any element so semantics stay yours. The attribute value is the typeface: `<h1 uni-text="display-small">`, `<span uni-text="caption">`, dynamic via `[uni-text]="role()"`. With no value, the typeface is inferred from the host element (h1 \u2192 headline-large, p \u2192 body-1-long, \u2026), falling back to `title-small`; the `typeface` input remains as an explicit override.',
+      description: 'The typography primitive, applied as an attribute to any element so semantics stay yours. The attribute value is the typeface: `<h1 uni-text="display-small">`, `<span uni-text="caption">`, dynamic via `[uni-text]="role()"`. With no value, the typeface is inferred from the host element (h1 \u2192 headline-large, p \u2192 body-1-long, \u2026), falling back to `title-small`; the `typeface` input remains as an explicit override. It is a directive, so it stacks with anything else on the element \u2014 a layout attribute (`<div stack-layout uni-text="title-small">`) or a component\'s own host \u2014 rather than colliding with it.',
       category: "primitives",
-      version: "8.3.0",
+      version: "9.0.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
@@ -7359,7 +7674,7 @@ placeholder="Name or address\u2026"
               kind: "input",
               type: "ColorKey",
               required: false,
-              description: ""
+              description: "The ink, mapping straight to the CSS `color` property."
             },
             {
               name: "display",
@@ -7413,7 +7728,7 @@ placeholder="Name or address\u2026"
         }
       ],
       guidelines: {
-        whenToUse: 'The typography primitive, applied as an **attribute on any element** so your HTML\nsemantics stay intact. The attribute value is the typeface \u2014\n`<h1 uni-text="display-small">` \u2014 and `[uni-text]="role()"` binds it dynamically.\nWith no value, the typeface is inferred from the host element (`h1` \u2192\n`headline-large`, `p` \u2192 `body-1-long`, `small` \u2192 `caption`, `blockquote` \u2192 `quote`,\nfalling back to `title-small`), so plain semantic markup is correctly set with zero\nconfiguration. `color` takes any theme color token; `align`, `nowrap`, `maxWidth`,\nand `ellipsis` handle common text layout.',
+        whenToUse: 'The typography primitive, applied as an **attribute on any element** so your HTML\nsemantics stay intact. The attribute value is the typeface \u2014\n`<h1 uni-text="display-small">` \u2014 and `[uni-text]="role()"` binds it dynamically.\nWith no value, the typeface is inferred from the host element (`h1` \u2192\n`headline-large`, `p` \u2192 `body-1-long`, `small` \u2192 `caption`, `blockquote` \u2192 `quote`,\nfalling back to `title-small`), so plain semantic markup is correctly set with zero\nconfiguration. `color` takes any theme color token; `align`, `nowrap`, `maxWidth`,\nand `ellipsis` handle common text layout.\nIt is a directive, so it stacks with anything else on the element \u2014 a layout\nattribute or a component\'s own host \u2014 rather than colliding with it:\n```html\n```\nText owns `color`, because it maps straight to the CSS property. The layout\ndirectives name their container pair `containerColor`, so the two never compete\nfor one binding \u2014 set both on the same element and each reaches its own\ndirective:\n```html\n  Heading\n```\n`containerColor` sets a background **and** its paired on-color, so both\ndirectives write `color` to the element. An explicit `uni-text` `color` always\nwins that \u2014 it is emitted at higher specificity rather than left to stylesheet\norder. Set no `color` and the container\'s on-color shows through, which is the\npoint of a pair.',
         dos: [
           "Reach for semantic elements first and let the element-aware defaults set the type"
         ],
@@ -7433,8 +7748,8 @@ placeholder="Name or address\u2026"
       status: "stable",
       summary: "",
       description: "",
-      category: "primitives",
-      version: "8.3.0",
+      category: "forms",
+      version: "9.0.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
@@ -7516,7 +7831,77 @@ placeholder="Name or address\u2026"
               type: "number | undefined",
               required: false,
               default: "undefined",
-              description: "Visible text rows. Defaults to the theme's `textarea` options."
+              description: "Visible text rows. Defaults to the theme's `textarea` options."
+            },
+            {
+              name: "readonly",
+              kind: "input",
+              type: "boolean",
+              required: false,
+              default: "false",
+              description: ""
+            },
+            {
+              name: "name",
+              kind: "input",
+              type: "string",
+              required: false,
+              default: "''",
+              description: ""
+            },
+            {
+              name: "minLength",
+              kind: "input",
+              type: "number | undefined",
+              required: false,
+              default: "undefined",
+              description: ""
+            },
+            {
+              name: "maxLength",
+              kind: "input",
+              type: "number | undefined",
+              required: false,
+              default: "undefined",
+              description: ""
+            },
+            {
+              name: "autocomplete",
+              kind: "input",
+              type: "string",
+              required: false,
+              description: ""
+            },
+            {
+              name: "spellcheck",
+              kind: "input",
+              type: "boolean",
+              required: false,
+              description: ""
+            },
+            {
+              name: "width",
+              kind: "input",
+              type: "string | number | undefined",
+              required: false,
+              default: "undefined",
+              description: ""
+            },
+            {
+              name: "fullWidth",
+              kind: "input",
+              type: "boolean",
+              required: false,
+              default: "false",
+              description: ""
+            },
+            {
+              name: "grow",
+              kind: "input",
+              type: "number | undefined",
+              required: false,
+              default: "undefined",
+              description: ""
             }
           ]
         }
@@ -7564,7 +7949,7 @@ placeholder="Name or address\u2026"
       summary: "",
       description: "",
       category: "primitives",
-      version: "8.3.0",
+      version: "9.0.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
@@ -7594,7 +7979,7 @@ placeholder="Name or address\u2026"
       summary: "Drop-in switcher for the themes registered via `UNI_THEMES`: a select over `ThemeService.themeOptions` that applies the choice through `selectTheme` (so it persists across reloads like any other theme selection).",
       description: "Drop-in switcher for the themes registered via `UNI_THEMES`: a select over `ThemeService.themeOptions` that applies the choice through `selectTheme` (so it persists across reloads like any other theme selection).",
       category: "components",
-      version: "8.3.0",
+      version: "9.0.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
@@ -7652,7 +8037,7 @@ placeholder="Name or address\u2026"
       summary: "Time field: a combobox over time options \u2014 the same listbox contract as uni-search-input and uni-tag-input.",
       description: "Time field: a combobox over time options \u2014 the same listbox contract as uni-search-input and uni-tag-input. Type `3p`, `930` or `15:00`, or pick `3:00 PM` from the list; the form always gets 24-hour `'HH:mm'` (`hour12` affects display only). The list is assistive, not exhaustive: any parseable time commits, unless `slots` pins the choices (a slot picker) \u2014 then a typed time must match one. Unreadable or unavailable text stays in the field, flagged, with a `rejected` event.",
       category: "forms",
-      version: "8.3.0",
+      version: "9.0.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
@@ -7844,7 +8229,7 @@ placeholder="Name or address\u2026"
       summary: "",
       description: "",
       category: "forms",
-      version: "8.3.0",
+      version: "9.0.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
@@ -7974,7 +8359,7 @@ placeholder="Name or address\u2026"
       summary: "",
       description: "",
       category: "feedback",
-      version: "8.3.0",
+      version: "9.0.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
@@ -8010,14 +8395,6 @@ placeholder="Name or address\u2026"
               required: false,
               default: "false",
               description: ""
-            },
-            {
-              name: "appendToBody",
-              kind: "input",
-              type: "boolean",
-              required: false,
-              default: "false",
-              description: "@deprecated The tooltip renders in the native top layer; ignored."
             }
           ]
         }
@@ -8053,7 +8430,7 @@ placeholder="Name or address\u2026"
       summary: 'A thin sequencer over one `uni-callout`: steps spotlight their targets, a footer walks Next/Back with dots-or-fraction progress, and `advanceOn` gates a step behind an interaction with its target (auto-advancing for clicks, unlocking Next otherwise \u2014 announced through one `role="status"` region).',
       description: 'A thin sequencer over one `uni-callout`: steps spotlight their targets, a footer walks Next/Back with dots-or-fraction progress, and `advanceOn` gates a step behind an interaction with its target (auto-advancing for clicks, unlocking Next otherwise \u2014 announced through one `role="status"` region). Escape or the close button skips the tour and reports the step. `active` is a two-way model, so a tour is deep-linkable and inspectable; steps whose declared target cannot be resolved are skipped (with a dev warning) in the direction of travel rather than erroring.',
       category: "components",
-      version: "8.3.0",
+      version: "9.0.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
@@ -8164,7 +8541,7 @@ placeholder="Name or address\u2026"
       summary: "",
       description: "",
       category: "layout",
-      version: "8.3.0",
+      version: "9.0.0",
       bindings: {
         angular: {
           importPath: "@uni-design-system/uni-angular",
@@ -9196,6 +9573,17 @@ placeholder="Name or address\u2026"
         DarkTheme: "64px"
       }
     },
+    {
+      id: "spacing.xxl",
+      value: "128px",
+      type: "spacing",
+      kind: "style",
+      target: "emotion-css",
+      themeValues: {
+        LightTheme: "128px",
+        DarkTheme: "128px"
+      }
+    },
     {
       id: "border.primary",
       value: "1px solid #6A6F8F",
@@ -9683,15 +10071,15 @@ placeholder="Name or address\u2026"
       }
     },
     {
-      id: "alert.behavior.transitionSpeed",
-      value: 0.35,
-      type: "number",
+      id: "alert.behavior.motion",
+      value: "notification",
+      type: "string",
       kind: "behavioral",
       target: "component-prop",
       appliesTo: "alert",
       themeValues: {
-        LightTheme: 0.35,
-        DarkTheme: 0.35
+        LightTheme: "notification",
+        DarkTheme: "notification"
       }
     },
     {
@@ -10151,15 +10539,15 @@ placeholder="Name or address\u2026"
       }
     },
     {
-      id: "radio.behavior.transitionSpeed",
-      value: 0.3,
-      type: "number",
+      id: "radio.behavior.motion",
+      value: "control",
+      type: "string",
       kind: "behavioral",
       target: "component-prop",
       appliesTo: "radio",
       themeValues: {
-        LightTheme: 0.3,
-        DarkTheme: 0.3
+        LightTheme: "control",
+        DarkTheme: "control"
       }
     },
     {
@@ -10474,6 +10862,18 @@ placeholder="Name or address\u2026"
         DarkTheme: "menu"
       }
     },
+    {
+      id: "dropdown.behavior.motion",
+      value: "popup",
+      type: "string",
+      kind: "behavioral",
+      target: "component-prop",
+      appliesTo: "dropdown",
+      themeValues: {
+        LightTheme: "popup",
+        DarkTheme: "popup"
+      }
+    },
     {
       id: "menu.behavior.minWidth",
       value: 184,
@@ -10619,15 +11019,15 @@ placeholder="Name or address\u2026"
       }
     },
     {
-      id: "menuItem.behavior.transitionSpeed",
-      value: 0.35,
-      type: "number",
+      id: "menuItem.behavior.motion",
+      value: "control",
+      type: "string",
       kind: "behavioral",
       target: "component-prop",
       appliesTo: "menuItem",
       themeValues: {
-        LightTheme: 0.35,
-        DarkTheme: 0.35
+        LightTheme: "control",
+        DarkTheme: "control"
       }
     },
     {
@@ -10799,15 +11199,27 @@ placeholder="Name or address\u2026"
       }
     },
     {
-      id: "expand.behavior.transitionSpeed",
-      value: 0.35,
-      type: "number",
+      id: "popover.behavior.motion",
+      value: "panel",
+      type: "string",
+      kind: "behavioral",
+      target: "component-prop",
+      appliesTo: "popover",
+      themeValues: {
+        LightTheme: "panel",
+        DarkTheme: "panel"
+      }
+    },
+    {
+      id: "expand.behavior.motion",
+      value: "reveal",
+      type: "string",
       kind: "behavioral",
       target: "component-prop",
       appliesTo: "expand",
       themeValues: {
-        LightTheme: 0.35,
-        DarkTheme: 0.35
+        LightTheme: "reveal",
+        DarkTheme: "reveal"
       }
     },
     {
@@ -12442,6 +12854,30 @@ placeholder="Name or address\u2026"
         DarkTheme: 1.4
       }
     },
+    {
+      id: "skeleton.behavior.direction",
+      value: "ltr",
+      type: "string",
+      kind: "behavioral",
+      target: "component-prop",
+      appliesTo: "skeleton",
+      themeValues: {
+        LightTheme: "ltr",
+        DarkTheme: "ltr"
+      }
+    },
+    {
+      id: "skeleton.behavior.highlightWidth",
+      value: 40,
+      type: "number",
+      kind: "behavioral",
+      target: "component-prop",
+      appliesTo: "skeleton",
+      themeValues: {
+        LightTheme: 40,
+        DarkTheme: 40
+      }
+    },
     {
       id: "skeleton.behavior.gap",
       value: "sm",
@@ -12467,15 +12903,15 @@ placeholder="Name or address\u2026"
       }
     },
     {
-      id: "snackbar.behavior.transitionDelay",
-      value: "0.35s",
+      id: "snackbar.behavior.motion",
+      value: "notification",
       type: "string",
       kind: "behavioral",
       target: "component-prop",
       appliesTo: "snackbar",
       themeValues: {
-        LightTheme: "0.35s",
-        DarkTheme: "0.35s"
+        LightTheme: "notification",
+        DarkTheme: "notification"
       }
     },
     {
@@ -12791,15 +13227,15 @@ placeholder="Name or address\u2026"
       }
     },
     {
-      id: "callout.behavior.transitionMs",
-      value: 250,
-      type: "number",
+      id: "callout.behavior.motion",
+      value: "panel",
+      type: "string",
       kind: "behavioral",
       target: "component-prop",
       appliesTo: "callout",
       themeValues: {
-        LightTheme: 250,
-        DarkTheme: 250
+        LightTheme: "panel",
+        DarkTheme: "panel"
       }
     },
     {
@@ -12923,6 +13359,7 @@ placeholder="Name or address\u2026"
         "spacing.md": "16px",
         "spacing.lg": "32px",
         "spacing.xl": "64px",
+        "spacing.xxl": "128px",
         "border.primary": "1px solid #6A6F8F",
         "border.secondary": "1px solid #8C685D",
         "border.tertiary": "1px solid #597B66",
@@ -12970,7 +13407,7 @@ placeholder="Name or address\u2026"
         alert: {
           topPosition: 40,
           borderRadius: "sm",
-          transitionSpeed: 0.35,
+          motion: "notification",
           elevation: "md"
         },
         breadcrumb: {
@@ -13025,7 +13462,7 @@ placeholder="Name or address\u2026"
           size: 20,
           ringColor: "outline",
           fillColor: "surface",
-          transitionSpeed: 0.3
+          motion: "control"
         },
         dialog: {
           borderRadius: "lg",
@@ -13059,7 +13496,8 @@ placeholder="Name or address\u2026"
           border: "none",
           borderRadius: "xxs",
           color: "primary-surface",
-          shadow: "menu"
+          shadow: "menu",
+          motion: "popup"
         },
         menu: {
           minWidth: 184,
@@ -13076,7 +13514,7 @@ placeholder="Name or address\u2026"
           typeface: "label",
           hoverColor: "primary-container",
           activeSymbol: "check",
-          transitionSpeed: 0.35
+          motion: "control"
         },
         popover: {
           color: "primary-surface",
@@ -13092,10 +13530,11 @@ placeholder="Name or address\u2026"
           headerTypeface: "title-small",
           tooltipPadding: "4px 8px",
           tooltipOpenDelay: 500,
-          tooltipCloseDelay: 150
+          tooltipCloseDelay: 150,
+          motion: "panel"
         },
         expand: {
-          transitionSpeed: 0.35
+          motion: "reveal"
         },
         footer: {
           height: 52,
@@ -13278,11 +13717,13 @@ placeholder="Name or address\u2026"
           borderRadius: "xs",
           animation: "shimmer",
           duration: 1.4,
+          direction: "ltr",
+          highlightWidth: 40,
           gap: "sm"
         },
         snackbar: {
           bottomPosition: 40,
-          transitionDelay: "0.35s",
+          motion: "notification",
           autoCloseDelay: 35e3
         },
         symbol: {
@@ -13317,7 +13758,7 @@ placeholder="Name or address\u2026"
           spotlightPadding: 6,
           spotlightRadius: "xs",
           ringWidth: 2,
-          transitionMs: 250
+          motion: "panel"
         },
         tour: {
           progressStyle: "dots",
@@ -13421,6 +13862,7 @@ placeholder="Name or address\u2026"
         "spacing.md": "16px",
         "spacing.lg": "32px",
         "spacing.xl": "64px",
+        "spacing.xxl": "128px",
         "border.primary": "1px solid #AFB5D8",
         "border.secondary": "1px solid #D5ADA1",
         "border.tertiary": "1px solid #9EC2AB",
@@ -13468,7 +13910,7 @@ placeholder="Name or address\u2026"
         alert: {
           topPosition: 40,
           borderRadius: "sm",
-          transitionSpeed: 0.35,
+          motion: "notification",
           elevation: "md"
         },
         breadcrumb: {
@@ -13523,7 +13965,7 @@ placeholder="Name or address\u2026"
           size: 20,
           ringColor: "outline",
           fillColor: "surface",
-          transitionSpeed: 0.3
+          motion: "control"
         },
         dialog: {
           borderRadius: "lg",
@@ -13557,7 +13999,8 @@ placeholder="Name or address\u2026"
           border: "none",
           borderRadius: "xxs",
           color: "primary-surface",
-          shadow: "menu"
+          shadow: "menu",
+          motion: "popup"
         },
         menu: {
           minWidth: 184,
@@ -13574,7 +14017,7 @@ placeholder="Name or address\u2026"
           typeface: "label",
           hoverColor: "primary-container",
           activeSymbol: "check",
-          transitionSpeed: 0.35
+          motion: "control"
         },
         popover: {
           color: "primary-surface",
@@ -13590,10 +14033,11 @@ placeholder="Name or address\u2026"
           headerTypeface: "title-small",
           tooltipPadding: "4px 8px",
           tooltipOpenDelay: 500,
-          tooltipCloseDelay: 150
+          tooltipCloseDelay: 150,
+          motion: "panel"
         },
         expand: {
-          transitionSpeed: 0.35
+          motion: "reveal"
         },
         footer: {
           height: 52,
@@ -13776,11 +14220,13 @@ placeholder="Name or address\u2026"
           borderRadius: "xs",
           animation: "shimmer",
           duration: 1.4,
+          direction: "ltr",
+          highlightWidth: 40,
           gap: "sm"
         },
         snackbar: {
           bottomPosition: 40,
-          transitionDelay: "0.35s",
+          motion: "notification",
           autoCloseDelay: 35e3
         },
         symbol: {
@@ -13815,7 +14261,7 @@ placeholder="Name or address\u2026"
           spotlightPadding: 6,
           spotlightRadius: "xs",
           ringWidth: 2,
-          transitionMs: 250
+          motion: "panel"
         },
         tour: {
           progressStyle: "dots",
@@ -13829,6 +14275,128 @@ placeholder="Name or address\u2026"
     {
       package: "@uni-design-system/uni-angular",
       releases: [
+        {
+          version: "9.0.0",
+          entries: [
+            {
+              bump: "major",
+              title: "Box learns `flex` / `shrink` / `basis` and `marginInline`.",
+              body: '**`flex`.** `grow` emits `flex-grow` alone, which leaves `flex-basis: auto` \u2014 so\nit cannot express `flex: 1`, and any layout wanting siblings to share space\nevenly regardless of content width had to stay in CSS. `[flex]="1"` now emits\nthe shorthand; `shrink` and `basis` cover the rest. `grow` is unchanged, so no\nexisting layout moves.\n\nThese three go through a new `ThemeService.styleIfSet()`, which treats only\n`undefined` as unset \u2014 the shared `style()` helper drops falsy values, which\nwould have silently swallowed `[shrink]="0"`, the single most useful value.\n\n**`marginInline`.** `margin: 0 auto` on a max-width container had no Box\nequivalent, so page shells kept an inline style for it. `marginInline="auto"`\ncenters such a container, and a spacing token works too.\n\n```html\n<main box-layout maxWidth="1200px" marginInline="auto" padding="lg">\u2026</main>\n```\n\nOnly the inline axis is exposed. Block margins collapse and fight `gap`, which\nis why the primitives carry no margin otherwise \u2014 inline margins do neither, so\nthis is a deliberate line rather than a crack in the token-only surface.',
+              commit: "c0c6056"
+            },
+            {
+              bump: "major",
+              title: "Every deprecated API is removed. The library now carries no `@deprecated`",
+              body: "symbols at all.\n\n**Per-component duration options \u2192 the `motion` scale.** Six components carried\ntheir own duration knob that predated the motion scale and _won over_ it:\n`expand.transitionSpeed`, `callout.transitionMs`, `radio.transitionSpeed`,\n`menuItem.transitionSpeed`, `alert.transitionSpeed` and\n`snackbar.transitionDelay`. All are gone, along with the precedence branch each\none required \u2014 timing now comes from the token, full stop.\n\nRetime the token instead; one edit covers every component pointing at it. To\nretime a single component, define a token of your own and point that\ncomponent's `motion` option at it:\n\n```ts\ncreateTheme({\n  \u2026,\n  motion: { productive: { duration: 110, easing: 'ease' } },\n  components: { menuItem: { options: { motion: 'productive' } } },\n});\n```\n\nA `duration: 0` token is how a theme opts out of motion \u2014 that is what\n`transitionSpeed: 0` used to mean. Both showcase themes are migrated this way\n(Carbon to a 110ms `productive` token, Wellsourced to an `instant` one).\n\n**Options that never did anything.** `card.transitionSpeed` and\n`inputBox.transitionSpeed` were read by nothing and never had been. Delete them\nfrom your theme; nothing replaces them.\n\n**Renames and obsolete APIs**\n- `inputBox.typeFace` \u2192 `typeface` (the casing every other component uses).\n- `uni-tooltip`'s `appendToBody` input \u2014 inert since the tooltip moved to the\n  native top layer, which escapes any overflow context by itself.\n- Box's `elevation` input \u2192 `shadow`, in both the Angular and React packages.\n  It was a second name for the same thing.\n- The Angular `icons` re-export \u2192 import `BaseIcons` from\n  `@uni-design-system/uni-core`. The default set ships with every theme.\n\n**The HSL color legacy is gone from uni-core.** `uniColor`, `randomRangeValue`,\n`CategorySaturation` and `CategoryLightness` are removed, superseded by the\ndeterministic OKLCH engine (`generateThemes` / `generatePalette`) \u2014 same input,\nsame theme, WCAG-checked. `RoleHues` and the `UniColor` type go with them: they\nwere reachable only through `uniColor`, and `RoleHues` had gone stale enough to\nhold saturation values in a table of hues.\n\n**Deferred output renames.** Three outputs were held back because renaming is\nbreaking; this is that release. Each also drops an eslint escape it needed for\nshadowing a native event name or using an `on` prefix.\n\n| Component            | Before            | After            |\n| -------------------- | ----------------- | ---------------- |\n| `uni-debounce-input` | `(change)`        | `(valueChange)`  |\n| `uni-search-input`   | `(change)`        | `(searchChange)` |\n| `uni-search-input`   | `(search)`        | `(searchSubmit)` |\n| `dragAndDrop`        | `(onFileDropped)` | `(fileDropped)`  |\n\n**`uni-dropdown`'s `color` input \u2192 `containerColor`,** completing the rule the\nlayout directives set: every container-pair input in the library is now\n`containerColor`, and plain `color` always means the CSS property.\n\n**`ThemeService.getSpacing('none')` now returns `0`, not the string `'none'`.**\n`'none'` is not a valid length, so it was silently dropped wherever it landed \u2014\n`uni-menu` carried a comment working around exactly that, which is now deleted.",
+              commit: "8250162"
+            },
+            {
+              bump: "major",
+              title: "`uni-input` gets a `type`, and the input chrome stops needing a wrapper div.",
+              body: "**Types.** `uni-input` was text-only with no `type` at all, so every email, URL,\nnumber and phone field had to fall back to `uni-input-box` plus a hand-written\nnative `<input>`, and `type=\"password\"` could not go through it. It now takes\nthe text-like types: `text` (default), `email`, `password`, `search`, `tel`,\n`url`, `number`.\n\nNon-text types (`checkbox`, `radio`, `file`, `range`, `color`) stay out \u2014 they\nbreak both the input chrome and the `FormValueControl<string>` value contract \u2014\nas do `date` / `time` / `datetime-local`, which have dedicated components.\n\n**Native passthroughs.** `autocomplete`, `inputMode`, `list` (a `<datalist>` id),\n`step` and `spellcheck` are plain passthroughs; an unset one emits no attribute.\n`readonly`, `name`, `min`, `max`, `minLength`, `maxLength` and `pattern` are\nSignal Forms' own optional control inputs, so the `[field]` directive syncs them\nfrom your validators exactly as it already syncs `required` \u2014 and they are\nreflected onto the native element so the browser contributes too. Signal Forms\ntreats multiple `pattern`s as all-must-match, which the native attribute cannot\nexpress, so it is reflected only when there is exactly one.\n\n`uni-textarea` gains `readonly`, `name`, `minLength`, `maxLength`, `autocomplete`\nand `spellcheck`; `uni-debounce-input` gains `type`, `autocomplete` and\n`inputMode`.\n\n**Sizing.** `uni-input-box`'s host is `display: contents`, so a width or layout\nattribute set on the element itself was silently dropped and every call site\nneeded a wrapper `<div>`. It now takes `width`, `fullWidth` and `grow` (joining\n`minWidth`), which reach the real box inside; `uni-input`, `uni-textarea` and\n`uni-select` forward all four. The `display: contents` behavior is now documented\ntoo \u2014 it stays surprising even once sizing works.\n\nBoth `uni-input` and `uni-debounce-input` now accept the adornment slots as\neither element or attribute selectors (`<span pre-input>` as well as\n`<pre-input>`), which had drifted apart between them.",
+              commit: "c0c6056"
+            },
+            {
+              bump: "major",
+              title: "The layout primitives and `uni-text` are now **directives**, so they compose.",
+              body: 'They were components with attribute-only selectors, which meant any two of them\non one element threw NG0300 ("multiple components match"). `<div row-layout\nso it reached production as a silent style mismatch. `<uni-card box-layout>`\nwas blocked for the same reason, and `box.component.ts` documented the\nwrap-it-in-a-div workaround as permanent.\n\nAll eight are pure host-styling wrappers (an `<ng-content>`-only template plus a\n`[class]` host binding), so as directives they render identically and now stack\nfreely \u2014 with each other, with `uni-text`, and with a component\'s own host\nelement. Angular reconciles the host `class` bindings additively, so each\ncontributor\'s styles survive rather than one silently winning; there is a spec\npinning that.\n\n```html\n<div row-layout uni-text="title-small" padding="md">Heading</div>\n<uni-card box-layout padding="lg">\u2026</uni-card>\n```\n\n**BREAKING: class renames.** `UniBoxComponent` \u2192 `UniBoxDirective`, and likewise\nfor Row, Stack, Center, Wrap, Grid, GridArea and Text. No compatibility aliases:\na major is where the break belongs, and an alias shipped on day one of a major\ntends to survive to the next one. Rename the symbols in your `imports: []`.\n\n**BREAKING: the layout directives\' `color` is now `containerColor`.**\n\nComposing the two directives exposed a name collision. `color` was an input on\nboth \u2014 a _container pair_ on the layout primitives, the CSS `color` property on\n`uni-text` \u2014 so on a shared element one binding fed both: the box painted the\nsurface, the text took the same token, and the text rendered as ink on identical\nink. A deprecated alias would have kept that path alive, so there isn\'t one.\n\n`color` belongs to `uni-text`, which maps it straight to the CSS property. The\ncontainer pair is an invented concept and now says so:\n\n```html\n<!-- before -->\n<div box-layout color="surface">\n  <!-- after -->\n  <div box-layout containerColor="surface"></div>\n</div>\n```\n\nThis applies to all seven layout directives (Box and its subclasses) and to\n`uni-scroll-area`, which is attribute-selected too and carried the identical\nhazard. `backgroundColor`, which sets only the background and no paired\non-color, is unchanged, as is `color` on `uni-icon` / `uni-skeleton` /\n`uni-badge` \u2014 there it already means a foreground color, the same sense as\n`uni-text`\'s.\n\nCodemod: rename `color` \u2192 `containerColor` on any element carrying a `*-layout`\nor `scroll-area` attribute; leave `color` alone everywhere else.\n\nThe rename fixed the input collision; a second one sat underneath it in CSS.\n`containerColor` emits a background **and** its paired on-color, so both\ndirectives write `color` to the element \u2014 at equal specificity, which left the\ncascade to Emotion\'s insertion order (text won on `row-layout`, lost on\n`scroll-area`). An explicit `uni-text` `color` is now emitted at doubled\nspecificity, so it deterministically wins; with no explicit color, the\ncontainer\'s on-color still shows through as intended.\n\n`uni-dropdown` still names its container pair `color`. It is an element selector\n(`<uni-dropdown>`), so the collision needs someone to put `uni-text` on a\ncomponent host \u2014 possible, but not the natural path the layout attributes are.\n\n**New: `UNI_LAYOUT` and `UNI_FORMS`.** These are attribute selectors, so an\nelement carrying one whose directive was never imported compiles cleanly and\nsilently does nothing. Spreading a family is the cheapest guard:\n\n```ts\nimports: [...UNI_LAYOUT];\n```',
+              commit: "c0c6056"
+            },
+            {
+              bump: "major",
+              title: "The spacing scale is open, and `createTheme` finally accepts one.",
+              body: 'The scale was a closed seven-name union on a doubling curve (2/4/8/16/32/64px).\nReal layouts are rarely built exclusively on one \u2014 the gaps between 8 and 16,\nand 16 and 32, are where a lot of real spacing lives \u2014 and there was no way to\nadd a step, because **`ThemeConfig` had no `spacing` field at all**:\n`createTheme` hardcoded the base scale. The Wellsourced showcase theme had to\nbolt its scale on after the fact with a post-hoc spread.\n\nThree changes, which only work together:\n- `NullableSize` gains a `(string & {})` arm, so any name the theme defines is a\n  valid `padding` / `gap` / `marginInline` value while the seven named steps keep\n  their autocomplete. `Size` itself stays closed \u2014 it also types _component_\n  sizes, where an arbitrary name has nothing to resolve against.\n- `Spacing` is spelled out as named-optional-keys plus an index signature\n  (mirroring `Typography`), rather than a `Partial<Record<\u2026>>` that would\n  collapse to a plain string record and lose the named steps.\n- `createTheme({ spacing })` merges over the base scale.\n\n```ts\ncreateTheme({ id, name, colors, spacing: { tight: \'6px\', snug: \'10px\' } });\n```\n\n```html\n<div stack-layout padding="tight" gap="snug">\u2026</div>\n```\n\nBecause the scale is open, a mistyped token can no longer be a compile error. It\nis dropped \u2014 an `undefined` CSS value simply does not render \u2014 and\n`ThemeService` now warns once per unknown token in development, naming the\ntokens the active theme does define. Scaffolded `uni-theme.ts` files carry a\n`spacing` block so the static theme file stays the editable source of truth.\n\n**Behavior change:** `xxl` was in the `Size` union but defined by no base theme,\nso `padding="xxl"` type-checked and rendered nothing. It is now `128px`,\ncompleting the doubling \u2014 any element relying on the silent drop will start\nshowing spacing.',
+              commit: "c0c6056"
+            }
+          ],
+          dependencyBumps: [
+            "@uni-design-system/uni-core@9.0.0"
+          ]
+        },
+        {
+          version: "8.4.0",
+          entries: [
+            {
+              bump: "minor",
+              title: "`uni-callout` and `uni-expand` now read their timing from the theme's `motion`",
+              body: "scale, so every animated surface in the library is retimed from one place.\nThey were the last two carrying their own motion options \u2014 in different units,\nunder different names (`transitionMs` in milliseconds, `transitionSpeed` in\nseconds).\n\nA third token joins `popup` and `panel`:\n\n| Token    | Default           | Used by               |\n| -------- | ----------------- | --------------------- |\n| `reveal` | 350ms ease-in-out | expand, expand-toggle |\n\n`reveal` is a _base_ speed, not a final duration: `uni-expand` still scales it\nby content height (\u221A-of-height, clamped) so short regions stay snappy and tall\nones aren't rushed, and its easing now drives the reveal curve, which was\nhardcoded. `uni-expand-toggle` resolves the token the same way, so the chevron\nand the region cannot drift apart. `uni-callout` maps onto `panel`, whose\n250ms matches what it already used.\n\n**Not breaking.** `transitionMs` and `transitionSpeed` are deprecated but\nstill honoured, and deliberately outrank `motion` \u2014 a theme that set either\nkeeps precisely its current timing rather than being retimed underneath it.\nThey are removed next major. Per-instance inputs, like `uni-expand`'s\n`transitionSpeed`, still outrank everything.\n\nNothing moves differently by default: callout renders 0.25s ease and expand\n0.35s ease-in-out exactly as before, verified against the rendered styles.",
+              commit: "1aca747"
+            },
+            {
+              bump: "minor",
+              title: "New `createAnnouncer()` in the CDK's a11y helpers: the polite live region a",
+              body: 'form control uses for its running commentary \u2014 commits, clears, refused\nentries, result counts \u2014 changes a sighted user sees but that are otherwise\nsilent to a screen reader.\n\n`uni-combobox`, `uni-tag-input`, `uni-time-input`, `uni-date-input`,\n`uni-calendar` and `uni-tour` now share it instead of carrying byte-identical\ncopies. The helper holds no DOM and no styling: the `role="status"` element\nstays in each component\'s own template, where its placement and\nvisually-hidden class already belong.\n\nThis fixes a real bug in `uni-tour`, which had a plain signal rather than a\ncopy of the shared idiom. Assistive tech reads a live region when its content\n_changes_, so writing the identical string is a no-op \u2014 its "Next available"\ngate message was announced on the first step that used it and silently dropped\non every later one. `createAnnouncer` breaks the equality with a trailing\nspace, inaudible to a screen reader, alternating between the two forms so\nnothing accumulates.\n\nConsuming the helper directly:\n\n```ts\nprotected readonly announcer = createAnnouncer();\n// this.announcer.announce(\'Alabama selected.\');\n```\n\n```html\n<span role="status" aria-live="polite" [class]="srOnly"> {{ announcer.message() }} </span>\n```\n\nThe region must already be in the DOM when the component renders \u2014 one added\nat the moment it gains text is not reliably announced.',
+              commit: "e459f91"
+            },
+            {
+              bump: "minor",
+              title: "Home and End now move the caret in the combobox-style controls \u2014",
+              body: "`uni-combobox`, `uni-search-input`, `uni-tag-input` \u2014 instead of jumping to\nthe ends of the suggestion list. APG reserves those keys for text editing in\nan editable combobox, and a field that claims them makes its own text\nun-navigable exactly when you are most likely to be editing it: with the list\nopen. `uni-time-input` already behaved this way.\n\nNothing is lost. ArrowUp on a closed list already opens it on the last option,\nArrowDown on the first, and navigation wraps at both ends, so every position\nHome/End reached is still one keystroke away.\n\n`uni-multi-select-dropdown` keeps them: its roving focus rides the option\ncheckboxes rather than a text field, so there is no caret with a better claim.\n\n`ListboxNavigation` carries the switch as `homeEndNavigates`, defaulting to\nfalse \u2014 off is the right default for a control built around a text input,\nwhich is every consumer but one. If you build on the CDK helper directly and\nwant the old behavior, pass `homeEndNavigates: true`.\n\nThis also fixes a sharper bug in `uni-search-input` and `uni-tag-input`, where\nHome/End reached the navigation helper unconditionally: pressing either not\nonly moved the active option but _opened a closed suggestion list_.",
+              commit: "6e2cfb1"
+            },
+            {
+              bump: "minor",
+              title: "The four listbox popups \u2014 `uni-search-input`, `uni-tag-input`,",
+              body: "`uni-time-input` and `uni-combobox` \u2014 now render in the browser's top layer,\nanchored to their field, instead of as absolutely-positioned children of it.\nPut any of them inside a card, a table cell, a scroll area or a dialog and the\nsuggestion list is no longer clipped by that ancestor's `overflow`. The browser\ntracks the field natively, so the list follows on scroll and resize with no\nlisteners, and flips above the field near the bottom of the viewport.\n\nThey also open the way `uni-dropdown` does now \u2014 the same 100 ms scale-and-fade\n\u2014 so every popup panel in the library animates alike instead of the listboxes\nalone snapping into place. The origin is measured from where the popup actually\nopened, so one that flips above its field near the bottom of the viewport still\ngrows out of the edge it is attached to. Under `prefers-reduced-motion` there is\nno transition at all.\n\nNothing changes in the components' APIs or in how they dismiss. The popups use\n`popover=\"manual\"`, not `auto`: these controls already own dismissal through\nfocusout, Escape and commit, and `auto`'s light-dismiss fires on pointerdown\noutside the popup \u2014 which includes their own input, so it would close the list\non every click into the field.\n\nPositioning is gated on CSS anchor positioning support, checked together with\nthe top layer rather than separately. Browsers that have `popover` but not\nanchors \u2014 Safari 17 through 25 \u2014 keep the previous in-flow popup, which still\nclips inside `overflow: hidden` ancestors but stays on its field; promoting it\nthere would strand the list a viewport height down the page, since a top-layer\nelement has no positioned ancestor to resolve against.\n\nShared plumbing lives in `components/forms/listbox-popup.ts` alongside\n`listboxPopupStyles()`, which grew an optional `anchor` and now emits the\nin-flow rules as the base with the anchored ones in an `@supports` block.",
+              commit: "dd33baa"
+            },
+            {
+              bump: "minor",
+              title: "`Option.disabled` now works in the three remaining `Options<T>` consumers, not",
+              body: "just `uni-combobox`: `uni-select`, `uni-multi-select-dropdown` and\n`uni-multi-select`. Marking an individual choice `disabled` shows it without\noffering it \u2014 the plan that needs an upgrade, the channel that needs a verified\nphone number \u2014 instead of dropping it from the array and leaving the list\nlying about what exists.\n\n`uni-select` passes it to the native `<option>`, so the platform handles\nskipping, greying and announcement. The two multi-selects disable the option's\ncheckbox and refuse the toggle even when called directly. In\n`uni-multi-select-dropdown` the arrow keys step over disabled rows and Home/End\nland on the nearest enabled option \u2014 `ListboxNavigation` already knew how, it\njust was not being told which rows were disabled \u2014 so focus never parks on a\ncheckbox that cannot take it.\n\n`selectAll()` on both multi-selects now selects only enabled options. A\ndisabled option is not committable, so nothing may commit one on the user's\nbehalf; `deselectAll()` still clears everything. If you relied on `selectAll()`\nreturning every value including disabled ones, note that only options you have\nexplicitly marked `disabled` are affected. Whole-field `disabled` is unchanged\nand still disables the entire control.",
+              commit: "2910c67"
+            },
+            {
+              bump: "minor",
+              title: "`uni-alert`, `uni-snackbar`, `uni-radio` and `uni-menu-item` now read their",
+              body: "timing from the theme's `motion` scale, which completes the migration: every\nanimated component in the library is retimed from one place.\n\nTwo tokens join `popup`, `panel` and `reveal`:\n\n| Token          | Default           | Used by          |\n| -------------- | ----------------- | ---------------- |\n| `notification` | 350ms ease-in-out | alert, snackbar  |\n| `control`      | 300ms ease        | radio, menu-item |\n\n**One thing moves differently:** `menu-item`'s hover transition goes from\n0.35s to 0.3s, joining `radio` on the shared `control` token. The two were\nnever deliberately different \u2014 `radio`'s own option documented its 0.3 as\n\"matching menuItem\", which was not true \u2014 so this corrects drift rather than\nchanging a decision. A theme that wants the old timing can set the deprecated\n`transitionSpeed`, or retime `control`. Everything else is byte-identical,\nverified against the rendered styles.\n\n**Deprecated, still honoured, removed next major:**\n`alert.transitionSpeed`, `snackbar.transitionDelay`, `radio.transitionSpeed`\nand `menuItem.transitionSpeed` all still work and still outrank `motion`, so a\ntheme that set them keeps its exact timing. `menu-item`'s escape hatch is\nintact too: with neither the option nor a token set it still renders no\ntransition at all, and a token with `duration: 0` is the way to ask for\ninstant now.\n\n`card.transitionSpeed` and `input-box.transitionSpeed` are also deprecated,\nfor a different reason: **neither was ever read by its component.** Setting\nthem has never had any effect. They are removed next major and nothing needs\nto replace them.\n\n`uni-skeleton` is deliberately left out. Its shimmer is a loop rather than a\ntransition, and folding a repeating animation into a scale built around\nentering and leaving would make the scale mean two different things.",
+              commit: "6f76c1d"
+            },
+            {
+              bump: "minor",
+              title: '`uni-skeleton` picks up the knobs an app theme could not reach. `color`, `highlightColor` and `borderRadius` are now inputs that take a token name and fall back to the theme option, because one screen routinely needs several of each \u2014 text bars and a pill chip do not share a corner (`borderRadius="max"`), and a skeleton on a card wants a different tint than one on the page background.',
+              body: "The shimmer is now a band swept with `transform` rather than an animated `background-position`: it composites instead of repainting every frame, and its geometry is themeable via two new options, `direction` (`'ltr' | 'rtl'`, default `'ltr'` \u2014 the sweep previously ran right-to-left) and `highlightWidth` (band width as a percentage of the block, default `40`). Both ends of the band are the base color, so it dissolves into the block with no alpha and no fringing.\n\nA new `label` input announces a standalone skeleton: set it and the host becomes `role=\"status\"` with visually hidden text instead of `aria-hidden=\"true\"`. Unlabelled skeletons stay `aria-hidden`, so container-level `aria-busy` patterns are unchanged.",
+              commit: "228c17f"
+            },
+            {
+              bump: "minor",
+              title: "`uni-snackbar` now renders in the browser's top layer, so it can no longer be",
+              body: 'covered by a high `z-index` or clipped by an `overflow: hidden` or transformed\nancestor. It was the last overlay in the library still competing on stacking\norder: a `<dialog>` opened with `.show()`, which is the _non-modal_ form and\nnever enters the top layer, left it relying on `zIndex: Z_INDEX.dialog`. That\nheld only because apps mount the bar near the root \u2014 anywhere else, a\nconfirmation of what just happened could be silently buried.\n\nThe bar is now a `popover="manual"`. Manual rather than auto because a\nsnackbar must not light-dismiss: a click anywhere else on the page would tear\nit away from someone still reading it. It is not `showModal()` either \u2014 that\nwould make the rest of the page inert to announce a transient message.\n\n`role="status"`, the auto-close timer, its pause-on-hover and pause-on-focus\nbehaviour, the entry and exit animations, and the `[(show)]` / `open()` /\n`close()` API are all unchanged.\n\nThe element behind the component changed from `<dialog>` to `<div>`: the bar\nis never modal, and `<dialog>`\'s `open` attribute would have been a second,\ncompeting notion of "shown" alongside the popover\'s own state. Styles that\nreach inside the component to target `uni-snackbar dialog` need updating \u2014\n`uni-snackbar [role="status"]` is the stable selector.',
+              commit: "eb795a3"
+            },
+            {
+              bump: "minor",
+              title: "Overlay timing is now a theme token. `UniTheme` gains a `motion` scale",
+              body: "alongside `radii`, `shadows` and the rest, and the overlays point at it by\nname instead of carrying their own hardcoded durations.\n\nUntil now a theme could slow a skeleton shimmer but not a dropdown: `expand`,\n`skeleton` and `callout` each exposed their own motion option while\n`uni-dropdown` hardcoded 100ms and the combobox-style listbox popups copied\nthat constant. Retiming the library meant editing components.\n\nTwo tokens ship, because two things genuinely move differently \u2014 a small panel\nattached to a control snaps, a larger free-floating surface settles:\n\n| Token   | Default            | Used by                                                                     |\n| ------- | ------------------ | --------------------------------------------------------------------------- |\n| `popup` | 100ms linear, \xD70.8 | dropdown, menu, multi-select, combobox, search-input, tag-input, time-input |\n| `panel` | 250ms ease         | popover                                                                     |\n\nA token carries `duration` (ms), `easing`, and an optional `scale` for panels\nthat grow into place \u2014 one token rather than separate duration and easing\nscales, because they are one design decision: slowing a panel without\nsoftening its curve reads as sluggish rather than calm.\n\n```ts\ncreateTheme({\n  id: 'Calm',\n  name: 'Calm',\n  colors,\n  motion: { popup: { duration: 240, easing: 'ease-out', scale: 0.95 } },\n});\n```\n\nTokens you don't restate keep their base values, and a component can still\npoint at a token of its own through its `motion` option.\n\nNothing moves differently by default \u2014 every current duration, easing and\nscale is preserved exactly, verified against the rendered styles. Themes that\npredate the scale keep working: `createTheme` fills it in, the validator does\nnot require it, and a theme registered as JSON without it resolves to the base\ntiming rather than failing. `motionSafe` remains the floor, so a theme decides\nhow overlays move for people who want movement, never whether they move at\nall.\n\n`callout`'s existing `transitionMs` option and the `expand`/`skeleton`\ndurations are untouched for now; folding them into this scale is a follow-up.",
+              commit: "3b51ace"
+            },
+            {
+              bump: "patch",
+              title: "`uni-dropdown` now uses the CDK's overlay helpers instead of its own copies of",
+              body: "them. It predates `cdk/overlay`, so it had been carrying a duplicate\nplacement-to-`transform-origin` map, a duplicate focus-restore rule, a\nduplicate discrete-transition block, and hand-written anchor and toggle-state\ncode. `TRANSFORM_ORIGINS` had no consumers at all as a result \u2014 the shared\nconstant existed while the one component that needed it used its own copy.\n\nNo behaviour change: the dropdown's 100 ms linear scale-and-fade, its measured\ntransform origin, its focus restore and its ARIA wiring are all identical,\nverified against the rendered styles. Every export in `cdk/overlay` now has a\nconsumer, and the component is 35 lines shorter.\n\n`discreteOverlayTransition()` takes an optional fourth argument, a\n`transition-timing-function`. Omitted, nothing is emitted and the CSS initial\nvalue stands, so existing callers are untouched.\n\nOne real inconsistency fixed along the way: the listbox popups\n(`uni-combobox`, `uni-search-input`, `uni-tag-input`, `uni-time-input`) were\nintroduced to match `uni-dropdown`'s animation but ran on the default `ease`,\nwhile the dropdown uses `linear` \u2014 so a combobox and a multi-select dropdown\nin the same form opened at visibly different rates. They now share the\ndropdown's easing exactly.",
+              commit: "676ec55"
+            }
+          ],
+          dependencyBumps: []
+        },
+        {
+          version: "8.3.1",
+          entries: [
+            {
+              bump: "patch",
+              title: '`uni-combobox` docs: "Allowing new values" \u2014 free text never commits implicitly (closed-set contract: typing filters, a non-matching draft reverts with `(rejected)`). The supported create-new pattern is now documented with a working story: drive `[options]` from the debounced `(query)` with `[filterLocally]="false"` and, when nothing matches exactly, append a sentinel option \u2014 `{ label: `Create "${text}"`, value: \u2026 }`. As a real option it commits through every normal path (arrow + Enter, click, Enter when the filter narrows to it alone); resolve it in `(selected)` by minting the entity and writing the model. Blur intentionally never commits the sentinel \u2014 creation takes an explicit Enter or click. Lighter alternative: listen to `(rejected: { query })` and offer creation outside the control. If most values are user-created, use `uni-tag-input` (open set) instead.',
+              body: "",
+              commit: "66f4051"
+            },
+            {
+              bump: "patch",
+              title: "`uni-dropdown` (and everything riding it \u2014 the date picker popup, menus, multi-select): the open/close scale animation now originates from the corner actually touching the trigger. The origin was mapped statically from the _requested_ placement, but `position-try-fallbacks` lets the browser flip the panel at viewport edges \u2014 so a `bottom-end` date picker repositioned above its field still animated from the top-right corner. The panel is now measured on each toggle (open and close-start) and the transform origin follows the rendered position, via the new cdk helper `transformOriginFor(panelRect, triggerRect)`.",
+              body: "",
+              commit: "dc7aef9"
+            }
+          ],
+          dependencyBumps: []
+        },
         {
           version: "8.3.0",
           entries: [
@@ -14327,6 +14895,59 @@ placeholder="Name or address\u2026"
     {
       package: "@uni-design-system/uni-core",
       releases: [
+        {
+          version: "9.0.0",
+          entries: [
+            {
+              bump: "major",
+              title: "Every deprecated API is removed. The library now carries no `@deprecated`",
+              body: "symbols at all.\n\n**Per-component duration options \u2192 the `motion` scale.** Six components carried\ntheir own duration knob that predated the motion scale and _won over_ it:\n`expand.transitionSpeed`, `callout.transitionMs`, `radio.transitionSpeed`,\n`menuItem.transitionSpeed`, `alert.transitionSpeed` and\n`snackbar.transitionDelay`. All are gone, along with the precedence branch each\none required \u2014 timing now comes from the token, full stop.\n\nRetime the token instead; one edit covers every component pointing at it. To\nretime a single component, define a token of your own and point that\ncomponent's `motion` option at it:\n\n```ts\ncreateTheme({\n  \u2026,\n  motion: { productive: { duration: 110, easing: 'ease' } },\n  components: { menuItem: { options: { motion: 'productive' } } },\n});\n```\n\nA `duration: 0` token is how a theme opts out of motion \u2014 that is what\n`transitionSpeed: 0` used to mean. Both showcase themes are migrated this way\n(Carbon to a 110ms `productive` token, Wellsourced to an `instant` one).\n\n**Options that never did anything.** `card.transitionSpeed` and\n`inputBox.transitionSpeed` were read by nothing and never had been. Delete them\nfrom your theme; nothing replaces them.\n\n**Renames and obsolete APIs**\n- `inputBox.typeFace` \u2192 `typeface` (the casing every other component uses).\n- `uni-tooltip`'s `appendToBody` input \u2014 inert since the tooltip moved to the\n  native top layer, which escapes any overflow context by itself.\n- Box's `elevation` input \u2192 `shadow`, in both the Angular and React packages.\n  It was a second name for the same thing.\n- The Angular `icons` re-export \u2192 import `BaseIcons` from\n  `@uni-design-system/uni-core`. The default set ships with every theme.\n\n**The HSL color legacy is gone from uni-core.** `uniColor`, `randomRangeValue`,\n`CategorySaturation` and `CategoryLightness` are removed, superseded by the\ndeterministic OKLCH engine (`generateThemes` / `generatePalette`) \u2014 same input,\nsame theme, WCAG-checked. `RoleHues` and the `UniColor` type go with them: they\nwere reachable only through `uniColor`, and `RoleHues` had gone stale enough to\nhold saturation values in a table of hues.\n\n**Deferred output renames.** Three outputs were held back because renaming is\nbreaking; this is that release. Each also drops an eslint escape it needed for\nshadowing a native event name or using an `on` prefix.\n\n| Component            | Before            | After            |\n| -------------------- | ----------------- | ---------------- |\n| `uni-debounce-input` | `(change)`        | `(valueChange)`  |\n| `uni-search-input`   | `(change)`        | `(searchChange)` |\n| `uni-search-input`   | `(search)`        | `(searchSubmit)` |\n| `dragAndDrop`        | `(onFileDropped)` | `(fileDropped)`  |\n\n**`uni-dropdown`'s `color` input \u2192 `containerColor`,** completing the rule the\nlayout directives set: every container-pair input in the library is now\n`containerColor`, and plain `color` always means the CSS property.\n\n**`ThemeService.getSpacing('none')` now returns `0`, not the string `'none'`.**\n`'none'` is not a valid length, so it was silently dropped wherever it landed \u2014\n`uni-menu` carried a comment working around exactly that, which is now deleted.",
+              commit: "8250162"
+            },
+            {
+              bump: "major",
+              title: "The spacing scale is open, and `createTheme` finally accepts one.",
+              body: 'The scale was a closed seven-name union on a doubling curve (2/4/8/16/32/64px).\nReal layouts are rarely built exclusively on one \u2014 the gaps between 8 and 16,\nand 16 and 32, are where a lot of real spacing lives \u2014 and there was no way to\nadd a step, because **`ThemeConfig` had no `spacing` field at all**:\n`createTheme` hardcoded the base scale. The Wellsourced showcase theme had to\nbolt its scale on after the fact with a post-hoc spread.\n\nThree changes, which only work together:\n- `NullableSize` gains a `(string & {})` arm, so any name the theme defines is a\n  valid `padding` / `gap` / `marginInline` value while the seven named steps keep\n  their autocomplete. `Size` itself stays closed \u2014 it also types _component_\n  sizes, where an arbitrary name has nothing to resolve against.\n- `Spacing` is spelled out as named-optional-keys plus an index signature\n  (mirroring `Typography`), rather than a `Partial<Record<\u2026>>` that would\n  collapse to a plain string record and lose the named steps.\n- `createTheme({ spacing })` merges over the base scale.\n\n```ts\ncreateTheme({ id, name, colors, spacing: { tight: \'6px\', snug: \'10px\' } });\n```\n\n```html\n<div stack-layout padding="tight" gap="snug">\u2026</div>\n```\n\nBecause the scale is open, a mistyped token can no longer be a compile error. It\nis dropped \u2014 an `undefined` CSS value simply does not render \u2014 and\n`ThemeService` now warns once per unknown token in development, naming the\ntokens the active theme does define. Scaffolded `uni-theme.ts` files carry a\n`spacing` block so the static theme file stays the editable source of truth.\n\n**Behavior change:** `xxl` was in the `Size` union but defined by no base theme,\nso `padding="xxl"` type-checked and rendered nothing. It is now `128px`,\ncompleting the doubling \u2014 any element relying on the silent drop will start\nshowing spacing.',
+              commit: "c0c6056"
+            }
+          ],
+          dependencyBumps: []
+        },
+        {
+          version: "8.4.0",
+          entries: [
+            {
+              bump: "minor",
+              title: "`uni-callout` and `uni-expand` now read their timing from the theme's `motion`",
+              body: "scale, so every animated surface in the library is retimed from one place.\nThey were the last two carrying their own motion options \u2014 in different units,\nunder different names (`transitionMs` in milliseconds, `transitionSpeed` in\nseconds).\n\nA third token joins `popup` and `panel`:\n\n| Token    | Default           | Used by               |\n| -------- | ----------------- | --------------------- |\n| `reveal` | 350ms ease-in-out | expand, expand-toggle |\n\n`reveal` is a _base_ speed, not a final duration: `uni-expand` still scales it\nby content height (\u221A-of-height, clamped) so short regions stay snappy and tall\nones aren't rushed, and its easing now drives the reveal curve, which was\nhardcoded. `uni-expand-toggle` resolves the token the same way, so the chevron\nand the region cannot drift apart. `uni-callout` maps onto `panel`, whose\n250ms matches what it already used.\n\n**Not breaking.** `transitionMs` and `transitionSpeed` are deprecated but\nstill honoured, and deliberately outrank `motion` \u2014 a theme that set either\nkeeps precisely its current timing rather than being retimed underneath it.\nThey are removed next major. Per-instance inputs, like `uni-expand`'s\n`transitionSpeed`, still outrank everything.\n\nNothing moves differently by default: callout renders 0.25s ease and expand\n0.35s ease-in-out exactly as before, verified against the rendered styles.",
+              commit: "1aca747"
+            },
+            {
+              bump: "minor",
+              title: "`uni-alert`, `uni-snackbar`, `uni-radio` and `uni-menu-item` now read their",
+              body: "timing from the theme's `motion` scale, which completes the migration: every\nanimated component in the library is retimed from one place.\n\nTwo tokens join `popup`, `panel` and `reveal`:\n\n| Token          | Default           | Used by          |\n| -------------- | ----------------- | ---------------- |\n| `notification` | 350ms ease-in-out | alert, snackbar  |\n| `control`      | 300ms ease        | radio, menu-item |\n\n**One thing moves differently:** `menu-item`'s hover transition goes from\n0.35s to 0.3s, joining `radio` on the shared `control` token. The two were\nnever deliberately different \u2014 `radio`'s own option documented its 0.3 as\n\"matching menuItem\", which was not true \u2014 so this corrects drift rather than\nchanging a decision. A theme that wants the old timing can set the deprecated\n`transitionSpeed`, or retime `control`. Everything else is byte-identical,\nverified against the rendered styles.\n\n**Deprecated, still honoured, removed next major:**\n`alert.transitionSpeed`, `snackbar.transitionDelay`, `radio.transitionSpeed`\nand `menuItem.transitionSpeed` all still work and still outrank `motion`, so a\ntheme that set them keeps its exact timing. `menu-item`'s escape hatch is\nintact too: with neither the option nor a token set it still renders no\ntransition at all, and a token with `duration: 0` is the way to ask for\ninstant now.\n\n`card.transitionSpeed` and `input-box.transitionSpeed` are also deprecated,\nfor a different reason: **neither was ever read by its component.** Setting\nthem has never had any effect. They are removed next major and nothing needs\nto replace them.\n\n`uni-skeleton` is deliberately left out. Its shimmer is a loop rather than a\ntransition, and folding a repeating animation into a scale built around\nentering and leaving would make the scale mean two different things.",
+              commit: "6f76c1d"
+            },
+            {
+              bump: "minor",
+              title: '`uni-skeleton` picks up the knobs an app theme could not reach. `color`, `highlightColor` and `borderRadius` are now inputs that take a token name and fall back to the theme option, because one screen routinely needs several of each \u2014 text bars and a pill chip do not share a corner (`borderRadius="max"`), and a skeleton on a card wants a different tint than one on the page background.',
+              body: "The shimmer is now a band swept with `transform` rather than an animated `background-position`: it composites instead of repainting every frame, and its geometry is themeable via two new options, `direction` (`'ltr' | 'rtl'`, default `'ltr'` \u2014 the sweep previously ran right-to-left) and `highlightWidth` (band width as a percentage of the block, default `40`). Both ends of the band are the base color, so it dissolves into the block with no alpha and no fringing.\n\nA new `label` input announces a standalone skeleton: set it and the host becomes `role=\"status\"` with visually hidden text instead of `aria-hidden=\"true\"`. Unlabelled skeletons stay `aria-hidden`, so container-level `aria-busy` patterns are unchanged.",
+              commit: "228c17f"
+            },
+            {
+              bump: "minor",
+              title: "Overlay timing is now a theme token. `UniTheme` gains a `motion` scale",
+              body: "alongside `radii`, `shadows` and the rest, and the overlays point at it by\nname instead of carrying their own hardcoded durations.\n\nUntil now a theme could slow a skeleton shimmer but not a dropdown: `expand`,\n`skeleton` and `callout` each exposed their own motion option while\n`uni-dropdown` hardcoded 100ms and the combobox-style listbox popups copied\nthat constant. Retiming the library meant editing components.\n\nTwo tokens ship, because two things genuinely move differently \u2014 a small panel\nattached to a control snaps, a larger free-floating surface settles:\n\n| Token   | Default            | Used by                                                                     |\n| ------- | ------------------ | --------------------------------------------------------------------------- |\n| `popup` | 100ms linear, \xD70.8 | dropdown, menu, multi-select, combobox, search-input, tag-input, time-input |\n| `panel` | 250ms ease         | popover                                                                     |\n\nA token carries `duration` (ms), `easing`, and an optional `scale` for panels\nthat grow into place \u2014 one token rather than separate duration and easing\nscales, because they are one design decision: slowing a panel without\nsoftening its curve reads as sluggish rather than calm.\n\n```ts\ncreateTheme({\n  id: 'Calm',\n  name: 'Calm',\n  colors,\n  motion: { popup: { duration: 240, easing: 'ease-out', scale: 0.95 } },\n});\n```\n\nTokens you don't restate keep their base values, and a component can still\npoint at a token of its own through its `motion` option.\n\nNothing moves differently by default \u2014 every current duration, easing and\nscale is preserved exactly, verified against the rendered styles. Themes that\npredate the scale keep working: `createTheme` fills it in, the validator does\nnot require it, and a theme registered as JSON without it resolves to the base\ntiming rather than failing. `motionSafe` remains the floor, so a theme decides\nhow overlays move for people who want movement, never whether they move at\nall.\n\n`callout`'s existing `transitionMs` option and the `expand`/`skeleton`\ndurations are untouched for now; folding them into this scale is a follow-up.",
+              commit: "3b51ace"
+            }
+          ],
+          dependencyBumps: []
+        },
+        {
+          version: "8.3.1",
+          entries: [],
+          dependencyBumps: []
+        },
         {
           version: "8.3.0",
           entries: [
@@ -14721,6 +15342,35 @@ placeholder="Name or address\u2026"
     {
       package: "@uni-design-system/uni-react",
       releases: [
+        {
+          version: "9.0.0",
+          entries: [
+            {
+              bump: "major",
+              title: "Every deprecated API is removed. The library now carries no `@deprecated`",
+              body: "symbols at all.\n\n**Per-component duration options \u2192 the `motion` scale.** Six components carried\ntheir own duration knob that predated the motion scale and _won over_ it:\n`expand.transitionSpeed`, `callout.transitionMs`, `radio.transitionSpeed`,\n`menuItem.transitionSpeed`, `alert.transitionSpeed` and\n`snackbar.transitionDelay`. All are gone, along with the precedence branch each\none required \u2014 timing now comes from the token, full stop.\n\nRetime the token instead; one edit covers every component pointing at it. To\nretime a single component, define a token of your own and point that\ncomponent's `motion` option at it:\n\n```ts\ncreateTheme({\n  \u2026,\n  motion: { productive: { duration: 110, easing: 'ease' } },\n  components: { menuItem: { options: { motion: 'productive' } } },\n});\n```\n\nA `duration: 0` token is how a theme opts out of motion \u2014 that is what\n`transitionSpeed: 0` used to mean. Both showcase themes are migrated this way\n(Carbon to a 110ms `productive` token, Wellsourced to an `instant` one).\n\n**Options that never did anything.** `card.transitionSpeed` and\n`inputBox.transitionSpeed` were read by nothing and never had been. Delete them\nfrom your theme; nothing replaces them.\n\n**Renames and obsolete APIs**\n- `inputBox.typeFace` \u2192 `typeface` (the casing every other component uses).\n- `uni-tooltip`'s `appendToBody` input \u2014 inert since the tooltip moved to the\n  native top layer, which escapes any overflow context by itself.\n- Box's `elevation` input \u2192 `shadow`, in both the Angular and React packages.\n  It was a second name for the same thing.\n- The Angular `icons` re-export \u2192 import `BaseIcons` from\n  `@uni-design-system/uni-core`. The default set ships with every theme.\n\n**The HSL color legacy is gone from uni-core.** `uniColor`, `randomRangeValue`,\n`CategorySaturation` and `CategoryLightness` are removed, superseded by the\ndeterministic OKLCH engine (`generateThemes` / `generatePalette`) \u2014 same input,\nsame theme, WCAG-checked. `RoleHues` and the `UniColor` type go with them: they\nwere reachable only through `uniColor`, and `RoleHues` had gone stale enough to\nhold saturation values in a table of hues.\n\n**Deferred output renames.** Three outputs were held back because renaming is\nbreaking; this is that release. Each also drops an eslint escape it needed for\nshadowing a native event name or using an `on` prefix.\n\n| Component            | Before            | After            |\n| -------------------- | ----------------- | ---------------- |\n| `uni-debounce-input` | `(change)`        | `(valueChange)`  |\n| `uni-search-input`   | `(change)`        | `(searchChange)` |\n| `uni-search-input`   | `(search)`        | `(searchSubmit)` |\n| `dragAndDrop`        | `(onFileDropped)` | `(fileDropped)`  |\n\n**`uni-dropdown`'s `color` input \u2192 `containerColor`,** completing the rule the\nlayout directives set: every container-pair input in the library is now\n`containerColor`, and plain `color` always means the CSS property.\n\n**`ThemeService.getSpacing('none')` now returns `0`, not the string `'none'`.**\n`'none'` is not a valid length, so it was silently dropped wherever it landed \u2014\n`uni-menu` carried a comment working around exactly that, which is now deleted.",
+              commit: "8250162"
+            }
+          ],
+          dependencyBumps: []
+        },
+        {
+          version: "8.4.0",
+          entries: [
+            {
+              bump: "minor",
+              title: 'React layout primitives, at parity with Angular: `Box`, `Stack`, `Row`, `Center`, `Wrap`, `Grid` and `GridArea`. Angular applies layout as an attribute so the element\'s semantics stay the author\'s (`<main box-layout>`); React\'s equivalent is the polymorphic `as` prop \u2014 `<Box as="main" padding="md">` \u2014 with refs and DOM props forwarded to whatever element it renders.',
+              body: 'Props, defaults and resolution order are ported one-for-one from `UniBoxComponent`, so the same tokens produce the same CSS in both frameworks: token-driven color pairs, padding, radius, border, shadow, gap and z-index; a number is px and a string is a CSS length for every sizing prop; `dashBorder` draws the SVG dashed outline; `ignoreDir` (default on) still flips flex direction under `dir="rtl"`. `Stack` keeps its `minHeight: fit-content` guard and `Row` its `minWidth: fit-content` \u2014 set `minHeight={0}` / `minWidth={0}` to shrink inside a constrained flex parent.\n\nSupporting this: `createThemeStyles`/`useThemeStyles` \u2014 the React port of the Angular `ThemeService` token \u2192 CSS resolvers, method-for-method \u2014 and `@emotion/css` (new peer dependency, matching the Angular package) so pseudo-selectors like `:dir(rtl)` resolve in a real class rather than an inline style. A Box that paints a container color now also provides that token to its descendants, so `Text` inside it picks up the matching on-color.',
+              commit: "82d1341"
+            }
+          ],
+          dependencyBumps: []
+        },
+        {
+          version: "8.3.1",
+          entries: [],
+          dependencyBumps: []
+        },
         {
           version: "8.3.0",
           entries: [],
@@ -14903,6 +15553,18 @@ placeholder="Name or address\u2026"
     {
       package: "@uni-design-system/uni-mcp",
       releases: [
+        {
+          version: "4.7.2",
+          entries: [
+            {
+              bump: "patch",
+              title: "Fix three miscategorized components in the index.",
+              body: 'Categories come from an ordered list of substring regexes, so a name that merely\ncontains an earlier row\'s keyword lands in the wrong bucket \u2014 and a\nmiscategorized component is invisible to `list-components --category`, which is\nhow agents and humans find things.\n- `textarea` \u2192 **forms** (was `primitives`: `/text/` matches inside "textarea"\n  and wins before the forms row is tried)\n- `combobox` \u2192 **forms** (was `layout`: `/box/` matches inside "combobox")\n- `expand-toggle` \u2192 **layout** (was `forms`: `/toggle/` beat `/expand/`)\n\nKnown ids now go through an explicit override map consulted before the keyword\npass, so a fix is a one-line entry rather than a regex that has to be reasoned\nabout globally.\n\nAlso: MDX pages are matched to their source by basename, stripping only\n`.component.ts`. With the layout primitives and `uni-text` becoming directives,\n`.directive.ts` is stripped too, so their docs keep attaching by name instead of\nfalling through to the same-directory fallback.',
+              commit: "c0c6056"
+            }
+          ],
+          dependencyBumps: []
+        },
         {
           version: "4.7.1",
           entries: [
@@ -15339,6 +16001,32 @@ var EXPAND_MIN_DURATION = 0.15;
 var EXPAND_MAX_DURATION = 0.6;
 var MIN_SCALE = EXPAND_MIN_DURATION / EXPAND_DEFAULT_SPEED;
 var MAX_SCALE = EXPAND_MAX_DURATION / EXPAND_DEFAULT_SPEED;
+var clamp$2 = (value, min, max) => Math.min(max, Math.max(min, value));
+var toHex2 = (value) => clamp$2(Math.round(value), 0, 255).toString(16).padStart(2, "0");
+var rgbToHex = ({ red, green, blue }) => `#${toHex2(red)}${toHex2(green)}${toHex2(blue)}`.toUpperCase();
+var hexToRgb = (hex) => {
+  let h = hex.replace("#", "").trim();
+  if (h.length === 3) h = h.split("").map((c) => c + c).join("");
+  const int = parseInt(h, 16);
+  return {
+    red: int >> 16 & 255,
+    green: int >> 8 & 255,
+    blue: int & 255
+  };
+};
+var relativeLuminance = ({ red, green, blue }) => {
+  const channel = (value) => {
+    const v = value / 255;
+    return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);
+  };
+  return 0.2126 * channel(red) + 0.7152 * channel(green) + 0.0722 * channel(blue);
+};
+var contrastRatio = (a, b) => {
+  const la = relativeLuminance(typeof a === "string" ? hexToRgb(a) : a);
+  const lb = relativeLuminance(typeof b === "string" ? hexToRgb(b) : b);
+  const [hi, lo] = la > lb ? [la, lb] : [lb, la];
+  return (hi + 0.05) / (lo + 0.05);
+};
 var cycle = (angle) => {
   if (angle > 360) return angle - 360;
   if (angle < 0) return angle + 360;
@@ -15390,32 +16078,6 @@ var schemeHues = (hue, scheme) => {
     }
   }
 };
-var clamp$2 = (value, min, max) => Math.min(max, Math.max(min, value));
-var toHex2 = (value) => clamp$2(Math.round(value), 0, 255).toString(16).padStart(2, "0");
-var rgbToHex = ({ red, green, blue }) => `#${toHex2(red)}${toHex2(green)}${toHex2(blue)}`.toUpperCase();
-var hexToRgb = (hex) => {
-  let h = hex.replace("#", "").trim();
-  if (h.length === 3) h = h.split("").map((c) => c + c).join("");
-  const int = parseInt(h, 16);
-  return {
-    red: int >> 16 & 255,
-    green: int >> 8 & 255,
-    blue: int & 255
-  };
-};
-var relativeLuminance = ({ red, green, blue }) => {
-  const channel = (value) => {
-    const v = value / 255;
-    return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);
-  };
-  return 0.2126 * channel(red) + 0.7152 * channel(green) + 0.0722 * channel(blue);
-};
-var contrastRatio = (a, b) => {
-  const la = relativeLuminance(typeof a === "string" ? hexToRgb(a) : a);
-  const lb = relativeLuminance(typeof b === "string" ? hexToRgb(b) : b);
-  const [hi, lo] = la > lb ? [la, lb] : [lb, la];
-  return (hi + 0.05) / (lo + 0.05);
-};
 var clamp$1 = (value, min, max) => Math.min(max, Math.max(min, value));
 var srgbToLinear = (channel) => channel <= 0.04045 ? channel / 12.92 : Math.pow((channel + 0.055) / 1.055, 2.4);
 var linearToSrgb = (channel) => channel <= 31308e-7 ? 12.92 * channel : 1.055 * Math.pow(channel, 1 / 2.4) - 0.055;
@@ -16088,13 +16750,37 @@ var BaseSpacing = {
   sm: "8px",
   md: "16px",
   lg: "32px",
-  xl: "64px"
+  xl: "64px",
+  xxl: "128px"
 };
 var BaseThicknesses = {
   thin: 1,
   standard: 2,
   thick: 4
 };
+var BaseMotion = {
+  popup: {
+    duration: 100,
+    easing: "linear",
+    scale: 0.8
+  },
+  panel: {
+    duration: 250,
+    easing: "ease"
+  },
+  reveal: {
+    duration: 350,
+    easing: "ease-in-out"
+  },
+  notification: {
+    duration: 350,
+    easing: "ease-in-out"
+  },
+  control: {
+    duration: 300,
+    easing: "ease"
+  }
+};
 var BaseRadii = {
   none: "none",
   xxs: "4px",
@@ -16132,7 +16818,7 @@ var buildComponents = (c) => ({
   alert: { options: {
     topPosition: 40,
     borderRadius: "sm",
-    transitionSpeed: 0.35,
+    motion: "notification",
     elevation: "md"
   } },
   breadcrumb: { options: {
@@ -16238,7 +16924,7 @@ var buildComponents = (c) => ({
     size: 20,
     ringColor: "outline",
     fillColor: "surface",
-    transitionSpeed: 0.3
+    motion: "control"
   } },
   dialog: { options: {
     borderRadius: "lg",
@@ -16275,7 +16961,8 @@ var buildComponents = (c) => ({
     border: "none",
     borderRadius: "xxs",
     color: "primary-surface",
-    shadow: "menu"
+    shadow: "menu",
+    motion: "popup"
   } },
   menu: { options: {
     minWidth: 184,
@@ -16298,7 +16985,7 @@ var buildComponents = (c) => ({
       textColor: void 0,
       hoverColor: "primary-container",
       activeSymbol: "check",
-      transitionSpeed: 0.35
+      motion: "control"
     },
     variants: { warn: {
       color: c.warn,
@@ -16322,9 +17009,10 @@ var buildComponents = (c) => ({
     headerTypeface: "title-small",
     tooltipPadding: "4px 8px",
     tooltipOpenDelay: 500,
-    tooltipCloseDelay: 150
+    tooltipCloseDelay: 150,
+    motion: "panel"
   } },
-  expand: { options: { transitionSpeed: 0.35 } },
+  expand: { options: { motion: "reveal" } },
   footer: { options: {
     height: 52,
     color: "primary",
@@ -16785,11 +17473,13 @@ var buildComponents = (c) => ({
     borderRadius: "xs",
     animation: "shimmer",
     duration: 1.4,
+    direction: "ltr",
+    highlightWidth: 40,
     gap: "sm"
   } },
   snackbar: { options: {
     bottomPosition: 40,
-    transitionDelay: "0.35s",
+    motion: "notification",
     autoCloseDelay: 35e3
   } },
   symbol: { options: {
@@ -16825,7 +17515,7 @@ var buildComponents = (c) => ({
     spotlightPadding: 6,
     spotlightRadius: "xs",
     ringWidth: 2,
-    transitionMs: 250
+    motion: "panel"
   } },
   tour: { options: {
     progressStyle: "dots",
@@ -16839,7 +17529,7 @@ var deepMerge = (base, override) => {
   for (const [key, value] of Object.entries(override)) out[key] = isRecord$1(value) && isRecord$1(out[key]) ? deepMerge(out[key], value) : value;
   return out;
 };
-var createTheme = ({ id, name, colors, icons = {}, radii = BaseRadii, shadows = BaseShadows, typography, borders, thicknesses, components }) => ({
+var createTheme = ({ id, name, colors, icons = {}, radii = BaseRadii, shadows = BaseShadows, motion, typography, borders, thicknesses, spacing, components }) => ({
   id,
   name,
   colors,
@@ -16847,7 +17537,14 @@ var createTheme = ({ id, name, colors, icons = {}, radii = BaseRadii, shadows =
   borders: deepMerge(buildBorders(colors), borders),
   radii,
   shadows,
-  spacing: BaseSpacing,
+  spacing: {
+    ...BaseSpacing,
+    ...spacing
+  },
+  motion: {
+    ...BaseMotion,
+    ...motion
+  },
   thicknesses: {
     ...BaseThicknesses,
     ...thicknesses
@@ -17026,6 +17723,7 @@ var themeExport = (exportName, displayName, colorsConst, shadowsConst, radii) =>
   `  shadows: ${shadowsConst},`,
   "  icons,",
   ...radii ? ["  radii,"] : [],
+  "  spacing,",
   "});"
 ].join("\n");
 var emitThemeFile = (input) => {
@@ -17072,6 +17770,7 @@ var emitThemeFile = (input) => {
       "  type ComponentThemes,",
       "  type Icons,",
       "  type Shadows,",
+      "  type Spacing,",
       "  type UniTheme,",
       "} from '@uni-design-system/uni-core';",
       "",
@@ -17114,6 +17813,15 @@ ${recordLiteral(shadows, "  ")}
       " */",
       "const icons: Icons = {};",
       "",
+      "/**",
+      " * Spacing steps, merged over the base scale",
+      " * (none: 0, xxs: 2px, xs: 4px, sm: 8px, md: 16px, lg: 32px, xl: 64px, xxl: 128px).",
+      " * Restate a named step to retune the rhythm, and add your own names for the",
+      " * gaps your design actually uses \u2014 every extra key is then a valid `padding`,",
+      " * `gap` or `marginInline` value: `<div stack-layout gap='tight'>`.",
+      " */",
+      "const spacing: Spacing = {};",
+      "",
       ...radii ? [
         `/** Shape language: '${input.shape}'. */`,
         `const radii = {
@@ -18176,4 +18884,4 @@ export {
   buildStoredTheme,
   createUniServer
 };
-//# sourceMappingURL=chunk-YLYBDQAV.js.map
+//# sourceMappingURL=chunk-HXXP4PTK.js.map