@tarragon-ui/js 0.8.0 → 0.9.0

package/dist/tarragon-ui.js

@@ -1,38 +1,39 @@
-const y = "tui-", V = `data-${y}`, h = (e) => V + e, A = (e, t) => `[${h(e)}${t ? `="${t}"` : ""}]`, v = "hidden", R = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])', K = 1e3;
-var f = /* @__PURE__ */ ((e) => (e.Click = "click", e.DoubleClick = "dblclick", e.MouseUp = "mouseup", e.MouseDown = "mousedown", e.ContextMenu = "contextmenu", e.MouseWheel = "mousewheel", e.DOMMouseScroll = "DOMMouseScroll", e.MouseOver = "mouseover", e.MouseOut = "mouseout", e.MouseMove = "mousemove", e.SelectStart = "selectstart", e.SelectEnd = "selectend", e.KeyDown = "keydown", e.KeyPress = "keypress", e.KeyUp = "keyup", e.OrientationChange = "orientationchange", e.TouchStart = "touchstart", e.TouchMove = "touchmove", e.TouchEnd = "touchend", e.TouchCancel = "touchcancel", e.PointerDown = "pointerdown", e.PointerMove = "pointermove", e.PointerUp = "pointerup", e.PointerLeave = "pointerleave", e.PointerCancel = "pointercancel", e.GestureStart = "gesturestart", e.GestureChange = "gesturechange", e.GestureEnd = "gestureend", e.Focus = "focus", e.Blur = "blur", e.Change = "change", e.Reset = "reset", e.Select = "select", e.Submit = "submit", e.FocusIn = "focusin", e.FocusOut = "focusout", e.Load = "load", e.Unload = "unload", e.BeforeUnload = "beforeunload", e.BeforeToggle = "beforetoggle", e.Resize = "resize", e.Move = "move", e.DOMContentLoaded = "DOMContentLoaded", e.ReadyStateChange = "readystatechange", e.Error = "error", e.Abort = "abort", e.Scroll = "scroll", e.Input = "input", e.Toggle = "toggle", e.Close = "close", e))(f || {});
-const a = {
+const k = "tui-", K = `data-${k}`, h = (e) => K + e, S = (e, t) => `[${h(e)}${t ? `="${t}"` : ""}]`, v = "hidden", B = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])', R = 1e3;
+var m = /* @__PURE__ */ ((e) => (e.Click = "click", e.DoubleClick = "dblclick", e.MouseUp = "mouseup", e.MouseDown = "mousedown", e.ContextMenu = "contextmenu", e.MouseWheel = "mousewheel", e.DOMMouseScroll = "DOMMouseScroll", e.MouseOver = "mouseover", e.MouseOut = "mouseout", e.MouseMove = "mousemove", e.SelectStart = "selectstart", e.SelectEnd = "selectend", e.KeyDown = "keydown", e.KeyPress = "keypress", e.KeyUp = "keyup", e.OrientationChange = "orientationchange", e.TouchStart = "touchstart", e.TouchMove = "touchmove", e.TouchEnd = "touchend", e.TouchCancel = "touchcancel", e.PointerDown = "pointerdown", e.PointerMove = "pointermove", e.PointerUp = "pointerup", e.PointerLeave = "pointerleave", e.PointerCancel = "pointercancel", e.GestureStart = "gesturestart", e.GestureChange = "gesturechange", e.GestureEnd = "gestureend", e.Focus = "focus", e.Blur = "blur", e.Change = "change", e.Reset = "reset", e.Select = "select", e.Submit = "submit", e.FocusIn = "focusin", e.FocusOut = "focusout", e.Load = "load", e.Unload = "unload", e.BeforeUnload = "beforeunload", e.BeforeToggle = "beforetoggle", e.Resize = "resize", e.Move = "move", e.DOMContentLoaded = "DOMContentLoaded", e.ReadyStateChange = "readystatechange", e.Error = "error", e.Abort = "abort", e.Scroll = "scroll", e.Input = "input", e.Toggle = "toggle", e.Close = "close", e))(m || {});
+const c = {
   AjaxForm: {
-    Name: `${y}ajax-form`,
+    Name: `${k}ajax-form`,
     Event: { Form: "form" }
   },
   AjaxHtml: {
-    Name: `${y}ajax-html`
+    Name: `${k}ajax-html`
   },
   Dropdown: {
-    Name: `${y}dropdown`
+    Name: `${k}dropdown`
   },
   ExclusiveCheckbox: {
-    Name: `${y}exclusive-checkbox`,
+    Name: `${k}exclusive-checkbox`,
     Event: { Toggle: "toggle" }
   },
-  SelectAll: { Name: `${y}select-all`, Event: { Toggle: "toggle" } },
-  SearchFilter: { Name: `${y}search-filter` },
-  UntilSelected: { Name: `${y}until-selected` },
+  SelectAll: { Name: `${k}select-all`, Event: { Toggle: "toggle" } },
+  SearchFilter: { Name: `${k}search-filter` },
+  Tabs: { Name: `${k}tabs` },
+  UntilSelected: { Name: `${k}until-selected` },
   ValidateForm: {
-    Name: `${y}validate-form`,
+    Name: `${k}validate-form`,
     Event: { Validate: "validate" }
   }
 };
