@justeattakeaway/pie-switch 2.1.0 → 2.3.0

package/custom-elements.json

@@ -274,6 +274,10 @@
             {
               "name": "FormControlMixin",
               "package": "@justeattakeaway/pie-webc-core"
+            },
+            {
+              "name": "DelegatesFocusMixin",
+              "package": "@justeattakeaway/pie-webc-core"
             }
           ],
           "superclass": {

package/dist/index.js

@@ -1,19 +1,19 @@
 import { LitElement as Ft, nothing as L, html as N, unsafeCSS as It } from "lit";
-import { property as y, query as dt, state as St } from "lit/decorators.js";
+import { property as E, query as dt, state as St } from "lit/decorators.js";
 import { classMap as Vt } from "lit/directives/class-map.js";
 import { ifDefined as Tt } from "lit/directives/if-defined.js";
-import { FormControlMixin as Lt, wrapNativeEvent as Nt, validPropertyValues as Ot, safeCustomElement as Pt } from "@justeattakeaway/pie-webc-core";
+import { FormControlMixin as Lt, DelegatesFocusMixin as Nt, wrapNativeEvent as Ot, validPropertyValues as Pt, safeCustomElement as _t } from "@justeattakeaway/pie-webc-core";
 import "@justeattakeaway/pie-icons-webc/dist/IconCheck.js";
 const O = class O extends Ft {
   willUpdate() {
     this.getAttribute("v") || this.setAttribute("v", O.v);
   }
 };
-O.v = "2.1.0";
+O.v = "2.3.0";
 let q = O;
 (function() {
-  (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 = {
+  (function(l) {
+    const n = /* @__PURE__ */ new WeakMap(), h = /* @__PURE__ */ new WeakMap(), m = /* @__PURE__ */ new WeakMap(), c = /* @__PURE__ */ new WeakMap(), g = /* @__PURE__ */ new WeakMap(), k = /* @__PURE__ */ new WeakMap(), P = /* @__PURE__ */ new WeakMap(), y = /* @__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",
@@ -110,7 +110,7 @@ let q = O;
             s.setAttribute("internals-valid", d.validity.valid.toString()), s.setAttribute("internals-invalid", (!d.validity.valid).toString()), s.setAttribute("aria-invalid", (!d.validity.valid).toString()), C.delete(s);
           }
           if (s.localName === "form") {
-            const d = g.get(s), w = document.createTreeWalker(s, NodeFilter.SHOW_ELEMENT, {
+            const d = y.get(s), w = document.createTreeWalker(s, NodeFilter.SHOW_ELEMENT, {
               acceptNode(z) {
                 return c.has(z) && z.constructor.formAssociated && !(d && d.has(z)) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
               }
@@ -163,7 +163,7 @@ let q = O;
         t[0].id || (i = `${t[0].htmlFor}_Label`, t[0].id = i), e.setAttribute("aria-labelledby", i);
       }
     }, S = (e) => {
-      const t = Array.from(e.elements).filter((o) => !o.tagName.includes("-") && o.validity).map((o) => o.validity.valid), i = g.get(e) || [], a = Array.from(i).filter((o) => o.isConnected).map((o) => c.get(o).validity.valid), r = [...t, ...a].includes(!1);
+      const t = Array.from(e.elements).filter((o) => !o.tagName.includes("-") && o.validity).map((o) => o.validity.valid), i = y.get(e) || [], a = Array.from(i).filter((o) => o.isConnected).map((o) => c.get(o).validity.valid), r = [...t, ...a].includes(!1);
       e.toggleAttribute("internals-invalid", r), e.toggleAttribute("internals-valid", !r);
     }, ft = (e) => {
       S(V(e.target));
@@ -173,27 +173,27 @@ let q = O;
       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 = g.get(e);
+          const r = y.get(e);
           if (e.noValidate)
             return;
           r.size && Array.from(r).reverse().map((u) => c.get(u).reportValidity()).includes(!1) && i.preventDefault();
         }
       });
     }, wt = (e) => {
-      const t = g.get(e.target);
+      const t = y.get(e.target);
       t && t.size && t.forEach((i) => {
         i.constructor.formAssociated && i.formResetCallback && i.formResetCallback.apply(i);
       });
     }, et = (e, t, i) => {
       if (t) {
-        const a = g.get(t);
+        const a = y.get(t);
         if (a)
           a.add(e);
         else {
           const r = /* @__PURE__ */ new Set();
-          r.add(e), g.set(t, r), vt(t), t.addEventListener("reset", wt), t.addEventListener("input", ft), t.addEventListener("change", bt);
+          r.add(e), y.set(t, r), vt(t), t.addEventListener("reset", wt), t.addEventListener("input", ft), t.addEventListener("change", bt);
         }
-        M.set(t, { ref: e, internals: i }), e.constructor.formAssociated && e.formAssociatedCallback && setTimeout(() => {
+        k.set(t, { ref: e, internals: i }), e.constructor.formAssociated && e.formAssociatedCallback && setTimeout(() => {
           e.formAssociatedCallback.apply(e, [t]);
         }, 0), S(t);
       }
@@ -204,7 +204,7 @@ let q = O;
       if (!e.constructor.formAssociated)
         throw new i(t);
     }, it = (e, t, i) => {
-      const a = g.get(e);
+      const a = y.get(e);
       return a && a.size && a.forEach((r) => {
         c.get(r)[i]() || (t = !1);
       }), t;
@@ -307,7 +307,7 @@ let q = O;
       const { get: r } = Object.getOwnPropertyDescriptor(HTMLFormElement.prototype, "elements");
       Object.defineProperty(HTMLFormElement.prototype, "elements", {
         get(...o) {
-          const s = r.call(this, ...o), u = Array.from(g.get(this) || []);
+          const s = r.call(this, ...o), u = Array.from(y.get(this) || []);
           if (u.length === 0)
             return s;
           const d = Array.from(s).concat(u).sort((w, b) => w.compareDocumentPosition ? w.compareDocumentPosition(b) & 2 ? 1 : -1 : 0);
@@ -323,10 +323,10 @@ let q = O;
         if (!t || !t.tagName || t.tagName.indexOf("-") === -1)
           throw new TypeError("Illegal constructor");
         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);
+        this.states = new H(t), n.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 = l.get(this);
+        const t = n.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 = h.get(this);
@@ -341,19 +341,19 @@ let q = O;
         return i.valid;
       }
       get form() {
-        const t = l.get(this);
+        const t = n.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 = V(t)), i;
       }
       get labels() {
-        const t = l.get(this);
+        const t = n.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 = l.get(this);
+        const t = n.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 = j.get(this);
@@ -362,7 +362,7 @@ let q = O;
         return !i && a && (t.focus(), a.focus()), i;
       }
       setFormValue(t) {
-        const i = l.get(this);
+        const i = n.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 = Z(i, this);
@@ -377,7 +377,7 @@ let q = O;
         B.set(i, t);
       }
       setValidity(t, i, a) {
-        const r = l.get(this);
+        const r = n.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.");
         j.set(this, a);
@@ -390,22 +390,22 @@ let q = O;
         const { valid: d } = Et(o, u, this.form);
         if (!d && !i)
           throw new DOMException("Failed to execute 'setValidity' on 'ElementInternals': The second argument should not be empty if one or more flags in the first argument are true.");
-        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);
+        g.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 = l.get(this), i = U.get(t);
+        const t = n.get(this), i = U.get(t);
         return i || null;
       }
       get validationMessage() {
-        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);
+        const t = n.get(this);
+        return v(t, "Failed to read the 'validationMessage' property from 'ElementInternals': The target element is not a form-associated custom element."), g.get(this);
       }
       get validity() {
-        const t = l.get(this);
+        const t = n.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 = l.get(this);
+        const t = n.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"));
       }
     }
@@ -477,29 +477,29 @@ let q = O;
         T() && typeof document < "u" && new MutationObserver(_).observe(document.documentElement, $), typeof HTMLFormElement < "u" && At(), (e || typeof window < "u" && !window.CustomStateSet) && W();
       }
     }
-    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;
+    return !!customElements.polyfillWrapFlushCallback || (Ct() ? typeof window < "u" && !window.CustomStateSet && W(HTMLElement.prototype.attachInternals) : ct(!1)), l.forceCustomStateSetPolyfill = W, l.forceElementInternalsPolyfill = ct, Object.defineProperty(l, "__esModule", { value: !0 }), l;
   })({});
 })();
