@bitforgehq/ui 0.3.0 → 0.3.2

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

@@ -1,8 +1,9 @@
 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 { BfSize } from "@bitforgehq/ui";
+import { BfCalendarDisabledDate, BfColorScheme, BfCompareWith, BfSize } from "@bitforgehq/ui";
 import * as i1 from "@angular/cdk/menu";
+import { FormValueControl, ValidationError } from "@angular/forms/signals";
 /**
  * The `data` passed to `BfOverlayService.open()`, injectable in the overlay's content.
  *
@@ -173,6 +174,14 @@ export declare class BfOverlayStack {
  * @since 0.2.0
  */
 type BfOverlayPosition = 'bottom' | 'center' | 'top' | 'fullscreen';
+/**
+ * Where an overlay panel sits: a `BfOverlayPosition`, or `end`, full height against the inline
+ * end edge of the viewport (the right in a left-to-right page, the left under `dir="rtl"`).
+ *
+ * @summary Where an overlay panel sits: a viewport position or full height at the end
+ * @since 0.3.1
+ */
+type BfOverlayPlacement = BfOverlayPosition | 'end';
 /**
  * The ARIA role of an overlay panel: a `dialog`, an `alertdialog` or a passive `status`.
  *
@@ -266,10 +275,10 @@ interface BfOverlayOptions {
    */
   restoreFocus?: boolean;
   /**
-   * Placement of the panel (default `center`).
+   * Placement of the panel (default `center`); `end` is full height at the inline end edge.
    * @default 'center'
    */
-  position?: BfOverlayPosition;
+  position?: BfOverlayPlacement;
   /**
    * Closes the overlay when the URL path changes (default true; false for passive overlays): a
    * router navigation, a link, the browser's back and forward buttons. Query- or fragment-only
@@ -302,6 +311,15 @@ interface BfOverlayOptions {
    * @default false
    */
   passive?: boolean;
+  /**
+   * A modal overlay (default true) has a backdrop, traps focus, is `aria-modal`, blocks document
+   * scroll and makes the page behind it `inert`. A non-modal one (a side panel beside the page)
+   * has none of these and is not in `BfOverlayStack`: focus moves in, the page stays usable,
+   * `Escape` closes it only while focus is inside it, and on close focus returns to the opener
+   * only from inside it. Ignored for passive overlays.
+   * @default true
+   */
+  modal?: boolean;
   /**
    * Enter animation of the panel (default `fadeIn`); return null for none.
    * @default fadeIn
@@ -335,6 +353,13 @@ interface BfOverlayTemplateContext {
   /** The `data` the overlay was opened with (`let-data="data"`). */
   data: unknown;
 }
+/** The elements Tab stops at (without a negative tabindex). */
+declare const TABBABLE: string;
+/**
+ * Where an overlay's initial focus goes inside `panel`: the `[autofocus]`/`[cdkFocusInitial]` mark,
+ * else the first tabbable element that is not the container's own chrome. Shared with the popover.
+ */
+declare function firstTabbable(panel: HTMLElement): HTMLElement | null;
 /**
  * Opens overlays on the Angular CDK `Overlay`: a component or template in a panel with a
  * backdrop, a focus trap, `role`/`aria-modal`/`aria-labelledby`, `Escape` and backdrop click
@@ -348,9 +373,11 @@ interface BfOverlayTemplateContext {
  * close on it (`dismissOnEscape: false` without `onEscape`, or an `onEscape` that keeps it open)
  * swallows Android web back for as long as it is open, as a non-dismissible sheet swallows the
  * hardware back button. A navigation to another URL path closes every non-passive
- * overlay (`closeOnNavigation`, read from `Location`, so no router is needed). The content
- * injects `BF_OVERLAY_DATA` and `BfOverlayRef` (plus any `providers`). `BfDialogService` and the
- * `/mobile` sheet, modal, toast, action sheet and alert services build on it.
+ * overlay (`closeOnNavigation`, read from `Location`, so no router is needed). `modal: false`
+ * (a side panel beside the page) drops the backdrop, the trap, `aria-modal`, the scroll lock and
+ * the `inert` page. The content injects `BF_OVERLAY_DATA` and `BfOverlayRef` (plus any
+ * `providers`). `BfDialogService`, `BfSidePanelService` and the `/mobile` sheet, modal, toast,
+ * action sheet and alert services build on it.
  *
  * @example
  * const ref = inject(BfOverlayService).open(ConfirmComponent, {
@@ -534,6 +561,26 @@ export declare function fadeUp(el: HTMLElement, distance?: string): Animation;
  * @since 0.2.0
  */
 export declare function fadeDown(el: HTMLElement, distance?: string): Animation;
