@everymatrix/general-registration 1.21.2 → 1.21.4

package/dist/components/input-field-shared-styles.js

@@ -1,27 +1,810 @@
-import { r as registerStyles, i, T as ThemableMixin, A as DirMixin, P as PolymerElement, h as html, j as requiredField, k as helper, d as dedupingMixin, D as DelegateStateMixin, V as ValidateMixin, I as InputMixin, c as DelegateFocusMixin, F as FieldMixin, K as KeyboardMixin, y as Debouncer, z as timeOut } from './field-mixin.js';
+import { o, i, h as html, P as PolymerElement, d as dedupingMixin, I as InputMixin, K as KeyboardMixin, D as DelegateStateMixin, V as ValidateMixin, c as DelegateFocusMixin, F as FieldMixin } from './field-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 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);
 
 registerStyles(
   'vaadin-input-container',
   i`
     :host {
-      border-radius: var(--lumo-border-radius-m);
       background-color: var(--lumo-contrast-10pct);
-      padding: 0 calc(0.375em + var(--lumo-border-radius-m) / 4 - 1px);
+      padding: 0 calc(0.375em + var(--_input-container-radius) / 4 - 1px);
       font-weight: 500;
       line-height: 1;
       position: relative;
       cursor: text;
       box-sizing: border-box;
+      border-radius:
+        /* See https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius#syntax */
+        var(--vaadin-input-field-top-start-radius, var(--_input-container-radius))
+        var(--vaadin-input-field-top-end-radius, var(--_input-container-radius))
+        var(--vaadin-input-field-bottom-end-radius, var(--_input-container-radius))
+        var(--vaadin-input-field-bottom-start-radius, var(--_input-container-radius));
+      /* Fallback */
+      --_input-container-radius: var(--vaadin-input-field-border-radius, var(--lumo-border-radius-m));
+      /* Default field border color */
+      --_input-border-color: var(--vaadin-input-field-border-color, var(--lumo-contrast-50pct));
+    }
+
+    :host([dir='rtl']) {
+      border-radius:
+        /* Don't use logical props, see https://github.com/vaadin/vaadin-time-picker/issues/145 */
+        var(--vaadin-input-field-top-end-radius, var(--_input-container-radius))
+        var(--vaadin-input-field-top-start-radius, var(--_input-container-radius))
+        var(--vaadin-input-field-bottom-start-radius, var(--_input-container-radius))
+        var(--vaadin-input-field-bottom-end-radius, var(--_input-container-radius));
     }
 
     /* Used for hover and activation effects */
     :host::after {
       content: '';
       position: absolute;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
+      inset: 0;
       border-radius: inherit;
       pointer-events: none;
       background-color: var(--lumo-contrast-50pct);
@@ -72,7 +855,6 @@ registerStyles(
     }
 
     /* Slotted icons */
-    ::slotted(iron-icon),
     ::slotted(vaadin-icon) {
       color: var(--lumo-contrast-60pct);
       width: var(--lumo-icon-size-m);
@@ -80,7 +862,6 @@ registerStyles(
     }
 
     /* Vaadin icons are based on a 16x16 grid (unlike Lumo and Material icons with 24x24), so they look too big by default */
-    ::slotted(iron-icon[icon^='vaadin:']),
     ::slotted(vaadin-icon[icon^='vaadin:']) {
       padding: 0.25em;
       box-sizing: border-box !important;
@@ -162,10 +943,162 @@ 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/
+ */
+
+/**
+ * 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/
  */
 
+/**
+ * @customElement
+ * @extends HTMLElement
+ * @mixes ThemableMixin
+ * @mixes DirMixin
+ */
 class InputContainer extends ThemableMixin(DirMixin(PolymerElement)) {
   static get is() {
     return 'vaadin-input-container';
@@ -178,6 +1111,25 @@ class InputContainer extends ThemableMixin(DirMixin(PolymerElement)) {
           display: flex;
           align-items: center;
           flex: 0 1 auto;
+          border-radius:
+            /* See https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius */
+            var(--vaadin-input-field-top-start-radius, var(--__border-radius))
+            var(--vaadin-input-field-top-end-radius, var(--__border-radius))
+            var(--vaadin-input-field-bottom-end-radius, var(--__border-radius))
+            var(--vaadin-input-field-bottom-start-radius, var(--__border-radius));
+          --_border-radius: var(--vaadin-input-field-border-radius, 0px);
+          --_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);
+        }
+
+        :host([dir='rtl']) {
+          border-radius:
+            /* Don't use logical props, see https://github.com/vaadin/vaadin-time-picker/issues/145 */
+            var(--vaadin-input-field-top-end-radius, var(--_border-radius))
+            var(--vaadin-input-field-top-start-radius, var(--_border-radius))
+            var(--vaadin-input-field-bottom-start-radius, var(--_border-radius))
+            var(--vaadin-input-field-bottom-end-radius, var(--_border-radius));
         }
 
         :host([hidden]) {
@@ -278,221 +1230,426 @@ class InputContainer extends ThemableMixin(DirMixin(PolymerElement)) {
   }
 }
 
-customElements.define(InputContainer.is, InputContainer);
+defineCustomElement(InputContainer);
 
 /**
  * @license
- * Copyright (c) 2021 - 2022 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/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 testUserAgent = (regexp) => regexp.test(navigator.userAgent);
-
-const testPlatform = (regexp) => regexp.test(navigator.platform);
+/**
+ * Async interface wrapper around `setTimeout`.
+ *
+ * @namespace
+ * @summary Async interface wrapper around `setTimeout`.
+ */
+const timeOut = {
+  /**
+   * Returns a sub-module with the async interface providing the provided
+   * delay.
+   *
+   * @memberof timeOut
+   * @param {number=} delay Time to wait before calling callbacks in ms
+   * @return {!AsyncInterface} An async timeout interface
+   */
+  after(delay) {
+    return {
+      run(fn) {
+        return window.setTimeout(fn, delay);
+      },
+      cancel(handle) {
+        window.clearTimeout(handle);
+      },
+    };
+  },
+  /**
+   * Enqueues a function called in the next task.
+   *
+   * @memberof timeOut
+   * @param {!Function} fn Callback to run
+   * @param {number=} delay Delay in milliseconds
+   * @return {number} Handle used for canceling task
+   */
+  run(fn, delay) {
+    return window.setTimeout(fn, delay);
+  },
+  /**
+   * Cancels a previously enqueued `timeOut` callback.
+   *
+   * @memberof timeOut
+   * @param {number} handle Handle returned from `run` of callback to cancel
+   * @return {void}
+   */
+  cancel(handle) {
+    window.clearTimeout(handle);
+  },
+};
 
-const testVendor = (regexp) => regexp.test(navigator.vendor);
+/**
+@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
+*/
 
-testUserAgent(/Android/);
+const debouncerQueue = new Set();
 
-testUserAgent(/Chrome/) && testVendor(/Google Inc/);
+/**
+ * @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;
+  }
 
-const isFirefox = testUserAgent(/Firefox/);
+  constructor() {
+    this._asyncModule = null;
+    this._callback = null;
+    this._timer = null;
+  }
 
-// IPadOS 13 lies and says it's a Mac, but we can distinguish by detecting touch support.
-const isIPad = testPlatform(/^iPad/) || (testPlatform(/^Mac/) && navigator.maxTouchPoints > 1);
+  /**
+   * 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();
+    });
+  }
 
-const isIPhone = testPlatform(/^iPhone/);
+  /**
+   * 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);
+    }
+  }
 
-const isIOS = isIPhone || isIPad;
+  /**
+   * Cancels a debouncer's async callback.
+   *
+   * @return {void}
+   */
+  _cancelAsync() {
+    if (this.isActive()) {
+      this._asyncModule.cancel(/** @type {number} */ (this._timer));
+      this._timer = null;
+    }
+  }
 
-const isSafari = testUserAgent(/^((?!chrome|android).)*safari/i);
+  /**
+   * Flushes an active debouncer and returns a reference to itself.
+   *
+   * @return {void}
+   */
+  flush() {
+    if (this.isActive()) {
+      this.cancel();
+      this._callback();
+    }
+  }
 
-const isTouch = (() => {
-  try {
-    document.createEvent('TouchEvent');
-    return true;
-  } catch (e) {
-    return false;
+  /**
+   * Returns true if the debouncer is active.
+   *
+   * @return {boolean} True if active.
+   */
+  isActive() {
+    return this._timer != null;
   }
-})();
+}
 
 /**
  * @license
- * Copyright (c) 2017 - 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/
  */
 
-const fieldButton = i`
-  [part$='button'] {
-    flex: none;
-    width: 1em;
-    height: 1em;
-    line-height: 1;
-    font-size: var(--lumo-icon-size-m);
-    text-align: center;
-    color: var(--lumo-contrast-60pct);
-    transition: 0.2s color;
-    cursor: var(--lumo-clickable-cursor);
-  }
-
-  [part$='button']:hover {
-    color: var(--lumo-contrast-90pct);
-  }
+const stylesMap = new WeakMap();
 
-  :host([disabled]) [part$='button'],
-  :host([readonly]) [part$='button'] {
-    color: var(--lumo-contrast-20pct);
-    cursor: default;
+/**
+ * Get all the styles inserted into root.
+ * @param {DocumentOrShadowRoot} root
+ * @return {Set<string>}
+ */
+function getRootStyles(root) {
+  if (!stylesMap.has(root)) {
+    stylesMap.set(root, new Set());
   }
 
-  [part$='button']::before {
-    font-family: 'lumo-icons';
-    display: block;
-  }
-`;
-registerStyles('', fieldButton, { moduleId: 'lumo-field-button' });
+  return stylesMap.get(root);
+}
 
 /**
- * @license
- * Copyright (c) 2017 - 2022 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ * Insert styles into the root.
+ * @param {string} styles
+ * @param {DocumentOrShadowRoot} root
  */
+function insertStyles(styles, root) {
+  const style = document.createElement('style');
+  style.textContent = styles;
 
-const inputField = i`
-  :host {
-    --lumo-text-field-size: var(--lumo-size-m);
-    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;
+  if (root === document) {
+    document.head.appendChild(style);
+  } else {
+    root.insertBefore(style, root.firstChild);
   }
+}
 
-  :host::before {
-    height: var(--lumo-text-field-size);
-    box-sizing: border-box;
-    display: inline-flex;
-    align-items: center;
-  }
+/**
+ * Mixin to insert styles into the outer scope to handle slotted components.
+ * This is useful e.g. to hide native `<input type="number">` controls.
+ *
+ * @polymerMixin
+ */
+const SlotStylesMixin = dedupingMixin(
+  (superclass) =>
+    class SlotStylesMixinClass extends superclass {
+      /**
+       * List of styles to insert into root.
+       * @protected
+       */
+      get slotStyles() {
+        return {};
+      }
 
-  :host([focused]:not([readonly])) [part='label'] {
-    color: var(--lumo-primary-text-color);
-  }
+      /** @protected */
+      connectedCallback() {
+        super.connectedCallback();
 
-  :host([focused]) [part='input-field'] ::slotted(:is(input, textarea)) {
-    -webkit-mask-image: none;
-    mask-image: none;
-  }
+        this.__applySlotStyles();
+      }
 
-  ::slotted(:is(input, textarea):placeholder-shown) {
-    color: var(--lumo-secondary-text-color);
-  }
+      /** @private */
+      __applySlotStyles() {
+        const root = this.getRootNode();
+        const rootStyles = getRootStyles(root);
 
-  /* Hover */
-  :host(:hover:not([readonly]):not([focused])) [part='label'] {
-    color: var(--lumo-body-text-color);
-  }
+        this.slotStyles.forEach((styles) => {
+          if (!rootStyles.has(styles)) {
+            insertStyles(styles, root);
+            rootStyles.add(styles);
+          }
+        });
+      }
+    },
+);
 
-  :host(:hover:not([readonly]):not([focused])) [part='input-field']::after {
-    opacity: 0.1;
-  }
+/**
+ * @license
+ * Copyright (c) 2021 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
 
-  /* Touch device adjustment */
-  @media (pointer: coarse) {
-    :host(:hover:not([readonly]):not([focused])) [part='label'] {
-      color: var(--lumo-secondary-text-color);
-    }
+const testUserAgent = (regexp) => regexp.test(navigator.userAgent);
 
-    :host(:hover:not([readonly]):not([focused])) [part='input-field']::after {
-      opacity: 0;
-    }
+const testPlatform = (regexp) => regexp.test(navigator.platform);
 
-    :host(:active:not([readonly]):not([focused])) [part='input-field']::after {
-      opacity: 0.2;
-    }
-  }
+const testVendor = (regexp) => regexp.test(navigator.vendor);
 
-  /* Trigger when not focusing using the keyboard */
-  :host([focused]:not([focus-ring]):not([readonly])) [part='input-field']::after {
-    transform: scaleX(0);
-    transition-duration: 0.15s, 1s;
-  }
+testUserAgent(/Android/u);
+
+testUserAgent(/Chrome/u) && testVendor(/Google Inc/u);
 
-  /* Focus-ring */
-  :host([focus-ring]) [part='input-field'] {
-    box-shadow: 0 0 0 2px var(--lumo-primary-color-50pct);
-  }
+testUserAgent(/Firefox/u);
 
-  /* Read-only and disabled */
-  :host(:is([readonly], [disabled])) ::slotted(:is(input, textarea):placeholder-shown) {
-    opacity: 0;
-  }
+// IPadOS 13 lies and says it's a Mac, but we can distinguish by detecting touch support.
+testPlatform(/^iPad/u) || (testPlatform(/^Mac/u) && navigator.maxTouchPoints > 1);
 
-  /* Disabled style */
-  :host([disabled]) {
-    pointer-events: none;
-  }
+testPlatform(/^iPhone/u);
 
-  :host([disabled]) [part='label'],
-  :host([disabled]) [part='input-field'] ::slotted(*) {
-    color: var(--lumo-disabled-text-color);
-    -webkit-text-fill-color: var(--lumo-disabled-text-color);
-  }
+testUserAgent(/^((?!chrome|android).)*safari/iu);
 
-  /* Invalid style */
-  :host([invalid][focus-ring]) [part='input-field'] {
-    box-shadow: 0 0 0 2px var(--lumo-error-color-50pct);
+const isTouch = (() => {
+  try {
+    document.createEvent('TouchEvent');
+    return true;
+  } catch (e) {
+    return false;
   }
+})();
 
-  :host([input-prevented]) [part='input-field'] {
-    animation: shake 0.15s infinite;
-  }
+/**
+ * @license
+ * Copyright (c) 2021 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
 
-  @keyframes shake {
-    25% {
-      transform: translateX(4px);
+/**
+ * A mixin that manages the clear button.
+ *
+ * @polymerMixin
+ * @mixes InputMixin
+ * @mixes KeyboardMixin
+ */
+const ClearButtonMixin = (superclass) =>
+  class ClearButtonMixinClass extends InputMixin(KeyboardMixin(superclass)) {
+    static get properties() {
+      return {
+        /**
+         * Set to true to display the clear icon which clears the input.
+         *
+         * It is up to the component to choose where to place the clear icon:
+         * in the Shadow DOM or in the light DOM. In any way, a reference to
+         * the clear icon element should be provided via the `clearElement` getter.
+         *
+         * @attr {boolean} clear-button-visible
+         */
+        clearButtonVisible: {
+          type: Boolean,
+          reflectToAttribute: true,
+          value: false,
+        },
+      };
     }
-    75% {
-      transform: translateX(-4px);
+
+    /**
+     * Any element extending this mixin is required to implement this getter.
+     * It returns the reference to the clear button element.
+     *
+     * @protected
+     * @return {Element | null | undefined}
+     */
+    get clearElement() {
+      console.warn(`Please implement the 'clearElement' property in <${this.localName}>`);
+      return null;
     }
-  }
 
-  /* Small theme */
-  :host([theme~='small']) {
-    font-size: var(--lumo-font-size-s);
-    --lumo-text-field-size: var(--lumo-size-s);
-  }
+    /** @protected */
+    ready() {
+      super.ready();
 
-  :host([theme~='small']) [part='label'] {
-    font-size: var(--lumo-font-size-xs);
-  }
+      if (this.clearElement) {
+        this.clearElement.addEventListener('mousedown', (event) => this._onClearButtonMouseDown(event));
+        this.clearElement.addEventListener('click', (event) => this._onClearButtonClick(event));
+      }
+    }
 
-  :host([theme~='small']) [part='error-message'] {
-    font-size: var(--lumo-font-size-xxs);
-  }
+    /**
+     * @param {Event} event
+     * @protected
+     */
+    _onClearButtonClick(event) {
+      event.preventDefault();
+      this._onClearAction();
+    }
 
-  /* Slotted content */
-  [part='input-field'] ::slotted(:not(iron-icon):not(vaadin-icon):not(input):not(textarea)) {
-    color: var(--lumo-secondary-text-color);
-    font-weight: 400;
-  }
+    /**
+     * @param {MouseEvent} event
+     * @protected
+     */
+    _onClearButtonMouseDown(event) {
+      event.preventDefault();
+      if (!isTouch) {
+        this.inputElement.focus();
+      }
+    }
 
-  [part='clear-button']::before {
-    content: var(--lumo-icons-cross);
-  }
-`;
+    /**
+     * Override an event listener inherited from `KeydownMixin` to clear on Esc.
+     * Components that extend this mixin can prevent this behavior by overriding
+     * this method without calling `super._onEscape` to provide custom logic.
+     *
+     * @param {KeyboardEvent} event
+     * @protected
+     * @override
+     */
+    _onEscape(event) {
+      super._onEscape(event);
 
-const inputFieldShared$1 = [requiredField, fieldButton, helper, inputField];
+      if (this.clearButtonVisible && !!this.value) {
+        event.stopPropagation();
+        this._onClearAction();
+      }
+    }
 
-registerStyles('', inputFieldShared$1, {
-  moduleId: 'lumo-input-field-shared-styles',
-});
+    /**
+     * Clears the value and dispatches `input` and `change` events
+     * on the input element. This method should be called
+     * when the clear action originates from the user.
+     *
+     * @protected
+     */
+    _onClearAction() {
+      this.clear();
+      // Note, according to the HTML spec, the native change event isn't composed
+      // while the input event is composed.
+      this.inputElement.dispatchEvent(new Event('input', { bubbles: true, composed: true }));
+      this.inputElement.dispatchEvent(new Event('change', { bubbles: true }));
+    }
+  };
 
 /**
  * @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/
  */
 
@@ -620,83 +1777,7 @@ const InputConstraintsMixin = dedupingMixin(
 
 /**
  * @license
- * Copyright (c) 2021 - 2022 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-
-const stylesMap = new WeakMap();
-
-/**
- * Get all the styles inserted into root.
- * @param {DocumentOrShadowRoot} root
- * @return {Set<string>}
- */
-function getRootStyles(root) {
-  if (!stylesMap.has(root)) {
-    stylesMap.set(root, new Set());
-  }
-
-  return stylesMap.get(root);
-}
-
-/**
- * Insert styles into the root.
- * @param {string} styles
- * @param {DocumentOrShadowRoot} root
- */
-function insertStyles(styles, root) {
-  const style = document.createElement('style');
-  style.textContent = styles;
-
-  if (root === document) {
-    document.head.appendChild(style);
-  } else {
-    root.insertBefore(style, root.firstChild);
-  }
-}
-
-/**
- * Mixin to insert styles into the outer scope to handle slotted components.
- * This is useful e.g. to hide native `<input type="number">` controls.
- *
- * @polymerMixin
- */
-const SlotStylesMixin = dedupingMixin(
-  (superclass) =>
-    class SlotStylesMixinClass extends superclass {
-      /**
-       * List of styles to insert into root.
-       * @protected
-       */
-      get slotStyles() {
-        return {};
-      }
-
-      /** @protected */
-      connectedCallback() {
-        super.connectedCallback();
-
-        this.__applySlotStyles();
-      }
-
-      /** @private */
-      __applySlotStyles() {
-        const root = this.getRootNode();
-        const rootStyles = getRootStyles(root);
-
-        this.slotStyles.forEach((styles) => {
-          if (!rootStyles.has(styles)) {
-            insertStyles(styles, root);
-            rootStyles.add(styles);
-          }
-        });
-      }
-    },
-);
-
-/**
- * @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/
  */
 
@@ -708,11 +1789,12 @@ const SlotStylesMixin = dedupingMixin(
  * @mixes FieldMixin
  * @mixes InputConstraintsMixin
  * @mixes KeyboardMixin
+ * @mixes ClearButtonMixin
  * @mixes SlotStylesMixin
  */
 const InputControlMixin = (superclass) =>
   class InputControlMixinClass extends SlotStylesMixin(
-    DelegateFocusMixin(InputConstraintsMixin(FieldMixin(KeyboardMixin(superclass)))),
+    DelegateFocusMixin(InputConstraintsMixin(FieldMixin(ClearButtonMixin(KeyboardMixin(superclass))))),
   ) {
     static get properties() {
       return {
@@ -741,16 +1823,6 @@ const InputControlMixin = (superclass) =>
           value: false,
         },
 
-        /**
-         * Set to true to display the clear icon which clears the input.
-         * @attr {boolean} clear-button-visible
-         */
-        clearButtonVisible: {
-          type: Boolean,
-          reflectToAttribute: true,
-          value: false,
-        },
-
         /**
          * The name of this field.
          */
@@ -798,17 +1870,6 @@ const InputControlMixin = (superclass) =>
       this._boundOnBeforeInput = this._onBeforeInput.bind(this);
     }
 
-    /**
-     * Any element extending this mixin is required to implement this getter.
-     * It returns the reference to the clear button element.
-     * @protected
-     * @return {Element | null | undefined}
-     */
-    get clearElement() {
-      console.warn(`Please implement the 'clearElement' property in <${this.localName}>`);
-      return null;
-    }
-
     /** @protected */
     get slotStyles() {
       // Needed for Safari, where ::slotted(...)::placeholder does not work
@@ -822,36 +1883,6 @@ const InputControlMixin = (superclass) =>
       ];
     }
 
-    /** @protected */
-    ready() {
-      super.ready();
-
-      if (this.clearElement) {
-        this.clearElement.addEventListener('click', (e) => this._onClearButtonClick(e));
-        this.clearElement.addEventListener('mousedown', (e) => this._onClearButtonMouseDown(e));
-      }
-    }
-
-    /**
-     * @param {Event} event
-     * @protected
-     */
-    _onClearButtonClick(event) {
-      event.preventDefault();
-      this.__clear();
-    }
-
-    /**
-     * @param {Event} event
-     * @protected
-     */
-    _onClearButtonMouseDown(event) {
-      event.preventDefault();
-      if (!isTouch) {
-        this.inputElement.focus();
-      }
-    }
-
     /**
      * Override an event listener from `DelegateFocusMixin`.
      * @param {FocusEvent} event
@@ -866,23 +1897,6 @@ const InputControlMixin = (superclass) =>
       }
     }
 
-    /**
-     * Override an event listener inherited from `KeydownMixin` to clear on Esc.
-     * Components that extend this mixin can prevent this behavior by overriding
-     * this method without calling `super._onEscape` to provide custom logic.
-     * @param {KeyboardEvent} event
-     * @protected
-     * @override
-     */
-    _onEscape(event) {
-      super._onEscape(event);
-
-      if (this.clearButtonVisible && !!this.value) {
-        event.stopPropagation();
-        this.__clear();
-      }
-    }
-
     /**
      * Override an event listener inherited from `InputMixin`
      * to capture native `change` event and make sure that
@@ -907,13 +1921,6 @@ const InputControlMixin = (superclass) =>
       );
     }
 
-    /** @private */
-    __clear() {
-      this.clear();
-      this.inputElement.dispatchEvent(new Event('input', { bubbles: true, composed: true }));
-      this.inputElement.dispatchEvent(new Event('change', { bubbles: true }));
-    }
-
     /**
      * Override a method from `InputMixin`.
      * @param {!HTMLElement} input
@@ -1015,8 +2022,8 @@ const InputControlMixin = (superclass) =>
     _allowedCharPatternChanged(charPattern) {
       if (charPattern) {
         try {
-          this.__allowedCharRegExp = new RegExp(`^${charPattern}$`);
-          this.__allowedTextRegExp = new RegExp(`^${charPattern}*$`);
+          this.__allowedCharRegExp = new RegExp(`^${charPattern}$`, 'u');
+          this.__allowedTextRegExp = new RegExp(`^${charPattern}*$`, 'u');
         } catch (e) {
           console.error(e);
         }
@@ -1039,7 +2046,7 @@ const InputControlMixin = (superclass) =>
 
 /**
  * @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/
  */
 
@@ -1050,7 +2057,7 @@ const clearButton = i`
   }
 
   [part='clear-button']::before {
-    content: '✕';
+    content: '\\2715';
   }
 
   :host([clear-button-visible][has-value]:not([disabled]):not([readonly])) [part='clear-button'] {
@@ -1060,7 +2067,7 @@ const clearButton = i`
 
 /**
  * @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/
  */
 
@@ -1085,11 +2092,24 @@ const fieldShared = i`
   :host(:not([has-label])) [part='label'] {
     display: none;
   }
+
+  @media (forced-colors: active) {
+    :host(:not([readonly])) [part='input-field'] {
+      outline: 1px solid;
+      outline-offset: -1px;
+    }
+    :host([focused]) [part='input-field'] {
+      outline-width: 2px;
+    }
+    :host([disabled]) [part='input-field'] {
+      outline-color: GrayText;
+    }
+  }
 `;
 
 /**
  * @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/
  */
 
@@ -1105,10 +2125,10 @@ const inputFieldContainer = i`
 
 /**
  * @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/
  */
 
 const inputFieldShared = [fieldShared, inputFieldContainer, clearButton];
 
-export { InputConstraintsMixin as I, isFirefox as a, isIOS as b, InputControlMixin as c, inputFieldShared as d, isSafari as e, isTouch as f, inputFieldShared$1 as i };
+export { InputConstraintsMixin as I, InputControlMixin as a, inputFieldShared as i };