{
  "name": "Divider",
  "source": "src/components/Divider.tsx",
  "propsType": "DividerProps",
  "description": "A single `<hr>`, matching Figma's `Border` (70:22153).\n\n`<hr>` rather than a styled `<div>`: it is a semantic thematic break, so a\nscreen reader announces it as one, and it needs no `role` to get there.\n`aria-orientation` is set for the vertical case, since a vertical rule\ninside a horizontal toolbar is the one shape a screen reader cannot infer\nfrom the element alone.",
  "import": "import { Divider } from 'ionbase-ui';",
  "status": "stable",
  "summary": "A semantic thematic break, rendered as a real <hr>.",
  "useWhen": [
    "separating groups of content or controls that are related but distinct",
    "a menu, toolbar or form needs a visible section break"
  ],
  "useInstead": [
    {
      "when": "you only want space between two things",
      "use": "CSS gap or margin",
      "why": "a rule announces a break to a screen reader; whitespace does not, and usually shouldn't"
    }
  ],
  "variants": {
    "orientation": {
      "horizontal": {
        "use": "the default — between stacked sections"
      },
      "vertical": {
        "use": "inside a horizontal row: toolbars, button groups, header bars"
      }
    }
  },
  "a11y": {
    "guarantees": [
      "`<hr>` is a thematic break to assistive tech without needing a role",
      "`aria-orientation=\"vertical\"` is set for the vertical case — the one thing a screen reader cannot infer from the element"
    ]
  },
  "antiPatterns": [
    {
      "dont": "a styled <div> for a rule",
      "why": "that is what this component exists to replace"
    },
    {
      "dont": "a Divider between every row of a list",
      "why": "a break announced on every row is noise; use the list's own row borders"
    }
  ],
  "stylesheet": "src/styles/divider.css",
  "tokens": [
    "--border-strong",
    "--border-width-default"
  ],
  "props": {
    "orientation": {
      "type": "DividerOrientation | undefined",
      "required": false,
      "origin": "own",
      "description": "Matches Figma's `Style` variant.",
      "values": [
        "vertical",
        "horizontal"
      ]
    }
  },
  "propCounts": {
    "own": 1,
    "aria": 0,
    "dom": 278,
    "other": 0
  }
}