@eagami/ui 5.27.0 → 5.29.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eagami/ui",
-  "version": "5.27.0",
+  "version": "5.29.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/types/eagami-ui.d.ts

@@ -158,6 +158,7 @@ interface EagamiMessages {
         clearAll: string;
         removeOption: (label: string) => string;
         selectedCount: (count: number) => string;
+        create: (text: string) => string;
     };
     paginator: {
         label: string;
@@ -588,9 +589,11 @@ declare function oklchToHex(oklch: Oklch): string;
 type EaSize = '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 /**
  * Size scale for width-based components (panels such as drawer and dialog),
- * adding a full-bleed option on top of the standard scale.
+ * adding a step above `xl` and a full-bleed option on top of the standard
+ * scale. A panel holds layouts (grids, tables) that a control never does, so it
+ * runs one step wider before the jump to full.
  */
-type EaWidth = EaSize | 'full';
+type EaWidth = EaSize | '2xl' | 'full';
 
 /** Heading level exposed by each item's header for assistive technology. */
 type AccordionHeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
@@ -867,7 +870,9 @@ declare class AvatarEditorComponent implements OnDestroy {
     private readonly boundWheel;
     constructor();
     ngOnDestroy(): void;
+    onDragEnter(event: DragEvent): void;
     onDragOver(event: DragEvent): void;
+    private acceptDrag;
     onDragLeave(event: DragEvent): void;
     onDrop(event: DragEvent): void;
     onFileSelected(event: Event): void;
@@ -900,6 +905,7 @@ declare class AvatarEditorComponent implements OnDestroy {
     private loadFromUrl;
     private loadFile;
     private scheduleDrawAfterRender;
+    private drawLoadedImage;
     private centerImage;
     private getScale;
     private getDrawParams;
@@ -1102,6 +1108,12 @@ declare class CheckboxComponent implements ControlValueAccessor {
     /** Per-validator-key message overrides for a bound form control (e.g. `{ required: '...' }`). */
     readonly errorMessages: _angular_core.InputSignal<Partial<Record<string, string>> | undefined>;
     readonly size: _angular_core.InputSignal<EaSize>;
+    /**
+     * Ellipsize a label too long for the space the checkbox is given, revealing
+     * the full text in a tooltip while it is clipped. Off by default, since a
+     * checkbox otherwise widens its column rather than hiding any of its label.
+     */
+    readonly truncate: _angular_core.InputSignal<boolean>;
     readonly disabled: _angular_core.InputSignal<boolean>;
     readonly required: _angular_core.InputSignal<boolean>;
     readonly indeterminate: _angular_core.InputSignal<boolean>;
@@ -1117,8 +1129,11 @@ declare class CheckboxComponent implements ControlValueAccessor {
     readonly hasError: _angular_core.Signal<boolean>;
     readonly showError: _angular_core.Signal<boolean>;
     readonly showHint: _angular_core.Signal<boolean>;
+    /** What a clamped label reveals: the count rides along, since the ellipsis takes it first. */
+    protected readonly clampedText: _angular_core.Signal<string>;
     readonly hostClasses: _angular_core.Signal<{
         [x: string]: boolean;
+        'ea-checkbox--truncate': boolean;
         'ea-checkbox--disabled': boolean;
         'ea-checkbox--checked': boolean;
         'ea-checkbox--indeterminate': boolean;
@@ -1130,9 +1145,10 @@ declare class CheckboxComponent implements ControlValueAccessor {
     registerOnChange(fn: (value: boolean) => void): void;
     registerOnTouched(fn: () => void): void;
     setDisabledState(isDisabled: boolean): void;
+    handleKeydown(event: KeyboardEvent): void;
     handleChange(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<CheckboxComponent, never>;
-    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>;
+    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; }; "truncate": { "alias": "truncate"; "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>;
 }
 
 /**
@@ -1256,6 +1272,7 @@ interface GroupedItems {
 declare class CommandPaletteComponent {
     private readonly i18n;
     private readonly hostEl;
+    private readonly press;
     readonly items: _angular_core.InputSignal<readonly CommandPaletteItem<unknown>[]>;
     readonly open: _angular_core.ModelSignal<boolean>;
     readonly placeholder: _angular_core.InputSignal<string>;
@@ -1372,6 +1389,12 @@ declare class ColorPickerComponent implements ControlValueAccessor {
     readonly showAlpha: _angular_core.InputSignal<boolean>;
     /** Whether to show the clear button when a value is set. */
     readonly clearable: _angular_core.InputSignal<boolean>;
+    /**
+     * Trigger as a bare square swatch instead of a field with the value beside
+     * it, for a colour sitting in a dense row or a toolbar. The value text and
+     * the clear button, which have nowhere to go at that size, are dropped.
+     */
+    readonly compact: _angular_core.InputSignal<boolean>;
     /** Output format. `all` lets the user cycle hex/rgb/hsl in the popover; a specific value locks it. */
     readonly format: _angular_core.InputSignal<ColorPickerFormat>;
     /** Preset swatches shown at the bottom of the popover. Pass an empty array to hide. */
@@ -1438,6 +1461,7 @@ declare class ColorPickerComponent implements ControlValueAccessor {
     readonly triggerLabelledBy: _angular_core.Signal<string | null>;
     readonly triggerClasses: _angular_core.Signal<{
         [x: string]: boolean;
+        'ea-color-picker__trigger--compact': boolean;
         'ea-color-picker__trigger--error': boolean;
         'ea-color-picker__trigger--open': boolean;
         'ea-color-picker__trigger--disabled': boolean;
@@ -1514,7 +1538,7 @@ declare class ColorPickerComponent implements ControlValueAccessor {
     private commit;
     private refreshHexInput;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ColorPickerComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ColorPickerComponent, "ea-color-picker", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "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; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "errorMsg": { "alias": "errorMsg"; "required": false; "isSignal": true; }; "errorMessages": { "alias": "errorMessages"; "required": false; "isSignal": true; }; "showAlpha": { "alias": "showAlpha"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "format": { "alias": "format"; "required": false; "isSignal": true; }; "presets": { "alias": "presets"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "changed": "changed"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ColorPickerComponent, "ea-color-picker", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "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; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "errorMsg": { "alias": "errorMsg"; "required": false; "isSignal": true; }; "errorMessages": { "alias": "errorMessages"; "required": false; "isSignal": true; }; "showAlpha": { "alias": "showAlpha"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "compact": { "alias": "compact"; "required": false; "isSignal": true; }; "format": { "alias": "format"; "required": false; "isSignal": true; }; "presets": { "alias": "presets"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "changed": "changed"; }, never, never, true, never>;
 }
 
 /** Vertical density preset for table rows and header cells. */
@@ -1826,10 +1850,24 @@ declare class DialogComponent implements AfterContentChecked {
     private previouslyFocused;
     protected readonly i18n: EagamiI18nService;
     private readonly isBrowser;
+    private readonly press;
     readonly width: _angular_core.InputSignal<EaWidth>;
     readonly closeOnBackdrop: _angular_core.InputSignal<boolean>;
     readonly closeOnEscape: _angular_core.InputSignal<boolean>;
     readonly showClose: _angular_core.InputSignal<boolean>;
+    /**
+     * Disables the built-in close button while a task is in flight (a save, an
+     * upload). It governs that button alone; pair it with `closeOnEscape` /
+     * `closeOnBackdrop` or `manualClose` to hold the other routes shut too.
+     */
+    readonly closeDisabled: _angular_core.InputSignal<boolean>;
+    /**
+     * Hands every close route to the consumer: the dialog reports
+     * `closeRequested` and stays open until `open` is set false, so an unsaved
+     * edit can be confirmed first. Escape and the backdrop still report, which is
+     * what `closeOnEscape` / `closeOnBackdrop` remove entirely.
+     */
+    readonly manualClose: _angular_core.InputSignal<boolean>;
     readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
     readonly id: _angular_core.InputSignal<string>;
     readonly open: _angular_core.ModelSignal<boolean>;
@@ -1837,6 +1875,8 @@ declare class DialogComponent implements AfterContentChecked {
     readonly opened: _angular_core.OutputEmitterRef<void>;
     /** Fires when the dialog closes (via close button, backdrop, or Escape). */
     readonly closed: _angular_core.OutputEmitterRef<void>;
+    /** Fires under `manualClose` for every close the user asks for, leaving the dialog open. */
+    readonly closeRequested: _angular_core.OutputEmitterRef<void>;
     readonly panelClasses: _angular_core.Signal<{
         [x: string]: boolean;
     }>;
@@ -1845,10 +1885,12 @@ declare class DialogComponent implements AfterContentChecked {
     ngAfterContentChecked(): void;
     constructor();
     handleClose(): void;
+    /** Every close route the user can take, routed through `manualClose`. */
+    protected requestClose(): void;
     handleBackdropClick(event: MouseEvent): void;
     handleCancel(event: Event): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<DialogComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DialogComponent, "ea-dialog", never, { "width": { "alias": "width"; "required": false; "isSignal": true; }; "closeOnBackdrop": { "alias": "closeOnBackdrop"; "required": false; "isSignal": true; }; "closeOnEscape": { "alias": "closeOnEscape"; "required": false; "isSignal": true; }; "showClose": { "alias": "showClose"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "open": { "alias": "open"; "required": false; "isSignal": true; }; }, { "open": "openChange"; "opened": "opened"; "closed": "closed"; }, never, ["[slot=header]", "*", "[slot=footer]"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DialogComponent, "ea-dialog", never, { "width": { "alias": "width"; "required": false; "isSignal": true; }; "closeOnBackdrop": { "alias": "closeOnBackdrop"; "required": false; "isSignal": true; }; "closeOnEscape": { "alias": "closeOnEscape"; "required": false; "isSignal": true; }; "showClose": { "alias": "showClose"; "required": false; "isSignal": true; }; "closeDisabled": { "alias": "closeDisabled"; "required": false; "isSignal": true; }; "manualClose": { "alias": "manualClose"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "open": { "alias": "open"; "required": false; "isSignal": true; }; }, { "open": "openChange"; "opened": "opened"; "closed": "closed"; "closeRequested": "closeRequested"; }, never, ["[slot=header]", "*", "[slot=status]", "[slot=footer]"], true, never>;
 }
 
 /** Orientation of the divider rule. */
@@ -1913,9 +1955,10 @@ declare class DrawerComponent implements AfterContentChecked {
     private pushRaf;
     private leaveTimer;
     private leaveOnEnd;
-    private documentPointerListener;
+    private documentClickListener;
     protected readonly i18n: EagamiI18nService;
     private readonly isBrowser;
+    private readonly press;
     readonly position: _angular_core.InputSignal<DrawerPosition>;
     /**
      * Extent of the panel along its main axis (width for side drawers, height for
@@ -2636,6 +2679,7 @@ type PopoverMaxWidth = number | 'anchor';
  */
 declare class PopoverComponent {
     private readonly destroyRef;
+    private readonly press;
     private readonly surfaceEl;
     /** Anchor element the popover positions itself against. */
     readonly anchor: _angular_core.InputSignal<HTMLElement | ElementRef<HTMLElement> | undefined>;
@@ -2678,6 +2722,7 @@ declare class PopoverComponent {
     /** Requested close. The parent should mirror this into `[open]`. */
     readonly closeRequested: _angular_core.OutputEmitterRef<void>;
     private readonly position;
+    private latched;
     /** True placement after flip, for class-based styling (e.g. arrow direction). */
     readonly effectivePlacement: _angular_core.Signal<PopoverPlacement>;
     /** Latches true once the post-rAF reposition has run, so the surface is
@@ -2713,6 +2758,7 @@ type MultiSelectSize = EaSize;
  */
 declare class MultiSelectComponent implements ControlValueAccessor {
     protected readonly wrapperEl: _angular_core.Signal<ElementRef<HTMLElement> | undefined>;
+    private readonly popover;
     protected readonly triggerEl: _angular_core.Signal<ElementRef<HTMLElement> | undefined>;
     protected readonly searchEl: _angular_core.Signal<ElementRef<HTMLInputElement> | undefined>;
     private readonly listEl;
@@ -2739,6 +2785,13 @@ declare class MultiSelectComponent implements ControlValueAccessor {
     readonly searchable: _angular_core.InputSignal<boolean>;
     /** Toggle the "Select all" row at the top of the option list. */
     readonly selectAll: _angular_core.InputSignal<boolean>;
+    /**
+     * Offer a "Create" row when the search text matches no option, for a value
+     * the list cannot know about yet (a new tag, a new person). The component
+     * only reports the text through `created`; the consumer creates the record
+     * and pushes its value into `value`.
+     */
+    readonly allowCreate: _angular_core.InputSignal<boolean>;
     /** Max number of chips shown inside the trigger; the rest collapse into a "+N more" pill. `0` removes the cap so every chip shows and the row scrolls horizontally. */
     readonly maxVisibleChips: _angular_core.InputSignal<number>;
     /**
@@ -2756,6 +2809,8 @@ declare class MultiSelectComponent implements ControlValueAccessor {
     readonly value: _angular_core.ModelSignal<readonly string[]>;
     /** Fires with the new value whenever the selection changes. */
     readonly changed: _angular_core.OutputEmitterRef<readonly string[]>;
+    /** Fires with the typed text when the user takes the `allowCreate` row. */
+    readonly created: _angular_core.OutputEmitterRef<string>;
     readonly isOpen: _angular_core.WritableSignal<boolean>;
     readonly searchTerm: _angular_core.WritableSignal<string>;
     /** Index into `filteredOptions()` for keyboard navigation. `-1` when none focused. */
@@ -2789,6 +2844,10 @@ declare class MultiSelectComponent implements ControlValueAccessor {
     protected readonly selectAllVisible: _angular_core.Signal<boolean>;
     /** Row-index offset the Select-all row adds ahead of the filtered options. */
     protected readonly selectAllOffset: _angular_core.Signal<1 | 0>;
+    /** The text a Create row would carry, or `''` when no such row is offered. */
+    protected readonly creatableText: _angular_core.Signal<string>;
+    /** Row index of the Create row, which sits after the options, or `-1`. */
+    protected readonly createRow: _angular_core.Signal<number>;
     private readonly rowCount;
     protected readonly selectAllAriaChecked: _angular_core.Signal<"true" | "mixed" | "false">;
     /** Id of the keyboard-focused option, for `aria-activedescendant`. */
@@ -2853,6 +2912,8 @@ declare class MultiSelectComponent implements ControlValueAccessor {
      */
     toggleSelectAll(): void;
     onSearchInput(event: Event): void;
+    private soleOptionRow;
+    private clearSearchForNextValue;
     handleTriggerKeydown(event: KeyboardEvent): void;
     /**
      * Keyboard navigation inside the popover. Bound to both the search input
@@ -2860,10 +2921,11 @@ declare class MultiSelectComponent implements ControlValueAccessor {
      * so users can type spaces in their query.
      */
     handlePopoverKeydown(event: KeyboardEvent): void;
-    private focusSearchWhenReady;
     private moveFocusedRow;
     /** Enter/Space on the focused row: row 0 is Select-all when visible. */
     private activateRow;
+    /** Report the typed text, then clear it so the new value can be followed by another. */
+    protected createOption(): void;
     /** Reorder a value-set against the input `options` array. */
     private orderedValues;
     private optionsFor;
@@ -2877,7 +2939,7 @@ declare class MultiSelectComponent implements ControlValueAccessor {
     private measureClippedOptions;
     private watchListWidth;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<MultiSelectComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MultiSelectComponent, "ea-multi-select", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "searchPlaceholder": { "alias": "searchPlaceholder"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "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; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "errorMsg": { "alias": "errorMsg"; "required": false; "isSignal": true; }; "errorMessages": { "alias": "errorMessages"; "required": false; "isSignal": true; }; "searchable": { "alias": "searchable"; "required": false; "isSignal": true; }; "selectAll": { "alias": "selectAll"; "required": false; "isSignal": true; }; "maxVisibleChips": { "alias": "maxVisibleChips"; "required": false; "isSignal": true; }; "maxChipWidth": { "alias": "maxChipWidth"; "required": false; "isSignal": true; }; "popoverMaxWidth": { "alias": "popoverMaxWidth"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "changed": "changed"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MultiSelectComponent, "ea-multi-select", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "searchPlaceholder": { "alias": "searchPlaceholder"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "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; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "errorMsg": { "alias": "errorMsg"; "required": false; "isSignal": true; }; "errorMessages": { "alias": "errorMessages"; "required": false; "isSignal": true; }; "searchable": { "alias": "searchable"; "required": false; "isSignal": true; }; "selectAll": { "alias": "selectAll"; "required": false; "isSignal": true; }; "allowCreate": { "alias": "allowCreate"; "required": false; "isSignal": true; }; "maxVisibleChips": { "alias": "maxVisibleChips"; "required": false; "isSignal": true; }; "maxChipWidth": { "alias": "maxChipWidth"; "required": false; "isSignal": true; }; "popoverMaxWidth": { "alias": "popoverMaxWidth"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "changed": "changed"; "created": "created"; }, never, never, true, never>;
 }
 
 /** Visual size of the number input. */
@@ -3672,6 +3734,19 @@ declare class TooltipDirective implements OnDestroy {
     private readonly viewContainer;
     readonly eaTooltip: _angular_core.InputSignal<string | TemplateRef<unknown>>;
     readonly tooltipPosition: _angular_core.InputSignal<TooltipPosition>;
+    /**
+     * Whether a bubble with no room on the requested side moves to the opposite
+     * one. The side is resolved when the bubble opens and held while it still
+     * fits, so a bubble does not hop across its trigger mid-hover.
+     */
+    readonly flip: _angular_core.InputSignal<boolean>;
+    /**
+     * Show only while the trigger is cutting its own content off, which is how a
+     * label that ellipsizes reveals its full text without a bubble on every
+     * label that fits. The whole subtree is measured, since the box doing the
+     * cutting is usually an inner one.
+     */
+    readonly whenClipped: _angular_core.InputSignal<boolean>;
     /**
      * Max width in px; the text wraps at this width. Clamped to a 50px floor, and
      * to the viewport, which no value can push the bubble past.
@@ -3684,6 +3759,8 @@ declare class TooltipDirective implements OnDestroy {
      */
     readonly dismissDelay: _angular_core.InputSignal<number>;
     private tooltipEl;
+    /** Side the open bubble settled on, held across repositions while it fits. */
+    private placedPosition;
     private templateView;
     private scrollable;
     private hideTimer;
@@ -3698,6 +3775,7 @@ declare class TooltipDirective implements OnDestroy {
     private readonly hoverChangeHandler;
     private rafId;
     private readonly repositionHandler;
+    private readonly relayoutHandler;
     private readonly scrollListenerOptions;
     private resizeObserver;
     constructor();
@@ -3713,10 +3791,11 @@ declare class TooltipDirective implements OnDestroy {
     private appendDescribedBy;
     private removeDescribedBy;
     private positionTooltip;
+    private applyPlacedPosition;
     private viewportMargin;
     private syncScrollable;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<TooltipDirective, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<TooltipDirective, "[eaTooltip]", never, { "eaTooltip": { "alias": "eaTooltip"; "required": true; "isSignal": true; }; "tooltipPosition": { "alias": "tooltipPosition"; "required": false; "isSignal": true; }; "maxWidth": { "alias": "maxWidth"; "required": false; "isSignal": true; }; "dismissDelay": { "alias": "dismissDelay"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<TooltipDirective, "[eaTooltip]", never, { "eaTooltip": { "alias": "eaTooltip"; "required": true; "isSignal": true; }; "tooltipPosition": { "alias": "tooltipPosition"; "required": false; "isSignal": true; }; "flip": { "alias": "flip"; "required": false; "isSignal": true; }; "whenClipped": { "alias": "whenClipped"; "required": false; "isSignal": true; }; "maxWidth": { "alias": "maxWidth"; "required": false; "isSignal": true; }; "dismissDelay": { "alias": "dismissDelay"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 /** Semantic colour scheme of a tag. */
@@ -3745,10 +3824,17 @@ declare class TagComponent {
     readonly disabled: _angular_core.InputSignal<boolean>;
     readonly removeLabel: _angular_core.InputSignal<string | undefined>;
     /**
-     * Widest the chip may grow, in px; a longer label ellipsizes instead. Also
-     * settable in CSS as `--ea-tag-max-width`, which this input overrides.
+     * Widest the chip may grow: a number of px, or any CSS length for a chip that
+     * has to give way to its container (`'100%'` in a responsive grid cell).
+     * Also settable in CSS as `--ea-tag-max-width`, which this input overrides.
      */
-    readonly maxWidth: _angular_core.InputSignal<number | undefined>;
+    readonly maxWidth: _angular_core.InputSignal<string | number | undefined>;
+    /**
+     * Fill colour as a hex value, for a tag carrying a colour of its own (a
+     * user-chosen label). Paints the chip and its border, and picks whichever ink
+     * reads better on it. Takes precedence over `variant`.
+     */
+    readonly color: _angular_core.InputSignal<string | undefined>;
     /**
      * Where a label clipped by `maxWidth` reveals its full text. Set `none` for
      * a tag rendered inside a tooltip, which would otherwise stack a second
@@ -3774,6 +3860,11 @@ declare class TagComponent {
         [x: string]: boolean;
         'ea-tag--disabled': boolean;
     }>;
+    /** `maxWidth` as a CSS length; a bare number is px, as the input documents. */
+    protected readonly resolvedMaxWidth: _angular_core.Signal<string | null>;
+    /** Ink that reads on `color`, or `null` when it is not a hex the library can measure. */
+    protected readonly resolvedInk: _angular_core.Signal<string | null>;
+    protected readonly resolvedColor: _angular_core.Signal<string | null>;
     constructor();
     onRemove(event: MouseEvent): void;
     /**
@@ -3783,7 +3874,7 @@ declare class TagComponent {
      */
     private watchLabel;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<TagComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TagComponent, "ea-tag", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "removable": { "alias": "removable"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "removeLabel": { "alias": "removeLabel"; "required": false; "isSignal": true; }; "maxWidth": { "alias": "maxWidth"; "required": false; "isSignal": true; }; "tooltip": { "alias": "tooltip"; "required": false; "isSignal": true; }; "removeTabbable": { "alias": "removeTabbable"; "required": false; "isSignal": true; }; }, { "removed": "removed"; }, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TagComponent, "ea-tag", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "removable": { "alias": "removable"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "removeLabel": { "alias": "removeLabel"; "required": false; "isSignal": true; }; "maxWidth": { "alias": "maxWidth"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "tooltip": { "alias": "tooltip"; "required": false; "isSignal": true; }; "removeTabbable": { "alias": "removeTabbable"; "required": false; "isSignal": true; }; }, { "removed": "removed"; }, never, ["*"], true, never>;
 }
 
 /** Visual size of the textarea. */