@thebase/ui 1.1.3 → 1.1.5

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 (95) hide show
  1. package/CHANGELOG.md +37 -18
  2. package/README.md +26 -22
  3. package/bin/create-baseui-app.mjs +7 -7
  4. package/dist/baseui.apidoc.esm.js +949 -0
  5. package/dist/baseui.apidoc.min.js +950 -0
  6. package/dist/baseui.esm.js +31 -31
  7. package/dist/baseui.min.css +1 -1
  8. package/dist/baseui.min.js +31 -31
  9. package/dist/baseui.registry.json +5 -5
  10. package/dist/baseui.templates.xml +60 -31
  11. package/dist/types/apidoc.d.ts +27 -0
  12. package/docs/analytics.md +5 -5
  13. package/docs/blocks.md +5 -5
  14. package/docs/components/accordion.md +3 -3
  15. package/docs/components/alert-dialog.md +2 -2
  16. package/docs/components/alert.md +2 -2
  17. package/docs/components/apidoc.md +17 -4
  18. package/docs/components/aspect-ratio.md +2 -2
  19. package/docs/components/attachment.md +3 -3
  20. package/docs/components/avatar.md +5 -5
  21. package/docs/components/badge.md +2 -2
  22. package/docs/components/block-viewer.md +4 -4
  23. package/docs/components/breadcrumb.md +3 -3
  24. package/docs/components/bubble.md +2 -2
  25. package/docs/components/button-group.md +2 -2
  26. package/docs/components/button.md +2 -2
  27. package/docs/components/calendar.md +5 -5
  28. package/docs/components/card.md +2 -2
  29. package/docs/components/carousel.md +5 -5
  30. package/docs/components/chart.md +5 -5
  31. package/docs/components/checkbox.md +2 -2
  32. package/docs/components/clipboard-button.md +2 -2
  33. package/docs/components/collapsible.md +2 -2
  34. package/docs/components/combobox.md +7 -6
  35. package/docs/components/command.md +5 -5
  36. package/docs/components/context-menu.md +5 -5
  37. package/docs/components/data-table.md +6 -6
  38. package/docs/components/date-picker.md +9 -8
  39. package/docs/components/dialog.md +4 -4
  40. package/docs/components/direction.md +2 -2
  41. package/docs/components/drawer.md +3 -3
  42. package/docs/components/dropdown-menu.md +3 -3
  43. package/docs/components/empty.md +3 -3
  44. package/docs/components/field.md +23 -17
  45. package/docs/components/form.md +3 -3
  46. package/docs/components/hover-card.md +5 -8
  47. package/docs/components/icon.md +3 -3
  48. package/docs/components/input-group.md +8 -7
  49. package/docs/components/input-otp.md +5 -5
  50. package/docs/components/input.md +6 -5
  51. package/docs/components/item.md +2 -2
  52. package/docs/components/kbd.md +2 -2
  53. package/docs/components/label.md +2 -2
  54. package/docs/components/markdown.md +3 -3
  55. package/docs/components/marker.md +2 -2
  56. package/docs/components/menubar.md +2 -2
  57. package/docs/components/message-scroller.md +5 -5
  58. package/docs/components/message.md +5 -5
  59. package/docs/components/native-select.md +4 -4
  60. package/docs/components/navigation-menu.md +3 -3
  61. package/docs/components/pagination.md +3 -3
  62. package/docs/components/popover.md +7 -7
  63. package/docs/components/progress.md +2 -2
  64. package/docs/components/pwa.md +2 -2
  65. package/docs/components/questionnaire.md +5 -5
  66. package/docs/components/radio-group.md +2 -2
  67. package/docs/components/resizable.md +5 -5
  68. package/docs/components/scroll-area.md +5 -5
  69. package/docs/components/select.md +6 -5
  70. package/docs/components/separator.md +2 -2
  71. package/docs/components/sheet.md +3 -3
  72. package/docs/components/shell.md +2 -2
  73. package/docs/components/sidebar.md +2 -2
  74. package/docs/components/skeleton.md +2 -2
  75. package/docs/components/slider.md +2 -2
  76. package/docs/components/spinner.md +3 -3
  77. package/docs/components/switch.md +2 -2
  78. package/docs/components/table.md +2 -2
  79. package/docs/components/tabs.md +4 -4
  80. package/docs/components/text-editor.md +2 -2
  81. package/docs/components/textarea.md +11 -15
  82. package/docs/components/theme-button.md +4 -4
  83. package/docs/components/toast.md +3 -3
  84. package/docs/components/toggle-group.md +5 -5
  85. package/docs/components/toggle.md +5 -5
  86. package/docs/components/tooltip.md +7 -7
  87. package/docs/components/typography.md +3 -3
  88. package/docs/icons.md +7 -7
  89. package/docs/installation.md +14 -13
  90. package/docs/owl-components.md +17 -17
  91. package/docs/registry.md +8 -8
  92. package/docs/runtime-api.md +3 -3
  93. package/docs/theming.md +5 -5
  94. package/docs/usage-guide.md +26 -26
  95. package/package.json +9 -2
@@ -2,7 +2,7 @@
2
2
 
3
3
  Use `b-ui="tooltip"` with either `b-att-content` or a tooltip content child.
4
4
 
5
- ## Pure Owl component
5
+ ## Base component
6
6
 
7
7
  ```js
8
8
  import { Tooltip } from "@thebase/ui";
@@ -24,11 +24,11 @@ import { Tooltip } from "@thebase/ui";
24
24
  | `Tooltip` | `state` | `String` | optional; `"open"`/`"on"`/`"active"` shows the tooltip once on mount (uncontrolled testing hook) |
25
25
  | `Tooltip` | `className` | `String` | optional |
26
26
 
27
- See [Pure Owl Components](/examples/blocks.html#/docs/guide/owl-components) for how to load `@base/owl` and `dist/baseui.templates.xml`.
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
- Both the pure Owl and static forms are driven by a live `bootstrap.Tooltip` instance owned on the trigger element, with `trigger: "hover focus"` — **the visible popup is Bootstrap's own generated DOM (a `.tooltip`/`.tooltip-arrow`/`.tooltip-inner` node, positioned via Popper), appended to `document.body`, not rendered inline where you authored the tooltip.** Don't query for it as a descendant of the trigger; query `document.body.querySelector(".tooltip .tooltip-inner")` instead. Bootstrap sets `aria-describedby` on the trigger itself, but only while the tooltip is actually shown (removed again on hide) — BaseUI does not additionally set a static `aria-describedby` up front.
29
+ Both the pure Base and static forms are driven by a live `bootstrap.Tooltip` instance owned on the trigger element, with `trigger: "hover focus"` — **the visible popup is Bootstrap's own generated DOM (a `.tooltip`/`.tooltip-arrow`/`.tooltip-inner` node, positioned via Popper), appended to `document.body`, not rendered inline where you authored the tooltip.** Don't query for it as a descendant of the trigger; query `document.body.querySelector(".tooltip .tooltip-inner")` instead. Bootstrap sets `aria-describedby` on the trigger itself, but only while the tooltip is actually shown (removed again on hide) — the Base UI does not additionally set a static `aria-describedby` up front.
30
30
 
31
- The default slot's rendered markup is captured into an HTML string for Bootstrap's `title`/`html: true` options (Bootstrap can't consume live vnodes): the pure Owl component renders the slot into a hidden buffer element internal to its own template, reads its `innerHTML` on mount, and re-syncs the live popup via `.setContent({'.tooltip-inner': html})` whenever that HTML changes on a later render.
31
+ The default slot's rendered markup is captured into an HTML string for Bootstrap's `title`/`html: true` options (Bootstrap can't consume live vnodes): the Base component renders the slot into a hidden buffer element internal to its own template, reads its `innerHTML` on mount, and re-syncs the live popup via `.setContent({'.tooltip-inner': html})` whenever that HTML changes on a later render.
32
32
 
33
33
  ## Static component
34
34
 
@@ -54,11 +54,11 @@ Use the global runtime methods: `thebase.mount()`, `thebase.mountAll()`, and `th
54
54
 
55
55
  ## Events
56
56
 
57
- Interactive components emit documented `baseui:*` events from their root element. Listen for Bootstrap's own `shown.bs.tooltip`/`hidden.bs.tooltip` on the trigger element to react to show/hide; BaseUI mirrors those into `b-att-state` (`open`/`closed`) on the static root and `this.state.open` on the pure Owl component.
57
+ Interactive components emit documented `baseui:*` events from their root element. Listen for Bootstrap's own `shown.bs.tooltip`/`hidden.bs.tooltip` on the trigger element to react to show/hide; the Base UI mirrors those into `b-att-state` (`open`/`closed`) on the static root and `this.state.open` on the Base component.
58
58
 
59
59
  ## CSS variables
60
60
 
