@uni-design-system/uni-angular 10.0.0 → 10.2.0

package/fesm2022/uni-design-system-uni-angular.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { signal, inject, DestroyRef, computed, linkedSignal, resource, Injectable, InjectionToken, input, ChangeDetectionStrategy, Component, ElementRef, Directive, model, afterRenderEffect, Renderer2, output, viewChild, ViewChild, viewChildren, effect, untracked, isDevMode, contentChildren, afterNextRender, booleanAttribute } from '@angular/core';
+import { signal, inject, DestroyRef, computed, linkedSignal, resource, Injectable, InjectionToken, input, ChangeDetectionStrategy, Component, ElementRef, Directive, model, afterRenderEffect, Renderer2, output, viewChild, ViewChild, viewChildren, effect, untracked, isDevMode, contentChildren, afterNextRender, forwardRef, booleanAttribute } from '@angular/core';
 import { injectGlobal, css, keyframes } from '@emotion/css';
 import { UniThemes, LightTheme, toTypefaces, parseTheme, formatThemeIssues, hydrateTheme, createThemeFromPalette, Z_INDEX, removeInputPlatformStyling, fadeIn, fadeOut, expandDuration, expandFadeIn, collapseFadeOut, HOVER_OR_KEYBOARD_FOCUS, ShapeRadii, generatePalette, emitThemeFile, emitDtcgTokens } from '@uni-design-system/uni-core';
 import { NgTemplateOutlet, NgClass, CommonModule } from '@angular/common';
