@justeattakeaway/pie-switch 0.24.0 → 0.24.1

package/dist/index.js

@@ -1,502 +1,505 @@
-import { LitElement as vt, html as A, nothing as x, unsafeCSS as yt } from "lit";
-import { query as Et, property as k } from "lit/decorators.js";
-import { FormControlMixin as kt, RtlMixin as Mt, wrapNativeEvent as xt, validPropertyValues as Ft, defineCustomElement as At } from "@justeattakeaway/pie-webc-core";
+import { LitElement as Ct, html as A, nothing as x, unsafeCSS as xt } from "lit";
+import { query as Ft, property as E } from "lit/decorators.js";
+import { FormControlMixin as At, RtlMixin as It, wrapNativeEvent as St, validPropertyValues as Vt, defineCustomElement as Tt } from "@justeattakeaway/pie-webc-core";
 import "@justeattakeaway/pie-icons-webc/IconCheck";
-const Ct = `*,*:before,*:after{box-sizing:border-box;cursor:inherit}.c-switch-wrapper{display:inline-flex;align-items:center;gap:var(--dt-spacing-b);font-family:var(--dt-font-body-l-family);cursor:pointer}.c-switch-wrapper[disabled]{cursor:not-allowed}.c-switch{--switch-bg-color: var(--dt-color-interactive-form);--switch-bg-color--checked: var(--dt-color-interactive-brand);--switch-bg-color--disabled: var(--dt-color-disabled-01);--switch-width: 48px;--switch-height: 24px;--switch-control-size: 20px;--switch-padding: 2px;--switch-radius: var(--dt-radius-rounded-e);--switch-translation: calc(var(--switch-width) - var(--switch-control-size) - 2 * var(--switch-padding));position:relative;display:flex;width:var(--switch-width);height:var(--switch-height);flex-shrink:0;padding:var(--switch-padding);border-radius:var(--switch-radius);background-color:var(--switch-bg-color)}@media (prefers-reduced-motion: no-preference){.c-switch{transition:background-color .15s cubic-bezier(.4,0,.9,1) 0s}}.c-switch:hover{background-color:hsl(var(--dt-color-interactive-form-h),var(--dt-color-interactive-form-s),calc(var(--dt-color-interactive-form-l) - var(--dt-color-hover-01)))}.c-switch:focus,.c-switch:focus-within{box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer);outline:none}.c-switch:active{background-color:hsl(var(--dt-color-interactive-form-h),var(--dt-color-interactive-form-s),calc(var(--dt-color-interactive-form-l) - var(--dt-color-active-01)))}.c-switch[checked]{background-color:var(--switch-bg-color--checked)}@media (prefers-reduced-motion: no-preference){.c-switch[checked]{transition:background-color .15s cubic-bezier(.4,0,.9,1) 0s}}.c-switch[checked]:hover{background-color:hsl(var(--dt-color-interactive-brand-h),var(--dt-color-interactive-brand-s),calc(var(--dt-color-interactive-brand-l) - var(--dt-color-hover-01)))}.c-switch[checked]:focus,.c-switch[checked]:focus-within{background-color:var(--switch-bg-color--checked)}.c-switch[checked]:active{background-color:hsl(var(--dt-color-interactive-brand-h),var(--dt-color-interactive-brand-s),calc(var(--dt-color-interactive-brand-l) - var(--dt-color-active-01)))}[disabled] .c-switch{background-color:var(--switch-bg-color--disabled);pointer-events:none}.c-switch-input{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);border:0;left:50%;transform:translate(-50%) translateY(-50%);bottom:0}.c-switch-input:disabled{background-color:transparent}.c-switch-control{position:absolute;left:2px;width:var(--switch-control-size);height:var(--switch-control-size);border-radius:var(--switch-radius);background-color:var(--dt-color-interactive-light);padding:var(--switch-padding)}@media (prefers-reduced-motion: no-preference){.c-switch-control{transition:transform .15s cubic-bezier(.4,0,.9,1) 0s}}.c-switch-input:checked+.c-switch-control{transform:translate(var(--switch-translation))}@media (prefers-reduced-motion: no-preference){.c-switch-input:checked+.c-switch-control{transition:transform .15s cubic-bezier(.4,0,.9,1) 0s}}.c-switch-input:checked+.c-switch-control .c-pieIcon--check{color:var(--switch-bg-color--checked)}@media (prefers-reduced-motion: no-preference){.c-switch-input:checked+.c-switch-control .c-pieIcon--check{transition:color .15s cubic-bezier(.4,0,.9,1) 0s}}.c-switch-input:disabled~.c-switch-control{color:var(--switch-bg-color--disabled)}.c-switch-input:disabled~.c-switch-control .c-pieIcon--check{color:var(--switch-bg-color--disabled)}@media (prefers-reduced-motion: no-preference){.c-switch-input:disabled~.c-switch-control .c-pieIcon--check{transition:color .15s cubic-bezier(.4,0,.9,1) 0s}}.c-switch-description{position:absolute;display:block;height:1px;width:1px;overflow:hidden;padding:1px;white-space:nowrap}.c-switch-wrapper[isRTL] .c-switch-control{position:absolute;left:initial;right:2px}.c-switch-wrapper[isRTL] .c-switch-input:checked+.c-switch-control{transform:translate(calc(-1 * var(--switch-translation)))}@media (prefers-reduced-motion: no-preference){.c-switch-wrapper[isRTL] .c-switch-input:checked+.c-switch-control{transition:transform .15s cubic-bezier(.4,0,.9,1) 0s}}
-`, It = ["leading", "trailing"], Pt = "change";
+const Lt = `*,*:before,*:after{box-sizing:border-box;cursor:inherit}.c-switch-wrapper{display:inline-flex;align-items:center;gap:var(--dt-spacing-b);font-family:var(--dt-font-body-l-family);cursor:pointer}.c-switch-wrapper[disabled]{cursor:not-allowed}.c-switch{--switch-bg-color: var(--dt-color-interactive-form);--switch-bg-color--checked: var(--dt-color-interactive-brand);--switch-bg-color--disabled: var(--dt-color-disabled-01);--switch-width: 48px;--switch-height: 24px;--switch-control-size: 20px;--switch-padding: 2px;--switch-radius: var(--dt-radius-rounded-e);--switch-translation: calc(var(--switch-width) - var(--switch-control-size) - 2 * var(--switch-padding));position:relative;display:flex;width:var(--switch-width);height:var(--switch-height);flex-shrink:0;padding:var(--switch-padding);border-radius:var(--switch-radius);background-color:var(--switch-bg-color)}@media (prefers-reduced-motion: no-preference){.c-switch{transition:background-color .15s cubic-bezier(.4,0,.9,1) 0s}}.c-switch:hover{background-color:hsl(var(--dt-color-interactive-form-h),var(--dt-color-interactive-form-s),calc(var(--dt-color-interactive-form-l) - var(--dt-color-hover-01)))}.c-switch:focus,.c-switch:focus-within{box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer);outline:none}.c-switch:active{background-color:hsl(var(--dt-color-interactive-form-h),var(--dt-color-interactive-form-s),calc(var(--dt-color-interactive-form-l) - var(--dt-color-active-01)))}.c-switch[checked]{background-color:var(--switch-bg-color--checked)}@media (prefers-reduced-motion: no-preference){.c-switch[checked]{transition:background-color .15s cubic-bezier(.4,0,.9,1) 0s}}.c-switch[checked]:hover{background-color:hsl(var(--dt-color-interactive-brand-h),var(--dt-color-interactive-brand-s),calc(var(--dt-color-interactive-brand-l) - var(--dt-color-hover-01)))}.c-switch[checked]:focus,.c-switch[checked]:focus-within{background-color:var(--switch-bg-color--checked)}.c-switch[checked]:active{background-color:hsl(var(--dt-color-interactive-brand-h),var(--dt-color-interactive-brand-s),calc(var(--dt-color-interactive-brand-l) - var(--dt-color-active-01)))}[disabled] .c-switch{background-color:var(--switch-bg-color--disabled);pointer-events:none}.c-switch-input{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);border:0;left:50%;transform:translate(-50%) translateY(-50%);bottom:0}.c-switch-input:disabled{background-color:transparent}.c-switch-control{position:absolute;left:2px;width:var(--switch-control-size);height:var(--switch-control-size);border-radius:var(--switch-radius);background-color:var(--dt-color-interactive-light);padding:var(--switch-padding)}@media (prefers-reduced-motion: no-preference){.c-switch-control{transition:transform .15s cubic-bezier(.4,0,.9,1) 0s}}.c-switch-input:checked+.c-switch-control{transform:translate(var(--switch-translation))}@media (prefers-reduced-motion: no-preference){.c-switch-input:checked+.c-switch-control{transition:transform .15s cubic-bezier(.4,0,.9,1) 0s}}.c-switch-input:checked+.c-switch-control .c-pieIcon--check{color:var(--switch-bg-color--checked)}@media (prefers-reduced-motion: no-preference){.c-switch-input:checked+.c-switch-control .c-pieIcon--check{transition:color .15s cubic-bezier(.4,0,.9,1) 0s}}.c-switch-input:disabled~.c-switch-control{color:var(--switch-bg-color--disabled)}.c-switch-input:disabled~.c-switch-control .c-pieIcon--check{color:var(--switch-bg-color--disabled)}@media (prefers-reduced-motion: no-preference){.c-switch-input:disabled~.c-switch-control .c-pieIcon--check{transition:color .15s cubic-bezier(.4,0,.9,1) 0s}}.c-switch-description{position:absolute;display:block;height:1px;width:1px;overflow:hidden;padding:1px;white-space:nowrap}.c-switch-wrapper[isRTL] .c-switch-control{position:absolute;left:initial;right:2px}.c-switch-wrapper[isRTL] .c-switch-input:checked+.c-switch-control{transform:translate(calc(-1 * var(--switch-translation)))}@media (prefers-reduced-motion: no-preference){.c-switch-wrapper[isRTL] .c-switch-input:checked+.c-switch-control{transition:transform .15s cubic-bezier(.4,0,.9,1) 0s}}
+`, Nt = ["leading", "trailing"], Wt = "change";
 (function() {
-  const h = /* @__PURE__ */ new WeakMap(), c = /* @__PURE__ */ new WeakMap(), s = /* @__PURE__ */ new WeakMap(), l = /* @__PURE__ */ new WeakMap(), p = /* @__PURE__ */ new WeakMap(), E = /* @__PURE__ */ new WeakMap(), b = /* @__PURE__ */ new WeakMap(), m = /* @__PURE__ */ new WeakMap(), H = /* @__PURE__ */ new WeakMap(), C = /* @__PURE__ */ new WeakMap(), D = /* @__PURE__ */ new WeakMap(), W = /* @__PURE__ */ new WeakMap(), z = /* @__PURE__ */ new WeakMap(), q = /* @__PURE__ */ new WeakMap(), I = /* @__PURE__ */ new WeakMap(), V = {
-    ariaAtomic: "aria-atomic",
-    ariaAutoComplete: "aria-autocomplete",
-    ariaBusy: "aria-busy",
-    ariaChecked: "aria-checked",
-    ariaColCount: "aria-colcount",
-    ariaColIndex: "aria-colindex",
-    ariaColIndexText: "aria-colindextext",
-    ariaColSpan: "aria-colspan",
-    ariaCurrent: "aria-current",
-    ariaDisabled: "aria-disabled",
-    ariaExpanded: "aria-expanded",
-    ariaHasPopup: "aria-haspopup",
-    ariaHidden: "aria-hidden",
-    ariaInvalid: "aria-invalid",
-    ariaKeyShortcuts: "aria-keyshortcuts",
-    ariaLabel: "aria-label",
-    ariaLevel: "aria-level",
-    ariaLive: "aria-live",
-    ariaModal: "aria-modal",
-    ariaMultiLine: "aria-multiline",
-    ariaMultiSelectable: "aria-multiselectable",
-    ariaOrientation: "aria-orientation",
-    ariaPlaceholder: "aria-placeholder",
-    ariaPosInSet: "aria-posinset",
-    ariaPressed: "aria-pressed",
-    ariaReadOnly: "aria-readonly",
-    ariaRelevant: "aria-relevant",
-    ariaRequired: "aria-required",
-    ariaRoleDescription: "aria-roledescription",
-    ariaRowCount: "aria-rowcount",
-    ariaRowIndex: "aria-rowindex",
-    ariaRowIndexText: "aria-rowindextext",
-    ariaRowSpan: "aria-rowspan",
-    ariaSelected: "aria-selected",
-    ariaSetSize: "aria-setsize",
-    ariaSort: "aria-sort",
-    ariaValueMax: "aria-valuemax",
-    ariaValueMin: "aria-valuemin",
-    ariaValueNow: "aria-valuenow",
-    ariaValueText: "aria-valuetext",
-    role: "role"
-  }, at = (i, t) => {
-    for (let e in V) {
-      t[e] = null;
-      let a = null;
-      const r = V[e];
-      Object.defineProperty(t, e, {
-        get() {
-          return a;
-        },
-        set(n) {
-          a = n, i.isConnected ? i.setAttribute(r, n) : C.set(i, t);
+  (function(v) {
+    const n = /* @__PURE__ */ new WeakMap(), c = /* @__PURE__ */ new WeakMap(), h = /* @__PURE__ */ new WeakMap(), l = /* @__PURE__ */ new WeakMap(), m = /* @__PURE__ */ new WeakMap(), k = /* @__PURE__ */ new WeakMap(), M = /* @__PURE__ */ new WeakMap(), y = /* @__PURE__ */ new WeakMap(), W = /* @__PURE__ */ new WeakMap(), I = /* @__PURE__ */ new WeakMap(), z = /* @__PURE__ */ new WeakMap(), B = /* @__PURE__ */ new WeakMap(), q = /* @__PURE__ */ new WeakMap(), U = /* @__PURE__ */ new WeakMap(), S = /* @__PURE__ */ new WeakMap(), V = {
+      ariaAtomic: "aria-atomic",
+      ariaAutoComplete: "aria-autocomplete",
+      ariaBusy: "aria-busy",
+      ariaChecked: "aria-checked",
+      ariaColCount: "aria-colcount",
+      ariaColIndex: "aria-colindex",
+      ariaColIndexText: "aria-colindextext",
+      ariaColSpan: "aria-colspan",
+      ariaCurrent: "aria-current",
+      ariaDisabled: "aria-disabled",
+      ariaExpanded: "aria-expanded",
+      ariaHasPopup: "aria-haspopup",
+      ariaHidden: "aria-hidden",
+      ariaInvalid: "aria-invalid",
+      ariaKeyShortcuts: "aria-keyshortcuts",
+      ariaLabel: "aria-label",
+      ariaLevel: "aria-level",
+      ariaLive: "aria-live",
+      ariaModal: "aria-modal",
+      ariaMultiLine: "aria-multiline",
+      ariaMultiSelectable: "aria-multiselectable",
+      ariaOrientation: "aria-orientation",
+      ariaPlaceholder: "aria-placeholder",
+      ariaPosInSet: "aria-posinset",
+      ariaPressed: "aria-pressed",
+      ariaReadOnly: "aria-readonly",
+      ariaRelevant: "aria-relevant",
+      ariaRequired: "aria-required",
+      ariaRoleDescription: "aria-roledescription",
+      ariaRowCount: "aria-rowcount",
+      ariaRowIndex: "aria-rowindex",
+      ariaRowIndexText: "aria-rowindextext",
+      ariaRowSpan: "aria-rowspan",
+      ariaSelected: "aria-selected",
+      ariaSetSize: "aria-setsize",
+      ariaSort: "aria-sort",
+      ariaValueMax: "aria-valuemax",
+      ariaValueMin: "aria-valuemin",
+      ariaValueNow: "aria-valuenow",
+      ariaValueText: "aria-valuetext",
+      role: "role"
+    }, ct = (e, t) => {
+      for (let i in V) {
+        t[i] = null;
+        let a = null;
+        const r = V[i];
+        Object.defineProperty(t, i, {
+          get() {
+            return a;
+          },
+          set(o) {
+            a = o, e.isConnected ? e.setAttribute(r, o) : I.set(e, t);
+          }
+        });
+      }
+    };
+    function K(e) {
+      const t = l.get(e), { form: i } = t;
+      X(e, i, t), Q(e, t.labels);
+    }
+    const j = (e, t = !1) => {
+      const i = document.createTreeWalker(e, NodeFilter.SHOW_ELEMENT, {
+        acceptNode(o) {
+          return l.has(o) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
         }
       });
-    }
-  };
-  function B(i) {
-    const t = l.get(i), { form: e } = t;
-    J(i, e, t), Y(i, t.labels);
-  }
-  const U = (i, t = !1) => {
-    const e = document.createTreeWalker(i, NodeFilter.SHOW_ELEMENT, {
-      acceptNode(n) {
-        return l.has(n) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
-      }
-    });
-    let a = e.nextNode();
-    const r = !t || i.disabled;
-    for (; a; )
-      a.formDisabledCallback && r && $(a, i.disabled), a = e.nextNode();
-  }, K = { attributes: !0, attributeFilter: ["disabled", "name"] }, M = L() ? new MutationObserver((i) => {
-    for (const t of i) {
-      const e = t.target;
-      if (t.attributeName === "disabled" && (e.constructor.formAssociated ? $(e, e.hasAttribute("disabled")) : e.localName === "fieldset" && U(e)), t.attributeName === "name" && e.constructor.formAssociated) {
-        const a = l.get(e), r = H.get(e);
-        a.setFormValue(r);
+      let a = i.nextNode();
+      const r = !t || e.disabled;
+      for (; a; )
+        a.formDisabledCallback && r && $(a, e.disabled), a = i.nextNode();
+    }, G = { attributes: !0, attributeFilter: ["disabled", "name"] }, C = N() ? new MutationObserver((e) => {
+      for (const t of e) {
+        const i = t.target;
+        if (t.attributeName === "disabled" && (i.constructor.formAssociated ? $(i, i.hasAttribute("disabled")) : i.localName === "fieldset" && j(i)), t.attributeName === "name" && i.constructor.formAssociated) {
+          const a = l.get(i), r = W.get(i);
+          a.setFormValue(r);
+        }
       }
+    }) : {};
+    function P(e) {
+      e.forEach((t) => {
+        const { addedNodes: i, removedNodes: a } = t, r = Array.from(i), o = Array.from(a);
+        r.forEach((s) => {
+          var u;
+          if (l.has(s) && s.constructor.formAssociated && K(s), I.has(s)) {
+            const d = I.get(s);
+            Object.keys(V).filter((f) => d[f] !== null).forEach((f) => {
+              s.setAttribute(V[f], d[f]);
+            }), I.delete(s);
+          }
+          if (S.has(s)) {
+            const d = S.get(s);
+            s.setAttribute("internals-valid", d.validity.valid.toString()), s.setAttribute("internals-invalid", (!d.validity.valid).toString()), s.setAttribute("aria-invalid", (!d.validity.valid).toString()), S.delete(s);
+          }
+          if (s.localName === "form") {
+            const d = y.get(s), b = document.createTreeWalker(s, NodeFilter.SHOW_ELEMENT, {
+              acceptNode(D) {
+                return l.has(D) && D.constructor.formAssociated && !(d && d.has(D)) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
+              }
+            });
+            let f = b.nextNode();
+            for (; f; )
+              K(f), f = b.nextNode();
+          }
+          s.localName === "fieldset" && ((u = C.observe) == null || u.call(C, s, G), j(s, !0));
+        }), o.forEach((s) => {
+          const u = l.get(s);
+          u && h.get(u) && Y(u), M.has(s) && M.get(s).disconnect();
+        });
+      });
     }
-  }) : {};
-  function R(i) {
-    i.forEach((t) => {
-      const { addedNodes: e, removedNodes: a } = t, r = Array.from(e), n = Array.from(a);
-      r.forEach((o) => {
-        var u;
-        if (l.has(o) && o.constructor.formAssociated && B(o), C.has(o)) {
-          const d = C.get(o);
-          Object.keys(V).filter((w) => d[w] !== null).forEach((w) => {
-            o.setAttribute(V[w], d[w]);
-          }), C.delete(o);
-        }
-        if (I.has(o)) {
-          const d = I.get(o);
-          o.setAttribute("internals-valid", d.validity.valid.toString()), o.setAttribute("internals-invalid", (!d.validity.valid).toString()), o.setAttribute("aria-invalid", (!d.validity.valid).toString()), I.delete(o);
-        }
-        if (o.localName === "form") {
-          const d = m.get(o), v = document.createTreeWalker(o, NodeFilter.SHOW_ELEMENT, {
-            acceptNode(_) {
-              return l.has(_) && _.constructor.formAssociated && !(d && d.has(_)) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
-            }
-          });
-          let w = v.nextNode();
-          for (; w; )
-            B(w), w = v.nextNode();
+    function lt(e) {
+      e.forEach((t) => {
+        const { removedNodes: i } = t;
+        i.forEach((a) => {
+          const r = q.get(t.target);
+          l.has(a) && tt(a), r.disconnect();
+        });
+      });
+    }
+    const dt = (e) => {
+      var i, a;
+      const t = new MutationObserver(lt);
+      (i = window == null ? void 0 : window.ShadyDOM) != null && i.inUse && e.mode && e.host && (e = e.host), (a = t.observe) == null || a.call(t, e, { childList: !0 }), q.set(e, t);
+    };
+    N() && new MutationObserver(P);
+    const R = {
+      childList: !0,
+      subtree: !0
+    }, $ = (e, t) => {
+      e.toggleAttribute("internals-disabled", t), t ? e.setAttribute("aria-disabled", "true") : e.removeAttribute("aria-disabled"), e.formDisabledCallback && e.formDisabledCallback.apply(e, [t]);
+    }, Y = (e) => {
+      h.get(e).forEach((i) => {
+        i.remove();
+      }), h.set(e, []);
+    }, J = (e, t) => {
+      const i = document.createElement("input");
+      return i.type = "hidden", i.name = e.getAttribute("name"), e.after(i), h.get(t).push(i), i;
+    }, ht = (e, t) => {
+      var i;
+      h.set(t, []), (i = C.observe) == null || i.call(C, e, G);
+    }, Q = (e, t) => {
+      if (t.length) {
+        Array.from(t).forEach((a) => a.addEventListener("click", e.click.bind(e)));
+        let i = t[0].id;
+        t[0].id || (i = `${t[0].htmlFor}_Label`, t[0].id = i), e.setAttribute("aria-labelledby", i);
+      }
+    }, T = (e) => {
+      const t = Array.from(e.elements).filter((o) => !o.tagName.includes("-") && o.validity).map((o) => o.validity.valid), i = y.get(e) || [], a = Array.from(i).filter((o) => o.isConnected).map((o) => l.get(o).validity.valid), r = [...t, ...a].includes(!1);
+      e.toggleAttribute("internals-invalid", r), e.toggleAttribute("internals-valid", !r);
+    }, ut = (e) => {
+      T(L(e.target));
+    }, pt = (e) => {
+      T(L(e.target));
+    }, ft = (e) => {
+      const t = ["button[type=submit]", "input[type=submit]", "button:not([type])"].map((i) => `${i}:not([disabled])`).map((i) => `${i}:not([form])${e.id ? `,${i}[form='${e.id}']` : ""}`).join(",");
+      e.addEventListener("click", (i) => {
+        if (i.target.closest(t)) {
+          const r = y.get(e);
+          if (e.noValidate)
+            return;
+          r.size && Array.from(r).reverse().map((u) => l.get(u).reportValidity()).includes(!1) && i.preventDefault();
         }
-        o.localName === "fieldset" && ((u = M.observe) == null || u.call(M, o, K), U(o, !0));
-      }), n.forEach((o) => {
-        const u = l.get(o);
-        u && s.get(u) && j(u), b.has(o) && b.get(o).disconnect();
       });
-    });
-  }
-  function rt(i) {
-    i.forEach((t) => {
-      const { removedNodes: e } = t;
-      e.forEach((a) => {
-        const r = z.get(t.target);
-        l.has(a) && X(a), r.disconnect();
+    }, mt = (e) => {
+      const t = y.get(e.target);
+      t && t.size && t.forEach((i) => {
+        i.constructor.formAssociated && i.formResetCallback && i.formResetCallback.apply(i);
       });
-    });
-  }
-  const ot = (i) => {
-    var e;
-    const t = new MutationObserver(rt);
-    (e = t.observe) == null || e.call(t, i, { childList: !0 }), z.set(i, t);
-  };
-  L() && new MutationObserver(R);
-  const P = {
-    childList: !0,
-    subtree: !0
-  }, $ = (i, t) => {
-    i.toggleAttribute("internals-disabled", t), t ? i.setAttribute("aria-disabled", "true") : i.removeAttribute("aria-disabled"), i.formDisabledCallback && i.formDisabledCallback.apply(i, [t]);
-  }, j = (i) => {
-    s.get(i).forEach((e) => {
-      e.remove();
-    }), s.set(i, []);
-  }, G = (i, t) => {
-    const e = document.createElement("input");
-    return e.type = "hidden", e.name = i.getAttribute("name"), i.after(e), s.get(t).push(e), e;
-  }, st = (i, t) => {
-    var e;
-    s.set(t, []), (e = M.observe) == null || e.call(M, i, K);
-  }, Y = (i, t) => {
-    if (t.length) {
-      Array.from(t).forEach((a) => a.addEventListener("click", i.click.bind(i)));
-      let e = t[0].id;
-      t[0].id || (e = `${t[0].htmlFor}_Label`, t[0].id = e), i.setAttribute("aria-labelledby", e);
-    }
-  }, T = (i) => {
-    const t = Array.from(i.elements).filter((n) => !n.tagName.includes("-") && n.validity).map((n) => n.validity.valid), e = m.get(i) || [], a = Array.from(e).filter((n) => n.isConnected).map((n) => l.get(n).validity.valid), r = [...t, ...a].includes(!1);
-    i.toggleAttribute("internals-invalid", r), i.toggleAttribute("internals-valid", !r);
-  }, nt = (i) => {
-    T(S(i.target));
-  }, ct = (i) => {
-    T(S(i.target));
-  }, lt = (i) => {
-    const t = ["button[type=submit]", "input[type=submit]", "button:not([type])"].map((e) => `${e}:not([disabled])`).map((e) => `${e}:not([form])${i.id ? `,${e}[form='${i.id}']` : ""}`).join(",");
-    i.addEventListener("click", (e) => {
-      if (e.target.closest(t)) {
-        const r = m.get(i);
-        if (i.noValidate)
-          return;
-        r.size && Array.from(r).reverse().map((u) => l.get(u).reportValidity()).includes(!1) && e.preventDefault();
+    }, X = (e, t, i) => {
+      if (t) {
+        const a = y.get(t);
+        if (a)
+          a.add(e);
+        else {
+          const r = /* @__PURE__ */ new Set();
+          r.add(e), y.set(t, r), ft(t), t.addEventListener("reset", mt), t.addEventListener("input", ut), t.addEventListener("change", pt);
+        }
+        k.set(t, { ref: e, internals: i }), e.constructor.formAssociated && e.formAssociatedCallback && setTimeout(() => {
+          e.formAssociatedCallback.apply(e, [t]);
+        }, 0), T(t);
       }
-    });
-  }, dt = (i) => {
-    const t = m.get(i.target);
-    t && t.size && t.forEach((e) => {
-      e.constructor.formAssociated && e.formResetCallback && e.formResetCallback.apply(e);
-    });
-  }, J = (i, t, e) => {
-    if (t) {
-      const a = m.get(t);
-      if (a)
-        a.add(i);
-      else {
-        const r = /* @__PURE__ */ new Set();
-        r.add(i), m.set(t, r), lt(t), t.addEventListener("reset", dt), t.addEventListener("input", nt), t.addEventListener("change", ct);
-      }
-      E.set(t, { ref: i, internals: e }), i.constructor.formAssociated && i.formAssociatedCallback && setTimeout(() => {
-        i.formAssociatedCallback.apply(i, [t]);
-      }, 0), T(t);
-    }
-  }, S = (i) => {
-    let t = i.parentNode;
-    return t && t.tagName !== "FORM" && (t = S(t)), t;
-  }, g = (i, t, e = DOMException) => {
-    if (!i.constructor.formAssociated)
-      throw new e(t);
-  }, Q = (i, t, e) => {
-    const a = m.get(i);
-    return a && a.size && a.forEach((r) => {
-      l.get(r)[e]() || (t = !1);
-    }), t;
-  }, X = (i) => {
-    if (i.constructor.formAssociated) {
-      const t = l.get(i), { labels: e, form: a } = t;
-      Y(i, e), J(i, a, t);
-    }
-  };
-  function L() {
-    return typeof MutationObserver < "u";
-  }
-  class ht {
-    constructor() {
-      this.badInput = !1, this.customError = !1, this.patternMismatch = !1, this.rangeOverflow = !1, this.rangeUnderflow = !1, this.stepMismatch = !1, this.tooLong = !1, this.tooShort = !1, this.typeMismatch = !1, this.valid = !0, this.valueMissing = !1, Object.seal(this);
-    }
-  }
-  const ut = (i) => (i.badInput = !1, i.customError = !1, i.patternMismatch = !1, i.rangeOverflow = !1, i.rangeUnderflow = !1, i.stepMismatch = !1, i.tooLong = !1, i.tooShort = !1, i.typeMismatch = !1, i.valid = !0, i.valueMissing = !1, i), pt = (i, t, e) => (i.valid = mt(t), Object.keys(t).forEach((a) => i[a] = t[a]), e && T(e), i), mt = (i) => {
-    let t = !0;
-    for (let e in i)
-      e !== "valid" && i[e] !== !1 && (t = !1);
-    return t;
-  }, O = /* @__PURE__ */ new WeakMap();
-  function Z(i, t) {
-    i.toggleAttribute(t, !0), i.part && i.part.add(t);
-  }
-  class N extends Set {
-    static get isPolyfilled() {
-      return !0;
-    }
-    constructor(t) {
-      if (super(), !t || !t.tagName || t.tagName.indexOf("-") === -1)
-        throw new TypeError("Illegal constructor");
-      O.set(this, t);
-    }
-    add(t) {
-      if (!/^--/.test(t) || typeof t != "string")
-        throw new DOMException(`Failed to execute 'add' on 'CustomStateSet': The specified value ${t} must start with '--'.`);
-      const e = super.add(t), a = O.get(this), r = `state${t}`;
-      return a.isConnected ? Z(a, r) : setTimeout(() => {
-        Z(a, r);
-      }), e;
-    }
-    clear() {
-      for (let [t] of this.entries())
-        this.delete(t);
-      super.clear();
-    }
-    delete(t) {
-      const e = super.delete(t), a = O.get(this);
-      return a.isConnected ? (a.toggleAttribute(`state${t}`, !1), a.part && a.part.remove(`state${t}`)) : setTimeout(() => {
-        a.toggleAttribute(`state${t}`, !1), a.part && a.part.remove(`state${t}`);
-      }), e;
-    }
-  }
-  function tt(i, t, e, a) {
-    if (e === "a" && !a)
-      throw new TypeError("Private accessor was defined without a getter");
-    if (typeof t == "function" ? i !== t || !a : !t.has(i))
-      throw new TypeError("Cannot read private member from an object whose class did not declare it");
-    return e === "m" ? a : e === "a" ? a.call(i) : a ? a.value : t.get(i);
-  }
-  function ft(i, t, e, a, r) {
-    if (a === "m")
-      throw new TypeError("Private method is not writable");
-    if (a === "a" && !r)
-      throw new TypeError("Private accessor was defined without a setter");
-    if (typeof t == "function" ? i !== t || !r : !t.has(i))
-      throw new TypeError("Cannot write private member to an object whose class did not declare it");
-    return a === "a" ? r.call(i, e) : r ? r.value = e : t.set(i, e), e;
-  }
-  var F;
-  class wt {
-    constructor(t) {
-      F.set(this, void 0), ft(this, F, t, "f");
-      for (let e = 0; e < t.length; e++) {
-        let a = t[e];
-        this[e] = a, a.hasAttribute("name") && (this[a.getAttribute("name")] = a);
-      }
-      Object.freeze(this);
-    }
-    get length() {
-      return tt(this, F, "f").length;
-    }
-    [(F = /* @__PURE__ */ new WeakMap(), Symbol.iterator)]() {
-      return tt(this, F, "f")[Symbol.iterator]();
-    }
-    item(t) {
-      return this[t] == null ? null : this[t];
-    }
-    namedItem(t) {
-      return this[t] == null ? null : this[t];
-    }
-  }
-  function bt() {
-    const i = HTMLFormElement.prototype.checkValidity;
-    HTMLFormElement.prototype.checkValidity = e;
-    const t = HTMLFormElement.prototype.reportValidity;
-    HTMLFormElement.prototype.reportValidity = a;
-    function e(...n) {
-      let o = i.apply(this, n);
-      return Q(this, o, "checkValidity");
-    }
-    function a(...n) {
-      let o = t.apply(this, n);
-      return Q(this, o, "reportValidity");
-    }
-    const { get: r } = Object.getOwnPropertyDescriptor(HTMLFormElement.prototype, "elements");
-    Object.defineProperty(HTMLFormElement.prototype, "elements", {
-      get(...n) {
-        const o = r.call(this, ...n), u = Array.from(m.get(this) || []);
-        if (u.length === 0)
-          return o;
-        const d = Array.from(o).concat(u).sort((v, w) => v.compareDocumentPosition ? v.compareDocumentPosition(w) & 2 ? 1 : -1 : 0);
-        return new wt(d);
+    }, L = (e) => {
+      let t = e.parentNode;
+      return t && t.tagName !== "FORM" && (t = L(t)), t;
+    }, w = (e, t, i = DOMException) => {
+      if (!e.constructor.formAssociated)
+        throw new i(t);
+    }, Z = (e, t, i) => {
+      const a = y.get(e);
+      return a && a.size && a.forEach((r) => {
+        l.get(r)[i]() || (t = !1);
+      }), t;
+    }, tt = (e) => {
+      if (e.constructor.formAssociated) {
+        const t = l.get(e), { labels: i, form: a } = t;
+        Q(e, i), X(e, a, t);
       }
-    });
-  }
-  class et {
-    static get isPolyfilled() {
-      return !0;
+    };
+    function N() {
+      return typeof MutationObserver < "u";
     }
-    constructor(t) {
-      if (!t || !t.tagName || t.tagName.indexOf("-") === -1)
-        throw new TypeError("Illegal constructor");
-      const e = t.getRootNode(), a = new ht();
-      this.states = new N(t), h.set(this, t), c.set(this, a), l.set(t, this), at(t, this), st(t, this), Object.seal(this), e instanceof DocumentFragment && ot(e);
+    class wt {
+      constructor() {
+        this.badInput = !1, this.customError = !1, this.patternMismatch = !1, this.rangeOverflow = !1, this.rangeUnderflow = !1, this.stepMismatch = !1, this.tooLong = !1, this.tooShort = !1, this.typeMismatch = !1, this.valid = !0, this.valueMissing = !1, Object.seal(this);
+      }
     }
-    checkValidity() {
-      const t = h.get(this);
-      if (g(t, "Failed to execute 'checkValidity' on 'ElementInternals': The target element is not a form-associated custom element."), !this.willValidate)
+    const bt = (e) => (e.badInput = !1, e.customError = !1, e.patternMismatch = !1, e.rangeOverflow = !1, e.rangeUnderflow = !1, e.stepMismatch = !1, e.tooLong = !1, e.tooShort = !1, e.typeMismatch = !1, e.valid = !0, e.valueMissing = !1, e), gt = (e, t, i) => (e.valid = vt(t), Object.keys(t).forEach((a) => e[a] = t[a]), i && T(i), e), vt = (e) => {
+      let t = !0;
+      for (let i in e)
+        i !== "valid" && e[i] !== !1 && (t = !1);
+      return t;
+    }, O = /* @__PURE__ */ new WeakMap();
+    function et(e, t) {
+      e.toggleAttribute(t, !0), e.part && e.part.add(t);
+    }
+    class _ extends Set {
+      static get isPolyfilled() {
         return !0;
-      const e = c.get(this);
-      if (!e.valid) {
-        const a = new Event("invalid", {
-          bubbles: !1,
-          cancelable: !0,
-          composed: !1
-        });
-        t.dispatchEvent(a);
       }
-      return e.valid;
+      constructor(t) {
+        if (super(), !t || !t.tagName || t.tagName.indexOf("-") === -1)
+          throw new TypeError("Illegal constructor");
+        O.set(this, t);
+      }
+      add(t) {
+        if (!/^--/.test(t) || typeof t != "string")
+          throw new DOMException(`Failed to execute 'add' on 'CustomStateSet': The specified value ${t} must start with '--'.`);
+        const i = super.add(t), a = O.get(this), r = `state${t}`;
+        return a.isConnected ? et(a, r) : setTimeout(() => {
+          et(a, r);
+        }), i;
+      }
+      clear() {
+        for (let [t] of this.entries())
+          this.delete(t);
+        super.clear();
+      }
+      delete(t) {
+        const i = super.delete(t), a = O.get(this);
+        return a.isConnected ? (a.toggleAttribute(`state${t}`, !1), a.part && a.part.remove(`state${t}`)) : setTimeout(() => {
+          a.toggleAttribute(`state${t}`, !1), a.part && a.part.remove(`state${t}`);
+        }), i;
+      }
     }
-    get form() {
-      const t = h.get(this);
-      g(t, "Failed to read the 'form' property from 'ElementInternals': The target element is not a form-associated custom element.");
-      let e;
-      return t.constructor.formAssociated === !0 && (e = S(t)), e;
+    function it(e, t, i, a) {
+      if (i === "a" && !a)
+        throw new TypeError("Private accessor was defined without a getter");
+      if (typeof t == "function" ? e !== t || !a : !t.has(e))
+        throw new TypeError("Cannot read private member from an object whose class did not declare it");
+      return i === "m" ? a : i === "a" ? a.call(e) : a ? a.value : t.get(e);
+    }
+    function yt(e, t, i, a, r) {
+      if (a === "m")
+        throw new TypeError("Private method is not writable");
+      if (a === "a" && !r)
+        throw new TypeError("Private accessor was defined without a setter");
+      if (typeof t == "function" ? e !== t || !r : !t.has(e))
+        throw new TypeError("Cannot write private member to an object whose class did not declare it");
+      return a === "a" ? r.call(e, i) : r ? r.value = i : t.set(e, i), i;
+    }
+    var F;
+    class Et {
+      constructor(t) {
+        F.set(this, void 0), yt(this, F, t, "f");
+        for (let i = 0; i < t.length; i++) {
+          let a = t[i];
+          this[i] = a, a.hasAttribute("name") && (this[a.getAttribute("name")] = a);
+        }
+        Object.freeze(this);
+      }
+      get length() {
+        return it(this, F, "f").length;
+      }
+      [(F = /* @__PURE__ */ new WeakMap(), Symbol.iterator)]() {
+        return it(this, F, "f")[Symbol.iterator]();
+      }
+      item(t) {
+        return this[t] == null ? null : this[t];
+      }
+      namedItem(t) {
+        return this[t] == null ? null : this[t];
+      }
     }
-    get labels() {
-      const t = h.get(this);
-      g(t, "Failed to read the 'labels' property from 'ElementInternals': The target element is not a form-associated custom element.");
-      const e = t.getAttribute("id"), a = t.getRootNode();
-      return a && e ? a.querySelectorAll(`[for="${e}"]`) : [];
+    function kt() {
+      const e = HTMLFormElement.prototype.checkValidity;
+      HTMLFormElement.prototype.checkValidity = i;
+      const t = HTMLFormElement.prototype.reportValidity;
+      HTMLFormElement.prototype.reportValidity = a;
+      function i(...o) {
+        let s = e.apply(this, o);
+        return Z(this, s, "checkValidity");
+      }
+      function a(...o) {
+        let s = t.apply(this, o);
+        return Z(this, s, "reportValidity");
+      }
+      const { get: r } = Object.getOwnPropertyDescriptor(HTMLFormElement.prototype, "elements");
+      Object.defineProperty(HTMLFormElement.prototype, "elements", {
+        get(...o) {
+          const s = r.call(this, ...o), u = Array.from(y.get(this) || []);
+          if (u.length === 0)
+            return s;
+          const d = Array.from(s).concat(u).sort((b, f) => b.compareDocumentPosition ? b.compareDocumentPosition(f) & 2 ? 1 : -1 : 0);
+          return new Et(d);
+        }
+      });
     }
-    reportValidity() {
-      const t = h.get(this);
-      if (g(t, "Failed to execute 'reportValidity' on 'ElementInternals': The target element is not a form-associated custom element."), !this.willValidate)
+    class at {
+      static get isPolyfilled() {
         return !0;
-      const e = this.checkValidity(), a = W.get(this);
-      if (a && !t.constructor.formAssociated)
-        throw new DOMException("Failed to execute 'reportValidity' on 'ElementInternals': The target element is not a form-associated custom element.");
-      return !e && a && (t.focus(), a.focus()), e;
-    }
-    setFormValue(t) {
-      const e = h.get(this);
-      if (g(e, "Failed to execute 'setFormValue' on 'ElementInternals': The target element is not a form-associated custom element."), j(this), t != null && !(t instanceof FormData)) {
-        if (e.getAttribute("name")) {
-          const a = G(e, this);
-          a.value = t;
+      }
+      constructor(t) {
+        if (!t || !t.tagName || t.tagName.indexOf("-") === -1)
+          throw new TypeError("Illegal constructor");
+        const i = t.getRootNode(), a = new wt();
+        this.states = new _(t), n.set(this, t), c.set(this, a), l.set(t, this), ct(t, this), ht(t, this), Object.seal(this), i instanceof DocumentFragment && dt(i);
+      }
+      checkValidity() {
+        const t = n.get(this);
+        if (w(t, "Failed to execute 'checkValidity' on 'ElementInternals': The target element is not a form-associated custom element."), !this.willValidate)
+          return !0;
+        const i = c.get(this);
+        if (!i.valid) {
+          const a = new Event("invalid", {
+            bubbles: !1,
+            cancelable: !0,
+            composed: !1
+          });
+          t.dispatchEvent(a);
         }
-      } else
-        t != null && t instanceof FormData && Array.from(t).reverse().forEach(([a, r]) => {
-          if (typeof r == "string") {
-            const n = G(e, this);
-            n.name = a, n.value = r;
+        return i.valid;
+      }
+      get form() {
+        const t = n.get(this);
+        w(t, "Failed to read the 'form' property from 'ElementInternals': The target element is not a form-associated custom element.");
+        let i;
+        return t.constructor.formAssociated === !0 && (i = L(t)), i;
+      }
+      get labels() {
+        const t = n.get(this);
+        w(t, "Failed to read the 'labels' property from 'ElementInternals': The target element is not a form-associated custom element.");
+        const i = t.getAttribute("id"), a = t.getRootNode();
+        return a && i ? a.querySelectorAll(`[for="${i}"]`) : [];
+      }
+      reportValidity() {
+        const t = n.get(this);
+        if (w(t, "Failed to execute 'reportValidity' on 'ElementInternals': The target element is not a form-associated custom element."), !this.willValidate)
+          return !0;
+        const i = this.checkValidity(), a = B.get(this);
+        if (a && !t.constructor.formAssociated)
+          throw new DOMException("Failed to execute 'reportValidity' on 'ElementInternals': The target element is not a form-associated custom element.");
+        return !i && a && (t.focus(), a.focus()), i;
+      }
+      setFormValue(t) {
+        const i = n.get(this);
+        if (w(i, "Failed to execute 'setFormValue' on 'ElementInternals': The target element is not a form-associated custom element."), Y(this), t != null && !(t instanceof FormData)) {
+          if (i.getAttribute("name")) {
+            const a = J(i, this);
+            a.value = t;
           }
-        });
-      H.set(e, t);
-    }
-    setValidity(t, e, a) {
-      const r = h.get(this);
-      if (g(r, "Failed to execute 'setValidity' on 'ElementInternals': The target element is not a form-associated custom element."), !t)
-        throw new TypeError("Failed to execute 'setValidity' on 'ElementInternals': 1 argument required, but only 0 present.");
-      W.set(this, a);
-      const n = c.get(this), o = {};
-      for (const v in t)
-        o[v] = t[v];
-      Object.keys(o).length === 0 && ut(n);
-      const u = { ...n, ...o };
-      delete u.valid;
-      const { valid: d } = pt(n, u, this.form);
-      if (!d && !e)
-        throw new DOMException("Failed to execute 'setValidity' on 'ElementInternals': The second argument should not be empty if one or more flags in the first argument are true.");
-      p.set(this, d ? "" : e), r.isConnected ? (r.toggleAttribute("internals-invalid", !d), r.toggleAttribute("internals-valid", d), r.setAttribute("aria-invalid", `${!d}`)) : I.set(r, this);
-    }
-    get shadowRoot() {
-      const t = h.get(this), e = D.get(t);
-      return e || null;
-    }
-    get validationMessage() {
-      const t = h.get(this);
-      return g(t, "Failed to read the 'validationMessage' property from 'ElementInternals': The target element is not a form-associated custom element."), p.get(this);
-    }
-    get validity() {
-      const t = h.get(this);
-      return g(t, "Failed to read the 'validity' property from 'ElementInternals': The target element is not a form-associated custom element."), c.get(this);
-    }
-    get willValidate() {
-      const t = h.get(this);
-      return g(t, "Failed to read the 'willValidate' property from 'ElementInternals': The target element is not a form-associated custom element."), !(t.disabled || t.hasAttribute("disabled") || t.hasAttribute("readonly"));
-    }
-  }
-  function gt() {
-    if (typeof window > "u" || !window.ElementInternals || !HTMLElement.prototype.attachInternals)
-      return !1;
-    class i extends HTMLElement {
-      constructor() {
-        super(), this.internals = this.attachInternals();
+        } else
+          t != null && t instanceof FormData && Array.from(t).reverse().forEach(([a, r]) => {
+            if (typeof r == "string") {
+              const o = J(i, this);
+              o.name = a, o.value = r;
+            }
+          });
+        W.set(i, t);
+      }
+      setValidity(t, i, a) {
+        const r = n.get(this);
+        if (w(r, "Failed to execute 'setValidity' on 'ElementInternals': The target element is not a form-associated custom element."), !t)
+          throw new TypeError("Failed to execute 'setValidity' on 'ElementInternals': 1 argument required, but only 0 present.");
+        B.set(this, a);
+        const o = c.get(this), s = {};
+        for (const b in t)
+          s[b] = t[b];
+        Object.keys(s).length === 0 && bt(o);
+        const u = { ...o, ...s };
+        delete u.valid;
+        const { valid: d } = gt(o, u, this.form);
+        if (!d && !i)
+          throw new DOMException("Failed to execute 'setValidity' on 'ElementInternals': The second argument should not be empty if one or more flags in the first argument are true.");
+        m.set(this, d ? "" : i), r.isConnected ? (r.toggleAttribute("internals-invalid", !d), r.toggleAttribute("internals-valid", d), r.setAttribute("aria-invalid", `${!d}`)) : S.set(r, this);
+      }
+      get shadowRoot() {
+        const t = n.get(this), i = z.get(t);
+        return i || null;
+      }
+      get validationMessage() {
+        const t = n.get(this);
+        return w(t, "Failed to read the 'validationMessage' property from 'ElementInternals': The target element is not a form-associated custom element."), m.get(this);
+      }
+      get validity() {
+        const t = n.get(this);
+        return w(t, "Failed to read the 'validity' property from 'ElementInternals': The target element is not a form-associated custom element."), c.get(this);
+      }
+      get willValidate() {
+        const t = n.get(this);
+        return w(t, "Failed to read the 'willValidate' property from 'ElementInternals': The target element is not a form-associated custom element."), !(t.disabled || t.hasAttribute("disabled") || t.hasAttribute("readonly"));
       }
     }
-    const t = `element-internals-feature-detection-${Math.random().toString(36).replace(/[^a-z]+/g, "")}`;
-    customElements.define(t, i);
-    const e = new i();
-    return [
-      "shadowRoot",
-      "form",
-      "willValidate",
-      "validity",
-      "validationMessage",
-      "labels",
-      "setFormValue",
-      "setValidity",
-      "checkValidity",
-      "reportValidity"
-    ].every((a) => a in e.internals);
-  }
-  if (gt()) {
-    if (typeof window < "u" && !window.CustomStateSet) {
-      window.CustomStateSet = N;
-      const i = HTMLElement.prototype.attachInternals;
-      HTMLElement.prototype.attachInternals = function(...t) {
-        const e = i.call(this, t);
-        return e.states = new N(this), e;
-      };
-    }
-  } else {
-    if (typeof window < "u" && (window.ElementInternals = et), typeof CustomElementRegistry < "u") {
-      const i = CustomElementRegistry.prototype.define;
-      CustomElementRegistry.prototype.define = function(t, e, a) {
-        if (e.formAssociated) {
-          const r = e.prototype.connectedCallback;
-          e.prototype.connectedCallback = function() {
-            q.has(this) || (q.set(this, !0), this.hasAttribute("disabled") && $(this, !0)), r != null && r.apply(this), X(this);
+    function Mt() {
+      if (typeof window > "u" || !window.ElementInternals || !HTMLElement.prototype.attachInternals)
+        return !1;
+      class e extends HTMLElement {
+        constructor() {
+          super(), this.internals = this.attachInternals();
+        }
+      }
+      const t = `element-internals-feature-detection-${Math.random().toString(36).replace(/[^a-z]+/g, "")}`;
+      customElements.define(t, e);
+      const i = new e();
+      return [
+        "shadowRoot",
+        "form",
+        "willValidate",
+        "validity",
+        "validationMessage",
+        "labels",
+        "setFormValue",
+        "setValidity",
+        "checkValidity",
+        "reportValidity"
+      ].every((a) => a in i.internals);
+    }
+    let rt = !1, ot = !1;
+    function H(e) {
+      ot || (ot = !0, window.CustomStateSet = _, e && (HTMLElement.prototype.attachInternals = function(...t) {
+        const i = e.call(this, t);
+        return i.states = new _(this), i;
+      }));
+    }
+    function st(e = !0) {
+      if (!rt) {
+        if (rt = !0, typeof window < "u" && (window.ElementInternals = at), typeof CustomElementRegistry < "u") {
+          const t = CustomElementRegistry.prototype.define;
+          CustomElementRegistry.prototype.define = function(i, a, r) {
+            if (a.formAssociated) {
+              const o = a.prototype.connectedCallback;
+              a.prototype.connectedCallback = function() {
+                U.has(this) || (U.set(this, !0), this.hasAttribute("disabled") && $(this, !0)), o != null && o.apply(this), tt(this);
+              };
+            }
+            t.call(this, i, a, r);
           };
         }
-        i.call(this, t, e, a);
-      };
-    }
-    if (typeof HTMLElement < "u" && (HTMLElement.prototype.attachInternals = function() {
-      if (this.tagName) {
-        if (this.tagName.indexOf("-") === -1)
-          throw new Error("Failed to execute 'attachInternals' on 'HTMLElement': Unable to attach ElementInternals to non-custom elements.");
-      } else
-        return {};
-      if (l.has(this))
-        throw new DOMException("DOMException: Failed to execute 'attachInternals' on 'HTMLElement': ElementInternals for the specified element was already attached.");
-      return new et(this);
-    }), typeof Element < "u") {
-      let i = function(...e) {
-        const a = t.apply(this, e);
-        if (D.set(this, a), L()) {
-          const r = new MutationObserver(R);
-          window.ShadyDOM ? r.observe(this, P) : r.observe(a, P), b.set(this, r);
+        if (typeof HTMLElement < "u" && (HTMLElement.prototype.attachInternals = function() {
+          if (this.tagName) {
+            if (this.tagName.indexOf("-") === -1)
+              throw new Error("Failed to execute 'attachInternals' on 'HTMLElement': Unable to attach ElementInternals to non-custom elements.");
+          } else
+            return {};
+          if (l.has(this))
+            throw new DOMException("DOMException: Failed to execute 'attachInternals' on 'HTMLElement': ElementInternals for the specified element was already attached.");
+          return new at(this);
+        }), typeof Element < "u") {
+          let t = function(...a) {
+            const r = i.apply(this, a);
+            if (z.set(this, r), N()) {
+              const o = new MutationObserver(P);
+              window.ShadyDOM ? o.observe(this, R) : o.observe(r, R), M.set(this, o);
+            }
+            return r;
+          };
+          const i = Element.prototype.attachShadow;
+          Element.prototype.attachShadow = t;
         }
-        return a;
-      };
-      const t = Element.prototype.attachShadow;
-      Element.prototype.attachShadow = i;
+        N() && typeof document < "u" && new MutationObserver(P).observe(document.documentElement, R), typeof HTMLFormElement < "u" && kt(), (e || typeof window < "u" && !window.CustomStateSet) && H();
+      }
     }
-    L() && typeof document < "u" && new MutationObserver(R).observe(document.documentElement, P), typeof HTMLFormElement < "u" && bt(), typeof window < "u" && !window.CustomStateSet && (window.CustomStateSet = N);
-  }
+    return !!customElements.polyfillWrapFlushCallback || (Mt() ? typeof window < "u" && !window.CustomStateSet && H(HTMLElement.prototype.attachInternals) : st(!1)), v.forceCustomStateSetPolyfill = H, v.forceElementInternalsPolyfill = st, Object.defineProperty(v, "__esModule", { value: !0 }), v;
+  })({});
 })();
-var Vt = Object.defineProperty, Tt = Object.getOwnPropertyDescriptor, y = (h, c, s, l) => {
-  for (var p = l > 1 ? void 0 : l ? Tt(c, s) : c, E = h.length - 1, b; E >= 0; E--)
-    (b = h[E]) && (p = (l ? b(c, s, p) : b(p)) || p);
-  return l && p && Vt(c, s, p), p;
+var Pt = Object.defineProperty, Rt = Object.getOwnPropertyDescriptor, g = (v, n, c, h) => {
+  for (var l = h > 1 ? void 0 : h ? Rt(n, c) : n, m = v.length - 1, k; m >= 0; m--)
+    (k = v[m]) && (l = (h ? k(n, c, l) : k(l)) || l);
+  return h && l && Pt(n, c, l), l;
 };
-const it = "pie-switch";
-class f extends kt(Mt(vt)) {
+const nt = "pie-switch";
+class p extends At(It(Ct)) {
   constructor() {
     super(...arguments), this.labelPlacement = "leading", this.checked = !1, this.required = !1, this.value = "on", this.disabled = !1;
   }
-  firstUpdated(c) {
-    var s;
-    super.firstUpdated(c), this.handleFormAssociation(), (s = this.input) == null || s.addEventListener("invalid", (l) => {
-      this.dispatchEvent(new Event("invalid", l));
+  firstUpdated(n) {
+    var c;
+    super.firstUpdated(n), this.handleFormAssociation(), (c = this.input) == null || c.addEventListener("invalid", (h) => {
+      this.dispatchEvent(new Event("invalid", h));
     });
   }
-  updated(c) {
-    super.updated(c), this.handleFormAssociation();
+  updated(n) {
+    super.updated(n), this.handleFormAssociation();
   }
   /**
    * Ensures that the form value and validation state are in sync with the component.
@@ -508,11 +511,11 @@ class f extends kt(Mt(vt)) {
    * The onChange function updates the checkbox state and emits an event for consumers.
    * @param {Event} event - This should be the change event that was listened for on an input element with `type="checkbox"`.
    */
-  onChange(c) {
-    const { checked: s } = c == null ? void 0 : c.currentTarget;
-    this.checked = s;
-    const l = xt(c);
-    this.dispatchEvent(l), this.handleFormAssociation();
+  onChange(n) {
+    const { checked: c } = n == null ? void 0 : n.currentTarget;
+    this.checked = c;
+    const h = St(n);
+    this.dispatchEvent(h), this.handleFormAssociation();
   }
   /**
    * Returns a boolean value which indicates validity of the value of the component. If the value is invalid, this method also fires the invalid event on the component.
@@ -534,9 +537,9 @@ class f extends kt(Mt(vt)) {
    * Allows a consumer to set a custom validation message on the switch. An empty string counts as valid.
    * https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setCustomValidity
    */
-  setCustomValidity(c) {
-    var s;
-    (s = this.input) == null || s.setCustomValidity(c), this._internals.setValidity(this.validity, this.validationMessage, this.input);
+  setCustomValidity(n) {
+    var c;
+    (c = this.input) == null || c.setCustomValidity(n), this._internals.setValidity(this.validity, this.validationMessage, this.input);
   }
   /**
    * (Read-only) returns a ValidityState with the validity states that this element is in.
@@ -560,87 +563,87 @@ class f extends kt(Mt(vt)) {
    * @private
    */
   renderSwitchLabel() {
-    const { label: c, labelPlacement: s } = this;
-    return c ? A`
+    const { label: n, labelPlacement: c } = this;
+    return n ? A`
                 <label
                     for="switch"
-                    data-test-id="switch-label-${s}">
-                    ${c}
+                    data-test-id="switch-label-${c}">
+                    ${n}
                 </label>` : A``;
   }
   render() {
     const {
-      labelPlacement: c,
-      aria: s,
-      checked: l,
-      required: p,
-      disabled: E,
-      isRTL: b
-    } = this, m = "switch-description";
+      labelPlacement: n,
+      aria: c,
+      checked: h,
+      required: l,
+      disabled: m,
+      isRTL: k
+    } = this, M = "switch-description";
     return A`
             <div
                 class="c-switch-wrapper"
-                ?isRTL=${b}
-                ?disabled=${E}>
-                ${c === "leading" ? this.renderSwitchLabel() : x}
+                ?isRTL=${k}
+                ?disabled=${m}>
+                ${n === "leading" ? this.renderSwitchLabel() : x}
                 <label
                     data-test-id="switch-component"
                     class="c-switch"
-                    ?checked=${l}>
+                    ?checked=${h}>
                     <input
                         id="switch"
                         data-test-id="switch-input"
                         role="switch"
                         type="checkbox"
                         class="c-switch-input"
-                        .required=${p}
-                        .checked="${l}"
-                        .disabled="${E}"
+                        .required=${l}
+                        .checked="${h}"
+                        .disabled="${m}"
                         @change="${this.onChange}"
-                        aria-label="${(s == null ? void 0 : s.label) || x}"
-                        aria-describedby="${s != null && s.describedBy ? m : x}">
+                        aria-label="${(c == null ? void 0 : c.label) || x}"
+                        aria-describedby="${c != null && c.describedBy ? M : x}">
                     <div class="c-switch-control">
-                        ${l ? A`<icon-check></icon-check>` : x}
+                        ${h ? A`<icon-check></icon-check>` : x}
                     </div>
                 </label>
-                ${s != null && s.describedBy ? A`<div id="${m}" data-test-id="${m}" class="c-switch-description">${s == null ? void 0 : s.describedBy}</div>` : x}
-                ${c === "trailing" ? this.renderSwitchLabel() : x}
+                ${c != null && c.describedBy ? A`<div id="${M}" data-test-id="${M}" class="c-switch-description">${c == null ? void 0 : c.describedBy}</div>` : x}
+                ${n === "trailing" ? this.renderSwitchLabel() : x}
             </div>
         `;
   }
 }
-f.styles = yt(Ct);
-y([
-  Et('input[type="checkbox"]')
-], f.prototype, "input", 2);
-y([
-  k({ type: String })
-], f.prototype, "label", 2);
-y([
-  k({ type: String }),
-  Ft(it, It, "leading")
-], f.prototype, "labelPlacement", 2);
-y([
-  k({ type: Object })
-], f.prototype, "aria", 2);
-y([
-  k({ type: Boolean, reflect: !0 })
-], f.prototype, "checked", 2);
-y([
-  k({ type: Boolean, reflect: !0 })
-], f.prototype, "required", 2);
-y([
-  k({ type: String })
-], f.prototype, "value", 2);
-y([
-  k({ type: String })
-], f.prototype, "name", 2);
-y([
-  k({ type: Boolean, reflect: !0 })
-], f.prototype, "disabled", 2);
-At(it, f);
+p.styles = xt(Lt);
+g([
+  Ft('input[type="checkbox"]')
+], p.prototype, "input", 2);
+g([
+  E({ type: String })
+], p.prototype, "label", 2);
+g([
+  E({ type: String }),
+  Vt(nt, Nt, "leading")
+], p.prototype, "labelPlacement", 2);
+g([
+  E({ type: Object })
+], p.prototype, "aria", 2);
+g([
+  E({ type: Boolean, reflect: !0 })
+], p.prototype, "checked", 2);
+g([
+  E({ type: Boolean, reflect: !0 })
+], p.prototype, "required", 2);
+g([
+  E({ type: String })
+], p.prototype, "value", 2);
+g([
+  E({ type: String })
+], p.prototype, "name", 2);
+g([
+  E({ type: Boolean, reflect: !0 })
+], p.prototype, "disabled", 2);
+Tt(nt, p);
 export {
-  Pt as ON_SWITCH_CHANGED_EVENT,
-  f as PieSwitch,
-  It as labelPlacements
+  Wt as ON_SWITCH_CHANGED_EVENT,
+  p as PieSwitch,
+  Nt as labelPlacements
 };

package/dist/react.d.ts

@@ -92,8 +92,8 @@ declare class PieSwitch_2 extends PieSwitch_base implements SwitchProps {
 declare const PieSwitch_base: GenericConstructor<FormControlInterface> & GenericConstructor<RTLInterface> & typeof LitElement;
 
 declare type PieSwitchEvents = {
-    onInvalid?: (event: Event<any>) => void;
-    onChange?: (event: CustomEvent<any>) => void;
+    onInvalid?: (event: Event) => void;
+    onChange?: (event: CustomEvent) => void;
 };
 
 declare type ReactBaseType = React_2.InputHTMLAttributes<HTMLInputElement>;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-switch",
   "description": "PIE Design System Switch built using Web Components",
-  "version": "0.24.0",
+  "version": "0.24.1",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -36,10 +36,10 @@
     "cem-plugin-module-file-extensions": "0.0.5"
   },
   "dependencies": {
-    "@justeattakeaway/pie-icons-webc": "0.17.1",
-    "@justeattakeaway/pie-webc-core": "0.17.0",
-    "@justeattakeaway/pie-wrapper-react": "0.13.0",
-    "element-internals-polyfill": "1.3.9"
+    "@justeattakeaway/pie-icons-webc": "0.17.2",
+    "@justeattakeaway/pie-webc-core": "0.17.1",
+    "@justeattakeaway/pie-wrapper-react": "0.14.0",
+    "element-internals-polyfill": "1.3.10"
   },
   "volta": {
     "extends": "../../../package.json"

package/src/react.ts

@@ -19,8 +19,9 @@ const PieSwitchReact = createComponent({
 type ReactBaseType = React.InputHTMLAttributes<HTMLInputElement>
 
 type PieSwitchEvents = {
-    onInvalid?: (event: Event<any>) => void;
-    onChange?: (event: CustomEvent<any>) => void;
+    onInvalid?: (event: Event) => void;
+    onChange?: (event: CustomEvent) => void;
 };
 
-export const PieSwitch = PieSwitchReact as React.ForwardRefExoticComponent<React.PropsWithoutRef<SwitchProps> & React.RefAttributes<PieSwitchLit> & PieSwitchEvents & ReactBaseType>;
+export const PieSwitch = PieSwitchReact as React.ForwardRefExoticComponent<React.PropsWithoutRef<SwitchProps>
+    & React.RefAttributes<PieSwitchLit> & PieSwitchEvents & ReactBaseType>;