@eagami/ui 5.19.0 → 5.20.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eagami/ui",
-  "version": "5.19.0",
+  "version": "5.20.0",
   "description": "Lightweight, accessible, themeable Angular UI component library and icon set built on CSS custom properties",
   "author": "Michal Wiraszka <michal@eagami.com>",
   "license": "MIT",

package/src/styles/_mixins.scss

@@ -2,6 +2,11 @@
 //   @use '../../styles/mixins' as ea;
 //   .ea-foo__close { @include ea.icon-button; }
 
+// WCAG 2.2 SC 2.5.8 Target Size (Minimum), Level AA. Any pointer target the
+// library ships has to reach this in at least one dimension pair, or qualify
+// for one of the SC's exceptions (inline, spacing, essential).
+$target-size-min: 24px;
+
 // Standard focus indicator. The ring is a soft box-shadow halo, but box-shadow
 // is dropped in forced-colors (Windows High Contrast) mode, which would leave
 // keyboard users with no visible focus. Pair the halo with a real outline that
@@ -47,6 +52,8 @@
 // it reads clearly inside the box regardless of how much padding the icon's own
 // viewBox carries (the feather `x`, for instance, only fills its middle half).
 @mixin icon-button {
+  // Anchors the grown pointer target below
+  position: relative;
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -67,6 +74,25 @@
     font-size: 1.25em;
   }
 
