Accordion

1/** @jsxImportSource hono/jsx */
2import type { PropsWithChildren } from "hono/jsx"
3import { cn, type ClassValue } from "@/registry/lib/cn"
4 
5// Accordion — shadcn-htmx, htmx v4 + Tailwind v4.
6//
7// shadcn upstream uses Radix Accordion. We use the native HTML
8//   <details><summary>...</summary>...</details>
9// so the platform gives us:
10//   - Click / Space / Enter toggles open (browser default).
11//   - aria-expanded mirrors the open attribute (browser-set on <summary>).
12//   - <summary> is implicitly role="button" with accessible name from text.
13//
14// Native `<details name="...">` attribute (HTML Living Standard) makes the
15// group exclusive — opening one item closes the others, no JS required.
16// We use that for `type="single"`. For `type="multiple"` (the default) we
17// omit the name attribute and every item can be expanded independently.
18//
19// Public/site.js adds the APG keyboard contract on top:
20//   - Down/Up Arrow: move focus between summaries in the same accordion.
21//   - Home / End: focus first / last summary.
22//
23// Refs:
24//   repos/mdn/files/en-us/web/html/reference/elements/details/index.md
25//   repos/mdn/files/en-us/web/html/reference/elements/summary/index.md
26//   repos/aria-practices/content/patterns/accordion/
27 
28export type AccordionType = "single" | "multiple"
29 
30type AccordionProps = PropsWithChildren<{
31  // Required so the exclusive-accordion `name` attribute can scope items.
32  id: string
33  type?: AccordionType
34  class?: ClassValue
35}>
36 
37export function Accordion(props: AccordionProps) {
38  const { id, type = "multiple", class: className, children } = props
39  return (
40    <div
41      id={id}
42      data-slot="accordion"
43      data-accordion
44      data-type={type}
45      data-group-name={type === "single" ? id : undefined}
46      class={cn("w-full", className)}
47    >
48      {children}
49    </div>
50  )
51}
52 
53type AccordionItemProps = PropsWithChildren<{
54  // Distinct value per item. Emitted as the `data-value` attribute so each
55  // item is individually identifiable; the boot script does not derive any
56  // aria-controls wiring from it. (Native <details>/<summary> is a disclosure
57  // widget where aria-controls is optional per the WAI-ARIA Disclosure
58  // pattern — repos/aria-practices/content/patterns/disclosure/.)
59  value: string
60  // Pre-open this item on initial render.
61  open?: boolean
62  disabled?: boolean
63  class?: ClassValue
64}>
65 
66export function AccordionItem(props: AccordionItemProps) {
67// … truncated