@vaadin/radio-group 24.2.0-alpha8 → 24.2.0-beta1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/radio-group",
-  "version": "24.2.0-alpha8",
+  "version": "24.2.0-beta1",
   "publishConfig": {
     "access": "public"
   },
@@ -38,21 +38,21 @@
   ],
   "dependencies": {
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/a11y-base": "24.2.0-alpha8",
-    "@vaadin/component-base": "24.2.0-alpha8",
-    "@vaadin/field-base": "24.2.0-alpha8",
-    "@vaadin/vaadin-lumo-styles": "24.2.0-alpha8",
-    "@vaadin/vaadin-material-styles": "24.2.0-alpha8",
-    "@vaadin/vaadin-themable-mixin": "24.2.0-alpha8"
+    "@vaadin/a11y-base": "24.2.0-beta1",
+    "@vaadin/component-base": "24.2.0-beta1",
+    "@vaadin/field-base": "24.2.0-beta1",
+    "@vaadin/vaadin-lumo-styles": "24.2.0-beta1",
+    "@vaadin/vaadin-material-styles": "24.2.0-beta1",
+    "@vaadin/vaadin-themable-mixin": "24.2.0-beta1"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/testing-helpers": "^0.4.3",
+    "@vaadin/testing-helpers": "^0.5.0",
     "sinon": "^13.0.2"
   },
   "web-types": [
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "2c024e8fd462d178430418f76a61f498fb549998"
+  "gitHead": "67c8eef57d1c59e7476e29adaf003cf4548878f2"
 }

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

@@ -16,8 +16,15 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix
  */
 export type RadioButtonCheckedChangedEvent = CustomEvent<{ value: boolean }>;
 
+/**
+ * Fired when the `dirty` property changes.
+ */
+export type RadioButtonDirtyChangedEvent = CustomEvent<{ value: boolean }>;
+
 export interface RadioButtonCustomEventMap {
   'checked-changed': RadioButtonCheckedChangedEvent;
+
+  'dirty-changed': RadioButtonDirtyChangedEvent;
 }
 
 export interface RadioButtonEventMap extends HTMLElementEventMap, RadioButtonCustomEventMap {}
@@ -56,6 +63,7 @@ export interface RadioButtonEventMap extends HTMLElementEventMap, RadioButtonCus
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
  *
  * @fires {CustomEvent} checked-changed - Fired when the `checked` property changes.
+ * @fires {CustomEvent} dirty-changed - Fired when the `dirty` property changes.
  */
 declare class RadioButton extends LabelMixin(
   CheckedMixin(DelegateFocusMixin(ActiveMixin(ElementMixin(ThemableMixin(ControllerMixin(HTMLElement)))))),

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';
@@ -48,7 +49,9 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
  *
  * @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
@@ -186,6 +189,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-alpha8",
+  "version": "24.2.0-beta1",
   "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-alpha8",
+  "version": "24.2.0-beta1",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {