@vaadin/radio-group 25.3.0-alpha1 → 25.3.0-alpha11
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.
- package/custom-elements.json +133 -90
- package/package.json +10 -10
- package/src/styles/vaadin-radio-group-base-styles.js +1 -0
- package/src/vaadin-radio-button-mixin.js +10 -4
- package/src/vaadin-radio-button.js +1 -0
- package/src/vaadin-radio-group-mixin.js +10 -17
- package/src/vaadin-radio-group.js +1 -0
- package/web-types.json +26 -30
- package/web-types.lit.json +11 -11
package/custom-elements.json
CHANGED
|
@@ -128,8 +128,7 @@
|
|
|
128
128
|
"inheritedFrom": {
|
|
129
129
|
"name": "InputMixin",
|
|
130
130
|
"package": "@vaadin/field-base/src/input-mixin.js"
|
|
131
|
-
}
|
|
132
|
-
"default": "'on'"
|
|
131
|
+
}
|
|
133
132
|
}
|
|
134
133
|
],
|
|
135
134
|
"attributes": [
|
|
@@ -330,28 +329,18 @@
|
|
|
330
329
|
"module": "src/vaadin-radio-button-mixin.js"
|
|
331
330
|
}
|
|
332
331
|
},
|
|
333
|
-
{
|
|
334
|
-
"kind": "field",
|
|
335
|
-
"name": "tabindex",
|
|
336
|
-
"type": {
|
|
337
|
-
"text": "number"
|
|
338
|
-
},
|
|
339
|
-
"default": "0",
|
|
340
|
-
"inheritedFrom": {
|
|
341
|
-
"name": "RadioButtonMixin",
|
|
342
|
-
"module": "src/vaadin-radio-button-mixin.js"
|
|
343
|
-
}
|
|
344
|
-
},
|
|
345
332
|
{
|
|
346
333
|
"kind": "field",
|
|
347
334
|
"name": "value",
|
|
335
|
+
"privacy": "public",
|
|
348
336
|
"type": {
|
|
349
337
|
"text": "string"
|
|
350
338
|
},
|
|
351
|
-
"
|
|
339
|
+
"description": "The value of the field.",
|
|
340
|
+
"attribute": "value",
|
|
352
341
|
"inheritedFrom": {
|
|
353
|
-
"name": "
|
|
354
|
-
"
|
|
342
|
+
"name": "InputMixin",
|
|
343
|
+
"package": "@vaadin/field-base/src/input-mixin.js"
|
|
355
344
|
}
|
|
356
345
|
}
|
|
357
346
|
],
|
|
@@ -364,34 +353,6 @@
|
|
|
364
353
|
"name": "checked-changed"
|
|
365
354
|
}
|
|
366
355
|
],
|
|
367
|
-
"mixins": [
|
|
368
|
-
{
|
|
369
|
-
"name": "RadioButtonMixin",
|
|
370
|
-
"module": "src/vaadin-radio-button-mixin.js"
|
|
371
|
-
},
|
|
372
|
-
{
|
|
373
|
-
"name": "ElementMixin",
|
|
374
|
-
"package": "@vaadin/component-base/src/element-mixin.js"
|
|
375
|
-
},
|
|
376
|
-
{
|
|
377
|
-
"name": "ThemableMixin",
|
|
378
|
-
"package": "@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js"
|
|
379
|
-
},
|
|
380
|
-
{
|
|
381
|
-
"name": "PolylitMixin",
|
|
382
|
-
"package": "@vaadin/component-base/src/polylit-mixin.js"
|
|
383
|
-
},
|
|
384
|
-
{
|
|
385
|
-
"name": "LumoInjectionMixin",
|
|
386
|
-
"package": "@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js"
|
|
387
|
-
}
|
|
388
|
-
],
|
|
389
|
-
"superclass": {
|
|
390
|
-
"name": "LitElement",
|
|
391
|
-
"package": "lit"
|
|
392
|
-
},
|
|
393
|
-
"tagName": "vaadin-radio-button",
|
|
394
|
-
"customElement": true,
|
|
395
356
|
"attributes": [
|
|
396
357
|
{
|
|
397
358
|
"name": "autofocus",
|
|
@@ -454,16 +415,11 @@
|
|
|
454
415
|
}
|
|
455
416
|
},
|
|
456
417
|
{
|
|
457
|
-
"name": "tabindex",
|
|
458
418
|
"type": {
|
|
459
|
-
"text": "
|
|
419
|
+
"text": "string"
|
|
460
420
|
},
|
|
461
|
-
"description": "
|
|
462
|
-
"
|
|
463
|
-
"inheritedFrom": {
|
|
464
|
-
"name": "TabindexMixin",
|
|
465
|
-
"package": "@vaadin/a11y-base/src/tabindex-mixin.js"
|
|
466
|
-
}
|
|
421
|
+
"description": "The theme variants to apply to the component.",
|
|
422
|
+
"name": "theme"
|
|
467
423
|
},
|
|
468
424
|
{
|
|
469
425
|
"name": "value",
|
|
@@ -477,7 +433,35 @@
|
|
|
477
433
|
"package": "@vaadin/field-base/src/input-mixin.js"
|
|
478
434
|
}
|
|
479
435
|
}
|
|
480
|
-
]
|
|
436
|
+
],
|
|
437
|
+
"mixins": [
|
|
438
|
+
{
|
|
439
|
+
"name": "RadioButtonMixin",
|
|
440
|
+
"module": "src/vaadin-radio-button-mixin.js"
|
|
441
|
+
},
|
|
442
|
+
{
|
|
443
|
+
"name": "ElementMixin",
|
|
444
|
+
"package": "@vaadin/component-base/src/element-mixin.js"
|
|
445
|
+
},
|
|
446
|
+
{
|
|
447
|
+
"name": "ThemableMixin",
|
|
448
|
+
"package": "@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js"
|
|
449
|
+
},
|
|
450
|
+
{
|
|
451
|
+
"name": "PolylitMixin",
|
|
452
|
+
"package": "@vaadin/component-base/src/polylit-mixin.js"
|
|
453
|
+
},
|
|
454
|
+
{
|
|
455
|
+
"name": "LumoInjectionMixin",
|
|
456
|
+
"package": "@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js"
|
|
457
|
+
}
|
|
458
|
+
],
|
|
459
|
+
"superclass": {
|
|
460
|
+
"name": "LitElement",
|
|
461
|
+
"package": "lit"
|
|
462
|
+
},
|
|
463
|
+
"tagName": "vaadin-radio-button",
|
|
464
|
+
"customElement": true
|
|
481
465
|
}
|
|
482
466
|
],
|
|
483
467
|
"exports": [
|
|
@@ -500,6 +484,20 @@
|
|
|
500
484
|
"description": "A mixin providing common radio-group functionality.",
|
|
501
485
|
"name": "RadioGroupMixin",
|
|
502
486
|
"members": [
|
|
487
|
+
{
|
|
488
|
+
"kind": "field",
|
|
489
|
+
"name": "accessibleDescriptionRef",
|
|
490
|
+
"privacy": "public",
|
|
491
|
+
"type": {
|
|
492
|
+
"text": "string"
|
|
493
|
+
},
|
|
494
|
+
"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.",
|
|
495
|
+
"attribute": "accessible-description-ref",
|
|
496
|
+
"inheritedFrom": {
|
|
497
|
+
"name": "FieldMixin",
|
|
498
|
+
"package": "@vaadin/field-base/src/field-mixin.js"
|
|
499
|
+
}
|
|
500
|
+
},
|
|
503
501
|
{
|
|
504
502
|
"kind": "field",
|
|
505
503
|
"name": "accessibleName",
|
|
@@ -507,7 +505,7 @@
|
|
|
507
505
|
"type": {
|
|
508
506
|
"text": "string"
|
|
509
507
|
},
|
|
510
|
-
"description": "String used to label the component
|
|
508
|
+
"description": "String used to label the component for screen reader users.",
|
|
511
509
|
"attribute": "accessible-name",
|
|
512
510
|
"inheritedFrom": {
|
|
513
511
|
"name": "FieldMixin",
|
|
@@ -521,7 +519,7 @@
|
|
|
521
519
|
"type": {
|
|
522
520
|
"text": "string"
|
|
523
521
|
},
|
|
524
|
-
"description": "
|
|
522
|
+
"description": "A space-separated list of IDs referencing the elements that\nlabel the component for screen reader users.",
|
|
525
523
|
"attribute": "accessible-name-ref",
|
|
526
524
|
"inheritedFrom": {
|
|
527
525
|
"name": "FieldMixin",
|
|
@@ -686,12 +684,24 @@
|
|
|
686
684
|
}
|
|
687
685
|
],
|
|
688
686
|
"attributes": [
|
|
687
|
+
{
|
|
688
|
+
"name": "accessible-description-ref",
|
|
689
|
+
"type": {
|
|
690
|
+
"text": "string"
|
|
691
|
+
},
|
|
692
|
+
"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.",
|
|
693
|
+
"fieldName": "accessibleDescriptionRef",
|
|
694
|
+
"inheritedFrom": {
|
|
695
|
+
"name": "FieldMixin",
|
|
696
|
+
"package": "@vaadin/field-base/src/field-mixin.js"
|
|
697
|
+
}
|
|
698
|
+
},
|
|
689
699
|
{
|
|
690
700
|
"name": "accessible-name",
|
|
691
701
|
"type": {
|
|
692
702
|
"text": "string"
|
|
693
703
|
},
|
|
694
|
-
"description": "String used to label the component
|
|
704
|
+
"description": "String used to label the component for screen reader users.",
|
|
695
705
|
"fieldName": "accessibleName",
|
|
696
706
|
"inheritedFrom": {
|
|
697
707
|
"name": "FieldMixin",
|
|
@@ -703,7 +713,7 @@
|
|
|
703
713
|
"type": {
|
|
704
714
|
"text": "string"
|
|
705
715
|
},
|
|
706
|
-
"description": "
|
|
716
|
+
"description": "A space-separated list of IDs referencing the elements that\nlabel the component for screen reader users.",
|
|
707
717
|
"fieldName": "accessibleNameRef",
|
|
708
718
|
"inheritedFrom": {
|
|
709
719
|
"name": "FieldMixin",
|
|
@@ -876,6 +886,20 @@
|
|
|
876
886
|
"description": "`<vaadin-radio-group>` is a web component that allows the user to choose one item from a group of choices.\n\n```html\n<vaadin-radio-group label=\"Travel class\">\n <vaadin-radio-button value=\"economy\" label=\"Economy\"></vaadin-radio-button>\n <vaadin-radio-button value=\"business\" label=\"Business\"></vaadin-radio-button>\n <vaadin-radio-button value=\"firstClass\" label=\"First Class\"></vaadin-radio-button>\n</vaadin-radio-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 radio button 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.",
|
|
877
887
|
"name": "RadioGroup",
|
|
878
888
|
"members": [
|
|
889
|
+
{
|
|
890
|
+
"kind": "field",
|
|
891
|
+
"name": "accessibleDescriptionRef",
|
|
892
|
+
"privacy": "public",
|
|
893
|
+
"type": {
|
|
894
|
+
"text": "string"
|
|
895
|
+
},
|
|
896
|
+
"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.",
|
|
897
|
+
"attribute": "accessible-description-ref",
|
|
898
|
+
"inheritedFrom": {
|
|
899
|
+
"name": "FieldMixin",
|
|
900
|
+
"package": "@vaadin/field-base/src/field-mixin.js"
|
|
901
|
+
}
|
|
902
|
+
},
|
|
879
903
|
{
|
|
880
904
|
"kind": "field",
|
|
881
905
|
"name": "accessibleName",
|
|
@@ -883,7 +907,7 @@
|
|
|
883
907
|
"type": {
|
|
884
908
|
"text": "string"
|
|
885
909
|
},
|
|
886
|
-
"description": "String used to label the component
|
|
910
|
+
"description": "String used to label the component for screen reader users.",
|
|
887
911
|
"attribute": "accessible-name",
|
|
888
912
|
"inheritedFrom": {
|
|
889
913
|
"name": "FieldMixin",
|
|
@@ -897,7 +921,7 @@
|
|
|
897
921
|
"type": {
|
|
898
922
|
"text": "string"
|
|
899
923
|
},
|
|
900
|
-
"description": "
|
|
924
|
+
"description": "A space-separated list of IDs referencing the elements that\nlabel the component for screen reader users.",
|
|
901
925
|
"attribute": "accessible-name-ref",
|
|
902
926
|
"inheritedFrom": {
|
|
903
927
|
"name": "FieldMixin",
|
|
@@ -1096,41 +1120,25 @@
|
|
|
1096
1120
|
"name": "value-changed"
|
|
1097
1121
|
}
|
|
1098
1122
|
],
|
|
1099
|
-
"
|
|
1100
|
-
{
|
|
1101
|
-
"name": "RadioGroupMixin",
|
|
1102
|
-
"module": "src/vaadin-radio-group-mixin.js"
|
|
1103
|
-
},
|
|
1104
|
-
{
|
|
1105
|
-
"name": "ElementMixin",
|
|
1106
|
-
"package": "@vaadin/component-base/src/element-mixin.js"
|
|
1107
|
-
},
|
|
1108
|
-
{
|
|
1109
|
-
"name": "ThemableMixin",
|
|
1110
|
-
"package": "@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js"
|
|
1111
|
-
},
|
|
1123
|
+
"attributes": [
|
|
1112
1124
|
{
|
|
1113
|
-
"name": "
|
|
1114
|
-
"
|
|
1125
|
+
"name": "accessible-description-ref",
|
|
1126
|
+
"type": {
|
|
1127
|
+
"text": "string"
|
|
1128
|
+
},
|
|
1129
|
+
"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.",
|
|
1130
|
+
"fieldName": "accessibleDescriptionRef",
|
|
1131
|
+
"inheritedFrom": {
|
|
1132
|
+
"name": "FieldMixin",
|
|
1133
|
+
"package": "@vaadin/field-base/src/field-mixin.js"
|
|
1134
|
+
}
|
|
1115
1135
|
},
|
|
1116
|
-
{
|
|
1117
|
-
"name": "LumoInjectionMixin",
|
|
1118
|
-
"package": "@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js"
|
|
1119
|
-
}
|
|
1120
|
-
],
|
|
1121
|
-
"superclass": {
|
|
1122
|
-
"name": "LitElement",
|
|
1123
|
-
"package": "lit"
|
|
1124
|
-
},
|
|
1125
|
-
"tagName": "vaadin-radio-group",
|
|
1126
|
-
"customElement": true,
|
|
1127
|
-
"attributes": [
|
|
1128
1136
|
{
|
|
1129
1137
|
"name": "accessible-name",
|
|
1130
1138
|
"type": {
|
|
1131
1139
|
"text": "string"
|
|
1132
1140
|
},
|
|
1133
|
-
"description": "String used to label the component
|
|
1141
|
+
"description": "String used to label the component for screen reader users.",
|
|
1134
1142
|
"fieldName": "accessibleName",
|
|
1135
1143
|
"inheritedFrom": {
|
|
1136
1144
|
"name": "FieldMixin",
|
|
@@ -1142,7 +1150,7 @@
|
|
|
1142
1150
|
"type": {
|
|
1143
1151
|
"text": "string"
|
|
1144
1152
|
},
|
|
1145
|
-
"description": "
|
|
1153
|
+
"description": "A space-separated list of IDs referencing the elements that\nlabel the component for screen reader users.",
|
|
1146
1154
|
"fieldName": "accessibleNameRef",
|
|
1147
1155
|
"inheritedFrom": {
|
|
1148
1156
|
"name": "FieldMixin",
|
|
@@ -1257,6 +1265,13 @@
|
|
|
1257
1265
|
"package": "@vaadin/field-base/src/validate-mixin.js"
|
|
1258
1266
|
}
|
|
1259
1267
|
},
|
|
1268
|
+
{
|
|
1269
|
+
"type": {
|
|
1270
|
+
"text": "string"
|
|
1271
|
+
},
|
|
1272
|
+
"description": "The theme variants to apply to the component.",
|
|
1273
|
+
"name": "theme"
|
|
1274
|
+
},
|
|
1260
1275
|
{
|
|
1261
1276
|
"name": "value",
|
|
1262
1277
|
"type": {
|
|
@@ -1269,7 +1284,35 @@
|
|
|
1269
1284
|
"module": "src/vaadin-radio-group-mixin.js"
|
|
1270
1285
|
}
|
|
1271
1286
|
}
|
|
1272
|
-
]
|
|
1287
|
+
],
|
|
1288
|
+
"mixins": [
|
|
1289
|
+
{
|
|
1290
|
+
"name": "RadioGroupMixin",
|
|
1291
|
+
"module": "src/vaadin-radio-group-mixin.js"
|
|
1292
|
+
},
|
|
1293
|
+
{
|
|
1294
|
+
"name": "ElementMixin",
|
|
1295
|
+
"package": "@vaadin/component-base/src/element-mixin.js"
|
|
1296
|
+
},
|
|
1297
|
+
{
|
|
1298
|
+
"name": "ThemableMixin",
|
|
1299
|
+
"package": "@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js"
|
|
1300
|
+
},
|
|
1301
|
+
{
|
|
1302
|
+
"name": "PolylitMixin",
|
|
1303
|
+
"package": "@vaadin/component-base/src/polylit-mixin.js"
|
|
1304
|
+
},
|
|
1305
|
+
{
|
|
1306
|
+
"name": "LumoInjectionMixin",
|
|
1307
|
+
"package": "@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js"
|
|
1308
|
+
}
|
|
1309
|
+
],
|
|
1310
|
+
"superclass": {
|
|
1311
|
+
"name": "LitElement",
|
|
1312
|
+
"package": "lit"
|
|
1313
|
+
},
|
|
1314
|
+
"tagName": "vaadin-radio-group",
|
|
1315
|
+
"customElement": true
|
|
1273
1316
|
}
|
|
1274
1317
|
],
|
|
1275
1318
|
"exports": [
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/radio-group",
|
|
3
|
-
"version": "25.3.0-
|
|
3
|
+
"version": "25.3.0-alpha11",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -37,18 +37,18 @@
|
|
|
37
37
|
],
|
|
38
38
|
"dependencies": {
|
|
39
39
|
"@open-wc/dedupe-mixin": "^1.3.0",
|
|
40
|
-
"@vaadin/a11y-base": "25.3.0-
|
|
41
|
-
"@vaadin/component-base": "25.3.0-
|
|
42
|
-
"@vaadin/field-base": "25.3.0-
|
|
43
|
-
"@vaadin/vaadin-themable-mixin": "25.3.0-
|
|
40
|
+
"@vaadin/a11y-base": "25.3.0-alpha11",
|
|
41
|
+
"@vaadin/component-base": "25.3.0-alpha11",
|
|
42
|
+
"@vaadin/field-base": "25.3.0-alpha11",
|
|
43
|
+
"@vaadin/vaadin-themable-mixin": "25.3.0-alpha11",
|
|
44
44
|
"lit": "^3.0.0"
|
|
45
45
|
},
|
|
46
46
|
"devDependencies": {
|
|
47
|
-
"@vaadin/aura": "25.3.0-
|
|
48
|
-
"@vaadin/chai-plugins": "25.3.0-
|
|
49
|
-
"@vaadin/test-runner-commands": "25.3.0-
|
|
47
|
+
"@vaadin/aura": "25.3.0-alpha11",
|
|
48
|
+
"@vaadin/chai-plugins": "25.3.0-alpha11",
|
|
49
|
+
"@vaadin/test-runner-commands": "25.3.0-alpha11",
|
|
50
50
|
"@vaadin/testing-helpers": "^2.0.0",
|
|
51
|
-
"@vaadin/vaadin-lumo-styles": "25.3.0-
|
|
51
|
+
"@vaadin/vaadin-lumo-styles": "25.3.0-alpha11",
|
|
52
52
|
"sinon": "^22.0.0"
|
|
53
53
|
},
|
|
54
54
|
"customElements": "custom-elements.json",
|
|
@@ -56,5 +56,5 @@
|
|
|
56
56
|
"web-types.json",
|
|
57
57
|
"web-types.lit.json"
|
|
58
58
|
],
|
|
59
|
-
"gitHead": "
|
|
59
|
+
"gitHead": "7e0c61a37e68d8971def9cdf28ad0548a0f530a9"
|
|
60
60
|
}
|
|
@@ -40,12 +40,18 @@ export const RadioButtonMixin = (superclass) =>
|
|
|
40
40
|
|
|
41
41
|
this._setType('radio');
|
|
42
42
|
|
|
43
|
-
|
|
44
|
-
|
|
43
|
+
/**
|
|
44
|
+
* Set the string "on" as the default value for the radio button following the HTML specification:
|
|
45
|
+
* https://html.spec.whatwg.org/multipage/input.html#dom-input-value-default-on
|
|
46
|
+
* @internal to not document it in CEM
|
|
47
|
+
*/
|
|
45
48
|
this.value = 'on';
|
|
46
49
|
|
|
47
|
-
|
|
48
|
-
|
|
50
|
+
/**
|
|
51
|
+
* Set tabindex to 0 by default to not lose focus on click in Safari
|
|
52
|
+
* See https://github.com/vaadin/web-components/pull/6780
|
|
53
|
+
* @internal to not document it in CEM
|
|
54
|
+
*/
|
|
49
55
|
this.tabindex = 0;
|
|
50
56
|
}
|
|
51
57
|
|
|
@@ -63,6 +63,7 @@ import { RadioButtonMixin } from './vaadin-radio-button-mixin.js';
|
|
|
63
63
|
*
|
|
64
64
|
* @fires {CustomEvent} checked-changed - Fired when the `checked` property changes.
|
|
65
65
|
*
|
|
66
|
+
* @attr {string} theme - The theme variants to apply to the component.
|
|
66
67
|
* @customElement vaadin-radio-button
|
|
67
68
|
* @extends HTMLElement
|
|
68
69
|
*/
|
|
@@ -6,6 +6,7 @@
|
|
|
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
8
|
import { KeyboardMixin } from '@vaadin/a11y-base/src/keyboard-mixin.js';
|
|
9
|
+
import { setOrRemoveAttribute } from '@vaadin/component-base/src/dom-utils.js';
|
|
9
10
|
import { SlotObserver } from '@vaadin/component-base/src/slot-observer.js';
|
|
10
11
|
import { TooltipController } from '@vaadin/component-base/src/tooltip-controller.js';
|
|
11
12
|
import { generateUniqueId } from '@vaadin/component-base/src/unique-id-utils.js';
|
|
@@ -137,6 +138,15 @@ export const RadioGroupMixin = (superclass) =>
|
|
|
137
138
|
this.addController(this._tooltipController);
|
|
138
139
|
}
|
|
139
140
|
|
|
141
|
+
/** @protected */
|
|
142
|
+
updated(props) {
|
|
143
|
+
super.updated(props);
|
|
144
|
+
|
|
145
|
+
if (props.has('invalid')) {
|
|
146
|
+
setOrRemoveAttribute(this, 'aria-invalid', this.invalid);
|
|
147
|
+
}
|
|
148
|
+
}
|
|
149
|
+
|
|
140
150
|
/**
|
|
141
151
|
* @param {!Array<!Node>} nodes
|
|
142
152
|
* @return {!Array<!RadioButton>}
|
|
@@ -173,23 +183,6 @@ export const RadioGroupMixin = (superclass) =>
|
|
|
173
183
|
}
|
|
174
184
|
}
|
|
175
185
|
|
|
176
|
-
/**
|
|
177
|
-
* Override an observer from `FieldMixin`.
|
|
178
|
-
*
|
|
179
|
-
* @param {boolean} invalid
|
|
180
|
-
* @protected
|
|
181
|
-
* @override
|
|
182
|
-
*/
|
|
183
|
-
_invalidChanged(invalid) {
|
|
184
|
-
super._invalidChanged(invalid);
|
|
185
|
-
|
|
186
|
-
if (invalid) {
|
|
187
|
-
this.setAttribute('aria-invalid', 'true');
|
|
188
|
-
} else {
|
|
189
|
-
this.removeAttribute('aria-invalid');
|
|
190
|
-
}
|
|
191
|
-
}
|
|
192
|
-
|
|
193
186
|
/** @private */
|
|
194
187
|
__nameChanged(name) {
|
|
195
188
|
this.__radioButtons.forEach((radioButton) => {
|
|
@@ -75,6 +75,7 @@ import { RadioGroupMixin } from './vaadin-radio-group-mixin.js';
|
|
|
75
75
|
* @fires {CustomEvent} value-changed - Fired when the `value` property changes.
|
|
76
76
|
* @fires {CustomEvent} validated - Fired whenever the field is validated.
|
|
77
77
|
*
|
|
78
|
+
* @attr {string} theme - The theme variants to apply to the component.
|
|
78
79
|
* @customElement vaadin-radio-group
|
|
79
80
|
* @extends HTMLElement
|
|
80
81
|
*/
|
package/web-types.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://json.schemastore.org/web-types",
|
|
3
3
|
"name": "@vaadin/radio-group",
|
|
4
|
-
"version": "25.3.0-
|
|
4
|
+
"version": "25.3.0-alpha11",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
@@ -55,23 +55,12 @@
|
|
|
55
55
|
]
|
|
56
56
|
}
|
|
57
57
|
},
|
|
58
|
-
{
|
|
59
|
-
"name": "tabindex",
|
|
60
|
-
"description": "Indicates whether the element can be focused and where it participates in sequential keyboard navigation.",
|
|
61
|
-
"value": {
|
|
62
|
-
"type": [
|
|
63
|
-
"number"
|
|
64
|
-
]
|
|
65
|
-
}
|
|
66
|
-
},
|
|
67
58
|
{
|
|
68
59
|
"name": "theme",
|
|
69
60
|
"description": "The theme variants to apply to the component.",
|
|
70
61
|
"value": {
|
|
71
62
|
"type": [
|
|
72
|
-
"string"
|
|
73
|
-
"null",
|
|
74
|
-
"undefined"
|
|
63
|
+
"string"
|
|
75
64
|
]
|
|
76
65
|
}
|
|
77
66
|
},
|
|
@@ -132,18 +121,9 @@
|
|
|
132
121
|
]
|
|
133
122
|
}
|
|
134
123
|
},
|
|
135
|
-
{
|
|
136
|
-
"name": "tabindex",
|
|
137
|
-
"description": "",
|
|
138
|
-
"value": {
|
|
139
|
-
"type": [
|
|
140
|
-
"number"
|
|
141
|
-
]
|
|
142
|
-
}
|
|
143
|
-
},
|
|
144
124
|
{
|
|
145
125
|
"name": "value",
|
|
146
|
-
"description": "",
|
|
126
|
+
"description": "The value of the field.",
|
|
147
127
|
"value": {
|
|
148
128
|
"type": [
|
|
149
129
|
"string"
|
|
@@ -163,9 +143,18 @@
|
|
|
163
143
|
"name": "vaadin-radio-group",
|
|
164
144
|
"description": "`<vaadin-radio-group>` is a web component that allows the user to choose one item from a group of choices.\n\n```html\n<vaadin-radio-group label=\"Travel class\">\n <vaadin-radio-button value=\"economy\" label=\"Economy\"></vaadin-radio-button>\n <vaadin-radio-button value=\"business\" label=\"Business\"></vaadin-radio-button>\n <vaadin-radio-button value=\"firstClass\" label=\"First Class\"></vaadin-radio-button>\n</vaadin-radio-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 radio button 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.",
|
|
165
145
|
"attributes": [
|
|
146
|
+
{
|
|
147
|
+
"name": "accessible-description-ref",
|
|
148
|
+
"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.",
|
|
149
|
+
"value": {
|
|
150
|
+
"type": [
|
|
151
|
+
"string"
|
|
152
|
+
]
|
|
153
|
+
}
|
|
154
|
+
},
|
|
166
155
|
{
|
|
167
156
|
"name": "accessible-name",
|
|
168
|
-
"description": "String used to label the component
|
|
157
|
+
"description": "String used to label the component for screen reader users.",
|
|
169
158
|
"value": {
|
|
170
159
|
"type": [
|
|
171
160
|
"string"
|
|
@@ -174,7 +163,7 @@
|
|
|
174
163
|
},
|
|
175
164
|
{
|
|
176
165
|
"name": "accessible-name-ref",
|
|
177
|
-
"description": "
|
|
166
|
+
"description": "A space-separated list of IDs referencing the elements that\nlabel the component for screen reader users.",
|
|
178
167
|
"value": {
|
|
179
168
|
"type": [
|
|
180
169
|
"string"
|
|
@@ -267,9 +256,7 @@
|
|
|
267
256
|
"description": "The theme variants to apply to the component.",
|
|
268
257
|
"value": {
|
|
269
258
|
"type": [
|
|
270
|
-
"string"
|
|
271
|
-
"null",
|
|
272
|
-
"undefined"
|
|
259
|
+
"string"
|
|
273
260
|
]
|
|
274
261
|
}
|
|
275
262
|
},
|
|
@@ -285,9 +272,18 @@
|
|
|
285
272
|
],
|
|
286
273
|
"js": {
|
|
287
274
|
"properties": [
|
|
275
|
+
{
|
|
276
|
+
"name": "accessibleDescriptionRef",
|
|
277
|
+
"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.",
|
|
278
|
+
"value": {
|
|
279
|
+
"type": [
|
|
280
|
+
"string"
|
|
281
|
+
]
|
|
282
|
+
}
|
|
283
|
+
},
|
|
288
284
|
{
|
|
289
285
|
"name": "accessibleName",
|
|
290
|
-
"description": "String used to label the component
|
|
286
|
+
"description": "String used to label the component for screen reader users.",
|
|
291
287
|
"value": {
|
|
292
288
|
"type": [
|
|
293
289
|
"string"
|
|
@@ -296,7 +292,7 @@
|
|
|
296
292
|
},
|
|
297
293
|
{
|
|
298
294
|
"name": "accessibleNameRef",
|
|
299
|
-
"description": "
|
|
295
|
+
"description": "A space-separated list of IDs referencing the elements that\nlabel the component for screen reader users.",
|
|
300
296
|
"value": {
|
|
301
297
|
"type": [
|
|
302
298
|
"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/radio-group",
|
|
4
|
-
"version": "25.3.0-
|
|
4
|
+
"version": "25.3.0-alpha11",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"framework": "lit",
|
|
7
7
|
"framework-config": {
|
|
@@ -54,16 +54,9 @@
|
|
|
54
54
|
"kind": "expression"
|
|
55
55
|
}
|
|
56
56
|
},
|
|
57
|
-
{
|
|
58
|
-
"name": ".tabindex",
|
|
59
|
-
"description": "",
|
|
60
|
-
"value": {
|
|
61
|
-
"kind": "expression"
|
|
62
|
-
}
|
|
63
|
-
},
|
|
64
57
|
{
|
|
65
58
|
"name": ".value",
|
|
66
|
-
"description": "",
|
|
59
|
+
"description": "The value of the field.",
|
|
67
60
|
"value": {
|
|
68
61
|
"kind": "expression"
|
|
69
62
|
}
|
|
@@ -82,16 +75,23 @@
|
|
|
82
75
|
"description": "`<vaadin-radio-group>` is a web component that allows the user to choose one item from a group of choices.\n\n```html\n<vaadin-radio-group label=\"Travel class\">\n <vaadin-radio-button value=\"economy\" label=\"Economy\"></vaadin-radio-button>\n <vaadin-radio-button value=\"business\" label=\"Business\"></vaadin-radio-button>\n <vaadin-radio-button value=\"firstClass\" label=\"First Class\"></vaadin-radio-button>\n</vaadin-radio-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 radio button 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.",
|
|
83
76
|
"extension": true,
|
|
84
77
|
"attributes": [
|
|
78
|
+
{
|
|
79
|
+
"name": ".accessibleDescriptionRef",
|
|
80
|
+
"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.",
|
|
81
|
+
"value": {
|
|
82
|
+
"kind": "expression"
|
|
83
|
+
}
|
|
84
|
+
},
|
|
85
85
|
{
|
|
86
86
|
"name": ".accessibleName",
|
|
87
|
-
"description": "String used to label the component
|
|
87
|
+
"description": "String used to label the component for screen reader users.",
|
|
88
88
|
"value": {
|
|
89
89
|
"kind": "expression"
|
|
90
90
|
}
|
|
91
91
|
},
|
|
92
92
|
{
|
|
93
93
|
"name": ".accessibleNameRef",
|
|
94
|
-
"description": "
|
|
94
|
+
"description": "A space-separated list of IDs referencing the elements that\nlabel the component for screen reader users.",
|
|
95
95
|
"value": {
|
|
96
96
|
"kind": "expression"
|
|
97
97
|
}
|