@bitforgehq/ui 0.3.2 → 0.3.3

package/llms-full.txt

@@ -2982,8 +2982,8 @@ interface Destination {
  * The bf-app-frame overview.
  *
  * Live demo of `bf-app-frame` in a box of fixed height: one destinations array drives the
- * `bf-sidebar` (from `md` up) and the narrow header's `bf-menu-button`; the header also holds the
- * brand and a notifications action. Tab into the frame to reveal its skip link; Enter moves focus
+ * `bf-sidebar` (from `md` up) and the narrow header's `bf-menu-button`, at the header's inline
+ * start; the brand follows it, and a notifications action sits at the end. Tab into the frame to reveal its skip link; Enter moves focus
  * to the content. The result line reports it.
  */
 @Component({
@@ -3023,11 +3023,11 @@ interface Destination {
           }
         </bf-sidebar>
 
-        <span bfSlot="brand" class="text-heading">Atlas</span>
         <bf-menu-button bfSlot="menu" variant="text" [menu]="navMenu">
           <bf-icon bfSlot="icon-start" [icon]="menu" />
           Sections
         </bf-menu-button>
+        <span bfSlot="brand" class="text-heading">Atlas</span>
         <bf-icon-button
           bfSlot="actions"
           variant="text"
@@ -3094,7 +3094,7 @@ export class AppFrameOverviewExampleComponent {
 ## Overview
 
 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
+breakpoint up, a header bar with the narrow-screen menu, the brand and actions below it, and
 the `main` landmark with a content column of a set maximum width.
 
 The frame around a desktop web app's pages: a skip link, a [`bf-sidebar`](https://bitforge-ui.web.app/components/sidebar) column that sticks to the viewport at its full height from a breakpoint up, a header bar below the breakpoint with the brand, the narrow-screen [`bf-menu-button`](https://bitforge-ui.web.app/components/menu-button) and end actions, and the `main` landmark with a content column of a set maximum width. It replaces the `hidden md:flex` sidebar, the `md:hidden` menu button and the padded `main` an app would otherwise build by hand. The frame imports no overlay and never reads the router: the menu is your own `bf-menu-button`, projected into a slot.
@@ -3105,7 +3105,7 @@ Use `bf-app-frame` once, at the root of a desktop web app whose top-level destin
 
 ## Slots and layout
 
-Put the `bf-sidebar` in `bfSlot="sidebar"`, the app's name or logo in `bfSlot="brand"`, the narrow-screen `bf-menu-button` of `a[bfMenuItem]` router links in `bfSlot="menu"` and end actions (the theme menu, the account) in `bfSlot="actions"`; everything else is the page. From the breakpoint up the sidebar column sits at the inline start, `sticky top-0` and `h-dvh` tall, and the `bf-sidebar` inside fills it and scrolls its own destinations; the header bar is hidden. Below it the sidebar column is hidden and the header bar (`surface`, a bottom border, sticky at the top) shows the brand at the start, then the menu, and the actions at the end. Keep the brand in the sidebar's own `header` slot too, for the wide layout.
+Put the `bf-sidebar` in `bfSlot="sidebar"`, the app's name or logo in `bfSlot="brand"`, the narrow-screen `bf-menu-button` of `a[bfMenuItem]` router links in `bfSlot="menu"` and end actions (the theme menu, the account) in `bfSlot="actions"`; everything else is the page. From the breakpoint up the sidebar column sits at the inline start, `sticky top-0` and `h-dvh` tall, and the `bf-sidebar` inside fills it and scrolls its own destinations; the header bar is hidden. Below it the sidebar column is hidden and the header bar (`surface`, a bottom border, sticky at the top) shows the menu at the inline start, then the brand, and the actions at the end: the top app bar convention, and the menu comes first in the tab order too. The order is fixed, whatever order the slots have in your template. Keep the brand in the sidebar's own `header` slot too, for the wide layout.
 
 ## Breakpoint and content width
 
@@ -3242,8 +3242,8 @@ The skip link is a native `<a>` with an href to the main landmark and is the fir
 ## Slots
 
 - `sidebar`: The `bf-sidebar`, shown from the breakpoint up; it fills the column's height.
-- `brand`: The app's name or logo in the narrow header bar.
-- `menu`: The narrow-screen navigation: a `bf-menu-button` of `a[bfMenuItem]` links.
+- `menu`: The narrow-screen navigation: a `bf-menu-button` of `a[bfMenuItem]` links, at the header bar's inline start.
+- `brand`: The app's name or logo in the narrow header bar, after the menu.
 - `actions`: End actions of the narrow header bar, such as the theme menu.
 - `default`: The page: what the router shows, inside the `main` landmark.
 
@@ -3262,6 +3262,13 @@ The skip link is a native `<a>` with an href to the main landmark and is the fir
 
 ## Migration notes
 
+### 0.3.3
+
+Fix: the narrow header bar puts the `menu` slot at the inline start, before the `brand` (0.3.2 put
+it after the brand), with the actions at the end as before: the top app bar convention. The menu
+also comes first in the tab order. No API change; an app needs no change unless it relied on the
+brand coming first.
+
 ### 0.3.2
 
 New `bf-app-frame` in `@bitforgehq/ui`: the frame of a desktop web app. Slots `sidebar` (a
@@ -11636,6 +11643,15 @@ The title is not in the tab order; after a push, `bf-stack-outlet` focuses it wi
 
 ## Migration notes
 
+### 0.3.3
+
+Fix: `bf-header` measures its title and slots in the next animation frame after a resize, not
+inside the `ResizeObserver` callback. Its measurement writes the title inset and height, which
+resize the observed elements, and WebKit then reported "ResizeObserver loop completed with
+undelivered notifications": an error event that an app's global error listener
+(`provideBrowserGlobalErrorListeners()`) logs as an error. Several resizes in one frame now
+measure once.
+
 ### 0.3.2
 
 The `## Desktop` docs say `bf-app-frame` supplies the app-level header bar below its breakpoint.
@@ -24488,7 +24504,7 @@ export class TablePagedExampleComponent {
 
 `stack` lets the table itself fit a narrow space. With `stack="narrow"` it stacks while the table is narrower than 36rem (576 px at the default root size, Tailwind's `xl` container size): a container query on the table's own width, so a table in a narrow column or a side panel stacks even on a wide screen. The host is then a size container (`container-type: inline-size`), so give the table its width from its parent (a block or `w-full` / `flex-1`), not from its columns. With `stack="coarse"` it stacks under a coarse pointer at any width (phones, tablets, the Capacitor shell). The default `never` keeps the table as it is.
 
-Stacked, each row is a sunken tile (`surface-sunken`, `rounded-tile`, the tile a raised card holds; a selected row keeps `primary-soft`). Its checkbox and first cell head the tile in bold; every other cell shows its column label at the start and its value at the end. The header row is visually hidden, and a bar above the tiles holds a labelled Select all checkbox (with `selectable`) and a Sort by select of every sortable column, ascending and descending (`tableSortBy`, `tableSortAscending`, `tableSortDescending` labels), since the hidden header's buttons are not shown. Choosing an option sets `sort`, as a header click does.
+Stacked, each row is a sunken tile (`surface-sunken`, `rounded-tile`, the tile a raised card holds; a selected row keeps `primary-soft`). Its checkbox and first cell head the tile in bold; every other cell shows its column label at the start and its value at the end. The header row is visually hidden, and a bar above the tiles holds a labelled Select all checkbox (with `selectable`) and a Sort by select, since the hidden header's buttons are not shown. Its first option, Not sorted, shows while `sort` is null and sets it back to null; then every sortable column, ascending and descending (`tableSortBy`, `tableSortNone`, `tableSortAscending`, `tableSortDescending` labels). Choosing a column option sets `sort`, as a header click does. In a test, `BfTableHarness.getSortSelect()` returns that select's `BfSelectHarness`.
 
 ```ts
 import { Component, computed, signal } from '@angular/core';
@@ -24523,7 +24539,8 @@ type Width = 'phone' | 'full';
  *
  * `stack="narrow"` turns each row into a tile of label/value pairs while the table is narrower
  * than 36rem: the selection checkbox and the first cell head the tile, and a bar above the tiles
- * holds Select all and a Sort by select. Switch the box between phone width and full width.
+ * holds Select all and a Sort by select, whose first option, Not sorted, shows while `sort` is
+ * null and clears it. Switch the box between phone width and full width.
  */
 @Component({
   selector: 'app-example-table-stacked',
@@ -24670,7 +24687,7 @@ Put the table on a `bf-card` (or another surface) yourself; it has no background
 
 A native `table` with a visually hidden `caption` from `label`, `th scope="col"` headers and one `tr` per row. A sorted column's `th` carries `aria-sort="ascending"` or `"descending"`; the others carry none. A sortable header is a native `button` inside the `th`, so its name is the column label; the arrow is `aria-hidden`. The header checkbox is named by `selectAllLabel`, else `provideBfLabels()`'s `tableSelectAll` ("Select all rows"), and is mixed (`indeterminate`) while some rows are selected. Each row checkbox is named by the row's first data cell through `aria-labelledby`, so it reads as the row's title. The empty row's cell spans every column.
 
-A table that can stack (`stack` other than `never`) sets explicit `table`, `rowgroup`, `row`, `columnheader` and `cell` roles and names the table from its caption with `aria-labelledby`, because Safari and some screen readers drop a table's semantics once CSS changes its display; so a stacked table still reads as a table with its column headers. Stacked, the header row is visually hidden but stays in the accessibility tree; its sort buttons and checkbox are hidden (a plain label takes a sortable header's place), so no control is focusable where nobody can see it, and the bar's Select all checkbox and Sort by select replace them. A cell's visible label is CSS generated content with empty alternative text (`content: attr(data-label) / ""`), so a screen reader reads the column header once, not the label as well.
+A table that can stack (`stack` other than `never`) sets explicit `table`, `rowgroup`, `row`, `columnheader` and `cell` roles and names the table from its caption with `aria-labelledby`, because Safari and some screen readers drop a table's semantics once CSS changes its display; so a stacked table still reads as a table with its column headers. Stacked, the header row is visually hidden but stays in the accessibility tree; its sort buttons and checkbox are hidden (a plain label takes a sortable header's place), so no control is focusable where nobody can see it, and the bar's Select all checkbox and Sort by select replace them. A cell's visible label is CSS generated content with empty alternative text (`content: attr(data-label) / ""`, the `content-data-label` utility of `theme.css`), so a screen reader reads the column header once, not the label as well.
 
 ### Keyboard
 
@@ -24748,6 +24765,23 @@ Selects or clears one row.
 
 ## Migration notes
 
+### 0.3.3
+
+Fix: stacked rows (`stack="narrow"` and `stack="coarse"`) show their column labels again when the
+package is installed from npm. 0.3.2 wrote the label as `content-[attr(data-label)_/_""]`; the
+library build escaped its quotes in the FESM (`\"\"`), so Tailwind built the rule for a class no
+cell carries and every label `::before` computed to `none`. The cells now carry
+`before:content-data-label`, a utility `theme.css` defines (below). Apps that added the
+workaround `@source inline('@max-xl:before:content-[attr(data-label)_/_""] pointer-coarse:before:content-[attr(data-label)_/_""]')`
+can remove it. consumer-smoke now opens a stacked table built from the packed package in
+Chromium, under a fine and a coarse pointer, and fails if any FESM class string holds a
+backslash escape.
+
+The stacked Sort by select's first option is Not sorted (new label key `tableSortNone`, "Not
+sorted"): it shows while `sort` is null, so the select is no longer an empty box, and choosing it
+sets `sort` back to null. New `BfTableHarness.getSortSelect()` returns that select's
+`BfSelectHarness` (`null` when the table cannot stack or has no sortable column).
+
 ### 0.3.2
 
 New opt-in `stack` input (`BfTableStack`: `'never'` by default, so existing tables do not
@@ -29335,6 +29369,7 @@ import { type BfLabels } from '@bitforgehq/ui';
 | `notifications` | `string` | `'Notifications'` | The desktop toast stack's region name. |
 | `tableSelectAll` | `string` | `'Select all rows'` | bf-table's header checkbox, which selects or clears every row. |
 | `tableSortBy` | `string` | `'Sort by'` | The label of a stacked bf-table's sort select. |
+| `tableSortNone` | `string` | `'Not sorted'` | A stacked bf-table's first sort option: rows in the order given, no column sorted. |
 | `tableSortAscending` | `(column: string) => string` | `` (column) => `${column}, ascending` `` | A stacked bf-table's sort option for a column in ascending order. |
 | `tableSortDescending` | `(column: string) => string` | `` (column) => `${column}, descending` `` | A stacked bf-table's sort option for a column in descending order. |
 | `theme` | `string` | `'Theme'` | bf-theme-switch's and bf-theme-menu-button's name without a label. |
@@ -30491,7 +30526,7 @@ Replaces built-in strings, merged over the parent's (validation merged key by ke
 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`, `tableSortBy`,
-`tableSortAscending`, `tableSortDescending`, `theme`, `themeSystem`, `themeLight`, `themeDark`,
+`tableSortNone`, `tableSortAscending`, `tableSortDescending`, `theme`, `themeSystem`, `themeLight`, `themeDark`,
 `breadcrumb`, `breadcrumbExpand`, `navigation`, `navBadge`, `sidebarCollapse`, `sidebarExpand`,
 `skipToContent`, `pagination`, `previousPage`, `nextPage`, `pageOf`, `goToPage`, `tabGroup`,
 `calendarPreviousMonth`, `calendarNextMonth`, `calendarChooseMonth`, `calendarChooseYear`,
@@ -37274,6 +37309,10 @@ Focuses the native select.
 
 Blurs the native select, which marks a bound form field touched.
 
+## Used by
+
+- [BfTableHarness](bf-table-harness.md)
+
 ---
 
 # BfSidebarToggleHarness
@@ -37451,6 +37490,11 @@ Throws for an unknown or unsortable column.
 
 The sorted column (its `key`) and direction, from `aria-sort`.
 
+### `getSortSelect(): Promise<BfSelectHarness | 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.
+
 ### `selectRow(index: number): Promise<void>`
 
 Checks one row's checkbox, as a user would; a selected row stays selected. Throws when the
@@ -37471,6 +37515,7 @@ The number of selected rows (checked row checkboxes).
 
 ## Uses
 
+- [BfSelectHarness](bf-select-harness.md)
 - [BfTableSort](bf-table-sort.md)
 
 ---

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bitforgehq/ui",
-  "version": "0.3.2",
+  "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-testing.d.ts

@@ -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.

package/types/bitforgehq-ui.d.ts

@@ -241,6 +241,11 @@ interface BfLabels {
    * @default 'Sort by'
    */
   readonly tableSortBy: string;
+  /**
+   * A stacked bf-table's first sort option: rows in the order given, no column sorted.
+   * @default 'Not sorted'
+   */
+  readonly tableSortNone: string;
   /**
    * A stacked bf-table's sort option for a column in ascending order.
    * @default (column) => `${column}, ascending`
@@ -538,7 +543,7 @@ export declare const BF_LABELS: InjectionToken<BfLabels>;
  * 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`, `tableSortBy`,
- * `tableSortAscending`, `tableSortDescending`, `theme`, `themeSystem`, `themeLight`, `themeDark`,
+ * `tableSortNone`, `tableSortAscending`, `tableSortDescending`, `theme`, `themeSystem`, `themeLight`, `themeDark`,
  * `breadcrumb`, `breadcrumbExpand`, `navigation`, `navBadge`, `sidebarCollapse`, `sidebarExpand`,
  * `skipToContent`, `pagination`, `previousPage`, `nextPage`, `pageOf`, `goToPage`, `tabGroup`,
  * `calendarPreviousMonth`, `calendarNextMonth`, `calendarChooseMonth`, `calendarChooseYear`,
@@ -4467,10 +4472,11 @@ export declare class BfTableComponent<T = unknown> {
   /** 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. */
+  /** The Sort by select's options: Not sorted (`''`), then each sortable column ascending and
+   * descending; none without a sortable column. */
   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>;
+  /** The Sort by select's value: the option of `sort`, Not sorted while `sort` is null. */
+  protected readonly sortValue: import("@angular/core").Signal<string>;
   protected readonly hostClasses: import("@angular/core").Signal<string>;
   protected readonly stackBarClasses: import("@angular/core").Signal<string>;
   protected readonly tableClasses: import("@angular/core").Signal<string>;
@@ -4526,7 +4532,8 @@ export declare class BfTableComponent<T = unknown> {
    */
   sortBy(key: string): void;
   /**
-   * Sorts by a Sort by option (`<key>:<direction>`) of a stacked table.
+   * Sorts by a Sort by option (`<key>:<direction>`) of a stacked table; Not sorted sets `sort` to
+   * null.
    * @internal
    */
   sortFromOption(value: string): void;
@@ -5108,22 +5115,23 @@ type BfAppFrameBreakpoint = 'md' | 'lg';
 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
+ * breakpoint up, a header bar with the narrow-screen menu, the brand 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>
+ *   <span bfSlot="brand" class="text-heading">Atlas</span>
  *   <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 brand The app's name or logo in the narrow header bar, after the menu.
+ * @slot menu The narrow-screen navigation: a `bf-menu-button` of `a[bfMenuItem]` links, at the
+ *   header bar's inline start.
  * @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.
  */
@@ -5168,7 +5176,7 @@ export declare class BfAppFrameComponent {
       "required": false;
       "isSignal": true;
     };
-  }, {}, never, ["[bfSlot=sidebar]", "[bfSlot=brand]", "[bfSlot=menu]", "[bfSlot=actions]", "*"], true, never>;
+  }, {}, never, ["[bfSlot=sidebar]", "[bfSlot=menu]", "[bfSlot=brand]", "[bfSlot=actions]", "*"], true, never>;
 }
 /**
  * The shape of a `bf-skeleton`: text lines, a rectangle (an image, a chart, a field) or a circle