@everymatrix/general-registration 1.21.6 → 1.21.7

package/dist/components/vaadin-button.js

@@ -1,2089 +1,258 @@
-import { o, i, d as dedupingMixin, u as usageStatistics, T as TabindexMixin, g as FocusMixin, P as PolymerElement, h as html } from './field-mixin.js';
+import { i, r as registerStyles, Q as TabindexMixin, m as FocusMixin, E as ElementMixin, j as ThemableMixin, J as ControllerMixin, P as PolymerElement, T as TooltipController, g as defineCustomElement, h as html } from './field-mixin.js';
 import { A as ActiveMixin } from './active-mixin.js';
 
-/**
- * @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(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 - 2023 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-
-/**
- * Dummy custom element used for collecting
- * development time usage statistics.
- *
- * @private
- */
-class Lumo extends HTMLElement {
-  static get is() {
-    return 'vaadin-lumo-styles';
-  }
-
-  static get version() {
-    return '24.2.3';
-  }
-}
-
-defineCustomElement(Lumo);
-
-/**
- * @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));
-    }
-  };
-
-/**
- * @license
- * Copyright (c) 2017 - 2023 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-
-/**
- * This is for use internally by Lumo and Material styles.
- *
- * @param {string} id the id to set on the created element, only for informational purposes
- * @param  {CSSResultGroup[]} styles the styles to add
- */
-const addGlobalThemeStyles = (id, ...styles) => {
-  const styleTag = document.createElement('style');
-  styleTag.id = id;
-  styleTag.textContent = styles
-    .map((style) => style.toString())
-    .join('\n')
-    .replace(':host', 'html');
-
-  document.head.insertAdjacentElement('afterbegin', styleTag);
-};
-
-const addLumoGlobalStyles = (id, ...styles) => {
-  addGlobalThemeStyles(`lumo-${id}`, styles);
-};
-
-/**
- * @license
- * Copyright (c) 2017 - 2023 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-
-const colorBase = i`
-  :host {
-    /* Base (background) */
-    --lumo-base-color: #fff;
-
-    /* Tint */
-    --lumo-tint-5pct: hsla(0, 0%, 100%, 0.3);
-    --lumo-tint-10pct: hsla(0, 0%, 100%, 0.37);
-    --lumo-tint-20pct: hsla(0, 0%, 100%, 0.44);
-    --lumo-tint-30pct: hsla(0, 0%, 100%, 0.5);
-    --lumo-tint-40pct: hsla(0, 0%, 100%, 0.57);
-    --lumo-tint-50pct: hsla(0, 0%, 100%, 0.64);
-    --lumo-tint-60pct: hsla(0, 0%, 100%, 0.7);
-    --lumo-tint-70pct: hsla(0, 0%, 100%, 0.77);
-    --lumo-tint-80pct: hsla(0, 0%, 100%, 0.84);
-    --lumo-tint-90pct: hsla(0, 0%, 100%, 0.9);
-    --lumo-tint: #fff;
-
-    /* Shade */
-    --lumo-shade-5pct: hsla(214, 61%, 25%, 0.05);
-    --lumo-shade-10pct: hsla(214, 57%, 24%, 0.1);
-    --lumo-shade-20pct: hsla(214, 53%, 23%, 0.16);
-    --lumo-shade-30pct: hsla(214, 50%, 22%, 0.26);
-    --lumo-shade-40pct: hsla(214, 47%, 21%, 0.38);
-    --lumo-shade-50pct: hsla(214, 45%, 20%, 0.52);
-    --lumo-shade-60pct: hsla(214, 43%, 19%, 0.6);
-    --lumo-shade-70pct: hsla(214, 42%, 18%, 0.69);
-    --lumo-shade-80pct: hsla(214, 41%, 17%, 0.83);
-    --lumo-shade-90pct: hsla(214, 40%, 16%, 0.94);
-    --lumo-shade: hsl(214, 35%, 15%);
-
-    /* Contrast */
-    --lumo-contrast-5pct: var(--lumo-shade-5pct);
-    --lumo-contrast-10pct: var(--lumo-shade-10pct);
-    --lumo-contrast-20pct: var(--lumo-shade-20pct);
-    --lumo-contrast-30pct: var(--lumo-shade-30pct);
-    --lumo-contrast-40pct: var(--lumo-shade-40pct);
-    --lumo-contrast-50pct: var(--lumo-shade-50pct);
-    --lumo-contrast-60pct: var(--lumo-shade-60pct);
-    --lumo-contrast-70pct: var(--lumo-shade-70pct);
-    --lumo-contrast-80pct: var(--lumo-shade-80pct);
-    --lumo-contrast-90pct: var(--lumo-shade-90pct);
-    --lumo-contrast: var(--lumo-shade);
-
-    /* Text */
-    --lumo-header-text-color: var(--lumo-contrast);
-    --lumo-body-text-color: var(--lumo-contrast-90pct);
-    --lumo-secondary-text-color: var(--lumo-contrast-70pct);
-    --lumo-tertiary-text-color: var(--lumo-contrast-50pct);
-    --lumo-disabled-text-color: var(--lumo-contrast-30pct);
-
-    /* Primary */
-    --lumo-primary-color: hsl(214, 100%, 48%);
-    --lumo-primary-color-50pct: hsla(214, 100%, 49%, 0.76);
-    --lumo-primary-color-10pct: hsla(214, 100%, 60%, 0.13);
-    --lumo-primary-text-color: hsl(214, 100%, 43%);
-    --lumo-primary-contrast-color: #fff;
-
-    /* Error */
-    --lumo-error-color: hsl(3, 85%, 48%);
-    --lumo-error-color-50pct: hsla(3, 85%, 49%, 0.5);
-    --lumo-error-color-10pct: hsla(3, 85%, 49%, 0.1);
-    --lumo-error-text-color: hsl(3, 89%, 42%);
-    --lumo-error-contrast-color: #fff;
-
-    /* Success */
-    --lumo-success-color: hsl(145, 72%, 30%);
-    --lumo-success-color-50pct: hsla(145, 72%, 31%, 0.5);
-    --lumo-success-color-10pct: hsla(145, 72%, 31%, 0.1);
-    --lumo-success-text-color: hsl(145, 85%, 25%);
-    --lumo-success-contrast-color: #fff;
-
-    /* Warning */
-    --lumo-warning-color: hsl(48, 100%, 50%);
-    --lumo-warning-color-10pct: hsla(48, 100%, 50%, 0.25);
-    --lumo-warning-text-color: hsl(32, 100%, 30%);
-    --lumo-warning-contrast-color: var(--lumo-shade-90pct);
-  }
-
-  /* forced-colors mode adjustments */
-  @media (forced-colors: active) {
-    html {
-      --lumo-disabled-text-color: GrayText;
-    }
-  }
-`;
-
-addLumoGlobalStyles('color-props', colorBase);
-
-const color = i`
-  [theme~='dark'] {
-    /* Base (background) */
-    --lumo-base-color: hsl(214, 35%, 21%);
-
-    /* Tint */
-    --lumo-tint-5pct: hsla(214, 65%, 85%, 0.06);
-    --lumo-tint-10pct: hsla(214, 60%, 80%, 0.14);
-    --lumo-tint-20pct: hsla(214, 64%, 82%, 0.23);
-    --lumo-tint-30pct: hsla(214, 69%, 84%, 0.32);
-    --lumo-tint-40pct: hsla(214, 73%, 86%, 0.41);
-    --lumo-tint-50pct: hsla(214, 78%, 88%, 0.5);
-    --lumo-tint-60pct: hsla(214, 82%, 90%, 0.58);
-    --lumo-tint-70pct: hsla(214, 87%, 92%, 0.69);
-    --lumo-tint-80pct: hsla(214, 91%, 94%, 0.8);
-    --lumo-tint-90pct: hsla(214, 96%, 96%, 0.9);
-    --lumo-tint: hsl(214, 100%, 98%);
-
-    /* Shade */
-    --lumo-shade-5pct: hsla(214, 0%, 0%, 0.07);
-    --lumo-shade-10pct: hsla(214, 4%, 2%, 0.15);
-    --lumo-shade-20pct: hsla(214, 8%, 4%, 0.23);
-    --lumo-shade-30pct: hsla(214, 12%, 6%, 0.32);
-    --lumo-shade-40pct: hsla(214, 16%, 8%, 0.41);
-    --lumo-shade-50pct: hsla(214, 20%, 10%, 0.5);
-    --lumo-shade-60pct: hsla(214, 24%, 12%, 0.6);
-    --lumo-shade-70pct: hsla(214, 28%, 13%, 0.7);
-    --lumo-shade-80pct: hsla(214, 32%, 13%, 0.8);
-    --lumo-shade-90pct: hsla(214, 33%, 13%, 0.9);
-    --lumo-shade: hsl(214, 33%, 13%);
-
-    /* Contrast */
-    --lumo-contrast-5pct: var(--lumo-tint-5pct);
-    --lumo-contrast-10pct: var(--lumo-tint-10pct);
-    --lumo-contrast-20pct: var(--lumo-tint-20pct);
-    --lumo-contrast-30pct: var(--lumo-tint-30pct);
-    --lumo-contrast-40pct: var(--lumo-tint-40pct);
-    --lumo-contrast-50pct: var(--lumo-tint-50pct);
-    --lumo-contrast-60pct: var(--lumo-tint-60pct);
-    --lumo-contrast-70pct: var(--lumo-tint-70pct);
-    --lumo-contrast-80pct: var(--lumo-tint-80pct);
-    --lumo-contrast-90pct: var(--lumo-tint-90pct);
-    --lumo-contrast: var(--lumo-tint);
-
-    /* Text */
-    --lumo-header-text-color: var(--lumo-contrast);
-    --lumo-body-text-color: var(--lumo-contrast-90pct);
-    --lumo-secondary-text-color: var(--lumo-contrast-70pct);
-    --lumo-tertiary-text-color: var(--lumo-contrast-50pct);
-    --lumo-disabled-text-color: var(--lumo-contrast-30pct);
-
-    /* Primary */
-    --lumo-primary-color: hsl(214, 90%, 48%);
-    --lumo-primary-color-50pct: hsla(214, 90%, 70%, 0.69);
-    --lumo-primary-color-10pct: hsla(214, 90%, 55%, 0.13);
-    --lumo-primary-text-color: hsl(214, 90%, 77%);
-    --lumo-primary-contrast-color: #fff;
-
-    /* Error */
-    --lumo-error-color: hsl(3, 79%, 49%);
-    --lumo-error-color-50pct: hsla(3, 75%, 62%, 0.5);
-    --lumo-error-color-10pct: hsla(3, 75%, 62%, 0.14);
-    --lumo-error-text-color: hsl(3, 100%, 80%);
-
-    /* Success */
-    --lumo-success-color: hsl(145, 72%, 30%);
-    --lumo-success-color-50pct: hsla(145, 92%, 51%, 0.5);
-    --lumo-success-color-10pct: hsla(145, 92%, 51%, 0.1);
-    --lumo-success-text-color: hsl(145, 85%, 46%);
-
-    /* Warning */
-    --lumo-warning-color: hsl(43, 100%, 48%);
-    --lumo-warning-color-10pct: hsla(40, 100%, 50%, 0.2);
-    --lumo-warning-text-color: hsl(45, 100%, 60%);
-    --lumo-warning-contrast-color: var(--lumo-shade-90pct);
-  }
-
-  html {
-    color: var(--lumo-body-text-color);
-    background-color: var(--lumo-base-color);
-    color-scheme: light;
-  }
-
-  [theme~='dark'] {
-    color: var(--lumo-body-text-color);
-    background-color: var(--lumo-base-color);
-    color-scheme: dark;
-  }
-
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    color: var(--lumo-header-text-color);
-  }
-
-  a:where(:any-link) {
-    color: var(--lumo-primary-text-color);
-  }
-
-  a:not(:any-link) {
-    color: var(--lumo-disabled-text-color);
-  }
-
-  blockquote {
-    color: var(--lumo-secondary-text-color);
-  }
-
-  code,
-  pre {
-    background-color: var(--lumo-contrast-10pct);
-    border-radius: var(--lumo-border-radius-m);
-  }
-`;
-
-registerStyles('', color, { moduleId: 'lumo-color' });
-
-/**
- * @license
- * Copyright (c) 2017 - 2023 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-
-const sizing = i`
-  :host {
-    --lumo-size-xs: 1.625rem;
-    --lumo-size-s: 1.875rem;
-    --lumo-size-m: 2.25rem;
-    --lumo-size-l: 2.75rem;
-    --lumo-size-xl: 3.5rem;
-
-    /* Icons */
-    --lumo-icon-size-s: 1.25em;
-    --lumo-icon-size-m: 1.5em;
-    --lumo-icon-size-l: 2.25em;
-    /* For backwards compatibility */
-    --lumo-icon-size: var(--lumo-icon-size-m);
-  }
-`;
-
-addLumoGlobalStyles('sizing-props', sizing);
-
-/**
- * @license
- * Copyright (c) 2017 - 2023 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-
-const spacing = i`
-  :host {
-    /* Square */
-    --lumo-space-xs: 0.25rem;
-    --lumo-space-s: 0.5rem;
-    --lumo-space-m: 1rem;
-    --lumo-space-l: 1.5rem;
-    --lumo-space-xl: 2.5rem;
-
-    /* Wide */
-    --lumo-space-wide-xs: calc(var(--lumo-space-xs) / 2) var(--lumo-space-xs);
-    --lumo-space-wide-s: calc(var(--lumo-space-s) / 2) var(--lumo-space-s);
-    --lumo-space-wide-m: calc(var(--lumo-space-m) / 2) var(--lumo-space-m);
-    --lumo-space-wide-l: calc(var(--lumo-space-l) / 2) var(--lumo-space-l);
-    --lumo-space-wide-xl: calc(var(--lumo-space-xl) / 2) var(--lumo-space-xl);
-
-    /* Tall */
-    --lumo-space-tall-xs: var(--lumo-space-xs) calc(var(--lumo-space-xs) / 2);
-    --lumo-space-tall-s: var(--lumo-space-s) calc(var(--lumo-space-s) / 2);
-    --lumo-space-tall-m: var(--lumo-space-m) calc(var(--lumo-space-m) / 2);
-    --lumo-space-tall-l: var(--lumo-space-l) calc(var(--lumo-space-l) / 2);
-    --lumo-space-tall-xl: var(--lumo-space-xl) calc(var(--lumo-space-xl) / 2);
-  }
-`;
-
-addLumoGlobalStyles('spacing-props', spacing);
-
-/**
- * @license
- * Copyright (c) 2017 - 2023 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-
-const style = i`
-  :host {
-    /* Border radius */
-    --lumo-border-radius-s: 0.25em; /* Checkbox, badge, date-picker year indicator, etc */
-    --lumo-border-radius-m: var(--lumo-border-radius, 0.25em); /* Button, text field, menu overlay, etc */
-    --lumo-border-radius-l: 0.5em; /* Dialog, notification, etc */
-
-    /* Shadow */
-    --lumo-box-shadow-xs: 0 1px 4px -1px var(--lumo-shade-50pct);
-    --lumo-box-shadow-s: 0 2px 4px -1px var(--lumo-shade-20pct), 0 3px 12px -1px var(--lumo-shade-30pct);
-    --lumo-box-shadow-m: 0 2px 6px -1px var(--lumo-shade-20pct), 0 8px 24px -4px var(--lumo-shade-40pct);
-    --lumo-box-shadow-l: 0 3px 18px -2px var(--lumo-shade-20pct), 0 12px 48px -6px var(--lumo-shade-40pct);
-    --lumo-box-shadow-xl: 0 4px 24px -3px var(--lumo-shade-20pct), 0 18px 64px -8px var(--lumo-shade-40pct);
-
-    /* Clickable element cursor */
-    --lumo-clickable-cursor: default;
-  }
-`;
-
-/**
- * Default values for component-specific custom properties.
- */
-i`
-  html {
-    --vaadin-checkbox-size: calc(var(--lumo-size-m) / 2);
-    --vaadin-radio-button-size: calc(var(--lumo-size-m) / 2);
-    --vaadin-input-field-border-radius: var(--lumo-border-radius-m);
-  }
-`;
-
-addLumoGlobalStyles('style-props', style);
-
-/**
- * @license
- * Copyright (c) 2017 - 2023 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-
-const font = i`
-  :host {
-    /* prettier-ignore */
-    --lumo-font-family: -apple-system, BlinkMacSystemFont, 'Roboto', 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
-
-    /* Font sizes */
-    --lumo-font-size-xxs: 0.75rem;
-    --lumo-font-size-xs: 0.8125rem;
-    --lumo-font-size-s: 0.875rem;
-    --lumo-font-size-m: 1rem;
-    --lumo-font-size-l: 1.125rem;
-    --lumo-font-size-xl: 1.375rem;
-    --lumo-font-size-xxl: 1.75rem;
-    --lumo-font-size-xxxl: 2.5rem;
-
-    /* Line heights */
-    --lumo-line-height-xs: 1.25;
-    --lumo-line-height-s: 1.375;
-    --lumo-line-height-m: 1.625;
-  }
-`;
-
-const typography = i`
-  body,
-  :host {
-    font-family: var(--lumo-font-family);
-    font-size: var(--lumo-font-size-m);
-    line-height: var(--lumo-line-height-m);
-    -webkit-text-size-adjust: 100%;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-  }
-
-  small,
-  [theme~='font-size-s'] {
-    font-size: var(--lumo-font-size-s);
-    line-height: var(--lumo-line-height-s);
-  }
-
-  [theme~='font-size-xs'] {
-    font-size: var(--lumo-font-size-xs);
-    line-height: var(--lumo-line-height-xs);
-  }
-
-  :where(h1, h2, h3, h4, h5, h6) {
-    font-weight: 600;
-    line-height: var(--lumo-line-height-xs);
-    margin-block: 0;
-  }
-
-  :where(h1) {
-    font-size: var(--lumo-font-size-xxxl);
-  }
-
-  :where(h2) {
-    font-size: var(--lumo-font-size-xxl);
-  }
-
-  :where(h3) {
-    font-size: var(--lumo-font-size-xl);
-  }
-
-  :where(h4) {
-    font-size: var(--lumo-font-size-l);
-  }
-
-  :where(h5) {
-    font-size: var(--lumo-font-size-m);
-  }
-
-  :where(h6) {
-    font-size: var(--lumo-font-size-xs);
-    text-transform: uppercase;
-    letter-spacing: 0.03em;
-  }
-
-  p,
-  blockquote {
-    margin-top: 0.5em;
-    margin-bottom: 0.75em;
-  }
-
-  a {
-    text-decoration: none;
-  }
-
-  a:where(:any-link):hover {
-    text-decoration: underline;
-  }
-
-  hr {
-    display: block;
-    align-self: stretch;
-    height: 1px;
-    border: 0;
-    padding: 0;
-    margin: var(--lumo-space-s) calc(var(--lumo-border-radius-m) / 2);
-    background-color: var(--lumo-contrast-10pct);
-  }
-
-  blockquote {
-    border-left: 2px solid var(--lumo-contrast-30pct);
-  }
-
-  b,
-  strong {
-    font-weight: 600;
-  }
-
-  /* RTL specific styles */
-  blockquote[dir='rtl'] {
-    border-left: none;
-    border-right: 2px solid var(--lumo-contrast-30pct);
-  }
-`;
-
-registerStyles('', typography, { moduleId: 'lumo-typography' });
-addLumoGlobalStyles('typography-props', font);
-
-const button = i`
-  :host {
-    /* Sizing */
-    --lumo-button-size: var(--lumo-size-m);
-    min-width: calc(var(--lumo-button-size) * 2);
-    height: var(--lumo-button-size);
-    padding: 0 calc(var(--lumo-button-size) / 3 + var(--lumo-border-radius-m) / 2);
-    margin: var(--lumo-space-xs) 0;
-    box-sizing: border-box;
-    /* Style */
-    font-family: var(--lumo-font-family);
-    font-size: var(--lumo-font-size-m);
-    font-weight: 500;
-    color: var(--_lumo-button-color, var(--lumo-primary-text-color));
-    background-color: var(--_lumo-button-background-color, var(--lumo-contrast-5pct));
-    border-radius: var(--lumo-border-radius-m);
-    cursor: var(--lumo-clickable-cursor);
-    -webkit-tap-highlight-color: transparent;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    flex-shrink: 0;
-  }
-
-  /* Set only for the internal parts so we don't affect the host vertical alignment */
-  [part='label'],
-  [part='prefix'],
-  [part='suffix'] {
-    line-height: var(--lumo-line-height-xs);
-  }
-
-  [part='label'] {
-    padding: calc(var(--lumo-button-size) / 6) 0;
-  }
-
-  :host([theme~='small']) {
-    font-size: var(--lumo-font-size-s);
-    --lumo-button-size: var(--lumo-size-s);
-  }
-
-  :host([theme~='large']) {
-    font-size: var(--lumo-font-size-l);
-    --lumo-button-size: var(--lumo-size-l);
-  }
-
-  /* For interaction states */
-  :host::before,
-  :host::after {
-    content: '';
-    /* We rely on the host always being relative */
-    position: absolute;
-    z-index: 1;
-    inset: 0;
-    background-color: currentColor;
-    border-radius: inherit;
-    opacity: 0;
-    pointer-events: none;
-  }
-
-  /* Hover */
-
-  @media (any-hover: hover) {
-    :host(:hover)::before {
-      opacity: 0.02;
-    }
-  }
-
-  /* Active */
-
-  :host::after {
-    transition: opacity 1.4s, transform 0.1s;
-    filter: blur(8px);
-  }
-
-  :host([active])::before {
-    opacity: 0.05;
-    transition-duration: 0s;
-  }
-
-  :host([active])::after {
-    opacity: 0.1;
-    transition-duration: 0s, 0s;
-    transform: scale(0);
-  }
-
-  /* Keyboard focus */
-
-  :host([focus-ring]) {
-    box-shadow: 0 0 0 2px var(--lumo-primary-color-50pct);
-  }
-
-  :host([theme~='primary'][focus-ring]) {
-    box-shadow: 0 0 0 1px var(--lumo-base-color), 0 0 0 3px var(--lumo-primary-color-50pct);
-  }
-
-  /* Types (primary, tertiary, tertiary-inline */
-
-  :host([theme~='tertiary']),
-  :host([theme~='tertiary-inline']) {
-    background-color: transparent !important;
-    min-width: 0;
-  }
-
-  :host([theme~='tertiary']) {
-    padding: 0 calc(var(--lumo-button-size) / 6);
-  }
-
-  :host([theme~='tertiary-inline'])::before {
-    display: none;
-  }
-
-  :host([theme~='tertiary-inline']) {
-    margin: 0;
-    height: auto;
-    padding: 0;
-    line-height: inherit;
-    font-size: inherit;
-  }
-
-  :host([theme~='tertiary-inline']) [part='label'] {
-    padding: 0;
-    overflow: visible;
-    line-height: inherit;
-  }
-
-  :host([theme~='primary']) {
-    background-color: var(--_lumo-button-primary-background-color, var(--lumo-primary-color));
-    color: var(--_lumo-button-primary-color, var(--lumo-primary-contrast-color));
-    font-weight: 600;
-    min-width: calc(var(--lumo-button-size) * 2.5);
-  }
-
-  :host([theme~='primary'])::before {
-    background-color: black;
-  }
-
-  @media (any-hover: hover) {
-    :host([theme~='primary']:hover)::before {
-      opacity: 0.05;
-    }
-  }
-
-  :host([theme~='primary'][active])::before {
-    opacity: 0.1;
-  }
-
-  :host([theme~='primary'][active])::after {
-    opacity: 0.2;
-  }
-
-  /* Colors (success, error, contrast) */
-
-  :host([theme~='success']) {
-    color: var(--lumo-success-text-color);
-  }
-
-  :host([theme~='success'][theme~='primary']) {
-    background-color: var(--lumo-success-color);
-    color: var(--lumo-success-contrast-color);
-  }
-
-  :host([theme~='error']) {
-    color: var(--lumo-error-text-color);
-  }
-
-  :host([theme~='error'][theme~='primary']) {
-    background-color: var(--lumo-error-color);
-    color: var(--lumo-error-contrast-color);
-  }
-
-  :host([theme~='contrast']) {
-    color: var(--lumo-contrast);
-  }
-
-  :host([theme~='contrast'][theme~='primary']) {
-    background-color: var(--lumo-contrast);
-    color: var(--lumo-base-color);
-  }
-
-  /* Disabled state. Keep selectors after other color variants. */
-
-  :host([disabled]) {
-    pointer-events: none;
-    color: var(--lumo-disabled-text-color);
-  }
-
-  :host([theme~='primary'][disabled]) {
-    background-color: var(--lumo-contrast-30pct);
-    color: var(--lumo-base-color);
-  }
-
-  :host([theme~='primary'][disabled]) [part] {
-    opacity: 0.7;
-  }
-
-  /* Icons */
-
-  [part] ::slotted(vaadin-icon) {
-    display: inline-block;
-    width: var(--lumo-icon-size-m);
-    height: var(--lumo-icon-size-m);
-  }
-
-  /* Vaadin icons are based on a 16x16 grid (unlike Lumo and Material icons with 24x24), so they look too big by default */
-  [part] ::slotted(vaadin-icon[icon^='vaadin:']) {
-    padding: 0.25em;
-    box-sizing: border-box !important;
-  }
-
-  [part='prefix'] {
-    margin-left: -0.25em;
-    margin-right: 0.25em;
-  }
-
-  [part='suffix'] {
-    margin-left: 0.25em;
-    margin-right: -0.25em;
-  }
-
-  /* Icon-only */
-
-  :host([theme~='icon']:not([theme~='tertiary-inline'])) {
-    min-width: var(--lumo-button-size);
-    padding-left: calc(var(--lumo-button-size) / 4);
-    padding-right: calc(var(--lumo-button-size) / 4);
-  }
-
-  :host([theme~='icon']) [part='prefix'],
-  :host([theme~='icon']) [part='suffix'] {
-    margin-left: 0;
-    margin-right: 0;
-  }
-
-  /* RTL specific styles */
-
-  :host([dir='rtl']) [part='prefix'] {
-    margin-left: 0.25em;
-    margin-right: -0.25em;
-  }
-
-  :host([dir='rtl']) [part='suffix'] {
-    margin-left: -0.25em;
-    margin-right: 0.25em;
-  }
-
-  :host([dir='rtl'][theme~='icon']) [part='prefix'],
-  :host([dir='rtl'][theme~='icon']) [part='suffix'] {
-    margin-left: 0;
-    margin-right: 0;
-  }
-`;
-
-registerStyles('vaadin-button', button, { moduleId: 'lumo-button' });
-
-/**
- * @license
- * Copyright (c) 2021 - 2023 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-
-/**
- * @typedef ReactiveController
- * @type {import('lit').ReactiveController}
- */
-
-/**
- * A mixin for connecting controllers to the element.
- *
- * @polymerMixin
- */
-const ControllerMixin = dedupingMixin((superClass) => {
-  // If the superclass extends from LitElement,
-  // use its own controllers implementation.
-  if (typeof superClass.prototype.addController === 'function') {
-    return superClass;
-  }
-
-  return class ControllerMixinClass extends superClass {
-    constructor() {
-      super();
-
-      /**
-       * @type {Set<ReactiveController>}
-       */
-      this.__controllers = new Set();
-    }
-
-    /** @protected */
-    connectedCallback() {
-      super.connectedCallback();
-
-      this.__controllers.forEach((c) => {
-        if (c.hostConnected) {
-          c.hostConnected();
-        }
-      });
-    }
-
-    /** @protected */
-    disconnectedCallback() {
-      super.disconnectedCallback();
-
-      this.__controllers.forEach((c) => {
-        if (c.hostDisconnected) {
-          c.hostDisconnected();
-        }
-      });
-    }
-
-    /**
-     * Registers a controller to participate in the element update cycle.
-     *
-     * @param {ReactiveController} controller
-     * @protected
-     */
-    addController(controller) {
-      this.__controllers.add(controller);
-      // Call hostConnected if a controller is added after the element is attached.
-      if (this.$ !== undefined && this.isConnected && controller.hostConnected) {
-        controller.hostConnected();
-      }
-    }
-
-    /**
-     * Removes a controller from the element.
-     *
-     * @param {ReactiveController} controller
-     * @protected
-     */
-    removeController(controller) {
-      this.__controllers.delete(controller);
-    }
-  };
-});
-
-/**
- * @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
- */
-
-/**
- * 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;
-            },
-          },
-        },
-      };
-    }
-
-    /**
-     * @return {boolean}
-     * @protected
-     */
-    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) 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) 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();
+const button = i`
+  :host {
+    /* Sizing */
+    --lumo-button-size: var(--lumo-size-m);
+    min-width: calc(var(--lumo-button-size) * 2);
+    height: var(--lumo-button-size);
+    padding: 0 calc(var(--lumo-button-size) / 3 + var(--lumo-border-radius-m) / 2);
+    margin: var(--lumo-space-xs) 0;
+    box-sizing: border-box;
+    /* Style */
+    font-family: var(--lumo-font-family);
+    font-size: var(--lumo-font-size-m);
+    font-weight: 500;
+    color: var(--_lumo-button-color, var(--lumo-primary-text-color));
+    background-color: var(--_lumo-button-background-color, var(--lumo-contrast-5pct));
+    border-radius: var(--lumo-border-radius-m);
+    cursor: var(--lumo-clickable-cursor);
+    -webkit-tap-highlight-color: transparent;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    flex-shrink: 0;
   }
 
