@thebase/ui 1.1.3 → 1.1.5

package/docs/components/field.md

@@ -2,7 +2,7 @@
 
 Combine labels, controls, and help text to compose accessible form fields and grouped inputs.
 
-## Pure Owl component
+## Base component
 
 ```js
 import {
@@ -25,37 +25,31 @@ import {
     <FieldLegend>Payment Method</FieldLegend>
     <FieldDescription>All transactions are secure and encrypted</FieldDescription>
     <FieldGroup className="'mt-3 gap-3 d-flex flex-column'">
-      <Field>
-        <FieldLabel for="'card-name'">Name on Card</FieldLabel>
+      <Field label="'Name on Card'">
         <Input id="'card-name'" value="'Evil Rabbit'"/>
       </Field>
 
-      <Field>
-        <FieldLabel for="'card-number'">Card Number</FieldLabel>
-        <Input id="'card-number'" value="'1234 5678 9012 3456'"/>
-        <FieldDescription>Enter your 16-digit card number</FieldDescription>
+      <Field label="'Card Number'" description="'Enter your 16-digit card number'">
+        <Input id="'card-number'" value="'1234 5678 9012 3456'" leadingIcon="'credit-card'"/>
       </Field>
 
       <div class="row g-3">
         <div class="col-4">
-          <Field>
-            <FieldLabel for="'expiry-month'">Month</FieldLabel>
-            <NativeSelect id="'expiry-month'" ariaLabel="'Month'">
+          <Field label="'Month'">
+            <NativeSelect id="'expiry-month'">
               <option>MM</option>
             </NativeSelect>
           </Field>
         </div>
         <div class="col-4">
-          <Field>
-            <FieldLabel for="'expiry-year'">Year</FieldLabel>
-            <NativeSelect id="'expiry-year'" ariaLabel="'Year'">
+          <Field label="'Year'">
+            <NativeSelect id="'expiry-year'">
               <option>YYYY</option>
             </NativeSelect>
           </Field>
         </div>
         <div class="col-4">
-          <Field>
-            <FieldLabel for="'card-cvv'">CVV</FieldLabel>
+          <Field label="'CVV'">
             <Input id="'card-cvv'" value="'123'"/>
           </Field>
         </div>
@@ -72,8 +66,7 @@ import {
         </Field>
       </FieldSet>
 
-      <Field>
-        <FieldLabel for="'comments'">Comments</FieldLabel>
+      <Field label="'Comments'">
         <Textarea id="'comments'" placeholder="'Add any additional comments'" rows="3"/>
       </Field>
     </FieldGroup>
@@ -86,6 +79,19 @@ import {
 </form>
 ```
 
+### Outlined controls
+
+`Field` accepts `label`, `labelBackground`, `description`, `error` and `invalid`, and hands them to the control inside it. `Input`, `Textarea`, `NativeSelect`, `Select`, `Combobox` and `DatePicker` draw them in the Material outlined style (floating label, helper text, error text and icon). A control's own `label`/`supportingText`/`errorText` props win over the `Field` values.
+
+```base-ui
+<div class="d-grid gap-4" style="max-width: 28rem; width: 100%">
+  <Field label="'Email'" description="'We never share it'"><Input leadingIcon="'mail'"/></Field>
+  <Field label="'Bio'" error="'Too short'"><Textarea/></Field>
+</div>
+```
+
+Use one control per labelled `Field`. For checkboxes, radios and switches keep `FieldLabel` and `FieldDescription`; `Field`'s `label` prop no longer renders a standalone label.
+
 ## Static component
 
 ```base-ui

package/docs/components/form.md

@@ -1,8 +1,8 @@
 # Form
 
-Build an accessible Bug Report form with BaseUI `Field` layout, BaseUI `Button` actions, and Owl `t-model` input bindings.
+Build an accessible Bug Report form with Base UI `Field` layout, the Base UI `Button` actions, and Owl `t-model` input bindings.
 
-## Pure Owl component
+## Base component
 
 ```js
 import { Component, useState, xml } from "@base/owl";
