Settings Section

Usage

Import SettingsSection, SettingsRow, and the layout enums from @prepared911/ui/blocks/settings-section.

Each section fills its column up to Breakpoint.CenteredBlock (640px; --breakpoint-centered-block on the section root via Box maxWidth; SSEC-26) and stays full width in narrower layouts.

The section header uses --space-4 between the title and description, --space-8 padding under the header, and the column adds --space-8 before the bordered card.

Each commit row passes a control render function that receives { labelId, descriptionId, value, disabled, readOnly, busy, onValueChange }. Wire labelledBy and describedBy on the control from those ids.

RadioCards expose aria-busy during an optimistic commit but remain enabled: a newer choice can supersede the pending one, and the selection ring keeps gliding between cards.

SettingsRow owns inline layout: the control centers on a one-line title and top-aligns to the first title line when the title wraps; summary values render under the title; internal audience markers use the shipped Badge; overridden rows show a plain Reset button directly before the control; row actions hug their text width.

Switch, Checkbox, and NumberField rows give 75% of their width to textual content and 25% to the control. Other inline controls, including Secret and ValueListField, keep an even split. Controls that hug their content remain aligned to the inline end.

Dependent rows use the same padding as their peers. When their parent setting is off, the control stays visible and disabled; the reason appears in a title-adjacent info tooltip (Dependent setting) rather than as inline body copy, and the same text is wired for assistive technology. Compound duration controls hug their content at the control column's inline end; their amount field and unit selector keep the standard Large outer height, and the selector's visible segments align with the field's visible value region.

Sections render null when every row is hidden by permission or audience. When the backing data is empty but the section stays on the page, pass emptyState so ComposedEmptyState fills the card.

Danger sections use kind: danger with layout: destructive rows and typed ConfirmDialog; they never commit on change until confirm succeeds.

Call Transcript / Accessibility

Settings Section / API and Development