### Install and Run Demo

Source: https://github.com/avanelsas/baredom/blob/main/bare-reagent-demo/README.md

Commands to navigate to the demo directory, install dependencies, and start the development server.

```bash
cd bare-reagent-demo
npm install
npm start          # npx shadow-cljs watch app
```

--------------------------------

### Install and Run bare-node-demo

Source: https://github.com/avanelsas/baredom/blob/main/bare-node-demo/README.md

Navigate to the project directory, install dependencies, and start the development server. The application will be available at http://localhost:8003 and hot-reloads on source changes.

```bash
cd bare-node-demo
npm install
npm start
```

--------------------------------

### Run bare-node-demo with NPM

Source: https://github.com/avanelsas/baredom/blob/main/README.md

Navigate to the bare-node-demo directory, install dependencies, and start the application. Opens on http://localhost:8003.

```bash
cd bare-node-demo && npm install && npm start
```

--------------------------------

### Initialize development environment

Source: https://github.com/avanelsas/baredom/blob/main/README.md

Commands to install dependencies and start the development server for the BareDOM library.

```bash
npm install
npx shadow-cljs watch app
```

--------------------------------

### Usage Examples

Source: https://github.com/avanelsas/baredom/blob/main/docs/x-notification-center.md

Examples demonstrating how to use the x-notification-center component.

```APIDOC
## Usage Examples

### Basic push
```js
import '@vanelsas/baredom/x-alert';
import '@vanelsas/baredom/x-notification-center';

const nc = document.querySelector('x-notification-center');

nc.push({ type: 'success', text: 'File saved.' });
nc.push({ type: 'error',   text: 'Network error. Please retry.' });
```

### Auto-dismiss
```js
nc.push({ type: 'info', text: 'Session expires soon.', timeoutMs: 5000 });
```

### Non-dismissible
```js
nc.push({ type: 'warning', text: 'Read-only mode.', dismissible: false });
```

### Clear all
```js
nc.clear();
```

### Listening to events
```js
nc.addEventListener('x-notification-center-push', e => {
  console.log('pushed', e.detail.id, 'count:', e.detail.count);
});

nc.addEventListener('x-notification-center-dismiss', e => {
  const { id, type, reason, text, count } = e.detail;
  console.log(`dismissed ${id} (${type}) via ${reason} — "${text}". Remaining: ${count}`);
});

nc.addEventListener('x-notification-center-empty', () => {
  console.log('All notifications cleared');
});
```
```

--------------------------------

### Install BareDOM

Source: https://context7.com/avanelsas/baredom/llms.txt

Install the library using npm.

```bash
npm install @vanelsas/baredom
```

--------------------------------

### Theming Example

Source: https://github.com/avanelsas/baredom/blob/main/docs/x-skeleton.md

Example of how to theme the x-skeleton component using CSS custom properties.

```APIDOC
## Theming

```html
<!-- Custom purple skeleton -->
<x-skeleton
  height="80px"
  style="
    --x-skeleton-color: #ede9fe;
    --x-skeleton-highlight: rgba(139,92,246,0.25);
    --x-skeleton-border-radius: 8px;
  ">
</x-skeleton>
```
```

--------------------------------

### Usage Examples

Source: https://github.com/avanelsas/baredom/blob/main/docs/x-pagination.md

Provides various examples of how to implement and configure the x-pagination component.

```APIDOC
## Usage Examples

### Basic Usage

```html
<x-pagination page="1" total-pages="20"></x-pagination>
```

### Controlled Component (Update on Change)

This example shows how to manage the `page` attribute programmatically.

```html
<x-pagination id="pg" page="1" total-pages="50"></x-pagination>

<script>
  document.getElementById('pg').addEventListener('page-change', e => {
    e.target.setAttribute('page', String(e.detail.page));
  });
</script>
```

### Custom Sibling and Boundary Counts

Adjust the number of visible pages around the current page and at the boundaries.

```html
<!-- Show 2 pages on each side of current, 2 at each boundary -->
<x-pagination page="10" total-pages="50"
              sibling-count="2" boundary-count="2"></x-pagination>
```

### Small Size

Apply a smaller variant of the pagination component.

```html
<x-pagination page="3" total-pages="10" size="sm"></x-pagination>
```

### Custom Labels

Customize the text for previous and next navigation buttons, and the overall label.

```html
<x-pagination page="3" total-pages="10" label="Article navigation">
  <span slot="prev">← Previous</span>
  <span slot="next">Next →</span>
</x-pagination>
```

### ESM Import

Import and initialize the component using ES Modules.

```js
import { init } from '@vanelsas/baredom/x-pagination';
init();
```
```

--------------------------------

### Basic Usage Example

Source: https://github.com/avanelsas/baredom/blob/main/docs/x-progress.md

A simple example of how to use the x-progress component with a specified value.

```html
<x-progress value="40"></x-progress>
```

--------------------------------

### Basic Navbar Example

Source: https://github.com/avanelsas/baredom/blob/main/docs/x-navbar.md

A simple example demonstrating the basic usage of the x-navbar component.

```APIDOC
## Basic Navbar Example

### Description
This example shows a functional navbar with a brand, navigation links, and action buttons.

### HTML
```html
<x-navbar sticky elevated label="Main navigation">
  <a slot="brand" href="/">My App</a>

  <nav>
    <a href="/">Home</a>
    <a href="/docs">Docs</a>
  </nav>

  <div slot="actions">
    <x-button variant="secondary">Login</x-button>
  </div>
</x-navbar>
```
```

--------------------------------

### Install Dependencies for Building BareDOM

Source: https://github.com/avanelsas/baredom/blob/main/README.md

