@everymatrix/helper-filters 0.1.5 → 0.1.20

package/dist/components/helper-filters.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement as HTMLElement$1, createEvent, h as h$2 } from '@stencil/core/internal/client';
-import '@everymatrix/helper-modal';
+import { d as defineCustomElement$2 } from './helper-modal2.js';
 
 const DEFAULT_LANGUAGE = 'en';
 const SUPPORTED_LANGUAGES = ['ro', 'en'];
@@ -41,7 +41,7 @@ const translate$1 = (key, customLang) => {
  */
 class Lumo extends HTMLElement {
   static get version() {
-    return '23.2.0';
+    return '23.1.5';
   }
 }
 
@@ -97,7 +97,7 @@ const ThemePropertyMixin = (superClass) =>
          * **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/custom-theme/styling-components/#sub-components).
+         * See [Styling Components: Sub-components](https://vaadin.com/docs/latest/ds/customization/styling-components/#sub-components).
          * page for more information.
          *
          * @deprecated The `theme` property is not supposed for public use and will be dropped in Vaadin 24.
@@ -122,7 +122,7 @@ const ThemePropertyMixin = (superClass) =>
          * **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/custom-theme/styling-components/#sub-components).
+         * See [Styling Components: Sub-components](https://vaadin.com/docs/latest/ds/customization/styling-components/#sub-components).
          * page for more information.
          *
          * @protected
@@ -227,9 +227,9 @@ function matchesThemeFor(themeFor, tagName) {
  */
 function getIncludePriority(moduleName = '') {
   let includePriority = 0;
-  if (moduleName.startsWith('lumo-') || moduleName.startsWith('material-')) {
+  if (moduleName.indexOf('lumo-') === 0 || moduleName.indexOf('material-') === 0) {
     includePriority = 1;
-  } else if (moduleName.startsWith('vaadin-')) {
+  } else if (moduleName.indexOf('vaadin-') === 0) {
     includePriority = 2;
   }
   return includePriority;
@@ -10114,38 +10114,6 @@ const ControllerMixin = dedupingMixin(
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 
-// We consider the keyboard to be active if the window has received a keydown
-// event since the last mousedown event.
-let keyboardActive = false;
-
-// Listen for top-level keydown and mousedown events.
-// Use capture phase so we detect events even if they're handled.
-window.addEventListener(
-  'keydown',
-  () => {
-    keyboardActive = true;
-  },
-  { capture: true },
-);
-
-window.addEventListener(
-  'mousedown',
-  () => {
-    keyboardActive = false;
-  },
-  { capture: true },
-);
-
-/**
- * Returns true if the window has received a keydown
- * event since the last mousedown event.
- *
- * @return {boolean}
- */
-function isKeyboardActive() {
-  return keyboardActive;
-}
-
 /**
  * Returns true if the element is hidden directly with `display: none` or `visibility: hidden`,
  * false otherwise.
@@ -10586,7 +10554,7 @@ class FocusTrapController {
  * ---|---|---
  * `--vaadin-overlay-viewport-bottom` | Bottom offset of the visible viewport area | `0` or detected offset
  *
- * See [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.
+ * See [Styling Components](https://vaadin.com/docs/latest/ds/customization/styling-components) documentation.
  *
  * @fires {CustomEvent} opened-changed - Fired when the `opened` property changes.
  * @fires {CustomEvent} vaadin-overlay-open - Fired after the overlay is opened.
@@ -12856,7 +12824,7 @@ const registered = new Set();
 const ElementMixin = (superClass) =>
   class VaadinElementMixin extends DirMixin(superClass) {
     static get version() {
-      return '23.2.0';
+      return '23.1.5';
     }
 
     /** @protected */
@@ -13154,7 +13122,7 @@ function _handleNative(ev) {
   }
   if (!ev[HANDLED_OBJ]) {
     ev[HANDLED_OBJ] = {};
-    if (type.startsWith('touch')) {
+    if (type.slice(0, 5) === 'touch') {
       const t = ev.changedTouches[0];
       if (type === 'touchstart') {
         // Only handle the first finger
@@ -14013,6 +13981,28 @@ const ActiveMixin = (superclass) =>
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 
+// We consider the keyboard to be active if the window has received a keydown
+// event since the last mousedown event.
+let keyboardActive = false;
+
+// Listen for top-level keydown and mousedown events.
+// Use capture phase so we detect events even if they're handled.
+window.addEventListener(
+  'keydown',
+  () => {
+    keyboardActive = true;
+  },
+  { capture: true },
+);
+
+window.addEventListener(
+  'mousedown',
+  () => {
+    keyboardActive = false;
+  },
+  { capture: true },
+);
+
 /**
  * A mixin to handle `focused` and `focus-ring` attributes based on focus.
  *
@@ -14026,7 +14016,7 @@ const FocusMixin = dedupingMixin(
        * @return {boolean}
        */
       get _keyboardActive() {
-        return isKeyboardActive();
+        return keyboardActive;
       }
 
       /** @protected */
@@ -14290,7 +14280,7 @@ const ButtonMixin = (superClass) =>
  * `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.
+ * See [Styling Components](https://vaadin.com/docs/latest/ds/customization/styling-components) documentation.
  *
  * @extends HTMLElement
  * @mixes ButtonMixin
@@ -14372,6 +14362,7 @@ registerStyles(
   i$1`
     :host {
       position: relative;
+      background-color: transparent;
       /* Background for the year scroller, placed here as we are using a mask image on the actual years part */
       background-image: linear-gradient(var(--lumo-shade-5pct), var(--lumo-shade-5pct));
       background-size: 57px 100%;
@@ -14479,10 +14470,17 @@ registerStyles(
 
     [part='toolbar'] {
       padding: var(--lumo-space-s);
+      box-shadow: 0 -1px 0 0 var(--lumo-contrast-10pct);
       border-bottom-left-radius: var(--lumo-border-radius-l);
       margin-right: 57px;
     }
 
+    @supports (mask-image: linear-gradient(#000, #000)) or (-webkit-mask-image: linear-gradient(#000, #000)) {
+      [part='toolbar'] {
+        box-shadow: none;
+      }
+    }
+
     /* Today and Cancel buttons */
 
     [part='toolbar'] [part\$='button'] {
@@ -14515,6 +14513,8 @@ registerStyles(
     /* Very narrow screen (year scroller initially hidden) */
 
     [part='years-toggle-button'] {
+      position: relative;
+      right: auto;
       display: flex;
       align-items: center;
       height: var(--lumo-size-s);
@@ -14532,6 +14532,10 @@ registerStyles(
       color: var(--lumo-primary-contrast-color);
     }
 
+    [part='years-toggle-button']::before {
+      content: none;
+    }
+
     /* TODO magic number (same as used for iron-media-query in vaadin-date-picker-overlay-content) */
     @media screen and (max-width: 374px) {
       :host {
@@ -14707,9 +14711,9 @@ registerStyles(
   { moduleId: 'lumo-month-calendar' },
 );
 
-const template$1 = document.createElement('template');
+const $_documentContainer$1 = document.createElement('template');
 
-template$1.innerHTML = `
+$_documentContainer$1.innerHTML = `
   <style>
     @keyframes vaadin-date-picker-month-calendar-focus-date {
       50% {
@@ -14719,7 +14723,7 @@ template$1.innerHTML = `
   </style>
 `;
 
-document.head.appendChild(template$1.content);
+document.head.appendChild($_documentContainer$1.content);
 
 /**
  * @license
@@ -14727,9 +14731,9 @@ document.head.appendChild(template$1.content);
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 
-const template = document.createElement('template');
+const $_documentContainer = document.createElement('template');
 
-template.innerHTML = `
+$_documentContainer.innerHTML = `
   <style>
     @font-face {
       font-family: 'lumo-icons';
@@ -14785,7 +14789,7 @@ template.innerHTML = `
   </style>
 `;
 
-document.head.appendChild(template.content);
+document.head.appendChild($_documentContainer.content);
 
 /**
  * @license
@@ -15352,57 +15356,6 @@ function getAncestorRootNodes(node) {
   return result;
 }
 
-/**
- * @param {string} value
- * @return {Set<string>}
- */
-function deserializeAttributeValue(value) {
-  if (!value) {
-    return new Set();
-  }
-
-  return new Set(value.split(' '));
-}
-
-/**
- * @param {Set<string>} values
- * @return {string}
- */
-function serializeAttributeValue(values) {
-  return [...values].join(' ');
-}
-
-/**
- * Adds a value to an attribute containing space-delimited values.
- *
- * @param {HTMLElement} element
- * @param {string} attr
- * @param {string} value
- */
-function addValueToAttribute(element, attr, value) {
-  const values = deserializeAttributeValue(element.getAttribute(attr));
-  values.add(value);
-  element.setAttribute(attr, serializeAttributeValue(values));
-}
-
-/**
- * Removes a value from an attribute containing space-delimited values.
- * If the value is the last one, the whole attribute is removed.
- *
- * @param {HTMLElement} element
- * @param {string} attr
- * @param {string} value
- */
-function removeValueFromAttribute(element, attr, value) {
-  const values = deserializeAttributeValue(element.getAttribute(attr));
-  values.delete(value);
-  if (values.size === 0) {
-    element.removeAttribute(attr);
-    return;
-  }
-  element.setAttribute(attr, serializeAttributeValue(values));
-}
-
 /**
  * @license
  * Copyright (c) 2017 - 2022 Vaadin Ltd.
@@ -17127,9 +17080,7 @@ class MonthCalendar extends FocusMixin(ThemableMixin(PolymerElement)) {
 
   _onMonthGridTouchStart() {
     this._notTapping = false;
-    setTimeout(() => {
-      this._notTapping = true;
-    }, 300);
+    setTimeout(() => (this._notTapping = true), 300);
   }
 
   _dateAdd(date, delta) {
@@ -17464,7 +17415,7 @@ class InfiniteScroller extends PolymerElement {
       // Once the first set of items start fading in, stamp the rest
       this._buffers.forEach((buffer) => {
         [].forEach.call(buffer.children, (insertionPoint) => this._ensureStampedInstance(insertionPoint._itemWrapper));
-      });
+      }, this);
 
       if (!this._buffers[0].translateY) {
         this._reset();
@@ -17627,7 +17578,7 @@ class InfiniteScroller extends PolymerElement {
           }
         }, 1); // Wait for first reset
       }
-    });
+    }, this);
 
     setTimeout(() => {
       afterNextRender(this, this._finishInit.bind(this));
@@ -17665,7 +17616,7 @@ class InfiniteScroller extends PolymerElement {
         });
         buffer.updated = true;
       }
-    });
+    }, this);
   }
 
   _isVisible(element, container) {
@@ -17764,6 +17715,7 @@ class DatePickerOverlayContent extends ControllerMixin(ThemableMixin(DirMixin(Po
           height: 100%;
           width: 100%;
           outline: none;
+          background: #fff;
         }
 
         [part='overlay-header'] {
@@ -17781,14 +17733,22 @@ class DatePickerOverlayContent extends ControllerMixin(ThemableMixin(DirMixin(Po
           flex-grow: 1;
         }
 
-        [hidden] {
-          display: none !important;
+        [part='clear-button']:not([showclear]) {
+          display: none;
         }
 
         [part='years-toggle-button'] {
           display: flex;
         }
 
+        [part='years-toggle-button'][desktop] {
+          display: none;
+        }
+
+        :host(:not([years-visible])) [part='years-toggle-button']::before {
+          transform: rotate(180deg);
+        }
+
         #scrollers {
           display: flex;
           height: 100%;
@@ -17862,14 +17822,27 @@ class DatePickerOverlayContent extends ControllerMixin(ThemableMixin(DirMixin(Po
           z-index: 2;
           flex-shrink: 0;
         }
+
+        [part~='overlay-header']:not([desktop]) {
+          padding-bottom: 40px;
+        }
+
+        [part~='years-toggle-button'] {
+          position: absolute;
+          top: auto;
+          right: 8px;
+          bottom: 0;
+          z-index: 1;
+          padding: 8px;
+        }
       </style>
 
       <div part="overlay-header" on-touchend="_preventDefault" desktop$="[[_desktopMode]]" aria-hidden="true">
         <div part="label">[[_formatDisplayed(selectedDate, i18n.formatDate, label)]]</div>
-        <div part="clear-button" hidden$="[[!selectedDate]]"></div>
+        <div part="clear-button" showclear$="[[_showClear(selectedDate)]]"></div>
         <div part="toggle-button"></div>
 
-        <div part="years-toggle-button" hidden$="[[_desktopMode]]" aria-hidden="true">
+        <div part="years-toggle-button" desktop$="[[_desktopMode]]" aria-hidden="true">
           [[_yearAfterXMonths(_visibleMonthIndex)]]
         </div>
       </div>
@@ -17955,7 +17928,6 @@ class DatePickerOverlayContent extends ControllerMixin(ThemableMixin(DirMixin(Po
        */
       selectedDate: {
         type: Date,
-        value: null,
       },
 
       /**
@@ -18031,12 +18003,10 @@ class DatePickerOverlayContent extends ControllerMixin(ThemableMixin(DirMixin(Po
     return this.getAttribute('dir') === 'rtl';
   }
 
-  get calendars() {
-    return [...this.shadowRoot.querySelectorAll('vaadin-month-calendar')];
-  }
-
   get focusableDateElement() {
-    return this.calendars.map((calendar) => calendar.focusableDateElement).find(Boolean);
+    return [...this.shadowRoot.querySelectorAll('vaadin-month-calendar')]
+      .map((calendar) => calendar.focusableDateElement)
+      .find(Boolean);
   }
 
   ready() {
@@ -18044,6 +18014,7 @@ class DatePickerOverlayContent extends ControllerMixin(ThemableMixin(DirMixin(Po
 
     this.setAttribute('role', 'dialog');
 
+    addListener(this, 'tap', this._stopPropagation);
     addListener(this.$.scrollers, 'track', this._track.bind(this));
     addListener(this.shadowRoot.querySelector('[part="clear-button"]'), 'tap', this._clear.bind(this));
     addListener(this.shadowRoot.querySelector('[part="today-button"]'), 'tap', this._onTodayTap.bind(this));
@@ -18165,9 +18136,7 @@ class DatePickerOverlayContent extends ControllerMixin(ThemableMixin(DirMixin(Po
 
   _onYearScrollTouchStart() {
     this._notTapping = false;
-    setTimeout(() => {
-      this._notTapping = true;
-    }, 300);
+    setTimeout(() => (this._notTapping = true), 300);
 
     this._repositionMonthScroller();
   }
@@ -18178,9 +18147,7 @@ class DatePickerOverlayContent extends ControllerMixin(ThemableMixin(DirMixin(Po
 
   _doIgnoreTaps() {
     this._ignoreTaps = true;
-    this._debouncer = Debouncer$1.debounce(this._debouncer, timeOut.after(300), () => {
-      this._ignoreTaps = false;
-    });
+    this._debouncer = Debouncer$1.debounce(this._debouncer, timeOut.after(300), () => (this._ignoreTaps = false));
   }
 
   _formatDisplayed(date, formatDate, label) {
@@ -18211,6 +18178,10 @@ class DatePickerOverlayContent extends ControllerMixin(ThemableMixin(DirMixin(Po
     this.scrollToDate(new Date(), true);
   }
 
+  _showClear(selectedDate) {
+    return !!selectedDate;
+  }
+
   _onYearTap(e) {
     if (!this._ignoreTaps && !this._notTapping) {
       const scrollDelta =
@@ -18236,11 +18207,6 @@ class DatePickerOverlayContent extends ControllerMixin(ThemableMixin(DirMixin(Po
 
     this._targetPosition = targetPosition;
 
-    let revealResolve;
-    this._revealPromise = new Promise((resolve) => {
-      revealResolve = resolve;
-    });
-
     // http://gizma.com/easing/
     const easingFunction = (t, b, c, d) => {
       t /= d / 2;
@@ -18281,9 +18247,7 @@ class DatePickerOverlayContent extends ControllerMixin(ThemableMixin(DirMixin(Po
 
         this.$.monthScroller.position = this._targetPosition;
         this._targetPosition = undefined;
-
-        revealResolve();
-        this._revealPromise = undefined;
+        this.__tryFocusDate();
       }
 
       setTimeout(this._repositionYearScroller.bind(this), 1);
@@ -18493,44 +18457,51 @@ class DatePickerOverlayContent extends ControllerMixin(ThemableMixin(DirMixin(Po
     switch (section) {
       case 'calendar':
         if (event.shiftKey) {
+          // Return focus back to the input field.
           event.preventDefault();
-
-          if (this.hasAttribute('fullscreen')) {
-            // Trap focus in the overlay
-            this.$.cancelButton.focus();
-          } else {
-            this.__focusInput();
-          }
+          this.__focusInput();
         }
         break;
       case 'today':
         if (event.shiftKey) {
-          event.preventDefault();
-          this.focusDateElement();
+          // Browser returns focus back to the calendar.
+          // We need to move the scroll to focused date.
+          setTimeout(() => this.revealDate(this.focusedDate), 1);
         }
         break;
       case 'cancel':
         if (!event.shiftKey) {
+          // Return focus back to the input field.
           event.preventDefault();
-
-          if (this.hasAttribute('fullscreen')) {
-            // Trap focus in the overlay
-            this.focusDateElement();
-          } else {
-            this.__focusInput();
-          }
+          this.__focusInput();
         }
         break;
     }
   }
 
   __onTodayButtonKeyDown(event) {
+    if (this.hasAttribute('fullscreen')) {
+      // Do not prevent closing on Esc
+      if (event.key !== 'Escape') {
+        event.stopPropagation();
+      }
+      return;
+    }
+
     if (event.key === 'Tab') {
       this._onTabKeyDown(event, 'today');
     }
   }
 
   __onCancelButtonKeyDown(event) {
+    if (this.hasAttribute('fullscreen')) {
+      // Do not prevent closing on Esc
+      if (event.key !== 'Escape') {
+        event.stopPropagation();
+      }
+      return;
+    }
+
     if (event.key === 'Tab') {
       this._onTabKeyDown(event, 'cancel');
     }
@@ -18559,29 +18530,15 @@ class DatePickerOverlayContent extends ControllerMixin(ThemableMixin(DirMixin(Po
     if (!keepMonth) {
       this._focusedMonthDate = dateToFocus.getDate();
     }
-    await this.focusDateElement(false);
+    await this.focusDateElement();
   }
 
-  async focusDateElement(reveal = true) {
+  async focusDateElement() {
     this.__pendingDateFocus = this.focusedDate;
 
-    // Wait for `vaadin-month-calendar` elements to be rendered
-    if (!this.calendars.length) {
-      await new Promise((resolve) => {
-        setTimeout(resolve);
-      });
-    }
-
-    // Reveal focused date unless it has been just set,
-    // which triggers `revealDate()` in the observer.
-    if (reveal) {
-      this.revealDate(this.focusedDate);
-    }
-
-    if (this._revealPromise) {
-      // Wait for focused date to be scrolled into view.
-      await this._revealPromise;
-    }
+    await new Promise((resolve) => {
+      requestAnimationFrame(resolve);
+    });
 
     this.__tryFocusDate();
   }
@@ -18679,6 +18636,10 @@ class DatePickerOverlayContent extends ControllerMixin(ThemableMixin(DirMixin(Po
     todayMidnight.setDate(today.getDate());
     return this._dateAllowed(todayMidnight, min, max);
   }
+
+  _stopPropagation(e) {
+    e.stopPropagation();
+  }
 }
 
 customElements.define(DatePickerOverlayContent.is, DatePickerOverlayContent);
@@ -18909,24 +18870,6 @@ const DelegateFocusMixin = dedupingMixin(
     },
 );
 
-/**
- * @license
- * Copyright (c) 2021 - 2022 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-
-let uniqueId = 0;
-
-/**
- * Returns a unique integer id.
- *
- * @return {number}
- */
-function generateUniqueId() {
-  // eslint-disable-next-line no-plusplus
-  return uniqueId++;
-}
-
 /**
  * @license
  * Copyright (c) 2021 - 2022 Vaadin Ltd.
@@ -18947,21 +18890,24 @@ class SlotController extends EventTarget {
    */
   static generateId(slotName, host) {
     const prefix = slotName || 'default';
-    return `${prefix}-${host.localName}-${generateUniqueId()}`;
+
+    // Support dash-case slot names e.g. "error-message"
+    const field = `${dashToCamelCase(prefix)}Id`;
+
+    // Maintain the unique ID counter for a given prefix.
+    this[field] = 1 + this[field] || 0;
+
+    return `${prefix}-${host.localName}-${this[field]}`;
   }
 
-  constructor(host, slotName, slotFactory, slotInitializer, useUniqueId) {
+  constructor(host, slotName, slotFactory, slotInitializer) {
     super();
 
     this.host = host;
     this.slotName = slotName;
     this.slotFactory = slotFactory;
     this.slotInitializer = slotInitializer;
-
-    // Only generate the default ID if requested by the controller.
-    if (useUniqueId) {
-      this.defaultId = SlotController.generateId(slotName, host);
-    }
+    this.defaultId = SlotController.generateId(slotName, host);
   }
 
   hostConnected() {
@@ -19116,7 +19062,6 @@ class ErrorController extends SlotController {
 
         this.__updateHasError();
       },
-      true,
     );
   }
 
@@ -19231,6 +19176,63 @@ class ErrorController extends SlotController {
   }
 }
 
+/**
+ * @license
+ * Copyright (c) 2021 - 2022 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+
+/**
+ * @param {string} value
+ * @return {Set<string>}
+ */
+function deserializeAttributeValue(value) {
+  if (!value) {
+    return new Set();
+  }
+
+  return new Set(value.split(' '));
+}
+
+/**
+ * @param {Set<string>} values
+ * @return {string}
+ */
+function serializeAttributeValue(values) {
+  return [...values].join(' ');
+}
+
+/**
+ * Adds a value to an attribute containing space-delimited values.
+ *
+ * @param {HTMLElement} element
+ * @param {string} attr
+ * @param {string} value
+ */
+function addValueToAttribute(element, attr, value) {
+  const values = deserializeAttributeValue(element.getAttribute(attr));
+  values.add(value);
+  element.setAttribute(attr, serializeAttributeValue(values));
+}
+
+/**
+ * Removes a value from an attribute containing space-delimited values.
+ * If the value is the last one, the whole attribute is removed.
+ *
+ * @param {HTMLElement} element
+ * @param {string} attr
+ * @param {string} value
+ */
+function removeValueFromAttribute(element, attr, value) {
+  const values = deserializeAttributeValue(element.getAttribute(attr));
+  values.delete(value);
+  if (values.size === 0) {
+    element.removeAttribute(attr);
+    return;
+  }
+  element.setAttribute(attr, serializeAttributeValue(values));
+}
+
 /**
  * @license
  * Copyright (c) 2021 - 2022 Vaadin Ltd.
@@ -19405,7 +19407,7 @@ class FieldAriaController {
 
 /**
  * @license
- * Copyright (c) 2021 - 2022 Vaadin Ltd.
+ * Copyright (c) 2021 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 
@@ -19415,7 +19417,7 @@ class FieldAriaController {
 class HelperController extends SlotController {
   constructor(host) {
     // Do not provide slot factory, as only create helper lazily.
-    super(host, 'helper', null, null, true);
+    super(host, 'helper');
   }
 
   get helperId() {
@@ -19612,7 +19614,6 @@ class LabelController extends SlotController {
 
         this.__observeLabel(node);
       },
-      true,
     );
   }
 
@@ -19819,12 +19820,6 @@ const LabelMixin = dedupingMixin(
         super();
 
         this._labelController = new LabelController(this);
-      }
-
-      /** @protected */
-      ready() {
-        super.ready();
-
         this.addController(this._labelController);
       }
 
@@ -19872,17 +19867,12 @@ const ValidateMixin = dedupingMixin(
       }
 
       /**
-       * Validates the field and sets the `invalid` property based on the result.
-       *
-       * The method fires a `validated` event with the result of the validation.
+       * Returns true if field is valid, and sets `invalid` based on the field validity.
        *
        * @return {boolean} True if the value is valid.
        */
       validate() {
-        const isValid = this.checkValidity();
-        this._setInvalid(!isValid);
-        this.dispatchEvent(new CustomEvent('validated', { detail: { valid: isValid } }));
-        return isValid;
+        return !(this.invalid = !this.checkValidity());
       }
 
       /**
@@ -19893,35 +19883,6 @@ const ValidateMixin = dedupingMixin(
       checkValidity() {
         return !this.required || !!this.value;
       }
-
-      /**
-       * @param {boolean} invalid
-       * @protected
-       */
-      _setInvalid(invalid) {
-        if (this._shouldSetInvalid(invalid)) {
-          this.invalid = invalid;
-        }
-      }
-
-      /**
-       * Override this method to define whether the given `invalid` state should be set.
-       *
-       * @param {boolean} _invalid
-       * @return {boolean}
-       * @protected
-       */
-      _shouldSetInvalid(_invalid) {
-        return true;
-      }
-
-      /**
-       * Fired whenever the field is validated.
-       *
-       * @event validated
-       * @param {Object} detail
-       * @param {boolean} detail.valid the result of the validation.
-       */
     },
 );
 
@@ -20010,6 +19971,10 @@ const FieldMixin = (superclass) =>
       this._helperController = new HelperController(this);
       this._errorController = new ErrorController(this);
 
+      this.addController(this._fieldAriaController);
+      this.addController(this._helperController);
+      this.addController(this._errorController);
+
       this._labelController.addEventListener('label-changed', (event) => {
         const { hasLabel, node } = event.detail;
         this.__labelChanged(hasLabel, node);
@@ -20021,15 +19986,6 @@ const FieldMixin = (superclass) =>
       });
     }
 
-    /** @protected */
-    ready() {
-      super.ready();
-
-      this.addController(this._fieldAriaController);
-      this.addController(this._helperController);
-      this.addController(this._errorController);
-    }
-
     /** @private */
     __helperChanged(hasHelper, helperNode) {
       if (hasHelper) {
@@ -20085,7 +20041,7 @@ const FieldMixin = (superclass) =>
     }
 
     /**
-     * @param {boolean} invalid
+     * @param {boolean} required
      * @protected
      */
     _invalidChanged(invalid) {
@@ -20285,23 +20241,13 @@ const InputMixin = dedupingMixin(
             observer: '_valueChanged',
             notify: true,
           },
-
-          /**
-           * When true, the input element has a non-empty value entered by the user.
-           * @protected
-           */
-          _hasInputValue: {
-            type: Boolean,
-            value: false,
-            observer: '_hasInputValueChanged',
-          },
         };
       }
 
       constructor() {
         super();
 
-        this._boundOnInput = this.__onInput.bind(this);
+        this._boundOnInput = this._onInput.bind(this);
         this._boundOnChange = this._onChange.bind(this);
       }
 
@@ -20316,7 +20262,6 @@ const InputMixin = dedupingMixin(
        * Add event listeners to the input element instance.
        * Override this method to add custom listeners.
        * @param {!HTMLElement} input
-       * @protected
        */
       _addInputListeners(input) {
         input.addEventListener('input', this._boundOnInput);
@@ -20326,7 +20271,6 @@ const InputMixin = dedupingMixin(
       /**
        * Remove event listeners from the input element instance.
        * @param {!HTMLElement} input
-       * @protected
        */
       _removeInputListeners(input) {
         input.removeEventListener('input', this._boundOnInput);
@@ -20340,6 +20284,7 @@ const InputMixin = dedupingMixin(
        * for example to skip this in certain conditions.
        * @param {string} value
        * @protected
+       * @override
        */
       _forwardInputValue(value) {
         // Value might be set before an input element is initialized.
@@ -20356,11 +20301,7 @@ const InputMixin = dedupingMixin(
         }
       }
 
-      /**
-       * @param {HTMLElement | undefined} input
-       * @param {HTMLElement | undefined} oldInput
-       * @protected
-       */
+      /** @protected */
       _inputElementChanged(input, oldInput) {
         if (input) {
           this._addInputListeners(input);
@@ -20369,47 +20310,17 @@ const InputMixin = dedupingMixin(
         }
       }
 
-      /**
-       * Observer to notify about the change of private property.
-       *
-       * @private
-       */
-      _hasInputValueChanged(hasValue, oldHasValue) {
-        if (hasValue || oldHasValue) {
-          this.dispatchEvent(new CustomEvent('has-input-value-changed'));
-        }
-      }
-
-      /**
-       * An input event listener used to update `_hasInputValue` property.
-       * Do not override this method.
-       *
-       * @param {Event} event
-       * @private
-       */
-      __onInput(event) {
-        // In the case a custom web component is passed as `inputElement`,
-        // the actual native input element, on which the event occurred,
-        // can be inside shadow trees.
-        const target = event.composedPath()[0];
-        this._hasInputValue = target.value.length > 0;
-        this._onInput(event);
-      }
-
       /**
        * An input event listener used to update the field value.
-       *
-       * @param {Event} event
+       * Override this method with an actual implementation.
+       * @param {Event} _event
        * @protected
+       * @override
        */
       _onInput(event) {
-        // In the case a custom web component is passed as `inputElement`,
-        // the actual native input element, on which the event occurred,
-        // can be inside shadow trees.
-        const target = event.composedPath()[0];
         // Ignore fake input events e.g. used by clear button.
         this.__userInput = event.isTrusted;
-        this.value = target.value;
+        this.value = event.target.value;
         this.__userInput = false;
       }
 
@@ -20418,12 +20329,12 @@ const InputMixin = dedupingMixin(
        * Override this method with an actual implementation.
        * @param {Event} _event
        * @protected
+       * @override
        */
       _onChange(_event) {}
 
       /**
        * Toggle the has-value attribute based on the value property.
-       *
        * @param {boolean} hasValue
        * @protected
        */
@@ -20436,9 +20347,10 @@ const InputMixin = dedupingMixin(
        * @param {string | undefined} newVal
        * @param {string | undefined} oldVal
        * @protected
+       * @override
        */
       _valueChanged(newVal, oldVal) {
-        this._toggleHasValue(this._hasValue);
+        this._toggleHasValue(newVal !== '' && newVal != null);
 
         // Setting initial value to empty string, do nothing.
         if (newVal === '' && oldVal === undefined) {
@@ -20453,16 +20365,6 @@ const InputMixin = dedupingMixin(
         // Setting a value programmatically, sync it to input element.
         this._forwardInputValue(newVal);
       }
-
-      /**
-       * Indicates whether the value is different from the default one.
-       * Override if the `value` property has a type other than `string`.
-       *
-       * @protected
-       */
-      get _hasValue() {
-        return this.value != null && this.value !== '';
-      }
     },
 );
 
@@ -20534,32 +20436,26 @@ const InputConstraintsMixin = dedupingMixin(
       _createConstraintsObserver() {
         // This complex observer needs to be added dynamically instead of using `static get observers()`
         // to make it possible to tweak this behavior in classes that apply this mixin.
-        this._createMethodObserver(`_constraintsChanged(stateTarget, ${this.constructor.constraints.join(', ')})`);
+        this._createMethodObserver(`_constraintsChanged(${this.constructor.constraints.join(', ')})`);
       }
 
       /**
        * Override this method to implement custom validation constraints.
-       * @param {HTMLElement | undefined} stateTarget
        * @param {unknown[]} constraints
        * @protected
        */
-      _constraintsChanged(stateTarget, ...constraints) {
-        // The input element's validity cannot be determined until
-        // all the necessary constraint attributes aren't set on it.
-        if (!stateTarget) {
+      _constraintsChanged(...constraints) {
+        // Prevent marking field as invalid when setting required state
+        // or any other constraint before a user has entered the value.
+        if (!this.invalid) {
           return;
         }
 
-        const hasConstraints = this._hasValidConstraints(constraints);
-        const isLastConstraintRemoved = this.__previousHasConstraints && !hasConstraints;
-
-        if ((this._hasValue || this.invalid) && hasConstraints) {
+        if (this._hasValidConstraints(constraints)) {
           this.validate();
-        } else if (isLastConstraintRemoved) {
-          this._setInvalid(false);
+        } else {
+          this.invalid = false;
         }
-
-        this.__previousHasConstraints = hasConstraints;
       }
 
       /**
@@ -20615,22 +20511,6 @@ const InputControlMixin = (superclass) =>
   ) {
     static get properties() {
       return {
-        /**
-         * A pattern matched against individual characters the user inputs.
-         *
-         * When set, the field will prevent:
-         * - `keydown` events if the entered key doesn't match `/^allowedCharPattern$/`
-         * - `paste` events if the pasted text doesn't match `/^allowedCharPattern*$/`
-         * - `drop` events if the dropped text doesn't match `/^allowedCharPattern*$/`
-         *
-         * For example, to allow entering only numbers and minus signs, use:
-         * `allowedCharPattern = "[\\d-]"`
-         */
-        allowedCharPattern: {
-          type: String,
-          observer: '_allowedCharPatternChanged',
-        },
-
         /**
          * If true, the input text gets fully selected when the field is focused using click or touch / tap.
          */
@@ -20688,14 +20568,6 @@ const InputControlMixin = (superclass) =>
       return [...super.delegateAttrs, 'name', 'type', 'placeholder', 'readonly', 'invalid', 'title'];
     }
 
-    constructor() {
-      super();
-
-      this._boundOnPaste = this._onPaste.bind(this);
-      this._boundOnDrop = this._onDrop.bind(this);
-      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.
@@ -20788,115 +20660,6 @@ const InputControlMixin = (superclass) =>
       this.inputElement.dispatchEvent(new Event('change', { bubbles: true }));
     }
 
-    /**
-     * Override a method from `InputMixin`.
-     * @param {!HTMLElement} input
-     * @protected
-     * @override
-     */
-    _addInputListeners(input) {
-      super._addInputListeners(input);
-
-      input.addEventListener('paste', this._boundOnPaste);
-      input.addEventListener('drop', this._boundOnDrop);
-      input.addEventListener('beforeinput', this._boundOnBeforeInput);
-    }
-
-    /**
-     * Override a method from `InputMixin`.
-     * @param {!HTMLElement} input
-     * @protected
-     * @override
-     */
-    _removeInputListeners(input) {
-      super._removeInputListeners(input);
-
-      input.removeEventListener('paste', this._boundOnPaste);
-      input.removeEventListener('drop', this._boundOnDrop);
-      input.removeEventListener('beforeinput', this._boundOnBeforeInput);
-    }
-
-    /**
-     * Override an event listener from `KeyboardMixin`.
-     * @param {!KeyboardEvent} event
-     * @protected
-     * @override
-     */
-    _onKeyDown(event) {
-      super._onKeyDown(event);
-
-      if (this.allowedCharPattern && !this.__shouldAcceptKey(event)) {
-        event.preventDefault();
-        this._markInputPrevented();
-      }
-    }
-
-    /** @protected */
-    _markInputPrevented() {
-      // Add input-prevented attribute for 200ms
-      this.setAttribute('input-prevented', '');
-      this._preventInputDebouncer = Debouncer$1.debounce(this._preventInputDebouncer, timeOut.after(200), () => {
-        this.removeAttribute('input-prevented');
-      });
-    }
-
-    /** @private */
-    __shouldAcceptKey(event) {
-      return (
-        event.metaKey ||
-        event.ctrlKey ||
-        !event.key || // Allow typing anything if event.key is not supported
-        event.key.length !== 1 || // Allow "Backspace", "ArrowLeft" etc.
-        this.__allowedCharRegExp.test(event.key)
-      );
-    }
-
-    /** @private */
-    _onPaste(e) {
-      if (this.allowedCharPattern) {
-        const pastedText = e.clipboardData.getData('text');
-        if (!this.__allowedTextRegExp.test(pastedText)) {
-          e.preventDefault();
-          this._markInputPrevented();
-        }
-      }
-    }
-
-    /** @private */
-    _onDrop(e) {
-      if (this.allowedCharPattern) {
-        const draggedText = e.dataTransfer.getData('text');
-        if (!this.__allowedTextRegExp.test(draggedText)) {
-          e.preventDefault();
-          this._markInputPrevented();
-        }
-      }
-    }
-
-    /** @private */
-    _onBeforeInput(e) {
-      // The `beforeinput` event covers all the cases for `allowedCharPattern`: keyboard, pasting and dropping,
-      // but it is still experimental technology so we can't rely on it. It's used here just as an additional check,
-      // because it seems to be the only way to detect and prevent specific keys on mobile devices.
-      // See https://github.com/vaadin/vaadin-text-field/issues/429
-      if (this.allowedCharPattern && e.data && !this.__allowedTextRegExp.test(e.data)) {
-        e.preventDefault();
-        this._markInputPrevented();
-      }
-    }
-
-    /** @private */
-    _allowedCharPatternChanged(charPattern) {
-      if (charPattern) {
-        try {
-          this.__allowedCharRegExp = new RegExp(`^${charPattern}$`);
-          this.__allowedTextRegExp = new RegExp(`^${charPattern}*$`);
-        } catch (e) {
-          console.error(e);
-        }
-      }
-    }
-
     /**
      * Fired when the user commits a value change.
      *
@@ -20935,13 +20698,14 @@ class InputController extends SlotController {
         }
 
         // Ensure every instance has unique ID
-        node.id = this.defaultId;
+        const uniqueId = (InputController._uniqueInputId = 1 + InputController._uniqueInputId || 0);
+        host._inputId = `${host.localName}-${uniqueId}`;
+        node.id = host._inputId;
 
         if (typeof callback === 'function') {
           callback(node);
         }
       },
-      true,
     );
   }
 }
@@ -21123,9 +20887,7 @@ class VirtualKeyboardController {
  * @param {function(new:HTMLElement)} subclass
  */
 const DatePickerMixin = (subclass) =>
-  class VaadinDatePickerMixin extends ControllerMixin(
-    DelegateFocusMixin(InputConstraintsMixin(KeyboardMixin(subclass))),
-  ) {
+  class VaadinDatePickerMixin extends ControllerMixin(DelegateFocusMixin(InputMixin(KeyboardMixin(subclass)))) {
     static get properties() {
       return {
         /**
@@ -21154,6 +20916,7 @@ const DatePickerMixin = (subclass) =>
          */
         value: {
           type: String,
+          observer: '_valueChanged',
           notify: true,
           value: '',
         },
@@ -21209,6 +20972,13 @@ const DatePickerMixin = (subclass) =>
           value: '(max-width: 420px), (max-height: 420px)',
         },
 
+        /**
+         * An array of ancestor elements whose -webkit-overflow-scrolling is forced from value
+         * 'touch' to value 'auto' in order to prevent them from clipping the dropdown. iOS only.
+         * @private
+         */
+        _touchPrevented: Array,
+
         /**
          * The object used to localize this component.
          * To change the default localization, replace the entire
@@ -21364,6 +21134,7 @@ const DatePickerMixin = (subclass) =>
          */
         min: {
           type: String,
+          observer: '_minChanged',
         },
 
         /**
@@ -21377,26 +21148,28 @@ const DatePickerMixin = (subclass) =>
          */
         max: {
           type: String,
+          observer: '_maxChanged',
         },
 
         /**
          * The earliest date that can be selected. All earlier dates will be disabled.
-         * @type {Date | undefined}
+         * @type {Date | string}
          * @protected
          */
         _minDate: {
           type: Date,
-          computed: '__computeMinOrMaxDate(min)',
+          // Null does not work here because minimizer passes undefined to overlay (#351)
+          value: '',
         },
 
         /**
          * The latest date that can be selected. All later dates will be disabled.
-         * @type {Date | undefined}
+         * @type {Date | string}
          * @protected
          */
         _maxDate: {
           type: Date,
-          computed: '__computeMinOrMaxDate(max)',
+          value: '',
         },
 
         /** @private */
@@ -21411,6 +21184,12 @@ const DatePickerMixin = (subclass) =>
           value: isIOS,
         },
 
+        /** @private */
+        _webkitOverflowScroll: {
+          type: Boolean,
+          value: document.createElement('div').style.webkitOverflowScrolling === '',
+        },
+
         /** @private */
         _focusOverlayOnOpen: Boolean,
 
@@ -21426,10 +21205,6 @@ const DatePickerMixin = (subclass) =>
       ];
     }
 
-    static get constraints() {
-      return [...super.constraints, 'min', 'max'];
-    }
-
     /**
      * Override a getter from `InputControlMixin` to make it optional
      * and to prevent warning when a clear button is missing,
@@ -21496,10 +21271,12 @@ const DatePickerMixin = (subclass) =>
           }
         }
 
-        this.validate();
-
-        if (this._inputValue === '' && this.value !== '') {
+        if (this.inputElement.value === '' && this.__dispatchChange) {
+          this.validate();
           this.value = '';
+          this.__dispatchChange = false;
+        } else {
+          this.validate();
         }
       }
     }
@@ -21568,19 +21345,14 @@ const DatePickerMixin = (subclass) =>
       this.$.overlay.removeAttribute('disable-upgrade');
       this._overlayInitialized = true;
 
-      this.$.overlay.addEventListener('opened-changed', (e) => {
-        this.opened = e.detail.value;
-      });
+      this.$.overlay.addEventListener('opened-changed', (e) => (this.opened = e.detail.value));
 
       this.$.overlay.addEventListener('vaadin-overlay-escape-press', () => {
         this._focusedDate = this._selectedDate;
         this._close();
       });
 
-      this._overlayContent.addEventListener('close', () => {
-        this._close();
-      });
-
+      this._overlayContent.addEventListener('close', this._close.bind(this));
       this._overlayContent.addEventListener('focus-input', this._focusAndSelect.bind(this));
 
       // User confirmed selected date by clicking the calendar.
@@ -21589,7 +21361,7 @@ const DatePickerMixin = (subclass) =>
 
         this._selectDate(e.detail.date);
 
-        this._close();
+        this._close(e);
       });
 
       // User confirmed selected date by pressing Enter or Today.
@@ -21599,18 +21371,24 @@ const DatePickerMixin = (subclass) =>
         this._selectDate(e.detail.date);
       });
 
-      // Set focus-ring attribute when moving focus to the overlay
-      // by pressing Tab or arrow key, after opening it on click.
+      // Keep focus attribute in focusElement for styling
       this._overlayContent.addEventListener('focusin', () => {
-        if (this._keyboardActive) {
-          this._setFocused(true);
-        }
+        this._setFocused(true);
       });
 
       this.addEventListener('mousedown', () => this.__bringToFront());
       this.addEventListener('touchstart', () => this.__bringToFront());
     }
 
+    /**
+     * Returns true if `value` is valid, and sets the `invalid` flag appropriately.
+     *
+     * @return {boolean} True if the value is valid and sets the `invalid` flag appropriately
+     */
+    validate() {
+      return !(this.invalid = !this.checkValidity());
+    }
+
     /**
      * Returns true if the current input value satisfies all constraints (if any)
      *
@@ -21621,7 +21399,7 @@ const DatePickerMixin = (subclass) =>
     checkValidity() {
       const inputValid =
         !this._inputValue ||
-        (!!this._selectedDate && this._inputValue === this._getFormattedDate(this.i18n.formatDate, this._selectedDate));
+        (this._selectedDate && this._inputValue === this._getFormattedDate(this.i18n.formatDate, this._selectedDate));
       const minMaxValid = !this._selectedDate || dateAllowed(this._selectedDate, this._minDate, this._maxDate);
 
       let inputValidity = true;
@@ -21637,51 +21415,6 @@ const DatePickerMixin = (subclass) =>
       return inputValid && minMaxValid && inputValidity;
     }
 
-    /**
-     * Override method inherited from `FocusMixin`
-     * to not call `_setFocused(true)` when focus
-     * is restored after closing overlay on click,
-     * and to avoid removing `focus-ring` attribute.
-     *
-     * @param {!FocusEvent} _event
-     * @return {boolean}
-     * @protected
-     * @override
-     */
-    _shouldSetFocus(_event) {
-      return !this._shouldKeepFocusRing;
-    }
-
-    /**
-     * Override method inherited from `FocusMixin`
-     * to prevent removing the `focused` attribute:
-     * - when moving focus to the overlay content,
-     * - when closing on date click / outside click.
-     *
-     * @param {!FocusEvent} _event
-     * @return {boolean}
-     * @protected
-     * @override
-     */
-    _shouldRemoveFocus(_event) {
-      return !this.opened;
-    }
-
-    /**
-     * Override method inherited from `FocusMixin`
-     * to store the `focus-ring` state to restore
-     * it later when closing on outside click.
-     *
-     * @param {boolean} focused
-     * @protected
-     * @override
-     */
-    _setFocused(focused) {
-      super._setFocused(focused);
-
-      this._shouldKeepFocusRing = focused && this._keyboardActive;
-    }
-
     /**
      * Select date on user interaction and set the flag
      * to fire change event if necessary.
@@ -21701,7 +21434,10 @@ const DatePickerMixin = (subclass) =>
     }
 
     /** @private */
-    _close() {
+    _close(e) {
+      if (e) {
+        e.stopPropagation();
+      }
       this._focus();
       this.close();
     }
@@ -21830,46 +21566,47 @@ const DatePickerMixin = (subclass) =>
       }
     }
 
-    /**
-     * Override the value observer from `InputMixin` to implement custom
-     * handling of the `value` property. The date-picker doesn't forward
-     * the value directly to the input like the default implementation of `InputMixin`.
-     * Instead, it parses the value into a date, puts it in `_selectedDate` which
-     * is then displayed in the input with respect to the specified date format.
-     *
-     * @param {string | undefined} value
-     * @param {string | undefined} oldValue
-     * @protected
-     * @override
-     */
-    _valueChanged(value, oldValue) {
-      const newDate = this._parseDate(value);
+    /** @private */
+    _handleDateChange(property, value, oldValue) {
+      if (!value) {
+        this[property] = '';
+        return;
+      }
 
-      if (value && !newDate) {
-        // The new value cannot be parsed, revert the old value.
+      const date = this._parseDate(value);
+      if (!date) {
         this.value = oldValue;
         return;
       }
-
-      if (value) {
-        if (!dateEquals(this._selectedDate, newDate)) {
-          // Update the date instance only if the date has actually changed.
-          this._selectedDate = newDate;
-
-          if (oldValue !== undefined) {
-            // Validate only if `value` changes after initialization.
-            this.validate();
-          }
+      if (!dateEquals(this[property], date)) {
+        this[property] = date;
+        if (this.value) {
+          this.validate();
         }
-      } else {
-        this._selectedDate = null;
       }
+    }
+
+    /** @private */
+    _valueChanged(value, oldValue) {
+      this._handleDateChange('_selectedDate', value, oldValue);
 
-      this._toggleHasValue(this._hasValue);
+      this._toggleHasValue(!!value);
+    }
+
+    /** @private */
+    _minChanged(value, oldValue) {
+      this._handleDateChange('_minDate', value, oldValue);
+    }
+
+    /** @private */
+    _maxChanged(value, oldValue) {
+      this._handleDateChange('_maxDate', value, oldValue);
     }
 
     /** @protected */
     _onOverlayOpened() {
+      this._openedWithFocusRing = this.hasAttribute('focus-ring');
+
       const parsedInitialPosition = this._parseDate(this.initialPosition);
 
       const initialPosition =
@@ -21889,6 +21626,10 @@ const DatePickerMixin = (subclass) =>
 
       window.addEventListener('scroll', this._boundOnScroll, true);
 
+      if (this._webkitOverflowScroll) {
+        this._touchPrevented = this._preventWebkitOverflowScrollingTouch(this.parentElement);
+      }
+
       if (this._focusOverlayOnOpen) {
         this._overlayContent.focusDateElement();
         this._focusOverlayOnOpen = false;
@@ -21902,6 +21643,25 @@ const DatePickerMixin = (subclass) =>
       }
     }
 
+    // A hack needed for iOS to prevent dropdown from being clipped in an
+    // ancestor container with -webkit-overflow-scrolling: touch;
+    /** @private */
+    _preventWebkitOverflowScrollingTouch(element) {
+      const result = [];
+      while (element) {
+        if (window.getComputedStyle(element).webkitOverflowScrolling === 'touch') {
+          const oldInlineValue = element.style.webkitOverflowScrolling;
+          element.style.webkitOverflowScrolling = 'auto';
+          result.push({
+            element,
+            oldInlineValue,
+          });
+        }
+        element = element.parentElement;
+      }
+      return result;
+    }
+
     /** @private */
     _selectParsedOrFocusedDate() {
       // Select the parsed input or focused date
@@ -21928,6 +21688,13 @@ const DatePickerMixin = (subclass) =>
     _onOverlayClosed() {
       window.removeEventListener('scroll', this._boundOnScroll, true);
 
+      if (this._touchPrevented) {
+        this._touchPrevented.forEach(
+          (prevented) => (prevented.element.style.webkitOverflowScrolling = prevented.oldInlineValue),
+        );
+        this._touchPrevented = [];
+      }
+
       // No need to select date on close if it was confirmed by the user.
       if (this.__userConfirmedDate) {
         this.__userConfirmedDate = false;
@@ -21943,6 +21710,11 @@ const DatePickerMixin = (subclass) =>
       if (!this.value) {
         this.validate();
       }
+
+      // If the input isn't focused when overlay closes (fullscreen mode), clear focused state
+      if (this.getRootNode().activeElement !== this.inputElement) {
+        this._setFocused(false);
+      }
     }
 
     /** @private */
@@ -21995,7 +21767,10 @@ const DatePickerMixin = (subclass) =>
     _onChange(event) {
       // For change event on the native <input> blur, after the input is cleared,
       // we schedule change event to be dispatched on date-picker blur.
-      if (this._inputValue === '') {
+      if (
+        this.inputElement.value === '' &&
+        !(event.detail && event.detail.sourceEvent && event.detail.sourceEvent.__fromClearButton)
+      ) {
         this.__dispatchChange = true;
       }
 
@@ -22082,7 +21857,7 @@ const DatePickerMixin = (subclass) =>
             if (e.shiftKey) {
               this._overlayContent.focusCancel();
             } else {
-              this._overlayContent.focusDateElement();
+              this._overlayContent.focusDate(this._focusedDate);
             }
           }
           break;
@@ -22193,11 +21968,6 @@ const DatePickerMixin = (subclass) =>
       return this.$.overlay.content.querySelector('#overlay-content');
     }
 
-    /** @private */
-    __computeMinOrMaxDate(dateString) {
-      return this._parseDate(dateString);
-    }
-
     /**
      * Fired when the user commits a value change.
      *
@@ -22309,13 +22079,12 @@ registerStyles('vaadin-date-picker', [inputFieldShared, datePickerStyles], { mod
  * Note: the `theme` attribute value set on `<vaadin-date-picker>` is
  * propagated to the internal components listed above.
  *
- * See [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.
+ * See [Styling Components](https://vaadin.com/docs/latest/ds/customization/styling-components) documentation.
  *
  * @fires {Event} change - Fired when the user commits a value change.
  * @fires {CustomEvent} invalid-changed - Fired when the `invalid` property changes.
  * @fires {CustomEvent} opened-changed - Fired when the `opened` property changes.
  * @fires {CustomEvent} value-changed - Fired when the `value` property changes.
- * @fires {CustomEvent} validated - Fired whenever the field is validated.
  *
  * @extends HTMLElement
  * @mixes ElementMixin
@@ -22369,7 +22138,7 @@ class DatePicker extends DatePickerMixin(InputControlMixin(ThemableMixin(Element
         fullscreen$="[[_fullscreen]]"
         theme$="[[__getOverlayTheme(_theme, _overlayInitialized)]]"
         on-vaadin-overlay-open="_onOverlayOpened"
-        on-vaadin-overlay-closing="_onOverlayClosed"
+        on-vaadin-overlay-close="_onOverlayClosed"
         restore-focus-on-close
         restore-focus-node="[[inputElement]]"
         disable-upgrade
@@ -22429,6 +22198,11 @@ class DatePicker extends DatePickerMixin(InputControlMixin(ThemableMixin(Element
 
   /** @private */
   _onVaadinOverlayClose(e) {
+    if (this._openedWithFocusRing && this.hasAttribute('focused')) {
+      this.setAttribute('focus-ring', '');
+    } else if (!this.hasAttribute('focused')) {
+      this.blur();
+    }
     if (e.detail.sourceEvent && e.detail.sourceEvent.composedPath().includes(this)) {
       e.preventDefault();
     }
@@ -22490,26 +22264,55 @@ const HelperFilters$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
      * Language
      */
     this.language = 'en';
+    /**
+     * Notifies if the quick filters from tickets are active
+     */
+    this.quickFiltersActive = false;
+    /**
+     * Client custom styling via string
+     */
+    this.clientStyling = '';
+    /**
+     * Client custom styling via url content
+     */
+    this.clientStylingUrlContent = '';
     this.showFilterModal = false;
     this.showClearButton = false;
     this.filterData = {};
     this.filterDataReset = { ticketDrawId: '', filterFromCalendar: '', filterToCalendar: '' };
+    this.limitStylingAppends = false;
+    this.setClientStyling = () => {
+      let sheet = document.createElement('style');
+      sheet.innerHTML = this.clientStyling;
+      this.stylingContainer.prepend(sheet);
+    };
+    this.setClientStylingURL = () => {
+      let cssFile = document.createElement('style');
+      setTimeout(() => {
+        cssFile.innerHTML = this.clientStylingUrlContent;
+        this.stylingContainer.prepend(cssFile);
+      }, 1);
+    };
   }
   // reset field values each time the filter modal opens
   componentDidRender() {
-    this.filterData.ticketDrawId = null;
-    this.filterData.filterFromCalendar = null;
-    this.filterData.filterToCalendar = null;
     // @TODO: to way binding?
     if (document.getElementById('#FilterById'))
       document.getElementById('#FilterById').value = '';
+    // start custom styling area
+    if (!this.limitStylingAppends && this.stylingContainer) {
+      if (this.clientStyling)
+        this.setClientStyling();
+      if (this.clientStylingUrlContent)
+        this.setClientStylingURL();
+      this.limitStylingAppends = true;
+    }
+    // end custom styling area
   }
   filterSelectionHandler(event) {
     if (this.postMessage)
       window.postMessage({ type: 'filterSelection', event }, window.location.href);
-    if (this.filterData.ticketDrawId)
-      this.filterDraw.emit(event);
-    if (this.filterData.filterFromCalendar || this.filterData.filterToCalendar)
+    if (this.filterData.ticketDrawId || this.filterData.filterFromCalendar || this.filterData.filterToCalendar)
       this.filterSelection.emit(event);
   }
   filterSelectionResetHandler(event) {
@@ -22545,7 +22348,10 @@ const HelperFilters$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
     this.filterData.filterToCalendar = new Date(event.target.value).toISOString();
   }
   render() {
-    return (h$2("div", { class: "HelperFilters" }, h$2("div", { class: "FilterButtonsWrapper" }, h$2("button", { class: "FilterOpen", onClick: () => this.toggleFilterModal() }, translate$1('filterOpen', this.language)), this.showClearButton ? h$2("button", { class: "FilterClear", onClick: () => this.resetSearch() }, translate$1('filterClear', this.language)) : null), h$2("helper-modal", { "title-modal": "Filter Modal", visible: this.showFilterModal }, h$2("div", { class: "FilterModalHeader" }, h$2("h3", { class: "FilterModalTitle" }, this.activateTicketSearch ? translate$1('filterModalTicketTitle', this.language) : translate$1('filterModalDrawTitle', this.language))), h$2("div", { class: "FilterModalBody" }, h$2("input", { id: "FilterById", type: "text", value: this.filterData.ticketDrawId, onInput: (event) => this.handleTicketDrawId(event), class: "FilterModalSearch", placeholder: this.activateTicketSearch ? translate$1('filterTicketPlaceholder', this.language) : translate$1('filterDrawPlaceholder', this.language) }), h$2("p", null, translate$1('filterOrDate', this.language)), h$2("div", { class: "FilterCalendarWrapper" }, h$2("vaadin-date-picker", { value: this.filterData.filterFromCalendar, onChange: (event) => this.handleFilterFrom(event), placeholder: translate$1('filterFromCalendar', this.language), class: "VaadinDatePicker" }), h$2("vaadin-date-picker", { value: this.filterData.filterToCalendar, onChange: (event) => this.handleFilterTo(event), placeholder: translate$1('filterToCalendar', this.language), class: "VaadinDatePicker" }))), h$2("div", { class: "FilterModalFooter" }, h$2("button", { class: "FilterModalButton", onClick: () => this.filterSearch() }, translate$1('filterModalButton', this.language))))));
+    return (h$2("div", { class: "HelperFilters", ref: el => this.stylingContainer = el }, h$2("div", { class: "FilterButtonsWrapper" }, h$2("button", { class: "FilterOpen", onClick: () => this.toggleFilterModal() }, translate$1('filterOpen', this.language)), (this.showClearButton || this.quickFiltersActive) ?
+      h$2("button", { class: "FilterClear", onClick: () => this.resetSearch() }, translate$1('filterClear', this.language))
+      :
+        null), h$2("helper-modal", { "title-modal": "Filter Modal", visible: this.showFilterModal, "client-styling": this.clientStyling, "client-styling-url-content": this.clientStylingUrlContent }, h$2("div", { class: "FilterModalHeader" }, h$2("h3", { class: "FilterModalTitle" }, this.activateTicketSearch ? translate$1('filterModalTicketTitle', this.language) : translate$1('filterModalDrawTitle', this.language))), h$2("div", { class: "FilterModalBody" }, h$2("input", { id: "FilterById", type: "text", value: this.filterData.ticketDrawId, onInput: (event) => this.handleTicketDrawId(event), class: "FilterModalSearch", placeholder: this.activateTicketSearch ? translate$1('filterTicketPlaceholder', this.language) : translate$1('filterDrawPlaceholder', this.language) }), h$2("p", null, translate$1('filterOrDate', this.language)), h$2("div", { class: "FilterCalendarWrapper" }, h$2("vaadin-date-picker", { value: this.filterData.filterFromCalendar, onChange: (event) => this.handleFilterFrom(event), placeholder: translate$1('filterFromCalendar', this.language), class: "VaadinDatePicker" }), h$2("vaadin-date-picker", { value: this.filterData.filterToCalendar, onChange: (event) => this.handleFilterTo(event), placeholder: translate$1('filterToCalendar', this.language), class: "VaadinDatePicker" }))), h$2("div", { class: "FilterModalFooter" }, h$2("button", { class: "FilterModalButton", onClick: () => this.filterSearch() }, translate$1('filterModalButton', this.language))))));
   }
   static get style() { return helperFiltersCss; }
 }, [1, "helper-filters", {
@@ -22556,22 +22362,31 @@ const HelperFilters$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
     "session": [1],
     "postMessage": [4, "post-message"],
     "language": [1],
+    "quickFiltersActive": [4, "quick-filters-active"],
+    "clientStyling": [1, "client-styling"],
+    "clientStylingUrlContent": [1, "client-styling-url-content"],
     "showFilterModal": [32],
     "showClearButton": [32],
     "filterData": [32],
-    "filterDataReset": [32]
+    "filterDataReset": [32],
+    "limitStylingAppends": [32]
   }, [[0, "modalCloseEvent", "modalCloseEvent"]]]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["helper-filters"];
+  const components = ["helper-filters", "helper-modal"];
   components.forEach(tagName => { switch (tagName) {
     case "helper-filters":
       if (!customElements.get(tagName)) {
         customElements.define(tagName, HelperFilters$1);
       }
       break;
+    case "helper-modal":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
   } });
 }