+/**
+ * Slides `el` in from beyond the inline end edge of the viewport (the right, the left under
+ * `dir="rtl"`) by its own width: the enter animation of a side panel.
+ *
+ * @param el The element to animate, usually the overlay panel.
+ * @returns The running animation.
+ * @summary Slides an element in from the inline end, the enter animation of a side panel
+ * @since 0.3.1
+ */
+export declare function slideInFromEnd(el: HTMLElement): Animation;
+/**
+ * Slides `el` out past the inline end edge of the viewport by its own width (the reverse of
+ * `slideInFromEnd`): the exit animation of a side panel.
+ *
+ * @param el The element to animate, usually the overlay panel.
+ * @returns The running animation.
+ * @summary Slides an element out past the inline end, the exit animation of a side panel
+ * @since 0.3.1
+ */
+export declare function slideOutToEnd(el: HTMLElement): Animation;
 /**
  * Names an overlay panel by the first heading inside it that is not `aria-hidden` or `hidden`:
  * gives the heading an id when it has none (`bf-overlay-title-<n>`), points the panel's
@@ -1511,4 +1558,1845 @@ export declare class BfMenuButtonComponent {
     "closed": "closed";
   }, never, ["[bfSlot=icon-start]", "*"], true, never>;
 }
-export { type BfConfirmButton, type BfConfirmButtonRole, type BfConfirmOptions, type BfConfirmSize, 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 BfOverlayPosition, type BfOverlayRole, type BfOverlayStackOptions, type BfOverlayTemplateContext, type BfStackedOverlay, type BfToastAction, type BfToastController, type BfToastDismissReason, type ɵBfToastHandle, type ɵBfToastPresenter, type ɵBfToastQueueOptions, type ɵBfToastRequest, type ɵBfToastView, labelPanelByHeading as ɵlabelPanelByHeading, watchPanelHeading as ɵwatchPanelHeading };
+/** One choice of the theme menu: the scheme and its label. */
+interface ThemeChoice {
+  readonly value: BfColorScheme;
+  readonly label: string;
+}
+/**
+ * The colour scheme switch as a menu button, for a crowded top bar: a `bf-menu-button` whose menu
+ * holds System, Light and Dark as radio items, the current one marked with a dot. It holds a
+ * `BfColorScheme` and injects no service, so the app binds its own state, usually
+ * `BfColorSchemeService.scheme` (`BfPlatformService.theme` in a Capacitor app). The button shows
+ * `label` ("Theme") next to an optional icon, or only the icon with `iconOnly`.
+ *
+ * @example
+ * <bf-theme-menu-button iconOnly variant="text" [(value)]="colorScheme.scheme">
+ *   <bf-icon bfSlot="icon" [icon]="colorScheme.dark() ? Moon : Sun" />
+ * </bf-theme-menu-button>
+ * @summary Menu button with System, Light and Dark radio items bound to the colour scheme
+ * @category Overlays
+ * @since 0.3.1
+ * @slot icon The icon before the label, or the whole button with `iconOnly` (a sun or a moon).
+ */
+export declare class BfThemeMenuButtonComponent {
+  private readonly labels;
+  /** The colour scheme choice; bind it two-way, usually to `BfColorSchemeService.scheme`. */
+  readonly value: import("@angular/core").ModelSignal<BfColorScheme>;
+  /** The button's text, and its accessible name with `iconOnly`; empty falls back to the `theme`
+   * label. */
+  readonly label: import("@angular/core").InputSignal<string>;
+  /** Square button holding only the projected icon, like `bf-icon-button`. */
+  readonly iconOnly: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  /** Visual style: outline (default), text, tonal. */
+  readonly variant: import("@angular/core").InputSignal<BfMenuButtonVariant>;
+  /** Height step: sm 32, md 40, lg 48 px; unset follows `provideBfDefaults()` (`controlSize`,
+   * `md` by default). */
+  readonly size: import("@angular/core").InputSignal<BfSize | undefined>;
+  /** Where the menu opens against the button; it flips when it would overflow. */
+  readonly placement: import("@angular/core").InputSignal<BfMenuPlacement>;
+  /** Emitted with the new choice right after the user picks another item. */
+  readonly changed: import("@angular/core").OutputEmitterRef<BfColorScheme>;
+  /** The three items, labelled by `themeSystem`, `themeLight` and `themeDark`. */
+  protected readonly choices: readonly ThemeChoice[];
+  /** The button's name: `label`, else the `theme` label. */
+  protected readonly resolvedLabel: import("@angular/core").Signal<string>;
+  /**
+   * Takes the item the user picked; the current choice again changes nothing.
+   * @internal
+   */
+  select(next: BfColorScheme): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<BfThemeMenuButtonComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<BfThemeMenuButtonComponent, "bf-theme-menu-button", never, {
+    "value": {
+      "alias": "value";
+      "required": false;
+      "isSignal": true;
+    };
+    "label": {
+      "alias": "label";
+      "required": false;
+      "isSignal": true;
+    };
+    "iconOnly": {
+      "alias": "iconOnly";
+      "required": false;
+      "isSignal": true;
+    };
+    "variant": {
+      "alias": "variant";
+      "required": false;
+      "isSignal": true;
+    };
+    "size": {
+      "alias": "size";
+      "required": false;
+      "isSignal": true;
+    };
+    "placement": {
+      "alias": "placement";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "value": "valueChange";
+    "changed": "changed";
+  }, never, ["[bfSlot=icon]"], true, never>;
+}
+/**
+ * The collapse button of a `bf-sidebar`: a text icon button placed inside the sidebar (usually in
+ * its header or footer) that flips the sidebar between full width and an icon rail. Its name and
+ * tooltip say what the next press does ("Collapse sidebar", "Expand sidebar"), `aria-expanded`
+ * follows the sidebar and `aria-controls` points at its `nav`. It shows the `collapse-icon` slot
+ * while expanded and the `expand-icon` slot while collapsed. It reads and writes the sidebar's
+ * `collapsed` model, so `[(collapsed)]` on the sidebar sees every press. Outside a `bf-sidebar`
+ * (in a `bf-top-nav`, or on its own) it renders nothing.
+ *
+ * @example
+ * <bf-sidebar [(collapsed)]="sidebarState.collapsed">
+ *   <bf-sidebar-toggle bfSlot="footer">
+ *     <bf-icon bfSlot="collapse-icon" [icon]="PanelLeftClose" />
+ *     <bf-icon bfSlot="expand-icon" [icon]="PanelLeftOpen" />
+ *   </bf-sidebar-toggle>
+ * </bf-sidebar>
+ * @summary Icon button inside a sidebar that collapses it to an icon rail and back
+ * @category Navigation
+ * @since 0.3.2
+ * @slot collapse-icon The icon shown while the sidebar is expanded (a panel closing).
+ * @slot expand-icon The icon shown while the sidebar is an icon rail (a panel opening).
+ */
+export declare class BfSidebarToggleComponent {
+  private readonly defaults;
+  private readonly labels;
+  private readonly host;
+  /** The enclosing sidebar's context; null outside a sidebar (a top nav never collapses). */
+  protected readonly nav: import("@bitforgehq/ui").ɵBfNavHost | null;
+  /** Height step: sm 32, md 40, lg 48 px (square); unset follows `provideBfDefaults()`
+   * (`controlSize`, `md` by default). */
+  readonly size: import("@angular/core").InputSignal<BfSize | undefined>;
+  /** Whether the sidebar is an icon rail now. */
+  protected readonly collapsed: import("@angular/core").Signal<boolean>;
+  /** What the next press does: `sidebarExpand` while collapsed, else `sidebarCollapse`. */
+  protected readonly name: import("@angular/core").Signal<string>;
+  protected readonly hostClasses: import("@angular/core").Signal<string>;
+  protected readonly classes: import("@angular/core").Signal<string>;
+  /**
+   * Flips the sidebar between full width and an icon rail.
+   * @internal
+   */
+  toggle(): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<BfSidebarToggleComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<BfSidebarToggleComponent, "bf-sidebar-toggle", never, {
+    "size": {
+      "alias": "size";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, ["[bfSlot=collapse-icon]", "[bfSlot=expand-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,
+ * and the body becomes focusable only while its content overflows, so keyboard users can scroll
+ * it (a region named by the title).
+ *
+ * @example
+ * const ref = inject(BfSidePanelService).open(InvoiceDetailsComponent, { data: invoice });
+ * // InvoiceDetailsComponent template:
+ * // <bf-side-panel title="INV-204"> …details…
+ * //   <div bfSlot="footer">…buttons…</div> </bf-side-panel>
+ * @summary Desktop panel sliding in from the end edge, with a title, body and footer actions
+ * @category Overlays
+ * @since 0.3.1
+ * @slot header More header content after the title, such as a status badge.
+ * @slot default The panel body.
+ * @slot footer The actions, aligned at the end and kept at the bottom.
+ */
+export declare class BfSidePanelComponent {
+  private readonly labels;
+  private readonly context;
+  private readonly ref;
+  /** Heading of the panel, rendered as the `h2` the side panel is labelled by. */
+  readonly title: import("@angular/core").InputSignal<string>;
+  /** Accessible name of the close button; empty uses `provideBfLabels()`'s `close` ("Close"). */
+  readonly closeLabel: import("@angular/core").InputSignal<string>;
+  /** True while the body's content is taller than the body (it scrolls). */
+  protected readonly overflowing: import("@angular/core").WritableSignal<boolean>;
+  protected readonly titleId: string;
+  protected readonly closeIcon: import("lucide").IconNode;
+  private readonly width;
+  protected readonly hostClasses: import("@angular/core").Signal<string>;
+  protected readonly closeName: import("@angular/core").Signal<string>;
+  private readonly body;
+  private readonly content;
+  constructor();
+  /** Closes the panel with no result (does nothing outside `BfSidePanelService`). */
+  protected close(): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<BfSidePanelComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<BfSidePanelComponent, "bf-side-panel", never, {
+    "title": {
+      "alias": "title";
+      "required": false;
+      "isSignal": true;
+    };
+    "closeLabel": {
+      "alias": "closeLabel";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, ["[bfSlot=header]", "*", "[bfSlot=footer]"], true, never>;
+}
+/**
+ * The side panel's width scale: `sm` 360 px, `md` 480 px, `lg` 640 px (22.5, 30 and 40 rem), each
+ * never wider than the viewport.
+ *
+ * @summary The side panel widths, from a 360 px detail list to a 640 px form
+ * @since 0.3.1
+ */
+type BfSidePanelWidth = 'sm' | 'md' | 'lg';
+/**
+ * The `data` passed to `BfSidePanelService.open()`, injectable in the panel's content.
+ *
+ * @summary Injection token carrying the data a side panel was opened with, for its content
+ * @since 0.3.1
+ */
+export declare const BF_SIDE_PANEL_DATA: InjectionToken<unknown>;
+/** @internal What `BfSidePanelService` tells the `bf-side-panel` inside its content. */
+interface BfSidePanelContext {
+  /** Id the `bf-side-panel` title renders with; the panel's `aria-labelledby` points to it. */
+  readonly titleId: string;
+  readonly width: BfSidePanelWidth;
+}
+/** @internal Provided by `BfSidePanelService` to the panel's content. */
+declare const BF_SIDE_PANEL_CONTEXT: InjectionToken<BfSidePanelContext>;
+/**
+ * Handle to an open side panel, returned by `BfSidePanelService.open()` and injectable in the
+ * panel's content (`inject(BfSidePanelRef)`). `close(result)` slides the panel out, detaches it
+ * and resolves `afterClosed` with `result`; later calls are ignored. Closing with `Escape`, the
+ * backdrop, the `bf-side-panel` close button or a navigation resolves `undefined`.
+ *
+ * @example
+ * const ref = inject(BfSidePanelService).open<InvoiceDetailsComponent, Invoice, Invoice>(
+ *   InvoiceDetailsComponent,
+ *   { data: invoice },
+ * );
+ * const saved = await ref.afterClosed;
+ *
+ * @summary Handle on an open side panel that closes it and resolves with its result
+ * @since 0.3.1
+ */
+export declare class BfSidePanelRef<R = unknown, C = unknown> {
+  private readonly overlayRef;
+  private readonly instance;
+  /** Unique id of the side panel (its overlay's `bf-overlay-N`). */
+  readonly id: string;
+  /** Resolves with the result given to `close()`, or `undefined`, once the panel is detached. */
+  readonly afterClosed: Promise<R | undefined>;
+  /** True once the panel has been detached. */
+  readonly closed: Signal<boolean>;
+  /** @internal Created by `BfSidePanelService`; apps never construct it. */
+  constructor(overlayRef: BfOverlayRef<unknown>, instance?: () => C | null);
+  /** The content component; `null` for a panel opened from a template. */
+  get componentInstance(): C | null;
+  /**
+   * Closes the panel with an optional result; ignored once closing.
+   * @param result The value `afterClosed` resolves with.
+   */
+  close(result?: R): void;
+}
+/**
+ * Context of a template opened with `BfSidePanelService.open()`: `let-ref` and `let-data="data"`.
+ *
+ * @summary The context a template opened as a side panel receives: its ref and its data
+ * @since 0.3.1
+ */
+interface BfSidePanelTemplateContext<D = unknown, R = unknown> {
+  /** The panel's ref (`let-ref`), to close it with a result. */
+  $implicit: BfSidePanelRef<R>;
+  /** The `data` the panel was opened with (`let-data="data"`). */
+  data: D;
+}
+/**
+ * Options of `BfSidePanelService.open()`.
+ *
+ * @summary Options of a side panel: its data, width, modality, name and injector
+ * @since 0.3.1
+ */
+interface BfSidePanelConfig<D = unknown> {
+  /** Injected into the content as `BF_SIDE_PANEL_DATA` (and a template's `data`). */
+  data?: D;
+  /**
+   * Width of the `bf-side-panel` in the content (default `md`, 480 px), capped at the viewport.
+   * @default 'md'
+   */
+  width?: BfSidePanelWidth;
+  /**
+   * A modal panel (default true) has a scrim, traps focus and makes the page behind it inert;
+   * `false` keeps the page usable beside it.
+   * @default true
+   */
+  modal?: boolean;
+  /** Accessible name, when the content renders no `bf-side-panel` title and no heading. */
+  ariaLabel?: string;
+  /**
+   * Parent of the content's injector and source of its labels (default the root injector). Pass
+   * the opener's `inject(Injector)` so a feature-level `provideBfLabels()` reaches the panel.
+   */
+  injector?: Injector;
+}
+/**
+ * Opens side panels on the overlay core: a component or template in a full-height pane that
+ * slides in from the inline end edge (the right, the left under `dir="rtl"`; a cross-fade under
+ * reduced motion), labelled by its `bf-side-panel` title, with focus moved in, `Escape` closing
+ * it and focus returned to the opener. A modal panel (the default) adds a scrim that closes it on
+ * a click, traps focus, locks document scroll and makes the page behind it `inert`, as a dialog
+ * does; `modal: false` keeps the page usable and scrollable beside it, and `Escape` closes it
+ * only while focus is inside it. A navigation to another URL path closes it. Desktop only.
+ *
+ * @example
+ * const ref = inject(BfSidePanelService).open(InvoiceDetailsComponent, {
+ *   data: invoice,
+ *   width: 'lg',
+ * });
+ * const saved = await ref.afterClosed;
+ * @since 0.3.1
+ * @summary Opens a full-height panel from the end edge, modal or beside the page
+ */
+export declare class BfSidePanelService {
+  private readonly overlays;
+  private readonly injector;
+  /**
+   * Opens `component` as a side panel; it injects `BfSidePanelRef` and `BF_SIDE_PANEL_DATA`.
+   * @param component The component to render; it injects `BfSidePanelRef` and `BF_SIDE_PANEL_DATA`.
+   * @param config The panel's data, width, modality, name and injector.
+   */
+  open<C, D = unknown, R = unknown>(component: Type<C>, config?: BfSidePanelConfig<D>): BfSidePanelRef<R, C>;
+  /**
+   * Opens `template` as a side panel; its context is `{ $implicit: ref, data }`.
+   * @param template The template to render, with the context `{ $implicit: ref, data }`.
+   * @param config The panel's data, width, modality, name and injector.
+   */
+  open<D = unknown, R = unknown>(template: TemplateRef<BfSidePanelTemplateContext<D, R>>, config?: BfSidePanelConfig<D>): BfSidePanelRef<R>;
+  /**
+   * A panel without an `ariaLabel` whose content rendered no `bf-side-panel` title (the core then
+   * drops the dangling `aria-labelledby`) is named by the first heading in its content, also one
+   * that renders later, and by the `dialog` label until then.
+   */
+  private nameUnlabelledPanel;
+  static ɵfac: i0.ɵɵFactoryDeclaration<BfSidePanelService, never>;
+  static ɵprov: i0.ɵɵInjectableDeclaration<any>;
+}
+/**
+ * The small dark pill of a tooltip (role `tooltip`). A `[bfTooltip]` directive renders it in the
+ * CDK overlay beside its element while the pointer rests on it or it has keyboard focus, so you
+ * rarely place it yourself; the directive is how you add a tooltip.
+ *
+ * @example
+ * <bf-icon-button label="Copy link" bfTooltip="Copy link"><bf-icon [icon]="link" /></bf-icon-button>
+ * @summary Short hint beside a control on hover or keyboard focus, for desktop
+ * @category Overlays
+ * @since 0.3.1
+ */
+export declare class BfTooltipComponent {
+  /** The tooltip's text: a few words that repeat or explain the control's name. */
+  readonly text: import("@angular/core").InputSignal<string>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<BfTooltipComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<BfTooltipComponent, "bf-tooltip", never, {
+    "text": {
+      "alias": "text";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, never>;
+}
+/**
+ * Which side of its element a tooltip sits on; `start` and `end` follow the text direction.
+ *
+ * @summary Which side of its element a tooltip sits on: top, bottom, start or end
+ * @since 0.3.1
+ */
+type BfTooltipPlacement = 'top' | 'bottom' | 'start' | 'end';
+/**
+ * Shows a short `bf-tooltip` beside an element: after a 500 ms rest of a fine pointer, at once on
+ * keyboard focus. It hides when the pointer leaves (it stays while the pointer moves onto the
+ * tooltip itself), on blur and on `Escape`, and while it shows, the focusable element (the host,
+ * or the first control inside it, so it works on a `bf-icon-button`) is described by it
+ * (`aria-describedby`). Nothing shows under a coarse pointer (touch), so never put information
+ * only in a tooltip. The tooltip flips to the opposite side when it would overflow the viewport.
+ *
+ * @example
+ * <bf-icon-button label="Archive" bfTooltip="Archive" bfTooltipPlacement="bottom">
+ *   <bf-icon [icon]="archive" />
+ * </bf-icon-button>
+ * @summary Adds a hover and keyboard-focus tooltip to any control on desktop
+ * @since 0.3.1
+ */
+export declare class BfTooltipDirective {
+  private readonly overlay;
+  private readonly document;
+  private readonly injector;
+  private readonly dir;
+  private readonly host;
+  /** The tooltip's text; empty shows no tooltip. */
+  readonly bfTooltip: import("@angular/core").InputSignal<string>;
+  /** The side it shows on (flipping when it would overflow), read each time it shows. */
+  readonly bfTooltipPlacement: import("@angular/core").InputSignal<BfTooltipPlacement>;
+  private readonly id;
+  private anchored;
+  private described;
+  private keys;
+  private showTimer;
+  private hideTimer;
+  constructor();
+  /** Whether the tooltip is showing. */
+  isShown(): boolean;
+  /** Shows the tooltip now (no delay). Does nothing under a coarse pointer or without text. */
+  show(): void;
+  /** Hides the tooltip now and cancels a pending show. */
+  hide(): void;
+  /** @internal */
+  pointerEntered(): void;
+  /** @internal */
+  pointerLeft(): void;
+  /** @internal */
+  focused(event: FocusEvent): void;
+  private clearTimers;
+  /** No hover under a coarse pointer: a tooltip would only show after a tap, over the finger. */
+  private coarsePointer;
+  private focusVisible;
+  /** The element the tooltip describes: the host when it takes focus, else its first control. */
+  private describedElement;
+  private describe;
+  private undescribe;
+  static ɵfac: i0.ɵɵFactoryDeclaration<BfTooltipDirective, never>;
+  static ɵdir: i0.ɵɵDirectiveDeclaration<BfTooltipDirective, "[bfTooltip]", never, {
+    "bfTooltip": {
+      "alias": "bfTooltip";
+      "required": true;
+      "isSignal": true;
+    };
+    "bfTooltipPlacement": {
+      "alias": "bfTooltipPlacement";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, never>;
+}
+/**
+ * The popover panel's surface without its padding, shared with the picker panels of the date and
+ * time inputs. It scrolls past the viewport minus 1 rem each side; the panel itself takes focus
+ * only when it holds no control, so it draws no ring. Internal to the overlay entry.
+ */
+declare const POPOVER_SURFACE: string;
+/**
+ * Non-modal panel anchored to a trigger, for filters, details or a small form (role `dialog`).
+ * Put it in an `ng-template` that a `[bfPopoverTriggerFor]` opens; it takes the id the trigger's
+ * `aria-controls` points at and is named by `bfPopoverLabel`, else by its first heading, else by
+ * the trigger.
+ *
+ * @example
+ * <button type="button" [bfPopoverTriggerFor]="details">Details</button>
+ * <ng-template #details>
+ *   <bf-popover><h2 class="text-label">Delivery</h2><p>Arrives Thursday.</p></bf-popover>
+ * </ng-template>
+ * @summary Anchored, non-modal panel for filters, details or a small form
+ * @category Overlays
+ * @since 0.3.1
+ * @slot default The panel's content: a heading, text, fields and actions.
+ */
+export declare class BfPopoverComponent {
+  /** The `bfPopoverTriggerFor` that opened this panel. */
+  private readonly trigger;
+  protected readonly id: string;
+  protected readonly label: import("@angular/core").Signal<string>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<BfPopoverComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<BfPopoverComponent, "bf-popover", never, {}, {}, never, ["*"], true, never>;
+}
+/**
+ * Where a popover opens against its trigger; `start`/`end` follow the text direction.
+ *
+ * @summary Where a popover opens against its trigger, above or below, at either end
+ * @since 0.3.1
+ */
+type BfPopoverPlacement = 'below-start' | 'below-end' | 'above-start' | 'above-end';
+/**
+ * Opens an `ng-template` (usually a `bf-popover`) as a non-modal panel anchored to the element:
+ * a click (`Enter` or `Space` on a button) toggles it, focus moves to its first control, `Tab`
+ * moves through it and on out (closing it, past the trigger), and `Escape`, a click outside or a
+ * navigation to another URL path close it, returning focus to the trigger. The control it
+ * decorates (the host, or the first control inside it, such as a `bf-button`'s button) carries
+ * `aria-haspopup="dialog"`, `aria-expanded` and, while open, `aria-controls`. Export it as
+ * `bfPopoverTrigger` to open and close it from code or from inside the panel.
+ *
+ * @example
+ * <button type="button" [bfPopoverTriggerFor]="filters" #trigger="bfPopoverTrigger">Filters</button>
+ * <ng-template #filters>
+ *   <bf-popover><h2>Filters</h2>…<button (click)="trigger.close()">Apply</button></bf-popover>
+ * </ng-template>
+ * @summary Opens an anchored, non-modal popover panel from any element or button
+ * @since 0.3.1
+ */
+export declare class BfPopoverTriggerDirective {
+  private readonly overlay;
+  private readonly document;
+  private readonly injector;
+  private readonly viewContainer;
+  private readonly location;
+  private readonly dir;
+  private readonly host;
+  /** The `ng-template` holding the panel (a `bf-popover`) this element opens. */
+  readonly bfPopoverTriggerFor: import("@angular/core").InputSignal<TemplateRef<unknown>>;
+  /** Where the panel opens (flipping when it would overflow), read each time it opens. */
+  readonly bfPopoverPlacement: import("@angular/core").InputSignal<BfPopoverPlacement>;
+  /** Accessible name of the panel. Empty: its first heading names it, else the trigger. */
+  readonly bfPopoverLabel: import("@angular/core").InputSignal<string>;
+  /** Emits when the panel opens. */
+  readonly bfPopoverOpened: import("@angular/core").OutputEmitterRef<void>;
+  /** Emits when the panel closes (`Escape`, a click outside, `Tab` out, a navigation or code). */
+  readonly bfPopoverClosed: import("@angular/core").OutputEmitterRef<void>;
+  private readonly openState;
+  /** Whether the panel is open. */
+  readonly isOpen: import("@angular/core").Signal<boolean>;
+  /** The id the `bf-popover` panel takes, which the trigger's `aria-controls` points at. */
+  readonly panelId: string;
+  private anchored;
+  private subscriptions;
+  private stopNavigation;
+  private stopHeading;
+  constructor();
+  /** Opens the panel and moves focus into it; does nothing while it is open. */
+  open(): void;
+  /**
+   * Closes the panel; does nothing while it is closed.
+   * @param restoreFocus Moves focus back to the trigger (default true).
+   */
+  close(restoreFocus?: boolean): void;
+  /** Opens the panel when it is closed, closes it when it is open. */
+  toggle(): void;
+  /** The id of the trigger's control (assigned when it has none), which names a bare panel. */
+  private labelId;
+  /** The element that takes focus and carries the ARIA state: the host, or its first control. */
+  private control;
+  /**
+   * `Tab` is not trapped: past the panel's last control it closes the panel and continues from the
+   * trigger (the browser moves on to the control after it); `Shift+Tab` before the first control
+   * closes it onto the trigger.
+   */
+  private tabbed;
+  /**
+   * Names the panel before focus moves in, so it is announced with its name: `bfPopoverLabel`
+   * (bound by `bf-popover` itself), else its first heading (watched while it has none yet), else
+   * the trigger.
+   */
+  private name;
+  private teardown;
+  static ɵfac: i0.ɵɵFactoryDeclaration<BfPopoverTriggerDirective, never>;
+  static ɵdir: i0.ɵɵDirectiveDeclaration<BfPopoverTriggerDirective, "[bfPopoverTriggerFor]", ["bfPopoverTrigger"], {
+    "bfPopoverTriggerFor": {
+      "alias": "bfPopoverTriggerFor";
+      "required": true;
+      "isSignal": true;
+    };
+    "bfPopoverPlacement": {
+      "alias": "bfPopoverPlacement";
+      "required": false;
+      "isSignal": true;
+    };
+    "bfPopoverLabel": {
+      "alias": "bfPopoverLabel";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "bfPopoverOpened": "bfPopoverOpened";
+    "bfPopoverClosed": "bfPopoverClosed";
+  }, never, never, true, never>;
+}
+/**
+ * One choice of `bf-combobox` and `bf-multi-combobox`; `value` is any type (a string by default).
+ *
+ * @summary One combobox choice with its value, label, description, group and disabled flag
+ * @since 0.3.1
+ */
+interface BfComboboxOption<T = string> {
+  /** The value the combobox takes when this option is picked. */
+  value: T;
+  /** The option's text in the list, and the field's text once it is picked. */
+  label: string;
+  /** A second, muted line under the label (an email, a role). */
+  description?: string;
+  /** Whether this option cannot be picked; it stays in the list, skipped by the arrow keys. */
+  disabled?: boolean;
+  /** The heading this option is listed under; options with the same group are listed together. */
+  group?: string;
+}
+/**
+ * Whether an option matches the typed query (the `filter` of the comboboxes). Called only for a
+ * query that is not empty.
+ *
+ * @summary Decides whether a combobox option matches the text typed into the field
+ * @since 0.3.1
+ */
+type BfComboboxFilter<T = string> = (option: BfComboboxOption<T>, query: string) => boolean;
+/** Lower case without accents (`É` → `e`), so `"zoe"` finds `"Zoë"`. */
+declare function foldText(text: string): string;
+/** The default `filter`: the option's label contains the query, ignoring case and accents. */
+declare function labelContains(option: BfComboboxOption<unknown>, query: string): boolean;
+/** A visible option and the ids the listbox gives it. */
+interface ComboboxItem<T> {
+  /** The option. */
+  option: BfComboboxOption<T>;
+  /** Its position in `options`, which keys its id. */
+  index: number;
+  /** The option element's id, which `aria-activedescendant` names while it is active. */
+  id: string;
+}
+/** A run of visible options under one heading (`label` null: the ungrouped options). */
+interface ComboboxSection<T> {
+  /** The group's heading, or null for the options without a group. */
+  label: string | null;
+  /** The heading's id, which names the `role="group"`. */
+  id: string;
+  /** The options in the section, in their `options` order. */
+  items: ComboboxItem<T>[];
+}
+/** What the combobox core reads from the component that owns it. */
+interface ComboboxHost<T> {
+  /** The options to choose from. */
+  options: Signal<readonly BfComboboxOption<T>[]>;
+  /** The match function, or null for no local filtering. */
+  filter: Signal<BfComboboxFilter<T> | null>;
+  /** Whether an option is picked (shows `aria-selected` and the check mark). */
+  isSelected(option: BfComboboxOption<T>): boolean;
+  /** Picks an option the user chose with `Enter` or a click. */
+  pick(item: ComboboxItem<T>): void;
+  /** The element the panel is anchored to and as wide as: the field box. */
+  anchor(): HTMLElement;
+  /** The panel component to open (the internal listbox). */
+  panel: Type<unknown>;
+  /** The listbox's accessible name: `aria-label` and `aria-labelledby` values. */
+  listboxLabel: Signal<string | null>;
+  /** The listbox's `aria-labelledby` value. */
+  listboxLabelledby: Signal<string | null>;
+  /** Whether the list allows several picks (`aria-multiselectable`). */
+  multiple: boolean;
+  /** Whether a request is running: the panel shows a spinner row. */
+  loading: Signal<boolean>;
+  /** The empty row's text. */
+  emptyText: Signal<string>;
+  /** The size of the field, which the option rows follow. */
+  size: Signal<BfSize>;
+  /** Emits the query each time the user changes it. */
+  queried(query: string): void;
+}
+/**
+ * The state and behaviour `bf-combobox` and `bf-multi-combobox` share: the query, the filtered and
+ * grouped options, the active option, the keyboard and the anchored panel. Created in a field
+ * initializer of the component (it injects the overlay and the component's view container), so
+ * each component keeps its own typed value model. Internal to the overlay entry.
+ */
+declare class ComboboxCore<T> {
+  readonly host: ComboboxHost<T>;
+  private readonly overlay;
+  private readonly injector;
+  private readonly viewContainer;
+  private readonly dir;
+  /** The listbox's id, which the input's `aria-controls` names. */
+  readonly listboxId: string;
+  /** The text typed since the last pick; null while the field shows its value. */
+  private readonly queryState;
+  readonly query: Signal<string | null>;
+  private readonly openState;
+  /** Whether the panel is open. */
+  readonly isOpen: Signal<boolean>;
+  /** The `index` of the active option, null for none. */
+  private readonly activeIndex;
+  /** The options that match the query, ungrouped first, then each group in first-seen order. */
+  readonly sections: Signal<ComboboxSection<T>[]>;
+  /** The visible options in list order: the order the arrow keys move through. */
+  readonly items: Signal<ComboboxItem<T>[]>;
+  /** The active option while it is visible and the panel is open. */
+  readonly active: Signal<ComboboxItem<T> | null>;
+  /** `aria-controls`: the listbox while it is rendered. */
+  readonly controls: Signal<string | null>;
+  private anchored;
+  private subscriptions;
+  constructor(host: ComboboxHost<T>);
+  /**
+   * Sets the typed text and emits `queried` when it changed; null shows the value again.
+   * @param query The text, or null.
+   */
+  setQuery(query: string | null): void;
+  /**
+   * The user typed: the text becomes the query, the panel opens and the first match is active.
+   * @param text The input's text.
+   */
+  typed(text: string): void;
+  /** Opens the panel anchored to the field; does nothing while it is open. */
+  open(): void;
+  /** Closes the panel; does nothing while it is closed. */
+  close(): void;
+  /** Follows the field's size and place while open (chips that wrap make it taller). */
+  reposition(): void;
+  /**
+   * Makes an option the active one (the pointer moved over it); a disabled one is skipped.
+   * @param item The option.
+   */
+  activate(item: ComboboxItem<T>): void;
+  /**
+   * Picks an option the user clicked; a disabled one does nothing.
+   * @param item The option.
+   */
+  choose(item: ComboboxItem<T>): void;
+  /**
+   * The list keys: arrows open and move (wrapping), `Home`/`End` move to the ends of the open
+   * list, `Enter` picks the active option. Returns whether the key was handled (and cancelled).
+   * @param event The input's keydown.
+   */
+  keydown(event: KeyboardEvent): boolean;
+  /** Moves the active option by `step` through the enabled ones, wrapping at the ends. */
+  private move;
+  private firstEnabled;
+  private teardown;
+}
+/** Equality of an option's value and a picked value under `compareWith`, never for `null`. */
+declare function sameValue<T>(compare: BfCompareWith<T>, optionValue: T, value: T | null): boolean;
+/**
+ * Text field with a filtered list of options to pick one value from (the ARIA combobox pattern).
+ * Typing filters the list by label, ignoring case and accents; the arrow keys move through it
+ * and `Enter` picks. Generic over the option value (a string by default); `null` means nothing is
+ * picked. For several values use `bf-multi-combobox`.
+ *
+ * @example
+ * <bf-combobox label="Assignee" placeholder="Search people" [options]="people" [(value)]="assigneeId" />
+ * <bf-combobox label="Owner" [options]="people" [formField]="task.ownerId" />
+ * @summary Text field that filters a list of options as you type and picks one
+ * @category Forms
+ * @since 0.3.1
+ */
+export declare class BfComboboxComponent<T = string> implements FormValueControl<T | null> {
+  /** The picked option's value, `null` while nothing is picked; two-way bindable and bound by
+   * `[formField]`. */
+  readonly value: import("@angular/core").ModelSignal<T | null>;
+  /** The options to choose from; with server search, the latest results (keep the picked one). */
+  readonly options: import("@angular/core").InputSignal<readonly BfComboboxOption<T>[]>;
+  /** Equality for matching `value` to an option (default `Object.is`); pass one for object values. */
+  readonly compareWith: import("@angular/core").InputSignal<BfCompareWith<T>>;
+  /** Whether an option matches the typed text (default: its label contains it, ignoring case and
+   * accents); `null` shows `options` unfiltered, for results filtered by a server. */
+  readonly filter: import("@angular/core").InputSignal<BfComboboxFilter<T> | null>;
+  /** 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 field. */
+  readonly label: import("@angular/core").InputSignal<string>;
+  /** Accessible name when no visible label is rendered. 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>;
+  /** Hint text shown in the empty field. */
+  readonly placeholder: import("@angular/core").InputSignal<string>;
+  /** Helper text under the field. */
+  readonly helpText: import("@angular/core").InputSignal<string>;
+  /** Explicit error text; takes precedence over Signal Forms errors. */
+  readonly errorMessage: import("@angular/core").InputSignal<string>;
+  /** Text of the list's row when no option matches; empty uses the `comboboxEmpty` label. */
+  readonly emptyLabel: import("@angular/core").InputSignal<string>;
+  /** Shows a loading row in the list, while a server search for the typed text runs. */
+  readonly loading: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  /** Disables the field. */
+  readonly disabled: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  /** Shows the value but blocks changes; the field stays focusable and the list never opens. */
+  readonly readonly: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  /** Marks the field 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[]>;
+  /** Native name attribute of the text input. */
+  readonly name: import("@angular/core").InputSignal<string>;
+  /** Input id; generated when not set. */
+  readonly id: import("@angular/core").InputSignal<string>;
+  /** Emitted with the new value after the user picks an option, or `null` after clearing the text. */
+  readonly changed: import("@angular/core").OutputEmitterRef<T | null>;
+  /** Emitted with the typed text each time the user changes it (`''` once it is cleared), for a
+   * server search. */
+  readonly queried: import("@angular/core").OutputEmitterRef<string>;
+  /** Emitted when the input gains focus. */
+  readonly focused: import("@angular/core").OutputEmitterRef<FocusEvent>;
+  /** Emitted when the input 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 el;
+  private readonly anchorEl;
+  private readonly defaults;
+  private readonly labels;
+  /** The label of the last option the user picked, for a value no current option matches (the
+   * results of a later server search). */
+  private readonly pickedLabel;
+  /** The size in effect: `size`, else the app's `fieldSize` default. */
+  protected readonly resolvedSize: import("@angular/core").Signal<BfSize>;
+  protected readonly core: ComboboxCore<T>;
+  /** The picked option's label, `''` while nothing is picked. */
+  readonly valueLabel: import("@angular/core").Signal<string>;
+  /** The input's text: what the user is typing, else the picked option's label. */
+  protected readonly text: import("@angular/core").Signal<string>;
+  readonly errorText: import("@angular/core").Signal<string>;
+  readonly showError: import("@angular/core").Signal<boolean>;
+  readonly describedBy: import("@angular/core").Signal<string | null>;
+  /** `aria-errormessage`: the error paragraph while `aria-invalid` is set. */
+  readonly errorMessageId: import("@angular/core").Signal<string | null>;
+  /** `aria-label` value: only when there is no visible label. */
+  readonly ariaLabelAttr: import("@angular/core").Signal<string | null>;
+  /** `aria-labelledby` value, under the same rule as `ariaLabelAttr`. */
+  readonly ariaLabelledbyAttr: import("@angular/core").Signal<string | null>;
+  readonly wrapperClasses: import("@angular/core").Signal<string>;
+  readonly classes: import("@angular/core").Signal<string>;
+  /**
+   * Focuses the input; Signal Forms calls it from `focusBoundControl()`.
+   * @param options Passed on to the native `focus()`, such as `{ preventScroll: true }`.
+   */
+  focus(options?: FocusOptions): void;
+  /**
+   * Typing filters the list and opens it.
+   * @internal
+   */
+  onInput(el: HTMLInputElement): void;
+  /**
+   * Opens the list on a click into the field.
+   * @internal
+   */
+  onClick(): void;
+  /**
+   * The list keys (arrows, `Home`, `End`, `Enter`), and `Escape` on a closed list, which drops the
+   * typed text. `Escape` on an open list is the panel's: it closes it.
+   * @internal
+   */
+  onKeydown(event: KeyboardEvent): void;
+  /**
+   * Leaving the field closes the list. Typed text that names an option exactly picks it; empty
+   * text clears the value; any other text reverts to the picked option's label. Marks the field
+   * touched.
+   * @internal
+   */
+  onBlur(event: FocusEvent): void;
+  /** Picks an option (Enter or a click): the value, the field's text, and the list closes. */
+  private pick;
+  private set;
+  /**
+   * Drops the typed text and writes the field's text to the input at once: a pick can follow the
+   * last keystroke before change detection has run, when the binding alone would see no change.
+   */
+  private resetQuery;
+  static ɵfac: i0.ɵɵFactoryDeclaration<BfComboboxComponent<any>, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<BfComboboxComponent<any>, "bf-combobox", never, {
+    "value": {
+      "alias": "value";
+      "required": false;
+      "isSignal": true;
+    };
+    "options": {
+      "alias": "options";
+      "required": true;
+      "isSignal": true;
+    };
+    "compareWith": {
+      "alias": "compareWith";
+      "required": false;
+      "isSignal": true;
+    };
+    "filter": {
+      "alias": "filter";
+      "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;
+    };
+    "emptyLabel": {
+      "alias": "emptyLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "loading": {
+      "alias": "loading";
+      "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";
+    "queried": "queried";
+    "focused": "focused";
+    "blurred": "blurred";
+    "touch": "touch";
+  }, never, never, true, never>;
+}
+/** A picked value as a tag: its label, for the tag and its remove button's name. */
+interface BfMultiComboboxTag<T> {
+  value: T;
+  label: string;
+}
+/**
+ * Text field with a filtered list of options to pick several values from, shown as removable tags
+ * inside the field (the ARIA combobox pattern with a multi-select listbox). Typing filters the
+ * list by label, ignoring case and accents; `Enter` or a click adds or removes the active option
+ * and the list stays open. Generic over the option value (a string by default); the value is an
+ * array, empty while nothing is picked. For one value use `bf-combobox`.
+ *
+ * @example
+ * <bf-multi-combobox label="Labels" placeholder="Add labels" [options]="labels" [(value)]="picked" />
+ * <bf-multi-combobox label="Reviewers" [options]="people" [formField]="task.reviewerIds" />
+ * @summary Text field that filters options as you type and picks several as tags
+ * @category Forms
+ * @since 0.3.1
+ */
+export declare class BfMultiComboboxComponent<T = string> implements FormValueControl<readonly T[]> {
+  /** The picked options' values in the order they were picked, empty while nothing is picked;
+   * two-way bindable and bound by `[formField]`. */
+  readonly value: import("@angular/core").ModelSignal<readonly T[]>;
+  /** The options to choose from; with server search, the latest results. */
+  readonly options: import("@angular/core").InputSignal<readonly BfComboboxOption<T>[]>;
+  /** Equality for matching `value` to an option (default `Object.is`); pass one for object values. */
+  readonly compareWith: import("@angular/core").InputSignal<BfCompareWith<T>>;
+  /** Whether an option matches the typed text (default: its label contains it, ignoring case and
+   * accents); `null` shows `options` unfiltered, for results filtered by a server. */
+  readonly filter: import("@angular/core").InputSignal<BfComboboxFilter<T> | null>;
+  /** Height step of the field (its minimum height): 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 field. */
+  readonly label: import("@angular/core").InputSignal<string>;
+  /** Accessible name when no visible label is rendered. 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>;
+  /** Hint text shown while nothing is picked. */
+  readonly placeholder: import("@angular/core").InputSignal<string>;
+  /** Helper text under the field. */
+  readonly helpText: import("@angular/core").InputSignal<string>;
+  /** Explicit error text; takes precedence over Signal Forms errors. */
+  readonly errorMessage: import("@angular/core").InputSignal<string>;
+  /** Text of the list's row when no option matches; empty uses the `comboboxEmpty` label. */
+  readonly emptyLabel: import("@angular/core").InputSignal<string>;
+  /** Shows a loading row in the list, while a server search for the typed text runs. */
+  readonly loading: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  /** Disables the field and its tags. */
+  readonly disabled: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  /** Shows the tags but blocks changes: no remove buttons, and the list never opens. */
+  readonly readonly: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  /** Marks the field required (at least one value). */
+  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[]>;
+  /** Native name attribute of the text input. */
+  readonly name: import("@angular/core").InputSignal<string>;
+  /** Input id; generated when not set. */
+  readonly id: import("@angular/core").InputSignal<string>;
+  /** Emitted with the new values after the user adds or removes one. */
+  readonly changed: import("@angular/core").OutputEmitterRef<readonly T[]>;
+  /** Emitted with the typed text each time the user changes it (`''` once it is cleared), for a
+   * server search. */
+  readonly queried: import("@angular/core").OutputEmitterRef<string>;
+  /** Emitted when the input gains focus. */
+  readonly focused: import("@angular/core").OutputEmitterRef<FocusEvent>;
+  /** Emitted when the input 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 el;
+  private readonly anchorEl;
+  private readonly defaults;
+  protected readonly labels: import("@bitforgehq/ui").BfLabels;
+  /** The labels of the options the user picked, for values no current option matches (the
+   * results of a later server search). */
+  private readonly pickedLabels;
+  /** The size in effect: `size`, else the app's `fieldSize` default. */
+  protected readonly resolvedSize: import("@angular/core").Signal<BfSize>;
+  protected readonly core: ComboboxCore<T>;
+  /** The picked values with their labels, in `value` order. */
+  protected readonly tags: import("@angular/core").Signal<BfMultiComboboxTag<T>[]>;
+  /** Whether the user can change the value (not disabled, not read-only). */
+  protected readonly editable: import("@angular/core").Signal<boolean>;
+  readonly errorText: import("@angular/core").Signal<string>;
+  readonly showError: import("@angular/core").Signal<boolean>;
+  readonly describedBy: import("@angular/core").Signal<string | null>;
+  /** `aria-errormessage`: the error paragraph while `aria-invalid` is set. */
+  readonly errorMessageId: import("@angular/core").Signal<string | null>;
+  /** `aria-label` value: only when there is no visible label. */
+  readonly ariaLabelAttr: import("@angular/core").Signal<string | null>;
+  /** `aria-labelledby` value, under the same rule as `ariaLabelAttr`. */
+  readonly ariaLabelledbyAttr: import("@angular/core").Signal<string | null>;
+  readonly boxClasses: import("@angular/core").Signal<string>;
+  protected readonly inputClasses: string;
+  protected readonly tagClasses: string;
+  protected readonly removeClasses: string;
+  protected readonly crossClasses: string;
+  constructor();
+  /**
+   * Focuses the input; Signal Forms calls it from `focusBoundControl()`.
+   * @param options Passed on to the native `focus()`, such as `{ preventScroll: true }`.
+   */
+  focus(options?: FocusOptions): void;
+  /**
+   * Typing filters the list and opens it.
+   * @internal
+   */
+  onInput(el: HTMLInputElement): void;
+  /**
+   * Opens the list on a click into the input.
+   * @internal
+   */
+  onClick(): void;
+  /**
+   * A press on the box itself (not a tag's button, not the input) focuses the input and opens the
+   * list.
+   * @internal
+   */
+  onBoxMousedown(event: MouseEvent): void;
+  /**
+   * The list keys (arrows, `Home`, `End`, `Enter`), `Backspace` in the empty input (removes the last
+   * tag) and `Escape` on a closed list (drops the typed text).
+   * @internal
+   */
+  onKeydown(event: KeyboardEvent): void;
+  /**
+   * Leaving the field closes the list and drops the typed text; marks the field touched.
+   * @internal
+   */
+  onBlur(event: FocusEvent): void;
+  /**
+   * Removes the value at `index` (a tag's remove button) and returns focus to the input.
+   * @internal
+   */
+  remove(index: number): void;
+  /** Adds a picked option, or removes it when it is picked already; the typed text clears and the
+   * list stays open. */
+  private toggle;
+  private indexOf;
+  /**
+   * Drops the typed text and writes the field's text to the input at once: a pick can follow the
+   * last keystroke before change detection has run, when the binding alone would see no change.
+   */
+  private resetQuery;
+  static ɵfac: i0.ɵɵFactoryDeclaration<BfMultiComboboxComponent<any>, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<BfMultiComboboxComponent<any>, "bf-multi-combobox", never, {
+    "value": {
+      "alias": "value";
+      "required": false;
+      "isSignal": true;
+    };
+    "options": {
+      "alias": "options";
+      "required": true;
+      "isSignal": true;
+    };
+    "compareWith": {
+      "alias": "compareWith";
+      "required": false;
+      "isSignal": true;
+    };
+    "filter": {
+      "alias": "filter";
+      "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;
+    };
+    "emptyLabel": {
+      "alias": "emptyLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "loading": {
+      "alias": "loading";
+      "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";
+    "queried": "queried";
+    "focused": "focused";
+    "blurred": "blurred";
+    "touch": "touch";
+  }, never, never, true, never>;
+}
+/**
+ * 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.
+ *
+ * @summary Whether a date input offers a calendar popover besides typing
+ * @since 0.3.1
+ */
+type BfDateInputPicker = 'calendar' | 'none';
+/**
+ * Date field typed part by part (day, month and year in the locale's order) with a calendar
+ * popover, valued as an ISO date string and bound like any other field.
+ *
+ * @example
+ * <bf-date-input label="Due date" min="2026-01-01" [(value)]="due" />
+ * <bf-date-input label="Birthday" picker="none" [formField]="profile.birthday" />
+ * @summary Typed date field with a calendar popover, valued as an ISO date string
+ * @category Forms
+ * @since 0.3.1
+ */
+export declare class BfDateInputComponent implements FormValueControl<string | null> {
+  /** The date as an ISO string ('YYYY-MM-DD'), `null` while empty or incomplete; two-way bindable
+   * and bound by `[formField]`. */
+  readonly value: import("@angular/core").ModelSignal<string | null>;
+  /** The earliest valid date (ISO): earlier dates show an error, and the calendar stops there. */
+  readonly min: import("@angular/core").InputSignal<string | undefined>;
+  /** The latest valid date (ISO): later dates show an error, and the calendar stops there. */
+  readonly max: import("@angular/core").InputSignal<string | undefined>;
+  /** Rules out more dates (weekends, booked days): disabled in the calendar, an error when typed. */
+  readonly disabledDate: import("@angular/core").InputSignal<BfCalendarDisabledDate | null>;
+  /** `calendar` adds the button that opens a calendar popover; `none` keeps the field typed only. */
+  readonly picker: import("@angular/core").InputSignal<BfDateInputPicker>;
+  /** Renders the platform's date picker (`input type="date"`) under a coarse pointer (touch). */
+  readonly native: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  /** BCP 47 locale of the part order, the separators and the calendar; empty follows the
+   * document's `lang`, else English. */
+  readonly locale: import("@angular/core").InputSignal<string>;
+  /** 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 field. */
+  readonly label: import("@angular/core").InputSignal<string>;
+  /** Accessible name when no visible label is rendered. 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>;
+  /** Helper text under the field. */
+  readonly helpText: import("@angular/core").InputSignal<string>;
+  /** Explicit error text; takes precedence over the field's own errors and Signal Forms errors. */
+  readonly errorMessage: import("@angular/core").InputSignal<string>;
+  /** Disables the field and its calendar button. */
+  readonly disabled: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  /** Shows the date but blocks changes; the parts stay focusable and expose `aria-readonly`. */
+  readonly readonly: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  /** Marks the field 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[]>;
+  /** Native name attribute of the platform input (`native` under a coarse pointer). */
+  readonly name: import("@angular/core").InputSignal<string>;
+  /** Field id; generated when not set. */
+  readonly id: import("@angular/core").InputSignal<string>;
+  /** Emitted with the new date right after a user change: `null` once it is cleared or incomplete. */
+  readonly changed: import("@angular/core").OutputEmitterRef<string | null>;
+  /** Emitted when focus leaves the field (not into its calendar), so Signal Forms marks it touched. */
+  readonly touch: import("@angular/core").OutputEmitterRef<void>;
+  private readonly field;
+  /**
+   * Focuses the first empty part (else the first part); Signal Forms calls it from
+   * `focusBoundControl()`.
+   * @param options Passed on to the native `focus()`, such as `{ preventScroll: true }`.
+   */
+  focus(options?: FocusOptions): void;
+  /** Opens the calendar popover; does nothing without a picker, or while disabled or read-only. */
+  openPicker(): void;
+  /** Closes the calendar popover, focus back on its button; does nothing while it is closed. */
+  closePicker(): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<BfDateInputComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<BfDateInputComponent, "bf-date-input", never, {
+    "value": {
+      "alias": "value";
+      "required": false;
+      "isSignal": true;
+    };
+    "min": {
+      "alias": "min";
+      "required": false;
+      "isSignal": true;
+    };
+    "max": {
+      "alias": "max";
+      "required": false;
+      "isSignal": true;
+    };
+    "disabledDate": {
+      "alias": "disabledDate";
+      "required": false;
+      "isSignal": true;
+    };
+    "picker": {
+      "alias": "picker";
+      "required": false;
+      "isSignal": true;
+    };
+    "native": {
+      "alias": "native";
+      "required": false;
+      "isSignal": true;
+    };
+    "locale": {
+      "alias": "locale";
+      "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;
+    };
+    "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";
+    "touch": "touch";
+  }, never, never, true, never>;
+}
+/**
+ * How `bf-time-input` picks a time besides typing: `list` adds a button that opens a list of
+ * times every `step` minutes, `none` keeps the field typed only.
+ *
+ * @summary Whether a time input offers a popover list of times besides typing
+ * @since 0.3.1
+ */
+type BfTimeInputPicker = 'list' | 'none';
+/**
+ * The clock of a time field: `h12` counts 1–12 with an AM/PM part, `h23` counts 0–23.
+ *
+ * @summary A twelve-hour clock with AM and PM, or a twenty-four-hour clock
+ * @since 0.3.1
+ */
+type BfTimeInputHourCycle = 'h12' | 'h23';
+/**
+ * Time field typed part by part (hour, minute, optional seconds, AM/PM under a 12-hour clock)
+ * with a popover list of times, valued as an ISO time string.
+ *
+ * @example
+ * <bf-time-input label="Start" [step]="15" [(value)]="start" />
+ * <bf-time-input label="Alarm" hourCycle="h12" [formField]="settings.alarm" />
+ * @summary Typed time-of-day field with a popover list of times, valued as an ISO string
+ * @category Forms
+ * @since 0.3.1
+ */
+export declare class BfTimeInputComponent implements FormValueControl<string | null> {
+  /** The time as an ISO string ('HH:mm', 'HH:mm:ss' with `seconds`), `null` while empty or
+   * incomplete; two-way bindable and bound by `[formField]`. */
+  readonly value: import("@angular/core").ModelSignal<string | null>;
+  /** The earliest valid time ('HH:mm'): earlier times show an error and are disabled in the list. */
+  readonly min: import("@angular/core").InputSignal<string | undefined>;
+  /** The latest valid time ('HH:mm'): later times show an error and are disabled in the list. */
+  readonly max: import("@angular/core").InputSignal<string | undefined>;
+  /** Minutes between the times of the list, from midnight (1–720). */
+  readonly step: import("@angular/core").InputSignalWithTransform<number, unknown>;
+  /** Adds a seconds part; the value becomes 'HH:mm:ss'. */
+  readonly seconds: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  /** Forces a 12-hour (`h12`, with AM/PM) or 24-hour (`h23`) clock; unset follows the locale. */
+  readonly hourCycle: import("@angular/core").InputSignal<BfTimeInputHourCycle | undefined>;
+  /** `list` adds the button that opens the list of times; `none` keeps the field typed only. */
+  readonly picker: import("@angular/core").InputSignal<BfTimeInputPicker>;
+  /** Renders the platform's time picker (`input type="time"`) under a coarse pointer (touch). */
+  readonly native: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  /** BCP 47 locale of the part order, the separators, the clock and the AM/PM names; empty
+   * follows the document's `lang`, else English. */
+  readonly locale: import("@angular/core").InputSignal<string>;
+  /** 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 field. */
+  readonly label: import("@angular/core").InputSignal<string>;
+  /** Accessible name when no visible label is rendered. 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>;
+  /** Helper text under the field. */
+  readonly helpText: import("@angular/core").InputSignal<string>;
+  /** Explicit error text; takes precedence over the field's own errors and Signal Forms errors. */
+  readonly errorMessage: import("@angular/core").InputSignal<string>;
+  /** Disables the field and its list button. */
+  readonly disabled: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  /** Shows the time but blocks changes; the parts stay focusable and expose `aria-readonly`. */
+  readonly readonly: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  /** Marks the field 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[]>;
+  /** Native name attribute of the platform input (`native` under a coarse pointer). */
+  readonly name: import("@angular/core").InputSignal<string>;
+  /** Field id; generated when not set. */
+  readonly id: import("@angular/core").InputSignal<string>;
+  /** Emitted with the new time right after a user change: `null` once it is cleared or incomplete. */
+  readonly changed: import("@angular/core").OutputEmitterRef<string | null>;
+  /** Emitted when focus leaves the field (not into its list), so Signal Forms marks it touched. */
+  readonly touch: import("@angular/core").OutputEmitterRef<void>;
+  private readonly field;
+  /**
+   * Focuses the first empty part (else the first part); Signal Forms calls it from
+   * `focusBoundControl()`.
+   * @param options Passed on to the native `focus()`, such as `{ preventScroll: true }`.
+   */
+  focus(options?: FocusOptions): void;
+  /** Opens the list of times; does nothing without a picker, or while disabled or read-only. */
+  openPicker(): void;
+  /** Closes the list of times, focus back on its button; does nothing while it is closed. */
+  closePicker(): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<BfTimeInputComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<BfTimeInputComponent, "bf-time-input", never, {
+    "value": {
+      "alias": "value";
+      "required": false;
+      "isSignal": true;
+    };
+    "min": {
+      "alias": "min";
+      "required": false;
+      "isSignal": true;
+    };
+    "max": {
+      "alias": "max";
+      "required": false;
+      "isSignal": true;
+    };
+    "step": {
+      "alias": "step";
+      "required": false;
+      "isSignal": true;
+    };
+    "seconds": {
+      "alias": "seconds";
+      "required": false;
+      "isSignal": true;
+    };
+    "hourCycle": {
+      "alias": "hourCycle";
+      "required": false;
+      "isSignal": true;
+    };
+    "picker": {
+      "alias": "picker";
+      "required": false;
+      "isSignal": true;
+    };
+    "native": {
+      "alias": "native";
+      "required": false;
+      "isSignal": true;
+    };
+    "locale": {
+      "alias": "locale";
+      "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;
+    };
+    "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";
+    "touch": "touch";
+  }, never, never, true, never>;
+}
+/**
+ * How `bf-datetime-input` picks a date and time besides typing: `popover` adds a button that
+ * opens a calendar and a list of times side by side, `none` keeps the field typed only.
+ *
+ * @summary Whether a date and time input offers a calendar and time list popover
+ * @since 0.3.1
+ */
+type BfDateTimeInputPicker = 'popover' | 'none';
+/**
+ * Date and time field typed part by part, with a popover holding a calendar and a list of
+ * times, valued as a local ISO date and time without a zone.
+ *
+ * @example
+ * <bf-datetime-input label="Meeting" [step]="15" [(value)]="meeting" />
+ * <bf-datetime-input label="Publish at" [formField]="post.publishAt" />
+ * @summary Typed date and time field with a calendar and time list in one popover
+ * @category Forms
+ * @since 0.3.1
+ */
+export declare class BfDateTimeInputComponent implements FormValueControl<string | null> {
+  /** The local date and time as an ISO string without a zone ('YYYY-MM-DDTHH:mm'), `null` while
+   * empty or incomplete; two-way bindable and bound by `[formField]`. */
+  readonly value: import("@angular/core").ModelSignal<string | null>;
+  /** The earliest valid date and time ('YYYY-MM-DDTHH:mm'): earlier values show an error, and the
+   * calendar and the list stop there. */
+  readonly min: import("@angular/core").InputSignal<string | undefined>;
+  /** The latest valid date and time ('YYYY-MM-DDTHH:mm'): later values show an error, and the
+   * calendar and the list stop there. */
+  readonly max: import("@angular/core").InputSignal<string | undefined>;
+  /** Rules out more dates (weekends, booked days): disabled in the calendar, an error when typed. */
+  readonly disabledDate: import("@angular/core").InputSignal<BfCalendarDisabledDate | null>;
+  /** Minutes between the times of the list, from midnight (1–720). */
+  readonly step: import("@angular/core").InputSignalWithTransform<number, unknown>;
+  /** Forces a 12-hour (`h12`, with AM/PM) or 24-hour (`h23`) clock; unset follows the locale. */
+  readonly hourCycle: import("@angular/core").InputSignal<BfTimeInputHourCycle | undefined>;
+  /** `popover` adds the button that opens the calendar and the time list; `none` keeps the field
+   * typed only. */
+  readonly picker: import("@angular/core").InputSignal<BfDateTimeInputPicker>;
+  /** Renders the platform's picker (`input type="datetime-local"`) under a coarse pointer (touch). */
+  readonly native: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  /** BCP 47 locale of the part order, the separators, the clock and the calendar; empty follows
+   * the document's `lang`, else English. */
+  readonly locale: import("@angular/core").InputSignal<string>;
+  /** 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 field. */
+  readonly label: import("@angular/core").InputSignal<string>;
+  /** Accessible name when no visible label is rendered. 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>;
+  /** Helper text under the field. */
+  readonly helpText: import("@angular/core").InputSignal<string>;
+  /** Explicit error text; takes precedence over the field's own errors and Signal Forms errors. */
+  readonly errorMessage: import("@angular/core").InputSignal<string>;
+  /** Disables the field and its picker button. */
+  readonly disabled: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  /** Shows the value but blocks changes; the parts stay focusable and expose `aria-readonly`. */
+  readonly readonly: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  /** Marks the field 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[]>;
+  /** Native name attribute of the platform input (`native` under a coarse pointer). */
+  readonly name: import("@angular/core").InputSignal<string>;
+  /** Field id; generated when not set. */
+  readonly id: import("@angular/core").InputSignal<string>;
+  /** Emitted with the new value right after a user change: `null` once it is cleared or
+   * incomplete. */
+  readonly changed: import("@angular/core").OutputEmitterRef<string | null>;
+  /** Emitted when focus leaves the field (not into its popover), so Signal Forms marks it touched. */
+  readonly touch: import("@angular/core").OutputEmitterRef<void>;
+  private readonly field;
+  /**
+   * Focuses the first empty part (else the first part); Signal Forms calls it from
+   * `focusBoundControl()`.
+   * @param options Passed on to the native `focus()`, such as `{ preventScroll: true }`.
+   */
+  focus(options?: FocusOptions): void;
+  /** Opens the calendar and time popover; does nothing without a picker, or while disabled or
+   * read-only. */
+  openPicker(): void;
+  /** Closes the popover, focus back on its button; does nothing while it is closed. */
+  closePicker(): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<BfDateTimeInputComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<BfDateTimeInputComponent, "bf-datetime-input", never, {
+    "value": {
+      "alias": "value";
+      "required": false;
+      "isSignal": true;
+    };
+    "min": {
+      "alias": "min";
+      "required": false;
+      "isSignal": true;
+    };
+    "max": {
+      "alias": "max";
+      "required": false;
+      "isSignal": true;
+    };
+    "disabledDate": {
+      "alias": "disabledDate";
+      "required": false;
+      "isSignal": true;
+    };
+    "step": {
+      "alias": "step";
+      "required": false;
+      "isSignal": true;
+    };
+    "hourCycle": {
+      "alias": "hourCycle";
+      "required": false;
+      "isSignal": true;
+    };
+    "picker": {
+      "alias": "picker";
+      "required": false;
+      "isSignal": true;
+    };
+    "native": {
+      "alias": "native";
+      "required": false;
+      "isSignal": true;
+    };
+    "locale": {
+      "alias": "locale";
+      "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;
+    };
+    "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";
+    "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 };