@everymatrix/lottery-game-page 0.1.27 → 1.15.0

package/dist/cjs/helper-filters_2.cjs.entry.js

@@ -31,6 +31,32 @@ const TRANSLATIONS$1 = {
     filterModalButton: 'Cauta',
     filterOrDate: 'sau cauta dupa data'
   },
+  fr: {
+    filterOpen: 'Filter',
+    filterClear: 'Clear',
+    filterModalTicketTitle: 'Ticket Results',
+    filterModalDrawTitle: 'Draws Results History',
+    filterTicketPlaceholder: 'Search for a ticket ID',
+    filterDrawPlaceholder: 'Search for a draw ID',
+    filterDateRangePlaceholder: 'Date Range',
+    filterModalButton: 'Search',
+    filterFromCalendar: 'From',
+    filterToCalendar: 'To',
+    filterOrDate: 'or search by date'
+  },
+  ar: {
+    filterOpen: 'Filter',
+    filterClear: 'Clear',
+    filterModalTicketTitle: 'Ticket Results',
+    filterModalDrawTitle: 'Draws Results History',
+    filterTicketPlaceholder: 'Search for a ticket ID',
+    filterDrawPlaceholder: 'Search for a draw ID',
+    filterDateRangePlaceholder: 'Date Range',
+    filterModalButton: 'Search',
+    filterFromCalendar: 'From',
+    filterToCalendar: 'To',
+    filterOrDate: 'or search by date'
+  }
 };
 const translate$2 = (key, customLang) => {
   const lang = customLang;
@@ -42,9 +68,16 @@ const translate$2 = (key, customLang) => {
  * Copyright (c) 2017 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
+
+/**
+ * Dummy custom element used for collecting
+ * development time usage statistics.
+ *
+ * @private
+ */
 class Lumo extends HTMLElement {
   static get version() {
-    return '23.1.5';
+    return '23.3.19';
   }
 }
 
@@ -61,20 +94,20 @@ const t$1=window,e$2=t$1.ShadowRoot&&(void 0===t$1.ShadyCSS||t$1.ShadyCSS.native
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
- */var s$2;const e$1=window,r$1=e$1.trustedTypes,h$1=r$1?r$1.emptyScript:"",o$2=e$1.reactiveElementPolyfillSupport,n$2={toAttribute(t,i){switch(i){case Boolean:t=t?h$1:null;break;case Object:case Array:t=null==t?t:JSON.stringify(t);}return t},fromAttribute(t,i){let s=t;switch(i){case Boolean:s=null!==t;break;case Number:s=null===t?null:Number(t);break;case Object:case Array:try{s=JSON.parse(t);}catch(t){s=null;}}return s}},a$1=(t,i)=>i!==t&&(i==i||t==t),l$2={attribute:!0,type:String,converter:n$2,reflect:!1,hasChanged:a$1};class d$1 extends HTMLElement{constructor(){super(),this._$Ei=new Map,this.isUpdatePending=!1,this.hasUpdated=!1,this._$El=null,this.u();}static addInitializer(t){var i;null!==(i=this.h)&&void 0!==i||(this.h=[]),this.h.push(t);}static get observedAttributes(){this.finalize();const t=[];return this.elementProperties.forEach(((i,s)=>{const e=this._$Ep(s,i);void 0!==e&&(this._$Ev.set(e,s),t.push(e));})),t}static createProperty(t,i=l$2){if(i.state&&(i.attribute=!1),this.finalize(),this.elementProperties.set(t,i),!i.noAccessor&&!this.prototype.hasOwnProperty(t)){const s="symbol"==typeof t?Symbol():"__"+t,e=this.getPropertyDescriptor(t,s,i);void 0!==e&&Object.defineProperty(this.prototype,t,e);}}static getPropertyDescriptor(t,i,s){return {get(){return this[i]},set(e){const r=this[t];this[i]=e,this.requestUpdate(t,r,s);},configurable:!0,enumerable:!0}}static getPropertyOptions(t){return this.elementProperties.get(t)||l$2}static finalize(){if(this.hasOwnProperty("finalized"))return !1;this.finalized=!0;const t=Object.getPrototypeOf(this);if(t.finalize(),this.elementProperties=new Map(t.elementProperties),this._$Ev=new Map,this.hasOwnProperty("properties")){const t=this.properties,i=[...Object.getOwnPropertyNames(t),...Object.getOwnPropertySymbols(t)];for(const s of i)this.createProperty(s,t[s]);}return this.elementStyles=this.finalizeStyles(this.styles),!0}static finalizeStyles(i){const s=[];if(Array.isArray(i)){const e=new Set(i.flat(1/0).reverse());for(const i of e)s.unshift(c$1(i));}else void 0!==i&&s.push(c$1(i));return s}static _$Ep(t,i){const s=i.attribute;return !1===s?void 0:"string"==typeof s?s:"string"==typeof t?t.toLowerCase():void 0}u(){var t;this._$E_=new Promise((t=>this.enableUpdating=t)),this._$AL=new Map,this._$Eg(),this.requestUpdate(),null===(t=this.constructor.h)||void 0===t||t.forEach((t=>t(this)));}addController(t){var i,s;(null!==(i=this._$ES)&&void 0!==i?i:this._$ES=[]).push(t),void 0!==this.renderRoot&&this.isConnected&&(null===(s=t.hostConnected)||void 0===s||s.call(t));}removeController(t){var i;null===(i=this._$ES)||void 0===i||i.splice(this._$ES.indexOf(t)>>>0,1);}_$Eg(){this.constructor.elementProperties.forEach(((t,i)=>{this.hasOwnProperty(i)&&(this._$Ei.set(i,this[i]),delete this[i]);}));}createRenderRoot(){var t;const s=null!==(t=this.shadowRoot)&&void 0!==t?t:this.attachShadow(this.constructor.shadowRootOptions);return S$1(s,this.constructor.elementStyles),s}connectedCallback(){var t;void 0===this.renderRoot&&(this.renderRoot=this.createRenderRoot()),this.enableUpdating(!0),null===(t=this._$ES)||void 0===t||t.forEach((t=>{var i;return null===(i=t.hostConnected)||void 0===i?void 0:i.call(t)}));}enableUpdating(t){}disconnectedCallback(){var t;null===(t=this._$ES)||void 0===t||t.forEach((t=>{var i;return null===(i=t.hostDisconnected)||void 0===i?void 0:i.call(t)}));}attributeChangedCallback(t,i,s){this._$AK(t,s);}_$EO(t,i,s=l$2){var e;const r=this.constructor._$Ep(t,s);if(void 0!==r&&!0===s.reflect){const h=(void 0!==(null===(e=s.converter)||void 0===e?void 0:e.toAttribute)?s.converter:n$2).toAttribute(i,s.type);this._$El=t,null==h?this.removeAttribute(r):this.setAttribute(r,h),this._$El=null;}}_$AK(t,i){var s;const e=this.constructor,r=e._$Ev.get(t);if(void 0!==r&&this._$El!==r){const t=e.getPropertyOptions(r),h="function"==typeof t.converter?{fromAttribute:t.converter}:void 0!==(null===(s=t.converter)||void 0===s?void 0:s.fromAttribute)?t.converter:n$2;this._$El=r,this[r]=h.fromAttribute(i,t.type),this._$El=null;}}requestUpdate(t,i,s){let e=!0;void 0!==t&&(((s=s||this.constructor.getPropertyOptions(t)).hasChanged||a$1)(this[t],i)?(this._$AL.has(t)||this._$AL.set(t,i),!0===s.reflect&&this._$El!==t&&(void 0===this._$EC&&(this._$EC=new Map),this._$EC.set(t,s))):e=!1),!this.isUpdatePending&&e&&(this._$E_=this._$Ej());}async _$Ej(){this.isUpdatePending=!0;try{await this._$E_;}catch(t){Promise.reject(t);}const t=this.scheduleUpdate();return null!=t&&await t,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){var t;if(!this.isUpdatePending)return;this._$Ei&&(this._$Ei.forEach(((t,i)=>this[i]=t)),this._$Ei=void 0);let i=!1;const s=this._$AL;try{i=this.shouldUpdate(s),i?(this.willUpdate(s),null===(t=this._$ES)||void 0===t||t.forEach((t=>{var i;return null===(i=t.hostUpdate)||void 0===i?void 0:i.call(t)})),this.update(s)):this._$Ek();}catch(t){throw i=!1,this._$Ek(),t}i&&this._$AE(s);}willUpdate(t){}_$AE(t){var i;null===(i=this._$ES)||void 0===i||i.forEach((t=>{var i;return null===(i=t.hostUpdated)||void 0===i?void 0:i.call(t)})),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(t)),this.updated(t);}_$Ek(){this._$AL=new Map,this.isUpdatePending=!1;}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$E_}shouldUpdate(t){return !0}update(t){void 0!==this._$EC&&(this._$EC.forEach(((t,i)=>this._$EO(i,this[i],t))),this._$EC=void 0),this._$Ek();}updated(t){}firstUpdated(t){}}d$1.finalized=!0,d$1.elementProperties=new Map,d$1.elementStyles=[],d$1.shadowRootOptions={mode:"open"},null==o$2||o$2({ReactiveElement:d$1}),(null!==(s$2=e$1.reactiveElementVersions)&&void 0!==s$2?s$2:e$1.reactiveElementVersions=[]).push("1.4.1");
+ */var s$2;const e$1=window,r$1=e$1.trustedTypes,h$1=r$1?r$1.emptyScript:"",o$2=e$1.reactiveElementPolyfillSupport,n$2={toAttribute(t,i){switch(i){case Boolean:t=t?h$1:null;break;case Object:case Array:t=null==t?t:JSON.stringify(t);}return t},fromAttribute(t,i){let s=t;switch(i){case Boolean:s=null!==t;break;case Number:s=null===t?null:Number(t);break;case Object:case Array:try{s=JSON.parse(t);}catch(t){s=null;}}return s}},a$1=(t,i)=>i!==t&&(i==i||t==t),l$2={attribute:!0,type:String,converter:n$2,reflect:!1,hasChanged:a$1},d$1="finalized";class u$1 extends HTMLElement{constructor(){super(),this._$Ei=new Map,this.isUpdatePending=!1,this.hasUpdated=!1,this._$El=null,this.u();}static addInitializer(t){var i;this.finalize(),(null!==(i=this.h)&&void 0!==i?i:this.h=[]).push(t);}static get observedAttributes(){this.finalize();const t=[];return this.elementProperties.forEach(((i,s)=>{const e=this._$Ep(s,i);void 0!==e&&(this._$Ev.set(e,s),t.push(e));})),t}static createProperty(t,i=l$2){if(i.state&&(i.attribute=!1),this.finalize(),this.elementProperties.set(t,i),!i.noAccessor&&!this.prototype.hasOwnProperty(t)){const s="symbol"==typeof t?Symbol():"__"+t,e=this.getPropertyDescriptor(t,s,i);void 0!==e&&Object.defineProperty(this.prototype,t,e);}}static getPropertyDescriptor(t,i,s){return {get(){return this[i]},set(e){const r=this[t];this[i]=e,this.requestUpdate(t,r,s);},configurable:!0,enumerable:!0}}static getPropertyOptions(t){return this.elementProperties.get(t)||l$2}static finalize(){if(this.hasOwnProperty(d$1))return !1;this[d$1]=!0;const t=Object.getPrototypeOf(this);if(t.finalize(),void 0!==t.h&&(this.h=[...t.h]),this.elementProperties=new Map(t.elementProperties),this._$Ev=new Map,this.hasOwnProperty("properties")){const t=this.properties,i=[...Object.getOwnPropertyNames(t),...Object.getOwnPropertySymbols(t)];for(const s of i)this.createProperty(s,t[s]);}return this.elementStyles=this.finalizeStyles(this.styles),!0}static finalizeStyles(i){const s=[];if(Array.isArray(i)){const e=new Set(i.flat(1/0).reverse());for(const i of e)s.unshift(c$1(i));}else void 0!==i&&s.push(c$1(i));return s}static _$Ep(t,i){const s=i.attribute;return !1===s?void 0:"string"==typeof s?s:"string"==typeof t?t.toLowerCase():void 0}u(){var t;this._$E_=new Promise((t=>this.enableUpdating=t)),this._$AL=new Map,this._$Eg(),this.requestUpdate(),null===(t=this.constructor.h)||void 0===t||t.forEach((t=>t(this)));}addController(t){var i,s;(null!==(i=this._$ES)&&void 0!==i?i:this._$ES=[]).push(t),void 0!==this.renderRoot&&this.isConnected&&(null===(s=t.hostConnected)||void 0===s||s.call(t));}removeController(t){var i;null===(i=this._$ES)||void 0===i||i.splice(this._$ES.indexOf(t)>>>0,1);}_$Eg(){this.constructor.elementProperties.forEach(((t,i)=>{this.hasOwnProperty(i)&&(this._$Ei.set(i,this[i]),delete this[i]);}));}createRenderRoot(){var t;const s=null!==(t=this.shadowRoot)&&void 0!==t?t:this.attachShadow(this.constructor.shadowRootOptions);return S$1(s,this.constructor.elementStyles),s}connectedCallback(){var t;void 0===this.renderRoot&&(this.renderRoot=this.createRenderRoot()),this.enableUpdating(!0),null===(t=this._$ES)||void 0===t||t.forEach((t=>{var i;return null===(i=t.hostConnected)||void 0===i?void 0:i.call(t)}));}enableUpdating(t){}disconnectedCallback(){var t;null===(t=this._$ES)||void 0===t||t.forEach((t=>{var i;return null===(i=t.hostDisconnected)||void 0===i?void 0:i.call(t)}));}attributeChangedCallback(t,i,s){this._$AK(t,s);}_$EO(t,i,s=l$2){var e;const r=this.constructor._$Ep(t,s);if(void 0!==r&&!0===s.reflect){const h=(void 0!==(null===(e=s.converter)||void 0===e?void 0:e.toAttribute)?s.converter:n$2).toAttribute(i,s.type);this._$El=t,null==h?this.removeAttribute(r):this.setAttribute(r,h),this._$El=null;}}_$AK(t,i){var s;const e=this.constructor,r=e._$Ev.get(t);if(void 0!==r&&this._$El!==r){const t=e.getPropertyOptions(r),h="function"==typeof t.converter?{fromAttribute:t.converter}:void 0!==(null===(s=t.converter)||void 0===s?void 0:s.fromAttribute)?t.converter:n$2;this._$El=r,this[r]=h.fromAttribute(i,t.type),this._$El=null;}}requestUpdate(t,i,s){let e=!0;void 0!==t&&(((s=s||this.constructor.getPropertyOptions(t)).hasChanged||a$1)(this[t],i)?(this._$AL.has(t)||this._$AL.set(t,i),!0===s.reflect&&this._$El!==t&&(void 0===this._$EC&&(this._$EC=new Map),this._$EC.set(t,s))):e=!1),!this.isUpdatePending&&e&&(this._$E_=this._$Ej());}async _$Ej(){this.isUpdatePending=!0;try{await this._$E_;}catch(t){Promise.reject(t);}const t=this.scheduleUpdate();return null!=t&&await t,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){var t;if(!this.isUpdatePending)return;this._$Ei&&(this._$Ei.forEach(((t,i)=>this[i]=t)),this._$Ei=void 0);let i=!1;const s=this._$AL;try{i=this.shouldUpdate(s),i?(this.willUpdate(s),null===(t=this._$ES)||void 0===t||t.forEach((t=>{var i;return null===(i=t.hostUpdate)||void 0===i?void 0:i.call(t)})),this.update(s)):this._$Ek();}catch(t){throw i=!1,this._$Ek(),t}i&&this._$AE(s);}willUpdate(t){}_$AE(t){var i;null===(i=this._$ES)||void 0===i||i.forEach((t=>{var i;return null===(i=t.hostUpdated)||void 0===i?void 0:i.call(t)})),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(t)),this.updated(t);}_$Ek(){this._$AL=new Map,this.isUpdatePending=!1;}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$E_}shouldUpdate(t){return !0}update(t){void 0!==this._$EC&&(this._$EC.forEach(((t,i)=>this._$EO(i,this[i],t))),this._$EC=void 0),this._$Ek();}updated(t){}firstUpdated(t){}}u$1[d$1]=!0,u$1.elementProperties=new Map,u$1.elementStyles=[],u$1.shadowRootOptions={mode:"open"},null==o$2||o$2({ReactiveElement:u$1}),(null!==(s$2=e$1.reactiveElementVersions)&&void 0!==s$2?s$2:e$1.reactiveElementVersions=[]).push("1.6.2");
 
 /**
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-var t;const i=window,s$1=i.trustedTypes,e=s$1?s$1.createPolicy("lit-html",{createHTML:t=>t}):void 0,o$1=`lit$${(Math.random()+"").slice(9)}$`,n$1="?"+o$1,l$1=`<${n$1}>`,h=document,r=(t="")=>h.createComment(t),d=t=>null===t||"object"!=typeof t&&"function"!=typeof t,u=Array.isArray,c=t=>u(t)||"function"==typeof(null==t?void 0:t[Symbol.iterator]),v=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,a=/-->/g,f=/>/g,_=RegExp(">|[ \t\n\f\r](?:([^\\s\"'>=/]+)([ \t\n\f\r]*=[ \t\n\f\r]*(?:[^ \t\n\f\r\"'`<>=]|(\"|')|))|$)","g"),m=/'/g,p=/"/g,$=/^(?:script|style|textarea|title)$/i,x=Symbol.for("lit-noChange"),b=Symbol.for("lit-nothing"),T=new WeakMap,A=(t,i,s)=>{var e,o;const n=null!==(e=null==s?void 0:s.renderBefore)&&void 0!==e?e:i;let l=n._$litPart$;if(void 0===l){const t=null!==(o=null==s?void 0:s.renderBefore)&&void 0!==o?o:null;n._$litPart$=l=new S(i.insertBefore(r(),t),t,void 0,null!=s?s:{});}return l._$AI(t),l},E=h.createTreeWalker(h,129,null,!1),C=(t,i)=>{const s=t.length-1,n=[];let h,r=2===i?"<svg>":"",d=v;for(let i=0;i<s;i++){const s=t[i];let e,u,c=-1,g=0;for(;g<s.length&&(d.lastIndex=g,u=d.exec(s),null!==u);)g=d.lastIndex,d===v?"!--"===u[1]?d=a:void 0!==u[1]?d=f:void 0!==u[2]?($.test(u[2])&&(h=RegExp("</"+u[2],"g")),d=_):void 0!==u[3]&&(d=_):d===_?">"===u[0]?(d=null!=h?h:v,c=-1):void 0===u[1]?c=-2:(c=d.lastIndex-u[2].length,e=u[1],d=void 0===u[3]?_:'"'===u[3]?p:m):d===p||d===m?d=_:d===a||d===f?d=v:(d=_,h=void 0);const y=d===_&&t[i+1].startsWith("/>")?" ":"";r+=d===v?s+l$1:c>=0?(n.push(e),s.slice(0,c)+"$lit$"+s.slice(c)+o$1+y):s+o$1+(-2===c?(n.push(void 0),i):y);}const u=r+(t[s]||"<?>")+(2===i?"</svg>":"");if(!Array.isArray(t)||!t.hasOwnProperty("raw"))throw Error("invalid template strings array");return [void 0!==e?e.createHTML(u):u,n]};class P{constructor({strings:t,_$litType$:i},e){let l;this.parts=[];let h=0,d=0;const u=t.length-1,c=this.parts,[v,a]=C(t,i);if(this.el=P.createElement(v,e),E.currentNode=this.el.content,2===i){const t=this.el.content,i=t.firstChild;i.remove(),t.append(...i.childNodes);}for(;null!==(l=E.nextNode())&&c.length<u;){if(1===l.nodeType){if(l.hasAttributes()){const t=[];for(const i of l.getAttributeNames())if(i.endsWith("$lit$")||i.startsWith(o$1)){const s=a[d++];if(t.push(i),void 0!==s){const t=l.getAttribute(s.toLowerCase()+"$lit$").split(o$1),i=/([.?@])?(.*)/.exec(s);c.push({type:1,index:h,name:i[2],strings:t,ctor:"."===i[1]?R:"?"===i[1]?H:"@"===i[1]?I:M});}else c.push({type:6,index:h});}for(const i of t)l.removeAttribute(i);}if($.test(l.tagName)){const t=l.textContent.split(o$1),i=t.length-1;if(i>0){l.textContent=s$1?s$1.emptyScript:"";for(let s=0;s<i;s++)l.append(t[s],r()),E.nextNode(),c.push({type:2,index:++h});l.append(t[i],r());}}}else if(8===l.nodeType)if(l.data===n$1)c.push({type:2,index:h});else {let t=-1;for(;-1!==(t=l.data.indexOf(o$1,t+1));)c.push({type:7,index:h}),t+=o$1.length-1;}h++;}}static createElement(t,i){const s=h.createElement("template");return s.innerHTML=t,s}}function V(t,i,s=t,e){var o,n,l,h;if(i===x)return i;let r=void 0!==e?null===(o=s._$Cl)||void 0===o?void 0:o[e]:s._$Cu;const u=d(i)?void 0:i._$litDirective$;return (null==r?void 0:r.constructor)!==u&&(null===(n=null==r?void 0:r._$AO)||void 0===n||n.call(r,!1),void 0===u?r=void 0:(r=new u(t),r._$AT(t,s,e)),void 0!==e?(null!==(l=(h=s)._$Cl)&&void 0!==l?l:h._$Cl=[])[e]=r:s._$Cu=r),void 0!==r&&(i=V(t,r._$AS(t,i.values),r,e)),i}class N{constructor(t,i){this.v=[],this._$AN=void 0,this._$AD=t,this._$AM=i;}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}p(t){var i;const{el:{content:s},parts:e}=this._$AD,o=(null!==(i=null==t?void 0:t.creationScope)&&void 0!==i?i:h).importNode(s,!0);E.currentNode=o;let n=E.nextNode(),l=0,r=0,d=e[0];for(;void 0!==d;){if(l===d.index){let i;2===d.type?i=new S(n,n.nextSibling,this,t):1===d.type?i=new d.ctor(n,d.name,d.strings,this,t):6===d.type&&(i=new L(n,this,t)),this.v.push(i),d=e[++r];}l!==(null==d?void 0:d.index)&&(n=E.nextNode(),l++);}return o}m(t){let i=0;for(const s of this.v)void 0!==s&&(void 0!==s.strings?(s._$AI(t,s,i),i+=s.strings.length-2):s._$AI(t[i])),i++;}}class S{constructor(t,i,s,e){var o;this.type=2,this._$AH=b,this._$AN=void 0,this._$AA=t,this._$AB=i,this._$AM=s,this.options=e,this._$C_=null===(o=null==e?void 0:e.isConnected)||void 0===o||o;}get _$AU(){var t,i;return null!==(i=null===(t=this._$AM)||void 0===t?void 0:t._$AU)&&void 0!==i?i:this._$C_}get parentNode(){let t=this._$AA.parentNode;const i=this._$AM;return void 0!==i&&11===t.nodeType&&(t=i.parentNode),t}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(t,i=this){t=V(this,t,i),d(t)?t===b||null==t||""===t?(this._$AH!==b&&this._$AR(),this._$AH=b):t!==this._$AH&&t!==x&&this.$(t):void 0!==t._$litType$?this.T(t):void 0!==t.nodeType?this.k(t):c(t)?this.O(t):this.$(t);}S(t,i=this._$AB){return this._$AA.parentNode.insertBefore(t,i)}k(t){this._$AH!==t&&(this._$AR(),this._$AH=this.S(t));}$(t){this._$AH!==b&&d(this._$AH)?this._$AA.nextSibling.data=t:this.k(h.createTextNode(t)),this._$AH=t;}T(t){var i;const{values:s,_$litType$:e}=t,o="number"==typeof e?this._$AC(t):(void 0===e.el&&(e.el=P.createElement(e.h,this.options)),e);if((null===(i=this._$AH)||void 0===i?void 0:i._$AD)===o)this._$AH.m(s);else {const t=new N(o,this),i=t.p(this.options);t.m(s),this.k(i),this._$AH=t;}}_$AC(t){let i=T.get(t.strings);return void 0===i&&T.set(t.strings,i=new P(t)),i}O(t){u(this._$AH)||(this._$AH=[],this._$AR());const i=this._$AH;let s,e=0;for(const o of t)e===i.length?i.push(s=new S(this.S(r()),this.S(r()),this,this.options)):s=i[e],s._$AI(o),e++;e<i.length&&(this._$AR(s&&s._$AB.nextSibling,e),i.length=e);}_$AR(t=this._$AA.nextSibling,i){var s;for(null===(s=this._$AP)||void 0===s||s.call(this,!1,!0,i);t&&t!==this._$AB;){const i=t.nextSibling;t.remove(),t=i;}}setConnected(t){var i;void 0===this._$AM&&(this._$C_=t,null===(i=this._$AP)||void 0===i||i.call(this,t));}}class M{constructor(t,i,s,e,o){this.type=1,this._$AH=b,this._$AN=void 0,this.element=t,this.name=i,this._$AM=e,this.options=o,s.length>2||""!==s[0]||""!==s[1]?(this._$AH=Array(s.length-1).fill(new String),this.strings=s):this._$AH=b;}get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}_$AI(t,i=this,s,e){const o=this.strings;let n=!1;if(void 0===o)t=V(this,t,i,0),n=!d(t)||t!==this._$AH&&t!==x,n&&(this._$AH=t);else {const e=t;let l,h;for(t=o[0],l=0;l<o.length-1;l++)h=V(this,e[s+l],i,l),h===x&&(h=this._$AH[l]),n||(n=!d(h)||h!==this._$AH[l]),h===b?t=b:t!==b&&(t+=(null!=h?h:"")+o[l+1]),this._$AH[l]=h;}n&&!e&&this.P(t);}P(t){t===b?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,null!=t?t:"");}}class R extends M{constructor(){super(...arguments),this.type=3;}P(t){this.element[this.name]=t===b?void 0:t;}}const k=s$1?s$1.emptyScript:"";class H extends M{constructor(){super(...arguments),this.type=4;}P(t){t&&t!==b?this.element.setAttribute(this.name,k):this.element.removeAttribute(this.name);}}class I extends M{constructor(t,i,s,e,o){super(t,i,s,e,o),this.type=5;}_$AI(t,i=this){var s;if((t=null!==(s=V(this,t,i,0))&&void 0!==s?s:b)===x)return;const e=this._$AH,o=t===b&&e!==b||t.capture!==e.capture||t.once!==e.once||t.passive!==e.passive,n=t!==b&&(e===b||o);o&&this.element.removeEventListener(this.name,this,e),n&&this.element.addEventListener(this.name,this,t),this._$AH=t;}handleEvent(t){var i,s;"function"==typeof this._$AH?this._$AH.call(null!==(s=null===(i=this.options)||void 0===i?void 0:i.host)&&void 0!==s?s:this.element,t):this._$AH.handleEvent(t);}}class L{constructor(t,i,s){this.element=t,this.type=6,this._$AN=void 0,this._$AM=i,this.options=s;}get _$AU(){return this._$AM._$AU}_$AI(t){V(this,t);}}const Z=i.litHtmlPolyfillSupport;null==Z||Z(P,S),(null!==(t=i.litHtmlVersions)&&void 0!==t?t:i.litHtmlVersions=[]).push("2.3.1");
+var t;const i=window,s$1=i.trustedTypes,e=s$1?s$1.createPolicy("lit-html",{createHTML:t=>t}):void 0,o$1="$lit$",n$1=`lit$${(Math.random()+"").slice(9)}$`,l$1="?"+n$1,h=`<${l$1}>`,r=document,d=()=>r.createComment(""),u=t=>null===t||"object"!=typeof t&&"function"!=typeof t,c=Array.isArray,v=t=>c(t)||"function"==typeof(null==t?void 0:t[Symbol.iterator]),a="[ \t\n\f\r]",f=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,_=/-->/g,m=/>/g,p=RegExp(`>|${a}(?:([^\\s"'>=/]+)(${a}*=${a}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,"g"),g=/'/g,$=/"/g,y=/^(?:script|style|textarea|title)$/i,T=Symbol.for("lit-noChange"),A=Symbol.for("lit-nothing"),E=new WeakMap,C=r.createTreeWalker(r,129,null,!1),P=(t,i)=>{const s=t.length-1,l=[];let r,d=2===i?"<svg>":"",u=f;for(let i=0;i<s;i++){const s=t[i];let e,c,v=-1,a=0;for(;a<s.length&&(u.lastIndex=a,c=u.exec(s),null!==c);)a=u.lastIndex,u===f?"!--"===c[1]?u=_:void 0!==c[1]?u=m:void 0!==c[2]?(y.test(c[2])&&(r=RegExp("</"+c[2],"g")),u=p):void 0!==c[3]&&(u=p):u===p?">"===c[0]?(u=null!=r?r:f,v=-1):void 0===c[1]?v=-2:(v=u.lastIndex-c[2].length,e=c[1],u=void 0===c[3]?p:'"'===c[3]?$:g):u===$||u===g?u=p:u===_||u===m?u=f:(u=p,r=void 0);const w=u===p&&t[i+1].startsWith("/>")?" ":"";d+=u===f?s+h:v>=0?(l.push(e),s.slice(0,v)+o$1+s.slice(v)+n$1+w):s+n$1+(-2===v?(l.push(void 0),i):w);}const c=d+(t[s]||"<?>")+(2===i?"</svg>":"");if(!Array.isArray(t)||!t.hasOwnProperty("raw"))throw Error("invalid template strings array");return [void 0!==e?e.createHTML(c):c,l]};class V{constructor({strings:t,_$litType$:i},e){let h;this.parts=[];let r=0,u=0;const c=t.length-1,v=this.parts,[a,f]=P(t,i);if(this.el=V.createElement(a,e),C.currentNode=this.el.content,2===i){const t=this.el.content,i=t.firstChild;i.remove(),t.append(...i.childNodes);}for(;null!==(h=C.nextNode())&&v.length<c;){if(1===h.nodeType){if(h.hasAttributes()){const t=[];for(const i of h.getAttributeNames())if(i.endsWith(o$1)||i.startsWith(n$1)){const s=f[u++];if(t.push(i),void 0!==s){const t=h.getAttribute(s.toLowerCase()+o$1).split(n$1),i=/([.?@])?(.*)/.exec(s);v.push({type:1,index:r,name:i[2],strings:t,ctor:"."===i[1]?k:"?"===i[1]?I:"@"===i[1]?L:R});}else v.push({type:6,index:r});}for(const i of t)h.removeAttribute(i);}if(y.test(h.tagName)){const t=h.textContent.split(n$1),i=t.length-1;if(i>0){h.textContent=s$1?s$1.emptyScript:"";for(let s=0;s<i;s++)h.append(t[s],d()),C.nextNode(),v.push({type:2,index:++r});h.append(t[i],d());}}}else if(8===h.nodeType)if(h.data===l$1)v.push({type:2,index:r});else {let t=-1;for(;-1!==(t=h.data.indexOf(n$1,t+1));)v.push({type:7,index:r}),t+=n$1.length-1;}r++;}}static createElement(t,i){const s=r.createElement("template");return s.innerHTML=t,s}}function N(t,i,s=t,e){var o,n,l,h;if(i===T)return i;let r=void 0!==e?null===(o=s._$Co)||void 0===o?void 0:o[e]:s._$Cl;const d=u(i)?void 0:i._$litDirective$;return (null==r?void 0:r.constructor)!==d&&(null===(n=null==r?void 0:r._$AO)||void 0===n||n.call(r,!1),void 0===d?r=void 0:(r=new d(t),r._$AT(t,s,e)),void 0!==e?(null!==(l=(h=s)._$Co)&&void 0!==l?l:h._$Co=[])[e]=r:s._$Cl=r),void 0!==r&&(i=N(t,r._$AS(t,i.values),r,e)),i}class S{constructor(t,i){this._$AV=[],this._$AN=void 0,this._$AD=t,this._$AM=i;}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}u(t){var i;const{el:{content:s},parts:e}=this._$AD,o=(null!==(i=null==t?void 0:t.creationScope)&&void 0!==i?i:r).importNode(s,!0);C.currentNode=o;let n=C.nextNode(),l=0,h=0,d=e[0];for(;void 0!==d;){if(l===d.index){let i;2===d.type?i=new M(n,n.nextSibling,this,t):1===d.type?i=new d.ctor(n,d.name,d.strings,this,t):6===d.type&&(i=new z(n,this,t)),this._$AV.push(i),d=e[++h];}l!==(null==d?void 0:d.index)&&(n=C.nextNode(),l++);}return C.currentNode=r,o}v(t){let i=0;for(const s of this._$AV)void 0!==s&&(void 0!==s.strings?(s._$AI(t,s,i),i+=s.strings.length-2):s._$AI(t[i])),i++;}}class M{constructor(t,i,s,e){var o;this.type=2,this._$AH=A,this._$AN=void 0,this._$AA=t,this._$AB=i,this._$AM=s,this.options=e,this._$Cp=null===(o=null==e?void 0:e.isConnected)||void 0===o||o;}get _$AU(){var t,i;return null!==(i=null===(t=this._$AM)||void 0===t?void 0:t._$AU)&&void 0!==i?i:this._$Cp}get parentNode(){let t=this._$AA.parentNode;const i=this._$AM;return void 0!==i&&11===(null==t?void 0:t.nodeType)&&(t=i.parentNode),t}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(t,i=this){t=N(this,t,i),u(t)?t===A||null==t||""===t?(this._$AH!==A&&this._$AR(),this._$AH=A):t!==this._$AH&&t!==T&&this._(t):void 0!==t._$litType$?this.g(t):void 0!==t.nodeType?this.$(t):v(t)?this.T(t):this._(t);}k(t){return this._$AA.parentNode.insertBefore(t,this._$AB)}$(t){this._$AH!==t&&(this._$AR(),this._$AH=this.k(t));}_(t){this._$AH!==A&&u(this._$AH)?this._$AA.nextSibling.data=t:this.$(r.createTextNode(t)),this._$AH=t;}g(t){var i;const{values:s,_$litType$:e}=t,o="number"==typeof e?this._$AC(t):(void 0===e.el&&(e.el=V.createElement(e.h,this.options)),e);if((null===(i=this._$AH)||void 0===i?void 0:i._$AD)===o)this._$AH.v(s);else {const t=new S(o,this),i=t.u(this.options);t.v(s),this.$(i),this._$AH=t;}}_$AC(t){let i=E.get(t.strings);return void 0===i&&E.set(t.strings,i=new V(t)),i}T(t){c(this._$AH)||(this._$AH=[],this._$AR());const i=this._$AH;let s,e=0;for(const o of t)e===i.length?i.push(s=new M(this.k(d()),this.k(d()),this,this.options)):s=i[e],s._$AI(o),e++;e<i.length&&(this._$AR(s&&s._$AB.nextSibling,e),i.length=e);}_$AR(t=this._$AA.nextSibling,i){var s;for(null===(s=this._$AP)||void 0===s||s.call(this,!1,!0,i);t&&t!==this._$AB;){const i=t.nextSibling;t.remove(),t=i;}}setConnected(t){var i;void 0===this._$AM&&(this._$Cp=t,null===(i=this._$AP)||void 0===i||i.call(this,t));}}class R{constructor(t,i,s,e,o){this.type=1,this._$AH=A,this._$AN=void 0,this.element=t,this.name=i,this._$AM=e,this.options=o,s.length>2||""!==s[0]||""!==s[1]?(this._$AH=Array(s.length-1).fill(new String),this.strings=s):this._$AH=A;}get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}_$AI(t,i=this,s,e){const o=this.strings;let n=!1;if(void 0===o)t=N(this,t,i,0),n=!u(t)||t!==this._$AH&&t!==T,n&&(this._$AH=t);else {const e=t;let l,h;for(t=o[0],l=0;l<o.length-1;l++)h=N(this,e[s+l],i,l),h===T&&(h=this._$AH[l]),n||(n=!u(h)||h!==this._$AH[l]),h===A?t=A:t!==A&&(t+=(null!=h?h:"")+o[l+1]),this._$AH[l]=h;}n&&!e&&this.j(t);}j(t){t===A?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,null!=t?t:"");}}class k extends R{constructor(){super(...arguments),this.type=3;}j(t){this.element[this.name]=t===A?void 0:t;}}const H=s$1?s$1.emptyScript:"";class I extends R{constructor(){super(...arguments),this.type=4;}j(t){t&&t!==A?this.element.setAttribute(this.name,H):this.element.removeAttribute(this.name);}}class L extends R{constructor(t,i,s,e,o){super(t,i,s,e,o),this.type=5;}_$AI(t,i=this){var s;if((t=null!==(s=N(this,t,i,0))&&void 0!==s?s:A)===T)return;const e=this._$AH,o=t===A&&e!==A||t.capture!==e.capture||t.once!==e.once||t.passive!==e.passive,n=t!==A&&(e===A||o);o&&this.element.removeEventListener(this.name,this,e),n&&this.element.addEventListener(this.name,this,t),this._$AH=t;}handleEvent(t){var i,s;"function"==typeof this._$AH?this._$AH.call(null!==(s=null===(i=this.options)||void 0===i?void 0:i.host)&&void 0!==s?s:this.element,t):this._$AH.handleEvent(t);}}class z{constructor(t,i,s){this.element=t,this.type=6,this._$AN=void 0,this._$AM=i,this.options=s;}get _$AU(){return this._$AM._$AU}_$AI(t){N(this,t);}}const j=i.litHtmlPolyfillSupport;null==j||j(V,M),(null!==(t=i.litHtmlVersions)&&void 0!==t?t:i.litHtmlVersions=[]).push("2.7.4");const B=(t,i,s)=>{var e,o;const n=null!==(e=null==s?void 0:s.renderBefore)&&void 0!==e?e:i;let l=n._$litPart$;if(void 0===l){const t=null!==(o=null==s?void 0:s.renderBefore)&&void 0!==o?o:null;n._$litPart$=l=new M(i.insertBefore(d(),t),t,void 0,null!=s?s:{});}return l._$AI(t),l};
 
 /**
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
- */var l,o;class s extends d$1{constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=void 0;}createRenderRoot(){var t,e;const i=super.createRenderRoot();return null!==(t=(e=this.renderOptions).renderBefore)&&void 0!==t||(e.renderBefore=i.firstChild),i}update(t){const i=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(t),this._$Do=A(i,this.renderRoot,this.renderOptions);}connectedCallback(){var t;super.connectedCallback(),null===(t=this._$Do)||void 0===t||t.setConnected(!0);}disconnectedCallback(){var t;super.disconnectedCallback(),null===(t=this._$Do)||void 0===t||t.setConnected(!1);}render(){return x}}s.finalized=!0,s._$litElement$=!0,null===(l=globalThis.litElementHydrateSupport)||void 0===l||l.call(globalThis,{LitElement:s});const n=globalThis.litElementPolyfillSupport;null==n||n({LitElement:s});(null!==(o=globalThis.litElementVersions)&&void 0!==o?o:globalThis.litElementVersions=[]).push("3.2.2");
+ */var l,o;class s extends u$1{constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=void 0;}createRenderRoot(){var t,e;const i=super.createRenderRoot();return null!==(t=(e=this.renderOptions).renderBefore)&&void 0!==t||(e.renderBefore=i.firstChild),i}update(t){const i=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(t),this._$Do=B(i,this.renderRoot,this.renderOptions);}connectedCallback(){var t;super.connectedCallback(),null===(t=this._$Do)||void 0===t||t.setConnected(!0);}disconnectedCallback(){var t;super.disconnectedCallback(),null===(t=this._$Do)||void 0===t||t.setConnected(!1);}render(){return T}}s.finalized=!0,s._$litElement$=!0,null===(l=globalThis.litElementHydrateSupport)||void 0===l||l.call(globalThis,{LitElement:s});const n=globalThis.litElementPolyfillSupport;null==n||n({LitElement:s});(null!==(o=globalThis.litElementVersions)&&void 0!==o?o:globalThis.litElementVersions=[]).push("3.3.2");
 
 /**
  * @license
@@ -100,7 +133,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/ds/customization/styling-components/#sub-components).
+         * See [Styling Components: Sub-components](https://vaadin.com/docs/latest/styling/custom-theme/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.
@@ -125,7 +158,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/ds/customization/styling-components/#sub-components).
+         * See [Styling Components: Sub-components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components/#sub-components).
          * page for more information.
          *
          * @protected
@@ -230,9 +263,9 @@ function matchesThemeFor(themeFor, tagName) {
  */
 function getIncludePriority(moduleName = '') {
   let includePriority = 0;
-  if (moduleName.indexOf('lumo-') === 0 || moduleName.indexOf('material-') === 0) {
+  if (moduleName.startsWith('lumo-') || moduleName.startsWith('material-')) {
     includePriority = 1;
-  } else if (moduleName.indexOf('vaadin-') === 0) {
+  } else if (moduleName.startsWith('vaadin-')) {
     includePriority = 2;
   }
   return includePriority;
@@ -466,9 +499,9 @@ const colorBase = i$1`
   }
 `;
 
-const $tpl$5 = document.createElement('template');
-$tpl$5.innerHTML = `<style>${colorBase.toString().replace(':host', 'html')}</style>`;
-document.head.appendChild($tpl$5.content);
+const $tpl$4 = document.createElement('template');
+$tpl$4.innerHTML = `<style>${colorBase.toString().replace(':host', 'html')}</style>`;
+document.head.appendChild($tpl$4.content);
 
 const color = i$1`
   [theme~='dark'] {
@@ -615,9 +648,9 @@ const sizing = i$1`
   }
 `;
 
-const $tpl$4 = document.createElement('template');
-$tpl$4.innerHTML = `<style>${sizing.toString().replace(':host', 'html')}</style>`;
-document.head.appendChild($tpl$4.content);
+const $tpl$3 = document.createElement('template');
+$tpl$3.innerHTML = `<style>${sizing.toString().replace(':host', 'html')}</style>`;
+document.head.appendChild($tpl$3.content);
 
 /**
  * @license
@@ -645,9 +678,19 @@ const style = i$1`
   }
 `;
 
-const $tpl$3 = document.createElement('template');
-$tpl$3.innerHTML = `<style>${style.toString().replace(':host', 'html')}</style>`;
-document.head.appendChild($tpl$3.content);
+/**
+ * Default values for component-specific custom properties.
+ */
+i$1`
+  html {
+    --vaadin-checkbox-size: calc(var(--lumo-size-m) / 2);
+    --vaadin-radio-button-size: calc(var(--lumo-size-m) / 2);
+  }
+`;
+
+const $tpl$2 = document.createElement('template');
+$tpl$2.innerHTML = `<style>${style.toString().replace(':host', 'html')}$</style>`;
+document.head.appendChild($tpl$2.content);
 
 /**
  * @license
@@ -784,9 +827,9 @@ const typography = i$1`
 
 registerStyles('', typography, { moduleId: 'lumo-typography' });
 
