@bitforgehq/ui 0.3.3 → 0.5.0-next.3

package/ai/reference/bf-media-card-harness.md

@@ -0,0 +1,66 @@
+# BfMediaCardHarness
+
+Test harness for a media card: its image state, its messages and its selection
+
+Class from `@bitforgehq/ui/testing` · since 0.5.0
+
+Harness for `bf-media-card`. jsdom never loads images, so `loadImage()` and `failImage()` fire
+the image's `load` and `error` events the way a browser would; `getState()` then tells what the
+image area shows.
+
+```ts
+import { BfMediaCardHarness } from '@bitforgehq/ui/testing';
+```
+
+## Signature
+
+```ts
+class BfMediaCardHarness extends ComponentHarness
+```
+
+## Methods
+
+### `getTitle(): Promise<string>`
+
+The card's title: the text of the first heading in its body.
+
+### `getState(): Promise<'empty' | 'loading' | 'loaded' | 'failed'>`
+
+What the image area shows: `empty` (no `src`, not loading), `loading` (the skeleton),
+`loaded` (the image) or `failed` (the failure message).
+
+### `getSrc(): Promise<string>`
+
+The URL of the image.
+
+### `getAlt(): Promise<string>`
+
+The alternative text of the image.
+
+### `getLoadingLabel(): Promise<string>`
+
+The caption over the skeleton while loading (the `loading` label when none is set).
+
+### `getFailedMessage(): Promise<string>`
+
+The failure message.
+
+### `loadImage(): Promise<void>`
+
+Fires the image's `load` event, as a browser does when it arrives. Throws without one.
+
+### `failImage(): Promise<void>`
+
+Fires the image's `error` event, as a browser does when it fails. Throws without one.
+
+### `isSelectable(): Promise<boolean>`
+
+Whether the card has a select button (`selectable`).
+
+### `isSelected(): Promise<boolean>`
+
+Whether the card is selected (its select button is pressed).
+
+### `toggleSelected(): Promise<void>`
+
+Clicks the select button, toggling the selection. Throws for a card that is not selectable.

package/ai/reference/bf-motion-list-directive.md

@@ -0,0 +1,22 @@
+# BfMotionListDirective
+
+Glides the items of a list or grid to their new place when it changes
+
+Directive from `@bitforgehq/ui` · since 0.5.0
+
+Glides the items of an app's list or grid to their new place when items are added, removed or
+reordered, instead of letting them jump (the FLIP technique). Put `bfMotionList` on the element
+whose direct children are the items, usually the one around an `@for`. Each item remembers
+where it was; after the DOM changes, every item that moved slides from its old place to its new
+one over 200 ms (`--bf-duration-layout`, on the settle curve). Pair it with Angular's
+`animate.enter="motion-safe:animate-item-enter"` and
+`animate.leave="motion-safe:animate-item-leave"` on the items, so new items fade and rise in and
+removed ones fade out before the rest close the gap. Nothing moves under
+`prefers-reduced-motion: reduce`, and nothing glides when the container is resized. It moves
+items within one container: an item moved to another list leaves one and enters the other.
+
+```ts
+import { BfMotionListDirective } from '@bitforgehq/ui';
+```
+
+Selector: `[bfMotionList]`

package/ai/reference/bf-prose-directive.md

@@ -0,0 +1,16 @@
+# BfProseDirective
+
+Styles rendered markdown with the library tokens: headings, lists, code and quotes
+
+Directive from `@bitforgehq/ui` · since 0.5.0
+
+Styles rendered markdown inside its element: headings, paragraphs, lists, links, inline code,
+code blocks, quotes and rules, through the semantic tokens only (so a theme override restyles
+it). The app renders the markdown to HTML itself (and sanitises it); `bfProse` only styles it.
+A `bf-chat-message` body is a `bfProse` element already.
+
+```ts
+import { BfProseDirective } from '@bitforgehq/ui';
+```
+
+Selector: `[bfProse]`

package/ai/reference/bf-rejected-file-reason.md

@@ -0,0 +1,28 @@
+# BfRejectedFileReason
+
+The rule a refused file broke, its type, its size or the file count
+
+Type from `@bitforgehq/ui` · since 0.5.0
+
+The rule a refused file broke: `type` (not accepted), `size` (over `maxSize`) or `count` (over
+the limit).
+
+```ts
+import { type BfRejectedFileReason } from '@bitforgehq/ui';
+```
+
+## Signature
+
+```ts
+type BfRejectedFileReason = 'type' | 'size' | 'count'
+```
+
+## Values
+
+- `type`
+- `size`
+- `count`
+
+## Used by
+
+- [BfRejectedFile](bf-rejected-file.md)

