- Make React-derivation explicit: the HTMX theme is generated from
components/ui/*.tsx; never edit dist/greyhaven.htmx.css by hand.
- Fix stale CSS example: update @layer components → @layer utilities and
show the :where() zero-specificity wrappers the generator now emits.
- Add "Maintenance — what to do when React changes" with explicit commands
for cva tweaks, new components, generator bugs, and token updates.
- Point consumers to public/htmx.html as the 1:1 reference implementation
and to GAPS.md for the generator edge-case log.
- Scope section updated: call out the vanilla-JS bridge that ships with
public/htmx.html for checkbox/switch/tabs/toggle-group, separate from
the positioning-heavy components that still need Alpine.
- Scripts Reference: add pnpm htmx-demo:build.
Generator (scripts/generate-htmx-css.ts): track `viaVariants` per slot so
slots that compose another component's variant system (e.g. ToggleGroupItem
via toggleVariants) inherit the referenced CVA's base + variant rules under
their own selector. Previously toggle-group-item's CSS contained only its
override classes, shipping with no padding/height/hover/active state.
Toggle (components/ui/toggle.tsx):
- data-[state=on] now uses bg-primary (orange) instead of bg-accent (grey),
matching every other "commit" affordance in the palette.
- Horizontal padding aligned with Button: px-4/px-3/px-6 per size, plus
has-[>svg]:px-* for icon-only toggles.
ToggleGroup (components/ui/toggle-group.tsx): drop min-w-0 flex-1 shrink-0
from the item override. Items now size to content instead of being clamped
into equal narrow columns where longer labels overflowed the bg box.
Showcase: add ToggleGroup section to the React page (component-matrix.tsx)
and 1:1 HTMX mirror (public/htmx.html) with a new JS bridge branch for
single/multi-select. compare-all.sh extended with the new section; 22/22
pass at ≥99.97%.
Docs: GAPS.md captures the generator gap, overflow root cause, color
rationale, and padding parity with before/after numbers.
