@everymatrix/general-registration 1.10.5 → 1.10.11

package/dist/components/date-input2.js

@@ -1,6 +1,8 @@
-import { proxyCustomElement, HTMLElement as HTMLElement$1, createEvent, h } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { t as translate$1 } from './locale.utils.js';
-import { i, r as registerStyles, m as menuOverlay, a as microTask, D as DisabledMixin, K as KeyboardMixin, T as TabindexMixin, F as FocusMixin, E as ElementMixin, b as ThemableMixin, C as ControllerMixin, P as PolymerElement, h as html, c as TooltipController, d as inputFieldShared, e as dedupingMixin, f as ElementMixin$1, w as wrap$1, g as PositionMixin, O as Overlay, l as legacyOptimizations, u as useShadow, j as OptionalMutableData, s as suppressTemplateNotifications, t as templatize, k as timeOut, n as microTask$1, o as modelForElement, p as matches, q as translate, v as isFirefox, x as Debouncer$1, y as timeOut$1, z as afterNextRender, A as DirMixin, B as DelegateFocusMixin, I as InputConstraintsMixin, G as isIOS, V as VirtualKeyboardController, H as InputControlMixin, J as InputController, L as LabelledInputController, M as inputFieldShared$1 } from './virtual-keyboard-controller.js';
+import { i, r as registerStyles, a as inputFieldShared, d as dedupingMixin, E as ElementMixin, w as wrap, l as legacyOptimizations, u as useShadow, P as PolymerElement, s as suppressTemplateNotifications, t as timeOut, m as microTask, b as matches, c as translate, F as FocusMixin, T as ThemableMixin, h as html, D as Debouncer$1, e as timeOut$1, C as ControllerMixin, f as DirMixin, g as DelegateFocusMixin, I as InputConstraintsMixin, K as KeyboardMixin, j as InputControlMixin, k as InputController, L as LabelledInputController, n as TooltipController, o as inputFieldShared$1, p as ElementMixin$1 } from './input-field-shared-styles.js';
+import { m as menuOverlay, P as PositionMixin, O as Overlay, a as OptionalMutableData, t as templatize, b as modelForElement, i as isFirefox, c as afterNextRender, d as isIOS, V as VirtualKeyboardController } from './virtual-keyboard-controller.js';
+import { a as addListener, s as setTouchAction } from './vaadin-button.js';
 
 const datePickerOverlay = i`
   [part='overlay'] {
@@ -56,1435 +58,6 @@ registerStyles('vaadin-date-picker-overlay', [menuOverlay, datePickerOverlay], {
   moduleId: 'lumo-date-picker-overlay',
 });
 
-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;
-  }
-
-  /* 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;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 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),
-  [part] ::slotted(iron-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:']),
-  [part] ::slotted(iron-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) 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 passiveTouchGestures = false;
-const wrap = (node) => node;
-
-// Detect native touch action support
-const HAS_NATIVE_TA = typeof document.head.style.touchAction === 'string';
-const GESTURE_KEY = '__polymerGestures';
-const HANDLED_OBJ = '__polymerGesturesHandled';
-const TOUCH_ACTION = '__polymerGesturesTouchAction';
-// Radius for tap and track
-const TAP_DISTANCE = 25;
-const TRACK_DISTANCE = 5;
-// Number of last N track positions to keep
-const TRACK_LENGTH = 2;
-
-const MOUSE_EVENTS = ['mousedown', 'mousemove', 'mouseup', 'click'];
-// An array of bitmask values for mapping MouseEvent.which to MouseEvent.buttons
-const MOUSE_WHICH_TO_BUTTONS = [0, 1, 4, 2];
-const MOUSE_HAS_BUTTONS = (function () {
-  try {
-    return new MouseEvent('test', { buttons: 1 }).buttons === 1;
-  } catch (e) {
-    return false;
-  }
-})();
-
-/**
- * @param {string} name Possible mouse event name
- * @return {boolean} true if mouse event, false if not
- */
-function isMouseEvent(name) {
-  return MOUSE_EVENTS.indexOf(name) > -1;
-}
-
-/* eslint no-empty: ["error", { "allowEmptyCatch": true }] */
-// check for passive event listeners
-let supportsPassive = false;
-(function () {
-  try {
-    const opts = Object.defineProperty({}, 'passive', {
-      // eslint-disable-next-line getter-return
-      get() {
-        supportsPassive = true;
-      },
-    });
-    window.addEventListener('test', null, opts);
-    window.removeEventListener('test', null, opts);
-  } catch (e) {}
-})();
-
-/**
- * Generate settings for event listeners, dependant on `passiveTouchGestures`
- *
- * @param {string} eventName Event name to determine if `{passive}` option is
- *   needed
- * @return {{passive: boolean} | undefined} Options to use for addEventListener
- *   and removeEventListener
- */
-function PASSIVE_TOUCH(eventName) {
-  if (isMouseEvent(eventName) || eventName === 'touchend') {
-    return;
-  }
-  if (HAS_NATIVE_TA && supportsPassive && passiveTouchGestures) {
-    return { passive: true };
-  }
-}
-
-// Check for touch-only devices
-const IS_TOUCH_ONLY = navigator.userAgent.match(/iP(?:[oa]d|hone)|Android/);
-
-// Defined at https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#enabling-and-disabling-form-controls:-the-disabled-attribute
-/** @type {!Object<boolean>} */
-const canBeDisabled = {
-  button: true,
-  command: true,
-  fieldset: true,
-  input: true,
-  keygen: true,
-  optgroup: true,
-  option: true,
-  select: true,
-  textarea: true,
-};
-
-/**
- * @param {MouseEvent} ev event to test for left mouse button down
- * @return {boolean} has left mouse button down
- */
-function hasLeftMouseButton(ev) {
-  const type = ev.type;
-  // Exit early if the event is not a mouse event
-  if (!isMouseEvent(type)) {
-    return false;
-  }
-  // Ev.button is not reliable for mousemove (0 is overloaded as both left button and no buttons)
-  // instead we use ev.buttons (bitmask of buttons) or fall back to ev.which (deprecated, 0 for no buttons, 1 for left button)
-  if (type === 'mousemove') {
-    // Allow undefined for testing events
-    let buttons = ev.buttons === undefined ? 1 : ev.buttons;
-    if (ev instanceof window.MouseEvent && !MOUSE_HAS_BUTTONS) {
-      buttons = MOUSE_WHICH_TO_BUTTONS[ev.which] || 0;
-    }
-    // Buttons is a bitmask, check that the left button bit is set (1)
-    return Boolean(buttons & 1);
-  }
-  // Allow undefined for testing events
-  const button = ev.button === undefined ? 0 : ev.button;
-  // Ev.button is 0 in mousedown/mouseup/click for left button activation
-  return button === 0;
-}
-
-function isSyntheticClick(ev) {
-  if (ev.type === 'click') {
-    // Ev.detail is 0 for HTMLElement.click in most browsers
-    if (ev.detail === 0) {
-      return true;
-    }
-    // In the worst case, check that the x/y position of the click is within
-    // the bounding box of the target of the event
-    // Thanks IE 10 >:(
-    const t = _findOriginalTarget(ev);
-    // Make sure the target of the event is an element so we can use getBoundingClientRect,
-    // if not, just assume it is a synthetic click
-    if (!t.nodeType || /** @type {Element} */ (t).nodeType !== Node.ELEMENT_NODE) {
-      return true;
-    }
-    const bcr = /** @type {Element} */ (t).getBoundingClientRect();
-    // Use page x/y to account for scrolling
-    const x = ev.pageX,
-      y = ev.pageY;
-    // Ev is a synthetic click if the position is outside the bounding box of the target
-    return !(x >= bcr.left && x <= bcr.right && y >= bcr.top && y <= bcr.bottom);
-  }
-  return false;
-}
-
-const POINTERSTATE = {
-  mouse: {
-    target: null,
-    mouseIgnoreJob: null,
-  },
-  touch: {
-    x: 0,
-    y: 0,
-    id: -1,
-    scrollDecided: false,
-  },
-};
-
-function firstTouchAction(ev) {
-  let ta = 'auto';
-  const path = getComposedPath(ev);
-  for (let i = 0, n; i < path.length; i++) {
-    n = path[i];
-    if (n[TOUCH_ACTION]) {
-      ta = n[TOUCH_ACTION];
-      break;
-    }
-  }
-  return ta;
-}
-
-function trackDocument(stateObj, movefn, upfn) {
-  stateObj.movefn = movefn;
-  stateObj.upfn = upfn;
-  document.addEventListener('mousemove', movefn);
-  document.addEventListener('mouseup', upfn);
-}
-
-function untrackDocument(stateObj) {
-  document.removeEventListener('mousemove', stateObj.movefn);
-  document.removeEventListener('mouseup', stateObj.upfn);
-  stateObj.movefn = null;
-  stateObj.upfn = null;
-}
-
-/**
- * Returns the composedPath for the given event.
- * @param {Event} event to process
- * @return {!Array<!EventTarget>} Path of the event
- */
-const getComposedPath =
-  window.ShadyDOM && window.ShadyDOM.noPatch
-    ? window.ShadyDOM.composedPath
-    : (event) => (event.composedPath && event.composedPath()) || [];
-
-/** @type {!Object<string, !GestureRecognizer>} */
-const gestures = {};
-
-/** @type {!Array<!GestureRecognizer>} */
-const recognizers = [];
-
-/**
- * Finds the element rendered on the screen at the provided coordinates.
- *
- * Similar to `document.elementFromPoint`, but pierces through
- * shadow roots.
- *
- * @param {number} x Horizontal pixel coordinate
- * @param {number} y Vertical pixel coordinate
- * @return {Element} Returns the deepest shadowRoot inclusive element
- * found at the screen position given.
- */
-function deepTargetFind(x, y) {
-  let node = document.elementFromPoint(x, y);
-  let next = node;
-  // This code path is only taken when native ShadowDOM is used
-  // if there is a shadowroot, it may have a node at x/y
-  // if there is not a shadowroot, exit the loop
-  while (next && next.shadowRoot && !window.ShadyDOM) {
-    // If there is a node at x/y in the shadowroot, look deeper
-    const oldNext = next;
-    next = next.shadowRoot.elementFromPoint(x, y);
-    // On Safari, elementFromPoint may return the shadowRoot host
-    if (oldNext === next) {
-      break;
-    }
-    if (next) {
-      node = next;
-    }
-  }
-  return node;
-}
-
-/**
- * A cheaper check than ev.composedPath()[0];
- *
- * @private
- * @param {Event|Touch} ev Event.
- * @return {EventTarget} Returns the event target.
- */
-function _findOriginalTarget(ev) {
-  const path = getComposedPath(/** @type {?Event} */ (ev));
-  // It shouldn't be, but sometimes path is empty (window on Safari).
-  return path.length > 0 ? path[0] : ev.target;
-}
-
-/**
- * @private
- * @param {Event} ev Event.
- * @return {void}
- */
-function _handleNative(ev) {
-  const type = ev.type;
-  const node = ev.currentTarget;
-  const gobj = node[GESTURE_KEY];
-  if (!gobj) {
-    return;
-  }
-  const gs = gobj[type];
-  if (!gs) {
-    return;
-  }
-  if (!ev[HANDLED_OBJ]) {
-    ev[HANDLED_OBJ] = {};
-    if (type.startsWith('touch')) {
-      const t = ev.changedTouches[0];
-      if (type === 'touchstart') {
-        // Only handle the first finger
-        if (ev.touches.length === 1) {
-          POINTERSTATE.touch.id = t.identifier;
-        }
-      }
-      if (POINTERSTATE.touch.id !== t.identifier) {
-        return;
-      }
-      if (!HAS_NATIVE_TA) {
-        if (type === 'touchstart' || type === 'touchmove') {
-          _handleTouchAction(ev);
-        }
-      }
-    }
-  }
-  const handled = ev[HANDLED_OBJ];
-  // Used to ignore synthetic mouse events
-  if (handled.skip) {
-    return;
-  }
-  // Reset recognizer state
-  for (let i = 0, r; i < recognizers.length; i++) {
-    r = recognizers[i];
-    if (gs[r.name] && !handled[r.name]) {
-      if (r.flow && r.flow.start.indexOf(ev.type) > -1 && r.reset) {
-        r.reset();
-      }
-    }
-  }
-  // Enforce gesture recognizer order
-  for (let i = 0, r; i < recognizers.length; i++) {
-    r = recognizers[i];
-    if (gs[r.name] && !handled[r.name]) {
-      handled[r.name] = true;
-      r[type](ev);
-    }
-  }
-}
-
-/**
- * @private
- * @param {TouchEvent} ev Event.
- * @return {void}
- */
-function _handleTouchAction(ev) {
-  const t = ev.changedTouches[0];
-  const type = ev.type;
-  if (type === 'touchstart') {
-    POINTERSTATE.touch.x = t.clientX;
-    POINTERSTATE.touch.y = t.clientY;
-    POINTERSTATE.touch.scrollDecided = false;
-  } else if (type === 'touchmove') {
-    if (POINTERSTATE.touch.scrollDecided) {
-      return;
-    }
-    POINTERSTATE.touch.scrollDecided = true;
-    const ta = firstTouchAction(ev);
-    let shouldPrevent = false;
-    const dx = Math.abs(POINTERSTATE.touch.x - t.clientX);
-    const dy = Math.abs(POINTERSTATE.touch.y - t.clientY);
-    if (!ev.cancelable) ; else if (ta === 'none') {
-      shouldPrevent = true;
-    } else if (ta === 'pan-x') {
-      shouldPrevent = dy > dx;
-    } else if (ta === 'pan-y') {
-      shouldPrevent = dx > dy;
-    }
-    if (shouldPrevent) {
-      ev.preventDefault();
-    } else {
-      prevent('track');
-    }
-  }
-}
-
-/**
- * Adds an event listener to a node for the given gesture type.
- *
- * @param {!EventTarget} node Node to add listener on
- * @param {string} evType Gesture type: `down`, `up`, `track`, or `tap`
- * @param {!function(!Event):void} handler Event listener function to call
- * @return {boolean} Returns true if a gesture event listener was added.
- */
-function addListener(node, evType, handler) {
-  if (gestures[evType]) {
-    _add(node, evType, handler);
-    return true;
-  }
-  return false;
-}
-
-/**
- * Automate the event listeners for the native events
- *
- * @private
- * @param {!EventTarget} node Node on which to add the event.
- * @param {string} evType Event type to add.
- * @param {function(!Event)} handler Event handler function.
- * @return {void}
- */
-function _add(node, evType, handler) {
-  const recognizer = gestures[evType];
-  const deps = recognizer.deps;
-  const name = recognizer.name;
-  let gobj = node[GESTURE_KEY];
-  if (!gobj) {
-    node[GESTURE_KEY] = gobj = {};
-  }
-  for (let i = 0, dep, gd; i < deps.length; i++) {
-    dep = deps[i];
-    // Don't add mouse handlers on iOS because they cause gray selection overlays
-    if (IS_TOUCH_ONLY && isMouseEvent(dep) && dep !== 'click') {
-      continue;
-    }
-    gd = gobj[dep];
-    if (!gd) {
-      gobj[dep] = gd = { _count: 0 };
-    }
-    if (gd._count === 0) {
-      node.addEventListener(dep, _handleNative, PASSIVE_TOUCH(dep));
-    }
-    gd[name] = (gd[name] || 0) + 1;
-    gd._count = (gd._count || 0) + 1;
-  }
-  node.addEventListener(evType, handler);
-  if (recognizer.touchAction) {
-    setTouchAction(node, recognizer.touchAction);
-  }
-}
-
-/**
- * Registers a new gesture event recognizer for adding new custom
- * gesture event types.
- *
- * @param {!GestureRecognizer} recog Gesture recognizer descriptor
- * @return {void}
- */
-function register(recog) {
-  recognizers.push(recog);
-  for (let i = 0; i < recog.emits.length; i++) {
-    gestures[recog.emits[i]] = recog;
-  }
-}
-
-/**
- * @private
- * @param {string} evName Event name.
- * @return {Object} Returns the gesture for the given event name.
- */
-function _findRecognizerByEvent(evName) {
-  for (let i = 0, r; i < recognizers.length; i++) {
-    r = recognizers[i];
-    for (let j = 0, n; j < r.emits.length; j++) {
-      n = r.emits[j];
-      if (n === evName) {
-        return r;
-      }
-    }
-  }
-  return null;
-}
-
-/**
- * Sets scrolling direction on node.
- *
- * This value is checked on first move, thus it should be called prior to
- * adding event listeners.
- *
- * @param {!EventTarget} node Node to set touch action setting on
- * @param {string} value Touch action value
- * @return {void}
- */
-function setTouchAction(node, value) {
-  if (HAS_NATIVE_TA && node instanceof HTMLElement) {
-    // NOTE: add touchAction async so that events can be added in
-    // custom element constructors. Otherwise we run afoul of custom
-    // elements restriction against settings attributes (style) in the
-    // constructor.
-    microTask.run(() => {
-      node.style.touchAction = value;
-    });
-  }
-  node[TOUCH_ACTION] = value;
-}
-
-/**
- * Dispatches an event on the `target` element of `type` with the given
- * `detail`.
- * @private
- * @param {!EventTarget} target The element on which to fire an event.
- * @param {string} type The type of event to fire.
- * @param {!Object=} detail The detail object to populate on the event.
- * @return {void}
- */
-function _fire(target, type, detail) {
-  const ev = new Event(type, { bubbles: true, cancelable: true, composed: true });
-  ev.detail = detail;
-  wrap(/** @type {!Node} */ (target)).dispatchEvent(ev);
-  // Forward `preventDefault` in a clean way
-  if (ev.defaultPrevented) {
-    const preventer = detail.preventer || detail.sourceEvent;
-    if (preventer && preventer.preventDefault) {
-      preventer.preventDefault();
-    }
-  }
-}
-
-/**
- * Prevents the dispatch and default action of the given event name.
- *
- * @param {string} evName Event name.
- * @return {void}
- */
-function prevent(evName) {
-  const recognizer = _findRecognizerByEvent(evName);
-  if (recognizer.info) {
-    recognizer.info.prevent = true;
-  }
-}
-
-register({
-  name: 'downup',
-  deps: ['mousedown', 'touchstart', 'touchend'],
-  flow: {
-    start: ['mousedown', 'touchstart'],
-    end: ['mouseup', 'touchend'],
-  },
-  emits: ['down', 'up'],
-
-  info: {
-    movefn: null,
-    upfn: null,
-  },
-
-  /**
-   * @this {GestureRecognizer}
-   * @return {void}
-   */
-  reset() {
-    untrackDocument(this.info);
-  },
-
-  /**
-   * @this {GestureRecognizer}
-   * @param {MouseEvent} e
-   * @return {void}
-   */
-  mousedown(e) {
-    if (!hasLeftMouseButton(e)) {
-      return;
-    }
-    const t = _findOriginalTarget(e);
-    // eslint-disable-next-line @typescript-eslint/no-this-alias
-    const self = this;
-    const movefn = (e) => {
-      if (!hasLeftMouseButton(e)) {
-        downupFire('up', t, e);
-        untrackDocument(self.info);
-      }
-    };
-    const upfn = (e) => {
-      if (hasLeftMouseButton(e)) {
-        downupFire('up', t, e);
-      }
-      untrackDocument(self.info);
-    };
-    trackDocument(this.info, movefn, upfn);
-    downupFire('down', t, e);
-  },
-
-  /**
-   * @this {GestureRecognizer}
-   * @param {TouchEvent} e
-   * @return {void}
-   */
-  touchstart(e) {
-    downupFire('down', _findOriginalTarget(e), e.changedTouches[0], e);
-  },
-
-  /**
-   * @this {GestureRecognizer}
-   * @param {TouchEvent} e
-   * @return {void}
-   */
-  touchend(e) {
-    downupFire('up', _findOriginalTarget(e), e.changedTouches[0], e);
-  },
-});
-
-/**
- * @param {string} type
- * @param {EventTarget} target
- * @param {Event|Touch} event
- * @param {Event=} preventer
- * @return {void}
- */
-function downupFire(type, target, event, preventer) {
-  if (!target) {
-    return;
-  }
-  _fire(target, type, {
-    x: event.clientX,
-    y: event.clientY,
-    sourceEvent: event,
-    preventer,
-    prevent(e) {
-      return prevent(e);
-    },
-  });
-}
-
-register({
-  name: 'track',
-  touchAction: 'none',
-  deps: ['mousedown', 'touchstart', 'touchmove', 'touchend'],
-  flow: {
-    start: ['mousedown', 'touchstart'],
-    end: ['mouseup', 'touchend'],
-  },
-  emits: ['track'],
-
-  info: {
-    x: 0,
-    y: 0,
-    state: 'start',
-    started: false,
-    moves: [],
-    /** @this {GestureInfo} */
-    addMove(move) {
-      if (this.moves.length > TRACK_LENGTH) {
-        this.moves.shift();
-      }
-      this.moves.push(move);
-    },
-    movefn: null,
-    upfn: null,
-    prevent: false,
-  },
-
-  /**
-   * @this {GestureRecognizer}
-   * @return {void}
-   */
-  reset() {
-    this.info.state = 'start';
-    this.info.started = false;
-    this.info.moves = [];
-    this.info.x = 0;
-    this.info.y = 0;
-    this.info.prevent = false;
-    untrackDocument(this.info);
-  },
-
-  /**
-   * @this {GestureRecognizer}
-   * @param {MouseEvent} e
-   * @return {void}
-   */
-  mousedown(e) {
-    if (!hasLeftMouseButton(e)) {
-      return;
-    }
-    const t = _findOriginalTarget(e);
-    // eslint-disable-next-line @typescript-eslint/no-this-alias
-    const self = this;
-    const movefn = (e) => {
-      const x = e.clientX,
-        y = e.clientY;
-      if (trackHasMovedEnough(self.info, x, y)) {
-        // First move is 'start', subsequent moves are 'move', mouseup is 'end'
-        self.info.state = self.info.started ? (e.type === 'mouseup' ? 'end' : 'track') : 'start';
-        if (self.info.state === 'start') {
-          // If and only if tracking, always prevent tap
-          prevent('tap');
-        }
-        self.info.addMove({ x, y });
-        if (!hasLeftMouseButton(e)) {
-          // Always fire "end"
-          self.info.state = 'end';
-          untrackDocument(self.info);
-        }
-        if (t) {
-          trackFire(self.info, t, e);
-        }
-        self.info.started = true;
-      }
-    };
-    const upfn = (e) => {
-      if (self.info.started) {
-        movefn(e);
-      }
-
-      // Remove the temporary listeners
-      untrackDocument(self.info);
-    };
-    // Add temporary document listeners as mouse retargets
-    trackDocument(this.info, movefn, upfn);
-    this.info.x = e.clientX;
-    this.info.y = e.clientY;
-  },
-
-  /**
-   * @this {GestureRecognizer}
-   * @param {TouchEvent} e
-   * @return {void}
-   */
-  touchstart(e) {
-    const ct = e.changedTouches[0];
-    this.info.x = ct.clientX;
-    this.info.y = ct.clientY;
-  },
-
-  /**
-   * @this {GestureRecognizer}
-   * @param {TouchEvent} e
-   * @return {void}
-   */
-  touchmove(e) {
-    const t = _findOriginalTarget(e);
-    const ct = e.changedTouches[0];
-    const x = ct.clientX,
-      y = ct.clientY;
-    if (trackHasMovedEnough(this.info, x, y)) {
-      if (this.info.state === 'start') {
-        // If and only if tracking, always prevent tap
-        prevent('tap');
-      }
-      this.info.addMove({ x, y });
-      trackFire(this.info, t, ct);
-      this.info.state = 'track';
-      this.info.started = true;
-    }
-  },
-
-  /**
-   * @this {GestureRecognizer}
-   * @param {TouchEvent} e
-   * @return {void}
-   */
-  touchend(e) {
-    const t = _findOriginalTarget(e);
-    const ct = e.changedTouches[0];
-    // Only trackend if track was started and not aborted
-    if (this.info.started) {
-      // Reset started state on up
-      this.info.state = 'end';
-      this.info.addMove({ x: ct.clientX, y: ct.clientY });
-      trackFire(this.info, t, ct);
-    }
-  },
-});
-
-/**
- * @param {!GestureInfo} info
- * @param {number} x
- * @param {number} y
- * @return {boolean}
- */
-function trackHasMovedEnough(info, x, y) {
-  if (info.prevent) {
-    return false;
-  }
-  if (info.started) {
-    return true;
-  }
-  const dx = Math.abs(info.x - x);
-  const dy = Math.abs(info.y - y);
-  return dx >= TRACK_DISTANCE || dy >= TRACK_DISTANCE;
-}
-
-/**
- * @param {!GestureInfo} info
- * @param {?EventTarget} target
- * @param {Touch} touch
- * @return {void}
- */
-function trackFire(info, target, touch) {
-  if (!target) {
-    return;
-  }
-  const secondlast = info.moves[info.moves.length - 2];
-  const lastmove = info.moves[info.moves.length - 1];
-  const dx = lastmove.x - info.x;
-  const dy = lastmove.y - info.y;
-  let ddx,
-    ddy = 0;
-  if (secondlast) {
-    ddx = lastmove.x - secondlast.x;
-    ddy = lastmove.y - secondlast.y;
-  }
-  _fire(target, 'track', {
-    state: info.state,
-    x: touch.clientX,
-    y: touch.clientY,
-    dx,
-    dy,
-    ddx,
-    ddy,
-    sourceEvent: touch,
-    hover() {
-      return deepTargetFind(touch.clientX, touch.clientY);
-    },
-  });
-}
-
-register({
-  name: 'tap',
-  deps: ['mousedown', 'click', 'touchstart', 'touchend'],
-  flow: {
-    start: ['mousedown', 'touchstart'],
-    end: ['click', 'touchend'],
-  },
-  emits: ['tap'],
-  info: {
-    x: NaN,
-    y: NaN,
-    prevent: false,
-  },
-
-  /**
-   * @this {GestureRecognizer}
-   * @return {void}
-   */
-  reset() {
-    this.info.x = NaN;
-    this.info.y = NaN;
-    this.info.prevent = false;
-  },
-
-  /**
-   * @this {GestureRecognizer}
-   * @param {MouseEvent} e
-   * @return {void}
-   */
-  mousedown(e) {
-    if (hasLeftMouseButton(e)) {
-      this.info.x = e.clientX;
-      this.info.y = e.clientY;
-    }
-  },
-
-  /**
-   * @this {GestureRecognizer}
-   * @param {MouseEvent} e
-   * @return {void}
-   */
-  click(e) {
-    if (hasLeftMouseButton(e)) {
-      trackForward(this.info, e);
-    }
-  },
-
-  /**
-   * @this {GestureRecognizer}
-   * @param {TouchEvent} e
-   * @return {void}
-   */
-  touchstart(e) {
-    const touch = e.changedTouches[0];
-    this.info.x = touch.clientX;
-    this.info.y = touch.clientY;
-  },
-
-  /**
-   * @this {GestureRecognizer}
-   * @param {TouchEvent} e
-   * @return {void}
-   */
-  touchend(e) {
-    trackForward(this.info, e.changedTouches[0], e);
-  },
-});
-
-/**
- * @param {!GestureInfo} info
- * @param {Event | Touch} e
- * @param {Event=} preventer
- * @return {void}
- */
-function trackForward(info, e, preventer) {
-  const dx = Math.abs(e.clientX - info.x);
-  const dy = Math.abs(e.clientY - info.y);
-  // Find original target from `preventer` for TouchEvents, or `e` for MouseEvents
-  const t = _findOriginalTarget(preventer || e);
-  if (!t || (canBeDisabled[/** @type {!HTMLElement} */ (t).localName] && t.hasAttribute('disabled'))) {
-    return;
-  }
-  // Dx,dy can be NaN if `click` has been simulated and there was no `down` for `start`
-  if (isNaN(dx) || isNaN(dy) || (dx <= TAP_DISTANCE && dy <= TAP_DISTANCE) || isSyntheticClick(e)) {
-    // Prevent taps from being generated if an event has canceled them
-    if (!info.prevent) {
-      _fire(t, 'tap', {
-        x: e.clientX,
-        y: e.clientY,
-        sourceEvent: e,
-        preventer,
-      });
-    }
-  }
-}
-
-/**
- * @license
- * Copyright (c) 2021 - 2022 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-
-/**
- * A mixin to toggle the `active` attribute.
- *
- * The attribute is set whenever the user activates the element by a pointer
- * or presses an activation key on the element from the keyboard.
- *
- * The attribute is removed as soon as the element is deactivated
- * by the pointer or by releasing the activation key.
- *
- * @polymerMixin
- */
-const ActiveMixin = (superclass) =>
-  class ActiveMixinClass extends DisabledMixin(KeyboardMixin(superclass)) {
-    /**
-     * An array of activation keys.
-     *
-     * See possible values here:
-     * https://developer.mozilla.org/ru/docs/Web/API/KeyboardEvent/key/Key_Values
-     *
-     * @protected
-     * @return {!Array<!string>}
-     */
-    get _activeKeys() {
-      return [' '];
-    }
-
-    /** @protected */
-    ready() {
-      super.ready();
-
-      addListener(this, 'down', (event) => {
-        if (this._shouldSetActive(event)) {
-          this._setActive(true);
-        }
-      });
-
-      addListener(this, 'up', () => {
-        this._setActive(false);
-      });
-    }
-
-    /** @protected */
-    disconnectedCallback() {
-      super.disconnectedCallback();
-
-      // When the element is disconnecting from the DOM at the moment being active,
-      // the `active` attribute needs to be manually removed from the element.
-      // Otherwise, it will preserve on the element until the element is activated once again.
-      // The case reproduces for `<vaadin-date-picker>` when closing on `Cancel` or `Today` click.
-      this._setActive(false);
-    }
-
-    /**
-     * @param {KeyboardEvent | MouseEvent} _event
-     * @protected
-     */
-    _shouldSetActive(_event) {
-      return !this.disabled;
-    }
-
-    /**
-     * Sets the `active` attribute on the element if an activation key is pressed.
-     *
-     * @param {KeyboardEvent} event
-     * @protected
-     * @override
-     */
-    _onKeyDown(event) {
-      super._onKeyDown(event);
-
-      if (this._shouldSetActive(event) && this._activeKeys.includes(event.key)) {
-        this._setActive(true);
-
-        // Element can become hidden before the `keyup` event, e.g. on button click.
-        // Use document listener to ensure `active` attribute is removed correctly.
-        document.addEventListener(
-          'keyup',
-          (e) => {
-            if (this._activeKeys.includes(e.key)) {
-              this._setActive(false);
-            }
-          },
-          { once: true },
-        );
-      }
-    }
-
-    /**
-     * Toggles the `active` attribute on the element.
-     *
-     * @param {boolean} active
-     * @protected
-     */
-    _setActive(active) {
-      this.toggleAttribute('active', active);
-    }
-  };
-
-/**
- * @license
- * Copyright (c) 2017 - 2022 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-
-/**
- * A mixin providing common button functionality.
- *
- * @polymerMixin
- * @mixes ActiveMixin
- * @mixes FocusMixin
- * @mixes TabindexMixin
- */
-const ButtonMixin = (superClass) =>
-  class ButtonMixinClass extends ActiveMixin(TabindexMixin(FocusMixin(superClass))) {
-    static get properties() {
-      return {
-        /**
-         * Indicates whether the element can be focused and where it participates in sequential keyboard navigation.
-         *
-         * @override
-         * @protected
-         */
-        tabindex: {
-          value: 0,
-        },
-      };
-    }
-
-    /**
-     * By default, `Space` is the only possible activation key for a focusable HTML element.
-     * Nonetheless, the button is an exception as it can be also activated by pressing `Enter`.
-     * See the "Keyboard Support" section in https://www.w3.org/TR/wai-aria-practices/examples/button/button.html.
-     *
-     * @protected
-     * @override
-     */
-    get _activeKeys() {
-      return ['Enter', ' '];
-    }
-
-    /** @protected */
-    ready() {
-      super.ready();
-
-      // By default, if the user hasn't provided a custom role,
-      // the role attribute is set to "button".
-      if (!this.hasAttribute('role')) {
-        this.setAttribute('role', 'button');
-      }
-    }
-
-    /**
-     * Since the button component is designed on the base of the `[role=button]` attribute,
-     * and doesn't have a native <button> inside, in order to be fully accessible from the keyboard,
-     * it should manually fire the `click` event once an activation key is pressed,
-     * as it follows from the WAI-ARIA specifications:
-     * https://www.w3.org/TR/wai-aria-practices-1.1/#button
-     *
-     * According to the UI Events specifications,
-     * the `click` event should be fired exactly on `keydown`:
-     * https://www.w3.org/TR/uievents/#event-type-keydown
-     *
-     * @param {KeyboardEvent} event
-     * @protected
-     * @override
-     */
-    _onKeyDown(event) {
-      super._onKeyDown(event);
-
-      if (this._activeKeys.includes(event.key)) {
-        event.preventDefault();
-
-        // `DisabledMixin` overrides the standard `click()` method
-        // so that it doesn't fire the `click` event when the element is disabled.
-        this.click();
-      }
-    }
-  };
-
-/**
- * @license
- * Copyright (c) 2017 - 2022 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-
-/**
- * `<vaadin-button>` is an accessible and customizable button that allows users to perform actions.
- *
- * ```html
- * <vaadin-button>Press me</vaadin-button>
- * ```
- *
- * ### Styling
- *
- * The following shadow DOM parts are available for styling:
- *
- * Part name | Description
- * ----------|-------------
- * `label`   | The label (text) inside the button.
- * `prefix`  | A slot for content before the label (e.g. an icon).
- * `suffix`  | A slot for content after the label (e.g. an icon).
- *
- * The following attributes are available for styling:
- *
- * Attribute    | Description
- * -------------|-------------
- * `active`     | Set when the button is pressed down, either with mouse, touch or the keyboard.
- * `disabled`   | Set when the button is disabled.
- * `focus-ring` | Set when the button is focused using the keyboard.
- * `focused`    | Set when the button is focused.
- *
- * See [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.
- *
- * @extends HTMLElement
- * @mixes ButtonMixin
- * @mixes ControllerMixin
- * @mixes ElementMixin
- * @mixes ThemableMixin
- */
-class Button extends ButtonMixin(ElementMixin(ThemableMixin(ControllerMixin(PolymerElement)))) {
-  static get is() {
-    return 'vaadin-button';
-  }
-
-  static get template() {
-    return html`
-      <style>
-        :host {
-          display: inline-block;
-          position: relative;
-          outline: none;
-          white-space: nowrap;
-          -webkit-user-select: none;
-          -moz-user-select: none;
-          user-select: none;
-        }
-
-        :host([hidden]) {
-          display: none !important;
-        }
-
-        /* Aligns the button with form fields when placed on the same line.
-          Note, to make it work, the form fields should have the same "::before" pseudo-element. */
-        .vaadin-button-container::before {
-          content: '\\2003';
-          display: inline-block;
-          width: 0;
-          max-height: 100%;
-        }
-
-        .vaadin-button-container {
-          display: inline-flex;
-          align-items: center;
-          justify-content: center;
-          text-align: center;
-          width: 100%;
-          height: 100%;
-          min-height: inherit;
-          text-shadow: inherit;
-        }
-
-        [part='prefix'],
-        [part='suffix'] {
-          flex: none;
-        }
-
-        [part='label'] {
-          white-space: nowrap;
-          overflow: hidden;
-          text-overflow: ellipsis;
-        }
-      </style>
-      <div class="vaadin-button-container">
-        <span part="prefix" aria-hidden="true">
-          <slot name="prefix"></slot>
-        </span>
-        <span part="label">
-          <slot></slot>
-        </span>
-        <span part="suffix" aria-hidden="true">
-          <slot name="suffix"></slot>
-        </span>
-      </div>
-      <slot name="tooltip"></slot>
-    `;
-  }
-
-  /** @protected */
-  ready() {
-    super.ready();
-
-    this._tooltipController = new TooltipController(this);
-    this.addController(this._tooltipController);
-  }
-}
-
-customElements.define(Button.is, Button);
-
 registerStyles(
   'vaadin-date-picker-overlay-content',
   i`
@@ -1928,7 +501,7 @@ const DisableUpgradeMixin = dedupingMixin((base) => {
    * @extends {HTMLElement}
    * @private
    */
-  const superClass = ElementMixin$1(base);
+  const superClass = ElementMixin(base);
 
   // Work around for closure bug #126934458. Using `super` in a property
   // getter does not work so instead we search the Base prototype for an
@@ -1997,7 +570,7 @@ const DisableUpgradeMixin = dedupingMixin((base) => {
         if (this.__isUpgradeDisabled && value == null) {
           super._initializeProperties();
           this.__isUpgradeDisabled = false;
-          if (wrap$1(this).isConnected) {
+          if (wrap(this).isConnected) {
             super.connectedCallback();
           }
         }
@@ -2665,7 +1238,7 @@ class DomRepeat extends domRepeatBase {
     // only perform attachment if the element was previously detached.
     if (this.__isDetached) {
       this.__isDetached = false;
-      let wrappedParent = wrap$1(wrap$1(this).parentNode);
+      let wrappedParent = wrap(wrap(this).parentNode);
       for (let i=0; i<this.__instances.length; i++) {
         this.__attachInstance(i, wrappedParent);
       }
@@ -2822,7 +1395,7 @@ class DomRepeat extends domRepeatBase {
   __debounceRender(fn, delay = 0) {
     this.__renderDebouncer = Debouncer.debounce(
           this.__renderDebouncer
-        , delay > 0 ? timeOut.after(delay) : microTask$1
+        , delay > 0 ? timeOut.after(delay) : microTask
         , fn.bind(this));
     enqueueDebouncer(this.__renderDebouncer);
   }
@@ -2976,7 +1549,7 @@ class DomRepeat extends domRepeatBase {
 
   __detachInstance(idx) {
     let inst = this.__instances[idx];
-    const wrappedRoot = wrap$1(inst.root);
+    const wrappedRoot = wrap(inst.root);
     for (let i=0; i<inst.children.length; i++) {
       let el = inst.children[i];
       wrappedRoot.appendChild(el);
@@ -3007,7 +1580,7 @@ class DomRepeat extends domRepeatBase {
     const inst = this.__stampInstance(item, instIdx, itemIdx);
     let beforeRow = this.__instances[instIdx + 1];
     let beforeNode = beforeRow ? beforeRow.children[0] : this;
-    wrap$1(wrap$1(this).parentNode).insertBefore(inst.root, beforeNode);
+    wrap(wrap(this).parentNode).insertBefore(inst.root, beforeNode);
     this.__instances[instIdx] = inst;
     return inst;
   }
@@ -6343,7 +4916,7 @@ registerStyles('vaadin-date-picker', [inputFieldShared$1, datePickerStyles], { m
  * @mixes InputControlMixin
  * @mixes DatePickerMixin
  */
-class DatePicker extends DatePickerMixin(InputControlMixin(ThemableMixin(ElementMixin(PolymerElement)))) {
+class DatePicker extends DatePickerMixin(InputControlMixin(ThemableMixin(ElementMixin$1(PolymerElement)))) {
   static get is() {
     return 'vaadin-date-picker';
   }
@@ -6479,9 +5052,9 @@ class DatePicker extends DatePickerMixin(InputControlMixin(ThemableMixin(Element
 
 customElements.define(DatePicker.is, DatePicker);
 
-const dateInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.date__wrapper{position:relative;display:flex;flex-direction:column-reverse;padding-top:10px}.date__label{color:#474747;font-size:16px;position:absolute;bottom:15px;left:5px;transform:translateY(-25px);transition:all 0.3s cubic-bezier(0.5, 0, 0.5, 1)}.date__label--required::after{content:\"*\";margin-left:5px;color:#666666}.date__input{width:inherit;position:relative;border:none;border-bottom:3px solid #666666;color:#666666;font-size:16px;font-family:inherit}.date__input:focus{outline:none;box-shadow:0 5px 5px rgba(16, 15, 15, 0.1)}.date__input::placeholder{color:#666666}.date__input--invalid{border-bottom:3px solid #cc0000}.date__input:placeholder-shown+.date__label{opacity:0;visibility:hidden;transform:translateY(0)}.date__error-message{position:absolute;top:calc(100% + 5px);left:0;color:#cc0000}";
+const dateInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.date{font-family:\"Roboto\";font-style:normal}.date__wrapper{position:relative;width:100%;padding-top:26px}.date__label{font-family:inherit;font-style:normal;font-weight:500;font-size:16px;line-height:20px;color:#1F1F1F;position:absolute;top:0;left:0}.date__label--required::after{content:\"*\";font-family:inherit;color:#1F1F1F;margin-left:2px}.date__input{border:none;width:inherit;position:relative}.date__input[focused]::part(input-field){border-color:#3E3E3E}.date__input[invalid]::part(input-field){border-color:#cc0000b3}.date__input::part(input-field){border-radius:4px;background-color:#FFFFFF;border:2px solid #DEE1EE;color:#2A2E3F;border-radius:4px;background-color:transparent;font-family:inherit;font-style:normal;font-weight:300;font-size:16px;line-height:19px}.date__error-message{position:absolute;top:calc(100% + 5px);left:0;color:#cc0000b3}";
 
-const DateInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement$1 {
+const DateInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
@@ -6532,7 +5105,8 @@ const DateInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement$1 {
     }
   }
   render() {
-    return h("div", { class: 'date__wrapper' }, h("vaadin-date-picker", { id: `${this.name}__input`, type: 'date', class: `date__input`, value: this.defaultValue, readOnly: this.autofilled, placeholder: `${this.displayName} ${this.validation.mandatory ? '*' : ''}`, required: this.validation.mandatory, max: this.validation.max, min: this.validation.min, onBlur: (e) => this.handleInput(e) }), h("label", { class: `date__label ${this.validation.mandatory ? 'date__label--required' : ''}}`, htmlFor: `${this.name}__input` }, this.displayName, " ", this.validation.mandatory ? '*' : ''), h("small", { class: 'date__error-message' }, this.errorMessage));
+    const invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'date__input--invalid';
+    return h("div", { class: 'date__wrapper' }, h("label", { class: `date__label ${this.validation.mandatory ? 'date__label--required' : ''}}`, htmlFor: `${this.name}__input` }, this.displayName, " ", this.validation.mandatory ? '*' : ''), h("vaadin-date-picker", { id: `${this.name}__input`, type: 'date', class: `date__input ${invalidClass}`, value: this.defaultValue, readOnly: this.autofilled, placeholder: `${this.displayName} ${this.validation.mandatory ? '*' : ''}`, required: this.validation.mandatory, max: this.validation.max, min: this.validation.min, onBlur: (e) => this.handleInput(e) }), h("small", { class: 'date__error-message' }, this.errorMessage));
   }
   get element() { return this; }
   static get watchers() { return {