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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uni-design-system/uni-angular",
-  "version": "10.2.1",
+  "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.2.1"
+    "@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"
 	} },
@@ -1403,6 +1416,15 @@ var buildComponents = (c) => ({
 			cursor: "pointer",
 			transition: "all 0.28s ease"
 		},
+		variantOptions: {
+			primary: { focusColor: "primary" },
+			secondary: { focusColor: "secondary" },
+			tertiary: { focusColor: "tertiary" },
+			warn: { focusColor: "warn" },
+			success: { focusColor: "success" },
+			disabled: { focusColor: "disabled" },
+			ghost: { focusColor: "primary" }
+		},
 		variants: {
 			ghost: {
 				backgroundColor: "transparent",
@@ -1474,30 +1496,45 @@ var buildComponents = (c) => ({
 	},
 	iconButton: {
 		options: { borderRadius: "max" },
+		variantOptions: {
+			primary: { focusColor: "primary" },
+			secondary: { focusColor: "secondary" },
+			tertiary: { focusColor: "tertiary" },
+			warn: { focusColor: "warn" },
+			success: { focusColor: "success" },
+			disabled: { focusColor: "disabled" },
+			ghost: { focusColor: "primary" }
+		},
 		variants: {
 			ghost: {
 				backgroundColor: "transparent",
-				color: "currentcolor"
+				color: "currentcolor",
+				"&:hover": { backgroundColor: "rgba(0,0,0,0.1)" }
 			},
 			primary: {
 				backgroundColor: c.primary,
-				color: c["on-primary"]
+				color: c["on-primary"],
+				"&:hover": { boxShadow: BaseShadows.raised }
 			},
 			secondary: {
 				backgroundColor: c.secondary,
-				color: c["on-secondary"]
+				color: c["on-secondary"],
+				"&:hover": { boxShadow: BaseShadows.raised }
 			},
 			tertiary: {
 				backgroundColor: c.tertiary,
-				color: c["on-tertiary"]
+				color: c["on-tertiary"],
+				"&:hover": { boxShadow: BaseShadows.raised }
 			},
 			warn: {
 				backgroundColor: c.warn,
-				color: c["on-warn"]
+				color: c["on-warn"],
+				"&:hover": { boxShadow: BaseShadows.raised }
 			},
 			success: {
 				backgroundColor: c.success,
-				color: c["on-success"]
+				color: c["on-success"],
+				"&:hover": { boxShadow: BaseShadows.raised }
 			},
 			disabled: {
 				backgroundColor: "transparent !important",
@@ -1753,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,
@@ -1769,6 +1806,10 @@ var createTheme = ({ id, name, colors, icons = {}, radii = BaseRadii, shadows =
 		...BaseMotion,
 		...motion
 	},
+	backdrops: {
+		...BaseBackdrops,
+		...backdrops
+	},
 	thicknesses: {
 		...BaseThicknesses,
 		...thicknesses
@@ -2159,7 +2200,7 @@ var UniThemes = {
 Object.keys(UniThemes)[0];
 //#endregion
 //#region package.json
-var version = "10.2.1";
+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;
@@ -3682,6 +3694,27 @@ declare class UniBreadcrumbComponent extends BaseComponent<UniBreadcrumbOptions>
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<UniBreadcrumbComponent, "uni-breadcrumb", never, { "items": { "alias": "items"; "required": true; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, { "itemClicked": "itemClicked"; }, never, never, true, never>;
 }
 
+/**
+ * What a variant means for a button, as theme data the component reads.
+ *
+ * Only the keyboard-focus indicator lives here. Everything else a variant does
+ * to a button is ordinary CSS and belongs in its `variants` style block; the
+ * ring is different because it is drawn *outside* the element, so it cannot
+ * take its colour from the fill and has to be named separately.
+ */
+interface UniButtonVariant {
+    /**
+     * Keyboard-focus ring colour (WCAG 2.4.7).
+     *
+     * Falls back to the reserved `primary` accent. It must never resolve to
+     * nothing: the ring used to take the variant *name* as a colour token, which
+     * left `ghost` with a transparent outline and every unthemed or
+     * consumer-registered intent with `2px solid undefined` — dropped by the CSS
+     * parser, so the ring simply vanished while `outline-offset` survived and
+     * kept the layout looking correct.
+     */
+    focusColor?: ColorKey;
+}
 /** Theme-level options for `uni-text-button`, resolved by token name. */
 interface UniButtonOptions {
     /**
@@ -3712,7 +3745,7 @@ declare class RippleDirective {
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RippleDirective, "[uniRipple]", never, {}, {}, never, never, true, never>;
 }
 
-declare class UniButtonComponent extends BaseComponent<UniButtonOptions> {
+declare class UniButtonComponent extends BaseComponent<UniButtonOptions, UniButtonVariant> {
     readonly disable: _angular_core.InputSignal<boolean>;
     readonly loading: _angular_core.InputSignal<boolean>;
     readonly fullWidth: _angular_core.InputSignal<boolean>;
@@ -3720,6 +3753,23 @@ declare class UniButtonComponent extends BaseComponent<UniButtonOptions> {
     readonly symbolRight: _angular_core.InputSignal<string>;
     spinnerBox: string;
     protected readonly className: _angular_core.Signal<string>;
+    /**
+     * 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.
+     */
+    private readonly focusRingColor;
     symbolSize: _angular_core.Signal<number>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<UniButtonComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<UniButtonComponent, "button[uni-text-button], button[text-button]", never, { "disable": { "alias": "disable"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "fullWidth": { "alias": "fullWidth"; "required": false; "isSignal": true; }; "symbolLeft": { "alias": "symbolLeft"; "required": false; "isSignal": true; }; "symbolRight": { "alias": "symbolRight"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, [{ directive: typeof RippleDirective; inputs: {}; outputs: {}; }]>;
@@ -4158,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. */
@@ -4190,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>;
@@ -4205,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;
@@ -4216,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 {
@@ -4225,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)]. */
@@ -4249,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
@@ -4260,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 {
@@ -4434,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
@@ -4444,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;
 }
 
 /**
@@ -4543,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;
@@ -4922,11 +5062,20 @@ declare class UniIconComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<UniIconComponent, "uni-icon", never, { "color": { "alias": "color"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": true; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
+/**
+ * What a variant means for an icon button, as theme data the component reads.
+ * Mirrors `uni-button`'s: only the focus ring needs naming, because it is drawn
+ * outside the element and so cannot take its colour from the fill.
+ */
+interface UniIconButtonVariant {
+    /** Keyboard-focus ring colour (WCAG 2.4.7). Falls back to `primary`. */
+    focusColor?: ColorKey;
+}
 declare class UniIconButtonComponent {
     private theme;
     config: _angular_core.Signal<_uni_design_system_uni_core.ComponentTheme<{
         borderRadius?: RadiiSize;
-    }, object>>;
+    }, UniIconButtonVariant>>;
     /**
      * Accessible name for the button. Alternative to projecting text content
      * (`<button icon-button>Close</button>`); one of the two is required for
@@ -4951,6 +5100,13 @@ declare class UniIconButtonComponent {
      */
     protected readonly glyphSize: _angular_core.Signal<string | number>;
     protected readonly className: _angular_core.Signal<string>;
+    /**
+     * 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.
+     */
+    private readonly focusRingColor;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<UniIconButtonComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<UniIconButtonComponent, "button[uni-icon-button], button[icon-button]", never, { "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "iconName": { "alias": "iconName"; "required": false; "isSignal": true; }; "symbolName": { "alias": "symbolName"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "disable": { "alias": "disable"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "opticalSize": { "alias": "opticalSize"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, [{ directive: typeof RippleDirective; inputs: {}; outputs: {}; }]>;
 }