{
  "name": "SidebarItem",
  "source": "src/components/Sidebar.tsx",
  "propsType": "SidebarItemProps",
  "import": "import { SidebarItem } from 'ionbase-ui';",
  "status": "stable",
  "summary": "One sidebar row: a link or a button, with an icon, a count, actions revealed on hover or focus, and nested items that expand.",
  "useWhen": [
    "inside a SidebarSection, or nested inside another SidebarItem"
  ],
  "useInstead": [
    {
      "when": "it is a link in a header bar",
      "use": "NavItem",
      "why": "NavItem recolours on hover without a fill, as measured for the header; sidebar rows fill"
    },
    {
      "when": "it is a row in a dropdown",
      "use": "MenuItem"
    }
  ],
  "slots": {
    "icon": {
      "accepts": "Icon",
      "note": "decorative; label names the row"
    },
    "badge": {
      "accepts": "text",
      "note": "a count or short status, trailing"
    },
    "actions": {
      "accepts": "Button",
      "note": "icon-only Buttons with aria-label, or a Menu trigger for more. Keep to two"
    },
    "children": {
      "accepts": "SidebarItem",
      "note": "nested items; their presence makes the row expandable"
    }
  },
  "a11y": {
    "requires": [
      "`label` — the row's name, and the name of its expand button when it has children"
    ],
    "guarantees": [
      "`isCurrent` sets aria-current=\"page\" on the link",
      "a row with `href` and children renders the link and a separate expand button beside it — a button cannot be nested in a link",
      "a row with children and no `href` is a single button with aria-expanded",
      "a row whose subtree holds the current page starts expanded",
      "actions stay in the tab order and become visible when focus reaches them; they are always visible on touch screens"
    ]
  },
  "antiPatterns": [
    {
      "dont": "onClick on a row to navigate",
      "do": "href",
      "why": "a real link opens in a new tab, shows its address and is announced as a link"
    },
    {
      "dont": "actions nested inside the label or icon",
      "do": "the actions prop",
      "why": "interactive content inside a link is invalid and unreachable by keyboard in most browsers"
    },
    {
      "dont": "marking a parent isCurrent because a child page is open",
      "why": "only the page the user is on is current; its ancestors are opened for them instead"
    }
  ],
  "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": {
    "label": {
      "type": "string",
      "required": true,
      "origin": "own",
      "description": "The item's text. A string, because it also names the expand button of an\nitem that has children."
    },
    "icon": {
      "type": "React.ReactNode",
      "required": false,
      "origin": "own",
      "description": "Leading icon. Decorative — `label` names the item."
    },
    "href": {
      "type": "string | undefined",
      "required": false,
      "origin": "own",
      "description": "Where it goes. Omit for an item that only groups its children."
    },
    "onPress": {
      "type": "(() => void) | undefined",
      "required": false,
      "origin": "own",
      "description": "For an item that acts rather than navigates. Ignored with `href`."
    },
    "isCurrent": {
      "type": "boolean | undefined",
      "required": false,
      "origin": "own",
      "description": "The page the user is on. Marked `aria-current=\"page\"`."
    },
    "isDisabled": {
      "type": "boolean | undefined",
      "required": false,
      "origin": "own"
    },
    "badge": {
      "type": "React.ReactNode",
      "required": false,
      "origin": "own",
      "description": "Trailing text — a count, a shortcut, a status."
    },
    "actions": {
      "type": "React.ReactNode",
      "required": false,
      "origin": "own",
      "description": "Controls for this row — `…` and `+`. Revealed on hover and whenever focus\nis inside the row; always shown on touch screens. Icon-only buttons need\ntheir own `aria-label`."
    },
    "defaultExpanded": {
      "type": "boolean | undefined",
      "required": false,
      "origin": "own",
      "description": "Uncontrolled: whether the children start open. Defaults to open when the\ncurrent page is somewhere inside."
    },
    "isExpanded": {
      "type": "boolean | undefined",
      "required": false,
      "origin": "own",
      "description": "Controlled: whether the children are open."
    },
    "onExpandedChange": {
      "type": "((isExpanded: boolean) => void) | undefined",
      "required": false,
      "origin": "own"
    },
    "children": {
      "type": "React.ReactNode",
      "required": false,
      "origin": "own",
      "description": "Nested `SidebarItem`s. Their presence is what makes the item expandable."
    }
  },
  "propCounts": {
    "own": 12,
    "aria": 0,
    "dom": 277,
    "other": 0
  }
}