accessify-widget 0.3.11 → 0.3.13

package/dist/accessify.mjs

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

package/dist/{index-CK-JGSFG.js → index-CWccrgpi.js}

@@ -76,6 +76,10 @@ const STALE_REACTION = new class StaleReactionError extends Error {
     __publicField(this, "message", "The reaction that called `getAbortSignal()` was re-run or destroyed");
   }
 }();
+const IS_XHTML = (
+  // We gotta write it like this because after downleveling the pure comment may end up in the wrong location
+  !!globalThis.document?.contentType && /* @__PURE__ */ globalThis.document.contentType.includes("xml")
+);
 function invariant_violation(message) {
   if (DEV) {
     const error = new Error(`invariant_violation
@@ -4289,6 +4293,17 @@ function set_style(dom, value, prev_styles, next_styles) {
 }
 const IS_CUSTOM_ELEMENT = Symbol("is custom element");
 const IS_HTML = Symbol("is html");
+const PROGRESS_TAG = IS_XHTML ? "progress" : "PROGRESS";
+function set_value(element, value) {
+  var attributes = get_attributes(element);
+  if (attributes.value === (attributes.value = // treat null and undefined the same for the initial value
+  value ?? void 0) || // @ts-expect-error
+  // `progress` elements always need their value set when it's `0`
+  element.value === value && (value !== 0 || element.nodeName !== PROGRESS_TAG)) {
+    return;
+  }
+  element.value = value ?? "";
+}
 function set_attribute(element, attribute, value, skip_warning) {
   var attributes = get_attributes(element);
   if (attributes[attribute] === (attributes[attribute] = value)) return;
@@ -4754,7 +4769,7 @@ const deJson = {
   "profile.adhdFriendly.desc": "Ablenkungen reduzieren und Fokus verbessern",
   "feature.contrast": "Kontrast",
   "feature.contrast.desc": "Kontrast erhöhen für bessere Lesbarkeit",
-  "feature.textSize": "Größerer Text",
+  "feature.textSize": "Textgröße",
   "feature.textSize.desc": "Text vergrößern oder verkleinern",
   "feature.spacing": "Textabstand",
   "feature.spacing.desc": "Abstände zwischen Buchstaben und Zeilen anpassen",
@@ -4843,7 +4858,7 @@ const enJson = {
   "profile.adhdFriendly.desc": "Reduce distractions and improve focus",
   "feature.contrast": "Contrast",
   "feature.contrast.desc": "Increase contrast for better readability",
-  "feature.textSize": "Bigger Text",
+  "feature.textSize": "Text Size",
   "feature.textSize.desc": "Increase or decrease text size",
   "feature.spacing": "Text Spacing",
   "feature.spacing.desc": "Adjust letter and line spacing",
@@ -6325,7 +6340,7 @@ Return ONLY the simplified text.`;
 }
 var root_2$1 = /* @__PURE__ */ from_html(`<button class="accessify-chip accessify-chip--icon"><span class="accessify-chip-icon" aria-hidden="true"></span> <span> </span></button>`);
 var root_1$2 = /* @__PURE__ */ from_html(`<div class="accessify-control-row" role="group"><div class="accessify-control-label"><span class="accessify-control-label-icon" aria-hidden="true"></span> <span class="accessify-control-label-text"> </span></div> <div class="accessify-chip-row"></div></div>`);
-var root_3$1 = /* @__PURE__ */ from_html(`<div class="accessify-control-row" role="group"><div class="accessify-control-label"><span class="accessify-control-label-icon" aria-hidden="true"></span> <span class="accessify-control-label-text"> </span></div> <div class="accessify-stepper"><button class="accessify-stepper-btn" aria-label="Decrease text size">−</button> <span class="accessify-stepper-value" aria-live="polite"> </span> <button class="accessify-stepper-btn" aria-label="Increase text size">+</button></div></div>`);
+var root_3$1 = /* @__PURE__ */ from_html(`<div class="accessify-control-row" role="group"><div class="accessify-control-label"><span class="accessify-control-label-icon" aria-hidden="true"></span> <span class="accessify-control-label-text"> </span></div> <div class="accessify-slider-wrap"><button class="accessify-stepper-btn" aria-label="Decrease text size">−</button> <input type="range" class="accessify-slider"/> <button class="accessify-stepper-btn" aria-label="Increase text size">+</button> <span class="accessify-stepper-value" aria-live="polite"> </span></div></div>`);
 var root_5 = /* @__PURE__ */ from_html(`<div class="accessify-card-wrap"><button class="accessify-card" role="switch"><span class="accessify-card-icon" aria-hidden="true"></span> <span class="accessify-card-label"> </span></button> <span class="accessify-card-info" tabindex="0"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg> <span class="accessify-card-tooltip"> </span></span></div>`);
 var root_4 = /* @__PURE__ */ from_html(`<div class="accessify-features"></div>`);
 var root$2 = /* @__PURE__ */ from_html(`<!> <!> <div class="accessify-section-divider"></div> <!>`, 1);
@@ -6425,22 +6440,22 @@ function FeatureGrid($$anchor, $$props) {
       icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 2v20"/><path d="M12 2a10 10 0 0 1 0 20" fill="currentColor"/></svg>'
     }
   ];
-  const TEXT_SIZE_MIN = 100;
+  const TEXT_SIZE_MIN = 75;
   const TEXT_SIZE_MAX = 200;
-  const TEXT_SIZE_STEP = 10;
+  const TEXT_SIZE_STEP = 5;
   const AI_FEATURES = /* @__PURE__ */ new Set(["text-simplify", "alt-text"]);
   const loadedModules = /* @__PURE__ */ new Map();
   const FEATURE_LOADERS = {
     contrast: () => import("./contrast-CqsICAkU.js"),
-    "text-size": () => import("./text-size-C6OFhCGi.js"),
-    "keyboard-nav": () => import("./keyboard-nav-BK_UYLtc.js"),
+    "text-size": () => import("./text-size-m_mHNPWo.js"),
+    "keyboard-nav": () => import("./keyboard-nav-DX2xdXSe.js"),
     "link-highlight": () => import("./link-highlight-DBGm067Y.js"),
     "reading-guide": () => import("./reading-guide-VT8NciIL.js"),
     "reading-mask": () => import("./reading-mask-BABChuCz.js"),
     "animation-stop": () => import("./animation-stop-C0MwseK0.js"),
     "hide-images": () => import("./hide-images-B_LeCBcd.js"),
     "big-cursor": () => import("./big-cursor-B2UKu9dQ.js"),
-    "page-structure": () => import("./page-structure-C7f5kvRE.js"),
+    "page-structure": () => import("./page-structure-tjDPoRal.js"),
     tts: () => import("./tts-CjszLRnb.js"),
     "text-simplify": () => import("./text-simplify-Cvhpio7g.js"),
     "alt-text": () => Promise.resolve().then(() => altText)
@@ -6485,6 +6500,7 @@ function FeatureGrid($$anchor, $$props) {
     }
     if (id === "text-size") {
       set(textSize, typeof state2.value === "number" ? state2.value : 100, true);
+      $$props.ontextsize?.(get(textSize));
     }
   }
   function handleReset() {
@@ -6496,6 +6512,7 @@ function FeatureGrid($$anchor, $$props) {
     }
     set(contrastMode, "off");
     set(textSize, 100);
+    $$props.ontextsize?.(100);
   }
   if (typeof window !== "undefined") {
     window.addEventListener("accessify:reset", handleReset);
@@ -6568,12 +6585,14 @@ function FeatureGrid($$anchor, $$props) {
       module.deactivate();
       set(textSize, 100);
       $$props.ontoggle("text-size", false);
+      $$props.ontextsize?.(100);
       return;
     }
     if (!module.getState().enabled) module.activate();
     module.setState?.(value);
     set(textSize, value, true);
     $$props.ontoggle("text-size", true);
+    $$props.ontextsize?.(value);
   }
   let visualFeatures = /* @__PURE__ */ user_derived(() => getVisibleFeatures(VISUAL_IDS));
   let readingFeatures = /* @__PURE__ */ user_derived(() => getVisibleFeatures(READING_IDS));
@@ -6638,23 +6657,35 @@ function FeatureGrid($$anchor, $$props) {
       var text_2 = child(span_5);
       var div_5 = sibling(div_4, 2);
       var button_1 = child(div_5);
-      var span_6 = sibling(button_1, 2);
+      var input = sibling(button_1, 2);
+      set_attribute(input, "min", TEXT_SIZE_MIN);
+      set_attribute(input, "max", TEXT_SIZE_MAX);
+      set_attribute(input, "step", TEXT_SIZE_STEP);
+      set_attribute(input, "aria-valuemin", TEXT_SIZE_MIN);
+      set_attribute(input, "aria-valuemax", TEXT_SIZE_MAX);
+      var button_2 = sibling(input, 2);
+      var span_6 = sibling(button_2, 2);
       var text_3 = child(span_6);
-      var button_2 = sibling(span_6, 2);
       template_effect(
-        ($0, $1) => {
+        ($0, $1, $2) => {
           set_attribute(div_3, "aria-label", $0);
           set_text(text_2, $1);
           button_1.disabled = get(textSize) <= TEXT_SIZE_MIN;
-          set_text(text_3, `${get(textSize) ?? ""}%`);
+          set_value(input, get(textSize));
+          set_attribute(input, "aria-label", $2);
+          set_attribute(input, "aria-valuenow", get(textSize));
+          set_attribute(input, "aria-valuetext", `${get(textSize) ?? ""}%`);
           button_2.disabled = get(textSize) >= TEXT_SIZE_MAX;
+          set_text(text_3, `${get(textSize) ?? ""}%`);
         },
         [
+          () => t("feature.textSize", $$props.config.lang),
           () => t("feature.textSize", $$props.config.lang),
           () => t("feature.textSize", $$props.config.lang)
         ]
       );
       delegated("click", button_1, () => setTextSize(Math.max(TEXT_SIZE_MIN, get(textSize) - TEXT_SIZE_STEP)));
+      delegated("input", input, (e) => setTextSize(Number(e.target.value)));
       delegated("click", button_2, () => setTextSize(Math.min(TEXT_SIZE_MAX, get(textSize) + TEXT_SIZE_STEP)));
       append($$anchor2, div_3);
     };
@@ -6716,7 +6747,7 @@ function FeatureGrid($$anchor, $$props) {
   append($$anchor, fragment);
   pop();
 }
-delegate(["click"]);
+delegate(["click", "input"]);
 var root_1$1 = /* @__PURE__ */ from_html(`<span aria-hidden="true">&middot;</span> <a target="_blank" rel="noopener noreferrer"> </a>`, 1);
 var root$1 = /* @__PURE__ */ from_html(`<div class="accessify-footer"><div class="accessify-footer-links"><a target="_blank" rel="noopener noreferrer">Accessify Dashboard</a> <!></div> <button class="accessify-footer-close"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg> <span> </span></button></div>`);
 function PanelFooter($$anchor, $$props) {
@@ -7142,6 +7173,7 @@ function WidgetApp($$anchor, $$props) {
   let activeProfileId = /* @__PURE__ */ state(null);
   let langDropdownOpen = /* @__PURE__ */ state(false);
   let panelX = /* @__PURE__ */ state(null);
+  let widgetZoom = /* @__PURE__ */ state(1);
   const PANEL_X_KEY = "accessify-panel-x";
   const textTransformService = createTextTransformService();
   const STORAGE_KEY = "accessify-prefs";
@@ -7258,11 +7290,20 @@ function WidgetApp($$anchor, $$props) {
     const action = enabled ? t("status.activated", get(widgetLang)) : t("status.deactivated", get(widgetLang));
     announce(`${name} ${action}`);
   }
+  function handleTextSize(size) {
+    const factor = size / 100;
+    set(widgetZoom, Math.min(1.35, Math.max(0.85, factor)), true);
+    const mount2 = $$props.shadow.getElementById("accessify-mount");
+    if (mount2) {
+      mount2.style.zoom = get(widgetZoom) === 1 ? "" : String(get(widgetZoom));
+    }
+  }
   function resetAll() {
     set(activeFeatures, /* @__PURE__ */ new Map(), true);
     set(activeProfileId, null);
     savePrefs();
     textTransformService.restore();
+    handleTextSize(100);
     window.dispatchEvent(new CustomEvent("accessify:reset"));
     announce(t("widget.resetConfirm", get(widgetLang)));
   }
@@ -7422,7 +7463,8 @@ function WidgetApp($$anchor, $$props) {
       get activeFeatures() {
         return get(activeFeatures);
       },
-      ontoggle: handleFeatureToggle
+      ontoggle: handleFeatureToggle,
+      ontextsize: handleTextSize
     });
   }
   var node_7 = sibling(div_2, 2);
@@ -7766,6 +7808,29 @@ function createWidgetStyles(config2) {
       font-size: 13px; font-weight: 600; color: var(--text); user-select: none;
     }
 
+    /* Text Size slider */
+    .accessify-slider-wrap {
+      display: flex; align-items: center; gap: 8px;
+    }
+    .accessify-slider {
+      flex: 1; height: 6px; -webkit-appearance: none; appearance: none;
+      background: var(--surface-dim); border-radius: 3px; outline: none;
+      cursor: pointer; border: none; margin: 0;
+    }
+    .accessify-slider::-webkit-slider-thumb {
+      -webkit-appearance: none; appearance: none;
+      width: 18px; height: 18px; border-radius: 50%;
+      background: var(--accent); cursor: pointer;
+      border: 2px solid var(--surface-card);
+      box-shadow: 0 1px 4px rgba(0,0,0,0.3);
+    }
+    .accessify-slider::-moz-range-thumb {
+      width: 18px; height: 18px; border-radius: 50%;
+      background: var(--accent); cursor: pointer;
+      border: 2px solid var(--surface-card);
+      box-shadow: 0 1px 4px rgba(0,0,0,0.3);
+    }
+
     /* ─── Feature Cards (2-column grid) ─── */
     .accessify-features {
       display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap);
@@ -8163,74 +8228,74 @@ function createAltTextModule(aiService, initialLang = "de", serverConfig) {
     });
   }
   const BADGE_ATTR = "data-accessify-badge";