-  /**
-   * 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;
+  /* Set only for the internal parts so we don't affect the host vertical alignment */
+  [part='label'],
+  [part='prefix'],
+  [part='suffix'] {
+    line-height: var(--lumo-line-height-xs);
   }
 
-  /**
-   * 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;
+  [part='label'] {
+    padding: calc(var(--lumo-button-size) / 6) 0;
   }
 
-  /** @private */
-  _schedule() {
-    if (!this._scheduled) {
-      this._scheduled = true;
-
-      queueMicrotask(() => {
-        this.flush();
-      });
-    }
+  :host([theme~='small']) {
+    font-size: var(--lumo-font-size-s);
+    --lumo-button-size: var(--lumo-size-s);
   }
 
-  /**
-   * Run the observer callback synchronously.
-   */
-  flush() {
-    if (!this._connected) {
-      return;
-    }
-
-    this._scheduled = false;
-
-    this._processNodes();
+  :host([theme~='large']) {
+    font-size: var(--lumo-font-size-l);
+    --lumo-button-size: var(--lumo-size-l);
   }
 
-  /** @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));
-    }
+  /* For interaction states */
+  :host::before,
+  :host::after {
+    content: '';
+    /* We rely on the host always being relative */
+    position: absolute;
+    z-index: 1;
+    inset: 0;
+    background-color: currentColor;
+    border-radius: inherit;
+    opacity: 0;
+    pointer-events: none;
+  }
 
-    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);
-        }
-      });
-    }
+  /* Hover */
 
