@justeattakeaway/pie-checkbox 0.16.8 → 0.16.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/custom-elements.json +22 -72
  2. package/dist/index.d.ts +8 -6
  3. package/dist/index.js +44 -39
  4. package/dist/react.d.ts +9 -7
  5. package/package.json +5 -5
  6. package/src/checkbox.scss +25 -5
  7. package/src/index.ts +8 -0
package/custom-elements.json CHANGED
@@ -26,7 +26,7 @@
26
26
  "type": {
27
27
  "text": "DefaultProps"
28
28
  },
29
- "default": "{\r\n // a default value for the html <input type=\"checkbox\" /> value attribute.\r\n // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#value\r\n value: 'on',\r\n disabled: false,\r\n defaultChecked: false,\r\n checked: false,\r\n indeterminate: false,\r\n required: false,\r\n status: 'default',\r\n}"
29
+ "default": "{\n // a default value for the html <input type=\"checkbox\" /> value attribute.\n // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#value\n value: 'on',\n disabled: false,\n defaultChecked: false,\n checked: false,\n indeterminate: false,\n required: false,\n status: 'default',\n}"
30
30
  }
31
31
  ],
32
32
  "exports": [
@@ -90,11 +90,19 @@
90
90
  "privacy": "private",
91
91
  "default": "false"
92
92
  },
93
+ {
94
+ "kind": "field",
95
+ "name": "_isAnimationAllowed",
96
+ "type": {
97
+ "text": "boolean"
98
+ },
99
+ "privacy": "private",
100
+ "default": "false"
101
+ },
93
102
  {
94
103
  "kind": "field",
95
104
  "name": "value",
96
- "privacy": "public",
97
- "attribute": "value"
105
+ "privacy": "public"
98
106
  },
99
107
  {
100
108
  "kind": "field",
@@ -102,44 +110,32 @@
102
110
  "type": {
103
111
  "text": "CheckboxProps['name']"
104
112
  },
105
- "privacy": "public",
106
- "attribute": "name",
107
- "reflects": true
113
+ "privacy": "public"
108
114
  },
109
115
  {
110
116
  "kind": "field",
111
117
  "name": "checked",
112
- "privacy": "public",
113
- "attribute": "checked",
114
- "reflects": true
118
+ "privacy": "public"
115
119
  },
116
120
  {
117
121
  "kind": "field",
118
122
  "name": "defaultChecked",
119
- "privacy": "public",
120
- "attribute": "defaultChecked",
121
- "reflects": true
123
+ "privacy": "public"
122
124
  },
123
125
  {
124
126
  "kind": "field",
125
127
  "name": "disabled",
126
- "privacy": "public",
127
- "attribute": "disabled",
128
- "reflects": true
128
+ "privacy": "public"
129
129
  },
130
130
  {
131
131
  "kind": "field",
132
132
  "name": "required",
133
- "privacy": "public",
134
- "attribute": "required",
135
- "reflects": true
133
+ "privacy": "public"
136
134
  },
137
135
  {
138
136
  "kind": "field",
139
137
  "name": "indeterminate",
140
- "privacy": "public",
141
- "attribute": "indeterminate",
142
- "reflects": true
138
+ "privacy": "public"
143
139
  },
144
140
  {
145
141
  "kind": "field",
@@ -155,14 +151,12 @@
155
151
  "type": {
156
152
  "text": "CheckboxProps['assistiveText']"
157
153
  },
158
- "privacy": "public",
159
- "attribute": "assistiveText"
154
+ "privacy": "public"
160
155
  },
161
156
  {
162
157
  "kind": "field",
163
158
  "name": "status",
164
- "privacy": "public",
165
- "attribute": "status"
159
+ "privacy": "public"
166
160
  },
167
161
  {
168
162
  "kind": "field",
@@ -179,7 +173,7 @@
179
173
  "text": "ValidityState"
180
174
  },
181
175
  "privacy": "public",
182
- "description": "(Read-only) returns a ValidityState with the validity states that this element is in.\r\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/validity",
176
+ "description": "(Read-only) returns a ValidityState with the validity states that this element is in.\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/validity",
183
177
  "readonly": true
184
178
  },
185
179
  {
@@ -211,7 +205,7 @@
211
205
  "description": "The latest disabled state of the input."
212
206
  }
213
207
  ],
214
- "description": "Called after the disabled state of the element changes,\r\neither because the disabled attribute of this element was added or removed;\r\nor because the disabled state changed on a <fieldset> that's an ancestor of this element."
208
+ "description": "Called after the disabled state of the element changes,\neither because the disabled attribute of this element was added or removed;\nor because the disabled state changed on a <fieldset> that's an ancestor of this element."
215
209
  },
216
210
  {
217
211
  "kind": "method",
@@ -237,7 +231,7 @@
237
231
  "text": "void"
238
232
  }
239
233
  },
240
- "description": "Called when the form that contains this component is reset.\r\nIf the current checked state is different to the default checked state,\r\nthe checked state is reset to the default checked state and a `change` event is emitted."
234
+ "description": "Called when the form that contains this component is reset.\nIf the current checked state is different to the default checked state,\nthe checked state is reset to the default checked state and a `change` event is emitted."
241
235
  }
242
236
  ],
243
237
  "events": [
@@ -249,50 +243,6 @@
249
243
  "name": "change"
250
244
  }
251
245
  ],
