@eagami/ui 5.19.0 → 5.21.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eagami/ui",
-  "version": "5.19.0",
+  "version": "5.21.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
@@ -25,6 +30,46 @@
   }
 }
 
+// A readonly field takes no input, so it offers a pointer nothing: no ring on
+// click, no icon hover, no pointer cursor. Keyboard focus still has to be
+// visible, so the border alone picks up the focus colour, without the halo.
+@mixin readonly-focus-cue {
+  border-color: var(--color-border-focus);
+  box-shadow: none;
+
+  // Border colour is unreliable in forced-colors, so the ring's outline stands
+  // in there, matching what `focus-ring` paints for an editable field
+  @media (forced-colors: active) {
+    outline: 2px solid Highlight;
+    outline-offset: 2px;
+  }
+}
+
+@mixin readonly-field {
+  &:has(:focus-visible) {
+    @include readonly-focus-cue;
+  }
+
+  button {
+    cursor: default;
+
+    &:hover {
+      background-color: transparent;
+      color: var(--color-text-secondary);
+    }
+  }
+}
+
+// `readonly-field` for a control whose root is the focusable element itself: it
+// keeps the quiet keyboard cue but stops offering to be pressed or typed into.
+@mixin readonly-control {
+  cursor: default;
+
+  &:focus-visible {
+    @include readonly-focus-cue;
+  }
+}
+
 // Hides an element visually while keeping it in the accessibility tree, so
 // screen readers still announce it. The clip pattern is used instead of
 // `display: none` or `visibility: hidden`, which would remove it entirely.
@@ -47,6 +92,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 +114,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;
     };
