@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
|
@@ -4,9 +4,9 @@ Use `b-ui="message-scroller"` for a CDN-ready message scroller 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 { MessageScroller } from "@thebase/ui";
|
|
@@ -48,7 +48,7 @@ import { MessageScroller } from "@thebase/ui";
|
|
|
48
48
|
| `MessageScroller` | `autoscroll` | `Boolean` | optional |
|
|
49
49
|
| `MessageScroller` | `className` | `String` | optional |
|
|
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,7 +74,7 @@ Interactive components emit documented `baseui:*` events from their root element
|
|
|
74
74
|
|
|
75
75
|
## CSS variables
|
|
76
76
|
|
|
77
|
-
The component inherits
|
|
77
|
+
The component inherits the Base UI semantic tokens such as `--b-surface`, `--b-border`, `--b-primary`, and `--b-radius`.
|
|
78
78
|
|
|
79
79
|
## Accessibility behavior
|
|
80
80
|
|
|
@@ -86,7 +86,7 @@ See `examples/index.html` for a working CDN-style page.
|
|
|
86
86
|
|
|
87
87
|
## Browser support
|
|
88
88
|
|
|
89
|
-
|
|
89
|
+
The Base UI targets modern evergreen browsers that support ES modules, CSS variables, and Bootstrap 5.3.
|
|
90
90
|
|
|
91
91
|
## Test checklist
|
|
92
92
|
|
|
@@ -4,9 +4,9 @@ Use `b-ui="message"` for a CDN-ready message 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 { Message } from "@thebase/ui";
|
|
@@ -41,7 +41,7 @@ import { Message } from "@thebase/ui";
|
|
|
41
41
|
| `Message` | `side` | `String` | optional |
|
|
42
42
|
| `Message` | `className` | `String` | optional |
|
|
43
43
|
|
|
44
|
-
See [
|
|
44
|
+
See [Base Components](/examples/blocks.html#/docs/guide/owl-components) for how to load `@base/owl` and `dist/baseui.templates.xml`.
|
|
45
45
|
|
|
46
46
|
## Static component
|
|
47
47
|
|
|
@@ -67,7 +67,7 @@ Interactive components emit documented `baseui:*` events from their root element
|
|
|
67
67
|
|
|
68
68
|
## CSS variables
|
|
69
69
|
|
|
70
|
-
The component inherits
|
|
70
|
+
The component inherits the Base UI semantic tokens such as `--b-surface`, `--b-border`, `--b-primary`, and `--b-radius`.
|
|
71
71
|
|
|
72
72
|
## Accessibility behavior
|
|
73
73
|
|
|
@@ -79,7 +79,7 @@ See `examples/index.html` for a working CDN-style page.
|
|
|
79
79
|
|
|
80
80
|
## Browser support
|
|
81
81
|
|
|
82
|
-
|
|
82
|
+
The Base UI targets modern evergreen browsers that support ES modules, CSS variables, and Bootstrap 5.3.
|
|
83
83
|
|
|
84
84
|
## Test checklist
|
|
85
85
|
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Browser-native select control with Bootstrap-compatible styling.
|
|
4
4
|
|
|
5
|
-
##
|
|
5
|
+
## Base component
|
|
6
6
|
|
|
7
7
|
```js
|
|
8
8
|
import { NativeSelect } from "@thebase/ui";
|
|
@@ -30,7 +30,7 @@ import { NativeSelect } from "@thebase/ui";
|
|
|
30
30
|
| `NativeSelect` | `id` | `String` | optional, e.g. for `Label`'s `for` |
|
|
31
31
|
| `NativeSelect` | `onChange` | `Function` | optional |
|
|
32
32
|
|
|
33
|
-
See [
|
|
33
|
+
See [Base Components](/examples/blocks.html#/docs/guide/owl-components) for how to load `@base/owl` and `dist/baseui.templates.xml`.
|
|
34
34
|
|
|
35
35
|
## Static component
|
|
36
36
|
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Use `b-ui="navigation-menu"` for horizontal site or app navigation.
|
|
4
4
|
|
|
5
|
-
##
|
|
5
|
+
## Base component
|
|
6
6
|
|
|
7
7
|
```js
|
|
8
8
|
import { NavigationMenu, NavigationMenuItem } from "@thebase/ui";
|
|
@@ -27,7 +27,7 @@ import { NavigationMenu, NavigationMenuItem } from "@thebase/ui";
|
|
|
27
27
|
| `NavigationMenuItem` | `href` | `String` | optional |
|
|
28
28
|
| `NavigationMenuItem` | `className` | `String` | optional |
|
|
29
29
|
|
|
30
|
-
See [
|
|
30
|
+
See [Base Components](/examples/blocks.html#/docs/guide/owl-components) for how to load `@base/owl` and `dist/baseui.templates.xml`.
|
|
31
31
|
|
|
32
32
|
## Static component
|
|
33
33
|
|
|
@@ -38,4 +38,4 @@ See [Pure Owl Components](/examples/blocks.html#/docs/guide/owl-components) for
|
|
|
38
38
|
</nav>
|
|
39
39
|
```
|
|
40
40
|
|
|
41
|
-
|
|
41
|
+
The Base UI adds `menubar`/`menuitem` roles and Left/Right arrow focus movement.
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Use `b-ui="pagination"` on a `nav` containing a list of links or buttons.
|
|
4
4
|
|
|
5
|
-
##
|
|
5
|
+
## Base component
|
|
6
6
|
|
|
7
7
|
```js
|
|
8
8
|
import { Pagination, PaginationItem } from "@thebase/ui";
|
|
@@ -34,7 +34,7 @@ import { Pagination, PaginationItem } from "@thebase/ui";
|
|
|
34
34
|
| `PaginationItem` | `disabled` | `Boolean` | optional |
|
|
35
35
|
| `PaginationItem` | `onClick` | `Function` | optional |
|
|
36
36
|
|
|
37
|
-
See [
|
|
37
|
+
See [Base Components](/examples/blocks.html#/docs/guide/owl-components) for how to load `@base/owl` and `dist/baseui.templates.xml`.
|
|
38
38
|
|
|
39
39
|
## Static component
|
|
40
40
|
|
|
@@ -47,4 +47,4 @@ See [Pure Owl Components](/examples/blocks.html#/docs/guide/owl-components) for
|
|
|
47
47
|
</nav>
|
|
48
48
|
```
|
|
49
49
|
|
|
50
|
-
|
|
50
|
+
The Base UI adds Bootstrap pagination classes, active states, and disabled item styling.
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Use `b-ui="popover"` with trigger and content nodes.
|
|
4
4
|
|
|
5
|
-
##
|
|
5
|
+
## Base component
|
|
6
6
|
|
|
7
7
|
```js
|
|
8
8
|
import { Popover, PopoverContent, PopoverTrigger } from "@thebase/ui";
|
|
@@ -32,13 +32,13 @@ import { Popover, PopoverContent, PopoverTrigger } from "@thebase/ui";
|
|
|
32
32
|
| `PopoverContent` | `className` | `String` | optional |
|
|
33
33
|
| `PopoverTrigger` | `className` | `String` | optional |
|
|
34
34
|
|
|
35
|
-
See [
|
|
35
|
+
See [Base Components](/examples/blocks.html#/docs/guide/owl-components) for how to load `@base/owl` and `dist/baseui.templates.xml`.
|
|
36
36
|
|
|
37
|
-
Both the pure
|
|
37
|
+
Both the pure Base and static forms are driven by a live `bootstrap.Popover` instance owned on the trigger element — **the visible popup is Bootstrap's own generated DOM (a `.popover`/`.popover-arrow`/`.popover-body` node, positioned via Popper), appended to `document.body`, not rendered inline where you authored the popover.** Don't query for it as a descendant of the trigger or root; query `document.body.querySelector(".popover .popover-body")` instead. There's no separate heading/title concept in the current API — only body content (`.popover-body`); no `.popover-header` is generated.
|
|
38
38
|
|
|
39
39
|
The default slot's rendered markup is captured into an HTML string for Bootstrap's `content`/`html: true` options (Bootstrap can't consume live vnodes): `PopoverContent` renders the slot into a hidden buffer element internal to its own template (it is no longer a visibly-toggled popup itself), `PopoverTrigger` reads that buffer's `innerHTML` on mount to seed the bootstrap instance, and re-syncs the live popup via `.setContent({'.popover-body': html})` whenever that HTML changes on a later render.
|
|
40
40
|
|
|
41
|
-
Unlike `Tooltip`/hover-driven components, Bootstrap's own `trigger: "click"` option would bind its own click listener directly on the trigger element, independent of `PopoverTrigger`'s own `t-on-click`. To avoid double-toggling on a single click, the pure
|
|
41
|
+
Unlike `Tooltip`/hover-driven components, Bootstrap's own `trigger: "click"` option would bind its own click listener directly on the trigger element, independent of `PopoverTrigger`'s own `t-on-click`. To avoid double-toggling on a single click, the pure Base `PopoverTrigger` constructs its `bootstrap.Popover` instance with `trigger: "manual"` and calls `.toggle()` itself from `onClick` — `shown.bs.popover`/`hidden.bs.popover` still fire from `.toggle()` regardless of the `trigger` option, since that option only gates Bootstrap's own auto-binding, not event dispatch. The static adapter, which has no competing click handler of its own, passes `trigger: "click"` and relies on Bootstrap's built-in binding instead.
|
|
42
42
|
|
|
43
43
|
## Static component
|
|
44
44
|
|
|
@@ -65,11 +65,11 @@ Use the global runtime methods: `thebase.mount()`, `thebase.mountAll()`, and `th
|
|
|
65
65
|
|
|
66
66
|
## Events
|
|
67
67
|
|
|
68
|
-
Interactive components emit documented `baseui:*` events from their root element. Listen for Bootstrap's own `shown.bs.popover`/`hidden.bs.popover` on the trigger element to react to show/hide;
|
|
68
|
+
Interactive components emit documented `baseui:*` events from their root element. Listen for Bootstrap's own `shown.bs.popover`/`hidden.bs.popover` on the trigger element to react to show/hide; the Base UI mirrors those into `b-att-state` (`open`/`closed`) and `aria-expanded` on the static trigger, and `this.env.popover.open`-equivalent reactive state on the Base components.
|
|
69
69
|
|
|
70
70
|
## CSS variables
|
|
71
71
|
|
|
72
|
-
The component inherits
|
|
72
|
+
The component inherits the Base UI semantic tokens such as `--b-surface`, `--b-border`, `--b-primary`, and `--b-radius`. The popup itself is styled by Bootstrap's own bundled `.popover`/`.popover-arrow`/`.popover-body` CSS (loaded via `dist/baseui.min.css`), not the Base UI's own classes.
|
|
73
73
|
|
|
74
74
|
## Accessibility behavior
|
|
75
75
|
|
|
@@ -81,7 +81,7 @@ See `examples/index.html` for a working CDN-style page.
|
|
|
81
81
|
|
|
82
82
|
## Browser support
|
|
83
83
|
|
|
84
|
-
|
|
84
|
+
The Base UI targets modern evergreen browsers that support ES modules, CSS variables, and Bootstrap 5.3.
|
|
85
85
|
|
|
86
86
|
## Test checklist
|
|
87
87
|
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# Progress
|
|
2
2
|
|
|
3
|
-
##
|
|
3
|
+
## Base component
|
|
4
4
|
|
|
5
5
|
```js
|
|
6
6
|
import { Progress } from "@thebase/ui";
|
|
@@ -18,7 +18,7 @@ import { Progress } from "@thebase/ui";
|
|
|
18
18
|
| `Progress` | `max` | `Number` | optional |
|
|
19
19
|
| `Progress` | `className` | `String` | optional |
|
|
20
20
|
|
|
21
|
-
See [
|
|
21
|
+
See [Base Components](/examples/blocks.html#/docs/guide/owl-components) for how to load `@base/owl` and `dist/baseui.templates.xml`.
|
|
22
22
|
|
|
23
23
|
## Static component
|
|
24
24
|
|
package/docs/components/pwa.md
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Use `b-ui="pwa"` for a bottom-anchored install/permission prompt (an "Add to Home Screen" or "Allow notifications" sheet). Pwa is presentational only — it owns open/close state and focus/Escape handling, not the actual install or notification API calls. Wire your app's `beforeinstallprompt`/`Notification.requestPermission()` logic to the footer buttons you compose inside it.
|
|
4
4
|
|
|
5
|
-
##
|
|
5
|
+
## Base component
|
|
6
6
|
|
|
7
7
|
```js
|
|
8
8
|
import {
|
|
@@ -59,7 +59,7 @@ A launcher rendered outside the `Pwa` tree opens it through `PwaTrigger`, or by
|
|
|
59
59
|
|
|
60
60
|
Render a second `Pwa` instance for a follow-up prompt (e.g. "Allow notifications" after install is dismissed) — each `Pwa` owns its own open state independently.
|
|
61
61
|
|
|
62
|
-
See [
|
|
62
|
+
See [Base Components](/examples/blocks.html#/docs/guide/owl-components) for how to load `@base/owl` and `dist/baseui.templates.xml`.
|
|
63
63
|
|
|
64
64
|
## Static component
|
|
65
65
|
|
|
@@ -4,9 +4,9 @@ Use `b-ui="questionnaire"` for a CDN-ready questionnaire 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 { Questionnaire, QuestionnaireNext, QuestionnairePrevious, QuestionnaireStep } from "@thebase/ui";
|
|
@@ -83,7 +83,7 @@ import { Questionnaire, QuestionnaireNext, QuestionnairePrevious, QuestionnaireS
|
|
|
83
83
|
| `QuestionnaireStep` | `index` | `Number` | required |
|
|
84
84
|
| `QuestionnaireStep` | `className` | `String` | optional |
|
|
85
85
|
|
|
86
|
-
See [
|
|
86
|
+
See [Base Components](/examples/blocks.html#/docs/guide/owl-components) for how to load `@base/owl` and `dist/baseui.templates.xml`.
|
|
87
87
|
|
|
88
88
|
## Static component
|
|
89
89
|
|
|
@@ -109,7 +109,7 @@ Interactive components emit documented `baseui:*` events from their root element
|
|
|
109
109
|
|
|
110
110
|
## CSS variables
|
|
111
111
|
|
|
112
|
-
The component inherits
|
|
112
|
+
The component inherits the Base UI semantic tokens such as `--b-surface`, `--b-border`, `--b-primary`, and `--b-radius`.
|
|
113
113
|
|
|
114
114
|
## Accessibility behavior
|
|
115
115
|
|
|
@@ -121,7 +121,7 @@ See `examples/index.html` for a working CDN-style page.
|
|
|
121
121
|
|
|
122
122
|
## Browser support
|
|
123
123
|
|
|
124
|
-
|
|
124
|
+
The Base UI targets modern evergreen browsers that support ES modules, CSS variables, and Bootstrap 5.3.
|
|
125
125
|
|
|
126
126
|
## Test checklist
|
|
127
127
|
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Native radio input or label wrapper.
|
|
4
4
|
|
|
5
|
-
##
|
|
5
|
+
## Base component
|
|
6
6
|
|
|
7
7
|
```js
|
|
8
8
|
import { RadioGroup, RadioGroupItem } from "@thebase/ui";
|
|
@@ -28,7 +28,7 @@ import { RadioGroup, RadioGroupItem } from "@thebase/ui";
|
|
|
28
28
|
| `RadioGroupItem` | `disabled` | `Boolean` | optional |
|
|
29
29
|
| `RadioGroupItem` | `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="resizable"` for a CDN-ready resizable 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 { Resizable } from "@thebase/ui";
|
|
@@ -39,7 +39,7 @@ import { Resizable } from "@thebase/ui";
|
|
|
39
39
|
| `Resizable` | `onChange` | `Function` | optional |
|
|
40
40
|
| `Resizable` | `className` | `String` | optional |
|
|
41
41
|
|
|
42
|
-
See [
|
|
42
|
+
See [Base Components](/examples/blocks.html#/docs/guide/owl-components) for how to load `@base/owl` and `dist/baseui.templates.xml`.
|
|
43
43
|
|
|
44
44
|
## Static component
|
|
45
45
|
|
|
@@ -65,7 +65,7 @@ Interactive components emit documented `baseui:*` events from their root element
|
|
|
65
65
|
|
|
66
66
|
## CSS variables
|
|
67
67
|
|
|
68
|
-
The component inherits
|
|
68
|
+
The component inherits the Base UI semantic tokens such as `--b-surface`, `--b-border`, `--b-primary`, and `--b-radius`.
|
|
69
69
|
|
|
70
70
|
## Accessibility behavior
|
|
71
71
|
|
|
@@ -77,7 +77,7 @@ See `examples/index.html` for a working CDN-style page.
|
|
|
77
77
|
|
|
78
78
|
## Browser support
|
|
79
79
|
|
|
80
|
-
|
|
80
|
+
The Base UI targets modern evergreen browsers that support ES modules, CSS variables, and Bootstrap 5.3.
|
|
81
81
|
|
|
82
82
|
## Test checklist
|
|
83
83
|
|
|
@@ -4,9 +4,9 @@ Use `b-ui="scroll-area"` for a CDN-ready scroll area 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 { ScrollArea } from "@thebase/ui";
|
|
@@ -43,7 +43,7 @@ import { ScrollArea } from "@thebase/ui";
|
|
|
43
43
|
| --- | --- | --- | --- |
|
|
44
44
|
| `ScrollArea` | `className` | `String` | optional |
|
|
45
45
|
|
|
46
|
-
See [
|
|
46
|
+
See [Base Components](/examples/blocks.html#/docs/guide/owl-components) for how to load `@base/owl` and `dist/baseui.templates.xml`.
|
|
47
47
|
|
|
48
48
|
## Static component
|
|
49
49
|
|
|
@@ -69,7 +69,7 @@ Interactive components emit documented `baseui:*` events from their root element
|
|
|
69
69
|
|
|
70
70
|
## CSS variables
|
|
71
71
|
|
|
72
|
-
The component inherits
|
|
72
|
+
The component inherits the Base UI semantic tokens such as `--b-surface`, `--b-border`, `--b-primary`, and `--b-radius`.
|
|
73
73
|
|
|
74
74
|
## Accessibility behavior
|
|
75
75
|
|
|
@@ -81,7 +81,7 @@ See `examples/index.html` for a working CDN-style page.
|
|
|
81
81
|
|
|
82
82
|
## Browser support
|
|
83
83
|
|
|
84
|
-
|
|
84
|
+
The Base UI targets modern evergreen browsers that support ES modules, CSS variables, and Bootstrap 5.3.
|
|
85
85
|
|
|
86
86
|
## Test checklist
|
|
87
87
|
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# Select
|
|
2
2
|
|
|
3
|
-
##
|
|
3
|
+
## Base component
|
|
4
4
|
|
|
5
5
|
```js
|
|
6
6
|
import { Select, SelectContent, SelectItem, SelectTrigger } from "@thebase/ui";
|
|
@@ -29,7 +29,7 @@ import { Select, SelectContent, SelectItem, SelectTrigger } from "@thebase/ui";
|
|
|
29
29
|
| `SelectItem` | `className` | `String` | optional |
|
|
30
30
|
| `SelectTrigger` | `className` | `String` | optional |
|
|
31
31
|
|
|
32
|
-
See [
|
|
32
|
+
See [Base Components](/examples/blocks.html#/docs/guide/owl-components) for how to load `@base/owl` and `dist/baseui.templates.xml`.
|
|
33
33
|
|
|
34
34
|
## Static component
|
|
35
35
|
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Visual divider with separator semantics.
|
|
4
4
|
|
|
5
|
-
##
|
|
5
|
+
## Base component
|
|
6
6
|
|
|
7
7
|
```js
|
|
8
8
|
import { Separator } from "@thebase/ui";
|
|
@@ -30,7 +30,7 @@ import { Separator } from "@thebase/ui";
|
|
|
30
30
|
| `Separator` | `orientation` | `String` | optional |
|
|
31
31
|
| `Separator` | `className` | `String` | optional |
|
|
32
32
|
|
|
33
|
-
See [
|
|
33
|
+
See [Base Components](/examples/blocks.html#/docs/guide/owl-components) for how to load `@base/owl` and `dist/baseui.templates.xml`.
|
|
34
34
|
|
|
35
35
|
## Static component
|
|
36
36
|
|
package/docs/components/sheet.md
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Use `b-ui="sheet"` for offcanvas panels.
|
|
4
4
|
|
|
5
|
-
##
|
|
5
|
+
## Base component
|
|
6
6
|
|
|
7
7
|
```js
|
|
8
8
|
import { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger } from "@thebase/ui";
|
|
@@ -38,7 +38,7 @@ import { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHe
|
|
|
38
38
|
| `SheetTitle` | `className` | `String` | optional |
|
|
39
39
|
| `SheetTrigger` | `className` | `String` | optional |
|
|
40
40
|
|
|
41
|
-
`SheetContent` also accepts `side` (`"left"` or the default right), falling back to the `side` prop on the parent `Sheet` when unset. It is driven by a real `bootstrap.Offcanvas` instance bound to its own root, rendered as `.offcanvas.offcanvas-end` by default or `.offcanvas.offcanvas-start` for `side="left"`, permanently mounted rather than added/removed from the DOM. Escape, backdrop click, and the Tab focus trap are Bootstrap's own native Offcanvas behavior; focus-restore-to-trigger on close is kept by hand (not native to Offcanvas). `SheetClose` closes via `data-bs-dismiss="offcanvas"`. See [
|
|
41
|
+
`SheetContent` also accepts `side` (`"left"` or the default right), falling back to the `side` prop on the parent `Sheet` when unset. It is driven by a real `bootstrap.Offcanvas` instance bound to its own root, rendered as `.offcanvas.offcanvas-end` by default or `.offcanvas.offcanvas-start` for `side="left"`, permanently mounted rather than added/removed from the DOM. Escape, backdrop click, and the Tab focus trap are Bootstrap's own native Offcanvas behavior; focus-restore-to-trigger on close is kept by hand (not native to Offcanvas). `SheetClose` closes via `data-bs-dismiss="offcanvas"`. 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 { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHe
|
|
|
53
53
|
|
|
54
54
|
At mount, `[b-ui="sheet"]` itself becomes the `.offcanvas.offcanvas-end` element (`.offcanvas.offcanvas-start` when `b-att-side="left"`, `tabindex="-1"`) driven by a real `bootstrap.Offcanvas` instance (`backdrop: true, keyboard: true, scroll: false`); `[b-sheet-panel]` stays as a plain cosmetic content box inside it. `[b-sheet-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
|
Options: `b-att-side="left"` moves the sheet panel to the left (`offcanvas-start` instead of `offcanvas-end`). The sheet closes on backdrop click, close button (`data-bs-dismiss="offcanvas"`), or Escape — all native `bootstrap.Offcanvas` behavior — and traps Tab focus while open, restoring focus to the trigger on close (kept by hand — not native to Offcanvas).
|
package/docs/components/shell.md
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Use `b-ui="shell"` for a collapsible app shell: a desktop-collapsible/mobile off-canvas sidebar next to a sticky header and scrollable content region.
|
|
4
4
|
|
|
5
|
-
##
|
|
5
|
+
## Base component
|
|
6
6
|
|
|
7
7
|
```js
|
|
8
8
|
import {
|
|
@@ -74,7 +74,7 @@ Four cross-cutting concerns are opt-in via props instead of baked into the layou
|
|
|
74
74
|
| `ShellContent` | `className` | `String` | optional |
|
|
75
75
|
| `ShellUserMenu` | `className` | `String` | optional |
|
|
76
76
|
|
|
77
|
-
See [
|
|
77
|
+
See [Base Components](/examples/blocks.html#/docs/guide/owl-components) for how to load `@base/owl` and `dist/baseui.templates.xml`.
|
|
78
78
|
|
|
79
79
|
## Static component
|
|
80
80
|
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Use `b-ui="sidebar"` for app navigation panels. The component mirrors shadcn's composable Sidebar parts: header, content, footer, groups, menu rows, actions, nested submenus, rail, inset, and trigger.
|
|
4
4
|
|
|
5
|
-
##
|
|
5
|
+
## Base component
|
|
6
6
|
|
|
7
7
|
```js
|
|
8
8
|
import { Sidebar, SidebarContent, SidebarFooter, SidebarHeader, SidebarMenu, SidebarMenuButton, SidebarMenuItem } from "@thebase/ui";
|
|
@@ -234,7 +234,7 @@ Reusable nav-content primitives, extracted from the recurring group/item shapes
|
|
|
234
234
|
| `SidebarMenuSubButton` | `href` | `String` | optional |
|
|
235
235
|
| `SidebarMenuSubItem` | `className` | `String` | optional |
|
|
236
236
|
|
|
237
|
-
See [
|
|
237
|
+
See [Base Components](/examples/blocks.html#/docs/guide/owl-components) for how to load `@base/owl` and `dist/baseui.templates.xml`.
|
|
238
238
|
|
|
239
239
|
## Static component
|
|
240
240
|
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Loading placeholder for content that is not ready yet.
|
|
4
4
|
|
|
5
|
-
##
|
|
5
|
+
## Base component
|
|
6
6
|
|
|
7
7
|
```js
|
|
8
8
|
import { Skeleton } from "@thebase/ui";
|
|
@@ -29,7 +29,7 @@ import { Skeleton } from "@thebase/ui";
|
|
|
29
29
|
| `Skeleton` | `shape` | `String` | optional |
|
|
30
30
|
| `Skeleton` | `className` | `String` | optional |
|
|
31
31
|
|
|
32
|
-
See [
|
|
32
|
+
See [Base Components](/examples/blocks.html#/docs/guide/owl-components) for how to load `@base/owl` and `dist/baseui.templates.xml`.
|
|
33
33
|
|
|
34
34
|
## Static component
|
|
35
35
|
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# Slider
|
|
2
2
|
|
|
3
|
-
##
|
|
3
|
+
## Base component
|
|
4
4
|
|
|
5
5
|
```js
|
|
6
6
|
import { Slider } from "@thebase/ui";
|
|
@@ -22,7 +22,7 @@ import { Slider } from "@thebase/ui";
|
|
|
22
22
|
| `Slider` | `className` | `String` | optional |
|
|
23
23
|
| `Slider` | `onChange` | `Function` | optional |
|
|
24
24
|
|
|
25
|
-
See [
|
|
25
|
+
See [Base Components](/examples/blocks.html#/docs/guide/owl-components) for how to load `@base/owl` and `dist/baseui.templates.xml`.
|
|
26
26
|
|
|
27
27
|
## Static component
|
|
28
28
|
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Inline loading indicator using Bootstrap spinner classes.
|
|
4
4
|
|
|
5
|
-
##
|
|
5
|
+
## Base component
|
|
6
6
|
|
|
7
7
|
```js
|
|
8
8
|
import { Spinner } from "@thebase/ui";
|
|
@@ -24,7 +24,7 @@ import { Spinner } from "@thebase/ui";
|
|
|
24
24
|
| `Spinner` | `label` | `String` | optional |
|
|
25
25
|
| `Spinner` | `className` | `String` | optional |
|
|
26
26
|
|
|
27
|
-
See [
|
|
27
|
+
See [Base Components](/examples/blocks.html#/docs/guide/owl-components) for how to load `@base/owl` and `dist/baseui.templates.xml`.
|
|
28
28
|
|
|
29
29
|
## Static component
|
|
30
30
|
|
|
@@ -35,4 +35,4 @@ See [Pure Owl Components](/examples/blocks.html#/docs/guide/owl-components) for
|
|
|
35
35
|
|
|
36
36
|
Options: `b-att-type="border|grow"`, `b-att-label`.
|
|
37
37
|
|
|
38
|
-
Accessibility:
|
|
38
|
+
Accessibility: The Base UI adds `role="status"` and hidden loading text.
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Checkbox-backed switch control using `role="switch"`.
|
|
4
4
|
|
|
5
|
-
##
|
|
5
|
+
## Base component
|
|
6
6
|
|
|
7
7
|
```js
|
|
8
8
|
import { Switch } from "@thebase/ui";
|
|
@@ -21,7 +21,7 @@ import { Switch } from "@thebase/ui";
|
|
|
21
21
|
| `Switch` | `className` | `String` | optional |
|
|
22
22
|
| `Switch` | `onChange` | `Function` | 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
|
|
package/docs/components/table.md
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Native table styling for static or server-rendered data.
|
|
4
4
|
|
|
5
|
-
##
|
|
5
|
+
## Base component
|
|
6
6
|
|
|
7
7
|
```js
|
|
8
8
|
import { Table } from "@thebase/ui";
|
|
@@ -50,7 +50,7 @@ import { Table } from "@thebase/ui";
|
|
|
50
50
|
| `Table` | `hover` | `Boolean` | optional |
|
|
51
51
|
| `Table` | `className` | `String` | optional |
|
|
52
52
|
|
|
53
|
-
See [
|
|
53
|
+
See [Base Components](/examples/blocks.html#/docs/guide/owl-components) for how to load `@base/owl` and `dist/baseui.templates.xml`.
|
|
54
54
|
|
|
55
55
|
## Static component
|
|
56
56
|
|
package/docs/components/tabs.md
CHANGED
|
@@ -6,7 +6,7 @@ as a segmented pill control on a muted background by default, or a transparent u
|
|
|
6
6
|
background — a bordered/padded look is opt-in via `className` on `TabsContainer` (or the
|
|
7
7
|
consumer's own wrapper), not baked into every panel.
|
|
8
8
|
|
|
9
|
-
##
|
|
9
|
+
## Base component
|
|
10
10
|
|
|
11
11
|
```js
|
|
12
12
|
import { Tabs, TabContent, TabsContainer, TabsList, TabTrigger } from "@thebase/ui";
|
|
@@ -57,10 +57,10 @@ The `"line"` variant swaps the segmented pill for a transparent, underline-drive
|
|
|
57
57
|
|
|
58
58
|
ArrowLeft/ArrowRight (or ArrowUp/ArrowDown when vertical) move focus and selection between
|
|
59
59
|
`TabTrigger`s, same as the static API — each trigger's own live `bootstrap.Tab` instance handles
|
|
60
|
-
this natively. See [
|
|
60
|
+
this natively. See [Base Components](/examples/blocks.html#/docs/guide/owl-components) for how
|
|
61
61
|
to load `@base/owl` and `dist/baseui.templates.xml`.
|
|
62
62
|
|
|
63
|
-
Each `TabTrigger` (`b-tab` button / pure
|
|
63
|
+
Each `TabTrigger` (`b-tab` button / pure Base `TabTrigger`'s own root) is driven by a live `bootstrap.Tab` instance: it always carries `role="tab"` plus a `data-bs-target="#<id>"` pointing at its linked pane, and Bootstrap itself manages the pane's `tab-pane fade`/`show`/`active` classes and the trigger's `active`/`aria-selected`/`tabindex` across switches — don't rely on node removal to detect the active panel; every `TabContent`/`b-panel` stays mounted permanently (`role="tabpanel"`, `tab-pane fade` + `show active` on the initially active one).
|
|
64
64
|
|
|
65
65
|
## Static component
|
|
66
66
|
|
|
@@ -74,7 +74,7 @@ Each `TabTrigger` (`b-tab` button / pure Owl `TabTrigger`'s own root) is driven
|
|
|
74
74
|
```
|
|
75
75
|
|
|
76
76
|
Add `b-att-variant="line"` on the `[b-ui="tabs"]` host for the transparent underline look instead
|
|
77
|
-
of the default segmented pill. `orientation` is a pure-
|
|
77
|
+
of the default segmented pill. `orientation` is a pure Base-only prop — the static markup lays
|
|
78
78
|
`[b-tab]`/`[b-panel]` flat as siblings with no `TabsList`/`TabsContainer`-equivalent grouping
|
|
79
79
|
wrapper to flip into a row/column pair.
|
|
80
80
|
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# Text Editor
|
|
2
2
|
|
|
3
|
-
Use `b-ui="text-editor"` (or the pure
|
|
3
|
+
Use `b-ui="text-editor"` (or the pure Base `TextEditor` component) for WYSIWYG rich-text editing backed by [Milkdown](https://milkdown.dev/) (ProseMirror + a Markdown-aware schema, via `@milkdown/kit`). The editor runtime is lazy-loaded from `dist/runtime/milkdown/milkdown-text-editor.js`, so the default the Base UI bundle stays small until an editor is actually mounted. `content`/`onChange` still deal in HTML — Milkdown's document is converted to/from HTML at the boundary, so nothing in this contract changes even though the engine now understands Markdown natively (e.g. typing a leading `#`, `**bold**`, or `1.` auto-formats as you type).
|
|
4
4
|
|
|
5
5
|
Collaborative mode (`collaborative` / `b-att-collaborative`) is optional and off by default; toggle it per editor without changing anything else. It runs on Yjs + `@milkdown/plugin-collab` over one of two providers, picked with `provider` / `b-att-provider`:
|
|
6
6
|
|
|
@@ -9,7 +9,7 @@ Collaborative mode (`collaborative` / `b-att-collaborative`) is optional and off
|
|
|
9
9
|
|
|
10
10
|
Collaboration actually turns on when `collaborative` is explicitly truthy, **or** when both `provider` and `url` are supplied — so pointing an editor at a websocket backend (`provider="'websocket'"` + a `url`) is enough on its own, without also setting `collaborative="true"`. If `collaborative` is `false`/unset and `provider`+`url` aren't both present, the editor stays single-user.
|
|
11
11
|
|
|
12
|
-
##
|
|
12
|
+
## Base Component
|
|
13
13
|
|
|
14
14
|
```js
|
|
15
15
|
import { TextEditor } from "@base/component";
|