j3w1/theme implementation brief — segmented-control
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/segmented-control.json
spec: spec/components/segmented-control.md  site: https://j3w1.github.io/theme/reference/#c-segmented-control
maturity: stable  priority: R2

Summary: A short exclusive choice implemented with labelled native radios.

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.text                                               #e99499  ({color.text.default})  use
  root.border                                             #a3676b  ({color.border.control})  use-and-report (D-007)
  heading.text                                            #ffa2a7  ({color.text.bright})  use
  secondary.text                                          #bd787d  ({color.text.muted})  use
  control.bg                                              #000000  ({color.surface.input})  use
  control.focus                                           #e53935  ({color.interaction.focus.ring})  use
  dependency.role-border-width-default                    1px  ({border.width.default})  use
  dependency.role-border-width-emphasis                   2px  ({border.width.emphasis})  use
  dependency.role-color-action-primary-bg                 #7d1310  ({color.action.primary.bg})  use
  dependency.role-color-action-primary-hover-bg           #911410  ({color.action.primary.hover-bg})  use
  dependency.role-color-action-primary-text               #f4eeee  ({color.action.primary.text})  use
  dependency.role-color-border-disabled                   #7d1310  ({color.border.disabled})  use
  dependency.role-color-interaction-disabled-bg           #160b0b  ({color.interaction.disabled.bg})  use
  dependency.role-color-interaction-focus-ring-container  #ffa2a7  ({color.interaction.focus.ring-container})  use
  dependency.role-color-interaction-hover-bg              #1c0a09  ({color.interaction.hover.bg})  use
  dependency.role-color-interaction-selection-bg          #531310  ({color.interaction.selection.bg})  use
  dependency.role-color-interaction-selection-text        #f4eeee  ({color.interaction.selection.text})  use
  dependency.role-color-status-danger-border              #e53935  ({color.status.danger.border})  use
  dependency.role-color-status-danger-text                #f73f35  ({color.status.danger.text})  use
  dependency.role-color-text-disabled                     #8a5559  ({color.text.disabled})  use
  dependency.role-density-comfortable-control-height      32px  ({density.comfortable.control-height})  use
  dependency.role-density-compact-control-height          24px  ({density.compact.control-height})  use
  dependency.role-focus-offset                            -2px  ({focus.offset})  use
  dependency.role-focus-ring                              1px dashed #e53935  ({focus.ring})  use
  dependency.role-font-line-height-ui-md                  18px  ({font.line-height.ui-md})  use
  dependency.role-font-line-height-ui-sm                  16px  ({font.line-height.ui-sm})  use
  dependency.role-font-size-ui-md                         13px  ({font.size.ui-md})  use
  dependency.role-font-size-ui-sm                         12px  ({font.size.ui-sm})  use
  dependency.role-icon-size-md                            16px  ({icon.size.md})  use
  dependency.role-radius-none                             0px  ({radius.none})  use
  dependency.role-space-12                                12px  ({space.12})  use
  dependency.role-space-16                                16px  ({space.16})  use
  dependency.role-space-2                                 2px  ({space.2})  use
  dependency.role-space-24                                24px  ({space.24})  use
  dependency.role-space-4                                 4px  ({space.4})  use
  dependency.role-space-8                                 8px  ({space.8})  use
State dependency disclosures: D-007

States: default, checked, focus-visible, disabled
  default: Named content on the default surface. [Native text and structure.]
  checked: Selected fill and a check indicator. [Native checked state.]
  focus-visible: Dashed focus ring. [Native keyboard focus position.]
  disabled: Disabled semantic foreground, background and border at full opacity. [Native disabled state blocks activation.]

Keyboard:
  Tab / Shift+Tab: Enter the native radio group once and leave it.
  Arrow keys / Space: Use native radio selection and wrapping.

ARIA: Native fieldset, legend and radio inputs
Responsive: Wrap labels and actions without changing source order. Use logical spacing in RTL. Preserve native target sizes at both densities; only bounded data regions may scroll horizontally.
Portability: Choose one value from a short labelled set using native radios. This changes a value; use tabs for associated content panels. Native names, required checks, disabled fieldsets and form reset are preserved.
  native: Use equivalent native semantics and approved roles; record any unsupported behavior as a mapping deviation.

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.