-const _t = "*,*:after,*:before{box-sizing:inherit}:host{display:block}*,*:before,*:after{cursor:inherit}.c-switch-wrapper{display:inline-flex;align-items:center;gap:var(--dt-spacing-b);vertical-align:top;font-family:var(--dt-font-body-l-family);cursor:pointer}.c-switch-wrapper[disabled]{cursor:not-allowed}.c-switch{--int-states-mixin-bg-color: var(--dt-color-interactive-form);--switch-bg-color--checked: var(--dt-color-interactive-brand);--switch-bg-color--disabled: var(--dt-color-disabled-01);--switch-width: 48px;--switch-height: 24px;--switch-control-size: 20px;--switch-padding: 2px;--switch-radius: var(--dt-radius-rounded-e);--switch-translation: calc(var(--switch-width) - var(--switch-control-size) - 2 * var(--switch-padding));position:relative;display:flex;width:var(--switch-width);height:var(--switch-height);flex-shrink:0;padding:var(--switch-padding);border-radius:var(--switch-radius);background-color:var(--int-states-mixin-bg-color)}.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[checked]{--int-states-mixin-bg-color: var(--dt-color-interactive-brand)}.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:has(.c-switch-input:focus-visible){box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer);outline:none}.c-switch-input{position:absolute;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)}.c-switch-wrapper:dir(rtl) .c-switch-control{position:absolute;left:initial;right:2px}.c-switch-control .c-pieIcon--check{vertical-align:top}.c-switch-input:checked+.c-switch-control{transform:translate(var(--switch-translation))}.c-switch-input:checked+.c-switch-control .c-pieIcon--check{color:var(--dt-color-interactive-brand)}.c-switch-input:disabled~.c-switch-control{color:var(--switch-bg-color--disabled)}.c-switch-input:disabled~.c-switch-control .c-pieIcon--check{color:var(--switch-bg-color--disabled)}.c-switch-label{color:var(--dt-color-content-default)}.c-switch-description{position:absolute;display:block;height:1px;width:1px;overflow:hidden;padding:1px;white-space:nowrap}@media (prefers-reduced-motion: no-preference){.c-switch-wrapper--allow-animation .c-switch{transition:background-color .15s cubic-bezier(.4,0,.9,1) 0s}}@media (prefers-reduced-motion: no-preference){.c-switch-wrapper--allow-animation .c-switch[checked]{transition:background-color .15s cubic-bezier(.4,0,.9,1) 0s}}@media (prefers-reduced-motion: no-preference){.c-switch-wrapper--allow-animation .c-switch-control{transition:transform .15s cubic-bezier(.4,0,.9,1) 0s}}@media (prefers-reduced-motion: no-preference){.c-switch-input:checked+.c-switch-wrapper--allow-animation .c-switch-control{transition:transform .15s cubic-bezier(.4,0,.9,1) 0s}}@media (prefers-reduced-motion: no-preference){.c-switch-input:checked+.c-switch-wrapper--allow-animation .c-switch-control .c-pieIcon--check{transition:color .15s cubic-bezier(.4,0,.9,1) 0s}}@media (prefers-reduced-motion: no-preference){.c-switch-input:disabled~.c-switch-wrapper--allow-animation .c-switch-control .c-pieIcon--check{transition:color .15s cubic-bezier(.4,0,.9,1) 0s}}.c-switch-wrapper:dir(rtl) .c-switch-input:checked+.c-switch-control{transform:translate(calc(-1 * var(--switch-translation)))}", $t = ["leading", "trailing"], Gt = "change", k = {
+const $t = "*,*:after,*:before{box-sizing:inherit}:host{display:block}*,*:before,*:after{cursor:inherit}.c-switch-wrapper{display:inline-flex;align-items:center;gap:var(--dt-spacing-b);vertical-align:top;font-family:var(--dt-font-body-l-family);cursor:pointer}.c-switch-wrapper[disabled]{cursor:not-allowed}.c-switch{--int-states-mixin-bg-color: var(--dt-color-interactive-form);--switch-bg-color--checked: var(--dt-color-interactive-brand);--switch-bg-color--disabled: var(--dt-color-disabled-01);--switch-width: 48px;--switch-height: 24px;--switch-control-size: 20px;--switch-padding: 2px;--switch-radius: var(--dt-radius-rounded-e);--switch-translation: calc(var(--switch-width) - var(--switch-control-size) - 2 * var(--switch-padding));position:relative;display:flex;width:var(--switch-width);height:var(--switch-height);flex-shrink:0;padding:var(--switch-padding);border-radius:var(--switch-radius);background-color:var(--int-states-mixin-bg-color)}.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[checked]{--int-states-mixin-bg-color: var(--dt-color-interactive-brand)}.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:has(.c-switch-input:focus-visible){box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer);outline:none}.c-switch-input{position:absolute;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)}.c-switch-wrapper:dir(rtl) .c-switch-control{position:absolute;left:initial;right:2px}.c-switch-control .c-pieIcon--check{vertical-align:top}.c-switch-input:checked+.c-switch-control{transform:translate(var(--switch-translation))}.c-switch-input:checked+.c-switch-control .c-pieIcon--check{color:var(--dt-color-interactive-brand)}.c-switch-input:disabled~.c-switch-control{color:var(--switch-bg-color--disabled)}.c-switch-input:disabled~.c-switch-control .c-pieIcon--check{color:var(--switch-bg-color--disabled)}.c-switch-label{color:var(--dt-color-content-default-solid)}.c-switch-description{position:absolute;display:block;height:1px;width:1px;overflow:hidden;padding:1px;white-space:nowrap}@media (prefers-reduced-motion: no-preference){.c-switch-wrapper--allow-animation .c-switch{transition:background-color .15s cubic-bezier(.4,0,.9,1) 0s}}@media (prefers-reduced-motion: no-preference){.c-switch-wrapper--allow-animation .c-switch[checked]{transition:background-color .15s cubic-bezier(.4,0,.9,1) 0s}}@media (prefers-reduced-motion: no-preference){.c-switch-wrapper--allow-animation .c-switch-control{transition:transform .15s cubic-bezier(.4,0,.9,1) 0s}}@media (prefers-reduced-motion: no-preference){.c-switch-input:checked+.c-switch-wrapper--allow-animation .c-switch-control{transition:transform .15s cubic-bezier(.4,0,.9,1) 0s}}@media (prefers-reduced-motion: no-preference){.c-switch-input:checked+.c-switch-wrapper--allow-animation .c-switch-control .c-pieIcon--check{transition:color .15s cubic-bezier(.4,0,.9,1) 0s}}@media (prefers-reduced-motion: no-preference){.c-switch-input:disabled~.c-switch-wrapper--allow-animation .c-switch-control .c-pieIcon--check{transition:color .15s cubic-bezier(.4,0,.9,1) 0s}}.c-switch-wrapper:dir(rtl) .c-switch-input:checked+.c-switch-control{transform:translate(calc(-1 * var(--switch-translation)))}", Dt = ["leading", "trailing"], Yt = "change", M = {
   checked: !1,
   disabled: !1,
   labelPlacement: "leading",
   required: !1,
   value: "on"
 };
-var Dt = Object.defineProperty, Rt = Object.getOwnPropertyDescriptor, f = (n, l, h, m) => {
-  for (var c = m > 1 ? void 0 : m ? Rt(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 && Dt(l, h, c), c;
+var Rt = Object.defineProperty, Ht = Object.getOwnPropertyDescriptor, f = (l, n, h, m) => {
+  for (var c = m > 1 ? void 0 : m ? Ht(n, h) : n, g = l.length - 1, k; g >= 0; g--)
+    (k = l[g]) && (c = (m ? k(n, h, c) : k(c)) || c);
+  return m && c && Rt(n, h, c), c;
 };
-const Ht = "pie-switch";
-let p = class extends Lt(q) {
+const Wt = "pie-switch";
+let p = class extends Lt(Nt(q)) {
   constructor() {
-    super(...arguments), this.labelPlacement = k.labelPlacement, this.checked = k.checked, this.required = k.required, this.value = k.value, this.disabled = k.disabled, this._isAnimationAllowed = !1;
+    super(...arguments), this.labelPlacement = M.labelPlacement, this.checked = M.checked, this.required = M.required, this.value = M.value, this.disabled = M.disabled, this._isAnimationAllowed = !1;
   }
   firstUpdated() {
-    this.handleFormAssociation(), this.input.addEventListener("invalid", (n) => {
-      this.dispatchEvent(new Event("invalid", n));
+    this.handleFormAssociation(), this.input.addEventListener("invalid", (l) => {
+      this.dispatchEvent(new Event("invalid", l));
     });
   }
   updated() {
@@ -515,10 +515,10 @@ let p = class extends Lt(q) {
    * 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 = Nt(n);
+  handleChange(l) {
+    const { checked: n } = l == null ? void 0 : l.currentTarget;
+    this.checked = n;
+    const h = Ot(l);
     this._isAnimationAllowed || (this._isAnimationAllowed = !0), this.dispatchEvent(h), this.handleFormAssociation();
   }
   /**
@@ -541,8 +541,8 @@ let p = class extends Lt(q) {
    * 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) {
-    this.input.setCustomValidity(n), this._internals.setValidity(this.validity, this.validationMessage, this.input);
+  setCustomValidity(l) {
+    this.input.setCustomValidity(l), this._internals.setValidity(this.validity, this.validationMessage, this.input);
   }
   /**
    * (Read-only) returns a ValidityState with the validity states that this element is in.
@@ -565,19 +565,21 @@ let p = class extends Lt(q) {
    *
    * @private
    */
-  renderSwitchLabel(n) {
-    const { label: l, labelPlacement: h } = this;
-    return !l || h !== n ? L : N`
+  renderSwitchLabel(l) {
+    const { label: n, labelPlacement: h } = this;
+    return !n || h !== l ? L : N`
             <span
+                aria-hidden="true"
                 data-test-id="switch-label-${h}"
                 class="c-switch-label">
-                ${l}
+                ${n}
             </span>`;
   }
   renderAriaDescription() {
-    var n;
-    return (n = this.aria) != null && n.describedBy ? N`
+    var l;
+    return (l = this.aria) != null && l.describedBy ? N`
             <div
+                aria-hidden="true"
                 id="switch-description"
                 data-test-id="switch-description"
                 class="c-switch-description">
@@ -586,37 +588,38 @@ let p = class extends Lt(q) {
   }
   render() {
     const {
+      label: l,
       aria: n,
-      checked: l,
-      disabled: h,
-      required: m,
-      _isAnimationAllowed: c
+      checked: h,
+      disabled: m,
+      required: c,
+      _isAnimationAllowed: g
     } = this;
     return N`
             <label
                 class="${Vt({
       "c-switch-wrapper": !0,
-      "c-switch-wrapper--allow-animation": c
+      "c-switch-wrapper--allow-animation": g
     })}"
-                ?disabled=${h}>
+                ?disabled=${m}>
                 ${this.renderSwitchLabel("leading")}
                 <div
                     data-test-id="switch-component"
                     class="c-switch"
-                    ?checked=${l}>
+                    ?checked=${h}>
                     <input
                         data-test-id="switch-input"
                         role="switch"
                         type="checkbox"
                         class="c-switch-input"
-                        .required=${m}
-                        .checked="${l}"
-                        .disabled="${h}"
+                        .required=${c}
+                        .checked="${h}"
+                        .disabled="${m}"
                         @change="${this.handleChange}"
-                        aria-label="${Tt(n == null ? void 0 : n.label)}"
+                        aria-label="${Tt((n == null ? void 0 : n.label) || l)}"
                         aria-describedby="${n != null && n.describedBy ? "switch-description" : L}">
                     <div class="c-switch-control">
-                        ${l ? N`<icon-check></icon-check>` : L}
+                        ${h ? N`<icon-check></icon-check>` : L}
                     </div>
                 </div>
                 ${this.renderSwitchLabel("trailing")}
@@ -624,31 +627,31 @@ let p = class extends Lt(q) {
             </label>`;
   }
 };
-p.styles = It(_t);
+p.styles = It($t);
 f([
-  y({ type: String })
+  E({ type: String })
 ], p.prototype, "label", 2);
 f([
-  y({ type: String }),
-  Ot(Ht, $t, k.labelPlacement)
+  E({ type: String }),
+  Pt(Wt, Dt, M.labelPlacement)
 ], p.prototype, "labelPlacement", 2);
 f([
-  y({ type: Object })
+  E({ type: Object })
 ], p.prototype, "aria", 2);
 f([
-  y({ type: Boolean, reflect: !0 })
+  E({ type: Boolean, reflect: !0 })
 ], p.prototype, "checked", 2);
 f([
-  y({ type: Boolean, reflect: !0 })
+  E({ type: Boolean, reflect: !0 })
 ], p.prototype, "required", 2);
 f([
-  y({ type: String })
+  E({ type: String })
 ], p.prototype, "value", 2);
 f([
-  y({ type: String, reflect: !0 })
+  E({ type: String, reflect: !0 })
 ], p.prototype, "name", 2);
 f([
-  y({ type: Boolean, reflect: !0 })
+  E({ type: Boolean, reflect: !0 })
 ], p.prototype, "disabled", 2);
 f([
   dt('input[type="checkbox"]')
@@ -660,11 +663,11 @@ f([
   St()
 ], p.prototype, "_isAnimationAllowed", 2);
 p = f([
-  Pt("pie-switch")
+  _t("pie-switch")
 ], p);
 export {
-  Gt as ON_SWITCH_CHANGED_EVENT,
+  Yt as ON_SWITCH_CHANGED_EVENT,
   p as PieSwitch,
-  k as defaultProps,
-  $t as labelPlacements
+  M as defaultProps,
+  Dt as labelPlacements
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-switch",
   "description": "PIE Design System Switch built using Web Components",
-  "version": "2.1.0",
+  "version": "2.3.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/justeattakeaway/pie",
@@ -40,14 +40,14 @@
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "0.9.0",
     "@justeattakeaway/pie-components-config": "0.21.0",
-    "@justeattakeaway/pie-css": "0.19.0",
+    "@justeattakeaway/pie-css": "0.22.0",
     "@justeattakeaway/pie-monorepo-utils": "0.7.0",
     "@justeattakeaway/pie-wrapper-react": "0.14.3",
     "cem-plugin-module-file-extensions": "0.0.5"
   },
   "dependencies": {
-    "@justeattakeaway/pie-icons-webc": "1.14.2",
-    "@justeattakeaway/pie-webc-core": "1.1.0",
+    "@justeattakeaway/pie-icons-webc": "1.15.0",
+    "@justeattakeaway/pie-webc-core": "2.0.0",
     "element-internals-polyfill": "1.3.11"
   },
   "volta": {

package/src/index.ts

@@ -10,6 +10,7 @@ import 'element-internals-polyfill';
 import {
     validPropertyValues,
     FormControlMixin,
+    DelegatesFocusMixin,
     wrapNativeEvent,
     safeCustomElement,
     type PIEInputElement,
@@ -29,7 +30,7 @@ const componentSelector = 'pie-switch';
  * @event {CustomEvent} change - when the switch checked state is changed.
  */
 @safeCustomElement('pie-switch')
-export class PieSwitch extends FormControlMixin(PieElement) implements SwitchProps, PIEInputElement {
+export class PieSwitch extends FormControlMixin(DelegatesFocusMixin(PieElement)) implements SwitchProps, PIEInputElement {
     @property({ type: String })
     public label: SwitchProps['label'];
 
@@ -172,8 +173,11 @@ export class PieSwitch extends FormControlMixin(PieElement) implements SwitchPro
             return nothing;
         }
 
+        // Using aria-hidden here to prevent the label from potentially being narrated twice by screen readers such as Apple VoiceOver.
+        // Instead, we apply the label as an aria-label attribute on the input (if no aria.label prop is provided).
         return html`
             <span
+                aria-hidden="true"
                 data-test-id="switch-label-${labelPlacement}"
                 class="c-switch-label">
                 ${label}
@@ -185,8 +189,11 @@ export class PieSwitch extends FormControlMixin(PieElement) implements SwitchPro
             return nothing;
         }
 
+        // we apply aria-hidden to the element containing the description because it prevent some screen readers such as Apple VoiceOver from announcing the description once
+        // on the input and again separately. The description is still announced once, when the input is focused/selected.
         return html`
             <div
+                aria-hidden="true"
                 id="switch-description"
                 data-test-id="switch-description"
                 class="c-switch-description">
@@ -196,6 +203,7 @@ export class PieSwitch extends FormControlMixin(PieElement) implements SwitchPro
 
     render () {
         const {
+            label,
             aria,
             checked,
             disabled,
@@ -226,7 +234,7 @@ export class PieSwitch extends FormControlMixin(PieElement) implements SwitchPro
                         .checked="${checked}"
                         .disabled="${disabled}"
                         @change="${this.handleChange}"
-                        aria-label="${ifDefined(aria?.label)}"
+                        aria-label="${ifDefined(aria?.label || label)}"
                         aria-describedby="${aria?.describedBy ? 'switch-description' : nothing}">
                     <div class="c-switch-control">
                         ${checked ? html`<icon-check></icon-check>` : nothing}

package/src/switch.scss

@@ -123,7 +123,7 @@
 }
 
 .c-switch-label {
-    color: var(--dt-color-content-default);
+    color: var(--dt-color-content-default-solid);
 }
 
 // The description is only required for screen readers so we need to visually hide the description