@thebase/ui 1.1.6 → 1.2.0

package/docs/components/sidebar.md

@@ -166,7 +166,7 @@ import { Sidebar, SidebarContent, SidebarFooter, SidebarHeader, SidebarMenu, Sid
 
 Reusable nav-content primitives, extracted from the recurring group/item shapes across the `sidebar-*` example blocks (`examples/blocks/sidebar-01.html`, `-02`, `-03`, `-08`, `-10`, etc.). Compose them instead of hand-rolling static markup for each new sidebar.
 
-`SidebarMenu` (`.bu-sidebar-menu`) fills the remaining height of the panel and scrolls on its own (`overflow-y: auto`) when its items overflow. `SidebarHeader` and `SidebarFooter` stay in place, so a long nav list no longer pushes the footer off-screen.
+`SidebarMenu` (`.b-sidebar-menu`) fills the remaining height of the panel and scrolls on its own (`overflow-y: auto`) when its items overflow. `SidebarHeader` and `SidebarFooter` stay in place, so a long nav list no longer pushes the footer off-screen.
 
 ```base-ui
 <Sidebar defaultOpen="true">
@@ -239,16 +239,16 @@ See [Base Components](/examples/blocks.html#/docs/guide/owl-components) for how
 ## Static component
 
 ```base-ui
-<div class="bu-sidebar-demo-frame">
+<div class="b-sidebar-demo-frame">
   <aside b-ui="sidebar" b-att-state="open">
     <div b-sidebar-header>
-      <a href="#" class="bu-sidebar-demo-brand">
-        <span class="bu-sidebar-demo-brand-mark"><span b-icon="gallery-vertical-end"></span></span>
-        <span class="bu-sidebar-demo-meta">
-          <span class="bu-sidebar-demo-title">Acme Inc</span>
-          <span class="bu-sidebar-demo-email">Enterprise</span>
+      <a href="#" class="b-sidebar-demo-brand">
+        <span class="b-sidebar-demo-brand-mark"><span b-icon="gallery-vertical-end"></span></span>
+        <span class="b-sidebar-demo-meta">
+          <span class="b-sidebar-demo-title">Acme Inc</span>
+          <span class="b-sidebar-demo-email">Enterprise</span>
         </span>
-        <span class="bu-sidebar-demo-chevrons" b-icon="chevrons-up-down"></span>
+        <span class="b-sidebar-demo-chevrons" b-icon="chevrons-up-down"></span>
       </a>
     </div>
 
@@ -287,18 +287,18 @@ See [Base Components](/examples/blocks.html#/docs/guide/owl-components) for how
     </div>
 
     <div b-sidebar-footer>
-      <a href="#" class="bu-sidebar-demo-user">
-        <span b-ui="avatar" class="bu-sidebar-demo-avatar">SC</span>
-        <span class="bu-sidebar-demo-meta">
-          <span class="bu-sidebar-demo-title">shadcn</span>
-          <span class="bu-sidebar-demo-email">m@example.com</span>
+      <a href="#" class="b-sidebar-demo-user">
+        <span b-ui="avatar" class="b-sidebar-demo-avatar">SC</span>
+        <span class="b-sidebar-demo-meta">
+          <span class="b-sidebar-demo-title">shadcn</span>
+          <span class="b-sidebar-demo-email">m@example.com</span>
         </span>
-        <span class="bu-sidebar-demo-chevrons" b-icon="chevrons-up-down"></span>
+        <span class="b-sidebar-demo-chevrons" b-icon="chevrons-up-down"></span>
       </a>
     </div>
   </aside>
-  <main class="bu-sidebar-demo-main">
-    <button class="bu-sidebar-trigger" type="button" aria-label="Toggle Sidebar">
+  <main class="b-sidebar-demo-main">
+    <button class="b-sidebar-trigger" type="button" aria-label="Toggle Sidebar">
       <span b-icon="panel-left"></span>
     </button>
   </main>
@@ -306,3 +306,5 @@ See [Base Components](/examples/blocks.html#/docs/guide/owl-components) for how
 ```
 
 State is reflected through `b-att-state="open|closed"`. Events: `baseui:open`, `baseui:close`.
+
+Below 992px the sidebar is an off-canvas drawer closed by navigation; the `Shell` and `Sidebar` CSS and `matchMedia` checks share this breakpoint.

package/docs/components/switch.md

@@ -14,10 +14,21 @@ import { Switch } from "@thebase/ui";
 </div>
 ```
 
+### Help tooltip (`useTip`)
+
+```base-ui
+<div class="d-flex flex-column gap-3" style="max-width: 28rem">
+  <Switch supportingText="'Turns off all wireless radios'">Airplane Mode</Switch>
+  <Switch supportingText="'Turns off all wireless radios'" useTip="1">Airplane Mode</Switch>
+</div>
+```
+
 | Component | Prop | Type | Notes |
 | --- | --- | --- | --- |
 | `Switch` | `checked` | `Boolean` | optional |
 | `Switch` | `disabled` | `Boolean` | optional |
+| `Switch` | `supportingText` | `String` | optional helper text shown under the label |
+| `Switch` | `useTip` | `Number` | `1` moves `supportingText` into a tooltip on a question-mark icon right after the label |
 | `Switch` | `className` | `String` | optional |
 | `Switch` | `onChange` | `Function` | optional |
 

package/docs/components/text-editor.md

@@ -86,7 +86,7 @@ Or the same session hosted on an external websocket backend instead of peer-to-p
 - `b-att-placeholder` / `placeholder` — empty-editor hint text.
 - `b-att-collaborative` / `collaborative` — set to `"true"` to connect through Yjs; off by default.
 - `b-att-provider` / `provider` — collaboration transport: `"webrtc"` (default, peer-to-peer) or `"websocket"` (connects to an external y-websocket-compatible backend).
-- `b-att-room` / `room` — document/room name for collaborative sessions (defaults to `bu-text-editor`); shared across peers for y-webrtc, or used as the document name on the y-websocket backend.
+- `b-att-room` / `room` — document/room name for collaborative sessions (defaults to `b-text-editor`); shared across peers for y-webrtc, or used as the document name on the y-websocket backend.
 - `b-att-url` / `url` — y-websocket server URL (e.g. `wss://your-backend.example.com/mkdn`), required when `provider` is `"websocket"`. Ignored for `"webrtc"`.
 - `b-att-password` / `password` — optional y-webrtc room password. Ignored for `"websocket"`.
 - `b-att-signaling` / `signaling` — comma-separated signaling URLs for the static API, or an array prop for Owl. y-webrtc only.

package/docs/components/textarea.md

@@ -27,6 +27,28 @@ import { Textarea } from "@thebase/ui";
 </div>
 ```
 
+### Footer slot
+
+The `footer` slot draws a bar along the bottom edge inside the field (counter on the left, send button on the right). `start` and `end` work as on [Input](/examples/blocks.html#/docs/components/input).
+
+```base-ui
+<div style="max-width: 28rem" class="w-100 pt-3">
+  <Textarea label="'Message'" rows="3">
+    <t t-set-slot="footer"><span>0/280</span><Button size="'xs'">Send</Button></t>
+  </Textarea>
+</div>
+```
+
+### Help tooltip (`useTip`)
+
+Set `useTip="1"` to move `supportingText` into a tooltip: a question-mark icon appears right after the label, in the same label box, and the text shows on hover or focus. Error text still shows under the field.
+
+```base-ui
+<div style="max-width: 28rem" class="w-100 pt-3">
+  <Textarea label="'Your message'" supportingText="'Copied to the support team'" useTip="1"/>
+</div>
+```
+
 | Component | Prop | Type | Notes |
 | --- | --- | --- | --- |
 | `Textarea` | `value` | `String` | optional |
@@ -39,6 +61,7 @@ import { Textarea } from "@thebase/ui";
 | `Textarea` | `id` | `String` | optional, e.g. for `Label`'s `for` |
 | `Textarea` | `onInput` | `Function` | optional |
 | `Textarea` | `onChange` | `Function` | optional |
+| `Textarea` | slots `start` / `end` / `footer` | slot | content drawn inside the box; `footer` sits along the bottom edge |
 | `Textarea` | `label`, `supportingText`, `useTip`, `errorText`, `maxLength`, `invalid`, `placeholder` | `String` / `Boolean` | Material-style outlined field, same behaviour as [Input](/examples/blocks.html#/docs/components/input): the label floats onto the border, `errorText` replaces `supportingText`. Also inherited from a parent `Field`. |
 
 See [Base Components](/examples/blocks.html#/docs/guide/owl-components) for how to load `@base/owl` and `dist/baseui.templates.xml`.

package/docs/components/theme-button.md

@@ -13,7 +13,7 @@ import { ThemeButton } from "@thebase/ui";
 ```
 
 ```base-ui
-<ThemeButton variant="'outline'" storageKey="'bu-theme'"/>
+<ThemeButton variant="'outline'" storageKey="'b-theme'"/>
 ```
 
 | Component | Prop | Type | Notes |

package/docs/components/toast.md

@@ -39,12 +39,12 @@ See [Base Components](/examples/blocks.html#/docs/guide/owl-components) for how
 
 ## Static component
 
-The toast root is a flex row: wrap message content in `.bu-toast-content` (grows to fill the width) and any action button plus the close button in `.bu-toast-actions` (grouped tight on the trailing edge).
+The toast root is a flex row: wrap message content in `.b-toast-content` (grows to fill the width) and any action button plus the close button in `.b-toast-actions` (grouped tight on the trailing edge).
 
 ```base-ui
 <div b-ui="toast">
-  <div class="bu-toast-content">Saved successfully.</div>
-  <div class="bu-toast-actions">
+  <div class="b-toast-content">Saved successfully.</div>
+  <div class="b-toast-actions">
     <button b-toast-close type="button">Close</button>
   </div>
 </div>
@@ -54,14 +54,14 @@ The toast stays hidden until shown — omit `b-att-state="open"` and call `.show
 
 ```base-ui
 <div class="d-flex flex-column align-items-center gap-3">
-  <button type="button" class="btn bu-button btn-outline-secondary" onclick="document.getElementById('demo-toast').BaseUIToast.show()">Show Toast</button>
+  <button type="button" class="btn b-button btn-outline-secondary" onclick="document.getElementById('demo-toast').BaseUIToast.show()">Show Toast</button>
   <div id="demo-toast" b-ui="toast" b-att-delay="3000">
-    <div class="bu-toast-content">
+    <div class="b-toast-content">
       <div class="fw-medium">Event created</div>
       <div class="text-body-secondary small">Sunday, December 3 at 9:00 AM</div>
     </div>
-    <div class="bu-toast-actions">
-      <button type="button" class="btn bu-button btn-outline-secondary btn-sm">Undo</button>
+    <div class="b-toast-actions">
+      <button type="button" class="btn b-button btn-outline-secondary btn-sm">Undo</button>
       <button b-toast-close type="button">Close</button>
     </div>
   </div>
@@ -70,7 +70,7 @@ The toast stays hidden until shown — omit `b-att-state="open"` and call `.show
 
 Programmatic API: after mount, call `element.BaseUIToast.show()` or `element.BaseUIToast.hide()`. Events: `baseui:open`, `baseui:close`.
 
-Toasts are backed by `bootstrap.Toast`: the root receives Bootstrap's `toast fade` classes, and visibility is driven by Bootstrap's own `show`/`showing` classes (not `hidden`). The close button(s) carry `data-bs-dismiss="toast"` in addition to the `b-toast-close`/`bu-toast-close` selector, so Bootstrap's own delegated dismiss handler drives them.
+Toasts are backed by `bootstrap.Toast`: the root receives Bootstrap's `toast fade` classes, and visibility is driven by Bootstrap's own `show`/`showing` classes (not `hidden`). The close button(s) carry `data-bs-dismiss="toast"` in addition to the `b-toast-close`/`b-toast-close` selector, so Bootstrap's own delegated dismiss handler drives them.
 
 ### Screen-corner placement
 
@@ -78,8 +78,8 @@ Set `b-att-position` to `top-left`, `top-right`, `bottom-left`, or `bottom-right
 
 ```base-ui
 <div id="corner-toast" b-ui="toast" b-att-position="bottom-right" b-att-delay="3000">
-  <div class="bu-toast-content">Saved successfully.</div>
-  <div class="bu-toast-actions">
+  <div class="b-toast-content">Saved successfully.</div>
+  <div class="b-toast-actions">
     <button b-toast-close type="button">Close</button>
   </div>
 </div>

package/docs/components/typography.md

@@ -82,11 +82,30 @@ import { Typography } from "@thebase/ui";
 
 | Component | Prop | Type | Notes |
 | --- | --- | --- | --- |
-| `Typography` | `variant` | `String` | optional |
+| `Typography` | `variant` | `String` | optional; `lead`, `muted`, `code`, `kbd`, `h1`-`h4`, `blockquote`, `small`, `list` |
+| `Typography` | `tag` | `String` | optional; defaults to `h1`-`h4`, `blockquote`, `small`, `ul` for those variants, else `p` |
 | `Typography` | `className` | `String` | optional |
 
 See [Base Components](/examples/blocks.html#/docs/guide/owl-components) for how to load `@base/owl` and `dist/baseui.templates.xml`.
 
+## Bootstrap typography classes
+
+Base UI redefines the Bootstrap 5 typography classes to the shadcn typeset values
+(`src/styles/base-extensions.css`), in Be Vietnam Pro. Use plain Bootstrap markup:
+
+| Element / class | Result |
+| --- | --- |
+| `h1` / `.h1` ... `h4` / `.h4` | 1.75rem, 1.25rem, 1.125rem, 1rem; weight 600; line-height 1.3 to 1.5 |
+| `h5` / `.h5`, `h6` / `.h6` | 0.875rem / 0.8125rem, weight 500, muted; `h6` is uppercase with 0.08em tracking |
+| `.display-1` ... `.display-6` | Bootstrap sizes, weight 600, line-height 1.2 |
+| `.lead`, `.small`, `mark`, `del`, `abbr[title]` | muted lead text, `--b-text-sm`, shadcn highlight, muted strike-through, dotted underline |
+| `blockquote` / `.blockquote` | 2px start border, 1em inline padding, inherited size |
+| `hr`, `dt`, `dd`, `code`, `pre`, `kbd`, `caption` | shadcn rule, weights, muted-background code, keycap border |
+
+Bootstrap's bottom-margin rhythm is unchanged. For the shadcn flow model (margin-top only,
+1.25em between blocks, 1.75 line-height, styled lists, links and tables) wrap prose in
+`class="b-typeset"`; tune with `--b-typeset-flow` and `--b-typeset-leading`.
+
 ## Static component
 
 ```base-ui
@@ -94,6 +113,6 @@ See [Base Components](/examples/blocks.html#/docs/guide/owl-components) for how
 <span b-ui="typography" b-att-variant="code">baseui</span>
 ```
 
-Options: `b-att-variant="body|lead|muted|code|kbd"`.
+Options: `b-att-variant="body|lead|muted|code|kbd|h1|h2|h3|h4|blockquote|small|list"` (static markup keeps its own element, so write `<h2 b-ui="typography" b-att-variant="h2">`; the variant only adds the class).
 
 Accessibility: choose semantic HTML elements first, then add the Base UI typography attributes for styling.

package/docs/icons.md

@@ -22,7 +22,7 @@ Load the normal the Base UI assets. No separate icon script is required.
 <script src="https://cdn.jsdelivr.net/npm/@thebase/ui@latest/dist/baseui.min.js" defer></script>
 ```
 
-`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.6`, 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.
+`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.2.0`, 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.
 
 The build publishes every Lucide SVG to `dist/icons/lucide/` and writes the generated icon manifest to `dist/icons/lucide.json`.
 

package/docs/installation.md

@@ -4,7 +4,7 @@ See the [Usage Guide](usage-guide.md) for the end-to-end integration path (choos
 
 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.
 
-The snippets below use the `@latest` tag for readability. Pin an exact version instead (e.g. `@1.1.6`, 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.
+The snippets below use the `@latest` tag for readability. Pin an exact version instead (e.g. `@1.2.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.
 
 ## Base component install (recommended)
 
@@ -43,7 +43,7 @@ For static HTML, a server-rendered page, or a Base HUB website page that has no
 
 Bootstrap 5 is the bundled baseline CSS framework, and its JS bundle now drives the Base UI's interactive components directly.
 
-`@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.6`, or `@1` to take only non-breaking updates) instead of `@latest` for production.
+`@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.2.0`, or `@1` to take only non-breaking updates) instead of `@latest` for production.
 
 For npm/self-hosted usage:
 

package/docs/owl-components.md

@@ -55,7 +55,7 @@ Everything — the static `b-ui` runtime, the Owl framework, every Base componen
 </script>
 ```
 
-`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.6`, or `@1` to take only non-breaking updates) in production so a new release can't change what your page loads.
+`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.2.0`, or `@1` to take only non-breaking updates) in production so a new release can't change what your page loads.
 
 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.
 

package/docs/runtime-api.md

@@ -38,8 +38,8 @@ Mounted components dispatch lifecycle events on their root element:
 ```js
 import { cn } from "@thebase/ui";
 
-cn("btn", isActive && "active", ["bu-button", className]);
-// "btn active bu-button my-class" (when isActive is truthy and className is "my-class")
+cn("btn", isActive && "active", ["b-button", className]);
+// "btn active b-button my-class" (when isActive is truthy and className is "my-class")
 ```
 
 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.

package/docs/theming.md

@@ -13,6 +13,36 @@ thebase.theme.set("dark");
 thebase.theme.set({ primary: "#0057d8", radius: "0.5rem" });
 ```
 
+## Make your own theme
+
+`dist/baseui.min.css` is the only stylesheet an app loads; it already includes the default light and dark themes. A custom theme is two small files, `baseui-light.css` and `baseui-dark.css` (readable copies in `dist/themes/`, minified `.min.css` versions beside them), loaded after it.
+
+1. Build one visually in the **theme creator** (the **Theme** tab of the examples app (`examples/index.html#/theme`)): pick a base colour, accent and radius, preview Base UI live in light or dark, then download `baseui-light.css` and `baseui-dark.css`.
+2. Or download the two files from `dist/themes/` (or copy `src/themes/`) and edit the values by hand.
+3. Load them after the Base UI stylesheet:
+
+```html
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@thebase/ui@1.2.0/dist/baseui.min.css">
+<link rel="stylesheet" href="/css/baseui-light.css">
+<link rel="stylesheet" href="/css/baseui-dark.css">
+```
+
+Each file declares the same variables on its own selector (`light`: `:root`, `[b-theme="light"]`, `.light`; `dark`: `[b-theme="dark"]`, `.dark`), so loading yours after the defaults replaces them. Edit only the values; keep the selectors and variable names. The tokens you will usually change:
+
+| Token | Controls |
+| --- | --- |
+| `--b-background`, `--b-foreground` | Page background and text |
+| `--b-surface`, `--b-card`, `--b-popover` (+ `-foreground`) | Raised surfaces |
+| `--b-primary`, `--b-primary-rgb`, `--b-primary-foreground` | Primary buttons, links, active states (keep `-rgb` in sync with the colour) |
+| `--b-secondary`, `--b-muted`, `--b-accent` (+ `-foreground`) | Subtle fills and hover states |
+| `--b-danger`, `--b-success`, `--b-warning`, `--b-info` (each with `-rgb` and `-foreground`) | Error/destructive, success, warning and info states: buttons (`.btn-success` …), badges, alerts, Bootstrap `text-*`/`bg-*` helpers |
+| `--b-border`, `--b-input`, `--b-ring` | Borders, field outlines, focus ring |
+| `--b-chart-1` … `--b-chart-5`, `--b-sidebar-*` | Charts and the sidebar |
+| `--base-radius` | Corner roundness; every `--b-radius-*` step is derived from it |
+| `--b-overlay` | Backdrop behind dialogs and sheets |
+
+To change a few values without a full theme, override them on `:root` / `[b-theme="dark"]` in your own CSS, or at runtime with `thebase.theme.set({ primary: "#0057d8", radius: "0.5rem" })`.
+
 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.
 
 For a reusable theme toggle with persistence, URL override, button-label sync, and iframe preview sync, import the theme helper:
@@ -38,7 +68,7 @@ For a reusable theme toggle with persistence, URL override, button-label sync, a
 </script>
 ```
 
-`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.6`, or `@1` to take only non-breaking updates) instead of `@latest` for production. Npm/bundler consumers can import the same API from `@thebase/ui`.
+`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.2.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`.
 
 For a ready-made icon button, use the Base UI component instead of wiring your own click handler:
 
@@ -50,6 +80,6 @@ The documentation and example pages use the same theme infrastructure. Owl examp
 
 ## Design tokens
 
-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.
+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)` (set in the theme files), 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.
 
-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.
+Because the Base UI ships Bootstrap's stock precompiled CSS, most `.btn-*`/badge colors are not driven by `--bs-*` variables directly — `src/styles/base-extensions.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 `b-badge-*` classes (`src/components/badge/badge.css`) instead of Bootstrap's `text-bg-*`, which hardcode non-overridable colors.

package/docs/usage-guide.md

@@ -32,7 +32,7 @@ Save this as an `.html` file and open it — no build step, no server required.
 </html>
 ```
 
-`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.6`, 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.
+`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.2.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.
 
 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.
 
@@ -63,7 +63,7 @@ Both APIs come from the same package and the same CSS file, and can be mixed on
 </script>
 ```
 
-`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.6`, or `@1` to take only non-breaking updates) instead of `@latest` for production.
+`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.2.0`, or `@1` to take only non-breaking updates) instead of `@latest` for production.
 
 ```html
 <script type="module">
@@ -103,7 +103,7 @@ Two rules that account for most integration failures — see [Base Components](o
 <script src="https://cdn.jsdelivr.net/npm/@thebase/ui@latest/dist/baseui.min.js" defer></script>
 ```
 
-`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.6`, or `@1` to take only non-breaking updates) instead of `@latest` for production.
+`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.2.0`, or `@1` to take only non-breaking updates) instead of `@latest` for production.
 
 **Option B — npm (bundler-based apps: Vite, webpack, etc.):**
 
@@ -120,7 +120,7 @@ import "@thebase/ui"; // side-effect import: registers window.thebase and auto-m
 
 Rule that applies to both options:
 
-- Production pages must use a pinned version (e.g. `@thebase/ui@1.1.6` or `@thebase/ui@1`), never `@latest`.
+- Production pages must use a pinned version (e.g. `@thebase/ui@1.2.0` or `@thebase/ui@1`), never `@latest`.
 
 Mount markup:
 
@@ -219,7 +219,7 @@ export default {
   },
   serviceWorker: {
     cacheName: "my-app-cache-v1",
-    cdnVersion: "1.1.6", // pin to match the importmap in index.html
+    cdnVersion: "1.2.0", // pin to match the importmap in index.html
     appFiles: ["/app.css", "/app.js", "/app.xml", "/favicon.svg", "/icons/icon-192.png", "/icons/icon-512.png"],
   },
 };
@@ -227,9 +227,17 @@ export default {
 
 ```sh
 npx create-baseui-app pwa . --config baseui.pwa.config.js
-# writes ./manifest.webmanifest and ./sw.js
+# writes ./manifest.webmanifest, ./sw.js, ./sw-register.js and ./version.json
 ```
 
+**Auto-reload on a new deploy.** The generated `sw.js` fetches `version.json` (never cached) on activate, on
+every page navigation and when the page posts `"check-version"`. When the value differs from the last one it
+saw, it wipes the caches, re-precaches the app shell and posts `"version-changed"` to every open page.
+`sw-register.js` (load it with `<script type="module" src="/sw-register.js">`, replacing your own
+`serviceWorker.register`) registers the worker, reloads on that message and re-checks when the tab becomes
+visible. `version.json` is a content hash of `sw.js`, the manifest and every `appFiles` entry found under
+`<path>`, so re-run the `pwa` command as the last step of every deploy.
+
 Re-run the command whenever `appFiles`, the CDN pin, or manifest fields change — both output files are
 fully regenerated, never hand-patched. Only `manifest.name`, `serviceWorker.cacheName`, and
 `serviceWorker.cdnVersion` are required; everything else (icons, theme/background color, display
@@ -239,6 +247,15 @@ files are kept, so your own icons win). Serving icons from another folder? Set `
 service worker) and `manifestUrl` (service worker) in the config. See
 `dist/types/pwa.d.ts` for the full config shape.
 
+**Default in every scaffolded project.** `create-baseui-app create|init` projects ship
+`plugins: [baseuiPwa({ name })]` (from `@thebase/ui/vite`) in `vite.config.js`. Each `vite build` then emits
+`manifest.webmanifest`, `sw.js`, `sw-register.js`, `version.json` (hash of the built bundle) and the default
+icons into `dist/`, and injects the manifest link, theme color and register script into every page — no
+config file, no extra command. Every deploy with changed code therefore reloads open pages automatically.
+`vite dev` is untouched. Options: `name`, `description`, `themeColor` and the other manifest fields, plus
+`cdnVersion` (only for apps that load BaseUI from the CDN). For an existing project, add the plugin to
+`vite.config.js` (`convert` prints this hint). Remove the plugin to opt out.
+
 ## 6. Copy a block instead of assembling from primitives
 
 For common layouts (dashboard shells, sidebars, login/signup forms, charts), copy a ready-made block from the gallery instead of composing primitives by hand: [Blocks](blocks.md).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thebase/ui",
-  "version": "1.1.6",
+  "version": "1.2.0",
   "description": "CDN-installable Bootstrap 5 UI component library.",
   "type": "module",
   "main": "./dist/baseui.min.js",
@@ -34,6 +34,10 @@
       "types": "./dist/types/pwa.d.ts",
       "import": "./dist/baseui.pwa.esm.js"
     },
+    "./vite": {
+      "types": "./dist/types/vite.d.ts",
+      "import": "./dist/baseui.vite.esm.js"
+    },
     "./dist/baseui.templates.xml": "./dist/baseui.templates.xml"
   },
   "files": [
@@ -47,6 +51,7 @@
     "dist/baseui.apidoc.esm.js",
     "dist/baseui.apidoc.min.js",
     "dist/baseui.pwa.esm.js",
+    "dist/baseui.vite.esm.js",
     "dist/baseui.templates.xml",
     "dist/icons",
     "dist/pwa-icons",

package/docs/components/input-group.md

@@ -1,68 +0,0 @@
-# Input Group
-
-## Base component
-
-```js
-import {
-  InputGroup,
-  InputGroupAddon,
-  InputGroupButton,
-  InputGroupInput,
-  InputGroupText,
-  InputGroupTextarea,
-} from "@thebase/ui";
-```
-
-```base-ui
-<div class="d-flex flex-column gap-4 w-100" style="max-width: 28rem">
-  <InputGroup label="'Search'" supportingText="'Search the docs'">
-    <InputGroupInput/>
-    <InputGroupAddon align="'inline-end'">
-      <Icon name="'search'"/>
-    </InputGroupAddon>
-  </InputGroup>
-
-  <InputGroup label="'Website'">
-    <InputGroupInput placeholder="'https://'"/>
-    <InputGroupAddon align="'inline-end'">
-      <InputGroupButton>Search</InputGroupButton>
-    </InputGroupAddon>
-  </InputGroup>
-
-  <InputGroup label="'Message'">
-    <InputGroupTextarea rows="3"/>
-    <InputGroupAddon align="'block-end'">
-      <InputGroupText>0/280</InputGroupText>
-      <InputGroupButton variant="'default'" className="'ms-auto'">Send</InputGroupButton>
-    </InputGroupAddon>
-  </InputGroup>
-</div>
-```
-
-| Component | Prop | Type | Notes |
-| --- | --- | --- | --- |
-| `InputGroup` | `className` | `String` | optional |
-| `InputGroup` | `label`, `labelBackground`, `supportingText`, `useTip`, `errorText`, `invalid` | `String` / `Boolean` | Material-style outlined group, same label as [Input](/examples/blocks.html#/docs/components/input): the label floats onto the border once the control is focused or filled. Also inherited from a parent `Field`. |
-| `InputGroupAddon` | `align` | `String` | `inline-start` (default), `inline-end`, `block-start`, `block-end` |
-| `InputGroupButton` | `variant` | `String` | `default`, `destructive`, `outline`, `secondary`, `ghost` (default), `link` |
-| `InputGroupButton` | `size` | `String` | `xs` (default), `icon-xs`, `sm`, `icon-sm` |
-| `InputGroupText` | `className` | `String` | optional |
-| `InputGroupInput` | `type`, `value`, `placeholder`, `disabled`, `readonly`, `invalid` | mixed | input control |
-| `InputGroupTextarea` | `value`, `placeholder`, `rows`, `disabled`, `readonly`, `invalid`, `resize` | mixed | textarea control |
-
-See [Base Components](/examples/blocks.html#/docs/guide/owl-components) for how to load `@base/owl` and `dist/baseui.templates.xml`.
-
-## Static component
-
-```base-ui
-<div b-ui="input-group">
-  <div b-input-group-addon b-att-align="inline-start">
-    <span b-input-group-text>@</span>
-  </div>
-  <input b-ui="input" placeholder="username">
-</div>
-```
-
-Use `b-att-align="inline-start|inline-end|block-start|block-end"` on `b-input-group-addon`.
-Use `b-input-group-button` with `b-att-size="xs|icon-xs|sm|icon-sm"` and
-`b-att-variant="default|destructive|outline|secondary|ghost|link"` for embedded actions.