@justeattakeaway/pie-checkbox 0.6.0 → 0.7.0

package/custom-elements.json

@@ -117,9 +117,6 @@
             {
               "kind": "field",
               "name": "required",
-              "type": {
-                "text": "CheckboxProps['required'] | undefined"
-              },
               "privacy": "public",
               "attribute": "required",
               "reflects": true
@@ -127,9 +124,6 @@
             {
               "kind": "field",
               "name": "indeterminate",
-              "type": {
-                "text": "CheckboxProps['indeterminate'] | undefined"
-              },
               "privacy": "public",
               "attribute": "indeterminate",
               "reflects": true
@@ -163,9 +157,6 @@
             {
               "kind": "field",
               "name": "status",
-              "type": {
-                "text": "CheckboxProps['status'] | undefined"
-              },
               "privacy": "public",
               "attribute": "status"
             },
@@ -282,16 +273,10 @@
             },
             {
               "name": "required",
-              "type": {
-                "text": "CheckboxProps['required'] | undefined"
-              },
               "fieldName": "required"
             },
             {
               "name": "indeterminate",
-              "type": {
-                "text": "CheckboxProps['indeterminate'] | undefined"
-              },
               "fieldName": "indeterminate"
             },
             {
@@ -310,9 +295,6 @@
             },
             {
               "name": "status",
-              "type": {
-                "text": "CheckboxProps['status'] | undefined"
-              },
               "fieldName": "status"
             }
           ],

package/dist/index.d.ts

@@ -80,12 +80,12 @@ export declare class PieCheckbox extends PieCheckbox_base implements CheckboxPro
     checked: boolean;
     defaultChecked: boolean;
     disabled?: CheckboxProps['disabled'];
-    required?: CheckboxProps['required'];
-    indeterminate?: CheckboxProps['indeterminate'];
+    required: boolean;
+    indeterminate: boolean;
     aria: CheckboxProps['aria'];
     private checkbox;
     assistiveText?: CheckboxProps['assistiveText'];
