@justeattakeaway/pie-checkbox 0.16.11 → 0.18.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 (7) hide show
  1. package/custom-elements.json +2 -11
  2. package/dist/index.d.ts +1 -8
  3. package/dist/index.js +30 -33
  4. package/dist/react.d.ts +1 -8
  5. package/package.json +5 -5
  6. package/src/checkbox.scss +3 -3
  7. package/src/index.ts +3 -9
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",
@@ -245,11 +236,11 @@
245
236
  ],
246
237
  "mixins": [
247
238
  {
248
- "name": "FormControlMixin",
239
+ "name": "DelegatesFocusMixin",
249
240
  "package": "@justeattakeaway/pie-webc-core"
250
241
  },
251
242
  {
252
- "name": "RtlMixin",
243
+ "name": "FormControlMixin",
253
244
  "package": "@justeattakeaway/pie-webc-core"
254
245
  }
255
246
  ],
package/dist/index.d.ts CHANGED
@@ -3,7 +3,6 @@ import { CSSResult } from 'lit';
3
3
  import { FormControlInterface } from '@justeattakeaway/pie-webc-core';
4
4
  import { GenericConstructor } from '@justeattakeaway/pie-webc-core';
5
5
  import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElement';
6
- import { RTLInterface } from '@justeattakeaway/pie-webc-core';
7
6
  import { TemplateResult } from 'lit-html';
8
7
 
