@justeattakeaway/pie-checkbox 0.16.9 → 0.16.11

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 (5) hide show
  1. package/custom-elements.json +9 -68
  2. package/dist/index.d.ts +7 -6
  3. package/dist/index.js +1 -1
  4. package/dist/react.d.ts +8 -7
  5. package/package.json +4 -4
package/custom-elements.json CHANGED
@@ -102,8 +102,7 @@
102
102
  {
103
103
  "kind": "field",
104
104
  "name": "value",
105
- "privacy": "public",
106
- "attribute": "value"
105
+ "privacy": "public"
107
106
  },
108
107
  {
109
108
  "kind": "field",
@@ -111,44 +110,32 @@
111
110
  "type": {
112
111
  "text": "CheckboxProps['name']"
113
112
  },
114
- "privacy": "public",
115
- "attribute": "name",
116
- "reflects": true
113
+ "privacy": "public"
117
114
  },
118
115
  {
119
116
  "kind": "field",
120
117
  "name": "checked",
121
- "privacy": "public",
122
- "attribute": "checked",
123
- "reflects": true
118
+ "privacy": "public"
124
119
  },
125
120
  {
126
121
  "kind": "field",
127
122
  "name": "defaultChecked",
128
- "privacy": "public",
129
- "attribute": "defaultChecked",
130
- "reflects": true
123
+ "privacy": "public"
131
124
  },
132
125
  {
133
126
  "kind": "field",
134
127
  "name": "disabled",
135
- "privacy": "public",
136
- "attribute": "disabled",
137
- "reflects": true
128
+ "privacy": "public"
138
129
  },
139
130
  {
140
131
  "kind": "field",
141
132
  "name": "required",
142
- "privacy": "public",
143
- "attribute": "required",
144
- "reflects": true
133
+ "privacy": "public"
145
134
  },
146
135
  {
147
136
  "kind": "field",
148
137
  "name": "indeterminate",
149
- "privacy": "public",
150
- "attribute": "indeterminate",
151
- "reflects": true
138
+ "privacy": "public"
152
139
  },
153
140
  {
154
141
  "kind": "field",
@@ -164,14 +151,12 @@
164
151
  "type": {
165
152
  "text": "CheckboxProps['assistiveText']"
166
153
  },
167
- "privacy": "public",
168
- "attribute": "assistiveText"
154
+ "privacy": "public"
169
155
  },
170
156
  {
171
157
  "kind": "field",
172
158
  "name": "status",
173
- "privacy": "public",
174
- "attribute": "status"
159
+ "privacy": "public"
175
160
  },
176
161
  {
177
162
  "kind": "field",
@@ -258,50 +243,6 @@
258
243
  "name": "change"
259
244
  }
260
245
  ],
261
- "attributes": [
262
- {
263
- "name": "value",
264
- "fieldName": "value"
265
- },
266
- {
267
- "name": "name",
268
- "type": {
269
- "text": "CheckboxProps['name']"
270
- },
271
- "fieldName": "name"
272
- },
273
- {
274
- "name": "checked",
275
- "fieldName": "checked"
276
- },
277
- {
278
- "name": "defaultChecked",
279
- "fieldName": "defaultChecked"
280
- },
281
- {
282
- "name": "disabled",
283
- "fieldName": "disabled"
284
- },
285
- {
286
- "name": "required",
287
- "fieldName": "required"
288
- },
289
- {
290
- "name": "indeterminate",
291
- "fieldName": "indeterminate"
292
- },
293
- {
294
- "name": "assistiveText",
295
- "type": {
296
- "text": "CheckboxProps['assistiveText']"
297
- },
298
- "fieldName": "assistiveText"
299
- },
300
- {
301
- "name": "status",
302
- "fieldName": "status"
303
- }
304
- ],
305
246
  "mixins": [
306
247
  {
307
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,7 +59,8 @@ 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;
package/dist/index.js CHANGED
@@ -10,7 +10,7 @@ const k = class k extends y {
10
10
  this.getAttribute("v") || this.setAttribute("v", k.v);
11
11
  }
12
12
  };
13
- k.v = "0.16.9";
13
+ k.v = "0.16.11";
14
14
  let p = k;
15
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.
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,7 +62,8 @@ 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;
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.9",
4
+ "version": "0.16.11",
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.18.0",
42
+ "@justeattakeaway/pie-components-config": "0.21.0",
43
+ "@justeattakeaway/pie-css": "0.19.0",
44
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.10",
49
49
  "@justeattakeaway/pie-webc-core": "1.0.0"
50
50
  },
51
51
  "volta": {