a11y-hud 0.1.0

package/dist/index.js

@@ -0,0 +1,694 @@
+import axe from 'axe-core';
+
+// src/scan.ts
+async function runScan(target = document.body) {
+  const results = await axe.run(target);
+  results.violations = results.violations.map((v) => ({
+    ...v,
+    nodes: v.nodes.filter((node) => {
+      const first = node.target[0];
+      const selector = (Array.isArray(first) ? first[0] : first) ?? "";
+      return !String(selector).toLowerCase().startsWith("a11y-hud");
+    })
+  })).filter((v) => v.nodes.length > 0);
+  return results;
+}
+
+// src/mount.ts
+function mount(options = {}) {
+  let el = document.querySelector("a11y-hud");
+  if (!el) {
+    el = document.createElement("a11y-hud");
+    document.body.appendChild(el);
+  }
+  if (options.theme !== void 0) el.setAttribute("theme", options.theme);
+  if (options.scope !== void 0) {
+    if (typeof options.scope === "string") {
+      el.setAttribute("scope", options.scope);
+    } else {
+      el.scopeElement = options.scope;
+    }
+  }
+  if (options.autoScan === false) {
+    el.removeAttribute("auto-scan");
+  } else if (options.autoScan === true) {
+    el.setAttribute("auto-scan", "");
+  }
+  if (options.debounce !== void 0) {
+    el.setAttribute("debounce", String(options.debounce));
+  }
+  return {
+    unmount() {
+      el.remove();
+    },
+    setTheme(theme) {
+      el.setTheme(theme);
+    },
+    async runScan() {
+      return el.triggerScan();
+    }
+  };
+}
+
+// src/icons/alert-circle.svg
+var alert_circle_default = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" x2="12" y1="8" y2="12"/><line x1="12" x2="12.01" y1="16" y2="16"/></svg>\n';
+
+// src/icons/alert-triangle.svg
+var alert_triangle_default = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"/><path d="M12 9v4"/><path d="M12 17h.01"/></svg>\n';
+
+// src/icons/check-circle.svg
+var check_circle_default = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><path d="m9 11 3 3L22 4"/></svg>\n';
+
+// src/icons/chevron-down.svg
+var chevron_down_default = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>\n';
+
+// src/icons/chevron-up.svg
+var chevron_up_default = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m18 15-6-6-6 6"/></svg>\n';
+
+// src/icons/copy.svg
+var copy_default = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>\n';
+
+// src/icons/filter.svg
+var filter_default = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"/></svg>\n';
+
+// src/icons/info.svg
+var info_default = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>\n';
+
+// src/icons/keyboard.svg
+var keyboard_default = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="20" height="16" x="2" y="4" rx="2" ry="2"/><path d="M6 8h.001"/><path d="M10 8h.001"/><path d="M14 8h.001"/><path d="M18 8h.001"/><path d="M8 12h.001"/><path d="M12 12h.001"/><path d="M16 12h.001"/><path d="M7 16h10"/></svg>\n';
+
+// src/icons/minus.svg
+var minus_default = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/></svg>\n';
+
+// src/icons/moon.svg
+var moon_default = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"/></svg>\n';
+
+// src/icons/refresh-cw.svg
+var refresh_cw_default = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"/><path d="M21 3v5h-5"/><path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"/><path d="M8 16H3v5"/></svg>\n';
+
+// src/icons/sun.svg
+var sun_default = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="4"/><path d="M12 2v2"/><path d="M12 20v2"/><path d="m4.93 4.93 1.41 1.41"/><path d="m17.66 17.66 1.41 1.41"/><path d="M2 12h2"/><path d="M20 12h2"/><path d="m6.34 17.66-1.41 1.41"/><path d="m19.07 4.93-1.41 1.41"/></svg>\n';
+
+// src/icons/x.svg
+var x_default = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>\n';
+
+// src/icons/index.ts
+var registry = {
+  "alert-circle": alert_circle_default,
+  "alert-triangle": alert_triangle_default,
+  "check-circle": check_circle_default,
+  "chevron-down": chevron_down_default,
+  "chevron-up": chevron_up_default,
+  copy: copy_default,
+  filter: filter_default,
+  info: info_default,
+  keyboard: keyboard_default,
+  minus: minus_default,
+  moon: moon_default,
+  "refresh-cw": refresh_cw_default,
+  sun: sun_default,
+  x: x_default
+};
+function icon(name) {
+  return registry[name] ?? "";
+}
+
+// src/observer.ts
+function debounce(fn, delay) {
+  let timer;
+  const debounced = (...args) => {
+    clearTimeout(timer);
+    timer = setTimeout(() => fn(...args), delay);
+  };
+  debounced.cancel = () => clearTimeout(timer);
+  return debounced;
+}
+
+// src/styles/base.css
+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-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.panel-title {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  font-weight: 600;\n  letter-spacing: 0.02em;\n}\n\n.panel-title-icon {\n  display: flex;\n  align-items: center;\n  width: 16px;\n  height: 16px;\n  flex-shrink: 0;\n}\n\n.panel-title-icon svg {\n  width: 100%;\n  height: 100%;\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: background 120ms, 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[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: flex;\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.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: background 120ms, color 120ms, 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-bg-elevated);\n  border-color: var(--a11y-hud-text-muted);\n  color: var(--a11y-hud-text);\n}\n\n.panel-body {\n  flex: 1;\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  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: background 120ms, 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.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 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';
+
+// src/styles/themes.css
+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-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="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-focus-ring: #ffffff;\n}\n';
+
+// src/theme.ts
+function resolveTheme(theme) {
+  if (matchMedia("(prefers-contrast: more)").matches) return "high-contrast";
+  if (theme === "auto")
+    return matchMedia("(prefers-color-scheme: dark)").matches ? "default" : "light";
+  return theme;
+}
+function watchTheme(getTheme, callback) {
+  const colorScheme = matchMedia("(prefers-color-scheme: dark)");
+  const contrast = matchMedia("(prefers-contrast: more)");
+  const handler = () => callback(resolveTheme(getTheme()));
+  colorScheme.addEventListener("change", handler);
+  contrast.addEventListener("change", handler);
+  return () => {
+    colorScheme.removeEventListener("change", handler);
+    contrast.removeEventListener("change", handler);
+  };
+}
+
+// src/element.ts
+var HIGHLIGHT_ATTR = "data-a11y-hud-highlighted";
+var HIGHLIGHT_STYLE_ID = "a11y-hud-highlight-style";
+var HIGHLIGHT_CSS = `[${HIGHLIGHT_ATTR}]{outline:3px solid #7c3aed!important;outline-offset:3px!important;scroll-margin:8px!important;}`;
+var WCAG_LEVEL_TAGS = {
+  A: ["wcag2a", "wcag21a"],
+  AA: ["wcag2aa", "wcag21aa", "wcag22aa"],
+  AAA: ["wcag2aaa"]
+};
+var SEVERITY_ICON = {
+  critical: "alert-triangle",
+  serious: "alert-circle",
+  moderate: "alert-circle",
+  minor: "info"
+};
+function isSeverity(value) {
+  return value === "critical" || value === "serious" || value === "moderate" || value === "minor";
+}
+function getViolationLevel(tags) {
+  for (const [level, levelTags] of Object.entries(WCAG_LEVEL_TAGS)) {
+    if (tags.some((t) => levelTags.includes(t))) return level;
+  }
+  return "";
+}
+function findElement(target) {
+  try {
+    const last = target[target.length - 1];
+    const selector = Array.isArray(last) ? last[last.length - 1] : last;
+    return selector ? document.querySelector(selector) : null;
+  } catch {
+    return null;
+  }
+}
+function ensureHighlightStyle(doc) {
+  if (doc.getElementById(HIGHLIGHT_STYLE_ID)) return;
+  const style = doc.createElement("style");
+  style.id = HIGHLIGHT_STYLE_ID;
+  style.textContent = HIGHLIGHT_CSS;
+  doc.head.appendChild(style);
+}
+function buildStyleSheet(css) {
+  try {
+    const sheet = new CSSStyleSheet();
+    sheet.replaceSync(css);
+    return sheet;
+  } catch {
+    return null;
+  }
+}
+var A11yHudElement = class extends HTMLElement {
+  static observedAttributes = ["theme", "scope", "auto-scan", "debounce"];
+  _shadow;
+  _theme = "auto";
+  _scopeSelector;
+  _scopeElement;
+  _autoScan = true;
+  _debounceMs = 500;
+  _results;
+  _scanning = false;
+  _mounted = false;
+  _observer;
+  _unwatchTheme;
+  _removeHighlight;
+  _activeSeverities = /* @__PURE__ */ new Set(["critical", "serious", "moderate", "minor"]);
+  _activeLevels = /* @__PURE__ */ new Set(["A", "AA", "AAA"]);
+  _debouncedScan;
+  constructor() {
+    super();
+    this._shadow = this.attachShadow({ mode: "open" });
+    this._debouncedScan = debounce(() => void this._runScan(), this._debounceMs);
+    this._applyStyles();
+  }
+  _applyStyles() {
+    const combined = `${base_default}
+${themes_default}`;
+    const sheet = buildStyleSheet(combined);
+    if (sheet) {
+      this._shadow.adoptedStyleSheets = [sheet];
+    } else {
+      const style = document.createElement("style");
+      style.textContent = combined;
+      this._shadow.appendChild(style);
+    }
+  }
+  connectedCallback() {
+    this._mounted = true;
+    this._applyResolvedTheme();
+    this._render();
+    this._unwatchTheme = watchTheme(
+      () => this._theme,
+      (resolved) => {
+        this.dataset.theme = resolved;
+      }
+    );
+    if (this._autoScan) this._startObserver();
+    void this._runScan();
+  }
+  disconnectedCallback() {
+    this._mounted = false;
+    this._observer?.disconnect();
+    this._unwatchTheme?.();
+    this._removeHighlight?.();
+    this._removeHighlight = void 0;
+    this._debouncedScan.cancel();
+  }
+  attributeChangedCallback(name, _old, value) {
+    switch (name) {
+      case "theme":
+        this._theme = value ?? "auto";
+        if (this._mounted) this._applyResolvedTheme();
+        break;
+      case "scope":
+        this._scopeSelector = value ?? void 0;
+        this._scopeElement = void 0;
+        break;
+      case "auto-scan":
+        this._autoScan = value !== null;
+        if (this._mounted) {
+          if (this._autoScan) {
+            this._startObserver();
+          } else {
+            this._observer?.disconnect();
+            this._observer = void 0;
+          }
+        }
+        break;
+      case "debounce": {
+        const parsed = Number.parseInt(value ?? "", 10);
+        this._debounceMs = Number.isNaN(parsed) ? 500 : parsed;
+        this._debouncedScan.cancel();
+        this._debouncedScan = debounce(() => void this._runScan(), this._debounceMs);
+        break;
+      }
+    }
+  }
+  get scopeElement() {
+    return this._scopeElement;
+  }
+  set scopeElement(el) {
+    this._scopeElement = el;
+    this._scopeSelector = void 0;
+  }
+  setTheme(theme) {
+    this._theme = theme;
+    this.setAttribute("theme", theme);
+    this._applyResolvedTheme();
+  }
+  async triggerScan() {
+    return this._runScan();
+  }
+  _getScopeTarget() {
+    if (this._scopeElement) return this._scopeElement;
+    if (this._scopeSelector) {
+      return document.querySelector(this._scopeSelector) ?? document.body;
+    }
+    return document.body;
+  }
+  _applyResolvedTheme() {
+    this.dataset.theme = resolveTheme(this._theme);
+  }
+  _startObserver() {
+    this._observer?.disconnect();
+    const target = this._getScopeTarget();
+    const debouncedScan = this._debouncedScan;
+    this._observer = new MutationObserver((records) => {
+      if (records.every((r) => r.type === "attributes" && r.attributeName === HIGHLIGHT_ATTR))
+        return;
+      debouncedScan();
+    });
+    this._observer.observe(target, {
+      childList: true,
+      subtree: true,
+      attributes: true,
+      characterData: false
+    });
+  }
+  async _runScan() {
+    if (this._scanning) return this._results ?? { violations: [] };
+    this._scanning = true;
+    const rescanBtn = this._shadow.querySelector("#btn-rescan");
+    if (rescanBtn) {
+      rescanBtn.setAttribute("data-scanning", "");
+      rescanBtn.disabled = true;
+    }
+    if (!this._results) this._renderScanning();
+    await new Promise((resolve) => setTimeout(resolve, 0));
+    try {
+      const target = this._getScopeTarget();
+      const results = await runScan(target);
+      if (!this._mounted) return results;
+      this._results = results;
+      this._render();
+      return results;
+    } finally {
+      this._scanning = false;
+      const btn = this._shadow.querySelector("#btn-rescan");
+      if (btn) {
+        btn.removeAttribute("data-scanning");
+        btn.disabled = false;
+      }
+    }
+  }
+  _getFilteredViolations() {
+    const violations = this._results?.violations ?? [];
+    return violations.filter((v) => {
+      const impact = v.impact;
+      if (impact && !this._activeSeverities.has(impact)) return false;
+      const level = getViolationLevel(v.tags);
+      if (level && !this._activeLevels.has(level)) return false;
+      return true;
+    });
+  }
+  _render() {
+    const filtered = this._getFilteredViolations();
+    const total = this._results?.violations.length ?? 0;
+    const panel = this._shadow.querySelector(".panel");
+    if (!panel) {
+      const template = document.createElement("template");
+      template.innerHTML = this._renderPanel(filtered, total);
+      this._shadow.appendChild(template.content);
+      this._bindEvents();
+      return;
+    }
+    const countEl = panel.querySelector(".panel-count");
+    if (countEl) {
+      countEl.textContent = String(total);
+      countEl.setAttribute("data-count", String(total));
+    }
+    const fabCountEl = this._shadow.querySelector(".fab-count");
+    if (fabCountEl) {
+      fabCountEl.textContent = String(total);
+      fabCountEl.setAttribute("data-count", String(total));
+    }
+    const body = panel.querySelector(".panel-body");
+    if (body) body.innerHTML = this._renderBody(filtered);
+    this._bindHighlightEvents();
+  }
+  _renderScanning() {
+    const body = this._shadow.querySelector(".panel-body");
+    if (body) {
+      body.innerHTML = `
+        <div class="scanning-state" aria-live="polite" aria-label="Scanning for accessibility issues">
+          <span class="scanning-spinner" aria-hidden="true">${icon("refresh-cw")}</span>
+          Scanning\u2026
+        </div>
+      `;
+    }
+  }
+  _renderPanel(violations, total) {
+    return `
+      <div class="panel" role="complementary" aria-label="Accessibility panel">
+        <div class="panel-header">
+          <span class="panel-title">
+            <span class="panel-title-icon" aria-hidden="true">${icon("filter")}</span>
+            a11y
+            <span class="panel-count" data-count="${total}" aria-live="polite" aria-label="${total} violations">${total}</span>
+          </span>
+          <div class="panel-actions" role="toolbar" aria-label="Panel actions">
+            <button class="btn-icon" id="btn-copy-all" aria-label="Copy all violations to clipboard" title="Copy all">
+              ${icon("copy")}
+            </button>
+            <button class="btn-icon" id="btn-rescan" aria-label="Re-scan page" title="Re-scan">
+              ${icon("refresh-cw")}
+            </button>
+            <button class="btn-icon" id="btn-minimize" aria-label="Minimize panel" title="Minimize">
+              ${icon("minus")}
+            </button>
+          </div>
+        </div>
+        ${this._renderFilters()}
+        <div class="panel-body" role="region" aria-label="Violations">
+          ${this._renderBody(violations)}
+        </div>
+      </div>
+      <button class="fab" aria-label="Open accessibility panel" title="Open a11y panel">
+        <span class="fab-icon" aria-hidden="true">${icon("filter")}</span>
+        a11y
+        <span class="fab-count" data-count="${total}">${total}</span>
+      </button>
+    `;
+  }
+  _renderFilters() {
+    const severities = ["critical", "serious", "moderate", "minor"];
+    const levels = ["A", "AA", "AAA"];
+    const severityChips = severities.map((s) => {
+      const active = this._activeSeverities.has(s);
+      const label = s.charAt(0).toUpperCase() + s.slice(1);
+      return `<button class="filter-chip" data-severity="${s}" aria-pressed="${active}">${label}</button>`;
+    }).join("");
+    const levelChips = levels.map((l) => {
+      const active = this._activeLevels.has(l);
+      return `<button class="filter-chip" data-level="${l}" aria-pressed="${active}">${l}</button>`;
+    }).join("");
+    return `
+      <div class="panel-filters" aria-label="Filters">
+        <div class="filter-group" role="group" aria-label="Filter by severity">${severityChips}</div>
+        <div class="filter-group" role="group" aria-label="Filter by WCAG level">${levelChips}</div>
+      </div>
+    `;
+  }
+  _renderBody(violations) {
+    if (!this._results) {
+      return `
+        <div class="empty-state">
+          <span class="scanning-spinner" aria-hidden="true">${icon("refresh-cw")}</span>
+          <span class="empty-state-body">Running first scan\u2026</span>
+        </div>
+      `;
+    }
+    if (violations.length === 0) {
+      return `
+        <div class="empty-state">
+          <span class="empty-state-icon" aria-hidden="true">${icon("check-circle")}</span>
+          <span class="empty-state-title">No violations found</span>
+          <span class="empty-state-body">
+            ${this._results.violations.length > 0 ? "All violations filtered out." : "Great job! The scanned area has no axe-core violations."}
+          </span>
+        </div>
+      `;
+    }
+    const items = violations.map((v, i) => this._renderViolationItem(v, i)).join("");
+    return `<ul class="violation-list" role="list" aria-label="${violations.length} violation${violations.length !== 1 ? "s" : ""}">${items}</ul>`;
+  }
+  _renderViolationItem(violation, index) {
+    const impact = violation.impact ?? "minor";
+    const iconName = SEVERITY_ICON[impact];
+    const nodeCount = violation.nodes.length;
+    const nodeLabel = `${nodeCount} node${nodeCount !== 1 ? "s" : ""}`;
+    const nodes = violation.nodes.map((node, ni) => {
+      const selector = this._nodeSelector(node.target);
+      return `
+          <li class="violation-node-item">
+            <button class="btn-highlight" data-violation="${index}" data-node="${ni}" aria-label="Highlight: ${selector}">
+              ${selector}
+            </button>
+          </li>
+        `;
+    }).join("");
+    return `
+      <li class="violation-item">
+        <button class="violation-toggle" aria-expanded="false" aria-controls="violation-detail-${index}">
+          <span class="severity-icon" data-severity="${impact}" aria-hidden="true">${icon(iconName)}</span>
+          <span class="violation-rule">${violation.id}</span>
+          <span class="violation-node-count" aria-label="${nodeLabel}">${nodeLabel}</span>
+          <span class="chevron-icon" aria-hidden="true">${icon("chevron-down")}</span>
+        </button>
+        <div class="violation-detail" id="violation-detail-${index}" role="region" aria-label="${violation.id} details">
+          <p class="violation-description">${violation.description}</p>
+          <ul class="violation-nodes-list" aria-label="Affected elements">${nodes}</ul>
+          <div class="violation-footer">
+            <a class="violation-help-link" href="${violation.helpUrl}" target="_blank" rel="noopener noreferrer">
+              Learn more \u2197
+            </a>
+            <button class="btn-copy-single" data-copy-violation="${index}" aria-label="Copy ${violation.id} to clipboard" title="Copy violation">
+              ${icon("copy")} Copy
+            </button>
+          </div>
+        </div>
+      </li>
+    `;
+  }
+  _nodeSelector(target) {
+    const last = target[target.length - 1];
+    return (Array.isArray(last) ? last[last.length - 1] : last) ?? "";
+  }
+  _bindEvents() {
+    const panel = this._shadow.querySelector(".panel");
+    if (!panel) return;
+    panel.querySelector("#btn-rescan")?.addEventListener("click", () => void this._runScan());
+    panel.querySelector("#btn-minimize")?.addEventListener("click", () => {
+      this.setAttribute("data-minimized", "");
+    });
+    panel.querySelector("#btn-copy-all")?.addEventListener("click", () => void this._copyAll());
+    panel.addEventListener("click", (e) => this._handlePanelClick(e));
+    panel.addEventListener("keydown", (e) => this._handlePanelKeydown(e));
+    this._shadow.querySelector(".fab")?.addEventListener("click", () => {
+      this.removeAttribute("data-minimized");
+    });
+    this._bindHighlightEvents();
+  }
+  _bindHighlightEvents() {
+    for (const btn of this._shadow.querySelectorAll(".btn-highlight")) {
+      btn.addEventListener("click", (e) => {
+        const target = e.currentTarget;
+        const vIdx = Number.parseInt(target.dataset.violation ?? "", 10);
+        const nIdx = Number.parseInt(target.dataset.node ?? "", 10);
+        this._highlightNode(vIdx, nIdx);
+      });
+    }
+  }
+  _handlePanelClick(e) {
+    const target = e.target;
+    const toggle = target.closest(".violation-toggle");
+    if (toggle) {
+      const expanded = toggle.getAttribute("aria-expanded") === "true";
+      toggle.setAttribute("aria-expanded", String(!expanded));
+      const detailId = toggle.getAttribute("aria-controls");
+      const detail = detailId ? this._shadow.getElementById(detailId) : null;
+      if (detail) {
+        if (expanded) {
+          detail.removeAttribute("data-open");
+        } else {
+          detail.setAttribute("data-open", "");
+        }
+      }
+      return;
+    }
+    const copyBtn = target.closest(".btn-copy-single");
+    if (copyBtn) {
+      const vIdx = Number.parseInt(copyBtn.dataset.copyViolation ?? "", 10);
+      void this._copySingle(vIdx);
+      return;
+    }
+    const chip = target.closest(".filter-chip");
+    if (chip) {
+      const severity = chip.dataset.severity;
+      const level = chip.dataset.level;
+      if (severity && isSeverity(severity)) {
+        const active = this._activeSeverities.has(severity);
+        if (active && this._activeSeverities.size > 1) {
+          this._activeSeverities.delete(severity);
+          chip.setAttribute("aria-pressed", "false");
+        } else if (!active) {
+          this._activeSeverities.add(severity);
+          chip.setAttribute("aria-pressed", "true");
+        }
+        this._refreshBody();
+      } else if (level) {
+        const active = this._activeLevels.has(level);
+        if (active && this._activeLevels.size > 1) {
+          this._activeLevels.delete(level);
+          chip.setAttribute("aria-pressed", "false");
+        } else if (!active) {
+          this._activeLevels.add(level);
+          chip.setAttribute("aria-pressed", "true");
+        }
+        this._refreshBody();
+      }
+    }
+  }
+  _handlePanelKeydown(e) {
+    if (e.key === "Escape") {
+      this.setAttribute("data-minimized", "");
+      return;
+    }
+    const list = this._shadow.querySelector(".violation-list");
+    if (!list) return;
+    if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+      const toggles = Array.from(list.querySelectorAll(".violation-toggle"));
+      const current = this._shadow.activeElement;
+      const idx = current ? toggles.indexOf(current) : -1;
+      const next = e.key === "ArrowDown" ? toggles[idx + 1] ?? toggles[0] : toggles[idx - 1] ?? toggles[toggles.length - 1];
+      if (next) {
+        e.preventDefault();
+        next.focus();
+      }
+    }
+  }
+  _refreshBody() {
+    const body = this._shadow.querySelector(".panel-body");
+    if (body) {
+      body.innerHTML = this._renderBody(this._getFilteredViolations());
+      this._bindHighlightEvents();
+    }
+    const total = this._results?.violations.length ?? 0;
+    const countEl = this._shadow.querySelector(".panel-count");
+    if (countEl) {
+      countEl.textContent = String(total);
+      countEl.setAttribute("data-count", String(total));
+    }
+    const fabCountEl = this._shadow.querySelector(".fab-count");
+    if (fabCountEl) {
+      fabCountEl.textContent = String(total);
+      fabCountEl.setAttribute("data-count", String(total));
+    }
+  }
+  _formatViolationsAsMarkdown(violations) {
+    const header = `# a11y-hud scan results
+**URL:** ${location.href}
+**Time:** ${(/* @__PURE__ */ new Date()).toISOString()}
+
+`;
+    const body = violations.map((v) => {
+      const nodes = v.nodes.map((n) => {
+        const lines = ["```html", n.html, "```"];
+        if (n.failureSummary) lines.push(`*Failure:* ${n.failureSummary}`);
+        return lines.join("\n");
+      }).join("\n\n");
+      return [
+        "---",
+        `### [${(v.impact ?? "minor").toUpperCase()}] ${v.id}`,
+        `**Help:** ${v.help}`,
+        `**Description:** ${v.description}`,
+        `**Affected elements (${v.nodes.length}):**`,
+        nodes,
+        `**More info:** ${v.helpUrl}`
+      ].join("\n");
+    }).join("\n\n");
+    return header + body;
+  }
+  async _copyToClipboard(text) {
+    try {
+      await navigator.clipboard.writeText(text);
+    } catch {
+      const ta = document.createElement("textarea");
+      ta.value = text;
+      ta.style.cssText = "position:fixed;opacity:0;pointer-events:none";
+      document.body.appendChild(ta);
+      ta.select();
+      document.execCommand("copy");
+      ta.remove();
+    }
+  }
+  async _copyAll() {
+    const violations = this._results?.violations;
+    if (!violations?.length) return;
+    await this._copyToClipboard(this._formatViolationsAsMarkdown(violations));
+  }
+  async _copySingle(violationIndex) {
+    const violation = this._getFilteredViolations()[violationIndex];
+    if (!violation) return;
+    await this._copyToClipboard(this._formatViolationsAsMarkdown([violation]));
+  }
+  _highlightNode(violationIndex, nodeIndex) {
+    this._removeHighlight?.();
+    this._removeHighlight = void 0;
+    const violation = this._getFilteredViolations()[violationIndex];
+    if (!violation) return;
+    const node = violation.nodes[nodeIndex];
+    if (!node) return;
+    const el = findElement(node.target);
+    if (!el) return;
+    ensureHighlightStyle(document);
+    el.setAttribute(HIGHLIGHT_ATTR, "");
+    el.scrollIntoView({ behavior: "smooth", block: "nearest" });
+    this._removeHighlight = () => el.removeAttribute(HIGHLIGHT_ATTR);
+  }
+};
+customElements.define("a11y-hud", A11yHudElement);
+
+export { A11yHudElement, mount, runScan };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map