@bitforgehq/ui 0.4.0 → 0.5.0-next.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +350 -0
- package/README.md +12 -12
- package/ai/MANIFEST.index.json +74 -2
- package/ai/MANIFEST.json +3507 -1763
- package/ai/REFERENCE.index.json +189 -0
- package/ai/REFERENCE.json +1617 -139
- package/ai/UI_GUIDE.md +70 -20
- package/ai/components/app-frame.md +1 -1
- package/ai/components/badge.md +41 -1
- package/ai/components/chat-composer.md +357 -0
- package/ai/components/chat-message.md +251 -0
- package/ai/components/chat-thread.md +521 -0
- package/ai/components/checkbox.md +7 -0
- package/ai/components/combobox.md +12 -0
- package/ai/components/date-input.md +9 -0
- package/ai/components/datetime-input.md +2 -0
- package/ai/components/field.md +10 -0
- package/ai/components/file-input.md +498 -0
- package/ai/components/header.md +1 -1
- package/ai/components/image-input.md +368 -0
- package/ai/components/image-tile.md +452 -0
- package/ai/components/image-viewer.md +309 -0
- package/ai/components/media-card.md +478 -0
- package/ai/components/menu-button.md +67 -9
- package/ai/components/menu.md +10 -0
- package/ai/components/multi-combobox.md +7 -0
- package/ai/components/nav-group.md +10 -3
- package/ai/components/nav-item.md +11 -2
- package/ai/components/number-input.md +2 -7
- package/ai/components/pagination.md +59 -11
- package/ai/components/popover.md +13 -0
- package/ai/components/radio-group.md +6 -0
- package/ai/components/segmented.md +14 -2
- package/ai/components/select.md +100 -42
- package/ai/components/sidebar-toggle.md +16 -9
- package/ai/components/sidebar.md +41 -13
- package/ai/components/tab-group.md +18 -2
- package/ai/components/table.md +17 -2
- package/ai/components/theme-menu-button.md +1 -0
- package/ai/components/time-input.md +2 -0
- package/ai/components/toolbar.md +7 -18
- package/ai/reference/bf-chat-composer-harness.md +64 -0
- package/ai/reference/bf-chat-message-role.md +27 -0
- package/ai/reference/bf-chat-message-status.md +28 -0
- package/ai/reference/bf-fade-in-directive.md +18 -0
- package/ai/reference/bf-file-input-harness.md +67 -0
- package/ai/reference/bf-file-input-variant.md +27 -0
- package/ai/reference/bf-image-input-harness.md +67 -0
- package/ai/reference/bf-image-input-shape.md +27 -0
- package/ai/reference/bf-image-tile-aspect.md +28 -0
- package/ai/reference/bf-image-tile-caption-placement.md +27 -0
- package/ai/reference/bf-image-tile-harness.md +70 -0
- package/ai/reference/bf-image-viewer-actions-context.md +29 -0
- package/ai/reference/bf-image-viewer-harness.md +87 -0
- package/ai/reference/bf-image-viewer-image.md +25 -0
- package/ai/reference/bf-image-viewer-options.md +33 -0
- package/ai/reference/bf-image-viewer-origin.md +23 -0
- package/ai/reference/bf-image-viewer-ref.md +55 -0
- package/ai/reference/bf-image-viewer-service.md +32 -0
- package/ai/reference/bf-labels.md +107 -75
- package/ai/reference/bf-media-card-aspect.md +28 -0
- package/ai/reference/bf-media-card-harness.md +66 -0
- package/ai/reference/bf-motion-list-directive.md +22 -0
- package/ai/reference/bf-pagination-position-label.md +22 -0
- package/ai/reference/bf-prose-directive.md +16 -0
- package/ai/reference/bf-rejected-file-reason.md +28 -0
- package/ai/reference/bf-rejected-file.md +28 -0
- package/ai/reference/bf-select-harness.md +14 -5
- package/ai/reference/bf-select-option.md +2 -0
- package/ai/reference/bf-size.md +3 -0
- package/ai/reference/bf_table_sort_select.md +23 -0
- package/ai/reference/provide-bf-labels.md +11 -3
- package/ai/reference/provide-bf-select.md +20 -0
- package/bin/bf-ui.js +1 -0
- package/fesm2022/bitforgehq-ui-overlay.mjs +2660 -594
- package/fesm2022/bitforgehq-ui-overlay.mjs.map +1 -1
- package/fesm2022/bitforgehq-ui-testing.mjs +414 -10
- package/fesm2022/bitforgehq-ui-testing.mjs.map +1 -1
- package/fesm2022/bitforgehq-ui.mjs +8056 -3993
- package/fesm2022/bitforgehq-ui.mjs.map +1 -1
- package/llms-full.txt +4923 -132
- package/llms.txt +36 -1
- package/package.json +1 -1
- package/theme.css +60 -0
- package/types/bitforgehq-ui-overlay.d.ts +695 -7
- package/types/bitforgehq-ui-testing.d.ts +517 -6
- package/types/bitforgehq-ui.d.ts +1699 -181
|
@@ -12,81 +12,113 @@ import { type BfLabels } from '@bitforgehq/ui';
|
|
|
12
12
|
|
|
13
13
|
## Properties
|
|
14
14
|
|
|
15
|
-
| Name | Type | Default
|
|
16
|
-
| ----------------------- | --------------------------------------------- |
|
|
17
|
-
| `loading` | `string` | `'Loading'`
|
|
18
|
-
| `dismiss` | `string` | `'Dismiss'`
|
|
19
|
-
| `tabBar` | `string` | `'Main'`
|
|
20
|
-
| `tabBadge` | `(count: number) => string` | `` (count) => `${count} new` ``
|
|
21
|
-
| `back` | `string` | `'Back'`
|
|
22
|
-
| `ok` | `string` | `'OK'`
|
|
23
|
-
| `cancel` | `string` | `'Cancel'`
|
|
24
|
-
| `actions` | `string` | `'Actions'`
|
|
25
|
-
| `sheet` | `string` | `'Sheet'`
|
|
26
|
-
| `modal` | `string` | `'Modal'`
|
|
27
|
-
| `refreshing` | `string` | `'Refreshing'`
|
|
28
|
-
| `close` | `string` | `'Close'`
|
|
29
|
-
| `expand` | `string` | `'Expand'`
|
|
30
|
-
| `collapse` | `string` | `'Collapse'`
|
|
31
|
-
| `sheetPosition` | `(position: number, count: number) => string` | `` (position, count) => `Sheet at ${position} of ${count}` ``
|
|
32
|
-
| `dialog` | `string` | `'Dialog'`
|
|
33
|
-
| `notifications` | `string` | `'Notifications'`
|
|
34
|
-
| `tableSelectAll` | `string` | `'Select all rows'`
|
|
35
|
-
| `tableSortBy` | `string` | `'Sort by'`
|
|
36
|
-
| `tableSortNone` | `string` | `'Not sorted'`
|
|
37
|
-
| `tableSortAscending` | `(column: string) => string` | `` (column) => `${column}, ascending` ``
|
|
38
|
-
| `tableSortDescending` | `(column: string) => string` | `` (column) => `${column}, descending` ``
|
|
39
|
-
| `theme` | `string` | `'Theme'`
|
|
40
|
-
| `themeSystem` | `string` | `'System'`
|
|
41
|
-
| `themeLight` | `string` | `'Light'`
|
|
42
|
-
| `themeDark` | `string` | `'Dark'`
|
|
43
|
-
| `breadcrumb` | `string` | `'Breadcrumb'`
|
|
44
|
-
| `breadcrumbExpand` | `(count: number) => string` | ``(count) => (count === 1 ? 'Show 1 more level' : `Show ${count} more levels`)``
|
|
45
|
-
| `navigation` | `string` | `'Main'`
|
|
46
|
-
| `navBadge` | `(count: number) => string` | `` (count) => `${count} new` ``
|
|
47
|
-
| `sidebarCollapse` | `string` | `'Collapse sidebar'`
|
|
48
|
-
| `sidebarExpand` | `string` | `'Expand sidebar'`
|
|
49
|
-
| `skipToContent` | `string` | `'Skip to main content'`
|
|
50
|
-
| `pagination` | `string` | `'Pagination'`
|
|
51
|
-
| `previousPage` | `string` | `'Previous page'`
|
|
52
|
-
| `nextPage` | `string` | `'Next page'`
|
|
53
|
-
| `pageOf` | `(page: number, count: number) => string` | `` (page, count) => `Page ${page} of ${count}` ``
|
|
54
|
-
| `goToPage` | `(page: number) => string` | `` (page) => `Page ${page}` ``
|
|
55
|
-
| `tabGroup` | `string` | `'Tabs'`
|
|
56
|
-
| `calendarPreviousMonth` | `string` | `'Previous month'`
|
|
57
|
-
| `calendarNextMonth` | `string` | `'Next month'`
|
|
58
|
-
| `calendarChooseMonth` | `string` | `'Choose month'`
|
|
59
|
-
| `calendarChooseYear` | `string` | `'Choose year'`
|
|
60
|
-
| `statTrendUp` | `string` | `'Up'`
|
|
61
|
-
| `statTrendDown` | `string` | `'Down'`
|
|
62
|
-
| `statTrendFlat` | `string` | `'No change'`
|
|
63
|
-
| `comboboxEmpty` | `string` | `'No results'`
|
|
64
|
-
| `comboboxRemove` | `(label: string) => string` | `` (label) => `Remove ${label}` ``
|
|
65
|
-
| `dateInputDay` | `string` | `'Day'`
|
|
66
|
-
| `dateInputMonth` | `string` | `'Month'`
|
|
67
|
-
| `dateInputYear` | `string` | `'Year'`
|
|
68
|
-
| `dateInputOpenCalendar` | `string` | `'Choose date'`
|
|
69
|
-
| `dateInputInvalid` | `string` | `'Enter a valid date'`
|
|
70
|
-
| `dateInputUnavailable` | `string` | `'This date is not available'`
|
|
71
|
-
| `timeInputHour` | `string` | `'Hour'`
|
|
72
|
-
| `timeInputMinute` | `string` | `'Minute'`
|
|
73
|
-
| `timeInputSecond` | `string` | `'Second'`
|
|
74
|
-
| `timeInputDayPeriod` | `string` | `'AM/PM'`
|
|
75
|
-
| `timeInputOpenList` | `string` | `'Choose time'`
|
|
76
|
-
| `timeInputInvalid` | `string` | `'Enter a valid time'`
|
|
77
|
-
| `timeInputMin` | `(time: string) => string` | `` (time) => `Pick ${time} or later` ``
|
|
78
|
-
| `timeInputMax` | `(time: string) => string` | `` (time) => `Pick ${time} or earlier` ``
|
|
79
|
-
| `chart` | `string` | `'Chart'`
|
|
80
|
-
| `chartLegend` | `string` | `'Legend'`
|
|
81
|
-
| `chartValues` | `string` | `'Data points, arrow keys move between them'`
|
|
82
|
-
| `chartShowData` | `string` | `'Show data'`
|
|
83
|
-
| `chartHideData` | `string` | `'Hide data'`
|
|
84
|
-
| `chartCategory` | `string` | `'Category'`
|
|
85
|
-
| `chartValue` | `string` | `'Value'`
|
|
86
|
-
| `chartEmpty` | `string` | `'No data to show'`
|
|
87
|
-
| `chartError` | `string` | `'The data could not be loaded'`
|
|
88
|
-
| `listItemUnread` | `string` | `'Unread'`
|
|
89
|
-
| `
|
|
15
|
+
| Name | Type | Default | Description |
|
|
16
|
+
| ----------------------- | --------------------------------------------- | --------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- |
|
|
17
|
+
| `loading` | `string` | `'Loading'` | bf-spinner's accessible name (a loading bf-button's spinner is decorative and has none). |
|
|
18
|
+
| `dismiss` | `string` | `'Dismiss'` | bf-alert's dismiss button. |
|
|
19
|
+
| `tabBar` | `string` | `'Main'` | bf-tab-bar's navigation name. |
|
|
20
|
+
| `tabBadge` | `(count: number) => string` | `` (count) => `${count} new` `` | bf-tab's announcement of a numeric badge. |
|
|
21
|
+
| `back` | `string` | `'Back'` | bf-back-button's label. |
|
|
22
|
+
| `ok` | `string` | `'OK'` | BfAlertDialogService's default button. |
|
|
23
|
+
| `cancel` | `string` | `'Cancel'` | BfActionSheetService's cancel row. |
|
|
24
|
+
| `actions` | `string` | `'Actions'` | An action sheet's name when it has no title. |
|
|
25
|
+
| `sheet` | `string` | `'Sheet'` | bf-sheet's name without an ariaLabel or heading. |
|
|
26
|
+
| `modal` | `string` | `'Modal'` | bf-modal's name without an ariaLabel or heading. |
|
|
27
|
+
| `refreshing` | `string` | `'Refreshing'` | bf-refresher's status while refreshing. |
|
|
28
|
+
| `close` | `string` | `'Close'` | bf-dialog's and bf-side-panel's close button, and bf-sheet's screen-reader Close. |
|
|
29
|
+
| `expand` | `string` | `'Expand'` | bf-sheet's grabber button below the top snap point: the next press expands the sheet. |
|
|
30
|
+
| `collapse` | `string` | `'Collapse'` | bf-sheet's grabber button at the top snap point: the next press collapses the sheet. |
|
|
31
|
+
| `sheetPosition` | `(position: number, count: number) => string` | `` (position, count) => `Sheet at ${position} of ${count}` `` | bf-sheet's snap position (1-based), announced politely when it changes and part of the grabber button's name. |
|
|
32
|
+
| `dialog` | `string` | `'Dialog'` | A dialog's or side panel's name without an ariaLabel, a title or a heading. |
|
|
33
|
+
| `notifications` | `string` | `'Notifications'` | The desktop toast stack's region name. |
|
|
34
|
+
| `tableSelectAll` | `string` | `'Select all rows'` | bf-table's header checkbox, which selects or clears every row. |
|
|
35
|
+
| `tableSortBy` | `string` | `'Sort by'` | The label of a stacked bf-table's sort select. |
|
|
36
|
+
| `tableSortNone` | `string` | `'Not sorted'` | A stacked bf-table's first sort option: rows in the order given, no column sorted. |
|
|
37
|
+
| `tableSortAscending` | `(column: string) => string` | `` (column) => `${column}, ascending` `` | A stacked bf-table's sort option for a column in ascending order. |
|
|
38
|
+
| `tableSortDescending` | `(column: string) => string` | `` (column) => `${column}, descending` `` | A stacked bf-table's sort option for a column in descending order. |
|
|
39
|
+
| `theme` | `string` | `'Theme'` | bf-theme-switch's and bf-theme-menu-button's name without a label. |
|
|
40
|
+
| `themeSystem` | `string` | `'System'` | The theme choice that follows the system's colour scheme. |
|
|
41
|
+
| `themeLight` | `string` | `'Light'` | The theme choice that forces the light colour scheme. |
|
|
42
|
+
| `themeDark` | `string` | `'Dark'` | The theme choice that forces the dark colour scheme. |
|
|
43
|
+
| `breadcrumb` | `string` | `'Breadcrumb'` | bf-breadcrumb's navigation name. |
|
|
44
|
+
| `breadcrumbExpand` | `(count: number) => string` | ``(count) => (count === 1 ? 'Show 1 more level' : `Show ${count} more levels`)`` | bf-breadcrumb's ellipsis button, which shows the levels a `maxItems` trail hides. |
|
|
45
|
+
| `navigation` | `string` | `'Main'` | bf-sidebar's and bf-top-nav's navigation name. |
|
|
46
|
+
| `navBadge` | `(count: number) => string` | `` (count) => `${count} new` `` | a[bfNavItem]'s announcement of its count badge. |
|
|
47
|
+
| `sidebarCollapse` | `string` | `'Collapse sidebar'` | bf-sidebar-toggle's name and tooltip while the sidebar is expanded. |
|
|
48
|
+
| `sidebarExpand` | `string` | `'Expand sidebar'` | bf-sidebar-toggle's name and tooltip while the sidebar is an icon rail. |
|
|
49
|
+
| `skipToContent` | `string` | `'Skip to main content'` | bf-app-frame's skip link, the first stop of the tab order, which moves focus to the content. |
|
|
50
|
+
| `pagination` | `string` | `'Pagination'` | bf-pagination's navigation name. |
|
|
51
|
+
| `previousPage` | `string` | `'Previous page'` | bf-pagination's button to the previous page. |
|
|
52
|
+
| `nextPage` | `string` | `'Next page'` | bf-pagination's button to the next page. |
|
|
53
|
+
| `pageOf` | `(page: number, count: number) => string` | `` (page, count) => `Page ${page} of ${count}` `` | bf-pagination's compact position text, such as "Page 3 of 12". |
|
|
54
|
+
| `goToPage` | `(page: number) => string` | `` (page) => `Page ${page}` `` | bf-pagination's name of one page button, such as "Page 3". |
|
|
55
|
+
| `tabGroup` | `string` | `'Tabs'` | bf-tab-group's tablist name. |
|
|
56
|
+
| `calendarPreviousMonth` | `string` | `'Previous month'` | bf-calendar's button that shows the previous month. |
|
|
57
|
+
| `calendarNextMonth` | `string` | `'Next month'` | bf-calendar's button that shows the next month. |
|
|
58
|
+
| `calendarChooseMonth` | `string` | `'Choose month'` | bf-calendar's title button in the day view, which opens the month view; read after the visible month and year. |
|
|
59
|
+
| `calendarChooseYear` | `string` | `'Choose year'` | bf-calendar's title button in the month view, which opens the year view; read after the visible year. |
|
|
60
|
+
| `statTrendUp` | `string` | `'Up'` | bf-stat's hidden direction word before an upward delta, so colour is never the only signal. |
|
|
61
|
+
| `statTrendDown` | `string` | `'Down'` | bf-stat's hidden direction word before a downward delta. |
|
|
62
|
+
| `statTrendFlat` | `string` | `'No change'` | bf-stat's hidden direction word before an unchanged (flat) delta. |
|
|
63
|
+
| `comboboxEmpty` | `string` | `'No results'` | bf-combobox's and bf-multi-combobox's list row when no option matches the typed text. |
|
|
64
|
+
| `comboboxRemove` | `(label: string) => string` | `` (label) => `Remove ${label}` `` | bf-multi-combobox's remove button on a picked value's tag. |
|
|
65
|
+
| `dateInputDay` | `string` | `'Day'` | The day part of bf-date-input and bf-datetime-input; its first letter is the part's placeholder ("dd"). |
|
|
66
|
+
| `dateInputMonth` | `string` | `'Month'` | The month part of bf-date-input and bf-datetime-input; its first letter is the part's placeholder ("mm"). |
|
|
67
|
+
| `dateInputYear` | `string` | `'Year'` | The year part of bf-date-input and bf-datetime-input; its first letter is the part's placeholder ("yyyy"). |
|
|
68
|
+
| `dateInputOpenCalendar` | `string` | `'Choose date'` | The button of bf-date-input and bf-datetime-input that opens the calendar, and the panel's name. |
|
|
69
|
+
| `dateInputInvalid` | `string` | `'Enter a valid date'` | The error of bf-date-input and bf-datetime-input while the date is incomplete or does not exist (31 February). |
|
|
70
|
+
| `dateInputUnavailable` | `string` | `'This date is not available'` | The error of bf-date-input and bf-datetime-input for a typed date that `disabledDate` rules out. |
|
|
71
|
+
| `timeInputHour` | `string` | `'Hour'` | The hour part of bf-time-input and bf-datetime-input; its first letter is the part's placeholder ("hh"). |
|
|
72
|
+
| `timeInputMinute` | `string` | `'Minute'` | The minute part of bf-time-input and bf-datetime-input; its first letter is the part's placeholder ("mm"). |
|
|
73
|
+
| `timeInputSecond` | `string` | `'Second'` | The second part of bf-time-input with `seconds`; its first letter is the part's placeholder ("ss"). |
|
|
74
|
+
| `timeInputDayPeriod` | `string` | `'AM/PM'` | The AM/PM part of bf-time-input and bf-datetime-input under a 12-hour clock. |
|
|
75
|
+
| `timeInputOpenList` | `string` | `'Choose time'` | The button of bf-time-input that opens the list of times, and the list's name. |
|
|
76
|
+
| `timeInputInvalid` | `string` | `'Enter a valid time'` | The error of bf-time-input and bf-datetime-input while the time is incomplete. |
|
|
77
|
+
| `timeInputMin` | `(time: string) => string` | `` (time) => `Pick ${time} or later` `` | The error of bf-time-input and bf-datetime-input below `min`, given the limit as the locale writes it. |
|
|
78
|
+
| `timeInputMax` | `(time: string) => string` | `` (time) => `Pick ${time} or earlier` `` | The error of bf-time-input and bf-datetime-input above `max`, given the limit as the locale writes it. |
|
|
79
|
+
| `chart` | `string` | `'Chart'` | The name of a chart from `@bitforgehq/ui/charts` that has no `label` (and no `bf-chart-card` title). |
|
|
80
|
+
| `chartLegend` | `string` | `'Legend'` | The name of a chart's legend, the group of buttons that show and hide its series. |
|
|
81
|
+
| `chartValues` | `string` | `'Data points, arrow keys move between them'` | The name of a chart's plot, the focusable area whose arrow keys move between the values. |
|
|
82
|
+
| `chartShowData` | `string` | `'Show data'` | A chart's button that shows its data as a table. |
|
|
83
|
+
| `chartHideData` | `string` | `'Hide data'` | A chart's button that hides its data table again. |
|
|
84
|
+
| `chartCategory` | `string` | `'Category'` | The first column header of a chart's data table. |
|
|
85
|
+
| `chartValue` | `string` | `'Value'` | The value column header of a bf-donut-chart's data table. |
|
|
86
|
+
| `chartEmpty` | `string` | `'No data to show'` | bf-chart-card's text when it has no data and no `empty` slot. |
|
|
87
|
+
| `chartError` | `string` | `'The data could not be loaded'` | bf-chart-card's text when its data failed to load and it has no `error` slot. |
|
|
88
|
+
| `listItemUnread` | `string` | `'Unread'` | bf-list-item's visually hidden state text before the title of an `unread` row. |
|
|
89
|
+
| `fileInputChoose` | `(multiple: boolean) => string` | `(multiple) => (multiple ? 'Choose files' : 'Choose file')` | bf-file-input's button text. |
|
|
90
|
+
| `fileInputDropHint` | `(multiple: boolean) => string` | `(multiple) => (multiple ? 'or drop them here' : 'or drop it here')` | bf-file-input's hint beside the button. |
|
|
91
|
+
| `fileInputDropzone` | `(multiple: boolean) => string` | `(multiple) => (multiple ? 'Drag files here or browse' : 'Drag a file here or browse')` | bf-file-input's drop zone text. |
|
|
92
|
+
| `fileInputTapToChoose` | `(multiple: boolean) => string` | `(multiple) => (multiple ? 'Tap to choose files' : 'Tap to choose a file')` | bf-file-input's text under touch input. |
|
|
93
|
+
| `fileInputRemove` | `(name: string) => string` | `` (name) => `Remove ${name}` `` | The accessible name of bf-file-input's remove button for a file. |
|
|
94
|
+
| `fileInputDismiss` | `(name: string) => string` | `` (name) => `Dismiss ${name}` `` | The accessible name of bf-file-input's button that dismisses a rejected file. |
|
|
95
|
+
| `fileInputAdded` | `(count: number) => string` | ``(count) => (count === 1 ? '1 file added' : `${count} files added`)`` | bf-file-input's live announcement after files are added. |
|
|
96
|
+
| `fileInputNotAdded` | `(name: string, reason: string) => string` | `` (name, reason) => `${name} was not added: ${reason}` `` | bf-file-input's live announcement for a rejected file. |
|
|
97
|
+
| `fileInputRemoved` | `(name: string) => string` | `` (name) => `${name} removed` `` | bf-file-input's live announcement after a file is removed. |
|
|
98
|
+
| `fileInputCount` | `(count: number) => string` | ``(count) => (count === 1 ? '1 file' : `${count} files`)`` | bf-file-input's read-only box text for the number of chosen files. |
|
|
99
|
+
| `fileRejectedType` | `string` | `'Not an accepted type'` | The message of a file rejected for its type. |
|
|
100
|
+
| `fileRejectedSize` | `(max: string) => string` | `` (max) => `Too large, max ${max}` `` | The message of a file rejected for its size; `max` is the formatted limit. |
|
|
101
|
+
| `fileRejectedCount` | `(max: number) => string` | `` (max) => `Too many files, max ${max}` `` | The message of a file rejected because the file limit is reached. |
|
|
102
|
+
| `imageInputChoose` | `string` | `'Choose image'` | bf-image-input's accessible name for the empty drop target. |
|
|
103
|
+
| `imageInputUpload` | `string` | `'Upload'` | bf-image-input's text for choosing the first image. |
|
|
104
|
+
| `imageInputReplace` | `string` | `'Replace'` | bf-image-input's text for replacing the image. |
|
|
105
|
+
| `imageInputRemove` | `string` | `'Remove'` | bf-image-input's text for removing the image. |
|
|
106
|
+
| `chatThread` | `string` | `'Conversation'` | bf-chat-thread's accessible name (its `role="log"`) when no `label` is set. |
|
|
107
|
+
| `chatJumpToLatest` | `string` | `'Jump to latest'` | bf-chat-thread's button that scrolls back to the newest message and follows it again. |
|
|
108
|
+
| `chatMessageStopped` | `string` | `'Stopped'` | bf-chat-message's status line for a reply the user stopped. |
|
|
109
|
+
| `chatMessageFailed` | `string` | `'Something went wrong'` | bf-chat-message's status line for a message that failed. |
|
|
110
|
+
| `chatComposer` | `string` | `'Message'` | bf-chat-composer's text field name when no `label` or `ariaLabel` is set. |
|
|
111
|
+
| `chatSend` | `string` | `'Send'` | bf-chat-composer's send button. |
|
|
112
|
+
| `chatStop` | `string` | `'Stop'` | bf-chat-composer's stop button, shown in place of send while a reply runs. |
|
|
113
|
+
| `mediaCardSelect` | `string` | `'Select'` | bf-media-card's select button, read before the card's name ("Select Starfall"). |
|
|
114
|
+
| `imageLoadFailed` | `string` | `'The image could not be loaded'` | bf-media-card's, bf-image-tile's and bf-image-viewer's message for an image that failed to load. |
|
|
115
|
+
| `imageTileEmpty` | `string` | `'No image yet'` | bf-image-tile's placeholder text while it has no image yet. |
|
|
116
|
+
| `imageTileSelected` | `string` | `'Selected'` | bf-image-tile's selected state, read before the tile's title ("Selected, Dragon"). |
|
|
117
|
+
| `imageViewer` | `string` | `'Image viewer'` | bf-image-viewer's name. |
|
|
118
|
+
| `imageViewerPrevious` | `string` | `'Previous image'` | bf-image-viewer's button that shows the previous image. |
|
|
119
|
+
| `imageViewerNext` | `string` | `'Next image'` | bf-image-viewer's button that shows the next image. |
|
|
120
|
+
| `imageViewerPosition` | `(position: number, count: number) => string` | `` (position, count) => `${position} of ${count}` `` | bf-image-viewer's counter: the shown image's position (1-based) among the images. |
|
|
121
|
+
| `validation` | `BfValidationMessages` | required | Default error text per validator kind (see `BfValidationMessages`). |
|
|
90
122
|
|
|
91
123
|
## Uses
|
|
92
124
|
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
# BfMediaCardAspect
|
|
2
|
+
|
|
3
|
+
The four aspect ratios of a media card's image area, wide to portrait
|
|
4
|
+
|
|
5
|
+
Type from `@bitforgehq/ui` · since 0.5.0
|
|
6
|
+
|
|
7
|
+
The aspect ratio of a `bf-media-card`'s image area: 16:9 (default), 4:3, square or 3:4.
|
|
8
|
+
|
|
9
|
+
```ts
|
|
10
|
+
import { type BfMediaCardAspect } from '@bitforgehq/ui';
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
## Signature
|
|
14
|
+
|
|
15
|
+
```ts
|
|
16
|
+
type BfMediaCardAspect = '16/9' | '4/3' | '1/1' | '3/4'
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
## Values
|
|
20
|
+
|
|
21
|
+
- `16/9`
|
|
22
|
+
- `4/3`
|
|
23
|
+
- `1/1`
|
|
24
|
+
- `3/4`
|
|
25
|
+
|
|
26
|
+
## Used by
|
|
27
|
+
|
|
28
|
+
- [bf-media-card](../components/media-card.md)
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
# BfMediaCardHarness
|
|
2
|
+
|
|
3
|
+
Test harness for a media card: its image state, its messages and its selection
|
|
4
|
+
|
|
5
|
+
Class from `@bitforgehq/ui/testing` · since 0.5.0
|
|
6
|
+
|
|
7
|
+
Harness for `bf-media-card`. jsdom never loads images, so `loadImage()` and `failImage()` fire
|
|
8
|
+
the image's `load` and `error` events the way a browser would; `getState()` then tells what the
|
|
9
|
+
image area shows.
|
|
10
|
+
|
|
11
|
+
```ts
|
|
12
|
+
import { BfMediaCardHarness } from '@bitforgehq/ui/testing';
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
## Signature
|
|
16
|
+
|
|
17
|
+
```ts
|
|
18
|
+
class BfMediaCardHarness extends ComponentHarness
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
## Methods
|
|
22
|
+
|
|
23
|
+
### `getTitle(): Promise<string>`
|
|
24
|
+
|
|
25
|
+
The card's title: the text of the first heading in its body.
|
|
26
|
+
|
|
27
|
+
### `getState(): Promise<'empty' | 'loading' | 'loaded' | 'failed'>`
|
|
28
|
+
|
|
29
|
+
What the image area shows: `empty` (no `src`, not loading), `loading` (the skeleton),
|
|
30
|
+
`loaded` (the image) or `failed` (the failure message).
|
|
31
|
+
|
|
32
|
+
### `getSrc(): Promise<string>`
|
|
33
|
+
|
|
34
|
+
The URL of the image.
|
|
35
|
+
|
|
36
|
+
### `getAlt(): Promise<string>`
|
|
37
|
+
|
|
38
|
+
The alternative text of the image.
|
|
39
|
+
|
|
40
|
+
### `getLoadingLabel(): Promise<string>`
|
|
41
|
+
|
|
42
|
+
The caption over the skeleton while loading (the `loading` label when none is set).
|
|
43
|
+
|
|
44
|
+
### `getFailedMessage(): Promise<string>`
|
|
45
|
+
|
|
46
|
+
The failure message.
|
|
47
|
+
|
|
48
|
+
### `loadImage(): Promise<void>`
|
|
49
|
+
|
|
50
|
+
Fires the image's `load` event, as a browser does when it arrives. Throws without one.
|
|
51
|
+
|
|
52
|
+
### `failImage(): Promise<void>`
|
|
53
|
+
|
|
54
|
+
Fires the image's `error` event, as a browser does when it fails. Throws without one.
|
|
55
|
+
|
|
56
|
+
### `isSelectable(): Promise<boolean>`
|
|
57
|
+
|
|
58
|
+
Whether the card has a select button (`selectable`).
|
|
59
|
+
|
|
60
|
+
### `isSelected(): Promise<boolean>`
|
|
61
|
+
|
|
62
|
+
Whether the card is selected (its select button is pressed).
|
|
63
|
+
|
|
64
|
+
### `toggleSelected(): Promise<void>`
|
|
65
|
+
|
|
66
|
+
Clicks the select button, toggling the selection. Throws for a card that is not selectable.
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
# BfMotionListDirective
|
|
2
|
+
|
|
3
|
+
Glides the items of a list or grid to their new place when it changes
|
|
4
|
+
|
|
5
|
+
Directive from `@bitforgehq/ui` · since 0.5.0
|
|
6
|
+
|
|
7
|
+
Glides the items of an app's list or grid to their new place when items are added, removed or
|
|
8
|
+
reordered, instead of letting them jump (the FLIP technique). Put `bfMotionList` on the element
|
|
9
|
+
whose direct children are the items, usually the one around an `@for`. Each item remembers
|
|
10
|
+
where it was; after the DOM changes, every item that moved slides from its old place to its new
|
|
11
|
+
one over 200 ms (`--bf-duration-layout`, on the settle curve). Pair it with Angular's
|
|
12
|
+
`animate.enter="motion-safe:animate-item-enter"` and
|
|
13
|
+
`animate.leave="motion-safe:animate-item-leave"` on the items, so new items fade and rise in and
|
|
14
|
+
removed ones fade out before the rest close the gap. Nothing moves under
|
|
15
|
+
`prefers-reduced-motion: reduce`, and nothing glides when the container is resized. It moves
|
|
16
|
+
items within one container: an item moved to another list leaves one and enters the other.
|
|
17
|
+
|
|
18
|
+
```ts
|
|
19
|
+
import { BfMotionListDirective } from '@bitforgehq/ui';
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
Selector: `[bfMotionList]`
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
# BfPaginationPositionLabel
|
|
2
|
+
|
|
3
|
+
Function that writes a compact pager's position text, such as "v3 of 7"
|
|
4
|
+
|
|
5
|
+
Type from `@bitforgehq/ui` · since 0.5.0
|
|
6
|
+
|
|
7
|
+
Writes a compact `bf-pagination`'s position text from the current page and the page count, such
|
|
8
|
+
as "v3 of 7" for page 3 of 7.
|
|
9
|
+
|
|
10
|
+
```ts
|
|
11
|
+
import { type BfPaginationPositionLabel } from '@bitforgehq/ui';
|
|
12
|
+
```
|
|
13
|
+
|
|
14
|
+
## Signature
|
|
15
|
+
|
|
16
|
+
```ts
|
|
17
|
+
type BfPaginationPositionLabel = (page: number, count: number) => string
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
## Used by
|
|
21
|
+
|
|
22
|
+
- [bf-pagination](../components/pagination.md)
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
# BfProseDirective
|
|
2
|
+
|
|
3
|
+
Styles rendered markdown with the library tokens: headings, lists, code and quotes
|
|
4
|
+
|
|
5
|
+
Directive from `@bitforgehq/ui` · since 0.5.0
|
|
6
|
+
|
|
7
|
+
Styles rendered markdown inside its element: headings, paragraphs, lists, links, inline code,
|
|
8
|
+
code blocks, quotes and rules, through the semantic tokens only (so a theme override restyles
|
|
9
|
+
it). The app renders the markdown to HTML itself (and sanitises it); `bfProse` only styles it.
|
|
10
|
+
A `bf-chat-message` body is a `bfProse` element already.
|
|
11
|
+
|
|
12
|
+
```ts
|
|
13
|
+
import { BfProseDirective } from '@bitforgehq/ui';
|
|
14
|
+
```
|
|
15
|
+
|
|
16
|
+
Selector: `[bfProse]`
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
# BfRejectedFileReason
|
|
2
|
+
|
|
3
|
+
The rule a refused file broke, its type, its size or the file count
|
|
4
|
+
|
|
5
|
+
Type from `@bitforgehq/ui` · since 0.5.0
|
|
6
|
+
|
|
7
|
+
The rule a refused file broke: `type` (not accepted), `size` (over `maxSize`) or `count` (over
|
|
8
|
+
the limit).
|
|
9
|
+
|
|
10
|
+
```ts
|
|
11
|
+
import { type BfRejectedFileReason } from '@bitforgehq/ui';
|
|
12
|
+
```
|
|
13
|
+
|
|
14
|
+
## Signature
|
|
15
|
+
|
|
16
|
+
```ts
|
|
17
|
+
type BfRejectedFileReason = 'type' | 'size' | 'count'
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
## Values
|
|
21
|
+
|
|
22
|
+
- `type`
|
|
23
|
+
- `size`
|
|
24
|
+
- `count`
|
|
25
|
+
|
|
26
|
+
## Used by
|
|
27
|
+
|
|
28
|
+
- [BfRejectedFile](bf-rejected-file.md)
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
# BfRejectedFile
|
|
2
|
+
|
|
3
|
+
A picked or dropped file that broke a rule, with the rule and its message
|
|
4
|
+
|
|
5
|
+
Interface from `@bitforgehq/ui` · since 0.5.0
|
|
6
|
+
|
|
7
|
+
A picked or dropped file that broke a rule, with the rule and its message.
|
|
8
|
+
|
|
9
|
+
```ts
|
|
10
|
+
import { type BfRejectedFile } from '@bitforgehq/ui';
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
## Properties
|
|
14
|
+
|
|
15
|
+
| Name | Type | Default | Description |
|
|
16
|
+
| --------- | ------------------------------------------------------ | -------- | ---------------------------------------------------------------------------------------------- |
|
|
17
|
+
| `file` | `File` | required | The file that was not added. |
|
|
18
|
+
| `reason` | `BfRejectedFileReason` (`'type' \| 'size' \| 'count'`) | required | The rule it broke: `type` (not accepted), `size` (over `maxSize`) or `count` (over the limit). |
|
|
19
|
+
| `message` | `string` | required | The user-facing text for the rule, from the labels. |
|
|
20
|
+
|
|
21
|
+
## Uses
|
|
22
|
+
|
|
23
|
+
- [BfRejectedFileReason](bf-rejected-file-reason.md)
|
|
24
|
+
|
|
25
|
+
## Used by
|
|
26
|
+
|
|
27
|
+
- [bf-file-input](../components/file-input.md)
|
|
28
|
+
- [bf-image-input](../components/image-input.md)
|
|
@@ -4,8 +4,11 @@ Test harness for the select: reads its label and options and picks one
|
|
|
4
4
|
|
|
5
5
|
Class from `@bitforgehq/ui/testing` · since 0.3.0
|
|
6
6
|
|
|
7
|
-
Harness for `bf-select
|
|
8
|
-
|
|
7
|
+
Harness for `bf-select`, in both modes: the styled list under a mouse (its options render in the
|
|
8
|
+
CDK overlay container while open, found through the field's `aria-controls`) and the native
|
|
9
|
+
`<select>` under a coarse pointer. It also drives the native select with `data-bf-select` that a
|
|
10
|
+
stacked `bf-table` renders as its Sort by select without `provideBfSelect()`. It works by option
|
|
11
|
+
label, so a test never needs the option values (an object option's native value is its index).
|
|
9
12
|
|
|
10
13
|
```ts
|
|
11
14
|
import { BfSelectHarness } from '@bitforgehq/ui/testing';
|
|
@@ -23,6 +26,11 @@ class BfSelectHarness extends ComponentHarness
|
|
|
23
26
|
|
|
24
27
|
The visible label without the required mark, else the `aria-label`.
|
|
25
28
|
|
|
29
|
+
### `isOpen(): Promise<boolean>`
|
|
30
|
+
|
|
31
|
+
Whether the styled option list is open (`aria-expanded`). Always false for the native select,
|
|
32
|
+
whose list belongs to the platform.
|
|
33
|
+
|
|
26
34
|
### `getValueLabel(): Promise<string>`
|
|
27
35
|
|
|
28
36
|
The selected option's label, `''` while nothing is selected.
|
|
@@ -35,7 +43,8 @@ The labels of the options, in order, without the placeholder.
|
|
|
35
43
|
|
|
36
44
|
Chooses the option with this label, as a user would: the select's `value` becomes that
|
|
37
45
|
option's value. Throws, leaving the value as it is, for an unknown or disabled option and
|
|
38
|
-
while the select itself is disabled.
|
|
46
|
+
while the select itself is disabled. On a read-only select it changes nothing, in both modes:
|
|
47
|
+
the styled list does not open, and the native select restores the shown option.
|
|
39
48
|
|
|
40
49
|
| Parameter | Type | Description |
|
|
41
50
|
| --------- | -------- | ------------------- |
|
|
@@ -63,11 +72,11 @@ The help text under the select; it is hidden while an error shows.
|
|
|
63
72
|
|
|
64
73
|
### `focus(): Promise<void>`
|
|
65
74
|
|
|
66
|
-
Focuses the native select.
|
|
75
|
+
Focuses the field, or the native select.
|
|
67
76
|
|
|
68
77
|
### `blur(): Promise<void>`
|
|
69
78
|
|
|
70
|
-
Blurs the native select, which marks a bound form field touched.
|
|
79
|
+
Blurs the field, or the native select, which marks a bound form field touched.
|
|
71
80
|
|
|
72
81
|
## Used by
|
|
73
82
|
|
package/ai/reference/bf-size.md
CHANGED
|
@@ -27,6 +27,7 @@ type BfSize = 'sm' | 'md' | 'lg'
|
|
|
27
27
|
- [bf-button](../components/button.md)
|
|
28
28
|
- [BfButtonSize](bf-button-size.md)
|
|
29
29
|
- [bf-calendar](../components/calendar.md)
|
|
30
|
+
- [bf-chat-composer](../components/chat-composer.md)
|
|
30
31
|
- [bf-checkbox](../components/checkbox.md)
|
|
31
32
|
- [bf-chip](../components/chip.md)
|
|
32
33
|
- [bf-combobox](../components/combobox.md)
|
|
@@ -36,7 +37,9 @@ type BfSize = 'sm' | 'md' | 'lg'
|
|
|
36
37
|
- [BfDefaultsOptions](bf-defaults-options.md)
|
|
37
38
|
- [BfFieldControlState](bf-field-control-state.md)
|
|
38
39
|
- [BfFieldSize](bf-field-size.md)
|
|
40
|
+
- [bf-file-input](../components/file-input.md)
|
|
39
41
|
- [bf-icon-button](../components/icon-button.md)
|
|
42
|
+
- [bf-image-input](../components/image-input.md)
|
|
40
43
|
- [bf-input](../components/input.md)
|
|
41
44
|
- [bf-menu-button](../components/menu-button.md)
|
|
42
45
|
- [bf-menu](../components/menu.md)
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
# BF_TABLE_SORT_SELECT
|
|
2
|
+
|
|
3
|
+
The component a stacked table renders as its Sort by select
|
|
4
|
+
|
|
5
|
+
Injection token from `@bitforgehq/ui` · since 0.5.0
|
|
6
|
+
|
|
7
|
+
The component a stacked `bf-table` renders as its Sort by select; `null` (the default) keeps the
|
|
8
|
+
built-in native `<select>`. `provideBfSelect()` from `@bitforgehq/ui/overlay` sets it to the
|
|
9
|
+
styled `bf-select`, so the core entry never imports the overlay entry. A component given here
|
|
10
|
+
must take the inputs `label` (string), `options` (`BfSelectOption<string>[]`) and `value`
|
|
11
|
+
(string) and emit the picked value from the output `changed`. The table adds its layout classes
|
|
12
|
+
to the component's host with `classList`, so the component must not overwrite its host
|
|
13
|
+
`className` or `class` attribute directly.
|
|
14
|
+
|
|
15
|
+
```ts
|
|
16
|
+
import { BF_TABLE_SORT_SELECT } from '@bitforgehq/ui';
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
## Signature
|
|
20
|
+
|
|
21
|
+
```ts
|
|
22
|
+
const BF_TABLE_SORT_SELECT: InjectionToken<Type<unknown> | null>
|
|
23
|
+
```
|
|
@@ -17,9 +17,17 @@ every string. In a component's `providers` it covers that sub-tree's widgets and
|
|
|
17
17
|
`dateInputUnavailable`, `timeInputHour`, `timeInputMinute`, `timeInputSecond`,
|
|
18
18
|
`timeInputDayPeriod`, `timeInputOpenList`, `timeInputInvalid`, `timeInputMin`, `timeInputMax`,
|
|
19
19
|
`chart`, `chartLegend`, `chartValues`, `chartShowData`, `chartHideData`, `chartCategory`,
|
|
20
|
-
`chartValue`, `chartEmpty`, `chartError`, `listItemUnread`,
|
|
21
|
-
`
|
|
22
|
-
`
|
|
20
|
+
`chartValue`, `chartEmpty`, `chartError`, `listItemUnread`,
|
|
21
|
+
`fileInputChoose`, `fileInputDropHint`, `fileInputDropzone`, `fileInputTapToChoose`, `fileInputRemove`,
|
|
22
|
+
`fileInputDismiss`, `fileInputAdded`, `fileInputNotAdded`, `fileInputRemoved`, `fileInputCount`,
|
|
23
|
+
`fileRejectedType`, `fileRejectedSize`, `fileRejectedCount`,
|
|
24
|
+
`imageInputChoose`, `imageInputUpload`, `imageInputReplace`, `imageInputRemove`,
|
|
25
|
+
`chatThread`, `chatJumpToLatest`, `chatMessageStopped`, `chatMessageFailed`, `chatComposer`,
|
|
26
|
+
`chatSend`, `chatStop`, `mediaCardSelect`, `imageLoadFailed`, `imageTileEmpty`,
|
|
27
|
+
`imageTileSelected`, `validation`); the overlay
|
|
28
|
+
services (`ok`, `cancel`, `actions`, `sheet`, `modal`, `close`, `expand`, `collapse`,
|
|
29
|
+
`sheetPosition`, `dialog`, `notifications`, `imageViewer`, `imageViewerPrevious`,
|
|
30
|
+
`imageViewerNext`, `imageViewerPosition`) are root singletons and pick it up only when the caller passes its injector:
|
|
23
31
|
`open(…, { injector: inject(Injector) })`.
|
|
24
32
|
|
|
25
33
|
```ts
|