@thebase/ui 1.1.6 → 1.2.0

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 (63) hide show
  1. package/CHANGELOG.md +80 -1
  2. package/README.md +9 -5
  3. package/bin/create-baseui-app.mjs +31 -8
  4. package/dist/baseui.apidoc.esm.js +68 -60
  5. package/dist/baseui.apidoc.min.js +68 -60
  6. package/dist/baseui.esm.js +44 -47
  7. package/dist/baseui.icons.esm.js +1 -1
  8. package/dist/baseui.min.css +2 -2
  9. package/dist/baseui.min.js +62 -46
  10. package/dist/baseui.pwa.esm.js +71 -9
  11. package/dist/baseui.registry.json +26 -33
  12. package/dist/baseui.templates.xml +353 -370
  13. package/dist/baseui.vite.esm.js +116 -0
  14. package/dist/runtime/lazy/apidoc.logic.js +20 -0
  15. package/dist/runtime/milkdown/milkdown-editor.js +1 -1
  16. package/dist/runtime/milkdown/milkdown-text-editor.js +1 -1
  17. package/dist/themes/baseui-dark.css +80 -1
  18. package/dist/themes/baseui-dark.min.css +1 -0
  19. package/dist/themes/baseui-light.css +81 -1
  20. package/dist/themes/baseui-light.min.css +1 -0
  21. package/dist/types/pwa.d.ts +1 -45
  22. package/dist/types/vite.d.ts +4 -0
  23. package/docs/analytics.md +3 -3
  24. package/docs/base-ui-skill.md +54 -0
  25. package/docs/blocks.md +1 -1
  26. package/docs/components/accordion.md +4 -4
  27. package/docs/components/apidoc.md +1 -1
  28. package/docs/components/block-viewer.md +1 -1
  29. package/docs/components/breadcrumb.md +1 -1
  30. package/docs/components/button.md +1 -1
  31. package/docs/components/chart.md +2 -0
  32. package/docs/components/code-editor.md +77 -0
  33. package/docs/components/combobox.md +10 -0
  34. package/docs/components/data-table.md +2 -2
  35. package/docs/components/date-picker.md +10 -0
  36. package/docs/components/dialog.md +5 -5
  37. package/docs/components/empty.md +1 -1
  38. package/docs/components/field.md +8 -0
  39. package/docs/components/form.md +29 -29
  40. package/docs/components/input.md +28 -2
  41. package/docs/components/kbd.md +3 -6
  42. package/docs/components/markdown.md +3 -1
  43. package/docs/components/message-scroller.md +3 -8
  44. package/docs/components/native-select.md +13 -0
  45. package/docs/components/navigation-menu.md +2 -0
  46. package/docs/components/pwa.md +1 -1
  47. package/docs/components/select.md +16 -0
  48. package/docs/components/shell.md +4 -2
  49. package/docs/components/sidebar.md +18 -16
  50. package/docs/components/switch.md +11 -0
  51. package/docs/components/text-editor.md +1 -1
  52. package/docs/components/textarea.md +23 -0
  53. package/docs/components/theme-button.md +1 -1
  54. package/docs/components/toast.md +10 -10
  55. package/docs/components/typography.md +21 -2
  56. package/docs/icons.md +1 -1
  57. package/docs/installation.md +2 -2
  58. package/docs/owl-components.md +1 -1
  59. package/docs/runtime-api.md +2 -2
  60. package/docs/theming.md +33 -3
  61. package/docs/usage-guide.md +23 -6
  62. package/package.json +6 -1
  63. package/docs/components/input-group.md +0 -68
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/chart.md CHANGED
@@ -112,6 +112,8 @@ Interactive components emit documented `baseui:*` events from their root element
112
112
 
113
113
  The component inherits the Base UI semantic tokens plus shadcn-compatible chart tokens: `--b-chart-1` through `--b-chart-5`. Area-card examples also use `--b-chart-height`, `--b-chart-grid`, `b-chart-area`, `b-chart-line`, `b-chart-axis`, `b-chart-footer`, `b-chart-trend`, and `b-chart-range`.
114
114
 
115
+ The plot (`b-chart-plot`) has a fixed height of `--b-chart-height` (default `var(--b50)`), and each `b-att-value` column draws its bar from the bottom as a percentage of the largest value in the chart. Override `--b-chart-height` on the chart element to make it taller or shorter; the bar height needs this definite plot height to resolve.
116
+
115
117
  ## Accessibility behavior
