accessify-widget 0.2.22 → 0.3.1

package/dist/accessify.mjs

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

package/dist/{index-B9BgMU66.js → index-CFoky8Ty.js}

@@ -4245,6 +4245,9 @@ function to_class(value, hash, directives) {
   }
   return classname === "" ? null : classname;
 }
+function to_style(value, styles) {
+  return value == null ? null : String(value);
+}
 function set_class(dom, is_html, value, hash, prev_classes, next_classes) {
   var prev = dom.__className;
   if (prev !== value || prev === void 0) {
@@ -4269,6 +4272,21 @@ function set_class(dom, is_html, value, hash, prev_classes, next_classes) {
   }
   return next_classes;
 }
+function set_style(dom, value, prev_styles, next_styles) {
+  var prev = dom.__style;
+  if (prev !== value) {
+    var next_style_attr = to_style(value);
+    {
+      if (next_style_attr == null) {
+        dom.removeAttribute("style");
+      } else {
+        dom.style.cssText = next_style_attr;
+      }
+    }
+    dom.__style = value;
+  }
+  return next_styles;
+}
 const IS_CUSTOM_ELEMENT = Symbol("is custom element");
 const IS_HTML = Symbol("is html");
 function set_attribute(element, attribute, value, skip_warning) {
@@ -5773,7 +5791,6 @@ function TriggerButton($$anchor, $$props) {
     let hasMoved = false;
     let pointerId = null;
     function onDown(e) {
-      if ($$props.isOpen) return;
       const rect = btn.getBoundingClientRect();
       dragStartX = e.clientX;
       dragStartY = e.clientY;
@@ -5822,11 +5839,14 @@ function TriggerButton($$anchor, $$props) {
   });
   var button = root$5();
   let classes;
-  html(button, () => $$props.isOpen ? iconClose() : iconAccessibility(), true);
+  html(button, iconAccessibility, true);
   bind_this(button, ($$value) => el($$value), () => el());
   template_effect(
     ($0) => {
-      classes = set_class(button, 1, "accessify-trigger", null, classes, { "accessify-trigger--dragging": get(isDragging) });
+      classes = set_class(button, 1, "accessify-trigger", null, classes, {
+        "accessify-trigger--dragging": get(isDragging),
+        "accessify-trigger--hidden": $$props.isOpen
+      });
       set_attribute(button, "aria-expanded", $$props.isOpen);
       set_attribute(button, "aria-label", $0);
     },
@@ -5837,31 +5857,93 @@ function TriggerButton($$anchor, $$props) {
   append($$anchor, button);
   pop();
 }
-var root$4 = /* @__PURE__ */ from_html(`<header class="accessify-header"><div class="accessify-header-left"><span class="accessify-logo" aria-label="Accessify"><svg viewBox="0 0 480 80" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><text x="0" y="64" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="72" font-weight="700" letter-spacing="-2">accessify</text></svg></span></div> <div class="accessify-header-actions"><button class="accessify-header-btn"></button> <button class="accessify-header-btn accessify-header-btn--icon accessify-header-btn--close"></button></div></header>`);
+var root$4 = /* @__PURE__ */ from_html(`<header class="accessify-header"><div class="accessify-header-left"><span class="accessify-logo" aria-label="Accessify"><svg viewBox="0 0 480 80" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><text x="0" y="64" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="72" font-weight="700" letter-spacing="-2">accessify</text></svg></span></div> <div class="accessify-header-actions"><button class="accessify-header-btn accessify-drag-handle"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><line x1="8" y1="6" x2="8" y2="6.01"></line><line x1="16" y1="6" x2="16" y2="6.01"></line><line x1="8" y1="12" x2="8" y2="12.01"></line><line x1="16" y1="12" x2="16" y2="12.01"></line><line x1="8" y1="18" x2="8" y2="18.01"></line><line x1="16" y1="18" x2="16" y2="18.01"></line></svg></button> <button class="accessify-header-btn"></button> <button class="accessify-header-btn accessify-header-btn--icon accessify-header-btn--close"></button></div></header>`);
 function PanelHeader($$anchor, $$props) {
   push($$props, true);
   let lang = prop($$props, "lang", 3, "en");
   prop($$props, "activeCount", 3, 0);
+  let panelEl = prop($$props, "panelEl", 3, null);
+  let dragHandleEl = /* @__PURE__ */ state(null);
+  onMount(() => {
+    const handle = get(dragHandleEl);
+    if (!handle) return;
+    let dragStartX = 0;
+    let startLeft = 0;
+    let hasMoved = false;
+    let pointerId = null;
+    function onDown(e) {
+      const panel = panelEl();
+      if (!panel) return;
+      const rect = panel.getBoundingClientRect();
+      dragStartX = e.clientX;
+      startLeft = rect.left;
+      hasMoved = false;
+      pointerId = e.pointerId;
+      handle.setPointerCapture(e.pointerId);
+      e.preventDefault();
+    }
+    function onMove(e) {
+      if (pointerId === null || e.pointerId !== pointerId) return;
+      const panel = panelEl();
+      if (!panel) return;
+      const dx = e.clientX - dragStartX;
+      if (!hasMoved && Math.abs(dx) > 5) {
+        hasMoved = true;
+        panel.style.transition = "none";
+      }
+      if (hasMoved) {
+        const panelW = panel.offsetWidth;
+        const newLeft = Math.max(0, Math.min(window.innerWidth - panelW, startLeft + dx));
+        panel.style.left = newLeft + "px";
+        panel.style.right = "auto";
+      }
+    }
+    function onUp(e) {
+      if (pointerId === null || e.pointerId !== pointerId) return;
+      handle.releasePointerCapture(e.pointerId);
+      const panel = panelEl();
+      if (panel) {
+        panel.style.transition = "";
+        if (hasMoved) {
+          const rect = panel.getBoundingClientRect();
+          $$props.ondrag(rect.left);
+        }
+      }
+      pointerId = null;
+      hasMoved = false;
+    }
+    handle.addEventListener("pointerdown", onDown);
+    handle.addEventListener("pointermove", onMove);
+    handle.addEventListener("pointerup", onUp);
+    return () => {
+      handle.removeEventListener("pointerdown", onDown);
+      handle.removeEventListener("pointermove", onMove);
+      handle.removeEventListener("pointerup", onUp);
+    };
+  });
   var header = root$4();
   var div = sibling(child(header), 2);
   var button = child(div);
-  html(button, iconReset, true);
+  bind_this(button, ($$value) => set(dragHandleEl, $$value), () => get(dragHandleEl));
   var button_1 = sibling(button, 2);
-  html(button_1, iconClose, true);
+  html(button_1, iconReset, true);
+  var button_2 = sibling(button_1, 2);
+  html(button_2, iconClose, true);
   template_effect(
     ($0, $1) => {
-      set_attribute(button, "aria-label", $0);
-      set_attribute(button_1, "aria-label", $1);
+      set_attribute(button, "aria-label", lang() === "de" ? "Panel verschieben" : "Move panel");
+      set_attribute(button_1, "aria-label", $0);
+      set_attribute(button_2, "aria-label", $1);
     },
     [
       () => t("widget.reset", lang()),
       () => t("widget.close", lang())
     ]
   );
-  delegated("click", button, function(...$$args) {
+  delegated("click", button_1, function(...$$args) {
     $$props.onreset?.apply(this, $$args);
   });
-  delegated("click", button_1, function(...$$args) {
+  delegated("click", button_2, function(...$$args) {
     $$props.onclose?.apply(this, $$args);
   });
   append($$anchor, header);
@@ -6351,14 +6433,14 @@ function FeatureGrid($$anchor, $$props) {
   const FEATURE_LOADERS = {
     contrast: () => import("./contrast-CqsICAkU.js"),
     "text-size": () => import("./text-size-C6OFhCGi.js"),
-    "keyboard-nav": () => import("./keyboard-nav-cvuhPLSY.js"),
+    "keyboard-nav": () => import("./keyboard-nav-B66DnefL.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-XImoLRLq.js"),
+    "page-structure": () => import("./page-structure-C76rueHv.js"),
     tts: () => import("./tts-CjszLRnb.js"),
     "text-simplify": () => import("./text-simplify-Cvhpio7g.js"),
     "alt-text": () => Promise.resolve().then(() => altText)
@@ -6636,12 +6718,13 @@ function FeatureGrid($$anchor, $$props) {
 }
 delegate(["click"]);
 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"><a target="_blank" rel="noopener noreferrer">Accessify Dashboard</a> <!></div>`);
+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) {
   push($$props, true);
   let lang = prop($$props, "lang", 3, "en");
   var div = root$1();
-  var a = child(div);
+  var div_1 = child(div);
+  var a = child(div_1);
   var node = sibling(a, 2);
   {
     var consequent = ($$anchor2) => {
@@ -6661,10 +6744,27 @@ function PanelFooter($$anchor, $$props) {
       if ($$props.statementUrl) $$render(consequent);
     });
   }
-  template_effect(() => set_attribute(a, "href", $$props.dashboardUrl || "https://accessify-dashboard.pages.dev"));
+  var button = sibling(div_1, 2);
+  var span = sibling(child(button), 2);
+  var text_1 = child(span);
+  template_effect(
+    ($0, $1) => {
+      set_attribute(a, "href", $$props.dashboardUrl || "https://accessify-dashboard.pages.dev");
+      set_attribute(button, "aria-label", $0);
+      set_text(text_1, $1);
+    },
+    [
+      () => t("widget.close", lang()),
+      () => t("widget.close", lang())
+    ]
+  );
+  delegated("click", button, function(...$$args) {
+    $$props.onclose?.apply(this, $$args);
+  });
   append($$anchor, div);
   pop();
 }
+delegate(["click"]);
 let savedTextNodes = [];
 let savedAttrs = [];
 let currentTranslateLang = null;
@@ -6936,8 +7036,8 @@ function createTextTransformService() {
 }
 var root_3 = /* @__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 = /* @__PURE__ */ from_html(`<button class="accessify-lang-option" role="option"><span> </span> <!></button>`);
-var root_1 = /* @__PURE__ */ from_html(`<div class="accessify-lang-list" role="listbox"></div>`);
-var root = /* @__PURE__ */ from_html(`<div class="sr-only" role="status" aria-live="polite" aria-atomic="true"> </div> <!> <div class="accessify-panel" role="dialog"><!> <div class="accessify-body"><div class="accessify-lang-dropdown"><button class="accessify-lang-toggle"><span class="accessify-lang-toggle-left"><!> <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> <div class="accessify-section-divider"></div> <!> <div class="accessify-section-divider"></div> <!></div> <!></div>`, 1);
+var root_1 = /* @__PURE__ */ from_html(`<div id="accessify-lang-list" class="accessify-lang-list" role="listbox"></div>`);
+var root = /* @__PURE__ */ from_html(`<div class="sr-only" role="status" aria-live="polite" aria-atomic="true"> </div> <!> <div class="accessify-panel" role="dialog"><!> <div class="accessify-body"><div class="accessify-lang-dropdown"><button class="accessify-lang-toggle" aria-controls="accessify-lang-list"><span class="accessify-lang-toggle-left"><!> <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> <div class="accessify-section-divider"></div> <!> <div class="accessify-section-divider"></div> <!></div> <!></div>`, 1);
 function WidgetApp($$anchor, $$props) {
   push($$props, true);
   let config2 = prop($$props, "config", 7);
@@ -6950,6 +7050,8 @@ function WidgetApp($$anchor, $$props) {
   let widgetLang = /* @__PURE__ */ state("en");
   let activeProfileId = /* @__PURE__ */ state(null);
   let langDropdownOpen = /* @__PURE__ */ state(false);
+  let panelX = /* @__PURE__ */ state(null);
+  const PANEL_X_KEY = "accessify-panel-x";
   const textTransformService = createTextTransformService();
   const STORAGE_KEY = "accessify-prefs";
   let activeCount = /* @__PURE__ */ user_derived(() => Array.from(get(activeFeatures).values()).filter(Boolean).length);
@@ -6967,6 +7069,10 @@ function WidgetApp($$anchor, $$props) {
         const prefs = JSON.parse(saved);
         set(activeFeatures, new Map(Object.entries(prefs)), true);
       }
+      const savedX = localStorage.getItem(PANEL_X_KEY);
+      if (savedX !== null) {
+        set(panelX, parseFloat(savedX), true);
+      }
     } catch {
     }
   }
@@ -7020,12 +7126,37 @@ function WidgetApp($$anchor, $$props) {
   }
   function close() {
     set(isOpen, false);
-    const trigger = $$props.shadow.querySelector(".accessify-trigger");
-    trigger?.focus();
+    set(langDropdownOpen, false);
+    requestAnimationFrame(() => {
+      const trigger = $$props.shadow.querySelector(".accessify-trigger");
+      trigger?.focus();
+    });
   }
   function toggleOpen() {
-    if (get(isOpen)) close();
-    else open();
+    if (get(isOpen)) {
+      close();
+    } else {
+      open();
+    }
+  }
+  function handleLangChange(newLang) {
+    set(widgetLang, getSupportedLang(newLang), true);
+    config2().lang = get(widgetLang);
+    set(langDropdownOpen, false);
+    applyLanguage();
+    const pageLang = document.documentElement.lang?.split("-")[0] || "en";
+    if (get(widgetLang) !== pageLang) {
+      textTransformService.translate(get(widgetLang));
+    } else {
+      textTransformService.restore();
+    }
+  }
+  function handlePanelDrag(x) {
+    set(panelX, x, true);
+    try {
+      localStorage.setItem(PANEL_X_KEY, String(x));
+    } catch {
+    }
   }
   function handleFeatureToggle(id, enabled) {
     get(activeFeatures).set(id, enabled);
@@ -7064,23 +7195,18 @@ function WidgetApp($$anchor, $$props) {
     savePrefs();
     announce(`${t(profile.nameKey, get(widgetLang))} ${t("status.activated", get(widgetLang))}`);
   }
-  function handleLangChange(newLang) {
-    set(widgetLang, getSupportedLang(newLang), true);
-    config2().lang = get(widgetLang);
-    set(langDropdownOpen, false);
-    applyLanguage();
-    const pageLang = document.documentElement.lang?.split("-")[0] || "en";
-    if (get(widgetLang) !== pageLang) {
-      textTransformService.translate(get(widgetLang));
-    } else {
-      textTransformService.restore();
-    }
-  }
   function handleKeydown(e) {
-    if (e.key === "Escape" && get(isOpen)) {
-      e.preventDefault();
-      close();
-      return;
+    if (e.key === "Escape") {
+      if (get(langDropdownOpen)) {
+        set(langDropdownOpen, false);
+        e.preventDefault();
+        return;
+      }
+      if (get(isOpen)) {
+        e.preventDefault();
+        close();
+        return;
+      }
     }
     if (e.key === "Tab" && get(isOpen) && get(panelEl)) {
       const focusable = get(panelEl).querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
@@ -7097,6 +7223,7 @@ function WidgetApp($$anchor, $$props) {
       }
     }
   }
+  let panelStyle = /* @__PURE__ */ user_derived(() => get(panelX) !== null ? `left: ${get(panelX)}px; right: auto;` : "");
   onMount(() => {
     set(widgetLang, getSupportedLang(config2().lang || "en"), true);
     detectTheme();
@@ -7135,7 +7262,11 @@ function WidgetApp($$anchor, $$props) {
       return get(activeCount);
     },
     onclose: close,
-    onreset: resetAll
+    onreset: resetAll,
+    ondrag: handlePanelDrag,
+    get panelEl() {
+      return get(panelEl);
+    }
   });
   var div_2 = sibling(node_1, 2);
   var div_3 = child(div_2);
@@ -7173,7 +7304,7 @@ function WidgetApp($$anchor, $$props) {
         delegated("click", button_1, () => handleLangChange(get(option).code));
         append($$anchor3, button_1);
       });
-      template_effect(($0) => set_attribute(div_4, "aria-label", $0), [() => t("widget.widgetLang", get(widgetLang))]);
+      template_effect(($0) => set_attribute(div_4, "aria-label", $0), [() => t("widget.title", get(widgetLang))]);
       append($$anchor2, div_4);
     };
     if_block(node_3, ($$render) => {
@@ -7213,7 +7344,8 @@ function WidgetApp($$anchor, $$props) {
     },
     get dashboardUrl() {
       return config2().dashboardUrl;
-    }
+    },
+    onclose: close
   });
   bind_this(div_1, ($$value) => set(panelEl, $$value), () => get(panelEl));
   template_effect(
@@ -7222,6 +7354,7 @@ function WidgetApp($$anchor, $$props) {
       set_attribute(div_1, "aria-label", $0);
       set_attribute(div_1, "aria-hidden", !get(isOpen));
       set_attribute(div_1, "dir", $1);
+      set_style(div_1, get(panelStyle));
       set_attribute(button, "aria-expanded", get(langDropdownOpen));
       set_text(text_1, `${(get(currentLangOption)?.flag || "") ?? ""} ${(get(currentLangOption)?.label || get(widgetLang)) ?? ""}`);
       classes = set_class(svg, 0, "accessify-lang-chevron", null, classes, { "accessify-lang-chevron--open": get(langDropdownOpen) });
@@ -7317,10 +7450,19 @@ function createWidgetStyles(config2) {
     }
     .accessify-trigger:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(50,60,100,0.6); }
     .accessify-trigger:active { transform: scale(0.96); }
-    .accessify-trigger[aria-expanded="true"] { opacity:0; pointer-events:none; transform:scale(0.9); }
+    .accessify-trigger--hidden { opacity:0; pointer-events:none; transform:scale(0.9); }
     .accessify-trigger svg { width: 26px; height: 26px; }
     .accessify-trigger--dragging { cursor: grabbing !important; opacity: 0.85; }
 
+    /* Active count badge on trigger */
+    .accessify-trigger-badge {
+      position: absolute; top: -4px; right: -4px;
+      min-width: 20px; height: 20px; padding: 0 5px;
+      border-radius: 999px; background: var(--accent); color: #fff;
+      font-size: 11px; font-weight: 700; line-height: 20px; text-align: center;
+      pointer-events: none;
+    }
+
     /* ─── Panel ─── */
     .accessify-panel {
       position: fixed; top: 0; bottom: 0;
@@ -7363,6 +7505,13 @@ function createWidgetStyles(config2) {
     .accessify-header-btn--icon { padding: 0; }
     .accessify-header-btn--close { background: transparent; border-color: transparent; }
 
+    /* Drag handle */
+    .accessify-drag-handle {
+      cursor: grab; touch-action: none;
+    }
+    .accessify-drag-handle:active { cursor: grabbing; }
+    .accessify-drag-handle svg { stroke-width: 3; }
+
     /* ─── Shared Accordion (Language + Profiles) ─── */
     .accessify-lang-dropdown,
     .accessify-accordion {
@@ -7419,6 +7568,7 @@ function createWidgetStyles(config2) {
       color: var(--text); cursor: pointer;
       font-size: 14px; font-weight: 500; font-family: inherit;
       transition: background var(--fast);
+      min-height: 44px;
     }
     .accessify-lang-option:hover { background: var(--surface-hover); }
     .accessify-lang-option[data-active="true"] { color: var(--accent); font-weight: 700; }
@@ -7599,15 +7749,31 @@ function createWidgetStyles(config2) {
 
     /* ─── Footer ─── */
     .accessify-footer {
-      display: flex; align-items: center; justify-content: center; gap: 8px;
-      padding: 8px var(--pad);
+      display: flex; align-items: center; justify-content: space-between;
+      padding: 10px var(--pad);
       border-top: 1px solid var(--border);
       color: var(--text-dim); font-size: 11px;
       background: var(--surface-dim); flex-shrink: 0;
+      gap: 8px;
+    }
+    .accessify-footer-links {
+      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-close {
+      display: inline-flex; align-items: center; gap: 5px;
+      padding: 6px 14px; min-height: 34px;
+      border: 1px solid var(--border); border-radius: 10px;
+      background: var(--surface); color: var(--text-dim);
+      cursor: pointer; font-size: 12px; font-weight: 600; font-family: inherit;
+      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 svg { width: 14px; height: 14px; flex-shrink: 0; }
+
     /* ─── Reduced Motion ─── */
     @media (prefers-reduced-motion: reduce) {
       *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
@@ -8630,4 +8796,4 @@ export {
   init as i,
   t
 };
-//# sourceMappingURL=index-B9BgMU66.js.map
+//# sourceMappingURL=index-CFoky8Ty.js.map