@bitforgehq/ui 0.3.0 → 0.3.1

package/types/bitforgehq-ui.d.ts

@@ -1,5 +1,5 @@
 import * as i0 from "@angular/core";
-import { ElementRef, EnvironmentProviders, InjectionToken, Provider, Signal } from "@angular/core";
+import { ElementRef, EnvironmentProviders, InjectionToken, Provider, Signal, TemplateRef } from "@angular/core";
 import { FormCheckboxControl, FormValueControl, ValidationError } from "@angular/forms/signals";
 /**
  * The one control-height scale: sm 32 px, md 40 px, lg 48 px.
@@ -201,7 +201,7 @@ interface BfLabels {
    */
   readonly refreshing: string;
   /**
-   * bf-dialog's close button, and bf-sheet's screen-reader Close.
+   * bf-dialog's and bf-side-panel's close button, and bf-sheet's screen-reader Close.
    * @default 'Close'
    */
   readonly close: string;
@@ -222,7 +222,7 @@ interface BfLabels {
    */
   readonly sheetPosition: (position: number, count: number) => string;
   /**
-   * A dialog's name without an ariaLabel, a bf-dialog title or a heading.
+   * A dialog's or side panel's name without an ariaLabel, a title or a heading.
    * @default 'Dialog'
    */
   readonly dialog: string;
@@ -231,6 +231,252 @@ interface BfLabels {
    * @default 'Notifications'
    */
   readonly notifications: string;
+  /**
+   * bf-table's header checkbox, which selects or clears every row.
+   * @default 'Select all rows'
+   */
+  readonly tableSelectAll: string;
+  /**
+   * bf-theme-switch's and bf-theme-menu-button's name without a label.
+   * @default 'Theme'
+   */
+  readonly theme: string;
+  /**
+   * The theme choice that follows the system's colour scheme.
+   * @default 'System'
+   */
+  readonly themeSystem: string;
+  /**
+   * The theme choice that forces the light colour scheme.
+   * @default 'Light'
+   */
+  readonly themeLight: string;
+  /**
+   * The theme choice that forces the dark colour scheme.
+   * @default 'Dark'
+   */
+  readonly themeDark: string;
+  /**
+   * bf-breadcrumb's navigation name.
+   * @default 'Breadcrumb'
+   */
+  readonly breadcrumb: string;
+  /**
+   * bf-breadcrumb's ellipsis button, which shows the levels a `maxItems` trail hides.
+   * @default (count) => (count === 1 ? 'Show 1 more level' : `Show ${count} more levels`)
+   */
+  readonly breadcrumbExpand: (count: number) => string;
+  /**
+   * bf-sidebar's and bf-top-nav's navigation name.
+   * @default 'Main'
+   */
+  readonly navigation: string;
+  /**
+   * a[bfNavItem]'s announcement of its count badge.
+   * @default (count) => `${count} new`
+   */
+  readonly navBadge: (count: number) => string;
+  /**
+   * bf-pagination's navigation name.
+   * @default 'Pagination'
+   */
+  readonly pagination: string;
+  /**
+   * bf-pagination's button to the previous page.
+   * @default 'Previous page'
+   */
+  readonly previousPage: string;
+  /**
+   * bf-pagination's button to the next page.
+   * @default 'Next page'
+   */
+  readonly nextPage: string;
+  /**
+   * bf-pagination's compact position text, such as "Page 3 of 12".
+   * @default (page, count) => `Page ${page} of ${count}`
+   */
+  readonly pageOf: (page: number, count: number) => string;
+  /**
+   * bf-pagination's name of one page button, such as "Page 3".
+   * @default (page) => `Page ${page}`
+   */
+  readonly goToPage: (page: number) => string;
+  /**
+   * bf-tab-group's tablist name.
+   * @default 'Tabs'
+   */
+  readonly tabGroup: string;
+  /**
+   * bf-calendar's button that shows the previous month.
+   * @default 'Previous month'
+   */
+  readonly calendarPreviousMonth: string;
+  /**
+   * bf-calendar's button that shows the next month.
+   * @default 'Next month'
+   */
+  readonly calendarNextMonth: string;
+  /**
+   * bf-calendar's title button in the day view, which opens the month view; read after the
+   * visible month and year.
+   * @default 'Choose month'
+   */
+  readonly calendarChooseMonth: string;
+  /**
+   * bf-calendar's title button in the month view, which opens the year view; read after the
+   * visible year.
+   * @default 'Choose year'
+   */
+  readonly calendarChooseYear: string;
+  /**
+   * bf-stat's hidden direction word before an upward delta, so colour is never the only signal.
+   * @default 'Up'
+   */
+  readonly statTrendUp: string;
+  /**
+   * bf-stat's hidden direction word before a downward delta.
+   * @default 'Down'
+   */
+  readonly statTrendDown: string;
+  /**
+   * bf-stat's hidden direction word before an unchanged (flat) delta.
+   * @default 'No change'
+   */
+  readonly statTrendFlat: string;
+  /**
+   * bf-combobox's and bf-multi-combobox's list row when no option matches the typed text.
+   * @default 'No results'
+   */
+  readonly comboboxEmpty: string;
+  /**
+   * bf-multi-combobox's remove button on a picked value's tag.
+   * @default (label) => `Remove ${label}`
+   */
+  readonly comboboxRemove: (label: string) => string;
+  /**
+   * The day part of bf-date-input and bf-datetime-input; its first letter is the part's
+   * placeholder ("dd").
+   * @default 'Day'
+   */
+  readonly dateInputDay: string;
+  /**
+   * The month part of bf-date-input and bf-datetime-input; its first letter is the part's
+   * placeholder ("mm").
+   * @default 'Month'
+   */
+  readonly dateInputMonth: string;
+  /**
+   * The year part of bf-date-input and bf-datetime-input; its first letter is the part's
+   * placeholder ("yyyy").
+   * @default 'Year'
+   */
+  readonly dateInputYear: string;
+  /**
+   * The button of bf-date-input and bf-datetime-input that opens the calendar, and the panel's name.
+   * @default 'Choose date'
+   */
+  readonly dateInputOpenCalendar: string;
+  /**
+   * The error of bf-date-input and bf-datetime-input while the date is incomplete or does not
+   * exist (31 February).
+   * @default 'Enter a valid date'
+   */
+  readonly dateInputInvalid: string;
+  /**
+   * The error of bf-date-input and bf-datetime-input for a typed date that `disabledDate` rules out.
+   * @default 'This date is not available'
+   */
+  readonly dateInputUnavailable: string;
+  /**
+   * The hour part of bf-time-input and bf-datetime-input; its first letter is the part's
+   * placeholder ("hh").
+   * @default 'Hour'
+   */
+  readonly timeInputHour: string;
+  /**
+   * The minute part of bf-time-input and bf-datetime-input; its first letter is the part's
+   * placeholder ("mm").
+   * @default 'Minute'
+   */
+  readonly timeInputMinute: string;
+  /**
+   * The second part of bf-time-input with `seconds`; its first letter is the part's placeholder
+   * ("ss").
+   * @default 'Second'
+   */
+  readonly timeInputSecond: string;
+  /**
+   * The AM/PM part of bf-time-input and bf-datetime-input under a 12-hour clock.
+   * @default 'AM/PM'
+   */
+  readonly timeInputDayPeriod: string;
+  /**
+   * The button of bf-time-input that opens the list of times, and the list's name.
+   * @default 'Choose time'
+   */
+  readonly timeInputOpenList: string;
+  /**
+   * The error of bf-time-input and bf-datetime-input while the time is incomplete.
+   * @default 'Enter a valid time'
+   */
+  readonly timeInputInvalid: string;
+  /**
+   * The error of bf-time-input and bf-datetime-input below `min`, given the limit as the locale
+   * writes it.
+   * @default (time) => `Pick ${time} or later`
+   */
+  readonly timeInputMin: (time: string) => string;
+  /**
+   * The error of bf-time-input and bf-datetime-input above `max`, given the limit as the locale
+   * writes it.
+   * @default (time) => `Pick ${time} or earlier`
+   */
+  readonly timeInputMax: (time: string) => string;
+  /**
+   * The name of a chart from `@bitforgehq/ui/charts` that has no `label` (and no `bf-chart-card` title).
+   * @default 'Chart'
+   */
+  readonly chart: string;
+  /**
+   * The name of a chart's legend, the group of buttons that show and hide its series.
+   * @default 'Legend'
+   */
+  readonly chartLegend: string;
+  /**
+   * The name of a chart's plot, the focusable area whose arrow keys move between the values.
+   * @default 'Data points, arrow keys move between them'
+   */
+  readonly chartValues: string;
+  /**
+   * A chart's button that shows its data as a table.
+   * @default 'Show data'
+   */
+  readonly chartShowData: string;
+  /**
+   * A chart's button that hides its data table again.
+   * @default 'Hide data'
+   */
+  readonly chartHideData: string;
+  /**
+   * The first column header of a chart's data table.
+   * @default 'Category'
+   */
+  readonly chartCategory: string;
+  /**
+   * The value column header of a bf-donut-chart's data table.
+   * @default 'Value'
+   */
+  readonly chartValue: string;
+  /**
+   * bf-chart-card's text when it has no data and no `empty` slot.
+   * @default 'No data to show'
+   */
+  readonly chartEmpty: string;
+  /**
+   * bf-chart-card's text when its data failed to load and it has no `error` slot.
+   * @default 'The data could not be loaded'
+   */
+  readonly chartError: string;
   /** Default error text per validator kind (see `BfValidationMessages`). */
   readonly validation: BfValidationMessages;
 }
@@ -261,10 +507,18 @@ export declare const BF_LABELS: InjectionToken<BfLabels>;
  * Replaces built-in strings, merged over the parent's (validation merged key by key); a key left
  * out or set to `undefined` keeps the parent's string. In `ApplicationConfig.providers` it covers
  * every string. In a component's `providers` it covers that sub-tree's widgets and form controls
- * (`loading`, `dismiss`, `tabBar`, `tabBadge`, `back`, `refreshing`, `validation`); the overlay
- * services (`ok`, `cancel`, `actions`, `sheet`, `modal`, `close`, `expand`, `collapse`,
- * `sheetPosition`, `dialog`, `notifications`) are
- * root singletons and pick it up only when the caller passes its injector:
+ * (`loading`, `dismiss`, `tabBar`, `tabBadge`, `back`, `refreshing`, `tableSelectAll`, `theme`,
+ * `themeSystem`, `themeLight`, `themeDark`, `breadcrumb`, `breadcrumbExpand`, `navigation`,
+ * `navBadge`, `pagination`, `previousPage`, `nextPage`, `pageOf`, `goToPage`, `tabGroup`,
+ * `calendarPreviousMonth`, `calendarNextMonth`, `calendarChooseMonth`, `calendarChooseYear`,
+ * `statTrendUp`, `statTrendDown`, `statTrendFlat`, `comboboxEmpty`, `comboboxRemove`,
+ * `dateInputDay`, `dateInputMonth`, `dateInputYear`, `dateInputOpenCalendar`, `dateInputInvalid`,
+ * `dateInputUnavailable`, `timeInputHour`, `timeInputMinute`, `timeInputSecond`,
+ * `timeInputDayPeriod`, `timeInputOpenList`, `timeInputInvalid`, `timeInputMin`, `timeInputMax`,
+ * `chart`, `chartLegend`, `chartValues`, `chartShowData`, `chartHideData`, `chartCategory`,
+ * `chartValue`, `chartEmpty`, `chartError`, `validation`); the overlay services (`ok`, `cancel`,
+ * `actions`, `sheet`, `modal`, `close`, `expand`, `collapse`, `sheetPosition`, `dialog`,
+ * `notifications`) are root singletons and pick it up only when the caller passes its injector:
  * `open(…, { injector: inject(Injector) })`.
  *
  * @param overrides The strings to replace; any key left out keeps the parent's.
@@ -273,6 +527,87 @@ export declare const BF_LABELS: InjectionToken<BfLabels>;
  * @since 0.3.0
  */
 export declare function provideBfLabels(overrides: BfLabelsOverrides): Provider;
+/**
+ * The app's colour scheme choice: follow the system, or force light or dark.
+ *
+ * @summary The colour scheme choice, following the system or forcing light or dark
+ * @since 0.3.1
+ */
+type BfColorScheme = 'system' | 'light' | 'dark';
+/** The key-value store the choice is kept in: `getItem`/`setItem` of the Web Storage API. */
+type BfColorSchemeStorage = Pick<Storage, 'getItem' | 'setItem'>;
+/**
+ * A store in memory, gone with the app: where `localStorage` is unavailable, and in tests.
+ * Internal: `provideBfShellTesting()` (`@bitforgehq/ui/mobile`) uses it through
+ * `ɵcreateMemoryColorSchemeStorage`.
+ */
+declare function createMemoryColorSchemeStorage(): BfColorSchemeStorage;
+/**
+ * Where `BfColorSchemeService` keeps the colour scheme choice (the key `bf-theme`): `localStorage`
+ * when it is available, otherwise an in-memory map. Provide another store (a native preferences
+ * plugin, or an in-memory one in tests) to keep the choice elsewhere. `BF_THEME_STORAGE` from
+ * `@bitforgehq/ui/mobile` is this same token.
+ *
+ * @example
+ * providers: [{ provide: BF_COLOR_SCHEME_STORAGE, useValue: sessionStorage }]
+ * @summary Injection token for the store that keeps the colour scheme choice between visits
+ * @since 0.3.1
+ */
+export declare const BF_COLOR_SCHEME_STORAGE: InjectionToken<Pick<Storage, "getItem" | "setItem">>;
+/**
+ * The app's colour scheme: the user's choice (system, light, dark), kept in
+ * `BF_COLOR_SCHEME_STORAGE` under `bf-theme`, and whether the app is dark now. With
+ * `provideBfColorScheme()` (or `provideBfShell()` in a Capacitor app) it toggles the `dark` class
+ * on `<html>` and stores every change; `prefers-color-scheme` is the source under `system` and is
+ * followed live. Without either, the signals still compute but nothing is written, so a page that
+ * merely injects the service never fights the host page's own theme. Storage and the media query are read in the browser only, so a server render
+ * starts at `system`, light, and writes nothing. No Capacitor: a desktop web app uses it as is,
+ * and the shell's `BfPlatformService.theme` and `dark` are these same signals.
+ *
+ * @example
+ * private readonly colorScheme = inject(BfColorSchemeService);
+ * toggle(): void { this.colorScheme.scheme.set(this.colorScheme.dark() ? 'light' : 'dark'); }
+ * @summary The app colour scheme choice and dark state, applied to html and stored
+ * @since 0.3.1
+ */
+export declare class BfColorSchemeService {
+  private readonly document;
+  private readonly storage;
+  private readonly injector;
+  private readonly browser;
+  /** The user's choice, stored when `provideBfColorScheme()` is provided; set it with
+   * `scheme.set(…)`. */
+  readonly scheme: import("@angular/core").WritableSignal<BfColorScheme>;
+  private readonly prefersDark;
+  /** Whether the system prefers dark (`prefers-color-scheme: dark`), followed live. */
+  readonly systemDark: Signal<boolean>;
+  /** Whether the app is dark now: the choice, or the system's under `system`. */
+  readonly dark: Signal<boolean>;
+  private claimed;
+  constructor();
+  /**
+   * Makes this service own `<html>` and the store, once: called by `provideBfColorScheme()` and
+   * by the shell's `BfPlatformService`. Nothing is written on the server.
+   * @internal
+   */
+  claimDocument(): void;
+  private followSystem;
+  static ɵfac: i0.ɵɵFactoryDeclaration<BfColorSchemeService, never>;
+  static ɵprov: i0.ɵɵInjectableDeclaration<any>;
+}
+/**
+ * Lets `BfColorSchemeService` own the app's colour scheme: it toggles `dark` on `<html>`, follows
+ * `prefers-color-scheme` under `system` and stores the choice (key `bf-theme`). For a desktop web
+ * app; a Capacitor app gets it from `provideBfShell()`. Add it to `ApplicationConfig.providers`
+ * and switch with `inject(BfColorSchemeService).scheme.set('dark')`.
+ *
+ * @example
+ * export const appConfig: ApplicationConfig = { providers: [provideBfColorScheme()] };
+ * @returns The providers that make the service own `<html>` and start it with the app.
+ * @summary Applies the stored colour scheme choice to html, for desktop web apps
+ * @since 0.3.1
+ */
+export declare function provideBfColorScheme(): EnvironmentProviders;
 /**
  * The diameter of a `bf-spinner`: sm, md or lg.
  *
@@ -333,6 +668,15 @@ export declare class BfSpinnerComponent {
  * @since 0.1.0
  */
 type BfButtonVariant = 'primary' | 'tonal' | 'outline' | 'text' | 'danger';
+/**
+ * Every value the `variant` input of a `bf-button` takes: the five `BfButtonVariant` styles plus
+ * `ghost`, the quiet neutral one. A new type, so `Record`s and exhaustive switches over
+ * `BfButtonVariant` keep compiling.
+ *
+ * @summary Every button style, the five variants plus the quiet neutral ghost
+ * @since 0.3.1
+ */
+type BfButtonAppearance = BfButtonVariant | 'ghost';
 /**
  * The height step of a `bf-button`; the same scale as every sized widget.
  *
@@ -352,14 +696,15 @@ type BfButtonType = 'button' | 'submit' | 'reset';
  * the internal `ɵBF_BUTTON_CLASSES` export so the two never drift. */
 declare const BUTTON_CLASSES: {
   readonly base: string;
-  readonly variant: Record<BfButtonVariant, string>;
-  readonly pressed: Record<BfButtonVariant, string>;
+  readonly variant: Record<BfButtonAppearance, string>;
+  readonly pressed: Record<BfButtonAppearance, string>;
+  readonly current: Record<BfButtonAppearance, string>;
   readonly size: Record<BfSize, string>;
   readonly padding: Record<BfSize, string>;
   readonly textPadding: Record<BfSize, string>;
 };
 /**
- * Pill-shaped action button with five variants, three sizes, a loading state and icon slots. Put
+ * Pill-shaped action button with six variants, three sizes, a loading state and icon slots. Put
  * the label in the default slot and icons in the `icon-start` / `icon-end` slots; never place a
  * `bf-button` inside another interactive element. For navigation, put `bfButton` on your own `<a>`
  * (with `href` or `routerLink`): it renders as a real link that looks like the button.
@@ -371,6 +716,7 @@ declare const BUTTON_CLASSES: {
  *   New task
  * </bf-button>
  * <a bfButton variant="outline" routerLink="/projects">All projects</a>
+ * <a bfButton variant="ghost" routerLink="/inbox" routerLinkActive ariaCurrentWhenActive="page">Inbox</a>
  * @summary Pill-shaped action button with five variants, three sizes and a loading state
  * @category Actions
  * @since 0.1.0
@@ -379,8 +725,9 @@ declare const BUTTON_CLASSES: {
  * @slot icon-end An icon after the label.
  */
 export declare class BfButtonComponent {
-  /** Visual style: primary (filled), tonal (soft tint), outline, text, danger. */
-  readonly variant: import("@angular/core").InputSignal<BfButtonVariant>;
+  /** Visual style: primary (filled), tonal (soft tint), outline, text, danger, or ghost (quiet
+   * neutral). On `a[bfButton]`, `ghost`, `text` and `outline` also show `aria-current="page"`. */
+  readonly variant: import("@angular/core").InputSignal<BfButtonAppearance>;
   /** Height step: sm 32, md 40, lg 48 px; unset follows `provideBfDefaults()` (`controlSize`,
    * `md` by default). */
   readonly size: import("@angular/core").InputSignal<BfSize | undefined>;
@@ -471,12 +818,17 @@ declare const ICON_BUTTON_CLASSES: {
 };
 /**
  * Round button that holds a single icon, for toolbars, headers and list rows. The `label` is
- * required because the icon alone gives assistive tech no name.
+ * required because the icon alone gives assistive tech no name. For navigation, put
+ * `bfIconButton` on your own `<a>` (with `href` or `routerLink`): it renders as a real link that
+ * looks like the icon button.
  *
  * @example
  * <bf-icon-button label="Search" (clicked)="openSearch()">
  *   <bf-icon [icon]="Search" />
  * </bf-icon-button>
+ * <a bfIconButton label="Edit project" routerLink="/projects/atlas/edit">
+ *   <bf-icon [icon]="Pencil" />
+ * </a>
  * @summary Round icon-only button for toolbars and rows, with a required accessible label
  * @category Actions
  * @since 0.1.0
@@ -488,25 +840,39 @@ export declare class BfIconButtonComponent {
   /** 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>;
-  /** Native button type. */
+  /** Native button type. Ignored on `a[bfIconButton]`. */
   readonly type: import("@angular/core").InputSignal<BfButtonType>;
-  /** Disables the control and swallows clicks. */
+  /** Disables the control and swallows clicks. Ignored on `a[bfIconButton]`: a link is never
+   * disabled; render a disabled `bf-icon-button` instead. */
   readonly disabled: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
-  /** Accessible name announced instead of the icon. */
+  /** Accessible name announced instead of the icon; on `a[bfIconButton]`, the link's
+   * `aria-label`. */
   readonly label: import("@angular/core").InputSignal<string>;
-  /** Emitted on click while enabled. */
+  /** Emitted on click while enabled; on `a[bfIconButton]`, on every click (the link still
+   * navigates). */
   readonly clicked: import("@angular/core").OutputEmitterRef<Event>;
   private readonly defaults;
+  /** Whether the host is the consumer's `<a>` (`a[bfIconButton]`) rather than a
+   * `bf-icon-button` element. */
+  protected readonly isLink: boolean;
   /** The size in effect: `size`, else the app's `controlSize` default. */
   protected readonly resolvedSize: import("@angular/core").Signal<BfSize>;
   readonly classes: import("@angular/core").Signal<string>;
+  /** The host's classes: the whole icon button on a link (with `no-underline!`, so an unlayered
+   * global link rule cannot underline it), else the wrapper's display. */
+  readonly hostClasses: import("@angular/core").Signal<string>;
+  /**
+   * A click on `a[bfIconButton]` emits `clicked`; the browser (or `routerLink`) still follows it.
+   * @internal
+   */
+  onHostClick(event: Event): void;
   /**
    * The inner button's click: emits `clicked` unless disabled.
    * @internal
    */
   onClick(event: Event): void;
   static ɵfac: i0.ɵɵFactoryDeclaration<BfIconButtonComponent, never>;
-  static ɵcmp: i0.ɵɵComponentDeclaration<BfIconButtonComponent, "bf-icon-button", never, {
+  static ɵcmp: i0.ɵɵComponentDeclaration<BfIconButtonComponent, "bf-icon-button, a[bfIconButton]", never, {
     "variant": {
       "alias": "variant";
       "required": false;
@@ -543,6 +909,15 @@ export declare class BfIconButtonComponent {
  * @since 0.1.0
  */
 type BfBadgeVariant = 'neutral' | 'primary' | 'success' | 'warning' | 'danger';
+/**
+ * Every tone the `variant` input of a `bf-badge` takes: the five `BfBadgeVariant` tones plus
+ * `info`, for an informational label such as a category. A new type, so `Record`s and exhaustive
+ * switches over `BfBadgeVariant` keep compiling.
+ *
+ * @summary Every badge tone, the five variants plus the informational info tone
+ * @since 0.3.1
+ */
+type BfBadgeAppearance = BfBadgeVariant | 'info';
 /**
  * Status label ("On track", "At risk") or, with `count`, a compact numeric pill for unread counts.
  *
@@ -555,8 +930,9 @@ type BfBadgeVariant = 'neutral' | 'primary' | 'success' | 'warning' | 'danger';
  * @slot default The badge text, shown when no `count` is set.
  */
 export declare class BfBadgeComponent {
-  /** Tint for the label style. Ignored when `count` is set. */
-  readonly variant: import("@angular/core").InputSignal<BfBadgeVariant>;
+  /** Tint for the label style: neutral, primary, success, warning, danger or info. Ignored when
+   * `count` is set. */
+  readonly variant: import("@angular/core").InputSignal<BfBadgeAppearance>;
   /** Switches to the count pill; values above 99 render as "99+". */
   readonly count: import("@angular/core").InputSignal<number | undefined>;
   /** What the count counts ("unread messages"), read by assistive tech after the number ("99+
@@ -2592,6 +2968,68 @@ export declare class BfSegmentedComponent<T = string> implements FormValueContro
     "touch": "touch";
   }, never, never, true, never>;
 }
+/**
+ * The colour scheme switch: System, Light and Dark as a three-option segmented control. It holds
+ * a `BfColorScheme` and injects no service, so the app binds its own state, usually
+ * `BfColorSchemeService.scheme` (`provideBfColorScheme()` on desktop, `provideBfShell()` in a
+ * Capacitor app, where `BfPlatformService.theme` is the same signal).
+ *
+ * @example
+ * <bf-theme-switch [(value)]="colorScheme.scheme" />
+ * @summary Segmented System, Light and Dark switch bound two-way to the app colour scheme
+ * @category Forms
+ * @since 0.3.1
+ */
+export declare class BfThemeSwitchComponent implements FormValueControl<BfColorScheme> {
+  private readonly labels;
+  /** The colour scheme choice; bind it two-way, usually to `BfColorSchemeService.scheme`, or
+   * with `[formField]`. */
+  readonly value: import("@angular/core").ModelSignal<BfColorScheme>;
+  /** Accessible name of the switch (not shown); empty falls back to the `theme` label. */
+  readonly label: import("@angular/core").InputSignal<string>;
+  /** Height step: sm 32, md 40, lg 48 px; unset follows `provideBfDefaults()` (`controlSize`,
+   * `md` by default). */
+  readonly size: import("@angular/core").InputSignal<BfSize | undefined>;
+  /** Stretch the switch and share the width between the three segments. */
+  readonly fullWidth: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  /** Emitted with the new choice right after the user picks another segment. */
+  readonly changed: import("@angular/core").OutputEmitterRef<BfColorScheme>;
+  /** The three segments, labelled by `themeSystem`, `themeLight` and `themeDark`. */
+  protected readonly options: readonly BfSegmentOption<BfColorScheme>[];
+  /** The group's accessible name: `label`, else the `theme` label. */
+  protected readonly resolvedLabel: import("@angular/core").Signal<string>;
+  /**
+   * Takes the segment the user picked.
+   * @internal
+   */
+  select(next: BfColorScheme): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<BfThemeSwitchComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<BfThemeSwitchComponent, "bf-theme-switch", never, {
+    "value": {
+      "alias": "value";
+      "required": false;
+      "isSignal": true;
+    };
+    "label": {
+      "alias": "label";
+      "required": false;
+      "isSignal": true;
+    };
+    "size": {
+      "alias": "size";
+      "required": false;
+      "isSignal": true;
+    };
+    "fullWidth": {
+      "alias": "fullWidth";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "value": "valueChange";
+    "changed": "changed";
+  }, never, never, true, never>;
+}
 /**
  * Container for `bf-list-item` rows. The inset style (default) wraps the rows in the warm
  * background with rounded corners, as in the design's grouped lists.
@@ -2600,6 +3038,11 @@ export declare class BfSegmentedComponent<T = string> implements FormValueContro
  * <bf-list>
  *   <bf-list-item title="Notifications" subtitle="Every Monday at 8:00" />
  * </bf-list>
+ * <bf-card>
+ *   <bf-list [inset]="false" divided class="-mx-card">
+ *     <bf-list-item title="Atlas rebrand" subtitle="Due Friday" />
+ *   </bf-list>
+ * </bf-card>
  * @summary Container for list rows, inset by default with rounded corners on a warm background
  * @category Data display
  * @since 0.1.0
@@ -2608,7 +3051,10 @@ export declare class BfSegmentedComponent<T = string> implements FormValueContro
 export declare class BfListComponent {
   /** Grouped look with the warm container; false renders rows on the page background. */
   readonly inset: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
-  readonly classes: import("@angular/core").Signal<"flex flex-col gap-1 rounded-card bg-bg p-1.5" | "flex flex-col gap-2 bg-transparent p-0">;
+  /** Separates the rows with a `border` line instead of a gap, with square rows whose hover
+   * reaches the list's edges. Off by default. */
+  readonly divided: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  readonly classes: import("@angular/core").Signal<string>;
   static ɵfac: i0.ɵɵFactoryDeclaration<BfListComponent, never>;
   static ɵcmp: i0.ɵɵComponentDeclaration<BfListComponent, "bf-list", never, {
     "inset": {
@@ -2616,6 +3062,11 @@ export declare class BfListComponent {
       "required": false;
       "isSignal": true;
     };
+    "divided": {
+      "alias": "divided";
+      "required": false;
+      "isSignal": true;
+    };
   }, {}, never, ["*"], true, never>;
 }
 /**
@@ -2745,7 +3196,7 @@ type BfCardPadding = 'md' | 'lg';
  * @since 0.1.0
  * @slot header Content above the body, such as a title row.
  * @slot default The card body.
- * @slot footer Content below the body, such as its actions.
+ * @slot footer Content below the body, such as its actions; it sits on the card's bottom edge.
  */
 export declare class BfCardComponent implements BfActionHost {
   /** Surface treatment: raised (default), tint, ink, flat. */
@@ -3454,32 +3905,1673 @@ export declare class BfActionDirective {
   static ɵfac: i0.ɵɵFactoryDeclaration<BfActionDirective, never>;
   static ɵdir: i0.ɵɵDirectiveDeclaration<BfActionDirective, "a[bfAction], button[bfAction]", never, {}, {}, never, never, true, never>;
 }
-/** An error as a field reads it: its kind and optional message; limit fields (`minLength`,
- * `context.requiredLength`, …) are read through type guards by `bfValidationMessage`. */
-type FieldErrorLike = Pick<ValidationError, 'kind' | 'message'>;
-/**
- * Explicit error message wins; otherwise, once the field was touched, the first form error's text:
- * its own `message`, else the default for its kind from `messages` (`BF_LABELS.validation`).
- */
-declare function fieldErrorText(errorMessage: string, touched: boolean, errors: readonly FieldErrorLike[], messages: BfValidationMessages): string;
-/** The visual error state: any error text, or a field the form marked invalid after it was touched. */
-declare function fieldShowsError(errorText: string, invalid: boolean, touched: boolean): boolean;
+/** What a `bf-tab-panel` reads from its `bf-tab-group`; a token so the two files never import each
+ * other. Internal: not exported from the package. */
+interface BfTabGroupHost {
+  /** The value of the panel the group shows: `selected`, else the first enabled panel's. */
+  readonly current: Signal<string>;
+}
+/** The enclosing `bf-tab-group`, as its panels inject it. */
+declare const BF_TAB_GROUP: InjectionToken<BfTabGroupHost>;
 /**
- * `aria-describedby` targets: the help paragraph and the error paragraph under it, each while it
- * is rendered (`"<id>-help <id>-error"`, `"<id>-help"`, `"<id>-error"`), else none.
+ * One tab of a `bf-tab-group` and the content it shows: `label` is the tab's text, `value` the
+ * key the group's `selected` holds. Put the content in an `ng-template` inside the panel and it is
+ * created only while the panel is selected (`keepAlive` keeps it once visited); plain content
+ * renders at once and is only hidden. An icon in `bfSlot="icon"` shows in the tab before the label.
+ *
+ * @example
+ * <bf-tab-panel value="activity" label="Activity" [badge]="3">
+ *   <bf-icon bfSlot="icon" [icon]="Activity" />
+ *   <ng-template><app-activity-feed /></ng-template>
+ * </bf-tab-panel>
+ * @summary One tab of a tab group with its label, badge, icon and lazy content
+ * @category Navigation
+ * @since 0.3.1
+ * @slot icon An icon in the tab before the label, a `bf-icon`.
+ * @slot default Content rendered at once and hidden while another tab is selected; put it in an
+ * `ng-template` instead to create it only when the panel is shown.
  */
-declare function fieldDescribedBy(id: string, errorText: string, helpText: string): string | null;
-/** `aria-errormessage` target: the error paragraph while the control is invalid, else none. */
-declare function fieldErrorMessageId(id: string, errorText: string, showError: boolean): string | null;
+export declare class BfTabPanelComponent {
+  /** The key of this panel; the group's `selected` holds it while the panel is shown. */
+  readonly value: import("@angular/core").InputSignal<string>;
+  /** The tab's visible text, also its accessible name. */
+  readonly label: import("@angular/core").InputSignal<string>;
+  /** Disables the tab: it cannot be clicked and the arrow keys skip it. */
+  readonly disabled: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  /** A count shown as a pill after the tab's label, announced with `provideBfLabels()`'s
+   * `tabBadge(count)` ("3 new"); `null` shows none. */
+  readonly badge: import("@angular/core").InputSignal<number | null>;
+  /** Keeps the content of an `ng-template` in the DOM, hidden, once the panel has been shown, so
+   * its state (scroll, form input) survives switching tabs. */
+  readonly keepAlive: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  private readonly group;
+  /** The panel's DOM id, which its tab's `aria-controls` names. */
+  readonly panelId: string;
+  /** The DOM id of this panel's tab, which the panel's `aria-labelledby` names. */
+  readonly tabId: string;
+  /** The icon slot as a template, for the group to render inside the tab. */
+  readonly icon: import("@angular/core").Signal<TemplateRef<unknown> | undefined>;
+  /** The consumer's lazy content, if any. */
+  protected readonly content: import("@angular/core").Signal<TemplateRef<any> | undefined>;
+  /** Whether the group shows this panel. */
+  readonly isSelected: import("@angular/core").Signal<boolean>;
+  /** Latches once the panel has been shown. */
+  private readonly visited;
+  /** Whether the `ng-template` content exists: while selected, or once visited with `keepAlive`.
+   * `visited` is read first on every run, so the latch sees each selection. */
+  protected readonly rendered: import("@angular/core").Signal<boolean>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<BfTabPanelComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<BfTabPanelComponent, "bf-tab-panel", never, {
+    "value": {
+      "alias": "value";
+      "required": true;
+      "isSignal": true;
+    };
+    "label": {
+      "alias": "label";
+      "required": true;
+      "isSignal": true;
+    };
+    "disabled": {
+      "alias": "disabled";
+      "required": false;
+      "isSignal": true;
+    };
+    "badge": {
+      "alias": "badge";
+      "required": false;
+      "isSignal": true;
+    };
+    "keepAlive": {
+      "alias": "keepAlive";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, ["content"], ["[bfSlot=icon]", "*"], true, never>;
+}
 /**
- * Returns a document-unique id such as `bf-input-3`, for associating labels and hints with controls.
+ * In-page tabs: a row of tabs over the content they switch, one `bf-tab-panel` per tab. The
+ * `selected` model holds the shown panel's `value`; unset or unknown, the first enabled panel
+ * shows. Selection follows focus: the arrow keys (mirrored under `dir="rtl"`), Home and End move
+ * to a tab and show its panel. When the tabs do not fit, the row scrolls sideways.
  *
- * The ids come from this module-level counter, so a server render and the client (or two server
- * renders in one process) number them differently: `@bitforgehq/ui` 0.x is client-rendered only,
- * and SSR, hydration and prerendering of pages that render its components are not supported.
- * Hydration-stable ids are decided before 1.0.
+ * @example
+ * <bf-tab-group label="Project" [(selected)]="tab">
+ *   <bf-tab-panel value="overview" label="Overview">…</bf-tab-panel>
+ *   <bf-tab-panel value="activity" label="Activity" [badge]="3">…</bf-tab-panel>
+ * </bf-tab-group>
+ * @summary In-page tabs that switch between content panels, with keyboard navigation and badges
+ * @category Navigation
+ * @since 0.3.1
+ * @slot default The panels, each a `bf-tab-panel`.
  */
-declare function uniqueId(prefix: string): string;
+export declare class BfTabGroupComponent implements BfTabGroupHost {
+  /** The shown panel's `value`; two-way bindable. Unset or unknown shows the first enabled panel
+   * (the model keeps its value until the user picks a tab). */
+  readonly selected: import("@angular/core").ModelSignal<string>;
+  /** Accessible name of the tablist; empty falls back to `provideBfLabels()`'s `tabGroup`
+   * ("Tabs"). */
+  readonly label: import("@angular/core").InputSignal<string>;
+  /** Height step of the tabs: sm 32, md 40, lg 48 px (at least 44 px under a coarse pointer);
+   * unset follows `provideBfDefaults()` (`controlSize`, `md` by default). */
+  readonly size: import("@angular/core").InputSignal<BfSize | undefined>;
+  /** Stretches the tabs to share the group's width. */
+  readonly fitted: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  /** Emitted with the newly selected panel's `value` after a user change. */
+  readonly changed: import("@angular/core").OutputEmitterRef<string>;
+  /** The `bf-tab-panel` children, in document order. */
+  readonly panels: import("@angular/core").Signal<readonly BfTabPanelComponent[]>;
+  private readonly tabs;
+  private readonly labels;
+  private readonly defaults;
+  /** The size in effect: `size`, else the app's `controlSize` default. */
+  private readonly resolvedSize;
+  /** The tablist's accessible name: `label`, else the `tabGroup` label. */
+  readonly name: import("@angular/core").Signal<string>;
+  /** The panel shown: the one whose `value` is `selected`, else the first enabled panel (else the
+   * first panel). */
+  private readonly currentPanel;
+  /** The value of the panel shown; what each panel compares its own `value` with. */
+  readonly current: import("@angular/core").Signal<string>;
+  /** The panel whose tab owns the roving tab stop: the shown one, else (it is disabled) the first
+   * enabled one. */
+  protected readonly tabStop: import("@angular/core").Signal<BfTabPanelComponent | undefined>;
+  protected readonly scrollerClasses = "-m-1 overflow-x-auto p-1";
+  protected readonly listClasses = "flex w-max min-w-full border-b border-border";
+  protected readonly badgeClasses = "flex h-5 min-w-5 shrink-0 items-center justify-center rounded-control bg-primary px-1.5 text-micro font-bold text-on-primary";
+  /**
+   * The classes of a panel's tab.
+   * @internal
+   */
+  tabClasses(panel: BfTabPanelComponent): string;
+  /**
+   * The badge as screen readers hear it after the label.
+   * @internal
+   */
+  badgeAnnouncement(count: number): string;
+  /**
+   * Shows `panel` and emits `changed`, unless it is disabled or already shown.
+   * @internal
+   */
+  select(panel: BfTabPanelComponent): void;
+  /**
+   * Arrow keys (mirrored under `dir="rtl"`), Home and End move focus and selection.
+   * @internal
+   */
+  onKeydown(event: KeyboardEvent): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<BfTabGroupComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<BfTabGroupComponent, "bf-tab-group", never, {
+    "selected": {
+      "alias": "selected";
+      "required": false;
+      "isSignal": true;
+    };
+    "label": {
+      "alias": "label";
+      "required": false;
+      "isSignal": true;
+    };
+    "size": {
+      "alias": "size";
+      "required": false;
+      "isSignal": true;
+    };
+    "fitted": {
+      "alias": "fitted";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "selected": "selectedChange";
+    "changed": "changed";
+  }, ["panels"], ["*"], true, never>;
+}
+/**
+ * The heading level of a `bf-page-header` title: `1` for the page, `2` for a section header.
+ *
+ * @summary The heading level of a page header title, one for a page or two
+ * @since 0.3.1
+ */
+type BfPageHeaderHeadingLevel = 1 | 2;
+/**
+ * The top of a desktop page: a breadcrumb above, then the page title with its subtitle and
+ * badges, and the page's actions at the inline end, wrapping under the title in a narrow window.
+ *
+ * @example
+ * <bf-page-header title="Atlas rebrand" subtitle="12 of 18 tasks done">
+ *   <bf-badge bfSlot="meta" variant="success">On track</bf-badge>
+ *   <bf-button bfSlot="actions" (clicked)="create()">New task</bf-button>
+ * </bf-page-header>
+ * @summary Desktop page header with breadcrumb, title, subtitle, badges and a row of actions
+ * @category Navigation
+ * @since 0.3.1
+ * @slot breadcrumb The trail above the title, such as `bf-breadcrumb`.
+ * @slot title Rich title content inside the heading, when the `title` input is empty.
+ * @slot meta Badges beside the title, wrapping under it when they do not fit.
+ * @slot actions The page's buttons and menu buttons at the inline end.
+ */
+export declare class BfPageHeaderComponent {
+  /** The page title, rendered as the heading; empty to use the `title` slot instead. */
+  readonly title: import("@angular/core").InputSignal<string>;
+  /** One line under the title, such as a status or a count. */
+  readonly subtitle: import("@angular/core").InputSignal<string>;
+  /** Heading level of the title so the header fits the page outline. */
+  readonly headingLevel: import("@angular/core").InputSignal<BfPageHeaderHeadingLevel>;
+  protected readonly headingClasses = "text-title text-text min-w-0 wrap-break-word";
+  static ɵfac: i0.ɵɵFactoryDeclaration<BfPageHeaderComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<BfPageHeaderComponent, "bf-page-header", never, {
+    "title": {
+      "alias": "title";
+      "required": false;
+      "isSignal": true;
+    };
+    "subtitle": {
+      "alias": "subtitle";
+      "required": false;
+      "isSignal": true;
+    };
+    "headingLevel": {
+      "alias": "headingLevel";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, ["[bfSlot=breadcrumb]", "[bfSlot=meta]", "[bfSlot=actions]", "[bfSlot=title]"], true, never>;
+}
+/**
+ * Row of search, filters, a view switch and trailing actions above a list or table. Every
+ * control projected into it is `sm` unless it sets `size` itself.
+ *
+ * @example
+ * <bf-toolbar label="Project filters" [status]="results().length + ' results'">
+ *   <bf-input type="search" ariaLabel="Search projects" [(value)]="query" />
+ *   <bf-select ariaLabel="Status" [options]="statuses" [(value)]="status" />
+ *   <bf-segmented bfSlot="view" label="View" [options]="views" [(value)]="view" />
+ *   <bf-button bfSlot="actions" (clicked)="create()">New project</bf-button>
+ * </bf-toolbar>
+ * @summary Dense row of search, filters, view switch, result count and actions
+ * @category Actions
+ * @since 0.3.1
+ * @slot default The search field and the filters (bf-input, bf-select, bf-chip-group), in order.
+ * @slot view A view switch after the filters, such as a bf-segmented of list and grid.
+ * @slot actions The trailing actions, kept together at the inline end of the row.
+ */
+export declare class BfToolbarComponent {
+  /** The group's accessible name, such as "Project filters"; unnamed when empty. */
+  readonly label: import("@angular/core").InputSignal<string>;
+  /** The result count or a short state, such as "24 results", announced politely on change. */
+  readonly status: import("@angular/core").InputSignal<string>;
+  readonly statusClasses: import("@angular/core").Signal<string>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<BfToolbarComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<BfToolbarComponent, "bf-toolbar", never, {
+    "label": {
+      "alias": "label";
+      "required": false;
+      "isSignal": true;
+    };
+    "status": {
+      "alias": "status";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, ["*", "[bfSlot=view]", "[bfSlot=actions]"], true, never>;
+}
+/**
+ * What a `bf-table` cell template receives: the row (`let-row`) and its position in `rows`.
+ *
+ * @summary The row and its index that a custom table cell template receives
+ * @since 0.3.1
+ */
+interface BfTableCellContext<T> {
+  /** The row the cell belongs to (`let-row`). */
+  $implicit: T;
+  /** The row's position in the table's `rows` (`let-index="index"`). */
+  index: number;
+}
+/**
+ * Replaces the default text of one `bf-table` column with a template, such as a badge, an avatar
+ * or a link. `bfTableCell` names the column's `key`; bind `bfTableCellOf` to the table's rows so
+ * `let-row` is typed as one of them (it is `unknown` otherwise).
+ *
+ * @example
+ * <bf-table [rows]="tasks()" [columns]="columns">
+ *   <ng-template bfTableCell="status" [bfTableCellOf]="tasks()" let-task>
+ *     <bf-badge [variant]="task.done ? 'success' : 'neutral'">{{ task.status }}</bf-badge>
+ *   </ng-template>
+ * </bf-table>
+ * @summary Custom template for the cells of one table column, with the row typed
+ * @since 0.3.1
+ */
+export declare class BfTableCellDirective<T = unknown> {
+  /** The `key` of the column whose cells this template renders. */
+  readonly bfTableCell: import("@angular/core").InputSignal<string>;
+  /** The table's rows; only types `let-row`, the table never reads it. */
+  readonly bfTableCellOf: import("@angular/core").InputSignal<readonly T[]>;
+  /**
+   * The cell template the table renders for each row.
+   * @internal
+   */
+  readonly template: TemplateRef<BfTableCellContext<T>>;
+  /**
+   * Types the template's context for the template type checker.
+   * @internal
+   * @param _directive The directive instance (unused).
+   * @param _context The template's context.
+   * @returns Always true.
+   */
+  static ngTemplateContextGuard<T>(_directive: BfTableCellDirective<T>, _context: unknown): _context is BfTableCellContext<T>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<BfTableCellDirective<any>, never>;
+  static ɵdir: i0.ɵɵDirectiveDeclaration<BfTableCellDirective<any>, "ng-template[bfTableCell]", never, {
+    "bfTableCell": {
+      "alias": "bfTableCell";
+      "required": true;
+      "isSignal": true;
+    };
+    "bfTableCellOf": {
+      "alias": "bfTableCellOf";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, never>;
+}
+/**
+ * Where a `bf-table` column lines up its header and cells: `start` for text, `end` for numbers.
+ *
+ * @summary The inline alignment of a table column, start for text or end for numbers
+ * @since 0.3.1
+ */
+type BfTableAlign = 'start' | 'end';
+/**
+ * The direction of a sorted `bf-table` column, as `aria-sort` names it.
+ *
+ * @summary The direction a sorted table column is in, ascending or descending
+ * @since 0.3.1
+ */
+type BfTableSortDirection = 'ascending' | 'descending';
+/**
+ * One column of a `bf-table`: the row property it shows, its header and how it behaves.
+ *
+ * @summary One table column with its row key, header label, sorting and alignment
+ * @since 0.3.1
+ */
+interface BfTableColumn {
+  /** The row property the default cell shows; also the key a `bfTableCell` template names. */
+  key: string;
+  /** The header text. */
+  label: string;
+  /**
+   * Whether the header is a button that sets the table's `sort`.
+   * @default false
+   */
+  sortable?: boolean;
+  /**
+   * The inline alignment of the header and cells; `end` also sets tabular figures.
+   * @default 'start'
+   */
+  align?: BfTableAlign;
+}
+/**
+ * The column a `bf-table` is sorted by and the direction; the consumer sorts the rows.
+ *
+ * @summary The column key and direction a table is sorted by, set by its headers
+ * @since 0.3.1
+ */
+interface BfTableSort {
+  /** The `key` of the sorted column. */
+  column: string;
+  /** The sort direction. */
+  direction: BfTableSortDirection;
+}
+/**
+ * Returns the string that identifies a `bf-table` row in `selection` and in the `@for` track.
+ *
+ * @summary Function that returns the unique string key of one table row
+ * @since 0.3.1
+ */
+type BfTableRowKey<T> = (row: T) => string;
+interface BfTableEntry<T> {
+  row: T;
+  key: string;
+  index: number;
+}
+/**
+ * Data table for desktop: column headers that set a sort, optional row selection with
+ * checkboxes, custom cells from `bfTableCell` templates and an empty slot. It never sorts or
+ * filters itself; the consumer sorts the rows in a `computed()` from `sort`.
+ *
+ * @example
+ * <bf-table label="Tasks" [rows]="sorted()" [columns]="columns" [(sort)]="sort" selectable [(selection)]="selected">
+ *   <ng-template bfTableCell="title" [bfTableCellOf]="sorted()" let-task>{{ task.title }}</ng-template>
+ *   <bf-empty-state bfSlot="empty" title="No tasks" />
+ * </bf-table>
+ * @summary Desktop data table with sortable headers, row selection, custom cells and an empty slot
+ * @category Data display
+ * @since 0.3.1
+ * @slot empty Shown in one full-width row while `rows` is empty, such as a `bf-empty-state`.
+ */
+export declare class BfTableComponent<T = unknown> {
+  /** The rows to show, already sorted and filtered by the consumer. */
+  readonly rows: import("@angular/core").InputSignal<readonly T[]>;
+  /** The columns, in order. */
+  readonly columns: import("@angular/core").InputSignal<readonly BfTableColumn[]>;
+  /** The unique string key of a row, used for `selection` and to track rows; by default the
+   * row's `id` (a string or a number), else its index. */
+  readonly rowKey: import("@angular/core").InputSignal<BfTableRowKey<T>>;
+  /** The table's name, rendered as a visually hidden `caption`. */
+  readonly label: import("@angular/core").InputSignal<string>;
+  /** The sorted column and direction, `null` while unsorted; two-way bindable. A sortable header
+   * sets it, and the consumer sorts `rows` from it. */
+  readonly sort: import("@angular/core").ModelSignal<BfTableSort | null>;
+  /** Adds a first column of checkboxes that select rows. */
+  readonly selectable: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  /** The keys (`rowKey`) of the selected rows; two-way bindable. */
+  readonly selection: import("@angular/core").ModelSignal<readonly string[]>;
+  /** Accessible name of the header checkbox; empty falls back to `provideBfLabels()`'s
+   * `tableSelectAll` ("Select all rows"). */
+  readonly selectAllLabel: import("@angular/core").InputSignal<string>;
+  /** Row height step: sm 40, md 48, lg 56 px (the header 32/40/48; at least 44 px under a coarse
+   * pointer); unset follows `provideBfDefaults()` (`controlSize`, `md` by default). */
+  readonly size: import("@angular/core").InputSignal<BfSize | undefined>;
+  private readonly labels;
+  private readonly defaults;
+  private readonly table;
+  private readonly cells;
+  private readonly id;
+  /** The size in effect: `size`, else the app's `controlSize` default. */
+  protected readonly resolvedSize: import("@angular/core").Signal<BfSize>;
+  /** The header checkbox's name: `selectAllLabel`, else the `tableSelectAll` label. */
+  protected readonly selectAllName: import("@angular/core").Signal<string>;
+  /** Each row with its key (the `rowKey`, else its index) and its index. */
+  protected readonly entries: import("@angular/core").Signal<BfTableEntry<T>[]>;
+  /** The custom cell template of each column key. */
+  protected readonly templates: import("@angular/core").Signal<Map<string, TemplateRef<BfTableCellContext<unknown>>>>;
+  protected readonly selectedKeys: import("@angular/core").Signal<Set<string>>;
+  /** Whether every row is selected (and there is at least one). */
+  protected readonly allSelected: import("@angular/core").Signal<boolean>;
+  /** Whether some rows, but not all, are selected: the header checkbox is mixed. */
+  protected readonly someSelected: import("@angular/core").Signal<boolean>;
+  /** The number of columns, the selection column included: the empty row's `colspan`. */
+  protected readonly columnCount: import("@angular/core").Signal<number>;
+  protected readonly sortButton: string;
+  protected readonly selectHeadClasses: import("@angular/core").Signal<string>;
+  protected readonly selectBodyClasses: import("@angular/core").Signal<string>;
+  /**
+   * The classes of a column's header cell.
+   * @internal
+   */
+  headClasses(column: BfTableColumn): string;
+  /**
+   * The classes of a column's body cell.
+   * @internal
+   */
+  bodyClasses(column: BfTableColumn): string;
+  /**
+   * The classes of the body row with this key.
+   * @internal
+   */
+  rowClasses(key: string): string;
+  /**
+   * The classes of a sortable header's arrow mark.
+   * @internal
+   */
+  arrowClasses(key: string): string;
+  /**
+   * The `aria-sort` of a column's header: its direction while sorted, else none.
+   * @internal
+   */
+  ariaSort(key: string): BfTableSortDirection | null;
+  /**
+   * The id of a row's first data cell, which names the row's checkbox.
+   * @internal
+   */
+  cellId(index: number): string;
+  /**
+   * The default text of a cell: the row's property `key` when it is a string, number or boolean,
+   * else empty (render an object, such as a date, with a `bfTableCell` template).
+   * @internal
+   */
+  cellText(row: T, key: string): string;
+  /**
+   * Sorts by the column with this key: ascending first, then descending and ascending again.
+   * @param key The column's `key`.
+   */
+  sortBy(key: string): void;
+  /**
+   * Selects or clears every row; keys of rows not shown stay as they are.
+   * @param selected True to select every row, false to clear them.
+   */
+  selectAll(selected: boolean): void;
+  /**
+   * Selects or clears one row.
+   * @param key The row's key.
+   * @param selected True to select it, false to clear it.
+   */
+  selectRow(key: string, selected: boolean): void;
+  /**
+   * ArrowUp / ArrowDown on a button, link or checkbox in a row move focus to the control at the
+   * same place in the nearest row above or below that has one.
+   * @internal
+   */
+  onKeydown(event: KeyboardEvent): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<BfTableComponent<any>, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<BfTableComponent<any>, "bf-table", never, {
+    "rows": {
+      "alias": "rows";
+      "required": true;
+      "isSignal": true;
+    };
+    "columns": {
+      "alias": "columns";
+      "required": true;
+      "isSignal": true;
+    };
+    "rowKey": {
+      "alias": "rowKey";
+      "required": false;
+      "isSignal": true;
+    };
+    "label": {
+      "alias": "label";
+      "required": false;
+      "isSignal": true;
+    };
+    "sort": {
+      "alias": "sort";
+      "required": false;
+      "isSignal": true;
+    };
+    "selectable": {
+      "alias": "selectable";
+      "required": false;
+      "isSignal": true;
+    };
+    "selection": {
+      "alias": "selection";
+      "required": false;
+      "isSignal": true;
+    };
+    "selectAllLabel": {
+      "alias": "selectAllLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "size": {
+      "alias": "size";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "sort": "sortChange";
+    "selection": "selectionChange";
+  }, ["cells"], ["[bfSlot=empty]"], true, never>;
+}
+/**
+ * The layout of a `bf-description-list`: `rows` (label beside value, divided) or `grid` (tiles).
+ *
+ * @summary The two description list layouts, divided label-value rows or a grid of tiles
+ * @since 0.3.1
+ */
+type BfDescriptionListLayout = 'rows' | 'grid';
+/** What a `div[bfDescriptionItem]` reads from its `bf-description-list`. */
+interface BfDescriptionListHost {
+  /** The list's layout. */
+  readonly layout: Signal<BfDescriptionListLayout>;
+}
+/**
+ * Provided by `bf-description-list` so each `div[bfDescriptionItem]` styles itself for the list's
+ * layout, without `description-item.component.ts` importing `description-list.component.ts`.
+ */
+declare const BF_DESCRIPTION_LIST: InjectionToken<BfDescriptionListHost>;
+/**
+ * A list of label-value pairs, such as a record's details: a native `dl` around
+ * `div[bfDescriptionItem]`s, as divided rows (label beside value) or a grid of tiles.
+ *
+ * @example
+ * <bf-description-list>
+ *   <div bfDescriptionItem label="Cuisine">Italian</div>
+ *   <div bfDescriptionItem label="Difficulty"><bf-badge variant="success">Easy</bf-badge></div>
+ * </bf-description-list>
+ * @summary Native description list of label-value pairs, as divided rows or a tile grid
+ * @category Data display
+ * @since 0.3.1
+ * @slot default The pairs, each a `div[bfDescriptionItem]`.
+ */
+export declare class BfDescriptionListComponent implements BfDescriptionListHost {
+  /** `rows` (default): label beside value, divided, stacked in a narrow list; `grid`: tiles with the label over the value. */
+  readonly layout: import("@angular/core").InputSignal<BfDescriptionListLayout>;
+  readonly classes: import("@angular/core").Signal<string>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<BfDescriptionListComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<BfDescriptionListComponent, "bf-description-list", never, {
+    "layout": {
+      "alias": "layout";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, ["*"], true, never>;
+}
+/**
+ * One label-value pair of a `bf-description-list`: the `label` becomes the `dt`, the content the
+ * `dd`. Put it on a `div` inside the list.
+ *
+ * @example
+ * <bf-description-list>
+ *   <div bfDescriptionItem label="Servings">4</div>
+ * </bf-description-list>
+ * @summary One label and value pair of a description list, label as term, content as value
+ * @category Data display
+ * @since 0.3.1
+ * @slot default The value: text or rich content such as a badge or a link.
+ */
+export declare class BfDescriptionItemComponent {
+  /** The term, shown as the pair's label. */
+  readonly label: import("@angular/core").InputSignal<string>;
+  /** The enclosing list, which sets the layout; `rows` outside a list. */
+  private readonly list;
+  readonly classes: import("@angular/core").Signal<string>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<BfDescriptionItemComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<BfDescriptionItemComponent, "div[bfDescriptionItem]", never, {
+    "label": {
+      "alias": "label";
+      "required": true;
+      "isSignal": true;
+    };
+  }, {}, never, ["*"], true, never>;
+}
+/**
+ * The surface of a `bf-stat`: plain (on whatever holds it) or card (its own outlined tile).
+ *
+ * @summary The two stat surfaces, plain on its container or an outlined card tile
+ * @since 0.3.1
+ */
+type BfStatVariant = 'plain' | 'card';
+/**
+ * The direction of a `bf-stat` delta: up, down or flat (no change).
+ *
+ * @summary The three directions of a stat's delta pill, up, down or no change
+ * @since 0.3.1
+ */
+type BfStatTrend = 'up' | 'down' | 'flat';
+/**
+ * Which direction of a `bf-stat` delta is good: positive (up is good, such as revenue) or
+ * negative (down is good, such as costs or churn).
+ *
+ * @summary Whether a rising or a falling figure is the good news for a stat
+ * @since 0.3.1
+ */
+type BfStatTrendIntent = 'positive' | 'negative';
+/**
+ * One figure with its label, such as a count, a duration or a total: a native `dl` pair with the
+ * value set large, an optional icon tile at the start and a supporting line under the value.
+ *
+ * A `delta` with a `trend` adds a pill beside the value, toned by `trendIntent`.
+ *
+ * @example
+ * <bf-stat label="Revenue" value="€48,200" delta="+12%" trend="up" />
+ * <bf-stat label="Cook time" value="30 min" variant="card">
+ *   <bf-icon bfSlot="icon" [icon]="Flame" />
+ *   Oven at 200 °C
+ * </bf-stat>
+ * @summary One labelled figure with an optional icon tile and a supporting line
+ * @category Data display
+ * @since 0.3.1
+ * @slot icon The icon in the tile at the start.
+ * @slot default A supporting line under the value, such as a trend or a badge.
+ */
+export declare class BfStatComponent {
+  /** What the figure measures, shown above it. */
+  readonly label: import("@angular/core").InputSignal<string>;
+  /** The figure, already formatted (`45 min`, `1,204`, `98%`). */
+  readonly value: import("@angular/core").InputSignal<string>;
+  /** Surface: plain (default) on its container, or card, an outlined tile of its own. */
+  readonly variant: import("@angular/core").InputSignal<BfStatVariant>;
+  /** A change shown in a pill beside the value, already formatted (`+12%`); empty shows none. */
+  readonly delta: import("@angular/core").InputSignal<string>;
+  /** The delta's direction: an arrow mark and a hidden word; left unset, the pill is neutral. */
+  readonly trend: import("@angular/core").InputSignal<BfStatTrend | undefined>;
+  /** Whether up is good (positive, default) or down is good (negative, such as costs). */
+  readonly trendIntent: import("@angular/core").InputSignal<BfStatTrendIntent>;
+  private readonly labels;
+  readonly classes: import("@angular/core").Signal<string>;
+  /** @internal */
+  readonly deltaClasses: import("@angular/core").Signal<string>;
+  /** @internal */
+  readonly markClasses: import("@angular/core").Signal<string>;
+  /** @internal The direction read before the delta, so colour is never the only signal. */
+  readonly trendWord: import("@angular/core").Signal<string>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<BfStatComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<BfStatComponent, "bf-stat", never, {
+    "label": {
+      "alias": "label";
+      "required": true;
+      "isSignal": true;
+    };
+    "value": {
+      "alias": "value";
+      "required": true;
+      "isSignal": true;
+    };
+    "variant": {
+      "alias": "variant";
+      "required": false;
+      "isSignal": true;
+    };
+    "delta": {
+      "alias": "delta";
+      "required": false;
+      "isSignal": true;
+    };
+    "trend": {
+      "alias": "trend";
+      "required": false;
+      "isSignal": true;
+    };
+    "trendIntent": {
+      "alias": "trendIntent";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, ["[bfSlot=icon]", "*"], true, never>;
+}
+/**
+ * What a `li[bfBreadcrumbItem]` reads from its enclosing `bf-breadcrumb`, provided through an
+ * injection token so `breadcrumb.component.ts` and `breadcrumb-item.component.ts` never import each
+ * other. Both methods read signals, so an item calls them in a `computed()`.
+ */
+interface BfBreadcrumbTrail {
+  /**
+   * Whether `item` is the last item of the trail: the current page.
+   * @param item The item asking.
+   */
+  isCurrent(item: object): boolean;
+  /**
+   * Whether `item` is one of the middle items a collapsed trail hides behind its ellipsis.
+   * @param item The item asking.
+   */
+  isHidden(item: object): boolean;
+}
+/** Provided by `bf-breadcrumb` for the items projected into it. */
+declare const BF_BREADCRUMB: InjectionToken<BfBreadcrumbTrail>;
+/**
+ * Desktop breadcrumb trail: a `nav` named "Breadcrumb" around an ordered list of
+ * `li[bfBreadcrumbItem]` levels, the last one the current page, a CSS chevron between them. With
+ * `maxItems` set and a longer trail it keeps the first level and the last `maxItems - 1`, and hides
+ * the middle ones behind an ellipsis button that shows them in place, or behind the consumer's own
+ * `bfSlot="overflow"` content (a menu button of the hidden levels).
+ *
+ * @example
+ * <bf-breadcrumb [maxItems]="3">
+ *   <li bfBreadcrumbItem><a routerLink="/">Home</a></li>
+ *   <li bfBreadcrumbItem><a routerLink="/projects">Projects</a></li>
+ *   <li bfBreadcrumbItem><a routerLink="/projects/atlas">Atlas</a></li>
+ *   <li bfBreadcrumbItem>Settings</li>
+ * </bf-breadcrumb>
+ * @summary Desktop breadcrumb trail of links to the current page, with optional collapsing
+ * @category Navigation
+ * @since 0.3.1
+ * @slot default The levels, each a `li[bfBreadcrumbItem]`, the current page last.
+ * @slot overflow Replaces the ellipsis button of a collapsed trail, e.g. a menu of the hidden levels.
+ */
+export declare class BfBreadcrumbComponent implements BfBreadcrumbTrail {
+  private readonly labels;
+  private readonly injector;
+  /** Accessible name of the navigation; empty falls back to `provideBfLabels()`'s `breadcrumb`
+   * ("Breadcrumb"). */
+  readonly label: import("@angular/core").InputSignal<string>;
+  /**
+   * Collapse a trail longer than this: keep the first level and the last `maxItems - 1` and hide
+   * the middle ones behind an ellipsis. `0` never collapses; values below 2 act as 2, so the
+   * current page always stays.
+   */
+  readonly maxItems: import("@angular/core").InputSignalWithTransform<number, unknown>;
+  /** The rendered navigation name: `label`, else the `breadcrumb` label. */
+  protected readonly name: import("@angular/core").Signal<string>;
+  private readonly items;
+  private readonly itemElements;
+  private readonly more;
+  private readonly expanded;
+  /** How many middle levels the trail hides right now; 0 when it shows all of them. */
+  readonly hiddenCount: import("@angular/core").Signal<number>;
+  protected readonly expandLabel: import("@angular/core").Signal<string>;
+  protected readonly expandClasses: string;
+  protected readonly separator = "size-1.5 shrink-0 rotate-45 border-t-[1.5px] border-r-[1.5px] border-text-subtle rtl:-rotate-135";
+  constructor();
+  /**
+   * Whether `item` is the last level, the current page.
+   * @internal
+   */
+  isCurrent(item: object): boolean;
+  /**
+   * Whether `item` is one of the middle levels the collapsed trail hides.
+   * @internal
+   */
+  isHidden(item: object): boolean;
+  /**
+   * Shows every level in place and moves focus to the first one it revealed (its link).
+   * @internal
+   */
+  expand(): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<BfBreadcrumbComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<BfBreadcrumbComponent, "bf-breadcrumb", never, {
+    "label": {
+      "alias": "label";
+      "required": false;
+      "isSignal": true;
+    };
+    "maxItems": {
+      "alias": "maxItems";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, ["items", "itemElements"], ["[bfSlot=overflow]", "*"], true, never>;
+}
+declare const BREADCRUMB_SEPARATOR = "size-1.5 shrink-0 rotate-45 border-t-[1.5px] border-r-[1.5px] border-text-subtle rtl:-rotate-135";
+/**
+ * One level of a `bf-breadcrumb` trail, on the consumer's own `<li>` so the list stays `ol > li`.
+ * Project an `<a routerLink>` for an ancestor page, or plain text for the current page; the last
+ * item is the current page (`aria-current="page"`, no link look, no separator), every other one is
+ * followed by a chevron.
+ *
+ * @example
+ * <li bfBreadcrumbItem><a routerLink="/projects">Projects</a></li>
+ * <li bfBreadcrumbItem>Atlas</li>
+ * @summary One level of a breadcrumb trail: a link, or the current page as text
+ * @category Navigation
+ * @since 0.3.1
+ * @slot default The level: an `<a>` link to the page, or plain text for the current page.
+ */
+export declare class BfBreadcrumbItemComponent {
+  private readonly trail;
+  private readonly host;
+  /** Whether this item is the last of the trail, the current page. */
+  readonly current: import("@angular/core").Signal<boolean>;
+  /** Whether a collapsed trail hides this item behind its ellipsis. */
+  readonly hidden: import("@angular/core").Signal<boolean>;
+  protected readonly classes: import("@angular/core").Signal<string>;
+  protected readonly separator = "size-1.5 shrink-0 rotate-45 border-t-[1.5px] border-r-[1.5px] border-text-subtle rtl:-rotate-135";
+  /**
+   * Moves keyboard focus to the item's link (or other focusable content); an item without one
+   * takes focus itself through `tabindex="-1"`. Called by `bf-breadcrumb` after the ellipsis
+   * reveals the hidden levels.
+   * @internal
+   */
+  focus(): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<BfBreadcrumbItemComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<BfBreadcrumbItemComponent, "li[bfBreadcrumbItem]", never, {}, {}, never, ["*"], true, never>;
+}
+/**
+ * The vertical navigation of a desktop app: a `nav` landmark with a `header` slot (the brand),
+ * the destinations (`a[bfNavItem]` links, optionally in `bf-nav-group`s) and a `footer` slot.
+ * `collapsed` turns it into an icon rail; the consumer owns the toggle button and binds
+ * `[(collapsed)]`. Below a breakpoint hide it (`class="hidden md:flex"`) and drive a
+ * `bf-menu-button` from the same routes.
+ *
+ * @example
+ * <bf-sidebar label="Main" [(collapsed)]="collapsed" class="hidden md:flex">
+ *   <a bfSlot="header" routerLink="/">Atlas</a>
+ *   <bf-nav-group label="Workspace">
+ *     <a bfNavItem routerLink="/inbox" routerLinkActive ariaCurrentWhenActive="page">
+ *       <bf-icon bfSlot="icon" [icon]="Inbox" />
+ *       Inbox
+ *     </a>
+ *   </bf-nav-group>
+ * </bf-sidebar>
+ * @summary Vertical app navigation with brand, grouped links, footer and an icon rail mode
+ * @category Navigation
+ * @since 0.3.1
+ * @slot header The brand or app switcher above the destinations.
+ * @slot default The destinations: `a[bfNavItem]` links and `bf-nav-group`s.
+ * @slot footer Content under the destinations, such as settings or the account.
+ */
+export declare class BfSidebarComponent {
+  /** Accessible name of the navigation; empty falls back to `provideBfLabels()`'s `navigation`
+   * ("Main"). Name each landmark differently when a page has more than one. */
+  readonly label: import("@angular/core").InputSignal<string>;
+  /** Collapses the sidebar to an icon rail: items show their icon only, their label stays for
+   * screen readers and becomes a tooltip. Bind `[(collapsed)]` to your own toggle button. */
+  readonly collapsed: import("@angular/core").ModelSignal<boolean>;
+  private readonly labels;
+  /** The rendered navigation name: `label`, else the `navigation` label. */
+  protected readonly name: import("@angular/core").Signal<string>;
+  private readonly width;
+  readonly hostClasses: import("@angular/core").Signal<string>;
+  protected readonly regionClasses: import("@angular/core").Signal<string>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<BfSidebarComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<BfSidebarComponent, "bf-sidebar", never, {
+    "label": {
+      "alias": "label";
+      "required": false;
+      "isSignal": true;
+    };
+    "collapsed": {
+      "alias": "collapsed";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "collapsed": "collapsedChange";
+  }, never, ["[bfSlot=header]", "*", "[bfSlot=footer]"], true, never>;
+}
+/**
+ * The horizontal navigation of a desktop app with few sections: a `nav` landmark holding a row
+ * of `a[bfNavItem]` links that wraps onto more lines in a narrow container. Each link marks the
+ * current page from `aria-current="page"`, as in `bf-sidebar`.
+ *
+ * @example
+ * <bf-top-nav label="Sections">
+ *   <a bfNavItem routerLink="/overview" routerLinkActive ariaCurrentWhenActive="page">Overview</a>
+ *   <a bfNavItem routerLink="/reports" routerLinkActive ariaCurrentWhenActive="page">Reports</a>
+ * </bf-top-nav>
+ * @summary Horizontal app navigation, a wrapping row of links for apps with few sections
+ * @category Navigation
+ * @since 0.3.1
+ * @slot default The destinations, `a[bfNavItem]` links.
+ */
+export declare class BfTopNavComponent {
+  /** Accessible name of the navigation; empty falls back to `provideBfLabels()`'s `navigation`
+   * ("Main"). Name each landmark differently when a page has more than one. */
+  readonly label: import("@angular/core").InputSignal<string>;
+  private readonly labels;
+  /** The rendered navigation name: `label`, else the `navigation` label. */
+  protected readonly name: import("@angular/core").Signal<string>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<BfTopNavComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<BfTopNavComponent, "bf-top-nav", never, {
+    "label": {
+      "alias": "label";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, ["*"], true, never>;
+}
+/**
+ * A titled group of `a[bfNavItem]` links inside a `bf-sidebar`: `label` is shown as a small
+ * heading above them and names the group (`role="group"`) for screen readers, also while the
+ * sidebar is collapsed and the heading is hidden.
+ *
+ * @example
+ * <bf-nav-group label="Workspace">
+ *   <a bfNavItem routerLink="/inbox" routerLinkActive ariaCurrentWhenActive="page">Inbox</a>
+ *   <a bfNavItem routerLink="/projects" routerLinkActive ariaCurrentWhenActive="page">Projects</a>
+ * </bf-nav-group>
+ * @summary A titled group of sidebar links with a small heading that names it
+ * @category Navigation
+ * @since 0.3.1
+ * @slot default The group's `a[bfNavItem]` links.
+ */
+export declare class BfNavGroupComponent {
+  /** The group's heading and accessible name, such as "Workspace". */
+  readonly label: import("@angular/core").InputSignal<string>;
+  private readonly nav;
+  /** The heading's id, referenced by the group's `aria-labelledby`. */
+  protected readonly headingId: string;
+  private readonly form;
+  readonly hostClasses: import("@angular/core").Signal<string>;
+  protected readonly headingClasses: import("@angular/core").Signal<string>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<BfNavGroupComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<BfNavGroupComponent, "bf-nav-group", never, {
+    "label": {
+      "alias": "label";
+      "required": true;
+      "isSignal": true;
+    };
+  }, {}, never, ["*"], true, never>;
+}
+/**
+ * One destination of a `bf-sidebar` or `bf-top-nav`: put `bfNavItem` on your own `<a>` with
+ * `routerLink`, `routerLinkActive` and `ariaCurrentWhenActive="page"`, and the item shows the
+ * current page from `aria-current`. An icon goes in the `icon` slot, the label in the default
+ * slot; `badge` adds a count. In a collapsed sidebar only the icon shows, the label stays for
+ * screen readers and becomes the `title` tooltip.
+ *
+ * @example
+ * <a bfNavItem routerLink="/inbox" routerLinkActive ariaCurrentWhenActive="page" [badge]="3">
+ *   <bf-icon bfSlot="icon" [icon]="Inbox" />
+ *   Inbox
+ * </a>
+ * @summary Navigation link for a sidebar or top nav, with icon, label and count
+ * @category Navigation
+ * @since 0.3.1
+ * @slot icon An icon before the label, a `bf-icon`; the only thing shown while collapsed.
+ * @slot default The label.
+ */
+export declare class BfNavItemComponent {
+  /** Height step: sm 32, md 40, lg 48 px (44 px at least under a coarse pointer); unset follows
+   * `provideBfDefaults()` (`controlSize`, `md` by default). */
+  readonly size: import("@angular/core").InputSignal<BfSize | undefined>;
+  /** A count shown as a pill at the inline end (a dot while collapsed), announced with
+   * `provideBfLabels()`'s `navBadge(count)` ("3 new"); `null` shows none. */
+  readonly badge: import("@angular/core").InputSignal<number | null>;
+  private readonly defaults;
+  private readonly labels;
+  private readonly nav;
+  /** The consumer's own `title`, kept while the item shows its label. */
+  private readonly ownTitle;
+  private readonly label;
+  /** The projected label's text, for the collapsed `title`. */
+  private readonly labelText;
+  /** True while the enclosing sidebar is collapsed to an icon rail. */
+  protected readonly collapsed: import("@angular/core").Signal<boolean>;
+  private readonly form;
+  /** The size in effect: `size`, else the app's `controlSize` default. */
+  private readonly resolvedSize;
+  readonly classes: import("@angular/core").Signal<string>;
+  protected readonly labelClasses: import("@angular/core").Signal<string>;
+  protected readonly badgeClasses: import("@angular/core").Signal<string>;
+  /** The badge as screen readers hear it after the label. */
+  protected readonly badgeAnnouncement: import("@angular/core").Signal<string>;
+  /** Collapsed, the label as the pointer tooltip; else the consumer's own `title`, if any. */
+  protected readonly hoverTitle: import("@angular/core").Signal<string | null>;
+  constructor();
+  static ɵfac: i0.ɵɵFactoryDeclaration<BfNavItemComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<BfNavItemComponent, "a[bfNavItem]", never, {
+    "size": {
+      "alias": "size";
+      "required": false;
+      "isSignal": true;
+    };
+    "badge": {
+      "alias": "badge";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, ["[bfSlot=icon]", "*"], true, never>;
+}
+/**
+ * The shape of a `bf-skeleton`: text lines, a rectangle (an image, a chart, a field) or a circle
+ * (an avatar).
+ *
+ * @summary The three skeleton shapes, text lines, a rectangle or a circle
+ * @since 0.3.1
+ */
+type BfSkeletonShape = 'text' | 'rect' | 'circle';
+/**
+ * Loading placeholder in the shape of the content to come: text lines, a rectangle or a circle,
+ * on the sunken surface with a shimmer. It is hidden from assistive technology; mark the region it
+ * stands in for with `aria-busy="true"` while it loads.
+ *
+ * @example
+ * <div aria-busy="true">
+ *   <bf-skeleton shape="circle" />
+ *   <bf-skeleton [lines]="3" />
+ *   <bf-skeleton shape="rect" height="8rem" />
+ * </div>
+ * @summary Loading placeholder shaped as text lines, a rectangle or a circle, with a shimmer
+ * @category Feedback
+ * @since 0.3.1
+ */
+export declare class BfSkeletonComponent {
+  /** What it stands in for: `text` lines (default), a `rect` (an image, a chart) or a `circle`
+   * (an avatar). */
+  readonly shape: import("@angular/core").InputSignal<BfSkeletonShape>;
+  /** How many lines a `text` skeleton draws, the last one shorter when there are several;
+   * ignored by the other shapes. */
+  readonly lines: import("@angular/core").InputSignalWithTransform<number, unknown>;
+  /** Width as a CSS length (`12rem`, `60%`); empty fills the container, a circle is 40 px. A
+   * circle's height follows its width. */
+  readonly width: import("@angular/core").InputSignal<string>;
+  /** Height as a CSS length: of each line of `text` (default `0.75rem`) or of the `rect`
+   * (default `6rem`); a circle ignores it. */
+  readonly height: import("@angular/core").InputSignal<string>;
+  protected readonly lineClasses = "relative overflow-hidden bg-surface-sunken after:absolute after:inset-0 after:bg-linear-to-r after:from-transparent after:via-surface/70 after:to-transparent after:content-[''] after:animate-skeleton-shimmer rtl:after:animate-skeleton-shimmer-rtl motion-reduce:after:hidden forced-colors:border forced-colors:border-[GrayText] block h-[var(--bf-skeleton-height,0.75rem)] w-full rounded-full";
+  protected readonly lastLineClasses = "relative overflow-hidden bg-surface-sunken after:absolute after:inset-0 after:bg-linear-to-r after:from-transparent after:via-surface/70 after:to-transparent after:content-[''] after:animate-skeleton-shimmer rtl:after:animate-skeleton-shimmer-rtl motion-reduce:after:hidden forced-colors:border forced-colors:border-[GrayText] block h-[var(--bf-skeleton-height,0.75rem)] w-3/5 rounded-full";
+  /** The line numbers 1…n of a text skeleton; `lines` below 1 draws one. */
+  protected readonly lineList: import("@angular/core").Signal<number[]>;
+  protected readonly hostClasses: import("@angular/core").Signal<string>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<BfSkeletonComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<BfSkeletonComponent, "bf-skeleton", never, {
+    "shape": {
+      "alias": "shape";
+      "required": false;
+      "isSignal": true;
+    };
+    "lines": {
+      "alias": "lines";
+      "required": false;
+      "isSignal": true;
+    };
+    "width": {
+      "alias": "width";
+      "required": false;
+      "isSignal": true;
+    };
+    "height": {
+      "alias": "height";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, never>;
+}
+/** One slot of the page row: a page number, or a gap before or after the current page's run. */
+type BfPaginationItem = number | 'gap-start' | 'gap-end';
+type BfPaginationDirection = 'previous' | 'next';
+/**
+ * Page navigation for a long list or table: Previous and Next buttons around the page numbers,
+ * the current one marked, the hidden runs shown as an ellipsis. `compact` shows "Page 3 of 12"
+ * between the arrows instead, for narrow screens. The page count comes from `pageCount`, or from
+ * `total` and `pageSize`; the consumer shows the rows of `page`.
+ *
+ * @example
+ * <bf-pagination [(page)]="page" [pageCount]="12" />
+ * <bf-pagination [(page)]="page" [total]="invoices().length" [pageSize]="10" compact />
+ * @summary Previous, next and numbered page buttons for a long list or table
+ * @category Navigation
+ * @since 0.3.1
+ */
+export declare class BfPaginationComponent {
+  /** The current page, 1-based; two-way bindable. The buttons set it; show the rows of this page. */
+  readonly page: import("@angular/core").ModelSignal<number>;
+  /** The number of pages; wins over `total` and `pageSize` when above 0. */
+  readonly pageCount: import("@angular/core").InputSignalWithTransform<number, unknown>;
+  /** The number of items, used with `pageSize` while `pageCount` is 0. */
+  readonly total: import("@angular/core").InputSignalWithTransform<number, unknown>;
+  /** Items per page, used with `total` while `pageCount` is 0. */
+  readonly pageSize: import("@angular/core").InputSignalWithTransform<number, unknown>;
+  /** How many pages to show on each side of the current one. */
+  readonly siblings: import("@angular/core").InputSignalWithTransform<number, unknown>;
+  /** Shows "Page 3 of 12" between the arrows instead of the page buttons, for narrow screens. */
+  readonly compact: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  /** Button height step: sm 32, md 40, lg 48 px (44 px hit area under a coarse pointer); unset
+   * follows `provideBfDefaults()` (`controlSize`, `md` by default). */
+  readonly size: import("@angular/core").InputSignal<BfSize | undefined>;
+  /** Accessible name of the navigation; empty falls back to `provideBfLabels()`'s `pagination`
+   * ("Pagination"). */
+  readonly label: import("@angular/core").InputSignal<string>;
+  protected readonly labels: import("@bitforgehq/ui").BfLabels;
+  private readonly defaults;
+  /** The size in effect: `size`, else the app's `controlSize` default. */
+  protected readonly resolvedSize: import("@angular/core").Signal<BfSize>;
+  /** The navigation's name: `label`, else the `pagination` label. */
+  protected readonly name: import("@angular/core").Signal<string>;
+  /** The page count in effect, at least 1: `pageCount`, else `total` over `pageSize`. */
+  protected readonly count: import("@angular/core").Signal<number>;
+  /** The page shown as current: `page`, clamped to 1…count. */
+  protected readonly current: import("@angular/core").Signal<number>;
+  protected readonly items: import("@angular/core").Signal<BfPaginationItem[]>;
+  protected readonly chevron: Record<BfPaginationDirection, string>;
+  protected readonly pageClasses: import("@angular/core").Signal<string>;
+  protected readonly gapClasses: import("@angular/core").Signal<string>;
+  protected readonly statusClasses: import("@angular/core").Signal<string>;
+  /**
+   * The classes of the previous or next button.
+   * @internal
+   */
+  arrowClasses(disabled: boolean): string;
+  /**
+   * Goes to a page: sets `page` when it is another page within 1…count; else does nothing.
+   * @param target The 1-based page to go to.
+   */
+  go(target: number): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<BfPaginationComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<BfPaginationComponent, "bf-pagination", never, {
+    "page": {
+      "alias": "page";
+      "required": false;
+      "isSignal": true;
+    };
+    "pageCount": {
+      "alias": "pageCount";
+      "required": false;
+      "isSignal": true;
+    };
+    "total": {
+      "alias": "total";
+      "required": false;
+      "isSignal": true;
+    };
+    "pageSize": {
+      "alias": "pageSize";
+      "required": false;
+      "isSignal": true;
+    };
+    "siblings": {
+      "alias": "siblings";
+      "required": false;
+      "isSignal": true;
+    };
+    "compact": {
+      "alias": "compact";
+      "required": false;
+      "isSignal": true;
+    };
+    "size": {
+      "alias": "size";
+      "required": false;
+      "isSignal": true;
+    };
+    "label": {
+      "alias": "label";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "page": "pageChange";
+  }, never, never, true, never>;
+}
+/**
+ * A weekday as `Date.getDay()` counts it: 0 Sunday, 1 Monday … 6 Saturday.
+ *
+ * @summary A weekday number from 0 for Sunday to 6 for Saturday, as Date counts
+ * @since 0.3.1
+ */
+type BfCalendarWeekday = 0 | 1 | 2 | 3 | 4 | 5 | 6;
+/**
+ * Tells `bf-calendar` which dates cannot be picked, such as weekends or booked days.
+ *
+ * @summary A function that marks an ISO date as not pickable in a calendar
+ * @since 0.3.1
+ */
+type BfCalendarDisabledDate = (iso: string) => boolean;
+/** The day grid, or one of the two jump views the title button opens. */
+type CalendarView = 'day' | 'month' | 'year';
+/** One cell of a calendar grid, as the template renders it. */
+interface CalendarCell {
+  /** The ISO date, month or year the cell stands for. */
+  readonly key: string;
+  /** The visible text. */
+  readonly text: string;
+  /** The accessible name, when the visible text alone is too short. */
+  readonly name: string | null;
+  readonly disabled: boolean;
+  readonly selected: boolean;
+  readonly current: boolean;
+  readonly tabStop: boolean;
+}
+/** One weekday column header: the short name shown, the full name in `abbr`. */
+interface CalendarWeekday {
+  readonly short: string;
+  readonly long: string;
+}
+/**
+ * Inline month calendar for picking one date, an ARIA grid with full keyboard support. The value
+ * is a plain ISO date string ('YYYY-MM-DD', never a Date with a time zone) or `null`; month and
+ * weekday names come from `Intl` in the calendar's `locale`; implements the Signal Forms value
+ * contract.
+ *
+ * @example
+ * <bf-calendar label="Due date" min="2026-01-01" [(value)]="due" />
+ * @summary Inline month calendar for picking one date, with month and year jumps
+ * @category Forms
+ * @since 0.3.1
+ */
+export declare class BfCalendarComponent implements FormValueControl<string | null> {
+  private readonly defaults;
+  private readonly document;
+  private readonly injector;
+  /** The strings in effect; the template reads the button names from them. */
+  protected readonly labels: import("@bitforgehq/ui").BfLabels;
+  /** The picked date as an ISO string ('YYYY-MM-DD'), `null` while none is picked; two-way
+   * bindable and bound by `[formField]`. */
+  readonly value: import("@angular/core").ModelSignal<string | null>;
+  /** The month on show ('YYYY-MM'), two-way bindable; `null` shows the value's month, else
+   * today's. The previous/next buttons, the month and year views and the keyboard set it. */
+  readonly month: import("@angular/core").ModelSignal<string | null>;
+  /** The earliest date that can be picked (ISO); earlier dates show disabled. */
+  readonly min: import("@angular/core").InputSignal<string | undefined>;
+  /** The latest date that can be picked (ISO); later dates show disabled. */
+  readonly max: import("@angular/core").InputSignal<string | undefined>;
+  /** Marks more dates as not pickable (weekends, booked days); called with each ISO date. */
+  readonly disabledDate: import("@angular/core").InputSignal<BfCalendarDisabledDate | null>;
+  /** The first column's weekday, 0 Sunday to 6 Saturday; unset follows the locale's week (else
+   * Monday). */
+  readonly firstDayOfWeek: import("@angular/core").InputSignal<BfCalendarWeekday | undefined>;
+  /** BCP 47 locale of the month and weekday names and of the week; empty follows the
+   * document's `lang`, else English. */
+  readonly locale: import("@angular/core").InputSignal<string>;
+  /** The date marked as today (ISO); unset is the device's local date. */
+  readonly today: import("@angular/core").InputSignal<string | undefined>;
+  /** Cell size: sm 32, md 40, lg 48 px (44 px under a coarse pointer); unset follows
+   * `provideBfDefaults()` (`controlSize`, `md` by default). */
+  readonly size: import("@angular/core").InputSignal<BfSize | undefined>;
+  /** Disables the whole calendar: nothing is focusable or pickable. */
+  readonly disabled: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  /** Shows the value and lets the user browse the months, but blocks picking. */
+  readonly readonly: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  /** Marks the date required (`aria-required` on the day grid). */
+  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 calendar; errors show only once touched. */
+  readonly touched: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  /** Validation errors from Signal Forms; the first message is shown once touched. */
+  readonly errors: import("@angular/core").InputSignal<readonly ValidationError.WithOptionalFieldTree[]>;
+  /** Explicit error text; takes precedence over Signal Forms errors. */
+  readonly errorMessage: import("@angular/core").InputSignal<string>;
+  /** Accessible name of the calendar (not rendered visibly), such as "Due date". */
+  readonly label: import("@angular/core").InputSignal<string>;
+  /** Accessible name when `label` is not set. */
+  readonly ariaLabel: import("@angular/core").InputSignal<string>;
+  /** Id(s) of the element(s) that name the calendar (a visible heading) when `label` is not
+   * set. */
+  readonly ariaLabelledby: import("@angular/core").InputSignal<string>;
+  /** Name of the bound field. Not rendered (the calendar has no native form element); kept so
+   * Signal Forms can bind it. */
+  readonly name: import("@angular/core").InputSignal<string>;
+  /** The calendar's id; generated when not set. */
+  readonly id: import("@angular/core").InputSignal<string>;
+  /** Emitted with the new date right after the user picks a different one. */
+  readonly changed: import("@angular/core").OutputEmitterRef<string>;
+  /** Emitted with the date the user picked (click, Enter or Space), also when it already was
+   * the value, so a popover around the calendar can close. */
+  readonly picked: import("@angular/core").OutputEmitterRef<string>;
+  /** Emitted when focus leaves the calendar, so Signal Forms marks the field touched. */
+  readonly touch: import("@angular/core").OutputEmitterRef<void>;
+  private readonly root;
+  /** Which grid is on show: the days, or the month or year jump view. */
+  protected readonly view: import("@angular/core").WritableSignal<CalendarView>;
+  /** The day the keyboard last moved to; the tab stop while it is in the shown month. */
+  private readonly activeDate;
+  /** The month the month view's tab stop is on (its year is the view's year). */
+  private readonly activeMonth;
+  /** The year the year view's tab stop is on. */
+  private readonly activeYear;
+  protected readonly resolvedSize: import("@angular/core").Signal<BfSize>;
+  /** The locale in effect: `locale`, else the document's `lang`, else English. */
+  readonly resolvedLocale: import("@angular/core").Signal<string>;
+  /** The first column's weekday: `firstDayOfWeek`, else the locale's, else Monday. */
+  readonly firstDay: import("@angular/core").Signal<number>;
+  private readonly minDate;
+  private readonly maxDate;
+  private readonly todayDate;
+  private readonly selectedDate;
+  /** The month on show: `month`, else the value's month, else today's (kept inside min/max). */
+  readonly shownMonth: import("@angular/core").Signal<string>;
+  private readonly formats;
+  /** The shown month and year, such as "October 2026". */
+  protected readonly monthTitle: import("@angular/core").Signal<string>;
+  /** The header's title: the month and year, the month view's year or the year view's year. */
+  protected readonly title: import("@angular/core").Signal<string>;
+  /** What the title button does, read after its text. */
+  protected readonly titleAction: import("@angular/core").Signal<string>;
+  protected readonly titleId: import("@angular/core").Signal<string>;
+  /** Whether the previous month lies wholly before `min`. */
+  protected readonly atStart: import("@angular/core").Signal<boolean>;
+  /** Whether the next month lies wholly after `max`. */
+  protected readonly atEnd: import("@angular/core").Signal<boolean>;
+  /** The weekday column headers, from the first day of the week on. */
+  protected readonly weekdays: import("@angular/core").Signal<CalendarWeekday[]>;
+  /** The day that owns the grid's tab stop: the active day while it is in the shown month, else
+   * the value, else today, else the first pickable-by-range day of the month. */
+  readonly tabStopDate: import("@angular/core").Signal<string>;
+  /** The day grid: weeks of seven cells, `null` for the neighbouring months' days. */
+  protected readonly dayRows: import("@angular/core").Signal<(CalendarCell | null)[][]>;
+  /** The month view: the twelve months of the active month's year, three to a row. */
+  protected readonly monthRows: import("@angular/core").Signal<CalendarCell[][]>;
+  /** The first and last year the year view lists: `min`'s and `max`'s, else 100 years around. */
+  private readonly yearRange;
+  /** The year view: the years of `yearRange`, four to a row. */
+  protected readonly yearRows: import("@angular/core").Signal<CalendarCell[][]>;
+  readonly errorText: import("@angular/core").Signal<string>;
+  readonly showError: import("@angular/core").Signal<boolean>;
+  /** The error paragraph: `errorText`, visually hidden while a press elsewhere (that blurred
+   * this calendar) holds the layout, so it never moves under the pointer. */
+  protected readonly message: HeldMessage;
+  /** The id of the error paragraph while there is an error, else null. */
+  protected readonly errorId: import("@angular/core").Signal<string | null>;
+  /** `aria-label` of the group: the `label`, else `ariaLabel`. */
+  readonly ariaLabelAttr: import("@angular/core").Signal<string | null>;
+  /** `aria-labelledby` of the group: only while no `label` names it. */
+  readonly ariaLabelledbyAttr: import("@angular/core").Signal<string | null>;
+  protected readonly frameClasses: import("@angular/core").Signal<string>;
+  protected readonly bodyClasses: import("@angular/core").Signal<string>;
+  protected readonly titleClasses: import("@angular/core").Signal<string>;
+  protected readonly emptyCellClasses: import("@angular/core").Signal<string>;
+  protected readonly weekdayClasses = "h-8 p-0 text-center align-middle text-label-xs font-normal text-text-muted";
+  /**
+   * The classes of the previous or next month button.
+   * @internal
+   */
+  navClasses(direction: 'previous' | 'next'): string;
+  /**
+   * The classes of a day cell.
+   * @internal
+   */
+  cellClasses(cell: CalendarCell): string;
+  /**
+   * The classes of a month or year cell: a little padding between the pills.
+   * @internal
+   */
+  pickCellClasses(cell: CalendarCell): string;
+  /**
+   * The classes of the mark inside a cell.
+   * @internal
+   */
+  markClasses(cell: CalendarCell, kind: 'day' | 'pick'): string;
+  /**
+   * Whether a date cannot be picked: it is outside `min`…`max` or `disabledDate` rules it out.
+   * @param iso The ISO date to check.
+   * @returns True when the date shows disabled.
+   */
+  isDateDisabled(iso: string): boolean;
+  /**
+   * Focuses the cell that owns the tab stop of the grid on show; Signal Forms calls it from
+   * `focusBoundControl()`.
+   * @param options Passed on to the native `focus()`, such as `{ preventScroll: true }`.
+   */
+  focus(options?: FocusOptions): void;
+  /**
+   * Picks `iso` as a click on its day would: ignored while disabled or read-only, and for an
+   * invalid or disabled date. Shows its month.
+   * @param iso The ISO date to pick.
+   */
+  select(iso: string): void;
+  /**
+   * Shows the month `offset` months away (the previous/next buttons); ignored past `min`/`max`.
+   * @internal
+   */
+  showMonth(offset: number): void;
+  /**
+   * The title button: the day view opens the month view, the month view the year view.
+   * @internal
+   */
+  openNextView(): void;
+  /**
+   * A click on a day.
+   * @internal
+   */
+  pick(cell: CalendarCell): void;
+  /**
+   * A click (or Enter, Space) on a month of the month view: shows it in the day view.
+   * @internal
+   */
+  pickMonth(cell: CalendarCell): void;
+  /**
+   * A click (or Enter, Space) on a year of the year view: opens that year's month view.
+   * @internal
+   */
+  pickYear(cell: CalendarCell): void;
+  /**
+   * Escape in the month or year view returns to the day view (and stops there, so a popover
+   * around the calendar stays open).
+   * @internal
+   */
+  onKeydown(event: KeyboardEvent): void;
+  /**
+   * Marks the field touched once focus leaves the calendar (not on moves between its cells).
+   * @internal
+   */
+  onFocusout(event: FocusEvent): void;
+  /**
+   * The day grid's keys: arrows by day and week (mirrored under RTL), Page Up/Down by month
+   * (with Shift by year), Home/End to the week's ends, Enter/Space picks.
+   * @internal
+   */
+  onDayKeydown(event: KeyboardEvent): void;
+  /**
+   * The month view's keys: arrows by one month and by a row of three, Home/End to the row's
+   * ends, Page Up/Down by a year, Enter/Space shows the month.
+   * @internal
+   */
+  onMonthKeydown(event: KeyboardEvent): void;
+  /**
+   * The year view's keys: arrows by one year and by a row of four, Home/End to the row's ends,
+   * Page Up/Down by five rows, Enter/Space opens the year's months.
+   * @internal
+   */
+  onYearKeydown(event: KeyboardEvent): void;
+  /** Moves the day grid's tab stop (and focus) to `iso`, showing its month. */
+  private moveTo;
+  /** +1 when ArrowRight moves forward, -1 under `dir="rtl"`, where the days run right to left. */
+  private inlineStep;
+  private cellMode;
+  /** After the next render, focuses the tab stop of the grid on show; in the scrolling year view
+   * it first scrolls the cell into the middle of the box (`center`, on opening) or just into view
+   * (`nearest`, on a key move). */
+  private focusAfterRender;
+  static ɵfac: i0.ɵɵFactoryDeclaration<BfCalendarComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<BfCalendarComponent, "bf-calendar", never, {
+    "value": {
+      "alias": "value";
+      "required": false;
+      "isSignal": true;
+    };
+    "month": {
+      "alias": "month";
+      "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;
+    };
+    "firstDayOfWeek": {
+      "alias": "firstDayOfWeek";
+      "required": false;
+      "isSignal": true;
+    };
+    "locale": {
+      "alias": "locale";
+      "required": false;
+      "isSignal": true;
+    };
+    "today": {
+      "alias": "today";
+      "required": false;
+      "isSignal": true;
+    };
+    "size": {
+      "alias": "size";
+      "required": false;
+      "isSignal": true;
+    };
+    "disabled": {
+      "alias": "disabled";
+      "required": false;
+      "isSignal": true;
+    };
+    "readonly": {
+      "alias": "readonly";
+      "required": false;
+      "isSignal": true;
+    };
+    "required": {
+      "alias": "required";
+      "required": false;
+      "isSignal": true;
+    };
+    "invalid": {
+      "alias": "invalid";
+      "required": false;
+      "isSignal": true;
+    };
+    "touched": {
+      "alias": "touched";
+      "required": false;
+      "isSignal": true;
+    };
+    "errors": {
+      "alias": "errors";
+      "required": false;
+      "isSignal": true;
+    };
+    "errorMessage": {
+      "alias": "errorMessage";
+      "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;
+    };
+    "name": {
+      "alias": "name";
+      "required": false;
+      "isSignal": true;
+    };
+    "id": {
+      "alias": "id";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "value": "valueChange";
+    "month": "monthChange";
+    "changed": "changed";
+    "picked": "picked";
+    "touch": "touch";
+  }, never, never, true, never>;
+}
+/** An error as a field reads it: its kind and optional message; limit fields (`minLength`,
+ * `context.requiredLength`, …) are read through type guards by `bfValidationMessage`. */
+type FieldErrorLike = Pick<ValidationError, 'kind' | 'message'>;
+/**
+ * Explicit error message wins; otherwise, once the field was touched, the first form error's text:
+ * its own `message`, else the default for its kind from `messages` (`BF_LABELS.validation`).
+ */
+declare function fieldErrorText(errorMessage: string, touched: boolean, errors: readonly FieldErrorLike[], messages: BfValidationMessages): string;
+/** The visual error state: any error text, or a field the form marked invalid after it was touched. */
+declare function fieldShowsError(errorText: string, invalid: boolean, touched: boolean): boolean;
+/**
+ * `aria-describedby` targets: the help paragraph and the error paragraph under it, each while it
+ * is rendered (`"<id>-help <id>-error"`, `"<id>-help"`, `"<id>-error"`), else none.
+ */
+declare function fieldDescribedBy(id: string, errorText: string, helpText: string): string | null;
+/** `aria-errormessage` target: the error paragraph while the control is invalid, else none. */
+declare function fieldErrorMessageId(id: string, errorText: string, showError: boolean): string | null;
+/**
+ * Returns a document-unique id such as `bf-input-3`, for associating labels and hints with controls.
+ *
+ * The ids come from this module-level counter, so a server render and the client (or two server
+ * renders in one process) number them differently: `@bitforgehq/ui` 0.x is client-rendered only,
+ * and SSR, hydration and prerendering of pages that render its components are not supported.
+ * Hydration-stable ids are decided before 1.0.
+ */
+declare function uniqueId(prefix: string): string;
+/** One plain date's parts; `month` is 1–12. */
+interface CalendarDate {
+  readonly year: number;
+  readonly month: number;
+  readonly day: number;
+}
+/** One calendar month's parts; `month` is 1–12. */
+interface CalendarMonth {
+  readonly year: number;
+  readonly month: number;
+}
+/** The number of days in `month` (1–12) of `year`, leap years included. */
+declare function daysInMonth(year: number, month: number): number;
+/** The parts of an ISO date 'YYYY-MM-DD', or `null` for anything else (a wrong day, a time). */
+declare function parseIsoDate(value: string | null | undefined): CalendarDate | null;
+/** The parts of an ISO month 'YYYY-MM', or `null` for anything else. */
+declare function parseIsoMonth(value: string | null | undefined): CalendarMonth | null;
+/** The ISO date of the parts: '2026-03-07'. */
+declare function formatIsoDate({ year, month, day }: CalendarDate): string;
+/** The ISO month of the parts: '2026-03'. */
+declare function formatIsoMonth({ year, month }: CalendarMonth): string;
+/** `iso` itself when it is a valid ISO date, else `null`. */
+declare function validIsoDate(iso: string | null | undefined): string | null;
+/** The month 'YYYY-MM' an ISO date falls in. */
+declare function isoMonthOf(iso: string): string;
+/** The first day of an ISO month. */
+declare function firstOfMonth(isoMonth: string): string;
+/** The last day of an ISO month. */
+declare function lastOfMonth(isoMonth: string): string;
+/** A Date at UTC midnight of the parts, for Intl.DateTimeFormat with `timeZone: 'UTC'`. */
+declare function toUtcDate({ year, month, day }: CalendarDate): Date;
+/** `iso` moved by `days` (negative goes back); an invalid `iso` is returned as it is. */
+declare function addDays(iso: string, days: number): string;
+/** `iso` moved by `months`, the day clamped to the target month's length (Jan 31 + 1 → Feb 28). */
+declare function addMonths(iso: string, months: number): string;
+/** `iso` moved by `years`, Feb 29 clamped to Feb 28 in a common year. */
+declare function addYears(iso: string, years: number): string;
+/** An ISO month moved by `months`. */
+declare function addIsoMonths(isoMonth: string, months: number): string;
+/** The weekday of an ISO date: 0 Sunday … 6 Saturday, as `Date.getDay()` counts. */
+declare function weekdayOf(iso: string): number;
+/** The first day of the week `iso` is in, for weeks starting on `firstDay` (0 Sunday … 6). */
+declare function startOfWeek(iso: string, firstDay: number): string;
+/** The last day of the week `iso` is in, for weeks starting on `firstDay`. */
+declare function endOfWeek(iso: string, firstDay: number): string;
+/**
+ * The weeks of a month as rows of seven ISO dates from `firstDay` on, `null` for the days of the
+ * neighbouring months: four to six rows.
+ */
+declare function monthWeeks(isoMonth: string, firstDay: number): (string | null)[][];
+/** -1, 0 or 1 as ISO date (or month) `a` falls before, on or after `b`. */
+declare function compareIso(a: string, b: string): number;
+/** `iso` kept inside `min`…`max` (either bound may be missing). */
+declare function clampIso(iso: string, min: string | null, max: string | null): string;
+/** The device's local calendar date of `now` (the day the user sees on their clock). */
+declare function localIsoDate(now?: Date): string;
 /** The positioned, empty ::after that carries the extension; add one inset class beside it. */
 declare const COARSE_HIT_BASE = "pointer-coarse:after:absolute pointer-coarse:after:inset-x-0 pointer-coarse:after:content-['']";
 /**
@@ -3496,4 +5588,4 @@ declare const PILL_HIT: Record<BfSize, Record<'plain' | 'bordered', string>>;
 declare function resetBfDocument(document: Document): void;
 /** Runs `resetBfDocument()` when the environment injector that holds it is destroyed. Internal. */
 declare function provideBfDocumentReset(): EnvironmentProviders;
-export { type BfAlertVariant, type BfAutocapitalize, type BfAvatarSize, type BfAvatarVariant, type BfBadgeVariant, type BfButtonSize, type BfButtonType, type BfButtonVariant, type BfCardPadding, type BfCardVariant, type BfChipGroupMode, type BfChipVariant, type BfCompareWith, type BfDefaults, type BfDefaultsOptions, type BfEmptyStateHeadingLevel, type BfEnterKeyHint, type BfFieldControlState, type BfFieldSize, type BfIconButtonVariant, type BfInputAutocapitalize, type BfInputEnterKeyHint, type BfInputInputMode, type BfInputMode, type BfInputType, type BfLabels, type BfLabelsOverrides, type BfProgressSize, type BfProgressTone, type BfRadioGroupOrientation, type BfRadioOption, type BfSegmentOption, type BfSegmentedSize, type BfSelectOption, type BfSize, type BfSpinnerSize, type BfTabBarController, type BfTabBarHost, type BfTabLinks, type BfToggleLabelPosition, type BfValidationMessages, BUTTON_CLASSES as ɵBF_BUTTON_CLASSES, ICON_BUTTON_CLASSES as ɵBF_ICON_BUTTON_CLASSES, FIELD_BOX as ɵFIELD_BOX, FIELD_ICON_END as ɵFIELD_ICON_END, FIELD_ICON_START as ɵFIELD_ICON_START, FIELD_PADDING_END as ɵFIELD_PADDING_END, FIELD_PADDING_START as ɵFIELD_PADDING_START, PILL_HIT as ɵPILL_HIT, fieldDescribedBy as ɵfieldDescribedBy, fieldErrorMessageId as ɵfieldErrorMessageId, fieldErrorText as ɵfieldErrorText, fieldShowsError as ɵfieldShowsError, provideBfDocumentReset as ɵprovideBfDocumentReset, uniqueId as ɵuniqueId };
+export { type BfAlertVariant, type BfAutocapitalize, type BfAvatarSize, type BfAvatarVariant, type BfBadgeAppearance, type BfBadgeVariant, type BfButtonAppearance, type BfButtonSize, type BfButtonType, type BfButtonVariant, type BfCalendarDisabledDate, type BfCalendarWeekday, type BfCardPadding, type BfCardVariant, type BfChipGroupMode, type BfChipVariant, type BfColorScheme, type BfCompareWith, type BfDefaults, type BfDefaultsOptions, type BfDescriptionListLayout, type BfEmptyStateHeadingLevel, type BfEnterKeyHint, type BfFieldControlState, type BfFieldSize, type BfIconButtonVariant, type BfInputAutocapitalize, type BfInputEnterKeyHint, type BfInputInputMode, type BfInputMode, type BfInputType, type BfLabels, type BfLabelsOverrides, type BfPageHeaderHeadingLevel, type BfProgressSize, type BfProgressTone, type BfRadioGroupOrientation, type BfRadioOption, type BfSegmentOption, type BfSegmentedSize, type BfSelectOption, type BfSize, type BfSkeletonShape, type BfSpinnerSize, type BfStatTrend, type BfStatTrendIntent, type BfStatVariant, type BfTabBarController, type BfTabBarHost, type BfTabLinks, type BfTableAlign, type BfTableCellContext, type BfTableColumn, type BfTableRowKey, type BfTableSort, type BfTableSortDirection, type BfToggleLabelPosition, type BfValidationMessages, BUTTON_CLASSES as ɵBF_BUTTON_CLASSES, ICON_BUTTON_CLASSES as ɵBF_ICON_BUTTON_CLASSES, FIELD_BOX as ɵFIELD_BOX, FIELD_ICON_END as ɵFIELD_ICON_END, FIELD_ICON_START as ɵFIELD_ICON_START, FIELD_PADDING_END as ɵFIELD_PADDING_END, FIELD_PADDING_START as ɵFIELD_PADDING_START, PILL_HIT as ɵPILL_HIT, compareIso as ɵcompareIso, createMemoryColorSchemeStorage as ɵcreateMemoryColorSchemeStorage, daysInMonth as ɵdaysInMonth, fieldDescribedBy as ɵfieldDescribedBy, fieldErrorMessageId as ɵfieldErrorMessageId, fieldErrorText as ɵfieldErrorText, fieldShowsError as ɵfieldShowsError, formatIsoDate as ɵformatIsoDate, localIsoDate as ɵlocalIsoDate, parseIsoDate as ɵparseIsoDate, provideBfDocumentReset as ɵprovideBfDocumentReset, uniqueId as ɵuniqueId, validIsoDate as ɵvalidIsoDate };