61
- The component inherits BaseUI semantic tokens such as `--b-surface`, `--b-border`, `--b-primary`, and `--b-radius`. The popup itself is styled by Bootstrap's own bundled `.tooltip`/`.tooltip-arrow`/`.tooltip-inner` CSS (loaded via `dist/baseui.min.css`), not BaseUI's own classes.
61
+ 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 `.tooltip`/`.tooltip-arrow`/`.tooltip-inner` CSS (loaded via `dist/baseui.min.css`), not the Base UI's own classes.
62
62
 
63
63
  ## Accessibility behavior
64
64
 
@@ -70,7 +70,7 @@ See `examples/index.html` for a working CDN-style page.
70
70
 
71
71
  ## Browser support
72
72
 
73
- BaseUI targets modern evergreen browsers that support ES modules, CSS variables, and Bootstrap 5.3.
73
+ The Base UI targets modern evergreen browsers that support ES modules, CSS variables, and Bootstrap 5.3.
74
74
 
75
75
  ## Test checklist
76
76
 
@@ -2,7 +2,7 @@
2
2
 
3
3
  Small text helpers for plain content.
4
4
 
5
- ## Pure Owl component
5
+ ## Base component
6
6
 
7
7
  ```js
8
8
  import { Typography } from "@thebase/ui";
@@ -85,7 +85,7 @@ import { Typography } from "@thebase/ui";
85
85
  | `Typography` | `variant` | `String` | optional |
86
86
  | `Typography` | `className` | `String` | optional |
87
87
 
88
- See [Pure Owl Components](/examples/blocks.html#/docs/guide/owl-components) for how to load `@base/owl` and `dist/baseui.templates.xml`.
88
+ See [Base Components](/examples/blocks.html#/docs/guide/owl-components) for how to load `@base/owl` and `dist/baseui.templates.xml`.
89
89
 
90
90
  ## Static component
91
91
 
@@ -96,4 +96,4 @@ See [Pure Owl Components](/examples/blocks.html#/docs/guide/owl-components) for
96
96
 
97
97
  Options: `b-att-variant="body|lead|muted|code|kbd"`.
98
98
 
99
- Accessibility: choose semantic HTML elements first, then add BaseUI typography attributes for styling.
99
+ Accessibility: choose semantic HTML elements first, then add the Base UI typography attributes for styling.
package/docs/icons.md CHANGED
@@ -1,6 +1,6 @@
1
1
  # Built-in Icons
2
2
 
3
- BaseUI ships the full Lucide icon set as a built-in CDN-ready icon library. Icons use the `b-icon` attribute, render as CSS masks, and inherit `currentColor` from the surrounding button, link, menu item, block, or theme.
3
+ The Base UI ships the full Lucide icon set as a built-in CDN-ready icon library. Icons use the `b-icon` attribute, render as CSS masks, and inherit `currentColor` from the surrounding button, link, menu item, block, or theme.
4
4
 
5
5
  ```html
6
6
  <button b-ui="button" type="button">
@@ -15,20 +15,20 @@ BaseUI ships the full Lucide icon set as a built-in CDN-ready icon library. Icon
15
15
 
16
16
  ## Install
17
17
 
18
- Load the normal BaseUI assets. No separate icon script is required.
18
+ Load the normal the Base UI assets. No separate icon script is required.
19
19
 
20
20
  ```html
21
21
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@thebase/ui@latest/dist/baseui.min.css">
22
22
  <script src="https://cdn.jsdelivr.net/npm/@thebase/ui@latest/dist/baseui.min.js" defer></script>
23
23
  ```
24
24
 
25
- `https://unpkg.com/@thebase/ui@latest/dist/...` mirrors the same files as an alternative CDN if jsDelivr is unreachable. Pin an exact version (e.g. `@1.1.3`, or `@1` to take only non-breaking updates) instead of `@latest` for production. `b-icon` also works with the [pure Owl `Icon` component](components/icon.md) — the recommended API in an Owl app; the classic script above is for pages using the static `b-ui` API.
25
+ `https://unpkg.com/@thebase/ui@latest/dist/...` mirrors the same files as an alternative CDN if jsDelivr is unreachable. Pin an exact version (e.g. `@1.1.5`, or `@1` to take only non-breaking updates) instead of `@latest` for production. `b-icon` also works with the [pure Base `Icon` component](components/icon.md) — the recommended API in an application; the classic script above is for pages using the static `b-ui` API.
26
26
 
27
27
  The build publishes every Lucide SVG to `dist/icons/lucide/` and writes the generated icon manifest to `dist/icons/lucide.json`.
28
28
 
29
29
  ## Markup
30
30
 
31
- Use the Lucide icon name in kebab-case, camelCase, snake_case, or space-separated form. BaseUI normalizes the name to the matching Lucide SVG file.
31
+ Use the Lucide icon name in kebab-case, camelCase, snake_case, or space-separated form. The Base UI normalizes the name to the matching Lucide SVG file.
32
32
 
33
33
  ```html
34
34
  <span b-icon="check"></span>
@@ -46,7 +46,7 @@ Use `b-icon-size` when the surrounding component should not control the icon siz
46
46
 
47
47
  ## Color
48
48
 
49
- Icons inherit `currentColor`, so set color on the parent element or let BaseUI component variants and themes do it.
49
+ Icons inherit `currentColor`, so set color on the parent element or let the Base UI component variants and themes do it.
50
50
 
51
51
  ```html
52
52
  <button b-ui="button" b-att-variant="destructive" type="button">
@@ -62,7 +62,7 @@ Icons inherit `currentColor`, so set color on the parent element or let BaseUI c
62
62
 
63
63
  ## Accessibility
64
64
 
65
- Decorative icons should not have a label. BaseUI marks them with `aria-hidden="true"`.
65
+ Decorative icons should not have a label. The Base UI marks them with `aria-hidden="true"`.
66
66
 
67
67
  ```html
68
68
  <span b-icon="mail"></span>
@@ -84,7 +84,7 @@ Standalone meaningful icons can use `aria-label`.
84
84
 
85
85
  ## Self-hosting
86
86
 
87
- By default, icon URLs point to the pinned Lucide CDN configured in the registry. To serve icons from your own BaseUI build, point `b-icon-base-url` at the published icon folder.
87
+ By default, icon URLs point to the pinned Lucide CDN configured in the registry. To serve icons from your own the Base UI build, point `b-icon-base-url` at the published icon folder.
88
88
 
89
89
  ```html
90
90
  <span b-icon="search" b-icon-base-url="/dist/icons/lucide"></span>
@@ -2,13 +2,13 @@
2
2
 
3
3
  See the [Usage Guide](usage-guide.md) for the end-to-end integration path (choosing an API, install, theming, verification). This page covers install mechanics only.
4
4
 
5
- BaseUI is distributed as one CSS file and one JavaScript file for browser use. `dist/baseui.min.js` is fully self-contained: Bootstrap's JS bundle (Popper.js included) and the Owl runtime are embedded ahead of BaseUI's own code, in load order (Bootstrap, then Owl, then BaseUI) — nothing else needs to load first. Both install paths below load this same file; the pure Owl component API is the recommended way to consume BaseUI in an Owl app, with the static `b-ui` markup API available as a lighter-weight alternative for non-Owl pages.
5
+ The Base UI is distributed as one CSS file and one JavaScript file for browser use. `dist/baseui.min.js` is fully self-contained: Bootstrap's JS bundle (Popper.js included) and the Owl runtime are embedded ahead of the Base UI's own code, in load order (Bootstrap, then Owl, then the Base UI) — nothing else needs to load first. Both install paths below load this same file; the Base component API is the recommended way to consume the Base UI in an application, with the base static markup (`b-ui`) API available as a lighter-weight alternative for non-Owl pages.
6
6
 
7
- The snippets below use the `@latest` tag for readability. Pin an exact version instead (e.g. `@1.1.3`, or `@1` to take only non-breaking updates) for any production page — `@latest` can silently change what your page loads the moment a new version is published.
7
+ The snippets below use the `@latest` tag for readability. Pin an exact version instead (e.g. `@1.1.5`, or `@1` to take only non-breaking updates) for any production page — `@latest` can silently change what your page loads the moment a new version is published.
8
8
 
9
- ## Pure Owl component install (recommended)
9
+ ## Base component install (recommended)
10
10
 
11
- If you're building your own Owl app and want to import BaseUI components as real Owl component classes (`<Button/>`, `<Card/>`, `<Tabs/>`, ...) instead of `b-ui` markup, it's the same one file as the static install, just accessed through an import map:
11
+ If you're building your own application and want to import the Base UI components as real Owl component classes (`<Button/>`, `<Card/>`, `<Tabs/>`, ...) instead of `b-ui` markup, it's the same one file as the static install, just accessed through an import map:
12
12
 