@@ -144,7 +144,7 @@ class BugReportExample extends Component {
 </form>
 ```
 
-This is the same Bug Report form converted from static `b-ui` markup to pure Owl composition: `FieldGroup`, `Field`, `FieldLabel`, `FieldDescription`, and `Button` replace the static adapters, while `t-model` owns the input state.
+This is the same Bug Report form converted from base static markup (`b-ui`) to pure Base composition: `FieldGroup`, `Field`, `FieldLabel`, `FieldDescription`, and `Button` replace the static adapters, while `t-model` owns the input state.
 
 ## State
 

package/docs/components/hover-card.md

@@ -1,6 +1,6 @@
 # Hover Card
 
-## Pure Owl component
+## Base component
 
 ```js
 import { HoverCard, HoverCardContent, HoverCardTrigger } from "@thebase/ui";
@@ -10,15 +10,12 @@ import { HoverCard, HoverCardContent, HoverCardTrigger } from "@thebase/ui";
 <div style="max-width: 28rem">
   <HoverCard>
     <HoverCardTrigger>
-      <a href="https://twitter.com/shadcn" class="text-decoration-underline">@shadcn</a>
+      <a href="https://thebase.vn" class="text-decoration-underline">@thebase</a>
     </HoverCardTrigger>
     <HoverCardContent className="'w-auto'">
       <div class="d-flex justify-content-between gap-3" style="width: 20rem">
-        <Avatar src="'https://github.com/shadcn.png'" alt="'@shadcn'">
-          <t t-set-slot="fallback">SC</t>
-        </Avatar>
-        <div class="d-flex flex-column gap-1">
-          <h4 class="small fw-semibold mb-0">@shadcn</h4>
+        <div class="d-flex flex-column gap-1" style="min-width: 0">
+          <h4 class="small fw-semibold mb-0">@thebase</h4>
           <p class="small mb-0">The React Framework – created and maintained by @vercel.</p>
           <div class="d-flex align-items-center pt-2">
             <span class="small text-muted">Joined December 2021</span>
@@ -36,7 +33,7 @@ import { HoverCard, HoverCardContent, HoverCardTrigger } from "@thebase/ui";
 | `HoverCardContent` | `className` | `String` | optional |
 | `HoverCardTrigger` | `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`.
+See [Base Components](/examples/blocks.html#/docs/guide/owl-components) for how to load `@base/owl` and `dist/baseui.templates.xml`.
 
 ## Static component
 

package/docs/components/icon.md

@@ -1,8 +1,8 @@
 # Icon
 
-BaseUI includes the full Lucide SVG icon set as a built-in CDN icon library.
+The Base UI includes the full Lucide SVG icon set as a built-in CDN icon library.
 
-## Pure Owl component
+## Base component
 
 ```js
 import { Icon } from "@thebase/ui";
@@ -21,7 +21,7 @@ import { Icon } from "@thebase/ui";
 | `Icon` | `baseUrl` | `String` | optional |
 | `Icon` | `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`.
+See [Base Components](/examples/blocks.html#/docs/guide/owl-components) for how to load `@base/owl` and `dist/baseui.templates.xml`.
 
 ## Static component
 

package/docs/components/input-group.md

@@ -1,6 +1,6 @@
 # Input Group
 
-## Pure Owl component
+## Base component
 
 ```js
 import {
@@ -15,22 +15,22 @@ import {
 
 ```base-ui
 <div class="d-flex flex-column gap-4 w-100" style="max-width: 28rem">
-  <InputGroup>
-    <InputGroupInput placeholder="'Search...'"/>
+  <InputGroup label="'Search'" supportingText="'Search the docs'">
+    <InputGroupInput/>
     <InputGroupAddon align="'inline-end'">
       <Icon name="'search'"/>
     </InputGroupAddon>
   </InputGroup>
 
-  <InputGroup>
+  <InputGroup label="'Website'">
     <InputGroupInput placeholder="'https://'"/>
     <InputGroupAddon align="'inline-end'">
       <InputGroupButton>Search</InputGroupButton>
     </InputGroupAddon>
   </InputGroup>
 
-  <InputGroup>
-    <InputGroupTextarea placeholder="'Enter message...'" rows="3"/>
+  <InputGroup label="'Message'">
+    <InputGroupTextarea rows="3"/>
     <InputGroupAddon align="'block-end'">
       <InputGroupText>0/280</InputGroupText>
       <InputGroupButton variant="'default'" className="'ms-auto'">Send</InputGroupButton>
@@ -42,6 +42,7 @@ import {
 | Component | Prop | Type | Notes |
 | --- | --- | --- | --- |
 | `InputGroup` | `className` | `String` | optional |
+| `InputGroup` | `label`, `labelBackground`, `supportingText`, `errorText`, `invalid` | `String` / `Boolean` | Material-style outlined group, same label as [Input](/examples/blocks.html#/docs/components/input): the label floats onto the border once the control is focused or filled. Also inherited from a parent `Field`. |
 | `InputGroupAddon` | `align` | `String` | `inline-start` (default), `inline-end`, `block-start`, `block-end` |
 | `InputGroupButton` | `variant` | `String` | `default`, `destructive`, `outline`, `secondary`, `ghost` (default), `link` |
 | `InputGroupButton` | `size` | `String` | `xs` (default), `icon-xs`, `sm`, `icon-sm` |
@@ -49,7 +50,7 @@ import {
 | `InputGroupInput` | `type`, `value`, `placeholder`, `disabled`, `readonly`, `invalid` | mixed | input control |
 | `InputGroupTextarea` | `value`, `placeholder`, `rows`, `disabled`, `readonly`, `invalid`, `resize` | mixed | textarea control |
 
-See [Pure Owl Components](/examples/blocks.html#/docs/guide/owl-components) for how to load `@base/owl` and `dist/baseui.templates.xml`.
+See [Base Components](/examples/blocks.html#/docs/guide/owl-components) for how to load `@base/owl` and `dist/baseui.templates.xml`.
 
 ## Static component
 

package/docs/components/input-otp.md

@@ -4,9 +4,9 @@ Use `b-ui="input-otp"` for a CDN-ready input otp component.
 
 ## CDN install requirements
 
-Load the pinned BaseUI CSS and JavaScript files; no extra dependency is required for this component.
+Load the pinned the Base UI CSS and JavaScript files; no extra dependency is required for this component.
 
-## Pure Owl component
+## Base component
 
 ```js
 import { InputOtp } from "@thebase/ui";
@@ -26,7 +26,7 @@ import { InputOtp } from "@thebase/ui";
 | `InputOtp` | `className` | `String` | optional |
 | `InputOtp` | `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`.
+See [Base Components](/examples/blocks.html#/docs/guide/owl-components) for how to load `@base/owl` and `dist/baseui.templates.xml`.
 
 ## Static component
 
@@ -52,7 +52,7 @@ Interactive components emit documented `baseui:*` events from their root element
 
 ## CSS variables
 
-The component inherits BaseUI semantic tokens such as `--b-surface`, `--b-border`, `--b-primary`, and `--b-radius`.
+The component inherits the Base UI semantic tokens such as `--b-surface`, `--b-border`, `--b-primary`, and `--b-radius`.
 
 ## Accessibility behavior
 
@@ -64,7 +64,7 @@ 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.
+The Base UI targets modern evergreen browsers that support ES modules, CSS variables, and Bootstrap 5.3.
 
 ## Test checklist
 

package/docs/components/input.md

@@ -2,7 +2,7 @@
 
 Use `b-ui="input"` on a native input element.
 
-## Pure Owl component
+## Base component
 
 ```js
 import { Input } from "@thebase/ui";
@@ -30,6 +30,7 @@ import { Input } from "@thebase/ui";
 | --- | --- | --- |
 | `value` | `String` | controlled value; the component never mutates it itself |
 | `label` | `String` | Material-style outlined field: label rests inside, floats onto the border when focused/filled (or when `placeholder` is set) |
+| `labelBackground` | `String` | any CSS colour for the floated label's background (default matches the field, `--bu-field-bg`); use it when the field sits on a surface of a different colour |
 | `supportingText` | `String` | helper line under the field, linked via `aria-describedby` |
 | `errorText` | `String` | marks the field invalid, replaces `supportingText`, swaps the trailing icon for an error icon, sets `aria-invalid` |
 | `leadingIcon` / `trailingIcon` | `String` | Lucide icon names (outlined mode only) |
@@ -48,7 +49,7 @@ import { Input } from "@thebase/ui";
 | `onInput` | `Function` | called as `(value, event)` on the native `input` event |
 | `onChange` | `Function` | called as `(value, event)` on the native `change` event |
 
-See [Pure Owl Components](/examples/blocks.html#/docs/guide/owl-components) for how to load `@base/owl` and `dist/baseui.templates.xml`.
+See [Base Components](/examples/blocks.html#/docs/guide/owl-components) for how to load `@base/owl` and `dist/baseui.templates.xml`.
 
 ## Static component
 
@@ -74,15 +75,15 @@ Use the global runtime methods: `thebase.mount()`, `thebase.mountAll()`, and `th
 
 ## Events
 
-Input does not emit custom BaseUI events. Use native `input` and `change` events.
+Input does not emit custom the Base UI events. Use native `input` and `change` events.
 
 ## CSS variables
 
-The component inherits BaseUI semantic tokens such as `--b-input`, `--b-border`, `--b-ring`, and `--b-radius`.
+The component inherits the Base UI semantic tokens such as `--b-input`, `--b-border`, `--b-ring`, and `--b-radius`.
 
 ## Browser support
 
-BaseUI targets modern evergreen browsers that support ES modules, CSS variables, and Bootstrap 5.3.
+The Base UI targets modern evergreen browsers that support ES modules, CSS variables, and Bootstrap 5.3.
 
 ## Test checklist
 

package/docs/components/item.md

@@ -1,6 +1,6 @@
 # Item
 
-## Pure Owl component
+## Base component
 
 ```js
 import { Item } from "@thebase/ui";
@@ -54,7 +54,7 @@ import { Item } from "@thebase/ui";
 | --- | --- | --- | --- |
 | `Item` | `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`.
+See [Base Components](/examples/blocks.html#/docs/guide/owl-components) for how to load `@base/owl` and `dist/baseui.templates.xml`.
 
 ## Static component
 

package/docs/components/kbd.md

@@ -1,6 +1,6 @@
 # Kbd
 
-## Pure Owl component
+## Base component
 
 ```js
 import { Kbd } from "@thebase/ui";
@@ -35,7 +35,7 @@ import { Kbd } from "@thebase/ui";
 | --- | --- | --- | --- |
 | `Kbd` | `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`.
+See [Base Components](/examples/blocks.html#/docs/guide/owl-components) for how to load `@base/owl` and `dist/baseui.templates.xml`.
 
 ## Static component
 

package/docs/components/label.md

@@ -2,7 +2,7 @@
 
 Form label with consistent spacing and optional required marker.
 
-## Pure Owl component
+## Base component
 
 ```js
 import { Label } from "@thebase/ui";
@@ -23,7 +23,7 @@ import { Label } from "@thebase/ui";
 | `Label` | `required` | `Boolean` | optional |
 | `Label` | `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`.
+See [Base Components](/examples/blocks.html#/docs/guide/owl-components) for how to load `@base/owl` and `dist/baseui.templates.xml`.
 
 ## Static component
 

package/docs/components/markdown.md

@@ -1,14 +1,14 @@
 # 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/marked.min.js` (marked v15). Fenced ` ```mermaid ` code blocks render as inline SVG via `src/runtime/mermaid/mermaid.esm.min.mjs`. Fenced ` ```base-ui ` code blocks render as a live BaseUI preview through the page's global static runtime (`window.thebase`, e.g. `dist/baseui.min.js`).
+Use `b-ui="markdown"` (or the pure Base `Markdown` component) to render Markdown or mount an editable Markdown document. Read-only parsing uses the vendored `src/runtime/marked/marked.min.js` (marked v15). Fenced ` ```mermaid ` code blocks render as inline SVG via `src/runtime/mermaid/mermaid.esm.min.mjs`. Fenced ` ```base-ui ` code blocks render as a live the Base UI preview through the page's global static runtime (`window.thebase`, e.g. `dist/baseui.min.js`).
 
 Editable mode lazy-loads `dist/runtime/milkdown/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.
+Load the pinned the Base UI 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
+## Base component
 
 ```js
 import { Markdown } from "@base/component";

package/docs/components/marker.md

@@ -1,6 +1,6 @@
 # Marker
 
-## Pure Owl component
+## Base component
 
 ```js
 import { Marker } from "@thebase/ui";
@@ -19,7 +19,7 @@ import { Marker } from "@thebase/ui";
 | --- | --- | --- | --- |
 | `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`.
+See [Base Components](/examples/blocks.html#/docs/guide/owl-components) for how to load `@base/owl` and `dist/baseui.templates.xml`.
 
 ## Static component
 

package/docs/components/menubar.md

@@ -1,6 +1,6 @@
 # Menubar
 
-## Pure Owl component
+## Base component
 
 ```js
 import { Menubar } from "@thebase/ui";
@@ -91,7 +91,7 @@ import { Menubar } from "@thebase/ui";
 | --- | --- | --- | --- |
 | `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`.
+See [Base Components](/examples/blocks.html#/docs/guide/owl-components) for how to load `@base/owl` and `dist/baseui.templates.xml`.
 
 ## Static component
 

package/docs/components/message-scroller.md

@@ -4,9 +4,9 @@ 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.
+Load the pinned the Base UI CSS and JavaScript files; no extra dependency is required for this component.
 
-## Pure Owl component
+## Base component
 
 ```js
 import { MessageScroller } from "@thebase/ui";
@@ -48,7 +48,7 @@ import { MessageScroller } from "@thebase/ui";
 | `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`.
+See [Base Components](/examples/blocks.html#/docs/guide/owl-components) for how to load `@base/owl` and `dist/baseui.templates.xml`.
 
 ## Static component
 
@@ -74,7 +74,7 @@ Interactive components emit documented `baseui:*` events from their root element
 
 ## CSS variables
 
-The component inherits BaseUI semantic tokens such as `--b-surface`, `--b-border`, `--b-primary`, and `--b-radius`.
+The component inherits the Base UI semantic tokens such as `--b-surface`, `--b-border`, `--b-primary`, and `--b-radius`.
 
 ## Accessibility behavior
 
@@ -86,7 +86,7 @@ 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.
+The Base UI targets modern evergreen browsers that support ES modules, CSS variables, and Bootstrap 5.3.
 
 ## Test checklist
 

package/docs/components/message.md

@@ -4,9 +4,9 @@ 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.
+Load the pinned the Base UI CSS and JavaScript files; no extra dependency is required for this component.
 
-## Pure Owl component
+## Base component
 
 ```js
 import { Message } from "@thebase/ui";
@@ -41,7 +41,7 @@ import { Message } from "@thebase/ui";
 | `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`.
+See [Base Components](/examples/blocks.html#/docs/guide/owl-components) for how to load `@base/owl` and `dist/baseui.templates.xml`.
 
 ## Static component
 
@@ -67,7 +67,7 @@ Interactive components emit documented `baseui:*` events from their root element
 
 ## CSS variables
 
-The component inherits BaseUI semantic tokens such as `--b-surface`, `--b-border`, `--b-primary`, and `--b-radius`.
+The component inherits the Base UI semantic tokens such as `--b-surface`, `--b-border`, `--b-primary`, and `--b-radius`.
 
 ## Accessibility behavior
 
@@ -79,7 +79,7 @@ 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.
+The Base UI targets modern evergreen browsers that support ES modules, CSS variables, and Bootstrap 5.3.
 
 ## Test checklist
 

package/docs/components/native-select.md

@@ -2,7 +2,7 @@
 
 Browser-native select control with Bootstrap-compatible styling.
 
-## Pure Owl component
+## Base component
 
 ```js
 import { NativeSelect } from "@thebase/ui";
@@ -10,8 +10,7 @@ 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>
+  <NativeSelect label="'Fruit'">
     <option value="'apple'">Apple</option>
     <option value="'banana'">Banana</option>
     <option value="'blueberry'">Blueberry</option>
@@ -29,8 +28,9 @@ import { NativeSelect } from "@thebase/ui";
 | `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 |
+| `NativeSelect` | `label`, `labelBackground`, `supportingText`, `errorText`, `invalid` | `String` / `Boolean` | Material-style outlined field, same behaviour as [Input](/examples/blocks.html#/docs/components/input): the label floats onto the border, `errorText` replaces `supportingText`. Also inherited from a parent `Field`. |
 
-See [Pure Owl Components](/examples/blocks.html#/docs/guide/owl-components) for how to load `@base/owl` and `dist/baseui.templates.xml`.
+See [Base Components](/examples/blocks.html#/docs/guide/owl-components) for how to load `@base/owl` and `dist/baseui.templates.xml`.
 
 ## Static component
 

package/docs/components/navigation-menu.md

@@ -2,7 +2,7 @@
 
 Use `b-ui="navigation-menu"` for horizontal site or app navigation.
 
-## Pure Owl component
+## Base component
 
 ```js
 import { NavigationMenu, NavigationMenuItem } from "@thebase/ui";
@@ -27,7 +27,7 @@ import { NavigationMenu, NavigationMenuItem } from "@thebase/ui";
 | `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`.
+See [Base Components](/examples/blocks.html#/docs/guide/owl-components) for how to load `@base/owl` and `dist/baseui.templates.xml`.
 
 ## Static component
 
@@ -38,4 +38,4 @@ See [Pure Owl Components](/examples/blocks.html#/docs/guide/owl-components) for
 </nav>
 ```
 
-BaseUI adds `menubar`/`menuitem` roles and Left/Right arrow focus movement.
+The Base UI adds `menubar`/`menuitem` roles and Left/Right arrow focus movement.

package/docs/components/pagination.md

@@ -2,7 +2,7 @@
 
 Use `b-ui="pagination"` on a `nav` containing a list of links or buttons.
 
-## Pure Owl component
+## Base component
 
 ```js
 import { Pagination, PaginationItem } from "@thebase/ui";
@@ -34,7 +34,7 @@ import { Pagination, PaginationItem } from "@thebase/ui";
 | `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`.
+See [Base Components](/examples/blocks.html#/docs/guide/owl-components) for how to load `@base/owl` and `dist/baseui.templates.xml`.
 
 ## Static component
 
@@ -47,4 +47,4 @@ See [Pure Owl Components](/examples/blocks.html#/docs/guide/owl-components) for
 </nav>
 ```
 
-BaseUI adds Bootstrap pagination classes, active states, and disabled item styling.
+The Base UI adds Bootstrap pagination classes, active states, and disabled item styling.

package/docs/components/popover.md

@@ -2,7 +2,7 @@
 
 Use `b-ui="popover"` with trigger and content nodes.
 
-## Pure Owl component
+## Base component
 
 ```js
 import { Popover, PopoverContent, PopoverTrigger } from "@thebase/ui";
@@ -32,13 +32,13 @@ import { Popover, PopoverContent, PopoverTrigger } from "@thebase/ui";
 | `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`.
+See [Base 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.
+Both the pure Base 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.
+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 Base `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
 
@@ -65,11 +65,11 @@ Use the global runtime methods: `thebase.mount()`, `thebase.mountAll()`, and `th
 
 ## 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.
+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; the Base UI 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 Base components.
 
 ## CSS variables
 
-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 `.popover`/`.popover-arrow`/`.popover-body` CSS (loaded via `dist/baseui.min.css`), not BaseUI's own classes.
+The component inherits the Base UI semantic tokens such as `--b-surface`, `--b-border`, `--b-primary`, and `--b-radius`. The popup itself is styled by Bootstrap's own bundled `.popover`/`.popover-arrow`/`.popover-body` CSS (loaded via `dist/baseui.min.css`), not the Base UI's own classes.
 
 ## Accessibility behavior
 
@@ -81,7 +81,7 @@ 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.
+The Base UI targets modern evergreen browsers that support ES modules, CSS variables, and Bootstrap 5.3.
 
 ## Test checklist
 

package/docs/components/progress.md

@@ -1,6 +1,6 @@
 # Progress
 
-## Pure Owl component
+## Base component
 
 ```js
 import { Progress } from "@thebase/ui";
@@ -18,7 +18,7 @@ import { Progress } from "@thebase/ui";
 | `Progress` | `max` | `Number` | optional |
 | `Progress` | `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`.
+See [Base Components](/examples/blocks.html#/docs/guide/owl-components) for how to load `@base/owl` and `dist/baseui.templates.xml`.
 
 ## Static component