@justeattakeaway/pie-switch 0.25.0 → 0.27.0

package/custom-elements.json

@@ -146,6 +146,14 @@
               "attribute": "disabled",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "focusTarget",
+              "type": {
+                "text": "HTMLElement"
+              },
+              "privacy": "public"
+            },
             {
               "kind": "method",
               "name": "handleFormAssociation",

package/dist/index.d.ts

@@ -2,6 +2,7 @@ import type { CSSResult } from 'lit';
 import type { FormControlInterface } from '@justeattakeaway/pie-webc-core';
 import type { GenericConstructor } from '@justeattakeaway/pie-webc-core';
 import type { LitElement } from 'lit';
+import type { PIEInputElement } from '@justeattakeaway/pie-webc-core';
 import type { PropertyValues } from 'lit';
 import type { RTLInterface } from '@justeattakeaway/pie-webc-core';
 import type { TemplateResult } from 'lit';
@@ -26,7 +27,7 @@ export declare const ON_SWITCH_CHANGED_EVENT = "change";
  * @tagname pie-switch
  * @event {CustomEvent} change - when the switch checked state is changed.
  */
-export declare class PieSwitch extends PieSwitch_base implements SwitchProps {
+export declare class PieSwitch extends PieSwitch_base implements SwitchProps, PIEInputElement {
     private input?;
     protected firstUpdated(_changedProperties: PropertyValues<this>): void;
     protected updated(_changedProperties: PropertyValues<this>): void;
@@ -38,6 +39,7 @@ export declare class PieSwitch extends PieSwitch_base implements SwitchProps {
     value: string;
     name?: string;
     disabled: boolean;
+    focusTarget: HTMLElement;
     static styles: CSSResult;
     /**
      * Ensures that the form value and validation state are in sync with the component.

package/dist/index.js

@@ -1,12 +1,12 @@
-import { LitElement as Ct, html as A, nothing as x, unsafeCSS as xt } from "lit";
-import { query as Ft, property as E } from "lit/decorators.js";
-import { FormControlMixin as At, RtlMixin as It, wrapNativeEvent as St, validPropertyValues as Vt, defineCustomElement as Tt } from "@justeattakeaway/pie-webc-core";
+import { LitElement as xt, html as A, nothing as x, unsafeCSS as Ft } from "lit";
+import { query as nt, property as E } from "lit/decorators.js";
+import { FormControlMixin as At, RtlMixin as It, wrapNativeEvent as St, validPropertyValues as Tt, defineCustomElement as Vt } from "@justeattakeaway/pie-webc-core";
 import "@justeattakeaway/pie-icons-webc/IconCheck";
 const Lt = `*,*:before,*:after{box-sizing:border-box;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[isRTL] .c-switch-control{position:absolute;left:initial;right:2px}.c-switch-wrapper[isRTL] .c-switch-input:checked+.c-switch-control{transform:translate(calc(-1 * var(--switch-translation)))}@media (prefers-reduced-motion: no-preference){.c-switch-wrapper[isRTL] .c-switch-input:checked+.c-switch-control{transition:transform .15s cubic-bezier(.4,0,.9,1) 0s}}
 `, Nt = ["leading", "trailing"], Wt = "change";
 (function() {
   (function(v) {
-    const n = /* @__PURE__ */ new WeakMap(), c = /* @__PURE__ */ new WeakMap(), h = /* @__PURE__ */ new WeakMap(), l = /* @__PURE__ */ new WeakMap(), m = /* @__PURE__ */ new WeakMap(), k = /* @__PURE__ */ new WeakMap(), M = /* @__PURE__ */ new WeakMap(), y = /* @__PURE__ */ new WeakMap(), W = /* @__PURE__ */ new WeakMap(), I = /* @__PURE__ */ new WeakMap(), z = /* @__PURE__ */ new WeakMap(), B = /* @__PURE__ */ new WeakMap(), q = /* @__PURE__ */ new WeakMap(), U = /* @__PURE__ */ new WeakMap(), S = /* @__PURE__ */ new WeakMap(), V = {
+    const n = /* @__PURE__ */ new WeakMap(), c = /* @__PURE__ */ new WeakMap(), h = /* @__PURE__ */ new WeakMap(), l = /* @__PURE__ */ new WeakMap(), w = /* @__PURE__ */ new WeakMap(), k = /* @__PURE__ */ new WeakMap(), M = /* @__PURE__ */ new WeakMap(), y = /* @__PURE__ */ new WeakMap(), W = /* @__PURE__ */ new WeakMap(), I = /* @__PURE__ */ new WeakMap(), z = /* @__PURE__ */ new WeakMap(), B = /* @__PURE__ */ new WeakMap(), q = /* @__PURE__ */ new WeakMap(), U = /* @__PURE__ */ new WeakMap(), S = /* @__PURE__ */ new WeakMap(), T = {
       ariaAtomic: "aria-atomic",
       ariaAutoComplete: "aria-autocomplete",
       ariaBusy: "aria-busy",
@@ -48,11 +48,11 @@ const Lt = `*,*:before,*:after{box-sizing:border-box;cursor:inherit}.c-switch-wr
       ariaValueNow: "aria-valuenow",
       ariaValueText: "aria-valuetext",
       role: "role"
-    }, ct = (e, t) => {
-      for (let i in V) {
+    }, lt = (e, t) => {
+      for (let i in T) {
         t[i] = null;
         let a = null;
-        const r = V[i];
+        const r = T[i];
         Object.defineProperty(t, i, {
           get() {
             return a;
@@ -93,8 +93,8 @@ const Lt = `*,*:before,*:after{box-sizing:border-box;cursor:inherit}.c-switch-wr
           var u;
           if (l.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]);
+            Object.keys(T).filter((f) => d[f] !== null).forEach((f) => {
+              s.setAttribute(T[f], d[f]);
             }), I.delete(s);
           }
           if (S.has(s)) {
@@ -102,14 +102,14 @@ const Lt = `*,*:before,*:after{box-sizing:border-box;cursor:inherit}.c-switch-wr
             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 (s.localName === "form") {
-            const d = y.get(s), b = document.createTreeWalker(s, NodeFilter.SHOW_ELEMENT, {
+            const d = y.get(s), g = document.createTreeWalker(s, NodeFilter.SHOW_ELEMENT, {
               acceptNode(D) {
                 return l.has(D) && D.constructor.formAssociated && !(d && d.has(D)) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
               }
             });
-            let f = b.nextNode();
+            let f = g.nextNode();
             for (; f; )
-              K(f), f = b.nextNode();
+              K(f), f = g.nextNode();
           }
           s.localName === "fieldset" && ((u = C.observe) == null || u.call(C, s, G), j(s, !0));
         }), o.forEach((s) => {
@@ -118,7 +118,7 @@ const Lt = `*,*:before,*:after{box-sizing:border-box;cursor:inherit}.c-switch-wr
         });
       });
     }
