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

Summary: A menu button that opens a list of actions on the raised surface inside a 1px overlay border; the active item is the selection fill and check items show a glyph.

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):
  button.text         #e99499  ({color.text.default})  use
  button.bg           #100c0c  ({color.surface.default})  use
  button.border       #a3676b  ({color.border.control})  use-and-report (D-007)
  button.bg-hover     #1c0a09  ({color.interaction.hover.bg})  use
  button.bg-open      #420f0c  ({color.interaction.pressed.bg})  use
  button.border-open  #e53935  ({color.border.active})  use
  button.ring         #e53935  ({color.interaction.focus.ring})  use
  surface.bg          #160b0b  ({color.surface.raised})  use
  surface.border      #e53935  ({color.border.overlay})  use-and-report (D-008)
  item.text           #e99499  ({color.text.default})  use
  item.bg-hover       #630f0d  ({color.interaction.hover.bg-strong})  use
  item.text-hover     #f4eeee  ({color.text.link-hover})  use
  item.text-disabled  #8a5559  ({color.text.disabled})  use
  active.bg           #531310  ({color.interaction.selection.bg})  use
  active.text         #f4eeee  ({color.interaction.selection.text})  use
  active.ring         #ffa2a7  ({color.interaction.focus.ring-container})  use
  check.glyph         #ffa2a7  ({color.text.bright})  use
  shortcut.text       #bd787d  ({color.text.muted})  use
  separator.color     #2b0e0d  ({color.border.divider})  use-and-report (D-008)
  chevron.color       #a3676b  ({color.icon.decorative})  use
State dependency disclosures: D-007, D-008

States: default, hover, focus-visible, open, closed, disabled, checked, selected
  default: the button at rest; the list on {color.surface.raised} with the {color.border.overlay} frame [—]
  hover: item background → {color.interaction.hover.bg-strong}; text → {color.text.link-hover} [cursor: pointer]
  focus-visible: ring 1px dashed {color.interaction.focus.ring} at −2px on the button; on the active item the ring is {color.interaction.focus.ring-container} [the ring]
  open: button fill {color.interaction.pressed.bg} with 1px {color.border.active}; the list shown [`aria-expanded="true"`; the list is present]
  closed: the button at rest; the list hidden [`aria-expanded="false"`; the list is absent from the tree]
  disabled: item text {color.text.disabled}; no hover; still focusable by arrow keys when `aria-disabled` [`aria-disabled="true"`; cursor: not-allowed]
  checked: the ✓ glyph in {color.text.bright} in the gutter [`aria-checked="true"`; the glyph]
  selected: the active item: fill {color.interaction.selection.bg} with {color.interaction.selection.text} [focus is on the item; `aria-activedescendant` where used]

Keyboard:
  Enter / Space / Down: On the button, opens the menu and focuses the first item; Up opens it and focuses the last.
  Down / Up: Moves to the next or previous item and wraps.
  Home / End: Moves to the first or last item.
  Right / Left: Opens a submenu and focuses its first item; Left closes the submenu and returns to the parent item.
  Enter / Space: Activates the focused item; a check item toggles and the menu stays open.
  Escape: Closes the menu and returns focus to the button.
  Tab: Closes the menu and moves focus to the next tab stop after the button.
  A-Z: Moves focus to the next item starting with the typed character.

ARIA: APG menu button (button with aria-haspopup="menu") opening a menu of menuitem, menuitemcheckbox and separator (https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/)
Responsive: The menu is as wide as its longest item, at least 12rem, at most the viewport minus 16px; it flips above the button when there is no room below and never causes page scroll; at 320px submenus open below their parent instead of beside it. RTL mirrors the check gutter and the submenu side.
Portability: A native button with aria-haspopup="menu", aria-expanded and aria-controls; a ul with role menu and li with role none wrapping buttons with role menuitem or menuitemcheckbox; aria-checked for checks; the menu is hidden until open and positioned by script; the reference renders it statically open in flow.
  native: GTK4 MenuButton with a PopoverMenu; the popover border and background through css-name selectors.
  native: Qt QMenu stylesheet; QMenu::item:selected draws the selection fill; QMenu::indicator draws the check.
  native: Terminal UI: a boxed list; the active row inverted; checks as a leading glyph column.

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.