{
  "generatedFrom": "section-header.contract.json",
  "component": "Section Header",
  "slug": "section-header",
  "group": "Settings",
  "tier": "leaf-lit",
  "summary": "A settings GROUP header — the hierarchy parent that a stack of setting rows sits under: a noun-phrase label, an optional \"?\" help, and a right-aligned action slot (a master switch, a count, a link).",
  "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-section-header';",
    "element": "aha-section-header",
    "registers": "aha-section-header"
  },
  "feeds": {
    "doc": "https://ahaslides-product.github.io/ahaslides-design/section-header/index.html",
    "md": "https://ahaslides-product.github.io/ahaslides-design/section-header/section-header.md",
    "agentJson": "https://ahaslides-product.github.io/ahaslides-design/section-header.agent.json",
    "llms": "https://ahaslides-product.github.io/ahaslides-design/section-header.llms.txt",
    "index": "https://ahaslides-product.github.io/ahaslides-design/llms.txt"
  },
  "recommendedSnippet": "html",
  "vibeCode": "Emit the HTML snippet by default — <aha-section-header> 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-section-header"
    },
    "vue": {
      "via": "web-component",
      "ref": "aha-section-header"
    },
    "html": {
      "via": "web-component",
      "ref": "aha-section-header",
      "runnable": "paste-and-run — no build step, renders on open"
    }
  },
  "props": [
    {
      "name": "label",
      "type": "string",
      "default": "—",
      "desc": "The group title — a noun phrase in sentence case; exposed as a role=heading aria-level=3"
    },
    {
      "name": "help",
      "type": "string",
      "default": "—",
      "desc": "Optional guidance — renders the \"?\" help trigger (circled question glyph) after the label; the tooltip carries the text"
    },
    {
      "name": "action",
      "type": "slot",
      "default": "—",
      "desc": "Right-aligned slot (slot=\"action\") — a master switch, a count, or a link"
    }
  ],
  "tokens": [
    "font-product",
    "text-default",
    "text-tertiary"
  ],
  "spec": [
    {
      "label": "Row",
      "value": "flex; align-items center; gap 8"
    },
    {
      "label": "Label",
      "value": "Plus Jakarta 14/21, weight 600, text-default (#1A1A1A) — a role=heading aria-level=3"
    },
    {
      "label": "Casing",
      "value": "noun phrase, sentence case — \"Presentation\", NOT \"Presentation Settings\""
    },
    {
      "label": "Help",
      "value": "optional \"?\" after the label (DS <aha-tooltip help> — the circled question glyph)"
    },
    {
      "label": "Action",
      "value": "right-aligned slot (margin-left:auto) — a master switch / count / link"
    },
    {
      "label": "Motion",
      "value": "none — static header, no interactive state of its own"
    }
  ],
  "opinion": {
    "whenToUse": [
      {
        "what": "Section header",
        "when": "the title of a GROUP of settings — the hierarchy parent over a stack of rows"
      },
      {
        "what": "Setting row",
        "when": "ONE setting inside the group — a label + a control"
      },
      {
        "what": "Settings list",
        "when": "a whole schema-driven surface of groups + rows at once"
      }
    ],
    "note": "Name the group with a short noun phrase in sentence case (\"Audience\", \"Interaction\") — never a full sentence and never Title Case. Add `help` only when the group needs a word of guidance; keep the label itself terse. Reach for the `action` slot to hang a master switch that toggles the whole group, a count of items, or a \"Manage\" link — anything that acts on the group, not on one row."
  },
  "surfaces": [
    "editor",
    "dashboard",
    "settings",
    "audience"
  ],
  "snippets": {
    "html": "<!-- Paste-and-run: save as .html and open in a browser. No build step.\n     <aha-section-header> 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     The \"?\" help + its icon are summoned from the DS icon library (no inline glyph). -->\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/icons.js';               // registers <aha-icon> (the \"?\" glyph)\n  import 'https://cdn.jsdelivr.net/gh/ahaslides-product/ahaslides-design@master/lib/aha-section-header.js';  // registers <aha-section-header>\n  import 'https://cdn.jsdelivr.net/gh/ahaslides-product/ahaslides-design@master/lib/aha-switch.js';          // registers <aha-switch> (a master switch in the action slot)\n</script>\n\n<!-- A settings GROUP header — a noun phrase in sentence case. Rows sit under it. -->\n<aha-section-header label=\"Presentation\"></aha-section-header>\n\n<!-- with a \"?\" help (the circled question glyph) after the label -->\n<aha-section-header label=\"Audience\" help=\"Who can see and join this deck.\"></aha-section-header>\n\n<!-- with an action slot (a master switch / count / link) pushed to the right -->\n<aha-section-header label=\"Interaction\" help=\"Turn the whole group on or off.\">\n  <aha-switch slot=\"action\" checked></aha-switch>\n</aha-section-header>\n",
    "react": "import '@ahaslides-product/design/icons';               // registers <aha-icon> (the \"?\" glyph)\nimport '@ahaslides-product/design/aha-section-header';  // registers <aha-section-header>\n\n// One shared custom element — React 18 renders it directly (no ref needed; it takes no events).\n// React 19 can pass the same attributes. `label` is a noun phrase in sentence case; `help` fills\n// the \"?\" tooltip; the `action` slot carries a master switch / count / link pushed to the right.\nfunction SectionHeader({ label, help, action }) {\n  return (\n    <aha-section-header label={label} {...(help ? { help } : {})}>\n      {action ? <span slot=\"action\">{action}</span> : null}\n    </aha-section-header>\n  );\n}\n\n// usage\n<SectionHeader label=\"Audience\" help=\"Who can see and join this deck.\" />\n",
    "vue": "// main.ts — register the elements + mark aha-* as custom elements\nimport '@ahaslides-product/design/icons';               // registers <aha-icon> (the \"?\" glyph)\nimport '@ahaslides-product/design/aha-section-header';  // registers <aha-section-header>\nimport '@ahaslides-product/design/aha-switch';          // registers <aha-switch> (action slot)\napp.config.compilerOptions.isCustomElement = (tag) => tag.startsWith('aha-');\n\n// Component.vue\n<template>\n  <!-- A settings GROUP header — label is a noun phrase in sentence case; help fills the \"?\" tooltip. -->\n  <aha-section-header label=\"Audience\" help=\"Who can see and join this deck.\" />\n\n  <!-- action slot — a master switch / count / link pushed to the right -->\n  <aha-section-header label=\"Interaction\" help=\"Turn the whole group on or off.\">\n    <aha-switch slot=\"action\" checked />\n  </aha-section-header>\n</template>\n"
  }
}