@vaadin/radio-group 24.2.0-alpha9 → 24.2.0-beta2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/radio-group",
-  "version": "24.2.0-alpha9",
+  "version": "24.2.0-beta2",
   "publishConfig": {
     "access": "public"
   },
@@ -38,12 +38,12 @@
   ],
   "dependencies": {
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/a11y-base": "24.2.0-alpha9",
-    "@vaadin/component-base": "24.2.0-alpha9",
-    "@vaadin/field-base": "24.2.0-alpha9",
-    "@vaadin/vaadin-lumo-styles": "24.2.0-alpha9",
-    "@vaadin/vaadin-material-styles": "24.2.0-alpha9",
-    "@vaadin/vaadin-themable-mixin": "24.2.0-alpha9"
+    "@vaadin/a11y-base": "24.2.0-beta2",
+    "@vaadin/component-base": "24.2.0-beta2",
+    "@vaadin/field-base": "24.2.0-beta2",
+    "@vaadin/vaadin-lumo-styles": "24.2.0-beta2",
+    "@vaadin/vaadin-material-styles": "24.2.0-beta2",
+    "@vaadin/vaadin-themable-mixin": "24.2.0-beta2"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
@@ -54,5 +54,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "e9765733fea96542e379e02e6f42b07145893140"
+  "gitHead": "4b852f9a12d4dade7f0fb3c73b7212436cebf310"
 }

package/src/vaadin-radio-button.js

@@ -7,6 +7,7 @@ import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
 import { ActiveMixin } from '@vaadin/a11y-base/src/active-mixin.js';
 import { DelegateFocusMixin } from '@vaadin/a11y-base/src/delegate-focus-mixin.js';
 import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
+import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { CheckedMixin } from '@vaadin/field-base/src/checked-mixin.js';
 import { InputController } from '@vaadin/field-base/src/input-controller.js';
@@ -50,6 +51,7 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix
  * @fires {CustomEvent} checked-changed - Fired when the `checked` property changes.
  * @fires {CustomEvent} dirty-changed - Fired when the `dirty` property changes.
  *
+ * @customElement
  * @extends HTMLElement
  * @mixes ControllerMixin
  * @mixes ThemableMixin
@@ -119,6 +121,8 @@ class RadioButton extends LabelMixin(
           margin: 0;
           align-self: stretch;
           -webkit-appearance: none;
+          width: initial;
+          height: initial;
         }
 
         @media (forced-colors: active) {
@@ -187,6 +191,6 @@ class RadioButton extends LabelMixin(
   }
 }
 
-customElements.define(RadioButton.is, RadioButton);
+defineCustomElement(RadioButton);
 
 export { RadioButton };

package/src/vaadin-radio-group.js

@@ -7,6 +7,7 @@ import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
 import { DisabledMixin } from '@vaadin/a11y-base/src/disabled-mixin.js';
 import { FocusMixin } from '@vaadin/a11y-base/src/focus-mixin.js';
 import { KeyboardMixin } from '@vaadin/a11y-base/src/keyboard-mixin.js';
+import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { SlotObserver } from '@vaadin/component-base/src/slot-observer.js';
 import { TooltipController } from '@vaadin/component-base/src/tooltip-controller.js';
@@ -57,6 +58,7 @@ import { RadioButton } from './vaadin-radio-button.js';
  * @fires {CustomEvent} value-changed - Fired when the `value` property changes.
  * @fires {CustomEvent} validated - Fired whenever the field is validated.
  *
+ * @customElement
  * @extends HTMLElement
  * @mixes ThemableMixin
  * @mixes DisabledMixin
@@ -186,6 +188,19 @@ class RadioGroup extends FieldMixin(
     this.__unregisterRadioButton = this.__unregisterRadioButton.bind(this);
     this.__onRadioButtonChange = this.__onRadioButtonChange.bind(this);
     this.__onRadioButtonCheckedChange = this.__onRadioButtonCheckedChange.bind(this);
+
+    this._tooltipController = new TooltipController(this);
+    this._tooltipController.addEventListener('tooltip-changed', (event) => {
+      const tooltip = event.detail.node;
+      if (tooltip && tooltip.isConnected) {
+        // Tooltip element has been added to the DOM
+        const inputs = this.__radioButtons.map((radio) => radio.inputElement);
+        this._tooltipController.setAriaTarget(inputs);
+      } else {
+        // Tooltip element is no longer connected
+        this._tooltipController.setAriaTarget([]);
+      }
+    });
   }
 
   /**
@@ -235,9 +250,11 @@ class RadioGroup extends FieldMixin(
 
       // Unregisters the removed radio buttons.
       this.__filterRadioButtons(removedNodes).forEach(this.__unregisterRadioButton);
+
+      const inputs = this.__radioButtons.map((radio) => radio.inputElement);
+      this._tooltipController.setAriaTarget(inputs);
     });
 
-    this._tooltipController = new TooltipController(this);
     this.addController(this._tooltipController);
   }
 
@@ -532,6 +549,6 @@ class RadioGroup extends FieldMixin(
   }
 }
 
-customElements.define(RadioGroup.is, RadioGroup);
+defineCustomElement(RadioGroup);
 
 export { RadioGroup };

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/radio-group",
-  "version": "24.2.0-alpha9",
+  "version": "24.2.0-beta2",
   "description-markup": "markdown",
   "contributions": {
     "html": {

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/radio-group",
-  "version": "24.2.0-alpha9",
+  "version": "24.2.0-beta2",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {