@justeattakeaway/pie-switch 1.3.7 → 1.4.0

package/dist/index.js

@@ -1,25 +1,19 @@
-import { LitElement as It, unsafeCSS as Vt, nothing as L, html as N } from "lit";
-import { property as y, query as ct } from "lit/decorators.js";
+import { LitElement as Ft, nothing as L, html as N, unsafeCSS as It } from "lit";
+import { property as y, query as dt } from "lit/decorators.js";
 import { classMap as St } from "lit/directives/class-map.js";
-import { ifDefined as Tt } from "lit/directives/if-defined.js";
-import { FormControlMixin as Lt, RtlMixin as Nt, wrapNativeEvent as Ot, validPropertyValues as Pt, defineCustomElement as _t } from "@justeattakeaway/pie-webc-core";
+import { ifDefined as Vt } from "lit/directives/if-defined.js";
+import { FormControlMixin as Tt, RtlMixin as Lt, wrapNativeEvent as Nt, validPropertyValues as Ot, safeCustomElement as Pt } from "@justeattakeaway/pie-webc-core";
 import "@justeattakeaway/pie-icons-webc/dist/IconCheck.js";
-var $t = Object.defineProperty, Rt = (f, s, c, h) => {
-  for (var l = void 0, m = f.length - 1, E; m >= 0; m--)
-    (E = f[m]) && (l = E(s, c, l) || l);
-  return l && $t(s, c, l), l;
-};
-class dt extends It {
-  constructor() {
-    super(...arguments), this.v = "1.3.7";
+const O = class O extends Ft {
+  willUpdate() {
+    this.getAttribute("v") || this.setAttribute("v", O.v);
   }
-}
-Rt([
-  y({ type: String, reflect: !0 })
-], dt.prototype, "v");
+};
+O.v = "1.4.0";
+let q = O;
 (function() {
-  (function(f) {
-    const s = /* @__PURE__ */ new WeakMap(), c = /* @__PURE__ */ new WeakMap(), h = /* @__PURE__ */ new WeakMap(), l = /* @__PURE__ */ new WeakMap(), m = /* @__PURE__ */ new WeakMap(), E = /* @__PURE__ */ new WeakMap(), O = /* @__PURE__ */ new WeakMap(), k = /* @__PURE__ */ new WeakMap(), q = /* @__PURE__ */ new WeakMap(), C = /* @__PURE__ */ new WeakMap(), B = /* @__PURE__ */ new WeakMap(), U = /* @__PURE__ */ new WeakMap(), j = /* @__PURE__ */ new WeakMap(), K = /* @__PURE__ */ new WeakMap(), A = /* @__PURE__ */ new WeakMap(), F = {
+  (function(n) {
+    const l = /* @__PURE__ */ new WeakMap(), h = /* @__PURE__ */ new WeakMap(), m = /* @__PURE__ */ new WeakMap(), c = /* @__PURE__ */ new WeakMap(), E = /* @__PURE__ */ new WeakMap(), M = /* @__PURE__ */ new WeakMap(), P = /* @__PURE__ */ new WeakMap(), g = /* @__PURE__ */ new WeakMap(), B = /* @__PURE__ */ new WeakMap(), A = /* @__PURE__ */ new WeakMap(), U = /* @__PURE__ */ new WeakMap(), j = /* @__PURE__ */ new WeakMap(), K = /* @__PURE__ */ new WeakMap(), G = /* @__PURE__ */ new WeakMap(), C = /* @__PURE__ */ new WeakMap(), F = {
       ariaAtomic: "aria-atomic",
       ariaAutoComplete: "aria-autocomplete",
       ariaBusy: "aria-busy",
@@ -62,7 +56,7 @@ Rt([
       ariaValueNow: "aria-valuenow",
       ariaValueText: "aria-valuetext",
       role: "role"
-    }, ut = (e, t) => {
+    }, ht = (e, t) => {
       for (let i in F) {
         t[i] = null;
         let a = null;
@@ -71,187 +65,187 @@ Rt([
           get() {
             return a;
           },
-          set(o) {
-            a = o, e.isConnected ? e.setAttribute(r, o) : C.set(e, t);
+          set(s) {
+            a = s, e.isConnected ? e.setAttribute(r, s) : A.set(e, t);
           }
         });
       }
     };
-    function G(e) {
-      const t = l.get(e), { form: i } = t;
-      tt(e, i, t), Z(e, t.labels);
+    function Y(e) {
+      const t = c.get(e), { form: i } = t;
+      et(e, i, t), tt(e, t.labels);
     }
-    const Y = (e, t = !1) => {
+    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;
+        acceptNode(s) {
+          return c.has(s) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
         }
       });
       let a = i.nextNode();
       const r = !t || e.disabled;
       for (; a; )
-        a.formDisabledCallback && r && $(a, e.disabled), a = i.nextNode();
-    }, J = { attributes: !0, attributeFilter: ["disabled", "name"] }, I = T() ? new MutationObserver((e) => {
+        a.formDisabledCallback && r && R(a, e.disabled), a = i.nextNode();
+    }, Q = { attributes: !0, attributeFilter: ["disabled", "name"] }, I = T() ? 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" && Y(i)), t.attributeName === "name" && i.constructor.formAssociated) {
-          const a = l.get(i), r = q.get(i);
+        if (t.attributeName === "disabled" && (i.constructor.formAssociated ? R(i, i.hasAttribute("disabled")) : i.localName === "fieldset" && J(i)), t.attributeName === "name" && i.constructor.formAssociated) {
+          const a = c.get(i), r = B.get(i);
           a.setFormValue(r);
         }
       }
     }) : {};
-    function P(e) {
+    function _(e) {
       e.forEach((t) => {
-        const { addedNodes: i, removedNodes: a } = t, r = Array.from(i), o = Array.from(a);
-        r.forEach((n) => {
+        const { addedNodes: i, removedNodes: a } = t, r = Array.from(i), s = Array.from(a);
+        r.forEach((o) => {
           var u;
-          if (l.has(n) && n.constructor.formAssociated && G(n), C.has(n)) {
-            const d = C.get(n);
+          if (c.has(o) && o.constructor.formAssociated && Y(o), A.has(o)) {
+            const d = A.get(o);
             Object.keys(F).filter((b) => d[b] !== null).forEach((b) => {
-              n.setAttribute(F[b], d[b]);
-            }), C.delete(n);
+              o.setAttribute(F[b], d[b]);
+            }), A.delete(o);
           }
-          if (A.has(n)) {
-            const d = A.get(n);
-            n.setAttribute("internals-valid", d.validity.valid.toString()), n.setAttribute("internals-invalid", (!d.validity.valid).toString()), n.setAttribute("aria-invalid", (!d.validity.valid).toString()), A.delete(n);
+          if (C.has(o)) {
+            const d = C.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()), C.delete(o);
           }
-          if (n.localName === "form") {
-            const d = k.get(n), g = document.createTreeWalker(n, NodeFilter.SHOW_ELEMENT, {
-              acceptNode(W) {
-                return l.has(W) && W.constructor.formAssociated && !(d && d.has(W)) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
+          if (o.localName === "form") {
+            const d = g.get(o), w = document.createTreeWalker(o, NodeFilter.SHOW_ELEMENT, {
+              acceptNode(z) {
+                return c.has(z) && z.constructor.formAssociated && !(d && d.has(z)) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
               }
             });
-            let b = g.nextNode();
+            let b = w.nextNode();
             for (; b; )
-              G(b), b = g.nextNode();
+              Y(b), b = w.nextNode();
           }
-          n.localName === "fieldset" && ((u = I.observe) === null || u === void 0 || u.call(I, n, J), Y(n, !0));
-        }), o.forEach((n) => {
-          const u = l.get(n);
-          u && h.get(u) && Q(u), O.has(n) && O.get(n).disconnect();
+          o.localName === "fieldset" && ((u = I.observe) === null || u === void 0 || u.call(I, o, Q), J(o, !0));
+        }), s.forEach((o) => {
+          const u = c.get(o);
+          u && m.get(u) && X(u), P.has(o) && P.get(o).disconnect();
         });
       });
     }
-    function pt(e) {
+    function ut(e) {
       e.forEach((t) => {
         const { removedNodes: i } = t;
         i.forEach((a) => {
-          const r = j.get(t.target);
-          l.has(a) && it(a), r.disconnect();
+          const r = K.get(t.target);
+          c.has(a) && at(a), r.disconnect();
         });
       });
     }
-    const mt = (e) => {
+    const pt = (e) => {
       var t, i;
-      const a = new MutationObserver(pt);
-      !((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 }), j.set(e, a);
+      const a = new MutationObserver(ut);
+      !((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 }), K.set(e, a);
     };
-    T() && new MutationObserver(P);
-    const _ = {
+    T() && new MutationObserver(_);
+    const $ = {
       childList: !0,
       subtree: !0
-    }, $ = (e, t) => {
+    }, R = (e, t) => {
       e.toggleAttribute("internals-disabled", t), t ? e.setAttribute("aria-disabled", "true") : e.removeAttribute("aria-disabled"), e.formDisabledCallback && e.formDisabledCallback.apply(e, [t]);
-    }, Q = (e) => {
-      h.get(e).forEach((i) => {
+    }, X = (e) => {
+      m.get(e).forEach((i) => {
         i.remove();
-      }), h.set(e, []);
-    }, X = (e, t) => {
+      }), m.set(e, []);
+    }, Z = (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;
-    }, ft = (e, t) => {
+      return i.type = "hidden", i.name = e.getAttribute("name"), e.after(i), m.get(t).push(i), i;
+    }, mt = (e, t) => {
       var i;
-      h.set(t, []), (i = I.observe) === null || i === void 0 || i.call(I, e, J);
-    }, Z = (e, t) => {
+      m.set(t, []), (i = I.observe) === null || i === void 0 || i.call(I, e, Q);
+    }, tt = (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 = k.get(e) || [], a = Array.from(i).filter((o) => o.isConnected).map((o) => l.get(o).validity.valid), r = [...t, ...a].includes(!1);
+    }, S = (e) => {
+      const t = Array.from(e.elements).filter((s) => !s.tagName.includes("-") && s.validity).map((s) => s.validity.valid), i = g.get(e) || [], a = Array.from(i).filter((s) => s.isConnected).map((s) => c.get(s).validity.valid), r = [...t, ...a].includes(!1);
       e.toggleAttribute("internals-invalid", r), e.toggleAttribute("internals-valid", !r);
+    }, ft = (e) => {
+      S(V(e.target));
     }, bt = (e) => {
-      V(S(e.target));
+      S(V(e.target));
     }, vt = (e) => {
-      V(S(e.target));
-    }, wt = (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 = k.get(e);
+          const r = g.get(e);
           if (e.noValidate)
             return;
-          r.size && Array.from(r).reverse().map((u) => l.get(u).reportValidity()).includes(!1) && i.preventDefault();
+          r.size && Array.from(r).reverse().map((u) => c.get(u).reportValidity()).includes(!1) && i.preventDefault();
         }
       });
-    }, gt = (e) => {
-      const t = k.get(e.target);
+    }, wt = (e) => {
+      const t = g.get(e.target);
       t && t.size && t.forEach((i) => {
         i.constructor.formAssociated && i.formResetCallback && i.formResetCallback.apply(i);
       });
-    }, tt = (e, t, i) => {
+    }, et = (e, t, i) => {
       if (t) {
-        const a = k.get(t);
+        const a = g.get(t);
         if (a)
           a.add(e);
         else {
           const r = /* @__PURE__ */ new Set();
-          r.add(e), k.set(t, r), wt(t), t.addEventListener("reset", gt), t.addEventListener("input", bt), t.addEventListener("change", vt);
+          r.add(e), g.set(t, r), vt(t), t.addEventListener("reset", wt), t.addEventListener("input", ft), t.addEventListener("change", bt);
         }
-        E.set(t, { ref: e, internals: i }), e.constructor.formAssociated && e.formAssociatedCallback && setTimeout(() => {
+        M.set(t, { ref: e, internals: i }), e.constructor.formAssociated && e.formAssociatedCallback && setTimeout(() => {
           e.formAssociatedCallback.apply(e, [t]);
-        }, 0), V(t);
+        }, 0), S(t);
       }
-    }, S = (e) => {
+    }, V = (e) => {
       let t = e.parentNode;
-      return t && t.tagName !== "FORM" && (t = S(t)), t;
-    }, w = (e, t, i = DOMException) => {
+      return t && t.tagName !== "FORM" && (t = V(t)), t;
+    }, v = (e, t, i = DOMException) => {
       if (!e.constructor.formAssociated)
         throw new i(t);
-    }, et = (e, t, i) => {
-      const a = k.get(e);
+    }, it = (e, t, i) => {
+      const a = g.get(e);
       return a && a.size && a.forEach((r) => {
-        l.get(r)[i]() || (t = !1);
+        c.get(r)[i]() || (t = !1);
       }), t;
-    }, it = (e) => {
+    }, at = (e) => {
       if (e.constructor.formAssociated) {
-        const t = l.get(e), { labels: i, form: a } = t;
-        Z(e, i), tt(e, a, t);
+        const t = c.get(e), { labels: i, form: a } = t;
+        tt(e, i), et(e, a, t);
       }
     };
     function T() {
       return typeof MutationObserver < "u";
     }
-    class yt {
+    class gt {
       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), kt = (e, t, i) => (e.valid = Mt(t), Object.keys(t).forEach((a) => e[a] = t[a]), i && V(i), e), Mt = (e) => {
+    const yt = (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), Et = (e, t, i) => (e.valid = kt(t), Object.keys(t).forEach((a) => e[a] = t[a]), i && S(i), e), kt = (e) => {
       let t = !0;
       for (let i in e)
         i !== "valid" && e[i] !== !1 && (t = !1);
       return t;
-    }, R = /* @__PURE__ */ new WeakMap();
-    function at(e, t) {
+    }, D = /* @__PURE__ */ new WeakMap();
+    function rt(e, t) {
       e.toggleAttribute(t, !0), e.part && e.part.add(t);
     }
-    class D extends Set {
+    class H extends Set {
       static get isPolyfilled() {
         return !0;
       }
       constructor(t) {
         if (super(), !t || !t.tagName || t.tagName.indexOf("-") === -1)
           throw new TypeError("Illegal constructor");
-        R.set(this, t);
+        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 = R.get(this), r = `state${t}`;
-        return a.isConnected ? at(a, r) : setTimeout(() => {
-          at(a, r);
+        const i = super.add(t), a = D.get(this), r = `state${t}`;
+        return a.isConnected ? rt(a, r) : setTimeout(() => {
+          rt(a, r);
         }), i;
       }
       clear() {
@@ -260,24 +254,24 @@ Rt([
         super.clear();
       }
       delete(t) {
-        const i = super.delete(t), a = R.get(this);
+        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}`);
         }), i;
       }
     }
-    function rt(e, t, i, a) {
+    function st(e, t, i, a) {
       if (typeof t == "function" ? e !== t || !0 : !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 xt(e, t, i, a, r) {
+    function Mt(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;
     }
     var x;
-    class Ct {
+    class xt {
       constructor(t) {
-        x.set(this, void 0), xt(this, x, t);
+        x.set(this, void 0), Mt(this, x, t);
         for (let i = 0; i < t.length; i++) {
           let a = t[i];
           this[i] = a, a.hasAttribute("name") && (this[a.getAttribute("name")] = a);
@@ -285,10 +279,10 @@ Rt([
         Object.freeze(this);
       }
       get length() {
-        return rt(this, x, "f").length;
+        return st(this, x, "f").length;
       }
       [(x = /* @__PURE__ */ new WeakMap(), Symbol.iterator)]() {
-        return rt(this, x, "f")[Symbol.iterator]();
+        return st(this, x, "f")[Symbol.iterator]();
       }
       item(t) {
         return this[t] == null ? null : this[t];
@@ -302,40 +296,40 @@ Rt([
       HTMLFormElement.prototype.checkValidity = i;
       const t = HTMLFormElement.prototype.reportValidity;
       HTMLFormElement.prototype.reportValidity = a;
-      function i(...o) {
-        let n = e.apply(this, o);
-        return et(this, n, "checkValidity");
+      function i(...s) {
+        let o = e.apply(this, s);
+        return it(this, o, "checkValidity");
       }
-      function a(...o) {
-        let n = t.apply(this, o);
-        return et(this, n, "reportValidity");
+      function a(...s) {
+        let o = t.apply(this, s);
+        return it(this, o, "reportValidity");
       }
       const { get: r } = Object.getOwnPropertyDescriptor(HTMLFormElement.prototype, "elements");
       Object.defineProperty(HTMLFormElement.prototype, "elements", {
-        get(...o) {
-          const n = r.call(this, ...o), u = Array.from(k.get(this) || []);
+        get(...s) {
+          const o = r.call(this, ...s), u = Array.from(g.get(this) || []);
           if (u.length === 0)
-            return n;
-          const d = Array.from(n).concat(u).sort((g, b) => g.compareDocumentPosition ? g.compareDocumentPosition(b) & 2 ? 1 : -1 : 0);
-          return new Ct(d);
+            return o;
+          const d = Array.from(o).concat(u).sort((w, b) => w.compareDocumentPosition ? w.compareDocumentPosition(b) & 2 ? 1 : -1 : 0);
+          return new xt(d);
         }
       });
     }
-    class st {
+    class ot {
       static get isPolyfilled() {
         return !0;
       }
       constructor(t) {
         if (!t || !t.tagName || t.tagName.indexOf("-") === -1)
           throw new TypeError("Illegal constructor");
-        const i = t.getRootNode(), a = new yt();
-        this.states = new D(t), s.set(this, t), c.set(this, a), l.set(t, this), ut(t, this), ft(t, this), Object.seal(this), i instanceof DocumentFragment && mt(i);
+        const i = t.getRootNode(), a = new gt();
+        this.states = new H(t), l.set(this, t), h.set(this, a), c.set(t, this), ht(t, this), mt(t, this), Object.seal(this), i instanceof DocumentFragment && pt(i);
       }
       checkValidity() {
-        const t = s.get(this);
-        if (w(t, "Failed to execute 'checkValidity' on 'ElementInternals': The target element is not a form-associated custom element."), !this.willValidate)
+        const t = l.get(this);
+        if (v(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);
+        const i = h.get(this);
         if (!i.valid) {
           const a = new Event("invalid", {
             bubbles: !1,
@@ -347,75 +341,75 @@ Rt([
         return i.valid;
       }
       get form() {
-        const t = s.get(this);
-        w(t, "Failed to read the 'form' property from 'ElementInternals': The target element is not a form-associated custom element.");
+        const t = l.get(this);
+        v(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 = S(t)), i;
+        return t.constructor.formAssociated === !0 && (i = V(t)), i;
       }
       get labels() {
-        const t = s.get(this);
-        w(t, "Failed to read the 'labels' property from 'ElementInternals': The target element is not a form-associated custom element.");
+        const t = l.get(this);
+        v(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 = s.get(this);
-        if (w(t, "Failed to execute 'reportValidity' on 'ElementInternals': The target element is not a form-associated custom element."), !this.willValidate)
+        const t = l.get(this);
+        if (v(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 = U.get(this);
+        const i = this.checkValidity(), a = j.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 = s.get(this);
-        if (w(i, "Failed to execute 'setFormValue' on 'ElementInternals': The target element is not a form-associated custom element."), Q(this), t != null && !(t instanceof FormData)) {
+        const i = l.get(this);
+        if (v(i, "Failed to execute 'setFormValue' on 'ElementInternals': The target element is not a form-associated custom element."), X(this), t != null && !(t instanceof FormData)) {
           if (i.getAttribute("name")) {
-            const a = X(i, this);
+            const a = Z(i, this);
             a.value = t;
           }
         } else t != null && t instanceof FormData && Array.from(t).reverse().forEach(([a, r]) => {
           if (typeof r == "string") {
-            const o = X(i, this);
-            o.name = a, o.value = r;
+            const s = Z(i, this);
+            s.name = a, s.value = r;
           }
         });
-        q.set(i, t);
+        B.set(i, t);
       }
       setValidity(t, i, a) {
-        const r = s.get(this);
-        if (w(r, "Failed to execute 'setValidity' on 'ElementInternals': The target element is not a form-associated custom element."), !t)
+        const r = l.get(this);
+        if (v(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.");
-        U.set(this, a);
-        const o = c.get(this), n = {};
-        for (const g in t)
-          n[g] = t[g];
-        Object.keys(n).length === 0 && Et(o);
-        const u = Object.assign(Object.assign({}, o), n);
+        j.set(this, a);
+        const s = h.get(this), o = {};
+        for (const w in t)
+          o[w] = t[w];
+        Object.keys(o).length === 0 && yt(s);
+        const u = Object.assign(Object.assign({}, s), o);
         delete u.valid;
-        const { valid: d } = kt(o, u, this.form);
+        const { valid: d } = Et(s, 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}`)) : A.set(r, this);
+        E.set(this, d ? "" : i), r.isConnected ? (r.toggleAttribute("internals-invalid", !d), r.toggleAttribute("internals-valid", d), r.setAttribute("aria-invalid", `${!d}`)) : C.set(r, this);
       }
       get shadowRoot() {
-        const t = s.get(this), i = B.get(t);
+        const t = l.get(this), i = U.get(t);
         return i || null;
       }
       get validationMessage() {
-        const t = s.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);
+        const t = l.get(this);
+        return v(t, "Failed to read the 'validationMessage' property from 'ElementInternals': The target element is not a form-associated custom element."), E.get(this);
       }
       get validity() {
-        const t = s.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);
+        const t = l.get(this);
+        return v(t, "Failed to read the 'validity' property from 'ElementInternals': The target element is not a form-associated custom element."), h.get(this);
       }
       get willValidate() {
-        const t = s.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 = l.get(this);
+        return v(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 Ft() {
+    function Ct() {
       if (typeof window > "u" || !window.ElementInternals || !HTMLElement.prototype.attachInternals)
         return !1;
       class e extends HTMLElement {
@@ -439,22 +433,22 @@ Rt([
         "reportValidity"
       ].every((a) => a in i.internals);
     }
-    let ot = !1, nt = !1;
-    function H(e) {
-      nt || (nt = !0, window.CustomStateSet = D, e && (HTMLElement.prototype.attachInternals = function(...t) {
+    let nt = !1, lt = !1;
+    function W(e) {
+      lt || (lt = !0, window.CustomStateSet = H, e && (HTMLElement.prototype.attachInternals = function(...t) {
         const i = e.call(this, t);
-        return i.states = new D(this), i;
+        return i.states = new H(this), i;
       }));
     }
-    function lt(e = !0) {
-      if (!ot) {
-        if (ot = !0, typeof window < "u" && (window.ElementInternals = st), typeof CustomElementRegistry < "u") {
+    function ct(e = !0) {
+      if (!nt) {
+        if (nt = !0, typeof window < "u" && (window.ElementInternals = ot), typeof CustomElementRegistry < "u") {
           const t = CustomElementRegistry.prototype.define;
           CustomElementRegistry.prototype.define = function(i, a, r) {
             if (a.formAssociated) {
-              const o = a.prototype.connectedCallback;
+              const s = a.prototype.connectedCallback;
               a.prototype.connectedCallback = function() {
-                K.has(this) || (K.set(this, !0), this.hasAttribute("disabled") && $(this, !0)), o != null && o.apply(this), it(this);
+                G.has(this) || (G.set(this, !0), this.hasAttribute("disabled") && R(this, !0)), s != null && s.apply(this), at(this);
               };
             }
             t.call(this, i, a, r);
@@ -465,46 +459,47 @@ Rt([
             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))
+          if (c.has(this))
             throw new DOMException("DOMException: Failed to execute 'attachInternals' on 'HTMLElement': ElementInternals for the specified element was already attached.");
-          return new st(this);
+          return new ot(this);
         }), typeof Element < "u") {
           let t = function(...a) {
             const r = i.apply(this, a);
-            if (B.set(this, r), T()) {
-              const o = new MutationObserver(P);
-              window.ShadyDOM ? o.observe(this, _) : o.observe(r, _), O.set(this, o);
+            if (U.set(this, r), T()) {
+              const s = new MutationObserver(_);
+              window.ShadyDOM ? s.observe(this, $) : s.observe(r, $), P.set(this, s);
             }
             return r;
           };
           const i = Element.prototype.attachShadow;
           Element.prototype.attachShadow = t;
         }
-        T() && typeof document < "u" && new MutationObserver(P).observe(document.documentElement, _), typeof HTMLFormElement < "u" && At(), (e || typeof window < "u" && !window.CustomStateSet) && H();
+        T() && typeof document < "u" && new MutationObserver(_).observe(document.documentElement, $), typeof HTMLFormElement < "u" && At(), (e || typeof window < "u" && !window.CustomStateSet) && W();
       }
     }
-    return !!customElements.polyfillWrapFlushCallback || (Ft() ? typeof window < "u" && !window.CustomStateSet && H(HTMLElement.prototype.attachInternals) : lt(!1)), f.forceCustomStateSetPolyfill = H, f.forceElementInternalsPolyfill = lt, Object.defineProperty(f, "__esModule", { value: !0 }), f;
+    return !!customElements.polyfillWrapFlushCallback || (Ct() ? typeof window < "u" && !window.CustomStateSet && W(HTMLElement.prototype.attachInternals) : ct(!1)), n.forceCustomStateSetPolyfill = W, n.forceElementInternalsPolyfill = ct, Object.defineProperty(n, "__esModule", { value: !0 }), n;
   })({});
 })();
-const Dt = "*,*:after,*:before{box-sizing:inherit}*,*:before,*:after{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{--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 (prefers-reduced-motion: no-preference){.c-switch{transition:background-color .15s cubic-bezier(.4,0,.9,1) 0s}}.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)){.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: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[checked]{--int-states-mixin-bg-color: var(--dt-color-interactive-brand)}@media (prefers-reduced-motion: no-preference){.c-switch[checked]{transition:background-color .15s cubic-bezier(.4,0,.9,1) 0s}}.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)){.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-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-wrapper--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))}@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(--dt-color-interactive-brand)}@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-label{color:var(--dt-color-content-default)}.c-switch-description{position:absolute;display:block;height:1px;width:1px;overflow:hidden;padding:1px;white-space:nowrap}.c-switch-wrapper--rtl .c-switch-input:checked+.c-switch-control{transform:translate(calc(-1 * var(--switch-translation)))}@media (prefers-reduced-motion: no-preference){.c-switch-wrapper--rtl .c-switch-input:checked+.c-switch-control{transition:transform .15s cubic-bezier(.4,0,.9,1) 0s}}", Ht = ["leading", "trailing"], Yt = "change", M = {
+const _t = "*,*:after,*:before{box-sizing:inherit}*,*:before,*:after{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{--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 (prefers-reduced-motion: no-preference){.c-switch{transition:background-color .15s cubic-bezier(.4,0,.9,1) 0s}}.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)){.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: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[checked]{--int-states-mixin-bg-color: var(--dt-color-interactive-brand)}@media (prefers-reduced-motion: no-preference){.c-switch[checked]{transition:background-color .15s cubic-bezier(.4,0,.9,1) 0s}}.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)){.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-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-wrapper--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))}@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(--dt-color-interactive-brand)}@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-label{color:var(--dt-color-content-default)}.c-switch-description{position:absolute;display:block;height:1px;width:1px;overflow:hidden;padding:1px;white-space:nowrap}.c-switch-wrapper--rtl .c-switch-input:checked+.c-switch-control{transform:translate(calc(-1 * var(--switch-translation)))}@media (prefers-reduced-motion: no-preference){.c-switch-wrapper--rtl .c-switch-input:checked+.c-switch-control{transition:transform .15s cubic-bezier(.4,0,.9,1) 0s}}", $t = ["leading", "trailing"], Gt = "change", k = {
   checked: !1,
   disabled: !1,
   labelPlacement: "leading",
   required: !1,
   value: "on"
 };
-var Wt = Object.defineProperty, v = (f, s, c, h) => {
-  for (var l = void 0, m = f.length - 1, E; m >= 0; m--)
-    (E = f[m]) && (l = E(s, c, l) || l);
-  return l && Wt(s, c, l), l;
+var Rt = Object.defineProperty, Dt = Object.getOwnPropertyDescriptor, f = (n, l, h, m) => {
+  for (var c = m > 1 ? void 0 : m ? Dt(l, h) : l, E = n.length - 1, M; E >= 0; E--)
+    (M = n[E]) && (c = (m ? M(l, h, c) : M(c)) || c);
+  return m && c && Rt(l, h, c), c;
 };
-const ht = "pie-switch", z = class z extends Lt(Nt(dt)) {
+const Ht = "pie-switch";
+let p = class extends Tt(Lt(q)) {
   constructor() {
-    super(...arguments), this.labelPlacement = M.labelPlacement, this.checked = M.checked, this.required = M.required, this.value = M.value, this.disabled = M.disabled;
+    super(...arguments), this.labelPlacement = k.labelPlacement, this.checked = k.checked, this.required = k.required, this.value = k.value, this.disabled = k.disabled;
   }
   firstUpdated() {
-    this.handleFormAssociation(), this.input.addEventListener("invalid", (s) => {
-      this.dispatchEvent(new Event("invalid", s));
+    this.handleFormAssociation(), this.input.addEventListener("invalid", (n) => {
+      this.dispatchEvent(new Event("invalid", n));
     });
   }
   updated() {
@@ -520,10 +515,10 @@ const ht = "pie-switch", z = class z extends Lt(Nt(dt)) {
    * The handleChange 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"`.
    */
-  handleChange(s) {
-    const { checked: c } = s == null ? void 0 : s.currentTarget;
-    this.checked = c;
-    const h = Ot(s);
+  handleChange(n) {
+    const { checked: l } = n == null ? void 0 : n.currentTarget;
+    this.checked = l;
+    const h = Nt(n);
     this.dispatchEvent(h), this.handleFormAssociation();
   }
   /**
@@ -546,8 +541,8 @@ const ht = "pie-switch", z = class z extends Lt(Nt(dt)) {
    * 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(s) {
-    this.input.setCustomValidity(s), this._internals.setValidity(this.validity, this.validationMessage, this.input);
+  setCustomValidity(n) {
+    this.input.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.
@@ -570,18 +565,18 @@ const ht = "pie-switch", z = class z extends Lt(Nt(dt)) {
    *
    * @private
    */
-  renderSwitchLabel(s) {
-    const { label: c, labelPlacement: h } = this;
-    return !c || h !== s ? L : N`
+  renderSwitchLabel(n) {
+    const { label: l, labelPlacement: h } = this;
+    return !l || h !== n ? L : N`
             <span
                 data-test-id="switch-label-${h}"
                 class="c-switch-label">
-                ${c}
+                ${l}
             </span>`;
   }
   renderAriaDescription() {
-    var s;
-    return (s = this.aria) != null && s.describedBy ? N`
+    var n;
+    return (n = this.aria) != null && n.describedBy ? N`
             <div
                 id="switch-description"
                 data-test-id="switch-description"
@@ -591,37 +586,37 @@ const ht = "pie-switch", z = class z extends Lt(Nt(dt)) {
   }
   render() {
     const {
-      aria: s,
-      checked: c,
+      aria: n,
+      checked: l,
       disabled: h,
-      isRTL: l,
-      required: m
+      isRTL: m,
+      required: c
     } = this;
     return N`
             <label
                 class="${St({
       "c-switch-wrapper": !0,
-      "c-switch-wrapper--rtl": l
+      "c-switch-wrapper--rtl": m
     })}"
                 ?disabled=${h}>
                 ${this.renderSwitchLabel("leading")}
                 <div
                     data-test-id="switch-component"
                     class="c-switch"
-                    ?checked=${c}>
+                    ?checked=${l}>
                     <input
                         data-test-id="switch-input"
                         role="switch"
                         type="checkbox"
                         class="c-switch-input"
-                        .required=${m}
-                        .checked="${c}"
+                        .required=${c}
+                        .checked="${l}"
                         .disabled="${h}"
                         @change="${this.handleChange}"
-                        aria-label="${Tt(s == null ? void 0 : s.label)}"
-                        aria-describedby="${s != null && s.describedBy ? "switch-description" : L}">
+                        aria-label="${Vt(n == null ? void 0 : n.label)}"
+                        aria-describedby="${n != null && n.describedBy ? "switch-description" : L}">
                     <div class="c-switch-control">
-                        ${c ? N`<icon-check></icon-check>` : L}
+                        ${l ? N`<icon-check></icon-check>` : L}
                     </div>
                 </div>
                 ${this.renderSwitchLabel("trailing")}
@@ -629,43 +624,44 @@ const ht = "pie-switch", z = class z extends Lt(Nt(dt)) {
             </label>`;
   }
 };
-z.styles = Vt(Dt);
-let p = z;
-v([
+p.styles = It(_t);
+f([
   y({ type: String })
-], p.prototype, "label");
-v([
+], p.prototype, "label", 2);
+f([
   y({ type: String }),
-  Pt(ht, Ht, M.labelPlacement)
-], p.prototype, "labelPlacement");
-v([
+  Ot(Ht, $t, k.labelPlacement)
+], p.prototype, "labelPlacement", 2);
+f([
   y({ type: Object })
-], p.prototype, "aria");
-v([
+], p.prototype, "aria", 2);
+f([
   y({ type: Boolean, reflect: !0 })
-], p.prototype, "checked");
-v([
+], p.prototype, "checked", 2);
+f([
   y({ type: Boolean, reflect: !0 })
-], p.prototype, "required");
-v([
+], p.prototype, "required", 2);
+f([
   y({ type: String })
-], p.prototype, "value");
-v([
+], p.prototype, "value", 2);
+f([
   y({ type: String, reflect: !0 })
-], p.prototype, "name");
-v([
+], p.prototype, "name", 2);
+f([
   y({ type: Boolean, reflect: !0 })
-], p.prototype, "disabled");
-v([
-  ct('input[type="checkbox"]')
-], p.prototype, "input");
-v([
-  ct("label")
-], p.prototype, "focusTarget");
-_t(ht, p);
+], p.prototype, "disabled", 2);
+f([
+  dt('input[type="checkbox"]')
+], p.prototype, "input", 2);
+f([
+  dt("label")
+], p.prototype, "focusTarget", 2);
+p = f([
+  Pt("pie-switch")
+], p);
 export {
-  Yt as ON_SWITCH_CHANGED_EVENT,
+  Gt as ON_SWITCH_CHANGED_EVENT,
   p as PieSwitch,
-  M as defaultProps,
-  Ht as labelPlacements
+  k as defaultProps,
+  $t as labelPlacements
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-switch",
   "description": "PIE Design System Switch built using Web Components",
-  "version": "1.3.7",
+  "version": "1.4.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/justeattakeaway/pie",
@@ -45,8 +45,8 @@
     "cem-plugin-module-file-extensions": "0.0.5"
   },
   "dependencies": {
-    "@justeattakeaway/pie-icons-webc": "1.9.0",
-    "@justeattakeaway/pie-webc-core": "0.25.1",
+    "@justeattakeaway/pie-icons-webc": "1.10.0",
+    "@justeattakeaway/pie-webc-core": "0.26.0",
     "@justeattakeaway/pie-wrapper-react": "0.14.3",
     "element-internals-polyfill": "1.3.11"
   },

package/src/index.ts

@@ -8,7 +8,8 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 import 'element-internals-polyfill';
 
 import {
-    RtlMixin, validPropertyValues, defineCustomElement, FormControlMixin, wrapNativeEvent, type PIEInputElement,
+    RtlMixin, validPropertyValues, FormControlMixin, wrapNativeEvent, type PIEInputElement,
+    safeCustomElement,
 } from '@justeattakeaway/pie-webc-core';
 import '@justeattakeaway/pie-icons-webc/dist/IconCheck.js';
 
@@ -24,6 +25,7 @@ const componentSelector = 'pie-switch';
  * @tagname pie-switch
  * @event {CustomEvent} change - when the switch checked state is changed.
  */
+@safeCustomElement('pie-switch')
 export class PieSwitch extends FormControlMixin(RtlMixin(PieElement)) implements SwitchProps, PIEInputElement {
     @property({ type: String })
     public label: SwitchProps['label'];
@@ -226,8 +228,6 @@ export class PieSwitch extends FormControlMixin(RtlMixin(PieElement)) implements
     }
 }
 
-defineCustomElement(componentSelector, PieSwitch);
-
 declare global {
     interface HTMLElementTagNameMap {
         [componentSelector]: PieSwitch;