{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "dependencies": [], "description": "Native
/ accordion with ZERO JavaScript: expand/collapse, keyboard, and semantics are the browser's; exclusive groups via the native name attribute; open/close animation via ::details-content + interpolate-size (progressive enhancement). The header part supplies the APG-required role=heading wrapper at a consumer-chosen level. Server-component safe.", "files": [ { "content": "/**\n * heidi-ui Accordion — ZERO JavaScript (docs/HEIDI-UI.md § 2). Native\n *
/: expand/collapse, keyboard, and semantics are the\n * browser's; exclusive groups are the native `name` attribute; open/close\n * animation is ::details-content in accordion.base.css (progressive\n * enhancement). Because it ships no client JS, this renders in Server\n * Components — the Accordion.X namespace object is safe from RSC too.\n *\n * Composition: className / style / ref everywhere, plus render on Root,\n * Header, and Content. Item and Trigger intentionally stay native\n *
/; polymorphing either would destroy zero-JS behavior.\n * Structural CSS: accordion.base.css. Theme: accordion.theme.css.\n *\n * NOTE: the `name` is DOCUMENT-GLOBAL (native
), not scoped\n * to a Root — give each accordion group on a page a unique name.\n */\n\nimport type {\n DetailsHTMLAttributes,\n HTMLAttributes,\n ReactNode,\n Ref\n} from \"react\";\nimport {\n renderHeidiElement,\n type HeidiHostProps\n} from \"../_internal/render-element\";\nimport { ACCORDION_CLASSES } from \"./accordion.classes.generated\";\n\ntype AccordionEmptyState = Record;\ntype AccordionNativeHostProps = Omit, \"render\">;\ntype AccordionNativeProps = Omit<\n Props,\n \"children\" | \"className\" | \"ref\" | \"style\"\n>;\n\nexport type AccordionRootProps = HeidiHostProps &\n AccordionNativeProps> & {\n children?: ReactNode;\n ref?: Ref;\n};\n\nexport function AccordionRoot({\n children,\n className,\n ref,\n render,\n style,\n ...nativeProps\n}: AccordionRootProps) {\n return renderHeidiElement({\n className: ACCORDION_CLASSES.root,\n dataPart: \"accordion-root\",\n element: \"div\",\n props: { ...nativeProps, children, ref },\n renderProps: { className, render, style },\n state: {}\n });\n}\n\n/** Item stays a native
; replacing it would destroy zero-JS behavior. */\nexport type AccordionItemProps = AccordionNativeHostProps & {\n children?: ReactNode;\n /**\n * Same name across sibling items = native exclusive group (opening one\n * closes the others). DOCUMENT-GLOBAL — unique per group on the page.\n */\n name?: string;\n /**\n * Initially open (native `open` attribute). The browser owns live state\n * after render; style interactive state with the native `[open]` selector.\n */\n open?: boolean;\n ref?: Ref;\n} & AccordionNativeProps<\n Omit, \"name\" | \"open\">\n >;\n\nexport function AccordionItem({\n children,\n className,\n name,\n open,\n ref,\n style,\n ...nativeProps\n}: AccordionItemProps) {\n return renderHeidiElement({\n className: ACCORDION_CLASSES.item,\n dataPart: \"accordion-item\",\n element: \"details\",\n props: {\n ...nativeProps,\n children,\n name,\n ...(open !== undefined ? { open } : {}),\n ref\n },\n renderProps: { className, style },\n state: {}\n });\n}\n\n/** Trigger stays a native and must be the Item's first child. */\nexport type AccordionTriggerProps = AccordionNativeHostProps & {\n children?: ReactNode;\n ref?: Ref;\n} & AccordionNativeProps>;\n\nexport function AccordionTrigger({\n children,\n className,\n ref,\n style,\n ...nativeProps\n}: AccordionTriggerProps) {\n return renderHeidiElement({\n className: ACCORDION_CLASSES.trigger,\n dataPart: \"accordion-trigger\",\n element: \"summary\",\n props: { ...nativeProps, children, ref },\n renderProps: { className, style },\n state: {}\n });\n}\n\n/** APG heading levels — the correct one depends on the page's outline. */\nexport type AccordionHeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;\n\nconst ACCORDION_HEADING_ELEMENTS = {\n 1: \"h1\",\n 2: \"h2\",\n 3: \"h3\",\n 4: \"h4\",\n 5: \"h5\",\n 6: \"h6\"\n} as const satisfies Record;\n\n/**\n * The APG heading wrapper for a section title: \"Each accordion header button\n * is wrapped in an element with role heading that has a value set for\n * aria-level that is appropriate for the information architecture of the\n * page\" (https://www.w3.org/WAI/ARIA/apg/patterns/accordion/). Without it an\n * accordion is invisible to the heading rotor, the primary AT affordance for\n * this pattern.\n *\n * ponytail: the heading sits INSIDE the , inverting the Radix/Base\n * nesting (Header > Trigger). It is not a style choice — HTML requires\n * to be the FIRST child of
, so nothing can wrap it\n * without destroying native disclosure. `` accepts heading content\n * by spec, and Chromium exposes the inner h1–h6 as a real, non-ignored\n * heading node with the right level while the summary keeps its\n * DisclosureTriangle role (verified against the smoke's own AX-tree probe).\n * Rejected: (a) a JS accordion with