@vaadin/checkbox-group 24.2.0-alpha9 → 24.2.0-beta1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/checkbox-group",
-  "version": "24.2.0-alpha9",
+  "version": "24.2.0-beta1",
   "publishConfig": {
     "access": "public"
   },
@@ -36,13 +36,13 @@
   ],
   "dependencies": {
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/a11y-base": "24.2.0-alpha9",
-    "@vaadin/checkbox": "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-beta1",
+    "@vaadin/checkbox": "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",
@@ -53,5 +53,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "e9765733fea96542e379e02e6f42b07145893140"
+  "gitHead": "67c8eef57d1c59e7476e29adaf003cf4548878f2"
 }

package/src/vaadin-checkbox-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 { Checkbox } from '@vaadin/checkbox/src/vaadin-checkbox.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';
@@ -55,6 +56,7 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix
  * @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
@@ -162,6 +164,19 @@ class CheckboxGroup extends FieldMixin(FocusMixin(DisabledMixin(ElementMixin(The
     this.__unregisterCheckbox = this.__unregisterCheckbox.bind(this);
     this.__onCheckboxChange = this.__onCheckboxChange.bind(this);
     this.__onCheckboxCheckedChanged = this.__onCheckboxCheckedChanged.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.__checkboxes.map((checkbox) => checkbox.inputElement);
+        this._tooltipController.setAriaTarget(inputs);
+      } else {
+        // Tooltip element is no longer connected
+        this._tooltipController.setAriaTarget([]);
+      }
+    });
   }
 
   /**
@@ -191,10 +206,12 @@ class CheckboxGroup extends FieldMixin(FocusMixin(DisabledMixin(ElementMixin(The
       addedCheckboxes.forEach(this.__registerCheckbox);
       removedCheckboxes.forEach(this.__unregisterCheckbox);
 
+      const inputs = this.__checkboxes.map((checkbox) => checkbox.inputElement);
+      this._tooltipController.setAriaTarget(inputs);
+
       this.__warnOfCheckboxesWithoutValue(addedCheckboxes);
     });
 
-    this._tooltipController = new TooltipController(this);
     this.addController(this._tooltipController);
   }
 
@@ -389,6 +406,6 @@ class CheckboxGroup extends FieldMixin(FocusMixin(DisabledMixin(ElementMixin(The
   }
 }
 
-customElements.define(CheckboxGroup.is, CheckboxGroup);
+defineCustomElement(CheckboxGroup);
 
 export { CheckboxGroup };

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/checkbox-group",
-  "version": "24.2.0-alpha9",
+  "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/checkbox-group",
-  "version": "24.2.0-alpha9",
+  "version": "24.2.0-beta1",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {