@bitforgehq/ui 0.3.3 → 0.4.0

package/llms.txt

@@ -69,7 +69,11 @@
 - [bf-progress](https://bitforge-ui.web.app/ai/components/progress.md): Progress bar in two sizes and four tones for completion, quotas and unknown waits ([docs](https://bitforge-ui.web.app/components/progress))
 - [bf-sparkline](https://bitforge-ui.web.app/ai/components/sparkline.md): Tiny trend line with no axes or legend, for stats and table cells ([docs](https://bitforge-ui.web.app/components/sparkline))
 - [bf-stat](https://bitforge-ui.web.app/ai/components/stat.md): One labelled figure with an optional icon tile and a supporting line ([docs](https://bitforge-ui.web.app/components/stat))
+- [bf-step](https://bitforge-ui.web.app/ai/components/step.md): One numbered step of an instruction list, with a title and its details ([docs](https://bitforge-ui.web.app/components/step))
+- [bf-steps](https://bitforge-ui.web.app/ai/components/steps.md): Numbered instruction steps a user follows in order, with joined markers ([docs](https://bitforge-ui.web.app/components/steps))
 - [bf-table](https://bitforge-ui.web.app/ai/components/table.md): Desktop data table with sortable headers, row selection, custom cells and an empty slot ([docs](https://bitforge-ui.web.app/components/table))
+- [bf-timeline](https://bitforge-ui.web.app/ai/components/timeline.md): Dated list of events with who did what and when, on a vertical line ([docs](https://bitforge-ui.web.app/components/timeline))
+- [bf-timeline-event](https://bitforge-ui.web.app/ai/components/timeline-event.md): One timeline event with a coloured marker, its text, actor and time ([docs](https://bitforge-ui.web.app/components/timeline-event))
 
 ### Feedback
 
@@ -151,6 +155,7 @@
 - [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))
 - [BfBadgeAppearance](https://bitforge-ui.web.app/ai/reference/bf-badge-appearance.md): Every badge tone, the five variants plus the informational info tone ([docs](https://bitforge-ui.web.app/api/bf-badge-appearance))
+- [BfBadgeEmphasis](https://bitforge-ui.web.app/ai/reference/bf-badge-emphasis.md): The two badge emphases, the soft tint or the solid strong fill ([docs](https://bitforge-ui.web.app/api/bf-badge-emphasis))
 - [BfBadgeVariant](https://bitforge-ui.web.app/ai/reference/bf-badge-variant.md): The five tones of a badge, from neutral counts to danger states ([docs](https://bitforge-ui.web.app/api/bf-badge-variant))
 - [BfButtonAppearance](https://bitforge-ui.web.app/ai/reference/bf-button-appearance.md): Every button style, the five variants plus the quiet neutral ghost ([docs](https://bitforge-ui.web.app/api/bf-button-appearance))
 - [BfButtonSize](https://bitforge-ui.web.app/ai/reference/bf-button-size.md): Former name of the shared size scale for buttons, kept until 1.0.0 ([docs](https://bitforge-ui.web.app/api/bf-button-size))
@@ -198,17 +203,20 @@
 - [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))
+- [BfStepHeadingLevel](https://bitforge-ui.web.app/ai/reference/bf-step-heading-level.md): The heading level a step title can take, two, three or four ([docs](https://bitforge-ui.web.app/api/bf-step-heading-level))
 - [BfTabBarController](https://bitforge-ui.web.app/ai/reference/bf-tab-bar-controller.md): The state a parent that drives a projected tab bar gives it to derive from ([docs](https://bitforge-ui.web.app/api/bf-tab-bar-controller))
 - [BfTabBarHost](https://bitforge-ui.web.app/ai/reference/bf-tab-bar-host.md): What each tab reads from its tab bar: the selection, tab stop and link mode ([docs](https://bitforge-ui.web.app/api/bf-tab-bar-host))
 - [BfTableAlign](https://bitforge-ui.web.app/ai/reference/bf-table-align.md): The inline alignment of a table column, start for text or end for numbers ([docs](https://bitforge-ui.web.app/api/bf-table-align))
 - [BfTableCellContext](https://bitforge-ui.web.app/ai/reference/bf-table-cell-context.md): The row and its index that a custom table cell template receives ([docs](https://bitforge-ui.web.app/api/bf-table-cell-context))
 - [BfTableCellDirective](https://bitforge-ui.web.app/ai/reference/bf-table-cell-directive.md): Custom template for the cells of one table column, with the row typed ([docs](https://bitforge-ui.web.app/api/bf-table-cell-directive))
 - [BfTableColumn](https://bitforge-ui.web.app/ai/reference/bf-table-column.md): One table column with its row key, header label, sorting and alignment ([docs](https://bitforge-ui.web.app/api/bf-table-column))
+- [BfTableColumnAlign](https://bitforge-ui.web.app/ai/reference/bf-table-column-align.md): The inline alignment of a table column: start, end, or centred for controls ([docs](https://bitforge-ui.web.app/api/bf-table-column-align))
 - [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))
+- [BfTimelineTone](https://bitforge-ui.web.app/ai/reference/bf-timeline-tone.md): The marker colour of a timeline event, neutral, primary or a status ([docs](https://bitforge-ui.web.app/api/bf-timeline-tone))
 - [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))
 - [BfValidationMessages](https://bitforge-ui.web.app/ai/reference/bf-validation-messages.md): The default error text of each validator kind, shown under a form field ([docs](https://bitforge-ui.web.app/api/bf-validation-messages))
@@ -425,6 +433,7 @@
 - [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))
 - [BfTestingOptions](https://bitforge-ui.web.app/ai/reference/bf-testing-options.md): Options of the test providers: the size defaults and labels a spec runs with ([docs](https://bitforge-ui.web.app/api/bf-testing-options))
 - [BfTimeInputHarness](https://bitforge-ui.web.app/ai/reference/bf-time-input-harness.md): Test harness for the time input: types a time or picks one from its list ([docs](https://bitforge-ui.web.app/api/bf-time-input-harness))
+- [BfToggleHarness](https://bitforge-ui.web.app/ai/reference/bf-toggle-harness.md): Test harness for the toggle: reads its name and state and switches it ([docs](https://bitforge-ui.web.app/api/bf-toggle-harness))
 - [BfTooltipHarness](https://bitforge-ui.web.app/ai/reference/bf-tooltip-harness.md): Test harness for a tooltip: shows it, reads its text and whether it shows ([docs](https://bitforge-ui.web.app/api/bf-tooltip-harness))
 - [installBfJsdomShims](https://bitforge-ui.web.app/ai/reference/install-bf-jsdom-shims.md): Installs the browser APIs jsdom lacks and the library needs, only where missing ([docs](https://bitforge-ui.web.app/api/install-bf-jsdom-shims))
 - [provideBfTesting](https://bitforge-ui.web.app/ai/reference/provide-bf-testing.md): Test providers for the widgets and overlays, with document cleanup after each test ([docs](https://bitforge-ui.web.app/api/provide-bf-testing))

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bitforgehq/ui",
-  "version": "0.3.3",
+  "version": "0.4.0",
   "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": {
@@ -56,6 +56,7 @@
   "sideEffects": false,
   "exports": {
     "./theme.css": "./theme.css",
+    "./dark-ink.css": "./dark-ink.css",
     "./ai/*": "./ai/*",
     "./llms.txt": "./llms.txt",
     "./llms-full.txt": "./llms-full.txt",

package/theme.css

@@ -98,6 +98,18 @@
   --color-neutral-soft: #efece3;
   --color-info: #0f4c6b; /* informational badge: 7.7:1 on info-soft */
   --color-info-soft: #dcecf5;
+  /* Strong status fills (badge emphasis="strong"): the family's deep tone, white text >= 6:1,
+     the fill >= 3:1 on bg, surface and surface-sunken. Primary's strong fill is primary itself. */
+  --color-neutral-strong: #4a5347;
+  --color-on-neutral-strong: #ffffff; /* 8.0:1 */
+  --color-success-strong: #1f6b43;
+  --color-on-success-strong: #ffffff; /* 6.5:1 */
+  --color-warning-strong: #8a520f;
+  --color-on-warning-strong: #ffffff; /* 6.4:1 */
+  --color-danger-strong: #b3261e;
+  --color-on-danger-strong: #ffffff; /* 6.5:1 */
+  --color-info-strong: #0f5a80;
+  --color-on-info-strong: #ffffff; /* 7.5:1 */
 
   /* Tooltip: a dark pill in light mode, inverted (light) in dark mode */
   --color-tooltip: #1f2a22;
@@ -301,6 +313,18 @@
   --color-danger-border: #d3563f;
   --color-info: #7cc4ea; /* 7.2:1 on info-soft */
   --color-info-soft: #14303e;
+  /* Strong fills: a saturated mid tone (>= 3:1 on bg, surface and surface-sunken); white text on
+     the deep ones, dark text on the light neutral and amber ones. */
+  --color-neutral-strong: #9a9da5;
+  --color-on-neutral-strong: #111214; /* 6.9:1 */
+  --color-success-strong: #26804f;
+  --color-on-success-strong: #ffffff; /* 4.9:1 */
+  --color-warning-strong: #d99a3c;
+  --color-on-warning-strong: #1a1206; /* 7.6:1 */
+  --color-danger-strong: #c9372c;
+  --color-on-danger-strong: #ffffff; /* 5.2:1 */
+  --color-info-strong: #2a7aa8;
+  --color-on-info-strong: #ffffff; /* 4.7:1 */
   --color-tooltip: #ececee;
   --color-on-tooltip: #1e2024; /* 13.8:1 on tooltip */
 

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

@@ -1,6 +1,6 @@
 import { EnvironmentProviders } from "@angular/core";
 import { BfTableSort, provideBfDefaults, provideBfLabels } from "@bitforgehq/ui";
-import { BaseHarnessFilters, ComponentHarness, HarnessPredicate, LocatorFactory } from "@angular/cdk/testing";
+import { BaseHarnessFilters, ComponentHarness, HarnessPredicate, HarnessQuery, LocatorFactory } from "@angular/cdk/testing";
 /**
  * Options of `installBfJsdomShims()`.
  *
@@ -541,6 +541,21 @@ export declare class BfTableHarness extends ComponentHarness {
    * @returns The cell's text.
    */
   getCellText(row: number, column: string): Promise<string>;
+  /**
+   * A harness for a control in one cell, such as a `bf-toggle` of a settings matrix or a
+   * `bf-select` in a custom cell. Throws for an unknown row or column, or when the cell holds no
+   * matching control.
+   *
+   * @example
+   * const push = await alerts.getCellHarness(0, 'Push', BfToggleHarness);
+   * await push.check();
+   * @param row The row's position, from 0.
+   * @param column The column's header text.
+   * @param query The harness type, or a predicate from its `with()`.
+   * @returns The first matching harness in the cell.
+   * @since 0.4.0
+   */
+  getCellHarness<T extends ComponentHarness>(row: number, column: string, query: HarnessQuery<T>): Promise<T>;
   /**
    * Clicks a sortable column's header, as a user would: ascending first, then descending.
    * Throws for an unknown or unsortable column.
@@ -1287,4 +1302,64 @@ export declare class BfSidebarToggleHarness extends ComponentHarness {
   /** Flips the sidebar with a click. */
   toggle(): Promise<void>;
 }
+/**
+ * Harness for `bf-toggle`. Its `label` filter matches the switch's name: the text of the elements
+ * `ariaLabelledby` names, else `ariaLabel`, else the visible label, so a label-less switch in a
+ * table cell or a list row is found the same way.
+ *
+ * @example
+ * const email = await loader.getHarness(BfToggleHarness.with({ label: 'E-Mail, Kritisch' }));
+ * await email.check();
+ * expect(await email.isChecked()).toBe(true);
+ * @summary Test harness for the toggle: reads its name and state and switches it
+ * @since 0.4.0
+ */
+export declare class BfToggleHarness extends ComponentHarness {
+  /** The host element's selector. */
+  static hostSelector: string;
+  private readonly input;
+  private readonly label;
+  private readonly error;
+  /**
+   * A predicate for a 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<BfToggleHarness>;
+  /**
+   * The switch's name, as the browser computes it: the text of the elements `ariaLabelledby`
+   * names, else `ariaLabel`, else the visible label (the `label` text and the default slot).
+   * @returns The name, `''` without one.
+   */
+  getLabel(): Promise<string>;
+  /**
+   * Whether the switch is on.
+   * @returns True when on.
+   */
+  isChecked(): Promise<boolean>;
+  /**
+   * Whether the switch is disabled.
+   * @returns True when disabled.
+   */
+  isDisabled(): Promise<boolean>;
+  /**
+   * Whether the switch is read-only (`aria-readonly`): it shows its state but a click does nothing.
+   * @returns True when read-only.
+   */
+  isReadonly(): Promise<boolean>;
+  /**
+   * Clicks the switch, as a user would, so it turns on or off. Throws while it is disabled (a
+   * user's click would do nothing); a read-only switch takes the click and stays as it is.
+   */
+  toggle(): Promise<void>;
+  /** Turns the switch on with a click; an on switch stays on. Throws while it is disabled. */
+  check(): Promise<void>;
+  /** Turns the switch off with a click; an off switch stays off. Throws while it is disabled. */
+  uncheck(): Promise<void>;
+  /**
+   * The error text under the switch.
+   * @returns The error text, `''` when there is none.
+   */
+  getErrorText(): Promise<string>;
+}
 export type { BfHarnessFilters, BfJsdomShimOptions, BfTestingOptions };

package/types/bitforgehq-ui.d.ts

@@ -512,6 +512,11 @@ interface BfLabels {
    * @default 'The data could not be loaded'
    */
   readonly chartError: string;
+  /**
+   * bf-list-item's visually hidden state text before the title of an `unread` row.
+   * @default 'Unread'
+   */
+  readonly listItemUnread: string;
   /** Default error text per validator kind (see `BfValidationMessages`). */
   readonly validation: BfValidationMessages;
 }
@@ -552,7 +557,7 @@ export declare const BF_LABELS: InjectionToken<BfLabels>;
  * `dateInputUnavailable`, `timeInputHour`, `timeInputMinute`, `timeInputSecond`,
  * `timeInputDayPeriod`, `timeInputOpenList`, `timeInputInvalid`, `timeInputMin`, `timeInputMax`,
  * `chart`, `chartLegend`, `chartValues`, `chartShowData`, `chartHideData`, `chartCategory`,
- * `chartValue`, `chartEmpty`, `chartError`, `validation`); the overlay services (`ok`, `cancel`,
+ * `chartValue`, `chartEmpty`, `chartError`, `listItemUnread`, `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) })`.
@@ -1012,11 +1017,20 @@ type BfBadgeVariant = 'neutral' | 'primary' | 'success' | 'warning' | 'danger';
  * @since 0.3.1
  */
 type BfBadgeAppearance = BfBadgeVariant | 'info';
+/**
+ * How loud a `bf-badge` is: `soft`, a pale tint with tinted text (the default), or `strong`, a
+ * solid fill with contrasting text for the one state that must stand out, such as "Critical".
+ *
+ * @summary The two badge emphases, the soft tint or the solid strong fill
+ * @since 0.4.0
+ */
+type BfBadgeEmphasis = 'soft' | 'strong';
 /**
  * Status label ("On track", "At risk") or, with `count`, a compact numeric pill for unread counts.
  *
  * @example
  * <bf-badge variant="warning">At risk</bf-badge>
+ * <bf-badge variant="danger" emphasis="strong">Critical</bf-badge>
  * <bf-badge [count]="unread()" countLabel="unread messages" />
  * @summary Small status label in semantic tones, or a compact numeric pill for counts
  * @category Data display
@@ -1024,9 +1038,12 @@ type BfBadgeAppearance = BfBadgeVariant | 'info';
  * @slot default The badge text, shown when no `count` is set.
  */
 export declare class BfBadgeComponent {
-  /** Tint for the label style: neutral, primary, success, warning, danger or info. Ignored when
-   * `count` is set. */
+  /** Tint for the label style: neutral, primary, success, warning, danger or info. Ignored by a
+   * soft count pill; a strong one takes its fill from it. */
   readonly variant: import("@angular/core").InputSignal<BfBadgeAppearance>;
+  /** `soft` (a pale tint, the default) or `strong` (a solid fill with contrasting text, also for
+   * the count pill). */
+  readonly emphasis: import("@angular/core").InputSignal<BfBadgeEmphasis>;
   /** 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+
@@ -1034,7 +1051,7 @@ export declare class BfBadgeComponent {
   readonly countLabel: import("@angular/core").InputSignal<string>;
   readonly classes: import("@angular/core").Signal<string>;
   readonly countText: import("@angular/core").Signal<string | null>;
-  readonly countClasses = "inline-flex h-box min-w-box items-center justify-center rounded-control bg-primary px-1.75 text-micro font-bold leading-none text-on-primary";
+  readonly countClasses: import("@angular/core").Signal<string>;
   static ɵfac: i0.ɵɵFactoryDeclaration<BfBadgeComponent, never>;
   static ɵcmp: i0.ɵɵComponentDeclaration<BfBadgeComponent, "bf-badge", never, {
     "variant": {
@@ -1042,6 +1059,11 @@ export declare class BfBadgeComponent {
       "required": false;
       "isSignal": true;
     };
+    "emphasis": {
+      "alias": "emphasis";
+      "required": false;
+      "isSignal": true;
+    };
     "count": {
       "alias": "count";
       "required": false;
@@ -3173,12 +3195,18 @@ interface BfActionHost {
   registerAction(): () => void;
   /** Whether the surface's action has keyboard focus (`:focus-visible`), for the focus ring. */
   setActionFocusVisible(visible: boolean): void;
+  /**
+   * The id of an element whose text starts the action's accessible name (a list row's visually
+   * hidden "Unread"), or `null`; the action then names itself `aria-labelledby="<id> <own id>"`.
+   */
+  readonly actionLabelPrefix?: Signal<string | null>;
 }
 declare const BF_ACTION_HOST: InjectionToken<BfActionHost>;
 /**
  * One row of a list: leading slot (avatar, icon tile), title and subtitle, trailing slot
  * (time, toggle, badge) and an optional chevron for rows that navigate. A navigation row puts a
  * `bfAction` link in the `title` slot, so the row stays a list item and the link covers it.
+ * `unread` marks a row not yet opened with a dot and a bolder title.
  *
  * @example
  * <bf-list-item subtitle="lena@studio.ch" chevron>
@@ -3210,13 +3238,26 @@ export declare class BfListItemComponent implements BfActionHost {
    * default they wrap, so nothing is lost at large text sizes.
    */
   readonly truncate: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  /** Mark the row as not yet opened: a dot at the inline start, a bolder title and a visually
+   * hidden state (the `listItemUnread` label) read before the title. */
+  readonly unread: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
   /** Emitted when an interactive row is activated. */
   readonly clicked: import("@angular/core").OutputEmitterRef<Event>;
   /** `listitem` inside a `bf-list`, else no role. */
   protected readonly role: string | null;
+  protected readonly labels: import("@bitforgehq/ui").BfLabels;
+  protected readonly unreadDot = "absolute -start-2.5 mt-[7px] size-1.5 rounded-full bg-primary forced-colors:bg-[CanvasText]";
   private readonly actions;
   private readonly actionFocusVisible;
   private readonly actionState;
+  protected readonly hasAction: import("@angular/core").Signal<boolean>;
+  private unreadIdValue;
+  /** The id of the unread state text, while `unread` is set. */
+  protected readonly unreadId: import("@angular/core").Signal<string | null>;
+  /** @internal The unread state starts the name of the row's `bfAction`. */
+  readonly actionLabelPrefix: import("@angular/core").Signal<string | null>;
+  /** The title weight: bolder on an unread row. */
+  protected readonly titleWeight: import("@angular/core").Signal<"font-extrabold" | "font-bold">;
   /** Wrap or truncate classes of the title, the title slot and the subtitle. */
   protected readonly textClasses: import("@angular/core").Signal<string>;
   readonly classes: import("@angular/core").Signal<string>;
@@ -3256,6 +3297,11 @@ export declare class BfListItemComponent implements BfActionHost {
       "required": false;
       "isSignal": true;
     };
+    "unread": {
+      "alias": "unread";
+      "required": false;
+      "isSignal": true;
+    };
   }, {
     "clicked": "clicked";
   }, never, ["[bfSlot=leading]", "[bfSlot=title]", "*", "[bfSlot=trailing]"], true, never>;
@@ -3982,7 +4028,9 @@ export declare class BfTabBarComponent implements BfTabBarHost {
  * with the nearest card or row, which then draws the pointer, the hover and, while the action has
  * keyboard focus, the focus ring; a card is never lit by the actions of rows nested in it. Give
  * secondary controls inside the surface `class="relative z-1"` so they stay clickable above the
- * stretched area.
+ * stretched area. When the surface marks a state that belongs in the name (an `unread` list
+ * row), the directive names the element `aria-labelledby="<state id> <own id>"`, so the link reads
+ * "Unread, Account", and restores the element's own `aria-labelledby` when the state goes.
  *
  * @example
  * <bf-card>
@@ -4343,6 +4391,15 @@ export declare class BfTableCellDirective<T = unknown> {
  * @since 0.3.1
  */
 type BfTableAlign = 'start' | 'end';
+/**
+ * Where a `bf-table` column lines up its header and cells: a `BfTableAlign`, or `center` for a
+ * column of controls such as the toggles of a settings matrix. A new type, so `Record`s over the
+ * released `BfTableAlign` keep compiling.
+ *
+ * @summary The inline alignment of a table column: start, end, or centred for controls
+ * @since 0.4.0
+ */
+type BfTableColumnAlign = BfTableAlign | 'center';
 /**
  * The direction of a sorted `bf-table` column, as `aria-sort` names it.
  *
@@ -4376,10 +4433,11 @@ interface BfTableColumn {
    */
   sortable?: boolean;
   /**
-   * The inline alignment of the header and cells; `end` also sets tabular figures.
+   * The inline alignment of the header and cells; `end` also sets tabular figures, `center`
+   * centres a cell's control (a toggle, a checkbox) in the column.
    * @default 'start'
    */
-  align?: BfTableAlign;
+  align?: BfTableColumnAlign;
 }
 /**
  * The column a `bf-table` is sorted by and the direction; the consumer sorts the rows.
@@ -4790,6 +4848,132 @@ export declare class BfStatComponent {
     };
   }, {}, never, ["[bfSlot=icon]", "*"], true, never>;
 }
+/** The default format of an event's time: a medium date and a short time (12 Oct 2026, 14:30). */
+declare const TIMELINE_TIME_FORMAT: Intl.DateTimeFormatOptions;
+/** What a `bf-timeline-event` reads from its `bf-timeline`. */
+interface BfTimelineHost {
+  /** The `Intl.DateTimeFormat` options of the events' times. */
+  readonly timeFormat: Signal<Intl.DateTimeFormatOptions>;
+  /** The locale of the events' times, `''` for the app's `LOCALE_ID`. */
+  readonly locale: Signal<string>;
+}
+/**
+ * Provided by `bf-timeline` so each `bf-timeline-event` claims `role="listitem"` and formats its
+ * time with the timeline's options, without `timeline-event.component.ts` importing
+ * `timeline.component.ts`.
+ */
+declare const BF_TIMELINE: InjectionToken<BfTimelineHost>;
+/**
+ * A dated history of events, newest first or oldest first as the consumer orders them: who did
+ * what and when, each event a `bf-timeline-event` with a marker on a vertical line.
+ *
+ * @example
+ * <bf-timeline label="History">
+ *   <bf-timeline-event actor="Lena Meier" time="2026-10-28T14:30:00Z" tone="success">
+ *     Marked the finding as fixed
+ *   </bf-timeline-event>
+ * </bf-timeline>
+ * @summary Dated list of events with who did what and when, on a vertical line
+ * @category Data display
+ * @since 0.4.0
+ * @slot default The events, each a `bf-timeline-event`, in the order to show them.
+ */
+export declare class BfTimelineComponent implements BfTimelineHost {
+  /** The list's accessible name, such as "History"; empty leaves the list unnamed (a visible
+   * heading above it already names the section). */
+  readonly label: import("@angular/core").InputSignal<string>;
+  /** `Intl.DateTimeFormat` options of every event's time; by default a medium date and a short
+   * time (`dateStyle: 'medium'`, `timeStyle: 'short'`). */
+  readonly timeFormat: import("@angular/core").InputSignal<Intl.DateTimeFormatOptions>;
+  /** BCP 47 locale of the times, such as `de-CH`; empty follows the app's `LOCALE_ID`. */
+  readonly locale: import("@angular/core").InputSignal<string>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<BfTimelineComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<BfTimelineComponent, "bf-timeline", never, {
+    "label": {
+      "alias": "label";
+      "required": false;
+      "isSignal": true;
+    };
+    "timeFormat": {
+      "alias": "timeFormat";
+      "required": false;
+      "isSignal": true;
+    };
+    "locale": {
+      "alias": "locale";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, ["*"], true, never>;
+}
+/**
+ * The colour of a `bf-timeline-event`'s marker: `neutral` (the default), `primary`, or a status
+ * (`success`, `warning`, `danger`, `info`), such as danger for a failed CI run.
+ *
+ * @summary The marker colour of a timeline event, neutral, primary or a status
+ * @since 0.4.0
+ */
+type BfTimelineTone = 'neutral' | 'primary' | 'success' | 'warning' | 'danger' | 'info';
+/**
+ * One event of a `bf-timeline`: a marker coloured by `tone`, the event text (the default slot,
+ * which may hold links), then who did it (`actor`) and when (`time`, in a `time` element).
+ *
+ * @example
+ * <bf-timeline-event actor="CI" time="2026-10-28T09:12:00Z" tone="danger">
+ *   CI failed on <a href="/pulls/123">PR #123</a>
+ * </bf-timeline-event>
+ * @summary One timeline event with a coloured marker, its text, actor and time
+ * @category Data display
+ * @since 0.4.0
+ * @slot default The event text; links in it take the link style.
+ * @slot end Content at the inline end on a wide timeline and below the text on a narrow one, such as a button.
+ */
+export declare class BfTimelineEventComponent {
+  /** Who did it, such as a person or a bot; empty for a system event. */
+  readonly actor: import("@angular/core").InputSignal<string>;
+  /** When it happened: a Date or an ISO 8601 string; empty or invalid shows no time. */
+  readonly time: import("@angular/core").InputSignal<string | Date | null>;
+  /** Shown in place of the formatted time, such as "vor 2 Std."; the `time` element's `datetime`
+   * keeps the exact value. */
+  readonly timeText: import("@angular/core").InputSignal<string>;
+  /** The marker's colour. */
+  readonly tone: import("@angular/core").InputSignal<BfTimelineTone>;
+  private readonly timeline;
+  private readonly appLocale;
+  /** `listitem` inside a `bf-timeline`, else no role. */
+  protected readonly role: string | null;
+  private readonly date;
+  /** The `time` element's machine value: the ISO string as given, a Date's ISO string, else null. */
+  protected readonly datetime: import("@angular/core").Signal<string | null>;
+  /** The visible time: `timeText`, else the date formatted with the timeline's options. */
+  protected readonly timeLabel: import("@angular/core").Signal<string>;
+  protected readonly markerClasses: string;
+  protected readonly textClasses: string;
+  readonly dotClasses: import("@angular/core").Signal<string>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<BfTimelineEventComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<BfTimelineEventComponent, "bf-timeline-event", never, {
+    "actor": {
+      "alias": "actor";
+      "required": false;
+      "isSignal": true;
+    };
+    "time": {
+      "alias": "time";
+      "required": false;
+      "isSignal": true;
+    };
+    "timeText": {
+      "alias": "timeText";
+      "required": false;
+      "isSignal": true;
+    };
+    "tone": {
+      "alias": "tone";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, ["*", "[bfSlot=end]"], 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
@@ -5734,6 +5918,102 @@ export declare class BfCalendarComponent implements FormValueControl<string | nu
     "touch": "touch";
   }, never, never, true, never>;
 }
+/**
+ * Provided by `bf-steps` so each `bf-step` knows its number and may claim `role="listitem"`,
+ * without `step.component.ts` importing `steps.component.ts`.
+ */
+interface BfStepsHost {
+  /** The number of the first step. */
+  readonly start: Signal<number>;
+  /** How many steps the list holds. */
+  readonly count: Signal<number>;
+  /** The zero-based position of a step among the list's steps, or -1. */
+  indexOf(step: object): number;
+}
+declare const BF_STEPS: InjectionToken<BfStepsHost>;
+/**
+ * Numbered instructions a user follows in order, such as setting up an app on a phone: an
+ * ordered list of `bf-step` items, each with a numbered marker joined to the next by a line.
+ *
+ * @example
+ * <bf-steps>
+ *   <bf-step title="Install the app">Download it from the App Store or Google Play.</bf-step>
+ *   <bf-step title="Sign in">Use your work email address.</bf-step>
+ *   <bf-step title="Turn on notifications">Allow them when the app asks.</bf-step>
+ * </bf-steps>
+ * @summary Numbered instruction steps a user follows in order, with joined markers
+ * @category Data display
+ * @since 0.4.0
+ * @slot default The steps, each a `bf-step`.
+ */
+export declare class BfStepsComponent implements BfStepsHost {
+  /** The number of the first step, for a list continued from an earlier one. */
+  readonly start: import("@angular/core").InputSignalWithTransform<number, unknown>;
+  private readonly steps;
+  /** @internal How many steps the list holds. */
+  readonly count: import("@angular/core").Signal<number>;
+  /** @internal The zero-based position of a step, read by the step for its number. */
+  indexOf(step: object): number;
+  static ɵfac: i0.ɵɵFactoryDeclaration<BfStepsComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<BfStepsComponent, "bf-steps", never, {
+    "start": {
+      "alias": "start";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, ["steps"], ["*"], true, never>;
+}
+/**
+ * The heading level of a `bf-step` title, for a guide whose steps hold enough content (screenshots,
+ * code) that a screen-reader user moves between them by heading.
+ *
+ * @summary The heading level a step title can take, two, three or four
+ * @since 0.4.0
+ */
+type BfStepHeadingLevel = 2 | 3 | 4;
+/**
+ * One step of a `bf-steps` list: a numbered marker, a short instruction as its title and the
+ * step's details in the content.
+ *
+ * @example
+ * <bf-steps>
+ *   <bf-step title="Install the app">Download it from the App Store or Google Play.</bf-step>
+ *   <bf-step title="Sign in">Use your work email address.</bf-step>
+ * </bf-steps>
+ * @summary One numbered step of an instruction list, with a title and its details
+ * @category Data display
+ * @since 0.4.0
+ * @slot default The step's details: text, a code snippet, an image or a button.
+ */
+export declare class BfStepComponent {
+  private readonly steps;
+  /** The step's short instruction ("Install the app"), shown next to the number. */
+  readonly title: import("@angular/core").InputSignal<string>;
+  /** Renders the title as a heading of this level instead of text; leave it off for short steps. */
+  readonly headingLevel: import("@angular/core").InputSignal<BfStepHeadingLevel | undefined>;
+  /** `listitem` inside a `bf-steps`, else no role. */
+  protected readonly role: string | null;
+  protected readonly markerClasses = "flex size-6 shrink-0 items-center justify-center rounded-full bg-primary-soft text-label-sm font-bold text-primary-strong forced-colors:outline forced-colors:outline-[CanvasText]";
+  protected readonly lineClasses = "my-1 w-0 flex-1 border-s border-border group-last/bf-step:hidden";
+  protected readonly titleClasses = "pt-0.5 text-label font-bold text-text wrap-anywhere";
+  /** The step's number: the list's `start` plus its position. */
+  protected readonly number: import("@angular/core").Signal<number>;
+  protected readonly positionInSet: import("@angular/core").Signal<number | null>;
+  protected readonly setSize: import("@angular/core").Signal<number | null>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<BfStepComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<BfStepComponent, "bf-step", never, {
+    "title": {
+      "alias": "title";
+      "required": false;
+      "isSignal": true;
+    };
+    "headingLevel": {
+      "alias": "headingLevel";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, 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'>;
@@ -5852,4 +6132,4 @@ declare const BF_NAV: InjectionToken<BfNavHost>;
 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 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 };
+export { type BfAlertVariant, type BfAppFrameBreakpoint, type BfAppFrameContentWidth, type BfAutocapitalize, type BfAvatarSize, type BfAvatarVariant, type BfBadgeAppearance, type BfBadgeEmphasis, 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 BfStepHeadingLevel, type BfTabBarController, type BfTabBarHost, type BfTabLinks, type BfTableAlign, type BfTableCellContext, type BfTableColumn, type BfTableColumnAlign, type BfTableRowKey, type BfTableSort, type BfTableSortDirection, type BfTableStack, type BfTimelineTone, 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 };