@thebase/ui 0.0.10 → 0.0.12

package/docs/components/sidebar.md

@@ -237,16 +237,16 @@ See [Pure Owl Components](/examples/blocks.html#/docs/guide/owl-components) for
 ## Static component
 
 ```base-ui
-<div class="baseui-sidebar-demo-frame">
+<div class="bu-sidebar-demo-frame">
   <aside b-ui="sidebar" b-att-state="open">
     <div b-sidebar-header>
-      <a href="#" class="baseui-sidebar-demo-brand">
-        <span class="baseui-sidebar-demo-brand-mark"><span b-icon="gallery-vertical-end"></span></span>
-        <span class="baseui-sidebar-demo-meta">
-          <span class="baseui-sidebar-demo-title">Acme Inc</span>
-          <span class="baseui-sidebar-demo-email">Enterprise</span>
+      <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>
         </span>
-        <span class="baseui-sidebar-demo-chevrons" b-icon="chevrons-up-down"></span>
+        <span class="bu-sidebar-demo-chevrons" b-icon="chevrons-up-down"></span>
       </a>
     </div>
 
@@ -285,18 +285,18 @@ See [Pure Owl Components](/examples/blocks.html#/docs/guide/owl-components) for
     </div>
 
     <div b-sidebar-footer>
-      <a href="#" class="baseui-sidebar-demo-user">
-        <span b-ui="avatar" class="baseui-sidebar-demo-avatar">SC</span>
-        <span class="baseui-sidebar-demo-meta">
-          <span class="baseui-sidebar-demo-title">shadcn</span>
-          <span class="baseui-sidebar-demo-email">m@example.com</span>
+      <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>
         </span>
-        <span class="baseui-sidebar-demo-chevrons" b-icon="chevrons-up-down"></span>
+        <span class="bu-sidebar-demo-chevrons" b-icon="chevrons-up-down"></span>
       </a>
     </div>
   </aside>
-  <main class="baseui-sidebar-demo-main">
-    <button class="baseui-sidebar-trigger" type="button" aria-label="Toggle Sidebar">
+  <main class="bu-sidebar-demo-main">
+    <button class="bu-sidebar-trigger" type="button" aria-label="Toggle Sidebar">
       <span b-icon="panel-left"></span>
     </button>
   </main>

package/docs/components/tabs.md

@@ -1,5 +1,11 @@
 # Tabs
 
+Matches [shadcn/base's Tabs](https://ui.shadcn.com/docs/components/base/tabs): `TabsList` renders
+as a segmented pill control on a muted background by default, or a transparent underline list via
+`variant="'line'"`. `TabContent`/`b-panel` render as bare panels with no default border or
+background — a bordered/padded look is opt-in via `className` on `TabsContainer` (or the
+consumer's own wrapper), not baked into every panel.
+
 ## Pure Owl component
 
 ```js
@@ -21,16 +27,38 @@ import { Tabs, TabContent, TabsContainer, TabsList, TabTrigger } from "@thebase/
 </div>
 ```
 
+The `"line"` variant swaps the segmented pill for a transparent, underline-driven list:
+
+```base-ui
+<div style="max-width: 25rem" class="w-100">
+  <Tabs defaultValue="'overview'">
+    <TabsList variant="'line'">
+      <TabTrigger value="'overview'">Overview</TabTrigger>
+      <TabTrigger value="'analytics'">Analytics</TabTrigger>
+    </TabsList>
+    <TabsContainer>
+      <TabContent value="'overview'">View your dashboard metrics.</TabContent>
+      <TabContent value="'analytics'">Detailed analytics and insights.</TabContent>
+    </TabsContainer>
+  </Tabs>
+</div>
+```
+
 | Component | Prop | Type | Notes |
 | --- | --- | --- | --- |
 | `Tabs` | `value` | `String` | controlled active value |
 | `Tabs` | `defaultValue` | `String` | initial value when uncontrolled |
+| `Tabs` | `orientation` | `String` | `"horizontal"` (default) or `"vertical"` — puts `TabsList` beside `TabsContainer` instead of above it |
 | `Tabs` | `onChange` | `Function` | called with the newly selected value |
+| `TabsList` | `variant` | `String` | `"default"` (segmented pill, muted background) or `"line"` (transparent, underline indicator) |
 | `TabTrigger` | `value` | `String` | required, matches a `TabContent value` |
 | `TabTrigger` | `disabled` | `Boolean` | |
 | `TabContent` | `value` | `String` | required |
 
-ArrowLeft/ArrowRight move focus and selection between `TabTrigger`s, same as the static API. See [Pure Owl Components](/examples/blocks.html#/docs/guide/owl-components) for how to load `@base/owl` and `dist/baseui.templates.xml`.
+ArrowLeft/ArrowRight (or ArrowUp/ArrowDown when vertical) move focus and selection between
+`TabTrigger`s, same as the static API — each trigger's own live `bootstrap.Tab` instance handles
+this natively. See [Pure Owl Components](/examples/blocks.html#/docs/guide/owl-components) for how
+to load `@base/owl` and `dist/baseui.templates.xml`.
 
 Each `TabTrigger` (`b-tab` button / pure Owl `TabTrigger`'s own root) is driven by a live `bootstrap.Tab` instance: it always carries `role="tab"` plus a `data-bs-target="#<id>"` pointing at its linked pane, and Bootstrap itself manages the pane's `tab-pane fade`/`show`/`active` classes and the trigger's `active`/`aria-selected`/`tabindex` across switches — don't rely on node removal to detect the active panel; every `TabContent`/`b-panel` stays mounted permanently (`role="tabpanel"`, `tab-pane fade` + `show active` on the initially active one).
 
@@ -45,6 +73,11 @@ Each `TabTrigger` (`b-tab` button / pure Owl `TabTrigger`'s own root) is driven
 </div>
 ```
 
+Add `b-att-variant="line"` on the `[b-ui="tabs"]` host for the transparent underline look instead
+of the default segmented pill. `orientation` is a pure-Owl-only prop — the static markup lays
+`[b-tab]`/`[b-panel]` flat as siblings with no `TabsList`/`TabsContainer`-equivalent grouping
+wrapper to flip into a row/column pair.
+
 Events: `baseui:change` with `{ value }`.
 
 Keyboard: Left and Right arrows move between tabs.

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 `baseui-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 `bu-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/theme-button.md

@@ -13,7 +13,7 @@ import { ThemeButton } from "@thebase/ui";
 ```
 
 ```base-ui
-<ThemeButton variant="'outline'" storageKey="'baseui-theme'"/>
+<ThemeButton variant="'outline'" storageKey="'bu-theme'"/>
 ```
 
 | Component | Prop | Type | Notes |
@@ -50,7 +50,7 @@ Theme changes dispatch `baseui:theme-change` on `document` with `{ theme }` in `
 
 ## CSS variables
 
-The component inherits Button and Icon tokens, including `--baseui-radius-lg`, `--baseui-primary`, `--baseui-border`, and `--baseui-icon-size`.
+The component inherits Button and Icon tokens, including `--b-radius-lg`, `--b-primary`, `--b-border`, and `--b-icon-size`.
 
 ## Accessibility behavior
 

package/docs/components/toast.md

@@ -16,28 +16,37 @@ import { Toast } from "@thebase/ui";
       <span class="fw-medium">Event created</span>
       <span class="text-body-secondary small">Sunday, December 3 at 9:00 AM</span>
     </div>
+    <t t-set-slot="action">
+      <Button variant="'outline'" size="'sm'" onClick="() => state.open = false">Undo</Button>
+    </t>
   </Toast>
 </div>
 ```
 
-The toast stays hidden until `open`/`state` becomes truthy (never shows on mount) and auto-hides after `delay` ms once shown.
+The toast stays hidden until `open`/`state` becomes truthy (never shows on mount) and auto-hides after `delay` ms once shown. The default slot (title/description) sits on the leading edge and grows to fill the available width; the optional `action` slot renders grouped tight against the close button on the trailing edge.
 
 | Component | Prop | Type | Notes |
 | --- | --- | --- | --- |
 | `Toast` | `open` | `Boolean` | optional, default `false` — never shown until set to `true` |
 | `Toast` | `variant` | `String` | optional |
 | `Toast` | `delay` | `Number` | optional, default `3000` — auto-hides after this many ms; pass `0` to disable auto-hide |
+| `Toast` | `position` | `String` | optional — `"top-left"`, `"top-right"`, `"bottom-left"`, or `"bottom-right"`; fixes the toast to that screen corner. Omit to render inline where placed |
 | `Toast` | `className` | `String` | optional |
 | `Toast` | `onOpenChange` | `Function` | optional |
+| `Toast` | `action` slot | — | optional — e.g. a `<Button/>`, rendered grouped next to the close button (`<t t-set-slot="action">...</t>`) |
 
 See [Pure Owl Components](/examples/blocks.html#/docs/guide/owl-components) for how to load `@base/owl` and `dist/baseui.templates.xml`.
 
 ## 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).
+
 ```base-ui
 <div b-ui="toast">
-  <button b-toast-close type="button">Close</button>
-  Saved successfully.
+  <div class="bu-toast-content">Saved successfully.</div>
+  <div class="bu-toast-actions">
+    <button b-toast-close type="button">Close</button>
+  </div>
 </div>
 ```
 
@@ -45,14 +54,35 @@ 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 baseui-button btn-outline-secondary" onclick="document.getElementById('demo-toast').BaseUIToast.show()">Show Toast</button>
+  <button type="button" class="btn bu-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">
-    <button b-toast-close type="button">Close</button>
-    Saved successfully.
+    <div class="bu-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>
+      <button b-toast-close type="button">Close</button>
+    </div>
   </div>
 </div>
 ```
 
 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`/`baseui-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`/`bu-toast-close` selector, so Bootstrap's own delegated dismiss handler drives them.
+
+### Screen-corner placement
+
+Set `b-att-position` to `top-left`, `top-right`, `bottom-left`, or `bottom-right` to fix the toast to that corner of the viewport. The toast element itself gets the Bootstrap `toast-container position-fixed p-3 pe-auto` classes plus the matching edge utility classes (`top-0`/`bottom-0` + `start-0`/`end-0`) merged in — no wrapper element. Omit the attribute to leave the toast inline in the document flow (the previous, default behavior):
+
+```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">
+    <button b-toast-close type="button">Close</button>
+  </div>
+</div>
+```
+
+The pure Owl `Toast` component takes the same values via its `position` prop.

package/docs/components/toggle-group.md

@@ -62,7 +62,7 @@ Interactive components emit documented `baseui:*` events from their root element
 
 ## CSS variables
 
-The component inherits BaseUI semantic tokens such as `--baseui-surface`, `--baseui-border`, `--baseui-primary`, and `--baseui-radius`.
+The component inherits BaseUI semantic tokens such as `--b-surface`, `--b-border`, `--b-primary`, and `--b-radius`.
 
 ## Accessibility behavior
 

package/docs/components/toggle.md

@@ -63,7 +63,7 @@ Interactive components emit documented `baseui:*` events from their root element
 
 ## CSS variables
 
-The component inherits BaseUI semantic tokens such as `--baseui-surface`, `--baseui-border`, `--baseui-primary`, and `--baseui-radius`.
+The component inherits BaseUI semantic tokens such as `--b-surface`, `--b-border`, `--b-primary`, and `--b-radius`.
 
 ## Accessibility behavior
 

package/docs/components/tooltip.md

@@ -58,7 +58,7 @@ Interactive components emit documented `baseui:*` events from their root element
 
 ## CSS variables
 
-The component inherits BaseUI semantic tokens such as `--baseui-surface`, `--baseui-border`, `--baseui-primary`, and `--baseui-radius`. The popup itself is styled by Bootstrap's own bundled `.tooltip`/`.tooltip-arrow`/`.tooltip-inner` CSS (loaded via `dist/baseui.min.css`), not BaseUI's own classes.
+The component inherits BaseUI semantic tokens such as `--b-surface`, `--b-border`, `--b-primary`, and `--b-radius`. The popup itself is styled by Bootstrap's own bundled `.tooltip`/`.tooltip-arrow`/`.tooltip-inner` CSS (loaded via `dist/baseui.min.css`), not BaseUI's own classes.
 
 ## Accessibility behavior
 

package/docs/runtime-api.md

@@ -26,3 +26,29 @@ Mounted components dispatch lifecycle events on their root element:
 `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.
 
 `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, import their classes, fetch the templates XML, and list those classes in your own component's `static components`; see [Pure Owl Components](owl-components.md).
+
+## `cn()` class-name helper
+
+`cn(...classNames)` joins strings, arrays, and falsy values into one space-separated class string, flattening nested arrays and skipping anything falsy:
+
+```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")
+```
+
+It's a standalone named export — `import { cn } from "@thebase/ui"` in npm/bundler apps, or `BaseUIBundle.cn` in the browser IIFE global — not a method on `BaseUI` itself. Use it to build your own components' class lists on top of BaseUI's conventions.
+
+## `mergeStyle()` inline-style helper
+
+`mergeStyle(...styles)` combines a component's own computed inline style with a caller-supplied `style` (string or object) into one `;`-joined declaration string, dropping empty/nullish entries. Object keys may be camelCase (converted to kebab-case); later entries win on conflicting properties since they're appended last:
+
+```js
+import { mergeStyle } from "@thebase/ui";
+
+mergeStyle("--b-progress-value:50%", { color: "red" }, "opacity:0.5;");
+// "--b-progress-value:50%;color:red;opacity:0.5"
+```
+
+It's a standalone named export — `import { mergeStyle } from "@thebase/ui"` in npm/bundler apps, or `BaseUIBundle.mergeStyle` in the browser IIFE global. Unlike `cn()`, which joins class names with a space, `mergeStyle()` joins CSS declarations with `;` — the two are not interchangeable.

package/docs/theming.md

@@ -13,7 +13,7 @@ BaseUI.theme.set("dark");
 BaseUI.theme.set({ primary: "#0057d8", radius: "0.5rem" });
 ```
 
-BaseUI maps semantic tokens such as `--baseui-background`, `--baseui-primary`, `--baseui-border`, and `--baseui-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 `--baseui-radius*` for component CSS.
+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.
 
 For a reusable theme toggle with persistence, URL override, button-label sync, and iframe preview sync, import the theme helper:
 
@@ -50,6 +50,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 `--baseui-secondary`/`--baseui-muted`/`--baseui-accent` surfaces, `--base-radius: var(--radius, 0.625rem)`, and a derived radius scale (`--base-radius-sm|md|lg|xl`, mirrored as `--baseui-radius-sm|md|lg|xl`) and shadow scale (`--baseui-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 `--baseui-radius`; that one-way bridge avoids CSS custom-property cycles. `--baseui-card`/`--baseui-popover` alias `--baseui-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)`, 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.
 
-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 `baseui-badge-*` classes (`src/components/badge/badge.css`) instead of Bootstrap's `text-bg-*`, which hardcode non-overridable colors.
+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.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thebase/ui",
-  "version": "0.0.10",
+  "version": "0.0.12",
   "description": "CDN-installable Owl and Bootstrap 5 UI component library.",
   "type": "module",
   "main": "./dist/baseui.min.js",