@justeattakeaway/pie-checkbox 0.16.11 → 0.17.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 +0 -4
  2. package/dist/index.d.ts +1 -2
  3. package/dist/index.js +24 -26
  4. package/dist/react.d.ts +1 -2
  5. package/package.json +4 -4
  6. package/src/checkbox.scss +2 -2
  7. package/src/index.ts +1 -4
package/custom-elements.json CHANGED
@@ -247,10 +247,6 @@
247
247
  {
248
248
  "name": "FormControlMixin",
249
249
  "package": "@justeattakeaway/pie-webc-core"
250
- },
251
- {
252
- "name": "RtlMixin",
253
- "package": "@justeattakeaway/pie-webc-core"
254
250
  }
255
251
  ],
256
252
  "superclass": {
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 {
@@ -110,7 +109,7 @@ export declare class PieCheckbox extends PieCheckbox_base implements CheckboxPro
110
109
  static styles: CSSResult;
111
110
  }
112
111
 
113
- declare const PieCheckbox_base: GenericConstructor<FormControlInterface> & GenericConstructor<RTLInterface> & typeof PieElement;
112
+ declare const PieCheckbox_base: GenericConstructor<FormControlInterface> & typeof PieElement;
114
113
 
115
114
  export declare const statusTypes: readonly ["default", "success", "error"];
116
115
 
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 y, 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 { FormControlMixin as P, wrapNativeEvent as q, validPropertyValues as D, safeCustomElement as S } from "@justeattakeaway/pie-webc-core";
7
7
  import "@justeattakeaway/pie-assistive-text";
8
8
  const k = class k extends y {
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.17.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 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 = {
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 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--)
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 && H(r, l, t), t;
30
30
  };
31
31
  const I = "pie-checkbox", w = "assistive-text";
32
- let o = class extends q(D(p)) {
32
+ let o = class extends P(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
  /**
@@ -104,31 +104,29 @@ let o = class extends q(D(p)) {
104
104
  required: _,
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, C = {
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
+ }, A = {
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(C)}">
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
132
  ?required=${_}
@@ -140,7 +138,7 @@ let o = class extends q(D(p)) {
140
138
  />
141
139
  <label for="inputId" data-test-id="pie-checkbox-label">
142
140
  <span
143
- class="${g($)}"></span>
141
+ class="${g(A)}"></span>
144
142
  <span class="c-checkbox-text">
145
143
  <slot></slot>
146
144
  </span>
@@ -152,12 +150,12 @@ let o = class extends q(D(p)) {
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
157
  o.shadowRootOptions = { ...y.shadowRootOptions, delegatesFocus: !0 };
160
- o.styles = B(z);
158
+ o.styles = E(O);
161
159
  e([
162
160
  u()
163
161
  ], o.prototype, "_disabledByParent", 2);
@@ -189,20 +187,20 @@ e([
189
187
  i({ type: Boolean, reflect: !0 })
190
188
  ], o.prototype, "indeterminate", 2);
191
189
  e([
192
- F('input[type="checkbox"]')
190
+ B('input[type="checkbox"]')
193
191
  ], o.prototype, "_checkbox", 2);
194
192
  e([
195
193
  i({ type: String })
196
194
  ], o.prototype, "assistiveText", 2);
197
195
  e([
198
196
  i({ type: String }),
199
- O(I, H, a.status)
197
+ D(I, z, a.status)
200
198
  ], o.prototype, "status", 2);
201
199
  o = e([
202
- T("pie-checkbox")
200
+ S("pie-checkbox")
203
201
  ], o);
204
202
  export {
205
203
  o as PieCheckbox,
206
204
  a as defaultProps,
207
- H as statusTypes
205
+ z as statusTypes
208
206
  };
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 {
@@ -113,7 +112,7 @@ declare class PieCheckbox_2 extends PieCheckbox_base implements CheckboxProps {
113
112
  static styles: CSSResult;
114
113
  }
115
114
 
116
- declare const PieCheckbox_base: GenericConstructor<FormControlInterface> & GenericConstructor<RTLInterface> & typeof PieElement;
115
+ declare const PieCheckbox_base: GenericConstructor<FormControlInterface> & typeof PieElement;
117
116
 
118
117
  declare type PieCheckboxEvents = {
119
118
  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.17.0",
5
5
  "repository": {
6
6
  "type": "git",
7
7
  "url": "https://github.com/justeattakeaway/pie",
@@ -41,12 +41,12 @@
41
41
  "@custom-elements-manifest/analyzer": "0.9.0",
42
42
  "@justeattakeaway/pie-components-config": "0.21.0",
43
43
  "@justeattakeaway/pie-css": "0.19.0",
44
- "@justeattakeaway/pie-monorepo-utils": "0.6.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.10.11",
49
+ "@justeattakeaway/pie-webc-core": "1.1.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
  }
package/src/index.ts CHANGED
@@ -8,7 +8,6 @@ import { ifDefined } from 'lit/directives/if-defined.js';
8
8
  import { live } from 'lit/directives/live.js';
9
9
 
10
10
  import {
11
- RtlMixin,
12
11
  wrapNativeEvent,
13
12
  FormControlMixin,
14
13
  validPropertyValues,
@@ -31,7 +30,7 @@ const assistiveTextId = 'assistive-text';
31
30
  * @event {CustomEvent} change - when checked state is changed.
32
31
  */
33
32
  @safeCustomElement('pie-checkbox')
34
- export class PieCheckbox extends FormControlMixin(RtlMixin(PieElement)) implements CheckboxProps {
33
+ export class PieCheckbox extends FormControlMixin(PieElement) implements CheckboxProps {
35
34
  static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true };
36
35
 
37
36
  @state()
@@ -172,7 +171,6 @@ export class PieCheckbox extends FormControlMixin(RtlMixin(PieElement)) implemen
172
171
  indeterminate,
173
172
  assistiveText,
174
173
  status,
175
- isRTL,
176
174
  } = this;
177
175
 
178
176
  const componentDisabled = disabled || _disabledByParent;
@@ -192,7 +190,6 @@ export class PieCheckbox extends FormControlMixin(RtlMixin(PieElement)) implemen
192
190
  'c-checkbox-tick--checked': checked,
193
191
  'c-checkbox-tick--indeterminate': indeterminate && !checked,
194
192
  'c-checkbox-tick--allow-animation': _isAnimationAllowed,
195
- 'c-checkbox-tick--rtl': isRTL,
196
193
  };
197
194
 
198
195
  return html`