-function w(e, t, n, s = !1) {
-  const c = new Event(`${e}:${t}`, {
+function A(e, t, s, n = !1) {
+  const a = new Event(`${e}:${t}`, {
     bubbles: !0,
-    cancelable: s
+    cancelable: n
   });
-  return n.dispatchEvent(c);
+  return s.dispatchEvent(a);
 }
-const O = "validate-group";
+const q = "validate-group";
 customElements.define(
-  a.ValidateForm.Name,
+  c.ValidateForm.Name,
   class extends HTMLElement {
     form = null;
     groups = void 0;
@@ -42,8 +43,8 @@ customElements.define(
         return;
       }
       this.groups = Array.from(
-        this.form.querySelectorAll(A(O))
-      ), this.form.setAttribute("novalidate", ""), this.form.addEventListener("submit", this.onSubmit), this.form.addEventListener("input", this.onInput), this.form.addEventListener("blur", this.onBlur, { capture: !0 }), w(a.ValidateForm.Name, a.ValidateForm.Event.Validate, this), this.setAttribute(h("is-ready"), "");
+        this.form.querySelectorAll(S(q))
+      ), this.form.setAttribute("novalidate", ""), this.form.addEventListener("submit", this.onSubmit), this.form.addEventListener("input", this.onInput), this.form.addEventListener("blur", this.onBlur, { capture: !0 }), A(c.ValidateForm.Name, c.ValidateForm.Event.Validate, this), this.setAttribute(h("is-ready"), "");
     }
     disconnectedCallback() {
       this.form && (this.form.removeEventListener("submit", this.onSubmit), this.form.removeEventListener("input", this.onInput), this.form.removeEventListener("blur", this.onBlur, { capture: !0 }));
@@ -54,13 +55,13 @@ customElements.define(
      */
     onInput = (e) => {
       if (!(e.target instanceof Element)) return;
-      const t = e.target.closest(A(O)), n = t ?? e.target;
-      if (t?.setAttribute(h(O), "interacted"), !(!t && n.getAttribute("aria-invalid") !== "true")) {
+      const t = e.target.closest(S(q)), s = t ?? e.target;
+      if (t?.setAttribute(h(q), "interacted"), !(!t && s.getAttribute("aria-invalid") !== "true")) {
         if (t) {
           this.isGroupValid(t);
           return;
         }
-        this.isFieldValid(n);
+        this.isFieldValid(s);
       }
     };
     /**
@@ -69,7 +70,7 @@ customElements.define(
      */
     onBlur = (e) => {
       if (!(e.target instanceof Element)) return;
-      const t = e.target.closest(`[${O}="interacted"]`);
+      const t = e.target.closest(`[${q}="interacted"]`);
       if (t) {
         this.isGroupValid(t);
         return;
@@ -85,20 +86,20 @@ customElements.define(
      * @param {Event} event The event object
      */
     onSubmit = (e) => {
-      if (!w(
-        a.ValidateForm.Name,
-        a.ValidateForm.Event.Validate,
+      if (!A(
+        c.ValidateForm.Name,
+        c.ValidateForm.Event.Validate,
         this,
         !0
       )) return;
-      const n = this.checkGroupValidity();
-      if (this.checkFieldValidity() && n) {
-        w(a.ValidateForm.Name, a.ValidateForm.Event.Validate, this);
+      const s = this.checkGroupValidity();
+      if (this.checkFieldValidity() && s) {
+        A(c.ValidateForm.Name, c.ValidateForm.Event.Validate, this);
         return;
       }
       e.preventDefault(), e.stopPropagation(), e.stopImmediatePropagation(), this.form?.querySelector(
         'input:invalid, [aria-invalid="true"] :is([type="checkbox"], [type="radio"])'
-      )?.focus({ focusVisible: !0 }), w(a.ValidateForm.Name, a.ValidateForm.Event.Validate, this);
+      )?.focus({ focusVisible: !0 }), A(c.ValidateForm.Name, c.ValidateForm.Event.Validate, this);
     };
     /**
      * Check the validity of fields that can be validated with HTMLFormElement.checkValidity().
@@ -146,36 +147,36 @@ customElements.define(
      * @param  {Boolean} isGroup If true, field is a fieldset input group
      */
     showError(e, t = !1) {
-      const n = this.getMessage(e, t);
-      if (!n) return;
+      const s = this.getMessage(e, t);
+      if (!s) return;
       e.setAttribute("aria-invalid", "true");
-      const s = this.querySelector(
-        A("validation-message-template")
-      ), c = !!s, l = e.getAttribute("aria-describedby"), u = l ?? `${y}${crypto.randomUUID()}`;
+      const n = this.querySelector(
+        S("validation-message-template")
+      ), a = !!n, l = e.getAttribute("aria-describedby"), u = l ?? `${k}${crypto.randomUUID()}`;
       if (l) {
-        const m = this.form?.querySelector(`#${l}`);
-        if (m) {
-          if (c) {
-            const p = m.querySelector(
-              A("slot", "form-message")
+        const f = this.form?.querySelector(`#${l}`);
+        if (f) {
+          if (a) {
+            const p = f.querySelector(
+              S("slot", "form-message")
             );
-            p && (p.textContent = n), m.id = u, e.setAttribute("aria-describedby", u);
+            p && (p.textContent = s), f.id = u, e.setAttribute("aria-describedby", u);
             return;
           }
-          m.textContent = n, m.id = u, e.setAttribute("aria-describedby", u);
+          f.textContent = s, f.id = u, e.setAttribute("aria-describedby", u);
           return;
         }
       }
-      let b;
-      if (c) {
-        b = s.content.cloneNode(!0).firstElementChild, b.id = u;
-        const p = b.querySelector(
-          A("slot", "form-message")
+      let g;
+      if (a) {
+        g = n.content.cloneNode(!0).firstElementChild, g.id = u;
+        const p = g.querySelector(
+          S("slot", "form-message")
         );
-        p && (p.textContent = n);
+        p && (p.textContent = s);
       } else
-        b = document.createElement("p"), b.textContent = n, b.id = u, b.className = "form-message";
-      e.setAttribute("aria-describedby", u), t ? e.append(b) : e.after(b);
+        g = document.createElement("p"), g.textContent = s, g.id = u, g.className = "form-message";
+      e.setAttribute("aria-describedby", u), t ? e.append(g) : e.after(g);
     }
     /**
      * Get the error message text
@@ -184,11 +185,11 @@ customElements.define(
      * @return {String} The error message
      */
     getMessage(e, t = !1) {
-      const n = e.getAttribute(h("validate-message"));
-      if (n) return n;
+      const s = e.getAttribute(h("validate-message"));
+      if (s) return s;
       if (t) {
-        const c = this.getAttribute(h("checkbox-group-message")) ?? "Please select at least one option.", l = this.getAttribute(h("radio-group-message")) ?? "Please select an option.";
-        return e.querySelector('[type="checkbox"]') ? c : l;
+        const a = this.getAttribute(h("checkbox-group-message")) ?? "Please select at least one option.", l = this.getAttribute(h("radio-group-message")) ?? "Please select an option.";
+        return e.querySelector('[type="checkbox"]') ? a : l;
       }
       return "validationMessage" in e ? e.validationMessage : "";
     }
@@ -203,7 +204,7 @@ customElements.define(
     }
   }
 );
-class S {
+class C {
   static instance = void 0;
   baseHeaders = void 0;
   constructor(t = {}) {
@@ -213,18 +214,18 @@ class S {
   // Subsequent calls without arguments will return the existing instance.
   // If arguments are provided, it reconfigures the existing instance or creates a new one.
   static getInstance(t) {
-    return S.instance ? t && (S.instance.baseHeaders = {
-      ...S.instance.baseHeaders,
+    return C.instance ? t && (C.instance.baseHeaders = {
+      ...C.instance.baseHeaders,
       ...t
-    }) : S.instance = new S(t), S.instance;
+    }) : C.instance = new C(t), C.instance;
   }
   isMethod(t) {
     return ["GET", "PUT", "POST", "PATCH", "DELETE"].includes(t.toUpperCase());
   }
   buildQueryString(t) {
     if (!t) return "";
-    const n = new URLSearchParams(t).toString();
-    return n ? `?${n}` : "";
+    const s = new URLSearchParams(t).toString();
+    return s ? `?${s}` : "";
   }
   buildHeaders(t) {
     return {
@@ -232,64 +233,64 @@ class S {
       ...t
     };
   }
-  async send(t, n, s) {
+  async send(t, s, n) {
     try {
-      const c = n.toUpperCase(), l = this.buildQueryString(s.queryParameters), u = `${t}${l}`, b = {
-        method: c,
-        headers: this.buildHeaders(s.headers)
+      const a = s.toUpperCase(), l = this.buildQueryString(n.queryParameters), u = `${t}${l}`, g = {
+        method: a,
+        headers: this.buildHeaders(n.headers)
       };
-      c !== "GET" && "data" in s && s.data && (b.body = s.data);
-      const m = await fetch(u, b);
-      if (!m.ok) {
-        const g = {
+      a !== "GET" && "data" in n && n.data && (g.body = n.data);
+      const f = await fetch(u, g);
+      if (!f.ok) {
+        const b = {
           message: "Request failed",
-          status: m.status
+          status: f.status
         };
-        if (m.headers.get("content-type")?.includes("application/json"))
+        if (f.headers.get("content-type")?.includes("application/json"))
           try {
-            const k = await m.json();
-            g.message = k.message ?? k.error ?? g.message;
-          } catch (k) {
-            g.message = `Failed to parse error JSON: ${g.message}`, g.error = k instanceof Error ? k : new Error(String(k));
+            const y = await f.json();
+            b.message = y.message ?? y.error ?? b.message;
+          } catch (y) {
+            b.message = `Failed to parse error JSON: ${b.message}`, b.error = y instanceof Error ? y : new Error(String(y));
           }
         else {
-          const k = await m.text();
-          k && (g.message = `Server responded with an error: ${k.substring(0, 100)}`);
+          const y = await f.text();
+          y && (b.message = `Server responded with an error: ${y.substring(0, 100)}`);
         }
-        return [g, void 0];
+        return [b, void 0];
       }
-      const p = m.headers.get("content-type");
+      const p = f.headers.get("content-type");
       if (p?.includes("application/json"))
-        return [void 0, await m.json()];
+        return [void 0, await f.json()];
       if (p?.includes("text/html")) {
-        const g = await m.text();
-        return [void 0, { type: "html", document: new DOMParser().parseFromString(g, "text/html") }];
+        const b = await f.text();
+        return [void 0, { type: "html", document: new DOMParser().parseFromString(b, "text/html") }];
       } else if (p?.includes("text/plain"))
-        return [void 0, { type: "json", message: await m.text() }];
+        return [void 0, { type: "json", message: await f.text() }];
       return [void 0, { type: "json", message: "Request successful, no content." }];
-    } catch (c) {
-      return c instanceof Error ? [{ message: "Network error", error: c }, void 0] : [{ message: "An unknown error occurred" }, void 0];
+    } catch (a) {
+      return a instanceof Error ? [{ message: "Network error", error: a }, void 0] : [{ message: "An unknown error occurred" }, void 0];
     }
   }
-  get(t, n) {
-    return this.send(t, "GET", n ?? {});
+  get(t, s) {
+    return this.send(t, "GET", s ?? {});
   }
-  put(t, n) {
-    return this.send(t, "PUT", n ?? {});
+  put(t, s) {
+    return this.send(t, "PUT", s ?? {});
   }
-  post(t, n) {
-    return this.send(t, "POST", n ?? {});
+  post(t, s) {
+    return this.send(t, "POST", s ?? {});
   }
-  patch(t, n) {
-    return this.send(t, "PATCH", n ?? {});
+  patch(t, s) {
+    return this.send(t, "PATCH", s ?? {});
   }
-  delete(t, n) {
-    return this.send(t, "DELETE", n ?? {});
+  delete(t, s) {
+    return this.send(t, "DELETE", s ?? {});
   }
 }
-const F = S.getInstance({
+const F = C.getInstance({
   "Content-Type": "application/json"
-}), H = {
+}), P = {
   staleTime: 0
 };
 class L {
@@ -301,32 +302,32 @@ class L {
     return L.instance ??= new L(), L.instance;
   }
   // Centralized state update logic
-  updateQueryState(t, n, s) {
-    const c = this.cache.get(t), l = c ? { ...c } : {
+  updateQueryState(t, s, n) {
+    const a = this.cache.get(t), l = a ? { ...a } : {
       data: void 0,
       isFetching: !1,
       error: null,
-      meta: { ...H }
+      meta: { ...P }
     };
-    s && (l.meta = { ...l.meta, ...s });
-    const u = { ...l, ...n };
+    n && (l.meta = { ...l.meta, ...n });
+    const u = { ...l, ...s };
     u.meta = {
-      ...H,
+      ...P,
       ...l.meta
     }, this.cache.set(t, u), this.notifySubscribers(t, u), this.manageRefetchInterval(t, u.meta.staleTime);
   }
-  notifySubscribers(t, n) {
-    this.subscriptions.get(t)?.forEach((s) => {
-      s(n);
+  notifySubscribers(t, s) {
+    this.subscriptions.get(t)?.forEach((n) => {
+      n(s);
     });
   }
-  manageRefetchInterval(t, n) {
-    const s = this.refetchIntervals.get(t);
-    if (s && (clearInterval(s), this.refetchIntervals.delete(t)), n && n > 0 && this.subscriptions.has(t) && this.subscriptions.get(t).size > 0) {
-      const c = window.setInterval(() => {
+  manageRefetchInterval(t, s) {
+    const n = this.refetchIntervals.get(t);
+    if (n && (clearInterval(n), this.refetchIntervals.delete(t)), s && s > 0 && this.subscriptions.has(t) && this.subscriptions.get(t).size > 0) {
+      const a = window.setInterval(() => {
         this.invalidateQuery(t);
-      }, n);
-      this.refetchIntervals.set(t, c);
+      }, s);
+      this.refetchIntervals.set(t, a);
     }
   }
   /**
@@ -336,11 +337,11 @@ class L {
    * @param options Query options that might affect initial state or refetch behavior.
    * @returns An unsubscribe function.
    */
-  subscribe(t, n, s) {
-    this.subscriptions.has(t) || this.subscriptions.set(t, /* @__PURE__ */ new Set()), this.subscriptions.get(t).add(n), this.updateQueryState(t, {}, s);
+  subscribe(t, s, n) {
+    this.subscriptions.has(t) || this.subscriptions.set(t, /* @__PURE__ */ new Set()), this.subscriptions.get(t).add(s), this.updateQueryState(t, {}, n);
     const l = this.cache.get(t);
-    return l && n(l), this.manageRefetchInterval(t, l?.meta.staleTime ?? 0), () => {
-      this.subscriptions.get(t)?.delete(n), this.subscriptions.get(t)?.size === 0 && (this.subscriptions.delete(t), this.manageRefetchInterval(t, 0));
+    return l && s(l), this.manageRefetchInterval(t, l?.meta.staleTime ?? 0), () => {
+      this.subscriptions.get(t)?.delete(s), this.subscriptions.get(t)?.size === 0 && (this.subscriptions.delete(t), this.manageRefetchInterval(t, 0));
     };
   }
   /**
@@ -349,9 +350,9 @@ class L {
    * @returns The current QueryResult, or undefined if not initialized.
    */
   get(t) {
-    const n = this.cache.get(t);
-    if (n)
-      return n;
+    const s = this.cache.get(t);
+    if (s)
+      return s;
   }
   /**
    * Sets the data for a query key and notifies subscribers.
@@ -360,39 +361,39 @@ class L {
    * @param data The data to set.
    * @param options Options for this query.
    */
-  setQueryData(t, n, s) {
+  setQueryData(t, s, n) {
     this.updateQueryState(
       t,
       {
-        data: n,
+        data: s,
         error: null,
         isFetching: !1
       },
-      s
+      n
     );
   }
   /**
    * Fetches data for a query key. This is an internal method called by subscribe/invalidate.
    * It ensures only one fetch is active at a time for a given key.
    */
-  async fetchQuery(t, n) {
-    const s = this.cache.get(t);
-    if (!s || s.isFetching)
+  async fetchQuery(t, s) {
+    const n = this.cache.get(t);
+    if (!n || n.isFetching)
       return;
     this.updateQueryState(t, {
       isFetching: !0,
       // Always true when a fetch is in progress
       error: null
     });
-    const [c, l] = await F.get(t);
-    if (c) {
+    const [a, l] = await F.get(t);
+    if (a) {
       this.updateQueryState(
         t,
         {
-          error: c.message,
+          error: a.message,
           isFetching: !1
         },
-        n
+        s
       );
       return;
     }
@@ -403,7 +404,7 @@ class L {
         isFetching: !1,
         error: null
       },
-      n
+      s
     );
   }
   /**
@@ -411,17 +412,17 @@ class L {
    * @param key The query key.
    */
   invalidateQuery(t) {
-    const n = this.cache.get(t);
-    if (!n) {
+    const s = this.cache.get(t);
+    if (!s) {
       console.warn(`No query exists for key: ${t}`);
       return;
     }
-    n.isFetching || this.fetchQuery(t);
+    s.isFetching || this.fetchQuery(t);
   }
 }
 const M = L.getInstance();
 customElements.define(
-  a.AjaxForm.Name,
+  c.AjaxForm.Name,
   class extends HTMLElement {
     form = null;
     announce = null;
@@ -450,22 +451,22 @@ customElements.define(
     async handleSubmit(e) {
       if (!this.form || (e.preventDefault(), this.isDisabled())) return;
       this.disable(), this.showStatus(this.messageSubmitting, "pending");
-      const { action: t, method: n } = this.form;
-      if (!F.isMethod(n)) {
+      const { action: t, method: s } = this.form;
+      if (!F.isMethod(s)) {
         console.error("Method is not a valid value"), this.showStatus(this.messageError, "error");
         return;
       }
-      let s = null;
-      this.spinner && (s = this.form.querySelector(":focus"));
-      const [c, l] = await F.send(t, n, {
+      let n = null;
+      this.spinner && (n = this.form.querySelector(":focus"));
+      const [a, l] = await F.send(t, s, {
         data: this.serialize(),
         headers: {
           "Content-Type": "application/x-www-form-urlencoded",
           "X-Requested-With": "XMLHttpRequest"
         }
       });
-      if (this.enable(), s?.focus(), c) {
-        console.error("An error occurred", c), this.showStatus(this.messageError, "error");
+      if (this.enable(), n?.focus(), a) {
+        console.error("An error occurred", a), this.showStatus(this.messageError, "error");
         return;
       }
       if (this.actionOnSuccess === "remove-form" && this.form.remove(), this.keepFields || this.reset(), l.type === "html") {
@@ -477,7 +478,7 @@ customElements.define(
         window.location.href = l.redirectUrl;
         return;
       }
-      l.queryKey && M.invalidateQuery(l.queryKey), this.queryKeyToInvalidate && M.invalidateQuery(this.queryKeyToInvalidate), w(a.AjaxForm.Name, a.AjaxForm.Event.Form, this);
+      l.queryKey && M.invalidateQuery(l.queryKey), this.queryKeyToInvalidate && M.invalidateQuery(this.queryKeyToInvalidate), A(c.AjaxForm.Name, c.AjaxForm.Event.Form, this);
     }
     disable() {
       this.setAttribute(h(this.isSubmittingAttribute), "");
@@ -494,7 +495,7 @@ customElements.define(
           case "success":
             this.announce.className = "alert success", this.actionOnSuccess === "remove-message" && setTimeout(() => {
               !this.announce || !this.announceTitle || (this.announceTitle.textContent = "", this.announce.className = "", this.showStatusIcon("pending"));
-            }, 6 * K);
+            }, 6 * R);
             break;
           case "error":
             this.announce.className = "alert danger";
@@ -507,27 +508,27 @@ customElements.define(
     showStatusIcon(e) {
       if (!this.announce) return;
       const t = this.announce.querySelector(
-        A("announce-success-icon")
-      ), n = this.announce.querySelector(
-        A("announce-error-icon")
+        S("announce-success-icon")
+      ), s = this.announce.querySelector(
+        S("announce-error-icon")
       );
       switch (e) {
         case "success":
-          t?.removeAttribute(v), n?.setAttribute(v, "");
+          t?.removeAttribute(v), s?.setAttribute(v, "");
           break;
         case "error":
-          t?.setAttribute(v, ""), n?.removeAttribute(v);
+          t?.setAttribute(v, ""), s?.removeAttribute(v);
           break;
         case "pending":
-          t?.setAttribute(v, ""), n?.setAttribute(v, "");
+          t?.setAttribute(v, ""), s?.setAttribute(v, "");
           break;
       }
     }
     serialize() {
       if (!this.form) return "";
       const e = new FormData(this.form), t = new URLSearchParams();
-      for (const [n, s] of e)
-        s instanceof File || t.append(n, s);
+      for (const [s, n] of e)
+        n instanceof File || t.append(s, n);
       return t.toString();
     }
     reset() {
@@ -536,7 +537,7 @@ customElements.define(
   }
 );
 customElements.define(
-  a.AjaxHtml.Name,
+  c.AjaxHtml.Name,
   class extends HTMLElement {
     queryKey = null;
     unsubscribe = null;
@@ -546,11 +547,11 @@ customElements.define(
     staleTime;
     connectedCallback() {
       if (!this.id) {
-        console.warn(`${a.AjaxHtml.Name} requires a "id" attribute.`, this);
+        console.warn(`${c.AjaxHtml.Name} requires a "id" attribute.`, this);
         return;
       }
       if (this.queryKey = this.getAttribute(h("query-key")), !this.queryKey) {
-        console.warn(`${a.AjaxHtml.Name} requires a "query-key" attribute.`, this);
+        console.warn(`${c.AjaxHtml.Name} requires a "query-key" attribute.`, this);
         return;
       }
       this.staleTime = this.hasAttribute(h("stale-time")) ? (
@@ -603,9 +604,9 @@ customElements.define(
     }
     renderContent(e) {
       if (!this.initialFetchTriggered || !e.data || e.data.type !== "html") return;
-      const t = e.data.document, n = t.querySelector(`#${this.id}`);
-      if (n && n.id === this.id) {
-        this.innerHTML = n.innerHTML;
+      const t = e.data.document, s = t.querySelector(`#${this.id}`);
+      if (s && s.id === this.id) {
+        this.innerHTML = s.innerHTML;
         return;
       }
       if (t.body.innerHTML.trim().length > 0) {
@@ -616,12 +617,12 @@ customElements.define(
     }
   }
 );
-const $ = "[popover]", P = (e) => `[popovertarget="${e}"]`, q = {
+const H = "[popover]", $ = (e) => `[popovertarget="${e}"]`, O = {
   open: "open",
   closed: "closed"
 };
 customElements.define(
-  a.Dropdown.Name,
+  c.Dropdown.Name,
   class extends HTMLElement {
     popoverElement = null;
     trigger = null;
@@ -629,31 +630,31 @@ customElements.define(
     searchString = "";
     searchTimeout = -1;
     connectedCallback() {
-      const e = this.querySelector($);
+      const e = this.querySelector(H);
       if (!e) {
         console.error(
-          `${a.Dropdown.Name} component: Missing element with selector "${$}"`
+          `${c.Dropdown.Name} component: Missing element with selector "${H}"`
         );
         return;
       }
       this.popoverElement = e;
       const t = this.querySelector(
-        P(this.popoverElement.id)
+        $(this.popoverElement.id)
       );
       if (!t) {
         console.error(
-          `${a.Dropdown.Name} component: Missing element with selector "${P(this.popoverElement.id)}"`
+          `${c.Dropdown.Name} component: Missing element with selector "${$(this.popoverElement.id)}"`
         );
         return;
       }
-      this.trigger = t, this.focusableElements = this.getFocusableElementsForTrap(), this.popoverElement.setAttribute(h("state"), q.closed), this.addEventListener(f.KeyDown, this.handleKeydown), this.popoverElement.addEventListener(f.Toggle, this.handleToggle), this.setAttribute(h("state"), "ready");
+      this.trigger = t, this.focusableElements = this.getFocusableElementsForTrap(), this.popoverElement.setAttribute(h("state"), O.closed), this.addEventListener(m.KeyDown, this.handleKeydown), this.popoverElement.addEventListener(m.Toggle, this.handleToggle), this.setAttribute(h("state"), "ready");
     }
     disconnectedCallback() {
-      this.removeEventListener(f.KeyDown, this.handleKeydown), this.popoverElement?.removeEventListener(f.Toggle, this.handleToggle);
+      this.removeEventListener(m.KeyDown, this.handleKeydown), this.popoverElement?.removeEventListener(m.Toggle, this.handleToggle);
     }
     getFocusableElementsForTrap() {
       return this.popoverElement ? [...Array.from(
-        this.popoverElement.querySelectorAll(R)
+        this.popoverElement.querySelectorAll(B)
       )].filter(Boolean) : [];
     }
     handleToggle = (e) => {
@@ -664,13 +665,13 @@ customElements.define(
       this.onPopoverClose();
     };
     onPopoverOpen() {
-      this.popoverElement && this.popoverElement.setAttribute(h("state"), q.open);
+      this.popoverElement && this.popoverElement.setAttribute(h("state"), O.open);
     }
     onPopoverClose() {
-      this.popoverElement && this.popoverElement.setAttribute(h("state"), q.closed);
+      this.popoverElement && this.popoverElement.setAttribute(h("state"), O.closed);
     }
     isOpen() {
-      return this.popoverElement ? this.popoverElement.getAttribute(h("state")) === q.open : !1;
+      return this.popoverElement ? this.popoverElement.getAttribute(h("state")) === O.open : !1;
     }
     handleKeydown = (e) => {
       if (this.isOpen()) {
@@ -730,16 +731,16 @@ customElements.define(
     triggerAction = (e) => {
       e.target instanceof HTMLAnchorElement && e.target.click();
     };
-    focusOptionByStep = (e, t, n) => {
-      const s = this.focusableElements;
-      if (!s.length) return;
-      const c = e, l = s.indexOf(c);
-      if (n.preventDefault(), l === -1) {
-        s[0]?.focus();
+    focusOptionByStep = (e, t, s) => {
+      const n = this.focusableElements;
+      if (!n.length) return;
+      const a = e, l = n.indexOf(a);
+      if (s.preventDefault(), l === -1) {
+        n[0]?.focus();
         return;
       }
-      const u = (l + t + s.length) % s.length;
-      u >= s.length || u < 0 || s[u]?.focus();
+      const u = (l + t + n.length) % n.length;
+      u >= n.length || u < 0 || n[u]?.focus();
     };
     focusOptionByIndex(e) {
       if (!this.focusableElements.length) return;
@@ -748,16 +749,16 @@ customElements.define(
     }
     handleSearchString(e) {
       if (clearTimeout(this.searchTimeout), this.searchString += e.toLowerCase(), !this.focusableElements.length) return;
-      const t = this.getActiveOption(), n = this.searchString.length === 1 && t ? this.focusableElements.indexOf(t) + 1 : 0, s = this.findOptionBySearchString(this.focusableElements, n) ?? this.findOptionBySearchString(this.focusableElements, 0);
-      s && s.focus(), this.searchTimeout = window.setTimeout(() => {
+      const t = this.getActiveOption(), s = this.searchString.length === 1 && t ? this.focusableElements.indexOf(t) + 1 : 0, n = this.findOptionBySearchString(this.focusableElements, s) ?? this.findOptionBySearchString(this.focusableElements, 0);
+      n && n.focus(), this.searchTimeout = window.setTimeout(() => {
         this.searchString = "";
       }, 500);
     }
     findOptionBySearchString(e, t) {
-      for (let n = 0; n < e.length; n++) {
-        const s = (t + n) % e.length;
-        if (e[s]?.textContent.trim().toLowerCase()?.startsWith(this.searchString))
-          return e[s] ?? null;
+      for (let s = 0; s < e.length; s++) {
+        const n = (t + s) % e.length;
+        if (e[n]?.textContent.trim().toLowerCase()?.startsWith(this.searchString))
+          return e[n] ?? null;
       }
       return null;
     }
@@ -768,7 +769,7 @@ customElements.define(
   }
 );
 customElements.define(
-  a.ExclusiveCheckbox.Name,
+  c.ExclusiveCheckbox.Name,
   class extends HTMLElement {
     targetName = null;
     exclusiveCheckbox = null;
@@ -782,17 +783,17 @@ customElements.define(
     }
     disconnectedCallback() {
       if (this.exclusiveCheckbox && this.exclusiveCheckbox.removeEventListener(
-        f.Change,
+        m.Change,
         this.handleExclusiveChange
       ), this.checkboxes)
         for (const e of this.checkboxes)
-          e.removeEventListener(f.Change, this.handleCheckboxChange);
+          e.removeEventListener(m.Change, this.handleCheckboxChange);
     }
     addEvents() {
       if (!(!this.exclusiveCheckbox || !this.targetName || !this.parentElement || !this.checkboxes)) {
         this.exclusiveCheckbox.addEventListener("change", this.handleExclusiveChange);
         for (const e of this.checkboxes)
-          e.disabled || e.addEventListener(f.Change, this.handleCheckboxChange);
+          e.disabled || e.addEventListener(m.Change, this.handleCheckboxChange);
       }
     }
     handleExclusiveChange = () => {
@@ -800,9 +801,9 @@ customElements.define(
       const e = this.exclusiveCheckbox.checked;
       for (const t of this.checkboxes)
         t.disabled || e && (t.checked = !1);
-      this.exclusiveCheckbox.indeterminate = !1, w(
-        a.ExclusiveCheckbox.Name,
-        a.ExclusiveCheckbox.Event.Toggle,
+      this.exclusiveCheckbox.indeterminate = !1, A(
+        c.ExclusiveCheckbox.Name,
+        c.ExclusiveCheckbox.Event.Toggle,
         this.exclusiveCheckbox
       );
     };
@@ -811,16 +812,16 @@ customElements.define(
       const e = this.checkboxes.some(
         (t) => !t.disabled && t.checked
       );
-      this.exclusiveCheckbox.checked = !e, w(
-        a.ExclusiveCheckbox.Name,
-        a.ExclusiveCheckbox.Event.Toggle,
+      this.exclusiveCheckbox.checked = !e, A(
+        c.ExclusiveCheckbox.Name,
+        c.ExclusiveCheckbox.Event.Toggle,
         this.exclusiveCheckbox
       );
     };
   }
 );
 customElements.define(
-  a.SelectAll.Name,
+  c.SelectAll.Name,
   class extends HTMLElement {
     targetName = null;
     selectAllCheckbox = null;
@@ -834,11 +835,11 @@ customElements.define(
     }
     disconnectedCallback() {
       if (this.selectAllCheckbox && this.selectAllCheckbox.removeEventListener(
-        f.Change,
+        m.Change,
         this.handleSelectAllChange
       ), this.checkboxes)
         for (const e of this.checkboxes)
-          e.removeEventListener(f.Change, this.handleCheckboxChange);
+          e.removeEventListener(m.Change, this.handleCheckboxChange);
     }
     ready() {
       this.setAttribute(h("state"), "ready");
@@ -847,7 +848,7 @@ customElements.define(
       if (!(!this.selectAllCheckbox || !this.targetName || !this.parentElement || !this.checkboxes)) {
         this.selectAllCheckbox.addEventListener("change", this.handleSelectAllChange);
         for (const e of this.checkboxes)
-          e.disabled || (e.parentElement?.classList.add("padding-inline-start-lg"), e.addEventListener(f.Change, this.handleCheckboxChange));
+          e.disabled || (e.parentElement?.classList.add("padding-inline-start-lg"), e.addEventListener(m.Change, this.handleCheckboxChange));
       }
     }
     handleSelectAllChange = () => {
@@ -855,27 +856,121 @@ customElements.define(
       const e = this.selectAllCheckbox.checked;
       for (const t of this.checkboxes)
         t.disabled || (t.checked = e);
-      this.selectAllCheckbox.indeterminate = !1, w(
-        a.SelectAll.Name,
-        a.SelectAll.Event.Toggle,
+      this.selectAllCheckbox.indeterminate = !1, A(
+        c.SelectAll.Name,
+        c.SelectAll.Event.Toggle,
         this.selectAllCheckbox
       );
     };
     handleCheckboxChange = () => {
       if (!this.selectAllCheckbox || !this.checkboxes || this.checkboxes.length === 0) return;
       const e = this.checkboxes.filter(
-        (c) => !c.disabled && c.checked
-      ).length, t = this.checkboxes.length, n = e === t, s = e === 0;
-      this.selectAllCheckbox.indeterminate = !n && !s, this.selectAllCheckbox.checked = n, w(
-        a.SelectAll.Name,
-        a.SelectAll.Event.Toggle,
+        (a) => !a.disabled && a.checked
+      ).length, t = this.checkboxes.length, s = e === t, n = e === 0;
+      this.selectAllCheckbox.indeterminate = !s && !n, this.selectAllCheckbox.checked = s, A(
+        c.SelectAll.Name,
+        c.SelectAll.Event.Toggle,
         this.selectAllCheckbox
       );
     };
   }
 );
 customElements.define(
-  a.UntilSelected.Name,
+  c.Tabs.Name,
+  class extends HTMLElement {
+    tabs = [];
+    tabList = null;
+    tabPanels = [];
+    connectedCallback() {
+      if (this.tabList = this.querySelector(".tablist"), this.tabs = Array.from(this.querySelectorAll(".tablist a")), this.tabPanels = this.tabs.map((e) => {
+        const t = e.getAttribute("href");
+        if (t != null)
+          return document.querySelector(t);
+      }).filter((e) => e != null), !this.tabList || this.tabs.length === 0 || this.tabPanels.length === 0) {
+        console.error("Tabs component: Missing some of elements .tablist, .tabpanel", this);
+        return;
+      }
+      this.ready(), this.setTabListAttributes(), this.setTabsAttributes(), this.setPanelsAttributes(), this.setEventListeners();
+    }
+    disconnectedCallback() {
+      for (const e of this.tabs)
+        e.removeEventListener(m.Click, this.handleTabClick), e.removeEventListener(m.KeyDown, this.onKeyDown);
+    }
+    setEventListeners() {
+      for (const e of this.tabs)
+        e.addEventListener(m.Click, this.handleTabClick), e.addEventListener(m.KeyDown, this.onKeyDown);
+    }
+    ready() {
+      this.setAttribute(h("state"), "ready");
+    }
+    setTabListAttributes() {
+      if (!this.tabList) return;
+      this.tabList.setAttribute("role", "tablist"), this.tabList.querySelectorAll("li").forEach((t) => {
+        t.setAttribute("role", "presentation");
+      });
+    }
+    setTabsAttributes() {
+      const e = parseInt(this.getAttribute(h("start-index")) ?? "0");
+      this.tabs.forEach((t, s) => {
+        t.setAttribute("role", "tab"), s === e ? t.setAttribute("aria-selected", "true") : (t.setAttribute("aria-selected", "false"), t.setAttribute("tabindex", "-1"), this.tabPanels[s]?.setAttribute("hidden", "")), this.tabPanels[s] && t.setAttribute("aria-controls", this.tabPanels[s].id);
+      });
+    }
+    setPanelsAttributes() {
+      this.tabPanels.forEach((e) => {
+        e.setAttribute("role", "tabpanel"), e.querySelector(B) || e.setAttribute("tabindex", "0");
+      });
+    }
+    handleTabClick = (e) => {
+      e.preventDefault();
+      const t = e.target;
+      this.changeTab(t);
+    };
+    changeTab(e) {
+      const t = e.getAttribute("href")?.substring(1), s = this.tabPanels.find((n) => n.id == t);
+      this.tabs.forEach((n) => {
+        n.setAttribute("aria-selected", "false"), n.setAttribute("tabindex", "-1");
+      }), s && (this.tabPanels.forEach((n) => {
+        n.setAttribute("hidden", "");
+      }), s.removeAttribute("hidden")), e.setAttribute("aria-selected", "true"), e.setAttribute("tabindex", "0"), e.focus();
+    }
+    moveTab(e) {
+      const t = this.tabs.filter(
+        (l) => l.getAttribute("aria-disabled") !== "true"
+      );
+      if (t.length === 0) return;
+      const s = t.indexOf(document.activeElement);
+      if (s === -1) return;
+      const n = (s + e + t.length) % t.length, a = t[n];
+      a && this.changeTab(a);
+    }
+    onKeyDown = (e) => {
+      if (e.key === "ArrowLeft") {
+        this.moveTab(-1);
+        return;
+      }
+      if (e.key === "ArrowRight") {
+        this.moveTab(1);
+        return;
+      }
+      if (e.key === "Home") {
+        e.preventDefault();
+        const t = this.tabs.find(
+          (s) => s.getAttribute("aria-disabled") !== "true"
+        );
+        t && this.changeTab(t);
+        return;
+      }
+      if (e.key === "End") {
+        e.preventDefault();
+        const t = [...this.tabs].reverse().find((s) => s.getAttribute("aria-disabled") !== "true");
+        t && this.changeTab(t);
+        return;
+      }
+    };
+  }
+);
+customElements.define(
+  c.UntilSelected.Name,
   class extends HTMLElement {
     target = null;
     targetElement = null;
@@ -885,50 +980,50 @@ customElements.define(
     connectedCallback() {
       if (this.target = this.getAttribute(h("target")), !this.target) return;
       try {
-        const s = document.getElementById(this.target);
-        if (!(s instanceof HTMLInputElement)) {
+        const n = document.getElementById(this.target);
+        if (!(n instanceof HTMLInputElement)) {
           console.warn("Element was not found");
           return;
         }
-        this.targetElement = s;
-      } catch (s) {
-        console.warn("Could not select element", s);
+        this.targetElement = n;
+      } catch (n) {
+        console.warn("Could not select element", n);
       }
       if (!this.targetElement) return;
       const e = this.getAttribute(h("focus-target"));
       if (e)
         try {
           this.focusTargetElement = document.getElementById(e);
-        } catch (s) {
-          console.warn("Could not select focus target", s);
+        } catch (n) {
+          console.warn("Could not select focus target", n);
         }
       const t = this.getAttribute(h("events"));
-      t && (this.events = t.split(",").map((s) => s.trim())), this.showWhen = this.getAttribute(h("show-when")) === "not-checked" ? "not-checked" : "checked";
-      const n = this.targetElement.checked;
+      t && (this.events = t.split(",").map((n) => n.trim())), this.showWhen = this.getAttribute(h("show-when")) === "not-checked" ? "not-checked" : "checked";
+      const s = this.targetElement.checked;
       this.toggleAttribute(
         v,
-        this.showWhen === "checked" ? !n : n
+        this.showWhen === "checked" ? !s : s
       ), this.addEvents();
     }
     disconnectedCallback() {
       if (document.removeEventListener(
-        `${a.ExclusiveCheckbox.Name}:${a.ExclusiveCheckbox.Event.Toggle}`,
+        `${c.ExclusiveCheckbox.Name}:${c.ExclusiveCheckbox.Event.Toggle}`,
         this.handleTargetChange
       ), document.removeEventListener(
-        `${a.SelectAll.Name}:${a.ExclusiveCheckbox.Event.Toggle}`,
+        `${c.SelectAll.Name}:${c.ExclusiveCheckbox.Event.Toggle}`,
         this.handleTargetChange
-      ), this.targetElement && this.targetElement.removeEventListener(f.Change, this.handleTargetChange), this.events && this.events.length > 0)
+      ), this.targetElement && this.targetElement.removeEventListener(m.Change, this.handleTargetChange), this.events && this.events.length > 0)
         for (const e of this.events)
           document.removeEventListener(e, this.handleTargetChange);
     }
     addEvents() {
       if (document.addEventListener(
-        `${a.ExclusiveCheckbox.Name}:${a.ExclusiveCheckbox.Event.Toggle}`,
+        `${c.ExclusiveCheckbox.Name}:${c.ExclusiveCheckbox.Event.Toggle}`,
         this.handleTargetChange
       ), document.addEventListener(
-        `${a.SelectAll.Name}:${a.ExclusiveCheckbox.Event.Toggle}`,
+        `${c.SelectAll.Name}:${c.ExclusiveCheckbox.Event.Toggle}`,
         this.handleTargetChange
-      ), this.targetElement && this.targetElement.addEventListener(f.Change, this.handleTargetChange), this.events && this.events.length > 0)
+      ), this.targetElement && this.targetElement.addEventListener(m.Change, this.handleTargetChange), this.events && this.events.length > 0)
         for (const e of this.events)
           document.addEventListener(e, this.handleTargetChange);
     }
@@ -940,15 +1035,15 @@ customElements.define(
   }
 );
 function j(e, t) {
-  let n;
-  return function(...s) {
-    clearTimeout(n), n = setTimeout(() => {
-      e.apply(this, s);
+  let s;
+  return function(...n) {
+    clearTimeout(s), s = setTimeout(() => {
+      e.apply(this, n);
     }, t);
   };
 }
 customElements.define(
-  a.SearchFilter.Name,
+  c.SearchFilter.Name,
   class extends HTMLElement {
     // TODO Add an aria-live region to announce number of results found
     // TODO handle focus management for accessibility
@@ -964,7 +1059,7 @@ customElements.define(
       const e = this.getAttribute(h("collection-selector"));
       if (!e) {
         console.warn(
-          `${a.SearchFilter.Name} requires a "collection-selector" attribute.`,
+          `${c.SearchFilter.Name} requires a "collection-selector" attribute.`,
           this
         );
         return;
@@ -972,32 +1067,32 @@ customElements.define(
       const t = this.getAttribute(h("target-selector"));
       if (!t) {
         console.warn(
-          `${a.SearchFilter.Name} requires a "target-selector" attribute.`,
+          `${c.SearchFilter.Name} requires a "target-selector" attribute.`,
           this
         );
         return;
       }
-      const n = Array.from(
+      const s = Array.from(
         document.querySelectorAll(e)
       );
-      if (n.length !== 0) {
-        for (const s of n) {
-          const c = Array.from(
-            s.querySelectorAll(t)
+      if (s.length !== 0) {
+        for (const n of s) {
+          const a = Array.from(
+            n.querySelectorAll(t)
           );
           this.collections.push({
-            element: s,
-            targetElements: c.map((l) => ({
+            element: n,
+            targetElements: a.map((l) => ({
               element: l,
               text: l.textContent.toLocaleLowerCase()
             }))
           });
         }
-        this.collections.length !== 0 && (this.inputElement.addEventListener(f.Input, this.debouncedFilterTargets), this.searchButton.addEventListener(f.Click, this.onSearchClick));
+        this.collections.length !== 0 && (this.inputElement.addEventListener(m.Input, this.debouncedFilterTargets), this.searchButton.addEventListener(m.Click, this.onSearchClick));
       }
     }
     disconnectedCallback() {
-      this.inputElement?.removeEventListener(f.Input, this.debouncedFilterTargets), this.searchButton?.removeEventListener(f.Click, this.onSearchClick);
+      this.inputElement?.removeEventListener(m.Input, this.debouncedFilterTargets), this.searchButton?.removeEventListener(m.Click, this.onSearchClick);
     }
     onSearchClick = (e) => {
       e.preventDefault(), this.filterTargets();
@@ -1008,16 +1103,16 @@ customElements.define(
       if (!e) {
         for (const t of this.collections) {
           t.element.removeAttribute(v);
-          for (const n of t.targetElements)
-            n.element.removeAttribute(v);
+          for (const s of t.targetElements)
+            s.element.removeAttribute(v);
         }
         return;
       }
       this.collections.forEach((t) => {
-        let n = !1;
-        for (const s of t.targetElements)
-          s.text.includes(e) ? (s.element.removeAttribute(v), n = !0) : s.element.setAttribute(v, "");
-        n ? t.element.removeAttribute(v) : t.element.setAttribute(v, "");
+        let s = !1;
+        for (const n of t.targetElements)
+          n.text.includes(e) ? (n.element.removeAttribute(v), s = !0) : n.element.setAttribute(v, "");
+        s ? t.element.removeAttribute(v) : t.element.setAttribute(v, "");
       });
     };
   }
@@ -1039,23 +1134,23 @@ function U() {
     },
     !0
   );
-  function e(r, i, o = !0) {
-    Object.defineProperty(r, i, {
-      ...Object.getOwnPropertyDescriptor(r, i),
-      enumerable: o
+  function e(r, o, i = !0) {
+    Object.defineProperty(r, o, {
+      ...Object.getOwnPropertyDescriptor(r, o),
+      enumerable: i
     });
   }
   function t(r) {
     return r && typeof r.getRootNode == "function" ? r.getRootNode() : r && r.parentNode ? t(r.parentNode) : r;
   }
-  const n = /* @__PURE__ */ new WeakMap(), s = /* @__PURE__ */ new WeakMap();
-  class c extends Event {
-    constructor(i, o = {}) {
-      super(i, o);
-      const { source: d, command: E } = o;
+  const s = /* @__PURE__ */ new WeakMap(), n = /* @__PURE__ */ new WeakMap();
+  class a extends Event {
+    constructor(o, i = {}) {
+      super(o, i);
+      const { source: d, command: E } = i;
       if (d != null && !(d instanceof Element))
         throw new TypeError("source must be an element");
-      n.set(this, d || null), s.set(
+      s.set(this, d || null), n.set(
         this,
         E !== void 0 ? String(E) : ""
       );
@@ -1064,17 +1159,17 @@ function U() {
       return "CommandEvent";
     }
     get source() {
-      if (!n.has(this))
+      if (!s.has(this))
         throw new TypeError("illegal invocation");
-      const i = n.get(this);
-      if (!(i instanceof Element)) return null;
-      const o = t(i);
-      return o !== t(this.target || document) ? o.host : i;
+      const o = s.get(this);
+      if (!(o instanceof Element)) return null;
+      const i = t(o);
+      return i !== t(this.target || document) ? i.host : o;
     }
     get command() {
-      if (!s.has(this))
+      if (!n.has(this))
         throw new TypeError("illegal invocation");
-      return s.get(this);
+      return n.get(this);
     }
     get action() {
       throw new Error(
@@ -1087,21 +1182,21 @@ function U() {
       );
     }
   }
-  e(c.prototype, "source"), e(c.prototype, "command");
+  e(a.prototype, "source"), e(a.prototype, "command");
   class l extends Event {
-    constructor(i, o = {}) {
-      throw super(i, o), new Error(
+    constructor(o, i = {}) {
+      throw super(o, i), new Error(
         "InvokeEvent has been deprecated, it has been renamed to `CommandEvent`"
       );
     }
   }
   const u = /* @__PURE__ */ new WeakMap();
-  function b(r) {
+  function g(r) {
     Object.defineProperties(r.prototype, {
       commandForElement: {
         enumerable: !0,
         configurable: !0,
-        set(i) {
+        set(o) {
           if (this.hasAttribute("invokeaction"))
             throw new TypeError(
               "Element has deprecated `invokeaction` attribute, replace with `command`"
@@ -1110,12 +1205,12 @@ function U() {
             throw new TypeError(
               "Element has deprecated `invoketarget` attribute, replace with `commandfor`"
             );
-          if (i === null)
+          if (o === null)
             this.removeAttribute("commandfor"), u.delete(this);
-          else if (i instanceof Element) {
+          else if (o instanceof Element) {
             this.setAttribute("commandfor", "");
-            const o = t(i);
-            t(this) === o || o === this.ownerDocument ? u.set(this, i) : u.delete(this);
+            const i = t(o);
+            t(this) === i || i === this.ownerDocument ? u.set(this, o) : u.delete(this);
           } else
             throw new TypeError("commandForElement must be an element or null");
         },
@@ -1132,33 +1227,33 @@ function U() {
             return console.warn(
               "Element with `commandFor` is a form participant. It should explicitly set `type=button` in order for `commandFor` to work"
             ), null;
-          const i = u.get(this);
-          if (i)
-            return i.isConnected ? i : (u.delete(this), null);
-          const o = t(this), d = this.getAttribute("commandfor");
-          return (o instanceof Document || o instanceof ShadowRoot) && d && o.getElementById(d) || null;
+          const o = u.get(this);
+          if (o)
+            return o.isConnected ? o : (u.delete(this), null);
+          const i = t(this), d = this.getAttribute("commandfor");
+          return (i instanceof Document || i instanceof ShadowRoot) && d && i.getElementById(d) || null;
         }
       },
       command: {
         enumerable: !0,
         configurable: !0,
         get() {
-          const i = this.getAttribute("command") || "";
-          if (i.startsWith("--")) return i;
-          const o = i.toLowerCase();
-          switch (o) {
+          const o = this.getAttribute("command") || "";
+          if (o.startsWith("--")) return o;
+          const i = o.toLowerCase();
+          switch (i) {
             case "show-modal":
             case "request-close":
             case "close":
             case "toggle-popover":
             case "hide-popover":
             case "show-popover":
-              return o;
+              return i;
           }
           return "";
         },
-        set(i) {
-          this.setAttribute("command", i);
+        set(o) {
+          this.setAttribute("command", o);
         }
       },
       invokeAction: {
@@ -1169,7 +1264,7 @@ function U() {
             "invokeAction is deprecated. It has been renamed to command"
           );
         },
-        set(i) {
+        set(o) {
           throw new Error(
             "invokeAction is deprecated. It has been renamed to command"
           );
@@ -1183,7 +1278,7 @@ function U() {
             "invokeTargetElement is deprecated. It has been renamed to command"
           );
         },
-        set(i) {
+        set(o) {
           throw new Error(
             "invokeTargetElement is deprecated. It has been renamed to command"
           );
@@ -1191,17 +1286,17 @@ function U() {
       }
     });
   }
-  const m = /* @__PURE__ */ new WeakMap();
+  const f = /* @__PURE__ */ new WeakMap();
   Object.defineProperties(HTMLElement.prototype, {
     oncommand: {
       enumerable: !0,
       configurable: !0,
       get() {
-        return g.takeRecords(), m.get(this) || null;
+        return b.takeRecords(), f.get(this) || null;
       },
       set(r) {
-        const i = m.get(this) || null;
-        i && this.removeEventListener("command", i), m.set(
+        const o = f.get(this) || null;
+        o && this.removeEventListener("command", o), f.set(
           this,
           typeof r == "object" || typeof r == "function" ? r : null
         ), typeof r == "function" && this.addEventListener("command", r);
@@ -1209,86 +1304,86 @@ function U() {
     }
   });
   function p(r) {
-    for (const i of r)
-      i.oncommand = new Function("event", i.getAttribute("oncommand"));
+    for (const o of r)
+      o.oncommand = new Function("event", o.getAttribute("oncommand"));
   }
-  const g = new MutationObserver((r) => {
-    for (const i of r) {
-      const { target: o } = i;
-      i.type === "childList" ? p(o.querySelectorAll("[oncommand]")) : p([o]);
+  const b = new MutationObserver((r) => {
+    for (const o of r) {
+      const { target: i } = o;
+      o.type === "childList" ? p(i.querySelectorAll("[oncommand]")) : p([i]);
     }
   });
-  g.observe(document, {
+  b.observe(document, {
     subtree: !0,
     childList: !0,
     attributeFilter: ["oncommand"]
   }), p(document.querySelectorAll("[oncommand]"));
   const I = /* @__PURE__ */ new WeakSet();
-  function k(r) {
+  function y(r) {
     if (I.has(r) || (I.add(r), r.defaultPrevented) || r.type !== "click") return;
-    const i = r.target.closest(
+    const o = r.target.closest(
       "button[invoketarget], button[invokeaction], input[invoketarget], input[invokeaction]"
     );
-    if (i && (console.warn(
+    if (o && (console.warn(
       "Elements with `invoketarget` or `invokeaction` are deprecated and should be renamed to use `commandfor` and `command` respectively"
-    ), i.matches("input")))
+    ), o.matches("input")))
       throw new Error("Input elements no longer support `commandfor`");
-    const o = r.target.closest("button[commandfor], button[command]");
-    if (!o) return;
-    if (o.form && o.getAttribute("type") !== "button")
+    const i = r.target.closest("button[commandfor], button[command]");
+    if (!i) return;
+    if (i.form && i.getAttribute("type") !== "button")
       throw r.preventDefault(), new Error(
         "Element with `commandFor` is a form participant. It should explicitly set `type=button` in order for `commandFor` to work. In order for it to act as a Submit button, it must not have command or commandfor attributes"
       );
-    if (o.hasAttribute("command") !== o.hasAttribute("commandfor")) {
-      const C = o.hasAttribute("command") ? "command" : "commandfor", T = o.hasAttribute("command") ? "commandfor" : "command";
+    if (i.hasAttribute("command") !== i.hasAttribute("commandfor")) {
+      const w = i.hasAttribute("command") ? "command" : "commandfor", T = i.hasAttribute("command") ? "commandfor" : "command";
       throw new Error(
-        `Element with ${C} attribute must also have a ${T} attribute to function.`
+        `Element with ${w} attribute must also have a ${T} attribute to function.`
       );
     }
-    if (o.command !== "show-popover" && o.command !== "hide-popover" && o.command !== "toggle-popover" && o.command !== "show-modal" && o.command !== "request-close" && o.command !== "close" && !o.command.startsWith("--")) {
+    if (i.command !== "show-popover" && i.command !== "hide-popover" && i.command !== "toggle-popover" && i.command !== "show-modal" && i.command !== "request-close" && i.command !== "close" && !i.command.startsWith("--")) {
       console.warn(
-        `"${o.command}" is not a valid command value. Custom commands must begin with --`
+        `"${i.command}" is not a valid command value. Custom commands must begin with --`
       );
       return;
     }
-    const d = o.commandForElement;
+    const d = i.commandForElement;
     if (!d) return;
-    const E = new c("command", {
-      command: o.command,
-      source: o,
+    const E = new a("command", {
+      command: i.command,
+      source: i,
       cancelable: !0
     });
     if (d.dispatchEvent(E), E.defaultPrevented)
       return;
     const x = E.command.toLowerCase();
     if (d.popover) {
-      const C = !d.matches(":popover-open");
-      C && (x === "toggle-popover" || x === "show-popover") ? d.showPopover({ source: o }) : !C && x === "hide-popover" && d.hidePopover();
+      const w = !d.matches(":popover-open");
+      w && (x === "toggle-popover" || x === "show-popover") ? d.showPopover({ source: i }) : !w && x === "hide-popover" && d.hidePopover();
     } else if (d.localName === "dialog") {
-      const C = !d.hasAttribute("open");
-      C && x == "show-modal" ? d.showModal() : !C && x == "close" ? d.close(o.value ? o.value : void 0) : !C && x == "request-close" && (HTMLDialogElement.prototype.requestClose || (HTMLDialogElement.prototype.requestClose = function() {
+      const w = !d.hasAttribute("open");
+      w && x == "show-modal" ? d.showModal() : !w && x == "close" ? d.close(i.value ? i.value : void 0) : !w && x == "request-close" && (HTMLDialogElement.prototype.requestClose || (HTMLDialogElement.prototype.requestClose = function() {
         const T = new Event("cancel", { cancelable: !0 });
         this.dispatchEvent(T), T.defaultPrevented || this.close();
-      }), d.requestClose(o.value ? o.value : void 0));
+      }), d.requestClose(i.value ? i.value : void 0));
     }
   }
   function D(r) {
-    r.addEventListener("click", k, !0);
+    r.addEventListener("click", y, !0);
   }
-  function B(r, i) {
-    const o = r.prototype.attachShadow;
+  function V(r, o) {
+    const i = r.prototype.attachShadow;
     r.prototype.attachShadow = function(E) {
-      const x = o.call(this, E);
-      return i(x), x;
+      const x = i.call(this, E);
+      return o(x), x;
     };
     const d = r.prototype.attachInternals;
     r.prototype.attachInternals = function() {
       const E = d.call(this);
-      return E.shadowRoot && i(E.shadowRoot), E;
+      return E.shadowRoot && o(E.shadowRoot), E;
     };
   }
-  b(HTMLButtonElement), B(HTMLElement, (r) => {
-    D(r), g.observe(r, { attributeFilter: ["oncommand"] }), p(r.querySelectorAll("[oncommand]"));
-  }), D(document), Object.assign(globalThis, { CommandEvent: c, InvokeEvent: l });
+  g(HTMLButtonElement), V(HTMLElement, (r) => {
+    D(r), b.observe(r, { attributeFilter: ["oncommand"] }), p(r.querySelectorAll("[oncommand]"));
+  }), D(document), Object.assign(globalThis, { CommandEvent: a, InvokeEvent: l });
 }
 N() || U();