@bitforgehq/ui 0.4.0 → 0.5.0-next.4

package/types/bitforgehq-ui-overlay.d.ts

@@ -1,7 +1,7 @@
 import * as i0 from "@angular/core";
 import { ComponentRef, DestroyRef, EnvironmentProviders, InjectionToken, Injector, Signal, StaticProvider, TemplateRef, Type } from "@angular/core";
 import { LiveAnnouncer } from "@angular/cdk/a11y";
-import { BfCalendarDisabledDate, BfColorScheme, BfCompareWith, BfSize } from "@bitforgehq/ui";
+import { BfCalendarDisabledDate, BfColorScheme, BfCompareWith, BfSelectOption, BfSelectOption as BfSelectOption$1, BfSize } from "@bitforgehq/ui";
 import * as i1 from "@angular/cdk/menu";
 import { FormValueControl, ValidationError } from "@angular/forms/signals";
 /**
@@ -390,7 +390,6 @@ declare function firstTabbable(panel: HTMLElement): HTMLElement | null;
  * @since 0.2.0
  */
 export declare class BfOverlayService {
-  private readonly overlay;
   private readonly injector;
   private readonly document;
   private readonly stack;
@@ -1162,7 +1161,6 @@ interface BfDesktopToastOptions {
  * @summary Shows brief desktop notifications in a stack at a corner of the viewport
  */
 export declare class BfDesktopToastService {
-  private readonly overlay;
   private readonly injector;
   private readonly document;
   private readonly config;
@@ -1244,6 +1242,7 @@ export declare class BfMenuComponent {
   readonly resolvedSize: import("@angular/core").Signal<BfSize>;
   private readonly triggerId;
   protected readonly labelledBy: import("@angular/core").Signal<string | null>;
+  constructor();
   static ɵfac: i0.ɵɵFactoryDeclaration<BfMenuComponent, never>;
   static ɵcmp: i0.ɵɵComponentDeclaration<BfMenuComponent, "bf-menu", never, {
     "size": {
@@ -1440,6 +1439,11 @@ export declare class BfMenuTriggerDirective {
    * item, at the inline end, and ignores it. */
   readonly bfMenuPlacement: import("@angular/core").InputSignal<BfMenuPlacement>;
   constructor();
+  /**
+   * The trigger element, which the opening menu grows out of.
+   * @internal
+   */
+  anchorElement(): HTMLElement;
   /** The trigger element's id (assigned when it has none), which names the menu it opens. It is
    * read when the menu opens: an `[id]` bound on the trigger that changes while the menu is open
    * names the menu from its next opening. */
@@ -1506,6 +1510,9 @@ export declare class BfMenuButtonComponent {
   readonly label: import("@angular/core").InputSignal<string>;
   /** Square button holding only the projected icon, like `bf-icon-button`; set `label`. */
   readonly iconOnly: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  /** Stretches the host and the button to the width of their container, as `bf-button`'s
+   * `fullWidth`; the label and caret stay centred. Ignored with `iconOnly`. */
+  readonly fullWidth: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
   /** Disables the button; the menu cannot open. */
   readonly disabled: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
   /** The menu opened. */
@@ -1514,6 +1521,9 @@ export declare class BfMenuButtonComponent {
   readonly closed: import("@angular/core").OutputEmitterRef<void>;
   /** The size in effect: `size`, else the app's `controlSize` default. */
   protected readonly resolvedSize: import("@angular/core").Signal<BfSize>;
+  /** Full width (not icon-only): the host and the button fill the container. */
+  private readonly stretched;
+  protected readonly hostClasses: import("@angular/core").Signal<"inline-flex max-w-full w-full" | "inline-flex max-w-full">;
   protected readonly labelClasses: import("@angular/core").Signal<"contents" | "max-w-full min-w-0 truncate">;
   protected readonly classes: import("@angular/core").Signal<string>;
   static ɵfac: i0.ɵɵFactoryDeclaration<BfMenuButtonComponent, never>;
@@ -1548,6 +1558,11 @@ export declare class BfMenuButtonComponent {
       "required": false;
       "isSignal": true;
     };
+    "fullWidth": {
+      "alias": "fullWidth";
+      "required": false;
+      "isSignal": true;
+    };
     "disabled": {
       "alias": "disabled";
       "required": false;
@@ -1694,6 +1709,158 @@ export declare class BfSidebarToggleComponent {
     };
   }, {}, never, ["[bfSlot=collapse-icon]", "[bfSlot=expand-icon]"], true, never>;
 }
+type BfChatComposerAction = 'send' | 'stop';
+/**
+ * The input row of a chat: a `bf-textarea` that grows with the text (`autoResize`, up to
+ * `maxRows`, then it scrolls), a start and an end slot for extra controls, and one button that
+ * sends the text or, while a reply is `running`, stops it. `Enter` sends and `Shift+Enter`
+ * starts a new line; nothing sends during IME composition or
+ * when the text is only whitespace. After a send the text clears and focus stays in the field.
+ * `disabled` with a `disabledReason` shows the reason as the button's tooltip and as the empty
+ * field's placeholder.
+ *
+ * @example
+ * <bf-chat-composer [(value)]="draft" [running]="replying()" (sent)="ask($event)" (stopped)="cancel()">
+ *   <bf-icon bfSlot="send-icon" [icon]="ArrowUp" />
+ *   <bf-icon bfSlot="stop-icon" [icon]="Square" />
+ * </bf-chat-composer>
+ * @summary Chat input that grows with the text and sends on Enter, or stops a reply
+ * @category Forms
+ * @since 0.5.0
+ * @slot start Controls before the field, such as a preset picker or an attach button.
+ * @slot end Controls between the field and the send button.
+ * @slot send-icon The send button's icon; without one the button shows its text.
+ * @slot stop-icon The stop button's icon; without one the button shows its text.
+ */
+export declare class BfChatComposerComponent {
+  private readonly defaults;
+  private readonly labels;
+  /** The text being written; two-way bindable. Cleared after a send. */
+  readonly value: import("@angular/core").ModelSignal<string>;
+  /** A reply is running: the button stops it (`stopped`) instead of sending. */
+  readonly running: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  /** Nothing can be written or sent. */
+  readonly disabled: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  /** Why it is disabled, shown as the button's tooltip and the empty field's placeholder. */
+  readonly disabledReason: import("@angular/core").InputSignal<string>;
+  /** Visible label above the field; usually left empty in a chat. */
+  readonly label: import("@angular/core").InputSignal<string>;
+  /** The field's accessible name without a visible label; empty uses the `chatComposer` label
+   * ("Message"). */
+  readonly ariaLabel: import("@angular/core").InputSignal<string>;
+  /** Id(s) of the element(s) that name the field without a visible label. */
+  readonly ariaLabelledby: import("@angular/core").InputSignal<string>;
+  /** Example text shown while the field is empty. */
+  readonly placeholder: import("@angular/core").InputSignal<string>;
+  /** The lines the field grows to at most; past them it scrolls. */
+  readonly maxRows: import("@angular/core").InputSignal<number>;
+  /** Maximum number of characters (native `maxlength`). */
+  readonly maxLength: import("@angular/core").InputSignal<number | undefined>;
+  /** Native name attribute of the textarea. */
+  readonly name: import("@angular/core").InputSignal<string>;
+  /** Padding, type and button step: sm, md, lg; unset follows `provideBfDefaults()`
+   * (`fieldSize`, `md` by default). */
+  readonly size: import("@angular/core").InputSignal<BfSize | undefined>;
+  /** Emitted with the new text right after the user changes it (each keystroke or paste). */
+  readonly changed: import("@angular/core").OutputEmitterRef<string>;
+  /** Emitted with the trimmed text when the user sends it (Enter or the send button). */
+  readonly sent: import("@angular/core").OutputEmitterRef<string>;
+  /** Emitted when the user presses the stop button while `running`. */
+  readonly stopped: import("@angular/core").OutputEmitterRef<void>;
+  private readonly field;
+  protected readonly resolvedSize: import("@angular/core").Signal<BfSize>;
+  /** The field's one-line height, matched to the button. */
+  protected readonly fieldClasses: import("@angular/core").Signal<string>;
+  protected readonly action: import("@angular/core").Signal<BfChatComposerAction>;
+  /** Disabled with a reason: focusable, `aria-disabled`, with the reason as a tooltip. */
+  protected readonly blocked: import("@angular/core").Signal<boolean>;
+  /** Native `disabled`: disabled without a reason, or nothing to send yet. */
+  protected readonly nativeDisabled: import("@angular/core").Signal<boolean>;
+  protected readonly buttonName: import("@angular/core").Signal<string>;
+  /** The field's `aria-label`: `ariaLabel`, else the label key while nothing else names it. */
+  protected readonly fieldName: import("@angular/core").Signal<string>;
+  protected readonly fieldPlaceholder: import("@angular/core").Signal<string>;
+  protected readonly buttonClasses: import("@angular/core").Signal<string>;
+  /** Sends the text: emits `sent` with it trimmed, clears the field and keeps focus in it. Does
+   * nothing while disabled or running, or when the text is only whitespace. */
+  send(): void;
+  /** Focuses the text field. */
+  focus(): void;
+  /** @internal */
+  onChanged(text: string): void;
+  /** @internal */
+  onButton(): void;
+  /** @internal */
+  onKeydown(event: KeyboardEvent): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<BfChatComposerComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<BfChatComposerComponent, "bf-chat-composer", never, {
+    "value": {
+      "alias": "value";
+      "required": false;
+      "isSignal": true;
+    };
+    "running": {
+      "alias": "running";
+      "required": false;
+      "isSignal": true;
+    };
+    "disabled": {
+      "alias": "disabled";
+      "required": false;
+      "isSignal": true;
+    };
+    "disabledReason": {
+      "alias": "disabledReason";
+      "required": false;
+      "isSignal": true;
+    };
+    "label": {
+      "alias": "label";
+      "required": false;
+      "isSignal": true;
+    };
+    "ariaLabel": {
+      "alias": "ariaLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "ariaLabelledby": {
+      "alias": "ariaLabelledby";
+      "required": false;
+      "isSignal": true;
+    };
+    "placeholder": {
+      "alias": "placeholder";
+      "required": false;
+      "isSignal": true;
+    };
+    "maxRows": {
+      "alias": "maxRows";
+      "required": false;
+      "isSignal": true;
+    };
+    "maxLength": {
+      "alias": "maxLength";
+      "required": false;
+      "isSignal": true;
+    };
+    "name": {
+      "alias": "name";
+      "required": false;
+      "isSignal": true;
+    };
+    "size": {
+      "alias": "size";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "value": "valueChange";
+    "changed": "changed";
+    "sent": "sent";
+    "stopped": "stopped";
+  }, never, ["[bfSlot=start]", "[bfSlot=end]", "[bfSlot=send-icon]", "[bfSlot=stop-icon]"], true, never>;
+}
 /**
  * Layout of a side panel opened with `BfSidePanelService`: a title row with a close button, a
  * scrolling body and a footer of actions kept at the bottom. The panel is labelled by the title,
@@ -1932,7 +2099,7 @@ type BfTooltipPlacement = 'top' | 'bottom' | 'start' | 'end';
  * @since 0.3.1
  */
 export declare class BfTooltipDirective {
-  private readonly overlay;
+  private readonly environment;
   private readonly document;
   private readonly injector;
   private readonly dir;
@@ -2037,7 +2204,7 @@ type BfPopoverPlacement = 'below-start' | 'below-end' | 'above-start' | 'above-e
  * @since 0.3.1
  */
 export declare class BfPopoverTriggerDirective {
-  private readonly overlay;
+  private readonly environment;
   private readonly document;
   private readonly injector;
   private readonly viewContainer;
@@ -2060,6 +2227,7 @@ export declare class BfPopoverTriggerDirective {
   /** The id the `bf-popover` panel takes, which the trigger's `aria-controls` points at. */
   readonly panelId: string;
   private anchored;
+  private readonly motion;
   private subscriptions;
   private stopNavigation;
   private stopHeading;
@@ -2089,6 +2257,10 @@ export declare class BfPopoverTriggerDirective {
    * the trigger.
    */
   private name;
+  /**
+   * Drops the listeners and closes the overlay: with its exit animation (it stays attached, inert,
+   * until the exit has played), or at once when the directive is destroyed.
+   */
   private teardown;
   static ɵfac: i0.ɵɵFactoryDeclaration<BfPopoverTriggerDirective, never>;
   static ɵdir: i0.ɵɵDirectiveDeclaration<BfPopoverTriggerDirective, "[bfPopoverTriggerFor]", ["bfPopoverTrigger"], {
@@ -2197,7 +2369,7 @@ interface ComboboxHost<T> {
  */
 declare class ComboboxCore<T> {
   readonly host: ComboboxHost<T>;
-  private readonly overlay;
+  private readonly environment;
   private readonly injector;
   private readonly viewContainer;
   private readonly dir;
@@ -2220,6 +2392,9 @@ declare class ComboboxCore<T> {
   /** `aria-controls`: the listbox while it is rendered. */
   readonly controls: Signal<string | null>;
   private anchored;
+  /** The listbox component's view, frozen while the panel plays its exit. */
+  private panelView;
+  private readonly motion;
   private subscriptions;
   constructor(host: ComboboxHost<T>);
   /**
@@ -2257,6 +2432,10 @@ declare class ComboboxCore<T> {
   /** Moves the active option by `step` through the enabled ones, wrapping at the ends. */
   private move;
   private firstEnabled;
+  /**
+   * Drops the listeners and closes the overlay: with its exit animation (the list frozen as it
+   * was, so a reset query never reflows it while it fades), or at once on destroy.
+   */
   private teardown;
 }
 /** Equality of an option's value and a picked value under `compareWith`, never for `null`. */
@@ -2777,6 +2956,271 @@ export declare class BfMultiComboboxComponent<T = string> implements FormValueCo
     "touch": "touch";
   }, never, never, true, never>;
 }
+/**
+ * Single-choice dropdown styled like the text field, with a placeholder and Signal Forms binding.
+ * Under a mouse it opens a styled list (the combobox's) that follows the select-only combobox
+ * pattern: the arrow keys, `Home`, `End`, `PageUp`/`PageDown` and typeahead move through it,
+ * `Enter`, `Space` or `Tab` pick. Under a coarse pointer (touch) it renders the platform's native
+ * select instead. Generic over the option value (a string by default); `null` means nothing is
+ * selected. Moved from `@bitforgehq/ui` to `@bitforgehq/ui/overlay` in 0.5.0.
+ *
+ * @example
+ * <bf-select label="Project" placeholder="Pick a project" [options]="projects" [(value)]="projectId" />
+ * <bf-select label="Team" placeholder="Pick a team" [options]="teams" [formField]="task.teamId" />
+ * @summary Single-choice dropdown with a styled list, native under touch, with Signal Forms binding
+ * @category Forms
+ * @since 0.1.0
+ */
+export declare class BfSelectComponent<T = string> implements FormValueControl<T | null> {
+  /** The selected option's value, `null` while nothing is selected; two-way bindable and bound by
+   * `[formField]`. */
+  readonly value: import("@angular/core").ModelSignal<T | null>;
+  /** The options to choose from. */
+  readonly options: import("@angular/core").InputSignal<readonly BfSelectOption$1<T>[]>;
+  /** Equality for matching `value` to an option (default `Object.is`); pass one for object values. */
+  readonly compareWith: import("@angular/core").InputSignal<BfCompareWith<T>>;
+  /** Height step: sm 32, md 40, lg 48 px; unset follows `provideBfDefaults()` (`fieldSize`, `md`
+   * by default). */
+  readonly size: import("@angular/core").InputSignal<BfSize | undefined>;
+  /** Visible label above the control. */
+  readonly label: import("@angular/core").InputSignal<string>;
+  /**
+   * Accessible name when no visible label is rendered (e.g. a table filter). Ignored when `label`
+   * is set.
+   */
+  readonly ariaLabel: import("@angular/core").InputSignal<string>;
+  /**
+   * Id(s) of the element(s) that name the field when no visible label is rendered. Ignored when
+   * `label` is set.
+   */
+  readonly ariaLabelledby: import("@angular/core").InputSignal<string>;
+  /** Muted text shown while nothing is selected. */
+  readonly placeholder: import("@angular/core").InputSignal<string>;
+  /** Helper text under the control. */
+  readonly helpText: import("@angular/core").InputSignal<string>;
+  /** Explicit error text; takes precedence over Signal Forms errors. */
+  readonly errorMessage: import("@angular/core").InputSignal<string>;
+  /** Disables the control. */
+  readonly disabled: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  /** Shows the value but blocks changes; the select stays focusable and exposes `aria-readonly`. */
+  readonly readonly: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  /** Marks the control required. */
+  readonly required: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  /** Field validity from Signal Forms. */
+  readonly invalid: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  /** Whether the user has left the field. */
+  readonly touched: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  /** Validation errors from Signal Forms. */
+  readonly errors: import("@angular/core").InputSignal<readonly ValidationError.WithOptionalFieldTree[]>;
+  /** Form name: of a hidden input carrying the selected option's key, or of the native select. */
+  readonly name: import("@angular/core").InputSignal<string>;
+  /** Control id; generated when not set. */
+  readonly id: import("@angular/core").InputSignal<string>;
+  /** Emitted with the chosen value after a user change (never `null`). */
+  readonly changed: import("@angular/core").OutputEmitterRef<T>;
+  /** Emitted when the control gains focus. */
+  readonly focused: import("@angular/core").OutputEmitterRef<FocusEvent>;
+  /** Emitted when the control loses focus. */
+  readonly blurred: import("@angular/core").OutputEmitterRef<FocusEvent>;
+  /** Emitted on blur so Signal Forms marks the field touched. */
+  readonly touch: import("@angular/core").OutputEmitterRef<void>;
+  private readonly fieldEl;
+  private readonly anchorEl;
+  private readonly nativeSelect;
+  private readonly defaults;
+  private readonly labels;
+  private readonly document;
+  /** Whether the primary pointer is coarse (touch), from `matchMedia`: the native mode. */
+  protected readonly coarse: import("@angular/core").WritableSignal<boolean>;
+  /** The size in effect: `size`, else the app's `fieldSize` default. */
+  protected readonly resolvedSize: import("@angular/core").Signal<BfSize>;
+  /** Index of the option matching `value`, `-1` while nothing (or `null`) is selected. */
+  protected readonly selectedIndex: import("@angular/core").Signal<number>;
+  /** The selected option's label, null while nothing is selected. */
+  protected readonly selectedLabel: import("@angular/core").Signal<string | null>;
+  /** The hidden input's value: the selected option's key (its index for an object), else `''`. */
+  protected readonly formKey: import("@angular/core").Signal<string>;
+  /** The options as the list shows them; the selected one is matched by identity. */
+  private readonly listOptions;
+  protected readonly core: ComboboxCore<T>;
+  protected readonly errorText: import("@angular/core").Signal<string>;
+  protected readonly showError: import("@angular/core").Signal<boolean>;
+  protected readonly describedBy: import("@angular/core").Signal<string | null>;
+  /** `aria-errormessage`: the error paragraph while `aria-invalid` is set. */
+  protected readonly errorMessageId: import("@angular/core").Signal<string | null>;
+  /**
+   * `aria-label` value: only when there is no visible label, so the label stays the sole accessible
+   * name.
+   */
+  protected readonly ariaLabelAttr: import("@angular/core").Signal<string | null>;
+  /**
+   * `aria-labelledby` value while there is no visible label; with one, the field points
+   * `aria-labelledby` at the label's id instead (a `<label for>` cannot name a div).
+   */
+  protected readonly ariaLabelledbyAttr: import("@angular/core").Signal<string | null>;
+  protected readonly wrapperClasses: import("@angular/core").Signal<string>;
+  protected readonly classes: import("@angular/core").Signal<string>;
+  /** The typed typeahead text and when its last key came. */
+  private typeahead;
+  private typedAt;
+  constructor();
+  /**
+   * Focuses the field, or the native select under a coarse pointer; Signal Forms calls it from
+   * `focusBoundControl()`.
+   * @param options Passed on to the native `focus()`, such as `{ preventScroll: true }`.
+   */
+  focus(options?: FocusOptions): void;
+  /**
+   * A click on the label focuses the field (a label's `for` cannot name a div).
+   * @internal
+   */
+  onHostClick(event: MouseEvent): void;
+  /**
+   * A click on the field opens or closes the list.
+   * @internal
+   */
+  onClick(): void;
+  /**
+   * The select-only combobox keys: `Enter`, `Space` and the arrows open; while open the arrows,
+   * `Home`, `End`, `PageUp` and `PageDown` move, `Enter`, `Space` and `Tab` pick; printable keys
+   * search by label. `Escape` on an open list is the panel's: it closes it.
+   * @internal
+   */
+  onKeydown(event: KeyboardEvent): void;
+  /**
+   * Leaving the field closes the list, emits `blurred` and marks the field touched. A press in the
+   * list never moves the focus (the listbox cancels it), so this runs only when the field is left.
+   * @internal
+   */
+  onBlur(event: FocusEvent): void;
+  /** Opens the list with the selected option active, else the first enabled one. */
+  private openList;
+  /** Picks an option: the value and `changed` when it differs, and the list closes. */
+  private pick;
+  private pickActive;
+  /** Moves the active option by `step` enabled options, stopping at the ends. */
+  private page;
+  /** Whether a typeahead search is still being typed. */
+  private typing;
+  /**
+   * Adds a key to the typeahead search, opens the list and activates the next enabled option whose
+   * label starts with the search, ignoring case and accents. One letter repeated cycles through the
+   * options starting with it; a longer search keeps the active option while it still matches.
+   */
+  private search;
+  /** The list's enabled options in list order. */
+  private enabledItems;
+  static ɵfac: i0.ɵɵFactoryDeclaration<BfSelectComponent<any>, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<BfSelectComponent<any>, "bf-select", never, {
+    "value": {
+      "alias": "value";
+      "required": false;
+      "isSignal": true;
+    };
+    "options": {
+      "alias": "options";
+      "required": true;
+      "isSignal": true;
+    };
+    "compareWith": {
+      "alias": "compareWith";
+      "required": false;
+      "isSignal": true;
+    };
+    "size": {
+      "alias": "size";
+      "required": false;
+      "isSignal": true;
+    };
+    "label": {
+      "alias": "label";
+      "required": false;
+      "isSignal": true;
+    };
+    "ariaLabel": {
+      "alias": "ariaLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "ariaLabelledby": {
+      "alias": "ariaLabelledby";
+      "required": false;
+      "isSignal": true;
+    };
+    "placeholder": {
+      "alias": "placeholder";
+      "required": false;
+      "isSignal": true;
+    };
+    "helpText": {
+      "alias": "helpText";
+      "required": false;
+      "isSignal": true;
+    };
+    "errorMessage": {
+      "alias": "errorMessage";
+      "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;
+    };
+    "invalid": {
+      "alias": "invalid";
+      "required": false;
+      "isSignal": true;
+    };
+    "touched": {
+      "alias": "touched";
+      "required": false;
+      "isSignal": true;
+    };
+    "errors": {
+      "alias": "errors";
+      "required": false;
+      "isSignal": true;
+    };
+    "name": {
+      "alias": "name";
+      "required": false;
+      "isSignal": true;
+    };
+    "id": {
+      "alias": "id";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "value": "valueChange";
+    "changed": "changed";
+    "focused": "focused";
+    "blurred": "blurred";
+    "touch": "touch";
+  }, never, never, true, never>;
+}
+/**
+ * Makes the library's built-in selects use the styled `bf-select`: a stacked `bf-table` then
+ * renders its Sort by select as a `bf-select` (the native `<select>` under a coarse pointer, as
+ * `bf-select` itself does) instead of the plain native one. Add it to
+ * `ApplicationConfig.providers`.
+ *
+ * @returns The providers that fill `BF_TABLE_SORT_SELECT` with `BfSelectComponent`.
+ * @summary Makes a stacked table's Sort by select the styled bf-select, app-wide
+ * @since 0.5.0
+ */
+export declare function provideBfSelect(): EnvironmentProviders;
 /**
  * How `bf-date-input` picks a date besides typing: `calendar` adds a button that opens a
  * `bf-calendar` in a popover, `none` keeps the field typed only.
@@ -3399,4 +3843,248 @@ export declare class BfDateTimeInputComponent implements FormValueControl<string
     "touch": "touch";
   }, never, never, true, never>;
 }
-export { type BfComboboxFilter, type BfComboboxOption, type BfConfirmButton, type BfConfirmButtonRole, type BfConfirmOptions, type BfConfirmSize, type BfDateInputPicker, type BfDateTimeInputPicker, type BfDesktopToastConfig, type BfDesktopToastOptions, type BfDesktopToastPosition, type BfDialogConfig, type BfDialogRole, type BfDialogSize, type BfDialogTemplateContext, type BfMenuButtonVariant, type BfMenuPlacement, type BfOverlayAutoFocus, type BfOverlayController, type BfOverlayHost, type BfOverlayOptions, type BfOverlayPlacement, type BfOverlayPosition, type BfOverlayRole, type BfOverlayStackOptions, type BfOverlayTemplateContext, type BfPopoverPlacement, type BfSidePanelConfig, type BfSidePanelTemplateContext, type BfSidePanelWidth, type BfStackedOverlay, type BfTimeInputHourCycle, type BfTimeInputPicker, type BfToastAction, type BfToastController, type BfToastDismissReason, type BfTooltipPlacement, type ɵBfToastHandle, type ɵBfToastPresenter, type ɵBfToastQueueOptions, type ɵBfToastRequest, type ɵBfToastView, labelPanelByHeading as ɵlabelPanelByHeading, watchPanelHeading as ɵwatchPanelHeading };
+/**
+ * One image of a `BfImageViewerService.open()` set.
+ *
+ * @summary One image the viewer shows: its URL, its name as alternative text and a caption
+ * @since 0.5.0
+ */
+interface BfImageViewerImage {
+  /** URL of the full-size image. */
+  src: string;
+  /**
+   * The image's name: its alternative text (`alt`), read when it shows and announced after a step
+   * (required: the viewer shows nothing else that names it).
+   */
+  label: string;
+  /** Text shown under the image; none shows no caption. */
+  caption?: string;
+}
+/**
+ * Handle to an open image viewer, returned by `BfImageViewerService.open()` and injectable in
+ * its actions template (`inject(BfImageViewerRef)`). `index` is the shown image; `next()`,
+ * `previous()` and `goTo()` step through the set (wrapping at both ends), `close()` plays the
+ * exit motion and resolves `afterClosed`.
+ *
+ * @example
+ * const ref = inject(BfImageViewerService).open({ images, index: 2, origin: thumb });
+ * ref.next();
+ * await ref.afterClosed;
+ * @summary Handle on an open image viewer that steps through its images and closes it
+ * @since 0.5.0
+ */
+export declare class BfImageViewerRef {
+  private readonly overlayRef;
+  /** Unique id of the viewer (its overlay's `bf-overlay-N`). */
+  readonly id: string;
+  /** The images of the set, in order. */
+  readonly images: readonly BfImageViewerImage[];
+  /** Resolves once the viewer has closed and left the page. */
+  readonly afterClosed: Promise<void>;
+  /** True once the viewer has been detached. */
+  readonly closed: Signal<boolean>;
+  private readonly current;
+  /** Index (0-based) of the image the viewer shows. */
+  readonly index: Signal<number>;
+  /** @internal Created by `BfImageViewerService`; apps never construct it. */
+  constructor(overlayRef: BfOverlayRef<unknown>, images: readonly BfImageViewerImage[], start: number);
+  /** Shows the next image; after the last one, the first. */
+  next(): void;
+  /** Shows the previous image; before the first one, the last. */
+  previous(): void;
+  /**
+   * Shows the image at `index`, wrapped into the set (`-1` is the last one).
+   * @param index The 0-based index of the image to show.
+   */
+  goTo(index: number): void;
+  /** Closes the viewer: it zooms back into its thumbnail, or fades out. Ignored once closing. */
+  close(): void;
+}
+/**
+ * Where the viewer zooms from and back to: the thumbnail that was clicked, or a function that
+ * returns the thumbnail of any image of the set (so closing after stepping zooms into the right
+ * one), `null` for none.
+ *
+ * @summary The thumbnail an image viewer zooms from and back into, or a lookup per image
+ * @since 0.5.0
+ */
+type BfImageViewerOrigin = HTMLElement | ((index: number) => HTMLElement | null | undefined) | null;
+/**
+ * Context of the `actions` template of `BfImageViewerService.open()`: `let-image`,
+ * `let-index="index"` and `let-ref="ref"`.
+ *
+ * @summary What the viewer's actions template receives: the shown image, its index and the ref
+ * @since 0.5.0
+ */
+interface BfImageViewerActionsContext {
+  /** The image the viewer shows (`let-image`). */
+  $implicit: BfImageViewerImage;
+  /** Its 0-based index in the set (`let-index="index"`). */
+  index: number;
+  /** The viewer's ref (`let-ref="ref"`), to close it or step. */
+  ref: BfImageViewerRef;
+}
+/** @internal What `BfImageViewerService` hands the `bf-image-viewer` it opens. */
+interface BfImageViewerContext {
+  readonly start: number;
+  /** The viewer's accessible name. */
+  readonly label: string;
+  readonly origin: BfImageViewerOrigin;
+  readonly actions: TemplateRef<BfImageViewerActionsContext> | null;
+  /** Called by the viewer as it is created, so the overlay's enter and exit can run its motion. */
+  readonly register: (motion: BfImageViewerMotion) => void;
+}
+/** @internal The open and close motion of a `bf-image-viewer`. */
+interface BfImageViewerMotion {
+  enter(): Animation;
+  exit(): Animation;
+}
+/** @internal Provided by `BfImageViewerService` to the viewer it opens. */
+declare const BF_IMAGE_VIEWER_CONTEXT: InjectionToken<BfImageViewerContext>;
+/** How far one image got. */
+type ImageStatus = 'pending' | 'loaded' | 'error';
+/**
+ * The full-screen image viewer (lightbox) `BfImageViewerService.open()` renders: one image large
+ * over a dark scrim, with a counter, previous and next buttons, a close button, an optional
+ * caption and actions. It opens with a zoom out of the clicked thumbnail and steps with a
+ * cross-fade. Apps do not place it in templates; open it with the service.
+ *
+ * @example
+ * const ref = inject(BfImageViewerService).open({
+ *   images: [{ src: '/art/1.jpg', label: 'Neon skyline', caption: 'Concept 1' }],
+ *   index: 0,
+ *   origin: thumbnailElement,
+ * });
+ * @summary Full-screen image viewer that zooms from a thumbnail and steps through a set
+ * @category Overlays
+ * @since 0.5.0
+ */
+export declare class BfImageViewerComponent implements BfImageViewerMotion {
+  protected readonly labels: import("@bitforgehq/ui").BfLabels;
+  protected readonly ref: BfImageViewerRef;
+  protected readonly context: BfImageViewerContext;
+  protected readonly injector: Injector;
+  private readonly document;
+  private readonly host;
+  protected readonly closeIcon: import("lucide").IconNode;
+  protected readonly previousIcon: import("lucide").IconNode;
+  protected readonly nextIcon: import("lucide").IconNode;
+  protected readonly previousClasses = "pointer-events-auto absolute top-1/2 -translate-y-1/2 start-3";
+  protected readonly nextClasses = "pointer-events-auto absolute top-1/2 -translate-y-1/2 end-3";
+  private readonly frame;
+  private readonly scrim;
+  private readonly top;
+  private readonly bottom;
+  /** The progress of every image shown so far, by index. */
+  private readonly statuses;
+  /** The aspect ratio (width / height) of every image that has loaded, by index. */
+  private readonly ratios;
+  protected readonly count: import("@angular/core").Signal<number>;
+  protected readonly index: import("@angular/core").Signal<number>;
+  protected readonly image: import("@angular/core").Signal<BfImageViewerImage>;
+  protected readonly status: import("@angular/core").Signal<ImageStatus>;
+  /** The shown image, keyed by index so a step replaces the element (and cross-fades); none
+   * once it failed, so the failure message is not drawn over a broken-image box. */
+  protected readonly shown: import("@angular/core").Signal<{
+    index: number;
+    image: BfImageViewerImage;
+  }[]>;
+  protected readonly counter: import("@angular/core").Signal<string>;
+  /** Announced politely after each step (never on open, where the dialog itself is read). */
+  private readonly stepped;
+  protected readonly announcement: import("@angular/core").Signal<string>;
+  /** The thumbnail of the shown image, under it until the large one arrives. */
+  protected readonly placeholder: import("@angular/core").Signal<string | null>;
+  /** Width / height of the shown image: once loaded its own, before that its thumbnail's. */
+  protected readonly ratio: import("@angular/core").Signal<number | null>;
+  protected readonly frameClasses: import("@angular/core").Signal<"relative max-h-full max-w-full aspect-(--bf-image-viewer-ratio) w-[min(100cqw,calc(100cqh*var(--bf-image-viewer-ratio)))]" | "relative max-h-full max-w-full size-full">;
+  protected readonly actionsContext: import("@angular/core").Signal<BfImageViewerActionsContext>;
+  constructor();
+  /** @internal Plays the open motion; called by `BfImageViewerService` as the overlay's enter. */
+  enter(): Animation;
+  /** @internal Plays the close motion; called by `BfImageViewerService` as the overlay's exit. */
+  exit(): Animation;
+  /** @internal An image loaded: it shows, and the frame takes its aspect ratio. */
+  imageLoaded(event: Event, index: number): void;
+  /** @internal An image failed: the frame shows the failure message. */
+  imageFailed(index: number): void;
+  /** @internal Arrow keys step (mirrored under rtl), Home and End jump to the ends. */
+  keydown(event: KeyboardEvent): void;
+  /** @internal A click on the scrim or around the image closes the viewer. */
+  clicked(event: MouseEvent): void;
+  /** The thumbnail of image `index`, when the opener gave one. */
+  private originFor;
+  private parts;
+  private reduced;
+  static ɵfac: i0.ɵɵFactoryDeclaration<BfImageViewerComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<BfImageViewerComponent, "bf-image-viewer", never, {}, {}, never, never, true, never>;
+}
+/**
+ * Options of `BfImageViewerService.open()`.
+ *
+ * @summary Options of an image viewer: its images, the first one, its thumbnail and actions
+ * @since 0.5.0
+ */
+interface BfImageViewerOptions {
+  /** The images to step through, in order; at least one. */
+  images: readonly BfImageViewerImage[];
+  /**
+   * Index of the image shown first, wrapped into the set.
+   * @default 0
+   */
+  index?: number;
+  /**
+   * The thumbnail the viewer zooms out of and back into (or a function returning the thumbnail
+   * of an image by index); none fades the viewer in and out.
+   */
+  origin?: BfImageViewerOrigin;
+  /**
+   * Actions under the image, beside its caption (a download link, a "Use this one" button); its
+   * context is `{ $implicit: image, index, ref }`.
+   */
+  actions?: TemplateRef<BfImageViewerActionsContext>;
+  /** Accessible name of the viewer; empty uses `provideBfLabels()`'s `imageViewer`. */
+  ariaLabel?: string;
+  /**
+   * A navigation to another URL path closes the viewer (default true).
+   * @default true
+   */
+  closeOnNavigation?: boolean;
+  /**
+   * Parent of the viewer's injector and source of its labels (default the root injector). Pass
+   * the opener's `inject(Injector)` so a feature-level `provideBfLabels()` reaches the viewer.
+   */
+  injector?: Injector;
+}
+/**
+ * Opens a full-screen image viewer (a lightbox) on the overlay core: one image large over a dark
+ * scrim, previous and next buttons, the arrow keys, Home and End to step through the set
+ * (wrapping at both ends), a counter, the caption and optional actions. It zooms out of the
+ * clicked thumbnail (`origin`) and back into it, cross-fades between images, and fades when there
+ * is no thumbnail on screen; reduced motion only fades. It is a modal dialog: focus moves to its
+ * close button and is trapped, `Escape`, the close button and a click on the scrim close it, the
+ * page behind it is `inert` and does not scroll, and focus returns to the opener.
+ *
+ * @example
+ * const ref = inject(BfImageViewerService).open({
+ *   images: shots.map((s) => ({ src: s.full, label: s.alt, caption: s.title })),
+ *   index: 2,
+ *   origin: (i) => thumbnails[i],
+ * });
+ * await ref.afterClosed;
+ * @summary Opens a full-screen image viewer that zooms from a thumbnail and steps through a set
+ * @since 0.5.0
+ */
+export declare class BfImageViewerService {
+  private readonly overlays;
+  private readonly injector;
+  /**
+   * Opens the viewer on `options.images`, showing `options.index` first.
+   * @param options The images, the first index, the thumbnail, the actions and the injector.
+   * @returns The viewer's ref.
+   */
+  open(options: BfImageViewerOptions): BfImageViewerRef;
+  static ɵfac: i0.ɵɵFactoryDeclaration<BfImageViewerService, never>;
+  static ɵprov: i0.ɵɵInjectableDeclaration<any>;
+}
+export { type BfComboboxFilter, type BfComboboxOption, type BfConfirmButton, type BfConfirmButtonRole, type BfConfirmOptions, type BfConfirmSize, type BfDateInputPicker, type BfDateTimeInputPicker, type BfDesktopToastConfig, type BfDesktopToastOptions, type BfDesktopToastPosition, type BfDialogConfig, type BfDialogRole, type BfDialogSize, type BfDialogTemplateContext, type BfImageViewerActionsContext, type BfImageViewerImage, type BfImageViewerOptions, type BfImageViewerOrigin, type BfMenuButtonVariant, type BfMenuPlacement, type BfOverlayAutoFocus, type BfOverlayController, type BfOverlayHost, type BfOverlayOptions, type BfOverlayPlacement, type BfOverlayPosition, type BfOverlayRole, type BfOverlayStackOptions, type BfOverlayTemplateContext, type BfPopoverPlacement, type BfSelectOption, type BfSidePanelConfig, type BfSidePanelTemplateContext, type BfSidePanelWidth, type BfStackedOverlay, type BfTimeInputHourCycle, type BfTimeInputPicker, type BfToastAction, type BfToastController, type BfToastDismissReason, type BfTooltipPlacement, type ɵBfToastHandle, type ɵBfToastPresenter, type ɵBfToastQueueOptions, type ɵBfToastRequest, type ɵBfToastView, labelPanelByHeading as ɵlabelPanelByHeading, watchPanelHeading as ɵwatchPanelHeading };