@thebase/ui 0.0.4

package/docs/components/shell.md

@@ -0,0 +1,94 @@
+# Shell
+
+Use `b-ui="shell"` for a collapsible app shell: a desktop-collapsible/mobile off-canvas sidebar next to a sticky header and scrollable content region.
+
+## Pure Owl component
+
+```js
+import {
+  Shell,
+  ShellContent,
+  ShellHeader,
+  ShellMain,
+  ShellNav,
+  ShellSidebar,
+  ShellSidebarHeader,
+  ShellUserMenu,
+} from "@thebase/ui";
+import { SidebarClose, SidebarTrigger } from "@thebase/ui";
+```
+
+```base-ui
+<Shell authState="state.authState"
+       toast="state.toast" onToastOpenChange="(open) => !open and this.dismissToast()"
+       notificationPage="NotificationPage"
+       pwa="PwaInstallerDrawer">
+  <ShellSidebar>
+    <ShellSidebarHeader>
+      Brand
+      <SidebarClose/>
+    </ShellSidebarHeader>
+    <ShellNav>
+      <a href="/">Home</a>
+    </ShellNav>
+  </ShellSidebar>
+  <ShellMain>
+    <ShellHeader>
+      <SidebarTrigger>Menu</SidebarTrigger>
+      <div class="baseui-shell-header-spacer"/>
+      <ShellUserMenu/>
+    </ShellHeader>
+    <ShellContent loading="state.loading">Routed page content</ShellContent>
+  </ShellMain>
+</Shell>
+```
+
+`Shell` wraps the existing `Sidebar` primitive internally to provide the off-canvas/mobile drawer behavior (`open`/`defaultOpen`/`onOpenChange` are forwarded to it) and additionally tracks its own desktop `collapsed` state, exposed to descendants via `env.shell`/`env.setShellCollapsed`. A single `SidebarTrigger` toggles both: it opens/closes the mobile drawer via `env.setSidebarOpen` and, when mounted inside a `Shell`, also toggles the desktop collapse rail via `env.setShellCollapsed` — no separate collapse-trigger component is needed.
+
+Four cross-cutting concerns are opt-in via props instead of baked into the layout:
+
+- `authState` — an arbitrary object (e.g. `{ username, onLogout }`), exposed to descendants via `env.shell.authState`. `ShellUserMenu` reads it directly and renders nothing when it's absent; pass its own default slot to fully customize the markup instead of the built-in username/logout row.
+- `toast`/`onToastOpenChange` — when `toast` is set (`{ variant, message, delay, persistent, actionLabel, onAction }`), `Shell` renders a built-in `Toast` bound to it, positioned as a fixed top-right overlay (`.baseui-shell-toast`) so it survives regardless of where `ShellContent` scrolls. Useful for a single app-wide notification channel (e.g. a message-bus toast) that should outlive route changes.
+- `notificationPage`/`pwa` — each an Owl component class, mounted once at the shell root (`<t t-component="..."/>`) alongside the sidebar, same shape as a consumer app's own `PWAInstallDrawer`. `Shell` doesn't know or care what they render — they're expected to manage their own trigger/visibility.
+
+| Component | Prop | Type | Notes |
+| --- | --- | --- | --- |
+| `Shell` | `open` | `Boolean` | optional, forwarded to the internal `Sidebar` |
+| `Shell` | `defaultOpen` | `Boolean` | optional |
+| `Shell` | `onOpenChange` | `Function` | optional |
+| `Shell` | `collapsed` | `Boolean` | optional, controls the desktop sidebar collapse |
+| `Shell` | `defaultCollapsed` | `Boolean` | optional |
+| `Shell` | `onCollapsedChange` | `Function` | optional |
+| `Shell` | `authState` | `Object` | optional, exposed to descendants via `env.shell.authState` |
+| `Shell` | `toast` | `Object` | optional, `{ variant, message, delay, persistent, actionLabel, onAction }` |
+| `Shell` | `onToastOpenChange` | `Function` | optional, called with `false` when the built-in toast is dismissed |
+| `Shell` | `notificationPage` | `Function` | optional, an Owl component class mounted at the shell root |
+| `Shell` | `pwa` | `Function` | optional, an Owl component class mounted at the shell root |
+| `Shell` | `className` | `String` | optional |
+| `ShellSidebar` | `className` | `String` | optional |
+| `ShellSidebarHeader` | `className` | `String` | optional |
+| `ShellNav` | `className` | `String` | optional |
+| `ShellMain` | `className` | `String` | optional |
+| `ShellHeader` | `className` | `String` | optional |
+| `ShellContent` | `loading` | `Boolean` | optional, renders a built-in `Skeleton` placeholder instead of the default slot |
+| `ShellContent` | `className` | `String` | optional |
+| `ShellUserMenu` | `className` | `String` | optional |
+
+See [Pure Owl 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="shell">
+  <button id="collapse-sidebar" b-shell-collapse-trigger type="button">Toggle sidebar</button>
+  <aside b-ui="sidebar">
+    <a href="/">Home</a>
+  </aside>
+  <div>
+    <header>...</header>
+    <main>...</main>
+  </div>
+</div>
+```
+
+State is reflected through `b-att-collapsed="true|false"`. Events: `baseui:collapse`, `baseui:expand`.

package/docs/components/sidebar.md

@@ -0,0 +1,306 @@
+# Sidebar
+
+Use `b-ui="sidebar"` for app navigation panels. The component mirrors shadcn's composable Sidebar parts: header, content, footer, groups, menu rows, actions, nested submenus, rail, inset, and trigger.
+
+## Pure Owl component
+
+```js
+import { Sidebar, SidebarContent, SidebarFooter, SidebarHeader, SidebarMenu, SidebarMenuButton, SidebarMenuItem } from "@thebase/ui";
+```
+
+`Sidebar` owns the open/collapsed state itself (`defaultOpen`/`open`/`onOpenChange`) and lays out its `SidebarContent` panel next to `SidebarInset` as siblings — do **not** wrap it in a separate `SidebarProvider`, that duplicates the layout/state and breaks rendering. `SidebarHeader`, the nav `SidebarGroup`s, and `SidebarFooter` all nest *inside* `SidebarContent` (which renders the actual bordered/fixed-width panel), not beside it.
+
+```base-ui
+<Sidebar defaultOpen="true" collapsible="'icon'">
+  <SidebarContent>
+    <SidebarHeader>
+      <SidebarMenu>
+        <SidebarMenuItem>
+          <DropdownMenu>
+            <DropdownMenuTrigger>
+              <SidebarMenuButton size="'lg'">
+                <span b-icon="gallery-vertical-end"></span>
+                <span class="d-flex flex-column">
+                  <span class="fw-semibold small">Acme Inc</span>
+                  <span class="text-body-secondary" style="font-size: 0.75rem">Enterprise</span>
+                </span>
+                <span b-icon="chevrons-up-down" class="ms-auto"></span>
+              </SidebarMenuButton>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent>
+              <DropdownMenuLabel>Teams</DropdownMenuLabel>
+              <DropdownMenuItem>Acme Inc</DropdownMenuItem>
+              <DropdownMenuItem>Acme Corp.</DropdownMenuItem>
+              <DropdownMenuItem>Evil Corp.</DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </SidebarMenuItem>
+      </SidebarMenu>
+    </SidebarHeader>
+
+    <SidebarGroup>
+      <SidebarGroupLabel>Platform</SidebarGroupLabel>
+      <SidebarMenu>
+        <SidebarMenuItem>
+          <SidebarMenuButton href="'#'" icon="'square-terminal'" active="true">Playground</SidebarMenuButton>
+          <SidebarMenuAction icon="'chevron-right'" aria-label="'Toggle Playground'"/>
+          <SidebarMenuSub>
+            <SidebarMenuSubItem><SidebarMenuSubButton href="'#'">History</SidebarMenuSubButton></SidebarMenuSubItem>
+            <SidebarMenuSubItem><SidebarMenuSubButton href="'#'">Starred</SidebarMenuSubButton></SidebarMenuSubItem>
+            <SidebarMenuSubItem><SidebarMenuSubButton href="'#'">Settings</SidebarMenuSubButton></SidebarMenuSubItem>
+          </SidebarMenuSub>
+        </SidebarMenuItem>
+        <SidebarMenuItem>
+          <SidebarMenuButton href="'#'" icon="'bot'">Models</SidebarMenuButton>
+          <SidebarMenuAction icon="'chevron-right'" aria-label="'Toggle Models'"/>
+        </SidebarMenuItem>
+        <SidebarMenuItem>
+          <SidebarMenuButton href="'#'" icon="'book-open'">Documentation</SidebarMenuButton>
+          <SidebarMenuAction icon="'chevron-right'" aria-label="'Toggle Documentation'"/>
+        </SidebarMenuItem>
+        <SidebarMenuItem>
+          <SidebarMenuButton href="'#'" icon="'settings-2'">Settings</SidebarMenuButton>
+          <SidebarMenuAction icon="'chevron-right'" aria-label="'Toggle Settings'"/>
+        </SidebarMenuItem>
+      </SidebarMenu>
+    </SidebarGroup>
+
+    <SidebarGroup muted="true">
+      <SidebarGroupLabel>Projects</SidebarGroupLabel>
+      <SidebarMenu>
+        <SidebarMenuItem>
+          <SidebarMenuButton href="'#'" icon="'frame'">Design Engineering</SidebarMenuButton>
+          <SidebarMenuAction icon="'ellipsis'" aria-label="'More'"/>
+        </SidebarMenuItem>
+        <SidebarMenuItem>
+          <SidebarMenuButton href="'#'" icon="'chart-pie'">Sales &amp; Marketing</SidebarMenuButton>
+          <SidebarMenuAction icon="'ellipsis'" aria-label="'More'"/>
+        </SidebarMenuItem>
+        <SidebarMenuItem>
+          <SidebarMenuButton href="'#'" icon="'map'">Travel</SidebarMenuButton>
+          <SidebarMenuAction icon="'ellipsis'" aria-label="'More'"/>
+        </SidebarMenuItem>
+      </SidebarMenu>
+    </SidebarGroup>
+
+    <SidebarFooter>
+      <SidebarMenu>
+        <SidebarMenuItem>
+          <DropdownMenu>
+            <DropdownMenuTrigger>
+              <SidebarMenuButton size="'lg'">
+                <span b-ui="avatar" style="width: 2rem; height: 2rem">SC</span>
+                <span class="d-flex flex-column">
+                  <span class="fw-semibold small">shadcn</span>
+                  <span class="text-body-secondary" style="font-size: 0.75rem">m@example.com</span>
+                </span>
+                <span b-icon="chevrons-up-down" class="ms-auto"></span>
+              </SidebarMenuButton>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent>
+              <DropdownMenuItem>Upgrade to Pro</DropdownMenuItem>
+              <DropdownMenuSeparator/>
+              <DropdownMenuItem>Account</DropdownMenuItem>
+              <DropdownMenuItem>Billing</DropdownMenuItem>
+              <DropdownMenuItem>Notifications</DropdownMenuItem>
+              <DropdownMenuSeparator/>
+              <DropdownMenuItem>Log out</DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </SidebarMenuItem>
+      </SidebarMenu>
+    </SidebarFooter>
+  </SidebarContent>
+  <SidebarRail/>
+
+  <SidebarInset>
+    <header class="d-flex align-items-center gap-2 p-3 border-bottom">
+      <SidebarTrigger/>
+      <Separator orientation="'vertical'" className="'mx-2'" style="'height: 1rem'"/>
+      <Breadcrumb>
+        <BreadcrumbList>
+          <BreadcrumbItem>
+            <BreadcrumbLink href="'#'">Building Your Application</BreadcrumbLink>
+          </BreadcrumbItem>
+          <BreadcrumbSeparator/>
+          <BreadcrumbItem>
+            <BreadcrumbPage>Data Fetching</BreadcrumbPage>
+          </BreadcrumbItem>
+        </BreadcrumbList>
+      </Breadcrumb>
+    </header>
+    <div class="d-flex flex-column gap-3 p-3">
+      <div class="row g-3">
+        <div class="col-4"><div class="bg-body-tertiary rounded" style="aspect-ratio: 16/9"></div></div>
+        <div class="col-4"><div class="bg-body-tertiary rounded" style="aspect-ratio: 16/9"></div></div>
+        <div class="col-4"><div class="bg-body-tertiary rounded" style="aspect-ratio: 16/9"></div></div>
+      </div>
+      <div class="bg-body-tertiary rounded flex-fill" style="min-height: 16rem"></div>
+    </div>
+  </SidebarInset>
+</Sidebar>
+```
+
+| Component | Prop | Type | Notes |
+| --- | --- | --- | --- |
+| `Sidebar` | `open` | `Boolean` | optional |
+| `Sidebar` | `defaultOpen` | `Boolean` | optional |
+| `Sidebar` | `onOpenChange` | `Function` | optional |
+| `Sidebar` | `side` | `String` | `left` or `right` |
+| `Sidebar` | `variant` | `String` | `sidebar`, `floating`, or `inset` |
+| `Sidebar` | `collapsible` | `String` | `offcanvas`, `icon`, or `none` |
+| `Sidebar` | `className` | `String` | optional |
+| `SidebarClose` | `className` | `String` | optional |
+| `SidebarClose` | `icon` | `String` | optional, defaults to `x` |
+| `SidebarClose` | `label` | `String` | optional, defaults to a visually-hidden "Close Sidebar" |
+| `SidebarContent` | `className` | `String` | optional |
+| `SidebarFooter` | `className` | `String` | optional |
+| `SidebarHeader` | `className` | `String` | optional |
+| `SidebarInset` | `className` | `String` | optional |
+| `SidebarInput` | `placeholder` | `String` | optional |
+| `SidebarRail` | `className` | `String` | optional |
+| `SidebarSeparator` | `className` | `String` | optional |
+| `SidebarTrigger` | `className` | `String` | optional |
+
+### Groups and menu items
+
+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.
+
+```base-ui
+<Sidebar defaultOpen="true">
+  <SidebarContent>
+    <!-- SidebarGroup/SidebarMenu compose directly inside SidebarContent — the panel that Sidebar+SidebarContent renders. -->
+    <!-- Plain heading group (sidebar-03/08/10/12/16 style) -->
+    <SidebarGroup>
+      <SidebarGroupLabel>Platform</SidebarGroupLabel>
+      <SidebarMenu>
+        <SidebarMenuItem>
+          <SidebarMenuButton href="'#'" icon="'square-terminal'" active="true">Playground</SidebarMenuButton>
+          <SidebarMenuAction icon="'ellipsis'" aria-label="'More'"/>
+          <SidebarMenuSub>
+            <SidebarMenuButton href="'#'">History</SidebarMenuButton>
+            <SidebarMenuButton href="'#'">Starred</SidebarMenuButton>
+          </SidebarMenuSub>
+        </SidebarMenuItem>
+      </SidebarMenu>
+    </SidebarGroup>
+
+    <!-- Collapsible group with a chevron trigger (sidebar-02/05 style) -->
+    <SidebarGroupCollapsible label="'Build Your Application'" defaultOpen="true">
+      <SidebarMenu>
+        <SidebarMenuItem><SidebarMenuButton href="'#'" icon="'route'">Routing</SidebarMenuButton></SidebarMenuItem>
+      </SidebarMenu>
+    </SidebarGroupCollapsible>
+
+    <!-- Label-less, de-emphasized utility group (sidebar-08/10/15 trailing group) -->
+    <SidebarGroup muted="true">
+      <SidebarMenu>
+        <SidebarMenuItem><SidebarMenuButton href="'#'" icon="'settings'">Settings</SidebarMenuButton></SidebarMenuItem>
+      </SidebarMenu>
+    </SidebarGroup>
+  </SidebarContent>
+</Sidebar>
+```
+
+| Component | Prop | Type | Notes |
+| --- | --- | --- | --- |
+| `SidebarGroup` | `muted` | `Boolean` | optional; renders a label-less, de-emphasized section |
+| `SidebarGroup` | `className` | `String` | optional |
+| `SidebarGroupLabel` | `className` | `String` | optional; static, non-interactive heading |
+| `SidebarGroupAction` | `icon` | `String` | optional trailing icon-only action |
+| `SidebarGroupContent` | `className` | `String` | optional |
+| `SidebarGroupCollapsible` | `label` | `String` | required; heading text on the toggle button |
+| `SidebarGroupCollapsible` | `open` | `Boolean` | optional, controlled |
+| `SidebarGroupCollapsible` | `defaultOpen` | `Boolean` | optional; defaults to `true` |
+| `SidebarGroupCollapsible` | `onOpenChange` | `Function` | optional |
+| `SidebarGroupCollapsible` | `className` | `String` | optional |
+| `SidebarMenu` | `className` | `String` | optional; vertical list of `SidebarMenuItem` |
+| `SidebarMenuItem` | `className` | `String` | optional |
+| `SidebarMenuButton` | `href` | `String` | optional; renders `<a>` instead of `<button>` |
+| `SidebarMenuButton` | `icon` | `String` | optional; leading `Icon` name |
+| `SidebarMenuButton` | `active` | `Boolean` | optional; adds `aria-current="page"` |
+| `SidebarMenuButton` | `isActive` | `Boolean` | shadcn alias for `active` |
+| `SidebarMenuButton` | `variant` | `String` | `default` or `outline` |
+| `SidebarMenuButton` | `size` | `String` | `sm`, `default`, or `lg` |
+| `SidebarMenuButton` | `onClick` | `Function` | optional |
+| `SidebarMenuAction` | `icon` | `String` | required; trailing icon-only action (e.g. `…`, `chevron-right`) |
+| `SidebarMenuAction` | `aria-label` | `String` | optional |
+| `SidebarMenuBadge` | `className` | `String` | optional |
+| `SidebarMenuSkeleton` | `showIcon` | `Boolean` | optional |
+| `SidebarMenuAction` | `onClick` | `Function` | optional |
+| `SidebarMenuSub` | `className` | `String` | optional; indented nested `SidebarMenuButton` list |
+| `SidebarMenuSubButton` | `href` | `String` | optional |
+| `SidebarMenuSubItem` | `className` | `String` | optional |
+
+See [Pure Owl Components](/examples/blocks.html#/docs/guide/owl-components) for how to load `@base/owl` and `dist/baseui.templates.xml`.
+
+## Static component
+
+```base-ui
+<div class="baseui-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>
+        </span>
+        <span class="baseui-sidebar-demo-chevrons" b-icon="chevrons-up-down"></span>
+      </a>
+    </div>
+
+    <div b-sidebar-content>
+      <div b-sidebar-group>
+        <div b-sidebar-group-label>Platform</div>
+        <ul b-sidebar-menu>
+          <li b-sidebar-menu-item>
+            <a b-sidebar-menu-button href="#">
+              <span b-icon="square-terminal"></span>
+              <span>Playground</span>
+            </a>
+            <button b-sidebar-menu-action type="button" aria-label="Toggle Playground">
+              <span b-icon="chevron-right"></span>
+            </button>
+            <ul b-sidebar-menu-sub>
+              <li b-sidebar-menu-sub-item><a b-sidebar-menu-sub-button href="#">History</a></li>
+              <li b-sidebar-menu-sub-item><a b-sidebar-menu-sub-button href="#">Starred</a></li>
+              <li b-sidebar-menu-sub-item><a b-sidebar-menu-sub-button href="#">Settings</a></li>
+            </ul>
+          </li>
+          <li b-sidebar-menu-item>
+            <a b-sidebar-menu-button href="#"><span b-icon="bot"></span><span>Models</span></a>
+            <button b-sidebar-menu-action type="button" aria-label="Toggle Models"><span b-icon="chevron-right"></span></button>
+          </li>
+          <li b-sidebar-menu-item>
+            <a b-sidebar-menu-button href="#"><span b-icon="book-open"></span><span>Documentation</span></a>
+            <button b-sidebar-menu-action type="button" aria-label="Toggle Documentation"><span b-icon="chevron-right"></span></button>
+          </li>
+          <li b-sidebar-menu-item>
+            <a b-sidebar-menu-button href="#"><span b-icon="settings-2"></span><span>Settings</span></a>
+            <button b-sidebar-menu-action type="button" aria-label="Toggle Settings"><span b-icon="chevron-right"></span></button>
+          </li>
+        </ul>
+      </div>
+    </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>
+        </span>
+        <span class="baseui-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">
+      <span b-icon="panel-left"></span>
+    </button>
+  </main>
+</div>
+```
+
+State is reflected through `b-att-state="open|closed"`. Events: `baseui:open`, `baseui:close`.

package/docs/components/skeleton.md

@@ -0,0 +1,43 @@
+# Skeleton
+
+Loading placeholder for content that is not ready yet.
+
+## Pure Owl component
+
+```js
+import { Skeleton } from "@thebase/ui";
+```
+
+```base-ui
+<div class="d-flex align-items-center gap-3" style="max-width: 28rem">
+  <div style="width: 3rem">
+    <Skeleton shape="'circle'"/>
+  </div>
+  <div class="d-flex flex-column gap-2">
+    <div style="width: 250px">
+      <Skeleton/>
+    </div>
+    <div style="width: 200px">
+      <Skeleton/>
+    </div>
+  </div>
+</div>
+```
+
+| Component | Prop | Type | Notes |
+| --- | --- | --- | --- |
+| `Skeleton` | `shape` | `String` | optional |
+| `Skeleton` | `className` | `String` | optional |
+
+See [Pure Owl Components](/examples/blocks.html#/docs/guide/owl-components) for how to load `@base/owl` and `dist/baseui.templates.xml`.
+
+## Static component
+
+```base-ui
+<span b-ui="skeleton" style="width: 12rem"></span>
+<span b-ui="skeleton" b-att-shape="circle" style="width: 2rem"></span>
+```
+
+Options: `b-att-shape="block|circle"`.
+
+Accessibility: skeletons are hidden from assistive technology by default; pair the loading region with status text when needed.

package/docs/components/slider.md

@@ -0,0 +1,31 @@
+# Slider
+
+## Pure Owl component
+
+```js
+import { Slider } from "@thebase/ui";
+```
+
+```base-ui
+<div style="width: 60%; max-width: 28rem">
+  <Slider value="33" max="100" step="1"/>
+</div>
+```
+
+| Component | Prop | Type | Notes |
+| --- | --- | --- | --- |
+| `Slider` | `value` | `Number | String` | optional |
+| `Slider` | `min` | `Number | String` | optional |
+| `Slider` | `max` | `Number | String` | optional |
+| `Slider` | `step` | `Number | String` | optional |
+| `Slider` | `disabled` | `Boolean` | optional |
+| `Slider` | `className` | `String` | optional |
+| `Slider` | `onChange` | `Function` | optional |
+
+See [Pure Owl Components](/examples/blocks.html#/docs/guide/owl-components) for how to load `@base/owl` and `dist/baseui.templates.xml`.
+
+## Static component
+
+```base-ui
+<input b-ui="slider" type="range" min="0" max="100" value="50">
+```

package/docs/components/spinner.md

@@ -0,0 +1,38 @@
+# Spinner
+
+Inline loading indicator using Bootstrap spinner classes.
+
+## Pure Owl component
+
+```js
+import { Spinner } from "@thebase/ui";
+```
+
+```base-ui
+<div style="max-width: 28rem" class="w-100">
+  <Item className="'d-flex align-items-center gap-2'">
+    <Spinner/>
+    <span>Processing payment...</span>
+    <span class="ms-auto text-muted">$100.00</span>
+  </Item>
+</div>
+```
+
+| Component | Prop | Type | Notes |
+| --- | --- | --- | --- |
+| `Spinner` | `type` | `String` | optional |
+| `Spinner` | `label` | `String` | optional |
+| `Spinner` | `className` | `String` | optional |
+
+See [Pure Owl Components](/examples/blocks.html#/docs/guide/owl-components) for how to load `@base/owl` and `dist/baseui.templates.xml`.
+
+## Static component
+
+```base-ui
+<span b-ui="spinner" b-att-label="Loading"></span>
+<span b-ui="spinner" b-att-type="grow"></span>
+```
+
+Options: `b-att-type="border|grow"`, `b-att-label`.
+
+Accessibility: BaseUI adds `role="status"` and hidden loading text.

package/docs/components/switch.md

@@ -0,0 +1,35 @@
+# Switch
+
+Checkbox-backed switch control using `role="switch"`.
+
+## Pure Owl component
+
+```js
+import { Switch } from "@thebase/ui";
+```
+
+```base-ui
+<div class="d-flex align-items-center gap-2" style="max-width: 28rem">
+  <Switch>Airplane Mode</Switch>
+</div>
+```
+
+| Component | Prop | Type | Notes |
+| --- | --- | --- | --- |
+| `Switch` | `checked` | `Boolean` | optional |
+| `Switch` | `disabled` | `Boolean` | optional |
+| `Switch` | `className` | `String` | optional |
+| `Switch` | `onChange` | `Function` | optional |
+
+See [Pure Owl Components](/examples/blocks.html#/docs/guide/owl-components) for how to load `@base/owl` and `dist/baseui.templates.xml`.
+
+## Static component
+
+```base-ui
+<label b-ui="switch">
+  <input type="checkbox" role="switch">
+  Auto-save
+</label>
+```
+
+Accessibility: keep the native checkbox input and use clear on/off labeling.

package/docs/components/table.md

@@ -0,0 +1,66 @@
+# Table
+
+Native table styling for static or server-rendered data.
+
+## Pure Owl component
+
+```js
+import { Table } from "@thebase/ui";
+```
+
+```base-ui
+<div style="max-width: 40rem" class="w-100">
+  <Table>
+    <caption>A list of your recent invoices.</caption>
+    <thead>
+      <tr>
+        <th style="width: 100px">Invoice</th>
+        <th>Status</th>
+        <th>Method</th>
+        <th class="text-end">Amount</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td class="fw-medium">INV001</td>
+        <td>Paid</td>
+        <td>Credit Card</td>
+        <td class="text-end">$250.00</td>
+      </tr>
+      <tr>
+        <td class="fw-medium">INV002</td>
+        <td>Pending</td>
+        <td>PayPal</td>
+        <td class="text-end">$150.00</td>
+      </tr>
+      <tr>
+        <td class="fw-medium">INV003</td>
+        <td>Unpaid</td>
+        <td>Bank Transfer</td>
+        <td class="text-end">$350.00</td>
+      </tr>
+    </tbody>
+  </Table>
+</div>
+```
+
+| Component | Prop | Type | Notes |
+| --- | --- | --- | --- |
+| `Table` | `striped` | `Boolean` | optional |
+| `Table` | `hover` | `Boolean` | optional |
+| `Table` | `className` | `String` | optional |
+
+See [Pure Owl Components](/examples/blocks.html#/docs/guide/owl-components) for how to load `@base/owl` and `dist/baseui.templates.xml`.
+
+## Static component
+
+```base-ui
+<table b-ui="table" b-att-responsive="true">
+  <thead><tr><th>Name</th><th>Status</th></tr></thead>
+  <tbody><tr><td>API</td><td>Ready</td></tr></tbody>
+</table>
+```
+
+Options: `b-att-responsive="true"`, `b-att-striped="false"`, `b-att-hover="false"`.
+
+Accessibility: use table headers and captions when the context is not obvious.

package/docs/components/tabs.md

@@ -0,0 +1,50 @@
+# Tabs
+
+## Pure Owl component
+
+```js
+import { Tabs, TabContent, TabsContainer, TabsList, TabTrigger } from "@thebase/ui";
+```
+
+```base-ui
+<div style="max-width: 25rem" class="w-100">
+  <Tabs defaultValue="'account'">
+    <TabsList>
+      <TabTrigger value="'account'">Account</TabTrigger>
+      <TabTrigger value="'password'">Password</TabTrigger>
+    </TabsList>
+    <TabsContainer>
+      <TabContent value="'account'">Make changes to your account here.</TabContent>
+      <TabContent value="'password'">Change your password here.</TabContent>
+    </TabsContainer>
+  </Tabs>
+</div>
+```
+
+| Component | Prop | Type | Notes |
+| --- | --- | --- | --- |
+| `Tabs` | `value` | `String` | controlled active value |
+| `Tabs` | `defaultValue` | `String` | initial value when uncontrolled |
+| `Tabs` | `onChange` | `Function` | called with the newly selected value |
+| `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`.
+
+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).
+
+## Static component
+
+```base-ui
+<div b-ui="tabs">
+  <button b-tab="profile">Profile</button>
+  <button b-tab="security">Security</button>
+  <section b-panel="profile">Profile content</section>
+  <section b-panel="security">Security content</section>
+</div>
+```
+
+Events: `baseui:change` with `{ value }`.
+
+Keyboard: Left and Right arrows move between tabs.