Installs the necessary Node.js dependencies for building BareDOM from source.

```bash
npm install
```

--------------------------------

### Basic Usage Example

Source: https://github.com/avanelsas/baredom/blob/main/docs/x-cancel-dialogue.md

A standard configuration with a headline and message.

```html
<x-cancel-dialogue
  open
  headline="Discard changes?"
  message="Your unsaved changes will be lost."
></x-cancel-dialogue>
```

--------------------------------

### x-badge Examples

Source: https://github.com/avanelsas/baredom/blob/main/docs/x-badge.md

Illustrative examples showcasing different configurations of the x-badge component.

```APIDOC
## x-badge Examples

### Description
Provides practical examples of how to use the x-badge component with various attributes.

### Method
N/A (Component Examples)

### Endpoint
N/A (Component Examples)

### Parameters
#### Path Parameters
- None

#### Query Parameters
- None

#### Request Body
- None

### Request Example
- None

### Response
#### Success Response (200)
- None

#### Response Example
- None

### Examples
#### Colour variants
```html
<x-badge variant="neutral">Neutral</x-badge>
<x-badge variant="info">Info</x-badge>
<x-badge variant="success">Success</x-badge>
<x-badge variant="warning">Warning</x-badge>
<x-badge variant="error">Error</x-badge>
```

#### Count with cap
```html
<x-badge variant="error" count="7"></x-badge>
<x-badge variant="error" count="999" max="99"></x-badge>
```

#### Text labels
```html
<x-badge variant="success" text="NEW"></x-badge>
<x-badge variant="warning" text="BETA"></x-badge>
```

#### Small size
```html
<x-badge variant="info" size="sm" count="5"></x-badge>
```

#### Dot
```html
<x-badge variant="error" dot></x-badge>
```

#### Pill
```html
<x-badge variant="success" pill count="3"></x-badge>
```
```

--------------------------------

### Start BareDOM Development Server

Source: https://github.com/avanelsas/baredom/blob/main/README.md

Starts the shadow-cljs development server with hot reload enabled. Access the application at http://localhost:8000.

```bash
npx shadow-cljs watch app
```

--------------------------------

### X-Dropdown Component Usage Examples

Source: https://github.com/avanelsas/baredom/blob/main/docs/x-dropdown.md

Provides various HTML and JavaScript examples demonstrating how to use the X-Dropdown component in different configurations.

```APIDOC
## X-Dropdown Component Usage Examples

### Basic Usage

```html
<x-dropdown label="Actions">
  <button>Edit</button>
  <button>Archive</button>
  <button>Delete</button>
</x-dropdown>
```

### Open by Default

```html
<x-dropdown label="File" open>
  <a href="/new">New file</a>
  <a href="/open">Open…</a>
  <a href="/save">Save</a>
</x-dropdown>
```

### Placement

```html
<x-dropdown label="More" placement="top-end">
  <button>Option A</button>
  <button>Option B</button>
</x-dropdown>
```

### Disabled

```html
<x-dropdown label="Locked" disabled>
  <button>Hidden</button>
</x-dropdown>
```

### Custom Theme

```html
<x-dropdown label="Custom"
  style="
    --x-dropdown-trigger-bg: #6366f1;
    --x-dropdown-trigger-color: #fff;
    --x-dropdown-panel-radius: 12px;
  ">
  <button>Item 1</button>
</x-dropdown>
```

### Programmatic Control

```javascript
const dd = document.querySelector('x-dropdown');

// Open
dd.show();

// Close
dd.hide();

// Toggle
dd.toggle();

// Listen for state changes
dd.addEventListener('x-dropdown-change', e => {
  console.log('open:', e.detail.open);
});

// Cancel a specific open
dd.addEventListener('x-dropdown-toggle', e => {
  if (e.detail.open && someCondition) {
    e.preventDefault(); // prevents opening
  }
});
```
```

--------------------------------

### npm Package Installation

Source: https://github.com/avanelsas/baredom/blob/main/README.md

Add the BareDOM npm package to your `package.json` and run `npm install`.

```json
{
  "dependencies": {
    "@vanelsas/baredom": "^2.1.1"
  }
}
```

--------------------------------

### Basic Usage

Source: https://github.com/avanelsas/baredom/blob/main/docs/x-chip.md

A basic example of how to use the x-chip component.

```APIDOC
## Basic Usage

### Description

This is a basic example of the x-chip component.

### Endpoint

N/A (Web Component)

### Parameters

N/A

### Request Example

```html
<x-chip label="Basic Chip"></x-chip>
```

### Response

N/A (Web Component)
```

--------------------------------

### Usage Example

Source: https://github.com/avanelsas/baredom/blob/main/docs/x-menu.md

Demonstrates how to use the x-menu component with x-menu-item children and handle the `x-menu-select` event.

```APIDOC
## Usage

```html
<x-menu label="Actions">
  <button slot="trigger">Actions ▾</button>
  <x-menu-item value="edit">Edit</x-menu-item>
  <x-menu-item value="duplicate">Duplicate</x-menu-item>
  <x-menu-item type="divider"></x-menu-item>
  <x-menu-item value="delete" variant="danger">Delete</x-menu-item>
</x-menu>

<script>
  import '@vanelsas/baredom/x-menu';
  import '@vanelsas/baredom/x-menu-item';

  document.querySelector('x-menu').addEventListener('x-menu-select', e => {
    console.log('Selected:', e.detail.value);
  });
</script>
```
```

--------------------------------

### Basic Usage Example

Source: https://github.com/avanelsas/baredom/blob/main/docs/x-gaussian-blur.md

