@eagami/ui 5.25.1 → 5.26.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eagami/ui",
-  "version": "5.25.1",
+  "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-border-default);
-      content: '';
+      @include divider-rule;
     }
   }
 }

package/src/styles/tokens/_colors.scss

@@ -115,7 +115,9 @@
   --color-border-subtle: var(--color-neutral-200);
   --color-border-default: var(--color-neutral-200);
   --color-border-strong: var(--color-neutral-400);
-  --color-divider: var(--color-border-subtle);
+  // Dividers are a translucent wash, like the state fills, so hairline rules
+  // inside a surface read evenly on base, elevated, and hover tones alike.
+  --color-divider: rgba(0, 0, 0, 0.1);
   --color-border-focus: var(--color-primary-500);
 
   // brand-default/-hover/-active are the brand colour as a surface (solid bg
@@ -220,9 +222,8 @@
   );
   --color-border-default: var(--color-neutral-400);
   --color-border-strong: var(--color-neutral-300);
-  // Dividers read as barely-there against dark surfaces at border-subtle, so
-  // they step one neutral lighter for a visible-but-quiet rule.
-  --color-divider: var(--color-neutral-600);
+  // Dividers flip to a light wash so the rule stays visible on every dark tier
+  --color-divider: rgba(255, 255, 255, 0.12);
 
   // Surface roles step one shade lighter than light mode so the button clears
   // WCAG 1.4.11 (3:1) on the near-black canvas while keeping a white label

package/types/eagami-ui.d.ts

