zs3-ui-components 1.2.2 → 1.2.4

package/dist/index.js

@@ -1,4 +1,4 @@
-class T {
+class C {
   /**
    * Creates a new instance by selecting elements using a CSS selector.
    * @param {string} selector - CSS selector string.
@@ -14,7 +14,7 @@ class T {
    * @returns {string} Library version.
    */
   static version() {
-    return "1.2.2";
+    return "1.2.4";
   }
   /**
    * Creates a ZS3 instance from an HTMLElement.
@@ -22,7 +22,7 @@ class T {
    * @returns {ZS3} A new ZS3 instance containing only this element.
    */
   static fromElement(t) {
-    const s = Object.create(T.prototype);
+    const s = Object.create(C.prototype);
     return s.list = [t], s.$ = t, s.$$ = [t], s;
   }
   /**
@@ -32,7 +32,7 @@ class T {
    */
   forEach(t) {
     return this.list.forEach((s, i) => {
-      t(T.fromElement(s), i);
+      t(C.fromElement(s), i);
     }), this;
   }
   /**
@@ -51,7 +51,7 @@ class T {
    */
   *[Symbol.iterator]() {
     for (const t of this.list)
-      yield T.fromElement(t);
+      yield C.fromElement(t);
   }
   /**
    * Get or set the innerHTML of the selected elements.
@@ -371,8 +371,8 @@ class T {
     return typeof t == "string" && s !== void 0 ? (this.list.forEach((i) => {
       i.style.setProperty(t, s);
     }), this) : typeof t == "string" && s === void 0 ? this.list[0]?.style.getPropertyValue(t) ?? "" : typeof t == "object" ? (this.list.forEach((i) => {
-      for (const [r, o] of Object.entries(t))
-        i.style.setProperty(r, o);
+      for (const [o, r] of Object.entries(t))
+        i.style.setProperty(o, r);
     }), this) : this;
   }
   /**
@@ -381,7 +381,7 @@ class T {
   parent() {
     const t = this.list[0]?.parentElement;
     if (!t) return null;
-    const s = new T("body");
+    const s = new C("body");
     return s.list.length = 0, s.list.push(t), s.$ = t, s.$$ = [t], s;
   }
   /**
@@ -390,7 +390,7 @@ class T {
   children() {
     const t = Array.from(this.list[0]?.children ?? []);
     if (t.length === 0) return null;
-    const s = new T("body");
+    const s = new C("body");
     return s.list.length = 0, s.list.push(...t), s.$ = t[0], s.$$ = t, s;
   }
   /**
@@ -400,7 +400,7 @@ class T {
   find(t) {
     const s = Array.from(this.list[0]?.querySelectorAll(t) ?? []);
     if (s.length === 0) return null;
-    const i = new T("body");
+    const i = new C("body");
     return i.list.length = 0, i.list.push(...s), i.$ = s[0], i.$$ = s, i;
   }
   /**
@@ -416,7 +416,7 @@ class T {
   eq(t) {
     const s = this.list[t];
     if (!s) return null;
-    const i = new T("body");
+    const i = new C("body");
     return i.list.length = 0, i.list.push(s), i.$ = s, i.$$ = [s], i;
   }
   /**
@@ -427,18 +427,18 @@ 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 N = (e, t) => e != null && e.length > 0 ? new C(e, t) : null, Oe = () => ({
   userAgent: navigator.userAgent,
   language: navigator.language,
   platform: navigator.platform,
-  ZS3: T.version()
+  ZS3: C.version()
 });
-class xt {
+class At {
   constructor() {
     this.getAll = () => {
       const t = new URLSearchParams(window.location.search), s = {};
-      return t.forEach((i, r) => {
-        s[r] = i;
+      return t.forEach((i, o) => {
+        s[o] = i;
       }), s;
     }, this.get = (t) => t.length === 0 ? this.getAll() : new URLSearchParams(window.location.search).get(t) ?? "", this.set = (t, s) => {
       const i = new URL(window.location.href);
@@ -449,20 +449,20 @@ class xt {
     }, this.has = (t) => new URLSearchParams(window.location.search).has(t);
   }
 }
-class Et {
+class St {
   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));
+      const o = `${t}:${s}`, r = this.debugging.get(o) ?? [];
+      r.some((c) => c.root === i) || (N(t, i)?.addEvent(s, this.doDebug), r.push({ selector: t, eventType: s, root: i }), this.debugging.set(o, r));
     }, 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));
+      const o = `${t}:${s}`, r = this.debugging.get(o);
+      if (!r) return;
+      const a = r.findIndex((c) => c.root === i);
+      a !== -1 && (N(t, i)?.removeEvent(s, this.doDebug), r.splice(a, 1), r.length === 0 && this.debugging.delete(o));
     }, this.stopAll = () => {
       this.debugging.forEach((t) => {
-        t.forEach(({ selector: s, eventType: i, root: r }) => {
-          Y(s, r)?.removeEvent(i, this.doDebug);
+        t.forEach(({ selector: s, eventType: i, root: o }) => {
+          N(s, o)?.removeEvent(i, this.doDebug);
         });
       }), this.debugging.clear();
     }, this.doDebug = (t) => {
@@ -479,7 +479,7 @@ class Et {
     }, this.debugging = /* @__PURE__ */ new Map();
   }
 }