A standard implementation with a defined height.

```html
<x-gaussian-blur style="height: 300px;"></x-gaussian-blur>
```

--------------------------------

### Basic Usage

Source: https://github.com/avanelsas/baredom/blob/main/docs/x-skeleton.md

Examples of using the x-skeleton component with different variants and attributes.

```APIDOC
## Basic usage

```html
<!-- Default: full-width rect, pulse animation -->
<x-skeleton></x-skeleton>

<!-- Single text line -->
<x-skeleton variant="text"></x-skeleton>

<!-- Circle avatar placeholder -->
<x-skeleton variant="circle" width="40px" height="40px"></x-skeleton>

<!-- Explicit size -->
<x-skeleton height="120px"></x-skeleton>

<!-- Wave animation -->
<x-skeleton animation="wave" height="2rem"></x-skeleton>

<!-- No animation -->
<x-skeleton animation="none"></x-skeleton>
```
```

--------------------------------

### Size Examples

Source: https://github.com/avanelsas/baredom/blob/main/docs/x-progress.md

Illustrates how to adjust the size of the progress bar using the 'size' attribute.

```html
<x-progress value="50" size="sm"></x-progress>
<x-progress value="50" size="md"></x-progress>
<x-progress value="50" size="lg"></x-progress>
```

--------------------------------

### Default slot usage

Source: https://github.com/avanelsas/baredom/blob/main/docs/x-container.md

Example of placing content inside the container.

```html
<x-container>
  <h1>Hello world</h1>
  <p>Content goes here.</p>
</x-container>
```

--------------------------------

### x-liquid-dock Usage

Source: https://github.com/avanelsas/baredom/blob/main/docs/x-liquid-dock.md

Example of how to use the x-liquid-dock component in HTML with navigation items.

```APIDOC
## Usage

```html
<x-liquid-dock>
  <button aria-label="Home">&#x1F3E0;</button>
  <button aria-label="Search">&#x1F50D;</button>
  <button aria-label="Messages">&#x1F4AC;</button>
  <button aria-label="Profile">&#x1F464;</button>
</x-liquid-dock>
```
```

--------------------------------

### Usage Examples

Source: https://github.com/avanelsas/baredom/blob/main/docs/x-organic-progress.md

Demonstrates various ways to use the x-organic-progress component with different attributes and styling.

```APIDOC
### Basic (indeterminate)

```html
<x-organic-progress></x-organic-progress>
```

### With progress

```html
<x-organic-progress progress="65"></x-organic-progress>
```

### Honeycomb variant, dense

```html
<x-organic-progress variant="honeycomb" density="dense" progress="80"></x-organic-progress>
```

### Custom colors via CSS

```html
<x-organic-progress
  progress="50"
  style="--x-organic-progress-color-primary: #818cf8;
         --x-organic-progress-color-secondary: #6366f1;
         --x-organic-progress-bloom-color: #fbbf24;">
</x-organic-progress>
```
```

--------------------------------

### Basic x-context-menu Usage

Source: https://github.com/avanelsas/baredom/blob/main/docs/x-context-menu.md

A basic example of the x-context-menu component with a trigger button and menu items.

```html
<x-context-menu>
  <button slot="trigger">Actions ▾</button>
  <div role="menuitem">Edit</div>
  <div role="menuitem">Duplicate</div>
  <div role="menuitem" style="color:red">Delete</div>
</x-context-menu>
```

--------------------------------

### Standalone with event logging

Source: https://github.com/avanelsas/baredom/blob/main/docs/x-search-field.md

Example of listening to search and clear events from the component.

```html
<x-search-field id="site-search" name="q" label="Search" placeholder="Search…"></x-search-field>

<script>
  const sf = document.getElementById('site-search');
  sf.addEventListener('x-search-field-search', e => {
    console.log('Search:', e.detail.value);
  });
  sf.addEventListener('x-search-field-clear', () => {
    console.log('Cleared');
  });
</script>
```

--------------------------------

### x-particle-button Usage Examples

Source: https://github.com/avanelsas/baredom/blob/main/docs/x-particle-button.md

Demonstrates how to use the x-particle-button component with different modes and variants.

```APIDOC
## Usage Examples

### Default Button
```html
<x-particle-button>Click Me</x-particle-button>
```

### Energetic Spark Button
```html
<x-particle-button mode="spark" variant="danger">Delete</x-particle-button>
```

### Warm Ember Glow Button
```html
<x-particle-button mode="ember" variant="warning">Proceed</x-particle-button>
```

### Full Dissolve + Reform Button
```html
<x-particle-button mode="disperse" variant="success">Confirm</x-particle-button>
```
```

--------------------------------

### Usage Examples

Source: https://github.com/avanelsas/baredom/blob/main/docs/x-organic-divider.md

Demonstrates various ways to use the x-organic-divider component with different configurations.

```APIDOC
### Usage Examples

#### Simple wave divider

```html
<x-organic-divider></x-organic-divider>
```

#### Between colored sections

```html
<section style="background: #1a1a2e; color: white; padding: 48px;">
  Section One
</section>
<x-organic-divider shape="waves" layers="3"
  style="--x-organic-divider-color-1: #1a1a2e;
         --x-organic-divider-color-2: #16213e;
         --x-organic-divider-color-3: #0f3460;">
</x-organic-divider>
<section style="background: #0f3460; color: white; padding: 48px;">
  Section Two
</section>
```

#### Flipped divider (curve points up)

```html
<x-organic-divider shape="mountain" flip></x-organic-divider>
```

#### Multi-layer with animation

```html
<x-organic-divider shape="wave" layers="3" animation="drift"></x-organic-divider>
```
```

--------------------------------

### Custom Theme Example

Source: https://github.com/avanelsas/baredom/blob/main/docs/x-pagination.md

Demonstrates how to customize the appearance of the x-pagination component using CSS custom properties.

```APIDOC
## Custom Theme Example

This section shows how to customize the pagination component's appearance using CSS custom properties.

### CSS Custom Properties

- `--x-pagination-button-radius`: Controls the border-radius of buttons.
- `--x-pagination-current-bg`: Background color for the current page button.
- `--x-pagination-current-color`: Text color for the current page button.
- `--x-pagination-button-hover-bg`: Background color on hover for buttons.
- `--x-pagination-button-hover-color`: Text color on hover for buttons.

### Example

```css
x-pagination {
  --x-pagination-button-radius: 9999px;
  --x-pagination-current-bg: #7c3aed;
  --x-pagination-current-color: #fff;
  --x-pagination-button-hover-bg: rgba(124, 58, 237, 0.1);
  --x-pagination-button-hover-color: #7c3aed;
}
```
```

--------------------------------

### X-Drawer Component Usage

Source: https://github.com/avanelsas/baredom/blob/main/docs/x-drawer.md

Example of how to use the x-drawer component with slots for header, body, and footer.

```APIDOC
## X-Drawer Component Usage

### Description
This example demonstrates how to integrate the `x-drawer` component into your HTML, utilizing its slots for custom header, body, and footer content.

### Tag
```html
<x-drawer placement="right" label="Drawer">
  <div slot="header">Header content</div>
  Body content goes here
  <div slot="footer">Footer content</div>
</x-drawer>
```

### Observed Attributes

| Attribute   | Type   | Default    | Description                              |
|-------------|--------|------------|------------------------------------------|
| `open`      | bool   | absent     | Shows the drawer when present            |
| `placement` | enum   | `"right"`  | Edge: `left | right | top | bottom`  |
| `label`     | string | `"Drawer"` | `aria-label` for the dialog panel        |

### Properties

| Property    | Type    | Reflects attribute |
|-------------|---------|--------------------|
| `open`      | boolean | `open`             |
| `placement` | string  | `placement`        |
| `label`     | string  | `label`            |

### Methods

| Method     | Description            |
|------------|------------------------|
| `show()`   | Sets `open` attribute  |
| `hide()`   | Removes `open` attribute |
| `toggle()` | Flips open state       |

### Events

| Event            | Cancelable | Detail                               |
|------------------|------------|--------------------------------------|
| `x-drawer-toggle`  | false    | `{ open: boolean }`                  |
| `x-drawer-dismiss` | false    | `{ reason: "escape" | "backdrop" }` |

### Slots

| Slot       | Description                                 |
|------------|---------------------------------------------|
| `header`   | Named — title area, close button, etc.      |
| (default)  | Scrollable body content                     |
| `footer`   | Named — action buttons                      |

### CSS Parts

| Part       | Description                         |
|------------|-------------------------------------|
| `backdrop` | Overlay scrim behind the panel      |
| `panel`    | The drawer container (dialog)       |
| `header`   | Header slot wrapper                 |
| `body`     | Default slot wrapper (scrollable)   |
| `footer`   | Footer slot wrapper                 |
```

--------------------------------

### Listening to x-checkbox Change Event

Source: https://github.com/avanelsas/baredom/blob/main/docs/x-checkbox.md

Example of how to listen for the 'x-checkbox-change' event to get the new checked state and value after a change.

```javascript
document.querySelector('x-checkbox').addEventListener('x-checkbox-change', e => {
  console.log('checked:', e.detail.checked, 'value:', e.detail.value);
});
```

--------------------------------

### Collapsed Docked Sidebar Example

Source: https://github.com/avanelsas/baredom/blob/main/demo/x-sidebar.html

Demonstrates a collapsed sidebar in a docked variant. This setup is useful for navigation elements that should be persistently visible but take up minimal space.

```html
<x-sidebar open collapsed placement="left" variant="docked" label="Sidebar">...</x-sidebar>
```

--------------------------------

### Serve Project Root

Source: https://github.com/avanelsas/baredom/blob/main/bare-html/README.md

Run a static server from the project root to serve the demo. This is necessary for ES module imports to resolve correctly.

```bash
python3 -m http.server 8000
```

--------------------------------

### x-breadcrumbs Examples

Source: https://github.com/avanelsas/baredom/blob/main/docs/x-breadcrumbs.md

Various examples demonstrating the usage of the x-breadcrumbs component.

```APIDOC
## Examples

### Basic

```html
<x-breadcrumbs>
  <a href="/">Home</a>
  <a href="/products">Products</a>
  <a href="/products/shoes">Shoes</a>
</x-breadcrumbs>
```

### Custom separator

```html
<x-breadcrumbs separator="›">
  <a href="/">Home</a>
  <a href="/docs">Docs</a>
  <a href="/docs/components">Components</a>
</x-breadcrumbs>
```

### Collapsed with ellipsis

```html
<x-breadcrumbs max-items="3" items-before="1" items-after="2">
  <a href="/">Home</a>
  <a href="/docs">Docs</a>
  <a href="/docs/components">Components</a>
  <a href="/docs/components/avatar">Avatar</a>
  <a href="/docs/components/avatar/api">API</a>
</x-breadcrumbs>
```

### Subtle variant

```html
<x-breadcrumbs variant="subtle">
  <a href="/">Home</a>
  <a href="/settings">Settings</a>
  <a href="/settings/profile">Profile</a>
