@thebase/ui 0.0.10 → 0.0.11

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/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

@@ -27,6 +27,7 @@ The toast stays hidden until `open`/`state` becomes truthy (never shows on mount
 | `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 |
 
@@ -45,7 +46,7 @@ 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.
@@ -55,4 +56,17 @@ 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`/`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">
+  <button b-toast-close type="button">Close</button>
+  Saved successfully.
+</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.11",
   "description": "CDN-installable Owl and Bootstrap 5 UI component library.",
   "type": "module",
   "main": "./dist/baseui.min.js",