Exclusive Accordion

1/** @jsxImportSource hono/jsx */
2import type { PropsWithChildren } from "hono/jsx"
3import { cn, type ClassValue } from "@/registry/lib/cn"
4 
5// Exclusive Accordion — shadcn-htmx, htmx v4 + Tailwind v4.
6//
7// The scriptless, single-open accordion. Several <details> elements share one
8// `name` attribute, so the browser keeps exactly one open at a time: opening
9// any item auto-closes the others. This is the pure-HTML exclusive variant of
10// the APG-scripted accordion — ZERO JavaScript, no boot script, no site.js.
11//
12// shadcn upstream uses Radix Accordion (a JS state machine wiring buttons +
13// regions with aria-expanded / aria-controls). We let the platform do it:
14//   - Click / Space / Enter toggles open (browser default on <summary>).
15//   - <summary> is implicitly role="button", focusable, with its text as the
16//     accessible name; the browser sets aria-expanded to mirror `open`.
17//   - <details name="..."> makes the group mutually exclusive natively. Per the
18//     HTML spec, if more than one grouped item carries `open`, only the FIRST
19//     in source order renders open — so we never produce an invalid state.
20//
21// This component differs from registry/ui/accordion.tsx (type="single"), which
22// assigns the grouping `name` at runtime via public/site.js and layers the APG
23// arrow-key contract on top. ExclusiveAccordion renders the `name` straight
24// into the server HTML, so the exclusivity survives with JS disabled and there
25// is no keyboard contract beyond what <summary> ships natively (Tab to focus,
26// Enter / Space to toggle). That makes it the right pick for progressive-
27// enhancement-first surfaces (docs FAQs, server-rendered settings panels).
28//
29// Refs:
30//   repos/mdn/files/en-us/web/html/reference/elements/details/index.md
31//     (`name` attribute — "give multiple <details> the same name value to
32//      group them. Only one of the grouped <details> can be open at a time …
33//      if multiple are given `open`, only the first in source order renders
34//      open." Also: `open` boolean, the `toggle` event, implicit role=group.)
35//   repos/mdn/files/en-us/web/html/reference/elements/summary/index.md
36//     (click / Space toggles parent <details>; display:list-item marker.)
37//   repos/aria-practices/content/patterns/accordion/ (the scripted contract we
38//     deliberately do NOT emulate here — see the note above.)
39//   repos/aria-practices/content/patterns/disclosure/ (native <details> is a
40// … truncated