package/ai/reference/bf-rejected-file.md

@@ -0,0 +1,28 @@
+# BfRejectedFile
+
+A picked or dropped file that broke a rule, with the rule and its message
+
+Interface from `@bitforgehq/ui` · since 0.5.0
+
+A picked or dropped file that broke a rule, with the rule and its message.
+
+```ts
+import { type BfRejectedFile } from '@bitforgehq/ui';
+```
+
+## Properties
+
+| Name      | Type                                                   | Default  | Description                                                                                    |
+| --------- | ------------------------------------------------------ | -------- | ---------------------------------------------------------------------------------------------- |
+| `file`    | `File`                                                 | required | The file that was not added.                                                                   |
+| `reason`  | `BfRejectedFileReason` (`'type' \| 'size' \| 'count'`) | required | The rule it broke: `type` (not accepted), `size` (over `maxSize`) or `count` (over the limit). |
+| `message` | `string`                                               | required | The user-facing text for the rule, from the labels.                                            |
+
+## Uses
+
+- [BfRejectedFileReason](bf-rejected-file-reason.md)
+
+## Used by
+
+- [bf-file-input](../components/file-input.md)
+- [bf-image-input](../components/image-input.md)

package/ai/reference/bf-select-harness.md

@@ -4,8 +4,11 @@ Test harness for the select: reads its label and options and picks one
 
 Class from `@bitforgehq/ui/testing` · since 0.3.0
 
