Bumping up version unmber to 0.3.8

Fix: include command in combined JS bundle + fix command examples

.eleventy.js

@@ -5,9 +5,11 @@ import fs from "fs";
 import path from "path";
 
 export default async function(eleventyConfig) {
+  eleventyConfig.addWatchTarget("src/nunjucks/");
   eleventyConfig.setInputDirectory("./docs/src");
   eleventyConfig.addPassthroughCopy({"docs/src/assets": "assets"});
   eleventyConfig.addPassthroughCopy({ "src/js": "assets/js" });
+  eleventyConfig.addPassthroughCopy({ "docs/src/llms.txt": "llms.txt" });
   eleventyConfig.addPlugin(eleventyLucideicons);
   eleventyConfig.addShortcode("fetchCode", function(filePath) {
     const absolutePath = path.resolve(process.cwd(), filePath);
@@ -42,4 +44,4 @@ export default async function(eleventyConfig) {
     { autoescape: true }
   );
   eleventyConfig.setLibrary("njk", nunjucksEnvironment); 
-}
+}

.gitattributes

@@ -0,0 +1 @@
+docs/src/assets/styles.css merge=theirs

.github/FUNDING.yml

@@ -1 +0,0 @@
-github: [hunvreus]

.gitignore

@@ -1,5 +1,6 @@
 .*
 !.gitignore
+!.gitattributes
 !.eleventy.js
 
 _site/

AGENTS.md

@@ -0,0 +1,112 @@
+# Basecoat – Agent Guide
+
+## What is Basecoat?
+
+Basecoat is a vanilla JavaScript/HTML/CSS port of shadcn/ui components. It reuses shadcn/ui's design patterns and Tailwind CSS classes while maintaining semantic HTML, native browser elements, and full accessibility (ARIA attributes, proper hierarchies, keyboard navigation). The goal is to provide shadcn-quality components without React dependencies.
+
+## Quickstart
+
+- Install deps: `npm i`
+- Dev docs server: `npm run docs:dev`
+- Build CSS/JS: `npm run build`
+- Build static docs: `npm run docs:build`
+
+## What to edit (and what not)
+
+- Edit sources only:
+  - `src/css/basecoat.css` – All component CSS classes (Tailwind + custom)
+  - `src/js/*.js` – Individual component JS files (kebab-case, ESM) + `basecoat.js` (component registry)
+  - `src/nunjucks/*.njk` and `src/jinja/*.html.jinja` – Component template macros
+  - `docs/src/components/*.njk` – Component documentation pages with examples
+  - `docs/src/_includes/` – Layout templates, partials, and navigation
+- Do not edit build outputs:
+  - `packages/*/dist` – built CSS/JS bundles
+  - `_site/` – generated docs site
+
+## Project layout
+
+- Workspaces: root npm workspace with publishable packages in `packages/*`.
+- Packages:
+  - `packages/css` – built CSS and JS bundles under `dist/`.
+  - `packages/cli` – CLI; distributed assets live under `dist/`.
+- Docs site: `docs/src` (Eleventy); output goes to `_site/`.
+
+## Conventions
+
+- ESM everywhere (`import`/`export`).
+- Prettier defaults (2 spaces; single quotes per file preference).
+- Filenames for assets: kebab-case (e.g., `dropdown-menu.js`, `basecoat.cdn.css`).
+- JS naming: `camelCase` for vars/functions; `PascalCase` for DOM classes and exported component names when applicable.
+
+## Design Principles
+
+- **Minimal code**: Prefer native HTML elements and browser behavior over JavaScript abstractions
+- **Accessibility-first**: Semantic HTML, proper ARIA attributes, keyboard navigation
+- **CSS patterns**:
+  - Use `border` for lines/separators (not `background` on `<hr>`)
+  - Use `:is()` and `:has()` for compact selectors
+  - Use `isolation: isolate` to contain z-index stacking contexts
+  - Use `data-*` attributes for styling states, `aria-*` for accessibility semantics
+- **Component patterns**:
+  - Dialog variants use wrapper classes (e.g., `.command-dialog` wraps `.command`)
+  - JavaScript components register with `window.basecoat.register()`
+  - Emit custom events for user actions (e.g., `command:select`)
+  - Filter disabled options (`aria-disabled="true"`) from all interactions
+- **When NOT to create a component**:
+  - If it's just composition of existing elements (users can do it with standard HTML/Tailwind)
+  - If behavior is fully native (e.g., fieldset, legend)
+
+## Adding new components
+
+Before creating a component, ask:
+1. Does shadcn/ui have it? → Port it
+2. Is it pure composition? → Document pattern, no component
+3. Does it need JS behavior? → Create component
+4. Is it just CSS? → Add to basecoat.css, document usage
+
+Examples:
+- Field/Fieldset: CSS-only patterns (no JS component)
+- Empty/Item/Input Group: Pure composition (docs only)
+- Command/Select: JS behavior required (full component)
+
+## Common tasks
+
+- Update a component's CSS/JS: Edit `src/css/basecoat.css` and/or `src/js/*.js`.
+- Update a component template: Edit `src/nunjucks/*.njk` and/or `src/jinja/*.html.jinja`.
+- Add a new component: Create JS, CSS, templates, and docs page under `docs/src/components/*.njk`.
+- Update navigation: Edit files in `docs/src/_includes/partials/`.
+
+## Testing
+
+No automated testing configured. User validates manually via the docs site (`npm run docs:dev`).
+
+## Commits and PRs
+
+- Commits: concise, imperative (≤72 chars), optional scope.
+  - Example: `select: prevent change event on init`.
+- PRs: include description, linked issues (e.g., `Closes #123`), and before/after screenshots or code snippets for visual/behavioral changes.
+- Keep PRs focused; update docs examples when components or APIs change.
+
+## Environment and tooling
+
+- Node 18+ recommended.
+- Eleventy config: `.eleventy.js`.
+- Tailwind via `@tailwindcss/cli` v4.
+- Build uses Tailwind CLI and `terser`; both are provided via devDependencies.
+
+## Git workflow
+
+- `.gitattributes` configures merge strategies for generated files
+- `docs/src/assets/styles.css` auto-resolves to incoming changes (regenerated by Tailwind)
+- Always run `npm run build` before publishing packages
+
+## Publishing packages
+
+1. Bump version in root `package.json`
+2. Run `npm run build` to generate dist files
+3. Run `npm publish --workspaces` to publish both packages
+
+## Package references
+
+- `packages/css` usage and details: see `packages/css/README.md`.
+- `packages/cli` usage and details: see `packages/cli/README.md`.

CONTRIBUTING.md

@@ -0,0 +1,15 @@
+# Contributing to Basecoat
+
+- Support development by sponsoring the author: https://github.com/sponsors/hunvreus
+- Submit pull requests (PRs) against the `development` branch, not `main`.
+- For branches, we have:
+  - `main` is our production and default branch. This is what we deploy to https://basecoatui.com and publish to https://www.npmjs.com/package/basecoat-css and https://www.npmjs.com/package/basecoat-cli.
+  - `development` is for staging. We will deploy it soon at https://dev.basecoatui.com.
+  - New features are worked in `feature/name-of-the-feature` branches.
+  - Issues are addressed in `issue/123-main-isse` branches.
+  - When ready, we PR against `development`, test it and then finally merge to `main`.
+- Keep changes focused: one feature or fix per PR.
+- Test locally before submitting.
+- Follow existing code style.
+
+Thanks for helping!

README.md

@@ -6,7 +6,7 @@ A collection of modern UI components built with Tailwind CSS that works with any
 
 ## Features
 
-- **Lightweight**: no runtime JS, just CSS and tiny Alpine.js scripts for the more interactive components.
+- **Lightweight**: no runtime JS, just CSS and a tiny bit of vanilla JavaScript for the more interactive components.
 - **Easy to use**: add classes like `btn` or `input` and you're done.
 - **Framework-agnostic**: works with any backend or frontend stack.
 - **Accessible**: components follow accessibility best practices.

docs/css/custom.css

@@ -12,22 +12,22 @@
 
 .content {
   > h2 {
-    @apply mt-16 mb-6 scroll-m-22 border-b pb-4 text-xl font-semibold tracking-tight first:mt-0;
+    @apply mt-12 lg:mt-20 mb-6 scroll-m-22 text-2xl font-semibold tracking-tight first:mt-0;
   }
   > h3 {
-    @apply mt-8 mb-6 scroll-m-22 text-lg font-semibold tracking-tight;
+    @apply mt-8 mb-6 scroll-m-22 text-xl font-semibold tracking-tight;
   }
   > h4 {
     @apply my-6 scroll-m-22 font-semibold tracking-tight;
   }
   .prose {
     @apply my-6;
-    
+
     a {
       @apply font-medium underline underline-offset-4;
     }
     code:not(pre > code) {
-      @apply relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm;
+      @apply relative rounded-md bg-muted/50 px-[0.3rem] py-[0.2rem] font-mono text-sm;
     }
     blockquote {
       @apply border-l-4 border-border pl-4;
@@ -44,6 +44,18 @@
         @apply mt-2;
       }
     }
+    dl {
+      @apply border-b pb-3 my-6;
+      dt {
+        @apply border-t pt-3 mt-3 first:mt-0;
+      }
+      dd {
+        @apply mt-2;
+      }
+      dl {
+        @apply mt-4 border-b-0 pb-0 pl-8 my-0;
+      }
+    }
     b,
     strong {
       @apply font-semibold;
@@ -67,10 +79,14 @@
   }
   .step {
     counter-increment: step;
-  }
-  .step:before {
-    @apply md:absolute w-8 h-8 md:w-9 md:h-9 bg-muted rounded-full font-mono font-medium text-center text-base inline-flex items-center justify-center -indent-px border-4 mr-2 border-background;
-    @apply md:ml-[-50px] md:mt-[-4px];
-    content: counter(step);
+
+    &:before {
+      @apply absolute w-8 h-8 md:w-9 md:h-9 bg-muted rounded-full font-mono font-semibold text-center text-sm inline-flex items-center justify-center -indent-px border-4 mr-2 border-background;
+      @apply md:ml-[-50px] md:mt-[-4px];
+      content: counter(step);
+    }
+    > h3 {
+      @apply max-md:ml-10 min-h-8 flex items-center;
+    }
   }
 }

docs/css/highlight.css

@@ -0,0 +1,151 @@
+/* 
+  Custom Highlight.js theme with CSS variables 
+  derived from github.min.css and github-dark.min.css
+*/
+
+:root {
+  /* Base */
+  --hljs-bg: #fff;
+  --hljs-color: #24292e;
+
+  /* Tokens */
+  --hljs-keyword: #d73a49;
+  --hljs-title: #6f42c1;
+  --hljs-literal: #005cc5;
+  --hljs-string: #032f62;
+  --hljs-symbol: #e36209;
+  --hljs-comment: #6a737d;
+  --hljs-tag: #22863a;
+  --hljs-section: #005cc5;
+  --hljs-bullet: #735c0f;
+
+  /* Diffs */
+  --hljs-addition-color: #22863a;
+  --hljs-addition-bg: #f0fff4;
+  --hljs-deletion-color: #b31d28;
+  --hljs-deletion-bg: #ffeef0;
+}
+
+html.dark {
+  /* Base */
+  --hljs-bg: #0d1117;
+  --hljs-color: #c9d1d9;
+
+  /* Tokens */
+  --hljs-keyword: #ff7b72;
+  --hljs-title: #d2a8ff;
+  --hljs-literal: #79c0ff;
+  --hljs-string: #a5d6ff;
+  --hljs-symbol: #ffa657;
+  --hljs-comment: #8b949e;
+  --hljs-tag: #7ee787;
+  --hljs-section: #1f6feb;
+  --hljs-bullet: #f2cc60;
+
+  /* Diffs */
+  --hljs-addition-color: #aff5b4;
+  --hljs-addition-bg: #033a16;
+  --hljs-deletion-color: #ffdcd7;
+  --hljs-deletion-bg: #67060c;
+}
+
+/* --- Base --- */
+pre code.hljs{
+    display:block;
+    overflow-x:auto;
+    padding:1em
+}
+code.hljs{
+    padding:3px 5px
+}
+
+/* --- Mapped styles --- */
+.hljs {
+  color: var(--hljs-color);
+  background: var(--hljs-bg);
+}
+
+.hljs-doctag,
+.hljs-keyword,
+.hljs-meta .hljs-keyword,
+.hljs-template-tag,
+.hljs-template-variable,
+.hljs-type,
+.hljs-variable.language_ {
+  color: var(--hljs-keyword);
+}
+
+.hljs-title,
+.hljs-title.class_,
+.hljs-title.class_.inherited__,
+.hljs-title.function_ {
+  color: var(--hljs-title);
+}
+
+.hljs-attr,
+.hljs-attribute,
+.hljs-literal,
+.hljs-meta,
+.hljs-number,
+.hljs-operator,
+.hljs-selector-attr,
+.hljs-selector-class,
+.hljs-selector-id,
+.hljs-variable {
+  color: var(--hljs-literal);
+}
+
+.hljs-meta .hljs-string,
+.hljs-regexp,
+.hljs-string {
+  color: var(--hljs-string);
+}
+
+.hljs-built_in,
+.hljs-symbol {
+  color: var(--hljs-symbol);
+}
+
+.hljs-code,
+.hljs-comment,
+.hljs-formula {
+  color: var(--hljs-comment);
+}
+
+.hljs-name,
+.hljs-quote,
+.hljs-selector-pseudo,
+.hljs-selector-tag {
+  color: var(--hljs-tag);
+}
+
+.hljs-subst {
+  color: var(--hljs-color);
+}
+
+.hljs-section {
+  color: var(--hljs-section);
+  font-weight: 700;
+}
+
+.hljs-bullet {
+  color: var(--hljs-bullet);
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}
+
+.hljs-strong {
+  font-weight: 700;
+}
+
+.hljs-addition {
+  color: var(--hljs-addition-color);
+  background-color: var(--hljs-addition-bg);
+}
+
+.hljs-deletion {
+  color: var(--hljs-deletion-color);
+  background-color: var(--hljs-deletion-bg);
+} 

docs/css/styles.css

@@ -1,14 +1,7 @@
-@import url("https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&display=swap");
-@import url("https://fonts.googleapis.com/css2?family=Geist+Mono&display=swap");
-
 @import "tailwindcss";
 @import "../../src/css/basecoat.css";
 @import "./custom.css";
-
-@theme {
-  --font-sans: 'Geist';
-  --font-mono: 'Geist Mono';
-}
+@import "./highlight.css";
 
 @import "./themes/claude.css";
 @import "./themes/doom-64.css";

docs/src/_data/site.js

@@ -1,7 +1,7 @@
 export default {
   title: "Basecoat",
   description: "A components library built with Tailwind CSS that works with any web stack.",
-  keywords: ["components", "component library", "component system", "UI", "UI kit", "shadcn", "shadcn/ui", "Tailwind CSS", "Tailwind", "CSS", "HTML", "Jinja", "Nunjucks", "Alpine.js"],
+  keywords: ["components", "component library", "component system", "UI", "UI kit", "shadcn", "shadcn/ui", "Tailwind CSS", "Tailwind", "CSS", "HTML", "Jinja", "Nunjucks", "JS", "JavaScript", "vanilla JS", "vanilla JavaScript"],
   author: {
     name: "Ronan Berder",
     x: "@hunvreus"

docs/src/_includes/layouts/base.njk

@@ -1,62 +1,56 @@
 <!DOCTYPE html>
 <html>
 <head>
-  <!-- Theme -->
+  {# Dark mode #}
   <script>
-  function isDark() {
-    return localStorage.getItem('darkMode') === 'dark' || (!localStorage.getItem('darkMode') && window.matchMedia('(prefers-color-scheme: dark)').matches);
-  }
+    (() => {
+      try {
+        const stored = localStorage.getItem('themeMode');
+        if (stored ? stored === 'dark'
+                   : matchMedia('(prefers-color-scheme: dark)').matches) {
+          document.documentElement.classList.add('dark');
+        }
+      } catch (_) {}
 
-  if (isDark()) {
-    document.documentElement.classList.add('dark');
-  }
+      const apply = dark => {
+        document.documentElement.classList.toggle('dark', dark);
+        try { localStorage.setItem('themeMode', dark ? 'dark' : 'light'); } catch (_) {}
+      };
 
-  if (localStorage.getItem('themeVariant')) {
-    document.documentElement.classList.add(`theme-${localStorage.getItem('themeVariant')}`);
-  }
-
-  document.addEventListener('alpine:init', () => {
-    Alpine.store('darkMode', {
-      isDark: isDark(),
-      toggle() {
-        this.isDark = document.documentElement.classList.toggle('dark');
-        localStorage.setItem('darkMode', this.isDark ? 'dark' : 'light');
-      }
-    });
-
-    Alpine.store('themeVariant', {
-      name: localStorage.getItem('themeVariant'),
-      setThemeVariant(name) {
-        this.name = name;
-        localStorage.setItem('themeVariant', name);
-        document.documentElement.classList.forEach(className => {
-          if (className.startsWith('theme-')) {
-            document.documentElement.classList.remove(className);
-          }
-        });
-        document.documentElement.classList.add(`theme-${name}`);
-      }
-    });
-  });
+      document.addEventListener('basecoat:theme', (event) => {
+        const mode = event.detail?.mode;
+        apply(mode === 'dark' ? true
+             : mode === 'light' ? false
+             : !document.documentElement.classList.contains('dark'));
+      });
+    })();
   </script>
-
+  {# Theme variant #}
+  <script>
+    (function() {
+      try {
+        const storedTheme = localStorage.getItem('themeVariant');
+        if (storedTheme) document.documentElement.classList.add(`theme-${storedTheme}`);
+      } catch (event) {
+        console.error('Could not apply theme variant from localStorage', event);
+      }
+    })();
+  </script>
+  {# Meta #}
   <meta charset="utf-8">
   <meta http-equiv="Content-Language" content="en">
   <meta name="viewport" content="width=device-width, initial-scale=1">
-
-  <!-- Title & Description -->
+  {# Title & Description #}
   {% set meta_title = title ~ ' | ' ~ site.title  if title else site.title %}
   {% set meta_description = description or site.description %}
   <title>{{ meta_title }}</title>
   <meta name="description" content="{{ meta_description }}"/>
   <meta name="title" content="{{ meta_title }}">
   {% if site.keywords %}<meta name="keywords" content="{{ site.keywords | join(',') }}" />{% endif %}
-
-  <!-- Favicon -->
+  {# Favicon #}
   <link rel="icon" type="image/svg+xml" href="/assets/favicon.svg">
   <link rel="apple-touch-icon" sizes="180x180" href="/assets/apple-touch-icon.png">
-
-   <!-- Open Graph / Facebook -->
+  {# Open Graph / Facebook #}
   <meta property="og:type" content="website">
   <meta property="og:url" content="{{ site.url }}{{ page.url }}">
   <meta property="og:title" content="{{ meta_title }}">
@@ -65,52 +59,48 @@
   <meta property="og:site_name" content="{{ site.title }}">
   <meta property="og:locale" content="en_US">
   <meta property="og:author" content="{{ site.author.name }}">
-
-  <!-- X/Twitter -->
+  {# X/Twitter #}
   <meta name="twitter:card" content="summary_large_image">
   <meta name="twitter:url" content="{{ site.url }}{{ page.url }}">
   <meta name="twitter:title" content="{{ title if title else site.title }}">
   <meta name="twitter:description" content="{{ meta_description }}">
   <meta name="twitter:image" content="{{ site.url }}/assets/social-screenshot.png">
   <meta name="twitter:creator" content="{{ site.author.x }}">
-
-  <!-- CSS -->
+  {# CSS #}
   <link rel="stylesheet" href="/assets/styles.css">
-
-  <!-- JS -->
-  <script src="/assets/js/dialog.js" defer></script>
+  {# JS #}
+  <script src="/assets/js/basecoat.js" defer></script>
+  <script src="/assets/js/command.js" defer></script>
   <script src="/assets/js/dropdown-menu.js" defer></script>
   <script src="/assets/js/popover.js" defer></script>
   <script src="/assets/js/select.js" defer></script>
   <script src="/assets/js/sidebar.js" defer></script>
   <script src="/assets/js/tabs.js" defer></script>
   <script src="/assets/js/toast.js" defer></script>
-  <script>
-    document.addEventListener('alpine:init', () => {
-      window.basecoat.registerDialog(Alpine);
-      window.basecoat.registerDropdownMenu(Alpine);
-      window.basecoat.registerPopover(Alpine);
-      window.basecoat.registerSelect(Alpine);
-      window.basecoat.registerSidebar(Alpine);
-      window.basecoat.registerTabs(Alpine);
-      window.basecoat.registerToast(Alpine);
-    });
-  </script>
-  <script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
+  {# HTMX #}
   <script src="https://unpkg.com/htmx.org@2.0.4"></script>
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css">
+  {# Highlight.js #}
   <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/django.min.js"></script>
   <script>
-    const applyHighlighting = () => { if (window.hljs) hljs.highlightAll(); };
+    const highlight = () => {
+      if (!window.hljs) return;
+      document
+        .querySelectorAll('pre code:not([data-highlighted]), code.highlight:not([data-highlighted])')
+        .forEach(el => hljs.highlightElement(el));
+    };
 
-    if (!window._hljsInitialized) {
-      window._hljsInitialized = true;
-      document.addEventListener('DOMContentLoaded', applyHighlighting);
-      document.addEventListener('htmx:afterSwap', applyHighlighting);
+    if (!window._hljsInit) {
+      window._hljsInit = true;
+      document.addEventListener('DOMContentLoaded', highlight);
+      document.addEventListener('htmx:afterSwap', highlight);
     }
   </script>
-  
+  <script>
+    document.addEventListener('htmx:historyRestore', () => {
+      if (window.basecoat) window.basecoat.initAll();
+    });
+  </script>
   {% if head %}{{ head | safe }}{% endif %}
 </head>
 <body>

docs/src/_includes/layouts/page.njk

@@ -3,10 +3,10 @@ layout: layouts/layout.njk
 ---
 
 <main class="mx-auto relative flex w-full max-w-screen-lg gap-10">
-  <div class="mx-auto w-full max-w-screen-md">
+  <div class="mx-auto w-full flex-1 max-w-screen-md">
     <header class="space-y-2">
-      <h1 class="text-3xl font-bold tracking-tight">{{ title }}</h1>
-      <p class="text-muted-foreground">{{ description }}</p>
+      <h1 class="text-2xl font-semibold tracking-tight sm:text-3xl xl:text-4xl">{{ title }}</h1>
+      <p class="text-muted-foreground text-[1.05rem] sm:text-base">{{ description }}</p>
     </header>
     <article class="pb-12 mt-8 content">
       {{ content | safe }}

docs/src/_includes/macros/code_block.njk

@@ -1,28 +1,23 @@
 {% macro code_block(code, language="html", class="my-4") %}
-<div 
-  class="relative {{ class }}"
-  x-data="{ 
-    copied: false, 
-    copy() { 
-      const codeElement = $refs.code;
-      if (!codeElement) return;
-      navigator.clipboard.writeText(codeElement.textContent || '').then(() => {
-        this.copied = true;
-        setTimeout(() => { this.copied = false }, 2000);
+<div class="relative {{ class }}">
+  <pre class="grid text-sm max-h-[650px] overflow-y-auto rounded-xl scrollbar"><code class="language-{{ language }} !bg-muted/40 !p-3.5">{{- code | escape -}}</code></pre>
+  
+  <button 
+    onclick="
+      const button = this;
+      const code = this.parentElement.querySelector('pre code');
+      if (!code) return;
+      navigator.clipboard.writeText(code.textContent || '').then(() => {
+        button.classList.add('copied');
+        setTimeout(() => { button.classList.remove('copied') }, 2000);
       }).catch(err => {
         console.error('Failed to copy text: ', err);
       });
-    } 
-  }"
->
-  <pre x-ref="code" class="text-sm max-h-[650px] overflow-y-auto rounded-xl scrollbar"><code class="language-{{ language }} !bg-neutral-900 p-0">{{- code | escape -}}</code></pre>
-  
-  <button 
-    @click="copy()" 
-    class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 z-10 h-6 w-6 text-zinc-50 hover:bg-zinc-700 hover:text-zinc-50 [&_svg]:h-3 [&_svg]:w-3 absolute right-3 top-3"
+    "
+    class="btn-icon-ghost size-8 absolute right-2.5 top-2 text-muted-foreground hover:text-foreground group"
   >
-    {% lucide "clipboard", { "class": "size-4", "x-show": "!copied" } %}
-    {% lucide "check", { "class": "size-4", "x-show": "copied" } %}
+    {% lucide "copy", {"class": "group-[.copied]:hidden" } %}
+    {% lucide "check", {"class": "hidden group-[.copied]:block" } %}
   </button>
 </div>
 {% endmacro %}

docs/src/_includes/macros/code_preview.njk

@@ -19,10 +19,8 @@
   ] %}
   
   {{ tabs(
-    id="code-block-{{ id }}",
     tabsets=tabsets,
-    default_tab_index=(2 if default_code else 1),
-    register_on=["alpine:init", "htmx:afterSwap"]
+    default_tab_index=(2 if default_code else 1)
   ) }}
 </div>
 {% endmacro %}

docs/src/_includes/partials/header.njk

@@ -1,43 +1,54 @@
 <div class="flex h-14 w-full items-center gap-2 px-4">
   <button
     type="button"
-    aria-label="Hide sidebar"
-    data-tooltip="Hide sidebar"
-    :data-tooltip="sidebarOpen ? 'Hide sidebar' : 'Show sidebar'"
+    onclick="document.dispatchEvent(new CustomEvent('basecoat:sidebar'))"
+    aria-label="Toggle sidebar"
+    data-tooltip="Toggle sidebar"
     data-side="bottom"
     data-align="start"
     class="btn-sm-icon-ghost mr-auto size-7 -ml-1.5"
-    x-init
-    x-data="{ sidebarOpen: true }"
-    @click="
-      sidebarOpen = !sidebarOpen;
-      $dispatch('sidebar:toggle');
-    "
   >
     {% lucide "panel-left" %}
   </button>
   <select
     class="select h-8 leading-none"
-    x-init
-    @change="$store.themeVariant.setThemeVariant($event.target.value)"
-    :value="$store.themeVariant.name"
+    id="theme-select"
   >
     <option value="">Default</option>
     <option value="claude">Claude</option>
     <option value="doom-64">Doom 64</option>
     <option value="supabase">Supabase</option>
   </select>
+  <script>
+    (() => {
+      const themeSelect = document.getElementById('theme-select');
+      const storedTheme = localStorage.getItem('themeVariant');
+      if (themeSelect && storedTheme) themeSelect.value = storedTheme;
+      themeSelect.addEventListener('change', () => {
+        const newTheme = themeSelect.value;
+        document.documentElement.classList.forEach(c => {
+          if (c.startsWith('theme-')) document.documentElement.classList.remove(c);
+        });
+        if (newTheme) {
+          document.documentElement.classList.add(`theme-${newTheme}`);
+          localStorage.setItem('themeVariant', newTheme);
+        } else {
+          localStorage.removeItem('themeVariant');
+        }
+      });
+    })();
+  </script>
+
   <button
     type="button"
-    :aria-label="$store.darkMode.isDark ? 'Switch to light mode' : 'Switch to dark mode'"
-    :data-tooltip="$store.darkMode.isDark ? 'Light mode' : 'Dark mode'"
+    aria-label="Toggle dark mode"
+    data-tooltip="Toggle dark mode"
     data-side="bottom"
+    onclick="document.dispatchEvent(new CustomEvent('basecoat:theme'))"
     class="btn-icon-outline size-8"
-    x-init
-    @click="$store.darkMode.toggle()"
   >
-    <span x-show="$store.darkMode.isDark">{% lucide "sun" %}</span>
-    <span x-show="!$store.darkMode.isDark">{% lucide "moon" %}</span>
+    <span class="hidden dark:block">{% lucide "sun" %}</span>
+    <span class="block dark:hidden">{% lucide "moon" %}</span>
   </button>
   <a
     href="https://github.com/hunvreus/basecoat"

docs/src/_includes/partials/kitchen-sink/accordion.njk

@@ -7,20 +7,7 @@
   </header>
   <div class="p-4">
     <div class="group grid w-full max-w-xl gap-4">
-      <section
-        x-init
-        @click="
-          const clickedSummary = $event.target.closest('summary');
-          if (!clickedSummary) return;
-          const clickedDetails = clickedSummary.closest('details');
-          if (!clickedDetails) return;
-          $el.querySelectorAll('details').forEach(detailsEl => {
-            if (detailsEl !== clickedDetails) {
-              detailsEl.removeAttribute('open');
-            }
-          });
-        "
-      >
+      <section class="accordion">
         <details class="group border-b last:border-b-0">
           <summary class="w-full focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] transition-all outline-none rounded-md">
             <h2 class="flex flex-1 items-start justify-between gap-4 py-4 text-left text-sm font-medium hover:underline ">
@@ -55,20 +42,7 @@
           </section>
         </details>
       </section>
-      <section
-        x-init
-        @click="
-          const clickedSummary = $event.target.closest('summary');
-          if (!clickedSummary) return;
-          const clickedDetails = clickedSummary.closest('details');
-          if (!clickedDetails) return;
-          $el.querySelectorAll('details').forEach(detailsEl => {
-            if (detailsEl !== clickedDetails) {
-              detailsEl.removeAttribute('open');
-            }
-          });
-        "
-      >
+      <section class="accordion">
         <details class="group border-b last:border-b-0">
           <summary class="w-full focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] transition-all outline-none rounded-md">
             <h2 class="flex flex-1 items-start justify-between gap-4 py-4 text-left text-sm font-medium hover:underline ">
@@ -92,6 +66,24 @@
           </section>
         </details>
       </section>
+      <script>
+        (() => {
+          const accordions = document.querySelectorAll('.accordion');
+          accordions.forEach(accordion => {
+            accordion.addEventListener('click', (event) => {
+              const summary = event.target.closest('summary');
+              if (!summary) return;
+              const details = summary.closest('details');
+              if (!details) return;
+              accordion.querySelectorAll('details').forEach(detailsEl => {
+                if (detailsEl !== details) {
+                  detailsEl.removeAttribute('open');
+                }
+              });
+            });
+          });
+        })();
+      </script>
     </div>
   </div>
 </section>

docs/src/_includes/partials/kitchen-sink/alert-dialog.njk

@@ -8,21 +8,19 @@
     </a>
   </header>
   <div class="p-4">
-    <div class="flex flex-col gap-4">
-      {% set footer %}
-        <button class="btn-outline" @click="open = false">Cancel</button>
-        <button class="btn-primary" @click="open = false">Continue</button>
-      {% endset %}
-      {{ dialog(
-        id="alert-dialog-demo",
-        title="Are you absolutely sure?",
-        description="This action cannot be undone. This will permanently delete your account and remove your data from our servers.",
-        trigger="Open dialog",
-        trigger_attrs={"class": "btn-outline"},
-        footer=footer,
-        close_button=false,
-        close_on_overlay_click=false
-      ) }}
-    </div>
+    {% set footer %}
+      <button class="btn-outline" onclick="document.getElementById('alert-dialog-demo').close()">Cancel</button>
+      <button class="btn-primary" onclick="document.getElementById('alert-dialog-demo').close()">Continue</button>
+    {% endset %}
+    {{ dialog(
+      id="alert-dialog-demo",
+      title="Are you absolutely sure?",
+      description="This action cannot be undone. This will permanently delete your account and remove your data from our servers.",
+      trigger="Open dialog",
+      trigger_attrs={"class": "btn-outline"},
+      footer=footer,
+      close_button=false,
+      close_on_overlay_click=false
+    ) }}
   </div>
 </section>

docs/src/_includes/partials/kitchen-sink/alert.njk

@@ -15,7 +15,7 @@
 
       <div class="alert">
         {% lucide "bookmark-check" %}
-        <section>This is an alert with icon, title and description.</section>
+        <section>This is an alert with icon, description and no title.</section>
       </div>
 
       <div class="alert">

docs/src/_includes/partials/kitchen-sink/breadcrumb.njk

@@ -1,4 +1,4 @@
-{% from "popover.njk" import popover %}
+{% from "dropdown-menu.njk" import dropdown_menu %}
 
 <section id="breadcrumb"  class="w-full rounded-lg border scroll-mt-14">
   <header class="border-b px-4 py-3 flex items-center justify-between">
@@ -17,17 +17,17 @@
         {% set trigger %}
           {% lucide "ellipsis" %}
         {% endset %}
-        {% call popover(
+        {{ dropdown_menu(
           id="demo-breadcrumb-menu",
           trigger=trigger,
-          trigger_attrs={"class": "flex size-9 items-center justify-center h-4 w-4 hover:text-foreground cursor-pointer"}
-        ) %}
-          <nav role="menu">
-            <button type="button" role="menuitem">Documentation</button>
-            <button type="button" role="menuitem">Themes</button>
-            <button type="button" role="menuitem">GitHub</button>
-          </nav>
-        {% endcall %}
+          trigger_attrs={"class": "flex size-9 items-center justify-center h-4 w-4 hover:text-foreground cursor-pointer"},
+          popover_attrs={"class": "p-1"},
+          items=[
+            { label: "Documentation" },
+            { label: "Themes" },
+            { label: "GitHub" }
+          ]
+        ) }}
       </li>
       <li>{% lucide "chevron-right", { "class": "size-3.5" } %}</li>
       <li class="inline-flex items-center gap-1.5">

docs/src/_includes/partials/kitchen-sink/combobox.njk

@@ -11,7 +11,7 @@
     <div class="flex flex-wrap items-start gap-4">
       {% set options_frameworks = ["Next.js", "SvelteKit", "Nuxt.js", "Remix", "Astro"] %}
       {% call select(
-        content_attrs={"class": "w-48"},
+        popover_attrs={"class": "w-48"},
         listbox_attrs={"data-empty": "No framework found."},
         is_combobox=true
       ) %}
@@ -56,7 +56,7 @@
         }
       ] %}
       {% call select(
-        content_attrs={"class": "w-72"},
+        popover_attrs={"class": "w-72"},
         listbox_attrs={"data-empty": "No timezone found."},
         is_combobox=true
       ) %}

docs/src/_includes/partials/kitchen-sink/dialog.njk

@@ -10,17 +10,16 @@
   <div class="p-4">
     <div class="flex flex-wrap items-center gap-4">
       {% set footer %}
-        <button class="btn-outline" @click="open = false">Cancel</button>
-        <button class="btn" @click="open = false">Save changes</button>
+        <button class="btn-outline" onclick="document.getElementById('demo-dialog-edit-profile').close()">Cancel</button>
+        <button class="btn" onclick="document.getElementById('demo-dialog-edit-profile').close()">Save changes</button>
       {% endset %}
       {% call dialog(
         id="demo-dialog-edit-profile",
         title="Edit profile",
         description="Make changes to your profile here. Click save when you're done.",
-        main_attrs={"x-ref": "myDialog"},
         trigger="Edit Profile",
         trigger_attrs={"class": "btn-outline"},
-        content_attrs={"class": "w-full sm:max-w-[425px] max-h-[612px]"},
+        dialog_attrs={"class": "w-full sm:max-w-[425px] max-h-[612px]"},
         footer=footer
       ) %}
       <form class="form grid gap-4">
@@ -36,17 +35,16 @@
       {% endcall %}
       
       {% set footer %}
-        <button class="btn-outline" @click="open = false">Close</button>
+        <button class="btn-outline" onclick="this.closest('dialog').close()">Close</button>
       {% endset %}
       {% call dialog(
         id="dialog-example",
         title="Scrollable Content",
         description="This is a dialog with scrollable content.",
-        main_attrs={"x-ref": "myDialog"},
         trigger="Scrollable Content",
         trigger_attrs={"class": "btn-outline"},
-        content_attrs={"class": "w-full sm:max-w-[425px] max-h-[612px]"},
-        content_body_attrs={"class": "overflow-y-auto scrollbar"},
+        dialog_attrs={"class": "w-full sm:max-w-[425px] max-h-[612px]"},
+        body_attrs={"class": "overflow-y-auto scrollbar"},
         footer=footer
       ) %}
       <div class="space-y-4 text-sm">
@@ -62,15 +60,6 @@
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
       </div>
       {% endcall %}
-
-      <button
-        x-init
-        @click="$dispatch('dialog:open', { id: 'dialog-example' })"
-        type="button"
-        class="btn-outline"
-      >
-        Trigger dialog:open
-      </button>
     </div>
   </div>
 </section>

docs/src/_includes/partials/kitchen-sink/dropdown-menu.njk

@@ -10,77 +10,72 @@
   <div class="p-4">
     <div class="flex flex-wrap items-start gap-4">
       {% call dropdown_menu(
-        id="dropdown-menu",
+        id="dropdown-menu-default",
         trigger="Open",
         trigger_attrs={"class": "btn-outline"},
-        content_attrs={"class": "min-w-56"}
+        popover_attrs={"class": "min-w-56"}
       ) %}
         <div role="group" aria-labelledby="account-options">
-          <span id="account-options" role="heading">My Account</span>
-          <button type="button" role="menuitem">
+          <div role="heading" id="account-options">My Account</div>
+          <div role="menuitem">
             Profile
             <span class="text-muted-foreground ml-auto text-xs tracking-widest">⇧⌘P</span>
-          </button>
-          <button type="button" role="menuitem">
+          </div>
+          <div role="menuitem">
             Billing
             <span class="text-muted-foreground ml-auto text-xs tracking-widest">⌘B</span>
-          </button>
-          <button type="button" role="menuitem">
+          </div>
+          <div role="menuitem">
             Settings
             <span class="text-muted-foreground ml-auto text-xs tracking-widest">⌘S</span>
-          </button>
-          <button type="button" role="menuitem">
+          </div>
+          <div role="menuitem">
             Keyboard shortcuts
             <span class="text-muted-foreground ml-auto text-xs tracking-widest">⌘K</span>
-          </button>
+          </div>
         </div>
         <hr role="separator">
-        <button type="button" role="menuitem">GitHub</button>
-        <button type="button" role="menuitem">Support</button>
-        <button type="button" role="menuitem" disabled>API</button>
+        <div role="menuitem">GitHub</div>
+        <div role="menuitem">Support</div>
+        <div role="menuitem" aria-disabled="true">API</div>
         <hr role="separator">
-        <button type="button" role="menuitem">
+        <div role="menuitem">
           Logout
           <span class="text-muted-foreground ml-auto text-xs tracking-widest">⇧⌘P</span>
-        </button>
+        </div>
       {% endcall %}
 
       {% call dropdown_menu(
         id="dropdown-menu-checkboxes",
         trigger="Checkboxes",
         trigger_attrs={"class": "btn-outline"},
-        content_attrs={"class": "min-w-56"},
-        register_on=["alpine:init", "htmx:afterSwap"]
+        popover_attrs={"class": "min-w-56"}
       ) %}
       <div role="group" aria-labelledby="account-options">
-        <span id="account-options" role="heading">Account Options</span>
-        <button type="button" role="menuitem">
+        <div role="heading" id="account-options">Account Options</div>
+        <div role="menuitem">
           {% lucide "user" %}
           Profile
           <span class="text-muted-foreground ml-auto text-xs tracking-widest">⇧⌘P</span>
-        </button>
-        <button type="button" role="menuitem">
+        </div>
+        <div role="menuitem">
           {% lucide "credit-card" %}
           Billing
           <span class="text-muted-foreground ml-auto text-xs tracking-widest">⌘B</span>
-        </button>
-        <button type="button" role="menuitem">
+        </div>
+        <div role="menuitem">
           {% lucide "settings" %}
           Settings
           <span class="text-muted-foreground ml-auto text-xs tracking-widest">⌘S</span>
-        </button>
+        </div>
       </div>
       <hr role="separator">
       <div role="group" aria-labelledby="appearance-options">
-        <span id="appearance-options" role="heading">Appearance</span>
-        <button
-          type="button"
+        <div role="heading" id="appearance-options">Appearance</div>
+        <div
           role="menuitemcheckbox"
           aria-checked="true"
           class="group"
-          x-data="{ checked: true }"
-          @click="checked = !checked"
-          :aria-checked="checked"
         >
           {% lucide "check", {
             "class": "invisible group-aria-checked:visible",
@@ -89,16 +84,12 @@
           } %}
           Status Bar
           <span class="text-muted-foreground ml-auto text-xs tracking-widest">⇧⌘P</span>
-        </button>
-        <button
-          type="button"
+        </div>
+        <div
           role="menuitemcheckbox"
           aria-checked="false"
           class="group"
-          disabled
-          x-data="{ checked: false }"
-          @click="checked = !checked"
-          :aria-checked="checked"
+          aria-disabled="true"
         >
           {% lucide "check", {
             "class": "invisible group-aria-checked:visible",
@@ -107,15 +98,11 @@
           } %}
           Activity Bar
           <span class="text-muted-foreground ml-auto text-xs tracking-widest">⌘B</span>
-        </button>
-        <button
-          type="button"
+        </div>
+        <div
           role="menuitemcheckbox"
           aria-checked="false"
           class="group"
-          x-data="{ checked: false }"
-          @click="checked = !checked"
-          :aria-checked="checked"
         >
           {% lucide "check", {
             "class": "invisible group-aria-checked:visible",
@@ -124,17 +111,28 @@
           } %}
           Panel
           <span class="text-muted-foreground ml-auto text-xs tracking-widest">⌘S</span>
-        </button>
+        </div>
       </div>
       <hr role="separator">
-      <button type="button" role="menuitem">
+      <div role="menuitem">
         {% lucide "log-out" %}
         Logout
         <span class="text-muted-foreground ml-auto text-xs tracking-widest">⇧⌘P</span>
-      </button>
+      </div>
       {% endcall %}
 
-
+      <script>
+        (() => {
+          const dropdownMenu = document.querySelector('#dropdown-menu-checkboxes');
+          const checkboxes = dropdownMenu.querySelectorAll('div[role="menuitemcheckbox"]');
+          checkboxes.forEach(checkbox => {
+            checkbox.addEventListener('click', () => {
+              const isChecked = checkbox.getAttribute('aria-checked') === 'true';
+              checkbox.setAttribute('aria-checked', !isChecked);
+            });
+          });
+        })();
+      </script>
 
       {% set profile_menu %}
         <div class="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
@@ -145,47 +143,43 @@
           </div>
         </div>
         <hr role="separator">
-        <button type="button" role="menuitem">
+        <div role="menuitem">
           {% lucide "star" %}
           Upgrade to Pro
-        </button>
+        </div>
         <hr role="separator">
-        <button type="button" role="menuitem">
+        <div role="menuitem">
           {% lucide "user" %}
           Account
-        </button>
-        <button type="button" role="menuitem">
+        </div>
+        <div role="menuitem">
           {% lucide "credit-card" %}
           Billing
-        </button>
-        <button type="button" role="menuitem">
+        </div>
+        <div role="menuitem">
           {% lucide "bell" %}
           Notifications
-        </button>
+        </div>
         <hr role="separator">
-        <button type="button" role="menuitem">
+        <div role="menuitem">
           {% lucide "log-out" %}
           Signout
-        </button>
+        </div>
       {% endset %}
 
       {% call dropdown_menu(
         id="dropdown-menu-radio-group",
         trigger="Radio Group",
         trigger_attrs={"class": "btn-outline"},
-        content_attrs={"class": "min-w-56"},
-        register_on=["alpine:init", "htmx:afterSwap"]
+        popover_attrs={"class": "min-w-56"}
       ) %}
-      <div role="group" aria-labelledby="position-options" x-data="{ checked: 'bottom' }">
+      <div role="group" aria-labelledby="position-options">
         <span id="position-options" role="heading">Panel Position</span>
         <hr role="separator">
-        <button
-          type="button"
+        <div
           role="menuitemradio"
           aria-checked="false"
           class="group"
-          @click="checked = 'top'"
-          :aria-checked="checked == 'top'"
         >
           <div class="size-4 flex items-center justify-center">
             <div
@@ -196,14 +190,11 @@
           </div>
           Status Bar
           <span class="text-muted-foreground ml-auto text-xs tracking-widest">⇧⌘P</span>
-        </button>
-        <button
-          type="button"
+        </div>
+        <div
           role="menuitemradio"
-          aria-checked="false"
+          aria-checked="true"
           class="group"
-          @click="checked = 'bottom'"
-          :aria-checked="checked == 'bottom'"
         >
           <div class="size-4 flex items-center justify-center">
             <div
@@ -214,14 +205,11 @@
           </div>
           Activity Bar
           <span class="text-muted-foreground ml-auto text-xs tracking-widest">⌘B</span>
-        </button>
-        <button
-          type="button"
+        </div>
+        <div
           role="menuitemradio"
           aria-checked="false"
           class="group"
-          @click="checked = 'right'"
-          :aria-checked="checked == 'right'"
         >
           <div class="size-4 flex items-center justify-center">
             <div
@@ -232,9 +220,23 @@
           </div>
           Panel
           <span class="text-muted-foreground ml-auto text-xs tracking-widest">⌘S</span>
-        </button>
+        </div>
       </div>
       {% endcall %}
+      <script>
+        (() => {
+          const dropdownMenu = document.querySelector('#dropdown-menu-radio-group');
+          const radioButtons = dropdownMenu.querySelectorAll('div[role="menuitemradio"]');
+          radioButtons.forEach(radioButton => {
+            radioButton.addEventListener('click', () => {
+              radioButtons.forEach(radioButton => {
+                radioButton.setAttribute('aria-checked', 'false');
+              });
+              radioButton.setAttribute('aria-checked', 'true');
+            });
+          });
+        })();
+      </script>
 
       {% set trigger %}
         <img alt="@hunvreus" src="https://github.com/hunvreus.png" class="size-8 shrink-0 rounded-full" alt="Ronan Berder"/>
@@ -259,7 +261,7 @@
         id="dropdown-checkboxes",
         trigger=trigger,
         trigger_attrs={"class": "btn-icon-ghost rounded-full size-8"},
-        content_attrs={"data-align": "end"}
+        popover_attrs={"data-align": "end"}
       ) %}
         {{ profile_menu | safe }}
       {% endcall %}
@@ -271,21 +273,21 @@
         id="dropdown-checkboxes",
         trigger=trigger,
         trigger_attrs={"class": "btn-icon-ghost"},
-        content_attrs={"class": "min-w-32"}
+        popover_attrs={"class": "min-w-32"}
       ) %}
-        <button type="button" role="menuitem">
+        <div role="menuitem">
           {% lucide "pencil" %}
           Edit
-        </button>
-        <button type="button" role="menuitem">
+        </div>
+        <div role="menuitem">
           {% lucide "share" %}
           Share
-        </button>
+        </div>
         <hr role="separator">
-        <button type="button" role="menuitem" class="text-destructive hover:bg-destructive/10 dark:hover:bg-destructive/20 focus:bg-destructive/10 dark:focus:bg-destructive/20 focus:text-destructive [&_svg]:!text-destructive">
+        <div role="menuitem" class="text-destructive hover:bg-destructive/10 dark:hover:bg-destructive/20 focus:bg-destructive/10 dark:focus:bg-destructive/20 focus:text-destructive [&_svg]:!text-destructive">
           {% lucide "trash-2" %}
           Delete
-        </button>
+        </div>
       {% endcall %}
     </div>
   </div>

docs/src/_includes/partials/kitchen-sink/popover.njk

@@ -12,7 +12,7 @@
       id="demo-popover",
       trigger="Open popover",
       trigger_attrs={"class": "btn-outline"},
-      content_attrs={"class": "w-80 p-4"}
+      popover_attrs={"class": "w-80"}
     ) %}
       <div class="grid gap-4">
         <header class="grid gap-1.5">

docs/src/_includes/partials/kitchen-sink/select.njk

@@ -8,7 +8,6 @@
     </a>
   </header>
   <div class="p-4 gap">
-
     <div class="flex flex-col gap-4">
       <div class="flex flex-wrap items-center gap-2 md:flex-row">
         <select class="select w-[180px]">
@@ -28,46 +27,70 @@
 
       <div class="flex flex-wrap items-center gap-4">
         <div class="flex flex-wrap items-center gap-2 md:flex-row">
-          {% call select(trigger_attrs={"class": "w-[180px]"}) %}
-          <div role="group" aria-labelledby="fruit-options-label">
-            <span id="fruit-options-label" role="heading">Fruits</span>
-            <div role="option" data-value="apple">Apple</div>
-            <div role="option" data-value="banana">Banana</div>
-            <div role="option" data-value="blueberry">Blueberry</div>
-          </div>
-          <div role="group" aria-labelledby="vegetable-options-label">
-            <span id="vegetable-options-label" role="heading">Grapes</span>
-            <div role="option" data-value="pineapple">Pineapple</div>
-          </div>
-          {% endcall %}
-
+          {{ select(
+            id="select-default",
+            trigger_attrs={"class": "w-[180px]"},
+            selected="blueberry",
+            items=[
+              {
+                type: "group",
+                label: "Fruits",
+                items: [
+                  { type: "item", label: "Apple", value: "apple" },
+                  { type: "item", label: "Banana", value: "banana" },
+                  { type: "item", label: "Blueberry", value: "blueberry" }
+                ]
+              },
+              {
+                type: "group",
+                label: "Grapes",
+                items: [
+                  { type: "item", label: "Pineapple", value: "pineapple" }
+                ]
+              }
+            ]
+          ) }}
           {% call select(
+            id="select-scrollbar",
             trigger_attrs={"class": "w-[180px]"},
             listbox_attrs={"class": "scrollbar overflow-y-auto max-h-64"}
           ) %}
-          {% for i in range(0, 99) %}
-          <div role="option" data-value="item-{{ i }}">Item {{ i }}</div>
-          {% endfor %}
+            {% for i in range(0, 99) %}
+              <div role="option" data-value="item-{{ i }}">Item {{ i }}</div>
+            {% endfor %}
           {% endcall %}
 
-          {% call select(trigger_attrs={"disabled": "disabled", "class": "w-[180px]"}) %}
+          {% call select(
+            id="select-disabled",
+            trigger_attrs={"disabled": "disabled", "class": "w-[180px]"}
+          ) %}
           <div role="option" data-value="disabled">Disabled</div>
           {% endcall %}
 
 
-          {% call select(name="just-testing", trigger_attrs={'class': 'w-[180px]'}) %}
-          <div type="button" role="option" data-value="bar">
-            {% lucide "chart-bar", {"class": "text-muted-foreground"} %}
-            Bar
-          </div>
-          <div type="button" role="option" data-value="line">
-            {% lucide "chart-line", {"class": "text-muted-foreground"} %}
-            Line
-          </div>
-          <div type="button" role="option" data-value="pie">
-            {% lucide "chart-pie", {"class": "text-muted-foreground"} %}
-            Pie
-          </div>
+          {% call select(
+            id="select-with-icon",
+            name="chart-type",
+            trigger_attrs={'class': 'w-[180px]'}
+          ) %}
+            <div type="button" role="option" data-value="bar">
+              <span class="flex items-center gap-2">
+                {% lucide "chart-bar", {"class": "text-muted-foreground"} %}
+                Bar
+              </span>
+            </div>
+            <div type="button" role="option" data-value="line">
+              <span class="flex items-center gap-2">
+                {% lucide "chart-line", {"class": "text-muted-foreground"} %}
+                Line
+              </span>
+            </div>
+            <div type="button" role="option" data-value="pie">
+              <span class="flex items-center gap-2">
+                {% lucide "chart-pie", {"class": "text-muted-foreground"} %}
+                Pie
+              </span>
+            </div>
           {% endcall %}
         </div>
       </div>

docs/src/_includes/partials/kitchen-sink/slider.njk

@@ -13,18 +13,26 @@
         min="0"
         max="27"
         value="12"
-      x-data="{
-        updatePercent(el) {
-          const min = parseFloat(el.min || 0);
-          const max = parseFloat(el.max || 100);
-          const value = parseFloat(el.value);
-          const percent = (max === min) ? 0 : ((value - min) / (max - min)) * 100;
-          el.style.setProperty('--slider-value', `${percent}%`);
-        }
-      }"
-        x-init="updatePercent($el)"
-        @input="updatePercent($el)"
       >
     </div>
   </div>
-</section>
+</section>
+<script>
+  (() => {
+    const sliders = document.querySelectorAll('input[type="range"].input');
+    if (!sliders) return;
+
+    const updateSlider = (el) => {
+      const min = parseFloat(el.min || 0);
+      const max = parseFloat(el.max || 100);
+      const value = parseFloat(el.value);
+      const percent = (max === min) ? 0 : ((value - min) / (max - min)) * 100;
+      el.style.setProperty('--slider-value', `${percent}%`);
+    };
+
+    sliders.forEach(slider => {
+      updateSlider(slider);
+      slider.addEventListener('input', (event) => updateSlider(event.target));
+    });
+  })();
+</script>

docs/src/_includes/partials/sidebar.njk

@@ -12,21 +12,16 @@
 {% endset %}
 {% call popover(
   trigger=trigger,
-  trigger_attrs={"class": "btn-ghost p-2 h-12 w-full flex items-center justify-start"},
-  content_attrs={
-    "data-side": "right",
-    "data-align": "end",
-    "class": "w-80",
-    "x-init": "
-      if (window.innerWidth < 768) {
-        $el.setAttribute('data-side', 'top');
-        $el.setAttribute('data-align', 'start');
-        $el.classList.add('w-full');
-      }
-    "
+  trigger_attrs={
+    "class": "btn-ghost p-2 h-12 w-full flex items-center justify-start",
+    "data-keep-mobile-sidebar-open": ""
+  },
+  popover_attrs={
+    "data-side": "top",
+    "class": "w-[271px] md:w-[239px]"
   }
 ) %}
-<div class="grid gap-4 p-4">
+<div class="grid gap-4">
   <header class="grid gap-1.5">
     <h2 class="font-semibold">I hope you like Basecoat...</h2>
     <p class="text-muted-foreground text-sm">My name is <a href="https://ronanberder.com" target="_blank">Ronan</a> and I made this (and <a class="underline underline-offset-4" href="https://pagescms.org" target="_target">other things</a>). If you find it useful, please consider sponsoring me on GitHub or following me on X.</p>
@@ -49,6 +44,7 @@
     <span class="truncate text-xs">v{{ pkg.version }}</span>
   </div>
 </a>
+
 {# <div class="flex flex-col gap-2 px-2 text-sm">
   <form class="form relative">
     <label for="search" class="sr-only">Search</label>
@@ -59,29 +55,36 @@
 {% endset %}
 
 {% set link_attrs = {
+  "hx-boost": "true",
+  "hx-select": "#content",
+  "hx-target": "#content",
+  "hx-swap": "outerHTML"
+} %}
+
+{% set new_link_attrs = {
   "hx-boost": "true",
   "hx-select": "#content",
   "hx-target": "#content",
   "hx-swap": "outerHTML",
-  "@click": "if (window.innerWidth < 768) { open = false }"
+  "data-new-link": "true"
 } %}
 
 {% set icon_home %}{% lucide "house" %}{% endset %}
 {% set icon_info %}{% lucide "info" %}{% endset %}
 {% set icon_square_terminal %}{% lucide "square-terminal" %}{% endset %}
 {% set icon_layout_dashboard %}{% lucide "layout-dashboard" %}{% endset %}
-{% set icon_github %}{% lucide "github" %}{% endset %}
+{% set icon_github %}<svg fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg>{% endset %}
+{% set icon_discord %}<svg fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Discord</title><path d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z"/></svg>{% endset %}
+{% set icon_github %}<svg fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg>{% endset %}
+{% set icon_discord %}<svg fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Discord</title><path d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z"/></svg>{% endset %}
 
 {% set menu = [
   { type: "group", label: "Getting started", items: [
     { label: "Introduction", url: "/introduction", icon: icon_info, attrs: link_attrs },
     { label: "Installation", url: "/installation", icon: icon_square_terminal, attrs: link_attrs },
     { label: "Kitchen sink", url: "/kitchen-sink", icon: icon_layout_dashboard, attrs: link_attrs },
-    { label: "GitHub", url: "https://github.com/hunvreus/basecoat", icon: icon_github, attrs: {
-        "target": "_blank",
-        "@click": "if (window.innerWidth < 768) { open = false }"
-      }
-    }
+    { label: "GitHub", url: "https://github.com/hunvreus/basecoat", icon: icon_github, attrs: { "target": "_blank" } },
+    { label: "Discord", url: "https://basecoatui.com/chat", icon: icon_discord, attrs: { "target": "_blank" } }
   ]},
   { type: 'group', label: 'Components', items: [
     { label: "Accordion", url: "/components/accordion", attrs: link_attrs },
@@ -91,25 +94,35 @@
     { label: "Badge", url: "/components/badge", attrs: link_attrs },
     { label: "Breadcrumb", url: "/components/breadcrumb", attrs: link_attrs },
     { label: "Button", url: "/components/button", attrs: link_attrs },
+    { label: "Button Group", url: "/components/button-group", attrs: new_link_attrs },
     { label: "Card", url: "/components/card", attrs: link_attrs },
     { label: "Checkbox", url: "/components/checkbox", attrs: link_attrs },
+    { label: "Command", url: "/components/command", attrs: new_link_attrs },
     { label: "Combobox", url: "/components/combobox", attrs: link_attrs },
     { label: "Dialog", url: "/components/dialog", attrs: link_attrs },
     { label: "Dropdown Menu", url: "/components/dropdown-menu", attrs: link_attrs },
+    { label: "Empty", url: "/components/empty", attrs: new_link_attrs },
+    { label: "Field", url: "/components/field", attrs: new_link_attrs },
     { label: "Form", url: "/components/form", attrs: link_attrs },
     { label: "Input", url: "/components/input", attrs: link_attrs },
+    { label: "Input Group", url: "/components/input-group", attrs: new_link_attrs },
+    { label: "Item", url: "/components/item", attrs: new_link_attrs },
+    { label: "Kbd", url: "/components/kbd", attrs: new_link_attrs },
     { label: "Label", url: "/components/label", attrs: link_attrs },
     { label: "Pagination", url: "/components/pagination", attrs: link_attrs },
     { label: "Popover", url: "/components/popover", attrs: link_attrs },
+    { label: "Progress", url: "/components/progress", attrs: new_link_attrs },
     { label: "Radio Group", url: "/components/radio-group", attrs: link_attrs },
     { label: "Select", url: "/components/select", attrs: link_attrs },
-    { label: "Skeleton", url: "/components/skeleton", attrs: link_attrs },
     { label: "Sidebar", url: "/components/sidebar", attrs: link_attrs },
+    { label: "Skeleton", url: "/components/skeleton", attrs: link_attrs },
     { label: "Slider", url: "/components/slider", attrs: link_attrs },
+    { label: "Spinner", url: "/components/spinner", attrs: new_link_attrs },
     { label: "Switch", url: "/components/switch", attrs: link_attrs },
     { label: "Table", url: "/components/table", attrs: link_attrs },
     { label: "Tabs", url: "/components/tabs", attrs: link_attrs },
     { label: "Textarea", url: "/components/textarea", attrs: link_attrs },
+    { label: "Theme Switcher", url: "/components/theme-switcher", attrs: link_attrs },
     { label: "Toast", url: "/components/toast", attrs: link_attrs },
     { label: "Tooltip", url: "/components/tooltip", attrs: link_attrs }
   ]}
@@ -117,30 +130,10 @@
 
 
 {{ sidebar(
+  id="sidebar",
   label="Sidebar navigation",
   header=header,
   footer=footer,
-  content_attrs={
-    "x-data": "{
-      updateCurrentPage() {
-        $el.querySelectorAll('a').forEach(link => {
-          normalizedCurrentPathname = window.location.pathname.endsWith('/') ?
-            window.location.pathname.slice(0, -1) :
-            window.location.pathname;
-          normalizedLinkPathname = link.pathname.endsWith('/') ?
-            link.pathname.slice(0, -1) :
-            link.pathname;
-          if (normalizedCurrentPathname === normalizedLinkPathname) {
-            link.setAttribute('aria-current', 'page');
-          } else {
-            link.setAttribute('aria-current', 'false');
-          }
-        });
-      }
-    }",
-    "class": "scrollbar",
-    "x-init": "updateCurrentPage()",
-    "@htmx:pushed-into-history.window": "updateCurrentPage()"
-  },
+  content_attrs={ "class": "scrollbar [&_[data-new-link]::after]:content-['New'] [&_[data-new-link]::after]:ml-auto [&_[data-new-link]::after]:text-xs [&_[data-new-link]::after]:font-medium [&_[data-new-link]::after]:bg-sidebar-primary [&_[data-new-link]::after]:text-sidebar-primary-foreground [&_[data-new-link]::after]:px-2 [&_[data-new-link]::after]:py-0.5 [&_[data-new-link]::after]:rounded-md" },
   menu=menu
-) }}
+) }}

docs/src/components/accordion.njk

@@ -11,23 +11,10 @@ toc:
 
 <div class="alert mb-6">
   {% lucide "circle-alert" %}
-  <h2>There is no dedicated accordion component in Basecoat.</h2>
+  <h2>There is no dedicated Accordion component in Basecoat.</h2>
 </div>
 
-{% set code %}<section
-  x-init
-  @click="
-    const clickedSummary = $event.target.closest('summary');
-    if (!clickedSummary) return;
-    const clickedDetails = clickedSummary.closest('details');
-    if (!clickedDetails) return;
-    $el.querySelectorAll('details').forEach(detailsEl => {
-      if (detailsEl !== clickedDetails) {
-        detailsEl.removeAttribute('open');
-      }
-    });
-  "
->
+{% set code %}<section class="accordion">
   <details class="group border-b last:border-b-0 ">
     <summary class="w-full focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] transition-all outline-none rounded-md">
       <h2 class="flex flex-1 items-start justify-between gap-4 py-4 text-left text-sm font-medium hover:underline ">
@@ -62,9 +49,27 @@ toc:
     </section>
   </details>
 </section>
+<script>
+  (() => {
+    const accordions = document.querySelectorAll('.accordion');
+    accordions.forEach(accordion => {
+      accordion.addEventListener('click', (event) => {
+        const summary = event.target.closest('summary');
+        if (!summary) return;
+        const details = summary.closest('details');
+        if (!details) return;
+        accordion.querySelectorAll('details').forEach(detailsEl => {
+          if (detailsEl !== details) {
+            detailsEl.removeAttribute('open');
+          }
+        });
+      });
+    });
+  })();
+</script>
 {% endset %}
 {{ code_preview("accordion", code | prettyHtml, "w-full max-w-md") }}
 
 <h2 id="usage"><a href="#usage">Usage</a></h2>
 
-<p class="prose">Basecoat animates <code>&lt;details&gt;</code> elements by default. The example above uses Alpine.js to handle the open/close state along with some Tailwind CSS classes.</p>
+<p class="prose">Basecoat already animates <code>&lt;details&gt;</code> elements by default. The example add some Tailwind CSS utility classes for style and a bit of vanilla JavaScript to handle the open/close state.</p>

docs/src/components/alert-dialog.njk

@@ -6,8 +6,8 @@ toc:
   - label: Usage
     id: usage
     children:
-      - label: HTML + Javascript
-        id: usage-default
+      - label: HTML
+        id: usage-html
       - label: Jinja and Nunjucks
         id: usage-macro
 ---
@@ -18,8 +18,8 @@ toc:
 
 {% set code_html %}
 {% set footer %}
-  <button class="btn-outline" @click="open = false">Cancel</button>
-  <button class="btn-primary" @click="open = false">Continue</button>
+  <button class="btn-outline" onclick="document.getElementById('alert-dialog').close()">Cancel</button>
+  <button class="btn-primary" onclick="document.getElementById('alert-dialog').close()">Continue</button>
 {% endset %}
 {{ dialog(
   id="alert-dialog",
@@ -29,64 +29,61 @@ toc:
   trigger_attrs={"class": "btn-outline"},
   footer=footer,
   close_button=false,
-  close_on_overlay_click=false,
-  register_on=["alpine:init", "htmx:afterSwap"]
+  close_on_overlay_click=false
 ) }}
 {% endset %}
 
-{% set code_script %}
-<script>
-{% fetchCode "src/js/dialog.js" %}
-
-document.addEventListener('alpine:init', () => {
-  window.basecoat.registerDialog(Alpine);
-});
-</script>
-{% endset %}
-
-{{ code_preview("alert-dialog", code_script | prettyHtml ~ code_html | prettyHtml) }}
+{{ code_preview("alert-dialog", code_html | prettyHtml) }}
 
 <h2 id="usage"><a href="#usage">Usage</a></h2>
 
-<h3 id="usage-default"><a href="#usage-default">HTML + Javascript</a></h3>
-
-<div class="alert my-6">
-  {% lucide "circle-alert" %}
-  <h2>This component requires Javascript.</h2>
-</div>
+<h3 id="usage-default"><a href="#usage-html">HTML</a></h3>
 
 <section class="prose">
-  <p>The Alert Dialog component uses the same Alpine.js code as the <a href="/components/dialog" class="font-medium underline underline-offset-4">Dialog</a> component with one small difference: we set <code>initialCloseOnOverlayClick</code> to <code>false</code> to prevent the dialog from closing when the overlay is clicked.</p>
-
-  <p>You can include the Javascript code provided below, load it as an individual file or use the CLI. Some Alpine.js properties are also required on certain elements (e.g. <code class="text-xs">x-bind</code>, <code class="text-xs">x-data</code>, <code class="text-xs">@click</code>).</p>
+  <p>The Alert Dialog component is identical to <a href="/components/dialog" class="font-medium underline underline-offset-4">Dialog</a> except for two small differences: we do not display a close button and we do not let the user close the dialog when clicking on the backdrop (no <code>onclick</code> attribute on the <code>&lt;dialog&gt;</code> or the <code>&lt;article&gt;</code> elements).</p>
 </section>
 
-<div class="flex flex-wrap gap-2 my-6">
-  <a class="badge-outline" href="/installation/#install-js">
-    Components with Javascript
-    {% lucide "arrow-right" %}
-  </a>
-  <a class="badge-outline" href="/installation/#install-cli">
-    Use the CLI
-    {% lucide "arrow-right" %}
-  </a>
-  <a class="badge-outline" href="https://github.com/hunvreus/basecoat/blob/main/src/js/dialog.js" target="_blank">
-    Individual JS file (dialog.js)
-    {% lucide "arrow-right" %}
-  </a>
-</div>
+{{ code_block(code_html | prettyHtml) }}
 
-{% from "tabs.njk" import tabs %}
-{% set tabsets = [
-  { tab: "HTML", panel: code_block(code_html | prettyHtml, class="") },
-  { tab: "Javascipt (Alpine.js)", panel: code_block(code_script | prettyHtml, class="") }
-] %}
-{{ tabs(id="alert-dialog", tabsets=tabsets) }}
+<section class="prose">
+  <p>The component has the following HTML structure:</p>
+  <dl>
+    <dt><code class="highlight language-html">&lt;button type="button"&gt;</code> <span class="badge-secondary">Optional</span></dt>
+    <dd>The trigger button to open the alert dialog (using <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/showModal" target="_blank">the native <code>showModal()</code> method</a>).</dd>
+    <dt><code class="highlight language-html">&lt;dialog class="dialog" id="{ DIALOG_ID }"&gt;</code></dt>
+    <dd>Wraps the whole component and acts as the backdrop. It can also have the following attributes:
+      <ul>
+        <li><code>aria-labelledby="{ TITLE_ID }"</code>: linked to by the <code>aria-labelledby</code> attribute of the dialog.</li>
+        <li><code>aria-describedby="{ DESCRIPTION_ID }"</code>: linked to by the <code>aria-describedby</code> attribute of the <code>&lt;dialog&gt;</code>.</li>
+      </ul>
+      <dl>
+        <dt><code class="highlight language-html">&lt;article&gt;</code></dt>
+        <dd>Wraps the content of the alert dialog.
+          <dl>
+            <dt><code class="highlight language-html">&lt;header&gt;</code></dt>
+            <dd>Contains the header for the alert dialog:
+              <dl>
+                <dt><code class="highlight language-html">&lt;h2&gt;</code></dt>
+                <dd>The title of the alert dialog, must have an <code>id</code> if you use the <code>aria-labelledby</code> attribute on the <code>&lt;dialog&gt;</code>.</dd>
+                <dt><code class="highlight language-html">&lt;p&gt;</code> <span class="badge-secondary">Optional</span></dt>
+                <dd>The description of the alert dialog, must have an <code>id</code> if you use the <code>aria-describedby</code> attribute on the <code>&lt;dialog&gt;</code>.</dd>
+              </dl>
+            </dd>
+            <dt><code class="highlight language-html">&lt;section&gt;</code> <span class="badge-secondary">Optional</span></dt>
+            <dd>For the content.</dd>
+            <dt><code class="highlight language-html">&lt;footer&gt;</code> <span class="badge-secondary">Optional</span></dt>
+            <dd>Usually contains actions.</dd>
+          </dl>
+        </dd>
+      </dl>
+    </dd>
+  </dl>
+</section>
 
 <h3 id="usage-macro"><a href="#usage-macro">Jinja and Nunjucks</a></h3>
 
 <div class="prose">
-  <p>You can use the <code class="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-xs">dialog()</code> Nunjucks or Jinja macro for this component. If you use one of the macros, make sure to set <code>close_on_overlay_click</code> and <code>close_button</code> to <code>False</code> (or <code>false</code> for Nunjucks).</p>
+  <p>You can use the <code class="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-xs">dialog()</code> Nunjucks or Jinja macro for this component. Make sure to set <code>close_on_overlay_click</code> and <code>close_button</code> to <code>False</code> (or <code>false</code> for Nunjucks).</p>
 </div>
 
 <div class="flex flex-wrap gap-2 my-6">
@@ -105,8 +102,8 @@ document.addEventListener('alpine:init', () => {
 </div>
 
 {% set raw_code %}{% raw %}{% set footer %}
-  <button class="btn-outline" @click="open = false">Cancel</button>
-  <button class="btn-primary" @click="open = false">Continue</button>
+  <button class="btn-outline" onclick="document.getElementById('demo-alert-dialog').close()">Cancel</button>
+  <button class="btn-primary" onclick="document.getElementById('demo-alert-dialog').close()">Continue</button>
 {% endset %}
 {{ dialog(
   id="demo-alert-dialog",

docs/src/components/alert.njk

@@ -19,25 +19,65 @@ toc:
 {% from "macros/code_preview.njk" import code_preview %}
 {% from "macros/code_block.njk" import code_block %}
 
-{% set code %}<div class="alert">
-  {% lucide "circle-check" %}
-  <h2>Success! Your changes have been saved</h2>
-  <section>This is an alert with icon, title and description.</section>
-</div>{% endset %}
-{{ code_preview("alert", code) }}
+{% set code %}
+<div class="grid w-full max-w-xl items-start gap-4">
+  <div class="alert">
+    {% lucide "circle-check" %}
+    <h2>Success! Your changes have been saved</h2>
+    <section>This is an alert with icon, title and description.</section>
+  </div>
+  <div class="alert">
+    {% lucide "popcorn" %}
+    <h2>This Alert has a title and an icon. No description.</h2>
+    <section>This is an alert with icon, title and description.</section>
+  </div>
+  <div class="alert-destructive">
+    {% lucide "circle-check" %}
+    <h2>Unable to process your payment.</h2>
+    <section>
+      <p>Please verify your billing information and try again.</p>
+      <ul class="list-inside list-disc text-sm">
+        <li>Check your card details</li>
+        <li>Ensure sufficient funds</li>
+        <li>Verify billing address</li>
+      </ul>
+    </section>
+  </div>
+</div>
+{% endset %}
+{{ code_preview("alert", code | prettyHtml) }}
 
 <h2 id="usage">Usage</h2>
 
 <section class="prose">
-  <p>You can use one of the two classes: <code>alert</code> or <code>alert-dialog</code> with any of the following children:</p>
-  <ul>
-    <li>A svg icon,</li>
-    <li>A <code>&lt;h2&gt;</code> for the title.</li>
-    <li>A <code>&lt;section&gt;</code> for the description. This can include paragraphs, lists, etc.</li>
-  </ul>
+  <p>Use the <code>alert</code> or <code>alert-destructive</code>.</p>
 </section>
 
-{{ code_block(code) }}
+{% set code_simple %}
+<div class="alert">
+  {% lucide "circle-check" %}
+  <h2>Success! Your changes have been saved</h2>
+  <section>This is an alert with icon, title and description.</section>
+</div>
+{% endset %}
+{{ code_block(code_simple | prettyHtml) }}
+
+<section class="prose">
+  <p>The component has the following HTML structure:</p>
+  <dl>
+    <dt><code class="highlight language-html">&lt;div class="alert"&gt;</code></dt>
+    <dd>Main container. Use <code>alert</code> for default styling or <code>alert-destructive</code> for error states.
+      <dl>
+        <dt><code class="highlight language-html">&lt;svg&gt;</code> <span class="badge-secondary">Optional</span></dt>
+        <dd>The icon.</dd>
+        <dt><code class="highlight language-html">&lt;h2&gt;</code></dt>
+        <dd>The title.</dd>
+        <dt><code class="highlight language-html">&lt;section&gt;</code> <span class="badge-secondary">Optional</span></dt>
+        <dd>The description.</dd>
+      </dl>
+    </dd>
+  </dl>
+</section>
 
 <h2 id="examples"><a href="#examples">Examples</a></h2>
 

docs/src/components/avatar.njk

@@ -12,12 +12,29 @@ toc:
 
 <div class="alert mb-6">
   {% lucide "circle-alert" %}
-  <h2>There is no dedicated avatar component in Basecoat.</h2>
+  <h2>There is no dedicated Avatar component in Basecoat.</h2>
 </div>
 
-{% set code %}<img class="size-8 shrink-0 object-cover rounded-full" alt="@hunvreus" src="https://github.com/hunvreus.png">{% endset %}
-{{ code_preview("avatar", code, "max-w-md") }}
+{% set code %}
+<div class="flex flex-row flex-wrap items-center gap-12">
+  <img class="size-8 shrink-0 object-cover rounded-full" alt="@hunvreus" src="https://github.com/hunvreus.png">
+  <img class="size-8 shrink-0 object-cover rounded-lg" alt="@shadcn" src="https://github.com/shadcn.png">
+  <div class="flex -space-x-2 [&_img]:ring-background [&_img]:ring-2 [&_img]:grayscale [&_img]:size-8 [&_img]:shrink-0 [&_img]:object-cover [&_img]:rounded-full">
+    <img alt="@hunvreus" src="https://github.com/hunvreus.png">
+    <img alt="@shadcn" src="https://github.com/shadcn.png">
+    <img alt="@adamwathan" src="https://github.com/adamwathan.png">
+  </div>
+</div>
+{% endset %}
+{{ code_preview("avatar", code | prettyHtml, "w-full max-w-md") }}
 
 <h2 id="usage"><a href="#usage">Usage</a></h2>
 
-<p class="prose">Avatars are fairly simple to implement with Tailwind. The example above shows how to implement one with Tailwind and an <code>&lt;img&gt;</code> element. More examples can be found in the <a href="/kitchen-sink#avatar">kitchen sink</a>.</p>
+<section class="prose">
+  <p>Avatars are just <code>&lt;img&gt;</code> elements styled with Tailwind utility classes.</p>
+</section>
+
+{% set code_simple %}
+  <img class="size-8 shrink-0 object-cover rounded-full" alt="@hunvreus" src="https://github.com/hunvreus.png">
+{% endset %}
+{{ code_block(code_simple | prettyHtml, "html") }}

docs/src/components/badge.njk

@@ -25,7 +25,25 @@ toc:
 {% from "macros/code_preview.njk" import code_preview %}
 {% from "macros/code_block.njk" import code_block %}
 
-{% set code %}<span class="badge">Badge</span>{% endset %}
+{% set code %}
+<div class="flex flex-col items-center gap-2">
+  <div class="flex w-full flex-wrap gap-2">
+    <span class="badge">Badge</span>
+    <span class="badge-secondary">Secondary</span>
+    <span class="badge-destructive">Destructive</span>
+    <span class="badge-outline">Outline</span>
+  </div>
+  <div class="flex w-full flex-wrap gap-2">
+    <span class="badge-secondary bg-blue-500 text-white dark:bg-blue-600">
+      {% lucide "badge-check" %}
+      Verified
+    </span>
+    <span class="badge rounded-full h-5 min-w-5 px-1 font-mono tabular-nums">8</span>
+    <span class="badge-destructive rounded-full h-5 min-w-5 px-1 font-mono tabular-nums">99</span>
+    <span class="badge-outline rounded-full h-5 min-w-5 px-1 font-mono tabular-nums">20+</span>
+  </div>
+</div>
+{% endset %}
 {{ code_preview("badge", code) }}
 
 <h2 id="usage"><a href="#usage">Usage</a></h2>

docs/src/components/breadcrumb.njk

@@ -13,19 +13,9 @@ toc:
 
 <div class="alert mb-6">
   {% lucide "circle-alert" %}
-  <h2>There is no dedicated breadcrumb component in Basecoat.</h2>
+  <h2>There is no dedicated Breadcrumb component in Basecoat.</h2>
 </div>
 
-{% set code_script %}
-<script>
-{% fetchCode "src/js/dropdown-menu.js" %}
-
-document.addEventListener('alpine:init', () => {
-  window.basecoat.registerDropdownMenu(Alpine);
-});
-</script>
-{% endset %}
-
 {% set code_html %}
 <ol class="text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5">
   <li class="inline-flex items-center gap-1.5">
@@ -39,8 +29,7 @@ document.addEventListener('alpine:init', () => {
     {% call dropdown_menu(
       id="demo-breadcrumb-menu",
       trigger=trigger,
-      trigger_attrs={"class": "flex size-9 items-center justify-center h-4 w-4 hover:text-foreground cursor-pointer"},
-      register_on=["alpine:init", "htmx:afterSwap"]
+      trigger_attrs={"class": "flex size-9 items-center justify-center h-4 w-4 hover:text-foreground cursor-pointer"}
     ) %}
       <nav role="menu">
         <button type="button" role="menuitem">Documentation</button>
@@ -60,39 +49,23 @@ document.addEventListener('alpine:init', () => {
 </ol>
 {% endset %}
 
-{{ code_preview("dropdown-menu", code_script | prettyHtml ~ code_html | prettyHtml) }}
+{{ code_preview("dropdown-menu", code_html | prettyHtml) }}
 
 <h2 id="usage"><a href="#usage">Usage</a></h2>
 
-<div class="alert my-6">
-  {% lucide "circle-alert" %}
-  <h2>This component requires Javascript.</h2>
-</div>
-
 <section class="prose">
-  <p>This example uses some simple Tailwind CSS styles along with the <a href="/components/dropdown-menu">Dropdown Menu</a>.</p>
-
-  <p>You can include the Javascript code provided below, load it as an individual file or use the CLI. Some Alpine.js properties are also required on certain elements (e.g. <code class="text-xs">x-bind</code>, <code class="text-xs">x-data</code>, <code class="text-xs">@click</code>).</p>
+  <p>You can style an ordered list of links combined with chevron icons as show below. The example above demonstrates a more complex use case using the <a href="/components/dropdown-menu">Dropdown Menu</a> component.</p>
 </section>
 
-<div class="flex flex-wrap gap-2 my-6">
-  <a class="badge-outline" href="/installation/#install-js">
-    Components with Javascript
-    {% lucide "arrow-right" %}
-  </a>
-  <a class="badge-outline" href="/installation/#install-cli">
-    Use the CLI
-    {% lucide "arrow-right" %}
-  </a>
-  <a class="badge-outline" href="https://github.com/hunvreus/basecoat/blob/main/src/js/select.js" target="_blank">
-    Individual JS file (select.js)
-    {% lucide "arrow-right" %}
-  </a>
-</div>
-
-{% from "tabs.njk" import tabs %}
-{% set tabsets = [
-  { tab: "HTML", panel: code_block(code_html | prettyHtml, class="") },
-  { tab: "Javascipt (Alpine.js)", panel: code_block(code_script | prettyHtml, class="") }
-] %}
-{{ tabs(id="alert-dialog", tabsets=tabsets) }}
+{% set code_simple %}
+<ol class="text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5">
+  <li class="inline-flex items-center gap-1.5">
+    <a href="#" class="hover:text-foreground transition-colors">Home</a>
+  </li>
+  <li>{% lucide "chevron-right", { "class": "size-3.5" } %}</li>
+  <li class="inline-flex items-center gap-1.5">
+    <a href="#" class="hover:text-foreground transition-colors">Components</a>
+  </li>
+</ol>
+{% endset %}
+{{ code_block(code_simple | prettyHtml, "html") }}

docs/src/components/button-group.njk

@@ -0,0 +1,290 @@
+---
+layout: layouts/page.njk
+title: Button Group
+description: A container that groups related buttons together with consistent styling.
+toc:
+  - label: Usage
+    id: usage
+  - label: Examples
+    id: examples
+    children:
+      - label: Orientation
+        id: example-orientation
+      - label: Nested
+        id: example-nested
+      - label: Separator
+        id: example-separator
+      - label: Input
+        id: example-input
+      - label: Dropdown Menu
+        id: example-dropdown-menu
+      - label: Select
+        id: example-select
+      - label: Popover
+        id: example-popover
+---
+
+{% from "dropdown-menu.njk" import dropdown_menu %}
+{% from "popover.njk" import popover %}
+{% from "select.njk" import select %}
+{% from "macros/code_preview.njk" import code_preview %}
+{% from "macros/code_block.njk" import code_block %}
+
+{% set code_default %}
+<div class="flex w-fit items-stretch gap-2">
+  <button type="button" class="btn-icon-outline" aria-label="Go Back">{% lucide "arrow-left" %}</button>
+  
+  <div role="group" class="button-group">
+    <button type="button" class="btn-outline">Archive</button>
+    <button type="button" class="btn-outline">Report</button>
+  </div>
+
+  <div role="group" class="button-group">
+    <button type="button" class="btn-outline">Snooze</button>
+    {% set trigger %}
+      {% lucide "ellipsis" %}
+    {% endset %}
+    {% call dropdown_menu(
+      trigger=trigger,
+      trigger_attrs={"class": "btn-icon-outline"},
+      popover_attrs={"data-align": "end"}
+    ) %}
+      <div role="menuitem">
+        {% lucide "mail-check" %}
+        Mark as Read
+      </div>
+      <div role="menuitem">
+        {% lucide "archive" %}
+        Archive
+      </div>
+      <hr role="separator">
+      <div role="menuitem">
+        {% lucide "clock" %}
+        Snooze
+      </div>
+      <div role="menuitem">
+        {% lucide "calendar" %}
+        Add to Calendar
+      </div>
+      <div role="menuitem">
+        {% lucide "list-filter-plus" %}
+        Add to List
+      </div>
+      <hr role="separator">
+      <div role="menuitem" class="text-destructive hover:bg-destructive/10 dark:hover:bg-destructive/20 focus:bg-destructive/10 dark:focus:bg-destructive/20 focus:text-destructive [&_svg]:!text-destructive">
+        {% lucide "trash-2" %}
+        Trash
+      </div>
+    {% endcall %}
+  </div>
+{% endset %}
+
+{{ code_preview("button-group-default", code_default | prettyHtml) }}
+
+<h2 id="usage"><a href="#usage">Usage</a></h2>
+
+<p class="prose">Simply wrap buttons you want to group together in a <code>&lt;div role="group" class="button-group"&gt;</code> element. You can also use the <code>data-orientation="vertical"</code> attribute to stack buttons vertically. You can also group buttons with <a href="#example-dropdown-menu">dropdown menus</a> or <a href="#example-popover">popovers</a> (provided the trigger is a button). Finally, you can use a <a href="#example-separator">separator</a> to visually divide buttons within a group (for secondary buttons for example).</p>
+
+{% set code_simple %}  
+<div role="group" class="button-group">
+  <button type="button" class="btn-outline">Archive</button>
+  <button type="button" class="btn-outline">Report</button>
+</div>
+{% endset %}
+{{ code_block(code_simple | prettyHtml, "html") }}
+
+<h2 id="examples"><a href="#examples">Examples</a></h2>
+
+<h3 id="example-orientation"><a href="#example-orientation">Orientation</a></h3>
+
+<section class="prose">
+  <p>Use <code>data-orientation="vertical"</code> to stack buttons vertically.</p>
+</section>
+
+{% set code_orientation %}
+<div role="group" class="button-group" data-orientation="vertical">
+  <button type="button" class="btn-icon-outline" aria-label="Zoom in">
+    {% lucide "plus" %}
+  </button>
+  <button type="button" class="btn-icon-outline" aria-label="Zoom out">
+    {% lucide "minus" %}
+  </button>
+</div>
+{% endset %}
+
+{{ code_preview("button-group-orientation", code_orientation | prettyHtml) }}
+
+<h3 id="example-size"><a href="#example-size">Size</a></h3>
+
+{% set code_size %}
+<div class="flex flex-col items-start gap-8">
+  <div role="group" class="button-group">
+    <button type="button" class="btn-sm-outline">Small</button>
+    <button type="button" class="btn-sm-outline">Button</button>
+    <button type="button" class="btn-sm-outline">Group</button>
+    <button type="button" class="btn-sm-icon-outline">{% lucide "plus" %}</button>
+  </div>
+  <div role="group" class="button-group">
+    <button type="button" class="btn-outline">Default</button>
+    <button type="button" class="btn-outline">Button</button>
+    <button type="button" class="btn-outline">Group</button>
+    <button type="button" class="btn-icon-outline">{% lucide "plus" %}</button>
+  </div>
+  <div role="group" class="button-group">
+    <button type="button" class="btn-lg-outline">Small</button>
+    <button type="button" class="btn-lg-outline">Button</button>
+    <button type="button" class="btn-lg-outline">Group</button>
+    <button type="button" class="btn-lg-icon-outline">{% lucide "plus" %}</button>
+  </div>
+</div>
+{% endset %}
+
+{{ code_preview("button-group-size", code_size | prettyHtml) }}
+
+<h3 id="example-nested"><a href="#example-nested">Nested</a></h3>
+
+{% set code_nested %}
+<div role="group" aria-label="Pagination controls" class="flex w-fit items-stretch gap-2">
+  <div role="group" class="button-group">
+    <button type="button" class="btn-sm-outline">1</button>
+    <button type="button" class="btn-sm-outline">2</button>
+    <button type="button" class="btn-sm-outline">3</button>
+    <button type="button" class="btn-sm-outline">4</button>
+    <button type="button" class="btn-sm-outline">5</button>
+  </div>
+  <div role="group" class="button-group">
+    <button type="button" class="btn-sm-icon-outline" aria-label="Previous page">
+      {% lucide "chevron-left" %}
+    </button>
+    <button type="button" class="btn-sm-icon-outline" aria-label="Next page">
+      {% lucide "chevron-right" %}
+    </button>
+  </div>
+</div>
+{% endset %}
+
+{{ code_preview("button-group-nested", code_nested | prettyHtml) }}
+
+<h3 id="example-separator"><a href="#example-separator">Separator</a></h3>
+
+<section class="prose">
+  <p>Use <code>&lt;hr role="separator"&gt;</code> to visually divide buttons within a group.</p>
+</section>
+
+{% set code_separator %}
+<div role="group" class="button-group">
+  <button type="button" class="btn-secondary">Copy</button>
+  <hr role="separator">
+  <button type="button" class="btn-secondary">Paste</button>
+</div>
+{% endset %}
+
+{{ code_preview("button-group-separator", code_separator | prettyHtml) }}
+
+
+<h3 id="example-input"><a href="#example-input">Input</a></h3>
+
+{% set code_input %}
+<div class="button-group">
+  <input type="text" class="input" placeholder="Search...">
+  <button type="button" class="btn-icon-outline">{% lucide "search" %}</button>
+</div>
+{% endset %}
+
+{{ code_preview("button-group-input", code_input | prettyHtml) }}
+
+
+<h3 id="example-dropdown-menu"><a href="#example-dropdown-menu">Dropdown Menu</a></h3>
+
+{% set code_dropdown_menu %}
+<div role="group" class="button-group">
+  <button type="button" class="btn-outline">Follow</button>
+  {% set trigger %}
+    {% lucide "chevron-down" %}
+  {% endset %}
+  {% call dropdown_menu(
+    trigger=trigger,
+    trigger_attrs={"class": "btn-icon-outline"},
+    popover_attrs={"data-align": "end"}
+  ) %}
+    <div role="menuitem">
+      {% lucide "volume-off" %}
+      Mute Conversation
+    </div>
+    <div role="menuitem">
+      {% lucide "check" %}
+      Mark as Read
+    </div>
+    <div role="menuitem">
+      {% lucide "triangle-alert" %}
+      Report Conversation
+    </div>
+    <div role="menuitem">
+      {% lucide "user-round-x" %}
+      Block User
+    </div>
+    <div role="menuitem">
+      {% lucide "share" %}
+      Share Conversation
+    </div>
+    <div role="menuitem">
+      {% lucide "copy" %}
+      Copy Conversation
+    </div>
+    <hr role="separator">
+    <div role="menuitem" class="text-destructive hover:bg-destructive/10 dark:hover:bg-destructive/20 focus:bg-destructive/10 dark:focus:bg-destructive/20 focus:text-destructive [&_svg]:!text-destructive">
+      {% lucide "trash-2" %}
+      Delete Conversation
+    </div>
+  {% endcall %}
+</div>
+{% endset %}
+
+{{ code_preview("button-group-dropdown-menu", code_dropdown_menu | prettyHtml) }}
+
+<h3 id="example-select"><a href="#example-select">Select</a></h3>
+
+{% set code_select %}
+<div class="flex w-fit items-stretch gap-2">
+  <div class="button-group">
+    {% call select(trigger_attrs={"class": "[&_[data-name]]:hidden"}) %}
+      <div role="option" data-value="$">$ <span class="text-muted-foreground" data-name>US Dollar</span></div>
+      <div role="option" data-value="€">€ <span class="text-muted-foreground" data-name>Euro</span></div>
+      <div role="option" data-value="£">£ <span class="text-muted-foreground" data-name>British Pound</span></div>
+    {% endcall %}
+    <input type="text" class="input" placeholder="10.00">
+  </div>
+
+  <button type="button" class="btn-icon-outline">{% lucide "arrow-right" %}</button>
+</div>
+{% endset %}
+
+{{ code_preview("button-group-select", code_select | prettyHtml) }}
+
+<h3 id="example-popover"><a href="#example-popover">Popover</a></h3>
+
+{% set code_popover %}
+<div role="group" class="button-group">
+  <button type="button" class="btn-outline">
+    {% lucide "bot" %}
+    Copilot
+  </button>
+  {% call popover(
+    trigger=trigger,
+    trigger_attrs={"class": "btn-icon-outline"},
+    popover_attrs={"class": "w-72 p-0", "data-align": "end"}
+  ) %}
+    <header class="px-4 py-3 text-sm font-medium border-b">Agent Tasks</header>
+    <section class="p-4 text-sm space-y-2">
+      <textarea class="textarea w-full mb-4" placeholder="Describe your taks in natural language"></textarea>
+      <p class="font-medium">Start a new task with Copilot</p>
+      <p class="text-muted-foreground">
+        Describe your task in natural language. Copilot will work in the
+        background and open a pull request for your review.
+      </p>
+    </section>
+  {% endcall %}
+</div>
+{% endset %}
+
+{{ code_preview("button-group-popover", code_popover | prettyHtml) }}

docs/src/components/card.njk

@@ -47,15 +47,6 @@ toc:
 
 <h2 id="usage">Usage</h2>
 
-<section class="prose">
-  <p>Add the <code>card</code> class to any element and then define any of the children elements:</p>
-  <ul>
-    <li>A <code>&lt;header&gt;</code> for the card header, which can contain a <code>&lt;h2&gt;</code> for the title and a <code>&lt;p&gt;</code> for the description.</li>
-    <li>A <code>&lt;section&gt;</code> for the card content.</li>
-    <li>A <code>&lt;footer&gt;</code> for the card footer.</li>
-  </ul>
-</section>
-
 {% set code %}<div class="card">
   <header>
     <h2>Card Title</h2>
@@ -70,6 +61,30 @@ toc:
 </div>{% endset %}
 {{ code_block(code) }}
 
+<section class="prose">
+  <p>The component has the following HTML structure:</p>
+  <dl>
+    <dt><code class="highlight language-html">&lt;div class="card"&gt;</code></dt>
+    <dd>The card container.
+      <dl>
+        <dt><code class="highlight language-html">&lt;header&gt;</code></dt>
+        <dd>The header of the card.
+          <dl>
+            <dt><code class="highlight language-html">&lt;h2&gt;</code></dt>
+            <dd>The title of the card.</dd>
+            <dt><code class="highlight language-html">&lt;p&gt;</code> <span class="badge-secondary">Optional</span></dt>
+            <dd>The description of the card.</dd>
+          </dl>
+        </dd>
+        <dt><code class="highlight language-html">&lt;section&gt;</code></dt>
+        <dd>The content of the card.</dd>
+        <dt><code class="highlight language-html">&lt;footer&gt;</code> <span class="badge-secondary">Optional</span></dt>
+        <dd>The footer of the card.</dd>
+      </dl>
+    </dd>
+  </dl>
+</section>
+
 <h2 id="examples"><a href="#examples">Examples</a></h2>
 
 <h3 id="example-with-content-and-footer"><a href="#example-with-content-and-footer">With content and footer</a></h3>

docs/src/components/carousel.njk

@@ -0,0 +1,102 @@
+---
+layout: layouts/page.njk
+title: Carousel
+description: A carousel with motion and swipe.
+toc:
+  - label: Usage
+    id: usage
+---
+
+
+<style>
+.slider {
+  width: 300px;
+  text-align: center;
+  overflow: hidden;
+}
+
+.slides {
+  display: flex;
+  
+  overflow-x: auto;
+  scroll-snap-type: x mandatory;
+  
+  
+  
+  scroll-behavior: smooth;
+  -webkit-overflow-scrolling: touch;
+  
+  /*
+  scroll-snap-points-x: repeat(300px);
+  scroll-snap-type: mandatory;
+  */
+}
+.slides::-webkit-scrollbar {
+  display: none;
+}
+.slides {
+  scrollbar-width: none; /* Firefox */
+}
+.slides > div {
+  scroll-snap-align: start;
+  flex-shrink: 0;
+  width: 300px;
+  height: 300px;
+  margin-right: 50px;
+  border-radius: 10px;
+  background: #eee;
+  transform-origin: center center;
+  transform: scale(1);
+  transition: transform 0.5s;
+  position: relative;
+  
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 100px;
+}
+
+</style>
+
+<div class="slider">
+  
+  <a href="#slide-1">1</a>
+  <a href="#slide-2">2</a>
+  <a href="#slide-3">3</a>
+  <a href="#slide-4">4</a>
+  <a href="#slide-5">5</a>
+  <a href="#slide-6">6</a>
+  <a href="#slide-7">7</a>
+  <a href="#slide-8">8</a>
+  <a href="#slide-9">9</a>
+
+  <div class="slides">
+    <div id="slide-1">
+      1
+    </div>
+    <div id="slide-2">
+      2
+    </div>
+    <div id="slide-3">
+      3
+    </div>
+    <div id="slide-4">
+      4
+    </div>
+    <div id="slide-5">
+      5
+    </div>
+    <div id="slide-6">
+      6
+    </div>
+    <div id="slide-7">
+      7
+    </div>
+    <div id="slide-8">
+      8
+    </div>
+    <div id="slide-9">
+      9
+    </div>
+  </div>
+</div>

docs/src/components/chart.njk

@@ -0,0 +1,814 @@
+---
+layout: layouts/page.njk
+title: Chart
+description: Displays the path to the current resource using a hierarchy of links.
+toc:
+  - label: Usage
+    id: usage
+---
+<div class="grid gap-6">
+  <div class="grid grid-cols-2 gap-6">
+    <div class="card">
+      <header>
+        <h2>Area Chart</h2>
+        <p>Showing total visitors for the last 6 months</p>
+      </header>
+      <section>
+        <canvas id="chart-area-default"></canvas>
+      </section>
+      <footer>
+        <div class="grid gap-2 text-sm">
+          <div class="flex items-center gap-2 leading-none font-medium">
+            Trending up by 5.2% this month
+            {% lucide "trending-up", { "class": "size-4" } %}
+          </div>
+          <div class="text-muted-foreground flex items-center gap-2 leading-none">January - June 2024</div>
+        </div>
+      </footer>
+    </div>
+
+    <div class="card">
+      <header>
+        <h2>Area Chart - Stacked</h2>
+        <p>Showing total visitors for the last 6 months</p>
+      </header>
+      <section>
+        <canvas id="chart-area-stacked"></canvas>
+      </section>
+      <footer>
+        <div class="grid gap-2 text-sm">
+          <div class="flex items-center gap-2 leading-none font-medium">
+            Trending up by 5.2% this month
+            {% lucide "trending-up", { "class": "size-4" } %}
+          </div>
+          <div class="text-muted-foreground flex items-center gap-2 leading-none">January - June 2024</div>
+        </div>
+      </footer>
+    </div>
+
+    <div class="card">
+      <header>
+        <h2>Bar Chart - Multiple</h2>
+        <p>Showing total visitors for the last 6 months</p>
+      </header>
+      <section>
+        <canvas id="chart-bar-multiple"></canvas>
+      </section>
+      <footer>
+        <div class="grid gap-2 text-sm">
+          <div class="flex items-center gap-2 leading-none font-medium">
+            Trending up by 5.2% this month
+            {% lucide "trending-up", { "class": "size-4" } %}
+          </div>
+          <div class="text-muted-foreground flex items-center gap-2 leading-none">January - June 2024</div>
+        </div>
+      </footer>
+    </div>
+
+    <div class="card">
+      <header>
+        <h2>Doughnut Chart</h2>
+        <p>Showing total visitors for the last 6 months</p>
+      </header>
+      <section class="relative">
+        <div>
+          <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-center">
+            <div class="text-3xl font-semibold">1,125</div>
+            <div class="text-muted-foreground text-xs">Visitors</div>
+          </div>
+          <canvas id="chart-doughnut" class="max-h-[200px] mx-auto"></canvas>
+        </div>
+      </section>
+    </div>
+  </div>
+
+  <div class="card">
+    <header>
+      <h2>Bar Chart - Interactive</h2>
+      <p>Showing total visitors for the last 6 months</p>
+    </header>
+    <section>
+      <canvas id="chart-bar-interactive"></canvas>
+    </section>
+  </div>
+
+  <div class="card">
+    <header>
+      <h2>Bar Chart - Interactive</h2>
+      <p>Showing total visitors for the last 6 months</p>
+    </header>
+    <section class="max-h-[150px]">
+      <canvas id="chart-line-interactive"></canvas>
+    </section>
+  </div>
+
+
+<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+
+<script>
+  // Helper function to MULTIPLY the alpha channel of oklch colors by a factor
+  function setAlpha(colorString, alphaFactor) {
+    colorString = colorString.trim();
+    if (colorString.startsWith('oklch(')) {
+      const match = colorString.match(/^oklch\(([^\)]+?)\s*(?:\/\s*([\d.]+)(%?)\s*)?\)$/);
+      if (match && match[1]) {
+        const lchPart = match[1];
+        let currentAlpha = 1.0;
+
+        if (match[2]) {
+          currentAlpha = parseFloat(match[2]);
+          if (match[3] === '%') {
+            currentAlpha /= 100;
+          }
+        }
+
+        let newAlpha = currentAlpha * alphaFactor;
+        newAlpha = Math.max(0, Math.min(1, newAlpha)); 
+
+        return `oklch(${lchPart} / ${newAlpha.toFixed(3)})`;
+      } else {
+        console.warn('Failed to parse oklch string:', colorString);
+        return colorString;
+      }
+    }
+    
+    return colorString;
+  }
+
+  const computedStyle = getComputedStyle(document.documentElement);
+  const themeColors = {
+    background: computedStyle.getPropertyValue('--background').trim(),
+    border: computedStyle.getPropertyValue('--border').trim(),
+    mutedForeground: computedStyle.getPropertyValue('--muted-foreground').trim(),
+    foreground: computedStyle.getPropertyValue('--foreground').trim(),
+    chart1: computedStyle.getPropertyValue('--chart-1').trim(),
+    chart2: computedStyle.getPropertyValue('--chart-2').trim(),
+    chart3: computedStyle.getPropertyValue('--chart-3').trim(),
+    chart4: computedStyle.getPropertyValue('--chart-4').trim(),
+    chart5: computedStyle.getPropertyValue('--chart-5').trim(),
+  };
+
+  const getOrCreateTooltip = (chart) => {
+    let tooltipEl = chart.canvas.parentNode.querySelector('div[role="tooltip"]');
+
+    if (!tooltipEl) {
+      const tooltipHTML = `
+        <div
+          role="tooltip" 
+          class="border-border/50 bg-background grid min-w-[8rem] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl opacity-0 absolute pointer-events-none transition-all duration-400 space-y-1"
+        >
+          <h3 class="font-medium"></h3>
+          <ul class="grid gap-1"></ul>
+        </div>`;
+      const parser = new DOMParser();
+      const doc = parser.parseFromString(tooltipHTML.trim(), 'text/html');
+      tooltipEl = doc.body.firstChild;
+      chart.canvas.parentNode.appendChild(tooltipEl);
+    }
+    return tooltipEl;
+  };
+
+  const externalTooltipHandler = (context) => {
+    const {chart, tooltip} = context;
+    const chartType = chart.config._config.type;
+    const tooltipEl = getOrCreateTooltip(chart);
+    const titleEl = tooltipEl.querySelector('h3');
+    const bodyEl = tooltipEl.querySelector('ul');
+
+    // Hide if no tooltip
+    if (tooltip.opacity === 0) {
+      tooltipEl.classList.remove('opacity-100');
+      tooltipEl.classList.add('opacity-0');
+      return;
+    }
+
+    let bodyHtml = '';
+    if (tooltip.body) {
+      const titleLines = tooltip.title || [];
+      const bodyLines = tooltip.body.map(b => b.lines);
+
+      if (titleEl) {
+        if (chartType === 'doughnut') {
+          titleEl.remove();
+        } else {
+          titleEl.textContent = titleLines[0] || '';
+        }
+      } 
+
+      bodyLines.forEach((body, i) => {
+        const colors = tooltip.labelColors[i];
+        const parts = body[0].split(': ');
+        const label = chartType === 'doughnut'
+          ? titleLines[0] || ''
+          : parts[0] || '';
+        const value = parts[1] || '';
+
+        let color;
+        switch (chartType) {
+          case 'doughnut':
+          case 'pie':
+          case 'bar':
+            color = colors.backgroundColor;
+            break;
+          default:
+            color = colors.borderColor;
+        }
+
+        bodyHtml += `<li class="flex w-full flex-wrap items-center justify-between leading-none gap-x-2">
+          <div class="flex items-center gap-x-1.5">
+            <div class="shrink-0 rounded-[2px] size-2.5 block" style="background:${color}"></div>
+            <span class="text-muted-foreground">${label}</span>
+          </div>
+          <span class="text-foreground font-medium font-mono tabular-nums">${value}</span>
+        </li>`;
+      });
+    }
+    
+    if (bodyEl) bodyEl.innerHTML = bodyHtml;
+
+    const {offsetLeft: positionX, offsetTop: positionY} = chart.canvas;
+    const tooltipHeight = tooltipEl.offsetHeight;
+    const tooltipWidth = tooltipEl.offsetWidth;
+    const caretX = tooltip.caretX;
+    const caretY = tooltip.caretY;
+    const xAlign = tooltip.xAlign;
+    const yAlign = tooltip.yAlign;
+    const tooltipOffset = 8;
+
+    let left = positionX + caretX;
+    let top = positionY + caretY;
+
+    if (xAlign === 'center') {
+      left -= tooltipWidth / 2;
+    } else if (xAlign === 'right') {
+      left -= (tooltipWidth + tooltipOffset); 
+    } else { // xAlign === 'left'
+      left += tooltipOffset; 
+    }
+
+    if (yAlign === 'center') {
+      top -= tooltipHeight / 2;
+    } else if (yAlign === 'top') {
+      top -= (tooltipHeight + tooltipOffset); 
+    } else {
+      top += tooltipOffset; 
+    }
+    
+    const canvasBounds = chart.canvas.getBoundingClientRect();
+    if (left < 0) {
+      left = 0;
+    } else if (left + tooltipWidth > canvasBounds.width) { 
+      left = canvasBounds.width - tooltipWidth;
+    } 
+    if (top < 0) {
+      top = 0;
+    } else if (top + tooltipHeight > window.innerHeight) { 
+       const flippedTop = positionY + caretY - tooltipHeight - tooltipOffset; 
+       if (flippedTop >= 0) top = flippedTop;
+    } 
+    
+    tooltipEl.classList.remove('opacity-0');
+    tooltipEl.classList.add('opacity-100');
+    tooltipEl.style.left = left + 'px';
+    tooltipEl.style.top = top + 'px';
+  };
+
+  let ctx = document.getElementById('chart-area-default');
+  let data = {
+    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
+    datasets: [{
+      label: 'Desktop',
+      data: [186, 305, 237, 73, 209, 214],
+      borderWidth: 1,
+      backgroundColor: setAlpha(themeColors.chart1, 0.2),
+      borderColor: themeColors.chart1,
+      pointRadius: 0,
+      pointHoverRadius: 4,
+      pointHoverBackgroundColor: themeColors.chart1,
+      pointHoverBorderColor: themeColors.chart1,
+      fill: 'origin'
+    }]
+  };
+  let config = {
+    type: 'line',
+    data: data,
+    options: {
+      tension: 0.4,
+      interaction: {
+        mode: 'nearest',
+        axis: 'x',
+        intersect: false
+      },
+      scales: {
+        y: {
+          border: { display: false },
+          grid: { 
+            color: setAlpha(themeColors.border, 0.5),
+            lineWidth: 1
+          },
+          ticks: { display: false }
+        },
+        x: {
+          grid: { display: false },
+          ticks: { color: themeColors.mutedForeground }
+        }
+      },
+      plugins: {
+        legend: {
+          display: false,
+        },
+        tooltip: {
+          enabled: false,
+          position: 'nearest',
+          external: externalTooltipHandler,
+        }
+      }
+    }
+  };
+
+  new Chart(ctx, config);
+
+
+  ctx = document.getElementById('chart-area-stacked');
+  data = {
+    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
+    datasets: [{
+      label: 'Desktop',
+      data: [186, 305, 237, 73, 209, 214],
+      borderWidth: 1,
+      backgroundColor: setAlpha(themeColors.chart1, 0.2),
+      borderColor: themeColors.chart1,
+      pointRadius: 0,
+      pointHoverRadius: 4,
+      pointHoverBackgroundColor: themeColors.chart1,
+      pointHoverBorderColor: themeColors.chart1,
+      fill: 'origin'
+    }, {
+      label: 'Mobile',
+      data: [80, 200, 120, 190, 130, 140],
+      borderWidth: 1,
+      backgroundColor: setAlpha(themeColors.chart2, 0.2),
+      borderColor: themeColors.chart2,
+      pointRadius: 0,
+      pointHoverRadius: 4,
+      pointHoverBackgroundColor: themeColors.chart2,
+      pointHoverBorderColor: themeColors.chart2,
+      fill: 'origin'
+    }]
+  };
+  config = {
+    type: 'line',
+    data: data,
+    options: {
+      tension: 0.4,
+      interaction: {
+        mode: 'nearest',
+        axis: 'x',
+        intersect: false
+      },
+      scales: {
+        y: {
+          border: { display: false },
+          grid: { 
+            color: setAlpha(themeColors.border, 0.5),
+            lineWidth: 1
+          },
+          ticks: { display: false }
+        },
+        x: {
+          grid: { display: false },
+          ticks: { color: themeColors.mutedForeground }
+        }
+      },
+      plugins: {
+        legend: {
+          display: false,
+        },
+        tooltip: {
+          enabled: false,
+          position: 'nearest',
+          external: externalTooltipHandler,
+        }
+      }
+    }
+  };
+
+  new Chart(ctx, config);
+
+
+  ctx = document.getElementById('chart-bar-multiple');
+  data = {
+    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
+    datasets: [{
+        label: 'Desktop',
+        data: [186, 305, 237, 73, 209, 214],
+        backgroundColor: themeColors.chart1,
+        borderWidth: 0,
+        borderRadius: 4,
+        barPercentage: 0.7,
+        categoryPercentage: 0.8
+      }, {
+        label: 'Mobile',
+        data: [80, 200, 120, 190, 130, 140],
+        backgroundColor: themeColors.chart2,
+        borderWidth: 0,
+        borderRadius: 4,
+        barPercentage: 0.7,
+        categoryPercentage: 0.8
+      }]
+  };
+
+  config = {
+    type: 'bar',
+    data: data,
+    options: {
+      interaction: {
+        mode: 'index',
+        axis: 'x',
+        intersect: false
+      },
+      scales: {
+        y: {
+          border: { display: false },
+          grid: { 
+            color: setAlpha(themeColors.border, 0.5),
+            lineWidth: 1
+          },
+          ticks: { display: false }
+        },
+        x: {
+          grid: { display: false },
+          ticks: { color: themeColors.mutedForeground }
+        }
+      },
+      plugins: {
+        legend: {
+          display: false,
+        },
+        tooltip: {
+          enabled: false,
+          position: 'nearest',
+          external: externalTooltipHandler,
+        }
+      }
+    }
+  };
+
+  new Chart(ctx, config);
+
+  const chartData = [
+  { date: "2024-04-01", desktop: 222, mobile: 150 },
+  { date: "2024-04-02", desktop: 97, mobile: 180 },
+  { date: "2024-04-03", desktop: 167, mobile: 120 },
+  { date: "2024-04-04", desktop: 242, mobile: 260 },
+  { date: "2024-04-05", desktop: 373, mobile: 290 },
+  { date: "2024-04-06", desktop: 301, mobile: 340 },
+  { date: "2024-04-07", desktop: 245, mobile: 180 },
+  { date: "2024-04-08", desktop: 409, mobile: 320 },
+  { date: "2024-04-09", desktop: 59, mobile: 110 },
+  { date: "2024-04-10", desktop: 261, mobile: 190 },
+  { date: "2024-04-11", desktop: 327, mobile: 350 },
+  { date: "2024-04-12", desktop: 292, mobile: 210 },
+  { date: "2024-04-13", desktop: 342, mobile: 380 },
+  { date: "2024-04-14", desktop: 137, mobile: 220 },
+  { date: "2024-04-15", desktop: 120, mobile: 170 },
+  { date: "2024-04-16", desktop: 138, mobile: 190 },
+  { date: "2024-04-17", desktop: 446, mobile: 360 },
+  { date: "2024-04-18", desktop: 364, mobile: 410 },
+  { date: "2024-04-19", desktop: 243, mobile: 180 },
+  { date: "2024-04-20", desktop: 89, mobile: 150 },
+  { date: "2024-04-21", desktop: 137, mobile: 200 },
+  { date: "2024-04-22", desktop: 224, mobile: 170 },
+  { date: "2024-04-23", desktop: 138, mobile: 230 },
+  { date: "2024-04-24", desktop: 387, mobile: 290 },
+  { date: "2024-04-25", desktop: 215, mobile: 250 },
+  { date: "2024-04-26", desktop: 75, mobile: 130 },
+  { date: "2024-04-27", desktop: 383, mobile: 420 },
+  { date: "2024-04-28", desktop: 122, mobile: 180 },
+  { date: "2024-04-29", desktop: 315, mobile: 240 },
+  { date: "2024-04-30", desktop: 454, mobile: 380 },
+  { date: "2024-05-01", desktop: 165, mobile: 220 },
+  { date: "2024-05-02", desktop: 293, mobile: 310 },
+  { date: "2024-05-03", desktop: 247, mobile: 190 },
+  { date: "2024-05-04", desktop: 385, mobile: 420 },
+  { date: "2024-05-05", desktop: 481, mobile: 390 },
+  { date: "2024-05-06", desktop: 498, mobile: 520 },
+  { date: "2024-05-07", desktop: 388, mobile: 300 },
+  { date: "2024-05-08", desktop: 149, mobile: 210 },
+  { date: "2024-05-09", desktop: 227, mobile: 180 },
+  { date: "2024-05-10", desktop: 293, mobile: 330 },
+  { date: "2024-05-11", desktop: 335, mobile: 270 },
+  { date: "2024-05-12", desktop: 197, mobile: 240 },
+  { date: "2024-05-13", desktop: 197, mobile: 160 },
+  { date: "2024-05-14", desktop: 448, mobile: 490 },
+  { date: "2024-05-15", desktop: 473, mobile: 380 },
+  { date: "2024-05-16", desktop: 338, mobile: 400 },
+  { date: "2024-05-17", desktop: 499, mobile: 420 },
+  { date: "2024-05-18", desktop: 315, mobile: 350 },
+  { date: "2024-05-19", desktop: 235, mobile: 180 },
+  { date: "2024-05-20", desktop: 177, mobile: 230 },
+  { date: "2024-05-21", desktop: 82, mobile: 140 },
+  { date: "2024-05-22", desktop: 81, mobile: 120 },
+  { date: "2024-05-23", desktop: 252, mobile: 290 },
+  { date: "2024-05-24", desktop: 294, mobile: 220 },
+  { date: "2024-05-25", desktop: 201, mobile: 250 },
+  { date: "2024-05-26", desktop: 213, mobile: 170 },
+  { date: "2024-05-27", desktop: 420, mobile: 460 },
+  { date: "2024-05-28", desktop: 233, mobile: 190 },
+  { date: "2024-05-29", desktop: 78, mobile: 130 },
+  { date: "2024-05-30", desktop: 340, mobile: 280 },
+  { date: "2024-05-31", desktop: 178, mobile: 230 },
+  { date: "2024-06-01", desktop: 178, mobile: 200 },
+  { date: "2024-06-02", desktop: 470, mobile: 410 },
+  { date: "2024-06-03", desktop: 103, mobile: 160 },
+  { date: "2024-06-04", desktop: 439, mobile: 380 },
+  { date: "2024-06-05", desktop: 88, mobile: 140 },
+  { date: "2024-06-06", desktop: 294, mobile: 250 },
+  { date: "2024-06-07", desktop: 323, mobile: 370 },
+  { date: "2024-06-08", desktop: 385, mobile: 320 },
+  { date: "2024-06-09", desktop: 438, mobile: 480 },
+  { date: "2024-06-10", desktop: 155, mobile: 200 },
+  { date: "2024-06-11", desktop: 92, mobile: 150 },
+  { date: "2024-06-12", desktop: 492, mobile: 420 },
+  { date: "2024-06-13", desktop: 81, mobile: 130 },
+  { date: "2024-06-14", desktop: 426, mobile: 380 },
+  { date: "2024-06-15", desktop: 307, mobile: 350 },
+  { date: "2024-06-16", desktop: 371, mobile: 310 },
+  { date: "2024-06-17", desktop: 475, mobile: 520 },
+  { date: "2024-06-18", desktop: 107, mobile: 170 },
+  { date: "2024-06-19", desktop: 341, mobile: 290 },
+  { date: "2024-06-20", desktop: 408, mobile: 450 },
+  { date: "2024-06-21", desktop: 169, mobile: 210 },
+  { date: "2024-06-22", desktop: 317, mobile: 270 },
+  { date: "2024-06-23", desktop: 480, mobile: 530 },
+  { date: "2024-06-24", desktop: 132, mobile: 180 },
+  { date: "2024-06-25", desktop: 141, mobile: 190 },
+  { date: "2024-06-26", desktop: 434, mobile: 380 },
+  { date: "2024-06-27", desktop: 448, mobile: 490 },
+  { date: "2024-06-28", desktop: 149, mobile: 200 },
+  { date: "2024-06-29", desktop: 103, mobile: 160 },
+  { date: "2024-06-30", desktop: 446, mobile: 400 },
+]
+
+
+data = {
+  labels: chartData.map(d => d.date),
+  datasets: [{
+      label: 'Desktop',
+      data: chartData.map(d => d.desktop),
+      backgroundColor: themeColors.chart2,
+      borderWidth: 0,
+      borderRadius: 0, // Stacking usually looks better without individual radius
+    }, {
+      label: 'Mobile',
+      data: chartData.map(d => d.mobile),
+      backgroundColor: themeColors.chart1,
+      borderWidth: 0,
+      borderRadius: 0, // Stacking usually looks better without individual radius
+    }]
+};
+
+ctx = document.getElementById('chart-bar-interactive');
+
+// Restore helper function to format date for labels/tooltips
+const formatDateLabel = (dateString) => {
+  try {
+    const date = new Date(dateString + 'T00:00:00');
+    return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' }); // e.g., "Apr 1"
+  } catch (event) {
+    return dateString; // Fallback
+  }
+};
+
+// Restore data preparation with formatted date labels
+data = {
+  labels: chartData.map(d => formatDateLabel(d.date)),
+  datasets: [{
+      label: 'Desktop',
+      data: chartData.map(d => d.desktop),
+      backgroundColor: themeColors.chart4,
+      borderWidth: 0,
+      borderRadius: 0,
+    }, {
+      label: 'Mobile',
+      data: chartData.map(d => d.mobile),
+      backgroundColor: themeColors.chart5,
+      borderWidth: 0,
+      borderRadius: 0,
+    }]
+};
+
+config = {
+  type: 'bar',
+  data: data,
+  options: {
+    interaction: {
+      mode: 'index',
+      axis: 'x',
+      intersect: false
+    },
+    scales: {
+      y: {
+        stacked: true,
+        border: { display: false },
+        grid: { 
+          color: setAlpha(themeColors.border, 0.5),
+          lineWidth: 1
+        },
+        ticks: { display: false }
+      },
+      x: {
+        stacked: true,
+        grid: { display: false },
+        ticks: { 
+          color: themeColors.mutedForeground,
+          callback: function(value, index, ticks) {
+            const label = this.getLabelForValue(value);
+            return index % 7 === 0 ? label : null;
+          },
+          maxRotation: 0,
+          minRotation: 0
+        }
+      }
+    },
+    plugins: {
+      legend: {
+        display: false,
+      },
+      tooltip: {
+        enabled: false,
+        position: 'nearest',
+        external: externalTooltipHandler,
+      }
+    }
+  }
+};
+
+new Chart(ctx, config);
+
+// Same chart but with line chart
+// We start off from the previous config and just change the type to line
+
+ctx = document.getElementById('chart-line-interactive');
+
+  
+// Prepare data with formatted date labels AND offset for Mobile
+const desktopData = chartData.map(d => d.desktop + 400); // Store raw desktop data
+const mobileDataOffset = chartData.map(d => d.mobile); // Store offset mobile data
+
+// Prepare data with gradient background
+data = {
+  labels: chartData.map(d => formatDateLabel(d.date)),
+  datasets: [{
+      label: 'Desktop',
+      data: desktopData, 
+      borderColor: themeColors.chart1,
+      // Make backgroundColor scriptable
+      backgroundColor: function(context) { 
+        const chart = context.chart;
+        const { ctx, chartArea } = chart;
+        // Use the helper function defined above
+        return createGradient(ctx, chartArea, themeColors.chart1);
+      },
+      borderWidth: 1,
+      pointRadius: 0,
+      pointHoverRadius: 4,
+      pointHoverBackgroundColor: themeColors.chart1,
+      pointHoverBorderColor: themeColors.chart1,
+      fill: 'start' // Fill from the start (usually y=0 or axis baseline)
+    }, {
+      label: 'Mobile (Offset)', // Adjusted label
+      data: mobileDataOffset, 
+      borderColor: themeColors.chart2,
+      // Make backgroundColor scriptable
+      backgroundColor: function(context) {
+        const chart = context.chart;
+        const { ctx, chartArea } = chart;
+        // Use the helper function defined above
+        return createGradient(ctx, chartArea, themeColors.chart2);
+      },
+      borderWidth: 1,
+      pointRadius: 0,
+      pointHoverRadius: 4,
+      pointHoverBackgroundColor: themeColors.chart2,
+      pointHoverBorderColor: themeColors.chart2,
+      fill: 'start' 
+    }]
+};
+
+// Add the createGradient helper function before the data object
+function createGradient(ctx, chartArea, color) {
+  if (!chartArea) {
+    return setAlpha(color, 0.1); // Fallback during initial setup
+  }
+  const gradient = ctx.createLinearGradient(0, chartArea.top, 0, chartArea.bottom);
+  gradient.addColorStop(0, setAlpha(color, 0.5)); // Start color at top
+  gradient.addColorStop(1, setAlpha(color, 0));   // End color (transparent) at bottom
+  return gradient;
+}
+
+// Calculate min/max for Y-axis scaling using the PLOTTED data
+const allPlottedValues = [...desktopData, ...mobileDataOffset]; // Combine actual plotted values
+const dataMin = Math.min(...allPlottedValues);
+const dataMax = Math.max(...allPlottedValues);
+const yPadding = (dataMax - dataMin) * 0.1; // Add 10% padding
+
+config = {
+  type: 'line',
+  data: data,
+  options: {
+    maintainAspectRatio: false,
+    aspectRatio: 1,
+    tension: 0.4, // Keep tension from original line config
+    interaction: {
+      mode: 'index', // Use 'index' mode for better hover on multiple lines
+      axis: 'x',
+      intersect: false
+    },
+    scales: {
+      y: {
+        border: { display: false },
+        grid: { 
+          color: setAlpha(themeColors.border, 0.5),
+          lineWidth: 1
+        },
+        ticks: { display: false },
+        // Set min and max for Y-axis
+        min: Math.max(0, dataMin - yPadding), // Ensure min is not negative
+        max: dataMax + yPadding
+      },
+      x: {
+        grid: { display: false },
+        ticks: { 
+          color: themeColors.mutedForeground,
+          // Restore callback to reduce ticks
+          callback: function(value, index, ticks) {
+            const label = this.getLabelForValue(value);
+            return index % 7 === 0 ? label : null;
+          },
+          maxRotation: 0,
+          minRotation: 0
+        }
+      }
+    },
+    plugins: {
+      legend: { display: false },
+      tooltip: {
+        enabled: false,
+        position: 'nearest',
+        external: externalTooltipHandler,
+      }
+    }
+  }
+};
+    
+
+new Chart(ctx, config);
+
+
+const chartDataDoughnut = [
+  { browser: "chrome", visitors: 275, fill: themeColors.chart1 }, // Use resolved colors
+  { browser: "safari", visitors: 200, fill: themeColors.chart2 },
+  { browser: "firefox", visitors: 287, fill: themeColors.chart3 },
+  { browser: "edge", visitors: 173, fill: themeColors.chart4 },
+  { browser: "other", visitors: 190, fill: themeColors.chart5 },
+]
+
+// Prepare data for the doughnut chart
+const doughnutData = {
+  labels: chartDataDoughnut.map(d => d.browser),
+  datasets: [{
+    label: 'Visitors by Browser',
+    data: chartDataDoughnut.map(d => d.visitors),
+    backgroundColor: chartDataDoughnut.map(d => d.fill),
+    borderColor: themeColors.background, // Use background for border
+    borderWidth: 0, // Add border between segments
+    hoverBorderColor: themeColors.background,
+    hoverBorderWidth: 0
+  }]
+};
+
+// Configure the doughnut chart
+const doughnutConfig = {
+  type: 'doughnut',
+  data: doughnutData,
+  options: {
+    cutout: '70%', // Adjust hole size
+    plugins: {
+      legend: {
+        display: false, // Hide default legend
+      },
+      tooltip: {
+        enabled: false, // Keep this false as we use external handler
+        position: 'nearest', // Keep this for external handler logic
+        external: externalTooltipHandler, // Use the existing handler
+      },
+      centerText: {} // Keep the custom plugin for center text
+    }
+  }
+};
+
+// Assume you have a canvas with id="chart-doughnut" in your HTML
+const doughnutCtx = document.getElementById('chart-doughnut').getContext('2d');
+new Chart(doughnutCtx, doughnutConfig);
+</script>

docs/src/components/combobox.njk

@@ -6,8 +6,19 @@ toc:
   - label: Usage
     id: usage
     children:
-      - label: HTML + Javascript
-        id: usage-default
+      - label: HTML + JavaScript
+        id: usage-html-js
+        children:
+          - label: "Step 1: Include the JavaScript files"
+            id: usage-html-js-1
+          - label: "Step 2: Add your combobox HTML"
+            id: usage-html-js-2
+          - label: HTML structure
+            id: usage-html-js-3
+          - label: JavaScript events
+            id: usage-html-js-4
+          - label: JavaScript methods
+            id: usage-html-js-5
       - label: Jinja and Nunjucks
         id: usage-macro
   - label: Examples
@@ -29,8 +40,7 @@ toc:
   trigger_attrs={"class": "w-[200px]"},
   listbox_attrs={"data-empty": "No framework found."},
   is_combobox=true,
-  search_placeholder="Search framework...",
-  register_on=["alpine:init", "htmx:afterSwap"]
+  search_placeholder="Search framework..."
 ) %}
   {% for framework in options_frameworks %}
     <div role="option" data-value="{{ framework }}">{{ framework }}</div>
@@ -38,42 +48,25 @@ toc:
 {% endcall %}
 {% endset %}
 
-{% set code_script %}
-<script>
-{% fetchCode "src/js/select.js" %}
-
-document.addEventListener('alpine:init', () => {
-  window.basecoat.registerSelect(Alpine);
-});
-</script>
-{% endset %}
-
-{{ code_preview("combobox", code_script | prettyHtml ~ code_html | prettyHtml) }}
+{{ code_preview("combobox", code_html | prettyHtml) }}
 
 <h2 id="usage"><a href="#usage">Usage</a></h2>
 
-<h3 id="usage-default"><a href="#usage-default">HTML + Javascript</a></h3>
+<h3 id="usage-html-js"><a href="#usage-html-js">HTML + JavaScript</a></h3>
 
-<div class="alert my-6">
-  {% lucide "circle-alert" %}
-  <h2>This component requires Javascript.</h2>
-</div>
+<h4 id="usage-html-js-1"><a href="#usage-html-js-1">Step 1: Include the JavaScript files</a></h4>
 
-<div class="prose">
-  <p>Combobox uses the same Alpine.js code and markup as the <a href="/components/select">Select</a> component, the only difference being the search box at the top of the listbox.</p>
-  <p>You can set up a few additional options on the <code>&lt;div data-popover&gt;</code> element:</p>
-  <ul>
-    <li><code>data-side</code> can be set to <code>top</code>, <code>bottom</code>, <code>left</code>, or <code>right</code> to change the side of the popover.</li>
-    <li><code>data-align</code> can be set to <code>start</code>, <code>center</code>, or <code>end</code> to change the alignment of the popover.</li>
-    <li><code>data-empty</code> to set up the message when the search is empty.</li>
-  </ul>
+<section class="prose">
+  <p>You can either <a href="/installation/#install-cdn-all">include the JavaScript file for all the components</a>, or just the one for this component by adding this to the <code>&lt;head&gt;</code> of your page:</p>
+</section>
 
-  <p>You can include the Javascript code provided below, load it as an individual file or use the CLI. Some Alpine.js properties are also required on certain elements (e.g. <code class="text-xs">x-bind</code>, <code class="text-xs">x-data</code>, <code class="text-xs">@click</code>).</p>
-</div>
+{% set code_script %}<script src="https://cdn.jsdelivr.net/npm/basecoat-css@{{ pkg.version }}/dist/js/basecoat.min.js" defer></script>
+<script src="https://cdn.jsdelivr.net/npm/basecoat-css@{{ pkg.version }}/dist/js/select.min.js" defer></script>{% endset %}
+{{ code_block(code_script | prettyHtml, "html") }}
 
 <div class="flex flex-wrap gap-2 my-6">
   <a class="badge-outline" href="/installation/#install-js">
-    Components with Javascript
+    Components with JavaScript
     {% lucide "arrow-right" %}
   </a>
   <a class="badge-outline" href="/installation/#install-cli">
@@ -81,17 +74,105 @@ document.addEventListener('alpine:init', () => {
     {% lucide "arrow-right" %}
   </a>
   <a class="badge-outline" href="https://github.com/hunvreus/basecoat/blob/main/src/js/select.js" target="_blank">
-    Individual JS file (select.js)
+    select.js
     {% lucide "arrow-right" %}
   </a>
 </div>
 
-{% from "tabs.njk" import tabs %}
-{% set tabsets = [
-  { tab: "HTML", panel: code_block(code_html | prettyHtml, class="") },
-  { tab: "Javascipt (Alpine.js)", panel: code_block(code_script | prettyHtml, class="") }
-] %}
-{{ tabs(id="combobox", tabsets=tabsets) }}
+<h4 id="usage-html-js-2"><a href="#usage-html-js-2">Step 2: Add your combobox HTML</a></h4>
+
+<section class="prose">
+  <p>Combobox uses the same markup and JavaScript as the <a href="/components/select#usage-html-js">Select component</a>, the only difference being the search box at the top of the listbox:</p>
+</section>
+
+{{ code_block(code_html | prettyHtml, "html") }}
+
+<h4 id="usage-html-js-3"><a href="#usage-html-js-3">HTML structure</a></h4>
+
+<section class="prose">
+  <dl>
+    <dt><code class="highlight language-html">&lt;div class="select"&gt;</code></dt>
+    <dd>Wraps around the entire component.
+      <dl>
+        <dt><code class="highlight language-html">&lt;button type="button" popovertarget="{ POPOVER_ID }"&gt;</code></dt>
+        <dd>
+          <p>The trigger to open the popover, can also have the following attributes:</p>
+          <ul>
+            <li><code>id="{BUTTON_ID}"</code>: linked to by the <code>aria-labelledby</code> attribute of the listbox.</li>
+            <li><code>aria-haspopup="listbox"</code>: indicates that the button opens a listbox.</li>
+            <li><code>aria-controls="{ LISTBOX_ID }"</code>: points to the listbox's id.</li>
+            <li><code>aria-expanded="false"</code>: tracks the popover's state.</li>
+            <li><code>aria-activedescendant="{ OPTION_ID }"</code>: points to the active option's id.</li>
+          </ul>
+        </dd>
+        <dt><code class="highlight language-html">&lt;div popover class="popover" id="{ POPOVER_ID }"&gt;</code></dt>
+        <dd>As with the <a href="/components/popover">Popover</a> component, you can set up the side and alignment of the popover using the <code>data-side</code> and <code>data-align</code> attributes.
+        <dl>
+          <dt><code class="highlight language-html">&lt;header&gt;</code></dt>
+          <dd>Contains the search input to filter the options in the listbox.</dd>
+          <dt><code class="highlight language-html">&lt;div role="listbox"&gt;</code></dt>
+          <dd>The listbox containing the options. Should have the following attributes:
+            <ul>
+              <li><code>id="{ LISTBOX_ID }"</code>: refered to by the <code>aria-controls</code> attribute of the trigger.</li>
+              <li><code>aria-labelledby="{ BUTTON_ID }"</code>: linked to by the button's <code>id</code> attribute.</li>
+            </ul>
+            <dl>
+              <dt><code class="highlight language-html">&lt;div role="option" data-value="{ VALUE }"&gt;</code></dt>
+              <dd>Option that can be selected. Should have a unique id if you use the <code>aria-activedescendant</code> attribute on the trigger. Optional attributes:
+                <ul>
+                  <li><code>data-filter</code>: custom text used for filtering (if different from displayed content, e.g., <code>data-filter="united states"</code>)</li>
+                  <li><code>data-keywords</code>: additional keywords for enhanced filtering (e.g., <code>data-keywords="bread fruit"</code>)</li>
+                  <li><code>data-force</code>: forces the option to always display, regardless of filter (e.g., <code>data-force</code>)</li>
+                  <li><code>aria-disabled="true"</code>: marks option as disabled (excluded from selection and keyboard navigation)</li>
+                </ul>
+              </dd>
+              <dt><code class="highlight language-html">&lt;hr role="separator"&gt;</code> <span class="badge-secondary">Optional</span></dt>
+              <dd>Separator between groups/options.</dd>
+              <dt><code class="highlight language-html">&lt;div role="group"&gt;</code> <span class="badge-secondary">Optional</span></dt>
+              <dd>Group of options, can have a <code>aria-labelledby</code> attribute to link to a heading.</dd>
+              <dt><code class="highlight language-html">&lt;span role="heading"&gt;</code></dt>
+              <dd>Group heading, must have an <code>id</code> attribute if you use the <code>aria-labelledby</code> attribute on the group.</dd>
+            </dl>
+          </dd>
+        </dl>
+      </dl>
+    </dd>
+    <dt><code class="highlight language-html">&lt;input type="hidden" name="{ NAME }" value="{ VALUE }"&gt;</code> <span class="badge-secondary">Optional</span></dt>
+    <dd>The hidden input that holds the value of the field (if needed).</dd>
+  </dl>
+</section>
+
+<h4 id="usage-html-js-4"><a href="#usage-html-js-4">JavaScript events</a></h4>
+
+<section class="prose">
+  <dl>
+    <dt><code>basecoat:initialized</code></dt>
+    <dd>Once the component is fully initialized, it dispatches a custom (non-bubbling) <code>basecoat:initialized</code> event on itself.</dd>
+    <dt><code>basecoat:popover</code></dt>
+    <dd>When the popover opens, the component dispatches a custom (non-bubbling) <code>basecoat:popover</code> event on <code>document</code>. Other popover components (Combobox, Dropdown Menu, Popover and Select) listen for this to close any open popovers.</dd>
+    <dt><code>change</code></dt>
+    <dd>When the selected value changes, the component dispatches a custom (bubbling) <code>change</code> event on itself, with the selected value in <code>event.detail</code> (e.g. <code>{detail: {value: "something"}}</code>).</dd>
+  </dl>
+</section>
+
+<h4 id="usage-html-js-5"><a href="#usage-html-js-4">JavaScript methods</a></h4>
+
+<section class="prose">
+  <dl>
+    <dt><code>selectByValue</code></dt>
+    <dd>
+      <p>You can call this method on the component after it is initialized to select an option by value (i.e. the option with the matching <code>data-value</code> attribute):</p>
+
+{% set code_script %}<script>
+  const comboboxComponent = document.querySelector('#my-combobox');
+  comboboxComponent.addEventListener('basecoat:initialized', () => {
+    comboboxComponent.selectByValue('apple');
+  });
+</script>{% endset %}
+{{ code_block(code_script | prettyHtml, "html") }}
+    </dd>
+  </dl>
+</section>
 
 <h3 id="usage-macro"><a href="#usage-macro">Jinja and Nunjucks</a></h3>
 
@@ -168,16 +249,15 @@ document.addEventListener('alpine:init', () => {
 {% set code %}
 {% call select(
   trigger_attrs={"class": "w-[200px]"},
-  content_attrs={"class": "w-72"},
+  popover_attrs={"class": "w-72"},
   listbox_attrs={"data-empty": "No timezone found."},
   is_combobox=true,
-  search_placeholder="Search timezone...",
-  register_on=["alpine:init", "htmx:afterSwap"]
+  search_placeholder="Search timezone..."
 ) %}
   <div class="max-h-64 overflow-y-auto scrollbar">
     {% for group in options_timezones %}
       <div role="group" aria-labelledby="demo-combobox-timezones-group-{{ loop.index0 }}">
-        <span id="demo-combobox-timezones-group-{{ loop.index0 }}" role="heading">{{ group.label }}</span>
+        <div role="heading" id="demo-combobox-timezones-group-{{ loop.index0 }}">{{ group.label }}</div>
         {% for timezone in group.timezones %}
           <div role="option" data-value="{{ timezone.value}}">
             {{ timezone.label }}
@@ -204,8 +284,7 @@ document.addEventListener('alpine:init', () => {
   listbox_attrs={"data-empty": "No framework found."},
   is_combobox=true,
   search_placeholder="Search framework...",
-  register_on=["alpine:init", "htmx:afterSwap"],
-  content_attrs={"data-side": "top"}
+  popover_attrs={"data-side": "top"}
 ) %}
   {% for framework in options_frameworks %}
     <div role="option" data-value="{{ framework }}">{{ framework }}</div>

docs/src/components/command.njk

@@ -0,0 +1,288 @@
+---
+layout: layouts/page.njk
+title: Command
+description: Fast, composable command menu for quick navigation and actions.
+toc:
+  - label: Usage
+    id: usage
+    children:
+      - label: HTML + JavaScript
+        id: usage-html-js
+        children:
+          - label: "Step 1: Include the JavaScript files"
+            id: usage-html-js-1
+          - label: "Step 2: Add your command HTML"
+            id: usage-html-js-2
+          - label: HTML structure
+            id: usage-html-js-3
+          - label: JavaScript events
+            id: usage-html-js-4
+      - label: Jinja and Nunjucks
+        id: usage-macro
+  - label: Examples
+    id: examples
+    children:
+      - label: Dialog
+        id: example-dialog
+---
+
+{% from "macros/code_preview.njk" import code_preview %}
+{% from "macros/code_block.njk" import code_block %}
+{% from "command.njk" import command, command_dialog %}
+
+{% macro command_items(suggestions_id="suggestions", settings_id="settings") %}
+<div role="group" aria-labelledby="{{ suggestions_id }}">
+  <span role="heading" id="{{ suggestions_id }}">Suggestions</span>
+  <div role="menuitem" onclick="console.log('Open calendar')">
+    {% lucide "calendar" %}
+    <span>Calendar</span>
+  </div>
+  <div role="menuitem" onclick="console.log('Search emoji')">
+    {% lucide "smile" %}
+    <span>Search Emoji</span>
+  </div>
+  <div role="menuitem" aria-disabled="true">
+    {% lucide "calculator" %}
+    <span>Calculator</span>
+  </div>
+</div>
+<hr role="separator" />
+<div role="group" aria-labelledby="{{ settings_id }}">
+  <span role="heading" id="{{ settings_id }}">Settings</span>
+  <div role="menuitem" onclick="console.log('Open profile')" data-filter="Profile">
+    {% lucide "user" %}
+    <span>Profile</span>
+    <kbd class="ml-auto text-muted-foreground bg-transparent tracking-widest">⌘P</kbd>
+  </div>
+  <div role="menuitem" onclick="console.log('Open billing')" data-filter="Billing">
+    {% lucide "credit-card" %}
+    <span>Billing</span>
+    <kbd class="ml-auto text-muted-foreground bg-transparent tracking-widest">⌘B</kbd>
+  </div>
+  <div role="menuitem" onclick="console.log('Open settings')" data-filter="Settings">
+    {% lucide "settings" %}
+    <span>Settings</span>
+    <kbd class="ml-auto text-muted-foreground bg-transparent tracking-widest">⌘S</kbd>
+  </div>
+</div>
+{% endmacro %}
+
+{% set code_standalone %}
+{% call command(
+  id="demo-command-standalone",
+  main_attrs={ "class": "rounded-lg border shadow-md" }
+) %}
+{{ command_items("suggestions", "settings") }}
+{% endcall %}
+{% endset %}
+
+{{ code_preview("command-standalone", code_standalone | prettyHtml, class=" w-full max-w-[450px]") }}
+
+<h2 id="usage"><a href="#usage">Usage</a></h2>
+
+<h3 id="usage-html-js"><a href="#usage-html-js">HTML + JavaScript</a></h3>
+
+<h4 id="usage-html-js-1"><a href="#usage-html-js-1">Step 1: Include the JavaScript files</a></h4>
+
+<section class="prose">
+  <p>You can either <a href="/installation/#install-cdn-all">include the JavaScript file for all the components</a>, or just the one for this component by adding this to the <code>&lt;head&gt;</code> of your page:</p>
+</section>
+
+{% set code_script %}<script src="https://cdn.jsdelivr.net/npm/basecoat-css@{{ pkg.version }}/dist/js/basecoat.min.js" defer></script>
+<script src="https://cdn.jsdelivr.net/npm/basecoat-css@{{ pkg.version }}/dist/js/command.min.js" defer></script>{% endset %}
+{{ code_block(code_script | prettyHtml, "html") }}
+
+<div class="flex flex-wrap gap-2 my-6">
+  <a class="badge-outline" href="/installation/#install-js">
+    Components with JavaScript
+    {% lucide "arrow-right" %}
+  </a>
+  <a class="badge-outline" href="/installation/#install-cli">
+    Use the CLI
+    {% lucide "arrow-right" %}
+  </a>
+  <a class="badge-outline" href="https://github.com/hunvreus/basecoat/blob/main/src/js/command.js" target="_blank">
+    command.js
+    {% lucide "arrow-right" %}
+  </a>
+</div>
+
+<h4 id="usage-html-js-2"><a href="#usage-html-js-2">Step 2: Add your command HTML</a></h4>
+
+<section class="prose">
+  <p>You can use the command menu standalone:</p>
+</section>
+
+{{ code_block(code_standalone | prettyHtml, "html") }}
+
+<section class="prose">
+  <p>Wrap the command menu in a <code>&lt;dialog class="command-dialog"&gt;</code> to display in a dialog:</p>
+</section>
+
+{% set code_dialog %}
+<dialog class="command-dialog" aria-label="Command menu">
+  <div class="command">
+    <!-- Regular command content: header, menu, etc. -->
+  </div>
+</dialog>
+{% endset %}
+
+{{ code_block(code_dialog | prettyHtml, "html") }}
+
+<h4 id="usage-html-js-3"><a href="#usage-html-js-3">HTML structure</a></h4>
+
+<section class="prose">
+  <dl>
+    <dt><code class="highlight language-html">&lt;dialog class="command-dialog"&gt;</code> <span class="badge-secondary">Optional</span></dt>
+    <dd>For dialog variant, wraps a <code>&lt;div class="command"&gt;</code> to display as a modal. Uses native <code>&lt;dialog&gt;</code> behavior and requires <code>aria-label</code> or <code>aria-labelledby</code> for accessibility.
+      <dl>
+        <dt><code class="highlight language-html">&lt;div class="command"&gt;</code></dt>
+        <dd>Wraps around the entire command component. Can be used standalone or inside a dialog.
+          <dl>
+            <dt><code class="highlight language-html">&lt;header&gt;</code></dt>
+            <dd>Contains the search input to filter command options.
+              <dl>
+                <dt><code class="highlight language-html">&lt;input type="text"&gt;</code></dt>
+                <dd>The search input. Should have:
+                  <ul>
+                    <li><code>role="combobox"</code>: indicates the input controls a menu with filtering</li>
+                    <li><code>aria-expanded="true"</code>: the menu is always expanded</li>
+                    <li><code>aria-controls="{ MENU_ID }"</code>: points to the menu's id</li>
+                  </ul>
+                </dd>
+              </dl>
+            </dd>
+            <dt><code class="highlight language-html">&lt;div role="menu"&gt;</code></dt>
+            <dd>The menu containing the command items. Should have <code>id="{ MENU_ID }"</code> refered to by the input's <code>aria-controls</code> attribute.
+              <dl>
+                <dt><code class="highlight language-html">&lt;div role="menuitem"&gt;</code> or <code class="highlight language-html">&lt;a role="menuitem"&gt;</code></dt>
+                <dd>Command item that triggers an action when clicked. Use <code>&lt;a&gt;</code> for navigation links, or <code>&lt;div&gt;</code> for actions. In a command-dialog, clicking a menuitem automatically closes the dialog unless the <code>data-keep-command-open</code> attribute is present. Optional attributes:
+                  <ul>
+                    <li><code>href</code>: If present on an <code>&lt;a&gt;</code>, the item navigates to that URL</li>
+                    <li><code>data-filter</code>: custom text used for filtering (if different from displayed content, e.g., <code>data-filter="calendar event"</code>)</li>
+                    <li><code>data-keywords</code>: additional keywords for enhanced filtering (e.g., <code>data-keywords="calendar event date"</code>)</li>
+                    <li><code>data-force</code>: forces the item to always display, regardless of filter (e.g., <code>data-force</code>)</li>
+                    <li><code>aria-disabled="true"</code>: marks item as disabled (excluded from keyboard navigation and filtering)</li>
+                  </ul>
+                </dd>
+                <dt><code class="highlight language-html">&lt;hr role="separator"&gt;</code> <span class="badge-secondary">Optional</span></dt>
+                <dd>Separator between groups/items. Hidden when filtering is active.</dd>
+                <dt><code class="highlight language-html">&lt;div role="group"&gt;</code> <span class="badge-secondary">Optional</span></dt>
+                <dd>Group of items, can have <code>aria-labelledby</code> attribute to link to a heading.</dd>
+                <dt><code class="highlight language-html">&lt;span role="heading"&gt;</code></dt>
+                <dd>Group heading, must have an <code>id</code> attribute if you use the <code>aria-labelledby</code> attribute on the group.</dd>
+              </dl>
+            </dd>
+          </dl>
+        </dd>
+      </dl>
+    </dd>
+  </dl>
+</section>
+
+<h4 id="usage-html-js-4"><a href="#usage-html-js-4">JavaScript events</a></h4>
+
+<section class="prose">
+  <dl>
+    <dt><code>basecoat:initialized</code></dt>
+    <dd>Once the component is fully initialized, it dispatches a custom (non-bubbling) <code>basecoat:initialized</code> event on itself.</dd>
+  </dl>
+</section>
+
+<h3 id="usage-macro"><a href="#usage-macro">Jinja and Nunjucks</a></h3>
+
+<div class="prose">
+  <p>You can use the <code class="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-xs">command()</code> or <code class="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-xs">command_dialog()</code> Nunjucks or Jinja macros for this component.</p>
+</div>
+
+<div class="flex flex-wrap gap-2 my-6">
+  <a class="badge-outline" href="/installation/#install-macros" target="_blank">
+    Use Nunjucks or Jinja macros
+    {% lucide "arrow-right" %}
+  </a>
+  <a class="badge-outline" href="https://github.com/hunvreus/basecoat/blob/main/src/jinja/command.html.jinja" target="_blank">
+    Jinja macro
+    {% lucide "arrow-right" %}
+  </a>
+  <a class="badge-outline" href="https://github.com/hunvreus/basecoat/blob/main/src/nunjucks/command.njk" target="_blank">
+    Nunjucks macro
+    {% lucide "arrow-right" %}
+  </a>
+</div>
+
+{% set raw_code %}{% raw %}{% call command() %}
+  <div role="menuitem">
+    <svg>...</svg>
+    <span>Calendar</span>
+  </div>
+  <div role="menuitem" data-keywords="config preferences">
+    <svg>...</svg>
+    <span>Settings</span>
+  </div>
+{% endcall %}{% endraw %}{% endset %}
+{{ code_block(raw_code, "jinja") }}
+
+<section class="prose">
+  <p>You can also use the <code>items</code> parameter to pass an array of items:</p>
+</section>
+
+{% set icon_calendar %}{% lucide "calendar" %}{% endset %}
+{% set icon_settings %}{% lucide "settings" %}{% endset %}
+{% set raw_code_items %}{% raw %}{% set icon_calendar %}{% lucide "calendar" %}{% endset %}
+{% set icon_settings %}{% lucide "settings" %}{% endset %}
+{% set items = [
+  { type: "group", label: "Suggestions", items: [
+    { label: "Calendar", icon: icon_calendar, keywords: "date event" },
+    { label: "Search Emoji", icon: icon_settings },
+    { label: "Calculator", disabled: true }
+  ]},
+  { type: "separator" },
+  { type: "group", label: "Settings", items: [
+    { label: "Profile", url: "/profile", icon: icon_settings, keywords: "user account" },
+    { label: "Billing", url: "/billing", icon: icon_settings },
+    { label: "Settings", url: "/settings", icon: icon_settings }
+  ]}
+] %}
+
+{% call command(items=items) %}{% endcall %}{% endraw %}{% endset %}
+{{ code_block(raw_code_items, "jinja") }}
+
+<h2 id="examples"><a href="#examples">Examples</a></h2>
+
+<h3 id="example-dialog"><a href="#example-dialog">Dialog</a></h3>
+
+<section class="prose">
+  <p>You can use some simple JavaScript to open the command menu with a keyboard shortcut (in this case <kbd class="kbd">⌘J</kbd>).</p>
+</section>
+
+{% set code_dialog %}
+<button
+  type="button"
+  class="btn-outline"
+  onclick="document.getElementById('demo-command-dialog').showModal()"
+>
+  Open command menu
+  <kbd class="kbd">⌘J</kbd>
+</button>
+
+{% call command_dialog(id="demo-command-dialog") %}
+{{ command_items("cmd-suggestions", "cmd-settings") }}
+{% endcall %}
+
+<script>
+  document.addEventListener('keydown', (e) => {
+    if ((e.metaKey || e.ctrlKey) && e.key === 'j') {
+      e.preventDefault();
+      const dialog = document.getElementById('demo-command-dialog');
+      if (dialog.open) {
+        dialog.close();
+      } else {
+        dialog.showModal();
+        dialog.querySelector('header input')?.focus();
+      }
+    }
+  });
+</script>
+{% endset %}
+
+{{ code_preview("command-dialog", code_dialog | prettyHtml) }}

docs/src/components/dialog.njk

@@ -6,8 +6,8 @@ toc:
   - label: Usage
     id: usage
     children:
-      - label: HTML + Javascript
-        id: usage-default
+      - label: HTML
+        id: usage-html
       - label: Jinja and Nunjucks
         id: usage-macro
   - label: Examples
@@ -23,24 +23,22 @@ toc:
 
 {% set code_html %}
 {% set footer %}
-  <button class="btn-outline" @click="open = false">Cancel</button>
-  <button class="btn" @click="open = false">Save changes</button>
+  <button class="btn-outline" onclick="this.closest('dialog').close()">Cancel</button>
+  <button class="btn" onclick="this.closest('dialog').close()">Save changes</button>
 {% endset %}
 {% call dialog(
   id="demo-dialog-edit-profile",
   title="Edit profile",
   description="Make changes to your profile here. Click save when you're done.",
-  main_attrs={"x-ref": "myDialog"},
   trigger="Edit Profile",
   trigger_attrs={"class": "btn-outline"},
-  content_attrs={"class": "w-full sm:max-w-[425px] max-h-[612px]"},
-  footer=footer,
-  register_on=["alpine:init", "htmx:afterSwap"]
+  dialog_attrs={"class": "w-full sm:max-w-[425px] max-h-[612px]"},
+  footer=footer
 ) %}
 <form class="form grid gap-4">
   <div class="grid gap-3">
     <label for="demo-dialog-edit-profile-name">Name</label>
-    <input type="text" value="Pedro Duarte" id="demo-dialog-edit-profile-name" x-ref="focusOnOpen" />
+    <input type="text" value="Pedro Duarte" id="demo-dialog-edit-profile-name" autofocus/>
   </div>
   <div class="grid gap-3">
     <label for="demo-dialog-edit-profile-username">Username</label>
@@ -50,76 +48,52 @@ toc:
 {% endcall %}
 {% endset %}
 
-{% set code_script %}
-<script>
-{% fetchCode "src/js/dialog.js" %}
-
-document.addEventListener('alpine:init', () => {
-  window.basecoat.registerDialog(Alpine);
-});
-</script>
-{% endset %}
-
-{{ code_preview("dialog", code_script | prettyHtml ~ code_html | prettyHtml) }}
+{{ code_preview("dialog", code_html | prettyHtml) }}
 
 <h2 id="usage"><a href="#usage">Usage</a></h2>
 
-<h3 id="usage-default"><a href="#usage-default">HTML + Javascript</a></h3>
+<h3 id="usage-html"><a href="#usage-html">HTML</a></h3>
 
-<div class="alert my-6">
-  {% lucide "circle-alert" %}
-  <h2>This component requires Javascript.</h2>
-</div>
+{{ code_block(code_html | prettyHtml, class="") }}
 
 <section class="prose">
-  <p>The component is structured as such:</p>
-  <ul>
-    <li>A <code>&lt;div class="dialog"&gt;</code> which wraps around the entire component and holds it state (e.g. open/close).</li>
-    <li>A <code>&lt;button&gt;</code> that acts as the trigger to open or close the popover.</li>
-    <li>A <code>&lt;div role="dialog"&gt;</code> that holds the dialog itself. It also acts as the backdrop for the dialog.</li>
-    <li>Inside of it, we have:
+  <p>The component has the following HTML structure:</p>
+  <dl>
+    <dt><code class="highlight language-html">&lt;button type="button"&gt;</code> <span class="badge-secondary">Optional</span></dt>
+    <dd>The trigger button to open the dialog (using <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/showModal" target="_blank">the native <code>showModal()</code> method</a>).</dd>
+    <dt><code class="highlight language-html">&lt;dialog class="dialog" id="{ DIALOG_ID }"&gt;</code></dt>
+    <dd>Wraps the whole component and acts as the backdrop. It can also have the following attributes:
       <ul>
-        <li>A <code>&lt;header&gt;</code> that contains the title (<code>&lt;h2&gt;</code>) and description (<code>&lt;p&gt;</code>) of the dialog.</li>
-        <li>A <code>&lt;section&gt;</code> for the content.</li>
-        <li>A <code>&lt;footer&gt;</code> that usually contains actions.</li>
-        <li>A close <code>&lt;button&gt;</code>.</li>
+        <li><code>aria-labelledby="{ TITLE_ID }"</code>: linked to by the <code>aria-labelledby</code> attribute of the <code>&lt;dialog&gt;</code>.</li>
+        <li><code>aria-describedby="{ DESCRIPTION_ID }"</code>: linked to by the <code>aria-describedby</code> attribute of the <code>&lt;dialog&gt;</code>.</li>
+        <li><code>onclick</code>: closes the dialog when the backdrop is clicked.</li>
       </ul>
-    </li>
-  </ul>
-  <p>You can include the Javascript code provided below, load it as an individual file or use the CLI. Some Alpine.js properties are also required on certain elements (e.g. <code class="text-xs">x-bind</code>, <code class="text-xs">x-data</code>, <code class="text-xs">@click</code>).</p>
+      <dl>
+        <dt><code class="highlight language-html">&lt;div&gt;</code></dt>
+        <dd>Wraps the content of the dialog.
+          <dl>
+            <dt><code class="highlight language-html">&lt;header&gt;</code></dt>
+            <dd>Contains the header for the dialog:
+              <dl>
+                <dt><code class="highlight language-html">&lt;h2&gt;</code></dt>
+                <dd>The title of the dialog, must have an <code>id</code> if you use the <code>aria-labelledby</code> attribute on the <code>&lt;dialog&gt;</code>.</dd>
+                <dt><code class="highlight language-html">&lt;p&gt;</code> <span class="badge-secondary">Optional</span></dt>
+                <dd>The description of the dialog, must have an <code>id</code> if you use the <code>aria-describedby</code> attribute on the <code>&lt;dialog&gt;</code>.</dd>
+              </dl>
+            </dd>
+            <dt><code class="highlight language-html">&lt;section&gt;</code> <span class="badge-secondary">Optional</span></dt>
+            <dd>For the content.</dd>
+            <dt><code class="highlight language-html">&lt;footer&gt;</code> <span class="badge-secondary">Optional</span></dt>
+            <dd>Usually contains actions.</dd>
+            <dt><code class="highlight language-html">&lt;button type="button" onclick="this.closest('dialog').close()"&gt;</code> <span class="badge-secondary">Optional</span></dt>
+            <dd>A button to close the dialog. Alternatively, you can wrap a button in a <code>&lt;form method="dialog"&gt;</code> element.</dd>
+          </dl>
+        </dd>
+      </dl>
+    </dd>
+  </dl>
 </section>
 
-<div class="flex flex-wrap gap-2 my-6">
-  <a class="badge-outline" href="/installation/#install-js">
-    Components with Javascript
-    {% lucide "arrow-right" %}
-  </a>
-  <a class="badge-outline" href="/installation/#install-cli">
-    Use the CLI
-    {% lucide "arrow-right" %}
-  </a>
-  <a class="badge-outline" href="https://github.com/hunvreus/basecoat/blob/main/src/js/dialog.js" target="_blank">
-    Individual JS file (dialog.js)
-    {% lucide "arrow-right" %}
-  </a>
-</div>
-
-{% from "tabs.njk" import tabs %}
-{% set tabsets = [
-  { tab: "HTML", panel: code_block(code_html | prettyHtml, class="") },
-  { tab: "Javascipt (Alpine.js)", panel: code_block(code_script | prettyHtml, class="") }
-] %}
-{{ tabs(id="combobox", tabsets=tabsets) }}
-
-<section class="prose">
-  <p>The component will dispatch <code>dialog:opened</code> and <code>dialog:closed</code> events when the dialog is opened or closed. You can also dispatch <code>dialog:open</code> and <code>dialog:close</code> events to open or close the dialog programmatically. You will need the element to have an <code>id</code> to be able to target it (e.g. <code>&lt;div id="my-dialog" class="dialog"&gt;</code>):</p>
-</section>
-
-{% set code_dispatch %}<button type="button" x-init @click="$dispatch('dialog:open', { id: 'my-dialog' })">
-  Open #my-dialog
-</button>{% endset %}
-{{ code_block(code_dispatch | prettyHtml, "html") }}
-
 <h3 id="usage-macro"><a href="#usage-macro">Jinja and Nunjucks</a></h3>
 
 <div class="prose">
@@ -141,20 +115,19 @@ document.addEventListener('alpine:init', () => {
   </a>
 </div>
 
-{% set raw_code %}{% raw %}{% set footer %}
-  <button class="btn-outline" @click="open = false">Cancel</button>
-  <button class="btn" @click="open = false">Save changes</button>
+{% set raw_code %}{% raw %}{% set code_html %}
+{% set footer %}
+  <button class="btn-outline" onclick="this.closest('dialog').close()">Cancel</button>
+  <button class="btn" onclick="this.closest('dialog').close()">Save changes</button>
 {% endset %}
 {% call dialog(
   id="demo-dialog-edit-profile",
   title="Edit profile",
   description="Make changes to your profile here. Click save when you're done.",
-  main_attrs={"x-ref": "myDialog"},
   trigger="Edit Profile",
   trigger_attrs={"class": "btn-outline"},
-  content_attrs={"class": "w-full sm:max-w-[425px] max-h-[612px]"},
-  footer=footer,
-  register_on=["alpine:init", "htmx:afterSwap"]
+  dialog_attrs={"class": "w-full sm:max-w-[425px] max-h-[612px]"},
+  footer=footer
 ) %}
 <form class="form grid gap-4">
   <div class="grid gap-3">
@@ -175,19 +148,17 @@ document.addEventListener('alpine:init', () => {
 
 {% set code %}
 {% set footer %}
-  <button class="btn-outline" @click="open = false">Close</button>
+  <button class="btn-outline" onclick="this.closest('dialog').close()">Close</button>
 {% endset %}
 {% call dialog(
   id="dialog-example",
   title="Scrollable Content",
   description="This is a dialog with scrollable content.",
-  main_attrs={"x-ref": "myDialog"},
   trigger="Scrollable Content",
   trigger_attrs={"class": "btn-outline"},
-  content_attrs={"class": "w-full sm:max-w-[425px] max-h-[612px]"},
-  content_body_attrs={"class": "overflow-y-auto scrollbar"},
-  footer=footer,
-  register_on=["alpine:init", "htmx:afterSwap"]
+  dialog_attrs={"class": "w-full sm:max-w-[425px] max-h-[612px]"},
+  body_attrs={"class": "overflow-y-auto scrollbar"},
+  footer=footer
 ) %}
 <div class="space-y-4 text-sm">
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

docs/src/components/dropdown-menu.njk

@@ -6,8 +6,17 @@ toc:
   - label: Usage
     id: usage
     children:
-      - label: HTML + Javascript
-        id: usage-default
+      - label: HTML + JavaScript
+        id: usage-html-js
+        children:
+          - label: "Step 1: Include the JavaScript files"
+            id: usage-html-js-1
+          - label: "Step 2: Add your dropdown menu HTML"
+            id: usage-html-js-2
+          - label: HTML structure
+            id: usage-html-js-3
+          - label: JavaScript events
+            id: usage-html-js-4
       - label: Jinja and Nunjucks
         id: usage-macro
   - label: Examples
@@ -25,98 +34,67 @@ toc:
 
 {% set code_html %}
 {% call dropdown_menu(
-  id="dropdown-menu",
+  id="demo-dropdown-menu",
   trigger="Open",
   trigger_attrs={"class": "btn-outline"},
-  content_attrs={"class": "min-w-56"},
-  register_on=["alpine:init", "htmx:afterSwap"]
+  popover_attrs={"class": "min-w-56"}
 ) %}
 <div role="group" aria-labelledby="account-options">
-  <span id="account-options" role="heading">My Account</span>
-  <button type="button" role="menuitem">
+  <div role="heading" id="account-options">My Account</div>
+  <div role="menuitem">
     Profile
     <span class="text-muted-foreground ml-auto text-xs tracking-widest">⇧⌘P</span>
-  </button>
-  <button type="button" role="menuitem">
+  </div>
+  <div role="menuitem">
     Billing
     <span class="text-muted-foreground ml-auto text-xs tracking-widest">⌘B</span>
-  </button>
-  <button type="button" role="menuitem">
+  </div>
+  <div role="menuitem">
     Settings
     <span class="text-muted-foreground ml-auto text-xs tracking-widest">⌘S</span>
-  </button>
-  <button type="button" role="menuitem">
+  </div>
+  <div role="menuitem">
     Keyboard shortcuts
     <span class="text-muted-foreground ml-auto text-xs tracking-widest">⌘K</span>
-  </button>
+  </div>
 </div>
 <hr role="separator">
-<button type="button" role="menuitem">
+<div role="menuitem">
   GitHub
-</button>
-<button type="button" role="menuitem">
+</div>
+<div role="menuitem">
   Support
-</button>
-<button type="button" role="menuitem" disabled>
+</div>
+<div role="menuitem" aria-disabled="true">
   API
-</button>
+</div>
 <hr role="separator">
-<button type="button" role="menuitem">
+<div role="menuitem">
   Logout
   <span class="text-muted-foreground ml-auto text-xs tracking-widest">⇧⌘P</span>
-</button>
+</div>
 {% endcall %}
 {% endset %}
 
-{% set code_script %}
-<script>
-{% fetchCode "src/js/dropdown-menu.js" %}
-
-document.addEventListener('alpine:init', () => {
-  window.basecoat.registerDropdownMenu(Alpine);
-});
-</script>
-{% endset %}
-
-{{ code_preview("dropdown-menu", code_script | prettyHtml ~ code_html | prettyHtml) }}
+{{ code_preview("dropdown-menu", code_html | prettyHtml) }}
 
 <h2 id="usage">Usage</h2>
 
-<h3 id="usage-default"><a href="#usage-default">HTML + Javascript</a></h3>
+<h3 id="usage-html-js"><a href="#usage-html-js">HTML + JavaScript</a></h3>
 
-<div class="alert my-6">
-  {% lucide "circle-alert" %}
-  <h2>This component requires Javascript.</h2>
-</div>
+<h4 id="usage-html-js-1"><a href="#usage-html-js-1">Step 1: Include the JavaScript files</a></h4>
 
 <section class="prose">
-  <p>The component is structured as such:</p>
-  <ul>
-    <li>A <code>&lt;div class="popover"&gt;</code> which wraps around the entire component and holds it state (e.g. open/close).</li>
-    <li>A <code>&lt;button&gt;</code> that acts as the trigger to open or close the popover.</li>
-    <li>A <code>&lt;div data-popover&gt;</code> that holds the content of the popover.</li>
-    <li>Inside of the <code>&lt;div data-popover&gt;</code> is a <code>&lt;nav role="menu"&gt;</code> that contains a combination of:
-      <ul>
-        <li><code>&lt;button role="menuitem"&gt;</code> for menu items.</li>
-        <li><code>&lt;button role="menuitemcheckbox"&gt;</code> for menu items with checkboxes.</li>
-        <li><code>&lt;button role="menuitemradio"&gt;</code> for menu items with radio buttons.</li>
-        <li><code>&lt;hr role="separator"&gt;</code> to display a horizontal separator.</li>
-        <li><code>&lt;div role="group"&gt;</code> to group options.</li>
-        <li><code>&lt;span role="heading"&gt;</code> for group headings.</li>
-      </ul>
-  </ul>
-  <p>As with the <a href="/components/popover">Popover</a> component, you can set up a few additional options on the <code>&lt;div data-popover&gt;</code> element:</p>
-  <ul>
-    <li><code>data-side</code> can be set to <code>top</code>, <code>bottom</code>, <code>left</code>, or <code>right</code> to change the side of the popover.</li>
-    <li><code>data-align</code> can be set to <code>start</code>, <code>center</code>, or <code>end</code> to change the alignment of the popover.</li>
-  </ul>
-
-  <p>You can include the Javascript code provided below, load it as an individual file or use the CLI. Some Alpine.js properties are also required on certain elements (e.g. <code class="text-xs">x-bind</code>, <code class="text-xs">x-data</code>, <code class="text-xs">@click</code>).</p>
+  <p>You can either <a href="/installation/#install-cdn-all">include the JavaScript file for all the components</a>, or just the one for this component by adding this to the <code>&lt;head&gt;</code> of your page:</p>
 </section>
 
+{% set code_script %}<script src="https://cdn.jsdelivr.net/npm/basecoat-css@{{ pkg.version }}/dist/js/basecoat.min.js" defer></script>
+<script src="https://cdn.jsdelivr.net/npm/basecoat-css@{{ pkg.version }}/dist/js/dropdown-menu.min.js" defer></script>{% endset %}
+{{ code_block(code_script | prettyHtml, "html") }}
+
 <div class="flex flex-wrap gap-2 my-6">
   <a class="badge-outline" href="/installation/#install-js">
-    Components with Javascript
+    Components with JavaScript
     {% lucide "arrow-right" %}
   </a>
   <a class="badge-outline" href="/installation/#install-cli">
@@ -124,17 +102,72 @@ document.addEventListener('alpine:init', () => {
     {% lucide "arrow-right" %}
   </a>
   <a class="badge-outline" href="https://github.com/hunvreus/basecoat/blob/main/src/js/dropdown-menu.js" target="_blank">
-    Individual JS file (dropdown-menu.js)
+    dropdown-menu.js
     {% lucide "arrow-right" %}
   </a>
 </div>
 
-{% from "tabs.njk" import tabs %}
-{% set tabsets = [
-  { tab: "HTML", panel: code_block(code_html | prettyHtml, class="") },
-  { tab: "Javascipt (Alpine.js)", panel: code_block(code_script | prettyHtml, class="") }
-] %}
-{{ tabs(id="dropdown-menu", tabsets=tabsets) }}
+<h4 id="usage-html-js-2"><a href="#usage-html-js-2">Step 2: Add your dropdown menu HTML</a></h4>
+
+{{ code_block(code_html | prettyHtml, "html") }}
+
+<h4 id="usage-html-js-3"><a href="#usage-html-js-3">HTML structure</a></h4>
+
+<section class="prose">
+  <dl>
+    <dt><code class="highlight language-html">&lt;div class="dropdown-menu"&gt;</code></dt>
+    <dd>Wraps around the entire component.
+      <dl>
+        <dt><code class="highlight language-html">&lt;button type="button" popovertarget="{ POPOVER_ID }"&gt;</code></dt>
+        <dd>
+          <p>The trigger to open the popover, can also have the following attributes:</p>
+          <ul>
+            <li><code>id="{BUTTON_ID}"</code>: linked to by the <code>aria-labelledby</code> attribute of the listbox.</li>
+            <li><code>aria-haspopup="menu"</code>: indicates that the button opens a menu.</li>
+            <li><code>aria-controls="{ MENU_ID }"</code>: points to the menu's id.</li>
+            <li><code>aria-expanded="false"</code>: tracks the popover's state.</li>
+          </ul>
+        </dd>
+        <dt><code class="highlight language-html">&lt;div popover class="popover" id="{ POPOVER_ID }"&gt;</code></dt>
+        <dd>As with the <a href="/components/popover">Popover</a> component, you can set up the side and alignment of the popover using the <code>data-side</code> and <code>data-align</code> attributes.
+        <dl>
+          <dt><code class="highlight language-html">&lt;div role="menu"&gt;</code></dt>
+          <dd>The menu containing the options. Should have the following attributes:
+            <ul>
+              <li><code>id="{ MENU_ID }"</code>: refered to by the <code>aria-controls</code> attribute of the trigger.</li>
+              <li><code>aria-labelledby="{ BUTTON_ID }"</code>: linked to by the button's <code>id</code> attribute.</li>
+            </ul>
+            <dl>
+              <dt><code class="highlight language-html">&lt;button role="menuitem"&gt;</code></dt>
+              <dd>Menu item.</dd>
+              <dt><code class="highlight language-html">&lt;button role="menuitemcheckbox"&gt;</code></dt>
+              <dd>Menu item with a checkbox.</dd>
+              <dt><code class="highlight language-html">&lt;button role="menuitemradio"&gt;</code></dt>
+              <dd>Menu item with a radio button.</dd>
+              <dt><code class="highlight language-html">&lt;hr role="separator"&gt;</code> <span class="badge-secondary">Optional</span></dt>
+              <dd>Separator between groups/options.</dd>
+              <dt><code class="highlight language-html">&lt;div role="group"&gt;</code> <span class="badge-secondary">Optional</span></dt>
+              <dd>Group of options, can have a <code>aria-labelledby</code> attribute to link to a heading.</dd>
+              <dt><code class="highlight language-html">&lt;span role="heading"&gt;</code></dt>
+              <dd>Group heading, must have an <code>id</code> attribute if you use the <code>aria-labelledby</code> attribute on the group.</dd>
+            </dl>
+          </dd>
+        </dl>
+      </dl>
+    </dd>
+  </dl>
+</section>
+
+<h4 id="usage-html-js-4"><a href="#usage-html-js-4">JavaScript events</a></h4>
+
+<section class="prose">
+  <dl>
+    <dt><code>basecoat:initialized</code></dt>
+    <dd>Once the component is fully initialized, it dispatches a custom (non-bubbling) <code>basecoat:initialized</code> event on itself.</dd>
+    <dt><code>basecoat:popover</code></dt>
+    <dd>When the popover opens, the component dispatches a custom (non-bubbling) <code>basecoat:popover</code> event on <code>document</code>. Other popover components (Combobox, Dropdown Menu, Popover and Select) listen for this to close any open popovers.</dd>
+  </dl>
+</section>
 
 <h3 id="usage-macro"><a href="#usage-macro">Jinja and Nunjucks</a></h3>
 
@@ -161,43 +194,42 @@ document.addEventListener('alpine:init', () => {
   id="dropdown-menu",
   trigger="Open",
   trigger_attrs={"class": "btn-outline"},
-  content_attrs={"class": "min-w-56"},
-  register_on=["alpine:init", "htmx:afterSwap"]
+  popover_attrs={"class": "min-w-56"}
 ) %}
 <div role="group" aria-labelledby="account-options">
-  <span id="account-options" role="heading">My Account</span>
-  <button type="button" role="menuitem">
+  <div role="heading" id="account-options">My Account</div>
+  <div role="menuitem">
     Profile
     <span class="text-muted-foreground ml-auto text-xs tracking-widest">⇧⌘P</span>
-  </button>
-  <button type="button" role="menuitem">
+  </div>
+  <div role="menuitem">
     Billing
     <span class="text-muted-foreground ml-auto text-xs tracking-widest">⌘B</span>
-  </button>
-  <button type="button" role="menuitem">
+  </div>
+  <div role="menuitem">
     Settings
     <span class="text-muted-foreground ml-auto text-xs tracking-widest">⌘S</span>
-  </button>
-  <button type="button" role="menuitem">
+  </div>
+  <div role="menuitem">
     Keyboard shortcuts
     <span class="text-muted-foreground ml-auto text-xs tracking-widest">⌘K</span>
-  </button>
+  </div>
 </div>
 <hr role="separator">
-<button type="button" role="menuitem">
+<div role="menuitem">
   GitHub
-</button>
-<button type="button" role="menuitem">
+</div>
+<div role="menuitem">
   Support
-</button>
-<button type="button" role="menuitem" disabled>
+</div>
+<div role="menuitem" disabled>
   API
-</button>
+</div>
 <hr role="separator">
-<button type="button" role="menuitem">
+<div role="menuitem">
   Logout
   <span class="text-muted-foreground ml-auto text-xs tracking-widest">⇧⌘P</span>
-</button>
+</div>
 {% endcall %}{% endraw %}{% endset%}
 {{ code_block(raw_code, "jinja") }}
 
@@ -209,38 +241,33 @@ document.addEventListener('alpine:init', () => {
   id="dropdown-menu-checkboxes",
   trigger="Open",
   trigger_attrs={"class": "btn-outline"},
-  content_attrs={"class": "min-w-56"},
-  register_on=["alpine:init", "htmx:afterSwap"]
+  popover_attrs={"class": "min-w-56"}
 ) %}
 <div role="group" aria-labelledby="account-options">
-  <span id="account-options" role="heading">Account Options</span>
-  <button type="button" role="menuitem">
+  <div role="heading" id="account-options">Account Options</div>
+  <div role="menuitem">
     {% lucide "user" %}
     Profile
     <span class="text-muted-foreground ml-auto text-xs tracking-widest">⇧⌘P</span>
-  </button>
-  <button type="button" role="menuitem">
+  </div>
+  <div role="menuitem">
     {% lucide "credit-card" %}
     Billing
     <span class="text-muted-foreground ml-auto text-xs tracking-widest">⌘B</span>
-  </button>
-  <button type="button" role="menuitem">
+  </div>
+  <div role="menuitem">
     {% lucide "settings" %}
     Settings
     <span class="text-muted-foreground ml-auto text-xs tracking-widest">⌘S</span>
-  </button>
+  </div>
 </div>
 <hr role="separator">
 <div role="group" aria-labelledby="appearance-options">
-  <span id="appearance-options" role="heading">Appearance</span>
-  <button
-    type="button"
+  <div role="heading" id="appearance-options">Appearance</div>
+  <div
     role="menuitemcheckbox"
     aria-checked="true"
     class="group"
-    x-data="{ checked: true }"
-    @click="checked = !checked"
-    :aria-checked="checked"
   >
     {% lucide "check", {
       "class": "invisible group-aria-checked:visible",
@@ -249,16 +276,12 @@ document.addEventListener('alpine:init', () => {
     } %}
     Status Bar
     <span class="text-muted-foreground ml-auto text-xs tracking-widest">⇧⌘P</span>
-  </button>
-  <button
-    type="button"
+  </div>
+  <div
     role="menuitemcheckbox"
     aria-checked="false"
     class="group"
-    disabled
-    x-data="{ checked: false }"
-    @click="checked = !checked"
-    :aria-checked="checked"
+    aria-disabled="true"
   >
     {% lucide "check", {
       "class": "invisible group-aria-checked:visible",
@@ -267,15 +290,11 @@ document.addEventListener('alpine:init', () => {
     } %}
     Activity Bar
     <span class="text-muted-foreground ml-auto text-xs tracking-widest">⌘B</span>
-  </button>
-  <button
-    type="button"
+  </div>
+  <div
     role="menuitemcheckbox"
     aria-checked="false"
     class="group"
-    x-data="{ checked: false }"
-    @click="checked = !checked"
-    :aria-checked="checked"
   >
     {% lucide "check", {
       "class": "invisible group-aria-checked:visible",
@@ -284,15 +303,28 @@ document.addEventListener('alpine:init', () => {
     } %}
     Panel
     <span class="text-muted-foreground ml-auto text-xs tracking-widest">⌘S</span>
-  </button>
+  </div>
 </div>
 <hr role="separator">
-<button type="button" role="menuitem">
+<div role="menuitem">
   {% lucide "log-out" %}
   Logout
   <span class="text-muted-foreground ml-auto text-xs tracking-widest">⇧⌘P</span>
-</button>
-{% endcall %}{% endset %}
+</div>
+{% endcall %}
+<script>
+(() => {
+  const dropdownMenu = document.querySelector('#dropdown-menu-checkboxes');
+  const checkboxes = dropdownMenu.querySelectorAll('div[role="menuitemcheckbox"]');
+  checkboxes.forEach(checkbox => {
+    checkbox.addEventListener('click', () => {
+      const isChecked = checkbox.getAttribute('aria-checked') === 'true';
+      checkbox.setAttribute('aria-checked', !isChecked);
+    });
+  });
+})();
+</script>
+{% endset %}
 {{ code_preview("dropdown-menu-checkboxes", code | prettyHtml) }}
 
 <h3 id="example-radio-group"><a href="#example-radio-group">Radio Group</a></h3>
@@ -301,19 +333,15 @@ document.addEventListener('alpine:init', () => {
   id="dropdown-menu-radio-group",
   trigger="Open",
   trigger_attrs={"class": "btn-outline"},
-  content_attrs={"class": "min-w-56"},
-  register_on=["alpine:init", "htmx:afterSwap"]
+  popover_attrs={"class": "min-w-56"}
 ) %}
-<div role="group" aria-labelledby="position-options" x-data="{ checked: 'bottom' }">
+<div role="group" aria-labelledby="position-options">
   <span id="position-options" role="heading">Panel Position</span>
   <hr role="separator">
-  <button
-    type="button"
+  <div
     role="menuitemradio"
     aria-checked="false"
     class="group"
-    @click="checked = 'top'"
-    :aria-checked="checked == 'top'"
   >
     <div class="size-4 flex items-center justify-center">
       <div
@@ -324,14 +352,11 @@ document.addEventListener('alpine:init', () => {
     </div>
     Status Bar
     <span class="text-muted-foreground ml-auto text-xs tracking-widest">⇧⌘P</span>
-  </button>
-  <button
-    type="button"
+  </div>
+  <div
     role="menuitemradio"
-    aria-checked="false"
+    aria-checked="true"
     class="group"
-    @click="checked = 'bottom'"
-    :aria-checked="checked == 'bottom'"
   >
     <div class="size-4 flex items-center justify-center">
       <div
@@ -342,14 +367,11 @@ document.addEventListener('alpine:init', () => {
     </div>
     Activity Bar
     <span class="text-muted-foreground ml-auto text-xs tracking-widest">⌘B</span>
-  </button>
-  <button
-    type="button"
+  </div>
+  <div
     role="menuitemradio"
     aria-checked="false"
     class="group"
-    @click="checked = 'right'"
-    :aria-checked="checked == 'right'"
   >
     <div class="size-4 flex items-center justify-center">
       <div
@@ -360,7 +382,22 @@ document.addEventListener('alpine:init', () => {
     </div>
     Panel
     <span class="text-muted-foreground ml-auto text-xs tracking-widest">⌘S</span>
-  </button>
+  </div>
 </div>
-{% endcall %}{% endset %}
+{% endcall %}
+<script>
+(() => {
+  const dropdownMenu = document.querySelector('#dropdown-menu-radio-group');
+  const radioButtons = dropdownMenu.querySelectorAll('div[role="menuitemradio"]');
+  radioButtons.forEach(radioButton => {
+    radioButton.addEventListener('click', () => {
+      radioButtons.forEach(radioButton => {
+        radioButton.setAttribute('aria-checked', 'false');
+      });
+      radioButton.setAttribute('aria-checked', 'true');
+    });
+  });
+})();
+</script>
+{% endset %}
 {{ code_preview("dropdown-menu", code | prettyHtml) }}

docs/src/components/empty.njk

@@ -0,0 +1,157 @@
+---
+layout: layouts/page.njk
+title: Empty
+description: Display empty states with icons, titles, descriptions, and actions.
+toc:
+  - label: Usage
+    id: usage
+  - label: Examples
+    id: examples
+    children:
+      - label: Outline
+        id: example-outline
+      - label: Avatar
+        id: example-avatar
+      - label: Avatar Group
+        id: example-avatar-group
+      - label: Input Group
+        id: example-input-group
+---
+
+{% from "macros/code_preview.njk" import code_preview %}
+{% from "macros/code_block.njk" import code_block %}
+
+<div class="alert mb-6">
+  {% lucide "circle-alert" %}
+  <h2>There is no dedicated Empty component in Basecoat.</h2>
+</div>
+
+{% set code_default %}
+<div class="flex min-w-0 flex-1 flex-col items-center justify-center gap-6 rounded-lg border-dashed p-6 text-center text-balance md:p-12 text-neutral-800 dark:text-neutral-300">
+  <header class="flex max-w-sm flex-col items-center gap-2 text-center">
+    <div class="mb-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 bg-muted text-foreground flex size-10 shrink-0 items-center justify-center rounded-lg [&_svg:not([class*='size-'])]:size-6">
+      {% lucide "folder-code" %}
+    </div>
+    <h3 class="text-lg font-medium tracking-tight">No Projects Yet</h3>
+    <p class="text-muted-foreground [&>a:hover]:text-primary text-sm/relaxed [&>a]:underline [&>a]:underline-offset-4">
+      You haven't created any projects yet. Get started by creating your first project.
+    </p>
+  </header>
+  <section class="flex w-full max-w-sm min-w-0 flex-col items-center gap-4 text-sm text-balance">
+    <div class="flex gap-2">
+      <button class="btn">Create Project</button>
+      <button class="btn-outline">Import Project</button>
+    </div>
+  </section>
+  <a href="#" class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive underline-offset-4 hover:underline h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5 text-muted-foreground">
+    Learn More
+    {% lucide "arrow-up-right" %}
+  </a>
+</div>
+{% endset %}
+
+{{ code_preview("empty-default", code_default) }}
+
+<h2 id="usage"><a href="#usage">Usage</a></h2>
+
+<section class="prose">
+  <p>Empty states are pure HTML composition using Tailwind utility classes. Use flex layout utilities to center content, and compose with semantic elements like <code>&lt;header&gt;</code>, <code>&lt;h3&gt;</code>, <code>&lt;p&gt;</code>, and <code>&lt;button&gt;</code>.</p>
+  <p>Browse the examples below and copy the pattern that fits your needs.</p>
+</section>
+
+<h2 id="examples"><a href="#examples">Examples</a></h2>
+
+<h3 id="example-outline"><a href="#example-outline">Outline</a></h3>
+
+{% set code_outline %}
+<div class="flex min-w-0 flex-1 flex-col items-center justify-center gap-6 rounded-lg border-dashed p-6 text-center text-balance md:p-12 text-neutral-800 dark:text-neutral-300 border">
+  <header class="flex max-w-sm flex-col items-center gap-3 text-center">
+    <div class="mb-2 bg-muted text-foreground flex size-12 shrink-0 items-center justify-center rounded-lg [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-6">
+      {% lucide "cloud" %}
+    </div>
+    <h3 class="text-lg font-semibold tracking-tight">Cloud Storage Empty</h3>
+    <p class="text-muted-foreground text-sm/relaxed">
+      Upload files to your cloud storage to access them anywhere.
+    </p>
+  </header>
+  <section class="flex w-full max-w-sm min-w-0 flex-col items-center gap-3">
+    <button class="btn-sm-outline">Upload Files</button>
+  </section>
+</div>
+{% endset %}
+
+{{ code_preview("empty-outline", code_outline) }}
+
+<h3 id="example-avatar"><a href="#example-avatar">Avatar</a></h3>
+
+{% set code_avatar %}
+<div class="flex min-w-0 flex-1 flex-col items-center justify-center gap-6 rounded-lg border-dashed p-6 text-center text-balance md:p-12 text-neutral-800 dark:text-neutral-300">
+  <header class="flex max-w-sm flex-col items-center gap-3 text-center">
+    <div class="mb-2 flex items-center justify-center">
+      <img alt="@shadcn" src="https://github.com/shadcn.png" class="grayscale size-12 shrink-0 object-cover rounded-full">
+    </div>
+    <h3 class="text-lg font-semibold tracking-tight">User Offline</h3>
+    <p class="text-muted-foreground text-sm/relaxed">
+      This user is currently offline. You can leave a message to notify them or try again later.
+    </p>
+  </header>
+  <section class="flex w-full max-w-sm min-w-0 flex-col items-center gap-3">
+    <button class="btn-sm">Leave Message</button>
+  </section>
+</div>
+{% endset %}
+
+{{ code_preview("empty-avatar", code_avatar) }}
+
+<h3 id="example-avatar-group"><a href="#example-avatar-group">Avatar Group</a></h3>
+
+{% set code_avatar_group %}
+<div class="flex min-w-0 flex-1 flex-col items-center justify-center gap-6 rounded-lg border-dashed p-6 text-center text-balance md:p-12 text-neutral-800 dark:text-neutral-300">
+  <header class="flex max-w-sm flex-col items-center gap-3 text-center">
+    <div class="mb-2 flex items-center justify-center">
+      <div class="flex -space-x-2 [&amp;_img]:ring-background [&amp;_img]:ring-2 [&amp;_img]:grayscale [&amp;_img]:size-12 [&amp;_img]:shrink-0 [&amp;_img]:object-cover [&amp;_img]:rounded-full">
+        <img alt="@hunvreus" src="https://github.com/hunvreus.png">
+        <img alt="@shadcn" src="https://github.com/shadcn.png">
+        <img alt="@adamwathan" src="https://github.com/adamwathan.png">
+      </div>
+    </div>
+    <h3 class="text-lg font-semibold tracking-tight">No Team Members</h3>
+    <p class="text-muted-foreground text-sm/relaxed">
+      Invite your team to collaborate on this project.
+    </p>
+  </header>
+  <section class="flex w-full max-w-sm min-w-0 flex-col items-center gap-3">
+    <button class="btn-sm inline-flex items-center gap-2">
+      {% lucide "plus" %}
+      Invite Members
+    </button>
+  </section>
+</div>
+{% endset %}
+
+{{ code_preview("empty-avatar-group", code_avatar_group) }}
+
+<h3 id="example-input-group"><a href="#example-input-group">Input Group</a></h3>
+
+{% set code_input_group %}
+<div class="flex min-w-0 flex-1 flex-col items-center justify-center gap-6 rounded-lg p-6 text-center text-balance md:p-12 text-neutral-800 dark:text-neutral-300">
+  <header class="flex max-w-sm flex-col items-center gap-3 text-center">
+    <h3 class="text-lg font-semibold tracking-tight">404 - Not Found</h3>
+    <p class="text-muted-foreground text-sm/relaxed">
+      The page you're looking for doesn't exist. Try searching for what you need below.
+    </p>
+  </header>
+  <section class="flex w-full max-w-md min-w-0 flex-col items-center gap-3">
+    <div class="relative w-3/4">
+      <input type="text" class="input pl-8.5 pr-10" placeholder="Try searching for pages...">
+      {% lucide "search" , { "class": "absolute left-3 top-1/2 -translate-y-1/2 pointer-events-none text-muted-foreground pointer-events-none shrink-0 size-4" } %}
+      <kbd class="kbd absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none">/</kbd>
+    </div>
+    <p class="text-muted-foreground text-sm/relaxed [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary">
+      Need help? <a href="#">Contact support</a>
+    </p>
+  </section>
+</div>
+{% endset %}
+
+{{ code_preview("empty-input-group", code_input_group) }}

docs/src/components/field.njk

@@ -0,0 +1,459 @@
+---
+layout: layouts/page.njk
+title: Field
+description: Combine labels, controls, and help text to compose accessible form fields.
+toc:
+  - label: Usage
+    id: usage
+  - label: Examples
+    id: examples
+    children:
+      - label: Input
+        id: example-input
+      - label: Textarea
+        id: example-textarea
+      - label: Select
+        id: example-select
+      - label: Fieldset
+        id: example-fieldset
+      - label: Checkbox
+        id: example-checkbox
+      - label: Radio Group
+        id: example-radio
+      - label: Switch
+        id: example-switch
+      - label: Responsive Layout
+        id: example-responsive
+---
+
+{% from "macros/code_preview.njk" import code_preview %}
+{% from "macros/code_block.njk" import code_block %}
+
+{% set code_demo %}
+<form class="w-full max-w-md space-y-6">
+  <fieldset class="fieldset">
+    <legend>Payment Method</legend>
+    <p>All transactions are secure and encrypted</p>
+    
+    <div role="group" class="field">
+      <label for="card-name">Name on Card</label>
+      <input id="card-name" type="text" placeholder="Evil Rabbit" required>
+    </div>
+    
+    <div role="group" class="field">
+      <label for="card-number">Card Number</label>
+      <input id="card-number" type="text" placeholder="1234 5678 9012 3456" aria-describedby="card-number-desc" required>
+      <p id="card-number-desc">Enter your 16-digit card number</p>
+    </div>
+    
+    <div class="grid grid-cols-3 gap-4">
+      <div role="group" class="field">
+        <label for="exp-month">Month</label>
+        <select id="exp-month" class="select w-full">
+          <option value="">MM</option>
+          <option value="01">01</option>
+          <option value="02">02</option>
+          <option value="03">03</option>
+          <option value="04">04</option>
+          <option value="05">05</option>
+          <option value="06">06</option>
+          <option value="07">07</option>
+          <option value="08">08</option>
+          <option value="09">09</option>
+          <option value="10">10</option>
+          <option value="11">11</option>
+          <option value="12">12</option>
+        </select>
+      </div>
+      <div role="group" class="field">
+        <label for="exp-year">Year</label>
+        <select id="exp-year" class="select w-full">
+          <option value="">YYYY</option>
+          <option value="2024">2024</option>
+          <option value="2025">2025</option>
+          <option value="2026">2026</option>
+          <option value="2027">2027</option>
+          <option value="2028">2028</option>
+          <option value="2029">2029</option>
+        </select>
+      </div>
+      <div role="group" class="field">
+        <label for="cvv">CVV</label>
+        <input id="cvv" type="text" placeholder="123" required>
+      </div>
+    </div>
+  </fieldset>
+
+  <hr role="separator" class="my-6 border-border">
+  
+  <fieldset class="fieldset">
+    <legend>Billing Address</legend>
+    <p>The billing address associated with your payment method</p>
+    
+    <div role="group" class="field">
+      <label for="same-as-shipping" class="gap-3">
+        <input type="checkbox" id="same-as-shipping" checked>
+        Same as shipping address
+      </label>
+    </div>
+  </fieldset>
+  
+  <fieldset class="fieldset">
+    <div role="group" class="field">
+      <label for="comments">Comments</label>
+      <textarea id="comments" placeholder="Add any additional comments" rows="3"></textarea>
+    </div>
+  </fieldset>
+  
+  <div class="flex gap-3">
+    <button type="submit" class="btn">Submit</button>
+    <button type="button" class="btn-outline">Cancel</button>
+  </div>
+</form>
+{% endset %}
+
+{{ code_preview("field-demo", code_demo) }}
+
+<h2 id="usage"><a href="#usage">Usage</a></h2>
+
+<section class="prose">
+  <p>Field uses semantic HTML with minimal classes. Two main patterns can be used independently or composed together:</p>
+  <ul>
+    <li><code>&lt;div role="group" class="field"&gt;</code> for individual field containers (label, input, helper text, errors)</li>
+    <li><code>&lt;fieldset class="fieldset"&gt;</code> for grouping multiple related fields together</li>
+  </ul>
+  <p>Elements inside these containers are styled automatically based on their purpose. Use <code>aria-describedby</code> to connect helper text and errors to inputs for accessibility.</p>
+  <p><strong>Fields</strong> have the following HTML structure:</p>
+  <dl>
+    <dt><code class="highlight language-html">&lt;div role="group" class="field"&gt;</code></dt>
+    <dd>Field container. Add <code>data-orientation="horizontal"</code> to align controls horizontally. For responsive layouts, use standard Tailwind responsive classes.
+      <dl>
+        <dt><code class="highlight language-html">&lt;label&gt;</code></dt>
+        <dd>Label for the input.</dd>
+        <dt><code class="highlight language-html">&lt;input&gt;</code>, <code>&lt;select&gt;</code> or <code>&lt;textarea&gt;</code></dt>
+        <dd>Form input.</dd>
+        <dt><code class="highlight language-html">&lt;p&gt;</code> <span class="badge-secondary">Optional</span></dt>
+        <dd>Helper text. Use <code>aria-describedby</code> on the input to reference this element's <code>id</code>.</dd>
+        <dt><code class="highlight language-html">&lt;p role="alert"&gt;</code> <span class="badge-secondary">Optional</span></dt>
+        <dd>Error message. Use <code>aria-describedby</code> on the input and <code>aria-invalid="true"</code> to reference this element's <code>id</code>.</dd>
+        <dt><code class="highlight language-html">&lt;section&gt;</code> <span class="badge-secondary">Optional</span></dt>
+        <dd>Wraps label and description when the label sits beside the input (e.g. <code>data-orientation="horizontal"</code>). Not required if you have no description.</dd>
+      </dl>
+    </dd>
+  </dl>
+  <p><strong>Fieldsets</strong> have the following HTML structure:</p>
+  <dl>
+    <dt><code class="highlight language-html">&lt;fieldset class="fieldset"&gt;</code></dt>
+    <dd>Container for grouping related fields.
+      <dl>
+        <dt><code class="highlight language-html">&lt;legend&gt;</code></dt>
+        <dd>Heading for the fieldset.</dd>
+        <dt><code class="highlight language-html">&lt;p&gt;</code> <span class="badge-secondary">Optional</span></dt>
+        <dd>Description text. When placed directly after <code>&lt;legend&gt;</code>, automatically styled as muted text.</dd>
+        <dt><code class="highlight language-html">&lt;div role="group" class="field"&gt;</code> <span class="badge-secondary">Optional</span></dt>
+        <dd>Individual field containers (see structure above). You can include multiple <code>.field</code> elements, or place form controls directly in the fieldset.</dd>
+      </dl>
+    </dd>
+  </dl>
+</section>
+
+<h2 id="examples"><a href="#examples">Examples</a></h2>
+
+<h3 id="example-input"><a href="#example-input">Input</a></h3>
+
+{% set code_input %}
+<div class="grid gap-6">
+  <div role="group" class="field">
+    <label for="username">Username</label>
+    <input id="username" type="text" placeholder="evilrabbit" aria-describedby="username-desc">
+    <p id="username-desc">Choose a unique username for your account.</p>
+  </div>
+
+  <div role="group" class="field">
+    <label for="password">Password</label>
+    <p id="password-desc">Must be at least 8 characters long.</p>
+    <input id="password" type="password" placeholder="••••••••" aria-describedby="password-desc">
+  </div>
+</div>
+{% endset %}
+
+{{ code_preview("field-input", code_input, class="w-full max-w-md") }}
+
+<h3 id="example-textarea"><a href="#example-textarea">Textarea</a></h3>
+
+{% set code_textarea %}
+<div role="group" class="field">
+  <label for="bio">Feedback</label>
+  <textarea id="bio" rows="4" placeholder="Your feedback helps us improve..." aria-describedby="bio-desc"></textarea>
+  <p id="bio-desc">Share your thoughts about our service.</p>
+</div>
+{% endset %}
+
+{{ code_preview("field-textarea", code_textarea, class="w-full max-w-md") }}
+
+<h3 id="example-select"><a href="#example-select">Select</a></h3>
+
+{% set code_select %}
+<div role="group" class="field">
+  <label for="country">Department</label>
+  <select id="country" class="select w-full" aria-describedby="country-desc">
+    <option value="">Choose department</option>
+    <option value="engineering">Engineering</option>
+    <option value="design">Design</option>
+    <option value="marketing">Marketing</option>
+    <option value="sales">Sales</option>
+    <option value="support">Customer Support</option>
+    <option value="hr">Human Resources</option>
+    <option value="finance">Finance</option>
+    <option value="operations">Operations</option>
+  </select>
+  <p id="country-desc">Select your department or area of work.</p>
+</div>
+{% endset %}
+
+{{ code_preview("field-select", code_select, class="w-full max-w-md") }}
+
+<h3 id="example-slider"><a href="#example-slider">Slider</a></h3>
+
+{% set code %}
+<div role="group" class="field">
+  <label for="price-range">Price</label>
+  <p id="price-range-desc">Set your budget: $<span id="price-range-value">150</span></p>
+  <input id="price-range" type="range" min="0" max="500" value="150">
+</div>
+<script>
+  (() => {
+    const sliders = document.querySelectorAll('input[type="range"]');
+    if (!sliders) return;
+
+    const updateSlider = (el) => {
+      const min = parseFloat(el.min || 0);
+      const max = parseFloat(el.max || 100);
+      const value = parseFloat(el.value);
+      const percent = (max === min) ? 0 : ((value - min) / (max - min)) * 100;
+      el.style.setProperty('--slider-value', `${percent}%`);
+    };
+
+    sliders.forEach(slider => {
+      updateSlider(slider);
+      slider.addEventListener('input', (event) => updateSlider(event.target));
+    });
+
+    const priceSlider = document.getElementById('price-range');
+    const priceValue = document.getElementById('price-range-value');
+
+    priceSlider.addEventListener('input', (event) => priceValue.innerHTML = event.target.value);
+  })();
+</script>
+{% endset %}
+{{ code_preview("slider", code, "w-full max-w-sm") }}
+
+<h3 id="example-fieldset"><a href="#example-fieldset">Fieldset</a></h3>
+
+<section class="prose">
+  <p>Group related fields with <code>&lt;fieldset class="fieldset"&gt;</code> and <code>&lt;legend&gt;</code>.</p>
+</section>
+
+{% set code_fieldset %}
+<form class="w-full max-w-md">
+  <fieldset class="fieldset">
+    <legend>Profile</legend>
+    <p>This information will be displayed on your profile</p>
+    
+    <div role="group" class="field">
+      <label for="full-name">Full name</label>
+      <input id="full-name" type="text" placeholder="Evil Rabbit" aria-describedby="name-desc">
+      <p id="name-desc">Your first and last name</p>
+    </div>
+    
+    <div role="group" class="field">
+      <label for="display-name">Username</label>
+      <input id="display-name" type="text" placeholder="@evilrabbit" aria-invalid="true" aria-describedby="username-error">
+      <p id="username-error" role="alert">Username is already taken</p>
+    </div>
+    
+    <div class="flex items-center gap-3">
+      <input type="checkbox" id="newsletter">
+      <label for="newsletter" class="font-normal">Subscribe to the newsletter</label>
+    </div>
+  </fieldset>
+  
+  <button type="submit" class="btn mt-4">Save changes</button>
+</form>
+{% endset %}
+
+{{ code_preview("field-fieldset", code_fieldset) }}
+
+<h3 id="example-checkbox"><a href="#example-checkbox">Checkbox</a></h3>
+
+{% set code_checkbox %}
+<fieldset class="fieldset">
+  <legend>Show these items on the desktop</legend>
+  <p>Select the items you want to show on the desktop.</p>
+  
+  <div class="flex flex-col gap-3">
+    <div class="field">
+      <label class="gap-3">
+        <input type="checkbox">
+        Hard disks
+      </label>
+    </div>
+    <div class="field">
+      <label class="gap-3">
+        <input type="checkbox">
+        External disks
+      </label>
+    </div>
+    <div class="field">
+      <label class="gap-3">
+        <input type="checkbox">
+        CDs, DVDs and iPods
+      </label>
+    </div>
+    <div class="field">
+      <label class="gap-3">
+        <input type="checkbox">
+        Connected servers
+      </label>
+    </div>
+  </div>
+
+  <hr role="separator">
+
+  <div class="field" data-orientation="horizontal">
+    {# <div class="flex w-full items-center gap-3"> #}
+      <input id="sync-desktop-documents" type="checkbox" checked class="input self-start">
+      <section>
+        <label for="sync-desktop-documents">Sync Desktop & Documents folders</label>
+        <p>Your Desktop & Documents folders are being synced with iCloud Drive. You can access them from other devices.</p>
+      </section>
+    {# </div> #}
+  </div>
+</fieldset>
+{% endset %}
+
+{{ code_preview("field-checkbox", code_checkbox, class="w-full max-w-md") }}
+
+<h3 id="example-radio"><a href="#example-radio">Radio Group</a></h3>
+
+{% set code_radio %}
+<fieldset class="fieldset">
+  <legend>Subscription plan</legend>
+  <p>Yearly and lifetime plans offer significant savings.</p>
+  
+  <div role="radiogroup" class="grid gap-3">
+    <div class="field">
+      <label class="gap-3">
+        <input type="radio" name="subscription-plan" checked>
+        Monthly ($9.99/month)
+      </label>
+    </div>
+    <div class="field">
+      <label class="gap-3">
+        <input type="radio" name="subscription-plan">
+        Yearly ($99.99/year)
+      </label>
+    </div>
+    <div class="field">
+      <label class="gap-3">
+        <input type="radio" name="subscription-plan">
+        Lifetime ($299.99)
+      </label>
+    </div>
+  </div>
+</fieldset>
+{% endset %}
+
+{{ code_preview("field-radio", code_radio, class="w-full max-w-md") }}
+
+<h3 id="example-switch"><a href="#example-switch">Switch</a></h3>
+
+<section class="prose">
+  <p>Set <code>data-orientation="horizontal"</code> on <code>.field</code> to align labels and controls side-by-side.</p>
+</section>
+
+{% set code_switch %}
+<div role="group" class="field" data-orientation="horizontal">
+  <section>
+    <label for="multi-factor-authentication">Multi-factor authentication</label>
+    <p>Enable multi-factor authentication. If you do not have a two-factor device, you can use a one-time code sent to your email.</p>
+  </section>
+  <input id="multi-factor-authentication" type="checkbox" role="switch">
+</div>
+{% endset %}
+
+{{ code_preview("field-switch", code_switch, class="w-full max-w-md") }}
+
+<h3 id="example-choice-card"><a href="#example-choice-card">Choice Card</a></h3>
+
+{% set code_choice_card %}
+<fieldset class="fieldset">
+  <legend class="text-sm">Compute Environment</legend>
+  <p>Select the compute environment for your cluster.</p>
+
+  <div role="group" class="field">
+    <label class="flex gap-3 border rounded-md p-4 has-[:checked]:border-primary has-[:checked]:bg-primary/5 dark:has-[:checked]:bg-primary/10">
+      <section>
+        <h3>Kubernetes</h3>
+        <p>Run GPU workloads on a K8s configured cluster.</p>
+      </section>
+      <input id="choice-card" type="radio" name="choice-card" class="self-start" checked>
+    </label>
+  </div>
+  <div role="group" class="field">
+    <label class="flex gap-3 border rounded-md p-4 has-[:checked]:border-primary has-[:checked]:bg-primary/5 dark:has-[:checked]:bg-primary/10">
+      <section>
+        <h3>Virtual Machine</h3>
+        <p>Access a VM configured cluster to run GPU workloads.</p>
+      </section>
+      <input id="choice-card" type="radio" name="choice-card" class="self-start">
+    </label>
+  </div>
+</fieldset>
+{% endset %}
+
+{{ code_preview("field-choice-card", code_choice_card, class="w-full max-w-md") }}
+
+<h3 id="example-responsive"><a href="#example-responsive">Responsive Layout</a></h3>
+
+<section class="prose">
+  <p>For responsive layouts, use standard Tailwind responsive classes directly on <code>.field</code>. This example stacks vertically on mobile and switches to horizontal at the <code>md</code> breakpoint.</p>
+</section>
+
+{% set code_responsive %}
+<fieldset class="fieldset">
+  <legend>Profile</legend>
+  <p>Keep your profile details up to date.</p>
+
+  <hr role="separator">  
+
+  <div class="flex flex-col gap-7">
+    <div role="group" class="field flex-col md:flex-row md:items-center">
+      <section class="md:flex-auto">
+        <label for="profile-name">Name</label>
+        <p id="profile-name-desc">Provide your full name for identification.</p>
+      </section>
+      <input id="profile-name" type="text" placeholder="Evil Rabbit" aria-describedby="profile-name-desc" class="md:w-auto md:min-w-80">
+    </div>
+
+    <hr role="separator">
+
+    <div role="group" class="field flex-col md:flex-row md:items-start">
+      <section class="md:flex-auto">
+        <label for="profile-bio">Message</label>
+        <p id="profile-bio-desc">You can write your message here. Keep it short, preferably under 100 characters.</p>
+      </section>
+      <textarea id="profile-bio" rows="3" placeholder="Hello, world!" aria-describedby="profile-bio-desc" class="md:w-auto md:min-w-80"></textarea>
+    </div>
+
+    <hr role="separator">
+
+    <div role="group" class="field flex-col md:flex-row md:items-center">
+      <button type="submit" class="btn md:w-auto">Submit</button>
+      <button type="button" class="btn-outline md:w-auto">Cancel</button>
+    </div>
+  </div>
+</fieldset>
+{% endset %}
+
+{{ code_preview("field-responsive", code_responsive, class="w-full max-w-3xl") }}

docs/src/components/form.njk

@@ -1,7 +1,7 @@
 ---
 layout: layouts/page.njk
-title: Input
-description: Displays a form input field or a component that looks like an input field.
+title: Form
+description: Building forms with Basecoat components.
 toc:
   - label: Usage
     id: usage
@@ -28,7 +28,7 @@ toc:
   </div>
 
   <div class="grid gap-2">
-    <label for="demo-form-text">Bio</label>
+    <label for="demo-form-textarea">Bio</label>
     <textarea id="demo-form-textarea" placeholder="I like to..." rows="3"></textarea>
     <p class="text-muted-foreground text-sm">You can @mention other users and organizations.</p>
   </div>

docs/src/components/input-group.njk

@@ -0,0 +1,372 @@
+---
+layout: layouts/page.njk
+title: Input Group
+description: Display additional information or actions to an input or textarea.
+toc:
+  - label: Usage
+    id: usage
+  - label: Examples
+    id: examples
+    children:
+      - label: Icon
+        id: example-icon
+      - label: Text
+        id: example-text
+      - label: Button
+        id: example-button
+      - label: Tooltip
+        id: example-tooltip
+      - label: Textarea
+        id: example-textarea
+      - label: Spinner
+        id: example-spinner
+      - label: Dropdown
+        id: example-dropdown
+      - label: Group
+        id: example-group
+---
+
+{% from "macros/code_preview.njk" import code_preview %}
+{% from "macros/code_block.njk" import code_block %}
+{% from "dropdown-menu.njk" import dropdown_menu %}
+{% from "popover.njk" import popover %}
+
+<div class="alert mb-6">
+  {% lucide "circle-alert" %}
+  <h2>There is no dedicated Input Group component in Basecoat.</h2>
+</div>
+
+{% set code_default %}
+<div class="grid gap-6">
+  <div class="relative">
+    <input type="text" class="input pl-9 pr-20" placeholder="Search...">
+    <div class="absolute left-3 top-1/2 -translate-y-1/2 pointer-events-none text-muted-foreground [&>svg]:size-4">
+      {% lucide "search" %}
+    </div>
+    <div class="absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none text-muted-foreground text-sm">12 results</div>
+  </div>
+
+  <div class="relative">
+    <input type="text" class="input pl-15 pr-9" placeholder="example.com">
+    <div class="absolute left-3 top-1/2 -translate-y-1/2 pointer-events-none text-muted-foreground text-sm">https://</div>
+    <div class="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground [&>svg]:size-4" data-tooltip="This is content in a tooltip.">{% lucide "info" %}</div>
+  </div>
+
+  <div class="relative">
+    <textarea class="textarea pr-10 min-h-27 pb-12" placeholder="Ask, Search or Chat..."></textarea>
+    <footer role="group" class="absolute bottom-0 px-3 pb-3 pt-1.5 flex items-center w-full gap-2">
+      <button type="button" class="btn-icon-outline rounded-full size-6 text-muted-foreground hover:text-accent-foreground">
+        {% lucide "plus" %}
+      </button>
+      {{ dropdown_menu(
+        id="demo-dropdown-menu",
+        trigger="Auto",
+        trigger_attrs={"class": "btn-sm-ghost text-muted-foreground hover:text-accent-foreground h-6 p-2"},
+        popover_attrs={"data-side": "top", "class": "min-w-32"},
+        items=[
+          { type: "item", label: "Auto" },
+          { type: "item", label: "Agent" },
+          { type: "item", label: "Manual" }
+        ]
+      ) }}
+      <div class="text-muted-foreground text-sm ml-auto">52% used</div>
+      <hr class="w-0 h-4 border-r border-border shrink-0 m-0">
+      <button type="button" class="btn-icon rounded-full size-6 bg-muted-foreground hover:bg-foreground" disabled>
+        {% lucide "arrow-up" %}
+      </button>
+    </footer>
+  </div>
+
+  <div class="relative">
+    <input type="text" class="input pr-9" placeholder="@shadcn">
+    <div class="absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none bg-primary text-primary-foreground flex size-4 items-center justify-center rounded-full [&>svg]:size-3">{% lucide "check" %}</div>
+  </div>
+</div>
+{% endset %}
+
+{{ code_preview("input-group-default", code_default, class="w-full max-w-sm") }}
+
+<h2 id="usage"><a href="#usage">Usage</a></h2>
+
+<section class="prose">
+  <p>Input groups are pure HTML composition using Tailwind utility classes. There is no dedicated component: use <code>relative</code> positioning on a wrapper, add your content with <code>absolute</code> positioning, and adjust input padding to make room.</p>
+  <p>Browse the examples below and copy the pattern that fits your needs.</p>
+</section>
+
+<h2 id="examples"><a href="#examples">Examples</a></h2>
+
+<h3 id="example-icon"><a href="#example-icon">Icon</a></h3>
+
+{% set code_icon %}
+<div class="grid gap-6">
+  <div class="relative">
+    <input type="text" class="input pl-9" placeholder="Search...">
+    <div class="absolute left-3 top-1/2 -translate-y-1/2 pointer-events-none text-muted-foreground [&>svg]:size-4">
+      {% lucide "search" %}
+    </div>
+  </div>
+
+  <div class="relative">
+    <input type="email" class="input pl-9" placeholder="Enter your email">
+    <div class="absolute left-3 top-1/2 -translate-y-1/2 pointer-events-none text-muted-foreground [&>svg]:size-4">
+      {% lucide "mail" %}
+    </div>
+  </div>
+
+  <div class="relative">
+    <input type="text" class="input px-9" placeholder="Card number">
+    <div class="absolute left-3 top-1/2 -translate-y-1/2 pointer-events-none text-muted-foreground [&>svg]:size-4">
+      {% lucide "credit-card" %}
+    </div>
+    <div class="absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none text-muted-foreground [&>svg]:size-4">
+      {% lucide "check" %}
+    </div>
+  </div>
+
+  <div class="relative">
+    <input type="text" class="input pr-16" placeholder="Card number">
+    <div class="absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none text-muted-foreground [&>svg]:size-4 flex items-center gap-2">
+      {% lucide "star" %}
+      {% lucide "info" %}
+    </div>
+  </div>
+</div>
+{% endset %}
+
+{{ code_preview("input-group-icon-prefix", code_icon, class="w-full max-w-sm") }}
+
+<h3 id="example-text"><a href="#example-text">Text</a></h3>
+
+{% set code_text %}
+<div class="grid gap-6">
+  <div class="relative">
+    <input type="text" class="input pl-7 pr-12" placeholder="0.00">
+    <div class="absolute left-3 top-1/2 -translate-y-1/2 pointer-events-none text-muted-foreground text-sm">$</div>
+    <div class="absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none text-muted-foreground text-sm">USD</div>
+  </div>
+
+  <div class="relative">
+    <input type="text" class="input pl-15 pr-12" placeholder="example.com">
+    <div class="absolute left-3 top-1/2 -translate-y-1/2 pointer-events-none text-muted-foreground text-sm">https://</div>
+    <div class="absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none text-muted-foreground text-sm">.com</div>
+  </div>
+
+  <div class="relative">
+    <input type="text" class="input pr-30" placeholder="Enter your username">
+    <div class="absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none text-muted-foreground text-sm">@company.com</div>
+  </div>
+
+  <div class="relative">
+    <textarea class="textarea pr-10 min-h-25 pb-12" placeholder="Enter your message"></textarea>
+    <footer role="group" class="absolute bottom-0 px-3 pb-3 pt-1.5 flex items-center w-full gap-2">
+      <div class="text-muted-foreground text-sm">120 characters left</div>
+    </footer>
+  </div>
+</div>
+{% endset %}
+
+{{ code_preview("input-group-text", code_text, class="w-full max-w-sm") }}
+
+<h3 id="example-button"><a href="#example-button">Button</a></h3>
+
+{% set code_button %}
+<div class="grid gap-6">
+  <div class="relative">
+    <input type="text" readonly class="input pr-9" value="https://x.com/hunvreus">
+    <button 
+      data-copied="false"
+      onclick="
+        this.dataset.copied = 'true';
+        setTimeout(() => this.dataset.copied = 'false', 2000);
+      "
+      class="group absolute right-1.5 top-1/2 -translate-y-1/2 btn-icon-ghost text-muted-foreground hover:text-accent-foreground size-6"
+    >
+      {% lucide "copy", { "class": "group-data-[copied=true]:hidden" } %}
+      {% lucide "check", { "class": "hidden group-data-[copied=true]:block" } %}
+    </button>
+  </div>
+  
+
+  <div class="relative">
+    <input type="text" class="input pl-21 pr-9 rounded-full">
+    <button
+      aria-pressed="false" 
+      onclick="this.ariaPressed = this.ariaPressed === 'true' ? 'false' : 'true'"
+      class="absolute right-1.5 top-1/2 -translate-y-1/2 btn-icon-ghost text-muted-foreground hover:text-accent-foreground size-6 rounded-full aria-pressed:bg-transparent aria-pressed:hover:bg-accent dark:aria-pressed:hover:bg-accent/50 aria-pressed:text-blue-600 aria-pressed:[&>svg]:fill-blue-600"
+    >{% lucide "star" %}</button>
+    <div class="absolute left-1.5 top-1/2 -translate-y-1/2 flex items-center gap-1 z-10">
+      {% set trigger %}
+        {% lucide "info" %}
+      {% endset %}
+      {% call popover(
+        trigger=trigger,
+        trigger_attrs={"class": "btn-sm-icon-ghost rounded-full size-6"},
+        popover_attrs={"class": "max-w-72"}
+      ) %}
+        <h3 class="font-medium mb-1">Your connection is not secure.</h3>
+        <p>You should not enter any sensitive information on this site.</p>
+      {% endcall %}
+      <div class="text-muted-foreground text-sm pointer-events-none">https://</div>
+    </div>
+  </div>
+
+  <div class="relative">
+    <input type="text" readonly class="input pr-9" placeholder="Type to search...">
+    <button type="button" class="absolute right-1.5 top-1/2 -translate-y-1/2 btn-secondary h-6 p-2 rounded">Search</button>
+  </div>
+</div>
+{% endset %}
+
+{{ code_preview("input-group-button", code_button, class="w-full max-w-sm") }}
+
+<h3 id="example-tooltip"><a href="#example-tooltip">Tooltip</a></h3>
+
+{% set code_tooltip %}
+<div class="grid gap-6">
+  <div class="relative">
+    <input type="password" class="input pr-9" placeholder="Enter password">
+    <div class="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground [&>svg]:size-4" data-tooltip="Password must be at least 8 characters long.">{% lucide "info" %}</div>
+  </div>
+
+  <div class="relative">
+    <input type="email" class="input pr-9" placeholder="Your email address">
+    <div class="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground [&>svg]:size-4" data-tooltip="We'll use this to send your notifications.">{% lucide "circle-help" %}</div>
+  </div>
+
+  <div class="relative">
+    <input type="email" class="input pl-9" placeholder="Your email address">
+    <div class="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground [&>svg]:size-4" data-tooltip="Click for help with API keys." data-side="left">{% lucide "circle-help" %}</div>
+  </div>
+</div>
+{% endset %}
+
+{{ code_preview("input-group-tooltip", code_tooltip, class="w-full max-w-sm") }}
+
+<h3 id="example-textarea"><a href="#example-textarea">Textarea</a></h3>
+
+{% set code_textarea %}
+<div class="relative">
+  <textarea class="textarea pt-15 pb-17 min-h-77" placeholder="console.log('Hello, world!')."></textarea>
+  <header class="absolute top-0 flex items-center w-full gap-2 p-3 border-b">
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-javascript size-4 text-muted-foreground"><path d="M20 4l-2 14.5l-6 2l-6 -2l-2 -14.5z"></path><path d="M7.5 8h3v8l-2 -1"></path><path d="M16.5 8h-2.5a.5 .5 0 0 0 -.5 .5v3a.5 .5 0 0 0 .5 .5h1.423a.5 .5 0 0 1 .495 .57l-.418 2.93l-2 .5"></path></svg>
+    <span class="font-mono text-sm text-muted-foreground mr-auto">script.js</span>
+    <button class="btn-sm-icon-ghost text-muted-foreground hover:text-accent-foreground size-6">
+      {% lucide "refresh-ccw" %}
+    </button>
+    <button class="btn-sm-icon-ghost text-muted-foreground hover:text-accent-foreground size-6">
+      {% lucide "copy" %}
+    </button>
+  </header>
+  <footer class="absolute bottom-0 flex items-center w-full gap-2 p-3 border-t">
+    <span class="text-sm text-muted-foreground mr-auto">Line 1, Column 1</span>
+    <button type="button" class="btn-sm">
+      Run
+      {% lucide "corner-down-left" %}
+    </button>
+  </footer>
+</div>
+{% endset %}
+
+{{ code_preview("input-group-textarea", code_textarea, class="w-full max-w-md") }}
+
+<h3 id="example-spinner"><a href="#example-spinner">Spinner</a></h3>
+
+{% set code_spinner %}
+<div class="grid gap-6">
+  <div class="relative">
+    <input type="text" class="input pr-9" placeholder="Searching..." disabled>
+    <div class="absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none text-muted-foreground [&>svg]:size-4 opacity-50">
+      {% lucide "loader-circle", { "class": "animate-spin" } %}
+    </div>
+  </div>
+  
+  <div class="relative">
+    <input type="text" class="input pl-9" placeholder="Processing..." disabled>
+    <div class="absolute left-3 top-1/2 -translate-y-1/2 pointer-events-none text-muted-foreground [&>svg]:size-4 opacity-50">
+      {% lucide "loader-circle", { "class": "animate-spin" } %}
+    </div>
+  </div>
+
+  <div class="relative">
+    <input type="text" class="input pr-24" placeholder="Saving changes..." disabled>
+    <div class="absolute right-3 top-1/2 -translate-y-1/2 flex items-center gap-2 text-sm text-muted-foreground opacity-50">
+      <div>Saving...</div>
+      <div class="[&>svg]:size-4">
+        {% lucide "loader-circle", { "class": "animate-spin" } %}
+      </div>
+    </div>
+  </div>
+
+  <div class="relative">
+    <input type="text" class="input pl-9 pr-26" placeholder="Refreshing data..." disabled>
+    <div class="absolute left-3 top-1/2 -translate-y-1/2 pointer-events-none text-muted-foreground [&>svg]:size-4 opacity-50">
+      {% lucide "loader", { "class": "animate-spin" } %}
+    </div>
+    <div class="absolute right-3 top-1/2 -translate-y-1/2 flex items-center gap-2 text-sm text-muted-foreground opacity-50">
+      Please wait...
+    </div>
+  </div>
+</div>
+{% endset %}
+
+{{ code_preview("input-group-spinner", code_spinner, class="w-full max-w-md") }}
+
+<h3 id="example-dropdown"><a href="#example-dropdown">Dropdown</a></h3>
+
+{% set code_dropdown %}
+<div class="grid gap-6">
+  <div class="relative">
+    <input type="text" class="input pr-9" placeholder="Enter file name">
+    {% set trigger %}
+      {% lucide "ellipsis" %}
+    {% endset %}
+    {{ dropdown_menu(
+      main_attrs={"class": "absolute right-1.5 top-1/2 -translate-y-1/2 z-10"},
+      trigger=trigger,
+      trigger_attrs={"class": "btn-sm-icon-ghost text-muted-foreground hover:text-accent-foreground size-6"},
+      popover_attrs={"data-align": "end", "class": "min-w-32"},
+      items=[
+        { type: "item", label: "Settings" },
+        { type: "item", label: "Copy path" },
+        { type: "item", label: "Open location" }
+      ]
+    ) }}
+  </div>
+
+  <div class="relative">
+    <input type="text" class="input pr-30" placeholder="Enter search query">
+    {% set trigger %}
+      Search in...
+      {% lucide "chevron-down", { "class": "size-3" } %}
+    {% endset %}
+    {{ dropdown_menu(
+      main_attrs={"class": "absolute right-1.5 top-1/2 -translate-y-1/2"},
+      trigger=trigger,
+      trigger_attrs={"class": "btn-sm-ghost text-muted-foreground hover:text-accent-foreground p-2 h-6"},
+      popover_attrs={"data-align": "end", "class": "min-w-32"},
+      items=[
+        { type: "item", label: "Documentation" },
+        { type: "item", label: "Blog Posts" },
+        { type: "item", label: "Changelog" }
+      ]
+    ) }}
+  </div>
+</div>
+{% endset %}
+
+{{ code_preview("input-group-dropdown", code_dropdown, class="w-full max-w-sm") }}
+
+<h3 id="example-group"><a href="#example-group">Group</a></h3>
+
+{% set code_group %}
+<div class="flex w-fit items-stretch">
+  <label for="url" class="text-sm flex items-center bg-muted border border-r-0 px-4 rounded-l-md shadow-xs">https://</label>
+  <div class="relative">
+    <input type="text" class="input pr-9 rounded-none">
+    <div class="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground [&>svg]:size-4">{% lucide "link-2" %}</div>
+  </div>
+  <div class="text-sm flex items-center bg-muted border border-l-0 px-4 rounded-r-md shadow-xs">.com</div>
+</div>
+{% endset %}
+
+{{ code_preview("input-group-group", code_group, class="w-full max-w-sm") }}

docs/src/components/item.njk

@@ -0,0 +1,320 @@
+---
+layout: layouts/page.njk
+title: Item
+description: A versatile component that you can use to display any content.
+toc:
+  - label: Usage
+    id: usage
+  - label: Examples
+    id: examples
+    children:
+      - label: Variants
+        id: example-variants
+      - label: Size
+        id: example-size
+      - label: Icon
+        id: example-icon
+      - label: Avatar
+        id: example-avatar
+      - label: Image
+        id: example-image
+      - label: Group
+        id: example-group
+      - label: Header
+        id: example-header
+      - label: Link
+        id: example-link
+---
+
+{% from "macros/code_block.njk" import code_block %}
+{% from "macros/code_preview.njk" import code_preview %}
+
+<div class="alert mb-6">
+  {% lucide "circle-alert" %}
+  <h2>There is no dedicated Item component in Basecoat.</h2>
+</div>
+
+{% set code_basic %}
+<div class="flex flex-col gap-6">
+  <article class="group/item flex items-center border text-sm rounded-md transition-colors [a]:hover:bg-accent/50 [a]:transition-colors duration-100 flex-wrap outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] border-border p-4 gap-4">
+    <div class="flex flex-1 flex-col gap-1">
+      <h3 class="flex w-fit items-center gap-2 text-sm leading-snug font-medium">Basic Item</h3>
+      <p class="text-muted-foreground line-clamp-2 text-sm leading-normal font-normal text-balance [&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4">A simple item with title and description.</p>
+    </div>
+    <button class="btn-sm-outline">Action</button>
+  </article>
+
+  <a href="#" class="group/item flex items-center border text-sm rounded-md transition-colors [a]:hover:bg-accent/50 [a]:transition-colors duration-100 flex-wrap outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] border-border py-3 px-4 gap-2.5">
+    <div class="flex shrink-0 items-center justify-center gap-2 [&_svg]:pointer-events-none bg-transparent [&_svg]:size-5">
+      {% lucide "badge-check" %}
+    </div>
+    <div class="flex flex-1 flex-col gap-1">
+      <h3 class="flex w-fit items-center gap-2 text-sm leading-snug font-medium">Your profile has been verified.</h3>
+    </div>
+    <div class="flex items-center gap-2 [&_svg]:size-4">
+      {% lucide "chevron-right" %}
+    </div>
+  </a>
+</div>
+{% endset %}
+
+{{ code_preview("item-basic", code_basic | prettyHtml, class="w-full max-w-md") }}
+
+<h2 id="usage"><a href="#usage">Usage</a></h2>
+
+<section class="prose">
+  <p>Items are pure HTML composition using Tailwind utility classes. Use semantic elements like <code>&lt;article&gt;</code> or <code>&lt;a&gt;</code>, apply flex layout, and compose with standard HTML elements like <code>&lt;h3&gt;</code>, <code>&lt;p&gt;</code>, <code>&lt;img&gt;</code>, or <code>&lt;button&gt;</code>.</p>
+  <p>Browse the examples below and copy the pattern that fits your needs.</p>
+</section>
+
+<h2 id="examples"><a href="#examples">Examples</a></h2>
+
+<h3 id="example-variants"><a href="#example-variants">Variants</a></h3>
+
+{% set code_variants %}
+<div class="flex flex-col gap-6">
+  <article class="group/item flex items-center border text-sm rounded-md transition-colors [a]:hover:bg-accent/50 [a]:transition-colors duration-100 flex-wrap outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] border-transparent p-4 gap-4">
+    <div class="flex flex-1 flex-col gap-1">
+      <h3 class="flex w-fit items-center gap-2 text-sm leading-snug font-medium">Default Variant</h3>
+      <p class="text-muted-foreground line-clamp-2 text-sm leading-normal font-normal text-balance [&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4">Standard styling with subtle background and borders.</p>
+    </div>
+    <button class="btn-sm-outline">Open</button>
+  </article>
+
+  <article class="group/item flex items-center border text-sm rounded-md transition-colors [a]:hover:bg-accent/50 [a]:transition-colors duration-100 flex-wrap outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] border-border p-4 gap-4">
+    <div class="flex flex-1 flex-col gap-1">
+      <h3 class="flex w-fit items-center gap-2 text-sm leading-snug font-medium">Outline Variant</h3>
+      <p class="text-muted-foreground line-clamp-2 text-sm leading-normal font-normal text-balance [&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4">Outlined style with clear borders and transparent background.</p>
+    </div>
+    <button class="btn-sm-outline">Open</button>
+  </article>
+
+  <article class="group/item flex items-center border text-sm rounded-md transition-colors [a]:hover:bg-accent/50 [a]:transition-colors duration-100 flex-wrap outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] border-transparent bg-muted/50 p-4 gap-4">
+    <div class="flex flex-1 flex-col gap-1">
+      <h3 class="flex w-fit items-center gap-2 text-sm leading-snug font-medium">Muted Variant</h3>
+      <p class="text-muted-foreground line-clamp-2 text-sm leading-normal font-normal text-balance [&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4">Subdued appearance with muted colors for secondary content.</p>
+    </div>
+    <button class="btn-sm-outline">Open</button>
+  </article>
+</div>
+{% endset %}
+
+{{ code_preview("item-variants", code_variants) }}
+
+<h3 id="example-size"><a href="#example-size">Size</a></h3>
+
+<section class="prose">
+  <p>Use different padding and gap sizes for compact or spacious layouts.</p>
+</section>
+
+{{ code_preview("item-size", code_basic) }}
+
+<h3 id="example-icon"><a href="#example-icon">Icon</a></h3>
+
+{% set code_icon %}
+<article class="group/item flex items-center border text-sm rounded-md transition-colors [a]:hover:bg-accent/50 [a]:transition-colors duration-100 flex-wrap outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] border-border p-4 gap-4">
+  <div class="flex shrink-0 items-center justify-center gap-2 self-start [&_svg]:pointer-events-none size-8 border rounded-sm bg-muted [&_svg:not([class*='size-'])]:size-4">
+    {% lucide "shield-alert" %}
+  </div>
+  <div class="flex flex-1 flex-col gap-1">
+    <h3 class="flex w-fit items-center gap-2 text-sm leading-snug font-medium">Security Alert</h3>
+    <p class="text-muted-foreground line-clamp-2 text-sm leading-normal font-normal text-balance [&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4">New login detected from unknown device.</p>
+  </div>
+  <button class="btn-sm-outline">Review</button>
+</article>
+{% endset %}
+
+{{ code_preview("item-icon", code_icon, class="max-w-lg") }}
+
+
+<h3 id="example-avatar"><a href="#example-avatar">Avatar</a></h3>
+
+{% set code_avatar %}
+<div class="flex flex-col gap-6">
+  <article class="group/item flex items-center border text-sm rounded-md transition-colors [a]:hover:bg-accent/50 [a]:transition-colors duration-100 flex-wrap outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] border-border p-4 gap-4">
+    <img src="https://github.com/hunvreus.png" alt="hunvreus" class="size-10 rounded-full object-cover">
+    <div class="flex flex-1 flex-col gap-1">
+      <h3 class="flex w-fit items-center gap-2 text-sm leading-snug font-medium">hunvreus</h3>
+      <p class="text-muted-foreground line-clamp-2 text-sm leading-normal font-normal text-balance [&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4">Last seen 5 months ago</p>
+    </div>
+    <button class="btn-icon-outline rounded-full">
+      {% lucide "plus" %}
+    </button>
+  </article>
+
+  <article class="group/item flex items-center border text-sm rounded-md transition-colors [a]:hover:bg-accent/50 [a]:transition-colors duration-100 flex-wrap outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] border-border p-4 gap-4">
+    <div class="flex -space-x-2 [&_img]:ring-background [&_img]:ring-2 [&_img]:grayscale [&_img]:size-8 [&_img]:shrink-0 [&_img]:object-cover [&_img]:rounded-full self-start">
+      <img alt="@hunvreus" src="https://github.com/hunvreus.png">
+      <img alt="@shadcn" src="https://github.com/shadcn.png">
+      <img alt="@adamwathan" src="https://github.com/adamwathan.png">
+    </div>
+    <div class="flex flex-1 flex-col gap-1">
+      <h3 class="flex w-fit items-center gap-2 text-sm leading-snug font-medium">No Team Members</h3>
+      <p class="text-muted-foreground line-clamp-2 text-sm leading-normal font-normal text-balance [&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4">Invite your team to collaborate on this project.</p>
+    </div>
+    <button class="btn-outline">
+      Invite
+    </button>
+  </article>
+</div>
+{% endset %}
+
+{{ code_preview("item-avatar", code_avatar, class="w-full max-w-lg") }}
+
+<h3 id="example-image"><a href="#example-image">Image</a></h3>
+
+{% set code_image %}
+<div class="flex flex-col gap-6 w-full max-w-md">
+  <a href="#" class="group/item flex items-center border text-sm rounded-md transition-colors [a]:hover:bg-accent/50 [a]:transition-colors duration-100 flex-wrap outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] border-border p-4 gap-4">
+    <img src="https://avatar.vercel.sh/example_1" alt="Midnight City Lights" class="grayscale size-10 rounded-sm object-cover">
+
+    <div class="flex flex-1 flex-col gap-1">
+      <h3 class="w-fit items-center gap-2 text-sm leading-snug font-medium line-clamp-1">Midnight City Lights - <span class="text-muted-foreground">Electric Nights</span></h3>
+      <p class="text-muted-foreground line-clamp-2 text-sm leading-normal font-normal text-balance [&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4">Neon Dreams</p>
+    </div>
+    
+    <div class="flex flex-col gap-1 flex-none text-center">
+      <p class="text-muted-foreground line-clamp-2 text-sm leading-normal font-normal text-balance [&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4">3:45</p>
+    </div>
+  </a>
+
+  <a href="#" class="group/item flex items-center border text-sm rounded-md transition-colors [a]:hover:bg-accent/50 [a]:transition-colors duration-100 flex-wrap outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] border-border p-4 gap-4">
+    <img src="https://avatar.vercel.sh/example_2" alt="Midnight City Lights" class="grayscale size-10 rounded-sm object-cover">
+
+    <div class="flex flex-1 flex-col gap-1">
+      <h3 class="w-fit items-center gap-2 text-sm leading-snug font-medium line-clamp-1">Coffee Shop Conversations - <span class="text-muted-foreground">Urban Stories</span></h3>
+      <p class="text-muted-foreground line-clamp-2 text-sm leading-normal font-normal text-balance [&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4">The Morning Brew</p>
+    </div>
+    
+    <div class="flex flex-col gap-1 flex-none text-center">
+      <p class="text-muted-foreground line-clamp-2 text-sm leading-normal font-normal text-balance [&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4">4:05</p>
+    </div>
+  </a>
+
+  <a href="#" class="group/item flex items-center border text-sm rounded-md transition-colors [a]:hover:bg-accent/50 [a]:transition-colors duration-100 flex-wrap outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] border-border p-4 gap-4">
+    <img src="https://avatar.vercel.sh/example_3" alt="Midnight City Lights" class="grayscale size-10 rounded-sm object-cover">
+
+    <div class="flex flex-1 flex-col gap-1">
+      <h3 class="w-fit items-center gap-2 text-sm leading-snug font-medium line-clamp-1">Digital Rain - <span class="text-muted-foreground">Binary Beats</span></h3>
+      <p class="text-muted-foreground line-clamp-2 text-sm leading-normal font-normal text-balance [&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4">Cyber Symphony</p>
+    </div>
+    
+    <div class="flex flex-col gap-1 flex-none text-center">
+      <p class="text-muted-foreground line-clamp-2 text-sm leading-normal font-normal text-balance [&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4">3:30</p>
+    </div>
+  </a>
+</div>
+{% endset %}
+
+{{ code_preview("item-image", code_image) }}
+
+
+<h3 id="example-group"><a href="#example-group">Group</a></h3>
+
+{% set code_group %}
+<div class="flex flex-col">
+  <article class="group/item flex items-center border text-sm rounded-md transition-colors [a]:hover:bg-accent/50 [a]:transition-colors duration-100 flex-wrap outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] border-transparent p-4 gap-4">
+    <img src="https://github.com/hunvreus.png" alt="Ronan Berder" class="grayscale size-10 rounded-full object-cover">
+    <div class="flex flex-1 flex-col gap-1">
+      <h3 class="flex w-fit items-center gap-2 text-sm leading-snug font-medium">hunvreus</h3>
+      <p class="text-muted-foreground line-clamp-2 text-sm leading-normal font-normal text-balance [&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4">hunvreus@gmail.com</p>
+    </div>
+    <button class="btn-icon-outline rounded-full">
+      {% lucide "plus" %}
+    </button>
+  </article>
+
+  <hr role="separator" class="border-border">
+
+  <article class="group/item flex items-center border text-sm rounded-md transition-colors [a]:hover:bg-accent/50 [a]:transition-colors duration-100 flex-wrap outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] border-transparent p-4 gap-4">
+    <img src="https://github.com/shadcn.png" alt="shadcn" class="grayscale size-10 rounded-full object-cover">
+    <div class="flex flex-1 flex-col gap-1">
+      <h3 class="flex w-fit items-center gap-2 text-sm leading-snug font-medium">shadcn</h3>
+      <p class="text-muted-foreground line-clamp-2 text-sm leading-normal font-normal text-balance [&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4">shadcn@vercel.com</p>
+    </div>
+    <button class="btn-icon-outline rounded-full">
+      {% lucide "plus" %}
+    </button>
+  </article>
+
+  <hr role="separator" class="border-border">
+
+  <article class="group/item flex items-center border text-sm rounded-md transition-colors [a]:hover:bg-accent/50 [a]:transition-colors duration-100 flex-wrap outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] border-transparent p-4 gap-4">
+    <img src="https://github.com/adamwathan.png" alt="Adam Wathan" class="grayscale size-10 rounded-full object-cover">
+    <div class="flex flex-1 flex-col gap-1">
+      <h3 class="flex w-fit items-center gap-2 text-sm leading-snug font-medium">adamwathan</h3>
+      <p class="text-muted-foreground line-clamp-2 text-sm leading-normal font-normal text-balance [&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4">adam.wathan@gmail.com</p>
+    </div>
+    <button class="btn-icon-outline rounded-full">
+      {% lucide "plus" %}
+    </button>
+  </article>
+</div>
+{% endset %}
+
+{{ code_preview("item-group", code_group, class="w-full max-w-md") }}
+
+
+<h3 id="example-header"><a href="#example-header">Header</a></h3>
+
+{% set code_header %}
+<div class="flex-col grid grid-cols-3 gap-4">
+  <article class="group/item flex items-center border text-sm rounded-md transition-colors [a]:hover:bg-accent/50 [a]:transition-colors duration-100 flex-wrap outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] border-border p-4 gap-4">
+    <img alt="v0-1.5-sm" loading="lazy" class="grayscale aspect-square w-full rounded-sm object-cover flex-basis" src="https://avatar.vercel.sh/v0-1.5-sm">  
+    <div class="flex flex-1 flex-col gap-1">
+      <h3 class="flex w-fit items-center gap-2 text-sm leading-snug font-medium">v0-1.5-sm</h3>
+      <p class="text-muted-foreground line-clamp-2 text-sm leading-normal font-normal text-balance [&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4">Everyday tasks and UI generation.</p>
+    </div>
+  </article>
+
+  <article class="group/item flex items-center border text-sm rounded-md transition-colors [a]:hover:bg-accent/50 [a]:transition-colors duration-100 flex-wrap outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] border-border p-4 gap-4">
+    <img alt="v0-1.5-lg" loading="lazy" class="grayscale aspect-square w-full rounded-sm object-cover flex-basis" src="https://avatar.vercel.sh/v0-1.5-lg">  
+    <div class="flex flex-1 flex-col gap-1">
+      <h3 class="flex w-fit items-center gap-2 text-sm leading-snug font-medium">v0-1.5-lg</h3>
+      <p class="text-muted-foreground line-clamp-2 text-sm leading-normal font-normal text-balance [&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4">Advanced thinking or reasoning.</p>
+    </div>
+  </article>
+  
+  <article class="group/item flex items-center border text-sm rounded-md transition-colors [a]:hover:bg-accent/50 [a]:transition-colors duration-100 flex-wrap outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] border-border p-4 gap-4">
+    <img alt="v0-2.0-mini" loading="lazy" class="grayscale aspect-square w-full rounded-sm object-cover flex-basis" src="https://avatar.vercel.sh/v0-2.0-mini">  
+    <div class="flex flex-1 flex-col gap-1">
+      <h3 class="flex w-fit items-center gap-2 text-sm leading-snug font-medium">v0-2.0-mini</h3>
+      <p class="text-muted-foreground line-clamp-2 text-sm leading-normal font-normal text-balance [&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4">Open Source model for everyone.</p>
+    </div>
+  </article>
+</div>
+{% endset %}
+
+{{ code_preview("item-header", code_header) }}
+
+<h3 id="example-link"><a href="#example-link">Link</a></h3>
+
+<section class="prose">
+  <p>Items can be rendered as links by using an <code>&lt;a&gt;</code> element. Hover and focus states are applied automatically.</p>
+</section>
+
+{% set code_link %}
+<div class="flex flex-col gap-6">
+  <a href="#" class="group/item flex items-center border text-sm rounded-md transition-colors [a]:hover:bg-accent/50 [a]:transition-colors duration-100 flex-wrap outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] border-transparent p-4 gap-4">
+    <div class="flex flex-1 flex-col gap-1">
+      <h3 class="flex w-fit items-center gap-2 text-sm leading-snug font-medium">Visit our documentation</h3>
+      <p class="text-muted-foreground line-clamp-2 text-sm leading-normal font-normal text-balance [&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4">Learn how to get started with our components.</p>
+    </div>
+    <div class="flex items-center gap-2 [&_svg]:size-4">
+      {% lucide "chevron-right" %}
+    </div>
+  </a>
+
+  <a href="#" class="group/item flex items-center border text-sm rounded-md transition-colors [a]:hover:bg-accent/50 [a]:transition-colors duration-100 flex-wrap outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] border-border p-4 gap-4">
+    <div class="flex flex-1 flex-col gap-1">
+      <h3 class="flex w-fit items-center gap-2 text-sm leading-snug font-medium">External resource</h3>
+      <p class="text-muted-foreground line-clamp-2 text-sm leading-normal font-normal text-balance [&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4">Opens in a new tab with security attributes.</p>
+    </div>
+    <div class="flex items-center gap-2 [&_svg]:size-4">
+      {% lucide "external-link" %}
+    </div>
+  </a>
+</div>
+{% endset %}
+
+{{ code_preview("item-link", code_link, class="w-full max-w-md") }}

docs/src/components/kbd.njk

@@ -0,0 +1,76 @@
+---
+layout: layouts/page.njk
+title: Kbd
+description: Used to display textual user input from keyboard.
+toc:
+  - label: Usage
+    id: usage
+  - label: Examples
+    id: examples
+    children:
+      - label: Group
+        id: example-group
+      - label: Button
+        id: example-button
+---
+
+{% from "macros/code_preview.njk" import code_preview %}
+{% from "macros/code_block.njk" import code_block %}
+
+{% set code_html %}
+<div class="flex flex-col items-center gap-4">
+  <span class="inline-flex items-center gap-1">
+    <kbd class="kbd">⌘</kbd>
+    <kbd class="kbd">⇧</kbd>
+    <kbd class="kbd">⌥</kbd>
+    <kbd class="kbd">⌃</kbd>
+  </span>
+  <span class="inline-flex items-center gap-1">
+    <kbd class="kbd">Ctrl</kbd>
+    <span>+</span>
+    <kbd class="kbd">B</kbd>
+  </span>
+</div>
+{% endset %}
+
+{{ code_preview("kbd", code_html | prettyHtml) }}
+
+<h2 id="usage"><a href="#usage">Usage</a></h2>
+
+<section class="prose">
+  <p>Use the <code>&lt;kbd&gt;</code> element with the <code>kbd</code> class:</p>
+</section>
+
+{% set code_simple %}
+<kbd class="kbd">⌘K</kbd>
+{% endset %}
+
+{{ code_block(code_simple | prettyHtml, "html") }}
+
+<h2 id="examples"><a href="#examples">Examples</a></h2>
+
+<h3 id="example-group"><a href="#example-group">Group</a></h3>
+
+{% set group_html %}
+<p class="text-muted-foreground text-sm">
+  Use
+  <span class="inline-flex items-center gap-1">
+    <kbd class="kbd">Ctrl + B</kbd>
+    <kbd class="kbd">Ctrl + K</kbd>
+  </span>
+  to open the command palette
+</p>
+{% endset %}
+
+{{ code_preview("kbd-group", group_html | prettyHtml) }}
+
+<h3 id="example-button"><a href="#example-button">Button</a></h3>
+
+{% set button_html %}
+<div class="flex flex-wrap items-center gap-x-4">
+  <button class="btn-sm-outline pr-2">Accept <kbd class="kbd">⏎</kbd></button>
+  <button class="btn-sm-outline pr-2">Cancel <kbd class="kbd">Esc</kbd></button>
+</div>
+{% endset %}
+
+{{ code_preview("kbd-button", button_html | prettyHtml) }}

docs/src/components/popover.njk

@@ -6,8 +6,17 @@ toc:
   - label: Usage
     id: usage
     children:
-      - label: HTML + Javascript
-        id: usage-default
+      - label: HTML + JavaScript
+        id: usage-html-js
+        children:
+          - label: "Step 1 (Optional): Include the JavaScript file"
+            id: usage-html-js-1
+          - label: "Step 2: Add your popover HTML"
+            id: usage-html-js-2
+          - label: HTML structure
+            id: usage-html-js-3
+          - label: JavaScript events
+            id: usage-html-js-4
       - label: Jinja and Nunjucks
         id: usage-macro
 ---
@@ -21,8 +30,7 @@ toc:
   id="demo-popover",
   trigger="Open popover",
   trigger_attrs={"class": "btn-outline"},
-  content_attrs={"class": "w-80 p-4"},
-  register_on=["alpine:init", "htmx:afterSwap"]
+  popover_attrs={"class": "w-80"}
 ) %}
   <div class="grid gap-4">
     <header class="grid gap-1.5">
@@ -32,7 +40,7 @@ toc:
     <form class="form grid gap-2">
       <div class="grid grid-cols-3 items-center gap-4">
         <label for="demo-popover-width">Width</label>
-        <input type="text" id="demo-popover-width" value="100%" class="col-span-2 h-8"/>
+        <input type="text" id="demo-popover-width" value="100%" class="col-span-2 h-8" autofocus/>
       </div>
       <div class="grid grid-cols-3 items-center gap-4">
         <label for="demo-popover-max-width">Max. width</label>
@@ -51,67 +59,65 @@ toc:
 {% endcall %}
 {% endset %}
 
-{% set code_script %}
-<script>
-{% fetchCode "src/js/popover.js" %}
-
-document.addEventListener('alpine:init', () => {
-  window.basecoat.registerPopover(Alpine);
-});
-</script>
-{% endset %}
-
-{{ code_preview("popover", code_script | prettyHtml ~ code_html | prettyHtml) }}
+{{ code_preview("popover", code_html | prettyHtml) }}
 
 <h2 id="usage"><a href="#usage">Usage</a></h2>
 
-<h3 id="usage-default"><a href="#usage-default">HTML + Javascript</a></h3>
+<h3 id="usage-html-js"><a href="#usage-html-js">HTML + JavaScript</a></h3>
 
-<div class="alert my-6">
-  {% lucide "circle-alert" %}
-  <h2>This component requires Javascript.</h2>
-</div>
+<h4 id="usage-html-js-1"><a href="#usage-html-js-1">Step 1: Include the JavaScript file</a></h4>
 
 <section class="prose">
-  <p>The component is structured as such:</p>
-  
-  <ul>
-    <li>A <code>&lt;div class="popover"&gt;</code> which wraps around the entire component and holds it state (e.g. open/close).</li>
-    <li>A <code>&lt;button&gt;</code> that acts as the trigger to open or close the popover.</li>
-    <li>A <code>&lt;div data-popover&gt;</code> that holds the content of the popover.</li>
-  </ul>
-  
-  <p>You can set up a few additional options on the <code>&lt;div data-popover&gt;</code> element:</p>
-  
-  <ul>
-    <li><code>data-side</code> can be set to <code>top</code>, <code>bottom</code>, <code>left</code>, or <code>right</code> to change the side of the popover.</li>
-    <li><code>data-align</code> can be set to <code>start</code>, <code>center</code>, or <code>end</code> to change the alignment of the popover.</li>
-  </ul>
-
-  <p>You can include the Javascript code provided below, load it as an individual file or use the CLI. Some Alpine.js properties are also required on certain elements (e.g. <code class="text-xs">x-bind</code>, <code class="text-xs">x-data</code>, <code class="text-xs">@click</code>).</p>
+  <p>You can either <a href="/installation/#install-cdn-all">include the JavaScript file for all the components</a>, or just the one for this component by adding this to the <code>&lt;head&gt;</code> of your page:</p>
 </section>
 
+{% set code_script %}<script src="https://cdn.jsdelivr.net/npm/basecoat-css@{{ pkg.version }}/dist/js/basecoat.min.js" defer></script>
+<script src="https://cdn.jsdelivr.net/npm/basecoat-css@{{ pkg.version }}/dist/js/popover.min.js" defer></script>{% endset %}
+{{ code_block(code_script | prettyHtml, "html") }}
+
 <div class="flex flex-wrap gap-2 my-6">
   <a class="badge-outline" href="/installation/#install-js">
-    Components with Javascript
+    Components with JavaScript
     {% lucide "arrow-right" %}
   </a>
   <a class="badge-outline" href="/installation/#install-cli">
     Use the CLI
     {% lucide "arrow-right" %}
   </a>
-  <a class="badge-outline" href="https://github.com/hunvreus/basecoat/blob/main/src/js/popover.js" target="_blank">
-    Individual JS file (popover.js)
-    {% lucide "arrow-right" %}
-  </a>
 </div>
 
-{% from "tabs.njk" import tabs %}
-{% set tabsets = [
-  { tab: "HTML", panel: code_block(code_html | prettyHtml, class="") },
-  { tab: "Javascipt (Alpine.js)", panel: code_block(code_script | prettyHtml, class="") }
-] %}
-{{ tabs(id="popover", tabsets=tabsets) }}
+<h4 id="usage-html-js-2"><a href="#usage-html-js-2">Step 2: Add your popover HTML</a></h4>
+
+{{ code_block(code_html | prettyHtml, "html") }}
+
+<h4 id="usage-html-js-3"><a href="#usage-html-js-3">HTML structure</a></h4>
+
+<section class="prose">
+  <dl>
+    <dt><code class="highlight language-html">&lt;button type="button" popovertarget="{ POPOVER_ID }"&gt;</code></dt>
+    <dd>
+      <p>The trigger to open the popover, can also have the following attributes:</p>
+      <ul>
+        <li><code>id="{BUTTON_ID}"</code>: linked to by the <code>aria-labelledby</code> attribute of the listbox.</li>
+        <li><code>aria-expanded="false"</code>: tracks the popover's state.</li>
+        <li><code>onclick</code>: a simple function to update <code>aria-expanded</code>.</li>
+      </ul>
+    </dd>
+    <dt><code class="highlight language-html">&lt;div data-popover class="popover" id="{ POPOVER_ID }"&gt;</code></dt>
+    <dd>You can set up the side and alignment of the popover using the <code>data-side</code> and <code>data-align</code> attributes.</dd>
+  </dl>
+</section>
+
+<h4 id="usage-html-js-4"><a href="#usage-html-js-4">JavaScript events</a></h4>
+
+<section class="prose">
+  <dl>
+    <dt><code>basecoat:initialized</code></dt>
+    <dd>Once the component is fully initialized, it dispatches a custom (non-bubbling) <code>basecoat:initialized</code> event on itself.</dd>
+    <dt><code>basecoat:popover</code></dt>
+    <dd>When the popover opens, the component dispatches a custom (non-bubbling) <code>basecoat:popover</code> event on <code>document</code>. Other popover components (Combobox, Dropdown Menu, Popover and Select) listen for this to close any open popovers.</dd>
+  </dl>
+</section>
 
 <h3 id="usage-macro"><a href="#usage-macro">Jinja and Nunjucks</a></h3>
 
@@ -138,8 +144,7 @@ document.addEventListener('alpine:init', () => {
   id="demo-popover",
   trigger="Open popover",
   trigger_attrs={"class": "btn-outline"},
-  content_attrs={"class": "w-80 p-4"},
-  register_on=["alpine:init", "htmx:afterSwap"]
+  popover_attrs={"class": "w-80 p-4"}
 ) %}
   <div class="grid gap-4">
     <header class="grid gap-1.5">
@@ -166,4 +171,4 @@ document.addEventListener('alpine:init', () => {
     </form>
   </div>
 {% endcall %}{% endraw %}{% endset %}
-{{ code_block(raw_code, "jinja") }}
+{{ code_block(raw_code, "jinja") }}

docs/src/components/progress.njk

@@ -0,0 +1,44 @@
+---
+layout: layouts/page.njk
+title: Progress
+description: Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.
+toc:
+  - label: Usage
+    id: usage
+---
+
+{% from "macros/code_preview.njk" import code_preview %}
+{% from "macros/code_block.njk" import code_block %}
+
+<div class="alert mb-6">
+  {% lucide "circle-alert" %}
+  <h2>There is no dedicated Progress component in Basecoat.</h2>
+</div>
+
+{% set code_default %}
+<div class="bg-primary/20 relative h-2 w-full overflow-hidden rounded-full">
+  <div id="demo-progress" class="bg-primary h-full w-full flex-1 transition-all" style="width: 17%"></div>
+</div>
+<script>
+  setTimeout(() => {
+    document.getElementById('demo-progress').style.width = '66%';
+  }, 500);
+</script>
+{% endset %}
+
+{{ code_preview("progress-default", code_default, class="w-full max-w-sm") }}
+
+<h2 id="usage"><a href="#usage">Usage</a></h2>
+
+<section class="prose">
+  <p>Progress bars are pure HTML composition using Tailwind utility classes. Use a container div for the track and an inner div for the indicator. Set the indicator's width with inline styles or via JavaScript.</p>
+</section>
+
+{% set code_usage %}
+<div class="bg-primary/20 relative h-2 w-full overflow-hidden rounded-full">
+  <div class="bg-primary h-full w-full flex-1 transition-all" style="width: 66%"></div>
+</div>
+{% endset %}
+
+{{ code_block(code_usage) }}
+

docs/src/components/select.njk

@@ -8,8 +8,19 @@ toc:
     children:
       - label: HTML
         id: usage-html
-      - label: HTML + Javascript
-        id: usage-js
+      - label: HTML + JavaScript
+        id: usage-html-js
+        children:
+          - label: "Step 1: Include the JavaScript files"
+            id: usage-html-js-1
+          - label: "Step 2: Add your select HTML"
+            id: usage-html-js-2
+          - label: HTML structure
+            id: usage-html-js-3
+          - label: JavaScript events
+            id: usage-html-js-4
+          - label: JavaScript methods
+            id: usage-html-js-5
       - label: Jinja and Nunjucks
         id: usage-macro
   - label: Examples
@@ -34,34 +45,31 @@ toc:
     <option>Blueberry</option>
     <option>Grapes</option>
     <option>Pineapple</option>
+  </optgroup>
 </select>{% endset %}
 {{ code_preview("select-native", code_native) }}
 
 {% set code_html %}
-{% call select(
-  name="select-js",
+{{ select(
   trigger_attrs={"class": "w-[180px]"},
-  register_on=["alpine:init", "htmx:afterSwap"]
-) %}
-<div role="group" aria-labelledby="fruit-options-label">
-  <span id="fruit-options-label" role="heading">Fruits</span>
-  <div role="option" data-value="apple">Apple</div>
-  <div role="option" data-value="banana">Banana</div>
-  <div role="option" data-value="blueberry">Blueberry</div>
-  <div role="option" data-value="pineapple">Grapes</div>
-  <div role="option" data-value="pineapple">Pineapple</div>
-</div>
-{% endcall %}
+  is_combobox=true,
+  items=[
+    {
+      type: "group",
+      label: "Fruits",
+      items: [
+        { type: "item", value: "apple", label: "Apple", attrs: {"data-force": "true"} },
+        { type: "item", value: "banana", label: "Banana", attrs: {"data-keywords": "bread"} },
+        { type: "item", value: "blueberry", label: "Blueberry" },
+        { type: "item", value: "pineapple", label: "Grapes" },
+        { type: "item", value: "pineapple", label: "Pineapple" }
+      ]
+    }
+  ]
+) }}
 {% endset %}
 
 {% set code_script %}
-<script>
-{% fetchCode "src/js/select.js" %}
-
-document.addEventListener('alpine:init', () => {
-  window.basecoat.registerSelect(Alpine);
-});
-</script>
 {% endset %}
 
 {{ code_preview("select", code_script | prettyHtml ~ code_html | prettyHtml) }}
@@ -76,39 +84,21 @@ document.addEventListener('alpine:init', () => {
 
 {{ code_block(code_native) }}
 
-<h3 id="usage-js"><a href="#usage-js">HTML + Javascript</a></h3>
+<h3 id="usage-html-js"><a href="#usage-html-js">HTML + JavaScript</a></h3>
+
+<h4 id="usage-html-js-1"><a href="#usage-html-js-1">Step 1: Include the JavaScript files</a></h4>
 
 <section class="prose">
-  <p>If you need to do more than what <code>&lt;select&gt;</code> allows (e.g. HTML options), you can use this component. It is structured as such:</p>
-
-  <ul>
-    <li>A <code>&lt;div class="popover"&gt;</code> which wraps around the entire component and holds it state (e.g. open/close).</li>
-    <li>A <code>&lt;button&gt;</code> that acts as the trigger to open or close the popover.</li>
-    <li>A <code>&lt;div data-popover&gt;</code> that holds the content of the popover.</li>
-    <li>Inside of the <code>&lt;div data-popover&gt;</code> is a <code>&lt;nav role="listbox"&gt;</code> that contains a combination of:
-      <ul>
-        <li><code>&lt;div role="option"&gt;</code> for the options with a <code>data-value</code> attribute.</li>
-        <li><code>&lt;hr role="separator"&gt;</code> to display a horizontal separator.</li>
-        <li><code>&lt;div role="group"&gt;</code> to group options.</li>
-        <li><code>&lt;span role="heading"&gt;</code> for group headings.</li>
-      </ul>
-    </li>
-    <li>An <code>&lt;input type="hidden"&gt;</code> to hold the value of the field (if needed).</li>
-  </ul>
-
-  <p>As with the <a href="/components/popover">Popover</a> component, you can set up a few additional options on the <code>&lt;div data-popover&gt;</code> element:</p>
-
-  <ul>
-    <li><code>data-side</code> can be set to <code>top</code>, <code>bottom</code>, <code>left</code>, or <code>right</code> to change the side of the popover.</li>
-    <li><code>data-align</code> can be set to <code>start</code>, <code>center</code>, or <code>end</code> to change the alignment of the popover.</li>
-  </ul>
-
-  <p>You can include the Javascript code provided below, load it as an individual file or use the CLI. Some Alpine.js properties are also required on certain elements (e.g. <code class="text-xs">x-bind</code>, <code class="text-xs">x-data</code>, <code class="text-xs">@click</code>).</p>
+  <p>You can either <a href="/installation/#install-cdn-all">include the JavaScript file for all the components</a>, or just the one for this component by adding this to the <code>&lt;head&gt;</code> of your page:</p>
 </section>
 
+{% set code_script %}<script src="https://cdn.jsdelivr.net/npm/basecoat-css@{{ pkg.version }}/dist/js/basecoat.min.js" defer></script>
+<script src="https://cdn.jsdelivr.net/npm/basecoat-css@{{ pkg.version }}/dist/js/select.min.js" defer></script>{% endset %}
+{{ code_block(code_script | prettyHtml, "html") }}
+
 <div class="flex flex-wrap gap-2 my-6">
   <a class="badge-outline" href="/installation/#install-js">
-    Components with Javascript
+    Components with JavaScript
     {% lucide "arrow-right" %}
   </a>
   <a class="badge-outline" href="/installation/#install-cli">
@@ -116,26 +106,97 @@ document.addEventListener('alpine:init', () => {
     {% lucide "arrow-right" %}
   </a>
   <a class="badge-outline" href="https://github.com/hunvreus/basecoat/blob/main/src/js/select.js" target="_blank">
-    Individual JS file (select.js)
+    select.js
     {% lucide "arrow-right" %}
   </a>
 </div>
 
-{% from "tabs.njk" import tabs %}
-{% set tabsets = [
-  { tab: "HTML", panel: code_block(code_html | prettyHtml, class="") },
-  { tab: "Javascipt (Alpine.js)", panel: code_block(code_script | prettyHtml, class="") }
-] %}
-{{ tabs(id="select", tabsets=tabsets) }}
+<h4 id="usage-html-js-2"><a href="#usage-html-js-2">Step 2: Add your select HTML</a></h4>
+
+{{ code_block(code_html | prettyHtml, "html") }}
+
+<h4 id="usage-html-js-3"><a href="#usage-html-js-3">HTML structure</a></h4>
 
 <section class="prose">
-  <p>The component will dispatch a <code>select:change</code> event when a value is selected, along with the value and label of the selected option in the <code>detail</code> object.</p>
+  <dl>
+    <dt><code class="highlight language-html">&lt;div class="select"&gt;</code></dt>
+    <dd>Wraps around the entire component.
+      <dl>
+        <dt><code class="highlight language-html">&lt;button type="button" popovertarget="{ POPOVER_ID }"&gt;</code></dt>
+        <dd>
+          <p>The trigger to open the popover, can also have the following attributes:</p>
+          <ul>
+            <li><code>id="{BUTTON_ID}"</code>: linked to by the <code>aria-labelledby</code> attribute of the listbox.</li>
+            <li><code>aria-haspopup="listbox"</code>: indicates that the button opens a listbox.</li>
+            <li><code>aria-controls="{ LISTBOX_ID }"</code>: points to the listbox's id.</li>
+            <li><code>aria-expanded="false"</code>: tracks the popover's state.</li>
+            <li><code>aria-activedescendant="{ OPTION_ID }"</code>: points to the active option's id.</li>
+          </ul>
+        </dd>
+        <dt><code class="highlight language-html">&lt;div popover class="popover" id="{ POPOVER_ID }"&gt;</code></dt>
+        <dd>As with the <a href="/components/popover">Popover</a> component, you can set up the side and alignment of the popover using the <code>data-side</code> and <code>data-align</code> attributes.
+        <dl>
+          <dt><code class="highlight language-html">&lt;div role="listbox"&gt;</code></dt>
+          <dd>The listbox containing the options. Should have the following attributes:
+            <ul>
+              <li><code>id="{ LISTBOX_ID }"</code>: refered to by the <code>aria-controls</code> attribute of the trigger.</li>
+              <li><code>aria-labelledby="{ BUTTON_ID }"</code>: linked to by the button's <code>id</code> attribute.</li>
+            </ul>
+            <dl>
+              <dt><code class="highlight language-html">&lt;div role="option" data-value="{ VALUE }"&gt;</code></dt>
+              <dd>Option that can be selected.Should have a unique id if you use the <code>aria-activedescendant</code> attribute on the trigger.</dd>
+              <dt><code class="highlight language-html">&lt;hr role="separator"&gt;</code> <span class="badge-secondary">Optional</span></dt>
+              <dd>Separator between groups/options.</dd>
+              <dt><code class="highlight language-html">&lt;div role="group"&gt;</code> <span class="badge-secondary">Optional</span></dt>
+              <dd>Group of options, can have a <code>aria-labelledby</code> attribute to link to a heading.</dd>
+              <dt><code class="highlight language-html">&lt;span role="heading"&gt;</code></dt>
+              <dd>Group heading, must have an <code>id</code> attribute if you use the <code>aria-labelledby</code> attribute on the group.</dd>
+            </dl>
+          </dd>
+        </dl>
+      </dl>
+    </dd>
+    <dt><code class="highlight language-html">&lt;input type="hidden" name="{ NAME }" value="{ VALUE }"&gt;</code> <span class="badge-secondary">Optional</span></dt>
+    <dd>The hidden input that holds the value of the field (if needed).</dd>
+  </dl>
+</section>
+
+<h4 id="usage-html-js-4"><a href="#usage-html-js-4">JavaScript events</a></h4>
+
+<section class="prose">
+  <dl>
+    <dt><code>basecoat:initialized</code></dt>
+    <dd>Once the component is fully initialized, it dispatches a custom (non-bubbling) <code>basecoat:initialized</code> event on itself.</dd>
+    <dt><code>basecoat:popover</code></dt>
+    <dd>When the popover opens, the component dispatches a custom (non-bubbling) <code>basecoat:popover</code> event on <code>document</code>. Other popover components (Combobox, Dropdown Menu, Popover and Select) listen for this to close any open popovers.</dd>
+    <dt><code>change</code></dt>
+    <dd>When the selected value changes, the component dispatches a custom (bubbling) <code>change</code> event on itself, with the selected value in <code>event.detail</code> (e.g. <code>{ detail: { value: "something" }}</code>).</dd>
+  </dl>
+</section>
+
+<h4 id="usage-html-js-5"><a href="#usage-html-js-5">JavaScript methods</a></h4>
+
+<section class="prose">
+  <dl>
+    <dt><code>selectByValue</code></dt>
+    <dd>
+      <p>You can call this method on the component after it is initialized to select an option by value (i.e. the option with the matching <code>data-value</code> attribute):</p>
+
+{% set code_script %}<script>
+  const selectComponent = document.querySelector('#my-select');
+  selectComponent.addEventListener('basecoat:initialized', () => {
+    selectComponent.selectByValue('apple');
+  });
+</script>{% endset %}
+{{ code_block(code_script | prettyHtml, "html") }}
+    </dd>
+  </dl>
 </section>
 
 <h3 id="usage-macro"><a href="#usage-macro">Jinja and Nunjucks</a></h3>
 
 <div class="prose">
-  <p>You can use the <code class="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-xs">dropdown_menu()</code> Nunjucks or Jinja macro for this component.</p>
+  <p>You can use the <code class="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-xs">select()</code> Nunjucks or Jinja macro for this component.</p>
 </div>
 
 <div class="flex flex-wrap gap-2 my-6">
@@ -153,16 +214,21 @@ document.addEventListener('alpine:init', () => {
   </a>
 </div>
 
-{% set raw_code %}{% raw %}{% call select(name="select-js") %}
-<div role="group" aria-labelledby="fruit-options-label">
-  <span id="fruit-options-label" role="heading">Fruits</span>
-  <div role="option" data-value="apple">Apple</div>
-  <div role="option" data-value="banana">Banana</div>
-  <div role="option" data-value="blueberry">Blueberry</div>
-  <div role="option" data-value="pineapple">Grapes</div>
-  <div role="option" data-value="pineapple">Pineapple</div>
-</div>
-{% endcall %}{% endraw %}{% endset %}
+{% set raw_code %}{% raw %}{{ select(
+  items=[
+    {
+      type: "group",
+      label: "Fruits",
+      items: [
+        { type: "item", value: "apple", label: "Apple" },
+        { type: "item", value: "banana", label: "Banana" },
+        { type: "item", value: "blueberry", label: "Blueberry" },
+        { type: "item", value: "grapes", label: "Grapes" },
+        { type: "item", value: "pineapple", label: "Pineapple" }
+      ]
+    }
+  ]
+) }}{% endraw %}{% endset %}
 {{ code_block(raw_code, "jinja") }}
 
 <h2 id="examples"><a href="#examples">Examples</a></h2>
@@ -171,11 +237,10 @@ document.addEventListener('alpine:init', () => {
 
 {% set code %}
 {% call select(
-  listbox_attrs={"class": "scrollbar overflow-y-auto max-h-64"},
-  register_on=["alpine:init", "htmx:afterSwap"]
+  listbox_attrs={"class": "scrollbar overflow-y-auto max-h-64"}
 ) %}
 {% for i in range(0, 99) %}
-<div role="option" data-value="item-{{ i }}">Item {{ i }}</div>
+<div role="option" {% if i > 0 %}data-value="item-{{ i }}"{% endif %}>Item {{ i }}</div>
 {% endfor %}
 {% endcall %}
 {% endset %}
@@ -186,8 +251,7 @@ document.addEventListener('alpine:init', () => {
 
 {% set code %}
 {% call select(
-  trigger_attrs={"disabled": "disabled"},
-  register_on=["alpine:init", "htmx:afterSwap"]
+  trigger_attrs={"disabled": "disabled"}
 ) %}
 <div role="option" data-value="disabled">Disabled</div>
 {% endcall %}
@@ -199,20 +263,26 @@ document.addEventListener('alpine:init', () => {
 
 {% set code %}
 {% call select(
-  trigger_attrs={'class': 'w-[180px]'},
-  register_on=["alpine:init", "htmx:afterSwap"]
+  id="select-with-icons",
+  trigger_attrs={'class': 'w-[180px]'}
 ) %}
 <div type="button" role="option" data-value="bar">
-  {% lucide "chart-bar", {"class": "text-muted-foreground"} %}
-  Bar
+  <span class="flex items-center gap-2">
+    {% lucide "chart-bar", {"class": "text-muted-foreground"} %}
+    Bar
+  </span>
 </div>
 <div type="button" role="option" data-value="line">
-  {% lucide "chart-line", {"class": "text-muted-foreground"} %}
-  Line
+  <span class="flex items-center gap-2">
+    {% lucide "chart-line", {"class": "text-muted-foreground"} %}
+    Line
+  </span>
 </div>
 <div type="button" role="option" data-value="pie">
-  {% lucide "chart-pie", {"class": "text-muted-foreground"} %}
-  Pie
+  <span class="flex items-center gap-2">
+    {% lucide "chart-pie", {"class": "text-muted-foreground"} %}
+    Pie
+  </span>
 </div>
 {% endcall %}
 {% endset %}

docs/src/components/sidebar.njk

@@ -6,46 +6,41 @@ toc:
   - label: Usage
     id: usage
     children:
-      - label: HTML + Javascript
-        id: usage-default
+      - label: HTML + JavaScript
+        id: usage-html-js
+        children:
+          - label: "Step 1: Include the JavaScript files"
+            id: usage-html-js-1
+          - label: "Step 2: Add your sidebar HTML"
+            id: usage-html-js-2
+          - label: HTML structure
+            id: usage-html-js-3
+          - label: JavaScript events
+            id: usage-html-js-4
       - label: Jinja and Nunjucks
         id: usage-macro
 ---
 
-{% from "macros/code_preview.njk" import code_preview %}
 {% from "macros/code_block.njk" import code_block %}
 {% from "sidebar.njk" import sidebar %}
 
 <h2 id="usage"><a href="#usage">Usage</a></h2>
 
-<h3 id="usage-default"><a href="#usage-default">HTML + Javascript</a></h3>
+<h3 id="usage-html-js"><a href="#usage-html-js">HTML + JavaScript</a></h3>
 
-<div class="alert my-6">
-  {% lucide "circle-alert" %}
-  <h2>This component requires Javascript.</h2>
-</div>
+<h4 id="usage-html-js-1"><a href="#usage-html-js-1">Step 1: Include the JavaScript files</a></h4>
 
 <section class="prose">
-  <p>To use a sidebar, you will need the sidebar itself and a sibling container for the content of the page (e.g. <code>&lt;main&gt;</code>), with the following structure for the sidebar:</p>
-
-  <ul>
-    <li>A <code>&lt;div class="sidebar"&gt;</code> which wraps around the entire component and holds it state (e.g. open/close). It accepts an optional <code>data-side</code> set to <code>left</code>, or <code>right</code> to specify the side of the sidebar (defaults to <code>left</code>).</li>
-    <li>A <code>&lt;nav&gt;</code> that contains the actual sidebar with the following children:
-      <ul>
-        <li>A <code>&lt;header&gt;</code> and <code>&lt;footer&gt;</code> for the header and footer of the sidebar (fixed position).</li>
-        <li>A <code>&lt;section&gt;</code> for the main navigation list. To add links, you <b>must</b> wrap them in a <code>&lt;div role="group"&gt;</code> first. These groups can contain <code>&lt;h3"&gt;</code> for group headings and lists (i.e. <code>&lt;ul&gt;</code>) of links or buttons. You can also use <code>&lt;details&gt;</code> to wrap around collapsbile sections.</li>
-      </ul>
-    </li>
-  </ul>
-
-  <p>Any elememt on the page can toggle, open or close the sidebar by dispatching the <code>sidebar:toggle</code>, <code>sidebar:open</code> or <code>sidebar:close</code> events.</p>
-
-  <p>You can include the Javascript code provided below, load it as an individual file or use the CLI. Some Alpine.js properties are also required on certain elements (e.g. <code class="text-xs">x-bind</code>, <code class="text-xs">x-data</code>, <code class="text-xs">@click</code>).</p>
+  <p>You can either <a href="/installation/#install-cdn-all">include the JavaScript file for all the components</a>, or just the one for this component by adding this to the <code>&lt;head&gt;</code> of your page:</p>
 </section>
 
+{% set code_script %}<script src="https://cdn.jsdelivr.net/npm/basecoat-css@{{ pkg.version }}/dist/js/basecoat.min.js" defer></script>
+<script src="https://cdn.jsdelivr.net/npm/basecoat-css@{{ pkg.version }}/dist/js/sidebar.min.js" defer></script>{% endset %}
+{{ code_block(code_script | prettyHtml, "html") }}
+
 <div class="flex flex-wrap gap-2 my-6">
   <a class="badge-outline" href="/installation/#install-js">
-    Components with Javascript
+    Components with JavaScript
     {% lucide "arrow-right" %}
   </a>
   <a class="badge-outline" href="/installation/#install-cli">
@@ -53,16 +48,17 @@ toc:
     {% lucide "arrow-right" %}
   </a>
   <a class="badge-outline" href="https://github.com/hunvreus/basecoat/blob/main/src/js/sidebar.js" target="_blank">
-    Individual JS file (sidebar.js)
+    sidebar.js
     {% lucide "arrow-right" %}
   </a>
 </div>
 
+<h4 id="usage-html-js-2"><a href="#usage-html-js-2">Step 2: Add your sidebar HTML</a></h4>
+
 {% set code_html %}
 {% set icon_square_terminal %}{% lucide "square-terminal" %}{% endset %}
 {% set icon_bot %}{% lucide "bot" %}{% endset %}
 {% set icon_settings %}{% lucide "settings" %}{% endset %}
-
 {% set menu = [
   { type: "group", label: "Getting started", items: [
     { label: "Playground", url: "#", icon: icon_square_terminal },
@@ -75,7 +71,6 @@ toc:
     ] }
   ]}
 ] %}
-
 {{ sidebar(
   label="Sidebar navigation",
   content_attrs={
@@ -84,27 +79,100 @@ toc:
   menu=menu
 ) }}
 <main>
-  <button type="button" @click="$dispatch('sidebar:toggle')">Toggle sidebar</button>
+  <button type="button" onclick="document.dispatchEvent(new CustomEvent('basecoat:sidebar'))">Toggle sidebar</button>
   <h1>Content</h1>
 </main>
 {% endset %}
+{{ code_block(code_html | prettyHtml, "html") }}
 
-{% set code_script %}
-<script>
-{% fetchCode "src/js/sidebar.js" %}
+<h4 id="usage-html-js-3"><a href="#usage-html-js-3">HTML structure</a></h4>
 
-document.addEventListener('alpine:init', () => {
-  window.basecoat.registerSidebar(Alpine);
-});
-</script>
-{% endset %}
+<section class="prose">
+  <dl>
+    <dt><code class="highlight language-html">&lt;aside class="sidebar" aria-hidden="false"&gt;</code></dt>
+    <dd>Wraps around the entire component. It can have the following attributes:
+      <ul>
+        <li><code>aria-hidden="true"</code>: controls the default state of the sidebar (hidden or visible).</li>
+        <li><code>data-side="left"</code>: specifies the side of the sidebar (<code>left</code> or <code>right</code>, defaults to <code>left</code>).</li>
+      </ul>
+    </dd>
+      <dl>
+        <dt><code class="highlight language-html">&lt;nav&gt;</code></dt>
+        <dd>
+          <p>The navigation element that contains the sidebar's content. It can have the following attributes:</p>
+          <ul>
+            <li><code>id="{BUTTON_ID}"</code>: linked to by the <code>aria-labelledby</code> attribute of the listbox.</li>
+            <li><code>aria-haspopup="menu"</code>: indicates that the button opens a menu.</li>
+            <li><code>aria-controls="{ MENU_ID }"</code>: points to the menu's id.</li>
+            <li><code>aria-expanded="false"</code>: tracks the popover's state.</li>
+          </ul>
+          <dl>
+            <dt><code class="highlight language-html">&lt;header&gt;</code> <span class="badge-secondary">Optional</span></dt>
+            <dd>The header of the sidebar.</dd>
+            <dt><code class="highlight language-html">&lt;section&gt;</code></dt>
+            <dd>The main navigation list.
+              <dl>
+                <dt><code class="highlight language-html">&lt;div role="group"&gt;</code></dt>
+                <dd>Group of options, can have a <code>aria-labelledby</code> attribute to link to a heading.</dd>
+                <dt><code class="highlight language-html">&lt;span role="heading"&gt;</code></dt>
+                <dd>Group heading, must have an <code>id</code> attribute if you use the <code>aria-labelledby</code> attribute on the group.</dd>
+                <dt><code class="highlight language-html">&lt;ul&gt;</code></dt>
+                <dd>List of links or buttons.
+                  <dl>
+                    <dt><code class="highlight language-html">&lt;li&gt;</code></dt>
+                    <dd>Individual item.
+                      <dl>
+                        <dt><code class="highlight language-html">&lt;a&gt;</code></dt>
+                        <dd>A link. By default, clicking on a link will close the sidebar on mobile unless the <code>data-keep-mobile-sidebar-open</code> attribute is present.</dd>
+                        <dt><code class="highlight language-html">&lt;button&gt;</code></dt>
+                        <dd>A button. By default, clicking on a button will close the sidebar on mobile unless the <code>data-keep-mobile-sidebar-open</code> attribute is present.</dd>
+                        <dt><code class="highlight language-html">&lt;details&gt;</code></dt>
+                        <dd>Collapsible section.
+                          <dl>
+                            <dt><code class="highlight language-html">&lt;summary&gt;</code></dt>
+                            <dd>Summary of the collapsible section.</dd>
+                            <dt><code class="highlight language-html">&lt;ul&gt;</code></dt>
+                            <dd>List of links or buttons.</dd>
+                          </dl>
+                        </dd>
+                      </dl>
+                    </dd>
+                  </dl>
+                </dd>
+              </dl>
+            </dd>
+            <dt><code class="highlight language-html">&lt;footer&gt;</code> <span class="badge-secondary">Optional</span></dt>
+            <dd>The footer of the sidebar.</dd>
+          </dl>
+        </dd>
+      </dl>
+    </dd>
+    <dt><code class="highlight language-html">&lt;main&gt;</code></dt>
+    <dd>A wrapper for the content of the page.</dd>
+    <dt><code class="highlight language-html">&lt;button type="button" onclick="document.dispatchEvent(new CustomEvent('basecoat:sidebar'))"&gt;</code></dt>
+    <dd>A button to toggle the sidebar. If you want to use multiple sidebars you will need to add unique ids to the sidebars (i.e. <code>&lt;aside class="sidebar" id="{SIDEBAR_ID}"&gt;</code>) and refer to them in the event <code>detail</code> (i.e. <code>document.dispatchEvent(new CustomEvent('basecoat:sidebar', { detail: { id: '{SIDEBAR_ID}' } }));</code>).</dd>
+  </dl>
+</section>
 
-{% from "tabs.njk" import tabs %}
-{% set tabsets = [
-  { tab: "HTML", panel: code_block(code_html | prettyHtml, class="") },
-  { tab: "Javascipt (Alpine.js)", panel: code_block(code_script | prettyHtml, class="") }
-] %}
-{{ tabs(id="sidebar", tabsets=tabsets) }}
+<h4 id="usage-html-js-4"><a href="#usage-html-js-4">JavaScript events</a></h4>
+
+<section class="prose">
+  <dl>
+    <dt><code>basecoat:initialized</code></dt>
+    <dd>Once the component is fully initialized, it dispatches a custom (non-bubbling) <code>basecoat:initialized</code> event on itself.</dd>
+    <dt><code>basecoat:sidebar</code></dt>
+    <dd>
+      <p>Sidebars listen for this event on <code>document</code> to open, close or toggle themselves. By default, the event will toggle the sidebar, but can be used to open or close if you add an <code>action</code> to the detail. Additionally, if you have multiple sidebars on the page, you can target a specific sidebar by adding its <code>id</code> to the detail:</p>
+        {% set code_trigger %}<!-- Toggles the sidebar -->
+<button type="button" onclick="document.dispatchEvent(new CustomEvent('basecoat:sidebar'));">Toggle sidebar</button>
+<!-- Opens the `#main-navigation` sidebar -->
+<button type="button" onclick="document.dispatchEvent(new CustomEvent('basecoat:sidebar', { detail: { id: 'main-navigation', action: 'open' } }));">Open sidebar</button>
+<!-- Closes the sidebar -->
+<button type="button" onclick="document.dispatchEvent(new CustomEvent('basecoat:sidebar', { detail: { action: 'close' } }));">Close sidebar</button>{% endset %}
+        {{ code_block(code_trigger | prettyHtml, "html") }}
+    </dd>
+  </dl>
+</section>
 
 <h3 id="usage-macro"><a href="#usage-macro">Jinja and Nunjucks</a></h3>
 
@@ -148,4 +216,4 @@ document.addEventListener('alpine:init', () => {
   <h1>Content</h1>
 </main>
 {% endraw %}{% endset%}
-{{ code_block(raw_code, "jinja") }}
+{{ code_block(raw_code, "jinja") }}

docs/src/components/slider.njk

@@ -16,18 +16,26 @@ toc:
   min="0"
   max="100"
   value="50"
-  x-data="{
-    updatePercent(el) {
+>
+<script>
+  (() => {
+    const sliders = document.querySelectorAll('input[type="range"].input');
+    if (!sliders) return;
+
+    const updateSlider = (el) => {
       const min = parseFloat(el.min || 0);
       const max = parseFloat(el.max || 100);
       const value = parseFloat(el.value);
       const percent = (max === min) ? 0 : ((value - min) / (max - min)) * 100;
       el.style.setProperty('--slider-value', `${percent}%`);
-    }
-  }"
-  x-init="updatePercent($el)"
-  @input="updatePercent($el)"
->{% endset %}
+    };
+
+    sliders.forEach(slider => {
+      updateSlider(slider);
+      slider.addEventListener('input', (event) => updateSlider(event.target));
+    });
+  })();
+</script>{% endset %}
 {{ code_preview("slider", code, "w-full max-w-sm") }}
 
 <h2 id="usage"><a href="#usage">Usage</a></h2>

docs/src/components/spinner.njk

@@ -0,0 +1,214 @@
+---
+layout: layouts/page.njk
+title: Spinner
+description: An indicator that can be used to show a loading state.
+toc:
+  - label: Usage
+    id: usage
+  - label: Examples
+    id: examples
+    children:
+      - label: Size
+        id: example-size
+      - label: Color
+        id: example-color
+      - label: Button
+        id: example-button
+      - label: Badge
+        id: example-badge
+      - label: Input Group
+        id: example-input-group
+      - label: Empty
+        id: example-empty
+      - label: Item
+        id: example-item
+---
+
+{% from "macros/code_preview.njk" import code_preview %}
+{% from "macros/code_block.njk" import code_block %}
+
+<div class="alert mb-6">
+  {% lucide "circle-alert" %}
+  <h2>There is no dedicated Spinner component in Basecoat.</h2>
+</div>
+
+{% set code_default %}
+<article class="group/item flex items-center border text-sm rounded-md transition-colors flex-wrap outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] border-transparent bg-muted/50 p-4 gap-4">
+  <div class="flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:size-4">
+    {% lucide "loader-circle", { "role": "status", "aria-label": "Loading", "class": "animate-spin" } %}
+  </div>
+  <div class="flex flex-1 flex-col gap-1">
+    <h3 class="flex w-fit items-center gap-2 text-sm leading-snug font-medium line-clamp-1">Processing payment...</h3>
+  </div>
+  <div class="flex flex-col gap-1 flex-none text-center">
+    <p class="text-muted-foreground line-clamp-2 text-sm leading-normal font-normal text-balance [&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4">$100.00</p>
+  </div>
+</article>
+{% endset %}
+
+{{ code_preview("spinner-default", code_default, class="w-full max-w-xs") }}
+
+<h2 id="usage"><a href="#usage">Usage</a></h2>
+
+<section class="prose">
+  <p>Spinners are pure HTML using the <code>loader-circle</code> Lucide icon with the <code>animate-spin</code> Tailwind utility. Add <code>role="status"</code> and <code>aria-label="Loading"</code> for accessibility.</p>
+  <p>Browse the examples below and copy the pattern that fits your needs.</p>
+</section>
+
+<h2 id="examples"><a href="#examples">Examples</a></h2>
+
+<h3 id="example-size"><a href="#example-size">Size</a></h3>
+
+<section class="prose">
+  <p>Use the <code>size-*</code> utility class to change the size of the spinner.</p>
+</section>
+
+{% set code_size %}
+<div class="flex items-center gap-6">
+  {% lucide "loader-circle", { "role": "status", "aria-label": "Loading", "class": "size-3 animate-spin" } %}
+  {% lucide "loader-circle", { "role": "status", "aria-label": "Loading", "class": "size-4 animate-spin" } %}
+  {% lucide "loader-circle", { "role": "status", "aria-label": "Loading", "class": "size-6 animate-spin" } %}
+  {% lucide "loader-circle", { "role": "status", "aria-label": "Loading", "class": "size-8 animate-spin" } %}
+</div>
+{% endset %}
+
+{{ code_preview("spinner-size", code_size) }}
+
+<h3 id="example-color"><a href="#example-color">Color</a></h3>
+
+<section class="prose">
+  <p>Use the <code>text-*</code> utility class to change the color of the spinner.</p>
+</section>
+
+{% set code_color %}
+<div class="flex items-center gap-6">
+  {% lucide "loader-circle", { "role": "status", "aria-label": "Loading", "class": "size-6 animate-spin text-red-500" } %}
+  {% lucide "loader-circle", { "role": "status", "aria-label": "Loading", "class": "size-6 animate-spin text-green-500" } %}
+  {% lucide "loader-circle", { "role": "status", "aria-label": "Loading", "class": "size-6 animate-spin text-blue-500" } %}
+  {% lucide "loader-circle", { "role": "status", "aria-label": "Loading", "class": "size-6 animate-spin text-yellow-500" } %}
+  {% lucide "loader-circle", { "role": "status", "aria-label": "Loading", "class": "size-6 animate-spin text-purple-500" } %}
+</div>
+{% endset %}
+
+{{ code_preview("spinner-color", code_color) }}
+
+<h3 id="example-button"><a href="#example-button">Button</a></h3>
+
+<section class="prose">
+  <p>Add a spinner to a button to indicate a loading state.</p>
+</section>
+
+{% set code_button %}
+<div class="flex flex-col items-center gap-4">
+  <button class="btn-sm" disabled>
+    {% lucide "loader-circle", { "role": "status", "aria-label": "Loading", "class": "animate-spin" } %}
+    Loading...
+  </button>
+  <button class="btn-sm-outline" disabled>
+    {% lucide "loader-circle", { "role": "status", "aria-label": "Loading", "class": "animate-spin" } %}
+    Please wait
+  </button>
+  <button class="btn-sm-secondary" disabled>
+    {% lucide "loader-circle", { "role": "status", "aria-label": "Loading", "class": "animate-spin" } %}
+    Processing
+  </button>
+</div>
+{% endset %}
+
+{{ code_preview("spinner-button", code_button) }}
+
+<h3 id="example-badge"><a href="#example-badge">Badge</a></h3>
+
+{% set code_badge %}
+<div class="flex items-center gap-4">
+  <span class="badge">
+    {% lucide "loader-circle", { "role": "status", "aria-label": "Loading", "class": "animate-spin" } %}
+    Syncing
+  </span>
+  <span class="badge-secondary">
+    {% lucide "loader-circle", { "role": "status", "aria-label": "Loading", "class": "animate-spin" } %}
+    Updating
+  </span>
+  <span class="badge-outline">
+    {% lucide "loader-circle", { "role": "status", "aria-label": "Loading", "class": "animate-spin" } %}
+    Processing
+  </span>
+</div>
+{% endset %}
+
+{{ code_preview("spinner-badge", code_badge) }}
+
+<h3 id="example-input-group"><a href="#example-input-group">Input Group</a></h3>
+
+<section class="prose">
+  <p>Input groups can have spinners positioned inside them.</p>
+</section>
+
+{% set code_input_group %}
+<div class="flex w-full max-w-md flex-col gap-4">
+  <div class="relative">
+    <input type="text" class="input pr-9" placeholder="Send a message..." disabled>
+    <div class="absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none text-muted-foreground [&>svg]:size-4">
+      {% lucide "loader-circle", { "role": "status", "aria-label": "Loading", "class": "animate-spin" } %}
+    </div>
+  </div>
+
+  <div class="relative">
+    <textarea class="textarea pr-10 min-h-27 pb-12" placeholder="Send a message..." disabled></textarea>
+    <footer role="group" class="absolute bottom-0 px-3 pb-3 pt-1.5 flex items-center w-full gap-2">
+      {% lucide "loader-circle", { "role": "status", "aria-label": "Loading", "class": "size-4 animate-spin text-muted-foreground" } %}
+      <span class="text-sm text-muted-foreground">Validating...</span>
+      <button type="button" class="btn-sm-icon h-6 w-7.5 ml-auto rounded">
+        {% lucide "arrow-up" %}
+      </button>
+    </footer>
+  </div>
+</div>
+{% endset %}
+
+{{ code_preview("spinner-input-group", code_input_group, class="w-full max-w-md") }}
+
+<h3 id="example-empty"><a href="#example-empty">Empty</a></h3>
+
+<section class="prose">
+  <p>Use a spinner in empty states to indicate a loading or processing state.</p>
+</section>
+
+{% set code_empty %}
+<div class="flex min-w-0 flex-1 flex-col items-center justify-center gap-6 rounded-lg p-6 text-center text-balance md:p-12 text-neutral-800 dark:text-neutral-300">
+  <header class="flex max-w-sm flex-col items-center gap-3 text-center">
+    <div class="mb-2 bg-muted text-foreground flex size-10 shrink-0 items-center justify-center rounded-lg [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-6">
+      {% lucide "loader-circle", { "role": "status", "aria-label": "Loading", "class": "animate-spin size-4" } %}
+    </div>
+    <h3 class="text-lg font-semibold tracking-tight">Processing your request</h3>
+    <p class="text-muted-foreground text-sm/relaxed">Please wait while we process your request. Do not refresh the page.</p>
+  </header>
+  <section class="flex w-full max-w-sm min-w-0 flex-col items-center gap-3">
+    <button class="btn-sm-outline">Cancel</button>
+  </section>
+</div>
+{% endset %}
+
+{{ code_preview("spinner-empty", code_empty) }}
+
+<h3 id="example-item"><a href="#example-item">Item</a></h3>
+
+{% set code_item %}
+<article class="group/item flex items-center border text-sm rounded-md transition-colors [a]:hover:bg-accent/50 [a]:transition-colors duration-100 flex-wrap outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] border-border p-4 gap-4">
+  <div class="flex shrink-0 items-center justify-center gap-2 self-start [&_svg]:pointer-events-none size-8 border rounded-md bg-muted [&_svg:not([class*='size-'])]:size-4">
+    {% lucide "loader-circle", { "role": "status", "aria-label": "Loading", "class": "animate-spin size-4 text-muted-foreground" } %}
+  </div>
+  <div class="flex flex-1 flex-col gap-1">
+    <h3 class="flex w-fit items-center gap-2 text-sm leading-snug font-medium">Downloading...</h3>
+    <p class="text-muted-foreground line-clamp-2 text-sm leading-normal font-normal text-balance [&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4">129 MB / 1000 MB</p>
+  </div>
+  <button class="btn-sm-outline self-start">Cancel</button>
+  <footer class="flex basis-full items-center justify-between gap-2">
+    <div class="bg-primary/20 relative h-2 w-full overflow-hidden rounded-full">
+      <div id="demo-progress" class="bg-primary h-full w-full flex-1 transition-all" style="width: 13%"></div>
+    </div>
+  </footer>
+</article>
+{% endset %}
+
+{{ code_preview("spinner-item", code_item, class="w-full max-w-md") }}

docs/src/components/table.njk

@@ -10,7 +10,8 @@ toc:
 {% from "macros/code_preview.njk" import code_preview %}
 {% from "macros/code_block.njk" import code_block %}
 
-{% set code %}<table class="table">
+{% set code %}<div class="overflow-x-auto">
+<table class="table">
   <caption>A list of your recent invoices.</caption>
   <thead>
     <tr>
@@ -70,7 +71,8 @@ toc:
       <td class="text-right">$2,500.00</td>
     </tr>
   </tfoot>
-</table>{% endset %}
+</table>
+</div>{% endset %}
 {{ code_preview("table", code, "w-full") }}
 
 <h2 id="usage"><a href="#usage">Usage</a></h2>

docs/src/components/tabs.njk

@@ -6,8 +6,17 @@ toc:
   - label: Usage
     id: usage
     children:
-      - label: HTML + Javascript
+      - label: HTML + JavaScript
         id: usage-default
+        children:
+          - label: "Step 1: Include the JavaScript files"
+            id: usage-html-js-1
+          - label: "Step 2: Add your select HTML"
+            id: usage-html-js-2
+          - label: HTML structure
+            id: usage-html-js-3
+          - label: JavaScript events
+            id: usage-html-js-4
       - label: Jinja and Nunjucks
         id: usage-macro
 ---
@@ -71,47 +80,27 @@ toc:
   id='demo-tabs-with-panels',
   tabsets=tabsets_demo,
   main_attrs={ "class": "w-full" },
-  tablist_attrs={ "class": "w-full" },
-  register_on=["alpine:init", "htmx:afterSwap"]
+  tablist_attrs={ "class": "w-full" }
 ) }}
 {% endset %}
 
-{% set code_script %}
-<script>
-{% fetchCode "src/js/tabs.js" %}
-
-document.addEventListener('alpine:init', () => {
-  window.basecoat.registerTabs(Alpine);
-});
-</script>
-{% endset %}
-
-{{ code_preview("tabs", code_script | prettyHtml ~ code_html | prettyHtml, "max-w-[300px] w-full") }}
+{{ code_preview("tabs", code_html | prettyHtml, "max-w-[300px] w-full") }}
 
 <h2 id="usage"><a href="#usage">Usage</a></h2>
 
-<h3 id="usage-default"><a href="#usage-default">HTML + Javascript</a></h3>
-
-<div class="alert my-6">
-  {% lucide "circle-alert" %}
-  <h2>This component requires Javascript.</h2>
-</div>
+<h4 id="usage-html-js-1"><a href="#usage-html-js-1">Step 1: Include the JavaScript files</a></h4>
 
 <section class="prose">
-  <p>The component is structured as such:</p>
-
-  <ul>
-    <li>A <code>&lt;div class="tabs"&gt;</code> which wraps around the entire component and holds it state (e.g. open/close).</li>
-    <li>A <code>&lt;nav role="tablist"&gt;</code> that holds the tab buttons (<code>&lt;button role="tab"&gt;</code>).</li>
-    <li>A series of <code>&lt;div role="tabpanel"&gt;</code> that holds the tab panels corresponding to each tab button.</li>
-  </ul>
-
-  <p>You can include the Javascript code provided below, load it as an individual file or use the CLI. Some Alpine.js properties are also required on certain elements (e.g. <code class="text-xs">x-bind</code>, <code class="text-xs">x-data</code>, <code class="text-xs">@click</code>).</p>
+  <p>You can either <a href="/installation/#install-cdn-all">include the JavaScript file for all the components</a>, or just the one for this component by adding this to the <code>&lt;head&gt;</code> of your page:</p>
 </section>
 
+{% set code_script %}<script src="https://cdn.jsdelivr.net/npm/basecoat-css@{{ pkg.version }}/dist/js/basecoat.min.js" defer></script>
+<script src="https://cdn.jsdelivr.net/npm/basecoat-css@{{ pkg.version }}/dist/js/tabs.min.js" defer></script>{% endset %}
+{{ code_block(code_script | prettyHtml, "html") }}
+
 <div class="flex flex-wrap gap-2 my-6">
   <a class="badge-outline" href="/installation/#install-js">
-    Components with Javascript
+    Components with JavaScript
     {% lucide "arrow-right" %}
   </a>
   <a class="badge-outline" href="/installation/#install-cli">
@@ -119,17 +108,46 @@ document.addEventListener('alpine:init', () => {
     {% lucide "arrow-right" %}
   </a>
   <a class="badge-outline" href="https://github.com/hunvreus/basecoat/blob/main/src/js/tabs.js" target="_blank">
-    Individual JS file (tabs.js)
+    tabs.js
     {% lucide "arrow-right" %}
   </a>
 </div>
 
-{% from "tabs.njk" import tabs %}
-{% set tabsets = [
-  { tab: "HTML", panel: code_block(code_html | prettyHtml, class="") },
-  { tab: "Javascipt (Alpine.js)", panel: code_block(code_script | prettyHtml, class="") }
-] %}
-{{ tabs(id="combobox", tabsets=tabsets) }}
+<h4 id="usage-html-js-2"><a href="#usage-html-js-2">Step 2: Add your select HTML</a></h4>
+
+{{ code_block(code_html | prettyHtml, "html") }}
+
+<h4 id="usage-html-js-3"><a href="#usage-html-js-3">HTML structure</a></h4>
+
+<section class="prose">
+  <dl>
+    <dt><code class="highlight language-html">&lt;div class="tabs"&gt;</code></dt>
+    <dd>Wraps around the entire component.
+      <dl>
+        <dt><code class="highlight language-html">&lt;nav role="tablist" aria-orientation="horizontal"&gt;</code></dt>
+        <dd>The tablist containing the tab buttons
+          <dl>
+            <dt><code class="highlight language-html">&lt;button role="tab" id="{ TAB_ID }" aria-controls="{ PANEL_ID }" aria-selected="false" tabindex="0"&gt;</code></dt>
+            <dd>The tab button. When active, the <code>aria-selected</code> attribute is set to <code>true</code>. <code>tabindex="0"</code> is required for keyboard navigation.</dd>
+          </dl>
+        </dd>
+      </dl>
+    </dd>
+    <dl>
+      <dt><code class="highlight language-html">&lt;div role="tabpanel" id="{ PANEL_ID }" aria-labelledby="{ TAB_ID }" tabindex="-1" aria-selected="false"&gt;</code></dt>
+      <dd>The tab panel. When active, the <code>aria-selected</code> attribute is set to <code>true</code>.</dd>
+    </dl>
+  </dl>
+</section>
+
+<h4 id="usage-html-js-4"><a href="#usage-html-js-4">JavaScript events</a></h4>
+
+<section class="prose">
+  <dl>
+    <dt><code>basecoat:initialized</code></dt>
+    <dd>Once the component is fully initialized, it dispatches a custom (non-bubbling) <code>basecoat:initialized</code> event on itself.</dd>
+  </dl>
+</section>
 
 <h3 id="usage-macro"><a href="#usage-macro">Jinja and Nunjucks</a></h3>
 
@@ -209,7 +227,6 @@ document.addEventListener('alpine:init', () => {
   id='demo-tabs-with-panels',
   tabsets=tabsets_demo,
   main_attrs={ "class": "w-full" },
-  tablist_attrs={ "class": "w-full" },
-  register_on=["alpine:init", "htmx:afterSwap"]
+  tablist_attrs={ "class": "w-full" }
 ) }}{% endraw %}{% endset%}
 {{ code_block(raw_code, "jinja") }}

docs/src/components/textarea.njk

@@ -1,6 +1,6 @@
 ---
 layout: layouts/page.njk
-title: Teaxtarea
+title: Textarea
 description: Displays a form textarea or a component that looks like a textarea.
 toc:
   - label: Usage

docs/src/components/theme-switcher.njk

@@ -0,0 +1,111 @@
+---
+layout: layouts/page.njk
+title: Theme Switcher
+description: A component that allows the user to switch between light and dark mode.
+toc:
+  - label: Usage
+    id: usage
+    children:
+      - label: HTML + JavaScript
+        id: usage-html-js
+        children:
+          - label: "Step 1: Include the JavaScript script"
+            id: usage-html-js-1
+          - label: "Step 2: Add your switcher"
+            id: usage-html-js-2
+          - label: JavaScript events
+            id: usage-html-js-3
+---
+
+<div class="alert mb-6">
+  {% lucide "circle-alert" %}
+  <h2>There is no dedicated theme switcher component in Basecoat.</h2>
+  <section><p>Instead, we offer a short JavaScript <code>&lt;script&gt;</code> block you can insert in the <code>&lt;head&gt;</code> of your page.</p></section>
+</div>
+
+
+{% from "macros/code_preview.njk" import code_preview %}
+{% from "macros/code_block.njk" import code_block %}
+
+{% set code %}<button
+  type="button"
+  aria-label="Toggle dark mode"
+  data-tooltip="Toggle dark mode"
+  data-side="bottom"
+  onclick="document.dispatchEvent(new CustomEvent('basecoat:theme'))"
+  class="btn-icon-outline size-8"
+>
+  <span class="hidden dark:block">{% lucide "sun" %}</span>
+  <span class="block dark:hidden">{% lucide "moon" %}</span>
+</button>{% endset %}
+{{ code_preview("button", code) }}
+
+<h2 id="usage"><a href="#usage">Usage</a></h2>
+
+<h3 id="usage-html-js"><a href="#usage-html-js">HTML + JavaScript</a></h3>
+
+<h4 id="usage-html-js-1"><a href="#usage-html-js-1">Step 1: Include the JavaScript script</a></h4>
+
+<section class="prose">
+  <p>Insert the following JavaScript block right at the beginning of the <code>&lt;head&gt;</code> your page. We do this instead of using a separate file to ensure the theme is defined before the page loads, avoiding a flash of unstyled or mist-styled content.</p>
+</section>
+
+{% set code %}<script>
+  (() => {
+    try {
+      const stored = localStorage.getItem('themeMode');
+      if (stored ? stored === 'dark'
+                  : matchMedia('(prefers-color-scheme: dark)').matches) {
+        document.documentElement.classList.add('dark');
+      }
+    } catch (_) {}
+
+    const apply = dark => {
+      document.documentElement.classList.toggle('dark', dark);
+      try { localStorage.setItem('themeMode', dark ? 'dark' : 'light'); } catch (_) {}
+    };
+
+    document.addEventListener('basecoat:theme', (event) => {
+      const mode = event.detail?.mode;
+      apply(mode === 'dark' ? true
+            : mode === 'light' ? false
+            : !document.documentElement.classList.contains('dark'));
+    });
+  })();
+</script>{% endset %}
+{{ code_block(code) }}
+
+<h4 id="usage-html-js-2"><a href="#usage-html-js-2">Step 2: Add your switcher</a></h4>
+
+<section class="prose">
+  <p>To change the theme, you need to dispatch a <code>basecoat:theme</code> event:</p>
+</section>
+
+{% set code %}<button
+  type="button"
+  aria-label="Toggle dark mode"
+  data-tooltip="Toggle dark mode"
+  data-side="bottom"
+  onclick="document.dispatchEvent(new CustomEvent('basecoat:theme'))"
+  class="btn-icon-outline size-8"
+>
+  <span class="hidden dark:block">{% lucide "sun" %}</span>
+  <span class="block dark:hidden">{% lucide "moon" %}</span>
+</button>{% endset %}
+{{ code_block(code) }}
+
+<h4 id="usage-html-js-3"><a href="#usage-html-js-3">JavaScript events</a></h4>
+
+<section class="prose">
+  <dl>
+    <dt><code>basecoat:theme</code></dt>
+    <dd>
+      <p>By default, the event will toggle the theme, but you can also add a <code>mode</code> to the detail to set the theme explicitly:</p>
+        {% set code_trigger %}<!-- Toggles the theme -->
+<button type="button" onclick="document.dispatchEvent(new CustomEvent('basecoat:theme'));">Toggle theme</button>
+<!-- Sets the theme to dark -->
+<button type="button" onclick="document.dispatchEvent(new CustomEvent('basecoat:theme', { detail: { mode: 'dark' } }));">Set dark theme</button>{% endset %}
+        {{ code_block(code_trigger | prettyHtml, "html") }}
+    </dd>
+  </dl>
+</section>

docs/src/components/toast.njk

@@ -6,13 +6,21 @@ toc:
   - label: Usage
     id: usage
     children:
-      - label: HTML + Javascript
-        id: usage-default
+      - label: HTML + JavaScript
+        id: usage-html-js
         children:
-          - label: Append a toast
-            id: usage-append-toast
-          - label: Use $toast()
-            id: usage-use-magic-method
+          - label: "Step 1: Include the JavaScript file"
+            id: usage-html-js-1
+          - label: "Step 2: Add the toaster HTML"
+            id: usage-html-js-2
+          - label: "Step 3: Add your toasts"
+            id: usage-html-js-3
+          - label: HTML structure
+            id: usage-html-js-4
+          - label: JavaScript events
+            id: usage-html-js-5
+          - label: Toast config object
+            id: usage-html-js-6
       - label: Jinja and Nunjucks
         id: usage-macro
 ---
@@ -21,7 +29,7 @@ toc:
 {% from "macros/code_preview.njk" import code_preview %}
 {% from "macros/code_block.njk" import code_block %}
 
-{% set code_htmx %}<button
+{% set code_server_side %}<button
   class="btn-outline"
   hx-trigger="click"
   hx-get="/fragments/toast/success"
@@ -30,46 +38,44 @@ toc:
 >
   Toast from backend (with HTMX)
 </button>{% endset %}
-{{ code_preview("toast-htmx", code_htmx, "max-w-md") }}
+{{ code_preview("toast-server-side", code_server_side, "max-w-md") }}
 
-{% set code_alpine %}<button
+{% set code_client_side %}<button
   class="btn-outline"
-  @click='
-    $toast({
-      category: "success",
-      title: "Success",
-      description: "A success toast called from the front-end.",
-      action: {
-        label: "Dismiss",
-        click: "open =false"
+  onclick="document.dispatchEvent(new CustomEvent('basecoat:toast', {
+    detail: {
+      config: {
+        category: 'success',
+        title: 'Success',
+        description: 'A success toast called from the front-end.',
+        cancel: {
+          label: 'Dismiss'
+        }
       }
-    })
-  '>
+    }
+  }))"
+>
   Toast from front-end
-</button>
-{% endset %}
-{{ code_preview("toast-alpine", code_alpine, "max-w-md") }}
+</button>{% endset %}
+{{ code_preview("toast-client-side", code_client_side, "max-w-md") }}
 
 <h2 id="usage"><a href="#usage">Usage</a></h2>
 
-<h3 id="usage-default"><a href="#usage-default">HTML + Javascript</a></h3>
+<h3 id="usage-html-js"><a href="#usage-html-js">HTML + JavaScript</a></h3>
 
-<div class="alert my-6">
-  {% lucide "circle-alert" %}
-  <h2>This component requires Javascript.</h2>
-</div>
+<h4 id="usage-html-js-1"><a href="#usage-html-js-1">Step 1: Include the JavaScript file</a></h4>
 
 <section class="prose">
-  <p>To use toasts, you will first need to set up the toaster code to the end of your <code>&lt;body&gt;</code> (see HTML below).</p>
-
-  <p>The <code>&lt;template id="toast-template"&gt;</code> bit is only required if you plan on using the <code>$toast()</code> method (see below).</p>
-
-  <p>You will also need to include the Javascript code provided below, load it as an individual file or use the CLI. Some Alpine.js properties are also required on certain elements (e.g. <code class="text-xs">x-bind</code>, <code class="text-xs">x-data</code>, <code class="text-xs">@click</code>).</p>
+  <p>You can either <a href="/installation/#install-cdn-all">include the JavaScript file for all the components</a>, or just the one for this component by adding this to the <code>&lt;head&gt;</code> of your page:</p>
 </section>
 
+{% set code_script %}<script src="https://cdn.jsdelivr.net/npm/basecoat-css@{{ pkg.version }}/dist/js/basecoat.min.js" defer></script>
+<script src="https://cdn.jsdelivr.net/npm/basecoat-css@{{ pkg.version }}/dist/js/toast.min.js" defer></script>{% endset %}
+{{ code_block(code_script | prettyHtml, "html") }}
+
 <div class="flex flex-wrap gap-2 my-6">
   <a class="badge-outline" href="/installation/#install-js">
-    Components with Javascript
+    Components with JavaScript
     {% lucide "arrow-right" %}
   </a>
   <a class="badge-outline" href="/installation/#install-cli">
@@ -77,59 +83,32 @@ toc:
     {% lucide "arrow-right" %}
   </a>
   <a class="badge-outline" href="https://github.com/hunvreus/basecoat/blob/main/src/js/toast.js" target="_blank">
-    Individual JS file (toast.js)
+    toast.js
     {% lucide "arrow-right" %}
   </a>
 </div>
 
-
-{% set code_script %}
-<script>
-{% fetchCode "src/js/popover.js" %}
-
-document.addEventListener('alpine:init', () => {
-  window.basecoat.registerPopover(Alpine);
-});
-</script>
-{% endset %}
-
-{% set code_html_toaster %}{{ toaster() }}{% endset %}
-
-{% from "tabs.njk" import tabs %}
-{% set tabsets = [
-  { tab: "HTML", panel: code_block(code_html_toaster | prettyHtml, class="") },
-  { tab: "Javascipt (Alpine.js)", panel: code_block(code_script | prettyHtml, class="") }
-] %}
-{{ tabs(id="popover", tabsets=tabsets) }}
+<h4 id="usage-html-js-2"><a href="#usage-html-js-2">Step 2: Add the toaster HTML</a></h4>
 
 <section class="prose">
-  <p>Once that's in place, we can do one of two things:</p>
-
-  <ul>
-    <li>Append a <code>&lt;div class="toast"&gt;</code> to the toaster.</li>
-    <li>Use the <code>$toast()</code> Alpine.js "magic method".</li>
-  </ul>
+  <p>Toasts are displayed in a parent element, the "toaster". Add this to this to at the end of your <code>&lt;body&gt;</code>:</p>
 </section>
 
-<h4 id="usage-append-toast"><a href="#usage-append-toast">Append a toast</a></h4>
+{% set code_toaster %}<div id="toaster" class="toaster"></div>{% endset %}
+{{ code_block(code_toaster | prettyHtml, "html") }}
 
 <section class="prose">
-  <p>To display a toast, just append the following to the toaster:</p>
+  <p>You can set up the alignment of the toaster using the <code>data-align</code> attribute: <code>data-align="start"</code>, <code>data-align="center"</code>, or <code>data-align="end"</code> (default to <code>data-align="end"</code>).</p>
 </section>
 
-{% set code_toast_simple %}<div class="toast" x-data="toast" x-bind="$toastBindings">
-  <div class="toast-content">
-    <p>This is a toast.</p>
-  </div>
-</div>{% endset %}
-
-{{ code_block(code_toast_simple | prettyHtml, "html") }}
+<h4 id="usage-html-js-3"><a href="#usage-html-js-3">Step 3: Add your toasts</a></h4>
 
 <section class="prose">
-  <p>You can implement the layout you want within the toast, but here is the standard format used in the examples above:</p>
+  <p>If you decide to server-render your toasts, or load them using asynchronoulsy with something like HTMX, you can just add the toast's markup to the toaster:</p>
 </section>
 
-{% set code_toast %}{{ toast(
+{% set code_toast_html %}<div id="toaster" class="toaster">
+  {{ toast(
   category="success",
   title="Success",
   description="A success toast called from the front-end.",
@@ -137,66 +116,113 @@ document.addEventListener('alpine:init', () => {
     label: "Dismiss",
     click: "close()"
   }
-) }}{% endset %}
-{{ code_block(code_toast | prettyHtml, "html") }}
+) }}
+</div>{% endset %}
+{{ code_block(code_toast_html | prettyHtml, "html") }}
+
+<div class="flex flex-wrap gap-2 my-6">
+  <a class="badge-outline" href="#usage-html-js-5">
+    HTML structure
+    {% lucide "arrow-right" %}
+  </a>
+</div>
 
 <section class="prose">
-  <p>When setting up <code>x-data</code>, you can pass a config object with `category` (e.g. "success", "error", "info", "warning") and `duration` (in milliseconds). By default, the duration will be 3 seconds, and 5 seconds for errors.</p>
-
-  <p>This approach is used in the first example with HTMX: when the button is clicked, we retrieve the a fragment that contains the markup for the toast and append it to <code>#toaster</code>.</p>
+  <p>If you need to create a toast from the front-end, you can dispatch a custom <code>basecoat:toast</code> event as such:</p>
 </section>
 
-{% set code_htmx %}<button
-  class="btn-outline"
-  hx-trigger="click"
-  hx-get="/fragments/toast/success"
-  hx-target="#toaster"
-  hx-swap="beforeend"
->
-  Toast from backend (with HTMX)
-</button>{% endset %}
+{{ code_block(code_client_side | prettyHtml, "html") }}
 
-<h4 id="usage-use-magic-method"><a href="#usage-use-magic-method">Use $toast()</a></h4>
+<div class="flex flex-wrap gap-2 my-6">
+  <a class="badge-outline" href="#usage-html-js-6">
+    Toast config object
+    {% lucide "arrow-right" %}
+  </a>
+</div>
+
+<h4 id="usage-html-js-4"><a href="#usage-html-js-4">HTML structure</a></h4>
 
 <section class="prose">
-  <p>If you want to display a toast directly from the front-end, you can use the <code>$toast()</code> Alpine.js magic method. This is what we're doing in the second example above:</p>
+  <dl>
+    <dt><code class="highlight language-html">&lt;div class="toast"&gt;</code></dt>
+    <dd>Wraps around the toast component. You can add a <code>data-duration</code> attribute to set the duration of the toast in milliseconds (e.g. <code>data-duration="5000"</code> for 5 seconds). If not provided, the default duration is 3000ms (3 seconds) or 5000ms (5 seconds) for <code>error</code> toasts.
+      <dl>
+        <dt><code class="highlight language-html">&lt;div class="toast-content"&gt;</code></dt>
+        <dd>The content of the toast.
+          <dl>
+            <dt><code class="highlight language-html">&lt;svg aria-hidden="true"&gt;</code> <span class="badge-secondary">Optional</span></dt>
+            <dd>The toast's icon.</dd>
+            <dt><code class="highlight language-html">&lt;section&gt;</code></dt>
+            <dd>The toast's message.
+              <dl>
+                <dt><code class="highlight language-html">&lt;h2&gt;</code></dt>
+                <dd>The toast's title.</dd>
+                <dt><code class="highlight language-html">&lt;p&gt;</code> <span class="badge-secondary">Optional</span></dt>
+                <dd>The toast's description.</dd>
+              </dl>
+            </dd>
+            <dt><code class="highlight language-html">&lt;footer&gt;</code> <span class="badge-secondary">Optional</span></dt>
+            <dd>The toast's buttons. When clicked, the toast will be closed (unless the button's <code>onclick</code> is set to <code>e.preventDefault()</code>).
+              <dl>
+                <dt><code class="highlight language-html">&lt;button type="button" class="btn" onclick="{ ONCLICK }"&gt;</code> or <code class="highlight language-html">&lt;a href="{ URL }" class="btn" &gt;</code> <span class="badge-secondary">Optional</span></dt>
+                <dd>The toast's action button. This can either be a link (with a <code>href</code> attribute) or a button (with an <code>onclick</code> attribute).</dd>
+              </dl>
+              <dl>
+                <dt><code class="highlight language-html">&lt;button type="button" class="btn-outline" onclick="{ ONCLICK }"&gt;</code> <span class="badge-secondary">Optional</span></dt>
+                <dd>The toast's cancel button (with an optional <code>onclick</code> attribute).</dd>
+              </dl>
+            </dd>
+          </dl>
+        </dd>
+      </dl>
+    </dd>
+  </dl>
 </section>
 
-{% set code_magic_method %}<button
-  class="btn-outline"
-  @click='
-    $toast({
-      category: "success",
-      title: "Success",
-      description: "A success toast called from the front-end.",
-      action: {
-        label: "Dismiss",
-        click: "open =false"
-      }
-    })
-  '>
-  Toast from front-end
-</button>
-{% endset %}
-{{ code_block(code_magic_method, "html") }}
+<h4 id="usage-html-js-5"><a href="#usage-html-js-5">JavaScript events</a></h4>
 
 <section class="prose">
-  <p>The <code>$toast()</code> method accepts a config object with the following properties:</p>
+  <dl>
+    <dt><code>basecoat:initialized</code></dt>
+    <dd>Once the component is fully initialized, it dispatches a custom (non-bubbling) <code>basecoat:initialized</code> event on the <code>toaster</code> element.</dd>
+    <dt><code>basecoat:toast</code></dt>
+    <dd>
+      <p>The <code>toaster</code> listens for <code>basecoat:toast</code> events on <code>document</code> to create toasts. The event's <code>detail</code> object must contain a <code>config</code> object (see <a href="#usage-html-js-6">JavaScript config object</a> below).</p>
+    </dd>
+  </dl>
+</section>
 
-  <ul>
-    <li><code>duration</code> (optional): the duration of the toast in milliseconds. By default, the duration will be 3 seconds, or 5 seconds if <code>category</code> is "error".</li>
-    <li><code>category</code> (optional): "success", "error", "info", "warning" or any arbitrary string.</li>
-    <li><code>title</code> (optional): the title of the toast.</li>
-    <li><code>description</code> (optional): the description of the toast.</li>
-    <li><code>action</code> (optional): an object to define an action button:
-      <ul>
-        <li><code>label</code>: the label of the action button.</li>
-        <li><code>click</code> (optional): a string of Javascript to execute when the button is clicked.</li>
-        <li><code>url</code> (optional): a URL to link to when the button is clicked.</li>
-      </ul>
-    </li>
-    <li><code>cancel</code> (optional): an object to define a cancel button (similar structure to action).</li>
-  </ul>
+<h4 id="usage-html-js-6"><a href="#usage-html-js-6">Toast config object</a></h4>
+
+<section class="prose">
+  <dl>
+    <dt><code>duration</code> <span class="badge-secondary">Optional</span></dt>
+    <dd>The duration of the toast in milliseconds. If not provided, the default duration is 3000ms (3 seconds) or 5000ms (5 seconds) for <code>error</code> toasts.</dd>
+    <dt><code>category</code> <span class="badge-secondary">Optional</span></dt>
+    <dd>Category of the toast, either <code>success</code>, <code>info</code>, <code>warning</code>, or <code>error</code>.</dd>
+    <dt><code>title</code></dt>
+    <dd>The title of the toast.</dd>
+    <dt><code>description</code> <span class="badge-secondary">Optional</span></dt>
+    <dd>The description of the toast.</dd>
+    <dt><code>action</code> <span class="badge-secondary">Optional</span></dt>
+    <dd>Action button.
+      <dl>
+        <dt><code>label</code> <span class="badge-secondary">Optional</span></dt>
+        <dd>The label of the cancel button. If not provided, the default label is "Dismiss".</dd>
+        <dt><code>onclick</code> <span class="badge-secondary">Optional</span></dt>
+        <dd>The onclick of the cancel button.</dd>
+      </dl>
+    </dd>
+    <dt><code>cancel</code> <span class="badge-secondary">Optional</span></dt>
+    <dd>Cancel button.
+      <dl>
+        <dt><code>label</code> <span class="badge-secondary">Optional</span></dt>
+        <dd>The label of the cancel button. If not provided, the default label is "Dismiss".</dd>
+        <dt><code>onclick</code> <span class="badge-secondary">Optional</span></dt>
+        <dd>The onclick of the cancel button.</dd>
+      </dl>
+    </dd>
+  </dl>
 </section>
 
 <h3 id="usage-macro"><a href="#usage-macro">Jinja and Nunjucks</a></h3>
@@ -242,7 +268,7 @@ document.addEventListener('alpine:init', () => {
 {{ toast(
   title="Event has been created",
   description="Sunday, December 03, 2023 at 9:00 AM",
-  cancel={ label: "Undo", click: "close()" }
+  cancel={ label: "Undo" }
 ) }}{% endraw %}{% endset %}
 
 {% from "tabs.njk" import tabs %}

docs/src/fragments/toast/success.njk

@@ -2,5 +2,6 @@
 {{ toast(
   title="Event has been created",
   description="Sunday, December 03, 2023 at 9:00 AM",
-  cancel={ label: "Undo", click: "close()" }
+  action={ label: "View" },
+  cancel={ label: "Undo" }
 ) }}

docs/src/index.njk

@@ -32,16 +32,17 @@ layout: layouts/layout.njk
                 <p class="text-sm text-muted-foreground">m@example.com</p>
               </div>
               
-              {% call select(
+              {{ select(
                 is_combobox=true,
                 selected="owner",
-                content_attrs={"data-align": "end"}
-              ) %}
-                <div role="option" data-value="viewer">Viewer</div>
-                <div role="option" data-value="developer">Developer</div>
-                <div role="option" data-value="billing">Billing</div>
-                <div role="option" data-value="owner">Owner</div>
-              {% endcall %}
+                popover_attrs={"data-align": "end"},
+                items=[
+                  { type: "item", value: "viewer", label: "Viewer" },
+                  { type: "item", value: "developer", label: "Developer" },
+                  { type: "item", value: "billing", label: "Billing" },
+                  { type: "item", value: "owner", label: "Owner" }
+                ]
+              ) }}
             </li>
             <li class="flex items-center gap-4">
               <img src="/assets/images/avatar-2.png" alt="Jackson Lee" class="w-10 h-10 rounded-full" />
@@ -50,15 +51,17 @@ layout: layouts/layout.njk
                 <p class="text-sm text-muted-foreground">p@example.com</p>
               </div>
               
-              {% call select(
+              {{ select(
                 is_combobox=true,
-                content_attrs={"data-align": "end"}
-              ) %}
-                <div role="option" data-value="viewer">Viewer</div>
-                <div role="option" data-value="developer">Developer</div>
-                <div role="option" data-value="billing">Billing</div>
-                <div role="option" data-value="owner">Owner</div>
-              {% endcall %}
+                popover_attrs={"data-align": "end"},
+                items=[
+                  { type: "item", value: "", label: "Empty" },
+                  { type: "item", value: "viewer", label: "Viewer" },
+                  { type: "item", value: "developer", label: "Developer" },
+                  { type: "item", value: "billing", label: "Billing" },
+                  { type: "item", value: "owner", label: "Owner" }
+                ]
+              ) }}
             </li>
             <li class="flex items-center gap-4">
               <img src="/assets/images/avatar-3.png" alt="Isabella Nguyen" class="w-10 h-10 rounded-full" />
@@ -67,15 +70,16 @@ layout: layouts/layout.njk
                 <p class="text-sm text-muted-foreground">i@example.com</p>
               </div>
               
-              {% call select(
+              {{ select(
                 is_combobox=true,
-                content_attrs={"data-align": "end"}
-              ) %}
-                <div role="option" data-value="viewer">Viewer</div>
-                <div role="option" data-value="developer">Developer</div>
-                <div role="option" data-value="billing">Billing</div>
-                <div role="option" data-value="owner">Owner</div>
-              {% endcall %}
+                popover_attrs={"data-align": "end"},
+                items=[
+                  { type: "item", value: "viewer", label: "Viewer" },
+                  { type: "item", value: "developer", label: "Developer" },
+                  { type: "item", value: "billing", label: "Billing" },
+                  { type: "item", value: "owner", label: "Owner" }
+                ]
+              ) }}
             </li>
           </ul>
         </section>
@@ -228,9 +232,15 @@ layout: layouts/layout.njk
               I can't log in.
             </div>
           </section>
-          <footer class="flex items-center gap-2" x-data="{ message: '' }">
-            <input type="text" class="input w-full" placeholder="Type your message here..." x-model="message" />
-            <button type="button" class="btn-icon" :disabled="!message">
+          <footer class="flex items-center gap-2">
+            <input type="text" class="input w-full" placeholder="Type your message here..." oninput="
+              if (this.value) {
+                this.parentElement.querySelector('button').removeAttribute('disabled');
+              } else {
+                this.parentElement.querySelector('button').setAttribute('disabled', 'true');
+              }
+            "/>
+            <button type="button" class="btn-icon" disabled>
               {% lucide "send"%}
             </button>
           </footer>

docs/src/installation.njk

@@ -3,42 +3,78 @@ layout: layouts/page.njk
 title: Installation
 description: How to install and use Basecoat in your app.
 toc:
-  - label: Installing the CSS
-    id: install-css
+  - label: Install using the CDN
+    id: install-cdn
+    children:
+      - label: Install all components
+        id: install-cdn-all
+      - label: Install specific components
+        id: install-cdn-specific
+  - label: Installing using NPM
+    id: install-npm
     children:
       - label: Add Tailwind CSS
-        id: install-css
+        id: install-npm-tailwind
       - label: Add Basecoat
-        id: install-css-basecoat
+        id: install-npm-basecoat
       - label: Import basecoat in your CSS
-        id: install-css-import
+        id: install-npm-import
+      - label: (Optional) Add JavaScript files
+        id: install-npm-js
       - label: That's it
-        id: install-css-done
-  - label: Components with Javascript
+        id: install-npm-done
+  - label: Components with JavaScript
     id: install-js
   - label: Use the CLI
     id: install-cli
   - label: Use Nunjucks or Jinja macros
     id: install-macros
+  - label: Icons
+    id: install-icons
   - label: Theming
     id: install-theming
+  - label: Customization
+    id: install-customization
 ---
 
 {% from "macros/code_block.njk" import code_block %}
 {% from "tabs.njk" import tabs %}
 
-<h2 id="install-css">Install the CSS</h2>
+<h2 id="install-cdn"><a href="#install-cdn">Install using the CDN</a></h2>
+
+<h3 id="install-cdn-all"><a href="#install-cdn-all">Install all components</a></h3>
+
+<section class="prose">
+  <p>Add the following to the <code>&lt;head&gt;</code> of your HTML file:</p>
+</section>
+
+{% set code %}<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/basecoat-css@{{ pkg.version }}/dist/basecoat.cdn.min.css">
+<script src="https://cdn.jsdelivr.net/npm/basecoat-css@{{ pkg.version }}/dist/js/all.min.js" defer></script>{% endset %}
+{{ code_block(code, "html") }}
+
+<h3 id="install-cdn-specific"><a href="#install-cdn-specific">Install specific components</a></h3>
+
+<section class="prose">
+  <p>While the JavaScript file for all components is small (around 3kB gzipped), you can cherry-pick the components you need as instructed in the component's page (<a href="/components/dropdown-menu">Dropdown Menu</a>, <a href="/components/popover">Popover</a>, <a href="/components/select">Select</a>, <a href="/components/sidebar">Sidebar</a>, <a href="/components/tabs">Tabs</a> and <a href="/components/toast">Toast</a>). For example, to add the <a href="/components/dropdown-menu">Dropdown Menu</a> component, add the following to the <code>&lt;head&gt;</code> of your HTML file:</p>
+</section>
+
+{% set code %}<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/basecoat-css@{{ pkg.version }}/dist/basecoat.cdn.min.css">
+<script src="https://cdn.jsdelivr.net/npm/basecoat-css@{{ pkg.version }}/dist/js/basecoat.min.js" defer></script> <!-- Only needed once to register and initialize components -->
+<script src="https://cdn.jsdelivr.net/npm/basecoat-css@{{ pkg.version }}/dist/js/dropdown-menu.min.js" defer></script>{% endset %}
+{{ code_block(code, "html") }}
+
+<h2 id="install-npm"><a href="#install-npm">Install using NPM</a></h2>
 
 <ol class="[&>h3]:step steps mb-12 md:ml-4 md:border-l md:pl-8">
   <li class="step">
-    <h4 class="mb-4 scroll-m-20 font-semibold tracking-tight" id="install-css-tailwind"><a href="#install-css-tailwind">Add Tailwind CSS</a></h4>
+    <h3 class="mb-4 scroll-m-20 font-semibold tracking-tight" id="install-npm-tailwind"><a href="#install-npm-tailwind">Add Tailwind CSS</a></h3>
     <div class="prose">
       <p>Basecoat uses Tailwind CSS. You need to install it in your project.</p>
       <p><a href="https://tailwindcss.com/docs/installation" target="_blank">Follow the Tailwind CSS installation instructions to get started.</a></p>
     </div>
   </li>
   <li class="step mt-8">
-    <h3 class="mb-4 scroll-m-20 font-semibold tracking-tight" id="install-css-basecoat"><a href="#install-css-basecoat">Add Basecoat</a></h3>
+    <h3 class="mb-4 scroll-m-20 font-semibold tracking-tight" id="install-npm-basecoat"><a href="#install-npm-basecoat">Add Basecoat</a></h3>
     <div class="prose">
       <p>Add Basecoat to your Tailwind CSS file.</p>
     </div>
@@ -58,43 +94,64 @@ toc:
     </div>
   </li>
   <li class="step mt-8">
-    <h3 class="mb-4 scroll-m-20 font-semibold tracking-tight" id="install-css-import"><a href="#install-css-import">Import basecoat in your CSS</a></h3>
+    <h3 class="mb-4 scroll-m-20 font-semibold tracking-tight" id="install-npm-import"><a href="#install-npm-import">Import basecoat in your CSS</a></h3>
     {% set code %}@import "tailwindcss";
 @import "basecoat-css";{% endset %}
     {{ code_block(code, "css") }}
   </li>
   <li class="step mt-8">
-    <h3 class="mb-4 scroll-m-20 font-semibold tracking-tight" id="install-css-done"><a href="#install-css-done">That's it</a></h3>
+    <h3 class="mb-4 scroll-m-20 font-semibold tracking-tight" id="install-npm-js"><a href="#install-npm-js">(Optional) Add JavaScript files</a></h3>
+    <div class="prose">
+      <p>Some components <a href="#install-js">need some JavaScript</a> (e.g. the <a href="/components/tabs">Tabs</a> component). There are two ways to get it into your project:</p>
+
+      <h4 class="mt-6 font-semibold">Using a build tool (Vite, Webpack…)</h4>
+      <p>If your project is ESM-aware you can directly import the scripts. To include all components:</p>
+    </div>
+    {% set code %}{% raw %}import 'basecoat-css/all';{% endraw %}{% endset %}
+    {{ code_block(code, "js") }}
+    <div class="prose">
+      <p>Or cherry-pick specific components, for example:</p>
+    </div>
+    {% set code %}{% raw %}import 'basecoat-css/basecoat';
+import 'basecoat-css/popover';
+import 'basecoat-css/tabs';{% endraw %}{% endset %}
+    {{ code_block(code, "js") }}
+    <div class="prose">
+      <h4 class="mt-6 font-semibold">Without a build tool</h4>
+      <p>Copy the pre-built files from <code>node_modules</code> into your public directory:</p>
+    </div>
+    {% set code %}npx copyfiles -u 1 "node_modules/basecoat-css/dist/js/**/*" public/js/basecoat{% endset %}
+    {{ code_block(code, "bash") }}
+    <div class="prose">
+      <p>Then reference the script you need as well as the <code>basecoat.min.js</code> file (used to register and initialize components):</p>
+    </div>
+    {% set code %}<script src="/js/basecoat/basecoat.min.js" defer></script>
+<script src="/js/basecoat/tabs.min.js" defer></script>{% endset %}
+    {{ code_block(code, "html") }}
+    <div class="prose">
+      <p>See each component page for the minimal script required.</p>
+    </div>
+  </li>
+  <li class="step mt-8">
+    <h3 class="mb-4 scroll-m-20 font-semibold tracking-tight" id="install-npm-done"><a href="#install-npm-done">That's it</a></h3>
     <div class="prose">
       <p>You can now use any of the Basecoat classes in your project (e.g. <code>btn</code>, <code>card</code>, <code>input</code>, etc). Read the documentation about each component to get started (e.g. <a href="/components/button">button</a>, <a href="/components/card">card</a>, <a href="/components/input">input</a>, etc).</p>
-      <p>Some components (e.g. <a href="/components/select">Select</a>) require <a href="#install-js">Javascript code to work</a>.</p>
+      <p>Some components (e.g. <a href="/components/select">Select</a>) require <a href="#install-js">JavaScript code to work</a>.</p>
     </div>
   </li>
 </ol>
 
-<h2 id="install-js"><a href="#install-js">Components with Javascript</a></h2>
+<h2 id="install-js"><a href="#install-js">Components with JavaScript</a></h2>
 
 <div class="prose">
-  <p><b>Some components require Javascript code to work.</b></p>
-  <p>The documentation provides Alpine.js code snippets to cover that. <a href="https://alpinejs.dev/docs/installation" target="_blank">Make sure to install Alpine.js if you decide to use them.</a></p>
-  <p>For simple components like <a href="/components/accordion">Accordion</a> or <a href="/components/slider">Slider</a>, you will notice some inline Alpine.js code that you can just copy along with the rest of the HTML.</p>
-  <p>For more complex components (<a href="/components/dialog">Dialog</a>, <a href="/components/dropdown-menu">Dropdown Menu</a>, <a href="/components/popover">Popover</a>, <a href="/components/select">Select</a>, <a href="/components/tabs">Tabs</a> and <a href="/components/tooltip">Toast</a>), you have one of 2 options:
+  <p><b>A handful of components require JavaScript code to work.</b>, specifically <a href="/components/dropdown-menu">Dropdown Menu</a>, <a href="/components/popover">Popover</a>, <a href="/components/select">Select</a>, <a href="/components/sidebar">Sidebar</a>, <a href="/components/tabs">Tabs</a> and <a href="/components/toast">Toast</a></p>
+
+  <p>If a component requires JavaScript, the documentation page will provide instructions. There are 2 options to add the JavaScript code to your project:</p>
+    
   <ul>
-    <li>Copy the Javascript snippet provided in the documentation page into your project.</li>
-    <li>
-      <p><a href="https://github.com/hunvreus/basecoat/tree/main/src/js" target="_blank">Download the script as a separate file</a> and include it in your project (<a href="#install-cli">or let the CLI do it for you</a>). <b>If you use this approach, make sure to load the file before the Alpine.js core JS file and register the component on the <code>alpine:init</code> event.</b> For example:</p>
-      {% set code %}<script src="/assets/js/dialog.js" defer></script>
-<script>
-  document.addEventListener('alpine:init', () => {
-    window.basecoat.registerDialog(Alpine);
-  });
-</script>
-<script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js" defer></script>{% endset %}
-      {{ code_block(code, "html") }}
-    </li>
+    <li><b>CDN</b>: you either <a href="#install-cdn-all">add the code for all of the components</a> to the <code>&lt;head&gt;</code> of your HTML file, or just the file for the component you want to use as instructed on the component's page.</li>
+    <li><b>Local file</b>: you download the script as a separate file and include it in your project (<a href="#install-cli">or let the CLI do it for you</a>). Once again, you have the choice to include the file for all components at once (<a><code>all.min.js</code> or <code>all.js</code>).</p>
   </ul>
-  <p>You are also welcome to write your own Javascript.</p>
-  <p>All of the components try and implement WAI-ARIA standards to make them accessible.</p>
 </div>
 
 <h2 id="install-cli"><a href="#install-cli">Use the CLI</a></h2>
@@ -117,15 +174,17 @@ toc:
 {{ tabs(id="cli-execution", tabsets=exec_tabsets, label="Execute CLI commands to add components:") }}
 
 <div class="prose my-6">
-  <p>You will be asked to confirm the template engine and destination directory for the Javascript and macros.</p>
+  <p>You will be asked to confirm the template engine and destination directory for the JavaScript and macros.</p>
 </div>
 
 <h2 id="install-macros"><a href="#install-macros">Use Nunjucks or Jinja macros</a></h2>
 
 <div class="prose">
-  <p>For more complex components, you can use <a href="https://mozilla.github.io/nunjucks/" target="_blank">Nunjucks</a> or <a href="https://jinja.palletsprojects.com" target="_blank">Jinja</a> macros to help you generate the HTML and Javascript code.</p>
+  <p>For more complex components, you can use <a href="https://mozilla.github.io/nunjucks/" target="_blank">Nunjucks</a> or <a href="https://jinja.palletsprojects.com" target="_blank">Jinja</a> macros to help you generate the HTML and JavaScript code.</p>
   <p>To install them, either <a href="https://github.com/hunvreus/basecoat/tree/main/src" target="_blank">copy them directly from the GitHub repository</a> or use <a href="#install-cli">the CLI</a> to do the work for you.</p>
-  <p>For example, here's how you could use the <code>select()</code> macro to generate the HTML and Javascript code for a <a href="/components/select">Select</a> component:</p>
+  <p>For example, here's how you could use the <code>select()</code> macro to generate the HTML and JavaScript code for a <a href="/components/select">Select</a> component:</p>
+</div>
+
   {% set code %}{% raw %}{% call select() %}
 <div role="group" aria-labelledby="fruit-options-label">
   <span id="fruit-options-label" role="heading">Fruits</span>
@@ -137,15 +196,32 @@ toc:
 </div>
 {% endcall %}{% endraw %}{% endset %}
   {{ code_block(code, "jinja") }}
-  <p>Make sure to include the Javascript code <b>before</b> Alpine.js core JS file:</p>
-  {% set code %}<script src="/assets/js/select.js" defer></script>
-<script>
-  document.addEventListener('alpine:init', () => {
-    window.basecoat.registerSelect(Alpine);
-  });
-</script>
-<script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js" defer></script>{% endset %}
-{{ code_block(code, "jinja") }}
+
+<h2 id="install-icons"><a href="#install-icons">Icons</a></h2>
+
+<div class="prose">
+  <p>Basecoat uses <a href="https://lucide.dev" target="_blank">Lucide icons</a>. You have three options:</p>
+  
+  <ul>
+    <li><b>Copy SVG code</b>: Visit <a href="https://lucide.dev/icons" target="_blank">lucide.dev/icons</a>, click any icon to copy the SVG, and paste it directly in your HTML. Best for simple projects or occasional icon usage.</li>
+    <li><b>Install lucide</b>: Follow the <a href="https://lucide.dev/guide/installation" target="_blank">installation guide</a> to install the <code>lucide</code> package and dynamically render icons. Best for projects that need many icons or want tree-shaking.</li>
+    <li><b>Use framework packages</b>: Browse <a href="https://lucide.dev/packages" target="_blank">framework-specific packages</a> (React, Vue, Angular, etc.) for component-based icon usage. Best if you're using a supported framework.</li>
+  </ul>
+</div>
+
+<div class="flex flex-wrap gap-2 my-6">
+  <a class="badge-outline" href="https://lucide.dev" target="_blank">
+    Browse icons
+    {% lucide "arrow-right" %}
+  </a>
+  <a class="badge-outline" href="https://lucide.dev/guide/installation" target="_blank">
+    Installation guide
+    {% lucide "arrow-right" %}
+  </a>
+  <a class="badge-outline" href="https://lucide.dev/packages" target="_blank">
+    Packages
+    {% lucide "arrow-right" %}
+  </a>
 </div>
 
 <h2 id="install-theming"><a href="#install-theming">Theming</a></h2>
@@ -159,7 +235,7 @@ toc:
       Import the theme in your CSS file:
       {% set code %}@import "tailwindcss";
 @import "basecoat-css";
-@import "theme.css";{% endset %}
+@import "./theme.css";{% endset %}
       {{ code_block(code, "css") }}
     </li>
   </ul>
@@ -175,14 +251,25 @@ toc:
 <h2 id="install-customization"><a href="#install-manual">Customization</a></h2>
 
 <div class="prose">
-  <p>You can override default styles using Tailwind:</p>
+  <section class="prose">
+    <p>You can override default styles using Tailwind:</p>
+  </section>
+  
   {% set code %}<button class="btn font-normal ">Click me</button>{% endset %}
   {{ code_block(code, "html") }}
-  <p>You can also obviously extend and/or override the existing styles with your own Tailwind files:</p>
+
+  <section class="prose">
+    <p>You can also extend or override the existing styles in your own Tailwind files:</p>
+  </section>
+  
   {% set code %}@import "tailwindcss";
 @import "basecoat-css";
-@import "theme.css";{% endset %}
+@import "./custom.css";{% endset %}
   {{ code_block(code, "css") }}
-  <p>You can also use use the <a href="#install-theming">theme variables</a> to customize many aspects of the components (colors, fonts, sizes, etc).</p>
-  <p><b>If you want to make more drastic changes</b>, I recommend <a href="https://github.com/hunvreus/basecoat/blob/main/src/css/basecoat.css" target="_blank">copying the <code>basecoat.css</code> file</a> into your project and making your changes there.</p>
+  
+  <section class="prose">
+    <p>More importantly, you can use the <a href="#install-theming">theme variables</a> to customize many aspects of the components (colors, fonts, sizes, etc).</p>
+    
+    <p><b>If you want to make more drastic changes</b>, you can <a href="https://github.com/hunvreus/basecoat/blob/main/src/css/basecoat.css" target="_blank">copy the <code>basecoat.css</code> file</a> into your project and make your changes there.</p>
+  </section>
 </div>

docs/src/introduction.njk

@@ -25,7 +25,7 @@ toc:
   <p><b>That's where Basecoat comes in.</b> It gives you modern, accessible components with the simplicity of plain HTML and Tailwind. Basecoat is:</p>
 
   <ul>
-    <li><b>Lightweight</b>: no runtime JS, just CSS and tiny Alpine.js scripts for the more interactive components.</li>
+    <li><b>Lightweight</b>: no runtime JS, just CSS and a tiny bit of vanilla JavaScript for the more interactive components.</li>
     <li><b>Easy to use</b>: add classes like <code>btn</code> or <code>input</code> and you're done.</li>
     <li><b>Framework-agnostic</b>: works with any backend or frontend stack.</li>
     <li><b>Accessible</b>: components follow accessibility best practices.</li>
@@ -42,7 +42,7 @@ toc:
 <div class="prose">
   <p>Add a single CSS file to your Tailwind setup. Use components by dropping in simple classes like <code>btn</code>, <code>form</code>, or <code>card</code>.</p>
 
-  <p>Some components (like modals or dropdowns) use a tiny bit of Alpine.js. You can skip it if you don't need interactivity.</p>
+  <p>Some components (like modals or dropdowns) use a tiny bit of vanilla JavaScript. You can skip it if you don't need interactivity.</p>
 
   <p>There's also a CLI to help you scaffold components and get set up fast.</p>
 

docs/src/llms.txt

@@ -0,0 +1,506 @@
+Basecoat – LLMs Guide
+
+About
+- Basecoat is a Tailwind‑first component library using semantic HTML and small vanilla JS for interactivity. No React required. Framework‑agnostic.
+
+Install
+- Tailwind project: `npm i basecoat-css`
+- In CSS: `@import "tailwindcss";` then `@import "basecoat-css";`
+
+CDN
+- CSS: `<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/basecoat-css@latest/dist/basecoat.cdn.min.css">`
+- JS (all): `<script src="https://cdn.jsdelivr.net/npm/basecoat-css@latest/dist/js/all.min.js" defer></script>`
+- JS (per component): include `basecoat.min.js` then `tabs.min.js`, `select.min.js`, etc.
+
+JavaScript
+- Auto‑init on `DOMContentLoaded`; observes DOM for new nodes.
+- Manual: `window.basecoat.init('<name>')` or `window.basecoat.initAll()`.
+- Packages to import with ESM: `import 'basecoat-css/all'` or `import 'basecoat-css/tabs'`.
+
+Usage
+- CSS‑only components: use classes like `btn`, `card`, `input`, etc.
+- JS components: include the JS and use required roles/attributes (see below).
+
+Theming
+- Tailwind projects can override design tokens (e.g., `primary`, `muted-foreground`).
+- Without Tailwind, use CDN CSS and add overrides after the link tag.
+
+Common pitfalls
+- Do not invent class names; use documented classes only.
+- The package name is `basecoat-css` (not `basecoat`, not `@basecoat/css`).
+- Interactive components require specific roles/attributes; include them.
+- Basecoat is framework‑agnostic; do not mention React/Radix dependencies.
+
+Components
+- Button (CSS): `.btn`, variants like `.btn-secondary`, sizes `.btn-sm`, `.btn-lg`.
+- Button Group (CSS): `.button-group` to group adjacent buttons; supports horizontal/vertical.
+- Input (CSS): `.input` for text inputs; pairs with `.label` and `.field` patterns.
+- Textarea (CSS): `.textarea` styled multiline input.
+- Label (CSS): `.label` for associated form labels.
+- Field (CSS): `.field` wrapper for label, input, hint, error.
+- Form (CSS): `.form` patterns for layout and validation styling.
+- Checkbox (CSS): styled native checkbox; use `input[type='checkbox']`.
+- Radio Group (CSS): `.radio-group` pattern using native radios.
+- Switch (CSS): styled checkbox with `role="switch"` if needed.
+- Select (JS): `.select` custom select; trigger button + popover + `[role=listbox]` and `[role=option]`. Dispatches `change` with `detail.value`.
+- Combobox (JS): `.combobox` typeahead; similar roles to Select.
+- Command (JS): `.command` with search input and `[role=menu]`/`[role=menuitem]`; keyboard nav.
+- Tabs (JS): `.tabs` with `[role=tablist]`, `[role=tab]`, `aria-controls` panels; arrow keys switch.
+- Popover (JS): `.popover` wraps a button and `[data-popover]` content; toggles `aria-hidden`.
+- Dropdown Menu (JS): `.dropdown-menu` trigger + menu with `[role=menu]`/`[role=menuitem]`.
+- Dialog (CSS/Native): `<dialog>` styled; `.command-dialog` variant wraps `.command`.
+- Alert Dialog (CSS/Native): confirm/cancel flow using `<dialog>` semantics.
+- Drawer (CSS/Native): off‑canvas using `<dialog>`/popover; class names documented in examples.
+- Tooltip (CSS/JS-lite): `.tooltip` small info overlays.
+- Toast (JS): global notifications container `#toaster`; dispatch `basecoat:toast` with `{ detail: { config } }`.
+- Sidebar (JS): `.sidebar` with collapsible items; tracks current page via `aria-current`.
+- Breadcrumb (CSS): `.breadcrumb` list of links.
+- Pagination (CSS): `.pagination` navigation controls.
+- Card (CSS): `.card` container with header/section/footer slots.
+- Alert (CSS): `.alert` contextual banners.
+- Badge (CSS): `.badge` and `.badge-outline`.
+- Avatar (CSS): `.avatar` image + fallback.
+- Skeleton (CSS): `.skeleton` loading placeholder.
+- Progress (CSS): `.progress` bar.
+- Slider (CSS): `.slider` styled input range.
+- Spinner (CSS): `.spinner` loading indicator.
+- Kbd (CSS): `.kbd` keyboard key style.
+- Table (CSS): `.table` basic and striped tables.
+- Item (CSS): `.item` list rows with icons and actions.
+- Empty State (CSS): `.empty` placeholder content.
+- Theme Switcher (JS-lite): `.theme-switcher` toggles themes (example in docs).
+
+Events
+- `basecoat:toast` (document): show a toast by dispatching `{ detail: { config } }`.
+- `basecoat:initialized` (component root): emitted after a component initializes.
+- `basecoat:popover` (document): coordination event to close other popovers.
+
+Accessibility
+- Use semantic roles/attributes from examples (tabs, menus, listbox/options).
+- Disabled items: use `disabled` or `aria-disabled="true"`; JS will ignore them.
+
+Troubleshooting
+- If a component doesn’t work, ensure its JS is loaded and required roles/IDs match examples.
+- For dynamic content, call `window.basecoat.init('<name>')` or `initAll()` after insertion.
+
+License
+- MIT (see LICENSE.md)
+---
+description: Basecoat
+alwaysApply: true
+applyTo: "**"
+downloadedFrom: https://basecoatui.com/llms.txt
+version: 0.3.x
+---
+
+# Basecoat
+Basecoat is a Tailwind CSS v4‑first UI library using semantic HTML and small vanilla JS for interactivity. No React required; framework‑agnostic.
+
+- Basecoat docs: https://basecoatui.com
+- Package CSS: `basecoat-css`
+
+## Basecoat install notes
+1. Basecoat targets Tailwind CSS v4.
+2. Import Tailwind in your CSS, then import Basecoat:
+```css
+@import "tailwindcss";
+@import "basecoat-css";
+```
+3. For interactive components, include JS. With ESM you can load all or cherry‑pick:
+```js
+import 'basecoat-css/all';
+// or cherry‑pick
+import 'basecoat-css/tabs';
+import 'basecoat-css/select';
+import 'basecoat-css/popover';
+import 'basecoat-css/dropdown-menu';
+import 'basecoat-css/sidebar';
+import 'basecoat-css/toast';
+```
+4. CDN usage (no build tool):
+```html
+<link href="https://cdn.jsdelivr.net/npm/basecoat-css@latest/dist/basecoat.cdn.min.css" rel="stylesheet" />
+<script src="https://cdn.jsdelivr.net/npm/basecoat-css@latest/dist/js/all.min.js" defer></script>
+```
+5. JS auto‑initializes on `DOMContentLoaded` and observes the DOM for added nodes. You can manually re‑init:
+```js
+window.basecoat.init('tabs');
+window.basecoat.initAll();
+```
+
+## Basecoat usage rules
+1. Add Basecoat class names to semantic HTML. Combine with Tailwind utilities for layout/spacing.
+2. Interactive components require specific roles/attributes (see each component). Keep `aria-*` for semantics and `data-*` for visual states.
+3. Disabled elements must use `disabled` or `aria-disabled="true"`. Basecoat JS filters them from interactions.
+4. Only use documented Basecoat classes or Tailwind utilities. Don’t invent new class names.
+5. Prefer native elements (button, input, dialog) and keep markup minimal.
+
+Basecoat class name categories (for reference)
+- `component`: the main component class
+- `part`: a child element/slot of a component
+- `style`: variants changing appearance
+- `size`: size variants
+- `behavior`: classes that change behavior
+- `modifier`: boolean/conditional changes
+
+## Config
+Basecoat has no Tailwind plugin config. Import the CSS after Tailwind. Customize design tokens via your Tailwind theme or overrides.
+
+Minimal CSS setup:
+```css
+@import "tailwindcss";
+@import "basecoat-css";
+```
+
+## Basecoat tokens (commonly used)
+These semantic tokens are referenced by classes (examples): `background`, `foreground`, `primary`, `primary-foreground`, `secondary`, `secondary-foreground`, `accent`, `accent-foreground`, `muted`, `muted-foreground`, `card`, `card-foreground`, `popover`, `popover-foreground`, `destructive`, `ring`, `input`, `border`.
+
+Rules
+- Tokens should be defined in your Tailwind theme or be available via your design system. You can override colors using Tailwind utilities (e.g., `bg-primary`).
+- Prefer utilities for one‑off overrides; keep semantic tokens consistent.
+
+## Basecoat components
+
+### alert
+Alerts inform users about important events.
+
+#### Class names
+- component: `alert`, `alert-destructive`
+
+#### Syntax
+```html
+<div role="alert" class="alert">{CONTENT}</div>
+```
+
+#### Rules
+- Use `alert-destructive` for destructive context.
+
+### avatar
+Avatar shows a user thumbnail.
+
+#### Class names
+- component: `avatar`
+
+#### Syntax
+```html
+<div class="avatar"><img src="{image-url}" alt="{alt}" /></div>
+```
+
+#### Rules
+- Provide meaningful `alt` text or decorative as appropriate.
+
+### badge
+Badges display statuses or counts.
+
+#### Class names
+- component: `badge`
+- style: `badge-outline`, `badge-destructive`
+
+#### Syntax
+```html
+<span class="badge {MODIFIER}">{TEXT}</span>
+```
+
+#### Rules
+- {MODIFIER} is optional; combine with utilities for spacing.
+
+### button
+Buttons trigger actions.
+
+#### Class names
+- component: `btn`
+- style: `btn-primary`, `btn-secondary`, `btn-outline`, `btn-ghost`, `btn-link`, `btn-destructive`
+- size: `btn-sm`, `btn-lg`
+- icon: `btn-icon`, `btn-sm-icon`, `btn-lg-icon`
+
+#### Syntax
+```html
+<button class="btn {MODIFIER}">{CONTENT}</button>
+```
+
+#### Rules
+- Use `disabled` attribute for disabled state. Use `aria-pressed="true"` for toggle buttons.
+
+### button-group
+Groups adjacent buttons into a single control.
+
+#### Class names
+- component: `button-group`
+
+#### Syntax
+```html
+<div class="button-group" data-orientation="{horizontal|vertical}">{BUTTONS}</div>
+```
+
+#### Rules
+- Use separators with `<hr role="separator">` inside the group if needed.
+
+### card
+Card container with optional header/section/footer.
+
+#### Class names
+- component: `card`
+- part: `> header`, `> section`, `> footer`
+
+#### Syntax
+```html
+<article class="card">
+  <header><h2>{TITLE}</h2><p>{SUBTITLE}</p></header>
+  <section>{CONTENT}</section>
+  <footer>{ACTIONS}</footer>
+</article>
+```
+
+#### Rules
+- Parts are optional; structure with semantic elements.
+
+### checkbox (CSS)
+Styled native checkbox.
+
+#### Class names
+- component: `.input[type='checkbox']:not([role='switch'])`
+
+#### Syntax
+```html
+<input type="checkbox" class="input" />
+```
+
+#### Rules
+- Use standard checkbox semantics; pair with `<label>`.
+
+### command (JS)
+Command palette with search and results.
+
+#### Class names
+- component: `command`, wrapper variant: `command-dialog`
+- part: `> header input`, `[role='menu']`, `[role='menuitem']`
+
+#### Syntax
+```html
+<div class="command">
+  <header><input type="text" placeholder="Search" /></header>
+  <div role="menu">
+    <button role="menuitem">{ITEM}</button>
+  </div>
+</div>
+```
+
+#### Rules
+- Requires JS. Keyboard navigation supported. Disabled items must use `aria-disabled="true"` or `disabled` and are ignored.
+
+### dropdown-menu (JS)
+Contextual menu triggered by a button.
+
+#### Class names
+- component: `dropdown-menu`
+- part: `> button` (trigger), `[role='menu']`, `[role='menuitem']`
+
+#### Syntax
+```html
+<div class="dropdown-menu">
+  <button type="button">{TRIGGER}</button>
+  <div role="menu"> <button role="menuitem">{ITEM}</button> </div>
+</div>
+```
+
+#### Rules
+- Requires JS. Uses `basecoat:popover` to coordinate with other popovers.
+
+### input (CSS)
+Styled text input fields.
+
+#### Class names
+- component: `input` (applied to native `<input>` types)
+
+#### Syntax
+```html
+<input type="text" class="input" placeholder="{Placeholder}" />
+```
+
+#### Rules
+- Supports common input types; pair with `.label` and `.field` patterns.
+
+### kbd (CSS)
+Keyboard key visual.
+
+#### Class names
+- component: `kbd`
+
+#### Syntax
+```html
+<kbd class="kbd">⌘K</kbd>
+```
+
+### label (CSS)
+Styled form labels.
+
+#### Class names
+- component: `label`
+
+#### Syntax
+```html
+<label class="label" for="{id}">{TEXT}</label>
+```
+
+### popover (JS)
+Small overlay anchored to a trigger.
+
+#### Class names
+- component: `popover`
+- part: `> button` (trigger), `[data-popover]` (content)
+
+#### Syntax
+```html
+<div class="popover">
+  <button type="button">{TRIGGER}</button>
+  <section data-popover aria-hidden="true">{CONTENT}</section>
+</div>
+```
+
+#### Rules
+- Requires JS. Toggling sets `aria-hidden` on content and `aria-expanded` on trigger.
+
+### radio-group (CSS)
+Styled native radio inputs.
+
+#### Class names
+- component: `.input[type='radio']`
+
+#### Syntax
+```html
+<label><input type="radio" class="input" name="{name}" /> {LABEL}</label>
+```
+
+### select (JS)
+Custom select with searchable popover and listbox.
+
+#### Class names
+- component: `select`
+- part: `> button` (trigger with label span), `[data-popover]` (panel), `[role='listbox']`, `[role='option']`, `> input[type='hidden']`, optional `header input[type='text']` filter
+
+#### Syntax
+```html
+<div class="select">
+  <button type="button" aria-expanded="false"><span>{LABEL}</span></button>
+  <input type="hidden" name="{name}" value="{value}" />
+  <section data-popover aria-hidden="true">
+    <header><input type="text" placeholder="Filter" /></header>
+    <div role="listbox">
+      <div role="option" data-value="{value}" data-label="{label}">{label}</div>
+    </div>
+  </section>
+</div>
+```
+
+#### Rules
+- Requires JS. Dispatches `change` on root with `detail.value`. Disabled options use `aria-disabled="true"`.
+
+### sidebar (JS)
+Collapsible navigation sidebar.
+
+#### Class names
+- component: `sidebar`
+
+#### Rules
+- Requires JS. Uses `aria-current="page"` for active link styling.
+
+### switch (CSS)
+Styled switch using checkbox with `role="switch"`.
+
+#### Class names
+- component: `.input[type='checkbox'][role='switch']`
+
+#### Syntax
+```html
+<input type="checkbox" role="switch" class="input" />
+```
+
+### table (CSS)
+Styled tables.
+
+#### Class names
+- component: `table`
+
+#### Syntax
+```html
+<table class="table">{ROWS}</table>
+```
+
+### tabs (JS)
+Tabbed interface with keyboard navigation.
+
+#### Class names
+- component: `tabs`
+- part: `[role='tablist']`, `[role='tab']`, `[role='tabpanel']`
+
+#### Syntax
+```html
+<div class="tabs">
+  <div role="tablist">
+    <button role="tab" aria-controls="panel-1" aria-selected="true" tabindex="0">Tab 1</button>
+    <button role="tab" aria-controls="panel-2" aria-selected="false" tabindex="-1">Tab 2</button>
+  </div>
+  <section id="panel-1" role="tabpanel">...</section>
+  <section id="panel-2" role="tabpanel" hidden>...</section>
+</div>
+```
+
+#### Rules
+- Requires JS. Arrow keys move focus; keep `aria-controls` and `aria-selected` accurate.
+
+### textarea (CSS)
+Styled multiline text input.
+
+#### Class names
+- component: `textarea`
+
+#### Syntax
+```html
+<textarea class="textarea" rows="{n}"></textarea>
+```
+
+### toast (JS)
+Global notifications.
+
+#### Class names
+- component: `#toaster` (container), `toast` (item)
+
+#### Syntax
+```html
+<section id="toaster"></section>
+```
+Show a toast:
+```js
+document.dispatchEvent(new CustomEvent('basecoat:toast', { detail: { config: { title: 'Saved', description: 'Changes persisted', category: 'success' } } }))
+```
+
+#### Rules
+- Requires JS. Uses timeouts; hovering pauses timers.
+
+### popover/dialog variants (CSS/JS‑lite)
+Dialog and drawer patterns built on native elements, styled by Basecoat.
+
+#### Class names
+- wrapper: `command-dialog` (for Command palette in a dialog)
+
+#### Rules
+- Use native `<dialog>` or popover attributes where applicable.
+
+### other CSS components
+Additional CSS components include: `progress`, `skeleton`, `slider`, `spinner`, `pagination`, `breadcrumb`, `item`, `empty`, `theme-switcher`, `form`, `field`, `input-group`, `radio-group`, `switch`, `avatar`, `badge`, `alert`, `card`, `kbd`, `table`.
+
+## Events
+- `basecoat:initialized` (component root): emitted after a component initializes.
+- `basecoat:popover` (document): used to close other popovers when one opens.
+- `basecoat:toast` (document): creates a toast using `{ detail: { config } }`.
+
+## Accessibility
+- Use semantic roles/labels per component. Keep `aria-*` for semantics and `data-*` for visual states.
+- Disabled items must use `disabled` or `aria-disabled="true"` to be filtered from interactions.
+
+## Troubleshooting
+- If interactivity doesn’t work, ensure the component’s JS is included and required roles/IDs match the examples.
+- For dynamic content, call `window.basecoat.init('<name>')` or `window.basecoat.initAll()` after insertion.
+
+## License
+MIT (see LICENSE.md)

docs/src/test.njk

@@ -0,0 +1,39 @@
+---
+layout: layouts/layout.njk
+---
+
+{% from "dialog.njk" import dialog %}
+{% set footer %}
+<button class="btn-outline" onclick="this.closest('dialog').close()">Cancel</button>
+<button class="btn" onclick="this.closest('dialog').close()">Save changes</button>
+{% endset %}
+{% call dialog(
+id="demo-dialog-edit-profile",
+title="Edit profile",
+description="Make changes to your profile here. Click save when you're done.",
+trigger="Edit Profile",
+trigger_attrs={"class": "btn-outline"},
+dialog_attrs={"class": "w-full sm:max-w-[425px] max-h-[612px]"},
+footer=footer
+) %}
+<form class="flex-col gap-4">
+{% from "select.njk" import select %}
+{{ select(
+  trigger_attrs={"class": "w-[180px]"},
+  is_combobox=true,
+  items=[
+    {
+      type: "group",
+      label: "Fruits",
+      items: [
+        { type: "item", value: "apple", label: "Apple" },
+        { type: "item", value: "banana", label: "Banana" },
+        { type: "item", value: "blueberry", label: "Blueberry" },
+        { type: "item", value: "pineapple", label: "Grapes" },
+        { type: "item", value: "pineapple", label: "Pineapple" }
+      ]
+    }
+  ]
+) }}
+</form>
+{% endcall %}

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "basecoat",
-  "version": "0.0.1",
+  "version": "0.3.2",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "basecoat",
-      "version": "0.0.1",
+      "version": "0.3.2",
       "license": "MIT",
       "workspaces": [
         "packages/*"
@@ -17,7 +17,8 @@
         "@tailwindcss/cli": "^4.1.3",
         "concurrently": "^9.1.2",
         "prettier": "^3.5.3",
-        "tailwindcss": "^4.1.3"
+        "tailwindcss": "^4.1.3",
+        "terser": "^5.42.0"
       }
     },
     "node_modules/@11ty/dependency-tree": {
@@ -243,6 +244,17 @@
         "slash": "^1.0.0"
       }
     },
+    "node_modules/@emnapi/runtime": {
+      "version": "1.4.3",
+      "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.4.3.tgz",
+      "integrity": "sha512-pBPWdu6MLKROBX05wSNKcNb++m5Er+KQ9QkB+WVM+pW2Kx9hoSrVTnu3BdkI5eBLZoKu/J6mW/B6i6bJB2ytXQ==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
     "node_modules/@grimlink/eleventy-plugin-lucide-icons": {
       "version": "2.1.4",
       "resolved": "https://registry.npmjs.org/@grimlink/eleventy-plugin-lucide-icons/-/eleventy-plugin-lucide-icons-2.1.4.tgz",
@@ -630,6 +642,70 @@
         "node": ">=12"
       }
     },
+    "node_modules/@jridgewell/gen-mapping": {
+      "version": "0.3.8",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.8.tgz",
+      "integrity": "sha512-imAbBGkb+ebQyxKgzv5Hu2nmROxoDOXHh80evxdoXNOrvAnVx7zimzc1Oo5h9RlfV4vPXaE2iM5pOFbvOCClWA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/set-array": "^1.2.1",
+        "@jridgewell/sourcemap-codec": "^1.4.10",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/resolve-uri": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
+      "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/set-array": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.2.1.tgz",
+      "integrity": "sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/source-map": {
+      "version": "0.3.6",
+      "resolved": "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.6.tgz",
+      "integrity": "sha512-1ZJTZebgqllO79ue2bm3rIGud/bOe0pP5BjSRCRxxYkEZS8STV7zN84UBbiYu7jy+eCKSnVIUgoWWE/tt+shMQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.5",
+        "@jridgewell/trace-mapping": "^0.3.25"
+      }
+    },
+    "node_modules/@jridgewell/sourcemap-codec": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz",
+      "integrity": "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@jridgewell/trace-mapping": {
+      "version": "0.3.25",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz",
+      "integrity": "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/resolve-uri": "^3.1.0",
+        "@jridgewell/sourcemap-codec": "^1.4.14"
+      }
+    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -1535,6 +1611,13 @@
         "node": ">=8"
       }
     },
+    "node_modules/buffer-from": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
+      "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/chalk": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
@@ -3703,6 +3786,27 @@
         "node": ">=8.0.0"
       }
     },
+    "node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/source-map-support": {
+      "version": "0.5.21",
+      "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz",
+      "integrity": "sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "buffer-from": "^1.0.0",
+        "source-map": "^0.6.0"
+      }
+    },
     "node_modules/sprintf-js": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
@@ -3880,6 +3984,32 @@
         "node": ">=6"
       }
     },
+    "node_modules/terser": {
+      "version": "5.42.0",
+      "resolved": "https://registry.npmjs.org/terser/-/terser-5.42.0.tgz",
+      "integrity": "sha512-UYCvU9YQW2f/Vwl+P0GfhxJxbUGLwd+5QrrGgLajzWAtC/23AX0vcise32kkP7Eu0Wu9VlzzHAXkLObgjQfFlQ==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "@jridgewell/source-map": "^0.3.3",
+        "acorn": "^8.14.0",
+        "commander": "^2.20.0",
+        "source-map-support": "~0.5.20"
+      },
+      "bin": {
+        "terser": "bin/terser"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/terser/node_modules/commander": {
+      "version": "2.20.3",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
+      "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/tmp": {
       "version": "0.0.33",
       "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz",
@@ -4207,7 +4337,7 @@
     },
     "packages/cli": {
       "name": "basecoat-cli",
-      "version": "0.1.0",
+      "version": "0.3.2",
       "license": "MIT",
       "dependencies": {
         "commander": "^13.1.0",
@@ -4220,7 +4350,7 @@
     },
     "packages/css": {
       "name": "basecoat-css",
-      "version": "0.1.0",
+      "version": "0.3.2",
       "license": "MIT"
     }
   }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "basecoat",
-  "version": "0.1.0",
+  "version": "0.3.8",
   "description": "shadcn/ui for the rest of us",
   "author": "hunvreus",
   "type": "module",
@@ -8,15 +8,6 @@
   "workspaces": [
     "packages/*"
   ],
-  "files": [
-    "src/css",
-    "src/js",
-    "src/nunjucks",
-    "src/jinja"
-  ],
-  "exports": {
-    ".": "./src/css/basecoat.css"
-  },
   "keywords": [
     "components",
     "component library",
@@ -30,8 +21,7 @@
     "css",
     "html",
     "jinja",
-    "nunjucks",
-    "alpinejs"
+    "nunjucks"
   ],
   "license": "MIT",
   "repository": {
@@ -55,6 +45,7 @@
     "@tailwindcss/cli": "^4.1.3",
     "concurrently": "^9.1.2",
     "prettier": "^3.5.3",
-    "tailwindcss": "^4.1.3"
+    "tailwindcss": "^4.1.3",
+    "terser": "^5.42.0"
   }
 }

packages/cli/README.md

@@ -8,7 +8,6 @@ This package provides a Command Line Interface (CLI) to help you quickly scaffol
 - For the components to function correctly, your project should have:
   - [Tailwind CSS](https://tailwindcss.com/docs/installation) installed and configured.
   - The `basecoat-css` package installed and imported (or `basecoat.css` manually added).
-  - [Alpine.js](https://alpinejs.dev/docs/installation) installed and initialized, as Basecoat components rely on it for interactivity.
 
 ## Usage
 

packages/cli/package.json

@@ -1,6 +1,6 @@
 {
   "name": "basecoat-cli",
-  "version": "0.1.1",
+  "version": "0.3.8",
   "description": "Add Basecoat components to your project",
   "author": "hunvreus",
   "license": "MIT",
@@ -30,8 +30,7 @@
     "css",
     "html",
     "jinja",
-    "nunjucks",
-    "alpinejs"
+    "nunjucks"
   ],
   "repository": {
     "type": "git",

packages/css/README.md

@@ -8,42 +8,51 @@ Your project must have [Tailwind CSS](https://tailwindcss.com/docs/installation)
 
 ## Installation
 
-You can install `basecoat-css` using your preferred package manager:
+Install with any package manager:
 
 ```bash
-# npm
-npm install basecoat-css
-
-# yarn
-yarn add basecoat-css
-
-# pnpm
-pnpm add basecoat-css
-
-# bun
-bun add basecoat-css
+npm install basecoat-css # or pnpm add / yarn add / bun add
 ```
 
-Alternatively, you can download the `basecoat.css` file directly from the [GitHub repository](https://github.com/hunvreus/basecoat/blob/main/src/css/basecoat.css) (or the `dist/basecoat.css` file from this package after installation) and include it in your project.
-
 ## Usage
 
-After installation, import `basecoat-css` into your main CSS file. Make sure to import it **after** Tailwind CSS and **before** any custom theme overrides.
+Add it just after Tailwind in your stylesheet:
 
 ```css
-/* Your main CSS file (e.g., styles.css) */
-
-@import "tailwindcss/base";
-@import "tailwindcss/components";
-@import "tailwindcss/utilities";
-
-@import "basecoat-css"; /* Or the path to basecoat.css if manually added */
-
-/* Your custom styles or theme overrides (optional) */
-/* @import "your-theme.css"; */
+@import "tailwindcss";
+@import "basecoat-css";
 ```
 
-Once imported, you can start using Basecoat's component classes in your HTML.
+That's it, you can use any Basecoat class (`btn`, `card`, `input`, etc) in your markup.
+
+### (Optional) JavaScript files
+
+Some interactive components (Dropdown Menu, Popover, Select, Sidebar, Tabs, Toast) need some JavaScript.
+
+With a build tool (ESM):
+
+```js
+import 'basecoat-css/all';
+```
+
+Or cherry-pick the components you need:
+
+```js
+import 'basecoat-css/tabs';
+import 'basecoat-css/popover';
+```
+
+Without a build tool, copy the files from `node_modules`:
+
+```bash
+npx copyfiles -u 1 "node_modules/basecoat-css/dist/js/**/*" public/js/basecoat
+```
+
+Then reference what you need, e.g.
+
+```html
+<script src="/js/basecoat/tabs.min.js" defer></script>
+```
 
 ## Documentation
 

packages/css/package.json

@@ -1,12 +1,13 @@
 {
   "name": "basecoat-css",
-  "version": "0.1.2",
+  "version": "0.3.8",
   "description": "Tailwind CSS for Basecoat components",
   "author": {
     "name": "hunvreus",
     "url": "https://x.com/hunvreus"
   },
   "license": "MIT",
+  "type": "module",
   "main": "dist/basecoat.css",
   "style": "dist/basecoat.css",
   "files": [
@@ -25,8 +26,7 @@
     "css",
     "html",
     "jinja",
-    "nunjucks",
-    "alpinejs"
+    "nunjucks"
   ],
   "repository": {
     "type": "git",
@@ -36,5 +36,28 @@
   "bugs": {
     "url": "https://github.com/hunvreus/basecoat/issues"
   },
-  "homepage": "https://basecoatui.com/installation#install-css"
+  "homepage": "https://basecoatui.com/installation#install-npm",
+  "exports": {
+    ".": "./dist/basecoat.css",
+    "./css": "./dist/basecoat.css",
+    "./basecoat": "./dist/js/basecoat.js",
+    "./basecoat.min": "./dist/js/basecoat.min.js",
+    "./all": "./dist/js/all.js",
+    "./all.min": "./dist/js/all.min.js",
+    "./command": "./dist/js/command.js",
+    "./command.min": "./dist/js/command.min.js",
+    "./dropdown-menu": "./dist/js/dropdown-menu.js",
+    "./dropdown-menu.min": "./dist/js/dropdown-menu.min.js",
+    "./popover": "./dist/js/popover.js",
+    "./popover.min": "./dist/js/popover.min.js",
+    "./select": "./dist/js/select.js",
+    "./select.min": "./dist/js/select.min.js",
+    "./sidebar": "./dist/js/sidebar.js",
+    "./sidebar.min": "./dist/js/sidebar.min.js",
+    "./tabs": "./dist/js/tabs.js",
+    "./tabs.min": "./dist/js/tabs.min.js",
+    "./toast": "./dist/js/toast.js",
+    "./toast.min": "./dist/js/toast.min.js",
+    "./package.json": "./package.json"
+  }
 }

scripts/build.js

@@ -1,6 +1,10 @@
 import fs from 'fs/promises';
 import path from 'path';
 import { fileURLToPath } from 'url';
+import { exec } from 'child_process';
+import { promisify } from 'util';
+
+const execPromise = promisify(exec);
 
 // Resolve project root, assuming this script is in <project_root>/scripts/
 const __filename = fileURLToPath(import.meta.url);
@@ -90,8 +94,52 @@ async function build() {
   await fs.copyFile(path.join(cliPackageDir, 'index.js'), path.join(cliDistDir, 'index.js'));
   console.log(`Copied CLI index.js to ${cliDistDir}`);
 
-  await copyDirRecursive(srcJsDir, path.join(cliDistAssetsDir, 'js'));
-  console.log(`Copied JS assets to ${path.join(cliDistAssetsDir, 'js')}`);
+  // JS files minification and copy
+  const jsFiles = await fs.readdir(srcJsDir);
+  const cliJsDistDir = path.join(cliDistAssetsDir, 'js');
+  const cssJsDistDir = path.join(cssDistDir, 'js');
+  await ensureDir(cliJsDistDir);
+  await ensureDir(cssJsDistDir);
+  console.log('Copying and minifying JS files...');
+
+  for (const jsFile of jsFiles) {
+    if (path.extname(jsFile) === '.js') {
+      const srcFile = path.join(srcJsDir, jsFile);
+      const baseName = path.basename(jsFile, '.js');
+      const minifiedFileName = `${baseName}.min.js`;
+
+      // Copy original file to both destinations
+      await fs.copyFile(srcFile, path.join(cliJsDistDir, jsFile));
+      await fs.copyFile(srcFile, path.join(cssJsDistDir, jsFile));
+
+      // Create and copy minified file to both destinations
+      const cliDestMinFile = path.join(cliJsDistDir, minifiedFileName);
+      await execPromise(`npx terser ${srcFile} -o ${cliDestMinFile} --compress --mangle`);
+      await fs.copyFile(cliDestMinFile, path.join(cssJsDistDir, minifiedFileName));
+    }
+  }
+
+  // Create combined component files
+  console.log('Creating combined component files...');
+  const componentsToCombine = ['basecoat.js', 'command.js', 'dropdown-menu.js', 'popover.js', 'select.js', 'sidebar.js', 'tabs.js', 'toast.js'];
+  const componentPaths = componentsToCombine.map(f => path.join(srcJsDir, f));
+
+  // Create non-minified bundle
+  let combinedContent = '';
+  for (const p of componentPaths) {
+    combinedContent += await fs.readFile(p, 'utf-8') + '\n';
+  }
+  const allJsPath = path.join(cliJsDistDir, 'all.js');
+  await fs.writeFile(allJsPath, combinedContent);
+  await fs.copyFile(allJsPath, path.join(cssJsDistDir, 'all.js'));
+  
+  // Create minified bundle
+  const allMinJsPath = path.join(cliJsDistDir, 'all.min.js');
+  await execPromise(`npx terser ${componentPaths.join(' ')} -o ${allMinJsPath} --compress --mangle`);
+  await fs.copyFile(allMinJsPath, path.join(cssJsDistDir, 'all.min.js'));
+
+  console.log(`Copied and minified JS to ${cliJsDistDir} and ${cssJsDistDir}`);
+
   await copyDirRecursive(srcNunjucksDir, path.join(cliDistAssetsDir, 'nunjucks'));
   console.log(`Copied Nunjucks assets to ${path.join(cliDistAssetsDir, 'nunjucks')}`);
   await copyDirRecursive(srcJinjaDir, path.join(cliDistAssetsDir, 'jinja'));
@@ -103,6 +151,16 @@ async function build() {
   await fs.copyFile(path.join(srcCssDir, 'basecoat.css'), path.join(cssDistDir, 'basecoat.css'));
   console.log(`Copied basecoat.css to ${cssDistDir}`);
 
+  // Create Tailwind CSS builds for the CSS package
+  const cdnCssSrc = path.join(srcCssDir, 'basecoat.cdn.css');
+  const cssDistCdnPath = path.join(cssDistDir, 'basecoat.cdn.css');
+  const cssDistCdnMinPath = path.join(cssDistDir, 'basecoat.cdn.min.css');
+  
+  await execPromise(`npx tailwindcss -i "${cdnCssSrc}" -o "${cssDistCdnPath}"`);
+  console.log(`Generated non-minified CSS: ${cssDistCdnPath}`);
+  await execPromise(`npx tailwindcss -i "${cdnCssSrc}" -o "${cssDistCdnMinPath}" --minify`);
+  console.log(`Generated minified CSS: ${cssDistCdnMinPath}`);
+
   console.log('Build process finished successfully!');
 }
 

src/css/basecoat.cdn.css

@@ -0,0 +1,2 @@
+@import "tailwindcss" source(none);
+@import "./basecoat.css";

src/jinja/command.html.jinja

@@ -0,0 +1,206 @@
+{#
+  Renders a standalone command menu component with search and keyboard navigation.
+
+  @param id {string} [optional] - Unique identifier for the command component.
+  @param items {array} [optional] - Array of items to render (alternative to using caller).
+  @param placeholder {string} [optional] [default="Type a command or search..."] - Placeholder text for the search input.
+  @param empty_text {string} [optional] [default="No results found."] - Text displayed when no results match the search.
+  @param main_attrs {object} [optional] - Additional HTML attributes for the main container div.
+  @param input_attrs {object} [optional] - Additional HTML attributes for the search input.
+  @param menu_attrs {object} [optional] - Additional HTML attributes for the menu div.
+#}
+{% macro command(
+  id=None,
+  items=None,
+  placeholder="Type a command or search...",
+  empty_text="No results found.",
+  main_attrs={},
+  input_attrs={},
+  menu_attrs={}
+) %}
+{% set id = id or ("command-" ~ range(100000, 999999) | random | string) %}
+<div
+  id="{{ id }}"
+  class="command {{ main_attrs.class }}"
+  aria-label="Command menu"
+  {% for key, value in main_attrs.items() %}
+    {% if key != 'class' %}{{ key }}="{{ value }}"{% endif %}
+  {% endfor %}
+>
+  <header>
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-search-icon lucide-search"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
+    <input
+      type="text"
+      id="{{ id }}-input"
+      placeholder="{{ placeholder }}"
+      autocomplete="off"
+      autocorrect="off"
+      spellcheck="false"
+      aria-autocomplete="list"
+      role="combobox"
+      aria-expanded="true"
+      aria-controls="{{ id }}-menu"
+      {% for key, value in input_attrs.items() %}
+        {{ key }}="{{ value }}"
+      {% endfor %}
+    >
+  </header>
+  <div
+    role="menu"
+    id="{{ id }}-menu"
+    aria-orientation="vertical"
+    data-empty="{{ empty_text }}"
+    class="scrollbar {{ menu_attrs.class }}"
+    {% for key, value in menu_attrs.items() %}
+      {% if key != 'class' %}{{ key }}="{{ value }}"{% endif %}
+    {% endfor %}
+  >
+    {% if items and items|length > 0 %}
+      {{ render_command_items(items, id ~ "-items" if id else "items") }}
+    {% else %}
+      {{ caller() if caller }}
+    {% endif %}
+  </div>
+</div>
+{% endmacro %}
+
+{#
+  Renders a command dialog (modal command palette).
+
+  @param id {string} [optional] - Unique identifier for the command dialog.
+  @param items {array} [optional] - Array of items to render (alternative to using caller).
+  @param placeholder {string} [optional] [default="Type a command or search..."] - Placeholder text for the search input.
+  @param empty_text {string} [optional] [default="No results found."] - Text displayed when no results match the search.
+  @param dialog_attrs {object} [optional] - Additional HTML attributes for the dialog element.
+  @param input_attrs {object} [optional] - Additional HTML attributes for the search input.
+  @param menu_attrs {object} [optional] - Additional HTML attributes for the menu div.
+  @param open {boolean} [optional] [default=False] - Whether the command dialog should be open initially.
+#}
+{% macro command_dialog(
+  id=None,
+  items=None,
+  placeholder="Type a command or search...",
+  empty_text="No results found.",
+  dialog_attrs={},
+  input_attrs={},
+  menu_attrs={},
+  open=False
+) %}
+{% set id = id or ("command-dialog-" ~ range(100000, 999999) | random | string) %}
+<dialog
+  id="{{ id }}"
+  class="dialog command-dialog {{ dialog_attrs.class }}"
+  aria-label="Command menu"
+  {% if open %}open{% endif %}
+  onclick="if (event.target === this) this.close()"
+  {% for key, value in dialog_attrs.items() %}
+    {% if key != 'class' %}{{ key }}="{{ value }}"{% endif %}
+  {% endfor %}
+>
+  <div class="command">
+    <header>
+      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-search-icon lucide-search"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
+      <input
+        type="text"
+        id="{{ id }}-input"
+        placeholder="{{ placeholder }}"
+        autocomplete="off"
+        autocorrect="off"
+        spellcheck="false"
+        aria-autocomplete="list"
+        role="combobox"
+        aria-expanded="true"
+        aria-controls="{{ id }}-menu"
+        {% for key, value in input_attrs.items() %}
+          {{ key }}="{{ value }}"
+        {% endfor %}
+      >
+    </header>
+    <div
+      role="menu"
+      id="{{ id }}-menu"
+      aria-orientation="vertical"
+      data-empty="{{ empty_text }}"
+      class="scrollbar {{ menu_attrs.class }}"
+      {% for key, value in menu_attrs.items() %}
+        {% if key != 'class' %}{{ key }}="{{ value }}"{% endif %}
+      {% endfor %}
+    >
+      {% if items and items|length > 0 %}
+        {{ render_command_items(items, id ~ "-items" if id else "items") }}
+      {% else %}
+        {{ caller() if caller }}
+      {% endif %}
+    </div>
+    <button type="button" aria-label="Close dialog" onclick="this.closest('dialog').close()">
+      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x-icon lucide-x"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
+    </button>
+  </div>
+</dialog>
+{% endmacro %}
+
+{# 
+  Renders a list of items for the command component.
+
+  @param items {array} - Array of items to render. Each item can be:
+    - { type: "item", label: "Text or HTML", icon: "HTML", url: "href", keywords: "search terms", disabled: true, attrs: {} }
+    - { type: "group", label: "Group Title", items: [...] }
+    - { type: "separator" }
+    Note: Use attrs to add data-label for alternative search text if needed. If url is provided, renders as <a role="menuitem"> instead of <div role="menuitem">. Label supports HTML (marked as safe).
+  @param parent_id_prefix {string} [optional] - The prefix for the item id.
+#}
+{% macro render_command_items(items, parent_id_prefix="items") %}
+  {% for item in items %}
+    {% set item_id = parent_id_prefix ~ "-" ~ loop.index %}
+    {% if item.type == "group" %}
+      {% set group_label_id = item.id if item.id else "group-label-" + item_id %}
+      <div
+        role="group"
+        aria-labelledby="{{ group_label_id }}"
+        {% if item.attrs %}
+          {% for key, value in item.attrs.items() %}
+            {{ key }}="{{ value }}"
+          {% endfor %}
+        {% endif %}
+      >
+        <span role="heading" id="{{ group_label_id }}">{{ item.label | safe }}</span>
+        {{ render_command_items(item['items'], item_id) if item['items'] }}
+      </div>
+    {% elif item.type == "separator" %}
+      <hr role="separator" />
+    {% elif item.type == "item" or not item.type %}
+      {% if item.url %}
+        <a
+          id="{{ item_id }}"
+          href="{{ item.url }}"
+          role="menuitem"
+          {% if item.keywords %}data-keywords="{{ item.keywords }}"{% endif %}
+          {% if item.disabled %}aria-disabled="true"{% endif %}
+          {% if item.attrs %}
+            {% for key, value in item.attrs.items() %}
+              {% if key != "href" %}{{ key }}="{{ value }}"{% endif %}
+            {% endfor %}
+          {% endif %}
+        >
+          {% if item.icon %}{{ item.icon | safe }}{% endif %}
+          {{ item.label | safe }}
+        </a>
+      {% else %}
+        <div
+          id="{{ item_id }}"
+          role="menuitem"
+          {% if item.keywords %}data-keywords="{{ item.keywords }}"{% endif %}
+          {% if item.disabled %}aria-disabled="true"{% endif %}
+          {% if item.attrs %}
+            {% for key, value in item.attrs.items() %}
+              {{ key }}="{{ value }}"
+            {% endfor %}
+          {% endif %}
+        >
+          {% if item.icon %}{{ item.icon | safe }}{% endif %}
+          {{ item.label | safe }}
+        </div>
+      {% endif %}
+    {% endif %}
+  {% endfor %}
+{% endmacro %}

src/jinja/dialog.html.jinja

@@ -8,103 +8,87 @@
   @param footer {string} [optional] - HTML content for the dialog footer.
   @param main_attrs {object} [optional] - Additional HTML attributes for the main container div.
   @param trigger_attrs {object} [optional] - Additional HTML attributes for the trigger button.
-  @param content_attrs {object} [optional] - Additional HTML attributes for the dialog content article.
-  @param content_header_attrs {object} [optional] - Additional HTML attributes for the dialog header.
-  @param content_body_attrs {object} [optional] - Additional HTML attributes for the dialog body section.
-  @param content_footer_attrs {object} [optional] - Additional HTML attributes for the dialog footer.
-  @param open {boolean} [optional] [default=False] - Whether the dialog should be open initially.
-  @param close_button {boolean} [optional] [default=True] - Whether to include a close button.
-  @param close_on_overlay_click {boolean} [optional] [default=True] - Whether clicking the overlay closes the dialog.
+  @param dialog_attrs {object} [optional] - Additional HTML attributes for the dialog content container.
+  @param header_attrs {object} [optional] - Additional HTML attributes for the dialog header.
+  @param body_attrs {object} [optional] - Additional HTML attributes for the dialog body section.
+  @param footer_attrs {object} [optional] - Additional HTML attributes for the dialog footer.
+  @param open {boolean} [optional] [default=false] - Whether the dialog should be open initially.
+  @param close_button {boolean} [optional] [default=true] - Whether to include a close button.
+  @param close_on_overlay_click {boolean} [optional] [default=true] - Whether clicking the overlay closes the dialog.
 #}
 {% macro dialog(
-  id,
+  id=None,
   trigger=None,
   title=None,
   description=None,
   footer=None,
-  main_attrs={},
+  dialog_attrs={},
   trigger_attrs={},
-  content_attrs={},
-  content_header_attrs={},
-  content_body_attrs={},
-  content_footer_attrs={},
-  open=False,
-  close_button=True,
-  close_on_overlay_click=True
+  header_attrs={},
+  body_attrs={},
+  footer_attrs={},
+  open=false,
+  close_button=true,
+  close_on_overlay_click=true
 ) %}
-<div
-  id="{{ id }}"
-  x-data="dialog({{ 'true' if open else 'false' }}, {{ 'true' if close_on_overlay_click else 'false' }})"
-  x-bind="$main"
-  class="dialog"
-  {% for key, value in main_attrs.items() %}
+{% set id = id or ("dialog-" + (range(100000, 999999) | random | string)) %}
+{% if trigger %}
+<button
+  type="button"
+  onclick="document.getElementById('{{ id }}').showModal()"
+  {% for key, value in trigger_attrs.items() %}
     {{ key }}="{{ value }}"
   {% endfor %}
 >
-  {% if trigger %}
-  <button
-    type="button"
-    aria-expanded="false"
-    aria-controls="{{ id }}-dialog"
-    x-bind="$trigger"
-    {% for key, value in trigger_attrs.items() %}
-      {{ key }}="{{ value }}"
-    {% endfor %}
-  >
-    {{ trigger }} 
-  </button>
-  {% endif %}
-  <div
-    role="dialog"
-    id="{{ id }}-dialog"
-    tabindex="-1"
-    aria-modal="true"
-    aria-labelledby="{{ id }}-title"
-    inert
-    x-bind="$content"
-  >
-    <article
-      {% for key, value in content_attrs.items() %}
-        {{ key }}="{{ value }}"
-      {% endfor %}
-    >
-      {% if title or description %}
-        <header
-          {% for key, value in content_header_attrs.items() %}
-            {{ key }}="{{ value }}"
-          {% endfor %}
-        >
-          <h2 id="{{ id }}-title">{{ title | safe }}</h2>
-          <p>{{ description | safe }}</p>
-        </header>
-      {% endif %}
-      {% if caller %}
-        <section
-          {% for key, value in content_body_attrs.items() %}
-            {{ key }}="{{ value }}"
-          {% endfor %}
-        >
-          {{ caller() }}
-        </section>
-      {% endif %}
-      {% if footer %}
-        <footer
-          {% for key, value in content_footer_attrs.items() %}
-            {{ key }}="{{ value }}"
-          {% endfor %}
-        >
-          {{ footer | safe }}
-        </footer>
-      {% endif %}
-      {% if close_button %}
-        <button
-          @click="hide()"
-          aria-label="Close dialog"
-        >
+  {{ trigger | safe }}
+</button>
+{% endif %}
+<dialog
+  id="{{ id }}"
+  class="dialog {{ dialog_attrs.class }}"
+  aria-labelledby="{{ id }}-title"
+  {% if description %}aria-describedby="{{ id }}-description"{% endif %}
+  {% if close_on_overlay_click %}onclick="if (event.target === this) this.close()"{% endif %}
+  {% for key, value in dialog_attrs.items() %}
+    {% if key != 'class' %}{{ key }}="{{ value }}"{% endif %}
+  {% endfor %}
+>
+  <div>
+    {% if title or description %}
+      <header
+        {% for key, value in header_attrs.items() %}
+          {{ key }}="{{ value }}"
+        {% endfor %}
+      >
+        <h2 id="{{ id }}-title">{{ title | safe }}</h2>
+        {% if description %}<p id="{{ id }}-description">{{ description | safe }}</p>{% endif %}
+      </header>
+    {% endif %}
+    {% if caller %}
+      <section
+        {% for key, value in body_attrs.items() %}
+          {{ key }}="{{ value }}"
+        {% endfor %}
+      >
+        {{ caller() }}
+      </section>
+    {% endif %}
+    {% if footer %}
+      <footer
+        {% for key, value in footer_attrs.items() %}
+          {{ key }}="{{ value }}"
+        {% endfor %}
+      >
+        {{ footer | safe }}
+      </footer>
+    {% endif %}
+    {% if close_button %}
+      <form method="dialog">
+        <button aria-label="Close dialog">
           <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x-icon lucide-x"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
-        </button>
-      {% endif %}
-    </article>
+      </button>
+      </form>
+    {% endif %}
   </div>
-</div>
+</dialog>
 {% endmacro %}

src/jinja/dropdown-menu.html.jinja

@@ -3,61 +3,63 @@
 
   @param id {string} [optional] - Unique identifier for the dropdown component.
   @param trigger {string} [optional] - HTML content for the button that triggers the dropdown.
-  @param menu {array} [optional] - Array of menu items for the dropdown.
+  @param items {array} [optional] - Array of menu items for the dropdown.
   @param main_attrs {object} [optional] - Additional HTML attributes for the main container div.
   @param trigger_attrs {object} [optional] - Additional HTML attributes for the trigger button.
-  @param content_attrs {object} [optional] - Additional HTML attributes for the dropdown content div.
+  @param popover_attrs {object} [optional] - Additional HTML attributes for the dropdown content div.
 #}
 {% macro dropdown_menu(
+  trigger,
   id=None,
-  trigger=None,
-  menu=None,
+  items=None,
   main_attrs={},
   trigger_attrs={},
-  content_attrs={}
+  popover_attrs={},
+  menu_attrs={}
 ) %}
+{% set id = id or ("dropdown-menu-" + (range(100000, 999999) | random | string)) %}
+
 <div
-  class="popover {{ main_attrs.class }}"
-  x-data="dropdownMenu"
-  @click.away="open = false"
-  {% if id %}id="{{ id }}"{% endif %}
-  {% for key, value in main_attrs %}
-    {% if key != "class" %}{{ key }}="{{ value }}"{% endif %}
+  id="{{ id }}"
+  class="dropdown-menu {{ main_attrs.class }}"
+  {% for key, value in main_attrs.items() %}
+    {% if key != 'class' %}{{ key }}="{{ value }}"{% endif %}
   {% endfor %}
 >
-  {% if trigger %}
   <button
     type="button"
-    aria-haspopup="menu"
-    aria-expanded="false"
-    x-bind="$trigger"
-    {% if id %}
     id="{{ id }}-trigger"
+    aria-haspopup="menu"
     aria-controls="{{ id }}-menu"
-    {% endif %}
-    {% for key, value in trigger_attrs %}
+    aria-expanded="false"
+    {% for key, value in trigger_attrs.items() %}
       {{ key }}="{{ value }}"
     {% endfor %}
   >
     {{ trigger | safe }}
   </button>
-  {% endif %}
   <div
+    id="{{ id }}-popover"
     data-popover
     aria-hidden="true"
-    x-bind="$content"
-    {% if id %}id="{{ id }}-menu"{% endif %}
-    {% for key, value in content_attrs %}
+    {% for key, value in popover_attrs.items() %}
       {{ key }}="{{ value }}"
     {% endfor %}
   >
-    <nav role="menu">
-      {% if menu %}
-        {{ render_dropdown_items(menu, id ~ "-items" if id else "items") }}
+    <div
+      role="menu"
+      id="{{ id }}-menu"
+      aria-labelledby="{{ id }}-trigger"
+      {% for key, value in menu_attrs.items() %}
+        {{ key }}="{{ value }}"
+      {% endfor %}
+    >
+      {% if items %}
+        {{ render_dropdown_items(items, id ~ "-items" if id else "items") }}
       {% else %}
         {{ caller() if caller }}
       {% endif %}
-    </nav>
+    </div>
   </div>
 </div>
 {% endmacro %}
@@ -69,7 +71,7 @@
   @param parent_id_prefix {string} [optional] - Prefix for generating element IDs.
 #}
 {% macro render_dropdown_items(items, parent_id_prefix="items") %}
-  {% for item in items.items() %}
+  {% for item in items %}
     {% set item_id = parent_id_prefix ~ "-" ~ loop.index %}
 
     {% if item.type == "group" %}
@@ -77,37 +79,46 @@
       <div
         role="group"
         aria-labelledby="{{ group_label_id }}"
-        {% for key, value in item.attrs.items() %}
-          {{ key }}="{{ value }}"
-        {% endfor %}
+        {% if item.attrs %}
+          {% for key, value in item.attrs.items() %}
+            {{ key }}="{{ value }}"
+          {% endfor %}
+        {% endif %}
       >
         <div role="heading" id="{{ group_label_id }}">{{ item.label }}</div>
-        {{ render_dropdown_items(item.items, item_id) if item.items }}
+        {{ render_dropdown_items(item['items'], item_id) if item['items'] }}
       </div>
     {% elif item.type == "separator" %}
       <hr role="separator" />
     {% elif item.type == "item" or not item.type %}
       {% if item.url %}
         <a
+          id="{{ item_id }}"
           role="menuitem"
           href="{{ item.url }}"
-          {% for key, value in item.attrs.items() %}
-            {% if key != "url" %} {{ key }}="{{ value }}" {% endif %}
-          {% endfor %}
+          {% if item.attrs %}
+            {% for key, value in item.attrs.items() %}
+              {% if key != "url" %} {{ key }}="{{ value }}" {% endif %}
+            {% endfor %}
+          {% endif %}
         >
+          {% if item.icon %}{{ item.icon | safe }}{% endif %}
           {{ item.label | safe }}
         </a>
       {% else %}
-        <button
+        <div
+          id="{{ item_id }}"
           role="menuitem"
-          type="button"
-          {% for key, value in item.attrs.items() %}
-             {{ key }}="{{ value }}"
-          {% endfor %}
+          {% if item.attrs %}
+            {% for key, value in item.attrs.items() %}
+              {{ key }}="{{ value }}"
+            {% endfor %}
+          {% endif %}
         >
+          {% if item.icon %}{{ item.icon | safe }}{% endif %}
           {{ item.label | safe }}
-        </button>
+        </div>
       {% endif %}
     {% endif %}
   {% endfor %}
-{% endmacro %}
+{% endmacro %}

src/jinja/popover.html.jinja

@@ -5,51 +5,44 @@
   @param trigger {string} [optional] - HTML content for the element that triggers the popover.
   @param main_attrs {object} [optional] - Additional HTML attributes for the main container div.
   @param trigger_attrs {object} [optional] - Additional HTML attributes for the trigger element.
-  @param content_attrs {object} [optional] - Additional HTML attributes for the popover content div.
+  @param popover_attrs {object} [optional] - Additional HTML attributes for the popover content div.
 #}
 {% macro popover(
+  trigger,
   id=None,
-  trigger=None,
   main_attrs={},
   trigger_attrs={},
-  content_attrs={}
+  popover_attrs={}
 ) %}
+{% set id = id or ("popover-" + (range(100000, 999999) | random | string)) %}
+
 <div
+  id="{{ id }}"
   class="popover {{ main_attrs.class }}"
-  x-data="popover"
-  @click.away="open = false"
-  {% if id %}id="{{ id }}"{% endif %}
   {% for key, value in main_attrs.items() %}
     {% if key != 'class' %}{{ key }}="{{ value }}"{% endif %}
   {% endfor %}
 >
-  {% if trigger %}
   <button
-    type="button"
-    aria-haspopup="menu"
-    aria-expanded="false"
-    x-bind="$trigger"
-    {% if id %}
     id="{{ id }}-trigger"
-    aria-controls="{{ id }}-menu"
-    {% endif %}
+    type="button"
+    aria-expanded="false"
+    aria-controls="{{ id }}-popover"
     {% for key, value in trigger_attrs.items() %}
       {{ key }}="{{ value }}"
     {% endfor %}
   >
     {{ trigger | safe }}
   </button>
-  {% endif %}
   <div
+    id="{{ id }}-popover"
     data-popover
     aria-hidden="true"
-    x-bind="$content"
-    {% if id %}id="{{ id }}-menu"{% endif %}
-    {% for key, value in content_attrs.items() %}
+    {% for key, value in popover_attrs.items() %}
       {{ key }}="{{ value }}"
     {% endfor %}
-  >
+  > 
     {{ caller() if caller }}
   </div>
 </div>
-{% endmacro %}
+{% endmacro %}

src/jinja/select.html.jinja

@@ -6,50 +6,73 @@
   @param name {string} [optional] - The name attribute for the hidden input storing the selected value.
   @param main_attrs {object} [optional] - Additional HTML attributes for the main container div.
   @param trigger_attrs {object} [optional] - Additional HTML attributes for the trigger button.
-  @param content_attrs {object} [optional] - Additional HTML attributes for the popover content div.
+  @param popover_attrs {object} [optional] - Additional HTML attributes for the popover content div.
   @param listbox_attrs {object} [optional] - Additional HTML attributes for the listbox div.
   @param input_attrs {object} [optional] - Additional HTML attributes for the hidden input.
   @param search_placeholder {string} [optional] [default="Search entries..."] - Placeholder text for the search input (combobox only).
-  @param is_combobox {boolean} [optional] [default=False] - Renders a combobox with search functionality if True.
+  @param is_combobox {boolean} [optional] [default=false] - Renders a combobox with search functionality if true.
 #}
 {% macro select(
   id=None,
   selected=None,
   name=None,
-  items=None,
+  items=[],
   main_attrs={},
   trigger_attrs={},
-  content_attrs={},
+  popover_attrs={},
   listbox_attrs={},
   input_attrs={},
   search_placeholder="Search entries...",
-  is_combobox=False
+  is_combobox=false
 ) %}
+{% set id = id or ("select-" + (range(100000, 999999) | random | string)) %}
+
+{% set first_option = namespace(item=None) %}
+{% set selected_option = namespace(item=None) %}
+
+{% if items %}
+  {% for item in items %}
+    {% if item.type == "group" %}
+      {% for sub_item in item['items'] %}
+        {% if not first_option.item %}
+          {% set first_option.item = sub_item %}
+        {% endif %}
+        {% if selected and sub_item.value == selected and not selected_option.item %}
+          {% set selected_option.item = sub_item %}
+        {% endif %}
+      {% endfor %}
+    {% else %}
+      {% if not first_option.item %}
+        {% set first_option.item = item %}
+      {% endif %}
+      {% if selected and item.value == selected and not selected_option.item %}
+        {% set selected_option.item = item %}
+      {% endif %}
+    {% endif %}
+  {% endfor %}
+{% endif %}
+
+{% set default_option = selected_option.item or first_option.item or None %}
+
 <div
-  class="popover {{ main_attrs.class }}"
-  x-data="select('{{ name }}', '{{ selected or '' }}')"
-  @click.away="open = false"
-  {% if id %}id="{{ id }}"{% endif %}
+  id="{{ id }}"
+  class="select {{ main_attrs.class }}"
   {% for key, value in main_attrs.items() %}
     {% if key != 'class' %}{{ key }}="{{ value }}"{% endif %}
   {% endfor %}
 >
   <button
     type="button"
+    class="btn-outline justify-between font-normal {{ trigger_attrs.class }}"
+    id="{{ id }}-trigger"
     aria-haspopup="listbox"
     aria-expanded="false"
-    x-bind="$trigger"
-    {% if id %}
-    id="{{ id }}-trigger"
-    aria-controls="{{ id }}-content"
-    {% endif %}
-    class="btn-outline justify-between font-normal {{ trigger_attrs.class }}"
+    aria-controls="{{ id }}-listbox"
     {% for key, value in trigger_attrs.items() %}
       {% if key != 'class' %}{{ key }}="{{ value }}"{% endif %}
     {% endfor %}
   >
-    <div x-html="selectedLabel" class="flex items-center gap-x-2"
-    ></div>
+    <span class="truncate">{{ default_option.label }}</span>
     {% if is_combobox %}
       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevrons-up-down-icon lucide-chevrons-up-down text-muted-foreground opacity-50 shrink-0"><path d="m7 15 5 5 5-5"/><path d="m7 9 5-5 5 5"/></svg>
     {% else %}
@@ -57,11 +80,10 @@
     {% endif %}
   </button>
   <div
+    id="{{ id }}-popover"
     data-popover
     aria-hidden="true"
-    x-bind="$content"
-    {% if id %}id="{{ id }}-content"{% endif %}
-    {% for key, value in content_attrs.items() %}
+    {% for key, value in popover_attrs.items() %}
       {{ key }}="{{ value }}"
     {% endfor %}
   >
@@ -77,38 +99,36 @@
         spellcheck="false"
         aria-autocomplete="list"
         role="combobox"
-        aria-expanded="true"
-        aria-controls="{{ id }}-content"
+        aria-expanded="false"
+        aria-controls="{{ id }}-listbox"
         aria-labelledby="{{ id }}-trigger"
-        x-model="query"
-        x-bind="$filter"
       >
     </header>
     {% endif %}
     <div
       role="listbox"
+      id="{{ id }}-listbox"
       aria-orientation="vertical"
+      aria-labelledby="{{ id }}-trigger"
       {% for key, value in listbox_attrs.items() %}
         {{ key }}="{{ value }}"
       {% endfor %}
     >
       {% if items %}
-        {{ render_select_items(items, id ~ "-items" if id else "items") }}
+        {{ render_select_items(items, default_option.value, id ~ "-items" if id else "items") }}
       {% else %}
         {{ caller() if caller }}
       {% endif %}
     </div>
   </div>
-  {% if name is defined %}
-    <input
-      type="hidden"
-      name="{{ name }}"
-      x-model="selectedValue"
-      {% for key, value in input_attrs.items() %}
-        {% if key != 'name' %}{{ key }}="{{ value }}"{% endif %}
-      {% endfor %}
-    >
-  {% endif %}
+  <input
+    type="hidden"
+    name="{{ name or id ~ '-value' }}"
+    value="{{ (default_option.value if default_option) or '' }}"
+    {% for key, value in input_attrs.items() %}
+      {% if key != 'name' and key != 'value' %}{{ key }}="{{ value }}"{% endif %}
+    {% endfor %}
+  >
 </div>
 {% endmacro %}
 
@@ -118,34 +138,39 @@
   @param items {array} - The array of items to render.
   @param parent_id_prefix {string} [optional] - The prefix for the item id.
 #}
-{% macro render_select_items(items, parent_id_prefix="items") %}
-  {% for item in items.items() %}
+{% macro render_select_items(items, selected, parent_id_prefix="items") %}
+  {% for item in items %}
     {% set item_id = parent_id_prefix ~ "-" ~ loop.index %}
-
     {% if item.type == "group" %}
       {% set group_label_id = item.id if item.id else "group-label-" + item_id %}
       <div
         role="group"
         aria-labelledby="{{ group_label_id }}"
-        {% for key, value in item.attrs.items() %}
-          {{ key }}="{{ value }}"
-        {% endfor %}
+        {% if item.attrs %}
+          {% for key, value in item.attrs.items() %}
+            {{ key }}="{{ value }}"
+          {% endfor %}
+        {% endif %}
       >
         <div role="heading" id="{{ group_label_id }}">{{ item.label }}</div>
-        {{ render_select_items(item.items, item_id) if item.items }}
+        {{ render_select_items(item['items'], selected, item_id) if item['items'] }}
       </div>
     {% elif item.type == "separator" %}
       <hr role="separator" />
     {% elif item.type == "item" or not item.type %}
       <div
+        id="{{ item_id }}"
         role="option"
         data-value="{{ item.value }}"
-        {% for key, value in item.attrs.items() %}
-           {{ key }}="{{ value }}"
-        {% endfor %}
+        {% if selected == item.value %}aria-selected="true"{% endif %}
+        {% if item.attrs %}
+          {% for key, value in item.attrs.items() %}
+            {{ key }}="{{ value }}"
+          {% endfor %}
+        {% endif %}
       >
         {{ item.label | safe }}
       </div>
     {% endif %}
   {% endfor %}
-{% endmacro %}
+{% endmacro %}

src/jinja/sidebar.html.jinja

@@ -2,17 +2,21 @@
   Renders a sidebar component.
 
   @param id {string} [optional] - Unique identifier for the sidebar component.
-  @param label {string} [optional] [default="Sidebar navigation"] - Label for the sidebar navigation.
-  @param open {boolean} [optional] [default=True] - Whether the sidebar is open.
+  @param label {string} [optional] - Label for the sidebar navigation.
+  @param open {boolean} [optional] - Whether the sidebar is open.
   @param side {string} [optional] - Side of the sidebar to display.
   @param header {string} [optional] - Header content for the sidebar.
   @param footer {string} [optional] - Footer content for the sidebar.
   @param menu {array} [optional] - Array of menu items for the sidebar.
+  @param main_attrs {object} [optional] - Additional HTML attributes for the main container div.
+  @param header_attrs {object} [optional] - Additional HTML attributes for the header div.
+  @param content_attrs {object} [optional] - Additional HTML attributes for the content div.
+  @param footer_attrs {object} [optional] - Additional HTML attributes for the footer div.
 #}
 {% macro sidebar(
   id=None,
   label="Sidebar navigation",
-  open=True,
+  open=true,
   side=None,
   header=None,
   footer=None,
@@ -20,21 +24,17 @@
   main_attrs={},
   header_attrs={},
   content_attrs={},
-  footer_attrs={},
-  content_wrapper_attrs=None
+  footer_attrs={}
 ) %}
-<div
+<aside
   {% if id %}id="{{ id }}"{% endif %}
   class="sidebar {{ main_attrs.class }}"
-  data-uninitialized
   data-side="{{ side if side else "left" }}"
   aria-hidden="{{ "true" if not open else "false" }}"
   {{ "inert" if not open }}
   {% for key, value in main_attrs.items() %}
     {% if key != "class" %}{{ key }}="{{ value }}"{% endif %}
   {% endfor %}
-  x-data="sidebar({{ "true" if open else "false" }})"
-  x-bind="$main"
 >
   <nav
     aria-label="{{ label }}"
@@ -71,7 +71,7 @@
     </footer>
     {% endif %}
   </nav>
-</div>
+</aside>
 {% endmacro %}
 
 {#
@@ -81,7 +81,7 @@
   @param parent_id_prefix {string} [optional] - Prefix for generating element IDs.
 #}
 {% macro render_sidebar_content(items, parent_id_prefix="content") %}
-  {% for item in items.items() %}
+  {% for item in items %}
     {% set item_id = parent_id_prefix ~ "-" ~ loop.index %}
 
     {% if item.type == "group" %}
@@ -89,15 +89,17 @@
       <div
         role="group"
         {% if item.label %}aria-labelledby="{{ group_label_id }}"{% endif %}
-        {% for key, value in item.attrs.items() %}
-          {{ key }}="{{ value }}"
-        {% endfor %}
+        {% if item.attrs %}
+          {% for key, value in item.attrs.items() %}
+            {{ key }}="{{ value }}"
+          {% endfor %}
+        {% endif %}
       >
         {% if item.label %}
           <h3 id="{{ group_label_id }}">{{ item.label }}</h3>
         {% endif %}
         <ul>
-          {{ render_sidebar_content(item.items, item_id) if item.items }}
+          {{ render_sidebar_content(item["items"], item_id) if item["items"] }}
         </ul>
       </div>
     {% elif item.type == "separator" %}
@@ -107,16 +109,18 @@
         <details
           id="submenu-{{ item_id }}"
           {{ "open" if item.open }}
-          {% for key, value in item.attrs.items() %}
-            {% if key != "open" %}{{ key }}="{{ value }}"{% endif %}
-          {% endfor %}
+          {% if item.attrs %}
+            {% for key, value in item.attrs.items() %}
+              {% if key != "open" %}{{ key }}="{{ value }}"{% endif %}
+            {% endfor %}
+          {% endif %}
         >
           <summary aria-controls="submenu-{{ item_id }}-content">
             {% if item.icon %}{{ item.icon | safe }}{% endif %}
-            {{ item.label }}
+            {{ item.label | safe }}
           </summary>
           <ul id="submenu-{{ item_id }}-content">
-            {{ render_sidebar_content(item.items, item_id) if item.items }}
+            {{ render_sidebar_content(item["items"], item_id) if item["items"] }}
           </ul>
         </details>
       </li>
@@ -125,12 +129,14 @@
         <a
           href="{{ item.url }}"
           {{ 'aria-current="page"' if item.current }}
-          {% for key, value in item.attrs.items() %}
-            {% if key != "href" and key != "aria-current" %}{{ key }}="{{ value }}"{% endif %}
-          {% endfor %}
+          {% if item.attrs %}
+            {% for key, value in item.attrs.items() %}
+              {% if key != "href" and key != "aria-current" %}{{ key }}="{{ value }}"{% endif %}
+            {% endfor %}
+          {% endif %}
         >
           {% if item.icon %}{{ item.icon | safe }}{% endif %}
-          <span>{{ item.label }}</span>
+          <span>{{ item.label | safe }}</span>
         </a>
        </li>
     {% endif %}

src/jinja/tabs.html.jinja

@@ -14,17 +14,17 @@
   @param default_tab_index {number} [optional] [default=1] - The 1-based index of the tab to be active initially.
 #}
 {% macro tabs(
-    id,
+    id=None,
     tabsets=[],
-    main_attrs=None,
-    tablist_attrs=None,
+    main_attrs={},
+    tablist_attrs={},
     default_tab_index=1
   )
 %}
+{% set id = id or ("tabs-" + (range(100000, 999999) | random | string)) %}
 <div
   class="tabs {{ main_attrs.class }}"
-  x-data="tabs({{ default_tab_index - 1 }})"
-  {% if id %}id="{{ id }}"{% endif %}
+  id="{{ id }}"
   {% for key, value in main_attrs.items() %}
     {% if key != 'class' %}{{ key }}="{{ value }}"{% endif %}
   {% endfor %}
@@ -32,40 +32,43 @@
   <nav
     role="tablist"
     aria-orientation="horizontal"
-    x-bind="$tablist"
     {% for key, value in tablist_attrs.items() %}
       {{ key }}="{{ value }}"
     {% endfor %}
   >
-    {% for tabset in tabsets.items() %}
+    {% for tabset in tabsets %}
       <button
         type="button"
         role="tab"
-        id="{{ tabset.id }}-tab-{{ loop.index }}"
-        aria-controls="{{ tabset.id }}-panel-{{ loop.index }}"
+        id="{{ id }}-tab-{{ loop.index }}"
+        aria-controls="{{ id }}-panel-{{ loop.index }}"
         aria-selected="{{ 'true' if loop.index == default_tab_index else 'false' }}"
         tabindex="0"
-        {% for key, value in tabset.tab_attrs.items() %}
-          {{ key }}="{{ value }}"
-        {% endfor %}
+        {% if tabset.tab_attrs %}
+          {% for key, value in tabset.tab_attrs.items() %}
+            {{ key }}="{{ value }}"
+          {% endfor %}
+        {% endif %}
       >
         {{ tabset.tab | safe }}
       </button>
     {% endfor %}
   </nav>
 
-  {% for tabset in tabsets.items() %}
+  {% for tabset in tabsets %}
     {% if tabset.panel %}
       <div
         role="tabpanel"
-        id="{{ tabset.id }}-panel-{{ loop.index }}"
-        aria-labelledby="{{ tabset.id }}-tab-{{ loop.index }}"
+        id="{{ id }}-panel-{{ loop.index }}"
+        aria-labelledby="{{ id }}-tab-{{ loop.index }}"
         tabindex="-1"
         aria-selected="{{ 'true' if loop.index == default_tab_index else 'false' }}"
         {% if loop.index != default_tab_index %}hidden{% endif %}
-        {% for key, value in tabset.panel_attrs.items() %}
-          {{ key }}="{{ value }}"
-        {% endfor %}
+        {% if tabset.panel_attrs %}
+          {% for key, value in tabset.panel_attrs.items() %}
+            {{ key }}="{{ value }}"
+          {% endfor %}
+        {% endif %}
       >
         {{ tabset.panel | safe }}
       </div>

src/jinja/toast.html.jinja

@@ -4,106 +4,34 @@
 
   @param id {string} [optional] [default="toaster"] - Unique identifier for the toaster container.
   @param toasts {array} [optional] - An array of toast objects to render initially. See the <code>toast()</code> macro for more details.
-  @param main_attrs {object} [optional] - Additional HTML attributes for the main toaster container div.
-  @param is_fragment {boolean} [optional] [default=False] - If True, renders only the toast elements with hx-swap-oob="beforeend", suitable for htmx responses. Skips script and template inclusion.
+  @param attrs {object} [optional] - Additional HTML attributes for the main toaster container div.
+  
+  Supports caller() for custom toast markup.
 #}
 {% macro toaster(
   id="toaster",
   toasts=[],
-  main_attrs=None,
-  is_fragment=False
+  attrs={}
 ) %}
 <div
   id="{{ id }}"
-  class="toaster"
-  {% for key, value in main_attrs.items() %}
-    {{ key }}="{{ value }}"
+  class="toaster {{ attrs.class }}"
+  {% for key, value in attrs.items() %}
+    {% if key != 'class' %}{{ key }}="{{ value }}"{% endif %}
   {% endfor %}
-  {% if is_fragment %}hx-swap-oob="beforeend"{% endif %}
 >
-{% for item in toasts.items() %}
+{% for item in toasts %}
   {{ toast(
     category=item.category,
     title=item.title,
     description=item.description,
     action=item.action,
-    cancel=item.cancel
+    cancel=item.cancel,
+    attrs=item.attrs
   ) }}
 {% endfor %}
+{{ caller() if caller }}
 </div>
-
-{% if not is_fragment %}
-<template id="toast-template">
-  <div
-    class="toast"
-    role="status"
-    aria-atomic="true"
-    x-bind="$toastBindings"
-  >
-    <div class="toast-content">
-      <div class="flex items-center justify-between gap-x-3 p-4 [&>svg]:size-4 [&>svg]:shrink-0 [&>[role=img]]:size-4 [&>[role=img]]:shrink-0 [&>[role=img]>svg]:size-4">
-        <template x-if="config.icon">
-          <span aria-hidden="true" role="img" x-html="config.icon"></span>
-        </template>
-        <template x-if="!config.icon && config.category === 'success'">
-          {{ toast_icons.success | safe }}
-        </template>
-        <template x-if="!config.icon && config.category === 'error'">
-          {{ toast_icons.error | safe }}
-        </template>
-        <template x-if="!config.icon && config.category === 'info'">
-          {{ toast_icons.info | safe }}
-        </template>
-        <template x-if="!config.icon && config.category === 'warning'">
-          {{ toast_icons.warning | safe }}
-        </template>
-        <section class="flex-1 flex flex-col gap-0.5 items-start">
-          <template x-if="config.title">
-            <h2 class="font-medium" x-text="config.title"></h2>
-          </template>
-          <template x-if="config.description">
-            <p class="text-muted-foreground" x-text="config.description"></p>
-          </template>
-        </section>
-        <template x-if="config.action || config.cancel">
-          <footer class="flex flex-col gap-1 self-start">
-            <template x-if="config.action?.click">
-              <button
-                type="button"
-                class="btn h-6 text-xs px-2.5 rounded-sm"
-                @click="executeAction(config.action.click)"
-                x-text="config.action.label"
-              ></button>
-            </template>
-            <template x-if="config.action?.url">
-              <a
-                :href="config.action.url"
-                class="btn h-6 text-xs px-2.5 rounded-sm"
-                x-text="config.action.label"
-              ></a>
-            </template>
-            <template x-if="config.cancel?.click">
-              <button
-                type="button"
-                class="btn-outline h-6 text-xs px-2.5 rounded-sm"
-                @click="executeAction(config.cancel.click)"
-                x-text="config.cancel.label"
-              ></button>
-            </template>
-            <template x-if="config.cancel?.url">
-              <a
-                :href="config.cancel.url"
-                class="btn-outline h-6 text-xs px-2.5 rounded-sm"
-                x-text="config.cancel.label"
-              ></a>
-            </template>
-          </footer>
-        </template>
-      </div>
-    </div>
-  </div>
-</template>
-{% endif %}
 {% endmacro %}
 
 {#
@@ -114,85 +42,76 @@
   @param description {string} [optional] - The secondary description text.
   @param action {object} [optional] - Defines an action button.
     - label {string}: Button text.
-    - click {string}: JavaScript code to execute on click (e.g., '$dispatch(\'custom-event\')').
+    - onclick {string}: JavaScript code to execute on click.
     - url {string}: URL for an anchor link button.
   @param cancel {object} [optional] - Defines a cancel/dismiss button (similar structure to action).
     - label {string}: Button text.
-    - click {string}: JavaScript code to execute on click (e.g., '$dispatch(\'custom-event\')').
+    - onclick {string}: JavaScript code to execute on click.
     - url {string}: URL for an anchor link button.
+  @param attrs {object} [optional] - Additional HTML attributes for the toast div.
 #}
 {% macro toast(
   category="success",
   title="",
   description="",
   action=None,
-  cancel=None
+  cancel=None,
+  attrs={}
 ) %}
 <div
-  class="toast"
+  class="toast {{ attrs.class }}"
   role="{{ 'alert' if category == 'error' else 'status' }}"
   aria-atomic="true"
   aria-hidden="false"
   {% if category %}data-category="{{ category }}"{% endif %}
-  x-data="toast({
-    category: '{{ category }}',
-    duration: {{ duration or 'null' }}
-  })"
-  x-bind="$toastBindings"
+  {% for key, value in attrs.items() %}
+    {% if key != 'class' %}{{ key }}="{{ value }}"{% endif %}
+  {% endfor %}
 >
   <div class="toast-content">
-    <div class="flex items-center justify-between gap-x-3 p-4 [&>svg]:size-4 [&>svg]:shrink-0 [&>[role=img]]:size-4 [&>[role=img]]:shrink-0 [&>[role=img]>svg]:size-4">
-      {% if category in ["error", "success", "info", "warning"] %}
-        {{ toast_icons[category] | safe }}
+    {% if category in ["error", "success", "info", "warning"] %}
+      {% if category == "success" %}
+        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/></svg>
+      {% elif category == "error" %}
+        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="m15 9-6 6"/><path d="m9 9 6 6"/></svg>
+      {% elif category == "info" %}
+        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>
+      {% elif category == "warning" %}
+        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"/><path d="M12 9v4"/><path d="M12 17h.01"/></svg>
       {% endif %}
-      <section class="flex-1 flex flex-col gap-0.5 items-start">
-        {% if title %}
-          <h2 class="font-medium">{{ title }}</h2>
-        {% endif %}
-        {% if description %}
-          <p class="text-muted-foreground">{{ description }}</p>
-        {% endif %}
-      </section>
-      {% if action or cancel %}
-        <footer class="flex flex-col gap-1 self-start">
-          {% if action %}
-            {% if action.click %}
-              <button
-                type="button"
-                class="btn h-6 text-xs px-2.5 rounded-sm"
-                @click="{{ action.click }}"
-              >{{ action.label }}</button>
-            {% elif action.url %}
-              <a
-                href="{{ action.url }}"
-                class="btn h-6 text-xs px-2.5 rounded-sm"
-              >{{ action.label }}</a>
-            {% endif %}
+    {% endif %}
+    <section>
+      {% if title %}<h2>{{ title }}</h2>{% endif %}
+      {% if description %}<p>{{ description }}</p>{% endif %}
+    </section>
+    {% if action or cancel %}
+      <footer>
+        {% if action %}
+          {% if action.href %}
+            <a
+              href="{{ action.href }}"
+              class="btn-sm"
+              data-toast-action
+            >{{ action.label }}</a>
+          {% else %}
+            <button
+              type="button"
+              class="btn"
+              data-toast-action
+              {% if action.onclick %}onclick="{{ action.onclick }}"{% endif %}
+            >{{ action.label }}</button>
           {% endif %}
-          {% if cancel %}
-            {% if cancel.click %}
-              <button
-                type="button"
-                class="btn-outline h-6 text-xs px-2.5 rounded-sm"
-                @click="{{ cancel.click }}"
-              >{{ cancel.label }}</button>
-            {% elif cancel.url %}
-              <a
-                href="{{ cancel.url }}"
-                class="btn-outline h-6 text-xs px-2.5 rounded-sm"
-              >{{ toast.cancel.label }}</a>
-            {% endif %}
-          {% endif %}
-        </footer>
-      {% endif %}
-    </div>
+        {% endif %}
+        {% if cancel %}
+          <button
+            type="button"
+            class="btn-sm-outline"
+            data-toast-cancel
+            {% if cancel.onclick %}onclick="{{ cancel.onclick }}"{% endif %}
+          >{{ cancel.label }}</button>
+        {% endif %}
+      </footer>
+    {% endif %}
   </div>
 </div>
-{% endmacro %}
-
-{% set toast_icons = {
-  'success': '<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle-check-icon lucide-circle-check"><circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/></svg>',
-  'error': '<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle-x-icon lucide-circle-x"><circle cx="12" cy="12" r="10"/><path d="m15 9-6 6"/><path d="m9 9 6 6"/></svg>',
-  'info': '<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-info-icon lucide-info"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>',
-  'warning': '<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-triangle-alert-icon lucide-triangle-alert"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"/><path d="M12 9v4"/><path d="M12 17h.01"/></svg>'
-} %}
+{% endmacro %}

src/js/basecoat.js

@@ -0,0 +1,99 @@
+(() => {
+  const componentRegistry = {};
+  let observer = null;
+
+  const registerComponent = (name, selector, initFunction) => {
+    componentRegistry[name] = {
+      selector,
+      init: initFunction
+    };
+  };
+
+  const initComponent = (element, componentName) => {
+    const component = componentRegistry[componentName];
+    if (!component) return;
+    
+    try {
+      component.init(element);
+    } catch (error) {
+      console.error(`Failed to initialize ${componentName}:`, error);
+    }
+  };
+
+  const initAllComponents = () => {
+    Object.entries(componentRegistry).forEach(([name, { selector, init }]) => {
+      document.querySelectorAll(selector).forEach(init);
+    });
+  };
+
+  const initNewComponents = (node) => {
+    if (node.nodeType !== Node.ELEMENT_NODE) return;
+    
+    Object.entries(componentRegistry).forEach(([name, { selector, init }]) => {
+      if (node.matches(selector)) {
+        init(node);
+      }
+      node.querySelectorAll(selector).forEach(init);
+    });
+  };
+
+  const startObserver = () => {
+    if (observer) return;
+    
+    observer = new MutationObserver((mutations) => {
+      mutations.forEach((mutation) => {
+        mutation.addedNodes.forEach(initNewComponents);
+      });
+    });
+    
+    observer.observe(document.body, { childList: true, subtree: true });
+  };
+
+  const stopObserver = () => {
+    if (observer) {
+      observer.disconnect();
+      observer = null;
+    }
+  };
+
+  const reinitComponent = (componentName) => {
+    const component = componentRegistry[componentName];
+    if (!component) {
+      console.warn(`Component '${componentName}' not found in registry`);
+      return;
+    }
+    
+    // Clear initialization flag for this component
+    const flag = `data-${componentName}-initialized`;
+    document.querySelectorAll(`[${flag}]`).forEach(el => {
+      el.removeAttribute(flag);
+    });
+    
+    document.querySelectorAll(component.selector).forEach(component.init);
+  };
+
+  const reinitAll = () => {
+    // Clear all initialization flags using the registry
+    Object.entries(componentRegistry).forEach(([name, { selector }]) => {
+      const flag = `data-${name}-initialized`;
+      document.querySelectorAll(`[${flag}]`).forEach(el => {
+        el.removeAttribute(flag);
+      });
+    });
+    
+    initAllComponents();
+  };
+
+  window.basecoat = {
+    register: registerComponent,
+    init: reinitComponent,
+    initAll: reinitAll,
+    start: startObserver,
+    stop: stopObserver
+  };
+
+  document.addEventListener('DOMContentLoaded', () => {
+    initAllComponents();
+    startObserver();
+  });
+})(); 

src/js/command.js

@@ -0,0 +1,160 @@
+(() => {
+  const initCommand = (container) => {
+    const input = container.querySelector('header input');
+    const menu = container.querySelector('[role="menu"]');
+
+    if (!input || !menu) {
+      const missing = [];
+      if (!input) missing.push('input');
+      if (!menu) missing.push('menu');
+      console.error(`Command component initialization failed. Missing element(s): ${missing.join(', ')}`, container);
+      return;
+    }
+
+    const allMenuItems = Array.from(menu.querySelectorAll('[role="menuitem"]'));
+    const menuItems = allMenuItems.filter(item => 
+      !item.hasAttribute('disabled') && 
+      item.getAttribute('aria-disabled') !== 'true'
+    );
+    let visibleMenuItems = [...menuItems];
+    let activeIndex = -1;
+
+    const setActiveItem = (index) => {
+      if (activeIndex > -1 && menuItems[activeIndex]) {
+        menuItems[activeIndex].classList.remove('active');
+      }
+
+      activeIndex = index;
+
+      if (activeIndex > -1) {
+        const activeItem = menuItems[activeIndex];
+        activeItem.classList.add('active');
+        if (activeItem.id) {
+          input.setAttribute('aria-activedescendant', activeItem.id);
+        } else {
+          input.removeAttribute('aria-activedescendant');
+        }
+      } else {
+        input.removeAttribute('aria-activedescendant');
+      }
+    };
+
+    const filterMenuItems = () => {
+      const searchTerm = input.value.trim().toLowerCase();
+
+      setActiveItem(-1);
+
+      visibleMenuItems = [];
+      allMenuItems.forEach(item => {
+        if (item.hasAttribute('data-force')) {
+          item.setAttribute('aria-hidden', 'false');
+          if (menuItems.includes(item)) {
+            visibleMenuItems.push(item);
+          }
+          return;
+        }
+
+        const itemText = (item.dataset.filter || item.textContent).trim().toLowerCase();
+        const keywordList = (item.dataset.keywords || '')
+          .toLowerCase()
+          .split(/[\s,]+/)
+          .filter(Boolean);
+        const matchesKeyword = keywordList.some(keyword => keyword.includes(searchTerm));
+        const matches = itemText.includes(searchTerm) || matchesKeyword;
+        item.setAttribute('aria-hidden', String(!matches));
+        if (matches && menuItems.includes(item)) {
+          visibleMenuItems.push(item);
+        }
+      });
+
+      if (visibleMenuItems.length > 0) {
+        setActiveItem(menuItems.indexOf(visibleMenuItems[0]));
+        visibleMenuItems[0].scrollIntoView({ block: 'nearest' });
+      }
+    };
+
+    input.addEventListener('input', filterMenuItems);
+
+    const handleKeyNavigation = (event) => {
+      if (!['ArrowDown', 'ArrowUp', 'Enter', 'Home', 'End'].includes(event.key)) {
+        return;
+      }
+
+      if (event.key === 'Enter') {
+        event.preventDefault();
+        if (activeIndex > -1) {
+          menuItems[activeIndex]?.click();
+        }
+        return;
+      }
+
+      if (visibleMenuItems.length === 0) return;
+
+      event.preventDefault();
+
+      const currentVisibleIndex = activeIndex > -1 ? visibleMenuItems.indexOf(menuItems[activeIndex]) : -1;
+      let nextVisibleIndex = currentVisibleIndex;
+
+      switch (event.key) {
+        case 'ArrowDown':
+          if (currentVisibleIndex < visibleMenuItems.length - 1) {
+            nextVisibleIndex = currentVisibleIndex + 1;
+          }
+          break;
+        case 'ArrowUp':
+          if (currentVisibleIndex > 0) {
+            nextVisibleIndex = currentVisibleIndex - 1;
+          } else if (currentVisibleIndex === -1) {
+            nextVisibleIndex = 0;
+          }
+          break;
+        case 'Home':
+          nextVisibleIndex = 0;
+          break;
+        case 'End':
+          nextVisibleIndex = visibleMenuItems.length - 1;
+          break;
+      }
+
+      if (nextVisibleIndex !== currentVisibleIndex) {
+        const newActiveItem = visibleMenuItems[nextVisibleIndex];
+        setActiveItem(menuItems.indexOf(newActiveItem));
+        newActiveItem.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
+      }
+    };
+
+    menu.addEventListener('mousemove', (event) => {
+      const menuItem = event.target.closest('[role="menuitem"]');
+      if (menuItem && visibleMenuItems.includes(menuItem)) {
+        const index = menuItems.indexOf(menuItem);
+        if (index !== activeIndex) {
+          setActiveItem(index);
+        }
+      }
+    });
+
+    menu.addEventListener('click', (event) => {
+      const clickedItem = event.target.closest('[role="menuitem"]');
+      if (clickedItem && visibleMenuItems.includes(clickedItem)) {
+        const dialog = container.closest('dialog.command-dialog');
+        if (dialog && !clickedItem.hasAttribute('data-keep-command-open')) {
+          dialog.close();
+        }
+      }
+    });
+
+    input.addEventListener('keydown', handleKeyNavigation);
+
+    if (visibleMenuItems.length > 0) {
+      setActiveItem(menuItems.indexOf(visibleMenuItems[0]));
+      visibleMenuItems[0].scrollIntoView({ block: 'nearest' });
+    }
+
+    container.dataset.commandInitialized = true;
+    container.dispatchEvent(new CustomEvent('basecoat:initialized'));
+  };
+
+  if (window.basecoat) {
+    window.basecoat.register('command', '.command:not([data-command-initialized])', initCommand);
+  }
+})();

src/js/dialog.js

@@ -1,54 +0,0 @@
-window.basecoat = window.basecoat || {};
-window.basecoat.registerDialog = function(Alpine) {
-  if (Alpine.components && Alpine.components.dialog) return;
-
-  Alpine.data('dialog', (initialOpen = false, initialCloseOnOverlayClick = true) => ({
-    id: null,
-    open: false,
-    closeOnOverlayClick: true,
-
-    init() {
-      this.id = this.$el.id;
-      if (!this.id) {
-        console.warn('Dialog component initialized without an `id`. This may cause issues with event targeting and accessibility.');
-      }
-      this.open = initialOpen;
-      this.closeOnOverlayClick = initialCloseOnOverlayClick;
-    },
-    show() {
-      if (!this.open) {
-        this.open = true;
-        this.$nextTick(() => {
-          this.$el.dispatchEvent(new CustomEvent('dialog:opened', { bubbles: true, detail: { id: this.id } }));
-          setTimeout(() => {
-            const focusTarget = this.$refs.focusOnOpen || this.$el.querySelector('[role="dialog"]');
-            if (focusTarget) focusTarget.focus();
-          }, 50);
-        });
-      }
-    },
-    hide() {
-      if (this.open) {
-        this.open = false;
-        this.$nextTick(() => {
-          this.$el.dispatchEvent(new CustomEvent('dialog:closed', { bubbles: true, detail: { id: this.id } }));
-        });
-      }
-    },
-
-    $main: {
-      '@dialog:open.window'(e) { if (e.detail && e.detail.id === this.id) this.show() },
-      '@dialog:close.window'(e) { if (e.detail && e.detail.id === this.id) this.hide() },
-      '@keydown.escape.window'() { this.open && this.hide() },
-    },
-    $trigger: {
-      '@click'() { this.show() },
-      ':aria-expanded'() { return this.open }
-    },
-    $content: {
-      ':inert'() { return !this.open },
-      '@click.self'() { if (this.closeOnOverlayClick) this.hide() },
-      'x-cloak': ''
-    }
-  }));
-};

src/js/dropdown-menu.js

@@ -1,91 +1,171 @@
-window.basecoat = window.basecoat || {};
-window.basecoat.registerDropdownMenu = function(Alpine) {
-  if (Alpine.components && Alpine.components.dropdownMenu) return;
+(() => {
+  const initDropdownMenu = (dropdownMenuComponent) => {
+    const trigger = dropdownMenuComponent.querySelector(':scope > button');
+    const popover = dropdownMenuComponent.querySelector(':scope > [data-popover]');
+    const menu = popover.querySelector('[role="menu"]');
+    
+    if (!trigger || !menu || !popover) {
+      const missing = [];
+      if (!trigger) missing.push('trigger');
+      if (!menu) missing.push('menu');
+      if (!popover) missing.push('popover');
+      console.error(`Dropdown menu initialisation failed. Missing element(s): ${missing.join(', ')}`, dropdownMenuComponent);
+      return;
+    }
 
-  Alpine.data('dropdownMenu', () => ({
-    open: false,
-    focusedIndex: null,
-    menuItems: [],
+    let menuItems = [];
+    let activeIndex = -1;
 
-    init() {
-      this.$nextTick(() => {
-        this.menuItems = Array.from(this.$el.querySelectorAll('[role=menuitem]:not([disabled]),[role=menuitemcheckbox]:not([disabled]),[role=menuitemradio]:not([disabled])'));
-      });
-    },
-    focusMenuitem() {
-      if (this.menuItems.length === 0) return;
-
-      if (this.focusedIndex >= this.menuItems.length) {
-        this.focusedIndex = this.menuItems.length - 1;
-      } else if (this.focusedIndex < 0 || this.focusedIndex === null) {
-        this.focusedIndex = 0;
+    const closePopover = (focusOnTrigger = true) => {
+      if (trigger.getAttribute('aria-expanded') === 'false') return;
+      trigger.setAttribute('aria-expanded', 'false');
+      trigger.removeAttribute('aria-activedescendant');
+      popover.setAttribute('aria-hidden', 'true');
+      
+      if (focusOnTrigger) {
+        trigger.focus();
       }
-      this.menuItems.forEach(item => item.blur());
-      this.menuItems[this.focusedIndex].focus();
-    },
-    moveMenuitemFocus(delta) {
-      if (this.menuItems.length === 0) return;
+      
+      setActiveItem(-1);
+    };
 
-      let wasOpen = this.open;
-      if (!this.open) { 
-        this.open = true;
-        this.focusedIndex = 0;
+    const openPopover = (initialSelection = false) => {
+      document.dispatchEvent(new CustomEvent('basecoat:popover', {
+        detail: { source: dropdownMenuComponent }
+      }));
+      
+      trigger.setAttribute('aria-expanded', 'true');
+      popover.setAttribute('aria-hidden', 'false');
+      menuItems = Array.from(menu.querySelectorAll('[role^="menuitem"]')).filter(item => 
+        !item.hasAttribute('disabled') && 
+        item.getAttribute('aria-disabled') !== 'true'
+      );
+      
+      if (menuItems.length > 0 && initialSelection) {
+        if (initialSelection === 'first') {
+          setActiveItem(0);
+        } else if (initialSelection === 'last') {
+          setActiveItem(menuItems.length - 1);
+        }
+      }
+    };
+
+    const setActiveItem = (index) => {
+      if (activeIndex > -1 && menuItems[activeIndex]) {
+        menuItems[activeIndex].classList.remove('active');
+      }
+      activeIndex = index;
+      if (activeIndex > -1 && menuItems[activeIndex]) {
+        const activeItem = menuItems[activeIndex];
+        activeItem.classList.add('active');
+        trigger.setAttribute('aria-activedescendant', activeItem.id);
       } else {
-        this.focusedIndex = this.focusedIndex === null
-          ? 0
-          : this.focusedIndex + delta;
+        trigger.removeAttribute('aria-activedescendant');
       }
+    };
 
-      if (wasOpen) {
-        this.focusMenuitem();
+    trigger.addEventListener('click', () => {
+      const isExpanded = trigger.getAttribute('aria-expanded') === 'true';
+      if (isExpanded) {
+        closePopover();
       } else {
-        setTimeout(() => this.focusMenuitem(), 50);
+        openPopover(false);
       }
-    },
-    handleMenuitemClick(event) {
-      const menuitem = event.target.closest('[role=menuitem],[role=menuitemcheckbox],[role=menuitemradio]');
-      if (menuitem && menuitem.getAttribute('aria-disabled') !== 'true' && !menuitem.disabled) {
-        this.$nextTick(() => {
-          this.$refs.trigger.focus();
-          this.open = false;
-        });
-      }
-    },
-    handleMenuitemMousemove(event) {
-      const menuitem = event.target.closest('[role=menuitem],[role=menuitemcheckbox],[role=menuitemradio]');
-      if (menuitem && menuitem.getAttribute('aria-disabled') !== 'true' && !menuitem.disabled) {
-        this.focusedIndex = this.menuItems.indexOf(menuitem);
-        this.focusMenuitem();
-      }
-    },
+    });
 
-    $trigger: {
-      '@click'() { this.open = !this.open },
-      '@keydown.escape.prevent'() {
-        this.open = false;
-        this.$refs.trigger.focus();
-      },
-      '@keydown.down.prevent'() { this.moveMenuitemFocus(+1); },
-      '@keydown.up.prevent'() { this.moveMenuitemFocus(-1); },
-      '@keydown.home.prevent'() { this.focusMenuitem(0) },
-      '@keydown.end.prevent'() { this.focusMenuitem(this.menuItems.length - 1) },
-      '@keydown.enter.prevent'() { this.open = !this.open },
-      ':aria-expanded'() { return this.open },
-      'x-ref': 'trigger'
-    },
-    $content: {
-      '@click'(e) { this.handleMenuitemClick(e) },
-      '@keydown.escape.prevent'() {
-        this.open = false;
-        this.$refs.trigger.focus();
-      },
-      '@keydown.down.prevent'() { this.moveMenuitemFocus(+1); },
-      '@keydown.up.prevent'() { this.moveMenuitemFocus(-1); },
-      '@keydown.home.prevent'() { this.focusMenuitem(0) },
-      '@keydown.end.prevent'() { this.focusMenuitem(this.menuItems.length - 1) },
-      '@mouseover'(e) { this.handleMenuitemMousemove(e) },
-      ':aria-hidden'() { return !this.open },
-      'x-cloak': ''
-    },
-  }));
-};
+    dropdownMenuComponent.addEventListener('keydown', (event) => {
+      const isExpanded = trigger.getAttribute('aria-expanded') === 'true';
+
+      if (event.key === 'Escape') {
+        if (isExpanded) closePopover();
+        return;
+      }
+      
+      if (!isExpanded) {
+        if (['Enter', ' '].includes(event.key)) {
+          event.preventDefault();
+          openPopover(false);
+        } else if (event.key === 'ArrowDown') {
+          event.preventDefault();
+          openPopover('first');
+        } else if (event.key === 'ArrowUp') {
+          event.preventDefault();
+          openPopover('last');
+        }
+        return;
+      }
+
+      if (menuItems.length === 0) return;
+
+      let nextIndex = activeIndex;
+
+      switch (event.key) {
+        case 'ArrowDown':
+          event.preventDefault();
+          nextIndex = activeIndex === -1 ? 0 : Math.min(activeIndex + 1, menuItems.length - 1);
+          break;
+        case 'ArrowUp':
+          event.preventDefault();
+          nextIndex = activeIndex === -1 ? menuItems.length - 1 : Math.max(activeIndex - 1, 0);
+          break;
+        case 'Home':
+          event.preventDefault();
+          nextIndex = 0;
+          break;
+        case 'End':
+          event.preventDefault();
+          nextIndex = menuItems.length - 1;
+          break;
+        case 'Enter':
+        case ' ':
+          event.preventDefault();
+          menuItems[activeIndex]?.click();
+          closePopover();
+          return;
+      }
+
+      if (nextIndex !== activeIndex) {
+        setActiveItem(nextIndex);
+      }
+    });
+
+    menu.addEventListener('mousemove', (event) => {
+      const menuItem = event.target.closest('[role^="menuitem"]');
+      if (menuItem && menuItems.includes(menuItem)) {
+        const index = menuItems.indexOf(menuItem);
+        if (index !== activeIndex) {
+          setActiveItem(index);
+        }
+      }
+    });
+
+    menu.addEventListener('mouseleave', () => {
+      setActiveItem(-1);
+    });
+
+    menu.addEventListener('click', (event) => {
+      if (event.target.closest('[role^="menuitem"]')) {
+        closePopover();
+      }
+    });
+
+    document.addEventListener('click', (event) => {
+      if (!dropdownMenuComponent.contains(event.target)) {
+        closePopover();
+      }
+    });
+
+    document.addEventListener('basecoat:popover', (event) => {
+      if (event.detail.source !== dropdownMenuComponent) {
+        closePopover(false);
+      }
+    });
+
+    dropdownMenuComponent.dataset.dropdownMenuInitialized = true;
+    dropdownMenuComponent.dispatchEvent(new CustomEvent('basecoat:initialized'));
+  };
+
+  if (window.basecoat) {
+    window.basecoat.register('dropdown-menu', '.dropdown-menu:not([data-dropdown-menu-initialized])', initDropdownMenu);
+  }
+})();

src/js/popover.js

@@ -1,26 +1,73 @@
-window.basecoat = window.basecoat || {};
-window.basecoat.registerPopover = function(Alpine) {
-  if (Alpine.components && Alpine.components.popover) return;
+(() => {
+  const initPopover = (popoverComponent) => {
+    const trigger = popoverComponent.querySelector(':scope > button');
+    const content = popoverComponent.querySelector(':scope > [data-popover]');
 
-  Alpine.data('popover', () => ({
-    open: false,
+    if (!trigger || !content) {
+      const missing = [];
+      if (!trigger) missing.push('trigger');
+      if (!content) missing.push('content');
+      console.error(`Popover initialisation failed. Missing element(s): ${missing.join(', ')}`, popoverComponent);
+      return;
+    }
 
-    $trigger: {
-      '@click'() { this.open = !this.open },
-      '@keydown.escape.prevent'() {
-        this.open = false;
-        this.$refs.trigger.focus();
-      },
-      ':aria-expanded'() { return this.open },
-      'x-ref': 'trigger'
-    },
-    $content: {
-      '@keydown.escape.prevent'() {
-        this.open = false;
-        this.$refs.trigger.focus();
-      },
-      ':aria-hidden'() { return !this.open },
-      'x-cloak': ''
-    },
-  }));
-};
+    const closePopover = (focusOnTrigger = true) => {
+      if (trigger.getAttribute('aria-expanded') === 'false') return;
+      trigger.setAttribute('aria-expanded', 'false');
+      content.setAttribute('aria-hidden', 'true');
+      if (focusOnTrigger) {
+        trigger.focus();
+      }
+    };
+
+    const openPopover = () => {
+      document.dispatchEvent(new CustomEvent('basecoat:popover', {
+        detail: { source: popoverComponent }
+      }));
+      
+      const elementToFocus = content.querySelector('[autofocus]');
+      if (elementToFocus) {
+        content.addEventListener('transitionend', () => {
+          elementToFocus.focus();
+        }, { once: true });
+      }
+
+      trigger.setAttribute('aria-expanded', 'true');
+      content.setAttribute('aria-hidden', 'false');
+    };
+
+    trigger.addEventListener('click', () => {
+      const isExpanded = trigger.getAttribute('aria-expanded') === 'true';
+      if (isExpanded) {
+        closePopover();
+      } else {
+        openPopover();
+      }
+    });
+
+    popoverComponent.addEventListener('keydown', (event) => {
+      if (event.key === 'Escape') {
+        closePopover();
+      }
+    });
+
+    document.addEventListener('click', (event) => {
+      if (!popoverComponent.contains(event.target)) {
+        closePopover();
+      }
+    });
+
+    document.addEventListener('basecoat:popover', (event) => {
+      if (event.detail.source !== popoverComponent) {
+        closePopover(false);
+      }
+    });
+
+    popoverComponent.dataset.popoverInitialized = true;
+    popoverComponent.dispatchEvent(new CustomEvent('basecoat:initialized'));
+  };
+
+  if (window.basecoat) {
+    window.basecoat.register('popover', '.popover:not([data-popover-initialized])', initPopover);
+  }
+})();

src/js/select.js

@@ -1,150 +1,297 @@
-window.basecoat = window.basecoat || {};
-window.basecoat.registerSelect = function(Alpine) {
-  if (Alpine.components && Alpine.components.select) return;
-  
-  Alpine.data('select', (name = null, initialValue = null) => ({
-    open: false,
-    name: null,
-    options: [],
-    disabledOptions: [],
-    focusedIndex: null,
-    selectedLabel: null,
-    selectedValue: null,
-    query: '',
+(() => {
+  const initSelect = (selectComponent) => {
+    const trigger = selectComponent.querySelector(':scope > button');
+    const selectedLabel = trigger.querySelector(':scope > span');
+    const popover = selectComponent.querySelector(':scope > [data-popover]');
+    const listbox = popover.querySelector('[role="listbox"]');
+    const input = selectComponent.querySelector(':scope > input[type="hidden"]');
+    const filter = selectComponent.querySelector('header input[type="text"]');
+    if (!trigger || !popover || !listbox || !input) {
+      const missing = [];
+      if (!trigger) missing.push('trigger');
+      if (!popover) missing.push('popover');
+      if (!listbox) missing.push('listbox');
+      if (!input)   missing.push('input');
+      console.error(`Select component initialisation failed. Missing element(s): ${missing.join(', ')}`, selectComponent);
+      return;
+    }
     
-    init() {
-      this.$nextTick(() => {
-        if (name) this.name = name;
-        this.options = Array.from(this.$el.querySelectorAll('[role=option]:not([aria-disabled])'));
-        this.disabledOptions = Array.from(this.$el.querySelectorAll('[role=option][aria-disabled=true]'));
-        if (this.options.length === 0) return;
-        if (initialValue) {
-          const option = this.options.find(opt => opt.getAttribute('data-value') === initialValue);
-          this.selectOption(option, false);
-          this.focusedIndex = this.options.indexOf(option);
+    const allOptions = Array.from(listbox.querySelectorAll('[role="option"]'));
+    const options = allOptions.filter(opt => opt.getAttribute('aria-disabled') !== 'true');
+    let visibleOptions = [...options];
+    let activeIndex = -1;
+
+    const setActiveOption = (index) => {
+      if (activeIndex > -1 && options[activeIndex]) {
+        options[activeIndex].classList.remove('active');
+      }
+      
+      activeIndex = index;
+      
+      if (activeIndex > -1) {
+        const activeOption = options[activeIndex];
+        activeOption.classList.add('active');
+        if (activeOption.id) {
+          trigger.setAttribute('aria-activedescendant', activeOption.id);
         } else {
-          this.selectOption(this.options[0], false);
+          trigger.removeAttribute('aria-activedescendant');
         }
-      });
-    },
-    focusOption() {
-      if (this.options.length === 0) return;
-
-      if (this.focusedIndex >= this.options.length) {
-        this.focusedIndex = this.options.length - 1;
-      } else if (this.focusedIndex < 0 || this.focusedIndex === null) {
-        this.focusedIndex = 0;
-      }
-      this.options.forEach(opt => opt.removeAttribute('data-focus'));
-      const option = this.options[this.focusedIndex];
-      option.setAttribute('data-focus', '');
-      option.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
-    },
-    focusOnSelectedOption() {
-      if (this.options.length === 0 || this.selectedValue === null) return;
-      const option = this.options.find(opt => opt.getAttribute('data-value') === this.selectedValue);
-      if (!option) return;
-      this.focusedIndex = this.options.indexOf(option);
-      this.focusOption();
-    },
-    moveOptionFocus(delta) {
-      if (this.options.length === 0) return;
-
-      if (!this.open) { 
-        this.open = true;
-        this.focusOnSelectedOption();
       } else {
-        this.focusedIndex = this.focusedIndex === null
-          ? 0
-          : this.focusedIndex + delta;
+        trigger.removeAttribute('aria-activedescendant');
       }
-      this.focusOption();
-    },
-    handleOptionClick(event) {
-      const option = event.target.closest('[role=option]');
-      if (option && option.getAttribute('aria-disabled') !== 'true') {
-        this.selectOption(option);
-        this.open = false;
-        this.$nextTick(() => this.$refs.trigger.focus());
+    };
+
+    const hasTransition = () => {
+      const style = getComputedStyle(popover);
+      return parseFloat(style.transitionDuration) > 0 || parseFloat(style.transitionDelay) > 0;
+    };
+
+    const updateValue = (option, triggerEvent = true) => {
+      if (option) {
+        selectedLabel.innerHTML = option.innerHTML;
+        input.value = option.dataset.value;
+        listbox.querySelector('[role="option"][aria-selected="true"]')?.removeAttribute('aria-selected');
+        option.setAttribute('aria-selected', 'true');
+        
+        if (triggerEvent) {
+          const event = new CustomEvent('change', {
+            detail: { value: option.dataset.value },
+            bubbles: true
+          });
+          selectComponent.dispatchEvent(event);
+        }
       }
-    },
-    handleOptionMousemove(event) {
-      const option = event.target.closest('[role=option]');
-      if (option && option.getAttribute('aria-disabled') !== 'true') {
-        this.focusedIndex = this.options.indexOf(option);
-        this.focusOption();
+    };
+
+    const closePopover = (focusOnTrigger = true) => {
+      if (popover.getAttribute('aria-hidden') === 'true') return;
+      
+      if (filter) {
+        const resetFilter = () => {
+          filter.value = '';
+          visibleOptions = [...options];
+          allOptions.forEach(opt => opt.setAttribute('aria-hidden', 'false'));
+        };
+        
+        if (hasTransition()) {
+          popover.addEventListener('transitionend', resetFilter, { once: true });
+        } else {
+          resetFilter();
+        }
       }
-    },
-    handleOptionEnter(event) {
-      this.selectOption(this.options[this.focusedIndex]);
-      this.open = !this.open;
-    },
-    selectOption(option, dispatch = true) {
-      if (this.options.length === 0 || !option || option.disabled || option.getAttribute('data-value') == null) {
+      
+      if (focusOnTrigger) trigger.focus();
+      popover.setAttribute('aria-hidden', 'true');
+      trigger.setAttribute('aria-expanded', 'false');
+      setActiveOption(-1);
+    }
+
+    const selectOption = (option) => {
+      if (!option) return;
+      
+      const oldValue = input.value;
+      const newValue = option.dataset.value;
+
+      if (newValue != null && newValue !== oldValue) {
+        updateValue(option);
+      }
+      
+      closePopover();
+    };
+
+    const selectByValue = (value) => {
+      const option = options.find(opt => opt.dataset.value === value);
+      selectOption(option);
+    };
+
+    if (filter) {
+      const filterOptions = () => {
+        const searchTerm = filter.value.trim().toLowerCase();
+        
+        setActiveOption(-1);
+
+        visibleOptions = [];
+        allOptions.forEach(option => {
+          if (option.hasAttribute('data-force')) {
+            option.setAttribute('aria-hidden', 'false');
+            if (options.includes(option)) {
+              visibleOptions.push(option);
+            }
+            return;
+          }
+
+          const optionText = (option.dataset.filter || option.textContent).trim().toLowerCase();
+          const keywordList = (option.dataset.keywords || '')
+            .toLowerCase()
+            .split(/[\s,]+/)
+            .filter(Boolean);
+          const matchesKeyword = keywordList.some(keyword => keyword.includes(searchTerm));
+          const matches = optionText.includes(searchTerm) || matchesKeyword;
+          option.setAttribute('aria-hidden', String(!matches));
+          if (matches && options.includes(option)) {
+            visibleOptions.push(option);
+          }
+        });
+      };
+  
+      filter.addEventListener('input', filterOptions);
+    }
+
+    let initialOption = options.find(opt => opt.dataset.value === input.value);
+    
+    if (!initialOption) {
+      initialOption = options.find(opt => opt.dataset.value !== undefined) ?? options[0];
+    }
+
+    updateValue(initialOption, false);
+
+    const handleKeyNavigation = (event) => {
+      const isPopoverOpen = popover.getAttribute('aria-hidden') === 'false';
+
+      if (!['ArrowDown', 'ArrowUp', 'Enter', 'Home', 'End', 'Escape'].includes(event.key)) {
         return;
       }
 
-      this.options.forEach(opt => {
-        opt.setAttribute('aria-selected', opt === option);
-      });
-      this.selectedLabel = option.innerHTML;
-      this.selectedValue = option.getAttribute('data-value');
-      if (dispatch) {
-        this.$dispatch('select:change', {
-          value: this.selectedValue,
-          label: this.selectedLabel
-        });
-        this.$dispatch('change'); 
-      }
-    },
-    filterOptions(query) {
-      if (query.length > 0) {
-        this.disabledOptions.forEach(opt => { opt.setAttribute('aria-hidden', 'true'); });
-      } else {
-        this.disabledOptions.forEach(opt => { opt.removeAttribute('aria-hidden'); });
-      }
-      this.options.forEach(opt => {
-        opt.removeAttribute('aria-hidden');
-        if (opt.getAttribute('data-value') != null && !opt.innerHTML.toLowerCase().includes(query.toLowerCase())) {
-          opt.setAttribute('aria-hidden', 'true');
+      if (!isPopoverOpen) {
+        if (event.key !== 'Enter' && event.key !== 'Escape') {
+          event.preventDefault();
+          trigger.click();
         }
-      });
-    },
+        return;
+      }
+      
+      event.preventDefault();
 
-    $trigger: {
-      '@click'() { this.open = !this.open; this.focusOnSelectedOption(); },
-      '@keydown.escape.prevent'() {
-        this.open = false;
-        this.$refs.trigger.focus();
-      },
-      '@keydown.down.prevent'() { this.moveOptionFocus(+1); },
-      '@keydown.up.prevent'() { this.moveOptionFocus(-1); },
-      '@keydown.home.prevent'() { this.focusOption(0) },
-      '@keydown.end.prevent'() { this.focusOption(this.options.length - 1) },
-      '@keydown.enter.prevent'() {
-        if (this.open) this.handleOptionEnter();
-        else this.open = true;
-      },
-      ':aria-expanded'() { return this.open },
-      'x-ref': 'trigger'
-    },
-    $content: {
-      '@click'(e) { this.handleOptionClick(e) },
-      '@mouseover'(e) { this.handleOptionMousemove(e) },
-      ':aria-hidden'() { return !this.open },
-      'x-cloak': ''
-    },
-    $filter: {
-      '@input'(e) { this.filterOptions(e.target.value) },
-      '@keydown.escape.prevent'() {
-        this.open = false;
-        this.$refs.trigger.focus();
-      },
-      '@keydown.down.prevent'() { this.moveOptionFocus(+1); },
-      '@keydown.up.prevent'() { this.moveOptionFocus(-1); },
-      '@keydown.home.prevent'() { this.focusOption(0) },
-      '@keydown.end.prevent'() { this.focusOption(this.options.length - 1) },
-      '@keydown.enter.prevent'() { this.handleOptionEnter() },
+      if (event.key === 'Escape') {
+        closePopover();
+        return;
+      }
+      
+      if (event.key === 'Enter') {
+        if (activeIndex > -1) {
+          selectOption(options[activeIndex]);
+        }
+        return;
+      }
+
+      if (visibleOptions.length === 0) return;
+
+      const currentVisibleIndex = activeIndex > -1 ? visibleOptions.indexOf(options[activeIndex]) : -1;
+      let nextVisibleIndex = currentVisibleIndex;
+
+      switch (event.key) {
+        case 'ArrowDown':
+          if (currentVisibleIndex < visibleOptions.length - 1) {
+            nextVisibleIndex = currentVisibleIndex + 1;
+          }
+          break;
+        case 'ArrowUp':
+          if (currentVisibleIndex > 0) {
+            nextVisibleIndex = currentVisibleIndex - 1;
+          } else if (currentVisibleIndex === -1) {
+            nextVisibleIndex = 0;
+          }
+          break;
+        case 'Home':
+          nextVisibleIndex = 0;
+          break;
+        case 'End':
+          nextVisibleIndex = visibleOptions.length - 1;
+          break;
+      }
+
+      if (nextVisibleIndex !== currentVisibleIndex) {
+        const newActiveOption = visibleOptions[nextVisibleIndex];
+        setActiveOption(options.indexOf(newActiveOption));
+        newActiveOption.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
+      }
+    };
+
+    listbox.addEventListener('mousemove', (event) => {
+      const option = event.target.closest('[role="option"]');
+      if (option && visibleOptions.includes(option)) {
+        const index = options.indexOf(option);
+        if (index !== activeIndex) {
+          setActiveOption(index);
+        }
+      }
+    });
+
+    listbox.addEventListener('mouseleave', () => {
+      const selectedOption = listbox.querySelector('[role="option"][aria-selected="true"]');
+      if (selectedOption) {
+        setActiveOption(options.indexOf(selectedOption));
+      } else {
+        setActiveOption(-1);
+      }
+    });
+
+    trigger.addEventListener('keydown', handleKeyNavigation);
+    if (filter) {
+      filter.addEventListener('keydown', handleKeyNavigation);
     }
-  }));
-};
+
+    const openPopover = () => {
+      document.dispatchEvent(new CustomEvent('basecoat:popover', {
+        detail: { source: selectComponent }
+      }));
+      
+      if (filter) {
+        if (hasTransition()) {
+          popover.addEventListener('transitionend', () => {
+            filter.focus();
+          }, { once: true });
+        } else {
+          filter.focus();
+        }
+      }
+
+      popover.setAttribute('aria-hidden', 'false');
+      trigger.setAttribute('aria-expanded', 'true');
+      
+      const selectedOption = listbox.querySelector('[role="option"][aria-selected="true"]');
+      if (selectedOption) {
+        setActiveOption(options.indexOf(selectedOption));
+        selectedOption.scrollIntoView({ block: 'nearest' });
+      }
+    };
+
+    trigger.addEventListener('click', () => {
+      const isExpanded = trigger.getAttribute('aria-expanded') === 'true';
+      if (isExpanded) {
+        closePopover();
+      } else {
+        openPopover();
+      }
+    });
+
+    listbox.addEventListener('click', (event) => {
+      const clickedOption = event.target.closest('[role="option"]');
+      if (clickedOption) {
+        selectOption(clickedOption);
+      }
+    });
+
+    document.addEventListener('click', (event) => {
+      if (!selectComponent.contains(event.target)) {
+        closePopover(false);
+      }
+    });
+
+    document.addEventListener('basecoat:popover', (event) => {
+      if (event.detail.source !== selectComponent) {
+        closePopover(false);
+      }
+    });
+
+    popover.setAttribute('aria-hidden', 'true');
+    
+    selectComponent.selectByValue = selectByValue;
+    selectComponent.dataset.selectInitialized = true;
+    selectComponent.dispatchEvent(new CustomEvent('basecoat:initialized'));
+  };
+
+  if (window.basecoat) {
+    window.basecoat.register('select', 'div.select:not([data-select-initialized])', initSelect);
+  }
+})();

src/js/sidebar.js

@@ -1,25 +1,104 @@
-window.basecoat = window.basecoat || {};
-window.basecoat.registerSidebar= function(Alpine) {
-  if (Alpine.components && Alpine.components.sidebar) return;
+(() => {
+  // Monkey patching the history API to detect client-side navigation
+  if (!window.history.__basecoatPatched) {
+    const originalPushState = window.history.pushState;
+    window.history.pushState = function(...args) {
+      originalPushState.apply(this, args);
+      window.dispatchEvent(new Event('basecoat:locationchange'));
+    };
+    
+    const originalReplaceState = window.history.replaceState;
+    window.history.replaceState = function(...args) {
+      originalReplaceState.apply(this, args);
+      window.dispatchEvent(new Event('basecoat:locationchange'));
+    };
 
-  Alpine.data('sidebar', (initialOpen = true, initialMobileOpen = false) => ({
-    open: window.innerWidth >= 768
-      ? initialOpen
-      : initialMobileOpen,
+    window.history.__basecoatPatched = true;
+  }
 
-    init() {
-      this.$nextTick(() => {
-        this.$el.removeAttribute('data-uninitialized');
+  const initSidebar = (sidebarComponent) => {
+    const initialOpen = sidebarComponent.dataset.initialOpen !== 'false';
+    const initialMobileOpen = sidebarComponent.dataset.initialMobileOpen === 'true';
+    const breakpoint = parseInt(sidebarComponent.dataset.breakpoint) || 768;
+    
+    let open = breakpoint > 0 
+      ? (window.innerWidth >= breakpoint ? initialOpen : initialMobileOpen)
+      : initialOpen;
+    
+    const updateCurrentPageLinks = () => {
+      const currentPath = window.location.pathname.replace(/\/$/, '');
+      sidebarComponent.querySelectorAll('a').forEach(link => {
+        if (link.hasAttribute('data-ignore-current')) return;
+        
+        const linkPath = new URL(link.href).pathname.replace(/\/$/, '');
+        if (linkPath === currentPath) {
+          link.setAttribute('aria-current', 'page');
+        } else {
+          link.removeAttribute('aria-current');
+        }
       });
-    },
+    };
+    
+    const updateState = () => {
+      sidebarComponent.setAttribute('aria-hidden', !open);
+      if (open) {
+        sidebarComponent.removeAttribute('inert');
+      } else {
+        sidebarComponent.setAttribute('inert', '');
+      }
+    };
 
-    $main: {
-      '@sidebar:open.window'(e) { this.open = true },
-      '@sidebar:close.window'(e) { this.open = false },
-      '@sidebar:toggle.window'(e) { this.open = !this.open },
-      '@click'(e) { if (e.target === this.$el) this.open = false },
-      ':aria-hidden'() { return !this.open },
-      ':inert'() { return !this.open }
-    },
-  }));
-};
+    const setState = (state) => {
+      open = state;
+      updateState();
+    };
+
+    const sidebarId = sidebarComponent.id;
+
+    document.addEventListener('basecoat:sidebar', (event) => {
+      if (event.detail?.id && event.detail.id !== sidebarId) return;
+
+      switch (event.detail?.action) {
+        case 'open':
+          setState(true);
+          break;
+        case 'close':
+          setState(false);
+          break;
+        default:
+          setState(!open);
+          break;
+      }
+    });
+    
+    sidebarComponent.addEventListener('click', (event) => {
+      const target = event.target;
+      const nav = sidebarComponent.querySelector('nav');
+      
+      const isMobile = window.innerWidth < breakpoint;
+      
+      if (isMobile && (target.closest('a, button') && !target.closest('[data-keep-mobile-sidebar-open]'))) {
+        if (document.activeElement) document.activeElement.blur();
+        setState(false);
+        return;
+      }
+      
+      if (target === sidebarComponent || (nav && !nav.contains(target))) {
+        if (document.activeElement) document.activeElement.blur();
+        setState(false);
+      }
+    });
+
+    window.addEventListener('popstate', updateCurrentPageLinks);
+    window.addEventListener('basecoat:locationchange', updateCurrentPageLinks);
+
+    updateState();
+    updateCurrentPageLinks();
+    sidebarComponent.dataset.sidebarInitialized = true;
+    sidebarComponent.dispatchEvent(new CustomEvent('basecoat:initialized'));
+  };
+
+  if (window.basecoat) {
+    window.basecoat.register('sidebar', '.sidebar:not([data-sidebar-initialized])', initSidebar);
+  }
+})();

src/js/tabs.js

@@ -1,64 +1,63 @@
-window.basecoat = window.basecoat || {};
-window.basecoat.registerTabs = function(Alpine) {
-  if (Alpine.components && Alpine.components.tabs) return;
-  
-  Alpine.data('tabs', (initialTabIndex = 0) => ({
-    activeTabIndex: initialTabIndex,
-    tabs: [],
-    panels: [],
+(() => {
+  const initTabs = (tabsComponent) => {
+    const tablist = tabsComponent.querySelector('[role="tablist"]');
+    if (!tablist) return;
 
-    init() {
-      this.$nextTick(() => {
-        this.tabs = Array.from(this.$el.querySelectorAll(':scope > [role=tablist] [role=tab]:not([disabled])'));
-        this.panels = Array.from(this.$el.querySelectorAll(':scope > [role=tabpanel]'));
-        if (this.tabs.length > 0) {
-          this.selectTab(this.tabs[initialTabIndex], false);
-        }
-      });
-    },
-    nextTab() {
-      if (this.tabs.length === 0) return;
-      let newIndex = (this.activeTabIndex + 1) % this.tabs.length;
-      this.selectTab(this.tabs[newIndex]);
-    },
-    prevTab() {
-      if (this.tabs.length === 0) return;
-      let newIndex = (this.activeTabIndex - 1 + this.tabs.length) % this.tabs.length;
-      this.selectTab(this.tabs[newIndex]);
-    },
-    selectTab(tab, focus = true) {
-      if (!tab || this.tabs.length === 0) return;
+    const tabs = Array.from(tablist.querySelectorAll('[role="tab"]'));
+    const panels = tabs.map(tab => document.getElementById(tab.getAttribute('aria-controls'))).filter(Boolean);
 
-      this.tabs.forEach((t, index) => {
-        const isSelected = t === tab;
-        t.setAttribute('aria-selected', isSelected);
-        t.setAttribute('tabindex', isSelected ? '0' : '-1');
-        if (isSelected) {
-          this.activeTabIndex = index;
-          this.activeTab = t;
-          if (focus) {
-            t.focus();
-          }
-        }
+    const selectTab = (tabToSelect) => {
+      tabs.forEach((tab, index) => {
+        tab.setAttribute('aria-selected', 'false');
+        tab.setAttribute('tabindex', '-1');
+        if (panels[index]) panels[index].hidden = true;
       });
 
-      const panelId = tab.getAttribute('aria-controls');
-      if (!panelId) return;
+      tabToSelect.setAttribute('aria-selected', 'true');
+      tabToSelect.setAttribute('tabindex', '0');
+      const activePanel = document.getElementById(tabToSelect.getAttribute('aria-controls'));
+      if (activePanel) activePanel.hidden = false;
+    };
 
-      this.panels.forEach(panel => {
-          panel.hidden = (panel.getAttribute('id') !== panelId);
-      });
-    },
+    tablist.addEventListener('click', (event) => {
+      const clickedTab = event.target.closest('[role="tab"]');
+      if (clickedTab) selectTab(clickedTab);
+    });
 
-    $tablist: {
-      ['@click'](event) {
-          const clickedTab = event.target.closest('[role=tab]');
-          if (clickedTab) {
-              this.selectTab(clickedTab);
-          }
-      },
-      ['@keydown.arrow-right.prevent']() { this.nextTab() },
-      ['@keydown.arrow-left.prevent']() { this.prevTab() },
-    },
-  }));
-};
+    tablist.addEventListener('keydown', (event) => {
+      const currentTab = event.target;
+      if (!tabs.includes(currentTab)) return;
+
+      let nextTab;
+      const currentIndex = tabs.indexOf(currentTab);
+
+      switch (event.key) {
+        case 'ArrowRight':
+          nextTab = tabs[(currentIndex + 1) % tabs.length];
+          break;
+        case 'ArrowLeft':
+          nextTab = tabs[(currentIndex - 1 + tabs.length) % tabs.length];
+          break;
+        case 'Home':
+          nextTab = tabs[0];
+          break;
+        case 'End':
+          nextTab = tabs[tabs.length - 1];
+          break;
+        default:
+          return;
+      }
+
+      event.preventDefault();
+      selectTab(nextTab);
+      nextTab.focus();
+    });
+    
+    tabsComponent.dataset.tabsInitialized = true;
+    tabsComponent.dispatchEvent(new CustomEvent('basecoat:initialized'));
+  };
+
+  if (window.basecoat) {
+    window.basecoat.register('tabs', '.tabs:not([data-tabs-initialized])', initTabs);
+  }
+})();

src/js/toast.js

@@ -1,75 +1,181 @@
-window.basecoat = window.basecoat || {};
-window.basecoat.registerToast = function(Alpine) {
-  if (Alpine.components && Alpine.components.toast) return;
+(() => {
+  let toaster;
+  const toasts = new WeakMap();
+  let isPaused = false;
+  const ICONS = {
+    success: '<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/></svg>',
+    error: '<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="m15 9-6 6"/><path d="m9 9 6 6"/></svg>',
+    info: '<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>',
+    warning: '<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"/><path d="M12 9v4"/><path d="M12 17h.01"/></svg>'
+  };
 
-  Alpine.store('toaster', { isPaused: false });
-  Alpine.data('toast', (config={}) => ({
-    config: config,
-    open: false,
-    timeoutDuration: null,
-    timeoutId: null,
+  function initToaster(toasterElement) {
+    if (toasterElement.dataset.toasterInitialized) return;
+    toaster = toasterElement;
 
-    init() {
-      if (config.duration !== -1) {
-        this.timeoutDuration = config.duration || (config.category === 'error' ? 5000 : 3000);
-        this.timeoutId = setTimeout(() => { this.close() }, this.timeoutDuration);
+    toaster.addEventListener('mouseenter', pauseAllTimeouts);
+    toaster.addEventListener('mouseleave', resumeAllTimeouts);
+    toaster.addEventListener('click', (event) => {
+      const actionLink = event.target.closest('.toast footer a');
+      const actionButton = event.target.closest('.toast footer button');
+      if (actionLink || actionButton) {
+        closeToast(event.target.closest('.toast'));
       }
-      this.open = true;
-      this.$watch('$store.toaster.isPaused', (isPaused) => {
-        if (!this.open) return;
-        if (isPaused) {
-          this.pauseTimeout();
+    });
+
+    toaster.querySelectorAll('.toast:not([data-toast-initialized])').forEach(initToast);
+    toaster.dataset.toasterInitialized = 'true';
+    toaster.dispatchEvent(new CustomEvent('basecoat:initialized'));
+  }
+
+  function initToast(element) {
+    if (element.dataset.toastInitialized) return;
+
+    const duration = parseInt(element.dataset.duration);
+    const timeoutDuration = duration !== -1
+      ? duration || (element.dataset.category === 'error' ? 5000 : 3000)
+      : -1;
+    
+    const state = {
+      remainingTime: timeoutDuration,
+      timeoutId: null,
+      startTime: null,
+    };
+    
+    if (timeoutDuration !== -1) {
+      if (isPaused) {
+        state.timeoutId = null;
+      } else {
+        state.startTime = Date.now();
+        state.timeoutId = setTimeout(() => closeToast(element), timeoutDuration);
+      }
+    }
+    toasts.set(element, state);
+    
+    element.dataset.toastInitialized = 'true';
+  }
+
+  function pauseAllTimeouts() {
+    if (isPaused) return;
+
+    isPaused = true;
+    
+    toaster.querySelectorAll('.toast:not([aria-hidden="true"])').forEach(element => {
+      if (!toasts.has(element)) return;
+      
+      const state = toasts.get(element);
+      if (state.timeoutId) {
+        clearTimeout(state.timeoutId);
+        state.timeoutId = null;
+        state.remainingTime -= Date.now() - state.startTime;
+      }
+    });
+  }
+
+  function resumeAllTimeouts() {
+    if (!isPaused) return;
+
+    isPaused = false;
+
+    toaster.querySelectorAll('.toast:not([aria-hidden="true"])').forEach(element => {
+      if (!toasts.has(element)) return;
+
+      const state = toasts.get(element);
+      if (state.remainingTime !== -1 && !state.timeoutId) {
+        if (state.remainingTime > 0) {
+          state.startTime = Date.now();
+          state.timeoutId = setTimeout(() => closeToast(element), state.remainingTime);
         } else {
-          this.resumeTimeout();
+          closeToast(element);
         }
-      });
-    },
-    pauseTimeout() {
-      clearTimeout(this.timeoutId);
-      this.timeoutId = null;
-    },
-    resumeTimeout(index) {
-      if (this.open && this.timeoutId === null) {
-        this.timeoutId = setTimeout(() => { this.close() }, this.timeoutDuration);
       }
-    },
-    close() {
-      this.pauseTimeout();
-      this.open = false;
-      this.$el.blur();
-    },
-    executeAction(actionString) {
-      if (actionString) {
-        Alpine.evaluate(this.$el, actionString);
-      }
-    },
+    });
+  }
 
-    $toastBindings: {
-      ['@mouseenter']() { this.$store.toaster.isPaused = true },
-      ['@mouseleave']() { this.$store.toaster.isPaused = false },
-      ['@keydown.escape.prevent']() { this.close() },
-      [':aria-hidden']() { return !this.open }
-    },
-  }));
+  function closeToast(element) {
+    if (!toasts.has(element)) return;
 
-  Alpine.magic('toast', (el) => (config, toasterId='toaster') => {
-    const toaster = document.getElementById(toasterId);
-    const template = document.getElementById('toast-template');
+    const state = toasts.get(element);
+    clearTimeout(state.timeoutId);
+    toasts.delete(element);
+    
+    if (element.contains(document.activeElement)) document.activeElement.blur();
+    element.setAttribute('aria-hidden', 'true');
+    element.addEventListener('transitionend', () => element.remove(), { once: true });
+  }
 
+  function executeAction(button, toast) {
+    const actionString = button.dataset.toastAction;
+    if (!actionString) return;
+    try {
+      const func = new Function('close', actionString);
+      func(() => closeToast(toast));
+    } catch (event) {
+      console.error('Error executing toast action:', event);
+    }
+  }
+
+  function createToast(config) {
+    const {
+      category = 'info',
+      title,
+      description,
+      action,
+      cancel,
+      duration,
+      icon,
+    } = config;
+
+    const iconHtml = icon || (category && ICONS[category]) || '';
+    const titleHtml = title ? `<h2>${title}</h2>` : '';
+    const descriptionHtml = description ? `<p>${description}</p>` : '';
+    const actionHtml = action?.href
+      ? `<a href="${action.href}" class="btn" data-toast-action>${action.label}</a>`
+      : action?.onclick
+        ? `<button type="button" class="btn" data-toast-action onclick="${action.onclick}">${action.label}</button>`
+        : '';
+    const cancelHtml = cancel
+      ? `<button type="button" class="btn-outline h-6 text-xs px-2.5 rounded-sm" data-toast-cancel onclick="${cancel?.onclick}">${cancel.label}</button>`
+      : '';
+
+    const footerHtml = actionHtml || cancelHtml ? `<footer>${actionHtml}${cancelHtml}</footer>` : '';
+
+    const html = `
+      <div
+        class="toast"
+        role="${category === 'error' ? 'alert' : 'status'}"
+        aria-atomic="true"
+        ${category ? `data-category="${category}"` : ''}
+        ${duration !== undefined ? `data-duration="${duration}"` : ''}
+      >
+        <div class="toast-content">
+          ${iconHtml}
+          <section>
+            ${titleHtml}
+            ${descriptionHtml}
+          </section>
+          ${footerHtml}
+          </div>
+        </div>
+      </div>
+    `;
+    const template = document.createElement('template');
+    template.innerHTML = html.trim();
+    return template.content.firstChild;
+  }
+
+  document.addEventListener('basecoat:toast', (event) => {
     if (!toaster) {
-      console.error(`Toaster container with id #${toasterId} not found.`);
+      console.error('Cannot create toast: toaster container not found on page.');
       return;
     }
-    if (!template) {
-      console.error('Toast template with id #toast-template not found.');
-      return;
-    }
-
-    const clone = template.content.firstElementChild.cloneNode(true);
-
-    clone.setAttribute('x-data', `toast(${JSON.stringify(config)})`);
-    clone.removeAttribute('id'); 
-
-    toaster.appendChild(clone);
+    const config = event.detail?.config || {};
+    const toastElement = createToast(config);
+    toaster.appendChild(toastElement);
   });
-};
+
+  if (window.basecoat) {
+    window.basecoat.register('toaster', '#toaster:not([data-toaster-initialized])', initToaster);
+    window.basecoat.register('toast', '.toast:not([data-toast-initialized])', initToast);
+  }
+})();

src/nunjucks/command.njk

@@ -0,0 +1,206 @@
+{#
+  Renders a standalone command menu component with search and keyboard navigation.
+
+  @param id {string} [optional] - Unique identifier for the command component.
+  @param items {array} [optional] - Array of items to render (alternative to using caller).
+  @param placeholder {string} [optional] [default="Type a command or search..."] - Placeholder text for the search input.
+  @param empty_text {string} [optional] [default="No results found."] - Text displayed when no results match the search.
+  @param main_attrs {object} [optional] - Additional HTML attributes for the main container div.
+  @param input_attrs {object} [optional] - Additional HTML attributes for the search input.
+  @param menu_attrs {object} [optional] - Additional HTML attributes for the menu div.
+#}
+{% macro command(
+  id=None,
+  items=None,
+  placeholder="Type a command or search...",
+  empty_text="No results found.",
+  main_attrs={},
+  input_attrs={},
+  menu_attrs={}
+) %}
+{% set id = id or ("command-" + (range(100000, 999999) | random | string)) %}
+<div
+  id="{{ id }}"
+  class="command {{ main_attrs.class }}"
+  aria-label="Command menu"
+  {% for key, value in main_attrs %}
+    {% if key != 'class' %}{{ key }}="{{ value }}"{% endif %}
+  {% endfor %}
+>
+  <header>
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-search-icon lucide-search"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
+    <input
+      type="text"
+      id="{{ id }}-input"
+      placeholder="{{ placeholder }}"
+      autocomplete="off"
+      autocorrect="off"
+      spellcheck="false"
+      aria-autocomplete="list"
+      role="combobox"
+      aria-expanded="true"
+      aria-controls="{{ id }}-menu"
+      {% for key, value in input_attrs %}
+        {{ key }}="{{ value }}"
+      {% endfor %}
+    >
+  </header>
+  <div
+    role="menu"
+    id="{{ id }}-menu"
+    aria-orientation="vertical"
+    data-empty="{{ empty_text }}"
+    class="scrollbar {{ menu_attrs.class }}"
+    {% for key, value in menu_attrs %}
+      {% if key != 'class' %}{{ key }}="{{ value }}"{% endif %}
+    {% endfor %}
+  >
+    {% if items and items.length > 0 %}
+      {{ render_command_items(items, id ~ "-items" if id else "items") }}
+    {% else %}
+      {{ caller() if caller }}
+    {% endif %}
+  </div>
+</div>
+{% endmacro %}
+
+{#
+  Renders a command dialog (modal command palette).
+
+  @param id {string} [optional] - Unique identifier for the command dialog.
+  @param items {array} [optional] - Array of items to render (alternative to using caller).
+  @param placeholder {string} [optional] [default="Type a command or search..."] - Placeholder text for the search input.
+  @param empty_text {string} [optional] [default="No results found."] - Text displayed when no results match the search.
+  @param dialog_attrs {object} [optional] - Additional HTML attributes for the dialog element.
+  @param input_attrs {object} [optional] - Additional HTML attributes for the search input.
+  @param menu_attrs {object} [optional] - Additional HTML attributes for the menu div.
+  @param open {boolean} [optional] [default=false] - Whether the command dialog should be open initially.
+#}
+{% macro command_dialog(
+  id=None,
+  items=None,
+  placeholder="Type a command or search...",
+  empty_text="No results found.",
+  dialog_attrs={},
+  input_attrs={},
+  menu_attrs={},
+  open=false
+) %}
+{% set id = id or ("command-dialog-" + (range(100000, 999999) | random | string)) %}
+<dialog
+  id="{{ id }}"
+  class="command-dialog {{ dialog_attrs.class }}"
+  aria-label="Command menu"
+  {% if open %}open{% endif %}
+  onclick="if (event.target === this) this.close()"
+  {% for key, value in dialog_attrs %}
+    {% if key != 'class' %}{{ key }}="{{ value }}"{% endif %}
+  {% endfor %}
+>
+  <div class="command">
+    <header>
+      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-search-icon lucide-search"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
+      <input
+        type="text"
+        id="{{ id }}-input"
+        placeholder="{{ placeholder }}"
+        autocomplete="off"
+        autocorrect="off"
+        spellcheck="false"
+        aria-autocomplete="list"
+        role="combobox"
+        aria-expanded="true"
+        aria-controls="{{ id }}-menu"
+        {% for key, value in input_attrs %}
+          {{ key }}="{{ value }}"
+        {% endfor %}
+      >
+    </header>
+    <div
+      role="menu"
+      id="{{ id }}-menu"
+      aria-orientation="vertical"
+      data-empty="{{ empty_text }}"
+      class="scrollbar {{ menu_attrs.class }}"
+      {% for key, value in menu_attrs %}
+        {% if key != 'class' %}{{ key }}="{{ value }}"{% endif %}
+      {% endfor %}
+    >
+      {% if items and items.length > 0 %}
+        {{ render_command_items(items, id ~ "-items" if id else "items") }}
+      {% else %}
+        {{ caller() if caller }}
+      {% endif %}
+    </div>
+    <button type="button" aria-label="Close dialog" onclick="this.closest('dialog').close()">
+      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x-icon lucide-x"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
+    </button>
+  </div>
+</dialog>
+{% endmacro %}
+
+{# 
+  Renders a list of items for the command component.
+
+  @param items {array} - Array of items to render. Each item can be:
+    - { type: "item", label: "Text or HTML", icon: "HTML", url: "href", keywords: "search terms", disabled: true, attrs: {} }
+    - { type: "group", label: "Group Title", items: [...] }
+    - { type: "separator" }
+    Note: Use attrs to add data-label for alternative search text if needed. If url is provided, renders as <a role="menuitem"> instead of <div role="menuitem">. Label supports HTML (marked as safe).
+  @param parent_id_prefix {string} [optional] - The prefix for the item id.
+#}
+{% macro render_command_items(items, parent_id_prefix="items") %}
+  {% for item in items %}
+    {% set item_id = parent_id_prefix ~ "-" ~ loop.index %}
+    {% if item.type == "group" %}
+      {% set group_label_id = item.id if item.id else "group-label-" + item_id %}
+      <div
+        role="group"
+        aria-labelledby="{{ group_label_id }}"
+        {% if item.attrs %}
+          {% for key, value in item.attrs %}
+            {{ key }}="{{ value }}"
+          {% endfor %}
+        {% endif %}
+      >
+        <span role="heading" id="{{ group_label_id }}">{{ item.label | safe }}</span>
+        {{ render_command_items(item.items, item_id) if item.items }}
+      </div>
+    {% elif item.type == "separator" %}
+      <hr role="separator" />
+    {% elif item.type == "item" or not item.type %}
+      {% if item.url %}
+        <a
+          id="{{ item_id }}"
+          href="{{ item.url }}"
+          role="menuitem"
+          {% if item.keywords %}data-keywords="{{ item.keywords }}"{% endif %}
+          {% if item.disabled %}aria-disabled="true"{% endif %}
+          {% if item.attrs %}
+            {% for key, value in item.attrs %}
+              {% if key != "href" %}{{ key }}="{{ value }}"{% endif %}
+            {% endfor %}
+          {% endif %}
+        >
+          {% if item.icon %}{{ item.icon | safe }}{% endif %}
+          {{ item.label | safe }}
+        </a>
+      {% else %}
+        <div
+          id="{{ item_id }}"
+          role="menuitem"
+          {% if item.keywords %}data-keywords="{{ item.keywords }}"{% endif %}
+          {% if item.disabled %}aria-disabled="true"{% endif %}
+          {% if item.attrs %}
+            {% for key, value in item.attrs %}
+              {{ key }}="{{ value }}"
+            {% endfor %}
+          {% endif %}
+        >
+          {% if item.icon %}{{ item.icon | safe }}{% endif %}
+          {{ item.label | safe }}
+        </div>
+      {% endif %}
+    {% endif %}
+  {% endfor %}
+{% endmacro %}

src/nunjucks/dialog.njk

@@ -8,103 +8,85 @@
   @param footer {string} [optional] - HTML content for the dialog footer.
   @param main_attrs {object} [optional] - Additional HTML attributes for the main container div.
   @param trigger_attrs {object} [optional] - Additional HTML attributes for the trigger button.
-  @param content_attrs {object} [optional] - Additional HTML attributes for the dialog content article.
-  @param content_header_attrs {object} [optional] - Additional HTML attributes for the dialog header.
-  @param content_body_attrs {object} [optional] - Additional HTML attributes for the dialog body section.
-  @param content_footer_attrs {object} [optional] - Additional HTML attributes for the dialog footer.
+  @param dialog_attrs {object} [optional] - Additional HTML attributes for the dialog content container.
+  @param header_attrs {object} [optional] - Additional HTML attributes for the dialog header.
+  @param body_attrs {object} [optional] - Additional HTML attributes for the dialog body section.
+  @param footer_attrs {object} [optional] - Additional HTML attributes for the dialog footer.
   @param open {boolean} [optional] [default=false] - Whether the dialog should be open initially.
   @param close_button {boolean} [optional] [default=true] - Whether to include a close button.
   @param close_on_overlay_click {boolean} [optional] [default=true] - Whether clicking the overlay closes the dialog.
 #}
 {% macro dialog(
-  id,
+  id=None,
   trigger=None,
   title=None,
   description=None,
   footer=None,
-  main_attrs={},
+  dialog_attrs={},
   trigger_attrs={},
-  content_attrs={},
-  content_header_attrs={},
-  content_body_attrs={},
-  content_footer_attrs={},
+  header_attrs={},
+  body_attrs={},
+  footer_attrs={},
   open=false,
   close_button=true,
   close_on_overlay_click=true
 ) %}
-<div
-  id="{{ id }}"
-  x-data="dialog({{ 'true' if open else 'false' }}, {{ 'true' if close_on_overlay_click else 'false' }})"
-  x-bind="$main"
-  class="dialog"
-  {% for key, value in main_attrs %}
+{% set id = id or ("dialog-" + (range(100000, 999999) | random | string)) %}
+{% if trigger %}
+<button
+  type="button"
+  onclick="document.getElementById('{{ id }}').showModal()"
+  {% for key, value in trigger_attrs %}
     {{ key }}="{{ value }}"
   {% endfor %}
 >
-  {% if trigger %}
-  <button
-    type="button"
-    aria-expanded="false"
-    aria-controls="{{ id }}-dialog"
-    x-bind="$trigger"
-    {% for key, value in trigger_attrs %}
-      {{ key }}="{{ value }}"
-    {% endfor %}
-  >
-    {{ trigger }} 
-  </button>
-  {% endif %}
-  <div
-    role="dialog"
-    id="{{ id }}-dialog"
-    tabindex="-1"
-    aria-modal="true"
-    aria-labelledby="{{ id }}-title"
-    inert
-    x-bind="$content"
-  >
-    <article
-      {% for key, value in content_attrs %}
-        {{ key }}="{{ value }}"
-      {% endfor %}
-    >
-      {% if title or description %}
-        <header
-          {% for key, value in content_header_attrs %}
-            {{ key }}="{{ value }}"
-          {% endfor %}
-        >
-          <h2 id="{{ id }}-title">{{ title | safe }}</h2>
-          <p>{{ description | safe }}</p>
-        </header>
-      {% endif %}
-      {% if caller %}
-        <section
-          {% for key, value in content_body_attrs %}
-            {{ key }}="{{ value }}"
-          {% endfor %}
-        >
-          {{ caller() }}
-        </section>
-      {% endif %}
-      {% if footer %}
-        <footer
-          {% for key, value in content_footer_attrs %}
-            {{ key }}="{{ value }}"
-          {% endfor %}
-        >
-          {{ footer | safe }}
-        </footer>
-      {% endif %}
-      {% if close_button %}
-        <button
-          @click="hide()"
-          aria-label="Close dialog"
-        >
-          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x-icon lucide-x"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
-        </button>
-      {% endif %}
-    </article>
+  {{ trigger | safe }}
+</button>
+{% endif %}
+<dialog
+  id="{{ id }}"
+  class="dialog {{ dialog_attrs.class }}"
+  aria-labelledby="{{ id }}-title"
+  {% if description %}aria-describedby="{{ id }}-description"{% endif %}
+  {% if close_on_overlay_click %}onclick="if (event.target === this) this.close()"{% endif %}
+  {% for key, value in dialog_attrs %}
+    {% if key != 'class' %}{{ key }}="{{ value }}"{% endif %}
+  {% endfor %}
+>
+  <div>
+    {% if title or description %}
+      <header
+        {% for key, value in header_attrs %}
+          {{ key }}="{{ value }}"
+        {% endfor %}
+      >
+        <h2 id="{{ id }}-title">{{ title | safe }}</h2>
+        {% if description %}<p id="{{ id }}-description">{{ description | safe }}</p>{% endif %}
+      </header>
+    {% endif %}
+    {% if caller %}
+      <section
+        {% for key, value in body_attrs %}
+          {{ key }}="{{ value }}"
+        {% endfor %}
+      >
+        {{ caller() }}
+      </section>
+    {% endif %}
+    {% if footer %}
+      <footer
+        {% for key, value in footer_attrs %}
+          {{ key }}="{{ value }}"
+        {% endfor %}
+      >
+        {{ footer | safe }}
+      </footer>
+    {% endif %}
+    {% if close_button %}
+      <button type="button" aria-label="Close dialog" onclick="this.closest('dialog').close()">
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x-icon lucide-x"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
+      </button>
+    {% endif %}
   </div>
-</div>
+</dialog>
 {% endmacro %}

src/nunjucks/dropdown-menu.njk

@@ -3,61 +3,63 @@
 
   @param id {string} [optional] - Unique identifier for the dropdown component.
   @param trigger {string} [optional] - HTML content for the button that triggers the dropdown.
-  @param menu {array} [optional] - Array of menu items for the dropdown.
+  @param items {array} [optional] - Array of menu items for the dropdown.
   @param main_attrs {object} [optional] - Additional HTML attributes for the main container div.
   @param trigger_attrs {object} [optional] - Additional HTML attributes for the trigger button.
-  @param content_attrs {object} [optional] - Additional HTML attributes for the dropdown content div.
+  @param popover_attrs {object} [optional] - Additional HTML attributes for the dropdown content div.
 #}
 {% macro dropdown_menu(
+  trigger,
   id=None,
-  trigger=None,
-  menu=None,
+  items=None,
   main_attrs={},
   trigger_attrs={},
-  content_attrs={}
+  popover_attrs={},
+  menu_attrs={}
 ) %}
+{% set id = id or ("dropdown-menu-" + (range(100000, 999999) | random | string)) %}
+
 <div
-  class="popover {{ main_attrs.class }}"
-  x-data="dropdownMenu"
-  @click.away="open = false"
-  {% if id %}id="{{ id }}"{% endif %}
+  id="{{ id }}"
+  class="dropdown-menu {{ main_attrs.class }}"
   {% for key, value in main_attrs %}
-    {% if key != "class" %}{{ key }}="{{ value }}"{% endif %}
+    {% if key != 'class' %}{{ key }}="{{ value }}"{% endif %}
   {% endfor %}
 >
-  {% if trigger %}
   <button
     type="button"
-    aria-haspopup="menu"
-    aria-expanded="false"
-    x-bind="$trigger"
-    {% if id %}
     id="{{ id }}-trigger"
+    aria-haspopup="menu"
     aria-controls="{{ id }}-menu"
-    {% endif %}
+    aria-expanded="false"
     {% for key, value in trigger_attrs %}
       {{ key }}="{{ value }}"
     {% endfor %}
   >
     {{ trigger | safe }}
   </button>
-  {% endif %}
   <div
+    id="{{ id }}-popover"
     data-popover
     aria-hidden="true"
-    x-bind="$content"
-    {% if id %}id="{{ id }}-menu"{% endif %}
-    {% for key, value in content_attrs %}
+    {% for key, value in popover_attrs %}
       {{ key }}="{{ value }}"
     {% endfor %}
   >
-    <nav role="menu">
-      {% if menu %}
-        {{ render_dropdown_items(menu, id ~ "-items" if id else "items") }}
+    <div
+      role="menu"
+      id="{{ id }}-menu"
+      aria-labelledby="{{ id }}-trigger"
+      {% for key, value in menu_attrs %}
+        {{ key }}="{{ value }}"
+      {% endfor %}
+    >
+      {% if items %}
+        {{ render_dropdown_items(items, id ~ "-items" if id else "items") }}
       {% else %}
         {{ caller() if caller }}
       {% endif %}
-    </nav>
+    </div>
   </div>
 </div>
 {% endmacro %}
@@ -77,9 +79,11 @@
       <div
         role="group"
         aria-labelledby="{{ group_label_id }}"
-        {% for key, value in item.attrs %}
-          {{ key }}="{{ value }}"
-        {% endfor %}
+        {% if item.attrs %}
+          {% for key, value in item.attrs %}
+            {{ key }}="{{ value }}"
+          {% endfor %}
+        {% endif %}
       >
         <div role="heading" id="{{ group_label_id }}">{{ item.label }}</div>
         {{ render_dropdown_items(item.items, item_id) if item.items }}
@@ -89,25 +93,32 @@
     {% elif item.type == "item" or not item.type %}
       {% if item.url %}
         <a
+          id="{{ item_id }}"
           role="menuitem"
           href="{{ item.url }}"
-          {% for key, value in item.attrs %}
-            {% if key != "url" %} {{ key }}="{{ value }}" {% endif %}
-          {% endfor %}
+          {% if item.attrs %}
+            {% for key, value in item.attrs %}
+              {% if key != "url" %} {{ key }}="{{ value }}" {% endif %}
+            {% endfor %}
+          {% endif %}
         >
+          {% if item.icon %}{{ item.icon | safe }}{% endif %}
           {{ item.label | safe }}
         </a>
       {% else %}
-        <button
+        <div
+          id="{{ item_id }}"
           role="menuitem"
-          type="button"
-          {% for key, value in item.attrs %}
-             {{ key }}="{{ value }}"
-          {% endfor %}
+          {% if item.attrs %}
+            {% for key, value in item.attrs %}
+              {{ key }}="{{ value }}"
+            {% endfor %}
+          {% endif %}
         >
+          {% if item.icon %}{{ item.icon | safe }}{% endif %}
           {{ item.label | safe }}
-        </button>
+        </div>
       {% endif %}
     {% endif %}
   {% endfor %}
-{% endmacro %}
+{% endmacro %}

src/nunjucks/popover.njk

@@ -5,51 +5,44 @@
   @param trigger {string} [optional] - HTML content for the element that triggers the popover.
   @param main_attrs {object} [optional] - Additional HTML attributes for the main container div.
   @param trigger_attrs {object} [optional] - Additional HTML attributes for the trigger element.
-  @param content_attrs {object} [optional] - Additional HTML attributes for the popover content div.
+  @param popover_attrs {object} [optional] - Additional HTML attributes for the popover content div.
 #}
 {% macro popover(
+  trigger,
   id=None,
-  trigger=None,
   main_attrs={},
   trigger_attrs={},
-  content_attrs={}
+  popover_attrs={}
 ) %}
+{% set id = id or ("popover-" + (range(100000, 999999) | random | string)) %}
+
 <div
+  id="{{ id }}"
   class="popover {{ main_attrs.class }}"
-  x-data="popover"
-  @click.away="open = false"
-  {% if id %}id="{{ id }}"{% endif %}
   {% for key, value in main_attrs %}
     {% if key != 'class' %}{{ key }}="{{ value }}"{% endif %}
   {% endfor %}
 >
-  {% if trigger %}
   <button
-    type="button"
-    aria-haspopup="menu"
-    aria-expanded="false"
-    x-bind="$trigger"
-    {% if id %}
     id="{{ id }}-trigger"
-    aria-controls="{{ id }}-menu"
-    {% endif %}
+    type="button"
+    aria-expanded="false"
+    aria-controls="{{ id }}-popover"
     {% for key, value in trigger_attrs %}
       {{ key }}="{{ value }}"
     {% endfor %}
   >
     {{ trigger | safe }}
   </button>
-  {% endif %}
   <div
+    id="{{ id }}-popover"
     data-popover
     aria-hidden="true"
-    x-bind="$content"
-    {% if id %}id="{{ id }}-menu"{% endif %}
-    {% for key, value in content_attrs %}
+    {% for key, value in popover_attrs %}
       {{ key }}="{{ value }}"
     {% endfor %}
-  >
+  > 
     {{ caller() if caller }}
   </div>
 </div>
-{% endmacro %}
+{% endmacro %}

src/nunjucks/select.njk

@@ -6,7 +6,7 @@
   @param name {string} [optional] - The name attribute for the hidden input storing the selected value.
   @param main_attrs {object} [optional] - Additional HTML attributes for the main container div.
   @param trigger_attrs {object} [optional] - Additional HTML attributes for the trigger button.
-  @param content_attrs {object} [optional] - Additional HTML attributes for the popover content div.
+  @param popover_attrs {object} [optional] - Additional HTML attributes for the popover content div.
   @param listbox_attrs {object} [optional] - Additional HTML attributes for the listbox div.
   @param input_attrs {object} [optional] - Additional HTML attributes for the hidden input.
   @param search_placeholder {string} [optional] [default="Search entries..."] - Placeholder text for the search input (combobox only).
@@ -19,37 +19,60 @@
   items=None,
   main_attrs={},
   trigger_attrs={},
-  content_attrs={},
+  popover_attrs={},
   listbox_attrs={},
   input_attrs={},
   search_placeholder="Search entries...",
   is_combobox=false
 ) %}
+{% set id = id or ("select-" + (range(100000, 999999) | random | string)) %}
+
+{% set first_option = [] %}
+{% set selected_option = [] %}
+
+{% if items %}
+  {% for item in items %}
+    {% if item.type == "group" %}
+      {% for sub_item in item.items %}
+        {% if not first_option[0] %}
+          {% set first_option = (first_option.push(sub_item), first_option) %}
+        {% endif %}
+        {% if selected and sub_item.value == selected and not selected_option[0] %}
+          {% set selected_option = (selected_option.push(sub_item), selected_option) %}
+        {% endif %}
+      {% endfor %}
+    {% else %}
+      {% if not first_option[0] %}
+        {% set first_option = (first_option.push(item), first_option) %}
+      {% endif %}
+      {% if selected and item.value == selected and not selected_option[0] %}
+        {% set selected_option = (selected_option.push(item), selected_option) %}
+      {% endif %}
+    {% endif %}
+  {% endfor %}
+{% endif %}
+
+{% set default_option = selected_option[0] or first_option[0] or None %}
+
 <div
-  class="popover {{ main_attrs.class }}"
-  x-data="select('{{ name }}', '{{ selected or '' }}')"
-  @click.away="open = false"
-  {% if id %}id="{{ id }}"{% endif %}
+  id="{{ id }}"
+  class="select {{ main_attrs.class }}"
   {% for key, value in main_attrs %}
     {% if key != 'class' %}{{ key }}="{{ value }}"{% endif %}
   {% endfor %}
 >
   <button
     type="button"
+    class="btn-outline justify-between font-normal {{ trigger_attrs.class }}"
+    id="{{ id }}-trigger"
     aria-haspopup="listbox"
     aria-expanded="false"
-    x-bind="$trigger"
-    {% if id %}
-    id="{{ id }}-trigger"
-    aria-controls="{{ id }}-content"
-    {% endif %}
-    class="btn-outline justify-between font-normal {{ trigger_attrs.class }}"
+    aria-controls="{{ id }}-listbox"
     {% for key, value in trigger_attrs %}
       {% if key != 'class' %}{{ key }}="{{ value }}"{% endif %}
     {% endfor %}
   >
-    <div x-html="selectedLabel" class="flex items-center gap-x-2"
-    ></div>
+    <span class="truncate">{{ default_option.label }}</span>
     {% if is_combobox %}
       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevrons-up-down-icon lucide-chevrons-up-down text-muted-foreground opacity-50 shrink-0"><path d="m7 15 5 5 5-5"/><path d="m7 9 5-5 5 5"/></svg>
     {% else %}
@@ -57,11 +80,10 @@
     {% endif %}
   </button>
   <div
+    id="{{ id }}-popover"
     data-popover
     aria-hidden="true"
-    x-bind="$content"
-    {% if id %}id="{{ id }}-content"{% endif %}
-    {% for key, value in content_attrs %}
+    {% for key, value in popover_attrs %}
       {{ key }}="{{ value }}"
     {% endfor %}
   >
@@ -77,38 +99,36 @@
         spellcheck="false"
         aria-autocomplete="list"
         role="combobox"
-        aria-expanded="true"
-        aria-controls="{{ id }}-content"
+        aria-expanded="false"
+        aria-controls="{{ id }}-listbox"
         aria-labelledby="{{ id }}-trigger"
-        x-model="query"
-        x-bind="$filter"
       >
     </header>
     {% endif %}
     <div
       role="listbox"
+      id="{{ id }}-listbox"
       aria-orientation="vertical"
+      aria-labelledby="{{ id }}-trigger"
       {% for key, value in listbox_attrs %}
         {{ key }}="{{ value }}"
       {% endfor %}
     >
-      {% if items %}
-        {{ render_select_items(items, id ~ "-items" if id else "items") }}
+      {% if items and items.length > 0 %}
+        {{ render_select_items(items, default_option.value, id ~ "-items" if id else "items") }}
       {% else %}
         {{ caller() if caller }}
       {% endif %}
     </div>
   </div>
-  {% if name is defined %}
-    <input
-      type="hidden"
-      name="{{ name }}"
-      x-model="selectedValue"
-      {% for key, value in input_attrs %}
-        {% if key != 'name' %}{{ key }}="{{ value }}"{% endif %}
-      {% endfor %}
-    >
-  {% endif %}
+  <input
+    type="hidden"
+    name="{{ name or id ~ '-value' }}"
+    value="{{ (default_option.value if default_option) or '' }}"
+    {% for key, value in input_attrs %}
+      {% if key != 'name' and key != 'value' %}{{ key }}="{{ value }}"{% endif %}
+    {% endfor %}
+  >
 </div>
 {% endmacro %}
 
@@ -118,31 +138,36 @@
   @param items {array} - The array of items to render.
   @param parent_id_prefix {string} [optional] - The prefix for the item id.
 #}
-{% macro render_select_items(items, parent_id_prefix="items") %}
+{% macro render_select_items(items, selected, parent_id_prefix="items") %}
   {% for item in items %}
     {% set item_id = parent_id_prefix ~ "-" ~ loop.index %}
-
     {% if item.type == "group" %}
       {% set group_label_id = item.id if item.id else "group-label-" + item_id %}
       <div
         role="group"
         aria-labelledby="{{ group_label_id }}"
-        {% for key, value in item.attrs %}
-          {{ key }}="{{ value }}"
-        {% endfor %}
+        {% if item.attrs %}
+          {% for key, value in item.attrs %}
+            {{ key }}="{{ value }}"
+          {% endfor %}
+        {% endif %}
       >
         <div role="heading" id="{{ group_label_id }}">{{ item.label }}</div>
-        {{ render_select_items(item.items, item_id) if item.items }}
+        {{ render_select_items(item.items, selected, item_id) if item.items }}
       </div>
     {% elif item.type == "separator" %}
       <hr role="separator" />
     {% elif item.type == "item" or not item.type %}
       <div
+        id="{{ item_id }}"
         role="option"
         data-value="{{ item.value }}"
-        {% for key, value in item.attrs %}
-           {{ key }}="{{ value }}"
-        {% endfor %}
+        {% if selected == item.value %}aria-selected="true"{% endif %}
+        {% if item.attrs %}
+          {% for key, value in item.attrs %}
+            {{ key }}="{{ value }}"
+          {% endfor %}
+        {% endif %}
       >
         {{ item.label | safe }}
       </div>

src/nunjucks/sidebar.njk

@@ -7,7 +7,11 @@
   @param side {string} [optional] - Side of the sidebar to display.
   @param header {string} [optional] - Header content for the sidebar.
   @param footer {string} [optional] - Footer content for the sidebar.
-  @param menu {array} [optional] - Array of menu items for the sidebar.
+  @param items {array} [optional] - Array of menu items for the sidebar.
+  @param main_attrs {object} [optional] - Additional HTML attributes for the main container div.
+  @param header_attrs {object} [optional] - Additional HTML attributes for the header element.
+  @param content_attrs {object} [optional] - Additional HTML attributes for the content section.
+  @param footer_attrs {object} [optional] - Additional HTML attributes for the footer element.
 #}
 {% macro sidebar(
   id=None,
@@ -20,21 +24,17 @@
   main_attrs={},
   header_attrs={},
   content_attrs={},
-  footer_attrs={},
-  content_wrapper_attrs=None
+  footer_attrs={}
 ) %}
-<div
+<aside
   {% if id %}id="{{ id }}"{% endif %}
   class="sidebar {{ main_attrs.class }}"
-  data-uninitialized
   data-side="{{ side if side else "left" }}"
   aria-hidden="{{ "true" if not open else "false" }}"
   {{ "inert" if not open }}
   {% for key, value in main_attrs %}
     {% if key != "class" %}{{ key }}="{{ value }}"{% endif %}
   {% endfor %}
-  x-data="sidebar({{ "true" if open else "false" }})"
-  x-bind="$main"
 >
   <nav
     aria-label="{{ label }}"
@@ -71,7 +71,7 @@
     </footer>
     {% endif %}
   </nav>
-</div>
+</aside>
 {% endmacro %}
 
 {#
@@ -89,9 +89,11 @@
       <div
         role="group"
         {% if item.label %}aria-labelledby="{{ group_label_id }}"{% endif %}
-        {% for key, value in item.attrs %}
-          {{ key }}="{{ value }}"
-        {% endfor %}
+        {% if item.attrs %}
+          {% for key, value in item.attrs %}
+            {{ key }}="{{ value }}"
+          {% endfor %}
+        {% endif %}
       >
         {% if item.label %}
           <h3 id="{{ group_label_id }}">{{ item.label }}</h3>
@@ -107,13 +109,15 @@
         <details
           id="submenu-{{ item_id }}"
           {{ "open" if item.open }}
-          {% for key, value in item.attrs %}
-            {% if key != "open" %}{{ key }}="{{ value }}"{% endif %}
-          {% endfor %}
+          {% if item.attrs %}
+            {% for key, value in item.attrs %}
+              {% if key != "open" %}{{ key }}="{{ value }}"{% endif %}
+            {% endfor %}
+          {% endif %}
         >
           <summary aria-controls="submenu-{{ item_id }}-content">
             {% if item.icon %}{{ item.icon | safe }}{% endif %}
-            {{ item.label }}
+            {{ item.label | safe }}
           </summary>
           <ul id="submenu-{{ item_id }}-content">
             {{ render_sidebar_content(item.items, item_id) if item.items }}
@@ -125,12 +129,14 @@
         <a
           href="{{ item.url }}"
           {{ 'aria-current="page"' if item.current }}
-          {% for key, value in item.attrs %}
-            {% if key != "href" and key != "aria-current" %}{{ key }}="{{ value }}"{% endif %}
-          {% endfor %}
+          {% if item.attrs %}
+            {% for key, value in item.attrs %}
+              {% if key != "href" and key != "aria-current" %}{{ key }}="{{ value }}"{% endif %}
+            {% endfor %}
+          {% endif %}
         >
           {% if item.icon %}{{ item.icon | safe }}{% endif %}
-          <span>{{ item.label }}</span>
+          <span>{{ item.label | safe }}</span>
         </a>
        </li>
     {% endif %}

src/nunjucks/tabs.njk

@@ -14,17 +14,17 @@
   @param default_tab_index {number} [optional] [default=1] - The 1-based index of the tab to be active initially.
 #}
 {% macro tabs(
-    id,
+    id=None,
     tabsets=[],
-    main_attrs=None,
-    tablist_attrs=None,
+    main_attrs={},
+    tablist_attrs={},
     default_tab_index=1
   )
 %}
+{% set id = id or ("tabs-" + (range(100000, 999999) | random | string)) %}
 <div
   class="tabs {{ main_attrs.class }}"
-  x-data="tabs({{ default_tab_index - 1 }})"
-  {% if id %}id="{{ id }}"{% endif %}
+  id="{{ id }}"
   {% for key, value in main_attrs %}
     {% if key != 'class' %}{{ key }}="{{ value }}"{% endif %}
   {% endfor %}
@@ -32,7 +32,6 @@
   <nav
     role="tablist"
     aria-orientation="horizontal"
-    x-bind="$tablist"
     {% for key, value in tablist_attrs %}
       {{ key }}="{{ value }}"
     {% endfor %}
@@ -41,13 +40,15 @@
       <button
         type="button"
         role="tab"
-        id="{{ tabset.id }}-tab-{{ loop.index }}"
-        aria-controls="{{ tabset.id }}-panel-{{ loop.index }}"
+        id="{{ id }}-tab-{{ loop.index }}"
+        aria-controls="{{ id }}-panel-{{ loop.index }}"
         aria-selected="{{ 'true' if loop.index == default_tab_index else 'false' }}"
         tabindex="0"
-        {% for key, value in tabset.tab_attrs %}
-          {{ key }}="{{ value }}"
-        {% endfor %}
+        {% if tabset.tab_attrs %}
+          {% for key, value in tabset.tab_attrs %}
+            {{ key }}="{{ value }}"
+          {% endfor %}
+        {% endif %}
       >
         {{ tabset.tab | safe }}
       </button>
@@ -58,14 +59,16 @@
     {% if tabset.panel %}
       <div
         role="tabpanel"
-        id="{{ tabset.id }}-panel-{{ loop.index }}"
-        aria-labelledby="{{ tabset.id }}-tab-{{ loop.index }}"
+        id="{{ id }}-panel-{{ loop.index }}"
+        aria-labelledby="{{ id }}-tab-{{ loop.index }}"
         tabindex="-1"
         aria-selected="{{ 'true' if loop.index == default_tab_index else 'false' }}"
         {% if loop.index != default_tab_index %}hidden{% endif %}
-        {% for key, value in tabset.panel_attrs %}
-          {{ key }}="{{ value }}"
-        {% endfor %}
+        {% if tabset.panel_attrs %}
+          {% for key, value in tabset.panel_attrs %}
+            {{ key }}="{{ value }}"
+          {% endfor %}
+        {% endif %}
       >
         {{ tabset.panel | safe }}
       </div>

src/nunjucks/toast.njk

@@ -4,22 +4,21 @@
 
   @param id {string} [optional] [default="toaster"] - Unique identifier for the toaster container.
   @param toasts {array} [optional] - An array of toast objects to render initially. See the <code>toast()</code> macro for more details.
-  @param main_attrs {object} [optional] - Additional HTML attributes for the main toaster container div.
-  @param is_fragment {boolean} [optional] [default=false] - If true, renders only the toast elements with hx-swap-oob="beforeend", suitable for htmx responses. Skips script and template inclusion.
+  @param attrs {object} [optional] - Additional HTML attributes for the main toaster container div.
+  
+  Supports caller() for custom toast markup.
 #}
 {% macro toaster(
   id="toaster",
   toasts=[],
-  main_attrs=None,
-  is_fragment=false
+  attrs={}
 ) %}
 <div
   id="{{ id }}"
-  class="toaster"
-  {% for key, value in main_attrs %}
-    {{ key }}="{{ value }}"
+  class="toaster {{ attrs.class }}"
+  {% for key, value in attrs %}
+    {% if key != 'class' %}{{ key }}="{{ value }}"{% endif %}
   {% endfor %}
-  {% if is_fragment %}hx-swap-oob="beforeend"{% endif %}
 >
 {% for item in toasts %}
   {{ toast(
@@ -27,83 +26,12 @@
     title=item.title,
     description=item.description,
     action=item.action,
-    cancel=item.cancel
+    cancel=item.cancel,
+    attrs=item.attrs
   ) }}
 {% endfor %}
+{{ caller() if caller }}
 </div>
-
-{% if not is_fragment %}
-<template id="toast-template">
-  <div
-    class="toast"
-    role="status"
-    aria-atomic="true"
-    x-bind="$toastBindings"
-  >
-    <div class="toast-content">
-      <div class="flex items-center justify-between gap-x-3 p-4 [&>svg]:size-4 [&>svg]:shrink-0 [&>[role=img]]:size-4 [&>[role=img]]:shrink-0 [&>[role=img]>svg]:size-4">
-        <template x-if="config.icon">
-          <span aria-hidden="true" role="img" x-html="config.icon"></span>
-        </template>
-        <template x-if="!config.icon && config.category === 'success'">
-          {{ toast_icons.success | safe }}
-        </template>
-        <template x-if="!config.icon && config.category === 'error'">
-          {{ toast_icons.error | safe }}
-        </template>
-        <template x-if="!config.icon && config.category === 'info'">
-          {{ toast_icons.info | safe }}
-        </template>
-        <template x-if="!config.icon && config.category === 'warning'">
-          {{ toast_icons.warning | safe }}
-        </template>
-        <section class="flex-1 flex flex-col gap-0.5 items-start">
-          <template x-if="config.title">
-            <h2 class="font-medium" x-text="config.title"></h2>
-          </template>
-          <template x-if="config.description">
-            <p class="text-muted-foreground" x-text="config.description"></p>
-          </template>
-        </section>
-        <template x-if="config.action || config.cancel">
-          <footer class="flex flex-col gap-1 self-start">
-            <template x-if="config.action?.click">
-              <button
-                type="button"
-                class="btn h-6 text-xs px-2.5 rounded-sm"
-                @click="executeAction(config.action.click)"
-                x-text="config.action.label"
-              ></button>
-            </template>
-            <template x-if="config.action?.url">
-              <a
-                :href="config.action.url"
-                class="btn h-6 text-xs px-2.5 rounded-sm"
-                x-text="config.action.label"
-              ></a>
-            </template>
-            <template x-if="config.cancel?.click">
-              <button
-                type="button"
-                class="btn-outline h-6 text-xs px-2.5 rounded-sm"
-                @click="executeAction(config.cancel.click)"
-                x-text="config.cancel.label"
-              ></button>
-            </template>
-            <template x-if="config.cancel?.url">
-              <a
-                :href="config.cancel.url"
-                class="btn-outline h-6 text-xs px-2.5 rounded-sm"
-                x-text="config.cancel.label"
-              ></a>
-            </template>
-          </footer>
-        </template>
-      </div>
-    </div>
-  </div>
-</template>
-{% endif %}
 {% endmacro %}
 
 {#
@@ -114,85 +42,76 @@
   @param description {string} [optional] - The secondary description text.
   @param action {object} [optional] - Defines an action button.
     - label {string}: Button text.
-    - click {string}: JavaScript code to execute on click (e.g., '$dispatch(\'custom-event\')').
+    - onclick {string}: JavaScript code to execute on click.
     - url {string}: URL for an anchor link button.
   @param cancel {object} [optional] - Defines a cancel/dismiss button (similar structure to action).
     - label {string}: Button text.
-    - click {string}: JavaScript code to execute on click (e.g., '$dispatch(\'custom-event\')').
+    - onclick {string}: JavaScript code to execute on click.
     - url {string}: URL for an anchor link button.
+  @param attrs {object} [optional] - Additional HTML attributes for the toast div.
 #}
 {% macro toast(
   category="success",
   title="",
   description="",
   action=None,
-  cancel=None
+  cancel=None,
+  attrs={}
 ) %}
 <div
-  class="toast"
+  class="toast {{ attrs.class }}"
   role="{{ 'alert' if category == 'error' else 'status' }}"
   aria-atomic="true"
   aria-hidden="false"
   {% if category %}data-category="{{ category }}"{% endif %}
-  x-data="toast({
-    category: '{{ category }}',
-    duration: {{ duration or 'null' }}
-  })"
-  x-bind="$toastBindings"
+  {% for key, value in attrs %}
+    {% if key != 'class' %}{{ key }}="{{ value }}"{% endif %}
+  {% endfor %}
 >
   <div class="toast-content">
-    <div class="flex items-center justify-between gap-x-3 p-4 [&>svg]:size-4 [&>svg]:shrink-0 [&>[role=img]]:size-4 [&>[role=img]]:shrink-0 [&>[role=img]>svg]:size-4">
-      {% if category in ["error", "success", "info", "warning"] %}
-        {{ toast_icons[category] | safe }}
+    {% if category in ["error", "success", "info", "warning"] %}
+      {% if category == "success" %}
+        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/></svg>
+      {% elif category == "error" %}
+        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="m15 9-6 6"/><path d="m9 9 6 6"/></svg>
+      {% elif category == "info" %}
+        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>
+      {% elif category == "warning" %}
+        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"/><path d="M12 9v4"/><path d="M12 17h.01"/></svg>
       {% endif %}
-      <section class="flex-1 flex flex-col gap-0.5 items-start">
-        {% if title %}
-          <h2 class="font-medium">{{ title }}</h2>
-        {% endif %}
-        {% if description %}
-          <p class="text-muted-foreground">{{ description }}</p>
-        {% endif %}
-      </section>
-      {% if action or cancel %}
-        <footer class="flex flex-col gap-1 self-start">
-          {% if action %}
-            {% if action.click %}
-              <button
-                type="button"
-                class="btn h-6 text-xs px-2.5 rounded-sm"
-                @click="{{ action.click }}"
-              >{{ action.label }}</button>
-            {% elif action.url %}
-              <a
-                href="{{ action.url }}"
-                class="btn h-6 text-xs px-2.5 rounded-sm"
-              >{{ action.label }}</a>
-            {% endif %}
+    {% endif %}
+    <section>
+      {% if title %}<h2>{{ title }}</h2>{% endif %}
+      {% if description %}<p>{{ description }}</p>{% endif %}
+    </section>
+    {% if action or cancel %}
+      <footer>
+        {% if action %}
+          {% if action.href %}
+            <a
+              href="{{ action.href }}"
+              class="btn-sm"
+              data-toast-action
+            >{{ action.label }}</a>
+          {% else %}
+            <button
+              type="button"
+              class="btn"
+              data-toast-action
+              {% if action.onclick %}onclick="{{ action.onclick }}"{% endif %}
+            >{{ action.label }}</button>
           {% endif %}
-          {% if cancel %}
-            {% if cancel.click %}
-              <button
-                type="button"
-                class="btn-outline h-6 text-xs px-2.5 rounded-sm"
-                @click="{{ cancel.click }}"
-              >{{ cancel.label }}</button>
-            {% elif cancel.url %}
-              <a
-                href="{{ cancel.url }}"
-                class="btn-outline h-6 text-xs px-2.5 rounded-sm"
-              >{{ toast.cancel.label }}</a>
-            {% endif %}
-          {% endif %}
-        </footer>
-      {% endif %}
-    </div>
+        {% endif %}
+        {% if cancel %}
+          <button
+            type="button"
+            class="btn-sm-outline"
+            data-toast-cancel
+            {% if cancel.onclick %}onclick="{{ cancel.onclick }}"{% endif %}
+          >{{ cancel.label }}</button>
+        {% endif %}
+      </footer>
+    {% endif %}
   </div>
 </div>
-{% endmacro %}
-
-{% set toast_icons = {
-  'success': '<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle-check-icon lucide-circle-check"><circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/></svg>',
-  'error': '<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle-x-icon lucide-circle-x"><circle cx="12" cy="12" r="10"/><path d="m15 9-6 6"/><path d="m9 9 6 6"/></svg>',
-  'info': '<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-info-icon lucide-info"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>',
-  'warning': '<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-triangle-alert-icon lucide-triangle-alert"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"/><path d="M12 9v4"/><path d="M12 17h.01"/></svg>'
-} %}
+{% endmacro %}

wrangler.jsonc

@@ -0,0 +1,7 @@
+{
+  "name": "basecoat-docs",
+  "compatibility_date": "2025-06-15",
+  "assets": {
+    "directory": "./_site"
+  }
+}