accessify-widget 0.3.69 → 0.3.71

package/dist/accessify.mjs

@@ -1,4 +1,4 @@
-import { d, i } from "./index-C_npcTE4.js";
+import { d, i } from "./index-DLo9u9kS.js";
 export {
   d as destroy,
   i as init

package/dist/{index-C_npcTE4.js → index-DLo9u9kS.js}

@@ -6642,16 +6642,16 @@ function FeatureGrid($$anchor, $$props) {
   const FEATURE_LOADERS = {
     contrast: () => import("./contrast-CqsOs6Uo.js"),
     "text-size": () => import("./text-size-m_mHNPWo.js"),
-    "keyboard-nav": () => import("./keyboard-nav-CqFJkQl4.js"),
-    "link-highlight": () => import("./link-highlight-DBGm067Y.js"),
-    "reading-guide": () => import("./reading-guide-VT8NciIL.js"),
-    "reading-mask": () => import("./reading-mask-BABChuCz.js"),
+    "keyboard-nav": () => import("./keyboard-nav-C9qVZ3e8.js"),
+    "link-highlight": () => import("./link-highlight-D9gxFmiG.js"),
+    "reading-guide": () => import("./reading-guide-C_jxzorm.js"),
+    "reading-mask": () => import("./reading-mask-B_NxbhTN.js"),
     "animation-stop": () => import("./animation-stop-DrDe9Q9n.js"),
     "hide-images": () => import("./hide-images-B_LeCBcd.js"),
     "big-cursor": () => import("./big-cursor-B2UKu9dQ.js"),
-    "page-structure": () => import("./page-structure-DLdQX4s0.js"),
+    "page-structure": () => import("./page-structure-DL3Xdzlm.js"),
     tts: () => import("./tts-CjszLRnb.js"),
-    "text-simplify": () => import("./text-simplify-oUIixniy.js"),
+    "text-simplify": () => import("./text-simplify-BIFpqadq.js"),
     "alt-text": () => Promise.resolve().then(() => altText)
   };
   let contrastMode = /* @__PURE__ */ state(proxy(readStoredContrastMode()));
@@ -7798,7 +7798,7 @@ function createWidgetStyles(config2) {
       transition: transform var(--fast), box-shadow var(--fast), opacity var(--fast);
       touch-action: none;
     }
-    .accessify-trigger:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(50,60,100,0.6); }
+    .accessify-trigger:hover, .accessify-trigger:active { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(50,60,100,0.6); }
     .accessify-trigger:active { transform: scale(0.96); }
     .accessify-trigger--hidden { opacity:0; pointer-events:none; transform:scale(0.9); }
     .accessify-trigger svg { width: 26px; height: 26px; }
@@ -7851,7 +7851,7 @@ function createWidgetStyles(config2) {
       background: var(--surface); color: var(--text-dim);
       cursor: pointer; transition: background var(--fast), color var(--fast);
     }
-    .accessify-header-btn:hover { background: var(--surface-hover); color: var(--text); }
+    .accessify-header-btn:hover, .accessify-header-btn:active { background: var(--surface-hover); color: var(--text); }
     .accessify-header-btn svg { width: 16px; height: 16px; }
     .accessify-header-btn--icon { padding: 0; }
     .accessify-header-btn--close { background: transparent; border-color: transparent; }
@@ -7880,8 +7880,8 @@ function createWidgetStyles(config2) {
       font-size: 15px; font-weight: 700;
       transition: background var(--fast);
     }
-    .accessify-lang-toggle:hover,
-    .accessify-accordion-toggle:hover { background: var(--surface-hover); }
+    .accessify-lang-toggle:hover, .accessify-lang-toggle:active,
+    .accessify-accordion-toggle:hover, .accessify-accordion-toggle:active { background: var(--surface-hover); }
 
     .accessify-lang-toggle-left,
     .accessify-accordion-toggle-left {
@@ -7921,7 +7921,7 @@ function createWidgetStyles(config2) {
       transition: background var(--fast);
       min-height: 44px;
     }
-    .accessify-lang-option:hover { background: var(--surface-hover); }
+    .accessify-lang-option:hover, .accessify-lang-option:active { background: var(--surface-hover); }
     .accessify-lang-option[data-active="true"] { color: var(--accent); font-weight: 700; }
     .accessify-lang-option svg { width: 18px; height: 18px; color: var(--accent); flex-shrink: 0; }
 
@@ -7934,7 +7934,7 @@ function createWidgetStyles(config2) {
       font-family: inherit; text-align: left;
       transition: background var(--fast);
     }
-    .accessify-accordion-option:hover { background: var(--surface-hover); }
+    .accessify-accordion-option:hover, .accessify-accordion-option:active { background: var(--surface-hover); }
     .accessify-accordion-option[data-active="true"] { background: var(--accent-soft); }
 
     .accessify-accordion-option-left {
@@ -7999,7 +7999,7 @@ function createWidgetStyles(config2) {
       text-align: center; line-height: 1.25;
       transition: background var(--fast), color var(--fast), border-color var(--fast);
     }
-    .accessify-chip:hover { border-color: var(--border-hl); background: var(--surface-hover); }
+    .accessify-chip:hover, .accessify-chip:active { border-color: var(--border-hl); background: var(--surface-hover); }
     .accessify-chip[data-active="true"] {
       background: var(--accent); color: var(--accent-on);
       border-color: var(--accent);
@@ -8031,7 +8031,7 @@ function createWidgetStyles(config2) {
       color: var(--text); cursor: pointer; font-size: 18px; font-weight: 700;
       transition: background var(--fast); font-family: inherit;
     }
-    .accessify-stepper-btn:hover:not(:disabled) { background: var(--surface-hover); }
+    .accessify-stepper-btn:hover:not(:disabled), .accessify-stepper-btn:active:not(:disabled) { background: var(--surface-hover); }
     .accessify-stepper-btn:disabled { opacity: 0.3; cursor: default; }
     .accessify-stepper-value {
       min-width: 48px; text-align: center;
@@ -8057,7 +8057,7 @@ function createWidgetStyles(config2) {
       cursor: pointer; text-align: center; font-family: inherit;
       transition: transform var(--fast), border-color var(--fast), background var(--fast), box-shadow var(--fast);
     }
-    .accessify-card:hover { transform: translateY(-2px); border-color: var(--border-hl); box-shadow: 0 4px 16px rgba(0,0,0,0.15); }
+    .accessify-card:hover, .accessify-card:active { transform: translateY(-2px); border-color: var(--border-hl); box-shadow: 0 4px 16px rgba(0,0,0,0.15); }
     .accessify-card[data-active="true"] { border-color: var(--accent); background: var(--accent-soft); }
     .accessify-card-icon {
       display: inline-flex; align-items: center; justify-content: center;
@@ -8073,10 +8073,10 @@ function createWidgetStyles(config2) {
       display: inline-flex; align-items: center; justify-content: center;
       width: 22px; height: 22px; border-radius: 999px;
       color: var(--text-dim); cursor: help; background: none; border: none;
-      opacity: 0.35; transition: opacity var(--fast), color var(--fast);
+      opacity: 0.5; transition: opacity var(--fast), color var(--fast);
     }
     .accessify-card-info svg { width: 14px; height: 14px; }
-    .accessify-card-info:hover { opacity: 1; color: var(--accent); }
+    .accessify-card-info:hover, .accessify-card-info:active { opacity: 1; color: var(--accent); }
 
     /* ─── Section Divider ─── */
     .accessify-section-divider {
@@ -8099,7 +8099,7 @@ function createWidgetStyles(config2) {
       display: flex; align-items: center; gap: 8px;
     }
     .accessify-footer a { color: var(--accent); text-decoration: none; font-weight: 600; }
-    .accessify-footer a:hover { text-decoration: underline; }
+    .accessify-footer a:hover, .accessify-footer a:active, .accessify-footer a:focus-visible { text-decoration: underline; }
 
     .accessify-footer-close {
       display: inline-flex; align-items: center; gap: 5px;
@@ -8110,7 +8110,7 @@ function createWidgetStyles(config2) {
       transition: background var(--fast), color var(--fast), border-color var(--fast);
       flex-shrink: 0;
     }
-    .accessify-footer-close:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
+    .accessify-footer-close:hover, .accessify-footer-close:active, .accessify-footer-close:focus-visible { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
     .accessify-footer-close svg { width: 14px; height: 14px; flex-shrink: 0; }
 
     /* ─── Reduced Motion ─── */
@@ -8128,6 +8128,11 @@ function createWidgetStyles(config2) {
         ${isRight ? "right: 16px" : "left: 16px"};
         width: 50px; height: 50px; border-radius: 14px;
       }
+      /* WCAG 2.5.8: touch targets ≥ 44px */
+      .accessify-header-btn { width: 44px; height: 44px; }
+      .accessify-stepper-btn { width: 44px; min-height: 44px; }
+      .accessify-stepper { height: 44px; }
+      .accessify-footer-close { min-height: 44px; padding: 8px 16px; }
     }
   `;
 }
@@ -8424,8 +8429,10 @@ function createAltTextModule(aiService, initialLang = "de", serverConfig) {
   const BADGE_ATTR = "data-accessify-badge";
   const WRAPPER_ATTR = "data-accessify-badge-wrap";
   const OVERLAY_ID = "accessify-badge-overlay";
+  const BADGE_STYLE_ID = "accessify-badge-styles";
   let badgePositionRAF = null;
   let trackedBadges = [];
+  let outsideClickHandler = null;
   function getOrCreateOverlay() {
     let overlay = document.getElementById(OVERLAY_ID);
     if (!overlay) {
@@ -8443,6 +8450,18 @@ function createAltTextModule(aiService, initialLang = "de", serverConfig) {
       });
       document.body.appendChild(overlay);
     }
+    if (!document.getElementById(BADGE_STYLE_ID)) {
+      const style = document.createElement("style");
+      style.id = BADGE_STYLE_ID;
+      style.textContent = `
+        [${BADGE_ATTR}="badge"]:hover + [${BADGE_ATTR}="tooltip"] { display: block !important; }
+        [${BADGE_ATTR}="badge"]:hover { background: rgba(0,0,0,0.85) !important; }
+        @media (pointer: coarse) {
+          [${BADGE_ATTR}="badge"] { width: 36px !important; height: 36px !important; line-height: 36px !important; font-size: 16px !important; }
+        }
+      `;
+      document.head.appendChild(style);
+    }
     return overlay;
   }
   function positionBadge(target, badge, tooltip) {
@@ -8475,12 +8494,27 @@ function createAltTextModule(aiService, initialLang = "de", serverConfig) {
       badgePositionRAF = requestAnimationFrame(tick);
     };
     badgePositionRAF = requestAnimationFrame(tick);
+    if (!outsideClickHandler) {
+      outsideClickHandler = (e) => {
+        const target = e.target;
+        if (target.getAttribute(BADGE_ATTR) === "badge") return;
+        for (const entry of trackedBadges) {
+          entry.tooltip.style.display = "none";
+          entry.badge.style.background = "rgba(0,0,0,0.6)";
+        }
+      };
+      document.addEventListener("click", outsideClickHandler, { passive: true });
+    }
   }
   function stopBadgeTracking() {
     if (badgePositionRAF !== null) {
       cancelAnimationFrame(badgePositionRAF);
       badgePositionRAF = null;
     }
+    if (outsideClickHandler) {
+      document.removeEventListener("click", outsideClickHandler);
+      outsideClickHandler = null;
+    }
   }
   function addInfoBadge(target, altText2) {
     if (target.getAttribute(BADGE_ATTR)) return;
@@ -8531,13 +8565,16 @@ function createAltTextModule(aiService, initialLang = "de", serverConfig) {
     tooltip.setAttribute("translate", "no");
     tooltip.classList.add("notranslate");
     tooltip.setAttribute(BADGE_ATTR, "tooltip");
-    badge.addEventListener("mouseenter", () => {
-      badge.style.background = "rgba(0,0,0,0.85)";
-      tooltip.style.display = "block";
-    });
-    badge.addEventListener("mouseleave", () => {
-      badge.style.background = "rgba(0,0,0,0.6)";
-      tooltip.style.display = "none";
+    badge.addEventListener("click", () => {
+      const isOpen = tooltip.style.display === "block";
+      for (const entry of trackedBadges) {
+        entry.tooltip.style.display = "none";
+        entry.badge.style.background = "rgba(0,0,0,0.6)";
+      }
+      if (!isOpen) {
+        badge.style.background = "rgba(0,0,0,0.85)";
+        tooltip.style.display = "block";
+      }
     });
     overlay.appendChild(badge);
     overlay.appendChild(tooltip);
@@ -8548,6 +8585,7 @@ function createAltTextModule(aiService, initialLang = "de", serverConfig) {
     stopBadgeTracking();
     trackedBadges = [];
     document.getElementById(OVERLAY_ID)?.remove();
+    document.getElementById(BADGE_STYLE_ID)?.remove();
     document.querySelectorAll(`[${BADGE_ATTR}]`).forEach((el) => el.removeAttribute(BADGE_ATTR));
     document.querySelectorAll(`[${WRAPPER_ATTR}]`).forEach((wrapper) => {
       const img = wrapper.querySelector("img");
@@ -9061,4 +9099,4 @@ export {
   init as i,
   t
 };
-//# sourceMappingURL=index-C_npcTE4.js.map
+//# sourceMappingURL=index-DLo9u9kS.js.map