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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uni-design-system/uni-angular",
-  "version": "10.3.0",
+  "version": "10.4.0",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -22,7 +22,7 @@
     "@angular/core": "^21.2.0",
     "@angular/forms": "^21.2.0",
     "@emotion/css": "^11.0.0",
-    "@uni-design-system/uni-core": "^10.3.0"
+    "@uni-design-system/uni-core": "^10.4.0"
   },
   "module": "fesm2022/uni-design-system-uni-angular.mjs",
   "typings": "types/uni-design-system-uni-angular.d.ts",

package/schematics/ng-add/index.js

@@ -875,6 +875,16 @@ var BaseMotion = {
 		easing: "ease"
 	}
 };
+/**
+* The one wash every modal surface lays over the page it covers. Dialog and
+* drawer both point at `scrim` by name, so a theme redresses them together —
+* before this they owned a `backdrop` blob each and had drifted apart, the
+* dialog washing the page white and blurred while the drawer dimmed it dark.
+*/
+var BaseBackdrops = { scrim: {
+	background: "rgba(255, 255, 255, 0.6)",
+	backdropFilter: "blur(2px)"
+} };
 var BaseRadii = {
 	none: "none",
 	xxs: "4px",
@@ -967,9 +977,10 @@ var buildComponents = (c) => ({
 		divider: "light",
 		elevation: "menu",
 		padding: "md",
-		backdrop: { background: "rgba(0, 0, 0, 0.4)" },
+		backdrop: "scrim",
 		scrim: true,
-		background: "solid"
+		background: "solid",
+		motion: "panel"
 	} },
 	drawerHeader: { options: {
 		color: void 0,
@@ -1084,17 +1095,18 @@ var buildComponents = (c) => ({
 		color: "primary-surface",
 		border: "quaternary",
 		padding: "sm",
+		bodyPadding: void 0,
+		inset: "lg",
 		elevation: "dialog",
-		backdrop: {
-			background: "rgba(255, 255, 255, 0.6)",
-			backdropFilter: "blur(2px)"
-		}
+		backdrop: "scrim",
+		motion: "panel"
 	} },
 	dialogButtons: { options: {
 		gap: "md",
 		padding: "md",
 		paddingBottom: "lg",
 		justifyContent: "center",
+		divider: void 0,
 		confirmButtonVariant: "primary",
 		cancelButtonVariant: "warn",
 		buttonSize: "lg",
@@ -1107,6 +1119,7 @@ var buildComponents = (c) => ({
 		height: 48,
 		textRole: "title-large",
 		textAlign: "center",
+		divider: void 0,
 		closeButtonIcon: "close",
 		closeButtonSize: "md"
 	} },
@@ -1777,7 +1790,7 @@ var deepMerge = (base, override) => {
 	for (const [key, value] of Object.entries(override)) out[key] = isRecord$1(value) && isRecord$1(out[key]) ? deepMerge(out[key], value) : value;
 	return out;
 };
-var createTheme = ({ id, name, colors, icons = {}, radii = BaseRadii, shadows = BaseShadows, motion, typography, borders, thicknesses, spacing, components }) => ({
+var createTheme = ({ id, name, colors, icons = {}, radii = BaseRadii, shadows = BaseShadows, motion, backdrops, typography, borders, thicknesses, spacing, components }) => ({
 	id,
 	name,
 	colors,
@@ -1793,6 +1806,10 @@ var createTheme = ({ id, name, colors, icons = {}, radii = BaseRadii, shadows =
 		...BaseMotion,
 		...motion
 	},
+	backdrops: {
+		...BaseBackdrops,
+		...backdrops
+	},
 	thicknesses: {
 		...BaseThicknesses,
 		...thicknesses
@@ -2183,7 +2200,7 @@ var UniThemes = {
 Object.keys(UniThemes)[0];
 //#endregion
 //#region package.json
-var version = "10.3.0";
+var version = "10.4.0";
 //#endregion
 //#region schematics-src/ng-add/transforms.ts
 var addDependencies = (packageJsonText, deps) => {

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

@@ -1,7 +1,7 @@
 import * as _angular_core from '@angular/core';
 import { Signal, WritableSignal, InjectionToken, ElementRef, TemplateRef, OnInit, OnDestroy, AfterViewInit } from '@angular/core';
 import * as _uni_design_system_uni_core from '@uni-design-system/uni-core';
-import { IconName, Variant, ContainerColorToken, PaletteConfig, GenerateColorsConfig, Radii, UniTheme, ComponentName, ComponentTheme, MotionToken, ThemeName, ThemeParseResult, TextRole, ContentColorToken, Size, NullableSize, Thickness, NullableStyleExpression, ColorKey, ColorToken, Typeface, Radius, Motion, OptionalSize, Border, Shadow, ZIndexableElements, OptionalAlignSelf, OptionalAlignItems, OptionalAlignContent, OptionalJustifyContent, OptionalDisplay, OptionalPosition, OptionalOverflow, OptionalFlexDirection, OptionalTextAlign, OptionalWrap, TextColor, TagTone, Elevation, RadiiSize, JustifyContent, StyleExpression, Orientation, CssLength, ColorScheme, ColorCategory, ThemeShape, ContrastCheck, Colors, GenerationInput } from '@uni-design-system/uni-core';
+import { IconName, Variant, ContainerColorToken, PaletteConfig, GenerateColorsConfig, Radii, UniTheme, ComponentName, ComponentTheme, MotionToken, StyleExpression, ThemeName, ThemeParseResult, TextRole, ContentColorToken, Size, NullableSize, Thickness, NullableStyleExpression, ColorKey, ColorToken, Typeface, Radius, Motion, Backdrop, OptionalSize, Border, Shadow, ZIndexableElements, OptionalAlignSelf, OptionalAlignItems, OptionalAlignContent, OptionalJustifyContent, OptionalDisplay, OptionalPosition, OptionalOverflow, OptionalFlexDirection, OptionalTextAlign, OptionalWrap, TextColor, TagTone, Elevation, RadiiSize, JustifyContent, Orientation, CssLength, ColorScheme, ColorCategory, ThemeShape, ContrastCheck, Colors, GenerationInput } from '@uni-design-system/uni-core';
 import { FormCheckboxControl, FormValueControl } from '@angular/forms/signals';
 import * as _uni_design_system_uni_angular from '@uni-design-system/uni-angular';
 import { CSSObject } from '@emotion/css/create-instance';
@@ -1019,6 +1019,8 @@ declare class ThemeService {
     shadows: Signal<Partial<Record<string, string>>>;
     icons: Signal<_uni_design_system_uni_core.Icons>;
     motions: Signal<Partial<Record<string, MotionToken>>>;
+    /** Same story as `motions`: a JSON theme may predate the backdrops scale. */
+    backdrops: Signal<Partial<Record<string, StyleExpression>>>;
     constructor();
     /**
      * Activate a registered theme. Returns false — touching nothing, persisting
@@ -1066,7 +1068,7 @@ declare class ThemeService {
     selectedThemeKey: _angular_core.WritableSignal<string>;
     textClass: (textRole: TextRole, textColor?: ContentColorToken) => string;
     componentStyle: (componentName: ComponentName, variant: Variant, size: Size) => Signal<{
-        [x: string]: string | number | _uni_design_system_uni_core.StyleExpression;
+        [x: string]: string | number | StyleExpression;
     }>;
     /**
      * The active variant's roles from a component's `variantOptions` map — the
@@ -1111,7 +1113,7 @@ declare class ThemeService {
     colorPair: (token?: ContainerColorToken, colorVariant?: boolean) => NullableStyleExpression;
     backgroundColor: (token?: ColorKey) => NullableStyleExpression;
     backgroundImage: (url?: string) => NullableStyleExpression;
-    getContainerColors: (color: Variant, useVariant?: boolean) => _uni_design_system_uni_core.StyleExpression;
+    getContainerColors: (color: Variant, useVariant?: boolean) => StyleExpression;
     /**
      * The shared keyboard-focus indicator's styles (WCAG 2.4.7), without a
      * selector — for controls that key the ring off their own state selector
@@ -1154,6 +1156,16 @@ declare class ThemeService {
      * token that isn't there — still animates rather than snapping.
      */
     motion(token: Motion | undefined): MotionToken;
+    private readonly warnedBackdrops;
+    /**
+     * 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: Backdrop | StyleExpression | undefined): NullableStyleExpression;
     radius(size: Radius | undefined): NullableStyleExpression;
     getRadiusLeft(size: Radius | undefined): NullableStyleExpression;
     getRadiusRight(size: Radius | undefined): NullableStyleExpression;
@@ -4196,6 +4208,8 @@ interface UniDialogButtonsOptions {
     /** Bottom padding, as a spacing token. */
     paddingBottom?: NullableSize;
     justifyContent?: JustifyContent;
+    /** Border drawn above the pinned row, separating it from the scrolling body. */
+    divider?: Border;
     confirmButtonVariant?: Variant;
     cancelButtonVariant?: Variant;
     /** Size passed to both buttons. */
@@ -4228,6 +4242,8 @@ declare class UniDialogButtonsComponent extends BaseComponent<UniDialogButtonsOp
     protected justifyContentValue: _angular_core.Signal<JustifyContent>;
     protected gapValue: _angular_core.Signal<NullableSize>;
     protected buttonSize: _angular_core.Signal<Size>;
+    /** A pinned row, sized by its content rather than by the body beside it. */
+    protected readonly hostClass: _angular_core.Signal<string>;
     protected readonly className: _angular_core.Signal<string>;
     closeDialog(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<UniDialogButtonsComponent, never>;
@@ -4243,6 +4259,8 @@ interface UniDialogHeaderOptions {
     textRole: TextRole;
     textColor?: ContentColorToken;
     textAlign?: 'left' | 'center' | 'right';
+    /** Border drawn under the pinned header, separating it from the scrolling body. */
+    divider?: Border;
     closeButtonIcon?: IconName;
     closeButtonSymbol?: string;
     closeButtonSize?: Size;
@@ -4254,8 +4272,13 @@ declare class UniDialogHeaderComponent extends BaseComponent<UniDialogHeaderOpti
     protected readonly titleId: string;
     constructor();
     closeDialog(): void;
+    /**
+     * A pinned row: it is a flex child of the dialog and must not be sized by
+     * the scrolling body beside it.
+     */
+    protected readonly className: _angular_core.Signal<string>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<UniDialogHeaderComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<UniDialogHeaderComponent, "[uni-dialog-header]", never, {}, {}, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<UniDialogHeaderComponent, "[uni-dialog-header], [dialog-header]", never, {}, {}, never, ["*"], true, never>;
 }
 
 interface UniDialogOptions {
@@ -4263,10 +4286,51 @@ interface UniDialogOptions {
     borderRadius: Radius;
     color: ContainerColorToken;
     elevation: Elevation;
-    backdrop: StyleExpression;
+    /**
+     * Name of a `backdrops` primitive — the wash laid over the page behind the
+     * dialog. Shared with the drawer, so one token dresses both. A raw style
+     * object is still accepted for themes that stated one before the scale.
+     */
+    backdrop: Backdrop | StyleExpression;
+    /**
+     * Insets the whole surface: the pinned header, the scrolling body and the
+     * pinned buttons all sit inside it. Safe on a surface that never scrolls —
+     * the dialog is `overflow: clip` and only its body row scrolls.
+     */
     padding?: NullableSize;
+    /**
+     * Padding on the scrolling body row alone. Distinct from `padding`, which
+     * insets all three rows.
+     */
+    bodyPadding?: NullableSize;
+    /**
+     * Timing for the open and close fade, panel and scrim together. The same
+     * token the drawer points at, so the two surfaces arrive and leave alike.
+     */
+    motion?: Motion;
+    /**
+     * Minimum gap between the surface and the viewport edge. The dialog is
+     * content-sized up to `calc(100dvh - 2 x inset)` and scrolls its body from
+     * there.
+     */
+    inset?: NullableSize;
 }
 
+/**
+ * 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.
+ */
 declare class UniDialogComponent extends BaseComponent<UniDialogOptions> {
     private elem;
     /** Two-way bindable open state: [(show)]. */
@@ -4287,9 +4351,22 @@ declare class UniDialogComponent extends BaseComponent<UniDialogOptions> {
     readonly hasTitle: _angular_core.WritableSignal<boolean>;
     /** Emits true once opened and false once the closing animation finishes. */
     showing: _angular_core.OutputEmitterRef<boolean>;
+    protected readonly headerTemplate: _angular_core.Signal<TemplateRef<unknown>>;
+    protected readonly bodyTemplate: _angular_core.Signal<TemplateRef<unknown>>;
+    protected readonly footerTemplate: _angular_core.Signal<TemplateRef<unknown>>;
     constructor();
     private get _dialog();
+    /**
+     * 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.
+     */
+    private readonly motion;
+    /** The gap the surface keeps from the viewport edge before its body scrolls. */
+    private readonly inset;
     protected readonly className: _angular_core.Signal<string>;
+    /** The only scrolling row, and the only one `bodyPadding` touches. */
+    protected readonly bodyClass: _angular_core.Signal<string>;
     protected backdropClick(event: Event): void;
     /**
      * Escape fires the native 'cancel' event, which would close the dialog
@@ -4298,13 +4375,19 @@ declare class UniDialogComponent extends BaseComponent<UniDialogOptions> {
      */
     protected escapeCancel(event: Event): void;
     protected closingAnimation(e: AnimationEvent): void;
+    /**
+     * 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: string;
     private dialogFadeIn;
     private dialogFadeOut;
     open(): void;
     close(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<UniDialogComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<UniDialogComponent, "dialog[uni-dialog]", never, { "show": { "alias": "show"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "initialFocus": { "alias": "initialFocus"; "required": false; "isSignal": true; }; "defaultCloseButton": { "alias": "defaultCloseButton"; "required": false; "isSignal": true; }; }, { "show": "showChange"; "showing": "showing"; }, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<UniDialogComponent, "dialog[uni-dialog]", never, { "show": { "alias": "show"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "initialFocus": { "alias": "initialFocus"; "required": false; "isSignal": true; }; "defaultCloseButton": { "alias": "defaultCloseButton"; "required": false; "isSignal": true; }; }, { "show": "showChange"; "showing": "showing"; }, never, ["[uni-dialog-header], [dialog-header]", "[uni-dialog-buttons], [dialog-buttons]", "*"], true, never>;
 }
 
 declare class UniDividerComponent {
@@ -4472,8 +4555,12 @@ interface UniDrawerOptions {
      * unpadded so that header and footer rows can pin flush to its edges.
      */
     padding?: OptionalSize;
-    /** Backdrop styling for the overlay mode. Ignored when `scrim` is false. */
-    backdrop?: StyleExpression;
+    /**
+     * Name of a `backdrops` primitive — the wash laid over the page behind the
+     * overlay. The same token the dialog points at, so one theme entry dresses
+     * both. A raw style object is still accepted. Ignored when `scrim` is false.
+     */
+    backdrop?: Backdrop | StyleExpression;
     /**
      * Whether the overlay mode dims the page behind it. False leaves
      * `::backdrop` transparent — the drawer still traps focus and is still
@@ -4482,6 +4569,12 @@ interface UniDrawerOptions {
     scrim?: boolean;
     /** Surface treatment of the panel. */
     background?: DrawerBackground;
+    /**
+     * Timing for everything the panel does: the overlay's slide, its scrim's
+     * fade, and the side panel's width transition. One token for all three, so
+     * the scrim can never drift out of step with the panel it dims.
+     */
+    motion?: Motion;
 }
 
 /**
@@ -4581,6 +4674,15 @@ declare class UniDrawerComponent extends BaseComponent<UniDrawerOptions> {
     private readonly edge;
     private readonly slideIn;
     private readonly slideOut;
+    /** The scrim's own fade, so the dimming arrives and leaves with the panel. */
+    private readonly scrimIn;
+    private readonly scrimOut;
+    /**
+     * 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.
+     */
+    private readonly motion;
     /** Input wins over the theme option; the literal is the last-resort default. */
     private readonly panelWidth;
     private readonly showScrim;