@justeattakeaway/pie-switch 2.2.0 → 2.3.0

package/custom-elements.json

@@ -148,15 +148,6 @@
               "privacy": "private",
               "default": "false"
             },
-            {
-              "kind": "field",
-              "name": "shadowRootOptions",
-              "type": {
-                "text": "object"
-              },
-              "static": true,
-              "default": "{ ...LitElement.shadowRootOptions, delegatesFocus: true }"
-            },
             {
               "kind": "method",
               "name": "handleFormAssociation",
@@ -283,6 +274,10 @@
             {
               "name": "FormControlMixin",
               "package": "@justeattakeaway/pie-webc-core"
+            },
+            {
+              "name": "DelegatesFocusMixin",
+              "package": "@justeattakeaway/pie-webc-core"
             }
           ],
           "superclass": {

package/dist/index.d.ts

@@ -40,12 +40,6 @@ export declare class PieSwitch extends PieSwitch_base implements SwitchProps, PI
     private input;
     focusTarget: HTMLElement;
     private _isAnimationAllowed;
-    static shadowRootOptions: {
-        delegatesFocus: boolean;
-        mode: ShadowRootMode;
-        serializable?: boolean;
-        slotAssignment?: SlotAssignmentMode;
-    };
     protected firstUpdated(): void;
     protected updated(): void;
     static styles: CSSResult;

package/dist/index.js

@@ -1,15 +1,15 @@
-import { LitElement as dt, nothing as L, html as N, unsafeCSS as It } from "lit";
-import { property as E, query as ht, state as St } from "lit/decorators.js";
+import { LitElement as Ft, nothing as L, html as N, unsafeCSS as It } from "lit";
+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 dt {
+const O = class O extends Ft {
   willUpdate() {
     this.getAttribute("v") || this.setAttribute("v", O.v);
   }
 };
-O.v = "2.2.0";
+O.v = "2.3.0";
 let q = O;
 (function() {
   (function(l) {
@@ -56,7 +56,7 @@ let q = O;
       ariaValueNow: "aria-valuenow",
       ariaValueText: "aria-valuetext",
       role: "role"
-    }, ut = (e, t) => {
+    }, ht = (e, t) => {
       for (let i in F) {
         t[i] = null;
         let a = null;
@@ -84,11 +84,11 @@ let q = O;
       let a = i.nextNode();
       const r = !t || e.disabled;
       for (; a; )
-        a.formDisabledCallback && r && R(a, e.disabled), a = i.nextNode();
+        a.formDisabledCallback && r && D(a, e.disabled), a = i.nextNode();
     }, Q = { attributes: !0, attributeFilter: ["disabled", "name"] }, I = T() ? new MutationObserver((e) => {
       for (const t of e) {
         const i = t.target;
-        if (t.attributeName === "disabled" && (i.constructor.formAssociated ? R(i, i.hasAttribute("disabled")) : i.localName === "fieldset" && J(i)), t.attributeName === "name" && i.constructor.formAssociated) {
+        if (t.attributeName === "disabled" && (i.constructor.formAssociated ? D(i, i.hasAttribute("disabled")) : i.localName === "fieldset" && J(i)), t.attributeName === "name" && i.constructor.formAssociated) {
           const a = c.get(i), r = B.get(i);
           a.setFormValue(r);
         }
@@ -126,7 +126,7 @@ let q = O;
         });
       });
     }
-    function pt(e) {
+    function ut(e) {
       e.forEach((t) => {
         const { removedNodes: i } = t;
         i.forEach((a) => {
@@ -135,16 +135,16 @@ let q = O;
         });
       });
     }
-    const mt = (e) => {
+    const pt = (e) => {
       var t, i;
-      const a = new MutationObserver(pt);
+      const a = new MutationObserver(ut);
       !((t = window == null ? void 0 : window.ShadyDOM) === null || t === void 0) && t.inUse && e.mode && e.host && (e = e.host), (i = a.observe) === null || i === void 0 || i.call(a, e, { childList: !0 }), K.set(e, a);
     };
     T() && new MutationObserver(_);
     const $ = {
       childList: !0,
       subtree: !0
-    }, R = (e, t) => {
+    }, D = (e, t) => {
       e.toggleAttribute("internals-disabled", t), t ? e.setAttribute("aria-disabled", "true") : e.removeAttribute("aria-disabled"), e.formDisabledCallback && e.formDisabledCallback.apply(e, [t]);
     }, X = (e) => {
       m.get(e).forEach((i) => {
@@ -153,7 +153,7 @@ let q = O;
     }, Z = (e, t) => {
       const i = document.createElement("input");
       return i.type = "hidden", i.name = e.getAttribute("name"), e.after(i), m.get(t).push(i), i;
-    }, ft = (e, t) => {
+    }, mt = (e, t) => {
       var i;
       m.set(t, []), (i = I.observe) === null || i === void 0 || i.call(I, e, Q);
     }, tt = (e, t) => {
@@ -165,11 +165,11 @@ let q = O;
     }, S = (e) => {
       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));
     }, bt = (e) => {
       S(V(e.target));
     }, vt = (e) => {
-      S(V(e.target));
-    }, wt = (e) => {
       const t = ["button[type=submit]", "input[type=submit]", "button:not([type])"].map((i) => `${i}:not([disabled])`).map((i) => `${i}:not([form])${e.id ? `,${i}[form='${e.id}']` : ""}`).join(",");
       e.addEventListener("click", (i) => {
         if (i.target.closest(t)) {
@@ -179,7 +179,7 @@ let q = O;
           r.size && Array.from(r).reverse().map((u) => c.get(u).reportValidity()).includes(!1) && i.preventDefault();
         }
       });
-    }, gt = (e) => {
+    }, wt = (e) => {
       const t = y.get(e.target);
       t && t.size && t.forEach((i) => {
         i.constructor.formAssociated && i.formResetCallback && i.formResetCallback.apply(i);
@@ -191,7 +191,7 @@ let q = O;
           a.add(e);
         else {
           const r = /* @__PURE__ */ new Set();
-          r.add(e), y.set(t, r), wt(t), t.addEventListener("reset", gt), t.addEventListener("input", bt), t.addEventListener("change", vt);
+          r.add(e), y.set(t, r), vt(t), t.addEventListener("reset", wt), t.addEventListener("input", ft), t.addEventListener("change", bt);
         }
         k.set(t, { ref: e, internals: i }), e.constructor.formAssociated && e.formAssociatedCallback && setTimeout(() => {
           e.formAssociatedCallback.apply(e, [t]);
@@ -217,17 +217,17 @@ let q = O;
     function T() {
       return typeof MutationObserver < "u";
     }
-    class yt {
+    class gt {
       constructor() {
         this.badInput = !1, this.customError = !1, this.patternMismatch = !1, this.rangeOverflow = !1, this.rangeUnderflow = !1, this.stepMismatch = !1, this.tooLong = !1, this.tooShort = !1, this.typeMismatch = !1, this.valid = !0, this.valueMissing = !1, Object.seal(this);
       }
     }
-    const Et = (e) => (e.badInput = !1, e.customError = !1, e.patternMismatch = !1, e.rangeOverflow = !1, e.rangeUnderflow = !1, e.stepMismatch = !1, e.tooLong = !1, e.tooShort = !1, e.typeMismatch = !1, e.valid = !0, e.valueMissing = !1, e), kt = (e, t, i) => (e.valid = Mt(t), Object.keys(t).forEach((a) => e[a] = t[a]), i && S(i), e), Mt = (e) => {
+    const yt = (e) => (e.badInput = !1, e.customError = !1, e.patternMismatch = !1, e.rangeOverflow = !1, e.rangeUnderflow = !1, e.stepMismatch = !1, e.tooLong = !1, e.tooShort = !1, e.typeMismatch = !1, e.valid = !0, e.valueMissing = !1, e), Et = (e, t, i) => (e.valid = kt(t), Object.keys(t).forEach((a) => e[a] = t[a]), i && S(i), e), kt = (e) => {
       let t = !0;
       for (let i in e)
         i !== "valid" && e[i] !== !1 && (t = !1);
       return t;
-    }, D = /* @__PURE__ */ new WeakMap();
+    }, R = /* @__PURE__ */ new WeakMap();
     function rt(e, t) {
       e.toggleAttribute(t, !0), e.part && e.part.add(t);
     }
@@ -238,12 +238,12 @@ let q = O;
       constructor(t) {
         if (super(), !t || !t.tagName || t.tagName.indexOf("-") === -1)
           throw new TypeError("Illegal constructor");
-        D.set(this, t);
+        R.set(this, t);
       }
       add(t) {
         if (!/^--/.test(t) || typeof t != "string")
           throw new DOMException(`Failed to execute 'add' on 'CustomStateSet': The specified value ${t} must start with '--'.`);
-        const i = super.add(t), a = D.get(this), r = `state${t}`;
+        const i = super.add(t), a = R.get(this), r = `state${t}`;
         return a.isConnected ? rt(a, r) : setTimeout(() => {
           rt(a, r);
         }), i;
@@ -254,7 +254,7 @@ let q = O;
         super.clear();
       }
       delete(t) {
-        const i = super.delete(t), a = D.get(this);
+        const i = super.delete(t), a = R.get(this);
         return a.isConnected ? (a.toggleAttribute(`state${t}`, !1), a.part && a.part.remove(`state${t}`)) : setTimeout(() => {
           a.toggleAttribute(`state${t}`, !1), a.part && a.part.remove(`state${t}`);
         }), i;
@@ -264,14 +264,14 @@ let q = O;
       if (typeof t == "function" ? e !== t || !a : !t.has(e)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
       return i === "m" ? a : i === "a" ? a.call(e) : a ? a.value : t.get(e);
     }
-    function xt(e, t, i, a, r) {
+    function Mt(e, t, i, a, r) {
       if (typeof t == "function" ? e !== t || !0 : !t.has(e)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
       return t.set(e, i), i;
     }
     var x;
-    class At {
+    class xt {
       constructor(t) {
-        x.set(this, void 0), xt(this, x, t);
+        x.set(this, void 0), Mt(this, x, t);
         for (let i = 0; i < t.length; i++) {
           let a = t[i];
           this[i] = a, a.hasAttribute("name") && (this[a.getAttribute("name")] = a);
@@ -291,7 +291,7 @@ let q = O;
         return this[t] == null ? null : this[t];
       }
     }
-    function Ct() {
+    function At() {
       const e = HTMLFormElement.prototype.checkValidity;
       HTMLFormElement.prototype.checkValidity = i;
       const t = HTMLFormElement.prototype.reportValidity;
@@ -311,7 +311,7 @@ let q = O;
           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);
-          return new At(d);
+          return new xt(d);
         }
       });
     }
@@ -322,8 +322,8 @@ let q = O;
       constructor(t) {
         if (!t || !t.tagName || t.tagName.indexOf("-") === -1)
           throw new TypeError("Illegal constructor");
-        const i = t.getRootNode(), a = new yt();
-        this.states = new H(t), n.set(this, t), h.set(this, a), c.set(t, this), ut(t, this), ft(t, this), Object.seal(this), i instanceof DocumentFragment && mt(i);
+        const i = t.getRootNode(), a = new gt();
+        this.states = new H(t), 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 = n.get(this);
@@ -384,10 +384,10 @@ let q = O;
         const o = h.get(this), s = {};
         for (const w in t)
           s[w] = t[w];
-        Object.keys(s).length === 0 && Et(o);
+        Object.keys(s).length === 0 && yt(o);
         const u = Object.assign(Object.assign({}, o), s);
         delete u.valid;
-        const { valid: d } = kt(o, u, this.form);
+        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.");
         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);
@@ -409,7 +409,7 @@ let q = O;
         return v(t, "Failed to read the 'willValidate' property from 'ElementInternals': The target element is not a form-associated custom element."), !(t.disabled || t.hasAttribute("disabled") || t.hasAttribute("readonly"));
       }
     }
-    function Ft() {
+    function Ct() {
       if (typeof window > "u" || !window.ElementInternals || !HTMLElement.prototype.attachInternals)
         return !1;
       class e extends HTMLElement {
@@ -448,7 +448,7 @@ let q = O;
             if (a.formAssociated) {
               const o = a.prototype.connectedCallback;
               a.prototype.connectedCallback = function() {
-                G.has(this) || (G.set(this, !0), this.hasAttribute("disabled") && R(this, !0)), o != null && o.apply(this), at(this);
+                G.has(this) || (G.set(this, !0), this.hasAttribute("disabled") && D(this, !0)), o != null && o.apply(this), at(this);
               };
             }
             t.call(this, i, a, r);
@@ -474,26 +474,26 @@ let q = O;
           const i = Element.prototype.attachShadow;
           Element.prototype.attachShadow = t;
         }
-        T() && typeof document < "u" && new MutationObserver(_).observe(document.documentElement, $), typeof HTMLFormElement < "u" && Ct(), (e || typeof window < "u" && !window.CustomStateSet) && W();
+        T() && typeof document < "u" && new MutationObserver(_).observe(document.documentElement, $), typeof HTMLFormElement < "u" && At(), (e || typeof window < "u" && !window.CustomStateSet) && W();
       }
     }
-    return !!customElements.polyfillWrapFlushCallback || (Ft() ? typeof window < "u" && !window.CustomStateSet && W(HTMLElement.prototype.attachInternals) : ct(!1)), l.forceCustomStateSetPolyfill = W, l.forceElementInternalsPolyfill = ct, Object.defineProperty(l, "__esModule", { value: !0 }), l;
+    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", M = {
+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 Rt = Object.defineProperty, Dt = Object.getOwnPropertyDescriptor, f = (l, n, h, m) => {
-  for (var c = m > 1 ? void 0 : m ? Dt(n, h) : n, g = l.length - 1, k; g >= 0; g--)
+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 = M.labelPlacement, this.checked = M.checked, this.required = M.required, this.value = M.value, this.disabled = M.disabled, this._isAnimationAllowed = !1;
   }
@@ -518,7 +518,7 @@ let p = class extends Lt(q) {
   handleChange(l) {
     const { checked: n } = l == null ? void 0 : l.currentTarget;
     this.checked = n;
-    const h = Nt(l);
+    const h = Ot(l);
     this._isAnimationAllowed || (this._isAnimationAllowed = !0), this.dispatchEvent(h), this.handleFormAssociation();
   }
   /**
@@ -627,14 +627,13 @@ let p = class extends Lt(q) {
             </label>`;
   }
 };
-p.shadowRootOptions = { ...dt.shadowRootOptions, delegatesFocus: !0 };
-p.styles = It(_t);
+p.styles = It($t);
 f([
   E({ type: String })
 ], p.prototype, "label", 2);
 f([
   E({ type: String }),
-  Ot(Ht, $t, M.labelPlacement)
+  Pt(Wt, Dt, M.labelPlacement)
 ], p.prototype, "labelPlacement", 2);
 f([
   E({ type: Object })
@@ -655,20 +654,20 @@ f([
   E({ type: Boolean, reflect: !0 })
 ], p.prototype, "disabled", 2);
 f([
-  ht('input[type="checkbox"]')
+  dt('input[type="checkbox"]')
 ], p.prototype, "input", 2);
 f([
-  ht("label")
+  dt("label")
 ], p.prototype, "focusTarget", 2);
 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,
   M as defaultProps,
-  $t as labelPlacements
+  Dt as labelPlacements
 };

package/dist/react.d.ts

@@ -43,12 +43,6 @@ declare class PieSwitch_2 extends PieSwitch_base implements SwitchProps, PIEInpu
     private input;
     focusTarget: HTMLElement;
     private _isAnimationAllowed;
-    static shadowRootOptions: {
-        delegatesFocus: boolean;
-        mode: ShadowRootMode;
-        serializable?: boolean;
-        slotAssignment?: SlotAssignmentMode;
-    };
     protected firstUpdated(): void;
     protected updated(): void;
     static styles: CSSResult;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-switch",
   "description": "PIE Design System Switch built using Web Components",
-  "version": "2.2.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.20.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

@@ -1,6 +1,5 @@
 import {
     html, unsafeCSS, nothing,
-    LitElement,
 } from 'lit';
 import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElement';
 import { property, query, state } from 'lit/decorators.js';
@@ -11,6 +10,7 @@ import 'element-internals-polyfill';
 import {
     validPropertyValues,
     FormControlMixin,
+    DelegatesFocusMixin,
     wrapNativeEvent,
     safeCustomElement,
     type PIEInputElement,
@@ -30,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'];
 
@@ -65,8 +65,6 @@ export class PieSwitch extends FormControlMixin(PieElement) implements SwitchPro
     @state()
     private _isAnimationAllowed = false;
 
-    static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true };
-
     protected firstUpdated (): void {
         this.handleFormAssociation();
         // This ensures that invalid events triggered by checkValidity() are propagated to the custom element

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