a11y-hud 0.2.0 → 0.4.0

package/dist/index.cjs

@@ -6,6 +6,22 @@ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var axe__default = /*#__PURE__*/_interopDefault(axe);
 
+// src/bookmarklet.ts
+var CDN_BASE = "https://cdn.jsdelivr.net/npm/a11y-hud";
+function generateBookmarklet(version = "latest") {
+  const src = `${CDN_BASE}@${version}/dist/index.umd.js`;
+  const js = [
+    "(function(){",
+    "if(window.A11yHud){window.A11yHud.mount();return;}",
+    "var s=document.createElement('script');",
+    `s.src='${src}';`,
+    "s.onload=function(){window.A11yHud.mount();};",
+    "document.head.appendChild(s);",
+    "})()"
+  ].join("");
+  return `javascript:${js}`;
+}
+
 // 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';
 
@@ -24,6 +40,9 @@ var chevron_up_default = '<svg xmlns="http://www.w3.org/2000/svg" width="24" hei
 // 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/download.svg
+var download_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 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" x2="12" y1="15" y2="3"/></svg>';
+
 // 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';
 
@@ -45,6 +64,12 @@ var refresh_cw_default = '<svg xmlns="http://www.w3.org/2000/svg" width="24" hei
 // 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/trash-2.svg
+var trash_2_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 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/><line x1="10" x2="10" y1="11" y2="17"/><line x1="14" x2="14" y1="11" y2="17"/></svg>';
+
+// src/icons/upload.svg
+var upload_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 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" x2="12" y1="3" y2="15"/></svg>';
+
 // 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';
 
