@pie-players/pie-assessment-toolkit 0.3.58 → 0.3.59

package/dist/components/SectionToolBar.custom-element.js

@@ -4316,6 +4316,11 @@ function create_custom_element(Component, props_definition, slots, exports, shad
 import { ContextConsumer } from "@pie-players/pie-context";
 import { createContext as createContext2 } from "@pie-players/pie-context";
 import { sanitizeSvgIcon } from "@pie-players/pie-players-shared/security";
+import {
+  approximateZoomFromWidths,
+  computeZoomCompensation,
+  ICON_BUTTON_ZOOM_OPTIONS
+} from "@pie-players/pie-players-shared/ui/zoom-compensation";
 import {
   createFocusTrap,
   FOCUSABLE_SELECTOR,
@@ -8312,6 +8317,23 @@ function if_block2(node, fn, elseif = false) {
   }, flags22);
 }
 var NAN2 = Symbol("NaN");
+function key2(node, get_key, render_fn) {
+  if (hydrating2) {
+    hydrate_next2();
+  }
+  var branches = new BranchManager2(node);
+  var legacy = !is_runes2();
+  block2(() => {
+    var key22 = get_key();
+    if (key22 !== key22) {
+      key22 = NAN2;
+    }
+    if (legacy && key22 !== null && typeof key22 === "object") {
+      key22 = {};
+    }
+    branches.ensure(key22, render_fn);
+  });
+}
 function pause_effects(state22, to_destroy, controlled_anchor) {
   var transitions = [];
   var length = to_destroy.length;
@@ -8359,8 +8381,8 @@ function destroy_effects(state22, to_destroy, remove_dom = true) {
   if (state22.pending.size > 0) {
     preserved_effects = new Set;
     for (const keys of state22.pending.values()) {
-      for (const key2 of keys) {
-        preserved_effects.add(state22.items.get(key2).e);
+      for (const key22 of keys) {
+        preserved_effects.add(state22.items.get(key22).e);
       }
     }
   }
@@ -8446,14 +8468,14 @@ function each2(node, flags22, get_collection, get_key, render_fn, fallback_fn =
         set_hydrating2(false);
       }
       var value = array[index2];
-      var key2 = get_key(value, index2);
+      var key22 = get_key(value, index2);
       if (true_default2) {
         var key_again = get_key(value, index2);
-        if (key2 !== key_again) {
-          each_key_volatile2(String(index2), String(key2), String(key_again));
+        if (key22 !== key_again) {
+          each_key_volatile2(String(index2), String(key22), String(key_again));
         }
       }
-      var item = first_run ? null : items.get(key2);
+      var item = first_run ? null : items.get(key22);
       if (item) {
         if (item.v)
           internal_set2(item.v, value);
@@ -8463,13 +8485,13 @@ function each2(node, flags22, get_collection, get_key, render_fn, fallback_fn =
           batch.unskip_effect(item.e);
         }
       } else {
-        item = create_item(items, first_run ? anchor : offscreen_anchor ??= create_text2(), value, key2, index2, render_fn, flags22, get_collection);
+        item = create_item(items, first_run ? anchor : offscreen_anchor ??= create_text2(), value, key22, index2, render_fn, flags22, get_collection);
         if (!first_run) {
           item.e.f |= EFFECT_OFFSCREEN2;
         }
-        items.set(key2, item);
+        items.set(key22, item);
       }
-      keys.add(key2);
+      keys.add(key22);
     }
     if (length === 0 && fallback_fn && !fallback2) {
       if (first_run) {
@@ -8492,8 +8514,8 @@ function each2(node, flags22, get_collection, get_key, render_fn, fallback_fn =
     if (!first_run) {
       pending3.set(batch, keys);
       if (defer) {
-        for (const [key22, item2] of items) {
-          if (!keys.has(key22)) {
+        for (const [key3, item2] of items) {
+          if (!keys.has(key3)) {
             batch.skip_effect(item2.e);
           }
         }
@@ -8531,14 +8553,14 @@ function reconcile(state22, array, anchor, flags22, get_key) {
   var matched = [];
   var stashed = [];
   var value;
-  var key2;
+  var key22;
   var effect22;
   var i;
   if (is_animated) {
     for (i = 0;i < length; i += 1) {
       value = array[i];
-      key2 = get_key(value, i);
-      effect22 = items.get(key2).e;
+      key22 = get_key(value, i);
+      effect22 = items.get(key22).e;
       if ((effect22.f & EFFECT_OFFSCREEN2) === 0) {
         effect22.nodes?.a?.measure();
         (to_animate ??= new Set).add(effect22);
@@ -8547,8 +8569,8 @@ function reconcile(state22, array, anchor, flags22, get_key) {
   }
   for (i = 0;i < length; i += 1) {
     value = array[i];
-    key2 = get_key(value, i);
-    effect22 = items.get(key2).e;
+    key22 = get_key(value, i);
+    effect22 = items.get(key22).e;
     if (state22.outrogroups !== null) {
       for (const group of state22.outrogroups) {
         group.pending.delete(effect22);
@@ -8684,7 +8706,7 @@ function reconcile(state22, array, anchor, flags22, get_key) {
     });
   }
 }
-function create_item(items, anchor, value, key2, index2, render_fn, flags22, get_collection) {
+function create_item(items, anchor, value, key22, index2, render_fn, flags22, get_collection) {
   var v = (flags22 & EACH_ITEM_REACTIVE2) !== 0 ? (flags22 & EACH_ITEM_IMMUTABLE2) === 0 ? mutable_source2(value, false, false) : source2(value) : null;
   var i = (flags22 & EACH_INDEX_REACTIVE2) !== 0 ? source2(index2) : null;
   if (true_default2 && v) {
@@ -8698,7 +8720,7 @@ function create_item(items, anchor, value, key2, index2, render_fn, flags22, get
     e: branch2(() => {
       render_fn(anchor, v ?? value, i ?? index2, get_collection);
       return () => {
-        items.delete(key2);
+        items.delete(key22);
       };
     })
   };
@@ -8734,16 +8756,16 @@ function validate_each_keys(array, key_fn) {
   const keys = new Map;
   const length = array.length;
   for (let i = 0;i < length; i++) {
-    const key2 = key_fn(array[i], i);
-    if (keys.has(key2)) {
-      const a = String(keys.get(key2));
+    const key22 = key_fn(array[i], i);
+    if (keys.has(key22)) {
+      const a = String(keys.get(key22));
       const b = String(i);
-      let k = String(key2);
+      let k = String(key22);
       if (k.startsWith("[object "))
         k = null;
       each_key_duplicate2(a, b, k);
     }
-    keys.set(key2, i);
+    keys.set(key22, i);
   }
 }
 function check_hash(element2, server_hash, value) {
@@ -8877,13 +8899,13 @@ function to_class2(value, hash22, directives) {
     classname = classname ? classname + " " + hash22 : hash22;
   }
   if (directives) {
-    for (var key2 of Object.keys(directives)) {
-      if (directives[key2]) {
-        classname = classname ? classname + " " + key2 : key2;
+    for (var key22 of Object.keys(directives)) {
+      if (directives[key22]) {
+        classname = classname ? classname + " " + key22 : key22;
       } else if (classname.length) {
-        var len = key2.length;
+        var len = key22.length;
         var a = 0;
-        while ((a = classname.indexOf(key2, a)) >= 0) {
+        while ((a = classname.indexOf(key22, a)) >= 0) {
           var b = a + len;
           if ((a === 0 || whitespace2.includes(classname[a - 1])) && (b === classname.length || whitespace2.includes(classname[b]))) {
             classname = (a === 0 ? "" : classname.substring(0, a)) + classname.substring(b + 1);
@@ -8896,6 +8918,99 @@ function to_class2(value, hash22, directives) {
   }
   return classname === "" ? null : classname;
 }
+function append_styles22(styles, important = false) {
+  var separator = important ? " !important;" : ";";
+  var css = "";
+  for (var key22 of Object.keys(styles)) {
+    var value = styles[key22];
+    if (value != null && value !== "") {
+      css += " " + key22 + ": " + value + separator;
+    }
+  }
+  return css;
+}
+function to_css_name(name) {
+  if (name[0] !== "-" || name[1] !== "-") {
+    return name.toLowerCase();
+  }
+  return name;
+}
+function to_style2(value, styles) {
+  if (styles) {
+    var new_style = "";
+    var normal_styles;
+    var important_styles;
+    if (Array.isArray(styles)) {
+      normal_styles = styles[0];
+      important_styles = styles[1];
+    } else {
+      normal_styles = styles;
+    }
+    if (value) {
+      value = String(value).replaceAll(/\s*\/\*.*?\*\/\s*/g, "").trim();
+      var in_str = false;
+      var in_apo = 0;
+      var in_comment = false;
+      var reserved_names = [];
+      if (normal_styles) {
+        reserved_names.push(...Object.keys(normal_styles).map(to_css_name));
+      }
+      if (important_styles) {
+        reserved_names.push(...Object.keys(important_styles).map(to_css_name));
+      }
+      var start_index = 0;
+      var name_index = -1;
+      const len = value.length;
+      for (var i = 0;i < len; i++) {
+        var c = value[i];
+        if (in_comment) {
+          if (c === "/" && value[i - 1] === "*") {
+            in_comment = false;
+          }
+        } else if (in_str) {
+          if (in_str === c) {
+            in_str = false;
+          }
+        } else if (c === "/" && value[i + 1] === "*") {
+          in_comment = true;
+        } else if (c === '"' || c === "'") {
+          in_str = c;
+        } else if (c === "(") {
+          in_apo++;
+        } else if (c === ")") {
+          in_apo--;
+        }
+        if (!in_comment && in_str === false && in_apo === 0) {
+          if (c === ":" && name_index === -1) {
+            name_index = i;
+          } else if (c === ";" || i === len - 1) {
+            if (name_index !== -1) {
+              var name = to_css_name(value.substring(start_index, name_index).trim());
+              if (!reserved_names.includes(name)) {
+                if (c !== ";") {
+                  i++;
+                }
+                var property = value.substring(start_index, i).trim();
+                new_style += " " + property + ";";
+              }
+            }
+            start_index = i + 1;
+            name_index = -1;
+          }
+        }
+      }
+    }
+    if (normal_styles) {
+      new_style += append_styles22(normal_styles);
+    }
+    if (important_styles) {
+      new_style += append_styles22(important_styles, true);
+    }
+    new_style = new_style.trim();
+    return new_style === "" ? null : new_style;
+  }
+  return value == null ? null : String(value);
+}
 function set_class2(dom, is_html, value, hash22, prev_classes, next_classes) {
   var prev = dom[CLASS_CACHE2];
   if (hydrating2 || prev !== value || prev === undefined) {
@@ -8911,15 +9026,49 @@ function set_class2(dom, is_html, value, hash22, prev_classes, next_classes) {
     }
     dom[CLASS_CACHE2] = value;
   } else if (next_classes && prev_classes !== next_classes) {
-    for (var key2 in next_classes) {
-      var is_present = !!next_classes[key2];
-      if (prev_classes == null || is_present !== !!prev_classes[key2]) {
-        dom.classList.toggle(key2, is_present);
+    for (var key22 in next_classes) {
+      var is_present = !!next_classes[key22];
+      if (prev_classes == null || is_present !== !!prev_classes[key22]) {
+        dom.classList.toggle(key22, is_present);
       }
     }
   }
   return next_classes;
 }
+function update_styles(dom, prev = {}, next22, priority) {
+  for (var key22 in next22) {
+    var value = next22[key22];
+    if (prev[key22] !== value) {
+      if (next22[key22] == null) {
+        dom.style.removeProperty(key22);
+      } else {
+        dom.style.setProperty(key22, value, priority);
+      }
+    }
+  }
+}
+function set_style2(dom, value, prev_styles, next_styles) {
+  var prev = dom[STYLE_CACHE2];
+  if (hydrating2 || prev !== value) {
+    var next_style_attr = to_style2(value, next_styles);
+    if (!hydrating2 || next_style_attr !== dom.getAttribute("style")) {
+      if (next_style_attr == null) {
+        dom.removeAttribute("style");
+      } else {
+        dom.style.cssText = next_style_attr;
+      }
+    }
+    dom[STYLE_CACHE2] = value;
+  } else if (next_styles) {
+    if (Array.isArray(next_styles)) {
+      update_styles(dom, prev_styles?.[0], next_styles[0]);
+      update_styles(dom, prev_styles?.[1], next_styles[1], "important");
+    } else {
+      update_styles(dom, prev_styles, next_styles);
+    }
+  }
+  return next_styles;
+}
 var CLASS2 = Symbol("class");
 var STYLE2 = Symbol("style");
 var IS_CUSTOM_ELEMENT2 = Symbol("is custom element");
@@ -8990,9 +9139,9 @@ function get_setters2(element2) {
   var element_proto = Element.prototype;
   while (element_proto !== proto) {
     descriptors = get_descriptors2(proto);
-    for (var key2 in descriptors) {
-      if (descriptors[key2].set && key2 !== "innerHTML" && key2 !== "textContent" && key2 !== "innerText") {
-        setters.push(key2);
+    for (var key22 in descriptors) {
+      if (descriptors[key22].set && key22 !== "innerHTML" && key22 !== "textContent" && key22 !== "innerText") {
+        setters.push(key22);
       }
     }
     proto = get_prototype_of2(proto);
@@ -9096,7 +9245,7 @@ function bind_this2(element_or_component = {}, update2, get_value, get_parts) {
   });
   return element_or_component;
 }
-function prop2(props, key2, flags22, fallback2) {
+function prop2(props, key22, flags22, fallback2) {
   var runes = !legacy_mode_flag2 || (flags22 & PROPS_IS_RUNES2) !== 0;
   var bindable = (flags22 & PROPS_IS_BINDABLE2) !== 0;
   var lazy = (flags22 & PROPS_IS_LAZY_INITIAL2) !== 0;
@@ -9117,27 +9266,27 @@ function prop2(props, key2, flags22, fallback2) {
   let setter;
   if (bindable) {
     var is_entry_props = STATE_SYMBOL2 in props || LEGACY_PROPS2 in props;
-    setter = get_descriptor2(props, key2)?.set ?? (is_entry_props && key2 in props ? (v) => props[key2] = v : undefined);
+    setter = get_descriptor2(props, key22)?.set ?? (is_entry_props && key22 in props ? (v) => props[key22] = v : undefined);
   }
   var initial_value;
   var is_store_sub = false;
   if (bindable) {
-    [initial_value, is_store_sub] = capture_store_binding2(() => props[key2]);
+    [initial_value, is_store_sub] = capture_store_binding2(() => props[key22]);
   } else {
-    initial_value = props[key2];
+    initial_value = props[key22];
   }
   if (initial_value === undefined && fallback2 !== undefined) {
     initial_value = get_fallback();
     if (setter) {
       if (runes)
-        props_invalid_value2(key2);
+        props_invalid_value2(key22);
       setter(initial_value);
     }
   }
   var getter;
   if (runes) {
     getter = () => {
-      var value = props[key2];
+      var value = props[key22];
       if (value === undefined)
         return get_fallback();
       fallback_dirty = true;
@@ -9145,7 +9294,7 @@ function prop2(props, key2, flags22, fallback2) {
     };
   } else {
     getter = () => {
-      var value = props[key2];
+      var value = props[key22];
       if (value !== undefined) {
         fallback_value = undefined;
       }
@@ -9173,7 +9322,7 @@ function prop2(props, key2, flags22, fallback2) {
     return getter();
   });
   if (true_default2) {
-    d.label = key2;
+    d.label = key22;
   }
   if (bindable)
     get22(d);
@@ -9203,9 +9352,9 @@ class Svelte4Component2 {
   #instance;
   constructor(options) {
     var sources = new Map;
-    var add_source = (key2, value) => {
+    var add_source = (key22, value) => {
       var s = mutable_source2(value, false, false);
-      sources.set(key2, s);
+      sources.set(key22, s);
       return s;
     };
     const props = new Proxy({ ...options.props || {}, $$events: {} }, {
@@ -9236,15 +9385,15 @@ class Svelte4Component2 {
       flushSync2();
     }
     this.#events = props.$$events;
-    for (const key2 of Object.keys(this.#instance)) {
-      if (key2 === "$set" || key2 === "$destroy" || key2 === "$on")
+    for (const key22 of Object.keys(this.#instance)) {
+      if (key22 === "$set" || key22 === "$destroy" || key22 === "$on")
         continue;
-      define_property2(this, key2, {
+      define_property2(this, key22, {
         get() {
-          return this.#instance[key2];
+          return this.#instance[key22];
         },
         set(value) {
-          this.#instance[key2] = value;
+          this.#instance[key22] = value;
         },
         enumerable: true
       });
@@ -9345,10 +9494,10 @@ if (typeof HTMLElement === "function") {
             this.$$d[name] = get_custom_element_value2(name, attribute.value, this.$$p_d, "toProp");
           }
         }
-        for (const key2 in this.$$p_d) {
-          if (!(key2 in this.$$d) && this[key2] !== undefined) {
-            this.$$d[key2] = this[key2];
-            delete this[key2];
+        for (const key22 in this.$$p_d) {
+          if (!(key22 in this.$$d) && this[key22] !== undefined) {
+            this.$$d[key22] = this[key22];
+            delete this[key22];
           }
         }
         this.$$c = createClassComponent2({
@@ -9363,15 +9512,15 @@ if (typeof HTMLElement === "function") {
         this.$$me = effect_root2(() => {
           render_effect2(() => {
             this.$$r = true;
-            for (const key2 of object_keys2(this.$$c)) {
-              if (!this.$$p_d[key2]?.reflect)
+            for (const key22 of object_keys2(this.$$c)) {
+              if (!this.$$p_d[key22]?.reflect)
                 continue;
-              this.$$d[key2] = this.$$c[key2];
-              const attribute_value = get_custom_element_value2(key2, this.$$d[key2], this.$$p_d, "toAttribute");
+              this.$$d[key22] = this.$$c[key22];
+              const attribute_value = get_custom_element_value2(key22, this.$$d[key22], this.$$p_d, "toAttribute");
               if (attribute_value == null) {
-                this.removeAttribute(this.$$p_d[key2].attribute || key2);
+                this.removeAttribute(this.$$p_d[key22].attribute || key22);
               } else {
-                this.setAttribute(this.$$p_d[key2].attribute || key2, attribute_value);
+                this.setAttribute(this.$$p_d[key22].attribute || key22, attribute_value);
               }
             }
             this.$$r = false;
@@ -9404,7 +9553,7 @@ if (typeof HTMLElement === "function") {
       });
     }
     $$g_p(attribute_name) {
-      return object_keys2(this.$$p_d).find((key2) => this.$$p_d[key2].attribute === attribute_name || !this.$$p_d[key2].attribute && key2.toLowerCase() === attribute_name) || attribute_name;
+      return object_keys2(this.$$p_d).find((key22) => this.$$p_d[key22].attribute === attribute_name || !this.$$p_d[key22].attribute && key22.toLowerCase() === attribute_name) || attribute_name;
     }
   };
 }
@@ -9453,7 +9602,7 @@ function create_custom_element2(Component, props_definition, slots, exports, sha
       this.$$p_d = props_definition;
     }
     static get observedAttributes() {
-      return object_keys2(props_definition).map((key2) => (props_definition[key2].attribute || key2).toLowerCase());
+      return object_keys2(props_definition).map((key22) => (props_definition[key22].attribute || key22).toLowerCase());
     }
   };
   object_keys2(props_definition).forEach((prop22) => {
@@ -12010,7 +12159,7 @@ var __pieDefineSafely = (tagName, ctor) => {
   }
 };
 var root_1 = from_html2(`<span class="item-toolbar__element-host svelte-rnx3ie"></span>`);
-var root_2 = from_html2(`<nds-icon-button></nds-icon-button>`, 2);
+var root_2 = from_html2(`<span class="item-toolbar__nds-button-zoom svelte-rnx3ie"><nds-icon-button></nds-icon-button></span>`, 2);
 var root_3 = from_html2(`<span aria-hidden="true"></span>`);
 var root_4 = from_html2(`<img class="item-toolbar__icon-image svelte-rnx3ie" alt=""/>`);
 var root_5 = from_html2(`<i aria-hidden="true"></i>`);
@@ -12021,7 +12170,10 @@ var root_9 = from_html2(`<div></div>`);
 var root_10 = from_html2(`<div><div class="item-toolbar__tools-row svelte-rnx3ie"><!> <!> <!></div> <!></div>`);
 var $$css = {
   hash: "svelte-rnx3ie",
-  code: `.item-toolbar.svelte-rnx3ie {display:flex;flex-direction:column;align-items:flex-end;gap:0;--pie-toolbar-tools-row-height: 2rem;--pie-tts-controls-row-height: 2.875rem;}.item-toolbar__tools-row.svelte-rnx3ie {display:flex;align-items:center;justify-content:flex-end;flex-wrap:nowrap;gap:0.5rem;min-height:var(--pie-toolbar-tools-row-height);}.item-toolbar__controls-row.svelte-rnx3ie {display:flex;align-items:center;justify-content:flex-end;width:100%;min-height:0;height:auto;}.item-toolbar__controls-row--reserve.svelte-rnx3ie {min-height:var(--pie-tts-controls-row-height);height:var(--pie-tts-controls-row-height);}.item-toolbar__controls-row--active.svelte-rnx3ie {min-height:var(--pie-tts-controls-row-height);height:var(--pie-tts-controls-row-height);}.item-toolbar__controls-row--align-start.svelte-rnx3ie {justify-content:flex-start;}.item-toolbar__controls-host.svelte-rnx3ie {display:inline-flex;align-items:center;justify-content:flex-end;width:100%;}.item-toolbar--top.svelte-rnx3ie,
+  code: `.item-toolbar.svelte-rnx3ie {display:flex;flex-direction:column;align-items:flex-end;gap:0;--pie-toolbar-tools-row-height: 2rem;--pie-tts-controls-row-height: 2.875rem;}.item-toolbar__tools-row.svelte-rnx3ie {display:flex;align-items:center;justify-content:flex-end;flex-wrap:nowrap;
+		/* Cap the gap between toolbar items (e.g. TTS play ↔ calculator) at its
+		   200%-zoom size with the same factor the buttons use, so the spacing
+		   doesn't keep growing past 200% while the buttons themselves freeze. */gap:calc(0.5rem * var(--pie-toolbar-zoom-comp, 1));min-height:var(--pie-toolbar-tools-row-height);}.item-toolbar__controls-row.svelte-rnx3ie {display:flex;align-items:center;justify-content:flex-end;width:100%;min-height:0;height:auto;}.item-toolbar__controls-row--reserve.svelte-rnx3ie {min-height:var(--pie-tts-controls-row-height);height:var(--pie-tts-controls-row-height);}.item-toolbar__controls-row--active.svelte-rnx3ie {min-height:var(--pie-tts-controls-row-height);height:var(--pie-tts-controls-row-height);}.item-toolbar__controls-row--align-start.svelte-rnx3ie {justify-content:flex-start;}.item-toolbar__controls-host.svelte-rnx3ie {display:inline-flex;align-items:center;justify-content:flex-end;width:100%;}.item-toolbar--top.svelte-rnx3ie,
 	.item-toolbar--bottom.svelte-rnx3ie {align-items:flex-end;}.item-toolbar--left.svelte-rnx3ie,
 	.item-toolbar--right.svelte-rnx3ie {align-items:stretch;}.item-toolbar--left.svelte-rnx3ie .item-toolbar__tools-row:where(.svelte-rnx3ie),
 	.item-toolbar--right.svelte-rnx3ie .item-toolbar__tools-row:where(.svelte-rnx3ie) {flex-direction:column;align-items:center;justify-content:flex-start;flex-wrap:nowrap;}.item-toolbar--left.svelte-rnx3ie .item-toolbar__controls-row:where(.svelte-rnx3ie),
@@ -12031,7 +12183,9 @@ var $$css = {
 	   custom property so its light-DOM inner button matches the toolbar's
 	   md/sm/lg dimensions (32 / 44 / 40 px) without a layout shift. The glyph
 	   keeps the NDS-native icon size (we render size="small"), so it isn't
-	   oversized. */.item-toolbar.svelte-rnx3ie nds-icon-button:where(.svelte-rnx3ie) {
+	   oversized. */
+	/* Freeze the calculator's header open/close button at its 200%-zoom size
+	   (factor is 1 at zoom <= 200%). Zoom on this wrapper, not the host. */.item-toolbar__nds-button-zoom.svelte-rnx3ie {display:inline-flex;zoom:var(--pie-toolbar-zoom-comp, 1);}.item-toolbar.svelte-rnx3ie nds-icon-button:where(.svelte-rnx3ie) {
 		/* Host-settable button size per toolbar size (drives the NDS outer button
 		   via its own --height-32). */--height-32: var(--pie-calculator-button-size, 2rem);
 		/* Host-settable accent for the calculator button: the NDS tertiary glyph
@@ -12129,7 +12283,24 @@ function ItemToolBar($$anchor, $$props) {
   let activeToolState = state2(proxy2({}));
   let level = prop2($$props, "level", 7, "item"), scopeId = prop2($$props, "scopeId", 7, ""), itemId = prop2($$props, "itemId", 7, ""), sectionId = prop2($$props, "sectionId", 7, ""), catalogId = prop2($$props, "catalogId", 7, ""), tools = prop2($$props, "tools", 7, "calculator,textToSpeech,answerEliminator"), contentKind = prop2($$props, "contentKind", 7, "assessment-item"), position = prop2($$props, "position", 7, "bottom"), scopeElement = prop2($$props, "scopeElement", 7, null), toolRegistry = prop2($$props, "toolRegistry", 7, null), item = prop2($$props, "item", 7, null), hostButtons = prop2($$props, "hostButtons", 23, () => []), className = prop2($$props, "class", 7, ""), size = prop2($$props, "size", 7, "md"), language = prop2($$props, "language", 7, "en-US");
   let toolbarRootElement = state2(null);
+  function currentCalculatorZoomCompensation() {
+    if (typeof window === "undefined")
+      return 1;
+    return computeZoomCompensation(approximateZoomFromWidths(window.outerWidth, window.innerWidth), ICON_BUTTON_ZOOM_OPTIONS.maxZoom, ICON_BUTTON_ZOOM_OPTIONS.minCompensation);
+  }
+  let calculatorButtonZoomComp = state2(1);
+  user_effect2(() => {
+    if (typeof window === "undefined")
+      return;
+    const update2 = () => {
+      set2(calculatorButtonZoomComp, currentCalculatorZoomCompensation(), true);
+    };
+    update2();
+    window.addEventListener("resize", update2);
+    return () => window.removeEventListener("resize", update2);
+  });
   let runtimeContext = state2(null);
+  const useNdsIcons = user_derived2(() => get22(runtimeContext)?.ndsIcons === true);
   let shellContext = state2(null);
   let moduleLoadVersion = state2(0);
   let policyChangeVersion = state2(0);
@@ -12945,6 +13116,7 @@ function ItemToolBar($$anchor, $$props) {
       shellEl.style.width = `${width}px`;
       shellEl.style.height = `${height}px`;
       shellEl.style.display = currentArgs.active ? "flex" : "none";
+      shellEl.style.setProperty("--pie-tool-shell-zoom-comp", String(currentCalculatorZoomCompensation()));
     };
     const mountContent = () => {
       if (!contentEl)
@@ -13261,7 +13433,8 @@ function ItemToolBar($$anchor, $$props) {
     };
     if (isBrowser && currentArgs.mounted.entry.shell) {
       const isCalculatorShell = currentArgs.mounted.toolId === "calculator";
-      if (isCalculatorShell)
+      const useNdsShellIcons = isCalculatorShell && get22(useNdsIcons);
+      if (useNdsShellIcons)
         ensureNdsAssets();
       shellEl = document.createElement("div");
       shellEl.className = "pie-tool-shell";
@@ -13320,7 +13493,7 @@ function ItemToolBar($$anchor, $$props) {
       const appendControl = (label, glyph, iconName, onActivate, faVariant = "fa-regular") => {
         if (!controlsEl)
           return;
-        controlsEl.appendChild(isCalculatorShell ? createShellIconButton(label, iconName, onActivate, faVariant) : createShellControlButton(label, glyph, onActivate));
+        controlsEl.appendChild(useNdsShellIcons ? createShellIconButton(label, iconName, onActivate, faVariant) : createShellControlButton(label, glyph, onActivate));
       };
       if (shellConfig?.draggable !== false) {
         appendControl("Move tool left", "←", "chevron-left", () => moveBy(-24, 0));
@@ -13342,12 +13515,13 @@ function ItemToolBar($$anchor, $$props) {
         rightClusterEl.style.display = "inline-flex";
         rightClusterEl.style.alignItems = "center";
         rightClusterEl.style.gap = "6px";
+        rightClusterEl.style.setProperty("zoom", "var(--pie-tool-shell-zoom-comp, 1)");
         rightClusterEl.appendChild(controlsEl);
         headerEl.appendChild(rightClusterEl);
       } else {
         headerEl.appendChild(controlsEl);
       }
-      if (isCalculatorShell) {
+      if (useNdsShellIcons) {
         closeButtonEl = createShellIconButton("Close tool", "xmark", closeShell, "fa-regular");
         closeButtonEl.style.display = currentArgs.mounted.entry.shell.closeable === false ? "none" : "inline-block";
       } else {
@@ -13381,7 +13555,7 @@ function ItemToolBar($$anchor, $$props) {
         closeButton.style.cursor = "pointer";
         closeButton.style.display = "inline-flex";
         closeButton.style.alignItems = "center";
-        closeButton.style.justifyContent = "center";
+        closeButton.style.justifyItems = "center";
         closeButton.style.width = "28px";
         closeButton.style.height = "28px";
         closeButton.style.padding = "0";
@@ -13738,12 +13912,17 @@ function ItemToolBar($$anchor, $$props) {
         var node_3 = first_child2(fragment_1);
         {
           var consequent = ($$anchor4) => {
-            var span = root_1();
-            action2(span, ($$node, $$action_arg) => mountElementWithShell?.($$node, $$action_arg), () => ({
-              mounted: get22(mounted),
-              active: get22(renderedToolActiveById)[get22(mounted).toolId] ?? false
-            }));
-            append2($$anchor4, span);
+            var fragment_2 = comment2();
+            var node_4 = first_child2(fragment_2);
+            key2(node_4, () => get22(useNdsIcons), ($$anchor5) => {
+              var span = root_1();
+              action2(span, ($$node, $$action_arg) => mountElementWithShell?.($$node, $$action_arg), () => ({
+                mounted: get22(mounted),
+                active: get22(renderedToolActiveById)[get22(mounted).toolId] ?? false
+              }));
+              append2($$anchor5, span);
+            });
+            append2($$anchor4, fragment_2);
           };
           var alternate = ($$anchor4) => {
             var span_1 = root_1();
@@ -13759,14 +13938,15 @@ function ItemToolBar($$anchor, $$props) {
         }
         append2($$anchor3, fragment_1);
       });
-      var node_4 = sibling2(node_2, 2);
-      each2(node_4, 17, () => get22(toolbarItems), (item2) => item2.id, ($$anchor3, item2, $$index_1, $$array) => {
-        const faIconName = user_derived2(() => isToolbarLinkItem(get22(item2)) ? null : resolveFaIconName(get22(item2)));
-        var fragment_2 = comment2();
-        var node_5 = first_child2(fragment_2);
+      var node_5 = sibling2(node_2, 2);
+      each2(node_5, 17, () => get22(toolbarItems), (item2) => item2.id, ($$anchor3, item2, $$index_1, $$array) => {
+        const faIconName = user_derived2(() => get22(useNdsIcons) && !isToolbarLinkItem(get22(item2)) ? resolveFaIconName(get22(item2)) : null);
+        var fragment_3 = comment2();
+        var node_6 = first_child2(fragment_3);
         {
           var consequent_1 = ($$anchor4) => {
-            var nds_icon_button = root_2();
+            var span_2 = root_2();
+            var nds_icon_button = child2(span_2);
             set_class2(nds_icon_button, 1, "item-toolbar__nds-button svelte-rnx3ie");
             set_custom_element_data2(nds_icon_button, "type", "circle");
             set_custom_element_data2(nds_icon_button, "size", "small");
@@ -13777,25 +13957,26 @@ function ItemToolBar($$anchor, $$props) {
             template_effect2(() => set_custom_element_data2(nds_icon_button, "disabled", get22(item2).disabled));
             action2(nds_icon_button, ($$node) => ndsIconButtonAction?.($$node));
             action2(nds_icon_button, ($$node, $$action_arg) => reflectToggleState?.($$node, $$action_arg), () => isToolbarItemActive(get22(item2)));
+            reset2(span_2);
             delegated2("click", nds_icon_button, function(...$$args) {
               get22(item2).onClick?.apply(this, $$args);
             });
-            append2($$anchor4, nds_icon_button);
+            append2($$anchor4, span_2);
           };
           var consequent_6 = ($$anchor4) => {
             var a = root_6();
             let classes_1;
-            var node_6 = child2(a);
+            var node_7 = child2(a);
             {
               var consequent_5 = ($$anchor5) => {
-                var fragment_3 = comment2();
-                var node_7 = first_child2(fragment_3);
+                var fragment_4 = comment2();
+                var node_8 = first_child2(fragment_4);
                 {
                   var consequent_2 = ($$anchor6) => {
-                    var span_2 = root_3();
-                    html2(span_2, () => sanitizeSvgIcon(get22(item2).icon), true);
-                    reset2(span_2);
-                    append2($$anchor6, span_2);
+                    var span_3 = root_3();
+                    html2(span_3, () => sanitizeSvgIcon(get22(item2).icon), true);
+                    reset2(span_3);
+                    append2($$anchor6, span_3);
                   };
                   var d = user_derived2(() => isInlineSvgIcon(get22(item2).icon));
                   var consequent_3 = ($$anchor6) => {
@@ -13806,30 +13987,30 @@ function ItemToolBar($$anchor, $$props) {
                   var d_1 = user_derived2(() => isExternalIconUrl(get22(item2).icon));
                   var alternate_2 = ($$anchor6) => {
                     const fallbackIcon = user_derived2(() => getFallbackIconSvg(get22(item2).icon));
-                    var fragment_4 = comment2();
-                    var node_8 = first_child2(fragment_4);
+                    var fragment_5 = comment2();
+                    var node_9 = first_child2(fragment_5);
                     {
                       var consequent_4 = ($$anchor7) => {
-                        var span_3 = root_3();
-                        html2(span_3, () => sanitizeSvgIcon(get22(fallbackIcon)), true);
-                        reset2(span_3);
-                        append2($$anchor7, span_3);
+                        var span_4 = root_3();
+                        html2(span_4, () => sanitizeSvgIcon(get22(fallbackIcon)), true);
+                        reset2(span_4);
+                        append2($$anchor7, span_4);
                       };
                       var alternate_1 = ($$anchor7) => {
                         var i_1 = root_5();
                         template_effect2(() => set_class2(i_1, 1, `icon icon-${get22(item2).icon}`, "svelte-rnx3ie"));
                         append2($$anchor7, i_1);
                       };
-                      if_block2(node_8, ($$render) => {
+                      if_block2(node_9, ($$render) => {
                         if (get22(fallbackIcon))
                           $$render(consequent_4);
                         else
                           $$render(alternate_1, -1);
                       });
                     }
-                    append2($$anchor6, fragment_4);
+                    append2($$anchor6, fragment_5);
                   };
-                  if_block2(node_7, ($$render) => {
+                  if_block2(node_8, ($$render) => {
                     if (get22(d))
                       $$render(consequent_2);
                     else if (get22(d_1))
@@ -13838,9 +14019,9 @@ function ItemToolBar($$anchor, $$props) {
                       $$render(alternate_2, -1);
                   });
                 }
-                append2($$anchor5, fragment_3);
+                append2($$anchor5, fragment_4);
               };
-              if_block2(node_6, ($$render) => {
+              if_block2(node_7, ($$render) => {
                 if (get22(item2).icon)
                   $$render(consequent_5);
               });
@@ -13870,17 +14051,17 @@ function ItemToolBar($$anchor, $$props) {
           var alternate_5 = ($$anchor4) => {
             var button_1 = root_7();
             let classes_2;
-            var node_9 = child2(button_1);
+            var node_10 = child2(button_1);
             {
               var consequent_10 = ($$anchor5) => {
-                var fragment_5 = comment2();
-                var node_10 = first_child2(fragment_5);
+                var fragment_6 = comment2();
+                var node_11 = first_child2(fragment_6);
                 {
                   var consequent_7 = ($$anchor6) => {
-                    var span_4 = root_3();
-                    html2(span_4, () => sanitizeSvgIcon(get22(item2).icon), true);
-                    reset2(span_4);
-                    append2($$anchor6, span_4);
+                    var span_5 = root_3();
+                    html2(span_5, () => sanitizeSvgIcon(get22(item2).icon), true);
+                    reset2(span_5);
+                    append2($$anchor6, span_5);
                   };
                   var d_3 = user_derived2(() => isInlineSvgIcon(get22(item2).icon));
                   var consequent_8 = ($$anchor6) => {
@@ -13891,30 +14072,30 @@ function ItemToolBar($$anchor, $$props) {
                   var d_4 = user_derived2(() => isExternalIconUrl(get22(item2).icon));
                   var alternate_4 = ($$anchor6) => {
                     const fallbackIcon = user_derived2(() => getFallbackIconSvg(get22(item2).icon));
-                    var fragment_6 = comment2();
-                    var node_11 = first_child2(fragment_6);
+                    var fragment_7 = comment2();
+                    var node_12 = first_child2(fragment_7);
                     {
                       var consequent_9 = ($$anchor7) => {
-                        var span_5 = root_3();
-                        html2(span_5, () => sanitizeSvgIcon(get22(fallbackIcon)), true);
-                        reset2(span_5);
-                        append2($$anchor7, span_5);
+                        var span_6 = root_3();
+                        html2(span_6, () => sanitizeSvgIcon(get22(fallbackIcon)), true);
+                        reset2(span_6);
+                        append2($$anchor7, span_6);
                       };
                       var alternate_3 = ($$anchor7) => {
                         var i_2 = root_5();
                         template_effect2(() => set_class2(i_2, 1, `icon icon-${get22(item2).icon}`, "svelte-rnx3ie"));
                         append2($$anchor7, i_2);
                       };
-                      if_block2(node_11, ($$render) => {
+                      if_block2(node_12, ($$render) => {
                         if (get22(fallbackIcon))
                           $$render(consequent_9);
                         else
                           $$render(alternate_3, -1);
                       });
                     }
-                    append2($$anchor6, fragment_6);
+                    append2($$anchor6, fragment_7);
                   };
-                  if_block2(node_10, ($$render) => {
+                  if_block2(node_11, ($$render) => {
                     if (get22(d_3))
                       $$render(consequent_7);
                     else if (get22(d_4))
@@ -13923,9 +14104,9 @@ function ItemToolBar($$anchor, $$props) {
                       $$render(alternate_4, -1);
                   });
                 }
-                append2($$anchor5, fragment_5);
+                append2($$anchor5, fragment_6);
               };
-              if_block2(node_9, ($$render) => {
+              if_block2(node_10, ($$render) => {
                 if (get22(item2).icon)
                   $$render(consequent_10);
               });
@@ -13948,7 +14129,7 @@ function ItemToolBar($$anchor, $$props) {
             });
             append2($$anchor4, button_1);
           };
-          if_block2(node_5, ($$render) => {
+          if_block2(node_6, ($$render) => {
             if (get22(faIconName))
               $$render(consequent_1);
             else if (get22(d_2))
@@ -13957,66 +14138,76 @@ function ItemToolBar($$anchor, $$props) {
               $$render(alternate_5, -1);
           });
         }
-        append2($$anchor3, fragment_2);
+        append2($$anchor3, fragment_3);
       });
-      var node_12 = sibling2(node_4, 2);
-      each2(node_12, 17, () => get22(mountedElementsAfterButtons), (mounted) => mounted.key, ($$anchor3, mounted) => {
-        var fragment_7 = comment2();
-        var node_13 = first_child2(fragment_7);
+      var node_13 = sibling2(node_5, 2);
+      each2(node_13, 17, () => get22(mountedElementsAfterButtons), (mounted) => mounted.key, ($$anchor3, mounted) => {
+        var fragment_8 = comment2();
+        var node_14 = first_child2(fragment_8);
         {
           var consequent_11 = ($$anchor4) => {
-            var span_6 = root_1();
-            action2(span_6, ($$node, $$action_arg) => mountElementWithShell?.($$node, $$action_arg), () => ({
-              mounted: get22(mounted),
-              active: get22(renderedToolActiveById)[get22(mounted).toolId] ?? false
-            }));
-            append2($$anchor4, span_6);
+            var fragment_9 = comment2();
+            var node_15 = first_child2(fragment_9);
+            key2(node_15, () => get22(useNdsIcons), ($$anchor5) => {
+              var span_7 = root_1();
+              action2(span_7, ($$node, $$action_arg) => mountElementWithShell?.($$node, $$action_arg), () => ({
+                mounted: get22(mounted),
+                active: get22(renderedToolActiveById)[get22(mounted).toolId] ?? false
+              }));
+              append2($$anchor5, span_7);
+            });
+            append2($$anchor4, fragment_9);
           };
           var alternate_6 = ($$anchor4) => {
-            var span_7 = root_1();
-            action2(span_7, ($$node, $$action_arg) => mountElement?.($$node, $$action_arg), () => get22(mounted).entry.element);
-            append2($$anchor4, span_7);
+            var span_8 = root_1();
+            action2(span_8, ($$node, $$action_arg) => mountElement?.($$node, $$action_arg), () => get22(mounted).entry.element);
+            append2($$anchor4, span_8);
           };
-          if_block2(node_13, ($$render) => {
+          if_block2(node_14, ($$render) => {
             if (get22(mounted).entry.shell)
               $$render(consequent_11);
             else
               $$render(alternate_6, -1);
           });
         }
-        append2($$anchor3, fragment_7);
+        append2($$anchor3, fragment_8);
       });
       reset2(div_1);
-      var node_14 = sibling2(div_1, 2);
+      var node_16 = sibling2(div_1, 2);
       {
         var consequent_13 = ($$anchor3) => {
           var div_2 = root_9();
           let classes_3;
           each2(div_2, 21, () => get22(mountedElementsControlsRow), (mounted) => mounted.key, ($$anchor4, mounted) => {
-            var fragment_8 = comment2();
-            var node_15 = first_child2(fragment_8);
+            var fragment_10 = comment2();
+            var node_17 = first_child2(fragment_10);
             {
               var consequent_12 = ($$anchor5) => {
-                var span_8 = root_8();
-                action2(span_8, ($$node, $$action_arg) => mountElementWithShell?.($$node, $$action_arg), () => ({
-                  mounted: get22(mounted),
-                  active: get22(renderedToolActiveById)[get22(mounted).toolId] ?? false
-                }));
-                append2($$anchor5, span_8);
+                var fragment_11 = comment2();
+                var node_18 = first_child2(fragment_11);
+                key2(node_18, () => get22(useNdsIcons), ($$anchor6) => {
+                  var span_9 = root_8();
+                  action2(span_9, ($$node, $$action_arg) => mountElementWithShell?.($$node, $$action_arg), () => ({
+                    mounted: get22(mounted),
+                    active: get22(renderedToolActiveById)[get22(mounted).toolId] ?? false
+                  }));
+                  append2($$anchor6, span_9);
+                });
+                append2($$anchor5, fragment_11);
               };
               var alternate_7 = ($$anchor5) => {
-                var span_9 = root_8();
-                action2(span_9, ($$node, $$action_arg) => mountElement?.($$node, $$action_arg), () => get22(mounted).entry.element);
-                append2($$anchor5, span_9);
+                var span_10 = root_8();
+                action2(span_10, ($$node, $$action_arg) => mountElement?.($$node, $$action_arg), () => get22(mounted).entry.element);
+                append2($$anchor5, span_10);
               };
-              if_block2(node_15, ($$render) => {
+              if_block2(node_17, ($$render) => {
                 if (get22(mounted).entry.shell)
                   $$render(consequent_12);
                 else
                   $$render(alternate_7, -1);
               });
             }
-            append2($$anchor4, fragment_8);
+            append2($$anchor4, fragment_10);
           });
           reset2(div_2);
           template_effect2(() => classes_3 = set_class2(div_2, 1, "item-toolbar__controls-row svelte-rnx3ie", null, classes_3, {
@@ -14026,7 +14217,7 @@ function ItemToolBar($$anchor, $$props) {
           }));
           append2($$anchor3, div_2);
         };
-        if_block2(node_14, ($$render) => {
+        if_block2(node_16, ($$render) => {
           if (get22(shouldRenderControlsRow))
             $$render(consequent_13);
         });
@@ -14043,6 +14234,7 @@ function ItemToolBar($$anchor, $$props) {
         });
         set_attribute22(div, "data-content-kind", get22(effectiveContentKind));
         set_attribute22(div, "data-level", get22(effectiveLevel));
+        set_style2(div, `--pie-toolbar-zoom-comp: ${get22(calculatorButtonZoomComp)};`);
       });
       append2($$anchor2, div);
     };