@vaadin/radio-group 23.1.2 → 23.2.0-alpha3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/radio-group",
-  "version": "23.1.2",
+  "version": "23.2.0-alpha3",
   "publishConfig": {
     "access": "public"
   },
@@ -36,16 +36,16 @@
   ],
   "dependencies": {
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/component-base": "^23.1.2",
-    "@vaadin/field-base": "^23.1.2",
-    "@vaadin/vaadin-lumo-styles": "^23.1.2",
-    "@vaadin/vaadin-material-styles": "^23.1.2",
-    "@vaadin/vaadin-themable-mixin": "^23.1.2"
+    "@vaadin/component-base": "23.2.0-alpha3",
+    "@vaadin/field-base": "23.2.0-alpha3",
+    "@vaadin/vaadin-lumo-styles": "23.2.0-alpha3",
+    "@vaadin/vaadin-material-styles": "23.2.0-alpha3",
+    "@vaadin/vaadin-themable-mixin": "23.2.0-alpha3"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
     "@vaadin/testing-helpers": "^0.3.2",
     "sinon": "^13.0.2"
   },
-  "gitHead": "6fb205c6e9a761feadfb779dd5d7af96d3102e56"
+  "gitHead": "06e5875be93ca50da2846dafc65a8531010c0576"
 }

package/src/vaadin-radio-button.js

@@ -149,26 +149,25 @@ class RadioButton extends LabelMixin(
   }
 
   /** @protected */
-  connectedCallback() {
-    super.connectedCallback();
+  ready() {
+    super.ready();
 
-    if (!this._inputController) {
-      this._inputController = new InputController(this, (input) => {
+    this.addController(
+      new InputController(this, (input) => {
         this._setInputElement(input);
         this._setFocusElement(input);
         this.stateTarget = input;
         this.ariaTarget = input;
-      });
-      this.addController(this._inputController);
-      this.addController(new LabelledInputController(this.inputElement, this._labelController));
-      this.addController(
-        new SlotTargetController(
-          this.$.noop,
-          () => this._labelController.node,
-          () => this.__warnDeprecated(),
-        ),
-      );
-    }
+      }),
+    );
+    this.addController(new LabelledInputController(this.inputElement, this._labelController));
+    this.addController(
+      new SlotTargetController(
+        this.$.noop,
+        () => this._labelController.node,
+        () => this.__warnDeprecated(),
+      ),
+    );
   }
 
   /** @private */

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 {}
@@ -68,6 +75,7 @@ export interface RadioGroupEventMap extends HTMLElementEventMap, RadioGroupCusto
  *
  * @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))))),

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 { 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';
 import { RadioButton } from './vaadin-radio-button.js';
@@ -53,6 +54,7 @@ import { RadioButton } from './vaadin-radio-button.js';
  *
  * @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
@@ -172,9 +174,7 @@ class RadioGroup extends FieldMixin(
     // See https://github.com/vaadin/vaadin-web-components/issues/94
     this.setAttribute('role', 'radiogroup');
 
-    // Ensure every instance has unique id
-    const uniqueId = (RadioGroup._uniqueRadioGroupId = 1 + RadioGroup._uniqueRadioGroupId || 0);
-    this._fieldName = `${this.localName}-${uniqueId}`;
+    this._fieldName = `${this.localName}-${generateUniqueId()}`;
 
     this._observer = new FlattenedNodesObserver(this, ({ addedNodes, removedNodes }) => {
       // Registers the added radio buttons in the reverse order