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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uni-design-system/uni-angular",
-  "version": "10.2.1",
+  "version": "10.3.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.3.0"
   },
   "module": "fesm2022/uni-design-system-uni-angular.mjs",
   "typings": "types/uni-design-system-uni-angular.d.ts",

package/schematics/ng-add/index.js

@@ -1403,6 +1403,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 +1483,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",
@@ -2159,7 +2183,7 @@ var UniThemes = {
 Object.keys(UniThemes)[0];
 //#endregion
 //#region package.json
-var version = "10.2.1";
+var version = "10.3.0";
 //#endregion
 //#region schematics-src/ng-add/transforms.ts
 var addDependencies = (packageJsonText, deps) => {

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

@@ -3682,6 +3682,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 +3733,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 +3741,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: {}; }]>;
@@ -4922,11 +4960,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 +4998,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: {}; }]>;
 }