{
  "generatedFrom": "setting-row.contract.json",
  "component": "Setting Row",
  "slug": "setting-row",
  "group": "Settings",
  "tier": "leaf-lit",
  "summary": "ONE setting — a label (with an optional \"?\" help) plus a slotted DS control; inline (label-left / control-right) by default, or stacked (label above, control full-width) for a wide control.",
  "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-setting-row';",
    "element": "aha-setting-row",
    "registers": "aha-setting-row"
  },
  "feeds": {
    "doc": "https://ahaslides-product.github.io/ahaslides-design/setting-row/index.html",
    "md": "https://ahaslides-product.github.io/ahaslides-design/setting-row/setting-row.md",
    "agentJson": "https://ahaslides-product.github.io/ahaslides-design/setting-row.agent.json",
    "llms": "https://ahaslides-product.github.io/ahaslides-design/setting-row.llms.txt",
    "index": "https://ahaslides-product.github.io/ahaslides-design/llms.txt"
  },
  "recommendedSnippet": "html",
  "vibeCode": "Emit the HTML snippet by default — <aha-setting-row> 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-setting-row"
    },
    "vue": {
      "via": "web-component",
      "ref": "aha-setting-row"
    },
    "html": {
      "via": "web-component",
      "ref": "aha-setting-row",
      "runnable": "paste-and-run — no build step, renders on open"
    }
  },
  "props": [
    {
      "name": "label",
      "type": "string",
      "default": "—",
      "desc": "The setting name — a noun phrase in sentence case"
    },
    {
      "name": "help",
      "type": "string",
      "default": "—",
      "desc": "Optional guidance — renders the \"?\" help trigger (circled question glyph) after the label; the tooltip carries the text"
    },
    {
      "name": "layout",
      "type": "inline | stack",
      "default": "inline",
      "desc": "inline: label-left / control-right (space-between). stack: label above, control full-width — for a wide control"
    },
    {
      "name": "disabled",
      "type": "boolean",
      "default": "false",
      "desc": "Dims the label to text-disabled and sets aria-disabled; the slotted control disables itself on its own element"
    },
    {
      "name": "control",
      "type": "slot",
      "default": "—",
      "desc": "The DS control (slot=\"control\") — an existing element like <aha-switch> / <aha-checkbox> / <aha-input>; reuse, never a re-implemented control"
    }
  ],
  "tokens": [
    "font-product",
    "text-default",
    "text-tertiary",
    "text-disabled"
  ],
  "spec": [
    {
      "label": "Inline row",
      "value": "flex; align-items center; justify-content space-between; gap 12; min-height 24"
    },
    {
      "label": "Label",
      "value": "Plus Jakarta 14/21, regular (400), text-default (#1A1A1A); flex:1 (label-left)"
    },
    {
      "label": "Control",
      "value": "flex:0 0 auto (control-right); slotted DS control — reuse, not re-implemented"
    },
    {
      "label": "Stack",
      "value": "flex-direction column; align-items stretch; gap 8; control full-width"
    },
    {
      "label": "Help",
      "value": "optional \"?\" after the label (DS <aha-tooltip help> — the circled question glyph)"
    },
    {
      "label": "Disabled",
      "value": "label dims to text-disabled (#B5B5B5); the control disables itself"
    },
    {
      "label": "Leading icon",
      "value": "NONE — no decorative leading-icon slot on the label (SETTINGS-40)"
    }
  ],
  "opinion": {
    "whenToUse": [
      {
        "what": "Setting row (inline)",
        "when": "a compact control — a switch, a checkbox, a short input — sits to the right of its label"
      },
      {
        "what": "Setting row (stack)",
        "when": "a wide control — a textarea, a wide select — needs the full row width below the label"
      },
      {
        "what": "Section header",
        "when": "the title of the GROUP these rows sit under"
      }
    ],
    "note": "Name the setting with a noun phrase in sentence case (\"Progress bar\", \"Speaker notes\") — never a question and never Title Case. Put guidance in `help` (the \"?\" tooltip), not a standing line. Choose `inline` for a toggle/checkbox/short input; switch to `stack` the moment the control needs real width (a textarea, a wide select). Never hand-place an icon before the label — functional icons belong inside the control (SETTINGS-40)."
  },
  "surfaces": [
    "editor",
    "dashboard",
    "settings",
    "audience"
  ],
  "snippets": {
    "html": "<!-- Paste-and-run: save as .html and open in a browser. No build step.\n     <aha-setting-row> 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. The row ships NO\n     control of its own — it carries an existing DS control in its `control` slot (reuse). -->\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-setting-row.js';  // registers <aha-setting-row>\n  import 'https://cdn.jsdelivr.net/gh/ahaslides-product/ahaslides-design@master/lib/aha-switch.js';       // registers <aha-switch> (a control it carries)\n  import 'https://cdn.jsdelivr.net/gh/ahaslides-product/ahaslides-design@master/lib/aha-input.js';        // registers <aha-input> (a wide control for the stack layout)\n</script>\n\n<!-- inline (default) — label LEFT, control RIGHT -->\n<aha-setting-row label=\"Progress bar\">\n  <aha-switch slot=\"control\" checked></aha-switch>\n</aha-setting-row>\n\n<!-- with a \"?\" help (the circled question glyph) after the label -->\n<aha-setting-row label=\"Leaderboard\" help=\"Shown to the audience between slides.\">\n  <aha-switch slot=\"control\"></aha-switch>\n</aha-setting-row>\n\n<!-- stack — label above, control full-width (a wide textarea / wide select) -->\n<aha-setting-row label=\"Speaker notes\" layout=\"stack\">\n  <aha-input slot=\"control\" placeholder=\"Notes only you can see\"></aha-input>\n</aha-setting-row>\n",
    "react": "import '@ahaslides-product/design/icons';            // registers <aha-icon> (the \"?\" glyph)\nimport '@ahaslides-product/design/aha-setting-row';  // registers <aha-setting-row>\nimport '@ahaslides-product/design/aha-switch';       // registers <aha-switch> (a control it carries)\n\n// One shared custom element — React 18 renders it directly (it holds no state of its own).\n// `label` is a noun phrase; `help` fills the \"?\" tooltip; `layout` is 'inline' (default) or 'stack'.\n// The row ships NO control — pass an existing DS control in the `control` slot (reuse).\nfunction SettingRow({ label, help, layout, children }) {\n  return (\n    <aha-setting-row label={label} {...(help ? { help } : {})} {...(layout ? { layout } : {})}>\n      {children}\n    </aha-setting-row>\n  );\n}\n\n// usage — inline (default), label LEFT / control RIGHT\n<SettingRow label=\"Leaderboard\" help=\"Shown to the audience between slides.\">\n  <aha-switch slot=\"control\" />\n</SettingRow>\n\n// usage — stack, label above / control full-width\n<SettingRow label=\"Speaker notes\" layout=\"stack\">\n  <aha-input slot=\"control\" placeholder=\"Notes only you can see\" />\n</SettingRow>\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-setting-row';  // registers <aha-setting-row>\nimport '@ahaslides-product/design/aha-switch';       // registers <aha-switch> (a control it carries)\nimport '@ahaslides-product/design/aha-input';        // registers <aha-input> (a wide control for stack)\napp.config.compilerOptions.isCustomElement = (tag) => tag.startsWith('aha-');\n\n// Component.vue\n<template>\n  <!-- inline (default) — label LEFT, control RIGHT; help fills the \"?\" tooltip -->\n  <aha-setting-row label=\"Leaderboard\" help=\"Shown to the audience between slides.\">\n    <aha-switch slot=\"control\" />\n  </aha-setting-row>\n\n  <!-- stack — label above, control full-width (a wide textarea / wide select) -->\n  <aha-setting-row label=\"Speaker notes\" layout=\"stack\">\n    <aha-input slot=\"control\" placeholder=\"Notes only you can see\" />\n  </aha-setting-row>\n</template>\n"
  }
}