@justeattakeaway/pie-switch 0.29.11 → 0.30.0

package/dist/index.js

@@ -1,18 +1,12 @@
-import { LitElement as Fe, html as A, nothing as C, unsafeCSS as Ae } from "lit";
-import { query as le, property as E } from "lit/decorators.js";
-import { FormControlMixin as Ie, RtlMixin as Se, wrapNativeEvent as Ve, validPropertyValues as Te, defineCustomElement as Le } from "@justeattakeaway/pie-webc-core";
+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 "@justeattakeaway/pie-icons-webc/dist/IconCheck.js";
-const Ne = `*,*: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-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[data-is-rtl] .c-switch-control{position:absolute;left:initial;right:2px}.c-switch-wrapper[data-is-rtl] .c-switch-input:checked+.c-switch-control{transform:translate(calc(-1 * var(--switch-translation)))}@media (prefers-reduced-motion: no-preference){.c-switch-wrapper[data-is-rtl] .c-switch-input:checked+.c-switch-control{transition:transform .15s cubic-bezier(.4,0,.9,1) 0s}}
-`, Pe = ["leading", "trailing"], ze = "change", x = {
-  checked: !1,
-  required: !1,
-  disabled: !1,
-  value: "on",
-  labelPlacement: "leading"
-};
 (function() {
-  (function(g) {
-    const n = /* @__PURE__ */ new WeakMap(), l = /* @__PURE__ */ new WeakMap(), h = /* @__PURE__ */ new WeakMap(), c = /* @__PURE__ */ new WeakMap(), w = /* @__PURE__ */ new WeakMap(), k = /* @__PURE__ */ new WeakMap(), M = /* @__PURE__ */ new WeakMap(), y = /* @__PURE__ */ new WeakMap(), z = /* @__PURE__ */ new WeakMap(), I = /* @__PURE__ */ new WeakMap(), q = /* @__PURE__ */ new WeakMap(), B = /* @__PURE__ */ new WeakMap(), U = /* @__PURE__ */ new WeakMap(), j = /* @__PURE__ */ new WeakMap(), S = /* @__PURE__ */ new WeakMap(), V = {
+  (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 = {
       ariaAtomic: "aria-atomic",
       ariaAutoComplete: "aria-autocomplete",
       ariaBusy: "aria-busy",
@@ -56,72 +50,72 @@ const Ne = `*,*:after,*:before{box-sizing:inherit}*,*:before,*:after{cursor:inhe
       ariaValueText: "aria-valuetext",
       role: "role"
     }, de = (t, e) => {
-      for (let i in V) {
+      for (let i in F) {
         e[i] = null;
         let a = null;
-        const r = V[i];
+        const r = F[i];
         Object.defineProperty(e, i, {
           get() {
             return a;
           },
-          set(o) {
-            a = o, t.isConnected ? t.setAttribute(r, o) : I.set(t, e);
+          set(s) {
+            a = s, t.isConnected ? t.setAttribute(r, s) : A.set(t, e);
           }
         });
       }
     };
     function K(t) {
-      const e = c.get(t), { form: i } = e;
+      const e = l.get(t), { form: i } = e;
       Z(t, i, e), X(t, e.labels);
     }
     const G = (t, e = !1) => {
       const i = document.createTreeWalker(t, NodeFilter.SHOW_ELEMENT, {
-        acceptNode(o) {
-          return c.has(o) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
+        acceptNode(s) {
+          return l.has(s) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
         }
       });
       let a = i.nextNode();
       const r = !e || t.disabled;
       for (; a; )
         a.formDisabledCallback && r && $(a, t.disabled), a = i.nextNode();
-    }, Y = { attributes: !0, attributeFilter: ["disabled", "name"] }, T = P() ? new MutationObserver((t) => {
+    }, Y = { attributes: !0, attributeFilter: ["disabled", "name"] }, S = 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 = c.get(i), r = z.get(i);
+          const a = l.get(i), r = z.get(i);
           a.setFormValue(r);
         }
       }
     }) : {};
     function O(t) {
       t.forEach((e) => {
-        const { addedNodes: i, removedNodes: a } = e, r = Array.from(i), o = Array.from(a);
-        r.forEach((s) => {
+        const { addedNodes: i, removedNodes: a } = e, r = Array.from(i), s = Array.from(a);
+        r.forEach((n) => {
           var u;
-          if (c.has(s) && s.constructor.formAssociated && K(s), I.has(s)) {
-            const d = I.get(s);
-            Object.keys(V).filter((f) => d[f] !== null).forEach((f) => {
-              s.setAttribute(V[f], d[f]);
-            }), I.delete(s);
+          if (l.has(n) && n.constructor.formAssociated && K(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]);
+            }), A.delete(n);
           }
-          if (S.has(s)) {
-            const d = S.get(s);
-            s.setAttribute("internals-valid", d.validity.valid.toString()), s.setAttribute("internals-invalid", (!d.validity.valid).toString()), s.setAttribute("aria-invalid", (!d.validity.valid).toString()), S.delete(s);
+          if (x.has(n)) {
+            const d = x.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()), x.delete(n);
           }
-          if (s.localName === "form") {
-            const d = y.get(s), v = document.createTreeWalker(s, NodeFilter.SHOW_ELEMENT, {
+          if (n.localName === "form") {
+            const d = y.get(n), b = document.createTreeWalker(n, NodeFilter.SHOW_ELEMENT, {
               acceptNode(W) {
-                return c.has(W) && W.constructor.formAssociated && !(d && d.has(W)) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
+                return l.has(W) && W.constructor.formAssociated && !(d && d.has(W)) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
               }
             });
-            let f = v.nextNode();
+            let f = b.nextNode();
             for (; f; )
-              K(f), f = v.nextNode();
+              K(f), f = b.nextNode();
           }
-          s.localName === "fieldset" && ((u = T.observe) === null || u === void 0 || u.call(T, s, Y), G(s, !0));
-        }), o.forEach((s) => {
-          const u = c.get(s);
-          u && h.get(u) && J(u), M.has(s) && M.get(s).disconnect();
+          n.localName === "fieldset" && ((u = S.observe) === null || u === void 0 || u.call(S, n, Y), G(n, !0));
+        }), s.forEach((n) => {
+          const u = l.get(n);
+          u && h.get(u) && J(u), P.has(n) && P.get(n).disconnect();
         });
       });
     }
@@ -130,7 +124,7 @@ const Ne = `*,*:after,*:before{box-sizing:inherit}*,*:before,*:after{cursor:inhe
         const { removedNodes: i } = e;
         i.forEach((a) => {
           const r = U.get(e.target);
-          c.has(a) && te(a), r.disconnect();
+          l.has(a) && te(a), r.disconnect();
         });
       });
     }
@@ -139,7 +133,7 @@ const Ne = `*,*:after,*:before{box-sizing:inherit}*,*:before,*:after{cursor:inhe
       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);
     };
-    P() && new MutationObserver(O);
+    T() && new MutationObserver(O);
     const _ = {
       childList: !0,
       subtree: !0
@@ -154,20 +148,20 @@ const Ne = `*,*:after,*:before{box-sizing:inherit}*,*:before,*:after{cursor:inhe
       return i.type = "hidden", i.name = t.getAttribute("name"), t.after(i), h.get(e).push(i), i;
     }, pe = (t, e) => {
       var i;
-      h.set(e, []), (i = T.observe) === null || i === void 0 || i.call(T, t, Y);
+      h.set(e, []), (i = S.observe) === null || i === void 0 || i.call(S, t, Y);
     }, X = (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);
       }
-    }, L = (t) => {
-      const e = Array.from(t.elements).filter((o) => !o.tagName.includes("-") && o.validity).map((o) => o.validity.valid), i = y.get(t) || [], a = Array.from(i).filter((o) => o.isConnected).map((o) => c.get(o).validity.valid), r = [...e, ...a].includes(!1);
+    }, 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);
       t.toggleAttribute("internals-invalid", r), t.toggleAttribute("internals-valid", !r);
     }, fe = (t) => {
-      L(N(t.target));
+      I(V(t.target));
     }, me = (t) => {
-      L(N(t.target));
+      I(V(t.target));
     }, we = (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) => {
@@ -175,7 +169,7 @@ const Ne = `*,*:after,*:before{box-sizing:inherit}*,*:before,*:after{cursor:inhe
           const r = y.get(t);
           if (t.noValidate)
             return;
-          r.size && Array.from(r).reverse().map((u) => c.get(u).reportValidity()).includes(!1) && i.preventDefault();
+          r.size && Array.from(r).reverse().map((u) => l.get(u).reportValidity()).includes(!1) && i.preventDefault();
         }
       });
     }, be = (t) => {
@@ -194,26 +188,26 @@ const Ne = `*,*:after,*:before{box-sizing:inherit}*,*:before,*:after{cursor:inhe
         }
         k.set(e, { ref: t, internals: i }), t.constructor.formAssociated && t.formAssociatedCallback && setTimeout(() => {
           t.formAssociatedCallback.apply(t, [e]);
-        }, 0), L(e);
+        }, 0), I(e);
       }
