@eagami/ui 5.57.0 → 5.58.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eagami/ui",
-  "version": "5.57.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". */
@@ -1683,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;
@@ -1695,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": {
@@ -1730,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;
@@ -3504,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;
@@ -3517,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>;
@@ -3544,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>;
@@ -3632,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;
@@ -3709,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;
@@ -7777,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>;
@@ -7807,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
@@ -7817,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>;
@@ -7841,6 +7932,11 @@ export declare class TabsComponent {
       "required": false;
       "isSignal": true;
     };
+    "orientation": {
+      "alias": "orientation";
+      "required": false;
+      "isSignal": true;
+    };
     "ariaLabel": {
       "alias": "ariaLabel";
       "required": false;
@@ -8165,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 {
@@ -8189,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>;
@@ -8211,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;
@@ -8313,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;