@thebase/ui 0.0.11 → 0.0.12

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/toast.md

@@ -16,11 +16,14 @@ 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 |
 | --- | --- | --- | --- |
@@ -30,15 +33,20 @@ The toast stays hidden until `open`/`state` becomes truthy (never shows on mount
 | `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>
 ```
 
@@ -48,8 +56,14 @@ The toast stays hidden until shown — omit `b-att-state="open"` and call `.show
 <div class="d-flex flex-column align-items-center gap-3">
   <button type="button" class="btn bu-button btn-outline-secondary" onclick="document.getElementById('demo-toast').BaseUIToast.show()">Show Toast</button>
   <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>
 ```
@@ -64,8 +78,10 @@ Set `b-att-position` to `top-left`, `top-right`, `bottom-left`, or `bottom-right
 
 ```base-ui
 <div id="corner-toast" b-ui="toast" b-att-position="bottom-right" b-att-delay="3000">
-  <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>
 ```
 

package/package.json

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