@thebase/ui 0.0.4

package/docs/components/form.md

@@ -0,0 +1,202 @@
+# Form
+
+Build an accessible Bug Report form with BaseUI `Field` layout, BaseUI `Button` actions, and Owl `t-model` input bindings.
+
+## Pure Owl component
+
+```js
+import { Component, useState, xml } from "@base/owl";
+import {
+  Button,
+  Field,
+  FieldDescription,
+  FieldGroup,
+  FieldLabel,
+} from "@thebase/ui";
+
+class BugReportExample extends Component {
+  static components = {
+    Button,
+    Field,
+    FieldDescription,
+    FieldGroup,
+    FieldLabel,
+  };
+  static template = xml`
+    <form class="baseui-form" data-slot="form" novalidate="novalidate" t-on-submit="submit">
+      <div class="baseui-form-header">
+        <h3 class="baseui-form-title">Bug Report</h3>
+        <p class="baseui-form-description">Help us improve by reporting bugs you encounter.</p>
+      </div>
+
+      <FieldGroup className="'baseui-form-fields'">
+        <Field>
+          <FieldLabel for="'bug-title'">Bug Title</FieldLabel>
+          <input
+            id="bug-title"
+            name="title"
+            class="form-control baseui-form-control"
+            type="text"
+            placeholder="Login button not working on mobile"
+            autocomplete="off"
+            t-model="state.title"
+          />
+        </Field>
+
+        <Field>
+          <FieldLabel for="'bug-description'">Description</FieldLabel>
+          <div class="baseui-form-input-group" data-slot="input-group" role="group">
+            <textarea
+              id="bug-description"
+              name="description"
+              class="form-control baseui-form-textarea"
+              placeholder="I'm having an issue with the login button on mobile."
+              maxlength="100"
+              rows="6"
+              t-model="state.description"
+            ></textarea>
+            <div class="baseui-form-counter" data-slot="input-group-addon" data-align="block-end">
+              <span class="baseui-form-counter-text">
+                <t t-esc="state.description.length"/>/100 characters
+              </span>
+            </div>
+          </div>
+          <FieldDescription>Include steps to reproduce, expected behavior, and what actually happened.</FieldDescription>
+        </Field>
+      </FieldGroup>
+
+      <Field orientation="'horizontal'" className="'baseui-form-actions'">
+        <Button type="'button'" variant="'outline'" onClick="() => this.reset()">Reset</Button>
+        <Button type="'submit'">Submit</Button>
+      </Field>
+    </form>
+  `;
+
+  setup() {
+    this.state = useState({
+      title: "",
+      description: "",
+    });
+  }
+
+  reset() {
+    this.state.title = "";
+    this.state.description = "";
+  }
+
+  submit(event) {
+    event.preventDefault();
+    console.log({
+      title: this.state.title,
+      description: this.state.description,
+    });
+  }
+}
+```
+
+```base-ui
+<form class="baseui-form" data-slot="form" novalidate="novalidate" t-on-submit="submit">
+  <div class="baseui-form-header">
+    <h3 class="baseui-form-title">Bug Report</h3>
+    <p class="baseui-form-description">Help us improve by reporting bugs you encounter.</p>
+  </div>
+
+  <FieldGroup className="'baseui-form-fields'">
+    <Field>
+      <FieldLabel for="'bug-title'">Bug Title</FieldLabel>
+      <input
+        id="bug-title"
+        name="title"
+        class="form-control baseui-form-control"
+        type="text"
+        placeholder="Login button not working on mobile"
+        autocomplete="off"
+        t-model="state.title"
+      />
+    </Field>
+
+    <Field>
+      <FieldLabel for="'bug-description'">Description</FieldLabel>
+      <div class="baseui-form-input-group" data-slot="input-group" role="group">
+        <textarea
+          id="bug-description"
+          name="description"
+          class="form-control baseui-form-textarea"
+          placeholder="I'm having an issue with the login button on mobile."
+          maxlength="100"
+          rows="6"
+          t-model="state.description"
+        ></textarea>
+        <div class="baseui-form-counter" data-slot="input-group-addon" data-align="block-end">
+          <span class="baseui-form-counter-text">
+            <t t-esc="state.description.length"/>/100 characters
+          </span>
+        </div>
+      </div>
+      <FieldDescription>Include steps to reproduce, expected behavior, and what actually happened.</FieldDescription>
+    </Field>
+  </FieldGroup>
+
+  <Field orientation="'horizontal'" className="'baseui-form-actions'">
+    <Button type="'button'" variant="'outline'" onClick="() => this.reset()">Reset</Button>
+    <Button type="'submit'">Submit</Button>
+  </Field>
+</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.
+
+## State
+
+| Field | Binding | Notes |
+| --- | --- | --- |
+| `title` | `t-model="state.title"` | trims or validates in your submit handler if needed |
+| `description` | `t-model="state.description"` | drives the live `state.description.length` counter |
+
+## Static component
+
+```base-ui
+<form b-ui="form">
+  <div class="baseui-form-header">
+    <h3 class="baseui-form-title">Bug Report</h3>
+    <p class="baseui-form-description">Help us improve by reporting bugs you encounter.</p>
+  </div>
+
+  <div b-field-group class="baseui-form-fields">
+    <div b-ui="field">
+      <label b-field-label for="bug-title">Bug Title</label>
+      <input
+        b-ui="input"
+        id="bug-title"
+        name="title"
+        type="text"
+        placeholder="Login button not working on mobile"
+        autocomplete="off"
+      >
+    </div>
+
+    <div b-ui="field">
+      <label b-field-label for="bug-description">Description</label>
+      <div class="baseui-form-input-group" data-slot="input-group" role="group">
+        <textarea
+          b-ui="textarea"
+          id="bug-description"
+          name="description"
+          placeholder="I'm having an issue with the login button on mobile."
+          maxlength="100"
+          rows="6"
+        ></textarea>
+        <div class="baseui-form-counter" data-slot="input-group-addon" data-align="block-end">
+          <span b-form-counter>0/100 characters</span>
+        </div>
+      </div>
+      <p b-field-description>Include steps to reproduce, expected behavior, and what actually happened.</p>
+    </div>
+  </div>
+
+  <div b-ui="field" b-att-orientation="horizontal" class="baseui-form-actions">
+    <button b-ui="button" b-att-variant="outline" b-form-reset type="button">Reset</button>
+    <button b-ui="button" type="submit">Submit</button>
+  </div>
+</form>
+```

package/docs/components/hover-card.md

@@ -0,0 +1,48 @@
+# Hover Card
+
+## Pure Owl component
+
+```js
+import { HoverCard, HoverCardContent, HoverCardTrigger } from "@thebase/ui";
+```
+
+```base-ui
+<div style="max-width: 28rem">
+  <HoverCard>
+    <HoverCardTrigger>
+      <a href="https://twitter.com/shadcn" class="text-decoration-underline">@shadcn</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>
+          <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>
+          </div>
+        </div>
+      </div>
+    </HoverCardContent>
+  </HoverCard>
+</div>
+```
+
+| Component | Prop | Type | Notes |
+| --- | --- | --- | --- |
+| `HoverCard` | `className` | `String` | optional |
+| `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`.
+
+## Static component
+
+```base-ui
+<span b-ui="hover-card">
+  <button b-hover-card-trigger type="button">Hover</button>
+  <span b-hover-card-content>Contextual preview content.</span>
+</span>
+```

package/docs/components/icon.md

@@ -0,0 +1,53 @@
+# Icon
+
+BaseUI includes the full Lucide SVG icon set as a built-in CDN icon library.
+
+## Pure Owl component
+
+```js
+import { Icon } from "@thebase/ui";
+```
+
+```base-ui
+<Icon name="'search'"/>
+```
+
+| Component | Prop | Type | Notes |
+| --- | --- | --- | --- |
+| `Icon` | `name` | `String` | required |
+| `Icon` | `label` | `String` | optional |
+| `Icon` | `title` | `String` | optional, native hover tooltip |
+| `Icon` | `size` | `String` | optional |
+| `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`.
+
+## Static component
+
+```base-ui
+<span b-icon="search"></span>
+<span b-icon="panel-left" b-icon-size="20px" aria-label="Open sidebar"></span>
+```
+
+Icons render as CSS masks, so they inherit `currentColor` from the surrounding text, button, menu item, or theme.
+
+## Attributes
+
+- `b-icon` enables the icon component and names any Lucide icon in kebab-case, camelCase, snake_case, or space-separated form.
+- `b-icon-size` sets the icon size, such as `16px`, `1rem`, or `1.25em`.
+- `aria-label` makes the icon accessible as an image.
+- `b-icon-base-url` overrides the SVG base URL for self-hosted icons.
+
+The previous verbose form, `<span b-ui="icon" b-att-icon="search"></span>`, still works for compatibility.
+
+For install patterns, accessibility guidance, self-hosting, and JavaScript examples, see the built-in icon guide at `/docs/icons`.
+
+## JavaScript API
+
+```js
+BaseUI.icons.lucide.url("panel-left");
+BaseUI.icons.lucide.render(document.querySelector("#icon"), "check", { size: "18px" });
+```
+
+By default, icon URLs point to `https://cdn.jsdelivr.net/npm/lucide-static@1.31.0/icons`. The build also publishes every SVG under `dist/icons/lucide/` plus a generated `dist/icons/lucide.json` manifest for self-hosted CDN deployments.

