@uni-design-system/uni-angular 10.2.1 → 10.4.0

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

@@ -2,7 +2,7 @@ import * as i0 from '@angular/core';
 import { signal, inject, DestroyRef, computed, linkedSignal, resource, Injectable, InjectionToken, input, ChangeDetectionStrategy, Component, ElementRef, Directive, model, afterRenderEffect, Renderer2, output, viewChild, ViewChild, viewChildren, effect, untracked, isDevMode, contentChildren, afterNextRender, forwardRef, booleanAttribute } from '@angular/core';
 import { injectGlobal, css, keyframes } from '@emotion/css';
 import { UniThemes, LightTheme, toTypefaces, parseTheme, formatThemeIssues, hydrateTheme, createThemeFromPalette, Z_INDEX, removeInputPlatformStyling, fadeIn, fadeOut, expandDuration, expandFadeIn, collapseFadeOut, HOVER_OR_KEYBOARD_FOCUS, ShapeRadii, generatePalette, emitThemeFile, emitDtcgTokens } from '@uni-design-system/uni-core';
-import { NgTemplateOutlet, NgClass, CommonModule } from '@angular/common';
+import { NgTemplateOutlet, NgClass } from '@angular/common';
 
 let nextUniqueId = 0;
 /**
@@ -2042,12 +2042,16 @@ class ThemeService {
     // `?? {}` for themes registered as JSON that predate the motion scale —
     // the validator does not require it, so they must not crash on read.
     motions = computed(() => this.theme().motion ?? {}, ...(ngDevMode ? [{ debugName: "motions" }] : /* istanbul ignore next */ []));
+    /** Same story as `motions`: a JSON theme may predate the backdrops scale. */
+    backdrops = computed(() => this.theme().backdrops ?? {}, ...(ngDevMode ? [{ debugName: "backdrops" }] : /* istanbul ignore next */ []));
     constructor() {
         // Honor the user's reduced-motion preference across every component
         // (WCAG 2.3.3): collapse all animations/transitions to a single frame.
         injectGlobal `
       @media (prefers-reduced-motion: reduce) {
-        *, *::before, *::after {
+        /* ::backdrop is not a descendant of anything, so the universal
+           selector alone never reaches the scrim a <dialog> fades in. */
+        *, *::before, *::after, *::backdrop {
           animation-duration: 0.01ms !important;
           animation-iteration-count: 1 !important;
           transition-duration: 0.01ms !important;
@@ -2356,6 +2360,35 @@ class ThemeService {
         return ((token ? motions[token] : undefined) ??
             motions['popup'] ?? { duration: 100, easing: 'linear', scale: 0.8 });
     }
+    warnedBackdrops = new Set();
+    /**
+     * Resolves a named backdrop primitive — the wash a modal surface lays over
+     * the page — so every such surface dims it the same way.
+     *
+     * A raw style object passes straight through: that is the shape the dialog's
+     * and drawer's `backdrop` options took before the scale existed, and a
+     * consumer theme that still states one keeps working.
+     */
+    backdrop(token) {
+        if (!token)
+            return undefined;
+        if (typeof token !== 'string')
+            return token;
+        const backdrops = this.backdrops();
+        const value = backdrops[token];
+        if (value)
+            return value;
+        // The scale is open, so a mistyped name cannot be a compile error. Falling
+        // through to `scrim` still dims the page; saying so once keeps the typo
+        // from hiding behind a backdrop that looks almost right.
+        if ((typeof ngDevMode === 'undefined' || ngDevMode) && !this.warnedBackdrops.has(token)) {
+            this.warnedBackdrops.add(token);
+            console.warn(`[uni] Unknown backdrop token "${token}": the active theme does not define it, ` +
+                `so the shared \`scrim\` is used instead. Add it to the theme's \`backdrops\` ` +
+                `map, or use one of: ${Object.keys(backdrops).join(', ')}.`);
+        }
+        return backdrops['scrim'] ?? { background: 'rgba(0, 0, 0, 0.4)' };
+    }
     radius(size) {
         return !size ? undefined : { borderRadius: this.radii()[size] };
     }
@@ -3173,23 +3206,47 @@ class UniIconButtonComponent {
                 !this.loading() && {
                 padding: 0,
             },
-            this.variant() !== 'ghost' && {
-                '&:hover': {
-                    ...this.theme.boxShadow('raised'),
-                },
-            },
-            this.variant() === 'ghost' && {
-                '&:hover': {
-                    backgroundColor: 'rgba(0,0,0,0.1)',
-                },
-            },
+            // The hover treatment is the theme's, declared per variant alongside the
+            // colours it belongs with. It used to live here as a pair of branches on
+            // `variant() === 'ghost'`, which was the last place a component decided a
+            // variant's *appearance* from its *name*.
+            //
+            // That partition was binary, so under an open registry every intent a
+            // consumer registered fell into the not-ghost half and got a raised
+            // shadow whether or not it suited — a recessive intent included. And
+            // because the branches were applied after the theme's own styles, no
+            // theme could correct it: both themes in this repo declare a ghost hover
+            // and had it silently overridden.
             !this.loading() && {
                 '&:disabled': {
                     ...this.config().variants?.disabled,
                 },
             },
+            // The keyboard-focus indicator (WCAG 2.4.7). The structural block above
+            // clears the user-agent outline and, until now, put nothing back — so an
+            // icon button had no focus indicator at all, in any variant. That is the
+            // close affordance in every dialog and drawer header.
+            //
+            // Applied last on purpose: its *appearance* is the theme's, through
+            // `focusColor` and the `focusRing` primitives `focusRingStyle` reads, but
+            // whether an indicator exists is not a style choice a theme should be
+            // able to switch off by accident.
+            {
+                '&:focus-visible': { ...this.theme.focusRingStyle(this.focusRingColor()) },
+            },
         ]);
     }, ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