@@ -737,6 +733,7 @@ declare class AutocompleteComponent implements ControlValueAccessor {
         [x: string]: boolean;
         'ea-autocomplete__wrapper--error': boolean;
         'ea-autocomplete__wrapper--focused': boolean;
+        'ea-autocomplete__wrapper--readonly': boolean;
         'ea-autocomplete__wrapper--disabled': boolean;
     }>;
     readonly listboxClasses: _angular_core.Signal<{
@@ -1337,6 +1334,7 @@ declare class ColorPickerComponent implements ControlValueAccessor {
         'ea-color-picker__trigger--error': boolean;
         'ea-color-picker__trigger--open': boolean;
         'ea-color-picker__trigger--disabled': boolean;
+        'ea-color-picker__trigger--readonly': boolean;
     }>;
     readonly wrapperClasses: _angular_core.Signal<{
         [x: string]: boolean;
@@ -1561,7 +1559,7 @@ declare class CodeInputComponent implements ControlValueAccessor {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<CodeInputComponent, "ea-code-input", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "length": { "alias": "length"; "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; }; "allowAllChars": { "alias": "allowAllChars"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "completed": "completed"; }, never, never, true, never>;
 }
 
-/** Visual size of the date picker trigger. */
+/** Visual size of the date picker field. */
 type DatePickerSize = EaSize;
 /** Locale-aware date format used for the displayed value. */
 type DatePickerFormat = 'short' | 'medium' | 'long';
@@ -1579,17 +1577,21 @@ interface CalendarDay {
     isFocused: boolean;
 }
 /**
- * Calendar popover for selecting a single date. Supports `min`/`max` bounds,
- * configurable week start, locale-aware formatting via `Intl.DateTimeFormat`,
- * and full keyboard navigation (arrows, PageUp/PageDown, Home/End, Enter,
- * Escape). Integrates with Angular forms via `ControlValueAccessor`.
+ * Date field with a calendar popover. The date can be typed straight into the
+ * field in any reasonable shape (ISO, all-numeric in the locale's field order,
+ * or with a month name) and is rewritten in the configured `format` on commit.
+ * Supports `min`/`max` bounds, configurable week start, locale-aware formatting
+ * via `Intl.DateTimeFormat`, and full keyboard navigation (arrows,
+ * PageUp/PageDown, Home/End, Enter, Escape). Integrates with Angular forms via
+ * `ControlValueAccessor`.
  */
 declare class DatePickerComponent implements ControlValueAccessor {
-    protected readonly triggerEl: _angular_core.Signal<ElementRef<HTMLButtonElement> | undefined>;
+    protected readonly fieldEl: _angular_core.Signal<ElementRef<HTMLElement> | undefined>;
+    protected readonly inputEl: _angular_core.Signal<ElementRef<HTMLInputElement> | undefined>;
     private readonly injector;
     protected readonly i18n: EagamiI18nService;
     readonly label: _angular_core.InputSignal<string | undefined>;
-    /** Placeholder shown when no date is selected. Defaults to the active locale's text. */
+    /** Placeholder shown in the field when no date is selected. */
     readonly placeholder: _angular_core.InputSignal<string | undefined>;
     readonly size: _angular_core.InputSignal<EaSize>;
     readonly disabled: _angular_core.InputSignal<boolean>;
@@ -1613,6 +1615,9 @@ declare class DatePickerComponent implements ControlValueAccessor {
     readonly viewMonth: _angular_core.WritableSignal<number>;
     readonly focusedDate: _angular_core.WritableSignal<Date | null>;
     private readonly _formDisabled;
+    private readonly isFocused;
+    /** Entry in progress, held verbatim until it is committed or abandoned. */
+    private readonly draft;
     private onChange;
     private onTouched;
     readonly isDisabled: _angular_core.Signal<boolean>;
@@ -1632,23 +1637,23 @@ declare class DatePickerComponent implements ControlValueAccessor {
      *  Some browsers ship a reduced ICU that silently falls back to English for
      *  less common locales, so a matching request is not a given. */
     private readonly intlLocalizesEffectiveLocale;
-    /** Placeholder text: explicit `placeholder` input, else the active locale's default. */
+    /** Placeholder text, empty unless a `placeholder` is given. */
     readonly resolvedPlaceholder: _angular_core.Signal<string>;
+    /** Accessible name when no `label` is given. */
+    protected readonly fallbackLabel: _angular_core.Signal<string>;
     readonly dialogId: _angular_core.Signal<string>;
-    readonly triggerLabelledBy: _angular_core.Signal<string | null>;
-    readonly triggerClasses: _angular_core.Signal<{
-        [x: string]: boolean;
-        'ea-date-picker__trigger--error': boolean;
-        'ea-date-picker__trigger--open': boolean;
-        'ea-date-picker__trigger--disabled': boolean;
-    }>;
-    readonly wrapperClasses: _angular_core.Signal<{
-        [x: string]: boolean;
+    readonly fieldClasses: _angular_core.Signal<{
+        'ea-date-picker__field--focused': boolean;
+        'ea-date-picker__field--error': boolean;
+        'ea-date-picker__field--disabled': boolean;
+        'ea-date-picker__field--readonly': boolean;
     }>;
     readonly popoverClasses: _angular_core.Signal<{
         [x: string]: boolean;
     }>;
     readonly displayValue: _angular_core.Signal<string>;
+    /** Field text: the entry in progress while typing, else the formatted value. */
+    readonly inputText: _angular_core.Signal<string>;
     readonly monthYearLabel: _angular_core.Signal<string>;
     readonly weekdayLabels: _angular_core.Signal<string[]>;
     readonly weeks: _angular_core.Signal<CalendarDay[][]>;
@@ -1663,7 +1668,7 @@ declare class DatePickerComponent implements ControlValueAccessor {
     /** Closes the calendar popover. */
     close(): void;
     private focusFocusedDayCell;
-    /** Moves keyboard focus to the trigger button. */
+    /** Moves keyboard focus to the date field. */
     focus(): void;
     selectDay(day: CalendarDay): void;
     /** Clears the selected date and emits `changed` with `null`. */
@@ -1680,7 +1685,13 @@ declare class DatePickerComponent implements ControlValueAccessor {
      */
     private pullFocusIntoView;
     goToToday(): void;
-    handleTriggerKeydown(event: KeyboardEvent): void;
+    protected onInput(event: Event): void;
+    protected onInputFocus(): void;
+    protected onInputBlur(): void;
+    protected handleInputKeydown(event: KeyboardEvent): void;
+    private commitDraft;
+    private applyValue;
+    private isOutOfRange;
     handleGridKeydown(event: KeyboardEvent): void;
     /** Called by `<ea-popover>` when the user clicks outside the picker. */
     onPopoverCloseRequested(): void;
@@ -1905,6 +1916,7 @@ declare class DropdownComponent implements ControlValueAccessor {
         'ea-dropdown__trigger--error': boolean;
         'ea-dropdown__trigger--open': boolean;
         'ea-dropdown__trigger--disabled': boolean;
+        'ea-dropdown__trigger--readonly': boolean;
     }>;
     readonly menuClasses: _angular_core.Signal<{
         [x: string]: boolean;
@@ -2465,6 +2477,7 @@ declare class MultiSelectComponent implements ControlValueAccessor {
         'ea-multi-select__trigger--error': boolean;
         'ea-multi-select__trigger--open': boolean;
         'ea-multi-select__trigger--disabled': boolean;
+        'ea-multi-select__trigger--readonly': boolean;
         'ea-multi-select__trigger--placeholder': boolean;
     }>;
     readonly menuClasses: _angular_core.Signal<{
@@ -2530,7 +2543,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 +2571,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 +2607,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 +2620,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. */
@@ -3646,6 +3660,7 @@ declare class TimePickerComponent implements ControlValueAccessor {
         'ea-time-picker__trigger--error': boolean;
         'ea-time-picker__trigger--open': boolean;
         'ea-time-picker__trigger--disabled': boolean;
+        'ea-time-picker__trigger--readonly': boolean;
         'ea-time-picker__trigger--placeholder': boolean;
     }>;
     readonly wrapperClasses: _angular_core.Signal<{
@@ -3780,6 +3795,8 @@ type ToastVariant = 'default' | 'success' | 'warning' | 'error' | 'info';
 interface Toast {
     id: number;
     message: string;
+    /** Heading shown above the message; the message steps back when set. */
+    title?: string;
     variant: ToastVariant;
     duration: number;
     /** Icon component rendered in place of the variant's own; `null` renders none. */
@@ -3787,6 +3804,8 @@ interface Toast {
 }
 /** Optional configuration for a toast; defaults to `default` variant and 4s duration. */
 interface ToastOptions {
+    /** Heading shown above the message; the message steps back when set. */
+    title?: string;
     variant?: ToastVariant;
     duration?: number;
     /** Any icon component to render in place of the variant's own; `null` for no icon. */