j3w1/theme implementation brief — diagnostics 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/diagnostics.json spec: spec/components/diagnostics.md site: https://j3w1.github.io/theme/reference/#c-diagnostics maturity: stable priority: R1 Summary: Inline problem markers in code (underline patterns, an error line and an overview stripe) and the problems panel that lists them as a listbox, each severity carrying its 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): root.bg #100c0c ({color.surface.default}) use root.border #a3676b ({color.border.control}) use-and-report (D-007) code.bg #0c0909 ({color.code.bg}) use code.text #e99499 ({color.text.default}) use code.line-number #ad7175 ({color.code.line-number}) use code.gutter-rule #2b0e0d ({color.code.gutter-rule}) use code.selection-bg #420f0c ({color.code.selection-bg}) use error.underline #e53935 ({color.diagnostic.error.underline}) use error.text #f73f35 ({color.diagnostic.error.text}) use error.stripe #e53935 ({color.diagnostic.error.stripe}) use error.line-bg #2b0e0d ({color.diagnostic.error.bg}) use warning.underline #c9973f ({color.diagnostic.warning.underline}) use warning.text #c9973f ({color.diagnostic.warning.text}) use warning.stripe #c9973f ({color.diagnostic.warning.stripe}) use info.underline #7e9ebb ({color.diagnostic.info.underline}) use info.text #7e9ebb ({color.diagnostic.info.text}) use hint.underline #ad7175 ({color.diagnostic.hint.underline}) use hint.text #ad7175 ({color.text.subtle}) use unused.text #bd787d ({color.diagnostic.unused.text}) use deprecated.text #ad7175 ({color.code.syntax.deprecated}) use row.text #e99499 ({color.text.default}) use row.location #bd787d ({color.text.muted}) use row.divider #2b0e0d ({color.border.divider}) use-and-report (D-008) row.bg-hover #1c0a09 ({color.interaction.hover.bg}) use row.ring #e53935 ({color.interaction.focus.ring}) use row.bg-selected #531310 ({color.interaction.selection.bg}) use row.text-selected #f4eeee ({color.interaction.selection.text}) use row.ring-selected #ffa2a7 ({color.interaction.focus.ring-container}) use header.text #ffa2a7 ({color.text.bright}) use status.text #f73f35 ({color.status.danger.text}) use empty.text #bd787d ({color.text.muted}) use empty.glyph #86a46f ({color.status.success.text}) use State dependency disclosures: D-007 States: default, hover, focus-visible, selected, selected+focus-visible, error, empty default: ranges decorated as above on {color.code.bg}; the error row filled {color.diagnostic.error.bg}; panel rows on {color.surface.default} with 1px {color.border.divider} between them [underline pattern; glyph] hover: panel row background → {color.interaction.hover.bg}; inline ranges unchanged (the hover tooltip is a host surface) [cursor: default on rows] focus-visible: the active row: 1px dashed {color.interaction.focus.ring} at −2px; inline box: the container ring 2px {color.interaction.focus.ring-container} at −3px [the ring] selected: row filled {color.interaction.selection.bg}, text and glyph {color.interaction.selection.text}; the matching inline range filled {color.code.selection-bg} under its underline [`aria-selected`; the glyph stays; the fill spans the row] selected+focus-visible: the selection fill and a 1px dashed ring in {color.interaction.focus.ring-container} [both at once] error: the provider failed: a `role=status` line with `✕` in {color.status.danger.text} above the stale rows; the inline stripe shows the same `✕` at its top [glyph; live announcement] empty: no problems: rows and stripe marks hidden; `✓ No problems` in {color.text.muted} with the glyph in {color.status.success.text}; inline decorations removed [glyph; the absence of decoration] Keyboard: Tab / Shift+Tab: Moves focus to and from the list as one stop; the active row is restored. Down / Up: Moves the active row; selection follows focus in this single-select listbox. Home / End: First or last row. Enter: Opens the location in the editor and moves focus there. Type-ahead: Jumps to the next row whose message starts with the typed characters. (host): Inline markers have no keyboard of their own; navigation between problems (F8-style) is the host's binding. ARIA: inline: decorated spans inside a read-only textbox presentation; panel: APG listbox with aria-activedescendant (https://www.w3.org/WAI/ARIA/apg/patterns/listbox/) Responsive: The panel fills its container; message text wraps, location and rule code stay on the row's end and never truncate the glyph; at 320px the columns stack under the message. The inline sample scrolls horizontally inside its box; the stripe stays on the inline-end edge. RTL mirrors the stripe and the location column while code stays left-to-right. Portability: inline: spans with text-decoration inside the code-editor presentation; panel: