accessify-widget 0.3.14 → 0.3.16

package/dist/accessify.mjs

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

package/dist/{index-1tl4oBKN.js → index-DISuvl6x.js}

@@ -5986,7 +5986,7 @@ const PROFILES = [
     nameKey: "profile.cognitive",
     descKey: "profile.cognitive.desc",
     iconId: "brain",
-    features: ["reading-guide", "text-size", "spacing", "dyslexia-font", "animation-stop"],
+    features: ["reading-guide", "text-size", "animation-stop", "tts"],
     featureSettings: { "text-size": 130 }
   },
   {
@@ -5994,8 +5994,7 @@ const PROFILES = [
     nameKey: "profile.seizureSafe",
     descKey: "profile.seizureSafe.desc",
     iconId: "shield",
-    features: ["animation-stop", "saturation"],
-    featureSettings: { saturation: "low" }
+    features: ["animation-stop", "hide-images"]
   },
   {
     id: "adhd-friendly",
@@ -6005,10 +6004,9 @@ const PROFILES = [
     features: ["animation-stop", "reading-mask", "hide-images"]
   }
 ];
-var root_3$2 = /* @__PURE__ */ from_svg(`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5"></path></svg>`);
-var root_2$2 = /* @__PURE__ */ from_html(`<button class="accessify-accordion-option"><span class="accessify-accordion-option-left"><span class="accessify-accordion-option-icon" aria-hidden="true"></span> <span class="accessify-accordion-option-text"><span class="accessify-accordion-option-name"> </span> <span class="accessify-accordion-option-desc"> </span></span></span> <!></button>`);
-var root_1$3 = /* @__PURE__ */ from_html(`<div class="accessify-accordion-list" role="group"></div>`);
-var root$3 = /* @__PURE__ */ from_html(`<div class="accessify-accordion" role="region"><button class="accessify-accordion-toggle"><span class="accessify-accordion-toggle-left"><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><path d="M12 8v4l2 2"></path></svg> <span> </span></span> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg></button> <!></div>`);
+var root_2$2 = /* @__PURE__ */ from_svg(`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5"></path></svg>`);
+var root_1$3 = /* @__PURE__ */ from_html(`<button class="accessify-accordion-option"><span class="accessify-accordion-option-left"><span class="accessify-accordion-option-icon" aria-hidden="true"></span> <span class="accessify-accordion-option-text"><span class="accessify-accordion-option-name"> </span> <span class="accessify-accordion-option-desc"> </span></span></span> <!></button>`);
+var root$3 = /* @__PURE__ */ from_html(`<div class="accessify-accordion" role="region"><button class="accessify-accordion-toggle"><span class="accessify-accordion-toggle-left"><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><path d="M12 8v4l2 2"></path></svg> <span> </span></span> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg></button> <div class="accessify-accordion-list" role="group"></div></div>`);
 function ProfileSection($$anchor, $$props) {
   push($$props, true);
   let lang = prop($$props, "lang", 3, "en"), activeProfileId = prop($$props, "activeProfileId", 3, null);
@@ -6025,62 +6023,55 @@ function ProfileSection($$anchor, $$props) {
   var text = child(span_1);
   var svg = sibling(span, 2);
   let classes;
-  var node = sibling(button, 2);
-  {
-    var consequent_1 = ($$anchor2) => {
-      var div_1 = root_1$3();
-      each(div_1, 21, () => PROFILES, (profile) => profile.id, ($$anchor3, profile) => {
-        var button_1 = root_2$2();
-        var span_2 = child(button_1);
-        var span_3 = child(span_2);
-        html(span_3, () => getIcon(get(profile).iconId), true);
-        var span_4 = sibling(span_3, 2);
-        var span_5 = child(span_4);
-        var text_1 = child(span_5);
-        var span_6 = sibling(span_5, 2);
-        var text_2 = child(span_6);
-        var node_1 = sibling(span_2, 2);
-        {
-          var consequent = ($$anchor4) => {
-            var svg_1 = root_3$2();
-            append($$anchor4, svg_1);
-          };
-          if_block(node_1, ($$render) => {
-            if (activeProfileId() === get(profile).id) $$render(consequent);
-          });
-        }
-        template_effect(
-          ($0, $1) => {
-            set_attribute(button_1, "aria-pressed", activeProfileId() === get(profile).id);
-            set_attribute(button_1, "data-active", activeProfileId() === get(profile).id);
-            set_text(text_1, $0);
-            set_text(text_2, $1);
-          },
-          [
-            () => t(get(profile).nameKey, lang()),
-            () => t(get(profile).descKey, lang())
-          ]
-        );
-        delegated("click", button_1, () => $$props.onactivate(get(profile)));
-        append($$anchor3, button_1);
+  var div_1 = sibling(button, 2);
+  each(div_1, 21, () => PROFILES, (profile) => profile.id, ($$anchor2, profile) => {
+    var button_1 = root_1$3();
+    var span_2 = child(button_1);
+    var span_3 = child(span_2);
+    html(span_3, () => getIcon(get(profile).iconId), true);
+    var span_4 = sibling(span_3, 2);
+    var span_5 = child(span_4);
+    var text_1 = child(span_5);
+    var span_6 = sibling(span_5, 2);
+    var text_2 = child(span_6);
+    var node = sibling(span_2, 2);
+    {
+      var consequent = ($$anchor3) => {
+        var svg_1 = root_2$2();
+        append($$anchor3, svg_1);
+      };
+      if_block(node, ($$render) => {
+        if (activeProfileId() === get(profile).id) $$render(consequent);
       });
-      template_effect(($0) => set_attribute(div_1, "aria-label", $0), [() => t("section.profiles", lang())]);
-      append($$anchor2, div_1);
-    };
-    if_block(node, ($$render) => {
-      if (get(isOpen)) $$render(consequent_1);
-    });
-  }
+    }
+    template_effect(
+      ($0, $1) => {
+        set_attribute(button_1, "aria-pressed", activeProfileId() === get(profile).id);
+        set_attribute(button_1, "data-active", activeProfileId() === get(profile).id);
+        set_text(text_1, $0);
+        set_text(text_2, $1);
+      },
+      [
+        () => t(get(profile).nameKey, lang()),
+        () => t(get(profile).descKey, lang())
+      ]
+    );
+    delegated("click", button_1, () => $$props.onactivate(get(profile)));
+    append($$anchor2, button_1);
+  });
   template_effect(
-    ($0, $1) => {
+    ($0, $1, $2) => {
       set_attribute(div, "aria-label", $0);
       set_attribute(button, "aria-expanded", get(isOpen));
       set_text(text, $1);
       classes = set_class(svg, 0, "accessify-accordion-chevron", null, classes, { "accessify-accordion-chevron--open": get(isOpen) });
+      set_attribute(div_1, "aria-label", $2);
+      set_style(div_1, get(isOpen) ? "" : "display:none");
     },
     [
       () => t("section.profiles", lang()),
-      () => get(activeProfile) ? t(get(activeProfile).nameKey, lang()) : t("section.profiles", lang())
+      () => get(activeProfile) ? t(get(activeProfile).nameKey, lang()) : t("section.profiles", lang()),
+      () => t("section.profiles", lang())
     ]
   );
   delegated("click", button, () => {
@@ -6448,14 +6439,14 @@ function FeatureGrid($$anchor, $$props) {
   const FEATURE_LOADERS = {
     contrast: () => import("./contrast-CqsICAkU.js"),
     "text-size": () => import("./text-size-m_mHNPWo.js"),
-    "keyboard-nav": () => import("./keyboard-nav-DriHR920.js"),
+    "keyboard-nav": () => import("./keyboard-nav-CQ6IoNn_.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-CrtYM1Cb.js"),
+    "page-structure": () => import("./page-structure-DOlGisQu.js"),
     tts: () => import("./tts-CjszLRnb.js"),
     "text-simplify": () => import("./text-simplify-Cvhpio7g.js"),
     "alt-text": () => Promise.resolve().then(() => altText)
@@ -6687,7 +6678,6 @@ function FeatureGrid($$anchor, $$props) {
       delegated("click", button_1, () => setTextSize(Math.max(TEXT_SIZE_MIN, get(textSize) - TEXT_SIZE_STEP)));
       delegated("input", input, (e) => {
         set(textSize, Number(e.target.value), true);
-        $$props.ontextsize?.(get(textSize));
       });
       delegated("change", input, (e) => setTextSize(Number(e.target.value)));
       delegated("click", button_2, () => setTextSize(Math.min(TEXT_SIZE_MAX, get(textSize) + TEXT_SIZE_STEP)));
@@ -7177,7 +7167,6 @@ 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";
@@ -7294,20 +7283,13 @@ 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 handleTextSize(_size) {
   }
   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)));
   }
@@ -7509,9 +7491,6 @@ function WidgetApp($$anchor, $$props) {
   return pop($$exports);
 }
 delegate(["click"]);
-const CHECKMARK_SVG = encodeURIComponent(
-  '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5"/></svg>'
-);
 function createWidgetStyles(config2) {
   const pos = config2.position || "bottom-right";
   const isRight = pos.includes("right");
@@ -7537,7 +7516,7 @@ function createWidgetStyles(config2) {
     :host {
       all: initial;
       font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-      font-size: 15px;
+      font-size: 16px;
       line-height: 1.5;
       color-scheme: dark;
     }
@@ -7854,14 +7833,6 @@ function createWidgetStyles(config2) {
     }
     .accessify-card:hover { 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[data-active="true"]::after {
-      content: ''; position: absolute; top: 8px; ${isRight ? "right: 8px" : "left: 8px"};
-      width: 18px; height: 18px; border-radius: 999px; background: var(--accent);
-      mask-image: url("data:image/svg+xml,${CHECKMARK_SVG}");
-      mask-size: 10px; mask-repeat: no-repeat; mask-position: center;
-      -webkit-mask-image: url("data:image/svg+xml,${CHECKMARK_SVG}");
-      -webkit-mask-size: 10px; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center;
-    }
     .accessify-card-icon {
       display: inline-flex; align-items: center; justify-content: center;
       width: 48px; height: 48px; border-radius: 14px;
@@ -8239,16 +8210,30 @@ function createAltTextModule(aiService, initialLang = "de", serverConfig) {
     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;
+      let container = target.parentElement;
+      while (container && container !== document.body) {
+        const cs = getComputedStyle(container);
+        if (cs.overflow === "hidden" && cs.position !== "static") {
+          break;
+        }
+        container = container.parentElement;
+      }
+      if (container && container !== document.body && container !== target.parentElement) {
+        const pos = getComputedStyle(container).position;
+        if (pos === "static") container.style.position = "relative";
+        anchor = container;
+      } else {
+        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";
@@ -8277,6 +8262,8 @@ function createAltTextModule(aiService, initialLang = "de", serverConfig) {
     });
     badge.textContent = "i";
     badge.setAttribute("aria-hidden", "true");
+    badge.setAttribute("translate", "no");
+    badge.classList.add("notranslate");
     badge.setAttribute(BADGE_ATTR, "badge");
     const tooltip = document.createElement("span");
     Object.assign(tooltip.style, {
@@ -8299,6 +8286,8 @@ function createAltTextModule(aiService, initialLang = "de", serverConfig) {
       boxShadow: "0 2px 8px rgba(0,0,0,0.3)"
     });
     tooltip.textContent = altText2;
+    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)";
@@ -8765,4 +8754,4 @@ export {
   init as i,
   t
 };
-//# sourceMappingURL=index-1tl4oBKN.js.map
+//# sourceMappingURL=index-DISuvl6x.js.map