-    }, N = (t) => {
+    }, V = (t) => {
       let e = t.parentNode;
-      return e && e.tagName !== "FORM" && (e = N(e)), e;
-    }, b = (t, e, i = DOMException) => {
+      return e && e.tagName !== "FORM" && (e = V(e)), e;
+    }, w = (t, e, i = DOMException) => {
       if (!t.constructor.formAssociated)
         throw new i(e);
     }, ee = (t, e, i) => {
       const a = y.get(t);
       return a && a.size && a.forEach((r) => {
-        c.get(r)[i]() || (e = !1);
+        l.get(r)[i]() || (e = !1);
       }), e;
     }, te = (t) => {
       if (t.constructor.formAssociated) {
-        const e = c.get(t), { labels: i, form: a } = e;
+        const e = l.get(t), { labels: i, form: a } = e;
         X(t, i), Z(t, a, e);
       }
     };
-    function P() {
+    function T() {
       return typeof MutationObserver < "u";
     }
     class ve {
@@ -221,7 +215,7 @@ const Ne = `*,*:after,*:before{box-sizing:inherit}*,*:before,*:after{cursor:inhe
         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 && L(i), t), Ee = (t) => {
+    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) => {
       let e = !0;
       for (let i in t)
         i !== "valid" && t[i] !== !1 && (e = !1);
@@ -275,10 +269,10 @@ const Ne = `*,*:after,*:before{box-sizing:inherit}*,*:before,*:after{cursor:inhe
         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;
     }
-    var F;
+    var C;
     class Me {
       constructor(e) {
-        F.set(this, void 0), ke(this, F, e, "f");
+        C.set(this, void 0), ke(this, C, e, "f");
         for (let i = 0; i < e.length; i++) {
           let a = e[i];
           this[i] = a, a.hasAttribute("name") && (this[a.getAttribute("name")] = a);
@@ -286,10 +280,10 @@ const Ne = `*,*:after,*:before{box-sizing:inherit}*,*:before,*:after{cursor:inhe
         Object.freeze(this);
       }
       get length() {
-        return ae(this, F, "f").length;
+        return ae(this, C, "f").length;
       }
-      [(F = /* @__PURE__ */ new WeakMap(), Symbol.iterator)]() {
-        return ae(this, F, "f")[Symbol.iterator]();
+      [(C = /* @__PURE__ */ new WeakMap(), Symbol.iterator)]() {
+        return ae(this, C, "f")[Symbol.iterator]();
       }
       item(e) {
         return this[e] == null ? null : this[e];
@@ -303,21 +297,21 @@ const Ne = `*,*:after,*:before{box-sizing:inherit}*,*:before,*:after{cursor:inhe
       HTMLFormElement.prototype.checkValidity = i;
       const e = HTMLFormElement.prototype.reportValidity;
       HTMLFormElement.prototype.reportValidity = a;
-      function i(...o) {
-        let s = t.apply(this, o);
-        return ee(this, s, "checkValidity");
+      function i(...s) {
+        let n = t.apply(this, s);
+        return ee(this, n, "checkValidity");
       }
-      function a(...o) {
-        let s = e.apply(this, o);
-        return ee(this, s, "reportValidity");
+      function a(...s) {
+        let n = e.apply(this, s);
+        return ee(this, n, "reportValidity");
       }
       const { get: r } = Object.getOwnPropertyDescriptor(HTMLFormElement.prototype, "elements");
       Object.defineProperty(HTMLFormElement.prototype, "elements", {
-        get(...o) {
-          const s = r.call(this, ...o), u = Array.from(y.get(this) || []);
+        get(...s) {
+          const n = r.call(this, ...s), u = Array.from(y.get(this) || []);
           if (u.length === 0)
-            return s;
-          const d = Array.from(s).concat(u).sort((v, f) => v.compareDocumentPosition ? v.compareDocumentPosition(f) & 2 ? 1 : -1 : 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);
         }
       });
@@ -330,13 +324,13 @@ const Ne = `*,*:after,*:before{box-sizing:inherit}*,*:before,*:after{cursor:inhe
         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), n.set(this, e), l.set(this, a), c.set(e, this), de(e, this), pe(e, this), Object.seal(this), i instanceof DocumentFragment && ue(i);
+        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);
       }
       checkValidity() {
-        const e = n.get(this);
-        if (b(e, "Failed to execute 'checkValidity' on 'ElementInternals': The target element is not a form-associated custom element."), !this.willValidate)
+        const e = o.get(this);
+        if (w(e, "Failed to execute 'checkValidity' on 'ElementInternals': The target element is not a form-associated custom element."), !this.willValidate)
           return !0;
-        const i = l.get(this);
+        const i = c.get(this);
         if (!i.valid) {
           const a = new Event("invalid", {
             bubbles: !1,
@@ -348,20 +342,20 @@ const Ne = `*,*:after,*:before{box-sizing:inherit}*,*:before,*:after{cursor:inhe
         return i.valid;
       }
       get form() {
-        const e = n.get(this);
-        b(e, "Failed to read the 'form' property from 'ElementInternals': The target element is not a form-associated custom element.");
+        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 = N(e)), i;
+        return e.constructor.formAssociated === !0 && (i = V(e)), i;
       }
       get labels() {
-        const e = n.get(this);
-        b(e, "Failed to read the 'labels' property from 'ElementInternals': The target element is not a form-associated custom element.");
+        const e = o.get(this);
+        w(e, "Failed to read the 'labels' property from 'ElementInternals': The target element is not a form-associated custom element.");
         const i = e.getAttribute("id"), a = e.getRootNode();
         return a && i ? a.querySelectorAll(`[for="${i}"]`) : [];
       }
       reportValidity() {
-        const e = n.get(this);
-        if (b(e, "Failed to execute 'reportValidity' on 'ElementInternals': The target element is not a form-associated custom element."), !this.willValidate)
+        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);
         if (a && !e.constructor.formAssociated)
@@ -369,8 +363,8 @@ const Ne = `*,*:after,*:before{box-sizing:inherit}*,*:before,*:after{cursor:inhe
         return !i && a && (e.focus(), a.focus()), i;
       }
       setFormValue(e) {
-        const i = n.get(this);
-        if (b(i, "Failed to execute 'setFormValue' on 'ElementInternals': The target element is not a form-associated custom element."), J(this), e != null && !(e instanceof FormData)) {
+        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 (i.getAttribute("name")) {
             const a = Q(i, this);
             a.value = e;
@@ -378,46 +372,46 @@ const Ne = `*,*:after,*:before{box-sizing:inherit}*,*:before,*:after{cursor:inhe
         } else
           e != null && e instanceof FormData && Array.from(e).reverse().forEach(([a, r]) => {
             if (typeof r == "string") {
-              const o = Q(i, this);
-              o.name = a, o.value = r;
+              const s = Q(i, this);
+              s.name = a, s.value = r;
             }
           });
         z.set(i, e);
       }
       setValidity(e, i, a) {
-        const r = n.get(this);
-        if (b(r, "Failed to execute 'setValidity' on 'ElementInternals': The target element is not a form-associated custom element."), !e)
+        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);
-        const o = l.get(this), s = {};
-        for (const v in e)
-          s[v] = e[v];
-        Object.keys(s).length === 0 && ge(o);
-        const u = Object.assign(Object.assign({}, o), s);
+        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(o, u, this.form);
+        const { valid: d } = ye(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.");
-        w.set(this, d ? "" : i), r.isConnected ? (r.toggleAttribute("internals-invalid", !d), r.toggleAttribute("internals-valid", d), r.setAttribute("aria-invalid", `${!d}`)) : S.set(r, this);
+        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);
       }
       get shadowRoot() {
-        const e = n.get(this), i = q.get(e);
+        const e = o.get(this), i = q.get(e);
         return i || null;
       }
       get validationMessage() {
-        const e = n.get(this);
-        return b(e, "Failed to read the 'validationMessage' property from 'ElementInternals': The target element is not a form-associated custom element."), w.get(this);
+        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);
       }
       get validity() {
-        const e = n.get(this);
-        return b(e, "Failed to read the 'validity' property from 'ElementInternals': The target element is not a form-associated custom element."), l.get(this);
+        const e = o.get(this);
+        return w(e, "Failed to read the 'validity' property from 'ElementInternals': The target element is not a form-associated custom element."), c.get(this);
       }
       get willValidate() {
-        const e = n.get(this);
-        return b(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"));
+        const e = o.get(this);
+        return w(e, "Failed to read the 'willValidate' property from 'ElementInternals': The target element is not a form-associated custom element."), !(e.disabled || e.hasAttribute("disabled") || e.hasAttribute("readonly"));
       }
     }
-    function xe() {
+    function Ae() {
       if (typeof window > "u" || !window.ElementInternals || !HTMLElement.prototype.attachInternals)
         return !1;
       class t extends HTMLElement {
@@ -454,9 +448,9 @@ const Ne = `*,*:after,*:before{box-sizing:inherit}*,*:before,*:after{cursor:inhe
           const e = 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() {
-                j.has(this) || (j.set(this, !0), this.hasAttribute("disabled") && $(this, !0)), o != null && o.apply(this), te(this);
+                j.has(this) || (j.set(this, !0), this.hasAttribute("disabled") && $(this, !0)), s != null && s.apply(this), te(this);
               };
             }
             e.call(this, i, a, r);
@@ -468,45 +462,53 @@ const Ne = `*,*:after,*:before{box-sizing:inherit}*,*:before,*:after{cursor:inhe
               throw new Error("Failed to execute 'attachInternals' on 'HTMLElement': Unable to attach ElementInternals to non-custom elements.");
           } else
             return {};
-          if (c.has(this))
+          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);
         }), typeof Element < "u") {
           let e = function(...a) {
             const r = i.apply(this, a);
-            if (q.set(this, r), P()) {
-              const o = new MutationObserver(O);
-              window.ShadyDOM ? o.observe(this, _) : o.observe(r, _), M.set(this, o);
+            if (q.set(this, r), T()) {
+              const s = new MutationObserver(O);
+              window.ShadyDOM ? s.observe(this, _) : s.observe(r, _), P.set(this, s);
             }
             return r;
           };
           const i = Element.prototype.attachShadow;
           Element.prototype.attachShadow = e;
         }
-        P() && 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(O).observe(document.documentElement, _), typeof HTMLFormElement < "u" && Ce(), (t || typeof window < "u" && !window.CustomStateSet) && H();
       }
     }
-    return !!customElements.polyfillWrapFlushCallback || (xe() ? typeof window < "u" && !window.CustomStateSet && H(HTMLElement.prototype.attachInternals) : ne(!1)), g.forceCustomStateSetPolyfill = H, g.forceElementInternalsPolyfill = ne, Object.defineProperty(g, "__esModule", { value: !0 }), g;
+    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;
   })({});
 })();
