zs3-ui-components 1.2.2 → 1.2.3

package/dist/index.js

@@ -14,7 +14,7 @@ class T {
    * @returns {string} Library version.
    */
   static version() {
-    return "1.2.2";
+    return "1.2.3";
   }
   /**
    * Creates a ZS3 instance from an HTMLElement.
@@ -427,7 +427,7 @@ class T {
     return this.list[0]?.cloneNode(t) ?? null;
   }
 }
-const Y = (e, t) => e != null && e.length > 0 ? new T(e, t) : null, $e = () => ({
+const V = (e, t) => e != null && e.length > 0 ? new T(e, t) : null, Ce = () => ({
   userAgent: navigator.userAgent,
   language: navigator.language,
   platform: navigator.platform,
@@ -453,16 +453,16 @@ class Et {
   constructor() {
     this.start = (t, s, i = document) => {
       const r = `${t}:${s}`, o = this.debugging.get(r) ?? [];
-      o.some((c) => c.root === i) || (Y(t, i)?.addEvent(s, this.doDebug), o.push({ selector: t, eventType: s, root: i }), this.debugging.set(r, o));
+      o.some((c) => c.root === i) || (V(t, i)?.addEvent(s, this.doDebug), o.push({ selector: t, eventType: s, root: i }), this.debugging.set(r, o));
     }, this.stop = (t, s, i = document) => {
       const r = `${t}:${s}`, o = this.debugging.get(r);
       if (!o) return;
       const a = o.findIndex((c) => c.root === i);
-      a !== -1 && (Y(t, i)?.removeEvent(s, this.doDebug), o.splice(a, 1), o.length === 0 && this.debugging.delete(r));
+      a !== -1 && (V(t, i)?.removeEvent(s, this.doDebug), o.splice(a, 1), o.length === 0 && this.debugging.delete(r));
     }, this.stopAll = () => {
       this.debugging.forEach((t) => {
         t.forEach(({ selector: s, eventType: i, root: r }) => {
-          Y(s, r)?.removeEvent(i, this.doDebug);
+          V(s, r)?.removeEvent(i, this.doDebug);
         });
       }), this.debugging.clear();
     }, this.doDebug = (t) => {
@@ -645,12 +645,12 @@ class Ae {
     };
   }
 }
-const Mt = new xt(), Lt = new Et(), lt = new _t(), X = new Tt();
-typeof window < "u" && (window.$ = Y, window.log = lt, window.debug = Lt, window.storage = X, window.params = Mt);
+const Mt = new xt(), $t = new Et(), lt = new _t(), X = new Tt();
+typeof window < "u" && (window.$ = V, window.log = lt, window.debug = $t, window.storage = X, window.params = Mt);
 window.addEventListener("load", () => {
   lt.success("ZS3 v" + T.version() + " loaded");
 });
-class Ct extends CustomEvent {
+class Lt extends CustomEvent {
   constructor(t) {
     super("zs3-theme-change", {
       bubbles: !0,
@@ -660,12 +660,12 @@ class Ct extends CustomEvent {
     });
   }
 }
-class K {
+class Y {
   constructor() {
     this.currentTheme = "light", this.STORAGE_KEY = "zs3-theme", this.loadSavedTheme(), this.setupSystemThemeListener();
   }
   static getInstance() {
-    return K.instance || (K.instance = new K()), K.instance;
+    return Y.instance || (Y.instance = new Y()), Y.instance;
   }
   /**
    * Carrega el tema guardat o usa el del sistema
@@ -697,7 +697,7 @@ class K {
       this.applySystemTheme();
       return;
     }
-    document.body.setAttribute("data-theme", t), window.dispatchEvent(new Ct(t));
+    document.body.setAttribute("data-theme", t), window.dispatchEvent(new Lt(t));
   }
   /**
    * Estableix un nou tema
@@ -740,9 +740,9 @@ class K {
     ];
   }
 }
-const G = K.getInstance();
+const G = Y.getInstance();
 typeof window < "u" && (window.themeManager = G);
-function Se(e) {
+function ke(e) {
   return class extends e {
     connectedCallback() {
       super.connectedCallback && super.connectedCallback(), this._themeChangeHandler = this.onThemeChange.bind(this), window.addEventListener("zs3-theme-change", this._themeChangeHandler);
@@ -756,7 +756,7 @@ function Se(e) {
     }
   };
 }
-function ke(e) {
+function Se(e) {
   return getComputedStyle(document.documentElement).getPropertyValue(`--${e}`).trim();
 }
 function Pe(e, t) {
@@ -769,7 +769,7 @@ function bt(e) {
 typeof window < "u" && (document.readyState === "loading" ? document.addEventListener("DOMContentLoaded", () => {
   bt();
 }) : bt());
-class $t {
+class Ct {
   constructor() {
     this.handlers = /* @__PURE__ */ new Map();
   }
@@ -860,7 +860,7 @@ class $t {
     this.handlers.clear();
   }
 }