</x-breadcrumbs>
```

### ClojureScript (hiccup renderer)

```clojure
[:x-breadcrumbs {:separator "›"}
 [:a {:href "/"} "Home"]
 [:a {:href "/docs"} "Docs"]
 [:a {:href "/docs/components"} "Components"]]

[:x-breadcrumbs {:max-items "3" :items-before "1" :items-after "2"}
 [:a {:href "/"} "Home"]
 [:a {:href "/docs"} "Docs"]
 [:a {:href "/docs/components"} "Components"]
 [:a {:href "/docs/components/avatar"} "Avatar"]
 [:a {:href "/docs/components/avatar/api"} "API"]]
```
```

--------------------------------

### Vanilla HTML/JS ES Module Setup

Source: https://github.com/avanelsas/baredom/blob/main/README.md

Load BareDOM components directly using `<script type="module">` in HTML. Import only the components you need.

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>BareDOM Example</title>
</head>
<body>
  <x-button variant="primary">Click me</x-button>
  <x-alert type="success" text="It works!"></x-alert>

  <script type="module">
    import { init as initButton } from './dist/x-button.js';
    import { init as initAlert }  from './dist/x-alert.js';

    initButton();
    initAlert();
  </script>
</body>
</html>
```

--------------------------------

### Implement Command Palette in HTML

Source: https://github.com/avanelsas/baredom/blob/main/docs/x-command-palette.md

Basic setup using the custom element and JavaScript event listeners for selection and closing.

```html
<x-command-palette id="palette"></x-command-palette>
<button onclick="document.getElementById('palette').setAttribute('open','')">
  Open (⌘K)
</button>
<script>
  const palette = document.getElementById('palette');
  palette.items = [
    { id: 'new',      label: 'New file',     group: 'File' },
    { id: 'open',     label: 'Open file…',   group: 'File' },
    { id: 'settings', label: 'Preferences',  group: 'App'  },
  ];
  palette.addEventListener('x-command-palette-select', e => {
    console.log('selected', e.detail.item);
    palette.removeAttribute('open');
  });
  palette.addEventListener('x-command-palette-close', () => {
    palette.removeAttribute('open');
  });
</script>
```

--------------------------------

### Usage Examples

Source: https://github.com/avanelsas/baredom/blob/main/docs/x-kinetic-typography.md

Provides examples of how to use the x-kinetic-typography component in HTML and JavaScript.

```APIDOC
## Usage

### HTML

```html
<!-- Basic scrolling text on a wave -->
<x-kinetic-typography
  text="Hello World"
  preset="wave"
  animation="scroll">
</x-kinetic-typography>

<!-- Per-character color wave -->
<x-kinetic-typography
  text="Rainbow ripple"
  preset="wave"
  animation="scroll"
  effect="color-wave"
  style="--x-kinetic-typography-color-shift-from:#6366f1;
         --x-kinetic-typography-color-shift-to:#ec4899;">
</x-kinetic-typography>

<!-- Text with echo trail -->
<x-kinetic-typography
  text="Echo trail"
  preset="wave"
  animation="scroll"
  echo-count="3"
  echo-delay="0.3">
</x-kinetic-typography>

<!-- Star Wars crawl -->
<x-kinetic-typography
  preset="crawl"
  animation="scroll"
  speed="0.3"
  text="It is a period of civil war..."
  style="height:300px;--x-kinetic-typography-color:#fbbf24;">
</x-kinetic-typography>
```

### JavaScript

```javascript
const el = document.createElement('x-kinetic-typography');
el.text = 'Dynamic Text';
el.preset = 'infinity';
el.animation = 'scroll';
el.speed = '1.5';
el.effect = 'color-wave';
el.echoCount = '2';
document.body.appendChild(el);
```
```

--------------------------------

### Initialize the application

Source: https://github.com/avanelsas/baredom/blob/main/README.md

Register components and mount the view to the DOM using the renderer.

```clojure
(defn view []
  [:x-container {:size "xl" :padding "lg"}
   ;; ... your UI built from component vectors ...
   ])

(defn init! []
  (register-components!)
  (renderer/mount! (.getElementById js/document "app") view app-state))
```

--------------------------------

### Project Structure Overview

Source: https://github.com/avanelsas/baredom/blob/main/bare-demo/README.md

This outlines the directory structure for the bare-demo project. Key files include deps.edn for dependencies, shadow-cljs.edn for build configuration, and src/ for ClojureScript source files.

```text
bare-demo/
├── deps.edn                    # Clojars deps: baredom + shadow-cljs
├── shadow-cljs.edn             # Build config (:deps true — reads deps.edn)
├── public/
│   ├── index.html              # HTML shell + all CSS (including custom property overrides)
│   └── assets/
│       ├── baredom_lightmode.svg   # Logo for light mode
│       └── baredom_darkmode.svg    # Logo for dark mode
└── src/bare_demo/
    ├── core.cljs               # Entry point — registers components, mounts app
    ├── renderer.cljs           # Hiccup → DOM renderer with reconciliation (~120 lines)
    ├── state.cljs              # Single state atom
    └── views/
        └── app.cljs            # Pure view functions
```

--------------------------------

### Basic x-drawer Usage

Source: https://github.com/avanelsas/baredom/blob/main/docs/x-drawer.md

Demonstrates how to use the x-drawer component with header, body, and footer content. Attributes like 'placement' and 'label' can be set directly.

```html
<x-drawer placement="right" label="Drawer">
  <div slot="header">Header content</div>
  Body content goes here
  <div slot="footer">Footer content</div>
