@vaadin/checkbox-group 25.3.0-dev.3a3c2d7d2a → 25.3.0-rc1

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 (6) hide show
  1. package/custom-elements.json +95 -36
  2. package/package.json +11 -11
  3. package/src/vaadin-checkbox-group-mixin.js +2 -1
  4. package/src/vaadin-checkbox-group.js +1 -0
  5. package/web-types.json +24 -8
  6. package/web-types.lit.json +10 -3
package/custom-elements.json CHANGED
@@ -26,6 +26,20 @@
26
26
  "description": "A mixin providing common checkbox-group functionality.",
27
27
  "name": "CheckboxGroupMixin",
28
28
  "members": [
29
+ {
30
+ "kind": "field",
31
+ "name": "accessibleDescriptionRef",
32
+ "privacy": "public",
33
+ "type": {
34
+ "text": "string"
35
+ },
36
+ "description": "A space-separated list of IDs referencing the elements that\ndescribe the component for screen reader users. The referenced\nelements are announced in addition to the helper text and\nthe error message.",
37
+ "attribute": "accessible-description-ref",
38
+ "inheritedFrom": {
39
+ "name": "FieldMixin",
40
+ "package": "@vaadin/field-base/src/field-mixin.js"
41
+ }
42
+ },
29
43
  {
30
44
  "kind": "field",
31
45
  "name": "accessibleName",
@@ -33,7 +47,7 @@
33
47
  "type": {
34
48
  "text": "string"
35
49
  },
36
- "description": "String used to label the component to screen reader users.",
50
+ "description": "String used to label the component for screen reader users.",
37
51
  "attribute": "accessible-name",
38
52
  "inheritedFrom": {
39
53
  "name": "FieldMixin",
@@ -47,7 +61,7 @@
47
61
  "type": {
48
62
  "text": "string"
49
63
  },
50
- "description": "Id of the element used as label of the component to screen reader users.",
64
+ "description": "A space-separated list of IDs referencing the elements that\nlabel the component for screen reader users.",
51
65
  "attribute": "accessible-name-ref",
52
66
  "inheritedFrom": {
53
67
  "name": "FieldMixin",
@@ -202,12 +216,24 @@
202
216
  }
203
217
  ],
204
218
  "attributes": [
219
+ {
220
+ "name": "accessible-description-ref",
221
+ "type": {
222
+ "text": "string"
223
+ },
224
+ "description": "A space-separated list of IDs referencing the elements that\ndescribe the component for screen reader users. The referenced\nelements are announced in addition to the helper text and\nthe error message.",
225
+ "fieldName": "accessibleDescriptionRef",
226
+ "inheritedFrom": {
227
+ "name": "FieldMixin",
228
+ "package": "@vaadin/field-base/src/field-mixin.js"
229
+ }
230
+ },
205
231
  {
206
232
  "name": "accessible-name",
207
233
  "type": {
208
234
  "text": "string"
209
235
  },
210
- "description": "String used to label the component to screen reader users.",
236
+ "description": "String used to label the component for screen reader users.",
211
237
  "fieldName": "accessibleName",
212
238
  "inheritedFrom": {
213
239
  "name": "FieldMixin",
@@ -219,7 +245,7 @@
219
245
  "type": {
220
246
  "text": "string"
221
247
  },
222
- "description": "Id of the element used as label of the component to screen reader users.",
248
+ "description": "A space-separated list of IDs referencing the elements that\nlabel the component for screen reader users.",
223
249
  "fieldName": "accessibleNameRef",
224
250
  "inheritedFrom": {
225
251
  "name": "FieldMixin",
@@ -380,6 +406,20 @@
380
406
  "description": "`<vaadin-checkbox-group>` is a web component that allows the user to choose several items from a group of binary choices.\n\n```html\n<vaadin-checkbox-group label=\"Export data\">\n <vaadin-checkbox value=\"0\" label=\"Order ID\"></vaadin-checkbox>\n <vaadin-checkbox value=\"1\" label=\"Product name\"></vaadin-checkbox>\n <vaadin-checkbox value=\"2\" label=\"Customer\"></vaadin-checkbox>\n <vaadin-checkbox value=\"3\" label=\"Status\"></vaadin-checkbox>\n</vaadin-checkbox-group>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n---------------------|----------------\n`label` | The slotted label element wrapper\n`group-field` | The checkbox elements wrapper\n`helper-text` | The slotted helper text element wrapper\n`error-message` | The slotted error message element wrapper\n`required-indicator` | The `required` state indicator element\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n--------------------|---------------------------------\n`disabled` | Set when the element is disabled\n`readonly` | Set when the element is readonly\n`invalid` | Set when the element is invalid\n`focused` | Set when the element is focused\n`has-label` | Set when the element has a label\n`has-value` | Set when the element has a value\n`has-helper` | Set when the element has helper text\n`has-error-message` | Set when the element has an error message\n`has-tooltip` | Set when the element has a slotted tooltip\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:--------------------------------------------------|\n| `--vaadin-input-field-error-color` |\n| `--vaadin-input-field-error-font-size` |\n| `--vaadin-input-field-error-font-weight` |\n| `--vaadin-input-field-error-line-height` |\n| `--vaadin-input-field-label-color` |\n| `--vaadin-input-field-label-font-size` |\n| `--vaadin-input-field-label-font-weight` |\n| `--vaadin-input-field-label-line-height` |\n| `--vaadin-input-field-helper-color` |\n| `--vaadin-input-field-helper-font-size` |\n| `--vaadin-input-field-helper-font-weight` |\n| `--vaadin-input-field-helper-line-height` |\n| `--vaadin-input-field-required-indicator-color` |\n| `--vaadin-input-field-required-indicator` |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
381
407
  "name": "CheckboxGroup",
382
408
  "members": [
409
+ {
410
+ "kind": "field",
411
+ "name": "accessibleDescriptionRef",
412
+ "privacy": "public",
413
+ "type": {
414
+ "text": "string"
415
+ },
416
+ "description": "A space-separated list of IDs referencing the elements that\ndescribe the component for screen reader users. The referenced\nelements are announced in addition to the helper text and\nthe error message.",
417
+ "attribute": "accessible-description-ref",
418
+ "inheritedFrom": {
419
+ "name": "FieldMixin",
420
+ "package": "@vaadin/field-base/src/field-mixin.js"
421
+ }
422
+ },
383
423
  {
384
424
  "kind": "field",
385
425
  "name": "accessibleName",
@@ -387,7 +427,7 @@
387
427
  "type": {
388
428
  "text": "string"
389
429
  },
390
- "description": "String used to label the component to screen reader users.",
430
+ "description": "String used to label the component for screen reader users.",
391
431
  "attribute": "accessible-name",
392
432
  "inheritedFrom": {
393
433
  "name": "FieldMixin",
@@ -401,7 +441,7 @@
401
441
  "type": {
402
442
  "text": "string"
403
443
  },
404
- "description": "Id of the element used as label of the component to screen reader users.",
444
+ "description": "A space-separated list of IDs referencing the elements that\nlabel the component for screen reader users.",
405
445
  "attribute": "accessible-name-ref",
406
446
  "inheritedFrom": {
407
447
  "name": "FieldMixin",
@@ -586,41 +626,25 @@
586
626
  "name": "value-changed"
587
627
  }
588
628
  ],
589
- "mixins": [
590
- {
591
- "name": "CheckboxGroupMixin",
592
- "module": "src/vaadin-checkbox-group-mixin.js"
593
- },
594
- {
595
- "name": "ElementMixin",
596
- "package": "@vaadin/component-base/src/element-mixin.js"
597
- },
598
- {
599
- "name": "ThemableMixin",
600
- "package": "@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js"
601
- },
629
+ "attributes": [
602
630
  {
603
- "name": "PolylitMixin",
604
- "package": "@vaadin/component-base/src/polylit-mixin.js"
631
+ "name": "accessible-description-ref",
632
+ "type": {
633
+ "text": "string"
634
+ },
635
+ "description": "A space-separated list of IDs referencing the elements that\ndescribe the component for screen reader users. The referenced\nelements are announced in addition to the helper text and\nthe error message.",
636
+ "fieldName": "accessibleDescriptionRef",
637
+ "inheritedFrom": {
638
+ "name": "FieldMixin",
639
+ "package": "@vaadin/field-base/src/field-mixin.js"
640
+ }
605
641
  },
606
- {
607
- "name": "LumoInjectionMixin",
608
- "package": "@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js"
609
- }
610
- ],
611
- "superclass": {
612
- "name": "LitElement",
613
- "package": "lit"
614
- },
615
- "tagName": "vaadin-checkbox-group",
616
- "customElement": true,
617
- "attributes": [
618
642
  {
619
643
  "name": "accessible-name",
620
644
  "type": {
621
645
  "text": "string"
622
646
  },
623
- "description": "String used to label the component to screen reader users.",
647
+ "description": "String used to label the component for screen reader users.",
624
648
  "fieldName": "accessibleName",
625
649
  "inheritedFrom": {
626
650
  "name": "FieldMixin",
@@ -632,7 +656,7 @@
632
656
  "type": {
633
657
  "text": "string"
634
658
  },
635
- "description": "Id of the element used as label of the component to screen reader users.",
659
+ "description": "A space-separated list of IDs referencing the elements that\nlabel the component for screen reader users.",
636
660
  "fieldName": "accessibleNameRef",
637
661
  "inheritedFrom": {
638
662
  "name": "FieldMixin",
@@ -735,6 +759,13 @@
735
759
  "package": "@vaadin/field-base/src/validate-mixin.js"
736
760
  }
737
761
  },
762
+ {
763
+ "type": {
764
+ "text": "string"
765
+ },
766
+ "description": "The theme variants to apply to the component.",
767
+ "name": "theme"
768
+ },
738
769
  {
739
770
  "name": "value",
740
771
  "type": {
@@ -747,7 +778,35 @@
747
778
  "module": "src/vaadin-checkbox-group-mixin.js"
748
779
  }
749
780
  }
750
- ]
781
+ ],
782
+ "mixins": [
783
+ {
784
+ "name": "CheckboxGroupMixin",
785
+ "module": "src/vaadin-checkbox-group-mixin.js"
786
+ },
787
+ {
788
+ "name": "ElementMixin",
789
+ "package": "@vaadin/component-base/src/element-mixin.js"
790
+ },
791
+ {
792
+ "name": "ThemableMixin",
793
+ "package": "@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js"
794
+ },
795
+ {
796
+ "name": "PolylitMixin",
797
+ "package": "@vaadin/component-base/src/polylit-mixin.js"
798
+ },
799
+ {
800
+ "name": "LumoInjectionMixin",
801
+ "package": "@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js"
802
+ }
803
+ ],
804
+ "superclass": {
805
+ "name": "LitElement",
806
+ "package": "lit"
807
+ },
808
+ "tagName": "vaadin-checkbox-group",
809
+ "customElement": true
751
810
  }
752
811
  ],
753
812
  "exports": [
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vaadin/checkbox-group",
3
- "version": "25.3.0-dev.3a3c2d7d2a",
3
+ "version": "25.3.0-rc1",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -35,19 +35,19 @@
35
35
  ],
36
36
  "dependencies": {
37
37
  "@open-wc/dedupe-mixin": "^1.3.0",
38
- "@vaadin/a11y-base": "25.3.0-dev.3a3c2d7d2a",
39
- "@vaadin/checkbox": "25.3.0-dev.3a3c2d7d2a",
40
- "@vaadin/component-base": "25.3.0-dev.3a3c2d7d2a",
41
- "@vaadin/field-base": "25.3.0-dev.3a3c2d7d2a",
42
- "@vaadin/vaadin-themable-mixin": "25.3.0-dev.3a3c2d7d2a",
38
+ "@vaadin/a11y-base": "25.3.0-rc1",
39
+ "@vaadin/checkbox": "25.3.0-rc1",
40
+ "@vaadin/component-base": "25.3.0-rc1",
41
+ "@vaadin/field-base": "25.3.0-rc1",
42
+ "@vaadin/vaadin-themable-mixin": "25.3.0-rc1",
43
43
  "lit": "^3.0.0"
44
44
  },
45
45
  "devDependencies": {
46
- "@vaadin/aura": "25.3.0-dev.3a3c2d7d2a",
47
- "@vaadin/chai-plugins": "25.3.0-dev.3a3c2d7d2a",
48
- "@vaadin/test-runner-commands": "25.3.0-dev.3a3c2d7d2a",
46
+ "@vaadin/aura": "25.3.0-rc1",
47
+ "@vaadin/chai-plugins": "25.3.0-rc1",
48
+ "@vaadin/test-runner-commands": "25.3.0-rc1",
49
49
  "@vaadin/testing-helpers": "^2.0.0",
50
- "@vaadin/vaadin-lumo-styles": "25.3.0-dev.3a3c2d7d2a",
50
+ "@vaadin/vaadin-lumo-styles": "25.3.0-rc1",
51
51
  "sinon": "^22.0.0"
52
52
  },
53
53
  "customElements": "custom-elements.json",
@@ -55,5 +55,5 @@
55
55
  "web-types.json",
56
56
  "web-types.lit.json"
57
57
  ],
58
- "gitHead": "ac506ca7800c23e05da55863c56bcedf12812d37"
58
+ "gitHead": "d4809590b2f61bd607e376ab3dec84f4bfb059a7"
59
59
  }
package/src/vaadin-checkbox-group-mixin.js CHANGED
@@ -5,6 +5,7 @@
5
5
  */
6
6
  import { DisabledMixin } from '@vaadin/a11y-base/src/disabled-mixin.js';
7
7
  import { FocusMixin } from '@vaadin/a11y-base/src/focus-mixin.js';
8
+ import { Checkbox } from '@vaadin/checkbox/src/vaadin-checkbox.js';
8
9
  import { SlotObserver } from '@vaadin/component-base/src/slot-observer.js';
9
10
  import { TooltipController } from '@vaadin/component-base/src/tooltip-controller.js';
10
11
  import { FieldMixin } from '@vaadin/field-base/src/field-mixin.js';
@@ -119,7 +120,7 @@ export const CheckboxGroupMixin = (superclass) =>
119
120
  * @private
120
121
  */
121
122
  __filterCheckboxes(nodes) {
122
- return nodes.filter((node) => node.nodeType === Node.ELEMENT_NODE && node.localName === 'vaadin-checkbox');
123
+ return nodes.filter((node) => node instanceof Checkbox);
123
124
  }
124
125
 
125
126
  /**
package/src/vaadin-checkbox-group.js CHANGED
@@ -76,6 +76,7 @@ import { CheckboxGroupMixin } from './vaadin-checkbox-group-mixin.js';
76
76
  * @fires {CustomEvent} value-changed - Fired when the `value` property changes.
77
77
  * @fires {CustomEvent} validated - Fired whenever the field is validated.
78
78
  *
79
+ * @attr {string} theme - The theme variants to apply to the component.
79
80
  * @customElement vaadin-checkbox-group
80
81
  * @extends HTMLElement
81
82
  */
package/web-types.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "$schema": "https://json.schemastore.org/web-types",
3
3
  "name": "@vaadin/checkbox-group",
4
- "version": "25.3.0-dev.3a3c2d7d2a",
4
+ "version": "25.3.0-rc1",
5
5
  "description-markup": "markdown",
6
6
  "contributions": {
7
7
  "html": {
@@ -10,9 +10,18 @@
10
10
  "name": "vaadin-checkbox-group",
11
11
  "description": "`<vaadin-checkbox-group>` is a web component that allows the user to choose several items from a group of binary choices.\n\n```html\n<vaadin-checkbox-group label=\"Export data\">\n <vaadin-checkbox value=\"0\" label=\"Order ID\"></vaadin-checkbox>\n <vaadin-checkbox value=\"1\" label=\"Product name\"></vaadin-checkbox>\n <vaadin-checkbox value=\"2\" label=\"Customer\"></vaadin-checkbox>\n <vaadin-checkbox value=\"3\" label=\"Status\"></vaadin-checkbox>\n</vaadin-checkbox-group>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n---------------------|----------------\n`label` | The slotted label element wrapper\n`group-field` | The checkbox elements wrapper\n`helper-text` | The slotted helper text element wrapper\n`error-message` | The slotted error message element wrapper\n`required-indicator` | The `required` state indicator element\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n--------------------|---------------------------------\n`disabled` | Set when the element is disabled\n`readonly` | Set when the element is readonly\n`invalid` | Set when the element is invalid\n`focused` | Set when the element is focused\n`has-label` | Set when the element has a label\n`has-value` | Set when the element has a value\n`has-helper` | Set when the element has helper text\n`has-error-message` | Set when the element has an error message\n`has-tooltip` | Set when the element has a slotted tooltip\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:--------------------------------------------------|\n| `--vaadin-input-field-error-color` |\n| `--vaadin-input-field-error-font-size` |\n| `--vaadin-input-field-error-font-weight` |\n| `--vaadin-input-field-error-line-height` |\n| `--vaadin-input-field-label-color` |\n| `--vaadin-input-field-label-font-size` |\n| `--vaadin-input-field-label-font-weight` |\n| `--vaadin-input-field-label-line-height` |\n| `--vaadin-input-field-helper-color` |\n| `--vaadin-input-field-helper-font-size` |\n| `--vaadin-input-field-helper-font-weight` |\n| `--vaadin-input-field-helper-line-height` |\n| `--vaadin-input-field-required-indicator-color` |\n| `--vaadin-input-field-required-indicator` |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
12
12
  "attributes": [
13
+ {
14
+ "name": "accessible-description-ref",
15
+ "description": "A space-separated list of IDs referencing the elements that\ndescribe the component for screen reader users. The referenced\nelements are announced in addition to the helper text and\nthe error message.",
16
+ "value": {
17
+ "type": [
18
+ "string"
19
+ ]
20
+ }
21
+ },
13
22
  {
14
23
  "name": "accessible-name",
15
- "description": "String used to label the component to screen reader users.",
24
+ "description": "String used to label the component for screen reader users.",
16
25
  "value": {
17
26
  "type": [
18
27
  "string"
@@ -21,7 +30,7 @@
21
30
  },
22
31
  {
23
32
  "name": "accessible-name-ref",
24
- "description": "Id of the element used as label of the component to screen reader users.",
33
+ "description": "A space-separated list of IDs referencing the elements that\nlabel the component for screen reader users.",
25
34
  "value": {
26
35
  "type": [
27
36
  "string"
@@ -105,18 +114,25 @@
105
114
  "description": "The theme variants to apply to the component.",
106
115
  "value": {
107
116
  "type": [
108
- "string",
109
- "null",
110
- "undefined"
117
+ "string"
111
118
  ]
112
119
  }
113
120
  }
114
121
  ],
115
122
  "js": {
116
123
  "properties": [
124
+ {
125
+ "name": "accessibleDescriptionRef",
126
+ "description": "A space-separated list of IDs referencing the elements that\ndescribe the component for screen reader users. The referenced\nelements are announced in addition to the helper text and\nthe error message.",
127
+ "value": {
128
+ "type": [
129
+ "string"
130
+ ]
131
+ }
132
+ },
117
133
  {
118
134
  "name": "accessibleName",
119
- "description": "String used to label the component to screen reader users.",
135
+ "description": "String used to label the component for screen reader users.",
120
136
  "value": {
121
137
  "type": [
122
138
  "string"
@@ -125,7 +141,7 @@
125
141
  },
126
142
  {
127
143
  "name": "accessibleNameRef",
128
- "description": "Id of the element used as label of the component to screen reader users.",
144
+ "description": "A space-separated list of IDs referencing the elements that\nlabel the component for screen reader users.",
129
145
  "value": {
130
146
  "type": [
131
147
  "string"
package/web-types.lit.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "$schema": "https://json.schemastore.org/web-types",
3
3
  "name": "@vaadin/checkbox-group",
4
- "version": "25.3.0-dev.3a3c2d7d2a",
4
+ "version": "25.3.0-rc1",
5
5
  "description-markup": "markdown",
6
6
  "framework": "lit",
7
7
  "framework-config": {
@@ -19,16 +19,23 @@
19
19
  "description": "`<vaadin-checkbox-group>` is a web component that allows the user to choose several items from a group of binary choices.\n\n```html\n<vaadin-checkbox-group label=\"Export data\">\n <vaadin-checkbox value=\"0\" label=\"Order ID\"></vaadin-checkbox>\n <vaadin-checkbox value=\"1\" label=\"Product name\"></vaadin-checkbox>\n <vaadin-checkbox value=\"2\" label=\"Customer\"></vaadin-checkbox>\n <vaadin-checkbox value=\"3\" label=\"Status\"></vaadin-checkbox>\n</vaadin-checkbox-group>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n---------------------|----------------\n`label` | The slotted label element wrapper\n`group-field` | The checkbox elements wrapper\n`helper-text` | The slotted helper text element wrapper\n`error-message` | The slotted error message element wrapper\n`required-indicator` | The `required` state indicator element\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n--------------------|---------------------------------\n`disabled` | Set when the element is disabled\n`readonly` | Set when the element is readonly\n`invalid` | Set when the element is invalid\n`focused` | Set when the element is focused\n`has-label` | Set when the element has a label\n`has-value` | Set when the element has a value\n`has-helper` | Set when the element has helper text\n`has-error-message` | Set when the element has an error message\n`has-tooltip` | Set when the element has a slotted tooltip\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:--------------------------------------------------|\n| `--vaadin-input-field-error-color` |\n| `--vaadin-input-field-error-font-size` |\n| `--vaadin-input-field-error-font-weight` |\n| `--vaadin-input-field-error-line-height` |\n| `--vaadin-input-field-label-color` |\n| `--vaadin-input-field-label-font-size` |\n| `--vaadin-input-field-label-font-weight` |\n| `--vaadin-input-field-label-line-height` |\n| `--vaadin-input-field-helper-color` |\n| `--vaadin-input-field-helper-font-size` |\n| `--vaadin-input-field-helper-font-weight` |\n| `--vaadin-input-field-helper-line-height` |\n| `--vaadin-input-field-required-indicator-color` |\n| `--vaadin-input-field-required-indicator` |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
20
20
  "extension": true,
21
21
  "attributes": [
22
+ {
23
+ "name": ".accessibleDescriptionRef",
24
+ "description": "A space-separated list of IDs referencing the elements that\ndescribe the component for screen reader users. The referenced\nelements are announced in addition to the helper text and\nthe error message.",
25
+ "value": {
26
+ "kind": "expression"
27
+ }
28
+ },
22
29
  {
23
30
  "name": ".accessibleName",
24
- "description": "String used to label the component to screen reader users.",
31
+ "description": "String used to label the component for screen reader users.",
25
32
  "value": {
26
33
  "kind": "expression"
27
34
  }
28
35
  },
29
36
  {
30
37
  "name": ".accessibleNameRef",
31
- "description": "Id of the element used as label of the component to screen reader users.",
38
+ "description": "A space-separated list of IDs referencing the elements that\nlabel the component for screen reader users.",
32
39
  "value": {
33
40
  "kind": "expression"
34
41
  }