Cascading Select

1/** @jsxImportSource hono/jsx */
2import type { Child, PropsWithChildren } from "hono/jsx"
3import { cn, type ClassValue } from "@/registry/lib/cn"
4 
5// Cascading Select — shadcn-htmx, htmx v4 + Tailwind v4.
6//
7// A pair of dependent native <select>s: picking the parent (e.g. car make)
8// reloads the child's <option>s (e.g. model) — and, optionally, a detail
9// panel — from the server. One request, two updates: the response swaps the
10// child options into the target, and a second fragment carrying
11// hx-swap-oob updates the detail panel "out of band".
12//
13// Built on:
14//   repos/htmx/www/src/content/patterns/02-forms/04-linked-selects.md
15//     The canonical linked-selects recipe: parent <select hx-get hx-target>
16//     swaps a fresh <option> list into the child; a detail card rides along.
17//   repos/htmx/www/src/content/reference/01-attributes/06-hx-trigger.md:32-37
18//     htmx defaults the trigger to `change` for <select>, so NO hx-trigger is
19//     needed — choosing an option fires the request.
20//   repos/htmx/www/src/content/reference/01-attributes/13-hx-swap-oob.md
21//     hx-swap-oob="true" on the detail fragment swaps it into #<id>-detail by
22//     id, piggybacking a second update onto the same response.
23//   repos/htmx/www/src/content/reference/01-attributes/07-hx-swap.md
24//     default swap is innerHTML — the returned <option>s replace the child's
25//     contents; hx-include carries the parent value with the request.
26//
27// Native semantics (the whole control is two real <select>s in a <fieldset>):
28//   repos/mdn/files/en-us/web/html/reference/elements/select/index.md
29//   repos/mdn/files/en-us/web/html/reference/elements/option/index.md
30//   repos/mdn/files/en-us/web/html/reference/elements/fieldset/index.md
31//     The <fieldset> + <legend> groups the related controls for AT. Each
32//     <select> brings keyboard control, type-to-search, mobile pickers, and
33//     form submission with zero JS. With htmx off the parent still submits
34//     its value in a normal form post — progressive enhancement, not emulation.
35//
36// JS budget: NONE. The cascade is htmx's default `change` trigger + an OOB
37// swap; there is no site.js for this component.
38//
39// Style analogues: registry/ui/select.tsx (the chevron-overlaid native
40// <select>, classes mirrored verbatim) and registry/ui/edit-in-place.tsx
41// (server-fragment composite returning bare <option>/<div> partials).
42 
43// Mirrors registry/ui/select.tsx `triggerBase` verbatim so a cascading
44// … truncated