@justeattakeaway/pie-checkbox 0.14.2 → 0.15.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 -2
  2. package/dist/index.d.ts +2 -2
  3. package/dist/index.js +92 -79
  4. package/dist/react.d.ts +2 -2
  5. package/package.json +6 -5
  6. package/src/checkbox.scss +3 -1
  7. package/src/index.ts +2 -1
package/custom-elements.json CHANGED
@@ -303,8 +303,8 @@
303
303
  }
304
304
  ],
305
305
  "superclass": {
306
- "name": "LitElement",
307
- "package": "lit"
306
+ "name": "PieElement",
307
+ "package": "@justeattakeaway/pie-webc-core/src/internals/PieElement"
308
308
  },
309
309
  "tagName": "pie-checkbox",
310
310
  "customElement": true
package/dist/index.d.ts CHANGED
@@ -2,7 +2,7 @@ import { ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
2
2
  import type { CSSResult } from 'lit';
3
3
  import type { FormControlInterface } from '@justeattakeaway/pie-webc-core';
4
4
  import type { GenericConstructor } from '@justeattakeaway/pie-webc-core';
5
- import type { LitElement } from 'lit';
5
+ import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElement';
6
6
  import type { RTLInterface } from '@justeattakeaway/pie-webc-core';
7
7
  import type { TemplateResult } from 'lit-html';
8
8
 
@@ -108,7 +108,7 @@ export declare class PieCheckbox extends PieCheckbox_base implements CheckboxPro
108
108
  static styles: CSSResult;
109
109
  }
110
110
 
111
- declare const PieCheckbox_base: GenericConstructor<FormControlInterface> & GenericConstructor<RTLInterface> & typeof LitElement;
111
+ declare const PieCheckbox_base: GenericConstructor<FormControlInterface> & GenericConstructor<RTLInterface> & typeof PieElement;
112
112
 
113
113
  export declare const statusTypes: readonly ["default", "success", "error"];
114
114
 
package/dist/index.js CHANGED
@@ -1,11 +1,24 @@
1
- import { LitElement as p, html as u, nothing as B, unsafeCSS as F } from "lit";
2
- import { classMap as m } from "lit/directives/class-map.js";
3
- import { state as y, property as t, query as q } from "lit/decorators.js";
1
+ import { LitElement as f, html as p, nothing as F, unsafeCSS as P } from "lit";
2
+ import { property as i, state as y, query as S } from "lit/decorators.js";
3
+ import { classMap as u } from "lit/directives/class-map.js";
4
4
  import { ifDefined as g } from "lit/directives/if-defined.js";
