### Toast from Template Examples

Source: https://github.com/knadh/oat/blob/master/docs/content/components/toast.md

Demonstrates using `ot.toast.el` with a pre-defined template, showing variations in duration and placement.

```javascript
ot.toast.el(document.querySelector('#my-template'))
ot.toast.el(document.querySelector('#my-template'), { duration: 8000, placement: 'bottom-center' })
```

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

### Install Oat via npm

Source: https://github.com/knadh/oat/blob/master/docs/content/usage.md

Install the Oat package using npm and import its CSS and JS files into your project.

```bash
npm install @knadh/oat
```

```js
import '@knadh/oat/oat.min.css';
import '@knadh/oat/oat.min.js';
```

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

### Responsive Grid Layout Example

Source: https://github.com/knadh/oat/blob/master/docs/content/components/grid.md

Demonstrates various column and offset configurations within a 12-column grid system. Use `.col-{n}` for width and `.offset-{n}` for spacing.

```html
<div class="container demo-grid">
  <div class="row">
    <div class="col-4">col-4</div>
    <div class="col-4">col-4</div>
    <div class="col-4">col-4</div>
  </div>
  <div class="row">
    <div class="col-6">col-6</div>
    <div class="col-6">col-6</div>
  </div>
  <div class="row">
    <div class="col-3">col-3</div>
    <div class="col-6">col-6</div>
    <div class="col-3">col-3</div>
  </div>
  <div class="row">
    <div class="col-4 offset-2">col-4 offset-2</div>
    <div class="col-4">col-4</div>
  </div>
  <div class="row">
    <div class="col-8">col-8</div>
    <div class="col-3 offset-1">col-3 offset-1</div>
  </div>
  <div class="row">
    <div class="col-3">col-3</div>
    <div class="col-4 col-end">col-4 col-end</div>
  </div>
</div>
```

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

### Basic Spinner Examples

Source: https://github.com/knadh/oat/blob/master/docs/content/components/spinner.md

Use `aria-busy="true"` to show a loading indicator. Customize size with `data-spinner="small|large"`.

```html
<div class="hstack" style="gap: var(--space-8)">
    <div aria-busy="true" data-spinner="small"></div>
    <div aria-busy="true"></div>
    <div aria-busy="true" data-spinner="large"></div>
    <button aria-busy="true" data-spinner="small" disabled>Loading</button>
</div>
```

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

### Input Group Examples

Source: https://github.com/knadh/oat/blob/master/docs/content/components/form.md

Shows how to group inputs with buttons or labels using the `.group` class on a `<fieldset>`.

```html
<fieldset class="group">
  <legend>https://</legend>
  <input type="url" placeholder="subdomain">
  <select aria-label="Select a subdomain">
    <option value="" disabled selected>Select</option>
    <option>.example.com</option>
    <option>.example.net</option>
  </select>
  <button>Go</button>
</fieldset>

<fieldset class="group">
  <input type="text" placeholder="Search" />
  <button>Go</button>
</fieldset>
```

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

### Default Oat Brown Theme Example

Source: https://github.com/knadh/oat/blob/master/docs/content/customizing.md

An example of overriding theme variables to create a specific color profile, in this case, a brown theme.

```css
--background: #fff;
--foreground: #09090b;
--card: #fff;
--card-foreground: #09090b;
--primary: #574747;
--primary-foreground: #fafafa;
--secondary: #f4f4f5;
--secondary-foreground: #574747;
--muted: #f4f4f5;
--muted-foreground: #71717a;
--faint: #fafafa;
--accent: #f4f4f5;
--danger: #df514c;
--danger-foreground: #fafafa;
--success: #4caf50;
--success-foreground: #fafafa;
--warning: #ff8c00;
--warning-foreground: #09090b;
--border: #d4d4d8;
--input: #d4d4d8;
--ring: #574747;
```

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

### API Webhook POST Request Example

Source: https://github.com/knadh/oat/blob/master/docs/templates/demo.html

Example of how to send a POST request to a webhook endpoint using curl. Requires an Authorization header with a Bearer token.

```bash
curl -X POST https://api.example.com/webhooks \
  -H "Authorization: Bearer TOKEN"
```

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

### JavaScript Code Block Example

Source: https://github.com/knadh/oat/blob/master/docs/content/components/typography.md

An example of a JavaScript function within a preformatted code block. This demonstrates how code is displayed when using the <code>pre</code> and <code>code</code> tags.

```javascript
function hello() {
  console.log('Hello, World!');
}
```

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

### Skeleton Card Layout

Source: https://github.com/knadh/oat/blob/master/docs/content/components/skeleton.md

To achieve a card layout with skeleton loaders, place the skeleton elements inside an `<article>` tag. This example shows a card with an image placeholder and two text placeholders.

```html
<article style="display: flex; gap: var(--space-3); padding: var(--space-6);">
  <div role="status" class="skeleton box"></div>
  <div style="flex: 1; display: flex; flex-direction: column; gap: var(--space-1);">
    <div role="status" class="skeleton line"></div>
    <div role="status" class="skeleton line" style="width: 60%"></div>
  </div>
</article>
```

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

### Badge Variants and Styles