+    /**
+     * The focus ring's colour, from the variant's theme entry — never from the
+     * variant *name*, which is what left `uni-button`'s ring transparent on
+     * `ghost` and absent on every unthemed intent. Falls back to the reserved
+     * `primary` accent so a ring always renders.
+     */
+    focusRingColor = computed(() => {
+        const colors = this.theme.colors();
+        const token = this.config().variantOptions?.[this.variant()]?.focusColor;
+        return (token && colors[token]) || colors['primary'];
+    }, ...(ngDevMode ? [{ debugName: "focusRingColor" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniIconButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniIconButtonComponent, isStandalone: true, selector: "button[uni-icon-button], button[icon-button]", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, iconName: { classPropertyName: "iconName", publicName: "iconName", isSignal: true, isRequired: false, transformFunction: null }, symbolName: { classPropertyName: "symbolName", publicName: "symbolName", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disable: { classPropertyName: "disable", publicName: "disable", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, opticalSize: { classPropertyName: "opticalSize", publicName: "opticalSize", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.disabled": "disable() || loading() || null", "attr.aria-busy": "loading() ? 'true' : null", "attr.aria-label": "ariaLabel() || null", "class": "className()" } }, hostDirectives: [{ directive: RippleDirective }], ngImport: i0, template: `
     @if (loading()) {
@@ -5495,18 +5552,28 @@ class UniButtonComponent extends BaseComponent {
         // radii/families in older themes) keep winning.
         this.theme.radius(this.componentOptions().borderRadius),
         { ...this.theme.typeface(this.componentOptions().typeface) },
-        this.style() && {
-            ...this.style(), // TODO: Set priority on theme-defined styles
-        },
+        // Presentational defaults, deliberately *before* `style()` so the theme
+        // outranks them. They used to sit after it, which made them unthemeable:
+        // a variant could not give a button a border without `!important`, and
+        // the shorthand then forced `!important` onto every state that adjusted
+        // it. The base theme was caught by this too — its `secondary` variant is
+        // commented "Hollow" and declares `1px solid`, which this block erased.
         {
-            display: 'flex',
-            alignItems: 'center',
-            position: 'relative',
             overflow: 'hidden',
             outline: 0,
             border: 0,
             cursor: 'pointer',
             transition: 'all 0.28s ease',
+        },
+        this.style() && {
+            ...this.style(),
+        },
+        // Structure the component genuinely owns: `position` anchors the ripple,
+        // and the rest is its internal slot layout.
+        {
+            display: 'flex',
+            alignItems: 'center',
+            position: 'relative',
             '&:disabled': {
                 cursor: 'not-allowed !important',
             },
@@ -5526,14 +5593,14 @@ class UniButtonComponent extends BaseComponent {
                 fontSize: this.symbolSize(),
             },
         },
-        // Hover/pressed styling now lives in the theme's button variants
-        // (solid vs. hollow, per-variant states). Only the keyboard-focus
-        // indicator (WCAG 2.4.7) stays component-owned.
+        // Hover/pressed styling lives in the theme's button variants (solid vs.
+        // hollow, per-variant states). The keyboard-focus indicator (WCAG 2.4.7)
+        // stays component-owned, but its *colour* is the theme's — see
+        // `focusRingColor`. Routed through the shared `focusRingStyle` so a theme
+        // defining `focusRing` border/shadow primitives restyles it here too,
+        // exactly as it already does for checkbox, radio and toggle.
         {
-            '&:focus-visible': {
-                outline: `2px solid ${this.theme.colors()[this.variant()]}`,
-                outlineOffset: '2px',
-            },
+            '&:focus-visible': { ...this.theme.focusRingStyle(this.focusRingColor()) },
         },
         this.fullWidth() && {
             width: '100%',
@@ -5552,6 +5619,27 @@ class UniButtonComponent extends BaseComponent {
             },
         },
     ]), ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
+    /**
+     * The focus ring's colour, from the variant's theme entry.
+     *
+     * This used to be `colors[variant()]` — the variant *name* resolved as a
+     * colour token. That held together only while every variant happened to also
+     * be a colour, and it failed silently in both directions: `ghost` resolves to
+     * `transparent`, and `light`/`onLight`/`dark`/`onDark` (and any name a
+     * consumer registers) resolve to nothing, emitting `2px solid undefined`
+     * which the parser drops. `outline-offset` survived either way, so the
+     * element still shifted on focus and the missing ring went unnoticed.
+     *
+     * Falls back to the reserved `primary` accent rather than to `currentColor`:
+     * the ring is drawn outside the element, so on a filled button
+     * `currentColor` is the label colour and would sit near-invisibly against
+     * the page rather than the button.
+     */
+    focusRingColor = computed(() => {
+        const colors = this.theme.colors();
+        const token = this.variantRoles()?.focusColor;
+        return (token && colors[token]) || colors['primary'];
+    }, ...(ngDevMode ? [{ debugName: "focusRingColor" }] : /* istanbul ignore next */ []));
     symbolSize = computed(() => {
         const fontSize = parseFloat(String(this.style()['fontSize'] ?? ''));
         // Fall back to the default icon size when the theme defines no fontSize
@@ -10461,6 +10549,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
  * This file exports all public-facing elements of the data-table component.
  */
 
+/**
+ * Modal dialog on the native `<dialog>` element, laid out as three rows:
+ * an optional `[dialog-header]`, the projected body, an optional
+ * `[dialog-buttons]`.
+ *
+ * **The surface is never the scroll container.** It is a flex column that is
+ * `overflow: clip` on both axes; the header and buttons pin while only the
+ * body row scrolls. Unlike the drawer, which is deliberately viewport-tall,
+ * the dialog stays content-sized: it has no `height`, and grows until it hits
+ * `calc(100dvh - 2 x inset)` — the point at which the body starts to scroll.
+ *
+ * The theme's `padding` insets all three rows (which is what makes the default
+ * header read as a pill floating inside the surface); `bodyPadding` pads the
+ * scrolling row alone.
+ */
 class UniDialogComponent extends BaseComponent {
     elem = inject(ElementRef);
     /** Two-way bindable open state: [(show)]. */
@@ -10481,6 +10584,9 @@ class UniDialogComponent extends BaseComponent {
     hasTitle = signal(false, ...(ngDevMode ? [{ debugName: "hasTitle" }] : /* istanbul ignore next */ []));
     /** Emits true once opened and false once the closing animation finishes. */
     showing = output();
+    headerTemplate = viewChild.required('header');
+    bodyTemplate = viewChild.required('body');
+    footerTemplate = viewChild.required('footer');
     constructor() {
         super();
         effect(() => (this.show() ? this.open() : this.close()));
@@ -10488,24 +10594,73 @@ class UniDialogComponent extends BaseComponent {
     get _dialog() {
         return this.elem.nativeElement;
     }
-    className = computed(() => css([
-        {
-            ...this.theme.radius(this.componentOptions().borderRadius),
-            ...this.theme.colorPair(this.componentOptions().color),
-            ...this.theme.border(this.componentOptions().border),
-            ...this.theme.boxShadow(this.componentOptions().elevation),
-            ...this.theme.padding(this.componentOptions().padding || 'none'),
-            '&::backdrop': {
-                ...this.componentOptions().backdrop,
-            },
-            '&[open], &::backdrop': {
-                animation: `${this.dialogFadeIn} ease-in 350ms`,
-            },
-            '&[closing], &[closing]::backdrop': {
-                animation: `${this.dialogFadeOut} ease-in 350ms`,
+    /**
+     * One timing for the whole move, panel and scrim together — the same `panel`
+     * token the drawer's slide reads, so the two surfaces no longer disagree
+     * about how long arriving takes.
+     */
+    motion = computed(() => this.theme.motion(this.componentOptions().motion ?? 'panel'), ...(ngDevMode ? [{ debugName: "motion" }] : /* istanbul ignore next */ []));
+    /** The gap the surface keeps from the viewport edge before its body scrolls. */
+    inset = computed(() => this.theme.getSpacing(this.componentOptions().inset ?? 'lg'), ...(ngDevMode ? [{ debugName: "inset" }] : /* istanbul ignore next */ []));
+    className = computed(() => {
+        const inset = this.inset();
+        const motion = this.motion();
+        return css([
+            {
+                boxSizing: 'border-box',
+                display: 'flex',
+                flexDirection: 'column',
+                // Both axes, explicitly, and never the shorthand. Setting one axis
+                // alone computes the other to `auto` — which is precisely how a
+                // surface becomes an accidental scroll container.
+                overflowX: 'clip',
+                overflowY: 'clip',
+                // No `height`: the dialog is content-sized right up to this cap, and
+                // only then does the body row start to scroll.
+                maxHeight: `calc(100dvh - ${inset} * 2)`,
+                maxWidth: `calc(100vw - ${inset} * 2)`,
+                ...this.theme.radius(this.componentOptions().borderRadius),
+                ...this.theme.colorPair(this.componentOptions().color),
+                ...this.theme.border(this.componentOptions().border),
+                ...this.theme.boxShadow(this.componentOptions().elevation),
+                ...this.theme.padding(this.componentOptions().padding || 'none'),
+                // The UA stylesheet hides a closed dialog with `display: none`, which
+                // the `display: flex` above would otherwise beat on specificity —
+                // leaving the surface in normal flow behind the page whenever it is
+                // shut. The closing animation still runs: `open` is only removed once
+                // it ends.
+                '&:not([open])': { display: 'none' },
+                // The shared `backdrops` primitive, so the dialog and the drawer dim
+                // the page identically. A raw style object is still honoured.
+                '&::backdrop': {
+                    ...this.theme.backdrop(this.componentOptions().backdrop),
+                },
+                '&[open], &::backdrop': {
+                    animation: `${this.dialogFadeIn} ${motion.easing} ${motion.duration}ms`,
+                },
+                '&[closing], &[closing]::backdrop': {
+                    animation: `${this.dialogFadeOut} ${motion.easing} ${motion.duration}ms`,
+                },
             },
-        },
-    ]), ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
+        ]);
+    }, ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
+    /** The only scrolling row, and the only one `bodyPadding` touches. */
+    bodyClass = computed(() => css({
+        // Not the drawer's `1 1 auto`: the dialog must not stretch to fill a cap
+        // it has not reached, so the body never grows past its content.
+        flex: '0 1 auto',
+        // What lets this row shrink below its content and scroll, rather than
+        // pushing the buttons off the surface.
+        minHeight: 0,
+        // Defence in depth: a positioned body is the containing block for any
+        // stray absolute descendant, so nothing can re-home into an ancestor and
+        // inflate its scrollHeight.
+        position: 'relative',
+        overflowX: 'hidden',
+        overflowY: 'auto',
+        overscrollBehavior: 'contain',
+        ...this.theme.padding(this.componentOptions().bodyPadding),
+    }), ...(ngDevMode ? [{ debugName: "bodyClass" }] : /* istanbul ignore next */ []));
     backdropClick(event) {
         if (event.target.nodeName === 'DIALOG') {
             this.close();
@@ -10528,10 +10683,18 @@ class UniDialogComponent extends BaseComponent {
             this.showing.emit(false);
         }
     }
+    /**
+     * Doubled selector (`.css-x.css-x`) so these win over the icon button's own
+     * class, which sets `position: relative` and is emitted after this one.
+     * Without it the close never leaves the flow — it used to sit inline at the
+     * top of the surface, and under the flex column it would take a whole row.
+     */
     closeButton = css({
-        position: 'absolute',
-        right: 12,
-        top: 12,
+        '&&': {
+            position: 'absolute',
+            right: 12,
+            top: 12,
+        },
     });
     dialogFadeIn = keyframes({ ...fadeIn });
     dialogFadeOut = keyframes({ ...fadeOut });
@@ -10559,7 +10722,7 @@ class UniDialogComponent extends BaseComponent {
         this.show.set(false);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniDialogComponent, isStandalone: true, selector: "dialog[uni-dialog]", inputs: { show: { classPropertyName: "show", publicName: "show", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, initialFocus: { classPropertyName: "initialFocus", publicName: "initialFocus", isSignal: true, isRequired: false, transformFunction: null }, defaultCloseButton: { classPropertyName: "defaultCloseButton", publicName: "defaultCloseButton", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { show: "showChange", showing: "showing" }, host: { listeners: { "click": "backdropClick($event)", "cancel": "escapeCancel($event)", "animationend": "closingAnimation($event)" }, properties: { "attr.aria-labelledby": "hasTitle() ? titleId : null", "attr.aria-label": "ariaLabel() ?? null", "class": "className()" } }, providers: [{ provide: COMPONENT_NAME, useValue: 'dialog' }], usesInheritance: true, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniDialogComponent, isStandalone: true, selector: "dialog[uni-dialog]", inputs: { show: { classPropertyName: "show", publicName: "show", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, initialFocus: { classPropertyName: "initialFocus", publicName: "initialFocus", isSignal: true, isRequired: false, transformFunction: null }, defaultCloseButton: { classPropertyName: "defaultCloseButton", publicName: "defaultCloseButton", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { show: "showChange", showing: "showing" }, host: { listeners: { "click": "backdropClick($event)", "cancel": "escapeCancel($event)", "animationend": "closingAnimation($event)" }, properties: { "attr.aria-labelledby": "hasTitle() ? titleId : null", "attr.aria-label": "ariaLabel() ?? null", "class": "className()" } }, providers: [{ provide: COMPONENT_NAME, useValue: 'dialog' }], viewQueries: [{ propertyName: "headerTemplate", first: true, predicate: ["header"], descendants: true, isSignal: true }, { propertyName: "bodyTemplate", first: true, predicate: ["body"], descendants: true, isSignal: true }, { propertyName: "footerTemplate", first: true, predicate: ["footer"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
     @if (defaultCloseButton()) {
       <button
         icon-button
@@ -10572,14 +10735,24 @@ class UniDialogComponent extends BaseComponent {
         Close
       </button>
     }
-    <ng-content></ng-content>
-  `, isInline: true, dependencies: [{ kind: "component", type: UniIconButtonComponent, selector: "button[uni-icon-button], button[icon-button]", inputs: ["ariaLabel", "iconName", "symbolName", "variant", "size", "disable", "loading", "opticalSize"] }, { kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+
+    <!-- One <ng-content> per slot, each parked in a template. Angular claims
+         projected nodes in declaration order, so the catch-all must be declared
+         last — while being rendered between the two pinned rows below. -->
+    <ng-template #header><ng-content select="[uni-dialog-header], [dialog-header]" /></ng-template>
+    <ng-template #footer><ng-content select="[uni-dialog-buttons], [dialog-buttons]" /></ng-template>
+    <ng-template #body><ng-content /></ng-template>
+
+    <ng-container [ngTemplateOutlet]="headerTemplate()" />
+    <div [class]="bodyClass()"><ng-container [ngTemplateOutlet]="bodyTemplate()" /></div>
+    <ng-container [ngTemplateOutlet]="footerTemplate()" />
+  `, isInline: true, dependencies: [{ kind: "component", type: UniIconButtonComponent, selector: "button[uni-icon-button], button[icon-button]", inputs: ["ariaLabel", "iconName", "symbolName", "variant", "size", "disable", "loading", "opticalSize"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniDialogComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'dialog[uni-dialog]',
-                    imports: [UniIconButtonComponent, CommonModule],
+                    imports: [UniIconButtonComponent, NgTemplateOutlet],
                     template: `
     @if (defaultCloseButton()) {
       <button
@@ -10593,7 +10766,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
         Close
       </button>
     }
-    <ng-content></ng-content>
+
+    <!-- One <ng-content> per slot, each parked in a template. Angular claims
+         projected nodes in declaration order, so the catch-all must be declared
+         last — while being rendered between the two pinned rows below. -->
+    <ng-template #header><ng-content select="[uni-dialog-header], [dialog-header]" /></ng-template>
+    <ng-template #footer><ng-content select="[uni-dialog-buttons], [dialog-buttons]" /></ng-template>
+    <ng-template #body><ng-content /></ng-template>
+
+    <ng-container [ngTemplateOutlet]="headerTemplate()" />
+    <div [class]="bodyClass()"><ng-container [ngTemplateOutlet]="bodyTemplate()" /></div>
+    <ng-container [ngTemplateOutlet]="footerTemplate()" />
   `,
                     providers: [{ provide: COMPONENT_NAME, useValue: 'dialog' }],
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -10606,7 +10789,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
                         '(animationend)': 'closingAnimation($event)',
                     },
                 }]
-        }], ctorParameters: () => [], propDecorators: { show: [{ type: i0.Input, args: [{ isSignal: true, alias: "show", required: false }] }, { type: i0.Output, args: ["showChange"] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], initialFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialFocus", required: false }] }], defaultCloseButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultCloseButton", required: false }] }], showing: [{ type: i0.Output, args: ["showing"] }] } });
+        }], ctorParameters: () => [], propDecorators: { show: [{ type: i0.Input, args: [{ isSignal: true, alias: "show", required: false }] }, { type: i0.Output, args: ["showChange"] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], initialFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialFocus", required: false }] }], defaultCloseButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultCloseButton", required: false }] }], showing: [{ type: i0.Output, args: ["showing"] }], headerTemplate: [{ type: i0.ViewChild, args: ['header', { isSignal: true }] }], bodyTemplate: [{ type: i0.ViewChild, args: ['body', { isSignal: true }] }], footerTemplate: [{ type: i0.ViewChild, args: ['footer', { isSignal: true }] }] } });
 
 class UniDialogButtonsComponent extends BaseComponent {
     dialog = inject(UniDialogComponent, {
@@ -10631,6 +10814,11 @@ class UniDialogButtonsComponent extends BaseComponent {
     justifyContentValue = computed(() => this.justifyContent() ?? this.componentOptions().justifyContent ?? 'center', ...(ngDevMode ? [{ debugName: "justifyContentValue" }] : /* istanbul ignore next */ []));
     gapValue = computed(() => this.componentOptions().gap ?? 'md', ...(ngDevMode ? [{ debugName: "gapValue" }] : /* istanbul ignore next */ []));
     buttonSize = computed(() => this.componentOptions().buttonSize ?? 'lg', ...(ngDevMode ? [{ debugName: "buttonSize" }] : /* istanbul ignore next */ []));
+    /** A pinned row, sized by its content rather than by the body beside it. */
+    hostClass = computed(() => css({
+        flex: 'none',
+        ...this.theme.borderTop(this.componentOptions().divider),
+    }), ...(ngDevMode ? [{ debugName: "hostClass" }] : /* istanbul ignore next */ []));
     className = computed(() => css([
         this.componentTheme().fixed,
         this.componentOptions().stretch && {
@@ -10643,11 +10831,11 @@ class UniDialogButtonsComponent extends BaseComponent {
         this.dialog?.close();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniDialogButtonsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", type: UniDialogButtonsComponent, isStandalone: true, selector: "[uni-dialog-buttons], [dialog-buttons]", inputs: { confirmButtonText: { classPropertyName: "confirmButtonText", publicName: "confirmButtonText", isSignal: true, isRequired: false, transformFunction: null }, confirmButtonVariant: { classPropertyName: "confirmButtonVariant", publicName: "confirmButtonVariant", isSignal: true, isRequired: false, transformFunction: null }, cancelButtonText: { classPropertyName: "cancelButtonText", publicName: "cancelButtonText", isSignal: true, isRequired: false, transformFunction: null }, cancelButtonVariant: { classPropertyName: "cancelButtonVariant", publicName: "cancelButtonVariant", isSignal: true, isRequired: false, transformFunction: null }, disableConfirm: { classPropertyName: "disableConfirm", publicName: "disableConfirm", isSignal: true, isRequired: false, transformFunction: null }, padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null }, paddingBottom: { classPropertyName: "paddingBottom", publicName: "paddingBottom", isSignal: true, isRequired: false, transformFunction: null }, justifyContent: { classPropertyName: "justifyContent", publicName: "justifyContent", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { confirmed: "confirmed" }, providers: [{ provide: COMPONENT_NAME, useValue: 'dialogButtons' }], usesInheritance: true, ngImport: i0, template: "<div\n  row-layout\n  [gap]=\"gapValue()\"\n  [padding]=\"paddingValue()\"\n  [paddingBottom]=\"paddingBottomValue()\"\n  [justifyContent]=\"justifyContentValue()\"\n  [flexDirection]=\"componentOptions().reverseOrder ? 'row-reverse' : 'row'\"\n  [class]=\"className()\"\n>\n  <button\n    text-button\n    [variant]=\"confirmVariant()\"\n    [size]=\"buttonSize()\"\n    (click)=\"confirmed.emit(); closeDialog()\"\n    [disable]=\"disableConfirm()\"\n  >\n    {{ confirmButtonText() || 'Confirm' }}\n  </button>\n  <button text-button [variant]=\"cancelVariant()\" [size]=\"buttonSize()\" (click)=\"closeDialog()\">\n    {{ cancelButtonText() || 'Cancel' }}\n  </button>\n</div>\n", dependencies: [{ kind: "directive", type: UniRowDirective, selector: "[uni-row-layout], [row-layout]", inputs: ["display", "flexDirection", "minWidth"] }, { kind: "component", type: UniButtonComponent, selector: "button[uni-text-button], button[text-button]", inputs: ["disable", "loading", "fullWidth", "symbolLeft", "symbolRight"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", type: UniDialogButtonsComponent, isStandalone: true, selector: "[uni-dialog-buttons], [dialog-buttons]", inputs: { confirmButtonText: { classPropertyName: "confirmButtonText", publicName: "confirmButtonText", isSignal: true, isRequired: false, transformFunction: null }, confirmButtonVariant: { classPropertyName: "confirmButtonVariant", publicName: "confirmButtonVariant", isSignal: true, isRequired: false, transformFunction: null }, cancelButtonText: { classPropertyName: "cancelButtonText", publicName: "cancelButtonText", isSignal: true, isRequired: false, transformFunction: null }, cancelButtonVariant: { classPropertyName: "cancelButtonVariant", publicName: "cancelButtonVariant", isSignal: true, isRequired: false, transformFunction: null }, disableConfirm: { classPropertyName: "disableConfirm", publicName: "disableConfirm", isSignal: true, isRequired: false, transformFunction: null }, padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null }, paddingBottom: { classPropertyName: "paddingBottom", publicName: "paddingBottom", isSignal: true, isRequired: false, transformFunction: null }, justifyContent: { classPropertyName: "justifyContent", publicName: "justifyContent", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { confirmed: "confirmed" }, host: { properties: { "class": "hostClass()" } }, providers: [{ provide: COMPONENT_NAME, useValue: 'dialogButtons' }], usesInheritance: true, ngImport: i0, template: "<div\n  row-layout\n  [gap]=\"gapValue()\"\n  [padding]=\"paddingValue()\"\n  [paddingBottom]=\"paddingBottomValue()\"\n  [justifyContent]=\"justifyContentValue()\"\n  [flexDirection]=\"componentOptions().reverseOrder ? 'row-reverse' : 'row'\"\n  [class]=\"className()\"\n>\n  <button\n    text-button\n    [variant]=\"confirmVariant()\"\n    [size]=\"buttonSize()\"\n    (click)=\"confirmed.emit(); closeDialog()\"\n    [disable]=\"disableConfirm()\"\n  >\n    {{ confirmButtonText() || 'Confirm' }}\n  </button>\n  <button text-button [variant]=\"cancelVariant()\" [size]=\"buttonSize()\" (click)=\"closeDialog()\">\n    {{ cancelButtonText() || 'Cancel' }}\n  </button>\n</div>\n", dependencies: [{ kind: "directive", type: UniRowDirective, selector: "[uni-row-layout], [row-layout]", inputs: ["display", "flexDirection", "minWidth"] }, { kind: "component", type: UniButtonComponent, selector: "button[uni-text-button], button[text-button]", inputs: ["disable", "loading", "fullWidth", "symbolLeft", "symbolRight"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniDialogButtonsComponent, decorators: [{
             type: Component,
-            args: [{ selector: '[uni-dialog-buttons], [dialog-buttons]', imports: [UniRowDirective, UniButtonComponent], providers: [{ provide: COMPONENT_NAME, useValue: 'dialogButtons' }], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  row-layout\n  [gap]=\"gapValue()\"\n  [padding]=\"paddingValue()\"\n  [paddingBottom]=\"paddingBottomValue()\"\n  [justifyContent]=\"justifyContentValue()\"\n  [flexDirection]=\"componentOptions().reverseOrder ? 'row-reverse' : 'row'\"\n  [class]=\"className()\"\n>\n  <button\n    text-button\n    [variant]=\"confirmVariant()\"\n    [size]=\"buttonSize()\"\n    (click)=\"confirmed.emit(); closeDialog()\"\n    [disable]=\"disableConfirm()\"\n  >\n    {{ confirmButtonText() || 'Confirm' }}\n  </button>\n  <button text-button [variant]=\"cancelVariant()\" [size]=\"buttonSize()\" (click)=\"closeDialog()\">\n    {{ cancelButtonText() || 'Cancel' }}\n  </button>\n</div>\n" }]
+            args: [{ selector: '[uni-dialog-buttons], [dialog-buttons]', imports: [UniRowDirective, UniButtonComponent], providers: [{ provide: COMPONENT_NAME, useValue: 'dialogButtons' }], changeDetection: ChangeDetectionStrategy.OnPush, host: { '[class]': 'hostClass()' }, template: "<div\n  row-layout\n  [gap]=\"gapValue()\"\n  [padding]=\"paddingValue()\"\n  [paddingBottom]=\"paddingBottomValue()\"\n  [justifyContent]=\"justifyContentValue()\"\n  [flexDirection]=\"componentOptions().reverseOrder ? 'row-reverse' : 'row'\"\n  [class]=\"className()\"\n>\n  <button\n    text-button\n    [variant]=\"confirmVariant()\"\n    [size]=\"buttonSize()\"\n    (click)=\"confirmed.emit(); closeDialog()\"\n    [disable]=\"disableConfirm()\"\n  >\n    {{ confirmButtonText() || 'Confirm' }}\n  </button>\n  <button text-button [variant]=\"cancelVariant()\" [size]=\"buttonSize()\" (click)=\"closeDialog()\">\n    {{ cancelButtonText() || 'Cancel' }}\n  </button>\n</div>\n" }]
         }], propDecorators: { confirmButtonText: [{ type: i0.Input, args: [{ isSignal: true, alias: "confirmButtonText", required: false }] }], confirmButtonVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "confirmButtonVariant", required: false }] }], cancelButtonText: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelButtonText", required: false }] }], cancelButtonVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelButtonVariant", required: false }] }], disableConfirm: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableConfirm", required: false }] }], padding: [{ type: i0.Input, args: [{ isSignal: true, alias: "padding", required: false }] }], paddingBottom: [{ type: i0.Input, args: [{ isSignal: true, alias: "paddingBottom", required: false }] }], justifyContent: [{ type: i0.Input, args: [{ isSignal: true, alias: "justifyContent", required: false }] }], confirmed: [{ type: i0.Output, args: ["confirmed"] }] } });
 
 class UniDialogHeaderComponent extends BaseComponent {
@@ -10665,12 +10853,20 @@ class UniDialogHeaderComponent extends BaseComponent {
     closeDialog() {
         this.dialog?.close();
     }
+    /**
+     * A pinned row: it is a flex child of the dialog and must not be sized by
+     * the scrolling body beside it.
+     */
+    className = computed(() => css({
+        flex: 'none',
+        ...this.theme.borderBottom(this.componentOptions().divider),
+    }), ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniDialogHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniDialogHeaderComponent, isStandalone: true, selector: "[uni-dialog-header]", providers: [{ provide: COMPONENT_NAME, useValue: 'dialogHeader' }], usesInheritance: true, ngImport: i0, template: "<div\n  row-layout\n  [containerColor]=\"componentOptions().color\"\n  [borderRadius]=\"componentOptions().borderRadius\"\n  [height]=\"componentOptions().height\"\n  alignItems=\"center\"\n  [paddingHorizontal]=\"componentOptions().paddingHorizontal ?? 'sm'\"\n>\n  <!-- Balance spacer: only centered titles need to offset the close button. -->\n  @if ((componentOptions().textAlign || 'center') === 'center') {\n    <div box-layout [width]=\"26\"></div>\n  }\n  <div box-layout [grow]=\"1\" [attr.id]=\"titleId\">\n    <span uni-text\n      [typeface]=\"componentOptions().textRole\"\n      [color]=\"componentOptions().textColor\"\n      display=\"block\"\n      [align]=\"componentOptions().textAlign || 'center'\"\n      ><ng-content></ng-content\n    ></span>\n  </div>\n  <button\n    icon-button\n    [iconName]=\"componentOptions().closeButtonIcon\"\n    [symbolName]=\"componentOptions().closeButtonSymbol\"\n    variant=\"ghost\"\n    (click)=\"closeDialog()\"\n    [size]=\"componentOptions().closeButtonSize || 'md'\"\n  >\n    Close\n  </button>\n</div>\n", dependencies: [{ kind: "directive", type: UniBoxDirective, selector: "[uni-box-layout], [box-layout]", inputs: ["containerColor", "backgroundColor", "borderRadius", "borderRadiusLeft", "borderRadiusRight", "borderRadiusTop", "borderRadiusBottom", "padding", "paddingHorizontal", "paddingVertical", "paddingLeft", "paddingRight", "paddingTop", "paddingBottom", "border", "borderTop", "borderBottom", "borderLeft", "borderRight", "dashBorder", "alignSelf", "alignItems", "alignContent", "justifyContent", "grow", "flex", "shrink", "basis", "marginInline", "display", "position", "inset", "height", "minHeight", "maxHeight", "width", "minWidth", "maxWidth", "ignoreDir", "gridArea", "gridColumn", "gridRow", "overflow", "shadow", "gap", "fullWidth", "fullHeight", "flexDirection", "textAlign", "wrapItems", "zIndex"] }, { kind: "component", type: UniIconButtonComponent, selector: "button[uni-icon-button], button[icon-button]", inputs: ["ariaLabel", "iconName", "symbolName", "variant", "size", "disable", "loading", "opticalSize"] }, { kind: "directive", type: UniTextDirective, selector: "[uni-text]", inputs: ["uni-text", "typeface", "color", "display", "align", "nowrap", "maxWidth", "ellipsis"] }, { kind: "directive", type: UniRowDirective, selector: "[uni-row-layout], [row-layout]", inputs: ["display", "flexDirection", "minWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniDialogHeaderComponent, isStandalone: true, selector: "[uni-dialog-header], [dialog-header]", host: { properties: { "class": "className()" } }, providers: [{ provide: COMPONENT_NAME, useValue: 'dialogHeader' }], usesInheritance: true, ngImport: i0, template: "<div\n  row-layout\n  [containerColor]=\"componentOptions().color\"\n  [borderRadius]=\"componentOptions().borderRadius\"\n  [height]=\"componentOptions().height\"\n  alignItems=\"center\"\n  [paddingHorizontal]=\"componentOptions().paddingHorizontal ?? 'sm'\"\n>\n  <!-- Balance spacer: only centered titles need to offset the close button. -->\n  @if ((componentOptions().textAlign || 'center') === 'center') {\n    <div box-layout [width]=\"26\"></div>\n  }\n  <div box-layout [grow]=\"1\" [attr.id]=\"titleId\">\n    <span uni-text\n      [typeface]=\"componentOptions().textRole\"\n      [color]=\"componentOptions().textColor\"\n      display=\"block\"\n      [align]=\"componentOptions().textAlign || 'center'\"\n      ><ng-content></ng-content\n    ></span>\n  </div>\n  <button\n    icon-button\n    [iconName]=\"componentOptions().closeButtonIcon\"\n    [symbolName]=\"componentOptions().closeButtonSymbol\"\n    variant=\"ghost\"\n    (click)=\"closeDialog()\"\n    [size]=\"componentOptions().closeButtonSize || 'md'\"\n  >\n    Close\n  </button>\n</div>\n", dependencies: [{ kind: "directive", type: UniBoxDirective, selector: "[uni-box-layout], [box-layout]", inputs: ["containerColor", "backgroundColor", "borderRadius", "borderRadiusLeft", "borderRadiusRight", "borderRadiusTop", "borderRadiusBottom", "padding", "paddingHorizontal", "paddingVertical", "paddingLeft", "paddingRight", "paddingTop", "paddingBottom", "border", "borderTop", "borderBottom", "borderLeft", "borderRight", "dashBorder", "alignSelf", "alignItems", "alignContent", "justifyContent", "grow", "flex", "shrink", "basis", "marginInline", "display", "position", "inset", "height", "minHeight", "maxHeight", "width", "minWidth", "maxWidth", "ignoreDir", "gridArea", "gridColumn", "gridRow", "overflow", "shadow", "gap", "fullWidth", "fullHeight", "flexDirection", "textAlign", "wrapItems", "zIndex"] }, { kind: "component", type: UniIconButtonComponent, selector: "button[uni-icon-button], button[icon-button]", inputs: ["ariaLabel", "iconName", "symbolName", "variant", "size", "disable", "loading", "opticalSize"] }, { kind: "directive", type: UniTextDirective, selector: "[uni-text]", inputs: ["uni-text", "typeface", "color", "display", "align", "nowrap", "maxWidth", "ellipsis"] }, { kind: "directive", type: UniRowDirective, selector: "[uni-row-layout], [row-layout]", inputs: ["display", "flexDirection", "minWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniDialogHeaderComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: '[uni-dialog-header]', imports: [UniBoxDirective, UniIconButtonComponent, UniTextDirective, UniRowDirective], providers: [{ provide: COMPONENT_NAME, useValue: 'dialogHeader' }], template: "<div\n  row-layout\n  [containerColor]=\"componentOptions().color\"\n  [borderRadius]=\"componentOptions().borderRadius\"\n  [height]=\"componentOptions().height\"\n  alignItems=\"center\"\n  [paddingHorizontal]=\"componentOptions().paddingHorizontal ?? 'sm'\"\n>\n  <!-- Balance spacer: only centered titles need to offset the close button. -->\n  @if ((componentOptions().textAlign || 'center') === 'center') {\n    <div box-layout [width]=\"26\"></div>\n  }\n  <div box-layout [grow]=\"1\" [attr.id]=\"titleId\">\n    <span uni-text\n      [typeface]=\"componentOptions().textRole\"\n      [color]=\"componentOptions().textColor\"\n      display=\"block\"\n      [align]=\"componentOptions().textAlign || 'center'\"\n      ><ng-content></ng-content\n    ></span>\n  </div>\n  <button\n    icon-button\n    [iconName]=\"componentOptions().closeButtonIcon\"\n    [symbolName]=\"componentOptions().closeButtonSymbol\"\n    variant=\"ghost\"\n    (click)=\"closeDialog()\"\n    [size]=\"componentOptions().closeButtonSize || 'md'\"\n  >\n    Close\n  </button>\n</div>\n" }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: '[uni-dialog-header], [dialog-header]', imports: [UniBoxDirective, UniIconButtonComponent, UniTextDirective, UniRowDirective], providers: [{ provide: COMPONENT_NAME, useValue: 'dialogHeader' }], host: { '[class]': 'className()' }, template: "<div\n  row-layout\n  [containerColor]=\"componentOptions().color\"\n  [borderRadius]=\"componentOptions().borderRadius\"\n  [height]=\"componentOptions().height\"\n  alignItems=\"center\"\n  [paddingHorizontal]=\"componentOptions().paddingHorizontal ?? 'sm'\"\n>\n  <!-- Balance spacer: only centered titles need to offset the close button. -->\n  @if ((componentOptions().textAlign || 'center') === 'center') {\n    <div box-layout [width]=\"26\"></div>\n  }\n  <div box-layout [grow]=\"1\" [attr.id]=\"titleId\">\n    <span uni-text\n      [typeface]=\"componentOptions().textRole\"\n      [color]=\"componentOptions().textColor\"\n      display=\"block\"\n      [align]=\"componentOptions().textAlign || 'center'\"\n      ><ng-content></ng-content\n    ></span>\n  </div>\n  <button\n    icon-button\n    [iconName]=\"componentOptions().closeButtonIcon\"\n    [symbolName]=\"componentOptions().closeButtonSymbol\"\n    variant=\"ghost\"\n    (click)=\"closeDialog()\"\n    [size]=\"componentOptions().closeButtonSize || 'md'\"\n  >\n    Close\n  </button>\n</div>\n" }]
         }], ctorParameters: () => [] });
 
 const DRAWER_PANEL = new InjectionToken('uni-drawer-panel');
@@ -10901,6 +11097,15 @@ class UniDrawerComponent extends BaseComponent {
     edge = computed(() => (this.position() === 'start' ? '-100%' : '100%'), ...(ngDevMode ? [{ debugName: "edge" }] : /* istanbul ignore next */ []));
     slideIn = computed(() => keyframes({ from: { transform: `translateX(${this.edge()})` }, to: { transform: 'translateX(0)' } }), ...(ngDevMode ? [{ debugName: "slideIn" }] : /* istanbul ignore next */ []));
     slideOut = computed(() => keyframes({ from: { transform: 'translateX(0)' }, to: { transform: `translateX(${this.edge()})` } }), ...(ngDevMode ? [{ debugName: "slideOut" }] : /* istanbul ignore next */ []));
+    /** The scrim's own fade, so the dimming arrives and leaves with the panel. */
+    scrimIn = keyframes({ ...fadeIn });
+    scrimOut = keyframes({ ...fadeOut });
+    /**
+     * One timing for everything the panel does. The scrim used to snap in and
+     * out around a panel that took 250ms to slide, because `::backdrop` had a
+     * background and no animation at all.
+     */
+    motion = computed(() => this.theme.motion(this.componentOptions().motion ?? 'panel'), ...(ngDevMode ? [{ debugName: "motion" }] : /* istanbul ignore next */ []));
     /** Input wins over the theme option; the literal is the last-resort default. */
     panelWidth = computed(() => this.width() ?? this.componentOptions().width ?? 280, ...(ngDevMode ? [{ debugName: "panelWidth" }] : /* istanbul ignore next */ []));
     showScrim = computed(() => this.scrim() ?? this.componentOptions().scrim ?? true, ...(ngDevMode ? [{ debugName: "showScrim" }] : /* istanbul ignore next */ []));
@@ -10943,13 +11148,14 @@ class UniDrawerComponent extends BaseComponent {
     };
     sideClass = computed(() => {
         const options = this.componentOptions();
+        const motion = this.motion();
         const width = this.panelWidth();
         const start = this.position() === 'start';
         return css({
             ...this.shell,
             height: '100%',
             flex: 'none',
-            transition: 'width 0.25s ease, visibility 0.25s',
+            transition: `width ${motion.duration}ms ${motion.easing}, visibility ${motion.duration}ms`,
             ...this.surface(),
             ...(start
                 ? this.theme.borderRight(options.divider)
@@ -10961,6 +11167,8 @@ class UniDrawerComponent extends BaseComponent {
     }, ...(ngDevMode ? [{ debugName: "sideClass" }] : /* istanbul ignore next */ []));
     overClass = computed(() => {
         const options = this.componentOptions();
+        const motion = this.motion();
+        const scrim = this.showScrim();
         const start = this.position() === 'start';
         return css({
             ...this.shell,
@@ -10980,9 +11188,25 @@ class UniDrawerComponent extends BaseComponent {
             '&:not([open])': { display: 'none' },
             // `scrim: false` keeps the modality — focus trap, inert page — but stops
             // the drawer dimming what it covers.
-            '&::backdrop': this.showScrim() ? { ...options.backdrop } : { background: 'transparent' },
-            '&[open]': { animation: `${this.slideIn()} 250ms ease-out` },
-            '&[closing]': { animation: `${this.slideOut()} 250ms ease-in` },
+            '&::backdrop': scrim
+                ? { ...this.theme.backdrop(options.backdrop) }
+                : { background: 'transparent' },
+            '&[open]': { animation: `${this.slideIn()} ${motion.duration}ms ${motion.easing}` },
+            '&[closing]': { animation: `${this.slideOut()} ${motion.duration}ms ${motion.easing}` },
+            // Same duration as the slide, so the dimming tracks the panel rather
+            // than snapping. Declared after the `[open]` rules: the two match on
+            // specificity while closing, so source order is what makes the fade-out
+            // win. Nothing to fade when there is no scrim.
+            ...(scrim
+                ? {
+                    '&[open]::backdrop': {
+                        animation: `${this.scrimIn} ${motion.duration}ms ${motion.easing}`,
+                    },
+                    '&[closing]::backdrop': {
+                        animation: `${this.scrimOut} ${motion.duration}ms ${motion.easing}`,
+                    },
+                }
+                : {}),
         });
     }, ...(ngDevMode ? [{ debugName: "overClass" }] : /* istanbul ignore next */ []));
     /** The only scrolling row, and the only padded one. */
@@ -12147,7 +12371,7 @@ class ConfirmationDialogComponent {
     confirmation = input(...(ngDevMode ? [undefined, { debugName: "confirmation" }] : /* istanbul ignore next */ []));
     showing = output();
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: ConfirmationDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", type: ConfirmationDialogComponent, isStandalone: true, selector: "uni-confirmation-dialog", inputs: { show: { classPropertyName: "show", publicName: "show", isSignal: true, isRequired: false, transformFunction: null }, confirmation: { classPropertyName: "confirmation", publicName: "confirmation", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { showing: "showing" }, ngImport: i0, template: "<dialog uni-dialog [show]=\"show()\" (showing)=\"showing.emit($event)\">\n  <div uni-dialog-header>\n    {{ confirmation()?.title }}\n  </div>\n  <div box-layout padding=\"md\">\n    <span uni-text>\n      {{ confirmation()?.message }}\n    </span>\n  </div>\n  <div\n    dialog-buttons\n    [confirmButtonText]=\"confirmation()?.actionLabel\"\n    (confirmed)=\"confirmation()?.action()\"\n    [cancelButtonText]=\"confirmation()?.dismissLabel\"\n  ></div>\n</dialog>\n", dependencies: [{ kind: "component", type: UniDialogComponent, selector: "dialog[uni-dialog]", inputs: ["show", "ariaLabel", "initialFocus", "defaultCloseButton"], outputs: ["showChange", "showing"] }, { kind: "component", type: UniDialogHeaderComponent, selector: "[uni-dialog-header]" }, { kind: "directive", type: UniBoxDirective, selector: "[uni-box-layout], [box-layout]", inputs: ["containerColor", "backgroundColor", "borderRadius", "borderRadiusLeft", "borderRadiusRight", "borderRadiusTop", "borderRadiusBottom", "padding", "paddingHorizontal", "paddingVertical", "paddingLeft", "paddingRight", "paddingTop", "paddingBottom", "border", "borderTop", "borderBottom", "borderLeft", "borderRight", "dashBorder", "alignSelf", "alignItems", "alignContent", "justifyContent", "grow", "flex", "shrink", "basis", "marginInline", "display", "position", "inset", "height", "minHeight", "maxHeight", "width", "minWidth", "maxWidth", "ignoreDir", "gridArea", "gridColumn", "gridRow", "overflow", "shadow", "gap", "fullWidth", "fullHeight", "flexDirection", "textAlign", "wrapItems", "zIndex"] }, { kind: "directive", type: UniTextDirective, selector: "[uni-text]", inputs: ["uni-text", "typeface", "color", "display", "align", "nowrap", "maxWidth", "ellipsis"] }, { kind: "component", type: UniDialogButtonsComponent, selector: "[uni-dialog-buttons], [dialog-buttons]", inputs: ["confirmButtonText", "confirmButtonVariant", "cancelButtonText", "cancelButtonVariant", "disableConfirm", "padding", "paddingBottom", "justifyContent"], outputs: ["confirmed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", type: ConfirmationDialogComponent, isStandalone: true, selector: "uni-confirmation-dialog", inputs: { show: { classPropertyName: "show", publicName: "show", isSignal: true, isRequired: false, transformFunction: null }, confirmation: { classPropertyName: "confirmation", publicName: "confirmation", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { showing: "showing" }, ngImport: i0, template: "<dialog uni-dialog [show]=\"show()\" (showing)=\"showing.emit($event)\">\n  <div dialog-header>\n    {{ confirmation()?.title }}\n  </div>\n  <div box-layout padding=\"md\">\n    <span uni-text>\n      {{ confirmation()?.message }}\n    </span>\n  </div>\n  <div\n    dialog-buttons\n    [confirmButtonText]=\"confirmation()?.actionLabel\"\n    (confirmed)=\"confirmation()?.action()\"\n    [cancelButtonText]=\"confirmation()?.dismissLabel\"\n  ></div>\n</dialog>\n", dependencies: [{ kind: "component", type: UniDialogComponent, selector: "dialog[uni-dialog]", inputs: ["show", "ariaLabel", "initialFocus", "defaultCloseButton"], outputs: ["showChange", "showing"] }, { kind: "component", type: UniDialogHeaderComponent, selector: "[uni-dialog-header], [dialog-header]" }, { kind: "directive", type: UniBoxDirective, selector: "[uni-box-layout], [box-layout]", inputs: ["containerColor", "backgroundColor", "borderRadius", "borderRadiusLeft", "borderRadiusRight", "borderRadiusTop", "borderRadiusBottom", "padding", "paddingHorizontal", "paddingVertical", "paddingLeft", "paddingRight", "paddingTop", "paddingBottom", "border", "borderTop", "borderBottom", "borderLeft", "borderRight", "dashBorder", "alignSelf", "alignItems", "alignContent", "justifyContent", "grow", "flex", "shrink", "basis", "marginInline", "display", "position", "inset", "height", "minHeight", "maxHeight", "width", "minWidth", "maxWidth", "ignoreDir", "gridArea", "gridColumn", "gridRow", "overflow", "shadow", "gap", "fullWidth", "fullHeight", "flexDirection", "textAlign", "wrapItems", "zIndex"] }, { kind: "directive", type: UniTextDirective, selector: "[uni-text]", inputs: ["uni-text", "typeface", "color", "display", "align", "nowrap", "maxWidth", "ellipsis"] }, { kind: "component", type: UniDialogButtonsComponent, selector: "[uni-dialog-buttons], [dialog-buttons]", inputs: ["confirmButtonText", "confirmButtonVariant", "cancelButtonText", "cancelButtonVariant", "disableConfirm", "padding", "paddingBottom", "justifyContent"], outputs: ["confirmed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: ConfirmationDialogComponent, decorators: [{
             type: Component,
@@ -12157,7 +12381,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
                         UniBoxDirective,
                         UniTextDirective,
                         UniDialogButtonsComponent,
-                    ], template: "<dialog uni-dialog [show]=\"show()\" (showing)=\"showing.emit($event)\">\n  <div uni-dialog-header>\n    {{ confirmation()?.title }}\n  </div>\n  <div box-layout padding=\"md\">\n    <span uni-text>\n      {{ confirmation()?.message }}\n    </span>\n  </div>\n  <div\n    dialog-buttons\n    [confirmButtonText]=\"confirmation()?.actionLabel\"\n    (confirmed)=\"confirmation()?.action()\"\n    [cancelButtonText]=\"confirmation()?.dismissLabel\"\n  ></div>\n</dialog>\n" }]
+                    ], template: "<dialog uni-dialog [show]=\"show()\" (showing)=\"showing.emit($event)\">\n  <div dialog-header>\n    {{ confirmation()?.title }}\n  </div>\n  <div box-layout padding=\"md\">\n    <span uni-text>\n      {{ confirmation()?.message }}\n    </span>\n  </div>\n  <div\n    dialog-buttons\n    [confirmButtonText]=\"confirmation()?.actionLabel\"\n    (confirmed)=\"confirmation()?.action()\"\n    [cancelButtonText]=\"confirmation()?.dismissLabel\"\n  ></div>\n</dialog>\n" }]
         }], propDecorators: { show: [{ type: i0.Input, args: [{ isSignal: true, alias: "show", required: false }] }], confirmation: [{ type: i0.Input, args: [{ isSignal: true, alias: "confirmation", required: false }] }], showing: [{ type: i0.Output, args: ["showing"] }] } });
 
 class UniSnackbarComponent extends BaseComponent {