Nested Checkboxes

Requirements

• Render all supplied rows with their labels and depth indentation. Initially every checkbox is unchecked. The supplied input tree has unique IDs and every parent has at least one child.
• Track selected leaf IDs only. Derive each parent’s state recursively from all of its descendant leaves, at any depth; do not store an independent parent selection.
• A parent is checked when all descendant leaves are selected, unchecked when none are selected, and indeterminate when only some are selected. Set both input.checked and input.indeterminate correctly.
• Clicking an unchecked or mixed parent selects all descendant leaves. Clicking a fully checked parent deselects them. A leaf changes only itself; unaffected branches must retain their selections.
• Expose the matching aria-checked value true, false, or mixed and an accessible label for each native input. Use its normal keyboard behavior and keep a live count of selected leaves.
• Implement leafIds recursively in data.js and update selected IDs immutably without duplicates. The row scaffold and complete CSS are supplied. No folder collapsing, persistence, or remembered partial-selection snapshots are required.

Examples

Input: Select Sedan.
Output: Sedan is checked; Cars and Vehicles are mixed; other leaves remain unchecked.

Input: Click the mixed Vehicles parent.
Output: All vehicle leaves become selected; Fruit is unchanged.