@tarragon-ui/js 0.1.0

package/dist/index.js

@@ -0,0 +1,1176 @@
+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 = {
+  AjaxForm: {
+    Name: `${y}ajax-form`,
+    Event: { Form: "form" }
+  },
+  AjaxHtml: {
+    Name: `${y}ajax-html`
+  },
+  ExclusiveCheckbox: {
+    Name: `${y}exclusive-checkbox`,
+    Event: { Toggle: "toggle" }
+  },
+  Dropdown: { Name: `${y}dropdown` },
+  SelectAll: { Name: `${y}select-all`, Event: { Toggle: "toggle" } },
+  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}`, {
+    bubbles: !0,
+    cancelable: s
+  });
+  return n.dispatchEvent(a);
+}
+const T = "data-validate-group";
+customElements.define(
+  h.ValidateForm.Name,
+  class extends HTMLElement {
+    form = null;
+    groups = void 0;
+    connectedCallback() {
+      if (this.form = this.querySelector("form"), !this.form) {
+        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", "");
+    }
+    /**
+     * 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);
+    }
+    /**
+     * Handle input events
+     * @param {Event} event The event object
+     */
+    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")) {
+        if (t) {
+          this.isGroupValid(t);
+          return;
+        }
+        this.isFieldValid(n);
+      }
+    }
+    /**
+     * Handle blur events
+     * @param {Event} event The event object
+     */
+    onBlur(e) {
+      if (!(e.target instanceof Element)) return;
+      const t = e.target.closest(`[${T}="interacted"]`);
+      if (t) {
+        this.isGroupValid(t);
+        return;
+      }
+      if (!e.target.matches(":user-invalid")) {
+        this.removeError(e.target);
+        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,
+        this,
+        !0
+      )) return;
+      const n = this.checkGroupValidity();
+      if (this.checkFieldValidity() && n) {
+        E(h.ValidateForm.Name, h.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);
+    }
+    /**
+     * Check the validity of fields that can be validated with HTMLFormElement.checkValidity().
+     * Show error messages for fields that are not.
+     *
+     * @return {Boolean} If true, all fields are valid
+     */
+    checkFieldValidity() {
+      if (!this.form || this.form.checkValidity()) return !0;
+      const e = this.form.querySelectorAll(":invalid");
+      for (const t of e)
+        t instanceof HTMLElement && this.showError(t);
+      return !1;
+    }
+    /**
+     * Check if an input is valid and show/remove errors
+     * @param  {Element} field The field to validate
+     * @return {Boolean}       If true, field is valid
+     */
+    isFieldValid(e) {
+      return e.matches(":invalid") ? (this.showError(e), !1) : (this.removeError(e), !0);
+    }
+    /**
+     * Check the validity of all input groups
+     * @return {Boolean} If true, all groups are valid
+     */
+    checkGroupValidity() {
+      if (!this.groups) return !0;
+      let e = !0;
+      for (const t of this.groups)
+        t instanceof HTMLElement && (this.isGroupValid(t) || (e = !1));
+      return e;
+    }
+    /**
+     * Check if an input group is valid and show/remove errors
+     * @param  {Element} group The input group
+     * @return {Boolean}       If true, the group is valid
+     */
+    isGroupValid(e) {
+      return e.querySelector("input:checked") ? (this.removeError(e), !0) : (this.showError(e, !0), !1);
+    }
+    /**
+     * Show error message on a field
+     * @param  {Element} field   The field or fieldset
+     * @param  {Boolean} isGroup If true, field is a fieldset input group
+     */
+    showError(e, t = !1) {
+      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"]'
+            );
+            u && (u.textContent = n), g.id = l, e.setAttribute("aria-describedby", l);
+            return;
+          }
+          g.textContent = n, g.id = l, e.setAttribute("aria-describedby", l);
+          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);
+      } 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);
+    }
+    /**
+     * Get the error message text
+     * @param  {Element} field   The field or fieldset
+     * @param  {Boolean} isGroup If true, field is a fieldset input group
+     * @return {String} The error message
+     */
+    getMessage(e, t = !1) {
+      const n = e.getAttribute("data-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;
+      }
+      return "validationMessage" in e ? e.validationMessage : "";
+    }
+    /**
+     * Remove the error message from a field
+     * @param  {Element} field The field or fieldset
+     */
+    removeError(e) {
+      e.removeAttribute("aria-invalid");
+      const t = e.getAttribute("aria-describedby");
+      t && this.form?.querySelector(`#${t}`)?.remove();
+    }
+  }
+);
+class v {
+  static instance = void 0;
+  baseUrl;
+  baseHeaders = void 0;
+  constructor(t, n = {}) {
+    this.baseUrl = t, this.baseHeaders = n;
+  }
+  // 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;
+  }
+  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}` : "";
+  }
+  buildHeaders(t) {
+    return {
+      ...this.baseHeaders,
+      ...t
+    };
+  }
+  async send(t, n, s) {
+    try {
+      const a = this.buildQueryString(s.queryParameters), c = `${this.baseUrl}${t}${a}`, l = {
+        method: n,
+        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 = {
+          message: "Request failed",
+          status: d.status
+        };
+        if (d.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));
+          }
+        else {
+          const p = await d.text();
+          p && (u.message = `Server responded with an error: ${p.substring(0, 100)}`);
+        }
+        return [u, 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() }];
+      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];
+    }
+  }
+  get(t, n) {
+    return this.send(t, "GET", n ?? {});
+  }
+  put(t, n) {
+    return this.send(t, "PUT", n ?? {});
+  }
+  post(t, n) {
+    return this.send(t, "POST", n ?? {});
+  }
+  patch(t, n) {
+    return this.send(t, "PATCH", n ?? {});
+  }
+  delete(t, n) {
+    return this.send(t, "DELETE", n ?? {});
+  }
+}
+const L = v.getInstance("", {
+  "Content-Type": "application/json"
+}), F = {
+  staleTime: 0
+};
+class C {
+  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;
+  }
+  // Centralized state update logic
+  updateQueryState(t, n, s) {
+    const a = this.cache.get(t), c = a ? { ...a } : {
+      data: void 0,
+      isFetching: !1,
+      error: null,
+      meta: { ...F }
+    };
+    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);
+  }
+  notifySubscribers(t, n) {
+    this.subscriptions.get(t)?.forEach((s) => {
+      s(n);
+    });
+  }
+  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(() => {
+        this.invalidateQuery(t);
+      }, n);
+      this.refetchIntervals.set(t, a);
+    }
+  }
+  /**
+   * Subscribes to a query key.
+   * @param key The query key.
+   * @param callback The function to call when the query's data or state updates.
+   * @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);
+    const c = this.cache.get(t);
+    return c && n(c), this.manageRefetchInterval(t, c?.meta.staleTime ?? 0), () => {
+      this.subscriptions.get(t)?.delete(n), this.subscriptions.get(t)?.size === 0 && (this.subscriptions.delete(t), this.manageRefetchInterval(t, 0));
+    };
+  }
+  /**
+   * Gets the current state of a query.
+   * @param key The query key.
+   * @returns The current QueryResult, or undefined if not initialized.
+   */
+  get(t) {
+    const n = this.cache.get(t);
+    if (n)
+      return n;
+  }
+  /**
+   * Sets the data for a query key and notifies subscribers.
+   * This is used for pushing data without fetching (e.g., from mutations/forms).
+   * @param key The query key.
+   * @param data The data to set.
+   * @param options Options for this query.
+   */
+  setQueryData(t, n, s) {
+    this.updateQueryState(
+      t,
+      {
+        data: n,
+        error: null,
+        isFetching: !1
+      },
+      s
+    );
+  }
+  /**
+   * 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)
+      return;
+    this.updateQueryState(t, {
+      isFetching: !0,
+      // Always true when a fetch is in progress
+      error: null
+    });
+    const [a, c] = await L.get(t);
+    if (a) {
+      this.updateQueryState(
+        t,
+        {
+          error: a.message,
+          isFetching: !1
+        },
+        n
+      );
+      return;
+    }
+    this.updateQueryState(
+      t,
+      {
+        data: c,
+        isFetching: !1,
+        error: null
+      },
+      n
+    );
+  }
+  /**
+   * Invalidates a query, triggering an immediate refetch
+   * @param key The query key.
+   */
+  invalidateQuery(t) {
+    const n = this.cache.get(t);
+    if (!n) {
+      console.warn(`No query exists for key: ${t}`);
+      return;
+    }
+    n.isFetching || this.fetchQuery(t);
+  }
+}
+const S = C.getInstance();
+customElements.define(
+  h.AjaxForm.Name,
+  class extends HTMLElement {
+    form = null;
+    announce = null;
+    announceTitle = null;
+    spinner = null;
+    messageSubmitting = "Submitting...";
+    messageSuccess = "Data submitted successfully";
+    messageError = "An error occurred";
+    actionOnSuccess = "none";
+    keepFields = !1;
+    queryKeyToInvalidate = null;
+    isSubmittingAttribute = "is-submitting";
+    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");
+      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() {
+      this.form?.removeEventListener("submit", this);
+    }
+    async handleEvent(e) {
+      e.type === "submit" && await this.handleSubmit(e);
+    }
+    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 (!L.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, {
+        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");
+        return;
+      }
+      if (this.actionOnSuccess === "remove-form" && this.form.remove(), this.keepFields || this.reset(), c.type === "html") {
+        if (!this.queryKeyToInvalidate) return;
+        S.setQueryData(this.queryKeyToInvalidate, c), this.showStatus(this.messageSuccess, "success");
+        return;
+      }
+      if (this.showStatus(c.message ?? this.messageSuccess, "success"), c.redirectUrl) {
+        window.location.href = c.redirectUrl;
+        return;
+      }
+      c.queryKey && S.invalidateQuery(c.queryKey), this.queryKeyToInvalidate && S.invalidateQuery(this.queryKeyToInvalidate), E(h.AjaxForm.Name, h.AjaxForm.Event.Form, this);
+    }
+    disable() {
+      this.setAttribute(this.isSubmittingAttribute, "");
+    }
+    enable() {
+      this.removeAttribute(this.isSubmittingAttribute);
+    }
+    isDisabled() {
+      return this.hasAttribute(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 || !this.announceTitle || (this.announceTitle.textContent = "", this.announce.className = "", this.showStatusIcon("pending"));
+            }, 6 * 1e3);
+            break;
+          case "error":
+            this.announce.className = "alert alert-danger";
+            break;
+          case "pending":
+            this.announce.className = "alert visually-hidden";
+            break;
+        }
+    }
+    showStatusIcon(e) {
+      if (!this.announce) return;
+      const t = this.announce.querySelector("[data-announce-success-icon]"), n = this.announce.querySelector("[data-announce-error-icon]");
+      switch (e) {
+        case "success":
+          t?.removeAttribute("hidden"), n?.setAttribute("hidden", "");
+          break;
+        case "error":
+          t?.setAttribute("hidden", ""), n?.removeAttribute("hidden");
+          break;
+        case "pending":
+          t?.setAttribute("hidden", ""), n?.setAttribute("hidden", "");
+          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);
+      return t.toString();
+    }
+    reset() {
+      this.form && this.form.reset();
+    }
+  }
+);
+customElements.define(
+  h.AjaxHtml.Name,
+  class extends HTMLElement {
+    queryKey = null;
+    unsubscribe = null;
+    initialFetchTriggered = !1;
+    // To prevent multiple fetch calls
+    intersectionObserver = null;
+    staleTime;
+    connectedCallback() {
+      if (this.queryKey = this.getAttribute("query-key"), !this.queryKey) {
+        console.warn(`${h.AjaxHtml.Name} requires a "query-key" attribute.`, this);
+        return;
+      }
+      this.staleTime = this.hasAttribute("stale-time") ? (
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        parseInt(this.getAttribute("stale-time"), 10)
+      ) : void 0, this.unsubscribe = S.subscribe(
+        this.queryKey,
+        (t) => {
+          this.renderContent(t);
+        },
+        { staleTime: this.staleTime }
+      );
+      const e = this.getAttribute("load-strategy");
+      if (e)
+        switch (e) {
+          case "server-side":
+            this.initialFetchTriggered = !0;
+            break;
+          case "initial":
+            this.triggerInitialFetch();
+            break;
+          case "lazy":
+            this.intersectionObserver = new IntersectionObserver(
+              this.handleIntersection.bind(this),
+              { rootMargin: "0px 0px 100px 0px" }
+            ), this.intersectionObserver.observe(this);
+            break;
+          case "defer":
+            document.addEventListener(
+              "DOMContentLoaded",
+              this.handleDomContentLoaded.bind(this),
+              {
+                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);
+    }
+    handleDomContentLoaded() {
+      this.triggerInitialFetch();
+    }
+    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)));
+    }
+    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;
+        return;
+      }
+      if (t.body.innerHTML.trim().length > 0) {
+        this.innerHTML = t.body.innerHTML;
+        return;
+      }
+      e.isFetching || (this.innerHTML = "<p>No results found.</p>");
+    }
+  }
+);
+customElements.define(
+  h.Dropdown.Name,
+  class extends HTMLElement {
+    dropdown = null;
+    trigger = null;
+    content = null;
+    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)));
+    }
+    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();
+    }
+    focusFirstDropdownItem() {
+      if (!this.content) return;
+      const e = Array.from(
+        this.content.querySelectorAll(M)
+      );
+      if (e.length === 0) {
+        this.content.focus();
+        return;
+      }
+      const t = e[0];
+      setTimeout(() => {
+        t && t.focus();
+      }, 1);
+    }
+    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();
+        return;
+      }
+      if (e.key === "ArrowDown" || e.key === "ArrowRight") {
+        if (e.preventDefault(), e.altKey) {
+          if (!s) return;
+          s.focus();
+          return;
+        }
+        if (c === t.length - 1 || c === -1) {
+          if (!n) return;
+          n.focus();
+          return;
+        }
+        t[c + 1]?.focus();
+        return;
+      }
+    }
+    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());
+    }
+  }
+);
+customElements.define(
+  h.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.parentElement.querySelectorAll(
+          `[name="${this.targetName}"]`
+        )
+      ], this.checkboxes.length !== 0 && this.addEvents());
+    }
+    disconnectedCallback() {
+      if (this.exclusiveCheckbox && this.exclusiveCheckbox.removeEventListener(
+        f.Change,
+        this.handleExclusiveChange.bind(this)
+      ), this.checkboxes)
+        for (const e of this.checkboxes)
+          e.removeEventListener(
+            f.Change,
+            this.handleCheckboxChange.bind(this)
+          );
+    }
+    addEvents() {
+      if (!(!this.exclusiveCheckbox || !this.targetName || !this.parentElement || !this.checkboxes)) {
+        this.exclusiveCheckbox.addEventListener("change", this.handleExclusiveChange.bind(this));
+        for (const e of this.checkboxes)
+          e.disabled || e.addEventListener(f.Change, this.handleCheckboxChange.bind(this));
+      }
+    }
+    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
+      );
+    }
+    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
+      );
+    }
+  }
+);
+customElements.define(
+  h.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.parentElement.querySelectorAll(
+          `[name="${this.targetName}"]`
+        )
+      ], this.checkboxes.length !== 0 && (this.ready(), this.addEvents()));
+    }
+    disconnectedCallback() {
+      if (this.selectAllCheckbox && this.selectAllCheckbox.removeEventListener(
+        f.Change,
+        this.handleSelectAllChange.bind(this)
+      ), this.checkboxes)
+        for (const e of this.checkboxes)
+          e.removeEventListener(
+            f.Change,
+            this.handleCheckboxChange.bind(this)
+          );
+    }
+    ready() {
+      this.setAttribute("data-state", "ready");
+    }
+    addEvents() {
+      if (!(!this.selectAllCheckbox || !this.targetName || !this.parentElement || !this.checkboxes)) {
+        this.selectAllCheckbox.addEventListener("change", this.handleSelectAllChange.bind(this));
+        for (const e of this.checkboxes)
+          e.disabled || (e.parentElement?.classList.add("padding-inline-start-lg"), e.addEventListener(f.Change, this.handleCheckboxChange.bind(this)));
+      }
+    }
+    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
+      );
+    }
+    handleCheckboxChange() {
+      if (!this.selectAllCheckbox || !this.checkboxes || this.checkboxes.length === 0) return;
+      const e = this.checkboxes.filter(
+        (a) => !a.disabled && a.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
+      );
+    }
+  }
+);
+customElements.define(
+  h.UntilSelected.Name,
+  class extends HTMLElement {
+    target = null;
+    targetElement = null;
+    focusTargetElement = null;
+    events = null;
+    hideWhenChecked = !1;
+    connectedCallback() {
+      if (this.target = this.getAttribute("target"), !this.target) return;
+      try {
+        const s = document.getElementById(this.target);
+        if (!(s instanceof HTMLInputElement)) {
+          console.warn("Element was not found");
+          return;
+        }
+        this.targetElement = s;
+      } catch (s) {
+        console.warn("Could not select element", s);
+      }
+      if (!this.targetElement) return;
+      const e = this.getAttribute("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 n = this.targetElement.checked;
+      this.toggleAttribute("hidden", this.hideWhenChecked ? n : !n), this.addEvents();
+    }
+    disconnectedCallback() {
+      if (document.removeEventListener(
+        `${h.ExclusiveCheckbox.Name}:${h.ExclusiveCheckbox.Event.Toggle}`,
+        this.handleTargetChange.bind(this)
+      ), 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)
+        for (const e of this.events)
+          document.removeEventListener(e, this.handleTargetChange.bind(this));
+    }
+    addEvents() {
+      if (document.addEventListener(
+        `${h.ExclusiveCheckbox.Name}:${h.ExclusiveCheckbox.Event.Toggle}`,
+        this.handleTargetChange.bind(this)
+      ), 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)
+        for (const e of this.events)
+          document.addEventListener(e, this.handleTargetChange.bind(this));
+    }
+    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();
+    }
+  }
+);
+function O() {
+  return typeof HTMLButtonElement < "u" && "command" in HTMLButtonElement.prototype && "source" in ((globalThis.CommandEvent || {}).prototype || {});
+}
+function H() {
+  document.addEventListener(
+    "invoke",
+    (i) => {
+      i.type == "invoke" && i.isTrusted && (i.stopImmediatePropagation(), i.preventDefault());
+    },
+    !0
+  ), document.addEventListener(
+    "command",
+    (i) => {
+      i.type == "command" && i.isTrusted && (i.stopImmediatePropagation(), i.preventDefault());
+    },
+    !0
+  );
+  function e(i, o, r = !0) {
+    Object.defineProperty(i, o, {
+      ...Object.getOwnPropertyDescriptor(i, o),
+      enumerable: r
+    });
+  }
+  function t(i) {
+    return i && typeof i.getRootNode == "function" ? i.getRootNode() : i && i.parentNode ? t(i.parentNode) : i;
+  }
+  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))
+        throw new TypeError("source must be an element");
+      n.set(this, m || null), s.set(
+        this,
+        b !== void 0 ? String(b) : ""
+      );
+    }
+    get [Symbol.toStringTag]() {
+      return "CommandEvent";
+    }
+    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;
+    }
+    get command() {
+      if (!s.has(this))
+        throw new TypeError("illegal invocation");
+      return s.get(this);
+    }
+    get action() {
+      throw new Error(
+        "CommandEvent#action was renamed to CommandEvent#command"
+      );
+    }
+    get invoker() {
+      throw new Error(
+        "CommandEvent#invoker was renamed to CommandEvent#source"
+      );
+    }
+  }
+  e(a.prototype, "source"), e(a.prototype, "command");
+  class c extends Event {
+    constructor(o, r = {}) {
+      throw super(o, r), new Error(
+        "InvokeEvent has been deprecated, it has been renamed to `CommandEvent`"
+      );
+    }
+  }
+  const l = /* @__PURE__ */ new WeakMap();
+  function d(i) {
+    Object.defineProperties(i.prototype, {
+      commandForElement: {
+        enumerable: !0,
+        configurable: !0,
+        set(o) {
+          if (this.hasAttribute("invokeaction"))
+            throw new TypeError(
+              "Element has deprecated `invokeaction` attribute, replace with `command`"
+            );
+          if (this.hasAttribute("invoketarget"))
+            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) {
+            this.setAttribute("commandfor", "");
+            const r = t(o);
+            t(this) === r || r === this.ownerDocument ? l.set(this, o) : l.delete(this);
+          } else
+            throw new TypeError("commandForElement must be an element or null");
+        },
+        get() {
+          if (this.localName !== "button")
+            return null;
+          if (this.hasAttribute("invokeaction") || this.hasAttribute("invoketarget"))
+            return console.warn(
+              "Element has deprecated `invoketarget` or `invokeaction` attribute, use `commandfor` and `command` instead"
+            ), null;
+          if (this.disabled)
+            return null;
+          if (this.form && this.getAttribute("type") !== "button")
+            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;
+        }
+      },
+      command: {
+        enumerable: !0,
+        configurable: !0,
+        get() {
+          const o = this.getAttribute("command") || "";
+          if (o.startsWith("--")) return o;
+          const r = o.toLowerCase();
+          switch (r) {
+            case "show-modal":
+            case "close":
+            case "toggle-popover":
+            case "hide-popover":
+            case "show-popover":
+              return r;
+          }
+          return "";
+        },
+        set(o) {
+          this.setAttribute("command", o);
+        }
+      },
+      invokeAction: {
+        enumerable: !1,
+        configurable: !0,
+        get() {
+          throw new Error(
+            "invokeAction is deprecated. It has been renamed to command"
+          );
+        },
+        set(o) {
+          throw new Error(
+            "invokeAction is deprecated. It has been renamed to command"
+          );
+        }
+      },
+      invokeTargetElement: {
+        enumerable: !1,
+        configurable: !0,
+        get() {
+          throw new Error(
+            "invokeTargetElement is deprecated. It has been renamed to command"
+          );
+        },
+        set(o) {
+          throw new Error(
+            "invokeTargetElement is deprecated. It has been renamed to command"
+          );
+        }
+      }
+    });
+  }
+  const g = /* @__PURE__ */ new WeakMap();
+  Object.defineProperties(HTMLElement.prototype, {
+    oncommand: {
+      enumerable: !0,
+      configurable: !0,
+      get() {
+        return x.takeRecords(), g.get(this) || null;
+      },
+      set(i) {
+        const o = g.get(this) || null;
+        o && this.removeEventListener("command", o), g.set(
+          this,
+          typeof i == "object" || typeof i == "function" ? i : null
+        ), typeof i == "function" && this.addEventListener("command", i);
+      }
+    }
+  });
+  function u(i) {
+    for (const o of i)
+      o.oncommand = new Function("event", o.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]);
+    }
+  });
+  x.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(
+      "button[invoketarget], button[invokeaction], input[invoketarget], input[invokeaction]"
+    );
+    if (o && (console.warn(
+      "Elements with `invoketarget` or `invokeaction` are deprecated and should be renamed to use `commandfor` and `command` respectively"
+    ), o.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(
+        "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";
+      throw new Error(
+        `Element with ${w} attribute must also have a ${A} 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("--")) {
+      console.warn(
+        `"${r.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,
+      cancelable: !0
+    });
+    if (m.dispatchEvent(b), b.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();
+    }
+  }
+  function I(i) {
+    i.addEventListener("click", p, !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;
+    };
+    const m = i.prototype.attachInternals;
+    i.prototype.attachInternals = function() {
+      const b = m.call(this);
+      return b.shadowRoot && o(b.shadowRoot), b;
+    };
+  }
+  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 });
+}
+O() || H();