-var Oe = Object.defineProperty, _e = Object.getOwnPropertyDescriptor, m = (g, n, l, h) => {
-  for (var c = h > 1 ? void 0 : h ? _e(n, l) : n, w = g.length - 1, k; w >= 0; w--)
-    (k = g[w]) && (c = (h ? k(n, l, c) : k(c)) || c);
-  return h && c && Oe(n, l, c), c;
+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 = {
+  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;
 };
 const ce = "pie-switch";
-class p extends Ie(Se(Fe)) {
+class p extends Ve(Te(xe)) {
   constructor() {
-    super(...arguments), this.labelPlacement = x.labelPlacement, this.checked = x.checked, this.required = x.required, this.value = x.value, this.disabled = x.disabled;
+    super(...arguments), this.labelPlacement = M.labelPlacement, this.checked = M.checked, this.required = M.required, this.value = M.value, this.disabled = M.disabled;
   }
-  firstUpdated(n) {
-    var l;
-    super.firstUpdated(n), this.handleFormAssociation(), (l = this.input) == null || l.addEventListener("invalid", (h) => {
-      this.dispatchEvent(new Event("invalid", h));
+  firstUpdated() {
+    var o;
+    this.handleFormAssociation(), (o = this.input) == null || o.addEventListener("invalid", (c) => {
+      this.dispatchEvent(new Event("invalid", c));
     });
   }
-  updated(n) {
-    super.updated(n), this.handleFormAssociation();
+  updated() {
+    this.handleFormAssociation();
   }
   /**
    * Ensures that the form value and validation state are in sync with the component.
@@ -518,10 +520,10 @@ class p extends Ie(Se(Fe)) {
    * 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(n) {
-    const { checked: l } = n == null ? void 0 : n.currentTarget;
-    this.checked = l;
-    const h = Ve(n);
+  handleChange(o) {
+    const { checked: c } = o == null ? void 0 : o.currentTarget;
+    this.checked = c;
+    const h = Le(o);
     this.dispatchEvent(h), this.handleFormAssociation();
   }
   /**
@@ -544,9 +546,9 @@ class p extends Ie(Se(Fe)) {
    * 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(n) {
-    var l;
-    (l = this.input) == null || l.setCustomValidity(n), this._internals.setValidity(this.validity, this.validationMessage, this.input);
+  setCustomValidity(o) {
+    var c;
+    (c = this.input) == null || c.setCustomValidity(o), this._internals.setValidity(this.validity, this.validationMessage, this.input);
   }
   /**
    * (Read-only) returns a ValidityState with the validity states that this element is in.
@@ -564,68 +566,75 @@ class p extends Ie(Se(Fe)) {
     return this.input.validationMessage;
   }
   /**
-   * Renders the label for a switch if provided.
-   * if invalid value is passed, nothing gets rendered
+   * If a label is provided, renders it if `labelPlacement` matches the given position.
+   * If no label is provided, or `labelPlacement` does not match the given position, nothing is rendered.
    *
    * @private
    */
-  renderSwitchLabel() {
-    const { label: n, labelPlacement: l } = this;
-    return n ? A`
-                <span data-test-id="switch-label-${l}">
-                    ${n}
-                </span>` : A``;
+  renderSwitchLabel(o) {
+    const { label: c, labelPlacement: h } = this;
+    return !c || h !== o ? L : N`
+            <span data-test-id="switch-label-${h}">
+                ${c}
+            </span>`;
+  }
+  renderAriaDescription() {
+    var o;
+    return (o = this.aria) != null && o.describedBy ? N`
+            <div
+                id="switch-description"
+                data-test-id="switch-description"
+                class="c-switch-description">
+                ${this.aria.describedBy}
+            </div>` : L;
   }
   render() {
     const {
-      labelPlacement: n,
-      aria: l,
-      checked: h,
-      required: c,
-      disabled: w,
-      isRTL: k
-    } = this, M = "switch-description";
-    return A`
+      aria: o,
+      checked: c,
+      disabled: h,
+      isRTL: l,
+      required: g
+    } = this;
+    return N`
             <label
-                class="c-switch-wrapper"
-                ?data-is-rtl=${k}
-                ?disabled=${w}>
-                ${n === "leading" ? this.renderSwitchLabel() : C}
+                class="${Se({
+      "c-switch-wrapper": !0,
+      "c-switch-wrapper--rtl": l
+    })}"
+                ?disabled=${h}>
+                ${this.renderSwitchLabel("leading")}
                 <div
                     data-test-id="switch-component"
                     class="c-switch"
-                    ?checked=${h}>
+                    ?checked=${c}>
                     <input
                         data-test-id="switch-input"
                         role="switch"
                         type="checkbox"
                         class="c-switch-input"
-                        .required=${c}
-                        .checked="${h}"
-                        .disabled="${w}"
+                        .required=${g}
+                        .checked="${c}"
+                        .disabled="${h}"
                         @change="${this.handleChange}"
-                        aria-label="${(l == null ? void 0 : l.label) || C}"
-                        aria-describedby="${l != null && l.describedBy ? M : C}">
+                        aria-label="${Ie(o == null ? void 0 : o.label)}"
+                        aria-describedby="${o != null && o.describedBy ? "switch-description" : L}">
                     <div class="c-switch-control">
-                        ${h ? A`<icon-check></icon-check>` : C}
+                        ${c ? N`<icon-check></icon-check>` : L}
                     </div>
                 </div>
-                ${n === "trailing" ? this.renderSwitchLabel() : C}
-                ${l != null && l.describedBy ? A`<div id="${M}" data-test-id="${M}" class="c-switch-description">${l == null ? void 0 : l.describedBy}</div>` : C}
-            </label>
-        `;
+                ${this.renderSwitchLabel("trailing")}
+                ${this.renderAriaDescription()}
+            </label>`;
   }
 }
-p.styles = Ae(Ne);
-m([
-  le('input[type="checkbox"]')
-], p.prototype, "input", 2);
+p.styles = Fe(Oe);
 m([
   E({ type: String })
 ], p.prototype, "label", 2);
 m([
   E({ type: String }),
-  Te(ce, Pe, x.labelPlacement)
+  Ne(ce, _e, M.labelPlacement)
 ], p.prototype, "labelPlacement", 2);
 m([
   E({ type: Object })
@@ -645,13 +654,16 @@ m([
 m([
   E({ type: Boolean, reflect: !0 })
 ], p.prototype, "disabled", 2);
+m([
+  le('input[type="checkbox"]')
+], p.prototype, "input", 2);
 m([
   le("label")
 ], p.prototype, "focusTarget", 2);
-Le(ce, p);
+Pe(ce, p);
 export {
-  ze as ON_SWITCH_CHANGED_EVENT,
+  je as ON_SWITCH_CHANGED_EVENT,
   p as PieSwitch,
-  x as defaultProps,
-  Pe as labelPlacements
+  M as defaultProps,
+  _e as labelPlacements
 };