</x-drawer>
```

--------------------------------

### Usage Examples

Source: https://github.com/avanelsas/baredom/blob/main/docs/x-table-row.md

Provides various examples of how to use the x-table-row component in HTML, JavaScript, and ClojureScript.

```APIDOC
## Usage Examples

### Basic row with cells

```html
<x-table-row>
  <x-table-cell>Value A</x-table-cell>
  <x-table-cell>Value B</x-table-cell>
  <x-table-cell>Value C</x-table-cell>
</x-table-row>
```

### Selectable interactive row

```html
<x-table-row interactive row-index="1">
  <x-table-cell>Alice</x-table-cell>
  <x-table-cell>Admin</x-table-cell>
</x-table-row>
```

```js
document.querySelector('x-table-row').addEventListener('x-table-row-click', e => {
  e.target.toggleAttribute('selected');
});
```

### Selected row

```html
<x-table-row selected interactive>
  <x-table-cell>Pre-selected row</x-table-cell>
</x-table-row>
```

### Disabled row

```html
<x-table-row disabled interactive>
  <x-table-cell>Cannot be clicked</x-table-cell>
</x-table-row>
```

### Cancel row click (prevent selection)

```js
row.addEventListener('x-table-row-click', e => {
  if (someGuard) e.preventDefault();
  // after preventDefault: do not update selected state
});
```

### JavaScript property API

```js
const row = document.querySelector('x-table-row');
row.interactive = true;
row.rowIndex    = 2;
row.selected    = true;
```

### ClojureScript / hiccup

```clojure
[:x-table-row {:interactive true :row-index 1}
  [:x-table-cell "Alice"]
  [:x-table-cell "Admin"]]
```
```

--------------------------------

### Navbar with Sidebar Toggle Example

Source: https://github.com/avanelsas/baredom/blob/main/docs/x-navbar.md

An example illustrating how to integrate the x-navbar with a sidebar using a toggle button.

```APIDOC
## Navbar with Sidebar Toggle Example

### Description
This example demonstrates how to use the `toggle` slot in the x-navbar to control the visibility of an `x-sidebar` component.

### HTML
```html
<x-navbar sticky elevated label="Main navigation">
  <a slot="brand" href="/">My App</a>

  <div slot="actions">
    <x-button id="menu-button">Menu</x-button>
  </div>
</x-navbar>

<x-sidebar id="sidebar"></x-sidebar>

<script>
document.getElementById("menu-button")
  .addEventListener("press", () => {
    document.getElementById("sidebar").open = true
  })
</script>
```
```

--------------------------------

### x-dropdown Usage Examples

Source: https://github.com/avanelsas/baredom/blob/main/docs/x-dropdown.md

Demonstrates various configurations for the x-dropdown component, including basic usage, default open state, placement, disabled state, and custom styling.

```html
<!-- Basic -->
<x-dropdown label="Actions">
  <button>Edit</button>
  <button>Archive</button>
  <button>Delete</button>
</x-dropdown>

<!-- Open by default -->
<x-dropdown label="File" open>
  <a href="/new">New file</a>
  <a href="/open">Open…</a>
  <a href="/save">Save</a>
</x-dropdown>

<!-- Placement -->
<x-dropdown label="More" placement="top-end">
  <button>Option A</button>
  <button>Option B</button>
</x-dropdown>

<!-- Disabled -->
<x-dropdown label="Locked" disabled>
  <button>Hidden</button>
</x-dropdown>

<!-- Custom theme -->
<x-dropdown label="Custom"
  style="
    --x-dropdown-trigger-bg: #6366f1;
    --x-dropdown-trigger-color: #fff;
    --x-dropdown-panel-radius: 12px;
  ">
  <button>Item 1</button>
</x-dropdown>
```

--------------------------------

### x-search-field Standalone Usage Example

Source: https://github.com/avanelsas/baredom/blob/main/docs/x-search-field.md

Provides a JavaScript example of how to use the x-search-field element standalone and listen for its events.

```APIDOC
## Usage Examples

### Standalone with event logging

#### Description
This example shows how to use the `x-search-field` in isolation and log messages to the console when search or clear events occur.

#### HTML
```html
<x-search-field id="site-search" name="q" label="Search" placeholder="Search…"></x-search-field>

<div id="log"></div>
```

#### JavaScript
```javascript
const sf = document.getElementById('site-search');
const log = document.getElementById('log');

sf.addEventListener('x-search-field-search', e => {
  console.log('Search:', e.detail.value);
  log.textContent = `Search submitted: ${e.detail.value}`;
});

sf.addEventListener('x-search-field-clear', () => {
  console.log('Cleared');
  log.textContent = 'Search field cleared';
});
```
```

--------------------------------

### ClojureScript (Hiccup Renderer) Examples

Source: https://github.com/avanelsas/baredom/blob/main/docs/x-badge.md

Examples demonstrating how to render the X-Badge component using ClojureScript with Hiccup syntax.

```APIDOC
## ClojureScript (Hiccup Renderer) Examples for X-Badge

### Description
Illustrates how to render the X-Badge component using ClojureScript and Hiccup.

### Examples

- **Badge with variant and count:**
  ```clojure
  [:x-badge {:variant "error" :count "23"}]
  ```

- **Badge with variant and text:**
  ```clojure
  [:x-badge {:variant "success" :text "NEW"}]
  ```

- **Dot mode badge:**
  ```clojure
  [:x-badge {:variant "error" :dot true}]
  ```
