{
  "name": "SidebarSection",
  "source": "src/components/Sidebar.tsx",
  "propsType": "SidebarSectionProps",
  "import": "import { SidebarSection } from 'ionbase-ui';",
  "status": "stable",
  "summary": "A group of sidebar items under an optional title, which can fold away and carry its own actions.",
  "useWhen": [
    "inside a Sidebar, once per group — the untitled top group, then Favorites, Spaces"
  ],
  "useInstead": [
    {
      "when": "the grouping is one item and its children",
      "use": "SidebarItem",
      "why": "an item with nested items already expands; a section per parent doubles the structure"
    }
  ],
  "slots": {
    "children": {
      "accepts": "SidebarItem",
      "note": "items only — the section renders a list"
    },
    "actions": {
      "accepts": "Button",
      "note": "beside the title — a + to create in this group. Icon-only buttons need aria-label"
    }
  },
  "a11y": {
    "guarantees": [
      "a titled section's list is named by its title, so a screen reader announces \"Spaces, list, 4 items\"",
      "a collapsible title is a button with aria-expanded and aria-controls; the folded list is hidden, not unmounted"
    ]
  },
  "antiPatterns": [
    {
      "dont": "isCollapsible with no title",
      "why": "there is nothing to press; the prop is ignored"
    },
    {
      "dont": "collapsing the section that holds the current page by default",
      "why": "the user's location is hidden on arrival — leave it open, or open it when the page is inside"
    }
  ],
  "stylesheet": "src/styles/sidebar.css",
  "tokens": [
    "--border-focus",
    "--border-subtle",
    "--border-width-default",
    "--border-width-thick",
    "--font-family-sans",
    "--font-weight-medium",
    "--icon-disabled",
    "--icon-primary",
    "--icon-secondary",
    "--icon-size-sm",
    "--icon-tertiary",
    "--ion-duration-base",
    "--ion-ease-out",
    "--radius-md",
    "--radius-sm",
    "--radius-xs",
    "--spacing-12",
    "--spacing-16",
    "--spacing-2",
    "--spacing-24",
    "--spacing-32",
    "--spacing-4",
    "--spacing-8",
    "--surface-default",
    "--surface-hover",
    "--surface-selected",
    "--surface-selected-hover",
    "--text-default",
    "--text-disabled",
    "--text-secondary",
    "--text-tertiary",
    "--type-body-sm",
    "--type-body-sm-line-height",
    "--type-caption",
    "--type-caption-line-height"
  ],
  "props": {
    "title": {
      "type": "string | undefined",
      "required": false,
      "origin": "own",
      "description": "The group's name — \"Spaces\", \"Favorites\". Omit for the top group."
    },
    "isCollapsible": {
      "type": "boolean | undefined",
      "required": false,
      "origin": "own",
      "description": "Lets the title fold the section away. Needs a `title`."
    },
    "defaultExpanded": {
      "type": "boolean | undefined",
      "required": false,
      "origin": "own",
      "description": "Uncontrolled: whether a collapsible section starts open."
    },
    "isExpanded": {
      "type": "boolean | undefined",
      "required": false,
      "origin": "own",
      "description": "Controlled: whether a collapsible section is open."
    },
    "onExpandedChange": {
      "type": "((isExpanded: boolean) => void) | undefined",
      "required": false,
      "origin": "own"
    },
    "actions": {
      "type": "React.ReactNode",
      "required": false,
      "origin": "own",
      "description": "Controls beside the title — a `+` Button to create a space. Icon-only\nbuttons need their own `aria-label`."
    },
    "children": {
      "type": "React.ReactNode",
      "required": false,
      "origin": "own",
      "description": "`SidebarItem`s only — the section renders a list."
    }
  },
  "propCounts": {
    "own": 7,
    "aria": 0,
    "dom": 276,
    "other": 0
  }
}