@bitforgehq/ui 0.3.2 → 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.2",
+  "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 */
 
@@ -352,3 +376,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

@@ -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()`.
  *
@@ -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.
@@ -540,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.
@@ -551,6 +567,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.
@@ -1273,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 };