```

--------------------------------

### Basic chip list example

Source: https://github.com/avanelsas/baredom/blob/main/docs/x-chip.md

Demonstrates how to create a basic list of chips using the x-chip element. Ensure the parent container has appropriate styling for flex display and spacing.

```html
<ul role="list" style="display:flex; gap:8px; list-style:none; padding:0">
  <x-chip role="listitem" label="Design"></x-chip>
  <x-chip role="listitem" label="Engineering"></x-chip>
  <x-chip role="listitem" label="Marketing" value="mkt"></x-chip>
</ul>
```

--------------------------------

### Basic JavaScript Example

Source: https://github.com/avanelsas/baredom/blob/main/demo/x-typography.html

A simple JavaScript snippet demonstrating a greeting and an addition function. This is a basic example and does not directly interact with x-typography.

```javascript
const greeting = "Hello, world!";
function add(a, b) {
  return a + b;
}
```

--------------------------------

### Configure x-grid Layouts

Source: https://context7.com/avanelsas/baredom/llms.txt

Demonstrates various grid configurations including responsive auto-fit, fixed columns, and custom templates.

```html
<!-- Auto-fit responsive columns -->
<x-grid gap="md" min-column-size="16rem">
  <x-card>Card One</x-card>
  <x-card>Card Two</x-card>
  <x-card>Card Three</x-card>
  <x-card>Card Four</x-card>
</x-grid>

<!-- Fixed 3-column layout -->
<x-grid columns="3" gap="lg">
  <div>Column 1</div>
  <div>Column 2</div>
  <div>Column 3</div>
</x-grid>

<!-- Custom column template -->
<x-grid columns="1fr 2fr 1fr" gap="sm">
  <aside>Sidebar</aside>
  <main>Main Content</main>
  <aside>Right Panel</aside>
</x-grid>

<!-- Stats dashboard -->
<x-grid columns="4" gap="sm" align-items="start">
  <x-stat label="Users"   value="1,234" trend="up"></x-stat>
  <x-stat label="Revenue" value="$9,800" trend="up"></x-stat>
  <x-stat label="Errors"  value="3" trend="neutral"></x-stat>
  <x-stat label="Uptime"  value="99.9%" trend="up"></x-stat>
</x-grid>

<!-- Gap tokens: none, xs, sm, md, lg, xl -->
<!-- Alignment: start, center, end, stretch -->
<!-- Auto-flow: row, column, dense, row-dense, column-dense -->
```

--------------------------------

### Initialize and Use x-modal

Source: https://github.com/avanelsas/baredom/blob/main/docs/x-modal.md

Import and initialize the x-modal component, then use basic HTML to open and close modals. Ensure the script is imported before usage.

```html
<!-- Import -->
<script>
  import { init } from '@vanelsas/baredom/x-modal';
  init();
</script>

<!-- Basic usage -->
<button onclick="document.getElementById('my-modal').show()">Open Modal</button>

<x-modal id="my-modal" label="Confirm Action">
  <div slot="header">Confirm</div>
  <p>Are you sure you want to proceed?</p>
  <div slot="footer">
    <button onclick="document.getElementById('my-modal').hide()">Cancel</button>
    <button onclick="handleConfirm()">Confirm</button>
  </div>
</x-modal>

<!-- Large variant -->
<x-modal id="settings-modal" size="lg" label="Settings">
  <div slot="header">Settings</div>
  <p>Settings content here…</p>
  <div slot="footer">
    <button onclick="document.getElementById('settings-modal').hide()">Close</button>
  </div>
</x-modal>

<!-- Full-screen -->
<x-modal id="fullscreen-modal" size="full" label="Full Screen View">
  <div slot="header">Full Screen</div>
  <p>Content fills the entire viewport.</p>
</x-modal>
```

--------------------------------

### Labelled Divider Aligned to Start

Source: https://github.com/avanelsas/baredom/blob/main/docs/x-divider.md

Add a label to the divider and align it to the start of the available space. The `align` attribute controls the label's position.

```html
<x-divider label="Section A" align="start"></x-divider>
```

--------------------------------

### ClojureScript chip examples

Source: https://github.com/avanelsas/baredom/blob/main/docs/x-chip.md

Examples of creating chips using ClojureScript with Hiccup syntax. Includes basic chips, non-removable chips, and chips with removal event handling.

```clojure
[:x-chip {:label "Design" :role "listitem"}]
```

```clojure
[:x-chip {:label "Read-only" :removable "false" :role "listitem"}]
```

```clojure
[:x-chip {:label      "Engineering"
          :value      "eng"
          :role       "listitem"
          :on-x-chip-remove (fn [e] (.remove (.-target e)))}]
```

--------------------------------

### Initialize BareDOM Components

Source: https://context7.com/avanelsas/baredom/llms.txt

Register components at application startup to enable their use as HTML elements.

```javascript
// Register components once at application startup
import { init as initButton } from '@vanelsas/baredom/x-button';
import { init as initAlert }  from '@vanelsas/baredom/x-alert';
import { init as initModal }  from '@vanelsas/baredom/x-modal';
import { init as initToaster } from '@vanelsas/baredom/x-toaster';
import { init as initToast } from '@vanelsas/baredom/x-toast';

initButton();
initAlert();
initModal();
initToaster();
initToast();

// Components are now available as HTML elements
document.body.innerHTML = `
  <x-button variant="primary">Click me</x-button>
  <x-alert type="success" text="Registration complete!"></x-alert>
`;
```

--------------------------------

### x-badge Count with Cap

Source: https://github.com/avanelsas/baredom/blob/main/docs/x-badge.md

Shows how to display a numeric count with a maximum value. The first example shows a count of '7' with the default cap. The second example shows a count of '999' capped at '99', which will render as '99+'.

```html
<x-badge variant="error" count="7"></x-badge>
<x-badge variant="error" count="999" max="99"></x-badge>
```

--------------------------------

### Using x-theme Wrapper

Source: https://github.com/avanelsas/baredom/blob/main/docs/x-theme.md

Demonstrates how to wrap child components with x-theme to apply a specified preset.

```APIDOC
## Using x-theme Wrapper

