@thebase/ui 1.1.6 → 1.2.0

package/CHANGELOG.md

@@ -2,7 +2,53 @@
 
 All notable changes to this project are documented in this file.
 
-## [Unreleased]
+## [v1.2.0] - 2026-10-29
+
+### Breaking
+- Component CSS classes renamed from the `bu-` prefix to `b-` (e.g. `bu-button` -> `b-button`, `bu-dialog-title` -> `b-dialog-title`), and the matching custom properties from `--bu-*` to `--b-*` (e.g. `--bu-badge-bg` -> `--b-badge-bg`, `--bu-code-*` -> `--b-code-*`). Update any app CSS, markup (`class="bu-..."`) or selectors that target the old names. Helper attributes (`b-ui`, `b-att-*`, `b-tab`, ...) are unchanged; `.b-x` class selectors never match `[b-x]` attributes. Applied with `scripts/rename-bu-prefix.mjs`.
+
+### Changed (themes)
+- New status colour tokens `--b-success`, `--b-warning`, `--b-info` (each with `-rgb` and `-foreground`) in both theme files, alongside the existing `--b-danger`; bridged to Bootstrap's `--bs-success|warning|info` (+ `-bg-subtle`, `-border-subtle`, `-text-emphasis`) so badges, alerts and Bootstrap helpers follow them, with `.btn-success|warning|info` restyled to match. The Theme tab can customise all four status colours.
+- `src/styles/baseui.css` is removed. All Base UI styles and shared tokens (spacing/type/radius scales, shadows, `--bs-*` bridge, button variants, font) now live in `src/styles/base-extensions.css`; `base.min.css` stays stock Bootstrap 5. Colour tokens, `--base-radius` and `--b-overlay` are defined only in `src/themes/baseui-light.css` and `baseui-dark.css`, which users can download and edit. `dist/themes/baseui-*.css` are now readable copies; minified versions are `baseui-*.min.css` (also listed in the registry).
+- `docs/theming.md` documents the new layout and how to build a custom theme.
+
+### Fixed (contrast)
+- `Switch`: the thumb was Bootstrap's fixed-colour SVG (25% black unchecked, white checked), nearly invisible in dark mode, and the pure Base `<Switch>` (no `b-ui` attribute) was not reached by any of the component's CSS. Styles now target `.b-switch`, and the thumb is drawn from theme tokens (`--b-muted-foreground` unchecked, `--b-primary-foreground` checked) with a visible track edge, focus ring uses `--b-ring`.
+- Light `--b-muted-foreground` is `neutral-600` (was `neutral-500`, 4.35:1 on muted fills); light `--b-danger` is `red-700` (the old red was under 4.5:1 as text on its own tint). Status text (`alert-success|warning`, `badge` success/warning/info/danger, clipboard "copied") uses `-text-emphasis` tones that clear 4.5:1. Disabled pagination items (the "..." ellipsis) no longer drop to 55% opacity.
+- Themes now set `--bs-body-bg-rgb`, `--bs-secondary-bg-rgb`, `--bs-tertiary-bg-rgb` and `--bs-emphasis-color-rgb`, so Bootstrap's `bg-body`, `bg-body-secondary`, `bg-body-tertiary` and `text-body-emphasis` follow the Base UI theme (and custom themes from the Theme tab) in light and dark.
+- `Button` corner radius uses `--b-radius-md` (was a fixed 8px spacing value), so it follows `--base-radius` and the Theme tab radius setting; identical at the default radius. `Switch` is laid out as a two-column grid so the track, label and helper text align in the pure Base and static versions.
+- Theme tab: colour selection buttons are 1.5rem.
+
+### Added
+- Theme tab in the examples app (`examples/index.html#/theme`): choose base colour, accent and radius, preview Base UI live in light/dark, then download `baseui-light.css` and `baseui-dark.css`.
+- `@thebase/ui/vite`: `baseuiPwa()` Vite plugin. Scaffolded projects (`create`, `init`) now build as PWAs by default: each `vite build` emits `manifest.webmanifest`, `sw.js`, `sw-register.js`, `version.json` (bundle hash) and default icons, and open pages reload when a deploy changes the code.
+- `@thebase/ui/pwa`: generated service workers poll `version.json` (activate, navigation, `check-version` message) and post `version-changed` after wiping caches; new `buildVersionJson` and `buildServiceWorkerRegister`; `cdnVersion` is now optional. `create-baseui-app pwa` also writes `sw-register.js` and `version.json`.
+
+### Changed
+- Renamed `src/styles/bootstrap.min.css` (+ `.map`) to `base.min.css` and `bootstrap-extensions.css` to `base-extensions.css`; `scripts/build.mjs` now loads every `src/styles/base*.css` (vendored Bootstrap, extensions, then the rest alphabetically, e.g. `baseui.css`). `dist/baseui.min.css` is byte-identical.
+- `Accordion`, `DropdownMenu` items, `Tabs` and `NavigationMenu` now also carry Bootstrap classes (`accordion*`, `dropdown-item`/`-header`/`-divider`, `nav`/`nav-link`) alongside their `b-*` classes, in both pure Base templates and static adapters; `b-*` class names and selectors are unchanged. `Toast` and `Carousel` already used Bootstrap classes.
+- `Progress` now renders Bootstrap `.progress` / `.progress-bar` (plus `b-progress*`); its CSS only sets the value-driven fill width and `--bs-progress-height`.
+- `base-extensions.css`: Bootstrap's own `.accordion`, `.dropdown-menu`, `.nav`/`.nav-tabs`/`.nav-pills`, `.navbar`, `.progress`, `.list-group`, `.toast`, `.input-group-text`, `.form-label`/`.form-text`/`.form-range`/feedback, `.placeholder`, `.btn-close`, carousel and `.img-thumbnail` are now restyled to the shadcn look via their `--bs-*` variables, so plain Bootstrap markup matches Base UI.
+- `Badge` and `Alert` CSS now set their look through Bootstrap's own `--bs-badge-*` / `--bs-alert-*` variables (size, weight, padding, radius, colour, border) instead of redeclaring `padding`, `font-size`, `color` and `border-color` directly. Badge variants set `--bs-badge-color` plus the new `--b-badge-bg`/`--b-badge-border`. Class names, markup and rendered look are unchanged; `b-badge-*` and `b-alert-*` stay the public API.
+
+## [v1.1.7] - 2026-10-18
+
+### Added
+- `CodeEditor` (pure Base): code box with line numbers, syntax colouring, Tab/Enter indent handling and a copy button, for the language named by the `codeLang` prop (go, c, cpp, java, javascript, typescript, python, rust, sql, json, yaml, css, html, lua, and more). Code can be loaded from a URL (`src`) or a local file (`upload`), with the language picked from the file extension. An **Edit/View** button toggles reading and editing mode (`readonly` sets the starting mode, `toggle="false"` hides the button). A **Format** button (and `Shift+Alt+F`) re-indents code per language (JSON is pretty-printed; bracket languages, Lua, HTML and XML re-indented). Syntax colouring follows `codeLang` (keywords, builtins, function calls, types, strings, numbers, comments, HTML/XML tags, attributes and entities, JSON/YAML keys, CSS properties and colours, annotations, `$variables`) with themeable `--bu-code-*` colours for light and dark. Built from `Badge`, `ClipboardButton`, `Kbd`, `Button`, `Alert` and `Spinner`; docs at `docs/components/code-editor.md` and a Blocks gallery demo (`examples/blocks/code-editor-demo.html`).
+- `Input` accepts `start` and `end` slots, and `Textarea` accepts `start`, `end` and `footer` slots, for text, icons, `Kbd` and `Button` inside the field.
+
+### Changed
+- `Shell` and `Sidebar` switch to the off-canvas mobile drawer below 992px (was 768px), so tablets get the drawer.
+- `NavigationMenu` scrolls horizontally under 768px with an edge fade and no scrollbar.
+- `Markdown` gives task-list checkboxes an accessible name and larger touch targets on coarse pointers.
+- `useTip` tooltip icon now sits right after the label text (circle-question-mark) instead of floating at the field edge.
+- Docs and examples: production pin examples now use `@1.1.7`; `qr-page` service-worker cache bumped to `2qr-cache-v14`.
+
+### Fixed
+- `Chart` bars no longer collapse to 2px lines: the plot has a definite height and each bar is positioned from the bottom of its column.
+
+### Removed
+- **Breaking:** `InputGroup`, `InputGroupAddon`, `InputGroupButton`, `InputGroupText`, `InputGroupInput` and `InputGroupTextarea`, the static `b-ui="input-group"` adapter, and the `input-group` docs page and demo. Migrate to `Input`/`Textarea` slots: `<Input label="'Search'"><t t-set-slot="end"><Button size="'xs'">Go</Button></t></Input>`; a textarea with a send bar becomes `<Textarea><t t-set-slot="footer">…</t></Textarea>`.
 
 ## [v1.1.6] - 2026-10-17
 