13
13
  ```html
14
14
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@thebase/ui@latest/dist/baseui.min.css">
@@ -26,11 +26,11 @@ If you're building your own Owl app and want to import BaseUI components as real
26
26
 
27
27
  `https://unpkg.com/@thebase/ui@latest/dist/...` mirrors the same files if jsDelivr is unreachable — swap the host in each URL above.
28
28
 
29
- `@base/owl`, `@base/component`, and `@base/theme` all resolve to the exact same `dist/baseui.esm.js` module — the browser fetches and evaluates it once, so `Component`/`mount`/`xml` from `@base/owl` and `Button`/`Card`/... from `@base/component` are guaranteed to be the same runtime identity (no separate script needs to load first to set up a shared global). Your own app code should still import Owl from `@base/owl`, never install or import `@odoo/owl` directly — that's what keeps a `class Root extends Component` you write instanceof-compatible with BaseUI's own components. `@base/templates` maps to the templates XML — not a JS module, so resolve it with `import.meta.resolve("@base/templates")` and `fetch()` the result rather than `import`ing it.
29
+ `@base/owl`, `@base/component`, and `@base/theme` all resolve to the exact same `dist/baseui.esm.js` module — the browser fetches and evaluates it once, so `Component`/`mount`/`xml` from `@base/owl` and `Button`/`Card`/... from `@base/component` are guaranteed to be the same runtime identity (no separate script needs to load first to set up a shared global). Your own app code should still import Owl from `@base/owl`, never install or import `@odoo/owl` directly — that's what keeps a `class Root extends Component` you write instanceof-compatible with Base UI's own components. `@base/templates` maps to the templates XML — not a JS module, so resolve it with `import.meta.resolve("@base/templates")` and `fetch()` the result rather than `import`ing it.
30
30
 
31
31
  For npm/bundler usage, everything (Owl framework, component classes, theme helper) is exported from the one `@thebase/ui` package entry: `import { Component, mount, xml, Button, Card, createThemeController } from "@thebase/ui";` — plus `@thebase/ui/dist/baseui.templates.xml` (component templates — fetch or load them before mounting). Note that importing the main entry always runs its `autoMount()` side effect (it scans the DOM for `[b-ui]`/`[b-icon]` markers on `DOMContentLoaded`) — harmless if your page has none, but worth knowing if you specifically wanted a side-effect-free import.
32
32
 
33
- See [Pure Owl Components](owl-components.md) for the full loading contract, a worked example, and common mistakes.
33
+ See [Base Components](owl-components.md) for the full loading contract, a worked example, and common mistakes.
34
34
 
35
35
  ## Static `b-ui` install (alternative)
36
36
 
@@ -41,9 +41,9 @@ For static HTML, a server-rendered page, or a Base HUB website page that has no
41
41
  <script src="https://cdn.jsdelivr.net/npm/@thebase/ui@latest/dist/baseui.min.js" defer></script>
