a11y-hud 0.4.0 → 0.4.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/bookmarklet.html +1 -1
- package/dist/index.cjs +2 -2
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +2 -2
- package/dist/index.js.map +1 -1
- package/dist/index.umd.js +30 -27
- package/dist/index.umd.js.map +1 -1
- package/package.json +1 -1
package/dist/bookmarklet.html
CHANGED
|
@@ -121,7 +121,7 @@
|
|
|
121
121
|
|
|
122
122
|
<div class="version-row">
|
|
123
123
|
<span>This installer uses <strong>latest</strong>. To pin a specific release:</span>
|
|
124
|
-
<a href="javascript:(function(){if(window.A11yHud){window.A11yHud.mount();return;}var s=document.createElement('script');s.src='https://cdn.jsdelivr.net/npm/a11y-hud@0.4.
|
|
124
|
+
<a href="javascript:(function(){if(window.A11yHud){window.A11yHud.mount();return;}var s=document.createElement('script');s.src='https://cdn.jsdelivr.net/npm/a11y-hud@0.4.1/dist/index.umd.js';s.onload=function(){window.A11yHud.mount();};document.head.appendChild(s);})()" title="Bookmarklet pinned to v0.4.1">Pinned to v0.4.1</a>
|
|
125
125
|
</div>
|
|
126
126
|
|
|
127
127
|
<div class="footer">
|
package/dist/index.cjs
CHANGED
|
@@ -311,7 +311,7 @@ async function runScan(target = document.body, runOnly) {
|
|
|
311
311
|
}
|
|
312
312
|
|
|
313
313
|
// src/styles/base.css
|
|
314
|
-
var base_default = ':host {\n --a11y-hud-bg: #1e1e2e;\n --a11y-hud-bg-elevated: #313244;\n --a11y-hud-bg-hover: #45475a;\n --a11y-hud-border: #45475a;\n --a11y-hud-text: #cdd6f4;\n --a11y-hud-text-muted: #a6adc8;\n --a11y-hud-critical: #f38ba8;\n --a11y-hud-serious: #fab387;\n --a11y-hud-moderate: #f9e2af;\n --a11y-hud-minor: #89b4fa;\n --a11y-hud-highlight: #cba6f7;\n --a11y-hud-tag: #94e2d5;\n --a11y-hud-focus-ring: #89b4fa;\n --a11y-hud-radius: 8px;\n --a11y-hud-font: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, monospace;\n --a11y-hud-z-index: 999999;\n --a11y-hud-panel-width: 380px;\n\n all: initial;\n display: block;\n position: fixed;\n inset-block-end: 16px;\n inset-inline-end: 16px;\n z-index: var(--a11y-hud-z-index);\n font-family: var(--a11y-hud-font);\n font-size: 13px;\n line-height: 1.5;\n color: var(--a11y-hud-text);\n contain: layout style;\n}\n\n*,\n*::before,\n*::after {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n}\n\n.panel {\n width: var(--a11y-hud-panel-width);\n max-height: 70dvh;\n display: flex;\n flex-direction: column;\n background: var(--a11y-hud-bg);\n border: 1px solid var(--a11y-hud-border);\n border-radius: var(--a11y-hud-radius);\n overflow: hidden;\n box-shadow: 0 8px 32px rgb(0 0 0 / 40%);\n}\n\n.panel-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 10px 12px;\n background: var(--a11y-hud-bg-elevated);\n border-block-end: 1px solid var(--a11y-hud-border);\n flex-shrink: 0;\n}\n\n.btn-panel-title {\n all: unset;\n display: flex;\n align-items: center;\n gap: 6px;\n font-weight: 600;\n letter-spacing: 0.02em;\n cursor: pointer;\n border-radius: 4px;\n padding: 2px 4px;\n margin: -2px -4px;\n transition: color 120ms;\n}\n\n.btn-panel-title:focus-visible {\n outline: 2px solid var(--a11y-hud-focus-ring);\n outline-offset: 2px;\n}\n\n.panel-title-icon {\n display: flex;\n align-items: center;\n width: 16px;\n height: 16px;\n flex-shrink: 0;\n position: relative;\n transition: color 120ms;\n}\n\n.panel-title-icon svg {\n width: 100%;\n height: 100%;\n}\n\n.btn-panel-title[data-active] .panel-title-icon {\n color: var(--a11y-hud-highlight);\n}\n\n.panel-title-chevron {\n display: flex;\n align-items: center;\n width: 12px;\n height: 12px;\n color: var(--a11y-hud-text-muted);\n transition: transform 200ms;\n}\n\n.panel-title-chevron svg {\n width: 100%;\n height: 100%;\n}\n\n.btn-panel-title[aria-expanded="true"] .panel-title-chevron {\n transform: rotate(180deg);\n}\n\n.panel-count {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: 20px;\n height: 20px;\n padding-inline: 6px;\n border-radius: 10px;\n font-size: 11px;\n font-weight: 700;\n background: var(--a11y-hud-critical);\n color: var(--a11y-hud-bg);\n}\n\n.panel-count[data-count="0"] {\n background: var(--a11y-hud-minor);\n}\n\n.panel-actions {\n display: flex;\n align-items: center;\n gap: 4px;\n}\n\n.btn-icon {\n all: unset;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 28px;\n height: 28px;\n border-radius: 4px;\n color: var(--a11y-hud-text-muted);\n cursor: pointer;\n transition:\n background 120ms,\n color 120ms;\n}\n\n.btn-icon svg {\n width: 14px;\n height: 14px;\n pointer-events: none;\n}\n\n.btn-icon:hover {\n background: var(--a11y-hud-bg-hover);\n color: var(--a11y-hud-text);\n}\n\n.btn-icon:focus-visible {\n outline: 2px solid var(--a11y-hud-focus-ring);\n outline-offset: 1px;\n}\n\n.btn-icon[aria-pressed="true"] {\n background: var(--a11y-hud-bg-elevated);\n color: var(--a11y-hud-highlight);\n outline: 1px solid var(--a11y-hud-highlight);\n outline-offset: -1px;\n}\n\n.btn-icon[data-scanning] {\n animation: spin 1s linear infinite;\n}\n\n@keyframes spin {\n to {\n transform: rotate(360deg);\n }\n}\n\n.panel-filters {\n display: none;\n flex-direction: column;\n gap: 6px;\n padding: 8px 12px;\n border-block-end: 1px solid var(--a11y-hud-border);\n flex-shrink: 0;\n}\n\n.panel-filters[data-open] {\n display: flex;\n}\n\n.filter-group {\n display: flex;\n flex-wrap: wrap;\n gap: 4px;\n}\n\n.filter-chip {\n all: unset;\n display: inline-flex;\n align-items: center;\n height: 22px;\n padding-inline: 8px;\n border-radius: 11px;\n font-size: 11px;\n font-weight: 600;\n letter-spacing: 0.02em;\n cursor: pointer;\n border: 1px solid var(--a11y-hud-border);\n color: var(--a11y-hud-text-muted);\n background: transparent;\n transition:\n background 120ms,\n color 120ms,\n border-color 120ms;\n}\n\n.filter-chip:hover {\n background: var(--a11y-hud-bg-hover);\n color: var(--a11y-hud-text);\n}\n\n.filter-chip:focus-visible {\n outline: 2px solid var(--a11y-hud-focus-ring);\n outline-offset: 1px;\n}\n\n.filter-chip[aria-pressed="true"][data-severity="critical"] {\n background: var(--a11y-hud-critical);\n border-color: var(--a11y-hud-critical);\n color: var(--a11y-hud-bg);\n}\n\n.filter-chip[aria-pressed="true"][data-severity="serious"] {\n background: var(--a11y-hud-serious);\n border-color: var(--a11y-hud-serious);\n color: var(--a11y-hud-bg);\n}\n\n.filter-chip[aria-pressed="true"][data-severity="moderate"] {\n background: var(--a11y-hud-moderate);\n border-color: var(--a11y-hud-moderate);\n color: var(--a11y-hud-bg);\n}\n\n.filter-chip[aria-pressed="true"][data-severity="minor"] {\n background: var(--a11y-hud-minor);\n border-color: var(--a11y-hud-minor);\n color: var(--a11y-hud-bg);\n}\n\n.filter-chip[aria-pressed="true"][data-level] {\n background: var(--a11y-hud-highlight);\n border-color: var(--a11y-hud-highlight);\n color: var(--a11y-hud-bg);\n}\n\n.filter-chip[aria-pressed="true"][data-ruleset] {\n background: var(--a11y-hud-tag);\n border-color: var(--a11y-hud-tag);\n color: var(--a11y-hud-bg);\n}\n\n.panel-body {\n flex: 1;\n overflow-x: hidden;\n overflow-y: auto;\n overscroll-behavior: contain;\n}\n\n.panel-body:focus-visible {\n outline: none;\n}\n\n.violation-list {\n list-style: none;\n}\n\n.violation-item {\n border-block-end: 1px solid var(--a11y-hud-border);\n}\n\n.violation-item:last-child {\n border-block-end: none;\n}\n\n.violation-toggle {\n all: unset;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n gap: 8px;\n width: 100%;\n padding: 8px 12px;\n cursor: pointer;\n text-align: start;\n transition: background 120ms;\n}\n\n.violation-toggle:hover {\n background: var(--a11y-hud-bg-elevated);\n}\n\n.violation-toggle:focus-visible {\n outline: 2px solid var(--a11y-hud-focus-ring);\n outline-offset: -2px;\n}\n\n.severity-icon {\n display: flex;\n align-items: center;\n flex-shrink: 0;\n width: 14px;\n height: 14px;\n}\n\n.severity-icon svg {\n width: 100%;\n height: 100%;\n}\n\n.severity-icon[data-severity="critical"] {\n color: var(--a11y-hud-critical);\n}\n\n.severity-icon[data-severity="serious"] {\n color: var(--a11y-hud-serious);\n}\n\n.severity-icon[data-severity="moderate"] {\n color: var(--a11y-hud-moderate);\n}\n\n.severity-icon[data-severity="minor"] {\n color: var(--a11y-hud-minor);\n}\n\n.violation-rule {\n flex: 1;\n font-size: 12px;\n font-weight: 500;\n word-break: break-word;\n}\n\n.violation-node-count {\n font-size: 11px;\n color: var(--a11y-hud-text-muted);\n flex-shrink: 0;\n}\n\n.chevron-icon {\n display: flex;\n align-items: center;\n flex-shrink: 0;\n width: 14px;\n height: 14px;\n color: var(--a11y-hud-text-muted);\n transition: transform 200ms;\n}\n\n.chevron-icon svg {\n width: 100%;\n height: 100%;\n}\n\n.violation-toggle[aria-expanded="true"] .chevron-icon {\n transform: rotate(180deg);\n}\n\n.violation-detail {\n padding: 0 12px 10px 34px;\n display: none;\n flex-direction: column;\n gap: 8px;\n}\n\n.violation-detail[data-open] {\n display: flex;\n}\n\n.violation-description {\n font-size: 12px;\n color: var(--a11y-hud-text-muted);\n line-height: 1.6;\n}\n\n.violation-nodes-list {\n list-style: none;\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n\n.violation-node-item {\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.btn-highlight {\n all: unset;\n display: inline-flex;\n align-items: center;\n gap: 4px;\n padding: 3px 8px;\n border-radius: 4px;\n font-size: 11px;\n font-family: var(--a11y-hud-font);\n color: var(--a11y-hud-highlight);\n border: 1px solid var(--a11y-hud-border);\n cursor: pointer;\n word-break: break-all;\n transition: background 120ms;\n max-width: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.btn-highlight:hover {\n background: var(--a11y-hud-bg-elevated);\n}\n\n.btn-highlight:focus-visible {\n outline: 2px solid var(--a11y-hud-focus-ring);\n outline-offset: 1px;\n}\n\n.violation-footer {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 8px;\n}\n\n.violation-help-link {\n font-size: 11px;\n color: var(--a11y-hud-minor);\n text-decoration: none;\n}\n\n.violation-help-link:hover {\n text-decoration: underline;\n}\n\n.violation-help-link:focus-visible {\n outline: 2px solid var(--a11y-hud-focus-ring);\n outline-offset: 1px;\n border-radius: 2px;\n}\n\n.btn-copy-single {\n all: unset;\n display: inline-flex;\n align-items: center;\n gap: 4px;\n padding: 2px 6px;\n border-radius: 4px;\n font-size: 11px;\n font-family: var(--a11y-hud-font);\n color: var(--a11y-hud-text-muted);\n cursor: pointer;\n transition:\n background 120ms,\n color 120ms;\n}\n\n.btn-copy-single svg {\n width: 12px;\n height: 12px;\n pointer-events: none;\n}\n\n.btn-copy-single:hover {\n background: var(--a11y-hud-bg-elevated);\n color: var(--a11y-hud-text);\n}\n\n.btn-copy-single:focus-visible {\n outline: 2px solid var(--a11y-hud-focus-ring);\n outline-offset: 1px;\n}\n\n.btn-ignore-rule {\n all: unset;\n display: inline-flex;\n align-items: center;\n gap: 4px;\n padding: 2px 6px;\n border-radius: 4px;\n font-size: 11px;\n font-family: var(--a11y-hud-font);\n color: var(--a11y-hud-text-muted);\n cursor: pointer;\n transition:\n background 120ms,\n color 120ms;\n}\n\n.btn-ignore-rule svg {\n width: 12px;\n height: 12px;\n pointer-events: none;\n}\n\n.btn-ignore-rule:hover {\n background: var(--a11y-hud-bg-elevated);\n color: var(--a11y-hud-critical);\n}\n\n.btn-ignore-rule:focus-visible {\n outline: 2px solid var(--a11y-hud-focus-ring);\n outline-offset: 1px;\n}\n\n/* \u2500\u2500 Ignored rules section \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.ignored-section {\n border-top: 1px solid var(--a11y-hud-border);\n margin-top: 8px;\n}\n\n.ignored-section-toggle {\n all: unset;\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n padding: 8px 12px;\n font-size: 11px;\n font-family: var(--a11y-hud-font);\n font-weight: 600;\n color: var(--a11y-hud-text-muted);\n cursor: pointer;\n gap: 6px;\n box-sizing: border-box;\n}\n\n.ignored-section-toggle:hover {\n color: var(--a11y-hud-text);\n}\n\n.ignored-section-toggle:focus-visible {\n outline: 2px solid var(--a11y-hud-focus-ring);\n outline-offset: 1px;\n}\n\n.ignored-section-toggle .chevron-icon {\n width: 12px;\n height: 12px;\n transition: transform 120ms;\n flex-shrink: 0;\n}\n\n.ignored-section-toggle[aria-expanded="true"] .chevron-icon {\n transform: rotate(180deg);\n}\n\n.ignored-section-body {\n display: none;\n padding: 0 12px 10px;\n}\n\n.ignored-section-body[data-open] {\n display: block;\n}\n\n.ignored-empty {\n font-size: 11px;\n color: var(--a11y-hud-text-muted);\n margin: 0 0 8px;\n}\n\n.ignored-list {\n list-style: none;\n display: flex;\n flex-direction: column;\n gap: 4px;\n margin: 0 0 8px;\n padding: 0;\n}\n\n.ignored-entry {\n display: flex;\n align-items: center;\n gap: 6px;\n font-size: 11px;\n}\n\n.ignored-rule-id {\n font-weight: 600;\n color: var(--a11y-hud-text);\n}\n\n.ignored-selector {\n font-size: 10px;\n font-family: ui-monospace, monospace;\n color: var(--a11y-hud-text-muted);\n background: var(--a11y-hud-bg-elevated);\n padding: 1px 4px;\n border-radius: 3px;\n}\n\n.btn-remove-ignore {\n all: unset;\n display: inline-flex;\n align-items: center;\n cursor: pointer;\n color: var(--a11y-hud-text-muted);\n margin-left: auto;\n padding: 2px;\n border-radius: 3px;\n transition: color 120ms;\n}\n\n.btn-remove-ignore svg {\n width: 12px;\n height: 12px;\n pointer-events: none;\n}\n\n.btn-remove-ignore:hover {\n color: var(--a11y-hud-critical);\n}\n\n.btn-remove-ignore:focus-visible {\n outline: 2px solid var(--a11y-hud-focus-ring);\n outline-offset: 1px;\n}\n\n.ignored-actions {\n display: flex;\n align-items: center;\n gap: 6px;\n flex-wrap: wrap;\n}\n\n.btn-sm {\n all: unset;\n display: inline-flex;\n align-items: center;\n gap: 4px;\n padding: 3px 8px;\n border-radius: 4px;\n font-size: 11px;\n font-family: var(--a11y-hud-font);\n color: var(--a11y-hud-text-muted);\n border: 1px solid var(--a11y-hud-border);\n cursor: pointer;\n transition:\n background 120ms,\n color 120ms;\n}\n\n.btn-sm svg {\n width: 11px;\n height: 11px;\n pointer-events: none;\n}\n\n.btn-sm:hover {\n background: var(--a11y-hud-bg-elevated);\n color: var(--a11y-hud-text);\n}\n\n.btn-sm:focus-visible {\n outline: 2px solid var(--a11y-hud-focus-ring);\n outline-offset: 1px;\n}\n\n.empty-state {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 8px;\n padding: 32px 16px;\n color: var(--a11y-hud-text-muted);\n}\n\n.empty-state-icon {\n width: 32px;\n height: 32px;\n color: var(--a11y-hud-minor);\n}\n\n.empty-state-icon svg {\n width: 100%;\n height: 100%;\n}\n\n.empty-state-title {\n font-weight: 600;\n color: var(--a11y-hud-text);\n}\n\n.empty-state-body {\n font-size: 12px;\n text-align: center;\n}\n\n.scanning-state {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n padding: 24px 16px;\n color: var(--a11y-hud-text-muted);\n font-size: 12px;\n}\n\n.scanning-spinner {\n width: 16px;\n height: 16px;\n color: var(--a11y-hud-minor);\n animation: spin 1s linear infinite;\n}\n\n.scanning-spinner svg {\n width: 100%;\n height: 100%;\n}\n\n/* \u2500\u2500 Keyboard mode view \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.panel[data-kbd-mode] .panel-filters {\n display: none;\n}\n\n.kbd-mode-view {\n display: flex;\n flex-direction: column;\n gap: 10px;\n padding: 8px 0;\n}\n\n.kbd-mode-header {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 0 12px 8px;\n border-bottom: 1px solid var(--a11y-hud-border);\n font-size: 12px;\n font-weight: 600;\n}\n\n.kbd-mode-stat {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n color: var(--a11y-hud-text-muted);\n}\n\n.kbd-mode-stat svg {\n width: 13px;\n height: 13px;\n}\n\n.kbd-mode-stat--warn {\n color: var(--a11y-hud-serious);\n}\n\n.kbd-mode-stat--ok {\n color: var(--a11y-hud-minor);\n}\n\n.kbd-violation-list,\n.kbd-element-list {\n list-style: none;\n display: flex;\n flex-direction: column;\n gap: 4px;\n margin: 0;\n padding: 0 12px;\n}\n\n.kbd-violation-item {\n display: flex;\n align-items: flex-start;\n gap: 6px;\n font-size: 11px;\n color: var(--a11y-hud-text);\n padding: 4px 0;\n border-bottom: 1px solid var(--a11y-hud-border);\n}\n\n.kbd-violation-item:last-child {\n border-bottom: none;\n}\n\n.kbd-violation-msg {\n flex: 1;\n line-height: 1.4;\n}\n\n.kbd-element-item {\n display: flex;\n align-items: center;\n}\n\n.btn-kbd-element {\n all: unset;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n gap: 6px;\n width: 100%;\n font-size: 11px;\n color: var(--a11y-hud-text-muted);\n padding: 3px 6px;\n border-radius: 4px;\n cursor: pointer;\n transition: background 120ms;\n}\n\n.btn-kbd-element:hover {\n background: var(--a11y-hud-bg-elevated);\n color: var(--a11y-hud-text);\n}\n\n.btn-kbd-element:focus-visible {\n outline: 2px solid var(--a11y-hud-focus-ring);\n outline-offset: 1px;\n}\n\n.kbd-element-index {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: 20px;\n height: 20px;\n border-radius: 10px;\n background: #7c3aed;\n color: #fff;\n font-size: 10px;\n font-weight: 700;\n flex-shrink: 0;\n}\n\n.kbd-element-selector {\n font-family: ui-monospace, monospace;\n font-size: 10px;\n color: var(--a11y-hud-highlight);\n}\n\n.kbd-element-tag {\n color: var(--a11y-hud-text-muted);\n font-size: 10px;\n}\n\n.kbd-tabindex-badge {\n font-size: 10px;\n font-family: ui-monospace, monospace;\n background: var(--a11y-hud-bg-elevated);\n color: var(--a11y-hud-serious);\n padding: 1px 4px;\n border-radius: 3px;\n border: 1px solid var(--a11y-hud-border);\n}\n\n.kbd-empty {\n font-size: 12px;\n color: var(--a11y-hud-text-muted);\n padding: 0 12px;\n margin: 0;\n}\n\n/* \u2500\u2500 FAB (minimized state) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.fab {\n all: unset;\n display: none;\n align-items: center;\n gap: 6px;\n padding: 8px 14px;\n background: var(--a11y-hud-bg);\n border: 1px solid var(--a11y-hud-border);\n border-radius: 24px;\n color: var(--a11y-hud-text);\n cursor: pointer;\n font-family: var(--a11y-hud-font);\n font-size: 13px;\n font-weight: 600;\n box-shadow: 0 4px 16px rgb(0 0 0 / 30%);\n transition: background 120ms;\n}\n\n:host([data-minimized]) .fab {\n display: flex;\n}\n\n:host([data-minimized]) .panel {\n display: none;\n}\n\n@keyframes panel-in {\n from {\n opacity: 0;\n transform: translateY(6px);\n }\n\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n.panel {\n animation: panel-in 120ms ease-out;\n}\n\n.fab:hover {\n background: var(--a11y-hud-bg-elevated);\n}\n\n.fab:focus-visible {\n outline: 2px solid var(--a11y-hud-focus-ring);\n outline-offset: 2px;\n}\n\n.fab-icon {\n display: flex;\n align-items: center;\n width: 14px;\n height: 14px;\n}\n\n.fab-icon svg {\n width: 100%;\n height: 100%;\n}\n\n.fab-count {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: 18px;\n height: 18px;\n padding-inline: 5px;\n border-radius: 9px;\n font-size: 11px;\n font-weight: 700;\n background: var(--a11y-hud-critical);\n color: var(--a11y-hud-bg);\n}\n\n.fab-count[data-count="0"] {\n background: var(--a11y-hud-minor);\n}\n';
|
|
314
|
+
var base_default = ':host {\n --a11y-hud-bg: #1e1e2e;\n --a11y-hud-bg-elevated: #313244;\n --a11y-hud-bg-hover: #45475a;\n --a11y-hud-border: #45475a;\n --a11y-hud-text: #cdd6f4;\n --a11y-hud-text-muted: #a6adc8;\n --a11y-hud-critical: #f38ba8;\n --a11y-hud-serious: #fab387;\n --a11y-hud-moderate: #f9e2af;\n --a11y-hud-minor: #89b4fa;\n --a11y-hud-highlight: #cba6f7;\n --a11y-hud-tag: #94e2d5;\n --a11y-hud-focus-ring: #89b4fa;\n --a11y-hud-radius: 8px;\n --a11y-hud-font: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, monospace;\n --a11y-hud-z-index: 999999;\n --a11y-hud-panel-width: 380px;\n\n all: initial;\n display: block;\n position: fixed;\n inset-block-end: 16px;\n inset-inline-end: 16px;\n z-index: var(--a11y-hud-z-index);\n font-family: var(--a11y-hud-font);\n font-size: 13px;\n line-height: 1.5;\n color: var(--a11y-hud-text);\n contain: layout style;\n}\n\n*,\n*::before,\n*::after {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n}\n\n.panel {\n width: var(--a11y-hud-panel-width);\n max-height: 70dvh;\n display: flex;\n flex-direction: column;\n background: var(--a11y-hud-bg);\n border: 1px solid var(--a11y-hud-border);\n border-radius: var(--a11y-hud-radius);\n overflow: hidden;\n box-shadow: 0 8px 32px rgb(0 0 0 / 40%);\n}\n\n.panel-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 10px 12px;\n background: var(--a11y-hud-bg-elevated);\n border-block-end: 1px solid var(--a11y-hud-border);\n flex-shrink: 0;\n}\n\n.btn-panel-title {\n all: unset;\n display: flex;\n align-items: center;\n gap: 6px;\n font-weight: 600;\n letter-spacing: 0.02em;\n cursor: pointer;\n border-radius: 4px;\n padding: 2px 4px;\n margin: -2px -4px;\n transition: color 120ms;\n}\n\n.btn-panel-title:focus-visible {\n outline: 2px solid var(--a11y-hud-focus-ring);\n outline-offset: 2px;\n}\n\n.panel-title-icon {\n display: flex;\n align-items: center;\n width: 16px;\n height: 16px;\n flex-shrink: 0;\n position: relative;\n transition: color 120ms;\n}\n\n.panel-title-icon svg {\n width: 100%;\n height: 100%;\n}\n\n.btn-panel-title[data-active] .panel-title-icon {\n color: var(--a11y-hud-highlight);\n}\n\n.panel-title-chevron {\n display: flex;\n align-items: center;\n width: 12px;\n height: 12px;\n color: var(--a11y-hud-text-muted);\n transition: transform 200ms;\n}\n\n.panel-title-chevron svg {\n width: 100%;\n height: 100%;\n}\n\n.btn-panel-title[aria-expanded="true"] .panel-title-chevron {\n transform: rotate(180deg);\n}\n\n.panel-count {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: 20px;\n height: 20px;\n padding-inline: 6px;\n border-radius: 10px;\n font-size: 11px;\n font-weight: 700;\n background: var(--a11y-hud-critical);\n color: var(--a11y-hud-bg);\n}\n\n.panel-count[data-count="0"] {\n background: var(--a11y-hud-minor);\n}\n\n.panel-actions {\n display: flex;\n align-items: center;\n gap: 4px;\n}\n\n.btn-icon {\n all: unset;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 28px;\n height: 28px;\n border-radius: 4px;\n color: var(--a11y-hud-text-muted);\n cursor: pointer;\n transition:\n background 120ms,\n color 120ms;\n}\n\n.btn-icon svg {\n width: 14px;\n height: 14px;\n pointer-events: none;\n}\n\n.btn-icon:hover {\n background: var(--a11y-hud-bg-hover);\n color: var(--a11y-hud-text);\n}\n\n.btn-icon:focus-visible {\n outline: 2px solid var(--a11y-hud-focus-ring);\n outline-offset: 1px;\n}\n\n.btn-icon[aria-pressed="true"] {\n background: var(--a11y-hud-bg-elevated);\n color: var(--a11y-hud-highlight);\n outline: 1px solid var(--a11y-hud-highlight);\n outline-offset: -1px;\n}\n\n.btn-icon[data-scanning] svg {\n animation: spin 1s linear infinite;\n}\n\n@keyframes spin {\n to {\n transform: rotate(360deg);\n }\n}\n\n.panel-filters {\n display: none;\n flex-direction: column;\n gap: 6px;\n padding: 8px 12px;\n border-block-end: 1px solid var(--a11y-hud-border);\n flex-shrink: 0;\n}\n\n.panel-filters[data-open] {\n display: flex;\n}\n\n.filter-group {\n display: flex;\n flex-wrap: wrap;\n gap: 4px;\n}\n\n.filter-chip {\n all: unset;\n display: inline-flex;\n align-items: center;\n height: 22px;\n padding-inline: 8px;\n border-radius: 11px;\n font-size: 11px;\n font-weight: 600;\n letter-spacing: 0.02em;\n cursor: pointer;\n border: 1px solid var(--a11y-hud-border);\n color: var(--a11y-hud-text-muted);\n background: transparent;\n transition:\n background 120ms,\n color 120ms,\n border-color 120ms;\n}\n\n.filter-chip:hover {\n background: var(--a11y-hud-bg-hover);\n color: var(--a11y-hud-text);\n}\n\n.filter-chip:focus-visible {\n outline: 2px solid var(--a11y-hud-focus-ring);\n outline-offset: 1px;\n}\n\n.filter-chip[aria-pressed="true"][data-severity="critical"] {\n background: var(--a11y-hud-critical);\n border-color: var(--a11y-hud-critical);\n color: var(--a11y-hud-bg);\n}\n\n.filter-chip[aria-pressed="true"][data-severity="serious"] {\n background: var(--a11y-hud-serious);\n border-color: var(--a11y-hud-serious);\n color: var(--a11y-hud-bg);\n}\n\n.filter-chip[aria-pressed="true"][data-severity="moderate"] {\n background: var(--a11y-hud-moderate);\n border-color: var(--a11y-hud-moderate);\n color: var(--a11y-hud-bg);\n}\n\n.filter-chip[aria-pressed="true"][data-severity="minor"] {\n background: var(--a11y-hud-minor);\n border-color: var(--a11y-hud-minor);\n color: var(--a11y-hud-bg);\n}\n\n.filter-chip[aria-pressed="true"][data-level] {\n background: var(--a11y-hud-highlight);\n border-color: var(--a11y-hud-highlight);\n color: var(--a11y-hud-bg);\n}\n\n.filter-chip[aria-pressed="true"][data-ruleset] {\n background: var(--a11y-hud-tag);\n border-color: var(--a11y-hud-tag);\n color: var(--a11y-hud-bg);\n}\n\n.panel-body {\n flex: 1;\n overflow-x: hidden;\n overflow-y: auto;\n overscroll-behavior: contain;\n}\n\n.panel-body:focus-visible {\n outline: none;\n}\n\n.violation-list {\n list-style: none;\n}\n\n.violation-item {\n border-block-end: 1px solid var(--a11y-hud-border);\n}\n\n.violation-item:last-child {\n border-block-end: none;\n}\n\n.violation-toggle {\n all: unset;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n gap: 8px;\n width: 100%;\n padding: 8px 12px;\n cursor: pointer;\n text-align: start;\n transition: background 120ms;\n}\n\n.violation-toggle:hover {\n background: var(--a11y-hud-bg-elevated);\n}\n\n.violation-toggle:focus-visible {\n outline: 2px solid var(--a11y-hud-focus-ring);\n outline-offset: -2px;\n}\n\n.severity-icon {\n display: flex;\n align-items: center;\n flex-shrink: 0;\n width: 14px;\n height: 14px;\n}\n\n.severity-icon svg {\n width: 100%;\n height: 100%;\n}\n\n.severity-icon[data-severity="critical"] {\n color: var(--a11y-hud-critical);\n}\n\n.severity-icon[data-severity="serious"] {\n color: var(--a11y-hud-serious);\n}\n\n.severity-icon[data-severity="moderate"] {\n color: var(--a11y-hud-moderate);\n}\n\n.severity-icon[data-severity="minor"] {\n color: var(--a11y-hud-minor);\n}\n\n.violation-rule {\n flex: 1;\n font-size: 12px;\n font-weight: 500;\n word-break: break-word;\n}\n\n.violation-node-count {\n font-size: 11px;\n color: var(--a11y-hud-text-muted);\n flex-shrink: 0;\n}\n\n.chevron-icon {\n display: flex;\n align-items: center;\n flex-shrink: 0;\n width: 14px;\n height: 14px;\n color: var(--a11y-hud-text-muted);\n transition: transform 200ms;\n}\n\n.chevron-icon svg {\n width: 100%;\n height: 100%;\n}\n\n.violation-toggle[aria-expanded="true"] .chevron-icon {\n transform: rotate(180deg);\n}\n\n.violation-detail {\n padding: 0 12px 10px 34px;\n display: none;\n flex-direction: column;\n gap: 8px;\n}\n\n.violation-detail[data-open] {\n display: flex;\n}\n\n.violation-description {\n font-size: 12px;\n color: var(--a11y-hud-text-muted);\n line-height: 1.6;\n}\n\n.violation-nodes-list {\n list-style: none;\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n\n.violation-node-item {\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.btn-highlight {\n all: unset;\n display: inline-flex;\n align-items: center;\n gap: 4px;\n padding: 3px 8px;\n border-radius: 4px;\n font-size: 11px;\n font-family: var(--a11y-hud-font);\n color: var(--a11y-hud-highlight);\n border: 1px solid var(--a11y-hud-border);\n cursor: pointer;\n word-break: break-all;\n transition: background 120ms;\n max-width: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.btn-highlight:hover {\n background: var(--a11y-hud-bg-elevated);\n}\n\n.btn-highlight:focus-visible {\n outline: 2px solid var(--a11y-hud-focus-ring);\n outline-offset: 1px;\n}\n\n.violation-footer {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 8px;\n}\n\n.violation-help-link {\n font-size: 11px;\n color: var(--a11y-hud-minor);\n text-decoration: none;\n}\n\n.violation-help-link:hover {\n text-decoration: underline;\n}\n\n.violation-help-link:focus-visible {\n outline: 2px solid var(--a11y-hud-focus-ring);\n outline-offset: 1px;\n border-radius: 2px;\n}\n\n.btn-copy-single {\n all: unset;\n display: inline-flex;\n align-items: center;\n gap: 4px;\n padding: 2px 6px;\n border-radius: 4px;\n font-size: 11px;\n font-family: var(--a11y-hud-font);\n color: var(--a11y-hud-text-muted);\n cursor: pointer;\n transition:\n background 120ms,\n color 120ms;\n}\n\n.btn-copy-single svg {\n width: 12px;\n height: 12px;\n pointer-events: none;\n}\n\n.btn-copy-single:hover {\n background: var(--a11y-hud-bg-elevated);\n color: var(--a11y-hud-text);\n}\n\n.btn-copy-single:focus-visible {\n outline: 2px solid var(--a11y-hud-focus-ring);\n outline-offset: 1px;\n}\n\n.btn-ignore-rule {\n all: unset;\n display: inline-flex;\n align-items: center;\n gap: 4px;\n padding: 2px 6px;\n border-radius: 4px;\n font-size: 11px;\n font-family: var(--a11y-hud-font);\n color: var(--a11y-hud-text-muted);\n cursor: pointer;\n transition:\n background 120ms,\n color 120ms;\n}\n\n.btn-ignore-rule svg {\n width: 12px;\n height: 12px;\n pointer-events: none;\n}\n\n.btn-ignore-rule:hover {\n background: var(--a11y-hud-bg-elevated);\n color: var(--a11y-hud-critical);\n}\n\n.btn-ignore-rule:focus-visible {\n outline: 2px solid var(--a11y-hud-focus-ring);\n outline-offset: 1px;\n}\n\n/* \u2500\u2500 Ignored rules section \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.ignored-section {\n position: sticky;\n bottom: 0;\n z-index: 1;\n background: var(--a11y-hud-bg);\n border-top: 1px solid var(--a11y-hud-border);\n}\n\n.ignored-section-toggle {\n all: unset;\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n padding: 8px 12px;\n font-size: 11px;\n font-family: var(--a11y-hud-font);\n font-weight: 600;\n color: var(--a11y-hud-text-muted);\n cursor: pointer;\n gap: 6px;\n box-sizing: border-box;\n}\n\n.ignored-section-toggle:hover {\n color: var(--a11y-hud-text);\n}\n\n.ignored-section-toggle:focus-visible {\n outline: 2px solid var(--a11y-hud-focus-ring);\n outline-offset: 1px;\n}\n\n.ignored-section-toggle .chevron-icon {\n width: 12px;\n height: 12px;\n transition: transform 120ms;\n flex-shrink: 0;\n}\n\n.ignored-section-toggle[aria-expanded="true"] .chevron-icon {\n transform: rotate(180deg);\n}\n\n.ignored-section-body {\n display: none;\n padding: 0 12px 10px;\n}\n\n.ignored-section-body[data-open] {\n display: block;\n}\n\n.ignored-empty {\n font-size: 11px;\n color: var(--a11y-hud-text-muted);\n margin: 0 0 8px;\n}\n\n.ignored-list {\n list-style: none;\n display: flex;\n flex-direction: column;\n gap: 4px;\n margin: 0 0 8px;\n padding: 0;\n}\n\n.ignored-entry {\n display: flex;\n align-items: center;\n gap: 6px;\n font-size: 11px;\n}\n\n.ignored-rule-id {\n font-weight: 600;\n color: var(--a11y-hud-text);\n}\n\n.ignored-selector {\n font-size: 10px;\n font-family: ui-monospace, monospace;\n color: var(--a11y-hud-text-muted);\n background: var(--a11y-hud-bg-elevated);\n padding: 1px 4px;\n border-radius: 3px;\n}\n\n.btn-remove-ignore {\n all: unset;\n display: inline-flex;\n align-items: center;\n cursor: pointer;\n color: var(--a11y-hud-text-muted);\n margin-left: auto;\n padding: 2px;\n border-radius: 3px;\n transition: color 120ms;\n}\n\n.btn-remove-ignore svg {\n width: 12px;\n height: 12px;\n pointer-events: none;\n}\n\n.btn-remove-ignore:hover {\n color: var(--a11y-hud-critical);\n}\n\n.btn-remove-ignore:focus-visible {\n outline: 2px solid var(--a11y-hud-focus-ring);\n outline-offset: 1px;\n}\n\n.ignored-actions {\n display: flex;\n align-items: center;\n gap: 6px;\n flex-wrap: wrap;\n}\n\n.btn-sm {\n all: unset;\n display: inline-flex;\n align-items: center;\n gap: 4px;\n padding: 3px 8px;\n border-radius: 4px;\n font-size: 11px;\n font-family: var(--a11y-hud-font);\n color: var(--a11y-hud-text-muted);\n border: 1px solid var(--a11y-hud-border);\n cursor: pointer;\n transition:\n background 120ms,\n color 120ms;\n}\n\n.btn-sm svg {\n width: 11px;\n height: 11px;\n pointer-events: none;\n}\n\n.btn-sm:hover {\n background: var(--a11y-hud-bg-elevated);\n color: var(--a11y-hud-text);\n}\n\n.btn-sm:focus-visible {\n outline: 2px solid var(--a11y-hud-focus-ring);\n outline-offset: 1px;\n}\n\n.empty-state {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 8px;\n padding: 32px 16px;\n color: var(--a11y-hud-text-muted);\n}\n\n.empty-state-icon {\n width: 32px;\n height: 32px;\n color: var(--a11y-hud-minor);\n}\n\n.empty-state-icon svg {\n width: 100%;\n height: 100%;\n}\n\n.empty-state-title {\n font-weight: 600;\n color: var(--a11y-hud-text);\n}\n\n.empty-state-body {\n font-size: 12px;\n text-align: center;\n}\n\n.scanning-state {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n padding: 24px 16px;\n color: var(--a11y-hud-text-muted);\n font-size: 12px;\n}\n\n.scanning-spinner {\n width: 16px;\n height: 16px;\n color: var(--a11y-hud-minor);\n animation: spin 1s linear infinite;\n}\n\n.scanning-spinner svg {\n width: 100%;\n height: 100%;\n}\n\n/* \u2500\u2500 Keyboard mode view \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.panel[data-kbd-mode] .panel-filters {\n display: none;\n}\n\n.kbd-mode-view {\n display: flex;\n flex-direction: column;\n gap: 10px;\n padding: 8px 0;\n}\n\n.kbd-mode-header {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 0 12px 8px;\n border-bottom: 1px solid var(--a11y-hud-border);\n font-size: 12px;\n font-weight: 600;\n}\n\n.kbd-mode-stat {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n color: var(--a11y-hud-text-muted);\n}\n\n.kbd-mode-stat svg {\n width: 13px;\n height: 13px;\n}\n\n.kbd-mode-stat--warn {\n color: var(--a11y-hud-serious);\n}\n\n.kbd-mode-stat--ok {\n color: var(--a11y-hud-minor);\n}\n\n.kbd-violation-list,\n.kbd-element-list {\n list-style: none;\n display: flex;\n flex-direction: column;\n gap: 4px;\n margin: 0;\n padding: 0 12px;\n}\n\n.kbd-violation-item {\n display: flex;\n align-items: flex-start;\n gap: 6px;\n font-size: 11px;\n color: var(--a11y-hud-text);\n padding: 4px 0;\n border-bottom: 1px solid var(--a11y-hud-border);\n}\n\n.kbd-violation-item:last-child {\n border-bottom: none;\n}\n\n.kbd-violation-msg {\n flex: 1;\n line-height: 1.4;\n}\n\n.kbd-element-item {\n display: flex;\n align-items: center;\n}\n\n.btn-kbd-element {\n all: unset;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n gap: 6px;\n width: 100%;\n font-size: 11px;\n color: var(--a11y-hud-text-muted);\n padding: 3px 6px;\n border-radius: 4px;\n cursor: pointer;\n transition: background 120ms;\n}\n\n.btn-kbd-element:hover {\n background: var(--a11y-hud-bg-elevated);\n color: var(--a11y-hud-text);\n}\n\n.btn-kbd-element:focus-visible {\n outline: 2px solid var(--a11y-hud-focus-ring);\n outline-offset: 1px;\n}\n\n.kbd-element-index {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: 20px;\n height: 20px;\n border-radius: 10px;\n background: #7c3aed;\n color: #fff;\n font-size: 10px;\n font-weight: 700;\n flex-shrink: 0;\n}\n\n.kbd-element-selector {\n font-family: ui-monospace, monospace;\n font-size: 10px;\n color: var(--a11y-hud-highlight);\n}\n\n.kbd-element-tag {\n color: var(--a11y-hud-text-muted);\n font-size: 10px;\n}\n\n.kbd-tabindex-badge {\n font-size: 10px;\n font-family: ui-monospace, monospace;\n background: var(--a11y-hud-bg-elevated);\n color: var(--a11y-hud-serious);\n padding: 1px 4px;\n border-radius: 3px;\n border: 1px solid var(--a11y-hud-border);\n}\n\n.kbd-empty {\n font-size: 12px;\n color: var(--a11y-hud-text-muted);\n padding: 0 12px;\n margin: 0;\n}\n\n/* \u2500\u2500 FAB (minimized state) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.fab {\n all: unset;\n display: none;\n align-items: center;\n gap: 6px;\n padding: 8px 14px;\n background: var(--a11y-hud-bg);\n border: 1px solid var(--a11y-hud-border);\n border-radius: 24px;\n color: var(--a11y-hud-text);\n cursor: pointer;\n font-family: var(--a11y-hud-font);\n font-size: 13px;\n font-weight: 600;\n box-shadow: 0 4px 16px rgb(0 0 0 / 30%);\n transition: background 120ms;\n}\n\n:host([data-minimized]) .fab {\n display: flex;\n}\n\n:host([data-minimized]) .panel {\n display: none;\n}\n\n@keyframes panel-in {\n from {\n opacity: 0;\n transform: translateY(6px);\n }\n\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n.panel {\n animation: panel-in 120ms ease-out;\n}\n\n.fab:hover {\n background: var(--a11y-hud-bg-elevated);\n}\n\n.fab:focus-visible {\n outline: 2px solid var(--a11y-hud-focus-ring);\n outline-offset: 2px;\n}\n\n.fab-icon {\n display: flex;\n align-items: center;\n width: 14px;\n height: 14px;\n}\n\n.fab-icon svg {\n width: 100%;\n height: 100%;\n}\n\n.fab-count {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: 18px;\n height: 18px;\n padding-inline: 5px;\n border-radius: 9px;\n font-size: 11px;\n font-weight: 700;\n background: var(--a11y-hud-critical);\n color: var(--a11y-hud-bg);\n}\n\n.fab-count[data-count="0"] {\n background: var(--a11y-hud-minor);\n}\n';
|
|
315
315
|
|
|
316
316
|
// src/styles/themes.css
|
|
317
317
|
var themes_default = ':host([data-theme="light"]) {\n --a11y-hud-bg: #eff1f5;\n --a11y-hud-bg-elevated: #e6e9ef;\n --a11y-hud-bg-hover: #dce0e8;\n --a11y-hud-border: #bcc0cc;\n --a11y-hud-text: #4c4f69;\n /* #5c5f77 gives 5.56:1 on #eff1f5 (was #6c6f85 at 4.36:1) */\n --a11y-hud-text-muted: #5c5f77;\n --a11y-hud-critical: #d20f39;\n --a11y-hud-serious: #fe640b;\n --a11y-hud-moderate: #df8e1d;\n /* #1452c7 gives 5.92:1 on #eff1f5 (was #1e66f5 at 4.34:1) */\n --a11y-hud-minor: #1452c7;\n --a11y-hud-highlight: #8839ef;\n --a11y-hud-tag: #0d7d80;\n --a11y-hud-focus-ring: #1452c7;\n}\n\n/* Chip text overrides \u2014 bright severity backgrounds need dark or white text\n to meet 4.5:1 at 11 px. The base CSS uses --a11y-hud-bg (light in this\n theme) which fails on orange and yellow. */\n:host([data-theme="light"]) .filter-chip[aria-pressed="true"][data-severity="critical"] {\n color: #ffffff;\n}\n\n:host([data-theme="light"]) .filter-chip[aria-pressed="true"][data-severity="serious"],\n:host([data-theme="light"]) .filter-chip[aria-pressed="true"][data-severity="moderate"] {\n color: #1a1a2e;\n}\n\n:host([data-theme="github-dark"]) {\n --a11y-hud-bg: #0d1117;\n --a11y-hud-bg-elevated: #161b22;\n --a11y-hud-bg-hover: #21262d;\n --a11y-hud-border: #30363d;\n --a11y-hud-text: #e6edf3;\n --a11y-hud-text-muted: #8b949e;\n --a11y-hud-critical: #ff7b72;\n --a11y-hud-serious: #ffa657;\n --a11y-hud-moderate: #e3b341;\n --a11y-hud-minor: #79c0ff;\n --a11y-hud-highlight: #d2a8ff;\n --a11y-hud-tag: #56d364;\n --a11y-hud-focus-ring: #2f81f7;\n}\n\n:host([data-theme="github-light"]) {\n --a11y-hud-bg: #ffffff;\n --a11y-hud-bg-elevated: #f6f8fa;\n --a11y-hud-bg-hover: #eaeef2;\n --a11y-hud-border: #d0d7de;\n --a11y-hud-text: #1f2328;\n --a11y-hud-text-muted: #636c76;\n --a11y-hud-critical: #cf222e;\n --a11y-hud-serious: #bc4c00;\n /* #8a5e00 gives 5.33:1 white-on-chip (was #9a6700 at 4.37:1 \u2014 neither black nor white passed) */\n --a11y-hud-moderate: #8a5e00;\n --a11y-hud-minor: #0550ae;\n --a11y-hud-highlight: #8250df;\n --a11y-hud-tag: #1a7f37;\n --a11y-hud-focus-ring: #0550ae;\n}\n\n:host([data-theme="github-light"]) .filter-chip[aria-pressed="true"][data-severity="critical"],\n:host([data-theme="github-light"]) .filter-chip[aria-pressed="true"][data-severity="serious"],\n:host([data-theme="github-light"]) .filter-chip[aria-pressed="true"][data-severity="moderate"],\n:host([data-theme="github-light"]) .filter-chip[aria-pressed="true"][data-severity="minor"] {\n color: #ffffff;\n}\n\n:host([data-theme="tokyo-night"]) {\n --a11y-hud-bg: #1a1b26;\n --a11y-hud-bg-elevated: #24283b;\n --a11y-hud-bg-hover: #2f3549;\n --a11y-hud-border: #3b4261;\n --a11y-hud-text: #c0caf5;\n /* #9aa5ce gives 7.67:1 on #1a1b26 (was #737aa2 at ~4.1:1) */\n --a11y-hud-text-muted: #9aa5ce;\n --a11y-hud-critical: #f7768e;\n --a11y-hud-serious: #ff9e64;\n --a11y-hud-moderate: #e0af68;\n --a11y-hud-minor: #7aa2f7;\n --a11y-hud-highlight: #bb9af7;\n --a11y-hud-tag: #73daca;\n --a11y-hud-focus-ring: #7aa2f7;\n}\n\n:host([data-theme="solarized-dark"]) {\n --a11y-hud-bg: #002b36;\n --a11y-hud-bg-elevated: #073642;\n --a11y-hud-bg-hover: #0d4456;\n --a11y-hud-border: #586e75;\n --a11y-hud-text: #eee8d5;\n --a11y-hud-text-muted: #93a1a1;\n --a11y-hud-critical: #dc322f;\n --a11y-hud-serious: #cb4b16;\n --a11y-hud-moderate: #b58900;\n /* #5ba4cf gives 5.78:1 on #002b36 for text, 5.78:1 for chip (was #268bd2 at ~3.1:1 for both) */\n --a11y-hud-minor: #5ba4cf;\n /* #f06090 gives 4.88:1 on #002b36 (was #d33682 at ~3.3:1) */\n --a11y-hud-highlight: #f06090;\n --a11y-hud-tag: #5cccbc;\n --a11y-hud-focus-ring: #268bd2;\n}\n\n/* Solarized Dark chip text overrides \u2014 canonical solarized palette falls in the\n middle-luminance zone where neither the panel bg (#002b36) nor white passes\n 4.5:1 on yellow/blue chip backgrounds. Use white text on red/orange,\n dark panel bg text on yellow/blue. */\n:host([data-theme="solarized-dark"]) .filter-chip[aria-pressed="true"][data-severity="critical"],\n:host([data-theme="solarized-dark"]) .filter-chip[aria-pressed="true"][data-severity="serious"] {\n color: #ffffff;\n}\n\n:host([data-theme="solarized-dark"]) .filter-chip[aria-pressed="true"][data-severity="moderate"],\n:host([data-theme="solarized-dark"]) .filter-chip[aria-pressed="true"][data-severity="minor"] {\n color: #002b36;\n}\n\n:host([data-theme="high-contrast"]) {\n --a11y-hud-bg: #000000;\n --a11y-hud-bg-elevated: #111111;\n --a11y-hud-bg-hover: #222222;\n --a11y-hud-border: #ffffff;\n --a11y-hud-text: #ffffff;\n --a11y-hud-text-muted: #cccccc;\n --a11y-hud-critical: #ff4444;\n --a11y-hud-serious: #ff8800;\n --a11y-hud-moderate: #ffcc00;\n --a11y-hud-minor: #66aaff;\n --a11y-hud-highlight: #ff66ff;\n --a11y-hud-tag: #00e5d0;\n --a11y-hud-focus-ring: #ffffff;\n}\n';
|
|
@@ -768,7 +768,7 @@ ${themes_default}`;
|
|
|
768
768
|
<p class="violation-description">${violation.description}</p>
|
|
769
769
|
<ul class="violation-nodes-list" aria-label="Affected elements">${nodes}</ul>
|
|
770
770
|
<div class="violation-footer">
|
|
771
|
-
<a class="violation-help-link" href="${violation.helpUrl}" target="_blank" rel="noopener noreferrer">
|
|
771
|
+
<a class="violation-help-link" href="${violation.helpUrl}" target="_blank" rel="noopener noreferrer" aria-label="Learn more about ${violation.id}, opens in new tab">
|
|
772
772
|
Learn more \u2197
|
|
773
773
|
</a>
|
|
774
774
|
<button class="btn-copy-single" data-copy-violation="${index}" aria-label="Copy ${violation.id} to clipboard" title="Copy violation">
|