@@ -10,6 +56,9 @@ All notable changes to this project are documented in this file.
 - `useTip` prop (`Number`, default `0`) on `Input`, `Textarea`, `NativeSelect`, `Combobox`, `DatePicker`, `Select`, `InputGroup` and `Field`: set to `1` to hide the helper text under the field and show it in a tooltip on an info icon instead. Error text always stays visible. See the matching pages under `docs/components/`.
 
 ### Changed
+- Renamed `src/styles/bootstrap.min.css` (+ `.map`) to `base.min.css` and `bootstrap-extensions.css` to `base-extensions.css`; `scripts/build.mjs` now loads every `src/styles/base*.css` (vendored Bootstrap, extensions, then the rest alphabetically, e.g. `baseui.css`). `dist/baseui.min.css` is byte-identical.
+- `Accordion`, `DropdownMenu` items, `Tabs` and `NavigationMenu` now also carry Bootstrap classes (`accordion*`, `dropdown-item`/`-header`/`-divider`, `nav`/`nav-link`) alongside their `bu-*` classes, in both pure Base templates and static adapters; `bu-*` class names and selectors are unchanged. `Toast` and `Carousel` already used Bootstrap classes.
+- `Progress` now renders Bootstrap `.progress` / `.progress-bar` (plus `bu-progress*`); its CSS only sets the value-driven fill width and `--bs-progress-height`.
 - Focus ring is unified across form controls: `Checkbox`, `Switch`, `RadioGroup`, `InputOTP`, `Select` and the outlined fields now use `--b-primary` as border plus a 1px `--b-primary` ring, matching `Input`.
 - `Tabs`: trigger content is packed to the start (and to the end in right-to-left text).
 - Docs and examples: production pin examples now use `@1.1.6`; `qr-page` service-worker cache bumped to `2qr-cache-v13`.
@@ -22,6 +71,9 @@ All notable changes to this project are documented in this file.
 - `Field` accepts `label`, `description`, `error` and `invalid` and hands them to the control inside it.
 
 ### Changed
+- Renamed `src/styles/bootstrap.min.css` (+ `.map`) to `base.min.css` and `bootstrap-extensions.css` to `base-extensions.css`; `scripts/build.mjs` now loads every `src/styles/base*.css` (vendored Bootstrap, extensions, then the rest alphabetically, e.g. `baseui.css`). `dist/baseui.min.css` is byte-identical.
+- `Accordion`, `DropdownMenu` items, `Tabs` and `NavigationMenu` now also carry Bootstrap classes (`accordion*`, `dropdown-item`/`-header`/`-divider`, `nav`/`nav-link`) alongside their `bu-*` classes, in both pure Base templates and static adapters; `bu-*` class names and selectors are unchanged. `Toast` and `Carousel` already used Bootstrap classes.
+- `Progress` now renders Bootstrap `.progress` / `.progress-bar` (plus `bu-progress*`); its CSS only sets the value-driven fill width and `--bs-progress-height`.
 - `Field` no longer renders its own label and error text; the control inside draws them. Use `FieldLabel` / `FieldError` for checkbox-style fields.
 - Docs and examples: blocks (`field`, `textarea`, `date-picker`, `input-group`, `select`, `combobox`, `native-select`, `hover-card`, `login-03/04`, `signup-03/04`) use the `label` props; production pin examples now use `@1.1.5`; `qr-page` builds its VietQR/QR payload from CDN modules instead of vendored copies.
 - `package.json` description no longer mentions Owl.
@@ -31,6 +83,9 @@ All notable changes to this project are documented in this file.
 Backfilled entry (1.1.4 shipped without release notes).
 
 ### Changed
+- Renamed `src/styles/bootstrap.min.css` (+ `.map`) to `base.min.css` and `bootstrap-extensions.css` to `base-extensions.css`; `scripts/build.mjs` now loads every `src/styles/base*.css` (vendored Bootstrap, extensions, then the rest alphabetically, e.g. `baseui.css`). `dist/baseui.min.css` is byte-identical.
+- `Accordion`, `DropdownMenu` items, `Tabs` and `NavigationMenu` now also carry Bootstrap classes (`accordion*`, `dropdown-item`/`-header`/`-divider`, `nav`/`nav-link`) alongside their `bu-*` classes, in both pure Base templates and static adapters; `bu-*` class names and selectors are unchanged. `Toast` and `Carousel` already used Bootstrap classes.
+- `Progress` now renders Bootstrap `.progress` / `.progress-bar` (plus `bu-progress*`); its CSS only sets the value-driven fill width and `--bs-progress-height`.
 - Tabs, Toast and style-prop rollout; internal `baseui` class prefix renamed to `bu`; docs and memory synced.
 
 ## [v1.1.3] - 2026-10-13
@@ -44,6 +99,9 @@ Backfilled entry (1.1.4 shipped without release notes).
 - Build: ApiDoc's language logos are copied to `dist/apidoc/img/` and published (`dist/apidoc` added to `package.json` `files`).
 
 ### Changed
+- Renamed `src/styles/bootstrap.min.css` (+ `.map`) to `base.min.css` and `bootstrap-extensions.css` to `base-extensions.css`; `scripts/build.mjs` now loads every `src/styles/base*.css` (vendored Bootstrap, extensions, then the rest alphabetically, e.g. `baseui.css`). `dist/baseui.min.css` is byte-identical.
+- `Accordion`, `DropdownMenu` items, `Tabs` and `NavigationMenu` now also carry Bootstrap classes (`accordion*`, `dropdown-item`/`-header`/`-divider`, `nav`/`nav-link`) alongside their `bu-*` classes, in both pure Base templates and static adapters; `bu-*` class names and selectors are unchanged. `Toast` and `Carousel` already used Bootstrap classes.
+- `Progress` now renders Bootstrap `.progress` / `.progress-bar` (plus `bu-progress*`); its CSS only sets the value-driven fill width and `--bs-progress-height`.
 - PWA toolkit: the default precache list no longer includes `/favicon.svg`; it precaches the default icon files instead.
 - `npm run dev` server: serves `.ico` as `image/x-icon` and `.mjs` as JavaScript.
 - Docs and examples: production pin examples now use `@1.1.3`; component counts in `docs/owl-components.md` and `docs/registry.md` now say 74.