42
42
  ```
43
43
 
44
- Bootstrap 5 is the bundled baseline CSS framework, and its JS bundle now drives BaseUI's interactive components directly.
44
+ Bootstrap 5 is the bundled baseline CSS framework, and its JS bundle now drives the Base UI's interactive components directly.
45
45
 
46
- `@thebase/ui` is published on npm, so [unpkg](https://unpkg.com/@thebase/ui@latest/) mirrors the same files as an alternative CDN (`https://unpkg.com/@thebase/ui@latest/dist/baseui.min.css` / `baseui.min.js`) if jsDelivr is unreachable in your environment. Pin an exact version (e.g. `@1.1.3`, or `@1` to take only non-breaking updates) instead of `@latest` for production.
46
+ `@thebase/ui` is published on npm, so [unpkg](https://unpkg.com/@thebase/ui@latest/) mirrors the same files as an alternative CDN (`https://unpkg.com/@thebase/ui@latest/dist/baseui.min.css` / `baseui.min.js`) if jsDelivr is unreachable in your environment. Pin an exact version (e.g. `@1.1.5`, or `@1` to take only non-breaking updates) instead of `@latest` for production.
47
47
 
48
48
  For npm/self-hosted usage:
49
49
 
@@ -53,7 +53,7 @@ npm install @thebase/ui
53
53
 
54
54
  Then copy or serve `node_modules/@thebase/ui/dist/baseui.min.css` and `node_modules/@thebase/ui/dist/baseui.min.js`.
55
55
 
56
- `dist/bootstrap.bundle.min.js` also ships standalone, unmodified, with its own integrity hash in `dist/baseui.registry.json`, in case a project wants vendored Bootstrap JS on its own — BaseUI itself never needs it loaded separately.
56
+ `dist/bootstrap.bundle.min.js` also ships standalone, unmodified, with its own integrity hash in `dist/baseui.registry.json`, in case a project wants vendored Bootstrap JS on its own — the Base UI itself never needs it loaded separately.
57
57
 
58
58
  The static bundle auto-mounts existing `[b-ui]` and `[b-icon]` markers on `DOMContentLoaded`. Use `thebase.mountAll(root)` after later DOM injection, and `thebase.destroy(root)` before removing a mounted subtree that owns listeners or an Owl-backed controller.
59
59
 
@@ -70,18 +70,19 @@ Production pages should use pinned version URLs. `latest` is for demos and exper
70
70
 
71
71
  | Need | npm/bundler export | Browser import-map key | Dist file |
72
72
  | --- | --- | --- | --- |
73
- | Static `b-ui` runtime, Owl framework, every pure Owl component class, theme helper | `@thebase/ui` | `@base/owl`, `@base/component`, `@base/theme` (all three point at the same file) | `dist/baseui.esm.js`, `dist/baseui.min.js` |
73
+ | Static `b-ui` runtime, Owl framework, every Base component class, theme helper | `@thebase/ui` | `@base/owl`, `@base/component`, `@base/theme` (all three point at the same file) | `dist/baseui.esm.js`, `dist/baseui.min.js` |
74
74
  | Styles | `@thebase/ui/baseui.css` | none; load with `<link>` | `dist/baseui.min.css` |
75
- | Bootstrap JS | embedded; standalone file is a vendoring convenience only, not part of BaseUI's own load path | none | `dist/bootstrap.bundle.min.js` |
75
+ | Bootstrap JS | embedded; standalone file is a vendoring convenience only, not part of the Base UI's own load path | none | `dist/bootstrap.bundle.min.js` |
76
76
  | Named-icon components (`IconEye`, ...) | `@thebase/ui/icons` | `@base/icons` | `dist/baseui.icons.esm.js` |
77
77
  | Owl templates XML | `@thebase/ui/dist/baseui.templates.xml` | `@base/templates` | `dist/baseui.templates.xml` |
78
78
  | Registry metadata | `@thebase/ui/registry` | none; fetch the JSON file | `dist/baseui.registry.json` |
79
79
  | Optional analytics service (`init`, `track`) | `@thebase/ui/analytics` | none; import the file URL or load the `<script>` build (sets `window.thebase.analytics`) | `dist/baseui.analytics.esm.js`, `dist/baseui.analytics.min.js` |
80
+ | Standalone ApiDoc (`mountApiDoc`) | `@thebase/ui/apidoc` | none; embeds Owl + its templates, still needs `baseui.min.css`; set `assetBase` for the language logos | `dist/baseui.apidoc.esm.js`, `dist/baseui.apidoc.min.js` |
80
81
 
81
- `@base/templates` points to XML, not JavaScript. Resolve and fetch it (`fetch(import.meta.resolve("@base/templates"))`) before mounting an Owl app that uses BaseUI component classes.
82
+ `@base/templates` points to XML, not JavaScript. Resolve and fetch it (`fetch(import.meta.resolve("@base/templates"))`) before mounting an application that uses the Base UI component classes.
82
83
 
83
84
  ## Release Guardrails
84
85
 
85
- BaseUI intentionally keeps Bootstrap bundled for the browser build, both CSS and JS. Bootstrap's JS bundle and the Owl runtime are embedded directly into `dist/baseui.min.js`/`baseui.esm.js` — in that load order — along with every pure Owl component class and the theme helper, so both the static API and the pure Owl API install with one stylesheet and one script/import: there is no more separate `baseui.owl.*`/`baseui.components.esm.js`/`baseui.theme.esm.js` file to keep in load order. Bootstrap's JS instances (`bootstrap.Modal`, `Dropdown`, `Collapse`, `Tab`, `Toast`, `Carousel`, `Tooltip`, `Popover`, `Alert`) drive the components that map to them, wrapped by BaseUI's own `.behavior.js`/`runtime/*.js` helpers so both the static and pure-Owl APIs share identical ARIA/keyboard/event behavior.
86
+ The Base UI intentionally keeps Bootstrap bundled for the browser build, both CSS and JS. Bootstrap's JS bundle and the Owl runtime are embedded directly into `dist/baseui.min.js`/`baseui.esm.js` — in that load order — along with every Base component class and the theme helper, so both the static API and the pure Base API install with one stylesheet and one script/import: there is no more separate `baseui.owl.*`/`baseui.components.esm.js`/`baseui.theme.esm.js` file to keep in load order. Bootstrap's JS instances (`bootstrap.Modal`, `Dropdown`, `Collapse`, `Tab`, `Toast`, `Carousel`, `Tooltip`, `Popover`, `Alert`) drive the components that map to them, wrapped by the Base UI's own `.behavior.js`/`runtime/*.js` helpers so both the static and pure Base APIs share identical ARIA/keyboard/event behavior.
86
87
 
87
88
  Release checks enforce runtime dependency, peer dependency, scoped CSS selector, and CDN file-size budgets through `npm run lint` and `npm run build`.
@@ -1,22 +1,22 @@
1
- # Pure Owl Components
1
+ # Base Components
2
2
 
3
- See the [Usage Guide](usage-guide.md) for when to reach for this API versus the static `b-ui` one. This page covers the pure Owl API only.
3
+ See the [Usage Guide](usage-guide.md) for when to reach for this API versus the static `b-ui` one. This page covers the pure Base API only.
4
4
 
5
- BaseUI ships a second, additive public API alongside the static `b-ui` markers: real Owl component classes you import, compose with `static components`, and mount as part of your own Owl app. This page covers how to load and use it; see [Component Authoring](component-authoring.md) for how components implement both APIs from one source folder.
5
+ The Base UI ships a second, additive public API alongside the static `b-ui` markers: real Owl component classes you import, compose with `static components`, and mount as part of your own application. This page covers how to load and use it; see [Component Authoring](component-authoring.md) for how components implement both APIs from one source folder.
6
6
 
7
- As of 1.1.0, every component in the registry (all 74) has a pure Owl export — there are no static-only components left. Compound components export a root class plus sub-components (e.g. `Dialog`/`DialogTrigger`/`DialogContent`/...); check a component's `owlComponents` entry in `dist/baseui.registry.json`, or its doc page under [`docs/components/`](components/), for the exact export list. A few components have a deliberately reshaped pure Owl API versus their static markup-scanning adapter — see [Registry](registry.md#component-export-policy) for which ones and why.
7
+ As of 1.1.0, every component in the registry (all 74) has a pure Base export — there are no static-only components left. Compound components export a root class plus sub-components (e.g. `Dialog`/`DialogTrigger`/`DialogContent`/...); check a component's `owlComponents` entry in `dist/baseui.registry.json`, or its doc page under [`docs/components/`](components/), for the exact export list. A few components have a deliberately reshaped pure Base API versus their static markup-scanning adapter — see [Registry](registry.md#component-export-policy) for which ones and why.
8
8
 
9
9
  ## What you need to load
10
10
 
11
- Everything — the static `b-ui` runtime, the Owl framework, every pure Owl component class, and the theme helper — is one file: `dist/baseui.esm.js` (or `dist/baseui.min.js` as a classic script). There is no separate `baseui.owl.*`/`baseui.components.esm.js`/`baseui.theme.esm.js` to load.
11
+ Everything — the static `b-ui` runtime, the Owl framework, every Base component class, and the theme helper — is one file: `dist/baseui.esm.js` (or `dist/baseui.min.js` as a classic script). There is no separate `baseui.owl.*`/`baseui.components.esm.js`/`baseui.theme.esm.js` to load.
12
12
 
13
13
  | File | Purpose |
14
14
  | --- | --- |
15
- | `dist/baseui.min.css` | Bootstrap + BaseUI styling, shared by both APIs. |
15
+ | `dist/baseui.min.css` | Bootstrap + the Base UI styling, shared by both APIs. |
16
16
  | `@base/owl` (`dist/baseui.esm.js`) | The Owl framework — `Component`, `mount`, `xml`, `useState`, etc. Pinned to Owl `2.8.3`, embedded directly in this file. Import your app's own Owl usage from here too, not `@odoo/owl`. |
17
- | `@base/component` (`dist/baseui.esm.js`) | The pure Owl component classes — same file as `@base/owl` above, just a different import-map key for readability. |
17
+ | `@base/component` (`dist/baseui.esm.js`) | The Base component classes — same file as `@base/owl` above, just a different import-map key for readability. |
18
18
  | `@base/theme` (`dist/baseui.esm.js`) | Same file again — the theme helper for persisted light/dark toggles, URL overrides, button-label sync, and iframe preview sync. |
19
- | `@base/templates` (`dist/baseui.templates.xml`) | The Owl templates the component classes reference (`static template = "baseui.Button"`, etc). Must be loaded and passed to `mount()` before any BaseUI component tag renders — a component class alone does not carry its template. |
19
+ | `@base/templates` (`dist/baseui.templates.xml`) | The Owl templates the component classes reference (`static template = "baseui.Button"`, etc). Must be loaded and passed to `mount()` before any Base UI component tag renders — a component class alone does not carry its template. |
20
20
 
21
21
  ## Browser (import map) usage
22
22
 
@@ -55,9 +55,9 @@ Everything — the static `b-ui` runtime, the Owl framework, every pure Owl comp
55
55
  </script>
56
56
  ```
57
57
 
58
- `https://unpkg.com/@thebase/ui@latest/dist/...` mirrors the same files as an alternative CDN if jsDelivr is unreachable — swap the host in each URL above. For a self-hosted build, replace the CDN host with your own served path (e.g. `/dist/baseui.esm.js`). These snippets use `@latest` for readability; pin an exact version (e.g. `@1.1.0`, or `@1` to take only non-breaking updates) in production so a new release can't change what your page loads.
58
+ `https://unpkg.com/@thebase/ui@latest/dist/...` mirrors the same files as an alternative CDN if jsDelivr is unreachable — swap the host in each URL above. For a self-hosted build, replace the CDN host with your own served path (e.g. `/dist/baseui.esm.js`). These snippets use `@latest` for readability; pin an exact version (e.g. `@1.1.5`, or `@1` to take only non-breaking updates) in production so a new release can't change what your page loads.
59
59
 
60
- No `@odoo/owl` import appears anywhere in that snippet — `@base/owl` is the only Owl entry point BaseUI components and consumer apps need. Because `@base/owl`, `@base/component`, and `@base/theme` all point at the exact same `dist/baseui.esm.js` URL, the browser fetches and evaluates it once and every key shares the same module instance — no separate classic `<script>` needs to load first to set up a shared global.
60
+ No `@odoo/owl` import appears anywhere in that snippet — `@base/owl` is the only Owl entry point the Base UI components and consumer apps need. Because `@base/owl`, `@base/component`, and `@base/theme` all point at the exact same `dist/baseui.esm.js` URL, the browser fetches and evaluates it once and every key shares the same module instance — no separate classic `<script>` needs to load first to set up a shared global.
61
61
 
62
62
  ## npm / bundler usage
63
63
 
@@ -75,7 +75,7 @@ class Root extends Component {
75
75
  }
76
76
  ```
77
77
 
78
- There's only one package entry now — `@thebase/ui` exports the Owl framework (built from the exact `@odoo/owl@2.8.3` this BaseUI release vendors; you do not need to install `@odoo/owl` yourself), every pure Owl component class, and the theme helper together. Browser import-map examples above still use the `@base/owl`/`@base/component`/`@base/theme` keys for readability, but they're just local aliases to the same file.
78
+ There's only one package entry now — `@thebase/ui` exports the Owl framework (built from the exact `@odoo/owl@2.8.3` this Base UI release vendors; you do not need to install `@odoo/owl` yourself), every Base component class, and the theme helper together. Browser import-map examples above still use the `@base/owl`/`@base/component`/`@base/theme` keys for readability, but they're just local aliases to the same file.
79
79
 
80
80
  When a bundler cannot import XML with `?raw`, load `dist/baseui.templates.xml` as a served asset and pass the fetched string to `mount(Root, target, { templates })`. The template file is part of the runtime contract, not optional documentation.
81
81
 
@@ -97,12 +97,12 @@ Both APIs come from the exact same bundle now, so there's nothing extra to load
97
97
 
98
98
  ## Global component fallback
99
99
 
100
- `Component` exported from `@base/owl` / `@thebase/ui` is Owl's `Component` with one addition: any component that extends it can use every registered BaseUI component (`<Icon/>`, `<Button/>`, `<Card/>`, ...) in its template, even if its own `static components` doesn't list it. Without this, Owl only checks a component's own `static components` map, so a nested child that used `<Icon/>` without declaring it crashed with `Cannot find the definition of component "Icon"`.
100
+ `Component` exported from `@base/owl` / `@thebase/ui` is Owl's `Component` with one addition: any component that extends it can use every registered the Base UI component (`<Icon/>`, `<Button/>`, `<Card/>`, ...) in its template, even if its own `static components` doesn't list it. Without this, Owl only checks a component's own `static components` map, so a nested child that used `<Icon/>` without declaring it crashed with `Cannot find the definition of component "Icon"`.
101
101
 
102
102
  - The fallback applies to every component in the tree, not only the root passed to `mount()`.
103
- - Entries in your own `static components` still take precedence over a BaseUI component with the same name.
104
- - Listing BaseUI classes in `static components` is still allowed and is the clearest choice for shared or library code. The fallback mainly protects deeply nested app components.
105
- - The fallback only works for classes that extend BaseUI's `Component`. A class built on `Component` from `@odoo/owl` directly does not get it.
103
+ - Entries in your own `static components` still take precedence over a Base UI component with the same name.
104
+ - Listing the Base UI classes in `static components` is still allowed and is the clearest choice for shared or library code. The fallback mainly protects deeply nested app components.
105
+ - The fallback only works for classes that extend the Base UI's `Component`. A class built on `Component` from `@odoo/owl` directly does not get it.
106
106
 
107
107
  ```js
108
108
  import { Component, mount, xml } from "@base/owl";
@@ -123,6 +123,6 @@ See each component's page under [`docs/components/`](components/) for its specif
123
123
  ## Common mistakes
124
124
 
125
125
  - **Rendering a bare `<Button/>` with no template loaded.** `mount(Root, target)` without `{ templates }` (or `app.addTemplates(...)`) throws — the `.xml` file is a real build/runtime input, not documentation.
126
- - **Registering `Button` under the wrong tag name.** `static components = { Button }` must match the tag used in the template (`<Button/>`), same as any other Owl component. If you alias a BaseUI class under a different tag (`{ PrimaryButton: Button }`), the alias exists only in that component's map.
127
- - **Importing from `@odoo/owl`.** Always import from `@base/owl` instead, even in your own app code — it keeps your app on the exact Owl version this BaseUI release was tested against, and only `@base/owl`'s `Component` provides the [global component fallback](#global-component-fallback).
126
+ - **Registering `Button` under the wrong tag name.** `static components = { Button }` must match the tag used in the template (`<Button/>`), same as any other Owl component. If you alias a Base UI class under a different tag (`{ PrimaryButton: Button }`), the alias exists only in that component's map.
127
+ - **Importing from `@odoo/owl`.** Always import from `@base/owl` instead, even in your own app code — it keeps your app on the exact Owl version this Base UI release was tested against, and only `@base/owl`'s `Component` provides the [global component fallback](#global-component-fallback).
128
128
  - **Adding a `baseui.owl.min.js`/`baseui.owl.esm.js`/`baseui.components.esm.js` script or import-map entry.** None of those files are published anymore — point `@base/owl`/`@base/component`/`@base/theme` all at `dist/baseui.esm.js` instead.
package/docs/registry.md CHANGED
@@ -1,26 +1,26 @@
1
1
  # Registry
2
2
 
3
- Every release publishes `dist/baseui.registry.json`. The registry lists package metadata, CDN paths, build files, themes, and per-component metadata (type, dependencies, `b-*` attributes, events, and — since the Phase 8 pure-Owl rollout — Owl component/template metadata). It only registers components under `src/components/`; example blocks under `examples/blocks/` are not part of the registry.
3
+ Every release publishes `dist/baseui.registry.json`. The registry lists package metadata, CDN paths, build files, themes, and per-component metadata (type, dependencies, `b-*` attributes, events, and — since the Phase 8 pure Base rollout — Owl component/template metadata). It only registers components under `src/components/`; example blocks under `examples/blocks/` are not part of the registry.
4
4
 
5
- BaseUI ships as bundled files only — there is no per-component source distribution. Use the registry's `components` entries to look up a component's contract, not to locate individual source files.
5
+ The Base UI ships as bundled files only — there is no per-component source distribution. Use the registry's `components` entries to look up a component's contract, not to locate individual source files.
6
6
 
7
7
  ## Build files
8
8
 
9
9
  `buildFiles` lists every top-level `dist/` artifact the release validates and hashes:
10
10
 
11
- - `baseui.min.css` — Bootstrap 5 + BaseUI styles (static and pure Owl APIs share the same stylesheet).
12
- - `baseui.min.js` / `baseui.esm.js` — the one bundle for both APIs: the static `b-ui` runtime (`BaseUI.register(...)`, `thebase.mountAll()`), the Owl framework (`Component`, `mount`, `xml`, ...), every pure Owl component class (`Button`, `Card`, `Tabs`, ...), and the theme helper (`createThemeController`, `BaseUITheme`). Bootstrap's JS bundle and Owl's global build are embedded ahead of BaseUI's own code, in that load order — no separate `baseui.owl.*`/`baseui.components.esm.js`/`baseui.theme.esm.js`/`bootstrap.bundle.min.js` script is needed.
13
- - `bootstrap.bundle.min.js` — vendored Bootstrap JS, standalone, unmodified. Ships in case a project wants it on its own; BaseUI's own bundle never needs it loaded separately (it's embedded in `baseui.min.js`/`baseui.esm.js` too).
11
+ - `baseui.min.css` — Bootstrap 5 + the Base UI styles (static and pure Base APIs share the same stylesheet).
12
+ - `baseui.min.js` / `baseui.esm.js` — the one bundle for both APIs: the static `b-ui` runtime (`BaseUI.register(...)`, `thebase.mountAll()`), the Owl framework (`Component`, `mount`, `xml`, ...), every Base component class (`Button`, `Card`, `Tabs`, ...), and the theme helper (`createThemeController`, `BaseUITheme`). Bootstrap's JS bundle and Owl's global build are embedded ahead of the Base UI's own code, in that load order — no separate `baseui.owl.*`/`baseui.components.esm.js`/`baseui.theme.esm.js`/`bootstrap.bundle.min.js` script is needed.
13
+ - `bootstrap.bundle.min.js` — vendored Bootstrap JS, standalone, unmodified. Ships in case a project wants it on its own; the Base UI's own bundle never needs it loaded separately (it's embedded in `baseui.min.js`/`baseui.esm.js` too).
14
14
  - `baseui.icons.esm.js` — the 2000+ generated `Icon<Name>` components (`IconEye`, `IconSearch`, ...), split out because they'd blow the main bundle's size budget. The one deliberate exception to "everything is one bundle".
