@thebase/ui 1.1.7 → 1.2.1

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.
Files changed (56) hide show
  1. package/CHANGELOG.md +70 -1
  2. package/README.md +22 -4
  3. package/bin/create-baseui-app.mjs +28 -2
  4. package/dist/baseui.apidoc.esm.js +64 -64
  5. package/dist/baseui.apidoc.min.js +64 -64
  6. package/dist/baseui.esm.js +42 -61
  7. package/dist/baseui.i18n.esm.js +2 -0
  8. package/dist/baseui.i18n.min.js +2 -0
  9. package/dist/baseui.icons.esm.js +1 -1
  10. package/dist/baseui.min.css +2 -2
  11. package/dist/baseui.min.js +61 -61
  12. package/dist/baseui.pwa.esm.js +71 -9
  13. package/dist/baseui.registry.json +13 -9
  14. package/dist/baseui.templates.xml +311 -311
  15. package/dist/baseui.vite.esm.js +116 -0
  16. package/dist/runtime/lazy/apidoc.logic.js +20 -0
  17. package/dist/runtime/milkdown/milkdown-editor.js +1 -1
  18. package/dist/runtime/milkdown/milkdown-text-editor.js +1 -1
  19. package/dist/themes/baseui-dark.css +80 -1
  20. package/dist/themes/baseui-dark.min.css +1 -0
  21. package/dist/themes/baseui-light.css +81 -1
  22. package/dist/themes/baseui-light.min.css +1 -0
  23. package/dist/types/i18n.d.ts +25 -0
  24. package/dist/types/index.d.ts +2 -0
  25. package/dist/types/pwa.d.ts +1 -45
  26. package/dist/types/vite.d.ts +4 -0
  27. package/docs/analytics.md +3 -3
  28. package/docs/base-ui-skill.md +54 -0
  29. package/docs/blocks.md +1 -1
  30. package/docs/components/accordion.md +4 -4
  31. package/docs/components/apidoc.md +1 -1
  32. package/docs/components/block-viewer.md +1 -1
  33. package/docs/components/breadcrumb.md +1 -1
  34. package/docs/components/button.md +1 -1
  35. package/docs/components/code-editor.md +1 -1
  36. package/docs/components/data-table.md +2 -2
  37. package/docs/components/dialog.md +5 -5
  38. package/docs/components/form.md +29 -29
  39. package/docs/components/input.md +1 -1
  40. package/docs/components/markdown.md +1 -1
  41. package/docs/components/pwa.md +1 -1
  42. package/docs/components/shell.md +2 -2
  43. package/docs/components/sidebar.md +16 -16
  44. package/docs/components/text-editor.md +1 -1
  45. package/docs/components/theme-button.md +1 -1
  46. package/docs/components/toast.md +10 -10
  47. package/docs/components/typography.md +21 -2
  48. package/docs/i18n.md +119 -0
  49. package/docs/icons.md +1 -1
  50. package/docs/installation.md +3 -2
  51. package/docs/owl-components.md +1 -1
  52. package/docs/registry.md +1 -0
  53. package/docs/runtime-api.md +5 -3
  54. package/docs/theming.md +33 -3
  55. package/docs/usage-guide.md +23 -6
  56. package/package.json +13 -1
package/docs/components/accordion.md CHANGED
@@ -46,27 +46,27 @@ See [Base Components](/examples/blocks.html#/docs/guide/owl-components) for how
46
46
  <div b-accordion-item b-att-state="open">
47
47
  <button b-accordion-trigger type="button">
48
48
  What are your shipping options?
49
- <span b-icon="chevron-down" class="bu-accordion-trigger-icon"></span>
49
+ <span b-icon="chevron-down" class="b-accordion-trigger-icon"></span>
50
50
  </button>
51
51
  <div b-accordion-panel>We offer standard (5-7 days), express (2-3 days), and overnight shipping. Free shipping on international orders.</div>
52
52
  </div>
53
53
  <div b-accordion-item>
54
54
  <button b-accordion-trigger type="button">
55
55
  What is your return policy?
56
- <span b-icon="chevron-down" class="bu-accordion-trigger-icon"></span>
56
+ <span b-icon="chevron-down" class="b-accordion-trigger-icon"></span>
57
57
  </button>
58
58
  <div b-accordion-panel>Returns are accepted within 30 days of delivery, provided the item is unused and in its original packaging.</div>
59
59
  </div>
60
60
  <div b-accordion-item>
61
61
  <button b-accordion-trigger type="button">
62
62
  How can I contact customer support?
63
- <span b-icon="chevron-down" class="bu-accordion-trigger-icon"></span>
63
+ <span b-icon="chevron-down" class="b-accordion-trigger-icon"></span>
64
64
  </button>
65
65
  <div b-accordion-panel>Reach us by email, live chat, or phone — support is available seven days a week.</div>
66
66
  </div>
67
67
  </div>
68
68
  ```
69
69
 
70
- Options: `b-att-multiple="true"` allows more than one item to stay open. Events: `baseui:change`. Keyboard: buttons use native activation and focus behavior. The static adapter only wires ARIA/toggle behavior onto author-provided markup — add your own trailing chevron icon (`b-icon="chevron-down" class="bu-accordion-trigger-icon"`) inside the trigger for the rotating-chevron look the pure Base `AccordionTrigger` renders automatically, and set `b-att-state="open"` on an item to have it expanded by default.
70
+ Options: `b-att-multiple="true"` allows more than one item to stay open. Events: `baseui:change`. Keyboard: buttons use native activation and focus behavior. The static adapter only wires ARIA/toggle behavior onto author-provided markup — add your own trailing chevron icon (`b-icon="chevron-down" class="b-accordion-trigger-icon"`) inside the trigger for the rotating-chevron look the pure Base `AccordionTrigger` renders automatically, and set `b-att-state="open"` on an item to have it expanded by default.
71
71
 
72
72
  Each panel (`b-accordion-panel` / `AccordionContent`'s root) is driven by its own live `bootstrap.Collapse` instance: it always carries the Bootstrap `collapse` class (plus `show` while open), and Bootstrap itself manages the `collapsing`/height transition and the `show` class across toggles — don't rely on `hidden`/node removal to detect open state. In single-open mode (the default, without `multiple`), opening one item hides every other open item's own `bootstrap.Collapse` instance before showing the clicked item's.
package/docs/components/apidoc.md CHANGED
@@ -76,4 +76,4 @@ The static adapter fetches `baseui.templates.xml` from the folder the Base UI sc
76
76
 
77
77
  - Credentials entered in Authorize live in the tab's `sessionStorage` (`apikey`, `oauthkey`) and are applied to every Try It request. Try It sends the request from the browser, so the API must allow CORS from the docs origin.
78
78
  - Language logos are copied to `dist/apidoc/img/` by `npm run build`; the CDN URL pattern is `https://cdn.jsdelivr.net/npm/@thebase/ui@<version>/dist/apidoc/img/`.
79
- - Styles are scoped under `.bu-apidoc` and use their own palette (`--line`, `--accent`, … on `.bu-apidoc`); override them on a wrapper selector to re-theme.
79
+ - Styles are scoped under `.b-apidoc` and use their own palette (`--line`, `--accent`, … on `.b-apidoc`); override them on a wrapper selector to re-theme.
package/docs/components/block-viewer.md CHANGED
@@ -26,7 +26,7 @@ import { BlockViewer } from "@base/component";
26
26
 
27
27
  ```html
28
28
  <body data-block-title="sidebar-01" data-block-description="A simple sidebar with navigation grouped by section.">
29
- <div id="bu-block-viewer" b-ui="block-viewer"></div>
29
+ <div id="b-block-viewer" b-ui="block-viewer"></div>
30
30
  <script type="text/xml" b-block-code-template>
31
31
  <templates>
32
32
  <t t-name="examples.SidebarBlock">
package/docs/components/breadcrumb.md CHANGED
@@ -73,7 +73,7 @@ The Base UI adds the shadcn/Nova breadcrumb classes, inserts chevron separators
73
73
  <li><a href="/">Home</a></li>
74
74
  <li b-breadcrumb-separator aria-hidden="true">·</li>
75
75
  <li><span b-ui="dropdown-menu">
76
- <button b-dropdown-trigger type="button" class="bu-breadcrumb-link">
76
+ <button b-dropdown-trigger type="button" class="b-breadcrumb-link">
77
77
  <span>Components</span> <span b-icon="chevron-down"></span>
78
78
  </button>
79
79
  <span b-dropdown-menu>
package/docs/components/button.md CHANGED
@@ -50,7 +50,7 @@ import { Button } from "@thebase/ui";
50
50
  | `id` | `String` | forwarded to the rendered `<a>`/`<button>` |
51
51
  | `title` | `String` | forwarded to the rendered `<a>`/`<button>` |
52
52
  | `className` | `String` | appended to the generated `btn ...` classes |
53
- | `unstyled` | `Boolean` | drops the forced `btn bu-button`/variant/size classes so only `className` applies — for reusing Button's behavior under your own CSS |
53
+ | `unstyled` | `Boolean` | drops the forced `btn b-button`/variant/size classes so only `className` applies — for reusing Button's behavior under your own CSS |
54
54
  | `attrs` | `Object` | extra attributes spread onto the rendered `<a>`/`<button>` (`aria-*`, `data-*`, `data-bs-*`, custom directives) that have no first-class prop |
55
55
  | `getRef` | `Function` | called with the rendered root element after mount, and with `null` on unmount |
56
56
  | `onClick` | `Function` | called with the native click event |
package/docs/components/code-editor.md CHANGED
@@ -70,7 +70,7 @@ All languages also collapse runs of blank lines to one and end the text with a s
70
70
 
71
71
  `javascript` (`js`, `jsx`), `typescript` (`ts`, `tsx`), `go` (`golang`), `c` (`h`), `cpp` (`c++`, `cc`, `hpp`), `java`, `csharp` (`cs`, `c#`), `kotlin` (`kt`), `swift`, `rust` (`rs`), `php`, `python` (`py`), `ruby` (`rb`), `bash` (`sh`, `shell`), `sql` (`postgres`, `mysql`), `json`, `yaml` (`yml`), `css`, `html` (`htm`), `xml` (`svg`), `lua`, `plaintext`.
72
72
 
73
- Colouring is display-only and follows `codeLang`: comments, strings, numbers, keywords, builtins, function calls (a word followed by `(`), types (`Capitalized` names), HTML/XML tags, attribute names and `&entities;`, `key:` names in JSON/YAML, CSS properties and `#hex` colours, `@Annotations` (Java, Kotlin, TypeScript, Python) and `$variables` (PHP, shell). Colours come from `--bu-code-*` CSS variables on `.bu-code-editor` (light and dark presets built in), so a theme can override them; nothing is parsed or validated. The Tab key inserts one indent for the language (a tab for Go, 4 spaces for C/Java/Python/Rust/…, 2 for the rest). `Esc` then `Tab` leaves the editor for keyboard users.
73
+ Colouring is display-only and follows `codeLang`: comments, strings, numbers, keywords, builtins, function calls (a word followed by `(`), types (`Capitalized` names), HTML/XML tags, attribute names and `&entities;`, `key:` names in JSON/YAML, CSS properties and `#hex` colours, `@Annotations` (Java, Kotlin, TypeScript, Python) and `$variables` (PHP, shell). Colours come from `--b-code-*` CSS variables on `.b-code-editor` (light and dark presets built in), so a theme can override them; nothing is parsed or validated. The Tab key inserts one indent for the language (a tab for Go, 4 spaces for C/Java/Python/Rust/…, 2 for the rest). `Esc` then `Tab` leaves the editor for keyboard users.
74
74
 
75
75
  Live demo: the `code-editor-demo` block in the Blocks gallery (`examples/blocks/code-editor-demo.html`, Go/C/Java/JavaScript/HTML/XML/JSON/CSS/SQL tabs plus file loading).
76
76
 
package/docs/components/data-table.md CHANGED
@@ -22,7 +22,7 @@ import { DataTable } from "@thebase/ui";
22
22
  | --- | --- | --- | --- |
23
23
  | `DataTable` | `columns` | `Array` | optional; defaults to the shadcn payments demo columns |
24
24
  | `DataTable` | `rows` | `Array` | optional; defaults to the shadcn payments demo rows |
25
- | `DataTable` | `variant` | `String` | `default` by default; use `compact` for denser rows or any custom value for a `bu-data-table-{variant}` hook |
25
+ | `DataTable` | `variant` | `String` | `default` by default; use `compact` for denser rows or any custom value for a `b-data-table-{variant}` hook |
26
26
  | `DataTable` | `searchable` | `Boolean` | `true` by default |
27
27
  | `DataTable` | `sortable` | `Boolean` | `true` by default; set `column.sortable = false` per column to disable |
28
28
  | `DataTable` | `pagination` | `Boolean` | `true` by default |
@@ -62,7 +62,7 @@ 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 Base component and the static `b-ui="data-table"` markup automatically.
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 (`.b-data-table__viewport` hides, `.b-data-table__cards` shows), so it applies to both the Base component and the static `b-ui="data-table"` markup automatically.
66
66
 
67
67
  See [Base Components](/examples/blocks.html#/docs/guide/owl-components) for how to load `@base/owl` and `dist/baseui.templates.xml`.
68
68
 
package/docs/components/dialog.md CHANGED
@@ -39,11 +39,11 @@ import {
39
39
  <button b-ui="button" b-att-variant="outline" b-att-trigger="#settings-dialog">Open Dialog</button>
40
40
  <div b-ui="dialog" b-att-trigger="[b-att-trigger='#settings-dialog']" id="settings-dialog">
41
41
  <div b-dialog-panel>
42
- <div class="bu-dialog-header" data-slot="dialog-header">
43
- <h2 b-dialog-title class="bu-dialog-title">Edit profile</h2>
44
- <p b-dialog-description class="bu-dialog-description">Make changes to your profile here. Click save when you're done.</p>
42
+ <div class="b-dialog-header" data-slot="dialog-header">
43
+ <h2 b-dialog-title class="b-dialog-title">Edit profile</h2>
44
+ <p b-dialog-description class="b-dialog-description">Make changes to your profile here. Click save when you're done.</p>
45
45
  </div>
46
- <button b-dialog-close class="btn bu-button btn-light btn-icon-sm bu-dialog-close-control" aria-label="Close">
46
+ <button b-dialog-close class="btn b-button btn-light btn-icon-sm b-dialog-close-control" aria-label="Close">
47
47
  <span b-icon="x"></span>
48
48
  <span class="visually-hidden">Close</span>
49
49
  </button>
@@ -57,7 +57,7 @@ import {
57
57
  <input b-ui="input" class="form-control" value="@peduarte" />
58
58
  </label>
59
59
  </div>
60
- <div b-dialog-footer class="bu-dialog-footer">
60
+ <div b-dialog-footer class="b-dialog-footer">
61
61
  <button b-dialog-close b-ui="button" b-att-variant="outline">Cancel</button>
62
62
  <button b-ui="button">Save changes</button>
63
63
  </div>
package/docs/components/form.md CHANGED
@@ -23,19 +23,19 @@ class BugReportExample extends Component {
23
23
  FieldLabel,
24
24
  };
25
25
  static template = xml`
26
- <form class="bu-form" data-slot="form" novalidate="novalidate" t-on-submit="submit">
27
- <div class="bu-form-header">
28
- <h3 class="bu-form-title">Bug Report</h3>
29
- <p class="bu-form-description">Help us improve by reporting bugs you encounter.</p>
26
+ <form class="b-form" data-slot="form" novalidate="novalidate" t-on-submit="submit">
27
+ <div class="b-form-header">
28
+ <h3 class="b-form-title">Bug Report</h3>
29
+ <p class="b-form-description">Help us improve by reporting bugs you encounter.</p>
30
30
  </div>
31
31
 
32
- <FieldGroup className="'bu-form-fields'">
32
+ <FieldGroup className="'b-form-fields'">
33
33
  <Field>
34
34
  <FieldLabel for="'bug-title'">Bug Title</FieldLabel>
35
35
  <input
36
36
  id="bug-title"
37
37
  name="title"
38
- class="form-control bu-form-control"
38
+ class="form-control b-form-control"
39
39
  type="text"
40
40
  placeholder="Login button not working on mobile"
41
41
  autocomplete="off"
@@ -45,18 +45,18 @@ class BugReportExample extends Component {
45
45
 
46
46
  <Field>
47
47
  <FieldLabel for="'bug-description'">Description</FieldLabel>
48
- <div class="bu-form-input-group" data-slot="input-group" role="group">
48
+ <div class="b-form-input-group" data-slot="input-group" role="group">
49
49
  <textarea
50
50
  id="bug-description"
51
51
  name="description"
52
- class="form-control bu-form-textarea"
52
+ class="form-control b-form-textarea"
53
53
  placeholder="I'm having an issue with the login button on mobile."
54
54
  maxlength="100"
55
55
  rows="6"
56
56
  t-model="state.description"
57
57
  ></textarea>
58
- <div class="bu-form-counter" data-slot="input-group-addon" data-align="block-end">
59
- <span class="bu-form-counter-text">
58
+ <div class="b-form-counter" data-slot="input-group-addon" data-align="block-end">
59
+ <span class="b-form-counter-text">
60
60
  <t t-esc="state.description.length"/>/100 characters
61
61
  </span>
62
62
  </div>
@@ -65,7 +65,7 @@ class BugReportExample extends Component {
65
65
  </Field>
66
66
  </FieldGroup>
67
67
 
68
- <Field orientation="'horizontal'" className="'bu-form-actions'">
68
+ <Field orientation="'horizontal'" className="'b-form-actions'">
69
69
  <Button type="'button'" variant="'outline'" onClick="() => this.reset()">Reset</Button>
70
70
  <Button type="'submit'">Submit</Button>
71
71
  </Field>
@@ -95,19 +95,19 @@ class BugReportExample extends Component {
95
95
  ```
96
96
 
97
97
  ```base-ui
98
- <form class="bu-form" data-slot="form" novalidate="novalidate" t-on-submit="submit">
99
- <div class="bu-form-header">
100
- <h3 class="bu-form-title">Bug Report</h3>
101
- <p class="bu-form-description">Help us improve by reporting bugs you encounter.</p>
98
+ <form class="b-form" data-slot="form" novalidate="novalidate" t-on-submit="submit">
99
+ <div class="b-form-header">
100
+ <h3 class="b-form-title">Bug Report</h3>
101
+ <p class="b-form-description">Help us improve by reporting bugs you encounter.</p>
102
102
  </div>
103
103
 
104
- <FieldGroup className="'bu-form-fields'">
104
+ <FieldGroup className="'b-form-fields'">
105
105
  <Field>
106
106
  <FieldLabel for="'bug-title'">Bug Title</FieldLabel>
107
107
  <input
108
108
  id="bug-title"
109
109
  name="title"
110
- class="form-control bu-form-control"
110
+ class="form-control b-form-control"
111
111
  type="text"
112
112
  placeholder="Login button not working on mobile"
113
113
  autocomplete="off"
@@ -117,18 +117,18 @@ class BugReportExample extends Component {
117
117
 
118
118
  <Field>
119
119
  <FieldLabel for="'bug-description'">Description</FieldLabel>
120
- <div class="bu-form-input-group" data-slot="input-group" role="group">
120
+ <div class="b-form-input-group" data-slot="input-group" role="group">
121
121
  <textarea
122
122
  id="bug-description"
123
123
  name="description"
124
- class="form-control bu-form-textarea"
124
+ class="form-control b-form-textarea"
125
125
  placeholder="I'm having an issue with the login button on mobile."
126
126
  maxlength="100"
127
127
  rows="6"
128
128
  t-model="state.description"
129
129
  ></textarea>
130
- <div class="bu-form-counter" data-slot="input-group-addon" data-align="block-end">
131
- <span class="bu-form-counter-text">
130
+ <div class="b-form-counter" data-slot="input-group-addon" data-align="block-end">
131
+ <span class="b-form-counter-text">
132
132
  <t t-esc="state.description.length"/>/100 characters
133
133
  </span>
134
134
  </div>
@@ -137,7 +137,7 @@ class BugReportExample extends Component {
137
137
  </Field>
138
138
  </FieldGroup>
139
139
 
140
- <Field orientation="'horizontal'" className="'bu-form-actions'">
140
+ <Field orientation="'horizontal'" className="'b-form-actions'">
141
141
  <Button type="'button'" variant="'outline'" onClick="() => this.reset()">Reset</Button>
142
142
  <Button type="'submit'">Submit</Button>
143
143
  </Field>
@@ -157,12 +157,12 @@ This is the same Bug Report form converted from base static markup (`b-ui`) to p
157
157
 
158
158
  ```base-ui
159
159
  <form b-ui="form">
160
- <div class="bu-form-header">
161
- <h3 class="bu-form-title">Bug Report</h3>
162
- <p class="bu-form-description">Help us improve by reporting bugs you encounter.</p>
160
+ <div class="b-form-header">
161
+ <h3 class="b-form-title">Bug Report</h3>
162
+ <p class="b-form-description">Help us improve by reporting bugs you encounter.</p>
163
163
  </div>
164
164
 
165
- <div b-field-group class="bu-form-fields">
165
+ <div b-field-group class="b-form-fields">
166
166
  <div b-ui="field">
167
167
  <label b-field-label for="bug-title">Bug Title</label>
168
168
  <input
@@ -177,7 +177,7 @@ This is the same Bug Report form converted from base static markup (`b-ui`) to p
177
177
 
178
178
  <div b-ui="field">
179
179
  <label b-field-label for="bug-description">Description</label>
180
- <div class="bu-form-input-group" data-slot="input-group" role="group">
180
+ <div class="b-form-input-group" data-slot="input-group" role="group">
181
181
  <textarea
182
182
  b-ui="textarea"
183
183
  id="bug-description"
@@ -186,7 +186,7 @@ This is the same Bug Report form converted from base static markup (`b-ui`) to p
186
186
  maxlength="100"
187
187
  rows="6"
188
188
  ></textarea>
189
- <div class="bu-form-counter" data-slot="input-group-addon" data-align="block-end">
189
+ <div class="b-form-counter" data-slot="input-group-addon" data-align="block-end">
190
190
  <span b-form-counter>0/100 characters</span>
191
191
  </div>
192
192
  </div>
@@ -194,7 +194,7 @@ This is the same Bug Report form converted from base static markup (`b-ui`) to p
194
194
  </div>
195
195
  </div>
196
196
 
197
- <div b-ui="field" b-att-orientation="horizontal" class="bu-form-actions">
197
+ <div b-ui="field" b-att-orientation="horizontal" class="b-form-actions">
198
198
  <button b-ui="button" b-att-variant="outline" b-form-reset type="button">Reset</button>
199
199
  <button b-ui="button" type="submit">Submit</button>
200
200
  </div>
package/docs/components/input.md CHANGED
@@ -55,7 +55,7 @@ Set `useTip="1"` to move `supportingText` into a tooltip: a question-mark icon a
55
55
  | --- | --- | --- |
56
56
  | `value` | `String` | controlled value; the component never mutates it itself |
57
57
  | `label` | `String` | Material-style outlined field: label rests inside, floats onto the border when focused/filled (or when `placeholder` is set) |
58
- | `labelBackground` | `String` | any CSS colour for the floated label's background (default matches the field, `--bu-field-bg`); use it when the field sits on a surface of a different colour |
58
+ | `labelBackground` | `String` | any CSS colour for the floated label's background (default matches the field, `--b-field-bg`); use it when the field sits on a surface of a different colour |
59
59
  | `supportingText` | `String` | helper line under the field, linked via `aria-describedby` |
60
60
  | `useTip` | `Number` | `0` (default) shows `supportingText` under the field; `1` hides it and shows it in a tooltip on a question-mark icon right after the label (error text still shows under the field) |
61
61
  | `errorText` | `String` | marks the field invalid, replaces `supportingText`, swaps the trailing icon for an error icon, sets `aria-invalid` |
package/docs/components/markdown.md CHANGED
@@ -101,7 +101,7 @@ A fenced ` ```base-ui ` block renders as a live component, not a code sample:
101
101
  - `b-att-base-ui` / `baseUi` — set to `"false"` to skip live-mounting fenced ` ```base-ui ` blocks; they render as plain code instead (defaults to enabled).
102
102
  - `b-att-editable` / `editable` — set to `"true"` to mount Milkdown instead of read-only rendered HTML.
103
103
  - `b-att-collaborative` / `collaborative` — set to `"true"` to connect the editor through Yjs + y-webrtc.
104
- - `b-att-room` / `room` — y-webrtc room name for collaborative sessions (defaults to `bu-markdown`).
104
+ - `b-att-room` / `room` — y-webrtc room name for collaborative sessions (defaults to `b-markdown`).
105
105
  - `b-att-password` / `password` — optional y-webrtc room password.
106
106
  - `b-att-signaling` / `signaling` — comma-separated signaling URLs for the static API, or an array prop for Owl.
107
107
 
package/docs/components/pwa.md CHANGED
@@ -69,7 +69,7 @@ See [Base Components](/examples/blocks.html#/docs/guide/owl-components) for how
69
69
  <div b-pwa-panel>
70
70
  <h2>Install Base Hub</h2>
71
71
  <p>Install this app from your browser prompt so you can launch it like an app.</p>
72
- <div class="bu-pwa-footer">
72
+ <div class="b-pwa-footer">
73
73
  <button b-pwa-close type="button">Later</button>
74
74
  <button type="button">Install</button>
75
75
  </div>
package/docs/components/shell.md CHANGED
@@ -35,7 +35,7 @@ import { SidebarClose, SidebarTrigger } from "@thebase/ui";
35
35
  <ShellMain>
36
36
  <ShellHeader>
37
37
  <SidebarTrigger>Menu</SidebarTrigger>
38
- <div class="bu-shell-header-spacer"/>
38
+ <div class="b-shell-header-spacer"/>
39
39
  <ShellUserMenu/>
40
40
  </ShellHeader>
41
41
  <ShellContent loading="state.loading">Routed page content</ShellContent>
@@ -50,7 +50,7 @@ Below 992px (`max-width: 991.98px`) the sidebar becomes the off-canvas drawer, s
50
50
  Four cross-cutting concerns are opt-in via props instead of baked into the layout:
51
51
 
52
52
  - `authState` — an arbitrary object (e.g. `{ username, onLogout }`), exposed to descendants via `env.shell.authState`. `ShellUserMenu` reads it directly and renders nothing when it's absent; pass its own default slot to fully customize the markup instead of the built-in username/logout row.
53
- - `toast`/`onToastOpenChange` — when `toast` is set (`{ variant, message, delay, persistent, actionLabel, onAction }`), `Shell` renders a built-in `Toast` bound to it, positioned as a fixed top-right overlay (`.bu-shell-toast`) so it survives regardless of where `ShellContent` scrolls. Useful for a single app-wide notification channel (e.g. a message-bus toast) that should outlive route changes.
53
+ - `toast`/`onToastOpenChange` — when `toast` is set (`{ variant, message, delay, persistent, actionLabel, onAction }`), `Shell` renders a built-in `Toast` bound to it, positioned as a fixed top-right overlay (`.b-shell-toast`) so it survives regardless of where `ShellContent` scrolls. Useful for a single app-wide notification channel (e.g. a message-bus toast) that should outlive route changes.
54
54
  - `notificationPage`/`pwa` — each an Owl component class, mounted once at the shell root (`<t t-component="..."/>`) alongside the sidebar, same shape as a consumer app's own `PWAInstallDrawer`. `Shell` doesn't know or care what they render — they're expected to manage their own trigger/visibility.
55
55
 
56
56
  | Component | Prop | Type | Notes |
package/docs/components/sidebar.md CHANGED
@@ -166,7 +166,7 @@ import { Sidebar, SidebarContent, SidebarFooter, SidebarHeader, SidebarMenu, Sid
166
166
 
167
167
  Reusable nav-content primitives, extracted from the recurring group/item shapes across the `sidebar-*` example blocks (`examples/blocks/sidebar-01.html`, `-02`, `-03`, `-08`, `-10`, etc.). Compose them instead of hand-rolling static markup for each new sidebar.
168
168
 
169
- `SidebarMenu` (`.bu-sidebar-menu`) fills the remaining height of the panel and scrolls on its own (`overflow-y: auto`) when its items overflow. `SidebarHeader` and `SidebarFooter` stay in place, so a long nav list no longer pushes the footer off-screen.
169
+ `SidebarMenu` (`.b-sidebar-menu`) fills the remaining height of the panel and scrolls on its own (`overflow-y: auto`) when its items overflow. `SidebarHeader` and `SidebarFooter` stay in place, so a long nav list no longer pushes the footer off-screen.
170
170
 
171
171
  ```base-ui
172
172
  <Sidebar defaultOpen="true">
@@ -239,16 +239,16 @@ See [Base Components](/examples/blocks.html#/docs/guide/owl-components) for how
239
239
  ## Static component
240
240
 
241
241
  ```base-ui
242
- <div class="bu-sidebar-demo-frame">
242
+ <div class="b-sidebar-demo-frame">
243
243
  <aside b-ui="sidebar" b-att-state="open">
244
244
  <div b-sidebar-header>
245
- <a href="#" class="bu-sidebar-demo-brand">
246
- <span class="bu-sidebar-demo-brand-mark"><span b-icon="gallery-vertical-end"></span></span>
247
- <span class="bu-sidebar-demo-meta">
248
- <span class="bu-sidebar-demo-title">Acme Inc</span>
249
- <span class="bu-sidebar-demo-email">Enterprise</span>
245
+ <a href="#" class="b-sidebar-demo-brand">
246
+ <span class="b-sidebar-demo-brand-mark"><span b-icon="gallery-vertical-end"></span></span>
247
+ <span class="b-sidebar-demo-meta">
248
+ <span class="b-sidebar-demo-title">Acme Inc</span>
249
+ <span class="b-sidebar-demo-email">Enterprise</span>
250
250
  </span>
251
- <span class="bu-sidebar-demo-chevrons" b-icon="chevrons-up-down"></span>
251
+ <span class="b-sidebar-demo-chevrons" b-icon="chevrons-up-down"></span>
252
252
  </a>
253
253
  </div>
254
254
 
@@ -287,18 +287,18 @@ See [Base Components](/examples/blocks.html#/docs/guide/owl-components) for how
287
287
  </div>
288
288
 
289
289
  <div b-sidebar-footer>
290
- <a href="#" class="bu-sidebar-demo-user">
291
- <span b-ui="avatar" class="bu-sidebar-demo-avatar">SC</span>
292
- <span class="bu-sidebar-demo-meta">
293
- <span class="bu-sidebar-demo-title">shadcn</span>
294
- <span class="bu-sidebar-demo-email">m@example.com</span>
290
+ <a href="#" class="b-sidebar-demo-user">
291
+ <span b-ui="avatar" class="b-sidebar-demo-avatar">SC</span>
292
+ <span class="b-sidebar-demo-meta">
293
+ <span class="b-sidebar-demo-title">shadcn</span>
294
+ <span class="b-sidebar-demo-email">m@example.com</span>
295
295
  </span>
296
- <span class="bu-sidebar-demo-chevrons" b-icon="chevrons-up-down"></span>
296
+ <span class="b-sidebar-demo-chevrons" b-icon="chevrons-up-down"></span>
297
297
  </a>
298
298
  </div>
299
299
  </aside>
300
- <main class="bu-sidebar-demo-main">
301
- <button class="bu-sidebar-trigger" type="button" aria-label="Toggle Sidebar">
300
+ <main class="b-sidebar-demo-main">
301
+ <button class="b-sidebar-trigger" type="button" aria-label="Toggle Sidebar">
302
302
  <span b-icon="panel-left"></span>
303
303
  </button>
304
304
  </main>
package/docs/components/text-editor.md CHANGED
@@ -86,7 +86,7 @@ Or the same session hosted on an external websocket backend instead of peer-to-p
86
86
  - `b-att-placeholder` / `placeholder` — empty-editor hint text.
87
87
  - `b-att-collaborative` / `collaborative` — set to `"true"` to connect through Yjs; off by default.
88
88
  - `b-att-provider` / `provider` — collaboration transport: `"webrtc"` (default, peer-to-peer) or `"websocket"` (connects to an external y-websocket-compatible backend).
89
- - `b-att-room` / `room` — document/room name for collaborative sessions (defaults to `bu-text-editor`); shared across peers for y-webrtc, or used as the document name on the y-websocket backend.
89
+ - `b-att-room` / `room` — document/room name for collaborative sessions (defaults to `b-text-editor`); shared across peers for y-webrtc, or used as the document name on the y-websocket backend.
90
90
  - `b-att-url` / `url` — y-websocket server URL (e.g. `wss://your-backend.example.com/mkdn`), required when `provider` is `"websocket"`. Ignored for `"webrtc"`.
91
91
  - `b-att-password` / `password` — optional y-webrtc room password. Ignored for `"websocket"`.
92
92
  - `b-att-signaling` / `signaling` — comma-separated signaling URLs for the static API, or an array prop for Owl. y-webrtc only.
package/docs/components/theme-button.md CHANGED
@@ -13,7 +13,7 @@ import { ThemeButton } from "@thebase/ui";
13
13
  ```
14
14
 
15
15
  ```base-ui
16
- <ThemeButton variant="'outline'" storageKey="'bu-theme'"/>
16
+ <ThemeButton variant="'outline'" storageKey="'b-theme'"/>
17
17
  ```
18
18
 
19
19
  | Component | Prop | Type | Notes |
package/docs/components/toast.md CHANGED
@@ -39,12 +39,12 @@ See [Base Components](/examples/blocks.html#/docs/guide/owl-components) for how
39
39
 
40
40
  ## Static component
41
41
 
42
- The toast root is a flex row: wrap message content in `.bu-toast-content` (grows to fill the width) and any action button plus the close button in `.bu-toast-actions` (grouped tight on the trailing edge).
42
+ The toast root is a flex row: wrap message content in `.b-toast-content` (grows to fill the width) and any action button plus the close button in `.b-toast-actions` (grouped tight on the trailing edge).
43
43
 
44
44
  ```base-ui
45
45
  <div b-ui="toast">
46
- <div class="bu-toast-content">Saved successfully.</div>
47
- <div class="bu-toast-actions">
46
+ <div class="b-toast-content">Saved successfully.</div>
47
+ <div class="b-toast-actions">
48
48
  <button b-toast-close type="button">Close</button>
49
49
  </div>
50
50
  </div>
@@ -54,14 +54,14 @@ The toast stays hidden until shown — omit `b-att-state="open"` and call `.show
54
54
 
55
55
  ```base-ui
56
56
  <div class="d-flex flex-column align-items-center gap-3">
57
- <button type="button" class="btn bu-button btn-outline-secondary" onclick="document.getElementById('demo-toast').BaseUIToast.show()">Show Toast</button>
57
+ <button type="button" class="btn b-button btn-outline-secondary" onclick="document.getElementById('demo-toast').BaseUIToast.show()">Show Toast</button>
58
58
  <div id="demo-toast" b-ui="toast" b-att-delay="3000">
59
- <div class="bu-toast-content">
59
+ <div class="b-toast-content">
60
60
  <div class="fw-medium">Event created</div>
61
61
  <div class="text-body-secondary small">Sunday, December 3 at 9:00 AM</div>
62
62
  </div>
63
- <div class="bu-toast-actions">
64
- <button type="button" class="btn bu-button btn-outline-secondary btn-sm">Undo</button>
63
+ <div class="b-toast-actions">
64
+ <button type="button" class="btn b-button btn-outline-secondary btn-sm">Undo</button>
65
65
  <button b-toast-close type="button">Close</button>
66
66
  </div>
67
67
  </div>
@@ -70,7 +70,7 @@ The toast stays hidden until shown — omit `b-att-state="open"` and call `.show
70
70
 
71
71
  Programmatic API: after mount, call `element.BaseUIToast.show()` or `element.BaseUIToast.hide()`. Events: `baseui:open`, `baseui:close`.
72
72
 
73
- Toasts are backed by `bootstrap.Toast`: the root receives Bootstrap's `toast fade` classes, and visibility is driven by Bootstrap's own `show`/`showing` classes (not `hidden`). The close button(s) carry `data-bs-dismiss="toast"` in addition to the `b-toast-close`/`bu-toast-close` selector, so Bootstrap's own delegated dismiss handler drives them.
73
+ Toasts are backed by `bootstrap.Toast`: the root receives Bootstrap's `toast fade` classes, and visibility is driven by Bootstrap's own `show`/`showing` classes (not `hidden`). The close button(s) carry `data-bs-dismiss="toast"` in addition to the `b-toast-close`/`b-toast-close` selector, so Bootstrap's own delegated dismiss handler drives them.
74
74
 
75
75
  ### Screen-corner placement
76
76
 
@@ -78,8 +78,8 @@ Set `b-att-position` to `top-left`, `top-right`, `bottom-left`, or `bottom-right
78
78
 
79
79
  ```base-ui
80
80
  <div id="corner-toast" b-ui="toast" b-att-position="bottom-right" b-att-delay="3000">
81
- <div class="bu-toast-content">Saved successfully.</div>
82
- <div class="bu-toast-actions">
81
+ <div class="b-toast-content">Saved successfully.</div>
82
+ <div class="b-toast-actions">
83
83
  <button b-toast-close type="button">Close</button>
84
84
  </div>
85
85
  </div>
package/docs/components/typography.md CHANGED
@@ -82,11 +82,30 @@ import { Typography } from "@thebase/ui";
82
82
 
83
83
  | Component | Prop | Type | Notes |
84
84
  | --- | --- | --- | --- |
85
- | `Typography` | `variant` | `String` | optional |
85
+ | `Typography` | `variant` | `String` | optional; `lead`, `muted`, `code`, `kbd`, `h1`-`h4`, `blockquote`, `small`, `list` |
86
+ | `Typography` | `tag` | `String` | optional; defaults to `h1`-`h4`, `blockquote`, `small`, `ul` for those variants, else `p` |
86
87
  | `Typography` | `className` | `String` | optional |
87
88
 
88
89
  See [Base Components](/examples/blocks.html#/docs/guide/owl-components) for how to load `@base/owl` and `dist/baseui.templates.xml`.
89
90
 
91
+ ## Bootstrap typography classes
92
+
93
+ Base UI redefines the Bootstrap 5 typography classes to the shadcn typeset values
94
+ (`src/styles/base-extensions.css`), in Be Vietnam Pro. Use plain Bootstrap markup:
95
+
96
+ | Element / class | Result |
97
+ | --- | --- |
98
+ | `h1` / `.h1` ... `h4` / `.h4` | 1.75rem, 1.25rem, 1.125rem, 1rem; weight 600; line-height 1.3 to 1.5 |
99
+ | `h5` / `.h5`, `h6` / `.h6` | 0.875rem / 0.8125rem, weight 500, muted; `h6` is uppercase with 0.08em tracking |
100
+ | `.display-1` ... `.display-6` | Bootstrap sizes, weight 600, line-height 1.2 |
101
+ | `.lead`, `.small`, `mark`, `del`, `abbr[title]` | muted lead text, `--b-text-sm`, shadcn highlight, muted strike-through, dotted underline |
102
+ | `blockquote` / `.blockquote` | 2px start border, 1em inline padding, inherited size |
103
+ | `hr`, `dt`, `dd`, `code`, `pre`, `kbd`, `caption` | shadcn rule, weights, muted-background code, keycap border |
104
+
105
+ Bootstrap's bottom-margin rhythm is unchanged. For the shadcn flow model (margin-top only,
106
+ 1.25em between blocks, 1.75 line-height, styled lists, links and tables) wrap prose in
107
+ `class="b-typeset"`; tune with `--b-typeset-flow` and `--b-typeset-leading`.
108
+
90
109
  ## Static component
91
110
 
92
111
  ```base-ui
@@ -94,6 +113,6 @@ See [Base Components](/examples/blocks.html#/docs/guide/owl-components) for how
94
113
  <span b-ui="typography" b-att-variant="code">baseui</span>
95
114
  ```
96
115
 
97
- Options: `b-att-variant="body|lead|muted|code|kbd"`.
116
+ Options: `b-att-variant="body|lead|muted|code|kbd|h1|h2|h3|h4|blockquote|small|list"` (static markup keeps its own element, so write `<h2 b-ui="typography" b-att-variant="h2">`; the variant only adds the class).
98
117
 
99
118
  Accessibility: choose semantic HTML elements first, then add the Base UI typography attributes for styling.