-    if (addedNodes.length || removedNodes.length || movedNodes.length) {
-      this.callback({ addedNodes, movedNodes, removedNodes });
+  @media (any-hover: hover) {
+    :host(:hover)::before {
+      opacity: 0.02;
     }
-
-    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 = 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/
- */
+  /* Active */
 
-/**
- * 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()}`;
+  :host::after {
+    transition: opacity 1.4s, transform 0.1s;
+    filter: blur(8px);
   }
 
-  constructor(host, slotName, tagName, config = {}) {
-    super();
-
-    const { initializer, multiple, observe, useUniqueId } = config;
+  :host([active])::before {
+    opacity: 0.05;
+    transition-duration: 0s;
+  }
 
-    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;
+  :host([active])::after {
+    opacity: 0.1;
+    transition-duration: 0s, 0s;
+    transform: scale(0);
+  }
 
-    if (multiple) {
-      this.nodes = [];
-    }
+  /* Keyboard focus */
 
-    // Only generate the default ID if requested by the controller.
-    if (useUniqueId) {
-      this.defaultId = this.constructor.generateId(host, slotName);
-    }
+  :host([focus-ring]) {
+    box-shadow: 0 0 0 2px var(--lumo-primary-color-50pct);
   }
 
-  hostConnected() {
-    if (!this.initialized) {
-      if (this.multiple) {
-        this.initMultiple();
-      } else {
-        this.initSingle();
-      }
+  :host([theme~='primary'][focus-ring]) {
+    box-shadow: 0 0 0 1px var(--lumo-base-color), 0 0 0 3px var(--lumo-primary-color-50pct);
+  }
 
-      if (this.observe) {
-        this.observeSlot();
-      }
+  /* Types (primary, tertiary, tertiary-inline */
 
-      this.initialized = true;
-    }
+  :host([theme~='tertiary']),
+  :host([theme~='tertiary-inline']) {
+    background-color: transparent !important;
+    min-width: 0;
   }
 
-  /** @protected */
-  initSingle() {
-    let node = this.getSlotChild();
-
-    if (!node) {
-      node = this.attachDefaultNode();
-      this.initNode(node);
-    } else {
-      this.node = node;
-      this.initAddedNode(node);
-    }
+  :host([theme~='tertiary']) {
+    padding: 0 calc(var(--lumo-button-size) / 6);
   }
 
-  /** @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);
-      });
-    }
+  :host([theme~='tertiary-inline'])::before {
+    display: none;
   }
 
-  /**
-   * 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;
+  :host([theme~='tertiary-inline']) {
+    margin: 0;
+    height: auto;
+    padding: 0;
+    line-height: inherit;
+    font-size: inherit;
   }
 
-  /**
-   * 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 === '')
-      );
-    });
+  :host([theme~='tertiary-inline']) [part='label'] {
+    padding: 0;
+    overflow: visible;
+    line-height: inherit;
   }
 
-  /**
-   * Return a reference to the node managed by the controller.
-   * @return {Node}
-   */
-  getSlotChild() {
-    return this.getSlotChildren()[0];
+  :host([theme~='primary']) {
+    background-color: var(--_lumo-button-primary-background-color, var(--lumo-primary-color));
+    color: var(--_lumo-button-primary-color, var(--lumo-primary-contrast-color));
+    font-weight: 600;
+    min-width: calc(var(--lumo-button-size) * 2.5);
   }
 
-  /**
-   * 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);
-    }
+  :host([theme~='primary'])::before {
+    background-color: black;
   }
 
-  /**
-   * 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);
+  @media (any-hover: hover) {
+    :host([theme~='primary']:hover)::before {
+      opacity: 0.05;
     }
   }
 
-  /**
-   * 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(slot, ({ addedNodes, removedNodes }) => {
-      const current = this.multiple ? this.nodes : [this.node];
+  :host([theme~='primary'][active])::before {
+    opacity: 0.1;
+  }
 
-      // 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));
+  :host([theme~='primary'][active])::after {
+    opacity: 0.2;
+  }
 
-      if (removedNodes.length) {
-        this.nodes = current.filter((node) => !removedNodes.includes(node));
+  /* Colors (success, error, contrast) */
 
-        removedNodes.forEach((node) => {
-          this.teardownNode(node);
-        });
-      }
+  :host([theme~='success']) {
+    color: var(--lumo-success-text-color);
+  }
 
-      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);
-        }
-      }
-    });
+  :host([theme~='success'][theme~='primary']) {
+    background-color: var(--lumo-success-color);
+    color: var(--lumo-success-contrast-color);
   }