-Harness for `bf-select`. It works by option label, so a test never needs the native option
-values (an object option's native value is its index).
+Harness for `bf-select`, in both modes: the styled list under a mouse (its options render in the
+CDK overlay container while open, found through the field's `aria-controls`) and the native
+`<select>` under a coarse pointer. It also drives the native select with `data-bf-select` that a
+stacked `bf-table` renders as its Sort by select without `provideBfSelect()`. It works by option
+label, so a test never needs the option values (an object option's native value is its index).
 
 ```ts
 import { BfSelectHarness } from '@bitforgehq/ui/testing';
@@ -23,6 +26,11 @@ class BfSelectHarness extends ComponentHarness
 
 The visible label without the required mark, else the `aria-label`.
 
+### `isOpen(): Promise<boolean>`
+
+Whether the styled option list is open (`aria-expanded`). Always false for the native select,
+whose list belongs to the platform.
+
 ### `getValueLabel(): Promise<string>`
 
 The selected option's label, `''` while nothing is selected.
@@ -35,7 +43,8 @@ The labels of the options, in order, without the placeholder.
 
 Chooses the option with this label, as a user would: the select's `value` becomes that
 option's value. Throws, leaving the value as it is, for an unknown or disabled option and
-while the select itself is disabled.
+while the select itself is disabled. On a read-only select it changes nothing, in both modes:
+the styled list does not open, and the native select restores the shown option.
 
 | Parameter | Type     | Description         |
 | --------- | -------- | ------------------- |
@@ -63,11 +72,11 @@ The help text under the select; it is hidden while an error shows.
 
 ### `focus(): Promise<void>`
 
-Focuses the native select.
+Focuses the field, or the native select.
 
 ### `blur(): Promise<void>`
 
-Blurs the native select, which marks a bound form field touched.
+Blurs the field, or the native select, which marks a bound form field touched.
 
 ## Used by
 

package/ai/reference/bf-select-option.md

@@ -4,6 +4,8 @@ One choice of a select with its value, its label and a disabled flag
 
 Interface from `@bitforgehq/ui` · since 0.1.0
 
+Also exported from `@bitforgehq/ui/overlay`.
+
 One choice of `bf-select`; `value` is any type (a string by default).
 
 ```ts

package/ai/reference/bf-size.md

@@ -27,6 +27,7 @@ type BfSize = 'sm' | 'md' | 'lg'
 - [bf-button](../components/button.md)
 - [BfButtonSize](bf-button-size.md)
 - [bf-calendar](../components/calendar.md)
+- [bf-chat-composer](../components/chat-composer.md)
 - [bf-checkbox](../components/checkbox.md)
 - [bf-chip](../components/chip.md)
 - [bf-combobox](../components/combobox.md)
@@ -36,7 +37,9 @@ type BfSize = 'sm' | 'md' | 'lg'
 - [BfDefaultsOptions](bf-defaults-options.md)
 - [BfFieldControlState](bf-field-control-state.md)
 - [BfFieldSize](bf-field-size.md)
+- [bf-file-input](../components/file-input.md)
 - [bf-icon-button](../components/icon-button.md)
+- [bf-image-input](../components/image-input.md)
 - [bf-input](../components/input.md)
 - [bf-menu-button](../components/menu-button.md)
 - [bf-menu](../components/menu.md)

package/ai/reference/bf-step-heading-level.md

@@ -0,0 +1,28 @@
+# BfStepHeadingLevel
+
+The heading level a step title can take, two, three or four
+
+Type from `@bitforgehq/ui` · since 0.4.0
+
+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.
+
+```ts
+import { type BfStepHeadingLevel } from '@bitforgehq/ui';
+```
+
+## Signature
+
+```ts
+type BfStepHeadingLevel = 2 | 3 | 4
+```
+
+## Values
+
+- `2`
+- `3`
+- `4`
+
+## Used by
+
+- [bf-step](../components/step.md)

package/ai/reference/bf-table-align.md

@@ -23,4 +23,4 @@ type BfTableAlign = 'start' | 'end'
 
 ## Used by
 
-- [BfTableColumn](bf-table-column.md)
+- [BfTableColumnAlign](bf-table-column-align.md)

package/ai/reference/bf-table-column-align.md

@@ -0,0 +1,33 @@
+# BfTableColumnAlign
+
+The inline alignment of a table column: start, end, or centred for controls
+
+Type from `@bitforgehq/ui` · since 0.4.0
+
+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.
+
+```ts
+import { type BfTableColumnAlign } from '@bitforgehq/ui';
+```
+
+## Signature
+
+```ts
+type BfTableColumnAlign = BfTableAlign | 'center'
+```
+
+## Values
+
+- `start`
+- `end`
+- `center`
+
+## Uses
+
+- [BfTableAlign](bf-table-align.md)
+
+## Used by
+
+- [BfTableColumn](bf-table-column.md)

package/ai/reference/bf-table-column.md

@@ -12,16 +12,16 @@ import { type BfTableColumn } from '@bitforgehq/ui';
 
 ## Properties
 
-| Name       | Type                                | Default   | Description                                                                           |
-| ---------- | ----------------------------------- | --------- | ------------------------------------------------------------------------------------- |
-| `key`      | `string`                            | required  | The row property the default cell shows; also the key a `bfTableCell` template names. |
-| `label`    | `string`                            | required  | The header text.                                                                      |
-| `sortable` | `boolean`                           | `false`   | Whether the header is a button that sets the table's `sort`.                          |
-| `align`    | `BfTableAlign` (`'start' \| 'end'`) | `'start'` | The inline alignment of the header and cells; `end` also sets tabular figures.        |
+| Name       | Type                                                  | Default   | Description                                                                                                                                            |
+| ---------- | ----------------------------------------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `key`      | `string`                                              | required  | The row property the default cell shows; also the key a `bfTableCell` template names.                                                                  |
+| `label`    | `string`                                              | required  | The header text.                                                                                                                                       |
+| `sortable` | `boolean`                                             | `false`   | Whether the header is a button that sets the table's `sort`.                                                                                           |
+| `align`    | `BfTableColumnAlign` (`'start' \| 'end' \| 'center'`) | `'start'` | 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. |
 
 ## Uses
 
-- [BfTableAlign](bf-table-align.md)
+- [BfTableColumnAlign](bf-table-column-align.md)
 
 ## Used by
 

package/ai/reference/bf-table-harness.md

@@ -41,6 +41,18 @@ The text of one cell.
 | `row`     | `number` | The row's position, from 0. |
 | `column`  | `string` | The column's header text.   |
 
+### `getCellHarness<T extends ComponentHarness>(row: number, column: string, query: HarnessQuery<T>): Promise<T>`
+
+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.
+
+| Parameter | Type              | Description                                         |
+| --------- | ----------------- | --------------------------------------------------- |
+| `row`     | `number`          | The row's position, from 0.                         |
+| `column`  | `string`          | The column's header text.                           |
+| `query`   | `HarnessQuery<T>` | The harness type, or a predicate from its `with()`. |
+
 ### `sortBy(column: string): Promise<void>`
 
 Clicks a sortable column's header, as a user would: ascending first, then descending.

package/ai/reference/bf-timeline-tone.md

@@ -0,0 +1,31 @@
+# BfTimelineTone
+
+The marker colour of a timeline event, neutral, primary or a status
+
+Type from `@bitforgehq/ui` · since 0.4.0
+
+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.
+
+```ts
+import { type BfTimelineTone } from '@bitforgehq/ui';
+```
+
+## Signature
+
+```ts
+type BfTimelineTone = 'neutral' | 'primary' | 'success' | 'warning' | 'danger' | 'info'
+```
+
+## Values
+
+- `neutral`
+- `primary`
+- `success`
+- `warning`
+- `danger`
+- `info`
+
+## Used by
+
+- [bf-timeline-event](../components/timeline-event.md)

package/ai/reference/bf-toggle-harness.md

@@ -0,0 +1,55 @@
+# BfToggleHarness
+
+Test harness for the toggle: reads its name and state and switches it
+
+Class from `@bitforgehq/ui/testing` · since 0.4.0
+
+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.
+
+```ts
+import { BfToggleHarness } from '@bitforgehq/ui/testing';
+```
+
+## Signature
+
+```ts
+class BfToggleHarness extends ComponentHarness
+```
+
+## Methods
+
+### `getLabel(): Promise<string>`
+
+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).
+
+### `isChecked(): Promise<boolean>`
+
+Whether the switch is on.
+
+### `isDisabled(): Promise<boolean>`
+
+Whether the switch is disabled.
+
+### `isReadonly(): Promise<boolean>`
+
+Whether the switch is read-only (`aria-readonly`): it shows its state but a click does nothing.
+
+### `toggle(): Promise<void>`
+
+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.
+
+### `check(): Promise<void>`
+
+Turns the switch on with a click; an on switch stays on. Throws while it is disabled.
+
+### `uncheck(): Promise<void>`
+
+Turns the switch off with a click; an off switch stays off. Throws while it is disabled.
+
+### `getErrorText(): Promise<string>`
+
+The error text under the switch.

package/ai/reference/bf_table_sort_select.md

@@ -0,0 +1,23 @@
+# BF_TABLE_SORT_SELECT
+
+The component a stacked table renders as its Sort by select
+
+Injection token from `@bitforgehq/ui` · since 0.5.0
+
+The component a stacked `bf-table` renders as its Sort by select; `null` (the default) keeps the
+built-in native `<select>`. `provideBfSelect()` from `@bitforgehq/ui/overlay` sets it to the
+styled `bf-select`, so the core entry never imports the overlay entry. A component given here
+must take the inputs `label` (string), `options` (`BfSelectOption<string>[]`) and `value`
+(string) and emit the picked value from the output `changed`. The table adds its layout classes
+to the component's host with `classList`, so the component must not overwrite its host
+`className` or `class` attribute directly.
+
+```ts
+import { BF_TABLE_SORT_SELECT } from '@bitforgehq/ui';
+```
+
+## Signature
+
+```ts
+const BF_TABLE_SORT_SELECT: InjectionToken<Type<unknown> | null>
+```

package/ai/reference/provide-bf-labels.md

@@ -17,9 +17,16 @@ every string. In a component's `providers` it covers that sub-tree's widgets and
 `dateInputUnavailable`, `timeInputHour`, `timeInputMinute`, `timeInputSecond`,
 `timeInputDayPeriod`, `timeInputOpenList`, `timeInputInvalid`, `timeInputMin`, `timeInputMax`,
 `chart`, `chartLegend`, `chartValues`, `chartShowData`, `chartHideData`, `chartCategory`,
-`chartValue`, `chartEmpty`, `chartError`, `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:
+`chartValue`, `chartEmpty`, `chartError`, `listItemUnread`,
+`fileInputChoose`, `fileInputDropHint`, `fileInputDropzone`, `fileInputTapToChoose`, `fileInputRemove`,
+`fileInputDismiss`, `fileInputAdded`, `fileInputNotAdded`, `fileInputRemoved`, `fileInputCount`,
+`fileRejectedType`, `fileRejectedSize`, `fileRejectedCount`,
+`imageInputChoose`, `imageInputUpload`, `imageInputReplace`, `imageInputRemove`,
+`chatThread`, `chatJumpToLatest`, `chatMessageStopped`, `chatMessageFailed`, `chatComposer`,
+`chatSend`, `chatStop`, `mediaCardSelect`, `imageLoadFailed`, `validation`); the overlay
+services (`ok`, `cancel`, `actions`, `sheet`, `modal`, `close`, `expand`, `collapse`,
+`sheetPosition`, `dialog`, `notifications`, `imageViewer`, `imageViewerPrevious`,
+`imageViewerNext`, `imageViewerPosition`) are root singletons and pick it up only when the caller passes its injector:
 `open(…, { injector: inject(Injector) })`.
 
 ```ts

package/ai/reference/provide-bf-select.md

@@ -0,0 +1,20 @@
+# provideBfSelect
+
+Makes a stacked table's Sort by select the styled bf-select, app-wide
+
+Function from `@bitforgehq/ui/overlay` · since 0.5.0
+
+Makes the library's built-in selects use the styled `bf-select`: a stacked `bf-table` then
+renders its Sort by select as a `bf-select` (the native `<select>` under a coarse pointer, as
+`bf-select` itself does) instead of the plain native one. Add it to
+`ApplicationConfig.providers`.
+
+```ts
+import { provideBfSelect } from '@bitforgehq/ui/overlay';
+```
+
+## Signature
+
+```ts
+function provideBfSelect(): EnvironmentProviders
+```

package/bin/bf-ui.js

@@ -120,6 +120,7 @@ const PAIRS = [
   { fg: 'primary-strong', bg: 'surface', min: TEXT, use: 'text button hover, radio dot' },
   { fg: 'primary-strong', bg: 'surface-sunken', min: NON_TEXT, use: 'segment cue, progress' },
   { fg: 'primary-strong', bg: 'surface-muted', min: NON_TEXT, use: 'read-only toggle and radio' },
+  { fg: 'text', bg: 'primary-soft', min: TEXT, use: 'chat user message bubble' },
   { fg: 'text', bg: 'primary-soft-pressed', min: TEXT, use: 'outline button pressed' },
   { fg: 'ring', bg: 'bg', min: NON_TEXT, use: 'focus ring' },
   { fg: 'ring', bg: 'surface', min: NON_TEXT, use: 'focus ring on a card' },

package/dark-ink.css

@@ -0,0 +1,124 @@
+/*
+ * @bitforgehq/ui — Ink, an opt-in dark preset: near-black surfaces one small step apart,
+ * see-through status tints, 1 px edges instead of heavy shadows, off-white text.
+ *
+ * Usage: import it AFTER theme.css. It redefines tokens under .dark only, so light mode is
+ * untouched, and it wins over theme.css's own .dark block by order:
+ *   @import 'tailwindcss';
+ *   @import '@bitforgehq/ui/theme.css';
+ *   @import '@bitforgehq/ui/dark-ink.css';
+ *
+ * It sets every colour and shadow token theme.css's .dark block sets except the brand set (the
+ * primary family below), so the app's brand primary stays: the default dark indigo, or the
+ * app's own .dark brand override placed after this import. For the monochrome look of the
+ * mockups, paste this optional block after the import as well:
+ *
+ *   .dark {
+ *     --color-primary: #ececee;
+ *     --color-primary-hover: #dcdce0;
+ *     --color-primary-pressed: #cdcdd2;
+ *     --color-primary-soft: rgb(255 255 255 / 0.08);
+ *     --color-primary-soft-hover: rgb(255 255 255 / 0.11);
+ *     --color-primary-soft-pressed: rgb(255 255 255 / 0.14);
+ *     --color-primary-strong: #ffffff;
+ *     --color-on-primary: #0b0c0e;
+ *     --color-primary-text: #e8e9ec;
+ *   }
+ *
+ * Every pair is contrast-checked in theme.spec.ts, alpha tints composited over the surface they
+ * sit on (bg, surface, surface-muted and surface-sunken), with the default dark brand and with
+ * the monochrome block.
+ */
+
+/* Tailwind inlines a shadow token's value into the shadow-* utilities when it compiles them, so
+   redefining --shadow-* under .dark alone changes nothing that the utilities draw. These read
+   the dark value through --bf-shadow-*, which only .dark below sets; in light mode the fallback
+   is theme.css's own light value, so light mode compiles to the same shadows. */
+@theme {
+  --shadow-raised: var(
+    --bf-shadow-raised,
+    0 1px 2px rgb(31 42 34 / 0.06),
+    0 8px 24px rgb(31 42 34 / 0.08)
+  );
+  --shadow-floating: var(--bf-shadow-floating, 0 10px 30px rgb(31 42 34 / 0.18));
+  --shadow-segment: var(--bf-shadow-segment, 0 1px 3px rgb(31 42 34 / 0.14));
+}
+
+.dark {
+  /* Surfaces: the page and cards near black, one step apart. */
+  --color-bg: #0b0c0e;
+  --color-surface: #121316;
+  --color-surface-muted: #191a1e; /* hover */
+  --color-surface-sunken: #0e0f11;
+  --color-surface-pressed: #202126;
+  --color-selected: rgb(255 255 255 / 0.06);
+
+  /* Status: the colour as text, its soft tint the same colour at 12 % (a see-through tint that
+     sits on any surface, >= 5:1 under its text on bg, surface, surface-muted and surface-sunken). */
+  --color-success: #4cc38a;
+  --color-success-soft: rgb(76 195 138 / 0.12);
+  --color-warning: #e5b454;
+  --color-warning-soft: rgb(229 180 84 / 0.12);
+  --color-danger: #f2706a;
+  /* Opaque (the danger colour at 13 % over surface), not see-through: the danger button's hover
+     and pressed states write danger-soft as text on the danger fill, where a tint would vanish. */
+  --color-danger-soft: #2f1f21;
+  --color-danger-pressed: #f59994;
+  --color-danger-border: #c9372c;
+  --color-info: #5eb1ef;
+  --color-info-soft: rgb(94 177 239 / 0.12);
+  /* Strong fills (>= 3:1 on bg, surface and surface-sunken), text on them >= 4.5:1. */
+  --color-neutral-strong: #9a9da5;
+  --color-on-neutral-strong: #0b0c0e; /* 7.2: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: #e8e9ec;
+  --color-on-tooltip: #121316; /* 15.3:1 on tooltip */
+
+  /* Charts: the default dark series (each >= 5:1 on bg and surface here, adjacent pairs distinct
+     under colour vision deficiency); grid lines as faint as the border, the axis >= 3:1. */
+  --color-chart-1: #3e9e66;
+  --color-chart-2: #7479ee;
+  --color-chart-3: #d8692f;
+  --color-chart-4: #1f9cb8;
+  --color-chart-5: #b08a1c;
+  --color-chart-6: #dc5893;
+  --color-chart-7: #a072e6;
+  --color-chart-8: #7f9c2c;
+  --color-chart-grid: #1f2024;
+  --color-chart-axis: #64676e;
+  --color-neutral: #a9adb5;
+  --color-neutral-soft: rgb(255 255 255 / 0.06);
+
+  /* Lines: border-strong and control-off >= 3:1 on bg, surface, surface-muted, surface-sunken. */
+  --color-border: #1f2024;
+  --color-border-strong: #64676e;
+  --color-divider: #18191c;
+  --color-control-off: #64676e;
+  --color-scrim: #000000;
+
+  /* Text: off-white, never pure white; muted >= 4.5:1 on every surface and on primary-soft. */
+  --color-text: #e8e9ec;
+  --color-text-secondary: #b4b7bd;
+  --color-text-muted: #90949b;
+  --color-text-subtle: #63676f; /* icons and chevrons only (>= 3:1), never text */
+  --color-text-disabled: #4a4d53;
+  --color-text-done: #6e727a;
+
+  /* A neutral focus ring (>= 5:1 on bg and surface), so it fits any brand. */
+  --color-ring: #8b8f97;
+
+  /* Edges instead of shadows: a 1 px white ring inside the raised and floating shadows. */
+  --shadow-raised: 0 0 0 1px rgb(255 255 255 / 0.06), 0 1px 2px rgb(0 0 0 / 0.6);
+  --shadow-floating: 0 0 0 1px rgb(255 255 255 / 0.08), 0 16px 48px rgb(0 0 0 / 0.7);
+  --shadow-segment: 0 1px 3px rgb(0 0 0 / 0.5);
+  --bf-shadow-raised: var(--shadow-raised);
+  --bf-shadow-floating: var(--shadow-floating);
+  --bf-shadow-segment: var(--shadow-segment);
+}

package/fesm2022/bitforgehq-ui-mobile.mjs

@@ -5166,7 +5166,8 @@ var BfActionSheetComponent = class BfActionSheetComponent {
 					"interactive",
 					"chevron",
 					"disabled",
-					"truncate"
+					"truncate",
+					"unread"
 				],
 				outputs: ["clicked"]
 			},