@vaadin/radio-group 25.0.0-alpha2 → 25.0.0-alpha20
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/package.json +10 -11
- package/src/styles/vaadin-radio-button-base-styles.js +25 -0
- package/src/styles/vaadin-radio-group-base-styles.js +21 -0
- package/src/vaadin-radio-button.d.ts +8 -8
- package/src/vaadin-radio-button.js +11 -10
- package/src/vaadin-radio-group-mixin.js +2 -2
- package/src/vaadin-radio-group.d.ts +11 -10
- package/src/vaadin-radio-group.js +14 -12
- package/vaadin-radio-button.js +1 -1
- package/vaadin-radio-group.js +1 -1
- package/web-types.json +3 -3
- package/web-types.lit.json +3 -3
- package/src/vaadin-radio-button-styles.js +0 -77
- package/src/vaadin-radio-group-styles.js +0 -37
- package/theme/lumo/vaadin-radio-button-styles.d.ts +0 -5
- package/theme/lumo/vaadin-radio-button-styles.js +0 -149
- package/theme/lumo/vaadin-radio-button.d.ts +0 -2
- package/theme/lumo/vaadin-radio-button.js +0 -2
- package/theme/lumo/vaadin-radio-group-styles.d.ts +0 -5
- package/theme/lumo/vaadin-radio-group-styles.js +0 -55
- package/theme/lumo/vaadin-radio-group.d.ts +0 -3
- package/theme/lumo/vaadin-radio-group.js +0 -3
- /package/src/{vaadin-radio-button-styles.d.ts → styles/vaadin-radio-button-base-styles.d.ts} +0 -0
- /package/src/{vaadin-radio-group-styles.d.ts → styles/vaadin-radio-group-base-styles.d.ts} +0 -0
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/radio-group",
|
|
3
|
-
"version": "25.0.0-
|
|
3
|
+
"version": "25.0.0-alpha20",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -21,7 +21,6 @@
|
|
|
21
21
|
"type": "module",
|
|
22
22
|
"files": [
|
|
23
23
|
"src",
|
|
24
|
-
"theme",
|
|
25
24
|
"vaadin-*.d.ts",
|
|
26
25
|
"vaadin-*.js",
|
|
27
26
|
"web-types.json",
|
|
@@ -37,22 +36,22 @@
|
|
|
37
36
|
],
|
|
38
37
|
"dependencies": {
|
|
39
38
|
"@open-wc/dedupe-mixin": "^1.3.0",
|
|
40
|
-
"@vaadin/a11y-base": "25.0.0-
|
|
41
|
-
"@vaadin/component-base": "25.0.0-
|
|
42
|
-
"@vaadin/field-base": "25.0.0-
|
|
43
|
-
"@vaadin/vaadin-
|
|
44
|
-
"@vaadin/vaadin-themable-mixin": "25.0.0-alpha2",
|
|
39
|
+
"@vaadin/a11y-base": "25.0.0-alpha20",
|
|
40
|
+
"@vaadin/component-base": "25.0.0-alpha20",
|
|
41
|
+
"@vaadin/field-base": "25.0.0-alpha20",
|
|
42
|
+
"@vaadin/vaadin-themable-mixin": "25.0.0-alpha20",
|
|
45
43
|
"lit": "^3.0.0"
|
|
46
44
|
},
|
|
47
45
|
"devDependencies": {
|
|
48
|
-
"@vaadin/chai-plugins": "25.0.0-
|
|
49
|
-
"@vaadin/test-runner-commands": "25.0.0-
|
|
46
|
+
"@vaadin/chai-plugins": "25.0.0-alpha20",
|
|
47
|
+
"@vaadin/test-runner-commands": "25.0.0-alpha20",
|
|
50
48
|
"@vaadin/testing-helpers": "^2.0.0",
|
|
51
|
-
"
|
|
49
|
+
"@vaadin/vaadin-lumo-styles": "25.0.0-alpha20",
|
|
50
|
+
"sinon": "^21.0.0"
|
|
52
51
|
},
|
|
53
52
|
"web-types": [
|
|
54
53
|
"web-types.json",
|
|
55
54
|
"web-types.lit.json"
|
|
56
55
|
],
|
|
57
|
-
"gitHead": "
|
|
56
|
+
"gitHead": "c948aae591a30b432f3784000d4677674cae56e0"
|
|
58
57
|
}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license
|
|
3
|
+
* Copyright (c) 2017 - 2025 Vaadin Ltd.
|
|
4
|
+
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
|
+
*/
|
|
6
|
+
import { css } from 'lit';
|
|
7
|
+
import { checkable } from '@vaadin/field-base/src/styles/checkable-base-styles.js';
|
|
8
|
+
import { field } from '@vaadin/field-base/src/styles/field-base-styles.js';
|
|
9
|
+
|
|
10
|
+
const radioButton = css`
|
|
11
|
+
[part='radio'] {
|
|
12
|
+
border-radius: 50%;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
[part='radio']::after {
|
|
16
|
+
top: 50%;
|
|
17
|
+
left: 50%;
|
|
18
|
+
translate: -50% -50%;
|
|
19
|
+
width: var(--vaadin-radio-button-dot-size, 50%);
|
|
20
|
+
height: var(--vaadin-radio-button-dot-size, 50%);
|
|
21
|
+
border-radius: 50%;
|
|
22
|
+
}
|
|
23
|
+
`;
|
|
24
|
+
|
|
25
|
+
export const radioButtonStyles = [field, checkable('radio', 'radio-button'), radioButton];
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license
|
|
3
|
+
* Copyright (c) 2017 - 2025 Vaadin Ltd.
|
|
4
|
+
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
|
+
*/
|
|
6
|
+
import { css } from 'lit';
|
|
7
|
+
import { field } from '@vaadin/field-base/src/styles/field-base-styles.js';
|
|
8
|
+
import { group } from '@vaadin/field-base/src/styles/group-base-styles.js';
|
|
9
|
+
|
|
10
|
+
export const radioGroupStyles = [
|
|
11
|
+
field,
|
|
12
|
+
group('radio'),
|
|
13
|
+
css`
|
|
14
|
+
:host([readonly]) ::slotted(vaadin-radio-button) {
|
|
15
|
+
--vaadin-radio-button-background: transparent;
|
|
16
|
+
--vaadin-radio-button-border-color: var(--vaadin-border-color);
|
|
17
|
+
--vaadin-radio-button-color: var(--vaadin-text-color);
|
|
18
|
+
--_border-style: dashed;
|
|
19
|
+
}
|
|
20
|
+
`,
|
|
21
|
+
];
|
|
@@ -31,14 +31,14 @@ export * from './vaadin-radio-button-mixin.js';
|
|
|
31
31
|
*
|
|
32
32
|
* The following state attributes are available for styling:
|
|
33
33
|
*
|
|
34
|
-
* Attribute | Description
|
|
35
|
-
*
|
|
36
|
-
* `active` | Set when the radio button is pressed
|
|
37
|
-
* `disabled` | Set when the radio button is disabled.
|
|
38
|
-
* `focus-ring` | Set when the radio button is focused using the keyboard.
|
|
39
|
-
* `focused` | Set when the radio button is focused.
|
|
40
|
-
* `checked` | Set when the radio button is checked.
|
|
41
|
-
* `has-label` | Set when the radio button has a label.
|
|
34
|
+
* Attribute | Description
|
|
35
|
+
* -------------|--------------------------
|
|
36
|
+
* `active` | Set when the radio button is pressed, either with a pointer or the keyboard.
|
|
37
|
+
* `disabled` | Set when the radio button is disabled.
|
|
38
|
+
* `focus-ring` | Set when the radio button is focused using the keyboard.
|
|
39
|
+
* `focused` | Set when the radio button is focused.
|
|
40
|
+
* `checked` | Set when the radio button is checked.
|
|
41
|
+
* `has-label` | Set when the radio button has a label.
|
|
42
42
|
*
|
|
43
43
|
* See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
|
|
44
44
|
*
|
|
@@ -7,9 +7,10 @@ import { html, LitElement } from 'lit';
|
|
|
7
7
|
import { defineCustomElement } from '@vaadin/component-base/src/define.js';
|
|
8
8
|
import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
|
|
9
9
|
import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
|
|
10
|
+
import { LumoInjectionMixin } from '@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js';
|
|
10
11
|
import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
|
|
12
|
+
import { radioButtonStyles } from './styles/vaadin-radio-button-base-styles.js';
|
|
11
13
|
import { RadioButtonMixin } from './vaadin-radio-button-mixin.js';
|
|
12
|
-
import { radioButtonStyles } from './vaadin-radio-button-styles.js';
|
|
13
14
|
|
|
14
15
|
/**
|
|
15
16
|
* `<vaadin-radio-button>` is a web component representing a choice in a radio group.
|
|
@@ -33,14 +34,14 @@ import { radioButtonStyles } from './vaadin-radio-button-styles.js';
|
|
|
33
34
|
*
|
|
34
35
|
* The following state attributes are available for styling:
|
|
35
36
|
*
|
|
36
|
-
* Attribute | Description
|
|
37
|
-
*
|
|
38
|
-
* `active` | Set when the radio button is pressed
|
|
39
|
-
* `disabled` | Set when the radio button is disabled.
|
|
40
|
-
* `focus-ring` | Set when the radio button is focused using the keyboard.
|
|
41
|
-
* `focused` | Set when the radio button is focused.
|
|
42
|
-
* `checked` | Set when the radio button is checked.
|
|
43
|
-
* `has-label` | Set when the radio button has a label.
|
|
37
|
+
* Attribute | Description
|
|
38
|
+
* -------------|--------------------------
|
|
39
|
+
* `active` | Set when the radio button is pressed, either with a pointer or the keyboard.
|
|
40
|
+
* `disabled` | Set when the radio button is disabled.
|
|
41
|
+
* `focus-ring` | Set when the radio button is focused using the keyboard.
|
|
42
|
+
* `focused` | Set when the radio button is focused.
|
|
43
|
+
* `checked` | Set when the radio button is checked.
|
|
44
|
+
* `has-label` | Set when the radio button has a label.
|
|
44
45
|
*
|
|
45
46
|
* See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
|
|
46
47
|
*
|
|
@@ -52,7 +53,7 @@ import { radioButtonStyles } from './vaadin-radio-button-styles.js';
|
|
|
52
53
|
* @mixes ElementMixin
|
|
53
54
|
* @mixes RadioButtonMixin
|
|
54
55
|
*/
|
|
55
|
-
class RadioButton extends RadioButtonMixin(ElementMixin(ThemableMixin(PolylitMixin(LitElement)))) {
|
|
56
|
+
class RadioButton extends RadioButtonMixin(ElementMixin(ThemableMixin(PolylitMixin(LumoInjectionMixin(LitElement))))) {
|
|
56
57
|
static get is() {
|
|
57
58
|
return 'vaadin-radio-button';
|
|
58
59
|
}
|
|
@@ -209,7 +209,7 @@ export const RadioGroupMixin = (superclass) =>
|
|
|
209
209
|
}
|
|
210
210
|
|
|
211
211
|
/**
|
|
212
|
-
* @param {
|
|
212
|
+
* @param {HTMLElement} radioButton
|
|
213
213
|
* @private
|
|
214
214
|
*/
|
|
215
215
|
__selectNextRadioButton(radioButton) {
|
|
@@ -219,7 +219,7 @@ export const RadioGroupMixin = (superclass) =>
|
|
|
219
219
|
}
|
|
220
220
|
|
|
221
221
|
/**
|
|
222
|
-
* @param {
|
|
222
|
+
* @param {HTMLElement} radioButton
|
|
223
223
|
* @private
|
|
224
224
|
*/
|
|
225
225
|
__selectPrevRadioButton(radioButton) {
|
|
@@ -34,16 +34,17 @@ export * from './vaadin-radio-group-mixin.js';
|
|
|
34
34
|
*
|
|
35
35
|
* The following state attributes are available for styling:
|
|
36
36
|
*
|
|
37
|
-
* Attribute | Description
|
|
38
|
-
*
|
|
39
|
-
* `disabled` | Set when the element is disabled
|
|
40
|
-
* `readonly` | Set when the element is readonly
|
|
41
|
-
* `invalid` | Set when the element is invalid
|
|
42
|
-
* `focused` | Set when the element is focused
|
|
43
|
-
* `has-label` | Set when the element has a label
|
|
44
|
-
* `has-value` | Set when the element has a value
|
|
45
|
-
* `has-helper` | Set when the element has helper text
|
|
46
|
-
* `has-error-message` | Set when the element has an error message
|
|
37
|
+
* Attribute | Description
|
|
38
|
+
* --------------------|---------------------------------
|
|
39
|
+
* `disabled` | Set when the element is disabled
|
|
40
|
+
* `readonly` | Set when the element is readonly
|
|
41
|
+
* `invalid` | Set when the element is invalid
|
|
42
|
+
* `focused` | Set when the element is focused
|
|
43
|
+
* `has-label` | Set when the element has a label
|
|
44
|
+
* `has-value` | Set when the element has a value
|
|
45
|
+
* `has-helper` | Set when the element has helper text
|
|
46
|
+
* `has-error-message` | Set when the element has an error message
|
|
47
|
+
* `has-tooltip` | Set when the element has a slotted tooltip
|
|
47
48
|
*
|
|
48
49
|
* See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
|
|
49
50
|
*
|
|
@@ -8,9 +8,10 @@ import { html, LitElement } from 'lit';
|
|
|
8
8
|
import { defineCustomElement } from '@vaadin/component-base/src/define.js';
|
|
9
9
|
import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
|
|
10
10
|
import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
|
|
11
|
+
import { LumoInjectionMixin } from '@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js';
|
|
11
12
|
import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
|
|
13
|
+
import { radioGroupStyles } from './styles/vaadin-radio-group-base-styles.js';
|
|
12
14
|
import { RadioGroupMixin } from './vaadin-radio-group-mixin.js';
|
|
13
|
-
import { radioGroupStyles } from './vaadin-radio-group-styles.js';
|
|
14
15
|
|
|
15
16
|
/**
|
|
16
17
|
* `<vaadin-radio-group>` is a web component that allows the user to choose one item from a group of choices.
|
|
@@ -37,16 +38,17 @@ import { radioGroupStyles } from './vaadin-radio-group-styles.js';
|
|
|
37
38
|
*
|
|
38
39
|
* The following state attributes are available for styling:
|
|
39
40
|
*
|
|
40
|
-
* Attribute | Description
|
|
41
|
-
*
|
|
42
|
-
* `disabled` | Set when the element is disabled
|
|
43
|
-
* `readonly` | Set when the element is readonly
|
|
44
|
-
* `invalid` | Set when the element is invalid
|
|
45
|
-
* `focused` | Set when the element is focused
|
|
46
|
-
* `has-label` | Set when the element has a label
|
|
47
|
-
* `has-value` | Set when the element has a value
|
|
48
|
-
* `has-helper` | Set when the element has helper text
|
|
49
|
-
* `has-error-message` | Set when the element has an error message
|
|
41
|
+
* Attribute | Description
|
|
42
|
+
* --------------------|---------------------------------
|
|
43
|
+
* `disabled` | Set when the element is disabled
|
|
44
|
+
* `readonly` | Set when the element is readonly
|
|
45
|
+
* `invalid` | Set when the element is invalid
|
|
46
|
+
* `focused` | Set when the element is focused
|
|
47
|
+
* `has-label` | Set when the element has a label
|
|
48
|
+
* `has-value` | Set when the element has a value
|
|
49
|
+
* `has-helper` | Set when the element has helper text
|
|
50
|
+
* `has-error-message` | Set when the element has an error message
|
|
51
|
+
* `has-tooltip` | Set when the element has a slotted tooltip
|
|
50
52
|
*
|
|
51
53
|
* See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
|
|
52
54
|
*
|
|
@@ -60,7 +62,7 @@ import { radioGroupStyles } from './vaadin-radio-group-styles.js';
|
|
|
60
62
|
* @mixes ElementMixin
|
|
61
63
|
* @mixes RadioGroupMixin
|
|
62
64
|
*/
|
|
63
|
-
class RadioGroup extends RadioGroupMixin(ElementMixin(ThemableMixin(PolylitMixin(LitElement)))) {
|
|
65
|
+
class RadioGroup extends RadioGroupMixin(ElementMixin(ThemableMixin(PolylitMixin(LumoInjectionMixin(LitElement))))) {
|
|
64
66
|
static get is() {
|
|
65
67
|
return 'vaadin-radio-group';
|
|
66
68
|
}
|
package/vaadin-radio-button.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import './
|
|
1
|
+
import './src/vaadin-radio-button.js';
|
|
2
2
|
export * from './src/vaadin-radio-button.js';
|
package/vaadin-radio-group.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import './
|
|
1
|
+
import './src/vaadin-radio-group.js';
|
|
2
2
|
export * from './src/vaadin-radio-group.js';
|
package/web-types.json
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://json.schemastore.org/web-types",
|
|
3
3
|
"name": "@vaadin/radio-group",
|
|
4
|
-
"version": "25.0.0-
|
|
4
|
+
"version": "25.0.0-alpha20",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
8
8
|
"elements": [
|
|
9
9
|
{
|
|
10
10
|
"name": "vaadin-radio-button",
|
|
11
|
-
"description": "`<vaadin-radio-button>` is a web component representing a choice in a radio group.\nOnly one radio button in the group can be selected at the same time.\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`radio` | The wrapper element that contains slotted `<input type=\"radio\">`.\n\nThe following state attributes are available for styling:\n\nAttribute | Description
|
|
11
|
+
"description": "`<vaadin-radio-button>` is a web component representing a choice in a radio group.\nOnly one radio button in the group can be selected at the same time.\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`radio` | The wrapper element that contains slotted `<input type=\"radio\">`.\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n-------------|--------------------------\n`active` | Set when the radio button is pressed, either with a pointer or the keyboard.\n`disabled` | Set when the radio button is disabled.\n`focus-ring` | Set when the radio button is focused using the keyboard.\n`focused` | Set when the radio button is focused.\n`checked` | Set when the radio button is checked.\n`has-label` | Set when the radio button has a label.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
12
12
|
"attributes": [
|
|
13
13
|
{
|
|
14
14
|
"name": "disabled",
|
|
@@ -163,7 +163,7 @@
|
|
|
163
163
|
},
|
|
164
164
|
{
|
|
165
165
|
"name": "vaadin-radio-group",
|
|
166
|
-
"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
|
|
166
|
+
"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\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
167
167
|
"attributes": [
|
|
168
168
|
{
|
|
169
169
|
"name": "disabled",
|
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.0.0-
|
|
4
|
+
"version": "25.0.0-alpha20",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"framework": "lit",
|
|
7
7
|
"framework-config": {
|
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
"elements": [
|
|
17
17
|
{
|
|
18
18
|
"name": "vaadin-radio-button",
|
|
19
|
-
"description": "`<vaadin-radio-button>` is a web component representing a choice in a radio group.\nOnly one radio button in the group can be selected at the same time.\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`radio` | The wrapper element that contains slotted `<input type=\"radio\">`.\n\nThe following state attributes are available for styling:\n\nAttribute | Description
|
|
19
|
+
"description": "`<vaadin-radio-button>` is a web component representing a choice in a radio group.\nOnly one radio button in the group can be selected at the same time.\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`radio` | The wrapper element that contains slotted `<input type=\"radio\">`.\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n-------------|--------------------------\n`active` | Set when the radio button is pressed, either with a pointer or the keyboard.\n`disabled` | Set when the radio button is disabled.\n`focus-ring` | Set when the radio button is focused using the keyboard.\n`focused` | Set when the radio button is focused.\n`checked` | Set when the radio button is checked.\n`has-label` | Set when the radio button has a label.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
20
20
|
"extension": true,
|
|
21
21
|
"attributes": [
|
|
22
22
|
{
|
|
@@ -79,7 +79,7 @@
|
|
|
79
79
|
},
|
|
80
80
|
{
|
|
81
81
|
"name": "vaadin-radio-group",
|
|
82
|
-
"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
|
|
82
|
+
"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\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
83
83
|
"extension": true,
|
|
84
84
|
"attributes": [
|
|
85
85
|
{
|
|
@@ -1,77 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @license
|
|
3
|
-
* Copyright (c) 2017 - 2025 Vaadin Ltd.
|
|
4
|
-
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
|
-
*/
|
|
6
|
-
import { css } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
|
|
7
|
-
|
|
8
|
-
export const radioButtonStyles = css`
|
|
9
|
-
:host {
|
|
10
|
-
display: inline-block;
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
:host([hidden]) {
|
|
14
|
-
display: none !important;
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
:host([disabled]) {
|
|
18
|
-
-webkit-tap-highlight-color: transparent;
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
.vaadin-radio-button-container {
|
|
22
|
-
display: grid;
|
|
23
|
-
grid-template-columns: auto 1fr;
|
|
24
|
-
align-items: baseline;
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
[part='radio'],
|
|
28
|
-
::slotted(input),
|
|
29
|
-
::slotted(label) {
|
|
30
|
-
grid-row: 1;
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
[part='radio'],
|
|
34
|
-
::slotted(input) {
|
|
35
|
-
grid-column: 1;
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
[part='radio'] {
|
|
39
|
-
width: var(--vaadin-radio-button-size, 1em);
|
|
40
|
-
height: var(--vaadin-radio-button-size, 1em);
|
|
41
|
-
--_input-border-width: var(--vaadin-input-field-border-width, 0);
|
|
42
|
-
--_input-border-color: var(--vaadin-input-field-border-color, transparent);
|
|
43
|
-
box-shadow: inset 0 0 0 var(--_input-border-width, 0) var(--_input-border-color);
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
[part='radio']::before {
|
|
47
|
-
display: block;
|
|
48
|
-
content: '\\202F';
|
|
49
|
-
line-height: var(--vaadin-radio-button-size, 1em);
|
|
50
|
-
contain: paint;
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
/* visually hidden */
|
|
54
|
-
::slotted(input) {
|
|
55
|
-
cursor: inherit;
|
|
56
|
-
margin: 0;
|
|
57
|
-
align-self: stretch;
|
|
58
|
-
-webkit-appearance: none;
|
|
59
|
-
width: initial;
|
|
60
|
-
height: initial;
|
|
61
|
-
}
|
|
62
|
-
|
|
63
|
-
@media (forced-colors: active) {
|
|
64
|
-
[part='radio'] {
|
|
65
|
-
outline: 1px solid;
|
|
66
|
-
outline-offset: -1px;
|
|
67
|
-
}
|
|
68
|
-
|
|
69
|
-
:host([focused]) [part='radio'] {
|
|
70
|
-
outline-width: 2px;
|
|
71
|
-
}
|
|
72
|
-
|
|
73
|
-
:host([disabled]) [part='radio'] {
|
|
74
|
-
outline-color: GrayText;
|
|
75
|
-
}
|
|
76
|
-
}
|
|
77
|
-
`;
|
|
@@ -1,37 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @license
|
|
3
|
-
* Copyright (c) 2017 - 2025 Vaadin Ltd.
|
|
4
|
-
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
|
-
*/
|
|
6
|
-
import { css } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
|
|
7
|
-
|
|
8
|
-
export const radioGroupStyles = css`
|
|
9
|
-
:host {
|
|
10
|
-
display: inline-flex;
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
:host::before {
|
|
14
|
-
content: '\\2003';
|
|
15
|
-
width: 0;
|
|
16
|
-
display: inline-block;
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
:host([hidden]) {
|
|
20
|
-
display: none !important;
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
.vaadin-group-field-container {
|
|
24
|
-
display: flex;
|
|
25
|
-
flex-direction: column;
|
|
26
|
-
width: 100%;
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
[part='group-field'] {
|
|
30
|
-
display: flex;
|
|
31
|
-
flex-wrap: wrap;
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
:host(:not([has-label])) [part='label'] {
|
|
35
|
-
display: none;
|
|
36
|
-
}
|
|
37
|
-
`;
|
|
@@ -1,149 +0,0 @@
|
|
|
1
|
-
import '@vaadin/vaadin-lumo-styles/color.js';
|
|
2
|
-
import '@vaadin/vaadin-lumo-styles/sizing.js';
|
|
3
|
-
import '@vaadin/vaadin-lumo-styles/spacing.js';
|
|
4
|
-
import '@vaadin/vaadin-lumo-styles/style.js';
|
|
5
|
-
import '@vaadin/vaadin-lumo-styles/typography.js';
|
|
6
|
-
import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
|
|
7
|
-
|
|
8
|
-
registerStyles(
|
|
9
|
-
'vaadin-radio-button',
|
|
10
|
-
css`
|
|
11
|
-
:host {
|
|
12
|
-
color: var(--vaadin-radio-button-label-color, var(--lumo-body-text-color));
|
|
13
|
-
font-size: var(--vaadin-radio-button-label-font-size, var(--lumo-font-size-m));
|
|
14
|
-
font-family: var(--lumo-font-family);
|
|
15
|
-
line-height: var(--lumo-line-height-s);
|
|
16
|
-
-webkit-font-smoothing: antialiased;
|
|
17
|
-
-moz-osx-font-smoothing: grayscale;
|
|
18
|
-
-webkit-tap-highlight-color: transparent;
|
|
19
|
-
-webkit-user-select: none;
|
|
20
|
-
user-select: none;
|
|
21
|
-
cursor: default;
|
|
22
|
-
outline: none;
|
|
23
|
-
--_radio-button-size: var(--vaadin-radio-button-size, calc(var(--lumo-size-m) / 2));
|
|
24
|
-
--_focus-ring-color: var(--vaadin-focus-ring-color, var(--lumo-primary-color-50pct));
|
|
25
|
-
--_focus-ring-width: var(--vaadin-focus-ring-width, 2px);
|
|
26
|
-
--_selection-color: var(--vaadin-selection-color, var(--lumo-primary-color));
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
:host([has-label]) ::slotted(label) {
|
|
30
|
-
padding: var(
|
|
31
|
-
--vaadin-radio-button-label-padding,
|
|
32
|
-
var(--lumo-space-xs) var(--lumo-space-s) var(--lumo-space-xs) var(--lumo-space-xs)
|
|
33
|
-
);
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
[part='radio'] {
|
|
37
|
-
width: var(--_radio-button-size);
|
|
38
|
-
height: var(--_radio-button-size);
|
|
39
|
-
margin: var(--lumo-space-xs);
|
|
40
|
-
position: relative;
|
|
41
|
-
border-radius: 50%;
|
|
42
|
-
background: var(--vaadin-radio-button-background, var(--lumo-contrast-20pct));
|
|
43
|
-
transition:
|
|
44
|
-
transform 0.2s cubic-bezier(0.12, 0.32, 0.54, 2),
|
|
45
|
-
background-color 0.15s;
|
|
46
|
-
will-change: transform;
|
|
47
|
-
cursor: var(--lumo-clickable-cursor);
|
|
48
|
-
/* Default field border color */
|
|
49
|
-
--_input-border-color: var(--vaadin-input-field-border-color, var(--lumo-contrast-50pct));
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
/* Used for activation "halo" */
|
|
53
|
-
[part='radio']::before {
|
|
54
|
-
pointer-events: none;
|
|
55
|
-
color: transparent;
|
|
56
|
-
width: 100%;
|
|
57
|
-
height: 100%;
|
|
58
|
-
line-height: var(--_radio-button-size);
|
|
59
|
-
border-radius: inherit;
|
|
60
|
-
background-color: inherit;
|
|
61
|
-
transform: scale(1.4);
|
|
62
|
-
opacity: 0;
|
|
63
|
-
transition:
|
|
64
|
-
transform 0.1s,
|
|
65
|
-
opacity 0.8s;
|
|
66
|
-
will-change: transform, opacity;
|
|
67
|
-
}
|
|
68
|
-
|
|
69
|
-
/* Used for the dot */
|
|
70
|
-
[part='radio']::after {
|
|
71
|
-
content: '';
|
|
72
|
-
pointer-events: none;
|
|
73
|
-
width: 0;
|
|
74
|
-
height: 0;
|
|
75
|
-
border: var(--vaadin-radio-button-dot-size, 3px) solid
|
|
76
|
-
var(--vaadin-radio-button-dot-color, var(--lumo-primary-contrast-color));
|
|
77
|
-
border-radius: 50%;
|
|
78
|
-
position: absolute;
|
|
79
|
-
top: 50%;
|
|
80
|
-
left: 50%;
|
|
81
|
-
transform: translate(-50%, -50%) scale(0);
|
|
82
|
-
transition: 0.25s transform;
|
|
83
|
-
will-change: transform;
|
|
84
|
-
background-clip: content-box;
|
|
85
|
-
}
|
|
86
|
-
|
|
87
|
-
:host([checked]) {
|
|
88
|
-
--vaadin-input-field-border-color: transparent;
|
|
89
|
-
}
|
|
90
|
-
|
|
91
|
-
:host([checked]) [part='radio'] {
|
|
92
|
-
background-color: var(--_selection-color);
|
|
93
|
-
}
|
|
94
|
-
|
|
95
|
-
:host([checked]) [part='radio']::after {
|
|
96
|
-
transform: translate(-50%, -50%) scale(1);
|
|
97
|
-
}
|
|
98
|
-
|
|
99
|
-
:host(:not([checked]):not([disabled]):hover) [part='radio'] {
|
|
100
|
-
background: var(--vaadin-radio-button-background-hover, var(--lumo-contrast-30pct));
|
|
101
|
-
}
|
|
102
|
-
|
|
103
|
-
:host([active]) [part='radio'] {
|
|
104
|
-
transform: scale(0.9);
|
|
105
|
-
transition-duration: 0.05s;
|
|
106
|
-
}
|
|
107
|
-
|
|
108
|
-
:host([active][checked]) [part='radio'] {
|
|
109
|
-
transform: scale(1.1);
|
|
110
|
-
}
|
|
111
|
-
|
|
112
|
-
:host([active]:not([checked])) [part='radio']::before {
|
|
113
|
-
transition-duration: 0.01s, 0.01s;
|
|
114
|
-
transform: scale(0);
|
|
115
|
-
opacity: 0.4;
|
|
116
|
-
}
|
|
117
|
-
|
|
118
|
-
:host([focus-ring]) [part='radio'] {
|
|
119
|
-
box-shadow:
|
|
120
|
-
0 0 0 1px var(--lumo-base-color),
|
|
121
|
-
0 0 0 calc(var(--_focus-ring-width) + 1px) var(--_focus-ring-color),
|
|
122
|
-
inset 0 0 0 var(--_input-border-width, 0) var(--_input-border-color);
|
|
123
|
-
}
|
|
124
|
-
|
|
125
|
-
:host([disabled]) {
|
|
126
|
-
pointer-events: none;
|
|
127
|
-
color: var(--lumo-disabled-text-color);
|
|
128
|
-
--vaadin-input-field-border-color: var(--lumo-contrast-20pct);
|
|
129
|
-
}
|
|
130
|
-
|
|
131
|
-
:host([disabled]) ::slotted(label) {
|
|
132
|
-
color: inherit;
|
|
133
|
-
}
|
|
134
|
-
|
|
135
|
-
:host([disabled]) [part='radio'] {
|
|
136
|
-
background-color: var(--vaadin-radio-button-disabled-background, var(--lumo-contrast-10pct));
|
|
137
|
-
}
|
|
138
|
-
|
|
139
|
-
:host([disabled]) [part='radio']::after {
|
|
140
|
-
border-color: var(--vaadin-radio-button-disabled-dot-color, var(--lumo-contrast-30pct));
|
|
141
|
-
}
|
|
142
|
-
|
|
143
|
-
/* RTL specific styles */
|
|
144
|
-
:host([dir='rtl'][has-label]) ::slotted(label) {
|
|
145
|
-
padding: var(--lumo-space-xs) var(--lumo-space-xs) var(--lumo-space-xs) var(--lumo-space-s);
|
|
146
|
-
}
|
|
147
|
-
`,
|
|
148
|
-
{ moduleId: 'lumo-radio-button' },
|
|
149
|
-
);
|
|
@@ -1,55 +0,0 @@
|
|
|
1
|
-
import '@vaadin/vaadin-lumo-styles/color.js';
|
|
2
|
-
import '@vaadin/vaadin-lumo-styles/sizing.js';
|
|
3
|
-
import '@vaadin/vaadin-lumo-styles/spacing.js';
|
|
4
|
-
import '@vaadin/vaadin-lumo-styles/style.js';
|
|
5
|
-
import '@vaadin/vaadin-lumo-styles/typography.js';
|
|
6
|
-
import { helper } from '@vaadin/vaadin-lumo-styles/mixins/helper.js';
|
|
7
|
-
import { requiredField } from '@vaadin/vaadin-lumo-styles/mixins/required-field.js';
|
|
8
|
-
import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
|
|
9
|
-
|
|
10
|
-
const radioGroup = css`
|
|
11
|
-
:host {
|
|
12
|
-
color: var(--lumo-body-text-color);
|
|
13
|
-
font-size: var(--lumo-font-size-m);
|
|
14
|
-
font-family: var(--lumo-font-family);
|
|
15
|
-
-webkit-font-smoothing: antialiased;
|
|
16
|
-
-moz-osx-font-smoothing: grayscale;
|
|
17
|
-
-webkit-tap-highlight-color: transparent;
|
|
18
|
-
padding: var(--lumo-space-xs) 0;
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
:host::before {
|
|
22
|
-
/* Effective height of vaadin-radio-button */
|
|
23
|
-
height: var(--lumo-size-s);
|
|
24
|
-
box-sizing: border-box;
|
|
25
|
-
display: inline-flex;
|
|
26
|
-
align-items: center;
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
:host([theme~='vertical']) [part='group-field'] {
|
|
30
|
-
flex-direction: column;
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
:host([disabled]) [part='label'] {
|
|
34
|
-
color: var(--lumo-disabled-text-color);
|
|
35
|
-
-webkit-text-fill-color: var(--lumo-disabled-text-color);
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
:host([focused]:not([readonly])) [part='label'] {
|
|
39
|
-
color: var(--lumo-primary-text-color);
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
:host(:hover:not([readonly]):not([focused])) [part='label'],
|
|
43
|
-
:host(:hover:not([readonly])) [part='helper-text'] {
|
|
44
|
-
color: var(--lumo-body-text-color);
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
/* Touch device adjustment */
|
|
48
|
-
@media (pointer: coarse) {
|
|
49
|
-
:host(:hover:not([readonly]):not([focused])) [part='label'] {
|
|
50
|
-
color: var(--lumo-secondary-text-color);
|
|
51
|
-
}
|
|
52
|
-
}
|
|
53
|
-
`;
|
|
54
|
-
|
|
55
|
-
registerStyles('vaadin-radio-group', [requiredField, helper, radioGroup], { moduleId: 'lumo-radio-group' });
|
/package/src/{vaadin-radio-button-styles.d.ts → styles/vaadin-radio-button-base-styles.d.ts}
RENAMED
|
File without changes
|
|
File without changes
|