Source: https://github.com/knadh/oat/blob/master/docs/content/components/badge.md

Use the `.badge` class with `data-variant` attribute for different color options. The `.outline` class can be added for an outlined style. No specific setup or imports are required beyond including the Oat UI CSS.

```html
<span class="badge">Default</span>
<span class="badge" data-variant="secondary">Secondary</span>
<span class="badge outline">Outline</span>
<span class="badge" data-variant="success">Success</span>
<span class="badge" data-variant="warning">Warning</span>
<span class="badge" data-variant="danger">Danger</span>
```

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

### Basic Skeleton Loaders

Source: https://github.com/knadh/oat/blob/master/docs/content/components/skeleton.md

Use the `.skeleton` class with `role="status"` for loading placeholders. Apply `.line` for text or `.box` for images.

```html
<div role="status" class="skeleton line"></div>
<div role="status" class="skeleton box"></div>
```

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

### Basic Dialog Structure

Source: https://github.com/knadh/oat/blob/master/docs/content/components/dialog.md

Use `commandfor` and `command="show-modal"` on a button to open a target dialog. The dialog can be closed by any interaction outside of it or by pressing Escape.

```html
<button commandfor="demo-dialog" command="show-modal">Open dialog</button>
<dialog id="demo-dialog" closedby="any">
  <form method="dialog">
    <header>
      <h3>Title</h3>
      <p>This is a dialog description.</p>
    </header>
    <div>
      <p>Dialog content goes here. You can put any HTML inside.</p>
      <p>Click outside or press Escape to close.</p>
    </div>
    <footer>
      <button type="button" commandfor="demo-dialog" command="close" class="outline">Cancel</button>
      <button value="confirm">Confirm</button>
    </footer>
  </form>
</dialog>
```

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

### Set Demo Theme with Local Storage

Source: https://github.com/knadh/oat/blob/master/docs/templates/demo.html

Applies a theme to the demo page and persists the selection in local storage. Handles the 'default' theme by removing the attribute.

```javascript
function setDemoTheme(theme) {
  if (theme === 'default') {
    document.documentElement.removeAttribute('data-demo-theme');
  } else {
    document.documentElement.setAttribute('data-demo-theme', theme);
  }
  localStorage.setItem('demo-theme', theme);
  // document.getElementById('theme-menu').hidePopover();
}
setDemoTheme(localStorage.getItem('demo-theme') || 'default');
```

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

### Toast Placement Options

Source: https://github.com/knadh/oat/blob/master/docs/content/components/toast.md

Illustrates the different screen positions available for toast notifications.

```APIDOC
## Toast Placement

### Description
Specifies the screen position where the toast notification will appear.

### Method
`ot.toast(message, title?, options?)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```js
ot.toast('Top left', '', { placement: 'top-left' })
ot.toast('Top center', '',{ placement: 'top-center' })
ot.toast('Top right', '',{ placement: 'top-right' })  // default
ot.toast('Bottom left', '', { placement: 'bottom-left' })
ot.toast('Bottom center', '', { placement: 'bottom-center' })
ot.toast('Bottom right', '',{ placement: 'bottom-right' })
```

### Response
#### Success Response (200)
None (Toast is a UI element)

#### Response Example
None
```

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

### Download Oat files

Source: https://github.com/knadh/oat/blob/master/docs/content/usage.md

Download the minified CSS and JavaScript files for Oat using wget. These files can then be included in your project locally.

```shell
wget https://raw.githubusercontent.com/knadh/oat/refs/heads/gh-pages/oat.min.css
wget https://raw.githubusercontent.com/knadh/oat/refs/heads/gh-pages/oat.min.js
```

```html
<link rel="stylesheet" href="./oat.min.css">
<script src="./oat.min.js" defer></script>
```

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

### Basic Form Elements

Source: https://github.com/knadh/oat/blob/master/docs/content/components/form.md

Demonstrates various standard HTML form elements styled automatically. Ensure inputs are wrapped in `<label>` for proper association.

```html
<form>
  <label data-field>
    Name
    <input type="text" placeholder="Enter your name" />
  </label>

  <label data-field>
    Email
    <input type="email" placeholder="you@example.com" />
  </label>

  <label data-field>
    Password
    <input type="password" placeholder="Password" aria-describedby="password-hint" />
    <small id="password-hint" data-hint>This is a small hint</small>
  </label>

  <div data-field>
    <label>Select</label>
    <select aria-label="Select an option">
      <option value="">Select an option</option>
      <option value="a">Option A</option>
      <option value="b">Option B</option>
      <option value="c">Option C</option>
      <option value="d">Option D</option>
      <option value="e">Option E</option>
      <option value="f">Option F</option>
    </select>
  </div>

  <label data-field>
    Message
    <textarea placeholder="Your message..."></textarea>
  </label>

  <label data-field>
    Disabled
    <input type="text" placeholder="Disabled" disabled />
  </label>

  <label data-field>
    File<br />
    <input type="file" placeholder="Pick a file..." />
  </label>

  <label data-field>
    Date and time
    <input type="datetime-local" />
  </label>

  <label data-field>
    Date
    <input type="date" />
  </label>

  <label data-field>
    <input type="checkbox" /> I agree to the terms
    <span data-hint>This is a hint</span>
  </label>

  <fieldset class="hstack">
    <legend>Preference</legend>
    <label><input type="radio" name="pref">Option A</label>
    <label><input type="radio" name="pref">Option B</label>
    <label><input type="radio" name="pref">Option C</label>
  </fieldset>

  <label data-field>
    Volume
    <input type="range" min="0" max="100" value="50" />
    <span data-hint>This is a hint</span>
  </label>

  <label data-field>
    State
    <input type="checkbox" role="switch" />
    <span data-hint>This is a hint</span>
  </label>

  <button type="submit">Submit</button>
