{
  "name": "Accordion",
  "source": "src/components/Accordion.tsx",
  "propsType": "AccordionProps",
  "description": "Accordion — sections that collapse, with the heading structure intact.\n\nWHY THE TRIGGER IS A BUTTON INSIDE A HEADING\n\nBoth parts are load-bearing and the obvious implementations drop one of them.\nThe heading is how a screen-reader user navigates a long page — pressing `h`\nmoves between sections, and an accordion built from `div`s removes every one\nof those stops. The button is what makes the section operable by keyboard and\nannounced as expandable; a heading with a click handler is neither.\n\nSo the shape is `<h3><button aria-expanded aria-controls>`, which is the only\narrangement that keeps document structure AND operability.\n\n`headingLevel` is a prop with no safe default beyond 3, because the right\nlevel depends on the document around it and nothing here can see that. Two\naccordions at the wrong level produce a page whose outline is nonsense while\nlooking perfectly fine.\n\nTHE PANEL IS NOT UNMOUNTED\n\nCollapsed sections keep their DOM and are hidden with `hidden`. Unmounting\nwould lose form state in a collapsed section — the classic multi-step-form\nbug where answers vanish when a section is folded away — and would break\nin-page search, which cannot find text that is not there.",
  "import": "import { Accordion } from 'ionbase-ui';",
  "status": "stable",
  "summary": "Sections that collapse, with the document's heading structure intact. Holds the open set and the heading level.",
  "useWhen": [
    "a page has several long sections and most users need one of them",
    "optional or advanced settings should be present but not in the way",
    "an FAQ or a reference list where scanning titles is the primary action"
  ],
  "useInstead": [
    {
      "when": "the sections are alternatives and only one is ever relevant",
      "use": "Tabs",
      "why": "tabs say \"pick one\"; an accordion says \"all of these exist, open what you need\""
    },
    {
      "when": "hiding the content would hide something the user must act on",
      "use": "render it directly",
      "why": "a required field inside a collapsed section is a form that cannot be completed without exploration"
    }
  ],
  "slots": {
    "children": {
      "accepts": "AccordionItem"
    }
  },
  "a11y": {
    "requires": [
      "`headingLevel` that fits the surrounding document — the default of 3 is a guess this component cannot verify"
    ],
    "notes": [
      "each section's trigger is a button inside a heading, which is the only arrangement that keeps both document structure and operability",
      "collapsed panels are hidden rather than unmounted, so form state survives and in-page search still finds the text"
    ]
  },
  "antiPatterns": [
    {
      "dont": "allowsMultiple on a long FAQ",
      "do": "leave it off, so opening one section closes the last",
      "why": "with every section openable at once the page has no maximum height, and a user who opens six is scrolling a wall of text looking for the one they wanted. Reach for it when sections are settings or reference material a user may need to compare side by side"
    },
    {
      "dont": "headingLevel left at 3 inside a section already under an h4",
      "do": "headingLevel={5}",
      "why": "the page looks correct and its outline is nonsense — a heading-level jump is invisible to sighted users and disorienting to everyone navigating by headings"
    },
    {
      "dont": "an accordion holding a single section",
      "do": "a heading and the content",
      "why": "one collapsible section is a control that exists to hide the only thing on screen"
    }
  ],
  "stylesheet": "src/styles/accordion.css",
  "tokens": [
    "--border-focus",
    "--border-subtle",
    "--border-width-default",
    "--border-width-thick",
    "--font-family-sans",
    "--font-weight-medium",
    "--icon-disabled",
    "--icon-secondary",
    "--icon-size-md",
    "--ion-duration-base",
    "--ion-ease-out",
    "--radius-xs",
    "--spacing-12",
    "--spacing-16",
    "--spacing-4",
    "--text-default",
    "--text-disabled",
    "--text-primary",
    "--text-secondary",
    "--type-body",
    "--type-body-line-height"
  ],
  "props": {
    "allowsMultiple": {
      "type": "boolean | undefined",
      "required": false,
      "origin": "own",
      "description": "Let more than one section be open at once."
    },
    "defaultExpandedKeys": {
      "type": "string[] | undefined",
      "required": false,
      "origin": "own",
      "description": "Uncontrolled: which sections start open."
    },
    "expandedKeys": {
      "type": "string[] | undefined",
      "required": false,
      "origin": "own",
      "description": "Controlled: which sections are open. Pass `onExpandedChange` with it."
    },
    "onExpandedChange": {
      "type": "((keys: string[]) => void) | undefined",
      "required": false,
      "origin": "own"
    },
    "headingLevel": {
      "type": "AccordionHeadingLevel | undefined",
      "required": false,
      "origin": "own",
      "description": "The level each section's heading renders at. Must fit the surrounding\ndocument — a panel inside an `h2` section wants `3`."
    },
    "children": {
      "type": "React.ReactNode",
      "required": false,
      "origin": "own"
    }
  },
  "propCounts": {
    "own": 6,
    "aria": 0,
    "dom": 276,
    "other": 0
  }
}