9
8
  export declare interface CheckboxProps {
@@ -56,12 +55,6 @@ export declare const defaultProps: DefaultProps;
56
55
  * @event {CustomEvent} change - when checked state is changed.
57
56
  */
58
57
  export declare class PieCheckbox extends PieCheckbox_base implements CheckboxProps {
59
- static shadowRootOptions: {
60
- delegatesFocus: boolean;
61
- mode: ShadowRootMode;
62
- serializable?: boolean;
63
- slotAssignment?: SlotAssignmentMode;
64
- };
65
58
  private _disabledByParent;
66
59
  private _visuallyHiddenError;
67
60
  private _isAnimationAllowed;
@@ -110,7 +103,7 @@ export declare class PieCheckbox extends PieCheckbox_base implements CheckboxPro
110
103
  static styles: CSSResult;
111
104
  }
112
105
 
113
- declare const PieCheckbox_base: GenericConstructor<FormControlInterface> & GenericConstructor<RTLInterface> & typeof PieElement;
106
+ declare const PieCheckbox_base: GenericConstructor<FormControlInterface> & typeof PieElement;
114
107
 
115
108
  export declare const statusTypes: readonly ["default", "success", "error"];
116
109
 
package/dist/index.js CHANGED
@@ -1,18 +1,18 @@
1
- import { LitElement as y, nothing as E, html as m, unsafeCSS as B } 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
- import { state as u, property as i, query as F } from "lit/decorators.js";
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
- import { live as P } from "lit/directives/live.js";
6
- import { FormControlMixin as q, RtlMixin as D, wrapNativeEvent as S, validPropertyValues as O, safeCustomElement as T } from "@justeattakeaway/pie-webc-core";
5
+ import { live as F } from "lit/directives/live.js";
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.16.11";
13
+ k.v = "0.18.0";
14
14
  let p = k;
15
- const z = '*,*: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.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);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.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: 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)}}', H = ["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 z = '*,*:after,*:before{box-sizing:inherit}:host{display:block}@keyframes
23
23
  required: !1,
24
24
  status: "default"
25
25
  };
26
- var R = Object.defineProperty, L = Object.getOwnPropertyDescriptor, e = (c, r, l, n) => {
27
- for (var t = n > 1 ? void 0 : n ? L(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 && R(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 q(D(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
  }
@@ -77,7 +77,7 @@ let o = class extends q(D(p)) {
77
77
  _handleChange(c) {
78
78
  const { checked: r } = c == null ? void 0 : c.currentTarget;
79
79
  this.checked = r, this._isAnimationAllowed || (this._isAnimationAllowed = !0);
80
- const l = S(c);
80
+ const l = q(c);
81
81
  this.dispatchEvent(l), this._handleFormAssociation();
82
82
  }
83
83
  /**
@@ -101,63 +101,60 @@ let o = class extends q(D(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
- status: d,
108
- isRTL: C
109
- } = this, b = n || t, A = {
107
+ status: d
108
+ } = this, b = n || t, _ = {
110
109
  "c-checkbox": !0,
111
110
  [`c-checkbox--status-${d}`]: !b,
112
111
  "is-disabled": b,
113
112
  "c-checkbox--checked": c,
114
113
  "c-checkbox--indeterminate": x && !c
115
- }, $ = {
114
+ }, C = {
116
115
  "c-checkbox-tick": !0,
117
116
  [`c-checkbox-tick--status-${d}`]: !b,
118
117
  "is-disabled": b,
119
118
  "c-checkbox-tick--checked": c,
120
119
  "c-checkbox-tick--indeterminate": x && !c,
121
- "c-checkbox-tick--allow-animation": s,
122
- "c-checkbox-tick--rtl": C
120
+ "c-checkbox-tick--allow-animation": s
123
121
  };
124
122
  return m`
125
123
  <div
126
- class="${g(A)}">
124
+ class="${g(_)}">
127
125
  <input
128
126
  type="checkbox"
129
127
  id="inputId"
130
128
  .value=${r}
131
- .checked=${P(c)}
129
+ .checked=${F(c)}
132
130
  name=${f(l)}
133
131
  ?disabled=${b}
134
- ?required=${_}
132
+ ?required=${w}
135
133
  .indeterminate=${x}
136
134
  aria-invalid=${d === "error" ? "true" : "false"}
137
- aria-describedby=${f(v ? w : void 0)}
135
+ aria-describedby=${f(v ? y : void 0)}
138
136
  @change=${this._handleChange}
139
137
  data-test-id="pie-checkbox-input"
140
138
  />
141
139
  <label for="inputId" data-test-id="pie-checkbox-label">
142
140
  <span
143
- class="${g($)}"></span>
141
+ class="${g(C)}"></span>
144
142
  <span class="c-checkbox-text">
145
143
  <slot></slot>
146
144
  </span>
147
145
  </label>
148
146
  ${v ? m`
149
147
  <pie-assistive-text
150
- id="${w}"
148
+ id="${y}"
151
149
  variant=${d}
152
150
  ?isVisuallyHidden=${h}
153
151
  data-test-id="pie-checkbox-assistive-text">
154
152
  ${v}
155
- </pie-assistive-text>` : E}
153
+ </pie-assistive-text>` : $}
156
154
  </div>`;
157
155
  }
158
156
  };
159
- o.shadowRootOptions = { ...y.shadowRootOptions, delegatesFocus: !0 };
160
- o.styles = B(z);
157
+ o.styles = E(H);
161
158
  e([
162
159
  u()
163
160
  ], o.prototype, "_disabledByParent", 2);
@@ -189,20 +186,20 @@ e([
189
186
  i({ type: Boolean, reflect: !0 })
190
187
  ], o.prototype, "indeterminate", 2);
191
188
  e([
192
- F('input[type="checkbox"]')
189
+ B('input[type="checkbox"]')
193
190
  ], o.prototype, "_checkbox", 2);
194
191
  e([
195
192
  i({ type: String })
196
193
  ], o.prototype, "assistiveText", 2);
197
194
  e([
198
195
  i({ type: String }),
199
- O(I, H, a.status)
196
+ S(L, T, a.status)
200
197
  ], o.prototype, "status", 2);
201
198
  o = e([
202
- T("pie-checkbox")
199
+ z("pie-checkbox")
203
200
  ], o);
204
201
  export {
205
202
  o as PieCheckbox,
206
203
  a as defaultProps,
207
- H as statusTypes
204
+ T as statusTypes
208
205
  };
package/dist/react.d.ts CHANGED
@@ -4,7 +4,6 @@ import { FormControlInterface } from '@justeattakeaway/pie-webc-core';
4
4
  import { GenericConstructor } from '@justeattakeaway/pie-webc-core';
5
5
  import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElement';
6
6
  import * as React_2 from 'react';
7
- import { RTLInterface } from '@justeattakeaway/pie-webc-core';
8
7
  import { TemplateResult } from 'lit-html';
9
8
 
10
9
  export declare interface CheckboxProps {
@@ -59,12 +58,6 @@ export declare const PieCheckbox: React_2.ForwardRefExoticComponent<React_2.Prop
59
58
  * @event {CustomEvent} change - when checked state is changed.
60
59
  */
61
60
  declare class PieCheckbox_2 extends PieCheckbox_base implements CheckboxProps {
62
- static shadowRootOptions: {
63
- delegatesFocus: boolean;
64
- mode: ShadowRootMode;
65
- serializable?: boolean;
66
- slotAssignment?: SlotAssignmentMode;
67
- };
68
61
  private _disabledByParent;
69
62
  private _visuallyHiddenError;
70
63
  private _isAnimationAllowed;
@@ -113,7 +106,7 @@ declare class PieCheckbox_2 extends PieCheckbox_base implements CheckboxProps {
113
106
  static styles: CSSResult;
114
107
  }
115
108
 
116
- declare const PieCheckbox_base: GenericConstructor<FormControlInterface> & GenericConstructor<RTLInterface> & typeof PieElement;
109
+ declare const PieCheckbox_base: GenericConstructor<FormControlInterface> & typeof PieElement;
117
110
 
118
111
  declare type PieCheckboxEvents = {
119
112
  onChange?: (event: CustomEvent) => void;
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.16.11",
4
+ "version": "0.18.0",
5
5
  "repository": {
6
6
  "type": "git",
7
7
  "url": "https://github.com/justeattakeaway/pie",
@@ -40,13 +40,13 @@
40
40
  "devDependencies": {
41
41
  "@custom-elements-manifest/analyzer": "0.9.0",
42
42
  "@justeattakeaway/pie-components-config": "0.21.0",
43
- "@justeattakeaway/pie-css": "0.19.0",
44
- "@justeattakeaway/pie-monorepo-utils": "0.6.0",
43
+ "@justeattakeaway/pie-css": "0.22.0",
44
+ "@justeattakeaway/pie-monorepo-utils": "0.7.0",
45
45
  "cem-plugin-module-file-extensions": "0.0.5"
46
46
  },
47
47
  "dependencies": {
48
- "@justeattakeaway/pie-assistive-text": "0.10.10",
49
- "@justeattakeaway/pie-webc-core": "1.0.0"
48
+ "@justeattakeaway/pie-assistive-text": "0.11.0",
49
+ "@justeattakeaway/pie-webc-core": "2.0.0"
50
50
  },
51
51
  "volta": {
52
52
  "extends": "../../../package.json"
package/src/checkbox.scss CHANGED
@@ -149,7 +149,7 @@
149
149
  }
150
150
 
151
151
 
152
- &.c-checkbox-tick--checked.c-checkbox-tick--rtl:before {
152
+ &.c-checkbox-tick--checked:dir(rtl):before {
153
153
  left: unset;
154
154
  right: 50%;
155
155
  }
@@ -199,7 +199,7 @@
199
199
  background-color: white;
200
200
  }
201
201
 
202
- .c-checkbox-tick.c-checkbox-tick--rtl:after {
202
+ .c-checkbox-tick:dir(rtl):after {
203
203
  left: unset;
204
204
  right: 14%;
205
205
  }
@@ -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';
@@ -8,9 +6,9 @@ import { ifDefined } from 'lit/directives/if-defined.js';
8
6
  import { live } from 'lit/directives/live.js';
9
7
 
10
8
  import {
11
- RtlMixin,
12
9
  wrapNativeEvent,
13
10
  FormControlMixin,
11
+ DelegatesFocusMixin,
14
12
  validPropertyValues,
15
13
  safeCustomElement,
16
14
  } from '@justeattakeaway/pie-webc-core';
@@ -31,9 +29,7 @@ const assistiveTextId = 'assistive-text';
31
29
  * @event {CustomEvent} change - when checked state is changed.
32
30
  */
33
31
  @safeCustomElement('pie-checkbox')
34
- export class PieCheckbox extends FormControlMixin(RtlMixin(PieElement)) implements CheckboxProps {
35
- static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true };
36
-
32
+ export class PieCheckbox extends DelegatesFocusMixin(FormControlMixin(PieElement)) implements CheckboxProps {
37
33
  @state()
38
34
  private _disabledByParent = false;
39
35
 
@@ -172,7 +168,6 @@ export class PieCheckbox extends FormControlMixin(RtlMixin(PieElement)) implemen
172
168
  indeterminate,
173
169
  assistiveText,
174
170
  status,
175
- isRTL,
176
171
  } = this;
177
172
 
178
173
  const componentDisabled = disabled || _disabledByParent;
@@ -192,7 +187,6 @@ export class PieCheckbox extends FormControlMixin(RtlMixin(PieElement)) implemen
192
187
  'c-checkbox-tick--checked': checked,
193
188
  'c-checkbox-tick--indeterminate': indeterminate && !checked,
194
189
  'c-checkbox-tick--allow-animation': _isAnimationAllowed,
195
- 'c-checkbox-tick--rtl': isRTL,
196
190
  };
197
191
 
198
192
  return html`