-const De = new $t();
+const De = new Ct();
 class At {
   constructor() {
     this.registry = /* @__PURE__ */ new Map();
@@ -1357,7 +1357,7 @@ const ot = {
     "zs3.recover.submit": "发送"
   }
 }, at = "ca", nt = "en", gt = /* @__PURE__ */ new Map();
-function St() {
+function kt() {
   return new Map(gt);
 }
 function x(e) {
@@ -1365,7 +1365,7 @@ function x(e) {
     return customElements.get(e) || (customElements.define(e, t), gt.set(e, t)), t;
   };
 }
-class kt {
+class St {
   constructor() {
     this.locale = at, this.fallbackLocale = nt, this.translations = {}, this.STORAGE_KEY = "zs3-locale", this.frameworkDefaultsLoaded = !1, this.init = (t) => {
       t?.locale && (this.locale = t.locale), t?.fallbackLocale && (this.fallbackLocale = t.fallbackLocale), t?.translations && this.loadMultiple(t.translations);
@@ -1410,7 +1410,7 @@ class kt {
     }, this.updateRoot = (t) => {
       this.updateElementsInRoot(t);
     }, this.updateElements = () => {
-      this.updateElementsInRoot(document), St().forEach((t, s) => {
+      this.updateElementsInRoot(document), kt().forEach((t, s) => {
         document.querySelectorAll(s).forEach((i) => {
           const r = i.shadowRoot;
           r && this.updateElementsInRoot(r);
@@ -1469,9 +1469,9 @@ class kt {
     "forceUpdate" in t && typeof t.forceUpdate == "function" && t.forceUpdate();
   }
 }
-const y = new kt();
+const y = new St();
 typeof window < "u" && (window.i18n = y);
-class U extends Error {
+class K extends Error {
   constructor(t, s, i, r, o) {
     super(t), this.status = s, this.statusText = i, this.body = r, this.config = o, this.name = "HttpError";
   }
@@ -1563,7 +1563,7 @@ class Oe {
     try {
       return await this.executeFetch(t);
     } catch (r) {
-      if (r instanceof U)
+      if (r instanceof K)
         for (const a of this.errorInterceptors)
           try {
             return await a(r);
@@ -1585,7 +1585,7 @@ class Oe {
       const o = await fetch(t.url, r);
       if (!o.ok) {
         const l = await this.parseBody(o);
-        throw new U(`HTTP ${o.status}: ${o.statusText}`, o.status, o.statusText, l, t);
+        throw new K(`HTTP ${o.status}: ${o.statusText}`, o.status, o.statusText, l, t);
       }
       let c = {
         data: await this.parseBody(o),
@@ -1598,7 +1598,7 @@ class Oe {
         c = await l(c);
       return c;
     } catch (o) {
-      throw o instanceof U ? o : o instanceof DOMException && o.name === "AbortError" ? new U(`Request timeout after ${t.timeout}ms`, 408, "Request Timeout", null, t) : new U(`Network error: ${o.message}`, 0, "Network Error", null, t);
+      throw o instanceof K ? o : o instanceof DOMException && o.name === "AbortError" ? new K(`Request timeout after ${t.timeout}ms`, 408, "Request Timeout", null, t) : new K(`Network error: ${o.message}`, 0, "Network Error", null, t);
     } finally {
       clearTimeout(i);
     }
@@ -1618,7 +1618,7 @@ class Oe {
     }
   }
   isRetryable(t) {
-    return t instanceof U ? t.isServerError || t.isTimeout || t.status === 429 : !0;
+    return t instanceof K ? t.isServerError || t.isTimeout || t.status === 429 : !0;
   }
   delay(t) {
     return new Promise((s) => setTimeout(s, t));
@@ -1639,7 +1639,7 @@ const Pt = (e, t = {}) => {
     verticalPosition: l
   } = t, m = e.parentElement, b = m === document.body || m === document.documentElement;
   return b || Dt(e), e.classList.add(`float-${i}`), e.style.position = b ? "fixed" : "absolute", e.style.zIndex = "1000", e.style.transition = "none", requestAnimationFrame(() => {
-    const g = e.getBoundingClientRect(), p = 1 - r, $ = i === "top" || i === "bottom" || i === "left" || i === "right" ? i : "top";
+    const g = e.getBoundingClientRect(), p = 1 - r, C = i === "top" || i === "bottom" || i === "left" || i === "right" ? i : "top";
     switch (i) {
       case "top":
         e.style.top = `${-g.height * p + o}px`, e.style.bottom = "", e.style.left = c || "50%", e.style.right = "", e.style.transform = c ? "" : "translateX(-50%)";
@@ -1655,7 +1655,7 @@ const Pt = (e, t = {}) => {
         break;
     }
     requestAnimationFrame(() => {
-      e.style.transition = `${$} ${a}s ease`;
+      e.style.transition = `${C} ${a}s ease`;
     }), Ht(
       e,
       i,
@@ -1752,31 +1752,31 @@ const Pt = (e, t = {}) => {
   if (!r)
     return console.warn("move: container must have a parent element"), null;
   window.getComputedStyle(r).position === "static" && (r.style.position = "relative"), t.style.position = "absolute";
-  let a = !1, c = 0, l = 0, m = 0, b = 0, g = 0, p = 0, $ = /* @__PURE__ */ new Set();
-  const tt = (S) => {
-    if (S.button !== 0) return;
-    a = !0, c = S.clientX, l = S.clientY;
+  let a = !1, c = 0, l = 0, m = 0, b = 0, g = 0, p = 0, C = /* @__PURE__ */ new Set();
+  const tt = (k) => {
+    if (k.button !== 0) return;
+    a = !0, c = k.clientX, l = k.clientY;
     const et = window.getComputedStyle(t);
-    m = parseFloat(et.left) || 0, b = parseFloat(et.top) || 0, g = m, p = b, $.clear(), t.classList.add("zs3-dragging"), s.style.cursor = "grabbing", S.preventDefault(), J(t, "zs3-move-start", {
+    m = parseFloat(et.left) || 0, b = parseFloat(et.top) || 0, g = m, p = b, C.clear(), t.classList.add("zs3-dragging"), s.style.cursor = "grabbing", k.preventDefault(), J(t, "zs3-move-start", {
       direction: i,
       element: t,
       startX: m,
       startY: b
-    }), document.addEventListener("mousemove", D), document.addEventListener("mouseup", q), document.addEventListener("keydown", j);
-  }, D = (S) => {
+    }), document.addEventListener("mousemove", D), document.addEventListener("mouseup", N), document.addEventListener("keydown", U);
+  }, D = (k) => {
     if (!a) return;
-    const et = S.clientX - c, wt = S.clientY - l, ht = r.getBoundingClientRect(), ut = t.getBoundingClientRect();
+    const et = k.clientX - c, wt = k.clientY - l, ht = r.getBoundingClientRect(), ut = t.getBoundingClientRect();
     let B = m + et, F = b + wt;
-    const pt = ht.width - ut.width, mt = ht.height - ut.height, N = /* @__PURE__ */ new Set();
-    B <= 0 && (B = 0, N.add("left")), B >= pt && (B = pt, N.add("right")), F <= 0 && (F = 0, N.add("top")), F >= mt && (F = mt, N.add("bottom")), N.forEach((ft) => {
-      $.has(ft) || J(t, "zs3-move-boundary", {
+    const pt = ht.width - ut.width, mt = ht.height - ut.height, q = /* @__PURE__ */ new Set();
+    B <= 0 && (B = 0, q.add("left")), B >= pt && (B = pt, q.add("right")), F <= 0 && (F = 0, q.add("top")), F >= mt && (F = mt, q.add("bottom")), q.forEach((ft) => {
+      C.has(ft) || J(t, "zs3-move-boundary", {
         direction: i,
         element: t,
         x: B,
         y: F,
         boundary: ft
       });
-    }), $ = N, (i === "x" || i === "xy") && (t.style.left = `${B}px`, g = B), (i === "y" || i === "xy") && (t.style.top = `${F}px`, p = F), J(t, "zs3-move", {
+    }), C = q, (i === "x" || i === "xy") && (t.style.left = `${B}px`, g = B), (i === "y" || i === "xy") && (t.style.top = `${F}px`, p = F), J(t, "zs3-move", {
       direction: i,
       element: t,
       x: g,
@@ -1784,20 +1784,20 @@ const Pt = (e, t = {}) => {
       deltaX: g - m,
       deltaY: p - b
     });
-  }, q = () => {
+  }, N = () => {
     a && (a = !1, t.classList.remove("zs3-dragging"), s.style.cursor = "grab", J(t, "zs3-move-end", {
       direction: i,
       element: t,
       endX: g,
       endY: p
-    }), document.removeEventListener("mousemove", D), document.removeEventListener("mouseup", q), document.removeEventListener("keydown", j));
-  }, j = (S) => {
-    S.key === "Escape" && a && (a = !1, t.classList.remove("zs3-dragging"), s.style.cursor = "grab", (i === "x" || i === "xy") && (t.style.left = `${m}px`), (i === "y" || i === "xy") && (t.style.top = `${b}px`), J(t, "zs3-move-cancel", {
+    }), document.removeEventListener("mousemove", D), document.removeEventListener("mouseup", N), document.removeEventListener("keydown", U));
+  }, U = (k) => {
+    k.key === "Escape" && a && (a = !1, t.classList.remove("zs3-dragging"), s.style.cursor = "grab", (i === "x" || i === "xy") && (t.style.left = `${m}px`), (i === "y" || i === "xy") && (t.style.top = `${b}px`), J(t, "zs3-move-cancel", {
       direction: i,
       element: t
-    }), document.removeEventListener("mousemove", D), document.removeEventListener("mouseup", q), document.removeEventListener("keydown", j));
+    }), document.removeEventListener("mousemove", D), document.removeEventListener("mouseup", N), document.removeEventListener("keydown", U));
   }, A = s;
-  return A._moveMouseDownHandler && s.removeEventListener("mousedown", A._moveMouseDownHandler), A._moveMouseDownHandler = tt, A._moveMouseMoveHandler = D, A._moveMouseUpHandler = q, A._moveKeyDownHandler = j, A._moveEnabled = !0, A._moveDirection = i, A._moveComponent = t, s.addEventListener("mousedown", tt), s.style.cursor = "grab", t;
+  return A._moveMouseDownHandler && s.removeEventListener("mousedown", A._moveMouseDownHandler), A._moveMouseDownHandler = tt, A._moveMouseMoveHandler = D, A._moveMouseUpHandler = N, A._moveKeyDownHandler = U, A._moveEnabled = !0, A._moveDirection = i, A._moveComponent = t, s.addEventListener("mousedown", tt), s.style.cursor = "grab", t;
 }, Bt = (e) => {
   const t = e;
   t._moveMouseDownHandler && (e.removeEventListener("mousedown", t._moveMouseDownHandler), t._moveMouseDownHandler = void 0), t._moveMouseMoveHandler = void 0, t._moveMouseUpHandler = void 0, t._moveKeyDownHandler = void 0, t._moveEnabled = !1, t._moveDirection = void 0, t._moveComponent = void 0, e.style.cursor = "";
@@ -1812,7 +1812,7 @@ const Pt = (e, t = {}) => {
   }), o = s?.getAttribute(t);
   o !== null && new Function("event", o)(r), s?.dispatchEvent(r);
 };
-class k extends HTMLElement {
+class S extends HTMLElement {
   /**
    * Initializes the base component
    * @param options - Configuration options for the component
@@ -1831,7 +1831,7 @@ class k extends HTMLElement {
       slotAssignment: this._options.slotAssignment,
       clonable: this._options.clonable,
       serializable: this._options.serializable
-    })), this.initialize(), this.emitLifecycleEvent("zs3-built", { phase: "complete" }), this.$ = (s) => Y(s, this.shadowRoot ?? this._container ?? void 0);
+    })), this.initialize(), this.emitLifecycleEvent("zs3-built", { phase: "complete" }), this.$ = (s) => V(s, this.shadowRoot ?? this._container ?? void 0), this.$$ = (s) => V(s, this.shadowRoot ?? this._container ?? void 0).$$;
   }
   /**
    * Initialize component (called in constructor)
@@ -1845,22 +1845,6 @@ class k extends HTMLElement {
   get root() {
     return this._shadowRoot ?? this;
   }
-  /**
-   * Query selector within the component's root
-   * @param selector - CSS selector to query
-   * @returns Found element or null
-   */
-  qs(t) {
-    return this.root.querySelector(t);
-  }
-  /**
-   * Query all matching elements within the component's root
-   * @param selector - CSS selector to query
-   * @returns NodeList of found elements
-   */
-  qsAll(t) {
-    return this.root.querySelectorAll(t);
-  }
   /**
    * Register an attribute change handler
    * @param attributeName - Name of the attribute to observe
@@ -1909,7 +1893,7 @@ class k extends HTMLElement {
       "log",
       "window",
       b
-    ).call(this, l, s, Y, lt, window), m;
+    ).call(this, l, s, V, lt, window), m;
   }
   /**
    * Emit lifecycle event (internal use)
@@ -1982,10 +1966,10 @@ class k extends HTMLElement {
    */
   applyMoveEffect() {
     if (!this._mounted || !this._moveContainerSelector) return;
-    const t = this.getAttribute("move"), s = this._moveContainerSelector === ":host" ? this : this.qs(this._moveContainerSelector);
+    const t = this.getAttribute("move"), s = this._moveContainerSelector === ":host" ? this : this.$(this._moveContainerSelector).$;
     if (!s) return;
     let i;
-    this._moveDragSelector ? i = this._moveDragSelector === ":host" ? this : this.qs(this._moveDragSelector) : i = s, i && (t && ["x", "y", "xy"].includes(t) ? Ot({ container: s, dragHandle: i, direction: t }) : Bt(i));
+    this._moveDragSelector ? i = this._moveDragSelector === ":host" ? this : this.$(this._moveDragSelector).$ : i = s, i && (t && ["x", "y", "xy"].includes(t) ? Ot({ container: s, dragHandle: i, direction: t }) : Bt(i));
   }
   /**
    * Request an animation frame update
@@ -2236,9 +2220,9 @@ function Vt(e, t) {
     case "string":
       return It(e, t.default);
     case "boolean":
-      return qt(e, t.default ?? !1);
+      return jt(e, t.default ?? !1);
     case "number":
-      return jt(e, t.default ?? 0);
+      return Nt(e, t.default ?? 0);
   }
 }
 function It(e, t) {
@@ -2262,7 +2246,7 @@ function It(e, t) {
     configurable: !0
   };
 }
-function qt(e, t) {
+function jt(e, t) {
   return {
     get() {
       return this.getBooleanAttribute(e, t);
@@ -2274,7 +2258,7 @@ function qt(e, t) {
     configurable: !0
   };
 }
-function jt(e, t) {
+function Nt(e, t) {
   return {
     get() {
       return this.getNumberAttribute(e, t);
@@ -2286,10 +2270,10 @@ function jt(e, t) {
     configurable: !0
   };
 }
-var Nt = Object.defineProperty, Ut = Object.getOwnPropertyDescriptor, V = (e, t, s, i) => {
-  for (var r = i > 1 ? void 0 : i ? Ut(t, s) : t, o = e.length - 1, a; o >= 0; o--)
+var Ut = Object.defineProperty, qt = Object.getOwnPropertyDescriptor, I = (e, t, s, i) => {
+  for (var r = i > 1 ? void 0 : i ? qt(t, s) : t, o = e.length - 1, a; o >= 0; o--)
     (a = e[o]) && (r = (i ? a(t, s, r) : a(r)) || r);
-  return i && r && Nt(t, s, r), r;
+  return i && r && Ut(t, s, r), r;
 };
 const Kt = [
   "name",
@@ -2301,7 +2285,7 @@ const Kt = [
   "clickable",
   "i18n-aria-label"
 ];
-let z = class extends k {
+let z = class extends S {
   /**
    * Initializes the icon component
    */
@@ -2337,7 +2321,7 @@ let z = class extends k {
    * Setup event listeners with automatic cleanup
    */
   setupEventListeners() {
-    const e = this.qs(".icon-container");
+    const e = this.$(".icon-container").$;
     e && this.clickable && this.addManagedEventListener(e, "click", (t) => {
       this.emit("zs3-icon-click", {
         icon: this,
@@ -2568,25 +2552,25 @@ z._iconPaths = {
   check: '<path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 12l5 5l10 -10" />',
   x: '<path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M18 6l-12 12" /><path d="M6 6l12 12" />'
 };
-V([
+I([
   n("name", { type: "string" })
 ], z.prototype, "name", 2);
-V([
+I([
   n("color", { type: "string" })
 ], z.prototype, "color", 2);
-V([
+I([
   n("rotate", { type: "number", default: 0 })
 ], z.prototype, "rotate", 2);
-V([
+I([
   n("flip", { type: "string" })
 ], z.prototype, "flip", 2);
-V([
+I([
   n("clickable", { type: "boolean" })
 ], z.prototype, "clickable", 2);
-V([
+I([
   n("i18n-aria-label", { type: "string" })
 ], z.prototype, "i18nAriaLabel", 2);
-z = V([
+z = I([
   x("zs3-icon"),
   E(Kt)
 ], z);
@@ -2614,7 +2598,7 @@ const Jt = [
   "zs3-float-hide-start",
   "zs3-float-hide-end"
 ];
-let f = class extends k {
+let f = class extends S {
   /**
    * Initializes the button component
    */
@@ -2664,14 +2648,14 @@ let f = class extends k {
    * Setup event listeners with automatic cleanup
    */
   setupEventListeners() {
-    const e = this.qs("button");
+    const e = this.$("button").$;
     e && (this._buttonElement = e, this.addManagedEventListener(e, "click", (s) => {
       s.stopPropagation(), s.preventDefault(), this.emit("zs3-click", {
         button: this,
         originalEvent: s
       });
     }));
-    const t = this.qs(".icon-container");
+    const t = this.$(".icon-container").$;
     t && this.addManagedEventListener(t, "click", (s) => {
       this.emit("zs3-icon-click", {
         button: this,
@@ -2695,7 +2679,7 @@ let f = class extends k {
    * Update button content (text and icon)
    */
   updateButtonContent() {
-    const e = this.qs("button");
+    const e = this.$("button").$;
     if (!e) return;
     const t = this.textContent?.trim() || this._textContent, s = this.getIconHTML(), i = this.position;
     e.setAttribute("aria-label", this.getAttribute("aria-label") || t || "Button");
@@ -2707,7 +2691,7 @@ let f = class extends k {
    * Update button CSS classes
    */
   updateButtonClasses() {
-    const e = this.qs("button");
+    const e = this.$("button").$;
     e && (e.className = "", this.variant && e.classList.add(`btn-${this.variant}`), this.size && e.classList.add(`btn-${this.size}`), this.rounded && e.classList.add("rounded"), this.loading && e.classList.add("loading"), this.disabled && e.classList.add("disabled"));
   }
   /**
@@ -3023,7 +3007,7 @@ const Qt = [
   "i18n-accept-text",
   "i18n-cancel-text"
 ];
-let u = class extends k {
+let u = class extends S {
   /**
    * Constructor
    */
@@ -3236,9 +3220,7 @@ let u = class extends k {
   setupFormElements() {
     this._buttons.forEach((e) => e.remove()), this._buttons = [];
     for (const e of this._fields) {
-      const t = this.qs(
-        `[data-field="${e.name}"]`
-      );
+      const t = this.$(`[data-field="${e.name}"]`).$;
       t && (this.addManagedEventListener(t, "input", (s) => {
         const i = s.target;
         let r;
@@ -3269,7 +3251,7 @@ let u = class extends k {
    * Setup accept and cancel buttons
    */
   setupButtons() {
-    const e = this.qs(".form-buttons");
+    const e = this.$(".form-buttons").$;
     if (!e) return;
     const t = new f();
     if (t.textContent = this.i18nAcceptText ? this.t(this.i18nAcceptText) : this.acceptText || this.t("zs3.form.accept"), t.variant = this.acceptVariant, t.setAttribute("data-action", "accept"), this.addManagedEventListener(t, "zs3-click", () => {
@@ -3285,7 +3267,7 @@ let u = class extends k {
    * Update field UI (show/hide error)
    */
   updateFieldUI(e) {
-    const t = this.qs(`[data-field-container="${e}"]`), s = this.qs(`[data-error="${e}"]`), i = this.qs(`[data-field="${e}"]`);
+    const t = this.$(`[data-field-container="${e}"]`).$, s = this.$(`[data-error="${e}"]`).$, i = this.$(`[data-field="${e}"]`).$;
     if (!t || !i) return;
     const r = this._errors[e], o = this._touched.has(e);
     r && o ? (t.classList.add("has-error"), i.classList.add("invalid"), s && (s.textContent = r, s.style.display = "block")) : (t.classList.remove("has-error"), i.classList.remove("invalid"), s && (s.textContent = "", s.style.display = "none"));
@@ -3344,9 +3326,9 @@ let u = class extends k {
                 `;
         break;
       case "select": {
-        const $ = (e.options || []).map((D) => {
-          const q = this.getTranslatedOptionLabel(D), j = i === D.value ? "selected" : "";
-          return `<option value="${D.value}" ${j}>${q}</option>`;
+        const C = (e.options || []).map((D) => {
+          const N = this.getTranslatedOptionLabel(D), U = i === D.value ? "selected" : "";
+          return `<option value="${D.value}" ${U}>${N}</option>`;
         }).join(""), tt = e.i18nPlaceholder ? `<option value="" disabled ${i ? "" : "selected"} data-i18n="${e.i18nPlaceholder}"></option>` : s ? `<option value="" disabled ${i ? "" : "selected"}>${s}</option>` : "";
         p = `
                     <select
@@ -3355,13 +3337,13 @@ let u = class extends k {
                         ${l}
                     >
                         ${tt}
-                        ${$}
+                        ${C}
                     </select>
                 `;
         break;
       }
       case "checkbox": {
-        const $ = e.i18nLabel ? `<span class="checkbox-text" data-i18n="${e.i18nLabel}"></span>` : `<span class="checkbox-text">${t}</span>`;
+        const C = e.i18nLabel ? `<span class="checkbox-text" data-i18n="${e.i18nLabel}"></span>` : `<span class="checkbox-text">${t}</span>`;
         p = `
                     <label class="checkbox-label">
                         <input
@@ -3370,7 +3352,7 @@ let u = class extends k {
                             ${i ? "checked" : ""}
                             ${l}
                         />
-                        ${$}
+                        ${C}
                     </label>
                 `;
         break;
@@ -3747,7 +3729,7 @@ let H = class extends u {
    * Add register button
    */
   addRegisterButton() {
-    const e = this.qs(".form-buttons");
+    const e = this.$(".form-buttons").$;
     if (!e) return;
     const t = new f(), s = this.i18nRegisterText || "zs3.login.register";
     t.textContent = this.t(s), t.variant = "secondary", t.setAttribute("data-action", "register"), this.addManagedEventListener(t, "zs3-click", () => {
@@ -3952,7 +3934,7 @@ Z = dt([
   E(ne, { inherit: !0 })
 ], Z);
 typeof window < "u" && (window.$RecoverPasswordForm = Z);
-var le = Object.defineProperty, ce = Object.getOwnPropertyDescriptor, I = (e, t, s, i) => {
+var le = Object.defineProperty, ce = Object.getOwnPropertyDescriptor, j = (e, t, s, i) => {
   for (var r = i > 1 ? void 0 : i ? ce(t, s) : t, o = e.length - 1, a; o >= 0; o--)
     (a = e[o]) && (r = (i ? a(t, s, r) : a(r)) || r);
   return i && r && le(t, s, r), r;
@@ -3965,7 +3947,7 @@ const de = [
   "centered",
   "scrollable"
 ];
-let M = class extends k {
+let M = class extends S {
   /**
    * Initializes the modal component
    */
@@ -3997,11 +3979,11 @@ let M = class extends k {
    * Setup event listeners
    */
   setupEventListeners() {
-    const e = this.qs(".modal-backdrop");
+    const e = this.$(".modal-backdrop").$;
     e && this.closeOnBackdrop && this.addManagedEventListener(e, "click", (s) => {
       s.target === e && (this.emit("zs3-modal-backdrop-click", { modal: this }), this.hide());
     });
-    const t = this.qs(".modal-container");
+    const t = this.$(".modal-container").$;
     t && this.addManagedEventListener(t, "click", (s) => {
       s.stopPropagation();
     });
@@ -4068,7 +4050,7 @@ let M = class extends k {
         </div>
       </div>
     `);
-    const e = this.qs(".modal-backdrop"), t = this.qs(".modal-container");
+    const e = this.$(".modal-backdrop").$, t = this.$(".modal-container").$;
     e && t && (t.classList.add(`size-${this.size}`), this.centered && e.classList.add("centered"), this.scrollable && t.classList.add("scrollable"), this._isVisible && (e.classList.add("visible"), t.classList.add("visible"))), this._mounted && this.setupEventListeners(), this.emitLifecycleEvent("zs3-rendered", { phase: "complete" });
   }
   /**
@@ -4234,7 +4216,7 @@ let M = class extends k {
   hide() {
     if (!this._isVisible) return;
     this._isVisible = !1;
-    const e = this.qs(".modal-backdrop"), t = this.qs(".modal-container");
+    const e = this.$(".modal-backdrop").$, t = this.$(".modal-container").$;
     e && t && (e.classList.remove("visible"), t.classList.remove("visible")), setTimeout(() => {
       this._isVisible || (this.style.display = "none", this.unlockBodyScroll(), this.removeEscapeListener(), this.restoreFocus());
     }, 300), this.emit("zs3-modal-hide", {
@@ -4260,25 +4242,25 @@ let M = class extends k {
     e.size !== void 0 && (this.size = e.size), e.backdrop !== void 0 && (this.backdrop = e.backdrop), e.closeOnBackdrop !== void 0 && (this.closeOnBackdrop = e.closeOnBackdrop), e.closeOnEscape !== void 0 && (this.closeOnEscape = e.closeOnEscape), e.centered !== void 0 && (this.centered = e.centered), e.scrollable !== void 0 && (this.scrollable = e.scrollable), this.render();
   }
 };
-I([
+j([
   n("size", { type: "string", default: "medium" })
 ], M.prototype, "size", 2);
-I([
+j([
   n("backdrop", { type: "boolean", default: !0 })
 ], M.prototype, "backdrop", 2);
-I([
+j([
   n("close-on-backdrop", { type: "boolean", default: !0 })
 ], M.prototype, "closeOnBackdrop", 2);
-I([
+j([
   n("close-on-escape", { type: "boolean", default: !0 })
 ], M.prototype, "closeOnEscape", 2);
-I([
+j([
   n("centered", { type: "boolean", default: !0 })
 ], M.prototype, "centered", 2);
-I([
+j([
   n("scrollable", { type: "boolean" })
 ], M.prototype, "scrollable", 2);
-M = I([
+M = j([
   x("zs3-modal"),
   E(de)
 ], M);
@@ -4328,7 +4310,7 @@ let d = class extends M {
     this._buttons.forEach((t) => {
       t.remove();
     }), this._buttons = [];
-    const e = this.qs(".dialog-buttons");
+    const e = this.$(".dialog-buttons").$;
     if (e) {
       if (this.showAccept) {
         const t = new f(), s = this.getAttribute("i18n-accept-text");
@@ -4403,7 +4385,7 @@ let d = class extends M {
         </div>
       </div>
     `);
-    const o = this.qs(".modal-backdrop"), a = this.qs(".modal-container");
+    const o = this.$(".modal-backdrop").$, a = this.$(".modal-container").$;
     o && a && (a.classList.add(`size-${this.size}`), this.centered && o.classList.add("centered"), this.scrollable && a.classList.add("scrollable"), this._isVisible && (o.classList.add("visible"), a.classList.add("visible"))), this._mounted && (this.setupEventListeners(), this.setupDialogButtons()), this.emitLifecycleEvent("zs3-rendered", { phase: "complete" });
   }
   /**
@@ -4689,7 +4671,7 @@ const be = [
   "i18n-message",
   "i18n-close-label"
 ];
-let h = class extends k {
+let h = class extends S {
   /**
    * Initializes the notification component
    */
@@ -4728,9 +4710,9 @@ let h = class extends k {
    * Setup event listeners
    */
   setupEventListeners() {
-    const e = this.qs(".close-btn");
+    const e = this.$(".close-btn").$;
     e && this.dismissible && this.addManagedEventListener(e, "click", this.handleDismiss.bind(this));
-    const t = this.qs(".notification");
+    const t = this.$(".notification").$;
     t && this.addManagedEventListener(t, "click", (s) => {
       s.target.classList.contains("close-btn") || this.emit("zs3-notification-click", {
         notification: this,
@@ -4767,7 +4749,7 @@ let h = class extends k {
   animateProgress() {
     const e = () => {
       if (!this._isVisible) return;
-      const t = Date.now() - this._startTime, s = Math.min(t / this.duration * 100, 100), i = this.qs(".progress-bar");
+      const t = Date.now() - this._startTime, s = Math.min(t / this.duration * 100, 100), i = this.$(".progress-bar").$;
       i && (i.style.width = `${s}%`), s < 100 && (this._progressAnimationFrame = requestAnimationFrame(e));
     };
     e();
@@ -4800,7 +4782,7 @@ let h = class extends k {
         ${i}
       </div>
     `);
-    const l = this.qs(".notification");
+    const l = this.$(".notification").$;
     l && (l.className = `notification position-${this.position}`, this.type && l.classList.add(`type-${this.type}`)), this._mounted && this.setupEventListeners(), this.emitLifecycleEvent("zs3-rendered", { phase: "complete" });
   }
   /**
@@ -5044,7 +5026,7 @@ let h = class extends k {
    */
   show() {
     this._isVisible || (this._isVisible = !0, this.className = `position-${this.position}`, requestAnimationFrame(() => {
-      const e = this.qs(".notification");
+      const e = this.$(".notification").$;
       e && e.classList.add("visible");
     }), this.resetAutoHideTimer(), this.emit("zs3-notification-show", {
       notification: this,
@@ -5058,7 +5040,7 @@ let h = class extends k {
   hide() {
     if (!this._isVisible) return;
     this._isVisible = !1, this.clearTimers();
-    const e = this.qs(".notification");
+    const e = this.$(".notification").$;
     e && e.classList.remove("visible"), this.emit("zs3-notification-hide", {
       notification: this,
       type: this.type,
@@ -5167,7 +5149,7 @@ var ge = Object.defineProperty, ve = Object.getOwnPropertyDescriptor, zt = (e, t
   return i && r && ge(t, s, r), r;
 };
 const ze = ["zs3-position"];
-let it = class extends k {
+let it = class extends S {
   constructor() {
     super({
       useShadowDOM: !0,
@@ -5178,7 +5160,7 @@ let it = class extends k {
     this.setupEventListeners();
   }
   setupEventListeners() {
-    const e = this.qs("select");
+    const e = this.$("select").$;
     e && this.addManagedEventListener(e, "change", () => {
       y.setLocale(e.value);
     });
@@ -5187,7 +5169,7 @@ let it = class extends k {
     this.updateSelectedValue();
   }
   updateSelectedValue() {
-    const e = this.qs("select");
+    const e = this.$("select").$;
     e && (e.value = y.getLocale());
   }
   render() {
@@ -5256,7 +5238,7 @@ const xe = ["zs3-position"], Ee = [
   { value: "high-contrast", label: "High Contrast" },
   { value: "system", label: "System" }
 ];
-let rt = class extends k {
+let rt = class extends S {
   constructor() {
     super({
       useShadowDOM: !0,
@@ -5267,7 +5249,7 @@ let rt = class extends k {
     this.setupEventListeners();
   }
   setupEventListeners() {
-    const e = this.qs("select");
+    const e = this.$("select").$;
     e && this.addManagedEventListener(e, "change", () => {
       G.setTheme(e.value);
     });
@@ -5276,7 +5258,7 @@ let rt = class extends k {
     this.updateSelectedValue();
   }
   updateSelectedValue() {
-    const e = this.qs("select");
+    const e = this.$("select").$;
     e && (e.value = G.getTheme());
   }
   render() {
@@ -5357,7 +5339,7 @@ const Me = [
   "zs3-move-cancel",
   "zs3-move-boundary"
 ];
-let L = class extends k {
+let $ = class extends S {
   /**
    * Initializes the toolbar component
    */
@@ -5436,7 +5418,7 @@ let L = class extends k {
         <slot></slot>
       </div>
     `);
-    const i = this.qs(".toolbar");
+    const i = this.$(".toolbar").$;
     i && (i.className = "toolbar", i.classList.add(this.direction), this.variant && i.classList.add(`variant-${this.variant}`), this.rounded && i.classList.add("rounded"), this.align && i.classList.add(`align-${this.align}`), this.float && i.classList.add(`float-${this.float}`)), this.emitLifecycleEvent("zs3-rendered", { phase: "complete" });
   }
   /**
@@ -5675,39 +5657,39 @@ let L = class extends k {
 };
 R([
   n("direction", { type: "string", default: "row" })
-], L.prototype, "direction", 2);
+], $.prototype, "direction", 2);
 R([
   n("float", { type: "string" })
-], L.prototype, "float", 2);
+], $.prototype, "float", 2);
 R([
   n("align", { type: "string" })
-], L.prototype, "align", 2);
+], $.prototype, "align", 2);
 R([
   n("gap", { type: "string" })
-], L.prototype, "gap", 2);
+], $.prototype, "gap", 2);
 R([
   n("variant", { type: "string" })
-], L.prototype, "variant", 2);
+], $.prototype, "variant", 2);
 R([
   n("rounded", { type: "boolean" })
-], L.prototype, "rounded", 2);
+], $.prototype, "rounded", 2);
 R([
   n("i18n-aria-label", { type: "string" })
-], L.prototype, "i18nAriaLabel", 2);
-L = R([
+], $.prototype, "i18nAriaLabel", 2);
+$ = R([
   x("zs3-toolbar"),
   E(Me),
   vt(".toolbar"),
   Ft(":host")
-], L);
-customElements.get("zs3-toolbar") || customElements.define("zs3-toolbar", L);
-typeof window < "u" && (window.$Toolbar = L);
-var Le = Object.defineProperty, Ce = Object.getOwnPropertyDescriptor, O = (e, t, s, i) => {
-  for (var r = i > 1 ? void 0 : i ? Ce(t, s) : t, o = e.length - 1, a; o >= 0; o--)
+], $);
+customElements.get("zs3-toolbar") || customElements.define("zs3-toolbar", $);
+typeof window < "u" && (window.$Toolbar = $);
+var $e = Object.defineProperty, Le = Object.getOwnPropertyDescriptor, O = (e, t, s, i) => {
+  for (var r = i > 1 ? void 0 : i ? Le(t, s) : t, o = e.length - 1, a; o >= 0; o--)
     (a = e[o]) && (r = (i ? a(t, s, r) : a(r)) || r);
-  return i && r && Le(t, s, r), r;
+  return i && r && $e(t, s, r), r;
 };
-let C = class extends k {
+let L = class extends S {
   /**
    * Initializes the window component
    */
@@ -5733,15 +5715,15 @@ let C = class extends k {
    * Setup event listeners
    */
   setupEventListeners() {
-    const e = this.qs(".btn-close");
+    const e = this.$(".btn-close").$;
     e && this.addManagedEventListener(e, "click", (i) => {
       i.stopPropagation(), this.emit("zs3-window-close", { window: this });
     });
-    const t = this.qs(".btn-minimize");
+    const t = this.$(".btn-minimize").$;
     t && this.addManagedEventListener(t, "click", (i) => {
       i.stopPropagation(), this.emit("zs3-window-minimize", { window: this });
     });
-    const s = this.qs(".btn-maximize");
+    const s = this.$(".btn-maximize").$;
     s && this.addManagedEventListener(s, "click", (i) => {
       i.stopPropagation(), this.emit("zs3-window-maximize", { window: this });
     });
@@ -5881,26 +5863,26 @@ let C = class extends k {
 };
 O([
   n("title", { type: "string" })
-], C.prototype, "windowTitle", 2);
+], L.prototype, "windowTitle", 2);
 O([
   n("width", { type: "string" })
-], C.prototype, "width", 2);
+], L.prototype, "width", 2);
 O([
   n("height", { type: "string" })
-], C.prototype, "height", 2);
+], L.prototype, "height", 2);
 O([
   n("closable", { type: "boolean" })
-], C.prototype, "closable", 2);
+], L.prototype, "closable", 2);
 O([
   n("minimizable", { type: "boolean" })
-], C.prototype, "minimizable", 2);
+], L.prototype, "minimizable", 2);
 O([
   n("maximizable", { type: "boolean" })
-], C.prototype, "maximizable", 2);
+], L.prototype, "maximizable", 2);
 O([
   n("i18n-title", { type: "string" })
-], C.prototype, "i18nTitle", 2);
-C = O([
+], L.prototype, "i18nTitle", 2);
+L = O([
   x("zs3-window"),
   E([
     "title",
@@ -5918,16 +5900,16 @@ C = O([
     "zs3-move-cancel",
     "zs3-move-boundary"
   ])
-], C);
-customElements.get("zs3-window") || customElements.define("zs3-window", C);
-typeof window < "u" && (window.$Window = C);
+], L);
+customElements.get("zs3-window") || customElements.define("zs3-window", L);
+typeof window < "u" && (window.$Window = L);
 export {
-  Y as $,
-  k as $BaseComponent,
+  V as $,
+  S as $BaseComponent,
   f as $Button,
   Et as $Debug,
   u as $Form,
-  kt as $I18n,
+  St as $I18n,
   z as $Icon,
   _t as $Log,
   H as $LoginForm,
@@ -5941,33 +5923,33 @@ export {
   rt as $SelectTheme,
   Tt as $Storage,
   Ae as $Store,
-  L as $Toolbar,
-  C as $Window,
-  $e as $env,
+  $ as $Toolbar,
+  L as $Window,
+  Ce as $env,
   x as Component,
   nt as DEFAULT_FALLBACK_LOCALE,
   at as DEFAULT_LOCALE,
   At as DIContainer,
-  $t as EventBus,
+  Ct as EventBus,
   vt as Float,
   Oe as HttpClient,
-  U as HttpError,
+  K as HttpError,
   Ft as Move,
   E as ObservedAttributes,
   Re as Router,
-  Ct as ThemeChangeEvent,
-  K as ThemeManager,
+  Lt as ThemeChangeEvent,
+  Y as ThemeManager,
   T as ZS3,
-  Lt as debug,
+  $t as debug,
   ot as defaultTranslations,
   He as diContainer,
   Bt as disableMove,
   De as eventBus,
   Pt as float,
   Ve as generateEvent,
-  ke as getCSSVariable,
+  Se as getCSSVariable,
   Fe as getMoveDirection,
-  St as getRegisteredComponents,
+  kt as getRegisteredComponents,
   y as i18n,
   bt as initThemeSystem,
   Be as isMoveEnabled,
@@ -5977,5 +5959,5 @@ export {
   Pe as setCSSVariable,
   X as storage,
   G as themeManager,
-  Se as withThemeSupport
+  ke as withThemeSupport
 };