j3w1/theme implementation brief — combobox 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/combobox.json spec: spec/components/combobox.md site: https://j3w1.github.io/theme/reference/#c-combobox maturity: stable priority: R1 Summary: A text input that filters a listbox of suggestions; the APG combobox with list autocomplete, rendered with the list open. 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 #000000 ({color.surface.input}) use root.border #a3676b ({color.border.control}) use-and-report (D-007) root.bg-hover #1c0a09 ({color.interaction.hover.bg}) use root.border-focus #e53935 ({color.border.active}) use root.ring #e53935 ({color.interaction.focus.ring}) use root.ring-invalid #ffa2a7 ({color.interaction.focus.ring-container}) use root.border-invalid #e53935 ({color.status.danger.border}) use root.border-disabled #7d1310 ({color.border.disabled}) use root.bg-disabled #160b0b ({color.interaction.disabled.bg}) use input.text #e99499 ({color.text.default}) use input.text-disabled #8a5559 ({color.text.disabled}) use input.placeholder #a3676b ({color.text.placeholder}) use input.caret #e99499 ({color.code.caret}) use toggle.text #e99499 ({color.action.tertiary.text}) use toggle.bg-hover #1c0a09 ({color.action.tertiary.hover-bg}) use label.text #ffa2a7 ({color.text.bright}) use listbox.bg #160b0b ({color.surface.raised}) use listbox.border #e53935 ({color.border.overlay}) use-and-report (D-008) option.text #e99499 ({color.text.default}) use option.bg-hover #630f0d ({color.interaction.hover.bg-strong}) use option.text-hover #f4eeee ({color.text.link-hover}) use option.bg-selected #531310 ({color.interaction.selection.bg}) use option.text-selected #f4eeee ({color.interaction.selection.text}) use option.ring-selected #ffa2a7 ({color.interaction.focus.ring-container}) use group.text #ad7175 ({color.text.subtle}) use group.border #2b0e0d ({color.border.divider}) use-and-report (D-008) empty.text #bd787d ({color.text.muted}) use help.text #bd787d ({color.text.muted}) use message.text #f73f35 ({color.status.danger.text}) use State dependency disclosures: D-007, D-008 States: default, hover, focus-visible, open, closed, selected, invalid, invalid+focus-visible, disabled, no-results default: 1px {color.border.control} on {color.surface.input}; list on {color.surface.raised} with a 1px {color.border.overlay} [—] hover: box background → {color.interaction.hover.bg}; the hovered option → {color.interaction.hover.bg-strong} with {color.text.link-hover} [cursor: text on the box, default on the list] focus-visible: box border → {color.border.active}; ring 1px dashed {color.interaction.focus.ring} at −2px [the ring] open: list visible below the box; toggle glyph rotated 180° [`aria-expanded="true"`; the toggle glyph] closed: list absent; the box unchanged [`aria-expanded="false"`; nothing below the box] selected: the active option filled {color.interaction.selection.bg} with {color.interaction.selection.text} and a 1px dashed ring in {color.interaction.focus.ring-container} [`aria-selected="true"`; `aria-activedescendant`; the ring] invalid: box border 2px {color.status.danger.border}; message with the ✕ glyph [border width 1 → 2px; glyph; `aria-invalid`] invalid+focus-visible: the 2px danger border and the ring in {color.interaction.focus.ring-container} at −4px [double boundary] disabled: text {color.text.disabled}; border {color.border.disabled}; background {color.interaction.disabled.bg}; list never opens [`disabled`; cursor: not-allowed] no-results: the list holds only the empty row in {color.text.muted}, italic [`aria-disabled` row; italic; a polite announcement of zero matches] Keyboard: Down / Up: Opens the list if closed; moves the active option, wrapping at either end; the input keeps DOM focus. Enter: Accepts the active option into the input and closes the list. Escape: Closes the list; a second Escape clears the input. Alt+Down / Alt+Up: Opens or closes the list without moving the active option. Home / End: Moves the caret inside the input, never the active option. Tab: Leaves the control; an open list closes and the typed text stays. ARIA: APG combobox with list autocomplete: input role combobox owning a listbox of options (https://www.w3.org/WAI/ARIA/apg/patterns/combobox/) Responsive: The box fills its field container with min-width 0; the list is as wide as the box and scrolls after eight rows; at 320px nothing overflows horizontally. RTL mirrors the toggle and the group indentation. Portability: owning a