@@ -67,7 +67,6 @@ interface EagamiMessages {
         dialogLabel: string;
         searchPlaceholder: string;
         empty: string;
-        clear: string;
     };
     colorPicker: {
         dialogLabel: string;
@@ -1136,6 +1135,69 @@ declare class CheckboxComponent implements ControlValueAccessor {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<CheckboxComponent, "ea-checkbox", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "count": { "alias": "count"; "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; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "indeterminate": { "alias": "indeterminate"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "checked": { "alias": "checked"; "required": false; "isSignal": true; }; }, { "checked": "checkedChange"; "changed": "changed"; }, never, never, true, never>;
 }
 
+/**
+ * Primary classification for an icon component. Every icon ships with a single
+ * `category` (read off the component's `static readonly category` field) plus
+ * a separate `static readonly isBrand` flag for whether it also depicts a
+ * recognisable brand mark.
+ *
+ * `feather`: derived from the upstream Feather Icons set (MIT). Uses Feather's
+ *            canonical slug and design.
+ * `eagami`:  Eagami UI additions beyond the Feather set: the brand mark, the
+ *            basic shape set and household icons, brand-filled variants of
+ *            Feather outlines, the coloured brand marks (`isBrand`), and line
+ *            icons adapted from Lucide (ISC).
+ */
+type IconCategory = 'feather' | 'eagami';
+/**
+ * Shape of the static metadata that every `ea-icon-*` component carries
+ * alongside its template. Read these fields directly off the component class
+ * (e.g. `GithubIconComponent.tags`) to build catalogues, search indices, or
+ * documentation tables without pulling in any other icon as a transitive
+ * dependency.
+ */
+interface IconMeta {
+    readonly slug: string;
+    readonly category: IconCategory;
+    /** True when the icon depicts a recognisable third-party or Eagami brand mark. */
+    readonly isBrand?: boolean;
+    readonly tags: ReadonlyArray<string>;
+}
+/** An icon component class augmented with its static metadata. */
+type IconComponentType = Type<unknown> & IconMeta;
+/**
+ * Abstract base class for every `ea-icon-*` component. Provides the shared
+ * host bindings that make icons render as inline-flex 1em squares, so
+ * individual icon components don't need to repeat the `host: { style: '...' }`
+ * config in their `@Component` decorator. Brand icons with their own host
+ * bindings (e.g. a colour binding tied to a `brand` input) layer those onto
+ * this base via additional `@HostBinding` getters.
+ *
+ * Feather-derived icons read the `strokeWidth` input via `[attr.stroke-width]`
+ * in their SVG template, so consumers can thin or thicken any icon at the
+ * call site (e.g. `<ea-icon-star [strokeWidth]="1.5" />`). Subclasses can
+ * change the default by setting `static override readonly defaultStrokeWidth`,
+ * used by icons whose dense paths read better at a different default
+ * (e.g. camera, upload at 1.5).
+ */
+declare abstract class IconComponentBase {
+    readonly display = "inline-flex";
+    readonly width = "1em";
+    readonly height = "1em";
+    static readonly defaultStrokeWidth: number;
+    readonly strokeWidth: _angular_core.InputSignal<number>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<IconComponentBase, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<IconComponentBase, never, never, { "strokeWidth": { "alias": "strokeWidth"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+declare class SearchIconComponent extends IconComponentBase {
+    static readonly slug = "search";
+    static readonly category: IconCategory;
+    static readonly tags: ReadonlyArray<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SearchIconComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SearchIconComponent, "ea-icon-search", never, {}, {}, never, never, true, never>;
+}
+
 /**
  * A single executable command in an `<ea-command-palette>`.
  *
@@ -1169,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
@@ -1196,25 +1260,33 @@ declare class CommandPaletteComponent {
     readonly open: _angular_core.ModelSignal<boolean>;
     readonly placeholder: _angular_core.InputSignal<string>;
     readonly emptyMessage: _angular_core.InputSignal<string>;
+    /**
+     * Optional predicate that disables every item it returns `true` for, in
+     * addition to each item's own `disabled` flag.
+     */
+    readonly disabledWhen: _angular_core.InputSignal<((item: CommandPaletteItem) => boolean) | undefined>;
     readonly execute: _angular_core.OutputEmitterRef<CommandPaletteItem<unknown>>;
     protected readonly messages: _angular_core.Signal<_eagami_ui.EagamiMessages>;
     protected readonly resolvedPlaceholder: _angular_core.Signal<string>;
     private readonly dialogEl;
     private readonly searchEl;
+    protected readonly searchIcon: typeof SearchIconComponent;
     protected readonly query: _angular_core.WritableSignal<string>;
     protected readonly listboxId: string;
     /**
      * 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
@@ -1229,9 +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;
+    /** 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
@@ -1240,23 +1314,22 @@ declare class CommandPaletteComponent {
      * next-click target).
      */
     protected showActiveHighlight(flatIndex: number): boolean;
-    protected onQueryInput(event: Event): void;
-    protected clearQuery(): void;
+    protected onQueryChange(value: string): void;
     protected onSearchKeydown(event: KeyboardEvent): void;
     /** Wrapping arrow-key move that skips disabled items. */
     private moveActive;
     /** 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;
     private executeItem;
     private scrollActiveIntoView;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<CommandPaletteComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CommandPaletteComponent, "ea-command-palette", never, { "items": { "alias": "items"; "required": true; "isSignal": true; }; "open": { "alias": "open"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "emptyMessage": { "alias": "emptyMessage"; "required": false; "isSignal": true; }; }, { "open": "openChange"; "execute": "execute"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CommandPaletteComponent, "ea-command-palette", never, { "items": { "alias": "items"; "required": true; "isSignal": true; }; "open": { "alias": "open"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "emptyMessage": { "alias": "emptyMessage"; "required": false; "isSignal": true; }; "disabledWhen": { "alias": "disabledWhen"; "required": false; "isSignal": true; }; }, { "open": "openChange"; "execute": "execute"; }, never, never, true, never>;
 }
 
 /** Visual size of the color picker trigger. */
@@ -2254,12 +2327,24 @@ declare class InputComponent implements ControlValueAccessor {
     readonly label: _angular_core.InputSignal<string | undefined>;
     /** Accessible name for the control when no visible `label` is set. */
     readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
+    /** ARIA role applied to the native input, e.g. `combobox` for a typeahead host. */
+    readonly role: _angular_core.InputSignal<string | undefined>;
+    /** Expanded state of a controlled popup, forwarded as `aria-expanded`. */
+    readonly ariaExpanded: _angular_core.InputSignal<boolean | undefined>;
+    /** `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 | 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. */
     readonly type: _angular_core.InputSignal<InputType>;
     /** Placeholder shown while the field is empty. */
     readonly placeholder: _angular_core.InputSignal<string>;
     /** Leading icon component rendered before the text, e.g. a search or filter glyph. */
     readonly icon: _angular_core.InputSignal<Type<unknown> | undefined>;
+    /** Keeps the leading icon while the field has a value; when false it shows only alongside the placeholder. */
+    readonly keepIcon: _angular_core.InputSignal<boolean>;
     /** Visual size of the field. */
     readonly size: _angular_core.InputSignal<EaSize>;
     /** Helper text shown below the field; hidden while an error is showing. */
@@ -2346,7 +2431,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; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "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; }; "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. */
@@ -4354,61 +4439,6 @@ declare class VirtualListComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<VirtualListComponent, "ea-virtual-list", never, { "items": { "alias": "items"; "required": true; "isSignal": true; }; "itemHeight": { "alias": "itemHeight"; "required": true; "isSignal": true; }; "viewportHeight": { "alias": "viewportHeight"; "required": true; "isSignal": true; }; "overscan": { "alias": "overscan"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, { "scrollIndexChange": "scrollIndexChange"; }, ["itemTemplate"], never, true, never>;
 }
 
-/**
- * Primary classification for an icon component. Every icon ships with a single
- * `category` (read off the component's `static readonly category` field) plus
- * a separate `static readonly isBrand` flag for whether it also depicts a
- * recognisable brand mark.
- *
- * `feather`: derived from the upstream Feather Icons set (MIT). Uses Feather's
- *            canonical slug and design.
- * `eagami`:  Eagami UI additions beyond the Feather set: the brand mark, the
- *            basic shape set and household icons, brand-filled variants of
- *            Feather outlines, the coloured brand marks (`isBrand`), and line
- *            icons adapted from Lucide (ISC).
- */
-type IconCategory = 'feather' | 'eagami';
-/**
- * Shape of the static metadata that every `ea-icon-*` component carries
- * alongside its template. Read these fields directly off the component class
- * (e.g. `GithubIconComponent.tags`) to build catalogues, search indices, or
- * documentation tables without pulling in any other icon as a transitive
- * dependency.
- */
-interface IconMeta {
-    readonly slug: string;
-    readonly category: IconCategory;
-    /** True when the icon depicts a recognisable third-party or Eagami brand mark. */
-    readonly isBrand?: boolean;
-    readonly tags: ReadonlyArray<string>;
-}
-/** An icon component class augmented with its static metadata. */
-type IconComponentType = Type<unknown> & IconMeta;
-/**
- * Abstract base class for every `ea-icon-*` component. Provides the shared
- * host bindings that make icons render as inline-flex 1em squares, so
- * individual icon components don't need to repeat the `host: { style: '...' }`
- * config in their `@Component` decorator. Brand icons with their own host
- * bindings (e.g. a colour binding tied to a `brand` input) layer those onto
- * this base via additional `@HostBinding` getters.
- *
- * Feather-derived icons read the `strokeWidth` input via `[attr.stroke-width]`
- * in their SVG template, so consumers can thin or thicken any icon at the
- * call site (e.g. `<ea-icon-star [strokeWidth]="1.5" />`). Subclasses can
- * change the default by setting `static override readonly defaultStrokeWidth`,
- * used by icons whose dense paths read better at a different default
- * (e.g. camera, upload at 1.5).
- */
-declare abstract class IconComponentBase {
-    readonly display = "inline-flex";
-    readonly width = "1em";
-    readonly height = "1em";
-    static readonly defaultStrokeWidth: number;
-    readonly strokeWidth: _angular_core.InputSignal<number>;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<IconComponentBase, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<IconComponentBase, never, never, { "strokeWidth": { "alias": "strokeWidth"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
-}
-
 /**
  * Resolves an icon's human-readable display name. Pass the component class
  * (`iconDisplayName(GithubIconComponent)` returns `'GitHub'`) or its slug
@@ -6928,14 +6958,6 @@ declare class ScissorsIconComponent extends IconComponentBase {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<ScissorsIconComponent, "ea-icon-scissors", never, {}, {}, never, never, true, never>;
 }
 
-declare class SearchIconComponent extends IconComponentBase {
-    static readonly slug = "search";
-    static readonly category: IconCategory;
-    static readonly tags: ReadonlyArray<string>;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SearchIconComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SearchIconComponent, "ea-icon-search", never, {}, {}, never, never, true, never>;
-}
-
 declare class SendIconComponent extends IconComponentBase {
     static readonly slug = "send";
     static readonly category: IconCategory;