{
  "name": "AccordionItem",
  "source": "src/components/Accordion.tsx",
  "propsType": "AccordionItemProps",
  "import": "import { AccordionItem } from 'ionbase-ui';",
  "status": "stable",
  "summary": "One collapsible section: an always-visible title that toggles a region beneath it.",
  "useWhen": [
    "inside an Accordion, once per section"
  ],
  "slots": {
    "title": {
      "accepts": "text",
      "note": "always visible, so it must say what is inside — \"Advanced\" tells the user nothing about whether to open it"
    },
    "children": {
      "accepts": "any content"
    }
  },
  "a11y": {
    "requires": [
      "a stable `id`, which is the section's identity in the open set — an index breaks the moment the list reorders"
    ],
    "notes": [
      "the trigger carries aria-expanded and aria-controls; the panel is a region labelled by the trigger",
      "the panel keeps its DOM when collapsed, so a half-filled form inside one does not lose its answers"
    ]
  },
  "antiPatterns": [
    {
      "dont": "a required form field inside a collapsed section",
      "do": "keep required fields outside, or expand the section when validation fails",
      "why": "a user cannot fix an error they cannot see, and the browser cannot focus a hidden invalid field"
    }
  ],
  "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": {
    "id": {
      "type": "string",
      "required": true,
      "origin": "own",
      "description": "Stable identity for the open set. Required."
    },
    "title": {
      "type": "React.ReactNode",
      "required": true,
      "origin": "own",
      "description": "The always-visible label."
    },
    "isDisabled": {
      "type": "boolean | undefined",
      "required": false,
      "origin": "own"
    },
    "children": {
      "type": "React.ReactNode",
      "required": false,
      "origin": "own"
    }
  },
  "propCounts": {
    "own": 4,
    "aria": 0,
    "dom": 275,
    "other": 0
  }
}