@@ -30,9 +30,23 @@ function resolveFocusTarget(element) {
 /**
  * Visually hides content while keeping it available to screen readers.
  * Use for text alternatives (e.g. badge counts, icon-only affordances).
+ *
+ * `fixed`, not `absolute`, and that is load-bearing. An absolutely positioned
+ * box resolves its containing block to the nearest *positioned* ancestor —
+ * which, since the controls emitting these spans are `position: static`, is
+ * whatever positioned box happens to be above them in the consumer's layout,
+ * often several scroll containers up. The span then skips every intervening
+ * `overflow: auto` and lands in that distant ancestor's scrollable overflow,
+ * turning 1x1 of invisible text into real scrollable distance in a box that
+ * never opted into scrolling. A fixed box's containing block is the viewport,
+ * so it joins no ancestor's scrollable overflow at all.
+ *
+ * Caveat: inside a `transform`ed (or `filter`ed/`contain`ed) ancestor a fixed
+ * box re-anchors to that ancestor. Harmless here — the element is 1x1 and
+ * clipped to nothing, so where it lands never matters, only what it overflows.
  */
 const visuallyHidden = {
-    position: 'absolute',
+    position: 'fixed',
     width: 1,
     height: 1,
     padding: 0,
@@ -1017,8 +1031,17 @@ function createPressRepeat(config) {
             if (event) {
                 // Keeps the pointer stream on the button even when the finger slides
                 // off it, so `pointerup` still arrives and the run still ends.
+                //
+                // This also suppresses the browser's default focus handling, which is
+                // why `focus` exists: a spinner button that leaves focus nowhere means
+                // the arrow keys stop working the moment you click `+`, exactly when a
+                // user is most likely to reach for them.
                 event.preventDefault();
                 const target = event.currentTarget;
+                // The button is handed over as a fallback, for controls that have no
+                // text field to focus (a read-only quantity stepper, where the buttons
+                // are themselves the tab stops).
+                config.focus?.(target instanceof HTMLElement ? target : null);
                 // jsdom and older engines lack the method entirely.
                 if (target instanceof Element && typeof target.setPointerCapture === 'function') {
                     try {
@@ -2170,10 +2193,53 @@ class ThemeService {
     componentStyle = (componentName, variant, size) => computed(() => {
         const component = this.component(componentName)();
         const { fixed, variants, sizes } = component;
+        this.warnUnthemedVariant(componentName, variant, component);
         const variantStyle = variants && variants[variant];
         const sizeStyle = sizes && sizes[size];
         return { ...fixed, ...variantStyle, ...sizeStyle };
     });
+    /**
+     * The active variant's roles from a component's `variantOptions` map — the
+     * per-variant data a component *reads* rather than CSS it applies. See
+     * `ComponentTheme.variantOptions`.
+     */
+    variantRoles = (componentName, variant) => computed(() => {
+        const component = this.component(componentName)();
+        this.warnUnthemedVariant(componentName, variant, component);
+        return component.variantOptions?.[variant];
+    });
+    warnedVariants = new Set();
+    /**
+     * Say something when a component is asked for a variant its theme does not
+     * define, once per component/variant pair.
+     *
+     * `Variant` is an open registry, so a name the theme never styled cannot be a
+     * compile error — and the miss is silent by construction, because an absent
+     * style spreads to nothing and an absent role falls back. That is exactly the
+     * ordinary state of a work in progress: a designer registers `destructive`,
+     * uses it, and has not written its theme block yet. Same reasoning as
+     * {@link resolveSpacing}, whose open scale has the same problem.
+     *
+     * A component that themes no variants at all is not missing anything — most
+     * of the library never varies by intent — so silence there is correct.
+     */
+    warnUnthemedVariant(componentName, variant, component) {
+        const { variants, variantOptions } = component;
+        if (!variants && !variantOptions)
+            return;
+        if (variants?.[variant] !== undefined || variantOptions?.[variant] !== undefined)
+            return;
+        const key = `${componentName}/${variant}`;
+        if (!(typeof ngDevMode === 'undefined' || ngDevMode) || this.warnedVariants.has(key))
+            return;
+        this.warnedVariants.add(key);
+        const defined = [
+            ...new Set([...Object.keys(variants ?? {}), ...Object.keys(variantOptions ?? {})]),
+        ];
+        console.warn(`[uni] Unknown variant "${variant}" on "${componentName}": the active theme does not ` +
+            `define it, so the component falls back to its default appearance. Add it to the ` +
+            `theme's \`components.${componentName}\` entry, or use one of: ${defined.join(', ')}.`);
+    }
     /**
      * Resolve a spacing token to its CSS value. `'none'` resolves through the
      * scale like any other token — it is `0`, not the string `'none'`, which is
@@ -2416,12 +2482,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
         }], ctorParameters: () => [] });
 
 const COMPONENT_NAME = new InjectionToken('');
+// `V` defaults to `unknown` alongside `T`: passing the class as a value erases
+// its parameters to `unknown`, so an `object` default made
+// `TestBed.createComponent(BaseComponent)` disagree with `ComponentFixture<BaseComponent>`.
 class BaseComponent {
     componentName = inject(COMPONENT_NAME);
     theme = inject(ThemeService);
     variant = input('primary', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ [])); // TODO: Make Variant support undefined
     size = input('lg', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     componentTheme = computed(() => this.theme.getComponentTheme(this.componentName)(), ...(ngDevMode ? [{ debugName: "componentTheme" }] : /* istanbul ignore next */ []));
+    /**
+     * The active variant's roles from the theme's `variantOptions` map, for
+     * components whose accent lands on several interior elements and so cannot
+     * be expressed as a single applied style. Undefined when the theme does not
+     * define this variant — which also raises a dev warning.
+     */
+    variantRoles = computed(() => this.theme.variantRoles(this.componentName, this.variant())(), ...(ngDevMode ? [{ debugName: "variantRoles" }] : /* istanbul ignore next */ []));
     componentOptions = computed(() => this.theme.getComponentOptions(this.componentName)(), ...(ngDevMode ? [{ debugName: "componentOptions" }] : /* istanbul ignore next */ []));
     style = computed(() => this.theme.componentStyle(this.componentName, this.variant(), this.size())(), ...(ngDevMode ? [{ debugName: "style" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: BaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
@@ -2533,8 +2609,15 @@ class UniCheckboxComponent extends BaseComponent {
     touched = model(false, ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
     invalid = input(false, ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
     dirty = input(false, ...(ngDevMode ? [{ debugName: "dirty" }] : /* istanbul ignore next */ []));
-    /** Synced from required() validators by the Signal Forms [field] directive. */
+    /** Synced from required() validators by the Signal Forms [formField] directive. */
     required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
+    /**
+     * Accent colour token, overriding the variant's themed accent for one
+     * instance. Mirrors `uni-toggle`'s input of the same name — it exists because
+     * `variant` defaults to `'primary'`, so the component cannot tell "set to
+     * primary" from "not set".
+     */
+    checkedColor = input(...(ngDevMode ? [undefined, { debugName: "checkedColor" }] : /* istanbul ignore next */ []));
     /**
      * Id(s) of external element(s) describing this control — typically your
      * app-rendered error message — exposed as aria-describedby.
@@ -2578,8 +2661,8 @@ class UniCheckboxComponent extends BaseComponent {
             display: 'block',
         },
         '& .checkbox svg .checkbox-box': {
-            fill: this.getThemeColor(this.componentOptions().boxColor ?? 'surface'),
-            stroke: this.getThemeColor(this.variant()),
+            fill: this.boxColor(),
+            stroke: this.accent().fill,
             strokeWidth: 2,
             rx: this.componentOptions().borderRadius || 2,
             ry: this.componentOptions().borderRadius || 2,
@@ -2588,7 +2671,7 @@ class UniCheckboxComponent extends BaseComponent {
         // Check/dash draw on the variant-filled box, so they wear its on-color.
         '& .checkbox svg .checkbox-check': {
             fill: 'none',
-            stroke: this.getOnColor(this.variant()),
+            stroke: this.accent().on,
             strokeWidth: 2,
             strokeLinecap: 'round',
             strokeLinejoin: 'round',
@@ -2597,7 +2680,7 @@ class UniCheckboxComponent extends BaseComponent {
             transition: 'all 0.5s ease',
         },
         '& .checkbox svg .checkbox-dash': {
-            stroke: this.getOnColor(this.variant()),
+            stroke: this.accent().on,
             strokeWidth: 2,
             strokeLinecap: 'round',
             opacity: 0,
@@ -2611,16 +2694,16 @@ class UniCheckboxComponent extends BaseComponent {
         height: 0,
         opacity: 0,
         '&:checked + .checkbox': {
-            borderColor: this.getThemeColor(this.variant()),
+            borderColor: this.accent().fill,
         },
         '&:checked + .checkbox svg .checkbox-box': {
-            fill: this.getThemeColor(this.variant()),
+            fill: this.accent().fill,
         },
         '&:checked + .checkbox svg .checkbox-check': {
             strokeDashoffset: 0,
         },
         '&:indeterminate + .checkbox svg .checkbox-box': {
-            fill: this.getThemeColor(this.variant()),
+            fill: this.accent().fill,
         },
         '&:indeterminate + .checkbox svg .checkbox-dash': {
             opacity: 1,
@@ -2633,26 +2716,37 @@ class UniCheckboxComponent extends BaseComponent {
         // 4px to round proportionally (as the original hand-drawn ring did) —
         // without it the corners gap away from the box.
         '&:focus + .checkbox': {
-            ...this.theme.focusRingStyle(this.getThemeColor(this.variant()), this.componentOptions().focusRingGap),
+            ...this.theme.focusRingStyle(this.accent().fill, this.componentOptions().focusRingGap),
             borderRadius: `${(Number(this.componentOptions().borderRadius) || 2) + 2}px`,
         },
     }), ...(ngDevMode ? [{ debugName: "checkboxInput" }] : /* istanbul ignore next */ []));
-    getThemeColor(token) {
-        const colors = this.theme.colors();
-        return colors[token] ? colors[token] : colors['primary'];
-    }
-    /** The content color paired with a variant fill (on-primary, on-warn, …). */
-    getOnColor(variant) {
+    /**
+     * The accent and its paired content colour, from the theme's variant roles.
+     *
+     * Previously the variant *name* was looked up as a colour token, which held
+     * together only because every variant happened to also be a colour. With the
+     * registry open that coincidence ends by design: `variant="destructive"`
+     * would have missed and silently rendered primary. The theme now says which
+     * colour draws the intent, and an unthemed variant warns rather than lying.
+     *
+     * `primary` is the last resort because it is a reserved variant name — the
+     * default every component inherits.
+     */
+    accent = computed(() => {
         const colors = this.theme.colors();
-        return colors[`on-${variant}`] ?? colors['on-primary'];
-    }
+        const roles = this.variantRoles();
+        const accent = this.checkedColor() ?? roles?.accent ?? 'primary';
+        const onAccent = roles?.onAccent ?? `on-${accent}`;
+        return { fill: colors[accent], on: colors[onAccent] };
+    }, ...(ngDevMode ? [{ debugName: "accent" }] : /* istanbul ignore next */ []));
+    boxColor = computed(() => this.theme.colors()[this.componentOptions().boxColor ?? 'surface'], ...(ngDevMode ? [{ debugName: "boxColor" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniCheckboxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniCheckboxComponent, isStandalone: true, selector: "uni-checkbox", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, dirty: { classPropertyName: "dirty", publicName: "dirty", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange", touched: "touchedChange", indeterminate: "indeterminateChange" }, providers: [{ provide: COMPONENT_NAME, useValue: 'checkbox' }], usesInheritance: true, ngImport: i0, template: "<label [class]=\"checkboxLabel()\">\n  <input\n    type=\"checkbox\"\n    [class]=\"checkboxInput()\"\n    [checked]=\"checked()\"\n    [indeterminate]=\"indeterminate()\"\n    (change)=\"handleChange($event)\"\n    [disabled]=\"disabled()\"\n    [attr.aria-invalid]=\"showError() ? true : null\"\n    [attr.aria-required]=\"required() ? true : null\"\n    [attr.aria-describedby]=\"ariaDescribedBy() || null\"\n  />\n  <div class=\"checkbox\">\n    <svg viewBox=\"0 0 20 20\" aria-hidden=\"true\">\n      <rect class=\"checkbox-box\" x=\"1\" y=\"1\" width=\"18\" height=\"18\"></rect>\n      <polyline class=\"checkbox-check\" points=\"4 11 8 15 16 6\"></polyline>\n      <line class=\"checkbox-dash\" x1=\"5\" y1=\"10\" x2=\"15\" y2=\"10\"></line>\n    </svg>\n  </div>\n  @if (label()) {\n    <span uni-text=\"label\">{{ label() }}</span>\n  }\n</label>\n", dependencies: [{ kind: "directive", type: UniTextDirective, selector: "[uni-text]", inputs: ["uni-text", "typeface", "color", "display", "align", "nowrap", "maxWidth", "ellipsis"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniCheckboxComponent, isStandalone: true, selector: "uni-checkbox", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, dirty: { classPropertyName: "dirty", publicName: "dirty", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, checkedColor: { classPropertyName: "checkedColor", publicName: "checkedColor", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange", touched: "touchedChange", indeterminate: "indeterminateChange" }, providers: [{ provide: COMPONENT_NAME, useValue: 'checkbox' }], usesInheritance: true, ngImport: i0, template: "<label [class]=\"checkboxLabel()\">\n  <input\n    type=\"checkbox\"\n    [class]=\"checkboxInput()\"\n    [checked]=\"checked()\"\n    [indeterminate]=\"indeterminate()\"\n    (change)=\"handleChange($event)\"\n    [disabled]=\"disabled()\"\n    [attr.aria-invalid]=\"showError() ? true : null\"\n    [attr.aria-required]=\"required() ? true : null\"\n    [attr.aria-describedby]=\"ariaDescribedBy() || null\"\n  />\n  <div class=\"checkbox\">\n    <svg viewBox=\"0 0 20 20\" aria-hidden=\"true\">\n      <rect class=\"checkbox-box\" x=\"1\" y=\"1\" width=\"18\" height=\"18\"></rect>\n      <polyline class=\"checkbox-check\" points=\"4 11 8 15 16 6\"></polyline>\n      <line class=\"checkbox-dash\" x1=\"5\" y1=\"10\" x2=\"15\" y2=\"10\"></line>\n    </svg>\n  </div>\n  @if (label()) {\n    <span uni-text=\"label\">{{ label() }}</span>\n  }\n</label>\n", dependencies: [{ kind: "directive", type: UniTextDirective, selector: "[uni-text]", inputs: ["uni-text", "typeface", "color", "display", "align", "nowrap", "maxWidth", "ellipsis"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniCheckboxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'uni-checkbox', imports: [UniTextDirective], providers: [{ provide: COMPONENT_NAME, useValue: 'checkbox' }], changeDetection: ChangeDetectionStrategy.OnPush, template: "<label [class]=\"checkboxLabel()\">\n  <input\n    type=\"checkbox\"\n    [class]=\"checkboxInput()\"\n    [checked]=\"checked()\"\n    [indeterminate]=\"indeterminate()\"\n    (change)=\"handleChange($event)\"\n    [disabled]=\"disabled()\"\n    [attr.aria-invalid]=\"showError() ? true : null\"\n    [attr.aria-required]=\"required() ? true : null\"\n    [attr.aria-describedby]=\"ariaDescribedBy() || null\"\n  />\n  <div class=\"checkbox\">\n    <svg viewBox=\"0 0 20 20\" aria-hidden=\"true\">\n      <rect class=\"checkbox-box\" x=\"1\" y=\"1\" width=\"18\" height=\"18\"></rect>\n      <polyline class=\"checkbox-check\" points=\"4 11 8 15 16 6\"></polyline>\n      <line class=\"checkbox-dash\" x1=\"5\" y1=\"10\" x2=\"15\" y2=\"10\"></line>\n    </svg>\n  </div>\n  @if (label()) {\n    <span uni-text=\"label\">{{ label() }}</span>\n  }\n</label>\n" }]
-        }], propDecorators: { checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], dirty: [{ type: i0.Input, args: [{ isSignal: true, alias: "dirty", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], ariaDescribedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedBy", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }, { type: i0.Output, args: ["indeterminateChange"] }] } });
+        }], propDecorators: { checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], dirty: [{ type: i0.Input, args: [{ isSignal: true, alias: "dirty", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], checkedColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "checkedColor", required: false }] }], ariaDescribedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedBy", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }, { type: i0.Output, args: ["indeterminateChange"] }] } });
 
 /**
  * Whether the browser can keep a top-layer popup attached to its field.
@@ -5311,7 +5405,7 @@ class UniInputComponent {
     touched = model(false, ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
     invalid = input(false, ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
     dirty = input(false, ...(ngDevMode ? [{ debugName: "dirty" }] : /* istanbul ignore next */ []));
-    /** Synced from required() validators by the Signal Forms [field] directive. */
+    /** Synced from required() validators by the Signal Forms [formField] directive. */
     required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
     /**
      * Id(s) of external element(s) describing this control — typically your
@@ -5327,7 +5421,7 @@ class UniInputComponent {
      */
     type = input('text', ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
     // --- CONSTRAINTS ---
-    // These are Signal Forms' own optional control inputs, so the `[field]`
+    // These are Signal Forms' own optional control inputs, so the `[formField]`
     // directive syncs them from the field's validators the same way it syncs
     // `required` — and they are reflected onto the native element so the browser
     // can do its part (number steppers, length limits, on-screen keyboards).
@@ -5548,7 +5642,7 @@ class UniMultiSelectDropdownComponent extends BaseComponent {
     touched = model(false, ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
     invalid = input(false, ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
     dirty = input(false, ...(ngDevMode ? [{ debugName: "dirty" }] : /* istanbul ignore next */ []));
-    /** Synced from required() validators by the Signal Forms [field] directive. */
+    /** Synced from required() validators by the Signal Forms [formField] directive. */
     required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
     /**
      * Id(s) of external element(s) describing this control — typically your
@@ -5699,7 +5793,7 @@ class UniMultiSelectDropdownComponent extends BaseComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniMultiSelectDropdownComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniMultiSelectDropdownComponent, isStandalone: true, selector: "uni-multi-select-dropdown", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, dirty: { classPropertyName: "dirty", publicName: "dirty", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, debounceTime: { classPropertyName: "debounceTime", publicName: "debounceTime", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange" }, host: { properties: { "class": "className" } }, providers: [{ provide: COMPONENT_NAME, useValue: 'multiSelectDropdown' }], viewQueries: [{ propertyName: "optionRefs", predicate: ["optionRow"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<button\n  [class]=\"triggerClass\"\n  #trigger\n  [style.cursor]=\"disabled() ? 'default' : 'pointer'\"\n  [attr.aria-required]=\"required() ? true : null\"\n  [attr.aria-invalid]=\"showError() ? true : null\"\n  [attr.aria-describedby]=\"ariaDescribedBy() || null\"\n  (click)=\"!disabled() && touched.set(true)\"\n>\n  @if (label(); as fieldLabel) {\n    <span [class]=\"srOnly\">{{ fieldLabel }},</span>\n  }\n  <span [class]=\"srOnly\">{{ selectionSummary() }}</span>\n  <uni-input-box [error]=\"showError()\" [disabled]=\"disabled()\">\n    <div\n      row-layout\n      alignItems=\"center\"\n      justifyContent=\"space-between\"\n      [fullWidth]=\"true\"\n      [minWidth]=\"0\"\n      paddingLeft=\"sm\"\n    >\n      <span uni-text\n        display=\"block\"\n        [typeface]=\"componentOptions().textRole\"\n        [color]=\"textColor()\"\n        [ellipsis]=\"true\"\n        [style.flex-grow]=\"1\"\n        >{{ selectedLabelsText() }}</span>\n      <uni-symbol name=\"keyboard_arrow_down\" [style.flex-shrink]=\"0\"></uni-symbol>\n    </div>\n  </uni-input-box>\n</button>\n<uni-dropdown\n  #dropdown\n  [trigger]=\"trigger\"\n  ariaHasPopup=\"dialog\"\n  (dropdownShowing)=\"$event && searchInput.focus()\"\n  (dropdownHiding)=\"$event && trigger.focus()\"\n>\n  <!-- eslint-disable-next-line @angular-eslint/template/interactive-supports-focus -->\n  <div (keydown)=\"onPanelKeydown($event)\">\n  <div box-layout gap=\"xs\" padding=\"xs\">\n    <input\n      #searchInput\n      type=\"text\"\n      [class]=\"searchInputClass()\"\n      [value]=\"query()\"\n      (input)=\"handleQueryInput($event)\"\n      placeholder=\"Search...\"\n      aria-label=\"Filter options\"\n      (click)=\"$event.stopPropagation()\"\n      [disabled]=\"disabled()\"\n    />\n  </div>\n\n  <uni-divider [border]=\"componentOptions().dividerBorder\" />\n\n  <div\n    stack-layout\n    gap=\"xs\"\n    padding=\"xs\"\n    role=\"group\"\n    [attr.aria-label]=\"label() ? label() + ' options' : 'Options'\"\n  >\n    @for (option of filteredOptions(); track option.value; let i = $index) {\n      <div #optionRow (focusin)=\"onOptionFocus(i)\">\n        <uni-checkbox\n          [label]=\"option.label\"\n          [checked]=\"isOptionSelected(option)()\"\n          (checkedChange)=\"toggleOption(option, $event)\"\n          variant=\"primary\"\n          [disabled]=\"disabled() || !!option.disabled\"\n        >\n        </uni-checkbox>\n      </div>\n    }\n    @if (filteredOptions().length === 0) {\n      <span uni-text=\"label\" role=\"status\">No options match.</span>\n    }\n  </div>\n\n  <uni-divider [border]=\"componentOptions().dividerBorder\" />\n\n  <div row-layout gap=\"xs\" justifyContent=\"space-around\" padding=\"xs\">\n    <button text-button (click)=\"dropdown.hideDropdown()\" size=\"sm\" variant=\"ghost\">Done</button>\n  </div>\n  </div>\n</uni-dropdown>\n", dependencies: [{ kind: "component", type: UniCheckboxComponent, selector: "uni-checkbox", inputs: ["checked", "disabled", "touched", "invalid", "dirty", "required", "ariaDescribedBy", "label", "indeterminate"], outputs: ["checkedChange", "touchedChange", "indeterminateChange"] }, { kind: "directive", type: UniBoxDirective, selector: "[uni-box-layout], [box-layout]", inputs: ["containerColor", "backgroundColor", "borderRadius", "borderRadiusLeft", "borderRadiusRight", "borderRadiusTop", "borderRadiusBottom", "padding", "paddingHorizontal", "paddingVertical", "paddingLeft", "paddingRight", "paddingTop", "paddingBottom", "border", "borderTop", "borderBottom", "borderLeft", "borderRight", "dashBorder", "alignSelf", "alignItems", "alignContent", "justifyContent", "grow", "flex", "shrink", "basis", "marginInline", "display", "position", "inset", "height", "minHeight", "maxHeight", "width", "minWidth", "maxWidth", "ignoreDir", "gridArea", "gridColumn", "gridRow", "overflow", "shadow", "gap", "fullWidth", "fullHeight", "flexDirection", "textAlign", "wrapItems", "zIndex"] }, { kind: "component", type: UniDropdownComponent, selector: "uni-dropdown", inputs: ["trigger", "placement", "offset", "ariaHasPopup", "paddingVertical", "paddingHorizontal", "border", "borderRadius", "shadow", "containerColor"], outputs: ["dropdownShowing", "dropdownHiding"] }, { kind: "directive", type: UniStackDirective, selector: "[uni-stack-layout], [stack-layout]", inputs: ["display", "flexDirection", "minHeight"] }, { kind: "component", type: UniDividerComponent, selector: "uni-divider", inputs: ["orientation", "border"] }, { kind: "component", type: UniButtonComponent, selector: "button[uni-text-button], button[text-button]", inputs: ["disable", "loading", "fullWidth", "symbolLeft", "symbolRight"] }, { kind: "directive", type: UniTextDirective, selector: "[uni-text]", inputs: ["uni-text", "typeface", "color", "display", "align", "nowrap", "maxWidth", "ellipsis"] }, { kind: "component", type: UniSymbolComponent, selector: "uni-symbol", inputs: ["name", "fill", "weight", "grade", "opticalSize"] }, { kind: "directive", type: UniRowDirective, selector: "[uni-row-layout], [row-layout]", inputs: ["display", "flexDirection", "minWidth"] }, { kind: "component", type: UniInputBoxComponent, selector: "uni-input-box", inputs: ["disabled", "error", "minWidth", "height", "width", "fullWidth", "grow", "managedInset"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniMultiSelectDropdownComponent, isStandalone: true, selector: "uni-multi-select-dropdown", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, dirty: { classPropertyName: "dirty", publicName: "dirty", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, debounceTime: { classPropertyName: "debounceTime", publicName: "debounceTime", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange" }, host: { properties: { "class": "className" } }, providers: [{ provide: COMPONENT_NAME, useValue: 'multiSelectDropdown' }], viewQueries: [{ propertyName: "optionRefs", predicate: ["optionRow"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<button\n  [class]=\"triggerClass\"\n  #trigger\n  [style.cursor]=\"disabled() ? 'default' : 'pointer'\"\n  [attr.aria-required]=\"required() ? true : null\"\n  [attr.aria-invalid]=\"showError() ? true : null\"\n  [attr.aria-describedby]=\"ariaDescribedBy() || null\"\n  (click)=\"!disabled() && touched.set(true)\"\n>\n  @if (label(); as fieldLabel) {\n    <span [class]=\"srOnly\">{{ fieldLabel }},</span>\n  }\n  <span [class]=\"srOnly\">{{ selectionSummary() }}</span>\n  <uni-input-box [error]=\"showError()\" [disabled]=\"disabled()\">\n    <div\n      row-layout\n      alignItems=\"center\"\n      justifyContent=\"space-between\"\n      [fullWidth]=\"true\"\n      [minWidth]=\"0\"\n      paddingLeft=\"sm\"\n    >\n      <span uni-text\n        display=\"block\"\n        [typeface]=\"componentOptions().textRole\"\n        [color]=\"textColor()\"\n        [ellipsis]=\"true\"\n        [style.flex-grow]=\"1\"\n        >{{ selectedLabelsText() }}</span>\n      <uni-symbol name=\"keyboard_arrow_down\" [style.flex-shrink]=\"0\"></uni-symbol>\n    </div>\n  </uni-input-box>\n</button>\n<uni-dropdown\n  #dropdown\n  [trigger]=\"trigger\"\n  ariaHasPopup=\"dialog\"\n  (dropdownShowing)=\"$event && searchInput.focus()\"\n  (dropdownHiding)=\"$event && trigger.focus()\"\n>\n  <!-- eslint-disable-next-line @angular-eslint/template/interactive-supports-focus -->\n  <div (keydown)=\"onPanelKeydown($event)\">\n  <div box-layout gap=\"xs\" padding=\"xs\">\n    <input\n      #searchInput\n      type=\"text\"\n      [class]=\"searchInputClass()\"\n      [value]=\"query()\"\n      (input)=\"handleQueryInput($event)\"\n      placeholder=\"Search...\"\n      aria-label=\"Filter options\"\n      (click)=\"$event.stopPropagation()\"\n      [disabled]=\"disabled()\"\n    />\n  </div>\n\n  <uni-divider [border]=\"componentOptions().dividerBorder\" />\n\n  <div\n    stack-layout\n    gap=\"xs\"\n    padding=\"xs\"\n    role=\"group\"\n    [attr.aria-label]=\"label() ? label() + ' options' : 'Options'\"\n  >\n    @for (option of filteredOptions(); track option.value; let i = $index) {\n      <div #optionRow (focusin)=\"onOptionFocus(i)\">\n        <uni-checkbox\n          [label]=\"option.label\"\n          [checked]=\"isOptionSelected(option)()\"\n          (checkedChange)=\"toggleOption(option, $event)\"\n          variant=\"primary\"\n          [disabled]=\"disabled() || !!option.disabled\"\n        >\n        </uni-checkbox>\n      </div>\n    }\n    @if (filteredOptions().length === 0) {\n      <span uni-text=\"label\" role=\"status\">No options match.</span>\n    }\n  </div>\n\n  <uni-divider [border]=\"componentOptions().dividerBorder\" />\n\n  <div row-layout gap=\"xs\" justifyContent=\"space-around\" padding=\"xs\">\n    <button text-button (click)=\"dropdown.hideDropdown()\" size=\"sm\" variant=\"ghost\">Done</button>\n  </div>\n  </div>\n</uni-dropdown>\n", dependencies: [{ kind: "component", type: UniCheckboxComponent, selector: "uni-checkbox", inputs: ["checked", "disabled", "touched", "invalid", "dirty", "required", "checkedColor", "ariaDescribedBy", "label", "indeterminate"], outputs: ["checkedChange", "touchedChange", "indeterminateChange"] }, { kind: "directive", type: UniBoxDirective, selector: "[uni-box-layout], [box-layout]", inputs: ["containerColor", "backgroundColor", "borderRadius", "borderRadiusLeft", "borderRadiusRight", "borderRadiusTop", "borderRadiusBottom", "padding", "paddingHorizontal", "paddingVertical", "paddingLeft", "paddingRight", "paddingTop", "paddingBottom", "border", "borderTop", "borderBottom", "borderLeft", "borderRight", "dashBorder", "alignSelf", "alignItems", "alignContent", "justifyContent", "grow", "flex", "shrink", "basis", "marginInline", "display", "position", "inset", "height", "minHeight", "maxHeight", "width", "minWidth", "maxWidth", "ignoreDir", "gridArea", "gridColumn", "gridRow", "overflow", "shadow", "gap", "fullWidth", "fullHeight", "flexDirection", "textAlign", "wrapItems", "zIndex"] }, { kind: "component", type: UniDropdownComponent, selector: "uni-dropdown", inputs: ["trigger", "placement", "offset", "ariaHasPopup", "paddingVertical", "paddingHorizontal", "border", "borderRadius", "shadow", "containerColor"], outputs: ["dropdownShowing", "dropdownHiding"] }, { kind: "directive", type: UniStackDirective, selector: "[uni-stack-layout], [stack-layout]", inputs: ["display", "flexDirection", "minHeight"] }, { kind: "component", type: UniDividerComponent, selector: "uni-divider", inputs: ["orientation", "border"] }, { kind: "component", type: UniButtonComponent, selector: "button[uni-text-button], button[text-button]", inputs: ["disable", "loading", "fullWidth", "symbolLeft", "symbolRight"] }, { kind: "directive", type: UniTextDirective, selector: "[uni-text]", inputs: ["uni-text", "typeface", "color", "display", "align", "nowrap", "maxWidth", "ellipsis"] }, { kind: "component", type: UniSymbolComponent, selector: "uni-symbol", inputs: ["name", "fill", "weight", "grade", "opticalSize"] }, { kind: "directive", type: UniRowDirective, selector: "[uni-row-layout], [row-layout]", inputs: ["display", "flexDirection", "minWidth"] }, { kind: "component", type: UniInputBoxComponent, selector: "uni-input-box", inputs: ["disabled", "error", "minWidth", "height", "width", "fullWidth", "grow", "managedInset"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniMultiSelectDropdownComponent, decorators: [{
             type: Component,
@@ -5765,7 +5859,7 @@ class UniMultiSelectComponent {
         width: '100%',
     });
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniMultiSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniMultiSelectComponent, isStandalone: true, selector: "uni-multi-select", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, selections: { classPropertyName: "selections", publicName: "selections", isSignal: true, isRequired: false, transformFunction: null }, flexDirection: { classPropertyName: "flexDirection", publicName: "flexDirection", isSignal: true, isRequired: false, transformFunction: null }, checkboxGap: { classPropertyName: "checkboxGap", publicName: "checkboxGap", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { updates: "updates" }, host: { properties: { "class": "className" } }, ngImport: i0, template: "<div box-layout display=\"flex\" [flexDirection]=\"flexDirection()\" [gap]=\"checkboxGap()\">\n  <!-- track $index: option values may be objects and consumers rebuild the\n       array, so identity tracking recreated every node (NG0956). -->\n  @for (option of options(); track $index) {\n    <div [class]=\"optionWrapper\">\n      <uni-checkbox\n        [label]=\"option.label\"\n        [checked]=\"values().indexOf(option.value) > -1\"\n        (checkedChange)=\"handleCheck($event, option.value)\"\n        variant=\"primary\"\n        [disabled]=\"!!option.disabled\"\n      >\n      </uni-checkbox>\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "component", type: UniCheckboxComponent, selector: "uni-checkbox", inputs: ["checked", "disabled", "touched", "invalid", "dirty", "required", "ariaDescribedBy", "label", "indeterminate"], outputs: ["checkedChange", "touchedChange", "indeterminateChange"] }, { kind: "directive", type: UniBoxDirective, selector: "[uni-box-layout], [box-layout]", inputs: ["containerColor", "backgroundColor", "borderRadius", "borderRadiusLeft", "borderRadiusRight", "borderRadiusTop", "borderRadiusBottom", "padding", "paddingHorizontal", "paddingVertical", "paddingLeft", "paddingRight", "paddingTop", "paddingBottom", "border", "borderTop", "borderBottom", "borderLeft", "borderRight", "dashBorder", "alignSelf", "alignItems", "alignContent", "justifyContent", "grow", "flex", "shrink", "basis", "marginInline", "display", "position", "inset", "height", "minHeight", "maxHeight", "width", "minWidth", "maxWidth", "ignoreDir", "gridArea", "gridColumn", "gridRow", "overflow", "shadow", "gap", "fullWidth", "fullHeight", "flexDirection", "textAlign", "wrapItems", "zIndex"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniMultiSelectComponent, isStandalone: true, selector: "uni-multi-select", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, selections: { classPropertyName: "selections", publicName: "selections", isSignal: true, isRequired: false, transformFunction: null }, flexDirection: { classPropertyName: "flexDirection", publicName: "flexDirection", isSignal: true, isRequired: false, transformFunction: null }, checkboxGap: { classPropertyName: "checkboxGap", publicName: "checkboxGap", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { updates: "updates" }, host: { properties: { "class": "className" } }, ngImport: i0, template: "<div box-layout display=\"flex\" [flexDirection]=\"flexDirection()\" [gap]=\"checkboxGap()\">\n  <!-- track $index: option values may be objects and consumers rebuild the\n       array, so identity tracking recreated every node (NG0956). -->\n  @for (option of options(); track $index) {\n    <div [class]=\"optionWrapper\">\n      <uni-checkbox\n        [label]=\"option.label\"\n        [checked]=\"values().indexOf(option.value) > -1\"\n        (checkedChange)=\"handleCheck($event, option.value)\"\n        variant=\"primary\"\n        [disabled]=\"!!option.disabled\"\n      >\n      </uni-checkbox>\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "component", type: UniCheckboxComponent, selector: "uni-checkbox", inputs: ["checked", "disabled", "touched", "invalid", "dirty", "required", "checkedColor", "ariaDescribedBy", "label", "indeterminate"], outputs: ["checkedChange", "touchedChange", "indeterminateChange"] }, { kind: "directive", type: UniBoxDirective, selector: "[uni-box-layout], [box-layout]", inputs: ["containerColor", "backgroundColor", "borderRadius", "borderRadiusLeft", "borderRadiusRight", "borderRadiusTop", "borderRadiusBottom", "padding", "paddingHorizontal", "paddingVertical", "paddingLeft", "paddingRight", "paddingTop", "paddingBottom", "border", "borderTop", "borderBottom", "borderLeft", "borderRight", "dashBorder", "alignSelf", "alignItems", "alignContent", "justifyContent", "grow", "flex", "shrink", "basis", "marginInline", "display", "position", "inset", "height", "minHeight", "maxHeight", "width", "minWidth", "maxWidth", "ignoreDir", "gridArea", "gridColumn", "gridRow", "overflow", "shadow", "gap", "fullWidth", "fullHeight", "flexDirection", "textAlign", "wrapItems", "zIndex"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniMultiSelectComponent, decorators: [{
             type: Component,
@@ -5779,8 +5873,14 @@ class UniRadioComponent extends BaseComponent {
     touched = model(false, ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
     invalid = input(false, ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
     dirty = input(false, ...(ngDevMode ? [{ debugName: "dirty" }] : /* istanbul ignore next */ []));
-    /** Synced from required() validators by the Signal Forms [field] directive. */
+    /** Synced from required() validators by the Signal Forms [formField] directive. */
     required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
+    /**
+     * Accent colour token, overriding the variant's themed accent for one
+     * instance. Mirrors the input of the same name on `uni-checkbox` and
+     * `uni-toggle`.
+     */
+    checkedColor = input(...(ngDevMode ? [undefined, { debugName: "checkedColor" }] : /* istanbul ignore next */ []));
     /**
      * Id(s) of external element(s) describing this control — typically your
      * app-rendered error message — exposed as aria-describedby.
@@ -5835,18 +5935,18 @@ class UniRadioComponent extends BaseComponent {
                 height: outerCircleSize,
                 borderRadius: '50%',
                 border: `2px solid ${this.disabled()
-                    ? this.getThemeColor('on-disabled')
-                    : this.getThemeColor(this.componentOptions().ringColor ?? 'outline')}`,
+                    ? this.color('on-disabled')
+                    : this.color(this.componentOptions().ringColor ?? 'outline')}`,
                 position: 'relative',
                 transition: ringTransition,
-                backgroundColor: this.getThemeColor(this.componentOptions().fillColor ?? 'surface'),
+                backgroundColor: this.color(this.componentOptions().fillColor ?? 'surface'),
                 flexShrink: 0,
             },
             '& .radio-inner': {
                 width: innerCircleSize,
                 height: innerCircleSize,
                 borderRadius: '50%',
-                backgroundColor: this.getThemeColor(this.variant()),
+                backgroundColor: this.accent(),
                 position: 'absolute',
                 top: innerCircleOffset,
                 left: innerCircleOffset,
@@ -5856,13 +5956,13 @@ class UniRadioComponent extends BaseComponent {
             '&:hover .radio-button': this.disabled()
                 ? {}
                 : {
-                    borderColor: this.getThemeColor(this.variant()),
+                    borderColor: this.accent(),
                 },
             '&.disabled': {
                 cursor: 'not-allowed',
                 opacity: 0.6,
                 '& .radio-button': {
-                    borderColor: this.getThemeColor('on-disabled'),
+                    borderColor: this.color('on-disabled'),
                 },
             },
         });
@@ -5874,31 +5974,44 @@ class UniRadioComponent extends BaseComponent {
         height: 0,
         opacity: 0,
         '&:checked + .radio-button': {
-            borderColor: this.getThemeColor(this.variant()),
+            borderColor: this.accent(),
         },
         '&:checked + .radio-button .radio-inner': {
             transform: 'scale(1)',
         },
         // The shared, themable focus indicator, keyed off the hidden input.
         '&:focus + .radio-button': {
-            ...this.theme.focusRingStyle(this.getThemeColor(this.variant())),
+            ...this.theme.focusRingStyle(this.accent()),
         },
     }), ...(ngDevMode ? [{ debugName: "radioInputClass" }] : /* istanbul ignore next */ []));
     handleRadioChange(optionValue) {
         this.value.set(optionValue);
         this.markAsTouched();
     }
-    getThemeColor(token) {
-        const colors = this.theme.colors();
-        return colors[token] ? colors[token] : colors['primary'];
+    /**
+     * The accent colour, from the theme's variant roles rather than by treating
+     * the variant name as a colour token — see `uni-checkbox` for why that had
+     * to stop. `primary` is the last resort: a reserved variant name.
+     */
+    /**
+     * A chrome colour by token. Unlike the `getThemeColor` this replaces, there
+     * is no silent fallback to primary: these are tokens the theme is required
+     * to define, so a miss should be visible rather than disguised.
+     */
+    color(token) {
+        return this.theme.colors()[token];
     }
+    accent = computed(() => {
+        const accent = this.checkedColor() ?? this.variantRoles()?.accent ?? 'primary';
+        return this.theme.colors()[accent];
+    }, ...(ngDevMode ? [{ debugName: "accent" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniRadioComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniRadioComponent, isStandalone: true, selector: "uni-radio", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, dirty: { classPropertyName: "dirty", publicName: "dirty", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange" }, providers: [{ provide: COMPONENT_NAME, useValue: 'radio' }], usesInheritance: true, ngImport: i0, template: "<div\n  [class]=\"radioGroupClass\"\n  role=\"radiogroup\"\n  [attr.aria-labelledby]=\"label() ? groupLabelId : null\"\n  [attr.aria-invalid]=\"showError() ? true : null\"\n  [attr.aria-required]=\"required() ? true : null\"\n  [attr.aria-describedby]=\"ariaDescribedBy() || null\"\n>\n  @if (label()) {\n    <span uni-text=\"label\" [attr.id]=\"groupLabelId\">{{ label() }}</span>\n  }\n\n  @for (option of options(); track option.value) {\n    <label [class]=\"radioOptionClass()\" [class.disabled]=\"disabled() || option.disabled\">\n      <input\n        type=\"radio\"\n        [class]=\"radioInputClass()\"\n        [value]=\"option.value\"\n        [name]=\"name()\"\n        [checked]=\"value() === option.value\"\n        [disabled]=\"disabled() || option.disabled\"\n        (change)=\"handleRadioChange(option.value)\"\n      />\n      <div class=\"radio-button\">\n        <div class=\"radio-inner\"></div>\n      </div>\n      <span uni-text=\"label\">{{ option.label }}</span>\n    </label>\n  }\n</div>\n", dependencies: [{ kind: "directive", type: UniTextDirective, selector: "[uni-text]", inputs: ["uni-text", "typeface", "color", "display", "align", "nowrap", "maxWidth", "ellipsis"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniRadioComponent, isStandalone: true, selector: "uni-radio", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, dirty: { classPropertyName: "dirty", publicName: "dirty", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, checkedColor: { classPropertyName: "checkedColor", publicName: "checkedColor", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange" }, providers: [{ provide: COMPONENT_NAME, useValue: 'radio' }], usesInheritance: true, ngImport: i0, template: "<div\n  [class]=\"radioGroupClass\"\n  role=\"radiogroup\"\n  [attr.aria-labelledby]=\"label() ? groupLabelId : null\"\n  [attr.aria-invalid]=\"showError() ? true : null\"\n  [attr.aria-required]=\"required() ? true : null\"\n  [attr.aria-describedby]=\"ariaDescribedBy() || null\"\n>\n  @if (label()) {\n    <span uni-text=\"label\" [attr.id]=\"groupLabelId\">{{ label() }}</span>\n  }\n\n  @for (option of options(); track option.value) {\n    <label [class]=\"radioOptionClass()\" [class.disabled]=\"disabled() || option.disabled\">\n      <input\n        type=\"radio\"\n        [class]=\"radioInputClass()\"\n        [value]=\"option.value\"\n        [name]=\"name()\"\n        [checked]=\"value() === option.value\"\n        [disabled]=\"disabled() || option.disabled\"\n        (change)=\"handleRadioChange(option.value)\"\n      />\n      <div class=\"radio-button\">\n        <div class=\"radio-inner\"></div>\n      </div>\n      <span uni-text=\"label\">{{ option.label }}</span>\n    </label>\n  }\n</div>\n", dependencies: [{ kind: "directive", type: UniTextDirective, selector: "[uni-text]", inputs: ["uni-text", "typeface", "color", "display", "align", "nowrap", "maxWidth", "ellipsis"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniRadioComponent, decorators: [{
             type: Component,
             args: [{ selector: 'uni-radio', imports: [UniTextDirective], providers: [{ provide: COMPONENT_NAME, useValue: 'radio' }], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  [class]=\"radioGroupClass\"\n  role=\"radiogroup\"\n  [attr.aria-labelledby]=\"label() ? groupLabelId : null\"\n  [attr.aria-invalid]=\"showError() ? true : null\"\n  [attr.aria-required]=\"required() ? true : null\"\n  [attr.aria-describedby]=\"ariaDescribedBy() || null\"\n>\n  @if (label()) {\n    <span uni-text=\"label\" [attr.id]=\"groupLabelId\">{{ label() }}</span>\n  }\n\n  @for (option of options(); track option.value) {\n    <label [class]=\"radioOptionClass()\" [class.disabled]=\"disabled() || option.disabled\">\n      <input\n        type=\"radio\"\n        [class]=\"radioInputClass()\"\n        [value]=\"option.value\"\n        [name]=\"name()\"\n        [checked]=\"value() === option.value\"\n        [disabled]=\"disabled() || option.disabled\"\n        (change)=\"handleRadioChange(option.value)\"\n      />\n      <div class=\"radio-button\">\n        <div class=\"radio-inner\"></div>\n      </div>\n      <span uni-text=\"label\">{{ option.label }}</span>\n    </label>\n  }\n</div>\n" }]
-        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], dirty: [{ type: i0.Input, args: [{ isSignal: true, alias: "dirty", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], ariaDescribedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedBy", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }] } });
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], dirty: [{ type: i0.Input, args: [{ isSignal: true, alias: "dirty", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], checkedColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "checkedColor", required: false }] }], ariaDescribedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedBy", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }] } });
 
 /**
  * Text input that emits `change` only after the user pauses typing. Wears the
@@ -6090,7 +6203,7 @@ class UniSelectComponent {
     touched = model(false, ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
     invalid = input(false, ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
     dirty = input(false, ...(ngDevMode ? [{ debugName: "dirty" }] : /* istanbul ignore next */ []));
-    /** Synced from required() validators by the Signal Forms [field] directive. */
+    /** Synced from required() validators by the Signal Forms [formField] directive. */
     required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
     /**
      * Id(s) of external element(s) describing this control — typically your
@@ -6537,6 +6650,9 @@ class UniNumberInputComponent extends BaseComponent {
         onRelease: () => this.announceValue(),
         disabled: () => this.disabled() || this.readOnly() || this.atMax(),
         repeat: () => this.repeat(),
+        // A native spinner leaves focus in its field; without this the arrow keys
+        // go dead the moment you click a stepper.
+        focus: () => this.inputRef().nativeElement.focus(),
         timing: this.repeatTiming,
     });
     decrement = createPressRepeat({
@@ -6544,6 +6660,9 @@ class UniNumberInputComponent extends BaseComponent {
         onRelease: () => this.announceValue(),
         disabled: () => this.disabled() || this.readOnly() || this.atMin(),
         repeat: () => this.repeat(),
+        // A native spinner leaves focus in its field; without this the arrow keys
+        // go dead the moment you click a stepper.
+        focus: () => this.inputRef().nativeElement.focus(),
         timing: this.repeatTiming,
     });
     // --- Input events ---------------------------------------------------------
@@ -7947,11 +8066,13 @@ class UniQuantityStepperComponent extends BaseComponent {
     increment = createPressRepeat({
         onStep: () => this.applyStep(1, false),
         onRelease: () => this.announceValue(),
+        focus: (button) => this.focusField(button),
         disabled: () => this.disabled() || this.atMax(),
     });
     decrement = createPressRepeat({
         onStep: () => this.applyStep(-1, false),
         onRelease: () => this.announceValue(),
+        focus: (button) => this.focusField(button),
         disabled: () => this.disabled() || this.atMin(),
     });
     // --- Keyboard -------------------------------------------------------------
@@ -7985,8 +8106,17 @@ class UniQuantityStepperComponent extends BaseComponent {
         this.increment.cancel();
         this.decrement.cancel();
     }
-    focusField() {
-        this.inputRef()?.nativeElement.focus();
+    /**
+     * Focus the field a stepper press should land in. With `editable=false` there
+     * is no field and the buttons are the tab stops, so the pressed button takes
+     * it instead.
+     */
+    focusField(fallback) {
+        const input = this.inputRef()?.nativeElement;
+        if (input)
+            input.focus();
+        else
+            fallback?.focus();
     }
     // --- Styling --------------------------------------------------------------
     className = computed(() => css({ display: 'inline-block' }), ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
@@ -8000,7 +8130,6 @@ class UniQuantityStepperComponent extends BaseComponent {
      */
     fieldChrome = this.theme.getComponentOptions('input');
     rootClass = computed(() => {
-        const options = this.componentOptions();
         const colors = this.theme.colors();
         const chrome = this.fieldChrome();
         return css({
@@ -8011,9 +8140,9 @@ class UniQuantityStepperComponent extends BaseComponent {
             // field beside it rather than 32 plus its border.
             boxSizing: 'border-box',
             overflow: 'hidden',
-            ...this.theme.backgroundColor(this.disabled() ? 'disabled-surface' : (options.color ?? 'primary-surface')),
-            ...this.theme.border(options.border ?? 'light'),
-            ...this.theme.radius(options.borderRadius ?? 'xs'),
+            ...this.theme.backgroundColor(this.disabled() ? chrome.disabledColor : this.containerColor()),
+            ...this.theme.border(this.containerBorder()),
+            ...this.theme.radius(this.containerRadius()),
             ...(this.showError() ? { borderColor: colors['warn'] } : {}),
             ...(this.disabled() ? { cursor: 'not-allowed' } : {}),
             // The middle input clears its own outline (removeInputPlatformStyling),
@@ -8061,8 +8190,30 @@ class UniQuantityStepperComponent extends BaseComponent {
             ...this.theme.focusRing(),
         });
     }, ...(ngDevMode ? [{ debugName: "buttonClass" }] : /* istanbul ignore next */ []));
+    /**
+     * Container chrome, defaulting to the shared `input` entry rather than to
+     * hardcoded tokens. It is not a field, but it sits beside them in carts and
+     * table rows, so a theme that restyles `input` must carry it along — the
+     * options below stay as per-component overrides for a deliberately different
+     * look.
+     */
+    containerColor = computed(() => this.componentOptions().color ?? this.fieldChrome().color, ...(ngDevMode ? [{ debugName: "containerColor" }] : /* istanbul ignore next */ []));
+    containerBorder = computed(() => this.componentOptions().border ?? this.fieldChrome().border, ...(ngDevMode ? [{ debugName: "containerBorder" }] : /* istanbul ignore next */ []));
+    containerRadius = computed(() => this.componentOptions().borderRadius ?? this.fieldChrome().borderRadius, ...(ngDevMode ? [{ debugName: "containerRadius" }] : /* istanbul ignore next */ []));
     /** The rules either side of the value, matching the frame around it. */
-    dividerBorder = computed(() => this.componentOptions().border ?? 'light', ...(ngDevMode ? [{ debugName: "dividerBorder" }] : /* istanbul ignore next */ []));
+    dividerBorder = computed(() => this.containerBorder(), ...(ngDevMode ? [{ debugName: "dividerBorder" }] : /* istanbul ignore next */ []));
+    /**
+     * Characters the value cell asks the browser to size itself for.
+     *
+     * Load-bearing: a bare `<input>` defaults to `size="20"`, and `flex-basis:
+     * auto` resolves to that intrinsic width — so the control claimed ~230px
+     * instead of the ~100px its buttons and `valueWidth` need, and stole track
+     * width from anything beside it in a grid (`1fr` is `minmax(auto, 1fr)`, and
+     * the `auto` floor includes this). Tracking the content keeps the cell honest
+     * while still letting it grow with the digits, which a fixed `width` would
+     * not. `valueWidth` remains the floor, via `min-width`.
+     */
+    valueSize = computed(() => Math.max(this.displayText().length, 1), ...(ngDevMode ? [{ debugName: "valueSize" }] : /* istanbul ignore next */ []));
     valueBase() {
         const options = this.componentOptions();
         const colors = this.theme.colors();
@@ -8095,11 +8246,11 @@ class UniQuantityStepperComponent extends BaseComponent {
     readoutClass = computed(() => css([this.valueBase(), { display: 'grid', placeItems: 'center' }]), ...(ngDevMode ? [{ debugName: "readoutClass" }] : /* istanbul ignore next */ []));
     glyphSize = computed(() => Math.max(12, Math.round(this.height() / 2)), ...(ngDevMode ? [{ debugName: "glyphSize" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniQuantityStepperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniQuantityStepperComponent, isStandalone: true, selector: "uni-quantity-stepper, QuantityStepper", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, dirty: { classPropertyName: "dirty", publicName: "dirty", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: false, transformFunction: null }, deleteAtMin: { classPropertyName: "deleteAtMin", publicName: "deleteAtMin", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange", removed: "removed" }, host: { properties: { "class": "className()" } }, providers: [{ provide: COMPONENT_NAME, useValue: 'quantityStepper' }], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["field"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<!-- With an editable middle the input is the tab stop and the buttons are\n     pointer affordances (tabindex=\"-1\"), exactly as in uni-number-input. With a\n     read-only middle there is nothing else to focus, so the buttons become the\n     tab stops and the group carries the name. -->\n<div\n  [class]=\"rootClass()\"\n  [attr.role]=\"editable() ? null : 'group'\"\n  [attr.aria-label]=\"editable() ? null : label()\"\n>\n  <button\n    type=\"button\"\n    [class]=\"buttonClass()\"\n    [attr.tabindex]=\"editable() ? -1 : null\"\n    [disabled]=\"disabled() || (atMin() && !showDelete())\"\n    [attr.aria-label]=\"decrementLabel()\"\n    (pointerdown)=\"onDecrementPress($event)\"\n    (pointerup)=\"decrement.release()\"\n    (pointercancel)=\"decrement.cancel()\"\n    (lostpointercapture)=\"decrement.release()\"\n    (click)=\"onDecrementClick()\"\n  >\n    <uni-icon [name]=\"decrementIcon()\" [size]=\"glyphSize()\" />\n  </button>\n\n  @if (editable()) {\n    <input\n      #field\n      type=\"text\"\n      role=\"spinbutton\"\n      inputmode=\"numeric\"\n      autocomplete=\"off\"\n      [class]=\"inputClass()\"\n      [value]=\"displayText()\"\n      [disabled]=\"disabled()\"\n      [attr.aria-label]=\"label()\"\n      [attr.aria-valuenow]=\"value() ?? null\"\n      [attr.aria-valuemin]=\"resolvedMin()\"\n      [attr.aria-valuemax]=\"max() ?? null\"\n      [attr.aria-valuetext]=\"displayText() || 'Empty'\"\n      [attr.aria-describedby]=\"describedBy()\"\n      [attr.aria-invalid]=\"showError() ? true : null\"\n      [attr.aria-required]=\"required() ? true : null\"\n      (input)=\"onInput($any($event.target).value)\"\n      (keydown)=\"onKeydown($event)\"\n      (blur)=\"onBlur()\"\n    />\n  } @else {\n    <!-- Text, not a control: no role and no tab stop, so a reader reads it as\n         the group's content. -->\n    <span [class]=\"readoutClass()\">{{ displayText() }}</span>\n  }\n\n  <button\n    type=\"button\"\n    [class]=\"buttonClass()\"\n    [attr.tabindex]=\"editable() ? -1 : null\"\n    [disabled]=\"disabled() || atMax()\"\n    [attr.aria-label]=\"'Increase ' + label()\"\n    (pointerdown)=\"increment.press($event)\"\n    (pointerup)=\"increment.release()\"\n    (pointercancel)=\"increment.cancel()\"\n    (lostpointercapture)=\"increment.release()\"\n  >\n    <uni-icon [name]=\"componentOptions().incrementIcon ?? 'plus'\" [size]=\"glyphSize()\" />\n  </button>\n</div>\n\n@if (editable()) {\n  <span [id]=\"hintId\" [class]=\"srOnly\">\n    Use the up and down arrow keys to change the quantity.\n  </span>\n}\n\n<!-- Fences, clamps and removals are otherwise silent. Held stepping announces\n     once, on release. -->\n<span role=\"status\" aria-live=\"polite\" [class]=\"srOnly\">{{ announcer.message() }}</span>\n", dependencies: [{ kind: "component", type: UniIconComponent, selector: "uni-icon", inputs: ["color", "name", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniQuantityStepperComponent, isStandalone: true, selector: "uni-quantity-stepper, QuantityStepper", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, dirty: { classPropertyName: "dirty", publicName: "dirty", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: false, transformFunction: null }, deleteAtMin: { classPropertyName: "deleteAtMin", publicName: "deleteAtMin", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange", removed: "removed" }, host: { properties: { "class": "className()" } }, providers: [{ provide: COMPONENT_NAME, useValue: 'quantityStepper' }], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["field"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<!-- With an editable middle the input is the tab stop and the buttons are\n     pointer affordances (tabindex=\"-1\"), exactly as in uni-number-input. With a\n     read-only middle there is nothing else to focus, so the buttons become the\n     tab stops and the group carries the name. -->\n<div\n  [class]=\"rootClass()\"\n  [attr.role]=\"editable() ? null : 'group'\"\n  [attr.aria-label]=\"editable() ? null : label()\"\n>\n  <button\n    type=\"button\"\n    [class]=\"buttonClass()\"\n    [attr.tabindex]=\"editable() ? -1 : null\"\n    [disabled]=\"disabled() || (atMin() && !showDelete())\"\n    [attr.aria-label]=\"decrementLabel()\"\n    (pointerdown)=\"onDecrementPress($event)\"\n    (pointerup)=\"decrement.release()\"\n    (pointercancel)=\"decrement.cancel()\"\n    (lostpointercapture)=\"decrement.release()\"\n    (click)=\"onDecrementClick()\"\n  >\n    <uni-icon [name]=\"decrementIcon()\" [size]=\"glyphSize()\" />\n  </button>\n\n  @if (editable()) {\n    <input\n      #field\n      type=\"text\"\n      role=\"spinbutton\"\n      inputmode=\"numeric\"\n      autocomplete=\"off\"\n      [class]=\"inputClass()\"\n      [attr.size]=\"valueSize()\"\n      [value]=\"displayText()\"\n      [disabled]=\"disabled()\"\n      [attr.aria-label]=\"label()\"\n      [attr.aria-valuenow]=\"value() ?? null\"\n      [attr.aria-valuemin]=\"resolvedMin()\"\n      [attr.aria-valuemax]=\"max() ?? null\"\n      [attr.aria-valuetext]=\"displayText() || 'Empty'\"\n      [attr.aria-describedby]=\"describedBy()\"\n      [attr.aria-invalid]=\"showError() ? true : null\"\n      [attr.aria-required]=\"required() ? true : null\"\n      (input)=\"onInput($any($event.target).value)\"\n      (keydown)=\"onKeydown($event)\"\n      (blur)=\"onBlur()\"\n    />\n  } @else {\n    <!-- Text, not a control: no role and no tab stop, so a reader reads it as\n         the group's content. -->\n    <span [class]=\"readoutClass()\">{{ displayText() }}</span>\n  }\n\n  <button\n    type=\"button\"\n    [class]=\"buttonClass()\"\n    [attr.tabindex]=\"editable() ? -1 : null\"\n    [disabled]=\"disabled() || atMax()\"\n    [attr.aria-label]=\"'Increase ' + label()\"\n    (pointerdown)=\"increment.press($event)\"\n    (pointerup)=\"increment.release()\"\n    (pointercancel)=\"increment.cancel()\"\n    (lostpointercapture)=\"increment.release()\"\n  >\n    <uni-icon [name]=\"componentOptions().incrementIcon ?? 'plus'\" [size]=\"glyphSize()\" />\n  </button>\n</div>\n\n@if (editable()) {\n  <span [id]=\"hintId\" [class]=\"srOnly\">\n    Use the up and down arrow keys to change the quantity.\n  </span>\n}\n\n<!-- Fences, clamps and removals are otherwise silent. Held stepping announces\n     once, on release. -->\n<span role=\"status\" aria-live=\"polite\" [class]=\"srOnly\">{{ announcer.message() }}</span>\n", dependencies: [{ kind: "component", type: UniIconComponent, selector: "uni-icon", inputs: ["color", "name", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniQuantityStepperComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'uni-quantity-stepper, QuantityStepper', imports: [UniIconComponent], providers: [{ provide: COMPONENT_NAME, useValue: 'quantityStepper' }], host: { '[class]': 'className()' }, template: "<!-- With an editable middle the input is the tab stop and the buttons are\n     pointer affordances (tabindex=\"-1\"), exactly as in uni-number-input. With a\n     read-only middle there is nothing else to focus, so the buttons become the\n     tab stops and the group carries the name. -->\n<div\n  [class]=\"rootClass()\"\n  [attr.role]=\"editable() ? null : 'group'\"\n  [attr.aria-label]=\"editable() ? null : label()\"\n>\n  <button\n    type=\"button\"\n    [class]=\"buttonClass()\"\n    [attr.tabindex]=\"editable() ? -1 : null\"\n    [disabled]=\"disabled() || (atMin() && !showDelete())\"\n    [attr.aria-label]=\"decrementLabel()\"\n    (pointerdown)=\"onDecrementPress($event)\"\n    (pointerup)=\"decrement.release()\"\n    (pointercancel)=\"decrement.cancel()\"\n    (lostpointercapture)=\"decrement.release()\"\n    (click)=\"onDecrementClick()\"\n  >\n    <uni-icon [name]=\"decrementIcon()\" [size]=\"glyphSize()\" />\n  </button>\n\n  @if (editable()) {\n    <input\n      #field\n      type=\"text\"\n      role=\"spinbutton\"\n      inputmode=\"numeric\"\n      autocomplete=\"off\"\n      [class]=\"inputClass()\"\n      [value]=\"displayText()\"\n      [disabled]=\"disabled()\"\n      [attr.aria-label]=\"label()\"\n      [attr.aria-valuenow]=\"value() ?? null\"\n      [attr.aria-valuemin]=\"resolvedMin()\"\n      [attr.aria-valuemax]=\"max() ?? null\"\n      [attr.aria-valuetext]=\"displayText() || 'Empty'\"\n      [attr.aria-describedby]=\"describedBy()\"\n      [attr.aria-invalid]=\"showError() ? true : null\"\n      [attr.aria-required]=\"required() ? true : null\"\n      (input)=\"onInput($any($event.target).value)\"\n      (keydown)=\"onKeydown($event)\"\n      (blur)=\"onBlur()\"\n    />\n  } @else {\n    <!-- Text, not a control: no role and no tab stop, so a reader reads it as\n         the group's content. -->\n    <span [class]=\"readoutClass()\">{{ displayText() }}</span>\n  }\n\n  <button\n    type=\"button\"\n    [class]=\"buttonClass()\"\n    [attr.tabindex]=\"editable() ? -1 : null\"\n    [disabled]=\"disabled() || atMax()\"\n    [attr.aria-label]=\"'Increase ' + label()\"\n    (pointerdown)=\"increment.press($event)\"\n    (pointerup)=\"increment.release()\"\n    (pointercancel)=\"increment.cancel()\"\n    (lostpointercapture)=\"increment.release()\"\n  >\n    <uni-icon [name]=\"componentOptions().incrementIcon ?? 'plus'\" [size]=\"glyphSize()\" />\n  </button>\n</div>\n\n@if (editable()) {\n  <span [id]=\"hintId\" [class]=\"srOnly\">\n    Use the up and down arrow keys to change the quantity.\n  </span>\n}\n\n<!-- Fences, clamps and removals are otherwise silent. Held stepping announces\n     once, on release. -->\n<span role=\"status\" aria-live=\"polite\" [class]=\"srOnly\">{{ announcer.message() }}</span>\n" }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'uni-quantity-stepper, QuantityStepper', imports: [UniIconComponent], providers: [{ provide: COMPONENT_NAME, useValue: 'quantityStepper' }], host: { '[class]': 'className()' }, template: "<!-- With an editable middle the input is the tab stop and the buttons are\n     pointer affordances (tabindex=\"-1\"), exactly as in uni-number-input. With a\n     read-only middle there is nothing else to focus, so the buttons become the\n     tab stops and the group carries the name. -->\n<div\n  [class]=\"rootClass()\"\n  [attr.role]=\"editable() ? null : 'group'\"\n  [attr.aria-label]=\"editable() ? null : label()\"\n>\n  <button\n    type=\"button\"\n    [class]=\"buttonClass()\"\n    [attr.tabindex]=\"editable() ? -1 : null\"\n    [disabled]=\"disabled() || (atMin() && !showDelete())\"\n    [attr.aria-label]=\"decrementLabel()\"\n    (pointerdown)=\"onDecrementPress($event)\"\n    (pointerup)=\"decrement.release()\"\n    (pointercancel)=\"decrement.cancel()\"\n    (lostpointercapture)=\"decrement.release()\"\n    (click)=\"onDecrementClick()\"\n  >\n    <uni-icon [name]=\"decrementIcon()\" [size]=\"glyphSize()\" />\n  </button>\n\n  @if (editable()) {\n    <input\n      #field\n      type=\"text\"\n      role=\"spinbutton\"\n      inputmode=\"numeric\"\n      autocomplete=\"off\"\n      [class]=\"inputClass()\"\n      [attr.size]=\"valueSize()\"\n      [value]=\"displayText()\"\n      [disabled]=\"disabled()\"\n      [attr.aria-label]=\"label()\"\n      [attr.aria-valuenow]=\"value() ?? null\"\n      [attr.aria-valuemin]=\"resolvedMin()\"\n      [attr.aria-valuemax]=\"max() ?? null\"\n      [attr.aria-valuetext]=\"displayText() || 'Empty'\"\n      [attr.aria-describedby]=\"describedBy()\"\n      [attr.aria-invalid]=\"showError() ? true : null\"\n      [attr.aria-required]=\"required() ? true : null\"\n      (input)=\"onInput($any($event.target).value)\"\n      (keydown)=\"onKeydown($event)\"\n      (blur)=\"onBlur()\"\n    />\n  } @else {\n    <!-- Text, not a control: no role and no tab stop, so a reader reads it as\n         the group's content. -->\n    <span [class]=\"readoutClass()\">{{ displayText() }}</span>\n  }\n\n  <button\n    type=\"button\"\n    [class]=\"buttonClass()\"\n    [attr.tabindex]=\"editable() ? -1 : null\"\n    [disabled]=\"disabled() || atMax()\"\n    [attr.aria-label]=\"'Increase ' + label()\"\n    (pointerdown)=\"increment.press($event)\"\n    (pointerup)=\"increment.release()\"\n    (pointercancel)=\"increment.cancel()\"\n    (lostpointercapture)=\"increment.release()\"\n  >\n    <uni-icon [name]=\"componentOptions().incrementIcon ?? 'plus'\" [size]=\"glyphSize()\" />\n  </button>\n</div>\n\n@if (editable()) {\n  <span [id]=\"hintId\" [class]=\"srOnly\">\n    Use the up and down arrow keys to change the quantity.\n  </span>\n}\n\n<!-- Fences, clamps and removals are otherwise silent. Held stepping announces\n     once, on release. -->\n<span role=\"status\" aria-live=\"polite\" [class]=\"srOnly\">{{ announcer.message() }}</span>\n" }]
         }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], dirty: [{ type: i0.Input, args: [{ isSignal: true, alias: "dirty", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], ariaDescribedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedBy", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], editable: [{ type: i0.Input, args: [{ isSignal: true, alias: "editable", required: false }] }], deleteAtMin: [{ type: i0.Input, args: [{ isSignal: true, alias: "deleteAtMin", required: false }] }], removed: [{ type: i0.Output, args: ["removed"] }], inputRef: [{ type: i0.ViewChild, args: ['field', { isSignal: true }] }] } });
 
 /**
@@ -8667,7 +8818,7 @@ class UniTextareaComponent {
     touched = model(false, ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
     invalid = input(false, ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
     dirty = input(false, ...(ngDevMode ? [{ debugName: "dirty" }] : /* istanbul ignore next */ []));
-    /** Synced from required() validators by the Signal Forms [field] directive. */
+    /** Synced from required() validators by the Signal Forms [formField] directive. */
     required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
     /**
      * Id(s) of external element(s) describing this control — typically your
@@ -8679,7 +8830,7 @@ class UniTextareaComponent {
     placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
     /** Visible text rows. Defaults to the theme's `textarea` options. */
     rows = input(undefined, ...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
-    // Signal Forms' own optional control inputs: the `[field]` directive syncs
+    // Signal Forms' own optional control inputs: the `[formField]` directive syncs
     // them from the field's validators, as it does `required`.
     readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
     name = input('', ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
@@ -8714,6 +8865,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'uni-textarea', imports: [UniInputBoxComponent], template: "<uni-input-box [error]=\"showError()\" height=\"auto\" [width]=\"width()\" [fullWidth]=\"fullWidth()\" [grow]=\"grow()\">\n  <textarea\n    [value]=\"value()\"\n    (input)=\"handleInput($event)\"\n    [placeholder]=\"placeholder()\"\n    [disabled]=\"disabled()\"\n    [readOnly]=\"readonly()\"\n    (blur)=\"markAsTouched()\"\n    [rows]=\"resolvedRows()\"\n    [class]=\"textareaClass()\"\n    [attr.name]=\"name() || null\"\n    [attr.autocomplete]=\"autocomplete() || null\"\n    [attr.minlength]=\"minLength() ?? null\"\n    [attr.maxlength]=\"maxLength() ?? null\"\n    [attr.spellcheck]=\"spellcheck() ?? null\"\n    [attr.aria-label]=\"label()\"\n    [attr.aria-invalid]=\"showError() ? true : null\"\n    [attr.aria-required]=\"required() ? true : null\"\n    [attr.aria-describedby]=\"ariaDescribedBy() || null\"\n  ></textarea>\n</uni-input-box>\n" }]
         }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], dirty: [{ type: i0.Input, args: [{ isSignal: true, alias: "dirty", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], ariaDescribedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedBy", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], minLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "minLength", required: false }] }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], spellcheck: [{ type: i0.Input, args: [{ isSignal: true, alias: "spellcheck", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], grow: [{ type: i0.Input, args: [{ isSignal: true, alias: "grow", required: false }] }] } });
 
+/**
+ * Everything a switch needs, from the three numbers a theme actually states.
+ *
+ * `travel` is why this is derived rather than written down: the knob starts at
+ * `inset` and must end the same distance from the far edge, so it moves
+ * `width - inset - knob - inset`, which reduces to `width - height`. The old
+ * code hardcoded a translate of one track height, which was correct only while
+ * the width was locked at 2x and the knob at 0.8x.
+ */
+function geometry(width, height, inset) {
+    return { width, height, inset, knob: height - inset * 2, travel: width - height, radius: height / 2 };
+}
 class UniToggleComponent extends BaseComponent {
     // --- REQUIRED SIGNALS (populated by FormCheckboxControl) ---
     checked = model(false, ...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
@@ -8721,7 +8884,7 @@ class UniToggleComponent extends BaseComponent {
     touched = model(false, ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
     invalid = input(false, ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
     dirty = input(false, ...(ngDevMode ? [{ debugName: "dirty" }] : /* istanbul ignore next */ []));
-    /** Synced from required() validators by the Signal Forms [field] directive. */
+    /** Synced from required() validators by the Signal Forms [formField] directive. */
     required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
     /**
      * Id(s) of external element(s) describing this control — typically your
@@ -8730,6 +8893,16 @@ class UniToggleComponent extends BaseComponent {
     ariaDescribedBy = input(...(ngDevMode ? [undefined, { debugName: "ariaDescribedBy" }] : /* istanbul ignore next */ []));
     // --- CONFIGURATION ---
     label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
+    /**
+     * Checked-state track color token, overriding the theme's
+     * `toggle.behavior.checkedColor`.
+     *
+     * This exists alongside the theme option because `variant` — where this color
+     * used to live exclusively — defaults to `'primary'`, so the component cannot
+     * tell "set to primary" from "not set". Without an input, a theme-level
+     * `checkedColor` would silently make per-instance `variant` inert.
+     */
+    checkedColor = input(...(ngDevMode ? [undefined, { debugName: "checkedColor" }] : /* istanbul ignore next */ []));
     // Only show errors if the user has actually interacted with the field
     showError = computed(() => this.invalid() && (this.touched() || this.dirty()), ...(ngDevMode ? [{ debugName: "showError" }] : /* istanbul ignore next */ []));
     markAsTouched() {
@@ -8739,18 +8912,56 @@ class UniToggleComponent extends BaseComponent {
         this.checked.set(event.target.checked);
         this.markAsTouched();
     }
+    /**
+     * Track and knob geometry for the active `size`, read out of the theme's
+     * `sizes` block as data — `width`, `height` and the knob's inset `padding`.
+     *
+     * Read rather than spread: `padding` must not reach the track as real CSS or
+     * it would double up with the knob's own `top`/`left` offsets. `uni-calendar`
+     * treats its size block the same way.
+     */
     metrics = computed(() => {
-        const toggleSize = this.componentOptions().size || 20;
-        const sliderSize = toggleSize * 0.8;
+        // The legacy single-number token wins when a theme still sets it: that
+        // theme opted into the old derived-ratio geometry before `sizes` existed,
+        // and it applies to every instance regardless of the `size` input.
+        const legacy = this.componentOptions().size;
+        if (legacy != null) {
+            const height = Number(legacy);
+            return geometry(height * 2, height, (height - height * 0.8) / 2);
+        }
+        const size = this.style();
+        const height = Number(size['height'] ?? 20);
+        const width = Number(size['width'] ?? height * 2);
+        const inset = Number(size['padding'] ?? (height - height * 0.8) / 2);
+        return geometry(width, height, inset);
+    }, ...(ngDevMode ? [{ debugName: "metrics" }] : /* istanbul ignore next */ []));
+    /**
+     * The resolved checked/accent color: the per-instance input, then the
+     * variant's themed accent, then the theme option.
+     *
+     * The last link used to be `this.variant()` — the variant *name* resolved as
+     * a colour token. That only ever worked because every variant happened to
+     * also be a colour; with the registry open, `variant="destructive"` would
+     * have missed and silently rendered primary. `primary` is the last resort
+     * because it is a reserved variant name.
+     */
+    accent = computed(() => this.checkedColor() ??
+        this.variantRoles()?.accent ??
+        this.componentOptions().checkedColor ??
+        'primary', ...(ngDevMode ? [{ debugName: "accent" }] : /* istanbul ignore next */ []));
+    /** Knob slide and track color change, as a motion token — never `all`. */
+    transitions = computed(() => {
+        const motion = this.theme.motion(this.componentOptions().motion ?? 'control');
+        const speed = motion.duration / 1000;
         return {
-            toggleSize,
-            toggleWidth: toggleSize * 2,
-            sliderSize,
-            sliderOffset: (toggleSize - sliderSize) / 2,
+            // Scoped, never `all`: the focus ring must apply instantly rather than
+            // interpolating its outline color from a stale value.
+            track: `background-color ${speed}s ${motion.easing}, border-color ${speed}s ${motion.easing}`,
+            knob: `transform ${speed}s ${motion.easing}, background-color ${speed}s ${motion.easing}`,
         };
-    }, ...(ngDevMode ? [{ debugName: "metrics" }] : /* istanbul ignore next */ []));
+    }, ...(ngDevMode ? [{ debugName: "transitions" }] : /* istanbul ignore next */ []));
     toggleLabel = computed(() => {
-        const { toggleSize, toggleWidth, sliderSize, sliderOffset } = this.metrics();
+        const { height, width, knob, inset, radius } = this.metrics();
         return css({
             userSelect: 'none',
             cursor: this.disabled() ? 'not-allowed' : 'pointer',
@@ -8760,26 +8971,24 @@ class UniToggleComponent extends BaseComponent {
             gap: 8,
             opacity: this.disabled() ? 0.6 : 1,
             '& .toggle-switch': {
-                width: toggleWidth,
-                height: toggleSize,
+                width,
+                height,
                 backgroundColor: this.disabled()
-                    ? this.getThemeColor('disabled')
-                    : this.getThemeColor(this.componentOptions().trackColor ?? 'surface-variant'),
-                borderRadius: toggleSize / 2,
+                    ? this.color('disabled')
+                    : this.color(this.componentOptions().trackColor ?? 'surface-variant'),
+                borderRadius: radius,
                 position: 'relative',
-                // Scoped, never `all`: the focus ring must apply instantly rather
-                // than interpolating its outline color from a stale value.
-                transition: 'background-color 0.3s ease, border-color 0.3s ease',
+                transition: this.transitions().track,
             },
             '& .toggle-slider': {
-                width: sliderSize,
-                height: sliderSize,
-                backgroundColor: this.getThemeColor(this.componentOptions().knobColor ?? 'surface'),
+                width: knob,
+                height: knob,
+                backgroundColor: this.color(this.componentOptions().knobColor ?? 'surface'),
                 borderRadius: '50%',
                 position: 'absolute',
-                top: sliderOffset,
-                left: sliderOffset,
-                transition: 'transform 0.3s ease, background-color 0.3s ease',
+                top: inset,
+                left: inset,
+                transition: this.transitions().knob,
                 ...this.theme.boxShadow('raised'),
             },
             // Hover darkens whatever the token resolves to — the button convention.
@@ -8791,7 +9000,8 @@ class UniToggleComponent extends BaseComponent {
         });
     }, ...(ngDevMode ? [{ debugName: "toggleLabel" }] : /* istanbul ignore next */ []));
     toggleInput = computed(() => {
-        const { toggleSize } = this.metrics();
+        const { travel } = this.metrics();
+        const accent = this.color(this.accent());
         return css({
             position: 'absolute',
             zIndex: -1,
@@ -8799,32 +9009,34 @@ class UniToggleComponent extends BaseComponent {
             height: 0,
             opacity: 0,
             '&:checked + .toggle-switch': {
-                backgroundColor: this.getThemeColor(this.variant()),
-                borderColor: this.getThemeColor(this.variant()),
+                backgroundColor: accent,
+                borderColor: accent,
             },
             '&:checked + .toggle-switch .toggle-slider': {
-                transform: `translateX(${toggleSize}px)`,
+                transform: `translateX(${travel}px)`,
             },
             '&:disabled + .toggle-switch': {
                 cursor: 'not-allowed',
             },
-            // The shared, themable focus indicator, keyed off the hidden input.
+            // The shared, themable focus indicator, keyed off the hidden input. It
+            // wears the checked color rather than the variant, so a themed on-state
+            // is not paired with a ring in some other role's color.
             '&:focus + .toggle-switch': {
-                ...this.theme.focusRingStyle(this.getThemeColor(this.variant())),
+                ...this.theme.focusRingStyle(accent),
             },
         });
     }, ...(ngDevMode ? [{ debugName: "toggleInput" }] : /* istanbul ignore next */ []));
-    getThemeColor(token) {
-        const colors = this.theme.colors();
-        return colors[token] ? colors[token] : colors['primary'];
+    /** A chrome colour by token — no silent fallback; see `uni-radio`. */
+    color(token) {
+        return this.theme.colors()[token];
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniToggleComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniToggleComponent, isStandalone: true, selector: "uni-toggle", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, dirty: { classPropertyName: "dirty", publicName: "dirty", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange", touched: "touchedChange" }, providers: [{ provide: COMPONENT_NAME, useValue: 'toggle' }], usesInheritance: true, ngImport: i0, template: "<label [class]=\"toggleLabel()\">\n  <input\n    type=\"checkbox\"\n    role=\"switch\"\n    [class]=\"toggleInput()\"\n    [checked]=\"checked()\"\n    (change)=\"handleChange($event)\"\n    [disabled]=\"disabled()\"\n    [attr.aria-invalid]=\"showError() ? true : null\"\n    [attr.aria-required]=\"required() ? true : null\"\n    [attr.aria-describedby]=\"ariaDescribedBy() || null\"\n  />\n  <div class=\"toggle-switch\">\n    <div class=\"toggle-slider\"></div>\n  </div>\n  @if (label()) {\n    <span uni-text=\"label\">{{ label() }}</span>\n  }\n</label>\n", dependencies: [{ kind: "directive", type: UniTextDirective, selector: "[uni-text]", inputs: ["uni-text", "typeface", "color", "display", "align", "nowrap", "maxWidth", "ellipsis"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniToggleComponent, isStandalone: true, selector: "uni-toggle", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, dirty: { classPropertyName: "dirty", publicName: "dirty", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, checkedColor: { classPropertyName: "checkedColor", publicName: "checkedColor", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange", touched: "touchedChange" }, providers: [{ provide: COMPONENT_NAME, useValue: 'toggle' }], usesInheritance: true, ngImport: i0, template: "<label [class]=\"toggleLabel()\">\n  <input\n    type=\"checkbox\"\n    role=\"switch\"\n    [class]=\"toggleInput()\"\n    [checked]=\"checked()\"\n    (change)=\"handleChange($event)\"\n    [disabled]=\"disabled()\"\n    [attr.aria-invalid]=\"showError() ? true : null\"\n    [attr.aria-required]=\"required() ? true : null\"\n    [attr.aria-describedby]=\"ariaDescribedBy() || null\"\n  />\n  <div class=\"toggle-switch\">\n    <div class=\"toggle-slider\"></div>\n  </div>\n  @if (label()) {\n    <span uni-text=\"label\">{{ label() }}</span>\n  }\n</label>\n", dependencies: [{ kind: "directive", type: UniTextDirective, selector: "[uni-text]", inputs: ["uni-text", "typeface", "color", "display", "align", "nowrap", "maxWidth", "ellipsis"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniToggleComponent, decorators: [{
             type: Component,
             args: [{ selector: 'uni-toggle', imports: [UniTextDirective], providers: [{ provide: COMPONENT_NAME, useValue: 'toggle' }], changeDetection: ChangeDetectionStrategy.OnPush, template: "<label [class]=\"toggleLabel()\">\n  <input\n    type=\"checkbox\"\n    role=\"switch\"\n    [class]=\"toggleInput()\"\n    [checked]=\"checked()\"\n    (change)=\"handleChange($event)\"\n    [disabled]=\"disabled()\"\n    [attr.aria-invalid]=\"showError() ? true : null\"\n    [attr.aria-required]=\"required() ? true : null\"\n    [attr.aria-describedby]=\"ariaDescribedBy() || null\"\n  />\n  <div class=\"toggle-switch\">\n    <div class=\"toggle-slider\"></div>\n  </div>\n  @if (label()) {\n    <span uni-text=\"label\">{{ label() }}</span>\n  }\n</label>\n" }]
-        }], propDecorators: { checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], dirty: [{ type: i0.Input, args: [{ isSignal: true, alias: "dirty", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], ariaDescribedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedBy", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }] } });
+        }], propDecorators: { checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], dirty: [{ type: i0.Input, args: [{ isSignal: true, alias: "dirty", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], ariaDescribedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedBy", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], checkedColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "checkedColor", required: false }] }] } });
 
 /**
  * Every layout and typography attribute directive, for
@@ -10461,8 +10673,101 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: '[uni-dialog-header]', imports: [UniBoxDirective, UniIconButtonComponent, UniTextDirective, UniRowDirective], providers: [{ provide: COMPONENT_NAME, useValue: 'dialogHeader' }], template: "<div\n  row-layout\n  [containerColor]=\"componentOptions().color\"\n  [borderRadius]=\"componentOptions().borderRadius\"\n  [height]=\"componentOptions().height\"\n  alignItems=\"center\"\n  [paddingHorizontal]=\"componentOptions().paddingHorizontal ?? 'sm'\"\n>\n  <!-- Balance spacer: only centered titles need to offset the close button. -->\n  @if ((componentOptions().textAlign || 'center') === 'center') {\n    <div box-layout [width]=\"26\"></div>\n  }\n  <div box-layout [grow]=\"1\" [attr.id]=\"titleId\">\n    <span uni-text\n      [typeface]=\"componentOptions().textRole\"\n      [color]=\"componentOptions().textColor\"\n      display=\"block\"\n      [align]=\"componentOptions().textAlign || 'center'\"\n      ><ng-content></ng-content\n    ></span>\n  </div>\n  <button\n    icon-button\n    [iconName]=\"componentOptions().closeButtonIcon\"\n    [symbolName]=\"componentOptions().closeButtonSymbol\"\n    variant=\"ghost\"\n    (click)=\"closeDialog()\"\n    [size]=\"componentOptions().closeButtonSize || 'md'\"\n  >\n    Close\n  </button>\n</div>\n" }]
         }], ctorParameters: () => [] });
 
+const DRAWER_PANEL = new InjectionToken('uni-drawer-panel');
+
 /**
- * Navigation drawer with two modes sharing one content slot:
+ * The drawer's pinned footer action row — the save bar of an editor panel.
+ *
+ * Sits outside the scrolling body, so the actions stay reachable however long
+ * the form is. Mirrors `[dialog-buttons]`; the difference is posture, which
+ * lives in the `drawerButtons` theme options rather than here.
+ */
+class UniDrawerButtonsComponent extends BaseComponent {
+    drawer = inject(DRAWER_PANEL, { optional: true });
+    confirmButtonText = input(...(ngDevMode ? [undefined, { debugName: "confirmButtonText" }] : /* istanbul ignore next */ []));
+    confirmButtonVariant = input(...(ngDevMode ? [undefined, { debugName: "confirmButtonVariant" }] : /* istanbul ignore next */ []));
+    cancelButtonText = input(...(ngDevMode ? [undefined, { debugName: "cancelButtonText" }] : /* istanbul ignore next */ []));
+    cancelButtonVariant = input(...(ngDevMode ? [undefined, { debugName: "cancelButtonVariant" }] : /* istanbul ignore next */ []));
+    disableConfirm = input(...(ngDevMode ? [undefined, { debugName: "disableConfirm" }] : /* istanbul ignore next */ []));
+    padding = input(...(ngDevMode ? [undefined, { debugName: "padding" }] : /* istanbul ignore next */ []));
+    justifyContent = input(...(ngDevMode ? [undefined, { debugName: "justifyContent" }] : /* istanbul ignore next */ []));
+    confirmed = output();
+    // Inputs win over theme options; the trailing literal is the fallback.
+    confirmVariant = computed(() => this.confirmButtonVariant() ?? this.componentOptions().confirmButtonVariant ?? 'primary', ...(ngDevMode ? [{ debugName: "confirmVariant" }] : /* istanbul ignore next */ []));
+    cancelVariant = computed(() => this.cancelButtonVariant() ?? this.componentOptions().cancelButtonVariant ?? 'quaternary', ...(ngDevMode ? [{ debugName: "cancelVariant" }] : /* istanbul ignore next */ []));
+    paddingValue = computed(() => this.padding() ?? this.componentOptions().padding ?? 'md', ...(ngDevMode ? [{ debugName: "paddingValue" }] : /* istanbul ignore next */ []));
+    justifyContentValue = computed(() => this.justifyContent() ?? this.componentOptions().justifyContent ?? 'flex-end', ...(ngDevMode ? [{ debugName: "justifyContentValue" }] : /* istanbul ignore next */ []));
+    gapValue = computed(() => this.componentOptions().gap ?? 'sm', ...(ngDevMode ? [{ debugName: "gapValue" }] : /* istanbul ignore next */ []));
+    buttonSize = computed(() => this.componentOptions().buttonSize ?? 'md', ...(ngDevMode ? [{ debugName: "buttonSize" }] : /* istanbul ignore next */ []));
+    /** A pinned row, sized by its content rather than by the body beside it. */
+    hostClass = computed(() => css({
+        flex: 'none',
+        ...this.theme.borderTop(this.componentOptions().divider),
+    }), ...(ngDevMode ? [{ debugName: "hostClass" }] : /* istanbul ignore next */ []));
+    className = computed(() => css([
+        this.componentTheme().fixed,
+        this.componentOptions().stretch && {
+            width: '100%',
+            minWidth: '100%',
+            '& > button': { flex: '1 1 50%', maxWidth: '50%' },
+        },
+    ]), ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
+    /**
+     * Cancel routes through the drawer's own close decision, so a panel with
+     * unsaved changes can veto it exactly as it vetoes Escape.
+     */
+    closeDrawer() {
+        this.drawer?.requestClose('close-button');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniDrawerButtonsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", type: UniDrawerButtonsComponent, isStandalone: true, selector: "[uni-drawer-buttons], [drawer-buttons]", inputs: { confirmButtonText: { classPropertyName: "confirmButtonText", publicName: "confirmButtonText", isSignal: true, isRequired: false, transformFunction: null }, confirmButtonVariant: { classPropertyName: "confirmButtonVariant", publicName: "confirmButtonVariant", isSignal: true, isRequired: false, transformFunction: null }, cancelButtonText: { classPropertyName: "cancelButtonText", publicName: "cancelButtonText", isSignal: true, isRequired: false, transformFunction: null }, cancelButtonVariant: { classPropertyName: "cancelButtonVariant", publicName: "cancelButtonVariant", isSignal: true, isRequired: false, transformFunction: null }, disableConfirm: { classPropertyName: "disableConfirm", publicName: "disableConfirm", isSignal: true, isRequired: false, transformFunction: null }, padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null }, justifyContent: { classPropertyName: "justifyContent", publicName: "justifyContent", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { confirmed: "confirmed" }, host: { properties: { "class": "hostClass()" } }, providers: [{ provide: COMPONENT_NAME, useValue: 'drawerButtons' }], usesInheritance: true, ngImport: i0, template: "<div\n  row-layout\n  [gap]=\"gapValue()\"\n  [padding]=\"paddingValue()\"\n  [justifyContent]=\"justifyContentValue()\"\n  [flexDirection]=\"componentOptions().reverseOrder ? 'row-reverse' : 'row'\"\n  [class]=\"className()\"\n>\n  <button text-button [variant]=\"cancelVariant()\" [size]=\"buttonSize()\" (click)=\"closeDrawer()\">\n    {{ cancelButtonText() || 'Cancel' }}\n  </button>\n  <button\n    text-button\n    [variant]=\"confirmVariant()\"\n    [size]=\"buttonSize()\"\n    (click)=\"confirmed.emit()\"\n    [disable]=\"disableConfirm()\"\n  >\n    {{ confirmButtonText() || 'Save' }}\n  </button>\n</div>\n", dependencies: [{ kind: "directive", type: UniRowDirective, selector: "[uni-row-layout], [row-layout]", inputs: ["display", "flexDirection", "minWidth"] }, { kind: "component", type: UniButtonComponent, selector: "button[uni-text-button], button[text-button]", inputs: ["disable", "loading", "fullWidth", "symbolLeft", "symbolRight"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniDrawerButtonsComponent, decorators: [{
+            type: Component,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: '[uni-drawer-buttons], [drawer-buttons]', imports: [UniRowDirective, UniButtonComponent], providers: [{ provide: COMPONENT_NAME, useValue: 'drawerButtons' }], host: { '[class]': 'hostClass()' }, template: "<div\n  row-layout\n  [gap]=\"gapValue()\"\n  [padding]=\"paddingValue()\"\n  [justifyContent]=\"justifyContentValue()\"\n  [flexDirection]=\"componentOptions().reverseOrder ? 'row-reverse' : 'row'\"\n  [class]=\"className()\"\n>\n  <button text-button [variant]=\"cancelVariant()\" [size]=\"buttonSize()\" (click)=\"closeDrawer()\">\n    {{ cancelButtonText() || 'Cancel' }}\n  </button>\n  <button\n    text-button\n    [variant]=\"confirmVariant()\"\n    [size]=\"buttonSize()\"\n    (click)=\"confirmed.emit()\"\n    [disable]=\"disableConfirm()\"\n  >\n    {{ confirmButtonText() || 'Save' }}\n  </button>\n</div>\n" }]
+        }], propDecorators: { confirmButtonText: [{ type: i0.Input, args: [{ isSignal: true, alias: "confirmButtonText", required: false }] }], confirmButtonVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "confirmButtonVariant", required: false }] }], cancelButtonText: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelButtonText", required: false }] }], cancelButtonVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelButtonVariant", required: false }] }], disableConfirm: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableConfirm", required: false }] }], padding: [{ type: i0.Input, args: [{ isSignal: true, alias: "padding", required: false }] }], justifyContent: [{ type: i0.Input, args: [{ isSignal: true, alias: "justifyContent", required: false }] }], confirmed: [{ type: i0.Output, args: ["confirmed"] }] } });
+
+/**
+ * The drawer's pinned header row: a title, and optionally a close button.
+ *
+ * Sits outside the scrolling body, so it stays put while the form beneath it
+ * moves. Reached either by projecting it — `<div uni-drawer-header>` — or
+ * implicitly, by giving `uni-drawer` a `headline`, in which case the drawer
+ * renders one of these itself.
+ */
+class UniDrawerHeaderComponent extends BaseComponent {
+    drawer = inject(DRAWER_PANEL, { optional: true });
+    /** Title text. Falls back to the drawer's `headline`; projected content wins over both. */
+    headline = input(...(ngDevMode ? [undefined, { debugName: "headline" }] : /* istanbul ignore next */ []));
+    /** Attached to the title so the drawer is labelled by it. */
+    titleId = this.drawer?.titleId ?? null;
+    title = computed(() => this.headline() ?? this.drawer?.headline() ?? '', ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    showClose = computed(() => this.drawer?.defaultCloseButton() ?? true, ...(ngDevMode ? [{ debugName: "showClose" }] : /* istanbul ignore next */ []));
+    constructor() {
+        super();
+        // Tells the drawer it is labelled by this row rather than by `ariaLabel`.
+        this.drawer?.hasHeader.set(true);
+    }
+    /** Never a bare close: the drawer decides, so a veto is honoured here too. */
+    closeDrawer() {
+        this.drawer?.requestClose('close-button');
+    }
+    className = computed(() => css({
+        // A pinned row: it is a flex child of the panel and must not be sized
+        // by the scrolling body beside it.
+        flex: 'none',
+        ...this.theme.borderBottom(this.componentOptions().divider),
+    }), ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniDrawerHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniDrawerHeaderComponent, isStandalone: true, selector: "[uni-drawer-header]", inputs: { headline: { classPropertyName: "headline", publicName: "headline", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "className()" } }, providers: [{ provide: COMPONENT_NAME, useValue: 'drawerHeader' }], usesInheritance: true, ngImport: i0, template: "<div\n  row-layout\n  [containerColor]=\"componentOptions().color\"\n  [height]=\"componentOptions().height\"\n  alignItems=\"center\"\n  gap=\"sm\"\n  [padding]=\"componentOptions().padding ?? 'md'\"\n>\n  <div box-layout [grow]=\"1\" [minWidth]=\"0\" [attr.id]=\"titleId\">\n    <span\n      uni-text\n      [typeface]=\"componentOptions().textRole\"\n      [color]=\"componentOptions().textColor\"\n      display=\"block\"\n      [align]=\"componentOptions().textAlign || 'left'\"\n      ><ng-content>{{ title() }}</ng-content></span\n    >\n  </div>\n  @if (showClose()) {\n    <button\n      icon-button\n      [iconName]=\"componentOptions().closeButtonIcon\"\n      [symbolName]=\"componentOptions().closeButtonSymbol\"\n      variant=\"ghost\"\n      (click)=\"closeDrawer()\"\n      [size]=\"componentOptions().closeButtonSize || 'md'\"\n    >\n      Close\n    </button>\n  }\n</div>\n", dependencies: [{ kind: "directive", type: UniBoxDirective, selector: "[uni-box-layout], [box-layout]", inputs: ["containerColor", "backgroundColor", "borderRadius", "borderRadiusLeft", "borderRadiusRight", "borderRadiusTop", "borderRadiusBottom", "padding", "paddingHorizontal", "paddingVertical", "paddingLeft", "paddingRight", "paddingTop", "paddingBottom", "border", "borderTop", "borderBottom", "borderLeft", "borderRight", "dashBorder", "alignSelf", "alignItems", "alignContent", "justifyContent", "grow", "flex", "shrink", "basis", "marginInline", "display", "position", "inset", "height", "minHeight", "maxHeight", "width", "minWidth", "maxWidth", "ignoreDir", "gridArea", "gridColumn", "gridRow", "overflow", "shadow", "gap", "fullWidth", "fullHeight", "flexDirection", "textAlign", "wrapItems", "zIndex"] }, { kind: "component", type: UniIconButtonComponent, selector: "button[uni-icon-button], button[icon-button]", inputs: ["ariaLabel", "iconName", "symbolName", "variant", "size", "disable", "loading", "opticalSize"] }, { kind: "directive", type: UniTextDirective, selector: "[uni-text]", inputs: ["uni-text", "typeface", "color", "display", "align", "nowrap", "maxWidth", "ellipsis"] }, { kind: "directive", type: UniRowDirective, selector: "[uni-row-layout], [row-layout]", inputs: ["display", "flexDirection", "minWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniDrawerHeaderComponent, decorators: [{
+            type: Component,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: '[uni-drawer-header]', imports: [UniBoxDirective, UniIconButtonComponent, UniTextDirective, UniRowDirective], providers: [{ provide: COMPONENT_NAME, useValue: 'drawerHeader' }], host: { '[class]': 'className()' }, template: "<div\n  row-layout\n  [containerColor]=\"componentOptions().color\"\n  [height]=\"componentOptions().height\"\n  alignItems=\"center\"\n  gap=\"sm\"\n  [padding]=\"componentOptions().padding ?? 'md'\"\n>\n  <div box-layout [grow]=\"1\" [minWidth]=\"0\" [attr.id]=\"titleId\">\n    <span\n      uni-text\n      [typeface]=\"componentOptions().textRole\"\n      [color]=\"componentOptions().textColor\"\n      display=\"block\"\n      [align]=\"componentOptions().textAlign || 'left'\"\n      ><ng-content>{{ title() }}</ng-content></span\n    >\n  </div>\n  @if (showClose()) {\n    <button\n      icon-button\n      [iconName]=\"componentOptions().closeButtonIcon\"\n      [symbolName]=\"componentOptions().closeButtonSymbol\"\n      variant=\"ghost\"\n      (click)=\"closeDrawer()\"\n      [size]=\"componentOptions().closeButtonSize || 'md'\"\n    >\n      Close\n    </button>\n  }\n</div>\n" }]
+        }], ctorParameters: () => [], propDecorators: { headline: [{ type: i0.Input, args: [{ isSignal: true, alias: "headline", required: false }] }] } });
+
+/**
+ * Drawer with two modes sharing one three-row layout:
  *
  * - `side` — an in-flow `<aside>` that pushes content (dashboard sidenav);
  *   opening/closing animates its width, and the divider border primitive
@@ -10471,17 +10776,78 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
  *   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.
+ * **The panel is never the scroll container.** It is a flex column of three
+ * rows — an optional `[uni-drawer-header]`, the projected body, an optional
+ * `[uni-drawer-buttons]` — and only the body scrolls. The panel itself is
+ * `overflow: clip` on both axes. That is what lets a header and a save bar pin
+ * while a long form scrolls between them, and it is why the theme's `padding`
+ * option lands on the body row rather than the panel: padding on a scrolling
+ * box scrolls away with its content.
+ *
+ * Surface, width, divider, elevation, padding, backdrop, scrim and background
+ * all resolve from `drawer` theme tokens.
  */
 class UniDrawerComponent extends BaseComponent {
     /** Two-way bindable open state: [(open)]. */
     open = model(false, ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
     mode = input('side', ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
     position = input('start', ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
-    /** Accessible name for the overlay mode's dialog. */
-    ariaLabel = input('Navigation', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
-    contentTemplate = viewChild.required('content');
+    /**
+     * Accessible name for the overlay mode. Only consulted when the drawer has
+     * no header to be labelled by.
+     *
+     * There is deliberately no default. A drawer used as an editor panel that
+     * inherited the literal "Navigation" would announce itself as something it
+     * is not, and a wrong accessible name is worse than a missing one — the
+     * missing one is at least caught by any audit.
+     */
+    ariaLabel = input(...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    /**
+     * Title for the drawer's header row. Shorthand for projecting a
+     * `[uni-drawer-header]`; project one instead when the header needs more
+     * than a title (a record counter, prev/next navigation).
+     */
+    headline = input(...(ngDevMode ? [undefined, { debugName: "headline" }] : /* istanbul ignore next */ []));
+    /** Whether the header row renders a close button. */
+    defaultCloseButton = input(true, ...(ngDevMode ? [{ debugName: "defaultCloseButton" }] : /* istanbul ignore next */ []));
+    /** Panel width in px, overriding the theme's `drawer.behavior.width`. */
+    width = input(...(ngDevMode ? [undefined, { debugName: "width" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether the overlay dims the page behind it, overriding the theme's
+     * `drawer.behavior.scrim`. False leaves the backdrop transparent so the page
+     * stays legible while the panel is open — an editor panel beside a board the
+     * user is still reading.
+     *
+     * This does not make the drawer non-modal: focus is still trapped and the
+     * page behind is still inert. It is a visibility choice, not a modality one.
+     */
+    scrim = input(...(ngDevMode ? [undefined, { debugName: "scrim" }] : /* istanbul ignore next */ []));
+    /**
+     * CSS selector for the element to focus when the overlay opens. The native
+     * default is the first focusable element, which in an editor panel is
+     * usually the close button rather than the first field.
+     */
+    initialFocus = input(...(ngDevMode ? [undefined, { debugName: "initialFocus" }] : /* istanbul ignore next */ []));
+    /**
+     * The drawer is *asking* to close — Escape, the backdrop, or a close/cancel
+     * button. Pair with `disableAutoClose` to hold the panel open while an async
+     * confirmation runs.
+     */
+    closeRequest = output();
+    /**
+     * When true the drawer never closes itself; it only emits `closeRequest` and
+     * waits for the consumer to set `open`. Off by default, so a drawer that
+     * ignores `closeRequest` behaves exactly as it always has.
+     */
+    disableAutoClose = input(false, ...(ngDevMode ? [{ debugName: "disableAutoClose" }] : /* istanbul ignore next */ []));
+    /** Set by a projected `[uni-drawer-header]` so it can pin flush to the top. */
+    hasHeader = signal(false, ...(ngDevMode ? [{ debugName: "hasHeader" }] : /* istanbul ignore next */ []));
+    /** Id referenced by aria-labelledby; the header row attaches it to its title. */
+    titleId = uniqueId('uni-drawer-title');
+    labelledBy = computed(() => (this.hasHeader() ? this.titleId : null), ...(ngDevMode ? [{ debugName: "labelledBy" }] : /* istanbul ignore next */ []));
+    headerTemplate = viewChild.required('header');
+    bodyTemplate = viewChild.required('body');
+    footerTemplate = viewChild.required('footer');
     overlay = viewChild('overlay', ...(ngDevMode ? [{ debugName: "overlay" }] : /* istanbul ignore next */ []));
     constructor() {
         super();
@@ -10493,6 +10859,9 @@ class UniDrawerComponent extends BaseComponent {
                 if (!dialog.open) {
                     dialog.removeAttribute('closing');
                     dialog.showModal();
+                    const selector = this.initialFocus();
+                    if (selector)
+                        dialog.querySelector(selector)?.focus();
                 }
             }
             else if (dialog.open) {
@@ -10501,14 +10870,24 @@ class UniDrawerComponent extends BaseComponent {
             }
         });
     }
+    /**
+     * The one place a close is decided, so every route in — Escape, the
+     * backdrop, the header's close button, the footer's cancel — behaves
+     * identically and is equally vetoable.
+     */
+    requestClose(reason) {
+        this.closeRequest.emit({ reason });
+        if (!this.disableAutoClose())
+            this.open.set(false);
+    }
     onBackdropClick(event) {
         if (event.target.nodeName === 'DIALOG')
-            this.open.set(false);
+            this.requestClose('backdrop');
     }
     /** Route Escape through the animated close, keeping `open` in sync. */
     onCancel(event) {
         event.preventDefault();
-        this.open.set(false);
+        this.requestClose('escape');
     }
     onAnimationEnd(event) {
         const dialog = this.overlay()?.nativeElement;
@@ -10522,53 +10901,129 @@ class UniDrawerComponent extends BaseComponent {
     edge = computed(() => (this.position() === 'start' ? '-100%' : '100%'), ...(ngDevMode ? [{ debugName: "edge" }] : /* istanbul ignore next */ []));
     slideIn = computed(() => keyframes({ from: { transform: `translateX(${this.edge()})` }, to: { transform: 'translateX(0)' } }), ...(ngDevMode ? [{ debugName: "slideIn" }] : /* istanbul ignore next */ []));
     slideOut = computed(() => keyframes({ from: { transform: 'translateX(0)' }, to: { transform: `translateX(${this.edge()})` } }), ...(ngDevMode ? [{ debugName: "slideOut" }] : /* istanbul ignore next */ []));
+    /** Input wins over the theme option; the literal is the last-resort default. */
+    panelWidth = computed(() => this.width() ?? this.componentOptions().width ?? 280, ...(ngDevMode ? [{ debugName: "panelWidth" }] : /* istanbul ignore next */ []));
+    showScrim = computed(() => this.scrim() ?? this.componentOptions().scrim ?? true, ...(ngDevMode ? [{ debugName: "showScrim" }] : /* istanbul ignore next */ []));
+    /**
+     * The panel's surface. `solid` is the plain color pair; `glass` and
+     * `gradient` derive from it, so a theme swaps treatment without restating
+     * the color.
+     */
+    surface = computed(() => {
+        const options = this.componentOptions();
+        const pair = this.theme.colorPair(options.color);
+        const base = pair?.backgroundColor;
+        const treatment = options.background ?? 'solid';
+        if (!base || treatment === 'solid')
+            return pair;
+        if (treatment === 'glass') {
+            return {
+                ...pair,
+                backgroundColor: `color-mix(in srgb, ${base} 72%, transparent)`,
+                backdropFilter: 'blur(12px) saturate(1.4)',
+            };
+        }
+        // A vertical tint toward the content color: always visible, and it never
+        // lets the page show through the way a fade to transparent would.
+        return {
+            ...pair,
+            backgroundImage: `linear-gradient(to bottom, ${base} 0%, color-mix(in srgb, ${base} 92%, ${pair?.color ?? 'transparent'} 8%) 100%)`,
+        };
+    }, ...(ngDevMode ? [{ debugName: "surface" }] : /* istanbul ignore next */ []));
+    /** The shared flex column: three rows, and never a scroll container itself. */
+    shell = {
+        boxSizing: 'border-box',
+        display: 'flex',
+        flexDirection: 'column',
+        // Both axes, explicitly, and never the shorthand. Setting one axis alone
+        // computes the other to `auto` — which is precisely how a panel becomes
+        // an accidental scroll container.
+        overflowX: 'clip',
+        overflowY: 'clip',
+    };
     sideClass = computed(() => {
         const options = this.componentOptions();
-        const width = options.width ?? 280;
+        const width = this.panelWidth();
         const start = this.position() === 'start';
         return css({
-            display: 'block',
-            boxSizing: 'border-box',
+            ...this.shell,
             height: '100%',
             flex: 'none',
-            overflowX: 'hidden',
-            overflowY: 'auto',
             transition: 'width 0.25s ease, visibility 0.25s',
-            ...this.theme.colorPair(options.color),
+            ...this.surface(),
             ...(start
                 ? this.theme.borderRight(options.divider)
                 : this.theme.borderLeft(options.divider)),
             ...(this.open()
-                ? { width, visibility: 'visible', ...this.theme.padding(options.padding) }
-                : { width: 0, visibility: 'hidden', padding: 0, border: 'none' }),
+                ? { width, visibility: 'visible' }
+                : { width: 0, visibility: 'hidden', border: 'none' }),
         });
     }, ...(ngDevMode ? [{ debugName: "sideClass" }] : /* istanbul ignore next */ []));
     overClass = computed(() => {
         const options = this.componentOptions();
         const start = this.position() === 'start';
         return css({
-            boxSizing: 'border-box',
-            width: options.width ?? 280,
+            ...this.shell,
+            width: this.panelWidth(),
             maxWidth: '90vw',
             height: '100dvh',
             maxHeight: '100dvh',
             border: 'none',
+            padding: 0,
             margin: start ? '0 auto 0 0' : '0 0 0 auto',
-            overflowY: 'auto',
-            ...this.theme.colorPair(options.color),
-            ...this.theme.padding(options.padding),
+            ...this.surface(),
             ...this.theme.boxShadow(options.elevation),
-            '&::backdrop': { ...options.backdrop },
+            // The UA stylesheet hides a closed dialog with `display: none`, which the
+            // shell's `display: flex` would otherwise beat on specificity — leaving
+            // the panel sitting in normal flow behind the page whenever it is shut.
+            // The closing animation still runs: `open` is only removed after it ends.
+            '&:not([open])': { display: 'none' },
+            // `scrim: false` keeps the modality — focus trap, inert page — but stops
+            // the drawer dimming what it covers.
+            '&::backdrop': this.showScrim() ? { ...options.backdrop } : { background: 'transparent' },
             '&[open]': { animation: `${this.slideIn()} 250ms ease-out` },
             '&[closing]': { animation: `${this.slideOut()} 250ms ease-in` },
         });
     }, ...(ngDevMode ? [{ debugName: "overClass" }] : /* istanbul ignore next */ []));
+    /** The only scrolling row, and the only padded one. */
+    bodyClass = computed(() => css({
+        flex: '1 1 auto',
+        minHeight: 0,
+        // Defence in depth: a positioned body is the containing block for any
+        // stray absolute descendant, so nothing can re-home into an ancestor
+        // and inflate its scrollHeight. Only safe because the shell above is
+        // `overflow: clip` — on its own this would move the phantom overflow
+        // into this scroller instead of out of the panel.
+        position: 'relative',
+        overflowX: 'hidden',
+        overflowY: 'auto',
+        overscrollBehavior: 'contain',
+        ...this.theme.padding(this.componentOptions().padding),
+    }), ...(ngDevMode ? [{ debugName: "bodyClass" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniDrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniDrawerComponent, isStandalone: true, selector: "uni-drawer", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange" }, providers: [{ provide: COMPONENT_NAME, useValue: 'drawer' }], viewQueries: [{ propertyName: "contentTemplate", first: true, predicate: ["content"], descendants: true, isSignal: true }, { propertyName: "overlay", first: true, predicate: ["overlay"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
-    <ng-template #content><ng-content /></ng-template>
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniDrawerComponent, isStandalone: true, selector: "uni-drawer", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, headline: { classPropertyName: "headline", publicName: "headline", isSignal: true, isRequired: false, transformFunction: null }, defaultCloseButton: { classPropertyName: "defaultCloseButton", publicName: "defaultCloseButton", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, scrim: { classPropertyName: "scrim", publicName: "scrim", isSignal: true, isRequired: false, transformFunction: null }, initialFocus: { classPropertyName: "initialFocus", publicName: "initialFocus", isSignal: true, isRequired: false, transformFunction: null }, disableAutoClose: { classPropertyName: "disableAutoClose", publicName: "disableAutoClose", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", closeRequest: "closeRequest" }, providers: [
+            { provide: COMPONENT_NAME, useValue: 'drawer' },
+            { provide: DRAWER_PANEL, useExisting: forwardRef(() => UniDrawerComponent) },
+        ], viewQueries: [{ propertyName: "headerTemplate", first: true, predicate: ["header"], descendants: true, isSignal: true }, { propertyName: "bodyTemplate", first: true, predicate: ["body"], descendants: true, isSignal: true }, { propertyName: "footerTemplate", first: true, predicate: ["footer"], descendants: true, isSignal: true }, { propertyName: "overlay", first: true, predicate: ["overlay"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
+    <!-- One <ng-content> per slot, each parked in a template so both modes can
+         render the same projected nodes. The catch-all is declared last so the
+         two selective slots claim their content first. -->
+    <ng-template #header>
+      @if (headline()) {
+        <div uni-drawer-header></div>
+      }
+      <ng-content select="[uni-drawer-header]" />
+    </ng-template>
+    <ng-template #footer>
+      <ng-content select="[uni-drawer-buttons], [drawer-buttons]" />
+    </ng-template>
+    <ng-template #body><ng-content /></ng-template>
+
     @if (mode() === 'side') {
       <aside [class]="sideClass()" [attr.aria-hidden]="open() ? null : 'true'">
-        <ng-container [ngTemplateOutlet]="contentTemplate()" />
+        <ng-container [ngTemplateOutlet]="headerTemplate()" />
+        <div [class]="bodyClass()"><ng-container [ngTemplateOutlet]="bodyTemplate()" /></div>
+        <ng-container [ngTemplateOutlet]="footerTemplate()" />
       </aside>
     } @else {
       <!-- Click handles the ::backdrop only (target check); keyboard closing
@@ -10578,28 +11033,49 @@ class UniDrawerComponent extends BaseComponent {
       <dialog
         #overlay
         [class]="overClass()"
-        [attr.aria-label]="ariaLabel()"
+        [attr.aria-labelledby]="labelledBy()"
+        [attr.aria-label]="labelledBy() ? null : ariaLabel()"
         (click)="onBackdropClick($event)"
         (cancel)="onCancel($event)"
         (animationend)="onAnimationEnd($event)"
       >
-        <ng-container [ngTemplateOutlet]="contentTemplate()" />
+        <ng-container [ngTemplateOutlet]="headerTemplate()" />
+        <div [class]="bodyClass()"><ng-container [ngTemplateOutlet]="bodyTemplate()" /></div>
+        <ng-container [ngTemplateOutlet]="footerTemplate()" />
       </dialog>
     }
-  `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: UniDrawerHeaderComponent, selector: "[uni-drawer-header]", inputs: ["headline"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniDrawerComponent, decorators: [{
             type: Component,
             args: [{
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     selector: 'uni-drawer',
-                    imports: [NgTemplateOutlet],
-                    providers: [{ provide: COMPONENT_NAME, useValue: 'drawer' }],
+                    imports: [NgTemplateOutlet, UniDrawerHeaderComponent],
+                    providers: [
+                        { provide: COMPONENT_NAME, useValue: 'drawer' },
+                        { provide: DRAWER_PANEL, useExisting: forwardRef(() => UniDrawerComponent) },
+                    ],
                     template: `
-    <ng-template #content><ng-content /></ng-template>
+    <!-- One <ng-content> per slot, each parked in a template so both modes can
+         render the same projected nodes. The catch-all is declared last so the
+         two selective slots claim their content first. -->
+    <ng-template #header>
+      @if (headline()) {
+        <div uni-drawer-header></div>
+      }
+      <ng-content select="[uni-drawer-header]" />
+    </ng-template>
+    <ng-template #footer>
+      <ng-content select="[uni-drawer-buttons], [drawer-buttons]" />
+    </ng-template>
+    <ng-template #body><ng-content /></ng-template>
+
     @if (mode() === 'side') {
       <aside [class]="sideClass()" [attr.aria-hidden]="open() ? null : 'true'">
-        <ng-container [ngTemplateOutlet]="contentTemplate()" />
+        <ng-container [ngTemplateOutlet]="headerTemplate()" />
+        <div [class]="bodyClass()"><ng-container [ngTemplateOutlet]="bodyTemplate()" /></div>
+        <ng-container [ngTemplateOutlet]="footerTemplate()" />
       </aside>
     } @else {
       <!-- Click handles the ::backdrop only (target check); keyboard closing
@@ -10609,17 +11085,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
       <dialog
         #overlay
         [class]="overClass()"
-        [attr.aria-label]="ariaLabel()"
+        [attr.aria-labelledby]="labelledBy()"
+        [attr.aria-label]="labelledBy() ? null : ariaLabel()"
         (click)="onBackdropClick($event)"
         (cancel)="onCancel($event)"
         (animationend)="onAnimationEnd($event)"
       >
-        <ng-container [ngTemplateOutlet]="contentTemplate()" />
+        <ng-container [ngTemplateOutlet]="headerTemplate()" />
+        <div [class]="bodyClass()"><ng-container [ngTemplateOutlet]="bodyTemplate()" /></div>
+        <ng-container [ngTemplateOutlet]="footerTemplate()" />
       </dialog>
     }
   `,
                 }]
-        }], ctorParameters: () => [], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], contentTemplate: [{ type: i0.ViewChild, args: ['content', { isSignal: true }] }], overlay: [{ type: i0.ViewChild, args: ['overlay', { isSignal: true }] }] } });
+        }], ctorParameters: () => [], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], headline: [{ type: i0.Input, args: [{ isSignal: true, alias: "headline", required: false }] }], defaultCloseButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultCloseButton", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], scrim: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrim", required: false }] }], initialFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialFocus", required: false }] }], closeRequest: [{ type: i0.Output, args: ["closeRequest"] }], disableAutoClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableAutoClose", required: false }] }], headerTemplate: [{ type: i0.ViewChild, args: ['header', { isSignal: true }] }], bodyTemplate: [{ type: i0.ViewChild, args: ['body', { isSignal: true }] }], footerTemplate: [{ type: i0.ViewChild, args: ['footer', { isSignal: true }] }], overlay: [{ type: i0.ViewChild, args: ['overlay', { isSignal: true }] }] } });
 
 class UniExpandComponent extends BaseComponent {
     collapsed = model(true, ...(ngDevMode ? [{ debugName: "collapsed" }] : /* istanbul ignore next */ []));
@@ -14263,5 +14742,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { BodyRenderDirective, ConfirmationDialogComponent, DragAndDropDirective, FOCUSABLE_SELECTOR, ListboxNavigation, LocalStorageService, NotificationService, NotificationsComponent, RippleDirective, TRANSFORM_ORIGINS, ThemeService, UNI_FORMS, UNI_LAYOUT, UNI_THEMES, UniAlertComponent, UniAppBarComponent, UniAvatarComponent, UniAvatarGroupComponent, UniBackgroundComponent, UniBadgeComponent, UniBaseDatasource, UniBoxDirective, UniBreadcrumbComponent, UniButtonComponent, UniButtonGroupComponent, UniCalendarComponent, UniCalloutComponent, UniCardComponent, UniCardContentComponent, UniCardHeaderComponent, UniCenterDirective, UniCheckboxComponent, UniComboboxComponent, UniDataSearchComponent, UniDataTableComponent, UniDateInputComponent, UniDateTimeInputComponent, UniDebounceInputComponent, UniDialogButtonsComponent, UniDialogComponent, UniDialogHeaderComponent, UniDividerComponent, UniDrawerComponent, UniDropdownComponent, UniExpandAreaComponent, UniExpandComponent, UniExpandToggleComponent, UniFileDropZoneComponent, UniGridAreaDirective, UniGridDirective, UniIconButtonComponent, UniIconComponent, UniInputBoxComponent, UniInputComponent, UniJsonViewComponent, UniMenuComponent, UniMultiSelectComponent, UniMultiSelectDropdownComponent, UniNotificationBadgeComponent, UniNumberInputComponent, UniNumberRangeInputComponent, UniPaginatorComponent, UniPopoverComponent, UniProgressBarComponent, UniProgressGaugeComponent, UniQuantityStepperComponent, UniRadioComponent, UniRecordDatasource, UniRowDirective, UniScrollAreaComponent, UniSearchInputComponent, UniSelectComponent, UniServerSideDatasource, UniSkeletonComponent, UniSliderComponent, UniSnackbarComponent, UniSortHeaderComponent, UniStackDirective, UniStatComponent, UniSymbolComponent, UniTabComponent, UniTabsComponent, UniTagComponent, UniTagInputComponent, UniTextDirective, UniTextareaComponent, UniThemeBuilderComponent, UniThemeSwitchComponent, UniTimeInputComponent, UniToggleComponent, UniTooltipComponent, UniTourComponent, UniWrapDirective, acceptableFile, addDays, addMonths, anchorArrowStyles, anchorStyles, buildMonthGrid, clampDecimal, clearAnchorName, compareDecimal, createAnnouncer, createListboxNavigation, createPressRepeat, dayOfWeek, daysInMonth, decimalScale, discreteOverlayTransition, evaluateExpression, focusableElements, formatDate, formatMonthHeading, formatNumber, formatTime, fromScaled, getFileExtension, inclusiveDayCount, isCanonicalDecimal, isDivider, isToggleOpen, isValidDate, isoDate, joinDateTime, listboxPopupAttr, listboxPopupStyles, localeDatePlaceholder, localeDefaultHour12, localeFieldOrder, localeMonthNames, localeNumberParts, localeWeekStart, losesPrecision, monthOf, motionSafe, newAnchorName, newListboxAnchor, normalizeDecimal, parseDateText, parseNumber, parseTimeText, promoteListboxPopup, rawNumberText, resolveElement, resolveFocusTarget, resolveNumberFormat, restoreOverlayFocus, roundDecimal, setAnchorName, settleNumber, shiftDecimal, speakNumber, splitDateTime, spotlightStyles, stepDecimal, supportsAnchoredPopup, timeSlots, toAsciiDigits, toDecimal, toNumber, toScaled, todayIso, transformOriginFor, uniqueId, useTimer, visuallyHidden, weekdayNames };
+export { BodyRenderDirective, ConfirmationDialogComponent, DRAWER_PANEL, DragAndDropDirective, FOCUSABLE_SELECTOR, ListboxNavigation, LocalStorageService, NotificationService, NotificationsComponent, RippleDirective, TRANSFORM_ORIGINS, ThemeService, UNI_FORMS, UNI_LAYOUT, UNI_THEMES, UniAlertComponent, UniAppBarComponent, UniAvatarComponent, UniAvatarGroupComponent, UniBackgroundComponent, UniBadgeComponent, UniBaseDatasource, UniBoxDirective, UniBreadcrumbComponent, UniButtonComponent, UniButtonGroupComponent, UniCalendarComponent, UniCalloutComponent, UniCardComponent, UniCardContentComponent, UniCardHeaderComponent, UniCenterDirective, UniCheckboxComponent, UniComboboxComponent, UniDataSearchComponent, UniDataTableComponent, UniDateInputComponent, UniDateTimeInputComponent, UniDebounceInputComponent, UniDialogButtonsComponent, UniDialogComponent, UniDialogHeaderComponent, UniDividerComponent, UniDrawerButtonsComponent, UniDrawerComponent, UniDrawerHeaderComponent, UniDropdownComponent, UniExpandAreaComponent, UniExpandComponent, UniExpandToggleComponent, UniFileDropZoneComponent, UniGridAreaDirective, UniGridDirective, UniIconButtonComponent, UniIconComponent, UniInputBoxComponent, UniInputComponent, UniJsonViewComponent, UniMenuComponent, UniMultiSelectComponent, UniMultiSelectDropdownComponent, UniNotificationBadgeComponent, UniNumberInputComponent, UniNumberRangeInputComponent, UniPaginatorComponent, UniPopoverComponent, UniProgressBarComponent, UniProgressGaugeComponent, UniQuantityStepperComponent, UniRadioComponent, UniRecordDatasource, UniRowDirective, UniScrollAreaComponent, UniSearchInputComponent, UniSelectComponent, UniServerSideDatasource, UniSkeletonComponent, UniSliderComponent, UniSnackbarComponent, UniSortHeaderComponent, UniStackDirective, UniStatComponent, UniSymbolComponent, UniTabComponent, UniTabsComponent, UniTagComponent, UniTagInputComponent, UniTextDirective, UniTextareaComponent, UniThemeBuilderComponent, UniThemeSwitchComponent, UniTimeInputComponent, UniToggleComponent, UniTooltipComponent, UniTourComponent, UniWrapDirective, acceptableFile, addDays, addMonths, anchorArrowStyles, anchorStyles, buildMonthGrid, clampDecimal, clearAnchorName, compareDecimal, createAnnouncer, createListboxNavigation, createPressRepeat, dayOfWeek, daysInMonth, decimalScale, discreteOverlayTransition, evaluateExpression, focusableElements, formatDate, formatMonthHeading, formatNumber, formatTime, fromScaled, getFileExtension, inclusiveDayCount, isCanonicalDecimal, isDivider, isToggleOpen, isValidDate, isoDate, joinDateTime, listboxPopupAttr, listboxPopupStyles, localeDatePlaceholder, localeDefaultHour12, localeFieldOrder, localeMonthNames, localeNumberParts, localeWeekStart, losesPrecision, monthOf, motionSafe, newAnchorName, newListboxAnchor, normalizeDecimal, parseDateText, parseNumber, parseTimeText, promoteListboxPopup, rawNumberText, resolveElement, resolveFocusTarget, resolveNumberFormat, restoreOverlayFocus, roundDecimal, setAnchorName, settleNumber, shiftDecimal, speakNumber, splitDateTime, spotlightStyles, stepDecimal, supportsAnchoredPopup, timeSlots, toAsciiDigits, toDecimal, toNumber, toScaled, todayIso, transformOriginFor, uniqueId, useTimer, visuallyHidden, weekdayNames };
 //# sourceMappingURL=uni-design-system-uni-angular.mjs.map