@eagami/ui 5.56.0 → 5.58.0

package/package.json

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

@@ -191,6 +191,55 @@ $target-size-min: 24px;
   user-select: none;
 }
 
+// Floating surface of a menu-like list, sized in em so it scales with the host
+// component's `size`. Positioned by the host `<ea-popover>`; the background is
+// the caller's to set.
+@mixin menu-surface {
+  overflow-y: auto;
+  min-width: 10em;
+  padding: 0.25em 0;
+  border: var(--border-width-thin) solid var(--color-border-default);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-lg);
+  @include elevated-surface-border;
+}
+
+// Row of a menu-like list. `$disabled` is the selector marking a row that cannot
+// be activated, which is left out of the hover and focus highlight.
+@mixin menu-row($disabled) {
+  display: flex;
+  align-items: center;
+  gap: 0.5em;
+  width: 100%;
+  padding: 0.5em 0.75em;
+  // Buttons do not inherit font-size by default, so take the list's; every
+  // dimension here is in em and scales with it
+  font-size: inherit;
+  text-align: start;
+  font-family: var(--font-family-sans);
+  border: none;
+  background: transparent;
+  color: var(--color-text-primary);
+  cursor: pointer;
+  transition: var(--transition-colors);
+
+  // state-hover (a translucent wash) reads on the elevated menu surface in both
+  // themes; bg-muted collapses onto that surface's shade in dark mode.
+  &:hover:not(#{$disabled}),
+  &:focus-visible:not(#{$disabled}) {
+    background-color: var(--color-state-hover);
+
+    @media (forced-colors: active) {
+      background-color: Highlight;
+      color: HighlightText;
+    }
+  }
+
+  &:focus-visible {
+    outline: none;
+  }
+}
+
 // Strips the geometry the UA stylesheet forces on a `[popover]` element (a
 // centred, viewport-filling, scrollable box) so a surface promoted into the top
 // layer keeps the box it has in the normal layer. Colour and spacing chrome

package/types/eagami-ui.d.ts

@@ -56,6 +56,7 @@ export interface EagamiMessages {
   };
   breadcrumbs: {
     label: string;
+    showHidden: string;
   };
   chart: {
     /** Announced role of a chart's plot, in place of the generic "group". */
@@ -135,6 +136,10 @@ export interface EagamiMessages {
   };
   dropdown: {
     placeholder: string;
+    clear: string;
+    dialogLabel: string;
+    searchPlaceholder: string;
+    searchEmpty: string;
   };
   fieldLabel: {
     /** Accessible name of the button that reveals a field label's help. */
@@ -1679,6 +1684,8 @@ export declare class BarChartComponent {
 export type BreadcrumbsSeparator = 'chevron' | 'slash';
 /** Visual size of the breadcrumb trail. */
 export type BreadcrumbsSize = EaSize;
+/** What a trail wider than its container does: move levels into a menu, or scroll sideways. */
+export type BreadcrumbsOverflow = 'menu' | 'scroll';
 /** Single entry in a breadcrumb trail. */
 export interface BreadcrumbItem {
   label: string;
@@ -1691,24 +1698,77 @@ export interface BreadcrumbClickEvent {
   index: number;
   event: MouseEvent;
 }
+/** A breadcrumb paired with its position in the full trail. */
+interface IndexedBreadcrumb {
+  item: BreadcrumbItem;
+  index: number;
+}
 /**
  * Navigation trail that shows the user's location within a hierarchy. Items
  * with an `href` render as links, others render as buttons; the final item is
- * always treated as the current page and is non-interactive.
+ * always treated as the current page and is non-interactive. Levels that go
+ * past `maxItems`, or that the container has no room for, move into a menu
+ * behind a button after the first item, earliest levels first, and return to
+ * the trail as room opens up.
  */
 export declare class BreadcrumbsComponent {
-  private readonly i18n;
+  protected readonly i18n: EagamiI18nService;
+  private readonly popover;
+  protected readonly expandEl: import("@angular/core").Signal<ElementRef<HTMLButtonElement> | undefined>;
+  private readonly menuEl;
+  private readonly sizerEl;
+  private readonly sizerItemEls;
+  private readonly sizerExpandEl;
   readonly items: import("@angular/core").InputSignal<BreadcrumbItem[]>;
   readonly separator: import("@angular/core").InputSignal<BreadcrumbsSeparator>;
   /** Visual size of the breadcrumb trail. */
   readonly size: import("@angular/core").InputSignal<EaSize>;
+  /**
+   * Most items shown in the trail at once. The earliest levels after the first
+   * item move into a menu to stay within it. Never fewer than two.
+   */
+  readonly maxItems: import("@angular/core").InputSignal<number | undefined>;
+  /**
+   * What happens when the trail is wider than its container. `menu` moves as
+   * many levels as it takes into a menu, earliest first, keeping the first and
+   * last item in the trail. `scroll` keeps every level and scrolls sideways.
+   */
+  readonly overflow: import("@angular/core").InputSignal<BreadcrumbsOverflow>;
   readonly ariaLabel: import("@angular/core").InputSignal<string | undefined>;
   /** Fires when a non-disabled, non-final breadcrumb is activated. */
   readonly clicked: import("@angular/core").OutputEmitterRef<BreadcrumbClickEvent>;
+  protected readonly menuId: string;
+  protected readonly menuOpen: import("@angular/core").WritableSignal<boolean>;
+  private menuPinned;
+  private readonly menuFocusPending;
+  /** Levels the container has no room for, counted from the one after the first item. */
+  private readonly crowdedOut;
   /** Accessible label for the breadcrumb nav, falling back to the active locale. */
   readonly resolvedAriaLabel: import("@angular/core").Signal<string>;
+  private readonly indexed;
+  private readonly menuCount;
+  /** Items in the trail, each carrying its index into the full list. */
+  protected readonly crumbs: import("@angular/core").Signal<IndexedBreadcrumb[]>;
+  /** Items moved into the menu, in trail order. */
+  protected readonly menuCrumbs: import("@angular/core").Signal<IndexedBreadcrumb[]>;
+  constructor();
   isLast(index: number): boolean;
   handleClick(item: BreadcrumbItem, index: number, event: MouseEvent): void;
+  protected toggleMenu(): void;
+  protected handleExpandKeydown(event: KeyboardEvent): void;
+  protected handleExpandEnter(): void;
+  protected handleHoverLeave(event: MouseEvent): void;
+  protected handleMenuClick(crumb: IndexedBreadcrumb, event: MouseEvent): void;
+  protected handleMenuKeydown(event: KeyboardEvent): void;
+  protected closeMenu(restoreFocus?: boolean): void;
+  private openMenu;
+  private menuItems;
+  /**
+   * Works out how many levels the container has no room for. The widths come
+   * from the sizer, which lays out the whole trail whatever is collapsed, so
+   * the answer never depends on what is currently in the menu.
+   */
+  private fit;
   static ɵfac: i0.ɵɵFactoryDeclaration<BreadcrumbsComponent, never>;
   static ɵcmp: i0.ɵɵComponentDeclaration<BreadcrumbsComponent, "ea-breadcrumbs", never, {
     "items": {
@@ -1726,6 +1786,16 @@ export declare class BreadcrumbsComponent {
       "required": false;
       "isSignal": true;
     };
+    "maxItems": {
+      "alias": "maxItems";
+      "required": false;
+      "isSignal": true;
+    };
+    "overflow": {
+      "alias": "overflow";
+      "required": false;
+      "isSignal": true;
+    };
     "ariaLabel": {
       "alias": "aria-label";
       "required": false;
@@ -3500,6 +3570,11 @@ export type DatePickerFormat = 'short' | 'medium' | 'long';
 export type DatePickerWeekStart = 0 | 1;
 /** Value accepted via `writeValue`: a `Date`, ISO/parseable string, or `null`. */
 export type DatePickerValue = Date | string | null;
+/** Span of dates that includes both its start and its end. */
+export interface DatePickerDateRange {
+  start: Date;
+  end: Date;
+}
 interface CalendarDay {
   date: Date;
   day: number;
@@ -3513,10 +3588,10 @@ interface CalendarDay {
  * 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`.
+ * Supports `min`/`max` bounds, disabled weekdays and dates, 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`.
  */
 export declare class DatePickerComponent implements ControlValueAccessor {
   protected readonly fieldEl: import("@angular/core").Signal<ElementRef<HTMLElement> | undefined>;
@@ -3540,6 +3615,10 @@ export declare class DatePickerComponent implements ControlValueAccessor {
   readonly errorMessages: import("@angular/core").InputSignal<Partial<Record<string, string>> | undefined>;
   readonly minDate: import("@angular/core").InputSignal<Date | null>;
   readonly maxDate: import("@angular/core").InputSignal<Date | null>;
+  /** Weekdays that cannot be picked, numbered as `Date.getDay()` does: 0 for Sunday through 6 for Saturday. */
+  readonly disabledWeekdays: import("@angular/core").InputSignal<readonly number[]>;
+  /** Individual dates and ranges that cannot be picked, on top of the `minDate` and `maxDate` bounds. */
+  readonly disabledDates: import("@angular/core").InputSignal<readonly (Date | DatePickerDateRange)[]>;
   readonly format: import("@angular/core").InputSignal<DatePickerFormat>;
   readonly weekStartsOn: import("@angular/core").InputSignal<DatePickerWeekStart>;
   readonly locale: import("@angular/core").InputSignal<string | undefined>;
@@ -3628,7 +3707,8 @@ export declare class DatePickerComponent implements ControlValueAccessor {
   protected handleInputKeydown(event: KeyboardEvent): void;
   private commitDraft;
   private applyValue;
-  private isOutOfRange;
+  private isUnavailable;
+  private covers;
   handleGridKeydown(event: KeyboardEvent): void;
   /** Called by `<ea-popover>` when the user clicks outside the picker. */
   onPopoverCloseRequested(): void;
@@ -3705,6 +3785,16 @@ export declare class DatePickerComponent implements ControlValueAccessor {
       "required": false;
       "isSignal": true;
     };
+    "disabledWeekdays": {
+      "alias": "disabledWeekdays";
+      "required": false;
+      "isSignal": true;
+    };
+    "disabledDates": {
+      "alias": "disabledDates";
+      "required": false;
+      "isSignal": true;
+    };
     "format": {
       "alias": "format";
       "required": false;
@@ -4146,12 +4236,16 @@ export type DropdownSize = EaSize;
  * Single-select dropdown with a custom popup list. Supports keyboard
  * navigation (arrow keys, Enter/Space to select, Escape to close), closes
  * on outside click or viewport scroll/resize, and integrates with Angular
- * forms via `ControlValueAccessor`. Positioning, dismissal, and SSR-safe
- * scroll handling are provided by `<ea-popover>`.
+ * forms via `ControlValueAccessor`. Optionally offers a clear button on the
+ * trigger and a search field above the options. Positioning, dismissal, and
+ * SSR-safe scroll handling are provided by `<ea-popover>`.
  */
 export declare class DropdownComponent implements ControlValueAccessor {
   private readonly elRef;
-  private readonly i18n;
+  private readonly popover;
+  private readonly searchEl;
+  protected readonly i18n: EagamiI18nService;
+  private readonly injector;
   readonly label: import("@angular/core").InputSignal<string | undefined>;
   /** Optional icon component rendered before the label text. */
   readonly labelIcon: import("@angular/core").InputSignal<Type<unknown> | undefined>;
@@ -4164,16 +4258,21 @@ export declare class DropdownComponent implements ControlValueAccessor {
   readonly disabled: import("@angular/core").InputSignal<boolean>;
   readonly readonly: import("@angular/core").InputSignal<boolean>;
   readonly required: import("@angular/core").InputSignal<boolean>;
+  /** Shows a clear button on the trigger while an option is selected. */
+  readonly clearable: import("@angular/core").InputSignal<boolean>;
+  /** Adds a search field above the options that filters them as the user types. */
+  readonly searchable: import("@angular/core").InputSignal<boolean>;
   readonly hint: import("@angular/core").InputSignal<string | undefined>;
   readonly errorMsg: import("@angular/core").InputSignal<string | undefined>;
   /** Per-validator-key message overrides for a bound form control (e.g. `{ required: '...' }`). */
   readonly errorMessages: import("@angular/core").InputSignal<Partial<Record<string, string>> | undefined>;
   readonly id: import("@angular/core").InputSignal<string>;
   readonly value: import("@angular/core").ModelSignal<string>;
-  /** Fires with the new value when the user selects an option. */
+  /** Fires with the new value when the user selects an option or clears the selection. */
   readonly changed: import("@angular/core").OutputEmitterRef<string>;
   readonly isOpen: import("@angular/core").WritableSignal<boolean>;
   readonly focusedIndex: import("@angular/core").WritableSignal<number>;
+  protected readonly searchTerm: import("@angular/core").WritableSignal<string>;
   private readonly _formDisabled;
   private typeaheadQuery;
   private typeaheadTimer;
@@ -4189,21 +4288,29 @@ export declare class DropdownComponent implements ControlValueAccessor {
   private readonly optionGroups;
   /** Whether the consumer supplied groups, which the list exposes as ARIA groups. */
   protected readonly grouped: import("@angular/core").Signal<boolean>;
-  /** Every option in the order given, flattened across groups; drives all index maths. */
+  /** Every option in the order given, flattened across groups. */
   private readonly flatOptions;
-  /** Groups to render, each option carrying its index into the flattened list. */
+  private readonly filteredGroups;
+  /** Options matching the search text, flattened across groups; drives all index maths. */
+  protected readonly filteredOptions: import("@angular/core").Signal<SelectOption[]>;
+  /** Groups to render, each option carrying its index into the filtered list. */
   protected readonly renderedGroups: import("@angular/core").Signal<RenderedGroup[]>;
   protected readonly selectedIndex: import("@angular/core").Signal<number>;
   readonly selectedLabel: import("@angular/core").Signal<string>;
   /** Placeholder text, falling back to the active locale's translation. */
   readonly resolvedPlaceholder: import("@angular/core").Signal<string>;
   readonly triggerLabelledBy: import("@angular/core").Signal<string | null>;
+  protected readonly showClear: import("@angular/core").Signal<boolean>;
+  protected readonly listboxId: import("@angular/core").Signal<string>;
+  /** Id of the keyboard-focused option, for `aria-activedescendant`. */
+  protected readonly activeOptionId: import("@angular/core").Signal<string | null>;
   readonly triggerClasses: import("@angular/core").Signal<{
     [x: string]: boolean;
     'ea-dropdown__trigger--error': boolean;
     'ea-dropdown__trigger--open': boolean;
     'ea-dropdown__trigger--disabled': boolean;
     'ea-dropdown__trigger--readonly': boolean;
+    'ea-dropdown__trigger--clearable': boolean;
   }>;
   readonly menuClasses: import("@angular/core").Signal<{
     [x: string]: boolean;
@@ -4218,15 +4325,23 @@ export declare class DropdownComponent implements ControlValueAccessor {
   select(option: SelectOption): void;
   /** Closes the dropdown list without changing the current value. */
   close(): void;
+  protected clear(): void;
   /** Moves keyboard focus to the dropdown trigger. */
   focus(): void;
   /** Called by `<ea-popover>` when the user clicks outside the dropdown. */
   onPopoverCloseRequested(): void;
   handleKeydown(event: KeyboardEvent): void;
+  protected onSearchInput(term: string): void;
+  protected handleSearchKeydown(event: KeyboardEvent): void;
+  protected onMenuMousedown(event: MouseEvent): void;
+  private commit;
+  private startSearch;
+  private focusFirstMatch;
   private selectFocusedOrOpen;
   private focusEdge;
   /** Keeps the keyboard-focused option visible inside the scrolling listbox. */
   private setFocusedIndex;
+  private scrollOptionIntoView;
   private handleTypeahead;
   private moveFocus;
   static ɵfac: i0.ɵɵFactoryDeclaration<DropdownComponent, never>;
@@ -4276,6 +4391,16 @@ export declare class DropdownComponent implements ControlValueAccessor {
       "required": false;
       "isSignal": true;
     };
+    "clearable": {
+      "alias": "clearable";
+      "required": false;
+      "isSignal": true;
+    };
+    "searchable": {
+      "alias": "searchable";
+      "required": false;
+      "isSignal": true;
+    };
     "hint": {
       "alias": "hint";
       "required": false;
@@ -7738,6 +7863,7 @@ export declare class TabComponent implements OnInit, OnDestroy {
   readonly disabled: import("@angular/core").InputSignal<boolean>;
   readonly id: import("@angular/core").InputSignal<string>;
   readonly isActive: import("@angular/core").Signal<boolean>;
+  protected readonly vertical: import("@angular/core").Signal<boolean>;
   ngOnInit(): void;
   ngOnDestroy(): void;
   static ɵfac: i0.ɵɵFactoryDeclaration<TabComponent, never>;
@@ -7768,6 +7894,8 @@ export declare class TabComponent implements OnInit, OnDestroy {
 export type TabsVariant = 'underline' | 'filled';
 /** Visual size of the tabs. */
 export type TabsSize = EaSize;
+/** Whether the tab bar runs along the top of the panel or down its side. */
+export type TabsOrientation = 'horizontal' | 'vertical';
 /**
  * Tab bar paired with content panels. Child `ea-tab` components register
  * themselves automatically and the active panel is shown based on the
@@ -7778,6 +7906,8 @@ export declare class TabsComponent {
   readonly registeredTabs: import("@angular/core").WritableSignal<TabComponent[]>;
   readonly variant: import("@angular/core").InputSignal<TabsVariant>;
   readonly size: import("@angular/core").InputSignal<EaSize>;
+  /** Places the tab bar above the panel, or in a column beside it. */
+  readonly orientation: import("@angular/core").InputSignal<TabsOrientation>;
   /** Accessible name for the tablist, announced by screen readers. */
   readonly ariaLabel: import("@angular/core").InputSignal<string | undefined>;
   readonly activeTab: import("@angular/core").ModelSignal<string>;
@@ -7802,6 +7932,11 @@ export declare class TabsComponent {
       "required": false;
       "isSignal": true;
     };
+    "orientation": {
+      "alias": "orientation";
+      "required": false;
+      "isSignal": true;
+    };
     "ariaLabel": {
       "alias": "ariaLabel";
       "required": false;
@@ -7864,6 +7999,12 @@ export declare class TooltipDirective implements OnDestroy {
    * to the viewport, which no value can push the bubble past.
    */
   readonly maxWidth: import("@angular/core").InputSignal<number | undefined>;
+  /**
+   * Wait in ms before the bubble appears on hover or keyboard focus, so a
+   * pointer passing over the trigger does not flash it. Leaving the trigger
+   * within the wait cancels the bubble.
+   */
+  readonly showDelay: import("@angular/core").InputSignal<number>;
   /**
    * Grace period in ms before a bubble the viewport clamp made scrollable hides
    * after the pointer leaves, long enough to cross the gap onto the bubble and
@@ -7881,6 +8022,7 @@ export declare class TooltipDirective implements OnDestroy {
   private placedPosition;
   private templateView;
   private scrollable;
+  private showTimer;
   private hideTimer;
   private pointerInside;
   private readonly tooltipId;
@@ -7903,6 +8045,8 @@ export declare class TooltipDirective implements OnDestroy {
   private controlled;
   ngOnDestroy(): void;
   private syncPointerListeners;
+  private requestShow;
+  private cancelPendingShow;
   private show;
   private shrinkToContent;
   private requestHide;
@@ -7943,6 +8087,11 @@ export declare class TooltipDirective implements OnDestroy {
       "required": false;
       "isSignal": true;
     };
+    "showDelay": {
+      "alias": "showDelay";
+      "required": false;
+      "isSignal": true;
+    };
     "dismissDelay": {
       "alias": "dismissDelay";
       "required": false;
@@ -8112,8 +8261,8 @@ export interface TextareaSelection {
 }
 /**
  * Multiline text field that mirrors the `ea-input` API. Supports configurable
- * `resize` direction and `maxlength`, exposes the caret through
- * `getSelection()` and `insertText()`, and integrates with Angular
+ * `resize` direction, `maxlength` and a character count, exposes the caret
+ * through `getSelection()` and `insertText()`, and integrates with Angular
  * forms via `ControlValueAccessor`.
  */
 export declare class TextareaComponent implements ControlValueAccessor {
@@ -8136,6 +8285,8 @@ export declare class TextareaComponent implements ControlValueAccessor {
   readonly required: import("@angular/core").InputSignal<boolean>;
   readonly resize: import("@angular/core").InputSignal<TextareaResize>;
   readonly maxlength: import("@angular/core").InputSignal<number | undefined>;
+  /** Shows the number of characters typed below the field, against `maxlength` when one is set. */
+  readonly showCount: import("@angular/core").InputSignal<boolean>;
   /** Optional pixel ceiling for the textarea's height. Beyond it, the inner
    * field scrolls vertically instead of growing. */
   readonly maxHeight: import("@angular/core").InputSignal<number | undefined>;
@@ -8158,6 +8309,8 @@ export declare class TextareaComponent implements ControlValueAccessor {
   readonly hasError: import("@angular/core").Signal<boolean>;
   readonly showError: import("@angular/core").Signal<boolean>;
   readonly showHint: import("@angular/core").Signal<boolean>;
+  protected readonly countText: import("@angular/core").Signal<string>;
+  protected readonly describedBy: import("@angular/core").Signal<string | null>;
   readonly wrapperClasses: import("@angular/core").Signal<{
     [x: string]: boolean;
     'ea-textarea-wrapper--error': boolean;
@@ -8260,6 +8413,11 @@ export declare class TextareaComponent implements ControlValueAccessor {
       "required": false;
       "isSignal": true;
     };
+    "showCount": {
+      "alias": "showCount";
+      "required": false;
+      "isSignal": true;
+    };
     "maxHeight": {
       "alias": "maxHeight";
       "required": false;