@bitforgehq/ui 0.4.0 → 0.5.0-next.3

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_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`, `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:
+`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' },