@everymatrix/general-input 1.28.7 → 1.28.8

package/dist/components/checkbox-group-input2.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { t as translate, a as tooltipIconSvg } from './tooltipIcon.js';
-import { r as registerStyles, i, d as dedupingMixin, D as DelegateStateMixin, a as DisabledMixin, I as InputMixin, L as LabelMixin, b as DelegateFocusMixin, c as InputController, e as LabelledInputController, h as html, T as TooltipController, f as defineCustomElement$1, E as ElementMixin, g as ThemableMixin, P as PolymerElement, j as requiredField, k as helper, F as FieldMixin, l as FocusMixin, S as SlotObserver } from './field-mixin.js';
+import { r as registerStyles, i, d as dedupingMixin, D as DelegateStateMixin, a as DisabledMixin, I as InputMixin, b as isElementFocused, L as LabelMixin, c as DelegateFocusMixin, E as ElementMixin, T as ThemableMixin, C as ControllerMixin, P as PolymerElement, h as html, e as InputController, f as LabelledInputController, g as TooltipController, j as requiredField, k as helper, F as FieldMixin, l as FocusMixin, m as FlattenedNodesObserver } from './field-mixin.js';
 import { A as ActiveMixin } from './active-mixin.js';
 
 registerStyles(
@@ -36,13 +36,6 @@ registerStyles(
       background-color: var(--lumo-contrast-20pct);
       transition: transform 0.2s cubic-bezier(0.12, 0.32, 0.54, 2), background-color 0.15s;
       cursor: var(--lumo-clickable-cursor);
-      /* Default field border color */
-      --_input-border-color: var(--vaadin-input-field-border-color, var(--lumo-contrast-50pct));
-    }
-
-    :host([indeterminate]),
-    :host([checked]) {
-      --vaadin-input-field-border-color: transparent;
     }
 
     :host([indeterminate]) [part='checkbox'],
@@ -84,15 +77,13 @@ registerStyles(
 
     /* Focus ring */
     :host([focus-ring]) [part='checkbox'] {
-      box-shadow: 0 0 0 1px var(--lumo-base-color), 0 0 0 3px var(--lumo-primary-color-50pct),
-        inset 0 0 0 var(--_input-border-width, 0) var(--_input-border-color);
+      box-shadow: 0 0 0 1px var(--lumo-base-color), 0 0 0 3px var(--lumo-primary-color-50pct);
     }
 
     /* Disabled */
     :host([disabled]) {
       pointer-events: none;
       color: var(--lumo-disabled-text-color);
-      --vaadin-input-field-border-color: var(--lumo-contrast-20pct);
     }
 
     :host([disabled]) ::slotted(label) {
@@ -163,7 +154,7 @@ registerStyles(
 
 /**
  * @license
- * Copyright (c) 2021 - 2023 Vaadin Ltd.
+ * Copyright (c) 2021 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 
@@ -206,6 +197,12 @@ const CheckedMixin = dedupingMixin(
         const input = event.target;
 
         this._toggleChecked(input.checked);
+
+        // Clicking the checkbox or radio-button in Safari
+        // does not make it focused, so we do it manually.
+        if (!isElementFocused(input)) {
+          input.focus();
+        }
       }
 
       /** @protected */
@@ -217,226 +214,134 @@ const CheckedMixin = dedupingMixin(
 
 /**
  * @license
- * Copyright (c) 2017 - 2023 Vaadin Ltd.
+ * Copyright (c) 2021 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 
 /**
- * A mixin providing common checkbox functionality.
- *
- * @polymerMixin
- * @mixes ActiveMixin
- * @mixes CheckedMixin
- * @mixes DelegateFocusMixin
- * @mixes LabelMixin
+ * A controller to copy the content from a source slot to a target element.
  */
-const CheckboxMixin = (superclass) =>
-  class CheckboxMixinClass extends LabelMixin(CheckedMixin(DelegateFocusMixin(ActiveMixin(superclass)))) {
-    static get properties() {
-      return {
-        /**
-         * True if the checkbox is in the indeterminate state which means
-         * it is not possible to say whether it is checked or unchecked.
-         * The state is reset once the user switches the checkbox by hand.
-         *
-         * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#Indeterminate_state_checkboxes
-         *
-         * @type {boolean}
-         */
-        indeterminate: {
-          type: Boolean,
-          notify: true,
-          value: false,
-          reflectToAttribute: true,
-        },
-
-        /**
-         * The name of the checkbox.
-         *
-         * @type {string}
-         */
-        name: {
-          type: String,
-          value: '',
-        },
-
-        /**
-         * Indicates whether the element can be focused and where it participates in sequential keyboard navigation.
-         *
-         * @override
-         * @protected
-         */
-        tabindex: {
-          type: Number,
-          value: 0,
-          reflectToAttribute: true,
-        },
-      };
-    }
-
-    /** @override */
-    static get delegateProps() {
-      return [...super.delegateProps, 'indeterminate'];
-    }
-
-    /** @override */
-    static get delegateAttrs() {
-      return [...super.delegateAttrs, 'name'];
-    }
-
-    constructor() {
-      super();
-
-      this._setType('checkbox');
-
-      // Set the string "on" as the default value for the checkbox following the HTML specification:
-      // https://html.spec.whatwg.org/multipage/input.html#dom-input-value-default-on
-      this.value = 'on';
-    }
-
-    /** @protected */
-    ready() {
-      super.ready();
-
-      this.addController(
-        new InputController(this, (input) => {
-          this._setInputElement(input);
-          this._setFocusElement(input);
-          this.stateTarget = input;
-          this.ariaTarget = input;
-        }),
-      );
-      this.addController(new LabelledInputController(this.inputElement, this._labelController));
-    }
-
+class SlotTargetController {
+  constructor(sourceSlot, targetFactory, callback) {
     /**
-     * Override method inherited from `ActiveMixin` to prevent setting
-     * `active` attribute when clicking a link placed inside the label.
-     *
-     * @param {Event} event
-     * @return {boolean}
-     * @protected
-     * @override
+     * The source `<slot>` element to copy nodes from.
      */
-    _shouldSetActive(event) {
-      if (event.target.localName === 'a') {
-        return false;
-      }
-
-      return super._shouldSetActive(event);
-    }
+    this.sourceSlot = sourceSlot;
 
     /**
-     * Override method inherited from `CheckedMixin` to reset
-     * `indeterminate` state checkbox is toggled by the user.
-     *
-     * @param {boolean} checked
-     * @protected
-     * @override
+     * Function used to get a reference to slot target.
      */
-    _toggleChecked(checked) {
-      if (this.indeterminate) {
-        this.indeterminate = false;
-      }
+    this.targetFactory = targetFactory;
 
-      super._toggleChecked(checked);
+    /**
+     * Function called after copying nodes to target.
+     */
+    this.copyCallback = callback;
+
+    if (sourceSlot) {
+      sourceSlot.addEventListener('slotchange', () => {
+        // Copy in progress, ignore this event.
+        if (this.__copying) {
+          this.__copying = false;
+        } else {
+          this.__checkAndCopyNodesToSlotTarget();
+        }
+      });
     }
-  };
-
-/**
- * @license
- * Copyright (c) 2017 - 2023 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-
-const checkboxStyles = i`
-  :host {
-    display: inline-block;
   }
 
-  :host([hidden]) {
-    display: none !important;
-  }
+  hostConnected() {
+    this.__sourceSlotObserver = new MutationObserver(() => this.__checkAndCopyNodesToSlotTarget());
 
-  :host([disabled]) {
-    -webkit-tap-highlight-color: transparent;
+    // Ensure the content is up to date when host is connected
+    // to handle e.g. mutating text content while disconnected.
+    // Note, `hostConnected()` is called twice if the controller
+    // is initialized in `ready()` when using `ControllerMixin`.
+    if (!this.__copying) {
+      this.__checkAndCopyNodesToSlotTarget();
+    }
   }
 
-  .vaadin-checkbox-container {
-    display: grid;
-    grid-template-columns: auto 1fr;
-    align-items: baseline;
-  }
+  /**
+   * Copies every node from the source slot to the target element
+   * once the source slot' content is changed.
+   *
+   * @private
+   */
+  __checkAndCopyNodesToSlotTarget() {
+    this.__sourceSlotObserver.disconnect();
 
-  [part='checkbox'],
-  ::slotted(input),
-  ::slotted(label) {
-    grid-row: 1;
-  }
+    // Ensure slot target element is up to date.
+    const slotTarget = this.targetFactory();
 
-  [part='checkbox'],
-  ::slotted(input) {
-    grid-column: 1;
-  }
+    if (!slotTarget) {
+      return;
+    }
 
-  [part='checkbox'] {
-    width: var(--vaadin-checkbox-size, 1em);
-    height: var(--vaadin-checkbox-size, 1em);
-    --_input-border-width: var(--vaadin-input-field-border-width, 0);
-    --_input-border-color: var(--vaadin-input-field-border-color, transparent);
-    box-shadow: inset 0 0 0 var(--_input-border-width, 0) var(--_input-border-color);
-  }
+    // Remove any existing clones from the slot target
+    if (this.__slotTargetClones) {
+      this.__slotTargetClones.forEach((node) => {
+        if (node.parentElement === slotTarget) {
+          slotTarget.removeChild(node);
+        }
+      });
+      delete this.__slotTargetClones;
+    }
 
-  [part='checkbox']::before {
-    display: block;
-    content: '\\202F';
-    line-height: var(--vaadin-checkbox-size, 1em);
-    contain: paint;
-  }
+    // Exclude whitespace text nodes
+    const nodes = this.sourceSlot
+      .assignedNodes({ flatten: true })
+      .filter((node) => !(node.nodeType === Node.TEXT_NODE && node.textContent.trim() === ''));
 
-  /* visually hidden */
-  ::slotted(input) {
-    opacity: 0;
-    cursor: inherit;
-    margin: 0;
-    align-self: stretch;
-    -webkit-appearance: none;
-    width: initial;
-    height: initial;
-  }
+    if (nodes.length > 0) {
+      slotTarget.innerHTML = '';
 
-  @media (forced-colors: active) {
-    [part='checkbox'] {
-      outline: 1px solid;
-      outline-offset: -1px;
-    }
+      // Ignore next slotchange
+      this.__copying = true;
 
-    :host([disabled]) [part='checkbox'],
-    :host([disabled]) [part='checkbox']::after {
-      outline-color: GrayText;
+      this.__copyNodesToSlotTarget(nodes, slotTarget);
     }
+  }
 
-    :host(:is([checked], [indeterminate])) [part='checkbox']::after {
-      outline: 1px solid;
-      outline-offset: -1px;
-      border-radius: inherit;
-    }
+  /**
+   * Copies the nodes to the target element.
+   *
+   * @param {!Array<!Node>} nodes
+   * @param {HTMLElement} slotTarget
+   * @private
+   */
+  __copyNodesToSlotTarget(nodes, slotTarget) {
+    this.__slotTargetClones = this.__slotTargetClones || [];
+
+    nodes.forEach((node) => {
+      // Clone the nodes and append the clones to the target
+      const clone = node.cloneNode(true);
+      this.__slotTargetClones.push(clone);
+
+      slotTarget.appendChild(clone);
+
+      // Observe all changes to the source node to have the clones updated
+      this.__sourceSlotObserver.observe(node, {
+        attributes: true,
+        childList: true,
+        subtree: true,
+        characterData: true,
+      });
+    });
 
-    :host([focused]) [part='checkbox'],
-    :host([focused]) [part='checkbox']::after {
-      outline-width: 2px;
+    // Run callback e.g. to show a deprecation warning
+    if (typeof this.copyCallback === 'function') {
+      this.copyCallback(nodes);
     }
   }
-`;
+}
 
 /**
  * @license
- * Copyright (c) 2017 - 2023 Vaadin Ltd.
+ * Copyright (c) 2017 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 
-registerStyles('vaadin-checkbox', checkboxStyles, { moduleId: 'vaadin-checkbox-styles' });
-
 /**
  * `<vaadin-checkbox>` is an input field representing a binary choice.
  *
@@ -449,59 +354,225 @@ registerStyles('vaadin-checkbox', checkboxStyles, { moduleId: 'vaadin-checkbox-s
  * The following shadow DOM parts are available for styling:
  *
  * Part name   | Description
- * ------------|-------------
- * `checkbox`  | The element representing a stylable custom checkbox.
+ * ------------|----------------
+ * `checkbox`  | The wrapper element that contains slotted <input type="checkbox">.
  *
  * The following state attributes are available for styling:
  *
- * Attribute       | Description
- * ----------------|-------------
- * `active`        | Set when the checkbox is activated with mouse, touch or the keyboard.
- * `checked`       | Set when the checkbox is checked.
- * `disabled`      | Set when the checkbox is disabled.
- * `focus-ring`    | Set when the checkbox is focused using the keyboard.
- * `focused`       | Set when the checkbox is focused.
- * `indeterminate` | Set when the checkbox is in the indeterminate state.
- * `has-label`     | Set when the checkbox has a label.
+ * Attribute       | Description | Part name
+ * ----------------|-------------|--------------
+ * `active`        | Set when the checkbox is pressed down, either with mouse, touch or the keyboard. | `:host`
+ * `disabled`      | Set when the checkbox is disabled. | `:host`
+ * `focus-ring`    | Set when the checkbox is focused using the keyboard. | `:host`
+ * `focused`       | Set when the checkbox is focused. | `:host`
+ * `indeterminate` | Set when the checkbox is in the indeterminate state. | `:host`
+ * `checked`       | Set when the checkbox is checked. | `:host`
+ * `has-label`     | Set when the checkbox has a label. | `:host`
  *
- * See [Styling Components](https://vaadin.com/docs/latest/styling/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.
  * @fires {CustomEvent} indeterminate-changed - Fired when the `indeterminate` property changes.
  *
- * @customElement
  * @extends HTMLElement
- * @mixes CheckboxMixin
+ * @mixes ControllerMixin
  * @mixes ThemableMixin
  * @mixes ElementMixin
+ * @mixes ActiveMixin
+ * @mixes DelegateFocusMixin
+ * @mixes CheckedMixin
+ * @mixes LabelMixin
  */
-class Checkbox extends CheckboxMixin(ElementMixin(ThemableMixin(PolymerElement))) {
+class Checkbox extends LabelMixin(
+  CheckedMixin(DelegateFocusMixin(ActiveMixin(ElementMixin(ThemableMixin(ControllerMixin(PolymerElement)))))),
+) {
   static get is() {
     return 'vaadin-checkbox';
   }
 
   static get template() {
     return html`
+      <style>
+        :host {
+          display: inline-block;
+        }
+
+        :host([hidden]) {
+          display: none !important;
+        }
+
+        :host([disabled]) {
+          -webkit-tap-highlight-color: transparent;
+        }
+
+        .vaadin-checkbox-container {
+          display: grid;
+          grid-template-columns: auto 1fr;
+          align-items: baseline;
+        }
+
+        [part='checkbox'],
+        ::slotted(input),
+        ::slotted(label) {
+          grid-row: 1;
+        }
+
+        [part='checkbox'],
+        ::slotted(input) {
+          grid-column: 1;
+        }
+
+        [part='checkbox'] {
+          width: var(--vaadin-checkbox-size, 1em);
+          height: var(--vaadin-checkbox-size, 1em);
+        }
+
+        [part='checkbox']::before {
+          display: block;
+          content: '\\202F';
+          line-height: var(--vaadin-checkbox-size, 1em);
+          contain: paint;
+        }
+
+        /* visually hidden */
+        ::slotted(input) {
+          opacity: 0;
+          cursor: inherit;
+          margin: 0;
+          align-self: stretch;
+          -webkit-appearance: none;
+        }
+      </style>
       <div class="vaadin-checkbox-container">
-        <div part="checkbox" aria-hidden="true"></div>
+        <div part="checkbox"></div>
         <slot name="input"></slot>
         <slot name="label"></slot>
+
+        <div style="display: none !important">
+          <slot id="noop"></slot>
+        </div>
       </div>
       <slot name="tooltip"></slot>
     `;
   }
 
+  static get properties() {
+    return {
+      /**
+       * True if the checkbox is in the indeterminate state which means
+       * it is not possible to say whether it is checked or unchecked.
+       * The state is reset once the user switches the checkbox by hand.
+       *
+       * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#Indeterminate_state_checkboxes
+       *
+       * @type {boolean}
+       */
+      indeterminate: {
+        type: Boolean,
+        notify: true,
+        value: false,
+        reflectToAttribute: true,
+      },
+
+      /**
+       * The name of the checkbox.
+       *
+       * @type {string}
+       */
+      name: {
+        type: String,
+        value: '',
+      },
+    };
+  }
+
+  /** @override */
+  static get delegateProps() {
+    return [...super.delegateProps, 'indeterminate'];
+  }
+
+  /** @override */
+  static get delegateAttrs() {
+    return [...super.delegateAttrs, 'name'];
+  }
+
+  constructor() {
+    super();
+
+    this._setType('checkbox');
+
+    // Set the string "on" as the default value for the checkbox following the HTML specification:
+    // https://html.spec.whatwg.org/multipage/input.html#dom-input-value-default-on
+    this.value = 'on';
+  }
+
   /** @protected */
   ready() {
     super.ready();
 
+    this.addController(
+      new InputController(this, (input) => {
+        this._setInputElement(input);
+        this._setFocusElement(input);
+        this.stateTarget = input;
+        this.ariaTarget = input;
+      }),
+    );
+    this.addController(new LabelledInputController(this.inputElement, this._labelController));
+    this.addController(
+      new SlotTargetController(
+        this.$.noop,
+        () => this._labelController.node,
+        () => this.__warnDeprecated(),
+      ),
+    );
     this._tooltipController = new TooltipController(this);
-    this._tooltipController.setAriaTarget(this.inputElement);
     this.addController(this._tooltipController);
   }
+
+  /** @private */
+  __warnDeprecated() {
+    console.warn(
+      `WARNING: Since Vaadin 22, placing the label as a direct child of a <vaadin-checkbox> is deprecated.
+Please use <label slot="label"> wrapper or the label property instead.`,
+    );
+  }
+
+  /**
+   * Extends the method from `ActiveMixin` in order to
+   * prevent setting the `active` attribute when interacting with a link inside the label.
+   *
+   * @param {Event} event
+   * @return {boolean}
+   * @protected
+   * @override
+   */
+  _shouldSetActive(event) {
+    if (event.target.localName === 'a') {
+      return false;
+    }
+
+    return super._shouldSetActive(event);
+  }
+
+  /**
+   * Extends the method from `CheckedMixin` in order to
+   * reset the indeterminate state once the user switches the checkbox.
+   *
+   * @param {boolean} checked
+   * @protected
+   * @override
+   */
+  _toggleChecked(checked) {
+    if (this.indeterminate) {
+      this.indeterminate = false;
+    }
+
+    super._toggleChecked(checked);
+  }
 }
 
-defineCustomElement$1(Checkbox);
+customElements.define(Checkbox.is, Checkbox);
 
 const checkboxGroup = i`
   :host {
@@ -523,6 +594,7 @@ const checkboxGroup = i`
   }
 
   :host([theme~='vertical']) [part='group-field'] {
+    display: flex;
     flex-direction: column;
   }
 
@@ -554,7 +626,7 @@ registerStyles('vaadin-checkbox-group', [requiredField, helper, checkboxGroup],
 
 /**
  * @license
- * Copyright (c) 2018 - 2023 Vaadin Ltd.
+ * Copyright (c) 2018 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 
@@ -562,11 +634,10 @@ registerStyles('vaadin-checkbox-group', [requiredField, helper, checkboxGroup],
  * `<vaadin-checkbox-group>` is a web component that allows the user to choose several items from a group of binary choices.
  *
  * ```html
- * <vaadin-checkbox-group label="Export data">
- *   <vaadin-checkbox value="0" label="Order ID"></vaadin-checkbox>
- *   <vaadin-checkbox value="1" label="Product name"></vaadin-checkbox>
- *   <vaadin-checkbox value="2" label="Customer"></vaadin-checkbox>
- *   <vaadin-checkbox value="3" label="Status"></vaadin-checkbox>
+ * <vaadin-checkbox-group label="Preferred language of contact:">
+ *   <vaadin-checkbox value="en" label="English"></vaadin-checkbox>
+ *   <vaadin-checkbox value="fr" label="Français"></vaadin-checkbox>
+ *   <vaadin-checkbox value="de" label="Deutsch"></vaadin-checkbox>
  * </vaadin-checkbox-group>
  * ```
  *
@@ -594,13 +665,12 @@ registerStyles('vaadin-checkbox-group', [requiredField, helper, checkboxGroup],
  * `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/styling/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.
  *
- * @customElement
  * @extends HTMLElement
  * @mixes ThemableMixin
  * @mixes DisabledMixin
@@ -636,11 +706,6 @@ class CheckboxGroup extends FieldMixin(FocusMixin(DisabledMixin(ElementMixin(The
           width: 100%;
         }
 
-        [part='group-field'] {
-          display: flex;
-          flex-wrap: wrap;
-        }
-
         :host(:not([has-label])) [part='label'] {
           display: none;
         }
@@ -694,29 +759,6 @@ class CheckboxGroup extends FieldMixin(FocusMixin(DisabledMixin(ElementMixin(The
     this.__registerCheckbox = this.__registerCheckbox.bind(this);
     this.__unregisterCheckbox = this.__unregisterCheckbox.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([]);
-      }
-    });
-  }
-
-  /**
-   * A collection of the checkboxes.
-   *
-   * @return {!Array<!Checkbox>}
-   * @private
-   */
-  get __checkboxes() {
-    return this.__filterCheckboxes([...this.children]);
   }
 
   /** @protected */
@@ -728,20 +770,17 @@ class CheckboxGroup extends FieldMixin(FocusMixin(DisabledMixin(ElementMixin(The
     // See https://github.com/vaadin/vaadin-web-components/issues/94
     this.setAttribute('role', 'group');
 
-    const slot = this.shadowRoot.querySelector('slot:not([name])');
-    this._observer = new SlotObserver(slot, ({ addedNodes, removedNodes }) => {
+    this._observer = new FlattenedNodesObserver(this, ({ addedNodes, removedNodes }) => {
       const addedCheckboxes = this.__filterCheckboxes(addedNodes);
       const removedCheckboxes = this.__filterCheckboxes(removedNodes);
 
       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);
   }
 
@@ -765,6 +804,16 @@ class CheckboxGroup extends FieldMixin(FocusMixin(DisabledMixin(ElementMixin(The
     return nodes.filter((child) => child instanceof Checkbox);
   }
 
+  /**
+   * A collection of the checkboxes.
+   *
+   * @return {!Array<!Checkbox>}
+   * @private
+   */
+  get __checkboxes() {
+    return this.__filterCheckboxes([...this.children]);
+  }
+
   /**
    * @param {!Array<!Checkbox>} checkboxes
    * @private
@@ -921,15 +970,13 @@ class CheckboxGroup extends FieldMixin(FocusMixin(DisabledMixin(ElementMixin(The
   _setFocused(focused) {
     super._setFocused(focused);
 
-    // Do not validate when focusout is caused by document
-    // losing focus, which happens on browser tab switch.
-    if (!focused && document.hasFocus()) {
+    if (!focused) {
       this.validate();
     }
   }
 }
 
-defineCustomElement$1(CheckboxGroup);
+customElements.define(CheckboxGroup.is, CheckboxGroup);
 
 const checkboxGroupInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}vaadin-checkbox-group{margin-top:5px;margin-left:40px}.checkboxgroup{font-family:\"Roboto\";font-style:normal;font-size:15px}.checkboxgroup__wrapper{position:relative}.checkboxgroup__wrapper--flex{display:flex;gap:5px;align-content:flex-start}.checkboxgroup__wrapper--relative{position:relative;display:inline}.checkboxgroup__input{vertical-align:baseline}.checkboxgroup__input[indeterminate]::part(checkbox)::after,.checkboxgroup__input[indeterminate]::part(checkbox),.checkboxgroup__input[checked]::part(checkbox){background-color:var(--emfe-w-login-color-primary, var(--emfe-w-color-primary, #D0046C))}.checkboxgroup__label{font-style:inherit;font-family:inherit;font-weight:400;font-size:16px;color:var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000));line-height:1.5;padding-left:10px;vertical-align:baseline}.checkboxgroup__label-text{font-size:16px}.checkboxgroup__label a{color:var(--emfe-w-login-color-primary, var(--emfe-w-color-primary, #D0046C))}.checkboxgroup__error-message{position:absolute;top:calc(100% + 5px);left:0;color:var(--emfe-w-color-error, var(--emfe-w-color-red, #ed0909))}.checkboxgroup__tooltip-icon{width:16px;height:auto}.checkboxgroup__tooltip{position:absolute;top:0;right:0;background-color:var(--emfe-w-color-white, #FFFFFF);border:1px solid var(--emfe-w-color-gray-100, #E6E6E6);color:var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000));padding:10px;border-radius:5px;opacity:0;transition:opacity 0.3s ease-in-out;z-index:10}.checkboxgroup__tooltip.visible{opacity:1}.checkbox__input[indeterminate]::part(checkbox),.checkbox__input[checked]::part(checkbox){background-color:var(--emfe-w-login-color-primary, var(--emfe-w-color-primary, #D0046C))}";