Prepare 1.0.2 release

fix: change tooltip bg color to bg-foreground

.eleventy.js

@@ -1,46 +0,0 @@
-import eleventyLucideicons from "@grimlink/eleventy-plugin-lucide-icons";
-import prettier from "prettier";
-import Nunjucks from "nunjucks";
-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.addPlugin(eleventyLucideicons);
-  eleventyConfig.addShortcode("fetchCode", function(filePath) {
-    const absolutePath = path.resolve(process.cwd(), filePath);
-    try {
-      return fs.readFileSync(absolutePath, 'utf8');
-    } catch (error) {
-      console.error(`[Eleventy FetchCode Error] Failed to read: ${absolutePath}`, error);
-      return `<!-- Error fetching code for ${filePath} -->`;
-    }
-  });
-
-  eleventyConfig.addNunjucksAsyncFilter("prettyHtml", async (code, callback) => {
-    try {
-      const formattedCode = await prettier.format(code, {
-        parser: "html",
-        printWidth: 1000,
-        singleAttributePerLine: false,
-        bracketSameLine: true,
-        htmlWhitespaceSensitivity: "ignore"
-      });
-      callback(null, formattedCode);
-    } catch (err) {
-      console.error("Error formatting HTML with Prettier:", err);
-      callback(err, code);
-    }
-  });
-  let nunjucksEnvironment = new Nunjucks.Environment(
-    new Nunjucks.FileSystemLoader([
-      "src/nunjucks",
-      "docs/src/_includes"
-    ]),
-    { autoescape: true }
-  );
-  eleventyConfig.setLibrary("njk", nunjucksEnvironment); 
-}

.gitattributes

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

.github/FUNDING.yml

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

.github/workflows/discord-release.yml

@@ -0,0 +1,72 @@
+name: Announce release on Discord
+
+on:
+  release:
+    types: [published]
+  workflow_dispatch:
+    inputs:
+      tag:
+        description: Release tag to announce
+        required: true
+        type: string
+
+permissions:
+  contents: read
+
+jobs:
+  announce:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Send Discord announcement
+        env:
+          DISCORD_WEBHOOK_URL: ${{ secrets.DISCORD_WEBHOOK_URL }}
+          RELEASE_TAG_INPUT: ${{ inputs.tag }}
+          REPO: ${{ github.repository }}
+          GH_TOKEN: ${{ github.token }}
+        run: |
+          test -n "$DISCORD_WEBHOOK_URL"
+
+          if [ "$GITHUB_EVENT_NAME" = "workflow_dispatch" ]; then
+            test -n "$RELEASE_TAG_INPUT"
+            curl --fail-with-body \
+              -H "Accept: application/vnd.github+json" \
+              -H "Authorization: Bearer $GH_TOKEN" \
+              -H "X-GitHub-Api-Version: 2022-11-28" \
+              "$GITHUB_API_URL/repos/$REPO/releases/tags/$RELEASE_TAG_INPUT" \
+              > release.json
+          else
+            jq '.release' "$GITHUB_EVENT_PATH" > release.json
+          fi
+
+          if [ "$(jq -r '.prerelease' release.json)" = "true" ]; then
+            echo "Skipping prerelease."
+            exit 0
+          fi
+
+          jq -n \
+            --arg repo "$REPO" \
+            --arg name "$(jq -r '.name // ""' release.json)" \
+            --arg tag "$(jq -r '.tag_name' release.json)" \
+            --arg url "$(jq -r '.html_url' release.json)" \
+            --arg body "$(jq -r '.body // ""' release.json)" \
+            '($body | if length > 1500 then .[:1500] + "...\n\n[Read more](" + $url + ")" else . end) as $description |
+            {
+              username: "Basecoat Releases",
+              allowed_mentions: { parse: [] },
+              embeds: [{
+                title: ($repo + " " + $tag),
+                url: $url,
+                description: ((if $name != "" then "**" + $name + "**\n\n" else "" end) + $description),
+                color: 5793266
+              }]
+            }' > payload.json
+
+          curl --fail-with-body \
+            --retry 3 \
+            --retry-all-errors \
+            --retry-delay 2 \
+            -H "Content-Type: application/json" \
+            -X POST \
+            -d @payload.json \
+            "$DISCORD_WEBHOOK_URL"

.gitignore

@@ -1,12 +1,18 @@
 .*
 !.gitignore
 !.gitattributes
-!.eleventy.js
-
+!.github/
+!.github/workflows/
+!.github/workflows/*.yml
+!.github/workflows/*.yaml
 _site/
+
 node_modules/
-packages/cli/dist/
-packages/css/dist/
 
 # Logs
-npm-debug.log*
+npm-debug.log*
+dist/
+templates/
+site/dist/
+site/public/assets/js/
+site/public/fragments/

AGENTS.md

@@ -1,87 +1,99 @@
-# Basecoat – Agent Guide
+# Agent Rules
 
-## What is Basecoat?
+## Communication
+- Keep answers concise, technical, and to the point.
+- Do not use filler or glazing openers.
+- Keep explanations MECE: separate facts, decisions, risks, and open questions.
+- If scope is partial, state exactly what was not included.
+- Challenge incorrect assumptions with evidence from code, docs, or upstream sources.
 
-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.
+## Project Intent
+- Basecoat is a Tailwind CSS, vanilla HTML, CSS, and JavaScript implementation of shadcn/ui's visual language for non-React stacks.
+- Basecoat maps upstream shadcn/ui concepts onto simpler semantic markup; it is not a React, Radix, Base UI, `cn-*`, or `data-slot` DOM port.
+- Prefer the browser platform: native elements, semantic HTML, CSS state selectors, and small vanilla JS only when needed.
 
-## Quickstart
+## Source Boundaries
+- Do not hand-edit build outputs:
+  - `dist/**`
+  - `templates/**`
+  - `site/dist/**`
+  - `site/public/assets/js/**`
+  - `site/public/fragments/**`
+- Generated source entrypoints such as `src/css/basecoat-vega.css` are committed, but must be regenerated through `scripts/generate-css-entrypoints.js` or build scripts, not manually maintained.
 
-- Install deps: `npm i`
-- Dev docs server: `npm run docs:dev`
-- Build CSS/JS: `npm run build`
-- Build static docs: `npm run docs:build`
+## Public API and Markup
+- Keep public component APIs small: usually one root class, semantic child elements, documented ARIA/data attributes only when needed, and minimal JS for behavior.
+- Avoid required child classes when meaningful markup can identify children: `input`, `textarea`, `select`, `button`, `a`, `label`, `fieldset`, `legend`, `header`, `section`, `footer`, `svg`, `kbd`, `hr`.
+- Add new child classes, wrappers, `data-*` attributes, macro arguments, or public selectors only as intentional API.
+- Do not add roles for styling; ARIA must describe behavior or accessibility state.
+- Prefer intentional divergence over awkward imitation when upstream markup does not map cleanly to Basecoat.
 
-## What to edit (and what not)
+## Accessibility
+- Start with the native element that matches the control.
+- Use `<fieldset>` and `<legend>` for grouped form controls when appropriate.
+- Use native `<dialog>` where possible.
+- Keep composite-widget keyboard behavior predictable: skip disabled items, respect orientation, and handle Escape/Enter/Space according to role.
+- Disabled custom items must be skipped by pointer and keyboard interactions.
+- Use logical CSS utilities/properties for RTL; flip only icons whose meaning is directional.
 
-- 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
+## CSS
+- Component CSS in `src/css/components/*.css` owns structure, layout primitives, accessibility selectors, and behavior hooks.
+- Style-pack CSS in `src/css/styles/*.css` owns visual choices: color, radius, shadow/ring, typography, spacing, variants, and state visuals.
+- Each style bundle must stand alone. Do not load Vega/default and then undo it in another style.
+- Avoid defensive resets that only compensate for another style pack.
+- Prefer Tailwind logical utilities (`ps`, `pe`, `ms`, `me`, `start`, `end`, `rounded-s`, `rounded-e`) over physical left/right utilities.
+- Prefer `border` for lines and separators.
+- Avoid `!important`; if unavoidable, keep the selector narrow and document why.
 
-## Project layout
+## JavaScript
+- JavaScript is behavior only; do not use JS to paper over CSS architecture issues.
+- Register JS components with `window.basecoat.register()` and make initialization idempotent with `data-*-initialized` flags.
+- Component init functions must return before attaching listeners or mutating DOM when the root already has its initialized flag.
+- Keep generated DOM minimal and aligned with documented HTML.
+- Prefer native browser APIs and events.
+- Keep scroll management scoped to component containers. Do not use `scrollIntoView()` when it can scroll the page unexpectedly.
+- Emit custom events only for meaningful integration points.
 
-- 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/`.
+## Upstream Migration
+- Always check the upstream shadcn/ui repo before changing a migrated component: `https://github.com/shadcn-ui/ui`.
+- Use a local copy of the upstream repo for migration work.
+- Review these upstream repo paths:
+  - components: `apps/v4/registry/bases/base/ui/`
+  - docs: `apps/v4/content/docs/components/`
+  - examples: `apps/v4/registry/bases/base/examples/`
+  - styles: `apps/v4/registry/styles/style-{vega,nova,maia,lyra,mira,luma,sera,rhea}.css`
+- Review Basecoat files in the same pass:
+  - component CSS: `src/css/components/<component>.css`
+  - style packs: `src/css/styles/{vega,nova,maia,lyra,mira,luma,sera,rhea}.css`
+  - JS: `src/js/<component>.js` when behavior changes
+  - templates: `src/templates/nunjucks/*.njk` and `src/templates/jinja/*.html.jinja` when markup changes
+  - docs: `site/src/docs/components/<component>.mdx`
+- Map upstream concepts, not implementation details. Do not port `cn-*` selectors directly.
+- Classify differences as `drift fixed`, `intentional`, or `deferred`.
 
-## Conventions
+## Docs
+- Docs are Basecoat API docs, not React docs.
+- Update docs when supported markup, variants, states, JS behavior, templates, or macros change.
+- Prefer concrete HTML examples over abstract composition trees.
+- Do not include React-only APIs such as `asChild`.
+- Do not add "Composition" sections unless they describe stable Basecoat markup.
+- Do not add API Reference sections for native/CSS-only components unless there is a real Basecoat API.
+- Structure component docs as: title and preview, `## Usage`, optional `### HTML structure` for stable markup requirements, optional `### JavaScript API` for components with Basecoat JS methods/events/options, then `## Examples`.
+- Keep `Usage` focused on the minimal working snippet and important Basecoat/upstream differences; put variants, states, RTL, and richer patterns under `Examples`.
+- Keep snippets minimal and aligned with current behavior.
+- In HTML snippets, keep text-only elements on one line, such as `<p>Text</p>`; use multiline formatting when the element contains child elements or when line length would hurt readability.
+- In HTML examples, keep icons as single-line `<svg ...>...</svg>` elements, keep simple text-only or inline-formatting elements on one line, and avoid blank separator lines between adjacent markup parts.
+- Document intentional differences from upstream near the relevant example.
 
-- 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.
+## Validation
+- Run `npm run build` after source/package changes.
+- Run `npm run docs:build` after docs or docs asset changes.
+- Manually verify changed components in docs across light/dark mode, style packs, variants, RTL when supported, and relevant interaction states.
 
-## 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)
-
-## 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.
-
-## Package references
-
-- `packages/css` usage and details: see `packages/css/README.md`.
-- `packages/cli` usage and details: see `packages/cli/README.md`.
+## Change Management
+- Ask before removing intentional functionality or public API.
+- Preserve backward compatibility when the repo already depends on it, especially package exports and default `basecoat.css` behavior.
+- Keep generated outputs and docs consistent with source changes.
+- Remove stale comments/docs during refactors.
+- Keep commits focused and imperative.
+- Keep release-visible changes in `CHANGELOG.md` under `## [Unreleased]`; put backlog or incomplete work in `TODO.md` or the migration tracker.

CHANGELOG.md

@@ -0,0 +1,185 @@
+# Changelog
+
+## Unreleased
+
+## [1.0.2] - 2026-07-06
+
+### Added
+
+- Added `data-size="sm"` support to Alert Dialog for the compact upstream size.
+
+### Changed
+
+- Removed global font smoothing from Basecoat's package CSS so `antialiased` remains an application-level choice.
+
+## [1.0.1] - 2026-06-28
+
+### Added
+
+- Added explicit `force: true` support to `window.basecoat.init()` and `window.basecoat.initAll()` for rehydrating restored DOM after framework or navigation cache restores.
+
+### Fixed
+
+- Reinitialized Basecoat components after HTMX history restores in the docs site.
+
+## [1.0.0] - 2026-06-27
+
+### Breaking Changes
+
+- Removed the CLI workspace from the repo. Template files now ship with `basecoat-css` under `templates/nunjucks` and `templates/jinja`; copy them from `node_modules/basecoat-css/templates/*` instead of installing `basecoat-cli`.
+
+### Added
+
+- Added Nunjucks and Jinja template files to the `basecoat-css` package.
+- Added a custom docs 404 page for Cloudflare static asset fallback.
+
+### Changed
+
+- Narrowed dark-mode generated selectors to `html.dark` to reduce broad style recalculation work.
+- Switched the docs site to Astro's sitemap integration and updated `robots.txt` to point at the generated sitemap index.
+
+### Fixed
+
+- Updated Scroll Area examples to use Card surfaces so framed examples inherit style-pack radius and border treatment.
+
+## [1.0.0-beta.7] - 2026-06-25
+
+### Added
+
+- Added a beta Drawer component with native `<dialog>` markup, side placement, animated close behavior, backdrop and Escape handling, style-pack visuals, JavaScript entrypoints, and docs.
+
+### Changed
+
+- Updated the docs dependency to `reallysimpledocs@^1.0.2`.
+- Marked Chart and Drawer as beta components in the docs navigation.
+- Promoted the Chart docs warning from alpha to beta.
+- Updated installation CDN examples for `basecoat-css@1.0.0-beta.7`.
+
+### Fixed
+
+- Aligned Drawer examples more closely with upstream shadcn/ui while avoiding Chart API coupling in Drawer docs.
+
+## [1.0.0-beta.6] - 2026-06-23
+
+### Changed
+
+- Updated docs dependency to the published `reallysimpledocs@1.0.0-beta.5` package.
+- Refined component documentation examples across the docs site, including Select, Table, Tabs, Switch, and Theme Switcher.
+- Clarified CDN and npm installation guidance for default and named style bundles.
+- Updated Table examples to avoid inline overlay menus inside scrollable table containers and documented the overflow limitation.
+
+### Fixed
+
+- Fixed dark-mode unchecked Switch thumb colors across all style packs to match upstream shadcn/ui behavior.
+
+## [1.0.0-beta.5] - 2026-06-22
+
+### Added
+
+- Added a dedicated Accordion component with native `<details>` markup, single-item JavaScript behavior, `data-multiple`, disabled item handling, style-pack spacing, and docs.
+- Added a dedicated Breadcrumb component with semantic `nav`/`ol` markup, style-pack visuals, collapsed and dropdown examples, and docs.
+- Added documented Card action support with `.card-action`.
+- Added Combobox clear button, popup trigger, and input-group support, with docs aligned to upstream examples.
+
+### Fixed
+
+- Fixed Combobox single selection reopening immediately after selection and filtering the reopened list to the selected value.
+- Improved Combobox multiple chips and remove buttons to match style-pack button sizing more closely.
+
+## [1.0.0-beta.4] - 2026-06-20
+
+### Changed
+
+- Renamed the compact scrollbar utility from `scrollbar-thin` to `scrollbar-sm`; `scrollbar-thin` remains available through the compatibility stylesheet.
+
+## [1.0.0-beta.3] - 2026-06-20
+
+### Breaking Changes
+
+- Changed Button, Badge, Card, Avatar, and Alert visual APIs to use a canonical root class plus data attributes instead of composed visual classes. For example, use `class="btn" data-variant="outline"`, `class="badge" data-variant="secondary"`, `class="card" data-size="sm"`, `class="avatar" data-size="lg"`, and `class="alert" data-variant="destructive"`. Legacy aliases are available only through the optional compatibility stylesheet.
+- Changed icon-only Button sizing from `data-icon="only"` plus optional `data-size` to upstream-aligned `data-size="icon|icon-xs|icon-sm|icon-lg"`.
+
+### Added
+
+- Added an opt-in `basecoat-css/compat` stylesheet for pre-1.0 default Basecoat class aliases.
+- Added an optional Chart.js helper with `window.basecoat.chart()`, chart CSS, generated tooltips, generated legends, and docs.
+- Added shared Alert action layout support for direct child `<footer>` action regions.
+- Added dedicated Avatar and Avatar Group component styles and docs.
+- Added dedicated Progress component styles and docs with label, controlled, and RTL examples.
+
+## [1.0.0-beta.2] - 2026-06-14
+
+### Breaking Changes
+
+- Removed the `.form` convenience selector for Basecoat 1.0. Use explicit component classes (`label`, `input`, `textarea`, `select`) or compose fields with `.field` / `.fieldset`.
+- Changed Combobox markup and behavior to an input-first structure. The visible input now filters options, the hidden input stores the submitted value, single select stores the selected value, and multiple select stores a JSON array.
+- Removed Combobox `data-multiple`; use `aria-multiselectable="true"` on the Combobox listbox, matching Select.
+- Changed Command markup to the migrated Basecoat structure: `.command-dialog` wraps `.command`, the search input lives in the command header, and items use role-based menu markup with `role="menuitem"`.
+- Removed Combobox-specific search-header behavior from Select. Use the dedicated Combobox component for editable/filterable selection.
+- Removed built-in document command events for Toast, Sidebar, and Theme. Use element methods instead: `toaster.toast(config)`, `sidebar.open()`, `sidebar.close()`, `sidebar.toggle()`, and `window.basecoat.theme.*`.
+- Reworked style loading for style packs. Non-default styles are standalone bundles and should not be loaded on top of the default/Vega bundle.
+
+### Added
+
+- Added standalone style packs: Vega, Nova, Maia, Lyra, Mira, Luma, Sera, and Rhea.
+- Added dedicated Empty component styles and docs.
+- Added dedicated Item component styles and docs.
+- Added dedicated Input Group component styles and docs.
+- Added dedicated Spinner docs and examples using `animate-spin` and `size-4` patterns.
+- Added style-specific package entrypoints such as `basecoat-css/nova` and styleless base entrypoints for custom themes.
+- Added `window.basecoat.refresh(element)` as a generic dispatcher for components that expose `refresh()`.
+- Added `refresh()` methods to Command, Select, Combobox, Dropdown Menu, and Tabs for dynamic child lists.
+- Added method APIs for Sidebar, Toast, and Theme.
+- Added `data-format="object"` to Select and Combobox for opt-in hidden input serialization as `{ value, label }` objects.
+- Added `selected` details to Select and Combobox change events and JavaScript properties.
+- Added `data-filter="manual"` to Command and Combobox for app-owned remote or local-search result filtering.
+
+### Changed
+
+- Changed `window.basecoat.init(name)` and `window.basecoat.initAll()` to initialize uninitialized components only, instead of forcing global reinitialization.
+- Added internal destroy hooks for JavaScript components so removed component roots clean up event listeners and runtime state.
+- Reworked component CSS so shared component files own structure and behavior hooks while style-pack files own visual treatment.
+- Updated Button, Button Group, Input, Textarea, Select, Combobox, Command, Dialog, Dropdown Menu, Popover, Field, Tabs, Table, Card, Alert, Badge, Kbd, Label, Skeleton, Radio, Switch, Empty, Item, and Input Group toward current shadcn/ui styles.
+- Split Native Select documentation from custom Select documentation.
+- Updated docs to use Basecoat-specific HTML usage instead of React/shadcn composition APIs.
+- Updated docs site styling, navigation, fonts, and style switcher for the 1.0 style system.
+- Migrated the docs build to ReallySimpleDocs/Astro while keeping Basecoat's Nunjucks source examples as a pre-render step.
+- Changed docs build scripts so local Basecoat package assets are generated before ReallySimpleDocs resolves `basecoat-css`.
+
+### Removed
+
+- Removed the old Form component page. Form layout should now be composed with Field, Fieldset, Input, Textarea, Select, Native Select, Checkbox, Radio, and Switch.
+
+### Fixed
+
+- Fixed destructive Alert descriptions/content using muted text instead of destructive text across all style packs.
+
+### Migration Notes
+
+To keep the previous `.form` wrapper behavior, define it in your own Tailwind CSS:
+
+```css
+.form label { @apply label; }
+.form input { @apply input; }
+.form textarea { @apply textarea; }
+.form select { @apply select; }
+```
+
+To keep the previous document-event command APIs, add bridge listeners in your app:
+
+```js
+document.addEventListener('basecoat:toast', (event) => {
+  document.getElementById('toaster')?.toast(event.detail?.config || {});
+});
+
+document.addEventListener('basecoat:sidebar', (event) => {
+  const sidebar = document.getElementById(event.detail?.id || 'sidebar');
+  const action = event.detail?.action || 'toggle';
+  if (['open', 'close', 'toggle'].includes(action)) sidebar?.[action]();
+});
+
+document.addEventListener('basecoat:theme', (event) => {
+  const mode = event.detail?.mode;
+  mode ? window.basecoat.theme.set(mode) : window.basecoat.theme.toggle();
+});
+```

CONTRIBUTING.md

@@ -3,7 +3,7 @@
 - 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.
+  - `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.
   - `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.
@@ -12,4 +12,20 @@
 - Test locally before submitting.
 - Follow existing code style.
 
-Thanks for helping!
+## Cloudflare Workers deploys
+
+Docs are built with ReallySimpleDocs/Astro and deployed as Workers Static Assets from `site/dist`.
+
+- Local preview: `npm run workers:dev`
+- Production deploy: `npm run workers:deploy`
+- Preview version upload: `npm run workers:preview`
+
+Workers Builds settings:
+
+- Build command: `npm run docs:build`
+- Deploy command: `npx wrangler deploy`
+- Non-production branch deploy command: `npx wrangler versions upload`
+- Production branch: `main`
+- Enable builds for non-production branches for branch preview URLs.
+
+Thanks for helping!

README.md

@@ -1,29 +1,118 @@
 # Basecoat
 
-A collection of modern UI components built with Tailwind CSS that works with any web stack. Basecoat brings the magic of [shadcn/ui](https://ui.shadcn.com) to traditional web applications, no React required.
+Basecoat is a Tailwind CSS, vanilla HTML/CSS/JavaScript implementation of the shadcn/ui design system. It provides shadcn-style components for any web stack without React, Radix, or framework runtime dependencies.
 
-![screenshot](docs/src/assets/images/screenshot.png)
+![screenshot](site/public/assets/images/screenshot.png)
 
 ## Features
 
-- **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.
-- **Dark mode ready**: respects your Tailwind config.
-- **Extendable**: tweak styles with Tailwind or CSS variables.
-- **Themable**: fully compatible with shadcn/ui themes.
-- **Readable**: no class soup, just clean markup.
-- **Free and open source**: MIT licensed.
+- Semantic HTML-first components.
+- Tailwind CSS v4 source files and generated CSS bundles.
+- Small vanilla JavaScript for components that need behavior.
+- Standalone style packs: Vega, Nova, Maia, Lyra, Mira, Luma, Sera, and Rhea.
+- Compatible with shadcn/ui themes.
+- Dark mode.
+- CDN, npm, and template usage paths.
+- Nunjucks and Jinja templates.
 
 ## Documentation
 
-Visit [basecoatui.com](https://basecoatui.com).
+- Website: [basecoatui.com](https://basecoatui.com)
+- Installation: [basecoatui.com/installation](https://basecoatui.com/installation)
+- Customization: [basecoatui.com/customization](https://basecoatui.com/customization)
 
-## Installation
+## Install
 
-Visit [basecoatui.com/installation](https://basecoatui.com/installation)
+```bash
+npm install basecoat-css
+```
+
+Use the default bundle:
+
+```css
+@import "tailwindcss";
+@import "basecoat-css";
+```
+
+Use a specific style bundle:
+
+```css
+@import "tailwindcss";
+@import "basecoat-css/nova";
+```
+
+Use the styleless base plus a custom style file:
+
+```css
+@import "tailwindcss";
+@import "basecoat-css/base";
+@import "./style-acme.css";
+```
+
+## Repository Layout
+
+```text
+.
+├── dist/                 Generated package output
+├── scripts/              Build and generation scripts
+├── site/                 ReallySimpleDocs/Astro documentation app
+│   ├── public/           Static site assets
+│   └── src/
+│       ├── components/   RSD component overrides
+│       ├── docs/         Documentation pages and examples
+│       ├── fragments/    Site-only rendered fragments
+│       ├── pages/        Astro routes outside the docs tree
+│       └── scripts/      Site scripts
+├── src/                  Package source
+│   ├── css/
+│   ├── js/
+│   └── templates/
+└── templates/            Generated package template output
+```
+
+## CSS Architecture
+
+Basecoat separates structure from style:
+
+- `src/css/base/base.css`: shared tokens and semantic utilities.
+- `src/css/components/*.css`: component layout, structure, accessibility selectors, and behavior hooks.
+- `src/css/styles/*.css`: style-pack visuals such as color, radius, shadow, typography, spacing, variants, and state styles.
+
+Generated source entrypoints are committed for transparency and package imports:
+
+- `src/css/basecoat.css`: default backward-compatible Vega bundle.
+- `src/css/basecoat-base.css`: base plus components, no style pack.
+- `src/css/basecoat-components.css`: component imports only.
+- `src/css/basecoat-<style>.css`: base plus one style pack.
+- `src/css/basecoat-<style>.cdn.css`: CDN-compatible wrapper.
+
+These entrypoints are generated by `scripts/generate-css-entrypoints.js` and by the build scripts.
+
+## JavaScript Lifecycle
+
+- `window.basecoat.init(name)` initializes uninitialized components for one registered component.
+- `window.basecoat.initAll()` initializes all uninitialized registered components.
+- `window.basecoat.init(name, { force: true })` and `window.basecoat.initAll({ force: true })` destroy and reinitialize matching components. Use this when a framework or navigation library restores previously initialized DOM from a cache. Force mode resets transient component state such as open menus, focus state, and active interactions.
+- `window.basecoat.refresh(element)` asks an initialized component to rescan dynamic children when it supports refresh.
+- Components use internal destroy hooks to clean up listeners when initialized roots are removed from the DOM.
+
+## Development
+
+```bash
+# Install dependencies.
+npm i
+npm --prefix site i
+
+# Run the ReallySimpleDocs/Astro site.
+npm run docs:dev
+
+# Build package assets.
+npm run build
+
+# Build the static docs site.
+npm run docs:build
+```
 
 ## License
 
-[MIT](/LICENSE.md)
+[MIT](LICENSE.md)

ROADMAP.md

@@ -0,0 +1,20 @@
+## Now
+
+- [ ] Add Drawer component
+- [ ] Make utility components (e.g., Item) into proper components (i.e., .item)
+- [ ] Split CSS into components
+
+## Next
+
+- [ ] Make Command load dynamic items (e.g. search results from remote endpoint)
+- [ ] Make Combobox load dynamic items (e.g. search results from remote endpoint)
+- [ ] Add Toggle component
+- [ ] Add Carousel component
+- [ ] Add Sheet component
+- [ ] Add Separator component
+- [ ] Adding Menubar component
+
+## Later
+
+- [ ] Add Calendar component (https://flatpickr.js.org/)
+- [ ] Finish Chart component (https://www.chartjs.org/)

docs/css/custom.css

@@ -1,92 +0,0 @@
-/* HTMX */
-.htmx-indicator {
-  @apply invisible opacity-0 transition-discrete transition-all;
-}
-.htmx-indicator:not(.htmx-request) {
-  @apply hidden;
-}
-.htmx-request,
-.htmx-request.htmx-indicator {
-  @apply visible opacity-100;
-}
-
-.content {
-  > h2 {
-    @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-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-md bg-muted/50 px-[0.3rem] py-[0.2rem] font-mono text-sm;
-    }
-    blockquote {
-      @apply border-l-4 border-border pl-4;
-    }
-    ol {
-      @apply list-decimal ml-6;
-    }
-    ul {
-      @apply list-disc ml-6;
-    }
-    ol,
-    ul {
-      li {
-        @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;
-    }
-    > p,
-    > blockquote,
-    > ul,
-    > ol,
-    > dl,
-    > table,
-    > pre,
-    > p {
-      @apply my-6;
-    }
-    > *:first-child {
-      @apply !mt-0;
-    }
-    > *:last-child {
-      @apply !mb-0;
-    }
-  }
-  .step {
-    counter-increment: 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

@@ -1,151 +0,0 @@
-/* 
-  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,144 +0,0 @@
-@import "tailwindcss";
-@import "../../src/css/basecoat.css";
-@import "./custom.css";
-@import "./highlight.css";
-
-@import "./themes/claude.css";
-@import "./themes/doom-64.css";
-@import "./themes/supabase.css";
-
-
-/* @theme inline {
-    --breakpoint-3xl: 1600px;
-    --breakpoint-4xl: 2000px;
-    --font-sans: var(--font-sans);
-    --font-mono: var(--font-mono);
-    --radius-sm: calc(var(--radius) - 4px);
-    --radius-md: calc(var(--radius) - 2px);
-    --radius-lg: var(--radius);
-    --radius-xl: calc(var(--radius) + 4px);
-    --color-background: var(--background);
-    --color-foreground: var(--foreground);
-    --color-card: var(--card);
-    --color-card-foreground: var(--card-foreground);
-    --color-popover: var(--popover);
-    --color-popover-foreground: var(--popover-foreground);
-    --color-primary: var(--primary);
-    --color-primary-foreground: var(--primary-foreground);
-    --color-secondary: var(--secondary);
-    --color-secondary-foreground: var(--secondary-foreground);
-    --color-muted: var(--muted);
-    --color-muted-foreground: var(--muted-foreground);
-    --color-accent: var(--accent);
-    --color-accent-foreground: var(--accent-foreground);
-    --color-destructive: var(--destructive);
-    --color-border: var(--border);
-    --color-input: var(--input);
-    --color-ring: var(--ring);
-    --color-chart-1: var(--chart-1);
-    --color-chart-2: var(--chart-2);
-    --color-chart-3: var(--chart-3);
-    --color-chart-4: var(--chart-4);
-    --color-chart-5: var(--chart-5);
-    --color-sidebar: var(--sidebar);
-    --color-sidebar-foreground: var(--sidebar-foreground);
-    --color-sidebar-primary: var(--sidebar-primary);
-    --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-    --color-sidebar-accent: var(--sidebar-accent);
-    --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-    --color-sidebar-border: var(--sidebar-border);
-    --color-sidebar-ring: var(--sidebar-ring);
-    --color-surface: var(--surface);
-    --color-surface-foreground: var(--surface-foreground);
-    --color-code: var(--code);
-    --color-code-foreground: var(--code-foreground);
-    --color-code-highlight: var(--code-highlight);
-    --color-code-number: var(--code-number);
-    --color-selection: var(--selection);
-    --color-selection-foreground: var(--selection-foreground);
-  }
-  
-  :root {
-    --radius: 0.625rem;
-    --background: oklch(1 0 0);
-    --foreground: oklch(0.145 0 0);
-    --card: oklch(1 0 0);
-    --card-foreground: oklch(0.145 0 0);
-    --popover: oklch(1 0 0);
-    --popover-foreground: oklch(0.145 0 0);
-    --primary: oklch(0.205 0 0);
-    --primary-foreground: oklch(0.985 0 0);
-    --secondary: oklch(0.97 0 0);
-    --secondary-foreground: oklch(0.205 0 0);
-    --muted: oklch(0.97 0 0);
-    --muted-foreground: oklch(0.556 0 0);
-    --accent: oklch(0.97 0 0);
-    --accent-foreground: oklch(0.205 0 0);
-    --destructive: oklch(0.577 0.245 27.325);
-    --border: oklch(0.922 0 0);
-    --input: oklch(0.922 0 0);
-    --ring: oklch(0.708 0 0);
-    --chart-1: var(--color-blue-300);
-    --chart-2: var(--color-blue-500);
-    --chart-3: var(--color-blue-600);
-    --chart-4: var(--color-blue-700);
-    --chart-5: var(--color-blue-800);
-    --sidebar: oklch(0.985 0 0);
-    --sidebar-foreground: oklch(0.145 0 0);
-    --sidebar-primary: oklch(0.205 0 0);
-    --sidebar-primary-foreground: oklch(0.985 0 0);
-    --sidebar-accent: oklch(0.97 0 0);
-    --sidebar-accent-foreground: oklch(0.205 0 0);
-    --sidebar-border: oklch(0.922 0 0);
-    --sidebar-ring: oklch(0.708 0 0);
-    --surface: oklch(0.98 0 0);
-    --surface-foreground: var(--foreground);
-    --code: var(--surface);
-    --code-foreground: var(--surface-foreground);
-    --code-highlight: oklch(0.96 0 0);
-    --code-number: oklch(0.56 0 0);
-    --selection: oklch(0.145 0 0);
-    --selection-foreground: oklch(1 0 0);
-  }
-  
-  .dark {
-    --background: oklch(0.145 0 0);
-    --foreground: oklch(0.985 0 0);
-    --card: oklch(0.205 0 0);
-    --card-foreground: oklch(0.985 0 0);
-    --popover: oklch(0.269 0 0);
-    --popover-foreground: oklch(0.985 0 0);
-    --primary: oklch(0.922 0 0);
-    --primary-foreground: oklch(0.205 0 0);
-    --secondary: oklch(0.269 0 0);
-    --secondary-foreground: oklch(0.985 0 0);
-    --muted: oklch(0.269 0 0);
-    --muted-foreground: oklch(0.708 0 0);
-    --accent: oklch(0.371 0 0);
-    --accent-foreground: oklch(0.985 0 0);
-    --destructive: oklch(0.704 0.191 22.216);
-    --border: oklch(1 0 0 / 10%);
-    --input: oklch(1 0 0 / 15%);
-    --ring: oklch(0.556 0 0);
-    --chart-1: var(--color-blue-300);
-    --chart-2: var(--color-blue-500);
-    --chart-3: var(--color-blue-600);
-    --chart-4: var(--color-blue-700);
-    --chart-5: var(--color-blue-800);
-    --sidebar: oklch(0.205 0 0);
-    --sidebar-foreground: oklch(0.985 0 0);
-    --sidebar-primary: oklch(0.488 0.243 264.376);
-    --sidebar-primary-foreground: oklch(0.985 0 0);
-    --sidebar-accent: oklch(0.269 0 0);
-    --sidebar-accent-foreground: oklch(0.985 0 0);
-    --sidebar-border: oklch(1 0 0 / 10%);
-    --sidebar-ring: oklch(0.439 0 0);
-    --surface: oklch(0.2 0 0);
-    --surface-foreground: oklch(0.708 0 0);
-    --code: var(--surface);
-    --code-foreground: var(--surface-foreground);
-    --code-highlight: oklch(0.27 0 0);
-    --code-number: oklch(0.72 0 0);
-    --selection: oklch(0.922 0 0);
-    --selection-foreground: oklch(0.205 0 0);
-  } */

docs/css/themes/claude.css

@@ -1,95 +0,0 @@
-.theme-claude {
-  &:root {
-    --background: oklch(0.98 0.01 95.10);
-    --foreground: oklch(0.34 0.03 95.72);
-    --card: oklch(0.98 0.01 95.10);
-    --card-foreground: oklch(0.19 0.00 106.59);
-    --popover: oklch(1.00 0 0);
-    --popover-foreground: oklch(0.27 0.02 98.94);
-    --primary: oklch(0.62 0.14 39.04);
-    --primary-foreground: oklch(1.00 0 0);
-    --secondary: oklch(0.92 0.01 92.99);
-    --secondary-foreground: oklch(0.43 0.02 98.60);
-    --muted: oklch(0.93 0.02 90.24);
-    --muted-foreground: oklch(0.61 0.01 97.42);
-    --accent: oklch(0.92 0.01 92.99);
-    --accent-foreground: oklch(0.27 0.02 98.94);
-    --destructive: oklch(0.19 0.00 106.59);
-    --destructive-foreground: oklch(1.00 0 0);
-    --border: oklch(0.88 0.01 97.36);
-    --input: oklch(0.76 0.02 98.35);
-    --ring: oklch(0.59 0.17 253.06);
-    --chart-1: oklch(0.56 0.13 43.00);
-    --chart-2: oklch(0.69 0.16 290.41);
-    --chart-3: oklch(0.88 0.03 93.13);
-    --chart-4: oklch(0.88 0.04 298.18);
-    --chart-5: oklch(0.56 0.13 42.06);
-    --sidebar: oklch(0.97 0.01 98.88);
-    --sidebar-foreground: oklch(0.36 0.01 106.65);
-    --sidebar-primary: oklch(0.62 0.14 39.04);
-    --sidebar-primary-foreground: oklch(0.99 0 0);
-    --sidebar-accent: oklch(0.92 0.01 92.99);
-    --sidebar-accent-foreground: oklch(0.33 0 0);
-    --sidebar-border: oklch(0.94 0 0);
-    --sidebar-ring: oklch(0.77 0 0);
-    --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
-    --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
-    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
-    --radius: 0.5rem;
-    --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
-    --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
-    --shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
-    --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
-    --shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 2px 4px -1px hsl(0 0% 0% / 0.10);
-    --shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 4px 6px -1px hsl(0 0% 0% / 0.10);
-    --shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 8px 10px -1px hsl(0 0% 0% / 0.10);
-    --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
-  }
-
-  &.dark {
-    --background: oklch(0.27 0.00 106.64);
-    --foreground: oklch(0.81 0.01 93.01);
-    --card: oklch(0.27 0.00 106.64);
-    --card-foreground: oklch(0.98 0.01 95.10);
-    --popover: oklch(0.31 0.00 106.60);
-    --popover-foreground: oklch(0.92 0.00 106.48);
-    --primary: oklch(0.67 0.13 38.76);
-    --primary-foreground: oklch(1.00 0 0);
-    --secondary: oklch(0.98 0.01 95.10);
-    --secondary-foreground: oklch(0.31 0.00 106.60);
-    --muted: oklch(0.22 0.00 106.71);
-    --muted-foreground: oklch(0.77 0.02 99.07);
-    --accent: oklch(0.21 0.01 95.42);
-    --accent-foreground: oklch(0.97 0.01 98.88);
-    --destructive: oklch(0.64 0.21 25.33);
-    --destructive-foreground: oklch(1.00 0 0);
-    --border: oklch(0.36 0.01 106.89);
-    --input: oklch(0.43 0.01 100.22);
-    --ring: oklch(0.59 0.17 253.06);
-    --chart-1: oklch(0.56 0.13 43.00);
-    --chart-2: oklch(0.69 0.16 290.41);
-    --chart-3: oklch(0.21 0.01 95.42);
-    --chart-4: oklch(0.31 0.05 289.32);
-    --chart-5: oklch(0.56 0.13 42.06);
-    --sidebar: oklch(0.24 0.00 67.71);
-    --sidebar-foreground: oklch(0.81 0.01 93.01);
-    --sidebar-primary: oklch(0.33 0 0);
-    --sidebar-primary-foreground: oklch(0.99 0 0);
-    --sidebar-accent: oklch(0.17 0.00 106.62);
-    --sidebar-accent-foreground: oklch(0.81 0.01 93.01);
-    --sidebar-border: oklch(0.94 0 0);
-    --sidebar-ring: oklch(0.77 0 0);
-    --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
-    --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
-    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
-    --radius: 0.5rem;
-    --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
-    --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
-    --shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
-    --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
-    --shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 2px 4px -1px hsl(0 0% 0% / 0.10);
-    --shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 4px 6px -1px hsl(0 0% 0% / 0.10);
-    --shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 8px 10px -1px hsl(0 0% 0% / 0.10);
-    --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
-  }
-}

docs/css/themes/doom-64.css

@@ -1,95 +0,0 @@
-.theme-doom-64 {
-  &:root {
-    --background: oklch(0.85 0 0);
-    --foreground: oklch(0.24 0 0);
-    --card: oklch(0.76 0 0);
-    --card-foreground: oklch(0.24 0 0);
-    --popover: oklch(0.76 0 0);
-    --popover-foreground: oklch(0.24 0 0);
-    --primary: oklch(0.50 0.19 27.48);
-    --primary-foreground: oklch(1.00 0 0);
-    --secondary: oklch(0.50 0.09 126.19);
-    --secondary-foreground: oklch(1.00 0 0);
-    --muted: oklch(0.78 0 0);
-    --muted-foreground: oklch(0.41 0 0);
-    --accent: oklch(0.59 0.10 245.74);
-    --accent-foreground: oklch(1.00 0 0);
-    --destructive: oklch(0.71 0.20 46.46);
-    --destructive-foreground: oklch(0 0 0);
-    --border: oklch(0.43 0 0);
-    --input: oklch(0.43 0 0);
-    --ring: oklch(0.50 0.19 27.48);
-    --chart-1: oklch(0.50 0.19 27.48);
-    --chart-2: oklch(0.50 0.09 126.19);
-    --chart-3: oklch(0.59 0.10 245.74);
-    --chart-4: oklch(0.71 0.20 46.46);
-    --chart-5: oklch(0.57 0.04 40.43);
-    --sidebar: oklch(0.76 0 0);
-    --sidebar-foreground: oklch(0.24 0 0);
-    --sidebar-primary: oklch(0.50 0.19 27.48);
-    --sidebar-primary-foreground: oklch(1.00 0 0);
-    --sidebar-accent: oklch(0.59 0.10 245.74);
-    --sidebar-accent-foreground: oklch(1.00 0 0);
-    --sidebar-border: oklch(0.43 0 0);
-    --sidebar-ring: oklch(0.50 0.19 27.48);
-    --font-sans: "Oxanium", sans-serif;
-    --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
-    --font-mono: "Source Code Pro", monospace;
-    --radius: 0px;
-    --shadow-2xs: 0px 2px 4px 0px hsl(0 0% 0% / 0.20);
-    --shadow-xs: 0px 2px 4px 0px hsl(0 0% 0% / 0.20);
-    --shadow-sm: 0px 2px 4px 0px hsl(0 0% 0% / 0.40), 0px 1px 2px -1px hsl(0 0% 0% / 0.40);
-    --shadow: 0px 2px 4px 0px hsl(0 0% 0% / 0.40), 0px 1px 2px -1px hsl(0 0% 0% / 0.40);
-    --shadow-md: 0px 2px 4px 0px hsl(0 0% 0% / 0.40), 0px 2px 4px -1px hsl(0 0% 0% / 0.40);
-    --shadow-lg: 0px 2px 4px 0px hsl(0 0% 0% / 0.40), 0px 4px 6px -1px hsl(0 0% 0% / 0.40);
-    --shadow-xl: 0px 2px 4px 0px hsl(0 0% 0% / 0.40), 0px 8px 10px -1px hsl(0 0% 0% / 0.40);
-    --shadow-2xl: 0px 2px 4px 0px hsl(0 0% 0% / 1.00);
-  }
-
-  &.dark {
-    --background: oklch(0.22 0 0);
-    --foreground: oklch(0.91 0 0);
-    --card: oklch(0.29 0 0);
-    --card-foreground: oklch(0.91 0 0);
-    --popover: oklch(0.29 0 0);
-    --popover-foreground: oklch(0.91 0 0);
-    --primary: oklch(0.61 0.21 27.03);
-    --primary-foreground: oklch(1.00 0 0);
-    --secondary: oklch(0.64 0.15 133.01);
-    --secondary-foreground: oklch(0 0 0);
-    --muted: oklch(0.26 0 0);
-    --muted-foreground: oklch(0.71 0 0);
-    --accent: oklch(0.75 0.12 244.75);
-    --accent-foreground: oklch(0 0 0);
-    --destructive: oklch(0.78 0.17 68.09);
-    --destructive-foreground: oklch(0 0 0);
-    --border: oklch(0.41 0 0);
-    --input: oklch(0.41 0 0);
-    --ring: oklch(0.61 0.21 27.03);
-    --chart-1: oklch(0.61 0.21 27.03);
-    --chart-2: oklch(0.64 0.15 133.01);
-    --chart-3: oklch(0.75 0.12 244.75);
-    --chart-4: oklch(0.78 0.17 68.09);
-    --chart-5: oklch(0.65 0.03 40.80);
-    --sidebar: oklch(0.19 0 0);
-    --sidebar-foreground: oklch(0.91 0 0);
-    --sidebar-primary: oklch(0.61 0.21 27.03);
-    --sidebar-primary-foreground: oklch(1.00 0 0);
-    --sidebar-accent: oklch(0.75 0.12 244.75);
-    --sidebar-accent-foreground: oklch(0 0 0);
-    --sidebar-border: oklch(0.41 0 0);
-    --sidebar-ring: oklch(0.61 0.21 27.03);
-    --font-sans: "Oxanium", sans-serif;
-    --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
-    --font-mono: "Source Code Pro", monospace;
-    --radius: 0px;
-    --shadow-2xs: 0px 2px 5px 0px hsl(0 0% 0% / 0.30);
-    --shadow-xs: 0px 2px 5px 0px hsl(0 0% 0% / 0.30);
-    --shadow-sm: 0px 2px 5px 0px hsl(0 0% 0% / 0.60), 0px 1px 2px -1px hsl(0 0% 0% / 0.60);
-    --shadow: 0px 2px 5px 0px hsl(0 0% 0% / 0.60), 0px 1px 2px -1px hsl(0 0% 0% / 0.60);
-    --shadow-md: 0px 2px 5px 0px hsl(0 0% 0% / 0.60), 0px 2px 4px -1px hsl(0 0% 0% / 0.60);
-    --shadow-lg: 0px 2px 5px 0px hsl(0 0% 0% / 0.60), 0px 4px 6px -1px hsl(0 0% 0% / 0.60);
-    --shadow-xl: 0px 2px 5px 0px hsl(0 0% 0% / 0.60), 0px 8px 10px -1px hsl(0 0% 0% / 0.60);
-    --shadow-2xl: 0px 2px 5px 0px hsl(0 0% 0% / 1.50);
-  }
-}

docs/css/themes/supabase.css

@@ -1,100 +0,0 @@
-.theme-supabase {
-  &:root {
-    --background: oklch(0.99 0 0);
-    --foreground: oklch(0.20 0 0);
-    --card: oklch(0.99 0 0);
-    --card-foreground: oklch(0.20 0 0);
-    --popover: oklch(0.99 0 0);
-    --popover-foreground: oklch(0.44 0 0);
-    --primary: oklch(0.83 0.13 160.91);
-    --primary-foreground: oklch(0.26 0.01 166.46);
-    --secondary: oklch(0.99 0 0);
-    --secondary-foreground: oklch(0.20 0 0);
-    --muted: oklch(0.95 0 0);
-    --muted-foreground: oklch(0.24 0 0);
-    --accent: oklch(0.95 0 0);
-    --accent-foreground: oklch(0.24 0 0);
-    --destructive: oklch(0.55 0.19 32.73);
-    --destructive-foreground: oklch(0.99 0.00 17.21);
-    --border: oklch(0.90 0 0);
-    --input: oklch(0.90 0 0);
-    --ring: oklch(0.83 0.13 160.91);
-    --chart-1: oklch(0.83 0.13 160.91);
-    --chart-2: oklch(0.62 0.19 259.81);
-    --chart-3: oklch(0.61 0.22 292.72);
-    --chart-4: oklch(0.77 0.16 70.08);
-    --chart-5: oklch(0.70 0.15 162.48);
-    --sidebar: oklch(0.99 0 0);
-    --sidebar-foreground: oklch(0.55 0 0);
-    --sidebar-primary: oklch(0.83 0.13 160.91);
-    --sidebar-primary-foreground: oklch(0.26 0.01 166.46);
-    --sidebar-accent: oklch(0.95 0 0);
-    --sidebar-accent-foreground: oklch(0.24 0 0);
-    --sidebar-border: oklch(0.90 0 0);
-    --sidebar-ring: oklch(0.83 0.13 160.91);
-    --font-sans: Outfit, sans-serif;
-    --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
-    --font-mono: monospace;
-    --radius: 0.5rem;
-    --shadow-2xs: 0px 1px 3px 0px hsl(0 0% 0% / 0.09);
-    --shadow-xs: 0px 1px 3px 0px hsl(0 0% 0% / 0.09);
-    --shadow-sm: 0px 1px 3px 0px hsl(0 0% 0% / 0.17), 0px 1px 2px -1px hsl(0 0% 0% / 0.17);
-    --shadow: 0px 1px 3px 0px hsl(0 0% 0% / 0.17), 0px 1px 2px -1px hsl(0 0% 0% / 0.17);
-    --shadow-md: 0px 1px 3px 0px hsl(0 0% 0% / 0.17), 0px 2px 4px -1px hsl(0 0% 0% / 0.17);
-    --shadow-lg: 0px 1px 3px 0px hsl(0 0% 0% / 0.17), 0px 4px 6px -1px hsl(0 0% 0% / 0.17);
-    --shadow-xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.17), 0px 8px 10px -1px hsl(0 0% 0% / 0.17);
-    --shadow-2xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.43);
-    --tracking-normal: 0.025em;
-  }
-
-  &.dark {
-    --background: oklch(0.18 0 0);
-    --foreground: oklch(0.93 0.01 255.51);
-    --card: oklch(0.20 0 0);
-    --card-foreground: oklch(0.93 0.01 255.51);
-    --popover: oklch(0.26 0 0);
-    --popover-foreground: oklch(0.73 0 0);
-    --primary: oklch(0.44 0.10 156.76);
-    --primary-foreground: oklch(0.92 0.01 167.16);
-    --secondary: oklch(0.26 0 0);
-    --secondary-foreground: oklch(0.99 0 0);
-    --muted: oklch(0.24 0 0);
-    --muted-foreground: oklch(0.71 0 0);
-    --accent: oklch(0.31 0 0);
-    --accent-foreground: oklch(0.99 0 0);
-    --destructive: oklch(0.31 0.09 29.79);
-    --destructive-foreground: oklch(0.94 0.00 34.31);
-    --border: oklch(0.28 0 0);
-    --input: oklch(0.28 0 0);
-    --ring: oklch(0.80 0.18 151.71);
-    --chart-1: oklch(0.80 0.18 151.71);
-    --chart-2: oklch(0.71 0.14 254.62);
-    --chart-3: oklch(0.71 0.16 293.54);
-    --chart-4: oklch(0.84 0.16 84.43);
-    --chart-5: oklch(0.78 0.13 181.91);
-    --sidebar: oklch(0.18 0 0);
-    --sidebar-foreground: oklch(0.63 0 0);
-    --sidebar-primary: oklch(0.44 0.10 156.76);
-    --sidebar-primary-foreground: oklch(0.92 0.01 167.16);
-    --sidebar-accent: oklch(0.31 0 0);
-    --sidebar-accent-foreground: oklch(0.99 0 0);
-    --sidebar-border: oklch(0.28 0 0);
-    --sidebar-ring: oklch(0.80 0.18 151.71);
-    --font-sans: Outfit, sans-serif;
-    --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
-    --font-mono: monospace;
-    --radius: 0.5rem;
-    --shadow-2xs: 0px 1px 3px 0px hsl(0 0% 0% / 0.09);
-    --shadow-xs: 0px 1px 3px 0px hsl(0 0% 0% / 0.09);
-    --shadow-sm: 0px 1px 3px 0px hsl(0 0% 0% / 0.17), 0px 1px 2px -1px hsl(0 0% 0% / 0.17);
-    --shadow: 0px 1px 3px 0px hsl(0 0% 0% / 0.17), 0px 1px 2px -1px hsl(0 0% 0% / 0.17);
-    --shadow-md: 0px 1px 3px 0px hsl(0 0% 0% / 0.17), 0px 2px 4px -1px hsl(0 0% 0% / 0.17);
-    --shadow-lg: 0px 1px 3px 0px hsl(0 0% 0% / 0.17), 0px 4px 6px -1px hsl(0 0% 0% / 0.17);
-    --shadow-xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.17), 0px 8px 10px -1px hsl(0 0% 0% / 0.17);
-    --shadow-2xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.43);
-  }
-
-  body {
-    letter-spacing: var(--tracking-normal);
-  }
-}

docs/src/_data/site.js

@@ -1,10 +0,0 @@
-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", "JS", "JavaScript", "vanilla JS", "vanilla JavaScript"],
-  author: {
-    name: "Ronan Berder",
-    x: "@hunvreus"
-  },
-  url: process.env.ELEVENTY_ENV === 'development' ? "http://localhost:8080" : "https://basecoatui.com"
-};

docs/src/_includes/layouts/base.njk

@@ -1,112 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  {# Dark mode #}
-  <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>
-  {# 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 #}
-  {% 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 #}
-  <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 #}
-  <meta property="og:type" content="website">
-  <meta property="og:url" content="{{ site.url }}{{ page.url }}">
-  <meta property="og:title" content="{{ meta_title }}">
-  <meta property="og:description" content="{{ meta_description }}">
-  <meta property="og:image" content="{{ site.url }}/assets/social-screenshot.png">
-  <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 #}
-  <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 #}
-  <link rel="stylesheet" href="/assets/styles.css">
-  {# 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>
-  {# HTMX #}
-  <script src="https://unpkg.com/htmx.org@2.0.4"></script>
-  {# 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 highlight = () => {
-      if (!window.hljs) return;
-      document
-        .querySelectorAll('pre code:not([data-highlighted]), code.highlight:not([data-highlighted])')
-        .forEach(el => hljs.highlightElement(el));
-    };
-
-    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>
-{{ content | safe }}
-
-{% from "toast.njk" import toaster %}
-{{ toaster() }}
-</body>
-</html>

docs/src/_includes/layouts/layout.njk

@@ -1,15 +0,0 @@
----
-layout: layouts/base.njk
----
-
-{% include "partials/sidebar.njk" %}
-
-<main id="content">
-  <header class="bg-background sticky inset-x-0 top-0 isolate flex shrink-0 items-center gap-2 border-b z-10">
-    {% include "partials/header.njk" %}
-  </header>
-
-  <div class="p-4 md:p-6 xl:p-12">
-    {{ content | safe }}
-  </div>
-</main>

docs/src/_includes/layouts/page.njk

@@ -1,21 +0,0 @@
----
-layout: layouts/layout.njk
----
-
-<main class="mx-auto relative flex w-full max-w-screen-lg gap-10">
-  <div class="mx-auto w-full flex-1 max-w-screen-md">
-    <header class="space-y-2">
-      <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 }}
-    </article>
-  </div>
-  {% if toc %}
-    <div class="hidden text-sm xl:block w-full max-w-[300px]">
-      {% from "macros/toc.njk" import toc_nav %}
-      {{ toc_nav(toc) }}
-    </div>
-  {% endif %}
-</main>

docs/src/_includes/macros/code_block.njk

@@ -1,23 +0,0 @@
-{% macro code_block(code, language="html", class="my-4") %}
-<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);
-      });
-    "
-    class="btn-icon-ghost size-8 absolute right-2.5 top-2 text-muted-foreground hover:text-foreground group"
-  >
-    {% lucide "copy", {"class": "group-[.copied]:hidden" } %}
-    {% lucide "check", {"class": "hidden group-[.copied]:block" } %}
-  </button>
-</div>
-{% endmacro %}

docs/src/_includes/macros/code_preview.njk

@@ -1,26 +0,0 @@
-{% macro code_preview(id, code, class=None, default_code=false) %}
-{% from "./code_block.njk" import code_block %}
-{% set code_panel = code_block(code, class="") %}
-{% set preview_panel %}
-<div class="ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 relative rounded-md border">
-  <div class="preview flex min-h-[350px] w-full justify-center p-10 items-center">
-    <div {% if class %}class="{{ class }}"{% endif %}>
-      {{ code | safe }}
-    </div>
-  </div>
-</div>
-{% endset %}
-
-<div class="relative my-6">
-  {% from "tabs.njk" import tabs %}
-  {% set tabsets = [
-    { tab: "Preview", panel: preview_panel },
-    { tab: "Code", panel: code_panel }
-  ] %}
-  
-  {{ tabs(
-    tabsets=tabsets,
-    default_tab_index=(2 if default_code else 1)
-  ) }}
-</div>
-{% endmacro %}

docs/src/_includes/macros/toc.njk

@@ -1,20 +0,0 @@
-{% macro toc_nav(items=[]) %}
-<nav class="sticky top-22 space-y-2 [&_ul]:m-0 [&_ul]:list-none [&_ul_ul]:pl-4 [&_li]:mt-0 [&_li]:pt-2 [&_a]:inline-block [&_a]:no-underline [&_a]:transition-colors [&_a]:hover:text-foreground [&_a]:text-muted-foreground">
-  <h4 class="font-medium">On This Page</h4>
-  {% macro toc_list(items=[]) %}
-    {% if items and items.length %}
-      <ul>
-      {% for item in items %}
-        <li>
-          <a href="#{{ item.id }}">{{ item.label }}</a>
-          {% if item.children and item.children.length %}
-            {{ toc_list(item.children) }}
-          {% endif %}
-        </li>
-      {% endfor %}
-      </ul>
-    {% endif %}
-  {% endmacro %}
-  {{ toc_list(items) }}
-</nav>
-{% endmacro %}

docs/src/_includes/partials/header.njk

@@ -1,64 +0,0 @@
-<div class="flex h-14 w-full items-center gap-2 px-4">
-  <button
-    type="button"
-    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"
-  >
-    {% lucide "panel-left" %}
-  </button>
-  <select
-    class="select h-8 leading-none"
-    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="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>
-  <a
-    href="https://github.com/hunvreus/basecoat"
-    class="btn-icon size-8"
-    target="_blank"
-    rel="noopener noreferrer"
-    data-tooltip="GitHub repository"
-    data-side="bottom"
-    data-align="end"
-  >
-    {% lucide "github" %}
-  </a>
-</div>

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

@@ -1,89 +0,0 @@
-<section id="accordion"  class="w-full rounded-lg border scroll-mt-14">
-  <header class="border-b px-4 py-3 flex items-center justify-between">
-    <h2 class="text-sm font-medium">Accordion</h2>
-    <a href="/components/accordion" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation" data-side="left">
-      {% lucide "book-open", { "class": "size-4" }   %}
-    </a>
-  </header>
-  <div class="p-4">
-    <div class="group grid w-full max-w-xl gap-4">
-      <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 ">
-              Is it accessible?
-              {% lucide "chevron-down", { "class": "text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200 group-open:rotate-180" } %}
-            </h2>
-          </summary>
-          <section class="pb-4">
-            <p class="text-sm">Yes. It adheres to the WAI-ARIA design pattern.</p>
-          </section>
-        </details>
-        <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 ">
-              Is it styled?
-              {% lucide "chevron-down", { "class": "text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200 group-open:rotate-180" } %}
-            </h2>
-          </summary>
-          <section class="pb-4">
-            <p class="text-sm">Yes. It comes with default styles that matches the other components' aesthetic.</p>
-          </section>
-        </details>
-        <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 ">
-              Is it animated?
-              {% lucide "chevron-down", { "class": "text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200 group-open:rotate-180" } %}
-            </h2>
-          </summary>
-          <section>
-            <p class="text-sm">Yes. It's animated by default, but you can disable it if you prefer.</p>
-          </section>
-        </details>
-      </section>
-      <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 ">
-              What are the key considerations when implementing a comprehensive enterprise-level authentication system?
-              {% lucide "chevron-down", { "class": "text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200 group-open:rotate-180" } %}
-            </h2>
-          </summary>
-          <section class="pb-4">
-            <p class="text-sm">Implementing a robust enterprise authentication system requires careful consideration of multiple factors. This includes secure password hashing and storage, multi-factor authentication (MFA) implementation, session management, OAuth2 and SSO integration, regular security audits, rate limiting to prevent brute force attacks, and maintaining detailed audit logs. Additionally, you'll need to consider scalability, performance impact, and compliance with relevant data protection regulations such as GDPR or HIPAA.</p>
-          </section>
-        </details>
-        <details class="group">
-          <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 ">
-              How does modern distributed system architecture handle eventual consistency and data synchronization across multiple regions?
-              {% lucide "chevron-down", { "class": "text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200 group-open:rotate-180" } %}
-            </h2>
-          </summary>
-          <section>
-            <p class="text-sm">Modern distributed systems employ various strategies to maintain data consistency across regions. This often involves using techniques like CRDT (Conflict-Free Replicated Data Types), vector clocks, and gossip protocols. Systems might implement event sourcing patterns, utilize message queues for asynchronous updates, and employ sophisticated conflict resolution strategies. Popular solutions like Amazon's DynamoDB and Google's Spanner demonstrate different approaches to solving these challenges, balancing between consistency, availability, and partition tolerance as described in the CAP theorem.</p>
-          </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

