@thebase/ui 1.0.0 → 1.1.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 (46) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/LICENSE +28 -0
  3. package/README.md +6 -5
  4. package/dist/baseui.analytics.esm.js +1 -0
  5. package/dist/baseui.analytics.min.js +1 -0
  6. package/dist/baseui.esm.js +9 -9
  7. package/dist/baseui.icons.esm.js +1 -1
  8. package/dist/baseui.min.js +9 -9
  9. package/dist/baseui.registry.json +8 -4
  10. package/dist/types/analytics.d.ts +65 -0
  11. package/dist/types/index.d.ts +4 -0
  12. package/docs/analytics.md +77 -0
  13. package/docs/blocks.md +1 -1
  14. package/docs/components/avatar.md +3 -3
  15. package/docs/components/block-viewer.md +2 -2
  16. package/docs/components/calendar.md +3 -3
  17. package/docs/components/carousel.md +3 -3
  18. package/docs/components/chart.md +3 -3
  19. package/docs/components/combobox.md +3 -3
  20. package/docs/components/command.md +3 -3
  21. package/docs/components/context-menu.md +3 -3
  22. package/docs/components/data-table.md +3 -3
  23. package/docs/components/date-picker.md +3 -3
  24. package/docs/components/icon.md +2 -2
  25. package/docs/components/input-otp.md +3 -3
  26. package/docs/components/input.md +2 -2
  27. package/docs/components/markdown.md +2 -2
  28. package/docs/components/message-scroller.md +3 -3
  29. package/docs/components/message.md +3 -3
  30. package/docs/components/popover.md +3 -3
  31. package/docs/components/questionnaire.md +3 -3
  32. package/docs/components/resizable.md +3 -3
  33. package/docs/components/scroll-area.md +3 -3
  34. package/docs/components/text-editor.md +1 -1
  35. package/docs/components/theme-button.md +2 -2
  36. package/docs/components/toggle-group.md +3 -3
  37. package/docs/components/toggle.md +3 -3
  38. package/docs/components/tooltip.md +3 -3
  39. package/docs/icons.md +5 -5
  40. package/docs/installation.md +4 -3
  41. package/docs/owl-components.md +2 -2
  42. package/docs/registry.md +2 -1
  43. package/docs/runtime-api.md +16 -12
  44. package/docs/theming.md +4 -4
  45. package/docs/usage-guide.md +15 -15
  46. package/package.json +8 -1
@@ -99,7 +99,7 @@ Or the same session hosted on an external websocket backend instead of peer-to-p
99
99
 
100
100
  ## Methods
101
101
 
102
- Use the global runtime methods: `BaseUI.mount()`, `BaseUI.mountAll()`, and `BaseUI.destroy()`.
102
+ Use the global runtime methods: `thebase.mount()`, `thebase.mountAll()`, and `thebase.destroy()`.
103
103
 
104
104
  ## Milkdown plugins included
105
105
 