-    status?: CheckboxProps['status'];
+    status: "default" | "error" | "success";
     /**
      * (Read-only) returns a ValidityState with the validity states that this element is in.
      * https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/validity

package/dist/index.js

@@ -1,11 +1,11 @@
-import { LitElement as y, html as f, nothing as p, unsafeCSS as g } from "lit";
-import { property as i, query as C } from "lit/decorators.js";
-import { ifDefined as m } from "lit/directives/if-defined.js";
-import { live as $ } from "lit/directives/live.js";
-import { FormControlMixin as F, RtlMixin as E, wrapNativeEvent as S, validPropertyValues as q, defineCustomElement as A } from "@justeattakeaway/pie-webc-core";
+import { LitElement as g, html as u, nothing as h, unsafeCSS as w } from "lit";
+import { property as c, query as $ } from "lit/decorators.js";
+import { ifDefined as f } from "lit/directives/if-defined.js";
+import { live as x } from "lit/directives/live.js";
+import { FormControlMixin as C, RtlMixin as F, wrapNativeEvent as E, validPropertyValues as S, defineCustomElement as q } from "@justeattakeaway/pie-webc-core";
 import "@justeattakeaway/pie-assistive-text";
-const O = `*,*:after,*:before{box-sizing:inherit}
-`, P = ["default", "success", "error"], n = {
+const A = `*,*: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,0) rotate(45deg)}}@keyframes scaleDown{0%{transform:scale(.7)}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);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-border-color: var(--dt-color-support-error);--checkbox-bg-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:none;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-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{--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: var(--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)}.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)}.c-checkbox[data-pie-disabled] label{cursor:default;pointer-events:none}.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))))}
+`, O = ["default", "success", "error"], n = {
   // a default value for the html <input type="checkbox" /> value attribute.
   // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#value
   value: "on",
@@ -15,13 +15,13 @@ const O = `*,*:after,*:before{box-sizing:inherit}
   checked: !1,
   status: "default"
 };
-var _ = Object.defineProperty, w = Object.getOwnPropertyDescriptor, s = (h, e, r, a) => {
-  for (var o = a > 1 ? void 0 : a ? w(e, r) : e, d = h.length - 1, l; d >= 0; d--)
-    (l = h[d]) && (o = (a ? l(e, r, o) : l(o)) || o);
-  return a && o && _(e, r, o), o;
+var P = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, o = (b, e, d, i) => {
+  for (var r = i > 1 ? void 0 : i ? _(e, d) : e, a = b.length - 1, s; a >= 0; a--)
+    (s = b[a]) && (r = (i ? s(e, d, r) : s(r)) || r);
+  return i && r && P(e, d, r), r;
 };
-const v = "pie-checkbox", b = "assistive-text";
-class t extends F(E(y)) {
+const y = "pie-checkbox", m = "assistive-text";
+class t extends C(F(g)) {
   constructor() {
     super(...arguments), this.value = n.value, this.checked = n.checked, this.defaultChecked = n.defaultChecked, this.required = n.required, this.indeterminate = n.indeterminate, this.status = n.status;
   }
@@ -58,10 +58,10 @@ class t extends F(E(y)) {
    * @param {Event} event - This should be the change event that was listened for on an input element with `type="checkbox"`.
    */
   handleChange(e) {
-    const { checked: r } = e == null ? void 0 : e.currentTarget;
-    this.checked = r;
-    const a = S(e);
-    this.dispatchEvent(a), this.handleFormAssociation();
+    const { checked: d } = e == null ? void 0 : e.currentTarget;
+    this.checked = d;
+    const i = E(e);
+    this.dispatchEvent(i), this.handleFormAssociation();
   }
   /**
    * Called when the form that contains this component is reset.
@@ -78,79 +78,99 @@ class t extends F(E(y)) {
   render() {
     const {
       checked: e,
-      value: r,
-      name: a,
-      label: o,
-      disabled: d,
-      required: l,
-      indeterminate: k,
-      aria: c,
-      assistiveText: u,
-      status: x
+      value: d,
+      name: i,
+      label: r,
+      disabled: a,
+      required: s,
+      indeterminate: p,
+      aria: l,
+      assistiveText: k,
+      status: v
     } = this;
-    return f`
-        <label data-test-id="checkbox-component">
+    return u`
+        <div
+            class="c-checkbox"
+            data-pie-status=${!a && v}
+            ?data-pie-disabled=${x(a)}
+            ?data-pie-checked=${e}
+            ?data-pie-indeterminate=${p && !e}>
             <input
                 type="checkbox"
-                .value=${r}
-                .checked=${$(e)}
-                name=${m(a)}
-                ?disabled=${d}
-                ?required=${l}
-                .indeterminate=${!!k}
-                aria-label=${(c == null ? void 0 : c.label) || p}
-                aria-labelledby=${o ? p : (c == null ? void 0 : c.labelledby) || p}
-                aria-describedby=${m(u ? b : void 0)}
+                id="inputId"
+                .value=${d}
+                .checked=${x(e)}
+                name=${f(i)}
+                ?disabled=${a}
+                ?required=${s}
+                .indeterminate=${p}
+                aria-label=${(l == null ? void 0 : l.label) || h}
+                aria-labelledby=${r ? h : (l == null ? void 0 : l.labelledby) || h}
+                aria-describedby=${f(k ? m : void 0)}
                 @change=${this.handleChange}
                 data-test-id="checkbox-input"
             />
-            ${o}
-        </label>
-        ${u ? f`<pie-assistive-text id="${b}" variant=${m(x)} data-test-id="pie-checkbox-assistive-text">${u}</pie-assistive-text>` : p}`;
+            <label for="inputId" data-test-id="checkbox-component">
+                <span
+                    class="c-checkbox-tick"
+                    ?data-pie-checked=${e}
+                    ?data-pie-disabled=${x(a)}
+                    data-pie-status=${!a && v}
+                    ?data-pie-indeterminate=${p && !e}></span>
+                <span class="c-checkbox-text">${r}</span>
+            </label>
+            ${k ? u`
+                <pie-assistive-text
+                    id="${m}"
+                    variant=${v}
+                    data-test-id="pie-checkbox-assistive-text">
+                        ${k}
+                </pie-assistive-text>` : h}
+        </div>`;
   }
 }
-t.shadowRootOptions = { ...y.shadowRootOptions, delegatesFocus: !0 };
-t.styles = g(O);
-s([
-  i({ type: String })
+t.shadowRootOptions = { ...g.shadowRootOptions, delegatesFocus: !0 };
+t.styles = w(A);
+o([
+  c({ type: String })
 ], t.prototype, "value", 2);
-s([
-  i({ type: String })
+o([
+  c({ type: String })
 ], t.prototype, "label", 2);
-s([
-  i({ type: String })
+o([
+  c({ type: String })
 ], t.prototype, "name", 2);
-s([
-  i({ type: Boolean, reflect: !0 })
+o([
+  c({ type: Boolean, reflect: !0 })
 ], t.prototype, "checked", 2);
-s([
-  i({ type: Boolean, reflect: !0 })
+o([
+  c({ type: Boolean, reflect: !0 })
 ], t.prototype, "defaultChecked", 2);
-s([
-  i({ type: Boolean, reflect: !0 })
+o([
+  c({ type: Boolean, reflect: !0 })
 ], t.prototype, "disabled", 2);
-s([
-  i({ type: Boolean, reflect: !0 })
+o([
+  c({ type: Boolean, reflect: !0 })
 ], t.prototype, "required", 2);
-s([
-  i({ type: Boolean, reflect: !0 })
+o([
+  c({ type: Boolean, reflect: !0 })
 ], t.prototype, "indeterminate", 2);
-s([
-  i({ type: Object })
+o([
+  c({ type: Object })
 ], t.prototype, "aria", 2);
-s([
-  C('input[type="checkbox"]')
+o([
+  $('input[type="checkbox"]')
 ], t.prototype, "checkbox", 2);
-s([
-  i({ type: String })
+o([
+  c({ type: String })
 ], t.prototype, "assistiveText", 2);
-s([
-  i({ type: String }),
-  q(v, P, n.status)
+o([
+  c({ type: String }),
+  S(y, O, n.status)
 ], t.prototype, "status", 2);
-A(v, t);
+q(y, t);
 export {
   t as PieCheckbox,
   n as defaultProps,
-  P as statusTypes
+  O as statusTypes
 };

package/dist/react.d.ts

@@ -83,12 +83,12 @@ declare class PieCheckbox_2 extends PieCheckbox_base implements CheckboxProps {
     checked: boolean;
     defaultChecked: boolean;
     disabled?: CheckboxProps['disabled'];
-    required?: CheckboxProps['required'];
-    indeterminate?: CheckboxProps['indeterminate'];
+    required: boolean;
+    indeterminate: boolean;
     aria: CheckboxProps['aria'];
     private checkbox;
     assistiveText?: CheckboxProps['assistiveText'];
-    status?: CheckboxProps['status'];
+    status: "default" | "error" | "success";
     /**
      * (Read-only) returns a ValidityState with the validity states that this element is in.
      * https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/validity

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-checkbox",
   "description": "PIE Design System Checkbox built using Web Components",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",

package/src/checkbox.scss

@@ -1 +1,299 @@
 @use '@justeattakeaway/pie-css/scss' as p;
+
+@keyframes checkboxCheck {
+    0% {
+        width: 0;
+        height: 0;
+        border-color: #fff;
+
+        transform: translate3d(0, 0, 0) rotate(45deg);
+    }
+
+    33% {
+        width: 8px;
+        height: 0;
+
+        transform: translate3d(0, 0, 0) rotate(45deg);
+    }
+
+    100% {
+        width: 8px;
+        height: 16px;
+        border-color: #fff;
+        border-bottom-right-radius: 2px;
+
+
+        transform: translate3d(0, -16px, 0) rotate(45deg);
+    }
+}
+
+@keyframes scaleDown {
+    0% {
+        transform: scale(0.7);
+    }
+
+    100% {
+        transform: scale(0);
+    }
+}
+
+@keyframes scaleUp {
+    0% {
+        transform: scale(0);
+    }
+
+    33% {
+        transform: scale(0.5);
+    }
+
+    100% {
+        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) {
+        transition: background-color var(--dt-motion-timing-100) var(--checkbox-motion-easing);
+
+        animation: scaleDown var(--dt-motion-timing-100) var(--checkbox-motion-easing);
+    }
+
+    &[data-pie-disabled] {
+        --checkbox-bg-color: var(--dt-color-container-strong);
+        --checkbox-border-color: var(--dt-color-disabled-01);
+    }
+
+    &[data-pie-status="error"] {
+        --checkbox-border-color: var(--dt-color-support-error);
+    }
+
+    &[data-pie-checked] {
+        @media (prefers-reduced-motion: no-preference) {
+            animation: scaleUp var(--dt-motion-timing-100) var(--checkbox-motion-easing);
+        }
+
+        &:not([data-pie-disabled]) {
+            --checkbox-bg-color: var(--dt-color-interactive-brand);
+            --checkbox-border-color: var(--dt-color-interactive-brand);
+        }
+
+        &[data-pie-status="error"] {
+            --checkbox-border-color: var(--dt-color-support-error);
+            --checkbox-bg-color: var(--dt-color-support-error);
+        }
+    }
+
+    &[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) {
+            animation: none;
+            width: 8px;
+            height: 16px;
+            border-color: #fff;
+            border-bottom-right-radius: 2px;
+
+            transform: translate3d(0, -16px, 0) rotate(45deg);
+        }
+
+        @media only percy {
+            animation: none;
+
+            width: 8px;
+            height: 16px;
+            border-color: #fff;
+            border-bottom-right-radius: 2px;
+
+            transform: translate3d(0, -16px, 0) rotate(45deg);
+        }
+    }
+
+    &[data-pie-indeterminate] {
+        &:not([data-pie-disabled]) {
+            --checkbox-bg-color: var(--dt-color-interactive-brand);
+            --checkbox-border-color: var(--dt-color-interactive-brand);
+        }
+
+        &[data-pie-status="error"] {
+            --checkbox-border-color: var(--dt-color-support-error);
+            --checkbox-bg-color: var(--dt-color-support-error);
+        }
+    }
+
+    &[data-pie-indeterminate]:after {
+        width: 16px;
+
+        @media (prefers-reduced-motion: no-preference) {
+            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);
+}
+
+// initial styles for indeterminate state
+.c-checkbox-tick:after {
+    content: "";
+
+    position: relative;
+    top: 47%;
+    left: 14%;
+    width: 0;
+    height: 2px;
+    background-color: white;
+}
+
+.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: var(--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;
+
+    input {
+        display: block;
+        position: absolute;
+        height: 1px;
+        width: 1px;
+        overflow: hidden;
+        clip: rect(1px, 1px, 1px, 1px);
+        clip-path: inset(1px);
+        white-space: nowrap;
+    }
+
+    label {
+        display: flex;
+        max-width: 100%;
+        white-space: nowrap;
+        cursor: pointer;
+    }
+
+    &: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);
+        }
+    }
+
+    &: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);
+        }
+    }
+
+    &[data-pie-disabled] {
+        label {
+            cursor: default;
+            pointer-events: none;
+        }
+    }
+
+    input:focus-visible + label {
+        .c-checkbox-tick {
+            @include p.focus;
+        }
+    }
+
+    &[data-pie-disabled] {
+        &:hover,
+        &:active {
+            .c-checkbox-tick {
+                --checkbox-bg-color: var(--dt-color-container-strong);
+                --checkbox-border-color: var(--dt-color-disabled-01);
+            }
+        }
+    }
+
+    &[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))));
+            }
+        }
+
+        &: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))));
+            }
+        }
+    }
+
+    &[data-pie-checked],
+    &[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))));
+            }
+        }
+
+        &[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))));
+            }
+        }
+
+        &: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))));
+            }
+        }
+
+        &[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))));
+            }
+        }
+    }
+}

package/src/index.ts

@@ -49,10 +49,10 @@ export class PieCheckbox extends FormControlMixin(RtlMixin(LitElement)) implemen
     public disabled?: CheckboxProps['disabled'];
 
     @property({ type: Boolean, reflect: true })
-    public required?: CheckboxProps['required'] = defaultProps.required;
+    public required = defaultProps.required;
 
     @property({ type: Boolean, reflect: true })
-    public indeterminate?: CheckboxProps['indeterminate'] = defaultProps.indeterminate;
+    public indeterminate = defaultProps.indeterminate;
 
     @property({ type: Object })
     public aria: CheckboxProps['aria'];
@@ -65,7 +65,7 @@ export class PieCheckbox extends FormControlMixin(RtlMixin(LitElement)) implemen
 
     @property({ type: String })
     @validPropertyValues(componentSelector, statusTypes, defaultProps.status)
-    public status?: CheckboxProps['status'] = defaultProps.status;
+    public status = defaultProps.status;
 
     /**
      * (Read-only) returns a ValidityState with the validity states that this element is in.
@@ -155,24 +155,44 @@ export class PieCheckbox extends FormControlMixin(RtlMixin(LitElement)) implemen
         } = this;
 
         return html`
-        <label data-test-id="checkbox-component">
+        <div
+            class="c-checkbox"
+            data-pie-status=${!disabled && status}
+            ?data-pie-disabled=${live(disabled)}
+            ?data-pie-checked=${checked}
+            ?data-pie-indeterminate=${indeterminate && !checked}>
             <input
                 type="checkbox"
+                id="inputId"
                 .value=${value}
                 .checked=${live(checked)}
                 name=${ifDefined(name)}
                 ?disabled=${disabled}
                 ?required=${required}
-                .indeterminate=${!!indeterminate}
+                .indeterminate=${indeterminate}
                 aria-label=${aria?.label || nothing}
                 aria-labelledby=${label ? nothing : aria?.labelledby || nothing}
                 aria-describedby=${ifDefined(assistiveText ? assistiveTextIdValue : undefined)}
                 @change=${this.handleChange}
                 data-test-id="checkbox-input"
             />
-            ${label}
-        </label>
-        ${assistiveText ? html`<pie-assistive-text id="${assistiveTextIdValue}" variant=${ifDefined(status)} data-test-id="pie-checkbox-assistive-text">${assistiveText}</pie-assistive-text>` : nothing}`;
+            <label for="inputId" data-test-id="checkbox-component">
+                <span
+                    class="c-checkbox-tick"
+                    ?data-pie-checked=${checked}
+                    ?data-pie-disabled=${live(disabled)}
+                    data-pie-status=${!disabled && status}
+                    ?data-pie-indeterminate=${indeterminate && !checked}></span>
+                <span class="c-checkbox-text">${label}</span>
+            </label>
+            ${assistiveText ? html`
+                <pie-assistive-text
+                    id="${assistiveTextIdValue}"
+                    variant=${status}
+                    data-test-id="pie-checkbox-assistive-text">
+                        ${assistiveText}
+                </pie-assistive-text>` : nothing}
+        </div>`;
     }
 
     // Renders a `CSSResult` generated from SCSS by Vite