15
- - `baseui.templates.xml` — every pure Owl component's compiled `<templates>` body, concatenated into one file. Load this into the Owl `App`'s `templates` config before mounting; `.xml` files under `src/components/` are authoring sources, not something a consumer app loads directly.
16
- - `baseui.analytics.esm.js` / `baseui.analytics.min.js` — the optional, standalone cookieless analytics service (`@thebase/ui/analytics`). Not part of the main bundles and needs no other BaseUI file; see [Analytics](analytics.md).
15
+ - `baseui.templates.xml` — every Base component's compiled `<templates>` body, concatenated into one file. Load this into the Owl `App`'s `templates` config before mounting; `.xml` files under `src/components/` are authoring sources, not something a consumer app loads directly.
16
+ - `baseui.analytics.esm.js` / `baseui.analytics.min.js` — the optional, standalone cookieless analytics service (`@thebase/ui/analytics`). Not part of the main bundles and needs no other Base UI file; see [Analytics](analytics.md).
17
17
  - `icons/lucide.json` — the built-in icon manifest.
18
18
 
19
19
  ## Component export policy
20
20
 
21
21
  Every component folder under `src/components/<name>/` is one of:
22
22
 
23
- 1. **Both APIs** — has `<name>.js` (static `BaseUI.register(...)` adapter) *and* `<name>.component.js` (pure Owl `Component` class(es)). As of the Phase 8 rollout this is **all 74** registry components; there are no static-only exceptions left. A handful of components (`chart`, most notably) have lighter-fidelity pure Owl treatments than their static adapter — see their component doc page for the documented gap — but every registry component has a real Owl export.
23
+ 1. **Both APIs** — has `<name>.js` (static `BaseUI.register(...)` adapter) *and* `<name>.component.js` (pure Base `Component` class(es)). As of the Phase 8 rollout this is **all 74** registry components; there are no static-only exceptions left. A handful of components (`chart`, most notably) have lighter-fidelity pure Base treatments than their static adapter — see their component doc page for the documented gap — but every registry component has a real Owl export.
24
24
  2. Static-only components would report `"type": "static"` with no `owlComponents` field, but none currently exist in this registry.
25
25
 
26
26
  Per-component registry entries now include:
@@ -1,6 +1,6 @@
1
1
  # Runtime API
2
2
 
3
- BaseUI exposes one browser global: `window.thebase`. `window.BaseUI` still points to the same object as a deprecated alias for 1.x pages; it will be removed in 2.0.0.
3
+ The Base UI exposes one browser global: `window.thebase`. `window.BaseUI` still points to the same object as a deprecated alias for 1.x pages; it will be removed in 2.0.0.
4
4
 