-class _t {
+class kt {
   constructor() {
     this.enabled = !0, this.level = "all", this.setEnabled = (t) => {
       this.enabled = t;
@@ -498,31 +498,31 @@ class _t {
   }
   info(t, s) {
     if (!this.shouldLog("info")) return;
-    const i = "color: green; font-weight: bold;", r = (/* @__PURE__ */ new Date()).toLocaleTimeString();
-    console.log(`%c[INFO ${r}] ${t}`, i), s && this.logObject(s, console.log);
+    const i = "color: green; font-weight: bold;", o = (/* @__PURE__ */ new Date()).toLocaleTimeString();
+    console.log(`%c[INFO ${o}] ${t}`, i), s && this.logObject(s, console.log);
   }
   warn(t, s) {
     if (!this.shouldLog("warn")) return;
-    const i = "color: orange; font-weight: bold;", r = (/* @__PURE__ */ new Date()).toLocaleTimeString();
-    console.warn(`%c[WARN ${r}] ${t}`, i), s && this.logObject(s, console.warn);
+    const i = "color: orange; font-weight: bold;", o = (/* @__PURE__ */ new Date()).toLocaleTimeString();
+    console.warn(`%c[WARN ${o}] ${t}`, i), s && this.logObject(s, console.warn);
   }
   error(t, s) {
     if (!this.shouldLog("error")) return;
-    const i = "color: red; font-weight: bold;", r = (/* @__PURE__ */ new Date()).toLocaleTimeString();
-    console.error(`%c[ERROR ${r}] ${t}`, i), s && this.logObject(s, console.error);
+    const i = "color: red; font-weight: bold;", o = (/* @__PURE__ */ new Date()).toLocaleTimeString();
+    console.error(`%c[ERROR ${o}] ${t}`, i), s && this.logObject(s, console.error);
   }
   debug(t, s) {
     if (!this.enabled) return;
-    const i = "color: blue; font-weight: bold;", r = (/* @__PURE__ */ new Date()).toLocaleTimeString();
-    console.log(`%c[DEBUG ${r}] ${t}`, i), s && this.logObject(s, console.log);
+    const i = "color: blue; font-weight: bold;", o = (/* @__PURE__ */ new Date()).toLocaleTimeString();
+    console.log(`%c[DEBUG ${o}] ${t}`, i), s && this.logObject(s, console.log);
   }
   success(t, s) {
     if (!this.enabled) return;
-    const i = "color: lime; font-weight: bold;", r = (/* @__PURE__ */ new Date()).toLocaleTimeString();
-    console.log(`%c[SUCCESS ${r}] ${t}`, i), s && this.logObject(s, console.log);
+    const i = "color: lime; font-weight: bold;", o = (/* @__PURE__ */ new Date()).toLocaleTimeString();
+    console.log(`%c[SUCCESS ${o}] ${t}`, i), s && this.logObject(s, console.log);
   }
 }
-class Tt {
+class Pt {
   constructor() {
     this.set = (t, s) => {
       try {
@@ -545,7 +545,7 @@ class Tt {
     }, this.has = (t) => localStorage.getItem(t) !== null, this.keys = () => Object.keys(localStorage);
   }
 }
-class Ae {
+class Be {
   /**
    * Crea una nova instància del Store amb l'estat inicial proporcionat.
    * L'estat inicial es copia en profunditat (structuredClone) per evitar mutacions exteriors.
@@ -610,8 +610,8 @@ class Ae {
       console.warn(`[Store] No hi ha reducer per l'acció: ${t}`);
       return;
     }
-    const r = i(this.state, s);
-    this.state = { ...this.state, ...r }, this.listeners.get(t)?.forEach((o) => o(this.getState())), this.listeners.get("*")?.forEach((o) => o(this.getState()));
+    const o = i(this.state, s);
+    this.state = { ...this.state, ...o }, this.listeners.get(t)?.forEach((r) => r(this.getState())), this.listeners.get("*")?.forEach((r) => r(this.getState()));
   }
   /**
    * Subscriu un listener als canvis d'una acció concreta o de qualsevol acció.
@@ -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 Dt = new At(), Ht = new St(), ft = new kt(), tt = new Pt();
+typeof window < "u" && (window.$ = N, window.log = ft, window.debug = Ht, window.storage = tt, window.params = Dt);
 window.addEventListener("load", () => {
-  lt.success("ZS3 v" + T.version() + " loaded");
+  ft.success("ZS3 v" + C.version() + " loaded");
 });
-class Ct extends CustomEvent {
+class Rt extends CustomEvent {
   constructor(t) {
     super("zs3-theme-change", {
       bubbles: !0,
@@ -660,18 +660,18 @@ class Ct extends CustomEvent {
     });
   }
 }
-class K {
+class X {
   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 X.instance || (X.instance = new X()), X.instance;
   }
   /**
    * Carrega el tema guardat o usa el del sistema
    */
   loadSavedTheme() {
-    const t = X.get(this.STORAGE_KEY);
+    const t = tt.get(this.STORAGE_KEY);
     t ? this.setTheme(t) : this.setTheme("system");
   }
   /**
@@ -697,13 +697,13 @@ 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 Rt(t));
   }
   /**
    * Estableix un nou tema
    */
   setTheme(t) {
-    this.currentTheme = t, X.set(this.STORAGE_KEY, t), this.applyTheme(t);
+    this.currentTheme = t, tt.set(this.STORAGE_KEY, t), this.applyTheme(t);
   }
   /**
    * Obté el tema actual
@@ -740,9 +740,9 @@ class K {
     ];
   }
 }
-const G = K.getInstance();
-typeof window < "u" && (window.themeManager = G);
-function Se(e) {
+const Z = X.getInstance();
+typeof window < "u" && (window.themeManager = Z);
+function Ve(e) {
   return class extends e {
     connectedCallback() {
       super.connectedCallback && super.connectedCallback(), this._themeChangeHandler = this.onThemeChange.bind(this), window.addEventListener("zs3-theme-change", this._themeChangeHandler);
@@ -756,20 +756,20 @@ function Se(e) {
     }
   };
 }
-function ke(e) {
+function Fe(e) {
   return getComputedStyle(document.documentElement).getPropertyValue(`--${e}`).trim();
 }
-function Pe(e, t) {
+function Ie(e, t) {
   document.documentElement.style.setProperty(`--${e}`, t);
 }
-function bt(e) {
+function Tt(e) {
   const { defaultTheme: t } = e || {};
-  t && G.setTheme(t), console.log("✅ ZS3 Theme System initialized");
+  t && Z.setTheme(t), console.log("✅ ZS3 Theme System initialized");
 }
 typeof window < "u" && (document.readyState === "loading" ? document.addEventListener("DOMContentLoaded", () => {
-  bt();
-}) : bt());
-class $t {
+  Tt();
+}) : Tt());
+class Ot {
   constructor() {
     this.handlers = /* @__PURE__ */ new Map();
   }
@@ -829,8 +829,8 @@ class $t {
    * ```
    */
   once(t, s) {
-    const i = (r) => {
-      s(r), this.handlers.get(t)?.delete(i);
+    const i = (o) => {
+      s(o), this.handlers.get(t)?.delete(i);
     };
     this.on(t, i);
   }
@@ -860,8 +860,8 @@ class $t {
     this.handlers.clear();
   }
 }
-const De = new $t();
-class At {
+const je = new Ot();
+class Bt {
   constructor() {
     this.registry = /* @__PURE__ */ new Map();
   }
@@ -961,8 +961,8 @@ class At {
     this.registry.clear();
   }
 }
-const He = new At();
-class Re {
+const Ne = new Bt();
+class Ue {
   /**
    * Crea una nova instància del Router.
    *
@@ -988,8 +988,8 @@ class Re {
       const i = t.target.closest("a[data-link]");
       if (i) {
         t.preventDefault();
-        const r = i.getAttribute("href");
-        r && this.navigate(r);
+        const o = i.getAttribute("href");
+        o && this.navigate(o);
       }
     }), this.resolve(window.location.pathname);
   }
@@ -1025,24 +1025,24 @@ class Re {
   async resolve(t) {
     const s = this.match(t);
     if (!s) {
-      const o = this.routes.find((a) => a.path === "*");
-      o && await this.loadComponent(o, {});
+      const r = this.routes.find((a) => a.path === "*");
+      r && await this.loadComponent(r, {});
       return;
     }
-    const { route: i, params: r } = s;
+    const { route: i, params: o } = s;
     if (i.guard) {
-      const o = {
+      const r = {
         path: t,
-        params: r,
+        params: o,
         query: new URLSearchParams(window.location.search)
-      }, a = i.guard(o);
+      }, a = i.guard(r);
       if (a === !1) return;
       if (typeof a == "string") {
         await this.navigate(a);
         return;
       }
     }
-    this.currentPath = t, await this.loadComponent(i, r);
+    this.currentPath = t, await this.loadComponent(i, o);
   }
   /**
    * Destrueix el component actual (si existeix), fa el lazy-load del mòdul de
@@ -1086,21 +1086,21 @@ class Re {
    * extractParams('/about', '/contact')      // null
    */
   extractParams(t, s) {
-    const i = t.split("/").filter(Boolean), r = s.split("/").filter(Boolean);
-    if (i.length !== r.length) return null;
-    const o = {};
+    const i = t.split("/").filter(Boolean), o = s.split("/").filter(Boolean);
+    if (i.length !== o.length) return null;
+    const r = {};
     for (let a = 0; a < i.length; a++) {
-      const c = i[a], l = r[a];
+      const c = i[a], l = o[a];
       if (c.startsWith(":")) {
-        const m = c.slice(1);
-        o[m] = l;
+        const f = c.slice(1);
+        r[f] = l;
       } else if (c !== l)
         return null;
     }
-    return o;
+    return r;
   }
 }
-const ot = {
+const ut = {
   ca: {
     // Dialog
     "zs3.dialog.accept": "Acceptar",
@@ -1356,18 +1356,18 @@ const ot = {
     "zs3.recover.email.placeholder": "email@example.com",
     "zs3.recover.submit": "发送"
   }
-}, at = "ca", nt = "en", gt = /* @__PURE__ */ new Map();
-function St() {
-  return new Map(gt);
+}, pt = "ca", mt = "en", _t = /* @__PURE__ */ new Map();
+function Vt() {
+  return new Map(_t);
 }
-function x(e) {
+function E(e) {
   return function(t) {
-    return customElements.get(e) || (customElements.define(e, t), gt.set(e, t)), t;
+    return customElements.get(e) || (customElements.define(e, t), _t.set(e, t)), t;
   };
 }
-class kt {
+class Ft {
   constructor() {
-    this.locale = at, this.fallbackLocale = nt, this.translations = {}, this.STORAGE_KEY = "zs3-locale", this.frameworkDefaultsLoaded = !1, this.init = (t) => {
+    this.locale = pt, this.fallbackLocale = mt, 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);
       const s = this.getSaved();
       s && this.translations[s] && (this.locale = s), document.documentElement.lang = this.locale, window.dispatchEvent(
@@ -1390,12 +1390,12 @@ class kt {
     }, this.t = (t, s) => {
       let i = this.translations[this.locale]?.[t] ?? this.translations[this.fallbackLocale]?.[t] ?? t;
       if (s)
-        for (const [r, o] of Object.entries(s))
-          i = i.replace(new RegExp(`{${r}}`, "g"), String(o));
+        for (const [o, r] of Object.entries(s))
+          i = i.replace(new RegExp(`{${o}}`, "g"), String(r));
       return i;
     }, this.getLocale = () => this.locale, this.setLocale = (t, s) => {
       const i = this.locale;
-      this.locale = t, document.documentElement.lang = t, X.set(this.STORAGE_KEY, t), window.dispatchEvent(
+      this.locale = t, document.documentElement.lang = t, tt.set(this.STORAGE_KEY, t), window.dispatchEvent(
         new CustomEvent("zs3-locale-change", {
           bubbles: !0,
           detail: {
@@ -1404,26 +1404,26 @@ class kt {
           }
         })
       ), this.updateElements(), s && s(t);
-    }, this.getSaved = () => X.get(this.STORAGE_KEY), this.getBrowserLocale = () => navigator.language.split("-")[0], this.setBrowserLocale = () => {
+    }, this.getSaved = () => tt.get(this.STORAGE_KEY), this.getBrowserLocale = () => navigator.language.split("-")[0], this.setBrowserLocale = () => {
       const t = this.getBrowserLocale();
       this.translations[t] && this.setLocale(t);
     }, this.updateRoot = (t) => {
       this.updateElementsInRoot(t);
     }, this.updateElements = () => {
-      this.updateElementsInRoot(document), St().forEach((t, s) => {
+      this.updateElementsInRoot(document), Vt().forEach((t, s) => {
         document.querySelectorAll(s).forEach((i) => {
-          const r = i.shadowRoot;
-          r && this.updateElementsInRoot(r);
+          const o = i.shadowRoot;
+          o && this.updateElementsInRoot(o);
         });
       });
-    }, this.has = (t) => !!(this.translations[this.locale]?.[t] || this.translations[this.fallbackLocale]?.[t]), this.getAvailableLocales = () => Object.keys(this.translations), this.getTranslations = (t) => this.translations[t ?? this.locale] ?? {}, this.getDefaultLocale = () => at, this.getDefaultFallbackLocale = () => nt, this.getFrameworkTranslationKeys = () => {
+    }, this.has = (t) => !!(this.translations[this.locale]?.[t] || this.translations[this.fallbackLocale]?.[t]), this.getAvailableLocales = () => Object.keys(this.translations), this.getTranslations = (t) => this.translations[t ?? this.locale] ?? {}, this.getDefaultLocale = () => pt, this.getDefaultFallbackLocale = () => mt, this.getFrameworkTranslationKeys = () => {
       const t = /* @__PURE__ */ new Set();
-      for (const s of Object.values(ot))
+      for (const s of Object.values(ut))
         for (const i of Object.keys(s))
           t.add(i);
       return Array.from(t);
-    }, this.getFrameworkDefaults = (t) => ot[t ?? this.locale] ?? {}, this.reset = () => {
-      this.locale = at, this.fallbackLocale = nt, this.translations = {}, this.frameworkDefaultsLoaded = !1, this.loadFrameworkDefaults();
+    }, this.getFrameworkDefaults = (t) => ut[t ?? this.locale] ?? {}, this.reset = () => {
+      this.locale = pt, this.fallbackLocale = mt, this.translations = {}, this.frameworkDefaultsLoaded = !1, this.loadFrameworkDefaults();
     }, this.loadFrameworkDefaults();
   }
   /**
@@ -1432,10 +1432,10 @@ class kt {
    */
   loadFrameworkDefaults() {
     if (!this.frameworkDefaultsLoaded) {
-      for (const [t, s] of Object.entries(ot)) {
+      for (const [t, s] of Object.entries(ut)) {
         this.translations[t] || (this.translations[t] = {});
-        for (const [i, r] of Object.entries(s))
-          i in this.translations[t] || (this.translations[t][i] = r);
+        for (const [i, o] of Object.entries(s))
+          i in this.translations[t] || (this.translations[t][i] = o);
       }
       this.frameworkDefaultsLoaded = !0;
     }
@@ -1452,12 +1452,12 @@ class kt {
       const i = s.getAttribute("data-i18n-attr");
       if (i)
         try {
-          const r = JSON.parse(i);
-          for (const [o, a] of Object.entries(r))
-            s.setAttribute(o, this.t(a));
+          const o = JSON.parse(i);
+          for (const [r, a] of Object.entries(o))
+            s.setAttribute(r, this.t(a));
           this.forceUpdateIfComponent(s);
-        } catch (r) {
-          console.error("Error parsing data-i18n-attr:", r);
+        } catch (o) {
+          console.error("Error parsing data-i18n-attr:", o);
         }
     });
   }
@@ -1469,11 +1469,11 @@ class kt {
     "forceUpdate" in t && typeof t.forceUpdate == "function" && t.forceUpdate();
   }
 }
-const y = new kt();
-typeof window < "u" && (window.i18n = y);
-class U 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";
+const w = new Ft();
+typeof window < "u" && (window.i18n = w);
+class J extends Error {
+  constructor(t, s, i, o, r) {
+    super(t), this.status = s, this.statusText = i, this.body = o, this.config = r, this.name = "HttpError";
   }
   get isClientError() {
     return this.status >= 400 && this.status < 500;
@@ -1494,7 +1494,7 @@ class U extends Error {
     return this.status === 408 || this.message.includes("timeout");
   }
 }
-class Oe {
+class qe {
   constructor(t = {}) {
     this.requestInterceptors = [], this.responseInterceptors = [], this.errorInterceptors = [], this.baseUrl = (t.baseUrl ?? "").replace(/\/+$/, ""), this.defaultTimeout = t.timeout ?? 1e4, this.defaultRetries = t.retries ?? 0, this.defaultRetryDelay = t.retryDelay ?? 1e3, this.defaultHeaders = {
       "Content-Type": "application/json",
@@ -1537,10 +1537,10 @@ class Oe {
   // --- Core request pipeline ---
   async request(t) {
     let s = this.mergeConfig(t);
-    for (const o of this.requestInterceptors)
-      s = await o(s);
-    const i = s.retries ?? this.defaultRetries, r = s.retryDelay ?? this.defaultRetryDelay;
-    return this.executeWithRetry(s, i, r);
+    for (const r of this.requestInterceptors)
+      s = await r(s);
+    const i = s.retries ?? this.defaultRetries, o = s.retryDelay ?? this.defaultRetryDelay;
+    return this.executeWithRetry(s, i, o);
   }
   // --- Internal ---
   mergeConfig(t) {
@@ -1556,49 +1556,49 @@ class Oe {
   resolveUrl(t, s) {
     const i = t.startsWith("http") ? t : `${this.baseUrl}${t.startsWith("/") ? "" : "/"}${t}`;
     if (!s || Object.keys(s).length === 0) return i;
-    const r = new URLSearchParams(s), o = i.includes("?") ? "&" : "?";
-    return `${i}${o}${r.toString()}`;
+    const o = new URLSearchParams(s), r = i.includes("?") ? "&" : "?";
+    return `${i}${r}${o.toString()}`;
   }
   async executeWithRetry(t, s, i) {
     try {
       return await this.executeFetch(t);
-    } catch (r) {
-      if (r instanceof U)
+    } catch (o) {
+      if (o instanceof J)
         for (const a of this.errorInterceptors)
           try {
-            return await a(r);
+            return await a(o);
           } catch {
           }
-      if (s > 0 && this.isRetryable(r))
+      if (s > 0 && this.isRetryable(o))
         return await this.delay(i), this.executeWithRetry(t, s - 1, i * 2);
-      throw r;
+      throw o;
     }
   }
   async executeFetch(t) {
-    const s = new AbortController(), i = setTimeout(() => s.abort(), t.timeout ?? this.defaultTimeout), r = {
+    const s = new AbortController(), i = setTimeout(() => s.abort(), t.timeout ?? this.defaultTimeout), o = {
       method: t.method,
       headers: t.headers,
       signal: t.signal ?? s.signal
     };
-    t.body && t.method !== "GET" && (r.body = typeof t.body == "string" ? t.body : JSON.stringify(t.body));
+    t.body && t.method !== "GET" && (o.body = typeof t.body == "string" ? t.body : JSON.stringify(t.body));
     try {
-      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);
+      const r = await fetch(t.url, o);
+      if (!r.ok) {
+        const l = await this.parseBody(r);
+        throw new J(`HTTP ${r.status}: ${r.statusText}`, r.status, r.statusText, l, t);
       }
       let c = {
-        data: await this.parseBody(o),
-        status: o.status,
-        statusText: o.statusText,
-        headers: o.headers,
+        data: await this.parseBody(r),
+        status: r.status,
+        statusText: r.statusText,
+        headers: r.headers,
         config: t
       };
       for (const l of this.responseInterceptors)
         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);
+    } catch (r) {
+      throw r instanceof J ? r : r instanceof DOMException && r.name === "AbortError" ? new J(`Request timeout after ${t.timeout}ms`, 408, "Request Timeout", null, t) : new J(`Network error: ${r.message}`, 0, "Network Error", null, t);
     } finally {
       clearTimeout(i);
     }
@@ -1618,13 +1618,13 @@ class Oe {
     }
   }
   isRetryable(t) {
-    return t instanceof U ? t.isServerError || t.isTimeout || t.status === 429 : !0;
+    return t instanceof J ? t.isServerError || t.isTimeout || t.status === 429 : !0;
   }
   delay(t) {
     return new Promise((s) => setTimeout(s, t));
   }
 }
-const Pt = (e, t = {}) => {
+const It = (e, t = {}) => {
   const s = e, i = e.getAttribute("float");
   if (!i)
     return e.classList.remove("float-top", "float-bottom", "float-left", "float-right"), e.style.position = "", e.style.top = "", e.style.bottom = "", e.style.left = "", e.style.right = "", e.style.transform = "", s._floatApplied = void 0, e;
@@ -1632,60 +1632,60 @@ const Pt = (e, t = {}) => {
     return e;
   s._floatApplied = i, t.horizontalPosition = t.horizontalPosition || e.getAttribute("left") || void 0, t.verticalPosition = t.verticalPosition || e.getAttribute("top") || void 0;
   const {
-    visibleRatio: r = 0.15,
-    offset: o = 0,
+    visibleRatio: o = 0.15,
+    offset: r = 0,
     transitionDuration: a = 0.4,
     horizontalPosition: c,
     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";
+  } = t, f = e.parentElement, b = f === document.body || f === document.documentElement;
+  return b || jt(e), e.classList.add(`float-${i}`), e.style.position = b ? "fixed" : "absolute", e.style.zIndex = "1000", e.style.transition = "none", requestAnimationFrame(() => {
+    const v = e.getBoundingClientRect(), m = 1 - o, M = 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%)";
+        e.style.top = `${-v.height * m + r}px`, e.style.bottom = "", e.style.left = c || "50%", e.style.right = "", e.style.transform = c ? "" : "translateX(-50%)";
         break;
       case "bottom":
-        e.style.top = "", e.style.bottom = `${-g.height * p + o}px`, e.style.left = c || "50%", e.style.right = "", e.style.transform = c ? "" : "translateX(-50%)";
+        e.style.top = "", e.style.bottom = `${-v.height * m + r}px`, e.style.left = c || "50%", e.style.right = "", e.style.transform = c ? "" : "translateX(-50%)";
         break;
       case "left":
-        e.style.left = `${-g.width * p + o}px`, e.style.right = "", e.style.top = l || "50%", e.style.bottom = "", e.style.transform = l ? "" : "translateY(-50%)";
+        e.style.left = `${-v.width * m + r}px`, e.style.right = "", e.style.top = l || "50%", e.style.bottom = "", e.style.transform = l ? "" : "translateY(-50%)";
         break;
       case "right":
-        e.style.left = "", e.style.right = `${-g.width * p + o}px`, e.style.top = l || "50%", e.style.bottom = "", e.style.transform = l ? "" : "translateY(-50%)";
+        e.style.left = "", e.style.right = `${-v.width * m + r}px`, e.style.top = l || "50%", e.style.bottom = "", e.style.transform = l ? "" : "translateY(-50%)";
         break;
     }
     requestAnimationFrame(() => {
-      e.style.transition = `${$} ${a}s ease`;
-    }), Ht(
+      e.style.transition = `${M} ${a}s ease`;
+    }), Nt(
       e,
       i,
-      g,
-      p,
-      o,
+      v,
+      m,
+      r,
       a
     );
   }), e;
-}, Dt = (e) => {
+}, jt = (e) => {
   const t = e.parentElement;
   if (!t) return;
   const s = window.getComputedStyle(t);
   s.position === "static" && (t.style.position = "relative"), s.overflow === "visible" && (t.style.overflow = "hidden");
-}, st = (e, t, s) => {
-  const i = { position: s, element: e }, r = new CustomEvent(t, {
+}, nt = (e, t, s) => {
+  const i = { position: s, element: e }, o = new CustomEvent(t, {
     detail: i,
     bubbles: !0,
     composed: !0
-  }), o = e.getAttribute(t);
-  if (o !== null)
+  }), r = e.getAttribute(t);
+  if (r !== null)
     try {
-      new Function("event", o)(r);
+      new Function("event", r)(o);
     } catch (a) {
       console.error(`Error executing ${t} attribute:`, a);
     }
-  e.dispatchEvent(r);
-}, Ht = (e, t, s, i, r, o) => {
-  const a = Rt(t, s, i, r), c = r, l = e, m = () => {
-    switch (st(e, "zs3-float-show-start", t), l._floatIsShown = !0, t) {
+  e.dispatchEvent(o);
+}, Nt = (e, t, s, i, o, r) => {
+  const a = Ut(t, s, i, o), c = o, l = e, f = () => {
+    switch (nt(e, "zs3-float-show-start", t), l._floatIsShown = !0, t) {
       case "top":
         e.style.top = `${c}px`;
         break;
@@ -1700,10 +1700,10 @@ const Pt = (e, t = {}) => {
         break;
     }
     setTimeout(() => {
-      l._floatIsShown && st(e, "zs3-float-show-end", t);
-    }, o * 1e3);
+      l._floatIsShown && nt(e, "zs3-float-show-end", t);
+    }, r * 1e3);
   }, b = () => {
-    switch (st(e, "zs3-float-hide-start", t), l._floatIsShown = !1, t) {
+    switch (nt(e, "zs3-float-hide-start", t), l._floatIsShown = !1, t) {
       case "top":
         e.style.top = `${a}px`;
         break;
@@ -1718,11 +1718,18 @@ const Pt = (e, t = {}) => {
         break;
     }
     setTimeout(() => {
-      l._floatIsShown || st(e, "zs3-float-hide-end", t);
-    }, o * 1e3);
-  }, g = l._floatShowHandler, p = l._floatHideHandler;
-  g && e.removeEventListener("mouseenter", g), p && e.removeEventListener("mouseleave", p), l._floatShowHandler = m, l._floatHideHandler = b, e.addEventListener("mouseenter", m), e.addEventListener("mouseleave", b);
-}, Rt = (e, t, s, i) => {
+      l._floatIsShown || nt(e, "zs3-float-hide-end", t);
+    }, r * 1e3);
+  }, v = l._floatShowHandler, m = l._floatHideHandler, M = l._floatTouchHandler, B = l._floatDocTouchHandler;
+  v && e.removeEventListener("mouseenter", v), m && e.removeEventListener("mouseleave", m), M && e.removeEventListener("touchstart", M), B && document.removeEventListener("touchstart", B), l._floatShowHandler = f, l._floatHideHandler = b, e.addEventListener("mouseenter", f), e.addEventListener("mouseleave", b);
+  const $ = (F) => {
+    const it = F.target;
+    !e.contains(it) && l._floatIsShown && (b(), document.removeEventListener("touchstart", $), l._floatDocTouchHandler = void 0);
+  }, V = (F) => {
+    F.stopPropagation(), l._floatIsShown ? (b(), document.removeEventListener("touchstart", $), l._floatDocTouchHandler = void 0) : (f(), document.addEventListener("touchstart", $), l._floatDocTouchHandler = $);
+  };
+  l._floatTouchHandler = V, e.addEventListener("touchstart", V);
+}, Ut = (e, t, s, i) => {
   switch (e) {
     case "top":
     case "bottom":
@@ -1731,88 +1738,100 @@ const Pt = (e, t = {}) => {
     case "right":
       return -t.width * s + i;
   }
-}, J = (e, t, s) => {
+}, Q = (e, t, s) => {
   const i = new CustomEvent(t, {
     detail: s,
     bubbles: !0,
     composed: !0
-  }), r = e.getAttribute(t);
-  if (r !== null)
+  }), o = e.getAttribute(t);
+  if (o !== null)
     try {
-      new Function("event", r)(i);
-    } catch (o) {
-      console.error(`Error executing ${t} attribute:`, o);
+      new Function("event", o)(i);
+    } catch (r) {
+      console.error(`Error executing ${t} attribute:`, r);
     }
   e.dispatchEvent(i);
-}, Ot = (e) => {
+}, qt = (e) => {
   const { container: t, dragHandle: s = t, direction: i = "xy" } = e;
   if (!t)
     return console.warn("move: container is required"), null;
-  const r = t.parentElement;
-  if (!r)
+  const o = t.parentElement;
+  if (!o)
     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;
-    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", {
+  window.getComputedStyle(o).position === "static" && (o.style.position = "relative"), t.style.position = "absolute", s.style.touchAction = "none";
+  let a = !1, c = 0, l = 0, f = 0, b = 0, v = 0, m = 0, M = /* @__PURE__ */ new Set();
+  const B = (h, ht) => {
+    a = !0, c = h, l = ht;
+    const at = window.getComputedStyle(t);
+    f = parseFloat(at.left) || 0, b = parseFloat(at.top) || 0, v = f, m = b, M.clear(), t.classList.add("zs3-dragging"), s.style.cursor = "grabbing", Q(t, "zs3-move-start", {
       direction: i,
       element: t,
-      startX: m,
+      startX: f,
       startY: b
-    }), document.addEventListener("mousemove", D), document.addEventListener("mouseup", q), document.addEventListener("keydown", j);
-  }, D = (S) => {
-    if (!a) return;
-    const et = S.clientX - c, wt = S.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", {
+    });
+  }, $ = (h, ht) => {
+    const at = h - c, Ct = ht - l, zt = o.getBoundingClientRect(), yt = t.getBoundingClientRect();
+    let I = f + at, j = b + Ct;
+    const wt = zt.width - yt.width, xt = zt.height - yt.height, W = /* @__PURE__ */ new Set();
+    I <= 0 && (I = 0, W.add("left")), I >= wt && (I = wt, W.add("right")), j <= 0 && (j = 0, W.add("top")), j >= xt && (j = xt, W.add("bottom")), W.forEach((Et) => {
+      M.has(Et) || Q(t, "zs3-move-boundary", {
         direction: i,
         element: t,
-        x: B,
-        y: F,
-        boundary: ft
+        x: I,
+        y: j,
+        boundary: Et
       });
-    }), $ = 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", {
+    }), M = W, (i === "x" || i === "xy") && (t.style.left = `${I}px`, v = I), (i === "y" || i === "xy") && (t.style.top = `${j}px`, m = j), Q(t, "zs3-move", {
       direction: i,
       element: t,
-      x: g,
-      y: p,
-      deltaX: g - m,
-      deltaY: p - b
+      x: v,
+      y: m,
+      deltaX: v - f,
+      deltaY: m - b
     });
-  }, q = () => {
-    a && (a = !1, t.classList.remove("zs3-dragging"), s.style.cursor = "grab", J(t, "zs3-move-end", {
+  }, V = () => {
+    a = !1, t.classList.remove("zs3-dragging"), s.style.cursor = "grab", Q(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", {
+      endX: v,
+      endY: m
+    });
+  }, F = () => {
+    a = !1, t.classList.remove("zs3-dragging"), s.style.cursor = "grab", (i === "x" || i === "xy") && (t.style.left = `${f}px`), (i === "y" || i === "xy") && (t.style.top = `${b}px`), Q(t, "zs3-move-cancel", {
       direction: i,
       element: t
-    }), document.removeEventListener("mousemove", D), document.removeEventListener("mouseup", q), document.removeEventListener("keydown", j));
-  }, 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;
-}, Bt = (e) => {
+    });
+  }, it = (h) => {
+    h.button === 0 && (B(h.clientX, h.clientY), h.preventDefault(), document.addEventListener("mousemove", ot), document.addEventListener("mouseup", rt), document.addEventListener("keydown", Y));
+  }, ot = (h) => {
+    a && $(h.clientX, h.clientY);
+  }, rt = () => {
+    a && (V(), document.removeEventListener("mousemove", ot), document.removeEventListener("mouseup", rt), document.removeEventListener("keydown", Y));
+  }, vt = (h) => {
+    h.touches.length === 1 && (B(h.touches[0].clientX, h.touches[0].clientY), h.preventDefault(), document.addEventListener("touchmove", dt, { passive: !1 }), document.addEventListener("touchend", K), document.addEventListener("touchcancel", K), document.addEventListener("keydown", Y));
+  }, dt = (h) => {
+    !a || h.touches.length === 0 || (h.preventDefault(), $(h.touches[0].clientX, h.touches[0].clientY));
+  }, K = () => {
+    a && (V(), document.removeEventListener("touchmove", dt), document.removeEventListener("touchend", K), document.removeEventListener("touchcancel", K), document.removeEventListener("keydown", Y));
+  }, Y = (h) => {
+    h.key === "Escape" && a && (F(), document.removeEventListener("mousemove", ot), document.removeEventListener("mouseup", rt), document.removeEventListener("touchmove", dt), document.removeEventListener("touchend", K), document.removeEventListener("touchcancel", K), document.removeEventListener("keydown", Y));
+  }, L = s;
+  return L._moveMouseDownHandler && s.removeEventListener("mousedown", L._moveMouseDownHandler), L._moveTouchStartHandler && s.removeEventListener("touchstart", L._moveTouchStartHandler), L._moveMouseDownHandler = it, L._moveTouchStartHandler = vt, L._moveMouseMoveHandler = ot, L._moveMouseUpHandler = rt, L._moveKeyDownHandler = Y, L._moveEnabled = !0, L._moveDirection = i, L._moveComponent = t, s.addEventListener("mousedown", it), s.addEventListener("touchstart", vt, { passive: !1 }), s.style.cursor = "grab", t;
+}, Kt = (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 = "";
-}, Be = (e) => e._moveEnabled === !0, Fe = (e) => e._moveDirection, Ve = (e) => {
+  t._moveMouseDownHandler && (e.removeEventListener("mousedown", t._moveMouseDownHandler), t._moveMouseDownHandler = void 0), t._moveTouchStartHandler && (e.removeEventListener("touchstart", t._moveTouchStartHandler), t._moveTouchStartHandler = 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 = "", e.style.touchAction = "";
+}, Ke = (e) => e._moveEnabled === !0, Ye = (e) => e._moveDirection, We = (e) => {
   const { name: t, htmlElement: s } = e;
   let { detail: i } = e;
   i = i ?? {}, i.htmlElement = s ?? void 0;
-  const r = new CustomEvent(t, {
+  const o = new CustomEvent(t, {
     detail: i,
     bubbles: !0,
     composed: !0
-  }), o = s?.getAttribute(t);
-  o !== null && new Function("event", o)(r), s?.dispatchEvent(r);
+  }), r = s?.getAttribute(t);
+  r !== null && new Function("event", r)(o), s?.dispatchEvent(o);
 };
-class k extends HTMLElement {
+class P extends HTMLElement {
   /**
    * Initializes the base component
    * @param options - Configuration options for the component
@@ -1831,7 +1850,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) => N(s, this.shadowRoot ?? this._container ?? void 0), this.$$ = (s) => N(s, this.shadowRoot ?? this._container ?? void 0).$$;
   }
   /**
    * Initialize component (called in constructor)
@@ -1845,22 +1864,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
@@ -1876,9 +1879,9 @@ class k extends HTMLElement {
    * @param handler - Event handler
    * @param options - Event listener options
    */
-  addManagedEventListener(t, s, i, r) {
-    t.addEventListener(s, i, r), this._cleanupFunctions.push(() => {
-      t.removeEventListener(s, i, r);
+  addManagedEventListener(t, s, i, o) {
+    t.addEventListener(s, i, o), this._cleanupFunctions.push(() => {
+      t.removeEventListener(s, i, o);
     });
   }
   /**
@@ -1889,19 +1892,19 @@ class k extends HTMLElement {
    */
   emit(t, s, i) {
     const {
-      skipDisabledCheck: r = !1,
-      cancelable: o = !0,
+      skipDisabledCheck: o = !1,
+      cancelable: r = !0,
       bubbles: a = !0,
       composed: c = !0
     } = i ?? {};
-    if (!r && (this.getBooleanAttribute("disabled") || this.getBooleanAttribute("loading")))
+    if (!o && (this.getBooleanAttribute("disabled") || this.getBooleanAttribute("loading")))
       return !1;
     const l = new CustomEvent(t, {
       bubbles: a,
       composed: c,
-      cancelable: o,
+      cancelable: r,
       detail: s
-    }), m = this.dispatchEvent(l), b = this.getAttribute(t);
+    }), f = this.dispatchEvent(l), b = this.getAttribute(t);
     return b && new Function(
       "event",
       "detail",
@@ -1909,7 +1912,7 @@ class k extends HTMLElement {
       "log",
       "window",
       b
-    ).call(this, l, s, Y, lt, window), m;
+    ).call(this, l, s, N, ft, window), f;
   }
   /**
    * Emit lifecycle event (internal use)
@@ -1942,8 +1945,8 @@ class k extends HTMLElement {
   getNumberAttribute(t, s = 0) {
     const i = this.getAttribute(t);
     if (!i) return s;
-    const r = parseFloat(i);
-    return isNaN(r) ? s : r;
+    const o = parseFloat(i);
+    return isNaN(o) ? s : o;
   }
   /**
    * Get attribute as array (comma-separated)
@@ -1952,7 +1955,7 @@ class k extends HTMLElement {
    */
   getArrayAttribute(t, s = []) {
     const i = this.getAttribute(t);
-    return i ? i.split(",").map((r) => r.trim()).filter(Boolean) : s;
+    return i ? i.split(",").map((o) => o.trim()).filter(Boolean) : s;
   }
   /**
    * Set boolean attribute
@@ -1969,7 +1972,7 @@ class k extends HTMLElement {
    */
   applyFloatEffect() {
     if (!this._mounted || !this._floatTargetSelector) return;
-    this.getAttribute("float") && Pt(this);
+    this.getAttribute("float") && It(this);
   }
   /**
    * Aplica l'efecte move (drag & drop) al component si està configurat.
@@ -1982,10 +1985,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) ? qt({ container: s, dragHandle: i, direction: t }) : Kt(i));
   }
   /**
    * Request an animation frame update
@@ -2005,8 +2008,8 @@ class k extends HTMLElement {
    */
   debounce(t, s) {
     let i;
-    return (...r) => {
-      clearTimeout(i), i = window.setTimeout(() => t(...r), s);
+    return (...o) => {
+      clearTimeout(i), i = window.setTimeout(() => t(...o), s);
     };
   }
   /**
@@ -2054,8 +2057,8 @@ class k extends HTMLElement {
       newValue: i,
       phase: "start"
     });
-    const r = this._attributeHandlers.get(t);
-    r && r(t, s, i), this.onAttributeChanged(t, s, i), this._mounted && (this.render(), this.applyFloatEffect(), this.applyMoveEffect()), this.emitLifecycleEvent("zs3-modified", {
+    const o = this._attributeHandlers.get(t);
+    o && o(t, s, i), this.onAttributeChanged(t, s, i), this._mounted && (this.render(), this.applyFloatEffect(), this.applyMoveEffect()), this.emitLifecycleEvent("zs3-modified", {
       name: t,
       oldValue: s,
       newValue: i,
@@ -2092,7 +2095,7 @@ class k extends HTMLElement {
    */
   handleThemeChange(t) {
     const s = t;
-    this.onThemeChange(s.detail.theme), this._mounted && (this.render(), this.applyFloatEffect(), this.applyMoveEffect());
+    this.onThemeChange(s.detail.theme);
   }
   /**
    * Hook called when theme changes
@@ -2123,7 +2126,7 @@ class k extends HTMLElement {
    * @returns Translated string or key if not found
    */
   t(t, s) {
-    return y.t(t, s);
+    return w.t(t, s);
   }
   /**
    * Check if a translation exists
@@ -2131,7 +2134,7 @@ class k extends HTMLElement {
    * @returns True if translation exists
    */
   hasTranslation(t) {
-    return y.has(t);
+    return w.has(t);
   }
   /**
    * Get translated attribute value
@@ -2194,14 +2197,14 @@ class k extends HTMLElement {
     this.render(), this.applyFloatEffect(), this.applyMoveEffect();
   }
 }
-function E(e, t = {}) {
+function T(e, t = {}) {
   const { inherit: s = !1 } = t;
   return function(i) {
     return Object.defineProperty(i, "observedAttributes", {
       get() {
         if (s) {
-          const o = Object.getPrototypeOf(this)?.observedAttributes || [];
-          return [.../* @__PURE__ */ new Set([...o, ...e])];
+          const r = Object.getPrototypeOf(this)?.observedAttributes || [];
+          return [.../* @__PURE__ */ new Set([...r, ...e])];
         }
         return e;
       },
@@ -2209,7 +2212,7 @@ function E(e, t = {}) {
     }), i;
   };
 }
-function vt(e) {
+function Mt(e) {
   return function(t) {
     const s = t.prototype.initialize;
     return t.prototype.initialize = function() {
@@ -2217,7 +2220,7 @@ function vt(e) {
     }, t;
   };
 }
-function Ft(e, t) {
+function Yt(e, t) {
   return function(s) {
     const i = s.prototype.initialize;
     return s.prototype.initialize = function() {
@@ -2227,21 +2230,21 @@ function Ft(e, t) {
 }
 function n(e, t) {
   return function(s, i) {
-    const r = typeof i == "string" ? i : i.toString(), o = Vt(e, t);
-    Object.defineProperty(s, r, o);
+    const o = typeof i == "string" ? i : i.toString(), r = Wt(e, t);
+    Object.defineProperty(s, o, r);
   };
 }
-function Vt(e, t) {
+function Wt(e, t) {
   switch (t.type) {
     case "string":
-      return It(e, t.default);
+      return Jt(e, t.default);
     case "boolean":
-      return qt(e, t.default ?? !1);
+      return Xt(e, t.default ?? !1);
     case "number":
-      return jt(e, t.default ?? 0);
+      return Gt(e, t.default ?? 0);
   }
 }
-function It(e, t) {
+function Jt(e, t) {
   return t !== void 0 ? {
     get() {
       return this.getAttribute(e) || t;
@@ -2262,7 +2265,7 @@ function It(e, t) {
     configurable: !0
   };
 }
-function qt(e, t) {
+function Xt(e, t) {
   return {
     get() {
       return this.getBooleanAttribute(e, t);
@@ -2274,7 +2277,7 @@ function qt(e, t) {
     configurable: !0
   };
 }
-function jt(e, t) {
+function Gt(e, t) {
   return {
     get() {
       return this.getNumberAttribute(e, t);
@@ -2286,12 +2289,12 @@ 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--)
-    (a = e[o]) && (r = (i ? a(t, s, r) : a(r)) || r);
-  return i && r && Nt(t, s, r), r;
+var Qt = Object.defineProperty, Zt = Object.getOwnPropertyDescriptor, U = (e, t, s, i) => {
+  for (var o = i > 1 ? void 0 : i ? Zt(t, s) : t, r = e.length - 1, a; r >= 0; r--)
+    (a = e[r]) && (o = (i ? a(t, s, o) : a(o)) || o);
+  return i && o && Qt(t, s, o), o;
 };
-const Kt = [
+const te = [
   "name",
   "size",
   "color",
@@ -2301,7 +2304,7 @@ const Kt = [
   "clickable",
   "i18n-aria-label"
 ];
-let z = class extends k {
+let y = class extends P {
   /**
    * Initializes the icon component
    */
@@ -2331,13 +2334,13 @@ let z = class extends k {
    * Setup event listeners after mount
    */
   afterMount() {
-    this.setupEventListeners(), this._shadowRoot && y.updateRoot(this._shadowRoot);
+    this.setupEventListeners(), this._shadowRoot && w.updateRoot(this._shadowRoot);
   }
   /**
    * 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,
@@ -2368,7 +2371,7 @@ let z = class extends k {
    */
   getIconPath() {
     const e = this.name?.toLowerCase() || "warning";
-    return z._iconPaths[e] || z._iconPaths.warning;
+    return y._iconPaths[e] || y._iconPaths.warning;
   }
   /**
    * Get transformation string for SVG
@@ -2382,10 +2385,10 @@ let z = class extends k {
    */
   render() {
     if (!this.root) return;
-    const e = this.getIconPath(), t = this.getTransform(), s = this.name === "dark" || this.name === "sun" ? "currentColor" : "none", i = this.getAttribute("i18n-aria-label"), r = i ? `data-i18n-attr='{"aria-label":"${i}"}'` : `aria-label="${this.getAttribute("aria-label") || this.name || "icon"}"`;
+    const e = this.getIconPath(), t = this.getTransform(), s = this.name === "dark" || this.name === "sun" ? "currentColor" : "none", i = this.getAttribute("i18n-aria-label"), o = i ? `data-i18n-attr='{"aria-label":"${i}"}'` : `aria-label="${this.getAttribute("aria-label") || this.name || "icon"}"`;
     this.setHTML(`
       ${this.getStyles()}
-      <span class="icon-container" role="img" ${r}>
+      <span class="icon-container" role="img" ${o}>
         <svg
           xmlns="http://www.w3.org/2000/svg"
           width="${this._size}"
@@ -2484,7 +2487,7 @@ let z = class extends k {
    * @param path - SVG path data
    */
   static addIcon(e, t) {
-    z._iconPaths[e] = t;
+    y._iconPaths[e] = t;
   }
   /**
    * Public API: Add multiple custom icons
@@ -2492,14 +2495,14 @@ let z = class extends k {
    */
   static addIcons(e) {
     Object.entries(e).forEach(([t, s]) => {
-      z.addIcon(t, s);
+      y.addIcon(t, s);
     });
   }
   /**
    * Public API: Get list of available icons
    */
   static getAvailableIcons() {
-    return Object.keys(z._iconPaths);
+    return Object.keys(y._iconPaths);
   }
   // size es manté manual: parseja 'small'|'medium'|'large'|number
   get size() {
@@ -2519,7 +2522,7 @@ let z = class extends k {
     this.setAttribute("stroke-width", String(e));
   }
 };
-z._iconPaths = {
+y._iconPaths = {
   increase: "<path stroke='none' d='M0 0h24v24H0z' fill='none'/><path d='M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0' /><path d='M9 12h6' /><path d='M12 9v6' />",
   decrease: "<path stroke='none' d='M0 0h24v24H0z' fill='none'/><path d='M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0' /><path d='M9 12l6 0' />",
   error: "<path stroke='none' d='M0 0h24v24H0z' fill='none'/><path d='M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0' /><path d='M12 8v4' /><path d='M12 16h.01' />",
@@ -2568,36 +2571,36 @@ 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([
+U([
   n("name", { type: "string" })
-], z.prototype, "name", 2);
-V([
+], y.prototype, "name", 2);
+U([
   n("color", { type: "string" })
-], z.prototype, "color", 2);
-V([
+], y.prototype, "color", 2);
+U([
   n("rotate", { type: "number", default: 0 })
-], z.prototype, "rotate", 2);
-V([
+], y.prototype, "rotate", 2);
+U([
   n("flip", { type: "string" })
-], z.prototype, "flip", 2);
-V([
+], y.prototype, "flip", 2);
+U([
   n("clickable", { type: "boolean" })
-], z.prototype, "clickable", 2);
-V([
+], y.prototype, "clickable", 2);
+U([
   n("i18n-aria-label", { type: "string" })
-], z.prototype, "i18nAriaLabel", 2);
-z = V([
-  x("zs3-icon"),
-  E(Kt)
-], z);
-customElements.get("zs3-icon") || customElements.define("zs3-icon", z);
-typeof window < "u" && (window.$Icon = z);
-var Yt = Object.defineProperty, Wt = Object.getOwnPropertyDescriptor, P = (e, t, s, i) => {
-  for (var r = i > 1 ? void 0 : i ? Wt(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 && Yt(t, s, r), r;
+], y.prototype, "i18nAriaLabel", 2);
+y = U([
+  E("zs3-icon"),
+  T(te)
+], y);
+customElements.get("zs3-icon") || customElements.define("zs3-icon", y);
+typeof window < "u" && (window.$Icon = y);
+var ee = Object.defineProperty, se = Object.getOwnPropertyDescriptor, D = (e, t, s, i) => {
+  for (var o = i > 1 ? void 0 : i ? se(t, s) : t, r = e.length - 1, a; r >= 0; r--)
+    (a = e[r]) && (o = (i ? a(t, s, o) : a(o)) || o);
+  return i && o && ee(t, s, o), o;
 };
-const Jt = [
+const ie = [
   "icon",
   "icon-size",
   "position",
@@ -2614,7 +2617,7 @@ const Jt = [
   "zs3-float-hide-start",
   "zs3-float-hide-end"
 ];
-let f = class extends k {
+let g = class extends P {
   /**
    * Initializes the button component
    */
@@ -2652,7 +2655,7 @@ let f = class extends k {
    * Called after component mounts
    */
   afterMount() {
-    this.setupEventListeners(), this._shadowRoot && y.updateRoot(this._shadowRoot);
+    this.setupEventListeners(), this._shadowRoot && w.updateRoot(this._shadowRoot);
   }
   /**
    * Called before component unmounts
@@ -2664,14 +2667,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,19 +2698,19 @@ 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");
-    const r = t ? `<span class="button-text">${t}</span>` : "";
-    let o = "";
-    this.loading ? o = this.getLoadingHTML() + r : i === "left" && s ? o = s + r : o = r + s, e.innerHTML = o, e.disabled = this.disabled || this.loading;
+    const o = t ? `<span class="button-text">${t}</span>` : "";
+    let r = "";
+    this.loading ? r = this.getLoadingHTML() + o : i === "left" && s ? r = s + o : r = o + s, e.innerHTML = r, e.disabled = this.disabled || this.loading;
   }
   /**
    * 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"));
   }
   /**
@@ -2772,11 +2775,13 @@ let f = class extends k {
           outline: none;
         }
 
-        button:hover:not(:disabled):not(.loading) {
-          background-color: var(--zs3-fg-color, #111827);
-          color: var(--zs3-bg-color, #ffffff);
-          border-color: var(--zs3-border-color, #d1d5db);
-          box-shadow: var(--zs3-shadow-sm, 0 1px 2px 0 rgba(0, 0, 0, 0.05));
+        @media (hover: hover) {
+          button:hover:not(:disabled):not(.loading) {
+            background-color: var(--zs3-fg-color, #111827);
+            color: var(--zs3-bg-color, #ffffff);
+            border-color: var(--zs3-border-color, #d1d5db);
+            box-shadow: var(--zs3-shadow-sm, 0 1px 2px 0 rgba(0, 0, 0, 0.05));
+          }
         }
 
         button:active:not(:disabled):not(.loading) {
@@ -2802,9 +2807,11 @@ let f = class extends k {
           border-color: var(--zs3-primary-color, #3b82f6);
         }
 
-        button.btn-primary:hover:not(:disabled):not(.loading) {
-          background-color: var(--zs3-primary-hover-color, #2563eb);
-          border-color: var(--zs3-primary-hover-color, #2563eb);
+        @media (hover: hover) {
+          button.btn-primary:hover:not(:disabled):not(.loading) {
+            background-color: var(--zs3-primary-hover-color, #2563eb);
+            border-color: var(--zs3-primary-hover-color, #2563eb);
+          }
         }
 
         button.btn-secondary {
@@ -2813,9 +2820,11 @@ let f = class extends k {
           border-color: var(--zs3-secondary-color, #8b5cf6);
         }
 
-        button.btn-secondary:hover:not(:disabled):not(.loading) {
-          background-color: var(--zs3-secondary-hover-color, #7c3aed);
-          border-color: var(--zs3-secondary-hover-color, #7c3aed);
+        @media (hover: hover) {
+          button.btn-secondary:hover:not(:disabled):not(.loading) {
+            background-color: var(--zs3-secondary-hover-color, #7c3aed);
+            border-color: var(--zs3-secondary-hover-color, #7c3aed);
+          }
         }
 
         button.btn-success {
@@ -2824,8 +2833,10 @@ let f = class extends k {
           border-color: var(--zs3-success-color, #10b981);
         }
 
-        button.btn-success:hover:not(:disabled):not(.loading) {
-          filter: brightness(0.9);
+        @media (hover: hover) {
+          button.btn-success:hover:not(:disabled):not(.loading) {
+            filter: brightness(0.9);
+          }
         }
 
         button.btn-danger {
@@ -2834,8 +2845,10 @@ let f = class extends k {
           border-color: var(--zs3-error-color, #ef4444);
         }
 
-        button.btn-danger:hover:not(:disabled):not(.loading) {
-          filter: brightness(0.9);
+        @media (hover: hover) {
+          button.btn-danger:hover:not(:disabled):not(.loading) {
+            filter: brightness(0.9);
+          }
         }
 
         button.btn-warning {
@@ -2844,8 +2857,10 @@ let f = class extends k {
           border-color: var(--zs3-warning-color, #f59e0b);
         }
 
-        button.btn-warning:hover:not(:disabled):not(.loading) {
-          filter: brightness(0.9);
+        @media (hover: hover) {
+          button.btn-warning:hover:not(:disabled):not(.loading) {
+            filter: brightness(0.9);
+          }
         }
 
         button.btn-info {
@@ -2854,8 +2869,10 @@ let f = class extends k {
           border-color: var(--zs3-info-color, #06b6d4);
         }
 
-        button.btn-info:hover:not(:disabled):not(.loading) {
-          filter: brightness(0.9);
+        @media (hover: hover) {
+          button.btn-info:hover:not(:disabled):not(.loading) {
+            filter: brightness(0.9);
+          }
         }
 
         /* Sizes */
@@ -2971,43 +2988,43 @@ let f = class extends k {
     this.setBooleanAttribute("disabled", e);
   }
 };
-P([
+D([
   n("icon", { type: "string" })
-], f.prototype, "icon", 2);
-P([
+], g.prototype, "icon", 2);
+D([
   n("icon-size", { type: "string" })
-], f.prototype, "iconSize", 2);
-P([
+], g.prototype, "iconSize", 2);
+D([
   n("position", { type: "string", default: "right" })
-], f.prototype, "position", 2);
-P([
+], g.prototype, "position", 2);
+D([
   n("rounded", { type: "boolean" })
-], f.prototype, "rounded", 2);
-P([
+], g.prototype, "rounded", 2);
+D([
   n("variant", { type: "string" })
-], f.prototype, "variant", 2);
-P([
+], g.prototype, "variant", 2);
+D([
   n("size", { type: "string" })
-], f.prototype, "size", 2);
-P([
+], g.prototype, "size", 2);
+D([
   n("disabled", { type: "boolean" })
-], f.prototype, "disabled", 2);
-P([
+], g.prototype, "disabled", 2);
+D([
   n("loading", { type: "boolean" })
-], f.prototype, "loading", 2);
-f = P([
-  x("zs3-button"),
-  E(Jt),
-  vt("button")
-], f);
-customElements.get("zs3-button") || customElements.define("zs3-button", f);
-typeof window < "u" && (window.$Button = f);
-var Gt = Object.defineProperty, Xt = Object.getOwnPropertyDescriptor, w = (e, t, s, i) => {
-  for (var r = i > 1 ? void 0 : i ? Xt(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 && Gt(t, s, r), r;
+], g.prototype, "loading", 2);
+g = D([
+  E("zs3-button"),
+  T(ie),
+  Mt("button")
+], g);
+customElements.get("zs3-button") || customElements.define("zs3-button", g);
+typeof window < "u" && (window.$Button = g);
+var oe = Object.defineProperty, re = Object.getOwnPropertyDescriptor, x = (e, t, s, i) => {
+  for (var o = i > 1 ? void 0 : i ? re(t, s) : t, r = e.length - 1, a; r >= 0; r--)
+    (a = e[r]) && (o = (i ? a(t, s, o) : a(o)) || o);
+  return i && o && oe(t, s, o), o;
 };
-const Qt = [
+const ae = [
   "title",
   "description",
   "fields",
@@ -3023,7 +3040,7 @@ const Qt = [
   "i18n-accept-text",
   "i18n-cancel-text"
 ];
-let u = class extends k {
+let p = class extends P {
   /**
    * Constructor
    */
@@ -3044,7 +3061,7 @@ let u = class extends k {
    * After mount setup
    */
   afterMount() {
-    super.afterMount(), this.setupFormElements(), this._shadowRoot && y.updateRoot(this._shadowRoot), this._parentElement && this.appendTo(this._parentElement);
+    super.afterMount(), this.setupFormElements(), this._shadowRoot && w.updateRoot(this._shadowRoot), this._parentElement && this.appendTo(this._parentElement);
   }
   /**
    * Handle attribute changes
@@ -3121,9 +3138,9 @@ let u = class extends k {
       if (i.max !== void 0 && e.type === "number" && Number(t) > i.max)
         return this.t("zs3.form.maxValue", { max: i.max });
       if (i.custom) {
-        const r = i.custom(t);
-        if (r !== !0)
-          return typeof r == "string" ? r : this.getTranslatedErrorMessage(e, "zs3.form.invalidValue");
+        const o = i.custom(t);
+        if (o !== !0)
+          return typeof o == "string" ? o : this.getTranslatedErrorMessage(e, "zs3.form.invalidValue");
       }
     }
     if (e.type === "email" && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(s))
@@ -3236,19 +3253,17 @@ 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;
-        if (e.type === "checkbox" ? r = i.checked : e.type === "number" ? r = i.value === "" ? "" : Number(i.value) : r = i.value, this._values[e.name] = r, this._touched.has(e.name)) {
-          const o = this.validateField(e);
-          o ? this._errors[e.name] = o : delete this._errors[e.name], this.updateFieldUI(e.name);
+        let o;
+        if (e.type === "checkbox" ? o = i.checked : e.type === "number" ? o = i.value === "" ? "" : Number(i.value) : o = i.value, this._values[e.name] = o, this._touched.has(e.name)) {
+          const r = this.validateField(e);
+          r ? this._errors[e.name] = r : delete this._errors[e.name], this.updateFieldUI(e.name);
         }
         this.updateButtonState(), this.emit("zs3-form-change", {
           name: e.name,
-          value: r,
+          value: o,
           isValid: this.isValid()
         });
       }), this.addManagedEventListener(t, "blur", () => {
@@ -3269,13 +3284,13 @@ 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();
+    const t = new g();
     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", () => {
       this.handleSubmit();
     }), e.appendChild(t), this._buttons.push(t), this.showCancel) {
-      const s = new f();
+      const s = new g();
       s.textContent = this.i18nCancelText ? this.t(this.i18nCancelText) : this.cancelText || this.t("zs3.form.cancel"), s.variant = this.cancelVariant || "secondary", s.setAttribute("data-action", "cancel"), this.addManagedEventListener(s, "zs3-click", () => {
         this.handleCancel();
       }), e.appendChild(s), this._buttons.push(s);
@@ -3285,10 +3300,10 @@ 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"));
+    const o = this._errors[e], r = this._touched.has(e);
+    o && r ? (t.classList.add("has-error"), i.classList.add("invalid"), s && (s.textContent = o, s.style.display = "block")) : (t.classList.remove("has-error"), i.classList.remove("invalid"), s && (s.textContent = "", s.style.display = "none"));
   }
   /**
    * Update accept button state
@@ -3328,41 +3343,41 @@ let u = class extends k {
    * Render a single field
    */
   renderField(e) {
-    const t = this.getTranslatedLabel(e), s = this.getTranslatedPlaceholder(e), i = this._values[e.name] ?? "", r = this._errors[e.name], o = this._touched.has(e.name), a = r && o, c = e.required ? '<span class="required-mark">*</span>' : "", l = e.disabled || this.formDisabled ? "disabled" : "", m = e.readonly ? "readonly" : "", b = e.i18nLabel ? `<span data-i18n="${e.i18nLabel}"></span>${c}` : `${t}${c}`, g = e.i18nPlaceholder ? `data-i18n-attr='{"placeholder":"${e.i18nPlaceholder}"}'` : `placeholder="${s}"`;
-    let p = "";
+    const t = this.getTranslatedLabel(e), s = this.getTranslatedPlaceholder(e), i = this._values[e.name] ?? "", o = this._errors[e.name], r = this._touched.has(e.name), a = o && r, c = e.required ? '<span class="required-mark">*</span>' : "", l = e.disabled || this.formDisabled ? "disabled" : "", f = e.readonly ? "readonly" : "", b = e.i18nLabel ? `<span data-i18n="${e.i18nLabel}"></span>${c}` : `${t}${c}`, v = e.i18nPlaceholder ? `data-i18n-attr='{"placeholder":"${e.i18nPlaceholder}"}'` : `placeholder="${s}"`;
+    let m = "";
     switch (e.type) {
       case "textarea":
-        p = `
+        m = `
                     <textarea
                         data-field="${e.name}"
-                        ${g}
+                        ${v}
                         rows="${e.rows || 4}"
                         class="${a ? "invalid" : ""}"
                         ${l}
-                        ${m}
+                        ${f}
                     >${i}</textarea>
                 `;
         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>`;
-        }).join(""), tt = e.i18nPlaceholder ? `<option value="" disabled ${i ? "" : "selected"} data-i18n="${e.i18nPlaceholder}"></option>` : s ? `<option value="" disabled ${i ? "" : "selected"}>${s}</option>` : "";
-        p = `
+        const M = (e.options || []).map(($) => {
+          const V = this.getTranslatedOptionLabel($), F = i === $.value ? "selected" : "";
+          return `<option value="${$.value}" ${F}>${V}</option>`;
+        }).join(""), B = e.i18nPlaceholder ? `<option value="" disabled ${i ? "" : "selected"} data-i18n="${e.i18nPlaceholder}"></option>` : s ? `<option value="" disabled ${i ? "" : "selected"}>${s}</option>` : "";
+        m = `
                     <select
                         data-field="${e.name}"
                         class="${a ? "invalid" : ""}"
                         ${l}
                     >
-                        ${tt}
-                        ${$}
+                        ${B}
+                        ${M}
                     </select>
                 `;
         break;
       }
       case "checkbox": {
-        const $ = e.i18nLabel ? `<span class="checkbox-text" data-i18n="${e.i18nLabel}"></span>` : `<span class="checkbox-text">${t}</span>`;
-        p = `
+        const M = e.i18nLabel ? `<span class="checkbox-text" data-i18n="${e.i18nLabel}"></span>` : `<span class="checkbox-text">${t}</span>`;
+        m = `
                     <label class="checkbox-label">
                         <input
                             type="checkbox"
@@ -3370,29 +3385,29 @@ let u = class extends k {
                             ${i ? "checked" : ""}
                             ${l}
                         />
-                        ${$}
+                        ${M}
                     </label>
                 `;
         break;
       }
       default:
-        p = `
+        m = `
                     <input
                         type="${e.type}"
                         data-field="${e.name}"
                         value="${i}"
-                        ${g}
+                        ${v}
                         class="${a ? "invalid" : ""}"
                         ${l}
-                        ${m}
+                        ${f}
                     />
                 `;
     }
     return e.type === "checkbox" ? `
                 <div class="form-field ${a ? "has-error" : ""}" data-field-container="${e.name}">
-                    ${p}
+                    ${m}
                     <span class="error-message" data-error="${e.name}" style="display: ${a ? "block" : "none"}">
-                        ${r || ""}
+                        ${o || ""}
                     </span>
                 </div>
             ` : `
@@ -3400,9 +3415,9 @@ let u = class extends k {
                 <label class="field-label" for="${e.name}">
                     ${b}
                 </label>
-                ${p}
+                ${m}
                 <span class="error-message" data-error="${e.name}" style="display: ${a ? "block" : "none"}">
-                    ${r || ""}
+                    ${o || ""}
                 </span>
             </div>
         `;
@@ -3412,7 +3427,7 @@ let u = class extends k {
    */
   render() {
     if (!this.root) return;
-    const e = this.getAttribute("i18n-title"), t = e ? `<h2 class="form-title" data-i18n="${e}"></h2>` : this.formTitle ? `<h2 class="form-title">${this.formTitle}</h2>` : "", s = this.getAttribute("i18n-description"), i = s ? `<p class="form-description" data-i18n="${s}"></p>` : this.description ? `<p class="form-description">${this.description}</p>` : "", r = this._fields.map((o) => this.renderField(o)).join("");
+    const e = this.getAttribute("i18n-title"), t = e ? `<h2 class="form-title" data-i18n="${e}"></h2>` : this.formTitle ? `<h2 class="form-title">${this.formTitle}</h2>` : "", s = this.getAttribute("i18n-description"), i = s ? `<p class="form-description" data-i18n="${s}"></p>` : this.description ? `<p class="form-description">${this.description}</p>` : "", o = this._fields.map((r) => this.renderField(r)).join("");
     this.setHTML(`
             ${this.getStyles()}
             <form class="zs3-form" novalidate>
@@ -3420,7 +3435,7 @@ let u = class extends k {
                 ${i}
 
                 <div class="form-fields">
-                    ${r}
+                    ${o}
                 </div>
 
                 <div class="form-buttons"></div>
@@ -3612,88 +3627,88 @@ let u = class extends k {
    * Create a form from configuration
    */
   static create(e) {
-    const t = new u();
+    const t = new p();
     return e.title && t.setAttribute("title", e.title), e.i18nTitle && t.setAttribute("i18n-title", e.i18nTitle), e.description && t.setAttribute("description", e.description), e.i18nDescription && t.setAttribute("i18n-description", e.i18nDescription), e.acceptText && t.setAttribute("accept-text", e.acceptText), e.i18nAcceptText && t.setAttribute("i18n-accept-text", e.i18nAcceptText), e.cancelText && t.setAttribute("cancel-text", e.cancelText), e.i18nCancelText && t.setAttribute("i18n-cancel-text", e.i18nCancelText), e.showCancel !== void 0 && t.setAttribute("show-cancel", String(e.showCancel)), e.acceptVariant && t.setAttribute("accept-variant", e.acceptVariant), e.cancelVariant && t.setAttribute("cancel-variant", e.cancelVariant), e.parent && t.setParent(e.parent), e.fields && t.setAttribute("fields", JSON.stringify(e.fields)), t;
   }
   /**
    * Create and show a form as a promise (resolves when submitted)
    */
   static async prompt(e) {
-    const t = u.create({
+    const t = p.create({
       ...e,
       showCancel: !0
     });
     return document.body.appendChild(t), new Promise((s) => {
       const i = (a) => {
         const c = a.detail;
-        o(), s(c.values);
-      }, r = () => {
-        o(), s(null);
+        r(), s(c.values);
       }, o = () => {
-        t.removeEventListener("zs3-form-submit", i), t.removeEventListener("zs3-form-cancel", r), t.remove();
+        r(), s(null);
+      }, r = () => {
+        t.removeEventListener("zs3-form-submit", i), t.removeEventListener("zs3-form-cancel", o), t.remove();
       };
-      t.addEventListener("zs3-form-submit", i), t.addEventListener("zs3-form-cancel", r);
+      t.addEventListener("zs3-form-submit", i), t.addEventListener("zs3-form-cancel", o);
     });
   }
 };
-w([
+x([
   n("title", { type: "string", default: "" })
-], u.prototype, "formTitle", 2);
-w([
+], p.prototype, "formTitle", 2);
+x([
   n("description", { type: "string", default: "" })
-], u.prototype, "description", 2);
-w([
+], p.prototype, "description", 2);
+x([
   n("accept-text", { type: "string" })
-], u.prototype, "acceptText", 2);
-w([
+], p.prototype, "acceptText", 2);
+x([
   n("cancel-text", { type: "string" })
-], u.prototype, "cancelText", 2);
-w([
+], p.prototype, "cancelText", 2);
+x([
   n("show-cancel", { type: "boolean" })
-], u.prototype, "showCancel", 2);
-w([
+], p.prototype, "showCancel", 2);
+x([
   n("accept-variant", { type: "string", default: "primary" })
-], u.prototype, "acceptVariant", 2);
-w([
+], p.prototype, "acceptVariant", 2);
+x([
   n("cancel-variant", { type: "string", default: "secondary" })
-], u.prototype, "cancelVariant", 2);
-w([
+], p.prototype, "cancelVariant", 2);
+x([
   n("disabled", { type: "boolean" })
-], u.prototype, "formDisabled", 2);
-w([
+], p.prototype, "formDisabled", 2);
+x([
   n("i18n-title", { type: "string" })
-], u.prototype, "i18nTitle", 2);
-w([
+], p.prototype, "i18nTitle", 2);
+x([
   n("i18n-description", { type: "string" })
-], u.prototype, "i18nDescription", 2);
-w([
+], p.prototype, "i18nDescription", 2);
+x([
   n("i18n-accept-text", { type: "string" })
-], u.prototype, "i18nAcceptText", 2);
-w([
+], p.prototype, "i18nAcceptText", 2);
+x([
   n("i18n-cancel-text", { type: "string" })
-], u.prototype, "i18nCancelText", 2);
-w([
+], p.prototype, "i18nCancelText", 2);
+x([
   n("fields", { type: "string" })
-], u.prototype, "fields", 2);
-u = w([
-  x("zs3-form"),
-  E(Qt)
-], u);
-customElements.get("zs3-form") || customElements.define("zs3-form", u);
-typeof window < "u" && (window.$Form = u);
-var Zt = Object.defineProperty, te = Object.getOwnPropertyDescriptor, W = (e, t, s, i) => {
-  for (var r = i > 1 ? void 0 : i ? te(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 && Zt(t, s, r), r;
+], p.prototype, "fields", 2);
+p = x([
+  E("zs3-form"),
+  T(ae)
+], p);
+customElements.get("zs3-form") || customElements.define("zs3-form", p);
+typeof window < "u" && (window.$Form = p);
+var ne = Object.defineProperty, le = Object.getOwnPropertyDescriptor, G = (e, t, s, i) => {
+  for (var o = i > 1 ? void 0 : i ? le(t, s) : t, r = e.length - 1, a; r >= 0; r--)
+    (a = e[r]) && (o = (i ? a(t, s, o) : a(o)) || o);
+  return i && o && ne(t, s, o), o;
 };
-const ee = [
+const ce = [
   "show-register",
   "login-text",
   "register-text",
   "i18n-login-text",
   "i18n-register-text"
 ];
-let H = class extends u {
+let H = class extends p {
   constructor() {
     super();
   }
@@ -3747,44 +3762,44 @@ 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";
+    const t = new g(), s = this.i18nRegisterText || "zs3.login.register";
     t.textContent = this.t(s), t.variant = "secondary", t.setAttribute("data-action", "register"), this.addManagedEventListener(t, "zs3-click", () => {
       this.emit("zs3-login-register", { form: this });
     }), e.appendChild(t), this._buttons.push(t);
   }
 };
-W([
+G([
   n("show-register", { type: "boolean" })
 ], H.prototype, "showRegister", 2);
-W([
+G([
   n("login-text", { type: "string" })
 ], H.prototype, "loginText", 2);
-W([
+G([
   n("register-text", { type: "string" })
 ], H.prototype, "registerText", 2);
-W([
+G([
   n("i18n-login-text", { type: "string" })
 ], H.prototype, "i18nLoginText", 2);
-W([
+G([
   n("i18n-register-text", { type: "string" })
 ], H.prototype, "i18nRegisterText", 2);
-H = W([
-  x("zs3-login-form"),
-  E(ee, { inherit: !0 })
+H = G([
+  E("zs3-login-form"),
+  T(ce, { inherit: !0 })
 ], H);
 typeof window < "u" && (window.$LoginForm = H);
-var se = Object.defineProperty, ie = Object.getOwnPropertyDescriptor, ct = (e, t, s, i) => {
-  for (var r = i > 1 ? void 0 : i ? ie(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 && se(t, s, r), r;
+var de = Object.defineProperty, he = Object.getOwnPropertyDescriptor, bt = (e, t, s, i) => {
+  for (var o = i > 1 ? void 0 : i ? he(t, s) : t, r = e.length - 1, a; r >= 0; r--)
+    (a = e[r]) && (o = (i ? a(t, s, o) : a(o)) || o);
+  return i && o && de(t, s, o), o;
 };
-const re = [
+const ue = [
   "register-text",
   "i18n-register-text"
 ];
-let Q = class extends u {
+let et = class extends p {
   constructor() {
     super();
   }
@@ -3883,27 +3898,27 @@ let Q = class extends u {
     }
   }
 };
-ct([
+bt([
   n("register-text", { type: "string" })
-], Q.prototype, "registerButtonText", 2);
-ct([
+], et.prototype, "registerButtonText", 2);
+bt([
   n("i18n-register-text", { type: "string" })
-], Q.prototype, "i18nRegisterText", 2);
-Q = ct([
-  x("zs3-register-form"),
-  E(re, { inherit: !0 })
-], Q);
-typeof window < "u" && (window.$RegisterForm = Q);
-var oe = Object.defineProperty, ae = Object.getOwnPropertyDescriptor, dt = (e, t, s, i) => {
-  for (var r = i > 1 ? void 0 : i ? ae(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 && oe(t, s, r), r;
+], et.prototype, "i18nRegisterText", 2);
+et = bt([
+  E("zs3-register-form"),
+  T(ue, { inherit: !0 })
+], et);
+typeof window < "u" && (window.$RegisterForm = et);
+var pe = Object.defineProperty, me = Object.getOwnPropertyDescriptor, gt = (e, t, s, i) => {
+  for (var o = i > 1 ? void 0 : i ? me(t, s) : t, r = e.length - 1, a; r >= 0; r--)
+    (a = e[r]) && (o = (i ? a(t, s, o) : a(o)) || o);
+  return i && o && pe(t, s, o), o;
 };
-const ne = [
+const fe = [
   "submit-text",
   "i18n-submit-text"
 ];
-let Z = class extends u {
+let st = class extends p {
   constructor() {
     super();
   }
@@ -3941,23 +3956,23 @@ let Z = class extends u {
     }
   }
 };
-dt([
+gt([
   n("submit-text", { type: "string" })
-], Z.prototype, "submitText", 2);
-dt([
+], st.prototype, "submitText", 2);
+gt([
   n("i18n-submit-text", { type: "string" })
-], Z.prototype, "i18nSubmitText", 2);
-Z = dt([
-  x("zs3-recover-password-form"),
-  E(ne, { inherit: !0 })
-], Z);
-typeof window < "u" && (window.$RecoverPasswordForm = Z);
-var le = Object.defineProperty, ce = Object.getOwnPropertyDescriptor, I = (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;
+], st.prototype, "i18nSubmitText", 2);
+st = gt([
+  E("zs3-recover-password-form"),
+  T(fe, { inherit: !0 })
+], st);
+typeof window < "u" && (window.$RecoverPasswordForm = st);
+var be = Object.defineProperty, ge = Object.getOwnPropertyDescriptor, q = (e, t, s, i) => {
+  for (var o = i > 1 ? void 0 : i ? ge(t, s) : t, r = e.length - 1, a; r >= 0; r--)
+    (a = e[r]) && (o = (i ? a(t, s, o) : a(o)) || o);
+  return i && o && be(t, s, o), o;
 };
-const de = [
+const ve = [
   "size",
   "backdrop",
   "close-on-backdrop",
@@ -3965,7 +3980,7 @@ const de = [
   "centered",
   "scrollable"
 ];
-let M = class extends k {
+let A = class extends P {
   /**
    * Initializes the modal component
    */
@@ -3997,11 +4012,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();
     });
@@ -4028,8 +4043,8 @@ let M = class extends k {
       'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
     );
     if (e.length === 0) return;
-    const t = e[0], s = e[e.length - 1], i = (r) => {
-      r.key === "Tab" && (r.shiftKey ? document.activeElement === t && (r.preventDefault(), s.focus()) : document.activeElement === s && (r.preventDefault(), t.focus()));
+    const t = e[0], s = e[e.length - 1], i = (o) => {
+      o.key === "Tab" && (o.shiftKey ? document.activeElement === t && (o.preventDefault(), s.focus()) : document.activeElement === s && (o.preventDefault(), t.focus()));
     };
     this.addManagedEventListener(this, "keydown", i), t.focus();
   }
@@ -4068,7 +4083,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 +4249,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,36 +4275,36 @@ 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([
+q([
   n("size", { type: "string", default: "medium" })
-], M.prototype, "size", 2);
-I([
+], A.prototype, "size", 2);
+q([
   n("backdrop", { type: "boolean", default: !0 })
-], M.prototype, "backdrop", 2);
-I([
+], A.prototype, "backdrop", 2);
+q([
   n("close-on-backdrop", { type: "boolean", default: !0 })
-], M.prototype, "closeOnBackdrop", 2);
-I([
+], A.prototype, "closeOnBackdrop", 2);
+q([
   n("close-on-escape", { type: "boolean", default: !0 })
-], M.prototype, "closeOnEscape", 2);
-I([
+], A.prototype, "closeOnEscape", 2);
+q([
   n("centered", { type: "boolean", default: !0 })
-], M.prototype, "centered", 2);
-I([
+], A.prototype, "centered", 2);
+q([
   n("scrollable", { type: "boolean" })
-], M.prototype, "scrollable", 2);
-M = I([
-  x("zs3-modal"),
-  E(de)
-], M);
-customElements.get("zs3-modal") || customElements.define("zs3-modal", M);
-typeof window < "u" && (window.$Modal = M);
-var he = Object.defineProperty, ue = Object.getOwnPropertyDescriptor, v = (e, t, s, i) => {
-  for (var r = i > 1 ? void 0 : i ? ue(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 && he(t, s, r), r;
+], A.prototype, "scrollable", 2);
+A = q([
+  E("zs3-modal"),
+  T(ve)
+], A);
+customElements.get("zs3-modal") || customElements.define("zs3-modal", A);
+typeof window < "u" && (window.$Modal = A);
+var ze = Object.defineProperty, ye = Object.getOwnPropertyDescriptor, z = (e, t, s, i) => {
+  for (var o = i > 1 ? void 0 : i ? ye(t, s) : t, r = e.length - 1, a; r >= 0; r--)
+    (a = e[r]) && (o = (i ? a(t, s, o) : a(o)) || o);
+  return i && o && ze(t, s, o), o;
 };
-const pe = [
+const we = [
   "title",
   "message",
   "show-accept",
@@ -4308,7 +4323,7 @@ const pe = [
   "i18n-cancel-text",
   "i18n-close-text"
 ];
-let d = class extends M {
+let d = class extends A {
   /**
    * Initializes the modal dialog component
    */
@@ -4319,7 +4334,7 @@ let d = class extends M {
    * After mount setup
    */
   afterMount() {
-    super.afterMount(), this.setupDialogButtons(), this._shadowRoot && y.updateRoot(this._shadowRoot);
+    super.afterMount(), this.setupDialogButtons(), this._shadowRoot && w.updateRoot(this._shadowRoot);
   }
   /**
    * Setup dialog button event listeners
@@ -4328,22 +4343,22 @@ 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");
+        const t = new g(), s = this.getAttribute("i18n-accept-text");
         t.textContent = s ? this.t(s) : this.acceptText, t.variant = this.acceptVariant, t.setAttribute("data-action", "accept"), this.addManagedEventListener(t, "zs3-click", () => {
           this.handleAccept();
         }), e.appendChild(t), this._buttons.push(t);
       }
       if (this.showCancel) {
-        const t = new f(), s = this.getAttribute("i18n-cancel-text");
+        const t = new g(), s = this.getAttribute("i18n-cancel-text");
         t.textContent = s ? this.t(s) : this.cancelText, t.variant = this.cancelVariant, t.setAttribute("data-action", "cancel"), this.addManagedEventListener(t, "zs3-click", () => {
           this.handleCancel();
         }), e.appendChild(t), this._buttons.push(t);
       }
       if (this.showClose) {
-        const t = new f(), s = this.getAttribute("i18n-close-text");
+        const t = new g(), s = this.getAttribute("i18n-close-text");
         t.textContent = s ? this.t(s) : this.closeText, t.variant = "secondary", t.setAttribute("data-action", "close"), this.addManagedEventListener(t, "zs3-click", () => {
           this.handleClose();
         }), e.appendChild(t), this._buttons.push(t);
@@ -4382,7 +4397,7 @@ let d = class extends M {
    */
   render() {
     if (!this.root) return;
-    const e = this.icon ? `<zs3-icon name="${this.icon}" size="large" class="dialog-icon"></zs3-icon>` : "", t = this.getAttribute("i18n-title"), s = t ? `<h2 id="dialog-title" class="dialog-title" data-i18n="${t}"></h2>` : this.title ? `<h2 id="dialog-title" class="dialog-title">${this.title}</h2>` : "", i = this.getAttribute("i18n-message"), r = i ? `<p class="dialog-message" data-i18n="${i}"></p>` : this.message ? `<p class="dialog-message">${this.message}</p>` : "";
+    const e = this.icon ? `<zs3-icon name="${this.icon}" size="large" class="dialog-icon"></zs3-icon>` : "", t = this.getAttribute("i18n-title"), s = t ? `<h2 id="dialog-title" class="dialog-title" data-i18n="${t}"></h2>` : this.title ? `<h2 id="dialog-title" class="dialog-title">${this.title}</h2>` : "", i = this.getAttribute("i18n-message"), o = i ? `<p class="dialog-message" data-i18n="${i}"></p>` : this.message ? `<p class="dialog-message">${this.message}</p>` : "";
     this.setHTML(`
       ${this.getStyles()}
       <div class="modal-backdrop" role="dialog" aria-modal="true" aria-labelledby="dialog-title">
@@ -4394,7 +4409,7 @@ let d = class extends M {
             </div>
 
             <div class="dialog-body">
-              ${r}
+              ${o}
               <slot></slot>
             </div>
 
@@ -4403,8 +4418,8 @@ let d = class extends M {
         </div>
       </div>
     `);
-    const o = this.qs(".modal-backdrop"), a = this.qs(".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" });
+    const r = this.$(".modal-backdrop").$, a = this.$(".modal-container").$;
+    r && a && (a.classList.add(`size-${this.size}`), this.centered && r.classList.add("centered"), this.scrollable && a.classList.add("scrollable"), this._isVisible && (r.classList.add("visible"), a.classList.add("visible"))), this._mounted && (this.setupEventListeners(), this.setupDialogButtons()), this.emitLifecycleEvent("zs3-rendered", { phase: "complete" });
   }
   /**
    * Get component styles (extends parent styles)
@@ -4485,12 +4500,12 @@ let d = class extends M {
   async showDialog() {
     return new Promise((e) => {
       const t = () => {
-        r(), e("accept");
+        o(), e("accept");
       }, s = () => {
-        r(), e("cancel");
+        o(), e("cancel");
       }, i = () => {
-        r(), e("close");
-      }, r = () => {
+        o(), e("close");
+      }, o = () => {
         this.removeEventListener("zs3-dialog-accept", t), this.removeEventListener("zs3-dialog-cancel", s), this.removeEventListener("zs3-dialog-close", i);
       };
       this.addEventListener("zs3-dialog-accept", t), this.addEventListener("zs3-dialog-cancel", s), this.addEventListener("zs3-dialog-close", i), this.show();
@@ -4550,8 +4565,8 @@ let d = class extends M {
   static prompt(e, t, s) {
     const i = new d();
     i.title = e, i.showAccept = !0, i.showCancel = !0, i.size = "medium", i.setAttribute("i18n-accept-text", "zs3.dialog.accept"), i.setAttribute("i18n-cancel-text", "zs3.dialog.cancel");
-    let r = null;
-    return t ? i.appendChild(t) : (r = document.createElement("input"), r.type = "text", r.placeholder = s ?? "", r.style.cssText = `
+    let o = null;
+    return t ? i.appendChild(t) : (o = document.createElement("input"), o.type = "text", o.placeholder = s ?? "", o.style.cssText = `
                 width: 100%;
                 padding: 0.5rem 0.75rem;
                 border: 1px solid var(--zs3-border-color, #d1d5db);
@@ -4559,13 +4574,13 @@ let d = class extends M {
                 font-size: 1rem;
                 outline: none;
                 box-sizing: border-box;
-            `, r.addEventListener("focus", () => {
-      r.style.borderColor = "var(--zs3-primary-color, #3b82f6)", r.style.boxShadow = "0 0 0 2px rgba(59, 130, 246, 0.2)";
-    }), r.addEventListener("blur", () => {
-      r.style.borderColor = "var(--zs3-border-color, #d1d5db)", r.style.boxShadow = "none";
-    }), i.appendChild(r)), document.body.appendChild(i), r && setTimeout(() => r.focus(), 100), i.showDialog().then((o) => {
-      const a = r ? r.value : null;
-      return i.remove(), o === "accept" ? a : null;
+            `, o.addEventListener("focus", () => {
+      o.style.borderColor = "var(--zs3-primary-color, #3b82f6)", o.style.boxShadow = "0 0 0 2px rgba(59, 130, 246, 0.2)";
+    }), o.addEventListener("blur", () => {
+      o.style.borderColor = "var(--zs3-border-color, #d1d5db)", o.style.boxShadow = "none";
+    }), i.appendChild(o)), document.body.appendChild(i), o && setTimeout(() => o.focus(), 100), i.showDialog().then((r) => {
+      const a = o ? o.value : null;
+      return i.remove(), r === "accept" ? a : null;
     });
   }
   /**
@@ -4590,8 +4605,8 @@ let d = class extends M {
     }), s.addEventListener("blur", () => {
       s.style.borderColor = "var(--zs3-border-color, #d1d5db)", s.style.boxShadow = "none";
     }), t.appendChild(s)), document.body.appendChild(t), s && setTimeout(() => s.focus(), 100), t.showDialog().then((i) => {
-      const r = s ? s.value : null;
-      return t.remove(), i === "accept" ? r : null;
+      const o = s ? s.value : null;
+      return t.remove(), i === "accept" ? o : null;
     });
   }
   /**
@@ -4616,66 +4631,66 @@ let d = class extends M {
     return e.title && (t.title = e.title), e.message && (t.message = e.message), e.acceptText && (t.acceptText = e.acceptText), e.cancelText && (t.cancelText = e.cancelText), e.closeText && (t.closeText = e.closeText), e.i18nTitle && (t.i18nTitle = e.i18nTitle), e.i18nMessage && (t.i18nMessage = e.i18nMessage), e.i18nAcceptText && (t.i18nAcceptText = e.i18nAcceptText), e.i18nCancelText && (t.i18nCancelText = e.i18nCancelText), e.i18nCloseText && (t.i18nCloseText = e.i18nCloseText), e.showAccept !== void 0 && (t.showAccept = e.showAccept), e.showCancel !== void 0 && (t.showCancel = e.showCancel), e.showClose !== void 0 && (t.showClose = e.showClose), e.acceptVariant && (t.acceptVariant = e.acceptVariant), e.cancelVariant && (t.cancelVariant = e.cancelVariant), e.icon && (t.icon = e.icon), t;
   }
 };
-v([
+z([
   n("title", { type: "string", default: "" })
 ], d.prototype, "title", 2);
-v([
+z([
   n("message", { type: "string", default: "" })
 ], d.prototype, "message", 2);
-v([
+z([
   n("show-accept", { type: "boolean" })
 ], d.prototype, "showAccept", 2);
-v([
+z([
   n("show-cancel", { type: "boolean" })
 ], d.prototype, "showCancel", 2);
-v([
+z([
   n("show-close", { type: "boolean" })
 ], d.prototype, "showClose", 2);
-v([
+z([
   n("accept-text", { type: "string", default: "Accept" })
 ], d.prototype, "acceptText", 2);
-v([
+z([
   n("cancel-text", { type: "string", default: "Cancel" })
 ], d.prototype, "cancelText", 2);
-v([
+z([
   n("close-text", { type: "string", default: "Close" })
 ], d.prototype, "closeText", 2);
-v([
+z([
   n("accept-variant", { type: "string", default: "primary" })
 ], d.prototype, "acceptVariant", 2);
-v([
+z([
   n("cancel-variant", { type: "string", default: "secondary" })
 ], d.prototype, "cancelVariant", 2);
-v([
+z([
   n("icon", { type: "string" })
 ], d.prototype, "icon", 2);
-v([
+z([
   n("i18n-title", { type: "string" })
 ], d.prototype, "i18nTitle", 2);
-v([
+z([
   n("i18n-message", { type: "string" })
 ], d.prototype, "i18nMessage", 2);
-v([
+z([
   n("i18n-accept-text", { type: "string" })
 ], d.prototype, "i18nAcceptText", 2);
-v([
+z([
   n("i18n-cancel-text", { type: "string" })
 ], d.prototype, "i18nCancelText", 2);
-v([
+z([
   n("i18n-close-text", { type: "string" })
 ], d.prototype, "i18nCloseText", 2);
-d = v([
-  x("zs3-modal-dialog"),
-  E(pe, { inherit: !0 })
+d = z([
+  E("zs3-modal-dialog"),
+  T(we, { inherit: !0 })
 ], d);
 customElements.get("zs3-modal-dialog") || customElements.define("zs3-modal-dialog", d);
 typeof window < "u" && (window.$ModalDialog = d);
-var me = Object.defineProperty, fe = Object.getOwnPropertyDescriptor, _ = (e, t, s, i) => {
-  for (var r = i > 1 ? void 0 : i ? fe(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 && me(t, s, r), r;
+var xe = Object.defineProperty, Ee = Object.getOwnPropertyDescriptor, _ = (e, t, s, i) => {
+  for (var o = i > 1 ? void 0 : i ? Ee(t, s) : t, r = e.length - 1, a; r >= 0; r--)
+    (a = e[r]) && (o = (i ? a(t, s, o) : a(o)) || o);
+  return i && o && xe(t, s, o), o;
 };
-const be = [
+const Te = [
   "type",
   "title",
   "message",
@@ -4689,7 +4704,7 @@ const be = [
   "i18n-message",
   "i18n-close-label"
 ];
-let h = class extends k {
+let u = class extends P {
   /**
    * Initializes the notification component
    */
@@ -4716,7 +4731,7 @@ let h = class extends k {
    * After mount setup
    */
   afterMount() {
-    this.setupEventListeners(), this._shadowRoot && y.updateRoot(this._shadowRoot), this.autoShow && this.show();
+    this.setupEventListeners(), this._shadowRoot && w.updateRoot(this._shadowRoot), this.autoShow && this.show();
   }
   /**
    * Before unmount cleanup
@@ -4728,9 +4743,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 +4782,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();
@@ -4785,7 +4800,7 @@ let h = class extends k {
    */
   render() {
     if (!this.root) return;
-    const e = this.getIconHTML(), t = this.getAttribute("i18n-close-label"), s = this.dismissible ? `<button class="close-btn" ${t ? `data-i18n-attr='{"aria-label":"${t}"}'` : 'aria-label="Close notification"'}>&times;</button>` : "", i = this.showProgress ? '<div class="progress-container"><div class="progress-bar"></div></div>' : "", r = this.getAttribute("i18n-title"), o = r ? `<div class="notification-title" data-i18n="${r}"></div>` : this.title ? `<div class="notification-title">${this.title}</div>` : "", a = this.getAttribute("i18n-message"), c = a ? `<div class="notification-message" data-i18n="${a}"></div>` : `<div class="notification-message">${this.message || ""}</div>`;
+    const e = this.getIconHTML(), t = this.getAttribute("i18n-close-label"), s = this.dismissible ? `<button class="close-btn" ${t ? `data-i18n-attr='{"aria-label":"${t}"}'` : 'aria-label="Close notification"'}>&times;</button>` : "", i = this.showProgress ? '<div class="progress-container"><div class="progress-bar"></div></div>' : "", o = this.getAttribute("i18n-title"), r = o ? `<div class="notification-title" data-i18n="${o}"></div>` : this.title ? `<div class="notification-title">${this.title}</div>` : "", a = this.getAttribute("i18n-message"), c = a ? `<div class="notification-message" data-i18n="${a}"></div>` : `<div class="notification-message">${this.message || ""}</div>`;
     this.setHTML(`
       ${this.getStyles()}
       <div class="notification" role="alert" aria-live="polite">
@@ -4793,14 +4808,14 @@ let h = class extends k {
         <div class="notification-content">
           ${e}
           <div class="notification-text">
-            ${o}
+            ${r}
             ${c}
           </div>
         </div>
         ${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" });
   }
   /**
@@ -4941,9 +4956,19 @@ let h = class extends k {
           transition: all var(--zs3-transition-fast, 150ms ease-in-out);
         }
 
-        .close-btn:hover {
-          opacity: 1;
-          color: var(--zs3-fg-color, #111827);
+        @media (hover: hover) {
+          .close-btn:hover {
+            opacity: 1;
+            color: var(--zs3-fg-color, #111827);
+          }
+        }
+
+        /* Zona tàctil mínima (44px) per a dispositius amb punter gruixut */
+        @media (pointer: coarse) {
+          .close-btn {
+            min-width: 2.75rem;
+            min-height: 2.75rem;
+          }
         }
 
         /* Progress bar */
@@ -5044,7 +5069,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 +5083,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,
@@ -5090,84 +5115,84 @@ let h = class extends k {
    * Create and show a success notification
    */
   static success(e, t) {
-    return h.create({ ...t, type: "success", message: e });
+    return u.create({ ...t, type: "success", message: e });
   }
   /**
    * Create and show an error notification
    */
   static error(e, t) {
-    return h.create({ ...t, type: "error", message: e });
+    return u.create({ ...t, type: "error", message: e });
   }
   /**
    * Create and show a warning notification
    */
   static warning(e, t) {
-    return h.create({ ...t, type: "warning", message: e });
+    return u.create({ ...t, type: "warning", message: e });
   }
   /**
    * Create and show an info notification
    */
   static info(e, t) {
-    return h.create({ ...t, type: "info", message: e });
+    return u.create({ ...t, type: "info", message: e });
   }
   /**
    * Create a notification programmatically
    */
   static create(e) {
-    const t = new h();
+    const t = new u();
     return t.message = e.message, e.title && (t.title = e.title), e.type && (t.type = e.type), e.duration !== void 0 && (t.duration = e.duration), e.position && (t.position = e.position), e.dismissible !== void 0 && (t.dismissible = e.dismissible), e.showIcon !== void 0 && (t.showIcon = e.showIcon), e.showProgress !== void 0 && (t.showProgress = e.showProgress), e.i18nTitle && (t.i18nTitle = e.i18nTitle), e.i18nMessage && (t.i18nMessage = e.i18nMessage), e.i18nCloseLabel && (t.i18nCloseLabel = e.i18nCloseLabel), document.body.appendChild(t), t.show(), t;
   }
 };
-h.DEFAULT_DURATION = 5e3;
+u.DEFAULT_DURATION = 5e3;
 _([
   n("type", { type: "string", default: "info" })
-], h.prototype, "type", 2);
+], u.prototype, "type", 2);
 _([
   n("title", { type: "string", default: "" })
-], h.prototype, "title", 2);
+], u.prototype, "title", 2);
 _([
   n("message", { type: "string", default: "" })
-], h.prototype, "message", 2);
+], u.prototype, "message", 2);
 _([
   n("duration", { type: "number", default: 5e3 })
-], h.prototype, "duration", 2);
+], u.prototype, "duration", 2);
 _([
   n("position", { type: "string", default: "top-center" })
-], h.prototype, "position", 2);
+], u.prototype, "position", 2);
 _([
   n("dismissible", { type: "boolean", default: !0 })
-], h.prototype, "dismissible", 2);
+], u.prototype, "dismissible", 2);
 _([
   n("show-icon", { type: "boolean", default: !0 })
-], h.prototype, "showIcon", 2);
+], u.prototype, "showIcon", 2);
 _([
   n("show-progress", { type: "boolean" })
-], h.prototype, "showProgress", 2);
+], u.prototype, "showProgress", 2);
 _([
   n("auto-show", { type: "boolean" })
-], h.prototype, "autoShow", 2);
+], u.prototype, "autoShow", 2);
 _([
   n("i18n-title", { type: "string" })
-], h.prototype, "i18nTitle", 2);
+], u.prototype, "i18nTitle", 2);
 _([
   n("i18n-message", { type: "string" })
-], h.prototype, "i18nMessage", 2);
+], u.prototype, "i18nMessage", 2);
 _([
   n("i18n-close-label", { type: "string" })
-], h.prototype, "i18nCloseLabel", 2);
-h = _([
-  x("zs3-notification"),
-  E(be)
-], h);
-customElements.get("zs3-notification") || customElements.define("zs3-notification", h);
-typeof window < "u" && (window.$Notification = h);
-var ge = Object.defineProperty, ve = Object.getOwnPropertyDescriptor, zt = (e, t, s, i) => {
-  for (var r = i > 1 ? void 0 : i ? ve(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 && ge(t, s, r), r;
+], u.prototype, "i18nCloseLabel", 2);
+u = _([
+  E("zs3-notification"),
+  T(Te)
+], u);
+customElements.get("zs3-notification") || customElements.define("zs3-notification", u);
+typeof window < "u" && (window.$Notification = u);
+var _e = Object.defineProperty, Me = Object.getOwnPropertyDescriptor, Lt = (e, t, s, i) => {
+  for (var o = i > 1 ? void 0 : i ? Me(t, s) : t, r = e.length - 1, a; r >= 0; r--)
+    (a = e[r]) && (o = (i ? a(t, s, o) : a(o)) || o);
+  return i && o && _e(t, s, o), o;
 };
-const ze = ["zs3-position"];
-let it = class extends k {
+const Le = ["zs3-position"];
+let lt = class extends P {
   constructor() {
     super({
       useShadowDOM: !0,
@@ -5178,24 +5203,24 @@ 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);
+      w.setLocale(e.value);
     });
   }
   onLocaleChange(e) {
     this.updateSelectedValue();
   }
   updateSelectedValue() {
-    const e = this.qs("select");
-    e && (e.value = y.getLocale());
+    const e = this.$("select").$;
+    e && (e.value = w.getLocale());
   }
   render() {
     this.root && (this.root.innerHTML = this.getStyles() + this.getTemplate(), this.updateSelectedValue(), this._mounted && this.setupEventListeners());
   }
   getTemplate() {
-    const e = y.getLocale();
-    return `<select aria-label="Select language">${y.getAvailableLocales().map(
+    const e = w.getLocale();
+    return `<select aria-label="Select language">${w.getAvailableLocales().map(
       (i) => `<option value="${i}"${i === e ? " selected" : ""}>${i}</option>`
     ).join("")}</select>`;
   }
@@ -5234,20 +5259,20 @@ let it = class extends k {
     `;
   }
 };
-zt([
+Lt([
   n("zs3-position", { type: "string" })
-], it.prototype, "zs3Position", 2);
-it = zt([
-  x("zs3-select-locale"),
-  E(ze)
-], it);
-typeof window < "u" && (window.$SelectLocale = it);
-var ye = Object.defineProperty, we = Object.getOwnPropertyDescriptor, yt = (e, t, s, i) => {
-  for (var r = i > 1 ? void 0 : i ? we(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 && ye(t, s, r), r;
+], lt.prototype, "zs3Position", 2);
+lt = Lt([
+  E("zs3-select-locale"),
+  T(Le)
+], lt);
+typeof window < "u" && (window.$SelectLocale = lt);
+var $e = Object.defineProperty, Ce = Object.getOwnPropertyDescriptor, $t = (e, t, s, i) => {
+  for (var o = i > 1 ? void 0 : i ? Ce(t, s) : t, r = e.length - 1, a; r >= 0; r--)
+    (a = e[r]) && (o = (i ? a(t, s, o) : a(o)) || o);
+  return i && o && $e(t, s, o), o;
 };
-const xe = ["zs3-position"], Ee = [
+const Ae = ["zs3-position"], Se = [
   { value: "light", label: "Light" },
   { value: "light-blue", label: "Light Blue" },
   { value: "dark", label: "Dark" },
@@ -5256,7 +5281,7 @@ const xe = ["zs3-position"], Ee = [
   { value: "high-contrast", label: "High Contrast" },
   { value: "system", label: "System" }
 ];
-let rt = class extends k {
+let ct = class extends P {
   constructor() {
     super({
       useShadowDOM: !0,
@@ -5267,24 +5292,24 @@ 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);
+      Z.setTheme(e.value);
     });
   }
   onThemeChange(e) {
     this.updateSelectedValue();
   }
   updateSelectedValue() {
-    const e = this.qs("select");
-    e && (e.value = G.getTheme());
+    const e = this.$("select").$;
+    e && (e.value = Z.getTheme());
   }
   render() {
     this.root && (this.root.innerHTML = this.getStyles() + this.getTemplate(), this.updateSelectedValue(), this._mounted && this.setupEventListeners());
   }
   getTemplate() {
-    const e = G.getTheme();
-    return `<select aria-label="Select theme">${Ee.map(
+    const e = Z.getTheme();
+    return `<select aria-label="Select theme">${Se.map(
       (s) => `<option value="${s.value}"${s.value === e ? " selected" : ""}>${s.label}</option>`
     ).join("")}</select>`;
   }
@@ -5323,20 +5348,20 @@ let rt = class extends k {
     `;
   }
 };
-yt([
+$t([
   n("zs3-position", { type: "string" })
-], rt.prototype, "zs3Position", 2);
-rt = yt([
-  x("zs3-select-theme"),
-  E(xe)
-], rt);
-typeof window < "u" && (window.$SelectTheme = rt);
-var _e = Object.defineProperty, Te = Object.getOwnPropertyDescriptor, R = (e, t, s, i) => {
-  for (var r = i > 1 ? void 0 : i ? Te(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 && _e(t, s, r), r;
+], ct.prototype, "zs3Position", 2);
+ct = $t([
+  E("zs3-select-theme"),
+  T(Ae)
+], ct);
+typeof window < "u" && (window.$SelectTheme = ct);
+var ke = Object.defineProperty, Pe = Object.getOwnPropertyDescriptor, R = (e, t, s, i) => {
+  for (var o = i > 1 ? void 0 : i ? Pe(t, s) : t, r = e.length - 1, a; r >= 0; r--)
+    (a = e[r]) && (o = (i ? a(t, s, o) : a(o)) || o);
+  return i && o && ke(t, s, o), o;
 };
-const Me = [
+const De = [
   "direction",
   "float",
   "move",
@@ -5357,7 +5382,7 @@ const Me = [
   "zs3-move-cancel",
   "zs3-move-boundary"
 ];
-let L = class extends k {
+let S = class extends P {
   /**
    * Initializes the toolbar component
    */
@@ -5377,7 +5402,7 @@ let L = class extends k {
    * After mount setup
    */
   afterMount() {
-    this.setupSlotObserver(), this.updateButtonsList(), this.setupButtonListeners(), this._shadowRoot && y.updateRoot(this._shadowRoot);
+    this.setupSlotObserver(), this.updateButtonsList(), this.setupButtonListeners(), this._shadowRoot && w.updateRoot(this._shadowRoot);
   }
   /**
    * Before unmount cleanup
@@ -5436,7 +5461,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" });
   }
   /**
@@ -5465,8 +5490,10 @@ let L = class extends k {
           transition: all var(--zs3-transition-slow, 150ms ease-in-out);
         }
 
-        .toolbar:hover {
-          box-shadow: var(--zs3-shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.1));
+        @media (hover: hover) {
+          .toolbar:hover {
+            box-shadow: var(--zs3-shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.1));
+          }
         }
 
         /* Directions */
@@ -5675,39 +5702,39 @@ let L = class extends k {
 };
 R([
   n("direction", { type: "string", default: "row" })
-], L.prototype, "direction", 2);
+], S.prototype, "direction", 2);
 R([
   n("float", { type: "string" })
-], L.prototype, "float", 2);
+], S.prototype, "float", 2);
 R([
   n("align", { type: "string" })
-], L.prototype, "align", 2);
+], S.prototype, "align", 2);
 R([
   n("gap", { type: "string" })
-], L.prototype, "gap", 2);
+], S.prototype, "gap", 2);
 R([
   n("variant", { type: "string" })
-], L.prototype, "variant", 2);
+], S.prototype, "variant", 2);
 R([
   n("rounded", { type: "boolean" })
-], L.prototype, "rounded", 2);
+], S.prototype, "rounded", 2);
 R([
   n("i18n-aria-label", { type: "string" })
-], L.prototype, "i18nAriaLabel", 2);
-L = 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--)
-    (a = e[o]) && (r = (i ? a(t, s, r) : a(r)) || r);
-  return i && r && Le(t, s, r), r;
+], S.prototype, "i18nAriaLabel", 2);
+S = R([
+  E("zs3-toolbar"),
+  T(De),
+  Mt(".toolbar"),
+  Yt(":host")
+], S);
+customElements.get("zs3-toolbar") || customElements.define("zs3-toolbar", S);
+typeof window < "u" && (window.$Toolbar = S);
+var He = Object.defineProperty, Re = Object.getOwnPropertyDescriptor, O = (e, t, s, i) => {
+  for (var o = i > 1 ? void 0 : i ? Re(t, s) : t, r = e.length - 1, a; r >= 0; r--)
+    (a = e[r]) && (o = (i ? a(t, s, o) : a(o)) || o);
+  return i && o && He(t, s, o), o;
 };
-let C = class extends k {
+let k = class extends P {
   /**
    * Initializes the window component
    */
@@ -5727,21 +5754,21 @@ let C = class extends k {
    * After mount setup
    */
   afterMount() {
-    this.setupEventListeners(), this._shadowRoot && y.updateRoot(this._shadowRoot);
+    this.setupEventListeners(), this._shadowRoot && w.updateRoot(this._shadowRoot);
   }
   /**
    * 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 });
     });
@@ -5839,12 +5866,24 @@ let C = class extends k {
                     transition: background-color var(--zs3-transition-fast, 150ms ease-in-out);
                 }
 
-                .controls button:hover {
-                    background-color: rgba(255, 255, 255, 0.3);
+                @media (hover: hover) {
+                    .controls button:hover {
+                        background-color: rgba(255, 255, 255, 0.3);
+                    }
+
+                    .btn-close:hover {
+                        background-color: var(--zs3-error-color, #ef4444) !important;
+                    }
                 }
 
-                .btn-close:hover {
-                    background-color: var(--zs3-error-color, #ef4444) !important;
+                /* Zones tàctils mínimes (44px) per a dispositius amb punter gruixut */
+                @media (pointer: coarse) {
+                    .controls button {
+                        min-width: 2.75rem;
+                        min-height: 2.75rem;
+                        width: auto;
+                        height: auto;
+                    }
                 }
 
                 .content {
@@ -5881,28 +5920,28 @@ let C = class extends k {
 };
 O([
   n("title", { type: "string" })
-], C.prototype, "windowTitle", 2);
+], k.prototype, "windowTitle", 2);
 O([
   n("width", { type: "string" })
-], C.prototype, "width", 2);
+], k.prototype, "width", 2);
 O([
   n("height", { type: "string" })
-], C.prototype, "height", 2);
+], k.prototype, "height", 2);
 O([
   n("closable", { type: "boolean" })
-], C.prototype, "closable", 2);
+], k.prototype, "closable", 2);
 O([
   n("minimizable", { type: "boolean" })
-], C.prototype, "minimizable", 2);
+], k.prototype, "minimizable", 2);
 O([
   n("maximizable", { type: "boolean" })
-], C.prototype, "maximizable", 2);
+], k.prototype, "maximizable", 2);
 O([
   n("i18n-title", { type: "string" })
-], C.prototype, "i18nTitle", 2);
-C = O([
-  x("zs3-window"),
-  E([
+], k.prototype, "i18nTitle", 2);
+k = O([
+  E("zs3-window"),
+  T([
     "title",
     "width",
     "height",
@@ -5918,64 +5957,64 @@ C = O([
     "zs3-move-cancel",
     "zs3-move-boundary"
   ])
-], C);
-customElements.get("zs3-window") || customElements.define("zs3-window", C);
-typeof window < "u" && (window.$Window = C);
+], k);
+customElements.get("zs3-window") || customElements.define("zs3-window", k);
+typeof window < "u" && (window.$Window = k);
 export {
-  Y as $,
-  k as $BaseComponent,
-  f as $Button,
-  Et as $Debug,
-  u as $Form,
-  kt as $I18n,
-  z as $Icon,
-  _t as $Log,
+  N as $,
+  P as $BaseComponent,
+  g as $Button,
+  St as $Debug,
+  p as $Form,
+  Ft as $I18n,
+  y as $Icon,
+  kt as $Log,
   H as $LoginForm,
-  M as $Modal,
+  A as $Modal,
   d as $ModalDialog,
-  h as $Notification,
-  xt as $Parameters,
-  Z as $RecoverPasswordForm,
-  Q as $RegisterForm,
-  it as $SelectLocale,
-  rt as $SelectTheme,
-  Tt as $Storage,
-  Ae as $Store,
-  L as $Toolbar,
-  C as $Window,
-  $e as $env,
-  x as Component,
-  nt as DEFAULT_FALLBACK_LOCALE,
-  at as DEFAULT_LOCALE,
-  At as DIContainer,
-  $t as EventBus,
-  vt as Float,
-  Oe as HttpClient,
-  U as HttpError,
-  Ft as Move,
-  E as ObservedAttributes,
-  Re as Router,
-  Ct as ThemeChangeEvent,
-  K as ThemeManager,
-  T as ZS3,
-  Lt as debug,
-  ot as defaultTranslations,
-  He as diContainer,
-  Bt as disableMove,
-  De as eventBus,
-  Pt as float,
-  Ve as generateEvent,
-  ke as getCSSVariable,
-  Fe as getMoveDirection,
-  St as getRegisteredComponents,
-  y as i18n,
-  bt as initThemeSystem,
-  Be as isMoveEnabled,
-  lt as log,
-  Ot as move,
-  Mt as params,
-  Pe as setCSSVariable,
-  X as storage,
-  G as themeManager,
-  Se as withThemeSupport
+  u as $Notification,
+  At as $Parameters,
+  st as $RecoverPasswordForm,
+  et as $RegisterForm,
+  lt as $SelectLocale,
+  ct as $SelectTheme,
+  Pt as $Storage,
+  Be as $Store,
+  S as $Toolbar,
+  k as $Window,
+  Oe as $env,
+  E as Component,
+  mt as DEFAULT_FALLBACK_LOCALE,
+  pt as DEFAULT_LOCALE,
+  Bt as DIContainer,
+  Ot as EventBus,
+  Mt as Float,
+  qe as HttpClient,
+  J as HttpError,
+  Yt as Move,
+  T as ObservedAttributes,
+  Ue as Router,
+  Rt as ThemeChangeEvent,
+  X as ThemeManager,
+  C as ZS3,
+  Ht as debug,
+  ut as defaultTranslations,
+  Ne as diContainer,
+  Kt as disableMove,
+  je as eventBus,
+  It as float,
+  We as generateEvent,
+  Fe as getCSSVariable,
+  Ye as getMoveDirection,
+  Vt as getRegisteredComponents,
+  w as i18n,
+  Tt as initThemeSystem,
+  Ke as isMoveEnabled,
+  ft as log,
+  qt as move,
+  Dt as params,
+  Ie as setCSSVariable,
+  tt as storage,
+  Z as themeManager,
+  Ve as withThemeSupport
 };