# HTMX Showcase — Validation Harness

Parallel to `app/page.tsx` (the React showcase), `public/htmx.html` is a plain HTML page that exercises the generated `dist/greyhaven.htmx.css` across every static component. Load it while running `pnpm dev` at `/htmx.html`.

## Purpose

Validate that `greyhaven.htmx.css` produces visually-equivalent output to the React components. The HTMX page only uses:
- `data-slot` / `data-variant` / `data-size` attributes
- Standard HTML tags (`<button>`, `<span>`, `<input>`, `<div>`)
- Inline SVGs for icons (no lucide-react)

No React, no JavaScript (apart from the theme toggle).

## Build

```bash
pnpm htmx-css:build      # Regenerate dist/greyhaven.htmx.css from components/ui/*.tsx
pnpm htmx-demo:build     # Compile htmx-demo/input.css + tokens + htmx.css → public/htmx.css
pnpm dev                 # Serves /htmx.html at http://localhost:3000/htmx.html
```

## What's covered

- Typography (H1/H2/H3 + body + UI label)
- Button — variants (6), sizes (3), states (5), icon sizes (3)
- Badge — core (4), tag/value (2), semantic (4), channel pills (5), on-muted-surface (6)
- Input + Textarea (default / with value / disabled) + Label
- Card (simple + with header/action/content/footer)
- Alert (default + destructive)
- Separator, Progress, Skeleton, Kbd

## What's intentionally out of scope

- Interactive components (Dialog, Dropdown, Popover, Select, Combobox, Accordion, Tabs, Tooltip) — their CSS rules exist in `greyhaven.htmx.css` but require Alpine.js or HTMX swap patterns for open/close state. Validate those in a separate runtime-integration test.
- Form Control primitives with JS state (Checkbox, Switch, RadioGroup, Slider) — Radix renders these with bespoke markup the CSS targets via `data-state=checked`. Native `<input type="checkbox">` won't match without additional bridging.