@@ -1,26 +0,0 @@
-{% from "dialog.njk" import dialog %}
-
-<section id="alert-dialog"  class="w-full rounded-lg border scroll-mt-14">
-  <header class="border-b px-4 py-3 flex items-center justify-between">
-    <h2 class="text-sm font-medium">Alert Dialog</h2>
-    <a href="/components/alert-dialog" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation" data-side="left">
-      {% lucide "book-open", { "class": "size-4" }   %}
-    </a>
-  </header>
-  <div class="p-4">
-    {% 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

@@ -1,72 +0,0 @@
-<section id="alert"  class="w-full rounded-lg border scroll-mt-14">
-  <header class="border-b px-4 py-3 flex items-center justify-between">
-    <h2 class="text-sm font-medium">Alert</h2>
-    <a href="/components/alert" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation" data-side="left">
-      {% lucide "book-open", { "class": "size-4" }   %}
-    </a>
-  </header>
-  <div class="p-4">
-    <div class="grid 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 "bookmark-check" %}
-        <section>This is an alert with icon, description and no title.</section>
-      </div>
-
-      <div class="alert">
-        <section>This one has a description only. No title. No icon.</section>
-      </div>
-
-      <div class="alert">
-        {% lucide "popcorn" %}
-        <h2>Let's try one with icon and title.</h2>
-      </div>
-
-      <div class="alert">
-        {% lucide "shield-alert" %}
-        <h2>This is a very long alert title that demonstrates how the component handles extended text content and potentially wraps across multiple lines</h2>
-      </div>
-
-      <div class="alert">
-        {% lucide "gift" %}
-        <section>This is a very long alert description that demonstrates how the component handles extended text content and potentially wraps across multiple lines</section>
-      </div>
-
-      <div class="alert">
-        {% lucide "circle-alert" %}
-        <h2>This is an extremely long alert title that spans multiple lines to demonstrate how the component handles very lengthy headings while maintaining readability and proper text wrapping behavior</h2>
-        <section>This is an equally long description that contains detailed information about the alert. It shows how the component can accommodate extensive content while preserving proper spacing, alignment, and readability across different screen sizes and viewport widths. This helps ensure the user experience remains consistent regardless of the content length.</section>
-      </div>
-
-      <div class="alert-destructive">
-        {% lucide "circle-alert" %}
-        <h2>Something went wrong!</h2>
-        <section>Your session has expired. Please log in again.</section>
-      </div>
-
-      <div class="alert-destructive">
-        {% lucide "circle-alert" %}
-        <h2>Something went wrong!</h2>
-        <section>
-          <p>Please verify your billing information and try again.</p>
-          <ul>
-            <li>Check your card details</li>
-            <li>Ensure sufficient funds</li>
-            <li>Verify billing address</li>
-          </ul>
-        </section>
-      </div>
-
-      <div class="alert border-amber-50 bg-amber-50 text-amber-900 dark:border-amber-950 dark:bg-amber-950 dark:text-amber-100">
-        {% lucide "circle-check" %}
-        <h2>Plot Twist: This Alert is Actually Amber!</h2>
-        <section>This one has custom colors for light and dark mode.</section>
-      </div>
-    </div>
-  </div>
-</section>

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

@@ -1,37 +0,0 @@
-<section id="avatar"  class="w-full rounded-lg border scroll-mt-14">
-  <header class="border-b px-4 py-3 flex items-center justify-between">
-    <h2 class="text-sm font-medium">Avatar</h2>
-    <a href="/components/avatar" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation" data-side="left">
-      {% lucide "book-open", { "class": "size-4" }   %}
-    </a>
-  </header>
-  <div class="p-4">
-    <div class="flex flex-row flex-wrap items-center gap-4">
-      <img class="size-8 shrink-0 object-cover rounded-full" alt="@hunvreus" src="https://github.com/hunvreus.png">
-      
-      <span class="size-8 shrink-0 bg-muted flex items-center justify-center rounded-full">CN</span>
-      
-      <img class="size-12 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="@hunvreus" src="https://github.com/hunvreus.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 class="flex -space-x-2 [&_img]:ring-background [&_img]:ring-2 [&_img]:grayscale [&_img]:size-12 [&_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 class="flex -space-x-2 hover:space-x-1 [&_img]:ring-background [&_img]:size-12 [&_img]:shrink-0 [&_img]:object-cover [&_img]:rounded-full [&_img]:ring-2 [&_img]:grayscale [&_img]:transition-all [&_img]:ease-in-out [&_img]:duration-300">
-        <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>
-  </div>
-</section>

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

@@ -1,47 +0,0 @@
-<section id="badge"  class="w-full rounded-lg border scroll-mt-14">
-  <header class="border-b px-4 py-3 flex items-center justify-between">
-    <h2 class="text-sm font-medium">Badge</h2>
-    <a href="/components/badge" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation" data-side="left">
-      {% lucide "book-open", { "class": "size-4" }   %}
-    </a>
-  </header>
-  <div class="p-4">
-    <div class="flex flex-col gap-2">
-      <div class="flex flex-wrap items-center gap-2 md:flex-row">
-        <span class="badge">Primary</span>
-        <span class="badge-secondary">Secondary</span>
-        <span class="badge-outline">Outline</span>
-        <span class="badge-destructive">Destructive</span>
-        <span class="badge-outline">
-          {% lucide "check" %}
-          Badge
-        </span>
-        <span class="badge-destructive">
-          {% lucide "circle-alert" %}
-          Alert
-        </span>
-        <span class="badge rounded-full min-w-5 px-1">8</span>
-        <span class="badge-destructive rounded-full min-w-5 px-1">99</span>
-        <span class="badge-outline rounded-full min-w-5 px-1 font-mono tabular-nums">20+</span>
-      </div>
-      <div class="flex flex-wrap items-center gap-2 md:flex-row">
-        <a href="#" class="badge">
-          Link
-          {% lucide "arrow-right" %}
-        </a>
-        <a href="#" class="badge-secondary">
-          Link
-          {% lucide "arrow-right" %}
-        </a>
-        <a href="#" class="badge-destructive">
-          Link
-          {% lucide "arrow-right" %}
-        </a>
-        <a href="#" class="badge-outline">
-          Link
-          {% lucide "arrow-right" %}
-        </a>
-      </div>
-    </div>
-  </div>
-</section>

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

@@ -1,42 +0,0 @@
-{% 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">
-    <h2 class="text-sm font-medium">Breadcrumb</h2>
-    <a href="/components/breadcrumb" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation" data-side="left">
-      {% lucide "book-open", { "class": "size-4" }   %}
-    </a>
-  </header>
-  <div class="p-4">
-    <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">
-        {% set trigger %}
-          {% lucide "ellipsis" %}
-        {% endset %}
-        {{ 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"},
-          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">
-        <a href="#" class="hover:text-foreground transition-colors">Components</a>
-      </li>
-      <li>{% lucide "chevron-right", { "class": "size-3.5" } %}</li>
-      <li class="inline-flex items-center gap-1.5">
-        <span class="text-foreground font-normal">Breadcrumb</span>
-      </li>
-    </ol>
-  </div>
-</section>

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

@@ -1,101 +0,0 @@
-<section id="button"  class="w-full rounded-lg border scroll-mt-14">
-  <header class="border-b px-4 py-3 flex items-center justify-between">
-    <h2 class="text-sm font-medium">Button</h2>
-    <a href="/components/button" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation" data-side="left">
-      {% lucide "book-open", { "class": "size-4" }   %}
-    </a>
-  </header>
-  <div class="p-4">
-    <div class="flex flex-col gap-6">
-      <div class="flex flex-wrap items-center gap-2 md:flex-row">
-        <button class="btn-primary">Primary</button>
-        <button class="btn-outline">Outline</button>
-        <button class="btn-ghost">Ghost</button>
-        <button class="btn-destructive">
-          {% lucide "send" %}
-          Danger
-        </button>
-        <button class="btn-secondary">Secondary</button>
-        <button class="btn-link">Link</button>
-        <button class="btn-outline">
-          {% lucide "send" %}
-          Send
-        </button>
-        <button class="btn-outline">
-          Learn more
-          {% lucide "arrow-right" %}
-        </button>
-        <button class="btn-outline" disabled>
-          {% lucide "loader", { "class": "animate-spin" } %}
-          Loading
-        </button>
-      </div>
-
-      <div class="flex flex-wrap items-center gap-2 md:flex-row">
-        <button class="btn-sm-primary">Primary</button>
-        <button class="btn-sm-outline">Outline</button>
-        <button class="btn-sm-ghost">Ghost</button>
-        <button class="btn-sm-destructive">Danger</button>
-        <button class="btn-sm-secondary">Secondary</button>
-        <button class="btn-sm-link">Link</button>
-        <button class="btn-sm-outline">
-          {% lucide "send" %}
-          Send
-        </button>
-        <button class="btn-sm-outline">
-          Learn more
-          {% lucide "arrow-right" %}
-        </button>
-        <button class="btn-sm-outline" disabled>
-          {% lucide "loader", { "class": "animate-spin" } %}
-          Loading
-        </button>
-      </div>
-
-      <div class="flex flex-wrap items-center gap-2 md:flex-row">
-        <button class="btn-lg-primary">Primary</button>
-        <button class="btn-lg-outline">Outline</button>
-        <button class="btn-lg-ghost">Ghost</button>
-        <button class="btn-lg-destructive">
-          {% lucide "send" %}
-          Danger
-        </button>
-        <button class="btn-lg-secondary">Secondary</button>
-        <button class="btn-lg-link">Link</button>
-        <button class="btn-lg-outline">
-          {% lucide "send" %}
-          Send
-        </button>
-        <button class="btn-lg-outline">
-          Learn more
-          {% lucide "arrow-right" %}
-        </button>
-        <button class="btn-lg-outline" disabled>
-          {% lucide "loader", { "class": "animate-spin" } %}
-          Loading
-        </button>
-      </div>
-
-      <div class="flex flex-wrap items-center gap-2 md:flex-row">
-        <button class="btn-icon-primary">
-          {% lucide "download" %}
-        </button>
-        <button class="btn-icon-secondary">
-          {% lucide "upload" %}
-        </button>
-        <button class="btn-icon-outline">
-          {% lucide "arrow-right" %}
-        </button>
-        <button class="btn-icon-ghost">
-          {% lucide "ellipsis" %}
-        </button>
-        <button class="btn-icon-destructive">
-          {% lucide "trash-2" %}
-        </button>
-        <button class="btn-icon-outline" disabled>
-          {% lucide "loader", { "class": "animate-spin" } %}
-        </button>
-      </div>
-    </div>
-  </div>
-</section>

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

@@ -1,147 +0,0 @@
-<section id="card"  class="w-full rounded-lg border scroll-mt-14">
-  <header class="border-b px-4 py-3 flex items-center justify-between">
-    <h2 class="text-sm font-medium">Card</h2>
-    <a href="/components/card" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation" data-side="left">
-      {% lucide "book-open", { "class": "size-4" }   %}
-    </a>
-  </header>
-  <div class="p-4">
-    <div class="flex flex-col items-start gap-4">
-      <div class="card w-full max-w-sm">
-        <header>
-          <h2>Login to your account</h2>
-          <p>Enter your details below to login to your account</p>
-        </header>
-        <section>
-          <form class="form grid gap-6">
-            <div class="grid gap-2">
-              <label for="demo-card-form-email">Email</label>
-              <input type="email" id="demo-card-form-email">
-            </div>
-            <div class="grid gap-2">
-              <div class="flex items-center gap-2">
-                <label for="demo-card-form-password">Password</label>
-                <a href="#" class="ml-auto inline-block text-sm underline-offset-4 hover:underline">Forgot your password?</a>
-              </div>
-              <input type="password" id="demo-card-form-password">
-            </div>
-          </form>
-        </section>
-        <footer class="flex flex-col items-center gap-2">
-          <button type="button" class="btn w-full">Login</button>
-          <button type="button" class="btn-outline w-full">Login with Google</button>
-          <p class="mt-4 text-center text-sm">Don't have an account? <a href="#" class="underline-offset-4 hover:underline">Sign up</a></p>
-        </footer>
-      </div>
-
-      <div class="card">
-        <header>
-          <h2>Meeting Notes</h2>
-          <p>Transcript from the meeting with the client.</p>
-        </header>
-        <section class="text-sm">
-          <p>Client requested dashboard redesign with focus on mobile responsiveness.</p>
-          <ol class="mt-4 flex list-decimal flex-col gap-2 pl-6">
-            <li>New analytics widgets for daily/weekly metrics</li>
-            <li>Simplified navigation menu</li>
-            <li>Dark mode support</li>
-            <li>Timeline: 6 weeks</li>
-            <li>Follow-up meeting scheduled for next Tuesday</li>
-          </ol>
-        </section>
-        <footer class="flex items-center">
-          <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>
-        </footer>
-      </div>
-
-      <div class="card">
-        <header>
-          <h2>Is this an image?</h2>
-          <p>This is a card with an image.</p>
-        </header>
-        <section class="px-0">
-          <img
-            alt="Photo by Drew Beamer"
-            loading="lazy"
-            width="500"
-            height="500"
-            class="aspect-video object-cover" style="color:transparent"
-            srcset="
-              https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80&w=640&q=75 1x,
-              https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80&w=1080&q=75 2x
-            "
-            src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80&w=1080&q=75"
-          />
-        </section>
-        <footer class="flex items-center gap-2">
-          <span class="badge-outline">
-            {% lucide "bed" %}
-            1
-          </span>
-          <span class="badge-outline">
-            {% lucide "bath" %}
-            2
-          </span>
-          <span class="badge-outline">
-            {% lucide "land-plot" %}
-            350m²
-          </span>
-          <span class="ml-auto font-medium tabular-nums">
-            $135,000
-          </span>
-        </footer>
-      </div>
-
-      <div class="flex w-full flex-wrap items-start gap-8 md:*:[.card]:basis-1/4">
-        <div class="card">
-          <section>Content Only</section>
-        </div>
-
-        <div class="card">
-          <header>
-            <h2>Header Only</h2>
-            <p>This is a card with a header and a description.</p>
-          </header>
-        </div>
-
-        <div class="card">
-          <header>
-            <h2>Header and Content</h2>
-            <p>This is a card with a header and a content.</p>
-          </header>
-          <section>Content only.</section>
-        </div>
-
-        <div class="card">
-          <footer>Footer Only</footer>
-        </div>
-
-        <div class="card">
-          <header>
-            <h2>Header + Footer</h2>
-            <p>This is a card with a header and a footer.</p>
-          </header>
-          <footer>Footer</footer>
-        </div>
-
-        <div class="card">
-          <section>Content</section>
-          <footer>Footer</footer>
-        </div>
-
-        <div class="card">
-          <header>
-            <h2>Header + Content + Footer</h2>
-            <p>This is a card with a header, content and footer.</p>
-          </header>
-          <section>Content</section>
-          <footer>Footer</footer>
-        </div>
-      </div>
-    </div>
-  </div>
-</section>

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

@@ -1,34 +0,0 @@
-<section id="checkbox"  class="w-full rounded-lg border scroll-mt-14">
-  <header class="border-b px-4 py-3 flex items-center justify-between">
-    <h2 class="text-sm font-medium">Checkbox</h2>
-    <a href="/components/checkbox" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation" data-side="left">
-      {% lucide "book-open", { "class": "size-4" }   %}
-    </a>
-  </header>
-  <div class="p-4">
-    <div class="flex flex-col gap-6 max-w-lg">
-      <label class="label gap-3">
-        <input type="checkbox" class="input">
-        Accept terms and conditions
-      </label>
-      <div class="flex items-start gap-3">
-        <input type="checkbox" id="demo-checkbox-label-and-description" class="input">
-        <div class="grid gap-2">
-          <label for="demo-checkbox-label-and-description" class="label">Accept terms and conditions</label>
-          <p class="text-muted-foreground text-sm">By clicking this checkbox, you agree to the terms and conditions.</p>
-        </div>
-      </div>
-      <label class="label gap-3">
-        <input type="checkbox" class="input" disabled>
-        Enable notifications
-      </label>
-      <label class="flex items-start gap-3 border p-3 hover:bg-accent/50 rounded-lg has-[input[type='checkbox']:checked]:border-blue-600 has-[input[type='checkbox']:checked]:bg-blue-50 dark:has-[input[type='checkbox']:checked]:border-blue-900 dark:has-[input[type='checkbox']:checked]:bg-blue-950">
-        <input type="checkbox" class="input checked:bg-blue-600 checked:border-blue-600 dark:checked:bg-blue-700 dark:checked:border-blue-700 checked:after:bg-white" checked>
-        <div class="grid gap-2">
-          <h2 class="text-sm leading-none font-medium">Enable notifications</h2>
-          <p class="text-muted-foreground text-sm">You can enable or disable notifications at any time.</p>
-        </div>
-      </label>
-    </div>
-  </div>
-</section>

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

@@ -1,83 +0,0 @@
-{% from "select.njk" import select %}
-
-<section id="combobox"  class="w-full rounded-lg border scroll-mt-14">
-  <header class="border-b px-4 py-3 flex items-center justify-between">
-    <h2 class="text-sm font-medium">Combobox</h2>
-    <a href="/components/combobox" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation" data-side="left">
-      {% lucide "book-open", { "class": "size-4" }   %}
-    </a>
-  </header>
-  <div class="p-4">
-    <div class="flex flex-wrap items-start gap-4">
-      {% set options_frameworks = ["Next.js", "SvelteKit", "Nuxt.js", "Remix", "Astro"] %}
-      {% call select(
-        popover_attrs={"class": "w-48"},
-        listbox_attrs={"data-empty": "No framework found."},
-        is_combobox=true
-      ) %}
-        {% for framework in options_frameworks %}
-          <div role="option" data-value="{{ framework }}">{{ framework }}</div>
-        {% endfor %}
-      {% endcall %}
-
-      {% set options_timezones = [
-        {
-          label: "Americas",
-          timezones: [
-            { value: "America/New_York", label: "(GMT-5) New York" },
-            { value: "America/Los_Angeles", label: "(GMT-8) Los Angeles" },
-            { value: "America/Chicago", label: "(GMT-6) Chicago" },
-            { value: "America/Toronto", label: "(GMT-5) Toronto" },
-            { value: "America/Vancouver", label: "(GMT-8) Vancouver" },
-            { value: "America/Sao_Paulo", label: "(GMT-3) São Paulo" }
-          ]
-        },
-        {
-          label: "Europe",
-          timezones: [
-            { value: "Europe/London", label: "(GMT+0) London" },
-            { value: "Europe/Paris", label: "(GMT+1) Paris" },
-            { value: "Europe/Berlin", label: "(GMT+1) Berlin" },
-            { value: "Europe/Rome", label: "(GMT+1) Rome" },
-            { value: "Europe/Madrid", label: "(GMT+1) Madrid" },
-            { value: "Europe/Amsterdam", label: "(GMT+1) Amsterdam" }
-          ]
-        },
-        {
-          label: "Asia/Pacific",
-          timezones: [
-            { value: "Asia/Tokyo", label: "(GMT+9) Tokyo" },
-            { value: "Asia/Shanghai", label: "(GMT+8) Shanghai" },
-            { value: "Asia/Singapore", label: "(GMT+8) Singapore" },
-            { value: "Asia/Dubai", label: "(GMT+4) Dubai" },
-            { value: "Australia/Sydney", label: "(GMT+11) Sydney" },
-            { value: "Asia/Seoul", label: "(GMT+9) Seoul" }
-          ]
-        }
-      ] %}
-      {% call select(
-        popover_attrs={"class": "w-72"},
-        listbox_attrs={"data-empty": "No timezone found."},
-        is_combobox=true
-      ) %}
-        <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>
-              {% for timezone in group.timezones %}
-                <div role="option" data-value="{{ timezone.value}}">
-                  {{ timezone.label }}
-                </div>
-              {% endfor %}
-            </div>
-          {% endfor %}
-        </div>
-        <hr role="separator">
-        <div role="option">
-          {% lucide "circle-plus" %}
-          Create timezone
-        </div>
-      {% endcall %}
-    </div>
-  </div>
-</section>

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

@@ -1,65 +0,0 @@
-{% from "dialog.njk" import dialog %}
-
-<section id="dialog"  class="w-full rounded-lg border scroll-mt-14">
-  <header class="border-b px-4 py-3 flex items-center justify-between">
-    <h2 class="text-sm font-medium">Dialog</h2>
-    <a href="/components/dialog" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation" data-side="left">
-      {% lucide "book-open", { "class": "size-4" }   %}
-    </a>
-  </header>
-  <div class="p-4">
-    <div class="flex flex-wrap items-center gap-4">
-      {% set footer %}
-        <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.",
-        trigger="Edit Profile",
-        trigger_attrs={"class": "btn-outline"},
-        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" />
-        </div>
-        <div class="grid gap-3">
-          <label for="demo-dialog-edit-profile-username">Username</label>
-          <input type="text" value="@peduarte" id="demo-dialog-edit-profile-username" />
-        </div>
-      </form>
-      {% endcall %}
-      
-      {% set footer %}
-        <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.",
-        trigger="Scrollable Content",
-        trigger_attrs={"class": "btn-outline"},
-        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>
-        <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>
-        <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>
-        <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>
-        <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>
-        <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>
-        <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>
-        <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>
-        <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>
-        <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 %}
-    </div>
-  </div>
-</section>

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

@@ -1,294 +0,0 @@
-{% from "dropdown-menu.njk" import dropdown_menu %}
-
-<section id="dropdown-menu"  class="w-full rounded-lg border scroll-mt-14">
-  <header class="border-b px-4 py-3 flex items-center justify-between">
-    <h2 class="text-sm font-medium">Dropdown Menu</h2>
-    <a href="/components/dropdown-menu" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation" data-side="left">
-      {% lucide "book-open", { "class": "size-4" }   %}
-    </a>
-  </header>
-  <div class="p-4">
-    <div class="flex flex-wrap items-start gap-4">
-      {% call dropdown_menu(
-        id="dropdown-menu-default",
-        trigger="Open",
-        trigger_attrs={"class": "btn-outline"},
-        popover_attrs={"class": "min-w-56"}
-      ) %}
-        <div role="group" aria-labelledby="account-options">
-          <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>
-          </div>
-          <div role="menuitem">
-            Billing
-            <span class="text-muted-foreground ml-auto text-xs tracking-widest">⌘B</span>
-          </div>
-          <div role="menuitem">
-            Settings
-            <span class="text-muted-foreground ml-auto text-xs tracking-widest">⌘S</span>
-          </div>
-          <div role="menuitem">
-            Keyboard shortcuts
-            <span class="text-muted-foreground ml-auto text-xs tracking-widest">⌘K</span>
-          </div>
-        </div>
-        <hr role="separator">
-        <div role="menuitem">GitHub</div>
-        <div role="menuitem">Support</div>
-        <div role="menuitem" aria-disabled="true">API</div>
-        <hr role="separator">
-        <div role="menuitem">
-          Logout
-          <span class="text-muted-foreground ml-auto text-xs tracking-widest">⇧⌘P</span>
-        </div>
-      {% endcall %}
-
-      {% call dropdown_menu(
-        id="dropdown-menu-checkboxes",
-        trigger="Checkboxes",
-        trigger_attrs={"class": "btn-outline"},
-        popover_attrs={"class": "min-w-56"}
-      ) %}
-      <div role="group" aria-labelledby="account-options">
-        <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>
-        </div>
-        <div role="menuitem">
-          {% lucide "credit-card" %}
-          Billing
-          <span class="text-muted-foreground ml-auto text-xs tracking-widest">⌘B</span>
-        </div>
-        <div role="menuitem">
-          {% lucide "settings" %}
-          Settings
-          <span class="text-muted-foreground ml-auto text-xs tracking-widest">⌘S</span>
-        </div>
-      </div>
-      <hr role="separator">
-      <div role="group" aria-labelledby="appearance-options">
-        <div role="heading" id="appearance-options">Appearance</div>
-        <div
-          role="menuitemcheckbox"
-          aria-checked="true"
-          class="group"
-        >
-          {% lucide "check", {
-            "class": "invisible group-aria-checked:visible",
-            "aria-hidden": "true",
-            "focusable": "false"
-          } %}
-          Status Bar
-          <span class="text-muted-foreground ml-auto text-xs tracking-widest">⇧⌘P</span>
-        </div>
-        <div
-          role="menuitemcheckbox"
-          aria-checked="false"
-          class="group"
-          aria-disabled="true"
-        >
-          {% lucide "check", {
-            "class": "invisible group-aria-checked:visible",
-            "aria-hidden": "true",
-            "focusable": "false"
-          } %}
-          Activity Bar
-          <span class="text-muted-foreground ml-auto text-xs tracking-widest">⌘B</span>
-        </div>
-        <div
-          role="menuitemcheckbox"
-          aria-checked="false"
-          class="group"
-        >
-          {% lucide "check", {
-            "class": "invisible group-aria-checked:visible",
-            "aria-hidden": "true",
-            "focusable": "false"
-          } %}
-          Panel
-          <span class="text-muted-foreground ml-auto text-xs tracking-widest">⌘S</span>
-        </div>
-      </div>
-      <hr role="separator">
-      <div role="menuitem">
-        {% lucide "log-out" %}
-        Logout
-        <span class="text-muted-foreground ml-auto text-xs tracking-widest">⇧⌘P</span>
-      </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">
-          <img alt="@hunvreus" src="https://github.com/hunvreus.png" class="size-8 shrink-0 rounded-full" alt="Ronan Berder"/>
-          <div class="grid flex-1 text-left text-sm leading-tight">
-            <span class="truncate font-medium">hunvreus</span>
-            <span class="text-muted-foreground truncate text-xs">hunvreus@example.com</span>
-          </div>
-        </div>
-        <hr role="separator">
-        <div role="menuitem">
-          {% lucide "star" %}
-          Upgrade to Pro
-        </div>
-        <hr role="separator">
-        <div role="menuitem">
-          {% lucide "user" %}
-          Account
-        </div>
-        <div role="menuitem">
-          {% lucide "credit-card" %}
-          Billing
-        </div>
-        <div role="menuitem">
-          {% lucide "bell" %}
-          Notifications
-        </div>
-        <hr role="separator">
-        <div role="menuitem">
-          {% lucide "log-out" %}
-          Signout
-        </div>
-      {% endset %}
-
-      {% call dropdown_menu(
-        id="dropdown-menu-radio-group",
-        trigger="Radio Group",
-        trigger_attrs={"class": "btn-outline"},
-        popover_attrs={"class": "min-w-56"}
-      ) %}
-      <div role="group" aria-labelledby="position-options">
-        <span id="position-options" role="heading">Panel Position</span>
-        <hr role="separator">
-        <div
-          role="menuitemradio"
-          aria-checked="false"
-          class="group"
-        >
-          <div class="size-4 flex items-center justify-center">
-            <div
-              class="size-2 rounded-full bg-foreground invisible group-aria-checked:visible"
-              aria-hidden="true",
-              focusable="false"
-            ></div>
-          </div>
-          Status Bar
-          <span class="text-muted-foreground ml-auto text-xs tracking-widest">⇧⌘P</span>
-        </div>
-        <div
-          role="menuitemradio"
-          aria-checked="true"
-          class="group"
-        >
-          <div class="size-4 flex items-center justify-center">
-            <div
-              class="size-2 rounded-full bg-foreground invisible group-aria-checked:visible"
-              aria-hidden="true",
-              focusable="false"
-            ></div>
-          </div>
-          Activity Bar
-          <span class="text-muted-foreground ml-auto text-xs tracking-widest">⌘B</span>
-        </div>
-        <div
-          role="menuitemradio"
-          aria-checked="false"
-          class="group"
-        >
-          <div class="size-4 flex items-center justify-center">
-            <div
-              class="size-2 rounded-full bg-foreground invisible group-aria-checked:visible"
-              aria-hidden="true",
-              focusable="false"
-            ></div>
-          </div>
-          Panel
-          <span class="text-muted-foreground ml-auto text-xs tracking-widest">⌘S</span>
-        </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"/>
-        <div class="grid flex-1 text-left text-sm leading-tight">
-          <span class="truncate font-medium">hunvreus</span>
-          <span class="text-muted-foreground truncate text-xs">hunvreus@example.com</span>
-        </div>
-        {% lucide "chevrons-up-down", { "class": "text-muted-foreground ml-auto" } %}
-      {% endset %}
-      {% call dropdown_menu(
-        id="dropdown-checkboxes",
-        trigger=trigger,
-        trigger_attrs={"class": "btn-outline h-12 justify-start px-2 md:max-w-[200px]"}
-      ) %}
-        {{ profile_menu | safe }}
-      {% endcall %}
-
-      {% set trigger %}
-        <img alt="@hunvreus" src="https://github.com/hunvreus.png" class="size-8 shrink-0 rounded-full" alt="Ronan Berder"/>
-      {% endset %}
-      {% call dropdown_menu(
-        id="dropdown-checkboxes",
-        trigger=trigger,
-        trigger_attrs={"class": "btn-icon-ghost rounded-full size-8"},
-        popover_attrs={"data-align": "end"}
-      ) %}
-        {{ profile_menu | safe }}
-      {% endcall %}
-
-      {% set trigger %}
-        {% lucide "ellipsis" %}
-      {% endset %}
-      {% call dropdown_menu(
-        id="dropdown-checkboxes",
-        trigger=trigger,
-        trigger_attrs={"class": "btn-icon-ghost"},
-        popover_attrs={"class": "min-w-32"}
-      ) %}
-        <div role="menuitem">
-          {% lucide "pencil" %}
-          Edit
-        </div>
-        <div role="menuitem">
-          {% lucide "share" %}
-          Share
-        </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
-        </div>
-      {% endcall %}
-    </div>
-  </div>
-</section>

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

@@ -1,106 +0,0 @@
-<section id="form" class="w-full rounded-lg border scroll-mt-16">
-  <header class="border-b px-4 py-3">
-    <h2 class="text-sm font-medium">Form</h2>
-  </header>
-  <div class="p-4">
-    <form class="form grid w-full max-w-sm gap-6">
-      <div class="grid gap-2">
-        <label for="demo-form-text">Username</label>
-        <input type="text" id="demo-form-text" placeholder="hunvreus">
-        <p class="text-muted-foreground text-sm">This is your public display name.</p>
-      </div>
-
-      <div class="grid gap-2">
-        <label for="demo-form-select">Email</label>
-        <select id="demo-form-select">
-          <option value="bob@example.com">m@example.com</option>
-          <option value="alice@example.com">m@google.com</option>
-          <option value="john@example.com">m@support.com</option>
-        </select>
-        <p class="text-muted-foreground text-sm">You can manage email addresses in your email settings.</p>
-      </div>
-
-      <div class="grid gap-2">
-        <label for="demo-form-text">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>
-
-      <div class="flex flex-col gap-3">
-        <label for="demo-form-radio">Notify me about...</label>
-        <fieldset id="demo-form-radio" class="grid gap-3">
-          <label class="font-normal"><input type="radio" name="demo-form-radio" value="1">All new messages</label>
-          <label class="font-normal"><input type="radio" name="demo-form-radio" value="2">Direct messages and mentions</label>
-          <label class="font-normal"><input type="radio" name="demo-form-radio" value="3" >Nothing</label>
-        </fieldset>
-      </div>
-
-      <div class="flex flex-row items-start gap-3 rounded-md border p-4 shadow-xs">
-        <input type="checkbox" id="demo-form-checkbox">
-        <div class="flex flex-col gap-1">
-          <label for="demo-form-checkbox" class="leading-snug">Use different settings for my mobile devices</label>
-          <p class="text-muted-foreground text-sm leading-snug">You can manage your mobile notifications in the mobile settings page.</p>
-        </div>
-      </div>
-
-      <div class="flex flex-col gap-4">
-        <header>
-          <label for="demo-form-checkboxes" class="text-base leading-normal">Sidebar</label>
-          <p class="text-muted-foreground text-sm">Select the items you want to display in the sidebar.</p>
-        </header>
-        <fieldset id="demo-form-checkboxes" class="flex flex-col gap-2">
-          <label class="font-normal leading-tight">
-            <input type="checkbox" name="demo-form-checkboxes" value="1" checked>
-            Recents
-          </label>
-          <label class="font-normal leading-tight">
-            <input type="checkbox" name="demo-form-checkboxes" value="2" checked>
-            Home
-          </label>
-          <label class="font-normal leading-tight">
-            <input type="checkbox" name="demo-form-checkboxes" value="3">
-            Applications
-          </label>
-          <label class="font-normal leading-tight">
-            <input type="checkbox" name="demo-form-checkboxes" value="4">
-            Desktop
-          </label>
-          <label class="font-normal leading-tight">
-            <input type="checkbox" name="demo-form-checkboxes" value="5">
-            Download
-          </label>
-          <label class="font-normal leading-tight">
-            <input type="checkbox" name="demo-form-checkboxes" value="6">
-            Documents
-          </label>
-        </fieldset>
-      </div>
-
-      <div class="grid gap-2">
-        <label for="demo-form-date">Date of birth</label>
-        <input type="date" id="demo-form-date">
-        <p class="text-muted-foreground text-sm">Your date of birth is used to calculate your age.</p>
-      </div>
-
-      <section class="grid gap-4">
-        <h3 class="text-lg font-medium">Email Notifications</h3>
-        <div class="gap-2 flex flex-row items-start justify-between rounded-lg border p-4 shadow-xs">
-          <div class="flex flex-col gap-0.5">
-            <label for="demo-form-switch" class="leading-normal">Marketing emails</label>
-            <p class="text-muted-foreground text-sm">Receive emails about new products, features, and more.</p>
-          </div>
-          <input type="checkbox" id="demo-form-switch" role="switch">
-        </div>
-        <div class="gap-2 flex flex-row items-start justify-between rounded-lg border p-4 shadow-xs">
-          <div class="flex flex-col gap-0.5 opacity-60">
-            <label for="demo-form-switch-disabled" class="leading-normal">Marketing emails</label>
-            <p class="text-muted-foreground text-sm">Receive emails about new products, features, and more.</p>
-          </div>
-          <input type="checkbox" id="demo-form-switch-disabled" role="switch" disabled>
-        </div>
-      </section>
-
-      <button type="submit" class="btn">Submit</button>
-    </form>
-  </div>
-</section>

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

@@ -1,27 +0,0 @@
-<section id="input"  class="w-full rounded-lg border scroll-mt-14">
-  <header class="border-b px-4 py-3 flex items-center justify-between">
-    <h2 class="text-sm font-medium">Input</h2>
-    <a href="/components/input" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation" data-side="left">
-      {% lucide "book-open", { "class": "size-4" }   %}
-    </a>
-  </header>
-  <div class="p-4">
-    <div class="flex flex-col gap-y-4">
-      <input type="text" class="input" placeholder="Text">
-      <input type="text" class="input" disabled placeholder="Disabled">
-      <input type="text" class="input" aria-invalid="true" placeholder="Error">
-      <input type="email" class="input" placeholder="Email">
-      <input type="password" class="input" placeholder="Password">
-      <input type="number" class="input" placeholder="Number">
-      <input type="file" class="input">
-      <input type="tel" class="input" placeholder="Tel">
-      <input type="url" class="input" placeholder="URL">
-      <input type="search" class="input" placeholder="Search">
-      <input type="date" class="input">
-      <input type="datetime-local" class="input">
-      <input type="month" class="input">
-      <input type="week" class="input">
-      <input type="time" class="input">
-    </div>
-  </div>
-</section>

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

@@ -1,30 +0,0 @@
-<section id="label"  class="w-full rounded-lg border scroll-mt-14">
-  <header class="border-b px-4 py-3 flex items-center justify-between">
-    <h2 class="text-sm font-medium">Label</h2>
-    <a href="/components/label" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation" data-side="left">
-      {% lucide "book-open", { "class": "size-4" }   %}
-    </a>
-  </header>
-  <div class="p-4">
-    <div class="flex flex-col gap-y-4">
-      <div class="grid w-full max-w-sm gap-6">
-        <div class="flex items-center gap-3">
-          <input type="checkbox" id="label-demo-terms" class="input">
-          <label for="label-demo-terms" class="label">Accept terms and conditions</label>
-        </div>
-        <div class="grid gap-3">
-          <label for="label-demo-text" class="label">Username</label>
-          <input type="text" id="label-demo-text" class="input" placeholder="Username">
-        </div>
-        <div class="grid gap-3">
-          <label for="label-demo-disabled" class="label">Disabled</label>
-          <input type="text" id="label-demo-disabled" class="peer input" placeholder="Disabled" disabled>
-        </div>
-        <div class="grid gap-3">
-          <label for="label-demo-textarea" class="label">Message</label>
-          <textarea id="label-demo-textarea" class="textarea" placeholder="Message"></textarea>
-        </div>
-      </div>
-    </div>
-  </div>
-</section>

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

@@ -1,34 +0,0 @@
-<section id="pagination"  class="w-full rounded-lg border scroll-mt-14">
-  <header class="border-b px-4 py-3 flex items-center justify-between">
-    <h2 class="text-sm font-medium">Pagination</h2>
-    <a href="/components/pagination" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation" data-side="left">
-      {% lucide "book-open", { "class": "size-4" }   %}
-    </a>
-  </header>
-  <div class="p-4">
-    <div class="inline-flex">
-      <nav role="navigation" aria-label="pagination" class="mx-auto flex w-full justify-center">
-        <ul class="flex flex-row items-center gap-1">
-          <li>
-            <a href="#" class="btn-ghost">{% lucide "chevron-left" %} Previous</a>
-          </li>
-          <li>
-            <a href="#" class="btn-ghost size-9">1</a>
-          </li>
-          <li>
-            <a href="#" class="btn-outline size-9">2</a>
-          </li>
-          <li>
-            <a href="#" class="btn-ghost size-9">3</a>
-          </li>
-          <li>
-            <a href="#" class="btn-icon-ghost">{% lucide "ellipsis" %}</a>
-          </li>
-          <li>
-            <a href="#" class="btn-ghost">Next {% lucide "chevron-right" %}</a>
-          </li>
-        </ul>
-      </nav>
-    </div>
-  </div>
-</section>

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

@@ -1,43 +0,0 @@
-{% from "popover.njk" import popover %}
-
-<section id="popover"  class="w-full rounded-lg border scroll-mt-14">
-  <header class="border-b px-4 py-3 flex items-center justify-between">
-    <h2 class="text-sm font-medium">Popover</h2>
-    <a href="/components/popover" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation" data-side="left">
-      {% lucide "book-open", { "class": "size-4" }   %}
-    </a>
-  </header>
-  <div class="p-4">
-    {% call popover(
-      id="demo-popover",
-      trigger="Open popover",
-      trigger_attrs={"class": "btn-outline"},
-      popover_attrs={"class": "w-80"}
-    ) %}
-      <div class="grid gap-4">
-        <header class="grid gap-1.5">
-          <h4 class="leading-none font-medium">Dimensions</h4>
-          <p class="text-muted-foreground text-sm">Set the dimensions for the layer.</p>
-        </header>
-        <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"/>
-          </div>
-          <div class="grid grid-cols-3 items-center gap-4">
-            <label for="demo-popover-max-width">Max. width</label>
-            <input type="text" id="demo-popover-max-width" value="300px" class="col-span-2 h-8"/>
-          </div>
-          <div class="grid grid-cols-3 items-center gap-4">
-            <label for="demo-popover-height">Height</label>
-            <input type="text" id="demo-popover-height" value="25px" class="col-span-2 h-8"/>
-          </div>
-          <div class="grid grid-cols-3 items-center gap-4">
-            <label for="demo-popover-max-height">Max. height</label>
-            <input type="text" id="demo-popover-max-height" value="none" class="col-span-2 h-8"/>
-          </div>
-        </form>
-      </div>
-    {% endcall %}
-  </div>
-</section>

docs/src/_includes/partials/kitchen-sink/radio-group.njk

@@ -1,33 +0,0 @@
-<section id="radio-group"  class="w-full rounded-lg border scroll-mt-14">
-  <header class="border-b px-4 py-3 flex items-center justify-between">
-    <h2 class="text-sm font-medium">Radio Group</h2>
-    <a href="/components/radio-group" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation" data-side="left">
-      {% lucide "book-open", { "class": "size-4" }   %}
-    </a>
-  </header>
-  <div class="p-4">
-    <div class="flex flex-col gap-y-6">
-      <fieldset class="grid gap-3">
-        <label class="label"><input type="radio" name="demo-radio-group" value="default" class="input">Default</label>
-        <label class="label"><input type="radio" name="demo-radio-group" value="comfortable" class="input">Comfortable</label>
-        <label class="label"><input type="radio" name="demo-radio-group" value="compact" class="input">Compact</label>
-      </fieldset>
-      <fieldset class="grid gap-3 max-w-sm">
-        <label class="label gap-3 items-start hover:bg-accent/50 rounded-lg border p-4 has-[input[type='radio']:checked]:border-green-600 has-[input[type='radio']:checked]:bg-green-50 dark:has-[input[type='radio']:checked]:border-green-900 dark:has-[input[type='radio']:checked]:bg-green-950">
-          <input type="radio" name="demo-radio-group-styled" value="no" class="input checked:bg-green-600 checked:border-green-600 dark:checked:bg-input/30 checked:before:bg-background dark:checked:before:bg-primary">
-          <div class="grid gap-1 font-normal">
-            <h2 class="font-medium">Starter Plan</h2>
-            <p class="text-muted-foreground leading-snug">Perfect for small businesses getting started with our platform</p>
-          </div>
-        </label>
-        <label class="label gap-3 items-start hover:bg-accent/50 rounded-lg border p-4 has-[input[type='radio']:checked]:border-green-600 has-[input[type='radio']:checked]:bg-green-50 dark:has-[input[type='radio']:checked]:border-green-900 dark:has-[input[type='radio']:checked]:bg-green-950">
-          <input type="radio" name="demo-radio-group-styled" value="no" class="input checked:bg-green-600 checked:border-green-600 dark:checked:bg-input/30 checked:before:bg-background dark:checked:before:bg-primary">
-          <div class="grid gap-1 font-normal">
-            <h2 class="font-medium">Pro Plan</h2>
-            <p class="text-muted-foreground leading-snug">Advanced features for growing businesses with higher demands</p>
-          </div>
-        </label>
-      </fieldset>
-    </div>
-  </div>
-</section>

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

@@ -1,99 +0,0 @@
-{% from "select.njk" import select %}
-
-<section id="select"  class="w-full rounded-lg border scroll-mt-14">
-  <header class="border-b px-4 py-3 flex items-center justify-between">
-    <h2 class="text-sm font-medium">Select</h2>
-    <a href="/components/select" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation" data-side="left">
-      {% lucide "book-open", { "class": "size-4" }   %}
-    </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]">
-          <optgroup label="Fruits">
-            <option>Apple</option>
-            <option>Banana</option>
-            <option>Blueberry</option>
-          </optgroup>
-          <optgroup label="Grapes">
-            <option>Pineapple</option>
-          </optgroup>
-        </select>
-        <select class="select w-[180px]" disabled>
-          <option>Disabled</option>
-        </select>
-      </div>
-
-      <div class="flex flex-wrap items-center gap-4">
-        <div class="flex flex-wrap items-center gap-2 md:flex-row">
-          {{ 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 %}
-          {% endcall %}
-
-          {% call select(
-            id="select-disabled",
-            trigger_attrs={"disabled": "disabled", "class": "w-[180px]"}
-          ) %}
-          <div role="option" data-value="disabled">Disabled</div>
-          {% endcall %}
-
-
-          {% 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>
-    </div>
-  </div>
-</section>

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

@@ -1,40 +0,0 @@
-<section id="skeleton"  class="w-full rounded-lg border scroll-mt-14">
-  <header class="border-b px-4 py-3 flex items-center justify-between">
-    <h2 class="text-sm font-medium">Skeleton</h2>
-    <a href="/components/skeleton" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation" data-side="left">
-      {% lucide "book-open", { "class": "size-4" }   %}
-    </a>
-  </header>
-  <div class="p-4">
-    <div class="flex flex-col gap-4">
-      <div class="flex items-center gap-4">
-        <div class="bg-accent animate-pulse size-10 shrink-0 rounded-full"></div>
-        <div class="grid gap-2">
-          <div class="bg-accent animate-pulse rounded-md h-4 w-[150px]"></div>
-          <div class="bg-accent animate-pulse rounded-md h-4 w-[100px]"></div>
-        </div>
-      </div>
-      
-      <div class="flex max-sm:flex-col gap-4 w-full">
-        <div class="card w-full @md:w-auto @md:min-w-sm">
-          <header>
-            <div class="bg-accent animate-pulse rounded-md h-4 w-2/3"></div>
-            <div class="bg-accent animate-pulse rounded-md h-4 w-1/2"></div>
-          </header>
-          <section>
-            <div class="bg-accent animate-pulse rounded-md aspect-square w-full"></div>
-          </section>
-        </div>
-
-        <div class="card w-full @md:w-auto @md:min-w-sm">
-          <header>
-            <div class="bg-accent animate-pulse rounded-md h-4 w-2/3"></div>
-            <div class="bg-accent animate-pulse rounded-md h-4 w-1/2"></div>
-          </header>
-          <section>
-            <div class="bg-accent animate-pulse rounded-md aspect-square w-full"></div>
-          </section>
-        </div>
-      </div>
-  </div>
-</section>

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

@@ -1,38 +0,0 @@
-<section id="slider"  class="w-full rounded-lg border scroll-mt-14">
-  <header class="border-b px-4 py-3 flex items-center justify-between">
-    <h2 class="text-sm font-medium">Slider</h2>
-    <a href="/components/slider" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation" data-side="left">
-      {% lucide "book-open", { "class": "size-4" }   %}
-    </a>
-  </header>
-  <div class="p-4">
-    <div class="max-w-sm">
-      <input
-        type="range"
-        class="input w-full"
-        min="0"
-        max="27"
-        value="12"
-      >
-    </div>
-  </div>
-</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/kitchen-sink/switch.njk

@@ -1,27 +0,0 @@
-<section id="switch"  class="w-full rounded-lg border scroll-mt-14">
-  <header class="border-b px-4 py-3 flex items-center justify-between">
-    <h2 class="text-sm font-medium">Switch</h2>
-    <a href="/components/switch" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation" data-side="left">
-      {% lucide "book-open", { "class": "size-4" }   %}
-    </a>
-  </header>
-  <div class="p-4">
-    <div class="inline-flex flex-col gap-y-6">
-      <label class="label">
-        <input type="checkbox" name="switch" role="switch" class="input">
-        Airplane Mode
-      </label>
-      <label class="label">
-        <input type="checkbox" name="switch" role="switch" class="input checked:bg-blue-500 dark:checked:bg-blue-600" checked>
-        Bluetooth
-      </label>
-      <label class="label gap-6 leading-none border rounded-lg p-4 has-[input[type='checkbox']:checked]:border-blue-600">
-        <div class="grid gap-1">
-          <h2 class="font-medium text-sm">Share across devices</h2>
-          <p class="text-muted-foreground text-sm">Focus is shared across devices, and turns off when you leave the app.</p>
-        </div>
-        <input type="checkbox" name="switch" role="switch" class="input checked:bg-blue-500 dark:checked:bg-blue-600">
-      </label>
-    </div>
-  </div>
-</section>

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

@@ -1,74 +0,0 @@
-<section id="table"  class="w-full rounded-lg border scroll-mt-14">
-  <header class="border-b px-4 py-3 flex items-center justify-between">
-    <h2 class="text-sm font-medium">Table</h2>
-    <a href="/components/table" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation" data-side="left">
-      {% lucide "book-open", { "class": "size-4" }   %}
-    </a>
-  </header>
-  <div class="p-4">
-
-    <div class="relative w-full overflow-x-auto">
-      <table class="table">
-        <caption>A list of your recent invoices.</caption>
-        <thead>
-          <tr>
-            <th>Invoice</th>
-            <th>Status</th>
-            <th>Method</th>
-            <th>Amount</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr>
-            <td class="font-medium">INV001</td>
-            <td>Paid</td>
-            <td>Credit Card</td>
-            <td class="text-right">$250.00</td>
-          </tr>
-          <tr>
-            <td class="font-medium">INV002</td>
-            <td>Pending</td>
-            <td>PayPal</td>
-            <td class="text-right">$150.00</td>
-          </tr>
-          <tr>
-            <td class="font-medium">INV003</td>
-            <td>Unpaid</td>
-            <td>Bank Transfer</td>
-            <td class="text-right">$350.00</td>
-          </tr>
-          <tr>
-            <td class="font-medium">INV004</td>
-            <td>Paid</td>
-            <td>Paypal</td>
-            <td class="text-right">$450.00</td>
-          </tr>
-          <tr>
-            <td class="font-medium">INV005</td>
-            <td>Paid</td>
-            <td>Credit Card</td>
-            <td class="text-right">$550.00</td>
-          </tr>
-          <tr>
-            <td class="font-medium">INV006</td>
-            <td>Pending</td>
-            <td>Bank Transfer</td>
-            <td class="text-right">$200.00</td>
-          </tr>
-          <tr>
-            <td class="font-medium">INV007</td>
-            <td>Unpaid</td>
-            <td>Credit Card</td>
-            <td class="text-right">$300.00</td>
-          </tr>
-        </tbody>
-        <tfoot>
-          <tr>
-            <td colspan="3">Total</td>
-            <td class="text-right">$2,500.00</td>
-          </tr>
-        </tfoot>
-      </table>
-    </div>
-  </div>
-</section>

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

@@ -1,105 +0,0 @@
-{% from "tabs.njk" import tabs %}
-
-<section id="tabs"  class="w-full rounded-lg border scroll-mt-14">
-  <header class="border-b px-4 py-3 flex items-center justify-between">
-    <h2 class="text-sm font-medium">Tabs</h2>
-    <a href="/components/tabs" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation" data-side="left">
-      {% lucide "book-open", { "class": "size-4" }   %}
-    </a>
-  </header>
-  <div class="p-4">
-    <div class="flex flex-col gap-6">
-      {% set account_panel %}
-        <div class="card">
-          <header>
-            <h2>Account</h2>
-            <p>Make changes to your account here. Click save when you're done.</p>
-          </header>
-          <section>
-            <form class="form grid gap-6">
-              <div class="grid gap-3">
-                <label for="demo-tabs-account-name">Name</label>
-                <input type="text" id="demo-tabs-account-name" value="Pedro Duarte" />
-              </div>
-              <div class="grid gap-3">
-                <label for="demo-tabs-account-username">Username</label>
-                <input type="text" id="demo-tabs-account-username" value="@peduarte" />
-              </div>
-            </form>
-          </section>
-          <footer>
-            <button type="button" class="btn">Save changes</button>
-          </footer>
-        </div>
-      {% endset %}
-      {% set password_panel %}
-        <div class="card">
-          <header>
-            <h2>Password</h2>
-            <p>Change your password here. After saving, you'll be logged out.</p>
-          </header>
-          <section>
-            <form class="form grid gap-6">
-              <div class="grid gap-3">
-                <label for="demo-tabs-password-current">Current password</label>
-                <input type="password" id="demo-tabs-password-current" />
-              </div>
-              <div class="grid gap-3">
-                <label for="demo-tabs-password-new">New password</label>
-                <input type="password" id="demo-tabs-password-new"/>
-              </div>
-            </form>
-          </section>
-          <footer>
-            <button type="button" class="btn">Save Password</button>
-          </footer>
-        </div>
-      {% endset %}
-      {% set tabsets = [
-        { tab: "Account", panel: account_panel },
-        { tab: "Password", panel: password_panel }
-      ] %}
-      {{ tabs(
-        id='demo-tabs-with-panels',
-        tabsets=tabsets,
-        main_attrs={ "class": "max-w-[300px]" },
-        tablist_attrs={ "class": "w-full" }
-      ) }}
-
-      {% set tabsets = [
-        { tab: "Home" },
-        { tab: "Settings" }
-      ] %}
-      {{ tabs(
-        id='demo-tabs-without-panels',
-        tabsets=tabsets
-      ) }}
-
-      {% set tabsets = [
-        { tab: "Home" },
-        { tab: "Disabled", tab_attrs: { "disabled": "disabled" } }
-      ] %}
-      {{ tabs(
-        id='demo-tabs-disabled',
-        tabsets=tabsets
-      ) }}
-      
-      {% set label_preview %}
-        {% lucide 'app-window' %}
-        Preview
-      {% endset %}
-      {% set label_code %}
-        {% lucide 'code' %}
-        Code
-      {% endset %}
-      {% set tabsets = [
-        { tab: label_preview },
-        { tab: label_code }
-      ] %}
-      {{ tabs(
-        id='demo-tabs-with-icons',
-        tabsets=tabsets
-      ) }}
-    </div>
-  </div>
-</section>

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

@@ -1,27 +0,0 @@
-<section id="textarea"  class="w-full rounded-lg border scroll-mt-14">
-  <header class="border-b px-4 py-3 flex items-center justify-between">
-    <h2 class="text-sm font-medium">Textarea</h2>
-    <a href="/components/textarea" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation" data-side="left">
-      {% lucide "book-open", { "class": "size-4" }   %}
-    </a>
-  </header>
-  <div class="p-4">
-    <div class="flex flex-col gap-y-10">
-      <textarea class="textarea" placeholder="Type your message here"></textarea>
-      <textarea class="textarea" placeholder="Type your message here" aria-invalid="true"></textarea>
-      <div class="grid gap-3">
-        <label for="textarea-demo-label" class="label">Label</label>
-        <textarea id="textarea-demo-label" class="textarea" placeholder="Type your message here"></textarea>
-      </div>
-      <div class="grid gap-3">
-        <label for="textarea-demo-label-and-description" class="label">With label and description</label>
-        <textarea id="textarea-demo-label-and-description" class="textarea" placeholder="Type your message here"></textarea>
-        <p class="text-muted-foreground text-sm">Type your message and press enter to send.</p>
-      </div>
-      <div class="grid gap-3">
-        <label for="textarea-demo-disabled" class="label">Disabled</label>
-        <textarea id="textarea-demo-disabled" class="textarea" placeholder="Type your message here" disabled></textarea>
-      </div>
-    </div>
-  </div>
-</section>

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

@@ -1,25 +0,0 @@
-<section id="toast"  class="w-full rounded-lg border scroll-mt-14">
-  <header class="border-b px-4 py-3 flex items-center justify-between">
-    <h2 class="text-sm font-medium">Toast</h2>
-    <a href="/components/toast" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation" data-side="left">
-      {% lucide "book-open", { "class": "size-4" }   %}
-    </a>
-  </header>
-  <div class="p-4">
-    <div class="flex flex-wrap items-center gap-2">
-    <div class="flex flex-wrap items-center gap-2">
-      <button class="btn-outline" hx-trigger="click" hx-get="/fragments/toast/success" hx-target="#toaster" hx-swap="beforeend">
-        Success
-      </button>
-      <button class="btn-outline" hx-trigger="click" hx-get="/fragments/toast/error" hx-target="#toaster" hx-swap="beforeend">
-        Error
-      </button>
-      <button class="btn-outline" hx-trigger="click" hx-get="/fragments/toast/info" hx-target="#toaster" hx-swap="beforeend">
-        Info
-      </button>
-      <button class="btn-outline" hx-trigger="click" hx-get="/fragments/toast/warning" hx-target="#toaster" hx-swap="beforeend">
-        Warning
-      </button>
-    </div>
-  </div>
-</section>

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

@@ -1,24 +0,0 @@
-<section id="tooltip"  class="w-full rounded-lg border scroll-mt-14">
-  <header class="border-b px-4 py-3 flex items-center justify-between">
-    <h2 class="text-sm font-medium">Tooltip</h2>
-    <a href="/components/tooltip" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation" data-side="left">
-      {% lucide "book-open", { "class": "size-4" }   %}
-    </a>
-  </header>
-  <div class="p-4">
-    <div class="flex flex-wrap items-center gap-4">
-      <button type="button" class="btn-outline" data-tooltip="Top tooltip">
-        Top
-      </button>
-      <button type="button" class="btn-outline" data-tooltip="Right tooltip" data-side="right">
-        Right
-      </button>
-      <button type="button" class="btn-outline" data-tooltip="Bottom tooltip" data-side="bottom">
-        Bottom
-      </button>
-      <button type="button" class="btn-outline" data-tooltip="Left tooltip" data-side="left">
-        Left
-      </button>
-    </div>
-  </div>
-</section>

docs/src/_includes/partials/sidebar.njk

@@ -1,139 +0,0 @@
-{% from "sidebar.njk" import sidebar %}
-{% from "popover.njk" import popover %}
-
-{% set footer %}
-{% set trigger %}
-<img src="https://github.com/hunvreus.png" class="rounded-lg shrink-0 size-8">
-<div class="grid flex-1 text-left text-sm leading-tight">
-  <span class="truncate font-medium">Ronan Berder</span>
-  <span class="truncate text-xs">@hunvreus</span>
-</div>
-{% lucide "chevrons-up-down" %}
-{% endset %}
-{% call popover(
-  trigger=trigger,
-  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">
-  <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>
-  </header>
-  <footer class="grid gap-2">
-    <a href="https://github.com/sponsors/hunvreus" class="btn-sm" target="_blank">Sponsor me on GitHub</a>
-    <a href="https://x.com/hunvreus" class="btn-sm-outline" target="_blank">Follow me on X</a>
-  </footer>
-</div>
-{% endcall %}
-{% endset %}
-
-{% set header %}
-<a href="/" class="btn-ghost p-2 h-12 w-full justify-start">
-  <div class="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg">
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" class="h-4 w-4"><rect width="256" height="256" fill="none"></rect><line x1="208" y1="128" x2="128" y2="208" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"></line><line x1="192" y1="40" x2="40" y2="192" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"></line></svg>
-  </div>
-  <div class="grid flex-1 text-left text-sm leading-tight">
-    <span class="truncate font-medium">Basecoat</span>
-    <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>
-    <input type="text" placeholder="Search the docs..." class="h-8 w-full shadow-none pl-8">
-    {% lucide "search", { "class": "pointer-events-none absolute top-1/2 left-2 size-4 -translate-y-1/2 opacity-50 select-none" } %}
-  </form>
-</div> #}
-{% 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",
-  "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 %}<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" } },
-    { 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 },
-    { label: "Alert", url: "/components/alert", attrs: link_attrs },
-    { label: "Alert Dialog", url: "/components/alert-dialog", attrs: link_attrs },
-    { label: "Avatar", url: "/components/avatar", attrs: link_attrs },
-    { 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: "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 }
-  ]}
-] %}
-
-
-{{ sidebar(
-  id="sidebar",
-  label="Sidebar navigation",
-  header=header,
-  footer=footer,
-  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

@@ -1,75 +0,0 @@
----
-layout: layouts/page.njk
-title: Accordion
-description: A vertically stacked set of interactive headings that each reveal a section of content.
-toc:
-  - label: Usage
-    id: usage
----
-
-{% from "macros/code_preview.njk" import code_preview %}
-
-<div class="alert mb-6">
-  {% lucide "circle-alert" %}
-  <h2>There is no dedicated Accordion component in Basecoat.</h2>
-</div>
-
-{% 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 ">
-        Is it accessible?
-        {% lucide "chevron-down", { "class": "text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200 group-open:rotate-180" } %}
-      </h2>
-    </summary>
-    <section class="pb-4">
-      <p class="text-sm">Yes. It adheres to the WAI-ARIA design pattern.</p>
-    </section>
-  </details>
-  <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 ">
-        Is it styled?
-        {% lucide "chevron-down", { "class": "text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200 group-open:rotate-180" } %}
-      </h2>
-    </summary>
-    <section class="pb-4">
-      <p class="text-sm">Yes. It comes with default styles that matches the other components' aesthetic.</p>
-    </section>
-  </details>
-  <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 ">
-        Is it animated?
-        {% lucide "chevron-down", { "class": "text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200 group-open:rotate-180" } %}
-      </h2>
-    </summary>
-    <section>
-      <p class="text-sm whitespace-pre-wrap">Yes. It's animated by default, but you can disable it if you prefer.</p>
-    </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 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

@@ -1,119 +0,0 @@
----
-layout: layouts/page.njk
-title: Alert Dialog
-description: A modal dialog that interrupts the user with important content and expects a response.
-toc:
-  - label: Usage
-    id: usage
-    children:
-      - label: HTML
-        id: usage-html
-      - label: Jinja and Nunjucks
-        id: usage-macro
----
-
-{% from "macros/code_preview.njk" import code_preview %}
-{% from "macros/code_block.njk" import code_block %}
-{% from "dialog.njk" import dialog %}
-
-{% set code_html %}
-{% set footer %}
-  <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",
-  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 alert dialog",
-  trigger_attrs={"class": "btn-outline"},
-  footer=footer,
-  close_button=false,
-  close_on_overlay_click=false
-) }}
-{% endset %}
-
-{{ code_preview("alert-dialog", code_html | prettyHtml) }}
-
-<h2 id="usage"><a href="#usage">Usage</a></h2>
-
-<h3 id="usage-default"><a href="#usage-html">HTML</a></h3>
-
-<section class="prose">
-  <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>
-
-{{ code_block(code_html | prettyHtml) }}
-
-<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. 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">
-  <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/dialog.html.jinja" target="_blank">
-    Jinja macro
-    {% lucide "arrow-right" %}
-  </a>
-  <a class="badge-outline" href="https://github.com/hunvreus/basecoat/blob/main/src/nunjucks/dialog.njk" target="_blank">
-    Nunjucks macro
-    {% lucide "arrow-right" %}
-  </a>
-</div>
-
-{% set raw_code %}{% raw %}{% set footer %}
-  <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",
-  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 Alert Dialog",
-  trigger_attrs={"class": "btn-outline"},
-  footer=footer,
-  close_button=False,
-  close_on_overlay_click=False
-) }}{% endraw %}
-{% endset%}
-{{ code_block(raw_code, "jinja") }}

