@bitforgehq/ui 0.3.1 → 0.3.3

package/llms.txt

@@ -80,6 +80,7 @@
 
 ### Navigation
 
+- [bf-app-frame](https://bitforge-ui.web.app/ai/components/app-frame.md): Desktop app frame with skip link, sticky sidebar, narrow header and main content ([docs](https://bitforge-ui.web.app/components/app-frame))
 - [bf-back-button](https://bitforge-ui.web.app/ai/components/back-button.md): Header back button that pops the page stack or falls back to a default route ([docs](https://bitforge-ui.web.app/components/back-button))
 - [bf-breadcrumb](https://bitforge-ui.web.app/ai/components/breadcrumb.md): Desktop breadcrumb trail of links to the current page, with optional collapsing ([docs](https://bitforge-ui.web.app/components/breadcrumb))
 - [li[bfBreadcrumbItem]](https://bitforge-ui.web.app/ai/components/breadcrumb-item.md): One level of a breadcrumb trail: a link, or the current page as text ([docs](https://bitforge-ui.web.app/components/breadcrumb-item))
@@ -92,6 +93,7 @@
 - [bf-pagination](https://bitforge-ui.web.app/ai/components/pagination.md): Previous, next and numbered page buttons for a long list or table ([docs](https://bitforge-ui.web.app/components/pagination))
 - [bf-refresher](https://bitforge-ui.web.app/ai/components/refresher.md): Pull-to-refresh indicator with haptic feedback, native iOS bounce and an Android-style pull ([docs](https://bitforge-ui.web.app/components/refresher))
 - [bf-sidebar](https://bitforge-ui.web.app/ai/components/sidebar.md): Vertical app navigation with brand, grouped links, footer and an icon rail mode ([docs](https://bitforge-ui.web.app/components/sidebar))
+- [bf-sidebar-toggle](https://bitforge-ui.web.app/ai/components/sidebar-toggle.md): Icon button inside a sidebar that collapses it to an icon rail and back ([docs](https://bitforge-ui.web.app/components/sidebar-toggle))
 - [bf-stack-outlet](https://bitforge-ui.web.app/ai/components/stack-outlet.md): Router outlet keeping a live page stack with slide transitions and iOS swipe back ([docs](https://bitforge-ui.web.app/components/stack-outlet))
 - [bf-tab](https://bitforge-ui.web.app/ai/components/tab.md): One tab bar destination with an icon, a label and an optional count badge ([docs](https://bitforge-ui.web.app/components/tab))
 - [bf-tab-bar](https://bitforge-ui.web.app/ai/components/tab-bar.md): Floating pill tab bar for mobile apps with arrow-key selection and count badges ([docs](https://bitforge-ui.web.app/components/tab-bar))
@@ -137,11 +139,14 @@
 - [BF_DEFAULT_VALUES](https://bitforge-ui.web.app/ai/reference/bf_default_values.md): The library's built-in widget defaults, the compact md step everywhere ([docs](https://bitforge-ui.web.app/api/bf_default_values))
 - [BF_DEFAULTS](https://bitforge-ui.web.app/ai/reference/bf_defaults.md): Injection token holding the widget defaults in effect for an injector ([docs](https://bitforge-ui.web.app/api/bf_defaults))
 - [BF_LABELS](https://bitforge-ui.web.app/ai/reference/bf_labels.md): Injection token holding the user-facing strings in effect for an injector ([docs](https://bitforge-ui.web.app/api/bf_labels))
+- [BF_SIDEBAR_STATE_STORAGE](https://bitforge-ui.web.app/ai/reference/bf_sidebar_state_storage.md): Injection token for the store that keeps the collapsed sidebar between visits ([docs](https://bitforge-ui.web.app/api/bf_sidebar_state_storage))
 - [BF_TAB_BAR](https://bitforge-ui.web.app/ai/reference/bf_tab_bar.md): Injection token through which each tab reaches its enclosing tab bar ([docs](https://bitforge-ui.web.app/api/bf_tab_bar))
 - [BF_TAB_BAR_CONTROLLER](https://bitforge-ui.web.app/ai/reference/bf_tab_bar_controller.md): Injection token through which a parent drives the selection and hiding of its tab bar ([docs](https://bitforge-ui.web.app/api/bf_tab_bar_controller))
 - [BF_TAB_LINKS](https://bitforge-ui.web.app/ai/reference/bf_tab_links.md): Injection token that turns a projected tab bar into a navigation of links ([docs](https://bitforge-ui.web.app/api/bf_tab_links))
 - [BfActionDirective](https://bitforge-ui.web.app/ai/reference/bf-action-directive.md): Makes one link or button the click target of a whole card or list row ([docs](https://bitforge-ui.web.app/api/bf-action-directive))
 - [BfAlertVariant](https://bitforge-ui.web.app/ai/reference/bf-alert-variant.md): The four tones of an alert, from neutral information to a danger message ([docs](https://bitforge-ui.web.app/api/bf-alert-variant))
+- [BfAppFrameBreakpoint](https://bitforge-ui.web.app/ai/reference/bf-app-frame-breakpoint.md): The breakpoint where an app frame switches from its header bar to the sidebar ([docs](https://bitforge-ui.web.app/api/bf-app-frame-breakpoint))
+- [BfAppFrameContentWidth](https://bitforge-ui.web.app/ai/reference/bf-app-frame-content-width.md): The maximum width of an app frame's content column, from medium to full ([docs](https://bitforge-ui.web.app/api/bf-app-frame-content-width))
 - [BfAutocapitalize](https://bitforge-ui.web.app/ai/reference/bf-autocapitalize.md): How a phone keyboard capitalises the text typed into a field ([docs](https://bitforge-ui.web.app/api/bf-autocapitalize))
 - [BfAvatarSize](https://bitforge-ui.web.app/ai/reference/bf-avatar-size.md): The three sizes of an avatar, from a list row to a profile header ([docs](https://bitforge-ui.web.app/api/bf-avatar-size))
 - [BfAvatarVariant](https://bitforge-ui.web.app/ai/reference/bf-avatar-variant.md): The four colour schemes of an avatar behind its initials or icon ([docs](https://bitforge-ui.web.app/api/bf-avatar-variant))
@@ -163,6 +168,7 @@
 - [BfDefaults](https://bitforge-ui.web.app/ai/reference/bf-defaults.md): The default height steps of text fields and of actions and choice controls ([docs](https://bitforge-ui.web.app/api/bf-defaults))
 - [BfDefaultsOptions](https://bitforge-ui.web.app/ai/reference/bf-defaults-options.md): The size steps provideBfDefaults sets, each one falling back to the parent ([docs](https://bitforge-ui.web.app/api/bf-defaults-options))
 - [BfDescriptionListLayout](https://bitforge-ui.web.app/ai/reference/bf-description-list-layout.md): The two description list layouts, divided label-value rows or a grid of tiles ([docs](https://bitforge-ui.web.app/api/bf-description-list-layout))
+- [BfEmptyStateHeading](https://bitforge-ui.web.app/ai/reference/bf-empty-state-heading.md): The heading level of an empty state title, one for a whole page ([docs](https://bitforge-ui.web.app/api/bf-empty-state-heading))
 - [BfEmptyStateHeadingLevel](https://bitforge-ui.web.app/ai/reference/bf-empty-state-heading-level.md): The heading level of an empty state title, two for a screen or three ([docs](https://bitforge-ui.web.app/api/bf-empty-state-heading-level))
 - [BfEnterKeyHint](https://bitforge-ui.web.app/ai/reference/bf-enter-key-hint.md): The labels a phone keyboard can put on its Enter key ([docs](https://bitforge-ui.web.app/api/bf-enter-key-hint))
 - [bfFieldControlClass](https://bitforge-ui.web.app/ai/reference/bf-field-control-class.md): The class list that makes a custom control look like a library text field ([docs](https://bitforge-ui.web.app/api/bf-field-control-class))
@@ -184,9 +190,11 @@
 - [BfSegmentedSize](https://bitforge-ui.web.app/ai/reference/bf-segmented-size.md): Former name of the shared size scale for segmented controls, kept until 1.0.0 ([docs](https://bitforge-ui.web.app/api/bf-segmented-size))
 - [BfSegmentOption](https://bitforge-ui.web.app/ai/reference/bf-segment-option.md): One segment of a segmented control with its value, its label and a disabled flag ([docs](https://bitforge-ui.web.app/api/bf-segment-option))
 - [BfSelectOption](https://bitforge-ui.web.app/ai/reference/bf-select-option.md): One choice of a select with its value, its label and a disabled flag ([docs](https://bitforge-ui.web.app/api/bf-select-option))
+- [BfSidebarStateService](https://bitforge-ui.web.app/ai/reference/bf-sidebar-state-service.md): The sidebar's collapsed state, kept in storage between visits of the app ([docs](https://bitforge-ui.web.app/api/bf-sidebar-state-service))
 - [BfSize](https://bitforge-ui.web.app/ai/reference/bf-size.md): The three height steps every sized field and control shares ([docs](https://bitforge-ui.web.app/api/bf-size))
 - [BfSkeletonShape](https://bitforge-ui.web.app/ai/reference/bf-skeleton-shape.md): The three skeleton shapes, text lines, a rectangle or a circle ([docs](https://bitforge-ui.web.app/api/bf-skeleton-shape))
 - [BfSpinnerSize](https://bitforge-ui.web.app/ai/reference/bf-spinner-size.md): The three spinner diameters, from inline text to a page loading state ([docs](https://bitforge-ui.web.app/api/bf-spinner-size))
+- [BfStatAppearance](https://bitforge-ui.web.app/ai/reference/bf-stat-appearance.md): The three stat surfaces, plain, an outlined card or a sunken tile ([docs](https://bitforge-ui.web.app/api/bf-stat-appearance))
 - [BfStatTrend](https://bitforge-ui.web.app/ai/reference/bf-stat-trend.md): The three directions of a stat's delta pill, up, down or no change ([docs](https://bitforge-ui.web.app/api/bf-stat-trend))
 - [BfStatTrendIntent](https://bitforge-ui.web.app/ai/reference/bf-stat-trend-intent.md): Whether a rising or a falling figure is the good news for a stat ([docs](https://bitforge-ui.web.app/api/bf-stat-trend-intent))
 - [BfStatVariant](https://bitforge-ui.web.app/ai/reference/bf-stat-variant.md): The two stat surfaces, plain on its container or an outlined card tile ([docs](https://bitforge-ui.web.app/api/bf-stat-variant))
@@ -199,6 +207,7 @@
 - [BfTableRowKey](https://bitforge-ui.web.app/ai/reference/bf-table-row-key.md): Function that returns the unique string key of one table row ([docs](https://bitforge-ui.web.app/api/bf-table-row-key))
 - [BfTableSort](https://bitforge-ui.web.app/ai/reference/bf-table-sort.md): The column key and direction a table is sorted by, set by its headers ([docs](https://bitforge-ui.web.app/api/bf-table-sort))
 - [BfTableSortDirection](https://bitforge-ui.web.app/ai/reference/bf-table-sort-direction.md): The direction a sorted table column is in, ascending or descending ([docs](https://bitforge-ui.web.app/api/bf-table-sort-direction))
+- [BfTableStack](https://bitforge-ui.web.app/ai/reference/bf-table-stack.md): When a table stacks its rows into cards: never, when narrow, or under touch ([docs](https://bitforge-ui.web.app/api/bf-table-stack))
 - [BfTabLinks](https://bitforge-ui.web.app/ai/reference/bf-tab-links.md): The URLs a router-aware parent gives a tab bar to render its tabs as links ([docs](https://bitforge-ui.web.app/api/bf-tab-links))
 - [BfToggleLabelPosition](https://bitforge-ui.web.app/ai/reference/bf-toggle-label-position.md): Whether a toggle's label sits after or before its switch ([docs](https://bitforge-ui.web.app/api/bf-toggle-label-position))
 - [bfValidationMessage](https://bitforge-ui.web.app/ai/reference/bf-validation-message.md): Turns one validation error into the text a form field shows under it ([docs](https://bitforge-ui.web.app/api/bf-validation-message))
@@ -206,6 +215,7 @@
 - [provideBfColorScheme](https://bitforge-ui.web.app/ai/reference/provide-bf-color-scheme.md): Applies the stored colour scheme choice to html, for desktop web apps ([docs](https://bitforge-ui.web.app/api/provide-bf-color-scheme))
 - [provideBfDefaults](https://bitforge-ui.web.app/ai/reference/provide-bf-defaults.md): Sets the default field and control sizes for an app or a sub-tree ([docs](https://bitforge-ui.web.app/api/provide-bf-defaults))
 - [provideBfLabels](https://bitforge-ui.web.app/ai/reference/provide-bf-labels.md): Replaces built-in strings for an app or a sub-tree, such as a translation ([docs](https://bitforge-ui.web.app/api/provide-bf-labels))
+- [provideBfSidebarState](https://bitforge-ui.web.app/ai/reference/provide-bf-sidebar-state.md): Remembers the collapsed sidebar between visits, for desktop web apps ([docs](https://bitforge-ui.web.app/api/provide-bf-sidebar-state))
 
 ### @bitforgehq/ui/overlay
 
@@ -409,6 +419,7 @@
 - [BfRadioGroupHarness](https://bitforge-ui.web.app/ai/reference/bf-radio-group-harness.md): Test harness for the radio group: reads its options and selects one by label ([docs](https://bitforge-ui.web.app/api/bf-radio-group-harness))
 - [BfSegmentedHarness](https://bitforge-ui.web.app/ai/reference/bf-segmented-harness.md): Test harness for the segmented control: reads its segments and selects one ([docs](https://bitforge-ui.web.app/api/bf-segmented-harness))
 - [BfSelectHarness](https://bitforge-ui.web.app/ai/reference/bf-select-harness.md): Test harness for the select: reads its label and options and picks one ([docs](https://bitforge-ui.web.app/api/bf-select-harness))
+- [BfSidebarToggleHarness](https://bitforge-ui.web.app/ai/reference/bf-sidebar-toggle-harness.md): Test harness for a sidebar toggle: reads and flips the collapsed sidebar ([docs](https://bitforge-ui.web.app/api/bf-sidebar-toggle-harness))
 - [BfSidePanelHarness](https://bitforge-ui.web.app/ai/reference/bf-side-panel-harness.md): Test harness for a side panel: its title, its close button and its state ([docs](https://bitforge-ui.web.app/api/bf-side-panel-harness))
 - [BfTabGroupHarness](https://bitforge-ui.web.app/ai/reference/bf-tab-group-harness.md): Test harness for the tab group: reads its tabs and panel and selects a tab ([docs](https://bitforge-ui.web.app/api/bf-tab-group-harness))
 - [BfTableHarness](https://bitforge-ui.web.app/ai/reference/bf-table-harness.md): Test harness for the data table: reads rows and cells, sorts and selects rows ([docs](https://bitforge-ui.web.app/api/bf-table-harness))

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bitforgehq/ui",
-  "version": "0.3.1",
+  "version": "0.3.3",
   "description": "Bitforge UI: Angular 22 widgets (Meadow Sage palette with an indigo default primary to override, Tailwind v4, signals-first) and, from v0.2, a Capacitor app shell.",
   "license": "MIT",
   "repository": {

package/theme.css

@@ -352,3 +352,16 @@
 .dark .bf-overlay-backdrop {
   background: rgb(0 0 0 / 0.6);
 }
+
+/* ---------- Stacked table labels ---------- */
+/*
+ * The column label a stacked `bf-table` cell shows before its value (`before:content-data-label`
+ * behind a stack variant): the cell's `data-label`, with empty alternative text, so assistive
+ * technology reads the header association and not the label twice. A named utility, not
+ * `content-[attr(data-label)_/_""]`: the library build escapes the quotes of a class written in a
+ * string (`\"\"`), and Tailwind then builds the rule for a class no element carries.
+ */
+@utility content-data-label {
+  --tw-content: attr(data-label) / '';
+  content: var(--tw-content);
+}

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

@@ -1643,6 +1643,57 @@ export declare class BfThemeMenuButtonComponent {
     "changed": "changed";
   }, never, ["[bfSlot=icon]"], true, never>;
 }
+/**
+ * The collapse button of a `bf-sidebar`: a text icon button placed inside the sidebar (usually in
+ * its header or footer) that flips the sidebar between full width and an icon rail. Its name and
+ * tooltip say what the next press does ("Collapse sidebar", "Expand sidebar"), `aria-expanded`
+ * follows the sidebar and `aria-controls` points at its `nav`. It shows the `collapse-icon` slot
+ * while expanded and the `expand-icon` slot while collapsed. It reads and writes the sidebar's
+ * `collapsed` model, so `[(collapsed)]` on the sidebar sees every press. Outside a `bf-sidebar`
+ * (in a `bf-top-nav`, or on its own) it renders nothing.
+ *
+ * @example
+ * <bf-sidebar [(collapsed)]="sidebarState.collapsed">
+ *   <bf-sidebar-toggle bfSlot="footer">
+ *     <bf-icon bfSlot="collapse-icon" [icon]="PanelLeftClose" />
+ *     <bf-icon bfSlot="expand-icon" [icon]="PanelLeftOpen" />
+ *   </bf-sidebar-toggle>
+ * </bf-sidebar>
+ * @summary Icon button inside a sidebar that collapses it to an icon rail and back
+ * @category Navigation
+ * @since 0.3.2
+ * @slot collapse-icon The icon shown while the sidebar is expanded (a panel closing).
+ * @slot expand-icon The icon shown while the sidebar is an icon rail (a panel opening).
+ */
+export declare class BfSidebarToggleComponent {
+  private readonly defaults;
+  private readonly labels;
+  private readonly host;
+  /** The enclosing sidebar's context; null outside a sidebar (a top nav never collapses). */
+  protected readonly nav: import("@bitforgehq/ui").ɵBfNavHost | null;
+  /** Height step: sm 32, md 40, lg 48 px (square); unset follows `provideBfDefaults()`
+   * (`controlSize`, `md` by default). */
+  readonly size: import("@angular/core").InputSignal<BfSize | undefined>;
+  /** Whether the sidebar is an icon rail now. */
+  protected readonly collapsed: import("@angular/core").Signal<boolean>;
+  /** What the next press does: `sidebarExpand` while collapsed, else `sidebarCollapse`. */
+  protected readonly name: import("@angular/core").Signal<string>;
+  protected readonly hostClasses: import("@angular/core").Signal<string>;
+  protected readonly classes: import("@angular/core").Signal<string>;
+  /**
+   * Flips the sidebar between full width and an icon rail.
+   * @internal
+   */
+  toggle(): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<BfSidebarToggleComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<BfSidebarToggleComponent, "bf-sidebar-toggle", never, {
+    "size": {
+      "alias": "size";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, ["[bfSlot=collapse-icon]", "[bfSlot=expand-icon]"], true, never>;
+}
 /**
  * Layout of a side panel opened with `BfSidePanelService`: a title row with a close button, a
  * scrolling body and a footer of actions kept at the bottom. The panel is labelled by the title,

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

@@ -495,7 +495,7 @@ export declare class BfDesktopToastHarness extends ComponentHarness {
 /**
  * Harness for `bf-table`. It works by column header text and row position, so a test never needs
  * the column keys or the row keys (except `getSort()`, which returns the column's `key`, as the
- * `sort` model holds it).
+ * `sort` model holds it). It reads and drives a stacked table (`stack`) the same way.
  *
  * @example
  * const tasks = await loader.getHarness(BfTableHarness.with({ label: 'Tasks' }));
@@ -512,6 +512,7 @@ export declare class BfTableHarness extends ComponentHarness {
   private readonly rows;
   private readonly selectAllBox;
   private readonly rowBoxes;
+  private readonly sortSelect;
   /**
    * A predicate for a table with the given label.
    * @param filters The label (text or pattern) and the CDK's selector and ancestor filters.
@@ -551,6 +552,19 @@ export declare class BfTableHarness extends ComponentHarness {
    * @returns The sort, `null` while no column is sorted.
    */
   getSort(): Promise<BfTableSort | null>;
+  /**
+   * The Sort by select in a stacked table's bar: its first option, Not sorted (`tableSortNone`),
+   * sets `sort` to null and shows while it is; then each sortable column ascending and descending.
+   *
+   * @example
+   * const sortBy = await tasks.getSortSelect();
+   * await sortBy?.selectOption('Hours, descending');
+   * expect(await tasks.getSort()).toEqual({ column: 'hours', direction: 'descending' });
+   * @returns The select's harness; `null` when the table cannot stack (`stack="never"`) or has no
+   * sortable column.
+   * @since 0.3.3
+   */
+  getSortSelect(): Promise<BfSelectHarness | null>;
   /**
    * Checks one row's checkbox, as a user would; a selected row stays selected. Throws when the
    * table is not selectable or the row does not exist.
@@ -1239,4 +1253,38 @@ export declare class BfChartHarness extends ComponentHarness {
   showData(): Promise<string[][]>;
   private legendButton;
 }
+/**
+ * Harness for `bf-sidebar-toggle`, the button that collapses a `bf-sidebar` to an icon rail. Its
+ * `label` filter matches the button's name ("Collapse sidebar" or "Expand sidebar").
+ *
+ * @example
+ * const toggle = await loader.getHarness(BfSidebarToggleHarness);
+ * await toggle.toggle();
+ * expect(await toggle.isExpanded()).toBe(false);
+ * @summary Test harness for a sidebar toggle: reads and flips the collapsed sidebar
+ * @since 0.3.2
+ */
+export declare class BfSidebarToggleHarness extends ComponentHarness {
+  /** The host element's selector. */
+  static hostSelector: string;
+  private readonly button;
+  /**
+   * A predicate for a sidebar toggle with the given name.
+   * @param filters The name (text or pattern) and the CDK's selector and ancestor filters.
+   * @returns The predicate for `getHarness()` and friends.
+   */
+  static with(filters?: BfHarnessFilters): HarnessPredicate<BfSidebarToggleHarness>;
+  /**
+   * The button's name, which says what the next press does.
+   * @returns The `aria-label`.
+   */
+  getLabel(): Promise<string>;
+  /**
+   * Whether the sidebar is at full width (`aria-expanded`).
+   * @returns True while expanded, false while it is an icon rail.
+   */
+  isExpanded(): Promise<boolean>;
+  /** Flips the sidebar with a click. */
+  toggle(): Promise<void>;
+}
 export type { BfHarnessFilters, BfJsdomShimOptions, BfTestingOptions };