@everymatrix/general-input 1.22.0 → 1.22.1

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

@@ -1,9 +1,302 @@
 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, 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 { o, i, u as usageStatistics, d as dedupingMixin, D as DelegateStateMixin, a as DisabledMixin, I as InputMixin, b as isElementFocused, L as LabelMixin, c as DelegateFocusMixin, e as InputController, f as LabelledInputController, h as html, P as PolymerElement, r as requiredField, g as helper, F as FieldMixin, j as FocusMixin } from './field-mixin.js';
 import { A as ActiveMixin } from './active-mixin.js';
 
-registerStyles(
+/**
+ * @license
+ * Copyright (c) 2017 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+/**
+ * @polymerMixin
+ */
+const ThemePropertyMixin$1 = (superClass) =>
+  class VaadinThemePropertyMixin extends superClass {
+    static get properties() {
+      return {
+        /**
+         * Helper property with theme attribute value facilitating propagation
+         * in shadow DOM.
+         *
+         * Enables the component implementation to propagate the `theme`
+         * attribute value to the sub-components in Shadow DOM by binding
+         * the sub-component's "theme" attribute to the `theme` property of
+         * the host.
+         *
+         * **NOTE:** Extending the mixin only provides the property for binding,
+         * and does not make the propagation alone.
+         *
+         * See [Styling Components: Sub-components](https://vaadin.com/docs/latest/styling/styling-components/#sub-components).
+         * page for more information.
+         *
+         * @protected
+         */
+        _theme: {
+          type: String,
+          readOnly: true,
+        },
+      };
+    }
+
+    static get observedAttributes() {
+      return [...super.observedAttributes, 'theme'];
+    }
+
+    /** @protected */
+    attributeChangedCallback(name, oldValue, newValue) {
+      super.attributeChangedCallback(name, oldValue, newValue);
+
+      if (name === 'theme') {
+        this._set_theme(newValue);
+      }
+    }
+  };
+
+/**
+ * @license
+ * Copyright (c) 2017 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+
+/**
+ * @typedef {Object} Theme
+ * @property {string} themeFor
+ * @property {CSSResult[]} styles
+ * @property {string | string[]} [include]
+ * @property {string} [moduleId]
+ *
+ * @typedef {CSSResult[] | CSSResult} CSSResultGroup
+ */
+
+/**
+ * @type {Theme[]}
+ */
+const themeRegistry$1 = [];
+
+/**
+ * Check if the custom element type has themes applied.
+ * @param {Function} elementClass
+ * @returns {boolean}
+ */
+function classHasThemes$1(elementClass) {
+  return elementClass && Object.prototype.hasOwnProperty.call(elementClass, '__themes');
+}
+
+/**
+ * Check if the custom element type has themes applied.
+ * @param {string} tagName
+ * @returns {boolean}
+ */
+function hasThemes$1(tagName) {
+  return classHasThemes$1(customElements.get(tagName));
+}
+
+/**
+ * Flattens the styles into a single array of styles.
+ * @param {CSSResultGroup} styles
+ * @param {CSSResult[]} result
+ * @returns {CSSResult[]}
+ */
+function flattenStyles$1(styles = []) {
+  return [styles].flat(Infinity).filter((style) => {
+    if (style instanceof o) {
+      return true;
+    }
+    console.warn('An item in styles is not of type CSSResult. Use `unsafeCSS` or `css`.');
+    return false;
+  });
+}
+
+/**
+ * Registers CSS styles for a component type. Make sure to register the styles before
+ * the first instance of a component of the type is attached to DOM.
+ *
+ * @param {string} themeFor The local/tag name of the component type to register the styles for
+ * @param {CSSResultGroup} styles The CSS style rules to be registered for the component type
+ * matching themeFor and included in the local scope of each component instance
+ * @param {{moduleId?: string, include?: string | string[]}} options Additional options
+ * @return {void}
+ */
+function registerStyles$1(themeFor, styles, options = {}) {
+  if (themeFor) {
+    if (hasThemes$1(themeFor)) {
+      console.warn(`The custom element definition for "${themeFor}"
+      was finalized before a style module was registered.
+      Make sure to add component specific style modules before
+      importing the corresponding custom element.`);
+    }
+  }
+
+  styles = flattenStyles$1(styles);
+
+  if (window.Vaadin && window.Vaadin.styleModules) {
+    window.Vaadin.styleModules.registerStyles(themeFor, styles, options);
+  } else {
+    themeRegistry$1.push({
+      themeFor,
+      styles,
+      include: options.include,
+      moduleId: options.moduleId,
+    });
+  }
+}
+
+/**
+ * Returns all registered themes. By default the themeRegistry is returned as is.
+ * In case the style-modules adapter is imported, the themes are obtained from there instead
+ * @returns {Theme[]}
+ */
+function getAllThemes$1() {
+  if (window.Vaadin && window.Vaadin.styleModules) {
+    return window.Vaadin.styleModules.getAllThemes();
+  }
+  return themeRegistry$1;
+}
+
+/**
+ * Returns true if the themeFor string matches the tag name
+ * @param {string} themeFor
+ * @param {string} tagName
+ * @returns {boolean}
+ */
+function matchesThemeFor$1(themeFor, tagName) {
+  return (themeFor || '').split(' ').some((themeForToken) => {
+    return new RegExp(`^${themeForToken.split('*').join('.*')}$`, 'u').test(tagName);
+  });
+}
+
+/**
+ * Maps the moduleName to an include priority number which is used for
+ * determining the order in which styles are applied.
+ * @param {string} moduleName
+ * @returns {number}
+ */
+function getIncludePriority$1(moduleName = '') {
+  let includePriority = 0;
+  if (moduleName.startsWith('lumo-') || moduleName.startsWith('material-')) {
+    includePriority = 1;
+  } else if (moduleName.startsWith('vaadin-')) {
+    includePriority = 2;
+  }
+  return includePriority;
+}
+
+/**
+ * Gets an array of CSSResults matching the include property of the theme.
+ * @param {Theme} theme
+ * @returns {CSSResult[]}
+ */
+function getIncludedStyles$1(theme) {
+  const includedStyles = [];
+  if (theme.include) {
+    [].concat(theme.include).forEach((includeModuleId) => {
+      const includedTheme = getAllThemes$1().find((s) => s.moduleId === includeModuleId);
+      if (includedTheme) {
+        includedStyles.push(...getIncludedStyles$1(includedTheme), ...includedTheme.styles);
+      } else {
+        console.warn(`Included moduleId ${includeModuleId} not found in style registry`);
+      }
+    }, theme.styles);
+  }
+  return includedStyles;
+}
+
+/**
+ * Includes the styles to the template.
+ * @param {CSSResult[]} styles
+ * @param {HTMLTemplateElement} template
+ */
+function addStylesToTemplate$1(styles, template) {
+  const styleEl = document.createElement('style');
+  styleEl.innerHTML = styles.map((style) => style.cssText).join('\n');
+  template.content.appendChild(styleEl);
+}
+
+/**
+ * Returns an array of themes that should be used for styling a component matching
+ * the tag name. The array is sorted by the include order.
+ * @param {string} tagName
+ * @returns {Theme[]}
+ */
+function getThemes$1(tagName) {
+  const defaultModuleName = `${tagName}-default-theme`;
+
+  const themes = getAllThemes$1()
+    // Filter by matching themeFor properties
+    .filter((theme) => theme.moduleId !== defaultModuleName && matchesThemeFor$1(theme.themeFor, tagName))
+    .map((theme) => ({
+      ...theme,
+      // Prepend styles from included themes
+      styles: [...getIncludedStyles$1(theme), ...theme.styles],
+      // Map moduleId to includePriority
+      includePriority: getIncludePriority$1(theme.moduleId),
+    }))
+    // Sort by includePriority
+    .sort((themeA, themeB) => themeB.includePriority - themeA.includePriority);
+
+  if (themes.length > 0) {
+    return themes;
+  }
+  // No theme modules found, return the default module if it exists
+  return getAllThemes$1().filter((theme) => theme.moduleId === defaultModuleName);
+}
+
+/**
+ * @polymerMixin
+ * @mixes ThemePropertyMixin
+ */
+const ThemableMixin$1 = (superClass) =>
+  class VaadinThemableMixin extends ThemePropertyMixin$1(superClass) {
+    /**
+     * Covers PolymerElement based component styling
+     * @protected
+     */
+    static finalize() {
+      super.finalize();
+
+      // Make sure not to run the logic intended for PolymerElement when LitElement is used.
+      if (this.elementStyles) {
+        return;
+      }
+
+      const template = this.prototype._template;
+      if (!template || classHasThemes$1(this)) {
+        return;
+      }
+
+      addStylesToTemplate$1(this.getStylesForThis(), template);
+    }
+
+    /**
+     * Covers LitElement based component styling
+     *
+     * @protected
+     */
+    static finalizeStyles(styles) {
+      // The "styles" object originates from the "static get styles()" function of
+      // a LitElement based component. The theme styles are added after it
+      // so that they can override the component styles.
+      const themeStyles = this.getStylesForThis();
+      return styles ? [...super.finalizeStyles(styles), ...themeStyles] : themeStyles;
+    }
+
+    /**
+     * Get styles for the component type
+     *
+     * @private
+     */
+    static getStylesForThis() {
+      const parent = Object.getPrototypeOf(this.prototype);
+      const inheritedThemes = (parent ? parent.constructor.__themes : []) || [];
+      this.__themes = [...inheritedThemes, ...getThemes$1(this.is)];
+      const themeStyles = this.__themes.flatMap((theme) => theme.styles);
+      // Remove duplicates
+      return themeStyles.filter((style, index) => index === themeStyles.lastIndexOf(style));
+    }
+  };
+
+registerStyles$1(
   'vaadin-checkbox',
   i`
     :host {
@@ -36,6 +329,13 @@ 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'],
@@ -77,13 +377,15 @@ 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);
+      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);
     }
 
     /* 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) {
@@ -154,481 +456,2627 @@ registerStyles(
 
 /**
  * @license
- * Copyright (c) 2021 - 2022 Vaadin Ltd.
+ * Copyright (c) 2021 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
+function defineCustomElement$2(CustomElement) {
+  const defined = customElements.get(CustomElement.is);
+  if (!defined) {
+    customElements.define(CustomElement.is, CustomElement);
+  } else {
+    const definedVersion = defined.version;
+    if (definedVersion && CustomElement.version && definedVersion === CustomElement.version) {
+      // Just loading the same thing again
+      console.warn(`The component ${CustomElement.is} has been loaded twice`);
+    } else {
+      console.error(
+        `Tried to define ${CustomElement.is} version ${CustomElement.version} when version ${defined.version} is already in use. Something will probably break.`,
+      );
+    }
+  }
+}
+
+/**
+ * @license
+ * Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
+ * This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+ * The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+ * The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+ * Code distributed by Google as part of the polymer project is also
+ * subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+ */
 
 /**
- * A mixin to manage the checked state.
+ * Async interface wrapper around `requestIdleCallback`.  Falls back to
+ * `setTimeout` on browsers that do not support `requestIdleCallback`.
+ *
+ * @namespace
+ * @summary Async interface wrapper around `requestIdleCallback`.
+ */
+const idlePeriod$1 = {
+  /**
+   * Enqueues a function called at `requestIdleCallback` timing.
+   *
+   * @memberof idlePeriod
+   * @param {function(!IdleDeadline):void} fn Callback to run
+   * @return {number} Handle used for canceling task
+   */
+  run(fn) {
+    return window.requestIdleCallback ? window.requestIdleCallback(fn) : window.setTimeout(fn, 16);
+  },
+  /**
+   * Cancels a previously enqueued `idlePeriod` callback.
+   *
+   * @memberof idlePeriod
+   * @param {number} handle Handle returned from `run` of callback to cancel
+   * @return {void}
+   */
+  cancel(handle) {
+    if (window.cancelIdleCallback) {
+      window.cancelIdleCallback(handle);
+    } else {
+      window.clearTimeout(handle);
+    }
+  },
+};
+
+/**
+@license
+Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+*/
+
+const debouncerQueue$1 = new Set();
+
+/**
+ * @summary Collapse multiple callbacks into one invocation after a timer.
+ */
+class Debouncer$1 {
+  /**
+   * Creates a debouncer if no debouncer is passed as a parameter
+   * or it cancels an active debouncer otherwise. The following
+   * example shows how a debouncer can be called multiple times within a
+   * microtask and "debounced" such that the provided callback function is
+   * called once. Add this method to a custom element:
+   *
+   * ```js
+   * import {microTask} from '@vaadin/component-base/src/async.js';
+   * import {Debouncer} from '@vaadin/component-base/src/debounce.js';
+   * // ...
+   *
+   * _debounceWork() {
+   *   this._debounceJob = Debouncer.debounce(this._debounceJob,
+   *       microTask, () => this._doWork());
+   * }
+   * ```
+   *
+   * If the `_debounceWork` method is called multiple times within the same
+   * microtask, the `_doWork` function will be called only once at the next
+   * microtask checkpoint.
+   *
+   * Note: In testing it is often convenient to avoid asynchrony. To accomplish
+   * this with a debouncer, you can use `enqueueDebouncer` and
+   * `flush`. For example, extend the above example by adding
+   * `enqueueDebouncer(this._debounceJob)` at the end of the
+   * `_debounceWork` method. Then in a test, call `flush` to ensure
+   * the debouncer has completed.
+   *
+   * @param {Debouncer?} debouncer Debouncer object.
+   * @param {!AsyncInterface} asyncModule Object with Async interface
+   * @param {function()} callback Callback to run.
+   * @return {!Debouncer} Returns a debouncer object.
+   */
+  static debounce(debouncer, asyncModule, callback) {
+    if (debouncer instanceof Debouncer$1) {
+      // Cancel the async callback, but leave in debouncerQueue if it was
+      // enqueued, to maintain 1.x flush order
+      debouncer._cancelAsync();
+    } else {
+      debouncer = new Debouncer$1();
+    }
+    debouncer.setConfig(asyncModule, callback);
+    return debouncer;
+  }
+
+  constructor() {
+    this._asyncModule = null;
+    this._callback = null;
+    this._timer = null;
+  }
+
+  /**
+   * Sets the scheduler; that is, a module with the Async interface,
+   * a callback and optional arguments to be passed to the run function
+   * from the async module.
+   *
+   * @param {!AsyncInterface} asyncModule Object with Async interface.
+   * @param {function()} callback Callback to run.
+   * @return {void}
+   */
+  setConfig(asyncModule, callback) {
+    this._asyncModule = asyncModule;
+    this._callback = callback;
+    this._timer = this._asyncModule.run(() => {
+      this._timer = null;
+      debouncerQueue$1.delete(this);
+      this._callback();
+    });
+  }
+
+  /**
+   * Cancels an active debouncer and returns a reference to itself.
+   *
+   * @return {void}
+   */
+  cancel() {
+    if (this.isActive()) {
+      this._cancelAsync();
+      // Canceling a debouncer removes its spot from the flush queue,
+      // so if a debouncer is manually canceled and re-debounced, it
+      // will reset its flush order (this is a very minor difference from 1.x)
+      // Re-debouncing via the `debounce` API retains the 1.x FIFO flush order
+      debouncerQueue$1.delete(this);
+    }
+  }
+
+  /**
+   * Cancels a debouncer's async callback.
+   *
+   * @return {void}
+   */
+  _cancelAsync() {
+    if (this.isActive()) {
+      this._asyncModule.cancel(/** @type {number} */ (this._timer));
+      this._timer = null;
+    }
+  }
+
+  /**
+   * Flushes an active debouncer and returns a reference to itself.
+   *
+   * @return {void}
+   */
+  flush() {
+    if (this.isActive()) {
+      this.cancel();
+      this._callback();
+    }
+  }
+
+  /**
+   * Returns true if the debouncer is active.
+   *
+   * @return {boolean} True if active.
+   */
+  isActive() {
+    return this._timer != null;
+  }
+}
+
+/**
+ * Adds a `Debouncer` to a list of globally flushable tasks.
+ *
+ * @param {!Debouncer} debouncer Debouncer to enqueue
+ * @return {void}
+ */
+function enqueueDebouncer$1(debouncer) {
+  debouncerQueue$1.add(debouncer);
+}
+
+/**
+ * @license
+ * Copyright (c) 2021 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+
+/**
+ * Array of Vaadin custom element classes that have been subscribed to the dir changes.
+ */
+const directionSubscribers$1 = [];
+
+function alignDirs$1(element, documentDir, elementDir = element.getAttribute('dir')) {
+  if (documentDir) {
+    element.setAttribute('dir', documentDir);
+  } else if (elementDir != null) {
+    element.removeAttribute('dir');
+  }
+}
+
+function getDocumentDir$1() {
+  return document.documentElement.getAttribute('dir');
+}
+
+function directionUpdater$1() {
+  const documentDir = getDocumentDir$1();
+  directionSubscribers$1.forEach((element) => {
+    alignDirs$1(element, documentDir);
+  });
+}
+
+const directionObserver$1 = new MutationObserver(directionUpdater$1);
+directionObserver$1.observe(document.documentElement, { attributes: true, attributeFilter: ['dir'] });
+
+/**
+ * A mixin to handle `dir` attribute based on the one set on the `<html>` element.
  *
  * @polymerMixin
- * @mixes DelegateStateMixin
- * @mixes DisabledMixin
- * @mixes InputMixin
  */
-const CheckedMixin = dedupingMixin(
-  (superclass) =>
-    class CheckedMixinClass extends DelegateStateMixin(DisabledMixin(InputMixin(superclass))) {
-      static get properties() {
-        return {
-          /**
-           * True if the element is checked.
-           * @type {boolean}
-           */
-          checked: {
-            type: Boolean,
-            value: false,
-            notify: true,
-            reflectToAttribute: true,
+const DirMixin$1 = (superClass) =>
+  class VaadinDirMixin extends superClass {
+    static get properties() {
+      return {
+        /**
+         * @protected
+         */
+        dir: {
+          type: String,
+          value: '',
+          reflectToAttribute: true,
+          converter: {
+            fromAttribute: (attr) => {
+              return !attr ? '' : attr;
+            },
+            toAttribute: (prop) => {
+              return prop === '' ? null : prop;
+            },
           },
-        };
+        },
+      };
+    }
+
+    /**
+     * @return {boolean}
+     * @protected
+     */
+    get __isRTL() {
+      return this.getAttribute('dir') === 'rtl';
+    }
+
+    /** @protected */
+    connectedCallback() {
+      super.connectedCallback();
+
+      if (!this.hasAttribute('dir') || this.__restoreSubscription) {
+        this.__subscribe();
+        alignDirs$1(this, getDocumentDir$1(), null);
       }
+    }
 
-      static get delegateProps() {
-        return [...super.delegateProps, 'checked'];
+    /** @protected */
+    attributeChangedCallback(name, oldValue, newValue) {
+      super.attributeChangedCallback(name, oldValue, newValue);
+      if (name !== 'dir') {
+        return;
       }
 
-      /**
-       * @param {Event} event
-       * @protected
-       * @override
-       */
-      _onChange(event) {
-        const input = event.target;
+      const documentDir = getDocumentDir$1();
 
-        this._toggleChecked(input.checked);
+      // New value equals to the document direction and the element is not subscribed to the changes
+      const newValueEqlDocDir = newValue === documentDir && directionSubscribers$1.indexOf(this) === -1;
+      // Value was emptied and the element is not subscribed to the changes
+      const newValueEmptied = !newValue && oldValue && directionSubscribers$1.indexOf(this) === -1;
+      // New value is different and the old equals to document direction and the element is not subscribed to the changes
+      const newDiffValue = newValue !== documentDir && oldValue === documentDir;
 
-        // Clicking the checkbox or radio-button in Safari
-        // does not make it focused, so we do it manually.
-        if (!isElementFocused(input)) {
-          input.focus();
-        }
+      if (newValueEqlDocDir || newValueEmptied) {
+        this.__subscribe();
+        alignDirs$1(this, documentDir, newValue);
+      } else if (newDiffValue) {
+        this.__unsubscribe();
       }
+    }
 
-      /** @protected */
-      _toggleChecked(checked) {
-        this.checked = checked;
+    /** @protected */
+    disconnectedCallback() {
+      super.disconnectedCallback();
+      this.__restoreSubscription = directionSubscribers$1.includes(this);
+      this.__unsubscribe();
+    }
+
+    /** @protected */
+    _valueToNodeAttribute(node, value, attribute) {
+      // Override default Polymer attribute reflection to match native behavior of HTMLElement.dir property
+      // If the property contains an empty string then it should not create an empty attribute
+      if (attribute === 'dir' && value === '' && !node.hasAttribute('dir')) {
+        return;
       }
-    },
-);
+      super._valueToNodeAttribute(node, value, attribute);
+    }
+
+    /** @protected */
+    _attributeToProperty(attribute, value, type) {
+      // Override default Polymer attribute reflection to match native behavior of HTMLElement.dir property
+      // If the attribute is removed, then the dir property should contain an empty string instead of null
+      if (attribute === 'dir' && !value) {
+        this.dir = '';
+      } else {
+        super._attributeToProperty(attribute, value, type);
+      }
+    }
+
+    /** @private */
+    __subscribe() {
+      if (!directionSubscribers$1.includes(this)) {
+        directionSubscribers$1.push(this);
+      }
+    }
+
+    /** @private */
+    __unsubscribe() {
+      if (directionSubscribers$1.includes(this)) {
+        directionSubscribers$1.splice(directionSubscribers$1.indexOf(this), 1);
+      }
+    }
+  };
 
 /**
  * @license
- * Copyright (c) 2021 - 2022 Vaadin Ltd.
+ * Copyright (c) 2021 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 
+if (!window.Vaadin) {
+  window.Vaadin = {};
+}
+
 /**
- * A controller to copy the content from a source slot to a target element.
+ * Array of Vaadin custom element classes that have been finalized.
+ */
+if (!window.Vaadin.registrations) {
+  window.Vaadin.registrations = [];
+}
+
+if (!window.Vaadin.developmentModeCallback) {
+  window.Vaadin.developmentModeCallback = {};
+}
+
+window.Vaadin.developmentModeCallback['vaadin-usage-statistics'] = function () {
+  usageStatistics();
+};
+
+let statsJob$1;
+
+const registered$1 = new Set();
+
+/**
+ * @polymerMixin
+ * @mixes DirMixin
+ */
+const ElementMixin$1 = (superClass) =>
+  class VaadinElementMixin extends DirMixin$1(superClass) {
+    static get version() {
+      return '24.2.3';
+    }
+
+    /** @protected */
+    static finalize() {
+      super.finalize();
+
+      const { is } = this;
+
+      // Registers a class prototype for telemetry purposes.
+      if (is && !registered$1.has(is)) {
+        window.Vaadin.registrations.push(this);
+        registered$1.add(is);
+
+        if (window.Vaadin.developmentModeCallback) {
+          statsJob$1 = Debouncer$1.debounce(statsJob$1, idlePeriod$1, () => {
+            window.Vaadin.developmentModeCallback['vaadin-usage-statistics']();
+          });
+          enqueueDebouncer$1(statsJob$1);
+        }
+      }
+    }
+
+    constructor() {
+      super();
+
+      if (document.doctype === null) {
+        console.warn(
+          'Vaadin components require the "standards mode" declaration. Please add <!DOCTYPE html> to the HTML document.',
+        );
+      }
+    }
+  };
+
+/**
+ * @license
+ * Copyright (c) 2021 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+
+/**
+ * Returns true if the given node is an empty text node, false otherwise.
+ *
+ * @param {Node} node
+ * @return {boolean}
+ */
+function isEmptyTextNode$1(node) {
+  return node.nodeType === Node.TEXT_NODE && node.textContent.trim() === '';
+}
+
+/**
+ * @license
+ * Copyright (c) 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+
+/**
+ * A helper for observing slot changes.
+ */
+class SlotObserver$1 {
+  constructor(slot, callback) {
+    /** @type HTMLSlotElement */
+    this.slot = slot;
+
+    /** @type Function */
+    this.callback = callback;
+
+    /** @type {Node[]} */
+    this._storedNodes = [];
+
+    this._connected = false;
+    this._scheduled = false;
+
+    this._boundSchedule = () => {
+      this._schedule();
+    };
+
+    this.connect();
+    this._schedule();
+  }
+
+  /**
+   * Activates an observer. This method is automatically called when
+   * a `SlotObserver` is created. It should only be called to  re-activate
+   * an observer that has been deactivated via the `disconnect` method.
+   */
+  connect() {
+    this.slot.addEventListener('slotchange', this._boundSchedule);
+    this._connected = true;
+  }
+
+  /**
+   * Deactivates the observer. After calling this method the observer callback
+   * will not be called when changes to slotted nodes occur. The `connect` method
+   * may be subsequently called to reactivate the observer.
+   */
+  disconnect() {
+    this.slot.removeEventListener('slotchange', this._boundSchedule);
+    this._connected = false;
+  }
+
+  /** @private */
+  _schedule() {
+    if (!this._scheduled) {
+      this._scheduled = true;
+
+      queueMicrotask(() => {
+        this.flush();
+      });
+    }
+  }
+
+  /**
+   * Run the observer callback synchronously.
+   */
+  flush() {
+    if (!this._connected) {
+      return;
+    }
+
+    this._scheduled = false;
+
+    this._processNodes();
+  }
+
+  /** @private */
+  _processNodes() {
+    const currentNodes = this.slot.assignedNodes({ flatten: true });
+
+    let addedNodes = [];
+    const removedNodes = [];
+    const movedNodes = [];
+
+    if (currentNodes.length) {
+      addedNodes = currentNodes.filter((node) => !this._storedNodes.includes(node));
+    }
+
+    if (this._storedNodes.length) {
+      this._storedNodes.forEach((node, index) => {
+        const idx = currentNodes.indexOf(node);
+        if (idx === -1) {
+          removedNodes.push(node);
+        } else if (idx !== index) {
+          movedNodes.push(node);
+        }
+      });
+    }
+
+    if (addedNodes.length || removedNodes.length || movedNodes.length) {
+      this.callback({ addedNodes, movedNodes, removedNodes });
+    }
+
+    this._storedNodes = currentNodes;
+  }
+}
+
+/**
+ * @license
+ * Copyright (c) 2021 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+
+let uniqueId$1 = 0;
+
+/**
+ * Returns a unique integer id.
+ *
+ * @return {number}
+ */
+function generateUniqueId$1() {
+  // eslint-disable-next-line no-plusplus
+  return uniqueId$1++;
+}
+
+/**
+ * @license
+ * Copyright (c) 2021 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+
+/**
+ * A controller for providing content to slot element and observing changes.
+ */
+class SlotController$1 extends EventTarget {
+  /**
+   * Ensure that every instance has unique ID.
+   *
+   * @param {HTMLElement} host
+   * @param {string} slotName
+   * @return {string}
+   * @protected
+   */
+  static generateId(host, slotName) {
+    const prefix = slotName || 'default';
+    return `${prefix}-${host.localName}-${generateUniqueId$1()}`;
+  }
+
+  constructor(host, slotName, tagName, config = {}) {
+    super();
+
+    const { initializer, multiple, observe, useUniqueId } = config;
+
+    this.host = host;
+    this.slotName = slotName;
+    this.tagName = tagName;
+    this.observe = typeof observe === 'boolean' ? observe : true;
+    this.multiple = typeof multiple === 'boolean' ? multiple : false;
+    this.slotInitializer = initializer;
+
+    if (multiple) {
+      this.nodes = [];
+    }
+
+    // Only generate the default ID if requested by the controller.
+    if (useUniqueId) {
+      this.defaultId = this.constructor.generateId(host, slotName);
+    }
+  }
+
+  hostConnected() {
+    if (!this.initialized) {
+      if (this.multiple) {
+        this.initMultiple();
+      } else {
+        this.initSingle();
+      }
+
+      if (this.observe) {
+        this.observeSlot();
+      }
+
+      this.initialized = true;
+    }
+  }
+
+  /** @protected */
+  initSingle() {
+    let node = this.getSlotChild();
+
+    if (!node) {
+      node = this.attachDefaultNode();
+      this.initNode(node);
+    } else {
+      this.node = node;
+      this.initAddedNode(node);
+    }
+  }
+
+  /** @protected */
+  initMultiple() {
+    const children = this.getSlotChildren();
+
+    if (children.length === 0) {
+      const defaultNode = this.attachDefaultNode();
+      if (defaultNode) {
+        this.nodes = [defaultNode];
+        this.initNode(defaultNode);
+      }
+    } else {
+      this.nodes = children;
+      children.forEach((node) => {
+        this.initAddedNode(node);
+      });
+    }
+  }
+
+  /**
+   * Create and attach default node using the provided tag name, if any.
+   * @return {Node | undefined}
+   * @protected
+   */
+  attachDefaultNode() {
+    const { host, slotName, tagName } = this;
+
+    // Check if the node was created previously and if so, reuse it.
+    let node = this.defaultNode;
+
+    // Tag name is optional, sometimes we don't init default content.
+    if (!node && tagName) {
+      node = document.createElement(tagName);
+      if (node instanceof Element) {
+        if (slotName !== '') {
+          node.setAttribute('slot', slotName);
+        }
+        this.node = node;
+        this.defaultNode = node;
+      }
+    }
+
+    if (node) {
+      host.appendChild(node);
+    }
+
+    return node;
+  }
+
+  /**
+   * Return the list of nodes matching the slot managed by the controller.
+   * @return {Node}
+   */
+  getSlotChildren() {
+    const { slotName } = this;
+    return Array.from(this.host.childNodes).filter((node) => {
+      // Either an element (any slot) or a text node (only un-named slot).
+      return (
+        (node.nodeType === Node.ELEMENT_NODE && node.slot === slotName) ||
+        (node.nodeType === Node.TEXT_NODE && node.textContent.trim() && slotName === '')
+      );
+    });
+  }
+
+  /**
+   * Return a reference to the node managed by the controller.
+   * @return {Node}
+   */
+  getSlotChild() {
+    return this.getSlotChildren()[0];
+  }
+
+  /**
+   * Run `slotInitializer` for the node managed by the controller.
+   *
+   * @param {Node} node
+   * @protected
+   */
+  initNode(node) {
+    const { slotInitializer } = this;
+    // Don't try to bind `this` to initializer (normally it's arrow function).
+    // Instead, pass the host as a first argument to access component's state.
+    if (slotInitializer) {
+      slotInitializer(node, this.host);
+    }
+  }
+
+  /**
+   * Override to initialize the newly added custom node.
+   *
+   * @param {Node} _node
+   * @protected
+   */
+  initCustomNode(_node) {}
+
+  /**
+   * Override to teardown slotted node when it's removed.
+   *
+   * @param {Node} _node
+   * @protected
+   */
+  teardownNode(_node) {}
+
+  /**
+   * Run both `initCustomNode` and `initNode` for a custom slotted node.
+   *
+   * @param {Node} node
+   * @protected
+   */
+  initAddedNode(node) {
+    if (node !== this.defaultNode) {
+      this.initCustomNode(node);
+      this.initNode(node);
+    }
+  }
+
+  /**
+   * Setup the observer to manage slot content changes.
+   * @protected
+   */
+  observeSlot() {
+    const { slotName } = this;
+    const selector = slotName === '' ? 'slot:not([name])' : `slot[name=${slotName}]`;
+    const slot = this.host.shadowRoot.querySelector(selector);
+
+    this.__slotObserver = new SlotObserver$1(slot, ({ addedNodes, removedNodes }) => {
+      const current = this.multiple ? this.nodes : [this.node];
+
+      // Calling `slot.assignedNodes()` includes whitespace text nodes in case of default slot:
+      // unlike comment nodes, they are not filtered out. So we need to manually ignore them.
+      const newNodes = addedNodes.filter((node) => !isEmptyTextNode$1(node) && !current.includes(node));
+
+      if (removedNodes.length) {
+        this.nodes = current.filter((node) => !removedNodes.includes(node));
+
+        removedNodes.forEach((node) => {
+          this.teardownNode(node);
+        });
+      }
+
+      if (newNodes && newNodes.length > 0) {
+        if (this.multiple) {
+          // Remove default node if exists
+          if (this.defaultNode) {
+            this.defaultNode.remove();
+          }
+          this.nodes = [...current, ...newNodes].filter((node) => node !== this.defaultNode);
+          newNodes.forEach((node) => {
+            this.initAddedNode(node);
+          });
+        } else {
+          // Remove previous node if exists
+          if (this.node) {
+            this.node.remove();
+          }
+          this.node = newNodes[0];
+          this.initAddedNode(this.node);
+        }
+      }
+    });
+  }
+}
+
+/**
+ * @license
+ * Copyright (c) 2022 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+
+/**
+ * A controller that manages the slotted tooltip element.
+ */
+class TooltipController$1 extends SlotController$1 {
+  constructor(host) {
+    // Do not provide slot factory to create tooltip lazily.
+    super(host, 'tooltip');
+
+    this.setTarget(host);
+  }
+
+  /**
+   * Override to initialize the newly added custom tooltip.
+   *
+   * @param {Node} tooltipNode
+   * @protected
+   * @override
+   */
+  initCustomNode(tooltipNode) {
+    tooltipNode.target = this.target;
+
+    if (this.ariaTarget !== undefined) {
+      tooltipNode.ariaTarget = this.ariaTarget;
+    }
+
+    if (this.context !== undefined) {
+      tooltipNode.context = this.context;
+    }
+
+    if (this.manual !== undefined) {
+      tooltipNode.manual = this.manual;
+    }
+
+    if (this.opened !== undefined) {
+      tooltipNode.opened = this.opened;
+    }
+
+    if (this.position !== undefined) {
+      tooltipNode._position = this.position;
+    }
+
+    if (this.shouldShow !== undefined) {
+      tooltipNode.shouldShow = this.shouldShow;
+    }
+
+    this.__notifyChange();
+  }
+
+  /**
+   * Override to notify the host when the tooltip is removed.
+   *
+   * @param {Node} tooltipNode
+   * @protected
+   * @override
+   */
+  teardownNode() {
+    this.__notifyChange();
+  }
+
+  /**
+   * Set an HTML element for linking with the tooltip overlay
+   * via `aria-describedby` attribute used by screen readers.
+   * @param {HTMLElement} ariaTarget
+   */
+  setAriaTarget(ariaTarget) {
+    this.ariaTarget = ariaTarget;
+
+    const tooltipNode = this.node;
+    if (tooltipNode) {
+      tooltipNode.ariaTarget = ariaTarget;
+    }
+  }
+
+  /**
+   * Set a context object to be used by generator.
+   * @param {object} context
+   */
+  setContext(context) {
+    this.context = context;
+
+    const tooltipNode = this.node;
+    if (tooltipNode) {
+      tooltipNode.context = context;
+    }
+  }
+
+  /**
+   * Toggle manual state on the slotted tooltip.
+   * @param {boolean} manual
+   */
+  setManual(manual) {
+    this.manual = manual;
+
+    const tooltipNode = this.node;
+    if (tooltipNode) {
+      tooltipNode.manual = manual;
+    }
+  }
+
+  /**
+   * Toggle opened state on the slotted tooltip.
+   * @param {boolean} opened
+   */
+  setOpened(opened) {
+    this.opened = opened;
+
+    const tooltipNode = this.node;
+    if (tooltipNode) {
+      tooltipNode.opened = opened;
+    }
+  }
+
+  /**
+   * Set default position for the slotted tooltip.
+   * This can be overridden by setting the position
+   * using corresponding property or attribute.
+   * @param {string} position
+   */
+  setPosition(position) {
+    this.position = position;
+
+    const tooltipNode = this.node;
+    if (tooltipNode) {
+      tooltipNode._position = position;
+    }
+  }
+
+  /**
+   * Set function used to detect whether to show
+   * the tooltip based on a condition.
+   * @param {Function} shouldShow
+   */
+  setShouldShow(shouldShow) {
+    this.shouldShow = shouldShow;
+
+    const tooltipNode = this.node;
+    if (tooltipNode) {
+      tooltipNode.shouldShow = shouldShow;
+    }
+  }
+
+  /**
+   * Set an HTML element to attach the tooltip to.
+   * @param {HTMLElement} target
+   */
+  setTarget(target) {
+    this.target = target;
+
+    const tooltipNode = this.node;
+    if (tooltipNode) {
+      tooltipNode.target = target;
+    }
+  }
+
+  /** @private */
+  __notifyChange() {
+    this.dispatchEvent(new CustomEvent('tooltip-changed', { detail: { node: this.node } }));
+  }
+}
+
+/**
+ * @license
+ * Copyright (c) 2021 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+
+/**
+ * A mixin to manage the checked state.
+ *
+ * @polymerMixin
+ * @mixes DelegateStateMixin
+ * @mixes DisabledMixin
+ * @mixes InputMixin
+ */
+const CheckedMixin = dedupingMixin(
+  (superclass) =>
+    class CheckedMixinClass extends DelegateStateMixin(DisabledMixin(InputMixin(superclass))) {
+      static get properties() {
+        return {
+          /**
+           * True if the element is checked.
+           * @type {boolean}
+           */
+          checked: {
+            type: Boolean,
+            value: false,
+            notify: true,
+            reflectToAttribute: true,
+          },
+        };
+      }
+
+      static get delegateProps() {
+        return [...super.delegateProps, 'checked'];
+      }
+
+      /**
+       * @param {Event} event
+       * @protected
+       * @override
+       */
+      _onChange(event) {
+        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 */
+      _toggleChecked(checked) {
+        this.checked = checked;
+      }
+    },
+);
+
+/**
+ * @license
+ * Copyright (c) 2017 - 2023 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
+ */
+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: '',
+        },
+      };
+    }
+
+    /** @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));
+    }
+
+    /**
+     * 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
+     */
+    _shouldSetActive(event) {
+      if (event.target.localName === 'a') {
+        return false;
+      }
+
+      return super._shouldSetActive(event);
+    }
+
+    /**
+     * Override method inherited from `CheckedMixin` to reset
+     * `indeterminate` state checkbox is toggled by the user.
+     *
+     * @param {boolean} checked
+     * @protected
+     * @override
+     */
+    _toggleChecked(checked) {
+      if (this.indeterminate) {
+        this.indeterminate = false;
+      }
+
+      super._toggleChecked(checked);
+    }
+  };
+
+/**
+ * @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;
+  }
+
+  :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);
+    --_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);
+  }
+
+  [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;
+    width: initial;
+    height: initial;
+  }
+
+  @media (forced-colors: active) {
+    [part='checkbox'] {
+      outline: 1px solid;
+      outline-offset: -1px;
+    }
+
+    :host([disabled]) [part='checkbox'],
+    :host([disabled]) [part='checkbox']::after {
+      outline-color: GrayText;
+    }
+
+    :host(:is([checked], [indeterminate])) [part='checkbox']::after {
+      outline: 1px solid;
+      outline-offset: -1px;
+      border-radius: inherit;
+    }
+
+    :host([focused]) [part='checkbox'],
+    :host([focused]) [part='checkbox']::after {
+      outline-width: 2px;
+    }
+  }
+`;
+
+/**
+ * @license
+ * Copyright (c) 2017 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+
+registerStyles$1('vaadin-checkbox', checkboxStyles, { moduleId: 'vaadin-checkbox-styles' });
+
+/**
+ * `<vaadin-checkbox>` is an input field representing a binary choice.
+ *
+ * ```html
+ * <vaadin-checkbox label="I accept the terms and conditions"></vaadin-checkbox>
+ * ```
+ *
+ * ### Styling
+ *
+ * The following shadow DOM parts are available for styling:
+ *
+ * Part name   | Description
+ * ------------|-------------
+ * `checkbox`  | The element representing a stylable custom 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.
+ *
+ * See [Styling Components](https://vaadin.com/docs/latest/styling/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 ThemableMixin
+ * @mixes ElementMixin
+ */
+class Checkbox extends CheckboxMixin(ElementMixin$1(ThemableMixin$1(PolymerElement))) {
+  static get is() {
+    return 'vaadin-checkbox';
+  }
+
+  static get template() {
+    return html`
+      <div class="vaadin-checkbox-container">
+        <div part="checkbox" aria-hidden="true"></div>
+        <slot name="input"></slot>
+        <slot name="label"></slot>
+      </div>
+      <slot name="tooltip"></slot>
+    `;
+  }
+
+  /** @protected */
+  ready() {
+    super.ready();
+
+    this._tooltipController = new TooltipController$1(this);
+    this._tooltipController.setAriaTarget(this.inputElement);
+    this.addController(this._tooltipController);
+  }
+}
+
+defineCustomElement$2(Checkbox);
+
+/**
+ * @license
+ * Copyright (c) 2017 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+/**
+ * @polymerMixin
+ */
+const ThemePropertyMixin = (superClass) =>
+  class VaadinThemePropertyMixin extends superClass {
+    static get properties() {
+      return {
+        /**
+         * Helper property with theme attribute value facilitating propagation
+         * in shadow DOM.
+         *
+         * Enables the component implementation to propagate the `theme`
+         * attribute value to the sub-components in Shadow DOM by binding
+         * the sub-component's "theme" attribute to the `theme` property of
+         * the host.
+         *
+         * **NOTE:** Extending the mixin only provides the property for binding,
+         * and does not make the propagation alone.
+         *
+         * See [Styling Components: Sub-components](https://vaadin.com/docs/latest/styling/styling-components/#sub-components).
+         * page for more information.
+         *
+         * @protected
+         */
+        _theme: {
+          type: String,
+          readOnly: true,
+        },
+      };
+    }
+
+    static get observedAttributes() {
+      return [...super.observedAttributes, 'theme'];
+    }
+
+    /** @protected */
+    attributeChangedCallback(name, oldValue, newValue) {
+      super.attributeChangedCallback(name, oldValue, newValue);
+
+      if (name === 'theme') {
+        this._set_theme(newValue);
+      }
+    }
+  };
+
+/**
+ * @license
+ * Copyright (c) 2017 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+
+/**
+ * @typedef {Object} Theme
+ * @property {string} themeFor
+ * @property {CSSResult[]} styles
+ * @property {string | string[]} [include]
+ * @property {string} [moduleId]
+ *
+ * @typedef {CSSResult[] | CSSResult} CSSResultGroup
+ */
+
+/**
+ * @type {Theme[]}
+ */
+const themeRegistry = [];
+
+/**
+ * Check if the custom element type has themes applied.
+ * @param {Function} elementClass
+ * @returns {boolean}
+ */
+function classHasThemes(elementClass) {
+  return elementClass && Object.prototype.hasOwnProperty.call(elementClass, '__themes');
+}
+
+/**
+ * Check if the custom element type has themes applied.
+ * @param {string} tagName
+ * @returns {boolean}
+ */
+function hasThemes(tagName) {
+  return classHasThemes(customElements.get(tagName));
+}
+
+/**
+ * Flattens the styles into a single array of styles.
+ * @param {CSSResultGroup} styles
+ * @param {CSSResult[]} result
+ * @returns {CSSResult[]}
+ */
+function flattenStyles(styles = []) {
+  return [styles].flat(Infinity).filter((style) => {
+    if (style instanceof o) {
+      return true;
+    }
+    console.warn('An item in styles is not of type CSSResult. Use `unsafeCSS` or `css`.');
+    return false;
+  });
+}
+
+/**
+ * Registers CSS styles for a component type. Make sure to register the styles before
+ * the first instance of a component of the type is attached to DOM.
+ *
+ * @param {string} themeFor The local/tag name of the component type to register the styles for
+ * @param {CSSResultGroup} styles The CSS style rules to be registered for the component type
+ * matching themeFor and included in the local scope of each component instance
+ * @param {{moduleId?: string, include?: string | string[]}} options Additional options
+ * @return {void}
+ */
+function registerStyles(themeFor, styles, options = {}) {
+  if (themeFor) {
+    if (hasThemes(themeFor)) {
+      console.warn(`The custom element definition for "${themeFor}"
+      was finalized before a style module was registered.
+      Make sure to add component specific style modules before
+      importing the corresponding custom element.`);
+    }
+  }
+
+  styles = flattenStyles(styles);
+
+  if (window.Vaadin && window.Vaadin.styleModules) {
+    window.Vaadin.styleModules.registerStyles(themeFor, styles, options);
+  } else {
+    themeRegistry.push({
+      themeFor,
+      styles,
+      include: options.include,
+      moduleId: options.moduleId,
+    });
+  }
+}
+
+/**
+ * Returns all registered themes. By default the themeRegistry is returned as is.
+ * In case the style-modules adapter is imported, the themes are obtained from there instead
+ * @returns {Theme[]}
+ */
+function getAllThemes() {
+  if (window.Vaadin && window.Vaadin.styleModules) {
+    return window.Vaadin.styleModules.getAllThemes();
+  }
+  return themeRegistry;
+}
+
+/**
+ * Returns true if the themeFor string matches the tag name
+ * @param {string} themeFor
+ * @param {string} tagName
+ * @returns {boolean}
+ */
+function matchesThemeFor(themeFor, tagName) {
+  return (themeFor || '').split(' ').some((themeForToken) => {
+    return new RegExp(`^${themeForToken.split('*').join('.*')}$`, 'u').test(tagName);
+  });
+}
+
+/**
+ * Maps the moduleName to an include priority number which is used for
+ * determining the order in which styles are applied.
+ * @param {string} moduleName
+ * @returns {number}
+ */
+function getIncludePriority(moduleName = '') {
+  let includePriority = 0;
+  if (moduleName.startsWith('lumo-') || moduleName.startsWith('material-')) {
+    includePriority = 1;
+  } else if (moduleName.startsWith('vaadin-')) {
+    includePriority = 2;
+  }
+  return includePriority;
+}
+
+/**
+ * Gets an array of CSSResults matching the include property of the theme.
+ * @param {Theme} theme
+ * @returns {CSSResult[]}
+ */
+function getIncludedStyles(theme) {
+  const includedStyles = [];
+  if (theme.include) {
+    [].concat(theme.include).forEach((includeModuleId) => {
+      const includedTheme = getAllThemes().find((s) => s.moduleId === includeModuleId);
+      if (includedTheme) {
+        includedStyles.push(...getIncludedStyles(includedTheme), ...includedTheme.styles);
+      } else {
+        console.warn(`Included moduleId ${includeModuleId} not found in style registry`);
+      }
+    }, theme.styles);
+  }
+  return includedStyles;
+}
+
+/**
+ * Includes the styles to the template.
+ * @param {CSSResult[]} styles
+ * @param {HTMLTemplateElement} template
+ */
+function addStylesToTemplate(styles, template) {
+  const styleEl = document.createElement('style');
+  styleEl.innerHTML = styles.map((style) => style.cssText).join('\n');
+  template.content.appendChild(styleEl);
+}
+
+/**
+ * Returns an array of themes that should be used for styling a component matching
+ * the tag name. The array is sorted by the include order.
+ * @param {string} tagName
+ * @returns {Theme[]}
+ */
+function getThemes(tagName) {
+  const defaultModuleName = `${tagName}-default-theme`;
+
+  const themes = getAllThemes()
+    // Filter by matching themeFor properties
+    .filter((theme) => theme.moduleId !== defaultModuleName && matchesThemeFor(theme.themeFor, tagName))
+    .map((theme) => ({
+      ...theme,
+      // Prepend styles from included themes
+      styles: [...getIncludedStyles(theme), ...theme.styles],
+      // Map moduleId to includePriority
+      includePriority: getIncludePriority(theme.moduleId),
+    }))
+    // Sort by includePriority
+    .sort((themeA, themeB) => themeB.includePriority - themeA.includePriority);
+
+  if (themes.length > 0) {
+    return themes;
+  }
+  // No theme modules found, return the default module if it exists
+  return getAllThemes().filter((theme) => theme.moduleId === defaultModuleName);
+}
+
+/**
+ * @polymerMixin
+ * @mixes ThemePropertyMixin
+ */
+const ThemableMixin = (superClass) =>
+  class VaadinThemableMixin extends ThemePropertyMixin(superClass) {
+    /**
+     * Covers PolymerElement based component styling
+     * @protected
+     */
+    static finalize() {
+      super.finalize();
+
+      // Make sure not to run the logic intended for PolymerElement when LitElement is used.
+      if (this.elementStyles) {
+        return;
+      }
+
+      const template = this.prototype._template;
+      if (!template || classHasThemes(this)) {
+        return;
+      }
+
+      addStylesToTemplate(this.getStylesForThis(), template);
+    }
+
+    /**
+     * Covers LitElement based component styling
+     *
+     * @protected
+     */
+    static finalizeStyles(styles) {
+      // The "styles" object originates from the "static get styles()" function of
+      // a LitElement based component. The theme styles are added after it
+      // so that they can override the component styles.
+      const themeStyles = this.getStylesForThis();
+      return styles ? [...super.finalizeStyles(styles), ...themeStyles] : themeStyles;
+    }
+
+    /**
+     * Get styles for the component type
+     *
+     * @private
+     */
+    static getStylesForThis() {
+      const parent = Object.getPrototypeOf(this.prototype);
+      const inheritedThemes = (parent ? parent.constructor.__themes : []) || [];
+      this.__themes = [...inheritedThemes, ...getThemes(this.is)];
+      const themeStyles = this.__themes.flatMap((theme) => theme.styles);
+      // Remove duplicates
+      return themeStyles.filter((style, index) => index === themeStyles.lastIndexOf(style));
+    }
+  };
+
+const checkboxGroup = i`
+  :host {
+    color: var(--lumo-body-text-color);
+    font-size: var(--lumo-font-size-m);
+    font-family: var(--lumo-font-family);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-tap-highlight-color: transparent;
+    padding: var(--lumo-space-xs) 0;
+  }
+
+  :host::before {
+    /* Effective height of vaadin-checkbox */
+    height: var(--lumo-size-s);
+    box-sizing: border-box;
+    display: inline-flex;
+    align-items: center;
+  }
+
+  :host([theme~='vertical']) [part='group-field'] {
+    flex-direction: column;
+  }
+
+  :host([disabled]) [part='label'] {
+    color: var(--lumo-disabled-text-color);
+    -webkit-text-fill-color: var(--lumo-disabled-text-color);
+  }
+
+  :host([focused]:not([disabled])) [part='label'] {
+    color: var(--lumo-primary-text-color);
+  }
+
+  :host(:hover:not([disabled]):not([focused])) [part='label'],
+  :host(:hover:not([disabled]):not([focused])) [part='helper-text'] {
+    color: var(--lumo-body-text-color);
+  }
+
+  /* Touch device adjustment */
+  @media (pointer: coarse) {
+    :host(:hover:not([disabled]):not([focused])) [part='label'] {
+      color: var(--lumo-secondary-text-color);
+    }
+  }
+`;
+
+registerStyles('vaadin-checkbox-group', [requiredField, helper, checkboxGroup], {
+  moduleId: 'lumo-checkbox-group',
+});
+
+/**
+ * @license
+ * Copyright (c) 2021 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+function defineCustomElement$1(CustomElement) {
+  const defined = customElements.get(CustomElement.is);
+  if (!defined) {
+    customElements.define(CustomElement.is, CustomElement);
+  } else {
+    const definedVersion = defined.version;
+    if (definedVersion && CustomElement.version && definedVersion === CustomElement.version) {
+      // Just loading the same thing again
+      console.warn(`The component ${CustomElement.is} has been loaded twice`);
+    } else {
+      console.error(
+        `Tried to define ${CustomElement.is} version ${CustomElement.version} when version ${defined.version} is already in use. Something will probably break.`,
+      );
+    }
+  }
+}
+
+/**
+ * @license
+ * Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
+ * This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+ * The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+ * The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+ * Code distributed by Google as part of the polymer project is also
+ * subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
  */
-class SlotTargetController {
-  constructor(sourceSlot, targetFactory, callback) {
-    /**
-     * The source `<slot>` element to copy nodes from.
-     */
-    this.sourceSlot = sourceSlot;
 
-    /**
-     * Function used to get a reference to slot target.
-     */
-    this.targetFactory = targetFactory;
+/**
+ * Async interface wrapper around `requestIdleCallback`.  Falls back to
+ * `setTimeout` on browsers that do not support `requestIdleCallback`.
+ *
+ * @namespace
+ * @summary Async interface wrapper around `requestIdleCallback`.
+ */
+const idlePeriod = {
+  /**
+   * Enqueues a function called at `requestIdleCallback` timing.
+   *
+   * @memberof idlePeriod
+   * @param {function(!IdleDeadline):void} fn Callback to run
+   * @return {number} Handle used for canceling task
+   */
+  run(fn) {
+    return window.requestIdleCallback ? window.requestIdleCallback(fn) : window.setTimeout(fn, 16);
+  },
+  /**
+   * Cancels a previously enqueued `idlePeriod` callback.
+   *
+   * @memberof idlePeriod
+   * @param {number} handle Handle returned from `run` of callback to cancel
+   * @return {void}
+   */
+  cancel(handle) {
+    if (window.cancelIdleCallback) {
+      window.cancelIdleCallback(handle);
+    } else {
+      window.clearTimeout(handle);
+    }
+  },
+};
+
+/**
+@license
+Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+*/
+
+const debouncerQueue = new Set();
+
+/**
+ * @summary Collapse multiple callbacks into one invocation after a timer.
+ */
+class Debouncer {
+  /**
+   * Creates a debouncer if no debouncer is passed as a parameter
+   * or it cancels an active debouncer otherwise. The following
+   * example shows how a debouncer can be called multiple times within a
+   * microtask and "debounced" such that the provided callback function is
+   * called once. Add this method to a custom element:
+   *
+   * ```js
+   * import {microTask} from '@vaadin/component-base/src/async.js';
+   * import {Debouncer} from '@vaadin/component-base/src/debounce.js';
+   * // ...
+   *
+   * _debounceWork() {
+   *   this._debounceJob = Debouncer.debounce(this._debounceJob,
+   *       microTask, () => this._doWork());
+   * }
+   * ```
+   *
+   * If the `_debounceWork` method is called multiple times within the same
+   * microtask, the `_doWork` function will be called only once at the next
+   * microtask checkpoint.
+   *
+   * Note: In testing it is often convenient to avoid asynchrony. To accomplish
+   * this with a debouncer, you can use `enqueueDebouncer` and
+   * `flush`. For example, extend the above example by adding
+   * `enqueueDebouncer(this._debounceJob)` at the end of the
+   * `_debounceWork` method. Then in a test, call `flush` to ensure
+   * the debouncer has completed.
+   *
+   * @param {Debouncer?} debouncer Debouncer object.
+   * @param {!AsyncInterface} asyncModule Object with Async interface
+   * @param {function()} callback Callback to run.
+   * @return {!Debouncer} Returns a debouncer object.
+   */
+  static debounce(debouncer, asyncModule, callback) {
+    if (debouncer instanceof Debouncer) {
+      // Cancel the async callback, but leave in debouncerQueue if it was
+      // enqueued, to maintain 1.x flush order
+      debouncer._cancelAsync();
+    } else {
+      debouncer = new Debouncer();
+    }
+    debouncer.setConfig(asyncModule, callback);
+    return debouncer;
+  }
+
+  constructor() {
+    this._asyncModule = null;
+    this._callback = null;
+    this._timer = null;
+  }
+
+  /**
+   * Sets the scheduler; that is, a module with the Async interface,
+   * a callback and optional arguments to be passed to the run function
+   * from the async module.
+   *
+   * @param {!AsyncInterface} asyncModule Object with Async interface.
+   * @param {function()} callback Callback to run.
+   * @return {void}
+   */
+  setConfig(asyncModule, callback) {
+    this._asyncModule = asyncModule;
+    this._callback = callback;
+    this._timer = this._asyncModule.run(() => {
+      this._timer = null;
+      debouncerQueue.delete(this);
+      this._callback();
+    });
+  }
+
+  /**
+   * Cancels an active debouncer and returns a reference to itself.
+   *
+   * @return {void}
+   */
+  cancel() {
+    if (this.isActive()) {
+      this._cancelAsync();
+      // Canceling a debouncer removes its spot from the flush queue,
+      // so if a debouncer is manually canceled and re-debounced, it
+      // will reset its flush order (this is a very minor difference from 1.x)
+      // Re-debouncing via the `debounce` API retains the 1.x FIFO flush order
+      debouncerQueue.delete(this);
+    }
+  }
+
+  /**
+   * Cancels a debouncer's async callback.
+   *
+   * @return {void}
+   */
+  _cancelAsync() {
+    if (this.isActive()) {
+      this._asyncModule.cancel(/** @type {number} */ (this._timer));
+      this._timer = null;
+    }
+  }
+
+  /**
+   * Flushes an active debouncer and returns a reference to itself.
+   *
+   * @return {void}
+   */
+  flush() {
+    if (this.isActive()) {
+      this.cancel();
+      this._callback();
+    }
+  }
+
+  /**
+   * Returns true if the debouncer is active.
+   *
+   * @return {boolean} True if active.
+   */
+  isActive() {
+    return this._timer != null;
+  }
+}
+
+/**
+ * Adds a `Debouncer` to a list of globally flushable tasks.
+ *
+ * @param {!Debouncer} debouncer Debouncer to enqueue
+ * @return {void}
+ */
+function enqueueDebouncer(debouncer) {
+  debouncerQueue.add(debouncer);
+}
+
+/**
+ * @license
+ * Copyright (c) 2021 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+
+/**
+ * Array of Vaadin custom element classes that have been subscribed to the dir changes.
+ */
+const directionSubscribers = [];
+
+function alignDirs(element, documentDir, elementDir = element.getAttribute('dir')) {
+  if (documentDir) {
+    element.setAttribute('dir', documentDir);
+  } else if (elementDir != null) {
+    element.removeAttribute('dir');
+  }
+}
+
+function getDocumentDir() {
+  return document.documentElement.getAttribute('dir');
+}
+
+function directionUpdater() {
+  const documentDir = getDocumentDir();
+  directionSubscribers.forEach((element) => {
+    alignDirs(element, documentDir);
+  });
+}
+
+const directionObserver = new MutationObserver(directionUpdater);
+directionObserver.observe(document.documentElement, { attributes: true, attributeFilter: ['dir'] });
+
+/**
+ * A mixin to handle `dir` attribute based on the one set on the `<html>` element.
+ *
+ * @polymerMixin
+ */
+const DirMixin = (superClass) =>
+  class VaadinDirMixin extends superClass {
+    static get properties() {
+      return {
+        /**
+         * @protected
+         */
+        dir: {
+          type: String,
+          value: '',
+          reflectToAttribute: true,
+          converter: {
+            fromAttribute: (attr) => {
+              return !attr ? '' : attr;
+            },
+            toAttribute: (prop) => {
+              return prop === '' ? null : prop;
+            },
+          },
+        },
+      };
+    }
 
     /**
-     * Function called after copying nodes to target.
+     * @return {boolean}
+     * @protected
      */
-    this.copyCallback = callback;
+    get __isRTL() {
+      return this.getAttribute('dir') === 'rtl';
+    }
+
+    /** @protected */
+    connectedCallback() {
+      super.connectedCallback();
+
+      if (!this.hasAttribute('dir') || this.__restoreSubscription) {
+        this.__subscribe();
+        alignDirs(this, getDocumentDir(), null);
+      }
+    }
+
+    /** @protected */
+    attributeChangedCallback(name, oldValue, newValue) {
+      super.attributeChangedCallback(name, oldValue, newValue);
+      if (name !== 'dir') {
+        return;
+      }
+
+      const documentDir = getDocumentDir();
+
+      // New value equals to the document direction and the element is not subscribed to the changes
+      const newValueEqlDocDir = newValue === documentDir && directionSubscribers.indexOf(this) === -1;
+      // Value was emptied and the element is not subscribed to the changes
+      const newValueEmptied = !newValue && oldValue && directionSubscribers.indexOf(this) === -1;
+      // New value is different and the old equals to document direction and the element is not subscribed to the changes
+      const newDiffValue = newValue !== documentDir && oldValue === documentDir;
+
+      if (newValueEqlDocDir || newValueEmptied) {
+        this.__subscribe();
+        alignDirs(this, documentDir, newValue);
+      } else if (newDiffValue) {
+        this.__unsubscribe();
+      }
+    }
+
+    /** @protected */
+    disconnectedCallback() {
+      super.disconnectedCallback();
+      this.__restoreSubscription = directionSubscribers.includes(this);
+      this.__unsubscribe();
+    }
+
+    /** @protected */
+    _valueToNodeAttribute(node, value, attribute) {
+      // Override default Polymer attribute reflection to match native behavior of HTMLElement.dir property
+      // If the property contains an empty string then it should not create an empty attribute
+      if (attribute === 'dir' && value === '' && !node.hasAttribute('dir')) {
+        return;
+      }
+      super._valueToNodeAttribute(node, value, attribute);
+    }
+
+    /** @protected */
+    _attributeToProperty(attribute, value, type) {
+      // Override default Polymer attribute reflection to match native behavior of HTMLElement.dir property
+      // If the attribute is removed, then the dir property should contain an empty string instead of null
+      if (attribute === 'dir' && !value) {
+        this.dir = '';
+      } else {
+        super._attributeToProperty(attribute, value, type);
+      }
+    }
+
+    /** @private */
+    __subscribe() {
+      if (!directionSubscribers.includes(this)) {
+        directionSubscribers.push(this);
+      }
+    }
+
+    /** @private */
+    __unsubscribe() {
+      if (directionSubscribers.includes(this)) {
+        directionSubscribers.splice(directionSubscribers.indexOf(this), 1);
+      }
+    }
+  };
+
+/**
+ * @license
+ * Copyright (c) 2021 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+
+if (!window.Vaadin) {
+  window.Vaadin = {};
+}
+
+/**
+ * Array of Vaadin custom element classes that have been finalized.
+ */
+if (!window.Vaadin.registrations) {
+  window.Vaadin.registrations = [];
+}
+
+if (!window.Vaadin.developmentModeCallback) {
+  window.Vaadin.developmentModeCallback = {};
+}
+
+window.Vaadin.developmentModeCallback['vaadin-usage-statistics'] = function () {
+  usageStatistics();
+};
+
+let statsJob;
+
+const registered = new Set();
+
+/**
+ * @polymerMixin
+ * @mixes DirMixin
+ */
+const ElementMixin = (superClass) =>
+  class VaadinElementMixin extends DirMixin(superClass) {
+    static get version() {
+      return '24.2.3';
+    }
+
+    /** @protected */
+    static finalize() {
+      super.finalize();
+
+      const { is } = this;
+
+      // Registers a class prototype for telemetry purposes.
+      if (is && !registered.has(is)) {
+        window.Vaadin.registrations.push(this);
+        registered.add(is);
+
+        if (window.Vaadin.developmentModeCallback) {
+          statsJob = Debouncer.debounce(statsJob, idlePeriod, () => {
+            window.Vaadin.developmentModeCallback['vaadin-usage-statistics']();
+          });
+          enqueueDebouncer(statsJob);
+        }
+      }
+    }
+
+    constructor() {
+      super();
+
+      if (document.doctype === null) {
+        console.warn(
+          'Vaadin components require the "standards mode" declaration. Please add <!DOCTYPE html> to the HTML document.',
+        );
+      }
+    }
+  };
+
+/**
+ * @license
+ * Copyright (c) 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+
+/**
+ * A helper for observing slot changes.
+ */
+class SlotObserver {
+  constructor(slot, callback) {
+    /** @type HTMLSlotElement */
+    this.slot = slot;
+
+    /** @type Function */
+    this.callback = callback;
+
+    /** @type {Node[]} */
+    this._storedNodes = [];
+
+    this._connected = false;
+    this._scheduled = false;
+
+    this._boundSchedule = () => {
+      this._schedule();
+    };
+
+    this.connect();
+    this._schedule();
+  }
+
+  /**
+   * Activates an observer. This method is automatically called when
+   * a `SlotObserver` is created. It should only be called to  re-activate
+   * an observer that has been deactivated via the `disconnect` method.
+   */
+  connect() {
+    this.slot.addEventListener('slotchange', this._boundSchedule);
+    this._connected = true;
+  }
+
+  /**
+   * Deactivates the observer. After calling this method the observer callback
+   * will not be called when changes to slotted nodes occur. The `connect` method
+   * may be subsequently called to reactivate the observer.
+   */
+  disconnect() {
+    this.slot.removeEventListener('slotchange', this._boundSchedule);
+    this._connected = false;
+  }
+
+  /** @private */
+  _schedule() {
+    if (!this._scheduled) {
+      this._scheduled = true;
+
+      queueMicrotask(() => {
+        this.flush();
+      });
+    }
+  }
+
+  /**
+   * Run the observer callback synchronously.
+   */
+  flush() {
+    if (!this._connected) {
+      return;
+    }
+
+    this._scheduled = false;
+
+    this._processNodes();
+  }
+
+  /** @private */
+  _processNodes() {
+    const currentNodes = this.slot.assignedNodes({ flatten: true });
+
+    let addedNodes = [];
+    const removedNodes = [];
+    const movedNodes = [];
+
+    if (currentNodes.length) {
+      addedNodes = currentNodes.filter((node) => !this._storedNodes.includes(node));
+    }
+
+    if (this._storedNodes.length) {
+      this._storedNodes.forEach((node, index) => {
+        const idx = currentNodes.indexOf(node);
+        if (idx === -1) {
+          removedNodes.push(node);
+        } else if (idx !== index) {
+          movedNodes.push(node);
+        }
+      });
+    }
+
+    if (addedNodes.length || removedNodes.length || movedNodes.length) {
+      this.callback({ addedNodes, movedNodes, removedNodes });
+    }
+
+    this._storedNodes = currentNodes;
+  }
+}
+
+/**
+ * @license
+ * Copyright (c) 2021 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+
+/**
+ * Returns true if the given node is an empty text node, false otherwise.
+ *
+ * @param {Node} node
+ * @return {boolean}
+ */
+function isEmptyTextNode(node) {
+  return node.nodeType === Node.TEXT_NODE && node.textContent.trim() === '';
+}
+
+/**
+ * @license
+ * Copyright (c) 2021 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+
+let uniqueId = 0;
+
+/**
+ * Returns a unique integer id.
+ *
+ * @return {number}
+ */
+function generateUniqueId() {
+  // eslint-disable-next-line no-plusplus
+  return uniqueId++;
+}
+
+/**
+ * @license
+ * Copyright (c) 2021 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+
+/**
+ * A controller for providing content to slot element and observing changes.
+ */
+class SlotController extends EventTarget {
+  /**
+   * Ensure that every instance has unique ID.
+   *
+   * @param {HTMLElement} host
+   * @param {string} slotName
+   * @return {string}
+   * @protected
+   */
+  static generateId(host, slotName) {
+    const prefix = slotName || 'default';
+    return `${prefix}-${host.localName}-${generateUniqueId()}`;
+  }
+
+  constructor(host, slotName, tagName, config = {}) {
+    super();
+
+    const { initializer, multiple, observe, useUniqueId } = config;
+
+    this.host = host;
+    this.slotName = slotName;
+    this.tagName = tagName;
+    this.observe = typeof observe === 'boolean' ? observe : true;
+    this.multiple = typeof multiple === 'boolean' ? multiple : false;
+    this.slotInitializer = initializer;
+
+    if (multiple) {
+      this.nodes = [];
+    }
+
+    // Only generate the default ID if requested by the controller.
+    if (useUniqueId) {
+      this.defaultId = this.constructor.generateId(host, slotName);
+    }
+  }
+
+  hostConnected() {
+    if (!this.initialized) {
+      if (this.multiple) {
+        this.initMultiple();
+      } else {
+        this.initSingle();
+      }
+
+      if (this.observe) {
+        this.observeSlot();
+      }
+
+      this.initialized = true;
+    }
+  }
+
+  /** @protected */
+  initSingle() {
+    let node = this.getSlotChild();
+
+    if (!node) {
+      node = this.attachDefaultNode();
+      this.initNode(node);
+    } else {
+      this.node = node;
+      this.initAddedNode(node);
+    }
+  }
 
-    if (sourceSlot) {
-      sourceSlot.addEventListener('slotchange', () => {
-        // Copy in progress, ignore this event.
-        if (this.__copying) {
-          this.__copying = false;
-        } else {
-          this.__checkAndCopyNodesToSlotTarget();
-        }
+  /** @protected */
+  initMultiple() {
+    const children = this.getSlotChildren();
+
+    if (children.length === 0) {
+      const defaultNode = this.attachDefaultNode();
+      if (defaultNode) {
+        this.nodes = [defaultNode];
+        this.initNode(defaultNode);
+      }
+    } else {
+      this.nodes = children;
+      children.forEach((node) => {
+        this.initAddedNode(node);
       });
     }
   }
 
-  hostConnected() {
-    this.__sourceSlotObserver = new MutationObserver(() => this.__checkAndCopyNodesToSlotTarget());
+  /**
+   * Create and attach default node using the provided tag name, if any.
+   * @return {Node | undefined}
+   * @protected
+   */
+  attachDefaultNode() {
+    const { host, slotName, tagName } = this;
+
+    // Check if the node was created previously and if so, reuse it.
+    let node = this.defaultNode;
+
+    // Tag name is optional, sometimes we don't init default content.
+    if (!node && tagName) {
+      node = document.createElement(tagName);
+      if (node instanceof Element) {
+        if (slotName !== '') {
+          node.setAttribute('slot', slotName);
+        }
+        this.node = node;
+        this.defaultNode = node;
+      }
+    }
 
-    // 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();
+    if (node) {
+      host.appendChild(node);
     }
+
+    return node;
   }
 
   /**
-   * Copies every node from the source slot to the target element
-   * once the source slot' content is changed.
-   *
-   * @private
+   * Return the list of nodes matching the slot managed by the controller.
+   * @return {Node}
    */
-  __checkAndCopyNodesToSlotTarget() {
-    this.__sourceSlotObserver.disconnect();
-
-    // Ensure slot target element is up to date.
-    const slotTarget = this.targetFactory();
+  getSlotChildren() {
+    const { slotName } = this;
+    return Array.from(this.host.childNodes).filter((node) => {
+      // Either an element (any slot) or a text node (only un-named slot).
+      return (
+        (node.nodeType === Node.ELEMENT_NODE && node.slot === slotName) ||
+        (node.nodeType === Node.TEXT_NODE && node.textContent.trim() && slotName === '')
+      );
+    });
+  }
 
-    if (!slotTarget) {
-      return;
-    }
+  /**
+   * Return a reference to the node managed by the controller.
+   * @return {Node}
+   */
+  getSlotChild() {
+    return this.getSlotChildren()[0];
+  }
 
-    // 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;
+  /**
+   * Run `slotInitializer` for the node managed by the controller.
+   *
+   * @param {Node} node
+   * @protected
+   */
+  initNode(node) {
+    const { slotInitializer } = this;
+    // Don't try to bind `this` to initializer (normally it's arrow function).
+    // Instead, pass the host as a first argument to access component's state.
+    if (slotInitializer) {
+      slotInitializer(node, this.host);
     }
+  }
 
-    // Exclude whitespace text nodes
-    const nodes = this.sourceSlot
-      .assignedNodes({ flatten: true })
-      .filter((node) => !(node.nodeType === Node.TEXT_NODE && node.textContent.trim() === ''));
-
-    if (nodes.length > 0) {
-      slotTarget.innerHTML = '';
+  /**
+   * Override to initialize the newly added custom node.
+   *
+   * @param {Node} _node
+   * @protected
+   */
+  initCustomNode(_node) {}
 
-      // Ignore next slotchange
-      this.__copying = true;
+  /**
+   * Override to teardown slotted node when it's removed.
+   *
+   * @param {Node} _node
+   * @protected
+   */
+  teardownNode(_node) {}
 
-      this.__copyNodesToSlotTarget(nodes, slotTarget);
+  /**
+   * Run both `initCustomNode` and `initNode` for a custom slotted node.
+   *
+   * @param {Node} node
+   * @protected
+   */
+  initAddedNode(node) {
+    if (node !== this.defaultNode) {
+      this.initCustomNode(node);
+      this.initNode(node);
     }
   }
 
   /**
-   * Copies the nodes to the target element.
-   *
-   * @param {!Array<!Node>} nodes
-   * @param {HTMLElement} slotTarget
-   * @private
+   * Setup the observer to manage slot content changes.
+   * @protected
    */
-  __copyNodesToSlotTarget(nodes, slotTarget) {
-    this.__slotTargetClones = this.__slotTargetClones || [];
+  observeSlot() {
+    const { slotName } = this;
+    const selector = slotName === '' ? 'slot:not([name])' : `slot[name=${slotName}]`;
+    const slot = this.host.shadowRoot.querySelector(selector);
 
-    nodes.forEach((node) => {
-      // Clone the nodes and append the clones to the target
-      const clone = node.cloneNode(true);
-      this.__slotTargetClones.push(clone);
+    this.__slotObserver = new SlotObserver(slot, ({ addedNodes, removedNodes }) => {
+      const current = this.multiple ? this.nodes : [this.node];
 
-      slotTarget.appendChild(clone);
+      // Calling `slot.assignedNodes()` includes whitespace text nodes in case of default slot:
+      // unlike comment nodes, they are not filtered out. So we need to manually ignore them.
+      const newNodes = addedNodes.filter((node) => !isEmptyTextNode(node) && !current.includes(node));
 
-      // Observe all changes to the source node to have the clones updated
-      this.__sourceSlotObserver.observe(node, {
-        attributes: true,
-        childList: true,
-        subtree: true,
-        characterData: true,
-      });
-    });
+      if (removedNodes.length) {
+        this.nodes = current.filter((node) => !removedNodes.includes(node));
 
-    // Run callback e.g. to show a deprecation warning
-    if (typeof this.copyCallback === 'function') {
-      this.copyCallback(nodes);
-    }
+        removedNodes.forEach((node) => {
+          this.teardownNode(node);
+        });
+      }
+
+      if (newNodes && newNodes.length > 0) {
+        if (this.multiple) {
+          // Remove default node if exists
+          if (this.defaultNode) {
+            this.defaultNode.remove();
+          }
+          this.nodes = [...current, ...newNodes].filter((node) => node !== this.defaultNode);
+          newNodes.forEach((node) => {
+            this.initAddedNode(node);
+          });
+        } else {
+          // Remove previous node if exists
+          if (this.node) {
+            this.node.remove();
+          }
+          this.node = newNodes[0];
+          this.initAddedNode(this.node);
+        }
+      }
+    });
   }
 }
 
 /**
  * @license
- * Copyright (c) 2017 - 2022 Vaadin Ltd.
+ * Copyright (c) 2022 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 
 /**
- * `<vaadin-checkbox>` is an input field representing a binary choice.
- *
- * ```html
- * <vaadin-checkbox label="I accept the terms and conditions"></vaadin-checkbox>
- * ```
- *
- * ### Styling
- *
- * The following shadow DOM parts are available for styling:
- *
- * Part name   | Description
- * ------------|----------------
- * `checkbox`  | The wrapper element that contains slotted <input type="checkbox">.
- *
- * The following state attributes are available for styling:
- *
- * 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/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.
- *
- * @extends HTMLElement
- * @mixes ControllerMixin
- * @mixes ThemableMixin
- * @mixes ElementMixin
- * @mixes ActiveMixin
- * @mixes DelegateFocusMixin
- * @mixes CheckedMixin
- * @mixes LabelMixin
+ * A controller that manages the slotted tooltip element.
  */
-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;
-          width: initial;
-          height: initial;
-        }
-      </style>
-      <div class="vaadin-checkbox-container">
-        <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,
-      },
+class TooltipController extends SlotController {
+  constructor(host) {
+    // Do not provide slot factory to create tooltip lazily.
+    super(host, 'tooltip');
 
-      /**
-       * The name of the checkbox.
-       *
-       * @type {string}
-       */
-      name: {
-        type: String,
-        value: '',
-      },
-    };
+    this.setTarget(host);
   }
 
-  /** @override */
-  static get delegateProps() {
-    return [...super.delegateProps, 'indeterminate'];
-  }
+  /**
+   * Override to initialize the newly added custom tooltip.
+   *
+   * @param {Node} tooltipNode
+   * @protected
+   * @override
+   */
+  initCustomNode(tooltipNode) {
+    tooltipNode.target = this.target;
 
-  /** @override */
-  static get delegateAttrs() {
-    return [...super.delegateAttrs, 'name'];
-  }
+    if (this.ariaTarget !== undefined) {
+      tooltipNode.ariaTarget = this.ariaTarget;
+    }
 
-  constructor() {
-    super();
+    if (this.context !== undefined) {
+      tooltipNode.context = this.context;
+    }
 
-    this._setType('checkbox');
+    if (this.manual !== undefined) {
+      tooltipNode.manual = this.manual;
+    }
 
-    // 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';
-  }
+    if (this.opened !== undefined) {
+      tooltipNode.opened = this.opened;
+    }
 
-  /** @protected */
-  ready() {
-    super.ready();
+    if (this.position !== undefined) {
+      tooltipNode._position = this.position;
+    }
 
-    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.addController(this._tooltipController);
-  }
+    if (this.shouldShow !== undefined) {
+      tooltipNode.shouldShow = this.shouldShow;
+    }
 
-  /** @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.`,
-    );
+    this.__notifyChange();
   }
 
   /**
-   * Extends the method from `ActiveMixin` in order to
-   * prevent setting the `active` attribute when interacting with a link inside the label.
+   * Override to notify the host when the tooltip is removed.
    *
-   * @param {Event} event
-   * @return {boolean}
+   * @param {Node} tooltipNode
    * @protected
    * @override
    */
-  _shouldSetActive(event) {
-    if (event.target.localName === 'a') {
-      return false;
-    }
-
-    return super._shouldSetActive(event);
+  teardownNode() {
+    this.__notifyChange();
   }
 
   /**
-   * Extends the method from `CheckedMixin` in order to
-   * reset the indeterminate state once the user switches the checkbox.
-   *
-   * @param {boolean} checked
-   * @protected
-   * @override
+   * Set an HTML element for linking with the tooltip overlay
+   * via `aria-describedby` attribute used by screen readers.
+   * @param {HTMLElement} ariaTarget
    */
-  _toggleChecked(checked) {
-    if (this.indeterminate) {
-      this.indeterminate = false;
-    }
+  setAriaTarget(ariaTarget) {
+    this.ariaTarget = ariaTarget;
 
-    super._toggleChecked(checked);
+    const tooltipNode = this.node;
+    if (tooltipNode) {
+      tooltipNode.ariaTarget = ariaTarget;
+    }
   }
-}
 
-customElements.define(Checkbox.is, Checkbox);
+  /**
+   * Set a context object to be used by generator.
+   * @param {object} context
+   */
+  setContext(context) {
+    this.context = context;
 
-const checkboxGroup = i`
-  :host {
-    color: var(--lumo-body-text-color);
-    font-size: var(--lumo-font-size-m);
-    font-family: var(--lumo-font-family);
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    -webkit-tap-highlight-color: transparent;
-    padding: var(--lumo-space-xs) 0;
+    const tooltipNode = this.node;
+    if (tooltipNode) {
+      tooltipNode.context = context;
+    }
   }
 
-  :host::before {
-    /* Effective height of vaadin-checkbox */
-    height: var(--lumo-size-s);
-    box-sizing: border-box;
-    display: inline-flex;
-    align-items: center;
-  }
+  /**
+   * Toggle manual state on the slotted tooltip.
+   * @param {boolean} manual
+   */
+  setManual(manual) {
+    this.manual = manual;
 
-  :host([theme~='vertical']) [part='group-field'] {
-    display: flex;
-    flex-direction: column;
+    const tooltipNode = this.node;
+    if (tooltipNode) {
+      tooltipNode.manual = manual;
+    }
   }
 
-  :host([disabled]) [part='label'] {
-    color: var(--lumo-disabled-text-color);
-    -webkit-text-fill-color: var(--lumo-disabled-text-color);
+  /**
+   * Toggle opened state on the slotted tooltip.
+   * @param {boolean} opened
+   */
+  setOpened(opened) {
+    this.opened = opened;
+
+    const tooltipNode = this.node;
+    if (tooltipNode) {
+      tooltipNode.opened = opened;
+    }
   }
 
-  :host([focused]:not([disabled])) [part='label'] {
-    color: var(--lumo-primary-text-color);
+  /**
+   * Set default position for the slotted tooltip.
+   * This can be overridden by setting the position
+   * using corresponding property or attribute.
+   * @param {string} position
+   */
+  setPosition(position) {
+    this.position = position;
+
+    const tooltipNode = this.node;
+    if (tooltipNode) {
+      tooltipNode._position = position;
+    }
   }
 
-  :host(:hover:not([disabled]):not([focused])) [part='label'],
-  :host(:hover:not([disabled]):not([focused])) [part='helper-text'] {
-    color: var(--lumo-body-text-color);
+  /**
+   * Set function used to detect whether to show
+   * the tooltip based on a condition.
+   * @param {Function} shouldShow
+   */
+  setShouldShow(shouldShow) {
+    this.shouldShow = shouldShow;
+
+    const tooltipNode = this.node;
+    if (tooltipNode) {
+      tooltipNode.shouldShow = shouldShow;
+    }
   }
 
-  /* Touch device adjustment */
-  @media (pointer: coarse) {
-    :host(:hover:not([disabled]):not([focused])) [part='label'] {
-      color: var(--lumo-secondary-text-color);
+  /**
+   * Set an HTML element to attach the tooltip to.
+   * @param {HTMLElement} target
+   */
+  setTarget(target) {
+    this.target = target;
+
+    const tooltipNode = this.node;
+    if (tooltipNode) {
+      tooltipNode.target = target;
     }
   }
-`;
 
-registerStyles('vaadin-checkbox-group', [requiredField, helper, checkboxGroup], {
-  moduleId: 'lumo-checkbox-group',
-});
+  /** @private */
+  __notifyChange() {
+    this.dispatchEvent(new CustomEvent('tooltip-changed', { detail: { node: this.node } }));
+  }
+}
 
 /**
  * @license
- * Copyright (c) 2018 - 2022 Vaadin Ltd.
+ * Copyright (c) 2018 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 
@@ -636,10 +3084,11 @@ 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="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 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>
  * ```
  *
@@ -667,12 +3116,13 @@ 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/custom-theme/styling-components) documentation.
+ * See [Styling Components](https://vaadin.com/docs/latest/styling/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
@@ -708,6 +3158,11 @@ 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;
         }
@@ -761,6 +3216,29 @@ 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 */
@@ -772,17 +3250,20 @@ class CheckboxGroup extends FieldMixin(FocusMixin(DisabledMixin(ElementMixin(The
     // See https://github.com/vaadin/vaadin-web-components/issues/94
     this.setAttribute('role', 'group');
 
-    this._observer = new FlattenedNodesObserver(this, ({ addedNodes, removedNodes }) => {
+    const slot = this.shadowRoot.querySelector('slot:not([name])');
+    this._observer = new SlotObserver(slot, ({ 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);
   }
 
@@ -806,16 +3287,6 @@ 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
@@ -972,13 +3443,15 @@ class CheckboxGroup extends FieldMixin(FocusMixin(DisabledMixin(ElementMixin(The
   _setFocused(focused) {
     super._setFocused(focused);
 
-    if (!focused) {
+    // Do not validate when focusout is caused by document
+    // losing focus, which happens on browser tab switch.
+    if (!focused && document.hasFocus()) {
       this.validate();
     }
   }
 }
 
-customElements.define(CheckboxGroup.is, CheckboxGroup);
+defineCustomElement$1(CheckboxGroup);
 
 const checkboxGroupInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.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__label{font-style:inherit;font-family:inherit;font-weight:400;font-size:16px;color:#2B2D3F;line-height:14px}.checkboxgroup__label-text{font-size:16px}.checkboxgroup__error-message{position:absolute;top:calc(100% + 5px);left:0;color:#cc0000b3}.checkboxgroup__tooltip-icon{width:16px;height:auto}.checkboxgroup__tooltip{position:absolute;top:0;right:0;background-color:#FFFFFF;border:1px solid #B0B0B0;color:#2B2D3F;padding:10px;border-radius:5px;opacity:0;transition:opacity 0.3s ease-in-out;z-index:10}.checkboxgroup__tooltip.visible{opacity:1}";