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

package/CHANGELOG.md

@@ -1,5 +1,77 @@
 # @uni-design-system/uni-angular
 
+## 10.3.0
+
+### Minor Changes
+
+- [`ab1689a`](https://github.com/uni-design-system/uni/commit/ab1689a8e6ddf26943403ec32e5d4871bc9f0fb6) Thanks [@gaenglish](https://github.com/gaenglish)! - `uni-button`: the focus ring is themed, and the theme now outranks the reset.
+
+  **Five of the twelve variants had no visible keyboard focus ring.** The ring
+  resolved the variant _name_ as a colour token — the pattern 10.2.0 removed from
+  checkbox, radio and toggle, missed on the one component where it costs an
+  accessibility failure rather than a wrong colour:
+
+  ```ts
+  outline: `2px solid ${this.theme.colors()[this.variant()]}`;
+  ```
+
+  `ghost` resolves to `transparent`, so its ring was drawn invisibly.
+  `light`, `onLight`, `dark` and `onDark` have no colour token at all, so the
+  declaration became `2px solid undefined` and the parser dropped it — as would
+  any intent a consumer registers. In every case `outline-offset` survived, so
+  the element still shifted on focus and the missing ring went unnoticed. This
+  was live without the registry involved.
+
+  The colour now comes from the variant's theme entry via `variantOptions`, the
+  mechanism the selection controls already use, and falls back to the reserved
+  `primary` accent rather than to nothing. Each variant keeps the ring colour it
+  had; `ghost` gains a visible one. The ring also routes through the shared
+  `focusRingStyle`, so a theme defining `focusRing` primitives restyles the button
+  alongside every other control.
+
+  **A theme could not give a button a border.** `border`, `outline`, `overflow`
+  and `transition` were applied _after_ the theme's styles, so a variant
+  declaring a border was silently erased and `!important` was the only way
+  through — which then spread to every state adjusting that border, since the
+  shorthand outranks the longhand.
+
+  The base theme was caught by its own reset: `secondary` is commented "Hollow"
+  and declares `1px solid`, and has been rendering borderless. **It now renders
+  its border** — the one visible change here for anyone on the default theme.
+
+  Those four properties move ahead of the theme's styles, resolving the
+  `TODO: Set priority on theme-defined styles` that sat on this line. Structure
+  the component genuinely owns — `position` for the ripple, the symbol slots —
+  stays after, and the reset still applies to every variant that does not
+  override it.
+
+  **`uni-icon-button`'s hover moved to the theme too.** It branched on
+  `variant() === 'ghost'` to choose between a raised shadow and a translucent
+  wash, after the theme's own styles. Being a binary partition, every intent a
+  consumer registered fell into the not-ghost half and was given a lift whether
+  or not it suited — a recessive intent included — and no theme could correct it.
+  Both themes in this repo declare a ghost hover and had it silently overridden.
+
+  Both treatments now live in `iconButton.variants` beside the colours they belong
+  with. Rendering is unchanged for the variants the theme styles; a variant it
+  does not style no longer receives a hover it never asked for, and the `disabled`
+  variant loses one it should never have had, since its block is also spread into
+  `&:disabled`.
+
+  **`uni-icon-button` had no focus indicator at all.** Its structural block cleared
+  the user-agent outline and put nothing back, in every variant — so the close
+  affordance in every dialog and drawer header was unreachable-looking under
+  keyboard navigation. This was not reported; it was found while verifying the
+  button fix above.
+
+  It now draws the shared ring, with its colour read from the same
+  `variantOptions.focusColor` the button uses. The indicator is applied last on
+  purpose: its appearance is the theme's, through `focusColor` and the `focusRing`
+  primitives, but whether one exists is not a style a theme should be able to
+  switch off by accident.
+
+## 10.2.1
+
 ## 10.2.0
 
 ### Minor Changes

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

@@ -3173,23 +3173,47 @@ class UniIconButtonComponent {
                 !this.loading() && {
                 padding: 0,
             },
-            this.variant() !== 'ghost' && {
-                '&:hover': {
-                    ...this.theme.boxShadow('raised'),
-                },
-            },
-            this.variant() === 'ghost' && {
-                '&:hover': {
-                    backgroundColor: 'rgba(0,0,0,0.1)',
-                },
-            },
+            // The hover treatment is the theme's, declared per variant alongside the
+            // colours it belongs with. It used to live here as a pair of branches on
+            // `variant() === 'ghost'`, which was the last place a component decided a
+            // variant's *appearance* from its *name*.
+            //
+            // That partition was binary, so under an open registry every intent a
+            // consumer registered fell into the not-ghost half and got a raised
+            // shadow whether or not it suited — a recessive intent included. And
+            // because the branches were applied after the theme's own styles, no
+            // theme could correct it: both themes in this repo declare a ghost hover
+            // and had it silently overridden.
             !this.loading() && {
                 '&:disabled': {
                     ...this.config().variants?.disabled,
                 },
             },
+            // The keyboard-focus indicator (WCAG 2.4.7). The structural block above
+            // clears the user-agent outline and, until now, put nothing back — so an
+            // icon button had no focus indicator at all, in any variant. That is the
+            // close affordance in every dialog and drawer header.
+            //
+            // Applied last on purpose: its *appearance* is the theme's, through
+            // `focusColor` and the `focusRing` primitives `focusRingStyle` reads, but
+            // whether an indicator exists is not a style choice a theme should be
+            // able to switch off by accident.
+            {
+                '&:focus-visible': { ...this.theme.focusRingStyle(this.focusRingColor()) },
+            },
         ]);
     }, ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
