{
  "name": "SidePanelLayout",
  "source": "src/components/SidePanel.tsx",
  "propsType": "SidePanelLayoutProps",
  "description": "The row a SidePanel sits in: content, then panel. The content column gets\n`min-width: 0`, without which a wide Table beside the panel pushes it off\nscreen instead of scrolling inside its own container.",
  "import": "import { SidePanelLayout } from 'ionbase-ui';",
  "status": "stable",
  "summary": "The row a SidePanel sits in: the content, then the panel. Gives the content column `min-width: 0` so wide content scrolls in place instead of pushing the panel off screen.",
  "useWhen": [
    "a SidePanel opens beside a list, table or feed"
  ],
  "useInstead": [
    {
      "when": "the side content is the app's navigation",
      "use": "Sidebar",
      "why": "navigation belongs to the page shell, not to a content row"
    },
    {
      "when": "two panes that are always there, read across, whose split the reader sets",
      "use": "SplitPane",
      "why": "a SidePanel comes and goes; a SplitPane's panes stay, with a divider between them that moves"
    }
  ],
  "a11y": {
    "requires": [
      "exactly two children, content first and the SidePanel second — DOM order is reading and Tab order"
    ],
    "guarantees": [
      "the first child fills the row and may shrink below its content's width, so a wide Table scrolls in its own container",
      "adds no role and no landmark: the content and the panel carry their own names"
    ]
  },
  "antiPatterns": [
    {
      "dont": "<SidePanelLayout><SidePanel …/><Table …/></SidePanelLayout>",
      "do": "<SidePanelLayout><Table …/><SidePanel …/></SidePanelLayout>",
      "why": "with the panel first, the detail is read and tabbed to before the list it is the detail of"
    }
  ],
  "stylesheet": "src/styles/side-panel.css",
  "tokens": [
    "--border-focus",
    "--border-subtle",
    "--border-width-default",
    "--border-width-thick",
    "--font-family-sans",
    "--font-weight-semibold",
    "--icon-secondary",
    "--icon-size-md",
    "--ion-duration-base",
    "--ion-ease-out",
    "--ion-side-panel-size",
    "--ion-side-panel-top",
    "--radius-lg",
    "--radius-sm",
    "--spacing-12",
    "--spacing-24",
    "--spacing-32",
    "--spacing-4",
    "--spacing-8",
    "--surface-default",
    "--surface-hover",
    "--text-default",
    "--text-secondary",
    "--type-body",
    "--type-body-line-height",
    "--type-body-sm",
    "--type-body-sm-line-height",
    "--type-h5",
    "--type-h5-line-height"
  ],
  "props": {
    "children": {
      "type": "React.ReactNode",
      "required": true,
      "origin": "own",
      "description": "The content first, then the SidePanel — reading order is DOM order."
    },
    "className": {
      "type": "string | undefined",
      "required": false,
      "origin": "own"
    }
  },
  "propCounts": {
    "own": 2,
    "aria": 0,
    "dom": 0,
    "other": 0
  }
}