@bitforgehq/ui 0.3.1 → 0.3.2

package/types/bitforgehq-ui.d.ts

@@ -236,6 +236,21 @@ interface BfLabels {
    * @default 'Select all rows'
    */
   readonly tableSelectAll: string;
+  /**
+   * The label of a stacked bf-table's sort select.
+   * @default 'Sort by'
+   */
+  readonly tableSortBy: string;
+  /**
+   * A stacked bf-table's sort option for a column in ascending order.
+   * @default (column) => `${column}, ascending`
+   */
+  readonly tableSortAscending: (column: string) => string;
+  /**
+   * A stacked bf-table's sort option for a column in descending order.
+   * @default (column) => `${column}, descending`
+   */
+  readonly tableSortDescending: (column: string) => string;
   /**
    * bf-theme-switch's and bf-theme-menu-button's name without a label.
    * @default 'Theme'
@@ -276,6 +291,21 @@ interface BfLabels {
    * @default (count) => `${count} new`
    */
   readonly navBadge: (count: number) => string;
+  /**
+   * bf-sidebar-toggle's name and tooltip while the sidebar is expanded.
+   * @default 'Collapse sidebar'
+   */
+  readonly sidebarCollapse: string;
+  /**
+   * bf-sidebar-toggle's name and tooltip while the sidebar is an icon rail.
+   * @default 'Expand sidebar'
+   */
+  readonly sidebarExpand: string;
+  /**
+   * bf-app-frame's skip link, the first stop of the tab order, which moves focus to the content.
+   * @default 'Skip to main content'
+   */
+  readonly skipToContent: string;
   /**
    * bf-pagination's navigation name.
    * @default 'Pagination'
@@ -507,9 +537,10 @@ 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`, `tableSelectAll`, `theme`,
- * `themeSystem`, `themeLight`, `themeDark`, `breadcrumb`, `breadcrumbExpand`, `navigation`,
- * `navBadge`, `pagination`, `previousPage`, `nextPage`, `pageOf`, `goToPage`, `tabGroup`,
+ * (`loading`, `dismiss`, `tabBar`, `tabBadge`, `back`, `refreshing`, `tableSelectAll`, `tableSortBy`,
+ * `tableSortAscending`, `tableSortDescending`, `theme`, `themeSystem`, `themeLight`, `themeDark`,
+ * `breadcrumb`, `breadcrumbExpand`, `navigation`, `navBadge`, `sidebarCollapse`, `sidebarExpand`,
+ * `skipToContent`, `pagination`, `previousPage`, `nextPage`, `pageOf`, `goToPage`, `tabGroup`,
  * `calendarPreviousMonth`, `calendarNextMonth`, `calendarChooseMonth`, `calendarChooseYear`,
  * `statTrendUp`, `statTrendDown`, `statTrendFlat`, `comboboxEmpty`, `comboboxRemove`,
  * `dateInputDay`, `dateInputMonth`, `dateInputYear`, `dateInputOpenCalendar`, `dateInputInvalid`,
@@ -542,6 +573,9 @@ type BfColorSchemeStorage = Pick<Storage, 'getItem' | 'setItem'>;
  * `ɵcreateMemoryColorSchemeStorage`.
  */
 declare function createMemoryColorSchemeStorage(): BfColorSchemeStorage;
+/** `localStorage`, or `null` where there is none or reading it throws (storage disabled, SSR).
+ * Internal: `BF_SIDEBAR_STATE_STORAGE` (`sidebar-state.ts`) falls back the same way. */
+declare function browserStorage(): Storage | null;
 /**
  * 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
@@ -608,6 +642,61 @@ export declare class BfColorSchemeService {
  * @since 0.3.1
  */
 export declare function provideBfColorScheme(): EnvironmentProviders;
+/**
+ * Where `BfSidebarStateService` keeps whether the sidebar is collapsed (the key
+ * `bf-sidebar-collapsed`, `'true'` or `'false'`): `localStorage` when it is available, otherwise
+ * an in-memory map. Provide another store (`sessionStorage`, or an in-memory one in tests) to keep
+ * it elsewhere.
+ *
+ * @example
+ * providers: [{ provide: BF_SIDEBAR_STATE_STORAGE, useValue: sessionStorage }]
+ * @summary Injection token for the store that keeps the collapsed sidebar between visits
+ * @since 0.3.2
+ */
+export declare const BF_SIDEBAR_STATE_STORAGE: InjectionToken<Pick<Storage, "getItem" | "setItem">>;
+/**
+ * Whether the app's `bf-sidebar` is collapsed to an icon rail, remembered between visits: the app
+ * binds the sidebar's `[(collapsed)]` to `sidebarState.collapsed`. With `provideBfSidebarState()`
+ * every change is stored in `BF_SIDEBAR_STATE_STORAGE` under `bf-sidebar-collapsed`; without it
+ * the signal still holds the state but nothing is written. Storage is read in the browser only, so a
+ * server render starts expanded and writes nothing. The widgets never inject it.
+ *
+ * @example
+ * protected readonly sidebarState = inject(BfSidebarStateService);
+ * // <bf-sidebar [(collapsed)]="sidebarState.collapsed">…</bf-sidebar>
+ * @summary The sidebar's collapsed state, kept in storage between visits of the app
+ * @since 0.3.2
+ */
+export declare class BfSidebarStateService {
+  private readonly storage;
+  private readonly injector;
+  private readonly browser;
+  /** Whether the sidebar is collapsed: the stored state in the browser, else false. Bind it
+   * two-way to `bf-sidebar`'s `collapsed`. */
+  readonly collapsed: import("@angular/core").WritableSignal<boolean>;
+  private claimed;
+  /**
+   * Starts storing every change, once: called by `provideBfSidebarState()`. Nothing is written on
+   * the server.
+   * @internal
+   */
+  claimStorage(): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<BfSidebarStateService, never>;
+  static ɵprov: i0.ɵɵInjectableDeclaration<any>;
+}
+/**
+ * Lets `BfSidebarStateService` remember the collapsed sidebar: it stores every change of its
+ * `collapsed` signal (key `bf-sidebar-collapsed`, `localStorage` in the browser), so the app opens
+ * with the sidebar as the user left it. Add it to `ApplicationConfig.providers` and bind the
+ * sidebar's `[(collapsed)]` to `sidebarState.collapsed`.
+ *
+ * @example
+ * export const appConfig: ApplicationConfig = { providers: [provideBfSidebarState()] };
+ * @returns The providers that make the service store the state and start it with the app.
+ * @summary Remembers the collapsed sidebar between visits, for desktop web apps
+ * @since 0.3.2
+ */
+export declare function provideBfSidebarState(): EnvironmentProviders;
 /**
  * The diameter of a `bf-spinner`: sm, md or lg.
  *
@@ -3474,6 +3563,15 @@ export declare class BfAlertComponent {
  * @since 0.3.0
  */
 type BfEmptyStateHeadingLevel = 2 | 3;
+/**
+ * The heading level a `bf-empty-state` title takes: a `BfEmptyStateHeadingLevel`, or `1` when the
+ * empty state is the page itself (a not-found or no-access page). A new type, so `Record`s over
+ * the released `BfEmptyStateHeadingLevel` keep compiling.
+ *
+ * @summary The heading level of an empty state title, one for a whole page
+ * @since 0.3.2
+ */
+type BfEmptyStateHeading = BfEmptyStateHeadingLevel | 1;
 /**
  * Placeholder for a screen or list with nothing in it yet: an icon tile, a title, one sentence,
  * and the action that fills it.
@@ -3494,8 +3592,8 @@ export declare class BfEmptyStateComponent {
   readonly title: import("@angular/core").InputSignal<string>;
   /** One sentence on how to fill it. */
   readonly description: import("@angular/core").InputSignal<string>;
-  /** Heading level of the title so the empty state fits the page outline. */
-  readonly headingLevel: import("@angular/core").InputSignal<BfEmptyStateHeadingLevel>;
+  /** Heading level of the title so the empty state fits the page outline; 1 when it is the page. */
+  readonly headingLevel: import("@angular/core").InputSignal<BfEmptyStateHeading>;
   static ɵfac: i0.ɵɵFactoryDeclaration<BfEmptyStateComponent, never>;
   static ɵcmp: i0.ɵɵComponentDeclaration<BfEmptyStateComponent, "bf-empty-state", never, {
     "title": {
@@ -3683,7 +3781,7 @@ export declare class BfTabComponent {
   /** `aria-current` of the link form: `page` while the active tab's root page is shown, `true`
    * while a child page of it is (the tab is the current section, not the current page), else
    * `null`. */
-  readonly current: import("@angular/core").Signal<"page" | "true" | null>;
+  readonly current: import("@angular/core").Signal<"true" | "page" | null>;
   /** The badge as announced after the label in the accessible name when `badge()` is set. */
   readonly badgeAnnouncement: import("@angular/core").Signal<string | null>;
   /**
@@ -4153,7 +4251,7 @@ export declare class BfPageHeaderComponent {
  * @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.
+ * @slot actions The trailing actions, kept together at the inline end of the row, beside the status.
  */
 export declare class BfToolbarComponent {
   /** The group's accessible name, such as "Project filters"; unnamed when empty. */
@@ -4247,6 +4345,15 @@ type BfTableAlign = 'start' | 'end';
  * @since 0.3.1
  */
 type BfTableSortDirection = 'ascending' | 'descending';
+/**
+ * When a `bf-table` renders each row as a card of label/value pairs: `never` (the default),
+ * `narrow` while the table is narrower than 36rem (a container query), or `coarse` under a coarse
+ * pointer at any width.
+ *
+ * @summary When a table stacks its rows into cards: never, when narrow, or under touch
+ * @since 0.3.2
+ */
+type BfTableStack = 'never' | 'narrow' | 'coarse';
 /**
  * One column of a `bf-table`: the row property it shows, its header and how it behaves.
  *
@@ -4296,7 +4403,8 @@ interface BfTableEntry<T> {
 /**
  * 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`.
+ * filters itself; the consumer sorts the rows in a `computed()` from `sort`. With `stack` it
+ * renders each row as a tile of label/value pairs in a narrow space or under touch.
  *
  * @example
  * <bf-table label="Tasks" [rows]="sorted()" [columns]="columns" [(sort)]="sort" selectable [(selection)]="selected">
@@ -4331,11 +4439,16 @@ export declare class BfTableComponent<T = unknown> {
   /** 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;
+  /** When the rows render as cards of label/value pairs: `never`, `narrow` (the table is
+   * narrower than 36rem) or `coarse` (under a coarse pointer, at any width). */
+  readonly stack: import("@angular/core").InputSignal<BfTableStack>;
+  protected readonly labels: import("@bitforgehq/ui").BfLabels;
   private readonly defaults;
   private readonly table;
   private readonly cells;
   private readonly id;
+  /** The caption's id, which names the table while it can stack. */
+  protected readonly captionId: string;
   /** 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. */
@@ -4351,19 +4464,36 @@ export declare class BfTableComponent<T = unknown> {
   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;
+  /** Whether the table can stack its rows (any `stack` but `never`); it then sets explicit
+   * table roles, because some browsers drop a table's semantics once its display changes. */
+  protected readonly stacks: import("@angular/core").Signal<boolean>;
+  /** The Sort by select's options: each sortable column ascending and descending. */
+  protected readonly sortOptions: import("@angular/core").Signal<BfSelectOption<string>[]>;
+  /** The Sort by select's value: the option of `sort`, `null` while unsorted. */
+  protected readonly sortValue: import("@angular/core").Signal<string | null>;
+  protected readonly hostClasses: import("@angular/core").Signal<string>;
+  protected readonly stackBarClasses: import("@angular/core").Signal<string>;
+  protected readonly tableClasses: import("@angular/core").Signal<string>;
+  protected readonly headClasses: import("@angular/core").Signal<string>;
+  protected readonly bodyGroupClasses: import("@angular/core").Signal<string>;
+  protected readonly sortButtonClasses: import("@angular/core").Signal<string>;
+  protected readonly notStackedClasses: import("@angular/core").Signal<string>;
+  protected readonly stackedOnlyClasses: import("@angular/core").Signal<string>;
+  protected readonly stackEmptyClasses: import("@angular/core").Signal<string>;
   protected readonly selectHeadClasses: import("@angular/core").Signal<string>;
   protected readonly selectBodyClasses: import("@angular/core").Signal<string>;
+  /** A body cell's height step, with the coarse-pointer height unless the table stacks there. */
+  private readonly bodyHeight;
   /**
    * The classes of a column's header cell.
    * @internal
    */
-  headClasses(column: BfTableColumn): string;
+  headCellClasses(column: BfTableColumn): string;
   /**
-   * The classes of a column's body cell.
+   * The classes of a column's body cell; the first one is a stacked tile's title.
    * @internal
    */
-  bodyClasses(column: BfTableColumn): string;
+  bodyClasses(column: BfTableColumn, first: boolean): string;
   /**
    * The classes of the body row with this key.
    * @internal
@@ -4395,6 +4525,11 @@ export declare class BfTableComponent<T = unknown> {
    * @param key The column's `key`.
    */
   sortBy(key: string): void;
+  /**
+   * Sorts by a Sort by option (`<key>:<direction>`) of a stacked table.
+   * @internal
+   */
+  sortFromOption(value: 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.
@@ -4459,6 +4594,11 @@ export declare class BfTableComponent<T = unknown> {
       "required": false;
       "isSignal": true;
     };
+    "stack": {
+      "alias": "stack";
+      "required": false;
+      "isSignal": true;
+    };
   }, {
     "sort": "sortChange";
     "selection": "selectionChange";
@@ -4543,6 +4683,15 @@ export declare class BfDescriptionItemComponent {
  * @since 0.3.1
  */
 type BfStatVariant = 'plain' | 'card';
+/**
+ * The surface of a `bf-stat`, as its `variant` input takes it: a `BfStatVariant` or tile (a
+ * sunken, borderless tile for a stats row inside a raised card). A new type, so `Record`s over
+ * the released `BfStatVariant` keep compiling.
+ *
+ * @summary The three stat surfaces, plain, an outlined card or a sunken tile
+ * @since 0.3.2
+ */
+type BfStatAppearance = BfStatVariant | 'tile';
 /**
  * The direction of a `bf-stat` delta: up, down or flat (no change).
  *
@@ -4566,6 +4715,7 @@ type BfStatTrendIntent = 'positive' | 'negative';
  *
  * @example
  * <bf-stat label="Revenue" value="€48,200" delta="+12%" trend="up" />
+ * <bf-stat label="Orders" value="1,204" variant="tile" />
  * <bf-stat label="Cook time" value="30 min" variant="card">
  *   <bf-icon bfSlot="icon" [icon]="Flame" />
  *   Oven at 200 °C
@@ -4581,8 +4731,8 @@ export declare class BfStatComponent {
   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>;
+  /** Surface: plain (default) on its container, card (an outlined tile) or tile (sunken, no border). */
+  readonly variant: import("@angular/core").InputSignal<BfStatAppearance>;
   /** 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. */
@@ -4592,6 +4742,8 @@ export declare class BfStatComponent {
   private readonly labels;
   readonly classes: import("@angular/core").Signal<string>;
   /** @internal */
+  readonly iconTileClasses: import("@angular/core").Signal<string>;
+  /** @internal */
   readonly deltaClasses: import("@angular/core").Signal<string>;
   /** @internal */
   readonly markClasses: import("@angular/core").Signal<string>;
@@ -4760,9 +4912,9 @@ export declare class BfBreadcrumbItemComponent {
 /**
  * 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.
+ * `collapsed` turns it into an icon rail: put a `bf-sidebar-toggle` (`@bitforgehq/ui/overlay`) in
+ * it, or bind `[(collapsed)]` to your own button. 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">
@@ -4786,9 +4938,13 @@ export declare class BfSidebarComponent {
    * ("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. */
+   * screen readers and becomes a tooltip. A `bf-sidebar-toggle` inside flips it; bind
+   * `[(collapsed)]` to keep it in your state. */
   readonly collapsed: import("@angular/core").ModelSignal<boolean>;
   private readonly labels;
+  /** The `nav` element's id, which `bf-sidebar-toggle` points `aria-controls` at.
+   * @internal */
+  readonly navId: string;
   /** The rendered navigation name: `label`, else the `navigation` label. */
   protected readonly name: import("@angular/core").Signal<string>;
   private readonly width;
@@ -4934,6 +5090,86 @@ export declare class BfNavItemComponent {
     };
   }, {}, never, ["[bfSlot=icon]", "*"], true, never>;
 }
+/**
+ * The viewport width from which `bf-app-frame` shows its sidebar column instead of the narrow
+ * header bar: Tailwind's `md` (768 px) or `lg` (1024 px).
+ *
+ * @summary The breakpoint where an app frame switches from its header bar to the sidebar
+ * @since 0.3.2
+ */
+type BfAppFrameBreakpoint = 'md' | 'lg';
+/**
+ * The maximum width of `bf-app-frame`'s content column: `md` 48rem, `lg` 64rem, `xl` 80rem, or
+ * `full` for no limit.
+ *
+ * @summary The maximum width of an app frame's content column, from medium to full
+ * @since 0.3.2
+ */
+type BfAppFrameContentWidth = 'md' | 'lg' | 'xl' | 'full';
+/**
+ * The frame of a desktop web app: a skip link, a sticky full-height sidebar column from the
+ * breakpoint up, a header bar with the brand, the narrow-screen menu and actions below it, and
+ * the `main` landmark with a content column of a set maximum width.
+ *
+ * @example
+ * <bf-app-frame>
+ *   <bf-sidebar bfSlot="sidebar" label="Main">…</bf-sidebar>
+ *   <span bfSlot="brand" class="text-heading">Atlas</span>
+ *   <bf-menu-button bfSlot="menu" [menu]="navMenu">Sections</bf-menu-button>
+ *   <router-outlet />
+ * </bf-app-frame>
+ * @summary Desktop app frame with skip link, sticky sidebar, narrow header and main content
+ * @category Navigation
+ * @since 0.3.2
+ * @slot sidebar The `bf-sidebar`, shown from the breakpoint up; it fills the column's height.
+ * @slot brand The app's name or logo in the narrow header bar.
+ * @slot menu The narrow-screen navigation: a `bf-menu-button` of `a[bfMenuItem]` links.
+ * @slot actions End actions of the narrow header bar, such as the theme menu.
+ * @slot default The page: what the router shows, inside the `main` landmark.
+ */
+export declare class BfAppFrameComponent {
+  /** The viewport width from which the sidebar column replaces the narrow header bar. */
+  readonly breakpoint: import("@angular/core").InputSignal<BfAppFrameBreakpoint>;
+  /** The maximum width of the content column (`md` 48rem, `lg` 64rem, `xl` 80rem, `full`). */
+  readonly contentWidth: import("@angular/core").InputSignal<BfAppFrameContentWidth>;
+  /** The id of the `main` landmark, the skip link's target; generated when left out. */
+  readonly mainId: import("@angular/core").InputSignal<string>;
+  protected readonly labels: import("@bitforgehq/ui").BfLabels;
+  private readonly host;
+  private readonly main;
+  /** True when the frame sits inside another `main` landmark, so its own drops the role. */
+  protected readonly nested: import("@angular/core").WritableSignal<boolean>;
+  protected readonly sidebarClasses: import("@angular/core").Signal<string>;
+  protected readonly headerClasses: import("@angular/core").Signal<string>;
+  protected readonly paddingClasses: import("@angular/core").Signal<string>;
+  protected readonly widthClasses: import("@angular/core").Signal<string>;
+  constructor();
+  /**
+   * Moves focus to the content without following the href (see the template comment).
+   *
+   * @internal
+   * @param event The skip link's click (also fired by Enter).
+   */
+  skip(event: Event): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<BfAppFrameComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<BfAppFrameComponent, "bf-app-frame", never, {
+    "breakpoint": {
+      "alias": "breakpoint";
+      "required": false;
+      "isSignal": true;
+    };
+    "contentWidth": {
+      "alias": "contentWidth";
+      "required": false;
+      "isSignal": true;
+    };
+    "mainId": {
+      "alias": "mainId";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, ["[bfSlot=sidebar]", "[bfSlot=brand]", "[bfSlot=menu]", "[bfSlot=actions]", "*"], true, never>;
+}
 /**
  * The shape of a `bf-skeleton`: text lines, a rectangle (an image, a chart, a field) or a circle
  * (an avatar).
@@ -5579,6 +5815,26 @@ declare const COARSE_HIT_BASE = "pointer-coarse:after:absolute pointer-coarse:af
  * (1.5 px border) position the ::after inside the border, so their inset adds the border back.
  */
 declare const PILL_HIT: Record<BfSize, Record<'plain' | 'bordered', string>>;
+/** Where a nav item sits: a vertical sidebar or a horizontal top row. */
+type BfNavLayout = 'sidebar' | 'top';
+/** What `a[bfNavItem]`, `bf-nav-group` and `bf-sidebar-toggle` read from the enclosing `bf-sidebar`
+ * or `bf-top-nav`. */
+interface BfNavHost {
+  /** The host's layout: full-width rows in a sidebar, inline items in a top row. */
+  readonly layout: BfNavLayout;
+  /** True while the sidebar is collapsed to an icon rail; always false in a top nav. */
+  readonly collapsed: Signal<boolean>;
+  /** The id of the host's `nav` element (for a toggle's `aria-controls`); null in a top nav. */
+  readonly navId: string | null;
+  /** Writes the sidebar's `collapsed` model, as a user change; does nothing in a top nav. */
+  setCollapsed(collapsed: boolean): void;
+}
+/**
+ * Provided by `bf-sidebar` and `bf-top-nav`, so their items and groups follow the layout and the
+ * collapsed state without the item files importing the container files. `bf-sidebar-toggle`
+ * (`@bitforgehq/ui/overlay`) reads and flips the state through it, as the internal `ɵBF_NAV`.
+ */
+declare const BF_NAV: InjectionToken<BfNavHost>;
 /**
  * Removes what overlays and themes leave on a document: the `dark` and `cdk-global-scrollblock`
  * classes on `<html>`, `inert` on the children of `<body>`, and every child of a
@@ -5588,4 +5844,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 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 };
+export { type BfAlertVariant, type BfAppFrameBreakpoint, type BfAppFrameContentWidth, 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 BfEmptyStateHeading, 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 BfStatAppearance, 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 BfTableStack, type BfToggleLabelPosition, type BfValidationMessages, BUTTON_CLASSES as ɵBF_BUTTON_CLASSES, ICON_BUTTON_CLASSES as ɵBF_ICON_BUTTON_CLASSES, BF_NAV as ɵBF_NAV, type BfNavHost as ɵBfNavHost, 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 };