@justeattakeaway/pie-checkbox 0.13.9 → 0.14.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/index.js +86 -86
  2. package/package.json +3 -3
  3. package/src/checkbox.scss +53 -31
  4. package/src/index.ts +2 -2
package/dist/index.js CHANGED
@@ -1,11 +1,11 @@
1
- import { LitElement as v, html as u, nothing as B, unsafeCSS as F } from "lit";
1
+ import { LitElement as p, html as u, nothing as B, unsafeCSS as F } from "lit";
2
2
  import { classMap as m } from "lit/directives/class-map.js";
3
- import { state as y, property as r, query as q } from "lit/decorators.js";
4
- import { ifDefined as f } from "lit/directives/if-defined.js";
3
+ import { state as y, property as t, query as q } from "lit/decorators.js";
4
+ import { ifDefined as g } from "lit/directives/if-defined.js";
5
5
  import { live as A } from "lit/directives/live.js";
6
6
  import { FormControlMixin as S, RtlMixin as z, wrapNativeEvent as T, validPropertyValues as D, defineCustomElement as H } from "@justeattakeaway/pie-webc-core";
7
7
  import "@justeattakeaway/pie-assistive-text";
8
- const P = '*,*:after,*:before{box-sizing:inherit}@keyframes checkboxCheck{0%{width:0;height:0;border-color:#fff;transform:translateZ(0) rotate(45deg)}33%{width:8px;height:0;transform:translateZ(0) rotate(45deg)}to{width:8px;height:16px;border-color:#fff;border-bottom-right-radius:2px;transform:translate3d(0,-16px,1px) rotate(45deg)}}@keyframes scaleDown{0%{transform:scale(1)}to{transform:scale(0)}}@keyframes scaleUp{0%{transform:scale(0)}33%{transform:scale(.5)}to{transform:scale(1)}}.c-checkbox-tick{content:"";display:flex;flex:0 0 auto;width:var(--checkbox-width);height:var(--checkbox-height);margin:var(--checkbox-margin);border:1px solid var(--checkbox-border-color);border-radius:var(--checkbox-radius);background-color:var(--checkbox-bg-color)}@media (prefers-reduced-motion: no-preference){.c-checkbox-tick{transition:background-color var(--dt-motion-timing-100) var(--checkbox-motion-easing),border-color var(--dt-motion-timing-100) var(--checkbox-motion-easing);animation:scaleDown var(--dt-motion-timing-100) var(--checkbox-motion-easing)}}.c-checkbox-tick.c-checkbox-tick--disabled{--checkbox-bg-color: var(--dt-color-container-strong);--checkbox-border-color: var(--dt-color-disabled-01)}.c-checkbox-tick.c-checkbox-tick--status-error{--checkbox-border-color: var(--dt-color-support-error)}@media (prefers-reduced-motion: no-preference){.c-checkbox-tick.c-checkbox-tick--checked{animation:scaleUp var(--dt-motion-timing-100) var(--checkbox-motion-easing)}}.c-checkbox-tick.c-checkbox-tick--checked:not(.c-checkbox-tick--disabled){--checkbox-bg-color: var(--dt-color-interactive-brand);--checkbox-border-color: var(--dt-color-interactive-brand)}.c-checkbox-tick.c-checkbox-tick--checked.c-checkbox-tick--status-error{--checkbox-bg-color: var(--dt-color-support-error);--checkbox-border-color: var(--dt-color-support-error)}.c-checkbox-tick.c-checkbox-tick--checked:before{content:"";position:relative;top:55%;left:14%;border-right:2px solid transparent;border-bottom:2px solid transparent;transform:rotate(45deg);transform-origin:0% 100%;animation:checkboxCheck var(--dt-motion-timing-150) var(--checkbox-motion-easing) forwards}@media (prefers-reduced-motion: reduce){.c-checkbox-tick.c-checkbox-tick--checked:before{animation-duration:1ms!important;animation-delay:0!important;animation-iteration-count:1!important;width:8px;height:16px;border-color:#fff;border-bottom-right-radius:2px;transform:translate3d(0,-16px,0) rotate(45deg)}}@media only percy{.c-checkbox-tick.c-checkbox-tick--checked:before{animation:none;width:8px;height:16px;border-color:#fff;border-bottom-right-radius:2px;transform:translate3d(0,-16px,0) rotate(45deg)}}.c-checkbox-tick.c-checkbox-tick--checked.c-checkbox-tick--rtl:before{left:unset;right:50%}.c-checkbox-tick.c-checkbox-tick--indeterminate:not(.c-checkbox-tick--disabled){--checkbox-bg-color: var(--dt-color-interactive-brand);--checkbox-border-color: var(--dt-color-interactive-brand)}.c-checkbox-tick.c-checkbox-tick--indeterminate.c-checkbox-tick--status-error{--checkbox-bg-color: var(--dt-color-support-error);--checkbox-border-color: var(--dt-color-support-error)}.c-checkbox-tick.c-checkbox-tick--indeterminate:after{width:16px}@media (prefers-reduced-motion: no-preference){.c-checkbox-tick.c-checkbox-tick--indeterminate:after{transition:width var(--dt-motion-timing-100) var(--checkbox-motion-easing) var(--dt-motion-timing-100)}}.c-checkbox-text{display:inline;flex:1 1 auto;align-self:center;min-width:0;margin-inline-start:var(--checkbox-gap);white-space:normal;color:var(--checkbox-content-color);font-size:var(--checkbox-font-size);font-weight:var(--checkbox-font-weight)}.c-checkbox-tick:after{content:"";position:relative;top:47%;left:14%;width:0;height:2px;background-color:#fff}.c-checkbox-tick.c-checkbox-tick--rtl:after{left:unset;right:14%}.c-checkbox{--checkbox-height: 24px;--checkbox-width: 24px;--checkbox-radius: var(--dt-radius-rounded-a);--checkbox-margin: 1px;--checkbox-gap: var(--dt-spacing-b);--checkbox-font-size: p.font-size(--dt-font-body-l-size);--checkbox-font-weight: var(--dt-font-weight-regular);--checkbox-bg-color: var(--dt-color-container-default);--checkbox-border-color: var(--dt-color-border-form);--checkbox-content-color: var(--dt-color-content-default);--checkbox-motion-easing: var(--dt-motion-easing-persistent-functional);display:flex;flex-direction:column}.c-checkbox input{display:block;position:absolute;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);clip-path:inset(1px);white-space:nowrap}.c-checkbox label{display:flex;max-width:100%;white-space:nowrap;cursor:pointer}.c-checkbox:hover .c-checkbox-tick{--checkbox-bg-color: hsl( var(--dt-color-container-default-h), var(--dt-color-container-default-s), calc(var(--dt-color-container-default-l) - var(--dt-color-hover-01)) );transition:background-color var(--dt-motion-timing-200) var(--checkbox-motion-easing),border-color var(--dt-motion-timing-200) var(--checkbox-motion-easing)}.c-checkbox:active .c-checkbox-tick{--checkbox-bg-color: hsl( var(--dt-color-container-default-h), var(--dt-color-container-default-s), calc(var(--dt-color-container-default-l) - var(--dt-color-active-01)) );transition:background-color var(--dt-motion-timing-100) var(--checkbox-motion-easing),border-color var(--dt-motion-timing-100) var(--checkbox-motion-easing)}.c-checkbox.c-checkbox--disabled label{cursor:not-allowed}.c-checkbox input:focus-visible+label .c-checkbox-tick{box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer);outline:none}.c-checkbox.c-checkbox--disabled:hover .c-checkbox-tick,.c-checkbox.c-checkbox--disabled:active .c-checkbox-tick{--checkbox-bg-color: var(--dt-color-container-strong);--checkbox-border-color: var(--dt-color-disabled-01)}.c-checkbox.c-checkbox--status-error:hover .c-checkbox-tick{--checkbox-bg-color: hsl( var(--dt-color-container-default-h), var(--dt-color-container-default-s), calc(var(--dt-color-container-default-l) - var(--dt-color-hover-01)) )}.c-checkbox.c-checkbox--status-error:active .c-checkbox-tick{--checkbox-bg-color: hsl( var(--dt-color-container-default-h), var(--dt-color-container-default-s), calc(var(--dt-color-container-default-l) - var(--dt-color-active-01)) )}.c-checkbox.c-checkbox--checked:not(.c-checkbox--disabled):hover .c-checkbox-tick,.c-checkbox.c-checkbox--indeterminate:not(.c-checkbox--disabled):hover .c-checkbox-tick{--checkbox-bg-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)) );--checkbox-border-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-checkbox.c-checkbox--checked.c-checkbox--status-error:hover .c-checkbox-tick,.c-checkbox.c-checkbox--indeterminate.c-checkbox--status-error:hover .c-checkbox-tick{--checkbox-bg-color: hsl( var(--dt-color-support-error-h), var(--dt-color-support-error-s), calc(var(--dt-color-support-error-l) - var(--dt-color-hover-01)) );--checkbox-border-color: hsl( var(--dt-color-support-error-h), var(--dt-color-support-error-s), calc(var(--dt-color-support-error-l) - var(--dt-color-hover-01)) )}.c-checkbox.c-checkbox--checked:not(.c-checkbox--disabled):active .c-checkbox-tick,.c-checkbox.c-checkbox--indeterminate:not(.c-checkbox--disabled):active .c-checkbox-tick{--checkbox-bg-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)) );--checkbox-border-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)) )}.c-checkbox.c-checkbox--checked.c-checkbox--status-error:active .c-checkbox-tick,.c-checkbox.c-checkbox--indeterminate.c-checkbox--status-error:active .c-checkbox-tick{--checkbox-bg-color: hsl( var(--dt-color-support-error-h), var(--dt-color-support-error-s), calc(var(--dt-color-support-error-l) - var(--dt-color-active-01)) );--checkbox-border-color: hsl( var(--dt-color-support-error-h), var(--dt-color-support-error-s), calc(var(--dt-color-support-error-l) - var(--dt-color-active-01)) )}', R = ["default", "success", "error"], i = {
8
+ const P = '*,*:after,*:before{box-sizing:inherit}@keyframes checkboxCheck{0%{width:0;height:0;border-color:#fff;transform:translateZ(0) rotate(45deg)}33%{width:8px;height:0;transform:translateZ(0) rotate(45deg)}to{width:8px;height:16px;border-color:#fff;border-bottom-right-radius:2px;transform:translate3d(0,-16px,1px) rotate(45deg)}}@keyframes scaleDown{0%{transform:scale(1)}to{transform:scale(0)}}@keyframes scaleUp{0%{transform:scale(0)}33%{transform:scale(.5)}to{transform:scale(1)}}.c-checkbox-tick{content:"";display:flex;flex:0 0 auto;width:var(--checkbox-width);height:var(--checkbox-height);margin:var(--checkbox-margin);border:1px solid var(--checkbox-border-color);border-radius:var(--checkbox-radius);background-color:var(--checkbox-bg-color)}@media (prefers-reduced-motion: no-preference){.c-checkbox-tick{transition:background-color var(--dt-motion-timing-100) var(--checkbox-motion-easing),border-color var(--dt-motion-timing-100) var(--checkbox-motion-easing);animation:scaleDown var(--dt-motion-timing-100) var(--checkbox-motion-easing)}}.c-checkbox-tick.is-disabled{--checkbox-bg-color: var(--dt-color-container-strong);--checkbox-border-color: var(--dt-color-disabled-01)}.c-checkbox-tick.c-checkbox-tick--status-error{--checkbox-border-color: var(--dt-color-support-error)}@media (prefers-reduced-motion: no-preference){.c-checkbox-tick.c-checkbox-tick--checked{animation:scaleUp var(--dt-motion-timing-100) var(--checkbox-motion-easing)}}.c-checkbox-tick.c-checkbox-tick--checked:not(.is-disabled){--checkbox-bg-color: var(--dt-color-interactive-brand);--checkbox-border-color: var(--checkbox-bg-color)}.c-checkbox-tick.c-checkbox-tick--checked.c-checkbox-tick--status-error{--checkbox-bg-color: var(--dt-color-support-error);--checkbox-border-color: var(--checkbox-bg-color)}.c-checkbox-tick.c-checkbox-tick--checked:before{content:"";position:relative;top:55%;left:14%;border-right:2px solid transparent;border-bottom:2px solid transparent;transform:rotate(45deg);transform-origin:0% 100%;animation:checkboxCheck var(--dt-motion-timing-150) var(--checkbox-motion-easing) forwards}@media (prefers-reduced-motion: reduce){.c-checkbox-tick.c-checkbox-tick--checked:before{animation-duration:1ms!important;animation-delay:0!important;animation-iteration-count:1!important;width:8px;height:16px;border-color:#fff;border-bottom-right-radius:2px;transform:translate3d(0,-16px,0) rotate(45deg)}}@media only percy{.c-checkbox-tick.c-checkbox-tick--checked:before{animation:none;width:8px;height:16px;border-color:#fff;border-bottom-right-radius:2px;transform:translate3d(0,-16px,0) rotate(45deg)}}.c-checkbox-tick.c-checkbox-tick--checked.c-checkbox-tick--rtl:before{left:unset;right:50%}.c-checkbox-tick.c-checkbox-tick--indeterminate:not(.is-disabled){--checkbox-bg-color: var(--dt-color-interactive-brand);--checkbox-border-color: var(--checkbox-bg-color)}.c-checkbox-tick.c-checkbox-tick--indeterminate.c-checkbox-tick--status-error{--checkbox-bg-color: var(--dt-color-support-error);--checkbox-border-color: var(--checkbox-bg-color)}.c-checkbox-tick.c-checkbox-tick--indeterminate:after{width:16px}@media (prefers-reduced-motion: no-preference){.c-checkbox-tick.c-checkbox-tick--indeterminate:after{transition:width var(--dt-motion-timing-100) var(--checkbox-motion-easing) var(--dt-motion-timing-100)}}.c-checkbox-text{display:inline;flex:1 1 auto;align-self:center;min-width:0;margin-inline-start:var(--checkbox-gap);white-space:normal;color:var(--checkbox-content-color);font-size:var(--checkbox-font-size);font-weight:var(--checkbox-font-weight)}.c-checkbox-tick:after{content:"";position:relative;top:47%;left:14%;width:0;height:2px;background-color:#fff}.c-checkbox-tick.c-checkbox-tick--rtl:after{left:unset;right:14%}.c-checkbox{--checkbox-height: 24px;--checkbox-width: 24px;--checkbox-radius: var(--dt-radius-rounded-a);--checkbox-margin: 1px;--checkbox-gap: var(--dt-spacing-b);--checkbox-font-size: p.font-size(--dt-font-body-l-size);--checkbox-font-weight: var(--dt-font-weight-regular);--checkbox-bg-color: var(--dt-color-container-default);--checkbox-border-color: var(--dt-color-border-form);--checkbox-content-color: var(--dt-color-content-default);--checkbox-motion-easing: var(--dt-motion-easing-persistent-functional);display:flex;flex-direction:column}.c-checkbox input{display:block;position:absolute;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);clip-path:inset(1px);white-space:nowrap}.c-checkbox label{display:flex;max-width:100%;white-space:nowrap;cursor:pointer}.c-checkbox:hover .c-checkbox-tick{--checkbox-bg-color: hsl( var(--dt-color-container-default-h), var(--dt-color-container-default-s), calc(var(--dt-color-container-default-l) - var(--dt-color-hover-01)) );transition:background-color var(--dt-motion-timing-200) var(--checkbox-motion-easing),border-color var(--dt-motion-timing-200) var(--checkbox-motion-easing)}@supports (background-color: color-mix(in srgb,black,white)){.c-checkbox:hover .c-checkbox-tick{--checkbox-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-container-default))}}.c-checkbox:active .c-checkbox-tick{--checkbox-bg-color: hsl( var(--dt-color-container-default-h), var(--dt-color-container-default-s), calc(var(--dt-color-container-default-l) - var(--dt-color-active-01)) );transition:background-color var(--dt-motion-timing-100) var(--checkbox-motion-easing),border-color var(--dt-motion-timing-100) var(--checkbox-motion-easing)}@supports (background-color: color-mix(in srgb,black,white)){.c-checkbox:active .c-checkbox-tick{--checkbox-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-container-default))}}.c-checkbox.is-disabled label{cursor:not-allowed}.c-checkbox input:focus-visible+label .c-checkbox-tick{box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer);outline:none}.c-checkbox.is-disabled:hover .c-checkbox-tick,.c-checkbox.is-disabled:active .c-checkbox-tick{--checkbox-bg-color: var(--dt-color-container-strong);--checkbox-border-color: var(--dt-color-disabled-01)}.c-checkbox.c-checkbox--status-error:hover .c-checkbox-tick{--checkbox-bg-color: hsl( var(--dt-color-container-default-h), var(--dt-color-container-default-s), calc(var(--dt-color-container-default-l) - var(--dt-color-hover-01)) )}@supports (background-color: color-mix(in srgb,black,white)){.c-checkbox.c-checkbox--status-error:hover .c-checkbox-tick{--checkbox-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-container-default))}}.c-checkbox.c-checkbox--status-error:active .c-checkbox-tick{--checkbox-bg-color: hsl( var(--dt-color-container-default-h), var(--dt-color-container-default-s), calc(var(--dt-color-container-default-l) - var(--dt-color-active-01)) )}@supports (background-color: color-mix(in srgb,black,white)){.c-checkbox.c-checkbox--status-error:active{--checkbox-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-container-default))}}.c-checkbox.c-checkbox--checked:not(.is-disabled):hover .c-checkbox-tick,.c-checkbox.c-checkbox--indeterminate:not(.is-disabled):hover .c-checkbox-tick{--checkbox-bg-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)) );--checkbox-border-color: var(--checkbox-bg-color)}@supports (background-color: color-mix(in srgb,black,white)){.c-checkbox.c-checkbox--checked:not(.is-disabled):hover .c-checkbox-tick,.c-checkbox.c-checkbox--indeterminate:not(.is-disabled):hover .c-checkbox-tick{--checkbox-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-interactive-brand));--checkbox-border-color: var(--checkbox-bg-color)}}.c-checkbox.c-checkbox--checked.c-checkbox--status-error:hover .c-checkbox-tick,.c-checkbox.c-checkbox--indeterminate.c-checkbox--status-error:hover .c-checkbox-tick{--checkbox-bg-color: hsl( var(--dt-color-support-error-h), var(--dt-color-support-error-s), calc(var(--dt-color-support-error-l) - var(--dt-color-hover-01)) );--checkbox-border-color: var(--checkbox-bg-color)}@supports (background-color: color-mix(in srgb,black,white)){.c-checkbox.c-checkbox--checked.c-checkbox--status-error:hover .c-checkbox-tick,.c-checkbox.c-checkbox--indeterminate.c-checkbox--status-error:hover .c-checkbox-tick{--checkbox-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-support-error));--checkbox-border-color: var(--checkbox-bg-color)}}.c-checkbox.c-checkbox--checked:not(.is-disabled):active .c-checkbox-tick,.c-checkbox.c-checkbox--indeterminate:not(.is-disabled):active .c-checkbox-tick{--checkbox-bg-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)) );--checkbox-border-color: var(--checkbox-bg-color)}@supports (background-color: color-mix(in srgb,black,white)){.c-checkbox.c-checkbox--checked:not(.is-disabled):active .c-checkbox-tick,.c-checkbox.c-checkbox--indeterminate:not(.is-disabled):active .c-checkbox-tick{--checkbox-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-interactive-brand));--checkbox-border-color: var(--checkbox-bg-color)}}.c-checkbox.c-checkbox--checked.c-checkbox--status-error:active .c-checkbox-tick,.c-checkbox.c-checkbox--indeterminate.c-checkbox--status-error:active .c-checkbox-tick{--checkbox-bg-color: hsl( var(--dt-color-support-error-h), var(--dt-color-support-error-s), calc(var(--dt-color-support-error-l) - var(--dt-color-active-01)) );--checkbox-border-color: var(--checkbox-bg-color)}@supports (background-color: color-mix(in srgb,black,white)){.c-checkbox.c-checkbox--checked.c-checkbox--status-error:active .c-checkbox-tick,.c-checkbox.c-checkbox--indeterminate.c-checkbox--status-error:active .c-checkbox-tick{--checkbox-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-support-error));--checkbox-border-color: var(--checkbox-bg-color)}}', R = ["default", "success", "error"], a = {
9
9
  // a default value for the html <input type="checkbox" /> value attribute.
10
10
  // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#value
11
11
  value: "on",
@@ -16,23 +16,23 @@ const P = '*,*:after,*:before{box-sizing:inherit}@keyframes checkboxCheck{0%{wid
16
16
  required: !1,
17
17
  status: "default"
18
18
  };
19
- var L = Object.defineProperty, o = (p, e, t, s) => {
20
- for (var a = void 0, n = p.length - 1, l; n >= 0; n--)
21
- (l = p[n]) && (a = l(e, t, a) || a);
22
- return a && L(e, t, a), a;
19
+ var L = Object.defineProperty, e = (v, c, r, d) => {
20
+ for (var i = void 0, n = v.length - 1, l; n >= 0; n--)
21
+ (l = v[n]) && (i = l(c, r, i) || i);
22
+ return i && L(c, r, i), i;
23
23
  };
24
- const w = "pie-checkbox", g = "assistive-text", b = class b extends S(z(v)) {
24
+ const w = "pie-checkbox", f = "assistive-text", h = class h extends S(z(p)) {
25
25
  constructor() {
26
- super(...arguments), this._disabledByParent = !1, this._visuallyHiddenError = !1, this.value = i.value, this.checked = i.checked, this.defaultChecked = i.defaultChecked, this.disabled = i.disabled, this.required = i.required, this.indeterminate = i.indeterminate, this.status = i.status;
26
+ super(...arguments), this._disabledByParent = !1, this._visuallyHiddenError = !1, this.value = a.value, this.checked = a.checked, this.defaultChecked = a.defaultChecked, this.disabled = a.disabled, this.required = a.required, this.indeterminate = a.indeterminate, this.status = a.status;
27
27
  }
28
28
  connectedCallback() {
29
29
  super.connectedCallback(), this._abortController = new AbortController();
30
- const { signal: e } = this._abortController;
31
- this.addEventListener("pie-checkbox-group-disabled", (t) => {
32
- this._disabledByParent = t.detail.disabled;
33
- }, { signal: e }), this.addEventListener("pie-checkbox-group-error", (t) => {
34
- this._visuallyHiddenError = t.detail.error;
35
- }, { signal: e });
30
+ const { signal: c } = this._abortController;
31
+ this.addEventListener("pie-checkbox-group-disabled", (r) => {
32
+ this._disabledByParent = r.detail.disabled;
33
+ }, { signal: c }), this.addEventListener("pie-checkbox-group-error", (r) => {
34
+ this._visuallyHiddenError = r.detail.error;
35
+ }, { signal: c });
36
36
  }
37
37
  disconnectedCallback() {
38
38
  super.disconnectedCallback(), this._abortController.abort();
@@ -56,8 +56,8 @@ const w = "pie-checkbox", g = "assistive-text", b = class b extends S(z(v)) {
56
56
  * or because the disabled state changed on a <fieldset> that's an ancestor of this element.
57
57
  * @param disabled - The latest disabled state of the input.
58
58
  */
59
- formDisabledCallback(e) {
60
- this.disabled = e;
59
+ formDisabledCallback(c) {
60
+ this.disabled = c;
61
61
  }
62
62
  updated() {
63
63
  this._handleFormAssociation();
@@ -66,11 +66,11 @@ const w = "pie-checkbox", g = "assistive-text", b = class b extends S(z(v)) {
66
66
  * Captures the native change event and wraps it in a custom event.
67
67
  * @param {Event} event - This should be the change event that was listened for on an input element with `type="checkbox"`.
68
68
  */
69
- _handleChange(e) {
70
- const { checked: t } = e == null ? void 0 : e.currentTarget;
71
- this.checked = t;
72
- const s = T(e);
73
- this.dispatchEvent(s), this._handleFormAssociation();
69
+ _handleChange(c) {
70
+ const { checked: r } = c == null ? void 0 : c.currentTarget;
71
+ this.checked = r;
72
+ const d = T(c);
73
+ this.dispatchEvent(d), this._handleFormAssociation();
74
74
  }
75
75
  /**
76
76
  * Called when the form that contains this component is reset.
@@ -81,34 +81,34 @@ const w = "pie-checkbox", g = "assistive-text", b = class b extends S(z(v)) {
81
81
  if (this.checked === this.defaultChecked)
82
82
  return;
83
83
  this.checked = this.defaultChecked;
84
- const e = new Event("change", { bubbles: !0, composed: !0 });
85
- this.dispatchEvent(e), this._handleFormAssociation();
84
+ const c = new Event("change", { bubbles: !0, composed: !0 });
85
+ this.dispatchEvent(c), this._handleFormAssociation();
86
86
  }
87
87
  render() {
88
88
  const {
89
- checked: e,
90
- value: t,
91
- name: s,
92
- disabled: a,
89
+ checked: c,
90
+ value: r,
91
+ name: d,
92
+ disabled: i,
93
93
  _disabledByParent: n,
94
94
  _visuallyHiddenError: l,
95
95
  required: C,
96
96
  indeterminate: k,
97
97
  assistiveText: x,
98
- status: h,
98
+ status: b,
99
99
  isRTL: _
100
- } = this, d = a || n, $ = {
100
+ } = this, s = i || n, $ = {
101
101
  "c-checkbox": !0,
102
- [`c-checkbox--status-${h}`]: !d,
103
- "c-checkbox--disabled": d,
104
- "c-checkbox--checked": e,
105
- "c-checkbox--indeterminate": k && !e
102
+ [`c-checkbox--status-${b}`]: !s,
103
+ "is-disabled": s,
104
+ "c-checkbox--checked": c,
105
+ "c-checkbox--indeterminate": k && !c
106
106
  }, E = {
107
107
  "c-checkbox-tick": !0,
108
- [`c-checkbox-tick--status-${h}`]: !d,
109
- "c-checkbox-tick--disabled": d,
110
- "c-checkbox-tick--checked": e,
111
- "c-checkbox-tick--indeterminate": k && !e,
108
+ [`c-checkbox-tick--status-${b}`]: !s,
109
+ "is-disabled": s,
110
+ "c-checkbox-tick--checked": c,
111
+ "c-checkbox-tick--indeterminate": k && !c,
112
112
  "c-checkbox-tick--rtl": _
113
113
  };
114
114
  return u`
@@ -117,14 +117,14 @@ const w = "pie-checkbox", g = "assistive-text", b = class b extends S(z(v)) {
117
117
  <input
118
118
  type="checkbox"
119
119
  id="inputId"
120
- .value=${t}
121
- .checked=${A(e)}
122
- name=${f(s)}
123
- ?disabled=${d}
120
+ .value=${r}
121
+ .checked=${A(c)}
122
+ name=${g(d)}
123
+ ?disabled=${s}
124
124
  ?required=${C}
125
125
  .indeterminate=${k}
126
- aria-invalid=${h === "error" ? "true" : "false"}
127
- aria-describedby=${f(x ? g : void 0)}
126
+ aria-invalid=${b === "error" ? "true" : "false"}
127
+ aria-describedby=${g(x ? f : void 0)}
128
128
  @change=${this._handleChange}
129
129
  data-test-id="pie-checkbox-input"
130
130
  />
@@ -137,8 +137,8 @@ const w = "pie-checkbox", g = "assistive-text", b = class b extends S(z(v)) {
137
137
  </label>
138
138
  ${x ? u`
139
139
  <pie-assistive-text
140
- id="${g}"
141
- variant=${h}
140
+ id="${f}"
141
+ variant=${b}
142
142
  ?isVisuallyHidden=${l}
143
143
  data-test-id="pie-checkbox-assistive-text">
144
144
  ${x}
@@ -146,48 +146,48 @@ const w = "pie-checkbox", g = "assistive-text", b = class b extends S(z(v)) {
146
146
  </div>`;
147
147
  }
148
148
  };
149
- b.shadowRootOptions = { ...v.shadowRootOptions, delegatesFocus: !0 }, b.styles = F(P);
150
- let c = b;
151
- o([
149
+ h.shadowRootOptions = { ...p.shadowRootOptions, delegatesFocus: !0 }, h.styles = F(P);
150
+ let o = h;
151
+ e([
152
152
  y()
153
- ], c.prototype, "_disabledByParent");
154
- o([
153
+ ], o.prototype, "_disabledByParent");
154
+ e([
155
155
  y()
156
- ], c.prototype, "_visuallyHiddenError");
157
- o([
158
- r({ type: String })
159
- ], c.prototype, "value");
160
- o([
161
- r({ type: String })
162
- ], c.prototype, "name");
163
- o([
164
- r({ type: Boolean, reflect: !0 })
165
- ], c.prototype, "checked");
166
- o([
167
- r({ type: Boolean, reflect: !0 })
168
- ], c.prototype, "defaultChecked");
169
- o([
170
- r({ type: Boolean, reflect: !0 })
171
- ], c.prototype, "disabled");
172
- o([
173
- r({ type: Boolean, reflect: !0 })
174
- ], c.prototype, "required");
175
- o([
176
- r({ type: Boolean, reflect: !0 })
177
- ], c.prototype, "indeterminate");
178
- o([
156
+ ], o.prototype, "_visuallyHiddenError");
157
+ e([
158
+ t({ type: String })
159
+ ], o.prototype, "value");
160
+ e([
161
+ t({ type: String })
162
+ ], o.prototype, "name");
163
+ e([
164
+ t({ type: Boolean, reflect: !0 })
165
+ ], o.prototype, "checked");
166
+ e([
167
+ t({ type: Boolean, reflect: !0 })
168
+ ], o.prototype, "defaultChecked");
169
+ e([
170
+ t({ type: Boolean, reflect: !0 })
171
+ ], o.prototype, "disabled");
172
+ e([
173
+ t({ type: Boolean, reflect: !0 })
174
+ ], o.prototype, "required");
175
+ e([
176
+ t({ type: Boolean, reflect: !0 })
177
+ ], o.prototype, "indeterminate");
178
+ e([
179
179
  q('input[type="checkbox"]')
180
- ], c.prototype, "_checkbox");
181
- o([
182
- r({ type: String })
183
- ], c.prototype, "assistiveText");
184
- o([
185
- r({ type: String }),
186
- D(w, R, i.status)
187
- ], c.prototype, "status");
188
- H(w, c);
180
+ ], o.prototype, "_checkbox");
181
+ e([
182
+ t({ type: String })
183
+ ], o.prototype, "assistiveText");
184
+ e([
185
+ t({ type: String }),
186
+ D(w, R, a.status)
187
+ ], o.prototype, "status");
188
+ H(w, o);
189
189
  export {
190
- c as PieCheckbox,
191
- i as defaultProps,
190
+ o as PieCheckbox,
191
+ a as defaultProps,
192
192
  R as statusTypes
193
193
  };
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@justeattakeaway/pie-checkbox",
3
3
  "description": "PIE Design System Checkbox built using Web Components",
4
- "version": "0.13.9",
4
+ "version": "0.14.0",
5
5
  "type": "module",
6
6
  "main": "dist/index.js",
7
7
  "module": "dist/index.js",
@@ -34,11 +34,11 @@
34
34
  "devDependencies": {
35
35
  "@custom-elements-manifest/analyzer": "0.9.0",
36
36
  "@justeattakeaway/pie-components-config": "0.18.0",
37
- "@justeattakeaway/pie-css": "0.14.1",
37
+ "@justeattakeaway/pie-css": "0.15.0",
38
38
  "cem-plugin-module-file-extensions": "0.0.5"
39
39
  },
40
40
  "dependencies": {
41
- "@justeattakeaway/pie-assistive-text": "0.8.3",
41
+ "@justeattakeaway/pie-assistive-text": "0.8.4",
42
42
  "@justeattakeaway/pie-webc-core": "0.24.2"
43
43
  },
44
44
  "volta": {
package/src/checkbox.scss CHANGED
@@ -68,7 +68,7 @@
68
68
  animation: scaleDown var(--dt-motion-timing-100) var(--checkbox-motion-easing);
69
69
  }
70
70
 
71
- &.c-checkbox-tick--disabled {
71
+ &.is-disabled {
72
72
  --checkbox-bg-color: var(--dt-color-container-strong);
73
73
  --checkbox-border-color: var(--dt-color-disabled-01);
74
74
  }
@@ -82,14 +82,14 @@
82
82
  animation: scaleUp var(--dt-motion-timing-100) var(--checkbox-motion-easing);
83
83
  }
84
84
 
85
- &:not(.c-checkbox-tick--disabled) {
85
+ &:not(.is-disabled) {
86
86
  --checkbox-bg-color: var(--dt-color-interactive-brand);
87
- --checkbox-border-color: var(--dt-color-interactive-brand);
87
+ --checkbox-border-color: var(--checkbox-bg-color);
88
88
  }
89
89
 
90
90
  &.c-checkbox-tick--status-error {
91
91
  --checkbox-bg-color: var(--dt-color-support-error);
92
- --checkbox-border-color: var(--dt-color-support-error);
92
+ --checkbox-border-color: var(--checkbox-bg-color);
93
93
  }
94
94
  }
95
95
 
@@ -131,14 +131,14 @@
131
131
  }
132
132
 
133
133
  &.c-checkbox-tick--indeterminate {
134
- &:not(.c-checkbox-tick--disabled) {
134
+ &:not(.is-disabled) {
135
135
  --checkbox-bg-color: var(--dt-color-interactive-brand);
136
- --checkbox-border-color: var(--dt-color-interactive-brand);
136
+ --checkbox-border-color: var(--checkbox-bg-color);
137
137
  }
138
138
 
139
139
  &.c-checkbox-tick--status-error {
140
140
  --checkbox-bg-color: var(--dt-color-support-error);
141
- --checkbox-border-color: var(--dt-color-support-error);
141
+ --checkbox-border-color: var(--checkbox-bg-color);
142
142
  }
143
143
  }
144
144
 
@@ -220,6 +220,11 @@
220
220
  var(--dt-color-container-default-s),
221
221
  calc(var(--dt-color-container-default-l) - var(--dt-color-hover-01))
222
222
  );
223
+
224
+ @supports (background-color: color-mix(in srgb, black, white)) {
225
+ --checkbox-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-container-default));
226
+ }
227
+
223
228
  transition:
224
229
  background-color var(--dt-motion-timing-200) var(--checkbox-motion-easing),
225
230
  border-color var(--dt-motion-timing-200) var(--checkbox-motion-easing);
@@ -233,13 +238,18 @@
233
238
  var(--dt-color-container-default-s),
234
239
  calc(var(--dt-color-container-default-l) - var(--dt-color-active-01))
235
240
  );
241
+
242
+ @supports (background-color: color-mix(in srgb, black, white)) {
243
+ --checkbox-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-container-default));
244
+ }
245
+
236
246
  transition:
237
247
  background-color var(--dt-motion-timing-100) var(--checkbox-motion-easing),
238
248
  border-color var(--dt-motion-timing-100) var(--checkbox-motion-easing);
239
249
  }
240
250
  }
241
251
 
242
- &.c-checkbox--disabled {
252
+ &.is-disabled {
243
253
  label {
244
254
  cursor: not-allowed;
245
255
  }
@@ -251,7 +261,7 @@
251
261
  }
252
262
  }
253
263
 
254
- &.c-checkbox--disabled {
264
+ &.is-disabled {
255
265
  &:hover,
256
266
  &:active {
257
267
  .c-checkbox-tick {
@@ -269,6 +279,10 @@
269
279
  var(--dt-color-container-default-s),
270
280
  calc(var(--dt-color-container-default-l) - var(--dt-color-hover-01))
271
281
  );
282
+
283
+ @supports (background-color: color-mix(in srgb, black, white)) {
284
+ --checkbox-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-container-default));
285
+ }
272
286
  }
273
287
  }
274
288
 
@@ -280,23 +294,28 @@
280
294
  calc(var(--dt-color-container-default-l) - var(--dt-color-active-01))
281
295
  );
282
296
  }
297
+
298
+ @supports (background-color: color-mix(in srgb, black, white)) {
299
+ --checkbox-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-container-default));
300
+ }
283
301
  }
284
302
  }
285
303
 
286
304
  &.c-checkbox--checked,
287
305
  &.c-checkbox--indeterminate {
288
- &:not(.c-checkbox--disabled):hover {
306
+ &:not(.is-disabled):hover {
289
307
  .c-checkbox-tick {
290
308
  --checkbox-bg-color: hsl(
291
309
  var(--dt-color-interactive-brand-h),
292
310
  var(--dt-color-interactive-brand-s),
293
311
  calc(var(--dt-color-interactive-brand-l) - var(--dt-color-hover-01))
294
312
  );
295
- --checkbox-border-color: hsl(
296
- var(--dt-color-interactive-brand-h),
297
- var(--dt-color-interactive-brand-s),
298
- calc(var(--dt-color-interactive-brand-l) - var(--dt-color-hover-01))
299
- );
313
+ --checkbox-border-color: var(--checkbox-bg-color);
314
+
315
+ @supports (background-color: color-mix(in srgb, black, white)) {
316
+ --checkbox-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-interactive-brand));
317
+ --checkbox-border-color: var(--checkbox-bg-color);
318
+ }
300
319
  }
301
320
  }
302
321
 
@@ -307,26 +326,28 @@
307
326
  var(--dt-color-support-error-s),
308
327
  calc(var(--dt-color-support-error-l) - var(--dt-color-hover-01))
309
328
  );
310
- --checkbox-border-color: hsl(
311
- var(--dt-color-support-error-h),
312
- var(--dt-color-support-error-s),
313
- calc(var(--dt-color-support-error-l) - var(--dt-color-hover-01))
314
- );
329
+ --checkbox-border-color: var(--checkbox-bg-color);
330
+
331
+ @supports (background-color: color-mix(in srgb, black, white)) {
332
+ --checkbox-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-support-error));
333
+ --checkbox-border-color: var(--checkbox-bg-color);
334
+ }
315
335
  }
316
336
  }
317
337
 
318
- &:not(.c-checkbox--disabled):active {
338
+ &:not(.is-disabled):active {
319
339
  .c-checkbox-tick {
320
340
  --checkbox-bg-color: hsl(
321
341
  var(--dt-color-interactive-brand-h),
322
342
  var(--dt-color-interactive-brand-s),
323
343
  calc(var(--dt-color-interactive-brand-l) - var(--dt-color-active-01))
324
344
  );
325
- --checkbox-border-color: hsl(
326
- var(--dt-color-interactive-brand-h),
327
- var(--dt-color-interactive-brand-s),
328
- calc(var(--dt-color-interactive-brand-l) - var(--dt-color-active-01))
329
- );
345
+ --checkbox-border-color: var(--checkbox-bg-color);
346
+
347
+ @supports (background-color: color-mix(in srgb, black, white)) {
348
+ --checkbox-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-interactive-brand));
349
+ --checkbox-border-color: var(--checkbox-bg-color);
350
+ }
330
351
  }
331
352
  }
332
353
 
@@ -337,11 +358,12 @@
337
358
  var(--dt-color-support-error-s),
338
359
  calc(var(--dt-color-support-error-l) - var(--dt-color-active-01))
339
360
  );
340
- --checkbox-border-color: hsl(
341
- var(--dt-color-support-error-h),
342
- var(--dt-color-support-error-s),
343
- calc(var(--dt-color-support-error-l) - var(--dt-color-active-01))
344
- );
361
+ --checkbox-border-color: var(--checkbox-bg-color);
362
+
363
+ @supports (background-color: color-mix(in srgb, black, white)) {
364
+ --checkbox-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-support-error));
365
+ --checkbox-border-color: var(--checkbox-bg-color);
366
+ }
345
367
  }
346
368
  }
347
369
  }
package/src/index.ts CHANGED
@@ -171,7 +171,7 @@ export class PieCheckbox extends FormControlMixin(RtlMixin(LitElement)) implemen
171
171
  const checkboxClasses = {
172
172
  'c-checkbox': true,
173
173
  [`c-checkbox--status-${status}`]: !componentDisabled,
174
- 'c-checkbox--disabled': componentDisabled,
174
+ 'is-disabled': componentDisabled,
175
175
  'c-checkbox--checked': checked,
176
176
  'c-checkbox--indeterminate': indeterminate && !checked,
177
177
  };
@@ -179,7 +179,7 @@ export class PieCheckbox extends FormControlMixin(RtlMixin(LitElement)) implemen
179
179
  const labelClasses = {
180
180
  'c-checkbox-tick': true,
181
181
  [`c-checkbox-tick--status-${status}`]: !componentDisabled,
182
- 'c-checkbox-tick--disabled': componentDisabled,
182
+ 'is-disabled': componentDisabled,
183
183
  'c-checkbox-tick--checked': checked,
184
184
  'c-checkbox-tick--indeterminate': indeterminate && !checked,
185
185
  'c-checkbox-tick--rtl': isRTL,