@@ -34,7 +34,7 @@ See [Pure Owl Components](/examples/blocks.html#/docs/guide/owl-components) for
34
34
 
35
35
  ## Enhanced usage
36
36
 
37
- The static bundle mounts initial `b-ui="theme-button"` markup automatically. Call `BaseUI.mount(element)` or `BaseUI.mountAll(root)` only when adding a theme button after the page has loaded. The component updates `b-theme` and `data-bs-theme` on the document root, persists the selected theme, and keeps its icon/ARIA label in sync.
37
+ The static bundle mounts initial `b-ui="theme-button"` markup automatically. Call `thebase.mount(element)` or `thebase.mountAll(root)` only when adding a theme button after the page has loaded. The component updates `b-theme` and `data-bs-theme` on the document root, persists the selected theme, and keeps its icon/ARIA label in sync.
38
38
 
39
39
  ## Options and attributes
40
40
 
@@ -42,7 +42,7 @@ Use `b-att-variant="default|outline|ghost|destructive|secondary|link"` and `b-at
42
42
 
43
43
  ## Methods
44
44
 
45
- Use the global runtime methods: `BaseUI.mount()`, `BaseUI.mountAll()`, and `BaseUI.destroy()`. For direct theme control, import `createThemeController` from `@thebase/ui`.
45
+ Use the global runtime methods: `thebase.mount()`, `thebase.mountAll()`, and `thebase.destroy()`. For direct theme control, import `createThemeController` from `@thebase/ui`.
46
46
 
47
47
  ## Events
48
48
 
@@ -46,7 +46,7 @@ See [Pure Owl Components](/examples/blocks.html#/docs/guide/owl-components) for
46
46
 
47
47
  ## Enhanced usage
48
48
 
49
- Call `BaseUI.mount(element)` or rely on `BaseUI.mountAll()` after the script loads.
49
+ Call `thebase.mount(element)` or rely on `thebase.mountAll()` after the script loads.
50
50
 
51
51
  ## Options and attributes
52
52
 
@@ -54,7 +54,7 @@ See `dist/baseui.registry.json` for the supported attribute list.
54
54
 
55
55
  ## Methods
56
56
 
57
- Use the global runtime methods: `BaseUI.mount()`, `BaseUI.mountAll()`, and `BaseUI.destroy()`.
57
+ Use the global runtime methods: `thebase.mount()`, `thebase.mountAll()`, and `thebase.destroy()`.
58
58
 
59
59
  ## Events
60
60
 
@@ -78,4 +78,4 @@ BaseUI targets modern evergreen browsers that support ES modules, CSS variables,
78
78
 
79
79
  ## Test checklist
80
80
 
81
- Verify light and dark themes, keyboard access for focusable controls, disabled or readonly states when applicable, and cleanup through `BaseUI.destroy()`.
81
+ Verify light and dark themes, keyboard access for focusable controls, disabled or readonly states when applicable, and cleanup through `thebase.destroy()`.
@@ -47,7 +47,7 @@ See [Pure Owl Components](/examples/blocks.html#/docs/guide/owl-components) for
47
47
 
48
48
  ## Enhanced usage
49
49
 
50
- Call `BaseUI.mount(element)` or rely on `BaseUI.mountAll()` after the script loads.
50
+ Call `thebase.mount(element)` or rely on `thebase.mountAll()` after the script loads.
51
51
 
52
52
  ## Options and attributes
53
53
 
@@ -55,7 +55,7 @@ See `dist/baseui.registry.json` for the supported attribute list.
55
55
 
56
56
  ## Methods
57
57
 
58
- Use the global runtime methods: `BaseUI.mount()`, `BaseUI.mountAll()`, and `BaseUI.destroy()`.
58
+ Use the global runtime methods: `thebase.mount()`, `thebase.mountAll()`, and `thebase.destroy()`.
59
59
 
60
60
  ## Events
61
61
 
@@ -79,4 +79,4 @@ BaseUI targets modern evergreen browsers that support ES modules, CSS variables,
79
79
 
80
80
  ## Test checklist
81
81
 
82
- Verify light and dark themes, keyboard access for focusable controls, disabled or readonly states when applicable, and cleanup through `BaseUI.destroy()`.
82
+ Verify light and dark themes, keyboard access for focusable controls, disabled or readonly states when applicable, and cleanup through `thebase.destroy()`.
@@ -42,7 +42,7 @@ Tooltips show on hover and focus, then hide on mouse leave and blur — Bootstra
42
42
 
43
43
  ## Enhanced usage
44
44
 
45
- Call `BaseUI.mount(element)` or rely on `BaseUI.mountAll()` after the script loads.
45
+ Call `thebase.mount(element)` or rely on `thebase.mountAll()` after the script loads.
46
46
 
47
47
  ## Options and attributes
48
48
 
@@ -50,7 +50,7 @@ See `dist/baseui.registry.json` for the supported attribute list.
50
50
 
51
51
  ## Methods
52
52
 
53
- Use the global runtime methods: `BaseUI.mount()`, `BaseUI.mountAll()`, and `BaseUI.destroy()`.
53
+ Use the global runtime methods: `thebase.mount()`, `thebase.mountAll()`, and `thebase.destroy()`.
54
54
 
55
55
  ## Events
56
56
 
@@ -74,4 +74,4 @@ BaseUI targets modern evergreen browsers that support ES modules, CSS variables,
74
74
 
75
75
  ## Test checklist
76
76
 
77
- Verify light and dark themes, keyboard access for focusable controls, disabled or readonly states when applicable, and cleanup through `BaseUI.destroy()`.
77
+ Verify light and dark themes, keyboard access for focusable controls, disabled or readonly states when applicable, and cleanup through `thebase.destroy()`.
package/docs/icons.md CHANGED
@@ -22,7 +22,7 @@ Load the normal BaseUI assets. No separate icon script is required.
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.0.0`, 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.0`, 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.
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
 
@@ -93,7 +93,7 @@ By default, icon URLs point to the pinned Lucide CDN configured in the registry.
93
93
  The same override is available through JavaScript.
94
94
 
95
95
  ```js
96
- BaseUI.icons.lucide.url("search", { baseUrl: "/dist/icons/lucide" });
96
+ thebase.icons.lucide.url("search", { baseUrl: "/dist/icons/lucide" });
97
97
  ```
98
98
 
99
99
  ## JavaScript API
@@ -101,9 +101,9 @@ BaseUI.icons.lucide.url("search", { baseUrl: "/dist/icons/lucide" });
101
101
  Use the API when you need to build URLs or render icons into existing nodes.
102
102
 
103
103
  ```js
104
- BaseUI.icons.lucide.normalizeName("Panel_Left");
105
- BaseUI.icons.lucide.url("panel-left");
106
- BaseUI.icons.lucide.render(document.querySelector("#status-icon"), "circle-check", {
104
+ thebase.icons.lucide.normalizeName("Panel_Left");
105
+ thebase.icons.lucide.url("panel-left");
106
+ thebase.icons.lucide.render(document.querySelector("#status-icon"), "circle-check", {
107
107
  size: "18px",
108
108
  });
109
109
  ```
@@ -4,7 +4,7 @@ See the [Usage Guide](usage-guide.md) for the end-to-end integration path (choos
4
4
 
5
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.
6
6
 
7
- The snippets below use the `@latest` tag for readability. Pin an exact version instead (e.g. `@1.0.0`, 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.0`, 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
9
  ## Pure Owl component install (recommended)
10
10
 
@@ -43,7 +43,7 @@ For static HTML, a server-rendered page, or a Base HUB website page that has no
43
43
 
44
44
  Bootstrap 5 is the bundled baseline CSS framework, and its JS bundle now drives BaseUI'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.0.0`, 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.0`, or `@1` to take only non-breaking updates) instead of `@latest` for production.
47
47
 
48
48
  For npm/self-hosted usage:
49
49
 
@@ -55,7 +55,7 @@ Then copy or serve `node_modules/@thebase/ui/dist/baseui.min.css` and `node_modu
55
55
 
56
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.
57
57
 
58
- The static bundle auto-mounts existing `[b-ui]` and `[b-icon]` markers on `DOMContentLoaded`. Use `BaseUI.mountAll(root)` after later DOM injection, and `BaseUI.destroy(root)` before removing a mounted subtree that owns listeners or an Owl-backed controller.
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
 
60
60
  The package also ships the complete Lucide SVG icon set under `dist/icons/lucide/` and a generated `dist/icons/lucide.json` manifest. The built-in icon component can use the pinned jsDelivr Lucide CDN by default or your own self-hosted path:
61
61
 
@@ -76,6 +76,7 @@ Production pages should use pinned version URLs. `latest` is for demos and exper
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
+ | 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` |
79
80
 
80
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.
81
82
 
@@ -55,7 +55,7 @@ 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.0.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.0`, or `@1` to take only non-breaking updates) in production so a new release can't change what your page loads.
59
59
 
60
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.
61
61
 
@@ -83,7 +83,7 @@ When a bundler cannot import XML with `?raw`, load `dist/baseui.templates.xml` a
83
83
 
84
84
  Both APIs come from the exact same bundle now, so there's nothing extra to load — just be clear about which mechanism owns which markup:
85
85
 
86
- - `BaseUI.mountAll(root)` enhances static `[b-ui]` and `[b-icon]` markers.
86
+ - `thebase.mountAll(root)` enhances static `[b-ui]` and `[b-icon]` markers.
87
87
  - Owl `mount(Root, target, { templates })` renders component tags such as `<Button/>`.
88
88
  - Importing the package always also runs `autoMount()` (its `[b-ui]`/`[b-icon]` DOM scan on `DOMContentLoaded`) — harmless if your page has none, but means there's no side-effect-free way to import just the component classes anymore.
89
89
  - Both APIs share `dist/baseui.min.css`, `@base/theme`, and the same `b-theme` / `data-bs-theme` root attributes.
package/docs/registry.md CHANGED
@@ -9,10 +9,11 @@ BaseUI ships as bundled files only — there is no per-component source distribu
9
9
  `buildFiles` lists every top-level `dist/` artifact the release validates and hashes:
10
10
 
11
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(...)`, `BaseUI.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.
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
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).
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
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).
16
17
  - `icons/lucide.json` — the built-in icon manifest.
17
18
 
18
19
  ## Component export policy
@@ -1,19 +1,23 @@
1
1
  # Runtime API
2
2
 
3
- BaseUI exposes one browser global: `window.BaseUI`.
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.
4
4
 
5
5
  ```js
6
- BaseUI.version
7
- BaseUI.register(name, definition)
8
- BaseUI.component(name)
9
- BaseUI.mount(selectorOrElement, options)
10
- BaseUI.mountAll(rootElement)
11
- BaseUI.destroy(rootElement)
12
- BaseUI.theme.set("light")
13
- BaseUI.theme.set("dark")
14
- BaseUI.theme.set({ primary: "#0f6cbd" })
6
+ thebase.version
7
+ thebase.register(name, definition)
8
+ thebase.component(name)
9
+ thebase.mount(selectorOrElement, options)
10
+ thebase.mountAll(rootElement)
11
+ thebase.destroy(rootElement)
12
+ thebase.theme.set("light")
13
+ thebase.theme.set("dark")
14
+ thebase.theme.set({ primary: "#0f6cbd" })
15
+ thebase.analytics.init({ domain, endpoint })
16
+ thebase.track(eventName, options)
15
17
  ```
16
18
 
19
+ `thebase.analytics` is set only when the optional `dist/baseui.analytics.min.js` is loaded (it is not in the main bundles), and `thebase.track` is bound once it is initialized — see [Analytics](analytics.md).
20
+
17
21
  The static runtime calls `autoMount()` when imported through `dist/baseui.esm.js` or `dist/baseui.min.js`. Existing `[b-ui]` and `[b-icon]` markers are enhanced automatically once the DOM is ready.
18
22
 
19
23
  `mountAll(rootElement)` scans `[b-ui]` and `[b-icon]` below the given root. Repeated calls are idempotent for already-mounted nodes, so it is safe to call after rendering an AJAX partial or replacing a small subtree. `mount(selectorOrElement, options)` mounts one element and returns its instance metadata when a registered component exists. `destroy(rootElement)` calls component cleanup handlers and dispatches `baseui:destroyed` before a mounted subtree is removed.
@@ -23,9 +27,9 @@ Mounted components dispatch lifecycle events on their root element:
23
27
  - `baseui:mounted` with `{ name, instance }` in `event.detail`.
24
28
  - `baseui:destroyed` with `{ name }` in `event.detail`.
25
29
 
26
- `BaseUI.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.
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.
27
31
 
28
- `BaseUI.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 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).
29
33
 
30
34
  ## `cn()` class-name helper
31
35
 
package/docs/theming.md CHANGED
@@ -9,8 +9,8 @@ Set the theme on `html` or a subtree:
9
9
  At runtime:
10
10
 
11
11
  ```js
12
- BaseUI.theme.set("dark");
13
- BaseUI.theme.set({ primary: "#0057d8", radius: "0.5rem" });
12
+ thebase.theme.set("dark");
13
+ thebase.theme.set({ primary: "#0057d8", radius: "0.5rem" });
14
14
  ```
15
15
 
16
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.
@@ -38,7 +38,7 @@ 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.0.0`, 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.0`, 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
43
  For a ready-made icon button, use the BaseUI component instead of wiring your own click handler:
44
44
 
@@ -52,4 +52,4 @@ The documentation and example pages use the same theme infrastructure. Owl examp
52
52
 
53
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.
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 `BaseUI.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 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.
@@ -32,9 +32,9 @@ 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.0.0`, 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.0`, 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 `BaseUI.mountAll()` automatically on `DOMContentLoaded`, so initial `[b-ui]` and `[b-icon]` markup mounts without an extra script. Call `BaseUI.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 Owl app, 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
 
@@ -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.0.0`, 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.0`, or `@1` to take only non-breaking updates) instead of `@latest` for production.
67
67
 
68
68
  ```html
69
69
  <script type="module">
@@ -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.0.0`, 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.0`, 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
 
@@ -113,14 +113,14 @@ npm install @thebase/ui
113
113
 
114
114
  ```js
115
115
  import "@thebase/ui/baseui.css";
116
- import "@thebase/ui"; // side-effect import: registers window.BaseUI and auto-mounts on DOMContentLoaded
116
+ import "@thebase/ui"; // side-effect import: registers window.thebase and auto-mounts on DOMContentLoaded
117
117
  ```
118
118
 
119
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.
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.0.0` or `@thebase/ui@1`), never `@latest`.
123
+ - Production pages must use a pinned version (e.g. `@thebase/ui@1.1.0` or `@thebase/ui@1`), never `@latest`.
124
124
 
125
125
  Mount markup:
126
126
 
@@ -128,7 +128,7 @@ Mount markup:
128
128
  <button b-ui="button" b-att-variant="default" type="button">Save</button>
129
129
  ```
130
130
 
131
- Initial page markup mounts automatically. `BaseUI.mountAll()` scans for `[b-ui]` and `[b-icon]` and is idempotent — call it again after injecting new markup (e.g. after an AJAX partial render). Runtime API surface: [Runtime API](runtime-api.md).
131
+ Initial page markup mounts automatically. `thebase.mountAll()` scans for `[b-ui]` and `[b-icon]` and is idempotent — call it again after injecting new markup (e.g. after an AJAX partial render). Runtime API surface: [Runtime API](runtime-api.md).
132
132
 
133
133
  ### Quick component snippets
134
134
 
@@ -169,8 +169,8 @@ Copy-paste starting points for the components you'll reach for first. Every comp
169
169
  ```
170
170
 
171
171
  ```js
172
- BaseUI.theme.set("dark");
173
- BaseUI.theme.set({ primary: "#0057d8", radius: "0.5rem" });
172
+ thebase.theme.set("dark");
173
+ thebase.theme.set({ primary: "#0057d8", radius: "0.5rem" });
174
174
  ```
175
175
 
176
176
  For a persisted toggle like the docs/examples use:
@@ -207,8 +207,8 @@ For common layouts (dashboard shells, sidebars, login/signup forms, charts), cop
207
207
  ## 7. Verify the integration
208
208
 
209
209
  - [ ] 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.
210
- - [ ] `BaseUI.version` returns the expected pinned version in the browser console.
211
- - [ ] Initial static markup mounts without an extra call; injected markup mounts after `BaseUI.mountAll(root)`.
210
+ - [ ] `thebase.version` returns the expected pinned version in the browser console.
211
+ - [ ] Initial static markup mounts without an extra call; injected markup mounts after `thebase.mountAll(root)`.
212
212
  - [ ] 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).
213
213
  - [ ] 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`).
214
214
  - [ ] Look up the specific component in [`docs/components/`](components/) for its attributes, events, and accessibility notes before wiring it up.
@@ -222,16 +222,16 @@ For common layouts (dashboard shells, sidebars, login/signup forms, charts), cop
222
222
  | `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). |
223
223
  | 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. |
224
224
  | 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. |
225
- | New markup injected via AJAX/fetch doesn't turn into components | Auto-mount only covers markup present when the bundle initializes. | Call `BaseUI.mountAll(root)` after injecting new `[b-ui]` or `[b-icon]` markup — it's idempotent, safe to call repeatedly. |
226
- | `BaseUI.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. |
225
+ | 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. |
226
+ | `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. |
227
227
 
228
228
  ## 9. Common mistakes
229
229
 
230
230
  - Adding a `baseui.owl.min.js`/`bootstrap.bundle.min.js`/`baseui.components.esm.js` script tag "just in case" — none of those files are published anymore; `baseui.min.js`/`baseui.esm.js` embed everything.
231
231
  - Using `/latest/` CDN paths in production instead of a pinned version.
232
- - Assuming auto-mount watches the DOM forever — it does not; call `BaseUI.mountAll(root)` after injecting new `[b-ui]` markup client-side (e.g. from a fetched partial).
232
+ - 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).
233
233
  - Mixing `@odoo/owl` imports into a project that also imports `@thebase/ui` — always go through `@base/owl`.
234
- - Expecting `BaseUI.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.
234
+ - 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.
235
235
 
236
236
  ## Related docs
237
237
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@thebase/ui",
3
- "version": "1.0.0",
3
+ "version": "1.1.0",
4
4
  "description": "CDN-installable Owl and Bootstrap 5 UI component library.",
5
5
  "type": "module",
6
6
  "main": "./dist/baseui.min.js",
@@ -20,6 +20,11 @@
20
20
  "./icons": {
21
21
  "import": "./dist/baseui.icons.esm.js"
22
22
  },
23
+ "./analytics": {
24
+ "types": "./dist/types/analytics.d.ts",
25
+ "import": "./dist/baseui.analytics.esm.js",
26
+ "default": "./dist/baseui.analytics.min.js"
27
+ },
23
28
  "./dist/baseui.templates.xml": "./dist/baseui.templates.xml"
24
29
  },
25
30
  "files": [
@@ -28,6 +33,8 @@
28
33
  "dist/baseui.esm.js",
29
34
  "dist/baseui.min.js",
30
35
  "dist/baseui.icons.esm.js",
36
+ "dist/baseui.analytics.esm.js",
37
+ "dist/baseui.analytics.min.js",
31
38
  "dist/baseui.templates.xml",
32
39
  "dist/icons",
33
40
  "dist/baseui.registry.json",