@justeattakeaway/pie-switch 0.29.10 → 0.29.12

package/dist/index.js

@@ -1,8 +1,8 @@
 import { LitElement as Fe, html as A, nothing as C, unsafeCSS as Ae } from "lit";
 import { query as le, property as E } from "lit/decorators.js";
-import { FormControlMixin as Ie, RtlMixin as Se, wrapNativeEvent as Te, validPropertyValues as Ve, defineCustomElement as Le } from "@justeattakeaway/pie-webc-core";
+import { FormControlMixin as Ie, RtlMixin as Se, wrapNativeEvent as Ve, validPropertyValues as Te, defineCustomElement as Le } from "@justeattakeaway/pie-webc-core";
 import "@justeattakeaway/pie-icons-webc/dist/IconCheck.js";
-const Ne = `*,*:after,*:before{box-sizing:inherit}*,*:before,*:after{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}}
+const Ne = `*,*:after,*:before{box-sizing:inherit}*,*:before,*:after{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[data-is-rtl] .c-switch-control{position:absolute;left:initial;right:2px}.c-switch-wrapper[data-is-rtl] .c-switch-input:checked+.c-switch-control{transform:translate(calc(-1 * var(--switch-translation)))}@media (prefers-reduced-motion: no-preference){.c-switch-wrapper[data-is-rtl] .c-switch-input:checked+.c-switch-control{transition:transform .15s cubic-bezier(.4,0,.9,1) 0s}}
 `, Pe = ["leading", "trailing"], ze = "change", x = {
   checked: !1,
   required: !1,
@@ -12,7 +12,7 @@ const Ne = `*,*:after,*:before{box-sizing:inherit}*,*:before,*:after{cursor:inhe
 };
 (function() {
   (function(g) {
-    const n = /* @__PURE__ */ new WeakMap(), l = /* @__PURE__ */ new WeakMap(), h = /* @__PURE__ */ new WeakMap(), c = /* @__PURE__ */ new WeakMap(), w = /* @__PURE__ */ new WeakMap(), k = /* @__PURE__ */ new WeakMap(), M = /* @__PURE__ */ new WeakMap(), y = /* @__PURE__ */ new WeakMap(), z = /* @__PURE__ */ new WeakMap(), I = /* @__PURE__ */ new WeakMap(), q = /* @__PURE__ */ new WeakMap(), B = /* @__PURE__ */ new WeakMap(), U = /* @__PURE__ */ new WeakMap(), j = /* @__PURE__ */ new WeakMap(), S = /* @__PURE__ */ new WeakMap(), T = {
+    const n = /* @__PURE__ */ new WeakMap(), l = /* @__PURE__ */ new WeakMap(), h = /* @__PURE__ */ new WeakMap(), c = /* @__PURE__ */ new WeakMap(), w = /* @__PURE__ */ new WeakMap(), k = /* @__PURE__ */ new WeakMap(), M = /* @__PURE__ */ new WeakMap(), y = /* @__PURE__ */ new WeakMap(), z = /* @__PURE__ */ new WeakMap(), I = /* @__PURE__ */ new WeakMap(), q = /* @__PURE__ */ new WeakMap(), B = /* @__PURE__ */ new WeakMap(), U = /* @__PURE__ */ new WeakMap(), j = /* @__PURE__ */ new WeakMap(), S = /* @__PURE__ */ new WeakMap(), V = {
       ariaAtomic: "aria-atomic",
       ariaAutoComplete: "aria-autocomplete",
       ariaBusy: "aria-busy",
@@ -56,10 +56,10 @@ const Ne = `*,*:after,*:before{box-sizing:inherit}*,*:before,*:after{cursor:inhe
       ariaValueText: "aria-valuetext",
       role: "role"
     }, de = (t, e) => {
-      for (let i in T) {
+      for (let i in V) {
         e[i] = null;
         let a = null;
-        const r = T[i];
+        const r = V[i];
         Object.defineProperty(e, i, {
           get() {
             return a;
@@ -83,11 +83,11 @@ const Ne = `*,*:after,*:before{box-sizing:inherit}*,*:before,*:after{cursor:inhe
       let a = i.nextNode();
       const r = !e || t.disabled;
       for (; a; )
-        a.formDisabledCallback && r && R(a, t.disabled), a = i.nextNode();
-    }, Y = { attributes: !0, attributeFilter: ["disabled", "name"] }, V = P() ? new MutationObserver((t) => {
+        a.formDisabledCallback && r && $(a, t.disabled), a = i.nextNode();
+    }, Y = { attributes: !0, attributeFilter: ["disabled", "name"] }, T = P() ? new MutationObserver((t) => {
       for (const e of t) {
         const i = e.target;
-        if (e.attributeName === "disabled" && (i.constructor.formAssociated ? R(i, i.hasAttribute("disabled")) : i.localName === "fieldset" && G(i)), e.attributeName === "name" && i.constructor.formAssociated) {
+        if (e.attributeName === "disabled" && (i.constructor.formAssociated ? $(i, i.hasAttribute("disabled")) : i.localName === "fieldset" && G(i)), e.attributeName === "name" && i.constructor.formAssociated) {
           const a = c.get(i), r = z.get(i);
           a.setFormValue(r);
         }
@@ -100,8 +100,8 @@ const Ne = `*,*:after,*:before{box-sizing:inherit}*,*:before,*:after{cursor:inhe
           var u;
           if (c.has(s) && s.constructor.formAssociated && K(s), I.has(s)) {
             const d = I.get(s);
-            Object.keys(T).filter((f) => d[f] !== null).forEach((f) => {
-              s.setAttribute(T[f], d[f]);
+            Object.keys(V).filter((f) => d[f] !== null).forEach((f) => {
+              s.setAttribute(V[f], d[f]);
             }), I.delete(s);
           }
           if (S.has(s)) {
@@ -118,7 +118,7 @@ const Ne = `*,*:after,*:before{box-sizing:inherit}*,*:before,*:after{cursor:inhe
             for (; f; )
               K(f), f = v.nextNode();
           }
-          s.localName === "fieldset" && ((u = V.observe) === null || u === void 0 || u.call(V, s, Y), G(s, !0));
+          s.localName === "fieldset" && ((u = T.observe) === null || u === void 0 || u.call(T, s, Y), G(s, !0));
         }), o.forEach((s) => {
           const u = c.get(s);
           u && h.get(u) && J(u), M.has(s) && M.get(s).disconnect();
@@ -143,7 +143,7 @@ const Ne = `*,*:after,*:before{box-sizing:inherit}*,*:before,*:after{cursor:inhe
     const _ = {
       childList: !0,
       subtree: !0
-    }, R = (t, e) => {
+    }, $ = (t, e) => {
       t.toggleAttribute("internals-disabled", e), e ? t.setAttribute("aria-disabled", "true") : t.removeAttribute("aria-disabled"), t.formDisabledCallback && t.formDisabledCallback.apply(t, [e]);
     }, J = (t) => {
       h.get(t).forEach((i) => {
@@ -154,7 +154,7 @@ const Ne = `*,*:after,*:before{box-sizing:inherit}*,*:before,*:after{cursor:inhe
       return i.type = "hidden", i.name = t.getAttribute("name"), t.after(i), h.get(e).push(i), i;
     }, pe = (t, e) => {
       var i;
-      h.set(e, []), (i = V.observe) === null || i === void 0 || i.call(V, t, Y);
+      h.set(e, []), (i = T.observe) === null || i === void 0 || i.call(T, t, Y);
     }, X = (t, e) => {
       if (e.length) {
         Array.from(e).forEach((a) => a.addEventListener("click", t.click.bind(t)));
@@ -226,7 +226,7 @@ const Ne = `*,*:after,*:before{box-sizing:inherit}*,*:before,*:after{cursor:inhe
       for (let i in t)
         i !== "valid" && t[i] !== !1 && (e = !1);
       return e;
-    }, $ = /* @__PURE__ */ new WeakMap();
+    }, R = /* @__PURE__ */ new WeakMap();
     function ie(t, e) {
       t.toggleAttribute(e, !0), t.part && t.part.add(e);
     }
@@ -237,12 +237,12 @@ const Ne = `*,*:after,*:before{box-sizing:inherit}*,*:before,*:after{cursor:inhe
       constructor(e) {
         if (super(), !e || !e.tagName || e.tagName.indexOf("-") === -1)
           throw new TypeError("Illegal constructor");
-        $.set(this, e);
+        R.set(this, e);
       }
       add(e) {
         if (!/^--/.test(e) || typeof e != "string")
           throw new DOMException(`Failed to execute 'add' on 'CustomStateSet': The specified value ${e} must start with '--'.`);
-        const i = super.add(e), a = $.get(this), r = `state${e}`;
+        const i = super.add(e), a = R.get(this), r = `state${e}`;
         return a.isConnected ? ie(a, r) : setTimeout(() => {
           ie(a, r);
         }), i;
@@ -253,7 +253,7 @@ const Ne = `*,*:after,*:before{box-sizing:inherit}*,*:before,*:after{cursor:inhe
         super.clear();
       }
       delete(e) {
-        const i = super.delete(e), a = $.get(this);
+        const i = super.delete(e), a = R.get(this);
         return a.isConnected ? (a.toggleAttribute(`state${e}`, !1), a.part && a.part.remove(`state${e}`)) : setTimeout(() => {
           a.toggleAttribute(`state${e}`, !1), a.part && a.part.remove(`state${e}`);
         }), i;
@@ -456,7 +456,7 @@ const Ne = `*,*:after,*:before{box-sizing:inherit}*,*:before,*:after{cursor:inhe
             if (a.formAssociated) {
               const o = a.prototype.connectedCallback;
               a.prototype.connectedCallback = function() {
-                j.has(this) || (j.set(this, !0), this.hasAttribute("disabled") && R(this, !0)), o != null && o.apply(this), te(this);
+                j.has(this) || (j.set(this, !0), this.hasAttribute("disabled") && $(this, !0)), o != null && o.apply(this), te(this);
               };
             }
             e.call(this, i, a, r);
@@ -521,7 +521,7 @@ class p extends Ie(Se(Fe)) {
   handleChange(n) {
     const { checked: l } = n == null ? void 0 : n.currentTarget;
     this.checked = l;
-    const h = Te(n);
+    const h = Ve(n);
     this.dispatchEvent(h), this.handleFormAssociation();
   }
   /**
@@ -588,7 +588,7 @@ class p extends Ie(Se(Fe)) {
     return A`
             <label
                 class="c-switch-wrapper"
-                ?isRTL=${k}
+                ?data-is-rtl=${k}
                 ?disabled=${w}>
                 ${n === "leading" ? this.renderSwitchLabel() : C}
                 <div
@@ -625,7 +625,7 @@ m([
 ], p.prototype, "label", 2);
 m([
   E({ type: String }),
-  Ve(ce, Pe, x.labelPlacement)
+  Te(ce, Pe, x.labelPlacement)
 ], p.prototype, "labelPlacement", 2);
 m([
   E({ type: Object })

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-switch",
   "description": "PIE Design System Switch built using Web Components",
-  "version": "0.29.10",
+  "version": "0.29.12",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -36,11 +36,12 @@
   "license": "Apache-2.0",
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "0.9.0",
-    "@justeattakeaway/pie-components-config": "0.16.0",
+    "@justeattakeaway/pie-components-config": "0.17.0",
+    "@justeattakeaway/pie-css": "0.12.1",
     "cem-plugin-module-file-extensions": "0.0.5"
   },
   "dependencies": {
-    "@justeattakeaway/pie-icons-webc": "0.24.2",
+    "@justeattakeaway/pie-icons-webc": "0.25.0",
     "@justeattakeaway/pie-webc-core": "0.24.0",
     "@justeattakeaway/pie-wrapper-react": "0.14.1",
     "element-internals-polyfill": "1.3.11"

package/src/index.ts

@@ -181,7 +181,7 @@ export class PieSwitch extends FormControlMixin(RtlMixin(LitElement)) implements
         return html`
             <label
                 class="c-switch-wrapper"
-                ?isRTL=${isRTL}
+                ?data-is-rtl=${isRTL}
                 ?disabled=${disabled}>
                 ${labelPlacement === 'leading' ? this.renderSwitchLabel() : nothing}
                 <div

package/src/switch.scss

@@ -136,7 +136,7 @@
     @include p.visually-hidden;
 }
 
-.c-switch-wrapper[isRTL] {
+.c-switch-wrapper[data-is-rtl] {
     .c-switch-control {
         position: absolute;
         left: initial;