docs/src/components/alert.njk

@@ -1,108 +0,0 @@
----
-layout: layouts/page.njk
-title: Alert
-description: Displays a callout for user attention.
-toc:
-  - label: Usage
-    id: usage
-  - label: Examples
-    id: examples
-    children:
-      - label: Destructive
-        id: example-destructive
-      - label: No description
-        id: example-no-description
-      - label: No icon
-        id: example-no-icon
----
-
-{% from "macros/code_preview.njk" import code_preview %}
-{% from "macros/code_block.njk" import code_block %}
-
-{% 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>Use the <code>alert</code> or <code>alert-destructive</code>.</p>
-</section>
-
-{% 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>
-
-<h3 id="example-destructive"><a href="#example-destructive">Destructive</a></h3>
-
-{% set code %}<div class="alert-destructive">
-  {% lucide "circle-alert" %}
-  <h2>Something went wrong!</h2>
-  <section>Your session has expired. Please log in again.</section>
-</div>{% endset %}
-{{ code_preview("alert-destructive", code) }}
-
-<h3 id="example-no-description"><a href="#example-no-description">No description</a></h3>
-
-{% set code %}
-<div class="alert">
-  {% lucide "shield-alert" %}
-  <h2>This is a very long alert title that demonstrates how the component handles extended text content and potentially wraps across multiple lines</h2>
-</div>{% endset %}
-{{ code_preview("alert-no-description", code) }}
-
-<h3 id="example-no-icon"><a href="#example-no-icon">No icon</a></h3>
-
-{% set code %}<div class="alert">
-  <h2>Success! Your changes have been saved</h2>
-  <section>This is an alert with icon, title and description.</section>
-</div>{% endset %}
-{{ code_preview("alert-no-icon", code) }}

docs/src/components/avatar.njk

@@ -1,40 +0,0 @@
----
-layout: layouts/page.njk
-title: Avatar
-description: An image element with a fallback for representing the user.
-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 Avatar component in Basecoat.</h2>
-</div>
-
-{% 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>
-
-<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

@@ -1,93 +0,0 @@
----
-layout: layouts/page.njk
-title: Badge
-description: Displays a badge or a component that looks like a badge.
-toc:
-  - label: Usage
-    id: usage
-  - label: Examples
-    id: examples
-    children:
-      - label: Primary
-        id: example-primary
-      - label: Secondary
-        id: example-secondary
-      - label: Destructive
-        id: example-destructive
-      - label: Outline
-        id: example-outline
-      - label: With icon
-        id: example-with-icon
-      - label: Link
-        id: example-link
----
-
-{% from "macros/code_preview.njk" import code_preview %}
-{% from "macros/code_block.njk" import code_block %}
-
-{% 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>
-
-<section class="prose">
-  <p>Use one of the badge classes: <code>badge</code>, <code>badge-primary</code>, <code>badge-secondary</code>, <code>badge-destructive</code> or <code>badge-outline</code>.
-</section>
-
-{{ code_block(code) }}
-
-<h2 id="examples"><a href="#examples">Examples</a></h2>
-
-<h3 id="example-primary"><a href="#example-primary">Primary</a></h3>
-
-{% set code %}<span class="badge">Primary</span>{% endset %}
-{{ code_preview("badge-primary", code) }}
-
-<h3 id="example-secondary"><a href="#example-secondary">Secondary</a></h3>
-
-{% set code %}<span class="badge-secondary">Secondary</span>{% endset %}
-{{ code_preview("badge-secondary", code) }}
-
-<h3 id="example-destructive"><a href="#example-destructive">Destructive</a></h3>
-
-{% set code %}<span class="badge-destructive">Destructive</span>{% endset %}
-{{ code_preview("badge-destructive", code) }}
-
-<h3 id="example-outline"><a href="#example-outline">Outline</a></h3>
-
-{% set code %}<span class="badge-outline">Outline</span>{% endset %}
-{{ code_preview("badge-outline", code) }}
-
-<h3 id="example-with-icon"><a href="#example-with-icon">With icon</a></h3>
-
-{% set code %}<span class="badge-destructive">
-  {% lucide "circle-alert" %}
-  With icon
-</span>{% endset %}
-{{ code_preview("badge-with-icon", code) }}
-
-<h3 id="example-link"><a href="#example-link">Link</a></h3>
-
-{% set code %}<a href="#" class="badge-outline">
-  Link
-  {% lucide "arrow-right" %}
-</a>{% endset %}
-{{ code_preview("badge-link", code) }}

docs/src/components/breadcrumb.njk

@@ -1,71 +0,0 @@
----
-layout: layouts/page.njk
-title: Breadcrumb
-description: Displays the path to the current resource using a hierarchy of links.
-toc:
-  - label: Usage
-    id: usage
----
-
-{% from "macros/code_preview.njk" import code_preview %}
-{% from "macros/code_block.njk" import code_block %}
-{% from "dropdown-menu.njk" import dropdown_menu %}
-
-<div class="alert mb-6">
-  {% lucide "circle-alert" %}
-  <h2>There is no dedicated Breadcrumb component in Basecoat.</h2>
-</div>
-
-{% 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">
-    <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">
-    {% set trigger %}
-      {% lucide "ellipsis" %}
-    {% endset %}
-    {% 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"}
-    ) %}
-      <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 %}
-  </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>
-  <li>{% lucide "chevron-right", { "class": "size-3.5" } %}</li>
-  <li class="inline-flex items-center gap-1.5">
-    <span class="text-foreground font-normal">Breadcrumb</span>
-  </li>
-</ol>
-{% endset %}
-
-{{ code_preview("dropdown-menu", code_html | prettyHtml) }}
-
-<h2 id="usage"><a href="#usage">Usage</a></h2>
-
-<section class="prose">
-  <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>
-
-{% 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

@@ -1,290 +0,0 @@
----
-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/button.njk

@@ -1,141 +0,0 @@
----
-layout: layouts/page.njk
-title: Button
-description: Displays a button or a component that looks like a button.
-toc:
-  - label: Usage
-    id: usage
-  - label: Examples
-    id: examples
-    children:
-      - label: Primary
-        id: example-primary
-      - label: Secondary
-        id: example-secondary
-      - label: Destructive
-        id: example-destructive
-      - label: Outline
-        id: example-outline
-      - label: Ghost
-        id: example-ghost
-      - label: Link
-        id: example-link
-      - label: Icon
-        id: example-icon
-      - label: With Icon
-        id: example-with-icon
-      - label: Loading
-        id: example-loading
-      - label: Large
-        id: example-large
-      - label: Small
-        id: example-small
----
-
-{% from "macros/code_preview.njk" import code_preview %}
-{% from "macros/code_block.njk" import code_block %}
-
-{% set code %}<button class="btn">Button</button>{% endset %}
-{{ code_preview("button", code) }}
-
-<h2 id="usage">Usage</h2>
-
-<section class="prose">
-  <p>You can use one of the <code>btn</code> classes to style any element as a button:</p>
-
-  <ul>
-    <li>
-      <b>Variants</b>:
-      <ul>
-        <li><code>btn</code> or <code>btn-primary</code> for primary
-      buttons,</li>
-        <li><code>btn-secondary</code> for secondary buttons.</li>
-        <li><code>btn-destructive</code> for destructive buttons.</li>
-        <li><code>btn-outline</code> for outline buttons.</li>
-        <li><code>btn-ghost</code> for ghost buttons.</li>
-        <li><code>btn-link</code> for link buttons.</li>
-        <li><code>btn-icon</code> for icon buttons. This can be combined with other variants, for example <code>btn-icon-destructive</code>.</li>
-      </ul>
-    </li>
-    <li>
-      <b>Sizes</b>:
-      <ul>
-        <li><code>btn-sm</code> for small buttons.</li>
-        <li><code>btn-lg</code> for large buttons.</li>
-        <li>You can combine sizes with any variant, for example <code>btn-lg-destructive</code> or <code>btn-sm-icon-outline</code>.</li>
-      </ul>
-    </li>
-  </ul>
-</section>
-
-{{ code_block(code) }}
-
-<h2 id="examples"><a href="#examples">Examples</a></h2>
-
-<h3 id="example-primary"><a href="#example-primary">Primary</a></h3>
-
-{% set code %}<button class="btn">Primary</button>{% endset %}
-{{ code_preview("button-primary", code) }}
-
-<h3 id="example-secondary"><a href="#example-secondary">Secondary</a></h3>
-
-{% set code %}<button class="btn-secondary">Button</button>{% endset %}
-{{ code_preview("button-secondary", code) }}
-
-<h3 id="example-destructive"><a href="#example-destructive">Destructive</a></h3>
-
-{% set code %}<button class="btn-destructive">Destructive</button>{% endset %}
-{{ code_preview("button-destructive", code) }}
-
-<h3 id="example-outline"><a href="#example-outline">Outline</a></h3>
-
-{% set code %}<button class="btn-outline">Outline</button>{% endset %}
-{{ code_preview("button-outline", code) }}
-
-<h3 id="example-ghost"><a href="#example-ghost">Ghost</a></h3>
-
-{% set code %}<button class="btn-ghost">Ghost</button>{% endset %}
-{{ code_preview("button-ghost", code) }}
-
-<h3 id="example-link"><a href="#example-link">Link</a></h3>
-
-{% set code %}<button class="btn-link">Link</button>{% endset %}
-{{ code_preview("button-link", code) }}
-
-<h3 id="example-icon"><a href="#example-icon">Icon</a></h3>
-
-{% set code %}<button class="btn-icon-outline">
-  {% lucide "chevron-right" %}
-</button>{% endset %}
-{{ code_preview("button-icon", code) }}
-
-<h3 id="example-with-icon"><a href="#example-with-icon">With Icon</a></h3>
-
-{% set code %}<button class="btn">
-  {% lucide "send" %}
-  Send email
-</button>{% endset %}
-{{ code_preview("button-with-icon", code) }}
-
-<h3 id="example-loading"><a href="#example-loading">Loading</a></h3>
-
-{% set code %}<button class="btn-outline" disabled>
-  {% lucide "loader", { "class": "animate-spin" } %}
-  Loading
-</button>{% endset %}
-{{ code_preview("button-loading", code) }}
-
-<h3 id="example-large"><a href="#example-large">Large</a></h3>
-
-{% set code %}<button class="btn-lg">
-  {% lucide "shopping-cart" %}
-  Buy
-</button>{% endset %}
-{{ code_preview("button-large", code) }}
-
-<h3 id="example-small"><a href="#example-small">Small</a></h3>
-
-{% set code %}<button class="btn-sm-icon-destructive">
-  {% lucide "trash" %}
-</button>{% endset %}
-{{ code_preview("button-small", code) }}

docs/src/components/card.njk

@@ -1,156 +0,0 @@
----
-layout: layouts/page.njk
-title: Card
-description: Displays a card with header, content, and footer.
-toc:
-  - label: Usage
-    id: usage
-  - label: Examples
-    id: examples
-    children:
-      - label: With content and footer
-        id: example-with-content-and-footer
-      - label: With image
-        id: example-with-image
----
-
-{% from "macros/code_preview.njk" import code_preview %}
-{% from "macros/code_block.njk" import code_block %}
-
-{% set code %}<div class="card w-full">
-  <header>
-    <h2>Login to your account</h2>
-    <p>Enter your details below to login to your account</p>
-  </header>
-  <section>
-    <form class="form grid gap-6">
-      <div class="grid gap-2">
-        <label for="demo-card-form-email">Email</label>
-        <input type="email" id="demo-card-form-email">
-      </div>
-      <div class="grid gap-2">
-        <div class="flex items-center gap-2">
-          <label for="demo-card-form-password">Password</label>
-          <a href="#" class="ml-auto inline-block text-sm underline-offset-4 hover:underline">Forgot your password?</a>
-        </div>
-        <input type="password" id="demo-card-form-password">
-      </div>
-    </form>
-  </section>
-  <footer class="flex flex-col items-center gap-2">
-    <button type="button" class="btn w-full">Login</button>
-    <button type="button" class="btn-outline w-full">Login with Google</button>
-    <p class="mt-4 text-center text-sm">Don't have an account? <a href="#" class="underline-offset-4 hover:underline">Sign up</a></p>
-  </footer>
-</div>{% endset %}
-{{ code_preview("card", code, "w-full max-w-sm") }}
-
-<h2 id="usage">Usage</h2>
-
-{% set code %}<div class="card">
-  <header>
-    <h2>Card Title</h2>
-    <p>Card Description</p>
-  </header>
-  <section>
-    <p>Card Content</p>
-  </section>
-  <footer>
-    <p>Card Footer</p>
-  </footer>
-</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>
-
-{% set code %}<div class="card">
-  <header>
-    <h2>Meeting Notes</h2>
-    <p>Transcript from the meeting with the client.</p>
-  </header>
-  <section class="text-sm">
-    <p>Client requested dashboard redesign with focus on mobile responsiveness.</p>
-    <ol class="mt-4 flex list-decimal flex-col gap-2 pl-6">
-      <li>New analytics widgets for daily/weekly metrics</li>
-      <li>Simplified navigation menu</li>
-      <li>Dark mode support</li>
-      <li>Timeline: 6 weeks</li>
-      <li>Follow-up meeting scheduled for next Tuesday</li>
-    </ol>
-  </section>
-  <footer class="flex items-center">
-    <div class="flex -space-x-2 [&_img]:ring-card [&_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>
-  </footer>
-</div>{% endset %}
-{{ code_preview("card-with-content-and-footer", code) }}
-
-<h3 id="example-with-image"><a href="#example-with-image">With image</a></h3>
-
-{% set code %}<div class="card">
-  <header>
-    <h2>Is this an image?</h2>
-    <p>This is a card with an image.</p>
-  </header>
-  <section class="px-0">
-    <img
-      alt="Photo by Drew Beamer"
-      loading="lazy"
-      width="500"
-      height="500"
-      class="aspect-video object-cover" style="color:transparent"
-      srcset="
-        https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80&w=640&q=75 1x,
-        https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80&w=1080&q=75 2x
-      "
-      src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80&w=1080&q=75"
-    />
-  </section>
-  <footer class="flex items-center gap-2">
-    <span class="badge-outline">
-      {% lucide "bed" %}
-      1
-    </span>
-    <span class="badge-outline">
-      {% lucide "bath" %}
-      2
-    </span>
-    <span class="badge-outline">
-      {% lucide "land-plot" %}
-      350m²
-    </span>
-    <span class="ml-auto font-medium tabular-nums">
-      $135,000
-    </span>
-  </footer>
-</div>{% endset %}
-{{ code_preview("card-with-image", code) }}

docs/src/components/carousel.njk

@@ -1,102 +0,0 @@
----
-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

@@ -1,814 +0,0 @@
----
-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/checkbox.njk

@@ -1,101 +0,0 @@
----
-layout: layouts/page.njk
-title: Checkbox
-description: A control that allows the user to toggle between checked and not checked.
-toc:
-  - label: Usage
-    id: usage
-  - label: Examples
-    id: examples
-    children:
-      - label: Disabled
-        id: example-disabled
-      - label: With text
-        id: example-with-text
-      - label: Form
-        id: example-form
----
-
-{% from "macros/code_preview.njk" import code_preview %}
-{% from "macros/code_block.njk" import code_block %}
-
-{% set code %}<label class="label gap-3">
-  <input type="checkbox" class="input">
-  Accept terms and conditions
-</label>{% endset %}
-{{ code_preview("checkbox", code) }}
-
-<h2 id="usage">Usage</h2>
-
-<section class="prose">
-  <p>Add the <code>input</code> class to your <code>&lt;input type="radio"&gt;</code> elements or have a parent with the <code>form</code> class (<a href="/components/form">read more about form</a>). You can also set the <code>aria-invalid</code> attribute to <code>true</code> to make the input invalid.</p>
-</section>
-
-{% set code %}<input type="checkbox" class="input">{% endset %}
-{{ code_block(code) }}
-
-<h2 id="examples"><a href="#examples">Examples</a></h2>
-
-<h3 id="example-disabled"><a href="#example-disabled">Disabled</a></h3>
-
-{% set code %}<label class="label gap-3">
-  <input type="checkbox" class="input" disabled>
-  Accept terms and conditions
-</label>{% endset %}
-{{ code_preview("checkbox-disabled", code) }}
-
-<h3 id="example-with-text"><a href="#example-with-text">With text</a></h3>
-
-{% set code %}<div class="flex items-start gap-3">
-  <input type="checkbox" id="checkbox-with-text" class="input">
-  <div class="grid gap-2">
-    <label for="checkbox-with-text" class="label">Accept terms and conditions</label>
-    <p class="text-muted-foreground text-sm">By clicking this checkbox, you agree to the terms and conditions.</p>
-  </div>
-</div>{% endset %}
-{{ code_preview("checkbox-with-text", code) }}
-
-<h3 id="example-form"><a href="#example-form">Form</a></h3>
-
-{% set code %}<form class="form flex flex-row items-start gap-3 rounded-md border p-4 shadow-xs">
-  <input type="checkbox" id="checkbox-form-1">
-  <div class="flex flex-col gap-1">
-    <label for="checkbox-form-1" class="leading-snug">Use different settings for my mobile devices</label>
-    <p class="text-muted-foreground text-sm leading-snug">You can manage your mobile notifications in the mobile settings page.</p>
-  </div>
-</form>{% endset %}
-{{ code_preview("input-form", code) }}
-
-{% set code %}<form class="form flex flex-col gap-4">
-  <header>
-    <label for="demo-form-checkboxes" class="text-base leading-normal">Sidebar</label>
-    <p class="text-muted-foreground text-sm">Select the items you want to display in the sidebar.</p>
-  </header>
-  <fieldset id="demo-form-checkboxes" class="flex flex-col gap-2">
-    <label class="font-normal leading-tight">
-      <input type="checkbox" name="demo-form-checkboxes" value="1" checked>
-      Recents
-    </label>
-    <label class="font-normal leading-tight">
-      <input type="checkbox" name="demo-form-checkboxes" value="2" checked>
-      Home
-    </label>
-    <label class="font-normal leading-tight">
-      <input type="checkbox" name="demo-form-checkboxes" value="3">
-      Applications
-    </label>
-    <label class="font-normal leading-tight">
-      <input type="checkbox" name="demo-form-checkboxes" value="4">
-      Desktop
-    </label>
-    <label class="font-normal leading-tight">
-      <input type="checkbox" name="demo-form-checkboxes" value="5">
-      Download
-    </label>
-    <label class="font-normal leading-tight">
-      <input type="checkbox" name="demo-form-checkboxes" value="6">
-      Documents
-    </label>
-  </fieldset>
-</form>{% endset %}
-{{ code_preview("input-form", code) }}

docs/src/components/combobox.njk

@@ -1,286 +0,0 @@
----
-layout: layouts/page.njk
-title: Combobox
-description: Autocomplete input and command palette with a list of suggestions.
-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 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
-    id: examples
-    children:
-      - label: Scrollable
-        id: example-scrollable
-      - label: Top side
-        id: example-top
----
-
-{% from "macros/code_preview.njk" import code_preview %}
-{% from "macros/code_block.njk" import code_block %}
-{% from "select.njk" import select %}
-
-{% set options_frameworks = ["Next.js", "SvelteKit", "Nuxt.js", "Remix", "Astro"] %}
-{% set code_html %}
-{% call select(
-  trigger_attrs={"class": "w-[200px]"},
-  listbox_attrs={"data-empty": "No framework found."},
-  is_combobox=true,
-  search_placeholder="Search framework..."
-) %}
-  {% for framework in options_frameworks %}
-    <div role="option" data-value="{{ framework }}">{{ framework }}</div>
-  {% endfor %}
-{% endcall %}
-{% endset %}
-
-{{ code_preview("combobox", code_html | prettyHtml) }}
-
-<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/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
-    {% 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">
-    select.js
-    {% lucide "arrow-right" %}
-  </a>
-</div>
-
-<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.</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>
-
-<div class="prose">
-  <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. If you use one of the macros, make sure to set <code>is_combobox</code> to <code>True</code> (or <code>true</code> for Nunjucks).</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/select.html.jinja" target="_blank">
-    Jinja macro
-    {% lucide "arrow-right" %}
-  </a>
-  <a class="badge-outline" href="https://github.com/hunvreus/basecoat/blob/main/src/nunjucks/select.njk" target="_blank">
-    Nunjucks macro
-    {% lucide "arrow-right" %}
-  </a>
-</div>
-
-{% set raw_code %}{% raw %}{% call select(
-  listbox_attrs={"data-empty": "No framework found."},
-  is_combobox=true
-) %}
-  <div role="option" data-value="nextjs">Next.js</div>
-  <div role="option" data-value="sveltekit">SvelteKit</div>
-  <div role="option" data-value="nuxtjs">Nuxt.js</div>
-  <div role="option" data-value="remix">Remix</div>
-  <div role="option" data-value="astro">Astro</div>
-{% endcall %}{% endraw %}{% endset %}
-{{ code_block(raw_code, "jinja") }}
-
-<h2 id="examples"><a href="#examples">Examples</a></h2>
-
-<h3 id="example-scrollable"><a href="#example-scrollable">Scrollable</a></h3>
-
-{% set options_timezones = [
-  {
-    label: "Americas",
-    timezones: [
-      { value: "America/New_York", label: "(GMT-5) New York" },
-      { value: "America/Los_Angeles", label: "(GMT-8) Los Angeles" },
-      { value: "America/Chicago", label: "(GMT-6) Chicago" },
-      { value: "America/Toronto", label: "(GMT-5) Toronto" },
-      { value: "America/Vancouver", label: "(GMT-8) Vancouver" },
-      { value: "America/Sao_Paulo", label: "(GMT-3) São Paulo" }
-    ]
-  },
-  {
-    label: "Europe",
-    timezones: [
-      { value: "Europe/London", label: "(GMT+0) London" },
-      { value: "Europe/Paris", label: "(GMT+1) Paris" },
-      { value: "Europe/Berlin", label: "(GMT+1) Berlin" },
-      { value: "Europe/Rome", label: "(GMT+1) Rome" },
-      { value: "Europe/Madrid", label: "(GMT+1) Madrid" },
-      { value: "Europe/Amsterdam", label: "(GMT+1) Amsterdam" }
-    ]
-  },
-  {
-    label: "Asia/Pacific",
-    timezones: [
-      { value: "Asia/Tokyo", label: "(GMT+9) Tokyo" },
-      { value: "Asia/Shanghai", label: "(GMT+8) Shanghai" },
-      { value: "Asia/Singapore", label: "(GMT+8) Singapore" },
-      { value: "Asia/Dubai", label: "(GMT+4) Dubai" },
-      { value: "Australia/Sydney", label: "(GMT+11) Sydney" },
-      { value: "Asia/Seoul", label: "(GMT+9) Seoul" }
-    ]
-  }
-] %}
-{% set code %}
-{% call select(
-  trigger_attrs={"class": "w-[200px]"},
-  popover_attrs={"class": "w-72"},
-  listbox_attrs={"data-empty": "No timezone found."},
-  is_combobox=true,
-  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 }}">
-        <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 }}
-          </div>
-        {% endfor %}
-      </div>
-    {% endfor %}
-  </div>
-  <hr role="separator">
-  <div role="option">
-    {% lucide "circle-plus" %}
-    Create timezone
-  </div>
-{% endcall %}
-{% endset %}
-{{ code_preview("combobox-with-groups", code | prettyHtml) }}
-
-<h3 id="example-top"><a href="#example-top">Top side</a></h3>
-
-{% set options_frameworks = ["Next.js", "SvelteKit", "Nuxt.js", "Remix", "Astro"] %}
-{% set code %}
-{% call select(
-  trigger_attrs={"class": "w-[200px]"},
-  listbox_attrs={"data-empty": "No framework found."},
-  is_combobox=true,
-  search_placeholder="Search framework...",
-  popover_attrs={"data-side": "top"}
-) %}
-  {% for framework in options_frameworks %}
-    <div role="option" data-value="{{ framework }}">{{ framework }}</div>
-  {% endfor %}
-{% endcall %}{% endset %}
-{{ code_preview("combobox", code | prettyHtml) }}

docs/src/components/command.njk

@@ -1,261 +0,0 @@
----
-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" data-value="calendar" onclick="console.log('Open calendar')">
-    {% lucide "calendar" %}
-    <span>Calendar</span>
-  </div>
-  <div role="menuitem" data-value="search-emoji" onclick="console.log('Search emoji')">
-    {% lucide "smile" %}
-    <span>Search Emoji</span>
-  </div>
-  <div role="menuitem" data-value="calculator" 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" data-value="profile" onclick="console.log('Open profile')">
-    {% lucide "user" %}
-    <span>Profile</span>
-    <kbd class="ml-auto text-muted-foreground bg-transparent tracking-widest">⌘P</kbd>
-  </div>
-  <div role="menuitem" data-value="billing" onclick="console.log('Open billing')">
-    {% lucide "credit-card" %}
-    <span>Billing</span>
-    <kbd class="ml-auto text-muted-foreground bg-transparent tracking-widest">⌘B</kbd>
-  </div>
-  <div role="menuitem" data-value="settings" onclick="console.log('Open 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></dt>
-                <dd>Command item that triggers an action when clicked. 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>data-label</code>: custom label for filtering (if different from text content)</li>
-                    <li><code>data-keywords</code>: additional keywords for enhanced filtering</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" data-value="calendar">
-    <svg>...</svg>
-    <span>Calendar</span>
-  </div>
-  <div role="menuitem" data-value="settings">
-    <svg>...</svg>
-    <span>Settings</span>
-  </div>
-{% endcall %}{% endraw %}{% endset %}
-{{ code_block(raw_code, "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

@@ -1,177 +0,0 @@
----
-layout: layouts/page.njk
-title: Dialog
-description: A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.
-toc:
-  - label: Usage
-    id: usage
-    children:
-      - label: HTML
-        id: usage-html
-      - label: Jinja and Nunjucks
-        id: usage-macro
-  - label: Examples
-    id: examples
-    children:
-      - label: Scrollable content
-        id: example-scrollable-content
----
-
-{% from "macros/code_block.njk" import code_block %}
-{% from "macros/code_preview.njk" import code_preview %}
-{% from "dialog.njk" import dialog %}
-
-{% 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.",
-  trigger="Edit Profile",
-  trigger_attrs={"class": "btn-outline"},
-  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" autofocus/>
-  </div>
-  <div class="grid gap-3">
-    <label for="demo-dialog-edit-profile-username">Username</label>
-    <input type="text" value="@peduarte" id="demo-dialog-edit-profile-username" />
-  </div>
-</form>
-{% endcall %}
-{% endset %}
-
-{{ code_preview("dialog", code_html | prettyHtml) }}
-
-<h2 id="usage"><a href="#usage">Usage</a></h2>
-
-<h3 id="usage-html"><a href="#usage-html">HTML</a></h3>
-
-{{ code_block(code_html | prettyHtml, class="") }}
-
-<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 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 <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>
-      <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>
-
-<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.</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/dialog.html.jinja" target="_blank">
-    Jinja macro
-    {% lucide "arrow-right" %}
-  </a>
-  <a class="badge-outline" href="https://github.com/hunvreus/basecoat/blob/main/src/nunjucks/dialog.njk" target="_blank">
-    Nunjucks macro
-    {% lucide "arrow-right" %}
-  </a>
-</div>
-
-{% 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.",
-  trigger="Edit Profile",
-  trigger_attrs={"class": "btn-outline"},
-  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" />
-  </div>
-  <div class="grid gap-3">
-    <label for="demo-dialog-edit-profile-username">Username</label>
-    <input type="text" value="@peduarte" id="demo-dialog-edit-profile-username" />
-  </div>
-</form>
-{% endcall %}{% endraw %}{% endset%}
-{{ code_block(raw_code, "jinja") }}
-
-<h2 id="examples"><a href="#examples">Examples</a></h2>
-
-<h3 id="example-scrollable-content"><a href="#example-scrollable-content">Scrollable content</a></h3>
-
-{% set code %}
-{% set footer %}
-  <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.",
-  trigger="Scrollable Content",
-  trigger_attrs={"class": "btn-outline"},
-  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>
-  <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>
-  <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>
-  <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>
-  <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>
-  <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>
-  <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>
-  <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>
-  <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>
-  <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 %}
-{% endset %}
-{{ code_preview("dialog-scrollable-content", code | prettyHtml) }}

docs/src/components/dropdown-menu.njk

@@ -1,403 +0,0 @@
----
-layout: layouts/page.njk
-title: Dropdown Menu
-description: Displays a menu to the user — such as a set of actions or functions — triggered by a button.
-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 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
-    id: examples
-    children:
-      - label: Checkboxes
-        id: example-checkboxes
-      - label: Radio Group
-        id: example-radio-group
----
-
-{% from "macros/code_block.njk" import code_block %}
-{% from "macros/code_preview.njk" import code_preview %}
-{% from "dropdown-menu.njk" import dropdown_menu %}
-
-{% set code_html %}
-{% call dropdown_menu(
-  id="demo-dropdown-menu",
-  trigger="Open",
-  trigger_attrs={"class": "btn-outline"},
-  popover_attrs={"class": "min-w-56"}
-) %}
-<div role="group" aria-labelledby="account-options">
-  <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>
-  </div>
-  <div role="menuitem">
-    Billing
-    <span class="text-muted-foreground ml-auto text-xs tracking-widest">⌘B</span>
-  </div>
-  <div role="menuitem">
-    Settings
-    <span class="text-muted-foreground ml-auto text-xs tracking-widest">⌘S</span>
-  </div>
-  <div role="menuitem">
-    Keyboard shortcuts
-    <span class="text-muted-foreground ml-auto text-xs tracking-widest">⌘K</span>
-  </div>
-</div>
-<hr role="separator">
-<div role="menuitem">
-  GitHub
-</div>
-<div role="menuitem">
-  Support
-</div>
-<div role="menuitem" aria-disabled="true">
-  API
-</div>
-<hr role="separator">
-<div role="menuitem">
-  Logout
-  <span class="text-muted-foreground ml-auto text-xs tracking-widest">⇧⌘P</span>
-</div>
-{% endcall %}
-{% endset %}
-
-{{ code_preview("dropdown-menu", code_html | prettyHtml) }}
-
-<h2 id="usage">Usage</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/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
-    {% 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/dropdown-menu.js" target="_blank">
-    dropdown-menu.js
-    {% lucide "arrow-right" %}
-  </a>
-</div>
-
-<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>
-
-<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>
-</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/dropdown-menu.html.jinja" target="_blank">
-    Jinja macro
-    {% lucide "arrow-right" %}
-  </a>
-  <a class="badge-outline" href="https://github.com/hunvreus/basecoat/blob/main/src/nunjucks/dropdown-menu.njk" target="_blank">
-    Nunjucks macro
-    {% lucide "arrow-right" %}
-  </a>
-</div>
-
-{% set raw_code %}{% raw %}{% call dropdown_menu(
-  id="dropdown-menu",
-  trigger="Open",
-  trigger_attrs={"class": "btn-outline"},
-  popover_attrs={"class": "min-w-56"}
-) %}
-<div role="group" aria-labelledby="account-options">
-  <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>
-  </div>
-  <div role="menuitem">
-    Billing
-    <span class="text-muted-foreground ml-auto text-xs tracking-widest">⌘B</span>
-  </div>
-  <div role="menuitem">
-    Settings
-    <span class="text-muted-foreground ml-auto text-xs tracking-widest">⌘S</span>
-  </div>
-  <div role="menuitem">
-    Keyboard shortcuts
-    <span class="text-muted-foreground ml-auto text-xs tracking-widest">⌘K</span>
-  </div>
-</div>
-<hr role="separator">
-<div role="menuitem">
-  GitHub
-</div>
-<div role="menuitem">
-  Support
-</div>
-<div role="menuitem" disabled>
-  API
-</div>
-<hr role="separator">
-<div role="menuitem">
-  Logout
-  <span class="text-muted-foreground ml-auto text-xs tracking-widest">⇧⌘P</span>
-</div>
-{% endcall %}{% endraw %}{% endset%}
-{{ code_block(raw_code, "jinja") }}
-
-<h2 id="examples"><a href="#examples">Examples</a></h2>
-
-<h3 id="example-checkboxes"><a href="#example-checkboxes">Checkboxes</a></h3>
-
-{% set code %}{% call dropdown_menu(
-  id="dropdown-menu-checkboxes",
-  trigger="Open",
-  trigger_attrs={"class": "btn-outline"},
-  popover_attrs={"class": "min-w-56"}
-) %}
-<div role="group" aria-labelledby="account-options">
-  <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>
-  </div>
-  <div role="menuitem">
-    {% lucide "credit-card" %}
-    Billing
-    <span class="text-muted-foreground ml-auto text-xs tracking-widest">⌘B</span>
-  </div>
-  <div role="menuitem">
-    {% lucide "settings" %}
-    Settings
-    <span class="text-muted-foreground ml-auto text-xs tracking-widest">⌘S</span>
-  </div>
-</div>
-<hr role="separator">
-<div role="group" aria-labelledby="appearance-options">
-  <div role="heading" id="appearance-options">Appearance</div>
-  <div
-    role="menuitemcheckbox"
-    aria-checked="true"
-    class="group"
-  >
-    {% lucide "check", {
-      "class": "invisible group-aria-checked:visible",
-      "aria-hidden": "true",
-      "focusable": "false"
-    } %}
-    Status Bar
-    <span class="text-muted-foreground ml-auto text-xs tracking-widest">⇧⌘P</span>
-  </div>
-  <div
-    role="menuitemcheckbox"
-    aria-checked="false"
-    class="group"
-    aria-disabled="true"
-  >
-    {% lucide "check", {
-      "class": "invisible group-aria-checked:visible",
-      "aria-hidden": "true",
-      "focusable": "false"
-    } %}
-    Activity Bar
-    <span class="text-muted-foreground ml-auto text-xs tracking-widest">⌘B</span>
-  </div>
-  <div
-    role="menuitemcheckbox"
-    aria-checked="false"
-    class="group"
-  >
-    {% lucide "check", {
-      "class": "invisible group-aria-checked:visible",
-      "aria-hidden": "true",
-      "focusable": "false"
-    } %}
-    Panel
-    <span class="text-muted-foreground ml-auto text-xs tracking-widest">⌘S</span>
-  </div>
-</div>
-<hr role="separator">
-<div role="menuitem">
-  {% lucide "log-out" %}
-  Logout
-  <span class="text-muted-foreground ml-auto text-xs tracking-widest">⇧⌘P</span>
-</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>
-
-{% set code %}{% call dropdown_menu(
-  id="dropdown-menu-radio-group",
-  trigger="Open",
-  trigger_attrs={"class": "btn-outline"},
-  popover_attrs={"class": "min-w-56"}
-) %}
-<div role="group" aria-labelledby="position-options">
-  <span id="position-options" role="heading">Panel Position</span>
-  <hr role="separator">
-  <div
-    role="menuitemradio"
-    aria-checked="false"
-    class="group"
-  >
-    <div class="size-4 flex items-center justify-center">
-      <div
-        class="size-2 rounded-full bg-foreground invisible group-aria-checked:visible"
-        aria-hidden="true",
-        focusable="false"
-      ></div>
-    </div>
-    Status Bar
-    <span class="text-muted-foreground ml-auto text-xs tracking-widest">⇧⌘P</span>
-  </div>
-  <div
-    role="menuitemradio"
-    aria-checked="true"
-    class="group"
-  >
-    <div class="size-4 flex items-center justify-center">
-      <div
-        class="size-2 rounded-full bg-foreground invisible group-aria-checked:visible"
-        aria-hidden="true",
-        focusable="false"
-      ></div>
-    </div>
-    Activity Bar
-    <span class="text-muted-foreground ml-auto text-xs tracking-widest">⌘B</span>
-  </div>
-  <div
-    role="menuitemradio"
-    aria-checked="false"
-    class="group"
-  >
-    <div class="size-4 flex items-center justify-center">
-      <div
-        class="size-2 rounded-full bg-foreground invisible group-aria-checked:visible"
-        aria-hidden="true",
-        focusable="false"
-      ></div>
-    </div>
-    Panel
-    <span class="text-muted-foreground ml-auto text-xs tracking-widest">⌘S</span>
-  </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>
-{% endset %}
-{{ code_preview("dropdown-menu", code | prettyHtml) }}

docs/src/components/empty.njk

@@ -1,157 +0,0 @@
----
-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

@@ -1,459 +0,0 @@
----
-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,79 +0,0 @@
----
-layout: layouts/page.njk
-title: Form
-description: Building forms with Basecoat components.
-toc:
-  - label: Usage
-    id: usage
----
-
-{% from "macros/code_preview.njk" import code_preview %}
-{% from "macros/code_block.njk" import code_block %}
-
-{% set code %}<form class="form grid gap-6">
-  <div class="grid gap-2">
-    <label for="demo-form-text">Username</label>
-    <input type="text" id="demo-form-text" placeholder="hunvreus">
-    <p class="text-muted-foreground text-sm">This is your public display name.</p>
-  </div>
-
-  <div class="grid gap-2">
-    <label for="demo-form-select">Email</label>
-    <select id="demo-form-select">
-      <option value="bob@example.com">m@example.com</option>
-      <option value="alice@example.com">m@google.com</option>
-      <option value="john@example.com">m@support.com</option>
-    </select>
-    <p class="text-muted-foreground text-sm">You can manage email addresses in your email settings.</p>
-  </div>
-
-  <div class="grid gap-2">
-    <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>
-
-  <div class="grid gap-2">
-    <label for="demo-form-date">Date of birth</label>
-    <input type="date" id="demo-form-date">
-    <p class="text-muted-foreground text-sm">Your date of birth is used to calculate your age.</p>
-  </div>
-
-  <div class="flex flex-col gap-3">
-    <label for="demo-form-radio">Notify me about...</label>
-    <fieldset id="demo-form-radio" class="grid gap-3">
-      <label class="font-normal"><input type="radio" name="demo-form-radio" value="1" checked>All new messages</label>
-      <label class="font-normal"><input type="radio" name="demo-form-radio" value="2">Direct messages and mentions</label>
-      <label class="font-normal"><input type="radio" name="demo-form-radio" value="3" >Nothing</label>
-    </fieldset>
-  </div>
-
-  <section class="grid gap-4">
-    <h3 class="text-lg font-medium">Email Notifications</h3>
-    <div class="gap-2 flex flex-row items-start justify-between rounded-lg border p-4 shadow-xs">
-      <div class="flex flex-col gap-0.5">
-        <label for="demo-form-switch" class="leading-normal">Marketing emails</label>
-        <p class="text-muted-foreground text-sm">Receive emails about new products, features, and more.</p>
-      </div>
-      <input type="checkbox" id="demo-form-switch" role="switch">
-    </div>
-    <div class="gap-2 flex flex-row items-start justify-between rounded-lg border p-4 shadow-xs">
-      <div class="flex flex-col gap-0.5 opacity-60">
-        <label for="demo-form-switch-disabled" class="leading-normal">Security emails</label>
-        <p class="text-muted-foreground text-sm">Receive emails about your account security.</p>
-      </div>
-      <input type="checkbox" id="demo-form-switch-disabled" role="switch" disabled>
-    </div>
-  </section>
-
-  <button type="submit" class="btn">Submit</button>
-</form>{% endset %}
-{{ code_preview("input", code, "w-full max-w-sm") }}
-
-<h2 id="usage">Usage</h2>
-
-<section class="prose">
-  <p>Adding the <code>form</code> class to the parent of any form element (<code>&lt;label&gt;</code>, <code>&lt;input&gt;</code>, <code>&lt;textarea&gt;</code>, <code>&lt;select&gt;</code>) will automatically apply the style you would get from adding <code>label</code>, <code>input</code>, <code>textarea</code>, or <code>select</code> classes. Read more about <a href="/components/label">Label</a>, <a href="/components/input">Input</a>, <a href="/components/textarea">Textarea</a>, and <a href="/components/select">Select</a>.</p>
-</section>
-
-{{ code_block(code) }}

docs/src/components/input-group.njk

@@ -1,372 +0,0 @@
----
-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/input.njk

@@ -1,90 +0,0 @@
----
-layout: layouts/page.njk
-title: Input
-description: Displays a form input field or a component that looks like an input field.
-toc:
-  - label: Usage
-    id: usage
-  - label: Examples
-    id: examples
-    children:
-      - label: Default
-        id: example-default
-      - label: Invalid
-        id: example-invalid
-      - label: Disabled
-        id: example-disabled
-      - label: With label
-        id: example-with-label
-      - label: With text
-        id: example-with-text
-      - label: With button
-        id: example-with-button
-      - label: Form
-        id: example-form
----
-
-{% from "macros/code_preview.njk" import code_preview %}
-{% from "macros/code_block.njk" import code_block %}
-
-{% set code %}<input class="input" type="email" placeholder="Email">{% endset %}
-{{ code_preview("input", code) }}
-
-<h2 id="usage">Usage</h2>
-
-<section class="prose">
-  <p>Simply add the <code>input</code> class to your <code>&lt;input&gt;</code> element or have a parent with the <code>form</code> class (<a href="/components/form">read more about form</a>). You can also set the <code>aria-invalid</code> attribute to <code>true</code> to make the input invalid.</p>
-</section>
-
-{{ code_block(code) }}
-
-<h2 id="examples"><a href="#examples">Examples</a></h2>
-
-{{ code_preview("input-default", code) }}
-
-<h3 id="example-invalid"><a href="#example-invalid">Invalid</a></h3>
-
-{% set code %}<input class="input" type="email" placeholder="Email" aria-invalid="true">{% endset %}
-{{ code_preview("input-invalid", code) }}
-
-<h3 id="example-disabled"><a href="#example-disabled">Disabled</a></h3>
-
-{% set code %}<input class="input" type="email" placeholder="Email" disabled>{% endset %}
-{{ code_preview("input-disabled", code) }}
-
-<h3 id="example-with-label"><a href="#example-with-label">With label</a></h3>
-
-{% set code %}<div class="grid gap-3">
-  <label for="input-with-label" class="label">Label</label>
-  <input class="input" id="input-with-label" type="email" placeholder="Email">
-</div>{% endset %}
-{{ code_preview("input-with-label", code) }}
-
-<h3 id="example-with-text"><a href="#example-with-text">With text</a></h3>
-
-{% set code %}<div class="grid gap-3">
-  <label for="input-with-text" class="label">Label</label>
-  <input class="input" id="input-with-text" type="email" placeholder="Email">
-  <p class="text-muted-foreground text-sm">Fill in your email address.</p>
-</div>{% endset %}
-{{ code_preview("input-with-text", code) }}
-
-<h3 id="example-with-button"><a href="#example-with-button">With button</a></h3>
-
-{% set code %}<div class="flex items-center space-x-2">
-  <input class="input" type="email" placeholder="Email">
-  <button type="submit" class="btn">Submit</button>
-</div>{% endset %}
-{{ code_preview("textarea-form", code) }}
-
-<h3 id="example-form"><a href="#example-form">Form</a></h3>
-
-{% set code %}<form class="form space-y-6 w-full">
-  <div class="grid gap-3">
-    <label for="input-form" class="label">Username</label>
-    <input class="input" id="input-form" type="text" placeholder="hunvreus">
-    <p class="text-muted-foreground text-sm">This is your public display name.</p>
-  </div>
-  <button type="submit" class="btn">Submit</button>
-</form>{% endset %}
-{{ code_preview("input-form", code, "w-full max-w-sm") }}

docs/src/components/item.njk

@@ -1,320 +0,0 @@
----
-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

@@ -1,76 +0,0 @@
----
-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/label.njk

@@ -1,41 +0,0 @@
----
-layout: layouts/page.njk
-title: Label
-description: Renders an accessible label associated with controls.
-toc:
-  - label: Usage
-    id: usage
-  - label: Examples
-    id: examples
-    children:
-      - label: Disabled
-        id: example-disabled
----
-
-{% from "macros/code_preview.njk" import code_preview %}
-{% from "macros/code_block.njk" import code_block %}
-
-{% set code %}<label class="label gap-3">
-  <input type="checkbox" class="input">
-  Accept terms and conditions
-</label>{% endset %}
-{{ code_preview("label", code) }}
-
-<h2 id="usage">Usage</h2>
-
-<section class="prose">
-  <p>Simply add the <code>label</code> class to your <code>&lt;label&gt;</code> element or have a parent with the <code>form</code> class (<a href="/components/form">read more about form</a>). Labels' style may be affected by the presence of a disabled peer or child element.</p>
-</section>
-
-{% set code %}<label class="label" for="email">Your email address</label>{% endset %}
-{{ code_block(code) }}
-
-<h2 id="examples"><a href="#examples">Examples</a></h2>
-
-<h3 id="example-disabled"><a href="#example-disabled">Disabled</a></h3>
-
-{% set code %}<div class="grid gap-3">
-  <label class="label" for="email">Email</label>
-  <input class="input" id="email" type="email" placeholder="Email" disabled>
-</div>{% endset %}
-{{ code_preview("label-disabled", code) }}

docs/src/components/pagination.njk

@@ -1,48 +0,0 @@
----
-layout: layouts/page.njk
-title: Pagination
-description: Pagination with page navigation, next and previous links.
-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 pagination component in Basecoat.</h2>
-</div>
-
-{% set code %}<nav role="navigation" aria-label="pagination" class="mx-auto flex w-full justify-center">
-  <ul class="flex flex-row items-center gap-1">
-    <li>
-      <a href="#" class="btn-ghost">{% lucide "chevron-left" %} Previous</a>
-    </li>
-    <li>
-      <a href="#" class="btn-icon-ghost">1</a>
-    </li>
-    <li>
-      <a href="#" class="btn-icon-outline">2</a>
-    </li>
-    <li>
-      <a href="#" class="btn-icon-ghost">3</a>
-    </li>
-    <li>
-      <div class="size-9 flex items-center justify-center">{% lucide "ellipsis", { "class": "size-4 shrink-0" } %}</div>
-    </li>
-    <li>
-      <a href="#" class="btn-ghost">Next {% lucide "chevron-right" %}</a>
-    </li>
-  </ul>
-</nav>{% endset %}
-{{ code_preview("pagination", code, "max-w-md") }}
-
-<h2 id="usage"><a href="#usage">Usage</a></h2>
-
-<section class="prose">
-  <p>A pagination is fairly simple to implement with Tailwind using the Basecoat button classes:</p>
-</section>
-
-{{ code_block(code) }}

docs/src/components/popover.njk

@@ -1,174 +0,0 @@
----
-layout: layouts/page.njk
-title: Popover
-description: Displays rich content in a portal, triggered by a button.
-toc:
-  - label: Usage
-    id: usage
-    children:
-      - 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
----
-
-{% from "macros/code_preview.njk" import code_preview %}
-{% from "macros/code_block.njk" import code_block %}
-{% from "popover.njk" import popover %}
-
-{% set code_html %}
-{% call popover(
-  id="demo-popover",
-  trigger="Open popover",
-  trigger_attrs={"class": "btn-outline"},
-  popover_attrs={"class": "w-80"}
-) %}
-  <div class="grid gap-4">
-    <header class="grid gap-1.5">
-      <h4 class="leading-none font-medium">Dimensions</h4>
-      <p class="text-muted-foreground text-sm">Set the dimensions for the layer.</p>
-    </header>
-    <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" autofocus/>
-      </div>
-      <div class="grid grid-cols-3 items-center gap-4">
-        <label for="demo-popover-max-width">Max. width</label>
-        <input type="text" id="demo-popover-max-width" value="300px" class="col-span-2 h-8"/>
-      </div>
-      <div class="grid grid-cols-3 items-center gap-4">
-        <label for="demo-popover-height">Height</label>
-        <input type="text" id="demo-popover-height" value="25px" class="col-span-2 h-8"/>
-      </div>
-      <div class="grid grid-cols-3 items-center gap-4">
-        <label for="demo-popover-max-height">Max. height</label>
-        <input type="text" id="demo-popover-max-height" value="none" class="col-span-2 h-8"/>
-      </div>
-    </form>
-  </div>
-{% endcall %}
-{% endset %}
-
-{{ code_preview("popover", code_html | prettyHtml) }}
-
-<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 file</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/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
-    {% lucide "arrow-right" %}
-  </a>
-  <a class="badge-outline" href="/installation/#install-cli">
-    Use the CLI
-    {% lucide "arrow-right" %}
-  </a>
-</div>
-
-<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>
-
-<div class="prose">
-  <p>You can use the <code class="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-xs">popover()</code> Nunjucks or Jinja macro 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/popover.html.jinja" target="_blank">
-    Jinja macro
-    {% lucide "arrow-right" %}
-  </a>
-  <a class="badge-outline" href="https://github.com/hunvreus/basecoat/blob/main/src/nunjucks/popover.njk" target="_blank">
-    Nunjucks macro
-    {% lucide "arrow-right" %}
-  </a>
-</div>
-
-{% set raw_code %}{% raw %}{% call popover(
-  id="demo-popover",
-  trigger="Open popover",
-  trigger_attrs={"class": "btn-outline"},
-  popover_attrs={"class": "w-80 p-4"}
-) %}
-  <div class="grid gap-4">
-    <header class="grid gap-1.5">
-      <h4 class="leading-none font-medium">Dimensions</h4>
-      <p class="text-muted-foreground text-sm">Set the dimensions for the layer.</p>
-    </header>
-    <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"/>
-      </div>
-      <div class="grid grid-cols-3 items-center gap-4">
-        <label for="demo-popover-max-width">Max. width</label>
-        <input type="text" id="demo-popover-max-width" value="300px" class="col-span-2 h-8"/>
-      </div>
-      <div class="grid grid-cols-3 items-center gap-4">
-        <label for="demo-popover-height">Height</label>
-        <input type="text" id="demo-popover-height" value="25px" class="col-span-2 h-8"/>
-      </div>
-      <div class="grid grid-cols-3 items-center gap-4">
-        <label for="demo-popover-max-height">Max. height</label>
-        <input type="text" id="demo-popover-max-height" value="none" class="col-span-2 h-8"/>
-      </div>
-    </form>
-  </div>
-{% endcall %}{% endraw %}{% endset %}
-{{ code_block(raw_code, "jinja") }}

docs/src/components/progress.njk

@@ -1,44 +0,0 @@
----
-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/radio-group.njk

@@ -1,48 +0,0 @@
----
-layout: layouts/page.njk
-title: Radio Group
-description: A set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time.
-toc:
-  - label: Usage
-    id: usage
-  - label: Examples
-    id: examples
-    children:
-      - label: Form
-        id: example-form
----
-
-{% from "macros/code_preview.njk" import code_preview %}
-{% from "macros/code_block.njk" import code_block %}
-
-{% set code %}<fieldset class="grid gap-3">
-  <label class="label"><input type="radio" name="radio-group" value="default" class="input">Default</label>
-  <label class="label"><input type="radio" name="radio-group" value="comfortable" class="input" checked>Comfortable</label>
-  <label class="label"><input type="radio" name="radio-group" value="compact" class="input">Compact</label>
-</fieldset>{% endset %}
-{{ code_preview("radio-group", code) }}
-
-<h2 id="usage">Usage</h2>
-
-<section class="prose">
-  <p>Simply add the <code>input</code> class to your <code>&lt;input type="radio"&gt;</code> elements or have a parent with the <code>form</code> class (<a href="/components/form">read more about form</a>). You can also set the <code>aria-invalid</code> attribute to <code>true</code> to make the input invalid.</p>
-</section>
-
-{{ code_block(code) }}
-
-<h2 id="examples"><a href="#examples">Examples</a></h2>
-
-<h3 id="example-form"><a href="#example-form">Form</a></h3>
-
-{% set code %}<form class="form space-y-6 w-full">
-  <div class="flex flex-col gap-3">
-    <label for="demo-form-radio">Notify me about...</label>
-    <fieldset id="demo-form-radio" class="grid gap-3">
-      <label class="font-normal"><input type="radio" name="demo-form-radio" value="1">All new messages</label>
-      <label class="font-normal"><input type="radio" name="demo-form-radio" value="2">Direct messages and mentions</label>
-      <label class="font-normal"><input type="radio" name="demo-form-radio" value="3" >Nothing</label>
-    </fieldset>
-  </div>
-  <button type="submit" class="btn">Submit</button>
-</form>{% endset %}
-{{ code_preview("radio-group-form", code, "w-full max-w-sm") }}

docs/src/components/select.njk

@@ -1,290 +0,0 @@
----
-layout: layouts/page.njk
-title: Select
-description: Displays a list of options for the user to pick from—triggered by a button.
-toc:
-  - label: Usage
-    id: usage
-    children:
-      - label: HTML
-        id: usage-html
-      - 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
-    id: examples
-    children:
-      - label: Scrollable
-        id: example-scrollable
-      - label: Disabled
-        id: example-disabled
-      - label: With icon
-        id: example-with-icon
----
-
-{% from "macros/code_preview.njk" import code_preview %}
-{% from "macros/code_block.njk" import code_block %}
-{% from "select.njk" import select %}
-
-{% set code_native %}<select class="select w-[180px]">
-  <optgroup label="Fruits">
-    <option>Apple</option>
-    <option>Banana</option>
-    <option>Blueberry</option>
-    <option>Grapes</option>
-    <option>Pineapple</option>
-  </optgroup>
-</select>{% endset %}
-{{ code_preview("select-native", code_native) }}
-
-{% set code_html %}
-{{ 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" }
-      ]
-    }
-  ]
-) }}
-{% endset %}
-
-{% set code_script %}
-{% endset %}
-
-{{ code_preview("select", code_script | prettyHtml ~ code_html | prettyHtml) }}
-
-<h2 id="usage"><a href="#usage">Usage</a></h2>
-
-<h3 id="usage-html"><a href="#usage-html">HTML</a></h3>
-
-<section class="prose">
-  <p>If you use a <code>&lt;select&gt;</code> element, just add the <code>select</code> class to it or have a parent with the <code>form</code> class (<a href="/components/form">read more about form</a>).</p>
-</section>
-
-{{ code_block(code_native) }}
-
-<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/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
-    {% 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">
-    select.js
-    {% lucide "arrow-right" %}
-  </a>
-</div>
-
-<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="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">select()</code> Nunjucks or Jinja macro 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/dialog.html.jinja" target="_blank">
-    Jinja macro
-    {% lucide "arrow-right" %}
-  </a>
-  <a class="badge-outline" href="https://github.com/hunvreus/basecoat/blob/main/src/nunjucks/dialog.njk" target="_blank">
-    Nunjucks macro
-    {% lucide "arrow-right" %}
-  </a>
-</div>
-
-{% 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>
-
-<h3 id="example-scrollable"><a href="#example-scrollable">Scrollable</a></h3>
-
-{% set code %}
-{% call select(
-  listbox_attrs={"class": "scrollbar overflow-y-auto max-h-64"}
-) %}
-{% for i in range(0, 99) %}
-<div role="option" {% if i > 0 %}data-value="item-{{ i }}"{% endif %}>Item {{ i }}</div>
-{% endfor %}
-{% endcall %}
-{% endset %}
-
-{{ code_preview("select-scrollable", code | prettyHtml) }}
-
-<h3 id="example-disabled"><a href="#example-disabled">Disabled</a></h3>
-
-{% set code %}
-{% call select(
-  trigger_attrs={"disabled": "disabled"}
-) %}
-<div role="option" data-value="disabled">Disabled</div>
-{% endcall %}
-{% endset %}
-
-{{ code_preview("select-disabled", code | prettyHtml) }}
-
-<h3 id="example-with-icon"><a href="#example-with-icon">With icon</a></h3>
-
-{% set code %}
-{% call select(
-  id="select-with-icons",
-  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 %}
-{% endset %}
-
-{{ code_preview("select-scrollable", code | prettyHtml) }}

docs/src/components/sidebar.njk

@@ -1,219 +0,0 @@
----
-layout: layouts/page.njk
-title: Sidebar
-description: A composable, themeable and customizable sidebar component.
-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 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_block.njk" import code_block %}
-{% from "sidebar.njk" import sidebar %}
-
-<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/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
-    {% 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/sidebar.js" target="_blank">
-    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 },
-    { label: "Models", url: "#", icon: icon_bot },
-    { label: "Settings", type: "submenu", icon: icon_settings, items: [
-      { label: "General", url: "#" },
-      { label: "Team", url: "#" },
-      { label: "Billing", url: "#" },
-      { label: "Limits", url: "#" }
-    ] }
-  ]}
-] %}
-{{ sidebar(
-  label="Sidebar navigation",
-  content_attrs={
-    "class": "scrollbar"
-  },
-  menu=menu
-) }}
-<main>
-  <button type="button" onclick="document.dispatchEvent(new CustomEvent('basecoat:sidebar'))">Toggle sidebar</button>
-  <h1>Content</h1>
-</main>
-{% endset %}
-{{ 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;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>
-
-<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>
-
-<div class="prose">
-  <p>You can use the <code class="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-xs">sidebar()</code> Nunjucks or Jinja macro 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/sidebar.html.jinja" target="_blank">
-    Jinja macro
-    {% lucide "arrow-right" %}
-  </a>
-  <a class="badge-outline" href="https://github.com/hunvreus/basecoat/blob/main/src/nunjucks/sidebar.njk" target="_blank">
-    Nunjucks macro
-    {% lucide "arrow-right" %}
-  </a>
-</div>
-
-{% set raw_code %}{% raw %}{% set menu = [
-  { type: "group", label: "Getting started", items: [
-    { label: "Playground", url: "#" },
-    { label: "Models", url: "#" },
-    { label: "Settings", type: "submenu", items: [
-      { label: "General", url: "#" },
-      { label: "Team", url: "#" },
-      { label: "Billing", url: "#" },
-      { label: "Limits", url: "#" }
-    ] }
-  ]}
-] %}
-
-{{ sidebar(
-  label="Sidebar navigation",
-  menu=menu
-) }}
-<main>
-  <h1>Content</h1>
-</main>
-{% endraw %}{% endset%}
-{{ code_block(raw_code, "jinja") }}

docs/src/components/skeleton.njk

@@ -1,51 +0,0 @@
----
-layout: layouts/page.njk
-title: Skeleton
-description: Used to show a placeholder while content is loading.
-toc:
-  - label: Usage
-    id: usage
-  - label: Examples
-    id: examples
-    children:
-      - label: Card
-        id: example-card
----
-
-{% 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 skeleton component in Basecoat.</h2>
-</div>
-
-{% set code %}<div class="flex items-center gap-4">
-  <div class="bg-accent animate-pulse size-10 shrink-0 rounded-full"></div>
-  <div class="grid gap-2">
-    <div class="bg-accent animate-pulse rounded-md h-4 w-[150px]"></div>
-    <div class="bg-accent animate-pulse rounded-md h-4 w-[100px]"></div>
-  </div>
-</div>{% endset %}
-{{ code_preview("skeleton", code | prettyHtml) }}
-
-<h2 id="usage"><a href="#usage">Usage</a></h2>
-
-<p class="prose">Simply use the <code>animate-pulse</code> class to create a skeleton.</p>
-
-{{ code_block(code) }}
-
-<h2 id="examples"><a href="#examples">Examples</a></h2>
-
-<h3 id="example-card"><a href="#example-card">Card</a></h3>
-
-{% set code %}<div class="card w-full @md:w-auto @md:min-w-sm">
-  <header>
-    <div class="bg-accent animate-pulse rounded-md h-4 w-2/3"></div>
-    <div class="bg-accent animate-pulse rounded-md h-4 w-1/2"></div>
-  </header>
-  <section>
-    <div class="bg-accent animate-pulse rounded-md aspect-square w-full"></div>
-  </section>
-</div>{% endset %}
-{{ code_preview("skeleton-card", code | prettyHtml, "w-full max-w-md") }}

docs/src/components/slider.njk

@@ -1,47 +0,0 @@
----
-layout: layouts/page.njk
-title: Slider
-description: An input where the user selects a value from within a given range.
-toc:
-  - label: Usage
-    id: usage
----
-
-{% from "macros/code_preview.njk" import code_preview %}
-{% from "macros/code_block.njk" import code_block %}
-
-{% set code %}<input
-  type="range"
-  class="input w-full"
-  min="0"
-  max="100"
-  value="50"
->
-<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>{% endset %}
-{{ code_preview("slider", code, "w-full max-w-sm") }}
-
-<h2 id="usage"><a href="#usage">Usage</a></h2>
-
-<section class="prose">
-  <p>You can style an <code>&lt;input type="range"&gt;</code> element by either adding the <code>input</code> class or having a parent with the <code>form</code> class (<a href="/components/form">read more about form</a>). However, the range input also requries some Javacript code to be able to paint the left side of the slider.</p>
-</section>
-
-{{ code_block(code) }}

docs/src/components/spinner.njk

@@ -1,214 +0,0 @@
----
-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/switch.njk

@@ -1,54 +0,0 @@
----
-layout: layouts/page.njk
-title: Switch
-description: A control that allows the user to toggle between checked and not checked.
-toc:
-  - label: Usage
-    id: usage
-  - label: Examples
-    id: examples
-    children:
-      - label: Form
-        id: example-form
----
-
-{% from "macros/code_preview.njk" import code_preview %}
-{% from "macros/code_block.njk" import code_block %}
-
-{% set code %}<label class="label">
-  <input type="checkbox" name="switch" role="switch" class="input">
-  Airplane Mode
-</label>{% endset %}
-{{ code_preview("switch", code) }}
-
-<h2 id="usage"><a href="#usage">Usage</a></h2>
-
-<section class="prose">
-  <p>You can style a <code>&lt;input type="checkbox"&gt;</code> element as a switch by adding a <code>role="switch"</code> attribute, and adding the <code>input</code> class or having a parent with the <code>form</code> class (<a href="/components/form">read more about form</a>).</p>
-</section>
-
-{% set code %}<input type="checkbox" role="switch" class="input">{% endset %}
-{{ code_block(code) }}
-
-<h2 id="examples"><a href="#examples">Examples</a></h2>
-
-<h3 id="example-form"><a href="#example-form">Form</a></h3>
-
-{% set code %}<form class="form grid gap-4">
-  <h3 class="text-lg font-medium">Email Notifications</h3>
-  <div class="gap-2 flex flex-row items-start justify-between rounded-lg border p-4 shadow-xs">
-    <div class="flex flex-col gap-0.5">
-      <label for="demo-form-switch" class="leading-normal">Marketing emails</label>
-      <p class="text-muted-foreground text-sm">Receive emails about new products, features, and more.</p>
-    </div>
-    <input type="checkbox" id="demo-form-switch" role="switch">
-  </div>
-  <div class="gap-2 flex flex-row items-start justify-between rounded-lg border p-4 shadow-xs">
-    <div class="flex flex-col gap-0.5 opacity-60">
-      <label for="demo-form-switch-disabled" class="leading-normal">Marketing emails</label>
-      <p class="text-muted-foreground text-sm">Receive emails about new products, features, and more.</p>
-    </div>
-    <input type="checkbox" id="demo-form-switch-disabled" role="switch" disabled>
-  </div>
-</form>{% endset %}
-{{ code_preview("switch-form", code, "w-full") }}

docs/src/components/table.njk

@@ -1,87 +0,0 @@
----
-layout: layouts/page.njk
-title: Table
-description: A responsive table component.
-toc:
-  - label: Usage
-    id: usage
----
-
-{% from "macros/code_preview.njk" import code_preview %}
-{% from "macros/code_block.njk" import code_block %}
-
-{% set code %}<div class="overflow-x-auto">
-<table class="table">
-  <caption>A list of your recent invoices.</caption>
-  <thead>
-    <tr>
-      <th>Invoice</th>
-      <th>Status</th>
-      <th>Method</th>
-      <th>Amount</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td class="font-medium">INV001</td>
-      <td>Paid</td>
-      <td>Credit Card</td>
-      <td class="text-right">$250.00</td>
-    </tr>
-    <tr>
-      <td class="font-medium">INV002</td>
-      <td>Pending</td>
-      <td>PayPal</td>
-      <td class="text-right">$150.00</td>
-    </tr>
-    <tr>
-      <td class="font-medium">INV003</td>
-      <td>Unpaid</td>
-      <td>Bank Transfer</td>
-      <td class="text-right">$350.00</td>
-    </tr>
-    <tr>
-      <td class="font-medium">INV004</td>
-      <td>Paid</td>
-      <td>Paypal</td>
-      <td class="text-right">$450.00</td>
-    </tr>
-    <tr>
-      <td class="font-medium">INV005</td>
-      <td>Paid</td>
-      <td>Credit Card</td>
-      <td class="text-right">$550.00</td>
-    </tr>
-    <tr>
-      <td class="font-medium">INV006</td>
-      <td>Pending</td>
-      <td>Bank Transfer</td>
-      <td class="text-right">$200.00</td>
-    </tr>
-    <tr>
-      <td class="font-medium">INV007</td>
-      <td>Unpaid</td>
-      <td>Credit Card</td>
-      <td class="text-right">$300.00</td>
-    </tr>
-  </tbody>
-  <tfoot>
-    <tr>
-      <td colspan="3">Total</td>
-      <td class="text-right">$2,500.00</td>
-    </tr>
-  </tfoot>
-</table>
-</div>{% endset %}
-{{ code_preview("table", code, "w-full") }}
-
-<h2 id="usage"><a href="#usage">Usage</a></h2>
-
-<section class="prose">
-  <p>Simply add the <code>table</code> class to your table element.</p>
-</section>
-
-{% set code %}<table class="table">
-  <!-- Content of your table -->
-</table>{% endset %}
-{{ code_block(code) }}

docs/src/components/tabs.njk

@@ -1,232 +0,0 @@
----
-layout: layouts/page.njk
-title: Tabs
-description: A set of layered sections of content—known as tab panels—that are displayed one at a time.
-toc:
-  - label: Usage
-    id: usage
-    children:
-      - 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
----
-
-{% from "macros/code_preview.njk" import code_preview %}
-{% from "macros/code_block.njk" import code_block %}
-{% from "tabs.njk" import tabs %}
-
-{% set code_html %}
-{% set account_panel %}
-<div class="card">
-  <header>
-    <h2>Account</h2>
-    <p>Make changes to your account here. Click save when you're done.</p>
-  </header>
-  <section>
-    <form class="form grid gap-6">
-      <div class="grid gap-3">
-        <label for="demo-tabs-account-name">Name</label>
-        <input type="text" id="demo-tabs-account-name" value="Pedro Duarte" />
-      </div>
-      <div class="grid gap-3">
-        <label for="demo-tabs-account-username">Username</label>
-        <input type="text" id="demo-tabs-account-username" value="@peduarte" />
-      </div>
-    </form>
-  </section>
-  <footer>
-    <button type="button" class="btn">Save changes</button>
-  </footer>
-</div>
-{% endset %}
-{% set password_panel %}
-<div class="card">
-  <header>
-    <h2>Password</h2>
-    <p>Change your password here. After saving, you'll be logged out.</p>
-  </header>
-  <section>
-    <form class="form grid gap-6">
-      <div class="grid gap-3">
-        <label for="demo-tabs-password-current">Current password</label>
-        <input type="password" id="demo-tabs-password-current" />
-      </div>
-      <div class="grid gap-3">
-        <label for="demo-tabs-password-new">New password</label>
-        <input type="password" id="demo-tabs-password-new"/>
-      </div>
-    </form>
-  </section>
-  <footer>
-    <button type="button" class="btn">Save Password</button>
-  </footer>
-</div>
-{% endset %}
-{% set tabsets_demo = [
-{ tab: "Account", panel: account_panel },
-{ tab: "Password", panel: password_panel }
-] %}
-{{ tabs(
-  id='demo-tabs-with-panels',
-  tabsets=tabsets_demo,
-  main_attrs={ "class": "w-full" },
-  tablist_attrs={ "class": "w-full" }
-) }}
-{% endset %}
-
-{{ code_preview("tabs", code_html | prettyHtml, "max-w-[300px] w-full") }}
-
-<h2 id="usage"><a href="#usage">Usage</a></h2>
-
-<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/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
-    {% 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/tabs.js" target="_blank">
-    tabs.js
-    {% lucide "arrow-right" %}
-  </a>
-</div>
-
-<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>
-
-<div class="prose">
-  <p>You can use the <code class="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-xs">tabs()</code> Nunjucks or Jinja macro 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/tabs.html.jinja" target="_blank">
-    Jinja macro
-    {% lucide "arrow-right" %}
-  </a>
-  <a class="badge-outline" href="https://github.com/hunvreus/basecoat/blob/main/src/nunjucks/tabs.njk" target="_blank">
-    Nunjucks macro
-    {% lucide "arrow-right" %}
-  </a>
-</div>
-
-{% set raw_code %}{% raw %}{% set account_panel %}
-<div class="card">
-  <header>
-    <h2>Account</h2>
-    <p>Make changes to your account here. Click save when you're done.</p>
-  </header>
-  <section>
-    <form class="form grid gap-6">
-      <div class="grid gap-3">
-        <label for="demo-tabs-account-name">Name</label>
-        <input type="text" id="demo-tabs-account-name" value="Pedro Duarte" />
-      </div>
-      <div class="grid gap-3">
-        <label for="demo-tabs-account-username">Username</label>
-        <input type="text" id="demo-tabs-account-username" value="@peduarte" />
-      </div>
-    </form>
-  </section>
-  <footer>
-    <button type="button" class="btn">Save changes</button>
-  </footer>
-</div>
-{% endset %}
-
-{% set password_panel %}
-<div class="card">
-  <header>
-    <h2>Password</h2>
-    <p>Change your password here. After saving, you'll be logged out.</p>
-  </header>
-  <section>
-    <form class="form grid gap-6">
-      <div class="grid gap-3">
-        <label for="demo-tabs-password-current">Current password</label>
-        <input type="password" id="demo-tabs-password-current" />
-      </div>
-      <div class="grid gap-3">
-        <label for="demo-tabs-password-new">New password</label>
-        <input type="password" id="demo-tabs-password-new"/>
-      </div>
-    </form>
-  </section>
-  <footer>
-    <button type="button" class="btn">Save Password</button>
-  </footer>
-</div>
-{% endset %}
-
-{% set tabsets_demo = [
-{ tab: "Account", panel: account_panel },
-{ tab: "Password", panel: password_panel }
-] %}
-
-{{ tabs(
-  id='demo-tabs-with-panels',
-  tabsets=tabsets_demo,
-  main_attrs={ "class": "w-full" },
-  tablist_attrs={ "class": "w-full" }
-) }}{% endraw %}{% endset%}
-{{ code_block(raw_code, "jinja") }}

docs/src/components/textarea.njk

@@ -1,90 +0,0 @@
----
-layout: layouts/page.njk
-title: Textarea
-description: Displays a form textarea or a component that looks like a textarea.
-toc:
-  - label: Usage
-    id: usage
-  - label: Examples
-    id: examples
-    children:
-      - label: Default
-        id: example-default
-      - label: Invalid
-        id: example-invalid
-      - label: Disabled
-        id: example-disabled
-      - label: With label
-        id: example-with-label
-      - label: With text
-        id: example-with-text
-      - label: With button
-        id: example-with-button
-      - label: Form
-        id: example-form
----
-
-{% from "macros/code_preview.njk" import code_preview %}
-{% from "macros/code_block.njk" import code_block %}
-
-{% set code %}<textarea class="textarea" placeholder="Type your message here"></textarea>{% endset %}
-{{ code_preview("button", code, "w-full") }}
-
-<h2 id="usage">Usage</h2>
-
-<section class="prose">
-  <p>Simply add the <code>textarea</code> class to your <code>&lt;textarea&gt;</code> element or have a parent with the <code>form</code> class (<a href="/components/form">read more about form</a>). You can also set the <code>aria-invalid</code> attribute to <code>true</code> to make the textarea invalid.</p>
-</section>
-
-{{ code_block(code) }}
-
-<h2 id="examples"><a href="#examples">Examples</a></h2>
-
-{{ code_preview("textarea-default", code, "w-full") }}
-
-<h3 id="example-invalid"><a href="#example-invalid">Invalid</a></h3>
-
-{% set code %}<textarea class="textarea" placeholder="Type your message here" aria-invalid="true"></textarea>{% endset %}
-{{ code_preview("textarea-invalid", code, "w-full") }}
-
-<h3 id="example-disabled"><a href="#example-disabled">Disabled</a></h3>
-
-{% set code %}<textarea class="textarea" placeholder="Type your message here" disabled></textarea>{% endset %}
-{{ code_preview("textarea-disabled", code, "w-full") }}
-
-<h3 id="example-with-label"><a href="#example-with-label">With label</a></h3>
-
-{% set code %}<div class="grid gap-3">
-  <label for="textarea-with-label" class="label">Label</label>
-  <textarea id="textarea-with-label" class="textarea" placeholder="Type your message here"></textarea>
-</div>{% endset %}
-{{ code_preview("textarea-with-label", code, "w-full") }}
-
-<h3 id="example-with-text"><a href="#example-with-text">With text</a></h3>
-
-{% set code %}<div class="grid gap-3">
-  <label for="textarea-with-label" class="label">Label</label>
-  <textarea id="textarea-with-label" class="textarea" placeholder="Type your message here"></textarea>
-  <p class="text-muted-foreground text-sm">Type your message and press enter to send.</p>
-</div>{% endset %}
-{{ code_preview("textarea-with-text", code, "w-full") }}
-
-<h3 id="example-with-button"><a href="#example-with-button">With button</a></h3>
-
-{% set code %}<div class="grid gap-3">
-  <textarea id="textarea-with-label" class="textarea" placeholder="Type your message here"></textarea>
-  <button type="submit" class="btn">Submit</button>
-</div>{% endset %}
-{{ code_preview("textarea-form", code, "w-full") }}
-
-<h3 id="example-form"><a href="#example-form">Form</a></h3>
-
-{% set code %}<form class="form space-y-6">
-  <div class="grid gap-3">
-    <label for="textarea-form" class="label">Bio</label>
-    <textarea id="textarea-form" placeholder="Tell us a bit about yourself"></textarea>
-    <p class="text-muted-foreground text-sm">You can @mention other users and organizations.</p>
-  </div>
-  <button type="submit" class="btn">Submit</button>
-</form>{% endset %}
-{{ code_preview("textarea-form", code, "w-full max-w-sm") }}

docs/src/components/theme-switcher.njk

@@ -1,111 +0,0 @@
----
-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

@@ -1,279 +0,0 @@
----
-layout: layouts/page.njk
-title: Toast
-description: A succinct message that is displayed temporarily.
-toc:
-  - label: Usage
-    id: usage
-    children:
-      - label: HTML + JavaScript
-        id: usage-html-js
-        children:
-          - 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
----
-
-{% from "toast.njk" import toaster, toast %}
-{% from "macros/code_preview.njk" import code_preview %}
-{% from "macros/code_block.njk" import code_block %}
-
-{% set code_server_side %}<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_preview("toast-server-side", code_server_side, "max-w-md") }}
-
-{% set code_client_side %}<button
-  class="btn-outline"
-  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-client-side", code_client_side, "max-w-md") }}
-
-<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 file</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/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
-    {% 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/toast.js" target="_blank">
-    toast.js
-    {% lucide "arrow-right" %}
-  </a>
-</div>
-
-<h4 id="usage-html-js-2"><a href="#usage-html-js-2">Step 2: Add the toaster HTML</a></h4>
-
-<section class="prose">
-  <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>
-
-{% set code_toaster %}<div id="toaster" class="toaster"></div>{% endset %}
-{{ code_block(code_toaster | prettyHtml, "html") }}
-
-<section class="prose">
-  <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>
-
-<h4 id="usage-html-js-3"><a href="#usage-html-js-3">Step 3: Add your toasts</a></h4>
-
-<section class="prose">
-  <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_html %}<div id="toaster" class="toaster">
-  {{ toast(
-  category="success",
-  title="Success",
-  description="A success toast called from the front-end.",
-  action={
-    label: "Dismiss",
-    click: "close()"
-  }
-) }}
-</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>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>
-
-{{ code_block(code_client_side | prettyHtml, "html") }}
-
-<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">
-  <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>
-
-<h4 id="usage-html-js-5"><a href="#usage-html-js-5">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 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>
-
-<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>
-
-<div class="prose">
-  <p>You can use the <code class="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-xs">toaster()</code> and <code class="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-xs">toast()</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/toast.html.jinja" target="_blank">
-    Jinja macro
-    {% lucide "arrow-right" %}
-  </a>
-  <a class="badge-outline" href="https://github.com/hunvreus/basecoat/blob/main/src/nunjucks/toast.njk" target="_blank">
-    Nunjucks macro
-    {% lucide "arrow-right" %}
-  </a>
-</div>
-
-{% set raw_code_toaster %}{% raw %}{% from "toast.njk" import toaster %}
-{{ toaster(
-  toasts=[
-    {
-      type: "success",
-      title: "Success",
-      description: "A success toast called from the front-end.",
-      action: { label: "Dismiss", click: "close()" }
-    },
-    {
-      type: "info",
-      title: "Info",
-      description: "An info toast called from the front-end.",
-      action: { label: "Dismiss", click: "close()" }
-    }
-  ]
-) }}{% endraw %}{% endset%}
-
-{% set raw_code_toast %}{% raw %}{% from "toast.njk" import toast %}
-{{ toast(
-  title="Event has been created",
-  description="Sunday, December 03, 2023 at 9:00 AM",
-  cancel={ label: "Undo" }
-) }}{% endraw %}{% endset %}
-
-{% from "tabs.njk" import tabs %}
-{% set tabsets = [
-  { tab: "toaster()", panel: code_block(raw_code_toaster, "jinja", class="") },
-  { tab: "toast()", panel: code_block(raw_code_toast, "jinja", class="") }
-] %}
-{{ tabs(id="macros", tabsets=tabsets) }}

docs/src/components/tooltip.njk

@@ -1,53 +0,0 @@
----
-layout: layouts/page.njk
-title: Tooltip
-description: A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.
-toc:
-  - label: Usage
-    id: usage
-  - label: Examples
-    id: examples
-    children:
-      - label: Default
-        id: example-default
-      - label: Right
-        id: example-right
-      - label: Bottom + Start
-        id: example-bottom-start
----
-
-{% from "macros/code_preview.njk" import code_preview %}
-{% from "macros/code_block.njk" import code_block %}
-
-{% set code %}<button class="btn-outline" data-tooltip="Add to library">Hover</button>{% endset %}
-{{ code_preview("button", code) }}
-
-<h2 id="usage">Usage</h2>
-
-<section class="prose">
-  <p>On any element, set the value of the <code>data-tooltip</code> attribute to the text you want to display in the tooltip. Additionally, you can set:</p>
-  <ul>
-    <li><code>data-side</code> attribute to <code>top</code>, <code>bottom</code>, <code>left</code>, or <code>right</code> to change the side of the tooltip.</li>
-    <li><code>data-align</code> attribute to <code>start</code>, <code>center</code>, or <code>end</code> to change the alignment of the tooltip.</li>
-  </ul>
-</section>
-
-{% set code %}<button class="btn-outline" data-tooltip="Tooltip text" data-side="bottom" data-align="center">Bottom left</button>{% endset %}
-{{ code_block(code) }}
-
-<h2 id="examples"><a href="#examples">Examples</a></h2>
-
-<h3 id="example-default"><a href="#example-default">Default</a></h3>
-
-{% set code %}<button class="btn-outline" data-tooltip="Default tooltip">Default</button>{% endset %}
-{{ code_preview("button", code) }}
-
-<h3 id="example-right"><a href="#example-right">Right</a></h3>
-
-{% set code %}<button class="btn-outline" data-tooltip="Right side tooltip" data-side="right">Right</button>{% endset %}
-{{ code_preview("button", code) }}
-
-<h3 id="example-bottom-start"><a href="#example-bottom-start">Bottom + Start</a></h3>
-
-{% set code %}<button class="btn-outline" data-tooltip="Bottom side and start aligned tooltip" data-side="bottom" data-align="start">Bottom + Start</button>{% endset %}
-{{ code_preview("button", code) }}

docs/src/index.njk

@@ -1,336 +0,0 @@
----
-layout: layouts/layout.njk
----
-
-{% from "select.njk" import select %}
-
-<div class="max-w-screen-lg mx-auto">
-  <header class="flex flex-col gap-4">
-    <div class="flex flex-col gap-2">
-      <h1 class="text-2xl font-bold tracking-tight sm:text-3xl md:text-4xl">All of the shadcn/ui magic, none of the React</h1>
-      <p class="sm:text-lg text-muted-foreground">A components library built with Tailwind CSS that works with any web stack.</p>
-    </div>
-    <div class="flex w-full items-center justify-start gap-2 pt-2">
-      <a class="btn" href="/installation">Get Started</a>
-      <a class="btn-outline" href="/introduction">Learn more</a>
-    </div>
-  </header>
-
-  <section class="grid grid-cols-1 lg:grid-cols-2 gap-4 mt-8">
-    <div class="flex flex-col gap-4">
-      <div class="card">
-        <header>
-          <h2>Team Members</h2>
-          <p>Invite your team members to collaborate.</p>
-        </header>
-        <section>
-          <ul class="grid gap-4">
-            <li class="flex items-center gap-4">
-              <img src="/assets/images/avatar-1.png" alt="Sofia Davis" class="w-10 h-10 rounded-full" />
-              <div class="flex flex-col gap-1 mr-auto">
-                <h3 class="text-sm font-medium leading-none">Sofia Davis</h3>
-                <p class="text-sm text-muted-foreground">m@example.com</p>
-              </div>
-              
-              {{ select(
-                is_combobox=true,
-                selected="owner",
-                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" />
-              <div class="flex flex-col gap-1 mr-auto">
-                <h3 class="text-sm font-medium leading-none">Jackson Lee</h3>
-                <p class="text-sm text-muted-foreground">p@example.com</p>
-              </div>
-              
-              {{ select(
-                is_combobox=true,
-                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" />
-              <div class="flex flex-col gap-1 mr-auto">
-                <h3 class="text-sm font-medium leading-none">Isabella Nguyen</h3>
-                <p class="text-sm text-muted-foreground">i@example.com</p>
-              </div>
-              
-              {{ select(
-                is_combobox=true,
-                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>
-      </div>
-
-      <div class="card">
-        <header>
-          <h2>Cookie Settings</h2>
-          <p>Manage your cookie settings here.</p>
-        </header>
-        <section class="text-sm grid gap-6">
-          <label class="flex items-center justify-between gap-2">
-            <div class="flex flex-col gap-0.5">
-              <div class="font-medium">Strictly Necessary</div>
-              <div class="text-muted-foreground">These cookies are essential in order to use the website and use its features.</div>
-            </div>
-            <input type="checkbox" role="switch" class="input" checked />
-          </label>
-          <label class="flex items-center justify-between gap-2">
-            <div class="flex flex-col gap-0.5">
-              <div class="font-medium">Functional Cookies</div>
-              <div class="text-muted-foreground">These cookies allow the website to provide personalized functionality.</div>
-            </div>
-            <input type="checkbox" role="switch" class="input" />
-          </label>
-          <label class="flex items-center justify-between gap-2">
-            <div class="flex flex-col gap-0.5">
-              <div class="font-medium">Performance Cookies</div>
-              <div class="text-muted-foreground">These cookies help to improve the performance of the website.</div>
-            </div>
-            <input type="checkbox" role="switch" class="input" />
-          </label>
-        </section>
-        <footer>
-          <button type="button" class="btn-outline w-full">Save preferences</button>
-        </footer>
-      </div>
-
-      <div class="card">
-        <header>
-          <h2>Payment Method</h2>
-          <p>Add a new payment method to your account.</p>
-        </header>
-        <section>
-          <form class="form grid gap-6">
-            <ul class="flex gap-4">
-              <li class="flex-1">
-                <input type="radio" name="payment-method-type" id="payment-method-type-apple" class="hidden peer" />
-                <label for="payment-method-type-apple" class="text-sm font-medium leading-none flex flex-col items-center justify-between rounded-md border-2 border-muted p-4 hover:bg-muted peer-checked:border-primary [&>svg]:mb-3 [&>svg]:size-6">
-                  {% lucide "credit-card" %}
-                  Card
-                </label>
-              </li>
-              <li class="flex-1">
-                <input type="radio" name="payment-method-type" id="payment-method-type-card" class="hidden peer" />
-                <label for="payment-method-type-card" class="text-sm font-medium leading-none flex flex-col items-center justify-between rounded-md border-2 border-muted p-4 hover:bg-muted peer-checked:border-primary [&>svg]:mb-3 [&>svg]:size-6">
-                  <svg role="img" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>PayPal</title><path d="M7.016 19.198h-4.2a.562.562 0 0 1-.555-.65L5.093.584A.692.692 0 0 1 5.776 0h7.222c3.417 0 5.904 2.488 5.846 5.5-.006.25-.027.5-.066.747A6.794 6.794 0 0 1 12.071 12H8.743a.69.69 0 0 0-.682.583l-.325 2.056-.013.083-.692 4.39-.015.087zM19.79 6.142c-.01.087-.01.175-.023.261a7.76 7.76 0 0 1-7.695 6.598H9.007l-.283 1.795-.013.083-.692 4.39-.134.843-.014.088H6.86l-.497 3.15a.562.562 0 0 0 .555.65h3.612c.34 0 .63-.249.683-.585l.952-6.031a.692.692 0 0 1 .683-.584h2.126a6.793 6.793 0 0 0 6.707-5.752c.306-1.95-.466-3.744-1.89-4.906z"/></svg>
-                  Paypal
-                </label>
-              </li>
-              <li class="flex-1">
-                <input type="radio" name="payment-method-type" id="payment-method-type-paypal" class="hidden peer" />
-                <label for="payment-method-type-paypal" class="text-sm font-medium leading-none flex flex-col items-center justify-between rounded-md border-2 border-muted p-4 hover:bg-muted peer-checked:border-primary [&>svg]:mb-3 [&>svg]:size-6">
-                  <svg role="img" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Apple</title><path d="M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701"/></svg>
-                  Apple Pay
-                </label>
-              </li>
-            </ul>
-            <div class="grid gap-2">
-              <label for="payment-method-name">Name</label>
-              <input type="text" id="payment-method-name" placeholder="John Doe" />
-            </div>
-            <div class="grid gap-2">
-              <label for="payment-method-city">City</label>
-              <input type="text" id="payment-method-city" placeholder="New York" />
-            </div>
-            <div class="grid gap-2">
-              <label for="payment-method-card-number">Card Number</label>
-              <input type="text" id="payment-method-card-number" placeholder="1234 5678 9012 3456" />
-            </div>
-            <div class="flex gap-4">
-              <div class="grid gap-2 flex-1">
-                <label for="payment-method-expiration-month">Expires</label>
-                <select id="payment-method-expiration-month" class="w-full">
-                  <option value="01">January</option>
-                  <option value="02">February</option>
-                  <option value="03">March</option>
-                  <option value="04">April</option>
-                  <option value="05">May</option>
-                  <option value="06">June</option>
-                  <option value="07">July</option>
-                  <option value="08">August</option>
-                  <option value="09">September</option>
-                  <option value="10">October</option>
-                  <option value="11">November</option>
-                  <option value="12">December</option>
-                </select>
-              </div>
-              <div class="grid gap-2 flex-1">
-                <label for="payment-method-expiration-year">Year</label>
-                <select id="payment-method-expiration-year" class="w-full">
-                  <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>
-                  <option value="2030">2030</option>
-                  <option value="2031">2031</option>
-                  <option value="2032">2032</option>
-                  <option value="2033">2033</option>
-                  <option value="2034">2034</option>
-                </select>
-              </div>
-              <div class="grid gap-2 flex-1">
-                <label for="payment-method-cvv">CVV</label>
-                <input type="text" id="payment-method-cvv" placeholder="123" maxlength="4" class="w-full" />
-              </div>
-            </div>
-            <button type="button" class="btn w-full">Continue</button>
-          </form>
-        </section>
-      </div>
-    </div>
-    
-    <div class="flex flex-col gap-4">
-      <div class="card">
-        <section class="space-y-6">
-          <header class="flex items-center gap-2">
-            <img src="/assets/images/avatar-1.png" alt="Sofia Davis" class="w-10 h-10 rounded-full" />
-            <div class="flex flex-col gap-1 mr-auto">
-              <h3 class="text-sm font-medium leading-none">Sofia Davis</h3>
-              <p class="text-sm text-muted-foreground">m@example.com</p>
-            </div>
-            <button type="button" class="btn-icon-outline rounded-full" data-tooltip="New message">
-              {% lucide "plus"%}
-            </button>
-          </header>
-          <section class="space-y-4">
-            <div class="flex w-max max-w-[75%] flex-col gap-2 rounded-lg px-3 py-2 text-sm bg-muted">
-              Hi, how can I help you today?
-            </div>
-            <div class="flex w-max max-w-[75%] flex-col gap-2 rounded-lg px-3 py-2 text-sm ml-auto bg-primary text-primary-foreground">
-              Hey, I'm having trouble with my account.
-            </div>
-            <div class="flex w-max max-w-[75%] flex-col gap-2 rounded-lg px-3 py-2 text-sm bg-muted">
-              What seems to be the problem?
-            </div>
-            <div class="flex w-max max-w-[75%] flex-col gap-2 rounded-lg px-3 py-2 text-sm ml-auto bg-primary text-primary-foreground">
-              I can't log in.
-            </div>
-          </section>
-          <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>
-        </section>
-      </div>
-
-      <div class="card">
-        <header>
-          <h2>Create an account</h2>
-          <p>Enter your email below to create your account</p>
-        </header>
-        <section class="grid gap-6">
-          <div class="flex gap-6">
-            <button type="button" class="btn-outline flex-1">
-              <svg role="img" 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>
-              GitHub
-            </button>
-            <button type="button" class="btn-outline flex-1">
-              <svg role="img" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Google</title><path d="M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z"/></svg>
-              Google
-            </button>
-          </div>
-          <div class="relative">
-            <div class="absolute inset-0 flex items-center">
-              <span class="w-full border-t"></span>
-            </div>
-            <div class="relative flex justify-center text-xs uppercase">
-              <span class="bg-card px-2 text-muted-foreground">Or continue with</span>
-            </div>
-          </div>
-          <form class="form grid gap-6">
-            <div class="grid gap-2">
-              <label for="demo-card-form-email">Email</label>
-              <input type="email" id="demo-card-form-email">
-            </div>
-            <div class="grid gap-2">
-              <div class="flex items-center gap-2">
-                <label for="demo-card-form-password">Password</label>
-                <a href="#" class="ml-auto inline-block text-sm underline-offset-4 hover:underline">Forgot your password?</a>
-              </div>
-              <input type="password" id="demo-card-form-password">
-            </div>
-            <button type="button" class="btn w-full">Create an account</button>
-          </form>
-        </section>
-      </div>
-
-      <div class="card">
-        <header>
-          <h2>Report an issue</h2>
-          <p>What area are you having problems with?</p>
-        </header>
-        <section>
-          <form class="form grid gap-6">
-            <div class="flex gap-4">
-              <div class="grid gap-2 flex-1">
-                <label for="report-issue-area">Area</label>
-                <select id="report-issue-area" class="w-full">
-                  <option value="team">Team</option>
-                  <option value="billing">Billing</option>
-                  <option value="account">Account</option>
-                  <option value="deployments">Deployments</option>
-                  <option value="support">Support</option>
-                </select>
-              </div>
-              <div class="grid gap-2 flex-1">
-                <label for="report-issue-security-level">Security Level</label>
-                <select id="report-issue-security-level" class="w-full">
-                  <option value="1">Severity 1 (Highest)</option>
-                  <option value="2">Severity 2</option>
-                  <option value="3">Severity 3</option>
-                  <option value="4">Severity 4 (Lowest)</option>
-                </select>
-              </div>
-            </div>
-            <div class="grid gap-2">
-              <label for="report-issue-subject">Subject</label>
-              <input type="text" id="report-issue-subject" placeholder="I need help with..." class="w-full" />
-            </div>
-            <div class="grid gap-2">
-              <label for="report-issue-description">Description</label>
-              <textarea id="report-issue-description" placeholder="Please include all information relevant to your issue." class="w-full"></textarea>
-            </div>
-            <footer class="flex items-center gap-4 justify-between">
-              <button type="button" class="btn-sm-ghost">Cancel</button>
-              <button type="button" class="btn-sm">Continue</button>
-            </footer>
-          </form>
-        </section>
-      </div>
-    </div>
-  </section>
-</div>

docs/src/installation.njk

@@ -1,274 +0,0 @@
----
-layout: layouts/page.njk
-title: Installation
-description: How to install and use Basecoat in your app.
-toc:
-  - 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-npm-tailwind
-      - label: Add Basecoat
-        id: install-npm-basecoat
-      - label: Import basecoat in your CSS
-        id: install-npm-import
-      - label: (Optional) Add JavaScript files
-        id: install-npm-js
-      - label: That's it
-        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-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">
-    <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-npm-basecoat"><a href="#install-npm-basecoat">Add Basecoat</a></h3>
-    <div class="prose">
-      <p>Add Basecoat to your Tailwind CSS file.</p>
-    </div>
-    {% set code_npm %}npm install basecoat-css{% endset %}
-    {% set code_pnpm %}pnpm add basecoat-css{% endset %}
-    {% set code_bun %}bun add basecoat-css{% endset %}
-    {% set code_yarn %}yarn add basecoat-css{% endset %}
-    {% set tabsets = [
-      { tab: "npm", panel: code_block(code_npm, class="") },
-      { tab: "pnpm", panel: code_block(code_pnpm, class="") },
-      { tab: "bun", panel: code_block(code_bun, class="") },
-      { tab: "yarn", panel: code_block(code_yarn, class="") }
-    ] %}
-    {{ tabs(id="npm-install", tabsets=tabsets) }}
-    <div class="prose">
-      <p>Alternatively, you can directly <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.</p>
-    </div>
-  </li>
-  <li class="step mt-8">
-    <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-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/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>
-    </div>
-  </li>
-</ol>
-
-<h2 id="install-js"><a href="#install-js">Components with JavaScript</a></h2>
-
-<div class="prose">
-  <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><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>
-</div>
-
-<h2 id="install-cli"><a href="#install-cli">Use the CLI</a></h2>
-
-<div class="prose">
-  <p>If you're using Nunjucks or Jinja, you can use the CLI to install the CSS and macros for any of the complex components(e.g. <a href="/components/dialog">Dialog</a>). It will copy the JS and <code>.html.jinja</code> or <code>.njk</code> macros into your code.</p>
-  <p>For example, to add the Dialog component, run one of the following commands:</p>
-</div>
-
-{% set code_npm_exec %}npx basecoat-cli add dialog{% endset %}
-{% set code_pnpm_exec %}pnpm dlx basecoat-cli add dialog{% endset %}
-{% set code_bun_exec %}bunx basecoat-cli add dialog{% endset %}
-{% set code_yarn_exec %}yarn dlx basecoat-cli add dialog{% endset %}
-{% set exec_tabsets = [
-  { tab: "npm", panel: code_block(code_npm_exec, class="") },
-  { tab: "pnpm", panel: code_block(code_pnpm_exec, class="") },
-  { tab: "bun", panel: code_block(code_bun_exec, class="") },
-  { tab: "yarn", panel: code_block(code_yarn_exec, class="") }
-] %}
-{{ 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>
-</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>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>
-</div>
-
-  {% set code %}{% raw %}{% call select() %}
-<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 %}
-  {{ 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>
-
-<div class="prose">
-  <p>You can import any <a href="https://shadcn-ui.com" target="_blank">shadcn/ui</a> compatible theme (e.g. <a href="https://tweakcn.com" target="_blank">tweakcn</a>). For example:</p>
-  <ul>
-    <li>Go to <a href="https://ui.shadcn.com/themes" target="_blank">ui.shadcn.com/themes</a> and select a theme.</li>
-    <li>Click "Copy code" and save the theme variables in a file (e.g. <code>theme.css</code>).</li>
-    <li>
-      Import the theme in your CSS file:
-      {% set code %}@import "tailwindcss";
-@import "basecoat-css";
-@import "./theme.css";{% endset %}
-      {{ code_block(code, "css") }}
-    </li>
-  </ul>
-</div>
-
-<div class="flex flex-wrap gap-2 my-6">
-  <a class="badge-outline" href="https://ui.shadcn.com/docs/theming" target="_blank">
-    About shadcn/ui theming
-    {% lucide "arrow-right" %}
-  </a>
-</div>
-
-<h2 id="install-customization"><a href="#install-manual">Customization</a></h2>
-
-<div class="prose">
-  <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") }}
-
-  <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 "./custom.css";{% endset %}
-  {{ code_block(code, "css") }}
-  
-  <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

@@ -1,63 +0,0 @@
----
-layout: layouts/page.njk
-title: Introduction
-description: Basecoat is a set of components built with Tailwind CSS. It is designed to be used with any traditional web stack 
-toc:
-  - label: Why Basecoat?
-    id: why
-  - label: How it works
-    id: how-it-works
-  - label: How can I help?
-    id: how-can-i-help
----
-
-<h2 id="why"><a href="#why">Why Basecoat?</a></h2>
-
-<div class="prose">
-  <p><b>Basecoat brings the magic of <a href="https://ui.shadcn.com/">shadcn/ui</a> to any traditional web stack: no React required.</b></p>
-
-  <p>Tailwind won. But building UIs with utility classes alone kinda sucks. Most Tailwind libraries like Flowbite, Preline, or even Tailwind UI ask you to copy walls of unreadable classes into your HTML. It works, but it's messy and hard to maintain.</p>
-
-  <p>shadcn/ui avoids that by wrapping everything in React components. It also gives you a killer design system, theme support, a CLI, and a growing ecosystem.</p>
-
-  <p>But maybe you're not using React. Maybe your app is built with plain HTML. Or Flask. Or Rails. Or Laravel. Or Django. Or whatever.</p>
-
-  <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 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>
-    <li><b>Dark mode ready</b>: respects your Tailwind config.</li>
-    <li><b>Extendable</b>: tweak styles with Tailwind or CSS variables.</li>
-    <li><b>Themable</b>: fully compatible with shadcn/ui themes.</li>
-    <li><b>Readable</b>: no class soup, just clean markup.</li>
-    <li><b>Free and open source</b>: MIT licensed.</li>
-  </ul>
-</div>
-
-<h2 id="how-it-works"><a href="#how-it-works">How it works</a></h2>
-
-<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 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>
-
-  <p><a href="/installation">Check out the installation guide</a> to get started.</p>
-</div>
-
-<h2 id="how-can-i-help"><a href="#how-can-i-help">How can I help?</a></h2>
-
-<div class="prose">
-  <p>Basecoat is 100% open source and free.</p>
-
-  <ul>
-    <li><a href="https://github.com/hunvreus/basecoat">Star it on GitHub</a></li>
-    <li><a href="https://github.com/hunvreus/basecoat/issues">Report bugs or request features</a></li>
-    <li><a href="https://github.com/hunvreus/basecoat/pulls">Submit a pull request</a></li>
-    <li><a href="https://github.com/sponsors/hunvreus">Sponsor the project</a></li>
-  </ul>
-</div>

docs/src/kitchen-sink.njk

@@ -1,52 +0,0 @@
----
-layout: layouts/layout.njk
-title: Kitchen Sink
-description: A collection of all the components available in Basecoat.
----
-{% set components = [
-  { label: "Accordion", id: "accordion" },
-  { label: "Alert", id: "alert" },
-  { label: "Alert Dialog", id: "alert-dialog" },
-  { label: "Avatar", id: "avatar" },
-  { label: "Badge", id: "badge" },
-  { label: "Breadcrumb", id: "breadcrumb" },
-  { label: "Button", id: "button" },
-  { label: "Card", id: "card" },
-  { label: "Checkbox", id: "checkbox" },
-  { label: "Combobox", id: "combobox" },
-  { label: "Dialog", id: "dialog" },
-  { label: "Dropdown Menu", id: "dropdown-menu" },
-  { label: "Form", id: "form" },
-  { label: "Input", id: "input" },
-  { label: "Label", id: "label" },
-  { label: "Pagination", id: "pagination" },
-  { label: "Popover", id: "popover" },
-  { label: "Radio Group", id: "radio-group" },
-  { label: "Select", id: "select" },
-  { label: "Skeleton", id: "skeleton" },
-  { label: "Slider", id: "slider" },
-  { label: "Switch", id: "switch" },
-  { label: "Table", id: "table" },
-  { label: "Tabs", id: "tabs" },
-  { label: "Textarea", id: "textarea" },
-  { label: "Toast", id: "toast" },
-  { label: "Tooltip", id: "tooltip" }
-] %}
-
-<div class="flex gap-x-10 justify-center">
-  <div>
-    <header class="space-y-2 mb-8">
-      <h1 class="text-3xl font-semibold tracking-tight">{{ title }}</h1>
-      <p class="text-muted-foreground">{{ description }}</p>
-    </header>
-    <div class="grid gap-4 flex-1">
-      {% for component in components %}
-        {% include "partials/kitchen-sink/" ~ component.id ~ ".njk" %}
-      {% endfor %}
-    </div>
-  </div>
-  <div class="hidden text-sm xl:block w-full max-w-[200px]">
-    {% from "macros/toc.njk" import toc_nav %}
-    {{ toc_nav(components) }}
-  </div>
-</div>