@vaadin/radio-group 23.2.0-dev.8a7678b70 → 23.3.0-alpha1

package/README.md

@@ -2,7 +2,7 @@
 
 A web component that allows the user to choose one item from a group of choices.
 
-[Documentation + Live Demo ↗](https://vaadin.com/docs/latest/ds/components/radio-button)
+[Documentation + Live Demo ↗](https://vaadin.com/docs/latest/components/radio-button)
 
 ```html
 <vaadin-radio-group label="Travel class">
@@ -12,7 +12,7 @@ A web component that allows the user to choose one item from a group of choices.
 </vaadin-radio-group>
 ```
 
-[<img src="https://raw.githubusercontent.com/vaadin/web-components/master/packages/radio-group/screenshot.png" width="370" alt="Screenshot of vaadin-radio-group">](https://vaadin.com/docs/latest/ds/components/radio-button)
+[<img src="https://raw.githubusercontent.com/vaadin/web-components/master/packages/radio-group/screenshot.png" width="370" alt="Screenshot of vaadin-radio-group">](https://vaadin.com/docs/latest/components/radio-button)
 
 ## Installation
 
@@ -30,7 +30,7 @@ import '@vaadin/radio-group';
 
 ## Themes
 
-Vaadin components come with two built-in [themes](https://vaadin.com/docs/latest/ds/customization/using-themes), Lumo and Material.
+Vaadin components come with two built-in [themes](https://vaadin.com/docs/latest/styling), Lumo and Material.
 The [main entrypoint](https://github.com/vaadin/web-components/blob/master/packages/radio-group/vaadin-radio-group.js) of the package uses the Lumo theme.
 
 To use the Material theme, import the component from the `theme/material` folder:
@@ -53,7 +53,7 @@ import '@vaadin/radio-group/src/vaadin-radio-group.js';
 
 ## Contributing
 
-Read the [contributing guide](https://vaadin.com/docs/latest/guide/contributing/overview) to learn about our development process, how to propose bugfixes and improvements, and how to test your changes to Vaadin components.
+Read the [contributing guide](https://vaadin.com/docs/latest/contributing/overview) to learn about our development process, how to propose bugfixes and improvements, and how to test your changes to Vaadin components.
 
 ## License
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/radio-group",
-  "version": "23.2.0-dev.8a7678b70",
+  "version": "23.3.0-alpha1",
   "publishConfig": {
     "access": "public"
   },
@@ -23,7 +23,9 @@
     "src",
     "theme",
     "vaadin-*.d.ts",
-    "vaadin-*.js"
+    "vaadin-*.js",
+    "web-types.json",
+    "web-types.lit.json"
   ],
   "keywords": [
     "Vaadin",
@@ -36,16 +38,20 @@
   ],
   "dependencies": {
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/component-base": "23.2.0-dev.8a7678b70",
-    "@vaadin/field-base": "23.2.0-dev.8a7678b70",
-    "@vaadin/vaadin-lumo-styles": "23.2.0-dev.8a7678b70",
-    "@vaadin/vaadin-material-styles": "23.2.0-dev.8a7678b70",
-    "@vaadin/vaadin-themable-mixin": "23.2.0-dev.8a7678b70"
+    "@vaadin/component-base": "23.3.0-alpha1",
+    "@vaadin/field-base": "23.3.0-alpha1",
+    "@vaadin/vaadin-lumo-styles": "23.3.0-alpha1",
+    "@vaadin/vaadin-material-styles": "23.3.0-alpha1",
+    "@vaadin/vaadin-themable-mixin": "23.3.0-alpha1"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
     "@vaadin/testing-helpers": "^0.3.2",
     "sinon": "^13.0.2"
   },
-  "gitHead": "85b403f96d8282f262322b56c0ff4289f843d02a"
+  "web-types": [
+    "web-types.json",
+    "web-types.lit.json"
+  ],
+  "gitHead": "beabc527d4b1274eb798ff701d406fed45cfe638"
 }

package/src/vaadin-radio-button.d.ts

@@ -53,7 +53,7 @@ export interface RadioButtonEventMap extends HTMLElementEventMap, RadioButtonCus
  * `checked`    | Set when the radio button is checked. | `:host`
  * `has-label`  | Set when the radio button has a label. | `:host`
  *
- * See [Styling Components](https://vaadin.com/docs/latest/ds/customization/styling-components) documentation.
+ * See [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.
  *
  * @fires {CustomEvent} checked-changed - Fired when the `checked` property changes.
  */
@@ -68,13 +68,13 @@ declare class RadioButton extends LabelMixin(
   addEventListener<K extends keyof RadioButtonEventMap>(
     type: K,
     listener: (this: RadioButton, ev: RadioButtonEventMap[K]) => void,
-    options?: boolean | AddEventListenerOptions,
+    options?: AddEventListenerOptions | boolean,
   ): void;
 
   removeEventListener<K extends keyof RadioButtonEventMap>(
     type: K,
     listener: (this: RadioButton, ev: RadioButtonEventMap[K]) => void,
-    options?: boolean | EventListenerOptions,
+    options?: EventListenerOptions | boolean,
   ): void;
 }
 

package/src/vaadin-radio-button.js

@@ -46,7 +46,7 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix
  * `checked`    | Set when the radio button is checked. | `:host`
  * `has-label`  | Set when the radio button has a label. | `:host`
  *
- * See [Styling Components](https://vaadin.com/docs/latest/ds/customization/styling-components) documentation.
+ * See [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.
  *
  * @fires {CustomEvent} checked-changed - Fired when the `checked` property changes.
  *

package/src/vaadin-radio-group.d.ts

@@ -20,10 +20,17 @@ export type RadioGroupInvalidChangedEvent = CustomEvent<{ value: boolean }>;
  */
 export type RadioGroupValueChangedEvent = CustomEvent<{ value: string }>;
 
+/**
+ * Fired whenever the field is validated.
+ */
+export type RadioGroupValidatedEvent = CustomEvent<{ valid: boolean }>;
+
 export interface RadioGroupCustomEventMap {
   'invalid-changed': RadioGroupInvalidChangedEvent;
 
   'value-changed': RadioGroupValueChangedEvent;
+
+  validated: RadioGroupValidatedEvent;
 }
 
 export interface RadioGroupEventMap extends HTMLElementEventMap, RadioGroupCustomEventMap {}
@@ -64,10 +71,11 @@ export interface RadioGroupEventMap extends HTMLElementEventMap, RadioGroupCusto
  * `has-helper`        | Set when the element has helper text      | :host
  * `has-error-message` | Set when the element has an error message | :host
  *
- * See [Styling Components](https://vaadin.com/docs/latest/ds/customization/styling-components) documentation.
+ * See [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.
  *
  * @fires {CustomEvent} invalid-changed - Fired when the `invalid` property changes.
  * @fires {CustomEvent} value-changed - Fired when the `value` property changes.
+ * @fires {CustomEvent} validated - Fired whenever the field is validated.
  */
 declare class RadioGroup extends FieldMixin(
   FocusMixin(DisabledMixin(KeyboardMixin(ElementMixin(ThemableMixin(HTMLElement))))),
@@ -88,13 +96,13 @@ declare class RadioGroup extends FieldMixin(
   addEventListener<K extends keyof RadioGroupEventMap>(
     type: K,
     listener: (this: RadioGroup, ev: RadioGroupEventMap[K]) => void,
-    options?: boolean | AddEventListenerOptions,
+    options?: AddEventListenerOptions | boolean,
   ): void;
 
   removeEventListener<K extends keyof RadioGroupEventMap>(
     type: K,
     listener: (this: RadioGroup, ev: RadioGroupEventMap[K]) => void,
-    options?: boolean | EventListenerOptions,
+    options?: EventListenerOptions | boolean,
   ): void;
 }
 

package/src/vaadin-radio-group.js

@@ -9,6 +9,7 @@ import { DisabledMixin } from '@vaadin/component-base/src/disabled-mixin.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { FocusMixin } from '@vaadin/component-base/src/focus-mixin.js';
 import { KeyboardMixin } from '@vaadin/component-base/src/keyboard-mixin.js';
+import { TooltipController } from '@vaadin/component-base/src/tooltip-controller.js';
 import { generateUniqueId } from '@vaadin/component-base/src/unique-id-utils.js';
 import { FieldMixin } from '@vaadin/field-base/src/field-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
@@ -50,10 +51,11 @@ import { RadioButton } from './vaadin-radio-button.js';
  * `has-helper`        | Set when the element has helper text      | :host
  * `has-error-message` | Set when the element has an error message | :host
  *
- * See [Styling Components](https://vaadin.com/docs/latest/ds/customization/styling-components) documentation.
+ * See [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.
  *
  * @fires {CustomEvent} invalid-changed - Fired when the `invalid` property changes.
  * @fires {CustomEvent} value-changed - Fired when the `value` property changes.
+ * @fires {CustomEvent} validated - Fired whenever the field is validated.
  *
  * @extends HTMLElement
  * @mixes ThemableMixin
@@ -115,6 +117,8 @@ class RadioGroup extends FieldMixin(
           <slot name="error-message"></slot>
         </div>
       </div>
+
+      <slot name="tooltip"></slot>
     `;
   }
 
@@ -128,6 +132,7 @@ class RadioGroup extends FieldMixin(
       value: {
         type: String,
         notify: true,
+        value: '',
         observer: '__valueChanged',
       },
 
@@ -183,6 +188,9 @@ class RadioGroup extends FieldMixin(
       // Unregisters the removed radio buttons.
       this.__filterRadioButtons(removedNodes).forEach(this.__unregisterRadioButton);
     });
+
+    this._tooltipController = new TooltipController(this);
+    this.addController(this._tooltipController);
   }
 
   /**
@@ -247,6 +255,23 @@ class RadioGroup extends FieldMixin(
     }
   }
 
+  /**
+   * Override an observer from `FieldMixin`.
+   *
+   * @param {boolean} invalid
+   * @protected
+   * @override
+   */
+  _invalidChanged(invalid) {
+    super._invalidChanged(invalid);
+
+    if (invalid) {
+      this.setAttribute('aria-invalid', 'true');
+    } else {
+      this.removeAttribute('aria-invalid');
+    }
+  }
+
   /**
    * @param {number} index
    * @private
@@ -339,25 +364,28 @@ class RadioGroup extends FieldMixin(
    * @private
    */
   __valueChanged(newValue, oldValue) {
-    if (!oldValue && !newValue) {
+    if (oldValue === undefined && newValue === '') {
       return;
     }
 
-    if (oldValue && !newValue) {
+    if (newValue) {
+      const newSelectedRadioButton = this.__radioButtons.find((radioButton) => {
+        return radioButton.value === newValue;
+      });
+
+      if (newSelectedRadioButton) {
+        this.__selectRadioButton(newSelectedRadioButton);
+        this.toggleAttribute('has-value', true);
+      } else {
+        console.warn(`The radio button with the value "${newValue}" was not found.`);
+      }
+    } else {
       this.__selectRadioButton(null);
       this.removeAttribute('has-value');
-      return;
     }
 
-    const newSelectedRadioButton = this.__radioButtons.find((radioButton) => {
-      return radioButton.value === newValue;
-    });
-
-    if (newSelectedRadioButton) {
-      this.__selectRadioButton(newSelectedRadioButton);
-      this.toggleAttribute('has-value', true);
-    } else {
-      console.warn(`The radio button with the value "${newValue}" was not found.`);
+    if (oldValue !== undefined) {
+      this.validate();
     }
   }
 
@@ -451,8 +479,6 @@ class RadioGroup extends FieldMixin(
       button.checked = button === radioButton;
     });
 
-    this.validate();
-
     if (this.readonly) {
       this.__updateRadioButtonsDisabledProperty();
     }

package/web-types.json

@@ -0,0 +1,348 @@
+{
+  "$schema": "https://json.schemastore.org/web-types",
+  "name": "@vaadin/radio-group",
+  "version": "23.3.0-alpha1",
+  "description-markup": "markdown",
+  "contributions": {
+    "html": {
+      "elements": [
+        {
+          "name": "vaadin-radio-button",
+          "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 | Part name\n-------------|-------------|------------\n`active`     | Set when the radio button is pressed down, either with a pointer or the keyboard. | `:host`\n`disabled`   | Set when the radio button is disabled. | `:host`\n`focus-ring` | Set when the radio button is focused using the keyboard. | `:host`\n`focused`    | Set when the radio button is focused. | `:host`\n`checked`    | Set when the radio button is checked. | `:host`\n`has-label`  | Set when the radio button has a label. | `:host`\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.",
+          "attributes": [
+            {
+              "name": "disabled",
+              "description": "If true, the user cannot interact with this element.",
+              "value": {
+                "type": [
+                  "boolean",
+                  "null",
+                  "undefined"
+                ]
+              }
+            },
+            {
+              "name": "value",
+              "description": "The value of the field.",
+              "value": {
+                "type": [
+                  "string",
+                  "null",
+                  "undefined"
+                ]
+              }
+            },
+            {
+              "name": "checked",
+              "description": "True if the element is checked.",
+              "value": {
+                "type": [
+                  "boolean"
+                ]
+              }
+            },
+            {
+              "name": "label",
+              "description": "The label text for the input node.\nWhen no light dom defined via [slot=label], this value will be used.",
+              "value": {
+                "type": [
+                  "string",
+                  "null",
+                  "undefined"
+                ]
+              }
+            },
+            {
+              "name": "name",
+              "description": "The name of the radio button.",
+              "value": {
+                "type": [
+                  "string"
+                ]
+              }
+            },
+            {
+              "name": "theme",
+              "description": "The theme variants to apply to the component.",
+              "value": {
+                "type": [
+                  "string",
+                  "null",
+                  "undefined"
+                ]
+              }
+            }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "disabled",
+                "description": "If true, the user cannot interact with this element.",
+                "value": {
+                  "type": [
+                    "boolean",
+                    "null",
+                    "undefined"
+                  ]
+                }
+              },
+              {
+                "name": "value",
+                "description": "The value of the field.",
+                "value": {
+                  "type": [
+                    "string",
+                    "null",
+                    "undefined"
+                  ]
+                }
+              },
+              {
+                "name": "checked",
+                "description": "True if the element is checked.",
+                "value": {
+                  "type": [
+                    "boolean"
+                  ]
+                }
+              },
+              {
+                "name": "label",
+                "description": "The label text for the input node.\nWhen no light dom defined via [slot=label], this value will be used.",
+                "value": {
+                  "type": [
+                    "string",
+                    "null",
+                    "undefined"
+                  ]
+                }
+              },
+              {
+                "name": "name",
+                "description": "The name of the radio button.",
+                "value": {
+                  "type": [
+                    "string"
+                  ]
+                }
+              }
+            ],
+            "events": [
+              {
+                "name": "value-changed",
+                "description": "Fired when the `value` property changes."
+              },
+              {
+                "name": "checked-changed",
+                "description": "Fired when the `checked` property changes."
+              }
+            ]
+          }
+        },
+        {
+          "name": "vaadin-radio-group",
+          "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                               | Part name\n--------------------|-------------------------------------------|------------\n`disabled`          | Set when the element is disabled          | :host\n`readonly`          | Set when the element is readonly          | :host\n`invalid`           | Set when the element is invalid           | :host\n`focused`           | Set when the element is focused           | :host\n`has-label`         | Set when the element has a label          | :host\n`has-value`         | Set when the element has a value          | :host\n`has-helper`        | Set when the element has helper text      | :host\n`has-error-message` | Set when the element has an error message | :host\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.",
+          "attributes": [
+            {
+              "name": "disabled",
+              "description": "If true, the user cannot interact with this element.",
+              "value": {
+                "type": [
+                  "boolean",
+                  "null",
+                  "undefined"
+                ]
+              }
+            },
+            {
+              "name": "label",
+              "description": "The label text for the input node.\nWhen no light dom defined via [slot=label], this value will be used.",
+              "value": {
+                "type": [
+                  "string",
+                  "null",
+                  "undefined"
+                ]
+              }
+            },
+            {
+              "name": "invalid",
+              "description": "Set to true when the field is invalid.",
+              "value": {
+                "type": [
+                  "boolean",
+                  "null",
+                  "undefined"
+                ]
+              }
+            },
+            {
+              "name": "required",
+              "description": "Specifies that the user must fill in a value.",
+              "value": {
+                "type": [
+                  "boolean",
+                  "null",
+                  "undefined"
+                ]
+              }
+            },
+            {
+              "name": "error-message",
+              "description": "Error to show when the field is invalid.",
+              "value": {
+                "type": [
+                  "string",
+                  "null",
+                  "undefined"
+                ]
+              }
+            },
+            {
+              "name": "helper-text",
+              "description": "String used for the helper text.",
+              "value": {
+                "type": [
+                  "string",
+                  "null",
+                  "undefined"
+                ]
+              }
+            },
+            {
+              "name": "value",
+              "description": "The value of the radio group.",
+              "value": {
+                "type": [
+                  "string"
+                ]
+              }
+            },
+            {
+              "name": "readonly",
+              "description": "When present, the user cannot modify the value of the radio group.\nThe property works similarly to the `disabled` property.\nWhile the `disabled` property disables all radio buttons inside the group,\nthe `readonly` property disables only unchecked ones.",
+              "value": {
+                "type": [
+                  "boolean"
+                ]
+              }
+            },
+            {
+              "name": "theme",
+              "description": "The theme variants to apply to the component.",
+              "value": {
+                "type": [
+                  "string",
+                  "null",
+                  "undefined"
+                ]
+              }
+            }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "disabled",
+                "description": "If true, the user cannot interact with this element.",
+                "value": {
+                  "type": [
+                    "boolean",
+                    "null",
+                    "undefined"
+                  ]
+                }
+              },
+              {
+                "name": "label",
+                "description": "The label text for the input node.\nWhen no light dom defined via [slot=label], this value will be used.",
+                "value": {
+                  "type": [
+                    "string",
+                    "null",
+                    "undefined"
+                  ]
+                }
+              },
+              {
+                "name": "invalid",
+                "description": "Set to true when the field is invalid.",
+                "value": {
+                  "type": [
+                    "boolean",
+                    "null",
+                    "undefined"
+                  ]
+                }
+              },
+              {
+                "name": "required",
+                "description": "Specifies that the user must fill in a value.",
+                "value": {
+                  "type": [
+                    "boolean",
+                    "null",
+                    "undefined"
+                  ]
+                }
+              },
+              {
+                "name": "errorMessage",
+                "description": "Error to show when the field is invalid.",
+                "value": {
+                  "type": [
+                    "string",
+                    "null",
+                    "undefined"
+                  ]
+                }
+              },
+              {
+                "name": "helperText",
+                "description": "String used for the helper text.",
+                "value": {
+                  "type": [
+                    "string",
+                    "null",
+                    "undefined"
+                  ]
+                }
+              },
+              {
+                "name": "value",
+                "description": "The value of the radio group.",
+                "value": {
+                  "type": [
+                    "string"
+                  ]
+                }
+              },
+              {
+                "name": "readonly",
+                "description": "When present, the user cannot modify the value of the radio group.\nThe property works similarly to the `disabled` property.\nWhile the `disabled` property disables all radio buttons inside the group,\nthe `readonly` property disables only unchecked ones.",
+                "value": {
+                  "type": [
+                    "boolean"
+                  ]
+                }
+              }
+            ],
+            "events": [
+              {
+                "name": "validated",
+                "description": "Fired whenever the field is validated."
+              },
+              {
+                "name": "value-changed",
+                "description": "Fired when the `value` property changes."
+              },
+              {
+                "name": "invalid-changed",
+                "description": "Fired when the `invalid` property changes."
+              }
+            ]
+          }
+        }
+      ]
+    }
+  }
+}

package/web-types.lit.json

@@ -0,0 +1,160 @@
+{
+  "$schema": "https://json.schemastore.org/web-types",
+  "name": "@vaadin/radio-group",
+  "version": "23.3.0-alpha1",
+  "description-markup": "markdown",
+  "framework": "lit",
+  "framework-config": {
+    "enable-when": {
+      "node-packages": [
+        "lit"
+      ]
+    }
+  },
+  "contributions": {
+    "html": {
+      "elements": [
+        {
+          "name": "vaadin-radio-button",
+          "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 | Part name\n-------------|-------------|------------\n`active`     | Set when the radio button is pressed down, either with a pointer or the keyboard. | `:host`\n`disabled`   | Set when the radio button is disabled. | `:host`\n`focus-ring` | Set when the radio button is focused using the keyboard. | `:host`\n`focused`    | Set when the radio button is focused. | `:host`\n`checked`    | Set when the radio button is checked. | `:host`\n`has-label`  | Set when the radio button has a label. | `:host`\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.",
+          "extension": true,
+          "attributes": [
+            {
+              "name": "?disabled",
+              "description": "If true, the user cannot interact with this element.",
+              "value": {
+                "kind": "expression"
+              }
+            },
+            {
+              "name": "?checked",
+              "description": "True if the element is checked.",
+              "value": {
+                "kind": "expression"
+              }
+            },
+            {
+              "name": ".value",
+              "description": "The value of the field.",
+              "value": {
+                "kind": "expression"
+              }
+            },
+            {
+              "name": ".label",
+              "description": "The label text for the input node.\nWhen no light dom defined via [slot=label], this value will be used.",
+              "value": {
+                "kind": "expression"
+              }
+            },
+            {
+              "name": ".name",
+              "description": "The name of the radio button.",
+              "value": {
+                "kind": "expression"
+              }
+            },
+            {
+              "name": "@value-changed",
+              "description": "Fired when the `value` property changes.",
+              "value": {
+                "kind": "expression"
+              }
+            },
+            {
+              "name": "@checked-changed",
+              "description": "Fired when the `checked` property changes.",
+              "value": {
+                "kind": "expression"
+              }
+            }
+          ]
+        },
+        {
+          "name": "vaadin-radio-group",
+          "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                               | Part name\n--------------------|-------------------------------------------|------------\n`disabled`          | Set when the element is disabled          | :host\n`readonly`          | Set when the element is readonly          | :host\n`invalid`           | Set when the element is invalid           | :host\n`focused`           | Set when the element is focused           | :host\n`has-label`         | Set when the element has a label          | :host\n`has-value`         | Set when the element has a value          | :host\n`has-helper`        | Set when the element has helper text      | :host\n`has-error-message` | Set when the element has an error message | :host\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.",
+          "extension": true,
+          "attributes": [
+            {
+              "name": "?disabled",
+              "description": "If true, the user cannot interact with this element.",
+              "value": {
+                "kind": "expression"
+              }
+            },
+            {
+              "name": "?invalid",
+              "description": "Set to true when the field is invalid.",
+              "value": {
+                "kind": "expression"
+              }
+            },
+            {
+              "name": "?required",
+              "description": "Specifies that the user must fill in a value.",
+              "value": {
+                "kind": "expression"
+              }
+            },
+            {
+              "name": "?readonly",
+              "description": "When present, the user cannot modify the value of the radio group.\nThe property works similarly to the `disabled` property.\nWhile the `disabled` property disables all radio buttons inside the group,\nthe `readonly` property disables only unchecked ones.",
+              "value": {
+                "kind": "expression"
+              }
+            },
+            {
+              "name": ".label",
+              "description": "The label text for the input node.\nWhen no light dom defined via [slot=label], this value will be used.",
+              "value": {
+                "kind": "expression"
+              }
+            },
+            {
+              "name": ".errorMessage",
+              "description": "Error to show when the field is invalid.",
+              "value": {
+                "kind": "expression"
+              }
+            },
+            {
+              "name": ".helperText",
+              "description": "String used for the helper text.",
+              "value": {
+                "kind": "expression"
+              }
+            },
+            {
+              "name": ".value",
+              "description": "The value of the radio group.",
+              "value": {
+                "kind": "expression"
+              }
+            },
+            {
+              "name": "@validated",
+              "description": "Fired whenever the field is validated.",
+              "value": {
+                "kind": "expression"
+              }
+            },
+            {
+              "name": "@value-changed",
+              "description": "Fired when the `value` property changes.",
+              "value": {
+                "kind": "expression"
+              }
+            },
+            {
+              "name": "@invalid-changed",
+              "description": "Fired when the `invalid` property changes.",
+              "value": {
+                "kind": "expression"
+              }
+            }
+          ]
+        }
+      ]
+    }
+  }
+}