### Description
Wrap any subtree with `<x-theme>` to apply a consistent design token palette to all descendant components.

### Method
N/A (Web Component Usage)

### Endpoint
N/A (Web Component Usage)

### Parameters
#### Attributes
- **preset** (string) - Optional - Name of a built-in or custom preset. Defaults to `"default"`.

### Request Example
```html
<x-theme preset="ocean">
  <x-button>Themed button</x-button>
  <x-alert text="Themed alert"></x-alert>
</x-theme>
```

### Response
N/A (Web Component Usage)

### Slots
#### Default Slot
- **(default)** - All child content. Tokens cascade into children.
```

--------------------------------

### Disabled Chip

Source: https://github.com/avanelsas/baredom/blob/main/docs/x-chip.md

Example of a disabled chip.

```APIDOC
## Disabled Chip

### Description

This example shows a chip with the `disabled` attribute, which prevents interaction.

### Endpoint

N/A (Web Component)

### Parameters

#### Attributes

- **label** (string) - Required - Visible text content of the chip.
- **disabled** (boolean) - Optional - Defaults to `false`. Disables all interaction.

### Request Example

```html
<x-chip label="Disabled Chip" disabled></x-chip>
```

### Response

N/A (Web Component)
```

--------------------------------

### Removable Chip

Source: https://github.com/avanelsas/baredom/blob/main/docs/x-chip.md

Example of a chip with a remove button.

```APIDOC
## Removable Chip

### Description

This example demonstrates a chip with the `removable` attribute set to true, displaying a remove button.

### Endpoint

N/A (Web Component)

### Parameters

#### Attributes

- **label** (string) - Required - Visible text content of the chip.
- **removable** (boolean) - Optional - Defaults to `true`. Renders the remove button.

### Request Example

```html
<x-chip label="Removable Chip" removable></x-chip>
```

### Response

N/A (Web Component)
```

--------------------------------

### Install and Run ClojureScript App

Source: https://github.com/avanelsas/baredom/blob/main/bare-demo/README.md

Use this command to launch the development server and compile ClojureScript sources. Access the application at http://localhost:8001. The page hot-reloads on source changes.

```bash
cd bare-demo
clj -M:dev
```

--------------------------------

### Setup Command Palette with Items

Source: https://github.com/avanelsas/baredom/blob/main/demo/x-command-palette.html

Initializes a command palette element with a predefined list of items and sets up event listeners for selection, closing, and query changes. Use this to populate and manage the palette's content and interactions.

```javascript
const log = document.getElementById("log");
function logEvent(name, detail) {
  log.textContent = `${name} ${JSON.stringify(detail)}\n` + log.textContent;
}

const baseItems = [
  { id: "new-file", label: "New file", group: "File", keywords: ["create", "add"]
  },
  { id: "open-file", label: "Open file…", group: "File", keywords: ["load"]
  },
  { id: "save", label: "Save", group: "File", keywords: ["write"]
  },
  { id: "settings", label: "Preferences", group: "App", keywords: ["config", "options"]
  },
  { id: "theme", label: "Toggle theme", group: "App"
  },
  { id: "shortcuts", label: "Keyboard shortcuts",group: "Help"
  },
  { id: "docs", label: "Documentation", group: "Help"
  },
  { id: "disabled-item", label: "Disabled action", group: "App", disabled: true
  },
];

function setup(id, items) {
  const pal = document.getElementById(id);
  pal.items = items;
  pal.addEventListener("x-command-palette-select", e => {
    logEvent(`${id}:x-command-palette-select`, { id: e.detail.item.id, label: e.detail.item.label });
    pal.removeAttribute("open");
  });
  pal.addEventListener("x-command-palette-close", () => pal.removeAttribute("open"));
  pal.addEventListener("x-command-palette-query-change", e => logEvent(`${id}:x-command-palette-query-change`, e.detail));
}

setup("palette-basic", baseItems.slice(0, 4));
setup("palette-groups", baseItems);
setup("palette-custom", baseItems.slice(0, 5));
setup("palette-live", baseItems);
```

--------------------------------

### Registration

Source: https://github.com/avanelsas/baredom/blob/main/docs/x-skeleton.md

Initialize the x-skeleton component by importing and calling the init function.

```APIDOC
## Registration

```js
import { init } from '@vanelsas/baredom/x-skeleton';
init();
```
```

--------------------------------

### Content Overlay Example

Source: https://github.com/avanelsas/baredom/blob/main/docs/x-gaussian-blur.md

Using the component as a backdrop for text content.

```html
<x-gaussian-blur colors="#667eea, #764ba2" blur="60" style="height: 500px;">
  <div style="display:flex; align-items:center; justify-content:center; height:100%; color:white;">
    <h1>Welcome</h1>
  </div>
</x-gaussian-blur>
```

--------------------------------

### Basic Usage of x-liquid-dock

Source: https://github.com/avanelsas/baredom/blob/main/docs/x-liquid-dock.md

This is a basic example of how to use the x-liquid-dock custom element. It demonstrates placing navigation buttons within the dock.

```html
<x-liquid-dock>
  <button aria-label="Home">&#x1F3E0;</button>
  <button aria-label="Search">&#x1F50D;</button>
  <button aria-label="Messages">&#x1F4AC;</button>
  <button aria-label="Profile">&#x1F464;</button>
</x-liquid-dock>
```