-    function lt(e) {
+    function dt(e) {
       e.forEach((t) => {
         const { removedNodes: i } = t;
         i.forEach((a) => {
@@ -127,9 +127,9 @@ const Lt = `*,*:before,*:after{box-sizing:border-box;cursor:inherit}.c-switch-wr
         });
       });
     }
-    const dt = (e) => {
+    const ht = (e) => {
       var i, a;
-      const t = new MutationObserver(lt);
+      const t = new MutationObserver(dt);
       (i = window == null ? void 0 : window.ShadyDOM) != null && i.inUse && e.mode && e.host && (e = e.host), (a = t.observe) == null || a.call(t, e, { childList: !0 }), q.set(e, t);
     };
     N() && new MutationObserver(P);
@@ -145,7 +145,7 @@ const Lt = `*,*:before,*:after{box-sizing:border-box;cursor:inherit}.c-switch-wr
     }, J = (e, t) => {
       const i = document.createElement("input");
       return i.type = "hidden", i.name = e.getAttribute("name"), e.after(i), h.get(t).push(i), i;
-    }, ht = (e, t) => {
+    }, ut = (e, t) => {
       var i;
       h.set(t, []), (i = C.observe) == null || i.call(C, e, G);
     }, Q = (e, t) => {
@@ -154,14 +154,14 @@ const Lt = `*,*:before,*:after{box-sizing:border-box;cursor:inherit}.c-switch-wr
         let i = t[0].id;
         t[0].id || (i = `${t[0].htmlFor}_Label`, t[0].id = i), e.setAttribute("aria-labelledby", i);
       }
-    }, T = (e) => {
+    }, V = (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) => l.get(o).validity.valid), r = [...t, ...a].includes(!1);
       e.toggleAttribute("internals-invalid", r), e.toggleAttribute("internals-valid", !r);
-    }, ut = (e) => {
-      T(L(e.target));
     }, pt = (e) => {
-      T(L(e.target));
+      V(L(e.target));
     }, ft = (e) => {
+      V(L(e.target));
+    }, mt = (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)) {
@@ -171,7 +171,7 @@ const Lt = `*,*:before,*:after{box-sizing:border-box;cursor:inherit}.c-switch-wr
           r.size && Array.from(r).reverse().map((u) => l.get(u).reportValidity()).includes(!1) && i.preventDefault();
         }
       });
-    }, mt = (e) => {
+    }, wt = (e) => {
       const t = y.get(e.target);
       t && t.size && t.forEach((i) => {
         i.constructor.formAssociated && i.formResetCallback && i.formResetCallback.apply(i);
@@ -183,16 +183,16 @@ const Lt = `*,*:before,*:after{box-sizing:border-box;cursor:inherit}.c-switch-wr
           a.add(e);
         else {
           const r = /* @__PURE__ */ new Set();
-          r.add(e), y.set(t, r), ft(t), t.addEventListener("reset", mt), t.addEventListener("input", ut), t.addEventListener("change", pt);
+          r.add(e), y.set(t, r), mt(t), t.addEventListener("reset", wt), t.addEventListener("input", pt), t.addEventListener("change", ft);
         }
         k.set(t, { ref: e, internals: i }), e.constructor.formAssociated && e.formAssociatedCallback && setTimeout(() => {
           e.formAssociatedCallback.apply(e, [t]);
-        }, 0), T(t);
+        }, 0), V(t);
       }
     }, L = (e) => {
       let t = e.parentNode;
       return t && t.tagName !== "FORM" && (t = L(t)), t;
-    }, w = (e, t, i = DOMException) => {
+    }, b = (e, t, i = DOMException) => {
       if (!e.constructor.formAssociated)
         throw new i(t);
     }, Z = (e, t, i) => {
@@ -209,12 +209,12 @@ const Lt = `*,*:before,*:after{box-sizing:border-box;cursor:inherit}.c-switch-wr
     function N() {
       return typeof MutationObserver < "u";
     }
-    class wt {
+    class bt {
       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 bt = (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), gt = (e, t, i) => (e.valid = vt(t), Object.keys(t).forEach((a) => e[a] = t[a]), i && T(i), e), vt = (e) => {
+    const gt = (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), vt = (e, t, i) => (e.valid = yt(t), Object.keys(t).forEach((a) => e[a] = t[a]), i && V(i), e), yt = (e) => {
       let t = !0;
       for (let i in e)
         i !== "valid" && e[i] !== !1 && (t = !1);
@@ -259,7 +259,7 @@ const Lt = `*,*:before,*:after{box-sizing:border-box;cursor:inherit}.c-switch-wr
         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 yt(e, t, i, a, r) {
+    function Et(e, t, i, a, r) {
       if (a === "m")
         throw new TypeError("Private method is not writable");
       if (a === "a" && !r)
@@ -269,9 +269,9 @@ const Lt = `*,*:before,*:after{box-sizing:border-box;cursor:inherit}.c-switch-wr
       return a === "a" ? r.call(e, i) : r ? r.value = i : t.set(e, i), i;
     }
     var F;
-    class Et {
+    class kt {
       constructor(t) {
-        F.set(this, void 0), yt(this, F, t, "f");
+        F.set(this, void 0), Et(this, F, t, "f");
         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 @@ const Lt = `*,*:before,*:after{box-sizing:border-box;cursor:inherit}.c-switch-wr
         return this[t] == null ? null : this[t];
       }
     }
-    function kt() {
+    function Mt() {
       const e = HTMLFormElement.prototype.checkValidity;
       HTMLFormElement.prototype.checkValidity = i;
       const t = HTMLFormElement.prototype.reportValidity;
@@ -310,8 +310,8 @@ const Lt = `*,*:before,*:after{box-sizing:border-box;cursor:inherit}.c-switch-wr
           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((b, f) => b.compareDocumentPosition ? b.compareDocumentPosition(f) & 2 ? 1 : -1 : 0);
-          return new Et(d);
+          const d = Array.from(s).concat(u).sort((g, f) => g.compareDocumentPosition ? g.compareDocumentPosition(f) & 2 ? 1 : -1 : 0);
+          return new kt(d);
         }
       });
     }
@@ -322,12 +322,12 @@ const Lt = `*,*:before,*:after{box-sizing:border-box;cursor:inherit}.c-switch-wr
       constructor(t) {
         if (!t || !t.tagName || t.tagName.indexOf("-") === -1)
           throw new TypeError("Illegal constructor");
-        const i = t.getRootNode(), a = new wt();
-        this.states = new _(t), n.set(this, t), c.set(this, a), l.set(t, this), ct(t, this), ht(t, this), Object.seal(this), i instanceof DocumentFragment && dt(i);
+        const i = t.getRootNode(), a = new bt();
+        this.states = new _(t), n.set(this, t), c.set(this, a), l.set(t, this), lt(t, this), ut(t, this), Object.seal(this), i instanceof DocumentFragment && ht(i);
       }
       checkValidity() {
         const t = n.get(this);
-        if (w(t, "Failed to execute 'checkValidity' on 'ElementInternals': The target element is not a form-associated custom element."), !this.willValidate)
+        if (b(t, "Failed to execute 'checkValidity' on 'ElementInternals': The target element is not a form-associated custom element."), !this.willValidate)
           return !0;
         const i = c.get(this);
         if (!i.valid) {
@@ -342,19 +342,19 @@ const Lt = `*,*:before,*:after{box-sizing:border-box;cursor:inherit}.c-switch-wr
       }
       get form() {
         const t = n.get(this);
-        w(t, "Failed to read the 'form' property from 'ElementInternals': The target element is not a form-associated custom element.");
+        b(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 = L(t)), i;
       }
       get labels() {
         const t = n.get(this);
-        w(t, "Failed to read the 'labels' property from 'ElementInternals': The target element is not a form-associated custom element.");
+        b(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 = n.get(this);
-        if (w(t, "Failed to execute 'reportValidity' on 'ElementInternals': The target element is not a form-associated custom element."), !this.willValidate)
+        if (b(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 = B.get(this);
         if (a && !t.constructor.formAssociated)
@@ -363,7 +363,7 @@ const Lt = `*,*:before,*:after{box-sizing:border-box;cursor:inherit}.c-switch-wr
       }
       setFormValue(t) {
         const i = n.get(this);
-        if (w(i, "Failed to execute 'setFormValue' on 'ElementInternals': The target element is not a form-associated custom element."), Y(this), t != null && !(t instanceof FormData)) {
+        if (b(i, "Failed to execute 'setFormValue' on 'ElementInternals': The target element is not a form-associated custom element."), Y(this), t != null && !(t instanceof FormData)) {
           if (i.getAttribute("name")) {
             const a = J(i, this);
             a.value = t;
@@ -379,19 +379,19 @@ const Lt = `*,*:before,*:after{box-sizing:border-box;cursor:inherit}.c-switch-wr
       }
       setValidity(t, i, a) {
         const r = n.get(this);
-        if (w(r, "Failed to execute 'setValidity' on 'ElementInternals': The target element is not a form-associated custom element."), !t)
+        if (b(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.");
         B.set(this, a);
         const o = c.get(this), s = {};
-        for (const b in t)
-          s[b] = t[b];
-        Object.keys(s).length === 0 && bt(o);
+        for (const g in t)
+          s[g] = t[g];
+        Object.keys(s).length === 0 && gt(o);
         const u = { ...o, ...s };
         delete u.valid;
-        const { valid: d } = gt(o, u, this.form);
+        const { valid: d } = vt(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.");
-        m.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);
+        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);
       }
       get shadowRoot() {
         const t = n.get(this), i = z.get(t);
@@ -399,18 +399,18 @@ const Lt = `*,*:before,*:after{box-sizing:border-box;cursor:inherit}.c-switch-wr
       }
       get validationMessage() {
         const t = n.get(this);
-        return w(t, "Failed to read the 'validationMessage' property from 'ElementInternals': The target element is not a form-associated custom element."), m.get(this);
+        return b(t, "Failed to read the 'validationMessage' property from 'ElementInternals': The target element is not a form-associated custom element."), w.get(this);
       }
       get validity() {
         const t = n.get(this);
-        return w(t, "Failed to read the 'validity' property from 'ElementInternals': The target element is not a form-associated custom element."), c.get(this);
+        return b(t, "Failed to read the 'validity' property from 'ElementInternals': The target element is not a form-associated custom element."), c.get(this);
       }
       get willValidate() {
         const t = n.get(this);
-        return w(t, "Failed to read the 'willValidate' property from 'ElementInternals': The target element is not a form-associated custom element."), !(t.disabled || t.hasAttribute("disabled") || t.hasAttribute("readonly"));
+        return b(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 Mt() {
+    function Ct() {
       if (typeof window > "u" || !window.ElementInternals || !HTMLElement.prototype.attachInternals)
         return !1;
       class e extends HTMLElement {
@@ -476,19 +476,19 @@ const Lt = `*,*:before,*:after{box-sizing:border-box;cursor:inherit}.c-switch-wr
           const i = Element.prototype.attachShadow;
           Element.prototype.attachShadow = t;
         }
-        N() && typeof document < "u" && new MutationObserver(P).observe(document.documentElement, R), typeof HTMLFormElement < "u" && kt(), (e || typeof window < "u" && !window.CustomStateSet) && H();
+        N() && typeof document < "u" && new MutationObserver(P).observe(document.documentElement, R), typeof HTMLFormElement < "u" && Mt(), (e || typeof window < "u" && !window.CustomStateSet) && H();
       }
     }
-    return !!customElements.polyfillWrapFlushCallback || (Mt() ? typeof window < "u" && !window.CustomStateSet && H(HTMLElement.prototype.attachInternals) : st(!1)), v.forceCustomStateSetPolyfill = H, v.forceElementInternalsPolyfill = st, Object.defineProperty(v, "__esModule", { value: !0 }), v;
+    return !!customElements.polyfillWrapFlushCallback || (Ct() ? typeof window < "u" && !window.CustomStateSet && H(HTMLElement.prototype.attachInternals) : st(!1)), v.forceCustomStateSetPolyfill = H, v.forceElementInternalsPolyfill = st, Object.defineProperty(v, "__esModule", { value: !0 }), v;
   })({});
 })();
-var Pt = Object.defineProperty, Rt = Object.getOwnPropertyDescriptor, g = (v, n, c, h) => {
-  for (var l = h > 1 ? void 0 : h ? Rt(n, c) : n, m = v.length - 1, k; m >= 0; m--)
-    (k = v[m]) && (l = (h ? k(n, c, l) : k(l)) || l);
+var Pt = Object.defineProperty, Rt = Object.getOwnPropertyDescriptor, m = (v, n, c, h) => {
+  for (var l = h > 1 ? void 0 : h ? Rt(n, c) : n, w = v.length - 1, k; w >= 0; w--)
+    (k = v[w]) && (l = (h ? k(n, c, l) : k(l)) || l);
   return h && l && Pt(n, c, l), l;
 };
-const nt = "pie-switch";
-class p extends At(It(Ct)) {
+const ct = "pie-switch";
+class p extends At(It(xt)) {
   constructor() {
     super(...arguments), this.labelPlacement = "leading", this.checked = !1, this.required = !1, this.value = "on", this.disabled = !1;
   }
@@ -577,14 +577,14 @@ class p extends At(It(Ct)) {
       aria: c,
       checked: h,
       required: l,
-      disabled: m,
+      disabled: w,
       isRTL: k
     } = this, M = "switch-description";
     return A`
             <div
                 class="c-switch-wrapper"
                 ?isRTL=${k}
-                ?disabled=${m}>
+                ?disabled=${w}>
                 ${n === "leading" ? this.renderSwitchLabel() : x}
                 <label
                     data-test-id="switch-component"
@@ -598,7 +598,7 @@ class p extends At(It(Ct)) {
                         class="c-switch-input"
                         .required=${l}
                         .checked="${h}"
-                        .disabled="${m}"
+                        .disabled="${w}"
                         @change="${this.onChange}"
                         aria-label="${(c == null ? void 0 : c.label) || x}"
                         aria-describedby="${c != null && c.describedBy ? M : x}">
@@ -612,36 +612,39 @@ class p extends At(It(Ct)) {
         `;
   }
 }
-p.styles = xt(Lt);
-g([
-  Ft('input[type="checkbox"]')
+p.styles = Ft(Lt);
+m([
+  nt('input[type="checkbox"]')
 ], p.prototype, "input", 2);
-g([
+m([
   E({ type: String })
 ], p.prototype, "label", 2);
-g([
+m([
   E({ type: String }),
-  Vt(nt, Nt, "leading")
+  Tt(ct, Nt, "leading")
 ], p.prototype, "labelPlacement", 2);
-g([
+m([
   E({ type: Object })
 ], p.prototype, "aria", 2);
-g([
+m([
   E({ type: Boolean, reflect: !0 })
 ], p.prototype, "checked", 2);
-g([
+m([
   E({ type: Boolean, reflect: !0 })
 ], p.prototype, "required", 2);
-g([
+m([
   E({ type: String })
 ], p.prototype, "value", 2);
-g([
+m([
   E({ type: String })
 ], p.prototype, "name", 2);
-g([
+m([
   E({ type: Boolean, reflect: !0 })
 ], p.prototype, "disabled", 2);
-Tt(nt, p);
+m([
+  nt("label")
+], p.prototype, "focusTarget", 2);
+Vt(ct, p);
 export {
   Wt as ON_SWITCH_CHANGED_EVENT,
   p as PieSwitch,

package/dist/react.d.ts

@@ -2,6 +2,7 @@ import type { CSSResult } from 'lit';
 import type { FormControlInterface } from '@justeattakeaway/pie-webc-core';
 import type { GenericConstructor } from '@justeattakeaway/pie-webc-core';
 import type { LitElement } from 'lit';
+import type { PIEInputElement } from '@justeattakeaway/pie-webc-core';
 import type { PropertyValues } from 'lit';
 import * as React_2 from 'react';
 import type { RTLInterface } from '@justeattakeaway/pie-webc-core';
@@ -29,7 +30,7 @@ export declare const PieSwitch: React_2.ForwardRefExoticComponent<SwitchProps &
  * @tagname pie-switch
  * @event {CustomEvent} change - when the switch checked state is changed.
  */
-declare class PieSwitch_2 extends PieSwitch_base implements SwitchProps {
+declare class PieSwitch_2 extends PieSwitch_base implements SwitchProps, PIEInputElement {
     private input?;
     protected firstUpdated(_changedProperties: PropertyValues<this>): void;
     protected updated(_changedProperties: PropertyValues<this>): void;
@@ -41,6 +42,7 @@ declare class PieSwitch_2 extends PieSwitch_base implements SwitchProps {
     value: string;
     name?: string;
     disabled: boolean;
+    focusTarget: HTMLElement;
     static styles: CSSResult;
     /**
      * Ensures that the form value and validation state are in sync with the component.

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-switch",
   "description": "PIE Design System Switch built using Web Components",
-  "version": "0.25.0",
+  "version": "0.27.0",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -32,12 +32,12 @@
   "license": "Apache-2.0",
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "0.9.0",
-    "@justeattakeaway/pie-components-config": "0.9.0",
+    "@justeattakeaway/pie-components-config": "0.11.0",
     "cem-plugin-module-file-extensions": "0.0.5"
   },
   "dependencies": {
-    "@justeattakeaway/pie-icons-webc": "0.17.2",
-    "@justeattakeaway/pie-webc-core": "0.17.1",
+    "@justeattakeaway/pie-icons-webc": "0.17.3",
+    "@justeattakeaway/pie-webc-core": "0.18.0",
     "@justeattakeaway/pie-wrapper-react": "0.14.0",
     "element-internals-polyfill": "1.3.10"
   },

package/src/index.ts

@@ -3,7 +3,7 @@ import {
 } from 'lit';
 import { property, query } from 'lit/decorators.js';
 import {
-    RtlMixin, validPropertyValues, defineCustomElement, FormControlMixin, wrapNativeEvent,
+    RtlMixin, validPropertyValues, defineCustomElement, FormControlMixin, wrapNativeEvent, PIEInputElement,
 } from '@justeattakeaway/pie-webc-core';
 import styles from './switch.scss?inline';
 import {
@@ -21,7 +21,7 @@ const componentSelector = 'pie-switch';
  * @tagname pie-switch
  * @event {CustomEvent} change - when the switch checked state is changed.
  */
-export class PieSwitch extends FormControlMixin(RtlMixin(LitElement)) implements SwitchProps {
+export class PieSwitch extends FormControlMixin(RtlMixin(LitElement)) implements SwitchProps, PIEInputElement {
     @query('input[type="checkbox"]')
     private input?: HTMLInputElement;
 
@@ -66,6 +66,9 @@ export class PieSwitch extends FormControlMixin(RtlMixin(LitElement)) implements
     @property({ type: Boolean, reflect: true })
     public disabled = false;
 
+    @query('label')
+    public focusTarget!: HTMLElement;
+
     static styles = unsafeCSS(styles);
 
     /**