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

Summary: A create-or-edit record screen composed from breadcrumbs, a wizard step list, alerts, six field components and a button row; the review step is a table with an Edit button per row.

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
  crumbs.link             #f73f35  ({color.text.link})  use
  crumbs.current          #ffa2a7  ({color.text.bright})  use
  title.text              #ffa2a7  ({color.text.bright})  use
  step.text               #e99499  ({color.text.default})  use
  step.current-text       #ffa2a7  ({color.text.bright})  use
  step.current-indicator  #e53935  ({color.border.selected-indicator})  use
  step.complete           #86a46f  ({color.status.success.text})  use
  step.invalid            #f73f35  ({color.status.danger.text})  use
  notice.tint             #0f141c  ({color.status.info.tint})  use
  notice.border           #7e9ebb  ({color.status.info.border})  use
  notice.text             #7e9ebb  ({color.status.info.text})  use
  summary.tint            #2b0e0d  ({color.status.danger.tint})  use
  summary.border          #e53935  ({color.status.danger.border})  use
  summary.text            #f73f35  ({color.status.danger.text})  use
  field.bg                #000000  ({color.surface.input})  use
  field.border            #a3676b  ({color.border.control})  use-and-report (D-007)
  field.text              #e99499  ({color.text.default})  use
  field.label             #ffa2a7  ({color.text.bright})  use
  field.help              #bd787d  ({color.text.muted})  use
  field.affix             #bd787d  ({color.text.muted})  use
  invalid.border          #e53935  ({color.status.danger.border})  use
  invalid.message         #f73f35  ({color.status.danger.text})  use
  disabled.bg             #160b0b  ({color.interaction.disabled.bg})  use
  disabled.text           #8a5559  ({color.text.disabled})  use
  disabled.border         #7d1310  ({color.border.disabled})  use
  review.key              #bd787d  ({color.text.muted})  use
  review.header-rule      #9e231f  ({color.border.strong})  use
  review.row-rule         #2b0e0d  ({color.border.divider})  use-and-report (D-008)
  footer.border           #2b0e0d  ({color.border.divider})  use-and-report (D-008)
  continue.bg             #7d1310  ({color.action.primary.bg})  use
  continue.text           #f4eeee  ({color.action.primary.text})  use
  continue.busy-glyph     #f4eeee  ({color.action.primary.text})  use
  back.text               #ffa2a7  ({color.action.secondary.text})  use
  back.border             #a3676b  ({color.action.secondary.border})  use
  draft.text              #e99499  ({color.action.tertiary.text})  use
  draft.bg-hover          #1c0a09  ({color.action.tertiary.hover-bg})  use
State dependency disclosures: D-007

States: default, invalid, busy, disabled
  default: rest tokens of every component on {color.surface.default}; the current step carries the indicator bar, future steps are disabled [`aria-current="step"`]
  invalid: the name and hostname fields take the 2px {color.status.danger.border} and show their ✕ messages; the current step's marker becomes ✕; a danger alert on {color.status.danger.tint} summarising the two fields replaces the notice; the other fields stay at rest [border width 1 → 2px; glyphs; `aria-invalid`; `role="alert"`]
  busy: Continue shows the static ⋯ glyph in {color.action.primary.text}; the form carries `aria-busy`; nothing shrinks or animates [glyph; `aria-busy`; cursor: progress]
  disabled: every control takes its component's disabled treatment ({color.text.disabled}, {color.border.disabled}, {color.interaction.disabled.bg}); labels and review keys dim; no hover anywhere [`disabled` on the wrapping fieldset; cursor: not-allowed; never opacity]

Keyboard:
  Tab / Shift+Tab: Breadcrumb links, the reachable step buttons, then every field in reading order, then Back, Save draft and Continue; the file-input's native input is the stop and its button label is drawn with the ring.
  Enter: Follows a breadcrumb, activates a step or a button; in a text field submits the form in a host.
  Space: Toggles the checkbox; opens the file chooser from the file-input.
  Arrow keys: Move within the select and the date field's segments.
  Escape: Nothing; the screen is not a dialog.

ARIA: region landmark named by the h2; a Breadcrumb nav landmark; the wizard step list with aria-current=step; role=status and role=alert notices; a form landmark of native controls; aria-busy on the form while saving; a disabled fieldset around it while inert (https://www.w3.org/WAI/ARIA/apg/practices/landmark-regions/)
Responsive: The root is an inline-size container; the field grid uses auto-fill columns of at least 20rem, so it is two columns wide in the reference frame and one at 320px, the notes always spanning the row. Below 600px the footer buttons stack full width with the primary action first in visual order. The review table scrolls inside its own container when narrower than its content. RTL mirrors the breadcrumb separators, the step order, the suffix and the button alignment.
Portability: Landmarks and native controls; aria-invalid and the summary alert appear after submit, aria-busy while saving, and a disabled fieldset makes the form inert; the state hooks are data-state-invalid, data-state-busy and data-state-disabled on the root. Hosts without container queries stack the footer at the 600px viewport breakpoint. The 56rem width and the two-column grid are layout of this specimen, not rules.
  native: GTK4: a Breadcrumb-free HeaderBar title, an Adw.Carousel-free step list as a ListBox, and a PreferencesGroup of rows; invalid rows use the .error style class and an InfoBar carries the summary.
  native: Qt: QWizard with its page list, a QFormLayout of fields, a QMessageBox-free inline banner; busy disables the page through setEnabled(false).
  native: Terminal UI: a title, a step line, fields stacked at full width, the summary as a double-line box; the ✓ and ✕ glyphs survive without colour.

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.