@justeattakeaway/pie-checkbox 1.1.0 → 1.1.1

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 (3) hide show
  1. package/custom-elements.json +84 -13
  2. package/dist/index.js +1 -1
  3. package/package.json +3 -3
package/custom-elements.json CHANGED
@@ -42,7 +42,7 @@
42
42
  "type": {
43
43
  "text": "DefaultProps"
44
44
  },
45
- "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 labelPosition: 'trailing',\n labelFit: 'hug',\n}"
45
+ "default": "{ // 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', disabled: false, defaultChecked: false, checked: false, indeterminate: false, required: false, status: 'default', labelPosition: 'trailing', labelFit: 'hug', }"
46
46
  }
47
47
  ],
48
48
  "exports": [
@@ -125,7 +125,8 @@
125
125
  {
126
126
  "kind": "field",
127
127
  "name": "value",
128
- "privacy": "public"
128
+ "privacy": "public",
129
+ "attribute": "value"
129
130
  },
130
131
  {
131
132
  "kind": "field",
@@ -133,32 +134,44 @@
133
134
  "type": {
134
135
  "text": "CheckboxProps['name']"
135
136
  },
136
- "privacy": "public"
137
+ "privacy": "public",
138
+ "attribute": "name",
139
+ "reflects": true
137
140
  },
138
141
  {
139
142
  "kind": "field",
140
143
  "name": "checked",
141
- "privacy": "public"
144
+ "privacy": "public",
145
+ "attribute": "checked",
146
+ "reflects": true
142
147
  },
143
148
  {
144
149
  "kind": "field",
145
150
  "name": "defaultChecked",
146
- "privacy": "public"
151
+ "privacy": "public",
152
+ "attribute": "defaultChecked",
153
+ "reflects": true
147
154
  },
148
155
  {
149
156
  "kind": "field",
150
157
  "name": "disabled",
151
- "privacy": "public"
158
+ "privacy": "public",
159
+ "attribute": "disabled",
160
+ "reflects": true
152
161
  },
153
162
  {
154
163
  "kind": "field",
155
164
  "name": "required",
156
- "privacy": "public"
165
+ "privacy": "public",
166
+ "attribute": "required",
167
+ "reflects": true
157
168
  },
158
169
  {
159
170
  "kind": "field",
160
171
  "name": "indeterminate",
161
- "privacy": "public"
172
+ "privacy": "public",
173
+ "attribute": "indeterminate",
174
+ "reflects": true
162
175
  },
163
176
  {
164
177
  "kind": "field",
@@ -174,22 +187,28 @@
174
187
  "type": {
175
188
  "text": "CheckboxProps['assistiveText']"
176
189
  },
177
- "privacy": "public"
190
+ "privacy": "public",
191
+ "attribute": "assistiveText"
178
192
  },
179
193
  {
180
194
  "kind": "field",
181
195
  "name": "status",
182
- "privacy": "public"
196
+ "privacy": "public",
197
+ "attribute": "status"
183
198
  },
184
199
  {
185
200
  "kind": "field",
186
201
  "name": "labelPosition",
187
- "privacy": "public"
202
+ "privacy": "public",
203
+ "attribute": "labelPosition",
204
+ "reflects": true
188
205
  },
189
206
  {
190
207
  "kind": "field",
191
208
  "name": "labelFit",
192
- "privacy": "public"
209
+ "privacy": "public",
210
+ "attribute": "labelFit",
211
+ "reflects": true
193
212
  },
194
213
  {
195
214
  "kind": "field",
@@ -276,6 +295,58 @@
276
295
  "name": "change"
277
296
  }
278
297
  ],
