@uni-design-system/uni-angular 10.0.0 → 10.1.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
@@ -1182,7 +1205,7 @@ declare class UniCheckboxComponent extends BaseComponent<UniCheckboxOptions> imp
     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
@@ -1648,7 +1671,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
@@ -1871,7 +1894,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
@@ -1986,7 +2009,7 @@ declare class UniRadioComponent extends BaseComponent<UniRadioOptions> implement
     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
@@ -2124,7 +2147,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
@@ -2805,11 +2828,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 +2841,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 +2860,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 +2960,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 +2979,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. */
@@ -3141,7 +3199,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
@@ -3282,13 +3340,26 @@ declare class UniTimeInputComponent extends BaseComponent<UniTimeInputOptions> i
 
 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 {
@@ -3297,7 +3368,7 @@ declare class UniToggleComponent extends BaseComponent<UniToggleOptions> impleme
     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 +3376,37 @@ 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: input, then theme option, then variant. */
+    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;
     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>;
 }
 
 /**
@@ -4078,10 +4171,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<Variant>;
+    cancelButtonText: _angular_core.InputSignal<string>;
+    cancelButtonVariant: _angular_core.InputSignal<Variant>;
+    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<Variant>;
+    protected cancelVariant: _angular_core.Signal<Variant>;
+    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 +4320,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 +4349,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 +4436,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 {
@@ -5600,5 +5921,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, 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, 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 };