+  // The visible box is deliberately small on the dense tiers (17.5px at 2xs,
+  // 21px at xs), which is under the 24px WCAG 2.2 SC 2.5.8 target minimum.
+  // SC 2.5.8 measures the interactive target rather than the painted control,
+  // so the target is grown here and the visuals are left alone.
+  //
+  // A layout that stacks or abuts these buttons closer than the minimum must
+  // opt out via `--ea-icon-button-target: 0`, because grown targets that
+  // overlap steal each other's clicks, which is worse than the undersized
+  // targets the SC's spacing exception already covers.
+  &::after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: max(100%, var(--ea-icon-button-target, #{$target-size-min}));
+    height: max(100%, var(--ea-icon-button-target, #{$target-size-min}));
+    transform: translate(-50%, -50%);
+  }
+
   &:hover {
     background-color: var(--color-state-hover);
     color: var(--color-text-primary);

package/src/styles/wcag-floors.spec.ts

@@ -0,0 +1,122 @@
+/// <reference types="node" />
+import { readFileSync, readdirSync } from 'node:fs';
+import { join } from 'node:path';
+
+/**
+ * Source-level guards for the accessibility floors the library commits to.
+ *
+ * These cannot be covered by the per-component axe specs: jsdom has no layout,
+ * so nothing at runtime can measure a rendered target box or a computed
+ * font-size. The floors are therefore asserted against the stylesheets that
+ * define them. Both floors regressed silently once, when the `2xs` tier scaled
+ * every em-derived dimension down a step without anything failing.
+ */
+
+const SRC = process.cwd();
+
+function read(relativePath: string): string {
+  return readFileSync(join(SRC, relativePath), 'utf8');
+}
+
+function componentStylesheets(): { name: string; css: string }[] {
+  const lib = join(SRC, 'src/lib');
+  return readdirSync(lib, { withFileTypes: true })
+    .filter(entry => entry.isDirectory())
+    .flatMap(dir =>
+      readdirSync(join(lib, dir.name))
+        .filter(file => file.endsWith('.component.scss'))
+        .map(file => ({
+          name: `${dir.name}/${file}`,
+          css: readFileSync(join(lib, dir.name, file), 'utf8'),
+        })),
+    );
+}
+
+/** Font-size in px of the smallest tier, from the typography tokens. */
+const SMALLEST_TIER_PX = 10;
+
+describe('WCAG floors', () => {
+  describe('SC 2.5.8 Target Size (Minimum)', () => {
+    const mixins = read('src/styles/_mixins.scss');
+
+    it('declares the 24px minimum as a single shared constant', () => {
+      expect(mixins).toMatch(/\$target-size-min:\s*24px;/);
+    });
+
+    it('grows the shared icon-button target to that minimum', () => {
+      const mixin = mixins.slice(mixins.indexOf('@mixin icon-button'));
+      const body = mixin.slice(0, mixin.indexOf('\n}\n'));
+
+      // The painted box stays small on the dense tiers, so the target has to be
+      // grown independently of width/height, defaulting to the shared minimum
+      expect(body).toContain('position: relative');
+      expect(body).toMatch(
+        /width:\s*max\(100%,\s*var\(--ea-icon-button-target,\s*#\{\$target-size-min\}\)\)/,
+      );
+      expect(body).toMatch(
+        /height:\s*max\(100%,\s*var\(--ea-icon-button-target,\s*#\{\$target-size-min\}\)\)/,
+      );
+    });
+
+    it('makes a component that shrinks the box decide about the grown target', () => {
+      // A box smaller than the minimum either grows its target or opts out; it
+      // must not silently keep a 24px target that can overlap its neighbour
+      const shrunk = componentStylesheets().filter(({ css }) =>
+        /--ea-icon-button-size:\s*(0|1(\.\d+)?)em/.test(css),
+      );
+
+      // Zero matches is a valid state: it means nothing currently shrinks the
+      // box below the minimum, which is the outcome this rule is steering toward
+      for (const { name, css } of shrunk) {
+        expect(`${name}: ${/--ea-icon-button-target:/.test(css)}`).toBe(`${name}: true`);
+      }
+    });
+
+    it('routes every icon button through the mixin rather than hand-rolling the box', () => {
+      const handRolled = componentStylesheets().filter(({ css }) =>
+        /\.ea-[a-z-]+__(close|clear|dismiss)\s*\{[^}]*\bwidth:/.test(css),
+      );
+
+      expect(handRolled.map(f => f.name)).toEqual([]);
+    });
+  });
+
+  describe('Legible floors for field sub-text', () => {
+    it('floors the field label at 12px however far the tier scales down', () => {
+      const css = read('src/lib/field/field-label.component.scss');
+
+      expect(css).toMatch(
+        /font-size:\s*max\(var\(--ea-field-label-size[^)]*\)[^,]*,\s*0\.75rem\)/,
+      );
+    });
+
+    it('floors error and hint text at 11px however far the tier scales down', () => {
+      const css = read('src/lib/field/field-messages.component.scss');
+
+      expect(css).toMatch(
+        /font-size:\s*max\(var\(--ea-field-messages-size[^)]*\)[^,]*,\s*0\.6875rem\)/,
+      );
+    });
+
+    it('keeps the floor at the point of use, not in each component that sets the variable', () => {
+      // 18 components declare these variables; a floor copied into each would
+      // be missed by the next one added
+      const setters = componentStylesheets().filter(({ css }) =>
+        /--ea-field-(label|messages)-size:/.test(css),
+      );
+
+      expect(setters.length).toBeGreaterThan(10);
+      for (const { name, css } of setters) {
+        expect(`${name}: ${/--ea-field-\w+-size:\s*max\(/.test(css)}`).toBe(
+          `${name}: false`,
+        );
+      }
+    });
+
+    it('would otherwise scale sub-text below the floors at the smallest tier', () => {
+      // Documents why the floors exist: the unclamped em values at 2xs
+      expect(SMALLEST_TIER_PX * 0.875).toBeLessThan(12);
+      expect(SMALLEST_TIER_PX * 0.8125).toBeLessThan(11);
+    });
+  });
+});

package/types/eagami-ui.d.ts

@@ -147,10 +147,6 @@ interface EagamiMessages {
         hidePassword: string;
         clear: string;
     };
-    numberInput: {
-        increment: string;
-        decrement: string;
-    };
     menu: {
         label: string;
     };
@@ -2530,7 +2526,7 @@ declare class MultiSelectComponent implements ControlValueAccessor {
 /** Visual size of the number input. */
 type NumberInputSize = EaSize;
 /**
- * Numeric field with increment and decrement steppers, min/max/step bounds, and
+ * Numeric field with min/max/step bounds, native arrow-key stepping, and
  * the standard label, hint, and error chrome. The native input carries the
  * `spinbutton` role, so arrow keys step it; the steppers are pointer
  * affordances. Integrates with Angular forms via `ControlValueAccessor`.
@@ -2558,10 +2554,16 @@ declare class NumberInputComponent implements ControlValueAccessor {
     readonly required: _angular_core.InputSignal<boolean>;
     /** Minimum value; typed values are clamped to it on blur and the steppers respect it. */
     readonly min: _angular_core.InputSignal<number | undefined>;
-    /** Maximum value; typed values are clamped to it on blur and the steppers respect it. */
+    /** Maximum value; typed values are clamped to it on blur. */
     readonly max: _angular_core.InputSignal<number | undefined>;
-    /** Amount each step (arrow key or stepper) adds or subtracts. */
+    /** Amount each arrow-key step adds or subtracts. */
     readonly step: _angular_core.InputSignal<number>;
+    /**
+     * Caps how many characters the field accepts, counting the digits, the minus
+     * sign, and the decimal point. Also sets how wide the field renders; without
+     * it the field is six characters wide.
+     */
+    readonly maxDigits: _angular_core.InputSignal<number | undefined>;
     /** Whether negative values are allowed; when `false` the value floors at 0. */
     readonly allowNegative: _angular_core.InputSignal<boolean>;
     /** Accessible name for the field when no visible `label` is set. */
@@ -2588,8 +2590,6 @@ declare class NumberInputComponent implements ControlValueAccessor {
     readonly hasError: _angular_core.Signal<boolean>;
     readonly showError: _angular_core.Signal<boolean>;
     readonly showHint: _angular_core.Signal<boolean>;
-    readonly canIncrement: _angular_core.Signal<boolean>;
-    readonly canDecrement: _angular_core.Signal<boolean>;
     readonly wrapperClasses: _angular_core.Signal<{
         [x: string]: boolean;
         'ea-number-input-wrapper--error': boolean;
@@ -2603,20 +2603,17 @@ declare class NumberInputComponent implements ControlValueAccessor {
     registerOnTouched(fn: () => void): void;
     setDisabledState(isDisabled: boolean): void;
     protected handleInput(): void;
+    private enforceMaxDigits;
     protected handleFocus(event: FocusEvent): void;
     protected handleBlur(event: FocusEvent): void;
     protected handleWheel(event: WheelEvent): void;
     protected handleKeydown(event: KeyboardEvent): void;
-    protected onStepMousedown(event: MouseEvent): void;
-    protected increment(): void;
-    protected decrement(): void;
     /** Moves keyboard focus to the underlying native input element. */
     focus(): void;
-    private stepBy;
     private commitFromElement;
     private clampToBounds;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<NumberInputComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NumberInputComponent, "ea-number-input", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "errorMsg": { "alias": "errorMsg"; "required": false; "isSignal": true; }; "errorMessages": { "alias": "errorMessages"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; "allowNegative": { "alias": "allowNegative"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "changed": "changed"; "focused": "focused"; "blurred": "blurred"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NumberInputComponent, "ea-number-input", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "errorMsg": { "alias": "errorMsg"; "required": false; "isSignal": true; }; "errorMessages": { "alias": "errorMessages"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; "maxDigits": { "alias": "maxDigits"; "required": false; "isSignal": true; }; "allowNegative": { "alias": "allowNegative"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "changed": "changed"; "focused": "focused"; "blurred": "blurred"; }, never, never, true, never>;
 }
 
 /** Horizontal alignment of paginator controls within their container. */