j3w1/theme implementation brief — settings-panel
theme: j3w1-theme 1.1.0  profile: default  sourceDigest: sha256-C+iD5Q7l0XPU/boMj003wPbPLBOq3C3ZM7s4OfzJ6mc=
pin: https://raw.githubusercontent.com/j3w1/theme/v1.1.0/exports/components/settings-panel.json
spec: spec/components/settings-panel.md  site: https://j3w1.github.io/theme/reference/#c-settings-panel
maturity: stable  priority: R1

Summary: A two-column settings screen composed from the sidebar-nav, fieldset, switch, select, radio-group, text-field, checkbox and button components; below 600px the sidebar becomes a tab strip.

Use the pinned approved default profile. Pending roles in that profile use-and-report their decision IDs; this does not approve them. Proposed profiles are preview-only and blocked for delivery. Heritage profiles are historical-only. Deprecated or heritage roles are blocked for new approved-profile mappings. Consume roles within their documented scope, never primitives. Release numbering does not approve profiles or tokens.
Tokens (resolved):
  root.bg                #100c0c  ({color.surface.default})  use
  root.border            #531310  ({color.border.default})  use
  nav.bg                 #100c0c  ({color.surface.default})  use
  nav.border             #2b0e0d  ({color.border.divider})  use-and-report (D-008)
  nav.text               #e99499  ({color.text.default})  use
  nav.current-text       #ffa2a7  ({color.text.bright})  use
  nav.current-indicator  #e53935  ({color.border.selected-indicator})  use
  nav.bg-hover           #1c0a09  ({color.interaction.hover.bg})  use
  title.text             #ffa2a7  ({color.text.bright})  use
  lead.text              #bd787d  ({color.text.muted})  use
  group.border           #2b0e0d  ({color.border.divider})  use-and-report (D-008)
  group.legend           #ffa2a7  ({color.text.bright})  use
  control.bg             #000000  ({color.surface.input})  use
  control.border         #a3676b  ({color.border.control})  use-and-report (D-007)
  control.text           #e99499  ({color.text.default})  use
  control.ring           #e53935  ({color.interaction.focus.ring})  use
  control.checked-bg     #7d1310  ({color.action.primary.bg})  use
  control.checked-glyph  #f4eeee  ({color.action.primary.text})  use
  invalid.border         #e53935  ({color.status.danger.border})  use
  invalid.message        #f73f35  ({color.status.danger.text})  use
  footer.border          #2b0e0d  ({color.border.divider})  use-and-report (D-008)
  apply.bg               #7d1310  ({color.action.primary.bg})  use
  apply.text             #f4eeee  ({color.action.primary.text})  use
  apply.busy-glyph       #f4eeee  ({color.action.primary.text})  use
  reset.text             #ffa2a7  ({color.action.secondary.text})  use
  reset.border           #a3676b  ({color.action.secondary.border})  use
State dependency disclosures: D-007

States: default, focus-visible, invalid, busy
  default: rest tokens of every component on {color.surface.default}; the open section carries the indicator bar [`aria-current`]
  focus-visible: the dashed {color.interaction.focus.ring} on the control holding focus (shown on the first switch); the other controls stay at rest [the ring]
  invalid: the inner-gap field takes the 2px {color.status.danger.border} and shows its ✕ message; the other controls stay at rest [border width 1 → 2px; glyph; `aria-invalid`]
  busy: Apply shows the static ⋯ glyph in {color.action.primary.text}; the form carries `aria-busy`; nothing shrinks or animates [glyph; `aria-busy`; cursor: progress]

Keyboard:
  Tab / Shift+Tab: Walks the section links, then the controls in reading order, then Apply and Reset; nothing inside is a composite widget, so every control is its own stop.
  Enter / Space: Follows a section link; toggles a switch or checkbox; opens the select.
  Arrow keys: Move within the radio-group and the select's options; step the numeric field.
  Escape: Nothing; the panel is not a dialog and nothing is dismissed.

ARIA: region landmark named by the h2; a nav landmark for the sections with aria-current on the open one; a form landmark holding native controls in one fieldset; aria-busy on the form while applying (https://www.w3.org/WAI/ARIA/apg/practices/landmark-regions/)
Responsive: The root is an inline-size container; below 600px the sidebar collapses into a scrollable tab strip above the form and both columns span the grid. Every control keeps min-width 0 and wraps its label above; at 320px the strip scrolls and the form stacks without clipping. RTL mirrors the sidebar side, the indicator edge and the px suffix.
Portability: A region, a nav and a form landmark with native controls; the collapse is a container query on the root and needs no script. Hosts without container queries collapse at the 600px viewport breakpoint and record the deviation. The two-column grid and the 56rem reference width are layout of this specimen, not rules.
  native: GTK4: a HeaderBar-free window with a StackSidebar and a PreferencesPage; each row maps to its own component port.
  native: Qt: QListWidget beside a QStackedWidget of QGroupBox forms; the busy state is a QProgressBar in the button row.
  native: Terminal UI: a two-pane layout whose left list uses the selection fill; below 60 columns the list becomes a top tab row.

Rules: use only these values; no invented colours; radius 0; borders 1px (2px emphasis); focus is a 1px dashed ring, selection is a fill;
do not restyle unrelated elements; report deviations per agents/consume.md; record theme.lock.json at the pinned revision.