{
  "generatedFrom": "sub-setting-group.contract.json",
  "component": "Sub setting group",
  "slug": "sub-setting-group",
  "group": "Settings",
  "tier": "leaf-lit",
  "summary": "The dependent (child) settings wrapper — indents a cluster of sub-settings under one parent toggle with a tight gap, spacing only (no border, no card).",
  "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-sub-setting-group';",
    "element": "aha-sub-setting-group",
    "registers": "aha-sub-setting-group"
  },
  "feeds": {
    "doc": "https://ahaslides-product.github.io/ahaslides-design/sub-setting-group/index.html",
    "md": "https://ahaslides-product.github.io/ahaslides-design/sub-setting-group/sub-setting-group.md",
    "agentJson": "https://ahaslides-product.github.io/ahaslides-design/sub-setting-group.agent.json",
    "llms": "https://ahaslides-product.github.io/ahaslides-design/sub-setting-group.llms.txt",
    "index": "https://ahaslides-product.github.io/ahaslides-design/llms.txt"
  },
  "recommendedSnippet": "html",
  "vibeCode": "Emit the HTML snippet by default — <aha-sub-setting-group> 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-sub-setting-group"
    },
    "vue": {
      "via": "web-component",
      "ref": "aha-sub-setting-group"
    },
    "html": {
      "via": "web-component",
      "ref": "aha-sub-setting-group",
      "runnable": "paste-and-run — no build step, renders on open"
    }
  },
  "props": [
    {
      "name": "hidden",
      "type": "boolean",
      "default": "false",
      "desc": "Author-controlled: collapse the sub-settings when the parent setting is off (the component does not derive this itself)"
    },
    {
      "name": "(default slot)",
      "type": "slot",
      "default": "—",
      "desc": "The dependent sub-settings; they stack 16px apart, indented 24px under the parent"
    }
  ],
  "tokens": [
    "text-default"
  ],
  "spec": [
    {
      "label": "Bind",
      "value": "margin-top 8px — tighter than the 16 between siblings, so the child binds to its parent"
    },
    {
      "label": "Indent",
      "value": "padding-left 24px — the primary nesting signal (no left border, no card)"
    },
    {
      "label": "Rows",
      "value": "column · 16px between dependent sub-settings (the settings scale)"
    },
    {
      "label": "Visibility",
      "value": "host owns it — author adds `hidden` when the parent is off (:host([hidden]){display:none})"
    },
    {
      "label": "Structure",
      "value": "no divider lines, no card/box — spacing + indent only"
    }
  ],
  "opinion": {
    "whenToUse": [
      {
        "what": "Sub setting group",
        "when": "settings that only apply when a parent toggle is on — indent them under it and hide when off"
      },
      {
        "what": "Setting group",
        "when": "a top-level titled cluster of settings (the 16/32/48 scale + optional header)"
      },
      {
        "what": "a disabled row",
        "when": "the setting always shows but isn't currently changeable — dim it, don't nest it"
      }
    ],
    "note": "Use this only for genuinely dependent settings — ones that are meaningless until a parent is on. Keep the parent row and its sub-group inside the same setting group. Hide (not disable) the sub-settings when the parent is off, so the panel doesn't fill with dead controls. Never draw a left rail or box around the nest — the 24px indent + the tight 8px bind are the whole signal."
  },
  "surfaces": [
    "editor",
    "settings",
    "dashboard"
  ],
  "snippets": {
    "html": "<!-- Paste-and-run: save as .html and open in a browser. No build step.\n     <aha-sub-setting-group> is the SAME shared custom element React and Vue consume — here in its\n     native form. It nests DEPENDENT settings under a parent toggle: 8px above (binds tighter than\n     the 16 between siblings) + a 24px indent — no left border, no card. The host owns visibility:\n     add `hidden` when the parent is off. 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/icons.js';                  // <aha-icon> — row control glyphs\n  import 'https://cdn.jsdelivr.net/gh/ahaslides-product/ahaslides-design@master/lib/aha-setting-group.js';      // registers <aha-setting-group> (the parent group)\n  import 'https://cdn.jsdelivr.net/gh/ahaslides-product/ahaslides-design@master/lib/aha-sub-setting-group.js';  // registers <aha-sub-setting-group>\n  import 'https://cdn.jsdelivr.net/gh/ahaslides-product/ahaslides-design@master/lib/aha-settings-list.js';      // <aha-settings-item> rows\n  import 'https://cdn.jsdelivr.net/gh/ahaslides-product/ahaslides-design@master/lib/aha-switch.js';             // reused row control\n  import 'https://cdn.jsdelivr.net/gh/ahaslides-product/ahaslides-design@master/lib/aha-input.js';              // reused row control\n</script>\n\n<div style=\"max-width:380px\">\n  <aha-setting-group label=\"Question timer\">\n    <!-- the parent toggle -->\n    <aha-settings-item label=\"Show a timer\">\n      <aha-switch slot=\"control\" id=\"parent\" checked></aha-switch>\n    </aha-settings-item>\n\n    <!-- its dependent sub-settings — indented 24px, bound 8px under the parent, hidden when off -->\n    <aha-sub-setting-group id=\"sub\">\n      <aha-settings-item label=\"Seconds per question\">\n        <aha-input slot=\"control\" value=\"30\"></aha-input>\n      </aha-settings-item>\n      <aha-settings-item label=\"Auto-advance when time's up\">\n        <aha-switch slot=\"control\"></aha-switch>\n      </aha-settings-item>\n    </aha-sub-setting-group>\n  </aha-setting-group>\n</div>\n\n<script>\n  // Host owns visibility: collapse the dependent sub-settings when the parent is off.\n  const sub = document.getElementById('sub');\n  document.getElementById('parent').addEventListener('change', (e) => {\n    sub.hidden = !e.detail.checked;\n  });\n</script>\n",
    "react": "import '@ahaslides-product/design/icons';                 // <aha-icon> — row control glyphs\nimport '@ahaslides-product/design/aha-setting-group';     // the parent group\nimport '@ahaslides-product/design/aha-sub-setting-group'; // registers <aha-sub-setting-group>\nimport '@ahaslides-product/design/aha-settings-list';     // <aha-settings-item> rows\nimport '@ahaslides-product/design/aha-switch';\nimport '@ahaslides-product/design/aha-input';\nimport { useState } from 'react';\n\n// <aha-sub-setting-group> nests DEPENDENT settings under a parent toggle: 8px above + 24px indent,\n// spacing only (no border, no card). The host owns visibility — add `hidden` when the parent is off.\nfunction TimerSettings() {\n  const [on, setOn] = useState(true);\n  return (\n    <div style={{ maxWidth: 380 }}>\n      <aha-setting-group label=\"Question timer\">\n        <aha-settings-item label=\"Show a timer\">\n          <aha-switch slot=\"control\"\n            {...(on ? { checked: '' } : {})}\n            onChange={(e) => setOn(e.detail.checked)} />\n        </aha-settings-item>\n\n        {/* dependent sub-settings — hidden when the parent is off */}\n        <aha-sub-setting-group {...(on ? {} : { hidden: '' })}>\n          <aha-settings-item label=\"Seconds per question\">\n            <aha-input slot=\"control\" value=\"30\" />\n          </aha-settings-item>\n          <aha-settings-item label=\"Auto-advance when time's up\">\n            <aha-switch slot=\"control\" />\n          </aha-settings-item>\n        </aha-sub-setting-group>\n      </aha-setting-group>\n    </div>\n  );\n}\n",
    "vue": "// main.ts — register the elements + mark aha-* as custom elements\nimport '@ahaslides-product/design/icons';                 // <aha-icon> — row control glyphs\nimport '@ahaslides-product/design/aha-setting-group';     // the parent group\nimport '@ahaslides-product/design/aha-sub-setting-group'; // registers <aha-sub-setting-group>\nimport '@ahaslides-product/design/aha-settings-list';     // <aha-settings-item> rows\nimport '@ahaslides-product/design/aha-switch';\nimport '@ahaslides-product/design/aha-input';\napp.config.compilerOptions.isCustomElement = (tag) => tag.startsWith('aha-');\n\n// Component.vue — <aha-sub-setting-group> nests DEPENDENT settings under a parent toggle: 8px above\n// + 24px indent, spacing only. The host owns visibility — bind `hidden` off the parent state.\n<script setup>\nimport { ref } from 'vue';\nconst on = ref(true);\n</script>\n\n<template>\n  <div style=\"max-width:380px\">\n    <aha-setting-group label=\"Question timer\">\n      <aha-settings-item label=\"Show a timer\">\n        <aha-switch slot=\"control\" :checked.prop=\"on\"\n          @change=\"on = $event.detail.checked\" />\n      </aha-settings-item>\n\n      <!-- dependent sub-settings — hidden when the parent is off -->\n      <aha-sub-setting-group :hidden=\"!on\">\n        <aha-settings-item label=\"Seconds per question\">\n          <aha-input slot=\"control\" value=\"30\" />\n        </aha-settings-item>\n        <aha-settings-item label=\"Auto-advance when time's up\">\n          <aha-switch slot=\"control\" />\n        </aha-settings-item>\n      </aha-sub-setting-group>\n    </aha-setting-group>\n  </div>\n</template>\n"
  }
}