@justeattakeaway/pie-switch 0.30.1 → 0.30.3

package/dist/index.js

@@ -1,12 +1,12 @@
-import { LitElement as xe, nothing as L, html as N, unsafeCSS as Fe } from "lit";
-import { property as E, query as le } from "lit/decorators.js";
-import { classMap as Se } from "lit/directives/class-map.js";
-import { ifDefined as Ie } from "lit/directives/if-defined.js";
-import { FormControlMixin as Ve, RtlMixin as Te, wrapNativeEvent as Le, validPropertyValues as Ne, defineCustomElement as Pe } from "@justeattakeaway/pie-webc-core";
+import { LitElement as Fe, unsafeCSS as Ie, nothing as L, html as N } from "lit";
+import { property as y, query as ce } from "lit/decorators.js";
+import { classMap as Ve } from "lit/directives/class-map.js";
+import { ifDefined as Se } from "lit/directives/if-defined.js";
+import { FormControlMixin as Te, RtlMixin as Le, wrapNativeEvent as Ne, validPropertyValues as Oe, defineCustomElement as Pe } from "@justeattakeaway/pie-webc-core";
 import "@justeattakeaway/pie-icons-webc/dist/IconCheck.js";
 (function() {
-  (function(v) {
-    const o = /* @__PURE__ */ new WeakMap(), c = /* @__PURE__ */ new WeakMap(), h = /* @__PURE__ */ new WeakMap(), l = /* @__PURE__ */ new WeakMap(), g = /* @__PURE__ */ new WeakMap(), k = /* @__PURE__ */ new WeakMap(), P = /* @__PURE__ */ new WeakMap(), y = /* @__PURE__ */ new WeakMap(), z = /* @__PURE__ */ new WeakMap(), A = /* @__PURE__ */ new WeakMap(), q = /* @__PURE__ */ new WeakMap(), B = /* @__PURE__ */ new WeakMap(), U = /* @__PURE__ */ new WeakMap(), j = /* @__PURE__ */ new WeakMap(), x = /* @__PURE__ */ new WeakMap(), F = {
+  (function(E) {
+    const o = /* @__PURE__ */ new WeakMap(), c = /* @__PURE__ */ new WeakMap(), u = /* @__PURE__ */ new WeakMap(), l = /* @__PURE__ */ new WeakMap(), v = /* @__PURE__ */ new WeakMap(), M = /* @__PURE__ */ new WeakMap(), O = /* @__PURE__ */ new WeakMap(), g = /* @__PURE__ */ new WeakMap(), q = /* @__PURE__ */ new WeakMap(), A = /* @__PURE__ */ new WeakMap(), B = /* @__PURE__ */ new WeakMap(), U = /* @__PURE__ */ new WeakMap(), j = /* @__PURE__ */ new WeakMap(), K = /* @__PURE__ */ new WeakMap(), x = /* @__PURE__ */ new WeakMap(), F = {
       ariaAtomic: "aria-atomic",
       ariaAutoComplete: "aria-autocomplete",
       ariaBusy: "aria-busy",
@@ -49,7 +49,7 @@ import "@justeattakeaway/pie-icons-webc/dist/IconCheck.js";
       ariaValueNow: "aria-valuenow",
       ariaValueText: "aria-valuetext",
       role: "role"
-    }, de = (t, e) => {
+    }, he = (t, e) => {
       for (let i in F) {
         e[i] = null;
         let a = null;
@@ -64,11 +64,11 @@ import "@justeattakeaway/pie-icons-webc/dist/IconCheck.js";
         });
       }
     };
-    function K(t) {
+    function G(t) {
       const e = l.get(t), { form: i } = e;
-      Z(t, i, e), X(t, e.labels);
+      ee(t, i, e), Z(t, e.labels);
     }
-    const G = (t, e = !1) => {
+    const Y = (t, e = !1) => {
       const i = document.createTreeWalker(t, NodeFilter.SHOW_ELEMENT, {
         acceptNode(s) {
           return l.has(s) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
@@ -78,21 +78,21 @@ import "@justeattakeaway/pie-icons-webc/dist/IconCheck.js";
       const r = !e || t.disabled;
       for (; a; )
         a.formDisabledCallback && r && $(a, t.disabled), a = i.nextNode();
-    }, Y = { attributes: !0, attributeFilter: ["disabled", "name"] }, S = T() ? new MutationObserver((t) => {
+    }, J = { attributes: !0, attributeFilter: ["disabled", "name"] }, I = T() ? new MutationObserver((t) => {
       for (const e of t) {
         const i = e.target;
-        if (e.attributeName === "disabled" && (i.constructor.formAssociated ? $(i, i.hasAttribute("disabled")) : i.localName === "fieldset" && G(i)), e.attributeName === "name" && i.constructor.formAssociated) {
-          const a = l.get(i), r = z.get(i);
+        if (e.attributeName === "disabled" && (i.constructor.formAssociated ? $(i, i.hasAttribute("disabled")) : i.localName === "fieldset" && Y(i)), e.attributeName === "name" && i.constructor.formAssociated) {
+          const a = l.get(i), r = q.get(i);
           a.setFormValue(r);
         }
       }
     }) : {};
-    function O(t) {
+    function P(t) {
       t.forEach((e) => {
         const { addedNodes: i, removedNodes: a } = e, r = Array.from(i), s = Array.from(a);
         r.forEach((n) => {
-          var u;
-          if (l.has(n) && n.constructor.formAssociated && K(n), A.has(n)) {
+          var h;
+          if (l.has(n) && n.constructor.formAssociated && G(n), A.has(n)) {
             const d = A.get(n);
             Object.keys(F).filter((f) => d[f] !== null).forEach((f) => {
               n.setAttribute(F[f], d[f]);
@@ -103,125 +103,125 @@ import "@justeattakeaway/pie-icons-webc/dist/IconCheck.js";
             n.setAttribute("internals-valid", d.validity.valid.toString()), n.setAttribute("internals-invalid", (!d.validity.valid).toString()), n.setAttribute("aria-invalid", (!d.validity.valid).toString()), x.delete(n);
           }
           if (n.localName === "form") {
-            const d = y.get(n), b = document.createTreeWalker(n, NodeFilter.SHOW_ELEMENT, {
+            const d = g.get(n), b = 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;
               }
             });
             let f = b.nextNode();
             for (; f; )
-              K(f), f = b.nextNode();
+              G(f), f = b.nextNode();
           }
-          n.localName === "fieldset" && ((u = S.observe) === null || u === void 0 || u.call(S, n, Y), G(n, !0));
+          n.localName === "fieldset" && ((h = I.observe) === null || h === void 0 || h.call(I, n, J), Y(n, !0));
         }), s.forEach((n) => {
-          const u = l.get(n);
-          u && h.get(u) && J(u), P.has(n) && P.get(n).disconnect();
+          const h = l.get(n);
+          h && u.get(h) && Q(h), O.has(n) && O.get(n).disconnect();
         });
       });
     }
-    function he(t) {
+    function ue(t) {
       t.forEach((e) => {
         const { removedNodes: i } = e;
         i.forEach((a) => {
-          const r = U.get(e.target);
-          l.has(a) && te(a), r.disconnect();
+          const r = j.get(e.target);
+          l.has(a) && ie(a), r.disconnect();
         });
       });
     }
-    const ue = (t) => {
+    const pe = (t) => {
       var e, i;
-      const a = new MutationObserver(he);
-      !((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 }), U.set(t, a);
+      const a = new MutationObserver(ue);
+      !((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 }), j.set(t, a);
     };
-    T() && new MutationObserver(O);
+    T() && new MutationObserver(P);
     const _ = {
       childList: !0,
       subtree: !0
     }, $ = (t, e) => {
       t.toggleAttribute("internals-disabled", e), e ? t.setAttribute("aria-disabled", "true") : t.removeAttribute("aria-disabled"), t.formDisabledCallback && t.formDisabledCallback.apply(t, [e]);
-    }, J = (t) => {
-      h.get(t).forEach((i) => {
+    }, Q = (t) => {
+      u.get(t).forEach((i) => {
         i.remove();
-      }), h.set(t, []);
-    }, Q = (t, e) => {
+      }), u.set(t, []);
+    }, X = (t, e) => {
       const i = document.createElement("input");
-      return i.type = "hidden", i.name = t.getAttribute("name"), t.after(i), h.get(e).push(i), i;
-    }, pe = (t, e) => {
+      return i.type = "hidden", i.name = t.getAttribute("name"), t.after(i), u.get(e).push(i), i;
+    }, fe = (t, e) => {
       var i;
-      h.set(e, []), (i = S.observe) === null || i === void 0 || i.call(S, t, Y);
-    }, X = (t, e) => {
+      u.set(e, []), (i = I.observe) === null || i === void 0 || i.call(I, t, J);
+    }, Z = (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);
       }
-    }, I = (t) => {
-      const e = Array.from(t.elements).filter((s) => !s.tagName.includes("-") && s.validity).map((s) => s.validity.valid), i = y.get(t) || [], a = Array.from(i).filter((s) => s.isConnected).map((s) => l.get(s).validity.valid), r = [...e, ...a].includes(!1);
+    }, V = (t) => {
+      const e = Array.from(t.elements).filter((s) => !s.tagName.includes("-") && s.validity).map((s) => s.validity.valid), i = g.get(t) || [], a = Array.from(i).filter((s) => s.isConnected).map((s) => l.get(s).validity.valid), r = [...e, ...a].includes(!1);
       t.toggleAttribute("internals-invalid", r), t.toggleAttribute("internals-valid", !r);
-    }, fe = (t) => {
-      I(V(t.target));
     }, me = (t) => {
-      I(V(t.target));
+      V(S(t.target));
     }, we = (t) => {
+      V(S(t.target));
+    }, be = (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 = y.get(t);
+          const r = g.get(t);
           if (t.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((h) => l.get(h).reportValidity()).includes(!1) && i.preventDefault();
         }
       });
-    }, be = (t) => {
-      const e = y.get(t.target);
+    }, ve = (t) => {
+      const e = g.get(t.target);
       e && e.size && e.forEach((i) => {
         i.constructor.formAssociated && i.formResetCallback && i.formResetCallback.apply(i);
       });
-    }, Z = (t, e, i) => {
+    }, ee = (t, e, i) => {
       if (e) {
-        const a = y.get(e);
+        const a = g.get(e);
         if (a)
           a.add(t);
         else {
           const r = /* @__PURE__ */ new Set();
-          r.add(t), y.set(e, r), we(e), e.addEventListener("reset", be), e.addEventListener("input", fe), e.addEventListener("change", me);
+          r.add(t), g.set(e, r), be(e), e.addEventListener("reset", ve), e.addEventListener("input", me), e.addEventListener("change", we);
         }
-        k.set(e, { ref: t, internals: i }), t.constructor.formAssociated && t.formAssociatedCallback && setTimeout(() => {
+        M.set(e, { ref: t, internals: i }), t.constructor.formAssociated && t.formAssociatedCallback && setTimeout(() => {
           t.formAssociatedCallback.apply(t, [e]);
-        }, 0), I(e);
+        }, 0), V(e);
       }
-    }, V = (t) => {
+    }, S = (t) => {
       let e = t.parentNode;
-      return e && e.tagName !== "FORM" && (e = V(e)), e;
+      return e && e.tagName !== "FORM" && (e = S(e)), e;
     }, w = (t, e, i = DOMException) => {
       if (!t.constructor.formAssociated)
         throw new i(e);
-    }, ee = (t, e, i) => {
-      const a = y.get(t);
+    }, te = (t, e, i) => {
+      const a = g.get(t);
       return a && a.size && a.forEach((r) => {
         l.get(r)[i]() || (e = !1);
       }), e;
-    }, te = (t) => {
+    }, ie = (t) => {
       if (t.constructor.formAssociated) {
         const e = l.get(t), { labels: i, form: a } = e;
-        X(t, i), Z(t, a, e);
+        Z(t, i), ee(t, a, e);
       }
     };
     function T() {
       return typeof MutationObserver < "u";
     }
-    class ve {
+    class ge {
       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 ge = (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), ye = (t, e, i) => (t.valid = Ee(e), Object.keys(e).forEach((a) => t[a] = e[a]), i && I(i), t), Ee = (t) => {
+    const ye = (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), Ee = (t, e, i) => (t.valid = ke(e), Object.keys(e).forEach((a) => t[a] = e[a]), i && V(i), t), ke = (t) => {
       let e = !0;
       for (let i in t)
         i !== "valid" && t[i] !== !1 && (e = !1);
       return e;
     }, R = /* @__PURE__ */ new WeakMap();
-    function ie(t, e) {
+    function ae(t, e) {
       t.toggleAttribute(e, !0), t.part && t.part.add(e);
     }
     class D extends Set {
@@ -237,8 +237,8 @@ import "@justeattakeaway/pie-icons-webc/dist/IconCheck.js";
         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 ? ie(a, r) : setTimeout(() => {
-          ie(a, r);
+        return a.isConnected ? ae(a, r) : setTimeout(() => {
+          ae(a, r);
         }), i;
       }
       clear() {
@@ -253,26 +253,19 @@ import "@justeattakeaway/pie-icons-webc/dist/IconCheck.js";
         }), i;
       }
     }
-    function ae(t, e, i, a) {
-      if (i === "a" && !a)
-        throw new TypeError("Private accessor was defined without a getter");
-      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");
+    function re(t, e, i, a) {
+      if (i === "a" && !a) throw new TypeError("Private accessor was defined without a getter");
+      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 ke(t, e, i, a, r) {
-      if (a === "m")
-        throw new TypeError("Private method is not writable");
-      if (a === "a" && !r)
-        throw new TypeError("Private accessor was defined without a setter");
-      if (typeof e == "function" ? t !== e || !r : !e.has(t))
-        throw new TypeError("Cannot write private member to an object whose class did not declare it");
-      return a === "a" ? r.call(t, i) : r ? r.value = i : e.set(t, i), i;
+    function Me(t, e, i, a, r) {
+      if (typeof e == "function" ? t !== e || !r : !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 Me {
+    class Ce {
       constructor(e) {
-        C.set(this, void 0), ke(this, C, e, "f");
+        C.set(this, void 0), Me(this, C, e);
         for (let i = 0; i < e.length; i++) {
           let a = e[i];
           this[i] = a, a.hasAttribute("name") && (this[a.getAttribute("name")] = a);
@@ -280,10 +273,10 @@ import "@justeattakeaway/pie-icons-webc/dist/IconCheck.js";
         Object.freeze(this);
       }
       get length() {
-        return ae(this, C, "f").length;
+        return re(this, C, "f").length;
       }
       [(C = /* @__PURE__ */ new WeakMap(), Symbol.iterator)]() {
-        return ae(this, C, "f")[Symbol.iterator]();
+        return re(this, C, "f")[Symbol.iterator]();
       }
       item(e) {
         return this[e] == null ? null : this[e];
@@ -292,39 +285,39 @@ import "@justeattakeaway/pie-icons-webc/dist/IconCheck.js";
         return this[e] == null ? null : this[e];
       }
     }
-    function Ce() {
+    function Ae() {
       const t = HTMLFormElement.prototype.checkValidity;
       HTMLFormElement.prototype.checkValidity = i;
       const e = HTMLFormElement.prototype.reportValidity;
       HTMLFormElement.prototype.reportValidity = a;
       function i(...s) {
         let n = t.apply(this, s);
-        return ee(this, n, "checkValidity");
+        return te(this, n, "checkValidity");
       }
       function a(...s) {
         let n = e.apply(this, s);
-        return ee(this, n, "reportValidity");
+        return te(this, n, "reportValidity");
       }
       const { get: r } = Object.getOwnPropertyDescriptor(HTMLFormElement.prototype, "elements");
       Object.defineProperty(HTMLFormElement.prototype, "elements", {
         get(...s) {
-          const n = r.call(this, ...s), u = Array.from(y.get(this) || []);
-          if (u.length === 0)
+          const n = r.call(this, ...s), h = Array.from(g.get(this) || []);
+          if (h.length === 0)
             return n;
-          const d = Array.from(n).concat(u).sort((b, f) => b.compareDocumentPosition ? b.compareDocumentPosition(f) & 2 ? 1 : -1 : 0);
-          return new Me(d);
+          const d = Array.from(n).concat(h).sort((b, f) => b.compareDocumentPosition ? b.compareDocumentPosition(f) & 2 ? 1 : -1 : 0);
+          return new Ce(d);
         }
       });
     }
-    class re {
+    class oe {
       static get isPolyfilled() {
         return !0;
       }
       constructor(e) {
         if (!e || !e.tagName || e.tagName.indexOf("-") === -1)
           throw new TypeError("Illegal constructor");
-        const i = e.getRootNode(), a = new ve();
-        this.states = new D(e), o.set(this, e), c.set(this, a), l.set(e, this), de(e, this), pe(e, this), Object.seal(this), i instanceof DocumentFragment && ue(i);
+        const i = e.getRootNode(), a = new ge();
+        this.states = new D(e), o.set(this, e), c.set(this, a), l.set(e, this), he(e, this), fe(e, this), Object.seal(this), i instanceof DocumentFragment && pe(i);
       }
       checkValidity() {
         const e = o.get(this);
@@ -345,7 +338,7 @@ import "@justeattakeaway/pie-icons-webc/dist/IconCheck.js";
         const e = o.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 e.constructor.formAssociated === !0 && (i = V(e)), i;
+        return e.constructor.formAssociated === !0 && (i = S(e)), i;
       }
       get labels() {
         const e = o.get(this);
@@ -357,50 +350,49 @@ import "@justeattakeaway/pie-icons-webc/dist/IconCheck.js";
         const e = o.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 = B.get(this);
+        const i = this.checkValidity(), a = U.get(this);
         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 && (e.focus(), a.focus()), i;
       }
       setFormValue(e) {
         const i = o.get(this);
-        if (w(i, "Failed to execute 'setFormValue' on 'ElementInternals': The target element is not a form-associated custom element."), J(this), e != null && !(e instanceof FormData)) {
+        if (w(i, "Failed to execute 'setFormValue' on 'ElementInternals': The target element is not a form-associated custom element."), Q(this), e != null && !(e instanceof FormData)) {
           if (i.getAttribute("name")) {
-            const a = Q(i, this);
+            const a = X(i, this);
             a.value = e;
           }
-        } else
-          e != null && e instanceof FormData && Array.from(e).reverse().forEach(([a, r]) => {
-            if (typeof r == "string") {
-              const s = Q(i, this);
-              s.name = a, s.value = r;
-            }
-          });
-        z.set(i, e);
+        } else e != null && e instanceof FormData && Array.from(e).reverse().forEach(([a, r]) => {
+          if (typeof r == "string") {
+            const s = X(i, this);
+            s.name = a, s.value = r;
+          }
+        });
+        q.set(i, e);
       }
       setValidity(e, i, a) {
         const r = o.get(this);
         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.");
-        B.set(this, a);
+        U.set(this, a);
         const s = c.get(this), n = {};
         for (const b in e)
           n[b] = e[b];
-        Object.keys(n).length === 0 && ge(s);
-        const u = Object.assign(Object.assign({}, s), n);
-        delete u.valid;
-        const { valid: d } = ye(s, u, this.form);
+        Object.keys(n).length === 0 && ye(s);
+        const h = Object.assign(Object.assign({}, s), n);
+        delete h.valid;
+        const { valid: d } = Ee(s, h, 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.");
-        g.set(this, d ? "" : i), r.isConnected ? (r.toggleAttribute("internals-invalid", !d), r.toggleAttribute("internals-valid", d), r.setAttribute("aria-invalid", `${!d}`)) : x.set(r, this);
+        v.set(this, d ? "" : i), r.isConnected ? (r.toggleAttribute("internals-invalid", !d), r.toggleAttribute("internals-valid", d), r.setAttribute("aria-invalid", `${!d}`)) : x.set(r, this);
       }
       get shadowRoot() {
-        const e = o.get(this), i = q.get(e);
+        const e = o.get(this), i = B.get(e);
         return i || null;
       }
       get validationMessage() {
         const e = o.get(this);
-        return w(e, "Failed to read the 'validationMessage' property from 'ElementInternals': The target element is not a form-associated custom element."), g.get(this);
+        return w(e, "Failed to read the 'validationMessage' property from 'ElementInternals': The target element is not a form-associated custom element."), v.get(this);
       }
       get validity() {
         const e = o.get(this);
@@ -411,7 +403,7 @@ import "@justeattakeaway/pie-icons-webc/dist/IconCheck.js";
         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 Ae() {
+    function xe() {
       if (typeof window > "u" || !window.ElementInternals || !HTMLElement.prototype.attachInternals)
         return !1;
       class t extends HTMLElement {
@@ -435,22 +427,22 @@ import "@justeattakeaway/pie-icons-webc/dist/IconCheck.js";
         "reportValidity"
       ].every((a) => a in i.internals);
     }
-    let oe = !1, se = !1;
+    let se = !1, ne = !1;
     function H(t) {
-      se || (se = !0, window.CustomStateSet = D, t && (HTMLElement.prototype.attachInternals = function(...e) {
+      ne || (ne = !0, window.CustomStateSet = D, t && (HTMLElement.prototype.attachInternals = function(...e) {
         const i = t.call(this, e);
         return i.states = new D(this), i;
       }));
     }
-    function ne(t = !0) {
-      if (!oe) {
-        if (oe = !0, typeof window < "u" && (window.ElementInternals = re), typeof CustomElementRegistry < "u") {
+    function le(t = !0) {
+      if (!se) {
+        if (se = !0, typeof window < "u" && (window.ElementInternals = oe), typeof CustomElementRegistry < "u") {
           const e = CustomElementRegistry.prototype.define;
           CustomElementRegistry.prototype.define = function(i, a, r) {
             if (a.formAssociated) {
               const s = a.prototype.connectedCallback;
               a.prototype.connectedCallback = function() {
-                j.has(this) || (j.set(this, !0), this.hasAttribute("disabled") && $(this, !0)), s != null && s.apply(this), te(this);
+                K.has(this) || (K.set(this, !0), this.hasAttribute("disabled") && $(this, !0)), s != null && s.apply(this), ie(this);
               };
             }
             e.call(this, i, a, r);
@@ -460,46 +452,43 @@ import "@justeattakeaway/pie-icons-webc/dist/IconCheck.js";
           if (this.tagName) {
             if (this.tagName.indexOf("-") === -1)
               throw new Error("Failed to execute 'attachInternals' on 'HTMLElement': Unable to attach ElementInternals to non-custom elements.");
-          } else
-            return {};
+          } else return {};
           if (l.has(this))
             throw new DOMException("DOMException: Failed to execute 'attachInternals' on 'HTMLElement': ElementInternals for the specified element was already attached.");
-          return new re(this);
+          return new oe(this);
         }), typeof Element < "u") {
           let e = function(...a) {
             const r = i.apply(this, a);
-            if (q.set(this, r), T()) {
-              const s = new MutationObserver(O);
-              window.ShadyDOM ? s.observe(this, _) : s.observe(r, _), P.set(this, s);
+            if (B.set(this, r), T()) {
+              const s = new MutationObserver(P);
+              window.ShadyDOM ? s.observe(this, _) : s.observe(r, _), O.set(this, s);
             }
             return r;
           };
           const i = Element.prototype.attachShadow;
           Element.prototype.attachShadow = e;
         }
-        T() && typeof document < "u" && new MutationObserver(O).observe(document.documentElement, _), typeof HTMLFormElement < "u" && Ce(), (t || typeof window < "u" && !window.CustomStateSet) && H();
+        T() && typeof document < "u" && new MutationObserver(P).observe(document.documentElement, _), typeof HTMLFormElement < "u" && Ae(), (t || typeof window < "u" && !window.CustomStateSet) && H();
       }
     }
-    return !!customElements.polyfillWrapFlushCallback || (Ae() ? typeof window < "u" && !window.CustomStateSet && H(HTMLElement.prototype.attachInternals) : ne(!1)), v.forceCustomStateSetPolyfill = H, v.forceElementInternalsPolyfill = ne, Object.defineProperty(v, "__esModule", { value: !0 }), v;
+    return !!customElements.polyfillWrapFlushCallback || (xe() ? typeof window < "u" && !window.CustomStateSet && H(HTMLElement.prototype.attachInternals) : le(!1)), E.forceCustomStateSetPolyfill = H, E.forceElementInternalsPolyfill = le, Object.defineProperty(E, "__esModule", { value: !0 }), E;
   })({});
 })();
-const Oe = `*,*: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{--switch-bg-color: var(--dt-color-interactive-form);--switch-bg-color--checked: var(--dt-color-interactive-brand);--switch-bg-color--disabled: var(--dt-color-disabled-01);--switch-width: 48px;--switch-height: 24px;--switch-control-size: 20px;--switch-padding: 2px;--switch-radius: var(--dt-radius-rounded-e);--switch-translation: calc(var(--switch-width) - var(--switch-control-size) - 2 * var(--switch-padding));position:relative;display:flex;width:var(--switch-width);height:var(--switch-height);flex-shrink:0;padding:var(--switch-padding);border-radius:var(--switch-radius);background-color:var(--switch-bg-color)}@media (prefers-reduced-motion: no-preference){.c-switch{transition:background-color .15s cubic-bezier(.4,0,.9,1) 0s}}.c-switch:hover{background-color:hsl(var(--dt-color-interactive-form-h),var(--dt-color-interactive-form-s),calc(var(--dt-color-interactive-form-l) - var(--dt-color-hover-01)))}.c-switch:focus,.c-switch:focus-within{box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer);outline:none}.c-switch:active{background-color:hsl(var(--dt-color-interactive-form-h),var(--dt-color-interactive-form-s),calc(var(--dt-color-interactive-form-l) - var(--dt-color-active-01)))}.c-switch[checked]{background-color:var(--switch-bg-color--checked)}@media (prefers-reduced-motion: no-preference){.c-switch[checked]{transition:background-color .15s cubic-bezier(.4,0,.9,1) 0s}}.c-switch[checked]:hover{background-color:hsl(var(--dt-color-interactive-brand-h),var(--dt-color-interactive-brand-s),calc(var(--dt-color-interactive-brand-l) - var(--dt-color-hover-01)))}.c-switch[checked]:focus,.c-switch[checked]:focus-within{background-color:var(--switch-bg-color--checked)}.c-switch[checked]:active{background-color:hsl(var(--dt-color-interactive-brand-h),var(--dt-color-interactive-brand-s),calc(var(--dt-color-interactive-brand-l) - var(--dt-color-active-01)))}[disabled] .c-switch{background-color:var(--switch-bg-color--disabled);pointer-events:none}.c-switch-input{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);border:0;left:50%;transform:translate(-50%) translateY(-50%);bottom:0}.c-switch-input:disabled{background-color:transparent}.c-switch-control{position:absolute;left:2px;width:var(--switch-control-size);height:var(--switch-control-size);border-radius:var(--switch-radius);background-color:var(--dt-color-interactive-light);padding:var(--switch-padding)}@media (prefers-reduced-motion: no-preference){.c-switch-control{transition:transform .15s cubic-bezier(.4,0,.9,1) 0s}}.c-switch-wrapper--rtl .c-switch-control{position:absolute;left:initial;right:2px}.c-switch-input:checked+.c-switch-control{transform:translate(var(--switch-translation))}@media (prefers-reduced-motion: no-preference){.c-switch-input:checked+.c-switch-control{transition:transform .15s cubic-bezier(.4,0,.9,1) 0s}}.c-switch-input:checked+.c-switch-control .c-pieIcon--check{color:var(--switch-bg-color--checked)}@media (prefers-reduced-motion: no-preference){.c-switch-input:checked+.c-switch-control .c-pieIcon--check{transition:color .15s cubic-bezier(.4,0,.9,1) 0s}}.c-switch-input:disabled~.c-switch-control{color:var(--switch-bg-color--disabled)}.c-switch-input:disabled~.c-switch-control .c-pieIcon--check{color:var(--switch-bg-color--disabled)}@media (prefers-reduced-motion: no-preference){.c-switch-input:disabled~.c-switch-control .c-pieIcon--check{transition:color .15s cubic-bezier(.4,0,.9,1) 0s}}.c-switch-description{position:absolute;display:block;height:1px;width:1px;overflow:hidden;padding:1px;white-space:nowrap}.c-switch-wrapper--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}}
-`, _e = ["leading", "trailing"], je = "change", M = {
+const _e = "*,*: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{--switch-bg-color: var(--dt-color-interactive-form);--switch-bg-color--checked: var(--dt-color-interactive-brand);--switch-bg-color--disabled: var(--dt-color-disabled-01);--switch-width: 48px;--switch-height: 24px;--switch-control-size: 20px;--switch-padding: 2px;--switch-radius: var(--dt-radius-rounded-e);--switch-translation: calc(var(--switch-width) - var(--switch-control-size) - 2 * var(--switch-padding));position:relative;display:flex;width:var(--switch-width);height:var(--switch-height);flex-shrink:0;padding:var(--switch-padding);border-radius:var(--switch-radius);background-color:var(--switch-bg-color)}@media (prefers-reduced-motion: no-preference){.c-switch{transition:background-color .15s cubic-bezier(.4,0,.9,1) 0s}}.c-switch:hover{background-color:hsl(var(--dt-color-interactive-form-h),var(--dt-color-interactive-form-s),calc(var(--dt-color-interactive-form-l) - var(--dt-color-hover-01)))}.c-switch:focus,.c-switch:focus-within{box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer);outline:none}.c-switch:active{background-color:hsl(var(--dt-color-interactive-form-h),var(--dt-color-interactive-form-s),calc(var(--dt-color-interactive-form-l) - var(--dt-color-active-01)))}.c-switch[checked]{background-color:var(--switch-bg-color--checked)}@media (prefers-reduced-motion: no-preference){.c-switch[checked]{transition:background-color .15s cubic-bezier(.4,0,.9,1) 0s}}.c-switch[checked]:hover{background-color:hsl(var(--dt-color-interactive-brand-h),var(--dt-color-interactive-brand-s),calc(var(--dt-color-interactive-brand-l) - var(--dt-color-hover-01)))}.c-switch[checked]:focus,.c-switch[checked]:focus-within{background-color:var(--switch-bg-color--checked)}.c-switch[checked]:active{background-color:hsl(var(--dt-color-interactive-brand-h),var(--dt-color-interactive-brand-s),calc(var(--dt-color-interactive-brand-l) - var(--dt-color-active-01)))}[disabled] .c-switch{background-color:var(--switch-bg-color--disabled);pointer-events:none}.c-switch-input{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);border:0;left:50%;transform:translate(-50%) translateY(-50%);bottom:0}.c-switch-input:disabled{background-color:transparent}.c-switch-control{position:absolute;left:2px;width:var(--switch-control-size);height:var(--switch-control-size);border-radius:var(--switch-radius);background-color:var(--dt-color-interactive-light);padding:var(--switch-padding)}@media (prefers-reduced-motion: no-preference){.c-switch-control{transition:transform .15s cubic-bezier(.4,0,.9,1) 0s}}.c-switch-wrapper--rtl .c-switch-control{position:absolute;left:initial;right:2px}.c-switch-input:checked+.c-switch-control{transform:translate(var(--switch-translation))}@media (prefers-reduced-motion: no-preference){.c-switch-input:checked+.c-switch-control{transition:transform .15s cubic-bezier(.4,0,.9,1) 0s}}.c-switch-input:checked+.c-switch-control .c-pieIcon--check{color:var(--switch-bg-color--checked)}@media (prefers-reduced-motion: no-preference){.c-switch-input:checked+.c-switch-control .c-pieIcon--check{transition:color .15s cubic-bezier(.4,0,.9,1) 0s}}.c-switch-input:disabled~.c-switch-control{color:var(--switch-bg-color--disabled)}.c-switch-input:disabled~.c-switch-control .c-pieIcon--check{color:var(--switch-bg-color--disabled)}@media (prefers-reduced-motion: no-preference){.c-switch-input:disabled~.c-switch-control .c-pieIcon--check{transition:color .15s cubic-bezier(.4,0,.9,1) 0s}}.c-switch-description{position:absolute;display:block;height:1px;width:1px;overflow:hidden;padding:1px;white-space:nowrap}.c-switch-wrapper--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}}", $e = ["leading", "trailing"], je = "change", k = {
   checked: !1,
   disabled: !1,
   labelPlacement: "leading",
   required: !1,
   value: "on"
 };
-var $e = Object.defineProperty, Re = Object.getOwnPropertyDescriptor, m = (v, o, c, h) => {
-  for (var l = h > 1 ? void 0 : h ? Re(o, c) : o, g = v.length - 1, k; g >= 0; g--)
-    (k = v[g]) && (l = (h ? k(o, c, l) : k(l)) || l);
-  return h && l && $e(o, c, l), l;
+var Re = Object.defineProperty, m = (E, o, c, u) => {
+  for (var l = void 0, v = E.length - 1, M; v >= 0; v--)
+    (M = E[v]) && (l = M(o, c, l) || l);
+  return l && Re(o, c, l), l;
 };
-const ce = "pie-switch";
-class p extends Ve(Te(xe)) {
+const de = "pie-switch", z = class z extends Te(Le(Fe)) {
   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() {
     var o;
@@ -523,8 +512,8 @@ class p extends Ve(Te(xe)) {
   handleChange(o) {
     const { checked: c } = o == null ? void 0 : o.currentTarget;
     this.checked = c;
-    const h = Le(o);
-    this.dispatchEvent(h), this.handleFormAssociation();
+    const u = Ne(o);
+    this.dispatchEvent(u), this.handleFormAssociation();
   }
   /**
    * Returns a boolean value which indicates validity of the value of the component. If the value is invalid, this method also fires the invalid event on the component.
@@ -572,9 +561,9 @@ class p extends Ve(Te(xe)) {
    * @private
    */
   renderSwitchLabel(o) {
-    const { label: c, labelPlacement: h } = this;
-    return !c || h !== o ? L : N`
-            <span data-test-id="switch-label-${h}">
+    const { label: c, labelPlacement: u } = this;
+    return !c || u !== o ? L : N`
+            <span data-test-id="switch-label-${u}">
                 ${c}
             </span>`;
   }
@@ -592,17 +581,17 @@ class p extends Ve(Te(xe)) {
     const {
       aria: o,
       checked: c,
-      disabled: h,
+      disabled: u,
       isRTL: l,
-      required: g
+      required: v
     } = this;
     return N`
             <label
-                class="${Se({
+                class="${Ve({
       "c-switch-wrapper": !0,
       "c-switch-wrapper--rtl": l
     })}"
-                ?disabled=${h}>
+                ?disabled=${u}>
                 ${this.renderSwitchLabel("leading")}
                 <div
                     data-test-id="switch-component"
@@ -613,11 +602,11 @@ class p extends Ve(Te(xe)) {
                         role="switch"
                         type="checkbox"
                         class="c-switch-input"
-                        .required=${g}
+                        .required=${v}
                         .checked="${c}"
-                        .disabled="${h}"
+                        .disabled="${u}"
                         @change="${this.handleChange}"
-                        aria-label="${Ie(o == null ? void 0 : o.label)}"
+                        aria-label="${Se(o == null ? void 0 : o.label)}"
                         aria-describedby="${o != null && o.describedBy ? "switch-description" : L}">
                     <div class="c-switch-control">
                         ${c ? N`<icon-check></icon-check>` : L}
@@ -627,43 +616,44 @@ class p extends Ve(Te(xe)) {
                 ${this.renderAriaDescription()}
             </label>`;
   }
-}
-p.styles = Fe(Oe);
+};
+z.styles = Ie(_e);
+let p = z;
 m([
-  E({ type: String })
-], p.prototype, "label", 2);
+  y({ type: String })
+], p.prototype, "label");
 m([
-  E({ type: String }),
-  Ne(ce, _e, M.labelPlacement)
-], p.prototype, "labelPlacement", 2);
+  y({ type: String }),
+  Oe(de, $e, k.labelPlacement)
+], p.prototype, "labelPlacement");
 m([
-  E({ type: Object })
-], p.prototype, "aria", 2);
+  y({ type: Object })
+], p.prototype, "aria");
 m([
-  E({ type: Boolean, reflect: !0 })
-], p.prototype, "checked", 2);
+  y({ type: Boolean, reflect: !0 })
+], p.prototype, "checked");
 m([
-  E({ type: Boolean, reflect: !0 })
-], p.prototype, "required", 2);
+  y({ type: Boolean, reflect: !0 })
+], p.prototype, "required");
 m([
-  E({ type: String })
-], p.prototype, "value", 2);
+  y({ type: String })
+], p.prototype, "value");
 m([
-  E({ type: String })
-], p.prototype, "name", 2);
+  y({ type: String })
+], p.prototype, "name");
 m([
-  E({ type: Boolean, reflect: !0 })
-], p.prototype, "disabled", 2);
+  y({ type: Boolean, reflect: !0 })
+], p.prototype, "disabled");
 m([
-  le('input[type="checkbox"]')
-], p.prototype, "input", 2);
+  ce('input[type="checkbox"]')
+], p.prototype, "input");
 m([
-  le("label")
-], p.prototype, "focusTarget", 2);
-Pe(ce, p);
+  ce("label")
+], p.prototype, "focusTarget");
+Pe(de, p);
 export {
   je as ON_SWITCH_CHANGED_EVENT,
   p as PieSwitch,
-  M as defaultProps,
-  _e as labelPlacements
+  k as defaultProps,
+  $e as labelPlacements
 };

package/dist/react.js

@@ -1,27 +1,21 @@
-import * as t from "react";
-import { createComponent as e } from "@lit/react";
+import * as e from "react";
+import { createComponent as t } from "@lit/react";
 import { PieSwitch as i } from "./index.js";
-import { ON_SWITCH_CHANGED_EVENT as S, defaultProps as f, labelPlacements as C } from "./index.js";
-import "lit";
-import "lit/decorators.js";
-import "lit/directives/class-map.js";
-import "lit/directives/if-defined.js";
-import "@justeattakeaway/pie-webc-core";
-import "@justeattakeaway/pie-icons-webc/dist/IconCheck.js";
-const o = e({
+import { ON_SWITCH_CHANGED_EVENT as s, defaultProps as l, labelPlacements as p } from "./index.js";
+const a = t({
   displayName: "PieSwitch",
   elementClass: i,
-  react: t,
+  react: e,
   tagName: "pie-switch",
   events: {
     onInvalid: "invalid",
     onChange: "change"
     // when the switch checked state is changed.
   }
-}), h = o;
+}), n = a;
 export {
-  S as ON_SWITCH_CHANGED_EVENT,
-  h as PieSwitch,
-  f as defaultProps,
-  C as labelPlacements
+  s as ON_SWITCH_CHANGED_EVENT,
+  n as PieSwitch,
+  l as defaultProps,
+  p as labelPlacements
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-switch",
   "description": "PIE Design System Switch built using Web Components",
-  "version": "0.30.1",
+  "version": "0.30.3",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -37,13 +37,13 @@
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "0.9.0",
     "@justeattakeaway/pie-components-config": "0.18.0",
-    "@justeattakeaway/pie-css": "0.12.1",
+    "@justeattakeaway/pie-css": "0.13.1",
     "cem-plugin-module-file-extensions": "0.0.5"
   },
   "dependencies": {
-    "@justeattakeaway/pie-icons-webc": "0.25.1",
-    "@justeattakeaway/pie-webc-core": "0.24.0",
-    "@justeattakeaway/pie-wrapper-react": "0.14.1",
+    "@justeattakeaway/pie-icons-webc": "0.25.3",
+    "@justeattakeaway/pie-webc-core": "0.24.2",
+    "@justeattakeaway/pie-wrapper-react": "0.14.2",
     "element-internals-polyfill": "1.3.11"
   },
   "volta": {

package/src/react.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { createComponent, EventName } from '@lit/react';
+import { createComponent, type EventName } from '@lit/react';
 import { PieSwitch as PieSwitchLit } from './index';
-import { SwitchProps } from './defs';
+import { type SwitchProps } from './defs';
 
 export * from './defs';