accessify-widget 0.3.35 → 0.3.37

package/dist/accessify.mjs

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

package/dist/{index-f80f4-e4.js → index-jJHI2SMZ.js}

@@ -76,10 +76,6 @@ 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
@@ -258,6 +254,8 @@ https://svelte.dev/e/svelte_boundary_reset_onerror`);
 }
 const EACH_ITEM_REACTIVE = 1;
 const EACH_INDEX_REACTIVE = 1 << 1;
+const EACH_IS_CONTROLLED = 1 << 2;
+const EACH_IS_ANIMATED = 1 << 3;
 const EACH_ITEM_IMMUTABLE = 1 << 4;
 const PROPS_IS_IMMUTABLE = 1;
 const PROPS_IS_UPDATED = 1 << 2;
@@ -3838,7 +3836,8 @@ var offscreen_anchor;
 function each(node, flags2, get_collection, get_key, render_fn2, fallback_fn = null) {
   var anchor = node;
   var items = /* @__PURE__ */ new Map();
-  {
+  var is_controlled = (flags2 & EACH_IS_CONTROLLED) !== 0;
+  if (is_controlled) {
     var parent_node = (
       /** @type {Element} */
       node
@@ -3963,17 +3962,31 @@ function skip_to_branch(effect2) {
   return effect2;
 }
 function reconcile(state2, array, anchor, flags2, get_key) {
+  var is_animated = (flags2 & EACH_IS_ANIMATED) !== 0;
   var length = array.length;
   var items = state2.items;
   var current = skip_to_branch(state2.effect.first);
   var seen;
   var prev = null;
+  var to_animate;
   var matched = [];
   var stashed = [];
   var value;
   var key;
   var effect2;
   var i;
+  if (is_animated) {
+    for (i = 0; i < length; i += 1) {
+      value = array[i];
+      key = get_key(value, i);
+      effect2 = /** @type {EachItem} */
+      items.get(key).e;
+      if ((effect2.f & EFFECT_OFFSCREEN) === 0) {
+        effect2.nodes?.a?.measure();
+        (to_animate ?? (to_animate = /* @__PURE__ */ new Set())).add(effect2);
+      }
+    }
+  }
   for (i = 0; i < length; i += 1) {
     value = array[i];
     key = get_key(value, i);
@@ -4008,6 +4021,10 @@ function reconcile(state2, array, anchor, flags2, get_key) {
     }
     if ((effect2.f & INERT) !== 0) {
       resume_effect(effect2);
+      if (is_animated) {
+        effect2.nodes?.a?.unfix();
+        (to_animate ?? (to_animate = /* @__PURE__ */ new Set())).delete(effect2);
+      }
     }
     if (effect2 !== current) {
       if (seen !== void 0 && seen.has(effect2)) {
@@ -4086,10 +4103,26 @@ function reconcile(state2, array, anchor, flags2, get_key) {
     }
     var destroy_length = to_destroy.length;
     if (destroy_length > 0) {
-      var controlled_anchor = length === 0 ? anchor : null;
+      var controlled_anchor = (flags2 & EACH_IS_CONTROLLED) !== 0 && length === 0 ? anchor : null;
+      if (is_animated) {
+        for (i = 0; i < destroy_length; i += 1) {
+          to_destroy[i].nodes?.a?.measure();
+        }
+        for (i = 0; i < destroy_length; i += 1) {
+          to_destroy[i].nodes?.a?.fix();
+        }
+      }
       pause_effects(state2, to_destroy, controlled_anchor);
     }
   }
+  if (is_animated) {
+    queue_micro_task(() => {
+      if (to_animate === void 0) return;
+      for (effect2 of to_animate) {
+        effect2.nodes?.a?.apply();
+      }
+    });
+  }
 }
 function create_item(items, anchor, value, key, index2, render_fn2, flags2, get_collection) {
   var v = (flags2 & EACH_ITEM_REACTIVE) !== 0 ? (flags2 & EACH_ITEM_IMMUTABLE) === 0 ? /* @__PURE__ */ mutable_source(value, false, false) : source(value) : null;
@@ -4293,17 +4326,6 @@ 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;
@@ -6533,9 +6555,10 @@ 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-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" role="note"><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></div>`);
-var root_4 = /* @__PURE__ */ from_html(`<div class="accessify-features"></div>`);
+var root_4 = /* @__PURE__ */ from_html(`<button><span>A</span></button>`);
+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-size-steps"></div></div>`);
+var root_6 = /* @__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" role="note"><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></div>`);
+var root_5 = /* @__PURE__ */ from_html(`<div class="accessify-features"></div>`);
 var root$2 = /* @__PURE__ */ from_html(`<!> <!> <div class="accessify-section-divider"></div> <!>`, 1);
 function FeatureGrid($$anchor, $$props) {
   push($$props, true);
@@ -6633,22 +6656,19 @@ 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 = 75;
-  const TEXT_SIZE_MAX = 200;
-  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-m_mHNPWo.js"),
-    "keyboard-nav": () => import("./keyboard-nav-CSajPv9n.js"),
+    "keyboard-nav": () => import("./keyboard-nav-By_dGJQ-.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-_chC8bg1.js"),
     "hide-images": () => import("./hide-images-B_LeCBcd.js"),
     "big-cursor": () => import("./big-cursor-B2UKu9dQ.js"),
-    "page-structure": () => import("./page-structure-BRj8VMOY.js"),
+    "page-structure": () => import("./page-structure-DM8eu0-9.js"),
     tts: () => import("./tts-CjszLRnb.js"),
     "text-simplify": () => import("./text-simplify-CK2GFhq2.js"),
     "alt-text": () => Promise.resolve().then(() => altText)
@@ -6849,40 +6869,39 @@ function FeatureGrid($$anchor, $$props) {
       var span_5 = sibling(span_4, 2);
       var text_2 = child(span_5);
       var div_5 = sibling(div_4, 2);
-      var button_1 = child(div_5);
-      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);
+      each(
+        div_5,
+        20,
+        () => [
+          { pct: 85, size: "11px" },
+          { pct: 125, size: "16px" },
+          { pct: 175, size: "21px" }
+        ],
+        index,
+        ($$anchor3, step) => {
+          var button_1 = root_4();
+          let classes;
+          var span_6 = child(button_1);
+          template_effect(() => {
+            classes = set_class(button_1, 1, "accessify-size-step-btn", null, classes, { active: get(textSize) === step.pct });
+            set_attribute(button_1, "aria-label", `${step.pct ?? ""}%`);
+            set_attribute(button_1, "aria-pressed", get(textSize) === step.pct);
+            set_style(span_6, `font-size:${step.size ?? ""}`);
+          });
+          delegated("click", button_1, () => setTextSize(get(textSize) === step.pct ? 100 : step.pct));
+          append($$anchor3, button_1);
+        }
+      );
       template_effect(
-        ($0, $1, $2) => {
+        ($0, $1) => {
           set_attribute(div_3, "aria-label", $0);
           set_text(text_2, $1);
-          button_1.disabled = get(textSize) <= TEXT_SIZE_MIN;
-          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) => {
-        set(textSize, Number(e.target.value), true);
-      });
-      delegated("change", 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);
     };
     var d_1 = /* @__PURE__ */ user_derived(() => get(visibleFeatureIds).has("text-size"));
@@ -6893,7 +6912,7 @@ function FeatureGrid($$anchor, $$props) {
   var node_2 = sibling(node_1, 4);
   {
     var consequent_2 = ($$anchor2) => {
-      var div_6 = root_4();
+      var div_6 = root_5();
       each(
         div_6,
         21,
@@ -6905,19 +6924,19 @@ function FeatureGrid($$anchor, $$props) {
         (feature) => feature.id,
         ($$anchor3, feature) => {
           const isActive = /* @__PURE__ */ user_derived(() => $$props.activeFeatures.get(get(feature).id) ?? false);
-          var div_7 = root_5();
-          var button_3 = child(div_7);
-          var span_7 = child(button_3);
+          var div_7 = root_6();
+          var button_2 = child(div_7);
+          var span_7 = child(button_2);
           html(span_7, () => getIcon(get(feature).iconId), true);
           var span_8 = sibling(span_7, 2);
-          var text_4 = child(span_8);
-          var span_9 = sibling(button_3, 2);
+          var text_3 = child(span_8);
+          var span_9 = sibling(button_2, 2);
           template_effect(
             ($0, $1, $2, $3) => {
-              set_attribute(button_3, "data-active", get(isActive));
-              set_attribute(button_3, "aria-checked", get(isActive));
-              set_attribute(button_3, "aria-label", $0);
-              set_text(text_4, $1);
+              set_attribute(button_2, "data-active", get(isActive));
+              set_attribute(button_2, "aria-checked", get(isActive));
+              set_attribute(button_2, "aria-label", $0);
+              set_text(text_3, $1);
               set_attribute(span_9, "aria-label", $2);
               set_attribute(span_9, "title", $3);
             },
@@ -6928,7 +6947,7 @@ function FeatureGrid($$anchor, $$props) {
               () => t(get(feature).descKey, $$props.config.lang)
             ]
           );
-          delegated("click", button_3, () => handleToggle(get(feature).id));
+          delegated("click", button_2, () => handleToggle(get(feature).id));
           append($$anchor3, div_7);
         }
       );
@@ -6941,7 +6960,7 @@ function FeatureGrid($$anchor, $$props) {
   append($$anchor, fragment);
   pop();
 }
-delegate(["click", "input", "change"]);
+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"><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) {
@@ -7994,27 +8013,21 @@ 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;
+    /* Text Size 3-step buttons */
+    .accessify-size-steps {
+      display: flex; align-items: flex-end; gap: 6px;
     }
-    .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-size-step-btn {
+      display: inline-flex; align-items: center; justify-content: center;
+      width: 36px; height: 36px; border-radius: 8px;
+      border: 1.5px solid var(--border); background: var(--surface-dim);
+      color: var(--text); cursor: pointer; font-weight: 700;
+      font-family: inherit; transition: all var(--fast);
+      line-height: 1;
     }
-    .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);
+    .accessify-size-step-btn:hover { background: var(--surface-hover); }
+    .accessify-size-step-btn.active {
+      background: var(--accent); color: #fff; border-color: var(--accent);
     }
 
     /* ─── Feature Cards (2-column grid) ─── */
@@ -8971,4 +8984,4 @@ export {
   init as i,
   t
 };
-//# sourceMappingURL=index-f80f4-e4.js.map
+//# sourceMappingURL=index-jJHI2SMZ.js.map