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

package/types/uni-design-system-uni-angular.d.ts

@@ -25,9 +25,23 @@ declare function resolveFocusTarget(element: HTMLElement): HTMLElement;
 /**
  * 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.
  */
 declare const visuallyHidden: {
-    readonly position: "absolute";
+    readonly position: "fixed";
     readonly width: 1;
     readonly height: 1;
     readonly padding: 0;
@@ -539,6 +553,15 @@ interface PressRepeatConfig {
     onRelease?: (repeated: boolean) => void;
     /** Consulted on press; a disabled button must not start a run. */
     disabled?: () => boolean;
+    /**
+     * Put focus where it belongs for this control — normally its text field, the
+     * way a native spinner does. Called on press, because taking pointer capture
+     * means preventing the default, which would otherwise leave focus nowhere.
+     *
+     * Receives the pressed button, as a fallback for controls with no field to
+     * focus.
+     */
+    focus?: (button: HTMLElement | null) => void;
     /**
      * When this returns `false`, a press steps exactly once and the repeat timer
      * is never armed — `onRelease` still fires, with `repeated: false`. Lets a
@@ -985,8 +1008,8 @@ declare class ThemeService {
     readonly theme: Signal<UniTheme>;
     /** Selectable themes, derived from the registry — reactive to registration. */
     readonly themeOptions: Signal<Options<string>>;
-    components: Signal<Partial<Record<ComponentName, ComponentTheme<object>>>>;
-    component: <T>(componentName: ComponentName) => Signal<ComponentTheme<T>>;
+    components: Signal<Partial<Record<ComponentName, ComponentTheme<object, object>>>>;
+    component: <T, V = object>(componentName: ComponentName) => Signal<ComponentTheme<T, V>>;
     colors: Signal<Partial<Record<string, string>>>;
     typeFaces: Signal<Record<string, _uni_design_system_uni_core.TypeFaceDefinition>>;
     spacing: Signal<_uni_design_system_uni_core.Spacing>;
@@ -1045,6 +1068,28 @@ declare class ThemeService {
     componentStyle: (componentName: ComponentName, variant: Variant, size: Size) => Signal<{
         [x: string]: string | number | _uni_design_system_uni_core.StyleExpression;
     }>;
+    /**
+     * 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: <V>(componentName: ComponentName, variant: Variant) => Signal<V | undefined>;
+    private readonly warnedVariants;
+    /**
+     * 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.
+     */
+    private warnUnthemedVariant;
     /**
      * 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
@@ -1138,7 +1183,7 @@ declare class ThemeService {
     gap(gap: OptionalSize): NullableStyleExpression;
     zIndex(element: ZIndexableElements | undefined): NullableStyleExpression;
     borderColor(borderColor: ColorToken): NullableStyleExpression;
-    getComponentTheme<T>(componentName: ComponentName): Signal<ComponentTheme<T>>;
+    getComponentTheme<T, V = object>(componentName: ComponentName): Signal<ComponentTheme<T, V>>;
     getComponentOptions: <T>(componentName: ComponentName) => _angular_core.WritableSignal<T>;
     componentOptions: (componentName: ComponentName) => Signal<unknown>;
     style(prop: string, value: string | number | undefined): NullableStyleExpression;
@@ -1154,20 +1199,44 @@ declare class ThemeService {
 
 declare const UNI_THEMES: InjectionToken<Record<string, UniTheme>>;
 
-declare class BaseComponent<T = unknown> {
+declare class BaseComponent<T = unknown, V = unknown> {
     protected componentName: ComponentName;
     theme: ThemeService;
-    variant: _angular_core.InputSignal<Variant>;
+    variant: _angular_core.InputSignal<keyof _uni_design_system_uni_core.UniVariantRegistry>;
     size: _angular_core.InputSignal<Size>;
-    componentTheme: _angular_core.Signal<_uni_design_system_uni_core.ComponentTheme<T>>;
+    componentTheme: _angular_core.Signal<_uni_design_system_uni_core.ComponentTheme<T, V>>;
+    /**
+     * 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: _angular_core.Signal<V>;
     componentOptions: _angular_core.Signal<T>;
     style: _angular_core.Signal<{
         [x: string]: string | number | _uni_design_system_uni_core.StyleExpression;
     }>;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<BaseComponent<any>, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<BaseComponent<any>, "ng-component", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<BaseComponent<any, any>, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<BaseComponent<any, any>, "ng-component", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
+/**
+ * What a variant means for a checkbox, as theme data the component reads.
+ *
+ * The accent lands in five places — the box outline, the checked border, the
+ * checked and indeterminate fills, and the focus ring — so it cannot be a
+ * single applied style without naming interior classes in the theme. Naming
+ * the role instead keeps `.checkbox-box` and `.checkbox-check` private.
+ */
+interface UniCheckboxVariant {
+    /** Box outline, checked fill and focus ring. */
+    accent: ColorKey;
+    /**
+     * The tick and dash, which draw on top of the accent fill. Defaults to the
+     * accent's paired `on-` token; set it where no such pair exists.
+     */
+    onAccent?: ColorKey;
+}
 interface UniCheckboxOptions {
     size?: string | number;
     borderRadius?: string | number;
@@ -1176,14 +1245,21 @@ interface UniCheckboxOptions {
     focusRingGap?: string | number;
 }
 
-declare class UniCheckboxComponent extends BaseComponent<UniCheckboxOptions> implements FormCheckboxControl {
+declare class UniCheckboxComponent extends BaseComponent<UniCheckboxOptions, UniCheckboxVariant> implements FormCheckboxControl {
     readonly checked: _angular_core.ModelSignal<boolean>;
     readonly disabled: _angular_core.InputSignal<boolean>;
     readonly touched: _angular_core.ModelSignal<boolean>;
     readonly invalid: _angular_core.InputSignal<boolean>;
     readonly dirty: _angular_core.InputSignal<boolean>;
-    /** Synced from required() validators by the Signal Forms [field] directive. */
+    /** Synced from required() validators by the Signal Forms [formField] directive. */
     readonly required: _angular_core.InputSignal<boolean>;
+    /**
+     * 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".
+     */
+    readonly checkedColor: _angular_core.InputSignal<string>;
     /**
      * Id(s) of external element(s) describing this control — typically your
      * app-rendered error message — exposed as aria-describedby.
@@ -1200,11 +1276,22 @@ declare class UniCheckboxComponent extends BaseComponent<UniCheckboxOptions> imp
     handleChange(event: Event): void;
     protected readonly checkboxLabel: _angular_core.Signal<string>;
     protected readonly checkboxInput: _angular_core.Signal<string>;
-    getThemeColor(token: ColorToken): string;
-    /** The content color paired with a variant fill (on-primary, on-warn, …). */
-    getOnColor(variant: ColorToken): string;
+    /**
+     * 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.
+     */
+    private readonly accent;
+    protected readonly boxColor: _angular_core.Signal<string>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<UniCheckboxComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<UniCheckboxComponent, "uni-checkbox", never, { "checked": { "alias": "checked"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "dirty": { "alias": "dirty"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "ariaDescribedBy": { "alias": "ariaDescribedBy"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "indeterminate": { "alias": "indeterminate"; "required": false; "isSignal": true; }; }, { "checked": "checkedChange"; "touched": "touchedChange"; "indeterminate": "indeterminateChange"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<UniCheckboxComponent, "uni-checkbox", never, { "checked": { "alias": "checked"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "dirty": { "alias": "dirty"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "checkedColor": { "alias": "checkedColor"; "required": false; "isSignal": true; }; "ariaDescribedBy": { "alias": "ariaDescribedBy"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "indeterminate": { "alias": "indeterminate"; "required": false; "isSignal": true; }; }, { "checked": "checkedChange"; "touched": "touchedChange"; "indeterminate": "indeterminateChange"; }, never, never, true, never>;
 }
 
 /** A commit was refused (no match); the field reverted to the committed label. */
@@ -1648,7 +1735,7 @@ declare class UniInputComponent implements FormValueControl<string> {
     readonly touched: _angular_core.ModelSignal<boolean>;
     readonly invalid: _angular_core.InputSignal<boolean>;
     readonly dirty: _angular_core.InputSignal<boolean>;
-    /** Synced from required() validators by the Signal Forms [field] directive. */
+    /** Synced from required() validators by the Signal Forms [formField] directive. */
     readonly required: _angular_core.InputSignal<boolean>;
     /**
      * Id(s) of external element(s) describing this control — typically your
@@ -1811,7 +1898,7 @@ declare class UniGridDirective extends UniBoxDirective {
     templateColumns: _angular_core.InputSignal<string>;
     templateRows: _angular_core.InputSignal<string>;
     outline: _angular_core.InputSignal<Thickness>;
-    outlineColor: _angular_core.InputSignal<Variant>;
+    outlineColor: _angular_core.InputSignal<keyof _uni_design_system_uni_core.UniVariantRegistry>;
     protected readonly gridClassName: _angular_core.Signal<string>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<UniGridDirective, never>;
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<UniGridDirective, "[uni-grid-layout], [grid-layout]", never, { "display": { "alias": "display"; "required": false; "isSignal": true; }; "templateAreas": { "alias": "templateAreas"; "required": false; "isSignal": true; }; "templateColumns": { "alias": "templateColumns"; "required": false; "isSignal": true; }; "templateRows": { "alias": "templateRows"; "required": false; "isSignal": true; }; "outline": { "alias": "outline"; "required": false; "isSignal": true; }; "outlineColor": { "alias": "outlineColor"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
@@ -1871,7 +1958,7 @@ declare class UniMultiSelectDropdownComponent<T = unknown> extends BaseComponent
     readonly touched: _angular_core.ModelSignal<boolean>;
     readonly invalid: _angular_core.InputSignal<boolean>;
     readonly dirty: _angular_core.InputSignal<boolean>;
-    /** Synced from required() validators by the Signal Forms [field] directive. */
+    /** Synced from required() validators by the Signal Forms [formField] directive. */
     readonly required: _angular_core.InputSignal<boolean>;
     /**
      * Id(s) of external element(s) describing this control — typically your
@@ -1966,6 +2053,14 @@ interface UniRadioOption {
      */
     disabled?: boolean;
 }
+/**
+ * What a variant means for a radio, as theme data the component reads. The
+ * accent lands on the dot, the hover and checked rings, and the focus ring.
+ */
+interface UniRadioVariant {
+    /** Dot fill, checked/hover ring and focus ring. */
+    accent: ColorKey;
+}
 interface UniRadioOptions {
     /**
      * The size of the radio buttons
@@ -1980,14 +2075,20 @@ interface UniRadioOptions {
     motion?: Motion;
 }
 
-declare class UniRadioComponent extends BaseComponent<UniRadioOptions> implements FormValueControl<string> {
+declare class UniRadioComponent extends BaseComponent<UniRadioOptions, UniRadioVariant> implements FormValueControl<string> {
     readonly value: _angular_core.ModelSignal<string>;
     readonly disabled: _angular_core.InputSignal<boolean>;
     readonly touched: _angular_core.ModelSignal<boolean>;
     readonly invalid: _angular_core.InputSignal<boolean>;
     readonly dirty: _angular_core.InputSignal<boolean>;
-    /** Synced from required() validators by the Signal Forms [field] directive. */
+    /** Synced from required() validators by the Signal Forms [formField] directive. */
     readonly required: _angular_core.InputSignal<boolean>;
+    /**
+     * 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`.
+     */
+    readonly checkedColor: _angular_core.InputSignal<string>;
     /**
      * Id(s) of external element(s) describing this control — typically your
      * app-rendered error message — exposed as aria-describedby.
@@ -2005,9 +2106,20 @@ declare class UniRadioComponent extends BaseComponent<UniRadioOptions> implement
     protected readonly radioOptionClass: _angular_core.Signal<string>;
     protected readonly radioInputClass: _angular_core.Signal<string>;
     handleRadioChange(optionValue: string): void;
-    getThemeColor(token: ColorToken): string;
+    /**
+     * 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.
+     */
+    private color;
+    private readonly accent;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<UniRadioComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<UniRadioComponent, "uni-radio", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "dirty": { "alias": "dirty"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "ariaDescribedBy": { "alias": "ariaDescribedBy"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "touched": "touchedChange"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<UniRadioComponent, "uni-radio", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "dirty": { "alias": "dirty"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "checkedColor": { "alias": "checkedColor"; "required": false; "isSignal": true; }; "ariaDescribedBy": { "alias": "ariaDescribedBy"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "touched": "touchedChange"; }, never, never, true, never>;
 }
 
 /**
@@ -2124,7 +2236,7 @@ declare class UniSelectComponent<T> implements FormValueControl<T | null> {
     readonly touched: _angular_core.ModelSignal<boolean>;
     readonly invalid: _angular_core.InputSignal<boolean>;
     readonly dirty: _angular_core.InputSignal<boolean>;
-    /** Synced from required() validators by the Signal Forms [field] directive. */
+    /** Synced from required() validators by the Signal Forms [formField] directive. */
     readonly required: _angular_core.InputSignal<boolean>;
     /**
      * Id(s) of external element(s) describing this control — typically your
@@ -2267,7 +2379,7 @@ declare class UniSliderComponent extends BaseComponent<UniSliderOptions> impleme
     formatValue: _angular_core.InputSignal<(value: number) => string>;
     /** Enforced distance between the two ends, in range mode. */
     minGap: _angular_core.InputSignal<number>;
-    variant: _angular_core.InputSignal<Variant>;
+    variant: _angular_core.InputSignal<keyof _uni_design_system_uni_core.UniVariantRegistry>;
     /** Continuous, during a drag or a held key. Bind this for a live preview. */
     sliding: _angular_core.OutputEmitterRef<number | UniNumberRange>;
     /**
@@ -2805,11 +2917,11 @@ declare class UniNumberRangeInputComponent extends BaseComponent<UniNumberRangeI
 /**
  * Theme-level options for `uni-quantity-stepper`.
  *
- * Unlike the other numeric controls this does **not** inherit the shared
- * `input` chrome — it is not a field, has no label and no error border — so it
- * carries its own container tokens. They default to the same values `input`
- * uses, so a cart stepper and a form field look related out of the box, and a
- * theme can part them without editing every field.
+ * It is not a field — no label, no error border, no `uni-input-box` — but it
+ * sits beside fields in carts and table rows, so its container **defaults to
+ * the shared `input` chrome**: colour, border, radius and the focus indicator
+ * all follow whatever a theme does to its fields. The options below are
+ * per-component overrides, for parting them deliberately.
  *
  * Height comes from the `sizes` block (`sm` 24 / `md` 32 / `lg` 40) rather than
  * an option, and it is the *outer* height, so an `md` stepper lines up with a
@@ -2818,8 +2930,11 @@ declare class UniNumberRangeInputComponent extends BaseComponent<UniNumberRangeI
  * and is therefore the dense desktop option.
  */
 interface UniQuantityStepperOptions {
+    /** Container fill. Unset — the default — takes `input`'s. */
     color?: ContainerColorToken;
+    /** Frame, and the rules either side of the value. Unset takes `input`'s. */
     border?: Border;
+    /** Corner radius. Unset takes `input`'s. */
     borderRadius?: Radius;
     /**
      * Colour override for the rules between the buttons and the value. Unset —
@@ -2834,7 +2949,12 @@ interface UniQuantityStepperOptions {
     deleteIcon?: IconName;
     /** `font-variant-numeric: tabular-nums`, so held stepping does not jitter. */
     tabularNumerals?: boolean;
-    /** Minimum width of the value, e.g. `'3ch'`. Stops a step reflowing the row. */
+    /**
+     * Floor for the value cell, e.g. `'3ch'` — headroom so stepping 9 → 10 does
+     * not reflow the row. Beyond it the cell grows with the digits, because the
+     * input is sized from its content rather than the browser's 20-character
+     * default.
+     */
     valueWidth?: string | number;
 }
 
@@ -2929,7 +3049,12 @@ declare class UniQuantityStepperComponent extends BaseComponent<UniQuantityStepp
     protected readonly decrement: _uni_design_system_uni_angular.PressRepeat;
     protected onKeydown(event: KeyboardEvent): void;
     protected onBlur(): void;
-    protected focusField(): void;
+    /**
+     * 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.
+     */
+    protected focusField(fallback?: HTMLElement | null): void;
     protected readonly className: _angular_core.Signal<string>;
     /** Overall height, from the theme's `sizes` block. */
     private readonly height;
@@ -2943,8 +3068,30 @@ declare class UniQuantityStepperComponent extends BaseComponent<UniQuantityStepp
     protected readonly rootClass: _angular_core.Signal<string>;
     /** Square at the field height, so the pointer target is legal at every size. */
     protected readonly buttonClass: _angular_core.Signal<string>;
+    /**
+     * 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.
+     */
+    private readonly containerColor;
+    private readonly containerBorder;
+    private readonly containerRadius;
     /** The rules either side of the value, matching the frame around it. */
     private readonly dividerBorder;
+    /**
+     * 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`.
+     */
+    protected readonly valueSize: _angular_core.Signal<number>;
     private valueBase;
     protected readonly inputClass: _angular_core.Signal<string>;
     /** Read-only presentation: centred text on the same grid as the input. */
@@ -3025,7 +3172,7 @@ declare class UniTagInputComponent extends BaseComponent<UniTagInputOptions> imp
     max: _angular_core.InputSignal<number>;
     validate: _angular_core.InputSignal<(raw: string) => boolean>;
     parse: _angular_core.InputSignal<(pasted: string) => string[]>;
-    tagVariant: _angular_core.InputSignal<Variant>;
+    tagVariant: _angular_core.InputSignal<keyof _uni_design_system_uni_core.UniVariantRegistry>;
     tagTone: _angular_core.InputSignal<TagTone>;
     tagSize: _angular_core.InputSignal<Size>;
     suggestions: _angular_core.InputSignal<UniTagSuggestion[]>;
@@ -3141,7 +3288,7 @@ declare class UniTextareaComponent implements FormValueControl<string> {
     readonly touched: _angular_core.ModelSignal<boolean>;
     readonly invalid: _angular_core.InputSignal<boolean>;
     readonly dirty: _angular_core.InputSignal<boolean>;
-    /** Synced from required() validators by the Signal Forms [field] directive. */
+    /** Synced from required() validators by the Signal Forms [formField] directive. */
     readonly required: _angular_core.InputSignal<boolean>;
     /**
      * Id(s) of external element(s) describing this control — typically your
@@ -3280,24 +3427,45 @@ declare class UniTimeInputComponent extends BaseComponent<UniTimeInputOptions> i
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<UniTimeInputComponent, "uni-time-input, TimeInput", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "dirty": { "alias": "dirty"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "ariaDescribedBy": { "alias": "ariaDescribedBy"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": true; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "minuteStep": { "alias": "minuteStep"; "required": false; "isSignal": true; }; "minTime": { "alias": "minTime"; "required": false; "isSignal": true; }; "maxTime": { "alias": "maxTime"; "required": false; "isSignal": true; }; "slots": { "alias": "slots"; "required": false; "isSignal": true; }; "hour12": { "alias": "hour12"; "required": false; "isSignal": true; }; "locale": { "alias": "locale"; "required": false; "isSignal": true; }; "commitOnBlur": { "alias": "commitOnBlur"; "required": false; "isSignal": true; }; "embedded": { "alias": "embedded"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "touched": "touchedChange"; "rejected": "rejected"; }, never, never, true, never>;
 }
 
+/**
+ * What a variant means for a toggle, as theme data the component reads. The
+ * accent fills the checked track and colours the focus ring.
+ */
+interface UniToggleVariant {
+    /** Checked track fill and focus ring. */
+    accent: ColorKey;
+}
 interface UniToggleOptions {
     /**
-     * The size of the toggle switch
+     * @deprecated Track height in px, from before the toggle had a `sizes` block.
+     * Still honoured — and still wins when set, since a theme carrying it opted
+     * into the old derived-ratio geometry (width = 2x, knob = 0.8x) — but it
+     * applies to every instance regardless of the `size` input. Prefer the
+     * theme's `toggle.sizes` block, which gives each size token its own
+     * `width` / `height` / `padding`.
      */
     size?: number;
     /** Off-state track color token. */
     trackColor?: ColorKey;
     /** Knob color token. */
     knobColor?: ColorKey;
+    /**
+     * Checked-state track color token. Falls back to the instance's `variant`,
+     * which is where this color lived before it had a theme home. The matching
+     * `checkedColor` input overrides it per instance.
+     */
+    checkedColor?: ColorKey;
+    /** Motion token for the knob slide and track color change. */
+    motion?: Motion;
 }
 
-declare class UniToggleComponent extends BaseComponent<UniToggleOptions> implements FormCheckboxControl {
+declare class UniToggleComponent extends BaseComponent<UniToggleOptions, UniToggleVariant> implements FormCheckboxControl {
     readonly checked: _angular_core.ModelSignal<boolean>;
     readonly disabled: _angular_core.InputSignal<boolean>;
     readonly touched: _angular_core.ModelSignal<boolean>;
     readonly invalid: _angular_core.InputSignal<boolean>;
     readonly dirty: _angular_core.InputSignal<boolean>;
-    /** Synced from required() validators by the Signal Forms [field] directive. */
+    /** Synced from required() validators by the Signal Forms [formField] directive. */
     readonly required: _angular_core.InputSignal<boolean>;
     /**
      * Id(s) of external element(s) describing this control — typically your
@@ -3305,15 +3473,47 @@ declare class UniToggleComponent extends BaseComponent<UniToggleOptions> impleme
      */
     readonly ariaDescribedBy: _angular_core.InputSignal<string>;
     readonly label: _angular_core.InputSignal<string>;
+    /**
+     * 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.
+     */
+    readonly checkedColor: _angular_core.InputSignal<string>;
     protected readonly showError: _angular_core.Signal<boolean>;
     markAsTouched(): void;
     handleChange(event: Event): void;
+    /**
+     * 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.
+     */
     private readonly metrics;
+    /**
+     * 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.
+     */
+    private readonly accent;
+    /** Knob slide and track color change, as a motion token — never `all`. */
+    private readonly transitions;
     protected readonly toggleLabel: _angular_core.Signal<string>;
     protected readonly toggleInput: _angular_core.Signal<string>;
-    getThemeColor(token: ColorToken): string;
+    /** A chrome colour by token — no silent fallback; see `uni-radio`. */
+    private color;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<UniToggleComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<UniToggleComponent, "uni-toggle", never, { "checked": { "alias": "checked"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "dirty": { "alias": "dirty"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "ariaDescribedBy": { "alias": "ariaDescribedBy"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; }, { "checked": "checkedChange"; "touched": "touchedChange"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<UniToggleComponent, "uni-toggle", never, { "checked": { "alias": "checked"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "dirty": { "alias": "dirty"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "ariaDescribedBy": { "alias": "ariaDescribedBy"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "checkedColor": { "alias": "checkedColor"; "required": false; "isSignal": true; }; }, { "checked": "checkedChange"; "touched": "touchedChange"; }, never, never, true, never>;
 }
 
 /**
@@ -3436,7 +3636,7 @@ interface UniBadgeOptions {
 }
 
 declare class UniBadgeComponent extends BaseComponent<UniBadgeOptions> {
-    color: _angular_core.InputSignal<Variant>;
+    color: _angular_core.InputSignal<keyof _uni_design_system_uni_core.UniVariantRegistry>;
     useVariant: _angular_core.InputSignal<boolean>;
     width: _angular_core.InputSignal<number>;
     protected readonly className: _angular_core.Signal<string>;
@@ -3673,7 +3873,7 @@ declare class UniCalendarComponent extends BaseComponent<UniCalendarOptions> imp
     protected readonly outsideDayClass: _angular_core.Signal<string>;
     protected readonly dotsClass: _angular_core.Signal<string>;
     /** One dot class per marker variant present, resolved from the palette. */
-    protected readonly dotClasses: _angular_core.Signal<Map<Variant, string>>;
+    protected readonly dotClasses: _angular_core.Signal<Map<keyof _uni_design_system_uni_core.UniVariantRegistry, string>>;
     protected dotClassFor(variant: Variant | undefined): string;
     protected readonly showOutside: _angular_core.Signal<boolean>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<UniCalendarComponent, never>;
@@ -3975,16 +4175,16 @@ interface UniDialogButtonsOptions {
 declare class UniDialogButtonsComponent extends BaseComponent<UniDialogButtonsOptions> {
     private dialog;
     confirmButtonText: _angular_core.InputSignal<string>;
-    confirmButtonVariant: _angular_core.InputSignal<Variant>;
+    confirmButtonVariant: _angular_core.InputSignal<keyof _uni_design_system_uni_core.UniVariantRegistry>;
     cancelButtonText: _angular_core.InputSignal<string>;
-    cancelButtonVariant: _angular_core.InputSignal<Variant>;
+    cancelButtonVariant: _angular_core.InputSignal<keyof _uni_design_system_uni_core.UniVariantRegistry>;
     disableConfirm: _angular_core.InputSignal<boolean>;
     padding: _angular_core.InputSignal<NullableSize>;
     paddingBottom: _angular_core.InputSignal<NullableSize>;
     justifyContent: _angular_core.InputSignal<JustifyContent>;
     confirmed: _angular_core.OutputEmitterRef<void>;
-    protected confirmVariant: _angular_core.Signal<Variant>;
-    protected cancelVariant: _angular_core.Signal<Variant>;
+    protected confirmVariant: _angular_core.Signal<keyof _uni_design_system_uni_core.UniVariantRegistry>;
+    protected cancelVariant: _angular_core.Signal<keyof _uni_design_system_uni_core.UniVariantRegistry>;
     protected paddingValue: _angular_core.Signal<NullableSize>;
     protected paddingBottomValue: _angular_core.Signal<NullableSize>;
     protected justifyContentValue: _angular_core.Signal<JustifyContent>;
@@ -4078,10 +4278,147 @@ declare class UniDividerComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<UniDividerComponent, "uni-divider", never, { "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "border": { "alias": "border"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
+/**
+ * Theme-level options for the drawer's pinned footer action row. Inputs on the
+ * component override these per instance; the theme sets the default posture.
+ *
+ * Mirrors `UniDialogButtonsOptions` knob for knob, with a panel's posture
+ * rather than a dialog's: trailing actions instead of centered ones, and a
+ * divider against the scrolling body above.
+ */
+interface UniDrawerButtonsOptions {
+    /** Space between the action buttons, as a spacing token. */
+    gap?: NullableSize;
+    /** Padding around the row, as a spacing token. */
+    padding?: NullableSize;
+    justifyContent?: JustifyContent;
+    confirmButtonVariant?: Variant;
+    cancelButtonVariant?: Variant;
+    /** Size passed to both buttons. */
+    buttonSize?: Size;
+    /** Rule separating the footer from the scrolling body, as a border primitive. */
+    divider?: Border;
+    /** When true the two actions share the full row width as equal halves. */
+    stretch?: boolean;
+    /** Render cancel before confirm (confirm ends up on the trailing edge). */
+    reverseOrder?: boolean;
+}
+
+/**
+ * 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.
+ */
+declare class UniDrawerButtonsComponent extends BaseComponent<UniDrawerButtonsOptions> {
+    private readonly drawer;
+    confirmButtonText: _angular_core.InputSignal<string>;
+    confirmButtonVariant: _angular_core.InputSignal<keyof _uni_design_system_uni_core.UniVariantRegistry>;
+    cancelButtonText: _angular_core.InputSignal<string>;
+    cancelButtonVariant: _angular_core.InputSignal<keyof _uni_design_system_uni_core.UniVariantRegistry>;
+    disableConfirm: _angular_core.InputSignal<boolean>;
+    padding: _angular_core.InputSignal<NullableSize>;
+    justifyContent: _angular_core.InputSignal<JustifyContent>;
+    confirmed: _angular_core.OutputEmitterRef<void>;
+    protected confirmVariant: _angular_core.Signal<keyof _uni_design_system_uni_core.UniVariantRegistry>;
+    protected cancelVariant: _angular_core.Signal<keyof _uni_design_system_uni_core.UniVariantRegistry>;
+    protected paddingValue: _angular_core.Signal<NullableSize>;
+    protected justifyContentValue: _angular_core.Signal<JustifyContent>;
+    protected gapValue: _angular_core.Signal<NullableSize>;
+    protected buttonSize: _angular_core.Signal<Size>;
+    /** A pinned row, sized by its content rather than by the body beside it. */
+    protected readonly hostClass: _angular_core.Signal<string>;
+    protected readonly className: _angular_core.Signal<string>;
+    /**
+     * Cancel routes through the drawer's own close decision, so a panel with
+     * unsaved changes can veto it exactly as it vetoes Escape.
+     */
+    protected closeDrawer(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<UniDrawerButtonsComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<UniDrawerButtonsComponent, "[uni-drawer-buttons], [drawer-buttons]", never, { "confirmButtonText": { "alias": "confirmButtonText"; "required": false; "isSignal": true; }; "confirmButtonVariant": { "alias": "confirmButtonVariant"; "required": false; "isSignal": true; }; "cancelButtonText": { "alias": "cancelButtonText"; "required": false; "isSignal": true; }; "cancelButtonVariant": { "alias": "cancelButtonVariant"; "required": false; "isSignal": true; }; "disableConfirm": { "alias": "disableConfirm"; "required": false; "isSignal": true; }; "padding": { "alias": "padding"; "required": false; "isSignal": true; }; "justifyContent": { "alias": "justifyContent"; "required": false; "isSignal": true; }; }, { "confirmed": "confirmed"; }, never, never, true, never>;
+}
+
+/**
+ * Theme-level options for the drawer's pinned header row. Deliberately a
+ * separate entry from `dialogHeader`: the two rows look alike but read
+ * differently — a panel headline labels a region beside the page, where a
+ * dialog's titles an interruption — so they want different defaults.
+ */
+interface UniDrawerHeaderOptions {
+    /** Row surface. Undefined inherits the drawer's own surface. */
+    color?: ContainerColorToken;
+    /** Fixed row height in px. */
+    height?: number;
+    /** Padding around the row, as a spacing token. */
+    padding?: NullableSize;
+    textRole?: TextRole;
+    textColor?: ContentColorToken;
+    textAlign?: 'left' | 'center' | 'right';
+    /** Rule separating the header from the scrolling body, as a border primitive. */
+    divider?: Border;
+    closeButtonIcon?: IconName;
+    closeButtonSymbol?: string;
+    closeButtonSize?: Size;
+}
+
+/**
+ * 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.
+ */
+declare class UniDrawerHeaderComponent extends BaseComponent<UniDrawerHeaderOptions> {
+    private readonly drawer;
+    /** Title text. Falls back to the drawer's `headline`; projected content wins over both. */
+    headline: _angular_core.InputSignal<string>;
+    /** Attached to the title so the drawer is labelled by it. */
+    protected readonly titleId: string;
+    protected readonly title: _angular_core.Signal<string>;
+    protected readonly showClose: _angular_core.Signal<boolean>;
+    constructor();
+    /** Never a bare close: the drawer decides, so a veto is honoured here too. */
+    protected closeDrawer(): void;
+    protected readonly className: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<UniDrawerHeaderComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<UniDrawerHeaderComponent, "[uni-drawer-header]", never, { "headline": { "alias": "headline"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
 /** How the drawer coexists with page content. */
 type DrawerMode = 'side' | 'over';
 /** Which edge the drawer attaches to (logical: start = left in LTR). */
 type DrawerPosition = 'start' | 'end';
+/** Surface treatment of the panel behind its content. */
+type DrawerBackground = 'solid' | 'glass' | 'gradient';
+/** Why the drawer is asking to close. */
+type DrawerCloseReason = 'close-button' | 'escape' | 'backdrop';
+/**
+ * Emitted by `closeRequest` before the drawer closes. The drawer is *asking*;
+ * with `disableAutoClose` set it will not act on its own, leaving the consumer
+ * free to run an async confirmation and set `open` when it resolves.
+ */
+interface UniDrawerCloseRequest {
+    reason: DrawerCloseReason;
+}
+/**
+ * The slice of the drawer its header and footer rows need.
+ *
+ * A token rather than the component class on purpose: the drawer renders a
+ * `[uni-drawer-header]` itself when given a `headline`, so importing the
+ * component class in both directions would be a cycle.
+ */
+interface UniDrawerPanel {
+    readonly headline: Signal<string | undefined>;
+    readonly defaultCloseButton: Signal<boolean>;
+    readonly titleId: string;
+    readonly hasHeader: {
+        set(value: boolean): void;
+    };
+    requestClose(reason: DrawerCloseReason): void;
+}
+declare const DRAWER_PANEL: InjectionToken<UniDrawerPanel>;
 /** Theme-level options for `uni-drawer`, resolved by token name. */
 interface UniDrawerOptions {
     /** Panel surface color token (with its paired on-color). */
@@ -4090,16 +4427,27 @@ interface UniDrawerOptions {
     width?: number;
     /** Edge rule separating a side drawer from content, as a border primitive. */
     divider?: Border;
-    /** Elevation shadow token for the overlay mode. */
+    /** Elevation shadow token. Overlay mode only — see `background`. */
     elevation?: Elevation;
-    /** Inner padding, as a spacing token. */
+    /**
+     * Inner padding of the *body* row, as a spacing token. The panel itself is
+     * unpadded so that header and footer rows can pin flush to its edges.
+     */
     padding?: OptionalSize;
-    /** Backdrop styling for the overlay mode. */
+    /** Backdrop styling for the overlay mode. Ignored when `scrim` is false. */
     backdrop?: StyleExpression;
+    /**
+     * Whether the overlay mode dims the page behind it. False leaves
+     * `::backdrop` transparent — the drawer still traps focus and is still
+     * modal, it simply does not darken what it covers.
+     */
+    scrim?: boolean;
+    /** Surface treatment of the panel. */
+    background?: DrawerBackground;
 }
 
 /**
- * Navigation drawer with two modes sharing one content slot:
+ * 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
@@ -4108,19 +4456,86 @@ interface UniDrawerOptions {
  *   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.
  */
 declare class UniDrawerComponent extends BaseComponent<UniDrawerOptions> {
     /** Two-way bindable open state: [(open)]. */
     readonly open: _angular_core.ModelSignal<boolean>;
     mode: _angular_core.InputSignal<DrawerMode>;
     position: _angular_core.InputSignal<DrawerPosition>;
-    /** Accessible name for the overlay mode's dialog. */
+    /**
+     * 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: _angular_core.InputSignal<string>;
-    protected readonly contentTemplate: _angular_core.Signal<TemplateRef<unknown>>;
+    /**
+     * 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: _angular_core.InputSignal<string>;
+    /** Whether the header row renders a close button. */
+    defaultCloseButton: _angular_core.InputSignal<boolean>;
+    /** Panel width in px, overriding the theme's `drawer.behavior.width`. */
+    width: _angular_core.InputSignal<number>;
+    /**
+     * 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: _angular_core.InputSignal<boolean>;
+    /**
+     * 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: _angular_core.InputSignal<string>;
+    /**
+     * 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: _angular_core.OutputEmitterRef<UniDrawerCloseRequest>;
+    /**
+     * 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: _angular_core.InputSignal<boolean>;
+    /** Set by a projected `[uni-drawer-header]` so it can pin flush to the top. */
+    readonly hasHeader: _angular_core.WritableSignal<boolean>;
+    /** Id referenced by aria-labelledby; the header row attaches it to its title. */
+    readonly titleId: string;
+    protected readonly labelledBy: _angular_core.Signal<string>;
+    protected readonly headerTemplate: _angular_core.Signal<TemplateRef<unknown>>;
+    protected readonly bodyTemplate: _angular_core.Signal<TemplateRef<unknown>>;
+    protected readonly footerTemplate: _angular_core.Signal<TemplateRef<unknown>>;
     private readonly overlay;
     constructor();
+    /**
+     * 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: DrawerCloseReason): void;
     protected onBackdropClick(event: Event): void;
     /** Route Escape through the animated close, keeping `open` in sync. */
     protected onCancel(event: Event): void;
@@ -4128,10 +4543,23 @@ declare class UniDrawerComponent extends BaseComponent<UniDrawerOptions> {
     private readonly edge;
     private readonly slideIn;
     private readonly slideOut;
+    /** Input wins over the theme option; the literal is the last-resort default. */
+    private readonly panelWidth;
+    private readonly showScrim;
+    /**
+     * 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.
+     */
+    private readonly surface;
+    /** The shared flex column: three rows, and never a scroll container itself. */
+    private readonly shell;
     protected readonly sideClass: _angular_core.Signal<string>;
     protected readonly overClass: _angular_core.Signal<string>;
+    /** The only scrolling row, and the only padded one. */
+    protected readonly bodyClass: _angular_core.Signal<string>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<UniDrawerComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<UniDrawerComponent, "uni-drawer", never, { "open": { "alias": "open"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "position": { "alias": "position"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, { "open": "openChange"; }, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<UniDrawerComponent, "uni-drawer", never, { "open": { "alias": "open"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "position": { "alias": "position"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "headline": { "alias": "headline"; "required": false; "isSignal": true; }; "defaultCloseButton": { "alias": "defaultCloseButton"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "scrim": { "alias": "scrim"; "required": false; "isSignal": true; }; "initialFocus": { "alias": "initialFocus"; "required": false; "isSignal": true; }; "disableAutoClose": { "alias": "disableAutoClose"; "required": false; "isSignal": true; }; }, { "open": "openChange"; "closeRequest": "closeRequest"; }, never, ["[uni-drawer-header]", "[uni-drawer-buttons], [drawer-buttons]", "*"], true, never>;
 }
 
 interface UniDropdownOptions {
@@ -4349,7 +4777,7 @@ declare class UniFileDropZoneComponent {
     get fileSelectorElement(): HTMLInputElement;
     height: _angular_core.InputSignal<string | number>;
     borderRadius: _angular_core.InputSignal<string>;
-    border: _angular_core.InputSignal<Variant>;
+    border: _angular_core.InputSignal<keyof _uni_design_system_uni_core.UniVariantRegistry>;
     padding: _angular_core.InputSignal<NullableSize>;
     useBrowseButton: _angular_core.InputSignal<boolean>;
     browseButtonText: _angular_core.InputSignal<string>;
@@ -4498,7 +4926,7 @@ declare class UniIconButtonComponent {
     private theme;
     config: _angular_core.Signal<_uni_design_system_uni_core.ComponentTheme<{
         borderRadius?: RadiiSize;
-    }>>;
+    }, object>>;
     /**
      * Accessible name for the button. Alternative to projecting text content
      * (`<button icon-button>Close</button>`); one of the two is required for
@@ -4507,7 +4935,7 @@ declare class UniIconButtonComponent {
     ariaLabel: _angular_core.InputSignal<string>;
     iconName: _angular_core.InputSignal<IconName>;
     symbolName: _angular_core.InputSignal<string>;
-    variant: _angular_core.InputSignal<Variant>;
+    variant: _angular_core.InputSignal<keyof _uni_design_system_uni_core.UniVariantRegistry>;
     size: _angular_core.InputSignal<Size>;
     disable: _angular_core.InputSignal<boolean>;
     loading: _angular_core.InputSignal<boolean>;
@@ -4641,7 +5069,7 @@ declare class UniNotificationBadgeComponent extends BaseComponent<UniNotificatio
     count: _angular_core.InputSignal<number>;
     maxCount: _angular_core.InputSignal<number>;
     badgeVariant: _angular_core.InputSignal<"dot" | "count" | "pill">;
-    color: _angular_core.InputSignal<Variant>;
+    color: _angular_core.InputSignal<keyof _uni_design_system_uni_core.UniVariantRegistry>;
     position: _angular_core.InputSignal<"top-right" | "top-left" | "bottom-right" | "bottom-left">;
     show: _angular_core.InputSignal<boolean>;
     /**
@@ -4986,7 +5414,7 @@ declare class UniScrollAreaComponent {
     paddingRight: _angular_core.InputSignal<OptionalSize>;
     paddingTop: _angular_core.InputSignal<OptionalSize>;
     paddingBottom: _angular_core.InputSignal<OptionalSize>;
-    border: _angular_core.InputSignal<Variant>;
+    border: _angular_core.InputSignal<keyof _uni_design_system_uni_core.UniVariantRegistry>;
     height: _angular_core.InputSignal<OptionalValue>;
     width: _angular_core.InputSignal<OptionalValue>;
     appearance: _angular_core.InputSignal<ScrollbarAppearance>;
@@ -5308,7 +5736,7 @@ declare class UniTagComponent extends BaseComponent<UniTagOptions> {
     removed: _angular_core.OutputEmitterRef<UniTagValue>;
     activated: _angular_core.OutputEmitterRef<UniTagValue>;
     /** A disabled chip wears the theme's `disabled` role, whatever its variant. */
-    protected readonly resolvedVariant: _angular_core.Signal<_uni_design_system_uni_core.Variant>;
+    protected readonly resolvedVariant: _angular_core.Signal<keyof _uni_design_system_uni_core.UniVariantRegistry>;
     protected readonly themeStyle: _angular_core.Signal<{
         [x: string]: string | number | _uni_design_system_uni_core.StyleExpression;
     }>;
@@ -5338,7 +5766,7 @@ declare class UniThemeBuilderComponent {
     protected readonly schemes: ColorScheme[];
     protected readonly categories: ColorCategory[];
     protected readonly shapes: ThemeShape[];
-    protected readonly variants: Variant[];
+    protected readonly variants: (keyof _uni_design_system_uni_core.UniVariantRegistry)[];
     protected readonly sizes: readonly ["sm", "md", "lg", "xl"];
     protected readonly swatches: {
         label: string;
@@ -5600,5 +6028,5 @@ declare class DragAndDropDirective {
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<DragAndDropDirective, "[uni-drag-n-drop], [dragAndDrop]", never, {}, { "fileDropped": "fileDropped"; }, never, never, true, never>;
 }
 
-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 type { Alert, AnchorOffset, AnchorRect, Announcer, BrandPaletteConfig, BreadcrumbItem, ButtonGroupConfig, ButtonGroupItem, ColumnDefinition, Confirmation, DataLoader, DrawerMode, DrawerPosition, ImagePosition, ListboxNavigationConfig, MenuDivider, MenuItem, MenuItemWithLabel, MenuItemWithTemplate, Option, Options, PageRequest, PageResponse, Placement, PressRepeat, PressRepeatConfig, PressRepeatTiming, ScrollbarAppearance, SkeletonShape, SkeletonSweepDirection, Snackbar, Sort, SortDirection, SpotlightOptions, SpotlightStyles, UniAppBarOptions, UniAvatarGroupOptions, UniAvatarOptions, UniBreadcrumbOptions, UniCalendarMarker, UniCalendarMode, UniCalendarOptions, UniCalendarValue, UniCalloutDismissal, UniCalloutOptions, UniCheckboxOptions, UniComboboxOptions, UniComboboxRejection, UniDataSearchOptions, UniDataTableOptions, UniDatasource, UniDate, UniDateInputOptions, UniDateInputRejection, UniDateRange, UniDateTime, UniDateTimeInputOptions, UniDrawerOptions, UniExpandOptions, UniInputBoxOptions, UniInputMode, UniInputType, UniListboxPopupOptions, UniLocaleNumberParts, UniMenuItemOptions, UniMenuOptions, UniMonthGridCell, UniMultiSelectDropdownOptions, UniNotificationBadgeOptions, UniNumberClamp, UniNumberFormatConfig, UniNumberGrouping, UniNumberInputOptions, UniNumberParseResult, UniNumberPreset, UniNumberRange, UniNumberRangeInputOptions, UniNumberRangePart, UniNumberRangeRejection, UniNumberRejectReason, UniNumberRejection, UniNumberStepConfig, UniNumberStepped, UniPaginatorOptions, UniPopoverOptions, UniQuantityStepperOptions, UniRadioOption, UniRadioOptions, UniResolvedNumberFormat, UniRoundingMode, UniSearchInputOptions, UniSkeletonOptions, UniSliderMark, UniSliderOptions, UniSliderThumb, UniStatOptions, UniStepperLayout, UniTabsOptions, UniTagInputOptions, UniTagItem, UniTagOptions, UniTagRejection, UniTagSuggestion, UniTagValue, UniTextareaOptions, UniTime, UniTimeInputOptions, UniTimeInputRejection, UniToggleOptions, UniTourAdvance, UniTourOptions, UniTourStep, UniWeekdayName };
+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 };
+export type { Alert, AnchorOffset, AnchorRect, Announcer, BrandPaletteConfig, BreadcrumbItem, ButtonGroupConfig, ButtonGroupItem, ColumnDefinition, Confirmation, DataLoader, DrawerBackground, DrawerCloseReason, DrawerMode, DrawerPosition, ImagePosition, ListboxNavigationConfig, MenuDivider, MenuItem, MenuItemWithLabel, MenuItemWithTemplate, Option, Options, PageRequest, PageResponse, Placement, PressRepeat, PressRepeatConfig, PressRepeatTiming, ScrollbarAppearance, SkeletonShape, SkeletonSweepDirection, Snackbar, Sort, SortDirection, SpotlightOptions, SpotlightStyles, UniAppBarOptions, UniAvatarGroupOptions, UniAvatarOptions, UniBreadcrumbOptions, UniCalendarMarker, UniCalendarMode, UniCalendarOptions, UniCalendarValue, UniCalloutDismissal, UniCalloutOptions, UniCheckboxOptions, UniCheckboxVariant, UniComboboxOptions, UniComboboxRejection, UniDataSearchOptions, UniDataTableOptions, UniDatasource, UniDate, UniDateInputOptions, UniDateInputRejection, UniDateRange, UniDateTime, UniDateTimeInputOptions, UniDrawerButtonsOptions, UniDrawerCloseRequest, UniDrawerHeaderOptions, UniDrawerOptions, UniDrawerPanel, UniExpandOptions, UniInputBoxOptions, UniInputMode, UniInputType, UniListboxPopupOptions, UniLocaleNumberParts, UniMenuItemOptions, UniMenuOptions, UniMonthGridCell, UniMultiSelectDropdownOptions, UniNotificationBadgeOptions, UniNumberClamp, UniNumberFormatConfig, UniNumberGrouping, UniNumberInputOptions, UniNumberParseResult, UniNumberPreset, UniNumberRange, UniNumberRangeInputOptions, UniNumberRangePart, UniNumberRangeRejection, UniNumberRejectReason, UniNumberRejection, UniNumberStepConfig, UniNumberStepped, UniPaginatorOptions, UniPopoverOptions, UniQuantityStepperOptions, UniRadioOption, UniRadioOptions, UniRadioVariant, UniResolvedNumberFormat, UniRoundingMode, UniSearchInputOptions, UniSkeletonOptions, UniSliderMark, UniSliderOptions, UniSliderThumb, UniStatOptions, UniStepperLayout, UniTabsOptions, UniTagInputOptions, UniTagItem, UniTagOptions, UniTagRejection, UniTagSuggestion, UniTagValue, UniTextareaOptions, UniTime, UniTimeInputOptions, UniTimeInputRejection, UniToggleOptions, UniToggleVariant, UniTourAdvance, UniTourOptions, UniTourStep, UniWeekdayName };