@tarragon-ui/js 0.2.0 → 0.7.1

package/dist/tarragon-ui.js

@@ -1,6 +1,6 @@
-const y = "tui-", M = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
-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.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 h = {
+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 = {
   AjaxForm: {
     Name: `${y}ajax-form`,
     Event: { Form: "form" }
@@ -8,28 +8,31 @@ const h = {
   AjaxHtml: {
     Name: `${y}ajax-html`
   },
+  Dropdown: {
+    Name: `${y}dropdown`
+  },
   ExclusiveCheckbox: {
     Name: `${y}exclusive-checkbox`,
     Event: { Toggle: "toggle" }
   },
-  Dropdown: { Name: `${y}dropdown` },
   SelectAll: { Name: `${y}select-all`, Event: { Toggle: "toggle" } },
+  SearchFilter: { Name: `${y}search-filter` },
   UntilSelected: { Name: `${y}until-selected` },
   ValidateForm: {
     Name: `${y}validate-form`,
     Event: { Validate: "validate" }
   }
 };
-function E(e, t, n, s = !1) {
-  const a = new Event(`${e}:${t}`, {
+function w(e, t, n, s = !1) {
+  const c = new Event(`${e}:${t}`, {
     bubbles: !0,
     cancelable: s
   });
-  return n.dispatchEvent(a);
+  return n.dispatchEvent(c);
 }
-const T = "data-validate-group";
+const O = "validate-group";
 customElements.define(
-  h.ValidateForm.Name,
+  a.ValidateForm.Name,
   class extends HTMLElement {
     form = null;
     groups = void 0;
@@ -38,45 +41,35 @@ customElements.define(
         console.warn("No form was found");
         return;
       }
-      this.groups = Array.from(this.form.querySelectorAll(`[${T}]`)), this.form.setAttribute("novalidate", ""), this.form.addEventListener("submit", this), this.form.addEventListener("input", this), this.form.addEventListener("blur", this, { capture: !0 }), E(h.ValidateForm.Name, h.ValidateForm.Event.Validate, this), this.setAttribute("is-ready", "");
+      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"), "");
     }
-    /**
-     * Handle events
-     * @param {Event} event The event object
-     */
-    handleEvent(e) {
-      if (e.type === "blur") {
-        this.onBlur(e);
-        return;
-      }
-      if (e.type === "input") {
-        this.onInput(e);
-        return;
-      }
-      this.onSubmit(e);
+    disconnectedCallback() {
+      this.form && (this.form.removeEventListener("submit", this.onSubmit), this.form.removeEventListener("input", this.onInput), this.form.removeEventListener("blur", this.onBlur, { capture: !0 }));
     }
     /**
      * Handle input events
      * @param {Event} event The event object
      */
-    onInput(e) {
+    onInput = (e) => {
       if (!(e.target instanceof Element)) return;
-      const t = e.target.closest("[validate-group]"), n = t ?? e.target;
-      if (t?.setAttribute(T, "interacted"), !(!t && n.getAttribute("aria-invalid") !== "true")) {
+      const t = e.target.closest(A(O)), n = t ?? e.target;
+      if (t?.setAttribute(h(O), "interacted"), !(!t && n.getAttribute("aria-invalid") !== "true")) {
         if (t) {
           this.isGroupValid(t);
           return;
         }
         this.isFieldValid(n);
       }
-    }
+    };
     /**
      * Handle blur events
      * @param {Event} event The event object
      */
-    onBlur(e) {
+    onBlur = (e) => {
       if (!(e.target instanceof Element)) return;
-      const t = e.target.closest(`[${T}="interacted"]`);
+      const t = e.target.closest(`[${O}="interacted"]`);
       if (t) {
         this.isGroupValid(t);
         return;
@@ -86,27 +79,27 @@ customElements.define(
         return;
       }
       this.showError(e.target);
-    }
+    };
     /**
      * Handle submit events
      * @param {Event} event The event object
      */
-    onSubmit(e) {
-      if (!E(
-        h.ValidateForm.Name,
-        h.ValidateForm.Event.Validate,
+    onSubmit = (e) => {
+      if (!w(
+        a.ValidateForm.Name,
+        a.ValidateForm.Event.Validate,
         this,
         !0
       )) return;
       const n = this.checkGroupValidity();
       if (this.checkFieldValidity() && n) {
-        E(h.ValidateForm.Name, h.ValidateForm.Event.Validate, this);
+        w(a.ValidateForm.Name, a.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 }), E(h.ValidateForm.Name, h.ValidateForm.Event.Validate, this);
-    }
+      )?.focus({ focusVisible: !0 }), w(a.ValidateForm.Name, a.ValidateForm.Event.Validate, this);
+    };
     /**
      * Check the validity of fields that can be validated with HTMLFormElement.checkValidity().
      * Show error messages for fields that are not.
@@ -156,31 +149,33 @@ customElements.define(
       const n = this.getMessage(e, t);
       if (!n) return;
       e.setAttribute("aria-invalid", "true");
-      const s = document.querySelector(
-        "#validation-message-template"
-      ), a = !!s, c = e.getAttribute("aria-describedby"), l = c ?? `${y}${crypto.randomUUID()}`;
-      if (c) {
-        const g = this.form?.querySelector(`#${c}`);
-        if (g) {
-          if (a) {
-            const u = g.querySelector(
-              '[data-slot="form-message"]'
+      const s = this.querySelector(
+        A("validation-message-template")
+      ), c = !!s, l = e.getAttribute("aria-describedby"), u = l ?? `${y}${crypto.randomUUID()}`;
+      if (l) {
+        const m = this.form?.querySelector(`#${l}`);
+        if (m) {
+          if (c) {
+            const p = m.querySelector(
+              A("slot", "form-message")
             );
-            u && (u.textContent = n), g.id = l, e.setAttribute("aria-describedby", l);
+            p && (p.textContent = n), m.id = u, e.setAttribute("aria-describedby", u);
             return;
           }
-          g.textContent = n, g.id = l, e.setAttribute("aria-describedby", l);
+          m.textContent = n, m.id = u, e.setAttribute("aria-describedby", u);
           return;
         }
       }
-      let d;
-      if (a) {
-        d = s.content.cloneNode(!0).firstElementChild, d.id = l;
-        const u = d.querySelector('[data-slot="form-message"]');
-        u && (u.textContent = n);
+      let b;
+      if (c) {
+        b = s.content.cloneNode(!0).firstElementChild, b.id = u;
+        const p = b.querySelector(
+          A("slot", "form-message")
+        );
+        p && (p.textContent = n);
       } else
-        d = document.createElement("p"), d.textContent = n, d.id = l, d.className = "form-message";
-      e.setAttribute("aria-describedby", l), t ? e.append(d) : e.after(d);
+        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);
     }
     /**
      * Get the error message text
@@ -189,11 +184,11 @@ customElements.define(
      * @return {String} The error message
      */
     getMessage(e, t = !1) {
-      const n = e.getAttribute("data-validate-message");
+      const n = e.getAttribute(h("validate-message"));
       if (n) return n;
       if (t) {
-        const a = this.getAttribute("checkbox-group-message") ?? "Please select at least one option.", c = this.getAttribute("radio-group-message") ?? "Please select an option.";
-        return e.querySelector('[type="checkbox"]') ? a : c;
+        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;
       }
       return "validationMessage" in e ? e.validationMessage : "";
     }
@@ -208,21 +203,20 @@ customElements.define(
     }
   }
 );
-class v {
+class S {
   static instance = void 0;
-  baseUrl;
   baseHeaders = void 0;
-  constructor(t, n = {}) {
-    this.baseUrl = t, this.baseHeaders = n;
+  constructor(t = {}) {
+    this.baseHeaders = t;
   }
   // Singleton pattern with initial configuration.
   // 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, n) {
-    return v.instance ? (t && (v.instance.baseUrl = t), n && (v.instance.baseHeaders = {
-      ...v.instance.baseHeaders,
-      ...n
-    })) : v.instance = new v(t, n), v.instance;
+  static getInstance(t) {
+    return S.instance ? t && (S.instance.baseHeaders = {
+      ...S.instance.baseHeaders,
+      ...t
+    }) : S.instance = new S(t), S.instance;
   }
   isMethod(t) {
     return ["GET", "PUT", "POST", "PATCH", "DELETE"].includes(t.toUpperCase());
@@ -240,41 +234,41 @@ class v {
   }
   async send(t, n, s) {
     try {
-      const a = this.buildQueryString(s.queryParameters), c = `${this.baseUrl}${t}${a}`, l = {
-        method: n,
+      const c = n.toUpperCase(), l = this.buildQueryString(s.queryParameters), u = `${t}${l}`, b = {
+        method: c,
         headers: this.buildHeaders(s.headers)
       };
-      n !== "GET" && "data" in s && s.data && (l.body = s.data);
-      const d = await fetch(c, l);
-      if (!d.ok) {
-        const u = {
+      c !== "GET" && "data" in s && s.data && (b.body = s.data);
+      const m = await fetch(u, b);
+      if (!m.ok) {
+        const g = {
           message: "Request failed",
-          status: d.status
+          status: m.status
         };
-        if (d.headers.get("content-type")?.includes("application/json"))
+        if (m.headers.get("content-type")?.includes("application/json"))
           try {
-            const p = await d.json();
-            u.message = p.message ?? p.error ?? u.message;
-          } catch (p) {
-            u.message = `Failed to parse error JSON: ${u.message}`, u.error = p instanceof Error ? p : new Error(String(p));
+            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));
           }
         else {
-          const p = await d.text();
-          p && (u.message = `Server responded with an error: ${p.substring(0, 100)}`);
+          const k = await m.text();
+          k && (g.message = `Server responded with an error: ${k.substring(0, 100)}`);
         }
-        return [u, void 0];
+        return [g, void 0];
       }
-      const g = d.headers.get("content-type");
-      if (g?.includes("application/json"))
-        return [void 0, await d.json()];
-      if (g?.includes("text/html")) {
-        const u = await d.text();
-        return [void 0, { type: "html", document: new DOMParser().parseFromString(u, "text/html") }];
-      } else if (g?.includes("text/plain"))
-        return [void 0, { type: "json", message: await d.text() }];
+      const p = m.headers.get("content-type");
+      if (p?.includes("application/json"))
+        return [void 0, await m.json()];
+      if (p?.includes("text/html")) {
+        const g = await m.text();
+        return [void 0, { type: "html", document: new DOMParser().parseFromString(g, "text/html") }];
+      } else if (p?.includes("text/plain"))
+        return [void 0, { type: "json", message: await m.text() }];
       return [void 0, { type: "json", message: "Request successful, no content." }];
-    } catch (a) {
-      return a instanceof Error ? [{ message: "Network error", error: a }, void 0] : [{ message: "An unknown error occurred" }, void 0];
+    } catch (c) {
+      return c instanceof Error ? [{ message: "Network error", error: c }, void 0] : [{ message: "An unknown error occurred" }, void 0];
     }
   }
   get(t, n) {
@@ -293,33 +287,33 @@ class v {
     return this.send(t, "DELETE", n ?? {});
   }
 }
-const L = v.getInstance("", {
+const F = S.getInstance({
   "Content-Type": "application/json"
-}), F = {
+}), H = {
   staleTime: 0
 };
-class C {
+class L {
   static instance = void 0;
   cache = /* @__PURE__ */ new Map();
   subscriptions = /* @__PURE__ */ new Map();
   refetchIntervals = /* @__PURE__ */ new Map();
   static getInstance() {
-    return C.instance ??= new C(), C.instance;
+    return L.instance ??= new L(), L.instance;
   }
   // Centralized state update logic
   updateQueryState(t, n, s) {
-    const a = this.cache.get(t), c = a ? { ...a } : {
+    const c = this.cache.get(t), l = c ? { ...c } : {
       data: void 0,
       isFetching: !1,
       error: null,
-      meta: { ...F }
+      meta: { ...H }
     };
-    s && (c.meta = { ...c.meta, ...s });
-    const l = { ...c, ...n };
-    l.meta = {
-      ...F,
-      ...c.meta
-    }, this.cache.set(t, l), this.notifySubscribers(t, l), this.manageRefetchInterval(t, l.meta.staleTime);
+    s && (l.meta = { ...l.meta, ...s });
+    const u = { ...l, ...n };
+    u.meta = {
+      ...H,
+      ...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) => {
@@ -329,10 +323,10 @@ class C {
   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 a = window.setInterval(() => {
+      const c = window.setInterval(() => {
         this.invalidateQuery(t);
       }, n);
-      this.refetchIntervals.set(t, a);
+      this.refetchIntervals.set(t, c);
     }
   }
   /**
@@ -344,8 +338,8 @@ class C {
    */
   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);
-    const c = this.cache.get(t);
-    return c && n(c), this.manageRefetchInterval(t, c?.meta.staleTime ?? 0), () => {
+    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));
     };
   }
@@ -390,12 +384,12 @@ class C {
       // Always true when a fetch is in progress
       error: null
     });
-    const [a, c] = await L.get(t);
-    if (a) {
+    const [c, l] = await F.get(t);
+    if (c) {
       this.updateQueryState(
         t,
         {
-          error: a.message,
+          error: c.message,
           isFetching: !1
         },
         n
@@ -405,7 +399,7 @@ class C {
     this.updateQueryState(
       t,
       {
-        data: c,
+        data: l,
         isFetching: !1,
         error: null
       },
@@ -425,9 +419,9 @@ class C {
     n.isFetching || this.fetchQuery(t);
   }
 }
-const S = C.getInstance();
+const M = L.getInstance();
 customElements.define(
-  h.AjaxForm.Name,
+  a.AjaxForm.Name,
   class extends HTMLElement {
     form = null;
     announce = null;
@@ -443,8 +437,8 @@ customElements.define(
     connectedCallback() {
       if (this.form = this.querySelector("form"), !this.form) return;
       const e = this.querySelector('[role="status"]');
-      e ? (this.announce = e, this.announceTitle = e.querySelector(".alert-title")) : (this.announce = document.createElement("div"), this.announce.setAttribute("role", "status"), this.announceTitle = document.createElement("p"), this.announceTitle.className = "alert-title", this.announce.append(this.announceTitle), this.append(this.announce)), this.messageSubmitting = this.getAttribute("message-submitting") ?? this.messageSubmitting, this.messageSuccess = this.getAttribute("message-success") ?? this.messageSuccess, this.messageError = this.getAttribute("message-error") ?? this.messageError, this.keepFields = this.hasAttribute("keep-fields"), this.queryKeyToInvalidate = this.getAttribute("query-key");
-      const t = this.getAttribute("action-on-success");
+      e ? (this.announce = e, this.announceTitle = e.querySelector(".alert-title")) : (this.announce = document.createElement("div"), this.announce.setAttribute("role", "status"), this.announceTitle = document.createElement("p"), this.announceTitle.className = "alert-title", this.announce.append(this.announceTitle), this.append(this.announce)), this.messageSubmitting = this.getAttribute(h("message-submitting")) ?? this.messageSubmitting, this.messageSuccess = this.getAttribute(h("message-success")) ?? this.messageSuccess, this.messageError = this.getAttribute(h("message-error")) ?? this.messageError, this.keepFields = this.hasAttribute(h("keep-fields")), this.queryKeyToInvalidate = this.getAttribute(h("query-key"));
+      const t = this.getAttribute(h("action-on-success"));
       t === "remove-form" ? this.actionOnSuccess = "remove-form" : t === "remove-message" && (this.actionOnSuccess = "remove-message"), this.spinner = document.createElement("div"), this.spinner.className = "loading", this.spinner.innerHTML = '<div class="spinner"></div>', this.append(this.spinner), this.form.addEventListener("submit", this);
     }
     disconnectedCallback() {
@@ -457,53 +451,53 @@ customElements.define(
       if (!this.form || (e.preventDefault(), this.isDisabled())) return;
       this.disable(), this.showStatus(this.messageSubmitting, "pending");
       const { action: t, method: n } = this.form;
-      if (!L.isMethod(n)) {
+      if (!F.isMethod(n)) {
         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 [a, c] = await L.send(t, n, {
+      const [c, l] = await F.send(t, n, {
         data: this.serialize(),
         headers: {
           "Content-Type": "application/x-www-form-urlencoded",
           "X-Requested-With": "XMLHttpRequest"
         }
       });
-      if (this.enable(), s?.focus(), a) {
-        console.error("An error occurred", a), this.showStatus(this.messageError, "error");
+      if (this.enable(), s?.focus(), c) {
+        console.error("An error occurred", c), this.showStatus(this.messageError, "error");
         return;
       }
-      if (this.actionOnSuccess === "remove-form" && this.form.remove(), this.keepFields || this.reset(), c.type === "html") {
+      if (this.actionOnSuccess === "remove-form" && this.form.remove(), this.keepFields || this.reset(), l.type === "html") {
         if (!this.queryKeyToInvalidate) return;
-        S.setQueryData(this.queryKeyToInvalidate, c), this.showStatus(this.messageSuccess, "success");
+        M.setQueryData(this.queryKeyToInvalidate, l), this.showStatus(this.messageSuccess, "success");
         return;
       }
-      if (this.showStatus(c.message ?? this.messageSuccess, "success"), c.redirectUrl) {
-        window.location.href = c.redirectUrl;
+      if (this.showStatus(l.message ?? this.messageSuccess, "success"), l.redirectUrl) {
+        window.location.href = l.redirectUrl;
         return;
       }
-      c.queryKey && S.invalidateQuery(c.queryKey), this.queryKeyToInvalidate && S.invalidateQuery(this.queryKeyToInvalidate), E(h.AjaxForm.Name, h.AjaxForm.Event.Form, this);
+      l.queryKey && M.invalidateQuery(l.queryKey), this.queryKeyToInvalidate && M.invalidateQuery(this.queryKeyToInvalidate), w(a.AjaxForm.Name, a.AjaxForm.Event.Form, this);
     }
     disable() {
-      this.setAttribute(this.isSubmittingAttribute, "");
+      this.setAttribute(h(this.isSubmittingAttribute), "");
     }
     enable() {
-      this.removeAttribute(this.isSubmittingAttribute);
+      this.removeAttribute(h(this.isSubmittingAttribute));
     }
     isDisabled() {
-      return this.hasAttribute(this.isSubmittingAttribute);
+      return this.hasAttribute(h(this.isSubmittingAttribute));
     }
     showStatus(e, t) {
       if (!(!this.announce || !this.announceTitle))
         switch (this.announceTitle.textContent = e, this.showStatusIcon(t), t) {
           case "success":
-            this.announce.className = "alert alert-success", this.actionOnSuccess === "remove-message" && setTimeout(() => {
+            this.announce.className = "alert success", this.actionOnSuccess === "remove-message" && setTimeout(() => {
               !this.announce || !this.announceTitle || (this.announceTitle.textContent = "", this.announce.className = "", this.showStatusIcon("pending"));
-            }, 6 * 1e3);
+            }, 6 * K);
             break;
           case "error":
-            this.announce.className = "alert alert-danger";
+            this.announce.className = "alert danger";
             break;
           case "pending":
             this.announce.className = "alert visually-hidden";
@@ -512,16 +506,20 @@ customElements.define(
     }
     showStatusIcon(e) {
       if (!this.announce) return;
-      const t = this.announce.querySelector("[data-announce-success-icon]"), n = this.announce.querySelector("[data-announce-error-icon]");
+      const t = this.announce.querySelector(
+        A("announce-success-icon")
+      ), n = this.announce.querySelector(
+        A("announce-error-icon")
+      );
       switch (e) {
         case "success":
-          t?.removeAttribute("hidden"), n?.setAttribute("hidden", "");
+          t?.removeAttribute(v), n?.setAttribute(v, "");
           break;
         case "error":
-          t?.setAttribute("hidden", ""), n?.removeAttribute("hidden");
+          t?.setAttribute(v, ""), n?.removeAttribute(v);
           break;
         case "pending":
-          t?.setAttribute("hidden", ""), n?.setAttribute("hidden", "");
+          t?.setAttribute(v, ""), n?.setAttribute(v, "");
           break;
       }
     }
@@ -538,7 +536,7 @@ customElements.define(
   }
 );
 customElements.define(
-  h.AjaxHtml.Name,
+  a.AjaxHtml.Name,
   class extends HTMLElement {
     queryKey = null;
     unsubscribe = null;
@@ -547,21 +545,25 @@ customElements.define(
     intersectionObserver = null;
     staleTime;
     connectedCallback() {
-      if (this.queryKey = this.getAttribute("query-key"), !this.queryKey) {
-        console.warn(`${h.AjaxHtml.Name} requires a "query-key" attribute.`, this);
+      if (!this.id) {
+        console.warn(`${a.AjaxHtml.Name} requires a "id" attribute.`, this);
         return;
       }
-      this.staleTime = this.hasAttribute("stale-time") ? (
+      if (this.queryKey = this.getAttribute(h("query-key")), !this.queryKey) {
+        console.warn(`${a.AjaxHtml.Name} requires a "query-key" attribute.`, this);
+        return;
+      }
+      this.staleTime = this.hasAttribute(h("stale-time")) ? (
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        parseInt(this.getAttribute("stale-time"), 10)
-      ) : void 0, this.unsubscribe = S.subscribe(
+        parseInt(this.getAttribute(h("stale-time")), 10)
+      ) : void 0, this.unsubscribe = M.subscribe(
         this.queryKey,
         (t) => {
           this.renderContent(t);
         },
         { staleTime: this.staleTime }
       );
-      const e = this.getAttribute("load-strategy");
+      const e = this.getAttribute(h("load-strategy"));
       if (e)
         switch (e) {
           case "server-side":
@@ -572,36 +574,32 @@ customElements.define(
             break;
           case "lazy":
             this.intersectionObserver = new IntersectionObserver(
-              this.handleIntersection.bind(this),
+              this.handleIntersection,
               { rootMargin: "0px 0px 100px 0px" }
             ), this.intersectionObserver.observe(this);
             break;
           case "defer":
-            document.addEventListener(
-              "DOMContentLoaded",
-              this.handleDomContentLoaded.bind(this),
-              {
-                once: !0
-              }
-            );
+            document.addEventListener("DOMContentLoaded", this.handleDomContentLoaded, {
+              once: !0
+            });
             break;
         }
       else
         this.initialFetchTriggered = !0;
     }
     disconnectedCallback() {
-      this.unsubscribe && this.unsubscribe(), document.removeEventListener("DOMContentLoaded", this.handleDomContentLoaded.bind(this)), this.intersectionObserver && (this.intersectionObserver.unobserve(this), this.intersectionObserver.disconnect(), this.intersectionObserver = null);
+      this.unsubscribe && this.unsubscribe(), document.removeEventListener("DOMContentLoaded", this.handleDomContentLoaded), this.intersectionObserver && (this.intersectionObserver.unobserve(this), this.intersectionObserver.disconnect(), this.intersectionObserver = null);
     }
-    handleDomContentLoaded() {
+    handleDomContentLoaded = () => {
       this.triggerInitialFetch();
-    }
-    handleIntersection(e) {
+    };
+    handleIntersection = (e) => {
       e.forEach((t) => {
         t.isIntersecting && (this.triggerInitialFetch(), this.intersectionObserver && this.intersectionObserver.unobserve(this));
       });
-    }
+    };
     triggerInitialFetch() {
-      this.queryKey && (this.initialFetchTriggered || (this.initialFetchTriggered = !0, S.invalidateQuery(this.queryKey)));
+      this.queryKey && (this.initialFetchTriggered || (this.initialFetchTriggered = !0, M.invalidateQuery(this.queryKey)));
     }
     renderContent(e) {
       if (!this.initialFetchTriggered || !e.data || e.data.type !== "html") return;
@@ -618,124 +616,165 @@ customElements.define(
     }
   }
 );
+const $ = "[popover]", P = (e) => `[popovertarget="${e}"]`, q = {
+  open: "open",
+  closed: "closed"
+};
 customElements.define(
-  h.Dropdown.Name,
+  a.Dropdown.Name,
   class extends HTMLElement {
-    dropdown = null;
+    popoverElement = null;
     trigger = null;
-    content = null;
+    focusableElements = [];
+    searchString = "";
+    searchTimeout = -1;
     connectedCallback() {
-      this.dropdown = this.querySelector("details"), this.trigger = this.querySelector("summary"), this.content = this.querySelector("ul"), !(!this.dropdown || !this.trigger || !this.content) && (this.trigger.addEventListener(f.Click, this.handleOpen.bind(this)), this.dropdown.addEventListener(f.Toggle, this.handleToggle.bind(this)));
+      const e = this.querySelector($);
+      if (!e) {
+        console.error(
+          `${a.Dropdown.Name} component: Missing element with selector "${$}"`
+        );
+        return;
+      }
+      this.popoverElement = e;
+      const t = this.querySelector(
+        P(this.popoverElement.id)
+      );
+      if (!t) {
+        console.error(
+          `${a.Dropdown.Name} component: Missing element with selector "${P(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");
     }
     disconnectedCallback() {
-      this.trigger && this.trigger.removeEventListener(f.Click, this.handleOpen.bind(this)), this.dropdown && this.dropdown.removeEventListener(f.Toggle, this.handleToggle.bind(this)), this.removeEvents();
+      this.removeEventListener(f.KeyDown, this.handleKeydown), this.popoverElement?.removeEventListener(f.Toggle, this.handleToggle);
     }
-    focusFirstDropdownItem() {
-      if (!this.content) return;
-      const e = Array.from(
-        this.content.querySelectorAll(M)
-      );
-      if (e.length === 0) {
-        this.content.focus();
+    getFocusableElementsForTrap() {
+      return this.popoverElement ? [...Array.from(
+        this.popoverElement.querySelectorAll(R)
+      )].filter(Boolean) : [];
+    }
+    handleToggle = (e) => {
+      if (e.newState === "open") {
+        this.onPopoverOpen();
         return;
       }
-      const t = e[0];
-      setTimeout(() => {
-        t && t.focus();
-      }, 1);
+      this.onPopoverClose();
+    };
+    onPopoverOpen() {
+      this.popoverElement && this.popoverElement.setAttribute(h("state"), q.open);
     }
-    handleTrapFocus(e) {
-      if (!this.content || !(e instanceof KeyboardEvent)) return;
-      const t = Array.from(
-        this.content.querySelectorAll(M)
-      );
-      if (t.length <= 0) return;
-      const n = t[0], s = t[t.length - 1], a = document.activeElement;
-      if (!a) return;
-      const c = t.indexOf(a);
-      if (e.key === "Tab") {
-        if (e.shiftKey) {
-          if (a === n) {
-            if (!s) return;
-            s.focus(), e.preventDefault();
-            return;
-          }
-          return;
-        }
-        if (a === s) {
-          if (!n) return;
-          n.focus(), e.preventDefault();
-          return;
-        }
-      }
-      if (e.key === "ArrowUp" || e.key === "ArrowLeft") {
-        if (e.preventDefault(), e.altKey) {
-          if (!n) return;
-          n.focus();
-          return;
-        }
-        if (c === 0 || c === -1) {
-          if (!s) return;
-          s.focus();
-          return;
-        }
-        t[c - 1]?.focus();
+    onPopoverClose() {
+      this.popoverElement && this.popoverElement.setAttribute(h("state"), q.closed);
+    }
+    isOpen() {
+      return this.popoverElement ? this.popoverElement.getAttribute(h("state")) === q.open : !1;
+    }
+    handleKeydown = (e) => {
+      if (this.isOpen()) {
+        this.handleKeyboardWhenOpen(e);
         return;
       }
-      if (e.key === "ArrowDown" || e.key === "ArrowRight") {
-        if (e.preventDefault(), e.altKey) {
-          if (!s) return;
-          s.focus();
-          return;
+      this.handleKeyboardWhenClosed(e);
+    };
+    handleKeyboardWhenClosed = (e) => {
+      if (!this.isOpen())
+        switch (e.key) {
+          case "Enter":
+          case " ":
+          case "ArrowDown":
+            e.preventDefault(), this.openPopover(), this.focusOptionByIndex(0);
+            break;
+          case "ArrowUp":
+            e.preventDefault(), this.openPopover(), this.focusOptionByIndex(this.focusableElements.length - 1);
+            break;
+          default:
+            /^[a-zA-Z0-9]$/.test(e.key) && (e.preventDefault(), this.openPopover(), this.handleSearchString(e.key));
+            break;
         }
-        if (c === t.length - 1 || c === -1) {
-          if (!n) return;
-          n.focus();
-          return;
+    };
+    handleKeyboardWhenOpen = (e) => {
+      if (this.isOpen())
+        switch (e.key) {
+          case " ":
+            e.preventDefault(), this.triggerAction(e);
+            break;
+          case "Tab":
+            this.closePopover(), e.shiftKey && (e.preventDefault(), this.trigger?.focus());
+            break;
+          case "ArrowDown":
+            e.target && (e.target instanceof HTMLAnchorElement || e.target instanceof HTMLButtonElement) && this.focusOptionByStep(e.target, 1, e);
+            break;
+          case "ArrowUp":
+            e.target && (e.target instanceof HTMLAnchorElement || e.target instanceof HTMLButtonElement) && this.focusOptionByStep(e.target, -1, e);
+            break;
+          case "Home":
+            e.preventDefault(), this.focusOptionByIndex(0);
+            break;
+          case "End":
+            e.preventDefault(), this.focusOptionByIndex(this.focusableElements.length - 1);
+            break;
+          default:
+            /^[a-zA-Z0-9]$/.test(e.key) && (e.preventDefault(), this.handleSearchString(e.key));
+            break;
         }
-        t[c + 1]?.focus();
+    };
+    openPopover = () => {
+      this.trigger && (this.isOpen() || this.trigger.click());
+    };
+    closePopover = () => {
+      this.popoverElement && this.isOpen() && this.popoverElement.hidePopover();
+    };
+    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();
         return;
       }
+      const u = (l + t + s.length) % s.length;
+      u >= s.length || u < 0 || s[u]?.focus();
+    };
+    focusOptionByIndex(e) {
+      if (!this.focusableElements.length) return;
+      const t = Math.max(0, Math.min(e, this.focusableElements.length - 1));
+      this.focusableElements[t]?.focus();
+    }
+    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(() => {
+        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;
+      }
+      return null;
     }
-    addEvents() {
-      !this.dropdown || !this.content || (document.addEventListener(f.Click, this.handleClickOutside.bind(this)), this.dropdown.addEventListener(f.KeyDown, this.handleEscape.bind(this)), this.content.addEventListener(f.KeyDown, this.handleTrapFocus.bind(this), {
-        capture: !0
-      }));
-    }
-    removeEvents() {
-      document.removeEventListener(f.Click, this.handleClickOutside.bind(this)), this.dropdown && this.dropdown.removeEventListener(f.KeyDown, this.handleEscape.bind(this)), this.content && this.content.removeEventListener(
-        f.KeyDown,
-        this.handleTrapFocus.bind(this),
-        {
-          capture: !0
-        }
-      );
-    }
-    handleToggle() {
-      this.dropdown && (this.dropdown.open ? (this.focusFirstDropdownItem(), this.addEvents()) : this.removeEvents());
-    }
-    handleClose() {
-      !this.dropdown || !this.trigger || (this.dropdown.removeAttribute("open"), this.trigger.focus(), this.removeEvents());
-    }
-    handleOpen() {
-      this.dropdown?.open || (this.focusFirstDropdownItem(), this.addEvents());
-    }
-    handleClickOutside(e) {
-      this.dropdown && (this.dropdown.contains(e.target) || this.handleClose());
-    }
-    handleEscape(e) {
-      e instanceof KeyboardEvent && e.key === "Escape" && (e.preventDefault(), this.handleClose());
+    getActiveOption() {
+      const e = document.activeElement;
+      return !e || !(e instanceof HTMLAnchorElement) || !(e instanceof HTMLButtonElement) ? null : this.focusableElements.find((t) => t === e) ?? null;
     }
   }
 );
 customElements.define(
-  h.ExclusiveCheckbox.Name,
+  a.ExclusiveCheckbox.Name,
   class extends HTMLElement {
     targetName = null;
     exclusiveCheckbox = null;
     checkboxes = null;
     connectedCallback() {
-      this.targetName = this.getAttribute("target-name"), this.exclusiveCheckbox = this.querySelector("input"), !(!this.targetName || !this.exclusiveCheckbox || !this.parentElement) && (this.checkboxes = [
+      this.targetName = this.getAttribute(h("target-name")), this.exclusiveCheckbox = this.querySelector("input"), !(!this.targetName || !this.exclusiveCheckbox || !this.parentElement) && (this.checkboxes = [
         ...this.parentElement.querySelectorAll(
           `[name="${this.targetName}"]`
         )
@@ -744,53 +783,50 @@ customElements.define(
     disconnectedCallback() {
       if (this.exclusiveCheckbox && this.exclusiveCheckbox.removeEventListener(
         f.Change,
-        this.handleExclusiveChange.bind(this)
+        this.handleExclusiveChange
       ), this.checkboxes)
         for (const e of this.checkboxes)
-          e.removeEventListener(
-            f.Change,
-            this.handleCheckboxChange.bind(this)
-          );
+          e.removeEventListener(f.Change, this.handleCheckboxChange);
     }
     addEvents() {
       if (!(!this.exclusiveCheckbox || !this.targetName || !this.parentElement || !this.checkboxes)) {
-        this.exclusiveCheckbox.addEventListener("change", this.handleExclusiveChange.bind(this));
+        this.exclusiveCheckbox.addEventListener("change", this.handleExclusiveChange);
         for (const e of this.checkboxes)
-          e.disabled || e.addEventListener(f.Change, this.handleCheckboxChange.bind(this));
+          e.disabled || e.addEventListener(f.Change, this.handleCheckboxChange);
       }
     }
-    handleExclusiveChange() {
+    handleExclusiveChange = () => {
       if (!this.exclusiveCheckbox || !this.checkboxes || this.checkboxes.length === 0) return;
       const e = this.exclusiveCheckbox.checked;
       for (const t of this.checkboxes)
         t.disabled || e && (t.checked = !1);
-      this.exclusiveCheckbox.indeterminate = !1, E(
-        h.ExclusiveCheckbox.Name,
-        h.ExclusiveCheckbox.Event.Toggle,
+      this.exclusiveCheckbox.indeterminate = !1, w(
+        a.ExclusiveCheckbox.Name,
+        a.ExclusiveCheckbox.Event.Toggle,
         this.exclusiveCheckbox
       );
-    }
-    handleCheckboxChange() {
+    };
+    handleCheckboxChange = () => {
       if (!this.exclusiveCheckbox || !this.checkboxes || this.checkboxes.length === 0 || !this.exclusiveCheckbox.checked) return;
       const e = this.checkboxes.some(
         (t) => !t.disabled && t.checked
       );
-      this.exclusiveCheckbox.checked = !e, E(
-        h.ExclusiveCheckbox.Name,
-        h.ExclusiveCheckbox.Event.Toggle,
+      this.exclusiveCheckbox.checked = !e, w(
+        a.ExclusiveCheckbox.Name,
+        a.ExclusiveCheckbox.Event.Toggle,
         this.exclusiveCheckbox
       );
-    }
+    };
   }
 );
 customElements.define(
-  h.SelectAll.Name,
+  a.SelectAll.Name,
   class extends HTMLElement {
     targetName = null;
     selectAllCheckbox = null;
     checkboxes = null;
     connectedCallback() {
-      this.targetName = this.getAttribute("target-name"), this.selectAllCheckbox = this.querySelector("input"), !(!this.targetName || !this.selectAllCheckbox || !this.parentElement) && (this.checkboxes = [
+      this.targetName = this.getAttribute(h("target-name")), this.selectAllCheckbox = this.querySelector("input"), !(!this.targetName || !this.selectAllCheckbox || !this.parentElement) && (this.checkboxes = [
         ...this.parentElement.querySelectorAll(
           `[name="${this.targetName}"]`
         )
@@ -799,58 +835,55 @@ customElements.define(
     disconnectedCallback() {
       if (this.selectAllCheckbox && this.selectAllCheckbox.removeEventListener(
         f.Change,
-        this.handleSelectAllChange.bind(this)
+        this.handleSelectAllChange
       ), this.checkboxes)
         for (const e of this.checkboxes)
-          e.removeEventListener(
-            f.Change,
-            this.handleCheckboxChange.bind(this)
-          );
+          e.removeEventListener(f.Change, this.handleCheckboxChange);
     }
     ready() {
-      this.setAttribute("data-state", "ready");
+      this.setAttribute(h("state"), "ready");
     }
     addEvents() {
       if (!(!this.selectAllCheckbox || !this.targetName || !this.parentElement || !this.checkboxes)) {
-        this.selectAllCheckbox.addEventListener("change", this.handleSelectAllChange.bind(this));
+        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.bind(this)));
+          e.disabled || (e.parentElement?.classList.add("padding-inline-start-lg"), e.addEventListener(f.Change, this.handleCheckboxChange));
       }
     }
-    handleSelectAllChange() {
+    handleSelectAllChange = () => {
       if (!this.selectAllCheckbox || !this.checkboxes || this.checkboxes.length === 0) return;
       const e = this.selectAllCheckbox.checked;
       for (const t of this.checkboxes)
         t.disabled || (t.checked = e);
-      this.selectAllCheckbox.indeterminate = !1, E(
-        h.SelectAll.Name,
-        h.SelectAll.Event.Toggle,
+      this.selectAllCheckbox.indeterminate = !1, w(
+        a.SelectAll.Name,
+        a.SelectAll.Event.Toggle,
         this.selectAllCheckbox
       );
-    }
-    handleCheckboxChange() {
+    };
+    handleCheckboxChange = () => {
       if (!this.selectAllCheckbox || !this.checkboxes || this.checkboxes.length === 0) return;
       const e = this.checkboxes.filter(
-        (a) => !a.disabled && a.checked
+        (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, E(
-        h.SelectAll.Name,
-        h.SelectAll.Event.Toggle,
+      this.selectAllCheckbox.indeterminate = !n && !s, this.selectAllCheckbox.checked = n, w(
+        a.SelectAll.Name,
+        a.SelectAll.Event.Toggle,
         this.selectAllCheckbox
       );
-    }
+    };
   }
 );
 customElements.define(
-  h.UntilSelected.Name,
+  a.UntilSelected.Name,
   class extends HTMLElement {
     target = null;
     targetElement = null;
     focusTargetElement = null;
     events = null;
-    hideWhenChecked = !1;
+    showWhen = "checked";
     connectedCallback() {
-      if (this.target = this.getAttribute("target"), !this.target) return;
+      if (this.target = this.getAttribute(h("target")), !this.target) return;
       try {
         const s = document.getElementById(this.target);
         if (!(s instanceof HTMLInputElement)) {
@@ -862,89 +895,169 @@ customElements.define(
         console.warn("Could not select element", s);
       }
       if (!this.targetElement) return;
-      const e = this.getAttribute("focus-target");
+      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);
         }
-      const t = this.getAttribute("events");
-      t && (this.events = t.split(",").map((s) => s.trim())), this.hideWhenChecked = this.getAttribute("hide-when-checked") === "true";
+      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;
-      this.toggleAttribute("hidden", this.hideWhenChecked ? n : !n), this.addEvents();
+      this.toggleAttribute(
+        v,
+        this.showWhen === "checked" ? !n : n
+      ), this.addEvents();
     }
     disconnectedCallback() {
       if (document.removeEventListener(
-        `${h.ExclusiveCheckbox.Name}:${h.ExclusiveCheckbox.Event.Toggle}`,
-        this.handleTargetChange.bind(this)
+        `${a.ExclusiveCheckbox.Name}:${a.ExclusiveCheckbox.Event.Toggle}`,
+        this.handleTargetChange
       ), document.removeEventListener(
-        `${h.SelectAll.Name}:${h.ExclusiveCheckbox.Event.Toggle}`,
-        this.handleTargetChange.bind(this)
-      ), this.targetElement && this.targetElement.removeEventListener(
-        f.Change,
-        this.handleTargetChange.bind(this)
-      ), this.events && this.events.length > 0)
+        `${a.SelectAll.Name}:${a.ExclusiveCheckbox.Event.Toggle}`,
+        this.handleTargetChange
+      ), this.targetElement && this.targetElement.removeEventListener(f.Change, this.handleTargetChange), this.events && this.events.length > 0)
         for (const e of this.events)
-          document.removeEventListener(e, this.handleTargetChange.bind(this));
+          document.removeEventListener(e, this.handleTargetChange);
     }
     addEvents() {
       if (document.addEventListener(
-        `${h.ExclusiveCheckbox.Name}:${h.ExclusiveCheckbox.Event.Toggle}`,
-        this.handleTargetChange.bind(this)
+        `${a.ExclusiveCheckbox.Name}:${a.ExclusiveCheckbox.Event.Toggle}`,
+        this.handleTargetChange
       ), document.addEventListener(
-        `${h.SelectAll.Name}:${h.ExclusiveCheckbox.Event.Toggle}`,
-        this.handleTargetChange.bind(this)
-      ), this.targetElement && this.targetElement.addEventListener(
-        f.Change,
-        this.handleTargetChange.bind(this)
-      ), this.events && this.events.length > 0)
+        `${a.SelectAll.Name}:${a.ExclusiveCheckbox.Event.Toggle}`,
+        this.handleTargetChange
+      ), this.targetElement && this.targetElement.addEventListener(f.Change, this.handleTargetChange), this.events && this.events.length > 0)
         for (const e of this.events)
-          document.addEventListener(e, this.handleTargetChange.bind(this));
+          document.addEventListener(e, this.handleTargetChange);
     }
-    handleTargetChange() {
+    handleTargetChange = () => {
       if (!this.targetElement) return;
-      const e = this.hideWhenChecked ? this.targetElement.checked : !this.targetElement.checked;
-      this.toggleAttribute("hidden", e), e && this.focusTargetElement && this.matches(":focus-within") && this.focusTargetElement.focus();
+      const e = this.showWhen === "checked" ? !this.targetElement.checked : this.targetElement.checked;
+      this.toggleAttribute(v, e), e && this.focusTargetElement && this.matches(":focus-within") && this.focusTargetElement.focus();
+    };
+  }
+);
+function j(e, t) {
+  let n;
+  return function(...s) {
+    clearTimeout(n), n = setTimeout(() => {
+      e.apply(this, s);
+    }, t);
+  };
+}
+customElements.define(
+  a.SearchFilter.Name,
+  class extends HTMLElement {
+    // TODO Add an aria-live region to announce number of results found
+    // TODO handle focus management for accessibility
+    inputElement = null;
+    searchButton = null;
+    collections = [];
+    debouncedFilterTargets;
+    constructor() {
+      super(), this.debouncedFilterTargets = j(this.filterTargets, 300);
     }
+    connectedCallback() {
+      if (this.inputElement = this.querySelector('input[type="search"]'), this.searchButton = this.querySelector('button[type="submit"]'), !this.inputElement || !this.searchButton) return;
+      const e = this.getAttribute(h("collection-selector"));
+      if (!e) {
+        console.warn(
+          `${a.SearchFilter.Name} requires a "collection-selector" attribute.`,
+          this
+        );
+        return;
+      }
+      const t = this.getAttribute(h("target-selector"));
+      if (!t) {
+        console.warn(
+          `${a.SearchFilter.Name} requires a "target-selector" attribute.`,
+          this
+        );
+        return;
+      }
+      const n = Array.from(
+        document.querySelectorAll(e)
+      );
+      if (n.length !== 0) {
+        for (const s of n) {
+          const c = Array.from(
+            s.querySelectorAll(t)
+          );
+          this.collections.push({
+            element: s,
+            targetElements: c.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));
+      }
+    }
+    disconnectedCallback() {
+      this.inputElement?.removeEventListener(f.Input, this.debouncedFilterTargets), this.searchButton?.removeEventListener(f.Click, this.onSearchClick);
+    }
+    onSearchClick = (e) => {
+      e.preventDefault(), this.filterTargets();
+    };
+    filterTargets = () => {
+      if (!this.inputElement) return;
+      const e = this.inputElement.value.toLocaleLowerCase();
+      if (!e) {
+        for (const t of this.collections) {
+          t.element.removeAttribute(v);
+          for (const n of t.targetElements)
+            n.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, "");
+      });
+    };
   }
 );
-function O() {
+function N() {
   return typeof HTMLButtonElement < "u" && "command" in HTMLButtonElement.prototype && "source" in ((globalThis.CommandEvent || {}).prototype || {});
 }
-function H() {
+function U() {
   document.addEventListener(
     "invoke",
-    (i) => {
-      i.type == "invoke" && i.isTrusted && (i.stopImmediatePropagation(), i.preventDefault());
+    (r) => {
+      r.type == "invoke" && r.isTrusted && (r.stopImmediatePropagation(), r.preventDefault());
     },
     !0
   ), document.addEventListener(
     "command",
-    (i) => {
-      i.type == "command" && i.isTrusted && (i.stopImmediatePropagation(), i.preventDefault());
+    (r) => {
+      r.type == "command" && r.isTrusted && (r.stopImmediatePropagation(), r.preventDefault());
     },
     !0
   );
-  function e(i, o, r = !0) {
-    Object.defineProperty(i, o, {
-      ...Object.getOwnPropertyDescriptor(i, o),
-      enumerable: r
+  function e(r, i, o = !0) {
+    Object.defineProperty(r, i, {
+      ...Object.getOwnPropertyDescriptor(r, i),
+      enumerable: o
     });
   }
-  function t(i) {
-    return i && typeof i.getRootNode == "function" ? i.getRootNode() : i && i.parentNode ? t(i.parentNode) : 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 a extends Event {
-    constructor(o, r = {}) {
-      super(o, r);
-      const { source: m, command: b } = r;
-      if (m != null && !(m instanceof Element))
+  class c extends Event {
+    constructor(i, o = {}) {
+      super(i, o);
+      const { source: d, command: E } = o;
+      if (d != null && !(d instanceof Element))
         throw new TypeError("source must be an element");
-      n.set(this, m || null), s.set(
+      n.set(this, d || null), s.set(
         this,
-        b !== void 0 ? String(b) : ""
+        E !== void 0 ? String(E) : ""
       );
     }
     get [Symbol.toStringTag]() {
@@ -953,10 +1066,10 @@ function H() {
     get source() {
       if (!n.has(this))
         throw new TypeError("illegal invocation");
-      const o = n.get(this);
-      if (!(o instanceof Element)) return null;
-      const r = t(o);
-      return r !== t(this.target || document) ? r.host : o;
+      const i = n.get(this);
+      if (!(i instanceof Element)) return null;
+      const o = t(i);
+      return o !== t(this.target || document) ? o.host : i;
     }
     get command() {
       if (!s.has(this))
@@ -974,21 +1087,21 @@ function H() {
       );
     }
   }
-  e(a.prototype, "source"), e(a.prototype, "command");
-  class c extends Event {
-    constructor(o, r = {}) {
-      throw super(o, r), new Error(
+  e(c.prototype, "source"), e(c.prototype, "command");
+  class l extends Event {
+    constructor(i, o = {}) {
+      throw super(i, o), new Error(
         "InvokeEvent has been deprecated, it has been renamed to `CommandEvent`"
       );
     }
   }
-  const l = /* @__PURE__ */ new WeakMap();
-  function d(i) {
-    Object.defineProperties(i.prototype, {
+  const u = /* @__PURE__ */ new WeakMap();
+  function b(r) {
+    Object.defineProperties(r.prototype, {
       commandForElement: {
         enumerable: !0,
         configurable: !0,
-        set(o) {
+        set(i) {
           if (this.hasAttribute("invokeaction"))
             throw new TypeError(
               "Element has deprecated `invokeaction` attribute, replace with `command`"
@@ -997,12 +1110,12 @@ function H() {
             throw new TypeError(
               "Element has deprecated `invoketarget` attribute, replace with `commandfor`"
             );
-          if (o === null)
-            this.removeAttribute("commandfor"), l.delete(this);
-          else if (o instanceof Element) {
+          if (i === null)
+            this.removeAttribute("commandfor"), u.delete(this);
+          else if (i instanceof Element) {
             this.setAttribute("commandfor", "");
-            const r = t(o);
-            t(this) === r || r === this.ownerDocument ? l.set(this, o) : l.delete(this);
+            const o = t(i);
+            t(this) === o || o === this.ownerDocument ? u.set(this, i) : u.delete(this);
           } else
             throw new TypeError("commandForElement must be an element or null");
         },
@@ -1019,32 +1132,33 @@ function H() {
             return console.warn(
               "Element with `commandFor` is a form participant. It should explicitly set `type=button` in order for `commandFor` to work"
             ), null;
-          const o = l.get(this);
-          if (o)
-            return o.isConnected ? o : (l.delete(this), null);
-          const r = t(this), m = this.getAttribute("commandfor");
-          return (r instanceof Document || r instanceof ShadowRoot) && m && r.getElementById(m) || 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;
         }
       },
       command: {
         enumerable: !0,
         configurable: !0,
         get() {
-          const o = this.getAttribute("command") || "";
-          if (o.startsWith("--")) return o;
-          const r = o.toLowerCase();
-          switch (r) {
+          const i = this.getAttribute("command") || "";
+          if (i.startsWith("--")) return i;
+          const o = i.toLowerCase();
+          switch (o) {
             case "show-modal":
+            case "request-close":
             case "close":
             case "toggle-popover":
             case "hide-popover":
             case "show-popover":
-              return r;
+              return o;
           }
           return "";
         },
-        set(o) {
-          this.setAttribute("command", o);
+        set(i) {
+          this.setAttribute("command", i);
         }
       },
       invokeAction: {
@@ -1055,7 +1169,7 @@ function H() {
             "invokeAction is deprecated. It has been renamed to command"
           );
         },
-        set(o) {
+        set(i) {
           throw new Error(
             "invokeAction is deprecated. It has been renamed to command"
           );
@@ -1069,7 +1183,7 @@ function H() {
             "invokeTargetElement is deprecated. It has been renamed to command"
           );
         },
-        set(o) {
+        set(i) {
           throw new Error(
             "invokeTargetElement is deprecated. It has been renamed to command"
           );
@@ -1077,100 +1191,104 @@ function H() {
       }
     });
   }
-  const g = /* @__PURE__ */ new WeakMap();
+  const m = /* @__PURE__ */ new WeakMap();
   Object.defineProperties(HTMLElement.prototype, {
     oncommand: {
       enumerable: !0,
       configurable: !0,
       get() {
-        return x.takeRecords(), g.get(this) || null;
+        return g.takeRecords(), m.get(this) || null;
       },
-      set(i) {
-        const o = g.get(this) || null;
-        o && this.removeEventListener("command", o), g.set(
+      set(r) {
+        const i = m.get(this) || null;
+        i && this.removeEventListener("command", i), m.set(
           this,
-          typeof i == "object" || typeof i == "function" ? i : null
-        ), typeof i == "function" && this.addEventListener("command", i);
+          typeof r == "object" || typeof r == "function" ? r : null
+        ), typeof r == "function" && this.addEventListener("command", r);
       }
     }
   });
-  function u(i) {
-    for (const o of i)
-      o.oncommand = new Function("event", o.getAttribute("oncommand"));
+  function p(r) {
+    for (const i of r)
+      i.oncommand = new Function("event", i.getAttribute("oncommand"));
   }
-  const x = new MutationObserver((i) => {
-    for (const o of i) {
-      const { target: r } = o;
-      o.type === "childList" ? u(r.querySelectorAll("[oncommand]")) : u([r]);
+  const g = new MutationObserver((r) => {
+    for (const i of r) {
+      const { target: o } = i;
+      i.type === "childList" ? p(o.querySelectorAll("[oncommand]")) : p([o]);
     }
   });
-  x.observe(document, {
+  g.observe(document, {
     subtree: !0,
     childList: !0,
     attributeFilter: ["oncommand"]
-  }), u(document.querySelectorAll("[oncommand]"));
-  function p(i) {
-    if (i.defaultPrevented || i.type !== "click") return;
-    const o = i.target.closest(
+  }), p(document.querySelectorAll("[oncommand]"));
+  const I = /* @__PURE__ */ new WeakSet();
+  function k(r) {
+    if (I.has(r) || (I.add(r), r.defaultPrevented) || r.type !== "click") return;
+    const i = r.target.closest(
       "button[invoketarget], button[invokeaction], input[invoketarget], input[invokeaction]"
     );
-    if (o && (console.warn(
+    if (i && (console.warn(
       "Elements with `invoketarget` or `invokeaction` are deprecated and should be renamed to use `commandfor` and `command` respectively"
-    ), o.matches("input")))
+    ), i.matches("input")))
       throw new Error("Input elements no longer support `commandfor`");
-    const r = i.target.closest("button[commandfor], button[command]");
-    if (!r) return;
-    if (r.form && r.getAttribute("type") !== "button")
-      throw i.preventDefault(), new Error(
+    const o = r.target.closest("button[commandfor], button[command]");
+    if (!o) return;
+    if (o.form && o.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 (r.hasAttribute("command") !== r.hasAttribute("commandfor")) {
-      const w = r.hasAttribute("command") ? "command" : "commandfor", A = r.hasAttribute("command") ? "commandfor" : "command";
+    if (o.hasAttribute("command") !== o.hasAttribute("commandfor")) {
+      const C = o.hasAttribute("command") ? "command" : "commandfor", T = o.hasAttribute("command") ? "commandfor" : "command";
       throw new Error(
-        `Element with ${w} attribute must also have a ${A} attribute to function.`
+        `Element with ${C} attribute must also have a ${T} attribute to function.`
       );
     }
-    if (r.command !== "show-popover" && r.command !== "hide-popover" && r.command !== "toggle-popover" && r.command !== "show-modal" && r.command !== "close" && !r.command.startsWith("--")) {
+    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("--")) {
       console.warn(
-        `"${r.command}" is not a valid command value. Custom commands must begin with --`
+        `"${o.command}" is not a valid command value. Custom commands must begin with --`
       );
       return;
     }
-    const m = r.commandForElement;
-    if (!m) return;
-    const b = new a("command", {
-      command: r.command,
-      source: r,
+    const d = o.commandForElement;
+    if (!d) return;
+    const E = new c("command", {
+      command: o.command,
+      source: o,
       cancelable: !0
     });
-    if (m.dispatchEvent(b), b.defaultPrevented)
+    if (d.dispatchEvent(E), E.defaultPrevented)
       return;
-    const k = b.command.toLowerCase();
-    if (m.popover) {
-      const w = !m.matches(":popover-open");
-      w && (k === "toggle-popover" || k === "show-popover") ? m.showPopover({ source: r }) : !w && k === "hide-popover" && m.hidePopover();
-    } else if (m.localName === "dialog") {
-      const w = !m.hasAttribute("open");
-      w && k === "show-modal" ? m.showModal() : !w && k === "close" && m.close();
+    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();
+    } 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 T = new Event("cancel", { cancelable: !0 });
+        this.dispatchEvent(T), T.defaultPrevented || this.close();
+      }), d.requestClose(o.value ? o.value : void 0));
     }
   }
-  function I(i) {
-    i.addEventListener("click", p, !0);
+  function D(r) {
+    r.addEventListener("click", k, !0);
   }
-  function q(i, o) {
-    const r = i.prototype.attachShadow;
-    i.prototype.attachShadow = function(b) {
-      const k = r.call(this, b);
-      return o(k), k;
+  function B(r, i) {
+    const o = r.prototype.attachShadow;
+    r.prototype.attachShadow = function(E) {
+      const x = o.call(this, E);
+      return i(x), x;
     };
-    const m = i.prototype.attachInternals;
-    i.prototype.attachInternals = function() {
-      const b = m.call(this);
-      return b.shadowRoot && o(b.shadowRoot), b;
+    const d = r.prototype.attachInternals;
+    r.prototype.attachInternals = function() {
+      const E = d.call(this);
+      return E.shadowRoot && i(E.shadowRoot), E;
     };
   }
-  d(HTMLButtonElement), q(HTMLElement, (i) => {
-    I(i), x.observe(i, { attributeFilter: ["oncommand"] }), u(i.querySelectorAll("[oncommand]"));
-  }), I(document), Object.assign(globalThis, { CommandEvent: a, InvokeEvent: c });
+  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 });
 }
-O() || H();
+N() || U();