@justeattakeaway/pie-checkbox 1.0.16 → 1.0.18

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/index.js +70 -70
  2. package/package.json +5 -5
  3. package/src/checkbox.scss +11 -11
  4. package/src/index.ts +5 -5
package/dist/index.js CHANGED
@@ -10,9 +10,9 @@ const k = class k extends A {
10
10
  this.getAttribute("v") || this.setAttribute("v", k.v);
11
11
  }
12
12
  };
13
- k.v = "1.0.16";
13
+ k.v = "1.0.18";
14
14
  let p = k;
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-family:var(--checkbox-font-family);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-family: var(--dt-font-body-l-family);--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-body-l-weight);--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 = {
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.is-animated{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.is-animated.is-checked{animation:scaleUp var(--dt-motion-timing-100) var(--checkbox-motion-easing)}}.c-checkbox-tick.is-checked:not(.is-disabled){--checkbox-bg-color: var(--dt-color-interactive-brand);--checkbox-border-color: var(--checkbox-bg-color)}.c-checkbox-tick.is-checked.c-checkbox-tick--status-error{--checkbox-bg-color: var(--dt-color-support-error);--checkbox-border-color: var(--checkbox-bg-color)}.c-checkbox-tick.is-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.is-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.is-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.is-checked.is-animated:before{animation:checkboxCheck var(--dt-motion-timing-150) var(--checkbox-motion-easing) forwards}.c-checkbox-tick.is-checked:not(.is-animated):before{width:8px;height:16px;border-color:#fff;border-bottom-right-radius:2px;transform:translate3d(0,-16px,0) rotate(45deg)}.c-checkbox-tick.is-checked:dir(rtl):before{left:unset;right:50%}.c-checkbox-tick.is-indeterminate:not(.is-disabled){--checkbox-bg-color: var(--dt-color-interactive-brand);--checkbox-border-color: var(--checkbox-bg-color)}.c-checkbox-tick.is-indeterminate.c-checkbox-tick--status-error{--checkbox-bg-color: var(--dt-color-support-error);--checkbox-border-color: var(--checkbox-bg-color)}.c-checkbox-tick.is-indeterminate:after{width:16px}@media (prefers-reduced-motion: no-preference){.c-checkbox-tick.is-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-family:var(--checkbox-font-family);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-family: var(--dt-font-body-l-family);--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-body-l-weight);--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.is-checked:not(.is-disabled):hover .c-checkbox-tick,.c-checkbox.is-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.is-checked:not(.is-disabled):hover .c-checkbox-tick,.c-checkbox.is-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.is-checked.c-checkbox--status-error:hover .c-checkbox-tick,.c-checkbox.is-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.is-checked.c-checkbox--status-error:hover .c-checkbox-tick,.c-checkbox.is-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.is-checked:not(.is-disabled):active .c-checkbox-tick,.c-checkbox.is-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.is-checked:not(.is-disabled):active .c-checkbox-tick,.c-checkbox.is-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.is-checked.c-checkbox--status-error:active .c-checkbox-tick,.c-checkbox.is-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.is-checked.c-checkbox--status-error:active .c-checkbox-tick,.c-checkbox.is-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,24 +23,24 @@ const H = '*,*:after,*:before{box-sizing:inherit}:host{display:block}@keyframes
23
23
  required: !1,
24
24
  status: "default"
25
25
  };
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, b; h >= 0; h--)
28
- (b = c[h]) && (t = (n ? b(r, l, t) : b(t)) || t);
29
- return n && t && O(r, l, t), t;
26
+ var O = Object.defineProperty, I = Object.getOwnPropertyDescriptor, c = (o, r, s, l) => {
27
+ for (var t = l > 1 ? void 0 : l ? I(r, s) : r, n = o.length - 1, d; n >= 0; n--)
28
+ (d = o[n]) && (t = (l ? d(r, s, t) : d(t)) || t);
29
+ return l && t && O(r, s, t), t;
30
30
  };
31
31
  const L = "pie-checkbox", y = "assistive-text";
32
- let o = class extends P(D(p)) {
32
+ let e = 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
  }
36
36
  connectedCallback() {
37
37
  super.connectedCallback(), this._abortController = new AbortController();
38
- const { signal: c } = this._abortController;
38
+ const { signal: o } = this._abortController;
39
39
  this.addEventListener("pie-checkbox-group-disabled", (r) => {
40
40
  this._disabledByParent = r.detail.disabled;
41
- }, { signal: c }), this.addEventListener("pie-checkbox-group-error", (r) => {
41
+ }, { signal: o }), this.addEventListener("pie-checkbox-group-error", (r) => {
42
42
  this._visuallyHiddenError = r.detail.error;
43
- }, { signal: c });
43
+ }, { signal: o });
44
44
  }