5
5
  ```js
6
6
  thebase.version
@@ -29,7 +29,7 @@ Mounted components dispatch lifecycle events on their root element:
29
29
 
30
30
  `thebase.theme.set(...)` is the low-level setter. For persisted light/dark toggles, button-label synchronization, URL `?theme=` overrides, and iframe preview sync, import `createThemeController` from `@base/theme` in browser import maps or `@thebase/ui` in npm/bundler apps.
31
31
 
32
- `thebase.mountAll()` is for static `b-ui`/`b-att-*` markers and `b-icon` markers only. It does not register Owl component tags (`<Button/>`, `<Card/>`, ...) and does not know about `@thebase/ui` or `dist/baseui.templates.xml`. To use pure Owl components, extend `Component` from `@base/owl`, fetch the templates XML, and pass it to `mount()`. Registered BaseUI components then resolve in every template, whether or not they are listed in `static components`; see [Pure Owl Components](owl-components.md#global-component-fallback).
32
+ `thebase.mountAll()` is for static `b-ui`/`b-att-*` markers and `b-icon` markers only. It does not register Owl component tags (`<Button/>`, `<Card/>`, ...) and does not know about `@thebase/ui` or `dist/baseui.templates.xml`. To use Base components, extend `Component` from `@base/owl`, fetch the templates XML, and pass it to `mount()`. Registered the Base UI components then resolve in every template, whether or not they are listed in `static components`; see [Base Components](owl-components.md#global-component-fallback).
33
33
 
34
34
  ## `cn()` class-name helper
35
35
 
@@ -42,7 +42,7 @@ cn("btn", isActive && "active", ["bu-button", className]);
42
42
  // "btn active bu-button my-class" (when isActive is truthy and className is "my-class")
43
43
  ```
44
44
 
45
- It's a standalone named export — `import { cn } from "@thebase/ui"` in npm/bundler apps, or `BaseUIBundle.cn` in the browser IIFE global — not a method on `BaseUI` itself. Use it to build your own components' class lists on top of BaseUI's conventions.
45
+ It's a standalone named export — `import { cn } from "@thebase/ui"` in npm/bundler apps, or `BaseUIBundle.cn` in the browser IIFE global — not a method on `BaseUI` itself. Use it to build your own components' class lists on top of the Base UI's conventions.
46
46
 
47
47
  ## `mergeStyle()` inline-style helper
48
48
 
package/docs/theming.md CHANGED
@@ -13,7 +13,7 @@ thebase.theme.set("dark");
13
13
  thebase.theme.set({ primary: "#0057d8", radius: "0.5rem" });
14
14
  ```
15
15
 
16
- BaseUI maps semantic tokens such as `--b-background`, `--b-primary`, `--b-border`, and `--b-radius` into Bootstrap 5 variables. Radius tokens are sourced from the shorter public alias family `--base-radius`, `--base-radius-sm`, `--base-radius-md`, `--base-radius-lg`, `--base-radius-xl`, `--base-radius-2xl`, `--base-radius-3xl`, `--base-radius-4xl`, and `--base-radius-full`, then mirrored to `--b-radius*` for component CSS.
16
+ The Base UI maps semantic tokens such as `--b-background`, `--b-primary`, `--b-border`, and `--b-radius` into Bootstrap 5 variables. Radius tokens are sourced from the shorter public alias family `--base-radius`, `--base-radius-sm`, `--base-radius-md`, `--base-radius-lg`, `--base-radius-xl`, `--base-radius-2xl`, `--base-radius-3xl`, `--base-radius-4xl`, and `--base-radius-full`, then mirrored to `--b-radius*` for component CSS.
17
17
 
18
18
  For a reusable theme toggle with persistence, URL override, button-label sync, and iframe preview sync, import the theme helper:
19
19
 
@@ -38,9 +38,9 @@ For a reusable theme toggle with persistence, URL override, button-label sync, a
38
38
  </script>
39
39
  ```
40
40
 
41
- `https://unpkg.com/@thebase/ui@latest/dist/baseui.esm.js` mirrors the same file as an alternative CDN if jsDelivr is unreachable. Pin an exact version (e.g. `@1.1.3`, or `@1` to take only non-breaking updates) instead of `@latest` for production. Npm/bundler consumers can import the same API from `@thebase/ui`.
41
+ `https://unpkg.com/@thebase/ui@latest/dist/baseui.esm.js` mirrors the same file as an alternative CDN if jsDelivr is unreachable. Pin an exact version (e.g. `@1.1.5`, or `@1` to take only non-breaking updates) instead of `@latest` for production. Npm/bundler consumers can import the same API from `@thebase/ui`.
42
42
 
43
- For a ready-made icon button, use the BaseUI component instead of wiring your own click handler:
43
+ For a ready-made icon button, use the Base UI component instead of wiring your own click handler:
44
44
 
45
45
  ```html
46
46
  <button b-ui="theme-button" b-att-variant="outline" b-att-storage-key="my-app-theme" type="button"></button>
@@ -50,6 +50,6 @@ The documentation and example pages use the same theme infrastructure. Owl examp
50
50
 
51
51
  ## Design tokens
52
52
 
53
- The default light/dark palettes and radius follow the current [shadcn/ui](https://ui.shadcn.com) Base UI neutral theme: black/neutral primary on white in light mode, neutral-900/50 foreground-background inversion in dark mode, neutral `--b-secondary`/`--b-muted`/`--b-accent` surfaces, `--base-radius: var(--radius, 0.625rem)`, and a derived radius scale (`--base-radius-sm|md|lg|xl`, mirrored as `--b-radius-sm|md|lg|xl`) and shadow scale (`--b-shadow-sm|md|lg`) for consistent elevation across popovers, menus, dialogs, and toasts. BaseUI reads an existing upstream `--radius` value when present, but it does not redefine `--radius` back to `--b-radius`; that one-way bridge avoids CSS custom-property cycles. `--b-card`/`--b-popover` alias `--b-surface` for shadcn-token-name parity.
53
+ The default light/dark palettes and radius follow the current [shadcn/ui](https://ui.shadcn.com) Base UI neutral theme: black/neutral primary on white in light mode, neutral-900/50 foreground-background inversion in dark mode, neutral `--b-secondary`/`--b-muted`/`--b-accent` surfaces, `--base-radius: var(--radius, 0.625rem)`, and a derived radius scale (`--base-radius-sm|md|lg|xl`, mirrored as `--b-radius-sm|md|lg|xl`) and shadow scale (`--b-shadow-sm|md|lg`) for consistent elevation across popovers, menus, dialogs, and toasts. The Base UI reads an existing upstream `--radius` value when present, but it does not redefine `--radius` back to `--b-radius`; that one-way bridge avoids CSS custom-property cycles. `--b-card`/`--b-popover` alias `--b-surface` for shadcn-token-name parity.
54
54
 
55
- Because BaseUI ships Bootstrap's stock precompiled CSS, most `.btn-*`/badge colors are not driven by `--bs-*` variables directly — `src/styles/baseui.css` re-points the `.btn-primary`/`.btn-secondary`/`.btn-danger`/`.btn-outline-secondary`/`.btn-light` variants at BaseUI tokens so `thebase.theme.set(...)` overrides actually render. Badges use their own `bu-badge-*` classes (`src/components/badge/badge.css`) instead of Bootstrap's `text-bg-*`, which hardcode non-overridable colors.
55
+ Because the Base UI ships Bootstrap's stock precompiled CSS, most `.btn-*`/badge colors are not driven by `--bs-*` variables directly — `src/styles/baseui.css` re-points the `.btn-primary`/`.btn-secondary`/`.btn-danger`/`.btn-outline-secondary`/`.btn-light` variants at the Base UI tokens so `thebase.theme.set(...)` overrides actually render. Badges use their own `bu-badge-*` classes (`src/components/badge/badge.css`) instead of Bootstrap's `text-bg-*`, which hardcode non-overridable colors.
@@ -1,12 +1,12 @@
1
- # Usage Guide — Integrating BaseUI Into a Project
1
+ # Usage Guide — Integrating the Base UI Into a Project
2
2
 
3
- This is the single entry point for adding BaseUI to a consumer project (a static page, a Base HUB website page, a server-rendered app, or your own Owl app). It sequences the existing reference docs into one path and gives copy-paste-ready examples — read the linked page for exhaustive detail on any step.
3
+ This is the single entry point for adding the Base UI to a consumer project (a static page, a Base HUB website page, a server-rendered app, or your own application). It sequences the existing reference docs into one path and gives copy-paste-ready examples — read the linked page for exhaustive detail on any step.
4
4
 
5
5
  Audience: engineers and AI coding agents integrating `@thebase/ui` into a project that is **not** this repository.
6
6
 
7
7
  ## Quick start (copy-paste, works as-is)
8
8
 
9
- Save this as an `.html` file and open it — no build step, no server required. It installs BaseUI from the pinned CDN and renders a button, an input, and a card using the static `b-ui` markup API (the zero-build alternative). If you're building an Owl app, skip straight to the [pure Owl install](#2-install-pure-owl-api--recommended) below — it's the recommended way to consume BaseUI.
9
+ Save this as an `.html` file and open it — no build step, no server required. It installs the Base UI from the pinned CDN and renders a button, an input, and a card using the base static markup (`b-ui`) API (the zero-build alternative). If you're building an application, skip straight to the [pure Base install](#2-install-pure-owl-api--recommended) below — it's the recommended way to consume the Base UI.
10
10
 
11
11
  ```html