5
- import { live as A } from "lit/directives/live.js";
6
- import { FormControlMixin as S, RtlMixin as z, wrapNativeEvent as T, validPropertyValues as D, defineCustomElement as H } from "@justeattakeaway/pie-webc-core";
5
+ import { live as q } from "lit/directives/live.js";
6
+ import { FormControlMixin as A, RtlMixin as T, wrapNativeEvent as z, 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.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 = {
8
+ var R = Object.defineProperty, L = (s, c, r, d) => {
9
+ for (var o = void 0, a = s.length - 1, l; a >= 0; a--)
10
+ (l = s[a]) && (o = l(c, r, o) || o);
11
+ return o && R(c, r, o), o;
12
+ };
13
+ class w extends f {
14
+ constructor() {
15
+ super(...arguments), this.v = "0.15.0";
16
+ }
17
+ }
18
+ L([
19
+ i({ type: String, reflect: !0 })
20
+ ], w.prototype, "v");
21
+ const O = '*,*: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);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)}}', I = ["default", "success", "error"], n = {
9
22
  // a default value for the html <input type="checkbox" /> value attribute.
10
23
  // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#value
11
24
  value: "on",
@@ -16,14 +29,14 @@ const P = '*,*:after,*:before{box-sizing:inherit}@keyframes checkboxCheck{0%{wid
16
29
  required: !1,
17
30
  status: "default"
18
31
  };
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;
32
+ var M = Object.defineProperty, t = (s, c, r, d) => {
33
+ for (var o = void 0, a = s.length - 1, l; a >= 0; a--)
34
+ (l = s[a]) && (o = l(c, r, o) || o);
35
+ return o && M(c, r, o), o;
23
36
  };
24
- const w = "pie-checkbox", f = "assistive-text", h = class h extends S(z(p)) {
37
+ const _ = "pie-checkbox", m = "assistive-text", k = class k extends A(T(w)) {
25
38
  constructor() {
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;
39
+ super(...arguments), this._disabledByParent = !1, this._visuallyHiddenError = !1, this.value = n.value, this.checked = n.checked, this.defaultChecked = n.defaultChecked, this.disabled = n.disabled, this.required = n.required, this.indeterminate = n.indeterminate, this.status = n.status;
27
40
  }
28
41
  connectedCallback() {
29
42
  super.connectedCallback(), this._abortController = new AbortController();
@@ -69,7 +82,7 @@ const w = "pie-checkbox", f = "assistive-text", h = class h extends S(z(p)) {
69
82
  _handleChange(c) {
70
83
  const { checked: r } = c == null ? void 0 : c.currentTarget;
71
84
  this.checked = r;
72
- const d = T(c);
85
+ const d = z(c);
73
86
  this.dispatchEvent(d), this._handleFormAssociation();
74
87
  }
75
88
  /**
@@ -89,105 +102,105 @@ const w = "pie-checkbox", f = "assistive-text", h = class h extends S(z(p)) {
89
102
  checked: c,
90
103
  value: r,
91
104
  name: d,
92
- disabled: i,
93
- _disabledByParent: n,
105
+ disabled: o,
106
+ _disabledByParent: a,
94
107
  _visuallyHiddenError: l,
95
108
  required: C,
96
- indeterminate: k,
97
- assistiveText: x,
109
+ indeterminate: x,
110
+ assistiveText: v,
98
111
  status: b,
99
- isRTL: _
100
- } = this, s = i || n, $ = {
112
+ isRTL: $
113
+ } = this, h = o || a, E = {
101
114
  "c-checkbox": !0,
102
- [`c-checkbox--status-${b}`]: !s,
103
- "is-disabled": s,
115
+ [`c-checkbox--status-${b}`]: !h,
116
+ "is-disabled": h,
104
117
  "c-checkbox--checked": c,
105
- "c-checkbox--indeterminate": k && !c
106
- }, E = {
118
+ "c-checkbox--indeterminate": x && !c
119
+ }, B = {
107
120
  "c-checkbox-tick": !0,
108
- [`c-checkbox-tick--status-${b}`]: !s,
109
- "is-disabled": s,
121
+ [`c-checkbox-tick--status-${b}`]: !h,
122
+ "is-disabled": h,
110
123
  "c-checkbox-tick--checked": c,
111
- "c-checkbox-tick--indeterminate": k && !c,
112
- "c-checkbox-tick--rtl": _
124
+ "c-checkbox-tick--indeterminate": x && !c,
125
+ "c-checkbox-tick--rtl": $
113
126
  };
114
- return u`
127
+ return p`
115
128
  <div
116
- class="${m($)}">
129
+ class="${u(E)}">
117
130
  <input
118
131
  type="checkbox"
119
132
  id="inputId"
120
133
  .value=${r}
121
- .checked=${A(c)}
134
+ .checked=${q(c)}
122
135
  name=${g(d)}
123
- ?disabled=${s}
136
+ ?disabled=${h}
124
137
  ?required=${C}
125
- .indeterminate=${k}
138
+ .indeterminate=${x}
126
139
  aria-invalid=${b === "error" ? "true" : "false"}
127
- aria-describedby=${g(x ? f : void 0)}
140
+ aria-describedby=${g(v ? m : void 0)}
128
141
  @change=${this._handleChange}
129
142
  data-test-id="pie-checkbox-input"
130
143
  />
131
144
  <label for="inputId" data-test-id="pie-checkbox-label">
132
145
  <span
133
- class="${m(E)}"></span>
146
+ class="${u(B)}"></span>
134
147
  <span class="c-checkbox-text">
135
148
  <slot></slot>
136
149
  </span>
137
150
  </label>
138
- ${x ? u`
151
+ ${v ? p`
139
152
  <pie-assistive-text
140
- id="${f}"
153
+ id="${m}"
141
154
  variant=${b}
142
155
  ?isVisuallyHidden=${l}
143
156
  data-test-id="pie-checkbox-assistive-text">
144
- ${x}
145
- </pie-assistive-text>` : B}
157
+ ${v}
158
+ </pie-assistive-text>` : F}
146
159
  </div>`;
147
160
  }
148
161
  };
149
- h.shadowRootOptions = { ...p.shadowRootOptions, delegatesFocus: !0 }, h.styles = F(P);
150
- let o = h;
151
- e([
162
+ k.shadowRootOptions = { ...f.shadowRootOptions, delegatesFocus: !0 }, k.styles = P(O);
163
+ let e = k;
164
+ t([
152
165
  y()
153
- ], o.prototype, "_disabledByParent");
154
- e([
166
+ ], e.prototype, "_disabledByParent");
167
+ t([
155
168
  y()
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
- q('input[type="checkbox"]')
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);
169
+ ], e.prototype, "_visuallyHiddenError");
170
+ t([
171
+ i({ type: String })
172
+ ], e.prototype, "value");
173
+ t([
174
+ i({ type: String })
175
+ ], e.prototype, "name");
176
+ t([
177
+ i({ type: Boolean, reflect: !0 })
178
+ ], e.prototype, "checked");
179
+ t([
180
+ i({ type: Boolean, reflect: !0 })
181
+ ], e.prototype, "defaultChecked");
182
+ t([
183
+ i({ type: Boolean, reflect: !0 })
184
+ ], e.prototype, "disabled");
185
+ t([
186
+ i({ type: Boolean, reflect: !0 })
187
+ ], e.prototype, "required");
188
+ t([
189
+ i({ type: Boolean, reflect: !0 })
190
+ ], e.prototype, "indeterminate");
191
+ t([
192
+ S('input[type="checkbox"]')
193
+ ], e.prototype, "_checkbox");
194
+ t([
195
+ i({ type: String })
196
+ ], e.prototype, "assistiveText");
197
+ t([
198
+ i({ type: String }),
199
+ D(_, I, n.status)
200
+ ], e.prototype, "status");
201
+ H(_, e);
189
202
  export {
190
- o as PieCheckbox,
191
- a as defaultProps,
192
- R as statusTypes
203
+ e as PieCheckbox,
204
+ n as defaultProps,
205
+ I as statusTypes
193
206
  };
package/dist/react.d.ts CHANGED
@@ -2,7 +2,7 @@ import { ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
2
2
  import type { CSSResult } from 'lit';
3
3
  import type { FormControlInterface } from '@justeattakeaway/pie-webc-core';
4
4
  import type { GenericConstructor } from '@justeattakeaway/pie-webc-core';
5
- import type { LitElement } from 'lit';
5
+ import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElement';
6
6
  import * as React_2 from 'react';
7
7
  import type { RTLInterface } from '@justeattakeaway/pie-webc-core';
8
8
  import type { TemplateResult } from 'lit-html';
@@ -111,7 +111,7 @@ declare class PieCheckbox_2 extends PieCheckbox_base implements CheckboxProps {
111
111
  static styles: CSSResult;
112
112
  }
113
113
 
114
- declare const PieCheckbox_base: GenericConstructor<FormControlInterface> & GenericConstructor<RTLInterface> & typeof LitElement;
114
+ declare const PieCheckbox_base: GenericConstructor<FormControlInterface> & GenericConstructor<RTLInterface> & typeof PieElement;
115
115
 
116
116
  declare type PieCheckboxEvents = {
117
117
  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.14.2",
4
+ "version": "0.15.0",
5
5
  "repository": {
6
6
  "type": "git",
7
7
  "url": "https://github.com/justeattakeaway/pie",
@@ -39,13 +39,14 @@
39
39
  "license": "Apache-2.0",
40
40
  "devDependencies": {
41
41
  "@custom-elements-manifest/analyzer": "0.9.0",
42
- "@justeattakeaway/pie-components-config": "0.18.0",
43
- "@justeattakeaway/pie-css": "0.15.1",
42
+ "@justeattakeaway/pie-components-config": "0.19.0",
43
+ "@justeattakeaway/pie-css": "0.16.0",
44
+ "@justeattakeaway/pie-monorepo-utils": "0.5.0",
44
45
  "cem-plugin-module-file-extensions": "0.0.5"
45
46
  },
46
47
  "dependencies": {
47
- "@justeattakeaway/pie-assistive-text": "0.8.5",
48
- "@justeattakeaway/pie-webc-core": "0.24.2"
48
+ "@justeattakeaway/pie-assistive-text": "0.9.0",
49
+ "@justeattakeaway/pie-webc-core": "0.25.0"
49
50
  },
50
51
  "volta": {
51
52
  "extends": "../../../package.json"
package/src/checkbox.scss CHANGED
@@ -160,6 +160,7 @@
160
160
  white-space: normal;
161
161
  color: var(--checkbox-content-color);
162
162
  font-size: var(--checkbox-font-size);
163
+ line-height: var(--checkbox-line-height);
163
164
  font-weight: var(--checkbox-font-weight);
164
165
  }
165
166
 
@@ -185,7 +186,8 @@
185
186
  --checkbox-radius: var(--dt-radius-rounded-a);
186
187
  --checkbox-margin: 1px;
187
188
  --checkbox-gap: var(--dt-spacing-b);
188
- --checkbox-font-size: p.font-size(--dt-font-body-l-size);
189
+ --checkbox-font-size: #{p.font-size(--dt-font-body-l-size)};
190
+ --checkbox-line-height: #{p.line-height(--dt-font-body-l-line-height)};
189
191
  --checkbox-font-weight: var(--dt-font-weight-regular);
190
192
  --checkbox-bg-color: var(--dt-color-container-default);
191
193
  --checkbox-border-color: var(--dt-color-border-form);
package/src/index.ts CHANGED
@@ -1,6 +1,7 @@
1
1
  import {
2
2
  LitElement, html, unsafeCSS, nothing,
3
3
  } from 'lit';
4
+ import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElement';
4
5
  import { classMap } from 'lit/directives/class-map.js';
5
6
  import { property, query, state } from 'lit/decorators.js';
6
7
  import { ifDefined } from 'lit/directives/if-defined.js';
@@ -29,7 +30,7 @@ const assistiveTextId = 'assistive-text';
29
30
  * @slot - Default slot
30
31
  * @event {CustomEvent} change - when checked state is changed.
31
32
  */
32
- export class PieCheckbox extends FormControlMixin(RtlMixin(LitElement)) implements CheckboxProps {
33
+ export class PieCheckbox extends FormControlMixin(RtlMixin(PieElement)) implements CheckboxProps {
33
34
  static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true };
34
35
 
35
36
  @state()