@@ -65,6 +123,9 @@ Backfilled entry (1.1.2 shipped without release notes).
 - Examples: `examples/analytics/` contains a Base UI analytics dashboard plus runnable Go Fiber and FastAPI sample backends (in-memory store, `GET /api/stats`, `DEMO_SEED=1` demo data). The landing page has an Analytics section, and the docs nav lists the Analytics guide.
 
 ### Changed
+- Renamed `src/styles/bootstrap.min.css` (+ `.map`) to `base.min.css` and `bootstrap-extensions.css` to `base-extensions.css`; `scripts/build.mjs` now loads every `src/styles/base*.css` (vendored Bootstrap, extensions, then the rest alphabetically, e.g. `baseui.css`). `dist/baseui.min.css` is byte-identical.
+- `Accordion`, `DropdownMenu` items, `Tabs` and `NavigationMenu` now also carry Bootstrap classes (`accordion*`, `dropdown-item`/`-header`/`-divider`, `nav`/`nav-link`) alongside their `bu-*` classes, in both pure Base templates and static adapters; `bu-*` class names and selectors are unchanged. `Toast` and `Carousel` already used Bootstrap classes.
+- `Progress` now renders Bootstrap `.progress` / `.progress-bar` (plus `bu-progress*`); its CSS only sets the value-driven fill width and `--bs-progress-height`.
 - Docs and examples: production pin examples now use `@1.1.1`.
 - `npm run dev` server: folder URLs serve their `index.html`, and `.go`/`.py`/`.mod` sources are served as text.
 
@@ -75,6 +136,9 @@ Backfilled entry (1.1.2 shipped without release notes).
 - The browser global is now `window.thebase`, holding the same object as before (`version`, `register`, `component`, `mount`, `mountAll`, `destroy`, `theme`, `icons`). If a page script creates `window.thebase` before a Base UI bundle loads, the runtime adds its methods to that object instead of replacing it.
 
 ### Changed
+- Renamed `src/styles/bootstrap.min.css` (+ `.map`) to `base.min.css` and `bootstrap-extensions.css` to `base-extensions.css`; `scripts/build.mjs` now loads every `src/styles/base*.css` (vendored Bootstrap, extensions, then the rest alphabetically, e.g. `baseui.css`). `dist/baseui.min.css` is byte-identical.
+- `Accordion`, `DropdownMenu` items, `Tabs` and `NavigationMenu` now also carry Bootstrap classes (`accordion*`, `dropdown-item`/`-header`/`-divider`, `nav`/`nav-link`) alongside their `bu-*` classes, in both pure Base templates and static adapters; `bu-*` class names and selectors are unchanged. `Toast` and `Carousel` already used Bootstrap classes.
+- `Progress` now renders Bootstrap `.progress` / `.progress-bar` (plus `bu-progress*`); its CSS only sets the value-driven fill width and `--bs-progress-height`.
 - Docs: production pin examples now use `@1.1.0`. `docs/installation.md` and `docs/registry.md` list the analytics bundles and the `@thebase/ui/analytics` export.
 
 ### Deprecated
