# Sub setting group
> Generated from sub-setting-group.contract.json — do not edit by hand.

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).

Tier: **leaf-lit**. Frameworks: HTML (paste-and-run, no build step) · React · Vue 3.

Surfaces: editor, settings, dashboard.

## Props
| Prop | Type | Default | Notes |
| --- | --- | --- | --- |
| `hidden` | boolean | `false` | Author-controlled: collapse the sub-settings when the parent setting is off (the component does not derive this itself) |
| `(default slot)` | slot | `—` | The dependent sub-settings; they stack 16px apart, indented 24px under the parent |

## Visual standard (measured)
- Bind: margin-top 8px — tighter than the 16 between siblings, so the child binds to its parent
- Indent: padding-left 24px — the primary nesting signal (no left border, no card)
- Rows: column · 16px between dependent sub-settings (the settings scale)
- Visibility: host owns it — author adds `hidden` when the parent is off (:host([hidden]){display:none})
- Structure: no divider lines, no card/box — spacing + indent only

## When to use
- **Sub setting group** — settings that only apply when a parent toggle is on — indent them under it and hide when off
- **Setting group** — a top-level titled cluster of settings (the 16/32/48 scale + optional header)
- **a disabled row** — the setting always shows but isn't currently changeable — dim it, don't nest it

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.