298
+ "attributes": [
299
+ {
300
+ "name": "value",
301
+ "fieldName": "value"
302
+ },
303
+ {
304
+ "name": "name",
305
+ "type": {
306
+ "text": "CheckboxProps['name']"
307
+ },
308
+ "fieldName": "name"
309
+ },
310
+ {
311
+ "name": "checked",
312
+ "fieldName": "checked"
313
+ },
314
+ {
315
+ "name": "defaultChecked",
316
+ "fieldName": "defaultChecked"
317
+ },
318
+ {
319
+ "name": "disabled",
320
+ "fieldName": "disabled"
321
+ },
322
+ {
323
+ "name": "required",
324
+ "fieldName": "required"
325
+ },
326
+ {
327
+ "name": "indeterminate",
328
+ "fieldName": "indeterminate"
329
+ },
330
+ {
331
+ "name": "assistiveText",
332
+ "type": {
333
+ "text": "CheckboxProps['assistiveText']"
334
+ },
335
+ "fieldName": "assistiveText"
336
+ },
337
+ {
338
+ "name": "status",
339
+ "fieldName": "status"
340
+ },
341
+ {
342
+ "name": "labelPosition",
343
+ "fieldName": "labelPosition"
344
+ },
345
+ {
346
+ "name": "labelFit",
347
+ "fieldName": "labelFit"
348
+ }
349
+ ],
279
350
  "mixins": [
280
351
  {
281
352
  "name": "DelegatesFocusMixin",
@@ -300,7 +371,7 @@
300
371
  "name": "*",
301
372
  "declaration": {
302
373
  "name": "*",
303
- "package": "./defs"
374
+ "module": "src/defs"
304
375
  }
305
376
  },
306
377
  {
package/dist/index.js CHANGED
@@ -10,7 +10,7 @@ const k = class k extends E {
10
10
  this.getAttribute("v") || this.setAttribute("v", k.v);
11
11
  }
12
12
  };
13
- k.v = "1.1.0";
13
+ k.v = "1.1.1";
14
14
  let p = k;
15
15
  const j = '*,*:after,*:before{box-sizing:inherit}:host{display:block}@keyframes checkboxCheck{0%{width:0;height:0;border-color:#fff;transform:translateZ(0) rotate(45deg)}33%{width:8px;height:0;transform:translateZ(0) rotate(45deg)}to{width:8px;height:16px;border-color:#fff;border-bottom-right-radius:2px;transform:translate3d(0,-16px,1px) rotate(45deg)}}@keyframes scaleDown{0%{transform:scale(1)}to{transform:scale(0)}}@keyframes scaleUp{0%{transform:scale(0)}33%{transform:scale(.5)}to{transform:scale(1)}}.c-checkbox-tick{content:"";display:flex;flex:0 0 auto;width:var(--checkbox-width);height:var(--checkbox-height);margin:var(--checkbox-margin);border:1px solid var(--checkbox-border-color);border-radius:var(--checkbox-radius);background-color:var(--checkbox-bg-color)}@media (prefers-reduced-motion: no-preference){.c-checkbox-tick{transition:background-color var(--dt-motion-timing-100) var(--checkbox-motion-easing),border-color var(--dt-motion-timing-100) var(--checkbox-motion-easing)}}@media (prefers-reduced-motion: no-preference){.c-checkbox-tick.is-animated{animation:scaleDown var(--dt-motion-timing-100) var(--checkbox-motion-easing)}}.c-checkbox-tick.is-disabled{--checkbox-bg-color: var(--dt-color-container-strong);--checkbox-border-color: var(--dt-color-disabled-01)}.c-checkbox-tick.c-checkbox-tick--status-error{--checkbox-border-color: var(--dt-color-support-error)}@media (prefers-reduced-motion: no-preference){.c-checkbox-tick.is-animated.is-checked{animation:scaleUp var(--dt-motion-timing-100) var(--checkbox-motion-easing)}}.c-checkbox-tick.is-checked:not(.is-disabled){--checkbox-bg-color: var(--dt-color-interactive-brand);--checkbox-border-color: var(--checkbox-bg-color)}.c-checkbox-tick.is-checked.c-checkbox-tick--status-error{--checkbox-bg-color: var(--dt-color-support-error);--checkbox-border-color: var(--checkbox-bg-color)}.c-checkbox-tick.is-checked:before{content:"";position:relative;top:55%;left:14%;border-right:2px solid transparent;border-bottom:2px solid transparent;transform:rotate(45deg);transform-origin:0% 100%}@media (prefers-reduced-motion: reduce){.c-checkbox-tick.is-checked:before{animation-duration:1ms!important;animation-delay:0!important;animation-iteration-count:1!important;width:8px;height:16px;border-color:#fff;border-bottom-right-radius:2px;transform:translate3d(0,-16px,0) rotate(45deg)}}@media only percy{.c-checkbox-tick.is-checked:before{animation:none;width:8px;height:16px;border-color:#fff;border-bottom-right-radius:2px;transform:translate3d(0,-16px,0) rotate(45deg)}}.c-checkbox-tick.is-checked.is-animated:before{animation:checkboxCheck var(--dt-motion-timing-150) var(--checkbox-motion-easing) forwards}.c-checkbox-tick.is-checked:not(.is-animated):before{width:8px;height:16px;border-color:#fff;border-bottom-right-radius:2px;transform:translate3d(0,-16px,0) rotate(45deg)}.c-checkbox-tick.is-checked:dir(rtl):before{left:unset;right:50%}.c-checkbox-tick.is-indeterminate:not(.is-disabled){--checkbox-bg-color: var(--dt-color-interactive-brand);--checkbox-border-color: var(--checkbox-bg-color)}.c-checkbox-tick.is-indeterminate.c-checkbox-tick--status-error{--checkbox-bg-color: var(--dt-color-support-error);--checkbox-border-color: var(--checkbox-bg-color)}.c-checkbox-tick.is-indeterminate:after{width:16px}@media (prefers-reduced-motion: no-preference){.c-checkbox-tick.is-indeterminate:after{transition:width var(--dt-motion-timing-100) var(--checkbox-motion-easing) var(--dt-motion-timing-100)}}.c-checkbox-text{display:inline;flex:1 1 auto;align-self:center;min-width:0;margin-inline-start:var(--checkbox-gap);white-space:normal;color:var(--checkbox-content-color);font-family:var(--checkbox-font-family);font-size:var(--checkbox-font-size);line-height:var(--checkbox-line-height);font-weight:var(--checkbox-font-weight)}.c-checkbox-tick:after{content:"";position:relative;top:47%;left:14%;width:0;height:2px;background-color:#fff}.c-checkbox-tick:dir(rtl):after{left:unset;right:14%}.c-checkbox{--checkbox-height: 24px;--checkbox-width: 24px;--checkbox-radius: var(--dt-radius-rounded-a);--checkbox-margin: 1px;--checkbox-gap: var(--dt-spacing-b);--checkbox-font-family: var(--dt-font-body-l-family);--checkbox-font-size: calc(var(--dt-font-body-l-size) * 1px);--checkbox-line-height: calc(var(--dt-font-body-l-line-height) * 1px);--checkbox-font-weight: var(--dt-font-body-l-weight);--checkbox-bg-color: var(--dt-color-container-default);--checkbox-border-color: var(--dt-color-border-form);--checkbox-content-color: var(--dt-color-content-default-solid);--checkbox-motion-easing: var(--dt-motion-easing-persistent-functional);display:flex;flex-direction:column;align-items:flex-start}.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.c-checkbox--leading label{flex-direction:row-reverse}.c-checkbox.c-checkbox--leading .c-checkbox-text{margin-inline-start:0;margin-inline-end:var(--checkbox-gap)}.c-checkbox.c-checkbox--fill{align-items:stretch}.c-checkbox.c-checkbox--fill label{justify-content:space-between}.c-checkbox.c-checkbox--fill .c-checkbox-text{flex:0 1 auto}.c-checkbox:hover .c-checkbox-tick{--checkbox-bg-color: hsl( var(--dt-color-container-default-h), var(--dt-color-container-default-s), calc(var(--dt-color-container-default-l) - var(--dt-color-hover-01)) );transition:background-color var(--dt-motion-timing-200) var(--checkbox-motion-easing),border-color var(--dt-motion-timing-200) var(--checkbox-motion-easing)}@supports (background-color: color-mix(in srgb,black,white)){.c-checkbox:hover .c-checkbox-tick{--checkbox-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-container-default))}}.c-checkbox:active .c-checkbox-tick{--checkbox-bg-color: hsl( var(--dt-color-container-default-h), var(--dt-color-container-default-s), calc(var(--dt-color-container-default-l) - var(--dt-color-active-01)) );transition:background-color var(--dt-motion-timing-100) var(--checkbox-motion-easing),border-color var(--dt-motion-timing-100) var(--checkbox-motion-easing)}@supports (background-color: color-mix(in srgb,black,white)){.c-checkbox:active .c-checkbox-tick{--checkbox-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-container-default))}}.c-checkbox.is-disabled label{cursor:not-allowed}.c-checkbox input:focus-visible+label .c-checkbox-tick{box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer);outline:none}.c-checkbox.is-disabled:hover .c-checkbox-tick,.c-checkbox.is-disabled:active .c-checkbox-tick{--checkbox-bg-color: var(--dt-color-container-strong);--checkbox-border-color: var(--dt-color-disabled-01)}.c-checkbox.c-checkbox--status-error:hover .c-checkbox-tick{--checkbox-bg-color: hsl( var(--dt-color-container-default-h), var(--dt-color-container-default-s), calc(var(--dt-color-container-default-l) - var(--dt-color-hover-01)) )}@supports (background-color: color-mix(in srgb,black,white)){.c-checkbox.c-checkbox--status-error:hover .c-checkbox-tick{--checkbox-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-container-default))}}.c-checkbox.c-checkbox--status-error:active .c-checkbox-tick{--checkbox-bg-color: hsl( var(--dt-color-container-default-h), var(--dt-color-container-default-s), calc(var(--dt-color-container-default-l) - var(--dt-color-active-01)) )}@supports (background-color: color-mix(in srgb,black,white)){.c-checkbox.c-checkbox--status-error:active{--checkbox-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-container-default))}}.c-checkbox.is-checked:not(.is-disabled):hover .c-checkbox-tick,.c-checkbox.is-indeterminate:not(.is-disabled):hover .c-checkbox-tick{--checkbox-bg-color: hsl( var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) - var(--dt-color-hover-01)) );--checkbox-border-color: var(--checkbox-bg-color)}@supports (background-color: color-mix(in srgb,black,white)){.c-checkbox.is-checked:not(.is-disabled):hover .c-checkbox-tick,.c-checkbox.is-indeterminate:not(.is-disabled):hover .c-checkbox-tick{--checkbox-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-interactive-brand));--checkbox-border-color: var(--checkbox-bg-color)}}.c-checkbox.is-checked.c-checkbox--status-error:hover .c-checkbox-tick,.c-checkbox.is-indeterminate.c-checkbox--status-error:hover .c-checkbox-tick{--checkbox-bg-color: hsl( var(--dt-color-support-error-h), var(--dt-color-support-error-s), calc(var(--dt-color-support-error-l) - var(--dt-color-hover-01)) );--checkbox-border-color: var(--checkbox-bg-color)}@supports (background-color: color-mix(in srgb,black,white)){.c-checkbox.is-checked.c-checkbox--status-error:hover .c-checkbox-tick,.c-checkbox.is-indeterminate.c-checkbox--status-error:hover .c-checkbox-tick{--checkbox-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-support-error));--checkbox-border-color: var(--checkbox-bg-color)}}.c-checkbox.is-checked:not(.is-disabled):active .c-checkbox-tick,.c-checkbox.is-indeterminate:not(.is-disabled):active .c-checkbox-tick{--checkbox-bg-color: hsl( var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) - var(--dt-color-active-01)) );--checkbox-border-color: var(--checkbox-bg-color)}@supports (background-color: color-mix(in srgb,black,white)){.c-checkbox.is-checked:not(.is-disabled):active .c-checkbox-tick,.c-checkbox.is-indeterminate:not(.is-disabled):active .c-checkbox-tick{--checkbox-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-interactive-brand));--checkbox-border-color: var(--checkbox-bg-color)}}.c-checkbox.is-checked.c-checkbox--status-error:active .c-checkbox-tick,.c-checkbox.is-indeterminate.c-checkbox--status-error:active .c-checkbox-tick{--checkbox-bg-color: hsl( var(--dt-color-support-error-h), var(--dt-color-support-error-s), calc(var(--dt-color-support-error-l) - var(--dt-color-active-01)) );--checkbox-border-color: var(--checkbox-bg-color)}@supports (background-color: color-mix(in srgb,black,white)){.c-checkbox.is-checked.c-checkbox--status-error:active .c-checkbox-tick,.c-checkbox.is-indeterminate.c-checkbox--status-error:active .c-checkbox-tick{--checkbox-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-support-error));--checkbox-border-color: var(--checkbox-bg-color)}}', I = ["default", "success", "error"], L = ["leading", "trailing"], M = ["hug", "fill"], r = {
16
16
  // a default value for the html <input type="checkbox" /> value attribute.
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@justeattakeaway/pie-checkbox",
3
3
  "description": "PIE Design System Checkbox built using Web Components",
4
- "version": "1.1.0",
4
+ "version": "1.1.1",
5
5
  "repository": {
6
6
  "type": "git",
7
7
  "url": "https://github.com/justeattakeaway/pie",
@@ -43,12 +43,12 @@
43
43
  "author": "Just Eat Takeaway.com - Design System Team",
44
44
  "license": "Apache-2.0",
45
45
  "devDependencies": {
46
- "@justeattakeaway/pie-components-config": "0.21.1",
46
+ "@justeattakeaway/pie-components-config": "0.21.2",
47
47
  "@justeattakeaway/pie-css": "1.1.1",
48
48
  "@justeattakeaway/pie-monorepo-utils": "0.9.1"
49
49
  },
50
50
  "dependencies": {
51
- "@justeattakeaway/pie-assistive-text": "0.11.29",
51
+ "@justeattakeaway/pie-assistive-text": "0.11.30",
52
52
  "@justeattakeaway/pie-webc-core": "14.0.1"
53
53
  },
54
54
  "volta": {