@justeattakeaway/pie-checkbox 0.17.0 → 0.18.1

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 (7) hide show
  1. package/custom-elements.json +4 -9
  2. package/dist/index.d.ts +0 -6
  3. package/dist/index.js +22 -23
  4. package/dist/react.d.ts +0 -6
  5. package/package.json +10 -5
  6. package/src/checkbox.scss +1 -1
  7. package/src/index.ts +3 -6
package/custom-elements.json CHANGED
@@ -63,15 +63,6 @@
63
63
  }
64
64
  ],
65
65
  "members": [
66
- {
67
- "kind": "field",
68
- "name": "shadowRootOptions",
69
- "type": {
70
- "text": "object"
71
- },
72
- "static": true,
73
- "default": "{ ...LitElement.shadowRootOptions, delegatesFocus: true }"
74
- },
75
66
  {
76
67
  "kind": "field",
77
68
  "name": "_disabledByParent",
@@ -244,6 +235,10 @@
244
235
  }
245
236
  ],
246
237
  "mixins": [
238
+ {
239
+ "name": "DelegatesFocusMixin",
240
+ "package": "@justeattakeaway/pie-webc-core"
241
+ },
247
242
  {
248
243
  "name": "FormControlMixin",
249
244
  "package": "@justeattakeaway/pie-webc-core"
package/dist/index.d.ts CHANGED
@@ -55,12 +55,6 @@ export declare const defaultProps: DefaultProps;
55
55
  * @event {CustomEvent} change - when checked state is changed.
56
56
  */
57
57
  export declare class PieCheckbox extends PieCheckbox_base implements CheckboxProps {
58
- static shadowRootOptions: {
59
- delegatesFocus: boolean;
60
- mode: ShadowRootMode;
61
- serializable?: boolean;
62
- slotAssignment?: SlotAssignmentMode;
63
- };
64
58
  private _disabledByParent;
65
59
  private _visuallyHiddenError;
66
60
  private _isAnimationAllowed;
package/dist/index.js CHANGED
@@ -1,18 +1,18 @@
1
- import { LitElement as y, nothing as $, html as m, unsafeCSS as E } from "lit";
1
+ import { LitElement as A, nothing as $, html as m, unsafeCSS as E } from "lit";
2
2
  import { classMap as g } from "lit/directives/class-map.js";
3
3
  import { state as u, property as i, query as B } from "lit/decorators.js";
4
4
  import { ifDefined as f } from "lit/directives/if-defined.js";
5
5
  import { live as F } from "lit/directives/live.js";
6
- import { FormControlMixin as P, wrapNativeEvent as q, validPropertyValues as D, safeCustomElement as S } from "@justeattakeaway/pie-webc-core";
6
+ import { DelegatesFocusMixin as P, FormControlMixin as D, wrapNativeEvent as q, validPropertyValues as S, safeCustomElement as z } from "@justeattakeaway/pie-webc-core";
7
7
  import "@justeattakeaway/pie-assistive-text";
8
- const k = class k extends y {
8
+ const k = class k extends A {
9
9
  willUpdate() {
10
10
  this.getAttribute("v") || this.setAttribute("v", k.v);
11
11
  }
12
12
  };
13
- k.v = "0.17.0";
13
+ k.v = "0.18.1";
14
14
  let p = k;
15
- const O = '*,*:after,*:before{box-sizing:inherit}:host{display:block}@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)}}@media (prefers-reduced-motion: no-preference){.c-checkbox-tick.c-checkbox-tick--allow-animation{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--allow-animation.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%}@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--allow-animation:before{animation:checkboxCheck var(--dt-motion-timing-150) var(--checkbox-motion-easing) forwards}.c-checkbox-tick.c-checkbox-tick--checked:not(.c-checkbox-tick--allow-animation):before{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:dir(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);line-height:var(--checkbox-line-height);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:dir(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: calc(var(--dt-font-body-l-size) * 1px);--checkbox-line-height: calc(var(--dt-font-body-l-line-height) * 1px);--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)}}', z = ["default", "success", "error"], a = {
15
+ const H = '*,*:after,*:before{box-sizing:inherit}:host{display:block}@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)}}@media (prefers-reduced-motion: no-preference){.c-checkbox-tick.c-checkbox-tick--allow-animation{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--allow-animation.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%}@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--allow-animation:before{animation:checkboxCheck var(--dt-motion-timing-150) var(--checkbox-motion-easing) forwards}.c-checkbox-tick.c-checkbox-tick--checked:not(.c-checkbox-tick--allow-animation):before{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:dir(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);line-height:var(--checkbox-line-height);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:dir(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: calc(var(--dt-font-body-l-size) * 1px);--checkbox-line-height: calc(var(--dt-font-body-l-line-height) * 1px);--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-solid);--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)}}', T = ["default", "success", "error"], a = {
16
16
  // a default value for the html <input type="checkbox" /> value attribute.
17
17
  // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#value
18
18
  value: "on",
@@ -23,13 +23,13 @@ const O = '*,*:after,*:before{box-sizing:inherit}:host{display:block}@keyframes
23
23
  required: !1,
24
24
  status: "default"
25
25
  };
26
- var H = Object.defineProperty, T = Object.getOwnPropertyDescriptor, e = (c, r, l, n) => {
27
- for (var t = n > 1 ? void 0 : n ? T(r, l) : r, h = c.length - 1, s; h >= 0; h--)
26
+ var O = Object.defineProperty, I = Object.getOwnPropertyDescriptor, e = (c, r, l, n) => {
27
+ for (var t = n > 1 ? void 0 : n ? I(r, l) : r, h = c.length - 1, s; h >= 0; h--)
28
28
  (s = c[h]) && (t = (n ? s(r, l, t) : s(t)) || t);
29
- return n && t && H(r, l, t), t;
29
+ return n && t && O(r, l, t), t;
30
30
  };
31
- const I = "pie-checkbox", w = "assistive-text";
32
- let o = class extends P(p) {
31
+ const L = "pie-checkbox", y = "assistive-text";
32
+ let o = class extends P(D(p)) {
33
33
  constructor() {
34
34
  super(...arguments), this._disabledByParent = !1, this._visuallyHiddenError = !1, this._isAnimationAllowed = !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;
35
35
  }
@@ -101,17 +101,17 @@ let o = class extends P(p) {
101
101
  _disabledByParent: t,
102
102
  _visuallyHiddenError: h,
103
103
  _isAnimationAllowed: s,
104
- required: _,
104
+ required: w,
105
105
  indeterminate: x,
106
106
  assistiveText: v,
107
107
  status: d
108
- } = this, b = n || t, C = {
108
+ } = this, b = n || t, _ = {
109
109
  "c-checkbox": !0,
110
110
  [`c-checkbox--status-${d}`]: !b,
111
111
  "is-disabled": b,
112
112
  "c-checkbox--checked": c,
113
113
  "c-checkbox--indeterminate": x && !c
114
- }, A = {
114
+ }, C = {
115
115
  "c-checkbox-tick": !0,
116
116
  [`c-checkbox-tick--status-${d}`]: !b,
117
117
  "is-disabled": b,
@@ -121,7 +121,7 @@ let o = class extends P(p) {
121
121
  };
122
122
  return m`
123
123
  <div
124
- class="${g(C)}">
124
+ class="${g(_)}">
125
125
  <input
126
126
  type="checkbox"
127
127
  id="inputId"
@@ -129,23 +129,23 @@ let o = class extends P(p) {
129
129
  .checked=${F(c)}
130
130
  name=${f(l)}
131
131
  ?disabled=${b}
132
- ?required=${_}
132
+ ?required=${w}
133
133
  .indeterminate=${x}
134
134
  aria-invalid=${d === "error" ? "true" : "false"}
135
- aria-describedby=${f(v ? w : void 0)}
135
+ aria-describedby=${f(v ? y : void 0)}
136
136
  @change=${this._handleChange}
137
137
  data-test-id="pie-checkbox-input"
138
138
  />
139
139
  <label for="inputId" data-test-id="pie-checkbox-label">
140
140
  <span
141
- class="${g(A)}"></span>
141
+ class="${g(C)}"></span>
142
142
  <span class="c-checkbox-text">
143
143
  <slot></slot>
144
144
  </span>
145
145
  </label>
146
146
  ${v ? m`
147
147
  <pie-assistive-text
148
- id="${w}"
148
+ id="${y}"
149
149
  variant=${d}
150
150
  ?isVisuallyHidden=${h}
151
151
  data-test-id="pie-checkbox-assistive-text">
@@ -154,8 +154,7 @@ let o = class extends P(p) {
154
154
  </div>`;
155
155
  }
156
156
  };
157
- o.shadowRootOptions = { ...y.shadowRootOptions, delegatesFocus: !0 };
158
- o.styles = E(O);
157
+ o.styles = E(H);
159
158
  e([
160
159
  u()
161
160
  ], o.prototype, "_disabledByParent", 2);
@@ -194,13 +193,13 @@ e([
194
193
  ], o.prototype, "assistiveText", 2);
195
194
  e([
196
195
  i({ type: String }),
197
- D(I, z, a.status)
196
+ S(L, T, a.status)
198
197
  ], o.prototype, "status", 2);
199
198
  o = e([
200
- S("pie-checkbox")
199
+ z("pie-checkbox")
201
200
  ], o);
202
201
  export {
203
202
  o as PieCheckbox,
204
203
  a as defaultProps,
205
- z as statusTypes
204
+ T as statusTypes
206
205
  };
package/dist/react.d.ts CHANGED
@@ -58,12 +58,6 @@ export declare const PieCheckbox: React_2.ForwardRefExoticComponent<React_2.Prop
58
58
  * @event {CustomEvent} change - when checked state is changed.
59
59
  */
60
60
  declare class PieCheckbox_2 extends PieCheckbox_base implements CheckboxProps {
61
- static shadowRootOptions: {
62
- delegatesFocus: boolean;
63
- mode: ShadowRootMode;
64
- serializable?: boolean;
65
- slotAssignment?: SlotAssignmentMode;
66
- };
67
61
  private _disabledByParent;
68
62
  private _visuallyHiddenError;
69
63
  private _isAnimationAllowed;
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.17.0",
4
+ "version": "0.18.1",
5
5
  "repository": {
6
6
  "type": "git",
7
7
  "url": "https://github.com/justeattakeaway/pie",
@@ -19,7 +19,12 @@
19
19
  "**/*.d.ts"
20
20
  ],
21
21
  "pieMetadata": {
22
- "componentStatus": "beta"
22
+ "componentStatus": "beta",
23
+ "replaces": {
24
+ "snacks": [
25
+ "Checkbox"
26
+ ]
27
+ }
23
28
  },
24
29
  "scripts": {
25
30
  "build": "run -T vite build",
@@ -40,13 +45,13 @@
40
45
  "devDependencies": {
41
46
  "@custom-elements-manifest/analyzer": "0.9.0",
42
47
  "@justeattakeaway/pie-components-config": "0.21.0",
43
- "@justeattakeaway/pie-css": "0.19.0",
48
+ "@justeattakeaway/pie-css": "0.23.0",
44
49
  "@justeattakeaway/pie-monorepo-utils": "0.7.0",
45
50
  "cem-plugin-module-file-extensions": "0.0.5"
46
51
  },
47
52
  "dependencies": {
48
- "@justeattakeaway/pie-assistive-text": "0.10.11",
49
- "@justeattakeaway/pie-webc-core": "1.1.0"
53
+ "@justeattakeaway/pie-assistive-text": "0.11.1",
54
+ "@justeattakeaway/pie-webc-core": "3.0.0"
50
55
  },
51
56
  "volta": {
52
57
  "extends": "../../../package.json"
package/src/checkbox.scss CHANGED
@@ -215,7 +215,7 @@
215
215
  --checkbox-font-weight: var(--dt-font-weight-regular);
216
216
  --checkbox-bg-color: var(--dt-color-container-default);
217
217
  --checkbox-border-color: var(--dt-color-border-form);
218
- --checkbox-content-color: var(--dt-color-content-default);
218
+ --checkbox-content-color: var(--dt-color-content-default-solid);
219
219
  --checkbox-motion-easing: var(--dt-motion-easing-persistent-functional);
220
220
 
221
221
  display: flex;
package/src/index.ts CHANGED
@@ -1,6 +1,4 @@
1
- import {
2
- LitElement, html, unsafeCSS, nothing,
3
- } from 'lit';
1
+ import { html, unsafeCSS, nothing } from 'lit';
4
2
  import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElement';
5
3
  import { classMap } from 'lit/directives/class-map.js';
6
4
  import { property, query, state } from 'lit/decorators.js';
@@ -10,6 +8,7 @@ import { live } from 'lit/directives/live.js';
10
8
  import {
11
9
  wrapNativeEvent,
12
10
  FormControlMixin,
11
+ DelegatesFocusMixin,
13
12
  validPropertyValues,
14
13
  safeCustomElement,
15
14
  } from '@justeattakeaway/pie-webc-core';
@@ -30,9 +29,7 @@ const assistiveTextId = 'assistive-text';
30
29
  * @event {CustomEvent} change - when checked state is changed.
31
30
  */
32
31
  @safeCustomElement('pie-checkbox')
33
- export class PieCheckbox extends FormControlMixin(PieElement) implements CheckboxProps {
34
- static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true };
35
-
32
+ export class PieCheckbox extends DelegatesFocusMixin(FormControlMixin(PieElement)) implements CheckboxProps {
36
33
  @state()
37
34
  private _disabledByParent = false;
38
35