@@ -85,6 +149,9 @@ Backfilled entry (1.1.2 shipped without release notes).
 First stable release. From here on the package follows [Semantic Versioning](https://semver.org/) — see the [Versioning policy](README.md#versioning-policy) for what counts as the public API and what each version bump means. No API changes versus v0.0.12 beyond the fixes below; upgrading from 0.0.12 needs no code changes.
 
 ### Changed
+- Renamed `src/styles/bootstrap.min.css` (+ `.map`) to `base.min.css` and `bootstrap-extensions.css` to `base-extensions.css`; `scripts/build.mjs` now loads every `src/styles/base*.css` (vendored Bootstrap, extensions, then the rest alphabetically, e.g. `baseui.css`). `dist/baseui.min.css` is byte-identical.
+- `Accordion`, `DropdownMenu` items, `Tabs` and `NavigationMenu` now also carry Bootstrap classes (`accordion*`, `dropdown-item`/`-header`/`-divider`, `nav`/`nav-link`) alongside their `bu-*` classes, in both pure Base templates and static adapters; `bu-*` class names and selectors are unchanged. `Toast` and `Carousel` already used Bootstrap classes.
+- `Progress` now renders Bootstrap `.progress` / `.progress-bar` (plus `bu-progress*`); its CSS only sets the value-driven fill width and `--bs-progress-height`.
 - Docs: production pin examples now use `@1.0.0`, or the `@1` major range to receive non-breaking updates. `docs/owl-components.md` documents the global component fallback below, and `docs/components/button.md` now lists `Button`'s `unstyled`, `attrs`, and `getRef` props.
 - Internal: shared prop and overlay helpers replace per-component copies (`optional()`/`slotProps` prop declarations, controlled-open and Bootstrap Collapse hooks, one binder for the static dialog/sheet/drawer overlays, one checkbox/radio enhancer). Every Base component keeps exactly the same props, and every static adapter keeps the same attributes, events, and `element.BaseUI*` handles.
 
@@ -95,6 +162,9 @@ First stable release. From here on the package follows [Semantic Versioning](htt
 ## [v0.0.12] - 2026-09-13
 
 ### Changed
+- Renamed `src/styles/bootstrap.min.css` (+ `.map`) to `base.min.css` and `bootstrap-extensions.css` to `base-extensions.css`; `scripts/build.mjs` now loads every `src/styles/base*.css` (vendored Bootstrap, extensions, then the rest alphabetically, e.g. `baseui.css`). `dist/baseui.min.css` is byte-identical.
+- `Accordion`, `DropdownMenu` items, `Tabs` and `NavigationMenu` now also carry Bootstrap classes (`accordion*`, `dropdown-item`/`-header`/`-divider`, `nav`/`nav-link`) alongside their `bu-*` classes, in both pure Base templates and static adapters; `bu-*` class names and selectors are unchanged. `Toast` and `Carousel` already used Bootstrap classes.
+- `Progress` now renders Bootstrap `.progress` / `.progress-bar` (plus `bu-progress*`); its CSS only sets the value-driven fill width and `--bs-progress-height`.
 - **Breaking**: `Tabs` restyled to match [shadcn/base's Tabs](https://ui.shadcn.com/docs/components/base/tabs) — `TabsList` is now a segmented pill control on a muted background by default (new `variant="'line'"`/`b-att-variant="line"` opts into a transparent underline list instead), and `TabContent`/`b-panel` render as bare panels with no default `Card` border/background (that chrome is now opt-in via `className` on `TabsContainer` or the consumer's own wrapper). New `orientation` prop (`"horizontal"`/`"vertical"`) on the pure Base `Tabs` puts `TabsList` beside `TabsContainer` instead of above it.
 - Internal: every pure Base component's raw `<button>` (dialog, sheet, pwa, attachment, carousel, collapsible, calendar, dropdown-menu, popover, data-table, accordion, tabs, alert, input-group, sidebar, clipboard-button, theme-button, shell, questionnaire, alert-dialog, drawer, select, toggle, toggle-group) now renders through the shared `Button` component instead of hand-written markup. `Button` gained `unstyled` (opt out of forced `btn`/variant classes for components with their own bespoke styling), `attrs` (pass-through object for one-off attributes with no first-class prop), and `getRef` (reports the mounted root element for callers that need direct DOM access) to support this. No public prop-level API changes for any consuming component.
 
@@ -108,6 +178,9 @@ First stable release. From here on the package follows [Semantic Versioning](htt
 - Public `cn(...classNames)` and `mergeStyle(...)` helpers, exported from `@thebase/ui` (and `BaseUIBundle.cn`/`BaseUIBundle.mergeStyle`) for consumers building their own class lists or inline styles. Documented in `docs/runtime-api.md`.
 
 ### Changed
+- Renamed `src/styles/bootstrap.min.css` (+ `.map`) to `base.min.css` and `bootstrap-extensions.css` to `base-extensions.css`; `scripts/build.mjs` now loads every `src/styles/base*.css` (vendored Bootstrap, extensions, then the rest alphabetically, e.g. `baseui.css`). `dist/baseui.min.css` is byte-identical.
+- `Accordion`, `DropdownMenu` items, `Tabs` and `NavigationMenu` now also carry Bootstrap classes (`accordion*`, `dropdown-item`/`-header`/`-divider`, `nav`/`nav-link`) alongside their `bu-*` classes, in both pure Base templates and static adapters; `bu-*` class names and selectors are unchanged. `Toast` and `Carousel` already used Bootstrap classes.
+- `Progress` now renders Bootstrap `.progress` / `.progress-bar` (plus `bu-progress*`); its CSS only sets the value-driven fill width and `--bs-progress-height`.
 - **Breaking**: every CSS custom property has been renamed from the `--baseui-*` prefix to `--b-*` (e.g. `--baseui-primary` → `--b-primary`). Aligns the token prefix with the existing `--b1`/`--b2_5` spacing scale and `[b-ui]`/`b-att-*` attribute convention. `BaseUI.theme.set()` now writes/reads `--b-*` tokens; any consumer CSS that directly referenced `--baseui-*` must update to `--b-*`.
 - **Breaking**: every component CSS class has been renamed from the `baseui-*` prefix to `bu-*` (e.g. `.baseui-alert` → `.bu-alert`), to shorten it and avoid colliding with third-party `b-*`-prefixed conventions (e.g. Buefy) while staying distinct from the `b-ui`/`b-att-*` attribute and `--b-*` token conventions. Any consumer markup, CSS, or pure Base `className` override referencing `.baseui-*` must update to `.bu-*`. The bare `.baseui` root/theme-scope class, file names, the `BaseUI` global, the `@thebase/ui` package name, and `storageKey="'baseui-theme'"` are untouched.
 - Every component's class-name string-building now goes through the shared `cn()` helper instead of ad hoc `classes.push()/join(" ")` logic; the pure Base `Toast`'s close control now composes the real `Button` component instead of a raw `<button>`.
@@ -134,6 +207,9 @@ First stable release. From here on the package follows [Semantic Versioning](htt
 - Collaboration now auto-enables when `provider` and `url` are both supplied, even without also setting `collaborative="true"` — `collaborative` explicitly `false`/unset with an incomplete provider/url pair still leaves the editor single-user.
 
 ### Changed
+- Renamed `src/styles/bootstrap.min.css` (+ `.map`) to `base.min.css` and `bootstrap-extensions.css` to `base-extensions.css`; `scripts/build.mjs` now loads every `src/styles/base*.css` (vendored Bootstrap, extensions, then the rest alphabetically, e.g. `baseui.css`). `dist/baseui.min.css` is byte-identical.
+- `Accordion`, `DropdownMenu` items, `Tabs` and `NavigationMenu` now also carry Bootstrap classes (`accordion*`, `dropdown-item`/`-header`/`-divider`, `nav`/`nav-link`) alongside their `bu-*` classes, in both pure Base templates and static adapters; `bu-*` class names and selectors are unchanged. `Toast` and `Carousel` already used Bootstrap classes.
+- `Progress` now renders Bootstrap `.progress` / `.progress-bar` (plus `bu-progress*`); its CSS only sets the value-driven fill width and `--bs-progress-height`.
 - `y-websocket` added as a runtime dependency, lazy-loaded only when `provider="websocket"` is actually selected, so `y-webrtc`-only consumers see no bundle-size change.
 
 ## [v0.0.6] - 2026-09-02
@@ -163,6 +239,9 @@ Initial documented release. The Base UI is a self-contained component library (O
 - Published `docs/*.md` and `docs/components/` inside the npm package (`package.json` `files`), plus `CHANGELOG.md`, so integration docs and per-component reference pages are reachable straight from unpkg/jsDelivr without cloning the repo. `docs/v2/` (vendored general Owl framework reference) and `docs/component-authoring.md` stay repo-only and are excluded.
 
 ### Changed
+- Renamed `src/styles/bootstrap.min.css` (+ `.map`) to `base.min.css` and `bootstrap-extensions.css` to `base-extensions.css`; `scripts/build.mjs` now loads every `src/styles/base*.css` (vendored Bootstrap, extensions, then the rest alphabetically, e.g. `baseui.css`). `dist/baseui.min.css` is byte-identical.
+- `Accordion`, `DropdownMenu` items, `Tabs` and `NavigationMenu` now also carry Bootstrap classes (`accordion*`, `dropdown-item`/`-header`/`-divider`, `nav`/`nav-link`) alongside their `bu-*` classes, in both pure Base templates and static adapters; `bu-*` class names and selectors are unchanged. `Toast` and `Carousel` already used Bootstrap classes.
+- `Progress` now renders Bootstrap `.progress` / `.progress-bar` (plus `bu-progress*`); its CSS only sets the value-driven fill width and `--bs-progress-height`.
 - Consolidated the Base UI into a single self-contained bundle: vendored Bootstrap 5 and Owl under `src/runtime`, externalized Owl into `dist/owl.js` for lean CDN bundles, and deduped disclosure/modal logic.
 - Rewrote the Markdown live-preview to mount real Base components instead of static templates.
 - Renamed Tabs sub-components and reworked the example shell (unified sidebar/shell collapse trigger, `baseui-text-xs` utility).

package/README.md

@@ -4,7 +4,7 @@ The Base UI is a CDN-installable UI kit built with Bootstrap 5 styling and Owl f
 
 Its strong points: **no build step** — every component runs straight from a CDN `<script>`/import map, nothing to compile; **modular component design** — each component is a self-contained unit you import or mark up individually, not a monolith; **vanilla JavaScript/TypeScript** — no framework lock-in, no JSX, no compiler-specific syntax to learn; and this combination makes it well suited to building **WYSIWYG website builders**, where components must mount, unmount, and re-render dynamically from user-driven markup or drag-and-drop edits rather than a fixed build-time component tree.
 
-Both APIs load straight from a CDN — jsDelivr or unpkg — no build step, no self-hosting required. 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, since `@latest` can change what your page loads the moment a new version ships. Pure Base usage:
+Both APIs load straight from a CDN — jsDelivr or unpkg — no build step, no self-hosting required. 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, since `@latest` can change what your page loads the moment a new version ships. Pure Base usage:
 
 ```html
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@thebase/ui@latest/dist/baseui.min.css">
@@ -83,15 +83,19 @@ See [Usage Guide §5b](docs/usage-guide.md) and the [PWA component](docs/compone
 
 ## Outlined fields
 
-New in 1.1.5 (1.1.6 adds `useTip` to show helper text in an info-icon tooltip): `Input`, `Textarea`, `NativeSelect`, `Combobox`, `DatePicker`, `Select` and `InputGroup` share one Material-style outlined look (`label`, `supportingText`, `errorText`, `invalid`), and `Field` passes its `label`/`description`/`error` to the control inside. See [Field](docs/components/field.md) and [Input](docs/components/input.md).
+New in 1.1.5 (1.1.6 adds `useTip` to show helper text in an info-icon tooltip): `Input`, `Textarea`, `NativeSelect`, `Combobox`, `DatePicker` and `Select` share one Material-style outlined look (`label`, `supportingText`, `errorText`, `invalid`), and `Field` passes its `label`/`description`/`error` to the control inside. See [Field](docs/components/field.md) and [Input](docs/components/input.md).
 
 ## ApiDoc
 
 New in 1.1.3: `ApiDoc` (`b-ui="apidoc"`) renders an OpenAPI 3 JSON file as browsable API docs — grouped sidebar, parameters, request bodies, responses, a Try It panel with code samples in 17 languages, and an Authorize dialog. See [ApiDoc](docs/components/apidoc.md), the `apidoc-01` block, and the live demo in [`examples/apidoc/`](examples/apidoc/).
 
+## Theming
+
+New in 1.2.0: colour tokens, `--base-radius` and `--b-overlay` live only in the downloadable `baseui-light.css` / `baseui-dark.css` themes (new `--b-success|warning|info` status tokens), and the **Theme** tab of the examples app (`examples/index.html#/theme`) builds a custom pair for you. **Breaking in 1.2.0:** the `bu-` class and `--bu-*` variable prefix is now `b-` (`bu-button` -> `b-button`); see the CHANGELOG migration note. See [Theming](docs/theming.md).
+
 ## Release notes
 
-See [CHANGELOG.md](CHANGELOG.md) for the full version history. Current version: **1.1.6**.
+See [CHANGELOG.md](CHANGELOG.md) for the full version history. Current version: **1.2.0**.
 
 ## Versioning policy
 
@@ -99,7 +103,7 @@ From 1.0.0 on, the Base UI follows [Semantic Versioning](https://semver.org/). T
 
 - Base component classes, their names, props, slots, and callback props exported from `@thebase/ui`.
 - Static markup: `b-ui`/`b-icon` names, `b-att-*` attributes, and `baseui:*` events.
-- CSS: `bu-*` class names and `--b-*` design tokens.
+- CSS: `b-*` class names and `--b-*` design tokens.
 - Runtime exports (`BaseUI`, `Component`, `mount`, `xml`, `cn`, `mergeStyle`, theme helpers), including `Component`'s fallback to globally registered the Base UI components, and the published `dist/` file names and package `exports` paths.
 
 What each release type means:
@@ -110,7 +114,7 @@ What each release type means:
 
 Anything prefixed `_`, undocumented internals, and the `docs/`/`examples/` sources are not part of the public API. Neither are the source-level authoring helpers described in [Component Authoring](docs/component-authoring.md) (`optional()`, `slotProps`, the `open-state.js` hooks, `bindBootstrapOverlay()`): they aren't exported from the package and may change in any release. Deprecated APIs keep working until the next major and are flagged in the CHANGELOG first.
 
-Pinning: use an exact version (`@1.1.6`) when you need byte-identical output, or the major range (`@1` on jsDelivr/unpkg, `^1.0.0` in npm) to receive fixes and features without breaking changes. Avoid `@latest` in production — it will move to the next major.
+Pinning: use an exact version (`@1.2.0`) when you need byte-identical output, or the major range (`@1` on jsDelivr/unpkg, `^1.0.0` in npm) to receive fixes and features without breaking changes. Avoid `@latest` in production — it will move to the next major.
 
 ## Project Documents
 

package/bin/create-baseui-app.mjs

@@ -1,6 +1,7 @@
 #!/usr/bin/env node
 import { copyFileSync, existsSync, mkdirSync, readdirSync, readFileSync, writeFileSync } from "node:fs";
 import { spawnSync } from "node:child_process";
+import { createHash } from "node:crypto";
 import path from "node:path";
 import { pathToFileURL } from "node:url";
 
@@ -54,9 +55,11 @@ function buildTemplateFiles(appName, baseuiVersion) {
     ) + "\n",
 
     "vite.config.js": `import { defineConfig } from "vite";
+import { baseuiPwa } from "@thebase/ui/vite";
 
 export default defineConfig({
   server: { open: true },
+  plugins: [baseuiPwa({ name: ${JSON.stringify(title)} })],
 });
 `,
 
@@ -206,6 +209,7 @@ function buildStarterFiles(appName, baseuiVersion) {
     ) + "\n",
 
     "vite.config.js": `import { defineConfig } from "vite";
+import { baseuiPwa } from "@thebase/ui/vite";
 import { fileURLToPath } from "node:url";
 
 /** Resolves a file in this config's own directory, Node-ESM-safe (no __dirname in ESM). */
@@ -213,6 +217,7 @@ const here = (file) => fileURLToPath(new URL(file, import.meta.url));
 
 export default defineConfig({
   server: { open: true },
+  plugins: [baseuiPwa({ name: ${JSON.stringify(title)} })],
   build: {
     rollupOptions: {
       input: {
@@ -422,7 +427,7 @@ export class Signup extends Component {
     "src/home/Home.js": `import { Component, useState } from "@thebase/ui";
 import {
   Breadcrumb, BreadcrumbItem, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator,
-  Button, Icon, InputGroup, InputGroupAddon, InputGroupInput, Separator,
+  Button, Icon, Input, Separator,
   Shell, ShellContent, ShellHeader, ShellMain, ShellNav, ShellSidebar, ShellSidebarHeader,
   SidebarGroupCollapsible, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarTrigger,
 } from "@thebase/ui";
@@ -433,7 +438,7 @@ export class Home extends Component {
   static template = "app.Home";
   static components = {
     Breadcrumb, BreadcrumbItem, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator,
-    Button, Icon, InputGroup, InputGroupAddon, InputGroupInput, Separator,
+    Button, Icon, Input, Separator,
     Shell, ShellContent, ShellHeader, ShellMain, ShellNav, ShellSidebar, ShellSidebarHeader,
     SidebarGroupCollapsible, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarTrigger,
   };
@@ -456,10 +461,7 @@ export class Home extends Component {
             </span>
           </a>
         </ShellSidebarHeader>
-        <InputGroup>
-          <InputGroupAddon><Icon name="'search'"/></InputGroupAddon>
-          <InputGroupInput type="'search'" placeholder="'Search...'"/>
-        </InputGroup>
+        <Input type="'search'" label="'Search'" leadingIcon="'search'"/>
         <ShellNav className="'d-flex flex-column gap-2'">
           <SidebarGroupCollapsible label="'Getting Started'" defaultOpen="true">
             <SidebarMenu>
@@ -643,6 +645,13 @@ function cmdConvert(argv) {
   written.forEach((f) => console.log(`  create ${f}`));
   skipped.forEach((f) => console.log(`  skip   ${f} (already exists)`));
 
+  if (skipped.includes("vite.config.js")) {
+    console.log(
+      '\nvite.config.js already existed — add `import { baseuiPwa } from "@thebase/ui/vite"` and ' +
+        "`plugins: [baseuiPwa({ name: \"My App\" })]` so every build emits the PWA files and auto-reloads on a new version.",
+    );
+  }
+
   if (skipped.includes("index.html")) {
     console.log(
       "\nindex.html already existed and was left untouched — make sure it has a <div id=\"app\"></div> " +
@@ -672,17 +681,31 @@ async function cmdPwa(argv) {
   }
 
   const { manifest, serviceWorker } = (await import(pathToFileURL(configPath).href)).default;
-  const { buildManifest, buildServiceWorker, DEFAULT_ICON_FILES } = await import("../dist/baseui.pwa.esm.js");
+  const { buildManifest, buildServiceWorker, buildServiceWorkerRegister, buildVersionJson, DEFAULT_ICON_FILES } = await import("../dist/baseui.pwa.esm.js");
 
   writeFileSync(
     path.join(targetDir, "manifest.webmanifest"),
     JSON.stringify(buildManifest(manifest), null, 2) + "\n",
   );
   writeFileSync(path.join(targetDir, "sw.js"), buildServiceWorker(serviceWorker));
+  writeFileSync(path.join(targetDir, "sw-register.js"), buildServiceWorkerRegister());
+  writeFileSync(path.join(targetDir, "version.json"), buildVersionJson(hashAppFiles(targetDir, serviceWorker.appFiles)));
 
   copyDefaultIcons(path.join(targetDir, "icons"), DEFAULT_ICON_FILES);
 
-  console.log(`Wrote manifest.webmanifest and sw.js in ${targetDir}`);
+  console.log(`Wrote manifest.webmanifest, sw.js, sw-register.js and version.json in ${targetDir}`);
+}
+
+/** Fingerprints the generated PWA files plus every listed app file found under the app folder, so
+ * version.json changes exactly when the shipped code does (re-run `pwa` at deploy time). */
+function hashAppFiles(targetDir, appFiles = []) {
+  const hash = createHash("sha256");
+  const names = ["sw.js", "manifest.webmanifest", ...appFiles.map((file) => file.replace(/^\//, ""))];
+  for (const name of names.sort()) {
+    const file = path.join(targetDir, name);
+    if (existsSync(file)) hash.update(name).update(readFileSync(file));
+  }
+  return hash.digest("hex").slice(0, 12);
 }
 
 /** Gives a PWA the default the Base UI logo/favicon set, without replacing any icon the app already has. */