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

Summary: A square ghost button whose only content is a 16px line icon; it always carries an accessible name and, as a toggle, aria-pressed.

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               rgb(0 0 0 / 0%)  ({color.action.secondary.bg})  use
  root.text             #e99499  ({color.action.tertiary.text})  use
  root.bg-hover         #1c0a09  ({color.action.tertiary.hover-bg})  use
  root.bg-active        #420f0c  ({color.interaction.pressed.bg})  use
  root.border-active    #e53935  ({color.border.active})  use
  root.ring             #e53935  ({color.interaction.focus.ring})  use
  root.bg-toggled       #531310  ({color.interaction.selection.bg})  use
  root.text-toggled     #f4eeee  ({color.interaction.selection.text})  use
  root.border-toggled   #e53935  ({color.border.selected-indicator})  use
  root.ring-toggled     #ffa2a7  ({color.interaction.focus.ring-container})  use
  root.text-disabled    #8a5559  ({color.text.disabled})  use
  root.bg-disabled      #160b0b  ({color.interaction.disabled.bg})  use
  root.border-disabled  #7d1310  ({color.border.disabled})  use
  icon.stroke           #e99499  ({color.icon.default})  use

States: default, hover, focus-visible, active, disabled, toggled, toggled+focus-visible
  default: {color.action.tertiary.text} icon on nothing; transparent 1px border [—]
  hover: background → {color.action.tertiary.hover-bg} [cursor: pointer; hover-capable pointers only]
  focus-visible: ring 1px dashed {color.interaction.focus.ring} at −2px [the ring]
  active: background → {color.interaction.pressed.bg}; border → {color.border.active} [border change; no translation]
  disabled: {color.text.disabled} on {color.interaction.disabled.bg} with 1px {color.border.disabled}; no hover [`disabled`; cursor: not-allowed]
  toggled: fill {color.interaction.selection.bg} with {color.interaction.selection.text}; border {color.border.selected-indicator}; the icon draws in its filled form [`aria-pressed="true"`; the filled icon shape; the border]
  toggled+focus-visible: the selection fill and a ring in {color.interaction.focus.ring-container} [both visible at once]

Keyboard:
  Tab / Shift+Tab: Moves focus to and from the button.
  Enter / Space: Activates; the toggle variant flips aria-pressed.

ARIA: native <button> with aria-label; aria-pressed for the toggle (https://www.w3.org/WAI/ARIA/apg/patterns/button/)
Responsive: Fixed square; never shrinks below the density control height, which keeps the 24×24 CSS-pixel target at 320px and in compact density. Direction-neutral; mirrored icons (back, forward) flip in RTL through the host.
Portability: native <button type="button" aria-label="…"> containing one SVG; toggles use aria-pressed, never aria-checked or a class; a tooltip repeats the name on hover and focus.
  native: GTK4 Button with an icon child and the flat style class; ToggleButton for the toggle.
  native: Qt QToolButton with autoRaise; checkable for the toggle.
  native: Terminal UI: a single glyph in brackets; toggled inverted.

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.