@trintel/zooy 1.0.1-beta.1 → 1.0.2

package/dist/chunks/{main-DTOZMPON.js → main-BywCEBtD.js}

@@ -3,36 +3,38 @@ const numericString = "0123456789".split("");
 const alphaLower = "abcdefghijklmnopqrstuvwxyz".split(""), alphaUpper = "ABCDEFGHIJKLMNOPQRSTUVWXYZ".split("");
 [...alphaLower, ...alphaUpper, ...numericString];
 (/* @__PURE__ */ new Map()).set("true", !0).set("false", !1);
-const compose = (...O) => (...D) => O.reduce((w, U) => (F) => w(U(F)))(...D), identity = (O) => O, whatType = (O) => typeof O, isDef = (O) => O !== void 0, isUndefined = (O) => O === void 0, isDefAndNotNull = (O) => O != null, isString = (O) => whatType(O) === "string", isNumber = (O) => whatType(O) === "number" && !Number.isNaN(
+const compose = (...O) => (...w) => O.reduce((D, U) => (F) => D(U(F)))(...w), identity = (O) => O, whatType = (O) => typeof O, isDef = (O) => O !== void 0, isUndefined = (O) => O === void 0, isDefAndNotNull = (O) => O != null, isString = (O) => whatType(O) === "string", isNumber = (O) => whatType(O) === "number" && !Number.isNaN(
   /** @type number */
   O
-), isArray = (O) => O instanceof Array, reverse = (O) => Array.from(O).reduce((D, w) => [w, ...D], []), toLowerCase = (O) => O.toLowerCase(), toString = (O) => O + "", toNumber = (O) => +O;
-compose(toLowerCase, toString);
+), isObject = (O) => (O && typeof O == "object" && !(O instanceof Array) && !(O instanceof Set) && !(O instanceof Map) && !(O instanceof Date)) === !0, isArray = (O) => O instanceof Array, reverse = (O) => Array.from(O).reduce((w, D) => [D, ...w], []), toLowerCase = (O) => O.toLowerCase(), toString$1 = (O) => O + "", toNumber = (O) => +O;
+compose(toLowerCase, toString$1);
 const makeRandomString = () => {
   let O = 2147483648;
   return Math.floor(Math.random() * O).toString(36) + Math.abs(Math.floor(Math.random() * O) ^ Date.now()).toString(36);
-}, stripLeadingChar = (O) => (D) => D.startsWith(O) ? D.slice(O.length) : D, join = (O) => (D) => D.join(O);
+}, stripLeadingChar = (O) => (w) => w.startsWith(O) ? w.slice(O.length) : w, join = (O) => (w) => w.join(O);
 compose(join(""), reverse);
