accessify-widget 0.3.15 → 0.3.17

package/dist/accessify.mjs

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

package/dist/{index-5qbCfZ0S.js → index-DLZwODEh.js}

@@ -6004,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);
@@ -6024,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, () => {
@@ -6447,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-CVsH7KMx.js"),
+    "keyboard-nav": () => import("./keyboard-nav-BDDg0iCG.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-aKtVG7q2.js"),
+    "page-structure": () => import("./page-structure-B52JJvs9.js"),
     tts: () => import("./tts-CjszLRnb.js"),
     "text-simplify": () => import("./text-simplify-Cvhpio7g.js"),
     "alt-text": () => Promise.resolve().then(() => altText)
@@ -8217,31 +8209,17 @@ function createAltTextModule(aiService, initialLang = "de", serverConfig) {
     target.setAttribute(BADGE_ATTR, "1");
     const isImg = target.tagName === "IMG";
     let anchor;
+    let badgeTop = "6px";
+    let badgeLeft = "6px";
     if (isImg) {
-      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;
-      }
+      const parent = target.parentElement;
+      if (!parent) return;
+      const parentPos = getComputedStyle(parent).position;
+      if (parentPos === "static") parent.style.position = "relative";
+      anchor = parent;
+      const imgEl = target;
+      badgeTop = `${imgEl.offsetTop + 6}px`;
+      badgeLeft = `${imgEl.offsetLeft + 6}px`;
     } else {
       const pos = getComputedStyle(target).position;
       if (pos === "static") target.style.position = "relative";
@@ -8250,8 +8228,8 @@ function createAltTextModule(aiService, initialLang = "de", serverConfig) {
     const badge = document.createElement("span");
     Object.assign(badge.style, {
       position: "absolute",
-      top: "6px",
-      left: "6px",
+      top: badgeTop,
+      left: badgeLeft,
       width: "22px",
       height: "22px",
       borderRadius: "50%",
@@ -8270,13 +8248,15 @@ 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, {
       display: "none",
       position: "absolute",
-      top: "32px",
-      left: "6px",
+      top: `calc(${badgeTop} + 26px)`,
+      left: badgeLeft,
       minWidth: "150px",
       maxWidth: "280px",
       padding: "6px 10px",
@@ -8292,6 +8272,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)";
@@ -8305,6 +8287,8 @@ function createAltTextModule(aiService, initialLang = "de", serverConfig) {
     anchor.appendChild(tooltip);
   }
   function removeAllBadges() {
+    document.querySelectorAll(`[${BADGE_ATTR}="badge"], [${BADGE_ATTR}="tooltip"]`).forEach((el) => 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) {
@@ -8312,8 +8296,6 @@ function createAltTextModule(aiService, initialLang = "de", serverConfig) {
         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) => {
@@ -8758,4 +8740,4 @@ export {
   init as i,
   t
 };
-//# sourceMappingURL=index-5qbCfZ0S.js.map
+//# sourceMappingURL=index-DLZwODEh.js.map