-}
 
-/**
- * @license
- * Copyright (c) 2022 - 2023 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
+  :host([theme~='error']) {
+    color: var(--lumo-error-text-color);
+  }
 
-/**
- * A controller that manages the slotted tooltip element.
- */
-class TooltipController extends SlotController {
-  constructor(host) {
-    // Do not provide slot factory to create tooltip lazily.
-    super(host, 'tooltip');
+  :host([theme~='error'][theme~='primary']) {
+    background-color: var(--lumo-error-color);
+    color: var(--lumo-error-contrast-color);
+  }
 
-    this.setTarget(host);
+  :host([theme~='contrast']) {
+    color: var(--lumo-contrast);
   }
 
-  /**
-   * 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;
-    }
+  :host([theme~='contrast'][theme~='primary']) {
+    background-color: var(--lumo-contrast);
+    color: var(--lumo-base-color);
+  }
 
-    if (this.context !== undefined) {
-      tooltipNode.context = this.context;
-    }
+  /* Disabled state. Keep selectors after other color variants. */
 
-    if (this.manual !== undefined) {
-      tooltipNode.manual = this.manual;
-    }
+  :host([disabled]) {
+    pointer-events: none;
+    color: var(--lumo-disabled-text-color);
+  }
 
-    if (this.opened !== undefined) {
-      tooltipNode.opened = this.opened;
-    }
+  :host([theme~='primary'][disabled]) {
+    background-color: var(--lumo-contrast-30pct);
+    color: var(--lumo-base-color);
+  }
 
-    if (this.position !== undefined) {
-      tooltipNode._position = this.position;
-    }
+  :host([theme~='primary'][disabled]) [part] {
+    opacity: 0.7;
+  }
 
-    if (this.shouldShow !== undefined) {
-      tooltipNode.shouldShow = this.shouldShow;
-    }
+  /* Icons */
 
-    this.__notifyChange();
+  [part] ::slotted(vaadin-icon) {
+    display: inline-block;
+    width: var(--lumo-icon-size-m);
+    height: var(--lumo-icon-size-m);
   }
 
-  /**
-   * Override to notify the host when the tooltip is removed.
-   *
-   * @param {Node} tooltipNode
-   * @protected
-   * @override
-   */
-  teardownNode() {
-    this.__notifyChange();
+  /* Vaadin icons are based on a 16x16 grid (unlike Lumo and Material icons with 24x24), so they look too big by default */
+  [part] ::slotted(vaadin-icon[icon^='vaadin:']) {
+    padding: 0.25em;
+    box-sizing: border-box !important;
   }
 
-  /**
-   * 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;
-    }
+  [part='prefix'] {
+    margin-left: -0.25em;
+    margin-right: 0.25em;
   }
 
-  /**
-   * 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;
-    }
+  [part='suffix'] {
+    margin-left: 0.25em;
+    margin-right: -0.25em;
   }
 
-  /**
-   * Toggle manual state on the slotted tooltip.
-   * @param {boolean} manual
-   */
-  setManual(manual) {
-    this.manual = manual;
+  /* Icon-only */
 
-    const tooltipNode = this.node;
-    if (tooltipNode) {
-      tooltipNode.manual = manual;
-    }
+  :host([theme~='icon']:not([theme~='tertiary-inline'])) {
+    min-width: var(--lumo-button-size);
+    padding-left: calc(var(--lumo-button-size) / 4);
+    padding-right: calc(var(--lumo-button-size) / 4);
   }
 
-  /**
-   * 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([theme~='icon']) [part='prefix'],
+  :host([theme~='icon']) [part='suffix'] {
+    margin-left: 0;
+    margin-right: 0;
   }
 
-  /**
-   * 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;
-    }
-  }
+  /* RTL specific styles */
 
-  /**
-   * 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;
-    }
+  :host([dir='rtl']) [part='prefix'] {
+    margin-left: 0.25em;
+    margin-right: -0.25em;
   }
 
-  /**
-   * 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;
-    }
+  :host([dir='rtl']) [part='suffix'] {
+    margin-left: -0.25em;
+    margin-right: 0.25em;
   }
 
-  /** @private */
-  __notifyChange() {
-    this.dispatchEvent(new CustomEvent('tooltip-changed', { detail: { node: this.node } }));
+  :host([dir='rtl'][theme~='icon']) [part='prefix'],
+  :host([dir='rtl'][theme~='icon']) [part='suffix'] {
+    margin-left: 0;
+    margin-right: 0;
   }
-}
+`;
+
+registerStyles('vaadin-button', button, { moduleId: 'lumo-button' });
 
 /**
  * @license