45
45
  disconnectedCallback() {
46
46
  super.disconnectedCallback(), this._abortController.abort();
@@ -64,8 +64,8 @@ let o = class extends P(D(p)) {
64
64
  * or because the disabled state changed on a <fieldset> that's an ancestor of this element.
65
65
  * @param disabled - The latest disabled state of the input.
66
66
  */
67
- formDisabledCallback(c) {
68
- this.disabled = c;
67
+ formDisabledCallback(o) {
68
+ this.disabled = o;
69
69
  }
70
70
  updated() {
71
71
  this._handleFormAssociation();
@@ -74,11 +74,11 @@ let o = class extends P(D(p)) {
74
74
  * Captures the native change event and wraps it in a custom event.
75
75
  * @param {Event} event - This should be the change event that was listened for on an input element with `type="checkbox"`.
76
76
  */
77
- _handleChange(c) {
78
- const { checked: r } = c == null ? void 0 : c.currentTarget;
77
+ _handleChange(o) {
78
+ const { checked: r } = o == null ? void 0 : o.currentTarget;
79
79
  this.checked = r, this._isAnimationAllowed || (this._isAnimationAllowed = !0);
80
- const l = q(c);
81
- this.dispatchEvent(l), this._handleFormAssociation();
80
+ const s = q(o);
81
+ this.dispatchEvent(s), this._handleFormAssociation();
82
82
  }
83
83
  /**
84
84
  * Called when the form that contains this component is reset.
@@ -89,35 +89,35 @@ let o = class extends P(D(p)) {
89
89
  if (this.checked === this.defaultChecked)
90
90
  return;
91
91
  this.checked = this.defaultChecked;
92
- const c = new Event("change", { bubbles: !0, composed: !0 });
93
- this.dispatchEvent(c), this._handleFormAssociation();
92
+ const o = new Event("change", { bubbles: !0, composed: !0 });
93
+ this.dispatchEvent(o), this._handleFormAssociation();
94
94
  }
95
95
  render() {
96
96
  const {
97
- checked: c,
97
+ checked: o,
98
98
  value: r,
99
- name: l,
100
- disabled: n,
99
+ name: s,
100
+ disabled: l,
101
101
  _disabledByParent: t,
102
- _visuallyHiddenError: h,
103
- _isAnimationAllowed: b,
102
+ _visuallyHiddenError: n,
103
+ _isAnimationAllowed: d,
104
104
  required: w,
105
105
  indeterminate: x,
106
106
  assistiveText: v,
107
- status: d
108
- } = this, s = n || t, _ = {
107
+ status: b
108
+ } = this, h = l || t, _ = {
109
109
  "c-checkbox": !0,
110
- [`c-checkbox--status-${d}`]: !s,
111
- "is-disabled": s,
112
- "c-checkbox--checked": c,
113
- "c-checkbox--indeterminate": x && !c
110
+ [`c-checkbox--status-${b}`]: !h,
111
+ "is-disabled": h,
112
+ "is-checked": o,
113
+ "is-indeterminate": x && !o
114
114
  }, C = {
115
115
  "c-checkbox-tick": !0,
116
- [`c-checkbox-tick--status-${d}`]: !s,
117
- "is-disabled": s,
118
- "c-checkbox-tick--checked": c,
119
- "c-checkbox-tick--indeterminate": x && !c,
120
- "c-checkbox-tick--allow-animation": b
116
+ [`c-checkbox-tick--status-${b}`]: !h,
117
+ "is-disabled": h,
118
+ "is-checked": o,
119
+ "is-indeterminate": x && !o,
120
+ "is-animated": d
121
121
  };
122
122
  return m`
123
123
  <div
@@ -126,12 +126,12 @@ let o = class extends P(D(p)) {
126
126
  type="checkbox"
127
127
  id="inputId"
128
128
  .value=${r}
129
- .checked=${F(c)}
130
- name=${f(l)}
131
- ?disabled=${s}
129
+ .checked=${F(o)}
130
+ name=${f(s)}
131
+ ?disabled=${h}
132
132
  ?required=${w}
133
133
  .indeterminate=${x}
134
- aria-invalid=${d === "error" ? "true" : "false"}
134
+ aria-invalid=${b === "error" ? "true" : "false"}
135
135
  aria-describedby=${f(v ? y : void 0)}
136
136
  @change=${this._handleChange}
137
137
  data-test-id="pie-checkbox-input"
@@ -146,60 +146,60 @@ let o = class extends P(D(p)) {
146
146
  ${v ? m`
147
147
  <pie-assistive-text
148
148
  id="${y}"
149
- variant=${d}
150
- ?isVisuallyHidden=${h}
149
+ variant=${b}
150
+ ?isVisuallyHidden=${n}
151
151
  data-test-id="pie-checkbox-assistive-text">
152
152
  ${v}
153
153
  </pie-assistive-text>` : $}
154
154
  </div>`;
155
155
  }
156
156
  };
157
- o.styles = E(H);
158
- e([
157
+ e.styles = E(H);
158
+ c([
159
159
  u()
160
- ], o.prototype, "_disabledByParent", 2);
161
- e([
160
+ ], e.prototype, "_disabledByParent", 2);
161
+ c([
162
162
  u()
163
- ], o.prototype, "_visuallyHiddenError", 2);
164
- e([
163
+ ], e.prototype, "_visuallyHiddenError", 2);
164
+ c([
165
165
  u()
166
- ], o.prototype, "_isAnimationAllowed", 2);
167
- e([
166
+ ], e.prototype, "_isAnimationAllowed", 2);
167
+ c([
168
168
  i({ type: String })
169
- ], o.prototype, "value", 2);
170
- e([
169
+ ], e.prototype, "value", 2);
170
+ c([
171
171
  i({ type: String, reflect: !0 })
172
- ], o.prototype, "name", 2);
173
- e([
172
+ ], e.prototype, "name", 2);
173
+ c([
174
174
  i({ type: Boolean, reflect: !0 })
175
- ], o.prototype, "checked", 2);
176
- e([
175
+ ], e.prototype, "checked", 2);
176
+ c([
177
177
  i({ type: Boolean, reflect: !0 })
178
- ], o.prototype, "defaultChecked", 2);
179
- e([
178
+ ], e.prototype, "defaultChecked", 2);
179
+ c([
180
180
  i({ type: Boolean, reflect: !0 })
181
- ], o.prototype, "disabled", 2);
182
- e([
181
+ ], e.prototype, "disabled", 2);
182
+ c([
183
183
  i({ type: Boolean, reflect: !0 })
184
- ], o.prototype, "required", 2);
185
- e([
184
+ ], e.prototype, "required", 2);
185
+ c([
186
186
  i({ type: Boolean, reflect: !0 })
187
- ], o.prototype, "indeterminate", 2);
188
- e([
187
+ ], e.prototype, "indeterminate", 2);
188
+ c([
189
189
  B('input[type="checkbox"]')
190
- ], o.prototype, "_checkbox", 2);
191
- e([
190
+ ], e.prototype, "_checkbox", 2);
191
+ c([
192
192
  i({ type: String })
193
- ], o.prototype, "assistiveText", 2);
194
- e([
193
+ ], e.prototype, "assistiveText", 2);
194
+ c([
195
195
  i({ type: String }),
196
196
  S(L, T, a.status)
197
- ], o.prototype, "status", 2);
198
- o = e([
197
+ ], e.prototype, "status", 2);
198
+ e = c([
199
199
  z("pie-checkbox")
200
- ], o);
200
+ ], e);
201
201
  export {
202
- o as PieCheckbox,
202
+ e as PieCheckbox,
203
203
  a as defaultProps,
204
204
  T as statusTypes
205
205
  };
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": "1.0.16",
4
+ "version": "1.0.18",
5
5
  "repository": {
6
6
  "type": "git",
7
7
  "url": "https://github.com/justeattakeaway/pie",
@@ -45,13 +45,13 @@
45
45
  "devDependencies": {
46
46
  "@custom-elements-manifest/analyzer": "0.9.0",
47
47
  "@justeattakeaway/pie-components-config": "0.21.0",
48
- "@justeattakeaway/pie-css": "0.32.0",
49
- "@justeattakeaway/pie-monorepo-utils": "0.7.0",
48
+ "@justeattakeaway/pie-css": "1.1.0",
49
+ "@justeattakeaway/pie-monorepo-utils": "0.8.0",
50
50
  "cem-plugin-module-file-extensions": "0.0.5"
51
51
  },
52
52
  "dependencies": {
53
- "@justeattakeaway/pie-assistive-text": "0.11.22",
54
- "@justeattakeaway/pie-webc-core": "12.0.0"
53
+ "@justeattakeaway/pie-assistive-text": "0.11.24",
54
+ "@justeattakeaway/pie-webc-core": "14.0.0"
55
55
  },
56
56
  "volta": {
57
57
  "extends": "../../../package.json"
package/src/checkbox.scss CHANGED
@@ -71,7 +71,7 @@
71
71
  border-color var(--dt-motion-timing-100) var(--checkbox-motion-easing);
72
72
  }
73
73
 
74
- &.c-checkbox-tick--allow-animation {
74
+ &.is-animated {
75
75
  @media (prefers-reduced-motion: no-preference) {
76
76
  animation: scaleDown var(--dt-motion-timing-100) var(--checkbox-motion-easing);
77
77
  }
@@ -86,13 +86,13 @@
86
86
  --checkbox-border-color: var(--dt-color-support-error);
87
87
  }
88
88
 
89
- &.c-checkbox-tick--allow-animation.c-checkbox-tick--checked {
89
+ &.is-animated.is-checked {
90
90
  @media (prefers-reduced-motion: no-preference) {
91
91
  animation: scaleUp var(--dt-motion-timing-100) var(--checkbox-motion-easing);
92
92
  }
93
93
  }
94
94
 
95
- &.c-checkbox-tick--checked {
95
+ &.is-checked {
96
96
  &:not(.is-disabled) {
97
97
  --checkbox-bg-color: var(--dt-color-interactive-brand);
98
98
  --checkbox-border-color: var(--checkbox-bg-color);
@@ -104,7 +104,7 @@
104
104
  }
105
105
  }
106
106
 
107
- &.c-checkbox-tick--checked:before {
107
+ &.is-checked:before {
108
108
  content: "";
109
109
  position: relative;
110
110
  top: 55%;
@@ -136,11 +136,11 @@
136
136
  }
137
137
 
138
138
 
139
- &.c-checkbox-tick--checked.c-checkbox-tick--allow-animation:before {
139
+ &.is-checked.is-animated:before {
140
140
  animation: checkboxCheck var(--dt-motion-timing-150) var(--checkbox-motion-easing) forwards;
141
141
  }
142
142
 
143
- &.c-checkbox-tick--checked:not(.c-checkbox-tick--allow-animation):before {
143
+ &.is-checked:not(.is-animated):before {
144
144
  width: 8px;
145
145
  height: 16px;
146
146
  border-color: #fff;
@@ -149,12 +149,12 @@
149
149
  }
150
150
 
151
151
 
152
- &.c-checkbox-tick--checked:dir(rtl):before {
152
+ &.is-checked:dir(rtl):before {
153
153
  left: unset;
154
154
  right: 50%;
155
155
  }
156
156
 
157
- &.c-checkbox-tick--indeterminate {
157
+ &.is-indeterminate {
158
158
  &:not(.is-disabled) {
159
159
  --checkbox-bg-color: var(--dt-color-interactive-brand);
160
160
  --checkbox-border-color: var(--checkbox-bg-color);
@@ -166,7 +166,7 @@
166
166
  }
167
167
  }
168
168
 
169
- &.c-checkbox-tick--indeterminate:after {
169
+ &.is-indeterminate:after {
170
170
  width: 16px;
171
171
 
172
172
  @media (prefers-reduced-motion: no-preference) {
@@ -329,8 +329,8 @@
329
329
  }
330
330
  }
331
331
 
332
- &.c-checkbox--checked,
333
- &.c-checkbox--indeterminate {
332
+ &.is-checked,
333
+ &.is-indeterminate {
334
334
  &:not(.is-disabled):hover {
335
335
  .c-checkbox-tick {
336
336
  --checkbox-bg-color: hsl(
package/src/index.ts CHANGED
@@ -176,17 +176,17 @@ export class PieCheckbox extends DelegatesFocusMixin(FormControlMixin(PieElement
176
176
  'c-checkbox': true,
177
177
  [`c-checkbox--status-${status}`]: !componentDisabled,
178
178
  'is-disabled': componentDisabled,
179
- 'c-checkbox--checked': checked,
180
- 'c-checkbox--indeterminate': indeterminate && !checked,
179
+ 'is-checked': checked,
180
+ 'is-indeterminate': indeterminate && !checked,
181
181
  };
182
182
 
183
183
  const labelClasses = {
184
184
  'c-checkbox-tick': true,
185
185
  [`c-checkbox-tick--status-${status}`]: !componentDisabled,
186
186
  'is-disabled': componentDisabled,
187
- 'c-checkbox-tick--checked': checked,
188
- 'c-checkbox-tick--indeterminate': indeterminate && !checked,
189
- 'c-checkbox-tick--allow-animation': _isAnimationAllowed,
187
+ 'is-checked': checked,
188
+ 'is-indeterminate': indeterminate && !checked,
189
+ 'is-animated': _isAnimationAllowed,
190
190
  };
191
191
 
192
192
  return html`