@a.nemreen/a11y 0.1.0

package/dist/index.js

@@ -0,0 +1,1227 @@
+// src/controller.ts
+var DEFAULT_STORAGE_KEY = "dga-a11y";
+var FONT_SCALES = [1, 1.15, 1.3, 1.5];
+var FONT_STEPS = [0, 1, 2, 3];
+var TEXT_ALIGNS = ["default", "end", "start", "justify"];
+var LINE_HEIGHTS = ["normal", "1.6", "1.8", "2.0"];
+var LETTER_SPACINGS = ["0", "0.04em", "0.08em", "0.12em"];
+var WORD_SPACINGS = ["0", "0.16em", "0.32em", "0.48em"];
+var A11Y_BUNDLES = [
+  "epilepsy-safe",
+  "visually-impaired",
+  "cognitive-disability",
+  "motor-impaired",
+  "colorblind",
+  "dyslexia-friendly",
+  "adhd-friendly"
+];
+var BUNDLE_PRIMITIVES = {
+  "epilepsy-safe": ["reduce-motion"],
+  "visually-impaired": ["high-contrast"],
+  "cognitive-disability": ["highlight-titles", "reduce-motion"],
+  "motor-impaired": ["motor-targets"],
+  colorblind: [],
+  "dyslexia-friendly": ["dyslexia", "highlight-links"],
+  "adhd-friendly": ["reduce-motion", "highlight-titles", "reading-mask"]
+};
+var A11yController = class {
+  constructor(options = {}) {
+    this.listeners = /* @__PURE__ */ new Set();
+    this.liveRegion = null;
+    this.opener = null;
+    this.mqMotion = null;
+    this.mqContrast = null;
+    this.localeObserver = null;
+    this.localeOverride = null;
+    this.destroyed = false;
+    this.isOpen = false;
+    this.modes = /* @__PURE__ */ new Set();
+    this.visualFilter = "none";
+    this.fontStep = 0;
+    this.textAlign = "default";
+    this.lineHeight = "normal";
+    this.letterSpacing = "0";
+    this.wordSpacing = "0";
+    this.maskBand = 60;
+    this.maskY = 0;
+    this.locale = "ar";
+    this.onOsChange = () => {
+      this.modes = new Set(this.modes);
+      if (this.mqMotion?.matches) this.modes.add("reduce-motion");
+      if (this.mqContrast?.matches) this.modes.add("high-contrast");
+      this.notify();
+    };
+    this.doc = options.document ?? document;
+    this.storageKey = options.storageKey ?? DEFAULT_STORAGE_KEY;
+    if (options.locale && options.locale !== "auto") {
+      this.localeOverride = options.locale;
+      this.locale = options.locale;
+    } else {
+      this.locale = this.readDomLocale();
+    }
+    this.hydrate();
+    this.bindOsPreferences();
+    this.bindLocaleObserver();
+  }
+  subscribe(listener) {
+    this.listeners.add(listener);
+    return () => this.listeners.delete(listener);
+  }
+  emit() {
+    for (const fn of this.listeners) fn();
+  }
+  notify() {
+    this.applyToDocument();
+    this.ensureDyslexiaFont(this.hasEffectiveMode("dyslexia"));
+    this.persist();
+    this.emit();
+  }
+  effectiveModes() {
+    const effective = new Set(this.modes);
+    for (const b of A11Y_BUNDLES) {
+      if (this.modes.has(b)) {
+        for (const p of BUNDLE_PRIMITIVES[b]) effective.add(p);
+      }
+    }
+    return effective;
+  }
+  hasEffectiveMode(mode) {
+    return this.effectiveModes().has(mode);
+  }
+  open(opener) {
+    if (opener) this.opener = opener;
+    this.isOpen = true;
+    this.emit();
+  }
+  close() {
+    this.isOpen = false;
+    const el = this.opener;
+    this.opener = null;
+    this.emit();
+    queueMicrotask(() => el?.focus?.());
+  }
+  toggle(opener) {
+    if (this.isOpen) this.close();
+    else this.open(opener);
+  }
+  hasMode(mode) {
+    return this.modes.has(mode);
+  }
+  isBundle(mode) {
+    return A11Y_BUNDLES.includes(mode);
+  }
+  toggleMode(mode) {
+    this.setMode(mode, !this.modes.has(mode));
+  }
+  setMode(mode, enabled) {
+    if (enabled) {
+      if (this.modes.has(mode)) return;
+      this.modes = new Set(this.modes);
+      this.modes.add(mode);
+      if (this.isBundle(mode)) this.applyBundleExtras(mode, true);
+      this.notify();
+      return;
+    }
+    const bundlesToDisable = [];
+    if (this.isBundle(mode)) {
+      if (!this.modes.has(mode)) return;
+      bundlesToDisable.push(mode);
+    } else {
+      for (const b of A11Y_BUNDLES) {
+        if (this.modes.has(b) && BUNDLE_PRIMITIVES[b].includes(mode)) {
+          bundlesToDisable.push(b);
+        }
+      }
+      if (!this.modes.has(mode) && bundlesToDisable.length === 0) return;
+    }
+    this.modes = new Set(this.modes);
+    this.modes.delete(mode);
+    for (const b of bundlesToDisable) this.modes.delete(b);
+    for (const b of bundlesToDisable) {
+      this.applyBundleExtras(b, false);
+    }
+    this.notify();
+  }
+  setVisualFilter(filter) {
+    this.visualFilter = this.visualFilter === filter ? "none" : filter;
+    this.notify();
+  }
+  stepFontStep(delta) {
+    const len = FONT_STEPS.length;
+    this.fontStep = ((this.fontStep + delta) % len + len) % len;
+    this.notify();
+  }
+  stepTextAlign(delta) {
+    const len = TEXT_ALIGNS.length;
+    const i = TEXT_ALIGNS.indexOf(this.textAlign);
+    this.textAlign = TEXT_ALIGNS[((i + delta) % len + len) % len];
+    this.notify();
+  }
+  stepLineHeight(delta) {
+    const len = LINE_HEIGHTS.length;
+    const i = LINE_HEIGHTS.indexOf(this.lineHeight);
+    this.lineHeight = LINE_HEIGHTS[((i + delta) % len + len) % len];
+    this.notify();
+  }
+  stepLetterSpacing(delta) {
+    const len = LETTER_SPACINGS.length;
+    const i = LETTER_SPACINGS.indexOf(this.letterSpacing);
+    this.letterSpacing = LETTER_SPACINGS[((i + delta) % len + len) % len];
+    this.notify();
+  }
+  stepWordSpacing(delta) {
+    const len = WORD_SPACINGS.length;
+    const i = WORD_SPACINGS.indexOf(this.wordSpacing);
+    this.wordSpacing = WORD_SPACINGS[((i + delta) % len + len) % len];
+    this.notify();
+  }
+  adjustMaskBand(delta) {
+    this.maskBand = Math.max(20, Math.min(160, this.maskBand + delta));
+    this.notify();
+  }
+  setMaskY(y) {
+    const vh = this.doc.defaultView?.innerHeight ?? 800;
+    this.maskY = Math.max(0, Math.min(vh, y));
+    this.notify();
+  }
+  reset() {
+    this.modes = /* @__PURE__ */ new Set();
+    this.visualFilter = "none";
+    this.fontStep = 0;
+    this.textAlign = "default";
+    this.lineHeight = "normal";
+    this.letterSpacing = "0";
+    this.wordSpacing = "0";
+    this.maskBand = 60;
+    const vh = this.doc.defaultView?.innerHeight ?? 800;
+    this.maskY = Math.round(vh / 2);
+    this.notify();
+  }
+  announce(msg) {
+    const region = this.ensureLiveRegion();
+    region.textContent = "";
+    requestAnimationFrame(() => {
+      region.textContent = msg;
+    });
+  }
+  toggleLocale() {
+    const next = this.locale === "ar" ? "en" : "ar";
+    const root = this.doc.documentElement;
+    root.lang = next;
+    root.dir = next === "ar" ? "rtl" : "ltr";
+    root.dataset["locale"] = next;
+    this.localeOverride = next;
+    this.locale = next;
+    this.emit();
+    return next;
+  }
+  activeModeCount(section) {
+    if (section === "modes") {
+      return A11Y_BUNDLES.filter((b) => this.modes.has(b)).length;
+    }
+    if (section === "readable") {
+      let n = 0;
+      if (this.fontStep > 0) n++;
+      if (this.modes.has("dyslexia")) n++;
+      if (this.modes.has("highlight-titles")) n++;
+      if (this.modes.has("highlight-links")) n++;
+      if (this.modes.has("reading-mask")) n++;
+      if (this.modes.has("reduce-motion")) n++;
+      if (this.textAlign !== "default") n++;
+      if (this.lineHeight !== "normal") n++;
+      if (this.letterSpacing !== "0") n++;
+      if (this.wordSpacing !== "0") n++;
+      return n;
+    }
+    return this.visualFilter === "none" ? 0 : 1;
+  }
+  activeSettingCount() {
+    return this.activeModeCount("modes") + this.activeModeCount("readable") + this.activeModeCount("visual");
+  }
+  destroy() {
+    if (this.destroyed) return;
+    this.destroyed = true;
+    this.localeObserver?.disconnect();
+    this.localeObserver = null;
+    this.mqMotion?.removeEventListener?.("change", this.onOsChange);
+    this.mqContrast?.removeEventListener?.("change", this.onOsChange);
+    this.listeners.clear();
+    this.liveRegion?.remove();
+    this.liveRegion = null;
+    this.doc.getElementById("dga-a11y-opendyslexic")?.remove();
+  }
+  applyBundleExtras(bundle, enable) {
+    const extras = BUNDLE_PRIMITIVES[bundle];
+    this.modes = new Set(this.modes);
+    for (const p of extras) {
+      if (enable) {
+        this.modes.add(p);
+      } else {
+        const stillNeeded = A11Y_BUNDLES.some(
+          (b) => b !== bundle && this.modes.has(b) && BUNDLE_PRIMITIVES[b].includes(p)
+        );
+        if (!stillNeeded) this.modes.delete(p);
+      }
+    }
+    if (bundle === "epilepsy-safe") {
+      if (enable) this.visualFilter = "low-saturation";
+      else if (this.visualFilter === "low-saturation") this.visualFilter = "none";
+    }
+    if (bundle === "colorblind") {
+      if (enable) this.visualFilter = "deuteranopia";
+      else if (this.visualFilter === "deuteranopia") this.visualFilter = "none";
+    }
+    if (bundle === "visually-impaired") {
+      if (enable) this.fontStep = 2;
+      else if (this.fontStep === 2) this.fontStep = 0;
+    }
+    if (bundle === "dyslexia-friendly") {
+      if (enable) {
+        this.lineHeight = "1.8";
+        this.letterSpacing = "0.08em";
+        this.wordSpacing = "0.16em";
+      } else {
+        if (this.lineHeight === "1.8") this.lineHeight = "normal";
+        if (this.letterSpacing === "0.08em") this.letterSpacing = "0";
+        if (this.wordSpacing === "0.16em") this.wordSpacing = "0";
+      }
+    }
+  }
+  ensureDyslexiaFont(needed) {
+    const id = "dga-a11y-opendyslexic";
+    const existing = this.doc.getElementById(id);
+    if (!needed) {
+      existing?.remove();
+      return;
+    }
+    if (existing) return;
+    const style = this.doc.createElement("style");
+    style.id = id;
+    style.textContent = `
+@font-face {
+  font-family: 'OpenDyslexic';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('https://cdn.jsdelivr.net/fontsource/fonts/opendyslexic@5.2.5/latin-400-normal.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'OpenDyslexic';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url('https://cdn.jsdelivr.net/fontsource/fonts/opendyslexic@5.2.5/latin-700-normal.woff2') format('woff2');
+}`;
+    this.doc.head.appendChild(style);
+  }
+  applyToDocument() {
+    const root = this.doc.documentElement;
+    const modes = this.modes;
+    const tokens = /* @__PURE__ */ new Set();
+    for (const m of modes) tokens.add(m);
+    for (const b of A11Y_BUNDLES) {
+      if (modes.has(b)) {
+        for (const p of BUNDLE_PRIMITIVES[b]) tokens.add(p);
+      }
+    }
+    if (this.fontStep > 0) tokens.add(`font-step-${this.fontStep}`);
+    if (this.textAlign !== "default") tokens.add(`text-align-${this.textAlign}`);
+    if (this.lineHeight !== "normal") tokens.add("has-line-height");
+    if (this.letterSpacing !== "0") tokens.add("has-letter-spacing");
+    if (this.wordSpacing !== "0") tokens.add("has-word-spacing");
+    if (tokens.size) {
+      root.setAttribute("data-a11y", [...tokens].join(" "));
+    } else {
+      root.removeAttribute("data-a11y");
+    }
+    if (this.visualFilter === "none") {
+      root.removeAttribute("data-a11y-filter");
+    } else {
+      root.setAttribute("data-a11y-filter", this.visualFilter);
+    }
+    const scale = FONT_SCALES[this.fontStep] ?? 1;
+    root.style.setProperty("--dga-font-scale", String(scale));
+    root.style.setProperty("--user-font-scale", String(scale));
+    if (this.lineHeight !== "normal") {
+      root.style.setProperty("--user-line-height", this.lineHeight);
+    } else {
+      root.style.removeProperty("--user-line-height");
+    }
+    if (this.letterSpacing !== "0") {
+      root.style.setProperty("--user-letter-spacing", this.letterSpacing);
+    } else {
+      root.style.removeProperty("--user-letter-spacing");
+    }
+    if (this.wordSpacing !== "0") {
+      root.style.setProperty("--user-word-spacing", this.wordSpacing);
+    } else {
+      root.style.removeProperty("--user-word-spacing");
+    }
+    root.style.setProperty("--a11y-mask-band", `${this.maskBand}px`);
+    root.style.setProperty("--a11y-mask-y", `${this.maskY}px`);
+  }
+  persist() {
+    try {
+      const payload = {
+        modes: [...this.modes],
+        visualFilter: this.visualFilter,
+        fontStep: this.fontStep,
+        textAlign: this.textAlign,
+        lineHeight: this.lineHeight,
+        letterSpacing: this.letterSpacing,
+        wordSpacing: this.wordSpacing,
+        maskBand: this.maskBand,
+        maskY: this.maskY
+      };
+      localStorage.setItem(this.storageKey, JSON.stringify(payload));
+    } catch {
+    }
+  }
+  hydrate() {
+    const vh = this.doc.defaultView?.innerHeight ?? 800;
+    this.maskY = Math.round(vh / 2);
+    try {
+      const raw = localStorage.getItem(this.storageKey);
+      if (!raw) {
+        this.applyToDocument();
+        return;
+      }
+      const data = JSON.parse(raw);
+      if (Array.isArray(data.modes)) this.modes = new Set(data.modes);
+      if (data.visualFilter) this.visualFilter = data.visualFilter;
+      if (typeof data.fontStep === "number") {
+        this.fontStep = Math.max(0, Math.min(3, Math.floor(data.fontStep)));
+      }
+      if (data.textAlign) this.textAlign = data.textAlign;
+      if (data.lineHeight) this.lineHeight = data.lineHeight;
+      if (data.letterSpacing) this.letterSpacing = data.letterSpacing;
+      if (data.wordSpacing) this.wordSpacing = data.wordSpacing;
+      if (typeof data.maskBand === "number") {
+        this.maskBand = Math.max(20, Math.min(160, data.maskBand));
+      }
+      if (typeof data.maskY === "number") this.maskY = data.maskY;
+    } catch {
+    }
+    this.applyToDocument();
+    this.ensureDyslexiaFont(this.hasEffectiveMode("dyslexia"));
+  }
+  bindOsPreferences() {
+    const win = this.doc.defaultView;
+    if (!win?.matchMedia) return;
+    this.mqMotion = win.matchMedia("(prefers-reduced-motion: reduce)");
+    this.mqContrast = win.matchMedia("(prefers-contrast: more)");
+    this.onOsChange();
+    this.mqMotion.addEventListener?.("change", this.onOsChange);
+    this.mqContrast.addEventListener?.("change", this.onOsChange);
+  }
+  readDomLocale() {
+    const root = this.doc.documentElement;
+    const data = root.dataset["locale"]?.toLowerCase();
+    if (data === "en" || data === "ar") return data;
+    const lang = root.lang?.toLowerCase() ?? "ar";
+    return lang.startsWith("en") ? "en" : "ar";
+  }
+  bindLocaleObserver() {
+    if (this.localeOverride) return;
+    const root = this.doc.documentElement;
+    if (typeof MutationObserver === "undefined") return;
+    this.localeObserver = new MutationObserver(() => {
+      const next = this.readDomLocale();
+      if (next === this.locale) return;
+      this.locale = next;
+      this.emit();
+    });
+    this.localeObserver.observe(root, {
+      attributes: true,
+      attributeFilter: ["lang", "data-locale"]
+    });
+  }
+  ensureLiveRegion() {
+    if (this.liveRegion?.isConnected) return this.liveRegion;
+    const el = this.doc.createElement("div");
+    el.id = "dga-a11y-live";
+    el.setAttribute("role", "status");
+    el.setAttribute("aria-live", "polite");
+    el.setAttribute("aria-atomic", "true");
+    el.className = "a11y-sr-only";
+    this.doc.body.appendChild(el);
+    this.liveRegion = el;
+    return el;
+  }
+};
+
+// src/skip-link.ts
+function createSkipLink(options = {}) {
+  const a = document.createElement("a");
+  a.href = options.href ?? "#main";
+  a.className = "a11y-skip-link";
+  a.textContent = options.label ?? "Skip to content";
+  a.setAttribute("data-a11y-ui", "");
+  const styleId = "a11y-skip-link-style";
+  if (!document.getElementById(styleId)) {
+    const style = document.createElement("style");
+    style.id = styleId;
+    style.textContent = `
+.a11y-skip-link {
+  position: absolute;
+  inset-inline-start: 1rem;
+  top: 1rem;
+  z-index: 10000;
+  padding: 0.5rem 1rem;
+  border-radius: 0.375rem;
+  background: #fff;
+  color: #1b8354;
+  font: inherit;
+  font-size: 0.875rem;
+  font-weight: 600;
+  text-decoration: none;
+  box-shadow: 0 4px 12px rgb(0 0 0 / 0.12);
+  transform: translateY(-200%);
+  transition: transform 0.15s ease;
+}
+.a11y-skip-link:focus,
+.a11y-skip-link:focus-visible {
+  transform: translateY(0);
+  outline: 2px solid currentColor;
+  outline-offset: 2px;
+}`;
+    document.head.appendChild(style);
+  }
+  const root = options.root ?? document.body;
+  root.prepend(a);
+  return a;
+}
+
+// src/i18n.ts
+var AR = {
+  open: "\u0641\u062A\u062D \u0625\u0639\u062F\u0627\u062F\u0627\u062A \u0625\u0645\u0643\u0627\u0646\u064A\u0629 \u0627\u0644\u0648\u0635\u0648\u0644",
+  close: "\u0625\u063A\u0644\u0627\u0642 \u0644\u0648\u062D\u0629 \u0625\u0645\u0643\u0627\u0646\u064A\u0629 \u0627\u0644\u0648\u0635\u0648\u0644",
+  panelLabel: "\u0625\u0639\u062F\u0627\u062F\u0627\u062A \u0625\u0645\u0643\u0627\u0646\u064A\u0629 \u0627\u0644\u0648\u0635\u0648\u0644",
+  title: "\u0623\u062F\u0648\u0627\u062A \u0625\u0645\u0643\u0627\u0646\u064A\u0629 \u0627\u0644\u0648\u0635\u0648\u0644",
+  sectionActive: "\u0645\u0641\u0639\u0651\u0644 \u0627\u0644\u0622\u0646",
+  sectionProfiles: "\u0623\u0648\u0636\u0627\u0639 \u0633\u0631\u064A\u0639\u0629",
+  sectionAdjust: "\u0636\u0628\u0637",
+  sectionFilters: "\u0645\u0631\u0634\u062D\u0627\u062A \u0628\u0635\u0631\u064A\u0629",
+  profilesHint: "\u064A\u0645\u0643\u0646 \u062A\u0641\u0639\u064A\u0644 \u0623\u0643\u062B\u0631 \u0645\u0646 \u0648\u0636\u0639\u061B \u0642\u062F \u062A\u062A\u062F\u0627\u062E\u0644 \u0628\u0639\u0636 \u0627\u0644\u062A\u0623\u062B\u064A\u0631\u0627\u062A.",
+  chipJump: "\u0627\u0644\u0627\u0646\u062A\u0642\u0627\u0644 \u0625\u0644\u0649",
+  stepDecrease: "\u0625\u0646\u0642\u0627\u0635",
+  stepIncrease: "\u0632\u064A\u0627\u062F\u0629",
+  reset: "\u0625\u0639\u0627\u062F\u0629 \u062A\u0639\u064A\u064A\u0646 \u0627\u0644\u0625\u0639\u062F\u0627\u062F\u0627\u062A",
+  resetConfirm: "\u062A\u0623\u0643\u064A\u062F \u0625\u0639\u0627\u062F\u0629 \u0627\u0644\u062A\u0639\u064A\u064A\u0646",
+  announcedReset: "\u062A\u0645\u062A \u0625\u0639\u0627\u062F\u0629 \u062A\u0639\u064A\u064A\u0646 \u0625\u0639\u062F\u0627\u062F\u0627\u062A \u0625\u0645\u0643\u0627\u0646\u064A\u0629 \u0627\u0644\u0648\u0635\u0648\u0644",
+  fontSize: "\u062D\u062C\u0645 \u0627\u0644\u062E\u0637",
+  dyslexia: "\u062E\u0637 \u0645\u0646\u0627\u0633\u0628 \u0644\u0639\u0633\u0631 \u0627\u0644\u0642\u0631\u0627\u0621\u0629",
+  highlightTitles: "\u062A\u0645\u064A\u064A\u0632 \u0627\u0644\u0639\u0646\u0627\u0648\u064A\u0646",
+  highlightLinks: "\u062A\u0645\u064A\u064A\u0632 \u0627\u0644\u0631\u0648\u0627\u0628\u0637",
+  readingMask: "\u0642\u0646\u0627\u0639 \u0627\u0644\u0642\u0631\u0627\u0621\u0629",
+  reduceMotion: "\u0625\u064A\u0642\u0627\u0641 \u0627\u0644\u062D\u0631\u0643\u0629",
+  textAlign: "\u0645\u062D\u0627\u0630\u0627\u0629 \u0627\u0644\u0646\u0635",
+  lineHeight: "\u0627\u0631\u062A\u0641\u0627\u0639 \u0627\u0644\u0633\u0637\u0631",
+  letterSpacing: "\u062A\u0628\u0627\u0639\u062F \u0627\u0644\u062D\u0631\u0648\u0641",
+  wordSpacing: "\u062A\u0628\u0627\u0639\u062F \u0627\u0644\u0643\u0644\u0645\u0627\u062A",
+  filterBoost: "\u062A\u0639\u0632\u064A\u0632 \u0627\u0644\u062A\u0628\u0627\u064A\u0646",
+  filterMono: "\u0623\u0628\u064A\u0636 \u0648\u0623\u0633\u0648\u062F",
+  filterHigh: "\u062A\u0628\u0627\u064A\u0646 \u0639\u0627\u0644\u064D",
+  filterHighSat: "\u062A\u0634\u0628\u0639 \u0639\u0627\u0644\u064D",
+  filterLowSat: "\u062A\u0634\u0628\u0639 \u0645\u0646\u062E\u0641\u0636",
+  filterDeutan: "\u0645\u062D\u0627\u0643\u0627\u0629 \u0639\u0645\u0649 \u0627\u0644\u0623\u062E\u0636\u0631",
+  maskToolbar: "\u0623\u062F\u0648\u0627\u062A \u0642\u0646\u0627\u0639 \u0627\u0644\u0642\u0631\u0627\u0621\u0629",
+  maskSmaller: "\u062A\u0635\u063A\u064A\u0631 \u0627\u0644\u0634\u0631\u064A\u0637",
+  maskLarger: "\u062A\u0643\u0628\u064A\u0631 \u0627\u0644\u0634\u0631\u064A\u0637",
+  maskDrag: "\u0633\u062D\u0628",
+  maskClose: "\u0625\u063A\u0644\u0627\u0642 \u0627\u0644\u0642\u0646\u0627\u0639",
+  stateOn: "\u0645\u0641\u0639\u0651\u0644",
+  stateOff: "\u0625\u064A\u0642\u0627\u0641",
+  defaultValue: "\u0627\u0641\u062A\u0631\u0627\u0636\u064A",
+  fontLevels: ["\u0627\u0641\u062A\u0631\u0627\u0636\u064A", "\u0643\u0628\u064A\u0631", "\u0623\u0643\u0628\u0631", "\u0627\u0644\u0623\u0643\u0628\u0631"],
+  alignLevels: ["\u0627\u0641\u062A\u0631\u0627\u0636\u064A", "\u0646\u0647\u0627\u064A\u0629", "\u0628\u062F\u0627\u064A\u0629", "\u0636\u0628\u0637"],
+  lineLevels: ["\u0627\u0641\u062A\u0631\u0627\u0636\u064A", "\u0661\u066B\u0666", "\u0661\u066B\u0668", "\u0662\u066B\u0660"],
+  letterLevels: ["\u0627\u0641\u062A\u0631\u0627\u0636\u064A", "\u0636\u064A\u0642", "\u0645\u062A\u0648\u0633\u0637", "\u0648\u0627\u0633\u0639"],
+  wordLevels: ["\u0627\u0641\u062A\u0631\u0627\u0636\u064A", "\u0636\u064A\u0642", "\u0645\u062A\u0648\u0633\u0637", "\u0648\u0627\u0633\u0639"],
+  bundles: {
+    "epilepsy-safe": {
+      label: "\u0648\u0636\u0639 \u0622\u0645\u0646 \u0644\u0644\u0635\u0631\u0639",
+      desc: "\u064A\u0648\u0642\u0641 \u0627\u0644\u062D\u0631\u0643\u0629 \u0648\u064A\u062E\u0641\u0641 \u0643\u062B\u0627\u0641\u0629 \u0627\u0644\u0623\u0644\u0648\u0627\u0646"
+    },
+    "visually-impaired": {
+      label: "\u0648\u0636\u0639 \u0636\u0639\u0641 \u0627\u0644\u0628\u0635\u0631",
+      desc: "\u064A\u0643\u0628\u0651\u0631 \u0627\u0644\u0646\u0635 \u0648\u064A\u0639\u0632\u0632 \u0627\u0644\u062A\u0628\u0627\u064A\u0646 \u0644\u0644\u0642\u0631\u0627\u0621\u0629 \u0623\u0648\u0636\u062D"
+    },
+    "cognitive-disability": {
+      label: "\u0648\u0636\u0639 \u0627\u0644\u0625\u0639\u0627\u0642\u0629 \u0627\u0644\u0625\u062F\u0631\u0627\u0643\u064A\u0629",
+      desc: "\u064A\u0645\u064A\u0651\u0632 \u0627\u0644\u0639\u0646\u0627\u0648\u064A\u0646 \u0648\u064A\u0648\u0642\u0641 \u0627\u0644\u062D\u0631\u0643\u0629 \u0644\u062A\u0642\u0644\u064A\u0644 \u0627\u0644\u062A\u0634\u062A\u064A\u062A"
+    },
+    "motor-impaired": {
+      label: "\u0648\u0636\u0639 \u0636\u0639\u0641 \u0627\u0644\u062D\u0631\u0643\u0629",
+      desc: "\u064A\u0643\u0628\u0651\u0631 \u0627\u0644\u0623\u0632\u0631\u0627\u0631 \u0648\u0627\u0644\u062D\u0642\u0648\u0644\u060C \u064A\u0648\u0633\u0651\u0639 \u0645\u0646\u0637\u0642\u0629 \u0627\u0644\u0646\u0642\u0631\u060C \u0648\u064A\u064F\u0638\u0647\u0631 \u0625\u0637\u0627\u0631 \u062A\u0631\u0643\u064A\u0632 \u0623\u0648\u0636\u062D"
+    },
+    colorblind: {
+      label: "\u0648\u0636\u0639 \u0639\u0645\u0649 \u0627\u0644\u0623\u0644\u0648\u0627\u0646",
+      desc: "\u064A\u0636\u0628\u0637 \u0627\u0644\u0623\u0644\u0648\u0627\u0646 \u0644\u0644\u062A\u0645\u064A\u064A\u0632 \u0628\u064A\u0646 \u0627\u0644\u0623\u062D\u0645\u0631 \u0648\u0627\u0644\u0623\u062E\u0636\u0631"
+    },
+    "dyslexia-friendly": {
+      label: "\u0648\u0636\u0639 \u0645\u0646\u0627\u0633\u0628 \u0644\u0639\u0633\u0631 \u0627\u0644\u0642\u0631\u0627\u0621\u0629",
+      desc: "\u064A\u0628\u062F\u0651\u0644 \u0625\u0644\u0649 \u062E\u0637 \u0623\u0648\u0636\u062D \u0644\u0644\u0642\u0631\u0627\u0621\u0629 \u0648\u064A\u0648\u0633\u0651\u0639 \u062A\u0628\u0627\u0639\u062F \u0627\u0644\u0623\u0633\u0637\u0631 \u0648\u0627\u0644\u062D\u0631\u0648\u0641 \u0648\u0627\u0644\u0643\u0644\u0645\u0627\u062A"
+    },
+    "adhd-friendly": {
+      label: "\u0648\u0636\u0639 \u0645\u0646\u0627\u0633\u0628 \u0644\u0627\u0636\u0637\u0631\u0627\u0628 \u0641\u0631\u0637 \u0627\u0644\u062D\u0631\u0643\u0629",
+      desc: "\u064A\u0648\u0642\u0641 \u0627\u0644\u062D\u0631\u0643\u0629\u060C \u064A\u0645\u064A\u0651\u0632 \u0627\u0644\u0639\u0646\u0627\u0648\u064A\u0646\u060C \u0648\u064A\u0641\u0639\u0651\u0644 \u0642\u0646\u0627\u0639 \u0627\u0644\u0642\u0631\u0627\u0621\u0629"
+    }
+  }
+};
+var EN = {
+  open: "Open accessibility settings",
+  close: "Close accessibility panel",
+  panelLabel: "Accessibility settings",
+  title: "Accessibility Tools",
+  sectionActive: "Active now",
+  sectionProfiles: "Quick profiles",
+  sectionAdjust: "Adjust",
+  sectionFilters: "Visual filters",
+  profilesHint: "You can enable more than one profile; some effects may overlap.",
+  chipJump: "Jump to",
+  stepDecrease: "Decrease",
+  stepIncrease: "Increase",
+  reset: "Reset Settings",
+  resetConfirm: "Confirm reset",
+  announcedReset: "Accessibility settings reset",
+  fontSize: "Font size",
+  dyslexia: "Dyslexia friendly",
+  highlightTitles: "Highlight titles",
+  highlightLinks: "Highlight links",
+  readingMask: "Reading mask",
+  reduceMotion: "Pause motion",
+  textAlign: "Text alignment",
+  lineHeight: "Line height",
+  letterSpacing: "Letter spacing",
+  wordSpacing: "Word spacing",
+  filterBoost: "Boost contrast",
+  filterMono: "Monochrome",
+  filterHigh: "High contrast",
+  filterHighSat: "High saturation",
+  filterLowSat: "Low saturation",
+  filterDeutan: "Deuteranopia",
+  maskToolbar: "Reading mask toolbar",
+  maskSmaller: "Decrease band height",
+  maskLarger: "Increase band height",
+  maskDrag: "Drag",
+  maskClose: "Close mask",
+  stateOn: "On",
+  stateOff: "Off",
+  defaultValue: "Default",
+  fontLevels: ["Default", "Large", "Larger", "Largest"],
+  alignLevels: ["Default", "End", "Start", "Justify"],
+  lineLevels: ["Default", "1.6", "1.8", "2.0"],
+  letterLevels: ["Default", "Tight", "Medium", "Wide"],
+  wordLevels: ["Default", "Tight", "Medium", "Wide"],
+  bundles: {
+    "epilepsy-safe": {
+      label: "Epilepsy safe",
+      desc: "Stops motion and dampens color intensity"
+    },
+    "visually-impaired": {
+      label: "Visually impaired",
+      desc: "Enlarges text and boosts contrast for clearer reading"
+    },
+    "cognitive-disability": {
+      label: "Cognitive disability",
+      desc: "Highlights titles and stops motion to reduce distraction"
+    },
+    "motor-impaired": {
+      label: "Motor impaired",
+      desc: "Makes buttons and fields larger, expands click areas, and shows a thicker focus ring"
+    },
+    colorblind: {
+      label: "Colorblind",
+      desc: "Adjusts colors to distinguish red and green clearly"
+    },
+    "dyslexia-friendly": {
+      label: "Dyslexia friendly",
+      desc: "Switches to a clearer reading font and widens line, letter, and word spacing"
+    },
+    "adhd-friendly": {
+      label: "ADHD friendly",
+      desc: "Stops motion, highlights titles, and enables the reading mask"
+    }
+  }
+};
+function getCopy(locale) {
+  return locale === "ar" ? AR : EN;
+}
+
+// src/icons.ts
+var ICONS = {
+  access: '<path d="M12 2a3 3 0 1 1 0 6 3 3 0 0 1 0-6Zm-1 7h2l1.5 4H16l-1 2h-1.2L12.5 11h-1L10.2 15H9l-1-2h1.5L11 9Zm-5.5 9.5L8 14l1.2 1.6L12 12l2.8 3.6L16 14l2.5 4.5H5.5Z"/>',
+  close: '<path d="M6.7 6.7a1 1 0 0 1 1.4 0L12 10.6l3.9-3.9a1 1 0 1 1 1.4 1.4L13.4 12l3.9 3.9a1 1 0 0 1-1.4 1.4L12 13.4l-3.9 3.9a1 1 0 0 1-1.4-1.4L10.6 12 6.7 8.1a1 1 0 0 1 0-1.4Z"/>',
+  flash: '<path d="M13 2 4 14h7l-1 8 10-14h-7l1-6Z"/>',
+  eye: '<path d="M12 5c-5 0-9 4.5-10 7 1 2.5 5 7 10 7s9-4.5 10-7c-1-2.5-5-7-10-7Zm0 11a4 4 0 1 1 0-8 4 4 0 0 1 0 8Z"/>',
+  brain: '<path d="M9 3a3 3 0 0 0-3 3v1a3 3 0 0 0-1 5.8V15a3 3 0 0 0 3 3h1v1a2 2 0 0 0 4 0v-1h1a3 3 0 0 0 3-3v-2.2A3 3 0 0 0 18 7V6a3 3 0 0 0-3-3h-1a3 3 0 0 0-5 0H9Z"/>',
+  touch: '<path d="M9 11V6a1.5 1.5 0 0 1 3 0v5h1V8a1.5 1.5 0 0 1 3 0v5h1V10a1.5 1.5 0 0 1 3 0v6a5 5 0 0 1-5 5h-2a7 7 0 0 1-7-7v-3a1.5 1.5 0 0 1 3 0v2"/>',
+  colors: '<path d="M12 3a9 9 0 0 0 0 18h1a3 3 0 0 0 0-6h-1a1 1 0 1 1 0-2 3 3 0 1 0 0-6 5 5 0 0 1 4.9 4"/>',
+  glasses: '<path d="M2 12h3a4 4 0 0 0 8 0h2a4 4 0 0 0 8 0h-1M10 12a2 2 0 0 1 4 0"/>',
+  mask: '<path d="M3 10c0-2 2-4 4-4h10c2 0 4 2 4 4v2c0 4-4 7-9 7s-9-3-9-7v-2Zm4 1h2m6 0h2"/>',
+  heading: '<path d="M6 5v14M18 5v14M6 12h12"/>',
+  linkAlt: '<path d="M10 13a5 5 0 0 0 7.5.5l2-2a5 5 0 0 0-7-7l-1 1M14 11a5 5 0 0 0-7.5-.5l-2 2a5 5 0 0 0 7 7l1-1"/>',
+  pause: '<path d="M8 5h3v14H8V5Zm5 0h3v14h-3V5Z"/>',
+  textFont: '<path d="M5 19h3l1-3h6l1 3h3L13 5h-2L5 19Zm5.5-6L12 8l1.5 5h-3Z"/>',
+  textAlign: '<path d="M4 6h16M4 10h10M4 14h16M4 18h10"/>',
+  textUnderline: '<path d="M6 5v6a6 6 0 0 0 12 0V5M5 19h14"/>',
+  letterSpacing: '<path d="M4 18V6M20 18V6M8 14l2-8h1l2 8M9 11h3M14.5 14 16 6h1l1.5 8"/>',
+  maximize: '<path d="M4 9V4h5M15 4h5v5M20 15v5h-5M9 20H4v-5"/>',
+  minus: '<path d="M5 12h14"/>',
+  plus: '<path d="M12 5v14M5 12h14"/>',
+  droplet: '<path d="M12 3s6 7 6 11a6 6 0 1 1-12 0c0-4 6-11 6-11Z"/>',
+  sun: '<path d="M12 4V2m0 20v-2m8-8h2M2 12h2m13.7 5.7 1.4 1.4M4.9 4.9l1.4 1.4m0 11.4-1.4 1.4M19.1 4.9l-1.4 1.4M12 8a4 4 0 1 1 0 8 4 4 0 0 1 0-8Z"/>',
+  colorPicker: '<path d="M12 3a7 7 0 0 1 0 14h-1l-4 4v-5a7 7 0 0 1 5-13Z"/>'
+};
+function iconSvg(name, size = 18) {
+  const path = ICONS[name] ?? ICONS.access;
+  return `<svg class="a11y-icon" width="${size}" height="${size}" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" focusable="false">${path}</svg>`;
+}
+
+// src/widget.ts
+var BUNDLE_ICONS = {
+  "epilepsy-safe": "flash",
+  "visually-impaired": "eye",
+  "cognitive-disability": "brain",
+  "motor-impaired": "touch",
+  colorblind: "colors",
+  "dyslexia-friendly": "glasses",
+  "adhd-friendly": "mask"
+};
+var TOGGLE_ROWS = [
+  { id: "dyslexia", mode: "dyslexia", icon: "glasses", labelKey: "dyslexia" },
+  { id: "highlight-titles", mode: "highlight-titles", icon: "heading", labelKey: "highlightTitles" },
+  { id: "highlight-links", mode: "highlight-links", icon: "linkAlt", labelKey: "highlightLinks" },
+  { id: "reading-mask", mode: "reading-mask", icon: "mask", labelKey: "readingMask" },
+  { id: "reduce-motion", mode: "reduce-motion", icon: "pause", labelKey: "reduceMotion" }
+];
+var FILTERS = [
+  { value: "boost-contrast", labelKey: "filterBoost", icon: "maximize" },
+  { value: "monochrome", labelKey: "filterMono", icon: "droplet" },
+  { value: "high-contrast", labelKey: "filterHigh", icon: "sun" },
+  { value: "high-saturation", labelKey: "filterHighSat", icon: "colors" },
+  { value: "low-saturation", labelKey: "filterLowSat", icon: "colorPicker" },
+  { value: "deuteranopia", labelKey: "filterDeutan", icon: "eye" }
+];
+var PANEL_ID = "a11y-accessibility-panel";
+var A11yWidget = class {
+  constructor(ctrl, options = {}) {
+    this.rootEl = null;
+    this.unsub = null;
+    this.resetArmed = false;
+    this.resetTimer = null;
+    this.draggingMask = false;
+    this.onKeyDown = (e) => this.handleKey(e);
+    this.onPointerMove = (e) => {
+      if (!this.draggingMask) return;
+      this.ctrl.setMaskY(e.clientY);
+    };
+    this.onPointerUp = () => {
+      this.draggingMask = false;
+    };
+    this.ctrl = ctrl;
+    this.position = options.position ?? "end";
+    this.stack = Math.max(0, options.stack ?? 0);
+    this.mountRoot = options.root ?? document.body;
+  }
+  mount() {
+    if (this.rootEl) return;
+    this.rootEl = document.createElement("div");
+    this.rootEl.className = "a11y-root";
+    this.rootEl.setAttribute("data-a11y-ui", "");
+    this.mountRoot.appendChild(this.rootEl);
+    this.unsub = this.ctrl.subscribe(() => this.render());
+    document.addEventListener("keydown", this.onKeyDown);
+    document.addEventListener("pointermove", this.onPointerMove);
+    document.addEventListener("pointerup", this.onPointerUp);
+    this.render();
+  }
+  destroy() {
+    this.unsub?.();
+    this.unsub = null;
+    document.removeEventListener("keydown", this.onKeyDown);
+    document.removeEventListener("pointermove", this.onPointerMove);
+    document.removeEventListener("pointerup", this.onPointerUp);
+    if (this.resetTimer) clearTimeout(this.resetTimer);
+    this.rootEl?.remove();
+    this.rootEl = null;
+  }
+  copy() {
+    return getCopy(this.ctrl.locale);
+  }
+  fabBottom() {
+    return `calc(var(--a11y-fab-edge, 2rem) + ${this.stack} * var(--a11y-fab-stack-step, 4.25rem))`;
+  }
+  activeChips() {
+    const c = this.copy();
+    const chips = [];
+    const covered = /* @__PURE__ */ new Set();
+    for (const b of A11Y_BUNDLES) {
+      if (!this.ctrl.hasMode(b)) continue;
+      chips.push({ id: b, label: c.bundles[b].label, controlId: `profile-${b}` });
+      for (const p of BUNDLE_PRIMITIVES[b]) covered.add(p);
+    }
+    for (const row of TOGGLE_ROWS) {
+      if (!this.ctrl.hasEffectiveMode(row.mode)) continue;
+      if (covered.has(row.mode) && !this.ctrl.hasMode(row.mode)) continue;
+      if (covered.has(row.mode) && A11Y_BUNDLES.some((b) => this.ctrl.hasMode(b) && BUNDLE_PRIMITIVES[b].includes(row.mode))) {
+        const ownedByActiveBundle = A11Y_BUNDLES.some(
+          (b) => this.ctrl.hasMode(b) && BUNDLE_PRIMITIVES[b].includes(row.mode)
+        );
+        if (ownedByActiveBundle && !this.ctrl.hasMode(row.mode)) continue;
+        if (ownedByActiveBundle) continue;
+      }
+      if (A11Y_BUNDLES.some((b) => this.ctrl.hasMode(b) && BUNDLE_PRIMITIVES[b].includes(row.mode))) {
+        continue;
+      }
+      chips.push({
+        id: row.id,
+        label: String(c[row.labelKey]),
+        controlId: row.id
+      });
+    }
+    if (this.ctrl.fontStep > 0) {
+      chips.push({ id: "font", label: c.fontSize, controlId: "font" });
+    }
+    if (this.ctrl.textAlign !== "default") {
+      chips.push({ id: "align", label: c.textAlign, controlId: "align" });
+    }
+    if (this.ctrl.lineHeight !== "normal") {
+      chips.push({ id: "line", label: c.lineHeight, controlId: "line" });
+    }
+    if (this.ctrl.letterSpacing !== "0") {
+      chips.push({ id: "letter", label: c.letterSpacing, controlId: "letter" });
+    }
+    if (this.ctrl.wordSpacing !== "0") {
+      chips.push({ id: "word", label: c.wordSpacing, controlId: "word" });
+    }
+    if (this.ctrl.visualFilter !== "none") {
+      const f = FILTERS.find((x) => x.value === this.ctrl.visualFilter);
+      chips.push({
+        id: "filters",
+        label: f ? String(c[f.labelKey]) : c.sectionFilters,
+        controlId: "filters"
+      });
+    }
+    return chips;
+  }
+  render() {
+    if (!this.rootEl) return;
+    const c = this.copy();
+    const chips = this.activeChips();
+    const badge = chips.length;
+    const open = this.ctrl.isOpen;
+    const readingMask = this.ctrl.hasEffectiveMode("reading-mask");
+    this.rootEl.innerHTML = `
+      <svg class="a11y-deuteranopia-svg" aria-hidden="true" focusable="false">
+        <filter id="a11y-deuteranopia">
+          <feColorMatrix type="matrix" values="0.625 0.375 0 0 0
+                  0.7   0.3   0 0 0
+                  0     0.3   0.7 0 0
+                  0     0     0 1 0"/>
+        </filter>
+      </svg>
+
+      <button
+        type="button"
+        class="a11y-fab"
+        data-edge="${this.position}"
+        data-stack="${this.stack}"
+        style="bottom: ${this.fabBottom()}"
+        aria-expanded="${open}"
+        aria-controls="${PANEL_ID}"
+        aria-label="${escapeAttr(c.open)}"
+        data-a11y-action="toggle"
+      >
+        <span class="a11y-fab__icon">${iconSvg("access", 22)}</span>
+        ${badge > 0 ? `<span class="a11y-fab__badge" aria-hidden="true">${badge > 9 ? "9+" : badge}</span>` : ""}
+      </button>
+
+      ${open ? this.renderPanel(c, chips) : ""}
+      ${readingMask ? this.renderMask(c) : ""}
+    `;
+    this.bindEvents();
+    if (open) {
+      const closeBtn = this.rootEl.querySelector('[data-a11y-action="close"]');
+      queueMicrotask(() => closeBtn?.focus());
+    }
+  }
+  renderPanel(c, chips) {
+    const profileCount = this.ctrl.activeModeCount("modes");
+    return `
+      <div class="a11y-layer" role="presentation">
+        <div class="a11y-backdrop" data-a11y-action="close" aria-hidden="true"></div>
+        <aside
+          id="${PANEL_ID}"
+          class="a11y-panel a11y-panel--${this.position}"
+          role="dialog"
+          aria-modal="true"
+          aria-label="${escapeAttr(c.panelLabel)}"
+        >
+          <div class="a11y-panel__header">
+            <h2 class="a11y-panel__title">${escapeHtml(c.title)}</h2>
+            <button type="button" class="a11y-btn a11y-btn--subtle" data-a11y-action="close" aria-label="${escapeAttr(c.close)}">
+              ${iconSvg("close", 18)}
+            </button>
+          </div>
+          <div class="a11y-panel__body">
+            ${chips.length ? `<section aria-labelledby="a11y-active-heading">
+                    <h3 id="a11y-active-heading" class="a11y-section-title">${escapeHtml(c.sectionActive)}</h3>
+                    <div class="a11y-chips">
+                      ${chips.map(
+      (chip) => `
+                        <button type="button" class="a11y-chip" data-a11y-focus="${escapeAttr(chip.controlId)}" aria-label="${escapeAttr(c.chipJump + ": " + chip.label)}">
+                          <span>${escapeHtml(chip.label)}</span>
+                        </button>`
+    ).join("")}
+                    </div>
+                  </section>` : ""}
+
+            <section aria-labelledby="a11y-profiles-heading">
+              <h3 id="a11y-profiles-heading" class="a11y-section-title">${escapeHtml(c.sectionProfiles)}</h3>
+              ${profileCount >= 2 ? `<p class="a11y-hint">${escapeHtml(c.profilesHint)}</p>` : ""}
+              <div class="a11y-list">
+                ${A11Y_BUNDLES.map((id) => {
+      const on = this.ctrl.hasMode(id);
+      const meta = c.bundles[id];
+      return `
+                    <div class="a11y-row ${on ? "is-active" : ""}" data-a11y-control="profile-${id}" title="${escapeAttr(meta.desc)}">
+                      <div class="a11y-row__main">
+                        <span class="a11y-row__icon">${iconSvg(BUNDLE_ICONS[id], 18)}</span>
+                        <div>
+                          <div class="a11y-row__label">${escapeHtml(meta.label)}</div>
+                          <span class="a11y-sr-only">${escapeHtml(meta.desc)}</span>
+                        </div>
+                      </div>
+                      <button
+                        type="button"
+                        class="a11y-switch"
+                        role="switch"
+                        aria-checked="${on}"
+                        aria-label="${escapeAttr(meta.label)}"
+                        data-a11y-bundle="${id}"
+                      ></button>
+                    </div>`;
+    }).join("")}
+              </div>
+            </section>
+
+            <section aria-labelledby="a11y-adjust-heading">
+              <h3 id="a11y-adjust-heading" class="a11y-section-title">${escapeHtml(c.sectionAdjust)}</h3>
+              <div class="a11y-divide">
+                ${TOGGLE_ROWS.map((row) => {
+      const on = this.ctrl.hasEffectiveMode(row.mode);
+      const label = String(c[row.labelKey]);
+      return `
+                    <div class="a11y-row" data-a11y-control="${row.id}">
+                      <div class="a11y-row__main">
+                        ${iconSvg(row.icon, 18)}
+                        <span class="a11y-row__label">${escapeHtml(label)}</span>
+                      </div>
+                      <button
+                        type="button"
+                        class="a11y-switch"
+                        role="switch"
+                        aria-checked="${on}"
+                        aria-label="${escapeAttr(label)}"
+                        data-a11y-toggle="${row.mode}"
+                      ></button>
+                    </div>`;
+    }).join("")}
+
+                ${this.renderSteppers(c)}
+
+                <div class="a11y-filters" data-a11y-control="filters">
+                  <div class="a11y-filters__head">
+                    ${iconSvg("colors", 18)}
+                    <span>${escapeHtml(c.sectionFilters)}</span>
+                  </div>
+                  <div class="a11y-filter-chips" role="group" aria-label="${escapeAttr(c.sectionFilters)}">
+                    ${FILTERS.map((f) => {
+      const active = this.ctrl.visualFilter === f.value;
+      const label = String(c[f.labelKey]);
+      return `
+                        <button
+                          type="button"
+                          class="a11y-filter-chip ${active ? "is-active" : ""}"
+                          aria-pressed="${active}"
+                          data-a11y-filter="${f.value}"
+                        >
+                          ${iconSvg(f.icon, 14)}
+                          ${escapeHtml(label)}
+                        </button>`;
+    }).join("")}
+                  </div>
+                </div>
+              </div>
+            </section>
+          </div>
+          <div class="a11y-panel__footer">
+            <button type="button" class="a11y-btn a11y-btn--outline" data-a11y-action="reset">
+              ${escapeHtml(this.resetArmed ? c.resetConfirm : c.reset)}
+            </button>
+          </div>
+        </aside>
+      </div>`;
+  }
+  renderSteppers(c) {
+    const hideLetter = this.ctrl.locale === "ar";
+    const fontLabel = c.fontLevels[this.ctrl.fontStep] ?? c.defaultValue;
+    const alignLevel = this.ctrl.textAlign === "default" ? 0 : this.ctrl.textAlign === "end" ? 1 : this.ctrl.textAlign === "start" ? 2 : 3;
+    const lineLevel = this.ctrl.lineHeight === "normal" ? 0 : this.ctrl.lineHeight === "1.6" ? 1 : this.ctrl.lineHeight === "1.8" ? 2 : 3;
+    const letterLevel = this.ctrl.letterSpacing === "0" ? 0 : this.ctrl.letterSpacing === "0.04em" ? 1 : this.ctrl.letterSpacing === "0.08em" ? 2 : 3;
+    const wordLevel = this.ctrl.wordSpacing === "0" ? 0 : this.ctrl.wordSpacing === "0.16em" ? 1 : this.ctrl.wordSpacing === "0.32em" ? 2 : 3;
+    const steppers = [
+      { id: "font", icon: "textFont", label: c.fontSize, value: fontLabel, active: this.ctrl.fontStep > 0 },
+      {
+        id: "align",
+        icon: "textAlign",
+        label: c.textAlign,
+        value: c.alignLevels[alignLevel],
+        active: this.ctrl.textAlign !== "default"
+      },
+      {
+        id: "line",
+        icon: "textUnderline",
+        label: c.lineHeight,
+        value: c.lineLevels[lineLevel],
+        active: this.ctrl.lineHeight !== "normal"
+      }
+    ];
+    if (!hideLetter) {
+      steppers.push({
+        id: "letter",
+        icon: "letterSpacing",
+        label: c.letterSpacing,
+        value: c.letterLevels[letterLevel],
+        active: this.ctrl.letterSpacing !== "0"
+      });
+    }
+    steppers.push({
+      id: "word",
+      icon: "maximize",
+      label: c.wordSpacing,
+      value: c.wordLevels[wordLevel],
+      active: this.ctrl.wordSpacing !== "0"
+    });
+    return steppers.map(
+      (row) => `
+      <div class="a11y-row" data-a11y-control="${row.id}">
+        <div class="a11y-row__main">
+          ${iconSvg(row.icon, 18)}
+          <span class="a11y-row__label">${escapeHtml(row.label)}</span>
+        </div>
+        <div class="a11y-stepper" role="group" aria-label="${escapeAttr(row.label)}">
+          <button type="button" class="a11y-btn a11y-btn--subtle" data-a11y-step="${row.id}" data-delta="-1" aria-label="${escapeAttr(c.stepDecrease + ": " + row.label)}">
+            ${iconSvg("minus", 14)}
+          </button>
+          <span class="a11y-stepper__value" aria-live="polite">${escapeHtml(row.value)}</span>
+          <button type="button" class="a11y-btn a11y-btn--subtle" data-a11y-step="${row.id}" data-delta="1" aria-label="${escapeAttr(c.stepIncrease + ": " + row.label)}">
+            ${iconSvg("plus", 14)}
+          </button>
+        </div>
+      </div>`
+    ).join("");
+  }
+  renderMask(c) {
+    return `
+      <div class="a11y-mask-overlay" aria-hidden="true">
+        <div class="a11y-mask-shade" style="top:0;height:calc(var(--a11y-mask-y) - var(--a11y-mask-band))"></div>
+        <div class="a11y-mask-shade" style="top:calc(var(--a11y-mask-y) + var(--a11y-mask-band));bottom:0"></div>
+      </div>
+      <div
+        class="a11y-mask-toolbar"
+        role="toolbar"
+        aria-label="${escapeAttr(c.maskToolbar)}"
+        style="top:calc(var(--a11y-mask-y) + var(--a11y-mask-band) + 8px)"
+      >
+        <button type="button" class="a11y-btn a11y-btn--subtle" data-a11y-action="mask-smaller" aria-label="${escapeAttr(c.maskSmaller)}">
+          ${iconSvg("minus", 14)}
+        </button>
+        <button type="button" class="a11y-mask-drag" data-a11y-action="mask-drag">${escapeHtml(c.maskDrag)}</button>
+        <button type="button" class="a11y-btn a11y-btn--subtle" data-a11y-action="mask-larger" aria-label="${escapeAttr(c.maskLarger)}">
+          ${iconSvg("plus", 14)}
+        </button>
+        <button type="button" class="a11y-btn a11y-btn--subtle" data-a11y-action="mask-close" aria-label="${escapeAttr(c.maskClose)}">
+          ${iconSvg("close", 14)}
+        </button>
+      </div>`;
+  }
+  bindEvents() {
+    if (!this.rootEl) return;
+    this.rootEl.querySelectorAll("[data-a11y-action]").forEach((el) => {
+      el.addEventListener("click", (e) => {
+        const action = el.getAttribute("data-a11y-action");
+        if (action === "toggle") {
+          this.ctrl.toggle(el);
+        } else if (action === "close") {
+          this.ctrl.close();
+        } else if (action === "reset") {
+          this.onReset();
+        } else if (action === "mask-smaller") {
+          this.ctrl.adjustMaskBand(-20);
+        } else if (action === "mask-larger") {
+          this.ctrl.adjustMaskBand(20);
+        } else if (action === "mask-close") {
+          this.ctrl.setMode("reading-mask", false);
+        } else if (action === "mask-drag") {
+          e.preventDefault();
+          this.draggingMask = true;
+        }
+      });
+    });
+    this.rootEl.querySelectorAll("[data-a11y-bundle]").forEach((el) => {
+      el.addEventListener("click", () => {
+        const id = el.getAttribute("data-a11y-bundle");
+        this.ctrl.setMode(id, !this.ctrl.hasMode(id));
+      });
+    });
+    this.rootEl.querySelectorAll("[data-a11y-toggle]").forEach((el) => {
+      el.addEventListener("click", () => {
+        const mode = el.getAttribute("data-a11y-toggle");
+        this.ctrl.setMode(mode, !this.ctrl.hasEffectiveMode(mode));
+      });
+    });
+    this.rootEl.querySelectorAll("[data-a11y-filter]").forEach((el) => {
+      el.addEventListener("click", () => {
+        const filter = el.getAttribute("data-a11y-filter");
+        this.ctrl.setVisualFilter(filter);
+      });
+    });
+    this.rootEl.querySelectorAll("[data-a11y-step]").forEach((el) => {
+      el.addEventListener("click", () => {
+        const id = el.getAttribute("data-a11y-step");
+        const delta = Number(el.getAttribute("data-delta") || "1");
+        if (id === "font") this.ctrl.stepFontStep(delta);
+        else if (id === "align") this.ctrl.stepTextAlign(delta);
+        else if (id === "line") this.ctrl.stepLineHeight(delta);
+        else if (id === "letter") this.ctrl.stepLetterSpacing(delta);
+        else if (id === "word") this.ctrl.stepWordSpacing(delta);
+      });
+    });
+    this.rootEl.querySelectorAll("[data-a11y-focus]").forEach((el) => {
+      el.addEventListener("click", () => {
+        const id = el.getAttribute("data-a11y-focus");
+        const target = this.rootEl?.querySelector(`[data-a11y-control="${id}"]`);
+        target?.scrollIntoView({ block: "nearest", behavior: "smooth" });
+        const focusable = target?.querySelector("button, [tabindex]");
+        focusable?.focus();
+      });
+    });
+  }
+  onReset() {
+    if (!this.resetArmed) {
+      this.resetArmed = true;
+      this.render();
+      if (this.resetTimer) clearTimeout(this.resetTimer);
+      this.resetTimer = setTimeout(() => {
+        this.resetArmed = false;
+        this.render();
+      }, 5e3);
+      return;
+    }
+    this.resetArmed = false;
+    if (this.resetTimer) clearTimeout(this.resetTimer);
+    this.ctrl.reset();
+    this.ctrl.announce(this.copy().announcedReset);
+  }
+  handleKey(e) {
+    if (e.key === "Escape") {
+      if (this.ctrl.isOpen) {
+        e.preventDefault();
+        this.ctrl.close();
+        return;
+      }
+      if (this.ctrl.hasEffectiveMode("reading-mask")) {
+        e.preventDefault();
+        this.ctrl.setMode("reading-mask", false);
+      }
+      return;
+    }
+    if (!this.ctrl.hasEffectiveMode("reading-mask") || this.ctrl.isOpen) return;
+    const vh = window.innerHeight;
+    if (e.key === "ArrowUp") {
+      e.preventDefault();
+      this.ctrl.setMaskY(this.ctrl.maskY - 20);
+    } else if (e.key === "ArrowDown") {
+      e.preventDefault();
+      this.ctrl.setMaskY(this.ctrl.maskY + 20);
+    } else if (e.key === "PageUp") {
+      e.preventDefault();
+      this.ctrl.setMaskY(this.ctrl.maskY - 100);
+    } else if (e.key === "PageDown") {
+      e.preventDefault();
+      this.ctrl.setMaskY(this.ctrl.maskY + 100);
+    } else if (e.key === "Home") {
+      e.preventDefault();
+      this.ctrl.setMaskY(0);
+    } else if (e.key === "End") {
+      e.preventDefault();
+      this.ctrl.setMaskY(vh);
+    }
+  }
+};
+function escapeHtml(s) {
+  return s.replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;").replaceAll('"', "&quot;");
+}
+function escapeAttr(s) {
+  return escapeHtml(s).replaceAll("'", "&#39;");
+}
+
+// src/index.ts
+var instance = null;
+function ensureStyles() {
+  if (typeof document === "undefined") return;
+  if (document.querySelector("link[data-a11y-styles], style[data-a11y-styles]")) return;
+}
+function mount(options = {}) {
+  if (instance) return instance;
+  ensureStyles();
+  const controller = new A11yController({
+    storageKey: options.storageKey,
+    locale: options.locale
+  });
+  let widget = null;
+  if (!options.headless) {
+    widget = new A11yWidget(controller, {
+      position: options.position,
+      stack: options.stack,
+      root: options.root
+    });
+    widget.mount();
+  }
+  instance = {
+    controller,
+    widget,
+    open: () => controller.open(),
+    close: () => controller.close(),
+    toggle: () => controller.toggle(),
+    toggleMode: (mode) => controller.toggleMode(mode),
+    setMode: (mode, enabled) => controller.setMode(mode, enabled),
+    setVisualFilter: (filter) => controller.setVisualFilter(filter),
+    reset: () => controller.reset(),
+    announce: (msg) => controller.announce(msg),
+    toggleLocale: () => controller.toggleLocale(),
+    destroy: () => {
+      widget?.destroy();
+      controller.destroy();
+      instance = null;
+    }
+  };
+  return instance;
+}
+function getInstance() {
+  return instance;
+}
+function destroy() {
+  instance?.destroy();
+}
+var Accessibility = {
+  mount,
+  destroy,
+  getInstance,
+  createSkipLink
+};
+
+export { A11Y_BUNDLES, A11yController, A11yWidget, Accessibility, BUNDLE_PRIMITIVES, createSkipLink, destroy, getCopy, getInstance, mount };