package/docs/components/input-group.md

@@ -0,0 +1,67 @@
+# Input Group
+
+## Pure Owl component
+
+```js
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupInput,
+  InputGroupText,
+  InputGroupTextarea,
+} from "@thebase/ui";
+```
+
+```base-ui
+<div class="d-flex flex-column gap-4 w-100" style="max-width: 28rem">
+  <InputGroup>
+    <InputGroupInput placeholder="'Search...'"/>
+    <InputGroupAddon align="'inline-end'">
+      <Icon name="'search'"/>
+    </InputGroupAddon>
+  </InputGroup>
+
+  <InputGroup>
+    <InputGroupInput placeholder="'https://'"/>
+    <InputGroupAddon align="'inline-end'">
+      <InputGroupButton>Search</InputGroupButton>
+    </InputGroupAddon>
+  </InputGroup>
+
+  <InputGroup>
+    <InputGroupTextarea placeholder="'Enter message...'" rows="3"/>
+    <InputGroupAddon align="'block-end'">
+      <InputGroupText>0/280</InputGroupText>
+      <InputGroupButton variant="'default'" className="'ms-auto'">Send</InputGroupButton>
+    </InputGroupAddon>
+  </InputGroup>
+</div>
+```
+
+| Component | Prop | Type | Notes |
+| --- | --- | --- | --- |
+| `InputGroup` | `className` | `String` | optional |
+| `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` |
+| `InputGroupText` | `className` | `String` | optional |
+| `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`.
+
+## Static component
+
+```base-ui
+<div b-ui="input-group">
+  <div b-input-group-addon b-att-align="inline-start">
+    <span b-input-group-text>@</span>
+  </div>
+  <input b-ui="input" placeholder="username">
+</div>
+```
+
+Use `b-att-align="inline-start|inline-end|block-start|block-end"` on `b-input-group-addon`.
+Use `b-input-group-button` with `b-att-size="xs|icon-xs|sm|icon-sm"` and
+`b-att-variant="default|destructive|outline|secondary|ghost|link"` for embedded actions.

package/docs/components/input-otp.md

@@ -0,0 +1,71 @@
+# Input Otp
+
+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.
+
+## Pure Owl component
+
+```js
+import { InputOtp } from "@thebase/ui";
+```
+
+```base-ui
+<div style="max-width: 28rem" class="w-100 d-flex justify-content-center">
+  <InputOtp length="6"/>
+</div>
+```
+
+| Component | Prop | Type | Notes |
+| --- | --- | --- | --- |
+| `InputOtp` | `length` | `Number` | optional |
+| `InputOtp` | `value` | `String` | optional |
+| `InputOtp` | `disabled` | `Boolean` | optional |
+| `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`.
+
+## Static component
+
+```base-ui
+<div b-ui="input-otp">Input Otp</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/input.md

@@ -0,0 +1,72 @@
+# Input
+
+Use `b-ui="input"` on a native input element.
+
+## Pure Owl component
+
+```js
+import { Input } from "@thebase/ui";
+```
+
+```base-ui
+<div style="max-width: 28rem" class="w-100">
+  <Input type="'email'" placeholder="'Email'"/>
+</div>
+```
+
+| Prop | Type | Notes |
+| --- | --- | --- |
+| `value` | `String` | controlled value; the component never mutates it itself |
+| `placeholder` | `String` | |
+| `type` | `String` | native `<input type>` |
+| `disabled` | `Boolean` | |
+| `readonly` | `Boolean` | |
+| `invalid` | `Boolean` | adds `is-invalid` |
+| `className` | `String` | appended to the generated `form-control` class |
+| `id` | `String` | forwarded to the rendered `<input>`, e.g. for `Label`'s `for` |
+| `autocomplete` | `String` | forwarded to the rendered `<input>` |
+| `ariaLabel` / `aria-label` | `String` | accessible name when there's no visible label |
+| `min` / `max` / `step` | `String \| Number` | forwarded to the rendered `<input>`, for `type="number"`/date-like inputs |
+| `list` | `String` | forwarded to the rendered `<input>`, pair with a `<datalist id="...">` for suggestions |
+| `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`.
+
+## Static component
+
+```base-ui
+<input b-ui="input" type="email" placeholder="name@example.com">
+```
+
+Options: use the native `type`, `placeholder`, `disabled`, `readonly`, `required`, and validation attributes.
+
+Accessibility: provide a visible label or an `aria-label` when the input is not paired with `b-ui="field"`.
+
+## CDN install requirements
+
+Load `baseui.min.css` and `baseui.min.js`.
+
+## Enhanced usage
+
+Input is a static component. It can be mounted by `BaseUI.mountAll()` with no extra JavaScript.
+
+## Methods
+
+Use the global runtime methods: `BaseUI.mount()`, `BaseUI.mountAll()`, and `BaseUI.destroy()`.
+
+## Events
+
+Input does not emit custom BaseUI events. Use native `input` and `change` events.
+
+## CSS variables
+
+The component inherits BaseUI semantic tokens such as `--baseui-input`, `--baseui-border`, `--baseui-ring`, and `--baseui-radius`.
+
+## Browser support
+
+BaseUI targets modern evergreen browsers that support ES modules, CSS variables, and Bootstrap 5.3.
+
+## Test checklist
+
+Verify default, disabled, readonly, invalid, focus, placeholder, light theme, and dark theme states.

package/docs/components/item.md

@@ -0,0 +1,74 @@
+# Item
+
+## Pure Owl component
+
+```js
+import { Item } from "@thebase/ui";
+```
+
+```base-ui
+<div class="d-flex flex-column gap-4 w-100" style="max-width: 28rem">
+  <Item variant="'outline'">
+    <span b-item-media="'icon'">
+      <Icon name="'badge-check'"/>
+    </span>
+    <span b-item-content="">
+      <strong b-item-title="">Your profile has been verified.</strong>
+    </span>
+    <span b-item-actions="">
+      <Button variant="'ghost'" size="'sm'">
+        <Icon name="'chevron-right'"/>
+      </Button>
+    </span>
+  </Item>
+
+  <div b-item-group="">
+    <Item>
+      <span b-item-media="">JD</span>
+      <span b-item-content="">
+        <strong b-item-title="">John Doe</strong>
+        <span b-item-description="">john.doe@example.com</span>
+      </span>
+    </Item>
+    <div b-item-separator=""></div>
+    <Item>
+      <span b-item-media="">AS</span>
+      <span b-item-content="">
+        <strong b-item-title="">Alice Smith</strong>
+        <span b-item-description="">alice.smith@example.com</span>
+      </span>
+    </Item>
+    <div b-item-separator=""></div>
+    <Item>
+      <span b-item-media="">RB</span>
+      <span b-item-content="">
+        <strong b-item-title="">Robert Brown</strong>
+        <span b-item-description="">robert.brown@example.com</span>
+      </span>
+    </Item>
+  </div>
+</div>
+```
+
+| Component | Prop | Type | Notes |
+| --- | --- | --- | --- |
+| `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`.
+
+## Static component
+
+```base-ui
+<div b-item-group>
+  <div b-ui="item">
+    <span b-item-media>BU</span>
+    <span b-item-content>
+      <strong b-item-title>BaseUI</strong>
+      <span b-item-description>CDN-ready shadcn-style components.</span>
+    </span>
+    <span b-item-actions>
+      <button b-ui="button" b-att-variant="outline" type="button">Open</button>
+    </span>
+  </div>
+</div>
+```

package/docs/components/kbd.md

@@ -0,0 +1,44 @@
+# Kbd
+
+## Pure Owl component
+
+```js
+import { Kbd } from "@thebase/ui";
+```
+
+```base-ui
+<div style="max-width: 28rem" class="d-flex flex-column align-items-center gap-4 w-100">
+  <div class="d-flex align-items-center gap-1">
+    <Kbd>⌘</Kbd>
+    <Kbd>⇧</Kbd>
+    <Kbd>⌥</Kbd>
+    <Kbd>⌃</Kbd>
+  </div>
+  <p class="text-body-secondary small text-center mb-0">
+    Use <Kbd>⌘</Kbd><Kbd>V</Kbd> to paste text.
+  </p>
+  <Button variant="'outline'">
+    <t t-set-slot="default">
+      Accept <Kbd className="'ms-2'">⏎ Enter</Kbd>
+    </t>
+  </Button>
+  <InputGroup class="w-100">
+    <InputGroupInput placeholder="'Search...'"/>
+    <InputGroupAddon align="'inline-end'">
+      <Kbd>⌘K</Kbd>
+    </InputGroupAddon>
+  </InputGroup>
+</div>
+```
+
+| Component | Prop | Type | Notes |
+| --- | --- | --- | --- |
+| `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`.
+
+## Static component
+
+```base-ui
+<kbd b-ui="kbd">Ctrl K</kbd>
+```

package/docs/components/label.md

@@ -0,0 +1,36 @@
+# Label
+
+Form label with consistent spacing and optional required marker.
+
+## Pure Owl component
+
+```js
+import { Label } from "@thebase/ui";
+```
+
+```base-ui
+<div style="max-width: 28rem" class="w-100">
+  <div class="d-flex align-items-center gap-2">
+    <Checkbox/>
+    <Label for="'terms'">Accept terms and conditions</Label>
+  </div>
+</div>
+```
+
+| Component | Prop | Type | Notes |
+| --- | --- | --- | --- |
+| `Label` | `for` | `String` | optional |
+| `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`.
+
+## Static component
+
+```base-ui
+<label b-ui="label" b-att-required="true" for="email">Email</label>
+```
+
+Options: `b-att-required="true"`.
+
+Accessibility: use `for` with the matching control `id`.