@diniz/webcomponents 1.1.5 → 1.1.6

package/dist/webcomponents.es.js

@@ -1,8 +1,8 @@
-var $ = Object.defineProperty;
-var A = (l, a, t) => a in l ? $(l, a, { enumerable: !0, configurable: !0, writable: !0, value: t }) : l[a] = t;
-var u = (l, a, t) => A(l, typeof a != "symbol" ? a + "" : a, t);
-import k from "feather-icons";
-function C(l) {
+var A = Object.defineProperty;
+var C = (l, a, t) => a in l ? A(l, a, { enumerable: !0, configurable: !0, writable: !0, value: t }) : l[a] = t;
+var u = (l, a, t) => C(l, typeof a != "symbol" ? a + "" : a, t);
+import w from "feather-icons";
+function y(l) {
   let a = l;
   const t = /* @__PURE__ */ new Set();
   return {
@@ -21,9 +21,38 @@ class g extends HTMLElement {
     this.attachShadow({ mode: "open" }), this.state = {}, this.signalUnsubs = /* @__PURE__ */ new Set();
   }
   useSignal(t) {
-    const e = C(t), s = e.subscribe(() => this.render());
+    const e = y(t), s = e.subscribe(() => this.render());
     return this.signalUnsubs.add(s), e;
   }
+  /**
+   * Create a signal bound to a specific HTML element
+   * Automatically updates the element's textContent when the signal value changes
+   * @param elementId - The ID of the HTML element to bind to
+   * @param initial - The initial value
+   * @returns A signal that auto-updates the element
+   * 
+   * @example
+   * ```typescript
+   * private count = this.useSignalHtml('countValue', 0);
+   * 
+   * private increment() {
+   *   this.count.set(this.count.get() + 1);
+   *   // Element with id="countValue" automatically updates
+   * }
+   * ```
+   */
+  useSignalHtml(t, e) {
+    const s = y(e), i = s.subscribe((n) => {
+      var o;
+      const r = (o = this.shadowRoot) == null ? void 0 : o.getElementById(t);
+      r && (r.textContent = String(n));
+    });
+    return this.signalUnsubs.add(i), requestAnimationFrame(() => {
+      var r;
+      const n = (r = this.shadowRoot) == null ? void 0 : r.getElementById(t);
+      n && (n.textContent = String(e));
+    }), s;
+  }
   setState(t) {
     this.state = { ...this.state, ...t }, this.render();
   }
@@ -54,30 +83,30 @@ class E extends g {
     const t = a._clickHandler;
     t && a.removeEventListener("click", t);
     const e = (s) => {
-      const r = this.getType();
+      const i = this.getType();
       if (this.hasAttribute("disabled")) {
         s.preventDefault(), s.stopPropagation();
         return;
       }
-      if (r === "submit") {
+      if (i === "submit") {
         s.preventDefault(), s.stopPropagation();
-        let i = this.closest("form");
-        if (!i) {
+        let r = this.closest("form");
+        if (!r) {
           let o = this.parentElement;
           for (; o; ) {
             if (o.tagName === "FORM") {
-              i = o;
+              r = o;
               break;
             }
             o = o.parentElement;
           }
         }
-        if (i) {
+        if (r) {
           const o = new Event("submit", {
             bubbles: !0,
             cancelable: !0
           });
-          i.dispatchEvent(o);
+          r.dispatchEvent(o);
         }
       }
     };
@@ -99,19 +128,19 @@ class E extends g {
     const a = this.getAttribute("icon");
     if (!a) return null;
     const t = a.trim();
-    return { html: `<span class="btn-icon">${((s = k.icons[t]) == null ? void 0 : s.toSvg()) || ""}</span>`, name: t };
+    return { html: `<span class="btn-icon">${((s = w.icons[t]) == null ? void 0 : s.toSvg()) || ""}</span>`, name: t };
   }
   getIconPosition() {
     return this.getAttribute("icon-position") === "right" ? "right" : "left";
   }
   render() {
-    const a = this.getVariant(), t = this.getSize(), e = this.hasAttribute("disabled"), s = this.getType(), r = this.getIcon(), n = this.getIconPosition(), i = r !== null, o = r ? r.html : "", c = this.innerHTML.trim(), d = i && !c;
+    const a = this.getVariant(), t = this.getSize(), e = this.hasAttribute("disabled"), s = this.getType(), i = this.getIcon(), n = this.getIconPosition(), r = i !== null, o = i ? i.html : "", c = this.innerHTML.trim(), d = r && !c;
     let p;
-    i && c ? p = n === "left" ? `${o}<span>${c}</span>` : `<span>${c}</span>${o}` : i ? p = o : p = c, this.shadowRoot.innerHTML = `
+    r && c ? p = n === "left" ? `${o}<span>${c}</span>` : `<span>${c}</span>${o}` : r ? p = o : p = c, this.shadowRoot.innerHTML = `
 			<style>${f}</style>
 			<button
 				part="button"
-				class="btn ${a} ${t}${i ? " has-icon" : ""}${d ? " icon-only" : ""}"
+				class="btn ${a} ${t}${r ? " has-icon" : ""}${d ? " icon-only" : ""}"
 				type="${s}"
 				${e ? "disabled" : ""}
 			>
@@ -248,19 +277,19 @@ class S extends g {
     return this.hasAttribute("type") || this.hasAttribute("label") || this.hasAttribute("placeholder") || this.hasAttribute("required") || this.hasAttribute("pattern") || this.hasAttribute("disabled") || this.hasAttribute("name") || this.hasAttribute("minlength") || this.hasAttribute("maxlength") || this.hasAttribute("min") || this.hasAttribute("max") || this.hasAttribute("error-message") || this.hasAttribute("custom-error") || this.hasAttribute("validate");
   }
   render() {
-    const t = this.getType(), e = this.getLabel(), s = this.getPlaceholder(), r = this.getName(), n = this.getErrorMessage(), i = this.hasAttribute("required"), o = this.getAttribute("pattern"), c = this.getAttribute("minlength"), d = this.getAttribute("maxlength"), p = this.getAttribute("min"), h = this.getAttribute("max"), b = this.hasAttribute("disabled"), m = !this.state.valid && this.state.touched, v = e !== "";
+    const t = this.getType(), e = this.getLabel(), s = this.getPlaceholder(), i = this.getName(), n = this.getErrorMessage(), r = this.hasAttribute("required"), o = this.getAttribute("pattern"), c = this.getAttribute("minlength"), d = this.getAttribute("maxlength"), p = this.getAttribute("min"), h = this.getAttribute("max"), b = this.hasAttribute("disabled"), m = !this.state.valid && this.state.touched, v = e !== "";
     this.shadowRoot.innerHTML = `
 			<style>${f}</style>
 			<div class="input-wrapper${m ? " invalid" : ""}${b ? " disabled" : ""}">
-				${v ? `<label class="input-label">${e}${i ? " *" : ""}</label>` : ""}
+				${v ? `<label class="input-label">${e}${r ? " *" : ""}</label>` : ""}
 				<input
 					part="input"
 					class="input-field"
 					type="${t}"
 					placeholder="${s}"
-					name="${r}"
+					name="${i}"
 					.value="${this.state.value}"
-					${i ? "required" : ""}
+					${r ? "required" : ""}
 					${o ? `pattern="${o}"` : ""}
 					${c ? `minlength="${c}"` : ""}
 					${d ? `maxlength="${d}"` : ""}
@@ -268,9 +297,9 @@ class S extends g {
 					${h ? `max="${h}"` : ""}
 					${b ? "disabled" : ""}
 					aria-invalid="${m}"
-					aria-describedby="${r}-error"
+					aria-describedby="${i}-error"
 				/>
-				<span class="input-error${m && n ? "" : " hidden"}" id="${r}-error" role="alert">${n}</span>
+				<span class="input-error${m && n ? "" : " hidden"}" id="${i}-error" role="alert">${n}</span>
 			</div>
 		`, this.inputEl = this.shadowRoot.querySelector(".input-field"), this.inputEl && (this.inputEl.addEventListener("input", this.handleInput.bind(this)), this.inputEl.addEventListener("blur", this.handleBlur.bind(this)));
   }
@@ -292,15 +321,15 @@ class L extends g {
     return { columns: this.columns, rows: this.rows };
   }
   render() {
-    const t = this.columns.filter((r) => r.visible !== !1), e = t.map(
-      (r) => `<th class="align-${r.align ?? "left"}">${r.label}</th>`
+    const t = this.columns.filter((i) => i.visible !== !1), e = t.map(
+      (i) => `<th class="align-${i.align ?? "left"}">${i.label}</th>`
     ).join(""), s = this.rows.map(
-      (r, n) => `<tr data-row-index="${n}">${t.map(
-        (i) => i.actions ? `<td class="align-center actions-cell">
-										${i.actions.edit ? `<ui-button variant="primary" class='action-btn' icon='edit' size="sm" data-action="edit" data-row-index="${n}">Edit</ui-button>` : ""}
-										${i.actions.delete ? `<ui-button variant="danger" class='action-btn' icon='trash' size="sm" data-action="delete" data-row-index="${n}">Delete</ui-button>` : ""}
-									</td>` : `<td class="align-${i.align ?? "left"}">${String(
-          r[i.key] ?? ""
+      (i, n) => `<tr data-row-index="${n}">${t.map(
+        (r) => r.actions ? `<td class="align-center actions-cell">
+										${r.actions.edit ? `<ui-button variant="primary" class='action-btn' icon='edit' size="sm" data-action="edit" data-row-index="${n}">Edit</ui-button>` : ""}
+										${r.actions.delete ? `<ui-button variant="danger" class='action-btn' icon='trash' size="sm" data-action="delete" data-row-index="${n}">Delete</ui-button>` : ""}
+									</td>` : `<td class="align-${r.align ?? "left"}">${String(
+          i[r.key] ?? ""
         )}</td>`
       ).join("")}</tr>`
     ).join("");
@@ -312,9 +341,9 @@ class L extends g {
 					<tbody>${s}</tbody>
 				</table>
 			</div>
-		`, this.shadowRoot.querySelectorAll(".action-btn").forEach((r) => {
-      r.addEventListener("click", (n) => {
-        const i = n.currentTarget, o = i.dataset.action, c = parseInt(i.dataset.rowIndex || "0", 10), d = o === "edit" ? "edit-action" : "delete-action";
+		`, this.shadowRoot.querySelectorAll(".action-btn").forEach((i) => {
+      i.addEventListener("click", (n) => {
+        const r = n.currentTarget, o = r.dataset.action, c = parseInt(r.dataset.rowIndex || "0", 10), d = o === "edit" ? "edit-action" : "delete-action";
         this.dispatchEvent(new CustomEvent(d, {
           bubbles: !0,
           composed: !0,
@@ -352,7 +381,7 @@ class z extends g {
     if (!this.shadowRoot) return;
     const t = this.shadowRoot.querySelector(".formatted-input"), e = this.shadowRoot.querySelector('input[type="date"]');
     if (t && e) {
-      const s = this.getValue(), r = this.getFormat(), n = this.formatDate(s, r);
+      const s = this.getValue(), i = this.getFormat(), n = this.formatDate(s, i);
       t.value = n, e.value = s;
     }
   }
@@ -385,16 +414,16 @@ class z extends g {
     if (!t) return "";
     const s = t.split("-");
     if (s.length !== 3) return t;
-    const [r, n, i] = s;
+    const [i, n, r] = s;
     switch (e) {
       case "DD/MM/YYYY":
-        return `${i}/${n}/${r}`;
+        return `${r}/${n}/${i}`;
       case "MM/DD/YYYY":
-        return `${n}/${i}/${r}`;
+        return `${n}/${r}/${i}`;
       case "DD-MM-YYYY":
-        return `${i}-${n}-${r}`;
+        return `${r}-${n}-${i}`;
       case "MM-DD-YYYY":
-        return `${n}-${i}-${r}`;
+        return `${n}-${r}-${i}`;
       case "YYYY-MM-DD":
       default:
         return t;
@@ -405,40 +434,40 @@ class z extends g {
    */
   parseDate(t, e) {
     if (!t) return "";
-    let s, r, n, i;
+    let s, i, n, r;
     switch (e) {
       case "DD/MM/YYYY":
         if (s = t.split("/"), s.length !== 3) return "";
-        [i, n, r] = s;
+        [r, n, i] = s;
         break;
       case "MM/DD/YYYY":
         if (s = t.split("/"), s.length !== 3) return "";
-        [n, i, r] = s;
+        [n, r, i] = s;
         break;
       case "DD-MM-YYYY":
         if (s = t.split("-"), s.length !== 3) return "";
-        [i, n, r] = s;
+        [r, n, i] = s;
         break;
       case "MM-DD-YYYY":
         if (s = t.split("-"), s.length !== 3) return "";
-        [n, i, r] = s;
+        [n, r, i] = s;
         break;
       case "YYYY-MM-DD":
       default:
         return t;
     }
-    return n = n.padStart(2, "0"), i = i.padStart(2, "0"), `${r}-${n}-${i}`;
+    return n = n.padStart(2, "0"), r = r.padStart(2, "0"), `${i}-${n}-${r}`;
   }
   attachEventListeners() {
     if (!this.shadowRoot) return;
     const t = this.shadowRoot.querySelector(".formatted-input"), e = this.shadowRoot.querySelector('input[type="date"]'), s = this.shadowRoot.querySelector(".calendar-btn");
     if (!t || !e) return;
-    const r = () => {
-      const n = t.value, i = this.getFormat(), o = this.parseDate(n, i);
+    const i = () => {
+      const n = t.value, r = this.getFormat(), o = this.parseDate(n, r);
       this.isValidDate(o) ? (e.value = o, t.classList.remove("invalid"), this.dispatchDateChange(o)) : n === "" ? (e.value = "", t.classList.remove("invalid"), this.dispatchDateChange("")) : t.classList.add("invalid");
     };
-    t.addEventListener("blur", r), t.addEventListener("keydown", (n) => {
-      n.key === "Enter" && (r(), t.blur());
+    t.addEventListener("blur", i), t.addEventListener("keydown", (n) => {
+      n.key === "Enter" && (i(), t.blur());
     }), e.addEventListener("change", (n) => {
       const o = n.target.value, c = this.getFormat(), d = this.formatDate(o, c);
       t.value = d, t.classList.remove("invalid"), this.dispatchDateChange(o);
@@ -446,8 +475,8 @@ class z extends g {
       n.preventDefault(), n.stopPropagation(), e.style.pointerEvents = "auto";
       try {
         typeof e.showPicker == "function" ? e.showPicker() : (e.focus(), e.click());
-      } catch (i) {
-        console.log("Date picker error:", i), e.focus(), e.click();
+      } catch (r) {
+        console.log("Date picker error:", r), e.focus(), e.click();
       } finally {
         setTimeout(() => {
           e.style.pointerEvents = "none";
@@ -500,7 +529,7 @@ class z extends g {
     this.setAttribute("value", "");
   }
   render() {
-    const t = this.getValue(), e = this.getFormat(), s = this.getMin(), r = this.getMax(), n = this.isDisabled(), i = this.getPlaceholder(), o = this.getLabel(), c = this.formatDate(t, e), d = o !== "";
+    const t = this.getValue(), e = this.getFormat(), s = this.getMin(), i = this.getMax(), n = this.isDisabled(), r = this.getPlaceholder(), o = this.getLabel(), c = this.formatDate(t, e), d = o !== "";
     this.shadowRoot.innerHTML = `
 			<style>${f}</style>
 			<div class="date-picker-container">
@@ -511,7 +540,7 @@ class z extends g {
 						class="formatted-input"
 						part="input"
 						value="${c}"
-						placeholder="${i}"
+						placeholder="${r}"
 						${n ? "disabled" : ""}
 					/>
 					<button 
@@ -529,7 +558,7 @@ class z extends g {
 						class="hidden-date-input"
 						value="${t}"
 						${s ? `min="${s}"` : ""}
-						${r ? `max="${r}"` : ""}
+						${i ? `max="${i}"` : ""}
 						${n ? "disabled" : ""}
 					/>
 				</div>
@@ -604,17 +633,17 @@ class I extends g {
   getPageNumbers() {
     const t = this.totalPages, e = this._currentPage;
     if (t <= 7)
-      return Array.from({ length: t }, (r, n) => n + 1);
+      return Array.from({ length: t }, (i, n) => n + 1);
     const s = [];
     return e <= 3 ? s.push(1, 2, 3, 4, "...", t) : e >= t - 2 ? s.push(1, "...", t - 3, t - 2, t - 1, t) : s.push(1, "...", e - 1, e, e + 1, "...", t), s;
   }
   render() {
-    const t = this.totalPages, e = this._currentPage, s = this.getPageNumbers(), r = (e - 1) * this._pageSize + 1, n = Math.min(e * this._pageSize, this._total);
+    const t = this.totalPages, e = this._currentPage, s = this.getPageNumbers(), i = (e - 1) * this._pageSize + 1, n = Math.min(e * this._pageSize, this._total);
     this.shadowRoot.innerHTML = `
 			<style>${f}</style>
 			<div class="pagination-container">
 				<div class="pagination-info">
-					${this._total > 0 ? `Showing ${r} to ${n} of ${this._total}` : "No results"}
+					${this._total > 0 ? `Showing ${i} to ${n} of ${this._total}` : "No results"}
 				</div>
 				${t > 1 ? `
 				<nav class="pagination" role="navigation" aria-label="Pagination">
@@ -628,14 +657,14 @@ class I extends g {
 							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
 						</svg>
 					</button>
-					${s.map((i) => i === "..." ? '<button class="page-btn ellipsis" disabled>...</button>' : `
+					${s.map((r) => r === "..." ? '<button class="page-btn ellipsis" disabled>...</button>' : `
 							<button 
-								class="page-btn ${i === e ? "active" : ""}"
-								data-page="${i}"
-								aria-label="Page ${i}"
-								${i === e ? 'aria-current="page"' : ""}
+								class="page-btn ${r === e ? "active" : ""}"
+								data-page="${r}"
+								aria-label="Page ${r}"
+								${r === e ? 'aria-current="page"' : ""}
 							>
-								${i}
+								${r}
 							</button>
 						`).join("")}
 					<button 
@@ -657,13 +686,13 @@ class I extends g {
     this.shadowRoot && this.shadowRoot.addEventListener("click", (t) => {
       const s = t.target.closest(".page-btn");
       if (!s || s.disabled) return;
-      const r = s.dataset.page;
-      if (r === "prev")
+      const i = s.dataset.page;
+      if (i === "prev")
         this.handlePageChange(this._currentPage - 1);
-      else if (r === "next")
+      else if (i === "next")
         this.handlePageChange(this._currentPage + 1);
-      else if (r) {
-        const n = parseInt(r, 10);
+      else if (i) {
+        const n = parseInt(i, 10);
         isNaN(n) || this.handlePageChange(n);
       }
     });
@@ -713,7 +742,7 @@ class M extends g {
 			</style>
 
 			<div class="modal-backdrop ${t ? "open" : ""}" part="backdrop">
-				<div class="modal-content ${s}" part="content" @click="${(i) => i.stopPropagation()}">
+				<div class="modal-content ${s}" part="content" @click="${(r) => r.stopPropagation()}">
 					${e ? `
 						<div class="modal-header" part="header">
 							<h2 class="modal-title">${e}</h2>
@@ -736,8 +765,8 @@ class M extends g {
 				</div>
 			</div>
 		`;
-    const r = this.shadowRoot.querySelector(".modal-backdrop"), n = this.shadowRoot.querySelector(".modal-close");
-    r == null || r.addEventListener("click", (i) => this.handleBackdropClick(i)), n == null || n.addEventListener("click", () => this.close());
+    const i = this.shadowRoot.querySelector(".modal-backdrop"), n = this.shadowRoot.querySelector(".modal-close");
+    i == null || i.addEventListener("click", (r) => this.handleBackdropClick(r)), n == null || n.addEventListener("click", () => this.close());
   }
 }
 customElements.define("ui-modal", M);
@@ -799,12 +828,12 @@ class R extends g {
     return (e == null ? void 0 : e.label) || this.getAttribute("placeholder") || "Select an option";
   }
   render() {
-    const t = this.isOpen.get(), e = this.hasAttribute("disabled"), s = this.hasAttribute("searchable"), r = this.getAttribute("label") || "", n = this.getSelectedLabel(), i = this.getFilteredOptions(), o = this.selectedValue.get() !== "";
+    const t = this.isOpen.get(), e = this.hasAttribute("disabled"), s = this.hasAttribute("searchable"), i = this.getAttribute("label") || "", n = this.getSelectedLabel(), r = this.getFilteredOptions(), o = this.selectedValue.get() !== "";
     this.shadowRoot.innerHTML = `
 			<style>${f}</style>
 
 			<div class="select-container">
-				${r ? `<label class="select-label">${r}</label>` : ""}
+				${i ? `<label class="select-label">${i}</label>` : ""}
 				
 				<div class="select-trigger ${t ? "open" : ""}" part="trigger" tabindex="0" ${e ? "disabled" : ""}>
 					<span class="select-placeholder ${o ? "has-selection" : ""}">${n}</span>
@@ -825,7 +854,7 @@ class R extends g {
 						>
 					` : ""}
 					
-					${i.length > 0 ? i.map((h) => `
+					${r.length > 0 ? r.map((h) => `
 						<div 
 							class="select-option ${h.value === this.selectedValue.get() ? "selected" : ""} ${h.disabled ? "disabled" : ""}"
 							data-value="${h.value}"
@@ -885,7 +914,7 @@ class D extends g {
     this.indeterminate.set(t), t ? this.setAttribute("indeterminate", "") : this.removeAttribute("indeterminate");
   }
   render() {
-    const t = this.checked.get(), e = this.indeterminate.get(), s = this.hasAttribute("disabled"), r = this.getAttribute("label") || "", n = this.getAttribute("size") || "md", i = {
+    const t = this.checked.get(), e = this.indeterminate.get(), s = this.hasAttribute("disabled"), i = this.getAttribute("label") || "", n = this.getAttribute("size") || "md", r = {
       sm: "size-sm",
       md: "size-md",
       lg: "size-lg"
@@ -893,13 +922,13 @@ class D extends g {
     this.shadowRoot.innerHTML = `
 			<style>${f}</style>
 
-			<label class="checkbox-container ${i[n]}">
+			<label class="checkbox-container ${r[n]}">
 				<input 
 					type="checkbox" 
 					${t ? "checked" : ""}
 					${s ? "disabled" : ""}
 				>
-				<div class="checkbox-box ${i[n]} ${t ? "checked" : ""} ${e ? "indeterminate" : ""} ${s ? "disabled" : ""}" part="checkbox">
+				<div class="checkbox-box ${r[n]} ${t ? "checked" : ""} ${e ? "indeterminate" : ""} ${s ? "disabled" : ""}" part="checkbox">
 					<svg class="checkbox-icon check" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3">
 						<polyline points="20 6 9 17 4 12"></polyline>
 					</svg>
@@ -907,7 +936,7 @@ class D extends g {
 						<line x1="5" y1="12" x2="19" y2="12"></line>
 					</svg>
 				</div>
-				${r ? `<span class="checkbox-label">${r}</span>` : "<slot></slot>"}
+				${i ? `<span class="checkbox-label">${i}</span>` : "<slot></slot>"}
 			</label>
 		`;
     const o = this.shadowRoot.querySelector(".checkbox-container");
@@ -929,8 +958,8 @@ class Y extends g {
       const s = e.closest('[slot="tab"][data-tab]');
       if (!s) return;
       t.preventDefault();
-      const r = s.getAttribute("data-tab");
-      r && this.setActive(r);
+      const i = s.getAttribute("data-tab");
+      i && this.setActive(i);
     });
   }
   static get observedAttributes() {
@@ -964,43 +993,43 @@ class Y extends g {
   }
   getActiveId(t) {
     const e = this.getAttribute("active");
-    if (e && t.some((r) => r.getAttribute("data-tab") === e))
+    if (e && t.some((i) => i.getAttribute("data-tab") === e))
       return e;
-    if (this.activeId && t.some((r) => r.getAttribute("data-tab") === this.activeId))
+    if (this.activeId && t.some((i) => i.getAttribute("data-tab") === this.activeId))
       return this.activeId;
-    const s = t.find((r) => r.getAttribute("data-tab"));
+    const s = t.find((i) => i.getAttribute("data-tab"));
     return (s == null ? void 0 : s.getAttribute("data-tab")) ?? null;
   }
   syncTabs() {
     const t = this.getTabs(), e = this.getPanels();
     if (t.length === 0) return;
     const s = this.getActiveId(t);
-    s && (this.activeId = s, this.getAttribute("active") !== s && this.setAttribute("active", s), t.forEach((r) => {
-      const n = r.getAttribute("data-tab");
+    s && (this.activeId = s, this.getAttribute("active") !== s && this.setAttribute("active", s), t.forEach((i) => {
+      const n = i.getAttribute("data-tab");
       if (!n) return;
-      const i = r.id || `tab-${n}`, o = n === s;
-      r.id = i, r.setAttribute("role", "tab"), r.setAttribute("aria-selected", String(o)), r.setAttribute("tabindex", o ? "0" : "-1"), r.classList.toggle("is-active", o);
-    }), e.forEach((r) => {
-      const n = r.getAttribute("data-tab");
+      const r = i.id || `tab-${n}`, o = n === s;
+      i.id = r, i.setAttribute("role", "tab"), i.setAttribute("aria-selected", String(o)), i.setAttribute("tabindex", o ? "0" : "-1"), i.classList.toggle("is-active", o);
+    }), e.forEach((i) => {
+      const n = i.getAttribute("data-tab");
       if (!n) return;
-      const i = r.id || `panel-${n}`, o = n === s;
-      r.id = i, r.setAttribute("role", "tabpanel"), r.toggleAttribute("hidden", !o), r.classList.toggle("is-active", o);
+      const r = i.id || `panel-${n}`, o = n === s;
+      i.id = r, i.setAttribute("role", "tabpanel"), i.toggleAttribute("hidden", !o), i.classList.toggle("is-active", o);
       const c = t.find((d) => d.getAttribute("data-tab") === n);
-      c && (c.setAttribute("aria-controls", i), r.setAttribute("aria-labelledby", c.id));
+      c && (c.setAttribute("aria-controls", r), i.setAttribute("aria-labelledby", c.id));
     }), this.updateIndicator(t, s));
   }
   updateIndicator(t, e) {
     if (!this.indicator) return;
     const s = t.find((o) => o.getAttribute("data-tab") === e);
     if (!s) return;
-    const r = this.shadowRoot.querySelector(".tablist");
-    if (!r) return;
-    s.getBoundingClientRect(), r.getBoundingClientRect();
+    const i = this.shadowRoot.querySelector(".tablist");
+    if (!i) return;
+    s.getBoundingClientRect(), i.getBoundingClientRect();
     const n = t.indexOf(s);
-    let i = 0;
+    let r = 0;
     for (let o = 0; o < n; o++)
-      i += t[o].offsetWidth;
-    this.indicator.style.transform = `translateX(${i}px)`, this.indicator.style.width = `${s.offsetWidth}px`;
+      r += t[o].offsetWidth;
+    this.indicator.style.transform = `translateX(${r}px)`, this.indicator.style.width = `${s.offsetWidth}px`;
   }
   render() {
     this.shadowRoot.innerHTML = `
@@ -1049,10 +1078,10 @@ class H extends g {
     return a === "none" || a === "sm" || a === "md" || a === "lg" || a === "xl" ? a : "sm";
   }
   render() {
-    const a = this.getShadow(), t = this.getShadowColor(), e = this.getRounded(), s = this.getVariant(), r = this.getElevation();
+    const a = this.getShadow(), t = this.getShadowColor(), e = this.getRounded(), s = this.getVariant(), i = this.getElevation();
     let n = "none";
     if (a)
-      switch (r) {
+      switch (i) {
         case "sm":
           n = `0 1px 2px rgba(${t}, 0.05), 0 1px 3px rgba(${t}, 0.1)`;
           break;
@@ -1078,7 +1107,7 @@ class H extends g {
         }
 
         .card.custom-shadow:hover {
-          box-shadow: ${a && r !== "none" ? n.replace(/rgba\(([^)]+), ([\d.]+)\)/g, (i, o, c) => `rgba(${o}, ${Math.min(parseFloat(c) * 1.3, 0.25)})`) : "none"};
+          box-shadow: ${a && i !== "none" ? n.replace(/rgba\(([^)]+), ([\d.]+)\)/g, (r, o, c) => `rgba(${o}, ${Math.min(parseFloat(c) * 1.3, 0.25)})`) : "none"};
         }
       </style>
       <div class="card ${s} ${e ? "rounded" : "square"} ${a ? "custom-shadow" : "no-shadow"}">
@@ -1109,14 +1138,14 @@ class O extends g {
     return t === "top-left" || t === "bottom-right" || t === "bottom-left" || t === "top-center" || t === "bottom-center" ? t : "top-right";
   }
   getIcon(t) {
-    var r;
+    var i;
     const s = {
       success: "check-circle",
       error: "x-circle",
       warning: "alert-triangle",
       info: "info"
     }[t];
-    return ((r = k.icons[s]) == null ? void 0 : r.toSvg()) || "";
+    return ((i = w.icons[s]) == null ? void 0 : i.toSvg()) || "";
   }
   /**
    * Show a toast notification
@@ -1127,17 +1156,17 @@ class O extends g {
     const {
       title: e,
       description: s = "",
-      type: r = "info",
+      type: i = "info",
       duration: n = 5e3,
-      closable: i = !0
-    } = t, o = `toast-${++this.toastCounter}`, c = this.getIcon(r), d = document.createElement("div");
-    d.className = `toast ${r}`, d.setAttribute("role", "alert"), d.setAttribute("aria-live", "polite"), d.innerHTML = `
+      closable: r = !0
+    } = t, o = `toast-${++this.toastCounter}`, c = this.getIcon(i), d = document.createElement("div");
+    d.className = `toast ${i}`, d.setAttribute("role", "alert"), d.setAttribute("aria-live", "polite"), d.innerHTML = `
       <div class="toast-icon">${c}</div>
       <div class="toast-content">
         <div class="toast-title">${this.escapeHtml(e)}</div>
         ${s ? `<div class="toast-description">${this.escapeHtml(s)}</div>` : ""}
       </div>
-      ${i ? `
+      ${r ? `
         <button class="toast-close" aria-label="Close notification">
           <svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
             <line x1="18" y1="6" x2="6" y2="18"></line>
@@ -1152,7 +1181,7 @@ class O extends g {
       ` : ""}
     `;
     const p = this.shadowRoot.querySelector(".toast-container");
-    if (p && p.appendChild(d), i) {
+    if (p && p.appendChild(d), r) {
       const b = d.querySelector(".toast-close");
       b == null || b.addEventListener("click", () => this.dismiss(o));
     }
@@ -1270,12 +1299,12 @@ class F extends g {
     const s = Math.min(Math.max(t, 1), e);
     if (s === this.getActiveIndex(e)) return;
     this.setAttribute("active", String(s));
-    const r = this.steps[s - 1], n = this.resolveState(r, s - 1, s);
+    const i = this.steps[s - 1], n = this.resolveState(i, s - 1, s);
     this.dispatchEvent(
       new CustomEvent("step-change", {
         bubbles: !0,
         composed: !0,
-        detail: { index: s, step: r, state: n }
+        detail: { index: s, step: i, state: n }
       })
     );
   }
@@ -1284,33 +1313,33 @@ class F extends g {
     return e.textContent = t, e.innerHTML;
   }
   render() {
-    const t = this.getOrientation(), e = this.getSize(), s = this.steps, r = s.length, n = this.getActiveIndex(r);
+    const t = this.getOrientation(), e = this.getSize(), s = this.steps, i = s.length, n = this.getActiveIndex(i);
     this.shadowRoot.innerHTML = `
 			<style>${f}</style>
 			<div class="stepper-wrap">
-				${r === 0 ? '<div class="stepper-empty">No steps configured</div>' : `
+				${i === 0 ? '<div class="stepper-empty">No steps configured</div>' : `
 					<ol class="stepper ${t} ${e}" role="list">
-						${s.map((i, o) => {
-      const c = this.resolveState(i, o, n), d = c === "active", p = i.disabled ? "disabled" : "";
+						${s.map((r, o) => {
+      const c = this.resolveState(r, o, n), d = c === "active", p = r.disabled ? "disabled" : "";
       return `
 								<li class="step ${c} ${p}" data-state="${c}">
-									<button class="step-trigger" data-index="${o}" ${i.disabled ? "disabled" : ""} aria-current="${d ? "step" : "false"}">
+									<button class="step-trigger" data-index="${o}" ${r.disabled ? "disabled" : ""} aria-current="${d ? "step" : "false"}">
 										<span class="step-node">${o + 1}</span>
 										<span class="step-text">
-											<span class="step-title">${this.escapeHtml(i.title || `Step ${o + 1}`)}</span>
-											${i.description ? `<span class="step-desc">${this.escapeHtml(i.description)}</span>` : ""}
+											<span class="step-title">${this.escapeHtml(r.title || `Step ${o + 1}`)}</span>
+											${r.description ? `<span class="step-desc">${this.escapeHtml(r.description)}</span>` : ""}
 										</span>
 									</button>
-									${o < r - 1 ? '<span class="step-connector" aria-hidden="true"></span>' : ""}
+									${o < i - 1 ? '<span class="step-connector" aria-hidden="true"></span>' : ""}
 								</li>
 							`;
     }).join("")}
 					</ol>
 				`}
 			</div>
-		`, this.shadowRoot.querySelectorAll(".step-trigger").forEach((i) => {
-      i.addEventListener("click", () => {
-        const o = parseInt(i.dataset.index || "0", 10);
+		`, this.shadowRoot.querySelectorAll(".step-trigger").forEach((r) => {
+      r.addEventListener("click", () => {
+        const o = parseInt(r.dataset.index || "0", 10);
         Number.isNaN(o) || this.setActive(o + 1);
       });
     });
@@ -1376,21 +1405,21 @@ class U extends g {
   }
   syncInputFiles(t, e) {
     const s = new DataTransfer();
-    e.forEach((r) => s.items.add(r)), t.files = s.files;
+    e.forEach((i) => s.items.add(i)), t.files = s.files;
   }
   render() {
-    const t = this.getAccept(), e = this.getLabel(), s = this.getHelper(), r = this.isDisabled(), n = this.isMultiple(), i = this.isDragging.get(), o = this.files.get();
+    const t = this.getAccept(), e = this.getLabel(), s = this.getHelper(), i = this.isDisabled(), n = this.isMultiple(), r = this.isDragging.get(), o = this.files.get();
     this.shadowRoot.innerHTML = `
 			<style>${f}</style>
 			<div class="upload">
 				${e ? `<label class="upload-label">${e}</label>` : ""}
-				<div class="upload-drop ${i ? "dragging" : ""} ${r ? "disabled" : ""}" part="dropzone">
+				<div class="upload-drop ${r ? "dragging" : ""} ${i ? "disabled" : ""}" part="dropzone">
 					<input
 						class="upload-input"
 						type="file"
 						${n ? "multiple" : ""}
 						${t ? `accept="${t}"` : ""}
-						${r ? "disabled" : ""}
+						${i ? "disabled" : ""}
 					>
 					<div class="upload-content">
 						<div class="upload-icon" aria-hidden="true">
@@ -1406,7 +1435,7 @@ class U extends g {
 								${t ? `Accepted: ${t}` : "Any file type supported"}
 							</div>
 						</div>
-						<button class="upload-btn" type="button" ${r ? "disabled" : ""}>Browse</button>
+						<button class="upload-btn" type="button" ${i ? "disabled" : ""}>Browse</button>
 					</div>
 				</div>
 				${s ? `<div class="upload-helper">${s}</div>` : ""}
@@ -1427,12 +1456,12 @@ class U extends g {
 		`;
     const c = this.shadowRoot.querySelector(".upload-drop"), d = this.shadowRoot.querySelector(".upload-input"), p = this.shadowRoot.querySelector(".upload-btn"), h = this.shadowRoot.querySelectorAll(".upload-remove");
     !c || !d || (o.length ? this.syncInputFiles(d, o) : d.value = "", c.addEventListener("dragover", (b) => {
-      r || (b.preventDefault(), this.isDragging.set(!0));
+      i || (b.preventDefault(), this.isDragging.set(!0));
     }), c.addEventListener("dragleave", () => {
       this.isDragging.set(!1);
     }), c.addEventListener("drop", (b) => {
       var v;
-      if (r) return;
+      if (i) return;
       b.preventDefault(), this.isDragging.set(!1);
       const m = Array.from(((v = b.dataTransfer) == null ? void 0 : v.files) ?? []);
       m.length && (this.setFiles(m), this.syncInputFiles(d, this.files.get()));
@@ -1440,10 +1469,10 @@ class U extends g {
       const b = Array.from(d.files ?? []);
       this.setFiles(b);
     }), p == null || p.addEventListener("click", () => {
-      r || d.click();
+      i || d.click();
     }), h.forEach((b) => {
       b.addEventListener("click", () => {
-        const m = parseInt(b.dataset.index || "0", 10), v = this.files.get().filter((X, w) => w !== m);
+        const m = parseInt(b.dataset.index || "0", 10), v = this.files.get().filter((X, $) => $ !== m);
         this.setFiles(v), this.syncInputFiles(d, v);
       });
     }));
@@ -1666,24 +1695,24 @@ class W {
       timeout: this.defaultTimeout,
       ...t
     };
-    for (const i of this.interceptors.request.handlers)
+    for (const r of this.interceptors.request.handlers)
       try {
-        s = await i.onFulfilled(s);
+        s = await r.onFulfilled(s);
       } catch (o) {
-        if (i.onRejected)
-          s = await i.onRejected(o);
+        if (r.onRejected)
+          s = await r.onRejected(o);
         else
           throw o;
       }
-    const r = new AbortController(), n = setTimeout(() => r.abort(), s.timeout || this.defaultTimeout);
+    const i = new AbortController(), n = setTimeout(() => i.abort(), s.timeout || this.defaultTimeout);
     try {
-      const i = {
+      const r = {
         method: s.method,
         headers: s.headers,
-        signal: r.signal
+        signal: i.signal
       };
-      s.body && s.method !== "GET" && (i.body = (typeof s.body == "string", s.body));
-      const o = await fetch(e, i);
+      s.body && s.method !== "GET" && (r.body = (typeof s.body == "string", s.body));
+      const o = await fetch(e, r);
       let c;
       const d = o.headers.get("content-type");
       d != null && d.includes("application/json") ? c = o.ok ? await o.json() : null : d != null && d.includes("text") ? c = await o.text() : c = await o.blob();
@@ -1707,8 +1736,8 @@ class W {
             throw b;
         }
       return p.data;
-    } catch (i) {
-      throw i instanceof Error && i.name === "AbortError" ? new Error(`Request timeout after ${s.timeout}ms`) : i;
+    } catch (r) {
+      throw r instanceof Error && r.name === "AbortError" ? new Error(`Request timeout after ${s.timeout}ms`) : r;
     } finally {
       clearTimeout(n);
     }
@@ -1774,8 +1803,8 @@ function et(l, a) {
 }
 function st(l, a, t, e, s) {
   if (!l) return null;
-  const r = l.querySelector(`#${a}`);
-  return r ? (r.addEventListener(t, e, s), r) : null;
+  const i = l.querySelector(`#${a}`);
+  return i ? (i.addEventListener(t, e, s), i) : null;
 }
 function at(l, a) {
   return x(l, a);
@@ -1787,7 +1816,7 @@ function it(l, a) {
   return x(l, a);
 }
 const J = "input, select, textarea, ui-input, ui-select, ui-date-picker, ui-checkbox, ui-upload";
-function y(l) {
+function k(l) {
   return l.getAttribute("name") || l.getAttribute("id") || "";
 }
 function G(l) {
@@ -1805,50 +1834,50 @@ function G(l) {
   return e || "";
 }
 function ot(l, a = {}) {
-  const { includeDisabled: t = !1, includeEmpty: e = !0 } = a, s = {}, r = /* @__PURE__ */ new Map();
-  l.querySelectorAll('input[type="checkbox"]').forEach((i) => {
-    const o = y(i);
-    o && r.set(o, (r.get(o) || 0) + 1);
+  const { includeDisabled: t = !1, includeEmpty: e = !0 } = a, s = {}, i = /* @__PURE__ */ new Map();
+  l.querySelectorAll('input[type="checkbox"]').forEach((r) => {
+    const o = k(r);
+    o && i.set(o, (i.get(o) || 0) + 1);
   });
   const n = Array.from(l.querySelectorAll(J));
-  for (const i of n) {
-    if (!t && (i.disabled || i.hasAttribute("disabled"))) continue;
-    const o = y(i);
+  for (const r of n) {
+    if (!t && (r.disabled || r.hasAttribute("disabled"))) continue;
+    const o = k(r);
     if (!o) continue;
-    if (i instanceof HTMLInputElement) {
-      const d = i.type;
+    if (r instanceof HTMLInputElement) {
+      const d = r.type;
       if (d === "checkbox") {
-        if ((r.get(o) || 0) > 1) {
+        if ((i.get(o) || 0) > 1) {
           const h = s[o] || [];
-          i.checked && h.push(i.value || "on"), s[o] = h;
+          r.checked && h.push(r.value || "on"), s[o] = h;
         } else
-          s[o] = i.checked;
+          s[o] = r.checked;
         continue;
       }
       if (d === "radio") {
-        i.checked && (s[o] = i.value);
+        r.checked && (s[o] = r.value);
         continue;
       }
       if (d === "file") {
-        const p = Array.from(i.files ?? []);
+        const p = Array.from(r.files ?? []);
         (e || p.length > 0) && (s[o] = p);
         continue;
       }
-      (e || i.value !== "") && (s[o] = i.value);
+      (e || r.value !== "") && (s[o] = r.value);
       continue;
     }
-    if (i instanceof HTMLSelectElement) {
-      if (i.multiple) {
-        const d = Array.from(i.selectedOptions).map((p) => p.value);
+    if (r instanceof HTMLSelectElement) {
+      if (r.multiple) {
+        const d = Array.from(r.selectedOptions).map((p) => p.value);
         (e || d.length > 0) && (s[o] = d);
-      } else (e || i.value !== "") && (s[o] = i.value);
+      } else (e || r.value !== "") && (s[o] = r.value);
       continue;
     }
-    if (i instanceof HTMLTextAreaElement) {
-      (e || i.value !== "") && (s[o] = i.value);
+    if (r instanceof HTMLTextAreaElement) {
+      (e || r.value !== "") && (s[o] = r.value);
       continue;
     }
-    const c = G(i);
+    const c = G(r);
     (e || (Array.isArray(c) ? c.length > 0 : c !== "")) && (s[o] = c);
   }
   return s;