@justeattakeaway/pie-checkbox - npm Package Compare versions

Comparing version 0.12.3 to 0.13.0

dist/index.js

@@ -1,9 +0,10 @@
-import { LitElement as m, html as v, nothing as $, unsafeCSS as C } from "lit";
-import { state as f, property as c, query as E } from "lit/decorators.js";
-import { ifDefined as x } from "lit/directives/if-defined.js";
-import { live as P } from "lit/directives/live.js";
-import { FormControlMixin as B, RtlMixin as F, wrapNativeEvent as q, validPropertyValues as D, defineCustomElement as S } from "@justeattakeaway/pie-webc-core";
+import { LitElement as f, html as p, nothing as P, unsafeCSS as B } from "lit";
+import { classMap as v } from "lit/directives/class-map.js";
+import { state as g, property as r, query as F } from "lit/decorators.js";
+import { ifDefined as u } from "lit/directives/if-defined.js";
+import { live as q } from "lit/directives/live.js";
+import { FormControlMixin as D, RtlMixin as S, wrapNativeEvent as _, validPropertyValues as z, defineCustomElement as A } from "@justeattakeaway/pie-webc-core";
 import "@justeattakeaway/pie-assistive-text";
-const _ = `*,*: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[data-pie-disabled]{--checkbox-bg-color: var(--dt-color-container-strong);--checkbox-border-color: var(--dt-color-disabled-01)}.c-checkbox-tick[data-pie-status=error]{--checkbox-border-color: var(--dt-color-support-error)}@media (prefers-reduced-motion: no-preference){.c-checkbox-tick[data-pie-checked]{animation:scaleUp var(--dt-motion-timing-100) var(--checkbox-motion-easing)}}.c-checkbox-tick[data-pie-checked]:not([data-pie-disabled]){--checkbox-bg-color: var(--dt-color-interactive-brand);--checkbox-border-color: var(--dt-color-interactive-brand)}.c-checkbox-tick[data-pie-checked][data-pie-status=error]{--checkbox-bg-color: var(--dt-color-support-error);--checkbox-border-color: var(--dt-color-support-error)}.c-checkbox-tick[data-pie-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[data-pie-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[data-pie-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[data-pie-checked][data-is-rtl]:before{left:unset;right:50%}.c-checkbox-tick[data-pie-indeterminate]:not([data-pie-disabled]){--checkbox-bg-color: var(--dt-color-interactive-brand);--checkbox-border-color: var(--dt-color-interactive-brand)}.c-checkbox-tick[data-pie-indeterminate][data-pie-status=error]{--checkbox-border-color: var(--dt-color-support-error);--checkbox-bg-color: var(--dt-color-support-error)}.c-checkbox-tick[data-pie-indeterminate]:after{width:16px}@media (prefers-reduced-motion: no-preference){.c-checkbox-tick[data-pie-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[data-is-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-interactive-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) + calc(-1 * 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)}.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) + calc(-1 * 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)}.c-checkbox[data-pie-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[data-pie-disabled]:hover .c-checkbox-tick,.c-checkbox[data-pie-disabled]:active .c-checkbox-tick{--checkbox-bg-color: var(--dt-color-container-strong);--checkbox-border-color: var(--dt-color-disabled-01)}.c-checkbox[data-pie-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) + calc(-1 * var(--dt-color-hover-01))))}.c-checkbox[data-pie-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) + calc(-1 * var(--dt-color-active-01))))}.c-checkbox[data-pie-checked]:not([data-pie-disabled]):hover .c-checkbox-tick,.c-checkbox[data-pie-indeterminate]:not([data-pie-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) + calc(-1 * var(--dt-color-hover-01))));--checkbox-border-color: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) + calc(-1 * var(--dt-color-hover-01))))}.c-checkbox[data-pie-checked][data-pie-status=error]:hover .c-checkbox-tick,.c-checkbox[data-pie-indeterminate][data-pie-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) + calc(-1 * var(--dt-color-hover-01))));--checkbox-border-color: hsl(var(--dt-color-support-error-h), var(--dt-color-support-error-s), calc(var(--dt-color-support-error-l) + calc(-1 * var(--dt-color-hover-01))))}.c-checkbox[data-pie-checked]:not([data-pie-disabled]):active .c-checkbox-tick,.c-checkbox[data-pie-indeterminate]:not([data-pie-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) + calc(-1 * var(--dt-color-active-01))));--checkbox-border-color: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) + calc(-1 * var(--dt-color-active-01))))}.c-checkbox[data-pie-checked][data-pie-status=error]:active .c-checkbox-tick,.c-checkbox[data-pie-indeterminate][data-pie-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) + calc(-1 * var(--dt-color-active-01))));--checkbox-border-color: hsl(var(--dt-color-support-error-h), var(--dt-color-support-error-s), calc(var(--dt-color-support-error-l) + calc(-1 * var(--dt-color-active-01))))}
-`, z = ["default", "success", "error"], i = {
+const H = `*,*: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.c-checkbox-tick--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(.c-checkbox-tick--disabled){--checkbox-bg-color: var(--dt-color-interactive-brand);--checkbox-border-color: var(--dt-color-interactive-brand)}.c-checkbox-tick.c-checkbox-tick--checked.c-checkbox-tick--status-error{--checkbox-bg-color: var(--dt-color-support-error);--checkbox-border-color: var(--dt-color-support-error)}.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(.c-checkbox-tick--disabled){--checkbox-bg-color: var(--dt-color-interactive-brand);--checkbox-border-color: var(--dt-color-interactive-brand)}.c-checkbox-tick.c-checkbox-tick--indeterminate.c-checkbox-tick--status-error{--checkbox-bg-color: var(--dt-color-support-error);--checkbox-border-color: var(--dt-color-support-error)}.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-interactive-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)}.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)}.c-checkbox.c-checkbox--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.c-checkbox--disabled:hover .c-checkbox-tick,.c-checkbox.c-checkbox--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)) )}.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)) )}.c-checkbox.c-checkbox--checked:not(.c-checkbox--disabled):hover .c-checkbox-tick,.c-checkbox.c-checkbox--indeterminate:not(.c-checkbox--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: 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)) )}.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: 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)) )}.c-checkbox.c-checkbox--checked:not(.c-checkbox--disabled):active .c-checkbox-tick,.c-checkbox.c-checkbox--indeterminate:not(.c-checkbox--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: 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)) )}.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: 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)) )}
+`, L = ["default", "success", "error"], a = {
   // a default value for the html <input type="checkbox" /> value attribute.
@@ -19,11 +20,11 @@ // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#value
 };
-var A = Object.defineProperty, H = Object.getOwnPropertyDescriptor, o = (b, e, d, a) => {
-  for (var r = a > 1 ? void 0 : a ? H(e, d) : e, n = b.length - 1, s; n >= 0; n--)
-    (s = b[n]) && (r = (a ? s(e, d, r) : s(r)) || r);
-  return a && r && A(e, d, r), r;
+var O = Object.defineProperty, T = Object.getOwnPropertyDescriptor, o = (b, e, d, i) => {
+  for (var t = i > 1 ? void 0 : i ? T(e, d) : e, n = b.length - 1, s; n >= 0; n--)
+    (s = b[n]) && (t = (i ? s(e, d, t) : s(t)) || t);
+  return i && t && O(e, d, t), t;
 };
-const g = "pie-checkbox", u = "assistive-text";
-class t extends B(F(m)) {
+const y = "pie-checkbox", m = "assistive-text";
+class c extends D(S(f)) {
   constructor() {
-    super(...arguments), this.disabledByParent = !1, this.visuallyHiddenError = !1, this.value = i.value, this.checked = i.checked, this.defaultChecked = i.defaultChecked, this.disabled = i.disabled, this.required = i.required, this.indeterminate = i.indeterminate, this.status = i.status;
+    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;
   }
@@ -76,4 +77,4 @@ connectedCallback() {
     this.checked = d;
-    const a = q(e);
-    this.dispatchEvent(a), this.handleFormAssociation();
+    const i = _(e);
+    this.dispatchEvent(i), this.handleFormAssociation();
   }
@@ -96,19 +97,28 @@ /**
       value: d,
-      name: a,
-      disabled: r,
+      name: i,
+      disabled: t,
       disabledByParent: n,
       visuallyHiddenError: s,
-      required: y,
-      indeterminate: p,
-      assistiveText: k,
+      required: w,
+      indeterminate: k,
+      assistiveText: x,
       status: h,
-      isRTL: w
-    } = this, l = r || n;
-    return v`
+      isRTL: C
+    } = this, l = t || n, $ = {
+      "c-checkbox": !0,
+      [`c-checkbox--status-${h}`]: !l,
+      "c-checkbox--disabled": l,
+      "c-checkbox--checked": e,
+      "c-checkbox--indeterminate": k && !e
+    }, E = {
+      "c-checkbox-tick": !0,
+      [`c-checkbox-tick--status-${h}`]: !l,
+      "c-checkbox-tick--disabled": l,
+      "c-checkbox-tick--checked": e,
+      "c-checkbox-tick--indeterminate": k && !e,
+      "c-checkbox-tick--rtl": C
+    };
+    return p`
         <div
-            class="c-checkbox"
-            data-pie-status=${!l && h}
-            ?data-pie-disabled=${l}
-            ?data-pie-checked=${e}
-            ?data-pie-indeterminate=${p && !e}>
+            class="${v($)}">
             <input
@@ -118,9 +128,9 @@ type="checkbox"
                 .value=${d}
-                .checked=${P(e)}
-                name=${x(a)}
+                .checked=${q(e)}
+                name=${u(i)}
                 ?disabled=${l}
-                ?required=${y}
-                .indeterminate=${p}
+                ?required=${w}
+                .indeterminate=${k}
                 aria-invalid=${h === "error" ? "true" : "false"}
-                aria-describedby=${x(k ? u : void 0)}
+                aria-describedby=${u(x ? m : void 0)}
                 @change=${this.handleChange}
@@ -131,8 +141,3 @@ data-test-id="checkbox-input"
                 <span
-                    class="c-checkbox-tick"
-                    ?data-is-rtl=${w}
-                    ?data-pie-checked=${e}
-                    ?data-pie-disabled=${l}
-                    data-pie-status=${!l && h}
-                    ?data-pie-indeterminate=${p && !e}></span>
+                    class="${v(E)}"></span>
                 <span class="c-checkbox-text">
@@ -142,57 +147,57 @@ <slot></slot>
             </label>
-            ${k ? v`
+            ${x ? p`
                 <pie-assistive-text
-                    id="${u}"
+                    id="${m}"
                     variant=${h}
                     ?isVisuallyHidden=${s}
                     data-test-id="pie-checkbox-assistive-text">
-                        ${k}
-                </pie-assistive-text>` : $}
+                        ${x}
+                </pie-assistive-text>` : P}
         </div>`;
   }
 }
-t.shadowRootOptions = { ...m.shadowRootOptions, delegatesFocus: !0 };
-t.styles = C(_);
+c.shadowRootOptions = { ...f.shadowRootOptions, delegatesFocus: !0 };
+c.styles = B(H);
 o([
-  f()
-], t.prototype, "disabledByParent", 2);
+  g()
+], c.prototype, "disabledByParent", 2);
 o([
-  f()
-], t.prototype, "visuallyHiddenError", 2);
+  g()
+], c.prototype, "visuallyHiddenError", 2);
 o([
-  c({ type: String })
-], t.prototype, "value", 2);
+  r({ type: String })
+], c.prototype, "value", 2);
 o([
-  c({ type: String })
-], t.prototype, "name", 2);
+  r({ type: String })
+], c.prototype, "name", 2);
 o([
-  c({ type: Boolean, reflect: !0 })
-], t.prototype, "checked", 2);
+  r({ type: Boolean, reflect: !0 })
+], c.prototype, "checked", 2);
 o([
-  c({ type: Boolean, reflect: !0 })
-], t.prototype, "defaultChecked", 2);
+  r({ type: Boolean, reflect: !0 })
+], c.prototype, "defaultChecked", 2);
 o([
-  c({ type: Boolean, reflect: !0 })
-], t.prototype, "disabled", 2);
+  r({ type: Boolean, reflect: !0 })
+], c.prototype, "disabled", 2);
 o([
-  c({ type: Boolean, reflect: !0 })
-], t.prototype, "required", 2);
+  r({ type: Boolean, reflect: !0 })
+], c.prototype, "required", 2);
 o([
-  c({ type: Boolean, reflect: !0 })
-], t.prototype, "indeterminate", 2);
+  r({ type: Boolean, reflect: !0 })
+], c.prototype, "indeterminate", 2);
 o([
-  E('input[type="checkbox"]')
-], t.prototype, "checkbox", 2);
+  F('input[type="checkbox"]')
+], c.prototype, "checkbox", 2);
 o([
-  c({ type: String })
-], t.prototype, "assistiveText", 2);
+  r({ type: String })
+], c.prototype, "assistiveText", 2);
 o([
-  c({ type: String }),
-  D(g, z, i.status)
-], t.prototype, "status", 2);
-S(g, t);
+  r({ type: String }),
+  z(y, L, a.status)
+], c.prototype, "status", 2);
+A(y, c);
 export {
-  t as PieCheckbox,
-  i as defaultProps,
-  z as statusTypes
+  c as PieCheckbox,
+  a as defaultProps,
+  L as statusTypes
 };

dist/react.js

 import * as e from "react";
 import { createComponent as o } from "@lit/react";
 import { PieCheckbox as t } from "./index.js";
-import { defaultProps as k, statusTypes as P } from "./index.js";
+import { defaultProps as P, statusTypes as f } from "./index.js";
 import "lit";
+import "lit/directives/class-map.js";
 import "lit/decorators.js";
@@ -20,7 +21,7 @@ import "lit/directives/if-defined.js";
   }
-}), x = r;
+}), C = r;
 export {
-  x as PieCheckbox,
-  k as defaultProps,
-  P as statusTypes
+  C as PieCheckbox,
+  P as defaultProps,
+  f as statusTypes
 };

package.json

 {
   "name": "@justeattakeaway/pie-checkbox",
   "description": "PIE Design System Checkbox built using Web Components",
-  "version": "0.12.3",
+  "version": "0.13.0",
   "type": "module",
@@ -6,0 +6,0 @@ "main": "dist/index.js",

src/index.ts

 import {
     LitElement, html, unsafeCSS, nothing,
 } from 'lit';
+import { classMap } from 'lit/directives/class-map.js';
 import { property, query, state } from 'lit/decorators.js';
@@ -167,9 +168,22 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 
+        const checkboxClasses = {
+            'c-checkbox': true,
+            [`c-checkbox--status-${status}`]: !componentDisabled,
+            'c-checkbox--disabled': componentDisabled,
+            'c-checkbox--checked': checked,
+            'c-checkbox--indeterminate': indeterminate && !checked,
+        };
+
+        const labelClasses = {
+            'c-checkbox-tick': true,
+            [`c-checkbox-tick--status-${status}`]: !componentDisabled,
+            'c-checkbox-tick--disabled': componentDisabled,
+            'c-checkbox-tick--checked': checked,
+            'c-checkbox-tick--indeterminate': indeterminate && !checked,
+            'c-checkbox-tick--rtl': isRTL,
+        };
+
         return html`
         <div
-            class="c-checkbox"
-            data-pie-status=${!componentDisabled && status}
-            ?data-pie-disabled=${componentDisabled}
-            ?data-pie-checked=${checked}
-            ?data-pie-indeterminate=${indeterminate && !checked}>
+            class="${classMap(checkboxClasses)}">
             <input
@@ -191,8 +205,3 @@ type="checkbox"
                 <span
-                    class="c-checkbox-tick"
-                    ?data-is-rtl=${isRTL}
-                    ?data-pie-checked=${checked}
-                    ?data-pie-disabled=${componentDisabled}
-                    data-pie-status=${!componentDisabled && status}
-                    ?data-pie-indeterminate=${indeterminate && !checked}></span>
+                    class="${classMap(labelClasses)}"></span>
                 <span class="c-checkbox-text">
@@ -199,0 +208,0 @@ <slot></slot>

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

59706

increased by2.25%

Lines of code

1075

increased by1.22%

No dependency changes