@thebase/ui 1.1.3 → 1.1.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 +18 -18
- package/README.md +20 -20
- package/bin/create-baseui-app.mjs +7 -7
- package/dist/baseui.apidoc.esm.js +935 -0
- package/dist/baseui.apidoc.min.js +936 -0
- package/dist/baseui.esm.js +1 -1
- package/dist/baseui.min.js +1 -1
- package/dist/baseui.registry.json +3 -3
- package/dist/baseui.templates.xml +1 -1
- package/dist/types/apidoc.d.ts +27 -0
- package/docs/analytics.md +3 -3
- package/docs/blocks.md +5 -5
- package/docs/components/accordion.md +3 -3
- package/docs/components/alert-dialog.md +2 -2
- package/docs/components/alert.md +2 -2
- package/docs/components/apidoc.md +17 -4
- package/docs/components/aspect-ratio.md +2 -2
- package/docs/components/attachment.md +3 -3
- package/docs/components/avatar.md +5 -5
- package/docs/components/badge.md +2 -2
- package/docs/components/block-viewer.md +4 -4
- package/docs/components/breadcrumb.md +3 -3
- package/docs/components/bubble.md +2 -2
- package/docs/components/button-group.md +2 -2
- package/docs/components/button.md +2 -2
- package/docs/components/calendar.md +5 -5
- package/docs/components/card.md +2 -2
- package/docs/components/carousel.md +5 -5
- package/docs/components/chart.md +5 -5
- package/docs/components/checkbox.md +2 -2
- package/docs/components/clipboard-button.md +2 -2
- package/docs/components/collapsible.md +2 -2
- package/docs/components/combobox.md +5 -5
- package/docs/components/command.md +5 -5
- package/docs/components/context-menu.md +5 -5
- package/docs/components/data-table.md +6 -6
- package/docs/components/date-picker.md +5 -5
- package/docs/components/dialog.md +4 -4
- package/docs/components/direction.md +2 -2
- package/docs/components/drawer.md +3 -3
- package/docs/components/dropdown-menu.md +3 -3
- package/docs/components/empty.md +3 -3
- package/docs/components/field.md +1 -1
- package/docs/components/form.md +3 -3
- package/docs/components/hover-card.md +2 -2
- package/docs/components/icon.md +3 -3
- package/docs/components/input-group.md +2 -2
- package/docs/components/input-otp.md +5 -5
- package/docs/components/input.md +5 -5
- package/docs/components/item.md +2 -2
- package/docs/components/kbd.md +2 -2
- package/docs/components/label.md +2 -2
- package/docs/components/markdown.md +3 -3
- package/docs/components/marker.md +2 -2
- package/docs/components/menubar.md +2 -2
- package/docs/components/message-scroller.md +5 -5
- package/docs/components/message.md +5 -5
- package/docs/components/native-select.md +2 -2
- package/docs/components/navigation-menu.md +3 -3
- package/docs/components/pagination.md +3 -3
- package/docs/components/popover.md +7 -7
- package/docs/components/progress.md +2 -2
- package/docs/components/pwa.md +2 -2
- package/docs/components/questionnaire.md +5 -5
- package/docs/components/radio-group.md +2 -2
- package/docs/components/resizable.md +5 -5
- package/docs/components/scroll-area.md +5 -5
- package/docs/components/select.md +2 -2
- package/docs/components/separator.md +2 -2
- package/docs/components/sheet.md +3 -3
- package/docs/components/shell.md +2 -2
- package/docs/components/sidebar.md +2 -2
- package/docs/components/skeleton.md +2 -2
- package/docs/components/slider.md +2 -2
- package/docs/components/spinner.md +3 -3
- package/docs/components/switch.md +2 -2
- package/docs/components/table.md +2 -2
- package/docs/components/tabs.md +4 -4
- package/docs/components/text-editor.md +2 -2
- package/docs/components/textarea.md +3 -3
- package/docs/components/theme-button.md +4 -4
- package/docs/components/toast.md +3 -3
- package/docs/components/toggle-group.md +5 -5
- package/docs/components/toggle.md +5 -5
- package/docs/components/tooltip.md +7 -7
- package/docs/components/typography.md +3 -3
- package/docs/icons.md +7 -7
- package/docs/installation.md +12 -11
- package/docs/owl-components.md +16 -16
- package/docs/registry.md +8 -8
- package/docs/runtime-api.md +3 -3
- package/docs/theming.md +4 -4
- package/docs/usage-guide.md +21 -21
- package/package.json +8 -1
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Use `b-ui="collapsible"` for a single disclosure region.
|
|
4
4
|
|
|
5
|
-
##
|
|
5
|
+
## Base component
|
|
6
6
|
|
|
7
7
|
```js
|
|
8
8
|
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@thebase/ui";
|
|
@@ -28,7 +28,7 @@ import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@thebase/ui
|
|
|
28
28
|
| `CollapsibleContent` | `className` | `String` | optional |
|
|
29
29
|
| `CollapsibleTrigger` | `className` | `String` | optional |
|
|
30
30
|
|
|
31
|
-
See [
|
|
31
|
+
See [Base Components](/examples/blocks.html#/docs/guide/owl-components) for how to load `@base/owl` and `dist/baseui.templates.xml`.
|
|
32
32
|
|
|
33
33
|
## Static component
|
|
34
34
|
|
|
@@ -4,9 +4,9 @@ Use `b-ui="combobox"` for a CDN-ready combobox component.
|
|
|
4
4
|
|
|
5
5
|
## CDN install requirements
|
|
6
6
|
|
|
7
|
-
Load the pinned
|
|
7
|
+
Load the pinned the Base UI CSS and JavaScript files; no extra dependency is required for this component.
|
|
8
8
|
|
|
9
|
-
##
|
|
9
|
+
## Base component
|
|
10
10
|
|
|
11
11
|
```js
|
|
12
12
|
import { Combobox } from "@thebase/ui";
|
|
@@ -33,7 +33,7 @@ import { Combobox } from "@thebase/ui";
|
|
|
33
33
|
| `Combobox` | `id` | `String` | optional, e.g. for `Label`'s `for` |
|
|
34
34
|
| `Combobox` | `onChange` | `Function` | optional |
|
|
35
35
|
|
|
36
|
-
See [
|
|
36
|
+
See [Base Components](/examples/blocks.html#/docs/guide/owl-components) for how to load `@base/owl` and `dist/baseui.templates.xml`.
|
|
37
37
|
|
|
38
38
|
## Static component
|
|
39
39
|
|
|
@@ -59,7 +59,7 @@ Interactive components emit documented `baseui:*` events from their root element
|
|
|
59
59
|
|
|
60
60
|
## CSS variables
|
|
61
61
|
|
|
62
|
-
The component inherits
|
|
62
|
+
The component inherits the Base UI semantic tokens such as `--b-surface`, `--b-border`, `--b-primary`, and `--b-radius`.
|
|
63
63
|
|
|
64
64
|
## Accessibility behavior
|
|
65
65
|
|
|
@@ -71,7 +71,7 @@ See `examples/index.html` for a working CDN-style page.
|
|
|
71
71
|
|
|
72
72
|
## Browser support
|
|
73
73
|
|
|
74
|
-
|
|
74
|
+
The Base UI targets modern evergreen browsers that support ES modules, CSS variables, and Bootstrap 5.3.
|
|
75
75
|
|
|
76
76
|
## Test checklist
|
|
77
77
|
|
|
@@ -4,9 +4,9 @@ Use `b-ui="command"` for a CDN-ready command component.
|
|
|
4
4
|
|
|
5
5
|
## CDN install requirements
|
|
6
6
|
|
|
7
|
-
Load the pinned
|
|
7
|
+
Load the pinned the Base UI CSS and JavaScript files; no extra dependency is required for this component.
|
|
8
8
|
|
|
9
|
-
##
|
|
9
|
+
## Base component
|
|
10
10
|
|
|
11
11
|
```js
|
|
12
12
|
import { Command } from "@thebase/ui";
|
|
@@ -36,7 +36,7 @@ import { Command } from "@thebase/ui";
|
|
|
36
36
|
| `Command` | `className` | `String` | optional |
|
|
37
37
|
| `Command` | `onSelect` | `Function` | optional |
|
|
38
38
|
|
|
39
|
-
See [
|
|
39
|
+
See [Base Components](/examples/blocks.html#/docs/guide/owl-components) for how to load `@base/owl` and `dist/baseui.templates.xml`.
|
|
40
40
|
|
|
41
41
|
## Static component
|
|
42
42
|
|
|
@@ -62,7 +62,7 @@ Interactive components emit documented `baseui:*` events from their root element
|
|
|
62
62
|
|
|
63
63
|
## CSS variables
|
|
64
64
|
|
|
65
|
-
The component inherits
|
|
65
|
+
The component inherits the Base UI semantic tokens such as `--b-surface`, `--b-border`, `--b-primary`, and `--b-radius`.
|
|
66
66
|
|
|
67
67
|
## Accessibility behavior
|
|
68
68
|
|
|
@@ -74,7 +74,7 @@ See `examples/index.html` for a working CDN-style page.
|
|
|
74
74
|
|
|
75
75
|
## Browser support
|
|
76
76
|
|
|
77
|
-
|
|
77
|
+
The Base UI targets modern evergreen browsers that support ES modules, CSS variables, and Bootstrap 5.3.
|
|
78
78
|
|
|
79
79
|
## Test checklist
|
|
80
80
|
|
|
@@ -4,9 +4,9 @@ Use `b-ui="context-menu"` for a CDN-ready context menu component.
|
|
|
4
4
|
|
|
5
5
|
## CDN install requirements
|
|
6
6
|
|
|
7
|
-
Load the pinned
|
|
7
|
+
Load the pinned the Base UI CSS and JavaScript files; no extra dependency is required for this component.
|
|
8
8
|
|
|
9
|
-
##
|
|
9
|
+
## Base component
|
|
10
10
|
|
|
11
11
|
```js
|
|
12
12
|
import { ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuTrigger } from "@thebase/ui";
|
|
@@ -38,7 +38,7 @@ import { ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuTrigger }
|
|
|
38
38
|
| `ContextMenuItem` | `onClick` | `Function` | optional |
|
|
39
39
|
| `ContextMenuTrigger` | `className` | `String` | optional |
|
|
40
40
|
|
|
41
|
-
See [
|
|
41
|
+
See [Base Components](/examples/blocks.html#/docs/guide/owl-components) for how to load `@base/owl` and `dist/baseui.templates.xml`.
|
|
42
42
|
|
|
43
43
|
## Static component
|
|
44
44
|
|
|
@@ -64,7 +64,7 @@ Interactive components emit documented `baseui:*` events from their root element
|
|
|
64
64
|
|
|
65
65
|
## CSS variables
|
|
66
66
|
|
|
67
|
-
The component inherits
|
|
67
|
+
The component inherits the Base UI semantic tokens such as `--b-surface`, `--b-border`, `--b-primary`, and `--b-radius`.
|
|
68
68
|
|
|
69
69
|
## Accessibility behavior
|
|
70
70
|
|
|
@@ -76,7 +76,7 @@ See `examples/index.html` for a working CDN-style page.
|
|
|
76
76
|
|
|
77
77
|
## Browser support
|
|
78
78
|
|
|
79
|
-
|
|
79
|
+
The Base UI targets modern evergreen browsers that support ES modules, CSS variables, and Bootstrap 5.3.
|
|
80
80
|
|
|
81
81
|
## Test checklist
|
|
82
82
|
|
|
@@ -4,9 +4,9 @@ Use `b-ui="data-table"` for a CDN-ready data table component.
|
|
|
4
4
|
|
|
5
5
|
## CDN install requirements
|
|
6
6
|
|
|
7
|
-
Load the pinned
|
|
7
|
+
Load the pinned the Base UI CSS and JavaScript files; no extra dependency is required for this component.
|
|
8
8
|
|
|
9
|
-
##
|
|
9
|
+
## Base component
|
|
10
10
|
|
|
11
11
|
```js
|
|
12
12
|
import { DataTable } from "@thebase/ui";
|
|
@@ -62,9 +62,9 @@ The table viewport always scrolls horizontally (`overflow: auto`) once its conte
|
|
|
62
62
|
|
|
63
63
|
### Mobile kanban view
|
|
64
64
|
|
|
65
|
-
Below 640px width, the table view is replaced by a stacked one-column card ("kanban") view — each row becomes a card showing every visible column as a label/value pair, with selection and row actions preserved. This is CSS-driven (`.bu-data-table__viewport` hides, `.bu-data-table__cards` shows), so it applies to both the
|
|
65
|
+
Below 640px width, the table view is replaced by a stacked one-column card ("kanban") view — each row becomes a card showing every visible column as a label/value pair, with selection and row actions preserved. This is CSS-driven (`.bu-data-table__viewport` hides, `.bu-data-table__cards` shows), so it applies to both the Base component and the static `b-ui="data-table"` markup automatically.
|
|
66
66
|
|
|
67
|
-
See [
|
|
67
|
+
See [Base Components](/examples/blocks.html#/docs/guide/owl-components) for how to load `@base/owl` and `dist/baseui.templates.xml`.
|
|
68
68
|
|
|
69
69
|
## Static component
|
|
70
70
|
|
|
@@ -90,7 +90,7 @@ Interactive components emit documented `baseui:*` events from their root element
|
|
|
90
90
|
|
|
91
91
|
## CSS variables
|
|
92
92
|
|
|
93
|
-
The component inherits
|
|
93
|
+
The component inherits the Base UI semantic tokens such as `--b-surface`, `--b-border`, `--b-primary`, and `--b-radius`.
|
|
94
94
|
|
|
95
95
|
## Accessibility behavior
|
|
96
96
|
|
|
@@ -150,7 +150,7 @@ Pass custom buttons into the toolbar via the `toolbarActions` slot — they rend
|
|
|
150
150
|
|
|
151
151
|
## Browser support
|
|
152
152
|
|
|
153
|
-
|
|
153
|
+
The Base UI targets modern evergreen browsers that support ES modules, CSS variables, and Bootstrap 5.3.
|
|
154
154
|
|
|
155
155
|
## Test checklist
|
|
156
156
|
|
|
@@ -4,9 +4,9 @@ Use `b-ui="date-picker"` for a CDN-ready date picker component.
|
|
|
4
4
|
|
|
5
5
|
## CDN install requirements
|
|
6
6
|
|
|
7
|
-
Load the pinned
|
|
7
|
+
Load the pinned the Base UI CSS and JavaScript files; no extra dependency is required for this component.
|
|
8
8
|
|
|
9
|
-
##
|
|
9
|
+
## Base component
|
|
10
10
|
|
|
11
11
|
```js
|
|
12
12
|
import { DatePicker } from "@thebase/ui";
|
|
@@ -26,7 +26,7 @@ import { DatePicker } from "@thebase/ui";
|
|
|
26
26
|
| `DatePicker` | `className` | `String` | optional |
|
|
27
27
|
| `DatePicker` | `onChange` | `Function` | optional |
|
|
28
28
|
|
|
29
|
-
See [
|
|
29
|
+
See [Base Components](/examples/blocks.html#/docs/guide/owl-components) for how to load `@base/owl` and `dist/baseui.templates.xml`.
|
|
30
30
|
|
|
31
31
|
## Static component
|
|
32
32
|
|
|
@@ -52,7 +52,7 @@ Interactive components emit documented `baseui:*` events from their root element
|
|
|
52
52
|
|
|
53
53
|
## CSS variables
|
|
54
54
|
|
|
55
|
-
The component inherits
|
|
55
|
+
The component inherits the Base UI semantic tokens such as `--b-surface`, `--b-border`, `--b-primary`, and `--b-radius`.
|
|
56
56
|
|
|
57
57
|
## Accessibility behavior
|
|
58
58
|
|
|
@@ -64,7 +64,7 @@ See `examples/index.html` for a working CDN-style page.
|
|
|
64
64
|
|
|
65
65
|
## Browser support
|
|
66
66
|
|
|
67
|
-
|
|
67
|
+
The Base UI targets modern evergreen browsers that support ES modules, CSS variables, and Bootstrap 5.3.
|
|
68
68
|
|
|
69
69
|
## Test checklist
|
|
70
70
|
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# Dialog
|
|
2
2
|
|
|
3
|
-
##
|
|
3
|
+
## Base component
|
|
4
4
|
|
|
5
5
|
```js
|
|
6
6
|
import {
|
|
@@ -31,7 +31,7 @@ import {
|
|
|
31
31
|
| `defaultOpen` | `Boolean` | initial state when uncontrolled |
|
|
32
32
|
| `onOpenChange` | `Function` | called with the new open boolean |
|
|
33
33
|
|
|
34
|
-
`DialogContent` also accepts `showCloseButton` (default `true`) to render the shadcn-style top-right close control; pass `false` to hide it. `DialogTrigger`, `DialogContent`, `DialogHeader`, `DialogFooter`, `DialogTitle`, `DialogDescription`, and `DialogClose` each accept `className` and render default slot content; they read open/close behavior from the parent `Dialog` automatically. `DialogContent` is driven by a real `bootstrap.Modal` instance bound to its own root (rendered as `.modal.fade > .modal-dialog > .modal-content`, permanently mounted rather than added/removed from the DOM) — Escape, backdrop click, the built-in close control, and `DialogClose` (both wired via `data-bs-dismiss="modal"`) all close the dialog, and the Tab focus trap plus initial-focus/focus-restore on open/close are Bootstrap's own native Modal behavior, same as the static API. See [
|
|
34
|
+
`DialogContent` also accepts `showCloseButton` (default `true`) to render the shadcn-style top-right close control; pass `false` to hide it. `DialogTrigger`, `DialogContent`, `DialogHeader`, `DialogFooter`, `DialogTitle`, `DialogDescription`, and `DialogClose` each accept `className` and render default slot content; they read open/close behavior from the parent `Dialog` automatically. `DialogContent` is driven by a real `bootstrap.Modal` instance bound to its own root (rendered as `.modal.fade > .modal-dialog > .modal-content`, permanently mounted rather than added/removed from the DOM) — Escape, backdrop click, the built-in close control, and `DialogClose` (both wired via `data-bs-dismiss="modal"`) all close the dialog, and the Tab focus trap plus initial-focus/focus-restore on open/close are Bootstrap's own native Modal behavior, same as the static API. See [Base Components](/examples/blocks.html#/docs/guide/owl-components) for how to load `@base/owl` and `dist/baseui.templates.xml`.
|
|
35
35
|
|
|
36
36
|
## Static component
|
|
37
37
|
|
|
@@ -65,8 +65,8 @@ import {
|
|
|
65
65
|
</div>
|
|
66
66
|
```
|
|
67
67
|
|
|
68
|
-
At mount,
|
|
68
|
+
At mount, the Base UI restructures this markup into Bootstrap's required shape: the `[b-ui="dialog"]` root becomes the `.modal.fade` element and `[b-dialog-panel]` is wrapped in a new `.modal-dialog` and becomes `.modal-content` — you don't need to author those wrapper levels yourself. The dialog is driven by a real `bootstrap.Modal` instance (`backdrop: true, keyboard: true, focus: true`, all Bootstrap defaults); `[b-dialog-close]` buttons get `data-bs-dismiss="modal"` at mount time instead of a manual click handler.
|
|
69
69
|
|
|
70
|
-
Events: `baseui:open`, `baseui:close` (
|
|
70
|
+
Events: `baseui:open`, `baseui:close` (the Base UI), plus the underlying `shown.bs.modal`/`hidden.bs.modal`.
|
|
71
71
|
|
|
72
72
|
Keyboard: Escape closes the dialog (Bootstrap's native `keyboard` option), as does a backdrop click. Focus moves into the panel on open and is trapped there via Tab/Shift+Tab, then returns to the trigger on close — all native `bootstrap.Modal` behavior.
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# Direction
|
|
2
2
|
|
|
3
|
-
##
|
|
3
|
+
## Base component
|
|
4
4
|
|
|
5
5
|
```js
|
|
6
6
|
import { Direction } from "@thebase/ui";
|
|
@@ -51,7 +51,7 @@ import { Direction } from "@thebase/ui";
|
|
|
51
51
|
| `Direction` | `dir` | `String` | optional |
|
|
52
52
|
| `Direction` | `className` | `String` | optional |
|
|
53
53
|
|
|
54
|
-
See [
|
|
54
|
+
See [Base Components](/examples/blocks.html#/docs/guide/owl-components) for how to load `@base/owl` and `dist/baseui.templates.xml`.
|
|
55
55
|
|
|
56
56
|
## Static component
|
|
57
57
|
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# Drawer
|
|
2
2
|
|
|
3
|
-
##
|
|
3
|
+
## Base component
|
|
4
4
|
|
|
5
5
|
```js
|
|
6
6
|
import { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger } from "@thebase/ui";
|
|
@@ -38,7 +38,7 @@ import { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, Dr
|
|
|
38
38
|
| `DrawerTitle` | `className` | `String` | optional |
|
|
39
39
|
| `DrawerTrigger` | `className` | `String` | optional |
|
|
40
40
|
|
|
41
|
-
`DrawerContent` is driven by a real `bootstrap.Offcanvas` instance bound to its own root (rendered as `.offcanvas.offcanvas-bottom`, permanently mounted rather than added/removed from the DOM) — Escape, backdrop click, and the Tab focus trap are Bootstrap's own native Offcanvas behavior, same as the static API; focus-restore-to-trigger on close is kept by hand (not native to Offcanvas). `DrawerClose` closes via `data-bs-dismiss="offcanvas"`. Drawer has no side variant — it always slides up from the bottom. See [
|
|
41
|
+
`DrawerContent` is driven by a real `bootstrap.Offcanvas` instance bound to its own root (rendered as `.offcanvas.offcanvas-bottom`, permanently mounted rather than added/removed from the DOM) — Escape, backdrop click, and the Tab focus trap are Bootstrap's own native Offcanvas behavior, same as the static API; focus-restore-to-trigger on close is kept by hand (not native to Offcanvas). `DrawerClose` closes via `data-bs-dismiss="offcanvas"`. Drawer has no side variant — it always slides up from the bottom. See [Base Components](/examples/blocks.html#/docs/guide/owl-components) for how to load `@base/owl` and `dist/baseui.templates.xml`.
|
|
42
42
|
|
|
43
43
|
## Static component
|
|
44
44
|
|
|
@@ -53,6 +53,6 @@ import { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, Dr
|
|
|
53
53
|
|
|
54
54
|
At mount, `[b-ui="drawer"]` itself becomes the `.offcanvas.offcanvas-bottom` element (`tabindex="-1"`) driven by a real `bootstrap.Offcanvas` instance (`backdrop: true, keyboard: true, scroll: false`); `[b-drawer-panel]` stays as a plain cosmetic content box inside it. `[b-drawer-close]` buttons get `data-bs-dismiss="offcanvas"` at mount time instead of a manual click handler.
|
|
55
55
|
|
|
56
|
-
Events: `baseui:open`, `baseui:close` (
|
|
56
|
+
Events: `baseui:open`, `baseui:close` (the Base UI), plus the underlying `shown.bs.offcanvas`/`hidden.bs.offcanvas`.
|
|
57
57
|
|
|
58
58
|
Keyboard: Escape closes the drawer (Bootstrap's native `keyboard` option), as does a backdrop click on the Bootstrap-generated `.offcanvas-backdrop`. Focus is trapped inside via Tab/Shift+Tab (native `bootstrap.Offcanvas` focus trap) and returns to the trigger on close (kept by hand — not native to Offcanvas).
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Displays a menu to the user, such as a set of actions or functions, triggered by a button.
|
|
4
4
|
|
|
5
|
-
##
|
|
5
|
+
## Base component
|
|
6
6
|
|
|
7
7
|
```js
|
|
8
8
|
import {
|
|
@@ -68,7 +68,7 @@ import {
|
|
|
68
68
|
| `DropdownMenuRadioItem` | `value` | `String` | optional |
|
|
69
69
|
| `DropdownMenuLabel`, `DropdownMenuShortcut`, `DropdownMenuSeparator`, `DropdownMenuGroup` | `className` | `String` | optional |
|
|
70
70
|
|
|
71
|
-
See [
|
|
71
|
+
See [Base Components](/examples/blocks.html#/docs/guide/owl-components) for how to load `@base/owl` and `dist/baseui.templates.xml`.
|
|
72
72
|
|
|
73
73
|
## Static component
|
|
74
74
|
|
|
@@ -106,4 +106,4 @@ See [Pure Owl Components](/examples/blocks.html#/docs/guide/owl-components) for
|
|
|
106
106
|
</div>
|
|
107
107
|
```
|
|
108
108
|
|
|
109
|
-
The trigger supports click, ArrowDown, and Escape. Root open/close is driven by a real `bootstrap.Dropdown` instance on the trigger (the panel carries Bootstrap's `dropdown-menu`/`show` classes); submenus remain
|
|
109
|
+
The trigger supports click, ArrowDown, and Escape. Root open/close is driven by a real `bootstrap.Dropdown` instance on the trigger (the panel carries Bootstrap's `dropdown-menu`/`show` classes); submenus remain the Base UI's own hover/click behavior. Events: `baseui:open`, `baseui:close` (the Base UI), plus the underlying `show.bs.dropdown`/`shown.bs.dropdown`/`hide.bs.dropdown`/`hidden.bs.dropdown`.
|
package/docs/components/empty.md
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Use `b-ui="empty"` for an accessible empty state. The component mirrors shadcn's Base Empty composition: header, media, title, description, and content.
|
|
4
4
|
|
|
5
|
-
##
|
|
5
|
+
## Base component
|
|
6
6
|
|
|
7
7
|
```js
|
|
8
8
|
import {
|
|
@@ -46,7 +46,7 @@ import {
|
|
|
46
46
|
| `EmptyDescription` | `className` | `String` | optional |
|
|
47
47
|
| `EmptyContent` | `className` | `String` | optional |
|
|
48
48
|
|
|
49
|
-
See [
|
|
49
|
+
See [Base Components](/examples/blocks.html#/docs/guide/owl-components) for how to load `@base/owl` and `dist/baseui.templates.xml`.
|
|
50
50
|
|
|
51
51
|
## Static component
|
|
52
52
|
|
|
@@ -63,4 +63,4 @@ See [Pure Owl Components](/examples/blocks.html#/docs/guide/owl-components) for
|
|
|
63
63
|
</div>
|
|
64
64
|
```
|
|
65
65
|
|
|
66
|
-
|
|
66
|
+
The Base UI sets `role="status"` by default. Use `b-att-variant="outline"` for a dashed container and `b-att-variant="background"` for a muted panel; avatar, avatar-group, input-group, and RTL states are composed by placing those components inside `b-empty-media` or `b-empty-content`.
|
package/docs/components/field.md
CHANGED
package/docs/components/form.md
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
# Form
|
|
2
2
|
|
|
3
|
-
Build an accessible Bug Report form with
|
|
3
|
+
Build an accessible Bug Report form with Base UI `Field` layout, the Base UI `Button` actions, and Owl `t-model` input bindings.
|
|
4
4
|
|
|
5
|
-
##
|
|
5
|
+
## Base component
|
|
6
6
|
|
|
7
7
|
```js
|
|
8
8
|
import { Component, useState, xml } from "@base/owl";
|
|
@@ -144,7 +144,7 @@ class BugReportExample extends Component {
|
|
|
144
144
|
</form>
|
|
145
145
|
```
|
|
146
146
|
|
|
147
|
-
This is the same Bug Report form converted from static `b-ui`
|
|
147
|
+
This is the same Bug Report form converted from base static markup (`b-ui`) to pure Base composition: `FieldGroup`, `Field`, `FieldLabel`, `FieldDescription`, and `Button` replace the static adapters, while `t-model` owns the input state.
|
|
148
148
|
|
|
149
149
|
## State
|
|
150
150
|
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# Hover Card
|
|
2
2
|
|
|
3
|
-
##
|
|
3
|
+
## Base component
|
|
4
4
|
|
|
5
5
|
```js
|
|
6
6
|
import { HoverCard, HoverCardContent, HoverCardTrigger } from "@thebase/ui";
|
|
@@ -36,7 +36,7 @@ import { HoverCard, HoverCardContent, HoverCardTrigger } from "@thebase/ui";
|
|
|
36
36
|
| `HoverCardContent` | `className` | `String` | optional |
|
|
37
37
|
| `HoverCardTrigger` | `className` | `String` | optional |
|
|
38
38
|
|
|
39
|
-
See [
|
|
39
|
+
See [Base Components](/examples/blocks.html#/docs/guide/owl-components) for how to load `@base/owl` and `dist/baseui.templates.xml`.
|
|
40
40
|
|
|
41
41
|
## Static component
|
|
42
42
|
|
package/docs/components/icon.md
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
# Icon
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
The Base UI includes the full Lucide SVG icon set as a built-in CDN icon library.
|
|
4
4
|
|
|
5
|
-
##
|
|
5
|
+
## Base component
|
|
6
6
|
|
|
7
7
|
```js
|
|
8
8
|
import { Icon } from "@thebase/ui";
|
|
@@ -21,7 +21,7 @@ import { Icon } from "@thebase/ui";
|
|
|
21
21
|
| `Icon` | `baseUrl` | `String` | optional |
|
|
22
22
|
| `Icon` | `className` | `String` | optional |
|
|
23
23
|
|
|
24
|
-
See [
|
|
24
|
+
See [Base Components](/examples/blocks.html#/docs/guide/owl-components) for how to load `@base/owl` and `dist/baseui.templates.xml`.
|
|
25
25
|
|
|
26
26
|
## Static component
|
|
27
27
|
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# Input Group
|
|
2
2
|
|
|
3
|
-
##
|
|
3
|
+
## Base component
|
|
4
4
|
|
|
5
5
|
```js
|
|
6
6
|
import {
|
|
@@ -49,7 +49,7 @@ import {
|
|
|
49
49
|
| `InputGroupInput` | `type`, `value`, `placeholder`, `disabled`, `readonly`, `invalid` | mixed | input control |
|
|
50
50
|
| `InputGroupTextarea` | `value`, `placeholder`, `rows`, `disabled`, `readonly`, `invalid`, `resize` | mixed | textarea control |
|
|
51
51
|
|
|
52
|
-
See [
|
|
52
|
+
See [Base Components](/examples/blocks.html#/docs/guide/owl-components) for how to load `@base/owl` and `dist/baseui.templates.xml`.
|
|
53
53
|
|
|
54
54
|
## Static component
|
|
55
55
|
|
|
@@ -4,9 +4,9 @@ Use `b-ui="input-otp"` for a CDN-ready input otp component.
|
|
|
4
4
|
|
|
5
5
|
## CDN install requirements
|
|
6
6
|
|
|
7
|
-
Load the pinned
|
|
7
|
+
Load the pinned the Base UI CSS and JavaScript files; no extra dependency is required for this component.
|
|
8
8
|
|
|
9
|
-
##
|
|
9
|
+
## Base component
|
|
10
10
|
|
|
11
11
|
```js
|
|
12
12
|
import { InputOtp } from "@thebase/ui";
|
|
@@ -26,7 +26,7 @@ import { InputOtp } from "@thebase/ui";
|
|
|
26
26
|
| `InputOtp` | `className` | `String` | optional |
|
|
27
27
|
| `InputOtp` | `onChange` | `Function` | optional |
|
|
28
28
|
|
|
29
|
-
See [
|
|
29
|
+
See [Base Components](/examples/blocks.html#/docs/guide/owl-components) for how to load `@base/owl` and `dist/baseui.templates.xml`.
|
|
30
30
|
|
|
31
31
|
## Static component
|
|
32
32
|
|
|
@@ -52,7 +52,7 @@ Interactive components emit documented `baseui:*` events from their root element
|
|
|
52
52
|
|
|
53
53
|
## CSS variables
|
|
54
54
|
|
|
55
|
-
The component inherits
|
|
55
|
+
The component inherits the Base UI semantic tokens such as `--b-surface`, `--b-border`, `--b-primary`, and `--b-radius`.
|
|
56
56
|
|
|
57
57
|
## Accessibility behavior
|
|
58
58
|
|
|
@@ -64,7 +64,7 @@ See `examples/index.html` for a working CDN-style page.
|
|
|
64
64
|
|
|
65
65
|
## Browser support
|
|
66
66
|
|
|
67
|
-
|
|
67
|
+
The Base UI targets modern evergreen browsers that support ES modules, CSS variables, and Bootstrap 5.3.
|
|
68
68
|
|
|
69
69
|
## Test checklist
|
|
70
70
|
|
package/docs/components/input.md
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Use `b-ui="input"` on a native input element.
|
|
4
4
|
|
|
5
|
-
##
|
|
5
|
+
## Base component
|
|
6
6
|
|
|
7
7
|
```js
|
|
8
8
|
import { Input } from "@thebase/ui";
|
|
@@ -48,7 +48,7 @@ import { Input } from "@thebase/ui";
|
|
|
48
48
|
| `onInput` | `Function` | called as `(value, event)` on the native `input` event |
|
|
49
49
|
| `onChange` | `Function` | called as `(value, event)` on the native `change` event |
|
|
50
50
|
|
|
51
|
-
See [
|
|
51
|
+
See [Base Components](/examples/blocks.html#/docs/guide/owl-components) for how to load `@base/owl` and `dist/baseui.templates.xml`.
|
|
52
52
|
|
|
53
53
|
## Static component
|
|
54
54
|
|
|
@@ -74,15 +74,15 @@ Use the global runtime methods: `thebase.mount()`, `thebase.mountAll()`, and `th
|
|
|
74
74
|
|
|
75
75
|
## Events
|
|
76
76
|
|
|
77
|
-
Input does not emit custom
|
|
77
|
+
Input does not emit custom the Base UI events. Use native `input` and `change` events.
|
|
78
78
|
|
|
79
79
|
## CSS variables
|
|
80
80
|
|
|
81
|
-
The component inherits
|
|
81
|
+
The component inherits the Base UI semantic tokens such as `--b-input`, `--b-border`, `--b-ring`, and `--b-radius`.
|
|
82
82
|
|
|
83
83
|
## Browser support
|
|
84
84
|
|
|
85
|
-
|
|
85
|
+
The Base UI targets modern evergreen browsers that support ES modules, CSS variables, and Bootstrap 5.3.
|
|
86
86
|
|
|
87
87
|
## Test checklist
|
|
88
88
|
|
package/docs/components/item.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# Item
|
|
2
2
|
|
|
3
|
-
##
|
|
3
|
+
## Base component
|
|
4
4
|
|
|
5
5
|
```js
|
|
6
6
|
import { Item } from "@thebase/ui";
|
|
@@ -54,7 +54,7 @@ import { Item } from "@thebase/ui";
|
|
|
54
54
|
| --- | --- | --- | --- |
|
|
55
55
|
| `Item` | `className` | `String` | optional |
|
|
56
56
|
|
|
57
|
-
See [
|
|
57
|
+
See [Base Components](/examples/blocks.html#/docs/guide/owl-components) for how to load `@base/owl` and `dist/baseui.templates.xml`.
|
|
58
58
|
|
|
59
59
|
## Static component
|
|
60
60
|
|
package/docs/components/kbd.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# Kbd
|
|
2
2
|
|
|
3
|
-
##
|
|
3
|
+
## Base component
|
|
4
4
|
|
|
5
5
|
```js
|
|
6
6
|
import { Kbd } from "@thebase/ui";
|
|
@@ -35,7 +35,7 @@ import { Kbd } from "@thebase/ui";
|
|
|
35
35
|
| --- | --- | --- | --- |
|
|
36
36
|
| `Kbd` | `className` | `String` | optional |
|
|
37
37
|
|
|
38
|
-
See [
|
|
38
|
+
See [Base Components](/examples/blocks.html#/docs/guide/owl-components) for how to load `@base/owl` and `dist/baseui.templates.xml`.
|
|
39
39
|
|
|
40
40
|
## Static component
|
|
41
41
|
|
package/docs/components/label.md
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Form label with consistent spacing and optional required marker.
|
|
4
4
|
|
|
5
|
-
##
|
|
5
|
+
## Base component
|
|
6
6
|
|
|
7
7
|
```js
|
|
8
8
|
import { Label } from "@thebase/ui";
|
|
@@ -23,7 +23,7 @@ import { Label } from "@thebase/ui";
|
|
|
23
23
|
| `Label` | `required` | `Boolean` | optional |
|
|
24
24
|
| `Label` | `className` | `String` | optional |
|
|
25
25
|
|
|
26
|
-
See [
|
|
26
|
+
See [Base Components](/examples/blocks.html#/docs/guide/owl-components) for how to load `@base/owl` and `dist/baseui.templates.xml`.
|
|
27
27
|
|
|
28
28
|
## Static component
|
|
29
29
|
|
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
# Markdown
|
|
2
2
|
|
|
3
|
-
Use `b-ui="markdown"` (or the pure
|
|
3
|
+
Use `b-ui="markdown"` (or the pure Base `Markdown` component) to render Markdown or mount an editable Markdown document. Read-only parsing uses the vendored `src/runtime/marked/marked.min.js` (marked v15). Fenced ` ```mermaid ` code blocks render as inline SVG via `src/runtime/mermaid/mermaid.esm.min.mjs`. Fenced ` ```base-ui ` code blocks render as a live the Base UI preview through the page's global static runtime (`window.thebase`, e.g. `dist/baseui.min.js`).
|
|
4
4
|
|
|
5
5
|
Editable mode lazy-loads `dist/runtime/milkdown/milkdown-editor.js`, which bundles Milkdown, Yjs, and y-webrtc only when `b-att-editable="true"` / `editable="true"` is used. The editor runtime enables CommonMark, GFM, history, clipboard, cursor, listener, indent, upload, block handle, tooltip, slash, streaming, and diff plugins. Collaborative mode uses Milkdown's Yjs-aware collab undo/redo instead of the plain history stack.
|
|
6
6
|
|
|
7
7
|
## CDN install requirements
|
|
8
8
|
|
|
9
|
-
Load the pinned
|
|
9
|
+
Load the pinned the Base UI CSS and JavaScript files. No extra `<script>` tag, npm install, or CDN reference is required for Markdown parsing, mermaid diagrams, or the Milkdown editor runtime — each lazy asset is emitted under `dist/runtime/` and fetched only when needed. Live ` ```base-ui ` previews reuse the same static runtime the rest of the page already loads (`dist/baseui.min.js`) — if that script isn't on the page, the block renders an inline error instead of a live preview.
|
|
10
10
|
|
|
11
|
-
##
|
|
11
|
+
## Base component
|
|
12
12
|
|
|
13
13
|
```js
|
|
14
14
|
import { Markdown } from "@base/component";
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# Marker
|
|
2
2
|
|
|
3
|
-
##
|
|
3
|
+
## Base component
|
|
4
4
|
|
|
5
5
|
```js
|
|
6
6
|
import { Marker } from "@thebase/ui";
|
|
@@ -19,7 +19,7 @@ import { Marker } from "@thebase/ui";
|
|
|
19
19
|
| --- | --- | --- | --- |
|
|
20
20
|
| `Marker` | `className` | `String` | optional |
|
|
21
21
|
|
|
22
|
-
See [
|
|
22
|
+
See [Base Components](/examples/blocks.html#/docs/guide/owl-components) for how to load `@base/owl` and `dist/baseui.templates.xml`.
|
|
23
23
|
|
|
24
24
|
## Static component
|
|
25
25
|
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# Menubar
|
|
2
2
|
|
|
3
|
-
##
|
|
3
|
+
## Base component
|
|
4
4
|
|
|
5
5
|
```js
|
|
6
6
|
import { Menubar } from "@thebase/ui";
|
|
@@ -91,7 +91,7 @@ import { Menubar } from "@thebase/ui";
|
|
|
91
91
|
| --- | --- | --- | --- |
|
|
92
92
|
| `Menubar` | `className` | `String` | optional |
|
|
93
93
|
|
|
94
|
-
See [
|
|
94
|
+
See [Base Components](/examples/blocks.html#/docs/guide/owl-components) for how to load `@base/owl` and `dist/baseui.templates.xml`.
|
|
95
95
|
|
|
96
96
|
## Static component
|
|
97
97
|
|