@thebase/ui 0.0.4

package/docs/components/markdown.md

@@ -0,0 +1,121 @@
+# Markdown
+
+Use `b-ui="markdown"` (or the pure Owl `Markdown` component) to render Markdown or mount an editable Markdown document. Read-only parsing uses the vendored `src/runtime/marked.min.js` (marked v15). Fenced ` ```mermaid ` code blocks render as inline SVG via `src/runtime/mermaid.esm.min.mjs`. Fenced ` ```base-ui ` code blocks render as a live BaseUI preview through the page's global static runtime (`window.BaseUI`, e.g. `dist/baseui.min.js`).
+
+Editable mode lazy-loads `dist/runtime/milkdown-editor.js`, which bundles Milkdown, Yjs, and y-webrtc only when `b-att-editable="true"` / `editable="true"` is used. The editor runtime enables CommonMark, GFM, history, clipboard, cursor, listener, indent, upload, block handle, tooltip, slash, streaming, and diff plugins. Collaborative mode uses Milkdown's Yjs-aware collab undo/redo instead of the plain history stack.
+
+## CDN install requirements
+
+Load the pinned BaseUI CSS and JavaScript files. No extra `<script>` tag, npm install, or CDN reference is required for Markdown parsing, mermaid diagrams, or the Milkdown editor runtime — each lazy asset is emitted under `dist/runtime/` and fetched only when needed. Live ` ```base-ui ` previews reuse the same static runtime the rest of the page already loads (`dist/baseui.min.js`) — if that script isn't on the page, the block renders an inline error instead of a live preview.
+
+## Pure Owl component
+
+```js
+import { Markdown } from "@base/component";
+```
+
+```base-ui
+<div class="d-flex flex-column gap-4">
+  <Markdown src="'/docs/installation.md'"/>
+  <Markdown content="state.source" mermaid="false" baseUi="false"/>
+  <Markdown
+    content="state.source"
+    editable="true"
+    collaborative="true"
+    room="'docs/installation'"
+    onChange="(markdown) => this.onMarkdownChange(markdown)"
+  />
+</div>
+```
+
+## Static component
+
+```base-ui
+<div b-ui="markdown" >
+  <script type="text/markdown">
+# Getting started
+
+Some **bold** text and a [link](https://example.com).
+  </script>
+</div>
+```
+Edit sample 
+```base-ui
+<div b-ui="markdown" b-att-editable="true">
+  <script type="text/markdown">
+# Getting started
+
+Some **bold** text and a [link](https://example.com).
+  </script>
+</div>
+```
+
+Or point it at a remote `.md` file instead of inlining the source:
+
+```html
+<div b-ui="markdown" b-att-src="/docs/installation.md"></div>
+```
+
+Enable local WYSIWYG Markdown editing:
+
+```html
+<div b-ui="markdown" b-att-editable="true">
+  <script type="text/markdown">
+# Draft
+
+Edit **Markdown** here.
+  </script>
+</div>
+```
+
+Enable peer-to-peer collaborative editing with Yjs + y-webrtc:
+
+```html
+<div
+  b-ui="markdown"
+  b-att-editable="true"
+  b-att-collaborative="true"
+  b-att-room="docs/installation"
+></div>
+```
+
+Use `b-att-password` for y-webrtc room encryption and `b-att-signaling="wss://example.com,ws://localhost:4444"` to override signaling servers.
+
+A fenced ` ```base-ui ` block renders as a live component, not a code sample:
+
+````html
+<div b-ui="markdown">
+  <script type="text/markdown">
+```base-ui
+<div b-ui="badge">New</div>
+```
+  </script>
+</div>
+````
+
+## Options and attributes
+
+- `b-att-src` / `src` — fetch a remote Markdown file instead of using inline content.
+- `b-att-content` / `content` — a static `<script type="text/markdown">` child (or a `<template>`), `b-att-content`, or the element's own text content supplies the Markdown source when no `src` is set.
+- `b-att-mermaid` / `mermaid` — set to `"false"` to skip mermaid diagram rendering (defaults to enabled).
+- `b-att-base-ui` / `baseUi` — set to `"false"` to skip live-mounting fenced ` ```base-ui ` blocks; they render as plain code instead (defaults to enabled).
+- `b-att-editable` / `editable` — set to `"true"` to mount Milkdown instead of read-only rendered HTML.
+- `b-att-collaborative` / `collaborative` — set to `"true"` to connect the editor through Yjs + y-webrtc.
+- `b-att-room` / `room` — y-webrtc room name for collaborative sessions (defaults to `baseui-markdown`).
+- `b-att-password` / `password` — optional y-webrtc room password.
+- `b-att-signaling` / `signaling` — comma-separated signaling URLs for the static API, or an array prop for Owl.
+
+See `dist/baseui.registry.json` for the full attribute list.
+
+## Events
+
+- `baseui:markdown-render` — fired after Markdown parses and diagrams finish enhancing (`detail.html`).
+- `baseui:markdown-error` — fired when fetching or parsing fails (`detail.error`).
+- `baseui:markdown-editor-ready` — fired after Milkdown mounts (`detail.collaborative`, `detail.room`).
+- `baseui:markdown-change` — fired whenever Milkdown emits a Markdown update (`detail.markdown`, `detail.previousMarkdown`).
+- `baseui:markdown-copy` — fired on a fenced ` ```base-ui ` block's copy button after its source is written to the clipboard (`detail.source`). A transient `b-ui="toast"` also shows "Copied to clipboard" automatically if the global static runtime is loaded.
+- `baseui:markdown-copy-error` — fired instead of `baseui:markdown-copy` if the clipboard write fails (`detail.error`).
+
+## Methods
+
+Use the global runtime methods: `BaseUI.mount()`, `BaseUI.mountAll()`, and `BaseUI.destroy()`.

package/docs/components/marker.md

@@ -0,0 +1,29 @@
+# Marker
+
+## Pure Owl component
+
+```js
+import { Marker } from "@thebase/ui";
+```
+
+```base-ui
+<div style="max-width: 28rem">
+  <Marker>
+    <Icon name="'git-branch'" class="'me-1'"/>
+    Switched to a new branch
+  </Marker>
+</div>
+```
+
+| Component | Prop | Type | Notes |
+| --- | --- | --- | --- |
+| `Marker` | `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="marker">Beta</span>
+<span b-ui="marker" b-att-variant="destructive">Issue</span>
+```

package/docs/components/menubar.md

@@ -0,0 +1,103 @@
+# Menubar
+
+## Pure Owl component
+
+```js
+import { Menubar } from "@thebase/ui";
+```
+
+```base-ui
+<Menubar>
+  <DropdownMenu>
+    <DropdownMenuTrigger>File</DropdownMenuTrigger>
+    <DropdownMenuContent align="'start'">
+      <DropdownMenuGroup>
+        <DropdownMenuItem>New Tab <DropdownMenuShortcut>⌘T</DropdownMenuShortcut></DropdownMenuItem>
+        <DropdownMenuItem>New Window <DropdownMenuShortcut>⌘N</DropdownMenuShortcut></DropdownMenuItem>
+        <DropdownMenuItem disabled="true">New Incognito Window</DropdownMenuItem>
+      </DropdownMenuGroup>
+      <DropdownMenuSeparator/>
+      <DropdownMenuSub>
+        <DropdownMenuSubTrigger>Share</DropdownMenuSubTrigger>
+        <DropdownMenuSubContent>
+          <DropdownMenuItem>Email link</DropdownMenuItem>
+          <DropdownMenuItem>Messages</DropdownMenuItem>
+          <DropdownMenuItem>Notes</DropdownMenuItem>
+        </DropdownMenuSubContent>
+      </DropdownMenuSub>
+      <DropdownMenuSeparator/>
+      <DropdownMenuItem>Print <DropdownMenuShortcut>⌘P</DropdownMenuShortcut></DropdownMenuItem>
+    </DropdownMenuContent>
+  </DropdownMenu>
+
+  <DropdownMenu>
+    <DropdownMenuTrigger>Edit</DropdownMenuTrigger>
+    <DropdownMenuContent align="'start'">
+      <DropdownMenuGroup>
+        <DropdownMenuItem>Undo <DropdownMenuShortcut>⌘Z</DropdownMenuShortcut></DropdownMenuItem>
+        <DropdownMenuItem>Redo <DropdownMenuShortcut>⇧⌘Z</DropdownMenuShortcut></DropdownMenuItem>
+      </DropdownMenuGroup>
+      <DropdownMenuSeparator/>
+      <DropdownMenuSub>
+        <DropdownMenuSubTrigger>Find</DropdownMenuSubTrigger>
+        <DropdownMenuSubContent>
+          <DropdownMenuItem>Search the web</DropdownMenuItem>
+          <DropdownMenuSeparator/>
+          <DropdownMenuItem>Find...</DropdownMenuItem>
+          <DropdownMenuItem>Find Next</DropdownMenuItem>
+          <DropdownMenuItem>Find Previous</DropdownMenuItem>
+        </DropdownMenuSubContent>
+      </DropdownMenuSub>
+      <DropdownMenuSeparator/>
+      <DropdownMenuItem>Cut</DropdownMenuItem>
+      <DropdownMenuItem>Copy</DropdownMenuItem>
+      <DropdownMenuItem>Paste</DropdownMenuItem>
+    </DropdownMenuContent>
+  </DropdownMenu>
+
+  <DropdownMenu>
+    <DropdownMenuTrigger>View</DropdownMenuTrigger>
+    <DropdownMenuContent align="'start'">
+      <DropdownMenuCheckboxItem checked="false">Always Show Bookmarks Bar</DropdownMenuCheckboxItem>
+      <DropdownMenuCheckboxItem checked="true">Always Show Full URLs</DropdownMenuCheckboxItem>
+      <DropdownMenuSeparator/>
+      <DropdownMenuItem inset="true">Reload <DropdownMenuShortcut>⌘R</DropdownMenuShortcut></DropdownMenuItem>
+      <DropdownMenuItem disabled="true" inset="true">Force Reload <DropdownMenuShortcut>⇧⌘R</DropdownMenuShortcut></DropdownMenuItem>
+      <DropdownMenuSeparator/>
+      <DropdownMenuItem inset="true">Toggle Fullscreen</DropdownMenuItem>
+      <DropdownMenuSeparator/>
+      <DropdownMenuItem inset="true">Hide Sidebar</DropdownMenuItem>
+    </DropdownMenuContent>
+  </DropdownMenu>
+
+  <DropdownMenu>
+    <DropdownMenuTrigger>Profiles</DropdownMenuTrigger>
+    <DropdownMenuContent align="'start'">
+      <DropdownMenuRadioGroup value="'benoit'">
+        <DropdownMenuRadioItem value="'andy'">Andy</DropdownMenuRadioItem>
+        <DropdownMenuRadioItem value="'benoit'">Benoit</DropdownMenuRadioItem>
+        <DropdownMenuRadioItem value="'luis'">Luis</DropdownMenuRadioItem>
+      </DropdownMenuRadioGroup>
+      <DropdownMenuSeparator/>
+      <DropdownMenuItem inset="true">Edit...</DropdownMenuItem>
+      <DropdownMenuSeparator/>
+      <DropdownMenuItem inset="true">Add Profile... <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut></DropdownMenuItem>
+    </DropdownMenuContent>
+  </DropdownMenu>
+</Menubar>
+```
+
+| Component | Prop | Type | Notes |
+| --- | --- | --- | --- |
+| `Menubar` | `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
+<nav b-ui="menubar">
+  <button type="button">File</button>
+  <button type="button">Edit</button>
+</nav>
+```

package/docs/components/message-scroller.md

@@ -0,0 +1,93 @@
+# Message Scroller
+
+Use `b-ui="message-scroller"` for a CDN-ready message scroller component.
+
+## CDN install requirements
+
+Load the pinned BaseUI CSS and JavaScript files; no extra dependency is required for this component.
+
+## Pure Owl component
+
+```js
+import { MessageScroller } from "@thebase/ui";
+```
+
+```base-ui
+<div class="w-100" style="max-width: 28rem">
+  <Card className="'p-0 overflow-hidden'">
+    <CardHeader className="'border-bottom p-3'">
+      <CardTitle>Support chat</CardTitle>
+      <CardDescription>Demo is read only. Press send to start a new conversation.</CardDescription>
+    </CardHeader>
+    <div style="height: 22rem">
+      <MessageScroller className="'h-100 p-3'">
+        <Message>Hi! How can I help you today?</Message>
+        <Message side="'outgoing'">I'm trying to add auto-scroll to my chat UI.</Message>
+        <Message>Wrap your messages in a MessageScroller and it will scroll to the newest content automatically.</Message>
+        <Message side="'outgoing'">Does it still let me scroll up to read older messages?</Message>
+        <Message>Yes, you can scroll away freely while it's not actively streaming new content.</Message>
+        <Message side="'outgoing'">That's exactly what I needed, thanks!</Message>
+      </MessageScroller>
+    </div>
+    <CardFooter className="'border-top p-3'">
+      <InputGroup className="'w-100'">
+        <InputGroupTextarea placeholder="'Type your message...'" rows="1"/>
+        <InputGroupAddon align="'block-end'">
+          <InputGroupButton>
+            <Icon name="'arrow-up'"/>
+          </InputGroupButton>
+        </InputGroupAddon>
+      </InputGroup>
+    </CardFooter>
+  </Card>
+</div>
+```
+
+| Component | Prop | Type | Notes |
+| --- | --- | --- | --- |
+| `MessageScroller` | `autoscroll` | `Boolean` | optional |
+| `MessageScroller` | `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="message-scroller">Message Scroller</div>
+```
+
+## Enhanced usage
+
+Call `BaseUI.mount(element)` or rely on `BaseUI.mountAll()` after the script loads.
+
+## Options and attributes
+
+See `dist/baseui.registry.json` for the supported attribute list.
+
+## Methods
+
+Use the global runtime methods: `BaseUI.mount()`, `BaseUI.mountAll()`, and `BaseUI.destroy()`.
+
+## Events
+
+Interactive components emit documented `baseui:*` events from their root element. Static components do not emit events.
+
+## CSS variables
+
+The component inherits BaseUI semantic tokens such as `--baseui-surface`, `--baseui-border`, `--baseui-primary`, and `--baseui-radius`.
+
+## Accessibility behavior
+
+The component preserves authored semantic HTML and adds ARIA roles or state attributes where enhancement is required.
+
+## Examples
+
+See `examples/index.html` for a working CDN-style page.
+
+## Browser support
+
+BaseUI targets modern evergreen browsers that support ES modules, CSS variables, and Bootstrap 5.3.
+
+## Test checklist
+
+Verify light and dark themes, keyboard access for focusable controls, disabled or readonly states when applicable, and cleanup through `BaseUI.destroy()`.

package/docs/components/message.md

@@ -0,0 +1,86 @@
+# Message
+
+Use `b-ui="message"` for a CDN-ready message component.
+
+## CDN install requirements
+
+Load the pinned BaseUI CSS and JavaScript files; no extra dependency is required for this component.
+
+## Pure Owl component
+
+```js
+import { Message } from "@thebase/ui";
+```
+
+```base-ui
+<div class="d-flex flex-column gap-3 w-100" style="max-width: 24rem">
+  <div class="d-flex align-items-end gap-2">
+    <Avatar className="'flex-shrink-0'"><t t-set-slot="fallback">JL</t></Avatar>
+    <Message side="'incoming'">Hey, are we still on for the deploy today?</Message>
+  </div>
+  <div class="d-flex align-items-end gap-2 justify-content-end">
+    <Message side="'outgoing'">Deploying to prod real quick.</Message>
+    <Avatar className="'flex-shrink-0'"><t t-set-slot="fallback">ME</t></Avatar>
+  </div>
+  <div class="d-flex flex-column align-items-end gap-1">
+    <div class="d-flex align-items-end gap-2 justify-content-end">
+      <Message side="'outgoing'">Just kicked it off, should be done in a few minutes.</Message>
+      <Avatar className="'flex-shrink-0'"><t t-set-slot="fallback">ME</t></Avatar>
+    </div>
+    <Typography variant="'muted'" className="'me-1'">Delivered</Typography>
+  </div>
+  <div class="d-flex align-items-end gap-2">
+    <Avatar className="'flex-shrink-0'"><t t-set-slot="fallback">JL</t></Avatar>
+    <Message side="'incoming'">Sounds good, keep me posted 🚀</Message>
+  </div>
+</div>
+```
+
+| Component | Prop | Type | Notes |
+| --- | --- | --- | --- |
+| `Message` | `side` | `String` | optional |
+| `Message` | `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="message">Message</div>
+```
+
+## Enhanced usage
+
+Call `BaseUI.mount(element)` or rely on `BaseUI.mountAll()` after the script loads.
+
+## Options and attributes
+
+See `dist/baseui.registry.json` for the supported attribute list.
+
+## Methods
+
+Use the global runtime methods: `BaseUI.mount()`, `BaseUI.mountAll()`, and `BaseUI.destroy()`.
+
+## Events
+
+Interactive components emit documented `baseui:*` events from their root element. Static components do not emit events.
+
+## CSS variables
+
+The component inherits BaseUI semantic tokens such as `--baseui-surface`, `--baseui-border`, `--baseui-primary`, and `--baseui-radius`.
+
+## Accessibility behavior
+
+The component preserves authored semantic HTML and adds ARIA roles or state attributes where enhancement is required.
+
+## Examples
+
+See `examples/index.html` for a working CDN-style page.
+
+## Browser support
+
+BaseUI targets modern evergreen browsers that support ES modules, CSS variables, and Bootstrap 5.3.
+
+## Test checklist
+
+Verify light and dark themes, keyboard access for focusable controls, disabled or readonly states when applicable, and cleanup through `BaseUI.destroy()`.

package/docs/components/native-select.md

@@ -0,0 +1,46 @@
+# Native Select
+
+Browser-native select control with Bootstrap-compatible styling.
+
+## Pure Owl component
+
+```js
+import { NativeSelect } from "@thebase/ui";
+```
+
+```base-ui
+<div class="d-grid w-100 gap-2" style="max-width: 24rem">
+  <Label for="'fruit'">Fruit</Label>
+  <NativeSelect>
+    <option value="'apple'">Apple</option>
+    <option value="'banana'">Banana</option>
+    <option value="'blueberry'">Blueberry</option>
+    <option value="'pineapple'">Pineapple</option>
+  </NativeSelect>
+</div>
+```
+
+| Component | Prop | Type | Notes |
+| --- | --- | --- | --- |
+| `NativeSelect` | `value` | `String` | optional |
+| `NativeSelect` | `size` | `String` | optional |
+| `NativeSelect` | `disabled` | `Boolean` | optional |
+| `NativeSelect` | `className` | `String` | optional |
+| `NativeSelect` | `ariaLabel` / `aria-label` | `String` | optional, accessible name for the control |
+| `NativeSelect` | `id` | `String` | optional, e.g. for `Label`'s `for` |
+| `NativeSelect` | `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
+<select b-ui="native-select" id="role">
+  <option>Owner</option>
+  <option>Viewer</option>
+</select>
+```
+
+Options: `b-att-size="sm|lg"`.
+
+Accessibility: keep a visible label and avoid replacing native keyboard behavior.

package/docs/components/navigation-menu.md

@@ -0,0 +1,41 @@
+# Navigation Menu
+
+Use `b-ui="navigation-menu"` for horizontal site or app navigation.
+
+## Pure Owl component
+
+```js
+import { NavigationMenu, NavigationMenuItem } from "@thebase/ui";
+```
+
+```base-ui
+<div style="max-width: 40rem" class="w-100">
+  <NavigationMenu>
+    <NavigationMenuItem href="'#home'">Home</NavigationMenuItem>
+    <NavigationMenuItem href="'#components'">Components</NavigationMenuItem>
+    <NavigationMenuItem href="'/docs'">Docs</NavigationMenuItem>
+    <NavigationMenuItem href="'#list'">List</NavigationMenuItem>
+    <NavigationMenuItem href="'#simple'">Simple</NavigationMenuItem>
+    <NavigationMenuItem href="'#with-icon'">With Icon</NavigationMenuItem>
+  </NavigationMenu>
+</div>
+```
+
+| Component | Prop | Type | Notes |
+| --- | --- | --- | --- |
+| `NavigationMenu` | `className` | `String` | optional |
+| `NavigationMenuItem` | `href` | `String` | optional |
+| `NavigationMenuItem` | `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
+<nav b-ui="navigation-menu" aria-label="Main">
+  <a href="/">Home</a>
+  <a href="/docs" aria-current="page">Docs</a>
+</nav>
+```
+
+BaseUI adds `menubar`/`menuitem` roles and Left/Right arrow focus movement.

package/docs/components/pagination.md

@@ -0,0 +1,50 @@
+# Pagination
+
+Use `b-ui="pagination"` on a `nav` containing a list of links or buttons.
+
+## Pure Owl component
+
+```js
+import { Pagination, PaginationItem } from "@thebase/ui";
+```
+
+```base-ui
+<div style="max-width: 28rem" class="w-100">
+  <Pagination>
+    <PaginationItem>
+      <Icon name="'chevron-left'"/>
+      <span class="ms-1">Previous</span>
+    </PaginationItem>
+    <PaginationItem>1</PaginationItem>
+    <PaginationItem current="true">2</PaginationItem>
+    <PaginationItem>3</PaginationItem>
+    <PaginationItem disabled="true">...</PaginationItem>
+    <PaginationItem>
+      <span class="me-1">Next</span>
+      <Icon name="'chevron-right'"/>
+    </PaginationItem>
+  </Pagination>
+</div>
+```
+
+| Component | Prop | Type | Notes |
+| --- | --- | --- | --- |
+| `Pagination` | `className` | `String` | optional |
+| `PaginationItem` | `current` | `Boolean` | optional |
+| `PaginationItem` | `disabled` | `Boolean` | optional |
+| `PaginationItem` | `onClick` | `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
+<nav b-ui="pagination" aria-label="Pagination">
+  <ul>
+    <li><a href="?page=1" aria-current="page">1</a></li>
+    <li><a href="?page=2">2</a></li>
+  </ul>
+</nav>
+```
+
+BaseUI adds Bootstrap pagination classes, active states, and disabled item styling.

package/docs/components/popover.md

@@ -0,0 +1,88 @@
+# Popover
+
+Use `b-ui="popover"` with trigger and content nodes.
+
+## Pure Owl component
+
+```js
+import { Popover, PopoverContent, PopoverTrigger } from "@thebase/ui";
+```
+
+```base-ui
+<div style="max-width: 28rem">
+  <Popover>
+    <PopoverTrigger>
+      <Button variant="'outline'">Open Popover</Button>
+    </PopoverTrigger>
+    <PopoverContent>
+      <div class="d-flex flex-column gap-1">
+        <Typography variant="'h4'">Title</Typography>
+        <Typography variant="'muted'">Description text here.</Typography>
+      </div>
+    </PopoverContent>
+  </Popover>
+</div>
+```
+
+| Component | Prop | Type | Notes |
+| --- | --- | --- | --- |
+| `Popover` | `onOpenChange` | `Function` | optional |
+| `Popover` | `className` | `String` | optional |
+| `PopoverContent` | `content` | `String` | optional; plain content shortcut, passed directly as the bootstrap `content` option |
+| `PopoverContent` | `className` | `String` | optional |
+| `PopoverTrigger` | `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`.
+
+Both the pure Owl and static forms are driven by a live `bootstrap.Popover` instance owned on the trigger element — **the visible popup is Bootstrap's own generated DOM (a `.popover`/`.popover-arrow`/`.popover-body` node, positioned via Popper), appended to `document.body`, not rendered inline where you authored the popover.** Don't query for it as a descendant of the trigger or root; query `document.body.querySelector(".popover .popover-body")` instead. There's no separate heading/title concept in the current API — only body content (`.popover-body`); no `.popover-header` is generated.
+
+The default slot's rendered markup is captured into an HTML string for Bootstrap's `content`/`html: true` options (Bootstrap can't consume live vnodes): `PopoverContent` renders the slot into a hidden buffer element internal to its own template (it is no longer a visibly-toggled popup itself), `PopoverTrigger` reads that buffer's `innerHTML` on mount to seed the bootstrap instance, and re-syncs the live popup via `.setContent({'.popover-body': html})` whenever that HTML changes on a later render.
+
+Unlike `Tooltip`/hover-driven components, Bootstrap's own `trigger: "click"` option would bind its own click listener directly on the trigger element, independent of `PopoverTrigger`'s own `t-on-click`. To avoid double-toggling on a single click, the pure Owl `PopoverTrigger` constructs its `bootstrap.Popover` instance with `trigger: "manual"` and calls `.toggle()` itself from `onClick` — `shown.bs.popover`/`hidden.bs.popover` still fire from `.toggle()` regardless of the `trigger` option, since that option only gates Bootstrap's own auto-binding, not event dispatch. The static adapter, which has no competing click handler of its own, passes `trigger: "click"` and relies on Bootstrap's built-in binding instead.
+
+## Static component
+
+```base-ui
+<span b-ui="popover">
+  <button b-popover-trigger type="button">More</button>
+  <span b-popover-content>Helpful contextual content.</span>
+</span>
+```
+
+The static adapter reads `[b-popover-content]` once at mount time as the popover's HTML content, then removes that node from the DOM — Bootstrap owns showing/hiding the content from then on, so no `[b-popover-content]` element survives in the authored markup post-mount. Events: `baseui:open`, `baseui:close` (dispatched from the root element on Bootstrap's own `shown.bs.popover`/`hidden.bs.popover`).
+
+## Enhanced usage
+
+Call `BaseUI.mount(element)` or rely on `BaseUI.mountAll()` after the script loads.
+
+## Options and attributes
+
+See `dist/baseui.registry.json` for the supported attribute list.
+
+## Methods
+
+Use the global runtime methods: `BaseUI.mount()`, `BaseUI.mountAll()`, and `BaseUI.destroy()`.
+
+## Events
+
+Interactive components emit documented `baseui:*` events from their root element. Listen for Bootstrap's own `shown.bs.popover`/`hidden.bs.popover` on the trigger element to react to show/hide; BaseUI mirrors those into `b-att-state` (`open`/`closed`) and `aria-expanded` on the static trigger, and `this.env.popover.open`-equivalent reactive state on the pure Owl components.
+
+## 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 `.popover`/`.popover-arrow`/`.popover-body` CSS (loaded via `dist/baseui.min.css`), not BaseUI's own classes.
+
+## Accessibility behavior
+
+The component preserves authored semantic HTML and adds ARIA roles or state attributes where enhancement is required.
+
+## Examples
+
+See `examples/index.html` for a working CDN-style page.
+
+## Browser support
+
+BaseUI targets modern evergreen browsers that support ES modules, CSS variables, and Bootstrap 5.3.
+
+## Test checklist
+
+Verify light and dark themes, keyboard access for focusable controls, disabled or readonly states when applicable, and cleanup through `BaseUI.destroy()`.