@everymatrix/general-input 1.22.1 → 1.22.2

package/dist/components/field-mixin.js

@@ -55,26 +55,91 @@ 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},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");
+ */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._$Eu();}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}_$Eu(){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.3");
 
 /**
  * @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$",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};
+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,u=()=>r.createComment(""),d=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);function P(t,i){if(!Array.isArray(t)||!t.hasOwnProperty("raw"))throw Error("invalid template strings array");return void 0!==e?e.createHTML(i):i}const V=(t,i)=>{const s=t.length-1,e=[];let l,r=2===i?"<svg>":"",u=f;for(let i=0;i<s;i++){const s=t[i];let d,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])&&(l=RegExp("</"+c[2],"g")),u=p):void 0!==c[3]&&(u=p):u===p?">"===c[0]?(u=null!=l?l:f,v=-1):void 0===c[1]?v=-2:(v=u.lastIndex-c[2].length,d=c[1],u=void 0===c[3]?p:'"'===c[3]?$:g):u===$||u===g?u=p:u===_||u===m?u=f:(u=p,l=void 0);const w=u===p&&t[i+1].startsWith("/>")?" ":"";r+=u===f?s+h:v>=0?(e.push(d),s.slice(0,v)+o$1+s.slice(v)+n$1+w):s+n$1+(-2===v?(e.push(void 0),i):w);}return [P(t,r+(t[s]||"<?>")+(2===i?"</svg>":"")),e]};class N{constructor({strings:t,_$litType$:i},e){let h;this.parts=[];let r=0,d=0;const c=t.length-1,v=this.parts,[a,f]=V(t,i);if(this.el=N.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[d++];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]?H:"?"===i[1]?L:"@"===i[1]?z:k});}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],u()),C.nextNode(),v.push({type:2,index:++r});h.append(t[i],u());}}}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 S(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 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)._$Co)&&void 0!==l?l:h._$Co=[])[e]=r:s._$Cl=r),void 0!==r&&(i=S(t,r._$AS(t,i.values),r,e)),i}class M{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,u=e[0];for(;void 0!==u;){if(l===u.index){let i;2===u.type?i=new R(n,n.nextSibling,this,t):1===u.type?i=new u.ctor(n,u.name,u.strings,this,t):6===u.type&&(i=new Z(n,this,t)),this._$AV.push(i),u=e[++h];}l!==(null==u?void 0:u.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 R{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=S(this,t,i),d(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&&d(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=N.createElement(P(e.h,e.h[0]),this.options)),e);if((null===(i=this._$AH)||void 0===i?void 0:i._$AD)===o)this._$AH.v(s);else {const t=new M(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 N(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 R(this.k(u()),this.k(u()),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 k{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=S(this,t,i,0),n=!d(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=S(this,e[s+l],i,l),h===T&&(h=this._$AH[l]),n||(n=!d(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 H extends k{constructor(){super(...arguments),this.type=3;}j(t){this.element[this.name]=t===A?void 0:t;}}const I=s$1?s$1.emptyScript:"";class L extends k{constructor(){super(...arguments),this.type=4;}j(t){t&&t!==A?this.element.setAttribute(this.name,I):this.element.removeAttribute(this.name);}}class z extends k{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=S(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){S(this,t);}}const B=i.litHtmlPolyfillSupport;null==B||B(N,R),(null!==(t=i.litHtmlVersions)&&void 0!==t?t:i.litHtmlVersions=[]).push("2.8.0");const D=(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 R(i.insertBefore(u(),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 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");
+ */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=D(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.3");
 
 /**
  * @license
  * Copyright (c) 2017 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
+/**
+ * @polymerMixin
+ */
+const ThemePropertyMixin = (superClass) =>
+  class VaadinThemePropertyMixin extends superClass {
+    static get properties() {
+      return {
+        /**
+         * Helper property with theme attribute value facilitating propagation
+         * in shadow DOM.
+         *
+         * Enables the component implementation to propagate the `theme`
+         * attribute value to the sub-components in Shadow DOM by binding
+         * the sub-component's "theme" attribute to the `theme` property of
+         * the host.
+         *
+         * **NOTE:** Extending the mixin only provides the property for binding,
+         * and does not make the propagation alone.
+         *
+         * See [Styling Components: Sub-components](https://vaadin.com/docs/latest/styling/styling-components/#sub-components).
+         * page for more information.
+         *
+         * @protected
+         */
+        _theme: {
+          type: String,
+          readOnly: true,
+        },
+      };
+    }
+
+    static get observedAttributes() {
+      return [...super.observedAttributes, 'theme'];
+    }
+
+    /** @protected */
+    attributeChangedCallback(name, oldValue, newValue) {
+      super.attributeChangedCallback(name, oldValue, newValue);
+
+      if (name === 'theme') {
+        this._set_theme(newValue);
+      }
+    }
+  };
+
+/**
+ * @license
+ * Copyright (c) 2017 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+
+/**
+ * @typedef {Object} Theme
+ * @property {string} themeFor
+ * @property {CSSResult[]} styles
+ * @property {string | string[]} [include]
+ * @property {string} [moduleId]
+ *
+ * @typedef {CSSResult[] | CSSResult} CSSResultGroup
+ */
+
+/**
+ * @type {Theme[]}
+ */
+const themeRegistry = [];
 
 /**
  * Check if the custom element type has themes applied.
@@ -134,9 +199,170 @@ function registerStyles(themeFor, styles, options = {}) {
 
   if (window.Vaadin && window.Vaadin.styleModules) {
     window.Vaadin.styleModules.registerStyles(themeFor, styles, options);
+  } else {
+    themeRegistry.push({
+      themeFor,
+      styles,
+      include: options.include,
+      moduleId: options.moduleId,
+    });
+  }
+}
+
+/**
+ * Returns all registered themes. By default the themeRegistry is returned as is.
+ * In case the style-modules adapter is imported, the themes are obtained from there instead
+ * @returns {Theme[]}
+ */
+function getAllThemes() {
+  if (window.Vaadin && window.Vaadin.styleModules) {
+    return window.Vaadin.styleModules.getAllThemes();
+  }
+  return themeRegistry;
+}
+
+/**
+ * Returns true if the themeFor string matches the tag name
+ * @param {string} themeFor
+ * @param {string} tagName
+ * @returns {boolean}
+ */
+function matchesThemeFor(themeFor, tagName) {
+  return (themeFor || '').split(' ').some((themeForToken) => {
+    return new RegExp(`^${themeForToken.split('*').join('.*')}$`, 'u').test(tagName);
+  });
+}
+
+/**
+ * Maps the moduleName to an include priority number which is used for
+ * determining the order in which styles are applied.
+ * @param {string} moduleName
+ * @returns {number}
+ */
+function getIncludePriority(moduleName = '') {
+  let includePriority = 0;
+  if (moduleName.startsWith('lumo-') || moduleName.startsWith('material-')) {
+    includePriority = 1;
+  } else if (moduleName.startsWith('vaadin-')) {
+    includePriority = 2;
+  }
+  return includePriority;
+}
+
+/**
+ * Gets an array of CSSResults matching the include property of the theme.
+ * @param {Theme} theme
+ * @returns {CSSResult[]}
+ */
+function getIncludedStyles(theme) {
+  const includedStyles = [];
+  if (theme.include) {
+    [].concat(theme.include).forEach((includeModuleId) => {
+      const includedTheme = getAllThemes().find((s) => s.moduleId === includeModuleId);
+      if (includedTheme) {
+        includedStyles.push(...getIncludedStyles(includedTheme), ...includedTheme.styles);
+      } else {
+        console.warn(`Included moduleId ${includeModuleId} not found in style registry`);
+      }
+    }, theme.styles);
   }
+  return includedStyles;
+}
+
+/**
+ * Includes the styles to the template.
+ * @param {CSSResult[]} styles
+ * @param {HTMLTemplateElement} template
+ */
+function addStylesToTemplate(styles, template) {
+  const styleEl = document.createElement('style');
+  styleEl.innerHTML = styles.map((style) => style.cssText).join('\n');
+  template.content.appendChild(styleEl);
+}
+
+/**
+ * Returns an array of themes that should be used for styling a component matching
+ * the tag name. The array is sorted by the include order.
+ * @param {string} tagName
+ * @returns {Theme[]}
+ */
+function getThemes(tagName) {
+  const defaultModuleName = `${tagName}-default-theme`;
+
+  const themes = getAllThemes()
+    // Filter by matching themeFor properties
+    .filter((theme) => theme.moduleId !== defaultModuleName && matchesThemeFor(theme.themeFor, tagName))
+    .map((theme) => ({
+      ...theme,
+      // Prepend styles from included themes
+      styles: [...getIncludedStyles(theme), ...theme.styles],
+      // Map moduleId to includePriority
+      includePriority: getIncludePriority(theme.moduleId),
+    }))
+    // Sort by includePriority
+    .sort((themeA, themeB) => themeB.includePriority - themeA.includePriority);
+
+  if (themes.length > 0) {
+    return themes;
+  }
+  // No theme modules found, return the default module if it exists
+  return getAllThemes().filter((theme) => theme.moduleId === defaultModuleName);
 }
 
+/**
+ * @polymerMixin
+ * @mixes ThemePropertyMixin
+ */
+const ThemableMixin = (superClass) =>
+  class VaadinThemableMixin extends ThemePropertyMixin(superClass) {
+    /**
+     * Covers PolymerElement based component styling
+     * @protected
+     */
+    static finalize() {
+      super.finalize();
+
+      // Make sure not to run the logic intended for PolymerElement when LitElement is used.
+      if (this.elementStyles) {
+        return;
+      }
+
+      const template = this.prototype._template;
+      if (!template || classHasThemes(this)) {
+        return;
+      }
+
+      addStylesToTemplate(this.getStylesForThis(), template);
+    }
+
+    /**
+     * Covers LitElement based component styling
+     *
+     * @protected
+     */
+    static finalizeStyles(styles) {
+      // The "styles" object originates from the "static get styles()" function of
+      // a LitElement based component. The theme styles are added after it
+      // so that they can override the component styles.
+      const themeStyles = this.getStylesForThis();
+      return styles ? [...super.finalizeStyles(styles), ...themeStyles] : themeStyles;
+    }
+
+    /**
+     * Get styles for the component type
+     *
+     * @private
+     */
+    static getStylesForThis() {
+      const parent = Object.getPrototypeOf(this.prototype);
+      const inheritedThemes = (parent ? parent.constructor.__themes : []) || [];
+      this.__themes = [...inheritedThemes, ...getThemes(this.is)];
+      const themeStyles = this.__themes.flatMap((theme) => theme.styles);
+      // Remove duplicates
+      return themeStyles.filter((style, index) => index === themeStyles.lastIndexOf(style));
+    }
+  };
+
 /**
  * @license
  * Copyright (c) 2017 - 2023 Vaadin Ltd.
@@ -1620,19 +1846,19 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
 */
 
 // Microtask implemented using Mutation Observer
-let microtaskCurrHandle = 0;
-let microtaskLastHandle = 0;
-let microtaskCallbacks = [];
+let microtaskCurrHandle$1 = 0;
+let microtaskLastHandle$1 = 0;
+let microtaskCallbacks$1 = [];
 let microtaskNodeContent = 0;
-let microtaskScheduled = false;
+let microtaskScheduled$1 = false;
 let microtaskNode = document.createTextNode('');
-new window.MutationObserver(microtaskFlush).observe(microtaskNode, {characterData: true});
+new window.MutationObserver(microtaskFlush$1).observe(microtaskNode, {characterData: true});
 
-function microtaskFlush() {
-  microtaskScheduled = false;
-  const len = microtaskCallbacks.length;
+function microtaskFlush$1() {
+  microtaskScheduled$1 = false;
+  const len = microtaskCallbacks$1.length;
   for (let i = 0; i < len; i++) {
-    let cb = microtaskCallbacks[i];
+    let cb = microtaskCallbacks$1[i];
     if (cb) {
       try {
         cb();
@@ -1641,8 +1867,8 @@ function microtaskFlush() {
       }
     }
   }
-  microtaskCallbacks.splice(0, len);
-  microtaskLastHandle += len;
+  microtaskCallbacks$1.splice(0, len);
+  microtaskLastHandle$1 += len;
 }
 
 /**
@@ -1651,7 +1877,7 @@ function microtaskFlush() {
  * @namespace
  * @summary Async interface wrapper around `setTimeout`.
  */
-const timeOut = {
+const timeOut$1 = {
   /**
    * Returns a sub-module with the async interface providing the provided
    * delay.
@@ -1704,7 +1930,7 @@ const timeOut = {
  * @summary Async interface for enqueuing callbacks that run at microtask
  *   timing.
  */
-const microTask = {
+const microTask$1 = {
 
   /**
    * Enqueues a function called at microtask timing.
@@ -1714,12 +1940,12 @@ const microTask = {
    * @return {number} Handle used for canceling task
    */
   run(callback) {
-    if (!microtaskScheduled) {
-      microtaskScheduled = true;
+    if (!microtaskScheduled$1) {
+      microtaskScheduled$1 = true;
       microtaskNode.textContent = microtaskNodeContent++;
     }
-    microtaskCallbacks.push(callback);
-    return microtaskCurrHandle++;
+    microtaskCallbacks$1.push(callback);
+    return microtaskCurrHandle$1++;
   },
 
   /**
@@ -1730,12 +1956,12 @@ const microTask = {
    * @return {void}
    */
   cancel(handle) {
-    const idx = handle - microtaskLastHandle;
+    const idx = handle - microtaskLastHandle$1;
     if (idx >= 0) {
-      if (!microtaskCallbacks[idx]) {
+      if (!microtaskCallbacks$1[idx]) {
         throw new Error('invalid async handle: ' + handle);
       }
-      microtaskCallbacks[idx] = null;
+      microtaskCallbacks$1[idx] = null;
     }
   }
 
@@ -1752,7 +1978,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
 */
 
 /** @const {!AsyncInterface} */
-const microtask = microTask;
+const microtask = microTask$1;
 
 /**
  * Element class mixin that provides basic meta-programming for creating one
@@ -6750,7 +6976,7 @@ const builtCSS = window.ShadyCSS && window.ShadyCSS['cssBuild'];
  * @param {function(new:T)} superClass Class to apply mixin to.
  * @return {function(new:T)} superClass with mixin applied.
  */
-const ElementMixin = dedupingMixin(base => {
+const ElementMixin$1 = dedupingMixin(base => {
   /**
    * @constructor
    * @implements {Polymer_PropertyEffects}
@@ -7688,7 +7914,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
  *   key meta-programming features including template stamping, data-binding,
  *   attribute deserialization, and property change observation
  */
-const PolymerElement = ElementMixin(HTMLElement);
+const PolymerElement = ElementMixin$1(HTMLElement);
 
 const DEV_MODE_CODE_REGEXP =
   /\/\*[\*!]\s+vaadin-dev-mode:start([\s\S]*)vaadin-dev-mode:end\s+\*\*\//i;
@@ -8283,572 +8509,808 @@ const usageStatistics = function() {
 
 /**
  * @license
- * Copyright (c) 2021 - 2023 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ * Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
+ * This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+ * The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+ * The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+ * Code distributed by Google as part of the polymer project is also
+ * subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
  */
 
 /**
- * A mixin to provide disabled property for field components.
+ * @fileoverview
  *
- * @polymerMixin
+ * This module provides a number of strategies for enqueuing asynchronous
+ * tasks. Each sub-module provides a standard `run(fn)` interface that returns a
+ * handle, and a `cancel(handle)` interface for canceling async tasks before
+ * they run.
+ *
+ * @summary Module that provides a number of strategies for enqueuing
+ * asynchronous tasks.
  */
-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);
-      }
+let microtaskCurrHandle = 0;
+let microtaskLastHandle = 0;
+const microtaskCallbacks = [];
+let microtaskScheduled = false;
 
-      /**
-       * @param {boolean} disabled
-       * @protected
-       */
-      _setAriaDisabled(disabled) {
-        if (disabled) {
-          this.setAttribute('aria-disabled', 'true');
-        } else {
-          this.removeAttribute('aria-disabled');
-        }
+function microtaskFlush() {
+  microtaskScheduled = false;
+  const len = microtaskCallbacks.length;
+  for (let i = 0; i < len; i++) {
+    const cb = microtaskCallbacks[i];
+    if (cb) {
+      try {
+        cb();
+      } catch (e) {
+        setTimeout(() => {
+          throw e;
+        });
       }
+    }
+  }
+  microtaskCallbacks.splice(0, len);
+  microtaskLastHandle += len;
+}
 
-      /**
-       * 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();
-        }
-      }
-    },
-);
+/**
+ * Async interface wrapper around `setTimeout`.
+ *
+ * @namespace
+ * @summary Async interface wrapper around `setTimeout`.
+ */
+const timeOut = {
+  /**
+   * Returns a sub-module with the async interface providing the provided
+   * delay.
+   *
+   * @memberof timeOut
+   * @param {number=} delay Time to wait before calling callbacks in ms
+   * @return {!AsyncInterface} An async timeout interface
+   */
+  after(delay) {
+    return {
+      run(fn) {
+        return window.setTimeout(fn, delay);
+      },
+      cancel(handle) {
+        window.clearTimeout(handle);
+      },
+    };
+  },
+  /**
+   * Enqueues a function called in the next task.
+   *
+   * @memberof timeOut
+   * @param {!Function} fn Callback to run
+   * @param {number=} delay Delay in milliseconds
+   * @return {number} Handle used for canceling task
+   */
+  run(fn, delay) {
+    return window.setTimeout(fn, delay);
+  },
+  /**
+   * Cancels a previously enqueued `timeOut` callback.
+   *
+   * @memberof timeOut
+   * @param {number} handle Handle returned from `run` of callback to cancel
+   * @return {void}
+   */
+  cancel(handle) {
+    window.clearTimeout(handle);
+  },
+};
 
 /**
- * @license
- * Copyright (c) 2021 - 2023 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ * Async interface wrapper around `requestAnimationFrame`.
+ *
+ * @namespace
+ * @summary Async interface wrapper around `requestAnimationFrame`.
  */
+const animationFrame = {
+  /**
+   * Enqueues a function called at `requestAnimationFrame` timing.
+   *
+   * @memberof animationFrame
+   * @param {function(number):void} fn Callback to run
+   * @return {number} Handle used for canceling task
+   */
+  run(fn) {
+    return window.requestAnimationFrame(fn);
+  },
+  /**
+   * Cancels a previously enqueued `animationFrame` callback.
+   *
+   * @memberof animationFrame
+   * @param {number} handle Handle returned from `run` of callback to cancel
+   * @return {void}
+   */
+  cancel(handle) {
+    window.cancelAnimationFrame(handle);
+  },
+};
 
 /**
- * A mixin that manages keyboard handling.
- * The mixin subscribes to the keyboard events while an actual implementation
- * for the event handlers is left to the client (a component or another mixin).
+ * Async interface wrapper around `requestIdleCallback`.  Falls back to
+ * `setTimeout` on browsers that do not support `requestIdleCallback`.
  *
- * @polymerMixin
+ * @namespace
+ * @summary Async interface wrapper around `requestIdleCallback`.
  */
-const KeyboardMixin = dedupingMixin(
-  (superclass) =>
-    class KeyboardMixinClass extends superclass {
-      /** @protected */
-      ready() {
-        super.ready();
-
-        this.addEventListener('keydown', (event) => {
-          this._onKeyDown(event);
-        });
-
-        this.addEventListener('keyup', (event) => {
-          this._onKeyUp(event);
-        });
-      }
+const idlePeriod = {
+  /**
+   * Enqueues a function called at `requestIdleCallback` timing.
+   *
+   * @memberof idlePeriod
+   * @param {function(!IdleDeadline):void} fn Callback to run
+   * @return {number} Handle used for canceling task
+   */
+  run(fn) {
+    return window.requestIdleCallback ? window.requestIdleCallback(fn) : window.setTimeout(fn, 16);
+  },
+  /**
+   * Cancels a previously enqueued `idlePeriod` callback.
+   *
+   * @memberof idlePeriod
+   * @param {number} handle Handle returned from `run` of callback to cancel
+   * @return {void}
+   */
+  cancel(handle) {
+    if (window.cancelIdleCallback) {
+      window.cancelIdleCallback(handle);
+    } else {
+      window.clearTimeout(handle);
+    }
+  },
+};
 
-      /**
-       * A handler for the `keydown` event. By default, it calls
-       * separate methods for handling "Enter" and "Escape" keys.
-       * Override the method to implement your own behavior.
-       *
-       * @param {KeyboardEvent} event
-       * @protected
-       */
-      _onKeyDown(event) {
-        switch (event.key) {
-          case 'Enter':
-            this._onEnter(event);
-            break;
-          case 'Escape':
-            this._onEscape(event);
-            break;
-        }
-      }
+/**
+ * Async interface for enqueuing callbacks that run at microtask timing.
+ *
+ * @namespace
+ * @summary Async interface for enqueuing callbacks that run at microtask
+ *   timing.
+ */
+const microTask = {
+  /**
+   * Enqueues a function called at microtask timing.
+   *
+   * @memberof microTask
+   * @param {!Function=} callback Callback to run
+   * @return {number} Handle used for canceling task
+   */
+  run(callback) {
+    if (!microtaskScheduled) {
+      microtaskScheduled = true;
+      queueMicrotask(() => microtaskFlush());
+    }
+    microtaskCallbacks.push(callback);
+    const result = microtaskCurrHandle;
+    microtaskCurrHandle += 1;
+    return result;
+  },
 
-      /**
-       * A handler for the `keyup` event. By default, it does nothing.
-       * Override the method to implement your own behavior.
-       *
-       * @param {KeyboardEvent} _event
-       * @protected
-       */
-      _onKeyUp(_event) {
-        // To be implemented.
+  /**
+   * Cancels a previously enqueued `microTask` callback.
+   *
+   * @memberof microTask
+   * @param {number} handle Handle returned from `run` of callback to cancel
+   * @return {void}
+   */
+  cancel(handle) {
+    const idx = handle - microtaskLastHandle;
+    if (idx >= 0) {
+      if (!microtaskCallbacks[idx]) {
+        throw new Error(`invalid async handle: ${handle}`);
       }
+      microtaskCallbacks[idx] = null;
+    }
+  },
+};
 
-      /**
-       * A handler for the "Enter" key. By default, it does nothing.
-       * Override the method to implement your own behavior.
-       *
-       * @param {KeyboardEvent} _event
-       * @protected
-       */
-      _onEnter(_event) {
-        // To be implemented.
-      }
+/**
+@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
+*/
 
-      /**
-       * A handler for the "Escape" key. By default, it does nothing.
-       * Override the method to implement your own behavior.
-       *
-       * @param {KeyboardEvent} _event
-       * @protected
-       */
-      _onEscape(_event) {
-        // To be implemented.
-      }
-    },
-);
+const debouncerQueue = new Set();
 
 /**
- * @license
- * Copyright (c) 2021 - 2023 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ * @summary Collapse multiple callbacks into one invocation after a timer.
  */
+class Debouncer {
+  /**
+   * Creates a debouncer if no debouncer is passed as a parameter
+   * or it cancels an active debouncer otherwise. The following
+   * example shows how a debouncer can be called multiple times within a
+   * microtask and "debounced" such that the provided callback function is
+   * called once. Add this method to a custom element:
+   *
+   * ```js
+   * import {microTask} from '@vaadin/component-base/src/async.js';
+   * import {Debouncer} from '@vaadin/component-base/src/debounce.js';
+   * // ...
+   *
+   * _debounceWork() {
+   *   this._debounceJob = Debouncer.debounce(this._debounceJob,
+   *       microTask, () => this._doWork());
+   * }
+   * ```
+   *
+   * If the `_debounceWork` method is called multiple times within the same
+   * microtask, the `_doWork` function will be called only once at the next
+   * microtask checkpoint.
+   *
+   * Note: In testing it is often convenient to avoid asynchrony. To accomplish
+   * this with a debouncer, you can use `enqueueDebouncer` and
+   * `flush`. For example, extend the above example by adding
+   * `enqueueDebouncer(this._debounceJob)` at the end of the
+   * `_debounceWork` method. Then in a test, call `flush` to ensure
+   * the debouncer has completed.
+   *
+   * @param {Debouncer?} debouncer Debouncer object.
+   * @param {!AsyncInterface} asyncModule Object with Async interface
+   * @param {function()} callback Callback to run.
+   * @return {!Debouncer} Returns a debouncer object.
+   */
+  static debounce(debouncer, asyncModule, callback) {
+    if (debouncer instanceof Debouncer) {
+      // Cancel the async callback, but leave in debouncerQueue if it was
+      // enqueued, to maintain 1.x flush order
+      debouncer._cancelAsync();
+    } else {
+      debouncer = new Debouncer();
+    }
+    debouncer.setConfig(asyncModule, callback);
+    return debouncer;
+  }
 
-// We consider the keyboard to be active if the window has received a keydown
-// event since the last mousedown event.
-let keyboardActive = false;
+  constructor() {
+    this._asyncModule = null;
+    this._callback = null;
+    this._timer = null;
+  }
 
-// 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 },
-);
+  /**
+   * Sets the scheduler; that is, a module with the Async interface,
+   * a callback and optional arguments to be passed to the run function
+   * from the async module.
+   *
+   * @param {!AsyncInterface} asyncModule Object with Async interface.
+   * @param {function()} callback Callback to run.
+   * @return {void}
+   */
+  setConfig(asyncModule, callback) {
+    this._asyncModule = asyncModule;
+    this._callback = callback;
+    this._timer = this._asyncModule.run(() => {
+      this._timer = null;
+      debouncerQueue.delete(this);
+      this._callback();
+    });
+  }
 
-window.addEventListener(
-  'mousedown',
-  () => {
-    keyboardActive = false;
-  },
-  { capture: true },
-);
+  /**
+   * Cancels an active debouncer and returns a reference to itself.
+   *
+   * @return {void}
+   */
+  cancel() {
+    if (this.isActive()) {
+      this._cancelAsync();
+      // Canceling a debouncer removes its spot from the flush queue,
+      // so if a debouncer is manually canceled and re-debounced, it
+      // will reset its flush order (this is a very minor difference from 1.x)
+      // Re-debouncing via the `debounce` API retains the 1.x FIFO flush order
+      debouncerQueue.delete(this);
+    }
+  }
+
+  /**
+   * Cancels a debouncer's async callback.
+   *
+   * @return {void}
+   */
+  _cancelAsync() {
+    if (this.isActive()) {
+      this._asyncModule.cancel(/** @type {number} */ (this._timer));
+      this._timer = null;
+    }
+  }
+
+  /**
+   * Flushes an active debouncer and returns a reference to itself.
+   *
+   * @return {void}
+   */
+  flush() {
+    if (this.isActive()) {
+      this.cancel();
+      this._callback();
+    }
+  }
+
+  /**
+   * Returns true if the debouncer is active.
+   *
+   * @return {boolean} True if active.
+   */
+  isActive() {
+    return this._timer != null;
+  }
+}
 
 /**
- * Returns the actually focused element by traversing shadow
- * trees recursively to ensure it's the leaf element.
+ * Adds a `Debouncer` to a list of globally flushable tasks.
  *
- * @return {Element}
+ * @param {!Debouncer} debouncer Debouncer to enqueue
+ * @return {void}
  */
-function getDeepActiveElement() {
-  let host = document.activeElement || document.body;
-  while (host.shadowRoot && host.shadowRoot.activeElement) {
-    host = host.shadowRoot.activeElement;
-  }
-  return host;
+function enqueueDebouncer(debouncer) {
+  debouncerQueue.add(debouncer);
 }
 
 /**
- * Returns true if the window has received a keydown
- * event since the last mousedown event.
+ * Flushes any enqueued debouncers
  *
- * @return {boolean}
+ * @return {boolean} Returns whether any debouncers were flushed
  */
-function isKeyboardActive() {
-  return keyboardActive;
+function flushDebouncers() {
+  const didFlush = Boolean(debouncerQueue.size);
+  // If new debouncers are added while flushing, Set.forEach will ensure
+  // newly added ones are also flushed
+  debouncerQueue.forEach((debouncer) => {
+    try {
+      debouncer.flush();
+    } catch (e) {
+      setTimeout(() => {
+        throw e;
+      });
+    }
+  });
+  return didFlush;
 }
 
+const flush = () => {
+  let debouncers;
+  do {
+    debouncers = flushDebouncers();
+  } while (debouncers);
+};
+
 /**
- * Returns true if the element is hidden directly with `display: none` or `visibility: hidden`,
- * false otherwise.
- *
- * The method doesn't traverse the element's ancestors, it only checks for the CSS properties
- * set directly to or inherited by the element.
- *
- * @param {HTMLElement} element
- * @return {boolean}
+ * @license
+ * Copyright (c) 2021 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-function isElementHiddenDirectly(element) {
-  // Check inline style first to save a re-flow.
-  const style = element.style;
-  if (style.visibility === 'hidden' || style.display === 'none') {
-    return true;
-  }
 
-  const computedStyle = window.getComputedStyle(element);
-  if (computedStyle.visibility === 'hidden' || computedStyle.display === 'none') {
-    return true;
+/**
+ * Array of Vaadin custom element classes that have been subscribed to the dir changes.
+ */
+const directionSubscribers = [];
+
+function alignDirs(element, documentDir, elementDir = element.getAttribute('dir')) {
+  if (documentDir) {
+    element.setAttribute('dir', documentDir);
+  } else if (elementDir != null) {
+    element.removeAttribute('dir');
   }
+}
 
-  return false;
+function getDocumentDir() {
+  return document.documentElement.getAttribute('dir');
 }
 
-/**
- * Returns if element `a` has lower tab order compared to element `b`
- * (both elements are assumed to be focusable and tabbable).
- * Elements with tabindex = 0 have lower tab order compared to elements
- * with tabindex > 0.
- * If both have same tabindex, it returns false.
- *
- * @param {HTMLElement} a
- * @param {HTMLElement} b
- * @return {boolean}
- */
-function hasLowerTabOrder(a, b) {
-  // Normalize tabIndexes
-  // e.g. in Firefox `<div contenteditable>` has `tabIndex = -1`
-  const ati = Math.max(a.tabIndex, 0);
-  const bti = Math.max(b.tabIndex, 0);
-  return ati === 0 || bti === 0 ? bti > ati : ati > bti;
+function directionUpdater() {
+  const documentDir = getDocumentDir();
+  directionSubscribers.forEach((element) => {
+    alignDirs(element, documentDir);
+  });
 }
 
+const directionObserver = new MutationObserver(directionUpdater);
+directionObserver.observe(document.documentElement, { attributes: true, attributeFilter: ['dir'] });
+
 /**
- * Merge sort iterator, merges the two arrays into one, sorted by tabindex.
+ * A mixin to handle `dir` attribute based on the one set on the `<html>` element.
  *
- * @param {HTMLElement[]} left
- * @param {HTMLElement[]} right
- * @return {HTMLElement[]}
+ * @polymerMixin
  */
-function mergeSortByTabIndex(left, right) {
-  const result = [];
-  while (left.length > 0 && right.length > 0) {
-    if (hasLowerTabOrder(left[0], right[0])) {
-      result.push(right.shift());
-    } else {
-      result.push(left.shift());
+const DirMixin = (superClass) =>
+  class VaadinDirMixin extends superClass {
+    static get properties() {
+      return {
+        /**
+         * @protected
+         */
+        dir: {
+          type: String,
+          value: '',
+          reflectToAttribute: true,
+          converter: {
+            fromAttribute: (attr) => {
+              return !attr ? '' : attr;
+            },
+            toAttribute: (prop) => {
+              return prop === '' ? null : prop;
+            },
+          },
+        },
+      };
     }
-  }
 
-  return result.concat(left, right);
+    /**
+     * @return {boolean}
+     * @protected
+     */
+    get __isRTL() {
+      return this.getAttribute('dir') === 'rtl';
+    }
+
+    /** @protected */
+    connectedCallback() {
+      super.connectedCallback();
+
+      if (!this.hasAttribute('dir') || this.__restoreSubscription) {
+        this.__subscribe();
+        alignDirs(this, getDocumentDir(), null);
+      }
+    }
+
+    /** @protected */
+    attributeChangedCallback(name, oldValue, newValue) {
+      super.attributeChangedCallback(name, oldValue, newValue);
+      if (name !== 'dir') {
+        return;
+      }
+
+      const documentDir = getDocumentDir();
+
+      // New value equals to the document direction and the element is not subscribed to the changes
+      const newValueEqlDocDir = newValue === documentDir && directionSubscribers.indexOf(this) === -1;
+      // Value was emptied and the element is not subscribed to the changes
+      const newValueEmptied = !newValue && oldValue && directionSubscribers.indexOf(this) === -1;
+      // New value is different and the old equals to document direction and the element is not subscribed to the changes
+      const newDiffValue = newValue !== documentDir && oldValue === documentDir;
+
+      if (newValueEqlDocDir || newValueEmptied) {
+        this.__subscribe();
+        alignDirs(this, documentDir, newValue);
+      } else if (newDiffValue) {
+        this.__unsubscribe();
+      }
+    }
+
+    /** @protected */
+    disconnectedCallback() {
+      super.disconnectedCallback();
+      this.__restoreSubscription = directionSubscribers.includes(this);
+      this.__unsubscribe();
+    }
+
+    /** @protected */
+    _valueToNodeAttribute(node, value, attribute) {
+      // Override default Polymer attribute reflection to match native behavior of HTMLElement.dir property
+      // If the property contains an empty string then it should not create an empty attribute
+      if (attribute === 'dir' && value === '' && !node.hasAttribute('dir')) {
+        return;
+      }
+      super._valueToNodeAttribute(node, value, attribute);
+    }
+
+    /** @protected */
+    _attributeToProperty(attribute, value, type) {
+      // Override default Polymer attribute reflection to match native behavior of HTMLElement.dir property
+      // If the attribute is removed, then the dir property should contain an empty string instead of null
+      if (attribute === 'dir' && !value) {
+        this.dir = '';
+      } else {
+        super._attributeToProperty(attribute, value, type);
+      }
+    }
+
+    /** @private */
+    __subscribe() {
+      if (!directionSubscribers.includes(this)) {
+        directionSubscribers.push(this);
+      }
+    }
+
+    /** @private */
+    __unsubscribe() {
+      if (directionSubscribers.includes(this)) {
+        directionSubscribers.splice(directionSubscribers.indexOf(this), 1);
+      }
+    }
+  };
+
+/**
+ * @license
+ * Copyright (c) 2021 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+
+if (!window.Vaadin) {
+  window.Vaadin = {};
 }
 
 /**
- * Sorts an array of elements by tabindex. Returns a new array.
- *
- * @param {HTMLElement[]} elements
- * @return {HTMLElement[]}
+ * Array of Vaadin custom element classes that have been finalized.
  */
-function sortElementsByTabIndex(elements) {
-  // Implement a merge sort as Array.prototype.sort does a non-stable sort
-  // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort
-  const len = elements.length;
-  if (len < 2) {
-    return elements;
-  }
-  const pivot = Math.ceil(len / 2);
-  const left = sortElementsByTabIndex(elements.slice(0, pivot));
-  const right = sortElementsByTabIndex(elements.slice(pivot));
+if (!window.Vaadin.registrations) {
+  window.Vaadin.registrations = [];
+}
 
-  return mergeSortByTabIndex(left, right);
+if (!window.Vaadin.developmentModeCallback) {
+  window.Vaadin.developmentModeCallback = {};
 }
 
+window.Vaadin.developmentModeCallback['vaadin-usage-statistics'] = function () {
+  usageStatistics();
+};
+
+let statsJob;
+
+const registered = new Set();
+
 /**
- * Returns true if the element is focusable, otherwise false.
- *
- * The list of focusable elements is taken from http://stackoverflow.com/a/1600194/4228703.
- * However, there isn't a definite list, it's up to the browser.
- * The only standard we have is DOM Level 2 HTML https://www.w3.org/TR/DOM-Level-2-HTML/html.html,
- * according to which the only elements that have a `focus()` method are:
- * - HTMLInputElement
- * - HTMLSelectElement
- * - HTMLTextAreaElement
- * - HTMLAnchorElement
- *
- * This notably omits HTMLButtonElement and HTMLAreaElement.
- * Referring to these tests with tabbables in different browsers
- * http://allyjs.io/data-tables/focusable.html
- *
- * @param {HTMLElement} element
- * @return {boolean}
+ * @polymerMixin
+ * @mixes DirMixin
  */
-function isElementFocusable(element) {
-  // The element cannot be focused if its `tabindex` attribute is set to `-1`.
-  if (element.matches('[tabindex="-1"]')) {
-    return false;
-  }
+const ElementMixin = (superClass) =>
+  class VaadinElementMixin extends DirMixin(superClass) {
+    static get version() {
+      return '24.2.3';
+    }
 
-  // Elements that cannot be focused if they have a `disabled` attribute.
-  if (element.matches('input, select, textarea, button, object')) {
-    return element.matches(':not([disabled])');
-  }
+    /** @protected */
+    static finalize() {
+      super.finalize();
 
-  // Elements that can be focused even if they have a `disabled` attribute.
-  return element.matches('a[href], area[href], iframe, [tabindex], [contentEditable]');
-}
+      const { is } = this;
+
+      // Registers a class prototype for telemetry purposes.
+      if (is && !registered.has(is)) {
+        window.Vaadin.registrations.push(this);
+        registered.add(is);
+
+        if (window.Vaadin.developmentModeCallback) {
+          statsJob = Debouncer.debounce(statsJob, idlePeriod, () => {
+            window.Vaadin.developmentModeCallback['vaadin-usage-statistics']();
+          });
+          enqueueDebouncer(statsJob);
+        }
+      }
+    }
+
+    constructor() {
+      super();
+
+      if (document.doctype === null) {
+        console.warn(
+          'Vaadin components require the "standards mode" declaration. Please add <!DOCTYPE html> to the HTML document.',
+        );
+      }
+    }
+  };
 
 /**
- * Returns true if the element is focused, false otherwise.
- *
- * @param {HTMLElement} element
- * @return {boolean}
+ * @license
+ * Copyright (c) 2021 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-function isElementFocused(element) {
-  return element.getRootNode().activeElement === element;
-}
 
 /**
- * Returns the normalized element tabindex. If not focusable, returns -1.
- * It checks for the attribute "tabindex" instead of the element property
- * `tabIndex` since browsers assign different values to it.
- * e.g. in Firefox `<div contenteditable>` has `tabIndex = -1`
+ * Returns an array of ancestor root nodes for the given node.
  *
- * @param {HTMLElement} element
- * @return {number}
+ * A root node is either a document node or a document fragment node (Shadow Root).
+ * The array is collected by a bottom-up DOM traversing that starts with the given node
+ * and involves both the light DOM and ancestor shadow DOM trees.
+ *
+ * @param {Node} node
+ * @return {Node[]}
  */
-function normalizeTabIndex(element) {
-  if (!isElementFocusable(element)) {
-    return -1;
+function getAncestorRootNodes(node) {
+  const result = [];
+
+  while (node) {
+    if (node.nodeType === Node.DOCUMENT_NODE) {
+      result.push(node);
+      break;
+    }
+
+    if (node.nodeType === Node.DOCUMENT_FRAGMENT_NODE) {
+      result.push(node);
+      node = node.host;
+      continue;
+    }
+
+    if (node.assignedSlot) {
+      node = node.assignedSlot;
+      continue;
+    }
+
+    node = node.parentNode;
   }
 
-  const tabIndex = element.getAttribute('tabindex') || 0;
-  return Number(tabIndex);
+  return result;
 }
 
 /**
- * Searches for nodes that are tabbable and adds them to the `result` array.
- * Returns if the `result` array needs to be sorted by tabindex.
+ * Takes a string with values separated by space and returns a set the values
  *
- * @param {Node} node The starting point for the search; added to `result` if tabbable.
- * @param {HTMLElement[]} result
- * @return {boolean}
- * @private
+ * @param {string} value
+ * @return {Set<string>}
  */
-function collectFocusableNodes(node, result) {
-  if (node.nodeType !== Node.ELEMENT_NODE || isElementHiddenDirectly(node)) {
-    // Don't traverse children if the node is not an HTML element or not visible.
-    return false;
-  }
-
-  const element = /** @type {HTMLElement} */ (node);
-  const tabIndex = normalizeTabIndex(element);
-  let needsSort = tabIndex > 0;
-  if (tabIndex >= 0) {
-    result.push(element);
+function deserializeAttributeValue(value) {
+  if (!value) {
+    return new Set();
   }
 
-  let children = [];
-  if (element.localName === 'slot') {
-    children = element.assignedNodes({ flatten: true });
-  } else {
-    // Use shadow root if possible, will check for distributed nodes.
-    children = (element.shadowRoot || element).children;
-  }
-  [...children].forEach((child) => {
-    // Ensure method is always invoked to collect focusable children.
-    needsSort = collectFocusableNodes(child, result) || needsSort;
-  });
-  return needsSort;
+  return new Set(value.split(' '));
 }
 
 /**
- * Returns a tab-ordered array of focusable elements for a root element.
- * The resulting array will include the root element if it is focusable.
- *
- * The method traverses nodes in shadow DOM trees too if any.
+ * Takes a set of string values and returns a string with values separated by space
  *
- * @param {HTMLElement} element
- * @return {HTMLElement[]}
+ * @param {Set<string>} values
+ * @return {string}
  */
-function getFocusableElements(element) {
-  const focusableElements = [];
-  const needsSortByTabIndex = collectFocusableNodes(element, focusableElements);
-  // If there is at least one element with tabindex > 0,
-  // we need to sort the final array by tabindex.
-  if (needsSortByTabIndex) {
-    return sortElementsByTabIndex(focusableElements);
-  }
-  return focusableElements;
+function serializeAttributeValue(values) {
+  return values ? [...values].join(' ') : '';
 }
 
 /**
- * @license
- * Copyright (c) 2021 - 2023 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ * 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));
+}
 
 /**
- * A mixin to handle `focused` and `focus-ring` attributes based on focus.
+ * Removes a value from an attribute containing space-delimited values.
+ * If the value is the last one, the whole attribute is removed.
  *
- * @polymerMixin
+ * @param {HTMLElement} element
+ * @param {string} attr
+ * @param {string} value
  */
-const FocusMixin = dedupingMixin(
-  (superclass) =>
-    class FocusMixinClass extends superclass {
-      /**
-       * @protected
-       * @return {boolean}
-       */
-      get _keyboardActive() {
-        return isKeyboardActive();
-      }
+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));
+}
 
-      /** @protected */
-      ready() {
-        this.addEventListener('focusin', (e) => {
-          if (this._shouldSetFocus(e)) {
-            this._setFocused(true);
-          }
-        });
+/**
+ * Returns true if the given node is an empty text node, false otherwise.
+ *
+ * @param {Node} node
+ * @return {boolean}
+ */
+function isEmptyTextNode(node) {
+  return node.nodeType === Node.TEXT_NODE && node.textContent.trim() === '';
+}
 
-        this.addEventListener('focusout', (e) => {
-          if (this._shouldRemoveFocus(e)) {
-            this._setFocused(false);
-          }
-        });
+/**
+ * @license
+ * Copyright (c) 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
 
-        // In super.ready() other 'focusin' and 'focusout' listeners might be
-        // added, so we call it after our own ones to ensure they execute first.
-        // Issue to watch out: when incorrect, <vaadin-combo-box> refocuses the
-        // input field on iOS after "Done" is pressed.
-        super.ready();
-      }
+/**
+ * A helper for observing slot changes.
+ */
+class SlotObserver {
+  constructor(slot, callback) {
+    /** @type HTMLSlotElement */
+    this.slot = slot;
 
-      /** @protected */
-      disconnectedCallback() {
-        super.disconnectedCallback();
+    /** @type Function */
+    this.callback = callback;
 
-        // In non-Chrome browsers, blur does not fire on the element when it is disconnected.
-        // reproducible in `<vaadin-date-picker>` when closing on `Cancel` or `Today` click.
-        if (this.hasAttribute('focused')) {
-          this._setFocused(false);
-        }
-      }
+    /** @type {Node[]} */
+    this._storedNodes = [];
 
-      /**
-       * Override to change how focused and focus-ring attributes are set.
-       *
-       * @param {boolean} focused
-       * @protected
-       */
-      _setFocused(focused) {
-        this.toggleAttribute('focused', focused);
+    this._connected = false;
+    this._scheduled = false;
 
-        // Focus-ring is true when the element was focused from the keyboard.
-        // Focus Ring [A11ycasts]: https://youtu.be/ilj2P5-5CjI
-        this.toggleAttribute('focus-ring', focused && this._keyboardActive);
-      }
+    this._boundSchedule = () => {
+      this._schedule();
+    };
 
-      /**
-       * Override to define if the field receives focus based on the event.
-       *
-       * @param {FocusEvent} _event
-       * @return {boolean}
-       * @protected
-       */
-      _shouldSetFocus(_event) {
-        return true;
-      }
+    this.connect();
+    this._schedule();
+  }
 
-      /**
-       * Override to define if the field loses focus based on the event.
-       *
-       * @param {FocusEvent} _event
-       * @return {boolean}
-       * @protected
-       */
-      _shouldRemoveFocus(_event) {
-        return true;
-      }
-    },
-);
+  /**
+   * Activates an observer. This method is automatically called when
+   * a `SlotObserver` is created. It should only be called to  re-activate
+   * an observer that has been deactivated via the `disconnect` method.
+   */
+  connect() {
+    this.slot.addEventListener('slotchange', this._boundSchedule);
+    this._connected = true;
+  }
 
-/**
- * @license
- * Copyright (c) 2021 - 2023 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
+  /**
+   * Deactivates the observer. After calling this method the observer callback
+   * will not be called when changes to slotted nodes occur. The `connect` method
+   * may be subsequently called to reactivate the observer.
+   */
+  disconnect() {
+    this.slot.removeEventListener('slotchange', this._boundSchedule);
+    this._connected = false;
+  }
 
-/**
- * A mixin to toggle the `tabindex` attribute.
- *
- * The attribute is set to -1 whenever the user disables the element
- * and restored with the last known value once the element is enabled.
- *
- * @polymerMixin
- * @mixes DisabledMixin
- */
-const TabindexMixin = (superclass) =>
-  class TabindexMixinClass extends DisabledMixin(superclass) {
-    static get properties() {
-      return {
-        /**
-         * Indicates whether the element can be focused and where it participates in sequential keyboard navigation.
-         *
-         * @protected
-         */
-        tabindex: {
-          type: Number,
-          reflectToAttribute: true,
-          observer: '_tabindexChanged',
-        },
+  /** @private */
+  _schedule() {
+    if (!this._scheduled) {
+      this._scheduled = true;
 
-        /**
-         * Stores the last known tabindex since the element has been disabled.
-         *
-         * @protected
-         */
-        _lastTabIndex: {
-          type: Number,
-        },
-      };
+      queueMicrotask(() => {
+        this.flush();
+      });
     }
+  }
 
-    /**
-     * When the element gets disabled, the observer saves the last known tabindex
-     * and makes the element not focusable by setting tabindex to -1.
-     * As soon as the element gets enabled, the observer restores the last known tabindex
-     * so that the element can be focusable again.
-     *
-     * @protected
-     * @override
-     */
-    _disabledChanged(disabled, oldDisabled) {
-      super._disabledChanged(disabled, oldDisabled);
+  /**
+   * Run the observer callback synchronously.
+   */
+  flush() {
+    if (!this._connected) {
+      return;
+    }
 
-      if (disabled) {
-        if (this.tabindex !== undefined) {
-          this._lastTabIndex = this.tabindex;
+    this._scheduled = false;
+
+    this._processNodes();
+  }
+
+  /** @private */
+  _processNodes() {
+    const currentNodes = this.slot.assignedNodes({ flatten: true });
+
+    let addedNodes = [];
+    const removedNodes = [];
+    const movedNodes = [];
+
+    if (currentNodes.length) {
+      addedNodes = currentNodes.filter((node) => !this._storedNodes.includes(node));
+    }
+
+    if (this._storedNodes.length) {
+      this._storedNodes.forEach((node, index) => {
+        const idx = currentNodes.indexOf(node);
+        if (idx === -1) {
+          removedNodes.push(node);
+        } else if (idx !== index) {
+          movedNodes.push(node);
         }
-        this.tabindex = -1;
-      } else if (oldDisabled) {
-        this.tabindex = this._lastTabIndex;
-      }
+      });
     }
 
-    /**
-     * When the user has changed tabindex while the element is disabled,
-     * the observer reverts tabindex to -1 and rather saves the new tabindex value to apply it later.
-     * The new value will be applied as soon as the element becomes enabled.
-     *
-     * @protected
-     */
-    _tabindexChanged(tabindex) {
-      if (this.disabled && tabindex !== -1) {
-        this._lastTabIndex = tabindex;
-        this.tabindex = -1;
-      }
+    if (addedNodes.length || removedNodes.length || movedNodes.length) {
+      this.callback({ addedNodes, movedNodes, removedNodes });
     }
-  };
+
+    this._storedNodes = currentNodes;
+  }
+}
 
 /**
  * @license
@@ -8856,230 +9318,818 @@ const TabindexMixin = (superclass) =>
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 
+let uniqueId = 0;
+
 /**
- * A mixin to forward focus to an element in the light DOM.
+ * Returns a unique integer id.
  *
- * @polymerMixin
- * @mixes FocusMixin
- * @mixes TabindexMixin
+ * @return {number}
  */
-const DelegateFocusMixin = dedupingMixin(
-  (superclass) =>
-    class DelegateFocusMixinClass extends FocusMixin(TabindexMixin(superclass)) {
-      static get properties() {
-        return {
-          /**
-           * Specify that this control should have input focus when the page loads.
-           */
-          autofocus: {
-            type: Boolean,
-          },
-
-          /**
-           * A reference to the focusable element controlled by the mixin.
-           * It can be an input, textarea, button or any element with tabindex > -1.
-           *
-           * Any component implementing this mixin is expected to provide it
-           * by using `this._setFocusElement(input)` Polymer API.
-           *
-           * Toggling `tabindex` attribute on the host element propagates its value to `focusElement`.
-           *
-           * @protected
-           * @type {!HTMLElement}
-           */
-          focusElement: {
-            type: Object,
-            readOnly: true,
-            observer: '_focusElementChanged',
-          },
-
-          /**
-           * Override the property from `TabIndexMixin`
-           * to ensure the `tabindex` attribute of the focus element
-           * will be restored to `0` after re-enabling the element.
-           *
-           * @protected
-           * @override
-           */
-          _lastTabIndex: {
-            value: 0,
-          },
-        };
-      }
+function generateUniqueId() {
+  // eslint-disable-next-line no-plusplus
+  return uniqueId++;
+}
 
-      constructor() {
-        super();
+/**
+ * @license
+ * Copyright (c) 2021 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
 
-        this._boundOnBlur = this._onBlur.bind(this);
-        this._boundOnFocus = this._onFocus.bind(this);
-      }
+/**
+ * A controller for providing content to slot element and observing changes.
+ */
+class SlotController extends EventTarget {
+  /**
+   * Ensure that every instance has unique ID.
+   *
+   * @param {HTMLElement} host
+   * @param {string} slotName
+   * @return {string}
+   * @protected
+   */
+  static generateId(host, slotName) {
+    const prefix = slotName || 'default';
+    return `${prefix}-${host.localName}-${generateUniqueId()}`;
+  }
 
-      /** @protected */
-      ready() {
-        super.ready();
+  constructor(host, slotName, tagName, config = {}) {
+    super();
 
-        if (this.autofocus && !this.disabled) {
-          requestAnimationFrame(() => {
-            this.focus();
-            this.setAttribute('focus-ring', '');
-          });
-        }
-      }
+    const { initializer, multiple, observe, useUniqueId } = config;
 
-      /**
-       * @protected
-       * @override
-       */
-      focus() {
-        if (this.focusElement && !this.disabled) {
-          this.focusElement.focus();
-        }
-      }
+    this.host = host;
+    this.slotName = slotName;
+    this.tagName = tagName;
+    this.observe = typeof observe === 'boolean' ? observe : true;
+    this.multiple = typeof multiple === 'boolean' ? multiple : false;
+    this.slotInitializer = initializer;
 
-      /**
-       * @protected
-       * @override
-       */
-      blur() {
-        if (this.focusElement) {
-          this.focusElement.blur();
-        }
-      }
+    if (multiple) {
+      this.nodes = [];
+    }
 
-      /**
-       * @protected
-       * @override
-       */
-      click() {
-        if (this.focusElement && !this.disabled) {
-          this.focusElement.click();
-        }
-      }
+    // Only generate the default ID if requested by the controller.
+    if (useUniqueId) {
+      this.defaultId = this.constructor.generateId(host, slotName);
+    }
+  }
 
-      /** @protected */
-      _focusElementChanged(element, oldElement) {
-        if (element) {
-          element.disabled = this.disabled;
-          this._addFocusListeners(element);
-          this.__forwardTabIndex(this.tabindex);
-        } else if (oldElement) {
-          this._removeFocusListeners(oldElement);
-        }
+  hostConnected() {
+    if (!this.initialized) {
+      if (this.multiple) {
+        this.initMultiple();
+      } else {
+        this.initSingle();
       }
 
-      /**
-       * @param {HTMLElement} element
-       * @protected
-       */
-      _addFocusListeners(element) {
-        element.addEventListener('blur', this._boundOnBlur);
-        element.addEventListener('focus', this._boundOnFocus);
+      if (this.observe) {
+        this.observeSlot();
       }
 
-      /**
-       * @param {HTMLElement} element
-       * @protected
-       */
-      _removeFocusListeners(element) {
-        element.removeEventListener('blur', this._boundOnBlur);
-        element.removeEventListener('focus', this._boundOnFocus);
-      }
+      this.initialized = true;
+    }
+  }
 
-      /**
-       * Focus event does not bubble, so we dispatch it manually
-       * on the host element to support adding focus listeners
-       * when the focusable element is placed in light DOM.
-       * @param {FocusEvent} event
-       * @protected
-       */
-      _onFocus(event) {
-        event.stopPropagation();
-        this.dispatchEvent(new Event('focus'));
-      }
+  /** @protected */
+  initSingle() {
+    let node = this.getSlotChild();
 
-      /**
-       * Blur event does not bubble, so we dispatch it manually
-       * on the host element to support adding blur listeners
-       * when the focusable element is placed in light DOM.
-       * @param {FocusEvent} event
-       * @protected
-       */
-      _onBlur(event) {
-        event.stopPropagation();
-        this.dispatchEvent(new Event('blur'));
-      }
+    if (!node) {
+      node = this.attachDefaultNode();
+      this.initNode(node);
+    } else {
+      this.node = node;
+      this.initAddedNode(node);
+    }
+  }
 
-      /**
-       * @param {FocusEvent} event
-       * @return {boolean}
-       * @protected
-       * @override
-       */
-      _shouldSetFocus(event) {
-        return event.target === this.focusElement;
-      }
+  /** @protected */
+  initMultiple() {
+    const children = this.getSlotChildren();
 
-      /**
-       * @param {FocusEvent} event
-       * @return {boolean}
-       * @protected
-       * @override
-       */
-      _shouldRemoveFocus(event) {
-        return event.target === this.focusElement;
+    if (children.length === 0) {
+      const defaultNode = this.attachDefaultNode();
+      if (defaultNode) {
+        this.nodes = [defaultNode];
+        this.initNode(defaultNode);
       }
+    } else {
+      this.nodes = children;
+      children.forEach((node) => {
+        this.initAddedNode(node);
+      });
+    }
+  }
 
-      /**
-       * @param {boolean} disabled
-       * @param {boolean} oldDisabled
-       * @protected
-       * @override
-       */
-      _disabledChanged(disabled, oldDisabled) {
-        super._disabledChanged(disabled, oldDisabled);
+  /**
+   * Create and attach default node using the provided tag name, if any.
+   * @return {Node | undefined}
+   * @protected
+   */
+  attachDefaultNode() {
+    const { host, slotName, tagName } = this;
 
-        if (this.focusElement) {
-          this.focusElement.disabled = disabled;
-        }
+    // Check if the node was created previously and if so, reuse it.
+    let node = this.defaultNode;
 
-        if (disabled) {
-          this.blur();
+    // Tag name is optional, sometimes we don't init default content.
+    if (!node && tagName) {
+      node = document.createElement(tagName);
+      if (node instanceof Element) {
+        if (slotName !== '') {
+          node.setAttribute('slot', slotName);
         }
+        this.node = node;
+        this.defaultNode = node;
       }
+    }
 
-      /**
-       * 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
+    if (node) {
+      host.appendChild(node);
+    }
+
+    return node;
+  }
+
+  /**
+   * Return the list of nodes matching the slot managed by the controller.
+   * @return {Node}
+   */
+  getSlotChildren() {
+    const { slotName } = this;
+    return Array.from(this.host.childNodes).filter((node) => {
+      // Either an element (any slot) or a text node (only un-named slot).
+      return (
+        (node.nodeType === Node.ELEMENT_NODE && node.slot === slotName) ||
+        (node.nodeType === Node.TEXT_NODE && node.textContent.trim() && slotName === '')
+      );
+    });
+  }
+
+  /**
+   * Return a reference to the node managed by the controller.
+   * @return {Node}
+   */
+  getSlotChild() {
+    return this.getSlotChildren()[0];
+  }
+
+  /**
+   * Run `slotInitializer` for the node managed by the controller.
+   *
+   * @param {Node} node
+   * @protected
+   */
+  initNode(node) {
+    const { slotInitializer } = this;
+    // Don't try to bind `this` to initializer (normally it's arrow function).
+    // Instead, pass the host as a first argument to access component's state.
+    if (slotInitializer) {
+      slotInitializer(node, this.host);
+    }
+  }
+
+  /**
+   * Override to initialize the newly added custom node.
+   *
+   * @param {Node} _node
+   * @protected
+   */
+  initCustomNode(_node) {}
+
+  /**
+   * Override to teardown slotted node when it's removed.
+   *
+   * @param {Node} _node
+   * @protected
+   */
+  teardownNode(_node) {}
+
+  /**
+   * Run both `initCustomNode` and `initNode` for a custom slotted node.
+   *
+   * @param {Node} node
+   * @protected
+   */
+  initAddedNode(node) {
+    if (node !== this.defaultNode) {
+      this.initCustomNode(node);
+      this.initNode(node);
+    }
+  }
+
+  /**
+   * Setup the observer to manage slot content changes.
+   * @protected
+   */
+  observeSlot() {
+    const { slotName } = this;
+    const selector = slotName === '' ? 'slot:not([name])' : `slot[name=${slotName}]`;
+    const slot = this.host.shadowRoot.querySelector(selector);
+
+    this.__slotObserver = new SlotObserver(slot, ({ addedNodes, removedNodes }) => {
+      const current = this.multiple ? this.nodes : [this.node];
+
+      // Calling `slot.assignedNodes()` includes whitespace text nodes in case of default slot:
+      // unlike comment nodes, they are not filtered out. So we need to manually ignore them.
+      const newNodes = addedNodes.filter((node) => !isEmptyTextNode(node) && !current.includes(node));
+
+      if (removedNodes.length) {
+        this.nodes = current.filter((node) => !removedNodes.includes(node));
+
+        removedNodes.forEach((node) => {
+          this.teardownNode(node);
+        });
+      }
+
+      if (newNodes && newNodes.length > 0) {
+        if (this.multiple) {
+          // Remove default node if exists
+          if (this.defaultNode) {
+            this.defaultNode.remove();
+          }
+          this.nodes = [...current, ...newNodes].filter((node) => node !== this.defaultNode);
+          newNodes.forEach((node) => {
+            this.initAddedNode(node);
+          });
+        } else {
+          // Remove previous node if exists
+          if (this.node) {
+            this.node.remove();
+          }
+          this.node = newNodes[0];
+          this.initAddedNode(this.node);
+        }
+      }
+    });
+  }
+}
+
+/**
+ * @license
+ * Copyright (c) 2022 - 2023 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.ariaTarget !== undefined) {
+      tooltipNode.ariaTarget = this.ariaTarget;
+    }
+
+    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;
+    }
+
+    this.__notifyChange();
+  }
+
+  /**
+   * Override to notify the host when the tooltip is removed.
+   *
+   * @param {Node} tooltipNode
+   * @protected
+   * @override
+   */
+  teardownNode() {
+    this.__notifyChange();
+  }
+
+  /**
+   * Set an HTML element for linking with the tooltip overlay
+   * via `aria-describedby` attribute used by screen readers.
+   * @param {HTMLElement} ariaTarget
+   */
+  setAriaTarget(ariaTarget) {
+    this.ariaTarget = ariaTarget;
+
+    const tooltipNode = this.node;
+    if (tooltipNode) {
+      tooltipNode.ariaTarget = ariaTarget;
+    }
+  }
+
+  /**
+   * 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;
+    }
+  }
+
+  /** @private */
+  __notifyChange() {
+    this.dispatchEvent(new CustomEvent('tooltip-changed', { detail: { node: this.node } }));
+  }
+}
+
+/**
+ * @license
+ * Copyright (c) 2021 - 2023 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 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+
+/**
+ * A mixin that manages keyboard handling.
+ * The mixin subscribes to the keyboard events while an actual implementation
+ * for the event handlers is left to the client (a component or another mixin).
+ *
+ * @polymerMixin
+ */
+const KeyboardMixin = dedupingMixin(
+  (superclass) =>
+    class KeyboardMixinClass extends superclass {
+      /** @protected */
+      ready() {
+        super.ready();
+
+        this.addEventListener('keydown', (event) => {
+          this._onKeyDown(event);
+        });
+
+        this.addEventListener('keyup', (event) => {
+          this._onKeyUp(event);
+        });
+      }
+
+      /**
+       * A handler for the `keydown` event. By default, it calls
+       * separate methods for handling "Enter" and "Escape" keys.
+       * Override the method to implement your own behavior.
+       *
+       * @param {KeyboardEvent} event
+       * @protected
+       */
+      _onKeyDown(event) {
+        switch (event.key) {
+          case 'Enter':
+            this._onEnter(event);
+            break;
+          case 'Escape':
+            this._onEscape(event);
+            break;
+        }
+      }
+
+      /**
+       * A handler for the `keyup` event. By default, it does nothing.
+       * Override the method to implement your own behavior.
+       *
+       * @param {KeyboardEvent} _event
+       * @protected
        */
-      _tabindexChanged(tabindex) {
-        this.__forwardTabIndex(tabindex);
+      _onKeyUp(_event) {
+        // To be implemented.
       }
 
-      /** @private */
-      __forwardTabIndex(tabindex) {
-        if (tabindex !== undefined && this.focusElement) {
-          this.focusElement.tabIndex = tabindex;
+      /**
+       * A handler for the "Enter" key. By default, it does nothing.
+       * Override the method to implement your own behavior.
+       *
+       * @param {KeyboardEvent} _event
+       * @protected
+       */
+      _onEnter(_event) {
+        // To be implemented.
+      }
+
+      /**
+       * A handler for the "Escape" key. By default, it does nothing.
+       * Override the method to implement your own behavior.
+       *
+       * @param {KeyboardEvent} _event
+       * @protected
+       */
+      _onEscape(_event) {
+        // To be implemented.
+      }
+    },
+);
+
+/**
+ * @license
+ * Copyright (c) 2021 - 2023 Vaadin Ltd.
+ * 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 the actually focused element by traversing shadow
+ * trees recursively to ensure it's the leaf element.
+ *
+ * @return {Element}
+ */
+function getDeepActiveElement() {
+  let host = document.activeElement || document.body;
+  while (host.shadowRoot && host.shadowRoot.activeElement) {
+    host = host.shadowRoot.activeElement;
+  }
+  return host;
+}
+
+/**
+ * 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.
+ *
+ * The method doesn't traverse the element's ancestors, it only checks for the CSS properties
+ * set directly to or inherited by the element.
+ *
+ * @param {HTMLElement} element
+ * @return {boolean}
+ */
+function isElementHiddenDirectly(element) {
+  // Check inline style first to save a re-flow.
+  const style = element.style;
+  if (style.visibility === 'hidden' || style.display === 'none') {
+    return true;
+  }
+
+  const computedStyle = window.getComputedStyle(element);
+  if (computedStyle.visibility === 'hidden' || computedStyle.display === 'none') {
+    return true;
+  }
+
+  return false;
+}
+
+/**
+ * Returns if element `a` has lower tab order compared to element `b`
+ * (both elements are assumed to be focusable and tabbable).
+ * Elements with tabindex = 0 have lower tab order compared to elements
+ * with tabindex > 0.
+ * If both have same tabindex, it returns false.
+ *
+ * @param {HTMLElement} a
+ * @param {HTMLElement} b
+ * @return {boolean}
+ */
+function hasLowerTabOrder(a, b) {
+  // Normalize tabIndexes
+  // e.g. in Firefox `<div contenteditable>` has `tabIndex = -1`
+  const ati = Math.max(a.tabIndex, 0);
+  const bti = Math.max(b.tabIndex, 0);
+  return ati === 0 || bti === 0 ? bti > ati : ati > bti;
+}
+
+/**
+ * Merge sort iterator, merges the two arrays into one, sorted by tabindex.
+ *
+ * @param {HTMLElement[]} left
+ * @param {HTMLElement[]} right
+ * @return {HTMLElement[]}
+ */
+function mergeSortByTabIndex(left, right) {
+  const result = [];
+  while (left.length > 0 && right.length > 0) {
+    if (hasLowerTabOrder(left[0], right[0])) {
+      result.push(right.shift());
+    } else {
+      result.push(left.shift());
+    }
+  }
+
+  return result.concat(left, right);
+}
+
+/**
+ * Sorts an array of elements by tabindex. Returns a new array.
+ *
+ * @param {HTMLElement[]} elements
+ * @return {HTMLElement[]}
+ */
+function sortElementsByTabIndex(elements) {
+  // Implement a merge sort as Array.prototype.sort does a non-stable sort
+  // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort
+  const len = elements.length;
+  if (len < 2) {
+    return elements;
+  }
+  const pivot = Math.ceil(len / 2);
+  const left = sortElementsByTabIndex(elements.slice(0, pivot));
+  const right = sortElementsByTabIndex(elements.slice(pivot));
+
+  return mergeSortByTabIndex(left, right);
+}
+
+/**
+ * Returns true if the element is focusable, otherwise false.
+ *
+ * The list of focusable elements is taken from http://stackoverflow.com/a/1600194/4228703.
+ * However, there isn't a definite list, it's up to the browser.
+ * The only standard we have is DOM Level 2 HTML https://www.w3.org/TR/DOM-Level-2-HTML/html.html,
+ * according to which the only elements that have a `focus()` method are:
+ * - HTMLInputElement
+ * - HTMLSelectElement
+ * - HTMLTextAreaElement
+ * - HTMLAnchorElement
+ *
+ * This notably omits HTMLButtonElement and HTMLAreaElement.
+ * Referring to these tests with tabbables in different browsers
+ * http://allyjs.io/data-tables/focusable.html
+ *
+ * @param {HTMLElement} element
+ * @return {boolean}
+ */
+function isElementFocusable(element) {
+  // The element cannot be focused if its `tabindex` attribute is set to `-1`.
+  if (element.matches('[tabindex="-1"]')) {
+    return false;
+  }
+
+  // Elements that cannot be focused if they have a `disabled` attribute.
+  if (element.matches('input, select, textarea, button, object')) {
+    return element.matches(':not([disabled])');
+  }
+
+  // Elements that can be focused even if they have a `disabled` attribute.
+  return element.matches('a[href], area[href], iframe, [tabindex], [contentEditable]');
+}
+
+/**
+ * Returns true if the element is focused, false otherwise.
+ *
+ * @param {HTMLElement} element
+ * @return {boolean}
+ */
+function isElementFocused(element) {
+  return element.getRootNode().activeElement === element;
+}
+
+/**
+ * Returns the normalized element tabindex. If not focusable, returns -1.
+ * It checks for the attribute "tabindex" instead of the element property
+ * `tabIndex` since browsers assign different values to it.
+ * e.g. in Firefox `<div contenteditable>` has `tabIndex = -1`
+ *
+ * @param {HTMLElement} element
+ * @return {number}
+ */
+function normalizeTabIndex(element) {
+  if (!isElementFocusable(element)) {
+    return -1;
+  }
+
+  const tabIndex = element.getAttribute('tabindex') || 0;
+  return Number(tabIndex);
+}
+
+/**
+ * Searches for nodes that are tabbable and adds them to the `result` array.
+ * Returns if the `result` array needs to be sorted by tabindex.
+ *
+ * @param {Node} node The starting point for the search; added to `result` if tabbable.
+ * @param {HTMLElement[]} result
+ * @return {boolean}
+ * @private
+ */
+function collectFocusableNodes(node, result) {
+  if (node.nodeType !== Node.ELEMENT_NODE || isElementHiddenDirectly(node)) {
+    // Don't traverse children if the node is not an HTML element or not visible.
+    return false;
+  }
+
+  const element = /** @type {HTMLElement} */ (node);
+  const tabIndex = normalizeTabIndex(element);
+  let needsSort = tabIndex > 0;
+  if (tabIndex >= 0) {
+    result.push(element);
+  }
 
-          // Preserve tabindex="-1" on the host element
-          if (tabindex !== -1) {
-            this.tabindex = undefined;
-          }
-        }
+  let children = [];
+  if (element.localName === 'slot') {
+    children = element.assignedNodes({ flatten: true });
+  } else {
+    // Use shadow root if possible, will check for distributed nodes.
+    children = (element.shadowRoot || element).children;
+  }
+  [...children].forEach((child) => {
+    // Ensure method is always invoked to collect focusable children.
+    needsSort = collectFocusableNodes(child, result) || needsSort;
+  });
+  return needsSort;
+}
 
-        if (this.disabled && tabindex) {
-          // If tabindex attribute was changed while component was disabled
-          if (tabindex !== -1) {
-            this._lastTabIndex = tabindex;
-          }
-          this.tabindex = undefined;
-        }
-      }
-    },
-);
+/**
+ * Returns a tab-ordered array of focusable elements for a root element.
+ * The resulting array will include the root element if it is focusable.
+ *
+ * The method traverses nodes in shadow DOM trees too if any.
+ *
+ * @param {HTMLElement} element
+ * @return {HTMLElement[]}
+ */
+function getFocusableElements(element) {
+  const focusableElements = [];
+  const needsSortByTabIndex = collectFocusableNodes(element, focusableElements);
+  // If there is at least one element with tabindex > 0,
+  // we need to sort the final array by tabindex.
+  if (needsSortByTabIndex) {
+    return sortElementsByTabIndex(focusableElements);
+  }
+  return focusableElements;
+}
 
 /**
  * @license
@@ -9088,123 +10138,168 @@ const DelegateFocusMixin = dedupingMixin(
  */
 
 /**
- * A mixin to delegate properties and attributes to a target element.
+ * A mixin to handle `focused` and `focus-ring` attributes based on focus.
  *
  * @polymerMixin
  */
-const DelegateStateMixin = dedupingMixin(
+const FocusMixin = dedupingMixin(
   (superclass) =>
-    class DelegateStateMixinClass extends superclass {
-      static get properties() {
-        return {
-          /**
-           * A target element to which attributes and properties are delegated.
-           * @protected
-           */
-          stateTarget: {
-            type: Object,
-            observer: '_stateTargetChanged',
-          },
-        };
-      }
-
-      /**
-       * An array of the host attributes to delegate to the target element.
-       */
-      static get delegateAttrs() {
-        return [];
-      }
-
+    class FocusMixinClass extends superclass {
       /**
-       * An array of the host properties to delegate to the target element.
+       * @protected
+       * @return {boolean}
        */
-      static get delegateProps() {
-        return [];
+      get _keyboardActive() {
+        return isKeyboardActive();
       }
 
       /** @protected */
       ready() {
-        super.ready();
+        this.addEventListener('focusin', (e) => {
+          if (this._shouldSetFocus(e)) {
+            this._setFocused(true);
+          }
+        });
 
-        this._createDelegateAttrsObserver();
-        this._createDelegatePropsObserver();
+        this.addEventListener('focusout', (e) => {
+          if (this._shouldRemoveFocus(e)) {
+            this._setFocused(false);
+          }
+        });
+
+        // In super.ready() other 'focusin' and 'focusout' listeners might be
+        // added, so we call it after our own ones to ensure they execute first.
+        // Issue to watch out: when incorrect, <vaadin-combo-box> refocuses the
+        // input field on iOS after "Done" is pressed.
+        super.ready();
       }
 
       /** @protected */
-      _stateTargetChanged(target) {
-        if (target) {
-          this._ensureAttrsDelegated();
-          this._ensurePropsDelegated();
+      disconnectedCallback() {
+        super.disconnectedCallback();
+
+        // In non-Chrome browsers, blur does not fire on the element when it is disconnected.
+        // reproducible in `<vaadin-date-picker>` when closing on `Cancel` or `Today` click.
+        if (this.hasAttribute('focused')) {
+          this._setFocused(false);
         }
       }
 
-      /** @protected */
-      _createDelegateAttrsObserver() {
-        this._createMethodObserver(`_delegateAttrsChanged(${this.constructor.delegateAttrs.join(', ')})`);
-      }
+      /**
+       * Override to change how focused and focus-ring attributes are set.
+       *
+       * @param {boolean} focused
+       * @protected
+       */
+      _setFocused(focused) {
+        this.toggleAttribute('focused', focused);
 
-      /** @protected */
-      _createDelegatePropsObserver() {
-        this._createMethodObserver(`_delegatePropsChanged(${this.constructor.delegateProps.join(', ')})`);
+        // Focus-ring is true when the element was focused from the keyboard.
+        // Focus Ring [A11ycasts]: https://youtu.be/ilj2P5-5CjI
+        this.toggleAttribute('focus-ring', focused && this._keyboardActive);
       }
 
-      /** @protected */
-      _ensureAttrsDelegated() {
-        this.constructor.delegateAttrs.forEach((name) => {
-          this._delegateAttribute(name, this[name]);
-        });
+      /**
+       * Override to define if the field receives focus based on the event.
+       *
+       * @param {FocusEvent} _event
+       * @return {boolean}
+       * @protected
+       */
+      _shouldSetFocus(_event) {
+        return true;
       }
 
-      /** @protected */
-      _ensurePropsDelegated() {
-        this.constructor.delegateProps.forEach((name) => {
-          this._delegateProperty(name, this[name]);
-        });
+      /**
+       * Override to define if the field loses focus based on the event.
+       *
+       * @param {FocusEvent} _event
+       * @return {boolean}
+       * @protected
+       */
+      _shouldRemoveFocus(_event) {
+        return true;
       }
+    },
+);
 
-      /** @protected */
-      _delegateAttrsChanged(...values) {
-        this.constructor.delegateAttrs.forEach((name, index) => {
-          this._delegateAttribute(name, values[index]);
-        });
-      }
+/**
+ * @license
+ * Copyright (c) 2021 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
 
-      /** @protected */
-      _delegatePropsChanged(...values) {
-        this.constructor.delegateProps.forEach((name, index) => {
-          this._delegateProperty(name, values[index]);
-        });
-      }
+/**
+ * A mixin to toggle the `tabindex` attribute.
+ *
+ * The attribute is set to -1 whenever the user disables the element
+ * and restored with the last known value once the element is enabled.
+ *
+ * @polymerMixin
+ * @mixes DisabledMixin
+ */
+const TabindexMixin = (superclass) =>
+  class TabindexMixinClass extends DisabledMixin(superclass) {
+    static get properties() {
+      return {
+        /**
+         * Indicates whether the element can be focused and where it participates in sequential keyboard navigation.
+         *
+         * @protected
+         */
+        tabindex: {
+          type: Number,
+          reflectToAttribute: true,
+          observer: '_tabindexChanged',
+        },
 
-      /** @protected */
-      _delegateAttribute(name, value) {
-        if (!this.stateTarget) {
-          return;
-        }
+        /**
+         * Stores the last known tabindex since the element has been disabled.
+         *
+         * @protected
+         */
+        _lastTabIndex: {
+          type: Number,
+        },
+      };
+    }
 
-        if (name === 'invalid') {
-          this._delegateAttribute('aria-invalid', value ? 'true' : false);
-        }
+    /**
+     * When the element gets disabled, the observer saves the last known tabindex
+     * and makes the element not focusable by setting tabindex to -1.
+     * As soon as the element gets enabled, the observer restores the last known tabindex
+     * so that the element can be focusable again.
+     *
+     * @protected
+     * @override
+     */
+    _disabledChanged(disabled, oldDisabled) {
+      super._disabledChanged(disabled, oldDisabled);
 
-        if (typeof value === 'boolean') {
-          this.stateTarget.toggleAttribute(name, value);
-        } else if (value) {
-          this.stateTarget.setAttribute(name, value);
-        } else {
-          this.stateTarget.removeAttribute(name);
+      if (disabled) {
+        if (this.tabindex !== undefined) {
+          this._lastTabIndex = this.tabindex;
         }
+        this.tabindex = -1;
+      } else if (oldDisabled) {
+        this.tabindex = this._lastTabIndex;
       }
+    }
 
-      /** @protected */
-      _delegateProperty(name, value) {
-        if (!this.stateTarget) {
-          return;
-        }
-
-        this.stateTarget[name] = value;
+    /**
+     * When the user has changed tabindex while the element is disabled,
+     * the observer reverts tabindex to -1 and rather saves the new tabindex value to apply it later.
+     * The new value will be applied as soon as the element becomes enabled.
+     *
+     * @protected
+     */
+    _tabindexChanged(tabindex) {
+      if (this.disabled && tabindex !== -1) {
+        this._lastTabIndex = tabindex;
+        this.tabindex = -1;
       }
-    },
-);
+    }
+  };
 
 /**
  * @license
@@ -9213,63 +10308,52 @@ const DelegateStateMixin = dedupingMixin(
  */
 
 /**
- * A mixin to store the reference to an input element
- * and add input and change event listeners to it.
+ * A mixin to forward focus to an element in the light DOM.
  *
  * @polymerMixin
+ * @mixes FocusMixin
+ * @mixes TabindexMixin
  */
-const InputMixin = dedupingMixin(
+const DelegateFocusMixin = dedupingMixin(
   (superclass) =>
-    class InputMixinClass extends superclass {
+    class DelegateFocusMixinClass extends FocusMixin(TabindexMixin(superclass)) {
       static get properties() {
         return {
           /**
-           * A reference to the input element controlled by the mixin.
+           * Specify that this control should have input focus when the page loads.
+           */
+          autofocus: {
+            type: Boolean,
+          },
+
+          /**
+           * A reference to the focusable element controlled by the mixin.
+           * It can be an input, textarea, button or any element with tabindex > -1.
+           *
            * Any component implementing this mixin is expected to provide it
-           * by using `this._setInputElement(input)` Polymer API.
+           * by using `this._setFocusElement(input)` Polymer API.
            *
-           * A typical case is using `InputController` that does this automatically.
-           * However, the input element does not have to always be native <input>:
-           * as an example, <vaadin-combo-box-light> accepts other components.
+           * Toggling `tabindex` attribute on the host element propagates its value to `focusElement`.
            *
            * @protected
            * @type {!HTMLElement}
            */
-          inputElement: {
+          focusElement: {
             type: Object,
             readOnly: true,
-            observer: '_inputElementChanged',
-          },
-
-          /**
-           * String used to define input type.
-           * @protected
-           */
-          type: {
-            type: String,
-            readOnly: true,
-          },
-
-          /**
-           * The value of the field.
-           */
-          value: {
-            type: String,
-            value: '',
-            observer: '_valueChanged',
-            notify: true,
-            sync: true,
+            observer: '_focusElementChanged',
           },
 
           /**
-           * Whether the input element has a non-empty value.
+           * Override the property from `TabIndexMixin`
+           * to ensure the `tabindex` attribute of the focus element
+           * will be restored to `0` after re-enabling the element.
            *
            * @protected
+           * @override
            */
-          _hasInputValue: {
-            type: Boolean,
-            value: false,
-            observer: '_hasInputValueChanged',
+          _lastTabIndex: {
+            value: 0,
           },
         };
       }
@@ -9277,212 +10361,173 @@ const InputMixin = dedupingMixin(
       constructor() {
         super();
 
-        this._boundOnInput = this.__onInput.bind(this);
-        this._boundOnChange = this._onChange.bind(this);
+        this._boundOnBlur = this._onBlur.bind(this);
+        this._boundOnFocus = this._onFocus.bind(this);
       }
 
-      /**
-       * 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 !== '';
+      /** @protected */
+      ready() {
+        super.ready();
+
+        if (this.autofocus && !this.disabled) {
+          requestAnimationFrame(() => {
+            this.focus();
+            this.setAttribute('focus-ring', '');
+          });
+        }
       }
 
       /**
-       * A property for accessing the input element's value.
-       *
-       * Override this getter if the property is different from the default `value` one.
-       *
        * @protected
-       * @return {string}
+       * @override
        */
-      get _inputElementValueProperty() {
-        return 'value';
+      focus() {
+        if (this.focusElement && !this.disabled) {
+          this.focusElement.focus();
+        }
       }
 
       /**
-       * The input element's value.
-       *
        * @protected
-       * @return {string}
+       * @override
        */
-      get _inputElementValue() {
-        return this.inputElement ? this.inputElement[this._inputElementValueProperty] : undefined;
+      blur() {
+        if (this.focusElement) {
+          this.focusElement.blur();
+        }
       }
 
       /**
-       * The input element's value.
-       *
        * @protected
+       * @override
        */
-      set _inputElementValue(value) {
-        if (this.inputElement) {
-          this.inputElement[this._inputElementValueProperty] = value;
+      click() {
+        if (this.focusElement && !this.disabled) {
+          this.focusElement.click();
         }
       }
 
-      /**
-       * Clear the value of the field.
-       */
-      clear() {
-        this._hasInputValue = false;
-
-        this.value = '';
-
-        // Clear the input immediately without waiting for the observer.
-        // Otherwise, when using Lit, the old value would be restored.
-        this._inputElementValue = '';
+      /** @protected */
+      _focusElementChanged(element, oldElement) {
+        if (element) {
+          element.disabled = this.disabled;
+          this._addFocusListeners(element);
+          this.__forwardTabIndex(this.tabindex);
+        } else if (oldElement) {
+          this._removeFocusListeners(oldElement);
+        }
       }
 
       /**
-       * Add event listeners to the input element instance.
-       * Override this method to add custom listeners.
-       * @param {!HTMLElement} input
+       * @param {HTMLElement} element
        * @protected
        */
-      _addInputListeners(input) {
-        input.addEventListener('input', this._boundOnInput);
-        input.addEventListener('change', this._boundOnChange);
+      _addFocusListeners(element) {
+        element.addEventListener('blur', this._boundOnBlur);
+        element.addEventListener('focus', this._boundOnFocus);
       }
 
       /**
-       * Remove event listeners from the input element instance.
-       * @param {!HTMLElement} input
+       * @param {HTMLElement} element
        * @protected
        */
-      _removeInputListeners(input) {
-        input.removeEventListener('input', this._boundOnInput);
-        input.removeEventListener('change', this._boundOnChange);
+      _removeFocusListeners(element) {
+        element.removeEventListener('blur', this._boundOnBlur);
+        element.removeEventListener('focus', this._boundOnFocus);
       }
 
       /**
-       * A method to forward the value property set on the field
-       * programmatically back to the input element value.
-       * Override this method to perform additional checks,
-       * for example to skip this in certain conditions.
-       * @param {string} value
+       * Focus event does not bubble, so we dispatch it manually
+       * on the host element to support adding focus listeners
+       * when the focusable element is placed in light DOM.
+       * @param {FocusEvent} event
        * @protected
        */
-      _forwardInputValue(value) {
-        // Value might be set before an input element is initialized.
-        // This case should be handled separately by a component that
-        // implements this mixin, for example in `connectedCallback`.
-        if (!this.inputElement) {
-          return;
-        }
-
-        this._inputElementValue = value != null ? value : '';
+      _onFocus(event) {
+        event.stopPropagation();
+        this.dispatchEvent(new Event('focus'));
       }
 
       /**
-       * @param {HTMLElement | undefined} input
-       * @param {HTMLElement | undefined} oldInput
+       * Blur event does not bubble, so we dispatch it manually
+       * on the host element to support adding blur listeners
+       * when the focusable element is placed in light DOM.
+       * @param {FocusEvent} event
        * @protected
        */
-      _inputElementChanged(input, oldInput) {
-        if (input) {
-          this._addInputListeners(input);
-        } else if (oldInput) {
-          this._removeInputListeners(oldInput);
-        }
-      }
-
-      /**
-       * 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);
+      _onBlur(event) {
+        event.stopPropagation();
+        this.dispatchEvent(new Event('blur'));
       }
 
       /**
-       * An input event listener used to update the field value.
-       *
-       * @param {Event} event
+       * @param {FocusEvent} event
+       * @return {boolean}
        * @protected
+       * @override
        */
-      _onInput(event) {
-        // In the case a custom web component is passed as `inputElement`,
-        // the actual native input element, on which the event occurred,
-        // can be inside shadow trees.
-        const target = event.composedPath()[0];
-        // Ignore fake input events e.g. used by clear button.
-        this.__userInput = event.isTrusted;
-        this.value = target.value;
-        this.__userInput = false;
+      _shouldSetFocus(event) {
+        return event.target === this.focusElement;
       }
 
       /**
-       * A change event listener.
-       * Override this method with an actual implementation.
-       * @param {Event} _event
-       * @protected
-       */
-      _onChange(_event) {}
-
-      /**
-       * Toggle the has-value attribute based on the value property.
-       *
-       * @param {boolean} hasValue
+       * @param {FocusEvent} event
+       * @return {boolean}
        * @protected
+       * @override
        */
-      _toggleHasValue(hasValue) {
-        this.toggleAttribute('has-value', hasValue);
+      _shouldRemoveFocus(event) {
+        return event.target === this.focusElement;
       }
 
       /**
-       * Observer called when a value property changes.
-       * @param {string | undefined} newVal
-       * @param {string | undefined} oldVal
+       * @param {boolean} disabled
+       * @param {boolean} oldDisabled
        * @protected
+       * @override
        */
-      _valueChanged(newVal, oldVal) {
-        this._toggleHasValue(this._hasValue);
+      _disabledChanged(disabled, oldDisabled) {
+        super._disabledChanged(disabled, oldDisabled);
 
-        // Setting initial value to empty string, do nothing.
-        if (newVal === '' && oldVal === undefined) {
-          return;
+        if (this.focusElement) {
+          this.focusElement.disabled = disabled;
         }
 
-        // Value is set by the user, no need to sync it back to input.
-        if (this.__userInput) {
-          return;
+        if (disabled) {
+          this.blur();
         }
-
-        // Setting a value programmatically, sync it to input element.
-        this._forwardInputValue(newVal);
       }
 
       /**
-       * Sets the `_hasInputValue` property based on the `input` event.
-       *
-       * @param {InputEvent} event
+       * 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
        */
-      _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;
+      _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;
+        }
       }
     },
 );
@@ -9494,138 +10539,123 @@ const InputMixin = dedupingMixin(
  */
 
 /**
- * Returns true if the given node is an empty text node, false otherwise.
+ * A mixin to delegate properties and attributes to a target element.
  *
- * @param {Node} node
- * @return {boolean}
- */
-function isEmptyTextNode(node) {
-  return node.nodeType === Node.TEXT_NODE && node.textContent.trim() === '';
-}
-
-/**
- * @license
- * Copyright (c) 2023 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-
-/**
- * A helper for observing slot changes.
+ * @polymerMixin
  */
-class SlotObserver {
-  constructor(slot, callback) {
-    /** @type HTMLSlotElement */
-    this.slot = slot;
-
-    /** @type Function */
-    this.callback = callback;
-
-    /** @type {Node[]} */
-    this._storedNodes = [];
-
-    this._connected = false;
-    this._scheduled = false;
-
-    this._boundSchedule = () => {
-      this._schedule();
-    };
+const DelegateStateMixin = dedupingMixin(
+  (superclass) =>
+    class DelegateStateMixinClass extends superclass {
+      static get properties() {
+        return {
+          /**
+           * A target element to which attributes and properties are delegated.
+           * @protected
+           */
+          stateTarget: {
+            type: Object,
+            observer: '_stateTargetChanged',
+          },
+        };
+      }
 
-    this.connect();
-    this._schedule();
-  }
+      /**
+       * An array of the host attributes to delegate to the target element.
+       */
+      static get delegateAttrs() {
+        return [];
+      }
 
-  /**
-   * Activates an observer. This method is automatically called when
-   * a `SlotObserver` is created. It should only be called to  re-activate
-   * an observer that has been deactivated via the `disconnect` method.
-   */
-  connect() {
-    this.slot.addEventListener('slotchange', this._boundSchedule);
-    this._connected = true;
-  }
+      /**
+       * An array of the host properties to delegate to the target element.
+       */
+      static get delegateProps() {
+        return [];
+      }
 
-  /**
-   * Deactivates the observer. After calling this method the observer callback
-   * will not be called when changes to slotted nodes occur. The `connect` method
-   * may be subsequently called to reactivate the observer.
-   */
-  disconnect() {
-    this.slot.removeEventListener('slotchange', this._boundSchedule);
-    this._connected = false;
-  }
+      /** @protected */
+      ready() {
+        super.ready();
 
-  /** @private */
-  _schedule() {
-    if (!this._scheduled) {
-      this._scheduled = true;
+        this._createDelegateAttrsObserver();
+        this._createDelegatePropsObserver();
+      }
 
-      queueMicrotask(() => {
-        this.flush();
-      });
-    }
-  }
+      /** @protected */
+      _stateTargetChanged(target) {
+        if (target) {
+          this._ensureAttrsDelegated();
+          this._ensurePropsDelegated();
+        }
+      }
 
-  /**
-   * Run the observer callback synchronously.
-   */
-  flush() {
-    if (!this._connected) {
-      return;
-    }
+      /** @protected */
+      _createDelegateAttrsObserver() {
+        this._createMethodObserver(`_delegateAttrsChanged(${this.constructor.delegateAttrs.join(', ')})`);
+      }
 
-    this._scheduled = false;
+      /** @protected */
+      _createDelegatePropsObserver() {
+        this._createMethodObserver(`_delegatePropsChanged(${this.constructor.delegateProps.join(', ')})`);
+      }
 
-    this._processNodes();
-  }
+      /** @protected */
+      _ensureAttrsDelegated() {
+        this.constructor.delegateAttrs.forEach((name) => {
+          this._delegateAttribute(name, this[name]);
+        });
+      }
 
-  /** @private */
-  _processNodes() {
-    const currentNodes = this.slot.assignedNodes({ flatten: true });
+      /** @protected */
+      _ensurePropsDelegated() {
+        this.constructor.delegateProps.forEach((name) => {
+          this._delegateProperty(name, this[name]);
+        });
+      }
 
-    let addedNodes = [];
-    const removedNodes = [];
-    const movedNodes = [];
+      /** @protected */
+      _delegateAttrsChanged(...values) {
+        this.constructor.delegateAttrs.forEach((name, index) => {
+          this._delegateAttribute(name, values[index]);
+        });
+      }
 
-    if (currentNodes.length) {
-      addedNodes = currentNodes.filter((node) => !this._storedNodes.includes(node));
-    }
+      /** @protected */
+      _delegatePropsChanged(...values) {
+        this.constructor.delegateProps.forEach((name, index) => {
+          this._delegateProperty(name, values[index]);
+        });
+      }
 
-    if (this._storedNodes.length) {
-      this._storedNodes.forEach((node, index) => {
-        const idx = currentNodes.indexOf(node);
-        if (idx === -1) {
-          removedNodes.push(node);
-        } else if (idx !== index) {
-          movedNodes.push(node);
+      /** @protected */
+      _delegateAttribute(name, value) {
+        if (!this.stateTarget) {
+          return;
         }
-      });
-    }
-
-    if (addedNodes.length || removedNodes.length || movedNodes.length) {
-      this.callback({ addedNodes, movedNodes, removedNodes });
-    }
 
-    this._storedNodes = currentNodes;
-  }
-}
+        if (name === 'invalid') {
+          this._delegateAttribute('aria-invalid', value ? 'true' : false);
+        }
 
-/**
- * @license
- * Copyright (c) 2021 - 2023 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
+        if (typeof value === 'boolean') {
+          this.stateTarget.toggleAttribute(name, value);
+        } else if (value) {
+          this.stateTarget.setAttribute(name, value);
+        } else {
+          this.stateTarget.removeAttribute(name);
+        }
+      }
 
-let uniqueId = 0;
+      /** @protected */
+      _delegateProperty(name, value) {
+        if (!this.stateTarget) {
+          return;
+        }
 
-/**
- * Returns a unique integer id.
- *
- * @return {number}
- */
-function generateUniqueId() {
-  // eslint-disable-next-line no-plusplus
-  return uniqueId++;
-}
+        this.stateTarget[name] = value;
+      }
+    },
+);
 
 /**
  * @license
@@ -9634,234 +10664,279 @@ function generateUniqueId() {
  */
 
 /**
- * A controller for providing content to slot element and observing changes.
+ * A mixin to store the reference to an input element
+ * and add input and change event listeners to it.
+ *
+ * @polymerMixin
  */
-class SlotController extends EventTarget {
-  /**
-   * Ensure that every instance has unique ID.
-   *
-   * @param {HTMLElement} host
-   * @param {string} slotName
-   * @return {string}
-   * @protected
-   */
-  static generateId(host, slotName) {
-    const prefix = slotName || 'default';
-    return `${prefix}-${host.localName}-${generateUniqueId()}`;
-  }
-
-  constructor(host, slotName, tagName, config = {}) {
-    super();
+const InputMixin = dedupingMixin(
+  (superclass) =>
+    class InputMixinClass extends superclass {
+      static get properties() {
+        return {
+          /**
+           * A reference to the input element controlled by the mixin.
+           * Any component implementing this mixin is expected to provide it
+           * by using `this._setInputElement(input)` Polymer API.
+           *
+           * A typical case is using `InputController` that does this automatically.
+           * However, the input element does not have to always be native <input>:
+           * as an example, <vaadin-combo-box-light> accepts other components.
+           *
+           * @protected
+           * @type {!HTMLElement}
+           */
+          inputElement: {
+            type: Object,
+            readOnly: true,
+            observer: '_inputElementChanged',
+          },
 
-    const { initializer, multiple, observe, useUniqueId } = config;
+          /**
+           * String used to define input type.
+           * @protected
+           */
+          type: {
+            type: String,
+            readOnly: true,
+          },
 
-    this.host = host;
-    this.slotName = slotName;
-    this.tagName = tagName;
-    this.observe = typeof observe === 'boolean' ? observe : true;
-    this.multiple = typeof multiple === 'boolean' ? multiple : false;
-    this.slotInitializer = initializer;
+          /**
+           * The value of the field.
+           */
+          value: {
+            type: String,
+            value: '',
+            observer: '_valueChanged',
+            notify: true,
+            sync: true,
+          },
 
-    if (multiple) {
-      this.nodes = [];
-    }
+          /**
+           * Whether the input element has a non-empty value.
+           *
+           * @protected
+           */
+          _hasInputValue: {
+            type: Boolean,
+            value: false,
+            observer: '_hasInputValueChanged',
+          },
+        };
+      }
 
-    // Only generate the default ID if requested by the controller.
-    if (useUniqueId) {
-      this.defaultId = this.constructor.generateId(host, slotName);
-    }
-  }
+      constructor() {
+        super();
 
-  hostConnected() {
-    if (!this.initialized) {
-      if (this.multiple) {
-        this.initMultiple();
-      } else {
-        this.initSingle();
+        this._boundOnInput = this.__onInput.bind(this);
+        this._boundOnChange = this._onChange.bind(this);
       }
 
-      if (this.observe) {
-        this.observeSlot();
+      /**
+       * 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 !== '';
       }
 
-      this.initialized = true;
-    }
-  }
-
-  /** @protected */
-  initSingle() {
-    let node = this.getSlotChild();
-
-    if (!node) {
-      node = this.attachDefaultNode();
-      this.initNode(node);
-    } else {
-      this.node = node;
-      this.initAddedNode(node);
-    }
-  }
+      /**
+       * A property for accessing the input element's value.
+       *
+       * Override this getter if the property is different from the default `value` one.
+       *
+       * @protected
+       * @return {string}
+       */
+      get _inputElementValueProperty() {
+        return 'value';
+      }
 
-  /** @protected */
-  initMultiple() {
-    const children = this.getSlotChildren();
+      /**
+       * The input element's value.
+       *
+       * @protected
+       * @return {string}
+       */
+      get _inputElementValue() {
+        return this.inputElement ? this.inputElement[this._inputElementValueProperty] : undefined;
+      }
 
-    if (children.length === 0) {
-      const defaultNode = this.attachDefaultNode();
-      if (defaultNode) {
-        this.nodes = [defaultNode];
-        this.initNode(defaultNode);
+      /**
+       * The input element's value.
+       *
+       * @protected
+       */
+      set _inputElementValue(value) {
+        if (this.inputElement) {
+          this.inputElement[this._inputElementValueProperty] = value;
+        }
       }
-    } else {
-      this.nodes = children;
-      children.forEach((node) => {
-        this.initAddedNode(node);
-      });
-    }
-  }
 
-  /**
-   * Create and attach default node using the provided tag name, if any.
-   * @return {Node | undefined}
-   * @protected
-   */
-  attachDefaultNode() {
-    const { host, slotName, tagName } = this;
+      /**
+       * Clear the value of the field.
+       */
+      clear() {
+        this._hasInputValue = false;
 
-    // Check if the node was created previously and if so, reuse it.
-    let node = this.defaultNode;
+        this.value = '';
 
-    // Tag name is optional, sometimes we don't init default content.
-    if (!node && tagName) {
-      node = document.createElement(tagName);
-      if (node instanceof Element) {
-        if (slotName !== '') {
-          node.setAttribute('slot', slotName);
-        }
-        this.node = node;
-        this.defaultNode = node;
+        // Clear the input immediately without waiting for the observer.
+        // Otherwise, when using Lit, the old value would be restored.
+        this._inputElementValue = '';
       }
-    }
 
-    if (node) {
-      host.appendChild(node);
-    }
+      /**
+       * 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);
+        input.addEventListener('change', this._boundOnChange);
+      }
 
-    return node;
-  }
+      /**
+       * Remove event listeners from the input element instance.
+       * @param {!HTMLElement} input
+       * @protected
+       */
+      _removeInputListeners(input) {
+        input.removeEventListener('input', this._boundOnInput);
+        input.removeEventListener('change', this._boundOnChange);
+      }
 
-  /**
-   * Return the list of nodes matching the slot managed by the controller.
-   * @return {Node}
-   */
-  getSlotChildren() {
-    const { slotName } = this;
-    return Array.from(this.host.childNodes).filter((node) => {
-      // Either an element (any slot) or a text node (only un-named slot).
-      return (
-        (node.nodeType === Node.ELEMENT_NODE && node.slot === slotName) ||
-        (node.nodeType === Node.TEXT_NODE && node.textContent.trim() && slotName === '')
-      );
-    });
-  }
+      /**
+       * A method to forward the value property set on the field
+       * programmatically back to the input element value.
+       * Override this method to perform additional checks,
+       * for example to skip this in certain conditions.
+       * @param {string} value
+       * @protected
+       */
+      _forwardInputValue(value) {
+        // Value might be set before an input element is initialized.
+        // This case should be handled separately by a component that
+        // implements this mixin, for example in `connectedCallback`.
+        if (!this.inputElement) {
+          return;
+        }
 
-  /**
-   * Return a reference to the node managed by the controller.
-   * @return {Node}
-   */
-  getSlotChild() {
-    return this.getSlotChildren()[0];
-  }
+        this._inputElementValue = value != null ? value : '';
+      }
 
-  /**
-   * Run `slotInitializer` for the node managed by the controller.
-   *
-   * @param {Node} node
-   * @protected
-   */
-  initNode(node) {
-    const { slotInitializer } = this;
-    // Don't try to bind `this` to initializer (normally it's arrow function).
-    // Instead, pass the host as a first argument to access component's state.
-    if (slotInitializer) {
-      slotInitializer(node, this.host);
-    }
-  }
+      /**
+       * @param {HTMLElement | undefined} input
+       * @param {HTMLElement | undefined} oldInput
+       * @protected
+       */
+      _inputElementChanged(input, oldInput) {
+        if (input) {
+          this._addInputListeners(input);
+        } else if (oldInput) {
+          this._removeInputListeners(oldInput);
+        }
+      }
 
-  /**
-   * Override to initialize the newly added custom node.
-   *
-   * @param {Node} _node
-   * @protected
-   */
-  initCustomNode(_node) {}
+      /**
+       * Observer to notify about the change of private property.
+       *
+       * @private
+       */
+      _hasInputValueChanged(hasValue, oldHasValue) {
+        if (hasValue || oldHasValue) {
+          this.dispatchEvent(new CustomEvent('has-input-value-changed'));
+        }
+      }
 
-  /**
-   * Override to teardown slotted node when it's removed.
-   *
-   * @param {Node} _node
-   * @protected
-   */
-  teardownNode(_node) {}
+      /**
+       * 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);
+      }
 
-  /**
-   * Run both `initCustomNode` and `initNode` for a custom slotted node.
-   *
-   * @param {Node} node
-   * @protected
-   */
-  initAddedNode(node) {
-    if (node !== this.defaultNode) {
-      this.initCustomNode(node);
-      this.initNode(node);
-    }
-  }
+      /**
+       * An input event listener used to update the field value.
+       *
+       * @param {Event} event
+       * @protected
+       */
+      _onInput(event) {
+        // In the case a custom web component is passed as `inputElement`,
+        // the actual native input element, on which the event occurred,
+        // can be inside shadow trees.
+        const target = event.composedPath()[0];
+        // Ignore fake input events e.g. used by clear button.
+        this.__userInput = event.isTrusted;
+        this.value = target.value;
+        this.__userInput = false;
+      }
 
-  /**
-   * Setup the observer to manage slot content changes.
-   * @protected
-   */
-  observeSlot() {
-    const { slotName } = this;
-    const selector = slotName === '' ? 'slot:not([name])' : `slot[name=${slotName}]`;
-    const slot = this.host.shadowRoot.querySelector(selector);
+      /**
+       * A change event listener.
+       * Override this method with an actual implementation.
+       * @param {Event} _event
+       * @protected
+       */
+      _onChange(_event) {}
 
-    this.__slotObserver = new SlotObserver(slot, ({ addedNodes, removedNodes }) => {
-      const current = this.multiple ? this.nodes : [this.node];
+      /**
+       * Toggle the has-value attribute based on the value property.
+       *
+       * @param {boolean} hasValue
+       * @protected
+       */
+      _toggleHasValue(hasValue) {
+        this.toggleAttribute('has-value', hasValue);
+      }
 
-      // Calling `slot.assignedNodes()` includes whitespace text nodes in case of default slot:
-      // unlike comment nodes, they are not filtered out. So we need to manually ignore them.
-      const newNodes = addedNodes.filter((node) => !isEmptyTextNode(node) && !current.includes(node));
+      /**
+       * Observer called when a value property changes.
+       * @param {string | undefined} newVal
+       * @param {string | undefined} oldVal
+       * @protected
+       */
+      _valueChanged(newVal, oldVal) {
+        this._toggleHasValue(this._hasValue);
 
-      if (removedNodes.length) {
-        this.nodes = current.filter((node) => !removedNodes.includes(node));
+        // Setting initial value to empty string, do nothing.
+        if (newVal === '' && oldVal === undefined) {
+          return;
+        }
 
-        removedNodes.forEach((node) => {
-          this.teardownNode(node);
-        });
+        // Value is set by the user, no need to sync it back to input.
+        if (this.__userInput) {
+          return;
+        }
+
+        // Setting a value programmatically, sync it to input element.
+        this._forwardInputValue(newVal);
       }
 
-      if (newNodes && newNodes.length > 0) {
-        if (this.multiple) {
-          // Remove default node if exists
-          if (this.defaultNode) {
-            this.defaultNode.remove();
-          }
-          this.nodes = [...current, ...newNodes].filter((node) => node !== this.defaultNode);
-          newNodes.forEach((node) => {
-            this.initAddedNode(node);
-          });
-        } else {
-          // Remove previous node if exists
-          if (this.node) {
-            this.node.remove();
-          }
-          this.node = newNodes[0];
-          this.initAddedNode(this.node);
-        }
+      /**
+       * 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;
       }
-    });
-  }
-}
+    },
+);
 
 /**
  * @license
@@ -10518,67 +11593,6 @@ const requiredField = i$1`
 
 registerStyles('', requiredField, { moduleId: 'lumo-required-field' });
 
-/**
- * @license
- * Copyright (c) 2021 - 2023 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-
-/**
- * Takes a string with values separated by space and returns a set the values
- *
- * @param {string} value
- * @return {Set<string>}
- */
-function deserializeAttributeValue(value) {
-  if (!value) {
-    return new Set();
-  }
-
-  return new Set(value.split(' '));
-}
-
-/**
- * Takes a set of string values and returns a string with values separated by space
- *
- * @param {Set<string>} values
- * @return {string}
- */
-function serializeAttributeValue(values) {
-  return values ? [...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) 2023 Vaadin Ltd.
@@ -11409,4 +12423,4 @@ const FieldMixin = (superclass) =>
     }
   };
 
-export { getFocusableElements as A, DelegateStateMixin as D, FieldMixin as F, InputMixin as I, KeyboardMixin as K, LabelMixin as L, PolymerElement as P, TabindexMixin as T, ValidateMixin as V, DisabledMixin as a, isElementFocused as b, DelegateFocusMixin as c, dedupingMixin as d, InputController as e, LabelledInputController as f, helper as g, html as h, i$1 as i, FocusMixin as j, PropertyEffects as k, legacyWarnings as l, legacyOptimizations as m, useShadow as n, o$3 as o, suppressTemplateNotifications as p, microTask as q, requiredField as r, strictTemplatePolicy as s, timeOut as t, usageStatistics as u, matches as v, wrap as w, translate as x, registerStyles as y, getDeepActiveElement as z };
+export { timeOut$1 as A, microTask$1 as B, matches as C, DelegateStateMixin as D, ElementMixin as E, FieldMixin as F, translate as G, SlotController as H, InputMixin as I, ControllerMixin as J, KeyboardMixin as K, LabelMixin as L, getDeepActiveElement as M, getFocusableElements as N, getAncestorRootNodes as O, PolymerElement as P, TabindexMixin as Q, idlePeriod as R, SlotObserver as S, TooltipController as T, animationFrame as U, ValidateMixin as V, flush as W, enqueueDebouncer as X, DisabledMixin as a, isElementFocused as b, DelegateFocusMixin as c, dedupingMixin as d, InputController as e, LabelledInputController as f, defineCustomElement as g, html as h, i$1 as i, ThemableMixin as j, requiredField as k, helper as l, FocusMixin as m, microTask as n, DirMixin as o, Debouncer as p, generateUniqueId as q, registerStyles as r, PropertyEffects as s, timeOut as t, strictTemplatePolicy as u, legacyWarnings as v, wrap as w, legacyOptimizations as x, useShadow as y, suppressTemplateNotifications as z };