</form>
```

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

### Basic Card Structure

Source: https://github.com/knadh/oat/blob/master/docs/content/components/card.md

Use the 'card' class on an <article> tag to create a visual card. It supports a header, content, and footer.

```html
<article class="card">
  <header>
    <h3>Card Title</h3>
    <p>Card description goes here.</p>
  </header>
  <p>This is the card content. It can contain any HTML.</p>
  <footer class="hstack">
    <button class="outline">Cancel</button>
    <button>Save</button>
  </footer>
</article>
```

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

### Show Toast Notifications

Source: https://github.com/knadh/oat/blob/master/docs/content/components/toast.md

Demonstrates how to display basic toast notifications with different variants and placements.

```APIDOC
## Show Toast Notifications

### Description
Displays a toast notification with a message and an optional title and configuration options.

### Method
`ot.toast(message, title?, options?)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```html
<button onclick="ot.toast('Action completed successfully', 'All good', { variant: 'success' })">Success</button>
<button onclick="ot.toast('Something went wrong', 'Oops', { variant: 'danger', placement: 'top-left' })" data-variant="danger">Danger</button>
<button onclick="ot.toast('Please review this warning', 'Warning', { variant: 'warning', placement: 'bottom-right' })" class="outline">Warning</button>
<button onclick="ot.toast('New notification', 'For your attention', { placement: 'top-center' })">Info</button>
```

### Response
#### Success Response (200)
None (Toast is a UI element)

#### Response Example
None
```

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

### Toast with Dynamic HTML Element

Source: https://github.com/knadh/oat/blob/master/docs/content/components/toast.md

Shows how to create and display a toast using a dynamically generated HTML element. The element's content and attributes can be set programmatically.

```javascript
const el = document.createElement('output');
el.className = 'toast';
el.setAttribute('data-variant', 'warning');
el.innerHTML = '<h6 class="toast-title">Warning</h6><p>Custom content here</p>';
ot.toast.el(el);
```

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

### Toast with Custom Markup

Source: https://github.com/knadh/oat/blob/master/docs/content/components/toast.md

Shows how to display toasts using custom HTML content, either from a template or dynamically created.

```APIDOC
## Toast with Custom Markup

### Description
Allows displaying toasts with custom HTML content, providing more flexibility in presentation.

### Method
`ot.toast.el(element, options?)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
**From a template:**
```html
<template id="undo-toast">
  <output class="toast" data-variant="success">
    <h6 class="toast-title">Changes saved</h6>
    <p>Your document has been updated.</p>
    <button data-variant="secondary" class="small" onclick="this.closest('.toast').remove()">Okay</button>
  </output>
</template>

<button onclick="ot.toast.el(document.querySelector('#undo-toast'), { duration: 8000 })">
  Toast with action
</button>
```

**Dynamic element:**
```js
const el = document.createElement('output');
el.className = 'toast';
el.setAttribute('data-variant', 'warning');
el.innerHTML = '<h6 class="toast-title">Warning</h6><p>Custom content here</p>';
ot.toast.el(el);
```

### Response
#### Success Response (200)
None (Toast is a UI element)

#### Response Example
None
```

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

### Basic HTML Structure with Oat

Source: https://github.com/knadh/oat/blob/master/docs/content/usage.md

A fundamental HTML document demonstrating how Oat styles semantic elements like headings, paragraphs, and buttons without requiring explicit classes.

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My App</title>
  <link rel="stylesheet" href="oat.min.css">
  <script src="oat.min.js" defer></script>
</head>
<body>
  <h1>Hello World</h1>
  <p>This paragraph is styled automatically.</p>
  <button>Click me</button>
</body>
</html>
```

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

### Create a responsive data table

Source: https://github.com/knadh/oat/blob/master/docs/content/components/table.md

Use thead and tbody tags for structure and wrap the table in a div with the class 'table' for responsive horizontal scrolling.

```html
<div class="table">
  <table>
    <thead>
      <tr>
        <th>Name</th>
        <th>Email</th>
        <th>Role</th>
        <th>Status</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Alice Johnson</td>
        <td>alice@example.com</td>
        <td>Admin</td>
        <td><span class="badge" data-variant="success">Active</span></td>
      </tr>
      <tr>
        <td>Bob Smith</td>
        <td>bob@example.com</td>
        <td>Editor</td>
        <td><span class="badge">Active</span></td>
      </tr>
      <tr>
        <td>Carol White</td>
        <td>carol@example.com</td>
        <td>Viewer</td>
        <td><span class="badge" data-variant="secondary">Pending</span></td>
      </tr>
    </tbody>
  </table>
</div>
```

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

### Implement basic sidebar layout

Source: https://github.com/knadh/oat/blob/master/docs/content/components/sidebar.md

Use data-sidebar-layout on a container with an aside element for the sidebar and a main element for content.

```html
<div data-sidebar-layout>
  <aside data-sidebar>
    <nav>
      <ul>
        <li><a href="#sidebar" aria-current="page">Home</a></li>
        <li><a href="#sidebar">Users</a></li>
        <li>
          <details open>
            <summary>Settings</summary>
            <ul>
              <li><a href="#sidebar">General</a></li>
              <li><a href="#sidebar">Security</a></li>
              <li><a href="#sidebar">Billing</a></li>
            </ul>
          </details>
        </li>
      </ul>
    </nav>
    <footer>
      <button class="outline" class="sm" style="width: 100%;">Logout</button>
    </footer>
  </aside>
  <main>
    <div style="padding: var(--space-3)">Main content area. Scrolls with the page body.</div>
  </main>
</div>
```

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

### Show Basic Toast Notifications

Source: https://github.com/knadh/oat/blob/master/docs/content/components/toast.md

Use `ot.toast(message, title?, options?)` to display simple toast messages. Options can customize the appearance and behavior.

```html
<button onclick="ot.toast('Action completed successfully', 'All good', { variant: 'success' })">Success</button>
<button onclick="ot.toast('Something went wrong', 'Oops', { variant: 'danger', placement: 'top-left' })" data-variant="danger">Danger</button>
<button onclick="ot.toast('Please review this warning', 'Warning', { variant: 'warning', placement: 'bottom-right' })" class="outline">Warning</button>
<button onclick="ot.toast('New notification', 'For your attention', { placement: 'top-center' })">Info</button>
```

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

### Toast Options

Source: https://github.com/knadh/oat/blob/master/docs/content/components/toast.md

Details the available configuration options for customizing toast notifications.

```APIDOC
## Toast Options

### Description
Configuration options to customize the appearance and behavior of toast notifications.

### Method
`ot.toast(message, title?, options?)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```js
// Example using options
ot.toast('Notification', '', { variant: 'success', placement: 'bottom-center', duration: 5000 })
```

### Response
#### Success Response (200)
None (Toast is a UI element)

#### Response Example
None

### Options Table
| Option      | Default       | Description                          |
| ----------- | ------------- | ------------------------------------ |
| `variant`   | `''`          | `'success'`, `'danger'`, `'warning'` |
| `placement` | `'top-right'` | Position on screen                   |
| `duration`  | `4000`        | Auto-dismiss in ms (0 = persistent)  |
```

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

### Toast Placement Options

Source: https://github.com/knadh/oat/blob/master/docs/content/components/toast.md

Control the screen position of toasts using the `placement` option. Defaults to 'top-right'.

```javascript
ot.toast('Top left', '', { placement: 'top-left' })
ot.toast('Top center', '',{ placement: 'top-center' })
ot.toast('Top right', '',{ placement: 'top-right' })  // default
ot.toast('Bottom left', '', { placement: 'bottom-left' })
ot.toast('Bottom center', '', { placement: 'bottom-center' })
ot.toast('Bottom right', '',{ placement: 'bottom-right' })
```

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

### Create Button Groups

Source: https://github.com/knadh/oat/blob/master/docs/content/components/button.md

Wrap button elements in a menu tag with the buttons class to create connected button groups.

```html
<menu class="buttons">
  <li><button class="outline">Left</button></li>
  <li><button class="outline">Center</button></li>
  <li><button class="outline">Right</button></li>
</menu>
```

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

### Create a Split Button with Oat

Source: https://github.com/knadh/oat/blob/master/docs/content/recipes.md

Uses menu.buttons for joined controls and ot-dropdown for secondary actions.

```html
<ot-dropdown>
  <menu class="buttons">
    <li><button class="outline">Save</button></li>
    <li>
      <button  class="outline" popovertarget="save-actions" aria-label="More save actions">
        More
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m6 9 6 6 6-6" /></svg>
      </button>
    </li>
  </menu>
  <menu popover id="save-actions">
    <button role="menuitem">Save draft</button>
    <button role="menuitem">Save and publish</button>
    <button role="menuitem">Duplicate</button>
  </menu>
</ot-dropdown>
```

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

### Create Stats Cards with Oat

Source: https://github.com/knadh/oat/blob/master/docs/content/recipes.md

Composes dashboard metrics using grid, card, badge, and progress or meter components.

```html
<div class="container">
  <div class="row">
    <article class="card col-4">
      <header class="hstack justify-between items-center">
        <h4>Revenue</h4>
        <span class="badge" data-variant="success">+12%</span>
      </header>
      <h2>$42,200</h2>
      <p class="text-light">vs last month</p>
      <progress value="72" max="100"></progress>
    </article>

    <article class="card col-4">
      <header class="hstack justify-between items-center">
        <h4>Completion</h4>
        <span class="badge" data-variant="warning">-2%</span>
      </header>
      <h2>4.6%</h2>
      <p class="text-light">checkout completion</p>
      <meter value="0.46" min="0" max="1" low="0.3" high="0.7" optimum="1"></meter>
    </article>

    <article class="card col-4">
      <header class="hstack justify-between items-center">
        <h4>Tickets</h4>
        <span class="badge">14</span>
      </header>
      <h2>14</h2>
      <p class="text-light">support queue</p>
      <progress value="35" max="100"></progress>
    </article>
  </div>
