@justeattakeaway/pie-switch 2.0.6 → 2.1.0

package/custom-elements.json

@@ -139,6 +139,15 @@
               },
               "privacy": "public"
             },
+            {
+              "kind": "field",
+              "name": "_isAnimationAllowed",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
             {
               "kind": "method",
               "name": "handleFormAssociation",
@@ -265,10 +274,6 @@
             {
               "name": "FormControlMixin",
               "package": "@justeattakeaway/pie-webc-core"
-            },
-            {
-              "name": "RtlMixin",
-              "package": "@justeattakeaway/pie-webc-core"
             }
           ],
           "superclass": {

package/dist/index.d.ts

@@ -4,7 +4,6 @@ import { FormControlInterface } from '@justeattakeaway/pie-webc-core';
 import { GenericConstructor } from '@justeattakeaway/pie-webc-core';
 import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElement';
 import { PIEInputElement } from '@justeattakeaway/pie-webc-core';
-import { RTLInterface } from '@justeattakeaway/pie-webc-core';
 import { TemplateResult } from 'lit-html';
 
 declare type AriaProps = {
@@ -40,6 +39,7 @@ export declare class PieSwitch extends PieSwitch_base implements SwitchProps, PI
     disabled: boolean;
     private input;
     focusTarget: HTMLElement;
+    private _isAnimationAllowed;
     protected firstUpdated(): void;
     protected updated(): void;
     static styles: CSSResult;
@@ -91,7 +91,7 @@ export declare class PieSwitch extends PieSwitch_base implements SwitchProps, PI
     render(): TemplateResult<1>;
 }
 
-declare const PieSwitch_base: GenericConstructor<FormControlInterface> & GenericConstructor<RTLInterface> & typeof PieElement;
+declare const PieSwitch_base: GenericConstructor<FormControlInterface> & typeof PieElement;
 
 export declare interface SwitchProps {
     /**

package/dist/index.js

@@ -1,15 +1,15 @@
 import { LitElement as Ft, nothing as L, html as N, unsafeCSS as It } from "lit";
-import { property as y, query as dt } from "lit/decorators.js";
-import { classMap as St } from "lit/directives/class-map.js";
-import { ifDefined as Vt } from "lit/directives/if-defined.js";
-import { FormControlMixin as Tt, RtlMixin as Lt, wrapNativeEvent as Nt, validPropertyValues as Ot, safeCustomElement as Pt } from "@justeattakeaway/pie-webc-core";
+import { property as y, 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 "@justeattakeaway/pie-icons-webc/dist/IconCheck.js";
 const O = class O extends Ft {
   willUpdate() {
     this.getAttribute("v") || this.setAttribute("v", O.v);
   }
 };
-O.v = "2.0.6";
+O.v = "2.1.0";
 let q = O;
 (function() {
   (function(n) {
@@ -65,8 +65,8 @@ let q = O;
           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);
           }
         });
       }
@@ -77,18 +77,18 @@ let q = O;
     }
     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 && 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);
         }
@@ -96,21 +96,21 @@ let q = O;
     }) : {};
     function _(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 = g.get(o), w = document.createTreeWalker(o, NodeFilter.SHOW_ELEMENT, {
+          if (s.localName === "form") {
+            const d = g.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;
               }
@@ -119,10 +119,10 @@ let q = O;
             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), P.has(s) && P.get(s).disconnect();
         });
       });
     }
@@ -144,7 +144,7 @@ let q = O;
     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) => {
@@ -163,7 +163,7 @@ let q = O;
         t[0].id || (i = `${t[0].htmlFor}_Label`, t[0].id = i), e.setAttribute("aria-labelledby", i);
       }
     }, S = (e) => {
-      const t = Array.from(e.elements).filter((s) => !s.tagName.includes("-") && s.validity).map((s) => s.validity.valid), i = g.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 = g.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));
@@ -227,7 +227,7 @@ let q = O;
       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,13 +254,13 @@ 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;
       }
     }
-    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);
     }
@@ -279,10 +279,10 @@ let q = O;
         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];
@@ -296,26 +296,26 @@ let q = O;
       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(g.get(this) || []);
+        get(...o) {
+          const s = r.call(this, ...o), u = Array.from(g.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 xt(d);
         }
       });
     }
-    class ot {
+    class st {
       static get isPolyfilled() {
         return !0;
       }
@@ -370,8 +370,8 @@ let q = O;
           }
         } 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);
@@ -381,13 +381,13 @@ let q = O;
         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 && yt(s);
-        const u = Object.assign(Object.assign({}, s), o);
+          s[w] = t[w];
+        Object.keys(s).length === 0 && yt(o);
+        const u = Object.assign(Object.assign({}, o), s);
         delete u.valid;
-        const { valid: d } = Et(s, 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.");
         E.set(this, d ? "" : i), r.isConnected ? (r.toggleAttribute("internals-invalid", !d), r.toggleAttribute("internals-valid", d), r.setAttribute("aria-invalid", `${!d}`)) : C.set(r, this);
@@ -442,13 +442,13 @@ let q = O;
     }
     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") && D(this, !0)), o != null && o.apply(this), at(this);
               };
             }
             t.call(this, i, a, r);
@@ -461,13 +461,13 @@ let q = O;
           } 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, $) : s.observe(r, $), P.set(this, s);
+              const o = new MutationObserver(_);
+              window.ShadyDOM ? o.observe(this, $) : o.observe(r, $), P.set(this, o);
             }
             return r;
           };
@@ -480,22 +480,22 @@ let q = O;
     return !!customElements.polyfillWrapFlushCallback || (Ct() ? typeof window < "u" && !window.CustomStateSet && W(HTMLElement.prototype.attachInternals) : ct(!1)), n.forceCustomStateSetPolyfill = W, n.forceElementInternalsPolyfill = ct, Object.defineProperty(n, "__esModule", { value: !0 }), n;
   })({});
 })();
-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)}@media (prefers-reduced-motion: no-preference){.c-switch{transition:background-color .15s cubic-bezier(.4,0,.9,1) 0s}}.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)}@media (prefers-reduced-motion: no-preference){.c-switch[checked]{transition:background-color .15s cubic-bezier(.4,0,.9,1) 0s}}.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)}@media (prefers-reduced-motion: no-preference){.c-switch-control{transition:transform .15s cubic-bezier(.4,0,.9,1) 0s}}.c-switch-wrapper--rtl .c-switch-control{position:absolute;left:initial;right:2px}.c-switch-control .c-pieIcon--check{vertical-align:top}.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(--dt-color-interactive-brand)}@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-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}.c-switch-wrapper--rtl .c-switch-input:checked+.c-switch-control{transform:translate(calc(-1 * var(--switch-translation)))}@media (prefers-reduced-motion: no-preference){.c-switch-wrapper--rtl .c-switch-input:checked+.c-switch-control{transition:transform .15s cubic-bezier(.4,0,.9,1) 0s}}", $t = ["leading", "trailing"], Gt = "change", k = {
+const _t = "*,*:after,*:before{box-sizing:inherit}:host{display:block}*,*:before,*:after{cursor:inherit}.c-switch-wrapper{display:inline-flex;align-items:center;gap:var(--dt-spacing-b);vertical-align:top;font-family:var(--dt-font-body-l-family);cursor:pointer}.c-switch-wrapper[disabled]{cursor:not-allowed}.c-switch{--int-states-mixin-bg-color: var(--dt-color-interactive-form);--switch-bg-color--checked: var(--dt-color-interactive-brand);--switch-bg-color--disabled: var(--dt-color-disabled-01);--switch-width: 48px;--switch-height: 24px;--switch-control-size: 20px;--switch-padding: 2px;--switch-radius: var(--dt-radius-rounded-e);--switch-translation: calc(var(--switch-width) - var(--switch-control-size) - 2 * var(--switch-padding));position:relative;display:flex;width:var(--switch-width);height:var(--switch-height);flex-shrink:0;padding:var(--switch-padding);border-radius:var(--switch-radius);background-color:var(--int-states-mixin-bg-color)}.c-switch:hover:not(:disabled,.is-disabled,.is-dismissible){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--int-states-mixin-bg-color: hsl(var(--dt-color-interactive-form-h), var(--dt-color-interactive-form-s), calc(var(--dt-color-interactive-form-l) + var(--hover-modifier)))}.c-switch:active:not(:disabled,.is-disabled,.is-dismissible),.c-switch.is-loading:not(:disabled,.is-disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--int-states-mixin-bg-color: hsl(var(--dt-color-interactive-form-h), var(--dt-color-interactive-form-s), calc(var(--dt-color-interactive-form-l) + var(--active-modifier)))}@supports (background-color: color-mix(in srgb,black,white)){.c-switch:hover:not(:disabled,.is-disabled,.is-dismissible){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-interactive-form))}.c-switch:active:not(:disabled,.is-disabled,.is-dismissible),.c-switch.is-loading:not(:disabled,.is-disabled){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-interactive-form))}}.c-switch[checked]{--int-states-mixin-bg-color: var(--dt-color-interactive-brand)}.c-switch[checked]:hover:not(:disabled,.is-disabled,.is-dismissible){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--int-states-mixin-bg-color: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) + var(--hover-modifier)))}.c-switch[checked]:active:not(:disabled,.is-disabled,.is-dismissible),.c-switch[checked].is-loading:not(:disabled,.is-disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--int-states-mixin-bg-color: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) + var(--active-modifier)))}@supports (background-color: color-mix(in srgb,black,white)){.c-switch[checked]:hover:not(:disabled,.is-disabled,.is-dismissible){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-interactive-brand))}.c-switch[checked]:active:not(:disabled,.is-disabled,.is-dismissible),.c-switch[checked].is-loading:not(:disabled,.is-disabled){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-interactive-brand))}}[disabled] .c-switch{--int-states-mixin-bg-color: var(--switch-bg-color--disabled);pointer-events:none}.c-switch:has(.c-switch-input:focus-visible){box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer);outline:none}.c-switch-input{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);border:0;left:50%;transform:translate(-50%) translateY(-50%);bottom:0}.c-switch-input:disabled{background-color:transparent}.c-switch-control{position:absolute;left:2px;width:var(--switch-control-size);height:var(--switch-control-size);border-radius:var(--switch-radius);background-color:var(--dt-color-interactive-light);padding:var(--switch-padding)}.c-switch-wrapper:dir(rtl) .c-switch-control{position:absolute;left:initial;right:2px}.c-switch-control .c-pieIcon--check{vertical-align:top}.c-switch-input:checked+.c-switch-control{transform:translate(var(--switch-translation))}.c-switch-input:checked+.c-switch-control .c-pieIcon--check{color:var(--dt-color-interactive-brand)}.c-switch-input:disabled~.c-switch-control{color:var(--switch-bg-color--disabled)}.c-switch-input:disabled~.c-switch-control .c-pieIcon--check{color:var(--switch-bg-color--disabled)}.c-switch-label{color:var(--dt-color-content-default)}.c-switch-description{position:absolute;display:block;height:1px;width:1px;overflow:hidden;padding:1px;white-space:nowrap}@media (prefers-reduced-motion: no-preference){.c-switch-wrapper--allow-animation .c-switch{transition:background-color .15s cubic-bezier(.4,0,.9,1) 0s}}@media (prefers-reduced-motion: no-preference){.c-switch-wrapper--allow-animation .c-switch[checked]{transition:background-color .15s cubic-bezier(.4,0,.9,1) 0s}}@media (prefers-reduced-motion: no-preference){.c-switch-wrapper--allow-animation .c-switch-control{transition:transform .15s cubic-bezier(.4,0,.9,1) 0s}}@media (prefers-reduced-motion: no-preference){.c-switch-input:checked+.c-switch-wrapper--allow-animation .c-switch-control{transition:transform .15s cubic-bezier(.4,0,.9,1) 0s}}@media (prefers-reduced-motion: no-preference){.c-switch-input:checked+.c-switch-wrapper--allow-animation .c-switch-control .c-pieIcon--check{transition:color .15s cubic-bezier(.4,0,.9,1) 0s}}@media (prefers-reduced-motion: no-preference){.c-switch-input:disabled~.c-switch-wrapper--allow-animation .c-switch-control .c-pieIcon--check{transition:color .15s cubic-bezier(.4,0,.9,1) 0s}}.c-switch-wrapper:dir(rtl) .c-switch-input:checked+.c-switch-control{transform:translate(calc(-1 * var(--switch-translation)))}", $t = ["leading", "trailing"], Gt = "change", k = {
   checked: !1,
   disabled: !1,
   labelPlacement: "leading",
   required: !1,
   value: "on"
 };
-var Rt = Object.defineProperty, Dt = Object.getOwnPropertyDescriptor, f = (n, l, h, m) => {
-  for (var c = m > 1 ? void 0 : m ? Dt(l, h) : l, E = n.length - 1, M; E >= 0; E--)
+var Dt = Object.defineProperty, Rt = Object.getOwnPropertyDescriptor, f = (n, l, h, m) => {
+  for (var c = m > 1 ? void 0 : m ? Rt(l, h) : l, E = n.length - 1, M; E >= 0; E--)
     (M = n[E]) && (c = (m ? M(l, h, c) : M(c)) || c);
-  return m && c && Rt(l, h, c), c;
+  return m && c && Dt(l, h, c), c;
 };
 const Ht = "pie-switch";
-let p = class extends Tt(Lt(q)) {
+let p = class extends Lt(q) {
   constructor() {
-    super(...arguments), this.labelPlacement = k.labelPlacement, this.checked = k.checked, this.required = k.required, this.value = k.value, this.disabled = k.disabled;
+    super(...arguments), this.labelPlacement = k.labelPlacement, this.checked = k.checked, this.required = k.required, this.value = k.value, this.disabled = k.disabled, this._isAnimationAllowed = !1;
   }
   firstUpdated() {
     this.handleFormAssociation(), this.input.addEventListener("invalid", (n) => {
@@ -519,7 +519,7 @@ let p = class extends Tt(Lt(q)) {
     const { checked: l } = n == null ? void 0 : n.currentTarget;
     this.checked = l;
     const h = Nt(n);
-    this.dispatchEvent(h), this.handleFormAssociation();
+    this._isAnimationAllowed || (this._isAnimationAllowed = !0), this.dispatchEvent(h), this.handleFormAssociation();
   }
   /**
    * Returns a boolean value which indicates validity of the value of the component. If the value is invalid, this method also fires the invalid event on the component.
@@ -589,14 +589,14 @@ let p = class extends Tt(Lt(q)) {
       aria: n,
       checked: l,
       disabled: h,
-      isRTL: m,
-      required: c
+      required: m,
+      _isAnimationAllowed: c
     } = this;
     return N`
             <label
-                class="${St({
+                class="${Vt({
       "c-switch-wrapper": !0,
-      "c-switch-wrapper--rtl": m
+      "c-switch-wrapper--allow-animation": c
     })}"
                 ?disabled=${h}>
                 ${this.renderSwitchLabel("leading")}
@@ -609,11 +609,11 @@ let p = class extends Tt(Lt(q)) {
                         role="switch"
                         type="checkbox"
                         class="c-switch-input"
-                        .required=${c}
+                        .required=${m}
                         .checked="${l}"
                         .disabled="${h}"
                         @change="${this.handleChange}"
-                        aria-label="${Vt(n == null ? void 0 : n.label)}"
+                        aria-label="${Tt(n == null ? void 0 : n.label)}"
                         aria-describedby="${n != null && n.describedBy ? "switch-description" : L}">
                     <div class="c-switch-control">
                         ${l ? N`<icon-check></icon-check>` : L}
@@ -656,6 +656,9 @@ f([
 f([
   dt("label")
 ], p.prototype, "focusTarget", 2);
+f([
+  St()
+], p.prototype, "_isAnimationAllowed", 2);
 p = f([
   Pt("pie-switch")
 ], p);

package/dist/react.d.ts

@@ -5,7 +5,6 @@ import { GenericConstructor } from '@justeattakeaway/pie-webc-core';
 import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElement';
 import { PIEInputElement } from '@justeattakeaway/pie-webc-core';
 import * as React_2 from 'react';
-import { RTLInterface } from '@justeattakeaway/pie-webc-core';
 import { TemplateResult } from 'lit-html';
 
 declare type AriaProps = {
@@ -43,6 +42,7 @@ declare class PieSwitch_2 extends PieSwitch_base implements SwitchProps, PIEInpu
     disabled: boolean;
     private input;
     focusTarget: HTMLElement;
+    private _isAnimationAllowed;
     protected firstUpdated(): void;
     protected updated(): void;
     static styles: CSSResult;
@@ -94,7 +94,7 @@ declare class PieSwitch_2 extends PieSwitch_base implements SwitchProps, PIEInpu
     render(): TemplateResult<1>;
 }
 
-declare const PieSwitch_base: GenericConstructor<FormControlInterface> & GenericConstructor<RTLInterface> & typeof PieElement;
+declare const PieSwitch_base: GenericConstructor<FormControlInterface> & typeof PieElement;
 
 declare type PieSwitchEvents = {
     onInvalid?: (event: Event) => void;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-switch",
   "description": "PIE Design System Switch built using Web Components",
-  "version": "2.0.6",
+  "version": "2.1.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/justeattakeaway/pie",
@@ -41,13 +41,13 @@
     "@custom-elements-manifest/analyzer": "0.9.0",
     "@justeattakeaway/pie-components-config": "0.21.0",
     "@justeattakeaway/pie-css": "0.19.0",
-    "@justeattakeaway/pie-monorepo-utils": "0.6.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.1",
-    "@justeattakeaway/pie-webc-core": "1.0.0",
+    "@justeattakeaway/pie-icons-webc": "1.14.2",
+    "@justeattakeaway/pie-webc-core": "1.1.0",
     "element-internals-polyfill": "1.3.11"
   },
   "volta": {

package/src/index.ts

@@ -2,14 +2,17 @@ import {
     html, unsafeCSS, nothing,
 } from 'lit';
 import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElement';
-import { property, query } from 'lit/decorators.js';
+import { property, query, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import 'element-internals-polyfill';
 
 import {
-    RtlMixin, validPropertyValues, FormControlMixin, wrapNativeEvent, type PIEInputElement,
+    validPropertyValues,
+    FormControlMixin,
+    wrapNativeEvent,
     safeCustomElement,
+    type PIEInputElement,
 } from '@justeattakeaway/pie-webc-core';
 import '@justeattakeaway/pie-icons-webc/dist/IconCheck.js';
 
@@ -26,7 +29,7 @@ const componentSelector = 'pie-switch';
  * @event {CustomEvent} change - when the switch checked state is changed.
  */
 @safeCustomElement('pie-switch')
-export class PieSwitch extends FormControlMixin(RtlMixin(PieElement)) implements SwitchProps, PIEInputElement {
+export class PieSwitch extends FormControlMixin(PieElement) implements SwitchProps, PIEInputElement {
     @property({ type: String })
     public label: SwitchProps['label'];
 
@@ -58,6 +61,9 @@ export class PieSwitch extends FormControlMixin(RtlMixin(PieElement)) implements
     @query('label')
     public focusTarget!: HTMLElement;
 
+    @state()
+    private _isAnimationAllowed = false;
+
     protected firstUpdated (): void {
         this.handleFormAssociation();
         // This ensures that invalid events triggered by checkValidity() are propagated to the custom element
@@ -101,6 +107,10 @@ export class PieSwitch extends FormControlMixin(RtlMixin(PieElement)) implements
         this.checked = checked;
         const changedEvent = wrapNativeEvent(event);
 
+        if (!this._isAnimationAllowed) {
+            this._isAnimationAllowed = true;
+        }
+
         this.dispatchEvent(changedEvent);
         this.handleFormAssociation();
     }
@@ -189,13 +199,13 @@ export class PieSwitch extends FormControlMixin(RtlMixin(PieElement)) implements
             aria,
             checked,
             disabled,
-            isRTL,
             required,
+            _isAnimationAllowed,
         } = this;
 
         const classes = {
             'c-switch-wrapper': true,
-            'c-switch-wrapper--rtl': isRTL,
+            'c-switch-wrapper--allow-animation': _isAnimationAllowed,
         };
 
         return html`

package/src/switch.scss

@@ -49,15 +49,11 @@
     border-radius: var(--switch-radius);
     background-color: var(--int-states-mixin-bg-color);
 
-    @include switch-transition(background-color);
-
     @include p.interactive-states('--dt-color-interactive-form');
 
     &[checked] {
         --int-states-mixin-bg-color: var(--dt-color-interactive-brand);
 
-        @include switch-transition(background-color);
-
         @include p.interactive-states('--dt-color-interactive-brand');
     }
 
@@ -93,14 +89,13 @@
 .c-switch-control {
     position: absolute;
     left: 2px;
-    @include switch-transition(transform);
     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--rtl & {
+    .c-switch-wrapper:dir(rtl) & {
         position: absolute;
         left: initial;
         right: 2px;
@@ -111,11 +106,9 @@
     }
 
     .c-switch-input:checked + & {
-        @include switch-transition(transform);
         transform: translateX(var(--switch-translation));
 
         .c-pieIcon--check {
-            @include switch-transition(color);
             color: var(--dt-color-interactive-brand);
         }
     }
@@ -124,7 +117,6 @@
         color: var(--switch-bg-color--disabled);
 
         .c-pieIcon--check {
-            @include switch-transition(color);
             color: var(--switch-bg-color--disabled);
         }
     }
@@ -139,9 +131,39 @@
     @include p.visually-hidden;
 }
 
-.c-switch-wrapper--rtl {
-    .c-switch-input:checked + .c-switch-control {
+
+.c-switch-wrapper--allow-animation {
+    /* stylelint-disable-next-line no-descending-specificity */
+    .c-switch {
+        @include switch-transition(background-color);
+
+        &[checked] {
+            @include switch-transition(background-color);
+        }
+    }
+
+    /* stylelint-disable-next-line no-descending-specificity */
+    .c-switch-control {
         @include switch-transition(transform);
-        transform: translateX(calc(-1 * var(--switch-translation)));
+
+        .c-switch-input:checked + & {
+            @include switch-transition(transform);
+
+            .c-pieIcon--check {
+                @include switch-transition(color);
+            }
+        }
+
+        .c-switch-input:disabled ~ & {
+            .c-pieIcon--check {
+                @include switch-transition(color);
+            }
+        }
     }
 }
+
+.c-switch-wrapper:dir(rtl) {
+    .c-switch-input:checked + .c-switch-control {
+        transform: translateX(calc(-1 * var(--switch-translation)));
+    }
+}