-const $tpl$2 = document.createElement('template');
-$tpl$2.innerHTML = `<style>${font.toString().replace(':host', 'html')}</style>`;
-document.head.appendChild($tpl$2.content);
+const $tpl$1 = document.createElement('template');
+$tpl$1.innerHTML = `<style>${font.toString().replace(':host', 'html')}</style>`;
+document.head.appendChild($tpl$1.content);
 
 registerStyles(
   'vaadin-input-container',
@@ -8078,6 +8121,7 @@ class DirHelper {
  * Array of Vaadin custom element classes that have been subscribed to the dir changes.
  */
 const directionSubscribers = [];
+
 function directionUpdater() {
   const documentDir = getDocumentDir();
   directionSubscribers.forEach((element) => {
@@ -8143,7 +8187,7 @@ const DirMixin = (superClass) =>
     connectedCallback() {
       super.connectedCallback();
 
-      if (!this.hasAttribute('dir')) {
+      if (!this.hasAttribute('dir') || this.__restoreSubscription) {
         this.__subscribe();
         alignDirs(this, getDocumentDir(), null);
       }
@@ -8169,15 +8213,15 @@ const DirMixin = (superClass) =>
         this.__subscribe();
         alignDirs(this, documentDir, newValue);
       } else if (newDiffValue) {
-        this.__subscribe(false);
+        this.__unsubscribe();
       }
     }
 
     /** @protected */
     disconnectedCallback() {
       super.disconnectedCallback();
-      this.__subscribe(false);
-      this.removeAttribute('dir');
+      this.__restoreSubscription = directionSubscribers.includes(this);
+      this.__unsubscribe();
     }
 
     /** @protected */
@@ -8202,12 +8246,15 @@ const DirMixin = (superClass) =>
     }
 
     /** @private */
-    __subscribe(push = true) {
-      if (push) {
-        if (!directionSubscribers.includes(this)) {
-          directionSubscribers.push(this);
-        }
-      } else if (directionSubscribers.includes(this)) {
+    __subscribe() {
+      if (!directionSubscribers.includes(this)) {
+        directionSubscribers.push(this);
+      }
+    }
+
+    /** @private */
+    __unsubscribe() {
+      if (directionSubscribers.includes(this)) {
         directionSubscribers.splice(directionSubscribers.indexOf(this), 1);
       }
     }
@@ -8285,7 +8332,6 @@ class InputContainer extends ThemableMixin(DirMixin(PolymerElement)) {
         ::slotted(:is(input, textarea))::placeholder {
           /* Use ::slotted(input:placeholder-shown) in themes to style the placeholder. */
           /* because ::slotted(...)::placeholder does not work in Safari. */
-          /* See the workaround at the end of this file. */
           font: inherit;
           color: inherit;
           /* Override default opacity in Firefox */
@@ -8352,18 +8398,6 @@ class InputContainer extends ThemableMixin(DirMixin(PolymerElement)) {
 
 customElements.define(InputContainer.is, InputContainer);
 
-const placeholderStyleWorkaround = i$1`
-  /* Needed for Safari, where ::slotted(...)::placeholder does not work */
-  :is(input[slot='input'], textarea[slot='textarea'])::placeholder {
-    font: inherit;
-    color: inherit;
-  }
-`;
-
-const $tpl$1 = document.createElement('template');
-$tpl$1.innerHTML = `<style>${placeholderStyleWorkaround.toString()}</style>`;
-document.head.appendChild($tpl$1.content);
-
 /**
  * @license
  * Copyright (c) 2017 - 2022 Vaadin Ltd.
@@ -10026,7 +10060,7 @@ const isIOS = isIPhone || isIPad;
 
 testUserAgent(/^((?!chrome|android).)*safari/i);
 
-(() => {
+const isTouch = (() => {
   try {
     document.createEvent('TouchEvent');
     return true;
@@ -10117,6 +10151,38 @@ 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.
@@ -10557,7 +10623,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/ds/customization/styling-components) documentation.
+ * See [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.
  *
  * @fires {CustomEvent} opened-changed - Fired when the `opened` property changes.
  * @fires {CustomEvent} vaadin-overlay-open - Fired after the overlay is opened.
@@ -10571,7 +10637,7 @@ class FocusTrapController {
  * @mixes DirMixin
  * @mixes ControllerMixin
  */
-class OverlayElement extends ThemableMixin(DirMixin(ControllerMixin(PolymerElement))) {
+class Overlay extends ThemableMixin(DirMixin(ControllerMixin(PolymerElement))) {
   static get template() {
     return html`
       <style>
@@ -10871,7 +10937,7 @@ class OverlayElement extends ThemableMixin(DirMixin(ControllerMixin(PolymerEleme
    * @protected
    */
   _setTemplateFromNodes(nodes) {
-    this.template = nodes.filter((node) => node.localName && node.localName === 'template')[0] || this.template;
+    this.template = nodes.find((node) => node.localName && node.localName === 'template') || this.template;
   }
 
   /**
@@ -11198,7 +11264,7 @@ class OverlayElement extends ThemableMixin(DirMixin(ControllerMixin(PolymerEleme
    */
   static get __attachedInstances() {
     return Array.from(document.body.children)
-      .filter((el) => el instanceof OverlayElement && !el.hasAttribute('closing'))
+      .filter((el) => el instanceof Overlay && !el.hasAttribute('closing'))
       .sort((a, b) => a.__zIndex - b.__zIndex || 0);
   }
 
@@ -11208,7 +11274,7 @@ class OverlayElement extends ThemableMixin(DirMixin(ControllerMixin(PolymerEleme
    * @protected
    */
   get _last() {
-    return this === OverlayElement.__attachedInstances.pop();
+    return this === Overlay.__attachedInstances.pop();
   }
 
   /** @private */
@@ -11243,7 +11309,7 @@ class OverlayElement extends ThemableMixin(DirMixin(ControllerMixin(PolymerEleme
     }
 
     // Disable pointer events in other attached overlays
-    OverlayElement.__attachedInstances.forEach((el) => {
+    Overlay.__attachedInstances.forEach((el) => {
       if (el !== this) {
         el.shadowRoot.querySelector('[part="overlay"]').style.pointerEvents = 'none';
       }
@@ -11266,7 +11332,7 @@ class OverlayElement extends ThemableMixin(DirMixin(ControllerMixin(PolymerEleme
     }
 
     // Restore pointer events in the previous overlay(s)
-    const instances = OverlayElement.__attachedInstances;
+    const instances = Overlay.__attachedInstances;
     let el;
     // Use instances.pop() to ensure the reverse order
     while ((el = instances.pop())) {
@@ -11445,7 +11511,7 @@ class OverlayElement extends ThemableMixin(DirMixin(ControllerMixin(PolymerEleme
    */
   bringToFront() {
     let zIndex = '';
-    const frontmost = OverlayElement.__attachedInstances.filter((o) => o !== this).pop();
+    const frontmost = Overlay.__attachedInstances.filter((o) => o !== this).pop();
     if (frontmost) {
       const frontmostZIndex = frontmost.__zIndex;
       zIndex = frontmostZIndex + 1;
@@ -11455,7 +11521,7 @@ class OverlayElement extends ThemableMixin(DirMixin(ControllerMixin(PolymerEleme
   }
 }
 
-customElements.define(OverlayElement.is, OverlayElement);
+customElements.define(Overlay.is, Overlay);
 
 /**
  * @license
@@ -11641,7 +11707,7 @@ const button = i$1`
     -moz-osx-font-smoothing: grayscale;
   }
 
-  /* Set only for the internal parts so we don’t affect the host vertical alignment */
+  /* Set only for the internal parts so we don't affect the host vertical alignment */
   [part='label'],
   [part='prefix'],
   [part='suffix'] {
@@ -11877,7 +11943,7 @@ const button = i$1`
 registerStyles('vaadin-button', button, { moduleId: 'lumo-button' });
 
 const DEV_MODE_CODE_REGEXP =
-  /\/\*\*\s+vaadin-dev-mode:start([\s\S]*)vaadin-dev-mode:end\s+\*\*\//i;
+  /\/\*[\*!]\s+vaadin-dev-mode:start([\s\S]*)vaadin-dev-mode:end\s+\*\*\//i;
 
 const FlowClients = window.Vaadin && window.Vaadin.Flow && window.Vaadin.Flow.clients;
 
@@ -12827,7 +12893,7 @@ const registered = new Set();
 const ElementMixin = (superClass) =>
   class VaadinElementMixin extends DirMixin(superClass) {
     static get version() {
-      return '23.1.5';
+      return '23.3.19';
     }
 
     /** @protected */
@@ -12862,159 +12928,538 @@ const ElementMixin = (superClass) =>
   };
 
 /**
-@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;
+ * @license
+ * Copyright (c) 2021 - 2022 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
 
-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;
-  }
-})();
+let uniqueId = 0;
 
 /**
- * @param {string} name Possible mouse event name
- * @return {boolean} true if mouse event, false if not
+ * Returns a unique integer id.
+ *
+ * @return {number}
  */
-function isMouseEvent(name) {
-  return MOUSE_EVENTS.indexOf(name) > -1;
+function generateUniqueId() {
+  // eslint-disable-next-line no-plusplus
+  return uniqueId++;
 }
 
-/* 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) {}
-})();
+/**
+ * @license
+ * Copyright (c) 2021 - 2022 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
 
 /**
- * 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
+ * A controller for providing content to slot element and observing changes.
  */
-function PASSIVE_TOUCH(eventName) {
-  if (isMouseEvent(eventName) || eventName === 'touchend') {
-    return;
-  }
-  if (HAS_NATIVE_TA && supportsPassive && passiveTouchGestures) {
-    return { passive: true };
+class SlotController extends EventTarget {
+  /**
+   * Ensure that every instance has unique ID.
+   *
+   * @param {string} slotName
+   * @param {HTMLElement} host
+   * @return {string}
+   * @protected
+   */
+  static generateId(slotName, host) {
+    const prefix = slotName || 'default';
+    return `${prefix}-${host.localName}-${generateUniqueId()}`;
   }
-}
 
-// Check for touch-only devices
-const IS_TOUCH_ONLY = navigator.userAgent.match(/iP(?:[oa]d|hone)|Android/);
+  constructor(host, slotName, slotFactory, slotInitializer, useUniqueId) {
+    super();
 
-// 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,
-};
+    this.host = host;
+    this.slotName = slotName;
+    this.slotFactory = slotFactory;
+    this.slotInitializer = slotInitializer;
 
-/**
- * @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;
+    // Only generate the default ID if requested by the controller.
+    if (useUniqueId) {
+      this.defaultId = SlotController.generateId(slotName, host);
     }
-    // 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;
-}
+  hostConnected() {
+    if (!this.initialized) {
+      let node = this.getSlotChild();
 
-const POINTERSTATE = {
-  mouse: {
-    target: null,
-    mouseIgnoreJob: null,
-  },
-  touch: {
-    x: 0,
-    y: 0,
-    id: -1,
+      if (!node) {
+        node = this.attachDefaultNode();
+      } else {
+        this.node = node;
+        this.initCustomNode(node);
+      }
+
+      this.initNode(node);
+
+      // TODO: Consider making this behavior opt-in to improve performance.
+      this.observe();
+
+      this.initialized = true;
+    }
+  }
+
+  /**
+   * Create and attach default node using the slot factory.
+   * @return {Node | undefined}
+   * @protected
+   */
+  attachDefaultNode() {
+    const { host, slotName, slotFactory } = this;
+
+    // Check if the node was created previously and if so, reuse it.
+    let node = this.defaultNode;
+
+    // Slot factory is optional, some slots don't have default content.
+    if (!node && slotFactory) {
+      node = slotFactory(host);
+      if (node instanceof Element) {
+        if (slotName !== '') {
+          node.setAttribute('slot', slotName);
+        }
+        this.node = node;
+        this.defaultNode = node;
+      }
+    }
+
+    if (node) {
+      host.appendChild(node);
+    }
+
+    return node;
+  }
+
+  /**
+   * Return a reference to the node managed by the controller.
+   * @return {Node}
+   */
+  getSlotChild() {
+    const { slotName } = this;
+    return Array.from(this.host.childNodes).find((node) => {
+      // Either an element (any slot) or a text node (only un-named slot).
+      return (
+        (node.nodeType === Node.ELEMENT_NODE && node.slot === slotName) ||
+        (node.nodeType === Node.TEXT_NODE && node.textContent.trim() && slotName === '')
+      );
+    });
+  }
+
+  /**
+   * @param {Node} node
+   * @protected
+   */
+  initNode(node) {
+    const { slotInitializer } = this;
+    // Don't try to bind `this` to initializer (normally it's arrow function).
+    // Instead, pass the host as a first argument to access component's state.
+    if (slotInitializer) {
+      slotInitializer(this.host, node);
+    }
+  }
+
+  /**
+   * Override to initialize the newly added custom node.
+   *
+   * @param {Node} _node
+   * @protected
+   */
+  initCustomNode(_node) {}
+
+  /**
+   * Override to teardown slotted node when it's removed.
+   *
+   * @param {Node} _node
+   * @protected
+   */
+  teardownNode(_node) {}
+
+  /**
+   * Setup the observer to manage slot content changes.
+   * @protected
+   */
+  observe() {
+    const { slotName } = this;
+    const selector = slotName === '' ? 'slot:not([name])' : `slot[name=${slotName}]`;
+    const slot = this.host.shadowRoot.querySelector(selector);
+
+    this.__slotObserver = new FlattenedNodesObserver(slot, (info) => {
+      // TODO: support default slot with multiple nodes (e.g. confirm-dialog)
+      const current = this.node;
+      const newNode = info.addedNodes.find((node) => node !== current);
+
+      if (info.removedNodes.length) {
+        info.removedNodes.forEach((node) => {
+          this.teardownNode(node);
+        });
+      }
+
+      if (newNode) {
+        // Custom node is added, remove the current one.
+        if (current && current.isConnected) {
+          this.host.removeChild(current);
+        }
+
+        this.node = newNode;
+
+        if (newNode !== this.defaultNode) {
+          this.initCustomNode(newNode);
+
+          this.initNode(newNode);
+        }
+      }
+    });
+  }
+}
+
+/**
+ * @license
+ * Copyright (c) 2022 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+
+/**
+ * A controller that manages the slotted tooltip element.
+ */
+class TooltipController extends SlotController {
+  constructor(host) {
+    // Do not provide slot factory to create tooltip lazily.
+    super(host, 'tooltip');
+
+    this.setTarget(host);
+  }
+
+  /**
+   * Override to initialize the newly added custom tooltip.
+   *
+   * @param {Node} tooltipNode
+   * @protected
+   * @override
+   */
+  initCustomNode(tooltipNode) {
+    tooltipNode.target = this.target;
+
+    if (this.context !== undefined) {
+      tooltipNode.context = this.context;
+    }
+
+    if (this.manual !== undefined) {
+      tooltipNode.manual = this.manual;
+    }
+
+    if (this.opened !== undefined) {
+      tooltipNode.opened = this.opened;
+    }
+
+    if (this.position !== undefined) {
+      tooltipNode._position = this.position;
+    }
+
+    if (this.shouldShow !== undefined) {
+      tooltipNode.shouldShow = this.shouldShow;
+    }
+  }
+
+  /**
+   * Set a context object to be used by generator.
+   * @param {object} context
+   */
+  setContext(context) {
+    this.context = context;
+
+    const tooltipNode = this.node;
+    if (tooltipNode) {
+      tooltipNode.context = context;
+    }
+  }
+
+  /**
+   * Toggle manual state on the slotted tooltip.
+   * @param {boolean} manual
+   */
+  setManual(manual) {
+    this.manual = manual;
+
+    const tooltipNode = this.node;
+    if (tooltipNode) {
+      tooltipNode.manual = manual;
+    }
+  }
+
+  /**
+   * Toggle opened state on the slotted tooltip.
+   * @param {boolean} opened
+   */
+  setOpened(opened) {
+    this.opened = opened;
+
+    const tooltipNode = this.node;
+    if (tooltipNode) {
+      tooltipNode.opened = opened;
+    }
+  }
+
+  /**
+   * Set default position for the slotted tooltip.
+   * This can be overridden by setting the position
+   * using corresponding property or attribute.
+   * @param {string} position
+   */
+  setPosition(position) {
+    this.position = position;
+
+    const tooltipNode = this.node;
+    if (tooltipNode) {
+      tooltipNode._position = position;
+    }
+  }
+
+  /**
+   * Set function used to detect whether to show
+   * the tooltip based on a condition.
+   * @param {Function} shouldShow
+   */
+  setShouldShow(shouldShow) {
+    this.shouldShow = shouldShow;
+
+    const tooltipNode = this.node;
+    if (tooltipNode) {
+      tooltipNode.shouldShow = shouldShow;
+    }
+  }
+
+  /**
+   * Set an HTML element to attach the tooltip to.
+   * @param {HTMLElement} target
+   */
+  setTarget(target) {
+    this.target = target;
+
+    const tooltipNode = this.node;
+    if (tooltipNode) {
+      tooltipNode.target = target;
+    }
+  }
+}
+
+/**
+ * @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 provide disabled property for field components.
+ *
+ * @polymerMixin
+ */
+const DisabledMixin = dedupingMixin(
+  (superclass) =>
+    class DisabledMixinClass extends superclass {
+      static get properties() {
+        return {
+          /**
+           * If true, the user cannot interact with this element.
+           */
+          disabled: {
+            type: Boolean,
+            value: false,
+            observer: '_disabledChanged',
+            reflectToAttribute: true,
+          },
+        };
+      }
+
+      /**
+       * @param {boolean} disabled
+       * @protected
+       */
+      _disabledChanged(disabled) {
+        this._setAriaDisabled(disabled);
+      }
+
+      /**
+       * @param {boolean} disabled
+       * @protected
+       */
+      _setAriaDisabled(disabled) {
+        if (disabled) {
+          this.setAttribute('aria-disabled', 'true');
+        } else {
+          this.removeAttribute('aria-disabled');
+        }
+      }
+
+      /**
+       * Overrides the default element `click` method in order to prevent
+       * firing the `click` event when the element is disabled.
+       * @protected
+       * @override
+       */
+      click() {
+        if (!this.disabled) {
+          super.click();
+        }
+      }
+    },
+);
+
+/**
+@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,
   },
 };
@@ -13125,7 +13570,7 @@ function _handleNative(ev) {
   }
   if (!ev[HANDLED_OBJ]) {
     ev[HANDLED_OBJ] = {};
-    if (type.slice(0, 5) === 'touch') {
+    if (type.startsWith('touch')) {
       const t = ev.changedTouches[0];
       if (type === 'touchstart') {
         // Only handle the first finger
@@ -13729,68 +14174,6 @@ function trackForward(info, 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 provide disabled property for field components.
- *
- * @polymerMixin
- */
-const DisabledMixin = dedupingMixin(
-  (superclass) =>
-    class DisabledMixinClass extends superclass {
-      static get properties() {
-        return {
-          /**
-           * If true, the user cannot interact with this element.
-           */
-          disabled: {
-            type: Boolean,
-            value: false,
-            observer: '_disabledChanged',
-            reflectToAttribute: true,
-          },
-        };
-      }
-
-      /**
-       * @param {boolean} disabled
-       * @protected
-       */
-      _disabledChanged(disabled) {
-        this._setAriaDisabled(disabled);
-      }
-
-      /**
-       * @param {boolean} disabled
-       * @protected
-       */
-      _setAriaDisabled(disabled) {
-        if (disabled) {
-          this.setAttribute('aria-disabled', 'true');
-        } else {
-          this.removeAttribute('aria-disabled');
-        }
-      }
-
-      /**
-       * Overrides the default element `click` method in order to prevent
-       * firing the `click` event when the element is disabled.
-       * @protected
-       * @override
-       */
-      click() {
-        if (!this.disabled) {
-          super.click();
-        }
-      }
-    },
-);
-
 /**
  * @license
  * Copyright (c) 2021 - 2022 Vaadin Ltd.
@@ -13984,28 +14367,6 @@ 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.
  *
@@ -14019,7 +14380,7 @@ const FocusMixin = dedupingMixin(
        * @return {boolean}
        */
       get _keyboardActive() {
-        return keyboardActive;
+        return isKeyboardActive();
       }
 
       /** @protected */
@@ -14283,14 +14644,15 @@ 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/ds/customization/styling-components) documentation.
+ * 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(PolymerElement))) {
+class Button extends ButtonMixin(ElementMixin(ThemableMixin(ControllerMixin(PolymerElement)))) {
   static get is() {
     return 'vaadin-button';
   }
@@ -14344,18 +14706,27 @@ class Button extends ButtonMixin(ElementMixin(ThemableMixin(PolymerElement))) {
         }
       </style>
       <div class="vaadin-button-container">
-        <span part="prefix">
+        <span part="prefix" aria-hidden="true">
           <slot name="prefix"></slot>
         </span>
         <span part="label">
           <slot></slot>
         </span>
-        <span part="suffix">
+        <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);
@@ -14365,7 +14736,6 @@ 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%;
@@ -14391,7 +14761,7 @@ registerStyles(
             + var(--lumo-size-m) * 6
             + var(--lumo-space-s)
           );
-      --vaadin-infinite-scroller-buffer-offset: 20%;
+      --vaadin-infinite-scroller-buffer-offset: 10%;
       -webkit-mask-image: linear-gradient(transparent, #000 10%, #000 85%, transparent);
       mask-image: linear-gradient(transparent, #000 10%, #000 85%, transparent);
       position: relative;
@@ -14473,17 +14843,10 @@ 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'] {
@@ -14516,8 +14879,6 @@ 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);
@@ -14535,11 +14896,7 @@ 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) */
+    /* TODO magic number (same as used for media-query in vaadin-date-picker-overlay-content) */
     @media screen and (max-width: 374px) {
       :host {
         background-image: none;
@@ -14714,9 +15071,9 @@ registerStyles(
   { moduleId: 'lumo-month-calendar' },
 );
 
-const $_documentContainer$1 = document.createElement('template');
+const template$1 = document.createElement('template');
 
-$_documentContainer$1.innerHTML = `
+template$1.innerHTML = `
   <style>
     @keyframes vaadin-date-picker-month-calendar-focus-date {
       50% {
@@ -14726,7 +15083,7 @@ $_documentContainer$1.innerHTML = `
   </style>
 `;
 
-document.head.appendChild($_documentContainer$1.content);
+document.head.appendChild(template$1.content);
 
 /**
  * @license
@@ -14734,9 +15091,9 @@ document.head.appendChild($_documentContainer$1.content);
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 
-const $_documentContainer = document.createElement('template');
+const template = document.createElement('template');
 
-$_documentContainer.innerHTML = `
+template.innerHTML = `
   <style>
     @font-face {
       font-family: 'lumo-icons';
@@ -14792,7 +15149,7 @@ $_documentContainer.innerHTML = `
   </style>
 `;
 
-document.head.appendChild($_documentContainer.content);
+document.head.appendChild(template.content);
 
 /**
  * @license
@@ -14906,6 +15263,10 @@ const requiredField = i$1`
     line-height: 1;
     padding-right: 1em;
     padding-bottom: 0.5em;
+    /* As a workaround for diacritics being cut off, add a top padding and a 
+    negative margin to compensate */
+    padding-top: 0.25em;
+    margin-top: -0.25em;
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
@@ -14926,6 +15287,10 @@ const requiredField = i$1`
     padding-top: var(--lumo-space-m);
   }
 
+  :host([has-label]) ::slotted([slot='tooltip']) {
+    --vaadin-tooltip-offset-bottom: calc((var(--lumo-space-m) - var(--lumo-space-xs)) * -1);
+  }
+
   :host([required]) [part='required-indicator']::after {
     content: var(--lumo-required-field-indicator, '•');
     transition: opacity 0.2s;
@@ -15359,6 +15724,57 @@ 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.
@@ -15375,6 +15791,16 @@ const PROP_NAMES_HORIZONTAL = {
   end: 'right',
 };
 
+const targetResizeObserver = new ResizeObserver((entries) => {
+  setTimeout(() => {
+    entries.forEach((entry) => {
+      if (entry.target.__overlay) {
+        entry.target.__overlay._updatePosition();
+      }
+    });
+  });
+});
+
 /**
  * @polymerMixin
  */
@@ -15400,6 +15826,8 @@ const PositionMixin = (superClass) =>
          * RTL is taken into account when interpreting the value.
          * The overlay is automatically flipped to the opposite side when it doesn't fit into
          * the default side defined by this property.
+         *
+         * @attr {start|end} horizontal-align
          */
         horizontalAlign: {
           type: String,
@@ -15412,6 +15840,8 @@ const PositionMixin = (superClass) =>
          * Possible values are `top` and `bottom`.
          * The overlay is automatically flipped to the opposite side when it doesn't fit into
          * the default side defined by this property.
+         *
+         * @attr {top|bottom} vertical-align
          */
         verticalAlign: {
           type: String,
@@ -15421,6 +15851,8 @@ const PositionMixin = (superClass) =>
         /**
          * When `positionTarget` is set, this property defines whether the overlay should overlap
          * the target element in the x-axis, or be positioned right next to it.
+         *
+         * @attr {boolean} no-horizontal-overlap
          */
         noHorizontalOverlap: {
           type: Boolean,
@@ -15430,17 +15862,32 @@ const PositionMixin = (superClass) =>
         /**
          * When `positionTarget` is set, this property defines whether the overlay should overlap
          * the target element in the y-axis, or be positioned right above/below it.
+         *
+         * @attr {boolean} no-vertical-overlap
          */
         noVerticalOverlap: {
           type: Boolean,
           value: false,
         },
+
+        /**
+         * If the overlay content has no intrinsic height, this property can be used to set
+         * the minimum vertical space (in pixels) required by the overlay. Setting a value to
+         * the property effectively disables the content measurement in favor of using this
+         * fixed value for determining the open direction.
+         *
+         * @attr {number} required-vertical-space
+         */
+        requiredVerticalSpace: {
+          type: Number,
+          value: 0,
+        },
       };
     }
 
     static get observers() {
       return [
-        '__positionSettingsChanged(horizontalAlign, verticalAlign, noHorizontalOverlap, noVerticalOverlap)',
+        '__positionSettingsChanged(horizontalAlign, verticalAlign, noHorizontalOverlap, noVerticalOverlap, requiredVerticalSpace)',
         '__overlayOpenedChanged(opened, positionTarget)',
       ];
     }
@@ -15448,6 +15895,7 @@ const PositionMixin = (superClass) =>
     constructor() {
       super();
 
+      this.__onScroll = this.__onScroll.bind(this);
       this._updatePosition = this._updatePosition.bind(this);
     }
 
@@ -15472,7 +15920,7 @@ const PositionMixin = (superClass) =>
 
       this.__positionTargetAncestorRootNodes = getAncestorRootNodes(this.positionTarget);
       this.__positionTargetAncestorRootNodes.forEach((node) => {
-        node.addEventListener('scroll', this._updatePosition, true);
+        node.addEventListener('scroll', this.__onScroll, true);
       });
     }
 
@@ -15482,7 +15930,7 @@ const PositionMixin = (superClass) =>
 
       if (this.__positionTargetAncestorRootNodes) {
         this.__positionTargetAncestorRootNodes.forEach((node) => {
-          node.removeEventListener('scroll', this._updatePosition, true);
+          node.removeEventListener('scroll', this.__onScroll, true);
         });
         this.__positionTargetAncestorRootNodes = null;
       }
@@ -15492,8 +15940,15 @@ const PositionMixin = (superClass) =>
     __overlayOpenedChanged(opened, positionTarget) {
       this.__removeUpdatePositionEventListeners();
 
-      if (opened && positionTarget) {
-        this.__addUpdatePositionEventListeners();
+      if (positionTarget) {
+        positionTarget.__overlay = null;
+        targetResizeObserver.unobserve(positionTarget);
+
+        if (opened) {
+          this.__addUpdatePositionEventListeners();
+          positionTarget.__overlay = this;
+          targetResizeObserver.observe(positionTarget);
+        }
       }
 
       if (opened) {
@@ -15520,6 +15975,14 @@ const PositionMixin = (superClass) =>
       this._updatePosition();
     }
 
+    /** @private */
+    __onScroll(e) {
+      // If the scroll event occurred inside the overlay, ignore it.
+      if (!this.contains(e.target)) {
+        this._updatePosition();
+      }
+    }
+
     _updatePosition() {
       if (!this.positionTarget || !this.opened) {
         return;
@@ -15592,7 +16055,8 @@ const PositionMixin = (superClass) =>
     __shouldAlignStartVertically(targetRect) {
       // Using previous size to fix a case where window resize may cause the overlay to be squeezed
       // smaller than its current space before the fit-calculations.
-      const contentHeight = Math.max(this.__oldContentHeight || 0, this.$.overlay.offsetHeight);
+      const contentHeight =
+        this.requiredVerticalSpace || Math.max(this.__oldContentHeight || 0, this.$.overlay.offsetHeight);
       this.__oldContentHeight = this.$.overlay.offsetHeight;
 
       const viewportHeight = Math.min(window.innerHeight, document.documentElement.clientHeight);
@@ -15624,9 +16088,47 @@ const PositionMixin = (superClass) =>
       return defaultAlignStart === shouldGoToDefaultSide;
     }
 
+    /**
+     * Returns an adjusted value after resizing the browser window,
+     * to avoid wrong calculations when e.g. previously set `bottom`
+     * CSS property value is larger than the updated viewport height.
+     * See https://github.com/vaadin/web-components/issues/4604
+     */
+    __adjustBottomProperty(cssPropNameToSet, propNames, currentValue) {
+      let adjustedProp;
+
+      if (cssPropNameToSet === propNames.end) {
+        // Adjust horizontally
+        if (propNames.end === PROP_NAMES_VERTICAL.end) {
+          const viewportHeight = Math.min(window.innerHeight, document.documentElement.clientHeight);
+
+          if (currentValue > viewportHeight && this.__oldViewportHeight) {
+            const heightDiff = this.__oldViewportHeight - viewportHeight;
+            adjustedProp = currentValue - heightDiff;
+          }
+
+          this.__oldViewportHeight = viewportHeight;
+        }
+
+        // Adjust vertically
+        if (propNames.end === PROP_NAMES_HORIZONTAL.end) {
+          const viewportWidth = Math.min(window.innerWidth, document.documentElement.clientWidth);
+
+          if (currentValue > viewportWidth && this.__oldViewportWidth) {
+            const widthDiff = this.__oldViewportWidth - viewportWidth;
+            adjustedProp = currentValue - widthDiff;
+          }
+
+          this.__oldViewportWidth = viewportWidth;
+        }
+      }
+
+      return adjustedProp;
+    }
+
     /**
      * Returns an object with CSS position properties to set,
-     * e.g. { top: "100px", bottom: "" }
+     * e.g. { top: "100px" }
      */
     // eslint-disable-next-line max-params
     __calculatePositionInOneDimension(targetRect, overlayRect, noOverlap, propNames, overlay, shouldAlignStart) {
@@ -15634,13 +16136,18 @@ const PositionMixin = (superClass) =>
       const cssPropNameToClear = shouldAlignStart ? propNames.end : propNames.start;
 
       const currentValue = parseFloat(overlay.style[cssPropNameToSet] || getComputedStyle(overlay)[cssPropNameToSet]);
+      const adjustedValue = this.__adjustBottomProperty(cssPropNameToSet, propNames, currentValue);
 
       const diff =
         overlayRect[shouldAlignStart ? propNames.start : propNames.end] -
         targetRect[noOverlap === shouldAlignStart ? propNames.end : propNames.start];
 
+      const valueToSet = adjustedValue
+        ? `${adjustedValue}px`
+        : `${currentValue + diff * (shouldAlignStart ? -1 : 1)}px`;
+
       return {
-        [cssPropNameToSet]: `${currentValue + diff * (shouldAlignStart ? -1 : 1)}px`,
+        [cssPropNameToSet]: valueToSet,
         [cssPropNameToClear]: '',
       };
     }
@@ -15657,11 +16164,6 @@ const datePickerStyles = i$1`
     direction: ltr;
   }
 
-  :host([dir='rtl']) [part='value']::placeholder {
-    direction: rtl;
-    text-align: left;
-  }
-
   :host([dir='rtl']) [part='input-field'] ::slotted(input)::placeholder {
     direction: rtl;
     text-align: left;
@@ -15694,10 +16196,10 @@ let memoizedTemplate;
 /**
  * An element used internally by `<vaadin-date-picker>`. Not intended to be used separately.
  *
- * @extends OverlayElement
+ * @extends Overlay
  * @private
  */
-class DatePickerOverlay extends DisableUpgradeMixin(PositionMixin(OverlayElement)) {
+class DatePickerOverlay extends DisableUpgradeMixin(PositionMixin(Overlay)) {
   static get is() {
     return 'vaadin-date-picker-overlay';
   }
@@ -16837,6 +17339,53 @@ function extractDateParts(date) {
   };
 }
 
+/**
+ * Calculate the year of the date based on the provided reference date.
+ * Gets a two-digit year and returns a full year.
+ * @param {!Date} referenceDate The date to act as basis in the calculation
+ * @param {!number} year Should be in the range of [0, 99]
+ * @param {number} month
+ * @param {number} day
+ * @return {!number} Adjusted year value
+ */
+function getAdjustedYear(referenceDate, year, month = 0, day = 1) {
+  if (year > 99) {
+    throw new Error('The provided year cannot have more than 2 digits.');
+  }
+  if (year < 0) {
+    throw new Error('The provided year cannot be negative.');
+  }
+  // Year values up to 2 digits are parsed based on the reference date.
+  let adjustedYear = year + Math.floor(referenceDate.getFullYear() / 100) * 100;
+  if (referenceDate < new Date(adjustedYear - 50, month, day)) {
+    adjustedYear -= 100;
+  } else if (referenceDate > new Date(adjustedYear + 50, month, day)) {
+    adjustedYear += 100;
+  }
+  return adjustedYear;
+}
+
+/**
+ * Parse date string of one of the following date formats:
+ * - ISO 8601 `"YYYY-MM-DD"`
+ * - 6-digit extended ISO 8601 `"+YYYYYY-MM-DD"`, `"-YYYYYY-MM-DD"`
+ * @param {!string} str Date string to parse
+ * @return {Date} Parsed date
+ */
+function parseDate(str) {
+  // Parsing with RegExp to ensure correct format
+  const parts = /^([-+]\d{1}|\d{2,4}|[-+]\d{6})-(\d{1,2})-(\d{1,2})$/.exec(str);
+  if (!parts) {
+    return undefined;
+  }
+
+  const date = new Date(0, 0); // Wrong date (1900-01-01), but with midnight in local time
+  date.setFullYear(parseInt(parts[1], 10));
+  date.setMonth(parseInt(parts[2], 10) - 1);
+  date.setDate(parseInt(parts[3], 10));
+  return date;
+}
+
 /**
  * @license
  * Copyright (c) 2016 - 2022 Vaadin Ltd.
@@ -16913,7 +17462,9 @@ class MonthCalendar extends FocusMixin(ThemableMixin(PolymerElement)) {
               is="dom-repeat"
               items="[[_getWeekDayNames(i18n.weekdays, i18n.weekdaysShort, showWeekNumbers, i18n.firstDayOfWeek)]]"
             >
-              <th role="columnheader" part="weekday" scope="col" abbr$="[[item.weekDay]]">[[item.weekDayShort]]</th>
+              <th role="columnheader" part="weekday" scope="col" abbr$="[[item.weekDay]]" aria-hidden="true">
+                [[item.weekDayShort]]
+              </th>
             </template>
           </tr>
         </thead>
@@ -17083,7 +17634,9 @@ class MonthCalendar extends FocusMixin(ThemableMixin(PolymerElement)) {
 
   _onMonthGridTouchStart() {
     this._notTapping = false;
-    setTimeout(() => (this._notTapping = true), 300);
+    setTimeout(() => {
+      this._notTapping = true;
+    }, 300);
   }
 
   _dateAdd(date, delta) {
@@ -17257,12 +17810,6 @@ class MonthCalendar extends FocusMixin(ThemableMixin(PolymerElement)) {
 
     return '-1';
   }
-
-  __getWeekNumbers(dates) {
-    return dates
-      .map((date) => this.__getWeekNumber(date, dates))
-      .filter((week, index, arr) => arr.indexOf(week) === index);
-  }
 }
 
 customElements.define(MonthCalendar.is, MonthCalendar);
@@ -17352,6 +17899,7 @@ class InfiniteScroller extends PolymerElement {
       /**
        * The amount of initial scroll top. Needed in order for the
        * user to be able to scroll backwards.
+       * @private
        */
       _initialScroll: {
         value: 500000,
@@ -17359,17 +17907,22 @@ class InfiniteScroller extends PolymerElement {
 
       /**
        * The index/position mapped at _initialScroll point.
+       * @private
        */
       _initialIndex: {
         value: 0,
       },
 
+      /** @private */
       _buffers: Array,
 
+      /** @private */
       _preventScrollEvent: Boolean,
 
+      /** @private */
       _mayHaveMomentum: Boolean,
 
+      /** @private */
       _initialized: Boolean,
 
       active: {
@@ -17379,10 +17932,11 @@ class InfiniteScroller extends PolymerElement {
     };
   }
 
+  /** @protected */
   ready() {
     super.ready();
 
-    this._buffers = Array.prototype.slice.call(this.root.querySelectorAll('.buffer'));
+    this._buffers = [...this.shadowRoot.querySelectorAll('.buffer')];
 
     this.$.fullHeight.style.height = `${this._initialScroll * 2}px`;
 
@@ -17391,8 +17945,8 @@ class InfiniteScroller extends PolymerElement {
       forwardHostProp(prop, value) {
         if (prop !== 'index') {
           this._buffers.forEach((buffer) => {
-            [].forEach.call(buffer.children, (insertionPoint) => {
-              insertionPoint._itemWrapper.instance[prop] = value;
+            [...buffer.children].forEach((slot) => {
+              slot._itemWrapper.instance[prop] = value;
             });
           });
         }
@@ -17406,6 +17960,19 @@ class InfiniteScroller extends PolymerElement {
     }
   }
 
+  /**
+   * Force the scroller to update clones after a reset, without
+   * waiting for the debouncer to resolve.
+   */
+  forceUpdate() {
+    if (this._debouncerUpdateClones) {
+      this._buffers[0].updated = this._buffers[1].updated = false;
+      this._updateClones();
+      this._debouncerUpdateClones.cancel();
+    }
+  }
+
+  /** @private */
   _activated(active) {
     if (active && !this._initialized) {
       this._createPool();
@@ -17413,12 +17980,15 @@ class InfiniteScroller extends PolymerElement {
     }
   }
 
+  /** @private */
   _finishInit() {
     if (!this._initDone) {
       // 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);
+        [...buffer.children].forEach((slot) => {
+          this._ensureStampedInstance(slot._itemWrapper);
+        });
+      });
 
       if (!this._buffers[0].translateY) {
         this._reset();
@@ -17428,6 +17998,7 @@ class InfiniteScroller extends PolymerElement {
     }
   }
 
+  /** @private */
   _translateBuffer(up) {
     const index = up ? 1 : 0;
     this._buffers[index].translateY = this._buffers[index ? 0 : 1].translateY + this._bufferHeight * (index ? -1 : 1);
@@ -17436,6 +18007,7 @@ class InfiniteScroller extends PolymerElement {
     this._buffers.reverse();
   }
 
+  /** @private */
   _scroll() {
     if (this._scrollDisabled) {
       return;
@@ -17532,10 +18104,12 @@ class InfiniteScroller extends PolymerElement {
     return this._itemHeightVal;
   }
 
+  /** @private */
   get _bufferHeight() {
     return this.itemHeight * this.bufferSize;
   }
 
+  /** @private */
   _reset() {
     this._scrollDisabled = true;
     this.$.scroller.scrollTop = this._initialScroll;
@@ -17555,6 +18129,7 @@ class InfiniteScroller extends PolymerElement {
     this._scrollDisabled = false;
   }
 
+  /** @private */
   _createPool() {
     const container = this.getBoundingClientRect();
     this._buffers.forEach((buffer) => {
@@ -17566,10 +18141,10 @@ class InfiniteScroller extends PolymerElement {
         const contentId = (InfiniteScroller._contentIndex = InfiniteScroller._contentIndex + 1 || 0);
         const slotName = `vaadin-infinite-scroller-item-content-${contentId}`;
 
-        const insertionPoint = document.createElement('slot');
-        insertionPoint.setAttribute('name', slotName);
-        insertionPoint._itemWrapper = itemWrapper;
-        buffer.appendChild(insertionPoint);
+        const slot = document.createElement('slot');
+        slot.setAttribute('name', slotName);
+        slot._itemWrapper = itemWrapper;
+        buffer.appendChild(slot);
 
         itemWrapper.setAttribute('slot', slotName);
         this.appendChild(itemWrapper);
@@ -17581,13 +18156,14 @@ class InfiniteScroller extends PolymerElement {
           }
         }, 1); // Wait for first reset
       }
-    }, this);
+    });
 
     setTimeout(() => {
       afterNextRender(this, this._finishInit.bind(this));
     }, 1);
   }
 
+  /** @private */
   _ensureStampedInstance(itemWrapper) {
     if (itemWrapper.firstElementChild) {
       return;
@@ -17603,6 +18179,7 @@ class InfiniteScroller extends PolymerElement {
     });
   }
 
+  /** @private */
   _updateClones(viewPortOnly) {
     this._firstIndex = ~~((this._buffers[0].translateY - this._initialScroll) / this.itemHeight) + this._initialIndex;
 
@@ -17611,17 +18188,18 @@ class InfiniteScroller extends PolymerElement {
       if (!buffer.updated) {
         const firstIndex = this._firstIndex + this.bufferSize * bufferIndex;
 
-        [].forEach.call(buffer.children, (insertionPoint, index) => {
-          const itemWrapper = insertionPoint._itemWrapper;
+        [...buffer.children].forEach((slot, index) => {
+          const itemWrapper = slot._itemWrapper;
           if (!viewPortOnly || this._isVisible(itemWrapper, scrollerRect)) {
             itemWrapper.instance.index = firstIndex + index;
           }
         });
         buffer.updated = true;
       }
-    }, this);
+    });
   }
 
+  /** @private */
   _isVisible(element, container) {
     const rect = element.getBoundingClientRect();
     return rect.bottom > container.top && rect.top < container.bottom;
@@ -17718,7 +18296,6 @@ class DatePickerOverlayContent extends ControllerMixin(ThemableMixin(DirMixin(Po
           height: 100%;
           width: 100%;
           outline: none;
-          background: #fff;
         }
 
         [part='overlay-header'] {
@@ -17736,20 +18313,12 @@ class DatePickerOverlayContent extends ControllerMixin(ThemableMixin(DirMixin(Po
           flex-grow: 1;
         }
 
-        [part='clear-button']:not([showclear]) {
-          display: none;
-        }
-
-        [part='years-toggle-button'] {
-          display: flex;
-        }
-
-        [part='years-toggle-button'][desktop] {
-          display: none;
+        [hidden] {
+          display: none !important;
         }
 
-        :host(:not([years-visible])) [part='years-toggle-button']::before {
-          transform: rotate(180deg);
+        [part='years-toggle-button'] {
+          display: flex;
         }
 
         #scrollers {
@@ -17825,27 +18394,14 @@ 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" showclear$="[[_showClear(selectedDate)]]"></div>
+        <div part="clear-button" hidden$="[[!selectedDate]]"></div>
         <div part="toggle-button"></div>
 
-        <div part="years-toggle-button" desktop$="[[_desktopMode]]" aria-hidden="true">
+        <div part="years-toggle-button" hidden$="[[_desktopMode]]" aria-hidden="true">
           [[_yearAfterXMonths(_visibleMonthIndex)]]
         </div>
       </div>
@@ -17931,6 +18487,7 @@ class DatePickerOverlayContent extends ControllerMixin(ThemableMixin(DirMixin(Po
        */
       selectedDate: {
         type: Date,
+        value: null,
       },
 
       /**
@@ -18006,10 +18563,24 @@ class DatePickerOverlayContent extends ControllerMixin(ThemableMixin(DirMixin(Po
     return this.getAttribute('dir') === 'rtl';
   }
 
+  /**
+   * Whether to scroll to a sub-month position when scrolling to a date.
+   * This is active if the month scroller is not large enough to fit a
+   * full month. In that case we want to scroll to a position between
+   * two months in order to have the focused date in the visible area.
+   * @returns {boolean} whether to use sub-month scrolling
+   * @private
+   */
+  get __useSubMonthScrolling() {
+    return this.$.monthScroller.clientHeight < this.$.monthScroller.itemHeight + this.$.monthScroller.bufferOffset;
+  }
+
+  get calendars() {
+    return [...this.shadowRoot.querySelectorAll('vaadin-month-calendar')];
+  }
+
   get focusableDateElement() {
-    return [...this.shadowRoot.querySelectorAll('vaadin-month-calendar')]
-      .map((calendar) => calendar.focusableDateElement)
-      .find(Boolean);
+    return this.calendars.map((calendar) => calendar.focusableDateElement).find(Boolean);
   }
 
   ready() {
@@ -18017,7 +18588,6 @@ 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));
@@ -18062,7 +18632,9 @@ class DatePickerOverlayContent extends ControllerMixin(ThemableMixin(DirMixin(Po
    * Scrolls the list to the given Date.
    */
   scrollToDate(date, animate) {
-    this._scrollToPosition(this._differenceInMonths(date, this._originDate), animate);
+    const offset = this.__useSubMonthScrolling ? this._calculateWeekScrollOffset(date) : 0;
+    this._scrollToPosition(this._differenceInMonths(date, this._originDate) + offset, animate);
+    this.$.monthScroller.forceUpdate();
   }
 
   /**
@@ -18094,23 +18666,63 @@ class DatePickerOverlayContent extends ControllerMixin(ThemableMixin(DirMixin(Po
    * Scrolls the month and year scrollers enough to reveal the given date.
    */
   revealDate(date, animate = true) {
-    if (date) {
-      const diff = this._differenceInMonths(date, this._originDate);
-      const scrolledAboveViewport = this.$.monthScroller.position > diff;
+    if (!date) {
+      return;
+    }
+    const diff = this._differenceInMonths(date, this._originDate);
+    // If scroll area does not fit the full month, then always scroll with an offset to
+    // approximately display the week of the date
+    if (this.__useSubMonthScrolling) {
+      const offset = this._calculateWeekScrollOffset(date);
+      this._scrollToPosition(diff + offset, animate);
+      return;
+    }
 
-      const visibleArea = Math.max(
-        this.$.monthScroller.itemHeight,
-        this.$.monthScroller.clientHeight - this.$.monthScroller.bufferOffset * 2,
-      );
-      const visibleItems = visibleArea / this.$.monthScroller.itemHeight;
-      const scrolledBelowViewport = this.$.monthScroller.position + visibleItems - 1 < diff;
+    // Otherwise determine if we need to scroll to make the month of the date visible
+    const scrolledAboveViewport = this.$.monthScroller.position > diff;
 
-      if (scrolledAboveViewport) {
-        this._scrollToPosition(diff, animate);
-      } else if (scrolledBelowViewport) {
-        this._scrollToPosition(diff - visibleItems + 1, animate);
+    const visibleArea = Math.max(
+      this.$.monthScroller.itemHeight,
+      this.$.monthScroller.clientHeight - this.$.monthScroller.bufferOffset * 2,
+    );
+    const visibleItems = visibleArea / this.$.monthScroller.itemHeight;
+    const scrolledBelowViewport = this.$.monthScroller.position + visibleItems - 1 < diff;
+
+    if (scrolledAboveViewport) {
+      this._scrollToPosition(diff, animate);
+    } else if (scrolledBelowViewport) {
+      this._scrollToPosition(diff - visibleItems + 1, animate);
+    }
+  }
+
+  /**
+   * Calculates an offset to be added to the month scroll position
+   * when using sub-month scrolling, in order ensure that the week
+   * that the date is in is visible even for small scroll areas.
+   * As the month scroller uses a month as minimal scroll unit
+   * (a value of `1` equals one month), we can not exactly identify
+   * the position of a specific week. This is a best effort
+   * implementation based on manual testing.
+   * @param date the date for which to calculate the offset
+   * @returns {number} the offset
+   * @private
+   */
+  _calculateWeekScrollOffset(date) {
+    // Get first day of month
+    const temp = new Date(0, 0);
+    temp.setFullYear(date.getFullYear());
+    temp.setMonth(date.getMonth());
+    temp.setDate(1);
+    // Determine week (=row index) of date within the month
+    let week = 0;
+    while (temp.getDate() < date.getDate()) {
+      temp.setDate(temp.getDate() + 1);
+      if (temp.getDay() === this.i18n.firstDayOfWeek) {
+        week += 1;
       }
     }
+    // Calculate magic number that approximately keeps the week visible
+    return week / 6;
   }
 
   _initialPositionChanged(initialPosition) {
@@ -18139,7 +18751,9 @@ class DatePickerOverlayContent extends ControllerMixin(ThemableMixin(DirMixin(Po
 
   _onYearScrollTouchStart() {
     this._notTapping = false;
-    setTimeout(() => (this._notTapping = true), 300);
+    setTimeout(() => {
+      this._notTapping = true;
+    }, 300);
 
     this._repositionMonthScroller();
   }
@@ -18150,7 +18764,9 @@ 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) {
@@ -18181,10 +18797,6 @@ 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 =
@@ -18210,6 +18822,11 @@ 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;
@@ -18250,7 +18867,9 @@ class DatePickerOverlayContent extends ControllerMixin(ThemableMixin(DirMixin(Po
 
         this.$.monthScroller.position = this._targetPosition;
         this._targetPosition = undefined;
-        this.__tryFocusDate();
+
+        revealResolve();
+        this._revealPromise = undefined;
       }
 
       setTimeout(this._repositionYearScroller.bind(this), 1);
@@ -18366,10 +18985,6 @@ class DatePickerOverlayContent extends ControllerMixin(ThemableMixin(DirMixin(Po
     return months - date2.getMonth() + date1.getMonth();
   }
 
-  _differenceInYears(date1, date2) {
-    return this._differenceInMonths(date1, date2) / 12;
-  }
-
   _clear() {
     this._selectDate('');
   }
@@ -18460,51 +19075,44 @@ class DatePickerOverlayContent extends ControllerMixin(ThemableMixin(DirMixin(Po
     switch (section) {
       case 'calendar':
         if (event.shiftKey) {
-          // Return focus back to the input field.
           event.preventDefault();
-          this.__focusInput();
+
+          if (this.hasAttribute('fullscreen')) {
+            // Trap focus in the overlay
+            this.$.cancelButton.focus();
+          } else {
+            this.__focusInput();
+          }
         }
         break;
       case 'today':
         if (event.shiftKey) {
-          // Browser returns focus back to the calendar.
-          // We need to move the scroll to focused date.
-          setTimeout(() => this.revealDate(this.focusedDate), 1);
+          event.preventDefault();
+          this.focusDateElement();
         }
         break;
       case 'cancel':
         if (!event.shiftKey) {
-          // Return focus back to the input field.
           event.preventDefault();
-          this.__focusInput();
+
+          if (this.hasAttribute('fullscreen')) {
+            // Trap focus in the overlay
+            this.focusDateElement();
+          } else {
+            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');
     }
@@ -18533,15 +19141,29 @@ class DatePickerOverlayContent extends ControllerMixin(ThemableMixin(DirMixin(Po
     if (!keepMonth) {
       this._focusedMonthDate = dateToFocus.getDate();
     }
-    await this.focusDateElement();
+    await this.focusDateElement(false);
   }
 
-  async focusDateElement() {
+  async focusDateElement(reveal = true) {
     this.__pendingDateFocus = this.focusedDate;
 
-    await new Promise((resolve) => {
-      requestAnimationFrame(resolve);
-    });
+    // 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;
+    }
 
     this.__tryFocusDate();
   }
@@ -18639,10 +19261,6 @@ 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);
@@ -18821,229 +19439,57 @@ const DelegateFocusMixin = dedupingMixin(
         return event.target === this.focusElement;
       }
 
-      /**
-       * @param {boolean} disabled
-       * @param {boolean} oldDisabled
-       * @protected
-       * @override
-       */
-      _disabledChanged(disabled, oldDisabled) {
-        super._disabledChanged(disabled, oldDisabled);
-
-        if (this.focusElement) {
-          this.focusElement.disabled = disabled;
-        }
-
-        if (disabled) {
-          this.blur();
-        }
-      }
-
-      /**
-       * Override an observer from `TabindexMixin`.
-       * Do not call super to remove tabindex attribute
-       * from the host after it has been forwarded.
-       * @param {string} tabindex
-       * @protected
-       * @override
-       */
-      _tabindexChanged(tabindex) {
-        this.__forwardTabIndex(tabindex);
-      }
-
-      /** @private */
-      __forwardTabIndex(tabindex) {
-        if (tabindex !== undefined && this.focusElement) {
-          this.focusElement.tabIndex = tabindex;
-
-          // Preserve tabindex="-1" on the host element
-          if (tabindex !== -1) {
-            this.tabindex = undefined;
-          }
-        }
-
-        if (this.disabled && tabindex) {
-          // If tabindex attribute was changed while component was disabled
-          if (tabindex !== -1) {
-            this._lastTabIndex = tabindex;
-          }
-          this.tabindex = undefined;
-        }
-      }
-    },
-);
-
-/**
- * @license
- * Copyright (c) 2021 - 2022 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-
-/**
- * A controller for providing content to slot element and observing changes.
- */
-class SlotController extends EventTarget {
-  /**
-   * Ensure that every instance has unique ID.
-   *
-   * @param {string} slotName
-   * @param {HTMLElement} host
-   * @return {string}
-   * @protected
-   */
-  static generateId(slotName, host) {
-    const prefix = slotName || 'default';
-
-    // 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) {
-    super();
-
-    this.host = host;
-    this.slotName = slotName;
-    this.slotFactory = slotFactory;
-    this.slotInitializer = slotInitializer;
-    this.defaultId = SlotController.generateId(slotName, host);
-  }
-
-  hostConnected() {
-    if (!this.initialized) {
-      let node = this.getSlotChild();
-
-      if (!node) {
-        node = this.attachDefaultNode();
-      } else {
-        this.node = node;
-        this.initCustomNode(node);
-      }
-
-      this.initNode(node);
-
-      // TODO: Consider making this behavior opt-in to improve performance.
-      this.observe();
-
-      this.initialized = true;
-    }
-  }
-
-  /**
-   * Create and attach default node using the slot factory.
-   * @return {Node | undefined}
-   * @protected
-   */
-  attachDefaultNode() {
-    const { host, slotName, slotFactory } = this;
-
-    // Check if the node was created previously and if so, reuse it.
-    let node = this.defaultNode;
-
-    // Slot factory is optional, some slots don't have default content.
-    if (!node && slotFactory) {
-      node = slotFactory(host);
-      if (node instanceof Element) {
-        if (slotName !== '') {
-          node.setAttribute('slot', slotName);
-        }
-        this.node = node;
-        this.defaultNode = node;
-      }
-    }
-
-    if (node) {
-      host.appendChild(node);
-    }
-
-    return node;
-  }
-
-  /**
-   * Return a reference to the node managed by the controller.
-   * @return {Node}
-   */
-  getSlotChild() {
-    const { slotName } = this;
-    return Array.from(this.host.childNodes).find((node) => {
-      // Either an element (any slot) or a text node (only un-named slot).
-      return (
-        (node.nodeType === Node.ELEMENT_NODE && node.slot === slotName) ||
-        (node.nodeType === Node.TEXT_NODE && node.textContent.trim() && slotName === '')
-      );
-    });
-  }
-
-  /**
-   * @param {Node} node
-   * @protected
-   */
-  initNode(node) {
-    const { slotInitializer } = this;
-    // Don't try to bind `this` to initializer (normally it's arrow function).
-    // Instead, pass the host as a first argument to access component's state.
-    if (slotInitializer) {
-      slotInitializer(this.host, node);
-    }
-  }
-
-  /**
-   * Override to initialize the newly added custom node.
-   *
-   * @param {Node} _node
-   * @protected
-   */
-  initCustomNode(_node) {}
-
-  /**
-   * Override to teardown slotted node when it's removed.
-   *
-   * @param {Node} _node
-   * @protected
-   */
-  teardownNode(_node) {}
-
-  /**
-   * Setup the observer to manage slot content changes.
-   * @protected
-   */
-  observe() {
-    const { slotName } = this;
-    const selector = slotName === '' ? 'slot:not([name])' : `slot[name=${slotName}]`;
-    const slot = this.host.shadowRoot.querySelector(selector);
-
-    this.__slotObserver = new FlattenedNodesObserver(slot, (info) => {
-      // TODO: support default slot with multiple nodes (e.g. confirm-dialog)
-      const current = this.node;
-      const newNode = info.addedNodes.find((node) => node !== current);
+      /**
+       * @param {boolean} disabled
+       * @param {boolean} oldDisabled
+       * @protected
+       * @override
+       */
+      _disabledChanged(disabled, oldDisabled) {
+        super._disabledChanged(disabled, oldDisabled);
 
-      if (info.removedNodes.length) {
-        info.removedNodes.forEach((node) => {
-          this.teardownNode(node);
-        });
-      }
+        if (this.focusElement) {
+          this.focusElement.disabled = disabled;
+        }
 
-      if (newNode) {
-        // Custom node is added, remove the current one.
-        if (current && current.isConnected) {
-          this.host.removeChild(current);
+        if (disabled) {
+          this.blur();
         }
+      }
 
-        this.node = newNode;
+      /**
+       * Override an observer from `TabindexMixin`.
+       * Do not call super to remove tabindex attribute
+       * from the host after it has been forwarded.
+       * @param {string} tabindex
+       * @protected
+       * @override
+       */
+      _tabindexChanged(tabindex) {
+        this.__forwardTabIndex(tabindex);
+      }
 
-        if (newNode !== this.defaultNode) {
-          this.initCustomNode(newNode);
+      /** @private */
+      __forwardTabIndex(tabindex) {
+        if (tabindex !== undefined && this.focusElement) {
+          this.focusElement.tabIndex = tabindex;
 
-          this.initNode(newNode);
+          // Preserve tabindex="-1" on the host element
+          if (tabindex !== -1) {
+            this.tabindex = undefined;
+          }
+        }
+
+        if (this.disabled && tabindex) {
+          // If tabindex attribute was changed while component was disabled
+          if (tabindex !== -1) {
+            this._lastTabIndex = tabindex;
+          }
+          this.tabindex = undefined;
         }
       }
-    });
-  }
-}
+    },
+);
 
 /**
  * @license
@@ -19065,6 +19511,7 @@ class ErrorController extends SlotController {
 
         this.__updateHasError();
       },
+      true,
     );
   }
 
@@ -19100,7 +19547,7 @@ class ErrorController extends SlotController {
   }
 
   /**
-   * Override to initialize the newly added custom label.
+   * Override to initialize the newly added custom error message.
    *
    * @param {Node} errorNode
    * @protected
@@ -19118,7 +19565,7 @@ class ErrorController extends SlotController {
   }
 
   /**
-   * Override to cleanup label node when it's removed.
+   * Override to cleanup error message node when it's removed.
    *
    * @param {Node} node
    * @protected
@@ -19131,7 +19578,7 @@ class ErrorController extends SlotController {
     if (!errorNode && node !== this.defaultNode) {
       errorNode = this.attachDefaultNode();
 
-      // Run initializer to update default label and ID.
+      // Run initializer to update default error message ID.
       this.initNode(errorNode);
     }
 
@@ -19179,63 +19626,6 @@ 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.
@@ -19410,7 +19800,7 @@ class FieldAriaController {
 
 /**
  * @license
- * Copyright (c) 2021 Vaadin Ltd.
+ * Copyright (c) 2021 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 
@@ -19420,7 +19810,7 @@ class FieldAriaController {
 class HelperController extends SlotController {
   constructor(host) {
     // Do not provide slot factory, as only create helper lazily.
-    super(host, 'helper');
+    super(host, 'helper', null, null, true);
   }
 
   get helperId() {
@@ -19491,7 +19881,11 @@ class HelperController extends SlotController {
       return false;
     }
 
-    return helperNode.children.length > 0 || this.__isNotEmpty(helperNode.textContent);
+    return (
+      helperNode.children.length > 0 ||
+      (helperNode.nodeType === Node.ELEMENT_NODE && customElements.get(helperNode.localName)) ||
+      this.__isNotEmpty(helperNode.textContent)
+    );
   }
 
   /**
@@ -19617,6 +20011,7 @@ class LabelController extends SlotController {
 
         this.__observeLabel(node);
       },
+      true,
     );
   }
 
@@ -19791,7 +20186,7 @@ class LabelController extends SlotController {
  * A mixin to provide label via corresponding property or named slot.
  *
  * @polymerMixin
- * @mixes SlotMixin
+ * @mixes ControllerMixin
  */
 const LabelMixin = dedupingMixin(
   (superclass) =>
@@ -19823,6 +20218,12 @@ const LabelMixin = dedupingMixin(
         super();
 
         this._labelController = new LabelController(this);
+      }
+
+      /** @protected */
+      ready() {
+        super.ready();
+
         this.addController(this._labelController);
       }
 
@@ -19870,12 +20271,17 @@ const ValidateMixin = dedupingMixin(
       }
 
       /**
-       * Returns true if field is valid, and sets `invalid` based on the field validity.
+       * Validates the field and sets the `invalid` property based on the result.
+       *
+       * The method fires a `validated` event with the result of the validation.
        *
        * @return {boolean} True if the value is valid.
        */
       validate() {
-        return !(this.invalid = !this.checkValidity());
+        const isValid = this.checkValidity();
+        this._setInvalid(!isValid);
+        this.dispatchEvent(new CustomEvent('validated', { detail: { valid: isValid } }));
+        return isValid;
       }
 
       /**
@@ -19886,6 +20292,35 @@ 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.
+       */
     },
 );
 
@@ -19974,10 +20409,6 @@ 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);
@@ -19989,6 +20420,15 @@ 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) {
@@ -20044,7 +20484,7 @@ const FieldMixin = (superclass) =>
     }
 
     /**
-     * @param {boolean} required
+     * @param {boolean} invalid
      * @protected
      */
     _invalidChanged(invalid) {
@@ -20244,13 +20684,23 @@ 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);
       }
 
@@ -20265,6 +20715,7 @@ 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);
@@ -20274,6 +20725,7 @@ const InputMixin = dedupingMixin(
       /**
        * Remove event listeners from the input element instance.
        * @param {!HTMLElement} input
+       * @protected
        */
       _removeInputListeners(input) {
         input.removeEventListener('input', this._boundOnInput);
@@ -20287,7 +20739,6 @@ 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.
@@ -20304,7 +20755,11 @@ const InputMixin = dedupingMixin(
         }
       }
 
-      /** @protected */
+      /**
+       * @param {HTMLElement | undefined} input
+       * @param {HTMLElement | undefined} oldInput
+       * @protected
+       */
       _inputElementChanged(input, oldInput) {
         if (input) {
           this._addInputListeners(input);
@@ -20313,17 +20768,43 @@ 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) {
+        this._setHasInputValue(event);
+        this._onInput(event);
+      }
+
       /**
        * An input event listener used to update the field value.
-       * Override this method with an actual implementation.
-       * @param {Event} _event
+       *
+       * @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 = event.target.value;
+        this.value = target.value;
         this.__userInput = false;
       }
 
@@ -20332,12 +20813,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
        */
@@ -20350,10 +20831,9 @@ const InputMixin = dedupingMixin(
        * @param {string | undefined} newVal
        * @param {string | undefined} oldVal
        * @protected
-       * @override
        */
       _valueChanged(newVal, oldVal) {
-        this._toggleHasValue(newVal !== '' && newVal != null);
+        this._toggleHasValue(this._hasValue);
 
         // Setting initial value to empty string, do nothing.
         if (newVal === '' && oldVal === undefined) {
@@ -20368,6 +20848,30 @@ 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 !== '';
+      }
+
+      /**
+       * Sets the `_hasInputValue` property based on the `input` event.
+       *
+       * @param {InputEvent} event
+       * @protected
+       */
+      _setHasInputValue(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;
+      }
     },
 );
 
@@ -20439,26 +20943,32 @@ 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(${this.constructor.constraints.join(', ')})`);
+        this._createMethodObserver(`_constraintsChanged(stateTarget, ${this.constructor.constraints.join(', ')})`);
       }
 
       /**
        * Override this method to implement custom validation constraints.
+       * @param {HTMLElement | undefined} stateTarget
        * @param {unknown[]} constraints
        * @protected
        */
-      _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) {
+      _constraintsChanged(stateTarget, ...constraints) {
+        // The input element's validity cannot be determined until
+        // all the necessary constraint attributes aren't set on it.
+        if (!stateTarget) {
           return;
         }
 
-        if (this._hasValidConstraints(constraints)) {
+        const hasConstraints = this._hasValidConstraints(constraints);
+        const isLastConstraintRemoved = this.__previousHasConstraints && !hasConstraints;
+
+        if ((this._hasValue || this.invalid) && hasConstraints) {
           this.validate();
-        } else {
-          this.invalid = false;
+        } else if (isLastConstraintRemoved) {
+          this._setInvalid(false);
         }
+
+        this.__previousHasConstraints = hasConstraints;
       }
 
       /**
@@ -20493,6 +21003,82 @@ const InputConstraintsMixin = dedupingMixin(
     },
 );
 
+/**
+ * @license
+ * Copyright (c) 2021 - 2022 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+
+const stylesMap = new WeakMap();
+
+/**
+ * Get all the styles inserted into root.
+ * @param {DocumentOrShadowRoot} root
+ * @return {Set<string>}
+ */
+function getRootStyles(root) {
+  if (!stylesMap.has(root)) {
+    stylesMap.set(root, new Set());
+  }
+
+  return stylesMap.get(root);
+}
+
+/**
+ * Insert styles into the root.
+ * @param {string} styles
+ * @param {DocumentOrShadowRoot} root
+ */
+function insertStyles(styles, root) {
+  const style = document.createElement('style');
+  style.textContent = styles;
+
+  if (root === document) {
+    document.head.appendChild(style);
+  } else {
+    root.insertBefore(style, root.firstChild);
+  }
+}
+
+/**
+ * Mixin to insert styles into the outer scope to handle slotted components.
+ * This is useful e.g. to hide native `<input type="number">` controls.
+ *
+ * @polymerMixin
+ */
+const SlotStylesMixin = dedupingMixin(
+  (superclass) =>
+    class SlotStylesMixinClass extends superclass {
+      /**
+       * List of styles to insert into root.
+       * @protected
+       */
+      get slotStyles() {
+        return {};
+      }
+
+      /** @protected */
+      connectedCallback() {
+        super.connectedCallback();
+
+        this.__applySlotStyles();
+      }
+
+      /** @private */
+      __applySlotStyles() {
+        const root = this.getRootNode();
+        const rootStyles = getRootStyles(root);
+
+        this.slotStyles.forEach((styles) => {
+          if (!rootStyles.has(styles)) {
+            insertStyles(styles, root);
+            rootStyles.add(styles);
+          }
+        });
+      }
+    },
+);
+
 /**
  * @license
  * Copyright (c) 2021 - 2022 Vaadin Ltd.
@@ -20507,13 +21093,31 @@ const InputConstraintsMixin = dedupingMixin(
  * @mixes FieldMixin
  * @mixes InputConstraintsMixin
  * @mixes KeyboardMixin
+ * @mixes SlotStylesMixin
  */
 const InputControlMixin = (superclass) =>
-  class InputControlMixinClass extends DelegateFocusMixin(
-    InputConstraintsMixin(FieldMixin(KeyboardMixin(superclass))),
+  class InputControlMixinClass extends SlotStylesMixin(
+    DelegateFocusMixin(InputConstraintsMixin(FieldMixin(KeyboardMixin(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-]"`
+         * @attr {string} allowed-char-pattern
+         */
+        allowedCharPattern: {
+          type: String,
+          observer: '_allowedCharPatternChanged',
+        },
+
         /**
          * If true, the input text gets fully selected when the field is focused using click or touch / tap.
          */
@@ -20571,6 +21175,14 @@ 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.
@@ -20582,12 +21194,26 @@ const InputControlMixin = (superclass) =>
       return null;
     }
 
+    /** @protected */
+    get slotStyles() {
+      // Needed for Safari, where ::slotted(...)::placeholder does not work
+      return [
+        `
+          :is(input[slot='input'], textarea[slot='textarea'])::placeholder {
+            font: inherit;
+            color: inherit;
+          }
+        `,
+      ];
+    }
+
     /** @protected */
     ready() {
       super.ready();
 
       if (this.clearElement) {
         this.clearElement.addEventListener('click', (e) => this._onClearButtonClick(e));
+        this.clearElement.addEventListener('mousedown', (e) => this._onClearButtonMouseDown(e));
       }
     }
 
@@ -20597,10 +21223,20 @@ const InputControlMixin = (superclass) =>
      */
     _onClearButtonClick(event) {
       event.preventDefault();
-      this.inputElement.focus();
       this.__clear();
     }
 
+    /**
+     * @param {Event} event
+     * @protected
+     */
+    _onClearButtonMouseDown(event) {
+      event.preventDefault();
+      if (!isTouch) {
+        this.inputElement.focus();
+      }
+    }
+
     /**
      * Override an event listener from `DelegateFocusMixin`.
      * @param {FocusEvent} event
@@ -20663,6 +21299,115 @@ 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.
      *
@@ -20701,14 +21446,13 @@ class InputController extends SlotController {
         }
 
         // Ensure every instance has unique ID
-        const uniqueId = (InputController._uniqueInputId = 1 + InputController._uniqueInputId || 0);
-        host._inputId = `${host.localName}-${uniqueId}`;
-        node.id = host._inputId;
+        node.id = this.defaultId;
 
         if (typeof callback === 'function') {
           callback(node);
         }
       },
+      true,
     );
   }
 }
@@ -20890,7 +21634,9 @@ class VirtualKeyboardController {
  * @param {function(new:HTMLElement)} subclass
  */
 const DatePickerMixin = (subclass) =>
-  class VaadinDatePickerMixin extends ControllerMixin(DelegateFocusMixin(InputMixin(KeyboardMixin(subclass)))) {
+  class VaadinDatePickerMixin extends ControllerMixin(
+    DelegateFocusMixin(InputConstraintsMixin(KeyboardMixin(subclass))),
+  ) {
     static get properties() {
       return {
         /**
@@ -20919,7 +21665,6 @@ const DatePickerMixin = (subclass) =>
          */
         value: {
           type: String,
-          observer: '_valueChanged',
           notify: true,
           value: '',
         },
@@ -20975,13 +21720,6 @@ 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
@@ -21037,6 +21775,16 @@ const DatePickerMixin = (subclass) =>
          *   // Translation of the Cancel button text.
          *   cancel: 'Cancel',
          *
+         *   // Used for adjusting the year value when parsing dates with short years.
+         *   // The year values between 0 and 99 are evaluated and adjusted.
+         *   // Example: for a referenceDate of 1970-10-30;
+         *   //   dateToBeParsed: 40-10-30, result: 1940-10-30
+         *   //   dateToBeParsed: 80-10-30, result: 1980-10-30
+         *   //   dateToBeParsed: 10-10-30, result: 2010-10-30
+         *   // Supported date format: ISO 8601 `"YYYY-MM-DD"` (default)
+         *   // The default value is the current date.
+         *   referenceDate: '',
+         *
          *   // A function to format given `Object` as
          *   // date string. Object is in the format `{ day: ..., month: ..., year: ... }`
          *   // Note: The argument month is 0-based. This means that January = 0 and December = 11.
@@ -21090,11 +21838,12 @@ const DatePickerMixin = (subclass) =>
               calendar: 'Calendar',
               today: 'Today',
               cancel: 'Cancel',
-              formatDate: (d) => {
+              referenceDate: '',
+              formatDate(d) {
                 const yearStr = String(d.year).replace(/\d+/, (y) => '0000'.substr(y.length) + y);
                 return [d.month + 1, d.day, yearStr].join('/');
               },
-              parseDate: (text) => {
+              parseDate(text) {
                 const parts = text.split('/');
                 const today = new Date();
                 let date,
@@ -21102,12 +21851,13 @@ const DatePickerMixin = (subclass) =>
                   year = today.getFullYear();
 
                 if (parts.length === 3) {
+                  month = parseInt(parts[0]) - 1;
+                  date = parseInt(parts[1]);
                   year = parseInt(parts[2]);
                   if (parts[2].length < 3 && year >= 0) {
-                    year += year < 50 ? 2000 : 1900;
+                    const usedReferenceDate = this.referenceDate ? parseDate(this.referenceDate) : new Date();
+                    year = getAdjustedYear(usedReferenceDate, year, month, date);
                   }
-                  month = parseInt(parts[0]) - 1;
-                  date = parseInt(parts[1]);
                 } else if (parts.length === 2) {
                   month = parseInt(parts[0]) - 1;
                   date = parseInt(parts[1]);
@@ -21137,7 +21887,6 @@ const DatePickerMixin = (subclass) =>
          */
         min: {
           type: String,
-          observer: '_minChanged',
         },
 
         /**
@@ -21151,28 +21900,26 @@ const DatePickerMixin = (subclass) =>
          */
         max: {
           type: String,
-          observer: '_maxChanged',
         },
 
         /**
          * The earliest date that can be selected. All earlier dates will be disabled.
-         * @type {Date | string}
+         * @type {Date | undefined}
          * @protected
          */
         _minDate: {
           type: Date,
-          // Null does not work here because minimizer passes undefined to overlay (#351)
-          value: '',
+          computed: '__computeMinOrMaxDate(min)',
         },
 
         /**
          * The latest date that can be selected. All later dates will be disabled.
-         * @type {Date | string}
+         * @type {Date | undefined}
          * @protected
          */
         _maxDate: {
           type: Date,
-          value: '',
+          computed: '__computeMinOrMaxDate(max)',
         },
 
         /** @private */
@@ -21187,12 +21934,6 @@ const DatePickerMixin = (subclass) =>
           value: isIOS,
         },
 
-        /** @private */
-        _webkitOverflowScroll: {
-          type: Boolean,
-          value: document.createElement('div').style.webkitOverflowScrolling === '',
-        },
-
         /** @private */
         _focusOverlayOnOpen: Boolean,
 
@@ -21208,6 +21949,10 @@ 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,
@@ -21268,18 +22013,13 @@ const DatePickerMixin = (subclass) =>
 
       if (!this.opened) {
         if (this.autoOpenDisabled) {
-          const parsedDate = this._getParsedDate();
-          if (this._isValidDate(parsedDate)) {
-            this._selectDate(parsedDate);
-          }
+          this._selectParsedOrFocusedDate();
         }
 
-        if (this.inputElement.value === '' && this.__dispatchChange) {
-          this.validate();
+        this.validate();
+
+        if (this._inputValue === '' && this.value !== '') {
           this.value = '';
-          this.__dispatchChange = false;
-        } else {
-          this.validate();
         }
       }
     }
@@ -21348,14 +22088,19 @@ 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.bind(this));
+      this._overlayContent.addEventListener('close', () => {
+        this._close();
+      });
+
       this._overlayContent.addEventListener('focus-input', this._focusAndSelect.bind(this));
 
       // User confirmed selected date by clicking the calendar.
@@ -21364,34 +22109,29 @@ const DatePickerMixin = (subclass) =>
 
         this._selectDate(e.detail.date);
 
-        this._close(e);
+        this._close();
       });
 
-      // User confirmed selected date by pressing Enter or Today.
+      // User confirmed selected date by pressing Enter, Space, or Today.
       this._overlayContent.addEventListener('date-selected', (e) => {
-        this.__userConfirmedDate = true;
+        // Reset if a date is deselected.
+        this.__userConfirmedDate = !!e.detail.date;
 
         this._selectDate(e.detail.date);
       });
 
-      // Keep focus attribute in focusElement for styling
+      // Set focus-ring attribute when moving focus to the overlay
+      // by pressing Tab or arrow key, after opening it on click.
       this._overlayContent.addEventListener('focusin', () => {
-        this._setFocused(true);
+        if (this._keyboardActive) {
+          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)
      *
@@ -21402,7 +22142,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;
@@ -21418,6 +22158,51 @@ 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.
@@ -21437,10 +22222,7 @@ const DatePickerMixin = (subclass) =>
     }
 
     /** @private */
-    _close(e) {
-      if (e) {
-        e.stopPropagation();
-      }
+    _close() {
       this._focus();
       this.close();
     }
@@ -21452,21 +22234,6 @@ const DatePickerMixin = (subclass) =>
       });
     }
 
-    /** @private */
-    _parseDate(str) {
-      // Parsing with RegExp to ensure correct format
-      const parts = /^([-+]\d{1}|\d{2,4}|[-+]\d{6})-(\d{1,2})-(\d{1,2})$/.exec(str);
-      if (!parts) {
-        return;
-      }
-
-      const date = new Date(0, 0); // Wrong date (1900-01-01), but with midnight in local time
-      date.setFullYear(parseInt(parts[1], 10));
-      date.setMonth(parseInt(parts[2], 10) - 1);
-      date.setDate(parseInt(parts[3], 10));
-      return date;
-    }
-
     /** @private */
     // eslint-disable-next-line max-params
     _isNoInput(inputElement, fullscreen, ios, i18n, opened, autoOpenDisabled) {
@@ -21569,48 +22336,47 @@ const DatePickerMixin = (subclass) =>
       }
     }
 
-    /** @private */
-    _handleDateChange(property, value, oldValue) {
-      if (!value) {
-        this[property] = '';
-        return;
-      }
+    /**
+     * 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 = parseDate(value);
 
-      const date = this._parseDate(value);
-      if (!date) {
+      if (value && !newDate) {
+        // The new value cannot be parsed, revert the old value.
         this.value = oldValue;
         return;
       }
-      if (!dateEquals(this[property], date)) {
-        this[property] = date;
-        if (this.value) {
-          this.validate();
-        }
-      }
-    }
-
-    /** @private */
-    _valueChanged(value, oldValue) {
-      this._handleDateChange('_selectedDate', value, oldValue);
 
-      this._toggleHasValue(!!value);
-    }
+      if (value) {
+        if (!dateEquals(this._selectedDate, newDate)) {
+          // Update the date instance only if the date has actually changed.
+          this._selectedDate = newDate;
 
-    /** @private */
-    _minChanged(value, oldValue) {
-      this._handleDateChange('_minDate', value, oldValue);
-    }
+          if (oldValue !== undefined) {
+            // Validate only if `value` changes after initialization.
+            this.validate();
+          }
+        }
+      } else {
+        this._selectedDate = null;
+      }
 
-    /** @private */
-    _maxChanged(value, oldValue) {
-      this._handleDateChange('_maxDate', value, oldValue);
+      this._toggleHasValue(this._hasValue);
     }
 
     /** @protected */
     _onOverlayOpened() {
-      this._openedWithFocusRing = this.hasAttribute('focus-ring');
-
-      const parsedInitialPosition = this._parseDate(this.initialPosition);
+      const parsedInitialPosition = parseDate(this.initialPosition);
 
       const initialPosition =
         this._selectedDate || this._overlayContent.initialPosition || parsedInitialPosition || new Date();
@@ -21629,10 +22395,6 @@ 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;
@@ -21646,25 +22408,6 @@ 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
@@ -21691,13 +22434,6 @@ 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;
@@ -21713,11 +22449,6 @@ 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 */
@@ -21770,10 +22501,7 @@ 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.inputElement.value === '' &&
-        !(event.detail && event.detail.sourceEvent && event.detail.sourceEvent.__fromClearButton)
-      ) {
+      if (this._inputValue === '') {
         this.__dispatchChange = true;
       }
 
@@ -21860,7 +22588,7 @@ const DatePickerMixin = (subclass) =>
             if (e.shiftKey) {
               this._overlayContent.focusCancel();
             } else {
-              this._overlayContent.focusDate(this._focusedDate);
+              this._overlayContent.focusDateElement();
             }
           }
           break;
@@ -21875,21 +22603,15 @@ const DatePickerMixin = (subclass) =>
      * @override
      */
     _onEnter(_event) {
-      const parsedDate = this._getParsedDate();
-      const isValidDate = this._isValidDate(parsedDate);
+      const oldValue = this.value;
       if (this.opened) {
-        if (this._overlayInitialized && this._overlayContent.focusedDate && isValidDate) {
-          this._selectDate(this._overlayContent.focusedDate);
-        }
+        // Closing will implicitly select parsed or focused date
         this.close();
-      } else if (!isValidDate && this.inputElement.value !== '') {
-        this.validate();
       } else {
-        const oldValue = this.value;
         this._selectParsedOrFocusedDate();
-        if (oldValue === this.value) {
-          this.validate();
-        }
+      }
+      if (oldValue === this.value) {
+        this.validate();
       }
     }
 
@@ -21931,7 +22653,7 @@ const DatePickerMixin = (subclass) =>
     /** @private */
     _getParsedDate(inputValue = this._inputValue) {
       const dateObject = this.i18n.parseDate && this.i18n.parseDate(inputValue);
-      const parsedDate = dateObject && this._parseDate(`${dateObject.year}-${dateObject.month + 1}-${dateObject.day}`);
+      const parsedDate = dateObject && parseDate(`${dateObject.year}-${dateObject.month + 1}-${dateObject.day}`);
       return parsedDate;
     }
 
@@ -21953,7 +22675,7 @@ const DatePickerMixin = (subclass) =>
 
     /** @private */
     _userInputValueChanged() {
-      if (this.opened && this._inputValue) {
+      if (this._inputValue) {
         const parsedDate = this._getParsedDate();
 
         if (this._isValidDate(parsedDate)) {
@@ -21971,6 +22693,11 @@ const DatePickerMixin = (subclass) =>
       return this.$.overlay.content.querySelector('#overlay-content');
     }
 
+    /** @private */
+    __computeMinOrMaxDate(dateString) {
+      return parseDate(dateString);
+    }
+
     /**
      * Fired when the user commits a value change.
      *
@@ -22082,12 +22809,13 @@ 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/ds/customization/styling-components) documentation.
+ * See [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/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
@@ -22141,7 +22869,7 @@ class DatePicker extends DatePickerMixin(InputControlMixin(ThemableMixin(Element
         fullscreen$="[[_fullscreen]]"
         theme$="[[__getOverlayTheme(_theme, _overlayInitialized)]]"
         on-vaadin-overlay-open="_onOverlayOpened"
-        on-vaadin-overlay-close="_onOverlayClosed"
+        on-vaadin-overlay-closing="_onOverlayClosed"
         restore-focus-on-close
         restore-focus-node="[[inputElement]]"
         disable-upgrade
@@ -22162,6 +22890,8 @@ class DatePicker extends DatePickerMixin(InputControlMixin(ThemableMixin(Element
           ></vaadin-date-picker-overlay-content>
         </template>
       </vaadin-date-picker-overlay>
+
+      <slot name="tooltip"></slot>
     `;
   }
 
@@ -22188,6 +22918,11 @@ class DatePicker extends DatePickerMixin(InputControlMixin(ThemableMixin(Element
     );
     this.addController(new LabelledInputController(this.inputElement, this._labelController));
 
+    this._tooltipController = new TooltipController(this);
+    this.addController(this._tooltipController);
+    this._tooltipController.setPosition('top');
+    this._tooltipController.setShouldShow((target) => !target.opened);
+
     const toggleButton = this.shadowRoot.querySelector('[part="toggle-button"]');
     toggleButton.addEventListener('mousedown', (e) => e.preventDefault());
   }
@@ -22201,11 +22936,6 @@ 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();
     }
@@ -22333,6 +23063,7 @@ const HelperFilters = class {
     this.modalCloseEvent();
     this.showClearButton = true;
     this.filterSelectionHandler(this.filterData);
+    console.log(this.showClearButton);
   }
   resetSearch() {
     this.showClearButton = false;
@@ -22349,7 +23080,7 @@ const HelperFilters = class {
     this.filterData.filterToCalendar = new Date(event.target.value).toISOString();
   }
   render() {
-    return (index.h("div", { class: "HelperFilters", ref: el => this.stylingContainer = el }, index.h("div", { class: "FilterButtonsWrapper" }, index.h("button", { class: "FilterOpen", onClick: () => this.toggleFilterModal() }, translate$2('filterOpen', this.language)), (this.showClearButton || this.quickFiltersActive) ?
+    return (index.h("div", { class: "HelperFilters", ref: el => this.stylingContainer = el }, index.h("div", { class: "FilterButtonsWrapper" }, index.h("button", { class: "FilterOpen", onClick: () => this.toggleFilterModal() }, translate$2('filterOpen', this.language)), console.log('in filter Open', this.showClearButton, this.quickFiltersActive), (this.showClearButton || this.quickFiltersActive) ?
       index.h("button", { class: "FilterClear", onClick: () => this.resetSearch() }, translate$2('filterClear', this.language))
       :
         null), index.h("helper-modal", { "title-modal": "Filter Modal", visible: this.showFilterModal, "client-styling": this.clientStyling, "client-styling-url-content": this.clientStylingUrlContent }, index.h("div", { class: "FilterModalHeader" }, index.h("h3", { class: "FilterModalTitle" }, this.activateTicketSearch ? translate$2('filterModalTicketTitle', this.language) : translate$2('filterModalDrawTitle', this.language))), index.h("div", { class: "FilterModalBody" }, index.h("input", { id: "FilterById", type: "text", value: this.filterData.ticketDrawId, onInput: (event) => this.handleTicketDrawId(event), class: "FilterModalSearch", placeholder: this.activateTicketSearch ? translate$2('filterTicketPlaceholder', this.language) : translate$2('filterDrawPlaceholder', this.language) }), index.h("p", null, translate$2('filterOrDate', this.language)), index.h("div", { class: "FilterCalendarWrapper" }, index.h("vaadin-date-picker", { value: this.filterData.filterFromCalendar, onChange: (event) => this.handleFilterFrom(event), placeholder: translate$2('filterFromCalendar', this.language), class: "VaadinDatePicker" }), index.h("vaadin-date-picker", { value: this.filterData.filterToCalendar, onChange: (event) => this.handleFilterTo(event), placeholder: translate$2('filterToCalendar', this.language), class: "VaadinDatePicker" }))), index.h("div", { class: "FilterModalFooter" }, index.h("button", { class: "FilterModalButton", onClick: () => this.filterSearch() }, translate$2('filterModalButton', this.language))))));
@@ -22394,13 +23125,47 @@ const TRANSLATIONS = {
     ticketAmount: 'Valoarea biletului',
     winUpTo: 'Poti castiga'
   },
+  fr: {
+    drawResultsHeader: 'Résultats du dernier tirage',
+    drawId: 'ID de tirage',
+    drawName: 'Nom du jeu',
+    drawDate: 'Date du tirage',
+    drawNumbersGridDraw: 'Tirage des numéros Grille',
+    drawNumbersGridTicket: 'Tirage des numéros Grille',
+    ticketResult: 'Résultat du ticket',
+    amountWon: 'Montant gagné',
+    numberOfDraws: 'Nombre de tirages',
+    multiplier: 'Multiplicateur',
+    ticketPurchaseDate: 'Date d\'achat du billet',
+    ticketStatus: 'Statut du ticket',
+    ticketId: 'ID de billets',
+    ticketAmount: 'Montant du billet',
+    winUpTo: 'Gagnez jusqu\'à'
+  },
+  ar: {
+    drawResultsHeader: 'نتائج آخر سحب',
+    drawId: 'معرّف السحب',
+    drawName: 'اسم اللعبة',
+    drawDate: 'تاريخ السحب',
+    drawNumbersGridDraw: 'شبكة أرقام السحب',
+    drawNumbersGridTicket: 'شبكة أرقام السحب',
+    ticketResult: 'نتيجة التذكرة',
+    amountWon: 'المبلغ الذي تم ربحه',
+    numberOfDraws: 'عدد السحوبات',
+    multiplier: 'مضاعف',
+    ticketPurchaseDate: 'تاريخ شراء التذكرة',
+    ticketStatus: 'حالة التذكرة',
+    ticketId: 'معرّف التذكرة',
+    ticketAmount: 'مبلغ التذكرة',
+    winUpTo: 'ربح يصل إلى'
+  }
 };
 const translate = (key, customLang) => {
   const lang = customLang;
   return TRANSLATIONS[lang !== undefined && SUPPORTED_LANGUAGES.includes(lang) ? lang : DEFAULT_LANGUAGE][key];
 };
 
-const lotteryDrawResultsCss = "@import url(\"https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap\");:host{display:block;font-family:\"Roboto\", sans-serif}.TicketInfo{display:flex;flex-direction:row;gap:15px;background-color:#009993;color:#fff;padding:12px;font-size:14px}.DrawResultsArea{margin-top:15px}.DrawResultsArea.TicketDraws .Content{padding:0;border:0}.DrawResultsArea.TicketDraws .DrawResultsBody{padding:0;margin-bottom:5px;border-radius:0;border:0}.DrawResultsSection{max-width:600px;margin:0px auto;border-radius:4px}.DrawResultsHeader{display:flex;justify-content:space-between;padding:10px 20px;background-color:#009993;color:#fff;font-size:14px;border-radius:4px 4px 0 0}.DrawResultsHeader h4{text-transform:uppercase;font-weight:400;margin:0;padding-top:15px}.DrawResultsBody{padding:20px;margin-bottom:5px;border-radius:0 0 4px 4px;border:1px solid #009993}.DrawResultsBody>div{margin:10px 0}.DrawResultsBody .NumberOfDrawsContainer{display:table;width:100%}.DrawNumbersGrid{margin-bottom:15px}.DrawNumbersGrid label{display:block;margin-bottom:10px}.Toggle{cursor:pointer;display:inline-block}.ToggleSwitch{display:inline-block;background:#ccc;border-radius:16px;width:58px;height:24px;position:relative;vertical-align:middle;transition:background 0.25s}.ToggleSwitch:before,.ToggleSwitch:after{content:\"\"}.ToggleSwitch:before{display:block;background:linear-gradient(to bottom, #fff 0%, #eee 100%);border-radius:50%;box-shadow:0 0 0 1px rgba(0, 0, 0, 0.25);width:16px;height:16px;position:absolute;top:4px;left:4px;transition:left 0.25s}.Toggle:hover .ToggleSwitch:before{background:linear-gradient(to bottom, #fff 0%, #fff 100%);box-shadow:0 0 0 1px rgba(0, 0, 0, 0.5)}.ToggleCheckbox:checked+.ToggleSwitch{background:#56c080}.ToggleCheckbox:checked+.ToggleSwitch:before{left:38px}.ToggleCheckbox{position:absolute;visibility:hidden}.Label{position:relative}.DrawTicketsContainer{display:flex;flex-direction:column;margin:20px auto 0}.DrawMultipler{margin-top:15px}.ExpandableBoxes{position:relative;display:flex;flex-direction:column}.ExpandableBox{line-height:12px;font-weight:lighter;width:100%;height:100%;max-height:80px;float:left;margin:0 0 20px 0;border:1px solid #009993;background:#fff;border-radius:4px;padding:10px;box-sizing:border-box;-webkit-transition:all 0.6s ease-in-out;-moz-transition:all 0.6s ease-in-out;-o-transition:all 0.6s ease-in-out;-ms-transition:all 0.6s ease-in-out;transition:all 0.6s ease-in-out;overflow:hidden;box-shadow:rgba(99, 99, 99, 0.2) 0px 2px 8px 0px}.ExpandableBox:last-of-type{margin-bottom:0}.ExpandableBox.ShowBox{max-height:400px;margin:0px 0px 20p 0px}.ExpandableBox.HideBox{width:0;height:0;overflow:hidden;border:none;padding:0;margin:0;opacity:0}";
+const lotteryDrawResultsCss = "@import url(\"https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap\");:host{display:block;font-family:\"Roboto\", sans-serif}.TicketInfo{display:flex;flex-direction:row;gap:15px;background-color:#009993;color:#fff;padding:12px;font-size:14px}.DrawResultsArea{margin-top:15px}.DrawResultsArea.TicketDraws .Content{padding:0;border:0}.DrawResultsArea.TicketDraws .DrawResultsBody{padding:0;margin-bottom:5px;border-radius:0;border:0}.DrawResultsSection{max-width:600px;margin:0px auto;border-radius:4px}.DrawResultsHeader{display:flex;justify-content:space-between;padding:10px 20px;background-color:#009993;color:#fff;font-size:14px;border-radius:4px 4px 0 0}.DrawResultsHeader h4{text-transform:uppercase;font-weight:400;margin:0;padding-top:15px}.DrawResultsBody{padding:20px;margin-bottom:5px;border-radius:0 0 4px 4px;border:1px solid #009993}.DrawResultsBody>div{margin:10px 0}.DrawResultsBody .NumberOfDrawsContainer{display:table;width:100%}.DrawNumbersGrid{display:flex;flex-direction:column;gap:5px}.DrawNumbersGrid label{display:block;margin-bottom:7px}.Toggle{cursor:pointer;display:inline-block}.ToggleSwitch{display:inline-block;background:#ccc;border-radius:16px;width:58px;height:24px;position:relative;vertical-align:middle;transition:background 0.25s}.ToggleSwitch:before,.ToggleSwitch:after{content:\"\"}.ToggleSwitch:before{display:block;background:linear-gradient(to bottom, #fff 0%, #eee 100%);border-radius:50%;box-shadow:0 0 0 1px rgba(0, 0, 0, 0.25);width:16px;height:16px;position:absolute;top:4px;left:4px;transition:left 0.25s}.Toggle:hover .ToggleSwitch:before{background:linear-gradient(to bottom, #fff 0%, #fff 100%);box-shadow:0 0 0 1px rgba(0, 0, 0, 0.5)}.ToggleCheckbox:checked+.ToggleSwitch{background:#56c080}.ToggleCheckbox:checked+.ToggleSwitch:before{left:38px}.ToggleCheckbox{position:absolute;visibility:hidden}.Label{position:relative}.DrawTicketsContainer{display:flex;flex-direction:column;margin:20px auto 0}.DrawMultipler{margin-top:15px}.ExpandableBoxes{position:relative;display:flex;flex-direction:column;border:1px solid #ccc;border-radius:5px;background-color:white}.ExpandableBox{border-bottom:1px solid #ccc;transition:height 300ms ease-in-out;overflow:hidden;height:80px}.ExpandableBox:last-child{border-bottom:0}.ExpandableBoxHeader{position:relative;list-style:none;outline:0;cursor:pointer;text-transform:uppercase;transition:color 300ms ease-in-out;margin-bottom:24px;margin-left:5px}.ShowBox>.ExpandableBoxHeader{color:#009993}.ExpandableBoxHeader::-webkit-details-marker{display:none}.ExpandableBoxHeader:before,.ExpandableBoxHeader:after{content:\"\";position:absolute}.ExpandableBoxHeader:before{right:21px;top:50%;height:2px;margin-top:-1px;width:16px;background:#009993}.ExpandableBoxHeader:after{right:28px;top:50%;height:16px;margin-top:-8px;width:2px;margin-left:-1px;background:#009993;transition:all 300ms ease-in-out}.ShowBox .ExpandableBoxHeader:after{opacity:0;transform:translateY(25%)}.ExpandableBoxBody{padding-top:0;font-weight:lighter;margin-left:5px}.ExpandableBox.ShowBox{height:300px}";
 
 const LotteryDrawResults = class {
   constructor(hostRef) {
@@ -22461,70 +23226,21 @@ const LotteryDrawResults = class {
      * Client custom styling via url content
      */
     this.clientStylingUrlContent = '';
+    /**
+     * Data showing the ticket's draw results details
+     */
+    this.ticketDrawData = '';
     this.multiplier = 3;
     this.isLoading = true;
-    this.rules = {};
-    this.toggleDrawer = [false];
     this.hasErrors = false;
     this.errorText = '';
     this.ticketData = [];
     this.ticketDataLoaded = false;
     this.ticketDraws = [];
-    this.hasDrawNumbers = false;
+    this.toggleDrawer = [false];
     this.limitStylingAppends = false;
-    this.getTicketsData = () => {
-      let url = new URL(`${this.endpoint}/tickets`);
-      let drawOptions = {
-        method: "GET",
-        headers: {
-          'Content-Type': "application/json",
-          'Accept': 'application/json',
-          'Authorization': `Bearer ${this.sessionId}`
-        },
-      };
-      fetch(url.href, drawOptions)
-        .then((response) => {
-        return response.json();
-      })
-        .then((data) => {
-        if (data) {
-          this.ticketData = data;
-          this.ticketDataLoaded = true;
-        }
-        return this.ticketData;
-      }).then((response) => {
-        response.forEach(ticket => {
-          if (ticket.drawResults.length) {
-            ticket.drawResults.forEach(draw => {
-              fetch(`${this.endpoint}/games/${this.gameId}/draws/${draw.drawId}`)
-                .then((response) => {
-                return response.json();
-              })
-                .then((data) => {
-                // check if draw id is unique
-                if (!this.ticketDraws.some(el => el.drawId === draw.drawId)) {
-                  this.ticketDraws.push({ drawId: draw.drawId, drawNumbers: data.winningNumbers });
-                }
-              });
-            });
-          }
-          return this.ticketDraws;
-        });
-      }).then(() => {
-        this.hasDrawNumbers = true;
-      });
-    };
-    this.changeBox = (index) => {
-      this.toggleDrawer = this.toggleDrawer.map((item, itemIndex) => {
-        if (itemIndex == index) {
-          return !item;
-        }
-        return item;
-      });
-      if (index >= this.toggleDrawer.length) {
-        this.toggleDrawer.push(true);
-      }
-    };
+    this.ticketDrawDetails = [];
+    this.ticketDrawDetailsFlag = true;
     this.setClientStyling = () => {
       let sheet = document.createElement('style');
       sheet.innerHTML = this.clientStyling;
@@ -22540,18 +23256,30 @@ const LotteryDrawResults = class {
   }
   connectedCallback() {
     let promises = [];
-    promises.push(this.getGameData());
+    // Split ticket numbers for each grid
+    if (this.ticketNumbers) {
+      this.gridNumbers = JSON.parse(this.ticketNumbers);
+    }
     if (this.drawId) {
       promises.push(this.getDrawData());
     }
-    if (!this.drawMode) {
-      this.getTicketsData();
-    }
     Promise.all(promises)
       .then(() => {
       this.isLoading = false;
+    }).catch((err) => {
+      console.log('error ', err);
+      this.isLoading = false;
     });
   }
+  componentWillRender() {
+    if (this.ticketDrawData && this.ticketDrawDetailsFlag) {
+      this.ticketDrawDetails = JSON.parse(this.ticketDrawData);
+      this.ticketDrawDetails.forEach((drawDetail) => {
+        this.getDrawData(drawDetail.drawId).then((drawData) => drawDetail.drawData = drawData);
+      });
+      this.ticketDrawDetailsFlag = false;
+    }
+  }
   componentDidRender() {
     // start custom styling area
     if (!this.limitStylingAppends && this.stylingContainer) {
@@ -22563,21 +23291,24 @@ const LotteryDrawResults = class {
     }
     // end custom styling area
   }
-  getDrawData(drawID) {
+  getDrawData(drawId) {
+    this.isLoading = true;
     return new Promise((resolve, reject) => {
-      let url = new URL(`${this.endpoint}/games/${this.gameId}/draws/${drawID ? drawID : this.drawId}`);
+      let url = new URL(`${this.endpoint}/games/${this.gameId}/draws/${drawId ? drawId : this.drawId}`);
       fetch(url.href)
         .then((response) => {
         // @TODO EXCEPTIONS
         return response.json();
       })
         .then((data) => {
-        this.drawData = data;
-        resolve(true);
-        this.isLoading = false;
-        if (drawID) {
-          return this.drawData.winningNumbers;
+        if (drawId) {
+          resolve(data);
         }
+        else {
+          this.drawData = data;
+          resolve(true);
+        }
+        this.isLoading = false;
       })
         .catch((err) => {
         reject(err);
@@ -22585,29 +23316,16 @@ const LotteryDrawResults = class {
       });
     });
   }
-  getGameData() {
-    return new Promise((resolve, reject) => {
-      let url = new URL(`${this.endpoint}/games/${this.gameId}`);
-      fetch(url.href)
-        .then((response) => {
-        return response.json();
-      })
-        .then((data) => {
-        this.rules = {
-          maximumAllowed: data.rules.boards[0].maximumAllowed,
-          totalNumbers: data.rules.boards[0].totalNumbers
-        };
-        resolve(true);
-        this.isLoading = false;
-        this.hasErrors = false;
-      })
-        .catch((err) => {
-        this.isLoading = false;
-        this.hasErrors = true;
-        this.errorText = err;
-        reject(err);
-      });
+  drawerToggle(index) {
+    this.toggleDrawer = this.toggleDrawer.map((item, itemIndex) => {
+      if (itemIndex == index) {
+        return !item;
+      }
+      return item;
     });
+    if (index >= this.toggleDrawer.length) {
+      this.toggleDrawer.push(true);
+    }
   }
   render() {
     if (this.isLoading) {
@@ -22619,14 +23337,19 @@ const LotteryDrawResults = class {
     else {
       return (index.h("section", { class: "DrawResultsSection", ref: el => this.stylingContainer = el }, this.drawMode ?
         index.h("div", { class: "DrawResultsArea" }, this.drawData &&
-          index.h("div", null, index.h("div", { class: "DrawResultsHeader" }, index.h("span", null, translate('drawId', this.language), ":  ", this.drawData.id), index.h("span", null, translate('drawDate', this.language), ": ", this.drawData.date.slice(0, 10))), index.h("div", { class: "DrawResultsBody" }, index.h("div", { class: "DrawNumbersGrid" }, index.h("p", null, translate('drawNumbersGridDraw', this.language), "0:"), index.h("div", { class: "BulletContainer" }, index.h("lottery-grid", { "maximum-allowed": this.rules.maximumAllowed, "total-numbers": this.rules.totalNumbers, "selected-numbers": this.drawData.winningNumbers.join(','), "display-selected": true, selectable: false, language: this.language, "grid-type": 'ticket', "client-styling": this.clientStyling, "client-styling-url-content": this.clientStylingUrlContent })), index.h("div", { class: "DrawMultipler" }, index.h("label", { class: "Label" }, translate('multiplier', this.language), " ", this.multiplier))))))
+          index.h("div", null, index.h("div", { class: "DrawResultsHeader" }, index.h("span", null, translate('drawId', this.language), ":  ", this.drawData.id), index.h("span", null, translate('drawDate', this.language), ": ", this.drawData.date.slice(0, 10))), index.h("div", { class: "DrawResultsBody" }, index.h("div", { class: "DrawNumbersGrid" }, index.h("p", null, translate('drawNumbersGridDraw', this.language), "0:"), index.h("div", { class: "BulletContainer" }, index.h("lottery-grid", { "selected-numbers": this.drawData.winningNumbers.join(','), "display-selected": true, selectable: false, language: this.language, "grid-type": 'ticket', "client-styling": this.clientStyling, "client-styling-url-content": this.clientStylingUrlContent })), index.h("div", { class: "DrawMultipler" }, index.h("label", { class: "Label" }, translate('multiplier', this.language), " ", this.multiplier))))))
         :
-          index.h("div", { class: "DrawResultsArea TicketDraws" }, index.h("div", { class: "DrawResultsBody" }, index.h("div", { class: "TicketIdContainer" }, index.h("label", { class: "Label" }, translate('ticketId', this.language), ": ", index.h("span", null, this.ticketId))), index.h("div", { class: "TicketAmountContainer" }, index.h("label", { class: "Label" }, translate('ticketAmount', this.language), " ", index.h("span", null, this.ticketAmount))), index.h("div", { class: "DrawNumbersGrid" }, index.h("label", { class: "Label" }, translate('drawNumbersGridTicket', this.language), "0:"), index.h("div", { class: "BulletContainer" }, index.h("lottery-grid", { "maximum-allowed": this.rules.maximumAllowed, "total-numbers": this.rules.totalNumbers, "selected-numbers": JSON.parse(this.ticketNumbers).join(','), selectable: false, "display-selected": true, language: this.language, "grid-type": 'ticket', "client-styling": this.clientStyling, "client-styling-url-content": this.clientStylingUrlContent }))), index.h("div", { class: "DrawMultipler" }, index.h("label", { class: "Label" }, translate('multiplier', this.language), " ", JSON.stringify(this.ticketMultiplier))), index.h("div", { class: "NumberOfDrawsContainer" }, index.h("label", { class: "Label" }, translate('numberOfDraws', this.language), ": ", this.ticketDrawCount), index.h("div", { class: "DrawTicketsContainer" }, this.ticketData.map((ticket) => index.h("div", { class: "ExpandableBoxes" }, ticket.drawResults.length ?
-            index.h("div", null, ticket.id == this.ticketId && ticket.drawResults.map((item, index$1) => index.h("div", { class: this.toggleDrawer[index$1] ? 'ExpandableBox ShowBox' : 'ExpandableBox', onClick: () => this.changeBox(index$1) }, index.h("div", { class: "TicketResultContainer" }, index.h("p", null, translate('ticketResult', this.language), ": ", item.state)), item.state == 'won' &&
-              index.h("div", { class: "AmountWonContainer" }, index.h("p", null, translate('amountWon', this.language), ": ", Number(item.amount).toLocaleString('en'), " ", item.currency)), index.h("div", { class: "DrawIdContainer" }, index.h("p", null, translate('drawId', this.language), ": ", item.drawId)), index.h("div", { class: "DrawDateContainer" }, index.h("p", null, translate('drawDate', this.language), ": ", item.updatedAt.slice(0, 10), " | ", item.updatedAt.slice(11, 19))), index.h("div", { class: "DrawNumbersGrid" }, this.hasDrawNumbers && this.ticketDraws.map((ticketDraw) => item.drawId && item.drawId === ticketDraw.drawId &&
-              index.h("div", null, index.h("label", { class: "Label" }, translate('drawNumbersGridDraw', this.language), "A:"), index.h("lottery-grid", { "maximum-allowed": this.rules.maximumAllowed, "total-numbers": this.rules.totalNumbers, "selected-numbers": ticketDraw.drawNumbers.join(','), selectable: false, "display-selected": true, language: this.language, "grid-type": 'ticket', "client-styling": this.clientStyling, "client-styling-url-content": this.clientStylingUrlContent })))), index.h("div", { class: "DrawMultipler" }, index.h("label", { class: "Label" }, translate('multiplier', this.language), " ", item.multiplier)))))
-            :
-              index.h("span", null)))))))));
+          index.h("div", { class: "DrawResultsArea TicketDraws" }, index.h("div", { class: "DrawResultsBody" }, index.h("div", { class: "TicketIdContainer" }, index.h("label", { class: "Label" }, translate('ticketId', this.language), ": ", index.h("span", null, this.ticketId))), index.h("div", { class: "TicketAmountContainer" }, index.h("label", { class: "Label" }, translate('ticketAmount', this.language), " ", index.h("span", null, this.ticketAmount))), index.h("div", { class: "DrawNumbersGrid" }, this.gridNumbers.map((grid, index$1) => index.h("div", null, index.h("label", { class: "Label" }, translate('drawNumbersGridTicket', this.language), " ", String.fromCharCode(index$1 + 65), ":"), index.h("div", { class: "BulletContainer" }, index.h("lottery-grid", { "selected-numbers": grid.join(','), selectable: false, "display-selected": true, language: this.language, "grid-type": 'ticket', "client-styling": this.clientStyling, "client-styling-url-content": this.clientStylingUrlContent }))))), index.h("div", { class: "DrawMultipler" }, index.h("label", { class: "Label" }, translate('multiplier', this.language), " ", JSON.stringify(this.ticketMultiplier))), index.h("div", { class: "NumberOfDrawsContainer" }, index.h("label", { class: "Label" }, translate('numberOfDraws', this.language), ": ", this.ticketDrawCount), index.h("div", { class: "DrawTicketsContainer" }, this.ticketDrawDetails && this.ticketDrawDetails.length > 0 &&
+            index.h("div", { class: "ExpandableBoxes" }, this.ticketDrawDetails.map((drawDetail, index$1) => {
+              var _a, _b, _c, _d, _e;
+              return index.h("div", { class: { 'ExpandableBox': true, 'ShowBox': this.toggleDrawer[index$1] }, onClick: () => this.drawerToggle(index$1) }, index.h("div", { class: "ExpandableBoxHeader" }, index.h("div", { class: "TicketResultContainer" }, index.h("p", null, translate('ticketResult', this.language), ": ", drawDetail.state)), drawDetail.state == 'won' &&
+                index.h("div", { class: "AmountWonContainer" }, index.h("p", null, translate('amountWon', this.language), ": ", Number(drawDetail.amount).toLocaleString('en'), " ", drawDetail.currency)), drawDetail.state == 'lost' &&
+                index.h("div", { class: "DrawIdContainer" }, index.h("p", null, translate('drawId', this.language), ": ", drawDetail.drawId))), index.h("div", { class: "ExpandableBoxBody" }, index.h("div", { class: "DrawIdContainer" }, index.h("p", null, translate('drawId', this.language), ": ", drawDetail.drawId)), index.h("div", { class: "DrawDateContainer" }, index.h("p", null, translate('drawDate', this.language), ": ", (_a = drawDetail.drawData) === null || _a === void 0 ? void 0 :
+                _a.date.slice(0, 10), " | ", (_b = drawDetail.drawData) === null || _b === void 0 ? void 0 :
+                _b.date.slice(11, 19))), index.h("div", { class: "DrawNumbersGrid" }, drawDetail.drawData &&
+                index.h("div", { class: 'BulletContainer' }, index.h("label", { class: "Label" }, translate('drawNumbersGridDraw', this.language), " ", String.fromCharCode(index$1 + 10), ":"), index.h("lottery-grid", { "selected-numbers": (_d = (_c = drawDetail.drawData) === null || _c === void 0 ? void 0 : _c.winningNumbers) === null || _d === void 0 ? void 0 : _d.join(','), selectable: false, "display-selected": true, language: this.language, "grid-type": 'ticket', "client-styling": this.clientStyling, "client-styling-url-content": this.clientStylingUrlContent }))), index.h("div", { class: "DrawMultipler" }, index.h("label", { class: "Label" }, translate('multiplier', this.language), " ", (_e = drawDetail.drawData) === null || _e === void 0 ? void 0 :
+                _e.multiplier))));
+            }))))))));
     }
   }
 };
@@ -22634,3 +23357,5 @@ LotteryDrawResults.style = lotteryDrawResultsCss;
 
 exports.helper_filters = HelperFilters;
 exports.lottery_draw_results = LotteryDrawResults;
+
+//# sourceMappingURL=helper-filters_2.cjs.entry.js.map