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

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @uni-design-system/uni-angular
 
+## 10.4.0
+
+### Minor Changes
+
+- [`cb5f08f`](https://github.com/uni-design-system/uni/commit/cb5f08f7bc7f73492688d33388c905941762ea0b) Thanks [@gaenglish](https://github.com/gaenglish)! - Give `uni-dialog` the drawer's three-row layout: a pinned `[uni-dialog-header]`, a scrolling body, and pinned `[uni-dialog-buttons]`.
+
+  The surface is now a flex column that is `overflow: clip` on both axes, so it is never the scroll container — previously a long form scrolled the dialog's own title and action buttons off the screen. Unlike the drawer, the dialog declares no height and stays sized by its content, growing until it reaches `calc(100dvh - 2 × inset)` and only then scrolling its body.
+
+  New theme options: `dialog.inset` (gap from the viewport edge before the body scrolls, default `lg`), `dialog.bodyPadding` (pads the scrolling row alone; `dialog.padding` still insets all three rows), and `divider` on `dialogHeader` / `dialogButtons` for a border between a pinned row and the body — all off or unchanged by default, so existing dialogs keep their appearance.
+
+  `[uni-dialog-header]` gains the shorter `[dialog-header]` alias, matching `[dialog-buttons]`; the long form keeps working. The `defaultCloseButton` now actually floats in the corner — its `position: absolute` was being lost to the icon button's own class, which left it inline at the top of the surface.
+
+  The drawer's overlay scrim now fades in and out with the panel instead of snapping. Its `::backdrop` had a background and no animation at all, so the dimming appeared and vanished instantly around a panel that took 250ms to slide. A new `drawer.motion` option (default `panel`) times the slide, the scrim's fade and the side panel's width transition together, replacing the hardcoded 250ms literals. The global reduced-motion rule now also reaches `::backdrop`, so both the drawer's and the dialog's scrim honour the preference (WCAG 2.3.3).
+
+  Dialog and drawer scrims now come from one token. `UniTheme` gains a `backdrops` scale — open and named like `shadows` and `motion` — and both components' `backdrop` option points at a name (`'scrim'`) instead of carrying its own CSS. They had drifted: the dialog washed the page white and blurred it while the drawer dimmed it dark, and a theme that dressed the dialog left the drawer on the library default. A raw style object is still accepted on either option, so a theme that states one keeps working.
+
+  The dialog's fade now reads the theme's `motion` token too (new `dialog.motion` option, default `panel`), replacing a hardcoded `350ms ease-in`. It shared the drawer's scrim but not its timing, so the same surface arrived at two speeds; both are now 250ms and a theme retimes them together.
+
 ## 10.3.0
 
 ### Minor Changes

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] };
     }
@@ -10516,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)]. */
@@ -10536,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()));
@@ -10543,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();
@@ -10583,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 });
@@ -10614,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
@@ -10627,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
@@ -10648,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,
@@ -10661,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, {
@@ -10686,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 && {
@@ -10698,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 {
@@ -10720,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');
@@ -10956,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 */ []));
@@ -10998,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)
@@ -11016,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,
@@ -11035,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. */
@@ -12202,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,
@@ -12212,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 {