{ "schemaVersion": 1, "theme": "j3w1-theme", "version": "1.1.0", "profile": "default", "profileStatus": "approved", "release": { "version": "1.1.0", "stability": "release", "policy": "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." }, "sourceDigest": "sha256-C+iD5Q7l0XPU/boMj003wPbPLBOq3C3ZM7s4OfzJ6mc=", "id": "combobox", "family": "forms-advanced", "maturity": "stable", "priority": "R1", "coverage": { "family": "forms-advanced", "priority": "R1", "maturity": "stable", "specified": true, "demonstrated": true, "tested": false, "testImplemented": false, "states": 10 }, "title": "Combobox", "summary": "A text input that filters a listbox of suggestions; the APG combobox with list autocomplete, rendered with the list open.", "anchors": { "site": "https://j3w1.github.io/theme/reference/#c-combobox", "spec": "spec/components/combobox.md", "brief": "exports/components/combobox.brief.txt" }, "native": false, "aria": { "pattern": "APG combobox with list autocomplete: input role combobox owning a listbox of options", "apg": "https://www.w3.org/WAI/ARIA/apg/patterns/combobox/", "role": "combobox" }, "variants": [ { "id": "default", "name": "Flat list" }, { "id": "with-groups", "name": "Grouped options" }, { "id": "no-results", "name": "No results" } ], "sizes": [ "compact", "comfortable" ], "states": [ "default", "hover", "focus-visible", "open", "closed", "selected", "invalid", "invalid+focus-visible", "disabled", "no-results" ], "tokens": { "root.bg": { "alias": "color.surface.input", "value": "#000000", "status": "approved", "deprecated": false, "decisionId": "D-023", "eligibility": { "action": "use", "reason": "Use within the role's documented scope and restrictions.", "decisionIds": [] } }, "root.border": { "alias": "color.border.control", "value": "#a3676b", "status": "proposed", "deprecated": false, "decisionId": "D-007", "eligibility": { "action": "use-and-report", "reason": "Use the pinned value and disclose every pending decision ID; approval statuses are unchanged.", "decisionIds": [ "D-007" ] } }, "root.bg-hover": { "alias": "color.interaction.hover.bg", "value": "#1c0a09", "status": "observed", "deprecated": false, "decisionId": null, "eligibility": { "action": "use", "reason": "Use within the role's documented scope and restrictions.", "decisionIds": [] } }, "root.border-focus": { "alias": "color.border.active", "value": "#e53935", "status": "observed", "deprecated": false, "decisionId": null, "eligibility": { "action": "use", "reason": "Use within the role's documented scope and restrictions.", "decisionIds": [] } }, "root.ring": { "alias": "color.interaction.focus.ring", "value": "#e53935", "status": "observed", "deprecated": false, "decisionId": null, "eligibility": { "action": "use", "reason": "Use within the role's documented scope and restrictions.", "decisionIds": [] } }, "root.ring-invalid": { "alias": "color.interaction.focus.ring-container", "value": "#ffa2a7", "status": "observed", "deprecated": false, "decisionId": null, "eligibility": { "action": "use", "reason": "Use within the role's documented scope and restrictions.", "decisionIds": [] } }, "root.border-invalid": { "alias": "color.status.danger.border", "value": "#e53935", "status": "observed", "deprecated": false, "decisionId": null, "eligibility": { "action": "use", "reason": "Use within the role's documented scope and restrictions.", "decisionIds": [] } }, "root.border-disabled": { "alias": "color.border.disabled", "value": "#7d1310", "status": "observed", "deprecated": false, "decisionId": null, "eligibility": { "action": "use", "reason": "Use within the role's documented scope and restrictions.", "decisionIds": [] } }, "root.bg-disabled": { "alias": "color.interaction.disabled.bg", "value": "#160b0b", "status": "observed", "deprecated": false, "decisionId": null, "eligibility": { "action": "use", "reason": "Use within the role's documented scope and restrictions.", "decisionIds": [] } }, "input.text": { "alias": "color.text.default", "value": "#e99499", "status": "observed", "deprecated": false, "decisionId": null, "eligibility": { "action": "use", "reason": "Use within the role's documented scope and restrictions.", "decisionIds": [] } }, "input.text-disabled": { "alias": "color.text.disabled", "value": "#8a5559", "status": "approved", "deprecated": false, "decisionId": "D-003", "eligibility": { "action": "use", "reason": "Use within the role's documented scope and restrictions.", "decisionIds": [] } }, "input.placeholder": { "alias": "color.text.placeholder", "value": "#a3676b", "status": "approved", "deprecated": false, "decisionId": "D-027", "eligibility": { "action": "use", "reason": "Use within the role's documented scope and restrictions.", "decisionIds": [] } }, "input.caret": { "alias": "color.code.caret", "value": "#e99499", "status": "observed", "deprecated": false, "decisionId": null, "eligibility": { "action": "use", "reason": "Use within the role's documented scope and restrictions.", "decisionIds": [] } }, "toggle.text": { "alias": "color.action.tertiary.text", "value": "#e99499", "status": "observed", "deprecated": false, "decisionId": null, "eligibility": { "action": "use", "reason": "Use within the role's documented scope and restrictions.", "decisionIds": [] } }, "toggle.bg-hover": { "alias": "color.action.tertiary.hover-bg", "value": "#1c0a09", "status": "observed", "deprecated": false, "decisionId": null, "eligibility": { "action": "use", "reason": "Use within the role's documented scope and restrictions.", "decisionIds": [] } }, "label.text": { "alias": "color.text.bright", "value": "#ffa2a7", "status": "observed", "deprecated": false, "decisionId": null, "eligibility": { "action": "use", "reason": "Use within the role's documented scope and restrictions.", "decisionIds": [] } }, "listbox.bg": { "alias": "color.surface.raised", "value": "#160b0b", "status": "approved", "deprecated": false, "decisionId": "D-027", "eligibility": { "action": "use", "reason": "Use within the role's documented scope and restrictions.", "decisionIds": [] } }, "listbox.border": { "alias": "color.border.overlay", "value": "#e53935", "status": "proposed", "deprecated": false, "decisionId": "D-008", "eligibility": { "action": "use-and-report", "reason": "Use the pinned value and disclose every pending decision ID; approval statuses are unchanged.", "decisionIds": [ "D-008" ] } }, "option.text": { "alias": "color.text.default", "value": "#e99499", "status": "observed", "deprecated": false, "decisionId": null, "eligibility": { "action": "use", "reason": "Use within the role's documented scope and restrictions.", "decisionIds": [] } }, "option.bg-hover": { "alias": "color.interaction.hover.bg-strong", "value": "#630f0d", "status": "observed", "deprecated": false, "decisionId": null, "eligibility": { "action": "use", "reason": "Use within the role's documented scope and restrictions.", "decisionIds": [] } }, "option.text-hover": { "alias": "color.text.link-hover", "value": "#f4eeee", "status": "observed", "deprecated": false, "decisionId": null, "eligibility": { "action": "use", "reason": "Use within the role's documented scope and restrictions.", "decisionIds": [] } }, "option.bg-selected": { "alias": "color.interaction.selection.bg", "value": "#531310", "status": "approved", "deprecated": false, "decisionId": "D-027", "eligibility": { "action": "use", "reason": "Use within the role's documented scope and restrictions.", "decisionIds": [] } }, "option.text-selected": { "alias": "color.interaction.selection.text", "value": "#f4eeee", "status": "observed", "deprecated": false, "decisionId": null, "eligibility": { "action": "use", "reason": "Use within the role's documented scope and restrictions.", "decisionIds": [] } }, "option.ring-selected": { "alias": "color.interaction.focus.ring-container", "value": "#ffa2a7", "status": "observed", "deprecated": false, "decisionId": null, "eligibility": { "action": "use", "reason": "Use within the role's documented scope and restrictions.", "decisionIds": [] } }, "group.text": { "alias": "color.text.subtle", "value": "#ad7175", "status": "approved", "deprecated": false, "decisionId": "D-003", "eligibility": { "action": "use", "reason": "Use within the role's documented scope and restrictions.", "decisionIds": [] } }, "group.border": { "alias": "color.border.divider", "value": "#2b0e0d", "status": "proposed", "deprecated": false, "decisionId": "D-008", "eligibility": { "action": "use-and-report", "reason": "Use the pinned value and disclose every pending decision ID; approval statuses are unchanged.", "decisionIds": [ "D-008" ] } }, "empty.text": { "alias": "color.text.muted", "value": "#bd787d", "status": "observed", "deprecated": false, "decisionId": null, "eligibility": { "action": "use", "reason": "Use within the role's documented scope and restrictions.", "decisionIds": [] } }, "help.text": { "alias": "color.text.muted", "value": "#bd787d", "status": "observed", "deprecated": false, "decisionId": null, "eligibility": { "action": "use", "reason": "Use within the role's documented scope and restrictions.", "decisionIds": [] } }, "message.text": { "alias": "color.status.danger.text", "value": "#f73f35", "status": "observed", "deprecated": false, "decisionId": null, "eligibility": { "action": "use", "reason": "Use within the role's documented scope and restrictions.", "decisionIds": [] } } }, "stateRules": [ { "state": "default", "visual": "1px {color.border.control} on {color.surface.input}; list on {color.surface.raised} with a 1px {color.border.overlay}", "channel": "—", "tokens": { "fg": { "alias": "color.text.default", "value": "#e99499", "status": "observed", "deprecated": false, "decisionId": null, "eligibility": { "action": "use", "reason": "Use within the role's documented scope and restrictions.", "decisionIds": [] } }, "bg": { "alias": "color.surface.input", "value": "#000000", "status": "approved", "deprecated": false, "decisionId": "D-023", "eligibility": { "action": "use", "reason": "Use within the role's documented scope and restrictions.", "decisionIds": [] } }, "border": { "alias": "color.border.control", "value": "#a3676b", "status": "proposed", "deprecated": false, "decisionId": "D-007", "eligibility": { "action": "use-and-report", "reason": "Use the pinned value and disclose every pending decision ID; approval statuses are unchanged.", "decisionIds": [ "D-007" ] } } } }, { "state": "hover", "visual": "box background → {color.interaction.hover.bg}; the hovered option → {color.interaction.hover.bg-strong} with {color.text.link-hover}", "channel": "cursor: text on the box, default on the list", "tokens": { "fg": { "alias": "color.text.link-hover", "value": "#f4eeee", "status": "observed", "deprecated": false, "decisionId": null, "eligibility": { "action": "use", "reason": "Use within the role's documented scope and restrictions.", "decisionIds": [] } }, "bg": { "alias": "color.interaction.hover.bg-strong", "value": "#630f0d", "status": "observed", "deprecated": false, "decisionId": null, "eligibility": { "action": "use", "reason": "Use within the role's documented scope and restrictions.", "decisionIds": [] } } } }, { "state": "focus-visible", "visual": "box border → {color.border.active}; ring 1px dashed {color.interaction.focus.ring} at −2px", "channel": "the ring", "tokens": { "fg": { "alias": "color.text.default", "value": "#e99499", "status": "observed", "deprecated": false, "decisionId": null, "eligibility": { "action": "use", "reason": "Use within the role's documented scope and restrictions.", "decisionIds": [] } }, "bg": { "alias": "color.surface.input", "value": "#000000", "status": "approved", "deprecated": false, "decisionId": "D-023", "eligibility": { "action": "use", "reason": "Use within the role's documented scope and restrictions.", "decisionIds": [] } }, "border": { "alias": "color.border.active", "value": "#e53935", "status": "observed", "deprecated": false, "decisionId": null, "eligibility": { "action": "use", "reason": "Use within the role's documented scope and restrictions.", "decisionIds": [] } }, "outline": { "alias": "color.interaction.focus.ring", "value": "#e53935", "status": "observed", "deprecated": false, "decisionId": null, "eligibility": { "action": "use", "reason": "Use within the role's documented scope and restrictions.", "decisionIds": [] } } } }, { "state": "open", "visual": "list visible below the box; toggle glyph rotated 180°", "channel": "`aria-expanded=\"true\"`; the toggle glyph", "tokens": { "fg": { "alias": "color.text.default", "value": "#e99499", "status": "observed", "deprecated": false, "decisionId": null, "eligibility": { "action": "use", "reason": "Use within the role's documented scope and restrictions.", "decisionIds": [] } }, "bg": { "alias": "color.surface.raised", "value": "#160b0b", "status": "approved", "deprecated": false, "decisionId": "D-027", "eligibility": { "action": "use", "reason": "Use within the role's documented scope and restrictions.", "decisionIds": [] } }, "border": { "alias": "color.border.overlay", "value": "#e53935", "status": "proposed", "deprecated": false, "decisionId": "D-008", "eligibility": { "action": "use-and-report", "reason": "Use the pinned value and disclose every pending decision ID; approval statuses are unchanged.", "decisionIds": [ "D-008" ] } } } }, { "state": "closed", "visual": "list absent; the box unchanged", "channel": "`aria-expanded=\"false\"`; nothing below the box", "tokens": {} }, { "state": "selected", "visual": "the active option filled {color.interaction.selection.bg} with {color.interaction.selection.text} and a 1px dashed ring in {color.interaction.focus.ring-container}", "channel": "`aria-selected=\"true\"`; `aria-activedescendant`; the ring", "tokens": { "fg": { "alias": "color.interaction.selection.text", "value": "#f4eeee", "status": "observed", "deprecated": false, "decisionId": null, "eligibility": { "action": "use", "reason": "Use within the role's documented scope and restrictions.", "decisionIds": [] } }, "bg": { "alias": "color.interaction.selection.bg", "value": "#531310", "status": "approved", "deprecated": false, "decisionId": "D-027", "eligibility": { "action": "use", "reason": "Use within the role's documented scope and restrictions.", "decisionIds": [] } }, "outline": { "alias": "color.interaction.focus.ring-container", "value": "#ffa2a7", "status": "observed", "deprecated": false, "decisionId": null, "eligibility": { "action": "use", "reason": "Use within the role's documented scope and restrictions.", "decisionIds": [] } } } }, { "state": "invalid", "visual": "box border 2px {color.status.danger.border}; message with the ✕ glyph", "channel": "border width 1 → 2px; glyph; `aria-invalid`", "tokens": { "fg": { "alias": "color.text.default", "value": "#e99499", "status": "observed", "deprecated": false, "decisionId": null, "eligibility": { "action": "use", "reason": "Use within the role's documented scope and restrictions.", "decisionIds": [] } }, "bg": { "alias": "color.surface.input", "value": "#000000", "status": "approved", "deprecated": false, "decisionId": "D-023", "eligibility": { "action": "use", "reason": "Use within the role's documented scope and restrictions.", "decisionIds": [] } }, "border": { "alias": "color.status.danger.border", "value": "#e53935", "status": "observed", "deprecated": false, "decisionId": null, "eligibility": { "action": "use", "reason": "Use within the role's documented scope and restrictions.", "decisionIds": [] } } } }, { "state": "invalid+focus-visible", "visual": "the 2px danger border and the ring in {color.interaction.focus.ring-container} at −4px", "channel": "double boundary", "tokens": { "fg": { "alias": "color.text.default", "value": "#e99499", "status": "observed", "deprecated": false, "decisionId": null, "eligibility": { "action": "use", "reason": "Use within the role's documented scope and restrictions.", "decisionIds": [] } }, "bg": { "alias": "color.surface.input", "value": "#000000", "status": "approved", "deprecated": false, "decisionId": "D-023", "eligibility": { "action": "use", "reason": "Use within the role's documented scope and restrictions.", "decisionIds": [] } }, "border": { "alias": "color.status.danger.border", "value": "#e53935", "status": "observed", "deprecated": false, "decisionId": null, "eligibility": { "action": "use", "reason": "Use within the role's documented scope and restrictions.", "decisionIds": [] } }, "outline": { "alias": "color.interaction.focus.ring-container", "value": "#ffa2a7", "status": "observed", "deprecated": false, "decisionId": null, "eligibility": { "action": "use", "reason": "Use within the role's documented scope and restrictions.", "decisionIds": [] } } } }, { "state": "disabled", "visual": "text {color.text.disabled}; border {color.border.disabled}; background {color.interaction.disabled.bg}; list never opens", "channel": "`disabled`; cursor: not-allowed", "tokens": {} }, { "state": "no-results", "visual": "the list holds only the empty row in {color.text.muted}, italic", "channel": "`aria-disabled` row; italic; a polite announcement of zero matches", "tokens": { "fg": { "alias": "color.text.muted", "value": "#bd787d", "status": "observed", "deprecated": false, "decisionId": null, "eligibility": { "action": "use", "reason": "Use within the role's documented scope and restrictions.", "decisionIds": [] } }, "bg": { "alias": "color.surface.raised", "value": "#160b0b", "status": "approved", "deprecated": false, "decisionId": "D-027", "eligibility": { "action": "use", "reason": "Use within the role's documented scope and restrictions.", "decisionIds": [] } }, "border": { "alias": "color.border.overlay", "value": "#e53935", "status": "proposed", "deprecated": false, "decisionId": "D-008", "eligibility": { "action": "use-and-report", "reason": "Use the pinned value and disclose every pending decision ID; approval statuses are unchanged.", "decisionIds": [ "D-008" ] } } } } ], "keyboard": [ { "key": "Down / Up", "action": "Opens the list if closed; moves the active option, wrapping at either end; the input keeps DOM focus." }, { "key": "Enter", "action": "Accepts the active option into the input and closes the list." }, { "key": "Escape", "action": "Closes the list; a second Escape clears the input." }, { "key": "Alt+Down / Alt+Up", "action": "Opens or closes the list without moving the active option." }, { "key": "Home / End", "action": "Moves the caret inside the input, never the active option." }, { "key": "Tab", "action": "Leaves the control; an open list closes and the typed text stays." } ], "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": { "web": " owning a