{
  "generatedFrom": "divider.contract.json",
  "component": "Divider",
  "slug": "divider",
  "group": "Layout",
  "tier": "leaf-lit",
  "summary": "A thin rule that separates blocks of content — full-width, with a label, or a vertical hairline.",
  "install": {
    "package": "@ahaslides-product/design",
    "registry": "https://npm.pkg.github.com",
    "scope": "@ahaslides-product",
    "auth": "Published to GitHub Packages — needs a GitHub token with read:packages. Configure the @ahaslides-product scope in .npmrc before installing.",
    "npmrc": "@ahaslides-product:registry=https://npm.pkg.github.com\n//npm.pkg.github.com/:_authToken=${GITHUB_TOKEN}   # a GitHub token with read:packages",
    "command": "npm i @ahaslides-product/design",
    "tokenLayer": "import '@ahaslides-product/design/tokens.css';",
    "import": "import '@ahaslides-product/design/aha-divider';",
    "element": "aha-divider",
    "registers": "aha-divider"
  },
  "feeds": {
    "doc": "https://ahaslides-product.github.io/ahaslides-design/divider/index.html",
    "md": "https://ahaslides-product.github.io/ahaslides-design/divider/divider.md",
    "agentJson": "https://ahaslides-product.github.io/ahaslides-design/divider.agent.json",
    "llms": "https://ahaslides-product.github.io/ahaslides-design/divider.llms.txt",
    "index": "https://ahaslides-product.github.io/ahaslides-design/llms.txt"
  },
  "recommendedSnippet": "html",
  "vibeCode": "Emit the HTML snippet by default — <aha-divider> is a standard custom element that renders on open — React/Vue are thin adapters over the same element. Paste into an .html file and it renders with no build step.",
  "frameworks": {
    "react": {
      "via": "web-component",
      "ref": "aha-divider"
    },
    "vue": {
      "via": "web-component",
      "ref": "aha-divider"
    },
    "html": {
      "via": "web-component",
      "ref": "aha-divider",
      "runnable": "paste-and-run — no build step, renders on open"
    }
  },
  "props": [
    {
      "name": "orientation",
      "type": "horizontal | vertical",
      "default": "horizontal",
      "desc": "Horizontal rule or an inline vertical hairline"
    },
    {
      "name": "align",
      "type": "left | center | right",
      "default": "center",
      "desc": "Where the slotted label sits along a horizontal rule"
    },
    {
      "name": "dashed",
      "type": "boolean",
      "default": "false",
      "desc": "Render the rule as a dashed line"
    },
    {
      "name": "plain",
      "type": "boolean",
      "default": "false",
      "desc": "Drop the label from heading emphasis (bold, text-default) to a quiet regular note (400, text-secondary)"
    }
  ],
  "tokens": [
    "border",
    "split",
    "text-default",
    "text-secondary"
  ],
  "spec": [
    {
      "label": "Rule",
      "value": "1px solid, border #E3E3E3"
    },
    {
      "label": "Label (heading)",
      "value": "Plus Jakarta SemiBold 600, 13/22, text-default #1A1A1A"
    },
    {
      "label": "Label (plain)",
      "value": "`plain` → Regular 400, text-secondary #4A4A4A"
    },
    {
      "label": "Align",
      "value": "label center (default) · left · right; the short leg becomes a 24px stub"
    },
    {
      "label": "Gap",
      "value": "12 between rule and label"
    },
    {
      "label": "Vertical",
      "value": "1px left hairline, 1em tall, 0 8 margin"
    },
    {
      "label": "Dashed",
      "value": "`dashed` swaps the rule to a dashed border"
    }
  ],
  "opinion": {
    "whenToUse": [
      {
        "what": "Divider",
        "when": "separating stacked sections, list groups, or toolbar items"
      },
      {
        "what": "Space",
        "when": "you only need consistent gaps, not a visible line"
      },
      {
        "what": "whitespace",
        "when": "the separation reads clearly without any rule — prefer less chrome"
      }
    ],
    "note": "A divider is quiet structure — keep it 1px and on the border token. Use a label only when the section genuinely needs naming; reach for whitespace before adding a rule.",
    "dsv3": "COVERED — matched to the DS V3 Divider component-set (fileKey MwjvUjVI0HnfwD9EwPXRAy) whose token layer defines divider/colorSplit (between container → --aha-border #E3E3E3) and divider/colorSplitSecondary (inside container → --aha-split #F1F1F1). The matrix: orientation horizontal/vertical, variant solid/dashed, and a slotted label with align left/center/right in heading (bold, text-default) or plain (regular, text-secondary) emphasis — the AntD Divider conventions the DS builds on. Bound entirely to canonical tokens; no measured px/hex literals."
  },
  "surfaces": [
    "editor",
    "dashboard",
    "settings",
    "audience"
  ],
  "snippets": {
    "html": "<!-- Paste-and-run: save as .html and open in a browser. No build step.\n     <aha-divider> is the SAME shared custom element React and Vue consume — here in its\n     native form. Theming comes only from the --aha-* tokens in tokens.css. -->\n<link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/gh/ahaslides-product/ahaslides-design@master/lib/tokens.css\">\n<script type=\"module\">\n  import 'https://cdn.jsdelivr.net/gh/ahaslides-product/ahaslides-design@master/lib/aha-divider.js';   // registers <aha-divider>\n</script>\n\n<p>Section one</p>\n<aha-divider></aha-divider>\n<p>Section two</p>\n<aha-divider>Details</aha-divider>                 <!-- centred heading label -->\n<p>Section three</p>\n<aha-divider align=\"left\" plain>optional note</aha-divider>  <!-- left, quiet regular label -->\n<p>Section four</p>\n<aha-divider dashed></aha-divider>                  <!-- dashed rule -->\n<p>Section five</p>\n\n<div style=\"display:flex; align-items:center\">\n  <span>Edit</span>\n  <aha-divider orientation=\"vertical\"></aha-divider>\n  <span>Preview</span>\n  <aha-divider orientation=\"vertical\"></aha-divider>\n  <span>Share</span>\n</div>\n",
    "react": "import '@ahaslides-product/design/aha-divider';   // registers <aha-divider>\n\n// The custom element renders identically in React — no wrapper needed for a static primitive.\nfunction Section() {\n  return (\n    <>\n      <p>Section one</p>\n      <aha-divider />\n      <p>Section two</p>\n      <aha-divider>Details</aha-divider>                {/* centred heading label */}\n      <p>Section three</p>\n      <aha-divider align=\"left\" plain>optional note</aha-divider>  {/* left, quiet regular */}\n      <p>Section four</p>\n      <aha-divider dashed />                            {/* dashed rule */}\n    </>\n  );\n}\n\n// Vertical hairline between inline actions\n<div style={{ display: 'flex', alignItems: 'center' }}>\n  <span>Edit</span>\n  <aha-divider orientation=\"vertical\" />\n  <span>Preview</span>\n</div>\n",
    "vue": "// main.ts — register the element + mark aha-* as custom elements\nimport '@ahaslides-product/design/aha-divider';\napp.config.compilerOptions.isCustomElement = (tag) => tag.startsWith('aha-');\n\n// Component.vue\n<template>\n  <p>Section one</p>\n  <aha-divider />\n  <p>Section two</p>\n  <aha-divider>Details</aha-divider>                <!-- centred heading label -->\n  <p>Section three</p>\n  <aha-divider align=\"left\" plain>optional note</aha-divider>  <!-- left, quiet regular -->\n  <p>Section four</p>\n  <aha-divider dashed />                            <!-- dashed rule -->\n\n  <div style=\"display:flex; align-items:center\">\n    <span>Edit</span>\n    <aha-divider orientation=\"vertical\" />\n    <span>Preview</span>\n  </div>\n</template>\n"
  }
}