252
- "attributes": [
253
- {
254
- "name": "value",
255
- "fieldName": "value"
256
- },
257
- {
258
- "name": "name",
259
- "type": {
260
- "text": "CheckboxProps['name']"
261
- },
262
- "fieldName": "name"
263
- },
264
- {
265
- "name": "checked",
266
- "fieldName": "checked"
267
- },
268
- {
269
- "name": "defaultChecked",
270
- "fieldName": "defaultChecked"
271
- },
272
- {
273
- "name": "disabled",
274
- "fieldName": "disabled"
275
- },
276
- {
277
- "name": "required",
278
- "fieldName": "required"
279
- },
280
- {
281
- "name": "indeterminate",
282
- "fieldName": "indeterminate"
283
- },
284
- {
285
- "name": "assistiveText",
286
- "type": {
287
- "text": "CheckboxProps['assistiveText']"
288
- },
289
- "fieldName": "assistiveText"
290
- },
291
- {
292
- "name": "status",
293
- "fieldName": "status"
294
- }
295
- ],
296
246
  "mixins": [
297
247
  {
298
248
  "name": "FormControlMixin",
package/dist/index.d.ts CHANGED
@@ -1,10 +1,10 @@
1
1
  import { ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
2
- import type { CSSResult } from 'lit';
3
- import type { FormControlInterface } from '@justeattakeaway/pie-webc-core';
4
- import type { GenericConstructor } from '@justeattakeaway/pie-webc-core';
2
+ import { CSSResult } from 'lit';
3
+ import { FormControlInterface } from '@justeattakeaway/pie-webc-core';
4
+ import { GenericConstructor } from '@justeattakeaway/pie-webc-core';
5
5
  import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElement';
6
- import type { RTLInterface } from '@justeattakeaway/pie-webc-core';
7
- import type { TemplateResult } from 'lit-html';
6
+ import { RTLInterface } from '@justeattakeaway/pie-webc-core';
7
+ import { TemplateResult } from 'lit-html';
8
8
 
9
9
  export declare interface CheckboxProps {
10
10
  /**
@@ -59,10 +59,12 @@ export declare class PieCheckbox extends PieCheckbox_base implements CheckboxPro
59
59
  static shadowRootOptions: {
60
60
  delegatesFocus: boolean;
61
61
  mode: ShadowRootMode;
62
- slotAssignment?: SlotAssignmentMode | undefined;
62
+ serializable?: boolean;
63
+ slotAssignment?: SlotAssignmentMode;
63
64
  };
64
65
  private _disabledByParent;
65
66
  private _visuallyHiddenError;
67
+ private _isAnimationAllowed;
66
68
  value: string;
67
69
  name: CheckboxProps['name'];
68
70
  checked: boolean;
package/dist/index.js CHANGED
@@ -1,18 +1,18 @@
1
- import { LitElement as y, nothing as E, html as u, unsafeCSS as A } from "lit";
1
+ import { LitElement as y, nothing as E, html as m, unsafeCSS as B } from "lit";
2
2
  import { classMap as g } from "lit/directives/class-map.js";
3
- import { state as w, property as i, query as B } from "lit/decorators.js";
4
- import { ifDefined as m } from "lit/directives/if-defined.js";
5
- import { live as F } from "lit/directives/live.js";
6
- import { FormControlMixin as P, RtlMixin as q, wrapNativeEvent as D, validPropertyValues as S, safeCustomElement as O } from "@justeattakeaway/pie-webc-core";
3
+ import { state as u, property as i, query as F } from "lit/decorators.js";
4
+ import { ifDefined as f } from "lit/directives/if-defined.js";
5
+ import { live as P } from "lit/directives/live.js";
6
+ import { FormControlMixin as q, RtlMixin as D, wrapNativeEvent as S, validPropertyValues as O, safeCustomElement as T } from "@justeattakeaway/pie-webc-core";
7
7
  import "@justeattakeaway/pie-assistive-text";
8
8
  const k = class k extends y {
9
9
  willUpdate() {
10
10
  this.getAttribute("v") || this.setAttribute("v", k.v);
11
11
  }
12
12
  };
13
- k.v = "0.16.8";
13
+ k.v = "0.16.10";
14
14
  let p = k;
15
- const T = '*,*: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);animation:scaleDown var(--dt-motion-timing-100) var(--checkbox-motion-easing)}}.c-checkbox-tick.is-disabled{--checkbox-bg-color: var(--dt-color-container-strong);--checkbox-border-color: var(--dt-color-disabled-01)}.c-checkbox-tick.c-checkbox-tick--status-error{--checkbox-border-color: var(--dt-color-support-error)}@media (prefers-reduced-motion: no-preference){.c-checkbox-tick.c-checkbox-tick--checked{animation:scaleUp var(--dt-motion-timing-100) var(--checkbox-motion-easing)}}.c-checkbox-tick.c-checkbox-tick--checked:not(.is-disabled){--checkbox-bg-color: var(--dt-color-interactive-brand);--checkbox-border-color: var(--checkbox-bg-color)}.c-checkbox-tick.c-checkbox-tick--checked.c-checkbox-tick--status-error{--checkbox-bg-color: var(--dt-color-support-error);--checkbox-border-color: var(--checkbox-bg-color)}.c-checkbox-tick.c-checkbox-tick--checked:before{content:"";position:relative;top:55%;left:14%;border-right:2px solid transparent;border-bottom:2px solid transparent;transform:rotate(45deg);transform-origin:0% 100%;animation:checkboxCheck var(--dt-motion-timing-150) var(--checkbox-motion-easing) forwards}@media (prefers-reduced-motion: reduce){.c-checkbox-tick.c-checkbox-tick--checked:before{animation-duration:1ms!important;animation-delay:0!important;animation-iteration-count:1!important;width:8px;height:16px;border-color:#fff;border-bottom-right-radius:2px;transform:translate3d(0,-16px,0) rotate(45deg)}}@media only percy{.c-checkbox-tick.c-checkbox-tick--checked:before{animation:none;width:8px;height:16px;border-color:#fff;border-bottom-right-radius:2px;transform:translate3d(0,-16px,0) rotate(45deg)}}.c-checkbox-tick.c-checkbox-tick--checked.c-checkbox-tick--rtl:before{left:unset;right:50%}.c-checkbox-tick.c-checkbox-tick--indeterminate:not(.is-disabled){--checkbox-bg-color: var(--dt-color-interactive-brand);--checkbox-border-color: var(--checkbox-bg-color)}.c-checkbox-tick.c-checkbox-tick--indeterminate.c-checkbox-tick--status-error{--checkbox-bg-color: var(--dt-color-support-error);--checkbox-border-color: var(--checkbox-bg-color)}.c-checkbox-tick.c-checkbox-tick--indeterminate:after{width:16px}@media (prefers-reduced-motion: no-preference){.c-checkbox-tick.c-checkbox-tick--indeterminate:after{transition:width var(--dt-motion-timing-100) var(--checkbox-motion-easing) var(--dt-motion-timing-100)}}.c-checkbox-text{display:inline;flex:1 1 auto;align-self:center;min-width:0;margin-inline-start:var(--checkbox-gap);white-space:normal;color:var(--checkbox-content-color);font-size:var(--checkbox-font-size);line-height:var(--checkbox-line-height);font-weight:var(--checkbox-font-weight)}.c-checkbox-tick:after{content:"";position:relative;top:47%;left:14%;width:0;height:2px;background-color:#fff}.c-checkbox-tick.c-checkbox-tick--rtl:after{left:unset;right:14%}.c-checkbox{--checkbox-height: 24px;--checkbox-width: 24px;--checkbox-radius: var(--dt-radius-rounded-a);--checkbox-margin: 1px;--checkbox-gap: var(--dt-spacing-b);--checkbox-font-size: calc(var(--dt-font-body-l-size) * 1px);--checkbox-line-height: calc(var(--dt-font-body-l-line-height) * 1px);--checkbox-font-weight: var(--dt-font-weight-regular);--checkbox-bg-color: var(--dt-color-container-default);--checkbox-border-color: var(--dt-color-border-form);--checkbox-content-color: var(--dt-color-content-default);--checkbox-motion-easing: var(--dt-motion-easing-persistent-functional);display:flex;flex-direction:column}.c-checkbox input{display:block;position:absolute;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);clip-path:inset(1px);white-space:nowrap}.c-checkbox label{display:flex;max-width:100%;white-space:nowrap;cursor:pointer}.c-checkbox:hover .c-checkbox-tick{--checkbox-bg-color: hsl( var(--dt-color-container-default-h), var(--dt-color-container-default-s), calc(var(--dt-color-container-default-l) - var(--dt-color-hover-01)) );transition:background-color var(--dt-motion-timing-200) var(--checkbox-motion-easing),border-color var(--dt-motion-timing-200) var(--checkbox-motion-easing)}@supports (background-color: color-mix(in srgb,black,white)){.c-checkbox:hover .c-checkbox-tick{--checkbox-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-container-default))}}.c-checkbox:active .c-checkbox-tick{--checkbox-bg-color: hsl( var(--dt-color-container-default-h), var(--dt-color-container-default-s), calc(var(--dt-color-container-default-l) - var(--dt-color-active-01)) );transition:background-color var(--dt-motion-timing-100) var(--checkbox-motion-easing),border-color var(--dt-motion-timing-100) var(--checkbox-motion-easing)}@supports (background-color: color-mix(in srgb,black,white)){.c-checkbox:active .c-checkbox-tick{--checkbox-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-container-default))}}.c-checkbox.is-disabled label{cursor:not-allowed}.c-checkbox input:focus-visible+label .c-checkbox-tick{box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer);outline:none}.c-checkbox.is-disabled:hover .c-checkbox-tick,.c-checkbox.is-disabled:active .c-checkbox-tick{--checkbox-bg-color: var(--dt-color-container-strong);--checkbox-border-color: var(--dt-color-disabled-01)}.c-checkbox.c-checkbox--status-error:hover .c-checkbox-tick{--checkbox-bg-color: hsl( var(--dt-color-container-default-h), var(--dt-color-container-default-s), calc(var(--dt-color-container-default-l) - var(--dt-color-hover-01)) )}@supports (background-color: color-mix(in srgb,black,white)){.c-checkbox.c-checkbox--status-error:hover .c-checkbox-tick{--checkbox-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-container-default))}}.c-checkbox.c-checkbox--status-error:active .c-checkbox-tick{--checkbox-bg-color: hsl( var(--dt-color-container-default-h), var(--dt-color-container-default-s), calc(var(--dt-color-container-default-l) - var(--dt-color-active-01)) )}@supports (background-color: color-mix(in srgb,black,white)){.c-checkbox.c-checkbox--status-error:active{--checkbox-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-container-default))}}.c-checkbox.c-checkbox--checked:not(.is-disabled):hover .c-checkbox-tick,.c-checkbox.c-checkbox--indeterminate:not(.is-disabled):hover .c-checkbox-tick{--checkbox-bg-color: hsl( var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) - var(--dt-color-hover-01)) );--checkbox-border-color: var(--checkbox-bg-color)}@supports (background-color: color-mix(in srgb,black,white)){.c-checkbox.c-checkbox--checked:not(.is-disabled):hover .c-checkbox-tick,.c-checkbox.c-checkbox--indeterminate:not(.is-disabled):hover .c-checkbox-tick{--checkbox-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-interactive-brand));--checkbox-border-color: var(--checkbox-bg-color)}}.c-checkbox.c-checkbox--checked.c-checkbox--status-error:hover .c-checkbox-tick,.c-checkbox.c-checkbox--indeterminate.c-checkbox--status-error:hover .c-checkbox-tick{--checkbox-bg-color: hsl( var(--dt-color-support-error-h), var(--dt-color-support-error-s), calc(var(--dt-color-support-error-l) - var(--dt-color-hover-01)) );--checkbox-border-color: var(--checkbox-bg-color)}@supports (background-color: color-mix(in srgb,black,white)){.c-checkbox.c-checkbox--checked.c-checkbox--status-error:hover .c-checkbox-tick,.c-checkbox.c-checkbox--indeterminate.c-checkbox--status-error:hover .c-checkbox-tick{--checkbox-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-support-error));--checkbox-border-color: var(--checkbox-bg-color)}}.c-checkbox.c-checkbox--checked:not(.is-disabled):active .c-checkbox-tick,.c-checkbox.c-checkbox--indeterminate:not(.is-disabled):active .c-checkbox-tick{--checkbox-bg-color: hsl( var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) - var(--dt-color-active-01)) );--checkbox-border-color: var(--checkbox-bg-color)}@supports (background-color: color-mix(in srgb,black,white)){.c-checkbox.c-checkbox--checked:not(.is-disabled):active .c-checkbox-tick,.c-checkbox.c-checkbox--indeterminate:not(.is-disabled):active .c-checkbox-tick{--checkbox-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-interactive-brand));--checkbox-border-color: var(--checkbox-bg-color)}}.c-checkbox.c-checkbox--checked.c-checkbox--status-error:active .c-checkbox-tick,.c-checkbox.c-checkbox--indeterminate.c-checkbox--status-error:active .c-checkbox-tick{--checkbox-bg-color: hsl( var(--dt-color-support-error-h), var(--dt-color-support-error-s), calc(var(--dt-color-support-error-l) - var(--dt-color-active-01)) );--checkbox-border-color: var(--checkbox-bg-color)}@supports (background-color: color-mix(in srgb,black,white)){.c-checkbox.c-checkbox--checked.c-checkbox--status-error:active .c-checkbox-tick,.c-checkbox.c-checkbox--indeterminate.c-checkbox--status-error:active .c-checkbox-tick{--checkbox-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-support-error));--checkbox-border-color: var(--checkbox-bg-color)}}', z = ["default", "success", "error"], a = {
15
+ const z = '*,*:after,*:before{box-sizing:inherit}:host{display:block}@keyframes checkboxCheck{0%{width:0;height:0;border-color:#fff;transform:translateZ(0) rotate(45deg)}33%{width:8px;height:0;transform:translateZ(0) rotate(45deg)}to{width:8px;height:16px;border-color:#fff;border-bottom-right-radius:2px;transform:translate3d(0,-16px,1px) rotate(45deg)}}@keyframes scaleDown{0%{transform:scale(1)}to{transform:scale(0)}}@keyframes scaleUp{0%{transform:scale(0)}33%{transform:scale(.5)}to{transform:scale(1)}}.c-checkbox-tick{content:"";display:flex;flex:0 0 auto;width:var(--checkbox-width);height:var(--checkbox-height);margin:var(--checkbox-margin);border:1px solid var(--checkbox-border-color);border-radius:var(--checkbox-radius);background-color:var(--checkbox-bg-color)}@media (prefers-reduced-motion: no-preference){.c-checkbox-tick{transition:background-color var(--dt-motion-timing-100) var(--checkbox-motion-easing),border-color var(--dt-motion-timing-100) var(--checkbox-motion-easing)}}@media (prefers-reduced-motion: no-preference){.c-checkbox-tick.c-checkbox-tick--allow-animation{animation:scaleDown var(--dt-motion-timing-100) var(--checkbox-motion-easing)}}.c-checkbox-tick.is-disabled{--checkbox-bg-color: var(--dt-color-container-strong);--checkbox-border-color: var(--dt-color-disabled-01)}.c-checkbox-tick.c-checkbox-tick--status-error{--checkbox-border-color: var(--dt-color-support-error)}@media (prefers-reduced-motion: no-preference){.c-checkbox-tick.c-checkbox-tick--allow-animation.c-checkbox-tick--checked{animation:scaleUp var(--dt-motion-timing-100) var(--checkbox-motion-easing)}}.c-checkbox-tick.c-checkbox-tick--checked:not(.is-disabled){--checkbox-bg-color: var(--dt-color-interactive-brand);--checkbox-border-color: var(--checkbox-bg-color)}.c-checkbox-tick.c-checkbox-tick--checked.c-checkbox-tick--status-error{--checkbox-bg-color: var(--dt-color-support-error);--checkbox-border-color: var(--checkbox-bg-color)}.c-checkbox-tick.c-checkbox-tick--checked:before{content:"";position:relative;top:55%;left:14%;border-right:2px solid transparent;border-bottom:2px solid transparent;transform:rotate(45deg);transform-origin:0% 100%}@media (prefers-reduced-motion: reduce){.c-checkbox-tick.c-checkbox-tick--checked:before{animation-duration:1ms!important;animation-delay:0!important;animation-iteration-count:1!important;width:8px;height:16px;border-color:#fff;border-bottom-right-radius:2px;transform:translate3d(0,-16px,0) rotate(45deg)}}@media only percy{.c-checkbox-tick.c-checkbox-tick--checked:before{animation:none;width:8px;height:16px;border-color:#fff;border-bottom-right-radius:2px;transform:translate3d(0,-16px,0) rotate(45deg)}}.c-checkbox-tick.c-checkbox-tick--checked.c-checkbox-tick--allow-animation:before{animation:checkboxCheck var(--dt-motion-timing-150) var(--checkbox-motion-easing) forwards}.c-checkbox-tick.c-checkbox-tick--checked:not(.c-checkbox-tick--allow-animation):before{width:8px;height:16px;border-color:#fff;border-bottom-right-radius:2px;transform:translate3d(0,-16px,0) rotate(45deg)}.c-checkbox-tick.c-checkbox-tick--checked.c-checkbox-tick--rtl:before{left:unset;right:50%}.c-checkbox-tick.c-checkbox-tick--indeterminate:not(.is-disabled){--checkbox-bg-color: var(--dt-color-interactive-brand);--checkbox-border-color: var(--checkbox-bg-color)}.c-checkbox-tick.c-checkbox-tick--indeterminate.c-checkbox-tick--status-error{--checkbox-bg-color: var(--dt-color-support-error);--checkbox-border-color: var(--checkbox-bg-color)}.c-checkbox-tick.c-checkbox-tick--indeterminate:after{width:16px}@media (prefers-reduced-motion: no-preference){.c-checkbox-tick.c-checkbox-tick--indeterminate:after{transition:width var(--dt-motion-timing-100) var(--checkbox-motion-easing) var(--dt-motion-timing-100)}}.c-checkbox-text{display:inline;flex:1 1 auto;align-self:center;min-width:0;margin-inline-start:var(--checkbox-gap);white-space:normal;color:var(--checkbox-content-color);font-size:var(--checkbox-font-size);line-height:var(--checkbox-line-height);font-weight:var(--checkbox-font-weight)}.c-checkbox-tick:after{content:"";position:relative;top:47%;left:14%;width:0;height:2px;background-color:#fff}.c-checkbox-tick.c-checkbox-tick--rtl:after{left:unset;right:14%}.c-checkbox{--checkbox-height: 24px;--checkbox-width: 24px;--checkbox-radius: var(--dt-radius-rounded-a);--checkbox-margin: 1px;--checkbox-gap: var(--dt-spacing-b);--checkbox-font-size: calc(var(--dt-font-body-l-size) * 1px);--checkbox-line-height: calc(var(--dt-font-body-l-line-height) * 1px);--checkbox-font-weight: var(--dt-font-weight-regular);--checkbox-bg-color: var(--dt-color-container-default);--checkbox-border-color: var(--dt-color-border-form);--checkbox-content-color: var(--dt-color-content-default);--checkbox-motion-easing: var(--dt-motion-easing-persistent-functional);display:flex;flex-direction:column}.c-checkbox input{display:block;position:absolute;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);clip-path:inset(1px);white-space:nowrap}.c-checkbox label{display:flex;max-width:100%;white-space:nowrap;cursor:pointer}.c-checkbox:hover .c-checkbox-tick{--checkbox-bg-color: hsl( var(--dt-color-container-default-h), var(--dt-color-container-default-s), calc(var(--dt-color-container-default-l) - var(--dt-color-hover-01)) );transition:background-color var(--dt-motion-timing-200) var(--checkbox-motion-easing),border-color var(--dt-motion-timing-200) var(--checkbox-motion-easing)}@supports (background-color: color-mix(in srgb,black,white)){.c-checkbox:hover .c-checkbox-tick{--checkbox-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-container-default))}}.c-checkbox:active .c-checkbox-tick{--checkbox-bg-color: hsl( var(--dt-color-container-default-h), var(--dt-color-container-default-s), calc(var(--dt-color-container-default-l) - var(--dt-color-active-01)) );transition:background-color var(--dt-motion-timing-100) var(--checkbox-motion-easing),border-color var(--dt-motion-timing-100) var(--checkbox-motion-easing)}@supports (background-color: color-mix(in srgb,black,white)){.c-checkbox:active .c-checkbox-tick{--checkbox-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-container-default))}}.c-checkbox.is-disabled label{cursor:not-allowed}.c-checkbox input:focus-visible+label .c-checkbox-tick{box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer);outline:none}.c-checkbox.is-disabled:hover .c-checkbox-tick,.c-checkbox.is-disabled:active .c-checkbox-tick{--checkbox-bg-color: var(--dt-color-container-strong);--checkbox-border-color: var(--dt-color-disabled-01)}.c-checkbox.c-checkbox--status-error:hover .c-checkbox-tick{--checkbox-bg-color: hsl( var(--dt-color-container-default-h), var(--dt-color-container-default-s), calc(var(--dt-color-container-default-l) - var(--dt-color-hover-01)) )}@supports (background-color: color-mix(in srgb,black,white)){.c-checkbox.c-checkbox--status-error:hover .c-checkbox-tick{--checkbox-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-container-default))}}.c-checkbox.c-checkbox--status-error:active .c-checkbox-tick{--checkbox-bg-color: hsl( var(--dt-color-container-default-h), var(--dt-color-container-default-s), calc(var(--dt-color-container-default-l) - var(--dt-color-active-01)) )}@supports (background-color: color-mix(in srgb,black,white)){.c-checkbox.c-checkbox--status-error:active{--checkbox-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-container-default))}}.c-checkbox.c-checkbox--checked:not(.is-disabled):hover .c-checkbox-tick,.c-checkbox.c-checkbox--indeterminate:not(.is-disabled):hover .c-checkbox-tick{--checkbox-bg-color: hsl( var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) - var(--dt-color-hover-01)) );--checkbox-border-color: var(--checkbox-bg-color)}@supports (background-color: color-mix(in srgb,black,white)){.c-checkbox.c-checkbox--checked:not(.is-disabled):hover .c-checkbox-tick,.c-checkbox.c-checkbox--indeterminate:not(.is-disabled):hover .c-checkbox-tick{--checkbox-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-interactive-brand));--checkbox-border-color: var(--checkbox-bg-color)}}.c-checkbox.c-checkbox--checked.c-checkbox--status-error:hover .c-checkbox-tick,.c-checkbox.c-checkbox--indeterminate.c-checkbox--status-error:hover .c-checkbox-tick{--checkbox-bg-color: hsl( var(--dt-color-support-error-h), var(--dt-color-support-error-s), calc(var(--dt-color-support-error-l) - var(--dt-color-hover-01)) );--checkbox-border-color: var(--checkbox-bg-color)}@supports (background-color: color-mix(in srgb,black,white)){.c-checkbox.c-checkbox--checked.c-checkbox--status-error:hover .c-checkbox-tick,.c-checkbox.c-checkbox--indeterminate.c-checkbox--status-error:hover .c-checkbox-tick{--checkbox-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-support-error));--checkbox-border-color: var(--checkbox-bg-color)}}.c-checkbox.c-checkbox--checked:not(.is-disabled):active .c-checkbox-tick,.c-checkbox.c-checkbox--indeterminate:not(.is-disabled):active .c-checkbox-tick{--checkbox-bg-color: hsl( var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) - var(--dt-color-active-01)) );--checkbox-border-color: var(--checkbox-bg-color)}@supports (background-color: color-mix(in srgb,black,white)){.c-checkbox.c-checkbox--checked:not(.is-disabled):active .c-checkbox-tick,.c-checkbox.c-checkbox--indeterminate:not(.is-disabled):active .c-checkbox-tick{--checkbox-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-interactive-brand));--checkbox-border-color: var(--checkbox-bg-color)}}.c-checkbox.c-checkbox--checked.c-checkbox--status-error:active .c-checkbox-tick,.c-checkbox.c-checkbox--indeterminate.c-checkbox--status-error:active .c-checkbox-tick{--checkbox-bg-color: hsl( var(--dt-color-support-error-h), var(--dt-color-support-error-s), calc(var(--dt-color-support-error-l) - var(--dt-color-active-01)) );--checkbox-border-color: var(--checkbox-bg-color)}@supports (background-color: color-mix(in srgb,black,white)){.c-checkbox.c-checkbox--checked.c-checkbox--status-error:active .c-checkbox-tick,.c-checkbox.c-checkbox--indeterminate.c-checkbox--status-error:active .c-checkbox-tick{--checkbox-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-support-error));--checkbox-border-color: var(--checkbox-bg-color)}}', H = ["default", "success", "error"], a = {
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,15 +23,15 @@ const T = '*,*:after,*:before{box-sizing:inherit}:host{display:block}@keyframes
23
23
  required: !1,
24
24
  status: "default"
25
25
  };
26
- var H = Object.defineProperty, R = Object.getOwnPropertyDescriptor, e = (c, r, l, s) => {
27
- for (var t = s > 1 ? void 0 : s ? R(r, l) : r, h = c.length - 1, b; h >= 0; h--)
28
- (b = c[h]) && (t = (s ? b(r, l, t) : b(t)) || t);
29
- return s && t && H(r, l, t), t;
26
+ var R = Object.defineProperty, L = Object.getOwnPropertyDescriptor, e = (c, r, l, n) => {
27
+ for (var t = n > 1 ? void 0 : n ? L(r, l) : r, h = c.length - 1, s; h >= 0; h--)
28
+ (s = c[h]) && (t = (n ? s(r, l, t) : s(t)) || t);
29
+ return n && t && R(r, l, t), t;
30
30
  };
31
- const L = "pie-checkbox", f = "assistive-text";
32
- let o = class extends P(q(p)) {
31
+ const I = "pie-checkbox", w = "assistive-text";
32
+ let o = class extends q(D(p)) {
33
33
  constructor() {
34
- 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;
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();
@@ -76,8 +76,8 @@ let o = class extends P(q(p)) {
76
76
  */
77
77
  _handleChange(c) {
78
78
  const { checked: r } = c == null ? void 0 : c.currentTarget;
79
- this.checked = r;
80
- const l = D(c);
79
+ this.checked = r, this._isAnimationAllowed || (this._isAnimationAllowed = !0);
80
+ const l = S(c);
81
81
  this.dispatchEvent(l), this._handleFormAssociation();
82
82
  }
83
83
  /**
@@ -97,42 +97,44 @@ let o = class extends P(q(p)) {
97
97
  checked: c,
98
98
  value: r,
99
99
  name: l,
100
- disabled: s,
100
+ disabled: n,
101
101
  _disabledByParent: t,
102
102
  _visuallyHiddenError: h,
103
- required: b,
103
+ _isAnimationAllowed: s,
104
+ required: _,
104
105
  indeterminate: x,
105
106
  assistiveText: v,
106
107
  status: d,
107
108
  isRTL: C
108
- } = this, n = s || t, _ = {
109
+ } = this, b = n || t, A = {
109
110
  "c-checkbox": !0,
110
- [`c-checkbox--status-${d}`]: !n,
111
- "is-disabled": n,
111
+ [`c-checkbox--status-${d}`]: !b,
112
+ "is-disabled": b,
112
113
  "c-checkbox--checked": c,
113
114
  "c-checkbox--indeterminate": x && !c
114
115
  }, $ = {
115
116
  "c-checkbox-tick": !0,
116
- [`c-checkbox-tick--status-${d}`]: !n,
117
- "is-disabled": n,
117
+ [`c-checkbox-tick--status-${d}`]: !b,
118
+ "is-disabled": b,
118
119
  "c-checkbox-tick--checked": c,
119
120
  "c-checkbox-tick--indeterminate": x && !c,
121
+ "c-checkbox-tick--allow-animation": s,
120
122
  "c-checkbox-tick--rtl": C
121
123
  };
122
- return u`
124
+ return m`
123
125
  <div
124
- class="${g(_)}">
126
+ class="${g(A)}">
125
127
  <input
126
128
  type="checkbox"
127
129
  id="inputId"
128
130
  .value=${r}
129
- .checked=${F(c)}
130
- name=${m(l)}
131
- ?disabled=${n}
132
- ?required=${b}
131
+ .checked=${P(c)}
132
+ name=${f(l)}
133
+ ?disabled=${b}
134
+ ?required=${_}
133
135
  .indeterminate=${x}
134
136
  aria-invalid=${d === "error" ? "true" : "false"}
135
- aria-describedby=${m(v ? f : void 0)}
137
+ aria-describedby=${f(v ? w : void 0)}
136
138
  @change=${this._handleChange}
137
139
  data-test-id="pie-checkbox-input"
138
140
  />
@@ -143,9 +145,9 @@ let o = class extends P(q(p)) {
143
145
  <slot></slot>
144
146
  </span>
145
147
  </label>
146
- ${v ? u`
148
+ ${v ? m`
147
149
  <pie-assistive-text
148
- id="${f}"
150
+ id="${w}"
149
151
  variant=${d}
150
152
  ?isVisuallyHidden=${h}
151
153
  data-test-id="pie-checkbox-assistive-text">
@@ -155,13 +157,16 @@ let o = class extends P(q(p)) {
155
157
  }
156
158
  };
157
159
  o.shadowRootOptions = { ...y.shadowRootOptions, delegatesFocus: !0 };
158
- o.styles = A(T);
160
+ o.styles = B(z);
159
161
  e([
160
- w()
162
+ u()
161
163
  ], o.prototype, "_disabledByParent", 2);
162
164
  e([
163
- w()
165
+ u()
164
166
  ], o.prototype, "_visuallyHiddenError", 2);
167
+ e([
168
+ u()
169
+ ], o.prototype, "_isAnimationAllowed", 2);
165
170
  e([
166
171
  i({ type: String })
167
172
  ], o.prototype, "value", 2);
@@ -184,20 +189,20 @@ e([
184
189
  i({ type: Boolean, reflect: !0 })
185
190
  ], o.prototype, "indeterminate", 2);
186
191
  e([
187
- B('input[type="checkbox"]')
192
+ F('input[type="checkbox"]')
188
193
  ], o.prototype, "_checkbox", 2);
189
194
  e([
190
195
  i({ type: String })
191
196
  ], o.prototype, "assistiveText", 2);
192
197
  e([
193
198
  i({ type: String }),
194
- S(L, z, a.status)
199
+ O(I, H, a.status)
195
200
  ], o.prototype, "status", 2);
196
201
  o = e([
197
- O("pie-checkbox")
202
+ T("pie-checkbox")
198
203
  ], o);
199
204
  export {
200
205
  o as PieCheckbox,
201
206
  a as defaultProps,
202
- z as statusTypes
207
+ H as statusTypes
203
208
  };
package/dist/react.d.ts CHANGED
@@ -1,11 +1,11 @@
1
1
  import { ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
2
- import type { CSSResult } from 'lit';
3
- import type { FormControlInterface } from '@justeattakeaway/pie-webc-core';
4
- import type { GenericConstructor } from '@justeattakeaway/pie-webc-core';
2
+ import { CSSResult } from 'lit';
3
+ import { FormControlInterface } from '@justeattakeaway/pie-webc-core';
4
+ import { GenericConstructor } from '@justeattakeaway/pie-webc-core';
5
5
  import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElement';
6
6
  import * as React_2 from 'react';
7
- import type { RTLInterface } from '@justeattakeaway/pie-webc-core';
8
- import type { TemplateResult } from 'lit-html';
7
+ import { RTLInterface } from '@justeattakeaway/pie-webc-core';
8
+ import { TemplateResult } from 'lit-html';
9
9
 
10
10
  export declare interface CheckboxProps {
11
11
  /**
@@ -51,7 +51,7 @@ export declare type DefaultProps = ComponentDefaultProps<CheckboxProps, keyof Om
51
51
 
52
52
  export declare const defaultProps: DefaultProps;
53
53
 
54
- export declare const PieCheckbox: React_2.ForwardRefExoticComponent<CheckboxProps & React_2.RefAttributes<PieCheckbox_2> & PieCheckboxEvents & ReactBaseType>;
54
+ export declare const PieCheckbox: React_2.ForwardRefExoticComponent<React_2.PropsWithoutRef<CheckboxProps> & React_2.RefAttributes<PieCheckbox_2> & PieCheckboxEvents & ReactBaseType>;
55
55
 
56
56
  /**
57
57
  * @tagname pie-checkbox
@@ -62,10 +62,12 @@ declare class PieCheckbox_2 extends PieCheckbox_base implements CheckboxProps {
62
62
  static shadowRootOptions: {
63
63
  delegatesFocus: boolean;
64
64
  mode: ShadowRootMode;
65
- slotAssignment?: SlotAssignmentMode | undefined;
65
+ serializable?: boolean;
66
+ slotAssignment?: SlotAssignmentMode;
66
67
  };
67
68
  private _disabledByParent;
68
69
  private _visuallyHiddenError;
70
+ private _isAnimationAllowed;
69
71
  value: string;
70
72
  name: CheckboxProps['name'];
71
73
  checked: boolean;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@justeattakeaway/pie-checkbox",
3
3
  "description": "PIE Design System Checkbox built using Web Components",
4
- "version": "0.16.8",
4
+ "version": "0.16.10",
5
5
  "repository": {
6
6
  "type": "git",
7
7
  "url": "https://github.com/justeattakeaway/pie",
@@ -39,13 +39,13 @@
39
39
  "license": "Apache-2.0",
40
40
  "devDependencies": {
41
41
  "@custom-elements-manifest/analyzer": "0.9.0",
42
- "@justeattakeaway/pie-components-config": "0.20.1",
43
- "@justeattakeaway/pie-css": "0.17.0",
44
- "@justeattakeaway/pie-monorepo-utils": "0.5.1",
42
+ "@justeattakeaway/pie-components-config": "0.21.0",
43
+ "@justeattakeaway/pie-css": "0.18.0",
44
+ "@justeattakeaway/pie-monorepo-utils": "0.6.0",
45
45
  "cem-plugin-module-file-extensions": "0.0.5"
46
46
  },
47
47
  "dependencies": {
48
- "@justeattakeaway/pie-assistive-text": "0.10.8",
48
+ "@justeattakeaway/pie-assistive-text": "0.10.9",
49
49
  "@justeattakeaway/pie-webc-core": "1.0.0"
50
50
  },
51
51
  "volta": {
package/src/checkbox.scss CHANGED
@@ -69,7 +69,12 @@
69
69
  transition:
70
70
  background-color var(--dt-motion-timing-100) var(--checkbox-motion-easing),
71
71
  border-color var(--dt-motion-timing-100) var(--checkbox-motion-easing);
72
- animation: scaleDown var(--dt-motion-timing-100) var(--checkbox-motion-easing);
72
+ }
73
+
74
+ &.c-checkbox-tick--allow-animation {
75
+ @media (prefers-reduced-motion: no-preference) {
76
+ animation: scaleDown var(--dt-motion-timing-100) var(--checkbox-motion-easing);
77
+ }
73
78
  }
74
79
 
75
80
  &.is-disabled {
@@ -81,11 +86,13 @@
81
86
  --checkbox-border-color: var(--dt-color-support-error);
82
87
  }
83
88
 
84
- &.c-checkbox-tick--checked {
89
+ &.c-checkbox-tick--allow-animation.c-checkbox-tick--checked {
85
90
  @media (prefers-reduced-motion: no-preference) {
86
91
  animation: scaleUp var(--dt-motion-timing-100) var(--checkbox-motion-easing);
87
92
  }
93
+ }
88
94
 
95
+ &.c-checkbox-tick--checked {
89
96
  &:not(.is-disabled) {
90
97
  --checkbox-bg-color: var(--dt-color-interactive-brand);
91
98
  --checkbox-border-color: var(--checkbox-bg-color);
@@ -106,8 +113,7 @@
106
113
  border-bottom: 2px solid transparent;
107
114
  transform: rotate(45deg);
108
115
  transform-origin: 0% 100%;
109
- animation: checkboxCheck var(--dt-motion-timing-150) var(--checkbox-motion-easing) forwards;
110
-
116
+
111
117
  @media (prefers-reduced-motion: reduce) {
112
118
  animation-duration: 1ms !important;
113
119
  animation-delay: 0 !important;
@@ -118,7 +124,7 @@
118
124
  border-bottom-right-radius: 2px;
119
125
  transform: translate3d(0, -16px, 0) rotate(45deg);
120
126
  }
121
-
127
+
122
128
  @media only percy {
123
129
  animation: none;
124
130
  width: 8px;
@@ -129,6 +135,20 @@
129
135
  }
130
136
  }
131
137
 
138
+
139
+ &.c-checkbox-tick--checked.c-checkbox-tick--allow-animation:before {
140
+ animation: checkboxCheck var(--dt-motion-timing-150) var(--checkbox-motion-easing) forwards;
141
+ }
142
+
143
+ &.c-checkbox-tick--checked:not(.c-checkbox-tick--allow-animation):before {
144
+ width: 8px;
145
+ height: 16px;
146
+ border-color: #fff;
147
+ border-bottom-right-radius: 2px;
148
+ transform: translate3d(0, -16px, 0) rotate(45deg);
149
+ }
150
+
151
+
132
152
  &.c-checkbox-tick--checked.c-checkbox-tick--rtl:before {
133
153
  left: unset;
134
154
  right: 50%;
package/src/index.ts CHANGED
@@ -40,6 +40,9 @@ export class PieCheckbox extends FormControlMixin(RtlMixin(PieElement)) implemen
40
40
  @state()
41
41
  private _visuallyHiddenError = false;
42
42
 
43
+ @state()
44
+ private _isAnimationAllowed = false;
45
+
43
46
  @property({ type: String })
44
47
  public value = defaultProps.value;
45
48
 
@@ -127,6 +130,9 @@ export class PieCheckbox extends FormControlMixin(RtlMixin(PieElement)) implemen
127
130
  private _handleChange (event: Event) {
128
131
  const { checked } = event?.currentTarget as HTMLInputElement;
129
132
  this.checked = checked;
133
+ if (!this._isAnimationAllowed) {
134
+ this._isAnimationAllowed = true;
135
+ }
130
136
  // This is because some events set `composed` to `false`.
131
137
  // Reference: https://javascript.info/shadow-dom-events#event-composed
132
138
  const customChangeEvent = wrapNativeEvent(event);
@@ -161,6 +167,7 @@ export class PieCheckbox extends FormControlMixin(RtlMixin(PieElement)) implemen
161
167
  disabled,
162
168
  _disabledByParent,
163
169
  _visuallyHiddenError,
170
+ _isAnimationAllowed,
164
171
  required,
165
172
  indeterminate,
166
173
  assistiveText,
@@ -184,6 +191,7 @@ export class PieCheckbox extends FormControlMixin(RtlMixin(PieElement)) implemen
184
191
  'is-disabled': componentDisabled,
185
192
  'c-checkbox-tick--checked': checked,
186
193
  'c-checkbox-tick--indeterminate': indeterminate && !checked,
194
+ 'c-checkbox-tick--allow-animation': _isAnimationAllowed,
187
195
  'c-checkbox-tick--rtl': isRTL,
188
196
  };
189
197