116
118
 
117
119
  The component preserves authored semantic HTML and adds ARIA roles or state attributes where enhancement is required.
package/docs/components/code-editor.md ADDED
@@ -0,0 +1,77 @@
1
+ # Code Editor
2
+
3
+ A dependency-free code box with line numbers, syntax colouring, Tab/Shift+Tab indent, Enter auto-indent and Format, Copy and Edit/View buttons. Pure Base only: it has no static `b-ui` adapter. Name the language with `codeLang`. Editable by default: pass `onChange` to own the text, or omit it and the editor keeps its own edits; add `readonly` to start in reading mode. The **Edit** button (right of Copy) toggles between reading (no typing, no Format button) and editing (**View** switches back).
4
+
5
+ ## Base component
6
+
7
+ ```js
8
+ import { CodeEditor } from "@thebase/ui";
9
+ ```
10
+
11
+ ```base-ui
12
+ <div class="d-flex flex-column gap-3 w-100">
13
+ <CodeEditor title="'main.go'" codeLang="'go'" value="'package main\n\nimport \'fmt\'\n\n// Greets the world.\nfunc main() {\n\tfmt.Println(\'hello\', 42)\n}'"/>
14
+ <CodeEditor codeLang="'sql'" value="'SELECT id, name\nFROM users\nWHERE active = true -- only live accounts\nLIMIT 10;'"/>
15
+ </div>
16
+ ```
17
+
18
+ Editable, with state:
19
+
20
+ ```js
21
+ this.state = useState({ code: "int main(void) {\n return 0;\n}" });
22
+ ```
23
+
24
+ ```xml
25
+ <CodeEditor codeLang="'c'" value="state.code" onChange="(code) => state.code = code"/>
26
+ ```
27
+
28
+ | Prop | Type | Default |
29
+ | --- | --- | --- |
30
+ | `codeLang` | `String` | picked from the loaded file's extension, else `"plaintext"`; language to colour (see below), case-insensitive; unknown names fall back to plain text |
31
+ | `value` | `String` | the code; the component never mutates it |
32
+ | `src` | `String` | URL of a code file to fetch and show; reloads when it changes. Replaces `value` once loaded. Cross-origin URLs need CORS |
33
+ | `upload` | `Boolean` | shows an "Open file" button that loads a local file into the editor |
34
+ | `onLoad` | `Function` | `({ code, name }) => void`, after a file loads from `src` or an upload |
35
+ | `onError` | `Function` | `(error) => void`, when `src` or an upload cannot be read (an error alert is also shown) |
36
+ | `format` | `Boolean` | shows the **Format** button while editable (default on); `false` hides it |
37
+ | `toggle` | `Boolean` | shows the Edit/View button (default on); `false` locks the mode set by `readonly` |
38
+ | `onChange` | `Function` | `(code) => void`, called on every edit; omit it and the editor keeps its own edits |
39
+ | `readonly` | `Boolean` | starts in reading mode; users can switch with the Edit button unless `toggle` is `false` |
40
+ | `title` | `String` | heading, also the textarea's `aria-label`; defaults to `"<Language> code"` |
41
+ | `globals` | `Array<String>` | names your runtime binds; listed in the hint and coloured as builtins |
42
+ | `hint` | `String` | free-text help shown after the globals |
43
+ | `id` | `String` | textarea id, so an external `<label for>` can target the editor |
44
+ | `className` / `style` | `String` / `String \| Object` | on the root |
45
+
46
+ ## Formatting
47
+
48
+ The **Format** button (or `Shift+Alt+F` in the editor) re-indents the code for the current `codeLang`, then reports it through `onChange`. It is a dependency-free re-indenter, not a full pretty-printer: it never re-wraps or rewrites code.
49
+
50
+ | Languages | What Format does |
51
+ | --- | --- |
52
+ | `json` | parses and pretty-prints with 2 spaces; invalid JSON shows an error alert, calls `onError` and leaves the text unchanged |
53
+ | `javascript`, `typescript`, `go`, `c`, `cpp`, `java`, `csharp`, `kotlin`, `swift`, `rust`, `php`, `css` | re-indents by bracket depth with the language's indent (tab for Go); brackets inside strings and comments are ignored, lines inside multi-line strings/comments are untouched, C/C++ `#` lines stay at the left margin |
54
+ | `html`, `xml` | re-indents by tag depth (void HTML tags like `<br>` and `/>` self-closing tags don't nest; tags inside comments and attribute values are ignored) |
55
+ | `lua` | re-indents by `function/if/for/while/repeat … end/until` blocks and brackets |
56
+ | everything else (`python`, `yaml`, `ruby`, `bash`, `sql`, plain text) | only trims trailing spaces; indentation is left alone because it carries meaning or has no safe rule |
57
+
58
+ All languages also collapse runs of blank lines to one and end the text with a single newline.
59
+
60
+ ## Loading files
61
+
62
+ ```xml
63
+ <CodeEditor src="'/examples/main.go'"/>
64
+ <CodeEditor upload="true" title="'Open a file to view it'"/>
65
+ ```
66
+
67
+ `src` fetches the URL as text and shows it; the language comes from `codeLang`, or from the file extension (`.go`, `.c`, `.java`, `.mjs`, …) when `codeLang` is not set. `upload` adds an **Open file** button that reads a local file in the browser (nothing is uploaded anywhere). A loaded file replaces `value`; edits to it stay in the editor and are still reported through `onChange`. A failed fetch (HTTP error, network or CORS) shows an error alert and calls `onError`.
68
+
69
+ ## Languages
70
+
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
+
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
+
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
+
77
+ The chrome is built from [Badge](badge.md), [ClipboardButton](clipboard-button.md) and [Kbd](kbd.md).
package/docs/components/combobox.md CHANGED
@@ -24,6 +24,16 @@ import { Combobox } from "@thebase/ui";
24
24
  </div>
25
25
  ```
26
26
 
27
+ ### Help tooltip (`useTip`)
28
+
29
+ Set `useTip="1"` to move `supportingText` into a tooltip: a question-mark icon appears right after the label, in the same label box, and the text shows on hover or focus. Error text still shows under the field.
30
+
31
+ ```base-ui
32
+ <div style="max-width: 28rem" class="w-100 pt-3">
33
+ <Combobox options="[{ value: 'nextjs', label: 'Next.js' }, { value: 'remix', label: 'Remix' }]" label="'Framework'" supportingText="'Pick the one you use most'" useTip="1"/>
34
+ </div>
35
+ ```
36
+
27
37
  | Component | Prop | Type | Notes |
28
38
  | --- | --- | --- | --- |
29
39
  | `Combobox` | `options` | `Array` | required |
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/date-picker.md CHANGED
@@ -19,6 +19,16 @@ import { DatePicker } from "@thebase/ui";
19
19
  </div>
20
20
  ```
21
21
 
22
+ ### Help tooltip (`useTip`)
23
+
24
+ Set `useTip="1"` to move `supportingText` into a tooltip: a question-mark icon appears right after the label, in the same label box, and the text shows on hover or focus. Error text still shows under the field.
25
+
26
+ ```base-ui
27
+ <div style="max-width: 28rem" class="w-100 pt-3">
28
+ <DatePicker label="'Date of birth'" supportingText="'As on your ID'" useTip="1"/>
29
+ </div>
30
+ ```
31
+
22
32
  | Component | Prop | Type | Notes |
23
33
  | --- | --- | --- | --- |
24
34
  | `DatePicker` | `value` | `String` | optional |
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/empty.md CHANGED
@@ -63,4 +63,4 @@ See [Base Components](/examples/blocks.html#/docs/guide/owl-components) for how
63
63
  </div>
64
64
  ```
65
65
 
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`.
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, and RTL states are composed by placing those components inside `b-empty-media` or `b-empty-content`.
package/docs/components/field.md CHANGED
@@ -90,6 +90,14 @@ import {
90
90
  </div>
91
91
  ```
92
92
 
93
+ ```base-ui
94
+ <div style="max-width: 28rem; width: 100%">
95
+ <Field label="'Email'" description="'We never share it'" useTip="1"><Input leadingIcon="'mail'"/></Field>
96
+ </div>
97
+ ```
98
+
99
+ With `useTip="1"` on `Field`, the description moves into a tooltip on a question-mark icon right after the label, as above.
100
+
93
101
  Use one control per labelled `Field`. For checkboxes, radios and switches keep `FieldLabel` and `FieldDescription`; `Field`'s `label` prop no longer renders a standalone label.
94
102
 
95
103
  ## Static component
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
@@ -26,14 +26,40 @@ import { Input } from "@thebase/ui";
26
26
  </div>
27
27
  ```
28
28
 
29
+ ### Addons (`start` / `end` slots)
30
+
31
+ Put text, icons or buttons inside the field with the `start` and `end` slots. The text stays clear of them, and the label moves over for `start`. Content can be plain text, an `Icon`, a `Kbd` or a `Button`. For a textarea, see the `footer` slot on [Textarea](/examples/blocks.html#/docs/components/textarea).
32
+
33
+ ```base-ui
34
+ <div style="max-width: 28rem" class="w-100 pt-3 d-flex flex-column gap-4">
35
+ <Input label="'Website'" placeholder="'example.com'">
36
+ <t t-set-slot="start"><span>https://</span></t>
37
+ </Input>
38
+ <Input label="'Search'">
39
+ <t t-set-slot="end"><Button size="'xs'">Search</Button></t>
40
+ </Input>
41
+ </div>
42
+ ```
43
+
44
+ ### Help tooltip (`useTip`)
45
+
46
+ Set `useTip="1"` to move `supportingText` into a tooltip: a question-mark icon appears right after the label, in the same label box, and the text shows on hover or focus. Error text still shows under the field.
47
+
48
+ ```base-ui
49
+ <div style="max-width: 28rem" class="w-100 pt-3">
50
+ <Input label="'Email'" supportingText="'We only use it to send receipts'" useTip="1" leadingIcon="'mail'"/>
51
+ </div>
52
+ ```
53
+
29
54
  | Prop | Type | Notes |
30
55
  | --- | --- | --- |
31
56
  | `value` | `String` | controlled value; the component never mutates it itself |
32
57
  | `label` | `String` | Material-style outlined field: label rests inside, floats onto the border when focused/filled (or when `placeholder` is set) |
33
- | `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 |
34
59
  | `supportingText` | `String` | helper line under the field, linked via `aria-describedby` |
35
- | `useTip` | `Number` | `0` (default) shows `supportingText` under the field; `1` hides it and shows it in a tooltip on an info icon (error text still shows under the field) |
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) |
36
61
  | `errorText` | `String` | marks the field invalid, replaces `supportingText`, swaps the trailing icon for an error icon, sets `aria-invalid` |
62
+ | slots `start` / `end` | slot | content drawn inside the box at the left/right edge (e.g. text, `Icon`, `Kbd`, `Button`); forces the outlined box even without a `label` |
37
63
  | `leadingIcon` / `trailingIcon` | `String` | Lucide icon names (outlined mode only) |
38
64
  | `maxLength` | `Number` | native limit; outlined mode also shows a `n/max` counter |
39
65
  | `placeholder` | `String` | |
package/docs/components/kbd.md CHANGED
@@ -22,12 +22,9 @@ import { Kbd } from "@thebase/ui";
22
22
  Accept <Kbd className="'ms-2'">⏎ Enter</Kbd>
23
23
  </t>
24
24
  </Button>
25
- <InputGroup class="w-100">
26
- <InputGroupInput placeholder="'Search...'"/>
27
- <InputGroupAddon align="'inline-end'">
28
- <Kbd>⌘K</Kbd>
29
- </InputGroupAddon>
30
- </InputGroup>
25
+ <Input label="'Search'" className="'w-100'">
26
+ <t t-set-slot="end"><Kbd>⌘K</Kbd></t>
27
+ </Input>
31
28
  </div>
32
29
  ```
33
30
 
package/docs/components/markdown.md CHANGED
@@ -101,12 +101,14 @@ 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
 
108
108
  See `dist/baseui.registry.json` for the full attribute list.
109
109
 
110
+ Task-list checkboxes (`- [ ] item`) get an `aria-label` with the item text after rendering. On coarse pointers (touch), links in tables and lists and checkboxes get larger touch targets. Tables scroll horizontally inside their own container.
111
+
110
112
  ## Events
111
113
 
112
114
  - `baseui:markdown-render` — fired after Markdown parses and diagrams finish enhancing (`detail.html`).
package/docs/components/message-scroller.md CHANGED
@@ -30,14 +30,9 @@ import { MessageScroller } from "@thebase/ui";
30
30
  </MessageScroller>
31
31
  </div>
32
32
  <CardFooter className="'border-top p-3'">
33
- <InputGroup className="'w-100'">
34
- <InputGroupTextarea placeholder="'Type your message...'" rows="1"/>
35
- <InputGroupAddon align="'block-end'">
36
- <InputGroupButton>
37
- <Icon name="'arrow-up'"/>
38
- </InputGroupButton>
39
- </InputGroupAddon>
40
- </InputGroup>
33
+ <Textarea placeholder="'Type your message...'" rows="1" className="'w-100'">
34
+ <t t-set-slot="footer"><span/><Button size="'icon-xs'" ariaLabel="'Send'"><Icon name="'arrow-up'"/></Button></t>
35
+ </Textarea>
41
36
  </CardFooter>
42
37
  </Card>
43
38
  </div>
package/docs/components/native-select.md CHANGED
@@ -19,6 +19,19 @@ import { NativeSelect } from "@thebase/ui";
19
19
  </div>
20
20
  ```
21
21
 
22
+ ### Help tooltip (`useTip`)
23
+
24
+ Set `useTip="1"` to move `supportingText` into a tooltip: a question-mark icon appears right after the label, in the same label box, and the text shows on hover or focus. Error text still shows under the field.
25
+
26
+ ```base-ui
27
+ <div style="max-width: 28rem" class="w-100 pt-3">
28
+ <NativeSelect label="'Fruit'" supportingText="'Shown on your order'" useTip="1">
29
+ <option value="'apple'">Apple</option>
30
+ <option value="'banana'">Banana</option>
31
+ </NativeSelect>
32
+ </div>
33
+ ```
34
+
22
35
  | Component | Prop | Type | Notes |
23
36
  | --- | --- | --- | --- |
24
37
  | `NativeSelect` | `value` | `String` | optional |
package/docs/components/navigation-menu.md CHANGED
@@ -39,3 +39,5 @@ See [Base Components](/examples/blocks.html#/docs/guide/owl-components) for how
39
39
  ```
40
40
 
41
41
  The Base UI adds `menubar`/`menuitem` roles and Left/Right arrow focus movement.
42
+
43
+ Below 768px the menu does not wrap: it scrolls horizontally with a fade on the right edge and no visible scrollbar, so a sticky header keeps a constant height. Items never shrink or wrap their text.
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/select.md CHANGED
@@ -19,6 +19,22 @@ import { Select, SelectContent, SelectItem, SelectTrigger } from "@thebase/ui";
19
19
  </div>
20
20
  ```
21
21
 
22
+ ### Help tooltip (`useTip`)
23
+
24
+ Set `useTip="1"` to move `supportingText` into a tooltip: a question-mark icon appears right after the label, in the same label box, and the text shows on hover or focus. Error text still shows under the field.
25
+
26
+ ```base-ui
27
+ <div style="max-width: 28rem" class="w-100 pt-3">
28
+ <Select label="'Theme'" value="'dark'" supportingText="'Applies to this device only'" useTip="1">
29
+ <SelectTrigger>Dark</SelectTrigger>
30
+ <SelectContent>
31
+ <SelectItem value="'light'">Light</SelectItem>
32
+ <SelectItem value="'dark'">Dark</SelectItem>
33
+ </SelectContent>
34
+ </Select>
35
+ </div>
36
+ ```
37
+
22
38
  | Component | Prop | Type | Notes |
23
39
  | --- | --- | --- | --- |
24
40
  | `Select` | `value` | `String` | optional |
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>
@@ -45,10 +45,12 @@ import { SidebarClose, SidebarTrigger } from "@thebase/ui";
45
45
 
46
46
  `Shell` wraps the existing `Sidebar` primitive internally to provide the off-canvas/mobile drawer behavior (`open`/`defaultOpen`/`onOpenChange` are forwarded to it) and additionally tracks its own desktop `collapsed` state, exposed to descendants via `env.shell`/`env.setShellCollapsed`. A single `SidebarTrigger` toggles both: it opens/closes the mobile drawer via `env.setSidebarOpen` and, when mounted inside a `Shell`, also toggles the desktop collapse rail via `env.setShellCollapsed` — no separate collapse-trigger component is needed.
47
47
 
48
+ Below 992px (`max-width: 991.98px`) the sidebar becomes the off-canvas drawer, so tablets in portrait get the drawer too; at 992px and above it is the collapsible desktop rail.
49
+
48
50
  Four cross-cutting concerns are opt-in via props instead of baked into the layout:
49
51
 
50
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.
51
- - `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.
52
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.
53
55
 
54
56
  | Component | Prop | Type | Notes |