+  const WRAPPER_ATTR = "data-accessify-badge-wrap";
   function addInfoBadge(target, altText2) {
     if (target.getAttribute(BADGE_ATTR)) return;
-    const rect = target.getBoundingClientRect();
-    if (rect.width < 40 || rect.height < 40) {
-      if (target.tagName === "IMG") {
-        const obs = new IntersectionObserver((entries) => {
-          for (const entry of entries) {
-            if (entry.isIntersecting && entry.boundingClientRect.width >= 40) {
-              obs.disconnect();
-              if (enabled && !target.getAttribute(BADGE_ATTR)) {
-                addInfoBadge(target, altText2);
-              }
-            }
-          }
-        });
-        obs.observe(target);
-        setTimeout(() => obs.disconnect(), 3e4);
-      }
-      return;
-    }
     target.setAttribute(BADGE_ATTR, "1");
-    const container = document.createElement("div");
-    Object.assign(container.style, {
-      position: "fixed",
-      top: `${rect.top + 6}px`,
-      left: `${rect.left + 6}px`,
-      zIndex: "99999",
-      pointerEvents: "auto"
-    });
-    container.setAttribute("data-accessify-badge-container", "1");
-    const badge = document.createElement("div");
+    const isImg = target.tagName === "IMG";
+    let anchor;
+    if (isImg) {
+      const wrapper = document.createElement("span");
+      wrapper.setAttribute(WRAPPER_ATTR, "1");
+      Object.assign(wrapper.style, {
+        position: "relative",
+        display: "inline-block",
+        lineHeight: "0"
+      });
+      target.parentElement.insertBefore(wrapper, target);
+      wrapper.appendChild(target);
+      anchor = wrapper;
+    } else {
+      const pos = getComputedStyle(target).position;
+      if (pos === "static") target.style.position = "relative";
+      anchor = target;
+    }
+    const badge = document.createElement("span");
     Object.assign(badge.style, {
-      width: "24px",
-      height: "24px",
+      position: "absolute",
+      top: "6px",
+      left: "6px",
+      width: "22px",
+      height: "22px",
       borderRadius: "50%",
       background: "rgba(0,0,0,0.6)",
       color: "#fff",
       fontFamily: "sans-serif",
       fontWeight: "bold",
-      fontSize: "14px",
-      lineHeight: "24px",
+      fontSize: "13px",
+      lineHeight: "22px",
       textAlign: "center",
       cursor: "default",
+      zIndex: "10000",
+      pointerEvents: "auto",
       boxShadow: "0 1px 4px rgba(0,0,0,0.4)",
       transition: "background 0.15s"
     });
     badge.textContent = "i";
     badge.setAttribute("aria-hidden", "true");
-    const tooltip = document.createElement("div");
+    badge.setAttribute(BADGE_ATTR, "badge");
+    const tooltip = document.createElement("span");
     Object.assign(tooltip.style, {
       display: "none",
       position: "absolute",
-      top: "28px",
-      left: "0",
-      minWidth: "160px",
-      maxWidth: "300px",
-      padding: "8px 10px",
+      top: "32px",
+      left: "6px",
+      minWidth: "150px",
+      maxWidth: "280px",
+      padding: "6px 10px",
       background: "rgba(0,0,0,0.88)",
       color: "#fff",
       fontFamily: "sans-serif",
       fontSize: "12px",
       lineHeight: "1.4",
       borderRadius: "6px",
+      zIndex: "10001",
       pointerEvents: "none",
       wordWrap: "break-word",
       boxShadow: "0 2px 8px rgba(0,0,0,0.3)"
     });
     tooltip.textContent = altText2;
+    tooltip.setAttribute(BADGE_ATTR, "tooltip");
     badge.addEventListener("mouseenter", () => {
       badge.style.background = "rgba(0,0,0,0.85)";
       tooltip.style.display = "block";
@@ -8239,31 +8304,19 @@ function createAltTextModule(aiService, initialLang = "de", serverConfig) {
       badge.style.background = "rgba(0,0,0,0.6)";
       tooltip.style.display = "none";
     });
-    container.appendChild(badge);
-    container.appendChild(tooltip);
-    document.body.appendChild(container);
-    const updatePos = () => {
-      const r = target.getBoundingClientRect();
-      container.style.top = `${r.top + 6}px`;
-      container.style.left = `${r.left + 6}px`;
-      container.style.display = r.bottom < 0 || r.top > window.innerHeight ? "none" : "";
-    };
-    const scrollHandler = () => requestAnimationFrame(updatePos);
-    window.addEventListener("scroll", scrollHandler, { passive: true });
-    window.addEventListener("resize", scrollHandler, { passive: true });
-    container._cleanup = () => {
-      window.removeEventListener("scroll", scrollHandler);
-      window.removeEventListener("resize", scrollHandler);
-    };
+    anchor.appendChild(badge);
+    anchor.appendChild(tooltip);
   }
   function removeAllBadges() {
-    document.querySelectorAll("[data-accessify-badge-container]").forEach((el) => {
-      el._cleanup?.();
-      el.remove();
-    });
-    document.querySelectorAll(`[${BADGE_ATTR}]`).forEach((el) => {
-      el.removeAttribute(BADGE_ATTR);
+    document.querySelectorAll(`[${WRAPPER_ATTR}]`).forEach((wrapper) => {
+      const img = wrapper.querySelector("img");
+      if (img && wrapper.parentElement) {
+        wrapper.parentElement.insertBefore(img, wrapper);
+        wrapper.remove();
+      }
     });
+    document.querySelectorAll(`[${BADGE_ATTR}="badge"], [${BADGE_ATTR}="tooltip"]`).forEach((el) => el.remove());
+    document.querySelectorAll(`[${BADGE_ATTR}]`).forEach((el) => el.removeAttribute(BADGE_ATTR));
   }
   function addBadgesToAllImages() {
     document.querySelectorAll("img").forEach((img) => {
@@ -8708,4 +8761,4 @@ export {
   init as i,
   t
 };
-//# sourceMappingURL=index-CK-JGSFG.js.map
+//# sourceMappingURL=index-CWccrgpi.js.map