-const pathOr = (O, D) => (w) => {
-  const U = D.reduce((F, q) => {
+const pathOr = (O, w) => (D) => {
+  const U = w.reduce((F, q) => {
     try {
       return F[maybeNumber(q)];
     } catch {
       return;
     }
-  }, w);
+  }, D);
   return U === void 0 ? O : U;
-}, randomId = (O) => {
-  const D = makeRandomString();
-  return O ? D.substr(0, O) : D;
+}, objToPaths = (O, w = [], D = []) => (Object.entries(O).forEach(([U, F]) => {
+  isObject(F) ? objToPaths(F, [...w, U], D) : D.push([[...w, U], F]);
+}), D), randomId = (O) => {
+  const w = makeRandomString();
+  return O ? w.substr(0, O) : w;
 }, maybeNumber = (O) => {
   if (O === null || whatType(O) === "string" && O.length > 1 && O.startsWith("0") && !O.startsWith("0."))
     return O;
-  const D = 1 * O;
-  return D > Number.MAX_SAFE_INTEGER || Number.isNaN(D) ? O : D;
+  const w = 1 * O;
+  return w > Number.MAX_SAFE_INTEGER || Number.isNaN(w) ? O : w;
 };
-compose(toNumber, join(""), reverse, toString);
-class EVT extends EventTarget {
+compose(toNumber, join(""), reverse, toString$1);
+class Evt extends EventTarget {
   /**
    * Set this to true to get some debug in the console.
    * @type {boolean}
@@ -46,7 +48,7 @@ class EVT extends EventTarget {
    */
   #e = !1;
   /**
-   * A map of listener targets to an object of event: functions
+   * A map of listener targets to an object of zoo-event functions
    * When adding a listener, immediately also create the un-listen functions
    * and store those in an object keyed with the event.
    * Store these objects against the target in a map
@@ -75,8 +77,8 @@ class EVT extends EventTarget {
    * @param {*} data The data to attach to the event's detail property
    * @return {!CustomEvent} A new CustomEvent instance
    */
-  static makeEvent(D, w) {
-    return new CustomEvent(D, { detail: w });
+  static makeEvent(w, D) {
+    return new CustomEvent(w, { detail: D });
   }
   /**
    * Sets debug mode for this component. When enabled, debug messages
@@ -84,10 +86,10 @@ class EVT extends EventTarget {
    * @param {boolean} bool True to enable debug mode, false to disable
    * @throws {Error} If the value is not a boolean
    */
-  set debugMode(D) {
-    if (typeof D != "boolean")
+  set debugMode(w) {
+    if (typeof w != "boolean")
       throw new Error("This must be a boolean");
-    this.#t = D;
+    this.#t = w;
   }
   get debugMode() {
     return this.#t;
@@ -117,63 +119,63 @@ class EVT extends EventTarget {
    * Automatically prepends the constructor name to the output.
    * @param {...*} s Arguments to log
    */
-  debugMe(...D) {
-    this.#t && console.log.apply(null, [this.constructor.name, "DEBUG:", ...D]);
+  debugMe(...w) {
+    this.#t && console.log.apply(null, [this.constructor.name, "DEBUG:", ...w]);
   }
   //--[ Listeners and Listening ]--
   /**
-   * @param {!EventTarget|!EVT} comp
+   * @param {!EventTarget|!Evt} comp
    */
-  isListenedToBy(D) {
-    this.#r.add(D);
+  isListenedToBy(w) {
+    this.#r.add(w);
   }
   /**
    * WARNING! DO not use options={passive: true} here. It disallows us to
    * use preventDefault when we intercept the form, and that leads to a
    * general inability to POST forms.
    *
-   * @param {!EventTarget|!EVT|!Node} target
+   * @param {!EventTarget|!Evt|!Node} target
    * @param {string} event
    * @param {!Function} action
    * @param {boolean|!Object} options
    */
-  listen(D, w, U, F = !1) {
-    D.addEventListener(w, U, F);
-    const q = this.listeningTo.get(D) || {};
-    q[w] = () => D.removeEventListener(w, U, F), this.listeningTo.set(D, q), isDef(D.isListenedToBy) && D.isListenedToBy(this);
+  listen(w, D, U, F = !1) {
+    w.addEventListener(D, U, F);
+    const q = this.listeningTo.get(w) || {};
+    q[D] = () => w.removeEventListener(D, U, F), this.listeningTo.set(w, q), isDef(w.isListenedToBy) && w.isListenedToBy(this);
   }
   /**
    * Remove self from all components tt are listening to me.
    */
   stopBeingListenedTo() {
-    for (const D of this.isObservedBy)
-      D.stopListeningTo(this), this.isObservedBy.delete(D);
+    for (const w of this.isObservedBy)
+      w.stopListeningTo(this), this.isObservedBy.delete(w);
   }
   /**
    * Stop listening to all events on target.
-   * @param {!EventTarget|!EVT|!Node|undefined} target
+   * @param {!EventTarget|!Evt|!Node|undefined} target
    * @param {string=} opt_event
    */
-  stopListeningTo(D, w) {
-    D && this.listeningTo.has(D) && (isDef(D.isObservedBy) && D.isObservedBy.delete(this), isDef(w) ? (Object.entries(this.listeningTo.get(D)).forEach(([U, F]) => {
-      U === w && F();
-    }), Object.keys(this.listeningTo.get(D)).length || this.listeningTo.delete(D)) : (Object.values(this.listeningTo.get(D)).forEach((U) => U()), this.listeningTo.delete(D)));
+  stopListeningTo(w, D) {
+    w && this.listeningTo.has(w) && (isDef(w.isObservedBy) && w.isObservedBy.delete(this), isDef(D) ? (Object.entries(this.listeningTo.get(w)).forEach(([U, F]) => {
+      U === D && F();
+    }), Object.keys(this.listeningTo.get(w)).length || this.listeningTo.delete(w)) : (Object.values(this.listeningTo.get(w)).forEach((U) => U()), this.listeningTo.delete(w)));
   }
   /**
    * Removes all the event listeners that is managed by this
    * component.
    */
   removeAllListener() {
-    for (const D of this.listeningTo.keys())
-      this.stopListeningTo(D);
+    for (const w of this.listeningTo.keys())
+      this.stopListeningTo(w);
   }
   /**
    * Clears all active intervals created by this component.
    * Called automatically during disposal to prevent memory leaks.
    */
   clearAllIntervals() {
-    for (const D of this.activeIntervals)
-      clearInterval(D), this.activeIntervals.delete(D);
+    for (const w of this.activeIntervals)
+      clearInterval(w), this.activeIntervals.delete(w);
   }
   /**
    * Executes a function repeatedly at a specified interval.
@@ -181,8 +183,8 @@ class EVT extends EventTarget {
    * @param {!Function} f The function to execute on each interval
    * @param {number} interval The interval in milliseconds
    */
-  doOnBeat(D, w) {
-    const U = setInterval(D, w);
+  doOnBeat(w, D) {
+    const U = setInterval(w, D);
     this.activeIntervals.add(U);
   }
   /**
@@ -205,8 +207,8 @@ class EVT extends EventTarget {
   }
 }
 class ZooyEventData {
-  constructor(D, w) {
-    this.value_ = D, this.data_ = w || {};
+  constructor(w, D) {
+    this.value_ = w, this.data_ = D || {};
   }
   getValue() {
     return this.value_;
@@ -237,21 +239,21 @@ const UiEventType = {
   FORM_SUBMIT_SUCCESS: randomId()
 };
 var EN_US = ["second", "minute", "hour", "day", "week", "month", "year"];
-function en_US(O, D) {
-  if (D === 0)
+function en_US(O, w) {
+  if (w === 0)
     return ["just now", "right now"];
-  var w = EN_US[Math.floor(D / 2)];
-  return O > 1 && (w += "s"), [O + " " + w + " ago", "in " + O + " " + w];
+  var D = EN_US[Math.floor(w / 2)];
+  return O > 1 && (D += "s"), [O + " " + D + " ago", "in " + O + " " + D];
 }
 var ZH_CN = ["秒", "分钟", "小时", "天", "周", "个月", "年"];
-function zh_CN(O, D) {
-  if (D === 0)
+function zh_CN(O, w) {
+  if (w === 0)
     return ["刚刚", "片刻后"];
-  var w = ZH_CN[~~(D / 2)];
-  return [O + " " + w + "前", O + " " + w + "后"];
+  var D = ZH_CN[~~(w / 2)];
+  return [O + " " + D + "前", O + " " + D + "后"];
 }
-var Locales = {}, register = function(O, D) {
-  Locales[O] = D;
+var Locales = {}, register = function(O, w) {
+  Locales[O] = w;
 }, getLocale = function(O) {
   return Locales[O] || Locales.en_US;
 }, SEC_ARRAY = [
@@ -265,20 +267,20 @@ var Locales = {}, register = function(O, D) {
 function toDate(O) {
   return O instanceof Date ? O : !isNaN(O) || /^\d+$/.test(O) ? new Date(parseInt(O)) : (O = (O || "").trim().replace(/\.\d+/, "").replace(/-/, "/").replace(/-/, "/").replace(/(\d)T(\d)/, "$1 $2").replace(/Z/, " UTC").replace(/([+-]\d\d):?(\d\d)/, " $1$2"), new Date(O));
 }
-function formatDiff(O, D) {
-  var w = O < 0 ? 1 : 0;
+function formatDiff(O, w) {
+  var D = O < 0 ? 1 : 0;
   O = Math.abs(O);
   for (var U = O, F = 0; O >= SEC_ARRAY[F] && F < SEC_ARRAY.length; F++)
     O /= SEC_ARRAY[F];
-  return O = Math.floor(O), F *= 2, O > (F === 0 ? 9 : 1) && (F += 1), D(O, F, U)[w].replace("%s", O.toString());
+  return O = Math.floor(O), F *= 2, O > (F === 0 ? 9 : 1) && (F += 1), w(O, F, U)[D].replace("%s", O.toString());
 }
-function diffSec(O, D) {
-  var w = /* @__PURE__ */ new Date();
-  return (+w - +toDate(O)) / 1e3;
+function diffSec(O, w) {
+  var D = /* @__PURE__ */ new Date();
+  return (+D - +toDate(O)) / 1e3;
 }
-var format = function(O, D, w) {
+var format = function(O, w, D) {
   var U = diffSec(O);
-  return formatDiff(U, getLocale(D));
+  return formatDiff(U, getLocale(w));
 };
 register("en_US", en_US);
 register("zh_CN", zh_CN);
@@ -288,26 +290,26 @@ const getInputChecked_ = function(O) {
     O.value
   ) : null;
 }, getSelectSingle_ = function(O) {
-  const D = (
+  const w = (
     /** @type {!HTMLSelectElement} */
     O.selectedIndex
   );
-  return D >= 0 ? (
+  return w >= 0 ? (
     /** @type {!HTMLSelectElement} */
-    O.options[D].value
+    O.options[w].value
   ) : null;
 }, getSelectMultiple_ = function(O) {
-  const D = [];
-  for (let w, U = 0; w = /** @type {!HTMLSelectElement} */
+  const w = [];
+  for (let D, U = 0; D = /** @type {!HTMLSelectElement} */
   O.options[U]; U++)
-    w.selected && D.push(w.value);
-  return D.length ? D : null;
+    D.selected && w.push(D.value);
+  return w.length ? w : null;
 }, getValue = function(O) {
-  const D = (
+  const w = (
     /** @type {!HTMLInputElement} */
     O.type
   );
-  switch (isString(D) && D.toLowerCase()) {
+  switch (isString(w) && w.toLowerCase()) {
     case "checkbox":
     case "radio":
       return getInputChecked_(O);
@@ -318,44 +320,44 @@ const getInputChecked_ = function(O) {
     default:
       return O.value !== null && O.value !== void 0 ? O.value : null;
   }
-}, formToJSON = (O) => [...O].reduce((D, w) => (D[w.name] = w.value, D), {}), replaceNode = (O, D) => {
-  const w = D.parentNode;
-  w && w.replaceChild(O, D);
-}, removeNode = (O) => O && O.parentNode ? O.parentNode.removeChild(O) : null, insertSiblingAfter = (O, D) => {
-  D.parentNode && D.parentNode.insertBefore(O, D.nextSibling);
-}, isInPage = (O) => O === document.body ? !1 : document.body.contains(O), getPos = (O) => [O.offsetLeft, O.offsetTop], randomColour = (O) => [1, 2, 3].map(() => Math.floor(Math.random() * 256) + 1).reduce((D, w) => `${D}${w},`, "rgba(") + `${O || 0.5}`, totalWidth = (O) => {
-  const D = window.getComputedStyle(O), w = O.offsetWidth, U = parseFloat(D.marginLeft) + parseFloat(D.marginRight), F = parseFloat(D.paddingLeft) + parseFloat(D.paddingRight), q = parseFloat(D.borderLeftWidth) + parseFloat(D.borderRightWidth);
-  return w + U - F + q;
+}, formToJSON = (O) => [...O].reduce((w, D) => (w[D.name] = D.value, w), {}), replaceNode = (O, w) => {
+  const D = w.parentNode;
+  D && D.replaceChild(O, w);
+}, removeNode = (O) => O && O.parentNode ? O.parentNode.removeChild(O) : null, insertSiblingAfter = (O, w) => {
+  w.parentNode && w.parentNode.insertBefore(O, w.nextSibling);
+}, isInPage = (O) => O === document.body ? !1 : document.body.contains(O), getPos = (O) => [O.offsetLeft, O.offsetTop], randomColour = (O) => [1, 2, 3].map(() => Math.floor(Math.random() * 256) + 1).reduce((w, D) => `${w}${D},`, "rgba(") + `${O || 0.5}`, totalWidth = (O) => {
+  const w = window.getComputedStyle(O), D = O.offsetWidth, U = parseFloat(w.marginLeft) + parseFloat(w.marginRight), F = parseFloat(w.paddingLeft) + parseFloat(w.paddingRight), q = parseFloat(w.borderLeftWidth) + parseFloat(w.borderRightWidth);
+  return D + U - F + q;
 }, totalHeight = (O) => {
-  const D = window.getComputedStyle(O), w = O.offsetHeight, U = parseFloat(D.marginTop) + parseFloat(D.marginBottom), F = parseFloat(D.paddingTop) + parseFloat(D.paddingBottom), q = parseFloat(D.borderTopWidth) + parseFloat(D.borderBottomWidth);
-  return w + U - F + q;
+  const w = window.getComputedStyle(O), D = O.offsetHeight, U = parseFloat(w.marginTop) + parseFloat(w.marginBottom), F = parseFloat(w.paddingTop) + parseFloat(w.paddingBottom), q = parseFloat(w.borderTopWidth) + parseFloat(w.borderBottomWidth);
+  return D + U - F + q;
 }, evalScripts = (comp) => (arr) => {
   arr && Array.from(arr).forEach((s) => {
     (function() {
       eval(s.text);
     }).bind(comp)();
   });
-}, evalModules = (O) => (D) => {
-  D && Array.from(D).forEach((w) => {
+}, evalModules = (O) => (w) => {
+  w && Array.from(w).forEach((D) => {
     (function() {
       const U = document.createElement("script");
-      U.type = "module", U.textContent = w.textContent;
-      const F = O.getElement(), q = getElDataMap(w).zv_comp_access;
+      U.type = "module", U.textContent = D.textContent;
+      const F = O.getElement(), q = getElDataMap(D).zv_comp_access;
       q && (F.zvComponent = O, F.classList.add(q)), F.appendChild(U);
     }).bind(O)();
   });
 }, splitScripts = (O) => {
-  const w = new DOMParser().parseFromString(O, "text/html");
+  const D = new DOMParser().parseFromString(O, "text/html");
   return {
-    html: w.body.firstElementChild,
-    scripts: w.querySelectorAll('script:not([type="module"])'),
-    modules: w.querySelectorAll('script[type="module"]')
+    html: D.body.firstElementChild,
+    scripts: D.querySelectorAll('script:not([type="module"])'),
+    modules: D.querySelectorAll('script[type="module"]')
   };
-}, handleTemplateProm = (O) => Promise.resolve(splitScripts(O)), enableClass = (O, D, w) => {
-  w ? O.classList.add(D) : O.classList.remove(D);
-}, toggleClass = (O, D) => {
-  const w = !Array.from(O.classList).includes(D);
-  return enableClass(O, D, w), w;
+}, handleTemplateProm = (O) => Promise.resolve(splitScripts(O)), enableClass = (O, w, D) => {
+  D ? O.classList.add(w) : O.classList.remove(w);
+}, toggleClass = (O, w) => {
+  const D = !Array.from(O.classList).includes(w);
+  return enableClass(O, w, D), D;
 }, getElDataMap = (O) => O ? Object.assign({}, O.dataset || {}) : {}, dtFormatter = {
   year: "numeric",
   month: "short",
@@ -377,13 +379,13 @@ const getInputChecked_ = function(O) {
   // hour12: false
   hourCycle: "h23"
 }), dateToZooyStdTimeString = (O) => {
-  const [{ value: D }, , { value: w }, , { value: U }, , { value: F }, , { value: q }, , { value: W }, ,] = dtf.formatToParts(O);
-  return `${w} ${D} ${U} ${F}:${q}:${W}`;
-}, parseMomentAgo = (O, D = "both", w = void 0) => {
+  const [{ value: w }, , { value: D }, , { value: U }, , { value: F }, , { value: q }, , { value: W }, ,] = dtf.formatToParts(O);
+  return `${D} ${w} ${U} ${F}:${q}:${W}`;
+}, parseMomentAgo = (O, w = "both", D = void 0) => {
   let U = O;
-  isNumber(U) && U < 9466848e5 ? U = U * 1e3 : w && (U = U + w);
+  isNumber(U) && U < 9466848e5 ? U = U * 1e3 : D && (U = U + D);
   const F = new Date(U), q = format(F), W = dateToZooyStdTimeString(F);
-  switch (D) {
+  switch (w) {
     case "time|ago":
       return `${W}|${q}`;
     case "ago":
@@ -397,35 +399,35 @@ const getInputChecked_ = function(O) {
       return `${q} (${W})`;
   }
 }, parseObfuscated = (O) => {
-  const w = ((F) => (q) => q < F.length - 4)(O);
-  return ((F) => F.split("").map((q, W) => w(W) ? "*" : q).join(""))(O);
-}, parseMap = (/* @__PURE__ */ new Map()).set(void 0, (O, D, w) => identity(O)).set("", (O, D, w) => identity(O)).set("class_update_only", (O, D, w) => identity(O)).set("frac_100", (O, D, w) => Math.round(O * 100 * 100) / 100).set("date_and_time", (O, D, w) => new Date(O).toLocaleString(void 0, dtFormatter)).set("date", (O, D, w) => new Date(O).toLocaleString(void 0, dFormatter)).set("moment_ago", (O, D, w) => parseMomentAgo(O, "both", w.zdd_date_tz || void 0)).set("moment_ago_only", (O, D, w) => parseMomentAgo(O, "ago", w.zdd_date_tz || void 0)).set("moment_ago_datetime", (O, D, w) => parseMomentAgo(O, "datetime", w.zdd_date_tz || void 0)).set("pretty-json", (O, D, w) => JSON.stringify(O, null, 4)).set("obfuscated", (O, D, w) => parseObfuscated(O)).set("linear-progress", (O, D, w) => {
-  const U = toNumber(w.zpmax), F = D.linProg;
+  const D = ((F) => (q) => q < F.length - 4)(O);
+  return ((F) => F.split("").map((q, W) => D(W) ? "*" : q).join(""))(O);
+}, parseMap = (/* @__PURE__ */ new Map()).set(void 0, (O, w, D) => identity(O)).set("", (O, w, D) => identity(O)).set("class_update_only", (O, w, D) => identity(O)).set("frac_100", (O, w, D) => Math.round(O * 100 * 100) / 100).set("date_and_time", (O, w, D) => new Date(O).toLocaleString(void 0, dtFormatter)).set("date", (O, w, D) => new Date(O).toLocaleString(void 0, dFormatter)).set("moment_ago", (O, w, D) => parseMomentAgo(O, "both", D.zdd_date_tz || void 0)).set("moment_ago_only", (O, w, D) => parseMomentAgo(O, "ago", D.zdd_date_tz || void 0)).set("moment_ago_datetime", (O, w, D) => parseMomentAgo(O, "datetime", D.zdd_date_tz || void 0)).set("pretty-json", (O, w, D) => JSON.stringify(O, null, 4)).set("obfuscated", (O, w, D) => parseObfuscated(O)).set("linear-progress", (O, w, D) => {
+  const U = toNumber(D.zpmax), F = w.linProg;
   return U && F && (F.progress = O / U, O = void 0), O;
 }), parseDataPropKvDef = (O) => O.trim().split(",").map((U) => U.trim()).map((U) => {
   const [F, q] = U.split(":").map((W) => W.trim());
   return [F, q];
-}).filter(([U, F]) => U !== "" && F !== ""), parseDataProps = (O, D) => {
-  const w = getElDataMap(O);
+}).filter(([U, F]) => U !== "" && F !== ""), parseDataProps = (O, w) => {
+  const D = getElDataMap(O);
   delete O.dataset.zoodatapropkv;
-  const U = w.zoodatapropkv || "";
+  const U = D.zoodatapropkv || "";
   return parseDataPropKvDef(U).forEach(([q, W]) => {
-    O.dataset[q] = pathOr(void 0, W.split("."))(D);
+    O.dataset[q] = pathOr(void 0, W.split("."))(w);
   }), O;
-}, mapDataToEls = (O, D, w = /* @__PURE__ */ new Map(), U = void 0) => {
-  if (!D)
+}, mapDataToEls = (O, w, D = /* @__PURE__ */ new Map(), U = void 0) => {
+  if (!w)
     return;
-  const F = new Map([...parseMap, ...w]);
+  const F = new Map([...parseMap, ...D]);
   [...O.querySelectorAll("[data-zdd],[data-zdd_class_update],[data-zdd_template_loop_index]")].forEach((q) => {
     const W = getElDataMap(q), X = W.zdd || "", G = W.zdd_parse_as, K = W.zdd_render_effect || "", Q = W.zdd_class_update, tt = W.zdd_template_loop_index, J = W.zdd_units || "";
-    let Y = pathOr(void 0, X.split("."))(D);
+    let Y = pathOr(void 0, X.split("."))(w);
     if (isDefAndNotNull(Y) && (Y = F.has(G) ? F.get(G)(Y, q, W) : Y), tt && isNumber(U) && (console.log("loopIndex: ", tt, " opt_loopIndex: ", U), tt === "zero_indexed" ? q.innerHTML = U : tt === "one_indexed" ? q.innerHTML = U + 1 : q.innerHTML = U), Q) {
-      const [Z, et, st] = Q.split(":"), rt = pathOr(void 0, Z.split("."))(D);
+      const [Z, et, st] = Q.split(":"), rt = pathOr(void 0, Z.split("."))(w);
       if (isDefAndNotNull(rt))
         switch (et) {
           case "swap": {
-            const nt = /\{}/gi, ot = st.replace(nt, ""), lt = st.replace(nt, rt);
-            q.classList.remove(...[...q.classList].filter((ht) => ht.includes(ot))), q.classList.add(lt);
+            const nt = /\{}/gi, ot = st.replace(nt, ""), ct = st.replace(nt, rt);
+            q.classList.remove(...[...q.classList].filter((ht) => ht.includes(ot))), q.classList.add(ct);
             break;
           }
           case "remove_on_data":
@@ -433,8 +435,8 @@ const getInputChecked_ = function(O) {
             break;
           case "choice_map":
             st.split("|").filter((nt) => nt !== "").forEach((nt) => {
-              const [ot, lt] = nt.split(">");
-              ot === rt + "" ? q.classList.add.apply(q.classList, lt.split(".")) : q.classList.remove.apply(q.classList, lt.split("."));
+              const [ot, ct] = nt.split(">");
+              ot === rt + "" ? q.classList.add.apply(q.classList, ct.split(".")) : q.classList.remove.apply(q.classList, ct.split("."));
             });
             break;
         }
@@ -515,18 +517,18 @@ class ComponentLibraryRegistry {
    *   config: { version: '2.0' }
    * });
    */
-  static register(D, w) {
-    if (!w.render)
-      throw new Error(`Component library '${D}' must provide a render function`);
-    this.#t.set(D, {
-      ...w,
+  static register(w, D) {
+    if (!D.render)
+      throw new Error(`Component library '${w}' must provide a render function`);
+    this.#t.set(w, {
+      ...D,
       // Preserve all library properties (utils, helpers, etc.)
-      dispose: w.dispose || null,
+      dispose: D.dispose || null,
       // Optional disposal function
       cache: /* @__PURE__ */ new Map(),
       // Each library gets its own import cache
-      config: w.config || {}
-    }), console.debug(`[ComponentLibraryRegistry] Registered: ${D}`);
+      config: D.config || {}
+    }), console.debug(`[ComponentLibraryRegistry] Registered: ${w}`);
   }
   /**
    * Gets a registered component library by name.
@@ -535,14 +537,14 @@ class ComponentLibraryRegistry {
    * @returns {Object} Library object with render, cache, config
    * @throws {Error} If library is not registered
    */
-  static get(D) {
-    if (!this.#t.has(D)) {
-      const w = Array.from(this.#t.keys()).join(", ");
+  static get(w) {
+    if (!this.#t.has(w)) {
+      const D = Array.from(this.#t.keys()).join(", ");
       throw new Error(
-        `Component library '${D}' is not registered. Available: ${w || "none"}`
+        `Component library '${w}' is not registered. Available: ${D || "none"}`
       );
     }
-    return this.#t.get(D);
+    return this.#t.get(w);
   }
   /**
    * Checks if a component library is registered.
@@ -550,8 +552,8 @@ class ComponentLibraryRegistry {
    * @param {string} name - Library identifier
    * @returns {boolean} True if registered
    */
-  static has(D) {
-    return this.#t.has(D);
+  static has(w) {
+    return this.#t.has(w);
   }
   /**
    * Gets all registered library names.
@@ -568,21 +570,21 @@ class ComponentLibraryRegistry {
    * @returns {Object} Map of library name → cache stats
    */
   static getCacheStats() {
-    const D = {};
-    for (const [w, U] of this.#t.entries())
-      D[w] = {
+    const w = {};
+    for (const [D, U] of this.#t.entries())
+      w[D] = {
         cacheSize: U.cache.size,
         config: U.config
       };
-    return D;
+    return w;
   }
   /**
    * Clears import caches for all component libraries.
    * Useful for development/hot-reload scenarios.
    */
   static clearAllCaches() {
-    for (const [D, w] of this.#t.entries())
-      w.cache.clear(), console.debug(`[ComponentLibraryRegistry] Cleared cache for: ${D}`);
+    for (const [w, D] of this.#t.entries())
+      D.cache.clear(), console.debug(`[ComponentLibraryRegistry] Cleared cache for: ${w}`);
   }
   /**
    * Clears cache for a specific library.
@@ -590,8 +592,8 @@ class ComponentLibraryRegistry {
    * @param {string} name - Library identifier
    * @throws {Error} If library is not registered
    */
-  static clearCache(D) {
-    this.get(D).cache.clear(), console.debug(`[ComponentLibraryRegistry] Cleared cache for: ${D}`);
+  static clearCache(w) {
+    this.get(w).cache.clear(), console.debug(`[ComponentLibraryRegistry] Cleared cache for: ${w}`);
   }
   /**
    * Unregisters a component library (primarily for testing).
@@ -599,8 +601,8 @@ class ComponentLibraryRegistry {
    * @param {string} name - Library identifier
    * @returns {boolean} True if library was unregistered, false if not found
    */
-  static unregister(D) {
-    return this.#t.delete(D);
+  static unregister(w) {
+    return this.#t.delete(w);
   }
   /**
    * Unregisters all component libraries (primarily for testing).
@@ -652,7 +654,7 @@ const ComponentError = {
    */
   STATE_INVALID: "Invalid component state"
 };
-class Component extends EVT {
+class Component extends Evt {
   //--[ Static ]--
   /**
    * Returns the component event type code used for dispatching component events.
@@ -694,8 +696,8 @@ class Component extends EVT {
   /**
    * @param {Element|undefined} e
    */
-  set target(D) {
-    this.#n = D;
+  set target(w) {
+    this.#n = w;
   }
   /**
    * @returns {Element|undefined}
@@ -707,8 +709,8 @@ class Component extends EVT {
    * Sets the model associated with the UI component.
    * @param {*} m
    */
-  set model(D) {
-    this.#r = D;
+  set model(w) {
+    this.#r = w;
   }
   /**
    * Returns the model associated with the UI component.
@@ -720,8 +722,8 @@ class Component extends EVT {
   /**
    * @param {boolean} bool
    */
-  set isInDocument(D) {
-    this.#e = D;
+  set isInDocument(w) {
+    this.#e = w;
   }
   /**
    * @return {boolean}
@@ -733,16 +735,16 @@ class Component extends EVT {
    * A function that makes a DOM element.
    * @param {!function():(!HTMLElement|!Element|!DocumentFragment)} func
    */
-  set domFunc(D) {
-    this.#t = D;
+  set domFunc(w) {
+    this.#t = w;
   }
   /**
    * @param {!Function} func A callback guaranteed to fire after the panels is
    * ready, and in the document, but before the
    * {@code UiEventType.READY} event is fired.
    */
-  set readyFunc(D) {
-    this.#a = D;
+  set readyFunc(w) {
+    this.#a = w;
   }
   //--[ DOM Management ]--
   /**
@@ -751,8 +753,8 @@ class Component extends EVT {
    * @param {!Node} frag The DOM node to set as this component's element
    * @private
    */
-  setElementInternal_(D) {
-    this.#s = D;
+  setElementInternal_(w) {
+    this.#s = w;
   }
   /**
    * Gets the component's element.
@@ -794,8 +796,8 @@ class Component extends EVT {
    * @param {Element=} opt_parentElement Optional parent element to render the
    *    component into.
    */
-  render(D) {
-    this.render_(D);
+  render(w) {
+    this.render_(w);
   }
   /**
    * Renders the component.  If a parent element is supplied, the component's
@@ -813,28 +815,28 @@ class Component extends EVT {
    *    component into.
    * @private
    */
-  render_(D) {
+  render_(w) {
     if (this.disposed)
       throw new Error(ComponentError.ALREADY_DISPOSED);
     if (this.isInDocument)
       throw new Error(ComponentError.ALREADY_RENDERED);
     this.#s || this.createDom();
-    const w = (
+    const D = (
       /** @type {!Node} */
       this.#s
     );
-    D && (this.#n = D), this.placeholderDom && removeNode(this.placeholderDom), this.#n ? isInPage(w) || this.#n.insertBefore(w, null) : isInPage(
+    w && (this.#n = w), this.placeholderDom && removeNode(this.placeholderDom), this.#n ? isInPage(D) || this.#n.insertBefore(D, null) : isInPage(
       /** @type {!Node} */
-      w
-    ) || document.body.appendChild(w), (!this.#i || this.#i.isInDocument) && this.enterDocument();
+      D
+    ) || document.body.appendChild(D), (!this.#i || this.#i.isInDocument) && this.enterDocument();
   }
   //--[ Life-cycle ]--
   /**
    * @param {Node} el
    * @param {Node} targetParent
    */
-  hoist(D, w = void 0) {
-    w || (w = document.querySelector("body")), w.appendChild(D), this.outOfTreeElements.push(D);
+  hoist(w, D = void 0) {
+    D || (D = document.querySelector("body")), D.appendChild(w), this.outOfTreeElements.push(w);
   }
   /**
    * Executes the beforeReady callback function if one was set.
@@ -852,8 +854,8 @@ class Component extends EVT {
    * children.
    */
   enterDocument() {
-    this.disposed ? removeNode(this.getElement()) : (this.isInDocument = !0, [...this.#o.values()].forEach((D) => {
-      !D.isInDocument && D.getElement() && D.enterDocument();
+    this.disposed ? removeNode(this.getElement()) : (this.isInDocument = !0, [...this.#o.values()].forEach((w) => {
+      !w.isInDocument && w.getElement() && w.enterDocument();
     }), this.executeBeforeReady(), this.dispatchCompEvent(UiEventType.READY));
   }
   /**
@@ -868,8 +870,8 @@ class Component extends EVT {
    * method has been called.
    */
   exitDocument() {
-    [...this.#o.values()].forEach((D) => {
-      D.isInDocument && D.exitDocument();
+    [...this.#o.values()].forEach((w) => {
+      w.isInDocument && w.exitDocument();
     }), this.stopBeingListenedTo(), this.removeAllListener(), this.isInDocument = !1, removeNode(this.getElement()), this.placeholderDom && removeNode(this.placeholderDom);
   }
   /**
@@ -880,7 +882,7 @@ class Component extends EVT {
    * @protected
    */
   disposeInternal() {
-    this.isInDocument && this.exitDocument(), this.#o && [...this.#o.values()].forEach((D) => D.disposeInternal()), this.outOfTreeElements.forEach(removeNode), this.#s && removeNode(this.#s), this.placeholderDom && removeNode(this.placeholderDom), this.#o = null, this.#s = void 0, this.#r = null, this.#i = null, super.disposeInternal();
+    this.isInDocument && this.exitDocument(), this.#o && [...this.#o.values()].forEach((w) => w.disposeInternal()), this.outOfTreeElements.forEach(removeNode), this.#s && removeNode(this.#s), this.placeholderDom && removeNode(this.placeholderDom), this.#o = null, this.#s = void 0, this.#r = null, this.#i = null, super.disposeInternal();
   }
   /**
    * Disposes of the component and performs cleanup. Aborts any pending async
@@ -890,14 +892,14 @@ class Component extends EVT {
    */
   dispose() {
     this.abortController && this.abortController.abort();
-    const D = this.getElement();
-    if (D)
-      for (const w of ComponentLibraryRegistry.getRegisteredLibraries())
+    const w = this.getElement();
+    if (w)
+      for (const D of ComponentLibraryRegistry.getRegisteredLibraries())
         try {
-          const U = ComponentLibraryRegistry.get(w);
-          U.dispose && U.dispose(D);
+          const U = ComponentLibraryRegistry.get(D);
+          U.dispose && U.dispose(w);
         } catch (U) {
-          console.debug(`[${w}] Cleanup error during component disposal (non-critical):`, U);
+          console.debug(`[${D}] Cleanup error during component disposal (non-critical):`, U);
         }
     super.dispose();
   }
@@ -918,8 +920,8 @@ class Component extends EVT {
    * @return {boolean} If anyone called preventDefault on the event object (or
    *     if any of the handlers returns false this will also return false.
    */
-  dispatchCompEvent(D, w) {
-    const U = new ZooyEventData(D, w), F = EVT.makeEvent(UiEventType.COMP, U);
+  dispatchCompEvent(w, D) {
+    const U = new ZooyEventData(w, D), F = Evt.makeEvent(UiEventType.COMP, U);
     return this.dispatchEvent(F);
   }
 }
@@ -951,12 +953,12 @@ const EV = {
   DROP: "drop",
   // Transitions
   TRANSITIONEND: "transitionend"
-}, touchEvents = [EV.TOUCHMOVE, EV.TOUCHSTART, EV.TOUCHEND], isTouchEvent = (O) => touchEvents.includes(O.type), normalizeEvent = (O) => (isTouchEvent(O) && (O.clientX = O.targetTouches[0].clientX, O.clientY = O.targetTouches[0].clientY), O), dragStartListener = (O, D, w, U) => (F) => {
+}, touchEvents = [EV.TOUCHMOVE, EV.TOUCHSTART, EV.TOUCHEND], isTouchEvent = (O) => touchEvents.includes(O.type), normalizeEvent = (O) => (isTouchEvent(O) && (O.clientX = O.targetTouches[0].clientX, O.clientY = O.targetTouches[0].clientY), O), dragStartListener = (O, w, D, U) => (F) => {
   F.preventDefault();
   const q = normalizeEvent(F), W = (
     /** @type {!HTMLElement} */
     q.currentTarget
-  ), [X, G] = getPos(W), K = q.clientX - X, Q = q.clientY - G, tt = O(X, G, K, Q, W), J = w(X, G, K, Q, W), Y = D(X, G, K, Q, W);
+  ), [X, G] = getPos(W), K = q.clientX - X, Q = q.clientY - G, tt = O(X, G, K, Q, W), J = D(X, G, K, Q, W), Y = w(X, G, K, Q, W);
   let Z = freeMoveListener(Y, W, K, Q);
   ["x", "ew"].includes(U) ? Z = xMoveOnlyListener(Y, W, K) : ["y", "ns"].includes(U) && (Z = yMoveOnlyListener(Y, W, K, Q));
   let et = !1;
@@ -966,29 +968,29 @@ const EV = {
     document.removeEventListener(EV.MOUSEMOVE, st, !0), document.removeEventListener(EV.TOUCHMOVE, st, !0), document.removeEventListener(EV.MOUSEUP, rt, !0), document.removeEventListener(EV.TOUCHEND, rt, !0), et && J(nt);
   };
   return document.addEventListener(EV.MOUSEUP, rt, !0), document.addEventListener(EV.TOUCHEND, rt, !0), document.addEventListener(EV.MOUSEMOVE, st, !0), document.addEventListener(EV.TOUCHMOVE, st, !0), tt(F), rt;
-}, freeMoveListener = (O, D, w, U) => (F) => {
+}, freeMoveListener = (O, w, D, U) => (F) => {
   F.preventDefault();
   const q = normalizeEvent(F);
-  D.style.left = `${q.clientX - w}px`, D.style.top = `${q.clientY - U}px`, O(q);
-}, xMoveOnlyListener = (O, D, w, U) => (F) => {
+  w.style.left = `${q.clientX - D}px`, w.style.top = `${q.clientY - U}px`, O(q);
+}, xMoveOnlyListener = (O, w, D, U) => (F) => {
   F.preventDefault();
   const q = normalizeEvent(F);
-  D.style.left = `${q.clientX - w}px`, O(q);
-}, yMoveOnlyListener = (O, D, w, U) => (F) => {
+  w.style.left = `${q.clientX - D}px`, O(q);
+}, yMoveOnlyListener = (O, w, D, U) => (F) => {
   F.preventDefault();
   const q = normalizeEvent(F);
-  D.style.top = `${q.clientY - U}px`, O(q);
-}, makeEmitter = (O, D) => (w, U, F, q, W) => (X) => {
-  O.dispatchCompEvent(D, {
+  w.style.top = `${q.clientY - U}px`, O(q);
+}, makeEmitter = (O, w) => (D, U, F, q, W) => (X) => {
+  O.dispatchCompEvent(w, {
     component: O,
     browserEvent: X,
-    left: w,
+    left: D,
     top: U,
     clientX: X.clientX,
     clientY: X.clientY,
     xOrg: F,
     yOrg: q,
-    deltaX: X.clientX - F - w,
+    deltaX: X.clientX - F - D,
     deltaY: X.clientY - q - U,
     target: W
   });
@@ -1002,15 +1004,15 @@ class Dragger extends Component {
    * @param {string} freedom Restrict the directions in which the
    * dragger can be moved.
    */
-  constructor(D = "xy") {
-    super(), this.#t = ["x", "y", "xy", "ew", "ns"].includes(D.toLowerCase()) ? D.toLowerCase() : "xy", this.#e = void 0, this.#s = !0, this.#r = (w) => null;
+  constructor(w = "xy") {
+    super(), this.#t = ["x", "y", "xy", "ew", "ns"].includes(w.toLowerCase()) ? w.toLowerCase() : "xy", this.#e = void 0, this.#s = !0, this.#r = (D) => null;
   }
   /**
    * Cancels the current drag operation in progress, if any.
    * @param {!Event} event The event that triggered the cancel
    */
-  cancelDrag(D) {
-    this.#r(D);
+  cancelDrag(w) {
+    this.#r(w);
   }
   //--[ Getters and Setters ]--
   /**
@@ -1019,8 +1021,8 @@ class Dragger extends Component {
    * Anything else will be considered free movement
    * @param {string} axis
    */
-  set moveFreedom(D) {
-    this.#t = D, this.#s || (this.lock(), this.unlock());
+  set moveFreedom(w) {
+    this.#t = w, this.#s || (this.lock(), this.unlock());
   }
   /**
    * Get the direction in which this component can move.
@@ -1041,18 +1043,18 @@ class Dragger extends Component {
    * Make the component draggable
    */
   unlock() {
-    const D = (w) => (U) => {
-      this.#r = w(U);
+    const w = (D) => (U) => {
+      this.#r = D(U);
     };
     if (this.isInDocument && this.#s) {
-      const w = makeEmitter(this, UiEventType.COMP_DRAG_MOVE), U = makeEmitter(this, UiEventType.COMP_DRAG_START), F = makeEmitter(this, UiEventType.COMP_DRAG_END), q = dragStartListener(
+      const D = makeEmitter(this, UiEventType.COMP_DRAG_MOVE), U = makeEmitter(this, UiEventType.COMP_DRAG_START), F = makeEmitter(this, UiEventType.COMP_DRAG_END), q = dragStartListener(
         U,
-        w,
+        D,
         F,
         this.#t
       );
       this.#s = !1, this.#e = /** @type {!Node} */
-      this.#e || this.getElement(), this.listen(this.#e, EV.MOUSEDOWN, D(q)), this.listen(this.#e, EV.TOUCHSTART, q), this.#e.classList.remove("locked");
+      this.#e || this.getElement(), this.listen(this.#e, EV.MOUSEDOWN, w(q)), this.listen(this.#e, EV.TOUCHSTART, q), this.#e.classList.remove("locked");
     }
   }
   /**
@@ -1071,54 +1073,51 @@ const splitRe_ = new RegExp(
 }, split = (O) => (
   /** @type {!Array<string|undefined>} */
   O.match(splitRe_)
-), decodeOrEmpty_ = (O, D) => O ? decodeURI(O.replace(/%25/g, "%2525")) : "", getPath = (O) => decodeOrEmpty_(split(O)[ComponentIndex.PATH]), getQueryData = (O) => decodeOrEmpty_(split(O)[ComponentIndex.QUERY_DATA]), objectToUrlParms = (O) => [...Object.entries(O)].map(
-  (D) => `${D[0]}=${D[1]}`
-).join("&"), isValidValue = (O) => O != null && O !== "", queryDataToMap = (O) => O.split("&").reduce((D, w) => {
-  const [U, F] = w.split("=");
-  return isValidValue(U) && isValidValue(F) && D.set(U, F), D;
+), decodeOrEmpty_ = (O, w) => O ? decodeURI(O.replace(/%25/g, "%2525")) : "", getPath = (O) => decodeOrEmpty_(split(O)[ComponentIndex.PATH]), getQueryData = (O) => decodeOrEmpty_(split(O)[ComponentIndex.QUERY_DATA]), objectToUrlParms = (O) => [...Object.entries(O)].map(
+  (w) => `${w[0]}=${w[1]}`
+).join("&"), isValidValue = (O) => O != null && O !== "", queryDataToMap = (O) => O.split("&").reduce((w, D) => {
+  const [U, F] = D.split("=");
+  return isValidValue(U) && isValidValue(F) && w.set(U, F), w;
 }, /* @__PURE__ */ new Map()), uriUtils = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   getPath,
   getQueryData,
   objectToUrlParms,
   queryDataToMap
-}, Symbol.toStringTag, { value: "Module" })), stripLeadingSpace = stripLeadingChar(" "), stripLeadingSlash = stripLeadingChar("/"), getCookieByName = (O) => document.cookie.split(";").map((D) => D.split("=")).reduce((D, w) => D.set(stripLeadingSpace(w[0]), w[1]), /* @__PURE__ */ new Map()).get(O), spinner = (O) => {
-  let D = 0, w;
+}, Symbol.toStringTag, { value: "Module" })), stripLeadingSpace = stripLeadingChar(" "), stripLeadingSlash = stripLeadingChar("/"), getCookieByName = (O) => document.cookie.split(";").map((w) => w.split("=")).reduce((w, D) => w.set(stripLeadingSpace(D[0]), D[1]), /* @__PURE__ */ new Map()).get(O), spinner = (O) => {
+  let w = 0, D;
   const U = (F) => {
     const q = F > 0;
-    return q ? D += 1 : D -= 1, q ? D === 1 : D === 0;
+    return q ? w += 1 : w -= 1, q ? w === 1 : w === 0;
   };
   return (F) => {
-    w = w || document.getElementById(O), w && U(F) && w.classList.toggle("viz", D > 0);
+    D = D || document.getElementById(O), D && U(F) && D.classList.toggle("viz", w > 0);
   };
-}, spin = spinner("the_loader"), startSpin = () => Promise.resolve(spin(1)), stopSpin = (O) => (spin(0), Promise.resolve(O)), checkStatus = (O) => O.ok ? Promise.resolve(O) : Promise.reject(new Error(`${O.url} ${O.status} (${O.statusText})`)), checkStatusTwo = (O) => (D) => {
-  if (D.type === "opaqueredirect" || D.redirected) {
-    const w = stripLeadingSlash(getPath(D.url));
-    O.setIsRedirected(!0, w), console.log("Redirect detected", w);
-  }
-  return checkStatus(D);
-}, getJson = (O) => O.status === 204 ? Promise.resolve({}) : O.json().then(
-  (D) => Promise.resolve(D),
-  (D) => Promise.reject(new Error(`Could not get JSON from response: ${D}`))
-), getText = (O) => O.text().then(
-  (D) => Promise.resolve(D),
-  (D) => Promise.reject(new Error(`Could not get text from response: ${D}`))
-), getTextOrJson = (O) => O.headers.get("Content-Type") === "application/json" ? getJson(O) : getText(O), jsonInit = (O, D, w = "POST", U = void 0) => {
+}, spin = spinner("the_loader"), startSpin = () => Promise.resolve(spin(1)), stopSpin = (O) => (spin(0), Promise.resolve(O)), checkStatus = (O) => O.ok ? Promise.resolve(O) : Promise.reject(new Error(`${O.url} ${O.status} (${O.statusText})`)), checkStatusTwo = (O) => (w) => {
+  if (w.type === "opaqueredirect" || w.redirected) {
+    const D = stripLeadingSlash(getPath(w.url));
+    O.setIsRedirected(!0, D), console.log("Redirect detected", D);
+  }
+  return checkStatus(w);
+}, getJson = (O) => O.json(), getText = (O) => O.text().then(
+  (w) => Promise.resolve(w),
+  (w) => Promise.reject(new Error(`Could not get text from response: ${w}`))
+), getTextOrJson = (O) => O.headers.get("Content-Type") === "application/json" ? getJson(O) : getText(O), jsonInit = (O, w, D = "POST", U = void 0) => {
   const F = new Headers();
   F.append("Content-type", "application/json"), F.append("X-Requested-With", "XMLHttpRequest"), O && O !== "" && F.append("Authorization", `Bearer ${O}`);
   const q = {
     cache: "no-cache",
-    method: w,
+    method: D,
     headers: F,
     credentials: "include",
-    body: JSON.stringify(D)
+    body: JSON.stringify(w)
   };
   return U && (q.signal = U), q;
-}, basicPutPostPatchInit = (O, D, w = !1, U = void 0) => {
+}, basicPutPostPatchInit = (O, w, D = !1, U = void 0) => {
   const F = new Headers();
-  if (D && D !== "" && F.append("Authorization", `Bearer ${D}`), F.append("X-Requested-With", "XMLHttpRequest"), w) {
+  if (w && w !== "" && F.append("Authorization", `Bearer ${w}`), F.append("X-Requested-With", "XMLHttpRequest"), D) {
     const W = getCookieByName("csrftoken");
-    W && w && F.append("X-CSRFToken", W);
+    W && D && F.append("X-CSRFToken", W);
   }
   const q = {
     cache: "no-cache",
@@ -1129,28 +1128,28 @@ const splitRe_ = new RegExp(
     credentials: "include"
   };
   return U && (q.signal = U), q;
-}, formPostInit = (O, D, w = void 0) => {
-  const F = basicPutPostPatchInit("POST", O, !1, w);
-  return F.body = new FormData(D.formEl), F;
-}, basicGetInit = (O, D = void 0) => {
-  const w = new Headers();
-  w.append("Authorization", `Bearer ${O}`), w.append("X-Requested-With", "XMLHttpRequest");
+}, formPostInit = (O, w, D = void 0) => {
+  const F = basicPutPostPatchInit("POST", O, !1, D);
+  return F.body = new FormData(w.formEl), F;
+}, basicGetInit = (O, w = void 0) => {
+  const D = new Headers();
+  D.append("Authorization", `Bearer ${O}`), D.append("X-Requested-With", "XMLHttpRequest");
   const U = {
     cache: "no-cache",
-    headers: w,
+    headers: D,
     credentials: "include"
   };
-  return D && (U.signal = D), U;
-}, putPostPatchNobody = (O, D) => {
-  const w = new Request(O);
-  return fetch(w, D).then(checkStatus).then(getText);
-}, genCatchClause = (O, D = void 0) => (w) => (stopSpin("").then(identity), w.name === "AbortError" ? console.info(O, "ABORTED!") : console.error(O, w), D);
+  return w && (U.signal = w), U;
+}, putPostPatchNobody = (O, w) => {
+  const D = new Request(O);
+  return fetch(D, w).then(checkStatus).then(getText);
+}, genCatchClause = (O, w = void 0) => (D) => (stopSpin("").then(identity), D.name === "AbortError" ? console.info(O, "ABORTED!") : console.error(O, D), w);
 class UserManager {
   /**
    * @param {!Object=} opt_data
    */
-  constructor(D) {
-    this.user_ = {}, this.jwt = "", D && this.updateProfileFromJwt(D).then(() => {
+  constructor(w) {
+    this.user_ = {}, this.jwt = "", w && this.updateProfileFromJwt(w).then(() => {
     });
   }
   /**
@@ -1159,20 +1158,20 @@ class UserManager {
    * @return {Promise}
    * @private
    */
-  updateProfileFromJwt(D, w = !1) {
-    return w && this.jwt !== "" ? Promise.resolve("User Profile Already exists") : D.non_field_errors ? Promise.reject(new Error(`JWT ${D.non_field_errors}`)) : (this.updateToken(D.token), this.updateProfile(D.user), Promise.resolve("User Profile Updated"));
+  updateProfileFromJwt(w, D = !1) {
+    return D && this.jwt !== "" ? Promise.resolve("User Profile Already exists") : w.non_field_errors ? Promise.reject(new Error(`JWT ${w.non_field_errors}`)) : (this.updateToken(w.token), this.updateProfile(w.user), Promise.resolve("User Profile Updated"));
   }
   /**
    * @param {UserLikeType} data
    */
-  updateProfile(D) {
-    this.user_ = D;
+  updateProfile(w) {
+    this.user_ = w;
   }
   /**
    * @param {string} t
    */
-  updateToken(D) {
-    this.jwt = D;
+  updateToken(w) {
+    this.jwt = w;
   }
   /**
    * @return {number|undefined}
@@ -1196,21 +1195,21 @@ class UserManager {
    * @return {string|undefined}
    */
   get salutation() {
-    let D = this.name;
-    const w = this.surname;
-    return w && (D = D + " " + w), D;
+    let w = this.name;
+    const D = this.surname;
+    return D && (w = w + " " + D), w;
   }
   /**
    * @param {FormPanel} formPanel
    * @return {Promise}
    */
-  formSubmit(D) {
-    const w = new Request(D.uri.toString()), U = D.processSubmitReply.bind(D), F = genCatchClause("Form submit error");
-    return startSpin().then(() => fetch(w, formPostInit(
+  formSubmit(w) {
+    const D = new Request(w.uri.toString()), U = w.processSubmitReply.bind(w), F = genCatchClause("Form submit error");
+    return startSpin().then(() => fetch(D, formPostInit(
       this.jwt,
-      D,
-      D.abortController.signal
-    ))).then(checkStatusTwo(D)).then(stopSpin).then(getTextOrJson).then(U).catch(F);
+      w,
+      w.abortController.signal
+    ))).then(checkStatusTwo(w)).then(stopSpin).then(getTextOrJson).then(U).catch(F);
   }
   /**
    * @param {string} uri
@@ -1218,23 +1217,23 @@ class UserManager {
    * @param {AbortSignal|undefined} signal
    * @return {Promise}
    */
-  putNoBody(D, w = void 0, U = !1) {
+  putNoBody(w, D = void 0, U = !1) {
     const F = genCatchClause("putNobody error"), q = basicPutPostPatchInit(
       "PUT",
       this.jwt,
       U,
-      w
+      D
     );
-    return putPostPatchNobody(D, q).catch(F);
+    return putPostPatchNobody(w, q).catch(F);
   }
   /**
    * @param {string} uri
    * @param {AbortSignal|undefined} signal
    * @return {Promise}
    */
-  fetch(D, w = void 0) {
-    const U = new Request(D.toString()), F = genCatchClause(`UMan Text GET Fetch: ${D}`);
-    return startSpin().then(() => fetch(U, basicGetInit(this.jwt, w))).then(checkStatus).then(stopSpin).then(getText).catch(F);
+  fetch(w, D = void 0) {
+    const U = new Request(w.toString()), F = genCatchClause(`UMan Text GET Fetch: ${w}`);
+    return startSpin().then(() => fetch(U, basicGetInit(this.jwt, D))).then(checkStatus).then(stopSpin).then(getText).catch(F);
   }
   /**
    * Use this if you want to directly get a parsed template that does not go
@@ -1243,18 +1242,25 @@ class UserManager {
    * @param {AbortSignal|undefined} signal
    * @return {Promise}
    */
-  fetchAndSplit(D, w = void 0) {
-    const U = genCatchClause(`fetchAndSplit: ${D}`);
-    return this.fetch(D, w).then(handleTemplateProm).catch(U);
+  fetchAndSplit(w, D = void 0) {
+    const U = genCatchClause(`fetchAndSplit: ${w}`);
+    return this.fetch(w, D).then(handleTemplateProm).catch(U);
   }
   /**
    * @param {string} uri
    * @param {AbortSignal|undefined} signal
    * @return {Promise}
    */
-  fetchJson(D, w = void 0) {
-    const U = new Request(D.toString()), F = genCatchClause(`fetchJson: ${D}`, {}), q = basicGetInit(this.jwt, w);
-    return startSpin().then(() => fetch(U, q)).then(checkStatus).then(stopSpin).then(getJson).catch(F);
+  async fetchJson(w, D = void 0) {
+    const U = new Request(w.toString()), F = genCatchClause(`fetchJson: ${w}`, {}), q = basicGetInit(this.jwt, D);
+    await startSpin();
+    let W = {};
+    try {
+      W = await (await fetch(U, q)).json();
+    } catch (X) {
+      return F(X);
+    }
+    return await stopSpin(), W;
   }
   /**
    * @param {string} uri
@@ -1262,8 +1268,8 @@ class UserManager {
    * @param {AbortSignal|undefined} signal
    * @return {Promise}
    */
-  patchJson(D, w, U = void 0) {
-    const F = new Request(D.toString()), q = genCatchClause(`patchJson: ${D}`), W = jsonInit(this.jwt, w, "PATCH", U);
+  patchJson(w, D, U = void 0) {
+    const F = new Request(w.toString()), q = genCatchClause(`patchJson: ${w}`), W = jsonInit(this.jwt, D, "PATCH", U);
     return fetch(F, W).then(checkStatus).then(getJson).catch(q);
   }
   /**
@@ -1272,8 +1278,8 @@ class UserManager {
    * @param {AbortSignal|undefined} signal
    * @return {Promise}
    */
-  postJson(D, w, U = void 0) {
-    const F = new Request(D.toString()), q = genCatchClause(`postJson: ${D}`), W = jsonInit(this.jwt, w, "POST", U);
+  postJson(w, D, U = void 0) {
+    const F = new Request(w.toString()), q = genCatchClause(`postJson: ${w}`), W = jsonInit(this.jwt, D, "POST", U);
     return fetch(F, W).then(checkStatus).then(getJson).catch(q);
   }
   /**
@@ -1282,8 +1288,8 @@ class UserManager {
    * @param {AbortSignal|undefined} signal
    * @return {Promise}
    */
-  putJson(D, w, U = void 0) {
-    const F = new Request(D.toString()), q = genCatchClause(`putJson: ${D}`), W = jsonInit(this.jwt, w, "PUT", U);
+  putJson(w, D, U = void 0) {
+    const F = new Request(w.toString()), q = genCatchClause(`putJson: ${w}`), W = jsonInit(this.jwt, D, "PUT", U);
     return fetch(F, W).then(checkStatus).then(getJson).catch(q);
   }
   /**
@@ -1292,8 +1298,8 @@ class UserManager {
    * @param {AbortSignal|undefined} signal
    * @return {Promise}
    */
-  delJson(D, w, U = void 0) {
-    const F = new Request(D.toString()), q = genCatchClause(`delJson: ${D}`), W = jsonInit(this.jwt, w, "DELETE", U);
+  delJson(w, D, U = void 0) {
+    const F = new Request(w.toString()), q = genCatchClause(`delJson: ${w}`), W = jsonInit(this.jwt, D, "DELETE", U);
     return fetch(F, W).then(checkStatus).then(getJson).catch(q);
   }
 }
@@ -1316,8 +1322,8 @@ class Panel extends Component {
    * Creates a new Panel instance.
    * @param {string=} uri Optional URI for fetching panel content
    */
-  constructor(D) {
-    super(), this.qParamMap_ = /* @__PURE__ */ new Map(), this.uri_ = "", D && this.parseUri(D), this.evalScripts = evalScripts(this), this.evalModules = evalModules(this), this.redirected = !1, this.responseObject = { html: null, scripts: null }, this.user_ = void 0, "AbortController" in window ? this.abortController = new AbortController() : this.abortController = {
+  constructor(w) {
+    super(), this.qParamMap_ = /* @__PURE__ */ new Map(), this.uri_ = "", w && this.parseUri(w), this.evalScripts = evalScripts(this), this.evalModules = evalModules(this), this.redirected = !1, this.responseObject = { html: null, scripts: null }, this.user_ = void 0, "AbortController" in window ? this.abortController = new AbortController() : this.abortController = {
       signal: void 0,
       abort: () => {
       }
@@ -1325,14 +1331,14 @@ class Panel extends Component {
   }
   //--[ Getters and Setters ]--
   get uri() {
-    const D = this.qParamMap_.size > 0 ? "?" + objectToUrlParms(Object.fromEntries(this.qParamMap_)) : "";
-    return this.uri_ + D;
+    const w = this.qParamMap_.size > 0 ? "?" + objectToUrlParms(Object.fromEntries(this.qParamMap_)) : "";
+    return this.uri_ + w;
   }
   /**
    * @param {!UserManager} user
    */
-  set user(D) {
-    this.user_ = D;
+  set user(w) {
+    this.user_ = w;
   }
   /**
    * @return {!UserManager}
@@ -1345,23 +1351,23 @@ class Panel extends Component {
    * internal URI and query parameter map.
    * @param {string} uri The URI to parse
    */
-  parseUri(D) {
-    this.uri_ = getPath(D), this.qParamMap_ = queryDataToMap(getQueryData(D));
+  parseUri(w) {
+    this.uri_ = getPath(w), this.qParamMap_ = queryDataToMap(getQueryData(w));
   }
   /**
    * Adds or updates a query parameter in the panel's query parameter map.
    * @param {string} k The parameter key
    * @param {string} v The parameter value
    */
-  addToQParams(D, w) {
-    this.qParamMap_.set(D, w);
+  addToQParams(w, D) {
+    this.qParamMap_.set(w, D);
   }
   /**
    * Removes a query parameter from the panel's query parameter map.
    * @param {string} k The parameter key to remove
    */
-  removeFromQParams(D) {
-    this.qParamMap_.delete(D);
+  removeFromQParams(w) {
+    this.qParamMap_.delete(w);
   }
   /**
    * Clears all query parameters from the panel's query parameter map.
@@ -1379,8 +1385,8 @@ class Panel extends Component {
    *   const tables = this.getCarbonComponents('cds-table');
    *   const buttons = this.getCarbonComponents('cds-button');
    */
-  getCarbonComponents(D) {
-    return this.carbonComponents?.get(D) || [];
+  getCarbonComponents(w) {
+    return this.carbonComponents?.get(w) || [];
   }
   /**
    * Gets a single Carbon component by its ID.
@@ -1390,10 +1396,10 @@ class Panel extends Component {
    * @example
    *   const table = this.getCarbonComponentById('companies-table');
    */
-  getCarbonComponentById(D) {
+  getCarbonComponentById(w) {
     if (this.carbonComponents)
-      for (const w of this.carbonComponents.values()) {
-        const U = w.find((F) => F.id === D);
+      for (const D of this.carbonComponents.values()) {
+        const U = D.find((F) => F.id === w);
         if (U)
           return U;
       }
@@ -1403,8 +1409,8 @@ class Panel extends Component {
    * Temporarily render placeholder DOM
    * @param {Node!} placeholder
    */
-  renderPlaceHolder(D) {
-    this.target && (this.placeholderDom = D, this.target.insertBefore(this.placeholderDom, null));
+  renderPlaceHolder(w) {
+    this.target && (this.placeholderDom = w, this.target.insertBefore(this.placeholderDom, null));
   }
   /**
    * Expects HTML data from a call to the back.
@@ -1414,9 +1420,9 @@ class Panel extends Component {
    * panel stays in place on the DOM for the duration of the fetch call.
    * @return {Promise} Returns a promise with this panel as value.
    */
-  renderWithTemplate(D) {
-    const w = this.user;
-    return w ? w.fetch(this.uri, this.abortController.signal).then((U) => (this.assertCanRenderAsync(), D && D(this), this.onRenderWithTemplateReply(U).catch((F) => {
+  renderWithTemplate(w) {
+    const D = this.user;
+    return D ? D.fetch(this.uri, this.abortController.signal).then((U) => (this.assertCanRenderAsync(), w && w(this), this.onRenderWithTemplateReply(U).catch((F) => {
       F.message !== Component.compErrors().ALREADY_DISPOSED && console.error("RenderWithTemplate Err:", F);
     }), this)).catch((U) => {
       throw console.error("Panel.renderWithTemplate fetch failed:", U), U;
@@ -1427,8 +1433,8 @@ class Panel extends Component {
    * @private
    * @return {Promise}
    */
-  onRenderWithTemplateReply(D) {
-    return this.responseObject = splitScripts(D), this.domFunc = () => (
+  onRenderWithTemplateReply(w) {
+    return this.responseObject = splitScripts(w), this.domFunc = () => (
       /** @type {!Element} */
       this.responseObject.html
     ), this.render(), Promise.resolve(this);
@@ -1450,20 +1456,20 @@ class Panel extends Component {
    * @param content
    * @param qs
    */
-  onReplacePartialDom(D, w) {
+  onReplacePartialDom(w, D) {
     const U = this.getElement();
     if (isUndefined(U))
       return;
-    const F = D.html;
-    if (w.startsWith("."))
-      [...U.querySelectorAll(w)].filter((q) => isDefAndNotNull(q.id)).map((q) => [q, F.querySelector(`#${q.id}`)]).filter(([q, W]) => isDefAndNotNull(W)).forEach(([q, W]) => {
+    const F = w.html;
+    if (D.startsWith("."))
+      [...U.querySelectorAll(D)].filter((q) => isDefAndNotNull(q.id)).map((q) => [q, F.querySelector(`#${q.id}`)]).filter(([q, W]) => isDefAndNotNull(W)).forEach(([q, W]) => {
         q.parentNode.replaceChild(W, q), this.parseContent(W);
       });
-    else if (w.startsWith("#")) {
-      const q = F.querySelector(w), W = U.querySelector(w);
+    else if (D.startsWith("#")) {
+      const q = F.querySelector(D), W = U.querySelector(D);
       W.parentNode.replaceChild(q, W), this.parseContent(q);
     }
-    this.evalScripts(D.scripts), this.evalModules(D.modules);
+    this.evalScripts(w.scripts), this.evalModules(w.modules);
   }
   //--[ JSON Render ]-----
   /**
@@ -1472,9 +1478,9 @@ class Panel extends Component {
    * @param {function(Object, !Panel)} opt_callback The callback function
    *      that will receive the reply event.
    */
-  renderWithJSON(D) {
+  renderWithJSON(w) {
     return this.user ? this.user.fetchJson(this.uri_, this.abortController.signal).then((U) => {
-      this.assertCanRenderAsync(), D && D(U, this), this.onRenderWithJSON(U).then(identity);
+      this.assertCanRenderAsync(), w && w(U, this), this.onRenderWithJSON(U).then(identity);
     }).catch((U) => {
       throw console.error("Panel.renderWithJSON fetch failed:", U), U;
     }) : Promise.reject(new Error("No UserManager instance available for Panel.renderWithJSON()"));
@@ -1485,7 +1491,7 @@ class Panel extends Component {
    *      that will receive the reply event.
    * @return {Promise}
    */
-  onRenderWithJSON(D) {
+  onRenderWithJSON(w) {
     return Promise.resolve(this);
   }
   /**
@@ -1493,7 +1499,7 @@ class Panel extends Component {
    * @param {Object} _elDataMap
    * @param {Object} _json
    */
-  onAsyncJsonReply(D, w, U) {
+  onAsyncJsonReply(w, D, U) {
   }
   /**
    * Called on each async HTML response, after the content is in the DOM
@@ -1501,31 +1507,31 @@ class Panel extends Component {
    * @param {Element} _el
    * @param {Object} _elDataMap
    */
-  onAsyncHtmlReply(D, w) {
+  onAsyncHtmlReply(w, D) {
   }
   /**
    * Hook method called when the view broadcasts data to all its panels.
    * Override this method to handle broadcasted data in subclasses.
    * @param {*} _data The data broadcast from the view
    */
-  onViewDataBroadcast(D) {
+  onViewDataBroadcast(w) {
   }
   //--[ JSON Render ]-----
   /**
    * @param {Element} panel
    */
-  parseContent(D) {
-    if (this.debugMe("Enable interactions. Panel:", D), typeof window.customElements < "u" && ComponentLibraryRegistry.has("carbon")) {
+  parseContent(w) {
+    if (this.debugMe("Enable interactions. Panel:", w), typeof window.customElements < "u" && ComponentLibraryRegistry.has("carbon")) {
       const J = ComponentLibraryRegistry.get("carbon");
-      J.render.call(this, D, J.cache).catch((Y) => console.error("[Zooy] Carbon initialization failed:", Y));
+      J.render.call(this, w, J.cache).catch((Y) => console.error("[Zooy] Carbon initialization failed:", Y));
     }
     if (ComponentLibraryRegistry.has("mdc")) {
       const J = ComponentLibraryRegistry.get("mdc");
-      J.render.call(this, D, J.cache);
+      J.render.call(this, w, J.cache);
     }
-    D.classList.contains("zoo__modal-base") && D.classList.contains("close_on_click") && this.listen(D, EV.CLICK, (J) => {
-      J.target === D && this.dispatchPanelEvent("destroy_me");
-    }), [...D.querySelectorAll(
+    w.classList.contains("zoo__modal-base") && w.classList.contains("close_on_click") && this.listen(w, EV.CLICK, (J) => {
+      J.target === w && this.dispatchPanelEvent("destroy_me");
+    }), [...w.querySelectorAll(
       ".zoo__button:not(.external):not(.mdc-data-table__row)"
     )].forEach((J) => {
       this.listen(J, EV.CLICK, (Y) => {
@@ -1537,7 +1543,7 @@ class Panel extends Component {
           href: Z.href || et.href
         }, et));
       });
-    }), [...D.querySelectorAll("[href]:not(.external)")].forEach((J) => {
+    }), [...w.querySelectorAll("[href]:not(.external)")].forEach((J) => {
       this.listen(J, EV.CLICK, (Y) => {
         const Z = Y.currentTarget;
         Y.preventDefault(), Y.stopPropagation();
@@ -1548,7 +1554,7 @@ class Panel extends Component {
           href: Z.href || et.href
         }, et));
       });
-    }), [...D.querySelectorAll("form.intercept_submit")].forEach((J) => {
+    }), [...w.querySelectorAll("form.intercept_submit")].forEach((J) => {
       J.noValidate = !0, this.listen(J, EV.SUBMIT, (Y) => {
         Y.preventDefault(), Y.stopPropagation();
         const Z = getElDataMap(J), et = formToJSON(J.elements);
@@ -1559,15 +1565,15 @@ class Panel extends Component {
           href: Z.href
         }, Z));
       });
-    }), [...D.querySelectorAll(".zoo__toggle_class_driver")].forEach(
+    }), [...w.querySelectorAll(".zoo__toggle_class_driver")].forEach(
       (J) => {
-        const Y = getElDataMap(J), Z = Y.toggle_class_target_id, et = Y.toggle_class, st = D.querySelector(`#${Z}`);
+        const Y = getElDataMap(J), Z = Y.toggle_class_target_id, et = Y.toggle_class, st = w.querySelector(`#${Z}`);
         st && et && J.addEventListener(EV.CLICK, (rt) => {
           rt.stopPropagation(), st.classList.toggle(et);
         });
       }
     );
-    const w = Array.from(D.querySelectorAll(".folder_drop_zone")), U = Array.from(D.querySelectorAll("[draggable]")), F = (J) => {
+    const D = Array.from(w.querySelectorAll(".folder_drop_zone")), U = Array.from(w.querySelectorAll("[draggable]")), F = (J) => {
       J.preventDefault(), J.target.classList.add("drag_over");
     }, q = (J) => {
       J.preventDefault();
@@ -1590,11 +1596,11 @@ class Panel extends Component {
         custom: { on: Z, from: Y }
       }), !1;
     };
-    w.forEach((J) => {
+    D.forEach((J) => {
       this.listen(J, EV.DRAGOVER, q), this.listen(J, EV.DRAGENTER, F), this.listen(J, EV.DRAGEXIT, X), this.listen(J, EV.DRAGLEAVE, W), this.listen(J, EV.DROP, tt);
     }), U.forEach((J) => {
       this.listen(J, EV.DRAGSTART, K), this.listen(J, EV.DRAGEND, Q);
-    }), [...D.querySelectorAll(".zoo_async_json")].forEach((J) => {
+    }), [...w.querySelectorAll(".zoo_async_json")].forEach((J) => {
       const Y = getElDataMap(J), Z = Y.href, et = this.onAsyncJsonReply.bind(this, J, Y);
       this.user.fetchJson(Z, this.abortController.signal).then(et);
       const st = Y.z_json_reusable;
@@ -1605,7 +1611,7 @@ class Panel extends Component {
       isNumber(rt) && this.doOnBeat(() => {
         this.user.fetchJson(Z, this.abortController.signal).then(et);
       }, rt * 60 * 1e3);
-    }), [...D.querySelectorAll(".zoo_async_html")].forEach(
+    }), [...w.querySelectorAll(".zoo_async_html")].forEach(
       /**
        * @param {Element} el
        */
@@ -1630,8 +1636,8 @@ class Panel extends Component {
    * the READY event.
    */
   enterDocument() {
-    const D = this.getElement();
-    this.parseContent(D), this.evalScripts(this.responseObject.scripts), this.evalModules(this.responseObject.modules), super.enterDocument();
+    const w = this.getElement();
+    this.parseContent(w), this.evalScripts(this.responseObject.scripts), this.evalModules(this.responseObject.modules), super.enterDocument();
   }
   /**
    * @inheritDoc
@@ -1645,8 +1651,8 @@ class Panel extends Component {
    * @param {boolean} bool
    * @param {?string} url
    */
-  setIsRedirected(D, w) {
-    this.redirected = D, this.redirected && w && (this.uri_ = w);
+  setIsRedirected(w, D) {
+    this.redirected = w, this.redirected && D && (this.uri_ = D);
   }
   //--[ Built in events ]--
   /**
@@ -1665,9 +1671,11 @@ class Panel extends Component {
    * @return {boolean} If anyone called preventDefault on the event object
    *  or if any of the handlers returns false this will also return false.
    */
-  dispatchPanelEvent(D, w) {
-    const U = new ZooyEventData(D, w), F = EVT.makeEvent(UiEventType.PANEL, U);
-    return this.debugMe("PANEL EVENT FIRED. Value:", D, "Opt DATA:", w), this.dispatchEvent(F);
+  dispatchPanelEvent(w, D) {
+    const U = new ZooyEventData(w, D), F = Evt.makeEvent(UiEventType.PANEL, U);
+    return this.debugMe(`PANEL EVENT FIRED:
+      value:${w}
+      data:${D}`), this.dispatchEvent(F);
   }
 }
 class FormPanel extends Panel {
@@ -1688,8 +1696,8 @@ class FormPanel extends Panel {
    * @param {string=} uri Optional URI for fetching form content
    * @param {boolean} intercept If false, we do not try and intercept the forms
    */
-  constructor(D, w = !0) {
-    super(D), this.#s = w, this.debugMode = !0, this.onSubmitSucFunc = (U, F) => null;
+  constructor(w, D = !0) {
+    super(w), this.#s = D, this.onSubmitSucFunc = (U, F) => null;
   }
   /**
    * Gets the form element managed by this panel.
@@ -1717,13 +1725,13 @@ class FormPanel extends Panel {
    * @param {string=} string The id of the form we want to sterilise.
    * @return {?HTMLFormElement}
    */
-  getFormFromId(D) {
-    let w = null, U = this.getElement().querySelector("form");
-    return D && (U = document.getElementById(
+  getFormFromId(w) {
+    let D = null, U = this.getElement().querySelector("form");
+    return w && (U = document.getElementById(
       /** @type {string} */
-      D
-    ) || U), U && U.tagName.toLowerCase() === "form" && (w = /** @type {HTMLFormElement} */
-    U), w;
+      w
+    ) || U), U && U.tagName.toLowerCase() === "form" && (D = /** @type {HTMLFormElement} */
+    U), D;
   }
   //--[ Field Validation Methods ]--
   /**
@@ -1732,17 +1740,17 @@ class FormPanel extends Panel {
    * @private
    */
   #r() {
-    this.#t && (this.listen(this.#t, EV.CHANGE, (D) => {
-      this.#o(D);
-    }, { passive: !0 }), this.listen(this.#t, EV.INPUT, (D) => {
-      this.clearAllValidationErrors(), this.#o(D);
-    }), this.listen(this.#t, EV.INVALID, (D) => {
-      D.preventDefault();
-      const w = (
+    this.#t && (this.listen(this.#t, EV.CHANGE, (w) => {
+      this.#o(w);
+    }, { passive: !0 }), this.listen(this.#t, EV.INPUT, (w) => {
+      this.clearAllValidationErrors(), this.#o(w);
+    }), this.listen(this.#t, EV.INVALID, (w) => {
+      w.preventDefault();
+      const D = (
         /** @type {HTMLInputElement} */
-        D.target
+        w.target
       );
-      this.#i(w), this.displayFieldError(w);
+      this.#i(D), this.displayFieldError(D);
     }, { passive: !0 }));
   }
   /**
@@ -1751,8 +1759,8 @@ class FormPanel extends Panel {
    * @return {boolean} True if all fields are valid, false otherwise
    */
   checkAllFields() {
-    const D = [...this.#t.elements].map((w) => [this.#n(w), w]).filter((w) => !w[0]);
-    return D.forEach((w) => this.displayFieldError(w[1])), D.length === 0;
+    const w = [...this.#t.elements].map((D) => [this.#n(D), D]).filter((D) => !D[0]);
+    return w.forEach((D) => this.displayFieldError(D[1])), w.length === 0;
   }
   /**
    * Clear all existing validation errors
@@ -1767,9 +1775,9 @@ class FormPanel extends Panel {
    * @param {string} _css A CSS class name to add to the alert div.
    * @private
    */
-  displayAlert_(D, w, U) {
-    const F = document.getElementById(`${D.id}-helper-text`) || document.createElement("p");
-    F.textContent = w, this.#e.set(D, F);
+  displayAlert_(w, D, U) {
+    const F = document.getElementById(`${w.id}-helper-text`) || document.createElement("p");
+    F.textContent = D, this.#e.set(w, F);
   }
   /**
    * Check validation for a single field
@@ -1777,53 +1785,53 @@ class FormPanel extends Panel {
    * @return {boolean} True if field is valid
    * @private
    */
-  #n(D) {
-    this.#i(D);
-    let w = !D.willValidate;
-    return D.willValidate && (w = D.checkValidity()), w;
+  #n(w) {
+    this.#i(w);
+    let D = !w.willValidate;
+    return w.willValidate && (D = w.checkValidity()), D;
   }
   /**
    * Clear alert for a single field
    * @param {HTMLInputElement} field
    * @private
    */
-  #i(D) {
-    D.classList.remove("error"), this.#e.has(D) && (this.#e.get(D).textContent = ""), this.#e.delete(D);
+  #i(w) {
+    w.classList.remove("error"), this.#e.has(w) && (this.#e.get(w).textContent = ""), this.#e.delete(w);
   }
   /**
    * Display the given error message on the given form field.
    * @param {HTMLInputElement} field
    * @param {string=} opt_msg
    */
-  displayFieldError(D, w) {
-    const U = w || D.validationMessage;
-    D.classList.add("error"), this.displayAlert_(D, U, "alert-error");
+  displayFieldError(w, D) {
+    const U = D || w.validationMessage;
+    w.classList.add("error"), this.displayAlert_(w, U, "alert-error");
   }
   /**
    * Display the given success message on the given form field.
    * @param {HTMLInputElement} field
    * @param {string} message
    */
-  displayFieldSuccess(D, w) {
-    this.displayAlert_(D, w, "alert-success");
+  displayFieldSuccess(w, D) {
+    this.displayAlert_(w, D, "alert-success");
   }
   /**
    * Display the given information message on the given form field.
    * @param {HTMLInputElement} field
    * @param {string} message
    */
-  displayFieldInfo(D, w) {
-    this.displayAlert_(D, w, "alert-info");
+  displayFieldInfo(w, D) {
+    this.displayAlert_(w, D, "alert-info");
   }
   /**
    * Validate field on change event
    * @param {Event} e
    * @private
    */
-  #o(D) {
+  #o(w) {
     this.#n(
       /** @type {HTMLInputElement} */
-      D.target
+      w.target
     );
   }
   /**
@@ -1837,22 +1845,22 @@ class FormPanel extends Panel {
    * @param {HTMLFormElement} form The form we want to sterilise.
    * @return {HTMLFormElement}
    */
-  #a(D) {
-    if (D && this.#s) {
-      D.noValidate = !0;
-      const w = this.user;
-      this.listen(D, EV.SUBMIT, (U) => {
-        U.preventDefault(), this.debugMe("Intercepted from SUBMIT"), this.checkAllFields() && w && w.formSubmit(this);
+  #a(w) {
+    if (w && this.#s) {
+      w.noValidate = !0;
+      const D = this.user;
+      this.listen(w, EV.SUBMIT, (U) => {
+        U.preventDefault(), this.debugMe("Intercepted from SUBMIT"), this.checkAllFields() && D && D.formSubmit(this);
       });
     }
-    return D;
+    return w;
   }
   //--[ Round Trip ]--
   /**
    * @param {function(!FormPanel, (string|!ServerFormSuccessJsonType)=): (?|null|Promise<?>)} func
    */
-  onSubmitSuccess(D) {
-    this.onSubmitSucFunc = D;
+  onSubmitSuccess(w) {
+    this.onSubmitSucFunc = w;
   }
   /**
    * Given a 'fetch' reply, replace the form.
@@ -1860,18 +1868,18 @@ class FormPanel extends Panel {
    * and re-reads the scripts.
    * @param {string} reply
    */
-  replaceForm(D) {
-    if (this.responseObject = splitScripts(D), this.responseObject.html) {
+  replaceForm(w) {
+    if (this.responseObject = splitScripts(w), this.responseObject.html) {
       if (this.redirected) {
         this.removeAllListener();
-        const w = this.getElement(), U = w.parentNode;
-        this.setElementInternal_(this.responseObject.html), U.replaceChild(this.getElement(), w);
+        const D = this.getElement(), U = D.parentNode;
+        this.setElementInternal_(this.responseObject.html), U.replaceChild(this.getElement(), D);
       } else {
-        const w = (
+        const D = (
           /** @type {!Element} */
           this.responseObject.html.querySelector("form")
         );
-        w && replaceNode(w, this.#t);
+        D && replaceNode(D, this.#t);
         const U = (
           /** @type {!Element} */
           this.responseObject.html.querySelector('button[type="submit"]')
@@ -1889,8 +1897,8 @@ class FormPanel extends Panel {
    * @return {Promise} Returns a promise with this panel as value.
    */
   refreshFromFromServer() {
-    const D = this.user, w = this.uri;
-    return D ? D.fetch(w, this.abortController.signal).then(
+    const w = this.user, D = this.uri;
+    return w ? w.fetch(D, this.abortController.signal).then(
       (U) => this.replaceForm(U)
     ) : Promise.reject(new Error("No UserManager instance available for FormPanel.refreshFromFromServer()"));
   }
@@ -1898,33 +1906,33 @@ class FormPanel extends Panel {
    * @param {string} reply
    * @return {Promise}
    */
-  processSubmitReply(D) {
+  processSubmitReply(w) {
     this.clearAllValidationErrors();
-    let w = !1;
-    if (whatType(D) === "object" && D.success)
+    let D = !1;
+    if (whatType(w) === "object" && w.success)
       return Promise.resolve(this).then(() => {
-        this.onSubmitSucFunc(this, D), this.dispatchCompEvent(UiEventType.FORM_SUBMIT_SUCCESS);
+        this.onSubmitSucFunc(this, w), this.dispatchCompEvent(UiEventType.FORM_SUBMIT_SUCCESS);
       });
-    if (D === "success" ? (this.debugMe(`
+    if (w === "success" ? (this.debugMe(`
       1.REDIRECTED: ${this.redirected}
-      REPLY: ${D}`), w = !0) : D === `redirected_success
+      REPLY: ${w}`), D = !0) : w === `redirected_success
 ` ? (this.debugMe(`
       2.REDIRECTED: ${this.redirected}
-      REPLY: ${D}`), w = !0, this.redirected = !1) : (this.debugMe(`
+      REPLY: ${w}`), D = !0, this.redirected = !1) : (this.debugMe(`
       3.REDIRECTED: ${this.redirected}
-      REPLY: Some form HTML`), this.replaceForm(D)), w && this.redirected)
+      REPLY: Some form HTML`), this.replaceForm(w)), D && this.redirected)
       return this.debugMe(`
       4.REDIRECTED: ${this.redirected}
-      SUCCESS: ${w}`), this.redirected = !1, Promise.resolve(this);
-    if (w)
+      SUCCESS: ${D}`), this.redirected = !1, Promise.resolve(this);
+    if (D)
       return this.debugMe(`
       5.REDIRECTED: ${this.redirected}
-      SUCCESS: ${w}`), Promise.resolve(this).then(() => {
+      SUCCESS: ${D}`), Promise.resolve(this).then(() => {
         this.onSubmitSucFunc(this), this.dispatchCompEvent(UiEventType.FORM_SUBMIT_SUCCESS);
       });
     this.debugMe(`
       6.REDIRECTED: ${this.redirected}
-      SUCCESS: ${w}`);
+      SUCCESS: ${D}`);
   }
 }
 class Split extends Component {
@@ -1947,38 +1955,38 @@ class Split extends Component {
    * @return {!Array<!Array<string, !Object>>} Array of [nestName, nestConfig] pairs
    */
   get nests() {
-    return [...this.nestMap_.entries()].filter(([D, { nestEl: w }]) => w);
+    return [...this.nestMap_.entries()].filter(([w, { nestEl: D }]) => D);
   }
   /**
    * Gets the nest element for a given nest name.
    * @param {string} nestName The nest name to look up
    * @return {!Element | undefined} The nest element, or undefined if not found
    */
-  getNest(D) {
-    return this.nestMap_.get(D)?.nestEl;
+  getNest(w) {
+    return this.nestMap_.get(w)?.nestEl;
   }
   /**
    * Returns the names of all nests that haven't been further split.
    * @return {!Array<string>} Array of nest names
    */
   get nestNames() {
-    return [...this.nestMap_.entries()].filter(([D, w]) => !this.splitNests_.has(w)).map(([D]) => D);
+    return [...this.nestMap_.entries()].filter(([w, D]) => !this.splitNests_.has(D)).map(([w]) => w);
   }
   /**
    * Closes and locks all nests in this split component.
    * @param {!Function=} callback Callback to execute after each nest closes
    * @param {boolean=} opt_skipAni If true, skips animation
    */
-  closeAndLockAll(D = identity, w = !1) {
-    this.nestNames.forEach((U) => this.closeAndLock(U, D, w));
+  closeAndLockAll(w = identity, D = !1) {
+    this.nestNames.forEach((U) => this.closeAndLock(U, w, D));
   }
   /**
    * Opens and unlocks all nests in this split component.
    * @param {!Function=} callback Callback to execute after each nest opens
    * @param {boolean=} opt_skipAni If true, skips animation
    */
-  openAndUnlockAll(D = identity, w = !1) {
-    this.nestNames.forEach((U) => this.openAndUnlock(U, D, w));
+  openAndUnlockAll(w = identity, D = !1) {
+    this.nestNames.forEach((U) => this.openAndUnlock(U, w, D));
   }
   // ---------------------------------------------------------------------------
   /**
@@ -1989,9 +1997,9 @@ class Split extends Component {
    * is vai the nest name - for consistency with the rest of the API.
    * @param {string} nestName Nest name
    */
-  lock(D) {
-    const { dragEl: w } = this.nestMap_.get(D);
-    w.classList.add("locked");
+  lock(w) {
+    const { dragEl: D } = this.nestMap_.get(w);
+    D.classList.add("locked");
   }
   /**
    * The reverse of a lock. Removes the classes added by <@code>lock</> and
@@ -2000,9 +2008,9 @@ class Split extends Component {
    * is vai the nest name - for consistency with the rest of the API.
    * @param {string} nestName Nest name
    */
-  unlock(D) {
-    const { dragEl: w } = this.nestMap_.get(D);
-    w.classList.remove("locked");
+  unlock(w) {
+    const { dragEl: D } = this.nestMap_.get(w);
+    D.classList.remove("locked");
   }
   /**
    * Resize a nest.
@@ -2013,11 +2021,11 @@ class Split extends Component {
    * @param {boolean?} opt_skipAni When true, the resize won't be animated, but
    *    simply affected directly.
    */
-  resize(D, w, U = identity, F = !1) {
-    const { sizeNow: q, nestEl: W, canResize: X } = this.nestMap_.get(D);
-    X && (F || q === w ? (W.classList.remove("animated"), W.style.flexBasis = `${w}px`, this.nestMap_.get(D).sizeNow = w, U()) : (W.classList.add("animated"), this.nestCallbackMap_.set(D, () => {
-      W.classList.remove("animated"), this.nestMap_.get(D).sizeNow = w, U();
-    }), W.style.flexBasis = `${w}px`));
+  resize(w, D, U = identity, F = !1) {
+    const { sizeNow: q, nestEl: W, canResize: X } = this.nestMap_.get(w);
+    X && (F || q === D ? (W.classList.remove("animated"), W.style.flexBasis = `${D}px`, this.nestMap_.get(w).sizeNow = D, U()) : (W.classList.add("animated"), this.nestCallbackMap_.set(w, () => {
+      W.classList.remove("animated"), this.nestMap_.get(w).sizeNow = D, U();
+    }), W.style.flexBasis = `${D}px`));
   }
   /**
    * Close the nest and lock it. See <@code>lock</>
@@ -2027,23 +2035,23 @@ class Split extends Component {
    * @param {boolean?} opt_skipAni When true, the resize won't be animated, but
    *    simply affected directly.
    */
-  closeAndLock(D, w = identity, U = !1) {
-    const { nestEl: F, dragEl: q, canResize: W } = this.nestMap_.get(D);
+  closeAndLock(w, D = identity, U = !1) {
+    const { nestEl: F, dragEl: q, canResize: W } = this.nestMap_.get(w);
     if (!W)
       return;
     const X = () => {
-      q.classList.add("locked", "closed"), F.classList.add("closed"), w();
+      q.classList.add("locked", "closed"), F.classList.add("closed"), D();
     };
-    this.resize(D, 0, X, U);
+    this.resize(w, 0, X, U);
   }
-  closeAndUnlock(D, w = identity, U = !1) {
-    const { nestEl: F, dragEl: q, canResize: W } = this.nestMap_.get(D);
+  closeAndUnlock(w, D = identity, U = !1) {
+    const { nestEl: F, dragEl: q, canResize: W } = this.nestMap_.get(w);
     if (!W)
       return;
     const X = () => {
-      F.classList.remove("closed"), q.classList.remove("closed", "locked"), q.classList.add("collapsed"), w();
+      F.classList.remove("closed"), q.classList.remove("closed", "locked"), q.classList.add("collapsed"), D();
     };
-    this.resize(D, 0, X, U);
+    this.resize(w, 0, X, U);
   }
   /**
    * Open a closed and locked nest. Simply a convenience method to combine
@@ -2055,19 +2063,19 @@ class Split extends Component {
    * @param {boolean?} opt_skipAni When true, the resize won't be animated, but
    *    simply affected directly.
    */
-  openAndUnlock(D, w, U, F = !1) {
+  openAndUnlock(w, D, U, F = !1) {
     const {
       nestEl: q,
       dragEl: W,
       defSize: X,
       lastSize: G,
       canResize: K
-    } = this.nestMap_.get(D);
+    } = this.nestMap_.get(w);
     if (!K)
       return;
-    const Q = w || G || X;
+    const Q = D || G || X;
     q.classList.remove("closed"), W.classList.remove("closed", "locked", "collapsed"), setTimeout(() => {
-      this.resize(D, Q, U, F);
+      this.resize(w, Q, U, F);
     }, 50);
   }
   /**
@@ -2079,19 +2087,19 @@ class Split extends Component {
    * @param {boolean?} opt_skipAni When true, the resize won't be animated, but
    *    simply affected directly.
    */
-  openAndLock(D, w, U, F = !1) {
+  openAndLock(w, D, U, F = !1) {
     const {
       nestEl: q,
       dragEl: W,
       defSize: X,
       lastSize: G,
       canResize: K
-    } = this.nestMap_.get(D);
+    } = this.nestMap_.get(w);
     if (!K)
       return;
-    const Q = w || G || X;
+    const Q = D || G || X;
     q.classList.remove("closed"), W.classList.remove("closed", "collapsed"), setTimeout(() => {
-      this.resize(D, Q, U, F);
+      this.resize(w, Q, U, F);
     }, 50);
   }
   /**
@@ -2103,15 +2111,15 @@ class Split extends Component {
    * @param {boolean?} opt_skipAni When true, the resize won't be animated, but
    *    simply affected directly.
    */
-  close(D, w = identity, U = !1) {
-    const { dragEl: F, canResize: q, nestEl: W } = this.nestMap_.get(D);
+  close(w, D = identity, U = !1) {
+    const { dragEl: F, canResize: q, nestEl: W } = this.nestMap_.get(w);
     if (!q)
       return;
-    this.dispatchSplitEvent(UiEventType.SPLIT_WILL_CLOSE, { nestName: D, nestEl: W });
+    this.dispatchSplitEvent(UiEventType.SPLIT_WILL_CLOSE, { nestName: w, nestEl: W });
     const X = () => {
-      F.classList.add("collapsed"), this.dispatchSplitEvent(UiEventType.SPLIT_DID_CLOSE, { nestName: D, nestEl: W }), w();
+      F.classList.add("collapsed"), this.dispatchSplitEvent(UiEventType.SPLIT_DID_CLOSE, { nestName: w, nestEl: W }), D();
     };
-    this.resize(D, 0, X, U);
+    this.resize(w, 0, X, U);
   }
   /**
    * Open the nest ignoring its current locked state.
@@ -2121,15 +2129,15 @@ class Split extends Component {
    * @param {boolean?} opt_skipAni When true, the resize won't be animated, but
    *    simply affected directly.
    */
-  open(D, w = identity, U = !1) {
-    const { defSize: F, lastSize: q, dragEl: W, canResize: X, nestEl: G } = this.nestMap_.get(D);
+  open(w, D = identity, U = !1) {
+    const { defSize: F, lastSize: q, dragEl: W, canResize: X, nestEl: G } = this.nestMap_.get(w);
     if (!X)
       return;
-    this.dispatchSplitEvent(UiEventType.SPLIT_WILL_OPEN, { nestName: D, nestEl: G }), W.classList.remove("collapsed", "closed");
+    this.dispatchSplitEvent(UiEventType.SPLIT_WILL_OPEN, { nestName: w, nestEl: G }), W.classList.remove("collapsed", "closed");
     const K = q || F, Q = () => {
-      this.dispatchSplitEvent(UiEventType.SPLIT_DID_OPEN, { nestName: D, nestEl: G }), w();
+      this.dispatchSplitEvent(UiEventType.SPLIT_DID_OPEN, { nestName: w, nestEl: G }), D();
     };
-    this.resize(D, K, Q, U);
+    this.resize(w, K, Q, U);
   }
   /**
    * Close the nest ignoring its current locked state.
@@ -2139,8 +2147,8 @@ class Split extends Component {
    * @param {boolean?} opt_skipAni When true, the resize won't be animated, but
    *    simply affected directly.
    */
-  toggle(D, w, U = !1) {
-    this.nestMap_.get(D).sizeNow === 0 ? this.open(D, w, U) : this.close(D, w, U);
+  toggle(w, D, U = !1) {
+    this.nestMap_.get(w).sizeNow === 0 ? this.open(w, D, U) : this.close(w, D, U);
   }
   //----------------------------------------------------------------------------
   /**
@@ -2177,20 +2185,20 @@ class Split extends Component {
    * @param {?Array<string>} classArrDragger Extra classes for the dragger element
    * @param {?Array<string>} classArrGrabber Extra classes for the grabber element
    */
-  addSplit(D = void 0, w = "EW", U = 100, F = 100, q = [], W = [], X = [], G = [], K = []) {
-    const Q = D || this.getElement();
+  addSplit(w = void 0, D = "EW", U = 100, F = 100, q = [], W = [], X = [], G = [], K = []) {
+    const Q = w || this.getElement();
     if (this.splitNests_.has(Q))
       return ["Already used!", Q];
-    convertElToSplit(Q, w), this.splitNests_.add(Q);
+    convertElToSplit(Q, D), this.splitNests_.add(Q);
     let tt = "";
-    if (D) {
-      const it = [...this.nestMap_.entries()].find(([at, { nestEl: ct }]) => ct === D);
+    if (w) {
+      const it = [...this.nestMap_.entries()].find(([at, { nestEl: lt }]) => lt === w);
       if (it)
         tt = it[0];
       else
-        return ["Element not managed by this component", D];
+        return ["Element not managed by this component", w];
     }
-    const J = `${tt}A`, Y = makeOuterNest(U, ["zoo_nest__A", J, ...q]), Z = new Dragger(w);
+    const J = `${tt}A`, Y = makeOuterNest(U, ["zoo_nest__A", J, ...q]), Z = new Dragger(D);
     Z.domFunc = makeDraggerEl([`zoo_drag_${J}`, ...G], K), Z.render(Q), this.nestMap_.set(J, {
       side: "A",
       nestEl: Y,
@@ -2202,7 +2210,7 @@ class Split extends Component {
     });
     const et = `${tt}B`, st = makeInnerNest(["zoo_nest__B", et, ...W]);
     this.nestMap_.set(et, { nestEl: st, canResize: !1 });
-    const rt = `${tt}C`, nt = new Dragger(w);
+    const rt = `${tt}C`, nt = new Dragger(D);
     nt.domFunc = makeDraggerEl([`zoo_drag_${rt}`, ...G], K), nt.render(Q);
     const ot = makeOuterNest(F, ["zoo_nest__C", rt, ...X]);
     this.nestMap_.set(rt, {
@@ -2214,27 +2222,27 @@ class Split extends Component {
       sizeNow: -1,
       canResize: !0
     }), [Y, Z.getElement(), st, nt.getElement(), ot].forEach((it) => Q.appendChild(it));
-    let lt = 0;
-    const ht = (it, at, ct, gt) => {
-      let dt;
-      const ut = it === "NS" ? "height" : "width", ft = it === "NS" ? "deltaY" : "deltaX";
+    let ct = 0;
+    const ht = (it, at, lt, gt) => {
+      let ut;
+      const dt = it === "NS" ? "height" : "width", mt = it === "NS" ? "deltaY" : "deltaX";
       return (pt) => {
         switch (pt.detail.value_) {
           case UiEventType.COMP_DRAG_START:
-            dt = at.getBoundingClientRect()[ut], lt = st.getBoundingClientRect()[ut] + dt, this.nestMap_.get(ct).dragEl.classList.remove("collapsed");
+            ut = at.getBoundingClientRect()[dt], ct = st.getBoundingClientRect()[dt] + ut, this.nestMap_.get(lt).dragEl.classList.remove("collapsed");
             break;
           case UiEventType.COMP_DRAG_MOVE: {
-            const mt = Math.min(lt, dt + gt * pt.detail.data_[ft]);
-            this.nestMap_.get(ct).lastSize = mt, at.style.flexBasis = mt + "px";
+            const ft = Math.min(ct, ut + gt * pt.detail.data_[mt]);
+            this.nestMap_.get(lt).lastSize = ft, at.style.flexBasis = ft + "px";
             break;
           }
           case UiEventType.COMP_DRAG_END:
-            this.dispatchSplitEvent(UiEventType.COMP_DRAG_END, this.nestMap_.get(ct));
+            this.dispatchSplitEvent(UiEventType.COMP_DRAG_END, this.nestMap_.get(lt));
             break;
         }
       };
     };
-    this.listen(Z, Component.compEventCode(), ht(w, Y, J, 1)), this.listen(nt, Component.compEventCode(), ht(w, ot, rt, -1)), this.listen(Z.getElement(), EV.DBLCLICK, () => this.toggle(J)), this.listen(nt.getElement(), EV.DBLCLICK, () => this.toggle(rt)), this.listen(Z.getElement().querySelector(".zoo_grabber"), EV.CLICK, () => this.toggle(J)), this.listen(nt.getElement().querySelector(".zoo_grabber"), EV.CLICK, () => this.toggle(rt)), this.listen(Y, EV.TRANSITIONEND, (it) => {
+    this.listen(Z, Component.compEventCode(), ht(D, Y, J, 1)), this.listen(nt, Component.compEventCode(), ht(D, ot, rt, -1)), this.listen(Z.getElement(), EV.DBLCLICK, () => this.toggle(J)), this.listen(nt.getElement(), EV.DBLCLICK, () => this.toggle(rt)), this.listen(Z.getElement().querySelector(".zoo_grabber"), EV.CLICK, () => this.toggle(J)), this.listen(nt.getElement().querySelector(".zoo_grabber"), EV.CLICK, () => this.toggle(rt)), this.listen(Y, EV.TRANSITIONEND, (it) => {
       if (it.propertyName === "flex-basis" && it.target === Y) {
         const at = this.nestCallbackMap_.get(J);
         this.nestCallbackMap_.delete(J), at && at(), this.dispatchSplitEvent(UiEventType.SPLIT_TRANSITION_END, this.nestMap_.get(J));
@@ -2256,51 +2264,51 @@ class Split extends Component {
    * @return {boolean} If anyone called preventDefault on the event object (or
    *     if any of the handlers returns false this will also return false.
    */
-  dispatchSplitEvent(D, w) {
-    const U = new ZooyEventData(D, w), F = EVT.makeEvent(UiEventType.SPLIT, U);
+  dispatchSplitEvent(w, D) {
+    const U = new ZooyEventData(w, D), F = Evt.makeEvent(UiEventType.SPLIT, U);
     return this.dispatchEvent(F);
   }
 }
-const convertElToSplit = (O, D) => (O.classList.add("zoo_split", `zoo_split__${D.toLowerCase()}`), O), makeOuterNest = (O, D = []) => {
-  const w = document.createElement("div");
-  return w.setAttribute("id", randomId(7)), w.classList.add("zoo_nest", "zoo_nest__outer", ...D), w.style.flexBasis = O + "px", w;
-}, makeInnerNest = (O = []) => {
+const convertElToSplit = (O, w) => (O.classList.add("zoo_split", `zoo_split__${w.toLowerCase()}`), O), makeOuterNest = (O, w = []) => {
   const D = document.createElement("div");
-  return D.setAttribute("id", randomId(7)), D.classList.add("zoo_nest", "zoo_nest__inner", ...O), D;
-}, makeDraggerEl = (O = [], D = []) => () => {
+  return D.setAttribute("id", randomId(7)), D.classList.add("zoo_nest", "zoo_nest__outer", ...w), D.style.flexBasis = O + "px", D;
+}, makeInnerNest = (O = []) => {
   const w = document.createElement("div");
-  w.setAttribute("id", randomId(7)), w.classList.add("zoo_dragger", ...O);
+  return w.setAttribute("id", randomId(7)), w.classList.add("zoo_nest", "zoo_nest__inner", ...O), w;
+}, makeDraggerEl = (O = [], w = []) => () => {
+  const D = document.createElement("div");
+  D.setAttribute("id", randomId(7)), D.classList.add("zoo_dragger", ...O);
   const U = document.createElement("div");
-  return U.classList.add("zoo_grabber", ...D), w.appendChild(U), w;
+  return U.classList.add("zoo_grabber", ...w), D.appendChild(U), D;
 }, needsToScroll = (O) => {
-  const w = O.getBoundingClientRect().bottom;
-  return (U) => U.getBoundingClientRect().bottom > w;
-}, treeNodeSelect = (O) => (D) => {
-  const w = O.getElement().querySelector(".zv_tree_container"), U = needsToScroll(w), F = O.getElement().querySelectorAll(".tree-node");
+  const D = O.getBoundingClientRect().bottom;
+  return (U) => U.getBoundingClientRect().bottom > D;
+}, treeNodeSelect = (O) => (w) => {
+  const D = O.getElement().querySelector(".zv_tree_container"), U = needsToScroll(D), F = O.getElement().querySelectorAll(".tree-node");
   let q;
   [...F].forEach((W) => {
-    enableClass(W, "mdc-deprecated-list-item--activated", W.id === `tree-node_${D}`), W.id === `tree-node_${D}` && (q = W);
+    enableClass(W, "mdc-deprecated-list-item--activated", W.id === `tree-node_${w}`), W.id === `tree-node_${w}` && (q = W);
   }), q && U(q) && q.scrollIntoView(!1);
-}, toggleTree = (O, D) => {
-  const w = D.getElement().querySelector(".children"), U = (
+}, toggleTree = (O, w) => {
+  const D = w.getElement().querySelector(".children"), U = (
     /**@type {boolean} */
     O.isOn
-  ), F = D.getElement().querySelectorAll(".children"), q = D.getElement().querySelectorAll(".zoo__reveal_icon");
+  ), F = w.getElement().querySelectorAll(".children"), q = w.getElement().querySelectorAll(".zoo__reveal_icon");
   [...F].forEach((W) => enableClass(
     W,
     "zoo__tree-children__hidden",
-    W !== w && !U
+    W !== D && !U
   )), [...q].forEach((W) => enableClass(
     W,
     "zoo__icon_rotated",
-    W !== w && !U
+    W !== D && !U
   ));
-}, toggleTreeChildren = (O, D) => {
-  const w = D.trigger, U = w.getAttribute("data-child-id"), F = O.getElement().querySelector(`#${U}`);
-  toggleClass(F, "zoo__tree-children__hidden"), toggleClass(w, "zoo__icon_rotated");
-}, _openTreeFromNodeUp = (O, D) => {
-  const w = D.parentElement;
-  w.classList.contains("children") && (enableClass(w, "zoo__tree-children__hidden", !1), _openTreeFromNodeUp(O, w));
+}, toggleTreeChildren = (O, w) => {
+  const D = w.trigger, U = D.getAttribute("data-child-id"), F = O.getElement().querySelector(`#${U}`);
+  toggleClass(F, "zoo__tree-children__hidden"), toggleClass(D, "zoo__icon_rotated");
+}, _openTreeFromNodeUp = (O, w) => {
+  const D = w.parentElement;
+  D.classList.contains("children") && (enableClass(D, "zoo__tree-children__hidden", !1), _openTreeFromNodeUp(O, D));
 }, treeUtils = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   _openTreeFromNodeUp,
@@ -2315,8 +2323,8 @@ const convertElToSplit = (O, D) => (O.classList.add("zoo_split", `zoo_split__${D
    * @param {Object} eventData - Event data with isOn boolean
    * @param {Panel} ePanel - The panel containing the tree
    */
-  toggle_tree: function(O, D) {
-    toggleTree(O, D);
+  toggle_tree: function(O, w) {
+    toggleTree(O, w);
   },
   /**
    * Toggle children visibility for a specific tree node.
@@ -2324,8 +2332,8 @@ const convertElToSplit = (O, D) => (O.classList.add("zoo_split", `zoo_split__${D
    * @param {Object} eventData - Event data with trigger element
    * @param {Panel} ePanel - The panel containing the tree
    */
-  "tree_toggle-children": function(O, D) {
-    toggleTreeChildren(D, O);
+  "tree_toggle-children": function(O, w) {
+    toggleTreeChildren(w, O);
   }
 }, SearchHandlers = {
   /**
@@ -2335,15 +2343,15 @@ const convertElToSplit = (O, D) => (O.classList.add("zoo_split", `zoo_split__${D
    * @param {Object} eventData - Event data with href, formData.q, and targetval
    * @param {Panel} ePanel - The panel to update
    */
-  search: function(O, D) {
-    let w = `${O.href}`;
+  search: function(O, w) {
+    let D = `${O.href}`;
     const U = O.formData.q, F = O.targetval;
-    if (U !== "" && (w = `${w}?q=${U}`), F !== "") {
+    if (U !== "" && (D = `${D}?q=${U}`), F !== "") {
       let q = F;
-      F.includes("page=") && (q = F.split("&").filter((W) => !W.includes("page=")).join("&")), w = U !== "" ? `${w}&${q}` : `${w}?${q}`;
+      F.includes("page=") && (q = F.split("&").filter((W) => !W.includes("page=")).join("&")), D = U !== "" ? `${D}&${q}` : `${D}?${q}`;
     }
-    this.user.fetchAndSplit(w, D.abortController.signal).then(
-      (q) => D.onReplacePartialDom(q, O.zvptarget)
+    this.user.fetchAndSplit(D, w.abortController.signal).then(
+      (q) => w.onReplacePartialDom(q, O.zvptarget)
     );
   },
   /**
@@ -2353,9 +2361,9 @@ const convertElToSplit = (O, D) => (O.classList.add("zoo_split", `zoo_split__${D
    * @param {Object} eventData - Event data with trigger element
    * @param {Panel} ePanel - The panel to update
    */
-  reset_search: function(O, D) {
-    const w = O.trigger.closest("form");
-    D.removeFromQParams("q"), w.elements.q.value = "", w.dispatchEvent(new Event("submit"));
+  reset_search: function(O, w) {
+    const D = O.trigger.closest("form");
+    w.removeFromQParams("q"), D.elements.q.value = "", D.dispatchEvent(new Event("submit"));
   }
 }, QueryParamHandlers = {
   /**
@@ -2364,10 +2372,10 @@ const convertElToSplit = (O, D) => (O.classList.add("zoo_split", `zoo_split__${D
    * @param {Object} eventData - Event data with href and targetval for pagination
    * @param {Panel} ePanel - The panel to update
    */
-  paginate: function(O, D) {
-    const w = `${O.href}?${O.targetval}`;
-    this.user.fetchAndSplit(w, D.abortController.signal).then(
-      (U) => D.onReplacePartialDom(U, O.zvptarget)
+  paginate: function(O, w) {
+    const D = `${O.href}?${O.targetval}`;
+    this.user.fetchAndSplit(D, w.abortController.signal).then(
+      (U) => w.onReplacePartialDom(U, O.zvptarget)
     );
   },
   /**
@@ -2376,10 +2384,10 @@ const convertElToSplit = (O, D) => (O.classList.add("zoo_split", `zoo_split__${D
    * @param {Object} eventData - Event data with href and targetval for filtering
    * @param {Panel} ePanel - The panel to update
    */
-  list_filter: function(O, D) {
-    const w = `${O.href}?${O.targetval}`;
-    this.user.fetchAndSplit(w, D.abortController.signal).then(
-      (U) => D.onReplacePartialDom(U, O.zvptarget)
+  list_filter: function(O, w) {
+    const D = `${O.href}?${O.targetval}`;
+    this.user.fetchAndSplit(D, w.abortController.signal).then(
+      (U) => w.onReplacePartialDom(U, O.zvptarget)
     );
   }
 }, handlers = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
@@ -2388,7 +2396,7 @@ const convertElToSplit = (O, D) => (O.classList.add("zoo_split", `zoo_split__${D
   QueryParamHandlers,
   SearchHandlers
 }, Symbol.toStringTag, { value: "Module" }));
-class View extends EVT {
+class View extends Evt {
   #t = void 0;
   #e = void 0;
   //--[ Static ]--
@@ -2406,21 +2414,21 @@ class View extends EVT {
   constructor() {
     super(), this.panelMap = /* @__PURE__ */ new Map(), this.user_ = void 0, this.split_ = void 0, this.panelEventMap_ = this.initPanelEventsInternal_(), this.switchViewMap_ = /* @__PURE__ */ new Map(), this.metaData_ = /* @__PURE__ */ new Map();
   }
-  set recordHistory(D) {
-    this.#e = D;
+  set recordHistory(w) {
+    this.#e = w;
   }
   get recordHistory() {
     return this.#e;
   }
-  set registerViewConstructor(D) {
-    this.#t = D;
+  set registerViewConstructor(w) {
+    this.#t = w;
   }
   get registerViewConstructor() {
     return this.#t;
   }
-  set split(D) {
-    this.split_ = D, this.listen(this.split_, UiEventType.SPLIT, (w) => {
-      const U = w.detail.getValue(), F = w.detail.getData();
+  set split(w) {
+    this.split_ = w, this.listen(this.split_, UiEventType.SPLIT, (D) => {
+      const U = D.detail.getValue(), F = D.detail.getData();
       switch (U) {
         case UiEventType.SPLIT_WILL_OPEN:
           this.onSplitWillOpen(F);
@@ -2447,8 +2455,8 @@ class View extends EVT {
   /**
    * @param {!UserManager} user
    */
-  set user(D) {
-    this.user_ = D, this.panelMap.forEach((w) => w.user = D);
+  set user(w) {
+    this.user_ = w, this.panelMap.forEach((D) => D.user = w);
   }
   /**
    * @return {!UserManager}
@@ -2491,44 +2499,44 @@ class View extends EVT {
    * @inheritDoc
    */
   dispose() {
-    [...this.panelMap.values()].forEach((D) => D.dispose()), super.dispose();
+    [...this.panelMap.values()].forEach((w) => w.dispose()), super.dispose();
   }
   /**
    * Add a panel as a child of the view.
    * @param {string} name The name of the panel - used as a key in the panel map.
    * @param {!Panel} panel The panel itself.
    */
-  addPanelToView(D, w) {
-    w.user = this.user, this.removePanelByName(D), this.panelMap.set(D, w), this.listen(w, Panel.panelEventCode(), this.onPanelEvent.bind(this));
+  addPanelToView(w, D) {
+    D.user = this.user, this.removePanelByName(w), this.panelMap.set(w, D), this.listen(D, Panel.panelEventCode(), this.onPanelEvent.bind(this));
   }
   /**
    * Remove a panel from the view by name.
    * @param {string} name The name of the panel - used as a key in the panel map.
    */
-  removePanelByName(D) {
-    this.panelMap.has(D) && this.panelMap.get(D).dispose();
+  removePanelByName(w) {
+    this.panelMap.has(w) && this.panelMap.get(w).dispose();
   }
   /**
    * @param {Panel} panel
    */
-  removePanel(D) {
-    const [w, U] = [...this.panelMap.entries()].find(([F, q]) => q === D);
-    w && U && (U.dispose(), this.panelMap.delete(w));
+  removePanel(w) {
+    const [D, U] = [...this.panelMap.entries()].find(([F, q]) => q === w);
+    D && U && (U.dispose(), this.panelMap.delete(D));
   }
   /**
    * @param {string} name
    * @return {Panel|undefined}
    */
-  getPanelByName(D) {
-    return this.panelMap.get(D);
+  getPanelByName(w) {
+    return this.panelMap.get(w);
   }
   /**
    * Broadcasts data to all panels in this view. Each panel receives the data
    * via its onViewDataBroadcast method.
    * @param {*} data The data to broadcast to all panels
    */
-  broadcastToPanels(D) {
-    [...this.panelMap.values()].forEach((w) => w.onViewDataBroadcast(D));
+  broadcastToPanels(w) {
+    [...this.panelMap.values()].forEach((D) => D.onViewDataBroadcast(w));
   }
   /**
    * Initializes the internal panel event map with default event handlers.
@@ -2542,19 +2550,19 @@ class View extends EVT {
    * @private
    */
   initPanelEventsInternal_() {
-    const D = /* @__PURE__ */ new Map();
-    return D.set("destroy_me", (w, U) => {
+    const w = /* @__PURE__ */ new Map();
+    return w.set("destroy_me", (D, U) => {
       this.removePanel(U);
-    }), D.set("switch_view", (w, U) => {
-      this.debugMe("switch_view received: eventData", w);
-      const F = w.view;
-      this.switchViewMap_.has(F) ? this.switchViewMap_.get(F)(w, U) : this.debugMe("NO VIEW FOUND FOR:", F, this.switchViewMap_);
+    }), w.set("switch_view", (D, U) => {
+      this.debugMe("switch_view received: eventData", D);
+      const F = D.view;
+      this.switchViewMap_.has(F) ? this.switchViewMap_.get(F)(D, U) : this.debugMe("NO VIEW FOUND FOR:", F, this.switchViewMap_);
     }), Object.entries({
       ...SearchHandlers,
       ...QueryParamHandlers
-    }).forEach(([w, U]) => {
-      D.set(w, U.bind(this));
-    }), D;
+    }).forEach(([D, U]) => {
+      w.set(D, U.bind(this));
+    }), w;
   }
   /**
    * Maps a panel event name to a handler function. Allows dynamic registration
@@ -2562,8 +2570,8 @@ class View extends EVT {
    * @param {string} s The event name to map
    * @param {!Function} func The handler function that receives (eventData, ePanel)
    */
-  mapPanEv(D, w) {
-    this.panelEventMap_.set(D, w);
+  mapPanEv(w, D) {
+    this.panelEventMap_.set(w, D);
   }
   /**
    * A map of string to function where the function receives an object and
@@ -2572,22 +2580,28 @@ class View extends EVT {
    * @param {function(
    *  {view:string, pk:string, emit:string, href:string}, Panel):?} func
    */
-  mapSwitchView(D, w) {
-    this.switchViewMap_.set(D, w);
+  mapSwitchView(w, D) {
+    this.switchViewMap_.set(w, D);
   }
   /**
    * @param {!CustomEvent} e
    */
-  onPanelEvent(D) {
-    const w = D.detail.getValue(), U = D.detail.getData(), F = (
+  onPanelEvent(w) {
+    let D = w.detail.getValue();
+    const U = w.detail.getData();
+    D.startsWith("switch_view:") && (U.view = D.split(":")[1], D = "switch_view");
+    const F = (
       /** @type {Panel} */
-      D.target
+      w.target
     );
-    this.panelEventMap_.has(w) ? this.panelEventMap_.get(w)(U, F) : this.debugMe(`NO EVENT MATCH
-          oPe: ${D}
-          eventValue: ${w}
-          eventData: ${JSON.stringify(U, void 0, 2)}
-          ePanel: ${F.constructor.name}`);
+    this.panelEventMap_.has(D) ? this.panelEventMap_.get(D)(U, F) : this.debugMe(`NO EVENT MATCH - This usually you are missing 
+        a "mapPanEv(${D} ..." statement in your panel JS
+        or you have a "event='${D}'" attribute in your panel HTML`, {
+      event: w,
+      eventValue: D,
+      eventData: U,
+      panel: F.constructor.name
+    });
   }
   //--[ Split Events ]--
   /**
@@ -2595,28 +2609,28 @@ class View extends EVT {
    *
    * @param {{nestName: !string, nestEl:!HTMLElement}} _data
    */
-  onSplitWillOpen(D) {
+  onSplitWillOpen(w) {
   }
   /**
    * Triggered before a split will close.
    *
    * @param {{nestName: !string, nestEl:!HTMLElement}} _data
    */
-  onSplitWillClose(D) {
+  onSplitWillClose(w) {
   }
   /**
    * Triggered after a split closed.
    *
    * @param {{nestName: !string, nestEl:!HTMLElement}} _data
    */
-  onSplitDidClose(D) {
+  onSplitDidClose(w) {
   }
   /**
    * Triggered after a split opened.
    *
    * @param {{nestName: !string, nestEl:!HTMLElement}} _data
    */
-  onSplitDidOpen(D) {
+  onSplitDidOpen(w) {
   }
   //--[ Built in events ]--
   /**
@@ -2635,8 +2649,8 @@ class View extends EVT {
    * @return {boolean} If anyone called preventDefault on the event object (or
    *     if any of the handlers returns false this will also return false.
    */
-  dispatchViewEvent(D, w) {
-    const U = new ZooyEventData(D, w), F = EVT.makeEvent(UiEventType.VIEW, U);
+  dispatchViewEvent(w, D) {
+    const U = new ZooyEventData(w, D), F = Evt.makeEvent(UiEventType.VIEW, U);
     return this.dispatchEvent(F);
   }
   //--[  Meta Data ]--
@@ -2653,27 +2667,27 @@ class View extends EVT {
    * @param {*} v The metadata value
    * @return {!Map<string, *>} The updated metadata map
    */
-  setMetaData(D, w) {
-    return this.metaData_.set(D, w), this.metaData;
+  setMetaData(w, D) {
+    return this.metaData_.set(w, D), this.metaData;
   }
   /**
    * Retrieves a metadata value by key.
    * @param {string} k The metadata key
    * @return {*} The metadata value, or undefined if not found
    */
-  getMetaData(D) {
-    return this.metaData_.get(D);
+  getMetaData(w) {
+    return this.metaData_.get(w);
   }
   /**
    * Checks if a metadata key exists.
    * @param {string} k The metadata key
    * @return {boolean} True if the key exists, false otherwise
    */
-  hasMetaData(D) {
-    return this.metaData_.has(D);
+  hasMetaData(w) {
+    return this.metaData_.has(w);
   }
 }
-class Conductor extends EVT {
+class Conductor extends Evt {
   #t = /* @__PURE__ */ new Map();
   #e = null;
   /**
@@ -2688,12 +2702,12 @@ class Conductor extends EVT {
    * and initializes view event handling.
    */
   constructor() {
-    super(), this.#n = this.#i(), window.addEventListener("popstate", (D) => {
-      D.state !== null && this.navTo(D.state);
+    super(), this.#n = this.#i(), window.addEventListener("popstate", (w) => {
+      w.state !== null && this.navTo(w.state);
     });
   }
-  set split(D) {
-    this.#r = D;
+  set split(w) {
+    this.#r = w;
   }
   get split() {
     if (!this.#r)
@@ -2703,8 +2717,8 @@ class Conductor extends EVT {
   /**
    * @param {!UserManager} user
    */
-  set user(D) {
-    this.#s = D, this.#e && (this.#e.user = this.user);
+  set user(w) {
+    this.#s = w, this.#e && (this.#e.user = this.user);
   }
   /**
    * @return {!UserManager}
@@ -2719,11 +2733,11 @@ class Conductor extends EVT {
    * @private
    */
   #i() {
-    return (/* @__PURE__ */ new Map()).set("switch_view", (D, w) => {
-      if (this.#t.has(D.view)) {
-        const U = this.#t.get(D.view)(
-          D.pk || D.recordId,
-          D
+    return (/* @__PURE__ */ new Map()).set("switch_view", (w, D) => {
+      if (this.#t.has(w.view)) {
+        const U = this.#t.get(w.view)(
+          w.pk || w.recordId,
+          w
         );
         this.switchView(U);
       }
@@ -2735,8 +2749,8 @@ class Conductor extends EVT {
    * @param {string} s The event name to map
    * @param {!Function} func The handler function that receives (eventData, eView)
    */
-  mapViewEv(D, w) {
-    this.#n.set(D, w);
+  mapViewEv(w, D) {
+    this.#n.set(w, D);
   }
   /**
    * Registers a view constructor function that can be used to create instances
@@ -2744,39 +2758,39 @@ class Conductor extends EVT {
    * @param {string} s The view type identifier
    * @param {!Function} f Constructor function that receives (pk, data) and returns a View
    */
-  registerViewConstructor(D, w) {
-    this.#t.set(D, w);
+  registerViewConstructor(w, D) {
+    this.#t.set(w, D);
   }
   /**
    * @param {!CustomEvent} e Event object.
    */
-  onViewEvent(D) {
-    const w = D.detail.getValue(), U = D.detail.getData(), F = (
+  onViewEvent(w) {
+    const D = w.detail.getValue(), U = w.detail.getData(), F = (
       /** @type {Panel} */
-      D.target
+      w.target
     );
-    this.#n.has(w) ? this.#n.get(w)(U, F) : console.warn("Unhandled VIEW Event:", D, w, U, F);
+    this.#n.has(D) ? this.#n.get(D)(U, F) : console.warn("Unhandled VIEW Event:", w, D, U, F);
   }
   /**
    * Make the given view active.
    * @param {!View} view
    */
-  setActiveView(D) {
-    this.#e && (this.stopListeningTo(this.#e), this.#e.dispose(), this.#e = null), this.#e = D, this.#e.render();
+  setActiveView(w) {
+    this.#e && (this.stopListeningTo(this.#e), this.#e.dispose(), this.#e = null), this.#e = w, this.#e.render();
   }
   /**
    * @param {!View} view
    * @returns {!View}
    */
-  initView(D) {
-    return D.user = this.user, D.split = this.split, D.recordHistory = this.recordHistory.bind(this), D.registerViewConstructor = this.registerViewConstructor.bind(this), this.listen(D, View.viewEventCode(), this.onViewEvent.bind(this)), D;
+  initView(w) {
+    return w.user = this.user, w.split = this.split, w.recordHistory = this.recordHistory.bind(this), w.registerViewConstructor = this.registerViewConstructor.bind(this), this.listen(w, View.viewEventCode(), this.onViewEvent.bind(this)), w;
   }
   //--[ Views Utilities ]--
   /**
    * @param {!View} view The view we want active.
    */
-  switchView(D) {
-    this.setActiveView(this.initView(D));
+  switchView(w) {
+    this.setActiveView(this.initView(w));
   }
   //--[ History and Navigation ]--
   /**
@@ -2785,8 +2799,8 @@ class Conductor extends EVT {
    * item.history is true.
    * @param {!Object} item The history item containing view state
    */
-  recordHistory(D) {
-    this.debugMe("HISTORY", D), D.init ? history.replaceState(D, "", document.location.href) : D.history || history.pushState(D, "", null);
+  recordHistory(w) {
+    this.debugMe("HISTORY", w), w.init ? history.replaceState(w, "", document.location.href) : w.history || history.pushState(w, "", null);
   }
   /**
    * Navigates to a specific view based on the history item. Attempts to use
@@ -2794,256 +2808,644 @@ class Conductor extends EVT {
    * constructors if needed.
    * @param {!Object} item History item containing {view, pk, ...} properties
    */
-  navTo = (D) => {
-    D.history = !0;
-    const w = D.view, U = this.#e;
-    if (U.switchViewMap_.has(w))
-      this.debugMe("NAV:VIEW:MAP", D), U.switchViewMap_.get(w)(D);
-    else if (this.#t.has(w)) {
-      const F = this.#t.get(w)(D.pk, D);
-      this.debugMe("NAV:NEW:VIEW", D), this.switchView(F);
+  navTo = (w) => {
+    w.history = !0;
+    const D = w.view, U = this.#e;
+    if (U.switchViewMap_.has(D))
+      this.debugMe("NAV:VIEW:MAP", w), U.switchViewMap_.get(D)(w);
+    else if (this.#t.has(D)) {
+      const F = this.#t.get(D)(w.pk, w);
+      this.debugMe("NAV:NEW:VIEW", w), this.switchView(F);
     }
   };
 }
+function _isPlaceholder(O) {
+  return O != null && typeof O == "object" && O["@@functional/placeholder"] === !0;
+}
+function _curry1(O) {
+  return function w(D) {
+    return arguments.length === 0 || _isPlaceholder(D) ? w : O.apply(this, arguments);
+  };
+}
+function _curry2(O) {
+  return function w(D, U) {
+    switch (arguments.length) {
+      case 0:
+        return w;
+      case 1:
+        return _isPlaceholder(D) ? w : _curry1(function(F) {
+          return O(D, F);
+        });
+      default:
+        return _isPlaceholder(D) && _isPlaceholder(U) ? w : _isPlaceholder(D) ? _curry1(function(F) {
+          return O(F, U);
+        }) : _isPlaceholder(U) ? _curry1(function(F) {
+          return O(D, F);
+        }) : O(D, U);
+    }
+  };
+}
+function _concat(O, w) {
+  O = O || [], w = w || [];
+  var D, U = O.length, F = w.length, q = [];
+  for (D = 0; D < U; )
+    q[q.length] = O[D], D += 1;
+  for (D = 0; D < F; )
+    q[q.length] = w[D], D += 1;
+  return q;
+}
+function _arity(O, w) {
+  switch (O) {
+    case 0:
+      return function() {
+        return w.apply(this, arguments);
+      };
+    case 1:
+      return function(D) {
+        return w.apply(this, arguments);
+      };
+    case 2:
+      return function(D, U) {
+        return w.apply(this, arguments);
+      };
+    case 3:
+      return function(D, U, F) {
+        return w.apply(this, arguments);
+      };
+    case 4:
+      return function(D, U, F, q) {
+        return w.apply(this, arguments);
+      };
+    case 5:
+      return function(D, U, F, q, W) {
+        return w.apply(this, arguments);
+      };
+    case 6:
+      return function(D, U, F, q, W, X) {
+        return w.apply(this, arguments);
+      };
+    case 7:
+      return function(D, U, F, q, W, X, G) {
+        return w.apply(this, arguments);
+      };
+    case 8:
+      return function(D, U, F, q, W, X, G, K) {
+        return w.apply(this, arguments);
+      };
+    case 9:
+      return function(D, U, F, q, W, X, G, K, Q) {
+        return w.apply(this, arguments);
+      };
+    case 10:
+      return function(D, U, F, q, W, X, G, K, Q, tt) {
+        return w.apply(this, arguments);
+      };
+    default:
+      throw new Error("First argument to _arity must be a non-negative integer no greater than ten");
+  }
+}
+function _curryN(O, w, D) {
+  return function() {
+    for (var U = [], F = 0, q = O, W = 0, X = !1; W < w.length || F < arguments.length; ) {
+      var G;
+      W < w.length && (!_isPlaceholder(w[W]) || F >= arguments.length) ? G = w[W] : (G = arguments[F], F += 1), U[W] = G, _isPlaceholder(G) ? X = !0 : q -= 1, W += 1;
+    }
+    return !X && q <= 0 ? D.apply(this, U) : _arity(Math.max(0, q), _curryN(O, U, D));
+  };
+}
+var curryN = /* @__PURE__ */ _curry2(function O(w, D) {
+  return w === 1 ? _curry1(D) : _arity(w, _curryN(w, [], D));
+});
+function _curry3(O) {
+  return function w(D, U, F) {
+    switch (arguments.length) {
+      case 0:
+        return w;
+      case 1:
+        return _isPlaceholder(D) ? w : _curry2(function(q, W) {
+          return O(D, q, W);
+        });
+      case 2:
+        return _isPlaceholder(D) && _isPlaceholder(U) ? w : _isPlaceholder(D) ? _curry2(function(q, W) {
+          return O(q, U, W);
+        }) : _isPlaceholder(U) ? _curry2(function(q, W) {
+          return O(D, q, W);
+        }) : _curry1(function(q) {
+          return O(D, U, q);
+        });
+      default:
+        return _isPlaceholder(D) && _isPlaceholder(U) && _isPlaceholder(F) ? w : _isPlaceholder(D) && _isPlaceholder(U) ? _curry2(function(q, W) {
+          return O(q, W, F);
+        }) : _isPlaceholder(D) && _isPlaceholder(F) ? _curry2(function(q, W) {
+          return O(q, U, W);
+        }) : _isPlaceholder(U) && _isPlaceholder(F) ? _curry2(function(q, W) {
+          return O(D, q, W);
+        }) : _isPlaceholder(D) ? _curry1(function(q) {
+          return O(q, U, F);
+        }) : _isPlaceholder(U) ? _curry1(function(q) {
+          return O(D, q, F);
+        }) : _isPlaceholder(F) ? _curry1(function(q) {
+          return O(D, U, q);
+        }) : O(D, U, F);
+    }
+  };
+}
+const _isArray = Array.isArray || function O(w) {
+  return w != null && w.length >= 0 && Object.prototype.toString.call(w) === "[object Array]";
+};
+function _isTransformer(O) {
+  return O != null && typeof O["@@transducer/step"] == "function";
+}
+function _dispatchable(O, w, D) {
+  return function() {
+    if (arguments.length === 0)
+      return D();
+    var U = arguments[arguments.length - 1];
+    if (!_isArray(U)) {
+      for (var F = 0; F < O.length; ) {
+        if (typeof U[O[F]] == "function")
+          return U[O[F]].apply(U, Array.prototype.slice.call(arguments, 0, -1));
+        F += 1;
+      }
+      if (_isTransformer(U)) {
+        var q = w.apply(null, Array.prototype.slice.call(arguments, 0, -1));
+        return q(U);
+      }
+    }
+    return D.apply(this, arguments);
+  };
+}
+const _xfBase = {
+  init: function() {
+    return this.xf["@@transducer/init"]();
+  },
+  result: function(O) {
+    return this.xf["@@transducer/result"](O);
+  }
+};
+function _has(O, w) {
+  return Object.prototype.hasOwnProperty.call(w, O);
+}
+var toString = Object.prototype.toString, _isArguments = /* @__PURE__ */ (function() {
+  return toString.call(arguments) === "[object Arguments]" ? function(w) {
+    return toString.call(w) === "[object Arguments]";
+  } : function(w) {
+    return _has("callee", w);
+  };
+})(), hasEnumBug = !/* @__PURE__ */ {
+  toString: null
+}.propertyIsEnumerable("toString"), nonEnumerableProps = ["constructor", "valueOf", "isPrototypeOf", "toString", "propertyIsEnumerable", "hasOwnProperty", "toLocaleString"], hasArgsEnumBug = /* @__PURE__ */ (function() {
+  return arguments.propertyIsEnumerable("length");
+})(), contains = function O(w, D) {
+  for (var U = 0; U < w.length; ) {
+    if (w[U] === D)
+      return !0;
+    U += 1;
+  }
+  return !1;
+}, keys = /* @__PURE__ */ _curry1(typeof Object.keys == "function" && !hasArgsEnumBug ? function O(w) {
+  return Object(w) !== w ? [] : Object.keys(w);
+} : function O(w) {
+  if (Object(w) !== w)
+    return [];
+  var D, U, F = [], q = hasArgsEnumBug && _isArguments(w);
+  for (D in w)
+    _has(D, w) && (!q || D !== "length") && (F[F.length] = D);
+  if (hasEnumBug)
+    for (U = nonEnumerableProps.length - 1; U >= 0; )
+      D = nonEnumerableProps[U], _has(D, w) && !contains(F, D) && (F[F.length] = D), U -= 1;
+  return F;
+});
+function _map(O, w) {
+  for (var D = 0, U = w.length, F = Array(U); D < U; )
+    F[D] = O(w[D]), D += 1;
+  return F;
+}
+function _arrayReduce(O, w, D) {
+  for (var U = 0, F = D.length; U < F; )
+    w = O(w, D[U]), U += 1;
+  return w;
+}
+var XMap = /* @__PURE__ */ (function() {
+  function O(w, D) {
+    this.xf = D, this.f = w;
+  }
+  return O.prototype["@@transducer/init"] = _xfBase.init, O.prototype["@@transducer/result"] = _xfBase.result, O.prototype["@@transducer/step"] = function(w, D) {
+    return this.xf["@@transducer/step"](w, this.f(D));
+  }, O;
+})(), _xmap = function O(w) {
+  return function(D) {
+    return new XMap(w, D);
+  };
+}, map = /* @__PURE__ */ _curry2(/* @__PURE__ */ _dispatchable(["fantasy-land/map", "map"], _xmap, function O(w, D) {
+  switch (Object.prototype.toString.call(D)) {
+    case "[object Function]":
+      return curryN(D.length, function() {
+        return w.call(this, D.apply(this, arguments));
+      });
+    case "[object Object]":
+      return _arrayReduce(function(U, F) {
+        return U[F] = w(D[F]), U;
+      }, {}, keys(D));
+    default:
+      return _map(w, D);
+  }
+}));
+const _isInteger = Number.isInteger || function O(w) {
+  return w << 0 === w;
+};
+function _nth(O, w) {
+  var D = O < 0 ? w.length + O : O;
+  return w[D];
+}
+function _prop(O, w) {
+  if (w != null)
+    return _isInteger(O) ? _nth(O, w) : w[O];
+}
+function _isString(O) {
+  return Object.prototype.toString.call(O) === "[object String]";
+}
+var _isArrayLike = /* @__PURE__ */ _curry1(function O(w) {
+  return _isArray(w) ? !0 : !w || typeof w != "object" || _isString(w) ? !1 : w.length === 0 ? !0 : w.length > 0 ? w.hasOwnProperty(0) && w.hasOwnProperty(w.length - 1) : !1;
+}), symIterator = typeof Symbol < "u" ? Symbol.iterator : "@@iterator";
+function _createReduce(O, w, D) {
+  return function(F, q, W) {
+    if (_isArrayLike(W))
+      return O(F, q, W);
+    if (W == null)
+      return q;
+    if (typeof W["fantasy-land/reduce"] == "function")
+      return w(F, q, W, "fantasy-land/reduce");
+    if (W[symIterator] != null)
+      return D(F, q, W[symIterator]());
+    if (typeof W.next == "function")
+      return D(F, q, W);
+    if (typeof W.reduce == "function")
+      return w(F, q, W, "reduce");
+    throw new TypeError("reduce: list must be array or iterable");
+  };
+}
+var and = /* @__PURE__ */ _curry2(function O(w, D) {
+  return w && D;
+});
+function _iterableReduce(O, w, D) {
+  for (var U = D.next(); !U.done; )
+    w = O(w, U.value), U = D.next();
+  return w;
+}
+function _methodReduce(O, w, D, U) {
+  return D[U](O, w);
+}
+var _reduce = /* @__PURE__ */ _createReduce(_arrayReduce, _methodReduce, _iterableReduce), ap = /* @__PURE__ */ _curry2(function O(w, D) {
+  return typeof D["fantasy-land/ap"] == "function" ? D["fantasy-land/ap"](w) : typeof w.ap == "function" ? w.ap(D) : typeof w == "function" ? function(U) {
+    return w(U)(D(U));
+  } : _reduce(function(U, F) {
+    return _concat(U, map(F, D));
+  }, [], w);
+});
+function _assoc(O, w, D) {
+  if (_isInteger(O) && _isArray(D)) {
+    var U = O < 0 ? D.length + O : O, F = [].concat(D);
+    return F[U] = w, F;
+  }
+  var q = {};
+  for (var W in D)
+    q[W] = D[W];
+  return q[O] = w, q;
+}
+var isNil = /* @__PURE__ */ _curry1(function O(w) {
+  return w == null;
+}), assocPath = /* @__PURE__ */ _curry3(function O(w, D, U) {
+  if (w.length === 0)
+    return D;
+  var F = w[0];
+  if (w.length > 1) {
+    var q = _prop(F, U);
+    (isNil(q) || typeof q != "object") && (q = _isInteger(w[1]) ? [] : {}), D = O(Array.prototype.slice.call(w, 1), D, q);
+  }
+  return _assoc(F, D, U);
+});
+function _isFunction(O) {
+  var w = Object.prototype.toString.call(O);
+  return w === "[object Function]" || w === "[object AsyncFunction]" || w === "[object GeneratorFunction]" || w === "[object AsyncGeneratorFunction]";
+}
+var liftN = /* @__PURE__ */ _curry2(function O(w, D) {
+  var U = curryN(w, D);
+  return curryN(w, function() {
+    return _arrayReduce(ap, map(U, arguments[0]), Array.prototype.slice.call(arguments, 1));
+  });
+}), lift = /* @__PURE__ */ _curry1(function O(w) {
+  return liftN(w.length, w);
+}), both = /* @__PURE__ */ _curry2(function O(w, D) {
+  return _isFunction(w) ? function() {
+    return w.apply(this, arguments) && D.apply(this, arguments);
+  } : lift(and)(w, D);
+}), hasPath = /* @__PURE__ */ _curry2(function O(w, D) {
+  if (w.length === 0 || isNil(D))
+    return !1;
+  for (var U = D, F = 0; F < w.length; )
+    if (!isNil(U) && _has(w[F], U))
+      U = U[w[F]], F += 1;
+    else
+      return !1;
+  return !0;
+}), has = /* @__PURE__ */ _curry2(function O(w, D) {
+  return hasPath([w], D);
+});
+function _path(O, w) {
+  for (var D = w, U = 0; U < O.length; U += 1) {
+    if (D == null)
+      return;
+    var F = O[U];
+    _isInteger(F) ? D = _nth(F, D) : D = D[F];
+  }
+  return D;
+}
+var path = /* @__PURE__ */ _curry2(_path);
 const DEFAULT_FORMATTERS = {
   /**
    * Format as JSON (useful for debugging)
    */
-  json: (O) => JSON.stringify(O, null, 2)
+  json: (O) => JSON.stringify(O, null, 2),
+  /**
+   * Format date as "DD MMM YY HH:mm:ss" (e.g., "10 Nov 25 11:27:49")
+   * Accepts ISO date strings, timestamps, or Date objects.
+   * Returns empty string for null/undefined values.
+   */
+  date: (O) => {
+    if (!O) return "";
+    const w = O instanceof Date ? O : new Date(O);
+    return isNaN(w.getTime()) ? (console.warn("[Binder] Invalid date value:", O), "") : dateToZooyStdTimeString(w);
+  },
+  /**
+   * Template string interpolation formatter
+   * Evaluates a template string with access to 'value' and 'data'
+   * @example:
+   *    <!-- Simple value interpolation -->
+   *    <img zoo-bind-attr="src:mno_id|tpl"
+   *      zoo-bind-attr-tpl="/static/dist/img/networks/${value}.png">
+   *
+   *    <!-- Access to nested data -->
+   *    <img zoo-bind-attr="src:mno_id|tpl"
+   *        zoo-bind-attr-tpl="/static/dist/img/${data.region}/networks/${value}.png">
+   *
+   *    <!-- Conditional logic -->
+   *    <span zoo-bind-attr="class:status|tpl"
+   *        zoo-bind-attr-tpl="status-${value === 'active' ? 'good' : 'bad'}">
+   *
+   *    <!-- Even expressions -->
+   *    <span zoo-bind="price|tpl"
+   *        zoo-bind-tpl="$${(value / 100).toFixed(2)}">
+   */
+  tpl: (O, w, D) => {
+    const U = D?.getAttribute("zoo-bind-attr-tpl");
+    if (!U) return O;
+    try {
+      return new Function("value", "data", `return \`${U}\`;`)(O, w);
+    } catch (F) {
+      return console.warn("[Binder] Invalid template:", U, F), O;
+    }
+  }
 };
-class DataBinder {
+class Binder {
   #t;
   #e;
   #s;
-  #r = [];
+  #r = null;
   #n;
-  #i;
-  #o;
   /**
-   * Creates a new DataBinder instance.
+   * Creates a new Binder instance.
    *
-   * @param {Object} options - Configuration options
-   * @param {string} [options.url] - API endpoint URL (optional if using setData)
-   * @param {string|HTMLTemplateElement} options.template - Template ID or element
-   * @param {Element} options.container - Container element for rendered items
-   * @param {string} [options.dataPath] - JSON path to data array (auto-detected if omitted)
-   * @param {Function} [options.fetchFn] - Custom fetch function (for authentication, etc.)
+   * @param {zooy.Panel} panel
+   * @param {string} url - API endpoint URL
+   * @param {Element} rootEl - Root element to walk for bindings
+   * @param options
+   * @param {Object<string, string|number>} [options.urlParams] - Configuration options
    * @param {Object<string, Function>} [options.formatters] - Custom formatters
-   * @throws {Error} If template or container is missing/invalid
+   * @throws {Error} If url or rootEl is missing/invalid
    */
-  constructor(D = {}) {
-    if (!D.template)
-      throw new Error("DataBinder requires options.template");
-    if (!D.container)
-      throw new Error("DataBinder requires options.container");
-    if (this.#t = D.url, this.#i = D.dataPath, this.#s = D.container, this.#o = D.fetchFn || fetch.bind(window), this.#e = typeof D.template == "string" ? document.getElementById(D.template) : D.template, !this.#e || this.#e.tagName !== "TEMPLATE")
-      throw new Error("DataBinder template must be a <template> element or valid template ID");
-    this.#n = { ...DEFAULT_FORMATTERS, ...D.formatters };
+  constructor(w, D, U, F = {}) {
+    if (!D)
+      throw new Error("Binder requires a URL");
+    if (!U || !(U instanceof Element))
+      throw new Error("Binder requires a valid rootEl Element");
+    this.#t = w, this.#e = new URL(D, window.location.origin), this.#s = U, this.#n = { ...DEFAULT_FORMATTERS, ...F.formatters }, F.urlParams ? this.#i(F.urlParams) : this.#o();
   }
-  /**
-   * Loads data from the configured URL with optional query parameters.
-   * Dispatches 'data-loading', 'data-loaded', and 'data-error' events.
-   *
-   * @param {Object} [params={}] - Query parameters to append to URL
-   * @return {Promise<Array>} The loaded data array
-   * @throws {Error} If fetch fails or URL is not configured
-   */
-  async load(D = {}) {
-    if (!this.#t)
-      throw new Error("DataBinder.load() requires a configured URL");
-    this.#c("data-loading");
-    try {
-      const w = new URL(this.#t, window.location.origin);
-      Object.entries(D).forEach(([q, W]) => {
-        isDefAndNotNull(W) && w.searchParams.set(q, W);
-      });
-      const U = await this.#o(w.toString()), F = U instanceof Response ? U.ok ? await U.json() : Promise.reject(new Error(`HTTP ${U.status}: ${U.statusText}`)) : U;
-      if (this.#r = this.#u(F), !Array.isArray(this.#r))
-        throw new Error("Extracted data is not an array");
-      return this.render(), this.#c("data-loaded", { data: this.#r }), this.#r;
-    } catch (w) {
-      throw this.#c("data-error", { error: w }), w;
-    }
+  get url() {
+    return this.#e;
+  }
+  get data() {
+    return this.#r;
+  }
+  get limit() {
+    return parseInt(this.#e.searchParams.get("limit") || "0", 10);
+  }
+  get offset() {
+    return parseInt(this.#e.searchParams.get("offset") || "0", 10);
+  }
+  get isPaginated() {
+    return both(has("count"), has("results"))(this.#r);
+  }
+  #i(w) {
+    return Object.entries(w).forEach(([D, U]) => {
+      if (!isDefAndNotNull(U) || U === "" || Array.isArray(U) && U.length < 1) {
+        this.#e.searchParams.delete(D);
+        return;
+      }
+      if (Array.isArray(U)) {
+        this.#e.searchParams.set(D, U.join(","));
+        return;
+      }
+      this.#e.searchParams.set(D, U);
+    }), this.#o(), this.#e;
   }
   /**
-   * Sets data directly without fetching from URL.
-   * Useful for static data or when data is already available.
-   *
-   * @param {Array} data - Array of data objects
+   * Updates all elements with zoo-bind-binderurl attribute to have the current
+   * URL path and query string as the attribute value. This allows elements to
+   * dynamically reflect the binder's URL when it changes.
+   * @private
    */
-  setData(D) {
-    this.#r = Array.isArray(D) ? D : [], this.render();
+  #o() {
+    const w = this.#e.href.split(this.url.origin)[1].slice(1);
+    this.#s.querySelectorAll("[zoo-bind-binderurl]").forEach((D) => {
+      D.setAttribute("zoo-bind-binderurl", w);
+    });
   }
   /**
-   * Gets the current data array.
+   * Fetches data from the configured URL with optional query parameters.
+   * Data is automatically bound to the DOM via setData() after fetch completes.
    *
-   * @return {Array} The current data
-   */
-  getData() {
-    return this.#r;
+   * @param {Object} [urlParams={}] - Query parameters to append to URL (e.g., {limit: 25, offset: 0, ordering: 'name'})
+   * @return {Promise<void>}
+   * @throws {Error} If fetch fails or response is invalid
+   */
+  async fetchData(w = {}) {
+    const D = await this.#t.user.fetchJson(
+      this.#i(w).toString(),
+      this.#t.abortController.signal
+    );
+    this.setData(D);
   }
   /**
-   * Re-renders all items from the current data.
-   * Clears the container and renders each item using the template.
+   * Sets data directly without fetching from URL.
+   * This is the convergence point for all data updates (from fetchData() or external sources).
+   *
+   * Behavior:
+   * - Stores full JSON object (not just arrays)
+   * - Calls render() to update the DOM
+   * - render() extracts appropriate slices for each consumer
+   *
+   * @param {Object} data - Full JSON response object
    */
-  render() {
-    this.#s.innerHTML = "", this.#r.forEach((D, w) => {
-      const U = this.#a(D, w);
-      this.#s.appendChild(U);
-    });
+  setData(w) {
+    this.#r = w, this.render();
   }
   /**
-   * Disposes of this DataBinder instance.
-   * Clears data and container.
+   * Renders data by walking the rootEl element and processing all bindings.
+   *
+   * Supports two binding patterns:
+   * 1. Simple property binding - Direct zoo-bind attributes on elements (no templates)
+   * 2. Template rendering - Elements with zoo-template duplicate for arrays
+   *
+   * Algorithm:
+   * 1. Process simple bindings (zoo-bind, zoo-bind-attr outside template consumers)
+   * 2. Process template consumers (elements with zoo-template attribute)
+   *    - Get template ID and optional zoo-template-bind
+   *    - Extract data slice using Ramda's R.path()
+   *    - Clear consumer and clone template for each item
+   *
+   * Multiple consumers can exist in the same rootEl, each rendering different slices
+   * of the same JSON response (e.g., results, metadata, alerts).
    */
-  dispose() {
-    this.#r = [], this.#s.innerHTML = "", this.#e = null, this.#s = null;
+  render() {
+    if (!isDefAndNotNull(this.#r)) {
+      console.warn("[Binder] No data to render");
+      return;
+    }
+    this.#o(), this.#a(this.#s, this.#r, 0), this.#l();
   }
   /**
-   * Renders a single item from the template.
+   * Renders simple property bindings directly to existing elements.
+   * Processes zoo-bind-attr, zoo-bind, and conditional rendering attributes.
    *
-   * @param {Object} item - Data object
-   * @param {number} index - Item index in array
-   * @return {DocumentFragment} Rendered template clone
-   * @private
-   */
-  #a(D, w) {
-    const U = this.#e.content.cloneNode(!0);
-    return this.#d(U, D, w), U.querySelectorAll("[data-bind]").forEach((F) => {
-      this.#h(F, D, w);
-    }), U.querySelectorAll("[data-show-if]").forEach((F) => {
-      const q = F.getAttribute("data-show-if");
-      this.#l(D, q, w) || F.remove();
-    }), U.querySelectorAll("[data-hide-if]").forEach((F) => {
-      const q = F.getAttribute("data-hide-if");
-      this.#l(D, q, w) && F.remove();
-    }), U.querySelectorAll("[data-bind]").forEach((F) => {
-      F.removeAttribute("data-bind"), F.removeAttribute("data-format");
-    }), U.querySelectorAll("[data-bind-attr]").forEach((F) => {
-      F.removeAttribute("data-bind-attr");
-    }), U.querySelectorAll("[data-show-if]").forEach((F) => {
-      F.removeAttribute("data-show-if");
-    }), U.querySelectorAll("[data-hide-if]").forEach((F) => {
-      F.removeAttribute("data-hide-if");
-    }), U;
-  }
-  /**
-   * Binds data to element content.
+   * This method is reusable and can be called with different elements and data objects.
+   * Used for both rootEl-level simple bindings and template item rendering.
    *
-   * @param {Element} el - Element to bind to
-   * @param {Object} item - Data object
-   * @param {number} index - Item index
+   * @param {Element|DocumentFragment} element - Root element to search for bindings
+   * @param {Object} data - Data object to bind
+   * @param {number} [index=0] - Current index (for $index and $index1 special variables)
+   * @param {Object} [options={}] - Rendering options
+   * @param {boolean} [options.removeOnCondition=false] - Remove elements on failed conditions (vs hiding with display:none)
+   * @param {boolean} [options.removeAttributes=false] - Remove binding attributes after processing (vs keeping for re-render)
    * @private
    */
-  #h(D, w, U) {
-    const F = D.getAttribute("data-bind"), q = D.getAttribute("data-format");
-    let W = this.#l(w, F, U);
-    q && this.#n[q] && (W = this.#n[q](W, w)), D.textContent = W ?? "";
+  #a(w, D, U = 0, F = {}) {
+    const q = F.removeAttributes ?? !1;
+    w.querySelectorAll("[zoo-bind-attr]").forEach((W) => {
+      if (W.closest("[zoo-template]")) return;
+      W.getAttribute("zoo-bind-attr").split(",").forEach((G) => {
+        const [K, Q] = G.split(":").map((Z) => Z.trim()), [tt, J] = Q.split("|").map((Z) => Z.trim());
+        let Y = this.#c(D, tt, U);
+        J && this.#n[J] && (Y = this.#n[J](Y, D, W)), isDefAndNotNull(Y) && W.setAttribute(K, Y);
+      }), q && (W.removeAttribute("zoo-bind-attr"), W.removeAttribute("zoo-bind-attr-tpl"));
+    }), w.querySelectorAll("[zoo-bind]").forEach((W) => {
+      if (W.closest("[zoo-template]")) return;
+      const X = W.getAttribute("zoo-bind"), [G, K] = X.split("|").map((tt) => tt.trim());
+      let Q = this.#c(D, G, U);
+      K && this.#n[K] && (Q = this.#n[K](Q, D, W)), W.textContent = Q ?? "", q && (W.removeAttribute("zoo-bind"), W.removeAttribute("zoo-bind-tpl"));
+    });
   }
   /**
-   * Binds data to element attributes.
-   * Supports syntax: data-bind-attr="attr1:path1, attr2:path2"
+   * Renders template consumers by duplicating templates for array data.
    *
-   * @param {DocumentFragment} clone - Template clone
-   * @param {Object} item - Data object
-   * @param {number} index - Item index
    * @private
    */
-  #d(D, w, U) {
-    D.querySelectorAll("[data-bind-attr]").forEach((F) => {
-      F.getAttribute("data-bind-attr").split(",").forEach((W) => {
-        const [X, G] = W.split(":").map((K) => K.trim());
-        if (X && G) {
-          const K = this.#l(w, G, U);
-          isDefAndNotNull(K) && F.setAttribute(X, K);
-        }
+  #l() {
+    this.#s.querySelectorAll("[zoo-template]").forEach((D) => {
+      const U = D.getAttribute("zoo-template"), F = D.getAttribute("zoo-template-bind");
+      if (!U) {
+        console.warn("[Binder] Consumer missing template ID", D);
+        return;
+      }
+      const q = this.#s.querySelector(`#${U}`);
+      if (!q || q.tagName !== "TEMPLATE") {
+        console.error(`[DataBinder] Template not found or invalid: ${U}`);
+        return;
+      }
+      const W = F ? path(F.split("."), this.#r) : this.#r;
+      if (!W) {
+        console.warn(`[DataBinder] Data slice is undefined. Path: ${F}. Skipping render for this consumer.`);
+        return;
+      }
+      if (!Array.isArray(W)) {
+        console.error(`[DataBinder] Data slice is not an array. Path: ${F}`, W);
+        return;
+      }
+      D.innerHTML = "", W.forEach((X, G) => {
+        const K = this.#h(q, X, G);
+        D.appendChild(K);
       });
     });
   }
   /**
-   * Gets a value from an object using dot notation.
-   * Supports special variables: $index (0-based), $index1 (1-based)
+   * Renders a single item from a template.
+   * Uses the unified rendering method with options for template-specific behavior.
    *
-   * @param {Object} obj - Object to query
-   * @param {string} path - Dot-separated path (e.g., "profile.name")
-   * @param {number} index - Item index for special variables
-   * @return {*} The value, or undefined if not found
+   * @param {HTMLTemplateElement} template - Template element
+   * @param {Object} item - Data object
+   * @param {number} index - Item index in array
+   * @return {DocumentFragment} Rendered template clone
    * @private
    */
-  #l(D, w, U) {
-    return w === "$index" ? U : w === "$index1" ? U + 1 : w.split(".").reduce((F, q) => F?.[q], D);
+  #h(w, D, U) {
+    const F = w.content.cloneNode(!0);
+    return this.#a(F, D, U, {
+      removeAttributes: !0
+    }), F;
   }
   /**
-   * Extracts the data array from a JSON response.
-   * Tries common patterns: json.rows, json.data, json.items, or json itself.
+   * Gets a value from an object using dot notation.
    *
-   * @param {Object|Array} json - JSON response
-   * @return {Array} Extracted data array
-   * @private
-   */
-  #u(D) {
-    return this.#i ? this.#i.split(".").reduce((w, U) => w?.[U], D) : D.rows ? D.rows : D.data ? D.data : D.items ? D.items : Array.isArray(D) ? D : (console.warn("DataBinder: Could not extract data array from response", D), []);
-  }
-  /**
-   * Dispatches a custom event on the container.
+   * Special Variables:
+   * - $index: 0-based row number (within current page)
+   * - $index1: 1-based row number (within current page)
+   * - $index__paged: 0-based row number (accounts for pagination offset)
+   * - $index1__paged: 1-based row number (accounts for pagination offset)
    *
-   * @param {string} eventName - Event name
-   * @param {Object} [detail={}] - Event detail
+   * @param {Object} obj - Object to query
+   * @param {string} pathString - Dot-separated path (e.g., "profile.name") or special variable ($index, $index1, $index__paged, $index1__paged)
+   * @param {number} index - Item index in current data array (0-based)
+   * @return {*} The value, or undefined if not found
    * @private
    */
-  #c(D, w = {}) {
-    this.#s.dispatchEvent(new CustomEvent(D, {
-      detail: w,
-      bubbles: !0
-    }));
+  #c(w, D, U) {
+    const F = {
+      $index: () => U,
+      $index__paged: () => this.offset + U,
+      $index1: () => U + 1,
+      $index1__paged: () => this.offset + U + 1
+    };
+    return F[D] ? F[D]() : path(D.split("."), w);
   }
 }
-const SEMANTIC_ATTRIBUTES = [
-  // Event attributes
-  "event",
-  "change-event",
-  "open-event",
-  "close-event",
-  "primary-event",
-  // Data/Record identification
-  "record-id",
-  "record-type",
-  // URLs/Endpoints
-  "endpoint",
-  "url",
-  // Actions/Operations
-  "action",
-  "method",
-  // Targeting
-  "target"
-], ATTRIBUTE_TO_PROPERTY = {
+const SEMANTIC_ATTRS = new Map(Object.entries({
   event: "event",
-  "change-event": "changeEvent",
-  "open-event": "openEvent",
-  "close-event": "closeEvent",
-  "primary-event": "primaryEvent",
-  "record-id": "recordId",
-  "record-type": "recordType",
   endpoint: "endpoint",
+  href: "href",
   url: "url",
-  action: "action",
-  method: "method",
-  target: "target"
-}, getSemanticAttributes = (O) => {
-  const D = {};
-  return SEMANTIC_ATTRIBUTES.forEach((w) => {
-    const U = O.getAttribute(w);
-    if (U !== null) {
-      const F = ATTRIBUTE_TO_PROPERTY[w];
-      D[F] = U;
-    }
-  }), Array.from(O.attributes).forEach((w) => {
-    if (w.name.startsWith("data-")) {
-      const U = w.name.slice(5).replace(/-([a-z])/g, (F, q) => q.toUpperCase());
-      D[U] = w.value;
-    }
-  }), D;
-}, getEventName = (O) => O.getAttribute("event"), getEventAttribute = (O, D, w = "event") => O.getAttribute(D) || O.getAttribute(w);
+  target: "target",
+  "record-id": "recordId",
+  "zoo-sort-field": "sortField",
+  "zoo-view": "view",
+  "zoo-event": "event",
+  "zoo-href": "href"
+})), getSemanticAttributes = (O) => {
+  let w = {};
+  return Array.from(O.attributes).forEach((D) => {
+    const U = D.name, F = D.value;
+    SEMANTIC_ATTRS.has(U) ? w[SEMANTIC_ATTRS.get(U)] = F : (U.startsWith("data-") || U.startsWith("zoo-")) && (w = assocPath(U.split("-"), F, w));
+  }), w;
+}, getEventAttribute = (O, w, D = "event") => O.getAttribute(w) || O.getAttribute(D);
 /**
  * @license
  * Copyright 2019 Google LLC
@@ -3051,48 +3453,48 @@ const SEMANTIC_ATTRIBUTES = [
  */
 const t$1 = globalThis, e$2 = t$1.ShadowRoot && (t$1.ShadyCSS === void 0 || t$1.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, s$2 = Symbol(), o$3 = /* @__PURE__ */ new WeakMap();
 let n$2 = class {
-  constructor(D, w, U) {
+  constructor(w, D, U) {
     if (this._$cssResult$ = !0, U !== s$2) throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");
-    this.cssText = D, this.t = w;
+    this.cssText = w, this.t = D;
   }
   get styleSheet() {
-    let D = this.o;
-    const w = this.t;
-    if (e$2 && D === void 0) {
-      const U = w !== void 0 && w.length === 1;
-      U && (D = o$3.get(w)), D === void 0 && ((this.o = D = new CSSStyleSheet()).replaceSync(this.cssText), U && o$3.set(w, D));
+    let w = this.o;
+    const D = this.t;
+    if (e$2 && w === void 0) {
+      const U = D !== void 0 && D.length === 1;
+      U && (w = o$3.get(D)), w === void 0 && ((this.o = w = new CSSStyleSheet()).replaceSync(this.cssText), U && o$3.set(D, w));
     }
-    return D;
+    return w;
   }
   toString() {
     return this.cssText;
   }
 };
-const r$2 = (O) => new n$2(typeof O == "string" ? O : O + "", void 0, s$2), i$3 = (O, ...D) => {
-  const w = O.length === 1 ? O[0] : D.reduce(((U, F, q) => U + ((W) => {
+const r$2 = (O) => new n$2(typeof O == "string" ? O : O + "", void 0, s$2), i$3 = (O, ...w) => {
+  const D = O.length === 1 ? O[0] : w.reduce(((U, F, q) => U + ((W) => {
     if (W._$cssResult$ === !0) return W.cssText;
     if (typeof W == "number") return W;
     throw Error("Value passed to 'css' function must be a 'css' function result: " + W + ". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.");
   })(F) + O[q + 1]), O[0]);
-  return new n$2(w, O, s$2);
-}, S$1 = (O, D) => {
-  if (e$2) O.adoptedStyleSheets = D.map(((w) => w instanceof CSSStyleSheet ? w : w.styleSheet));
-  else for (const w of D) {
+  return new n$2(D, O, s$2);
+}, S$1 = (O, w) => {
+  if (e$2) O.adoptedStyleSheets = w.map(((D) => D instanceof CSSStyleSheet ? D : D.styleSheet));
+  else for (const D of w) {
     const U = document.createElement("style"), F = t$1.litNonce;
-    F !== void 0 && U.setAttribute("nonce", F), U.textContent = w.cssText, O.appendChild(U);
+    F !== void 0 && U.setAttribute("nonce", F), U.textContent = D.cssText, O.appendChild(U);
   }
-}, c$2 = e$2 ? (O) => O : (O) => O instanceof CSSStyleSheet ? ((D) => {
-  let w = "";
-  for (const U of D.cssRules) w += U.cssText;
-  return r$2(w);
+}, c$2 = e$2 ? (O) => O : (O) => O instanceof CSSStyleSheet ? ((w) => {
+  let D = "";
+  for (const U of w.cssRules) D += U.cssText;
+  return r$2(D);
 })(O) : O;
 /**
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const { is: i$2, defineProperty: e$1, getOwnPropertyDescriptor: h$1, getOwnPropertyNames: r$1, getOwnPropertySymbols: o$2, getPrototypeOf: n$1 } = Object, a$1 = globalThis, c$1 = a$1.trustedTypes, l$1 = c$1 ? c$1.emptyScript : "", p$1 = a$1.reactiveElementPolyfillSupport, d$1 = (O, D) => O, u$1 = { toAttribute(O, D) {
-  switch (D) {
+const { is: i$2, defineProperty: e$1, getOwnPropertyDescriptor: h$1, getOwnPropertyNames: r$1, getOwnPropertySymbols: o$2, getPrototypeOf: n$1 } = Object, a$1 = globalThis, c$1 = a$1.trustedTypes, l$1 = c$1 ? c$1.emptyScript : "", p$1 = a$1.reactiveElementPolyfillSupport, d$1 = (O, w) => O, u$1 = { toAttribute(O, w) {
+  switch (w) {
     case Boolean:
       O = O ? l$1 : null;
       break;
@@ -3101,156 +3503,156 @@ const { is: i$2, defineProperty: e$1, getOwnPropertyDescriptor: h$1, getOwnPrope
       O = O == null ? O : JSON.stringify(O);
   }
   return O;
-}, fromAttribute(O, D) {
-  let w = O;
-  switch (D) {
+}, fromAttribute(O, w) {
+  let D = O;
+  switch (w) {
     case Boolean:
-      w = O !== null;
+      D = O !== null;
       break;
     case Number:
-      w = O === null ? null : Number(O);
+      D = O === null ? null : Number(O);
       break;
     case Object:
     case Array:
       try {
-        w = JSON.parse(O);
+        D = JSON.parse(O);
       } catch {
-        w = null;
+        D = null;
       }
   }
-  return w;
-} }, f$1 = (O, D) => !i$2(O, D), b$1 = { attribute: !0, type: String, converter: u$1, reflect: !1, useDefault: !1, hasChanged: f$1 };
+  return D;
+} }, f$1 = (O, w) => !i$2(O, w), b$1 = { attribute: !0, type: String, converter: u$1, reflect: !1, useDefault: !1, hasChanged: f$1 };
 Symbol.metadata ??= Symbol("metadata"), a$1.litPropertyMetadata ??= /* @__PURE__ */ new WeakMap();
 let y$1 = class extends HTMLElement {
-  static addInitializer(D) {
-    this._$Ei(), (this.l ??= []).push(D);
+  static addInitializer(w) {
+    this._$Ei(), (this.l ??= []).push(w);
   }
   static get observedAttributes() {
     return this.finalize(), this._$Eh && [...this._$Eh.keys()];
   }
-  static createProperty(D, w = b$1) {
-    if (w.state && (w.attribute = !1), this._$Ei(), this.prototype.hasOwnProperty(D) && ((w = Object.create(w)).wrapped = !0), this.elementProperties.set(D, w), !w.noAccessor) {
-      const U = Symbol(), F = this.getPropertyDescriptor(D, U, w);
-      F !== void 0 && e$1(this.prototype, D, F);
+  static createProperty(w, D = b$1) {
+    if (D.state && (D.attribute = !1), this._$Ei(), this.prototype.hasOwnProperty(w) && ((D = Object.create(D)).wrapped = !0), this.elementProperties.set(w, D), !D.noAccessor) {
+      const U = Symbol(), F = this.getPropertyDescriptor(w, U, D);
+      F !== void 0 && e$1(this.prototype, w, F);
     }
   }
-  static getPropertyDescriptor(D, w, U) {
-    const { get: F, set: q } = h$1(this.prototype, D) ?? { get() {
-      return this[w];
+  static getPropertyDescriptor(w, D, U) {
+    const { get: F, set: q } = h$1(this.prototype, w) ?? { get() {
+      return this[D];
     }, set(W) {
-      this[w] = W;
+      this[D] = W;
     } };
     return { get: F, set(W) {
       const X = F?.call(this);
-      q?.call(this, W), this.requestUpdate(D, X, U);
+      q?.call(this, W), this.requestUpdate(w, X, U);
     }, configurable: !0, enumerable: !0 };
   }
-  static getPropertyOptions(D) {
-    return this.elementProperties.get(D) ?? b$1;
+  static getPropertyOptions(w) {
+    return this.elementProperties.get(w) ?? b$1;
   }
   static _$Ei() {
     if (this.hasOwnProperty(d$1("elementProperties"))) return;
-    const D = n$1(this);
-    D.finalize(), D.l !== void 0 && (this.l = [...D.l]), this.elementProperties = new Map(D.elementProperties);
+    const w = n$1(this);
+    w.finalize(), w.l !== void 0 && (this.l = [...w.l]), this.elementProperties = new Map(w.elementProperties);
   }
   static finalize() {
     if (this.hasOwnProperty(d$1("finalized"))) return;
     if (this.finalized = !0, this._$Ei(), this.hasOwnProperty(d$1("properties"))) {
-      const w = this.properties, U = [...r$1(w), ...o$2(w)];
-      for (const F of U) this.createProperty(F, w[F]);
+      const D = this.properties, U = [...r$1(D), ...o$2(D)];
+      for (const F of U) this.createProperty(F, D[F]);
     }
-    const D = this[Symbol.metadata];
-    if (D !== null) {
-      const w = litPropertyMetadata.get(D);
-      if (w !== void 0) for (const [U, F] of w) this.elementProperties.set(U, F);
+    const w = this[Symbol.metadata];
+    if (w !== null) {
+      const D = litPropertyMetadata.get(w);
+      if (D !== void 0) for (const [U, F] of D) this.elementProperties.set(U, F);
     }
     this._$Eh = /* @__PURE__ */ new Map();
-    for (const [w, U] of this.elementProperties) {
-      const F = this._$Eu(w, U);
-      F !== void 0 && this._$Eh.set(F, w);
+    for (const [D, U] of this.elementProperties) {
+      const F = this._$Eu(D, U);
+      F !== void 0 && this._$Eh.set(F, D);
     }
     this.elementStyles = this.finalizeStyles(this.styles);
   }
-  static finalizeStyles(D) {
-    const w = [];
-    if (Array.isArray(D)) {
-      const U = new Set(D.flat(1 / 0).reverse());
-      for (const F of U) w.unshift(c$2(F));
-    } else D !== void 0 && w.push(c$2(D));
-    return w;
+  static finalizeStyles(w) {
+    const D = [];
+    if (Array.isArray(w)) {
+      const U = new Set(w.flat(1 / 0).reverse());
+      for (const F of U) D.unshift(c$2(F));
+    } else w !== void 0 && D.push(c$2(w));
+    return D;
   }
-  static _$Eu(D, w) {
-    const U = w.attribute;
-    return U === !1 ? void 0 : typeof U == "string" ? U : typeof D == "string" ? D.toLowerCase() : void 0;
+  static _$Eu(w, D) {
+    const U = D.attribute;
+    return U === !1 ? void 0 : typeof U == "string" ? U : typeof w == "string" ? w.toLowerCase() : void 0;
   }
   constructor() {
     super(), this._$Ep = void 0, this.isUpdatePending = !1, this.hasUpdated = !1, this._$Em = null, this._$Ev();
   }
   _$Ev() {
-    this._$ES = new Promise(((D) => this.enableUpdating = D)), this._$AL = /* @__PURE__ */ new Map(), this._$E_(), this.requestUpdate(), this.constructor.l?.forEach(((D) => D(this)));
+    this._$ES = new Promise(((w) => this.enableUpdating = w)), this._$AL = /* @__PURE__ */ new Map(), this._$E_(), this.requestUpdate(), this.constructor.l?.forEach(((w) => w(this)));
   }
-  addController(D) {
-    (this._$EO ??= /* @__PURE__ */ new Set()).add(D), this.renderRoot !== void 0 && this.isConnected && D.hostConnected?.();
+  addController(w) {
+    (this._$EO ??= /* @__PURE__ */ new Set()).add(w), this.renderRoot !== void 0 && this.isConnected && w.hostConnected?.();
   }
-  removeController(D) {
-    this._$EO?.delete(D);
+  removeController(w) {
+    this._$EO?.delete(w);
   }
   _$E_() {
-    const D = /* @__PURE__ */ new Map(), w = this.constructor.elementProperties;
-    for (const U of w.keys()) this.hasOwnProperty(U) && (D.set(U, this[U]), delete this[U]);
-    D.size > 0 && (this._$Ep = D);
+    const w = /* @__PURE__ */ new Map(), D = this.constructor.elementProperties;
+    for (const U of D.keys()) this.hasOwnProperty(U) && (w.set(U, this[U]), delete this[U]);
+    w.size > 0 && (this._$Ep = w);
   }
   createRenderRoot() {
-    const D = this.shadowRoot ?? this.attachShadow(this.constructor.shadowRootOptions);
-    return S$1(D, this.constructor.elementStyles), D;
+    const w = this.shadowRoot ?? this.attachShadow(this.constructor.shadowRootOptions);
+    return S$1(w, this.constructor.elementStyles), w;
   }
   connectedCallback() {
-    this.renderRoot ??= this.createRenderRoot(), this.enableUpdating(!0), this._$EO?.forEach(((D) => D.hostConnected?.()));
+    this.renderRoot ??= this.createRenderRoot(), this.enableUpdating(!0), this._$EO?.forEach(((w) => w.hostConnected?.()));
   }
-  enableUpdating(D) {
+  enableUpdating(w) {
   }
   disconnectedCallback() {
-    this._$EO?.forEach(((D) => D.hostDisconnected?.()));
+    this._$EO?.forEach(((w) => w.hostDisconnected?.()));
   }
-  attributeChangedCallback(D, w, U) {
-    this._$AK(D, U);
+  attributeChangedCallback(w, D, U) {
+    this._$AK(w, U);
   }
-  _$ET(D, w) {
-    const U = this.constructor.elementProperties.get(D), F = this.constructor._$Eu(D, U);
+  _$ET(w, D) {
+    const U = this.constructor.elementProperties.get(w), F = this.constructor._$Eu(w, U);
     if (F !== void 0 && U.reflect === !0) {
-      const q = (U.converter?.toAttribute !== void 0 ? U.converter : u$1).toAttribute(w, U.type);
-      this._$Em = D, q == null ? this.removeAttribute(F) : this.setAttribute(F, q), this._$Em = null;
+      const q = (U.converter?.toAttribute !== void 0 ? U.converter : u$1).toAttribute(D, U.type);
+      this._$Em = w, q == null ? this.removeAttribute(F) : this.setAttribute(F, q), this._$Em = null;
     }
   }
-  _$AK(D, w) {
-    const U = this.constructor, F = U._$Eh.get(D);
+  _$AK(w, D) {
+    const U = this.constructor, F = U._$Eh.get(w);
     if (F !== void 0 && this._$Em !== F) {
       const q = U.getPropertyOptions(F), W = typeof q.converter == "function" ? { fromAttribute: q.converter } : q.converter?.fromAttribute !== void 0 ? q.converter : u$1;
       this._$Em = F;
-      const X = W.fromAttribute(w, q.type);
+      const X = W.fromAttribute(D, q.type);
       this[F] = X ?? this._$Ej?.get(F) ?? X, this._$Em = null;
     }
   }
-  requestUpdate(D, w, U) {
-    if (D !== void 0) {
-      const F = this.constructor, q = this[D];
-      if (U ??= F.getPropertyOptions(D), !((U.hasChanged ?? f$1)(q, w) || U.useDefault && U.reflect && q === this._$Ej?.get(D) && !this.hasAttribute(F._$Eu(D, U)))) return;
-      this.C(D, w, U);
+  requestUpdate(w, D, U) {
+    if (w !== void 0) {
+      const F = this.constructor, q = this[w];
+      if (U ??= F.getPropertyOptions(w), !((U.hasChanged ?? f$1)(q, D) || U.useDefault && U.reflect && q === this._$Ej?.get(w) && !this.hasAttribute(F._$Eu(w, U)))) return;
+      this.C(w, D, U);
     }
     this.isUpdatePending === !1 && (this._$ES = this._$EP());
   }
-  C(D, w, { useDefault: U, reflect: F, wrapped: q }, W) {
-    U && !(this._$Ej ??= /* @__PURE__ */ new Map()).has(D) && (this._$Ej.set(D, W ?? w ?? this[D]), q !== !0 || W !== void 0) || (this._$AL.has(D) || (this.hasUpdated || U || (w = void 0), this._$AL.set(D, w)), F === !0 && this._$Em !== D && (this._$Eq ??= /* @__PURE__ */ new Set()).add(D));
+  C(w, D, { useDefault: U, reflect: F, wrapped: q }, W) {
+    U && !(this._$Ej ??= /* @__PURE__ */ new Map()).has(w) && (this._$Ej.set(w, W ?? D ?? this[w]), q !== !0 || W !== void 0) || (this._$AL.has(w) || (this.hasUpdated || U || (D = void 0), this._$AL.set(w, D)), F === !0 && this._$Em !== w && (this._$Eq ??= /* @__PURE__ */ new Set()).add(w));
   }
   async _$EP() {
     this.isUpdatePending = !0;
     try {
       await this._$ES;
-    } catch (w) {
-      Promise.reject(w);
+    } catch (D) {
+      Promise.reject(D);
     }
-    const D = this.scheduleUpdate();
-    return D != null && await D, !this.isUpdatePending;
+    const w = this.scheduleUpdate();
+    return w != null && await w, !this.isUpdatePending;
   }
   scheduleUpdate() {
     return this.performUpdate();
@@ -3268,19 +3670,19 @@ let y$1 = class extends HTMLElement {
         W !== !0 || this._$AL.has(F) || X === void 0 || this.C(F, void 0, q, X);
       }
     }
-    let D = !1;
-    const w = this._$AL;
+    let w = !1;
+    const D = this._$AL;
     try {
-      D = this.shouldUpdate(w), D ? (this.willUpdate(w), this._$EO?.forEach(((U) => U.hostUpdate?.())), this.update(w)) : this._$EM();
+      w = this.shouldUpdate(D), w ? (this.willUpdate(D), this._$EO?.forEach(((U) => U.hostUpdate?.())), this.update(D)) : this._$EM();
     } catch (U) {
-      throw D = !1, this._$EM(), U;
+      throw w = !1, this._$EM(), U;
     }
-    D && this._$AE(w);
+    w && this._$AE(D);
   }
-  willUpdate(D) {
+  willUpdate(w) {
   }
-  _$AE(D) {
-    this._$EO?.forEach(((w) => w.hostUpdated?.())), this.hasUpdated || (this.hasUpdated = !0, this.firstUpdated(D)), this.updated(D);
+  _$AE(w) {
+    this._$EO?.forEach(((D) => D.hostUpdated?.())), this.hasUpdated || (this.hasUpdated = !0, this.firstUpdated(w)), this.updated(w);
   }
   _$EM() {
     this._$AL = /* @__PURE__ */ new Map(), this.isUpdatePending = !1;
@@ -3291,15 +3693,15 @@ let y$1 = class extends HTMLElement {
   getUpdateComplete() {
     return this._$ES;
   }
-  shouldUpdate(D) {
+  shouldUpdate(w) {
     return !0;
   }
-  update(D) {
-    this._$Eq &&= this._$Eq.forEach(((w) => this._$ET(w, this[w]))), this._$EM();
+  update(w) {
+    this._$Eq &&= this._$Eq.forEach(((D) => this._$ET(D, this[D]))), this._$EM();
   }
-  updated(D) {
+  updated(w) {
   }
-  firstUpdated(D) {
+  firstUpdated(w) {
   }
 };
 y$1.elementStyles = [], y$1.shadowRootOptions = { mode: "open" }, y$1[d$1("elementProperties")] = /* @__PURE__ */ new Map(), y$1[d$1("finalized")] = /* @__PURE__ */ new Map(), p$1?.({ ReactiveElement: y$1 }), (a$1.reactiveElementVersions ??= []).push("2.1.1");
@@ -3310,30 +3712,30 @@ y$1.elementStyles = [], y$1.shadowRootOptions = { mode: "open" }, y$1[d$1("eleme
  */
 const t = globalThis, i$1 = t.trustedTypes, s$1 = i$1 ? i$1.createPolicy("lit-html", { createHTML: (O) => O }) : void 0, e = "$lit$", h = `lit$${Math.random().toFixed(9).slice(2)}$`, o$1 = "?" + h, n = `<${o$1}>`, r = document, l = () => r.createComment(""), c = (O) => O === null || typeof O != "object" && typeof O != "function", a = Array.isArray, u = (O) => a(O) || typeof O?.[Symbol.iterator] == "function", d = `[ 	
 \f\r]`, f = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, v = /-->/g, _ = />/g, m = RegExp(`>|${d}(?:([^\\s"'>=/]+)(${d}*=${d}*(?:[^ 	
-\f\r"'\`<>=]|("|')|))|$)`, "g"), p = /'/g, g = /"/g, $ = /^(?:script|style|textarea|title)$/i, y = (O) => (D, ...w) => ({ _$litType$: O, strings: D, values: w }), x = y(1), b = y(2), T = Symbol.for("lit-noChange"), E = Symbol.for("lit-nothing"), A = /* @__PURE__ */ new WeakMap(), C = r.createTreeWalker(r, 129);
-function P(O, D) {
+\f\r"'\`<>=]|("|')|))|$)`, "g"), p = /'/g, g = /"/g, $ = /^(?:script|style|textarea|title)$/i, y = (O) => (w, ...D) => ({ _$litType$: O, strings: w, values: D }), x = y(1), b = y(2), T = Symbol.for("lit-noChange"), E = Symbol.for("lit-nothing"), A = /* @__PURE__ */ new WeakMap(), C = r.createTreeWalker(r, 129);
+function P(O, w) {
   if (!a(O) || !O.hasOwnProperty("raw")) throw Error("invalid template strings array");
-  return s$1 !== void 0 ? s$1.createHTML(D) : D;
+  return s$1 !== void 0 ? s$1.createHTML(w) : w;
 }
-const V = (O, D) => {
-  const w = O.length - 1, U = [];
-  let F, q = D === 2 ? "<svg>" : D === 3 ? "<math>" : "", W = f;
-  for (let X = 0; X < w; X++) {
+const V = (O, w) => {
+  const D = O.length - 1, U = [];
+  let F, q = w === 2 ? "<svg>" : w === 3 ? "<math>" : "", W = f;
+  for (let X = 0; X < D; X++) {
     const G = O[X];
     let K, Q, tt = -1, J = 0;
     for (; J < G.length && (W.lastIndex = J, Q = W.exec(G), Q !== null); ) J = W.lastIndex, W === f ? Q[1] === "!--" ? W = v : Q[1] !== void 0 ? W = _ : Q[2] !== void 0 ? ($.test(Q[2]) && (F = RegExp("</" + Q[2], "g")), W = m) : Q[3] !== void 0 && (W = m) : W === m ? Q[0] === ">" ? (W = F ?? f, tt = -1) : Q[1] === void 0 ? tt = -2 : (tt = W.lastIndex - Q[2].length, K = Q[1], W = Q[3] === void 0 ? m : Q[3] === '"' ? g : p) : W === g || W === p ? W = m : W === v || W === _ ? W = f : (W = m, F = void 0);
     const Y = W === m && O[X + 1].startsWith("/>") ? " " : "";
     q += W === f ? G + n : tt >= 0 ? (U.push(K), G.slice(0, tt) + e + G.slice(tt) + h + Y) : G + h + (tt === -2 ? X : Y);
   }
-  return [P(O, q + (O[w] || "<?>") + (D === 2 ? "</svg>" : D === 3 ? "</math>" : "")), U];
+  return [P(O, q + (O[D] || "<?>") + (w === 2 ? "</svg>" : w === 3 ? "</math>" : "")), U];
 };
 class N {
-  constructor({ strings: D, _$litType$: w }, U) {
+  constructor({ strings: w, _$litType$: D }, U) {
     let F;
     this.parts = [];
     let q = 0, W = 0;
-    const X = D.length - 1, G = this.parts, [K, Q] = V(D, w);
-    if (this.el = N.createElement(K, U), C.currentNode = this.el.content, w === 2 || w === 3) {
+    const X = w.length - 1, G = this.parts, [K, Q] = V(w, D);
+    if (this.el = N.createElement(K, U), C.currentNode = this.el.content, D === 2 || D === 3) {
       const tt = this.el.content.firstChild;
       tt.replaceWith(...tt.childNodes);
     }
@@ -3359,20 +3761,20 @@ class N {
       q++;
     }
   }
-  static createElement(D, w) {
+  static createElement(w, D) {
     const U = r.createElement("template");
-    return U.innerHTML = D, U;
+    return U.innerHTML = w, U;
   }
 }
-function S(O, D, w = O, U) {
-  if (D === T) return D;
-  let F = U !== void 0 ? w._$Co?.[U] : w._$Cl;
-  const q = c(D) ? void 0 : D._$litDirective$;
-  return F?.constructor !== q && (F?._$AO?.(!1), q === void 0 ? F = void 0 : (F = new q(O), F._$AT(O, w, U)), U !== void 0 ? (w._$Co ??= [])[U] = F : w._$Cl = F), F !== void 0 && (D = S(O, F._$AS(O, D.values), F, U)), D;
+function S(O, w, D = O, U) {
+  if (w === T) return w;
+  let F = U !== void 0 ? D._$Co?.[U] : D._$Cl;
+  const q = c(w) ? void 0 : w._$litDirective$;
+  return F?.constructor !== q && (F?._$AO?.(!1), q === void 0 ? F = void 0 : (F = new q(O), F._$AT(O, D, U)), U !== void 0 ? (D._$Co ??= [])[U] = F : D._$Cl = F), F !== void 0 && (w = S(O, F._$AS(O, w.values), F, U)), w;
 }
 class M {
-  constructor(D, w) {
-    this._$AV = [], this._$AN = void 0, this._$AD = D, this._$AM = w;
+  constructor(w, D) {
+    this._$AV = [], this._$AN = void 0, this._$AD = w, this._$AM = D;
   }
   get parentNode() {
     return this._$AM.parentNode;
@@ -3380,35 +3782,35 @@ class M {
   get _$AU() {
     return this._$AM._$AU;
   }
-  u(D) {
-    const { el: { content: w }, parts: U } = this._$AD, F = (D?.creationScope ?? r).importNode(w, !0);
+  u(w) {
+    const { el: { content: D }, parts: U } = this._$AD, F = (w?.creationScope ?? r).importNode(D, !0);
     C.currentNode = F;
     let q = C.nextNode(), W = 0, X = 0, G = U[0];
     for (; G !== void 0; ) {
       if (W === G.index) {
         let K;
-        G.type === 2 ? K = new R(q, q.nextSibling, this, D) : G.type === 1 ? K = new G.ctor(q, G.name, G.strings, this, D) : G.type === 6 && (K = new z(q, this, D)), this._$AV.push(K), G = U[++X];
+        G.type === 2 ? K = new R(q, q.nextSibling, this, w) : G.type === 1 ? K = new G.ctor(q, G.name, G.strings, this, w) : G.type === 6 && (K = new z(q, this, w)), this._$AV.push(K), G = U[++X];
       }
       W !== G?.index && (q = C.nextNode(), W++);
     }
     return C.currentNode = r, F;
   }
-  p(D) {
-    let w = 0;
-    for (const U of this._$AV) U !== void 0 && (U.strings !== void 0 ? (U._$AI(D, U, w), w += U.strings.length - 2) : U._$AI(D[w])), w++;
+  p(w) {
+    let D = 0;
+    for (const U of this._$AV) U !== void 0 && (U.strings !== void 0 ? (U._$AI(w, U, D), D += U.strings.length - 2) : U._$AI(w[D])), D++;
   }
 }
 class R {
   get _$AU() {
     return this._$AM?._$AU ?? this._$Cv;
   }
-  constructor(D, w, U, F) {
-    this.type = 2, this._$AH = E, this._$AN = void 0, this._$AA = D, this._$AB = w, this._$AM = U, this.options = F, this._$Cv = F?.isConnected ?? !0;
+  constructor(w, D, U, F) {
+    this.type = 2, this._$AH = E, this._$AN = void 0, this._$AA = w, this._$AB = D, this._$AM = U, this.options = F, this._$Cv = F?.isConnected ?? !0;
   }
   get parentNode() {
-    let D = this._$AA.parentNode;
-    const w = this._$AM;
-    return w !== void 0 && D?.nodeType === 11 && (D = w.parentNode), D;
+    let w = this._$AA.parentNode;
+    const D = this._$AM;
+    return D !== void 0 && w?.nodeType === 11 && (w = D.parentNode), w;
   }
   get startNode() {
     return this._$AA;
@@ -3416,45 +3818,45 @@ class R {
   get endNode() {
     return this._$AB;
   }
-  _$AI(D, w = this) {
-    D = S(this, D, w), c(D) ? D === E || D == null || D === "" ? (this._$AH !== E && this._$AR(), this._$AH = E) : D !== this._$AH && D !== T && this._(D) : D._$litType$ !== void 0 ? this.$(D) : D.nodeType !== void 0 ? this.T(D) : u(D) ? this.k(D) : this._(D);
+  _$AI(w, D = this) {
+    w = S(this, w, D), c(w) ? w === E || w == null || w === "" ? (this._$AH !== E && this._$AR(), this._$AH = E) : w !== this._$AH && w !== T && this._(w) : w._$litType$ !== void 0 ? this.$(w) : w.nodeType !== void 0 ? this.T(w) : u(w) ? this.k(w) : this._(w);
   }
-  O(D) {
-    return this._$AA.parentNode.insertBefore(D, this._$AB);
+  O(w) {
+    return this._$AA.parentNode.insertBefore(w, this._$AB);
   }
-  T(D) {
-    this._$AH !== D && (this._$AR(), this._$AH = this.O(D));
+  T(w) {
+    this._$AH !== w && (this._$AR(), this._$AH = this.O(w));
   }
-  _(D) {
-    this._$AH !== E && c(this._$AH) ? this._$AA.nextSibling.data = D : this.T(r.createTextNode(D)), this._$AH = D;
+  _(w) {
+    this._$AH !== E && c(this._$AH) ? this._$AA.nextSibling.data = w : this.T(r.createTextNode(w)), this._$AH = w;
   }
-  $(D) {
-    const { values: w, _$litType$: U } = D, F = typeof U == "number" ? this._$AC(D) : (U.el === void 0 && (U.el = N.createElement(P(U.h, U.h[0]), this.options)), U);
-    if (this._$AH?._$AD === F) this._$AH.p(w);
+  $(w) {
+    const { values: D, _$litType$: U } = w, F = typeof U == "number" ? this._$AC(w) : (U.el === void 0 && (U.el = N.createElement(P(U.h, U.h[0]), this.options)), U);
+    if (this._$AH?._$AD === F) this._$AH.p(D);
     else {
       const q = new M(F, this), W = q.u(this.options);
-      q.p(w), this.T(W), this._$AH = q;
+      q.p(D), this.T(W), this._$AH = q;
     }
   }
-  _$AC(D) {
-    let w = A.get(D.strings);
-    return w === void 0 && A.set(D.strings, w = new N(D)), w;
+  _$AC(w) {
+    let D = A.get(w.strings);
+    return D === void 0 && A.set(w.strings, D = new N(w)), D;
   }
-  k(D) {
+  k(w) {
     a(this._$AH) || (this._$AH = [], this._$AR());
-    const w = this._$AH;
+    const D = this._$AH;
     let U, F = 0;
-    for (const q of D) F === w.length ? w.push(U = new R(this.O(l()), this.O(l()), this, this.options)) : U = w[F], U._$AI(q), F++;
-    F < w.length && (this._$AR(U && U._$AB.nextSibling, F), w.length = F);
+    for (const q of w) F === D.length ? D.push(U = new R(this.O(l()), this.O(l()), this, this.options)) : U = D[F], U._$AI(q), F++;
+    F < D.length && (this._$AR(U && U._$AB.nextSibling, F), D.length = F);
   }
-  _$AR(D = this._$AA.nextSibling, w) {
-    for (this._$AP?.(!1, !0, w); D !== this._$AB; ) {
-      const U = D.nextSibling;
-      D.remove(), D = U;
+  _$AR(w = this._$AA.nextSibling, D) {
+    for (this._$AP?.(!1, !0, D); w !== this._$AB; ) {
+      const U = w.nextSibling;
+      w.remove(), w = U;
     }
   }
-  setConnected(D) {
-    this._$AM === void 0 && (this._$Cv = D, this._$AP?.(D));
+  setConnected(w) {
+    this._$AM === void 0 && (this._$Cv = w, this._$AP?.(w));
   }
 }
 class k {
@@ -3464,72 +3866,72 @@ class k {
   get _$AU() {
     return this._$AM._$AU;
   }
-  constructor(D, w, U, F, q) {
-    this.type = 1, this._$AH = E, this._$AN = void 0, this.element = D, this.name = w, this._$AM = F, this.options = q, U.length > 2 || U[0] !== "" || U[1] !== "" ? (this._$AH = Array(U.length - 1).fill(new String()), this.strings = U) : this._$AH = E;
+  constructor(w, D, U, F, q) {
+    this.type = 1, this._$AH = E, this._$AN = void 0, this.element = w, this.name = D, this._$AM = F, this.options = q, U.length > 2 || U[0] !== "" || U[1] !== "" ? (this._$AH = Array(U.length - 1).fill(new String()), this.strings = U) : this._$AH = E;
   }
-  _$AI(D, w = this, U, F) {
+  _$AI(w, D = this, U, F) {
     const q = this.strings;
     let W = !1;
-    if (q === void 0) D = S(this, D, w, 0), W = !c(D) || D !== this._$AH && D !== T, W && (this._$AH = D);
+    if (q === void 0) w = S(this, w, D, 0), W = !c(w) || w !== this._$AH && w !== T, W && (this._$AH = w);
     else {
-      const X = D;
+      const X = w;
       let G, K;
-      for (D = q[0], G = 0; G < q.length - 1; G++) K = S(this, X[U + G], w, G), K === T && (K = this._$AH[G]), W ||= !c(K) || K !== this._$AH[G], K === E ? D = E : D !== E && (D += (K ?? "") + q[G + 1]), this._$AH[G] = K;
+      for (w = q[0], G = 0; G < q.length - 1; G++) K = S(this, X[U + G], D, G), K === T && (K = this._$AH[G]), W ||= !c(K) || K !== this._$AH[G], K === E ? w = E : w !== E && (w += (K ?? "") + q[G + 1]), this._$AH[G] = K;
     }
-    W && !F && this.j(D);
+    W && !F && this.j(w);
   }
-  j(D) {
-    D === E ? this.element.removeAttribute(this.name) : this.element.setAttribute(this.name, D ?? "");
+  j(w) {
+    w === E ? this.element.removeAttribute(this.name) : this.element.setAttribute(this.name, w ?? "");
   }
 }
 class H extends k {
   constructor() {
     super(...arguments), this.type = 3;
   }
-  j(D) {
-    this.element[this.name] = D === E ? void 0 : D;
+  j(w) {
+    this.element[this.name] = w === E ? void 0 : w;
   }
 }
 class I extends k {
   constructor() {
     super(...arguments), this.type = 4;
   }
-  j(D) {
-    this.element.toggleAttribute(this.name, !!D && D !== E);
+  j(w) {
+    this.element.toggleAttribute(this.name, !!w && w !== E);
   }
 }
 class L extends k {
-  constructor(D, w, U, F, q) {
-    super(D, w, U, F, q), this.type = 5;
+  constructor(w, D, U, F, q) {
+    super(w, D, U, F, q), this.type = 5;
   }
-  _$AI(D, w = this) {
-    if ((D = S(this, D, w, 0) ?? E) === T) return;
-    const U = this._$AH, F = D === E && U !== E || D.capture !== U.capture || D.once !== U.once || D.passive !== U.passive, q = D !== E && (U === E || F);
-    F && this.element.removeEventListener(this.name, this, U), q && this.element.addEventListener(this.name, this, D), this._$AH = D;
+  _$AI(w, D = this) {
+    if ((w = S(this, w, D, 0) ?? E) === T) return;
+    const U = this._$AH, F = w === E && U !== E || w.capture !== U.capture || w.once !== U.once || w.passive !== U.passive, q = w !== E && (U === E || F);
+    F && this.element.removeEventListener(this.name, this, U), q && this.element.addEventListener(this.name, this, w), this._$AH = w;
   }
-  handleEvent(D) {
-    typeof this._$AH == "function" ? this._$AH.call(this.options?.host ?? this.element, D) : this._$AH.handleEvent(D);
+  handleEvent(w) {
+    typeof this._$AH == "function" ? this._$AH.call(this.options?.host ?? this.element, w) : this._$AH.handleEvent(w);
   }
 }
 class z {
-  constructor(D, w, U) {
-    this.element = D, this.type = 6, this._$AN = void 0, this._$AM = w, this.options = U;
+  constructor(w, D, U) {
+    this.element = w, this.type = 6, this._$AN = void 0, this._$AM = D, this.options = U;
   }
   get _$AU() {
     return this._$AM._$AU;
   }
-  _$AI(D) {
-    S(this, D);
+  _$AI(w) {
+    S(this, w);
   }
 }
 const j = t.litHtmlPolyfillSupport;
 j?.(N, R), (t.litHtmlVersions ??= []).push("3.3.1");
-const B = (O, D, w) => {
-  const U = w?.renderBefore ?? D;
+const B = (O, w, D) => {
+  const U = D?.renderBefore ?? w;
   let F = U._$litPart$;
   if (F === void 0) {
-    const q = w?.renderBefore ?? null;
-    U._$litPart$ = F = new R(D.insertBefore(l(), q), q, void 0, w ?? {});
+    const q = D?.renderBefore ?? null;
+    U._$litPart$ = F = new R(w.insertBefore(l(), q), q, void 0, D ?? {});
   }
   return F._$AI(O), F;
 };
@@ -3544,12 +3946,12 @@ class i extends y$1 {
     super(...arguments), this.renderOptions = { host: this }, this._$Do = void 0;
   }
   createRenderRoot() {
-    const D = super.createRenderRoot();
-    return this.renderOptions.renderBefore ??= D.firstChild, D;
+    const w = super.createRenderRoot();
+    return this.renderOptions.renderBefore ??= w.firstChild, w;
   }
-  update(D) {
-    const w = this.render();
-    this.hasUpdated || (this.renderOptions.isConnected = this.isConnected), super.update(D), this._$Do = B(w, this.renderRoot, this.renderOptions);
+  update(w) {
+    const D = this.render();
+    this.hasUpdated || (this.renderOptions.isConnected = this.isConnected), super.update(w), this._$Do = B(D, this.renderRoot, this.renderOptions);
   }
   connectedCallback() {
     super.connectedCallback(), this._$Do?.setConnected(!0);
@@ -3567,38 +3969,38 @@ o?.({ LitElement: i });
 (s.litElementVersions ??= []).push("4.2.1");
 class ZooTag extends i {
   static properties = {
-    token: { type: String }
+    token: { type: String },
+    prefix: { type: String },
+    postfix: { type: String }
   };
   static styles = i$3`
-    :host {
-      display: inline-block;
-    }
+      :host {
+          display: inline-block;
+      }
 
-    .tag {
-      display: inline-flex;
-      align-items: center;
-      min-height: 1.5rem;
-      max-width: 100%;
-      min-width: 2rem;
-      padding: 0 0.5rem;
-      border-radius: 0.9375rem;
-      font-size: 0.75rem;
-      font-weight: 400;
-      line-height: 1.33333;
-      letter-spacing: 0.32px;
-      white-space: nowrap;
-      word-break: break-word;
-      box-sizing: border-box;
-    }
+      .tag {
+          text-align: center;
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          line-height: initial;
+          width: max-content;
+          padding: .2em 1em;
+          border-radius: 1em;
+          font-size: var(--zoo-theme-chips-font-size, 0.75rem);
+          white-space: nowrap;
+          word-break: break-word;
+          box-sizing: border-box;
+      }
   `;
   render() {
-    const D = this.token ?? "default";
+    const w = this.prefix ?? "", D = this.token ?? "default", U = this.postfix ?? "", F = `${w}${D}${U}`;
     return x`
       <span
         class="tag"
         style="
-          background-color: var(--zoo-tag-${D}-bg, var(--zoo-tag-default-bg, #9e9e9e));
-          color: var(--zoo-tag-${D}-fg, var(--zoo-tag-default-fg, #ffffff));
+          background-color: var(--zoo-tag-${F}-bg, var(--zoo-tag-default-bg, #9e9e9e));
+          color: var(--zoo-tag-${F}-fg, var(--zoo-tag-default-fg, #ffffff));
         "
       >
         <slot></slot>
@@ -3609,22 +4011,20 @@ class ZooTag extends i {
 customElements.get("zoo-tag") || customElements.define("zoo-tag", ZooTag);
 const zoo = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  SEMANTIC_ATTRIBUTES,
   ZooTag,
   getEventAttribute,
-  getEventName,
   getSemanticAttributes
 }, Symbol.toStringTag, { value: "Module" }));
 async function registerCarbonLibrary() {
-  const { registerCarbonLibrary: O } = await import("./register-ClkXTZwT.js");
+  const { registerCarbonLibrary: O } = await import("./register-C3XDWad0.js");
   return O();
 }
 async function registerMdcLibrary() {
-  const { registerMdcLibrary: O } = await import("./register-CHuMnx--.js");
+  const { registerMdcLibrary: O } = await import("./register-CyNp_638.js");
   return O();
 }
 const zooy = {
-  EVT,
+  Evt,
   Component,
   Dragger,
   Panel,
@@ -3633,7 +4033,7 @@ const zooy = {
   UserManager,
   View,
   Conductor,
-  DataBinder,
+  DataBinder: Binder,
   UiEventType,
   domUtils,
   uriUtils,
@@ -3644,38 +4044,44 @@ const zooy = {
   zoo
 };
 export {
-  B,
+  uriUtils as A,
+  Binder as B,
   ComponentLibraryRegistry as C,
-  DataBinder as D,
+  Dragger as D,
   E,
   FormPanel as F,
+  handlers as G,
+  zoo as H,
   Panel as P,
   Split as S,
   T,
   UserManager as U,
   View as V,
+  _curry2 as _,
   i$3 as a,
   b,
-  getEventAttribute as c,
-  getElDataMap as d,
+  _curry3 as c,
+  _path as d,
   isDefAndNotNull as e,
   f$1 as f,
   getSemanticAttributes as g,
-  treeUtils as h,
+  hasPath as h,
   i,
-  registerMdcLibrary as j,
-  EVT as k,
-  Component as l,
-  Dragger as m,
-  UiEventType as n,
-  Conductor as o,
-  domUtils as p,
-  uriUtils as q,
+  getEventAttribute as j,
+  B as k,
+  getElDataMap as l,
+  treeUtils as m,
+  registerMdcLibrary as n,
+  objToPaths as o,
+  path as p,
+  Evt as q,
   registerCarbonLibrary as r,
-  handlers as s,
+  Component as s,
   toLowerCase as t,
   u$1 as u,
-  zoo as v,
+  UiEventType as v,
+  Conductor as w,
   x,
+  domUtils as y,
   zooy as z
 };