@eagami/ui 5.26.0 → 5.27.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eagami/ui",
-  "version": "5.26.0",
+  "version": "5.27.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

@@ -149,10 +149,22 @@ $target-size-min: 24px;
   }
 }
 
+// Hairline rule for a pseudo-element, so it spans its container's inner edges
+// instead of being inset by the content's own padding. `$inset` pulls the rule
+// in from those edges, matching a list that pads its rows.
+@mixin divider-rule($edge: top, $inset: 0) {
+  position: absolute;
+  #{$edge}: 0;
+  inset-inline-end: $inset;
+  inset-inline-start: $inset;
+  height: var(--border-width-thin);
+  background-color: var(--color-divider);
+  content: '';
+}
+
 // Section wrapper in a grouped select-like option list, and the rule an
-// unlabelled section carries in place of a heading. The rule is a
-// pseudo-element so it spans the list's inner edges instead of being inset by
-// the option padding, and stays out of the option list entirely.
+// unlabelled section carries in place of a heading. The rule stays out of the
+// option list entirely.
 @mixin option-group {
   position: relative;
 
@@ -161,13 +173,7 @@ $target-size-min: 24px;
     margin-top: 0.25em;
 
     &::before {
-      position: absolute;
-      top: 0;
-      inset-inline-end: 0;
-      inset-inline-start: 0;
-      height: var(--border-width-thin);
-      background-color: var(--color-divider);
-      content: '';
+      @include divider-rule;
     }
   }
 }

package/types/eagami-ui.d.ts

@@ -1231,12 +1231,14 @@ interface CommandPaletteItem<T = unknown> {
     data?: T;
 }
 
+interface PaletteEntry {
+    item: CommandPaletteItem;
+    flatIndex: number;
+    disabled: boolean;
+}
 interface GroupedItems {
     group: string;
-    items: ReadonlyArray<{
-        item: CommandPaletteItem;
-        flatIndex: number;
-    }>;
+    items: readonly PaletteEntry[];
 }
 /**
  * `<ea-command-palette>` is a search-driven action launcher: a modal dialog
@@ -1274,15 +1276,17 @@ declare class CommandPaletteComponent {
     /**
      * Items bucketed by `group`, then flattened back into display order
      * (ungrouped items first, then each named group). The matching
-     * `filteredItems` array follows this same order so `flatIndex` lines up
-     * one-to-one with what the user sees.
+     * `filteredEntries` array follows this same order so `flatIndex` lines up
+     * one-to-one with what the user sees. Each entry resolves its disabled state
+     * once here, so a consumer's `disabledWhen` runs once per match rather than
+     * on every binding read.
      */
     protected readonly groupedItems: _angular_core.Signal<GroupedItems[]>;
     /**
      * Flat list of matches in display order. Drives keyboard navigation and
      * `aria-activedescendant`.
      */
-    protected readonly filteredItems: _angular_core.Signal<CommandPaletteItem<unknown>[]>;
+    protected readonly filteredEntries: _angular_core.Signal<PaletteEntry[]>;
     private readonly _activeIndex;
     /**
      * Tracks what the user last did so the visual highlight only renders when
@@ -1297,10 +1301,11 @@ declare class CommandPaletteComponent {
      */
     private readonly interaction;
     protected readonly activeIndex: _angular_core.Signal<number>;
-    protected readonly activeId: _angular_core.Signal<string | null>;
+    protected readonly activeId: _angular_core.Signal<string | undefined>;
     constructor();
     protected itemDomId(item: CommandPaletteItem): string;
-    protected isItemDisabled(item: CommandPaletteItem): boolean;
+    /** Index of the first enabled entry from `start`, walking in `step`; -1 when none. */
+    private firstEnabled;
     protected isActive(flatIndex: number): boolean;
     /**
      * Whether the active row should render its highlighted background right
@@ -1316,8 +1321,8 @@ declare class CommandPaletteComponent {
     /** Home/End move to the first enabled item from the given end. */
     private edgeActive;
     private setActiveByKeyboard;
-    protected onItemClick(item: CommandPaletteItem): void;
-    protected onItemMouseEnter(flatIndex: number): void;
+    protected onItemClick(entry: PaletteEntry): void;
+    protected onItemMouseEnter(entry: PaletteEntry): void;
     protected onListMouseLeave(): void;
     protected onBackdropClick(event: MouseEvent): void;
     protected onDialogClose(): void;
@@ -2329,7 +2334,7 @@ declare class InputComponent implements ControlValueAccessor {
     /** `id` of the popup element the input controls, forwarded as `aria-controls`. */
     readonly ariaControls: _angular_core.InputSignal<string | undefined>;
     /** `id` of the active option in a controlled popup, forwarded as `aria-activedescendant`. */
-    readonly ariaActivedescendant: _angular_core.InputSignal<string | null | undefined>;
+    readonly ariaActivedescendant: _angular_core.InputSignal<string | undefined>;
     /** Autocomplete behavior hint, forwarded as `aria-autocomplete`. */
     readonly ariaAutocomplete: _angular_core.InputSignal<"none" | "inline" | "list" | "both" | undefined>;
     /** Native input type; `password` adds a built-in show/hide toggle. */
@@ -2356,6 +2361,8 @@ declare class InputComponent implements ControlValueAccessor {
     readonly required: _angular_core.InputSignal<boolean>;
     /** Value for the native `autocomplete` attribute. */
     readonly autocomplete: _angular_core.InputSignal<string | undefined>;
+    /** Value for the native `spellcheck` attribute; left to the browser default when unset. */
+    readonly spellcheck: _angular_core.InputSignal<boolean | undefined>;
     /** `id` of a `<datalist>` to associate for native suggestions. */
     readonly list: _angular_core.InputSignal<string | undefined>;
     /** Minimum value for `type="number"`; the value is clamped to it on blur. */
@@ -2426,7 +2433,7 @@ declare class InputComponent implements ControlValueAccessor {
     /** Moves keyboard focus to the underlying native input element. */
     focus(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<InputComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<InputComponent, "ea-input", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; "role": { "alias": "role"; "required": false; "isSignal": true; }; "ariaExpanded": { "alias": "aria-expanded"; "required": false; "isSignal": true; }; "ariaControls": { "alias": "aria-controls"; "required": false; "isSignal": true; }; "ariaActivedescendant": { "alias": "aria-activedescendant"; "required": false; "isSignal": true; }; "ariaAutocomplete": { "alias": "aria-autocomplete"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "keepIcon": { "alias": "keepIcon"; "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; }; "autocomplete": { "alias": "autocomplete"; "required": false; "isSignal": true; }; "list": { "alias": "list"; "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; }; "maxLength": { "alias": "maxLength"; "required": false; "isSignal": true; }; "minLength": { "alias": "minLength"; "required": false; "isSignal": true; }; "autofocus": { "alias": "autofocus"; "required": false; "isSignal": true; }; "showPasswordToggle": { "alias": "showPasswordToggle"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "focused": "focused"; "blurred": "blurred"; }, never, ["[slot=prefix]", "[slot=suffix]"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<InputComponent, "ea-input", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; "role": { "alias": "role"; "required": false; "isSignal": true; }; "ariaExpanded": { "alias": "aria-expanded"; "required": false; "isSignal": true; }; "ariaControls": { "alias": "aria-controls"; "required": false; "isSignal": true; }; "ariaActivedescendant": { "alias": "aria-activedescendant"; "required": false; "isSignal": true; }; "ariaAutocomplete": { "alias": "aria-autocomplete"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "keepIcon": { "alias": "keepIcon"; "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; }; "autocomplete": { "alias": "autocomplete"; "required": false; "isSignal": true; }; "spellcheck": { "alias": "spellcheck"; "required": false; "isSignal": true; }; "list": { "alias": "list"; "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; }; "maxLength": { "alias": "maxLength"; "required": false; "isSignal": true; }; "minLength": { "alias": "minLength"; "required": false; "isSignal": true; }; "autofocus": { "alias": "autofocus"; "required": false; "isSignal": true; }; "showPasswordToggle": { "alias": "showPasswordToggle"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "focused": "focused"; "blurred": "blurred"; }, never, ["[slot=prefix]", "[slot=suffix]"], true, never>;
 }
 
 /** Placement of the menu list relative to its trigger. */