@justeattakeaway/pie-switch 2.3.33 → 2.4.0

package/README.md

@@ -19,6 +19,7 @@
   - [Events](#events)
 - [Forms Usage](#forms-usage)
   - [Form Validation](#form-validation)
+- [External Labels](#external-labels)
 - [Usage Examples](#usage-examples)
 - [Questions and Support](#questions-and-support)
 - [Contributing](#contributing)
@@ -84,6 +85,39 @@ const switch = document.querySelector('pie-switch');
 switch.setCustomValidity('Please toggle the switch');
 ```
 
+## External Labels
+
+In addition to the built-in `label` property, `pie-switch` can be associated with one or more external `<label>` elements: either by `for="…"` referencing the switch's `id`, or by wrapping the switch in a `<label>`. Clicking any associated label toggles the switch, mirroring native `<input type="checkbox">` behaviour. The labels will be narrated by screen readers.
+Do not use the `label` property when associating the switch with external labels.
+
+**Warning!** Be mindful of using the `aria` object property when associating with external labels as it could cause a messy screen reader narration. Always test your switches with screen readers.
+
+**Using `for="…"`:**
+
+```html
+<label for="notifications">Enable notifications</label>
+<pie-switch id="notifications" name="notifications"></pie-switch>
+```
+
+**Using a wrapping label:**
+
+```html
+<label>
+  Enable notifications
+  <pie-switch name="notifications"></pie-switch>
+</label>
+```
+
+**Multiple labels for the same switch (not a very common pattern):**
+
+```html
+<label for="notifications">Enable notifications</label>
+<pie-switch id="notifications" name="notifications"></pie-switch>
+<label for="notifications">(tap to toggle)</label>
+```
+
+Each associated label will toggle the switch when clicked, and is announced by screen readers.
+
 ## Usage Examples
 
 **For HTML:**

package/custom-elements.json

@@ -151,6 +151,14 @@
               },
               "privacy": "public"
             },
+            {
+              "kind": "field",
+              "name": "_abortController",
+              "type": {
+                "text": "AbortController"
+              },
+              "privacy": "private"
+            },
             {
               "kind": "field",
               "name": "_isAnimationAllowed",

package/dist/index.d.ts

@@ -39,8 +39,11 @@ export declare class PieSwitch extends PieSwitch_base implements SwitchProps, PI
     disabled: boolean;
     private input;
     focusTarget: HTMLElement;
+    private _abortController;
     private _isAnimationAllowed;
     protected firstUpdated(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     protected updated(): void;
     static styles: CSSResult;
     /**

package/dist/index.js

@@ -2,20 +2,20 @@ import { LitElement as St, nothing as L, html as N, unsafeCSS as Vt } from "lit"
 import { property as E, query as ut, state as Tt } from "lit/decorators.js";
 import { classMap as Lt } from "lit/directives/class-map.js";
 import { ifDefined as Nt } from "lit/directives/if-defined.js";
-import { FormControlMixin as Ot, DelegatesFocusMixin as Pt, wrapNativeEvent as _t, validPropertyValues as Dt, safeCustomElement as Rt } from "@justeattakeaway/pie-webc-core";
+import { FormControlMixin as Ot, DelegatesFocusMixin as _t, wrapNativeEvent as Pt, validPropertyValues as Dt, safeCustomElement as $t } from "@justeattakeaway/pie-webc-core";
 import "@justeattakeaway/pie-icons-webc/dist/IconCheck.js";
 const O = class O extends St {
   willUpdate() {
     this.getAttribute("v") || this.setAttribute("v", O.v);
   }
 };
-O.v = "2.3.33";
+O.v = "2.4.0";
 let q = O;
 var dt = {}, ht;
-function $t() {
-  return ht || (ht = 1, function() {
+function Rt() {
+  return ht || (ht = 1, (function() {
     (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 = {
+      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(), _ = /* @__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",
@@ -67,8 +67,8 @@ function $t() {
             get() {
               return a;
             },
-            set(s) {
-              a = s, e.isConnected ? e.setAttribute(r, s) : A.set(e, t);
+            set(o) {
+              a = o, e.isConnected ? e.setAttribute(r, o) : A.set(e, t);
             }
           });
         }
@@ -79,40 +79,40 @@ function $t() {
       }
       const J = (e, t = !1) => {
         const i = document.createTreeWalker(e, NodeFilter.SHOW_ELEMENT, {
-          acceptNode(s) {
-            return c.has(s) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
+          acceptNode(o) {
+            return c.has(o) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
           }
         });
         let a = i.nextNode();
         const r = !t || e.disabled;
         for (; a; )
-          a.formDisabledCallback && r && R(a, e.disabled), a = i.nextNode();
+          a.formDisabledCallback && r && $(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 ? $(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);
           }
         }
       }) : {};
-      function _(e) {
+      function P(e) {
         e.forEach((t) => {
-          const { addedNodes: i, removedNodes: a } = t, r = Array.from(i), s = Array.from(a);
-          r.forEach((o) => {
+          const { addedNodes: i, removedNodes: a } = t, r = Array.from(i), o = Array.from(a);
+          r.forEach((s) => {
             var u;
-            if (c.has(o) && o.constructor.formAssociated && Y(o), A.has(o)) {
-              const d = A.get(o);
+            if (c.has(s) && s.constructor.formAssociated && Y(s), A.has(s)) {
+              const d = A.get(s);
               Object.keys(F).filter((b) => d[b] !== null).forEach((b) => {
-                o.setAttribute(F[b], d[b]);
-              }), A.delete(o);
+                s.setAttribute(F[b], d[b]);
+              }), A.delete(s);
             }
-            if (C.has(o)) {
-              const d = C.get(o);
-              o.setAttribute("internals-valid", d.validity.valid.toString()), o.setAttribute("internals-invalid", (!d.validity.valid).toString()), o.setAttribute("aria-invalid", (!d.validity.valid).toString()), C.delete(o);
+            if (C.has(s)) {
+              const d = C.get(s);
+              s.setAttribute("internals-valid", d.validity.valid.toString()), s.setAttribute("internals-invalid", (!d.validity.valid).toString()), s.setAttribute("aria-invalid", (!d.validity.valid).toString()), C.delete(s);
             }
-            if (o.localName === "form") {
-              const d = y.get(o), w = document.createTreeWalker(o, NodeFilter.SHOW_ELEMENT, {
+            if (s.localName === "form") {
+              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;
                 }
@@ -121,10 +121,10 @@ function $t() {
               for (; b; )
                 Y(b), b = w.nextNode();
             }
-            o.localName === "fieldset" && ((u = I.observe) === null || u === void 0 || u.call(I, o, Q), J(o, !0));
-          }), s.forEach((o) => {
-            const u = c.get(o);
-            u && m.get(u) && X(u), P.has(o) && P.get(o).disconnect();
+            s.localName === "fieldset" && ((u = I.observe) === null || u === void 0 || u.call(I, s, Q), J(s, !0));
+          }), o.forEach((s) => {
+            const u = c.get(s);
+            u && m.get(u) && X(u), _.has(s) && _.get(s).disconnect();
           });
         });
       }
@@ -142,11 +142,11 @@ function $t() {
         const a = new MutationObserver(mt);
         !((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(_);
+      T() && new MutationObserver(P);
       const D = {
         childList: !0,
         subtree: !0
-      }, R = (e, t) => {
+      }, $ = (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) => {
@@ -165,7 +165,7 @@ function $t() {
           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((s) => !s.tagName.includes("-") && s.validity).map((s) => s.validity.valid), i = y.get(e) || [], a = Array.from(i).filter((s) => s.isConnected).map((s) => c.get(s).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);
       }, vt = (e) => {
         S(V(e.target));
@@ -229,7 +229,7 @@ function $t() {
         for (let i in e)
           i !== "valid" && e[i] !== !1 && (t = !1);
         return t;
-      }, $ = /* @__PURE__ */ new WeakMap();
+      }, R = /* @__PURE__ */ new WeakMap();
       function rt(e, t) {
         e.toggleAttribute(t, !0), e.part && e.part.add(t);
       }
@@ -240,12 +240,12 @@ function $t() {
         constructor(t) {
           if (super(), !t || !t.tagName || t.tagName.indexOf("-") === -1)
             throw new TypeError("Illegal constructor");
-          $.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 = $.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;
@@ -256,13 +256,13 @@ function $t() {
           super.clear();
         }
         delete(t) {
-          const i = super.delete(t), a = $.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;
         }
       }
-      function st(e, t, i, a) {
+      function ot(e, t, i, a) {
         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);
       }
@@ -281,10 +281,10 @@ function $t() {
           Object.freeze(this);
         }
         get length() {
-          return st(this, x, "f").length;
+          return ot(this, x, "f").length;
         }
         [(x = /* @__PURE__ */ new WeakMap(), Symbol.iterator)]() {
-          return st(this, x, "f")[Symbol.iterator]();
+          return ot(this, x, "f")[Symbol.iterator]();
         }
         item(t) {
           return this[t] == null ? null : this[t];
@@ -298,26 +298,26 @@ function $t() {
         HTMLFormElement.prototype.checkValidity = i;
         const t = HTMLFormElement.prototype.reportValidity;
         HTMLFormElement.prototype.reportValidity = a;
-        function i(...s) {
-          let o = e.apply(this, s);
-          return it(this, o, "checkValidity");
+        function i(...o) {
+          let s = e.apply(this, o);
+          return it(this, s, "checkValidity");
         }
-        function a(...s) {
-          let o = t.apply(this, s);
-          return it(this, o, "reportValidity");
+        function a(...o) {
+          let s = t.apply(this, o);
+          return it(this, s, "reportValidity");
         }
         const { get: r } = Object.getOwnPropertyDescriptor(HTMLFormElement.prototype, "elements");
         Object.defineProperty(HTMLFormElement.prototype, "elements", {
-          get(...s) {
-            const o = r.call(this, ...s), u = Array.from(y.get(this) || []);
+          get(...o) {
+            const s = r.call(this, ...o), u = Array.from(y.get(this) || []);
             if (u.length === 0)
-              return o;
-            const d = Array.from(o).concat(u).sort((w, b) => w.compareDocumentPosition ? w.compareDocumentPosition(b) & 2 ? 1 : -1 : 0);
+              return s;
+            const d = Array.from(s).concat(u).sort((w, b) => w.compareDocumentPosition ? w.compareDocumentPosition(b) & 2 ? 1 : -1 : 0);
             return new Ct(d);
           }
         });
       }
-      class ot {
+      class st {
         static get isPolyfilled() {
           return !0;
         }
@@ -372,8 +372,8 @@ function $t() {
             }
           } else t != null && t instanceof FormData && Array.from(t).reverse().forEach(([a, r]) => {
             if (typeof r == "string") {
-              const s = Z(i, this);
-              s.name = a, s.value = r;
+              const o = Z(i, this);
+              o.name = a, o.value = r;
             }
           });
           B.set(i, t);
@@ -383,13 +383,13 @@ function $t() {
           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);
-          const s = h.get(this), o = {};
+          const o = h.get(this), s = {};
           for (const w in t)
-            o[w] = t[w];
-          Object.keys(o).length === 0 && kt(s);
-          const u = Object.assign(Object.assign({}, s), o);
+            s[w] = t[w];
+          Object.keys(s).length === 0 && kt(o);
+          const u = Object.assign(Object.assign({}, o), s);
           delete u.valid;
-          const { valid: d } = Mt(s, u, this.form);
+          const { valid: d } = Mt(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);
@@ -444,13 +444,13 @@ function $t() {
       }
       function ct(e = !0) {
         if (!nt) {
-          if (nt = !0, typeof window < "u" && (window.ElementInternals = ot), typeof CustomElementRegistry < "u") {
+          if (nt = !0, typeof window < "u" && (window.ElementInternals = st), typeof CustomElementRegistry < "u") {
             const t = CustomElementRegistry.prototype.define;
             CustomElementRegistry.prototype.define = function(i, a, r) {
               if (a.formAssociated) {
-                const s = a.prototype.connectedCallback;
+                const o = a.prototype.connectedCallback;
                 a.prototype.connectedCallback = function() {
-                  G.has(this) || (G.set(this, !0), this.hasAttribute("disabled") && R(this, !0)), s != null && s.apply(this), at(this);
+                  G.has(this) || (G.set(this, !0), this.hasAttribute("disabled") && $(this, !0)), o != null && o.apply(this), at(this);
                 };
               }
               t.call(this, i, a, r);
@@ -463,28 +463,28 @@ function $t() {
             } else return {};
             if (c.has(this))
               throw new DOMException("DOMException: Failed to execute 'attachInternals' on 'HTMLElement': ElementInternals for the specified element was already attached.");
-            return new ot(this);
+            return new st(this);
           }), typeof Element < "u") {
             let t = function(...a) {
               const r = i.apply(this, a);
               if (U.set(this, r), T()) {
-                const s = new MutationObserver(_);
-                window.ShadyDOM ? s.observe(this, D) : s.observe(r, D), P.set(this, s);
+                const o = new MutationObserver(P);
+                window.ShadyDOM ? o.observe(this, D) : o.observe(r, D), _.set(this, o);
               }
               return r;
             };
             const i = Element.prototype.attachShadow;
             Element.prototype.attachShadow = t;
           }
-          T() && typeof document < "u" && new MutationObserver(_).observe(document.documentElement, D), typeof HTMLFormElement < "u" && Ft(), (e || typeof window < "u" && !window.CustomStateSet) && W();
+          T() && typeof document < "u" && new MutationObserver(P).observe(document.documentElement, D), typeof HTMLFormElement < "u" && Ft(), (e || typeof window < "u" && !window.CustomStateSet) && W();
         }
       }
       return !!customElements.polyfillWrapFlushCallback || (It() ? typeof window < "u" && !window.CustomStateSet && W(HTMLElement.prototype.attachInternals) : ct(!1)), l.forceCustomStateSetPolyfill = W, l.forceElementInternalsPolyfill = ct, Object.defineProperty(l, "__esModule", { value: !0 }), l;
     })({});
-  }()), dt;
+  })()), dt;
 }
-$t();
-const Ht = "*,*: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)))}", Wt = ["leading", "trailing"], Xt = "change", M = {
+Rt();
+const Ht = "*,*: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)))}", Wt = ["leading", "trailing"], Xt = "change", M = {
   checked: !1,
   disabled: !1,
   labelPlacement: "leading",
@@ -497,7 +497,7 @@ var zt = Object.defineProperty, qt = Object.getOwnPropertyDescriptor, f = (l, n,
   return m && c && zt(n, h, c), c;
 };
 const Bt = "pie-switch";
-let p = class extends Ot(Pt(q)) {
+let p = class extends Ot(_t(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;
   }
@@ -506,6 +506,17 @@ let p = class extends Ot(Pt(q)) {
       this.dispatchEvent(new Event("invalid", l));
     });
   }
+  connectedCallback() {
+    super.connectedCallback(), this._abortController = new AbortController();
+    const { signal: l } = this._abortController;
+    this.addEventListener("click", (n) => {
+      n.composedPath()[0] === this && this.input.click();
+    }, { signal: l });
+  }
+  disconnectedCallback() {
+    var l;
+    super.disconnectedCallback(), (l = this._abortController) == null || l.abort();
+  }
   updated() {
     this.handleFormAssociation();
   }
@@ -522,7 +533,7 @@ let p = class extends Ot(Pt(q)) {
   handleChange(l) {
     const { checked: n } = l == null ? void 0 : l.currentTarget;
     this.checked = n;
-    const h = _t(l);
+    const h = Pt(l);
     this._isAnimationAllowed || (this._isAnimationAllowed = !0), this.dispatchEvent(h), this.handleFormAssociation();
   }
   /**
@@ -667,7 +678,7 @@ f([
   Tt()
 ], p.prototype, "_isAnimationAllowed", 2);
 p = f([
-  Rt("pie-switch")
+  $t("pie-switch")
 ], p);
 export {
   Xt as ON_SWITCH_CHANGED_EVENT,

package/dist/react.d.ts

@@ -42,8 +42,11 @@ declare class PieSwitch_2 extends PieSwitch_base implements SwitchProps, PIEInpu
     disabled: boolean;
     private input;
     focusTarget: HTMLElement;
+    private _abortController;
     private _isAnimationAllowed;
     protected firstUpdated(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): 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.3.33",
+  "version": "2.4.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/justeattakeaway/pie",
@@ -44,12 +44,12 @@
   "license": "Apache-2.0",
   "devDependencies": {
     "@justeattakeaway/pie-components-config": "0.21.3",
-    "@justeattakeaway/pie-css": "1.1.1",
-    "@justeattakeaway/pie-monorepo-utils": "0.9.2",
+    "@justeattakeaway/pie-css": "1.1.2",
+    "@justeattakeaway/pie-monorepo-utils": "0.9.3",
     "@justeattakeaway/pie-wrapper-react": "0.14.5"
   },
   "dependencies": {
-    "@justeattakeaway/pie-icons-webc": "1.24.2",
+    "@justeattakeaway/pie-icons-webc": "1.24.3",
     "@justeattakeaway/pie-webc-core": "14.0.2",
     "element-internals-polyfill": "1.3.11"
   },

package/src/index.ts

@@ -62,6 +62,8 @@ export class PieSwitch extends FormControlMixin(DelegatesFocusMixin(PieElement))
     @query('label')
     public focusTarget!: HTMLElement;
 
+    private _abortController!: AbortController;
+
     @state()
     private _isAnimationAllowed = false;
 
@@ -74,6 +76,27 @@ export class PieSwitch extends FormControlMixin(DelegatesFocusMixin(PieElement))
         });
     }
 
+    connectedCallback (): void {
+        super.connectedCallback();
+
+        this._abortController = new AbortController();
+        const { signal } = this._abortController;
+
+        this.addEventListener('click', (event: Event) => {
+            // Only programmatically click the input if the explicit target
+            // of the click was the host element itself (e.g., via an external label).
+            // This ignores clicks bubbling up from the internal shadow DOM and prevents loops.
+            if (event.composedPath()[0] === this) {
+                this.input.click();
+            }
+        }, { signal });
+    }
+
+    disconnectedCallback () : void {
+        super.disconnectedCallback();
+        this._abortController?.abort();
+    }
+
     protected updated (): void {
         this.handleFormAssociation();
     }