@cognitvs/a11y-widget 0.0.0-stage → 1.0.0

package/dist/a11y-widget.js

@@ -0,0 +1,1325 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+const widgetCss = ':host{--a11y-primary: #0077d4;--a11y-primary-hover: #0066b8;--a11y-primary-light: #eff6ff;--a11y-bg: #ffffff;--a11y-text: #0f172a;--a11y-text-muted: #64748b;--a11y-border: #e2e8f0;--a11y-card-bg: #f8fafc;--a11y-card-hover: #f1f5f9;--a11y-shadow: 0 20px 40px -15px rgba(0, 0, 0, .25);--a11y-radius: 20px;font-family:Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica,Arial,sans-serif;font-size:14px;line-height:1.5;box-sizing:border-box}:host([theme="dark"]){--a11y-bg: #0f172a;--a11y-text: #f8fafc;--a11y-text-muted: #94a3b8;--a11y-border: #1e293b;--a11y-card-bg: #1e293b;--a11y-card-hover: #334155;--a11y-shadow: 0 25px 50px -12px rgba(0, 0, 0, .6)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}.a11y-top-banner{position:fixed;top:0;left:0;width:100%;z-index:999995;background-color:#0b192c;color:#fff;border-bottom:2px solid var(--a11y-primary);box-shadow:0 10px 25px #0006;padding:10px 20px;display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:14px;transition:opacity .35s cubic-bezier(.16,1,.3,1),transform .35s cubic-bezier(.16,1,.3,1)}.a11y-top-banner.hidden{opacity:0;pointer-events:none;transform:translateY(-100%)}.a11y-banner-content{display:flex;align-items:center;gap:12px}.a11y-banner-icon{width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--a11y-primary)}.a11y-banner-icon svg{width:100%;height:100%}.a11y-banner-text strong{color:var(--a11y-cyan, #44a5dd)}.a11y-banner-close{background:#ffffff1a;border:none;color:#cbd5e1;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;font-size:16px;font-weight:700}.a11y-banner-close:hover{background:#ef4444;color:#fff;transform:scale(1.1)}.a11y-widget-root{position:fixed;bottom:20px;right:20px;z-index:999990;display:flex;flex-direction:column;align-items:flex-end;gap:12px;max-width:calc(100vw - 32px);pointer-events:auto}:host([position="bottom-left"]) .a11y-widget-root{right:auto;left:20px;align-items:flex-start}.a11y-panel{background:var(--a11y-bg);color:var(--a11y-text);border:2px solid var(--a11y-primary);border-radius:var(--a11y-radius);box-shadow:var(--a11y-shadow);width:310px;max-height:var(--fab-panel-max-height, calc(100vh - 160px) );overflow-y:auto;overflow-x:hidden;padding:20px;transition:max-height .25s cubic-bezier(.16,1,.3,1),opacity .25s ease,transform .25s ease,padding .25s ease;display:flex;flex-direction:column;gap:18px}.a11y-panel.closed{max-height:0!important;padding-top:0!important;padding-bottom:0!important;border-width:0!important;opacity:0;pointer-events:none;transform:translateY(15px) scale(.95)}.a11y-panel-header{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--a11y-border);padding-bottom:12px}.a11y-panel-title{font-size:12px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:var(--a11y-primary);display:flex;align-items:center;gap:8px}.a11y-panel-title svg{color:var(--a11y-primary);flex-shrink:0}.a11y-profile-select{width:100%;padding:10px 12px;border-radius:12px;border:2px solid var(--a11y-border);background:var(--a11y-card-bg);color:var(--a11y-text);font-weight:700;font-size:13px;cursor:pointer;outline:none;transition:border-color .2s}.a11y-profile-select:focus{border-color:var(--a11y-primary)}.a11y-section-title{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--a11y-text-muted);margin-top:8px;margin-bottom:6px}.a11y-btn{width:100%;padding:12px 14px;border-radius:14px;font-size:13px;font-weight:800;cursor:pointer;border:2px solid transparent;background:var(--a11y-card-bg);color:var(--a11y-text);display:flex;align-items:center;justify-content:flex-start;gap:10px;transition:all .2s ease;-webkit-user-select:none;user-select:none}.a11y-btn:hover{background:var(--a11y-card-hover);border-color:#0077d44d}.a11y-btn.active{background:var(--a11y-primary);color:#fff;border-color:var(--a11y-primary);box-shadow:0 4px 14px #0077d459}.a11y-btn-group{display:flex;align-items:center;gap:6px}.a11y-btn-mini{flex:1;padding:8px;border-radius:10px;font-size:12px;font-weight:700;text-align:center;border:1px solid var(--a11y-border);background:var(--a11y-card-bg);color:var(--a11y-text);cursor:pointer;transition:all .15s}.a11y-btn-mini:hover{background:var(--a11y-card-hover)}.a11y-btn-mini.active{background:var(--a11y-primary);color:#fff;border-color:var(--a11y-primary)}.a11y-scale-box{display:flex;align-items:center;gap:8px;background:var(--a11y-card-bg);padding:6px;border-radius:14px;border:1px solid var(--a11y-border)}.a11y-scale-btn{flex:1;padding:8px 12px;font-size:15px;font-weight:900;background:var(--a11y-bg);border:1px solid var(--a11y-border);border-radius:10px;color:var(--a11y-primary);cursor:pointer;transition:all .2s}.a11y-scale-btn:hover{background:var(--a11y-primary);color:#fff}.a11y-scale-val{min-width:48px;text-align:center;font-weight:900;color:var(--a11y-text);font-size:14px}.a11y-reset-btn{background:transparent;border:none;color:var(--a11y-text-muted);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;text-decoration:underline;text-decoration-style:dashed;cursor:pointer;padding:8px 0;text-align:center;width:100%;margin-top:6px;transition:color .2s}.a11y-reset-btn:hover{color:#ef4444}.a11y-fab-wrapper{position:relative;display:flex;align-items:center;justify-content:flex-end}.a11y-fab{width:58px;height:58px;border-radius:50%;border:2px solid var(--a11y-primary);background:var(--a11y-primary);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 10px 25px #0077d473;transition:all .25s cubic-bezier(.175,.885,.32,1.275)}.a11y-fab:hover{transform:scale(1.1);box-shadow:0 15px 30px #0077d499}.a11y-fab:active{transform:scale(.95)}.a11y-fab svg{width:34px;height:34px;color:#fff;flex-shrink:0}.a11y-tour-bubble{position:absolute;right:74px;top:50%;transform:translateY(-50%);width:220px;background:#0f172a;border:2px solid var(--a11y-primary);color:#fff;padding:12px 14px;border-radius:16px;box-shadow:0 15px 35px #00000080;display:flex;align-items:center;gap:10px;cursor:pointer;animation:a11yFadeIn .3s ease-out;z-index:100}.a11y-tour-bubble:after{content:"";position:absolute;right:-8px;top:50%;transform:translateY(-50%);border-top:8px solid transparent;border-bottom:8px solid transparent;border-left:8px solid var(--a11y-primary)}.a11y-ping-ring{position:absolute;right:0;width:58px;height:58px;border-radius:50%;background-color:var(--a11y-primary);animation:a11yPing 2s cubic-bezier(0,0,.2,1) infinite;pointer-events:none;opacity:.6}@keyframes a11yPing{75%,to{transform:scale(1.7);opacity:0}}@keyframes a11yFadeIn{0%{opacity:0;transform:translateY(-50%) scale(.9)}to{opacity:1;transform:translateY(-50%) scale(1)}}';
+const globalCss = `html.high-contrast{filter:contrast(160%)!important}html.high-contrast *{border-color:#facc15!important}html.reduce-motion *,html.reduce-motion *:before,html.reduce-motion *:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}body{transition:padding-top .35s cubic-bezier(.16,1,.3,1)!important}body.a11y-banner-active{padding-top:var(--a11y-top-banner-height, 46px)!important}html.big-cursor,html.big-cursor *{cursor:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 32 32"><path fill="%23ffffff" stroke="%230077d4" stroke-width="3" stroke-linejoin="round" d="M2 2 L2 28 L9 22 L15 31 L19 29 L12 20 L21 20 Z"/></svg>'),auto!important}html.cursor-hidden,html.cursor-hidden *{cursor:none!important}html.keyboard-focus *:focus,html.keyboard-focus *:focus-visible{outline:4px solid #0077d4!important;outline-offset:3px!important}html.highlight-links a,html.highlight-links button,html.highlight-links [role=button],html.highlight-links input[type=submit],html.highlight-links input[type=button]{outline:2px dashed #0077d4!important;outline-offset:2px!important;background-color:#0077d41f!important}html.dyslexia-mode,html.dyslexia-mode *{font-family:Comic Sans MS,OpenDyslexic,Arial,sans-serif!important;letter-spacing:.08em!important;word-spacing:.16em!important;line-height:1.8!important}html.text-spacing-1 *{letter-spacing:.12em!important;word-spacing:.16em!important;line-height:1.8!important}html.text-spacing-2 *{letter-spacing:.2em!important;word-spacing:.28em!important;line-height:2.2!important}html.daltonism-protanopia{filter:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"><filter id="f"><feColorMatrix type="matrix" values="0.567, 0.433, 0, 0, 0 0.558, 0.442, 0, 0, 0 0, 0.242, 0.758, 0, 0 0, 0, 0, 1, 0"/></filter></svg>#f')!important}html.daltonism-deuteranopia{filter:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"><filter id="f"><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>#f')!important}html.daltonism-tritanopia{filter:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"><filter id="f"><feColorMatrix type="matrix" values="0.95, 0.05, 0, 0, 0 0, 0.433, 0.567, 0, 0 0, 0.475, 0.525, 0, 0 0, 0, 0, 1, 0"/></filter></svg>#f')!important}html.daltonism-monochromacy{filter:grayscale(100%)!important}:root{--font-scale: 1}body{font-size:calc(1rem * var(--font-scale, 1))!important}`;
+class A11yStore {
+  constructor(prefix = "cognitvs") {
+    __publicField(this, "prefix");
+    __publicField(this, "state");
+    __publicField(this, "listeners", /* @__PURE__ */ new Set());
+    this.prefix = prefix;
+    this.state = this.loadInitialState();
+  }
+  getState() {
+    return { ...this.state };
+  }
+  subscribe(listener) {
+    this.listeners.add(listener);
+    listener(this.getState());
+    return () => this.listeners.delete(listener);
+  }
+  notify() {
+    const current = this.getState();
+    this.listeners.forEach((fn) => fn(current));
+  }
+  loadInitialState() {
+    const getItem = (key) => {
+      try {
+        return localStorage.getItem(`${this.prefix}_${key}`);
+      } catch {
+        return null;
+      }
+    };
+    const fontScale = parseFloat(getItem("font_scale") || "1") || 1;
+    const isHighContrast = getItem("high_contrast") === "true";
+    const isReduceMotion = getItem("reduce_motion") === "true";
+    const isBigCursor = getItem("big_cursor") === "true";
+    const isKeyboardFocus = getItem("keyboard_focus") === "true";
+    const isHighlightLinks = getItem("highlight_links") === "true";
+    const isReadingMaskActive = getItem("reading_mask") === "true";
+    const isReadingMaskSmart = getItem("reading_mask_smart") !== "false";
+    const isDyslexiaMode = getItem("dyslexia") === "true";
+    const textSpacingLevel = parseInt(getItem("text_spacing") || "0", 10) || 0;
+    const colorBlindMode = getItem("colorblind") || "none";
+    const isScrollAssistActive = getItem("scroll_assist") === "true";
+    const isCursorMagnetActive = getItem("magnet_cursor") === "true";
+    const cursorMagnetForce = getItem("magnet_force") || "suave";
+    const isVLibrasActive = getItem("vlibras") === "true";
+    const isTTSActive = getItem("tts") === "true";
+    const ttsRate = parseFloat(getItem("tts_rate") || "1") || 1;
+    const hasSeenTour = getItem("seen_tour") === "true";
+    const bannerDismissed = getItem("banner_dismissed") === "true";
+    return {
+      isExpanded: false,
+      activeProfile: "all",
+      fontScale,
+      isHighContrast,
+      isReadingMaskActive,
+      isReadingMaskSmart,
+      colorBlindMode,
+      isDaltonismMenuOpen: false,
+      isTTSActive,
+      ttsRate,
+      isVLibrasActive,
+      isBigCursor,
+      isKeyboardFocus,
+      isScrollAssistActive,
+      isCursorMagnetActive,
+      cursorMagnetForce,
+      isHighlightLinks,
+      isReduceMotion,
+      isDyslexiaMode,
+      textSpacingLevel,
+      showAttentionGrabber: false,
+      hasInteracted: hasSeenTour,
+      bannerDismissed
+    };
+  }
+  setStorage(key, value) {
+    try {
+      localStorage.setItem(`${this.prefix}_${key}`, value);
+    } catch (e) {
+      console.warn("A11yWidget: falha ao salvar no localStorage", e);
+    }
+  }
+  removeStorage(key) {
+    try {
+      localStorage.removeItem(`${this.prefix}_${key}`);
+    } catch (e) {
+      console.warn("A11yWidget: falha ao remover do localStorage", e);
+    }
+  }
+  update(partial) {
+    this.state = { ...this.state, ...partial };
+    this.notify();
+  }
+  toggleExpanded() {
+    this.update({
+      isExpanded: !this.state.isExpanded,
+      showAttentionGrabber: false,
+      hasInteracted: true
+    });
+    this.setStorage("seen_tour", "true");
+  }
+  setActiveProfile(profile) {
+    this.update({ activeProfile: profile });
+  }
+  updateFontScale(delta) {
+    const newScale = Math.min(Math.max(parseFloat((this.state.fontScale + delta).toFixed(2)), 0.8), 2);
+    this.update({ fontScale: newScale });
+    this.setStorage("font_scale", newScale.toString());
+  }
+  toggleHighContrast() {
+    const val = !this.state.isHighContrast;
+    this.update({ isHighContrast: val });
+    this.setStorage("high_contrast", val.toString());
+  }
+  toggleReduceMotion() {
+    const val = !this.state.isReduceMotion;
+    this.update({ isReduceMotion: val });
+    this.setStorage("reduce_motion", val.toString());
+  }
+  toggleBigCursor() {
+    const val = !this.state.isBigCursor;
+    this.update({ isBigCursor: val });
+    this.setStorage("big_cursor", val.toString());
+  }
+  toggleKeyboardFocus() {
+    const val = !this.state.isKeyboardFocus;
+    this.update({ isKeyboardFocus: val });
+    this.setStorage("keyboard_focus", val.toString());
+  }
+  toggleHighlightLinks() {
+    const val = !this.state.isHighlightLinks;
+    this.update({ isHighlightLinks: val });
+    this.setStorage("highlight_links", val.toString());
+  }
+  toggleScrollAssist() {
+    const val = !this.state.isScrollAssistActive;
+    this.update({ isScrollAssistActive: val });
+    this.setStorage("scroll_assist", val.toString());
+  }
+  toggleCursorMagnet() {
+    const val = !this.state.isCursorMagnetActive;
+    this.update({ isCursorMagnetActive: val });
+    this.setStorage("magnet_cursor", val.toString());
+  }
+  setCursorMagnetForce(force) {
+    this.update({ cursorMagnetForce: force });
+    this.setStorage("magnet_force", force);
+  }
+  toggleReadingMask() {
+    const val = !this.state.isReadingMaskActive;
+    this.update({ isReadingMaskActive: val });
+    this.setStorage("reading_mask", val.toString());
+  }
+  setReadingMaskSmart(smart) {
+    this.update({ isReadingMaskSmart: smart });
+    this.setStorage("reading_mask_smart", smart.toString());
+  }
+  toggleDyslexia() {
+    const val = !this.state.isDyslexiaMode;
+    this.update({ isDyslexiaMode: val });
+    this.setStorage("dyslexia", val.toString());
+  }
+  setTextSpacing(level) {
+    this.update({ textSpacingLevel: level });
+    this.setStorage("text_spacing", level.toString());
+  }
+  setColorBlindMode(mode) {
+    this.update({ colorBlindMode: mode, isDaltonismMenuOpen: false });
+    this.setStorage("colorblind", mode);
+  }
+  toggleDaltonismMenu() {
+    this.update({ isDaltonismMenuOpen: !this.state.isDaltonismMenuOpen });
+  }
+  toggleTTS() {
+    const val = !this.state.isTTSActive;
+    const rate = val ? 1 : this.state.ttsRate;
+    this.update({ isTTSActive: val, ttsRate: rate });
+    this.setStorage("tts", val.toString());
+    if (val) this.setStorage("tts_rate", "1");
+  }
+  setTTSRate(rate) {
+    this.update({ ttsRate: rate });
+    this.setStorage("tts_rate", rate.toString());
+  }
+  toggleVLibras() {
+    const val = !this.state.isVLibrasActive;
+    this.update({ isVLibrasActive: val });
+    this.setStorage("vlibras", val.toString());
+  }
+  dismissBanner() {
+    this.update({ bannerDismissed: true });
+    this.setStorage("banner_dismissed", "true");
+  }
+  resetAll() {
+    const keys = [
+      "font_scale",
+      "high_contrast",
+      "reduce_motion",
+      "big_cursor",
+      "keyboard_focus",
+      "highlight_links",
+      "reading_mask",
+      "reading_mask_smart",
+      "dyslexia",
+      "text_spacing",
+      "colorblind",
+      "vlibras",
+      "magnet_cursor",
+      "magnet_force",
+      "tts",
+      "tts_rate"
+    ];
+    keys.forEach((k) => this.removeStorage(k));
+    this.update({
+      fontScale: 1,
+      isHighContrast: false,
+      isReadingMaskActive: false,
+      isReadingMaskSmart: true,
+      colorBlindMode: "none",
+      isDaltonismMenuOpen: false,
+      isTTSActive: false,
+      ttsRate: 1,
+      isVLibrasActive: false,
+      isBigCursor: false,
+      isKeyboardFocus: false,
+      isScrollAssistActive: false,
+      isCursorMagnetActive: false,
+      cursorMagnetForce: "suave",
+      isHighlightLinks: false,
+      isReduceMotion: false,
+      isDyslexiaMode: false,
+      textSpacingLevel: 0
+    });
+  }
+}
+class DomEffectsManager {
+  constructor() {
+    __publicField(this, "prevClasses", /* @__PURE__ */ new Set());
+    __publicField(this, "readingMaskEl", null);
+    __publicField(this, "maskFrameId", null);
+    __publicField(this, "boundMouseMove", null);
+  }
+  applyGlobalState(state) {
+    const docEl = document.documentElement;
+    docEl.style.setProperty("--font-scale", state.fontScale.toString());
+    this.syncClass(docEl, "high-contrast", state.isHighContrast);
+    this.syncClass(docEl, "reduce-motion", state.isReduceMotion);
+    this.syncClass(docEl, "big-cursor", state.isBigCursor);
+    this.syncClass(docEl, "keyboard-focus", state.isKeyboardFocus);
+    this.syncClass(docEl, "highlight-links", state.isHighlightLinks);
+    this.syncClass(docEl, "scroll-assist-active", state.isScrollAssistActive);
+    this.syncClass(docEl, "cursor-magnet-active", state.isCursorMagnetActive);
+    this.syncClass(docEl, "dyslexia-mode", state.isDyslexiaMode);
+    docEl.setAttribute("data-magnet-force", state.cursorMagnetForce);
+    docEl.classList.remove("text-spacing-1", "text-spacing-2");
+    if (state.textSpacingLevel > 0) {
+      docEl.classList.add(`text-spacing-${state.textSpacingLevel}`);
+    }
+    ["protanopia", "deuteranopia", "tritanopia", "monochromacy"].forEach((m) => {
+      docEl.classList.remove(`daltonism-${m}`);
+    });
+    if (state.colorBlindMode !== "none") {
+      docEl.classList.add(`daltonism-${state.colorBlindMode}`);
+    }
+    this.syncReadingMask(state.isReadingMaskActive, state.isReadingMaskSmart);
+  }
+  syncClass(el, className, active) {
+    if (active) {
+      el.classList.add(className);
+      this.prevClasses.add(className);
+    } else {
+      el.classList.remove(className);
+      this.prevClasses.delete(className);
+    }
+  }
+  syncReadingMask(active, isSmart) {
+    if (!active) {
+      if (this.readingMaskEl) {
+        this.readingMaskEl.remove();
+        this.readingMaskEl = null;
+      }
+      if (this.boundMouseMove) {
+        window.removeEventListener("mousemove", this.boundMouseMove);
+        this.boundMouseMove = null;
+      }
+      if (this.maskFrameId) {
+        cancelAnimationFrame(this.maskFrameId);
+        this.maskFrameId = null;
+      }
+      return;
+    }
+    if (!this.readingMaskEl) {
+      this.readingMaskEl = document.createElement("div");
+      this.readingMaskEl.id = "cognitvs-a11y-reading-mask";
+      this.readingMaskEl.setAttribute("aria-hidden", "true");
+      this.readingMaskEl.style.cssText = `
+        position: fixed;
+        left: 0;
+        width: 100vw;
+        pointer-events: none;
+        z-index: 999998;
+        border-top: 2px solid rgba(0, 119, 212, 0.7);
+        border-bottom: 2px solid rgba(0, 119, 212, 0.7);
+        box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.7);
+        height: var(--mask-height, 140px);
+        top: var(--mask-top, calc(50vh - 70px));
+        transition: top 0.15s cubic-bezier(0.2, 0, 0, 1), height 0.15s cubic-bezier(0.2, 0, 0, 1);
+      `;
+      document.body.appendChild(this.readingMaskEl);
+    }
+    let lastTarget = null;
+    if (this.boundMouseMove) {
+      window.removeEventListener("mousemove", this.boundMouseMove);
+    }
+    this.boundMouseMove = (e) => {
+      if (this.maskFrameId) cancelAnimationFrame(this.maskFrameId);
+      this.maskFrameId = requestAnimationFrame(() => {
+        if (isSmart) {
+          const target = document.elementFromPoint(e.clientX, e.clientY);
+          if (target) {
+            const textContainer = target.closest("p, h1, h2, h3, h4, h5, h6, li, blockquote, figcaption, td, th, a, button, label");
+            const elToMeasure = textContainer || target;
+            const rect = elToMeasure.getBoundingClientRect();
+            if (textContainer && rect.height > 10 && rect.height < 500) {
+              if (elToMeasure !== lastTarget) {
+                lastTarget = elToMeasure;
+                const margin = 24;
+                const maskHeight = rect.height + margin;
+                const topPos = rect.top - margin / 2;
+                document.documentElement.style.setProperty("--mask-height", `${maskHeight}px`);
+                document.documentElement.style.setProperty("--mask-top", `${topPos}px`);
+              }
+              return;
+            }
+          }
+        }
+        lastTarget = null;
+        document.documentElement.style.setProperty("--mask-height", "140px");
+        document.documentElement.style.setProperty("--mask-top", `${e.clientY - 70}px`);
+      });
+    };
+    window.addEventListener("mousemove", this.boundMouseMove, { passive: true });
+  }
+  destroy() {
+    const docEl = document.documentElement;
+    this.prevClasses.forEach((c) => docEl.classList.remove(c));
+    ["protanopia", "deuteranopia", "tritanopia", "monochromacy", "text-spacing-1", "text-spacing-2"].forEach((c) => docEl.classList.remove(c));
+    docEl.style.removeProperty("--font-scale");
+    docEl.removeAttribute("data-magnet-force");
+    this.syncReadingMask(false, false);
+  }
+}
+class TTSController {
+  constructor(isWidgetElement) {
+    __publicField(this, "active", false);
+    __publicField(this, "rate", 1);
+    __publicField(this, "boundClickHandler", null);
+    __publicField(this, "isWidgetElement");
+    this.isWidgetElement = isWidgetElement;
+  }
+  update(active, rate) {
+    this.active = active;
+    this.rate = rate;
+    if (!active) {
+      if (typeof window !== "undefined" && "speechSynthesis" in window) {
+        window.speechSynthesis.cancel();
+      }
+      if (this.boundClickHandler) {
+        document.removeEventListener("click", this.boundClickHandler, { capture: true });
+        this.boundClickHandler = null;
+      }
+      return;
+    }
+    if (!this.boundClickHandler) {
+      this.boundClickHandler = this.handleClick.bind(this);
+      document.addEventListener("click", this.boundClickHandler, { capture: true });
+    }
+  }
+  handleClick(e) {
+    if (!this.active) return;
+    const target = e.target;
+    if (!target) return;
+    if (this.isWidgetElement(target)) return;
+    const invalidTags = [
+      "BODY",
+      "HTML",
+      "MAIN",
+      "SECTION",
+      "ARTICLE",
+      "HEADER",
+      "FOOTER",
+      "NAV",
+      "ASIDE",
+      "FORM",
+      "UL",
+      "OL",
+      "TABLE",
+      "TBODY",
+      "TR"
+    ];
+    if (invalidTags.includes(target.tagName) || target.id === "root") return;
+    const blockTags = [
+      "DIV",
+      "P",
+      "H1",
+      "H2",
+      "H3",
+      "H4",
+      "H5",
+      "H6",
+      "UL",
+      "OL",
+      "LI",
+      "SECTION",
+      "ARTICLE",
+      "IMG",
+      "PICTURE",
+      "VIDEO",
+      "HEADER",
+      "FOOTER",
+      "NAV",
+      "ASIDE",
+      "FORM",
+      "TABLE",
+      "TR",
+      "TD",
+      "TH",
+      "MAIN"
+    ];
+    const hasBlockChildren = Array.from(target.children).some((child) => blockTags.includes(child.tagName));
+    if (hasBlockChildren) return;
+    const rawText = target.innerText || target.textContent || "";
+    const text = rawText.replace(/[\p{Extended_Pictographic}]/gu, "").trim();
+    if (text.length > 0 && "speechSynthesis" in window) {
+      if (target.closest("a") || target.closest("button")) {
+        e.preventDefault();
+        e.stopPropagation();
+      }
+      window.speechSynthesis.cancel();
+      const utterance = new SpeechSynthesisUtterance(text);
+      utterance.lang = "pt-BR";
+      utterance.rate = this.rate;
+      const originalHTML = target.innerHTML;
+      const originalOutline = target.style.outline;
+      const originalOutlineOffset = target.style.outlineOffset;
+      const tokens = text.split(/(\s+)/);
+      target.innerHTML = "";
+      const spanElements = [];
+      tokens.forEach((token) => {
+        const span = document.createElement("span");
+        span.textContent = token;
+        span.style.transition = "all 150ms ease-in-out";
+        span.style.borderRadius = "2px";
+        target.appendChild(span);
+        spanElements.push(span);
+      });
+      target.style.outline = "3px solid #f59e0b";
+      target.style.outlineOffset = "2px";
+      utterance.onboundary = (ev) => {
+        if (ev.name === "word") {
+          let charCount = 0;
+          for (let i = 0; i < spanElements.length; i++) {
+            const spanText = spanElements[i].textContent || "";
+            const span = spanElements[i];
+            if (charCount <= ev.charIndex && charCount + spanText.length > ev.charIndex && spanText.trim().length > 0) {
+              span.style.backgroundColor = "#fef08a";
+              span.style.color = "#0f172a";
+              span.style.boxShadow = "0 0 0 2px #fef08a";
+            } else {
+              span.style.backgroundColor = "transparent";
+              span.style.color = "inherit";
+              span.style.boxShadow = "0 0 0 2px transparent";
+            }
+            charCount += spanText.length;
+          }
+        }
+      };
+      const restoreDOM = () => {
+        target.style.outline = originalOutline;
+        target.style.outlineOffset = originalOutlineOffset;
+        target.innerHTML = originalHTML;
+      };
+      utterance.onend = restoreDOM;
+      utterance.onerror = restoreDOM;
+      window.speechSynthesis.speak(utterance);
+    }
+  }
+  destroy() {
+    if (this.boundClickHandler) {
+      document.removeEventListener("click", this.boundClickHandler, { capture: true });
+      this.boundClickHandler = null;
+    }
+    if (typeof window !== "undefined" && "speechSynthesis" in window) {
+      window.speechSynthesis.cancel();
+    }
+  }
+}
+class CursorMagnetController {
+  constructor() {
+    __publicField(this, "active", false);
+    __publicField(this, "force", "suave");
+    __publicField(this, "cursorEl", null);
+    __publicField(this, "isMagnetized", false);
+    __publicField(this, "targetButton", null);
+    __publicField(this, "cachedButtons", []);
+    __publicField(this, "lastCacheTime", 0);
+    __publicField(this, "isBig", false);
+    __publicField(this, "boundMouseMove", null);
+    __publicField(this, "boundClick", null);
+    __publicField(this, "boundScroll", null);
+  }
+  update(active, force, isBig) {
+    this.active = active;
+    this.force = force;
+    this.isBig = isBig;
+    if (!active) {
+      this.teardown();
+      return;
+    }
+    if (!this.boundMouseMove) {
+      this.setup();
+    }
+  }
+  setup() {
+    this.boundMouseMove = this.handleMouseMove.bind(this);
+    this.boundClick = this.handleClick.bind(this);
+    this.boundScroll = () => {
+      this.lastCacheTime = 0;
+    };
+    window.addEventListener("mousemove", this.boundMouseMove, { passive: true });
+    window.addEventListener("click", this.boundClick, { capture: true });
+    window.addEventListener("scroll", this.boundScroll, { passive: true });
+  }
+  teardown() {
+    if (this.boundMouseMove) {
+      window.removeEventListener("mousemove", this.boundMouseMove);
+      this.boundMouseMove = null;
+    }
+    if (this.boundClick) {
+      window.removeEventListener("click", this.boundClick, { capture: true });
+      this.boundClick = null;
+    }
+    if (this.boundScroll) {
+      window.removeEventListener("scroll", this.boundScroll);
+      this.boundScroll = null;
+    }
+    document.documentElement.classList.remove("cursor-hidden");
+    this.isMagnetized = false;
+    this.targetButton = null;
+    if (this.cursorEl) {
+      this.cursorEl.remove();
+      this.cursorEl = null;
+    }
+  }
+  ensureCursorElement() {
+    if (!this.cursorEl) {
+      this.cursorEl = document.createElement("div");
+      this.cursorEl.id = "cognitvs-a11y-virtual-cursor";
+      this.cursorEl.setAttribute("aria-hidden", "true");
+      this.cursorEl.style.cssText = `
+        position: fixed;
+        pointer-events: none;
+        z-index: 999999;
+        transition: transform 75ms ease;
+        transform: translate(-5px, -5px);
+        filter: drop-shadow(0 0 10px rgba(0, 119, 212, 0.9));
+      `;
+      document.body.appendChild(this.cursorEl);
+    }
+    this.cursorEl.innerHTML = this.isBig ? `<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 32 32">
+          <path fill="#ffffff" stroke="#0077d4" stroke-width="3" stroke-linejoin="round" d="M2 2 L2 28 L9 22 L15 31 L19 29 L12 20 L21 20 Z" />
+        </svg>` : `<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 32 32">
+          <path fill="#ffffff" stroke="#0077d4" stroke-width="2.5" stroke-linejoin="round" d="M2 2 L2 28 L9 22 L15 31 L19 29 L12 20 L21 20 Z" />
+        </svg>`;
+    return this.cursorEl;
+  }
+  updateButtonCache() {
+    const now = Date.now();
+    if (now - this.lastCacheTime > 200) {
+      const elements = document.querySelectorAll('a, button, [role="button"], input[type="submit"], input[type="button"]');
+      this.cachedButtons = Array.from(elements).map((el) => ({
+        el,
+        rect: el.getBoundingClientRect()
+      }));
+      this.lastCacheTime = now;
+    }
+  }
+  handleMouseMove(e) {
+    if (!this.active) return;
+    const ATTRACTION_RADIUS = this.force === "forte" ? 45 : 25;
+    const ESCAPE_RADIUS = this.force === "forte" ? 60 : 40;
+    this.updateButtonCache();
+    const mouseX = e.clientX;
+    const mouseY = e.clientY;
+    let targetDistance = Infinity;
+    let targetCenter = { x: 0, y: 0 };
+    let closestDistance = Infinity;
+    let closestButton = null;
+    let closestCenter = { x: 0, y: 0 };
+    for (const { el } of this.cachedButtons) {
+      const currentRect = el.getBoundingClientRect();
+      const centerX = currentRect.left + currentRect.width / 2;
+      const centerY = currentRect.top + currentRect.height / 2;
+      const dxEdge = Math.max(currentRect.left - mouseX, 0, mouseX - currentRect.right);
+      const dyEdge = Math.max(currentRect.top - mouseY, 0, mouseY - currentRect.bottom);
+      const distanceToEdge = Math.sqrt(dxEdge * dxEdge + dyEdge * dyEdge);
+      if (distanceToEdge < closestDistance) {
+        closestDistance = distanceToEdge;
+        closestButton = el;
+        closestCenter = { x: centerX, y: centerY };
+      }
+      if (el === this.targetButton) {
+        targetDistance = distanceToEdge;
+        targetCenter = { x: centerX, y: centerY };
+      }
+    }
+    if (this.isMagnetized && this.targetButton) {
+      if (targetDistance > ESCAPE_RADIUS) {
+        this.isMagnetized = false;
+        this.targetButton = null;
+        document.documentElement.classList.remove("cursor-hidden");
+        if (closestDistance < ATTRACTION_RADIUS && closestButton) {
+          this.isMagnetized = true;
+          this.targetButton = closestButton;
+          this.setCursorPos(closestCenter.x, closestCenter.y);
+          document.documentElement.classList.add("cursor-hidden");
+        } else {
+          this.hideVirtualCursor();
+        }
+      } else {
+        this.setCursorPos(targetCenter.x, targetCenter.y);
+      }
+    } else {
+      if (closestDistance < ATTRACTION_RADIUS && closestButton) {
+        this.isMagnetized = true;
+        this.targetButton = closestButton;
+        this.setCursorPos(closestCenter.x, closestCenter.y);
+        document.documentElement.classList.add("cursor-hidden");
+      } else {
+        this.hideVirtualCursor();
+      }
+    }
+  }
+  setCursorPos(x, y) {
+    const el = this.ensureCursorElement();
+    el.style.display = "block";
+    el.style.left = `${x}px`;
+    el.style.top = `${y}px`;
+  }
+  hideVirtualCursor() {
+    if (this.cursorEl) {
+      this.cursorEl.style.display = "none";
+    }
+    document.documentElement.classList.remove("cursor-hidden");
+  }
+  handleClick(e) {
+    if (!this.active) return;
+    this.lastCacheTime = 0;
+    if (this.isMagnetized && this.targetButton) {
+      if (!this.targetButton.contains(e.target)) {
+        e.preventDefault();
+        e.stopPropagation();
+        this.targetButton.click();
+      }
+    }
+  }
+  destroy() {
+    this.teardown();
+  }
+}
+class ScrollAssistController {
+  constructor() {
+    __publicField(this, "containerEl", null);
+    __publicField(this, "boundScroll", null);
+  }
+  update(active) {
+    if (!active) {
+      this.teardown();
+      return;
+    }
+    if (!this.containerEl) {
+      this.setup();
+    }
+    this.checkScrollLimits();
+  }
+  setup() {
+    this.containerEl = document.createElement("div");
+    this.containerEl.id = "cognitvs-a11y-scroll-assist";
+    this.containerEl.setAttribute("aria-label", "Assistente de Rolagem");
+    this.containerEl.style.cssText = `
+      position: fixed;
+      bottom: 24px;
+      left: 24px;
+      z-index: 999990;
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+      pointer-events: auto;
+    `;
+    const upBtn = document.createElement("button");
+    upBtn.id = "cognitvs-scroll-up";
+    upBtn.setAttribute("aria-label", "Rolar para cima");
+    upBtn.title = "Rolar para cima";
+    upBtn.innerHTML = `
+      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
+        <polyline points="18 15 12 9 6 15"></polyline>
+      </svg>
+    `;
+    this.styleButton(upBtn, false);
+    upBtn.onclick = () => window.scrollBy({ top: -window.innerHeight * 0.7, behavior: "smooth" });
+    const downBtn = document.createElement("button");
+    downBtn.id = "cognitvs-scroll-down";
+    downBtn.setAttribute("aria-label", "Rolar para baixo");
+    downBtn.title = "Rolar para baixo";
+    downBtn.innerHTML = `
+      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
+        <polyline points="6 9 12 15 18 9"></polyline>
+      </svg>
+    `;
+    this.styleButton(downBtn, true);
+    downBtn.onclick = () => window.scrollBy({ top: window.innerHeight * 0.7, behavior: "smooth" });
+    this.containerEl.appendChild(upBtn);
+    this.containerEl.appendChild(downBtn);
+    document.body.appendChild(this.containerEl);
+    this.boundScroll = this.checkScrollLimits.bind(this);
+    window.addEventListener("scroll", this.boundScroll, { passive: true });
+  }
+  styleButton(btn, isPrimary) {
+    btn.style.cssText = `
+      width: 52px;
+      height: 52px;
+      border-radius: 16px;
+      border: 2px solid ${isPrimary ? "#0077d4" : "rgba(0, 119, 212, 0.4)"};
+      background: ${isPrimary ? "#0077d4" : "#0f172a"};
+      color: #ffffff;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35);
+      backdrop-filter: blur(8px);
+      transition: all 0.2s ease;
+      font-weight: bold;
+    `;
+    btn.onmouseenter = () => {
+      btn.style.transform = "scale(1.08)";
+      btn.style.background = isPrimary ? "#0066b8" : "#1e293b";
+    };
+    btn.onmouseleave = () => {
+      btn.style.transform = "scale(1)";
+      btn.style.background = isPrimary ? "#0077d4" : "#0f172a";
+    };
+  }
+  checkScrollLimits() {
+    if (!this.containerEl) return;
+    const isAtTop = window.scrollY < 20;
+    const isAtBottom = Math.ceil(window.innerHeight + window.scrollY) >= document.documentElement.scrollHeight - 20;
+    const upBtn = this.containerEl.querySelector("#cognitvs-scroll-up");
+    const downBtn = this.containerEl.querySelector("#cognitvs-scroll-down");
+    if (upBtn) upBtn.style.opacity = isAtTop ? "0.4" : "1";
+    if (downBtn) downBtn.style.opacity = isAtBottom ? "0.4" : "1";
+  }
+  teardown() {
+    if (this.boundScroll) {
+      window.removeEventListener("scroll", this.boundScroll);
+      this.boundScroll = null;
+    }
+    if (this.containerEl) {
+      this.containerEl.remove();
+      this.containerEl = null;
+    }
+  }
+  destroy() {
+    this.teardown();
+  }
+}
+class VLibrasController {
+  constructor() {
+    __publicField(this, "active", false);
+    __publicField(this, "scriptLoaded", false);
+  }
+  update(active) {
+    this.active = active;
+    const windowWithLibras = window;
+    if (!active) {
+      if (typeof windowWithLibras.toggleVLibras === "function") {
+        windowWithLibras.toggleVLibras(false);
+      }
+      return;
+    }
+    if (this.scriptLoaded && typeof windowWithLibras.toggleVLibras === "function") {
+      windowWithLibras.toggleVLibras(true);
+      return;
+    }
+    this.loadVLibras();
+  }
+  loadVLibras() {
+    if (document.getElementById("vlibras-plugin-container")) {
+      return;
+    }
+    const div = document.createElement("div");
+    div.id = "vlibras-plugin-container";
+    div.innerHTML = `
+      <div vw class="enabled">
+        <div vw-access-button class="active"></div>
+        <div vw-plugin-wrapper>
+          <div class="vw-plugin-top-wrapper"></div>
+        </div>
+      </div>
+    `;
+    document.body.appendChild(div);
+    const script = document.createElement("script");
+    script.id = "vlibras-official-script";
+    script.src = "https://vlibras.gov.br/app/vlibras-plugin.js";
+    script.async = true;
+    script.onload = () => {
+      this.scriptLoaded = true;
+      const win = window;
+      if (win.VLibras && win.VLibras.Widget) {
+        new win.VLibras.Widget("https://vlibras.gov.br/app");
+      }
+    };
+    document.head.appendChild(script);
+  }
+  destroy() {
+    if (this.active) {
+      this.update(false);
+    }
+  }
+}
+const A11Y_ICON_SVG = (size = 32) => `
+  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+    width="${size}" height="${size}" viewBox="0 0 539.7 501.1" aria-hidden="true">
+    <!-- Estrutura principal (braços, pernas, arco superior/inferior, texto nós) -->
+    <path fill="currentColor" d="M268,276.6c-18.8,28.2-37,55.4-55.3,82.7c-14.9,22.3-29.7,44.6-44.8,66.8c-2.1,3-2.4,4.8,0.3,7.9
+      c11.2,13,10.9,32.4-0.1,45.5c-11.3,13.4-30.3,16.7-45.3,7.9c-15-8.8-21.5-27-15.5-43.3c6-16.1,22.6-25.7,39.5-22.6
+      c2.9,0.5,4.4,0.1,6.1-2.4c32.7-49.1,65.4-98.1,98.2-147.1c0.6-0.9,1.1-1.9,1.9-3.2c-9.2-1.1-18.1-1.8-26.9-3.2
+      c-43.2-6.6-84.4-20-124.9-36c-13.8-5.4-27.3-11.4-40.9-17.3c-2.6-1.1-4.4-1-6.8,0.4c-15.2,8.8-34.2,5.3-45.2-8
+      c-11-13.2-11-32.3-0.1-45.6c11-13.3,29.8-16.8,44.8-8.5c15.2,8.4,22.1,26.4,16.3,42.9c-0.9,2.7-1.3,4.1,2,5.5
+      c45.8,19.7,92.3,37.1,141.3,47.4c38.9,8.2,77.4,6.5,116.1-0.9c48.7-9.3,95.8-24.1,142.4-40.8c3.9-1.4,3.7-2.5,1.9-5.8
+      c-10.2-18.2-2.4-41.3,16.5-49.8c19-8.5,41.4,1.1,48.3,20.7c7,19.9-4.5,41.3-24.9,46.5c-5.9,1.5-11.9,1.6-17.8-0.2
+      c-3.1-1-5.6-0.7-8.6,0.4c-48.2,18.1-97.1,33.8-147.7,43.8c-18.3,3.6-36.8,6.3-55.4,7.6c-0.9,1.9,0.7,2.8,1.5,3.9
+      c32.8,49.2,65.7,98.3,98.4,147.5c1.8,2.7,3.3,3.2,6.4,2.4c17.2-4.2,34.2,4.3,41.2,20.2c7,15.9,1.5,34.5-13,44.1
+      c-14.3,9.5-33.3,7.4-45.3-5c-12-12.4-13.4-31.6-3.1-45.9c1.3-1.9,2.8-3.1,0.9-5.9c-33.8-50.3-67.4-100.7-101.1-151.1
+      C268.8,278.1,268.6,277.7,268,276.6z"/>
+    <!-- Arco superior -->
+    <path fill="currentColor" d="M268.9,0c94.9,3.7,167.9,44.9,217.2,126.7c2.1,3.6,1.5,5.1-2,6.5c-3.4,1.4-6.8,4.9-9.7,4.4
+      c-3.1-0.5-4.1-5.6-6-8.7C376.9-21.2,158.6-20.3,68.3,130.7c-2.6,4.3-4.2,5.4-8.7,2.3c-8.6-5.8-9-5.7-3.3-14.3
+      C101.9,48.4,166.3,8.8,250,1.1C256.3,0.5,262.6,0.3,268.9,0z"/>
+    <!-- Cabeça (anel externo) -->
+    <path fill="currentColor" d="M200.5,135.2c0.2-39,31.7-70.4,70.8-70.3c38.9,0.1,70.5,31.8,70.4,70.7c-0.1,39.1-31.8,70.7-71,70.5
+      C231.8,206,200.3,174.2,200.5,135.2z M325.1,135.4c-0.1-29.9-24.3-54.1-54-54.1c-29.9,0-54.2,24.6-54.1,54.6
+      c0.1,29.7,24.6,53.9,54.4,53.7C301.2,189.5,325.2,165.4,325.1,135.4z"/>
+    <!-- Arco lateral esquerdo -->
+    <path fill="currentColor" d="M35.1,255.4c2,61.5,23.9,114.7,66.9,158.9c3,3.1,3.4,4.6,0.1,7.7c-8.3,7.9-8.2,8.2-15.9-0.2
+      C39,370.2,16.7,309.3,18.9,239.4c0.1-3.1,0.7-4.6,4.2-4.2c3.9,0.4,9.1-1.1,11.6,0.8c2.8,2.2,0.2,7.4,0.5,11.4
+      C35.3,250.1,35.1,252.7,35.1,255.4z"/>
+    <!-- Arco lateral direito -->
+    <path fill="currentColor" d="M518.9,252.8c-1.4,66.4-24.6,123.9-70.4,172.2c-2.7,2.8-4.4,3.1-6.9,0.1c-2.4-2.9-7.5-4.8-7.5-8.1
+      c0-2.7,4.3-5.4,6.8-8.1c43.4-48.2,63.8-104.7,61.2-169.5c-0.1-3.4,0.4-4.6,4.1-4.5c12.6,0.1,12.6,0,12.7,12.4
+      C518.9,249.2,518.9,251,518.9,252.8z"/>
+    <!-- Arco inferior -->
+    <path fill="currentColor" d="M268.6,501.1c-28.7,0-56.6-4.9-83.7-14.3c-3.5-1.2-5-2.5-2.9-6.2c1.9-3.3,1.7-8.7,4.8-10
+      c2.6-1.1,6.8,1.7,10.2,2.8c51.1,16,101.9,15.1,152.3-3.1c3.8-1.4,5.3-0.9,6.7,3c3.9,11,4.1,10.9-6.9,14.7
+      C323.3,496.7,296.3,501.1,268.6,501.1z"/>
+    <!-- Nós de destaque (azul ciano — mantido como identidade visual do ícone) -->
+    <circle fill="#44A5DD" cx="398" cy="456.5" r="19.3"/>
+    <circle fill="#44A5DD" cx="505.1" cy="181.9" r="19.3"/>
+    <circle fill="#44A5DD" cx="140.6" cy="456.6" r="19.1"/>
+    <circle fill="#44A5DD" cx="35.8" cy="181.8" r="19.2"/>
+    <!-- Cabeça (preenchimento interno azul) -->
+    <path fill="#44A5DD" d="M325.1,135.4c0.1,30-23.9,54.1-53.7,54.3c-29.8,0.1-54.3-24-54.4-53.7c-0.1-30,24.2-54.6,54.1-54.6
+      C300.8,81.4,325,105.6,325.1,135.4z"/>
+  </svg>
+`.trim();
+class CognitvsA11yWidget extends HTMLElement {
+  constructor() {
+    super();
+    __publicField(this, "shadow");
+    __publicField(this, "store");
+    __publicField(this, "domEffects");
+    __publicField(this, "tts");
+    __publicField(this, "cursorMagnet");
+    __publicField(this, "scrollAssist");
+    __publicField(this, "vlibras");
+    __publicField(this, "unsubscribe", null);
+    __publicField(this, "tourTimeoutId", null);
+    __publicField(this, "resizeRafId", null);
+    __publicField(this, "onViewportChange", () => {
+      if (this.resizeRafId) {
+        cancelAnimationFrame(this.resizeRafId);
+      }
+      this.resizeRafId = requestAnimationFrame(() => {
+        this.updatePanelDimensions();
+      });
+    });
+    this.shadow = this.attachShadow({ mode: "open" });
+    const prefix = this.getAttribute("storage-prefix") || "cognitvs";
+    this.store = new A11yStore(prefix);
+    this.domEffects = new DomEffectsManager();
+    this.tts = new TTSController((node) => this.contains(node) || this.shadow.contains(node));
+    this.cursorMagnet = new CursorMagnetController();
+    this.scrollAssist = new ScrollAssistController();
+    this.vlibras = new VLibrasController();
+  }
+  static get observedAttributes() {
+    return ["theme", "accent-color", "position", "storage-prefix", "show-banner"];
+  }
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (oldValue === newValue) return;
+    if (name === "accent-color" && newValue) {
+      this.style.setProperty("--a11y-primary", newValue);
+    }
+  }
+  connectedCallback() {
+    this.injectGlobalStyles();
+    this.renderInitialShadow();
+    window.addEventListener("resize", this.onViewportChange, { passive: true });
+    window.addEventListener("scroll", this.onViewportChange, { passive: true });
+    const state = this.store.getState();
+    if (!state.hasInteracted) {
+      this.tourTimeoutId = window.setTimeout(() => {
+        if (!this.store.getState().isExpanded && !this.store.getState().hasInteracted) {
+          this.store.update({ showAttentionGrabber: true });
+        }
+      }, 3500);
+    }
+    this.unsubscribe = this.store.subscribe((currState) => {
+      this.domEffects.applyGlobalState(currState);
+      this.tts.update(currState.isTTSActive, currState.ttsRate);
+      this.cursorMagnet.update(currState.isCursorMagnetActive, currState.cursorMagnetForce, currState.isBigCursor);
+      this.scrollAssist.update(currState.isScrollAssistActive);
+      this.vlibras.update(currState.isVLibrasActive);
+      this.updateShadowUI(currState);
+    });
+    requestAnimationFrame(() => this.updatePanelDimensions());
+    setTimeout(() => this.updatePanelDimensions(), 50);
+    setTimeout(() => this.updatePanelDimensions(), 250);
+  }
+  disconnectedCallback() {
+    window.removeEventListener("resize", this.onViewportChange);
+    window.removeEventListener("scroll", this.onViewportChange);
+    if (this.resizeRafId) {
+      cancelAnimationFrame(this.resizeRafId);
+    }
+    document.body.classList.remove("a11y-banner-active");
+    if (this.unsubscribe) {
+      this.unsubscribe();
+      this.unsubscribe = null;
+    }
+    if (this.tourTimeoutId) {
+      clearTimeout(this.tourTimeoutId);
+    }
+    this.domEffects.destroy();
+    this.tts.destroy();
+    this.cursorMagnet.destroy();
+    this.scrollAssist.destroy();
+    this.vlibras.destroy();
+  }
+  injectGlobalStyles() {
+    const styleId = "cognitvs-a11y-global-styles";
+    if (!document.getElementById(styleId)) {
+      const style = document.createElement("style");
+      style.id = styleId;
+      style.textContent = globalCss;
+      document.head.appendChild(style);
+    }
+  }
+  renderInitialShadow() {
+    const showBanner = this.getAttribute("show-banner") !== "false";
+    const accent = this.getAttribute("accent-color");
+    if (accent) {
+      this.style.setProperty("--a11y-primary", accent);
+    }
+    this.shadow.innerHTML = `
+      <style>${widgetCss}</style>
+      ${showBanner ? `
+        <div id="a11y-top-banner" class="a11y-top-banner" role="banner">
+          <div class="a11y-banner-content">
+            <span class="a11y-banner-icon" aria-hidden="true">
+              ${A11Y_ICON_SVG(26)}
+            </span>
+            <p class="a11y-banner-text">
+              <strong>Acessibilidade:</strong> Personalize sua navegação clicando no botão no canto da tela.
+            </p>
+          </div>
+          <button id="banner-close-btn" class="a11y-banner-close" aria-label="Dispensar aviso de acessibilidade">✕</button>
+        </div>
+      ` : ""}
+
+      <div class="a11y-widget-root">
+        <!-- Painel Expansível -->
+        <div id="a11y-panel" class="a11y-panel closed" role="region" aria-label="Painel de Ferramentas de Acessibilidade">
+          <div class="a11y-panel-header">
+            <div class="a11y-panel-title">
+              ${A11Y_ICON_SVG(18)}
+              ACESSIBILIDADE
+            </div>
+            <button id="panel-close-btn" class="a11y-btn-mini" style="flex:0; width:28px; padding:4px;" aria-label="Fechar painel">✕</button>
+          </div>
+
+          <div>
+            <label class="a11y-section-title" for="profile-select">Perfil Assistivo</label>
+            <select id="profile-select" class="a11y-profile-select">
+              <option value="all">Ver Todos os Recursos</option>
+              <option value="vision">👁️ Visão Reduzida</option>
+              <option value="hearing">🧏 Audição / Surdez</option>
+              <option value="motor">🎯 Dificuldade Motora</option>
+              <option value="cognitive">🧠 TDAH e Foco</option>
+            </select>
+          </div>
+
+          <div id="a11y-feature-container"></div>
+
+          <button id="reset-btn" class="a11y-reset-btn">Resetar Preferências</button>
+        </div>
+
+        <!-- Botão Flutuante e Dica -->
+        <div class="a11y-fab-wrapper">
+          <div id="tour-bubble" class="a11y-tour-bubble" style="display: none;">
+            <span style="font-size: 20px;">👋</span>
+            <p style="font-size: 11px; font-weight: bold; line-height: 1.3;">Dificuldade para navegar? Clique aqui!</p>
+          </div>
+          <div id="ping-ring" class="a11y-ping-ring" style="display: none;"></div>
+
+          <button id="fab-btn" class="a11y-fab" aria-label="Abrir recursos de acessibilidade" aria-haspopup="true">
+            ${A11Y_ICON_SVG(34)}
+          </button>
+        </div>
+      </div>
+    `;
+    this.bindEvents();
+  }
+  bindEvents() {
+    const fabBtn = this.shadow.querySelector("#fab-btn");
+    const panelCloseBtn = this.shadow.querySelector("#panel-close-btn");
+    const bannerCloseBtn = this.shadow.querySelector("#banner-close-btn");
+    const tourBubble = this.shadow.querySelector("#tour-bubble");
+    const resetBtn = this.shadow.querySelector("#reset-btn");
+    const profileSelect = this.shadow.querySelector("#profile-select");
+    fabBtn == null ? void 0 : fabBtn.addEventListener("click", () => this.store.toggleExpanded());
+    panelCloseBtn == null ? void 0 : panelCloseBtn.addEventListener("click", () => this.store.toggleExpanded());
+    tourBubble == null ? void 0 : tourBubble.addEventListener("click", () => this.store.toggleExpanded());
+    bannerCloseBtn == null ? void 0 : bannerCloseBtn.addEventListener("click", () => this.store.dismissBanner());
+    resetBtn == null ? void 0 : resetBtn.addEventListener("click", () => this.store.resetAll());
+    profileSelect == null ? void 0 : profileSelect.addEventListener("change", (e) => {
+      const val = e.target.value;
+      this.store.setActiveProfile(val);
+    });
+  }
+  updateShadowUI(state) {
+    const banner = this.shadow.querySelector("#a11y-top-banner");
+    if (banner) {
+      if (state.bannerDismissed) {
+        banner.classList.add("hidden");
+        document.body.classList.remove("a11y-banner-active");
+        document.documentElement.style.setProperty("--a11y-top-banner-height", "0px");
+      } else {
+        banner.classList.remove("hidden");
+        document.body.classList.add("a11y-banner-active");
+      }
+    }
+    const panel = this.shadow.querySelector("#a11y-panel");
+    const fab = this.shadow.querySelector("#fab-btn");
+    if (panel) {
+      if (state.isExpanded) {
+        panel.classList.remove("closed");
+      } else {
+        panel.classList.add("closed");
+      }
+    }
+    if (fab) {
+      fab.innerHTML = state.isExpanded ? `<span style="font-size:24px; font-weight:900;">✕</span>` : A11Y_ICON_SVG(34);
+    }
+    const tourBubble = this.shadow.querySelector("#tour-bubble");
+    const pingRing = this.shadow.querySelector("#ping-ring");
+    if (tourBubble) tourBubble.style.display = state.showAttentionGrabber ? "flex" : "none";
+    if (pingRing) pingRing.style.display = state.showAttentionGrabber ? "block" : "none";
+    const profileSelect = this.shadow.querySelector("#profile-select");
+    if (profileSelect && profileSelect.value !== state.activeProfile) {
+      profileSelect.value = state.activeProfile;
+    }
+    this.renderFeatureButtons(state);
+    this.updatePanelDimensions();
+  }
+  updatePanelDimensions() {
+    const panel = this.shadow.querySelector("#a11y-panel");
+    const banner = this.shadow.querySelector("#a11y-top-banner");
+    const root = this.shadow.querySelector(".a11y-widget-root");
+    if (!panel || !root) return;
+    let bannerHeight = 0;
+    const isBannerDismissed = this.store.getState().bannerDismissed;
+    if (banner && !isBannerDismissed) {
+      bannerHeight = banner.getBoundingClientRect().height || banner.offsetHeight || 0;
+    }
+    document.documentElement.style.setProperty("--a11y-top-banner-height", `${bannerHeight}px`);
+    if (bannerHeight > 0) {
+      document.body.classList.add("a11y-banner-active");
+    } else {
+      document.body.classList.remove("a11y-banner-active");
+    }
+    let hostHeaderBottom = 0;
+    const customHeaderH = parseFloat(
+      getComputedStyle(document.documentElement).getPropertyValue("--a11y-header-height") || "0"
+    );
+    if (customHeaderH > 0) {
+      hostHeaderBottom = customHeaderH;
+    } else {
+      const candidates = document.querySelectorAll(
+        'header, nav, [role="banner"], .header, .site-header, .navbar, .top-bar'
+      );
+      for (const el of candidates) {
+        const style = window.getComputedStyle(el);
+        if (style.position === "fixed" || style.position === "sticky") {
+          const rect = el.getBoundingClientRect();
+          if (rect.top <= 10 && rect.bottom > hostHeaderBottom && rect.bottom < window.innerHeight * 0.45) {
+            hostHeaderBottom = rect.bottom;
+          }
+        }
+      }
+    }
+    const rootRect = root.getBoundingClientRect();
+    const bottomDist = Math.max(0, window.innerHeight - rootRect.bottom);
+    const fabWrapper = this.shadow.querySelector(".a11y-fab-wrapper");
+    const fabHeight = fabWrapper ? fabWrapper.offsetHeight : 56;
+    const gap = 12;
+    const PANEL_TOP_MARGIN = 24;
+    const topObstacle = Math.max(bannerHeight, hostHeaderBottom);
+    const totalTopReserved = topObstacle + PANEL_TOP_MARGIN;
+    const availableHeight = window.innerHeight - totalTopReserved - bottomDist - fabHeight - gap;
+    const finalMaxHeight = Math.max(160, Math.floor(availableHeight));
+    panel.style.setProperty("--fab-panel-max-height", `${finalMaxHeight}px`);
+    if (this.store.getState().isExpanded) {
+      panel.style.maxHeight = `${finalMaxHeight}px`;
+    } else {
+      panel.style.maxHeight = "0px";
+    }
+  }
+  renderFeatureButtons(state) {
+    const container = this.shadow.querySelector("#a11y-feature-container");
+    if (!container) return;
+    const p = state.activeProfile;
+    let html = "";
+    if (["all", "vision", "cognitive"].includes(p)) {
+      html += `<div class="a11y-section-title">Ajustes Visuais</div>`;
+      html += `
+        <div class="a11y-scale-box">
+          <button id="btn-scale-down" class="a11y-scale-btn" aria-label="Diminuir texto">A-</button>
+          <span class="a11y-scale-val">${Math.round(state.fontScale * 100)}%</span>
+          <button id="btn-scale-up" class="a11y-scale-btn" aria-label="Aumentar texto">A+</button>
+        </div>
+      `;
+      html += `
+        <button id="btn-contrast" class="a11y-btn ${state.isHighContrast ? "active" : ""}">
+          <span>${state.isHighContrast ? "☀️" : "👁️"}</span>
+          <span>${state.isHighContrast ? "Contraste Ativo" : "Alto Contraste"}</span>
+        </button>
+      `;
+      html += `
+        <div style="display:flex; flex-direction:column; gap:4px; margin-top:4px;">
+          <button id="btn-mask" class="a11y-btn ${state.isReadingMaskActive ? "active" : ""}">
+            <span>${state.isReadingMaskActive ? "📖" : "📏"}</span>
+            <span>${state.isReadingMaskActive ? "Máscara Ativa" : "Máscara de Leitura"}</span>
+          </button>
+          ${state.isReadingMaskActive ? `
+            <div class="a11y-btn-group" style="padding-left:4px;">
+              <button id="mask-mode-smart" class="a11y-btn-mini ${state.isReadingMaskSmart ? "active" : ""}">🧠 Inteligente</button>
+              <button id="mask-mode-free" class="a11y-btn-mini ${!state.isReadingMaskSmart ? "active" : ""}">🆓 Livre</button>
+            </div>
+          ` : ""}
+        </div>
+      `;
+      html += `
+        <div style="display:flex; flex-direction:column; gap:4px; margin-top:4px;">
+          <label class="a11y-section-title" style="margin:0;">Filtros de Daltonismo</label>
+          <select id="select-daltonism" class="a11y-profile-select">
+            <option value="none" ${state.colorBlindMode === "none" ? "selected" : ""}>Padrão (Desativado)</option>
+            <option value="protanopia" ${state.colorBlindMode === "protanopia" ? "selected" : ""}>Protanopia</option>
+            <option value="deuteranopia" ${state.colorBlindMode === "deuteranopia" ? "selected" : ""}>Deuteranopia</option>
+            <option value="tritanopia" ${state.colorBlindMode === "tritanopia" ? "selected" : ""}>Tritanopia</option>
+            <option value="monochromacy" ${state.colorBlindMode === "monochromacy" ? "selected" : ""}>Monocromia</option>
+          </select>
+        </div>
+      `;
+    }
+    if (["all", "hearing", "cognitive"].includes(p)) {
+      html += `<div class="a11y-section-title">Audição e Leitura</div>`;
+      html += `
+        <div style="display:flex; flex-direction:column; gap:4px;">
+          <button id="btn-tts" class="a11y-btn ${state.isTTSActive ? "active" : ""}">
+            <span>${state.isTTSActive ? "🔊" : "🔈"}</span>
+            <span>${state.isTTSActive ? "Leitor Ativo (Clique no Texto)" : "Leitor de Tela"}</span>
+          </button>
+          ${state.isTTSActive ? `
+            <div class="a11y-btn-group">
+              <button id="tts-rate-05" class="a11y-btn-mini ${state.ttsRate === 0.5 ? "active" : ""}">🐢 0.5x</button>
+              <button id="tts-rate-1" class="a11y-btn-mini ${state.ttsRate === 1 ? "active" : ""}">🚶 1.0x</button>
+              <button id="tts-rate-15" class="a11y-btn-mini ${state.ttsRate === 1.5 ? "active" : ""}">🐇 1.5x</button>
+            </div>
+          ` : ""}
+        </div>
+      `;
+      html += `
+        <button id="btn-vlibras" class="a11y-btn ${state.isVLibrasActive ? "active" : ""}">
+          <span>${state.isVLibrasActive ? "🤟" : "👐"}</span>
+          <span>${state.isVLibrasActive ? "LIBRAS Ativo" : "Tradutor LIBRAS"}</span>
+        </button>
+      `;
+    }
+    if (["all", "motor", "vision"].includes(p)) {
+      html += `<div class="a11y-section-title">Interação e Mobilidade</div>`;
+      html += `
+        <button id="btn-big-cursor" class="a11y-btn ${state.isBigCursor ? "active" : ""}">
+          <span>${state.isBigCursor ? "↖️" : "🖱️"}</span>
+          <span>${state.isBigCursor ? "Ponteiro Gigante Ativo" : "Ponteiro Gigante"}</span>
+        </button>
+      `;
+      html += `
+        <button id="btn-keyboard-focus" class="a11y-btn ${state.isKeyboardFocus ? "active" : ""}">
+          <span>${state.isKeyboardFocus ? "🎯" : "⌨️"}</span>
+          <span>${state.isKeyboardFocus ? "Foco Teclado Ativo" : "Foco por Teclado"}</span>
+        </button>
+      `;
+      html += `
+        <button id="btn-scroll-assist" class="a11y-btn ${state.isScrollAssistActive ? "active" : ""}">
+          <span>${state.isScrollAssistActive ? "↕️" : "🖱️"}</span>
+          <span>${state.isScrollAssistActive ? "Rolagem Assistida Ativa" : "Rolagem Assistida"}</span>
+        </button>
+      `;
+      html += `
+        <div style="display:flex; flex-direction:column; gap:4px;">
+          <button id="btn-cursor-magnet" class="a11y-btn ${state.isCursorMagnetActive ? "active" : ""}">
+            <span>🧲</span>
+            <span>${state.isCursorMagnetActive ? "Ímã de Cursor Ativo" : "Ímã de Cursor"}</span>
+          </button>
+          ${state.isCursorMagnetActive ? `
+            <div class="a11y-btn-group">
+              <button id="magnet-force-suave" class="a11y-btn-mini ${state.cursorMagnetForce === "suave" ? "active" : ""}">🪶 Suave</button>
+              <button id="magnet-force-forte" class="a11y-btn-mini ${state.cursorMagnetForce === "forte" ? "active" : ""}">🧲 Forte</button>
+            </div>
+          ` : ""}
+        </div>
+      `;
+      html += `
+        <button id="btn-highlight-links" class="a11y-btn ${state.isHighlightLinks ? "active" : ""}">
+          <span>🔗</span>
+          <span>${state.isHighlightLinks ? "Links Destacados" : "Destacar Links"}</span>
+        </button>
+      `;
+    }
+    if (["all", "cognitive"].includes(p)) {
+      html += `<div class="a11y-section-title">Ajustes Cognitivos</div>`;
+      html += `
+        <button id="btn-reduce-motion" class="a11y-btn ${state.isReduceMotion ? "active" : ""}">
+          <span>${state.isReduceMotion ? "⏸️" : "✨"}</span>
+          <span>${state.isReduceMotion ? "Animações Pausadas" : "Pausar Animações"}</span>
+        </button>
+      `;
+      html += `
+        <button id="btn-dyslexia" class="a11y-btn ${state.isDyslexiaMode ? "active" : ""}">
+          <span>${state.isDyslexiaMode ? "📖" : "🅰️"}</span>
+          <span>${state.isDyslexiaMode ? "Fonte Dislexia Ativa" : "Ajuste para Dislexia"}</span>
+        </button>
+      `;
+      html += `
+        <div style="display:flex; flex-direction:column; gap:4px;">
+          <label class="a11y-section-title" style="margin:0;">Espaçamento de Texto</label>
+          <div class="a11y-btn-group">
+            <button id="spacing-0" class="a11y-btn-mini ${state.textSpacingLevel === 0 ? "active" : ""}">Padrão</button>
+            <button id="spacing-1" class="a11y-btn-mini ${state.textSpacingLevel === 1 ? "active" : ""}">Espaçado</button>
+            <button id="spacing-2" class="a11y-btn-mini ${state.textSpacingLevel === 2 ? "active" : ""}">Largo</button>
+          </div>
+        </div>
+      `;
+    }
+    container.innerHTML = html;
+    this.bindFeatureButtons();
+  }
+  bindFeatureButtons() {
+    var _a;
+    const bind = (id, fn) => {
+      var _a2;
+      (_a2 = this.shadow.querySelector(`#${id}`)) == null ? void 0 : _a2.addEventListener("click", fn);
+    };
+    bind("btn-scale-down", () => this.store.updateFontScale(-0.1));
+    bind("btn-scale-up", () => this.store.updateFontScale(0.1));
+    bind("btn-contrast", () => this.store.toggleHighContrast());
+    bind("btn-mask", () => this.store.toggleReadingMask());
+    bind("mask-mode-smart", () => this.store.setReadingMaskSmart(true));
+    bind("mask-mode-free", () => this.store.setReadingMaskSmart(false));
+    bind("btn-tts", () => this.store.toggleTTS());
+    bind("tts-rate-05", () => this.store.setTTSRate(0.5));
+    bind("tts-rate-1", () => this.store.setTTSRate(1));
+    bind("tts-rate-15", () => this.store.setTTSRate(1.5));
+    bind("btn-vlibras", () => this.store.toggleVLibras());
+    bind("btn-big-cursor", () => this.store.toggleBigCursor());
+    bind("btn-keyboard-focus", () => this.store.toggleKeyboardFocus());
+    bind("btn-scroll-assist", () => this.store.toggleScrollAssist());
+    bind("btn-cursor-magnet", () => this.store.toggleCursorMagnet());
+    bind("magnet-force-suave", () => this.store.setCursorMagnetForce("suave"));
+    bind("magnet-force-forte", () => this.store.setCursorMagnetForce("forte"));
+    bind("btn-highlight-links", () => this.store.toggleHighlightLinks());
+    bind("btn-reduce-motion", () => this.store.toggleReduceMotion());
+    bind("btn-dyslexia", () => this.store.toggleDyslexia());
+    bind("spacing-0", () => this.store.setTextSpacing(0));
+    bind("spacing-1", () => this.store.setTextSpacing(1));
+    bind("spacing-2", () => this.store.setTextSpacing(2));
+    (_a = this.shadow.querySelector("#select-daltonism")) == null ? void 0 : _a.addEventListener("change", (e) => {
+      const val = e.target.value;
+      this.store.setColorBlindMode(val);
+    });
+  }
+}
+if (typeof window !== "undefined" && !customElements.get("cognitvs-a11y")) {
+  customElements.define("cognitvs-a11y", CognitvsA11yWidget);
+}
+export {
+  A11yStore,
+  CognitvsA11yWidget,
+  CognitvsA11yWidget as default
+};
+//# sourceMappingURL=a11y-widget.js.map