@@ -56,6 +81,7 @@ var registry = {
   "chevron-down": chevron_down_default,
   "chevron-up": chevron_up_default,
   copy: copy_default,
+  download: download_default,
   filter: filter_default,
   info: info_default,
   keyboard: keyboard_default,
@@ -63,12 +89,180 @@ var registry = {
   moon: moon_default,
   "refresh-cw": refresh_cw_default,
   sun: sun_default,
+  "trash-2": trash_2_default,
+  upload: upload_default,
   x: x_default
 };
 function icon(name) {
   return registry[name] ?? "";
 }
 
+// src/ignores.ts
+var STORAGE_KEY = "a11y-hud:ignores";
+function load() {
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY);
+    if (raw === null) return [];
+    return JSON.parse(raw);
+  } catch {
+    return [];
+  }
+}
+function save(entries) {
+  try {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(entries));
+  } catch {
+  }
+}
+function matches(a, b) {
+  return a.ruleId === b.ruleId && a.selector === b.selector;
+}
+function addIgnore(ruleId, selector) {
+  const entries = load();
+  const entry = selector !== void 0 ? { ruleId, selector } : { ruleId };
+  if (entries.some((e) => matches(e, entry))) return;
+  entries.push(entry);
+  save(entries);
+}
+function removeIgnore(ruleId, selector) {
+  const entry = selector !== void 0 ? { ruleId, selector } : { ruleId };
+  save(load().filter((e) => !matches(e, entry)));
+}
+function clearIgnores() {
+  save([]);
+}
+function listIgnores() {
+  return load();
+}
+function exportIgnores() {
+  return JSON.stringify(listIgnores(), null, 2);
+}
+function importIgnores(json) {
+  let parsed;
+  try {
+    parsed = JSON.parse(json);
+  } catch {
+    return;
+  }
+  if (!Array.isArray(parsed)) return;
+  const entries = [];
+  for (const item of parsed) {
+    if (typeof item !== "object" || item === null) continue;
+    const { ruleId, selector } = item;
+    if (typeof ruleId !== "string") continue;
+    if (selector !== void 0 && typeof selector !== "string") continue;
+    entries.push(selector !== void 0 ? { ruleId, selector } : { ruleId });
+  }
+  save(entries);
+}
+
+// src/keyboard.ts
+var FOCUSABLE_SELECTOR = [
+  "a[href]:not([tabindex='-1'])",
+  "button:not([disabled]):not([tabindex='-1'])",
+  "input:not([disabled]):not([tabindex='-1'])",
+  "select:not([disabled]):not([tabindex='-1'])",
+  "textarea:not([disabled]):not([tabindex='-1'])",
+  "[tabindex]:not([tabindex='-1'])",
+  "details > summary:not([tabindex='-1'])",
+  "area[href]:not([tabindex='-1'])"
+].join(", ");
+var INTERACTIVE_SELECTOR = "a[href], button, input, select, textarea, [role='button'], [role='link']";
+function buildSelector(el) {
+  if (el.id) {
+    return `#${el.id}`;
+  }
+  let selector = el.tagName.toLowerCase();
+  if (el.className && typeof el.className === "string") {
+    const classes = el.className.trim().split(/\s+/).slice(0, 2);
+    if (classes.length > 0 && classes[0] !== "") {
+      selector += classes.map((c) => `.${c}`).join("");
+    }
+  }
+  return selector;
+}
+function getFocusableElements(scope) {
+  const all = Array.from(scope.querySelectorAll(FOCUSABLE_SELECTOR));
+  const positive = [];
+  const zero = [];
+  for (const el of all) {
+    const ti = el.tabIndex;
+    if (ti > 0) {
+      positive.push(el);
+    } else {
+      zero.push(el);
+    }
+  }
+  positive.sort((a, b) => a.tabIndex - b.tabIndex);
+  const ordered = [...positive, ...zero];
+  return ordered.map((element, i) => ({
+    element,
+    index: i + 1,
+    selector: buildSelector(element),
+    tabIndex: element.tabIndex
+  }));
+}
+function injectFocusOrderOverlay(elements) {
+  if (!document.getElementById("a11y-hud-kbd-style")) {
+    const style = document.createElement("style");
+    style.id = "a11y-hud-kbd-style";
+    style.textContent = [
+      "#a11y-hud-kbd-overlay{position:absolute;top:0;left:0;width:0;height:0;pointer-events:none;z-index:2147483646}",
+      ".a11y-hud-kbd-badge{position:absolute;min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:#7c3aed;color:#fff;font:700 11px/20px system-ui,sans-serif;text-align:center;pointer-events:none}"
+    ].join("");
+    document.head.appendChild(style);
+  }
+  const overlay = document.createElement("div");
+  overlay.id = "a11y-hud-kbd-overlay";
+  document.body.appendChild(overlay);
+  const scrollX = window.scrollX;
+  const scrollY = window.scrollY;
+  for (const info of elements) {
+    const rect = info.element.getBoundingClientRect();
+    const badge = document.createElement("span");
+    badge.className = "a11y-hud-kbd-badge";
+    badge.textContent = String(info.index);
+    badge.style.top = `${rect.top + scrollY}px`;
+    badge.style.left = `${rect.left + scrollX}px`;
+    overlay.appendChild(badge);
+  }
+  return () => {
+    document.getElementById("a11y-hud-kbd-overlay")?.remove();
+    document.getElementById("a11y-hud-kbd-style")?.remove();
+  };
+}
+function detectKeyboardViolations(elements, scope = document.body) {
+  const violations = [];
+  if (elements.length === 0) {
+    violations.push({
+      type: "no-focusable-elements",
+      message: "No focusable elements found in scope. Users who rely on keyboard navigation cannot reach any interactive content."
+    });
+  }
+  for (const info of elements) {
+    if (info.tabIndex > 0) {
+      violations.push({
+        type: "positive-tabindex",
+        element: info.element,
+        selector: info.selector,
+        message: `tabindex="${info.tabIndex}" on <${info.element.tagName.toLowerCase()}> disrupts the natural tab order. Use tabindex="0" instead.`
+      });
+    }
+  }
+  const excluded = Array.from(scope.querySelectorAll(INTERACTIVE_SELECTOR)).filter(
+    (el) => el.tabIndex === -1
+  );
+  for (const el of excluded) {
+    violations.push({
+      type: "interactive-excluded",
+      element: el,
+      selector: buildSelector(el),
+      message: `<${el.tagName.toLowerCase()}> with tabindex="-1" is removed from the tab order. Keyboard users cannot reach this element.`
+    });
+  }
+  return violations;
+}
+
 // src/observer.ts
 function debounce(fn, delay) {
   let timer;
@@ -87,6 +281,7 @@ async function runScan(target = document.body, runOnly) {
   }
   const options = runOnly && runOnly.length > 0 ? { runOnly: { type: "tag", values: runOnly } } : {};
   const run = axe__default.default.run(target, options).then((results) => {
+    const ignores = listIgnores();
     results.violations = results.violations.map((v) => ({
       ...v,
       nodes: v.nodes.filter((node) => {
@@ -94,7 +289,19 @@ async function runScan(target = document.body, runOnly) {
         const selector = (Array.isArray(first) ? first[0] : first) ?? "";
         return !String(selector).toLowerCase().startsWith("a11y-hud");
       })
-    })).filter((v) => v.nodes.length > 0);
+    })).filter((v) => v.nodes.length > 0).map((v) => {
+      if (ignores.some((e) => e.ruleId === v.id && e.selector === void 0)) {
+        return null;
+      }
+      const hasNodeIgnores = ignores.some((e) => e.ruleId === v.id && e.selector !== void 0);
+      if (!hasNodeIgnores) return v;
+      const nodes = v.nodes.filter((node) => {
+        const last = node.target[node.target.length - 1];
+        const sel = (Array.isArray(last) ? last[last.length - 1] : last) ?? "";
+        return !ignores.some((e) => e.ruleId === v.id && e.selector === sel);
+      });
+      return nodes.length > 0 ? { ...v, nodes } : null;
+    }).filter((v) => v !== null);
     return results;
   }).finally(() => {
     activeRun = null;
@@ -104,10 +311,10 @@ async function runScan(target = document.body, runOnly) {
 }
 
 // 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:\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[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:\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-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:\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.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';
+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';
 
 // 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="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-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-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-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-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-focus-ring: #ffffff;\n}\n';
+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';
 
 // src/theme.ts
 function resolveTheme(theme) {
@@ -168,6 +375,9 @@ function ensureHighlightStyle(doc) {
   style.textContent = HIGHLIGHT_CSS;
   doc.head.appendChild(style);
 }
+function escapeHtml(s) {
+  return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
 function buildStyleSheet(css) {
   try {
     const sheet = new CSSStyleSheet();
@@ -191,10 +401,15 @@ var A11yHudElement = class extends HTMLElement {
   _observer;
   _unwatchTheme;
   _removeHighlight;
-  _activeSeverities = /* @__PURE__ */ new Set(["critical", "serious", "moderate", "minor"]);
-  _activeLevels = /* @__PURE__ */ new Set(["A", "AA", "AAA"]);
+  _activeSeverities = /* @__PURE__ */ new Set();
+  _activeLevels = /* @__PURE__ */ new Set();
   _runOnly = [];
   _debouncedScan;
+  _keyboardMode = false;
+  _keyboardCleanup;
+  _kbElements = [];
+  _filtersOpen = false;
+  _ignoredSectionOpen = false;
   constructor() {
     super();
     this._shadow = this.attachShadow({ mode: "open" });
@@ -232,6 +447,8 @@ ${themes_default}`;
     this._unwatchTheme?.();
     this._removeHighlight?.();
     this._removeHighlight = void 0;
+    this._keyboardCleanup?.();
+    this._keyboardCleanup = void 0;
     this._debouncedScan.cancel();
   }
   attributeChangedCallback(name, _old, value) {
@@ -354,9 +571,10 @@ ${themes_default}`;
     const violations = this._results?.violations ?? [];
     return violations.filter((v) => {
       const impact = v.impact;
-      if (impact && !this._activeSeverities.has(impact)) return false;
+      if (this._activeSeverities.size > 0 && impact && !this._activeSeverities.has(impact))
+        return false;
       const level = getViolationLevel(v.tags);
-      if (level && !this._activeLevels.has(level)) return false;
+      if (this._activeLevels.size > 0 && level && !this._activeLevels.has(level)) return false;
       return true;
     });
   }
@@ -381,11 +599,14 @@ ${themes_default}`;
       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();
+    if (!this._keyboardMode) {
+      const body = panel.querySelector(".panel-body");
+      if (body) body.innerHTML = this._renderBody(filtered);
+      this._bindHighlightEvents();
+    }
   }
   _renderScanning() {
+    if (this._keyboardMode) return;
     const body = this._shadow.querySelector(".panel-body");
     if (body) {
       body.innerHTML = `
@@ -393,6 +614,7 @@ ${themes_default}`;
           <span class="scanning-spinner" aria-hidden="true">${icon("refresh-cw")}</span>
           Scanning\u2026
         </div>
+        ${this._renderIgnoredSection()}
       `;
     }
   }
@@ -400,18 +622,25 @@ ${themes_default}`;
     return `
       <div class="panel" role="complementary" aria-label="Accessibility panel">
         <div class="panel-header">
-          <span class="panel-title">
+          <button class="btn-panel-title" aria-expanded="${this._filtersOpen}" aria-controls="panel-filters" aria-label="Toggle filters" title="Toggle filters">
             <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>
+            <span class="panel-title-chevron" aria-hidden="true">${icon("chevron-down")}</span>
+          </button>
           <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-export" aria-label="Export results as JSON" title="Export JSON">
+              ${icon("download")}
+            </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-keyboard" aria-label="Toggle keyboard mode" title="Keyboard mode" aria-pressed="false">
+              ${icon("keyboard")}
+            </button>
             <button class="btn-icon" id="btn-minimize" aria-label="Minimize panel" title="Minimize">
               ${icon("minus")}
             </button>
@@ -447,7 +676,7 @@ ${themes_default}`;
       return `<button class="filter-chip" data-ruleset="${r}" aria-pressed="${active}">${r}</button>`;
     }).join("");
     return `
-      <div class="panel-filters" aria-label="Filters">
+      <div id="panel-filters" class="panel-filters" aria-label="Filters" ${this._filtersOpen ? "data-open" : ""}>
         <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 class="filter-group" role="group" aria-label="Run only rule sets">${ruleSetChips}</div>
@@ -461,6 +690,7 @@ ${themes_default}`;
           <span class="scanning-spinner" aria-hidden="true">${icon("refresh-cw")}</span>
           <span class="empty-state-body">Running first scan\u2026</span>
         </div>
+        ${this._renderIgnoredSection()}
       `;
     }
     if (violations.length === 0) {
@@ -472,10 +702,44 @@ ${themes_default}`;
             ${this._results.violations.length > 0 ? "All violations filtered out." : "Great job! The scanned area has no axe-core violations."}
           </span>
         </div>
+        ${this._renderIgnoredSection()}
       `;
     }
     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>`;
+    return `<ul class="violation-list" role="list" aria-label="${violations.length} violation${violations.length !== 1 ? "s" : ""}">${items}</ul>${this._renderIgnoredSection()}`;
+  }
+  _renderIgnoredSection() {
+    const entries = listIgnores();
+    const removeAttrs = (e) => e.selector !== void 0 ? `data-remove-rule="${e.ruleId}" data-remove-selector="${e.selector}"` : `data-remove-rule="${e.ruleId}"`;
+    const listHtml = entries.length === 0 ? `<p class="ignored-empty">No rules ignored yet.</p>` : `<ul class="ignored-list" aria-label="Ignored rules">${entries.map(
+      (e) => `
+              <li class="ignored-entry">
+                <span class="ignored-rule-id">${e.ruleId}</span>
+                ${e.selector !== void 0 ? `<code class="ignored-selector">${e.selector}</code>` : ""}
+                <button class="btn-remove-ignore" ${removeAttrs(e)} aria-label="Remove ignore for ${e.ruleId}">
+                  ${icon("trash-2")}
+                </button>
+              </li>`
+    ).join("")}</ul>`;
+    return `
+      <div class="ignored-section">
+        <button class="ignored-section-toggle" aria-expanded="${this._ignoredSectionOpen}" aria-controls="ignored-section-body">
+          <span>Ignored rules (${entries.length})</span>
+          <span class="chevron-icon" aria-hidden="true">${icon("chevron-down")}</span>
+        </button>
+        <div id="ignored-section-body" class="ignored-section-body" ${this._ignoredSectionOpen ? "data-open" : ""}>
+          ${listHtml}
+          <div class="ignored-actions">
+            <button class="btn-export-ignores btn-sm" aria-label="Export ignored rules as JSON" title="Export ignores">
+              ${icon("download")} Export
+            </button>
+            <button class="btn-import-ignores btn-sm" aria-label="Import ignored rules from JSON" title="Import ignores">
+              ${icon("upload")} Import
+            </button>
+            ${entries.length > 0 ? `<button class="btn-clear-ignores btn-sm" aria-label="Clear all ignored rules" title="Clear all">${icon("trash-2")} Clear all</button>` : ""}
+          </div>
+        </div>
+      </div>`;
   }
   _renderViolationItem(violation, index) {
     const impact = violation.impact ?? "minor";
@@ -510,6 +774,9 @@ ${themes_default}`;
             <button class="btn-copy-single" data-copy-violation="${index}" aria-label="Copy ${violation.id} to clipboard" title="Copy violation">
               ${icon("copy")} Copy
             </button>
+            <button class="btn-ignore-rule" data-ignore-rule="${violation.id}" aria-label="Ignore rule ${violation.id}" title="Ignore this rule">
+              ${icon("trash-2")} Ignore
+            </button>
           </div>
         </div>
       </li>
@@ -522,11 +789,14 @@ ${themes_default}`;
   _bindEvents() {
     const panel = this._shadow.querySelector(".panel");
     if (!panel) return;
+    panel.querySelector(".btn-panel-title")?.addEventListener("click", () => this._toggleFilters());
     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.querySelector("#btn-export")?.addEventListener("click", () => this._exportJson());
+    panel.querySelector("#btn-keyboard")?.addEventListener("click", () => this._toggleKeyboardMode());
     panel.addEventListener("click", (e) => this._handlePanelClick(e));
     panel.addEventListener("keydown", (e) => this._handlePanelKeydown(e));
     this._shadow.querySelector(".fab")?.addEventListener("click", () => {
@@ -567,29 +837,84 @@ ${themes_default}`;
       void this._copySingle(vIdx);
       return;
     }
+    const kbdElementBtn = target.closest(".btn-kbd-element");
+    if (kbdElementBtn) {
+      const idx = Number.parseInt(kbdElementBtn.dataset.kbdElement ?? "", 10);
+      const info = this._kbElements.find((e2) => e2.index === idx);
+      if (info) {
+        this._removeHighlight?.();
+        ensureHighlightStyle(document);
+        const el = info.element;
+        el.setAttribute(HIGHLIGHT_ATTR, "");
+        el.scrollIntoView({ behavior: "smooth", block: "nearest" });
+        this._removeHighlight = () => el.removeAttribute(HIGHLIGHT_ATTR);
+      }
+      return;
+    }
+    const ignoreBtn = target.closest(".btn-ignore-rule");
+    if (ignoreBtn) {
+      const ruleId = ignoreBtn.dataset.ignoreRule;
+      if (ruleId) {
+        addIgnore(ruleId);
+        void this._runScan();
+      }
+      return;
+    }
+    const removeIgnoreBtn = target.closest(".btn-remove-ignore");
+    if (removeIgnoreBtn) {
+      const ruleId = removeIgnoreBtn.dataset.removeRule;
+      const selector = removeIgnoreBtn.dataset.removeSelector || void 0;
+      if (ruleId) {
+        removeIgnore(ruleId, selector);
+        void this._runScan();
+      }
+      return;
+    }
+    if (target.closest(".btn-export-ignores")) {
+      this._exportIgnoresJson();
+      return;
+    }
+    if (target.closest(".btn-import-ignores")) {
+      this._importIgnoresJson();
+      return;
+    }
+    if (target.closest(".btn-clear-ignores")) {
+      clearIgnores();
+      void this._runScan();
+      return;
+    }
+    const ignoredToggle = target.closest(".ignored-section-toggle");
+    if (ignoredToggle) {
+      this._ignoredSectionOpen = !this._ignoredSectionOpen;
+      ignoredToggle.setAttribute("aria-expanded", String(this._ignoredSectionOpen));
+      const bodyId = ignoredToggle.getAttribute("aria-controls");
+      const sectionBody = bodyId ? this._shadow.getElementById(bodyId) : null;
+      if (sectionBody) {
+        sectionBody.toggleAttribute("data-open", this._ignoredSectionOpen);
+      }
+      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) {
+        if (active) {
           this._activeSeverities.delete(severity);
-          chip.setAttribute("aria-pressed", "false");
-        } else if (!active) {
+        } else {
           this._activeSeverities.add(severity);
-          chip.setAttribute("aria-pressed", "true");
         }
+        chip.setAttribute("aria-pressed", String(!active));
         this._refreshBody();
       } else if (level) {
         const active = this._activeLevels.has(level);
-        if (active && this._activeLevels.size > 1) {
+        if (active) {
           this._activeLevels.delete(level);
-          chip.setAttribute("aria-pressed", "false");
-        } else if (!active) {
+        } else {
           this._activeLevels.add(level);
-          chip.setAttribute("aria-pressed", "true");
         }
+        chip.setAttribute("aria-pressed", String(!active));
         this._refreshBody();
       } else if (chip.dataset.ruleset) {
         const ruleset = chip.dataset.ruleset;
@@ -601,6 +926,7 @@ ${themes_default}`;
           this._runOnly = [...this._runOnly, ruleset];
           chip.setAttribute("aria-pressed", "true");
         }
+        this._updateFilterToggle();
         void this._runScan();
       }
     }
@@ -646,6 +972,7 @@ ${themes_default}`;
       fabCountEl.textContent = String(total);
       fabCountEl.setAttribute("data-count", String(total));
     }
+    this._updateFilterToggle();
   }
   _formatViolationsAsMarkdown(violations) {
     const header = `# a11y-hud scan results
@@ -694,6 +1021,155 @@ ${themes_default}`;
     if (!violation) return;
     await this._copyToClipboard(this._formatViolationsAsMarkdown([violation]));
   }
+  _hasActiveFilters() {
+    return this._activeSeverities.size > 0 || this._activeLevels.size > 0 || this._runOnly.length > 0;
+  }
+  _updateFilterToggle() {
+    const btn = this._shadow.querySelector(".btn-panel-title");
+    if (!btn) return;
+    btn.setAttribute("aria-expanded", String(this._filtersOpen));
+    if (this._hasActiveFilters()) {
+      btn.setAttribute("data-active", "");
+    } else {
+      btn.removeAttribute("data-active");
+    }
+  }
+  _toggleFilters() {
+    this._filtersOpen = !this._filtersOpen;
+    const filters = this._shadow.getElementById("panel-filters");
+    filters?.toggleAttribute("data-open", this._filtersOpen);
+    this._updateFilterToggle();
+  }
+  _toggleKeyboardMode() {
+    this._keyboardMode = !this._keyboardMode;
+    const btn = this._shadow.querySelector("#btn-keyboard");
+    if (btn) btn.setAttribute("aria-pressed", String(this._keyboardMode));
+    this._shadow.querySelector(".panel")?.toggleAttribute("data-kbd-mode", this._keyboardMode);
+    if (this._keyboardMode) {
+      this._activateKeyboardMode();
+    } else {
+      this._deactivateKeyboardMode();
+    }
+  }
+  _activateKeyboardMode() {
+    const scope = this._getScopeTarget();
+    this._kbElements = getFocusableElements(scope);
+    const violations = detectKeyboardViolations(this._kbElements, scope);
+    this._keyboardCleanup = injectFocusOrderOverlay(this._kbElements);
+    const body = this._shadow.querySelector(".panel-body");
+    if (body) body.innerHTML = this._renderKeyboardView(this._kbElements, violations);
+  }
+  _deactivateKeyboardMode() {
+    this._keyboardCleanup?.();
+    this._keyboardCleanup = void 0;
+    this._kbElements = [];
+    this._removeHighlight?.();
+    this._removeHighlight = void 0;
+    const body = this._shadow.querySelector(".panel-body");
+    if (body) {
+      body.innerHTML = this._renderBody(this._getFilteredViolations());
+      this._bindHighlightEvents();
+    }
+  }
+  _renderKeyboardView(elements, violations) {
+    const elementItems = elements.map(
+      (info) => `
+        <li class="kbd-element-item">
+          <button class="btn-kbd-element" data-kbd-element="${info.index}" aria-label="Highlight element ${info.index}: ${escapeHtml(info.selector)}">
+            <span class="kbd-element-index" aria-hidden="true">${info.index}</span>
+            <code class="kbd-element-selector">${escapeHtml(info.selector)}</code>
+            <span class="kbd-element-tag">&lt;${info.element.tagName.toLowerCase()}&gt;</span>
+            ${info.tabIndex > 0 ? `<span class="kbd-tabindex-badge">tabindex=${info.tabIndex}</span>` : ""}
+          </button>
+        </li>`
+    ).join("");
+    const violationItems = violations.map(
+      (v) => `
+        <li class="kbd-violation-item">
+          <span class="severity-icon" data-severity="serious" aria-hidden="true">${icon("alert-circle")}</span>
+          <span class="kbd-violation-msg">${escapeHtml(v.message)}</span>
+        </li>`
+    ).join("");
+    return `
+      <div class="kbd-mode-view">
+        <div class="kbd-mode-header">
+          <span class="kbd-mode-stat">
+            <span aria-hidden="true">${icon("keyboard")}</span>
+            ${elements.length} focusable element${elements.length !== 1 ? "s" : ""}
+          </span>
+          ${violations.length > 0 ? `<span class="kbd-mode-stat kbd-mode-stat--warn">
+                  <span aria-hidden="true">${icon("alert-circle")}</span>
+                  ${violations.length} issue${violations.length !== 1 ? "s" : ""}
+                </span>` : `<span class="kbd-mode-stat kbd-mode-stat--ok">
+                  <span aria-hidden="true">${icon("check-circle")}</span>
+                  No issues
+                </span>`}
+        </div>
+        ${violations.length > 0 ? `<ul class="kbd-violation-list" aria-label="Keyboard issues">${violationItems}</ul>` : ""}
+        ${elements.length > 0 ? `<ul class="kbd-element-list" aria-label="Focusable elements in tab order">${elementItems}</ul>` : `<p class="kbd-empty">No focusable elements found in the scoped area.</p>`}
+      </div>`;
+  }
+  _exportIgnoresJson() {
+    const json = exportIgnores();
+    const blob = new Blob([json], { type: "application/json" });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = "a11y-hud-ignores.json";
+    a.click();
+    URL.revokeObjectURL(url);
+  }
+  _importIgnoresJson() {
+    const input = document.createElement("input");
+    input.type = "file";
+    input.accept = ".json,application/json";
+    input.onchange = () => {
+      const file = input.files?.[0];
+      if (!file) return;
+      const reader = new FileReader();
+      reader.onload = (evt) => {
+        importIgnores(evt.target?.result ?? "");
+        void this._runScan();
+      };
+      reader.readAsText(file);
+    };
+    input.click();
+  }
+  _getScopeString() {
+    if (this._scopeSelector) return this._scopeSelector;
+    if (this._scopeElement) {
+      const el = this._scopeElement;
+      if (el.id) return `#${el.id}`;
+      return el.tagName.toLowerCase();
+    }
+    return "document.body";
+  }
+  _buildExport() {
+    if (!this._results) return null;
+    return {
+      version: "1",
+      timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+      url: location.href,
+      scope: this._getScopeString(),
+      results: this._results
+    };
+  }
+  _exportJson() {
+    const data = this._buildExport();
+    if (!data) return;
+    const json = JSON.stringify(data, null, 2);
+    const blob = new Blob([json], { type: "application/json" });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = "a11y-hud-results.json";
+    a.click();
+    URL.revokeObjectURL(url);
+  }
+  exportResults() {
+    const data = this._buildExport();
+    return data ? JSON.stringify(data, null, 2) : null;
+  }
   _highlightNode(violationIndex, nodeIndex) {
     this._removeHighlight?.();
     this._removeHighlight = void 0;
@@ -749,12 +1225,49 @@ function mount(options = {}) {
     },
     async runScan() {
       return el.runScan();
+    },
+    exportResults() {
+      return el.exportResults();
+    },
+    ignores: {
+      add(ruleId, selector) {
+        addIgnore(ruleId, selector);
+        void el.runScan();
+      },
+      remove(ruleId, selector) {
+        removeIgnore(ruleId, selector);
+        void el.runScan();
+      },
+      clear() {
+        clearIgnores();
+        void el.runScan();
+      },
+      list() {
+        return listIgnores();
+      },
+      exportJson() {
+        return exportIgnores();
+      },
+      importJson(json) {
+        importIgnores(json);
+        void el.runScan();
+      }
     }
   };
 }
 
 exports.A11yHudElement = A11yHudElement;
+exports.addIgnore = addIgnore;
+exports.clearIgnores = clearIgnores;
+exports.detectKeyboardViolations = detectKeyboardViolations;
+exports.exportIgnores = exportIgnores;
+exports.generateBookmarklet = generateBookmarklet;
+exports.getFocusableElements = getFocusableElements;
+exports.importIgnores = importIgnores;
+exports.injectFocusOrderOverlay = injectFocusOrderOverlay;
+exports.listIgnores = listIgnores;
 exports.mount = mount;
+exports.removeIgnore = removeIgnore;
 exports.runScan = runScan;
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map