@justeattakeaway/pie-switch 2.3.32 → 2.3.34

package/dist/index.js

@@ -2,18 +2,18 @@ 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 Pt, wrapNativeEvent as _t, 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.32";
+O.v = "2.3.34";
 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 = {
         ariaAtomic: "aria-atomic",
@@ -86,11 +86,11 @@ function $t() {
         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);
           }
@@ -146,7 +146,7 @@ function $t() {
       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) => {
@@ -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,7 +256,7 @@ 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;
@@ -450,7 +450,7 @@ function $t() {
               if (a.formAssociated) {
                 const s = 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)), s != null && s.apply(this), at(this);
                 };
               }
               t.call(this, i, a, r);
@@ -481,10 +481,10 @@ function $t() {
       }
       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",
@@ -667,7 +667,7 @@ f([
   Tt()
 ], p.prototype, "_isAnimationAllowed", 2);
 p = f([
-  Rt("pie-switch")
+  $t("pie-switch")
 ], p);
 export {
   Xt as ON_SWITCH_CHANGED_EVENT,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-switch",
   "description": "PIE Design System Switch built using Web Components",
-  "version": "2.3.32",
+  "version": "2.3.34",
   "repository": {
     "type": "git",
     "url": "https://github.com/justeattakeaway/pie",
@@ -28,29 +28,29 @@
   },
   "scripts": {
     "build": "run -T vite build",
-    "build:react-wrapper": "npx build-react-wrapper",
+    "build:react-wrapper": "run -T build-react-wrapper",
     "create:manifest": "run -T cem analyze --litelement",
     "lint:scripts": "run -T eslint .",
     "lint:scripts:fix": "yarn lint:scripts --fix",
     "lint:style": "run -T stylelint ./src/**/*.{css,scss}",
     "lint:style:fix": "yarn lint:style --fix",
     "watch": "run -T vite build --watch",
-    "test:browsers": "npx playwright test -c ./playwright-lit.config.ts",
+    "test:browsers": "run -T playwright test -c ./playwright-lit.config.ts",
     "test:browsers:ci": "yarn test:browsers",
-    "test:visual": "run -T cross-env-shell PERCY_TOKEN=${PERCY_TOKEN_PIE_SWITCH} percy exec --allowed-hostname cloudfront.net -- npx playwright test -c ./playwright-lit-visual.config.ts",
+    "test:visual": "run -T cross-env-shell PERCY_TOKEN=${PERCY_TOKEN_PIE_SWITCH} percy exec --allowed-hostname cloudfront.net -- run -T playwright test -c ./playwright-lit-visual.config.ts",
     "test:visual:ci": "yarn test:visual"
   },
   "author": "Just Eat Takeaway.com - Design System Team",
   "license": "Apache-2.0",
   "devDependencies": {
-    "@justeattakeaway/pie-components-config": "0.21.2",
-    "@justeattakeaway/pie-css": "1.1.1",
-    "@justeattakeaway/pie-monorepo-utils": "0.9.1",
-    "@justeattakeaway/pie-wrapper-react": "0.14.4"
+    "@justeattakeaway/pie-components-config": "0.21.3",
+    "@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.1",
-    "@justeattakeaway/pie-webc-core": "14.0.1",
+    "@justeattakeaway/pie-icons-webc": "1.24.3",
+    "@justeattakeaway/pie-webc-core": "14.0.2",
     "element-internals-polyfill": "1.3.11"
   },
   "customElements": "custom-elements.json",