</div>
```

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

### Toast with Custom HTML Content

Source: https://github.com/knadh/oat/blob/master/docs/content/components/toast.md

Use `ot.toast.el(element, options?)` to display toasts using custom HTML elements. The provided element is cloned, allowing templates to be reused.

```html
<template id="undo-toast">
  <output class="toast" data-variant="success">
    <h6 class="toast-title">Changes saved</h6>
    <p>Your document has been updated.</p>
    <button data-variant="secondary" class="small" onclick="this.closest('.toast').remove()">Okay</button>
  </output>
</template>

<button onclick="ot.toast.el(document.querySelector('#undo-toast'), { duration: 8000 })">
  Toast with action
</button>
```

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

### Implement Tooltips with HTML

Source: https://github.com/knadh/oat/blob/master/docs/content/components/tooltip.md

Use the title attribute on elements to trigger tooltips. Replaced elements like images must be wrapped in a parent element containing the title attribute.

```html
<button title="Save your changes">Save</button>
<button title="Delete this item" data-variant="danger">Delete</button>
<a href="#" title="View your profile">Profile</a>
<span title="Images need a parent with title"><img src="https://oat.ink/logo.svg" height="32" /></span>

<button title="On top">Top</button>
<button title="Below" data-tooltip-placement="bottom">Bottom</button>
<button title="On the left" data-tooltip-placement="left">Left</button>
<button title="On the right" data-tooltip-placement="right">Right</button>
```

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

### Create a pagination navigation bar

Source: https://github.com/knadh/oat/blob/master/docs/content/components/pagination.md

Uses the existing button classes within a menu element to create a pagination interface.

```html
<nav aria-label="Pagination">
    <menu class="buttons">
        <li><a href="#pagination" class="button outline small">&larr; Previous</a></li>
        <li><a href="#pagination" class="button outline small">1</a></li>
        <li><a href="#pagination" class="button outline small">2</a></li>
        <li><a href="#pagination" class="button small" aria-current="page">3</a></li>
        <li><a href="#pagination" class="button outline small">4</a></li>
        <li><a href="#pagination" class="button outline small">5</a></li>
        <li><a href="#pagination" class="button outline small">Next &rarr;</a></li>
    </menu>
</nav>
```

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

### Include Oat via CDN

Source: https://github.com/knadh/oat/blob/master/docs/content/usage.md

Link the Oat CSS and JavaScript files directly in your HTML using a CDN for quick integration.

```html
<link rel="stylesheet" href="https://unpkg.com/@knadh/oat/oat.min.css">
<script src="https://unpkg.com/@knadh/oat/oat.min.js" defer></script>
```

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

### Create an Empty State with Oat

Source: https://github.com/knadh/oat/blob/master/docs/content/recipes.md

Uses a card, text, and primary actions for list or result empty states.

```html
<article class="card align-center">
  <h3>Nothing here yet</h3>
  <p class="text-light">Why don't you create something?</p>
  <footer class="hstack justify-center mt-4">
    <button>New something</button>
  </footer>
</article>
```

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

### Add top sticky navigation

Source: https://github.com/knadh/oat/blob/master/docs/content/components/sidebar.md

Include a header element with data-topnav to create a full-width navigation bar above the sidebar.

```html
<body data-sidebar-layout>
  <nav data-topnav>
    <button data-sidebar-toggle aria-label="Toggle menu" class="outline">☰</button>
    <span>App Name</span>
  </nav>

  <aside data-sidebar>
    <header>Logo</header>
    <nav>...navigation...</nav>
    <footer>Actions</footer>
  </aside>

  <main>
    Main page content.
  </main>
</body>
```

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

### Display native progress bars

Source: https://github.com/knadh/oat/blob/master/docs/content/components/progress.md

Renders multiple progress bars with defined values and maximums.

```html
<progress value="60" max="100"></progress>
<progress value="30" max="100"></progress>
<progress value="90" max="100"></progress>
```

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

### Toast Customization Options

Source: https://github.com/knadh/oat/blob/master/docs/content/components/toast.md

Customize toast appearance with `variant` and control dismissal with `duration`. The `placement` option is also available here.

```javascript
// Example usage with options (not directly executable code, but demonstrates options)
// ot.toast('Message', 'Title', { variant: 'success', placement: 'top-left', duration: 5000 })
```

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

### Implement Tabbed Interface with ot-tabs

Source: https://github.com/knadh/oat/blob/master/docs/content/components/tabs.md

Wrap tab buttons and panels in an <ot-tabs> element using role attributes for accessibility.

```html
<ot-tabs>
  <div role="tablist">
    <button role="tab">Account</button>
    <button role="tab">Password</button>
    <button role="tab">Notifications</button>
  </div>
  <div role="tabpanel">
    <h3>Account Settings</h3>
    <p>Manage your account information here.</p>
  </div>
  <div role="tabpanel">
    <h3>Password Settings</h3>
    <p>Change your password here.</p>
  </div>
  <div role="tabpanel">
    <h3>Notification Settings</h3>
    <p>Configure your notification preferences.</p>
  </div>
