@eagami/ui 5.26.0 → 5.26.1

package/package.json

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