+    /**
+     * The focus ring's colour, from the variant's theme entry — never from the
+     * variant *name*, which is what left `uni-button`'s ring transparent on
+     * `ghost` and absent on every unthemed intent. Falls back to the reserved
+     * `primary` accent so a ring always renders.
+     */
+    focusRingColor = computed(() => {
+        const colors = this.theme.colors();
+        const token = this.config().variantOptions?.[this.variant()]?.focusColor;
+        return (token && colors[token]) || colors['primary'];
+    }, ...(ngDevMode ? [{ debugName: "focusRingColor" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniIconButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniIconButtonComponent, isStandalone: true, selector: "button[uni-icon-button], button[icon-button]", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, iconName: { classPropertyName: "iconName", publicName: "iconName", isSignal: true, isRequired: false, transformFunction: null }, symbolName: { classPropertyName: "symbolName", publicName: "symbolName", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disable: { classPropertyName: "disable", publicName: "disable", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, opticalSize: { classPropertyName: "opticalSize", publicName: "opticalSize", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.disabled": "disable() || loading() || null", "attr.aria-busy": "loading() ? 'true' : null", "attr.aria-label": "ariaLabel() || null", "class": "className()" } }, hostDirectives: [{ directive: RippleDirective }], ngImport: i0, template: `
     @if (loading()) {
@@ -5495,18 +5519,28 @@ class UniButtonComponent extends BaseComponent {
         // radii/families in older themes) keep winning.
         this.theme.radius(this.componentOptions().borderRadius),
         { ...this.theme.typeface(this.componentOptions().typeface) },
-        this.style() && {
-            ...this.style(), // TODO: Set priority on theme-defined styles
-        },
+        // Presentational defaults, deliberately *before* `style()` so the theme
+        // outranks them. They used to sit after it, which made them unthemeable:
+        // a variant could not give a button a border without `!important`, and
+        // the shorthand then forced `!important` onto every state that adjusted
+        // it. The base theme was caught by this too — its `secondary` variant is
+        // commented "Hollow" and declares `1px solid`, which this block erased.
         {
-            display: 'flex',
-            alignItems: 'center',
-            position: 'relative',
             overflow: 'hidden',
             outline: 0,
             border: 0,
             cursor: 'pointer',
             transition: 'all 0.28s ease',
+        },
+        this.style() && {
+            ...this.style(),
+        },
+        // Structure the component genuinely owns: `position` anchors the ripple,
+        // and the rest is its internal slot layout.
+        {
+            display: 'flex',
+            alignItems: 'center',
+            position: 'relative',
             '&:disabled': {
                 cursor: 'not-allowed !important',
             },
@@ -5526,14 +5560,14 @@ class UniButtonComponent extends BaseComponent {
                 fontSize: this.symbolSize(),
             },
         },
-        // Hover/pressed styling now lives in the theme's button variants
-        // (solid vs. hollow, per-variant states). Only the keyboard-focus
-        // indicator (WCAG 2.4.7) stays component-owned.
+        // Hover/pressed styling lives in the theme's button variants (solid vs.
+        // hollow, per-variant states). The keyboard-focus indicator (WCAG 2.4.7)
+        // stays component-owned, but its *colour* is the theme's — see
+        // `focusRingColor`. Routed through the shared `focusRingStyle` so a theme
+        // defining `focusRing` border/shadow primitives restyles it here too,
+        // exactly as it already does for checkbox, radio and toggle.
         {
-            '&:focus-visible': {
-                outline: `2px solid ${this.theme.colors()[this.variant()]}`,
-                outlineOffset: '2px',
-            },
+            '&:focus-visible': { ...this.theme.focusRingStyle(this.focusRingColor()) },
         },
         this.fullWidth() && {
             width: '100%',
@@ -5552,6 +5586,27 @@ class UniButtonComponent extends BaseComponent {
             },
         },
     ]), ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
+    /**
+     * The focus ring's colour, from the variant's theme entry.
+     *
+     * This used to be `colors[variant()]` — the variant *name* resolved as a
+     * colour token. That held together only while every variant happened to also
+     * be a colour, and it failed silently in both directions: `ghost` resolves to
+     * `transparent`, and `light`/`onLight`/`dark`/`onDark` (and any name a
+     * consumer registers) resolve to nothing, emitting `2px solid undefined`
+     * which the parser drops. `outline-offset` survived either way, so the
+     * element still shifted on focus and the missing ring went unnoticed.
+     *
+     * Falls back to the reserved `primary` accent rather than to `currentColor`:
+     * the ring is drawn outside the element, so on a filled button
+     * `currentColor` is the label colour and would sit near-invisibly against
+     * the page rather than the button.
+     */
+    focusRingColor = computed(() => {
+        const colors = this.theme.colors();
+        const token = this.variantRoles()?.focusColor;
+        return (token && colors[token]) || colors['primary'];
+    }, ...(ngDevMode ? [{ debugName: "focusRingColor" }] : /* istanbul ignore next */ []));
     symbolSize = computed(() => {
         const fontSize = parseFloat(String(this.style()['fontSize'] ?? ''));
         // Fall back to the default icon size when the theme defines no fontSize