</ot-tabs>
```

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

### Configure always-collapsible sidebar

Source: https://github.com/knadh/oat/blob/master/docs/content/components/sidebar.md

Set data-sidebar-layout="always" on the container to keep the toggle visible on all screen sizes.

```html
<body data-sidebar-layout="always">
  ...
</body>
```

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

### Create Accordion Components with HTML

Source: https://github.com/knadh/oat/blob/master/docs/content/components/accordion.md

Uses native HTML5 elements for collapsible content. The name attribute can be used to group multiple details elements together.

```html
<details>
  <summary>What is Oat</summary>
  <p>Oat is a minimal, semantic-first UI component library with zero dependencies.</p>
</details>

<details>
  <summary>How do I use it</summary>
  <p>Include the CSS and JS files, then write semantic HTML. Most elements are styled by default.</p>
</details>

<details>
  <summary>Is it accessible</summary>
  <p>Yes! It uses semantic HTML and ARIA attributes. Keyboard navigation works out of the box.</p>
</details>

<details name="same">
  <summary>This is grouped with the next one</summary>
  <p>Using the <code>name</code> attribute groups items like radio.</p>
</details>

<details name="same">
  <summary>This is grouped with the previous one</summary>
  <p>Using the <code>name</code> attribute groups items like radio.</p>
</details>
```

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

### Create a dropdown menu with ot-dropdown

Source: https://github.com/knadh/oat/blob/master/docs/content/components/dropdown.md

Uses the popovertarget attribute to link a button trigger to a menu element containing menuitem roles.

```html
<ot-dropdown>
  <button popovertarget="demo-menu" class="outline">
    Options
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m6 9 6 6 6-6" /></svg>
  </button>
  <menu popover id="demo-menu">
    <button role="menuitem">Profile</button>
    <button role="menuitem">Settings</button>
    <button role="menuitem">Help</button>
    <hr>
    <button role="menuitem">Logout</button>
  </menu>
