@justeattakeaway/pie-switch 2.5.1 → 2.5.2

package/custom-elements.json

@@ -355,6 +355,10 @@
             }
           ],
           "mixins": [
+            {
+              "name": "AssociatedLabelMixin",
+              "package": "@justeattakeaway/pie-webc-core"
+            },
             {
               "name": "FormControlMixin",
               "package": "@justeattakeaway/pie-webc-core"

package/dist/index.d.ts

@@ -1,9 +1,11 @@
+import { AssociatedLabelInterface } from '@justeattakeaway/pie-webc-core';
 import { ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
 import { CSSResult } from 'lit';
 import { FormControlInterface } from '@justeattakeaway/pie-webc-core';
 import { GenericConstructor } from '@justeattakeaway/pie-webc-core';
 import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElement';
 import { PIEInputElement } from '@justeattakeaway/pie-webc-core';
+import { PropertyValues } from 'lit';
 import { TemplateResult } from 'lit-html';
 
 declare type AriaProps = {
@@ -43,7 +45,7 @@ export declare class PieSwitch extends PieSwitch_base implements SwitchProps, PI
     focusTarget: HTMLElement;
     private _abortController;
     private _isAnimationAllowed;
-    protected firstUpdated(): void;
+    protected firstUpdated(changedProperties: PropertyValues): void;
     connectedCallback(): void;
     disconnectedCallback(): void;
     protected updated(): void;
@@ -95,7 +97,7 @@ export declare class PieSwitch extends PieSwitch_base implements SwitchProps, PI
     render(): TemplateResult;
 }
 
-declare const PieSwitch_base: GenericConstructor<FormControlInterface> & typeof PieElement;
+declare const PieSwitch_base: GenericConstructor<AssociatedLabelInterface> & GenericConstructor<FormControlInterface> & typeof PieElement;
 
 export declare interface SwitchProps {
     /**

package/dist/index.js

@@ -1,23 +1,23 @@
-import { LitElement as St, nothing as N, html as z, unsafeCSS as Vt } from "lit";
-import { unsafeStatic as Tt, html as Lt } from "lit/static-html.js";
-import { property as y, query as q, state as Nt } from "lit/decorators.js";
-import { classMap as Pt } from "lit/directives/class-map.js";
-import { ifDefined as Ot } from "lit/directives/if-defined.js";
-import { live as _t } from "lit/directives/live.js";
-import { FormControlMixin as $t, DelegatesFocusMixin as Dt, wrapNativeEvent as Rt, validPropertyValues as Ht, safeCustomElement as Wt } from "@justeattakeaway/pie-webc-core";
+import { LitElement as Se, nothing as P, html as B, unsafeCSS as Ve } from "lit";
+import { unsafeStatic as Te, html as Le } from "lit/static-html.js";
+import { property as y, query as U, state as Ne } from "lit/decorators.js";
+import { classMap as Pe } from "lit/directives/class-map.js";
+import { ifDefined as _e } from "lit/directives/if-defined.js";
+import { live as Oe } from "lit/directives/live.js";
+import { AssociatedLabelMixin as $e, FormControlMixin as De, DelegatesFocusMixin as Re, wrapNativeEvent as He, validPropertyValues as We, safeCustomElement as ze } from "@justeattakeaway/pie-webc-core";
 import "@justeattakeaway/pie-icons-webc/dist/IconCheck.js";
-const P = class P extends St {
+const _ = class _ extends Se {
   willUpdate() {
-    this.getAttribute("v") || this.setAttribute("v", P.v);
+    this.getAttribute("v") || this.setAttribute("v", _.v);
   }
 };
-P.v = "2.5.1";
-let B = P;
-var ht = {}, ut;
-function zt() {
-  return ut || (ut = 1, (function() {
+_.v = "2.5.2";
+let q = _;
+var he = {}, ue;
+function Be() {
+  return ue || (ue = 1, (function() {
     (function(n) {
-      const l = /* @__PURE__ */ new WeakMap(), d = /* @__PURE__ */ new WeakMap(), u = /* @__PURE__ */ new WeakMap(), c = /* @__PURE__ */ new WeakMap(), k = /* @__PURE__ */ new WeakMap(), E = /* @__PURE__ */ new WeakMap(), x = /* @__PURE__ */ new WeakMap(), b = /* @__PURE__ */ new WeakMap(), U = /* @__PURE__ */ new WeakMap(), A = /* @__PURE__ */ new WeakMap(), j = /* @__PURE__ */ new WeakMap(), K = /* @__PURE__ */ new WeakMap(), G = /* @__PURE__ */ new WeakMap(), J = /* @__PURE__ */ new WeakMap(), F = /* @__PURE__ */ new WeakMap(), I = {
+      const l = /* @__PURE__ */ new WeakMap(), d = /* @__PURE__ */ new WeakMap(), u = /* @__PURE__ */ new WeakMap(), c = /* @__PURE__ */ new WeakMap(), k = /* @__PURE__ */ new WeakMap(), E = /* @__PURE__ */ new WeakMap(), C = /* @__PURE__ */ new WeakMap(), b = /* @__PURE__ */ new WeakMap(), F = /* @__PURE__ */ new WeakMap(), M = /* @__PURE__ */ new WeakMap(), j = /* @__PURE__ */ new WeakMap(), K = /* @__PURE__ */ new WeakMap(), G = /* @__PURE__ */ new WeakMap(), J = /* @__PURE__ */ new WeakMap(), I = /* @__PURE__ */ new WeakMap(), S = {
         ariaAtomic: "aria-atomic",
         ariaAutoComplete: "aria-autocomplete",
         ariaBusy: "aria-busy",
@@ -60,253 +60,253 @@ function zt() {
         ariaValueNow: "aria-valuenow",
         ariaValueText: "aria-valuetext",
         role: "role"
-      }, pt = (e, t) => {
-        for (let i in I) {
-          t[i] = null;
+      }, pe = (t, e) => {
+        for (let i in S) {
+          e[i] = null;
           let a = null;
-          const r = I[i];
-          Object.defineProperty(t, i, {
+          const r = S[i];
+          Object.defineProperty(e, i, {
             get() {
               return a;
             },
             set(o) {
-              a = o, e.isConnected ? e.setAttribute(r, o) : A.set(e, t);
+              a = o, t.isConnected ? t.setAttribute(r, o) : M.set(t, e);
             }
           });
         }
       };
-      function Q(e) {
-        const t = c.get(e), { form: i } = t;
-        it(e, i, t), et(e, t.labels);
+      function Q(t) {
+        const e = c.get(t), { form: i } = e;
+        ie(t, i, e), te(t, e.labels);
       }
-      const X = (e, t = !1) => {
-        const i = document.createTreeWalker(e, NodeFilter.SHOW_ELEMENT, {
+      const X = (t, e = !1) => {
+        const i = document.createTreeWalker(t, NodeFilter.SHOW_ELEMENT, {
           acceptNode(o) {
             return c.has(o) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
           }
         });
         let a = i.nextNode();
-        const r = !t || e.disabled;
+        const r = !e || t.disabled;
         for (; a; )
-          a.formDisabledCallback && r && $(a, e.disabled), a = i.nextNode();
-      }, Y = { attributes: !0, attributeFilter: ["disabled", "name"] }, S = L() ? 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" && X(i)), t.attributeName === "name" && i.constructor.formAssociated) {
-            const a = c.get(i), r = U.get(i);
+          a.formDisabledCallback && r && D(a, t.disabled), a = i.nextNode();
+      }, Y = { attributes: !0, attributeFilter: ["disabled", "name"] }, V = N() ? new MutationObserver((t) => {
+        for (const e of t) {
+          const i = e.target;
+          if (e.attributeName === "disabled" && (i.constructor.formAssociated ? D(i, i.hasAttribute("disabled")) : i.localName === "fieldset" && X(i)), e.attributeName === "name" && i.constructor.formAssociated) {
+            const a = c.get(i), r = F.get(i);
             a.setFormValue(r);
           }
         }
       }) : {};
-      function O(e) {
-        e.forEach((t) => {
-          const { addedNodes: i, removedNodes: a } = t, r = Array.from(i), o = Array.from(a);
+      function O(t) {
+        t.forEach((e) => {
+          const { addedNodes: i, removedNodes: a } = e, r = Array.from(i), o = Array.from(a);
           r.forEach((s) => {
             var m;
-            if (c.has(s) && s.constructor.formAssociated && Q(s), A.has(s)) {
-              const h = A.get(s);
-              Object.keys(I).filter((v) => h[v] !== null).forEach((v) => {
-                s.setAttribute(I[v], h[v]);
-              }), A.delete(s);
+            if (c.has(s) && s.constructor.formAssociated && Q(s), M.has(s)) {
+              const h = M.get(s);
+              Object.keys(S).filter((v) => h[v] !== null).forEach((v) => {
+                s.setAttribute(S[v], h[v]);
+              }), M.delete(s);
             }
-            if (F.has(s)) {
-              const h = F.get(s);
-              s.setAttribute("internals-valid", h.validity.valid.toString()), s.setAttribute("internals-invalid", (!h.validity.valid).toString()), s.setAttribute("aria-invalid", (!h.validity.valid).toString()), F.delete(s);
+            if (I.has(s)) {
+              const h = I.get(s);
+              s.setAttribute("internals-valid", h.validity.valid.toString()), s.setAttribute("internals-invalid", (!h.validity.valid).toString()), s.setAttribute("aria-invalid", (!h.validity.valid).toString()), I.delete(s);
             }
             if (s.localName === "form") {
               const h = b.get(s), g = document.createTreeWalker(s, NodeFilter.SHOW_ELEMENT, {
-                acceptNode(W) {
-                  return c.has(W) && W.constructor.formAssociated && !(h && h.has(W)) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
+                acceptNode(z) {
+                  return c.has(z) && z.constructor.formAssociated && !(h && h.has(z)) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
                 }
               });
               let v = g.nextNode();
               for (; v; )
                 Q(v), v = g.nextNode();
             }
-            s.localName === "fieldset" && ((m = S.observe) === null || m === void 0 || m.call(S, s, Y), X(s, !0));
+            s.localName === "fieldset" && ((m = V.observe) === null || m === void 0 || m.call(V, s, Y), X(s, !0));
           }), o.forEach((s) => {
             const m = c.get(s);
-            m && u.get(m) && Z(m), x.has(s) && x.get(s).disconnect();
+            m && u.get(m) && Z(m), C.has(s) && C.get(s).disconnect();
           });
         });
       }
-      function mt(e) {
-        e.forEach((t) => {
-          const { removedNodes: i } = t;
+      function me(t) {
+        t.forEach((e) => {
+          const { removedNodes: i } = e;
           i.forEach((a) => {
-            const r = G.get(t.target);
-            c.has(a) && rt(a), r.disconnect();
+            const r = G.get(e.target);
+            c.has(a) && re(a), r.disconnect();
           });
         });
       }
-      const ft = (e) => {
-        var t, i;
-        const a = new MutationObserver(mt);
-        !((t = window == null ? void 0 : window.ShadyDOM) === null || t === void 0) && t.inUse && e.mode && e.host && (e = e.host), (i = a.observe) === null || i === void 0 || i.call(a, e, { childList: !0 }), G.set(e, a);
+      const fe = (t) => {
+        var e, i;
+        const a = new MutationObserver(me);
+        !((e = window == null ? void 0 : window.ShadyDOM) === null || e === void 0) && e.inUse && t.mode && t.host && (t = t.host), (i = a.observe) === null || i === void 0 || i.call(a, t, { childList: !0 }), G.set(t, a);
       };
-      L() && new MutationObserver(O);
-      const _ = {
+      N() && new MutationObserver(O);
+      const $ = {
         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]);
-      }, Z = (e) => {
-        u.get(e).forEach((i) => {
+      }, D = (t, e) => {
+        t.toggleAttribute("internals-disabled", e), e ? t.setAttribute("aria-disabled", "true") : t.removeAttribute("aria-disabled"), t.formDisabledCallback && t.formDisabledCallback.apply(t, [e]);
+      }, Z = (t) => {
+        u.get(t).forEach((i) => {
           i.remove();
-        }), u.set(e, []);
-      }, tt = (e, t) => {
+        }), u.set(t, []);
+      }, ee = (t, e) => {
         const i = document.createElement("input");
-        return i.type = "hidden", i.name = e.getAttribute("name"), e.after(i), u.get(t).push(i), i;
-      }, bt = (e, t) => {
+        return i.type = "hidden", i.name = t.getAttribute("name"), t.after(i), u.get(e).push(i), i;
+      }, be = (t, e) => {
         var i;
-        u.set(t, []), (i = S.observe) === null || i === void 0 || i.call(S, e, Y);
-      }, et = (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);
-        }
-      }, V = (e) => {
-        const t = Array.from(e.elements).filter((o) => !o.tagName.includes("-") && o.validity).map((o) => o.validity.valid), i = b.get(e) || [], a = Array.from(i).filter((o) => o.isConnected).map((o) => c.get(o).validity.valid), r = [...t, ...a].includes(!1);
-        e.toggleAttribute("internals-invalid", r), e.toggleAttribute("internals-valid", !r);
-      }, vt = (e) => {
-        V(T(e.target));
-      }, wt = (e) => {
-        V(T(e.target));
-      }, gt = (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 = b.get(e);
-            if (e.noValidate)
+        u.set(e, []), (i = V.observe) === null || i === void 0 || i.call(V, t, Y);
+      }, te = (t, e) => {
+        if (e.length) {
+          Array.from(e).forEach((a) => a.addEventListener("click", t.click.bind(t)));
+          let i = e[0].id;
+          e[0].id || (i = `${e[0].htmlFor}_Label`, e[0].id = i), t.setAttribute("aria-labelledby", i);
+        }
+      }, T = (t) => {
+        const e = Array.from(t.elements).filter((o) => !o.tagName.includes("-") && o.validity).map((o) => o.validity.valid), i = b.get(t) || [], a = Array.from(i).filter((o) => o.isConnected).map((o) => c.get(o).validity.valid), r = [...e, ...a].includes(!1);
+        t.toggleAttribute("internals-invalid", r), t.toggleAttribute("internals-valid", !r);
+      }, ve = (t) => {
+        T(L(t.target));
+      }, we = (t) => {
+        T(L(t.target));
+      }, ge = (t) => {
+        const e = ["button[type=submit]", "input[type=submit]", "button:not([type])"].map((i) => `${i}:not([disabled])`).map((i) => `${i}:not([form])${t.id ? `,${i}[form='${t.id}']` : ""}`).join(",");
+        t.addEventListener("click", (i) => {
+          if (i.target.closest(e)) {
+            const r = b.get(t);
+            if (t.noValidate)
               return;
             r.size && Array.from(r).reverse().map((m) => c.get(m).reportValidity()).includes(!1) && i.preventDefault();
           }
         });
-      }, yt = (e) => {
-        const t = b.get(e.target);
-        t && t.size && t.forEach((i) => {
+      }, ye = (t) => {
+        const e = b.get(t.target);
+        e && e.size && e.forEach((i) => {
           i.constructor.formAssociated && i.formResetCallback && i.formResetCallback.apply(i);
         });
-      }, it = (e, t, i) => {
-        if (t) {
-          const a = b.get(t);
+      }, ie = (t, e, i) => {
+        if (e) {
+          const a = b.get(e);
           if (a)
-            a.add(e);
+            a.add(t);
           else {
             const r = /* @__PURE__ */ new Set();
-            r.add(e), b.set(t, r), gt(t), t.addEventListener("reset", yt), t.addEventListener("input", vt), t.addEventListener("change", wt);
+            r.add(t), b.set(e, r), ge(e), e.addEventListener("reset", ye), e.addEventListener("input", ve), e.addEventListener("change", we);
           }
-          E.set(t, { ref: e, internals: i }), e.constructor.formAssociated && e.formAssociatedCallback && setTimeout(() => {
-            e.formAssociatedCallback.apply(e, [t]);
-          }, 0), V(t);
-        }
-      }, T = (e) => {
-        let t = e.parentNode;
-        return t && t.tagName !== "FORM" && (t = T(t)), t;
-      }, w = (e, t, i = DOMException) => {
-        if (!e.constructor.formAssociated)
-          throw new i(t);
-      }, at = (e, t, i) => {
-        const a = b.get(e);
+          E.set(e, { ref: t, internals: i }), t.constructor.formAssociated && t.formAssociatedCallback && setTimeout(() => {
+            t.formAssociatedCallback.apply(t, [e]);
+          }, 0), T(e);
+        }
+      }, L = (t) => {
+        let e = t.parentNode;
+        return e && e.tagName !== "FORM" && (e = L(e)), e;
+      }, w = (t, e, i = DOMException) => {
+        if (!t.constructor.formAssociated)
+          throw new i(e);
+      }, ae = (t, e, i) => {
+        const a = b.get(t);
         return a && a.size && a.forEach((r) => {
-          c.get(r)[i]() || (t = !1);
-        }), t;
-      }, rt = (e) => {
-        if (e.constructor.formAssociated) {
-          const t = c.get(e), { labels: i, form: a } = t;
-          et(e, i), it(e, a, t);
+          c.get(r)[i]() || (e = !1);
+        }), e;
+      }, re = (t) => {
+        if (t.constructor.formAssociated) {
+          const e = c.get(t), { labels: i, form: a } = e;
+          te(t, i), ie(t, a, e);
         }
       };
-      function L() {
+      function N() {
         return typeof MutationObserver < "u";
       }
-      class kt {
+      class ke {
         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 Et = (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), Mt = (e, t, i) => (e.valid = xt(t), Object.keys(t).forEach((a) => e[a] = t[a]), i && V(i), e), xt = (e) => {
-        let t = !0;
-        for (let i in e)
-          i !== "valid" && e[i] !== !1 && (t = !1);
-        return t;
-      }, D = /* @__PURE__ */ new WeakMap();
-      function ot(e, t) {
-        e.toggleAttribute(t, !0), e.part && e.part.add(t);
+      const Ee = (t) => (t.badInput = !1, t.customError = !1, t.patternMismatch = !1, t.rangeOverflow = !1, t.rangeUnderflow = !1, t.stepMismatch = !1, t.tooLong = !1, t.tooShort = !1, t.typeMismatch = !1, t.valid = !0, t.valueMissing = !1, t), Me = (t, e, i) => (t.valid = xe(e), Object.keys(e).forEach((a) => t[a] = e[a]), i && T(i), t), xe = (t) => {
+        let e = !0;
+        for (let i in t)
+          i !== "valid" && t[i] !== !1 && (e = !1);
+        return e;
+      }, R = /* @__PURE__ */ new WeakMap();
+      function oe(t, e) {
+        t.toggleAttribute(e, !0), t.part && t.part.add(e);
       }
-      class R extends Set {
+      class H extends Set {
         static get isPolyfilled() {
           return !0;
         }
-        constructor(t) {
-          if (super(), !t || !t.tagName || t.tagName.indexOf("-") === -1)
+        constructor(e) {
+          if (super(), !e || !e.tagName || e.tagName.indexOf("-") === -1)
             throw new TypeError("Illegal constructor");
-          D.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 = D.get(this), r = `state${t}`;
-          return a.isConnected ? ot(a, r) : setTimeout(() => {
-            ot(a, r);
+          R.set(this, e);
+        }
+        add(e) {
+          if (!/^--/.test(e) || typeof e != "string")
+            throw new DOMException(`Failed to execute 'add' on 'CustomStateSet': The specified value ${e} must start with '--'.`);
+          const i = super.add(e), a = R.get(this), r = `state${e}`;
+          return a.isConnected ? oe(a, r) : setTimeout(() => {
+            oe(a, r);
           }), i;
         }
         clear() {
-          for (let [t] of this.entries())
-            this.delete(t);
+          for (let [e] of this.entries())
+            this.delete(e);
           super.clear();
         }
-        delete(t) {
-          const i = super.delete(t), a = D.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}`);
+        delete(e) {
+          const i = super.delete(e), a = R.get(this);
+          return a.isConnected ? (a.toggleAttribute(`state${e}`, !1), a.part && a.part.remove(`state${e}`)) : setTimeout(() => {
+            a.toggleAttribute(`state${e}`, !1), a.part && a.part.remove(`state${e}`);
           }), i;
         }
       }
-      function st(e, t, i, a) {
-        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 se(t, e, i, a) {
+        if (typeof e == "function" ? t !== e || !a : !e.has(t)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+        return i === "m" ? a : i === "a" ? a.call(t) : a ? a.value : e.get(t);
       }
-      function Ct(e, t, i, a, r) {
-        if (typeof t == "function" ? e !== t || !0 : !t.has(e)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
-        return t.set(e, i), i;
+      function Ce(t, e, i, a, r) {
+        if (typeof e == "function" ? t !== e || !0 : !e.has(t)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+        return e.set(t, i), i;
       }
-      var C;
-      class At {
-        constructor(t) {
-          C.set(this, void 0), Ct(this, C, t);
-          for (let i = 0; i < t.length; i++) {
-            let a = t[i];
+      var A;
+      class Ae {
+        constructor(e) {
+          A.set(this, void 0), Ce(this, A, e);
+          for (let i = 0; i < e.length; i++) {
+            let a = e[i];
             this[i] = a, a.hasAttribute("name") && (this[a.getAttribute("name")] = a);
           }
           Object.freeze(this);
         }
         get length() {
-          return st(this, C, "f").length;
+          return se(this, A, "f").length;
         }
-        [(C = /* @__PURE__ */ new WeakMap(), Symbol.iterator)]() {
-          return st(this, C, "f")[Symbol.iterator]();
+        [(A = /* @__PURE__ */ new WeakMap(), Symbol.iterator)]() {
+          return se(this, A, "f")[Symbol.iterator]();
         }
-        item(t) {
-          return this[t] == null ? null : this[t];
+        item(e) {
+          return this[e] == null ? null : this[e];
         }
-        namedItem(t) {
-          return this[t] == null ? null : this[t];
+        namedItem(e) {
+          return this[e] == null ? null : this[e];
         }
       }
-      function Ft() {
-        const e = HTMLFormElement.prototype.checkValidity;
+      function Fe() {
+        const t = HTMLFormElement.prototype.checkValidity;
         HTMLFormElement.prototype.checkValidity = i;
-        const t = HTMLFormElement.prototype.reportValidity;
+        const e = HTMLFormElement.prototype.reportValidity;
         HTMLFormElement.prototype.reportValidity = a;
         function i(...o) {
-          let s = e.apply(this, o);
-          return at(this, s, "checkValidity");
+          let s = t.apply(this, o);
+          return ae(this, s, "checkValidity");
         }
         function a(...o) {
-          let s = t.apply(this, o);
-          return at(this, s, "reportValidity");
+          let s = e.apply(this, o);
+          return ae(this, s, "reportValidity");
         }
         const { get: r } = Object.getOwnPropertyDescriptor(HTMLFormElement.prototype, "elements");
         Object.defineProperty(HTMLFormElement.prototype, "elements", {
@@ -315,23 +315,23 @@ function zt() {
             if (m.length === 0)
               return s;
             const h = Array.from(s).concat(m).sort((g, v) => g.compareDocumentPosition ? g.compareDocumentPosition(v) & 2 ? 1 : -1 : 0);
-            return new At(h);
+            return new Ae(h);
           }
         });
       }
-      class nt {
+      class ne {
         static get isPolyfilled() {
           return !0;
         }
-        constructor(t) {
-          if (!t || !t.tagName || t.tagName.indexOf("-") === -1)
+        constructor(e) {
+          if (!e || !e.tagName || e.tagName.indexOf("-") === -1)
             throw new TypeError("Illegal constructor");
-          const i = t.getRootNode(), a = new kt();
-          this.states = new R(t), l.set(this, t), d.set(this, a), c.set(t, this), pt(t, this), bt(t, this), Object.seal(this), i instanceof DocumentFragment && ft(i);
+          const i = e.getRootNode(), a = new ke();
+          this.states = new H(e), l.set(this, e), d.set(this, a), c.set(e, this), pe(e, this), be(e, this), Object.seal(this), i instanceof DocumentFragment && fe(i);
         }
         checkValidity() {
-          const t = l.get(this);
-          if (w(t, "Failed to execute 'checkValidity' on 'ElementInternals': The target element is not a form-associated custom element."), !this.willValidate)
+          const e = l.get(this);
+          if (w(e, "Failed to execute 'checkValidity' on 'ElementInternals': The target element is not a form-associated custom element."), !this.willValidate)
             return !0;
           const i = d.get(this);
           if (!i.valid) {
@@ -340,90 +340,90 @@ function zt() {
               cancelable: !0,
               composed: !1
             });
-            t.dispatchEvent(a);
+            e.dispatchEvent(a);
           }
           return i.valid;
         }
         get form() {
-          const t = l.get(this);
-          w(t, "Failed to read the 'form' property from 'ElementInternals': The target element is not a form-associated custom element.");
+          const e = l.get(this);
+          w(e, "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 = T(t)), i;
+          return e.constructor.formAssociated === !0 && (i = L(e)), i;
         }
         get labels() {
-          const t = l.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();
+          const e = l.get(this);
+          w(e, "Failed to read the 'labels' property from 'ElementInternals': The target element is not a form-associated custom element.");
+          const i = e.getAttribute("id"), a = e.getRootNode();
           return a && i ? a.querySelectorAll(`[for="${i}"]`) : [];
         }
         reportValidity() {
-          const t = l.get(this);
-          if (w(t, "Failed to execute 'reportValidity' on 'ElementInternals': The target element is not a form-associated custom element."), !this.willValidate)
+          const e = l.get(this);
+          if (w(e, "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 = K.get(this);
-          if (a && !t.constructor.formAssociated)
+          if (a && !e.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;
+          return !i && a && (e.focus(), a.focus()), i;
         }
-        setFormValue(t) {
+        setFormValue(e) {
           const i = l.get(this);
-          if (w(i, "Failed to execute 'setFormValue' on 'ElementInternals': The target element is not a form-associated custom element."), Z(this), t != null && !(t instanceof FormData)) {
+          if (w(i, "Failed to execute 'setFormValue' on 'ElementInternals': The target element is not a form-associated custom element."), Z(this), e != null && !(e instanceof FormData)) {
             if (i.getAttribute("name")) {
-              const a = tt(i, this);
-              a.value = t;
+              const a = ee(i, this);
+              a.value = e;
             }
-          } else t != null && t instanceof FormData && Array.from(t).reverse().forEach(([a, r]) => {
+          } else e != null && e instanceof FormData && Array.from(e).reverse().forEach(([a, r]) => {
             if (typeof r == "string") {
-              const o = tt(i, this);
+              const o = ee(i, this);
               o.name = a, o.value = r;
             }
           });
-          U.set(i, t);
+          F.set(i, e);
         }
-        setValidity(t, i, a) {
+        setValidity(e, i, a) {
           const r = l.get(this);
-          if (w(r, "Failed to execute 'setValidity' on 'ElementInternals': The target element is not a form-associated custom element."), !t)
+          if (w(r, "Failed to execute 'setValidity' on 'ElementInternals': The target element is not a form-associated custom element."), !e)
             throw new TypeError("Failed to execute 'setValidity' on 'ElementInternals': 1 argument required, but only 0 present.");
           K.set(this, a);
           const o = d.get(this), s = {};
-          for (const g in t)
-            s[g] = t[g];
-          Object.keys(s).length === 0 && Et(o);
+          for (const g in e)
+            s[g] = e[g];
+          Object.keys(s).length === 0 && Ee(o);
           const m = Object.assign(Object.assign({}, o), s);
           delete m.valid;
-          const { valid: h } = Mt(o, m, this.form);
+          const { valid: h } = Me(o, m, this.form);
           if (!h && !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.");
-          k.set(this, h ? "" : i), r.isConnected ? (r.toggleAttribute("internals-invalid", !h), r.toggleAttribute("internals-valid", h), r.setAttribute("aria-invalid", `${!h}`)) : F.set(r, this);
+          k.set(this, h ? "" : i), r.isConnected ? (r.toggleAttribute("internals-invalid", !h), r.toggleAttribute("internals-valid", h), r.setAttribute("aria-invalid", `${!h}`)) : I.set(r, this);
         }
         get shadowRoot() {
-          const t = l.get(this), i = j.get(t);
+          const e = l.get(this), i = j.get(e);
           return i || null;
         }
         get validationMessage() {
-          const t = l.get(this);
-          return w(t, "Failed to read the 'validationMessage' property from 'ElementInternals': The target element is not a form-associated custom element."), k.get(this);
+          const e = l.get(this);
+          return w(e, "Failed to read the 'validationMessage' property from 'ElementInternals': The target element is not a form-associated custom element."), k.get(this);
         }
         get validity() {
-          const t = l.get(this);
-          return w(t, "Failed to read the 'validity' property from 'ElementInternals': The target element is not a form-associated custom element."), d.get(this);
+          const e = l.get(this);
+          return w(e, "Failed to read the 'validity' property from 'ElementInternals': The target element is not a form-associated custom element."), d.get(this);
         }
         get willValidate() {
-          const t = l.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 e = l.get(this);
+          return w(e, "Failed to read the 'willValidate' property from 'ElementInternals': The target element is not a form-associated custom element."), !(e.disabled || e.hasAttribute("disabled") || e.hasAttribute("readonly"));
         }
       }
-      function It() {
+      function Ie() {
         if (typeof window > "u" || !window.ElementInternals || !HTMLElement.prototype.attachInternals)
           return !1;
-        class e extends HTMLElement {
+        class t 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();
+        const e = `element-internals-feature-detection-${Math.random().toString(36).replace(/[^a-z]+/g, "")}`;
+        customElements.define(e, t);
+        const i = new t();
         return [
           "shadowRoot",
           "form",
@@ -437,25 +437,25 @@ function zt() {
           "reportValidity"
         ].every((a) => a in i.internals);
       }
-      let lt = !1, ct = !1;
-      function H(e) {
-        ct || (ct = !0, window.CustomStateSet = R, e && (HTMLElement.prototype.attachInternals = function(...t) {
-          const i = e.call(this, t);
-          return i.states = new R(this), i;
+      let le = !1, ce = !1;
+      function W(t) {
+        ce || (ce = !0, window.CustomStateSet = H, t && (HTMLElement.prototype.attachInternals = function(...e) {
+          const i = t.call(this, e);
+          return i.states = new H(this), i;
         }));
       }
-      function dt(e = !0) {
-        if (!lt) {
-          if (lt = !0, typeof window < "u" && (window.ElementInternals = nt), typeof CustomElementRegistry < "u") {
-            const t = CustomElementRegistry.prototype.define;
+      function de(t = !0) {
+        if (!le) {
+          if (le = !0, typeof window < "u" && (window.ElementInternals = ne), typeof CustomElementRegistry < "u") {
+            const e = CustomElementRegistry.prototype.define;
             CustomElementRegistry.prototype.define = function(i, a, r) {
               if (a.formAssociated) {
                 const o = a.prototype.connectedCallback;
                 a.prototype.connectedCallback = function() {
-                  J.has(this) || (J.set(this, !0), this.hasAttribute("disabled") && $(this, !0)), o != null && o.apply(this), rt(this);
+                  J.has(this) || (J.set(this, !0), this.hasAttribute("disabled") && D(this, !0)), o != null && o.apply(this), re(this);
                 };
               }
-              t.call(this, i, a, r);
+              e.call(this, i, a, r);
             };
           }
           if (typeof HTMLElement < "u" && (HTMLElement.prototype.attachInternals = function() {
@@ -465,28 +465,28 @@ function zt() {
             } else return {};
             if (c.has(this))
               throw new DOMException("DOMException: Failed to execute 'attachInternals' on 'HTMLElement': ElementInternals for the specified element was already attached.");
-            return new nt(this);
+            return new ne(this);
           }), typeof Element < "u") {
-            let t = function(...a) {
+            let e = function(...a) {
               const r = i.apply(this, a);
-              if (j.set(this, r), L()) {
+              if (j.set(this, r), N()) {
                 const o = new MutationObserver(O);
-                window.ShadyDOM ? o.observe(this, _) : o.observe(r, _), x.set(this, o);
+                window.ShadyDOM ? o.observe(this, $) : o.observe(r, $), C.set(this, o);
               }
               return r;
             };
             const i = Element.prototype.attachShadow;
-            Element.prototype.attachShadow = t;
+            Element.prototype.attachShadow = e;
           }
-          L() && typeof document < "u" && new MutationObserver(O).observe(document.documentElement, _), typeof HTMLFormElement < "u" && Ft(), (e || typeof window < "u" && !window.CustomStateSet) && H();
+          N() && typeof document < "u" && new MutationObserver(O).observe(document.documentElement, $), typeof HTMLFormElement < "u" && Fe(), (t || typeof window < "u" && !window.CustomStateSet) && W();
         }
       }
-      return !!customElements.polyfillWrapFlushCallback || (It() ? typeof window < "u" && !window.CustomStateSet && H(HTMLElement.prototype.attachInternals) : dt(!1)), n.forceCustomStateSetPolyfill = H, n.forceElementInternalsPolyfill = dt, Object.defineProperty(n, "__esModule", { value: !0 }), n;
+      return !!customElements.polyfillWrapFlushCallback || (Ie() ? typeof window < "u" && !window.CustomStateSet && W(HTMLElement.prototype.attachInternals) : de(!1)), n.forceCustomStateSetPolyfill = W, n.forceElementInternalsPolyfill = de, Object.defineProperty(n, "__esModule", { value: !0 }), n;
     })({});
-  })()), ht;
+  })()), he;
 }
-zt();
-const Bt = "*,*:after,*:before{box-sizing:inherit}:host{display:block}*,*:before,*:after{cursor:inherit}.c-switch-wrapper{display:inline-flex;align-items:center;gap:var(--dt-spacing-b);vertical-align:top;font-family:var(--dt-font-body-l-family);cursor:pointer}.c-switch-wrapper[disabled]{cursor:not-allowed}.c-switch{--int-states-mixin-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(--int-states-mixin-bg-color)}@media(hover:hover){.c-switch:hover:not(:disabled,.is-disabled,.is-dismissible){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--int-states-mixin-bg-color: hsl(var(--dt-color-interactive-form-h), var(--dt-color-interactive-form-s), calc(var(--dt-color-interactive-form-l) + var(--hover-modifier)))}}.c-switch:active:not(:disabled,.is-disabled,.is-dismissible),.c-switch.is-loading:not(:disabled,.is-disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--int-states-mixin-bg-color: hsl(var(--dt-color-interactive-form-h), var(--dt-color-interactive-form-s), calc(var(--dt-color-interactive-form-l) + var(--active-modifier)))}@supports (background-color: color-mix(in srgb,black,white)){@media(hover:hover){.c-switch:hover:not(:disabled,.is-disabled,.is-dismissible){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-interactive-form))}}.c-switch:active:not(:disabled,.is-disabled,.is-dismissible),.c-switch.is-loading:not(:disabled,.is-disabled){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-interactive-form))}}.c-switch[checked]{--int-states-mixin-bg-color: var(--dt-color-interactive-brand)}@media(hover:hover){.c-switch[checked]:hover:not(:disabled,.is-disabled,.is-dismissible){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--int-states-mixin-bg-color: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) + var(--hover-modifier)))}}.c-switch[checked]:active:not(:disabled,.is-disabled,.is-dismissible),.c-switch[checked].is-loading:not(:disabled,.is-disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--int-states-mixin-bg-color: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) + var(--active-modifier)))}@supports (background-color: color-mix(in srgb,black,white)){@media(hover:hover){.c-switch[checked]:hover:not(:disabled,.is-disabled,.is-dismissible){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-interactive-brand))}}.c-switch[checked]:active:not(:disabled,.is-disabled,.is-dismissible),.c-switch[checked].is-loading:not(:disabled,.is-disabled){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-interactive-brand))}}[disabled] .c-switch{--int-states-mixin-bg-color: var(--switch-bg-color--disabled);pointer-events:none}.c-switch:has(.c-switch-input:focus-visible){box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer);outline:none}.c-switch-input{position:absolute;display:block;height:1px;width:1px;border:0;padding:0;margin:-1px;overflow:hidden;white-space:nowrap;clip:rect(0,0,0,0);clip-path:inset(50%)}.c-switch-input *{overflow:hidden}.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)}.c-switch-wrapper:dir(rtl) .c-switch-control{position:absolute;left:initial;right:2px}.c-switch-control .c-pieIcon--check{vertical-align:top}.c-switch-input:checked+.c-switch-control{transform:translate(var(--switch-translation))}.c-switch-input:checked+.c-switch-control .c-pieIcon--check{color:var(--dt-color-interactive-brand)}.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)}.c-switch-label{color:var(--dt-color-content-default-solid)}.c-switch-description{position:absolute;display:block;height:1px;width:1px;border:0;padding:0;margin:-1px;overflow:hidden;white-space:nowrap;clip:rect(0,0,0,0);clip-path:inset(50%)}.c-switch-description *{overflow:hidden}.c-switch-wrapper--label-leading{flex-direction:row-reverse}.c-switch-wrapper--label-trailing{flex-direction:row}@media(prefers-reduced-motion:no-preference){.c-switch-wrapper--allow-animation .c-switch{transition:background-color .15s cubic-bezier(.4,0,.9,1) 0s}}@media(prefers-reduced-motion:no-preference){.c-switch-wrapper--allow-animation .c-switch[checked]{transition:background-color .15s cubic-bezier(.4,0,.9,1) 0s}}@media(prefers-reduced-motion:no-preference){.c-switch-wrapper--allow-animation .c-switch-control{transition:transform .15s cubic-bezier(.4,0,.9,1) 0s}}@media(prefers-reduced-motion:no-preference){.c-switch-input:checked+.c-switch-wrapper--allow-animation .c-switch-control{transition:transform .15s cubic-bezier(.4,0,.9,1) 0s}}@media(prefers-reduced-motion:no-preference){.c-switch-input:checked+.c-switch-wrapper--allow-animation .c-switch-control .c-pieIcon--check{transition:color .15s cubic-bezier(.4,0,.9,1) 0s}}@media(prefers-reduced-motion:no-preference){.c-switch-input:disabled~.c-switch-wrapper--allow-animation .c-switch-control .c-pieIcon--check{transition:color .15s cubic-bezier(.4,0,.9,1) 0s}}.c-switch-wrapper:dir(rtl) .c-switch-input:checked+.c-switch-control{transform:translate(calc(-1 * var(--switch-translation)))}", qt = ["leading", "trailing"], ae = "change", M = {
+Be();
+const qe = "*,*:after,*:before{box-sizing:inherit}:host{display:block}*,*:before,*:after{cursor:inherit}.c-switch-wrapper{display:inline-flex;align-items:center;gap:var(--dt-spacing-b);vertical-align:top;font-family:var(--dt-font-body-l-family);cursor:pointer}.c-switch-wrapper[disabled]{cursor:not-allowed}.c-switch{--int-states-mixin-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(--int-states-mixin-bg-color)}@media(hover:hover){.c-switch:hover:not(:disabled,.is-disabled,.is-dismissible){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--int-states-mixin-bg-color: hsl(var(--dt-color-interactive-form-h), var(--dt-color-interactive-form-s), calc(var(--dt-color-interactive-form-l) + var(--hover-modifier)))}}.c-switch:active:not(:disabled,.is-disabled,.is-dismissible),.c-switch.is-loading:not(:disabled,.is-disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--int-states-mixin-bg-color: hsl(var(--dt-color-interactive-form-h), var(--dt-color-interactive-form-s), calc(var(--dt-color-interactive-form-l) + var(--active-modifier)))}@supports (background-color: color-mix(in srgb,black,white)){@media(hover:hover){.c-switch:hover:not(:disabled,.is-disabled,.is-dismissible){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-interactive-form))}}.c-switch:active:not(:disabled,.is-disabled,.is-dismissible),.c-switch.is-loading:not(:disabled,.is-disabled){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-interactive-form))}}.c-switch[checked]{--int-states-mixin-bg-color: var(--dt-color-interactive-brand)}@media(hover:hover){.c-switch[checked]:hover:not(:disabled,.is-disabled,.is-dismissible){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--int-states-mixin-bg-color: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) + var(--hover-modifier)))}}.c-switch[checked]:active:not(:disabled,.is-disabled,.is-dismissible),.c-switch[checked].is-loading:not(:disabled,.is-disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--int-states-mixin-bg-color: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) + var(--active-modifier)))}@supports (background-color: color-mix(in srgb,black,white)){@media(hover:hover){.c-switch[checked]:hover:not(:disabled,.is-disabled,.is-dismissible){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-interactive-brand))}}.c-switch[checked]:active:not(:disabled,.is-disabled,.is-dismissible),.c-switch[checked].is-loading:not(:disabled,.is-disabled){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-interactive-brand))}}[disabled] .c-switch{--int-states-mixin-bg-color: var(--switch-bg-color--disabled);pointer-events:none}.c-switch:has(.c-switch-input:focus-visible){box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer);outline:none}.c-switch-input{position:absolute;display:block;height:1px;width:1px;border:0;padding:0;margin:-1px;overflow:hidden;white-space:nowrap;clip:rect(0,0,0,0);clip-path:inset(50%)}.c-switch-input *{overflow:hidden}.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)}.c-switch-wrapper:dir(rtl) .c-switch-control{position:absolute;left:initial;right:2px}.c-switch-control .c-pieIcon--check{vertical-align:top}.c-switch[checked] .c-switch-control{transform:translate(var(--switch-translation))}.c-switch[checked] .c-switch-control .c-pieIcon--check{color:var(--dt-color-interactive-brand)}.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)}.c-switch-label{color:var(--dt-color-content-default-solid)}.c-switch-description{position:absolute;display:block;height:1px;width:1px;border:0;padding:0;margin:-1px;overflow:hidden;white-space:nowrap;clip:rect(0,0,0,0);clip-path:inset(50%)}.c-switch-description *{overflow:hidden}.c-switch-wrapper--label-leading{flex-direction:row-reverse}.c-switch-wrapper--label-trailing{flex-direction:row}@media(prefers-reduced-motion:no-preference){.c-switch-wrapper--allow-animation .c-switch{transition:background-color .15s cubic-bezier(.4,0,.9,1) 0s}}@media(prefers-reduced-motion:no-preference){.c-switch-wrapper--allow-animation .c-switch[checked]{transition:background-color .15s cubic-bezier(.4,0,.9,1) 0s}}@media(prefers-reduced-motion:no-preference){.c-switch-wrapper--allow-animation .c-switch-control{transition:transform .15s cubic-bezier(.4,0,.9,1) 0s}}@media(prefers-reduced-motion:no-preference){.c-switch[checked] .c-switch-wrapper--allow-animation .c-switch-control{transition:transform .15s cubic-bezier(.4,0,.9,1) 0s}}@media(prefers-reduced-motion:no-preference){.c-switch[checked] .c-switch-wrapper--allow-animation .c-switch-control .c-pieIcon--check{transition:color .15s cubic-bezier(.4,0,.9,1) 0s}}@media(prefers-reduced-motion:no-preference){.c-switch-input:disabled~.c-switch-wrapper--allow-animation .c-switch-control .c-pieIcon--check{transition:color .15s cubic-bezier(.4,0,.9,1) 0s}}.c-switch-wrapper:dir(rtl) .c-switch[checked] .c-switch-control{transform:translate(calc(-1 * var(--switch-translation)))}", Ue = ["leading", "trailing"], rt = "change", x = {
   checked: !1,
   defaultChecked: !1,
   disabled: !1,
@@ -494,20 +494,22 @@ const Bt = "*,*:after,*:before{box-sizing:inherit}:host{display:block}*,*:before
   required: !1,
   value: "on"
 };
-var Ut = Object.defineProperty, jt = Object.getOwnPropertyDescriptor, f = (n, l, d, u) => {
-  for (var c = u > 1 ? void 0 : u ? jt(l, d) : l, k = n.length - 1, E; k >= 0; k--)
+var je = Object.defineProperty, Ke = Object.getOwnPropertyDescriptor, f = (n, l, d, u) => {
+  for (var c = u > 1 ? void 0 : u ? Ke(l, d) : l, k = n.length - 1, E; k >= 0; k--)
     (E = n[k]) && (c = (u ? E(l, d, c) : E(c)) || c);
-  return u && c && Ut(l, d, c), c;
+  return u && c && je(l, d, c), c;
 };
-const Kt = "pie-switch";
-let p = class extends $t(Dt(B)) {
+const Ge = "pie-switch";
+let p = class extends $e(De(Re(q))) {
   constructor() {
-    super(...arguments), this.labelPlacement = M.labelPlacement, this.checked = M.checked, this.defaultChecked = M.defaultChecked, this.required = M.required, this.value = M.value, this.disabled = M.disabled, this._isAnimationAllowed = !1;
+    super(...arguments), this.labelPlacement = x.labelPlacement, this.checked = x.checked, this.defaultChecked = x.defaultChecked, this.required = x.required, this.value = x.value, this.disabled = x.disabled, this._isAnimationAllowed = !1;
   }
-  firstUpdated() {
-    this.handleFormAssociation(), this.input.addEventListener("invalid", (n) => {
-      this.dispatchEvent(new Event("invalid", n));
-    });
+  firstUpdated(n) {
+    super.firstUpdated(n);
+    const { signal: l } = this._abortController;
+    this.handleFormAssociation(), this.input.addEventListener("invalid", (d) => {
+      this.dispatchEvent(new Event("invalid", d));
+    }, { signal: l });
   }
   connectedCallback() {
     super.connectedCallback(), this._abortController = new AbortController();
@@ -540,7 +542,7 @@ let p = class extends $t(Dt(B)) {
   handleChange(n) {
     const { checked: l } = n == null ? void 0 : n.currentTarget;
     this.checked = l;
-    const d = Rt(n);
+    const d = He(n);
     this._isAnimationAllowed || (this._isAnimationAllowed = !0), this.dispatchEvent(d), this.handleFormAssociation();
   }
   /**
@@ -594,24 +596,24 @@ let p = class extends $t(Dt(B)) {
   }
   renderAriaDescription() {
     var n;
-    return (n = this.aria) != null && n.describedBy ? z`
+    return (n = this.aria) != null && n.describedBy ? B`
             <div
                 aria-hidden="true"
                 id="switch-description"
                 data-test-id="switch-description"
                 class="c-switch-description">
                 ${this.aria.describedBy}
-            </div>` : N;
+            </div>` : P;
   }
   renderSwitchLabel() {
     const { label: n, labelPlacement: l } = this;
-    return n ? z`
+    return n ? B`
             <span
                 aria-hidden="true"
                 data-test-id="switch-label-${l}"
                 class="c-switch-label">
                 ${n}
-            </span>` : N;
+            </span>` : P;
   }
   render() {
     const {
@@ -621,15 +623,16 @@ let p = class extends $t(Dt(B)) {
       checked: u,
       disabled: c,
       required: k,
-      _isAnimationAllowed: E
-    } = this, x = {
+      _isAnimationAllowed: E,
+      associatedLabelText: C
+    } = this, b = (d == null ? void 0 : d.label) || n || C, F = {
       "c-switch-wrapper": !0,
       "c-switch-wrapper--allow-animation": E,
       [`c-switch-wrapper--label-${l}`]: !0
-    }, b = Tt(n ? "label" : "div");
-    return Lt`
-            <${b}
-                class="${Pt(x)}"
+    }, M = Te(n ? "label" : "div");
+    return Le`
+            <${M}
+                class="${Pe(F)}"
                 ?disabled=${c}>
                 <div
                     data-test-id="switch-component"
@@ -640,28 +643,28 @@ let p = class extends $t(Dt(B)) {
                         role="switch"
                         type="checkbox"
                         class="c-switch-input"
-                        .required=${k}
-                        .checked="${_t(u)}"
-                        .disabled="${c}"
+                        ?required=${k}
+                        .checked="${Oe(u)}"
+                        ?disabled="${c}"
                         @change="${this.handleChange}"
-                        aria-label="${Ot((d == null ? void 0 : d.label) || n)}"
-                        aria-describedby="${d != null && d.describedBy ? "switch-description" : N}">
+                        aria-label="${_e(b)}"
+                        aria-describedby="${d != null && d.describedBy ? "switch-description" : P}">
                     <div class="c-switch-control">
-                        ${u ? z`<icon-check></icon-check>` : N}
+                        ${u ? B`<icon-check></icon-check>` : P}
                     </div>
                 </div>
                 ${this.renderSwitchLabel()}
                 ${this.renderAriaDescription()}
-            </${b}>`;
+            </${M}>`;
   }
 };
-p.styles = Vt(Bt);
+p.styles = Ve(qe);
 f([
   y({ type: String })
 ], p.prototype, "label", 2);
 f([
   y({ type: String }),
-  Ht(Kt, qt, M.labelPlacement)
+  We(Ge, Ue, x.labelPlacement)
 ], p.prototype, "labelPlacement", 2);
 f([
   y({ type: Object })
@@ -685,23 +688,23 @@ f([
   y({ type: Boolean, reflect: !0 })
 ], p.prototype, "disabled", 2);
 f([
-  q('input[type="checkbox"]')
+  U('input[type="checkbox"]')
 ], p.prototype, "input", 2);
 f([
-  q(".c-switch")
+  U(".c-switch")
 ], p.prototype, "switchBody", 2);
 f([
-  q('label, input[type="checkbox"]')
+  U('label, input[type="checkbox"]')
 ], p.prototype, "focusTarget", 2);
 f([
-  Nt()
+  Ne()
 ], p.prototype, "_isAnimationAllowed", 2);
 p = f([
-  Wt("pie-switch")
+  ze("pie-switch")
 ], p);
 export {
-  ae as ON_SWITCH_CHANGED_EVENT,
+  rt as ON_SWITCH_CHANGED_EVENT,
   p as PieSwitch,
-  M as defaultProps,
-  qt as labelPlacements
+  x as defaultProps,
+  Ue as labelPlacements
 };

package/dist/react.d.ts

@@ -1,9 +1,11 @@
+import { AssociatedLabelInterface } from '@justeattakeaway/pie-webc-core';
 import { ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
 import { CSSResult } from 'lit';
 import { FormControlInterface } from '@justeattakeaway/pie-webc-core';
 import { GenericConstructor } from '@justeattakeaway/pie-webc-core';
 import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElement';
 import { PIEInputElement } from '@justeattakeaway/pie-webc-core';
+import { PropertyValues } from 'lit';
 import * as React_2 from 'react';
 import { TemplateResult } from 'lit-html';
 
@@ -46,7 +48,7 @@ declare class PieSwitch_2 extends PieSwitch_base implements SwitchProps, PIEInpu
     focusTarget: HTMLElement;
     private _abortController;
     private _isAnimationAllowed;
-    protected firstUpdated(): void;
+    protected firstUpdated(changedProperties: PropertyValues): void;
     connectedCallback(): void;
     disconnectedCallback(): void;
     protected updated(): void;
@@ -98,7 +100,7 @@ declare class PieSwitch_2 extends PieSwitch_base implements SwitchProps, PIEInpu
     render(): TemplateResult;
 }
 
-declare const PieSwitch_base: GenericConstructor<FormControlInterface> & typeof PieElement;
+declare const PieSwitch_base: GenericConstructor<AssociatedLabelInterface> & GenericConstructor<FormControlInterface> & typeof PieElement;
 
 declare type PieSwitchEvents = {
     onInvalid?: (event: Event) => void;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-switch",
   "description": "PIE Design System Switch built using Web Components",
-  "version": "2.5.1",
+  "version": "2.5.2",
   "repository": {
     "type": "git",
     "url": "https://github.com/justeattakeaway/pie",
@@ -49,8 +49,8 @@
     "@justeattakeaway/pie-wrapper-react": "0.14.5"
   },
   "dependencies": {
-    "@justeattakeaway/pie-icons-webc": "1.25.2",
-    "@justeattakeaway/pie-webc-core": "15.0.1",
+    "@justeattakeaway/pie-icons-webc": "1.25.3",
+    "@justeattakeaway/pie-webc-core": "15.1.0",
     "element-internals-polyfill": "1.3.11"
   },
   "customElements": "custom-elements.json",

package/src/index.ts

@@ -1,5 +1,5 @@
 import {
-    html, unsafeCSS, nothing,
+    html, unsafeCSS, nothing, type PropertyValues,
 } from 'lit';
 import { html as staticHtml, unsafeStatic } from 'lit/static-html.js';
 import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElement';
@@ -13,6 +13,7 @@ import {
     validPropertyValues,
     FormControlMixin,
     DelegatesFocusMixin,
+    AssociatedLabelMixin,
     wrapNativeEvent,
     safeCustomElement,
     type PIEInputElement,
@@ -32,7 +33,7 @@ const componentSelector = 'pie-switch';
  * @event {CustomEvent} change - when the switch checked state is changed.
  */
 @safeCustomElement('pie-switch')
-export class PieSwitch extends FormControlMixin(DelegatesFocusMixin(PieElement)) implements SwitchProps, PIEInputElement {
+export class PieSwitch extends AssociatedLabelMixin(FormControlMixin(DelegatesFocusMixin(PieElement))) implements SwitchProps, PIEInputElement {
     @property({ type: String })
     public label: SwitchProps['label'];
 
@@ -75,13 +76,15 @@ export class PieSwitch extends FormControlMixin(DelegatesFocusMixin(PieElement))
     @state()
     private _isAnimationAllowed = false;
 
-    protected firstUpdated (): void {
+    protected firstUpdated (changedProperties: PropertyValues): void {
+        super.firstUpdated(changedProperties);
+        const { signal } = this._abortController;
         this.handleFormAssociation();
         // This ensures that invalid events triggered by checkValidity() are propagated to the custom element
         // for consumers to listen to: https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/checkValidity
         this.input.addEventListener('invalid', (event) => {
             this.dispatchEvent(new Event('invalid', event));
-        });
+        }, { signal });
     }
 
     connectedCallback (): void {
@@ -260,8 +263,11 @@ export class PieSwitch extends FormControlMixin(DelegatesFocusMixin(PieElement))
             disabled,
             required,
             _isAnimationAllowed,
+            associatedLabelText,
         } = this;
 
+        const ariaLabel = aria?.label || label || associatedLabelText;
+
         const classes = {
             'c-switch-wrapper': true,
             'c-switch-wrapper--allow-animation': _isAnimationAllowed,
@@ -283,11 +289,11 @@ export class PieSwitch extends FormControlMixin(DelegatesFocusMixin(PieElement))
                         role="switch"
                         type="checkbox"
                         class="c-switch-input"
-                        .required=${required}
+                        ?required=${required}
                         .checked="${live(checked)}"
-                        .disabled="${disabled}"
+                        ?disabled="${disabled}"
                         @change="${this.handleChange}"
-                        aria-label="${ifDefined(aria?.label || label)}"
+                        aria-label="${ifDefined(ariaLabel)}"
                         aria-describedby="${aria?.describedBy ? 'switch-description' : nothing}">
                     <div class="c-switch-control">
                         ${checked ? html`<icon-check></icon-check>` : nothing}

package/src/switch.scss

@@ -95,7 +95,7 @@
         vertical-align: top;
     }
 
-    .c-switch-input:checked + & {
+    .c-switch[checked] & {
         transform: translateX(var(--switch-translation));
 
         .c-pieIcon--check {
@@ -143,7 +143,7 @@
     .c-switch-control {
         @include switch-transition(transform);
 
-        .c-switch-input:checked + & {
+        .c-switch[checked] & {
             @include switch-transition(transform);
 
             .c-pieIcon--check {
@@ -160,7 +160,7 @@
 }
 
 .c-switch-wrapper:dir(rtl) {
-    .c-switch-input:checked + .c-switch-control {
+    .c-switch[checked] .c-switch-control {
         transform: translateX(calc(-1 * var(--switch-translation)));
     }
 }