12
12
  <!doctype html>
@@ -32,22 +32,22 @@ Save this as an `.html` file and open it — no build step, no server required.
32
32
  </html>
33
33
  ```
34
34
 
35
- `https://cdn.jsdelivr.net/npm/@thebase/ui@latest/dist/...` is the real jsDelivr URL for the published `@thebase/ui` npm package's `latest` tag, used here for a copy-paste-and-go quick start. Pin an exact version instead (e.g. `@1.1.3`, or `@1` to take only non-breaking updates) for production, so a new release can't change what your page loads. See [Installation](installation.md) for jsDelivr/unpkg/npm/self-hosted paths.
35
+ `https://cdn.jsdelivr.net/npm/@thebase/ui@latest/dist/...` is the real jsDelivr URL for the published `@thebase/ui` npm package's `latest` tag, used here for a copy-paste-and-go quick start. Pin an exact version instead (e.g. `@1.1.5`, or `@1` to take only non-breaking updates) for production, so a new release can't change what your page loads. See [Installation](installation.md) for jsDelivr/unpkg/npm/self-hosted paths.
36
36
 
37
- The static bundle calls `thebase.mountAll()` automatically on `DOMContentLoaded`, so initial `[b-ui]` and `[b-icon]` markup mounts without an extra script. Call `thebase.mountAll(root)` yourself only after injecting new markup or when mounting a specific fragment. If the consumer is itself an Owl app, use [step 2](#2-install-pure-owl-api--recommended) instead — that's the recommended path.
37
+ The static bundle calls `thebase.mountAll()` automatically on `DOMContentLoaded`, so initial `[b-ui]` and `[b-icon]` markup mounts without an extra script. Call `thebase.mountAll(root)` yourself only after injecting new markup or when mounting a specific fragment. If the consumer is itself an application, use [step 2](#2-install-pure-owl-api--recommended) instead — that's the recommended path.
38
38
 
39
39
  ## 1. Decide which API you need
40
40
 
41
41
  | You are building... | Use | Install | Full reference |
42
42
  | --- | --- | --- | --- |
43
- | Your own Owl app that wants `<Button/>`, `<Card/>`, `<Dialog/>` as real component classes | The pure Owl component API (recommended) | CSS + the same `baseui.min.js`/`baseui.esm.js` (via `@base/owl`/`@base/component` import-map keys or a plain npm import) + `dist/baseui.templates.xml` | [Pure Owl Components](owl-components.md) |
44
- | Static HTML, a server-rendered page, or a Base HUB website page with no Owl runtime | The static `b-ui` markup API (alternative) | One CSS file + one `<script>` tag | [Installation](installation.md) |
43
+ | Your own application that wants `<Button/>`, `<Card/>`, `<Dialog/>` as real component classes | The Base component API (recommended) | CSS + the same `baseui.min.js`/`baseui.esm.js` (via `@base/owl`/`@base/component` import-map keys or a plain npm import) + `dist/baseui.templates.xml` | [Base Components](owl-components.md) |
44
+ | Static HTML, a server-rendered page, or a Base HUB website page with no Owl runtime | The base static markup (`b-ui`) API (alternative) | One CSS file + one `<script>` tag | [Installation](installation.md) |
45
45
 
46
- Both APIs come from the same package and the same CSS file, and can be mixed on one page. Prefer the pure Owl component API by default — real component classes, props, and slots compose more predictably than markup attributes. Reach for the static API only when the target page has no Owl runtime of its own (plain HTML, server-rendered templates, a Base HUB website page) and adding one isn't worthwhile just to use BaseUI.
46
+ Both APIs come from the same package and the same CSS file, and can be mixed on one page. Prefer the Base component API by default — real component classes, props, and slots compose more predictably than markup attributes. Reach for the static API only when the target page has no Owl runtime of its own (plain HTML, server-rendered templates, a Base HUB website page) and adding one isn't worthwhile just to use the Base UI.
47
47
 
48
48
  **[VERIFY]** Before choosing, confirm whether the target project already runs Owl (check for `@odoo/owl` or `@base/owl` in its `package.json`), or whether it's a plain page you'd rather not add a component-mount step to. Use the static API for the latter.
49
49
 
50
- ## 2. Install (pure Owl API — recommended)
50
+ ## 2. Install (pure Base API — recommended)
51
51
 
52
52
  ```html
53
53
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@thebase/ui@latest/dist/baseui.min.css">
@@ -63,7 +63,7 @@ Both APIs come from the same package and the same CSS file, and can be mixed on
63
63
  </script>
64
64
  ```
65
65
 
66
- `https://unpkg.com/@thebase/ui@latest/dist/...` mirrors the same files as an alternative CDN if jsDelivr is unreachable — swap the host in each URL above. Pin an exact version (e.g. `@1.1.3`, or `@1` to take only non-breaking updates) instead of `@latest` for production.
66
+ `https://unpkg.com/@thebase/ui@latest/dist/...` mirrors the same files as an alternative CDN if jsDelivr is unreachable — swap the host in each URL above. Pin an exact version (e.g. `@1.1.5`, or `@1` to take only non-breaking updates) instead of `@latest` for production.
67
67
 
68
68
  ```html
69
69
  <script type="module">
@@ -87,12 +87,12 @@ Both APIs come from the same package and the same CSS file, and can be mixed on
87
87
  </script>
88
88
  ```
89
89
 
90
- `@base/owl`, `@base/component`, and `@base/theme` all resolve to the exact same `dist/baseui.esm.js` — the one file this whole guide installs for the static API too. For npm/bundler usage, skip the import map entirely and import everything straight from `@thebase/ui` (plus `@thebase/ui/dist/baseui.templates.xml` as a fetch target) — see [Pure Owl Components](owl-components.md#npm--bundler-usage).
90
+ `@base/owl`, `@base/component`, and `@base/theme` all resolve to the exact same `dist/baseui.esm.js` — the one file this whole guide installs for the static API too. For npm/bundler usage, skip the import map entirely and import everything straight from `@thebase/ui` (plus `@thebase/ui/dist/baseui.templates.xml` as a fetch target) — see [Base Components](owl-components.md#npm--bundler-usage).
91
91
 
92
- Two rules that account for most integration failures — see [Pure Owl Components](owl-components.md#common-mistakes) for the worked example:
92
+ Two rules that account for most integration failures — see [Base Components](owl-components.md#common-mistakes) for the worked example:
93
93
 
94
- 1. `dist/baseui.templates.xml` must be loaded and passed to `mount()` before any BaseUI tag renders.
95
- 2. Import Owl itself from `@base/owl`, never `@odoo/owl` — otherwise the consumer's `Component` class and BaseUI's are different runtime identities and mounting throws.
94
+ 1. `dist/baseui.templates.xml` must be loaded and passed to `mount()` before any Base UI tag renders.
95
+ 2. Import Owl itself from `@base/owl`, never `@odoo/owl` — otherwise the consumer's `Component` class and the Base UI's are different runtime identities and mounting throws.
96
96
 
97
97
  ## 3. Install (static `b-ui` API — alternative, no Owl runtime needed)
98
98
 
@@ -103,7 +103,7 @@ Two rules that account for most integration failures — see [Pure Owl Component
103
103
  <script src="https://cdn.jsdelivr.net/npm/@thebase/ui@latest/dist/baseui.min.js" defer></script>
104
104
  ```
105
105
 
106
- `https://unpkg.com/@thebase/ui@latest/dist/...` mirrors the same files as an alternative CDN if jsDelivr is unreachable. Pin an exact version (e.g. `@1.1.3`, or `@1` to take only non-breaking updates) instead of `@latest` for production.
106
+ `https://unpkg.com/@thebase/ui@latest/dist/...` mirrors the same files as an alternative CDN if jsDelivr is unreachable. Pin an exact version (e.g. `@1.1.5`, or `@1` to take only non-breaking updates) instead of `@latest` for production.
107
107
 
108
108
  **Option B — npm (bundler-based apps: Vite, webpack, etc.):**
109
109
 
@@ -116,11 +116,11 @@ import "@thebase/ui/baseui.css";
116
116
  import "@thebase/ui"; // side-effect import: registers window.thebase and auto-mounts on DOMContentLoaded
117
117
  ```
118
118
 
119
- `dist/baseui.min.js`/`baseui.esm.js` are fully self-contained — Bootstrap's JS bundle and the Owl runtime are embedded ahead of BaseUI's own code, in load order, inside this one file. No other script or import is needed for the static API.
119
+ `dist/baseui.min.js`/`baseui.esm.js` are fully self-contained — Bootstrap's JS bundle and the Owl runtime are embedded ahead of the Base UI's own code, in load order, inside this one file. No other script or import is needed for the static API.
120
120
 
121
121
  Rule that applies to both options:
122
122
 
123
- - Production pages must use a pinned version (e.g. `@thebase/ui@1.1.3` or `@thebase/ui@1`), never `@latest`.
123
+ - Production pages must use a pinned version (e.g. `@thebase/ui@1.1.5` or `@thebase/ui@1`), never `@latest`.
124
124
 
125
125
  Mount markup:
126
126
 
@@ -198,11 +198,11 @@ Full token list and the shadcn-aligned default palette: [Theming](theming.md).
198
198
  </button>
199
199
  ```
200
200
 
201
- Icons ship with the normal BaseUI assets — no separate script tag, and every Lucide icon name is available by kebab-case (`panel-left`), camelCase, or snake_case. Sizing, color, accessibility rules, and self-hosting: [Built-in Icons](icons.md).
201
+ Icons ship with the normal the Base UI assets — no separate script tag, and every Lucide icon name is available by kebab-case (`panel-left`), camelCase, or snake_case. Sizing, color, accessibility rules, and self-hosting: [Built-in Icons](icons.md).
202
202
 
203
203
  ## 5b. PWA toolkit (optional) — generate manifest.webmanifest + sw.js
204
204
 
205
- Any BaseUI app can become an installable PWA without hand-writing a service worker. `@thebase/ui/pwa`
205
+ Any Base UI app can become an installable PWA without hand-writing a service worker. `@thebase/ui/pwa`
206
206
  exports two pure functions, `buildManifest(config)` and `buildServiceWorker(config)`, that turn a
207
207
  config object into the exact manifest JSON and service-worker source a hand-written PWA needs
208
208
  (precache the app shell, network-first for same-origin requests, cache-first for the pinned CDN
@@ -219,7 +219,7 @@ export default {
219
219
  },
220
220
  serviceWorker: {
221
221
  cacheName: "my-app-cache-v1",
222
- cdnVersion: "1.1.3", // pin to match the importmap in index.html
222
+ cdnVersion: "1.1.5", // pin to match the importmap in index.html
223
223
  appFiles: ["/app.css", "/app.js", "/app.xml", "/favicon.svg", "/icons/icon-192.png", "/icons/icon-512.png"],
224
224
  },
225
225
  };
@@ -248,7 +248,7 @@ For common layouts (dashboard shells, sidebars, login/signup forms, charts), cop
248
248
  - [ ] Only `baseui.min.css` + `baseui.min.js` (or `baseui.esm.js`) are loaded — no separate `baseui.owl.*`/`bootstrap.bundle.min.js`/`baseui.components.esm.js` files needed, for either API.
249
249
  - [ ] `thebase.version` returns the expected pinned version in the browser console.
250
250
  - [ ] Initial static markup mounts without an extra call; injected markup mounts after `thebase.mountAll(root)`.
251
- - [ ] Pure Owl components render with no console errors (a missing-template error means step 2's `dist/baseui.templates.xml` load is missing or unawaited).
251
+ - [ ] Base components render with no console errors (a missing-template error means step 2's `dist/baseui.templates.xml` load is missing or unawaited).
252
252
  - [ ] Toggling `b-theme` actually changes rendered colors (a no-op usually means CSS custom properties are being overridden by the consumer's own stylesheet loaded after `baseui.min.css`).
253
253
  - [ ] Look up the specific component in [`docs/components/`](components/) for its attributes, events, and accessibility notes before wiring it up.
254
254
 
@@ -259,10 +259,10 @@ For common layouts (dashboard shells, sidebars, login/signup forms, charts), cop
259
259
  | `ReferenceError: BaseUI is not defined` | The bundle script hasn't run yet, or its `<script>` tag is missing/mistyped. | Confirm the `<script src=".../baseui.min.js" defer>` tag is present and the network tab shows it loading (200, not 404). |
260
260
  | Components render unstyled (plain HTML, no Bootstrap look) | `baseui.min.css` isn't loaded, or loaded after your own stylesheet overrides it. | Load `baseui.min.css` in `<head>`, before any of your own CSS that touches the same elements. |
261
261
  | `tabs` (or another Owl-backed static component) silently does nothing | `baseui.min.js` didn't finish loading. | Confirm `baseui.min.js` loads (network tab, 200 not 404). |
262
- | Pure Owl mount throws `"X is not a Component. It must inherit from the Component class"` | Your app imports `@odoo/owl` directly somewhere instead of `@base/owl`. | Replace every `@odoo/owl` import with `@base/owl` in your own app code — both must resolve to the same `globalThis.owl` instance. |
263
- | Pure Owl component renders blank / throws a template-not-found error | `dist/baseui.templates.xml` was never fetched and passed to `mount()`. | Fetch the templates string and pass it as `{ templates }` to `mount()` (or `app.addTemplates(...)`) before rendering any BaseUI tag. |
262
+ | Pure Base mount throws `"X is not a Component. It must inherit from the Component class"` | Your app imports `@odoo/owl` directly somewhere instead of `@base/owl`. | Replace every `@odoo/owl` import with `@base/owl` in your own app code — both must resolve to the same `globalThis.owl` instance. |
263
+ | Base component renders blank / throws a template-not-found error | `dist/baseui.templates.xml` was never fetched and passed to `mount()`. | Fetch the templates string and pass it as `{ templates }` to `mount()` (or `app.addTemplates(...)`) before rendering any Base UI tag. |
264
264
  | New markup injected via AJAX/fetch doesn't turn into components | Auto-mount only covers markup present when the bundle initializes. | Call `thebase.mountAll(root)` after injecting new `[b-ui]` or `[b-icon]` markup — it's idempotent, safe to call repeatedly. |
265
- | `thebase.theme.set(...)` has no visible effect | A page stylesheet loaded after `baseui.min.css` re-hardcodes the same properties, or the element isn't a descendant of the themed root. | Load consumer CSS after BaseUI's, and confirm `b-theme` is set on `<html>` or an ancestor of the components you expect to change. |
265
+ | `thebase.theme.set(...)` has no visible effect | A page stylesheet loaded after `baseui.min.css` re-hardcodes the same properties, or the element isn't a descendant of the themed root. | Load consumer CSS after the Base UI's, and confirm `b-theme` is set on `<html>` or an ancestor of the components you expect to change. |
266
266
 
267
267
  ## 9. Common mistakes
268
268
 
@@ -270,8 +270,8 @@ For common layouts (dashboard shells, sidebars, login/signup forms, charts), cop
270
270
  - Using `/latest/` CDN paths in production instead of a pinned version.
271
271
  - Assuming auto-mount watches the DOM forever — it does not; call `thebase.mountAll(root)` after injecting new `[b-ui]` markup client-side (e.g. from a fetched partial).
272
272
  - Mixing `@odoo/owl` imports into a project that also imports `@thebase/ui` — always go through `@base/owl`.
273
- - Expecting `thebase.mountAll()` to pick up Owl component tags (`<Button/>`) — it only mounts static `[b-ui]` markers; pure Owl components are registered and mounted through your own app's `static components` + `mount()`, per step 2.
273
+ - Expecting `thebase.mountAll()` to pick up Owl component tags (`<Button/>`) — it only mounts static `[b-ui]` markers; Base components are registered and mounted through your own app's `static components` + `mount()`, per step 2.
274
274
 
275
275
  ## Related docs
276
276
 
277
- [Installation](installation.md) · [Runtime API](runtime-api.md) · [Theming](theming.md) · [Built-in Icons](icons.md) · [Pure Owl Components](owl-components.md) · [Blocks](blocks.md) · [Component Authoring](component-authoring.md) (for contributing to BaseUI itself, not for consuming it) · [Registry](registry.md) · [Component Reference index](components/button.md) (per-component pages live under `docs/components/`)
277
+ [Installation](installation.md) · [Runtime API](runtime-api.md) · [Theming](theming.md) · [Built-in Icons](icons.md) · [Base Components](owl-components.md) · [Blocks](blocks.md) · [Component Authoring](component-authoring.md) (for contributing to the Base UI itself, not for consuming it) · [Registry](registry.md) · [Component Reference index](components/button.md) (per-component pages live under `docs/components/`)