</ot-dropdown>
```

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

### Jinja Component Loop

Source: https://github.com/knadh/oat/blob/master/docs/templates/base.html

A Jinja template snippet that iterates over component pages, displaying their titles and indicating if they are web components.

```jinja
{% set components = get_section(path="components/_index.md") %} {% for component in components.pages %}*   [{{ component.title }} {% if component.extra.webcomponent | default(value=false) %}WC{% endif %}](/components/#{{ component.slug }}) {% endfor %}
```

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

### Apply Button Variants

Source: https://github.com/knadh/oat/blob/master/docs/content/components/button.md

Use data-variant attributes for semantic styling and classes for visual variations like outline or ghost buttons.

```html
<button>Primary</button>
<button data-variant="secondary">Secondary</button>
<button data-variant="danger">Danger</button>
<button class="outline">Outline</button>
<button data-variant="danger" class="outline">Danger</button>
<button class="ghost">Ghost</button>
<button disabled>Disabled</button>
```

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

### Apply Button Sizes

Source: https://github.com/knadh/oat/blob/master/docs/content/components/button.md

Apply .small or .large classes to adjust button dimensions. Hyperlinks can also be styled as buttons using the .button class.

```html
<button class="small">Small</button>
<button>Default</button>
<button class="large">Large</button>
<a href="#button" class="button">Hyperlink</a>
```

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

### Displaying meter elements with varying values

Source: https://github.com/knadh/oat/blob/master/docs/content/components/meter.md

Use the meter element to visualize values within a defined range. The browser automatically adjusts colors based on the provided low, high, and optimum attributes.

```html
<meter value="0.8" min="0" max="1" low="0.3" high="0.7" optimum="1"></meter>
<meter value="0.5" min="0" max="1" low="0.3" high="0.7" optimum="1"></meter>
<meter value="0.2" min="0" max="1" low="0.3" high="0.7" optimum="1"></meter>
```

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

### Apply Theme Before Rendering

Source: https://github.com/knadh/oat/blob/master/docs/templates/base.html

This JavaScript code snippet prevents a Flash of Unstyled Content (FOUC) by applying the user's preferred theme before the page renders. It reads the theme from local storage.

```javascript
(function() { var t = localStorage.getItem('theme'); if (t) { document.documentElement.style.colorScheme = t; document.documentElement.setAttribute('data-theme', t); } })();
```

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

### Create a popover element with ot-dropdown

Source: https://github.com/knadh/oat/blob/master/docs/content/components/dropdown.md

Wraps an article element in ot-dropdown to display complex content like confirmation dialogs.

```html
<ot-dropdown>
  <button popovertarget="demo-confirm" class="outline">
    Confirm
  </button>
  <article class="card" popover id="demo-confirm">
    <header>
      <h4>Are you sure?</h4>
      <p>This action cannot be undone.</p>
    </header>
    <br />
    <footer>
      <button class="outline small" popovertarget="demo-confirm">Cancel</button>
      <button data-variant="danger" class="small" popovertarget="demo-confirm">Delete</button>
    </footer>
  </article>
</ot-dropdown>
```

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

### Overlay Spinner

Source: https://github.com/knadh/oat/blob/master/docs/content/components/spinner.md

Adding `data-spinner="overlay"` dims the container's contents and overlays the spinner on top. This is useful for indicating loading states within specific components.

```html
<article class="card" aria-busy="true" data-spinner="large overlay">
  <header>
    <h3>Card Title</h3>
    <p>Card description goes here.</p>
  </header>
  <p>This is the card content. It can contain any HTML.</p>
  <footer class="flex gap-2 mt-4">
    <button class="outline">Cancel</button>
    <button>Save</button>
  </footer>
</article>
```

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

### Create Avatar Group

Source: https://github.com/knadh/oat/blob/master/docs/content/components/avatar.md

Wrap multiple avatars within a `<figure data-variant="avatar" role="group">` to create an avatar group. The `.small` or `.large` classes on the group container control the size of all avatars within it.

```html
<figure data-variant="avatar" role="group" class="small" aria-label="Team members">
    <figure data-variant="avatar" aria-label="Jane Doe">
        <img src="/avatar.svg" alt="" />
    </figure>
    <figure data-variant="avatar" aria-label="John Smith">
        <img src="/avatar.svg" alt="" />
    </figure>
    <figure data-variant="avatar" aria-label="Alex Lee">
        <img src="/avatar.svg" alt="" />
    </figure>
</figure>

<figure data-variant="avatar" role="group" aria-label="Team members">
    <figure data-variant="avatar" aria-label="Jane Doe">
        <img src="/avatar.svg" alt="" />
    </figure>
    <figure data-variant="avatar" aria-label="John Smith">
        <img src="/avatar.svg" alt="" />
    </figure>
    <figure data-variant="avatar" aria-label="Alex Lee">
        <img src="/avatar.svg" alt="" />
    </figure>
</figure>

<figure data-variant="avatar" role="group" class="large" aria-label="Team members">
    <figure data-variant="avatar" aria-label="Jane Doe">
        <img src="/avatar.svg" alt="" />
    </figure>
    <figure data-variant="avatar" aria-label="John Smith">
        <img src="/avatar.svg" alt="" />
    </figure>
    <figure data-variant="avatar" aria-label="Alex Lee">
        <img src="/avatar.svg" alt="" />
    </figure>
</figure>
```

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

### Basic Toggle Switches

Source: https://github.com/knadh/oat/blob/master/docs/content/components/switch.md

Use `role="switch"` on an input of type `checkbox` to enable toggle switch styling. This allows for native HTML switches without JavaScript.

```html
<label>
  <input type="checkbox" role="switch"> Notifications
</label>
<label>
  <input type="checkbox" role="switch" checked> Confabulation
</label>
```

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

### Create a Form Card with Oat

Source: https://github.com/knadh/oat/blob/master/docs/content/recipes.md

Groups related form fields inside a card with standard field containers and actions.

```html
<article class="card">
  <header>
    <h3>Profile</h3>
    <p class="text-light">Update account information</p>
  </header>

  <div class="mt-4">
    <label data-field>
      Name
      <input type="text" value="Your name" />
    </label>

    <label data-field>
      Email
      <input type="email" value="mila@example.com" />
    </label>

    <label data-field>
      <input type="checkbox" role="switch" checked> Email notifications
    </label>
  </div>

  <footer class="hstack justify-end mt-4">
    <button class="outline">Cancel</button>
    <button>Save</button>
  </footer>
</article>
```

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

### HTML Typography Elements

Source: https://github.com/knadh/oat/blob/master/docs/content/components/typography.md

Demonstrates the default styling for headings, paragraphs, links, inline code, code blocks, blockquotes, horizontal rules, and lists. These elements are styled automatically without needing specific classes.

```html
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
```

```html
<p>This is a paragraph with <strong>bold text</strong>, <em>italic text</em>, and <a href="#">a link</a>.</p>
```

```html
<p>Here's some <code>inline code</code> and a code block:</p>
```

```html
<blockquote>
  This is a blockquote. It's styled automatically.
</blockquote>
```

```html
<hr>
```

```html
<ul>
  <li>Unordered list item 1</li>
  <li>Unordered list item 2</li>
  <li>Unordered list item 3</li>
</ul>
```

```html
<ol>
  <li>Ordered list item 1</li>
  <li>Ordered list item 2</li>
  <li>Ordered list item 3</li>
</ol>
```

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

### Clear Toasts

Source: https://github.com/knadh/oat/blob/master/docs/content/components/toast.md

Use `ot.toast.clear()` to dismiss all active toasts or `ot.toast.clear(placement)` to dismiss toasts from a specific screen position.

```javascript
ot.toast.clear()              // Clear all
ot.toast.clear('top-right')   // Clear specific placement
```

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

### Create Single Avatar

Source: https://github.com/knadh/oat/blob/master/docs/content/components/avatar.md

Use `<figure data-variant="avatar">` with an `<img>` tag for image avatars, or `<abbr>` for text initials. The `aria-label` attribute is important for accessibility.

```html
<figure data-variant="avatar" class="small" aria-label="Jane Doe">
    <img src="/avatar.svg" alt="" />
</figure>

<figure data-variant="avatar" aria-label="Oat">
    <abbr title="Jane Doe">OT</abbr>
</figure>

<figure data-variant="avatar" aria-label="Jane Doe">
    <img src="/avatar.svg" alt="" />
</figure>

<figure data-variant="avatar" class="large" aria-label="Jane Doe">
    <img src="/avatar.svg" alt="" />
</figure>
```

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

### Validation Error Display

Source: https://github.com/knadh/oat/blob/master/docs/content/components/form.md

Illustrates how to display validation errors by using `data-field="error"` on field containers and including an error message element.

```html
<div data-field="error">
  <label for="error-input">Email</label>
  <input type="email" aria-invalid="true" aria-describedby="error-message" id="error-input" value="invalid-email" />
  <div id="error-message" class="error" role="status">Please enter a valid email address.</div>
</div>
```

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

### Jinja Template Title Block

Source: https://github.com/knadh/oat/blob/master/docs/templates/base.html

A Jinja template block used to set the page title, likely for dynamic content generation.

```jinja
{% block title %}{{ config.title }}{% endblock %}
```

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

### HTML Alert Messages with Variants

Source: https://github.com/knadh/oat/blob/master/docs/content/components/alert.md

Use `role="alert"` for semantic alert messages. Set the `data-variant` attribute to `success`, `warning`, or `error` to apply specific styling. If no variant is specified, a default info style is applied.

```html
<div role="alert" data-variant="success">
  <strong>Success!</strong> Your changes have been saved.
</div>

<div role="alert" data-variant="warning">
  <strong>Warning!</strong> Please review before continuing.
</div>

<div role="alert">
  <strong>Info</strong> This is a default alert message.
</div>

<div role="alert" data-variant="error">
  <strong>Error!</strong> Something went wrong.
</div>
```

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

### Inline Dialog Close Handler

Source: https://github.com/knadh/oat/blob/master/docs/content/components/dialog.md

Alternatively, use the `onclose` attribute directly on the `<dialog>` element for inline handling of the close event, providing a concise way to log the return value.

```html
<dialog id="my-dialog" onclose="console.log(this.returnValue)">
```

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

### HTML Breadcrumb Navigation

Source: https://github.com/knadh/oat/blob/master/docs/content/components/breadcrumb.md

Use a semantic breadcrumb `<nav>` with an ordered list and `aria-current="page"` for the active item. Ensure proper ARIA attributes for accessibility.

```html
<nav aria-label="Breadcrumb">
  <ol class="unstyled hstack" style="font-size: var(--text-7)">
    <li><a href="#breadcrumbs" class="unstyled">Home</a></li>
    <li aria-hidden="true">/</li>
    <li><a href="#breadcrumbs" class="unstyled">Projects</a></li>
    <li aria-hidden="true">/</li>
    <li><a href="#breadcrumbs" class="unstyled">Oat Docs</a></li>
    <li aria-hidden="true">/</li>
    <li><a href="#breadcrumbs" class="unstyled" aria-current="page"><strong>Breadcrumb</strong></a></li>
  </ol>
</nav>
```

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

### Handling Dialog Close Event

Source: https://github.com/knadh/oat/blob/master/docs/content/components/dialog.md

Listen to the native `close` event on the dialog element to retrieve the `returnValue` of the button that closed the dialog. This allows for programmatic handling of dialog results.

```javascript
const dialog = document.querySelector("#demo-dialog");
dialog.addEventListener('close', (e) => {
  console.log(dialog.returnValue);
});
```

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

### Clearing Toasts

Source: https://github.com/knadh/oat/blob/master/docs/content/components/toast.md

Provides methods for programmatically dismissing toast notifications.

```APIDOC
## Clearing Toasts

### Description
Methods to dismiss toast notifications, either all at once or from a specific placement.

### Method
`ot.toast.clear(placement?)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```js
ot.toast.clear()              // Clear all toasts
ot.toast.clear('top-right')   // Clear toasts from a specific placement
```

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

#### Response Example
None
```

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

### Dialog with Form Fields

Source: https://github.com/knadh/oat/blob/master/docs/content/components/dialog.md

Forms within dialogs function naturally. Use `command="close"` on cancel buttons to close the dialog without submitting the form.

```html
<button commandfor="demo-dialog-form" command="show-modal">Open form dialog</button>
<dialog id="demo-dialog-form">
  <form method="dialog">
    <header>
      <h3>Edit form</h3>
    </header>
    <div class="vstack">
      <label>Name <input name="name" required></label>
      <label>Email <input name="email" type="email"></label>
    </div>
    <footer>
      <button type="button" commandfor="demo-dialog-form" command="close" class="outline">Cancel</button>
      <button value="save">Save</button>
    </footer>
  </form>
</dialog>
```

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

### Disabled Toggle Switches

Source: https://github.com/knadh/oat/blob/master/docs/content/components/switch.md

Add the `disabled` attribute to a checkbox with `role="switch"` to create disabled toggle switches. This applies to both the 'off' and 'on' states.

```html
<label>
  <input type="checkbox" role="switch" disabled> Disabled off
</label>
<label>
  <input type="checkbox" role="switch" checked disabled> Disabled on
</label>
```