@aurodesignsystem/auro-formkit 2.0.0-beta.5 → 2.0.0-beta.50

package/components/select/demo/index.min.js

@@ -3,46 +3,46 @@
  * Copyright 2019 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const t$5=globalThis,e$9=t$5.ShadowRoot&&(void 0===t$5.ShadyCSS||t$5.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,s$5=Symbol(),o$9=new WeakMap;let n$7 = class n{constructor(t,e,o){if(this._$cssResult$=!0,o!==s$5)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=t,this.t=e;}get styleSheet(){let t=this.o;const s=this.t;if(e$9&&void 0===t){const e=void 0!==s&&1===s.length;e&&(t=o$9.get(s)),void 0===t&&((this.o=t=new CSSStyleSheet).replaceSync(this.cssText),e&&o$9.set(s,t));}return t}toString(){return this.cssText}};const r$7=t=>new n$7("string"==typeof t?t:t+"",void 0,s$5),i$b=(t,...e)=>{const o=1===t.length?t[0]:e.reduce(((e,s,o)=>e+(t=>{if(!0===t._$cssResult$)return t.cssText;if("number"==typeof t)return t;throw Error("Value passed to 'css' function must be a 'css' function result: "+t+". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.")})(s)+t[o+1]),t[0]);return new n$7(o,t,s$5)},S$3=(s,o)=>{if(e$9)s.adoptedStyleSheets=o.map((t=>t instanceof CSSStyleSheet?t:t.styleSheet));else for(const e of o){const o=document.createElement("style"),n=t$5.litNonce;void 0!==n&&o.setAttribute("nonce",n),o.textContent=e.cssText,s.appendChild(o);}},c$5=e$9?t=>t:t=>t instanceof CSSStyleSheet?(t=>{let e="";for(const s of t.cssRules)e+=s.cssText;return r$7(e)})(t):t;
+const t$7=globalThis,e$c=t$7.ShadowRoot&&(void 0===t$7.ShadyCSS||t$7.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,s$7=Symbol(),o$c=new WeakMap;let n$a = class n{constructor(t,e,o){if(this._$cssResult$=true,o!==s$7)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=t,this.t=e;}get styleSheet(){let t=this.o;const s=this.t;if(e$c&&void 0===t){const e=void 0!==s&&1===s.length;e&&(t=o$c.get(s)),void 0===t&&((this.o=t=new CSSStyleSheet).replaceSync(this.cssText),e&&o$c.set(s,t));}return t}toString(){return this.cssText}};const r$c=t=>new n$a("string"==typeof t?t:t+"",void 0,s$7),i$f=(t,...e)=>{const o=1===t.length?t[0]:e.reduce(((e,s,o)=>e+(t=>{if(true===t._$cssResult$)return t.cssText;if("number"==typeof t)return t;throw Error("Value passed to 'css' function must be a 'css' function result: "+t+". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.")})(s)+t[o+1]),t[0]);return new n$a(o,t,s$7)},S$6=(s,o)=>{if(e$c)s.adoptedStyleSheets=o.map((t=>t instanceof CSSStyleSheet?t:t.styleSheet));else for(const e of o){const o=document.createElement("style"),n=t$7.litNonce;void 0!==n&&o.setAttribute("nonce",n),o.textContent=e.cssText,s.appendChild(o);}},c$9=e$c?t=>t:t=>t instanceof CSSStyleSheet?(t=>{let e="";for(const s of t.cssRules)e+=s.cssText;return r$c(e)})(t):t;
 
 /**
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
- */const{is:i$a,defineProperty:e$8,getOwnPropertyDescriptor:r$6,getOwnPropertyNames:h$3,getOwnPropertySymbols:o$8,getPrototypeOf:n$6}=Object,a$5=globalThis,c$4=a$5.trustedTypes,l$5=c$4?c$4.emptyScript:"",p$3=a$5.reactiveElementPolyfillSupport,d$3=(t,s)=>t,u$5={toAttribute(t,s){switch(s){case Boolean:t=t?l$5:null;break;case Object:case Array:t=null==t?t:JSON.stringify(t);}return t},fromAttribute(t,s){let i=t;switch(s){case Boolean:i=null!==t;break;case Number:i=null===t?null:Number(t);break;case Object:case Array:try{i=JSON.parse(t);}catch(t){i=null;}}return i}},f$3=(t,s)=>!i$a(t,s),y$3={attribute:!0,type:String,converter:u$5,reflect:!1,hasChanged:f$3};Symbol.metadata??=Symbol("metadata"),a$5.litPropertyMetadata??=new WeakMap;let b$1 = class b extends HTMLElement{static addInitializer(t){this._$Ei(),(this.l??=[]).push(t);}static get observedAttributes(){return this.finalize(),this._$Eh&&[...this._$Eh.keys()]}static createProperty(t,s=y$3){if(s.state&&(s.attribute=!1),this._$Ei(),this.elementProperties.set(t,s),!s.noAccessor){const i=Symbol(),r=this.getPropertyDescriptor(t,i,s);void 0!==r&&e$8(this.prototype,t,r);}}static getPropertyDescriptor(t,s,i){const{get:e,set:h}=r$6(this.prototype,t)??{get(){return this[s]},set(t){this[s]=t;}};return {get(){return e?.call(this)},set(s){const r=e?.call(this);h.call(this,s),this.requestUpdate(t,r,i);},configurable:!0,enumerable:!0}}static getPropertyOptions(t){return this.elementProperties.get(t)??y$3}static _$Ei(){if(this.hasOwnProperty(d$3("elementProperties")))return;const t=n$6(this);t.finalize(),void 0!==t.l&&(this.l=[...t.l]),this.elementProperties=new Map(t.elementProperties);}static finalize(){if(this.hasOwnProperty(d$3("finalized")))return;if(this.finalized=!0,this._$Ei(),this.hasOwnProperty(d$3("properties"))){const t=this.properties,s=[...h$3(t),...o$8(t)];for(const i of s)this.createProperty(i,t[i]);}const t=this[Symbol.metadata];if(null!==t){const s=litPropertyMetadata.get(t);if(void 0!==s)for(const[t,i]of s)this.elementProperties.set(t,i);}this._$Eh=new Map;for(const[t,s]of this.elementProperties){const i=this._$Eu(t,s);void 0!==i&&this._$Eh.set(i,t);}this.elementStyles=this.finalizeStyles(this.styles);}static finalizeStyles(s){const i=[];if(Array.isArray(s)){const e=new Set(s.flat(1/0).reverse());for(const s of e)i.unshift(c$5(s));}else void 0!==s&&i.push(c$5(s));return i}static _$Eu(t,s){const i=s.attribute;return !1===i?void 0:"string"==typeof i?i:"string"==typeof t?t.toLowerCase():void 0}constructor(){super(),this._$Ep=void 0,this.isUpdatePending=!1,this.hasUpdated=!1,this._$Em=null,this._$Ev();}_$Ev(){this._$ES=new Promise((t=>this.enableUpdating=t)),this._$AL=new Map,this._$E_(),this.requestUpdate(),this.constructor.l?.forEach((t=>t(this)));}addController(t){(this._$EO??=new Set).add(t),void 0!==this.renderRoot&&this.isConnected&&t.hostConnected?.();}removeController(t){this._$EO?.delete(t);}_$E_(){const t=new Map,s=this.constructor.elementProperties;for(const i of s.keys())this.hasOwnProperty(i)&&(t.set(i,this[i]),delete this[i]);t.size>0&&(this._$Ep=t);}createRenderRoot(){const t=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return S$3(t,this.constructor.elementStyles),t}connectedCallback(){this.renderRoot??=this.createRenderRoot(),this.enableUpdating(!0),this._$EO?.forEach((t=>t.hostConnected?.()));}enableUpdating(t){}disconnectedCallback(){this._$EO?.forEach((t=>t.hostDisconnected?.()));}attributeChangedCallback(t,s,i){this._$AK(t,i);}_$EC(t,s){const i=this.constructor.elementProperties.get(t),e=this.constructor._$Eu(t,i);if(void 0!==e&&!0===i.reflect){const r=(void 0!==i.converter?.toAttribute?i.converter:u$5).toAttribute(s,i.type);this._$Em=t,null==r?this.removeAttribute(e):this.setAttribute(e,r),this._$Em=null;}}_$AK(t,s){const i=this.constructor,e=i._$Eh.get(t);if(void 0!==e&&this._$Em!==e){const t=i.getPropertyOptions(e),r="function"==typeof t.converter?{fromAttribute:t.converter}:void 0!==t.converter?.fromAttribute?t.converter:u$5;this._$Em=e,this[e]=r.fromAttribute(s,t.type),this._$Em=null;}}requestUpdate(t,s,i){if(void 0!==t){if(i??=this.constructor.getPropertyOptions(t),!(i.hasChanged??f$3)(this[t],s))return;this.P(t,s,i);}!1===this.isUpdatePending&&(this._$ES=this._$ET());}P(t,s,i){this._$AL.has(t)||this._$AL.set(t,s),!0===i.reflect&&this._$Em!==t&&(this._$Ej??=new Set).add(t);}async _$ET(){this.isUpdatePending=!0;try{await this._$ES;}catch(t){Promise.reject(t);}const t=this.scheduleUpdate();return null!=t&&await t,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){if(!this.isUpdatePending)return;if(!this.hasUpdated){if(this.renderRoot??=this.createRenderRoot(),this._$Ep){for(const[t,s]of this._$Ep)this[t]=s;this._$Ep=void 0;}const t=this.constructor.elementProperties;if(t.size>0)for(const[s,i]of t)!0!==i.wrapped||this._$AL.has(s)||void 0===this[s]||this.P(s,this[s],i);}let t=!1;const s=this._$AL;try{t=this.shouldUpdate(s),t?(this.willUpdate(s),this._$EO?.forEach((t=>t.hostUpdate?.())),this.update(s)):this._$EU();}catch(s){throw t=!1,this._$EU(),s}t&&this._$AE(s);}willUpdate(t){}_$AE(t){this._$EO?.forEach((t=>t.hostUpdated?.())),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(t)),this.updated(t);}_$EU(){this._$AL=new Map,this.isUpdatePending=!1;}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$ES}shouldUpdate(t){return !0}update(t){this._$Ej&&=this._$Ej.forEach((t=>this._$EC(t,this[t]))),this._$EU();}updated(t){}firstUpdated(t){}};b$1.elementStyles=[],b$1.shadowRootOptions={mode:"open"},b$1[d$3("elementProperties")]=new Map,b$1[d$3("finalized")]=new Map,p$3?.({ReactiveElement:b$1}),(a$5.reactiveElementVersions??=[]).push("2.0.4");
+ */const{is:i$e,defineProperty:e$b,getOwnPropertyDescriptor:r$b,getOwnPropertyNames:h$6,getOwnPropertySymbols:o$b,getPrototypeOf:n$9}=Object,a$7=globalThis,c$8=a$7.trustedTypes,l$7=c$8?c$8.emptyScript:"",p$6=a$7.reactiveElementPolyfillSupport,d$6=(t,s)=>t,u$7={toAttribute(t,s){switch(s){case Boolean:t=t?l$7:null;break;case Object:case Array:t=null==t?t:JSON.stringify(t);}return t},fromAttribute(t,s){let i=t;switch(s){case Boolean:i=null!==t;break;case Number:i=null===t?null:Number(t);break;case Object:case Array:try{i=JSON.parse(t);}catch(t){i=null;}}return i}},f$6=(t,s)=>!i$e(t,s),y$5={attribute:true,type:String,converter:u$7,reflect:false,hasChanged:f$6};Symbol.metadata??=Symbol("metadata"),a$7.litPropertyMetadata??=new WeakMap;let b$3 = class b extends HTMLElement{static addInitializer(t){this._$Ei(),(this.l??=[]).push(t);}static get observedAttributes(){return this.finalize(),this._$Eh&&[...this._$Eh.keys()]}static createProperty(t,s=y$5){if(s.state&&(s.attribute=false),this._$Ei(),this.elementProperties.set(t,s),!s.noAccessor){const i=Symbol(),r=this.getPropertyDescriptor(t,i,s);void 0!==r&&e$b(this.prototype,t,r);}}static getPropertyDescriptor(t,s,i){const{get:e,set:h}=r$b(this.prototype,t)??{get(){return this[s]},set(t){this[s]=t;}};return {get(){return e?.call(this)},set(s){const r=e?.call(this);h.call(this,s),this.requestUpdate(t,r,i);},configurable:true,enumerable:true}}static getPropertyOptions(t){return this.elementProperties.get(t)??y$5}static _$Ei(){if(this.hasOwnProperty(d$6("elementProperties")))return;const t=n$9(this);t.finalize(),void 0!==t.l&&(this.l=[...t.l]),this.elementProperties=new Map(t.elementProperties);}static finalize(){if(this.hasOwnProperty(d$6("finalized")))return;if(this.finalized=true,this._$Ei(),this.hasOwnProperty(d$6("properties"))){const t=this.properties,s=[...h$6(t),...o$b(t)];for(const i of s)this.createProperty(i,t[i]);}const t=this[Symbol.metadata];if(null!==t){const s=litPropertyMetadata.get(t);if(void 0!==s)for(const[t,i]of s)this.elementProperties.set(t,i);}this._$Eh=new Map;for(const[t,s]of this.elementProperties){const i=this._$Eu(t,s);void 0!==i&&this._$Eh.set(i,t);}this.elementStyles=this.finalizeStyles(this.styles);}static finalizeStyles(s){const i=[];if(Array.isArray(s)){const e=new Set(s.flat(1/0).reverse());for(const s of e)i.unshift(c$9(s));}else void 0!==s&&i.push(c$9(s));return i}static _$Eu(t,s){const i=s.attribute;return  false===i?void 0:"string"==typeof i?i:"string"==typeof t?t.toLowerCase():void 0}constructor(){super(),this._$Ep=void 0,this.isUpdatePending=false,this.hasUpdated=false,this._$Em=null,this._$Ev();}_$Ev(){this._$ES=new Promise((t=>this.enableUpdating=t)),this._$AL=new Map,this._$E_(),this.requestUpdate(),this.constructor.l?.forEach((t=>t(this)));}addController(t){(this._$EO??=new Set).add(t),void 0!==this.renderRoot&&this.isConnected&&t.hostConnected?.();}removeController(t){this._$EO?.delete(t);}_$E_(){const t=new Map,s=this.constructor.elementProperties;for(const i of s.keys())this.hasOwnProperty(i)&&(t.set(i,this[i]),delete this[i]);t.size>0&&(this._$Ep=t);}createRenderRoot(){const t=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return S$6(t,this.constructor.elementStyles),t}connectedCallback(){this.renderRoot??=this.createRenderRoot(),this.enableUpdating(true),this._$EO?.forEach((t=>t.hostConnected?.()));}enableUpdating(t){}disconnectedCallback(){this._$EO?.forEach((t=>t.hostDisconnected?.()));}attributeChangedCallback(t,s,i){this._$AK(t,i);}_$EC(t,s){const i=this.constructor.elementProperties.get(t),e=this.constructor._$Eu(t,i);if(void 0!==e&&true===i.reflect){const r=(void 0!==i.converter?.toAttribute?i.converter:u$7).toAttribute(s,i.type);this._$Em=t,null==r?this.removeAttribute(e):this.setAttribute(e,r),this._$Em=null;}}_$AK(t,s){const i=this.constructor,e=i._$Eh.get(t);if(void 0!==e&&this._$Em!==e){const t=i.getPropertyOptions(e),r="function"==typeof t.converter?{fromAttribute:t.converter}:void 0!==t.converter?.fromAttribute?t.converter:u$7;this._$Em=e,this[e]=r.fromAttribute(s,t.type),this._$Em=null;}}requestUpdate(t,s,i){if(void 0!==t){if(i??=this.constructor.getPropertyOptions(t),!(i.hasChanged??f$6)(this[t],s))return;this.P(t,s,i);} false===this.isUpdatePending&&(this._$ES=this._$ET());}P(t,s,i){this._$AL.has(t)||this._$AL.set(t,s),true===i.reflect&&this._$Em!==t&&(this._$Ej??=new Set).add(t);}async _$ET(){this.isUpdatePending=true;try{await this._$ES;}catch(t){Promise.reject(t);}const t=this.scheduleUpdate();return null!=t&&await t,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){if(!this.isUpdatePending)return;if(!this.hasUpdated){if(this.renderRoot??=this.createRenderRoot(),this._$Ep){for(const[t,s]of this._$Ep)this[t]=s;this._$Ep=void 0;}const t=this.constructor.elementProperties;if(t.size>0)for(const[s,i]of t) true!==i.wrapped||this._$AL.has(s)||void 0===this[s]||this.P(s,this[s],i);}let t=false;const s=this._$AL;try{t=this.shouldUpdate(s),t?(this.willUpdate(s),this._$EO?.forEach((t=>t.hostUpdate?.())),this.update(s)):this._$EU();}catch(s){throw t=false,this._$EU(),s}t&&this._$AE(s);}willUpdate(t){}_$AE(t){this._$EO?.forEach((t=>t.hostUpdated?.())),this.hasUpdated||(this.hasUpdated=true,this.firstUpdated(t)),this.updated(t);}_$EU(){this._$AL=new Map,this.isUpdatePending=false;}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$ES}shouldUpdate(t){return  true}update(t){this._$Ej&&=this._$Ej.forEach((t=>this._$EC(t,this[t]))),this._$EU();}updated(t){}firstUpdated(t){}};b$3.elementStyles=[],b$3.shadowRootOptions={mode:"open"},b$3[d$6("elementProperties")]=new Map,b$3[d$6("finalized")]=new Map,p$6?.({ReactiveElement:b$3}),(a$7.reactiveElementVersions??=[]).push("2.0.4");
 
 /**
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const t$4=globalThis,i$9=t$4.trustedTypes,s$4=i$9?i$9.createPolicy("lit-html",{createHTML:t=>t}):void 0,e$7="$lit$",h$2=`lit$${Math.random().toFixed(9).slice(2)}$`,o$7="?"+h$2,n$5=`<${o$7}>`,r$5=document,l$4=()=>r$5.createComment(""),c$3=t=>null===t||"object"!=typeof t&&"function"!=typeof t,a$4=Array.isArray,u$4=t=>a$4(t)||"function"==typeof t?.[Symbol.iterator],d$2="[ \t\n\f\r]",f$2=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,v$1=/-->/g,_$1=/>/g,m$1=RegExp(`>|${d$2}(?:([^\\s"'>=/]+)(${d$2}*=${d$2}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,"g"),p$2=/'/g,g$1=/"/g,$$1=/^(?:script|style|textarea|title)$/i,y$2=t=>(i,...s)=>({_$litType$:t,strings:i,values:s}),x$1=y$2(1),T$1=Symbol.for("lit-noChange"),E$1=Symbol.for("lit-nothing"),A$1=new WeakMap,C$1=r$5.createTreeWalker(r$5,129);function P$1(t,i){if(!a$4(t)||!t.hasOwnProperty("raw"))throw Error("invalid template strings array");return void 0!==s$4?s$4.createHTML(i):i}const V$1=(t,i)=>{const s=t.length-1,o=[];let r,l=2===i?"<svg>":3===i?"<math>":"",c=f$2;for(let i=0;i<s;i++){const s=t[i];let a,u,d=-1,y=0;for(;y<s.length&&(c.lastIndex=y,u=c.exec(s),null!==u);)y=c.lastIndex,c===f$2?"!--"===u[1]?c=v$1:void 0!==u[1]?c=_$1:void 0!==u[2]?($$1.test(u[2])&&(r=RegExp("</"+u[2],"g")),c=m$1):void 0!==u[3]&&(c=m$1):c===m$1?">"===u[0]?(c=r??f$2,d=-1):void 0===u[1]?d=-2:(d=c.lastIndex-u[2].length,a=u[1],c=void 0===u[3]?m$1:'"'===u[3]?g$1:p$2):c===g$1||c===p$2?c=m$1:c===v$1||c===_$1?c=f$2:(c=m$1,r=void 0);const x=c===m$1&&t[i+1].startsWith("/>")?" ":"";l+=c===f$2?s+n$5:d>=0?(o.push(a),s.slice(0,d)+e$7+s.slice(d)+h$2+x):s+h$2+(-2===d?i:x);}return [P$1(t,l+(t[s]||"<?>")+(2===i?"</svg>":3===i?"</math>":"")),o]};let N$1 = class N{constructor({strings:t,_$litType$:s},n){let r;this.parts=[];let c=0,a=0;const u=t.length-1,d=this.parts,[f,v]=V$1(t,s);if(this.el=N.createElement(f,n),C$1.currentNode=this.el.content,2===s||3===s){const t=this.el.content.firstChild;t.replaceWith(...t.childNodes);}for(;null!==(r=C$1.nextNode())&&d.length<u;){if(1===r.nodeType){if(r.hasAttributes())for(const t of r.getAttributeNames())if(t.endsWith(e$7)){const i=v[a++],s=r.getAttribute(t).split(h$2),e=/([.?@])?(.*)/.exec(i);d.push({type:1,index:c,name:e[2],strings:s,ctor:"."===e[1]?H$1:"?"===e[1]?I$1:"@"===e[1]?L$1:k$1}),r.removeAttribute(t);}else t.startsWith(h$2)&&(d.push({type:6,index:c}),r.removeAttribute(t));if($$1.test(r.tagName)){const t=r.textContent.split(h$2),s=t.length-1;if(s>0){r.textContent=i$9?i$9.emptyScript:"";for(let i=0;i<s;i++)r.append(t[i],l$4()),C$1.nextNode(),d.push({type:2,index:++c});r.append(t[s],l$4());}}}else if(8===r.nodeType)if(r.data===o$7)d.push({type:2,index:c});else {let t=-1;for(;-1!==(t=r.data.indexOf(h$2,t+1));)d.push({type:7,index:c}),t+=h$2.length-1;}c++;}}static createElement(t,i){const s=r$5.createElement("template");return s.innerHTML=t,s}};function S$2(t,i,s=t,e){if(i===T$1)return i;let h=void 0!==e?s._$Co?.[e]:s._$Cl;const o=c$3(i)?void 0:i._$litDirective$;return h?.constructor!==o&&(h?._$AO?.(!1),void 0===o?h=void 0:(h=new o(t),h._$AT(t,s,e)),void 0!==e?(s._$Co??=[])[e]=h:s._$Cl=h),void 0!==h&&(i=S$2(t,h._$AS(t,i.values),h,e)),i}let M$1 = 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){const{el:{content:i},parts:s}=this._$AD,e=(t?.creationScope??r$5).importNode(i,!0);C$1.currentNode=e;let h=C$1.nextNode(),o=0,n=0,l=s[0];for(;void 0!==l;){if(o===l.index){let i;2===l.type?i=new R$1(h,h.nextSibling,this,t):1===l.type?i=new l.ctor(h,l.name,l.strings,this,t):6===l.type&&(i=new z$1(h,this,t)),this._$AV.push(i),l=s[++n];}o!==l?.index&&(h=C$1.nextNode(),o++);}return C$1.currentNode=r$5,e}p(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++;}};let R$1 = class R{get _$AU(){return this._$AM?._$AU??this._$Cv}constructor(t,i,s,e){this.type=2,this._$AH=E$1,this._$AN=void 0,this._$AA=t,this._$AB=i,this._$AM=s,this.options=e,this._$Cv=e?.isConnected??!0;}get parentNode(){let t=this._$AA.parentNode;const i=this._$AM;return void 0!==i&&11===t?.nodeType&&(t=i.parentNode),t}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(t,i=this){t=S$2(this,t,i),c$3(t)?t===E$1||null==t||""===t?(this._$AH!==E$1&&this._$AR(),this._$AH=E$1):t!==this._$AH&&t!==T$1&&this._(t):void 0!==t._$litType$?this.$(t):void 0!==t.nodeType?this.T(t):u$4(t)?this.k(t):this._(t);}O(t){return this._$AA.parentNode.insertBefore(t,this._$AB)}T(t){this._$AH!==t&&(this._$AR(),this._$AH=this.O(t));}_(t){this._$AH!==E$1&&c$3(this._$AH)?this._$AA.nextSibling.data=t:this.T(r$5.createTextNode(t)),this._$AH=t;}$(t){const{values:i,_$litType$:s}=t,e="number"==typeof s?this._$AC(t):(void 0===s.el&&(s.el=N$1.createElement(P$1(s.h,s.h[0]),this.options)),s);if(this._$AH?._$AD===e)this._$AH.p(i);else {const t=new M$1(e,this),s=t.u(this.options);t.p(i),this.T(s),this._$AH=t;}}_$AC(t){let i=A$1.get(t.strings);return void 0===i&&A$1.set(t.strings,i=new N$1(t)),i}k(t){a$4(this._$AH)||(this._$AH=[],this._$AR());const i=this._$AH;let s,e=0;for(const h of t)e===i.length?i.push(s=new R(this.O(l$4()),this.O(l$4()),this,this.options)):s=i[e],s._$AI(h),e++;e<i.length&&(this._$AR(s&&s._$AB.nextSibling,e),i.length=e);}_$AR(t=this._$AA.nextSibling,i){for(this._$AP?.(!1,!0,i);t&&t!==this._$AB;){const i=t.nextSibling;t.remove(),t=i;}}setConnected(t){void 0===this._$AM&&(this._$Cv=t,this._$AP?.(t));}};let k$1 = class k{get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}constructor(t,i,s,e,h){this.type=1,this._$AH=E$1,this._$AN=void 0,this.element=t,this.name=i,this._$AM=e,this.options=h,s.length>2||""!==s[0]||""!==s[1]?(this._$AH=Array(s.length-1).fill(new String),this.strings=s):this._$AH=E$1;}_$AI(t,i=this,s,e){const h=this.strings;let o=!1;if(void 0===h)t=S$2(this,t,i,0),o=!c$3(t)||t!==this._$AH&&t!==T$1,o&&(this._$AH=t);else {const e=t;let n,r;for(t=h[0],n=0;n<h.length-1;n++)r=S$2(this,e[s+n],i,n),r===T$1&&(r=this._$AH[n]),o||=!c$3(r)||r!==this._$AH[n],r===E$1?t=E$1:t!==E$1&&(t+=(r??"")+h[n+1]),this._$AH[n]=r;}o&&!e&&this.j(t);}j(t){t===E$1?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,t??"");}};let H$1 = class H extends k$1{constructor(){super(...arguments),this.type=3;}j(t){this.element[this.name]=t===E$1?void 0:t;}};let I$1 = class I extends k$1{constructor(){super(...arguments),this.type=4;}j(t){this.element.toggleAttribute(this.name,!!t&&t!==E$1);}};let L$1 = class L extends k$1{constructor(t,i,s,e,h){super(t,i,s,e,h),this.type=5;}_$AI(t,i=this){if((t=S$2(this,t,i,0)??E$1)===T$1)return;const s=this._$AH,e=t===E$1&&s!==E$1||t.capture!==s.capture||t.once!==s.once||t.passive!==s.passive,h=t!==E$1&&(s===E$1||e);e&&this.element.removeEventListener(this.name,this,s),h&&this.element.addEventListener(this.name,this,t),this._$AH=t;}handleEvent(t){"function"==typeof this._$AH?this._$AH.call(this.options?.host??this.element,t):this._$AH.handleEvent(t);}};let z$1 = 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$2(this,t);}};const j$1=t$4.litHtmlPolyfillSupport;j$1?.(N$1,R$1),(t$4.litHtmlVersions??=[]).push("3.2.1");const B$1=(t,i,s)=>{const e=s?.renderBefore??i;let h=e._$litPart$;if(void 0===h){const t=s?.renderBefore??null;e._$litPart$=h=new R$1(i.insertBefore(l$4(),t),t,void 0,s??{});}return h._$AI(t),h};
+const t$6=globalThis,i$d=t$6.trustedTypes,s$6=i$d?i$d.createPolicy("lit-html",{createHTML:t=>t}):void 0,e$a="$lit$",h$5=`lit$${Math.random().toFixed(9).slice(2)}$`,o$a="?"+h$5,n$8=`<${o$a}>`,r$a=document,l$6=()=>r$a.createComment(""),c$7=t=>null===t||"object"!=typeof t&&"function"!=typeof t,a$6=Array.isArray,u$6=t=>a$6(t)||"function"==typeof t?.[Symbol.iterator],d$5="[ \t\n\f\r]",f$5=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,v$3=/-->/g,_$3=/>/g,m$3=RegExp(`>|${d$5}(?:([^\\s"'>=/]+)(${d$5}*=${d$5}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,"g"),p$5=/'/g,g$3=/"/g,$$3=/^(?:script|style|textarea|title)$/i,y$4=t=>(i,...s)=>({_$litType$:t,strings:i,values:s}),x$2=y$4(1),T$3=Symbol.for("lit-noChange"),E$3=Symbol.for("lit-nothing"),A$3=new WeakMap,C$3=r$a.createTreeWalker(r$a,129);function P$3(t,i){if(!a$6(t)||!t.hasOwnProperty("raw"))throw Error("invalid template strings array");return void 0!==s$6?s$6.createHTML(i):i}const V$3=(t,i)=>{const s=t.length-1,o=[];let r,l=2===i?"<svg>":3===i?"<math>":"",c=f$5;for(let i=0;i<s;i++){const s=t[i];let a,u,d=-1,y=0;for(;y<s.length&&(c.lastIndex=y,u=c.exec(s),null!==u);)y=c.lastIndex,c===f$5?"!--"===u[1]?c=v$3:void 0!==u[1]?c=_$3:void 0!==u[2]?($$3.test(u[2])&&(r=RegExp("</"+u[2],"g")),c=m$3):void 0!==u[3]&&(c=m$3):c===m$3?">"===u[0]?(c=r??f$5,d=-1):void 0===u[1]?d=-2:(d=c.lastIndex-u[2].length,a=u[1],c=void 0===u[3]?m$3:'"'===u[3]?g$3:p$5):c===g$3||c===p$5?c=m$3:c===v$3||c===_$3?c=f$5:(c=m$3,r=void 0);const x=c===m$3&&t[i+1].startsWith("/>")?" ":"";l+=c===f$5?s+n$8:d>=0?(o.push(a),s.slice(0,d)+e$a+s.slice(d)+h$5+x):s+h$5+(-2===d?i:x);}return [P$3(t,l+(t[s]||"<?>")+(2===i?"</svg>":3===i?"</math>":"")),o]};let N$3 = class N{constructor({strings:t,_$litType$:s},n){let r;this.parts=[];let c=0,a=0;const u=t.length-1,d=this.parts,[f,v]=V$3(t,s);if(this.el=N.createElement(f,n),C$3.currentNode=this.el.content,2===s||3===s){const t=this.el.content.firstChild;t.replaceWith(...t.childNodes);}for(;null!==(r=C$3.nextNode())&&d.length<u;){if(1===r.nodeType){if(r.hasAttributes())for(const t of r.getAttributeNames())if(t.endsWith(e$a)){const i=v[a++],s=r.getAttribute(t).split(h$5),e=/([.?@])?(.*)/.exec(i);d.push({type:1,index:c,name:e[2],strings:s,ctor:"."===e[1]?H$3:"?"===e[1]?I$3:"@"===e[1]?L$3:k$3}),r.removeAttribute(t);}else t.startsWith(h$5)&&(d.push({type:6,index:c}),r.removeAttribute(t));if($$3.test(r.tagName)){const t=r.textContent.split(h$5),s=t.length-1;if(s>0){r.textContent=i$d?i$d.emptyScript:"";for(let i=0;i<s;i++)r.append(t[i],l$6()),C$3.nextNode(),d.push({type:2,index:++c});r.append(t[s],l$6());}}}else if(8===r.nodeType)if(r.data===o$a)d.push({type:2,index:c});else {let t=-1;for(;-1!==(t=r.data.indexOf(h$5,t+1));)d.push({type:7,index:c}),t+=h$5.length-1;}c++;}}static createElement(t,i){const s=r$a.createElement("template");return s.innerHTML=t,s}};function S$5(t,i,s=t,e){if(i===T$3)return i;let h=void 0!==e?s._$Co?.[e]:s._$Cl;const o=c$7(i)?void 0:i._$litDirective$;return h?.constructor!==o&&(h?._$AO?.(false),void 0===o?h=void 0:(h=new o(t),h._$AT(t,s,e)),void 0!==e?(s._$Co??=[])[e]=h:s._$Cl=h),void 0!==h&&(i=S$5(t,h._$AS(t,i.values),h,e)),i}let M$3 = 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){const{el:{content:i},parts:s}=this._$AD,e=(t?.creationScope??r$a).importNode(i,true);C$3.currentNode=e;let h=C$3.nextNode(),o=0,n=0,l=s[0];for(;void 0!==l;){if(o===l.index){let i;2===l.type?i=new R$3(h,h.nextSibling,this,t):1===l.type?i=new l.ctor(h,l.name,l.strings,this,t):6===l.type&&(i=new z$3(h,this,t)),this._$AV.push(i),l=s[++n];}o!==l?.index&&(h=C$3.nextNode(),o++);}return C$3.currentNode=r$a,e}p(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++;}};let R$3 = class R{get _$AU(){return this._$AM?._$AU??this._$Cv}constructor(t,i,s,e){this.type=2,this._$AH=E$3,this._$AN=void 0,this._$AA=t,this._$AB=i,this._$AM=s,this.options=e,this._$Cv=e?.isConnected??true;}get parentNode(){let t=this._$AA.parentNode;const i=this._$AM;return void 0!==i&&11===t?.nodeType&&(t=i.parentNode),t}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(t,i=this){t=S$5(this,t,i),c$7(t)?t===E$3||null==t||""===t?(this._$AH!==E$3&&this._$AR(),this._$AH=E$3):t!==this._$AH&&t!==T$3&&this._(t):void 0!==t._$litType$?this.$(t):void 0!==t.nodeType?this.T(t):u$6(t)?this.k(t):this._(t);}O(t){return this._$AA.parentNode.insertBefore(t,this._$AB)}T(t){this._$AH!==t&&(this._$AR(),this._$AH=this.O(t));}_(t){this._$AH!==E$3&&c$7(this._$AH)?this._$AA.nextSibling.data=t:this.T(r$a.createTextNode(t)),this._$AH=t;}$(t){const{values:i,_$litType$:s}=t,e="number"==typeof s?this._$AC(t):(void 0===s.el&&(s.el=N$3.createElement(P$3(s.h,s.h[0]),this.options)),s);if(this._$AH?._$AD===e)this._$AH.p(i);else {const t=new M$3(e,this),s=t.u(this.options);t.p(i),this.T(s),this._$AH=t;}}_$AC(t){let i=A$3.get(t.strings);return void 0===i&&A$3.set(t.strings,i=new N$3(t)),i}k(t){a$6(this._$AH)||(this._$AH=[],this._$AR());const i=this._$AH;let s,e=0;for(const h of t)e===i.length?i.push(s=new R(this.O(l$6()),this.O(l$6()),this,this.options)):s=i[e],s._$AI(h),e++;e<i.length&&(this._$AR(s&&s._$AB.nextSibling,e),i.length=e);}_$AR(t=this._$AA.nextSibling,i){for(this._$AP?.(false,true,i);t&&t!==this._$AB;){const i=t.nextSibling;t.remove(),t=i;}}setConnected(t){ void 0===this._$AM&&(this._$Cv=t,this._$AP?.(t));}};let k$3 = class k{get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}constructor(t,i,s,e,h){this.type=1,this._$AH=E$3,this._$AN=void 0,this.element=t,this.name=i,this._$AM=e,this.options=h,s.length>2||""!==s[0]||""!==s[1]?(this._$AH=Array(s.length-1).fill(new String),this.strings=s):this._$AH=E$3;}_$AI(t,i=this,s,e){const h=this.strings;let o=false;if(void 0===h)t=S$5(this,t,i,0),o=!c$7(t)||t!==this._$AH&&t!==T$3,o&&(this._$AH=t);else {const e=t;let n,r;for(t=h[0],n=0;n<h.length-1;n++)r=S$5(this,e[s+n],i,n),r===T$3&&(r=this._$AH[n]),o||=!c$7(r)||r!==this._$AH[n],r===E$3?t=E$3:t!==E$3&&(t+=(r??"")+h[n+1]),this._$AH[n]=r;}o&&!e&&this.j(t);}j(t){t===E$3?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,t??"");}};let H$3 = class H extends k$3{constructor(){super(...arguments),this.type=3;}j(t){this.element[this.name]=t===E$3?void 0:t;}};let I$3 = class I extends k$3{constructor(){super(...arguments),this.type=4;}j(t){this.element.toggleAttribute(this.name,!!t&&t!==E$3);}};let L$3 = class L extends k$3{constructor(t,i,s,e,h){super(t,i,s,e,h),this.type=5;}_$AI(t,i=this){if((t=S$5(this,t,i,0)??E$3)===T$3)return;const s=this._$AH,e=t===E$3&&s!==E$3||t.capture!==s.capture||t.once!==s.once||t.passive!==s.passive,h=t!==E$3&&(s===E$3||e);e&&this.element.removeEventListener(this.name,this,s),h&&this.element.addEventListener(this.name,this,t),this._$AH=t;}handleEvent(t){"function"==typeof this._$AH?this._$AH.call(this.options?.host??this.element,t):this._$AH.handleEvent(t);}};let z$3 = 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$5(this,t);}};const j$3=t$6.litHtmlPolyfillSupport;j$3?.(N$3,R$3),(t$6.litHtmlVersions??=[]).push("3.2.1");const B$3=(t,i,s)=>{const e=s?.renderBefore??i;let h=e._$litPart$;if(void 0===h){const t=s?.renderBefore??null;e._$litPart$=h=new R$3(i.insertBefore(l$6(),t),t,void 0,s??{});}return h._$AI(t),h};
 
 /**
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
- */let r$4 = class r extends b$1{constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=void 0;}createRenderRoot(){const t=super.createRenderRoot();return this.renderOptions.renderBefore??=t.firstChild,t}update(t){const s=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(t),this._$Do=B$1(s,this.renderRoot,this.renderOptions);}connectedCallback(){super.connectedCallback(),this._$Do?.setConnected(!0);}disconnectedCallback(){super.disconnectedCallback(),this._$Do?.setConnected(!1);}render(){return T$1}};r$4._$litElement$=!0,r$4["finalized"]=!0,globalThis.litElementHydrateSupport?.({LitElement:r$4});const i$8=globalThis.litElementPolyfillSupport;i$8?.({LitElement:r$4});(globalThis.litElementVersions??=[]).push("4.1.1");
+ */let r$9 = class r extends b$3{constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=void 0;}createRenderRoot(){const t=super.createRenderRoot();return this.renderOptions.renderBefore??=t.firstChild,t}update(t){const s=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(t),this._$Do=B$3(s,this.renderRoot,this.renderOptions);}connectedCallback(){super.connectedCallback(),this._$Do?.setConnected(true);}disconnectedCallback(){super.disconnectedCallback(),this._$Do?.setConnected(false);}render(){return T$3}};r$9._$litElement$=true,r$9["finalized"]=true,globalThis.litElementHydrateSupport?.({LitElement:r$9});const i$c=globalThis.litElementPolyfillSupport;i$c?.({LitElement:r$9});(globalThis.litElementVersions??=[]).push("4.1.1");
 
 /**
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const t$3={ATTRIBUTE:1,CHILD:2,PROPERTY:3,BOOLEAN_ATTRIBUTE:4,EVENT:5,ELEMENT:6},e$6=t=>(...e)=>({_$litDirective$:t,values:e});let i$7 = class i{constructor(t){}get _$AU(){return this._$AM._$AU}_$AT(t,e,i){this._$Ct=t,this._$AM=e,this._$Ci=i;}_$AS(t,e){return this.update(t,e)}update(t,e){return this.render(...e)}};
+const t$5={ATTRIBUTE:1},e$9=t=>(...e)=>({_$litDirective$:t,values:e});let i$b = class i{constructor(t){}get _$AU(){return this._$AM._$AU}_$AT(t,e,i){this._$Ct=t,this._$AM=e,this._$Ci=i;}_$AS(t,e){return this.update(t,e)}update(t,e){return this.render(...e)}};
 
 /**
  * @license
  * Copyright 2018 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
- */const e$5=e$6(class extends i$7{constructor(t){if(super(t),t.type!==t$3.ATTRIBUTE||"class"!==t.name||t.strings?.length>2)throw Error("`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.")}render(t){return " "+Object.keys(t).filter((s=>t[s])).join(" ")+" "}update(s,[i]){if(void 0===this.st){this.st=new Set,void 0!==s.strings&&(this.nt=new Set(s.strings.join(" ").split(/\s/).filter((t=>""!==t))));for(const t in i)i[t]&&!this.nt?.has(t)&&this.st.add(t);return this.render(i)}const r=s.element.classList;for(const t of this.st)t in i||(r.remove(t),this.st.delete(t));for(const t in i){const s=!!i[t];s===this.st.has(t)||this.nt?.has(t)||(s?(r.add(t),this.st.add(t)):(r.remove(t),this.st.delete(t)));}return T$1}});
+ */const e$8=e$9(class extends i$b{constructor(t){if(super(t),t.type!==t$5.ATTRIBUTE||"class"!==t.name||t.strings?.length>2)throw Error("`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.")}render(t){return " "+Object.keys(t).filter((s=>t[s])).join(" ")+" "}update(s,[i]){if(void 0===this.st){this.st=new Set,void 0!==s.strings&&(this.nt=new Set(s.strings.join(" ").split(/\s/).filter((t=>""!==t))));for(const t in i)i[t]&&!this.nt?.has(t)&&this.st.add(t);return this.render(i)}const r=s.element.classList;for(const t of this.st)t in i||(r.remove(t),this.st.delete(t));for(const t in i){const s=!!i[t];s===this.st.has(t)||this.nt?.has(t)||(s?(r.add(t),this.st.add(t)):(r.remove(t),this.st.delete(t)));}return T$3}});
 
 /**
  * @license
  * Copyright 2020 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const a$3=Symbol.for(""),o$6=t=>{if(t?.r===a$3)return t?._$litStatic$},s$3=t=>({_$litStatic$:t,r:a$3}),i$6=(t,...r)=>({_$litStatic$:r.reduce(((r,e,a)=>r+(t=>{if(void 0!==t._$litStatic$)return t._$litStatic$;throw Error(`Value passed to 'literal' function must be a 'literal' result: ${t}. Use 'unsafeStatic' to pass non-literal values, but\n            take care to ensure page security.`)})(e)+t[a+1]),t[0]),r:a$3}),l$3=new Map,n$4=t=>(r,...e)=>{const a=e.length;let s,i;const n=[],u=[];let c,$=0,f=!1;for(;$<a;){for(c=r[$];$<a&&void 0!==(i=e[$],s=o$6(i));)c+=s+r[++$],f=!0;$!==a&&u.push(i),n.push(c),$++;}if($===a&&n.push(r[a]),f){const t=n.join("$$lit$$");void 0===(r=l$3.get(t))&&(n.raw=n,l$3.set(t,r=n)),e=u;}return t(r,...e)},u$3=n$4(x$1);
+const a$5=Symbol.for(""),o$9=t=>{if(t?.r===a$5)return t?._$litStatic$},s$5=t=>({_$litStatic$:t,r:a$5}),i$a=(t,...r)=>({_$litStatic$:r.reduce(((r,e,a)=>r+(t=>{if(void 0!==t._$litStatic$)return t._$litStatic$;throw Error(`Value passed to 'literal' function must be a 'literal' result: ${t}. Use 'unsafeStatic' to pass non-literal values, but\n            take care to ensure page security.`)})(e)+t[a+1]),t[0]),r:a$5}),l$5=new Map,n$7=t=>(r,...e)=>{const a=e.length;let s,i;const n=[],u=[];let c,$=0,f=false;for(;$<a;){for(c=r[$];$<a&&void 0!==(i=e[$],s=o$9(i));)c+=s+r[++$],f=true;$!==a&&u.push(i),n.push(c),$++;}if($===a&&n.push(r[a]),f){const t=n.join("$$lit$$");void 0===(r=l$5.get(t))&&(n.raw=n,l$5.set(t,r=n)),e=u;}return t(r,...e)},u$5=n$7(x$2);
 
 // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -51,7 +51,7 @@ const a$3=Symbol.for(""),o$6=t=>{if(t?.r===a$3)return t?._$litStatic$},s$3=t=>({
 
 /* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
 
-let AuroLibraryRuntimeUtils$1 = class AuroLibraryRuntimeUtils {
+let AuroLibraryRuntimeUtils$2 = class AuroLibraryRuntimeUtils {
 
   /* eslint-disable jsdoc/require-param */
 
@@ -120,7 +120,7 @@ let AuroLibraryRuntimeUtils$1 = class AuroLibraryRuntimeUtils {
 
 class AuroFormValidation {
   constructor() {
-    this.runtimeUtils = new AuroLibraryRuntimeUtils$1();
+    this.runtimeUtils = new AuroLibraryRuntimeUtils$2();
   }
 
   /**
@@ -148,30 +148,87 @@ class AuroFormValidation {
   }
 
   /**
-   * Determines the validity state of the element based on the common attribute restrictions (pattern).
-   * @private
-   * @param {object} elem - HTML element to validate.
+   * Validates the attributes of a given element based on predefined validation rules.
+   *
+   * @param {HTMLElement} elem - The element to be validated.
    * @returns {void}
+   *
+   * @example
+   * // Assuming `inputElement` is a reference to an input element in the DOM
+   * validateElementAttributes(inputElement);
+   *
+   * The function checks the element's attributes against the validation rules defined for 'input' and 'counter' types.
+   * If a validation rule is violated, it sets the element's validity state and error message accordingly.
+   *
+   * Validation rules:
+   * - input:
+   *   - length:
+   *     - tooShort: Checks if the value length is less than the minimum length.
+   *     - tooLong: Checks if the value length exceeds the maximum length.
+   *   - pattern:
+   *     - patternMismatch: Checks if the value does not match the specified pattern.
+   * - counter:
+   *   - range:
+   *     - rangeOverflow: Checks if the value exceeds the maximum value.
+   *     - rangeUnderflow: Checks if the value is less than the minimum value.
    */
-  validateAttributes(elem) {
-    if (elem.pattern) {
-      const pattern = new RegExp(`^${elem.pattern}$`, 'u');
-
-      if (!pattern.test(elem.value)) {
-        elem.validity = 'patternMismatch';
-        elem.errorMessage = elem.setCustomValidityPatternMismatch || elem.setCustomValidity || '';
+  validateElementAttributes(elem) {
+    const validationRules = {
+      input: {
+        length: [
+          {
+            check: (e) => e.value?.length > 0 && e.value?.length < e.minLength,
+            validity: 'tooShort',
+            message: e => e.setCustomValidityTooShort || e.setCustomValidity || ''
+          },
+          {
+            check: (e) => e.value?.length > e.maxLength,
+            validity: 'tooLong',
+            message: e => e.setCustomValidityTooLong || e.setCustomValidity || ''
+          }
+        ],
+        pattern: [
+          {
+            check: (e) => e.pattern && !new RegExp(`^${e.pattern}$`, 'u').test(e.value),
+            validity: 'patternMismatch',
+            message: e => e.setCustomValidityPatternMismatch || e.setCustomValidity || ''
+          }
+        ]
+      },
+      counter: {
+        range: [
+          {
+            check: (e) => e.max !== undefined && Number(e.max) < Number(e.value),
+            validity: 'rangeOverflow',
+            message: e => e.getAttribute('setCustomValidityRangeOverflow') || ''
+          },
+          {
+            check: (e) => e.min !== undefined && Number(e.min) > Number(e.value),
+            validity: 'rangeUnderflow',
+            message: e => e.getAttribute('setCustomValidityRangeUnderflow') || ''
+          }
+        ]
       }
+    };
+  
+    let elementType;
+    if (this.runtimeUtils.elementMatch(elem, 'auro-input')) {
+      elementType = 'input';
+    } else if (this.runtimeUtils.elementMatch(elem, 'auro-counter') || this.runtimeUtils.elementMatch(elem, 'auro-counter-group')) {
+      elementType = 'counter';
     }
-
-    // Length > 0 is required to prevent the error message from showing when the input is empty
-    if (elem.value?.length > 0 && elem.value?.length < elem.minLength) {
-      elem.validity = 'tooShort';
-      elem.errorMessage = elem.setCustomValidityTooShort || elem.setCustomValidity || '';
-    }
     
-    if (elem.value?.length > elem.maxLength) {
-      elem.validity = 'tooLong';
-      elem.errorMessage = elem.setCustomValidityTooLong || elem.setCustomValidity || '';
+    if (elementType) {
+      const rules = validationRules[elementType];
+    
+      if (rules) {
+        Object.values(rules).flat().forEach(rule => {
+          if (rule.check(elem)) {
+            elem.validity = rule.validity;
+            elem.errorMessage = rule.message(elem);
+          }
+        });
+      }
     }
   }
 
@@ -205,20 +262,17 @@ class AuroFormValidation {
           elem.validity = 'rangeUnderflow';
           elem.errorMessage = elem.setCustomValidityRangeUnderflow || elem.setCustomValidity || '';
         }
-      } else if (elem.type === 'month-day-year' ||
-                 elem.type === 'month-year' ||
-                 elem.type === 'month-fullYear' ||
-                 elem.type === 'year-month-day'
-      ) {
-        if (elem.value?.length > 0 && elem.value.length < elem.dateStrLength) {
+      } else if (elem.type === 'date') {
+        if (elem.value?.length > 0 && elem.value?.length < elem.lengthForType) {
           elem.validity = 'tooShort';
           elem.errorMessage = elem.setCustomValidityForType || elem.setCustomValidity || '';
-        } else {
-          const valueDate = new Date(elem.value);
+        } else if (elem.value?.length === elem.lengthForType && elem.util.toNorthAmericanFormat(elem.value, elem.format)) {
+          const formattedValue = elem.util.toNorthAmericanFormat(elem.value, elem.format);
+          const valueDate = new Date(formattedValue.dateForComparison);
 
           // validate max
-          if (elem.max !== undefined) {
-            const maxDate = new Date(elem.max);
+          if (elem.max?.length === elem.lengthForType) {
+            const maxDate = new Date(elem.util.toNorthAmericanFormat(elem.max, elem.format).dateForComparison);
 
             if (valueDate > maxDate) {
               elem.validity = 'rangeOverflow';
@@ -227,8 +281,8 @@ class AuroFormValidation {
           }
 
           // validate min
-          if (elem.min) {
-            const minDate = new Date(elem.min);
+          if (elem.min?.length === elem.lengthForType) {
+            const minDate = new Date(elem.util.toNorthAmericanFormat(elem.min, elem.format).dateForComparison);
 
             if (valueDate < minDate) {
               elem.validity = 'rangeUnderflow';
@@ -281,7 +335,9 @@ class AuroFormValidation {
         elem.errorMessage = elem.setCustomValidityValueMissing || elem.setCustomValidity || '';
       } else if (this.runtimeUtils.elementMatch(elem, 'auro-input')) {
         this.validateType(elem);
-        this.validateAttributes(elem);
+        this.validateElementAttributes(elem);
+      } else if (this.runtimeUtils.elementMatch(elem, 'auro-counter') || this.runtimeUtils.elementMatch(elem, 'auro-counter-group')) {
+        this.validateElementAttributes(elem);
       }
     }
 
@@ -399,7 +455,7 @@ let AuroDependencyVersioning$1 = class AuroDependencyVersioning {
    */
   generateTag(baseName, version, tagClass) {
     const elementName = this.generateElementName(baseName, version);
-    const tag = i$6`${s$3(elementName)}`;
+    const tag = i$a`${s$5(elementName)}`;
 
     if (!customElements.get(elementName)) {
       customElements.define(elementName, class extends tagClass {});
@@ -414,33 +470,33 @@ let AuroDependencyVersioning$1 = class AuroDependencyVersioning {
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const t$2=globalThis,i$5=t$2.trustedTypes,s$2=i$5?i$5.createPolicy("lit-html",{createHTML:t=>t}):void 0,e$4="$lit$",h$1=`lit$${Math.random().toFixed(9).slice(2)}$`,o$4="?"+h$1,n$3=`<${o$4}>`,r$3=document,l$2=()=>r$3.createComment(""),c$2=t=>null===t||"object"!=typeof t&&"function"!=typeof t,a$2=Array.isArray,u$2=t=>a$2(t)||"function"==typeof t?.[Symbol.iterator],d$1="[ \t\n\f\r]",f$1=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,v=/-->/g,_=/>/g,m=RegExp(`>|${d$1}(?:([^\\s"'>=/]+)(${d$1}*=${d$1}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,"g"),p$1=/'/g,g=/"/g,$=/^(?:script|style|textarea|title)$/i,y$1=t=>(i,...s)=>({_$litType$:t,strings:i,values:s}),x=y$1(1),T=Symbol.for("lit-noChange"),E=Symbol.for("lit-nothing"),A=new WeakMap,C=r$3.createTreeWalker(r$3,129);function P(t,i){if(!a$2(t)||!t.hasOwnProperty("raw"))throw Error("invalid template strings array");return void 0!==s$2?s$2.createHTML(i):i}const V=(t,i)=>{const s=t.length-1,o=[];let r,l=2===i?"<svg>":3===i?"<math>":"",c=f$1;for(let i=0;i<s;i++){const s=t[i];let a,u,d=-1,y=0;for(;y<s.length&&(c.lastIndex=y,u=c.exec(s),null!==u);)y=c.lastIndex,c===f$1?"!--"===u[1]?c=v:void 0!==u[1]?c=_:void 0!==u[2]?($.test(u[2])&&(r=RegExp("</"+u[2],"g")),c=m):void 0!==u[3]&&(c=m):c===m?">"===u[0]?(c=r??f$1,d=-1):void 0===u[1]?d=-2:(d=c.lastIndex-u[2].length,a=u[1],c=void 0===u[3]?m:'"'===u[3]?g:p$1):c===g||c===p$1?c=m:c===v||c===_?c=f$1:(c=m,r=void 0);const x=c===m&&t[i+1].startsWith("/>")?" ":"";l+=c===f$1?s+n$3:d>=0?(o.push(a),s.slice(0,d)+e$4+s.slice(d)+h$1+x):s+h$1+(-2===d?i:x);}return [P(t,l+(t[s]||"<?>")+(2===i?"</svg>":3===i?"</math>":"")),o]};class N{constructor({strings:t,_$litType$:s},n){let r;this.parts=[];let c=0,a=0;const u=t.length-1,d=this.parts,[f,v]=V(t,s);if(this.el=N.createElement(f,n),C.currentNode=this.el.content,2===s||3===s){const t=this.el.content.firstChild;t.replaceWith(...t.childNodes);}for(;null!==(r=C.nextNode())&&d.length<u;){if(1===r.nodeType){if(r.hasAttributes())for(const t of r.getAttributeNames())if(t.endsWith(e$4)){const i=v[a++],s=r.getAttribute(t).split(h$1),e=/([.?@])?(.*)/.exec(i);d.push({type:1,index:c,name:e[2],strings:s,ctor:"."===e[1]?H:"?"===e[1]?I:"@"===e[1]?L:k}),r.removeAttribute(t);}else t.startsWith(h$1)&&(d.push({type:6,index:c}),r.removeAttribute(t));if($.test(r.tagName)){const t=r.textContent.split(h$1),s=t.length-1;if(s>0){r.textContent=i$5?i$5.emptyScript:"";for(let i=0;i<s;i++)r.append(t[i],l$2()),C.nextNode(),d.push({type:2,index:++c});r.append(t[s],l$2());}}}else if(8===r.nodeType)if(r.data===o$4)d.push({type:2,index:c});else {let t=-1;for(;-1!==(t=r.data.indexOf(h$1,t+1));)d.push({type:7,index:c}),t+=h$1.length-1;}c++;}}static createElement(t,i){const s=r$3.createElement("template");return s.innerHTML=t,s}}function S$1(t,i,s=t,e){if(i===T)return i;let h=void 0!==e?s._$Co?.[e]:s._$Cl;const o=c$2(i)?void 0:i._$litDirective$;return h?.constructor!==o&&(h?._$AO?.(!1),void 0===o?h=void 0:(h=new o(t),h._$AT(t,s,e)),void 0!==e?(s._$Co??=[])[e]=h:s._$Cl=h),void 0!==h&&(i=S$1(t,h._$AS(t,i.values),h,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){const{el:{content:i},parts:s}=this._$AD,e=(t?.creationScope??r$3).importNode(i,!0);C.currentNode=e;let h=C.nextNode(),o=0,n=0,l=s[0];for(;void 0!==l;){if(o===l.index){let i;2===l.type?i=new R(h,h.nextSibling,this,t):1===l.type?i=new l.ctor(h,l.name,l.strings,this,t):6===l.type&&(i=new z(h,this,t)),this._$AV.push(i),l=s[++n];}o!==l?.index&&(h=C.nextNode(),o++);}return C.currentNode=r$3,e}p(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{get _$AU(){return this._$AM?._$AU??this._$Cv}constructor(t,i,s,e){this.type=2,this._$AH=E,this._$AN=void 0,this._$AA=t,this._$AB=i,this._$AM=s,this.options=e,this._$Cv=e?.isConnected??!0;}get parentNode(){let t=this._$AA.parentNode;const i=this._$AM;return void 0!==i&&11===t?.nodeType&&(t=i.parentNode),t}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(t,i=this){t=S$1(this,t,i),c$2(t)?t===E||null==t||""===t?(this._$AH!==E&&this._$AR(),this._$AH=E):t!==this._$AH&&t!==T&&this._(t):void 0!==t._$litType$?this.$(t):void 0!==t.nodeType?this.T(t):u$2(t)?this.k(t):this._(t);}O(t){return this._$AA.parentNode.insertBefore(t,this._$AB)}T(t){this._$AH!==t&&(this._$AR(),this._$AH=this.O(t));}_(t){this._$AH!==E&&c$2(this._$AH)?this._$AA.nextSibling.data=t:this.T(r$3.createTextNode(t)),this._$AH=t;}$(t){const{values:i,_$litType$:s}=t,e="number"==typeof s?this._$AC(t):(void 0===s.el&&(s.el=N.createElement(P(s.h,s.h[0]),this.options)),s);if(this._$AH?._$AD===e)this._$AH.p(i);else {const t=new M(e,this),s=t.u(this.options);t.p(i),this.T(s),this._$AH=t;}}_$AC(t){let i=A.get(t.strings);return void 0===i&&A.set(t.strings,i=new N(t)),i}k(t){a$2(this._$AH)||(this._$AH=[],this._$AR());const i=this._$AH;let s,e=0;for(const h of t)e===i.length?i.push(s=new R(this.O(l$2()),this.O(l$2()),this,this.options)):s=i[e],s._$AI(h),e++;e<i.length&&(this._$AR(s&&s._$AB.nextSibling,e),i.length=e);}_$AR(t=this._$AA.nextSibling,i){for(this._$AP?.(!1,!0,i);t&&t!==this._$AB;){const i=t.nextSibling;t.remove(),t=i;}}setConnected(t){void 0===this._$AM&&(this._$Cv=t,this._$AP?.(t));}}class k{get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}constructor(t,i,s,e,h){this.type=1,this._$AH=E,this._$AN=void 0,this.element=t,this.name=i,this._$AM=e,this.options=h,s.length>2||""!==s[0]||""!==s[1]?(this._$AH=Array(s.length-1).fill(new String),this.strings=s):this._$AH=E;}_$AI(t,i=this,s,e){const h=this.strings;let o=!1;if(void 0===h)t=S$1(this,t,i,0),o=!c$2(t)||t!==this._$AH&&t!==T,o&&(this._$AH=t);else {const e=t;let n,r;for(t=h[0],n=0;n<h.length-1;n++)r=S$1(this,e[s+n],i,n),r===T&&(r=this._$AH[n]),o||=!c$2(r)||r!==this._$AH[n],r===E?t=E:t!==E&&(t+=(r??"")+h[n+1]),this._$AH[n]=r;}o&&!e&&this.j(t);}j(t){t===E?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,t??"");}}class H extends k{constructor(){super(...arguments),this.type=3;}j(t){this.element[this.name]=t===E?void 0:t;}}class I extends k{constructor(){super(...arguments),this.type=4;}j(t){this.element.toggleAttribute(this.name,!!t&&t!==E);}}class L extends k{constructor(t,i,s,e,h){super(t,i,s,e,h),this.type=5;}_$AI(t,i=this){if((t=S$1(this,t,i,0)??E)===T)return;const s=this._$AH,e=t===E&&s!==E||t.capture!==s.capture||t.once!==s.once||t.passive!==s.passive,h=t!==E&&(s===E||e);e&&this.element.removeEventListener(this.name,this,s),h&&this.element.addEventListener(this.name,this,t),this._$AH=t;}handleEvent(t){"function"==typeof this._$AH?this._$AH.call(this.options?.host??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$1(this,t);}}const j=t$2.litHtmlPolyfillSupport;j?.(N,R),(t$2.litHtmlVersions??=[]).push("3.2.1");const B=(t,i,s)=>{const e=s?.renderBefore??i;let h=e._$litPart$;if(void 0===h){const t=s?.renderBefore??null;e._$litPart$=h=new R(i.insertBefore(l$2(),t),t,void 0,s??{});}return h._$AI(t),h};
+const t$4=globalThis,i$9=t$4.trustedTypes,s$4=i$9?i$9.createPolicy("lit-html",{createHTML:t=>t}):void 0,e$7="$lit$",h$3=`lit$${Math.random().toFixed(9).slice(2)}$`,o$7="?"+h$3,n$6=`<${o$7}>`,r$7=document,l$4=()=>r$7.createComment(""),c$5=t=>null===t||"object"!=typeof t&&"function"!=typeof t,a$4=Array.isArray,u$4=t=>a$4(t)||"function"==typeof t?.[Symbol.iterator],d$3="[ \t\n\f\r]",f$3=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,v$1=/-->/g,_$1=/>/g,m$1=RegExp(`>|${d$3}(?:([^\\s"'>=/]+)(${d$3}*=${d$3}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,"g"),p$3=/'/g,g$1=/"/g,$$1=/^(?:script|style|textarea|title)$/i,y$3=t=>(i,...s)=>({_$litType$:t,strings:i,values:s}),x$1=y$3(1),T$1=Symbol.for("lit-noChange"),E$1=Symbol.for("lit-nothing"),A$1=new WeakMap,C$1=r$7.createTreeWalker(r$7,129);function P$1(t,i){if(!a$4(t)||!t.hasOwnProperty("raw"))throw Error("invalid template strings array");return void 0!==s$4?s$4.createHTML(i):i}const V$1=(t,i)=>{const s=t.length-1,o=[];let r,l=2===i?"<svg>":3===i?"<math>":"",c=f$3;for(let i=0;i<s;i++){const s=t[i];let a,u,d=-1,y=0;for(;y<s.length&&(c.lastIndex=y,u=c.exec(s),null!==u);)y=c.lastIndex,c===f$3?"!--"===u[1]?c=v$1:void 0!==u[1]?c=_$1:void 0!==u[2]?($$1.test(u[2])&&(r=RegExp("</"+u[2],"g")),c=m$1):void 0!==u[3]&&(c=m$1):c===m$1?">"===u[0]?(c=r??f$3,d=-1):void 0===u[1]?d=-2:(d=c.lastIndex-u[2].length,a=u[1],c=void 0===u[3]?m$1:'"'===u[3]?g$1:p$3):c===g$1||c===p$3?c=m$1:c===v$1||c===_$1?c=f$3:(c=m$1,r=void 0);const x=c===m$1&&t[i+1].startsWith("/>")?" ":"";l+=c===f$3?s+n$6:d>=0?(o.push(a),s.slice(0,d)+e$7+s.slice(d)+h$3+x):s+h$3+(-2===d?i:x);}return [P$1(t,l+(t[s]||"<?>")+(2===i?"</svg>":3===i?"</math>":"")),o]};let N$1 = class N{constructor({strings:t,_$litType$:s},n){let r;this.parts=[];let c=0,a=0;const u=t.length-1,d=this.parts,[f,v]=V$1(t,s);if(this.el=N.createElement(f,n),C$1.currentNode=this.el.content,2===s||3===s){const t=this.el.content.firstChild;t.replaceWith(...t.childNodes);}for(;null!==(r=C$1.nextNode())&&d.length<u;){if(1===r.nodeType){if(r.hasAttributes())for(const t of r.getAttributeNames())if(t.endsWith(e$7)){const i=v[a++],s=r.getAttribute(t).split(h$3),e=/([.?@])?(.*)/.exec(i);d.push({type:1,index:c,name:e[2],strings:s,ctor:"."===e[1]?H$1:"?"===e[1]?I$1:"@"===e[1]?L$1:k$1}),r.removeAttribute(t);}else t.startsWith(h$3)&&(d.push({type:6,index:c}),r.removeAttribute(t));if($$1.test(r.tagName)){const t=r.textContent.split(h$3),s=t.length-1;if(s>0){r.textContent=i$9?i$9.emptyScript:"";for(let i=0;i<s;i++)r.append(t[i],l$4()),C$1.nextNode(),d.push({type:2,index:++c});r.append(t[s],l$4());}}}else if(8===r.nodeType)if(r.data===o$7)d.push({type:2,index:c});else {let t=-1;for(;-1!==(t=r.data.indexOf(h$3,t+1));)d.push({type:7,index:c}),t+=h$3.length-1;}c++;}}static createElement(t,i){const s=r$7.createElement("template");return s.innerHTML=t,s}};function S$3(t,i,s=t,e){if(i===T$1)return i;let h=void 0!==e?s._$Co?.[e]:s._$Cl;const o=c$5(i)?void 0:i._$litDirective$;return h?.constructor!==o&&(h?._$AO?.(false),void 0===o?h=void 0:(h=new o(t),h._$AT(t,s,e)),void 0!==e?(s._$Co??=[])[e]=h:s._$Cl=h),void 0!==h&&(i=S$3(t,h._$AS(t,i.values),h,e)),i}let M$1 = 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){const{el:{content:i},parts:s}=this._$AD,e=(t?.creationScope??r$7).importNode(i,true);C$1.currentNode=e;let h=C$1.nextNode(),o=0,n=0,l=s[0];for(;void 0!==l;){if(o===l.index){let i;2===l.type?i=new R$1(h,h.nextSibling,this,t):1===l.type?i=new l.ctor(h,l.name,l.strings,this,t):6===l.type&&(i=new z$1(h,this,t)),this._$AV.push(i),l=s[++n];}o!==l?.index&&(h=C$1.nextNode(),o++);}return C$1.currentNode=r$7,e}p(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++;}};let R$1 = class R{get _$AU(){return this._$AM?._$AU??this._$Cv}constructor(t,i,s,e){this.type=2,this._$AH=E$1,this._$AN=void 0,this._$AA=t,this._$AB=i,this._$AM=s,this.options=e,this._$Cv=e?.isConnected??true;}get parentNode(){let t=this._$AA.parentNode;const i=this._$AM;return void 0!==i&&11===t?.nodeType&&(t=i.parentNode),t}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(t,i=this){t=S$3(this,t,i),c$5(t)?t===E$1||null==t||""===t?(this._$AH!==E$1&&this._$AR(),this._$AH=E$1):t!==this._$AH&&t!==T$1&&this._(t):void 0!==t._$litType$?this.$(t):void 0!==t.nodeType?this.T(t):u$4(t)?this.k(t):this._(t);}O(t){return this._$AA.parentNode.insertBefore(t,this._$AB)}T(t){this._$AH!==t&&(this._$AR(),this._$AH=this.O(t));}_(t){this._$AH!==E$1&&c$5(this._$AH)?this._$AA.nextSibling.data=t:this.T(r$7.createTextNode(t)),this._$AH=t;}$(t){const{values:i,_$litType$:s}=t,e="number"==typeof s?this._$AC(t):(void 0===s.el&&(s.el=N$1.createElement(P$1(s.h,s.h[0]),this.options)),s);if(this._$AH?._$AD===e)this._$AH.p(i);else {const t=new M$1(e,this),s=t.u(this.options);t.p(i),this.T(s),this._$AH=t;}}_$AC(t){let i=A$1.get(t.strings);return void 0===i&&A$1.set(t.strings,i=new N$1(t)),i}k(t){a$4(this._$AH)||(this._$AH=[],this._$AR());const i=this._$AH;let s,e=0;for(const h of t)e===i.length?i.push(s=new R(this.O(l$4()),this.O(l$4()),this,this.options)):s=i[e],s._$AI(h),e++;e<i.length&&(this._$AR(s&&s._$AB.nextSibling,e),i.length=e);}_$AR(t=this._$AA.nextSibling,i){for(this._$AP?.(false,true,i);t&&t!==this._$AB;){const i=t.nextSibling;t.remove(),t=i;}}setConnected(t){ void 0===this._$AM&&(this._$Cv=t,this._$AP?.(t));}};let k$1 = class k{get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}constructor(t,i,s,e,h){this.type=1,this._$AH=E$1,this._$AN=void 0,this.element=t,this.name=i,this._$AM=e,this.options=h,s.length>2||""!==s[0]||""!==s[1]?(this._$AH=Array(s.length-1).fill(new String),this.strings=s):this._$AH=E$1;}_$AI(t,i=this,s,e){const h=this.strings;let o=false;if(void 0===h)t=S$3(this,t,i,0),o=!c$5(t)||t!==this._$AH&&t!==T$1,o&&(this._$AH=t);else {const e=t;let n,r;for(t=h[0],n=0;n<h.length-1;n++)r=S$3(this,e[s+n],i,n),r===T$1&&(r=this._$AH[n]),o||=!c$5(r)||r!==this._$AH[n],r===E$1?t=E$1:t!==E$1&&(t+=(r??"")+h[n+1]),this._$AH[n]=r;}o&&!e&&this.j(t);}j(t){t===E$1?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,t??"");}};let H$1 = class H extends k$1{constructor(){super(...arguments),this.type=3;}j(t){this.element[this.name]=t===E$1?void 0:t;}};let I$1 = class I extends k$1{constructor(){super(...arguments),this.type=4;}j(t){this.element.toggleAttribute(this.name,!!t&&t!==E$1);}};let L$1 = class L extends k$1{constructor(t,i,s,e,h){super(t,i,s,e,h),this.type=5;}_$AI(t,i=this){if((t=S$3(this,t,i,0)??E$1)===T$1)return;const s=this._$AH,e=t===E$1&&s!==E$1||t.capture!==s.capture||t.once!==s.once||t.passive!==s.passive,h=t!==E$1&&(s===E$1||e);e&&this.element.removeEventListener(this.name,this,s),h&&this.element.addEventListener(this.name,this,t),this._$AH=t;}handleEvent(t){"function"==typeof this._$AH?this._$AH.call(this.options?.host??this.element,t):this._$AH.handleEvent(t);}};let z$1 = 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$3(this,t);}};const j$1=t$4.litHtmlPolyfillSupport;j$1?.(N$1,R$1),(t$4.litHtmlVersions??=[]).push("3.2.1");const B$1=(t,i,s)=>{const e=s?.renderBefore??i;let h=e._$litPart$;if(void 0===h){const t=s?.renderBefore??null;e._$litPart$=h=new R$1(i.insertBefore(l$4(),t),t,void 0,s??{});}return h._$AI(t),h};
 
 /**
  * @license
  * Copyright 2020 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const a$1=Symbol.for(""),o$3=t=>{if(t?.r===a$1)return t?._$litStatic$},s$1=t=>({_$litStatic$:t,r:a$1}),i$4=(t,...r)=>({_$litStatic$:r.reduce(((r,e,a)=>r+(t=>{if(void 0!==t._$litStatic$)return t._$litStatic$;throw Error(`Value passed to 'literal' function must be a 'literal' result: ${t}. Use 'unsafeStatic' to pass non-literal values, but\n            take care to ensure page security.`)})(e)+t[a+1]),t[0]),r:a$1}),l$1=new Map,n$2=t=>(r,...e)=>{const a=e.length;let s,i;const n=[],u=[];let c,$=0,f=!1;for(;$<a;){for(c=r[$];$<a&&void 0!==(i=e[$],s=o$3(i));)c+=s+r[++$],f=!0;$!==a&&u.push(i),n.push(c),$++;}if($===a&&n.push(r[a]),f){const t=n.join("$$lit$$");void 0===(r=l$1.get(t))&&(n.raw=n,l$1.set(t,r=n)),e=u;}return t(r,...e)},u$1=n$2(x);
+const a$3=Symbol.for(""),o$6=t=>{if(t?.r===a$3)return t?._$litStatic$},s$3=t=>({_$litStatic$:t,r:a$3}),i$8=(t,...r)=>({_$litStatic$:r.reduce(((r,e,a)=>r+(t=>{if(void 0!==t._$litStatic$)return t._$litStatic$;throw Error(`Value passed to 'literal' function must be a 'literal' result: ${t}. Use 'unsafeStatic' to pass non-literal values, but\n            take care to ensure page security.`)})(e)+t[a+1]),t[0]),r:a$3}),l$3=new Map,n$5=t=>(r,...e)=>{const a=e.length;let s,i;const n=[],u=[];let c,$=0,f=false;for(;$<a;){for(c=r[$];$<a&&void 0!==(i=e[$],s=o$6(i));)c+=s+r[++$],f=true;$!==a&&u.push(i),n.push(c),$++;}if($===a&&n.push(r[a]),f){const t=n.join("$$lit$$");void 0===(r=l$3.get(t))&&(n.raw=n,l$3.set(t,r=n)),e=u;}return t(r,...e)},u$3=n$5(x$1);
 
 /**
  * @license
  * Copyright 2019 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const t$1=globalThis,e$3=t$1.ShadowRoot&&(void 0===t$1.ShadyCSS||t$1.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,s=Symbol(),o$2=new WeakMap;let n$1 = class n{constructor(t,e,o){if(this._$cssResult$=!0,o!==s)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=t,this.t=e;}get styleSheet(){let t=this.o;const s=this.t;if(e$3&&void 0===t){const e=void 0!==s&&1===s.length;e&&(t=o$2.get(s)),void 0===t&&((this.o=t=new CSSStyleSheet).replaceSync(this.cssText),e&&o$2.set(s,t));}return t}toString(){return this.cssText}};const r$2=t=>new n$1("string"==typeof t?t:t+"",void 0,s),i$3=(t,...e)=>{const o=1===t.length?t[0]:e.reduce(((e,s,o)=>e+(t=>{if(!0===t._$cssResult$)return t.cssText;if("number"==typeof t)return t;throw Error("Value passed to 'css' function must be a 'css' function result: "+t+". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.")})(s)+t[o+1]),t[0]);return new n$1(o,t,s)},S=(s,o)=>{if(e$3)s.adoptedStyleSheets=o.map((t=>t instanceof CSSStyleSheet?t:t.styleSheet));else for(const e of o){const o=document.createElement("style"),n=t$1.litNonce;void 0!==n&&o.setAttribute("nonce",n),o.textContent=e.cssText,s.appendChild(o);}},c$1=e$3?t=>t:t=>t instanceof CSSStyleSheet?(t=>{let e="";for(const s of t.cssRules)e+=s.cssText;return r$2(e)})(t):t;
+const t$3=globalThis,e$6=t$3.ShadowRoot&&(void 0===t$3.ShadyCSS||t$3.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,s$2$1=Symbol(),o$5=new WeakMap;let n$4 = class n{constructor(t,e,o){if(this._$cssResult$=true,o!==s$2$1)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=t,this.t=e;}get styleSheet(){let t=this.o;const s=this.t;if(e$6&&void 0===t){const e=void 0!==s&&1===s.length;e&&(t=o$5.get(s)),void 0===t&&((this.o=t=new CSSStyleSheet).replaceSync(this.cssText),e&&o$5.set(s,t));}return t}toString(){return this.cssText}};const r$6=t=>new n$4("string"==typeof t?t:t+"",void 0,s$2$1),i$7=(t,...e)=>{const o=1===t.length?t[0]:e.reduce(((e,s,o)=>e+(t=>{if(true===t._$cssResult$)return t.cssText;if("number"==typeof t)return t;throw Error("Value passed to 'css' function must be a 'css' function result: "+t+". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.")})(s)+t[o+1]),t[0]);return new n$4(o,t,s$2$1)},S$2=(s,o)=>{if(e$6)s.adoptedStyleSheets=o.map((t=>t instanceof CSSStyleSheet?t:t.styleSheet));else for(const e of o){const o=document.createElement("style"),n=t$3.litNonce;void 0!==n&&o.setAttribute("nonce",n),o.textContent=e.cssText,s.appendChild(o);}},c$4=e$6?t=>t:t=>t instanceof CSSStyleSheet?(t=>{let e="";for(const s of t.cssRules)e+=s.cssText;return r$6(e)})(t):t;
 
 /**
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
- */const{is:i$2,defineProperty:e$2,getOwnPropertyDescriptor:r$1,getOwnPropertyNames:h,getOwnPropertySymbols:o$1,getPrototypeOf:n}=Object,a=globalThis,c=a.trustedTypes,l=c?c.emptyScript:"",p=a.reactiveElementPolyfillSupport,d=(t,s)=>t,u={toAttribute(t,s){switch(s){case Boolean:t=t?l:null;break;case Object:case Array:t=null==t?t:JSON.stringify(t);}return t},fromAttribute(t,s){let i=t;switch(s){case Boolean:i=null!==t;break;case Number:i=null===t?null:Number(t);break;case Object:case Array:try{i=JSON.parse(t);}catch(t){i=null;}}return i}},f=(t,s)=>!i$2(t,s),y={attribute:!0,type:String,converter:u,reflect:!1,hasChanged:f};Symbol.metadata??=Symbol("metadata"),a.litPropertyMetadata??=new WeakMap;class b extends HTMLElement{static addInitializer(t){this._$Ei(),(this.l??=[]).push(t);}static get observedAttributes(){return this.finalize(),this._$Eh&&[...this._$Eh.keys()]}static createProperty(t,s=y){if(s.state&&(s.attribute=!1),this._$Ei(),this.elementProperties.set(t,s),!s.noAccessor){const i=Symbol(),r=this.getPropertyDescriptor(t,i,s);void 0!==r&&e$2(this.prototype,t,r);}}static getPropertyDescriptor(t,s,i){const{get:e,set:h}=r$1(this.prototype,t)??{get(){return this[s]},set(t){this[s]=t;}};return {get(){return e?.call(this)},set(s){const r=e?.call(this);h.call(this,s),this.requestUpdate(t,r,i);},configurable:!0,enumerable:!0}}static getPropertyOptions(t){return this.elementProperties.get(t)??y}static _$Ei(){if(this.hasOwnProperty(d("elementProperties")))return;const t=n(this);t.finalize(),void 0!==t.l&&(this.l=[...t.l]),this.elementProperties=new Map(t.elementProperties);}static finalize(){if(this.hasOwnProperty(d("finalized")))return;if(this.finalized=!0,this._$Ei(),this.hasOwnProperty(d("properties"))){const t=this.properties,s=[...h(t),...o$1(t)];for(const i of s)this.createProperty(i,t[i]);}const t=this[Symbol.metadata];if(null!==t){const s=litPropertyMetadata.get(t);if(void 0!==s)for(const[t,i]of s)this.elementProperties.set(t,i);}this._$Eh=new Map;for(const[t,s]of this.elementProperties){const i=this._$Eu(t,s);void 0!==i&&this._$Eh.set(i,t);}this.elementStyles=this.finalizeStyles(this.styles);}static finalizeStyles(s){const i=[];if(Array.isArray(s)){const e=new Set(s.flat(1/0).reverse());for(const s of e)i.unshift(c$1(s));}else void 0!==s&&i.push(c$1(s));return i}static _$Eu(t,s){const i=s.attribute;return !1===i?void 0:"string"==typeof i?i:"string"==typeof t?t.toLowerCase():void 0}constructor(){super(),this._$Ep=void 0,this.isUpdatePending=!1,this.hasUpdated=!1,this._$Em=null,this._$Ev();}_$Ev(){this._$ES=new Promise((t=>this.enableUpdating=t)),this._$AL=new Map,this._$E_(),this.requestUpdate(),this.constructor.l?.forEach((t=>t(this)));}addController(t){(this._$EO??=new Set).add(t),void 0!==this.renderRoot&&this.isConnected&&t.hostConnected?.();}removeController(t){this._$EO?.delete(t);}_$E_(){const t=new Map,s=this.constructor.elementProperties;for(const i of s.keys())this.hasOwnProperty(i)&&(t.set(i,this[i]),delete this[i]);t.size>0&&(this._$Ep=t);}createRenderRoot(){const t=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return S(t,this.constructor.elementStyles),t}connectedCallback(){this.renderRoot??=this.createRenderRoot(),this.enableUpdating(!0),this._$EO?.forEach((t=>t.hostConnected?.()));}enableUpdating(t){}disconnectedCallback(){this._$EO?.forEach((t=>t.hostDisconnected?.()));}attributeChangedCallback(t,s,i){this._$AK(t,i);}_$EC(t,s){const i=this.constructor.elementProperties.get(t),e=this.constructor._$Eu(t,i);if(void 0!==e&&!0===i.reflect){const r=(void 0!==i.converter?.toAttribute?i.converter:u).toAttribute(s,i.type);this._$Em=t,null==r?this.removeAttribute(e):this.setAttribute(e,r),this._$Em=null;}}_$AK(t,s){const i=this.constructor,e=i._$Eh.get(t);if(void 0!==e&&this._$Em!==e){const t=i.getPropertyOptions(e),r="function"==typeof t.converter?{fromAttribute:t.converter}:void 0!==t.converter?.fromAttribute?t.converter:u;this._$Em=e,this[e]=r.fromAttribute(s,t.type),this._$Em=null;}}requestUpdate(t,s,i){if(void 0!==t){if(i??=this.constructor.getPropertyOptions(t),!(i.hasChanged??f)(this[t],s))return;this.P(t,s,i);}!1===this.isUpdatePending&&(this._$ES=this._$ET());}P(t,s,i){this._$AL.has(t)||this._$AL.set(t,s),!0===i.reflect&&this._$Em!==t&&(this._$Ej??=new Set).add(t);}async _$ET(){this.isUpdatePending=!0;try{await this._$ES;}catch(t){Promise.reject(t);}const t=this.scheduleUpdate();return null!=t&&await t,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){if(!this.isUpdatePending)return;if(!this.hasUpdated){if(this.renderRoot??=this.createRenderRoot(),this._$Ep){for(const[t,s]of this._$Ep)this[t]=s;this._$Ep=void 0;}const t=this.constructor.elementProperties;if(t.size>0)for(const[s,i]of t)!0!==i.wrapped||this._$AL.has(s)||void 0===this[s]||this.P(s,this[s],i);}let t=!1;const s=this._$AL;try{t=this.shouldUpdate(s),t?(this.willUpdate(s),this._$EO?.forEach((t=>t.hostUpdate?.())),this.update(s)):this._$EU();}catch(s){throw t=!1,this._$EU(),s}t&&this._$AE(s);}willUpdate(t){}_$AE(t){this._$EO?.forEach((t=>t.hostUpdated?.())),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(t)),this.updated(t);}_$EU(){this._$AL=new Map,this.isUpdatePending=!1;}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$ES}shouldUpdate(t){return !0}update(t){this._$Ej&&=this._$Ej.forEach((t=>this._$EC(t,this[t]))),this._$EU();}updated(t){}firstUpdated(t){}}b.elementStyles=[],b.shadowRootOptions={mode:"open"},b[d("elementProperties")]=new Map,b[d("finalized")]=new Map,p?.({ReactiveElement:b}),(a.reactiveElementVersions??=[]).push("2.0.4");
+ */const{is:i$6,defineProperty:e$5,getOwnPropertyDescriptor:r$5,getOwnPropertyNames:h$2,getOwnPropertySymbols:o$4$1,getPrototypeOf:n$3$1}=Object,a$2$1=globalThis,c$3=a$2$1.trustedTypes,l$2$1=c$3?c$3.emptyScript:"",p$2=a$2$1.reactiveElementPolyfillSupport,d$2=(t,s)=>t,u$2$1={toAttribute(t,s){switch(s){case Boolean:t=t?l$2$1:null;break;case Object:case Array:t=null==t?t:JSON.stringify(t);}return t},fromAttribute(t,s){let i=t;switch(s){case Boolean:i=null!==t;break;case Number:i=null===t?null:Number(t);break;case Object:case Array:try{i=JSON.parse(t);}catch(t){i=null;}}return i}},f$2=(t,s)=>!i$6(t,s),y$2={attribute:true,type:String,converter:u$2$1,reflect:false,hasChanged:f$2};Symbol.metadata??=Symbol("metadata"),a$2$1.litPropertyMetadata??=new WeakMap;let b$1 = class b extends HTMLElement{static addInitializer(t){this._$Ei(),(this.l??=[]).push(t);}static get observedAttributes(){return this.finalize(),this._$Eh&&[...this._$Eh.keys()]}static createProperty(t,s=y$2){if(s.state&&(s.attribute=false),this._$Ei(),this.elementProperties.set(t,s),!s.noAccessor){const i=Symbol(),r=this.getPropertyDescriptor(t,i,s);void 0!==r&&e$5(this.prototype,t,r);}}static getPropertyDescriptor(t,s,i){const{get:e,set:h}=r$5(this.prototype,t)??{get(){return this[s]},set(t){this[s]=t;}};return {get(){return e?.call(this)},set(s){const r=e?.call(this);h.call(this,s),this.requestUpdate(t,r,i);},configurable:true,enumerable:true}}static getPropertyOptions(t){return this.elementProperties.get(t)??y$2}static _$Ei(){if(this.hasOwnProperty(d$2("elementProperties")))return;const t=n$3$1(this);t.finalize(),void 0!==t.l&&(this.l=[...t.l]),this.elementProperties=new Map(t.elementProperties);}static finalize(){if(this.hasOwnProperty(d$2("finalized")))return;if(this.finalized=true,this._$Ei(),this.hasOwnProperty(d$2("properties"))){const t=this.properties,s=[...h$2(t),...o$4$1(t)];for(const i of s)this.createProperty(i,t[i]);}const t=this[Symbol.metadata];if(null!==t){const s=litPropertyMetadata.get(t);if(void 0!==s)for(const[t,i]of s)this.elementProperties.set(t,i);}this._$Eh=new Map;for(const[t,s]of this.elementProperties){const i=this._$Eu(t,s);void 0!==i&&this._$Eh.set(i,t);}this.elementStyles=this.finalizeStyles(this.styles);}static finalizeStyles(s){const i=[];if(Array.isArray(s)){const e=new Set(s.flat(1/0).reverse());for(const s of e)i.unshift(c$4(s));}else void 0!==s&&i.push(c$4(s));return i}static _$Eu(t,s){const i=s.attribute;return  false===i?void 0:"string"==typeof i?i:"string"==typeof t?t.toLowerCase():void 0}constructor(){super(),this._$Ep=void 0,this.isUpdatePending=false,this.hasUpdated=false,this._$Em=null,this._$Ev();}_$Ev(){this._$ES=new Promise((t=>this.enableUpdating=t)),this._$AL=new Map,this._$E_(),this.requestUpdate(),this.constructor.l?.forEach((t=>t(this)));}addController(t){(this._$EO??=new Set).add(t),void 0!==this.renderRoot&&this.isConnected&&t.hostConnected?.();}removeController(t){this._$EO?.delete(t);}_$E_(){const t=new Map,s=this.constructor.elementProperties;for(const i of s.keys())this.hasOwnProperty(i)&&(t.set(i,this[i]),delete this[i]);t.size>0&&(this._$Ep=t);}createRenderRoot(){const t=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return S$2(t,this.constructor.elementStyles),t}connectedCallback(){this.renderRoot??=this.createRenderRoot(),this.enableUpdating(true),this._$EO?.forEach((t=>t.hostConnected?.()));}enableUpdating(t){}disconnectedCallback(){this._$EO?.forEach((t=>t.hostDisconnected?.()));}attributeChangedCallback(t,s,i){this._$AK(t,i);}_$EC(t,s){const i=this.constructor.elementProperties.get(t),e=this.constructor._$Eu(t,i);if(void 0!==e&&true===i.reflect){const r=(void 0!==i.converter?.toAttribute?i.converter:u$2$1).toAttribute(s,i.type);this._$Em=t,null==r?this.removeAttribute(e):this.setAttribute(e,r),this._$Em=null;}}_$AK(t,s){const i=this.constructor,e=i._$Eh.get(t);if(void 0!==e&&this._$Em!==e){const t=i.getPropertyOptions(e),r="function"==typeof t.converter?{fromAttribute:t.converter}:void 0!==t.converter?.fromAttribute?t.converter:u$2$1;this._$Em=e,this[e]=r.fromAttribute(s,t.type),this._$Em=null;}}requestUpdate(t,s,i){if(void 0!==t){if(i??=this.constructor.getPropertyOptions(t),!(i.hasChanged??f$2)(this[t],s))return;this.P(t,s,i);} false===this.isUpdatePending&&(this._$ES=this._$ET());}P(t,s,i){this._$AL.has(t)||this._$AL.set(t,s),true===i.reflect&&this._$Em!==t&&(this._$Ej??=new Set).add(t);}async _$ET(){this.isUpdatePending=true;try{await this._$ES;}catch(t){Promise.reject(t);}const t=this.scheduleUpdate();return null!=t&&await t,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){if(!this.isUpdatePending)return;if(!this.hasUpdated){if(this.renderRoot??=this.createRenderRoot(),this._$Ep){for(const[t,s]of this._$Ep)this[t]=s;this._$Ep=void 0;}const t=this.constructor.elementProperties;if(t.size>0)for(const[s,i]of t) true!==i.wrapped||this._$AL.has(s)||void 0===this[s]||this.P(s,this[s],i);}let t=false;const s=this._$AL;try{t=this.shouldUpdate(s),t?(this.willUpdate(s),this._$EO?.forEach((t=>t.hostUpdate?.())),this.update(s)):this._$EU();}catch(s){throw t=false,this._$EU(),s}t&&this._$AE(s);}willUpdate(t){}_$AE(t){this._$EO?.forEach((t=>t.hostUpdated?.())),this.hasUpdated||(this.hasUpdated=true,this.firstUpdated(t)),this.updated(t);}_$EU(){this._$AL=new Map,this.isUpdatePending=false;}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$ES}shouldUpdate(t){return  true}update(t){this._$Ej&&=this._$Ej.forEach((t=>this._$EC(t,this[t]))),this._$EU();}updated(t){}firstUpdated(t){}};b$1.elementStyles=[],b$1.shadowRootOptions={mode:"open"},b$1[d$2("elementProperties")]=new Map,b$1[d$2("finalized")]=new Map,p$2?.({ReactiveElement:b$1}),(a$2$1.reactiveElementVersions??=[]).push("2.0.4");
 
 /**
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
- */class r extends b{constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=void 0;}createRenderRoot(){const t=super.createRenderRoot();return this.renderOptions.renderBefore??=t.firstChild,t}update(t){const s=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(t),this._$Do=B(s,this.renderRoot,this.renderOptions);}connectedCallback(){super.connectedCallback(),this._$Do?.setConnected(!0);}disconnectedCallback(){super.disconnectedCallback(),this._$Do?.setConnected(!1);}render(){return T}}r._$litElement$=!0,r["finalized"]=!0,globalThis.litElementHydrateSupport?.({LitElement:r});const i$1=globalThis.litElementPolyfillSupport;i$1?.({LitElement:r});(globalThis.litElementVersions??=[]).push("4.1.1");
+ */let r$4 = class r extends b$1{constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=void 0;}createRenderRoot(){const t=super.createRenderRoot();return this.renderOptions.renderBefore??=t.firstChild,t}update(t){const s=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(t),this._$Do=B$1(s,this.renderRoot,this.renderOptions);}connectedCallback(){super.connectedCallback(),this._$Do?.setConnected(true);}disconnectedCallback(){super.disconnectedCallback(),this._$Do?.setConnected(false);}render(){return T$1}};r$4._$litElement$=true,r$4["finalized"]=true,globalThis.litElementHydrateSupport?.({LitElement:r$4});const i$5$1=globalThis.litElementPolyfillSupport;i$5$1?.({LitElement:r$4});(globalThis.litElementVersions??=[]).push("4.1.1");
 
 // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -449,7 +505,7 @@ const t$1=globalThis,e$3=t$1.ShadowRoot&&(void 0===t$1.ShadyCSS||t$1.ShadyCSS.na
 
 /* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
 
-class AuroLibraryRuntimeUtils {
+let AuroLibraryRuntimeUtils$1 = class AuroLibraryRuntimeUtils {
 
   /* eslint-disable jsdoc/require-param */
 
@@ -510,7 +566,7 @@ class AuroLibraryRuntimeUtils {
 
     return elemTag === tag || elem.hasAttribute(tag);
   }
-}
+};
 
 /**
  * Custom positioning reference element.
@@ -2020,37 +2076,23 @@ class AuroFloatingUI {
   }
 
   /**
-   * @private
-   * Adjusts the size of the bib content based on the bibSizer dimensions.
-   *
-   * This method retrieves the computed styles of the bibSizer element and applies them to the bib content.
-   * If the fullscreen parameter is true, it resets the dimensions to their default values. Otherwise, it
-   * mirrors the width and height from the bibSizer, ensuring that they are not set to zero.
-   *
-   * @param {boolean} fullscreen - A flag indicating whether to reset the dimensions for fullscreen mode.
-   *                               If true, the bib content dimensions are cleared; if false, they are set
-   *                               based on the bibSizer's computed styles.
+   * Mirrors the size of the bibSizer element to the bib content.
+   * Copies the width, height, max-width, and max-height styles from the bibSizer element to the bib content container.
+   * This ensures that the bib content has the same dimensions as the sizer element.
    */
-  mirrorSize(fullscreen) {
+  mirrorSize() {
     // mirror the boxsize from bibSizer
     if (this.element.bibSizer) {
       const sizerStyle = window.getComputedStyle(this.element.bibSizer);
       const bibContent = this.element.bib.shadowRoot.querySelector(".container");
-      if (fullscreen) {
-        bibContent.style.width = '';
-        bibContent.style.height = '';
-        bibContent.style.maxWidth = '';
-        bibContent.style.maxHeight = '';
-      } else {
-        if (sizerStyle.width !== '0px') {
-          bibContent.style.width = sizerStyle.width;
-        }
-        if (sizerStyle.height !== '0px') {
-          bibContent.style.height = sizerStyle.height;
-        }
-        bibContent.style.maxWidth = sizerStyle.maxWidth;
-        bibContent.style.maxHeight = sizerStyle.maxHeight;
+      if (sizerStyle.width !== '0px') {
+        bibContent.style.width = sizerStyle.width;
       }
+      if (sizerStyle.height !== '0px') {
+        bibContent.style.height = sizerStyle.height;
+      }
+      bibContent.style.maxWidth = sizerStyle.maxWidth;
+      bibContent.style.maxHeight = sizerStyle.maxHeight;
     }
   }
 
@@ -2066,11 +2108,12 @@ class AuroFloatingUI {
   getPositioningStrategy() {
     let strategy = 'floating';
     if (this.element.bib.mobileFullscreenBreakpoint) {
-      const isMobile = window.matchMedia(`(max-width: ${this.element.bib.mobileFullscreenBreakpoint})`).matches;
-      if (isMobile) {
+      const smallerThanBreakpoint = window.matchMedia(`(max-width: ${this.element.bib.mobileFullscreenBreakpoint})`).matches;
+      if (smallerThanBreakpoint) {
         strategy = 'fullscreen';
       }
     }
+
     return strategy;
   }
 
@@ -2084,13 +2127,10 @@ class AuroFloatingUI {
    */
   position() {
     const strategy = this.getPositioningStrategy();
-    if (strategy === 'fullscreen') {
-      this.configureBibFullscreen(true);
-      this.mirrorSize(true);
-    } else {
-      this.configureBibFullscreen(false);
-      this.mirrorSize(false);
+    this.configureBibStrategy(strategy);
 
+    if (strategy === 'floating') {
+      this.mirrorSize();
       // Define the middlware for the floater configuration
       const middleware = [
         offset(this.element.floaterConfig.offset || 0),
@@ -2113,28 +2153,72 @@ class AuroFloatingUI {
 
   /**
    * @private
-   * Configures the bib element for fullscreen mode based on the mobile status.
+   * Controls whether to lock the scrolling for the document's body.
+   * @param {Boolean} lock - If true, locks the body's scrolling functionlity; otherwise, unlock.
+   */
+  lockScroll(lock = true) {
+    if (lock) {
+      document.body.style.overflow = 'hidden'; // hide body's scrollbar
+
+      // Move `bib` by the amount the viewport is shifted to stay aligned in fullscreen.
+      this.element.bib.style.transform = `translateY(${visualViewport.offsetTop}px)`;
+    } else {
+      document.body.style.overflow = '';
+    }
+  }
+
+  /**
+   * @private
+   * Configures the bib element's display strategy.
    *
-   * This method sets the 'isFullscreen' attribute on the bib element to "true" if the `isMobile` parameter is true, 
-   * and resets its position to the top-left corner of the viewport. If `isMobile` is false, it removes the 
-   * 'isFullscreen' attribute, indicating that the bib is not in fullscreen mode.
+   * Sets the bib to fullscreen or floating mode based on the provided strategy.
+   * Dispatches a 'strategy-change' event if the strategy changes.
    *
-   * @param {boolean} isMobile - A flag indicating whether the current device is mobile.
+   * @param {string} strategy - The positioning strategy ('fullscreen' or 'floating').
    */
-  configureBibFullscreen(isMobile) {
-    if (isMobile) {
-      this.element.bib.setAttribute('isFullscreen', "true");
+  configureBibStrategy(strategy) {
+    const prevStrategy = this.element.isBibFullscreen ? 'fullscreen' : 'floating';
+    if (strategy === 'fullscreen') {
+      this.element.isBibFullscreen = true;
       // reset the prev position
       this.element.bib.style.top = "0px";
       this.element.bib.style.left = "0px";
+
+      // reset the size that was mirroring `size` css-part
+      const bibContent = this.element.bib.shadowRoot.querySelector(".container");
+      bibContent.style.width = '';
+      bibContent.style.height = '';
+      bibContent.style.maxWidth = '';
+      bibContent.style.maxHeight = `${window.visualViewport.height}px`;
+
+      if (this.element.isPopoverVisible) {
+        this.lockScroll(true);
+      }
     } else {
-      this.element.bib.removeAttribute('isFullscreen');
+      this.element.isBibFullscreen = false;
+
+      this.lockScroll(false);
+    }
+
+    if (prevStrategy !== strategy) {
+      const event = new CustomEvent(this.eventPrefix ? `${this.eventPrefix}-strategy-change` : 'strategy-change', {
+        detail: {
+          strategy,
+        },
+        composed: true
+      });
+
+      this.element.dispatchEvent(event);
     }
   }
 
   updateState() {
     const isVisible = this.element.isPopoverVisible;
-    this.element.trigger.setAttribute('aria-expanded', isVisible);
+
+    // Refactor this to apply attribute to correct focusable element
+    // Reference Issue: https://github.com/AlaskaAirlines/auro-library/issues/105
+    //
+    // this.element.trigger.setAttribute('aria-expanded', isVisible);
 
     if (isVisible) {
       this.element.bib.setAttribute('data-show', true);
@@ -2230,6 +2314,7 @@ class AuroFloatingUI {
       this.updateCurrentExpandedDropdown();
       this.element.isPopoverVisible = true;
       this.element.triggerChevron?.setAttribute('data-expanded', true);
+      
       this.dispatchEventDropdownToggle();
       this.position();
       
@@ -2247,6 +2332,7 @@ class AuroFloatingUI {
   hideBib() {
     if (this.element.isPopoverVisible && !this.element.disabled && !this.element.noToggle) {
       this.element.isPopoverVisible = false;
+      this.lockScroll(false);
       this.element.triggerChevron?.removeAttribute('data-expanded');
       this.dispatchEventDropdownToggle();
     }
@@ -2259,7 +2345,7 @@ class AuroFloatingUI {
   dispatchEventDropdownToggle() {
     const event = new CustomEvent(this.eventPrefix ? `${this.eventPrefix}-toggled` : 'toggled', {
       detail: {
-        expanded: this.isPopoverVisible,
+        expanded: this.element.isPopoverVisible,
       },
       composed: true
     });
@@ -2276,7 +2362,7 @@ class AuroFloatingUI {
 
     const event = new CustomEvent(this.eventPrefix ? `${this.eventPrefix}-triggerClick` : "triggerClick", {
       composed: true,
-      details: {
+      detail: {
         expanded: this.element.isPopoverVisible
       }
     });
@@ -2328,6 +2414,12 @@ class AuroFloatingUI {
     }
   }
 
+  /**
+   * Manages the tabIndex of the trigger element based on its focusability.
+   *
+   * If the trigger element or any of its children are inherently focusable, the tabIndex of the component is set to -1.
+   * This prevents the component itself from being focusable when the trigger element already handles focus.
+   */
   handleTriggerTabIndex() {
     const focusableElementSelectors = [
       'a',
@@ -2342,6 +2434,9 @@ class AuroFloatingUI {
     ];
 
     const triggerNode = this.element.querySelectorAll('[slot="trigger"]')[0];
+    if (!triggerNode) {
+      return;
+    }
     const triggerNodeTagName = triggerNode.tagName.toLowerCase();
 
     focusableElementSelectors.forEach((selector) => {
@@ -2370,12 +2465,13 @@ class AuroFloatingUI {
 
     this.handleTriggerTabIndex();
 
-    this.element.trigger.addEventListener('keydown', (event) => this.handleEvent(event));
-    this.element.trigger.addEventListener('click', (event) => this.handleEvent(event));
-    this.element.trigger.addEventListener('mouseenter', (event) => this.handleEvent(event));
-    this.element.trigger.addEventListener('mouseleave', (event) => this.handleEvent(event));
-    this.element.trigger.addEventListener('focus', (event) => this.handleEvent(event));
-    this.element.trigger.addEventListener('blur', (event) => this.handleEvent(event));
+    this.handleEvent = this.handleEvent.bind(this);
+    this.element.trigger.addEventListener('keydown', this.handleEvent);
+    this.element.trigger.addEventListener('click', this.handleEvent);
+    this.element.trigger.addEventListener('mouseenter', this.handleEvent);
+    this.element.trigger.addEventListener('mouseleave', this.handleEvent);
+    this.element.trigger.addEventListener('focus', this.handleEvent);
+    this.element.trigger.addEventListener('blur', this.handleEvent);
   }
 
   disconnect() {
@@ -2384,12 +2480,12 @@ class AuroFloatingUI {
     
     // Remove event & keyboard listeners
     if (this.element?.trigger) {
-      this.element.trigger.removeEventListener('keydown', (event) => this.handleEvent(event));
-      this.element.trigger.removeEventListener('click', (event) => this.handleEvent(event));
-      this.element.trigger.removeEventListener('mouseenter', (event) => this.handleEvent(event));
-      this.element.trigger.removeEventListener('mouseleave', (event) => this.handleEvent(event));
-      this.element.trigger.removeEventListener('focus', (event) => this.handleEvent(event));
-      this.element.trigger.removeEventListener('blur', (event) => this.handleEvent(event));
+      this.element.trigger.removeEventListener('keydown', this.handleEvent);
+      this.element.trigger.removeEventListener('click', this.handleEvent);
+      this.element.trigger.removeEventListener('mouseenter', this.handleEvent);
+      this.element.trigger.removeEventListener('mouseleave', this.handleEvent);
+      this.element.trigger.removeEventListener('focus', this.handleEvent);
+      this.element.trigger.removeEventListener('blur', this.handleEvent);
     }
   }
 }
@@ -2424,7 +2520,7 @@ class AuroDependencyVersioning {
    */
   generateTag(baseName, version, tagClass) {
     const elementName = this.generateElementName(baseName, version);
-    const tag = i$4`${s$1(elementName)}`;
+    const tag = i$8`${s$3(elementName)}`;
 
     if (!customElements.get(elementName)) {
       customElements.define(elementName, class extends tagClass {});
@@ -2439,19 +2535,19 @@ class AuroDependencyVersioning {
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const t={ATTRIBUTE:1,CHILD:2,PROPERTY:3,BOOLEAN_ATTRIBUTE:4,EVENT:5,ELEMENT:6},e$1=t=>(...e)=>({_$litDirective$:t,values:e});class i{constructor(t){}get _$AU(){return this._$AM._$AU}_$AT(t,e,i){this._$Ct=t,this._$AM=e,this._$Ci=i;}_$AS(t,e){return this.update(t,e)}update(t,e){return this.render(...e)}}
+const t$2$1={ATTRIBUTE:1},e$4$1=t=>(...e)=>({_$litDirective$:t,values:e});let i$4$1 = class i{constructor(t){}get _$AU(){return this._$AM._$AU}_$AT(t,e,i){this._$Ct=t,this._$AM=e,this._$Ci=i;}_$AS(t,e){return this.update(t,e)}update(t,e){return this.render(...e)}};
 
 /**
  * @license
  * Copyright 2018 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
- */const e=e$1(class extends i{constructor(t$1){if(super(t$1),t$1.type!==t.ATTRIBUTE||"class"!==t$1.name||t$1.strings?.length>2)throw Error("`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.")}render(t){return " "+Object.keys(t).filter((s=>t[s])).join(" ")+" "}update(s,[i]){if(void 0===this.st){this.st=new Set,void 0!==s.strings&&(this.nt=new Set(s.strings.join(" ").split(/\s/).filter((t=>""!==t))));for(const t in i)i[t]&&!this.nt?.has(t)&&this.st.add(t);return this.render(i)}const r=s.element.classList;for(const t of this.st)t in i||(r.remove(t),this.st.delete(t));for(const t in i){const s=!!i[t];s===this.st.has(t)||this.nt?.has(t)||(s?(r.add(t),this.st.add(t)):(r.remove(t),this.st.delete(t)));}return T}});
+ */const e$3$1=e$4$1(class extends i$4$1{constructor(t){if(super(t),t.type!==t$2$1.ATTRIBUTE||"class"!==t.name||t.strings?.length>2)throw Error("`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.")}render(t){return " "+Object.keys(t).filter((s=>t[s])).join(" ")+" "}update(s,[i]){if(void 0===this.st){this.st=new Set,void 0!==s.strings&&(this.nt=new Set(s.strings.join(" ").split(/\s/).filter((t=>""!==t))));for(const t in i)i[t]&&!this.nt?.has(t)&&this.st.add(t);return this.render(i)}const r=s.element.classList;for(const t of this.st)t in i||(r.remove(t),this.st.delete(t));for(const t in i){const s=!!i[t];s===this.st.has(t)||this.nt?.has(t)||(s?(r.add(t),this.st.add(t)):(r.remove(t),this.st.delete(t)));}return T$1}});
 
 /**
  * @license
  * Copyright 2018 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
- */const o$5=o=>o??E;
+ */const o$3$1=o=>o??E$1;
 
 // Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -2463,7 +2559,7 @@ const t={ATTRIBUTE:1,CHILD:2,PROPERTY:3,BOOLEAN_ATTRIBUTE:4,EVENT:5,ELEMENT:6},e
  * @attr {Boolean} hiddenAudible - If present, the component will be hidden from screen readers, but seen visually
  */
 
-let AuroElement$1 = class AuroElement extends r {
+let AuroElement$1 = class AuroElement extends r$4 {
 
   // function to define props used within the scope of this component
   static get properties() {
@@ -2489,7 +2585,7 @@ let AuroElement$1 = class AuroElement extends r {
   }
 };
 
-var error$1 = {"role":"img","color":"currentColor","title":"","desc":"Error alert indicator.","width":"var(--auro-size-lg, var(--ds-size-300, 1.5rem))","height":"var(--auro-size-lg, var(--ds-size-300, 1.5rem))","xmlns":"http://www.w3.org/2000/svg","xmlns_xlink":"http://www.w3.org/1999/xlink","viewBox":"0 0 24 24","path":"/icons","style":"ico_squareLarge","type":"icon","name":"error","category":"alert","deprecated":true,"svg":"<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" aria-labelledby=\"error__desc\" class=\"ico_squareLarge\" data-deprecated=\"true\" role=\"img\" style=\"min-width:var(--auro-size-lg, var(--ds-size-300, 1.5rem));height:var(--auro-size-lg, var(--ds-size-300, 1.5rem));fill:currentColor\" viewBox=\"0 0 24 24\" part=\"svg\"><title/><desc id=\"error__desc\">Error alert indicator.</desc><path d=\"m13.047 5.599 6.786 11.586A1.207 1.207 0 0 1 18.786 19H5.214a1.207 1.207 0 0 1-1.047-1.815l6.786-11.586a1.214 1.214 0 0 1 2.094 0m-1.165.87a.23.23 0 0 0-.085.085L5.419 17.442a.232.232 0 0 0 .203.35h12.756a.234.234 0 0 0 .203-.35L12.203 6.554a.236.236 0 0 0-.321-.084M12 15.5a.75.75 0 1 1 0 1.5.75.75 0 0 1 0-1.5m-.024-6.22c.325 0 .589.261.589.583v4.434a.586.586 0 0 1-.589.583.586.586 0 0 1-.588-.583V9.863c0-.322.264-.583.588-.583\"/></svg>"};
+var error$1 = {"svg":"<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" aria-labelledby=\"error__desc\" class=\"ico_squareLarge\" data-deprecated=\"true\" role=\"img\" style=\"min-width:var(--auro-size-lg, var(--ds-size-300, 1.5rem));height:var(--auro-size-lg, var(--ds-size-300, 1.5rem));fill:currentColor\" viewBox=\"0 0 24 24\" part=\"svg\"><title/><desc id=\"error__desc\">Error alert indicator.</desc><path d=\"m13.047 5.599 6.786 11.586A1.207 1.207 0 0 1 18.786 19H5.214a1.207 1.207 0 0 1-1.047-1.815l6.786-11.586a1.214 1.214 0 0 1 2.094 0m-1.165.87a.23.23 0 0 0-.085.085L5.419 17.442a.232.232 0 0 0 .203.35h12.756a.234.234 0 0 0 .203-.35L12.203 6.554a.236.236 0 0 0-.321-.084M12 15.5a.75.75 0 1 1 0 1.5.75.75 0 0 1 0-1.5m-.024-6.22c.325 0 .589.261.589.583v4.434a.586.586 0 0 1-.589.583.586.586 0 0 1-.588-.583V9.863c0-.322.264-.583.588-.583\"/></svg>"};
 
 /* eslint-disable no-underscore-dangle, jsdoc/no-undefined-types, jsdoc/require-param-description */
 
@@ -2519,7 +2615,7 @@ const cacheFetch$1 = (uri, options = {}) => {
   return _fetchMap$1.get(uri);
 };
 
-var styleCss$2$1 = i$3`*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock,:host{display:block}.util_displayFlex{display:flex}.util_displayHidden,:host([hidden]:not(:focus):not(:active)){display:none}.util_displayHiddenVisually,:host([hiddenVisually]:not(:focus):not(:active)){position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}.ico_squareLarge{fill:currentColor;height:var(--auro-size-lg, var(--ds-size-300, 1.5rem))}.ico_squareSmall{fill:currentColor;height:.6rem}.ico_squareMed{fill:currentColor;height:var(--auro-size-md, var(--ds-size-200, 1rem))}.ico_squareSml{fill:currentColor;height:var(--auro-size-sm, var(--ds-size-150, 0.75rem))}:host{color:currentColor;vertical-align:middle;line-height:1;display:inline-block}:host .logo{color:var(--ds-color-brand-midnight-400, #01426a)}svg{min-width:var(--ds-auro-icon-size, 1.5rem) !important;width:var(--ds-auro-icon-size, 1.5rem) !important;height:var(--ds-auro-icon-size, 1.5rem) !important}.label{display:flex;align-items:flex-start}.label svg{margin:0 var(--ds-size-50, 0.25rem)}.wrapper{height:var(--ds-auro-icon-size);width:var(--ds-auro-icon-size)}.labelContainer{line-height:1.8}`;
+var styleCss$3$1 = i$7`*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock,:host{display:block}.util_displayFlex{display:flex}.util_displayHidden,:host([hidden]:not(:focus):not(:active)){display:none}.util_displayHiddenVisually,:host([hiddenVisually]:not(:focus):not(:active)){position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}.ico_squareLarge{fill:currentColor;height:var(--auro-size-lg, var(--ds-size-300, 1.5rem))}.ico_squareSmall{fill:currentColor;height:.6rem}.ico_squareMed{fill:currentColor;height:var(--auro-size-md, var(--ds-size-200, 1rem))}.ico_squareSml{fill:currentColor;height:var(--auro-size-sm, var(--ds-size-150, 0.75rem))}:host{color:currentColor;vertical-align:middle;line-height:1;display:inline-block}:host .logo{color:var(--ds-color-brand-midnight-400, #01426a)}svg{min-width:var(--ds-auro-icon-size, 1.5rem) !important;width:var(--ds-auro-icon-size, 1.5rem) !important;height:var(--ds-auro-icon-size, 1.5rem) !important}.label{display:flex;align-items:flex-start}.label svg{margin:0 var(--ds-size-50, 0.25rem)}.wrapper{height:var(--ds-auro-icon-size);width:var(--ds-auro-icon-size)}.labelContainer{line-height:1.8}`;
 
 // Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -2558,8 +2654,8 @@ let BaseIcon$1 = class BaseIcon extends AuroElement$1 {
   }
 
   static get styles() {
-    return i$3`
-      ${styleCss$2$1}
+    return i$7`
+      ${styleCss$3$1}
     `;
   }
 
@@ -2600,9 +2696,9 @@ let BaseIcon$1 = class BaseIcon extends AuroElement$1 {
   }
 };
 
-var tokensCss$1$1 = i$3`:host{--ds-auro-icon-color: var(--ds-color-icon-primary-default, $ds-color-icon-primary-default);--ds-auro-icon-size: var(--ds-size-300, $ds-size-300)}`;
+var tokensCss$2$1 = i$7`:host{--ds-auro-icon-color: var(--ds-color-icon-primary-default, $ds-color-icon-primary-default);--ds-auro-icon-size: var(--ds-size-300, $ds-size-300)}`;
 
-var colorCss$2$1 = i$3`:host{color:var(--ds-auro-icon-color)}:host([customColor]){color:inherit}:host(:not([onDark])[accent]){--ds-auro-icon-color: var(--ds-color-icon-accent-default, #a2c270)}:host(:not([onDark])[disabled]){--ds-auro-icon-color: var(--ds-color-icon-ui-primary-disabled-default, #adadad)}:host(:not([onDark])[emphasis]){--ds-auro-icon-color: var(--ds-color-icon-emphasis-default, #2a2a2a)}:host(:not([onDark])[error]){--ds-auro-icon-color: var(--ds-color-icon-error-default, #cc1816)}:host(:not([onDark])[info]){--ds-auro-icon-color: var(--ds-color-icon-info-default, #326aa5)}:host(:not([onDark])[secondary]){--ds-auro-icon-color: var(--ds-color-icon-secondary-default, #7e8894)}:host(:not([onDark])[subtle]){--ds-auro-icon-color: var(--ds-color-icon-subtle-default, #a0c9f1)}:host(:not([onDark])[success]){--ds-auro-icon-color: var(--ds-color-icon-success-default, #40a080)}:host(:not([onDark])[tertiary]){--ds-auro-icon-color: var(--ds-color-icon-tertiary-default, #afb9c6)}:host(:not([onDark])[warning]){--ds-auro-icon-color: var(--ds-color-icon-warning-default, #c49432)}:host([onDark]){--ds-auro-icon-color: var(--ds-color-icon-primary-inverse, #f7f7f7)}:host([onDark][accent]){--ds-auro-icon-color: var(--ds-color-icon-accent-inverse, #badd81)}:host([onDark][disabled]){--ds-auro-icon-color: var(--ds-color-icon-ui-primary-disabled-inverse, #7e7e7e)}:host([onDark][emphasis]){--ds-auro-icon-color: var(--ds-color-icon-emphasis-inverse, #ffffff)}:host([onDark][error]){--ds-auro-icon-color: var(--ds-color-icon-error-inverse, #f9aca6)}:host([onDark][info]){--ds-auro-icon-color: var(--ds-color-icon-info-inverse, #89b2d4)}:host([onDark][secondary]){--ds-auro-icon-color: var(--ds-color-icon-secondary-inverse, #ccd2db)}:host([onDark][subtle]){--ds-auro-icon-color: var(--ds-color-icon-subtle-inverse, #326aa5)}:host([onDark][success]){--ds-auro-icon-color: var(--ds-color-icon-success-inverse, #8eceb9)}:host([onDark][tertiary]){--ds-auro-icon-color: var(--ds-color-icon-tertiary-inverse, #939fad)}:host([onDark][warning]){--ds-auro-icon-color: var(--ds-color-icon-warning-inverse, #f2c153)}`;
+var colorCss$3$1 = i$7`:host{color:var(--ds-auro-icon-color)}:host([customColor]){color:inherit}:host(:not([onDark])[accent]){--ds-auro-icon-color: var(--ds-color-icon-accent-default, #a2c270)}:host(:not([onDark])[disabled]){--ds-auro-icon-color: var(--ds-color-icon-ui-primary-disabled-default, #adadad)}:host(:not([onDark])[emphasis]){--ds-auro-icon-color: var(--ds-color-icon-emphasis-default, #2a2a2a)}:host(:not([onDark])[error]){--ds-auro-icon-color: var(--ds-color-icon-error-default, #cc1816)}:host(:not([onDark])[info]){--ds-auro-icon-color: var(--ds-color-icon-info-default, #326aa5)}:host(:not([onDark])[secondary]){--ds-auro-icon-color: var(--ds-color-icon-secondary-default, #7e8894)}:host(:not([onDark])[subtle]){--ds-auro-icon-color: var(--ds-color-icon-subtle-default, #a0c9f1)}:host(:not([onDark])[success]){--ds-auro-icon-color: var(--ds-color-icon-success-default, #40a080)}:host(:not([onDark])[tertiary]){--ds-auro-icon-color: var(--ds-color-icon-tertiary-default, #afb9c6)}:host(:not([onDark])[warning]){--ds-auro-icon-color: var(--ds-color-icon-warning-default, #c49432)}:host([onDark]){--ds-auro-icon-color: var(--ds-color-icon-primary-inverse, #f7f7f7)}:host([onDark][accent]){--ds-auro-icon-color: var(--ds-color-icon-accent-inverse, #badd81)}:host([onDark][disabled]){--ds-auro-icon-color: var(--ds-color-icon-ui-primary-disabled-inverse, #7e7e7e)}:host([onDark][emphasis]){--ds-auro-icon-color: var(--ds-color-icon-emphasis-inverse, #ffffff)}:host([onDark][error]){--ds-auro-icon-color: var(--ds-color-icon-error-inverse, #f9aca6)}:host([onDark][info]){--ds-auro-icon-color: var(--ds-color-icon-info-inverse, #89b2d4)}:host([onDark][secondary]){--ds-auro-icon-color: var(--ds-color-icon-secondary-inverse, #ccd2db)}:host([onDark][subtle]){--ds-auro-icon-color: var(--ds-color-icon-subtle-inverse, #326aa5)}:host([onDark][success]){--ds-auro-icon-color: var(--ds-color-icon-success-inverse, #8eceb9)}:host([onDark][tertiary]){--ds-auro-icon-color: var(--ds-color-icon-tertiary-inverse, #939fad)}:host([onDark][warning]){--ds-auro-icon-color: var(--ds-color-icon-warning-inverse, #f2c153)}`;
 
 // Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -2664,7 +2760,7 @@ let AuroIcon$1 = class AuroIcon extends BaseIcon$1 {
     this.success = false;
     this.tertiary = false;
     this.warning = false;
-    this.runtimeUtils = new AuroLibraryRuntimeUtils();
+    this.runtimeUtils = new AuroLibraryRuntimeUtils$1();
   }
 
   // function to define props used within the scope of this component
@@ -2746,9 +2842,9 @@ let AuroIcon$1 = class AuroIcon extends BaseIcon$1 {
   static get styles() {
     return [
       super.styles,
-      i$3`${tokensCss$1$1}`,
-      i$3`${styleCss$2$1}`,
-      i$3`${colorCss$2$1}`
+      i$7`${tokensCss$2$1}`,
+      i$7`${styleCss$3$1}`,
+      i$7`${colorCss$3$1}`
     ];
   }
 
@@ -2761,7 +2857,7 @@ let AuroIcon$1 = class AuroIcon extends BaseIcon$1 {
    *
    */
   static register(name = "auro-icon") {
-    AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroIcon);
+    AuroLibraryRuntimeUtils$1.prototype.registerComponent(name, AuroIcon);
   }
 
   connectedCallback() {
@@ -2790,20 +2886,20 @@ let AuroIcon$1 = class AuroIcon extends BaseIcon$1 {
       'wrapper': true,
     };
 
-    return x`
+    return x$1`
       <div
-        class="${e(classes)}"
-        title="${o$5(this.title || undefined)}">
-        <span aria-hidden="${o$5(this.ariaHidden ? this.ariaHidden : true)}" part="svg">
-          ${this.customSvg ? x`
+        class="${e$3$1(classes)}"
+        title="${o$3$1(this.title || undefined)}">
+        <span aria-hidden="${o$3$1(this.ariaHidden ? this.ariaHidden : true)}" part="svg">
+          ${this.customSvg ? x$1`
               <slot name="svg"></slot>
-            ` : x`
+            ` : x$1`
               ${this.svg}
             `
           }
         </span>
 
-        <div class="${e(a11y)}">
+        <div class="${e$3$1(a11y)}">
           <slot></slot>
         </div>
       </div>
@@ -2813,15 +2909,11 @@ let AuroIcon$1 = class AuroIcon extends BaseIcon$1 {
 
 var iconVersion$1 = '6.1.2';
 
-var styleCss$1$1 = i$3`:host{position:relative;display:inline-block;max-width:100%}:host([fluid]){display:block}#bibSizer{position:absolute;z-index:-1;opacity:0;pointer-events:none}.label{font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem);transition:font-size .3s cubic-bezier(0.215, 0.61, 0.355, 1);white-space:normal}.label[hasTrigger=false]{font-size:var(--ds-text-body-size-default, 1rem)}.trigger{position:relative;display:flex;align-items:center;border-width:1px;border-style:solid}@media(hover: hover){.trigger:hover{cursor:pointer}}.triggerContentWrapper{overflow:hidden;flex:1;text-overflow:ellipsis;white-space:nowrap}#showStateIcon{display:flex;overflow:hidden;height:100%;align-items:center;margin-left:var(--ds-size-100, 0.5rem)}#showStateIcon [auro-icon]{height:var(--ds-size-300, 1.5rem);line-height:var(--ds-size-300, 1.5rem)}#showStateIcon[data-expanded=true] [auro-icon]{transform:rotate(-180deg)}.helpText{margin-top:var(--ds-size-50, 0.25rem);font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem)}:host([matchwidth]) #bibSizer{width:100%}:host([disabled]){pointer-events:none}:host([inset]) .trigger{padding:var(--ds-size-150, 0.75rem) var(--ds-size-200, 1rem)}:host([common]) .trigger,:host([inset][bordered]) .trigger{padding:var(--ds-size-200, 1rem) var(--ds-size-150, 0.75rem)}:host([common]) .trigger,:host([rounded]) .trigger{border-radius:var(--ds-border-radius, 0.375rem)}`;
-
-var colorCss$1$1 = i$3`.label{color:var(--ds-auro-dropdown-label-text-color)}.trigger{border-color:var(--ds-auro-dropdown-trigger-border-color);background-color:var(--ds-auro-dropdown-trigger-container-color);color:var(--ds-auro-dropdown-trigger-text-color)}.trigger:focus-within,.trigger:active{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-active-default, #0074c8)}.trigger:focus-within:not(:active){--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #2c67b5);outline:1px solid var(--ds-color-border-ui-focus-default, #2c67b5)}.trigger:hover{--ds-auro-dropdown-trigger-container-color: var(--ds-color-container-ui-secondary-hover-default, rgba(0, 0, 0, 0.03))}.helpText{color:var(--ds-auro-dropdown-help-text-color)}:host([disabled]){--ds-auro-dropdown-trigger-text-color: var(--ds-color-text-ui-disabled-default, #adadad);--ds-auro-dropdown-label-text-color: var(--ds-color-text-ui-disabled-default, #adadad)}:host([common]),:host([bordered]){--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-primary-default, #585e67)}:host([common]) .trigger:active,:host([common]) .trigger:focus-within,:host([bordered]) .trigger:active,:host([bordered]) .trigger:focus-within{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #2c67b5)}:host([error]){--ds-auro-dropdown-help-text-color: var(--ds-color-text-error-default, #cc1816);--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-error-default, #cc1816)}:host([error]) .trigger{outline:solid 1px var(--ds-auro-dropdown-trigger-border-color)}:host([error]) .trigger:focus-within,:host([error]) .trigger:active{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-active-default, #0074c8)}:host([error]) .trigger:active{box-shadow:none;outline:none}:host([disabled][common]),:host([disabled][bordered]){--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-disabled-default, #adadad)}`;
+var styleCss$2$1 = i$7`:host{position:absolute;z-index:var(--depth-tooltip, 400);display:none}.container{display:inline-block;overflow:auto;box-sizing:border-box;margin:var(--ds-size-50, 0.25rem) 0}:host([isfullscreen]){position:fixed;top:0;left:0}:host([isfullscreen]) .container{width:100dvw;max-width:none;height:100dvh;max-height:none;border-radius:unset;margin-top:0;box-shadow:unset;overscroll-behavior:contain}:host([data-show]){display:flex}:host([common]:not([isfullscreen])) .container,:host([rounded]:not([isfullscreen])) .container{border-radius:var(--ds-border-radius, 0.375rem)}:host([common][isfullscreen]) .container,:host([rounded][isfullscreen]) .container{border-radius:unset;box-shadow:unset}`;
 
-var tokensCss$3 = i$3`:host{--ds-auro-dropdown-help-text-color: var(--ds-color-text-secondary-default, #525252);--ds-auro-dropdown-label-text-color: var(--ds-color-text-secondary-default, #525252);--ds-auro-dropdown-popover-container-color: var(--ds-color-container-primary-default, #ffffff);--ds-auro-dropdown-popover-border-color: transparent;--ds-auro-dropdown-popover-text-color: var(--ds-color-text-primary-default, #2a2a2a);--ds-auro-dropdown-trigger-container-color: var(--ds-color-container-primary-default, #ffffff);--ds-auro-dropdown-trigger-border-color: transparent;--ds-auro-dropdown-trigger-text-color: var(--ds-color-text-primary-default, #2a2a2a);--ds-auro-dropdownbib-boxshadow-color: var(--ds-elevation-200, 0px 0px 10px rgba(0, 0, 0, 0.15));--ds-auro-dropdownbib-container-color: var(--ds-color-container-primary-default, #ffffff);--ds-auro-dropdownbib-text-color: var(--ds-color-text-primary-default, #2a2a2a)}`;
+var colorCss$2$1 = i$7`.container{background-color:var(--ds-auro-dropdownbib-container-color);box-shadow:var(--ds-auro-dropdownbib-boxshadow-color);color:var(--ds-auro-dropdownbib-text-color)}`;
 
-var styleCss$4 = i$3`:host{position:absolute;z-index:var(--depth-tooltip, 400);display:none}.container{display:inline-block;overflow:auto;box-sizing:border-box;margin:var(--ds-size-50, 0.25rem) 0}:host([isfullscreen]){position:fixed;top:0;left:0}:host([isfullscreen]) .container{width:100dvw;max-width:none;height:100dvh;max-height:none;border-radius:unset;margin-top:0;box-shadow:unset}:host([data-show]){display:flex}:host([common]:not([isfullscreen])) .container,:host([rounded]:not([isfullscreen])) .container{border-radius:var(--ds-border-radius, 0.375rem)}:host([common][isfullscreen]) .container,:host([rounded][isfullscreen]) .container{border-radius:unset;box-shadow:unset}`;
-
-var colorCss$4 = i$3`.container{background-color:var(--ds-auro-dropdownbib-container-color);box-shadow:var(--ds-auro-dropdownbib-boxshadow-color);color:var(--ds-auro-dropdownbib-text-color)}`;
+var tokensCss$1$1 = i$7`:host{--ds-auro-dropdown-label-text-color: var(--ds-color-text-secondary-default, #525252);--ds-auro-dropdown-popover-container-color: var(--ds-color-container-primary-default, #ffffff);--ds-auro-dropdown-popover-border-color: transparent;--ds-auro-dropdown-popover-text-color: var(--ds-color-text-primary-default, #2a2a2a);--ds-auro-dropdown-trigger-container-color: var(--ds-color-container-primary-default, #ffffff);--ds-auro-dropdown-trigger-border-color: transparent;--ds-auro-dropdown-trigger-outline-color: transparent;--ds-auro-dropdown-trigger-text-color: var(--ds-color-text-primary-default, #2a2a2a);--ds-auro-dropdownbib-boxshadow-color: var(--ds-elevation-200, 0px 0px 10px rgba(0, 0, 0, 0.15));--ds-auro-dropdownbib-container-color: var(--ds-color-container-primary-default, #ffffff);--ds-auro-dropdownbib-text-color: var(--ds-color-text-primary-default, #2a2a2a)}`;
 
 // Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -2837,11 +2929,11 @@ const DESIGN_TOKEN_BREAKPOINT_OPTIONS = [
 ];
 
 /**
- * @prop { String } mobileFullscreenBreakpoint - Defines the screen size breakpoint (`lg`, `md`, `sm`, or `xs`) at which the dropdown switches to fullscreen mode on mobile. When expanded, the dropdown will automatically display in fullscreen mode if the screen size is equal to or smaller than the selected breakpoint.
+ * @prop { String } fullscreenBreakpoint - Defines the screen size breakpoint (`lg`, `md`, `sm`, or `xs`) at which the dropdown switches to fullscreen mode on mobile. When expanded, the dropdown will automatically display in fullscreen mode if the screen size is equal to or smaller than the selected breakpoint.
  * @csspart bibContainer - Apply css to the bib container.
  */
 
-class AuroDropdownBib extends r {
+class AuroDropdownBib extends r$4 {
 
   constructor() {
     super();
@@ -2850,19 +2942,29 @@ class AuroDropdownBib extends r {
      * @private
      */
     this._mobileBreakpointValue = undefined;
+
+    AuroLibraryRuntimeUtils$1.prototype.handleComponentTagRename(this, 'auro-dropdownbib');
   }
 
   static get styles() {
     return [
-      styleCss$4,
-      colorCss$4,
-      tokensCss$3
+      styleCss$2$1,
+      colorCss$2$1,
+      tokensCss$1$1
     ];
   }
 
   static get properties() {
     return {
 
+      /**
+       * If declared, will take the fullscreen when the bib is displayed.
+       */
+      isFullscreen: {
+        type: Boolean,
+        reflect: true
+      },
+
       /**
        * If declared, will apply all styles for the common theme.
        */
@@ -2905,9 +3007,24 @@ class AuroDropdownBib extends r {
     return this._mobileBreakpointValue;
   }
 
+  updated(changedProperties) {
+    if (changedProperties.has('isFullscreen')) {
+      this.childNodes.forEach((child) => {
+        // skip any text that is not in an HTMLElement on setting `isFullscreen` attr.
+        if (child.nodeName !== '#text') {
+          if (this.isFullscreen) {
+            child.setAttribute('isFullscreen', 'true');
+          } else {
+            child.removeAttribute('isFullscreen');
+          }
+        }
+      });
+    }
+  }
+
   // function that renders the HTML and CSS into  the scope of the component
   render() {
-    return u$1`
+    return u$3`
       <div class="container" part="bibContainer">
         <slot></slot>
       </div>
@@ -2915,105 +3032,140 @@ class AuroDropdownBib extends r {
   }
 }
 
-// default internal definition
-if (!customElements.get("auro-dropdownbib")) {
-  customElements.define("auro-dropdownbib", AuroDropdownBib);
-}
+var dropdownVersion$1 = '3.0.0';
 
-// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
-// See LICENSE in the project root for license information.
+var styleCss$1$1 = i$7`:host{position:relative;display:inline-block;max-width:100%}:host([fluid]){display:block}#bibSizer{position:absolute;z-index:-1;opacity:0;pointer-events:none}.label{font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem);transition:font-size .3s cubic-bezier(0.215, 0.61, 0.355, 1);white-space:normal}.label[hasTrigger=false]{font-size:var(--ds-text-body-size-default, 1rem)}.trigger{position:relative;display:flex;align-items:center}.trigger[showBorder]{border-width:1px;border-style:solid;cursor:pointer;outline-style:solid;outline-width:1px}@media(hover: hover){.trigger:hover{cursor:pointer}}.triggerContentWrapper{overflow:hidden;flex:1;text-overflow:ellipsis;white-space:nowrap}#showStateIcon{display:flex;overflow:hidden;height:100%;align-items:center;margin-left:var(--ds-size-100, 0.5rem)}#showStateIcon [auro-icon]{height:var(--ds-size-300, 1.5rem);line-height:var(--ds-size-300, 1.5rem)}#showStateIcon[data-expanded=true] [auro-icon]{transform:rotate(-180deg)}:host([matchwidth]) #bibSizer{width:100%}:host([disabled]){pointer-events:none}:host([inset]) .trigger{padding:var(--ds-size-150, 0.75rem) var(--ds-size-200, 1rem)}:host([common]) .trigger,:host([inset][bordered]) .trigger{padding:var(--ds-size-200, 1rem) var(--ds-size-150, 0.75rem)}:host([common]) .trigger,:host([rounded]) .trigger{border-radius:var(--ds-border-radius, 0.375rem)}`;
 
+var colorCss$1$1 = i$7`.label{color:var(--ds-auro-dropdown-label-text-color)}.trigger{border-color:var(--ds-auro-dropdown-trigger-border-color);background-color:var(--ds-auro-dropdown-trigger-container-color);color:var(--ds-auro-dropdown-trigger-text-color);outline-color:var(--ds-auro-dropdown-trigger-outline-color)}.trigger:focus-within,.trigger:active{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-active-default, #0074c8);--ds-auro-dropdown-trigger-outline-color: var(--ds-color-border-active-default, #0074c8)}.trigger:focus-within:not(:active){--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #2c67b5);--ds-auro-dropdown-trigger-outline-color: var(--ds-color-border-ui-focus-default, #2c67b5)}.trigger:hover{--ds-auro-dropdown-trigger-container-color: var(--ds-color-container-ui-secondary-hover-default, rgba(0, 0, 0, 0.03))}:host([disabled]){--ds-auro-dropdown-trigger-text-color: var(--ds-color-text-ui-disabled-default, #adadad);--ds-auro-dropdown-label-text-color: var(--ds-color-text-ui-disabled-default, #adadad)}:host([common]),:host([bordered]){--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-primary-default, #585e67)}:host([common]) .trigger:active,:host([common]) .trigger:focus-within,:host([bordered]) .trigger:active,:host([bordered]) .trigger:focus-within{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #2c67b5)}:host([error]){--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-error-default, #cc1816)}:host([error]) .trigger{outline:solid 1px var(--ds-auro-dropdown-trigger-border-color)}:host([error]) .trigger:focus-within,:host([error]) .trigger:active{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-active-default, #0074c8)}:host([error]) .trigger:active{box-shadow:none;outline:none}:host([disabled][common]),:host([disabled][bordered]){--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-disabled-default, #adadad)}`;
 
 /**
- * @attr { Boolean } disableEventShow - If declared, the dropdown will only show by calling the API .show() public method.
- * @slot - Default slot for the popover content.
- * @slot label - Defines the content of the label.
- * @slot helpText - Defines the content of the helpText.
- * @slot trigger - Defines the content of the trigger.
- * @csspart trigger - The trigger content container.
- * @csspart chevron - The collapsed/expanded state icon container.
- * @csspart helpText - The helpText content container.
- * @csspart popover - The bib content container.
- * @event auroDropdown-triggerClick - Notifies that the trigger has been clicked.
- * @event auroDropdown-toggled - Notifies that the visibility of the dropdown bib has changed.
+ * @license
+ * Copyright 2019 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
  */
-class AuroDropdown extends r {
-  constructor() {
-    super();
+const t$1$1=globalThis,e$2$1=t$1$1.ShadowRoot&&(void 0===t$1$1.ShadyCSS||t$1$1.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,s$1$1=Symbol(),o$2$1=new WeakMap;let n$2$1 = class n{constructor(t,e,o){if(this._$cssResult$=true,o!==s$1$1)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=t,this.t=e;}get styleSheet(){let t=this.o;const s=this.t;if(e$2$1&&void 0===t){const e=void 0!==s&&1===s.length;e&&(t=o$2$1.get(s)),void 0===t&&((this.o=t=new CSSStyleSheet).replaceSync(this.cssText),e&&o$2$1.set(s,t));}return t}toString(){return this.cssText}};const r$3$1=t=>new n$2$1("string"==typeof t?t:t+"",void 0,s$1$1),i$3$1=(t,...e)=>{const o=1===t.length?t[0]:e.reduce(((e,s,o)=>e+(t=>{if(true===t._$cssResult$)return t.cssText;if("number"==typeof t)return t;throw Error("Value passed to 'css' function must be a 'css' function result: "+t+". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.")})(s)+t[o+1]),t[0]);return new n$2$1(o,t,s$1$1)},S$1$1=(s,o)=>{if(e$2$1)s.adoptedStyleSheets=o.map((t=>t instanceof CSSStyleSheet?t:t.styleSheet));else for(const e of o){const o=document.createElement("style"),n=t$1$1.litNonce;void 0!==n&&o.setAttribute("nonce",n),o.textContent=e.cssText,s.appendChild(o);}},c$2$1=e$2$1?t=>t:t=>t instanceof CSSStyleSheet?(t=>{let e="";for(const s of t.cssRules)e+=s.cssText;return r$3$1(e)})(t):t;
 
-    this.isPopoverVisible = false;
-    this.matchWidth = false;
-    this.noHideOnThisFocusLoss = false;
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */const{is:i$2$1,defineProperty:e$1,getOwnPropertyDescriptor:r$2$1,getOwnPropertyNames:h$1$1,getOwnPropertySymbols:o$1,getPrototypeOf:n$1$1}=Object,a$1$1=globalThis,c$1$1=a$1$1.trustedTypes,l$1$1=c$1$1?c$1$1.emptyScript:"",p$1$1=a$1$1.reactiveElementPolyfillSupport,d$1$1=(t,s)=>t,u$1$1={toAttribute(t,s){switch(s){case Boolean:t=t?l$1$1:null;break;case Object:case Array:t=null==t?t:JSON.stringify(t);}return t},fromAttribute(t,s){let i=t;switch(s){case Boolean:i=null!==t;break;case Number:i=null===t?null:Number(t);break;case Object:case Array:try{i=JSON.parse(t);}catch(t){i=null;}}return i}},f$1$1=(t,s)=>!i$2$1(t,s),y$1$1={attribute:true,type:String,converter:u$1$1,reflect:false,hasChanged:f$1$1};Symbol.metadata??=Symbol("metadata"),a$1$1.litPropertyMetadata??=new WeakMap;let b$2 = class b extends HTMLElement{static addInitializer(t){this._$Ei(),(this.l??=[]).push(t);}static get observedAttributes(){return this.finalize(),this._$Eh&&[...this._$Eh.keys()]}static createProperty(t,s=y$1$1){if(s.state&&(s.attribute=false),this._$Ei(),this.elementProperties.set(t,s),!s.noAccessor){const i=Symbol(),r=this.getPropertyDescriptor(t,i,s);void 0!==r&&e$1(this.prototype,t,r);}}static getPropertyDescriptor(t,s,i){const{get:e,set:h}=r$2$1(this.prototype,t)??{get(){return this[s]},set(t){this[s]=t;}};return {get(){return e?.call(this)},set(s){const r=e?.call(this);h.call(this,s),this.requestUpdate(t,r,i);},configurable:true,enumerable:true}}static getPropertyOptions(t){return this.elementProperties.get(t)??y$1$1}static _$Ei(){if(this.hasOwnProperty(d$1$1("elementProperties")))return;const t=n$1$1(this);t.finalize(),void 0!==t.l&&(this.l=[...t.l]),this.elementProperties=new Map(t.elementProperties);}static finalize(){if(this.hasOwnProperty(d$1$1("finalized")))return;if(this.finalized=true,this._$Ei(),this.hasOwnProperty(d$1$1("properties"))){const t=this.properties,s=[...h$1$1(t),...o$1(t)];for(const i of s)this.createProperty(i,t[i]);}const t=this[Symbol.metadata];if(null!==t){const s=litPropertyMetadata.get(t);if(void 0!==s)for(const[t,i]of s)this.elementProperties.set(t,i);}this._$Eh=new Map;for(const[t,s]of this.elementProperties){const i=this._$Eu(t,s);void 0!==i&&this._$Eh.set(i,t);}this.elementStyles=this.finalizeStyles(this.styles);}static finalizeStyles(s){const i=[];if(Array.isArray(s)){const e=new Set(s.flat(1/0).reverse());for(const s of e)i.unshift(c$2$1(s));}else void 0!==s&&i.push(c$2$1(s));return i}static _$Eu(t,s){const i=s.attribute;return  false===i?void 0:"string"==typeof i?i:"string"==typeof t?t.toLowerCase():void 0}constructor(){super(),this._$Ep=void 0,this.isUpdatePending=false,this.hasUpdated=false,this._$Em=null,this._$Ev();}_$Ev(){this._$ES=new Promise((t=>this.enableUpdating=t)),this._$AL=new Map,this._$E_(),this.requestUpdate(),this.constructor.l?.forEach((t=>t(this)));}addController(t){(this._$EO??=new Set).add(t),void 0!==this.renderRoot&&this.isConnected&&t.hostConnected?.();}removeController(t){this._$EO?.delete(t);}_$E_(){const t=new Map,s=this.constructor.elementProperties;for(const i of s.keys())this.hasOwnProperty(i)&&(t.set(i,this[i]),delete this[i]);t.size>0&&(this._$Ep=t);}createRenderRoot(){const t=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return S$1$1(t,this.constructor.elementStyles),t}connectedCallback(){this.renderRoot??=this.createRenderRoot(),this.enableUpdating(true),this._$EO?.forEach((t=>t.hostConnected?.()));}enableUpdating(t){}disconnectedCallback(){this._$EO?.forEach((t=>t.hostDisconnected?.()));}attributeChangedCallback(t,s,i){this._$AK(t,i);}_$EC(t,s){const i=this.constructor.elementProperties.get(t),e=this.constructor._$Eu(t,i);if(void 0!==e&&true===i.reflect){const r=(void 0!==i.converter?.toAttribute?i.converter:u$1$1).toAttribute(s,i.type);this._$Em=t,null==r?this.removeAttribute(e):this.setAttribute(e,r),this._$Em=null;}}_$AK(t,s){const i=this.constructor,e=i._$Eh.get(t);if(void 0!==e&&this._$Em!==e){const t=i.getPropertyOptions(e),r="function"==typeof t.converter?{fromAttribute:t.converter}:void 0!==t.converter?.fromAttribute?t.converter:u$1$1;this._$Em=e,this[e]=r.fromAttribute(s,t.type),this._$Em=null;}}requestUpdate(t,s,i){if(void 0!==t){if(i??=this.constructor.getPropertyOptions(t),!(i.hasChanged??f$1$1)(this[t],s))return;this.P(t,s,i);} false===this.isUpdatePending&&(this._$ES=this._$ET());}P(t,s,i){this._$AL.has(t)||this._$AL.set(t,s),true===i.reflect&&this._$Em!==t&&(this._$Ej??=new Set).add(t);}async _$ET(){this.isUpdatePending=true;try{await this._$ES;}catch(t){Promise.reject(t);}const t=this.scheduleUpdate();return null!=t&&await t,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){if(!this.isUpdatePending)return;if(!this.hasUpdated){if(this.renderRoot??=this.createRenderRoot(),this._$Ep){for(const[t,s]of this._$Ep)this[t]=s;this._$Ep=void 0;}const t=this.constructor.elementProperties;if(t.size>0)for(const[s,i]of t) true!==i.wrapped||this._$AL.has(s)||void 0===this[s]||this.P(s,this[s],i);}let t=false;const s=this._$AL;try{t=this.shouldUpdate(s),t?(this.willUpdate(s),this._$EO?.forEach((t=>t.hostUpdate?.())),this.update(s)):this._$EU();}catch(s){throw t=false,this._$EU(),s}t&&this._$AE(s);}willUpdate(t){}_$AE(t){this._$EO?.forEach((t=>t.hostUpdated?.())),this.hasUpdated||(this.hasUpdated=true,this.firstUpdated(t)),this.updated(t);}_$EU(){this._$AL=new Map,this.isUpdatePending=false;}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$ES}shouldUpdate(t){return  true}update(t){this._$Ej&&=this._$Ej.forEach((t=>this._$EC(t,this[t]))),this._$EU();}updated(t){}firstUpdated(t){}};b$2.elementStyles=[],b$2.shadowRootOptions={mode:"open"},b$2[d$1$1("elementProperties")]=new Map,b$2[d$1$1("finalized")]=new Map,p$1$1?.({ReactiveElement:b$2}),(a$1$1.reactiveElementVersions??=[]).push("2.0.4");
 
-    this.privateDefaults();
-  }
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const t=globalThis,i$1=t.trustedTypes,s=i$1?i$1.createPolicy("lit-html",{createHTML:t=>t}):void 0,e="$lit$",h$4=`lit$${Math.random().toFixed(9).slice(2)}$`,o$8="?"+h$4,n=`<${o$8}>`,r$1$1=document,l=()=>r$1$1.createComment(""),c$6=t=>null===t||"object"!=typeof t&&"function"!=typeof t,a=Array.isArray,u=t=>a(t)||"function"==typeof t?.[Symbol.iterator],d$4="[ \t\n\f\r]",f$4=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,v$2=/-->/g,_$2=/>/g,m$2=RegExp(`>|${d$4}(?:([^\\s"'>=/]+)(${d$4}*=${d$4}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,"g"),p$4=/'/g,g$2=/"/g,$$2=/^(?:script|style|textarea|title)$/i,y=t=>(i,...s)=>({_$litType$:t,strings:i,values:s}),x=y(1),T$2=Symbol.for("lit-noChange"),E$2=Symbol.for("lit-nothing"),A$2=new WeakMap,C$2=r$1$1.createTreeWalker(r$1$1,129);function P$2(t,i){if(!a(t)||!t.hasOwnProperty("raw"))throw Error("invalid template strings array");return void 0!==s?s.createHTML(i):i}const V$2=(t,i)=>{const s=t.length-1,o=[];let r,l=2===i?"<svg>":3===i?"<math>":"",c=f$4;for(let i=0;i<s;i++){const s=t[i];let a,u,d=-1,y=0;for(;y<s.length&&(c.lastIndex=y,u=c.exec(s),null!==u);)y=c.lastIndex,c===f$4?"!--"===u[1]?c=v$2:void 0!==u[1]?c=_$2:void 0!==u[2]?($$2.test(u[2])&&(r=RegExp("</"+u[2],"g")),c=m$2):void 0!==u[3]&&(c=m$2):c===m$2?">"===u[0]?(c=r??f$4,d=-1):void 0===u[1]?d=-2:(d=c.lastIndex-u[2].length,a=u[1],c=void 0===u[3]?m$2:'"'===u[3]?g$2:p$4):c===g$2||c===p$4?c=m$2:c===v$2||c===_$2?c=f$4:(c=m$2,r=void 0);const x=c===m$2&&t[i+1].startsWith("/>")?" ":"";l+=c===f$4?s+n:d>=0?(o.push(a),s.slice(0,d)+e+s.slice(d)+h$4+x):s+h$4+(-2===d?i:x);}return [P$2(t,l+(t[s]||"<?>")+(2===i?"</svg>":3===i?"</math>":"")),o]};let N$2 = class N{constructor({strings:t,_$litType$:s},n){let r;this.parts=[];let c=0,a=0;const u=t.length-1,d=this.parts,[f,v]=V$2(t,s);if(this.el=N.createElement(f,n),C$2.currentNode=this.el.content,2===s||3===s){const t=this.el.content.firstChild;t.replaceWith(...t.childNodes);}for(;null!==(r=C$2.nextNode())&&d.length<u;){if(1===r.nodeType){if(r.hasAttributes())for(const t of r.getAttributeNames())if(t.endsWith(e)){const i=v[a++],s=r.getAttribute(t).split(h$4),e=/([.?@])?(.*)/.exec(i);d.push({type:1,index:c,name:e[2],strings:s,ctor:"."===e[1]?H$2:"?"===e[1]?I$2:"@"===e[1]?L$2:k$2}),r.removeAttribute(t);}else t.startsWith(h$4)&&(d.push({type:6,index:c}),r.removeAttribute(t));if($$2.test(r.tagName)){const t=r.textContent.split(h$4),s=t.length-1;if(s>0){r.textContent=i$1?i$1.emptyScript:"";for(let i=0;i<s;i++)r.append(t[i],l()),C$2.nextNode(),d.push({type:2,index:++c});r.append(t[s],l());}}}else if(8===r.nodeType)if(r.data===o$8)d.push({type:2,index:c});else {let t=-1;for(;-1!==(t=r.data.indexOf(h$4,t+1));)d.push({type:7,index:c}),t+=h$4.length-1;}c++;}}static createElement(t,i){const s=r$1$1.createElement("template");return s.innerHTML=t,s}};function S$4(t,i,s=t,e){if(i===T$2)return i;let h=void 0!==e?s._$Co?.[e]:s._$Cl;const o=c$6(i)?void 0:i._$litDirective$;return h?.constructor!==o&&(h?._$AO?.(false),void 0===o?h=void 0:(h=new o(t),h._$AT(t,s,e)),void 0!==e?(s._$Co??=[])[e]=h:s._$Cl=h),void 0!==h&&(i=S$4(t,h._$AS(t,i.values),h,e)),i}let M$2 = 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){const{el:{content:i},parts:s}=this._$AD,e=(t?.creationScope??r$1$1).importNode(i,true);C$2.currentNode=e;let h=C$2.nextNode(),o=0,n=0,l=s[0];for(;void 0!==l;){if(o===l.index){let i;2===l.type?i=new R$2(h,h.nextSibling,this,t):1===l.type?i=new l.ctor(h,l.name,l.strings,this,t):6===l.type&&(i=new z$2(h,this,t)),this._$AV.push(i),l=s[++n];}o!==l?.index&&(h=C$2.nextNode(),o++);}return C$2.currentNode=r$1$1,e}p(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++;}};let R$2 = class R{get _$AU(){return this._$AM?._$AU??this._$Cv}constructor(t,i,s,e){this.type=2,this._$AH=E$2,this._$AN=void 0,this._$AA=t,this._$AB=i,this._$AM=s,this.options=e,this._$Cv=e?.isConnected??true;}get parentNode(){let t=this._$AA.parentNode;const i=this._$AM;return void 0!==i&&11===t?.nodeType&&(t=i.parentNode),t}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(t,i=this){t=S$4(this,t,i),c$6(t)?t===E$2||null==t||""===t?(this._$AH!==E$2&&this._$AR(),this._$AH=E$2):t!==this._$AH&&t!==T$2&&this._(t):void 0!==t._$litType$?this.$(t):void 0!==t.nodeType?this.T(t):u(t)?this.k(t):this._(t);}O(t){return this._$AA.parentNode.insertBefore(t,this._$AB)}T(t){this._$AH!==t&&(this._$AR(),this._$AH=this.O(t));}_(t){this._$AH!==E$2&&c$6(this._$AH)?this._$AA.nextSibling.data=t:this.T(r$1$1.createTextNode(t)),this._$AH=t;}$(t){const{values:i,_$litType$:s}=t,e="number"==typeof s?this._$AC(t):(void 0===s.el&&(s.el=N$2.createElement(P$2(s.h,s.h[0]),this.options)),s);if(this._$AH?._$AD===e)this._$AH.p(i);else {const t=new M$2(e,this),s=t.u(this.options);t.p(i),this.T(s),this._$AH=t;}}_$AC(t){let i=A$2.get(t.strings);return void 0===i&&A$2.set(t.strings,i=new N$2(t)),i}k(t){a(this._$AH)||(this._$AH=[],this._$AR());const i=this._$AH;let s,e=0;for(const h of t)e===i.length?i.push(s=new R(this.O(l()),this.O(l()),this,this.options)):s=i[e],s._$AI(h),e++;e<i.length&&(this._$AR(s&&s._$AB.nextSibling,e),i.length=e);}_$AR(t=this._$AA.nextSibling,i){for(this._$AP?.(false,true,i);t&&t!==this._$AB;){const i=t.nextSibling;t.remove(),t=i;}}setConnected(t){ void 0===this._$AM&&(this._$Cv=t,this._$AP?.(t));}};let k$2 = class k{get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}constructor(t,i,s,e,h){this.type=1,this._$AH=E$2,this._$AN=void 0,this.element=t,this.name=i,this._$AM=e,this.options=h,s.length>2||""!==s[0]||""!==s[1]?(this._$AH=Array(s.length-1).fill(new String),this.strings=s):this._$AH=E$2;}_$AI(t,i=this,s,e){const h=this.strings;let o=false;if(void 0===h)t=S$4(this,t,i,0),o=!c$6(t)||t!==this._$AH&&t!==T$2,o&&(this._$AH=t);else {const e=t;let n,r;for(t=h[0],n=0;n<h.length-1;n++)r=S$4(this,e[s+n],i,n),r===T$2&&(r=this._$AH[n]),o||=!c$6(r)||r!==this._$AH[n],r===E$2?t=E$2:t!==E$2&&(t+=(r??"")+h[n+1]),this._$AH[n]=r;}o&&!e&&this.j(t);}j(t){t===E$2?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,t??"");}};let H$2 = class H extends k$2{constructor(){super(...arguments),this.type=3;}j(t){this.element[this.name]=t===E$2?void 0:t;}};let I$2 = class I extends k$2{constructor(){super(...arguments),this.type=4;}j(t){this.element.toggleAttribute(this.name,!!t&&t!==E$2);}};let L$2 = class L extends k$2{constructor(t,i,s,e,h){super(t,i,s,e,h),this.type=5;}_$AI(t,i=this){if((t=S$4(this,t,i,0)??E$2)===T$2)return;const s=this._$AH,e=t===E$2&&s!==E$2||t.capture!==s.capture||t.once!==s.once||t.passive!==s.passive,h=t!==E$2&&(s===E$2||e);e&&this.element.removeEventListener(this.name,this,s),h&&this.element.addEventListener(this.name,this,t),this._$AH=t;}handleEvent(t){"function"==typeof this._$AH?this._$AH.call(this.options?.host??this.element,t):this._$AH.handleEvent(t);}};let z$2 = 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$4(this,t);}};const j$2=t.litHtmlPolyfillSupport;j$2?.(N$2,R$2),(t.litHtmlVersions??=[]).push("3.2.1");const B$2=(t,i,s)=>{const e=s?.renderBefore??i;let h=e._$litPart$;if(void 0===h){const t=s?.renderBefore??null;e._$litPart$=h=new R$2(i.insertBefore(l(),t),t,void 0,s??{});}return h._$AI(t),h};
 
-  /**
-   * @private
-   * @returns {void} Internal defaults.
-   */
-  privateDefaults() {
-    this.bordered = false;
-    this.chevron = false;
-    this.disabled = false;
-    this.error = false;
-    this.inset = false;
-    this.placement = 'bottom-start';
-    this.rounded = false;
-    this.tabIndex = 0;
-    this.noToggle = false;
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */let r$8 = class r extends b$2{constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=void 0;}createRenderRoot(){const t=super.createRenderRoot();return this.renderOptions.renderBefore??=t.firstChild,t}update(t){const s=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(t),this._$Do=B$2(s,this.renderRoot,this.renderOptions);}connectedCallback(){super.connectedCallback(),this._$Do?.setConnected(true);}disconnectedCallback(){super.disconnectedCallback(),this._$Do?.setConnected(false);}render(){return T$2}};r$8._$litElement$=true,r$8["finalized"]=true,globalThis.litElementHydrateSupport?.({LitElement:r$8});const i=globalThis.litElementPolyfillSupport;i?.({LitElement:r$8});(globalThis.litElementVersions??=[]).push("4.1.1");
 
-    /**
-     * @private
-     */
-    this.hasTriggerContent = false;
+var colorCss$4 = i$3$1`:host([error]){--ds-auro-helptext-color: var(--ds-color-text-error-default, #cc1816)}.helptext-wrapper{color:var(--ds-auro-helptext-color)}`;
 
-    /**
-     * @private
-     */
-    this.triggerContentSlot = undefined;
+var styleCss$4 = i$3$1`.helptext-wrapper{display:none;font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-size-200, 1rem)}:host([large]) .helptext-wrapper{font-size:var(--ds-text-body-size-default, 1rem)}.helptext-wrapper[visible]{display:block}::slotted(*:not(:empty)){margin-top:var(--ds-size-50, 0.25rem);margin-bottom:0}::slotted(p){margin-block:0}`;
 
-    /**
-     * @private
-     */
-    this.runtimeUtils = new AuroLibraryRuntimeUtils();
+var tokensCss$3 = i$3$1`:host{--ds-auro-helptext-color: var(--ds-color-text-tertiary-default, #6a717c)}`;
 
-    /**
-     * @private
-     */
-    this.floater = new AuroFloatingUI();
+// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
+// See LICENSE in the project root for license information.
 
-    /**
-     * @private
-     */
-    this.floaterConfig = {
-      placement: 'bottom-start',
-      flip: true,
-      autoPlacement: false,
-      offset: 0,
-    };
+// ---------------------------------------------------------------------
 
-    /**
-     * Generate unique names for dependency components.
-     */
-    const versioning = new AuroDependencyVersioning();
-    this.iconTag = versioning.generateTag('auro-icon', iconVersion$1, AuroIcon$1);
+/* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
+
+class AuroLibraryRuntimeUtils {
+
+  /* eslint-disable jsdoc/require-param */
+
+  /**
+   * This will register a new custom element with the browser.
+   * @param {String} name - The name of the custom element.
+   * @param {Object} componentClass - The class to register as a custom element.
+   * @returns {void}
+   */
+  registerComponent(name, componentClass) {
+    if (!customElements.get(name)) {
+      customElements.define(name, class extends componentClass {});
+    }
   }
 
   /**
-   * Public method to hide the dropdown.
+   * Finds and returns the closest HTML Element based on a selector.
    * @returns {void}
    */
-  hide() {
-    this.floater.hideBib();
+  closestElement(
+    selector, // selector like in .closest()
+    base = this, // extra functionality to skip a parent
+    __Closest = (el, found = el && el.closest(selector)) =>
+      !el || el === document || el === window
+        ? null // standard .closest() returns null for non-found selectors also
+        : found
+          ? found // found a selector INside this element
+          : __Closest(el.getRootNode().host) // recursion!! break out to parent DOM
+  ) {
+    return __Closest(base);
   }
+  /* eslint-enable jsdoc/require-param */
 
   /**
-   * Public method to show the dropdown.
+   * If the element passed is registered with a different tag name than what is passed in, the tag name is added as an attribute to the element.
+   * @param {Object} elem - The element to check.
+   * @param {String} tagName - The name of the Auro component to check for or add as an attribute.
    * @returns {void}
    */
-  show() {
-    this.floater.showBib();
+  handleComponentTagRename(elem, tagName) {
+    const tag = tagName.toLowerCase();
+    const elemTag = elem.tagName.toLowerCase();
+
+    if (elemTag !== tag) {
+      elem.setAttribute(tag, true);
+    }
+  }
+
+  /**
+   * Validates if an element is a specific Auro component.
+   * @param {Object} elem - The element to validate.
+   * @param {String} tagName - The name of the Auro component to check against.
+   * @returns {Boolean} - Returns true if the element is the specified Auro component.
+   */
+  elementMatch(elem, tagName) {
+    const tag = tagName.toLowerCase();
+    const elemTag = elem.tagName.toLowerCase();
+
+    return elemTag === tag || elem.hasAttribute(tag);
+  }
+}
+
+// Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
+// See LICENSE in the project root for license information.
+
+
+/**
+ * Displays help text or error messages within form elements - Internal Use Only.
+ *
+ * @attr { Boolean } large - If declared, make font-size to 1rem(16px).
+ */
+class AuroHelpText extends r$8 {
+
+  constructor() {
+    super();
+
+    this.error = false;
+    this.hasTextContent = false;
+
+    AuroLibraryRuntimeUtils.prototype.handleComponentTagRename(this, 'auro-helptext');
+  }
+
+  static get styles() {
+    return [
+      colorCss$4,
+      styleCss$4,
+      tokensCss$3
+    ];
   }
 
   // function to define props used within the scope of this component
@@ -3021,7 +3173,231 @@ class AuroDropdown extends r {
     return {
 
       /**
-       * If declared, applies a border around the trigger slot.
+       * @private
+       */
+      slotNodes: {
+        type: Boolean,
+      },
+
+      /**
+       * @private
+       */
+      hasTextContent: {
+        type: Boolean,
+      },
+
+      /**
+       * If declared, make font color red.
+       */
+      error: {
+        type: Boolean,
+        reflect: true,
+      },
+    };
+  }
+
+  /**
+   * This will register this element with the browser.
+   * @param {string} [name="auro-helptext"] - The name of element that you want to register to.
+   *
+   * @example
+   * AuroCheckbox.register("custom-helptext") // this will register this element to <custom-helptext/>
+   *
+   */
+  static register(name = "auro-helptext") {
+    AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroHelpText);
+  }
+
+  updated() {
+    this.handleSlotChange();
+  }
+
+  handleSlotChange(event) {
+    if (event) {
+      this.slotNodes = event.target.assignedNodes();
+    }
+
+    this.hasTextContent = this.checkSlotsForContent(this.slotNodes);
+  }
+
+  /**
+   * Checks if any of the provided nodes or their nested slot nodes contain non-empty text content.
+   *
+   * @param {NodeList|Array} nodes - The list of nodes to check for content.
+   * @returns {boolean} - Returns true if any node or nested slot node contains non-empty text content, otherwise false.
+   * @private
+   */
+  checkSlotsForContent(nodes) {
+    if (!nodes) {
+      return false;
+    }
+
+    return nodes.some((node) => {
+      if (node.textContent.trim()) {
+        return true;
+      }
+
+      if (!node.querySelector) {
+        return false;
+      }
+
+      const nestedSlot = node.tagName === 'SLOT' ? node : node.querySelector('slot');
+      if (!nestedSlot) {
+        return false;
+      }
+
+      const nestedSlotNodes = nestedSlot.assignedNodes();
+      return this.checkSlotsForContent(nestedSlotNodes);
+    });
+  }
+
+  // function that renders the HTML and CSS into  the scope of the component
+  render() {
+    return x`
+      <div class="helptext-wrapper" ?visible="${this.hasTextContent}">
+          <slot @slotchange=${this.handleSlotChange}></slot>
+      </div>
+    `;
+  }
+}
+
+var helpTextVersion = '1.0.0';
+
+// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
+// See LICENSE in the project root for license information.
+
+
+/**
+ * @attr { Boolean } disableEventShow - If declared, the dropdown will only show by calling the API .show() public method.
+ * @slot - Default slot for the popover content.
+ * @slot label - Defines the content of the label.
+ * @slot helpText - Defines the content of the helpText.
+ * @slot trigger - Defines the content of the trigger.
+ * @csspart trigger - The trigger content container.
+ * @csspart chevron - The collapsed/expanded state icon container.
+ * @csspart helpText - The helpText content container.
+ * @event auroDropdown-triggerClick - Notifies that the trigger has been clicked.
+ * @event auroDropdown-toggled - Notifies that the visibility of the dropdown bib has changed.
+ */
+class AuroDropdown extends r$4 {
+  constructor() {
+    super();
+
+    this.isPopoverVisible = false;
+    this.isBibFullscreen = false;
+    this.matchWidth = false;
+    this.noHideOnThisFocusLoss = false;
+
+    this.privateDefaults();
+
+    /**
+     * @private
+     * @property {boolean} delegatesFocus - Whether the shadow root delegates focus.
+     */
+    this.constructor.shadowRootOptions = {
+      ...r$4.shadowRootOptions,
+      delegatesFocus: true,
+    };
+
+    /**
+     * @private
+     */
+    this.triggerContentFocusable = false;
+
+    /**
+     * @private
+     */
+    this.showTriggerBorders = true;
+  }
+
+  /**
+   * @private
+   * @returns {void} Internal defaults.
+   */
+  privateDefaults() {
+    this.bordered = false;
+    this.chevron = false;
+    this.disabled = false;
+    this.error = false;
+    this.inset = false;
+    this.placement = 'bottom-start';
+    this.rounded = false;
+    this.tabIndex = 0;
+    this.noToggle = false;
+
+    /**
+     * @private
+     */
+    this.hasTriggerContent = false;
+
+    /**
+     * @private
+     */
+    this.triggerContentSlot = undefined;
+
+    /**
+     * @private
+     */
+    this.runtimeUtils = new AuroLibraryRuntimeUtils$1();
+
+    /**
+     * @private
+     */
+    this.floater = new AuroFloatingUI();
+
+    /**
+     * @private
+     */
+    this.floaterConfig = {
+      placement: 'bottom-start',
+      flip: true,
+      autoPlacement: false,
+      offset: 0,
+    };
+
+    /**
+     * Generate unique names for dependency components.
+     */
+    const versioning = new AuroDependencyVersioning();
+
+    /**
+     * @private
+     */
+    this.iconTag = versioning.generateTag('auro-icon', iconVersion$1, AuroIcon$1);
+
+    /**
+     * @private
+     */
+    this.dropdownBibTag = versioning.generateTag('auro-dropdownbib', dropdownVersion$1, AuroDropdownBib);
+
+    /**
+     * @private
+     */
+    this.helpTextTag = versioning.generateTag('auro-helptext', helpTextVersion, AuroHelpText);
+  }
+
+  /**
+   * Public method to hide the dropdown.
+   * @returns {void}
+   */
+  hide() {
+    this.floater.hideBib();
+  }
+
+  /**
+   * Public method to show the dropdown.
+   * @returns {void}
+   */
+  show() {
+    this.floater.showBib();
+  }
+
+  // function to define props used within the scope of this component
+  static get properties() {
+    return {
+
+      /**
+       * If declared, applies a border around the trigger slot.
        */
       bordered: {
         type: Boolean,
@@ -3099,6 +3475,14 @@ class AuroDropdown extends r {
         type: Boolean
       },
 
+      /**
+       * If true, the dropdown bib is taking the fullscreen when it's open
+       */
+      isBibFullscreen: {
+        type: Boolean,
+        reflect: true,
+      },
+
       /**
        * If declared, the trigger will toggle the dropdown on mouseover/mouseout.
        */
@@ -3117,7 +3501,7 @@ class AuroDropdown extends r {
       /**
        * Defines the screen size breakpoint (`lg`, `md`, `sm`, or `xs`) at which the dropdown switches to fullscreen mode on mobile. When expanded, the dropdown will automatically display in fullscreen mode if the screen size is equal to or smaller than the selected breakpoint.
        */
-      mobileFullscreenBreakpoint: {
+      fullscreenBreakpoint: {
         type: String,
         reflect: true
       },
@@ -3179,7 +3563,7 @@ class AuroDropdown extends r {
     return [
       colorCss$1$1,
       styleCss$1$1,
-      tokensCss$3
+      tokensCss$1$1
     ];
   }
 
@@ -3192,7 +3576,7 @@ class AuroDropdown extends r {
    *
    */
   static register(name = "auro-dropdown") {
-    AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroDropdown);
+    AuroLibraryRuntimeUtils$1.prototype.registerComponent(name, AuroDropdown);
   }
 
   connectedCallback() {
@@ -3206,8 +3590,8 @@ class AuroDropdown extends r {
   updated(changedProperties) {
     this.floater.handleUpdate(changedProperties);
 
-    if (changedProperties.has('mobileFullscreenBreakpoint')) {
-      this.bibContent.mobileFullscreenBreakpoint = this.mobileFullscreenBreakpoint;
+    if (changedProperties.has('fullscreenBreakpoint')) {
+      this.bibContent.mobileFullscreenBreakpoint = this.fullscreenBreakpoint;
     }
 
     // when trigger's content is changed without any attribute or node change,
@@ -3227,7 +3611,6 @@ class AuroDropdown extends r {
 
   /**
    * Exposes CSS parts for styling from parent components.
-   * @private
    * @returns {void}
    */
   exposeCssParts() {
@@ -3257,6 +3640,64 @@ class AuroDropdown extends r {
     return inCustomSlot;
   }
 
+  /**
+   * Determines if the element or any children are focusable.
+   * @private
+   * @param {HTMLElement} element - Element to check.
+   * @returns {Boolean} - True if the element or any children are focusable.
+   */
+  containsFocusableElement(element) {
+    this.showTriggerBorders = true;
+
+    const nodes = [
+      element,
+      ...element.children
+    ];
+
+    const focusableElements = [
+      'a',
+      'auro-hyperlink',
+      'button',
+      'auro-button',
+      'input',
+      'auro-input',
+    ];
+
+    const focusableElementsThatNeedBorders = ['auro-input'];
+
+    const result = nodes.some((node) => {
+      const tagName = node.tagName.toLowerCase();
+
+      if (node.tabIndex > -1) {
+        return true;
+      }
+
+      if (focusableElements.includes(tagName)) {
+        if ((tagName === 'a' || tagName === 'auro-hyperlink' || node.hasAttribute('auro-hyperlink')) && node.hasAttribute('href')) {
+          return true;
+        }
+        if (!node.hasAttribute('disabled')) {
+          return true;
+        }
+      }
+
+      if (focusableElements.some((focusableElement) => focusableElement.startsWith('auro-') && (focusableElement === tagName || node.hasAttribute(focusableElement)))) {
+        return true;
+      }
+
+      return false;
+    });
+
+    if (result) {
+      this.showTriggerBorders = !nodes.some((node) => {
+        const tagName = node.tagName.toLowerCase();
+        return focusableElements.includes(tagName) && !focusableElementsThatNeedBorders.includes(tagName);
+      });
+    }
+
+    return result;
+  }
+
   /**
    * Handles changes to the trigger content slot and updates related properties.
    *
@@ -3266,12 +3707,30 @@ class AuroDropdown extends r {
    *
    * @private
    * @method handleTriggerContentSlotChange
-   * @param {Event} event - native slotchange event
+   * @param {Event} event - Native slotchange event.
    * @returns {void}
    */
   handleTriggerContentSlotChange(event) {
     this.floater.handleTriggerTabIndex();
 
+    const triggerContentNodes = this.shadowRoot.querySelector('.triggerContent slot').assignedNodes();
+
+    triggerContentNodes.forEach((node) => {
+      if (!this.triggerContentFocusable) {
+        this.triggerContentFocusable = this.containsFocusableElement(node);
+      }
+    });
+
+    const trigger = this.shadowRoot.querySelector('#trigger');
+
+    if (!this.triggerContentFocusable) {
+      trigger.setAttribute('tabindex', '0');
+      trigger.setAttribute('role', 'button');
+    } else {
+      trigger.removeAttribute('tabindex');
+      trigger.removeAttribute('role');
+    }
+
     if (event) {
       this.triggerNode = event.target;
       this.triggerContentSlot = event.target.assignedNodes();
@@ -3316,16 +3775,15 @@ class AuroDropdown extends r {
 
   // function that renders the HTML and CSS into  the scope of the component
   render() {
-    return u$1`
+    return u$3`
       <div>
         <div
           id="trigger"
           class="trigger"
           part="trigger"
-          role="button"
           aria-labelledby="triggerLabel"
-          aria-controls="popover"
           tabindex="${this.tabIndex}"
+          ?showBorder="${this.showTriggerBorders}"
           >
           <div class="triggerContentWrapper">
             <label class="label" id="triggerLabel" hasTrigger=${this.hasTriggerContent}>
@@ -3334,10 +3792,10 @@ class AuroDropdown extends r {
             <div class="triggerContent">
               <slot
                 name="trigger"
-                @slotchange="${(event) => this.handleTriggerContentSlotChange(event)}"></slot>
+                @slotchange="${this.handleTriggerContentSlotChange}"></slot>
             </div>
           </div>
-          ${this.chevron || this.common ? u$1`
+          ${this.chevron || this.common ? u$3`
               <div
                 id="showStateIcon"
                 part="chevron">
@@ -3351,36 +3809,175 @@ class AuroDropdown extends r {
               </div>
             ` : undefined }
         </div>
-        <div
-          class="helpText"
-          part="helpText">
+        <${this.helpTextTag} part="helpText" ?error="${this.error}">
           <slot name="helpText"></slot>
-        </div>
+        </${this.helpTextTag}>
         <div class="slotContent">
           <slot @slotchange="${this.handleDefaultSlot}"></slot>
         </div>
         <div id="bibSizer" part="size"></div>
-        <auro-dropdownbib
+        <${this.dropdownBibTag}
           id="bib"
           role="tooltip"
+          ?isfullscreen="${this.isBibFullscreen}"
           ?common="${this.common}"
           ?rounded="${this.common || this.rounded}"
           ?inset="${this.common || this.inset}">
-        </auro-dropdownbib>
+        </${this.dropdownBibTag}>
       </div>
     `;
   }
 }
 
-AuroDropdown.register();
-
 var dropdownVersion = '3.0.0';
 
-var styleCss$3 = i$b`*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}[slot=trigger]{width:100%;padding:0;border:0;cursor:pointer;font-family:inherit;font-size:inherit;text-align:left}[slot=trigger] .nestingSpacer{display:none}[slot=trigger] #placeholder.hidden{position:absolute;z-index:-1;opacity:0;pointer-events:none}:host [auro-dropdown]{position:relative}:host [auro-dropdown]::part(trigger){max-height:var(--ds-size-300, 1.5rem)}:host [auro-dropdown]::part(popover){max-width:-webkit-fill-available;overflow-y:scroll}:host([disabled]) *{user-select:none}.outerWrapper{position:relative}auro-menuoption{padding:0;pointer-events:none}.menuWrapper{padding:var(--ds-size-50, 0.25rem) 0}.selectElement-helpText{margin:var(--ds-size-50, 0.25rem) 0;font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:1rem}`;
+/**
+ * @license
+ * Copyright 2019 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const t$2=globalThis,e$4=t$2.ShadowRoot&&(void 0===t$2.ShadyCSS||t$2.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,s$2=Symbol(),o$4=new WeakMap;let n$3 = class n{constructor(t,e,o){if(this._$cssResult$=true,o!==s$2)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=t,this.t=e;}get styleSheet(){let t=this.o;const s=this.t;if(e$4&&void 0===t){const e=void 0!==s&&1===s.length;e&&(t=o$4.get(s)),void 0===t&&((this.o=t=new CSSStyleSheet).replaceSync(this.cssText),e&&o$4.set(s,t));}return t}toString(){return this.cssText}};const r$3=t=>new n$3("string"==typeof t?t:t+"",void 0,s$2),i$5=(t,...e)=>{const o=1===t.length?t[0]:e.reduce(((e,s,o)=>e+(t=>{if(true===t._$cssResult$)return t.cssText;if("number"==typeof t)return t;throw Error("Value passed to 'css' function must be a 'css' function result: "+t+". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.")})(s)+t[o+1]),t[0]);return new n$3(o,t,s$2)},S$1=(s,o)=>{if(e$4)s.adoptedStyleSheets=o.map((t=>t instanceof CSSStyleSheet?t:t.styleSheet));else for(const e of o){const o=document.createElement("style"),n=t$2.litNonce;void 0!==n&&o.setAttribute("nonce",n),o.textContent=e.cssText,s.appendChild(o);}},c$2=e$4?t=>t:t=>t instanceof CSSStyleSheet?(t=>{let e="";for(const s of t.cssRules)e+=s.cssText;return r$3(e)})(t):t;
+
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */const{is:i$4,defineProperty:e$3,getOwnPropertyDescriptor:r$2,getOwnPropertyNames:h$1,getOwnPropertySymbols:o$3,getPrototypeOf:n$2}=Object,a$2=globalThis,c$1=a$2.trustedTypes,l$2=c$1?c$1.emptyScript:"",p$1=a$2.reactiveElementPolyfillSupport,d$1=(t,s)=>t,u$2={toAttribute(t,s){switch(s){case Boolean:t=t?l$2:null;break;case Object:case Array:t=null==t?t:JSON.stringify(t);}return t},fromAttribute(t,s){let i=t;switch(s){case Boolean:i=null!==t;break;case Number:i=null===t?null:Number(t);break;case Object:case Array:try{i=JSON.parse(t);}catch(t){i=null;}}return i}},f$1=(t,s)=>!i$4(t,s),y$1={attribute:true,type:String,converter:u$2,reflect:false,hasChanged:f$1};Symbol.metadata??=Symbol("metadata"),a$2.litPropertyMetadata??=new WeakMap;class b extends HTMLElement{static addInitializer(t){this._$Ei(),(this.l??=[]).push(t);}static get observedAttributes(){return this.finalize(),this._$Eh&&[...this._$Eh.keys()]}static createProperty(t,s=y$1){if(s.state&&(s.attribute=false),this._$Ei(),this.elementProperties.set(t,s),!s.noAccessor){const i=Symbol(),r=this.getPropertyDescriptor(t,i,s);void 0!==r&&e$3(this.prototype,t,r);}}static getPropertyDescriptor(t,s,i){const{get:e,set:h}=r$2(this.prototype,t)??{get(){return this[s]},set(t){this[s]=t;}};return {get(){return e?.call(this)},set(s){const r=e?.call(this);h.call(this,s),this.requestUpdate(t,r,i);},configurable:true,enumerable:true}}static getPropertyOptions(t){return this.elementProperties.get(t)??y$1}static _$Ei(){if(this.hasOwnProperty(d$1("elementProperties")))return;const t=n$2(this);t.finalize(),void 0!==t.l&&(this.l=[...t.l]),this.elementProperties=new Map(t.elementProperties);}static finalize(){if(this.hasOwnProperty(d$1("finalized")))return;if(this.finalized=true,this._$Ei(),this.hasOwnProperty(d$1("properties"))){const t=this.properties,s=[...h$1(t),...o$3(t)];for(const i of s)this.createProperty(i,t[i]);}const t=this[Symbol.metadata];if(null!==t){const s=litPropertyMetadata.get(t);if(void 0!==s)for(const[t,i]of s)this.elementProperties.set(t,i);}this._$Eh=new Map;for(const[t,s]of this.elementProperties){const i=this._$Eu(t,s);void 0!==i&&this._$Eh.set(i,t);}this.elementStyles=this.finalizeStyles(this.styles);}static finalizeStyles(s){const i=[];if(Array.isArray(s)){const e=new Set(s.flat(1/0).reverse());for(const s of e)i.unshift(c$2(s));}else void 0!==s&&i.push(c$2(s));return i}static _$Eu(t,s){const i=s.attribute;return  false===i?void 0:"string"==typeof i?i:"string"==typeof t?t.toLowerCase():void 0}constructor(){super(),this._$Ep=void 0,this.isUpdatePending=false,this.hasUpdated=false,this._$Em=null,this._$Ev();}_$Ev(){this._$ES=new Promise((t=>this.enableUpdating=t)),this._$AL=new Map,this._$E_(),this.requestUpdate(),this.constructor.l?.forEach((t=>t(this)));}addController(t){(this._$EO??=new Set).add(t),void 0!==this.renderRoot&&this.isConnected&&t.hostConnected?.();}removeController(t){this._$EO?.delete(t);}_$E_(){const t=new Map,s=this.constructor.elementProperties;for(const i of s.keys())this.hasOwnProperty(i)&&(t.set(i,this[i]),delete this[i]);t.size>0&&(this._$Ep=t);}createRenderRoot(){const t=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return S$1(t,this.constructor.elementStyles),t}connectedCallback(){this.renderRoot??=this.createRenderRoot(),this.enableUpdating(true),this._$EO?.forEach((t=>t.hostConnected?.()));}enableUpdating(t){}disconnectedCallback(){this._$EO?.forEach((t=>t.hostDisconnected?.()));}attributeChangedCallback(t,s,i){this._$AK(t,i);}_$EC(t,s){const i=this.constructor.elementProperties.get(t),e=this.constructor._$Eu(t,i);if(void 0!==e&&true===i.reflect){const r=(void 0!==i.converter?.toAttribute?i.converter:u$2).toAttribute(s,i.type);this._$Em=t,null==r?this.removeAttribute(e):this.setAttribute(e,r),this._$Em=null;}}_$AK(t,s){const i=this.constructor,e=i._$Eh.get(t);if(void 0!==e&&this._$Em!==e){const t=i.getPropertyOptions(e),r="function"==typeof t.converter?{fromAttribute:t.converter}:void 0!==t.converter?.fromAttribute?t.converter:u$2;this._$Em=e,this[e]=r.fromAttribute(s,t.type),this._$Em=null;}}requestUpdate(t,s,i){if(void 0!==t){if(i??=this.constructor.getPropertyOptions(t),!(i.hasChanged??f$1)(this[t],s))return;this.P(t,s,i);} false===this.isUpdatePending&&(this._$ES=this._$ET());}P(t,s,i){this._$AL.has(t)||this._$AL.set(t,s),true===i.reflect&&this._$Em!==t&&(this._$Ej??=new Set).add(t);}async _$ET(){this.isUpdatePending=true;try{await this._$ES;}catch(t){Promise.reject(t);}const t=this.scheduleUpdate();return null!=t&&await t,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){if(!this.isUpdatePending)return;if(!this.hasUpdated){if(this.renderRoot??=this.createRenderRoot(),this._$Ep){for(const[t,s]of this._$Ep)this[t]=s;this._$Ep=void 0;}const t=this.constructor.elementProperties;if(t.size>0)for(const[s,i]of t) true!==i.wrapped||this._$AL.has(s)||void 0===this[s]||this.P(s,this[s],i);}let t=false;const s=this._$AL;try{t=this.shouldUpdate(s),t?(this.willUpdate(s),this._$EO?.forEach((t=>t.hostUpdate?.())),this.update(s)):this._$EU();}catch(s){throw t=false,this._$EU(),s}t&&this._$AE(s);}willUpdate(t){}_$AE(t){this._$EO?.forEach((t=>t.hostUpdated?.())),this.hasUpdated||(this.hasUpdated=true,this.firstUpdated(t)),this.updated(t);}_$EU(){this._$AL=new Map,this.isUpdatePending=false;}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$ES}shouldUpdate(t){return  true}update(t){this._$Ej&&=this._$Ej.forEach((t=>this._$EC(t,this[t]))),this._$EU();}updated(t){}firstUpdated(t){}}b.elementStyles=[],b.shadowRootOptions={mode:"open"},b[d$1("elementProperties")]=new Map,b[d$1("finalized")]=new Map,p$1?.({ReactiveElement:b}),(a$2.reactiveElementVersions??=[]).push("2.0.4");
+
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const t$1=globalThis,i$3=t$1.trustedTypes,s$1=i$3?i$3.createPolicy("lit-html",{createHTML:t=>t}):void 0,e$2="$lit$",h=`lit$${Math.random().toFixed(9).slice(2)}$`,o$2="?"+h,n$1=`<${o$2}>`,r$1=document,l$1=()=>r$1.createComment(""),c=t=>null===t||"object"!=typeof t&&"function"!=typeof t,a$1=Array.isArray,u$1=t=>a$1(t)||"function"==typeof t?.[Symbol.iterator],d="[ \t\n\f\r]",f=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,v=/-->/g,_=/>/g,m=RegExp(`>|${d}(?:([^\\s"'>=/]+)(${d}*=${d}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,"g"),p=/'/g,g=/"/g,$=/^(?:script|style|textarea|title)$/i,T=Symbol.for("lit-noChange"),E=Symbol.for("lit-nothing"),A=new WeakMap,C=r$1.createTreeWalker(r$1,129);function P(t,i){if(!a$1(t)||!t.hasOwnProperty("raw"))throw Error("invalid template strings array");return void 0!==s$1?s$1.createHTML(i):i}const V=(t,i)=>{const s=t.length-1,o=[];let r,l=2===i?"<svg>":3===i?"<math>":"",c=f;for(let i=0;i<s;i++){const s=t[i];let a,u,d=-1,y=0;for(;y<s.length&&(c.lastIndex=y,u=c.exec(s),null!==u);)y=c.lastIndex,c===f?"!--"===u[1]?c=v:void 0!==u[1]?c=_:void 0!==u[2]?($.test(u[2])&&(r=RegExp("</"+u[2],"g")),c=m):void 0!==u[3]&&(c=m):c===m?">"===u[0]?(c=r??f,d=-1):void 0===u[1]?d=-2:(d=c.lastIndex-u[2].length,a=u[1],c=void 0===u[3]?m:'"'===u[3]?g:p):c===g||c===p?c=m:c===v||c===_?c=f:(c=m,r=void 0);const x=c===m&&t[i+1].startsWith("/>")?" ":"";l+=c===f?s+n$1:d>=0?(o.push(a),s.slice(0,d)+e$2+s.slice(d)+h+x):s+h+(-2===d?i:x);}return [P(t,l+(t[s]||"<?>")+(2===i?"</svg>":3===i?"</math>":"")),o]};class N{constructor({strings:t,_$litType$:s},n){let r;this.parts=[];let c=0,a=0;const u=t.length-1,d=this.parts,[f,v]=V(t,s);if(this.el=N.createElement(f,n),C.currentNode=this.el.content,2===s||3===s){const t=this.el.content.firstChild;t.replaceWith(...t.childNodes);}for(;null!==(r=C.nextNode())&&d.length<u;){if(1===r.nodeType){if(r.hasAttributes())for(const t of r.getAttributeNames())if(t.endsWith(e$2)){const i=v[a++],s=r.getAttribute(t).split(h),e=/([.?@])?(.*)/.exec(i);d.push({type:1,index:c,name:e[2],strings:s,ctor:"."===e[1]?H:"?"===e[1]?I:"@"===e[1]?L:k}),r.removeAttribute(t);}else t.startsWith(h)&&(d.push({type:6,index:c}),r.removeAttribute(t));if($.test(r.tagName)){const t=r.textContent.split(h),s=t.length-1;if(s>0){r.textContent=i$3?i$3.emptyScript:"";for(let i=0;i<s;i++)r.append(t[i],l$1()),C.nextNode(),d.push({type:2,index:++c});r.append(t[s],l$1());}}}else if(8===r.nodeType)if(r.data===o$2)d.push({type:2,index:c});else {let t=-1;for(;-1!==(t=r.data.indexOf(h,t+1));)d.push({type:7,index:c}),t+=h.length-1;}c++;}}static createElement(t,i){const s=r$1.createElement("template");return s.innerHTML=t,s}}function S(t,i,s=t,e){if(i===T)return i;let h=void 0!==e?s._$Co?.[e]:s._$Cl;const o=c(i)?void 0:i._$litDirective$;return h?.constructor!==o&&(h?._$AO?.(false),void 0===o?h=void 0:(h=new o(t),h._$AT(t,s,e)),void 0!==e?(s._$Co??=[])[e]=h:s._$Cl=h),void 0!==h&&(i=S(t,h._$AS(t,i.values),h,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){const{el:{content:i},parts:s}=this._$AD,e=(t?.creationScope??r$1).importNode(i,true);C.currentNode=e;let h=C.nextNode(),o=0,n=0,l=s[0];for(;void 0!==l;){if(o===l.index){let i;2===l.type?i=new R(h,h.nextSibling,this,t):1===l.type?i=new l.ctor(h,l.name,l.strings,this,t):6===l.type&&(i=new z(h,this,t)),this._$AV.push(i),l=s[++n];}o!==l?.index&&(h=C.nextNode(),o++);}return C.currentNode=r$1,e}p(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{get _$AU(){return this._$AM?._$AU??this._$Cv}constructor(t,i,s,e){this.type=2,this._$AH=E,this._$AN=void 0,this._$AA=t,this._$AB=i,this._$AM=s,this.options=e,this._$Cv=e?.isConnected??true;}get parentNode(){let t=this._$AA.parentNode;const i=this._$AM;return void 0!==i&&11===t?.nodeType&&(t=i.parentNode),t}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(t,i=this){t=S(this,t,i),c(t)?t===E||null==t||""===t?(this._$AH!==E&&this._$AR(),this._$AH=E):t!==this._$AH&&t!==T&&this._(t):void 0!==t._$litType$?this.$(t):void 0!==t.nodeType?this.T(t):u$1(t)?this.k(t):this._(t);}O(t){return this._$AA.parentNode.insertBefore(t,this._$AB)}T(t){this._$AH!==t&&(this._$AR(),this._$AH=this.O(t));}_(t){this._$AH!==E&&c(this._$AH)?this._$AA.nextSibling.data=t:this.T(r$1.createTextNode(t)),this._$AH=t;}$(t){const{values:i,_$litType$:s}=t,e="number"==typeof s?this._$AC(t):(void 0===s.el&&(s.el=N.createElement(P(s.h,s.h[0]),this.options)),s);if(this._$AH?._$AD===e)this._$AH.p(i);else {const t=new M(e,this),s=t.u(this.options);t.p(i),this.T(s),this._$AH=t;}}_$AC(t){let i=A.get(t.strings);return void 0===i&&A.set(t.strings,i=new N(t)),i}k(t){a$1(this._$AH)||(this._$AH=[],this._$AR());const i=this._$AH;let s,e=0;for(const h of t)e===i.length?i.push(s=new R(this.O(l$1()),this.O(l$1()),this,this.options)):s=i[e],s._$AI(h),e++;e<i.length&&(this._$AR(s&&s._$AB.nextSibling,e),i.length=e);}_$AR(t=this._$AA.nextSibling,i){for(this._$AP?.(false,true,i);t&&t!==this._$AB;){const i=t.nextSibling;t.remove(),t=i;}}setConnected(t){ void 0===this._$AM&&(this._$Cv=t,this._$AP?.(t));}}class k{get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}constructor(t,i,s,e,h){this.type=1,this._$AH=E,this._$AN=void 0,this.element=t,this.name=i,this._$AM=e,this.options=h,s.length>2||""!==s[0]||""!==s[1]?(this._$AH=Array(s.length-1).fill(new String),this.strings=s):this._$AH=E;}_$AI(t,i=this,s,e){const h=this.strings;let o=false;if(void 0===h)t=S(this,t,i,0),o=!c(t)||t!==this._$AH&&t!==T,o&&(this._$AH=t);else {const e=t;let n,r;for(t=h[0],n=0;n<h.length-1;n++)r=S(this,e[s+n],i,n),r===T&&(r=this._$AH[n]),o||=!c(r)||r!==this._$AH[n],r===E?t=E:t!==E&&(t+=(r??"")+h[n+1]),this._$AH[n]=r;}o&&!e&&this.j(t);}j(t){t===E?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,t??"");}}class H extends k{constructor(){super(...arguments),this.type=3;}j(t){this.element[this.name]=t===E?void 0:t;}}class I extends k{constructor(){super(...arguments),this.type=4;}j(t){this.element.toggleAttribute(this.name,!!t&&t!==E);}}class L extends k{constructor(t,i,s,e,h){super(t,i,s,e,h),this.type=5;}_$AI(t,i=this){if((t=S(this,t,i,0)??E)===T)return;const s=this._$AH,e=t===E&&s!==E||t.capture!==s.capture||t.once!==s.once||t.passive!==s.passive,h=t!==E&&(s===E||e);e&&this.element.removeEventListener(this.name,this,s),h&&this.element.addEventListener(this.name,this,t),this._$AH=t;}handleEvent(t){"function"==typeof this._$AH?this._$AH.call(this.options?.host??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 j=t$1.litHtmlPolyfillSupport;j?.(N,R),(t$1.litHtmlVersions??=[]).push("3.2.1");const B=(t,i,s)=>{const e=s?.renderBefore??i;let h=e._$litPart$;if(void 0===h){const t=s?.renderBefore??null;e._$litPart$=h=new R(i.insertBefore(l$1(),t),t,void 0,s??{});}return h._$AI(t),h};
+
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */class r extends b{constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=void 0;}createRenderRoot(){const t=super.createRenderRoot();return this.renderOptions.renderBefore??=t.firstChild,t}update(t){const s=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(t),this._$Do=B(s,this.renderRoot,this.renderOptions);}connectedCallback(){super.connectedCallback(),this._$Do?.setConnected(true);}disconnectedCallback(){super.disconnectedCallback(),this._$Do?.setConnected(false);}render(){return T}}r._$litElement$=true,r["finalized"]=true,globalThis.litElementHydrateSupport?.({LitElement:r});const i$2=globalThis.litElementPolyfillSupport;i$2?.({LitElement:r});(globalThis.litElementVersions??=[]).push("4.1.1");
+
+i$5`:root{--ds-asset-font-circular-family-name: "AS Circular";--ds-asset-font-circular-filename: "ASCircularWeb";--ds-asset-font-circular-weight-light: "-Light";--ds-asset-font-circular-weight-medium: "-Medium";--ds-asset-font-circular-weight-book: "-Book";--ds-border-radius: 0.375rem;--ds-size-25: 0.125rem;--ds-size-50: 0.25rem;--ds-size-75: 0.375rem;--ds-size-100: 0.5rem;--ds-size-150: 0.75rem;--ds-size-200: 1rem;--ds-size-250: 1.25rem;--ds-size-300: 1.5rem;--ds-size-400: 2rem;--ds-size-500: 2.5rem;--ds-size-600: 3rem;--ds-size-700: 3.5rem;--ds-size-800: 4rem;--ds-size-900: 4.5rem;--ds-size-1000: 5rem;--ds-unitless-scale-20: 0.25;--ds-unitless-scale-50: 0.5;--ds-unitless-scale-100: 1;--ds-unitless-scale-140: 1.4;--ds-unitless-scale-150: 1.5;--ds-unitless-scale-200: 2;--ds-unitless-scale-300: 3;--ds-unitless-scale-350: 3.5;--ds-animation-default-property: all;--ds-animation-default-duration: 0.3s;--ds-animation-default-timing: ease-out;--ds-depth-overlay: 200;--ds-depth-modal: 300;--ds-depth-tooltip: 400;--ds-elevation-100: 0px 0px 5px rgba(0, 0, 0, 0.15);--ds-elevation-200: 0px 0px 10px rgba(0, 0, 0, 0.15);--ds-elevation-300: 0px 0px 15px rgba(0, 0, 0, 0.2);--ds-grid-breakpoint-xs: 320px;--ds-grid-breakpoint-sm: 576px;--ds-grid-breakpoint-md: 768px;--ds-grid-breakpoint-lg: 1024px;--ds-grid-breakpoint-xl: 1232px;--ds-grid-column-xs: 6;--ds-grid-column-sm: 12;--ds-grid-column-md: 12;--ds-grid-column-lg: 12;--ds-grid-column-xl: 12;--ds-grid-gutter-xs: 0.5rem;--ds-grid-gutter-sm: 1rem;--ds-grid-gutter-md: 1.5rem;--ds-grid-gutter-lg: 1.5rem;--ds-grid-gutter-xl: 2rem;--ds-grid-margin-xs: 1rem;--ds-grid-margin-sm: 1rem;--ds-grid-margin-md: 1.5rem;--ds-grid-margin-lg: 2rem;--ds-grid-margin-xl: 2rem;--ds-font-family-default: "AS Circular", Helvetica Neue, Arial, sans-serif;--ds-font-family-mono: Menlo, Monaco, Consolas, "Courier New", monospace;--ds-text-heading-300-weight: 300;--ds-text-heading-300-px: 18px;--ds-text-heading-300-size: 1.125rem;--ds-text-heading-300-height: 1.625rem;--ds-text-heading-300-height-px: 26px;--ds-text-heading-400-weight: 300;--ds-text-heading-400-px: 20px;--ds-text-heading-400-size: 1.25rem;--ds-text-heading-400-height: 1.625rem;--ds-text-heading-400-height-px: 26px;--ds-text-heading-500-weight: 300;--ds-text-heading-500-px-breakpoint-sm: 22px;--ds-text-heading-500-px-breakpoint-md: 24px;--ds-text-heading-500-px-breakpoint-lg: 24px;--ds-text-heading-500-size-breakpoint-sm: 1.375rem;--ds-text-heading-500-size-breakpoint-md: 1.5rem;--ds-text-heading-500-size-breakpoint-lg: 1.5rem;--ds-text-heading-500-height-breakpoint-sm: 1.625rem;--ds-text-heading-500-height-breakpoint-px-sm: 26px;--ds-text-heading-500-height-breakpoint-md: 1.875rem;--ds-text-heading-500-height-breakpoint-px-md: 30px;--ds-text-heading-500-height-breakpoint-lg: 2rem;--ds-text-heading-500-height-breakpoint-px-lg: 32px;--ds-text-heading-600-weight: 300;--ds-text-heading-600-px-breakpoint-sm: 26px;--ds-text-heading-600-px-breakpoint-md: 28px;--ds-text-heading-600-px-breakpoint-lg: 28px;--ds-text-heading-600-size-breakpoint-sm: 1.625rem;--ds-text-heading-600-size-breakpoint-md: 1.75rem;--ds-text-heading-600-size-breakpoint-lg: 1.75rem;--ds-text-heading-600-height-breakpoint-sm: 1.875rem;--ds-text-heading-600-height-breakpoint-px-sm: 30px;--ds-text-heading-600-height-breakpoint-md: 2.125rem;--ds-text-heading-600-height-breakpoint-px-md: 34px;--ds-text-heading-600-height-breakpoint-lg: 2.25rem;--ds-text-heading-600-height-breakpoint-px-lg: 36px;--ds-text-heading-700-weight: 500;--ds-text-heading-700-px-breakpoint-sm: 28px;--ds-text-heading-700-px-breakpoint-md: 32px;--ds-text-heading-700-px-breakpoint-lg: 36px;--ds-text-heading-700-size-breakpoint-sm: 1.75rem;--ds-text-heading-700-size-breakpoint-md: 2rem;--ds-text-heading-700-size-breakpoint-lg: 2.25rem;--ds-text-heading-700-height-breakpoint-sm: 2.125rem;--ds-text-heading-700-height-breakpoint-px-sm: 34px;--ds-text-heading-700-height-breakpoint-md: 2.375rem;--ds-text-heading-700-height-breakpoint-px-md: 38px;--ds-text-heading-700-height-breakpoint-lg: 2.75rem;--ds-text-heading-700-height-breakpoint-px-lg: 44px;--ds-text-heading-800-weight: 500;--ds-text-heading-800-px-breakpoint-sm: 32px;--ds-text-heading-800-px-breakpoint-md: 36px;--ds-text-heading-800-px-breakpoint-lg: 40px;--ds-text-heading-800-size-breakpoint-sm: 2rem;--ds-text-heading-800-size-breakpoint-md: 2.25rem;--ds-text-heading-800-size-breakpoint-lg: 2.5rem;--ds-text-heading-800-height-breakpoint-sm: 2.375rem;--ds-text-heading-800-height-breakpoint-px-sm: 38px;--ds-text-heading-800-height-breakpoint-md: 2.625rem;--ds-text-heading-800-height-breakpoint-px-md: 42px;--ds-text-heading-800-height-breakpoint-lg: 3rem;--ds-text-heading-800-height-breakpoint-px-lg: 48px;--ds-text-heading-default-weight: 500;--ds-text-heading-default-margin: 0;--ds-text-heading-default-spacing: -0.2px;--ds-text-heading-medium-weight: 300;--ds-text-heading-display-weight: 100;--ds-text-heading-display-px-breakpoint-sm: 44px;--ds-text-heading-display-px-breakpoint-md: 48px;--ds-text-heading-display-px-breakpoint-lg: 56px;--ds-text-heading-display-size-breakpoint-sm: 2.75rem;--ds-text-heading-display-size-breakpoint-md: 3rem;--ds-text-heading-display-size-breakpoint-lg: 3.5rem;--ds-text-heading-display-height-breakpoint-sm: 3.375rem;--ds-text-heading-display-height-breakpoint-px-sm: 54px;--ds-text-heading-display-height-breakpoint-md: 3.75rem;--ds-text-heading-display-height-breakpoint-px-md: 60px;--ds-text-heading-display-height-breakpoint-lg: 4.25rem;--ds-text-heading-display-height-breakpoint-px-lg: 68px;--ds-text-body-default-weight: 500;--ds-text-body-size-xxs: 0.625rem;--ds-text-body-size-xs: 0.75rem;--ds-text-body-size-sm: 0.875rem;--ds-text-body-size-default: 1rem;--ds-text-body-size-lg: 1.125rem;--ds-text-body-height-xs: 1rem;--ds-text-body-height-sm: 1.25rem;--ds-text-body-height-default: 1.5rem;--ds-text-body-height-lg: 1.625rem;--ds-color-alert-notification-default: #0074c8;--ds-color-alert-warning-default: #de750c;--ds-color-alert-error-default: #df0b37;--ds-color-alert-success-default: #00805d;--ds-color-alert-advisory-default: #fff0cd;--ds-color-alert-bkg-success-default: #ddf6e8;--ds-color-alert-bkg-error-default: #ffedf1;--ds-color-background-primary-100-default: #ffffff;--ds-color-background-primary-100-inverse: #0e2b4f;--ds-color-background-primary-200-default: #f7f7f7;--ds-color-background-primary-200-inverse: #194069;--ds-color-background-primary-300-default: #e4e8ec;--ds-color-background-primary-300-inverse: #265688;--ds-color-background-primary-400-default: #dddddd;--ds-color-background-primary-400-inverse: #326aa5;--ds-color-background-success-default: #eef8f5;--ds-color-background-success-inverse: #173c30;--ds-color-background-error-default: #fff4f4;--ds-color-background-error-inverse: #74110e;--ds-color-background-warning-default: #fef8e9;--ds-color-background-warning-inverse: #5d4514;--ds-color-background-info-default: #f0f7fd;--ds-color-background-info-inverse: #193d73;--ds-color-background-subtle-default: #f7f8fa;--ds-color-background-subtle-inverse: #2a2a2a;--ds-color-background-accent-default: #ebfafd;--ds-color-background-accent-inverse: #275b72;--ds-color-background-emphasis-default: #c9e0f7;--ds-color-background-emphasis-inverse: #225296;--ds-color-background-scrimmed-default: rgba(0, 0, 0, 0.5);--ds-color-background-lightest: #ffffff;--ds-color-background-lighter: #f7f7f7;--ds-color-background-darker: #01426a;--ds-color-background-darkest: #00274a;--ds-color-background-gradient-default: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5));--ds-color-base-white: #ffffff;--ds-color-base-white-100: rgba(255, 255, 255, 0.03);--ds-color-base-white-200: rgba(255, 255, 255, 0.06);--ds-color-base-white-300: rgba(255, 255, 255, 0.12);--ds-color-base-white-400: rgba(255, 255, 255, 0.25);--ds-color-base-white-500: rgba(255, 255, 255, 0.5);--ds-color-base-white-opacity-50: rgba(255, 255, 255, 0.5);--ds-color-base-white-opacity-40: rgba(255, 255, 255, 0.4);--ds-color-base-white-opacity-0: rgba(255, 255, 255, 0);--ds-color-base-black: #000000;--ds-color-base-black-100: rgba(0, 0, 0, 0.03);--ds-color-base-black-200: rgba(0, 0, 0, 0.06);--ds-color-base-black-300: rgba(0, 0, 0, 0.12);--ds-color-base-black-400: rgba(0, 0, 0, 0.25);--ds-color-base-black-500: rgba(0, 0, 0, 0.5);--ds-color-base-black-opacity-15: rgba(0, 0, 0, 0.15);--ds-color-base-blue-100: #f0f7fd;--ds-color-base-blue-200: #c9e0f7;--ds-color-base-blue-300: #a0c9f1;--ds-color-base-blue-400: #79b2ec;--ds-color-base-blue-500: #5398e6;--ds-color-base-blue-600: #3b7fd2;--ds-color-base-blue-700: #2c67b5;--ds-color-base-blue-800: #225296;--ds-color-base-blue-900: #193d73;--ds-color-base-blue-1000: #102a51;--ds-color-base-cyan-100: #ebfafd;--ds-color-base-cyan-200: #a8e9f7;--ds-color-base-cyan-300: #6ad5ef;--ds-color-base-cyan-400: #56bbde;--ds-color-base-cyan-500: #4aa2c7;--ds-color-base-cyan-600: #3e89aa;--ds-color-base-cyan-700: #32718e;--ds-color-base-cyan-800: #275b72;--ds-color-base-cyan-900: #1d4658;--ds-color-base-cyan-1000: #12303d;--ds-color-base-error-100: #fff4f4;--ds-color-base-error-200: #f9aca6;--ds-color-base-error-300: #f16359;--ds-color-base-error-400: #cc1816;--ds-color-base-error-500: #74110e;--ds-color-base-gray-100: #f7f7f7;--ds-color-base-gray-200: #d4d4d4;--ds-color-base-gray-300: #c5c5c5;--ds-color-base-gray-400: #adadad;--ds-color-base-gray-500: #959595;--ds-color-base-gray-600: #7e7e7e;--ds-color-base-gray-700: #676767;--ds-color-base-gray-800: #525252;--ds-color-base-gray-900: #3d3d3d;--ds-color-base-gray-1000: #2a2a2a;--ds-color-base-green-100: #f3faf7;--ds-color-base-green-200: #000000;--ds-color-base-green-300: #addbca;--ds-color-base-green-400: #7ec6ac;--ds-color-base-green-500: #51ae8c;--ds-color-base-green-600: #459578;--ds-color-base-green-700: #3a7d64;--ds-color-base-green-800: #306854;--ds-color-base-green-900: #285545;--ds-color-base-green-1000: #1f4436;--ds-color-base-lime-100: #f5fbeb;--ds-color-base-lime-200: #d8efb4;--ds-color-base-lime-300: #badd81;--ds-color-base-lime-400: #a2c270;--ds-color-base-lime-500: #8ca761;--ds-color-base-lime-600: #778f53;--ds-color-base-lime-700: #647845;--ds-color-base-lime-800: #53643a;--ds-color-base-lime-900: #44522f;--ds-color-base-lime-1000: #364126;--ds-color-base-navy-100: #f2f7fb;--ds-color-base-navy-200: #cfe0ef;--ds-color-base-navy-300: #acc9e2;--ds-color-base-navy-400: #89b2d4;--ds-color-base-navy-500: #6899c6;--ds-color-base-navy-600: #4a82b7;--ds-color-base-navy-700: #326aa5;--ds-color-base-navy-800: #265688;--ds-color-base-navy-900: #194069;--ds-color-base-navy-1000: #0e2b4f;--ds-color-base-neutral-100: #f7f8fa;--ds-color-base-neutral-200: #e4e8ec;--ds-color-base-neutral-300: #ccd2db;--ds-color-base-neutral-400: #afb9c6;--ds-color-base-neutral-500: #939fad;--ds-color-base-neutral-600: #7e8894;--ds-color-base-neutral-700: #6a717c;--ds-color-base-neutral-800: #585e67;--ds-color-base-neutral-900: #484d55;--ds-color-base-neutral-1000: #393d43;--ds-color-base-pink-100: #fff7f8;--ds-color-base-pink-200: #fde0e6;--ds-color-base-pink-300: #fcc2ce;--ds-color-base-pink-400: #fa9db0;--ds-color-base-pink-500: #f7738e;--ds-color-base-pink-600: #e45472;--ds-color-base-pink-700: #bf475f;--ds-color-base-pink-800: #a03b50;--ds-color-base-pink-900: #833142;--ds-color-base-pink-1000: #692734;--ds-color-base-purple-100: #fbf8fe;--ds-color-base-purple-200: #ede3fd;--ds-color-base-purple-300: #ddc9fb;--ds-color-base-purple-400: #c9a9f8;--ds-color-base-purple-500: #b588f5;--ds-color-base-purple-600: #a268f3;--ds-color-base-purple-700: #8d47f0;--ds-color-base-purple-800: #7633d7;--ds-color-base-purple-900: #622ab2;--ds-color-base-purple-1000: #4e228d;--ds-color-base-red-100: #fef7f5;--ds-color-base-red-200: #fae2da;--ds-color-base-red-300: #f5c7b8;--ds-color-base-red-400: #f0a68d;--ds-color-base-red-500: #e9815e;--ds-color-base-red-600: #e35c2f;--ds-color-base-red-700: #d03a08;--ds-color-base-red-800: #ae3007;--ds-color-base-red-900: #902806;--ds-color-base-red-1000: #732005;--ds-color-base-success-100: #eef8f5;--ds-color-base-success-200: #8eceb9;--ds-color-base-success-300: #40a080;--ds-color-base-success-400: #0b6f4d;--ds-color-base-success-500: #173c30;--ds-color-base-turquoise-100: #f7fafa;--ds-color-base-turquoise-200: #dfe9ea;--ds-color-base-turquoise-300: #c2d5d6;--ds-color-base-turquoise-400: #9fbdbe;--ds-color-base-turquoise-500: #7ba5a6;--ds-color-base-turquoise-600: #5c8f91;--ds-color-base-turquoise-700: #3d7a7d;--ds-color-base-turquoise-800: #21686a;--ds-color-base-turquoise-900: #085659;--ds-color-base-turquoise-1000: #004447;--ds-color-base-yellow-100: #fff9df;--ds-color-base-yellow-200: #ffe87e;--ds-color-base-yellow-300: #f9ce06;--ds-color-base-yellow-400: #d6b622;--ds-color-base-yellow-500: #b49d35;--ds-color-base-yellow-600: #96873e;--ds-color-base-yellow-700: #7c7140;--ds-color-base-yellow-800: #665e3d;--ds-color-base-yellow-900: #524e38;--ds-color-base-yellow-1000: #403d30;--ds-color-base-warning-100: #fef8e9;--ds-color-base-warning-200: #f2c153;--ds-color-base-warning-300: #c49432;--ds-color-base-warning-400: #8e6b22;--ds-color-base-warning-500: #5d4514;--ds-color-state-error-100: #ff999b;--ds-color-state-error-500: #df0b37;--ds-color-state-success-100: #69cf96;--ds-color-state-success-500: #00805d;--ds-color-state-warning-500: #de750c;--ds-color-border-primary-default: #585e67;--ds-color-border-primary-inverse: #afb9c6;--ds-color-border-secondary-default: #939fad;--ds-color-border-secondary-inverse: #7e8894;--ds-color-border-tertiary-default: #dddddd;--ds-color-border-tertiary-inverse: #676767;--ds-color-border-error-default: #cc1816;--ds-color-border-error-inverse: #f9aca6;--ds-color-border-divider-default: rgba(0, 0, 0, 0.12);--ds-color-border-divider-inverse: rgba(255, 255, 255, 0.25);--ds-color-border-subtle-default: #f0f7fd;--ds-color-border-subtle-inverse: #326aa5;--ds-color-border-emphasis-default: #194069;--ds-color-border-emphasis-inverse: #f2f7fb;--ds-color-border-accent-default: #badd81;--ds-color-border-accent-inverse: #a2c270;--ds-color-border-success-default: #0b6f4d;--ds-color-border-success-inverse: #8eceb9;--ds-color-border-warning-default: #c49432;--ds-color-border-warning-inverse: #f2c153;--ds-color-border-info-default: #326aa5;--ds-color-border-info-inverse: #89b2d4;--ds-color-border-ui-default-default: #2c67b5;--ds-color-border-ui-default-inverse: #56bbde;--ds-color-border-ui-hover-default: #193d73;--ds-color-border-ui-hover-inverse: #a8e9f7;--ds-color-border-ui-active-default: #225296;--ds-color-border-ui-active-inverse: #6ad5ef;--ds-color-border-ui-focus-default: #2c67b5;--ds-color-border-ui-focus-inverse: #56bbde;--ds-color-border-ui-disabled-default: #adadad;--ds-color-border-ui-disabled-inverse: #7e7e7e;--ds-color-border-active-default: #0074c8;--ds-color-border-active-inverse: #00cff0;--ds-color-border-disabled-default: #d4d4d4;--ds-color-border-focus-default: #959595;--ds-color-brand-neutral-100: #f7f8fa;--ds-color-brand-neutral-200: #e4e8ec;--ds-color-brand-neutral-300: #ccd2db;--ds-color-brand-neutral-400: #afb9c6;--ds-color-brand-neutral-500: #939fad;--ds-color-brand-neutral-600: #7e8894;--ds-color-brand-neutral-700: #6a717c;--ds-color-brand-neutral-800: #585e67;--ds-color-brand-neutral-900: #484d55;--ds-color-brand-neutral-1000: #393d43;--ds-color-brand-gray-100: #f7f7f7;--ds-color-brand-gray-200: #dddddd;--ds-color-brand-gray-300: #c5c5c5;--ds-color-brand-gray-400: #adadad;--ds-color-brand-gray-500: #959595;--ds-color-brand-gray-600: #7e7e7e;--ds-color-brand-gray-700: #676767;--ds-color-brand-gray-800: #525252;--ds-color-brand-gray-900: #3d3d3d;--ds-color-brand-gray-1000: #2a2a2a;--ds-color-brand-red-100: #fef7f5;--ds-color-brand-red-200: #fae2da;--ds-color-brand-red-300: #f5c7b8;--ds-color-brand-red-400: #f0a68d;--ds-color-brand-red-500: #e9815e;--ds-color-brand-red-600: #e35c2f;--ds-color-brand-red-700: #d03a08;--ds-color-brand-red-800: #ae3007;--ds-color-brand-red-900: #902806;--ds-color-brand-red-1000: #732005;--ds-color-brand-yellow-100: #fff9df;--ds-color-brand-yellow-200: #ffe87e;--ds-color-brand-yellow-300: #f9ce06;--ds-color-brand-yellow-400: #d6b622;--ds-color-brand-yellow-500: #b49d35;--ds-color-brand-yellow-600: #96873e;--ds-color-brand-yellow-700: #7c7140;--ds-color-brand-yellow-800: #665e3d;--ds-color-brand-yellow-900: #524e38;--ds-color-brand-yellow-1000: #403d30;--ds-color-brand-lime-100: #f5fbeb;--ds-color-brand-lime-200: #d8efb4;--ds-color-brand-lime-300: #badd81;--ds-color-brand-lime-400: #a2c270;--ds-color-brand-lime-500: #8ca761;--ds-color-brand-lime-600: #778f53;--ds-color-brand-lime-700: #647845;--ds-color-brand-lime-800: #53643a;--ds-color-brand-lime-900: #44522f;--ds-color-brand-lime-1000: #364126;--ds-color-brand-green-100: #f3faf7;--ds-color-brand-green-200: #d4ece4;--ds-color-brand-green-300: #addbca;--ds-color-brand-green-400: #7ec6ac;--ds-color-brand-green-500: #51ae8c;--ds-color-brand-green-600: #459578;--ds-color-brand-green-700: #3a7d64;--ds-color-brand-green-800: #306854;--ds-color-brand-green-900: #285545;--ds-color-brand-green-1000: #1f4436;--ds-color-brand-turquoise-100: #f7fafa;--ds-color-brand-turquoise-200: #dfe9ea;--ds-color-brand-turquoise-300: #c2d5d6;--ds-color-brand-turquoise-400: #9fbdbe;--ds-color-brand-turquoise-500: #7ba5a6;--ds-color-brand-turquoise-600: #5c8f91;--ds-color-brand-turquoise-700: #3d7a7d;--ds-color-brand-turquoise-800: #21686a;--ds-color-brand-turquoise-900: #085659;--ds-color-brand-turquoise-1000: #004447;--ds-color-brand-cyan-100: #ebfafd;--ds-color-brand-cyan-200: #a8e9f7;--ds-color-brand-cyan-300: #6ad5ef;--ds-color-brand-cyan-400: #56bbde;--ds-color-brand-cyan-500: #4aa2c7;--ds-color-brand-cyan-600: #3e89aa;--ds-color-brand-cyan-700: #32718e;--ds-color-brand-cyan-800: #275b72;--ds-color-brand-cyan-900: #1d4658;--ds-color-brand-cyan-1000: #12303d;--ds-color-brand-blue-100: #f0f7fd;--ds-color-brand-blue-200: #c9e0f7;--ds-color-brand-blue-300: #a0c9f1;--ds-color-brand-blue-400: #79b2ec;--ds-color-brand-blue-500: #5398e6;--ds-color-brand-blue-600: #3b7fd2;--ds-color-brand-blue-700: #2c67b5;--ds-color-brand-blue-800: #225296;--ds-color-brand-blue-900: #193d73;--ds-color-brand-blue-1000: #102a51;--ds-color-brand-navy-100: #f2f7fb;--ds-color-brand-navy-200: #cfe0ef;--ds-color-brand-navy-300: #acc9e2;--ds-color-brand-navy-400: #89b2d4;--ds-color-brand-navy-500: #6899c6;--ds-color-brand-navy-600: #4a82b7;--ds-color-brand-navy-700: #326aa5;--ds-color-brand-navy-800: #265688;--ds-color-brand-navy-900: #194069;--ds-color-brand-navy-1000: #0e2b4f;--ds-color-brand-purple-100: #fbf8fe;--ds-color-brand-purple-200: #ede3fd;--ds-color-brand-purple-300: #ddc9fb;--ds-color-brand-purple-400: #c9a9f8;--ds-color-brand-purple-500: #b588f5;--ds-color-brand-purple-600: #a268f3;--ds-color-brand-purple-700: #8d47f0;--ds-color-brand-purple-800: #7633d7;--ds-color-brand-purple-900: #622ab2;--ds-color-brand-purple-1000: #4e228d;--ds-color-brand-pink-100: #fff7f8;--ds-color-brand-pink-200: #fde0e6;--ds-color-brand-pink-300: #fcc2ce;--ds-color-brand-pink-400: #fa9db0;--ds-color-brand-pink-500: #f7738e;--ds-color-brand-pink-600: #e45472;--ds-color-brand-pink-700: #bf475f;--ds-color-brand-pink-800: #a03b50;--ds-color-brand-pink-900: #833142;--ds-color-brand-pink-1000: #692734;--ds-color-brand-midnight-100: #c1daf0;--ds-color-brand-midnight-200: #569ed7;--ds-color-brand-midnight-300: #156fad;--ds-color-brand-midnight-400: #01426a;--ds-color-brand-midnight-500: #00274a;--ds-color-brand-atlas-100: #cde6ff;--ds-color-brand-atlas-200: #6bb7fb;--ds-color-brand-atlas-300: #2492eb;--ds-color-brand-atlas-400: #0074c8;--ds-color-brand-atlas-500: #054687;--ds-color-brand-atlas-400-opacity-20: rgba(0, 116, 200, 0.2);--ds-color-brand-breeze-100: #c0f7ff;--ds-color-brand-breeze-200: #5de3f7;--ds-color-brand-breeze-300: #00cff0;--ds-color-brand-breeze-400: #099dc5;--ds-color-brand-breeze-500: #0b5575;--ds-color-brand-breeze-300-opacity-30: rgba(0, 207, 240, 0.3);--ds-color-brand-tropical-100: #e2ffcd;--ds-color-brand-tropical-200: #d0fba6;--ds-color-brand-tropical-300: #c0e585;--ds-color-brand-tropical-400: #91be62;--ds-color-brand-tropical-500: #5e8741;--ds-color-brand-alpine-100: #bcaae6;--ds-color-brand-alpine-200: #9e73ea;--ds-color-brand-alpine-300: #8439ef;--ds-color-brand-alpine-400: #631db8;--ds-color-brand-alpine-500: #39115c;--ds-color-brand-flamingo-100: #ffebee;--ds-color-brand-flamingo-200: #ffc0ca;--ds-color-brand-flamingo-300: #ff94a7;--ds-color-brand-flamingo-400: #f65b7b;--ds-color-brand-flamingo-500: #b82b47;--ds-color-brand-canyon-100: #ffcab6;--ds-color-brand-canyon-200: #f99574;--ds-color-brand-canyon-300: #f26135;--ds-color-brand-canyon-400: #de3e09;--ds-color-brand-canyon-500: #b83302;--ds-color-brand-goldcoast-100: #fff0cd;--ds-color-brand-goldcoast-200: #ffdb67;--ds-color-brand-goldcoast-300: #ffd200;--ds-color-brand-goldcoast-400: #e5ad07;--ds-color-brand-goldcoast-500: #b88624;--ds-color-brand-goldgray-100: #c5c1bf;--ds-color-brand-goldgray-200: #726e6c;--ds-color-brand-gold-100: #ccbc94;--ds-color-brand-gold-200: #7f682e;--ds-color-brand-emerald: #139142;--ds-color-brand-sapphire: #015daa;--ds-color-brand-ruby: #a41d4a;--ds-color-brand-lounge: #01426a;--ds-color-brand-loungeplus: #53b390;--ds-color-container-accent-default: #f5fbeb;--ds-color-container-accent-inverse: #badd81;--ds-color-container-emphasis-default: #ebfafd;--ds-color-container-emphasis-inverse: #6ad5ef;--ds-color-container-error-default: #fff4f4;--ds-color-container-error-inverse: #74110e;--ds-color-container-info-default: #f0f7fd;--ds-color-container-info-inverse: #193d73;--ds-color-container-primary-default: #ffffff;--ds-color-container-primary-inverse: #0e2b4f;--ds-color-container-secondary-default: #f7f7f7;--ds-color-container-secondary-inverse: #194069;--ds-color-container-subtle-default: #f7f8fa;--ds-color-container-subtle-inverse: #393d43;--ds-color-container-success-default: #eef8f5;--ds-color-container-success-inverse: #173c30;--ds-color-container-tertiary-default: rgba(0, 0, 0, 0.03);--ds-color-container-tertiary-inverse: rgba(255, 255, 255, 0.06);--ds-color-container-warning-default: #fef8e9;--ds-color-container-warning-inverse: #5d4514;--ds-color-container-ui-primary-active-default: #225296;--ds-color-container-ui-primary-active-inverse: #6ad5ef;--ds-color-container-ui-primary-default-default: #2c67b5;--ds-color-container-ui-primary-default-inverse: #56bbde;--ds-color-container-ui-primary-disabled-default: #a0c9f1;--ds-color-container-ui-primary-disabled-inverse: #275b72;--ds-color-container-ui-primary-focus-default: #2c67b5;--ds-color-container-ui-primary-focus-inverse: #56bbde;--ds-color-container-ui-primary-hover-default: #193d73;--ds-color-container-ui-primary-hover-inverse: #a8e9f7;--ds-color-container-ui-secondary-active-default: #f0f7fd;--ds-color-container-ui-secondary-active-inverse: rgba(255, 255, 255, 0.06);--ds-color-container-ui-secondary-default-default: #ffffff;--ds-color-container-ui-secondary-default-inverse: rgba(255, 255, 255, 0.03);--ds-color-container-ui-secondary-disabled-default: #f7f7f7;--ds-color-container-ui-secondary-disabled-inverse: rgba(255, 255, 255, 0.12);--ds-color-container-ui-secondary-focus-default: #ffffff;--ds-color-container-ui-secondary-focus-inverse: rgba(255, 255, 255, 0.03);--ds-color-container-ui-secondary-hover-default: rgba(0, 0, 0, 0.03);--ds-color-container-ui-secondary-hover-inverse: rgba(255, 255, 255, 0.12);--ds-color-container-ui-tertiary-active-default: rgba(0, 0, 0, 0.06);--ds-color-container-ui-tertiary-active-inverse: rgba(255, 255, 255, 0.06);--ds-color-container-ui-tertiary-default-default: rgba(0, 0, 0, 0.03);--ds-color-container-ui-tertiary-default-inverse: rgba(255, 255, 255, 0.12);--ds-color-container-ui-tertiary-disabled-default: rgba(0, 0, 0, 0.03);--ds-color-container-ui-tertiary-disabled-inverse: rgba(255, 255, 255, 0.25);--ds-color-container-ui-tertiary-focus-default: rgba(0, 0, 0, 0.03);--ds-color-container-ui-tertiary-focus-inverse: rgba(255, 255, 255, 0.12);--ds-color-container-ui-tertiary-hover-default: rgba(0, 0, 0, 0.12);--ds-color-container-ui-tertiary-hover-inverse: rgba(255, 255, 255, 0.25);--ds-color-icon-primary-default: #676767;--ds-color-icon-primary-inverse: #f7f7f7;--ds-color-icon-secondary-default: #7e8894;--ds-color-icon-secondary-inverse: #ccd2db;--ds-color-icon-tertiary-default: #afb9c6;--ds-color-icon-tertiary-inverse: #939fad;--ds-color-icon-emphasis-default: #2a2a2a;--ds-color-icon-emphasis-inverse: #ffffff;--ds-color-icon-accent-default: #a2c270;--ds-color-icon-accent-inverse: #badd81;--ds-color-icon-info-default: #326aa5;--ds-color-icon-info-inverse: #89b2d4;--ds-color-icon-error-default: #cc1816;--ds-color-icon-error-inverse: #f9aca6;--ds-color-icon-warning-default: #c49432;--ds-color-icon-warning-inverse: #f2c153;--ds-color-icon-success-default: #40a080;--ds-color-icon-success-inverse: #8eceb9;--ds-color-icon-subtle-default: #a0c9f1;--ds-color-icon-subtle-inverse: #326aa5;--ds-color-icon-ui-primary-default-default: #2c67b5;--ds-color-icon-ui-primary-default-inverse: #56bbde;--ds-color-icon-ui-primary-hover-default: #193d73;--ds-color-icon-ui-primary-hover-inverse: #a8e9f7;--ds-color-icon-ui-primary-active-default: #225296;--ds-color-icon-ui-primary-active-inverse: #6ad5ef;--ds-color-icon-ui-primary-disabled-default: #adadad;--ds-color-icon-ui-primary-disabled-inverse: #7e7e7e;--ds-color-icon-ui-primary-focus-default: #2c67b5;--ds-color-icon-ui-primary-focus-inverse: #56bbde;--ds-color-icon-ui-secondary-active-default: #676767;--ds-color-icon-ui-secondary-active-inverse: #c5c5c5;--ds-color-icon-ui-secondary-default-default: #7e7e7e;--ds-color-icon-ui-secondary-default-inverse: #adadad;--ds-color-icon-ui-secondary-disabled-default: #adadad;--ds-color-icon-ui-secondary-disabled-inverse: #7e7e7e;--ds-color-icon-ui-secondary-focus-default: #7e7e7e;--ds-color-icon-ui-secondary-focus-inverse: #adadad;--ds-color-icon-ui-secondary-hover-default: #525252;--ds-color-icon-ui-secondary-hover-inverse: #dddddd;--ds-color-icon-brand-red-default: #d03a08;--ds-color-icon-brand-red-inverse: #e9815e;--ds-color-icon-brand-yellow-default: #7c7140;--ds-color-icon-brand-yellow-inverse: #f9ce06;--ds-color-icon-brand-pink-default: #bf475f;--ds-color-icon-brand-pink-inverse: #f7738e;--ds-color-icon-brand-purple-default: #8d47f0;--ds-color-icon-brand-purple-inverse: #b588f5;--ds-color-icon-brand-lime-default: #647845;--ds-color-icon-brand-lime-inverse: #badd81;--ds-color-icon-brand-green-default: #3a7d64;--ds-color-icon-brand-green-inverse: #51ae8c;--ds-color-icon-brand-turquoise-default: #3d7a7d;--ds-color-icon-brand-turquoise-inverse: #7ba5a6;--ds-color-icon-brand-navy-default: #265688;--ds-color-icon-brand-navy-inverse: #6899c6;--ds-color-icon-brand-blue-default: #2c67b5;--ds-color-icon-brand-blue-inverse: #5398e6;--ds-color-icon-brand-cyan-default: #32718e;--ds-color-icon-brand-cyan-inverse: #6ad5ef;--ds-color-icon-brand-gray-default: #676767;--ds-color-icon-brand-gray-inverse: #c5c5c5;--ds-color-icon-brand-neutral-default: #6a717c;--ds-color-icon-brand-neutral-inverse: #afb9c6;--ds-color-icon-disabled-default: rgba(0, 0, 0, 0.15);--ds-color-text-primary-default: #2a2a2a;--ds-color-text-primary-inverse: #ffffff;--ds-color-text-secondary-default: #525252;--ds-color-text-secondary-inverse: #dddddd;--ds-color-text-tertiary-default: #6a717c;--ds-color-text-tertiary-inverse: #adadad;--ds-color-text-error-default: #cc1816;--ds-color-text-error-inverse: #f9aca6;--ds-color-text-emphasis-default: #265688;--ds-color-text-emphasis-inverse: #cfe0ef;--ds-color-text-accent-default: #647845;--ds-color-text-accent-inverse: #badd81;--ds-color-text-info-default: #326aa5;--ds-color-text-info-inverse: #acc9e2;--ds-color-text-subtle-default: #32718e;--ds-color-text-subtle-inverse: #56bbde;--ds-color-text-success-default: #0b6f4d;--ds-color-text-success-inverse: #8eceb9;--ds-color-text-ui-active-default: #225296;--ds-color-text-ui-active-inverse: #6ad5ef;--ds-color-text-ui-default-default: #2c67b5;--ds-color-text-ui-default-inverse: #56bbde;--ds-color-text-ui-disabled-default: #adadad;--ds-color-text-ui-disabled-inverse: #7e7e7e;--ds-color-text-ui-focus-default: #2c67b5;--ds-color-text-ui-focus-inverse: #56bbde;--ds-color-text-ui-hover-default: #193d73;--ds-color-text-ui-hover-inverse: #a8e9f7;--ds-color-text-link-default: #0074c8;--ds-color-text-link-inverse: #00cff0;--ds-color-tier-alaska-mvp-default: #726e6c;--ds-color-tier-alaska-mvp-inverse: #c5c1bf;--ds-color-tier-alaska-mvpgold-default: #7f682e;--ds-color-tier-alaska-mvpgold-inverse: #c5c1bf;--ds-color-tier-alaska-mvpgold75k-default: #7f682e;--ds-color-tier-alaska-mvpgold75k-inverse: #c5c1bf;--ds-color-tier-alaska-mvpgold100k-default: #7f682e;--ds-color-tier-alaska-mvpgold100k-inverse: #c5c1bf;--ds-color-tier-alaska-lounge: #01426a;--ds-color-tier-alaska-loungeplus: #53b390;--ds-color-tier-fare-business-default: #005154;--ds-color-tier-fare-business-inverse: #9fbdbe;--ds-color-tier-fare-economy-default: #2c67b5;--ds-color-tier-fare-economy-inverse: #a0c9f1;--ds-color-tier-fare-first-class-default: #002c4e;--ds-color-tier-fare-first-class-inverse: #89b2d4;--ds-color-tier-fare-saver-default: #4aa2c7;--ds-color-tier-fare-saver-inverse: #a8e9f7;--ds-color-tier-oneworld-emerald: #139142;--ds-color-tier-oneworld-sapphire: #015daa;--ds-color-tier-oneworld-ruby: #a41d4a;--ds-color-ui-default-default: #0074c8;--ds-color-ui-default-inverse: #00cff0;--ds-color-ui-hover-default: #054687;--ds-color-ui-hover-inverse: #5de3f7;--ds-color-ui-active-default: #054687;--ds-color-ui-active-inverse: #5de3f7;--ds-color-ui-disabled-default: rgba(0, 116, 200, 0.2);--ds-color-ui-bkg-default-default: rgba(0, 0, 0, 0.03);--ds-color-ui-bkg-default-inverse: rgba(255, 255, 255, 0.03);--ds-color-ui-bkg-hover-default: rgba(0, 0, 0, 0.06);--ds-color-ui-bkg-hover-inverse: rgba(255, 255, 255, 0.06);--ds-color-utility-blue-default: #79b2ec;--ds-color-utility-blue-inverse: #c9e0f7;--ds-color-utility-cyan-default: #6ad5ef;--ds-color-utility-cyan-inverse: #a8e9f7;--ds-color-utility-green-default: #7ec6ac;--ds-color-utility-green-inverse: #addbca;--ds-color-utility-gray-default: #adadad;--ds-color-utility-gray-inverse: #dddddd;--ds-color-utility-lime-default: #badd81;--ds-color-utility-lime-inverse: #d8efb4;--ds-color-utility-navy-default: #265688;--ds-color-utility-navy-inverse: #acc9e2;--ds-color-utility-neutral-default: #7e8894;--ds-color-utility-neutral-inverse: #ccd2db;--ds-color-utility-pink-default: #f7738e;--ds-color-utility-pink-inverse: #fcc2ce;--ds-color-utility-purple-default: #8d47f0;--ds-color-utility-purple-inverse: #ddc9fb;--ds-color-utility-red-default: #e35c2f;--ds-color-utility-red-inverse: #f0a68d;--ds-color-utility-turquoise-default: #5c8f91;--ds-color-utility-turquoise-inverse: #9fbdbe;--ds-color-utility-yellow-default: #f9ce06;--ds-color-utility-yellow-inverse: #ffe87e;--ds-color-utility-error-default: #cc1816;--ds-color-utility-error-inverse: #f9aca6;--ds-color-utility-warning-default: #f2c153;--ds-color-utility-warning-inverse: #f2c153;--ds-color-utility-success-default: #0b6f4d;--ds-color-utility-success-inverse: #8eceb9}*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}:focus:not(:focus-visible){outline:3px solid transparent}:host{display:inline-block;width:100%;margin:0;padding:0;vertical-align:middle}:host ::slotted(auro-menuoption),:host ::slotted([auro-menuoption]),:host auro-menuoption[loadingplaceholder]{padding-left:calc(var(--ds-size-150, 0.75rem) + 24px + var(--ds-size-100, 0.5rem))}:host ::slotted([selected]){padding-left:0}:host ::slotted(hr){box-sizing:content-box !important;height:0 !important;overflow:visible !important;margin:var(--ds-size-100, 0.5rem) 0 !important;border-width:0 !important;border-top-width:1px !important;border-top-style:solid !important}:host([nocheckmark]) ::slotted(auro-menuoption),:host([nocheckmark]) auro-menuoption[loadingplaceholder]{padding-left:var(--ds-size-200, 1rem)}:host([root]){overflow-y:auto}[loadingplaceholder]{color:var(--ds-color-text-secondary-default, #525252)}[loadingplaceholder].empty{opacity:0;position:absolute}[loadingplaceholder] slot[name=loadingIcon]{vertical-align:middle;line-height:1;display:inline-block}[loadingplaceholder] slot[name=loadingIcon]::slotted(*){margin-right:var(--ds-size-150, 0.75rem)}`;
+
+i$5`:host ::slotted(hr){border-top-color:var(--ds-auro-menu-divider-color) !important}`;
+
+i$5`:host{--ds-auro-menu-divider-color: var(--ds-color-border-divider-default, $ds-color-border-divider-default);--ds-auro-menuoption-container-color: transparent;--ds-auro-menuoption-icon-color: transparent;--ds-auro-menuoption-text-color: var(--ds-color-text-primary-default, $ds-color-text-primary-default)}`;
+
+// Copyright (c) 2021 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
+// See LICENSE in the project root for license information.
+
+// ---------------------------------------------------------------------
+
+/**
+ * Converts value to an array.
+ * If the value is a JSON string representing an array, it will be parsed.
+ * If the value is already an array, it is returned.
+ * If the value is undefined, it returns undefined.
+ * @private
+ * @param {any} value - The value to be converted. Can be a string, array, or undefined.
+ * @returns {Array|undefined} - The converted array or undefined.
+ * @throws {Error} - Throws an error if the value is not an array, undefined,
+ * or if the value cannot be parsed into an array from a JSON string.
+ */
+function arrayConverter$1(value) {
+  // Allow undefined
+  if (value === undefined) {
+    return undefined;
+  }
+
+  // Return the value if it is already an array
+  if (Array.isArray(value)) {
+    return value;
+  }
+
+  try {
+    // If value is a JSON string, parse it
+    const parsed = typeof value === 'string' ? JSON.parse(value) : value;
+
+    // Check if the parsed value is an array
+    if (Array.isArray(parsed)) {
+      return parsed;
+    }
+  } catch (error) {
+    // If JSON parsing fails, continue to throw an error below
+    /* eslint-disable no-console */
+    console.error('JSON parsing failed:', error);
+  }
+
+  // Throw error if the input is not an array or undefined
+  throw new Error('Invalid value: Input must be an array or undefined');
+}
+
+/**
+ * Compare two arrays for equality.
+ * @private
+ * @param {Array} arr1 - First array to compare.
+ * @param {Array} arr2 - Second array to compare.
+ * @returns {boolean} True if arrays are equal.
+ */
+function arraysAreEqual$1(arr1, arr2) {
+  // If both arrays undefined, they are equal (true)
+  if (arr1 === undefined || arr2 === undefined) {
+    return arr1 === arr2;
+  }
+
+  // If arrays have different lengths, they are not equal
+  if (arr1.length !== arr2.length) {
+    return false;
+  }
+
+  // If every item at each index is the same, return true
+  for (let index = 0; index < arr1.length; index += 1) {
+    if (arr1[index] !== arr2[index]) {
+      return false;
+    }
+  }
+  return true;
+}
+
+/**
+ * Compares array for changes.
+ * @private
+ * @param {Array|any} newVal - New value to compare.
+ * @param {Array|any} oldVal - Old value to compare.
+ * @returns {boolean} True if arrays have changed.
+ */
+function arrayOrUndefinedHasChanged$1(newVal, oldVal) {
+  try {
+    // Check if values are undefined or arrays
+    const isArrayOrUndefined = (val) => val === undefined || Array.isArray(val);
+
+    // If non-array or non-undefined, throw error
+    if (!isArrayOrUndefined(newVal) || !isArrayOrUndefined(oldVal)) {
+      const invalidValue = isArrayOrUndefined(newVal) ? oldVal : newVal;
+      throw new Error(`Value must be an array or undefined, received ${typeof invalidValue}`);
+    }
+
+    // Return true if arrays have changed, false if they are the same
+    return !arraysAreEqual$1(newVal, oldVal);
+  } catch (error) {
+    /* eslint-disable no-console */
+    console.error(error);
+    // If validation fails, it has changed
+    return true;
+  }
+}
+
+i$5`:host{display:flex;align-items:center;padding:var(--ds-size-50, 0.25rem) var(--ds-size-200, 1rem) var(--ds-size-50, 0.25rem) 0;cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent}:host slot{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host [auro-icon]{--ds-auro-icon-size: var(--ds-size-300, 1.5rem);margin-right:var(--ds-size-150, 0.75rem);margin-left:var(--ds-size-100, 0.5rem)}:host ::slotted(.nestingSpacer){display:inline-block;width:var(--ds-size-300, 1.5rem)}:host ::slotted(strong){font-weight:700}:host([hidden]){display:none}:host([static]){pointer-events:none}:host([disabled]:hover){cursor:auto}:host([disabled]){user-select:none;pointer-events:none}`;
+
+i$5`:host{background-color:var(--ds-auro-menuoption-container-color);color:var(--ds-auro-menuoption-text-color)}:host svg{fill:var(--ds-auro-menuoption-icon-color) !important}:host([disabled]){--ds-auro-menuoption-text-color: var(--ds-color-text-ui-disabled-default, #adadad)}:host(:hover),:host(.active){--ds-auro-menuoption-container-color: var(--ds-color-container-ui-secondary-hover-default, rgba(0, 0, 0, 0.03))}:host([selected]){--ds-auro-menuoption-container-color: var(--ds-color-container-ui-primary-default-default, #2c67b5);--ds-auro-menuoption-text-color: var(--ds-color-text-primary-inverse, #ffffff);--ds-auro-menuoption-icon-color: var(--ds-color-icon-emphasis-inverse, #ffffff)}:host([selected]):host(.active){--ds-auro-menuoption-container-color: var(--ds-color-container-ui-primary-active-default, #225296)}`;
+
+i$5`*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock,:host{display:block}.util_displayFlex{display:flex}.util_displayHidden,:host([hidden]:not(:focus):not(:active)){display:none}.util_displayHiddenVisually,:host([hiddenVisually]:not(:focus):not(:active)){position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}.ico_squareLarge{fill:currentColor;height:var(--auro-size-lg, var(--ds-size-300, 1.5rem))}.ico_squareSmall{fill:currentColor;height:.6rem}.ico_squareMed{fill:currentColor;height:var(--auro-size-md, var(--ds-size-200, 1rem))}.ico_squareSml{fill:currentColor;height:var(--auro-size-sm, var(--ds-size-150, 0.75rem))}:host{color:currentColor;vertical-align:middle;line-height:1;display:inline-block}:host .logo{color:var(--ds-color-brand-midnight-400, #01426a)}svg{min-width:var(--ds-auro-icon-size, 1.5rem) !important;width:var(--ds-auro-icon-size, 1.5rem) !important;height:var(--ds-auro-icon-size, 1.5rem) !important}.label{display:flex;align-items:flex-start}.label svg{margin:0 var(--ds-size-50, 0.25rem)}.wrapper{height:var(--ds-auro-icon-size);width:var(--ds-auro-icon-size)}.labelContainer{line-height:1.8}`;
+
+i$5`:host{--ds-auro-icon-color: var(--ds-color-icon-primary-default, $ds-color-icon-primary-default);--ds-auro-icon-size: var(--ds-size-300, $ds-size-300)}`;
 
-var colorCss$3 = i$b`*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}:host [auro-dropdown]::part(trigger):hover{--ds-auro-dropdown-trigger-container-color: rgba(0 0 0 / 0.06)}:host([disabled]) *{color:var(--ds-color-text-ui-disabled-default, #adadad)}.placeholder{color:var(--ds-auro-select-placeholder-text-color)}`;
+i$5`:host{color:var(--ds-auro-icon-color)}:host([customColor]){color:inherit}:host(:not([onDark])[accent]){--ds-auro-icon-color: var(--ds-color-icon-accent-default, #a2c270)}:host(:not([onDark])[disabled]){--ds-auro-icon-color: var(--ds-color-icon-ui-primary-disabled-default, #adadad)}:host(:not([onDark])[emphasis]){--ds-auro-icon-color: var(--ds-color-icon-emphasis-default, #2a2a2a)}:host(:not([onDark])[error]){--ds-auro-icon-color: var(--ds-color-icon-error-default, #cc1816)}:host(:not([onDark])[info]){--ds-auro-icon-color: var(--ds-color-icon-info-default, #326aa5)}:host(:not([onDark])[secondary]){--ds-auro-icon-color: var(--ds-color-icon-secondary-default, #7e8894)}:host(:not([onDark])[subtle]){--ds-auro-icon-color: var(--ds-color-icon-subtle-default, #a0c9f1)}:host(:not([onDark])[success]){--ds-auro-icon-color: var(--ds-color-icon-success-default, #40a080)}:host(:not([onDark])[tertiary]){--ds-auro-icon-color: var(--ds-color-icon-tertiary-default, #afb9c6)}:host(:not([onDark])[warning]){--ds-auro-icon-color: var(--ds-color-icon-warning-default, #c49432)}:host([onDark]){--ds-auro-icon-color: var(--ds-color-icon-primary-inverse, #f7f7f7)}:host([onDark][accent]){--ds-auro-icon-color: var(--ds-color-icon-accent-inverse, #badd81)}:host([onDark][disabled]){--ds-auro-icon-color: var(--ds-color-icon-ui-primary-disabled-inverse, #7e7e7e)}:host([onDark][emphasis]){--ds-auro-icon-color: var(--ds-color-icon-emphasis-inverse, #ffffff)}:host([onDark][error]){--ds-auro-icon-color: var(--ds-color-icon-error-inverse, #f9aca6)}:host([onDark][info]){--ds-auro-icon-color: var(--ds-color-icon-info-inverse, #89b2d4)}:host([onDark][secondary]){--ds-auro-icon-color: var(--ds-color-icon-secondary-inverse, #ccd2db)}:host([onDark][subtle]){--ds-auro-icon-color: var(--ds-color-icon-subtle-inverse, #326aa5)}:host([onDark][success]){--ds-auro-icon-color: var(--ds-color-icon-success-inverse, #8eceb9)}:host([onDark][tertiary]){--ds-auro-icon-color: var(--ds-color-icon-tertiary-inverse, #939fad)}:host([onDark][warning]){--ds-auro-icon-color: var(--ds-color-icon-warning-inverse, #f2c153)}`;
 
-var tokensCss$2 = i$b`:host{--ds-auro-select-placeholder-text-color: var(--ds-color-text-secondary-default, $ds-color-text-secondary-default)}`;
+var styleCss$3 = i$f`*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}[slot=trigger]{width:100%;padding:0;border:0;cursor:pointer;font-family:inherit;font-size:inherit;text-align:left}[slot=trigger] .nestingSpacer{display:none}[slot=trigger] #placeholder.hidden{position:absolute;z-index:-1;opacity:0;pointer-events:none}:host [auro-dropdown]{position:relative}:host [auro-dropdown]::part(trigger){max-height:var(--ds-size-300, 1.5rem)}:host [auro-dropdown]::part(popover){max-width:-webkit-fill-available;overflow-y:scroll}:host([disabled]) *{user-select:none}.outerWrapper{position:relative}auro-menuoption{padding:0;pointer-events:none}.menuWrapper{padding:var(--ds-size-50, 0.25rem) 0}:host([multiselect]) [slot=trigger]{display:flex}:host([multiselect]) auro-menuoption:not(:first-child){margin-left:var(--ds-size-100)}`;
+
+var colorCss$3 = i$f`*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}:host [auro-dropdown]::part(trigger):hover{--ds-auro-dropdown-trigger-container-color: rgba(0 0 0 / 0.06)}:host([disabled]) *{color:var(--ds-color-text-ui-disabled-default, #adadad)}.placeholder{color:var(--ds-auro-select-placeholder-text-color)}`;
+
+var tokensCss$2 = i$f`:host{--ds-auro-select-placeholder-text-color: var(--ds-color-text-secondary-default, $ds-color-text-secondary-default)}`;
 
 // Copyright (c) 2021 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -3395,17 +3992,18 @@ var tokensCss$2 = i$b`:host{--ds-auro-select-placeholder-text-color: var(--ds-co
  * @slot helpText - Defines the content of the helpText.
  * @slot placeholder - Defines the content of the placeholder to be shown when there is no value
  * @event auroSelect-valueSet - Notifies that the component has a new value set.
+ * @event input - Notifies every time the value prop of the element is changed.
  * @event auroFormElement-validated - Notifies that the `validity` and `errorMessage` values have changed.
  * @csspart helpText - Apply CSS to the help text.
  */
 
 // build the component class
-class AuroSelect extends r$4 {
+class AuroSelect extends r$9 {
   constructor() {
     super();
 
     this.optionSelected = undefined;
-    this.validity = undefined;
+    this.value = undefined;
 
     const idLength = 36;
     const idSubstrEnd = 8;
@@ -3426,7 +4024,7 @@ class AuroSelect extends r$4 {
     /**
      * @private
      */
-    this.runtimeUtils = new AuroLibraryRuntimeUtils$1();
+    this.runtimeUtils = new AuroLibraryRuntimeUtils$2();
 
     /**
      * Generate unique names for dependency components.
@@ -3502,7 +4100,9 @@ class AuroSelect extends r$4 {
        * Specifies the current selected menuOption.
        */
       optionSelected: {
-        type: Object
+        // Allow HTMLElement[] arrays and undefined
+        converter: arrayConverter$1,
+        hasChanged: arrayOrUndefinedHasChanged$1
       },
 
       /**
@@ -3561,8 +4161,19 @@ class AuroSelect extends r$4 {
        * Value selected for the component.
        */
       value: {
-        type: String
-      }
+        // Allow string[] arrays and undefined
+        converter: arrayConverter$1,
+        hasChanged: arrayOrUndefinedHasChanged$1
+      },
+
+      /**
+       * Sets multi-select mode, allowing multiple options to be selected at once.
+       */
+      multiSelect: {
+        type: Boolean,
+        reflect: true,
+        attribute: 'multiselect'
+      },
     };
   }
 
@@ -3600,33 +4211,34 @@ class AuroSelect extends r$4 {
    *
    */
   static register(name = "auro-select") {
-    AuroLibraryRuntimeUtils$1.prototype.registerComponent(name, AuroSelect);
+    AuroLibraryRuntimeUtils$2.prototype.registerComponent(name, AuroSelect);
   }
 
   /**
-   * Updates the displayed value in an Auro dropdown component based on optionSelected
+   * Updates the displayed value in an Auro dropdown component based on optionSelected.
    * @private
    * @returns {void}
    */
   updateDisplayedValue() {
     const triggerContentEl = this.dropdown.querySelector('#triggerFocus');
 
-    // remove all existing rendered value(s)
-    triggerContentEl.querySelectorAll('auro-menuoption, [auro-menuoption]').forEach((elm) => {
-      elm.remove();
-    });
+    // Clear everything except placeholder
+    const placeholder = triggerContentEl.querySelector('#placeholder');
+    triggerContentEl.innerHTML = '';
+    if (placeholder) {
+      triggerContentEl.appendChild(placeholder);
+    }
 
-    if (this.optionSelected) {
-      // clone the selected option and remove attributes that style it
-      const clone = this.optionSelected.cloneNode(true);
-      clone.removeAttribute('selected');
-      clone.removeAttribute('class');
+    // Handle selected options
+    if (this.optionSelected && this.optionSelected.length) {
+      // Create display text from selected options
+      const displayText = this.optionSelected.map((option) => option.textContent).join(', ');
 
-      // insert the non-styled clone into the trigger
-      triggerContentEl.appendChild(clone);
+      const span = document.createElement('span');
+      span.textContent = displayText;
+      triggerContentEl.appendChild(span);
     }
 
-    // notify dropdown as trigger content is changed
     this.dropdown.requestUpdate();
   }
 
@@ -3646,6 +4258,10 @@ class AuroSelect extends r$4 {
       return;
     }
 
+    if (this.multiSelect) {
+      this.menu.multiSelect = this.multiSelect;
+    }
+
     this.menu.addEventListener("auroMenu-loadingChange", (event) => this.handleMenuLoadingChange(event));
     this.menu.setAttribute('aria-hidden', 'true');
 
@@ -3656,8 +4272,10 @@ class AuroSelect extends r$4 {
     });
 
     this.menu.addEventListener('auroMenu-selectedOption', () => {
+      // Get array of selected options from menu
       this.optionSelected = this.menu.optionSelected;
-      this.value = this.optionSelected.value;
+      // For single select, we still use arrays but only take first value
+      this.value = this.menu.value;
 
       if (this.dropdown.isPopoverVisible) {
         this.dropdown.hide();
@@ -3672,7 +4290,7 @@ class AuroSelect extends r$4 {
      * with `auro-select.value`.
      */
     this.menu.addEventListener('auroMenu-selectValueFailure', () => {
-      this.reset();
+      this.menu.clearSelection();
     });
 
     this.menu.addEventListener('auroMenu-selectValueReset', () => {
@@ -3697,7 +4315,7 @@ class AuroSelect extends r$4 {
         this.dropdown.show();
 
         if (this.dropdown.isPopoverVisible) {
-          this.menu.selectNextItem('up');
+          this.menu.navigateOptions('up');
         }
       }
 
@@ -3707,7 +4325,7 @@ class AuroSelect extends r$4 {
         this.dropdown.show();
 
         if (this.dropdown.isPopoverVisible) {
-          this.menu.selectNextItem('down');
+          this.menu.navigateOptions('down');
         }
       }
 
@@ -3770,7 +4388,7 @@ class AuroSelect extends r$4 {
      * input as no longer in the initial state.
      */
     if (this.value === undefined) {
-      this.value = '';
+      this.value = undefined;
       this.removeEventListener('focusin', this.handleFocusin);
     }
   }
@@ -3828,22 +4446,33 @@ class AuroSelect extends r$4 {
     }
   }
 
-  updated(changedProperties) {
-    // After the component is ready, send direct value changes to auro-menu.
+  async updated(changedProperties) {
     if (changedProperties.has('value')) {
       if (this.value) {
         this.menu.value = this.value;
+
+        // Wait for menu to finish updating its value
+        await this.menu.updateComplete;
+
+        this.optionSelected = this.menu.optionSelected;
       } else {
         this.menu.value = undefined;
       }
 
       this.validation.validate(this);
 
+      // LEGACY EVENT
       this.dispatchEvent(new CustomEvent('auroSelect-valueSet', {
         bubbles: true,
         cancelable: false,
         composed: true,
       }));
+
+      this.dispatchEvent(new CustomEvent('input', {
+        bubbles: true,
+        cancelable: true,
+        composed: true,
+      }));
     }
 
     if (changedProperties.has('optionSelected')) {
@@ -3851,7 +4480,7 @@ class AuroSelect extends r$4 {
     }
 
     if (changedProperties.has('error')) {
-      this.validation.validate(this, true);
+      this.validate(true);
     }
   }
 
@@ -3863,6 +4492,14 @@ class AuroSelect extends r$4 {
     this.validation.reset(this);
   }
 
+  /**
+   * Validates value.
+   * @param {boolean} [force=false] - Whether to force validation.
+   */
+  validate(force = false) {
+    this.validation.validate(this, force);
+  }
+
   // When using auroElement, use the following attribute and function when hiding content from screen readers.
   // aria-hidden="${this.hideAudible(this.hiddenAudible)}"
 
@@ -3872,18 +4509,18 @@ class AuroSelect extends r$4 {
       hidden: this.value,
     };
 
-    return u$3`
+    return u$5`
       <div class="outerWrapper">
         <div aria-live="polite" class="util_displayHiddenVisually">
           ${this.optionActive && this.options.length > 0
-            ? u$3`
+            ? u$5`
               ${`${this.optionActive.innerText}, option ${this.options.indexOf(this.optionActive) + 1} of ${this.options.length}`}
             `
             : undefined
           };
 
           ${this.optionSelected && this.options.length > 0
-            ? u$3`
+            ? u$5`
             ${`${this.optionSelected.innerText} selected`}
             `
             : undefined
@@ -3898,23 +4535,23 @@ class AuroSelect extends r$4 {
           chevron
           part="dropdown">
           <span slot="trigger" aria-haspopup="true" id="triggerFocus">
-            <span id="placeholder" class="${e$5(placeholderClass)}"><slot name="placeholder"></slot></span>
+            <span id="placeholder" class="${e$8(placeholderClass)}"><slot name="placeholder"></slot></span>
           </span>
           <div class="menuWrapper">
           </div>
           <slot name="label" slot="label"></slot>
-          <span slot="helpText">
+          <p slot="helpText">
             ${!this.validity || this.validity === undefined || this.validity === 'valid'
-              ? u$3`
-                <p class="selectElement-helpText" id="${this.uniqueId}" part="helpText">
+              ? u$5`
+                <span id="${this.uniqueId}" part="helpText">
                   <slot name="helpText"></slot>
-                </p>`
-              : u$3`
-                <p class="selectElement-helpText" id="${this.uniqueId}" role="alert" aria-live="assertive" part="helpText">
+                </span>`
+              : u$5`
+                <span id="${this.uniqueId}" role="alert" aria-live="assertive" part="helpText">
                   ${this.errorMessage}
-                </p>`
+                </span>`
             }
-          </span>
+          </p>
         </${this.dropdownTag}>
         <!-- Help text and error message template -->
       </div>
@@ -3922,32 +4559,167 @@ class AuroSelect extends r$4 {
   }
 }
 
-var styleCss$2 = i$b`:root{--ds-asset-font-circular-family-name: "AS Circular";--ds-asset-font-circular-filename: "ASCircularWeb";--ds-asset-font-circular-weight-light: "-Light";--ds-asset-font-circular-weight-medium: "-Medium";--ds-asset-font-circular-weight-book: "-Book";--ds-border-radius: 0.375rem;--ds-size-25: 0.125rem;--ds-size-50: 0.25rem;--ds-size-75: 0.375rem;--ds-size-100: 0.5rem;--ds-size-150: 0.75rem;--ds-size-200: 1rem;--ds-size-250: 1.25rem;--ds-size-300: 1.5rem;--ds-size-400: 2rem;--ds-size-500: 2.5rem;--ds-size-600: 3rem;--ds-size-700: 3.5rem;--ds-size-800: 4rem;--ds-size-900: 4.5rem;--ds-size-1000: 5rem;--ds-unitless-scale-20: 0.25;--ds-unitless-scale-50: 0.5;--ds-unitless-scale-100: 1;--ds-unitless-scale-140: 1.4;--ds-unitless-scale-150: 1.5;--ds-unitless-scale-200: 2;--ds-unitless-scale-300: 3;--ds-unitless-scale-350: 3.5;--ds-animation-default-property: all;--ds-animation-default-duration: 0.3s;--ds-animation-default-timing: ease-out;--ds-depth-overlay: 200;--ds-depth-modal: 300;--ds-depth-tooltip: 400;--ds-elevation-100: 0px 0px 5px rgba(0, 0, 0, 0.15);--ds-elevation-200: 0px 0px 10px rgba(0, 0, 0, 0.15);--ds-elevation-300: 0px 0px 15px rgba(0, 0, 0, 0.2);--ds-grid-breakpoint-xs: 320px;--ds-grid-breakpoint-sm: 576px;--ds-grid-breakpoint-md: 768px;--ds-grid-breakpoint-lg: 1024px;--ds-grid-breakpoint-xl: 1232px;--ds-grid-column-xs: 6;--ds-grid-column-sm: 12;--ds-grid-column-md: 12;--ds-grid-column-lg: 12;--ds-grid-column-xl: 12;--ds-grid-gutter-xs: 0.5rem;--ds-grid-gutter-sm: 1rem;--ds-grid-gutter-md: 1.5rem;--ds-grid-gutter-lg: 1.5rem;--ds-grid-gutter-xl: 2rem;--ds-grid-margin-xs: 1rem;--ds-grid-margin-sm: 1rem;--ds-grid-margin-md: 1.5rem;--ds-grid-margin-lg: 2rem;--ds-grid-margin-xl: 2rem;--ds-font-family-default: "AS Circular", Helvetica Neue, Arial, sans-serif;--ds-font-family-mono: Menlo, Monaco, Consolas, "Courier New", monospace;--ds-text-heading-300-weight: 300;--ds-text-heading-300-px: 18px;--ds-text-heading-300-size: 1.125rem;--ds-text-heading-300-height: 1.625rem;--ds-text-heading-300-height-px: 26px;--ds-text-heading-400-weight: 300;--ds-text-heading-400-px: 20px;--ds-text-heading-400-size: 1.25rem;--ds-text-heading-400-height: 1.625rem;--ds-text-heading-400-height-px: 26px;--ds-text-heading-500-weight: 300;--ds-text-heading-500-px-breakpoint-sm: 22px;--ds-text-heading-500-px-breakpoint-md: 24px;--ds-text-heading-500-px-breakpoint-lg: 24px;--ds-text-heading-500-size-breakpoint-sm: 1.375rem;--ds-text-heading-500-size-breakpoint-md: 1.5rem;--ds-text-heading-500-size-breakpoint-lg: 1.5rem;--ds-text-heading-500-height-breakpoint-sm: 1.625rem;--ds-text-heading-500-height-breakpoint-px-sm: 26px;--ds-text-heading-500-height-breakpoint-md: 1.875rem;--ds-text-heading-500-height-breakpoint-px-md: 30px;--ds-text-heading-500-height-breakpoint-lg: 2rem;--ds-text-heading-500-height-breakpoint-px-lg: 32px;--ds-text-heading-600-weight: 300;--ds-text-heading-600-px-breakpoint-sm: 26px;--ds-text-heading-600-px-breakpoint-md: 28px;--ds-text-heading-600-px-breakpoint-lg: 28px;--ds-text-heading-600-size-breakpoint-sm: 1.625rem;--ds-text-heading-600-size-breakpoint-md: 1.75rem;--ds-text-heading-600-size-breakpoint-lg: 1.75rem;--ds-text-heading-600-height-breakpoint-sm: 1.875rem;--ds-text-heading-600-height-breakpoint-px-sm: 30px;--ds-text-heading-600-height-breakpoint-md: 2.125rem;--ds-text-heading-600-height-breakpoint-px-md: 34px;--ds-text-heading-600-height-breakpoint-lg: 2.25rem;--ds-text-heading-600-height-breakpoint-px-lg: 36px;--ds-text-heading-700-weight: 500;--ds-text-heading-700-px-breakpoint-sm: 28px;--ds-text-heading-700-px-breakpoint-md: 32px;--ds-text-heading-700-px-breakpoint-lg: 36px;--ds-text-heading-700-size-breakpoint-sm: 1.75rem;--ds-text-heading-700-size-breakpoint-md: 2rem;--ds-text-heading-700-size-breakpoint-lg: 2.25rem;--ds-text-heading-700-height-breakpoint-sm: 2.125rem;--ds-text-heading-700-height-breakpoint-px-sm: 34px;--ds-text-heading-700-height-breakpoint-md: 2.375rem;--ds-text-heading-700-height-breakpoint-px-md: 38px;--ds-text-heading-700-height-breakpoint-lg: 2.75rem;--ds-text-heading-700-height-breakpoint-px-lg: 44px;--ds-text-heading-800-weight: 500;--ds-text-heading-800-px-breakpoint-sm: 32px;--ds-text-heading-800-px-breakpoint-md: 36px;--ds-text-heading-800-px-breakpoint-lg: 40px;--ds-text-heading-800-size-breakpoint-sm: 2rem;--ds-text-heading-800-size-breakpoint-md: 2.25rem;--ds-text-heading-800-size-breakpoint-lg: 2.5rem;--ds-text-heading-800-height-breakpoint-sm: 2.375rem;--ds-text-heading-800-height-breakpoint-px-sm: 38px;--ds-text-heading-800-height-breakpoint-md: 2.625rem;--ds-text-heading-800-height-breakpoint-px-md: 42px;--ds-text-heading-800-height-breakpoint-lg: 3rem;--ds-text-heading-800-height-breakpoint-px-lg: 48px;--ds-text-heading-default-weight: 500;--ds-text-heading-default-margin: 0;--ds-text-heading-default-spacing: -0.2px;--ds-text-heading-medium-weight: 300;--ds-text-heading-display-weight: 100;--ds-text-heading-display-px-breakpoint-sm: 44px;--ds-text-heading-display-px-breakpoint-md: 48px;--ds-text-heading-display-px-breakpoint-lg: 56px;--ds-text-heading-display-size-breakpoint-sm: 2.75rem;--ds-text-heading-display-size-breakpoint-md: 3rem;--ds-text-heading-display-size-breakpoint-lg: 3.5rem;--ds-text-heading-display-height-breakpoint-sm: 3.375rem;--ds-text-heading-display-height-breakpoint-px-sm: 54px;--ds-text-heading-display-height-breakpoint-md: 3.75rem;--ds-text-heading-display-height-breakpoint-px-md: 60px;--ds-text-heading-display-height-breakpoint-lg: 4.25rem;--ds-text-heading-display-height-breakpoint-px-lg: 68px;--ds-text-body-default-weight: 500;--ds-text-body-size-xxs: 0.625rem;--ds-text-body-size-xs: 0.75rem;--ds-text-body-size-sm: 0.875rem;--ds-text-body-size-default: 1rem;--ds-text-body-size-lg: 1.125rem;--ds-text-body-height-xs: 1rem;--ds-text-body-height-sm: 1.25rem;--ds-text-body-height-default: 1.5rem;--ds-text-body-height-lg: 1.625rem;--ds-color-alert-notification-default: #0074c8;--ds-color-alert-warning-default: #de750c;--ds-color-alert-error-default: #df0b37;--ds-color-alert-success-default: #00805d;--ds-color-alert-advisory-default: #fff0cd;--ds-color-alert-bkg-success-default: #ddf6e8;--ds-color-alert-bkg-error-default: #ffedf1;--ds-color-background-primary-100-default: #ffffff;--ds-color-background-primary-100-inverse: #0e2b4f;--ds-color-background-primary-200-default: #f7f7f7;--ds-color-background-primary-200-inverse: #194069;--ds-color-background-primary-300-default: #e4e8ec;--ds-color-background-primary-300-inverse: #265688;--ds-color-background-primary-400-default: #dddddd;--ds-color-background-primary-400-inverse: #326aa5;--ds-color-background-success-default: #eef8f5;--ds-color-background-success-inverse: #173c30;--ds-color-background-error-default: #fff4f4;--ds-color-background-error-inverse: #74110e;--ds-color-background-warning-default: #fef8e9;--ds-color-background-warning-inverse: #5d4514;--ds-color-background-info-default: #f0f7fd;--ds-color-background-info-inverse: #193d73;--ds-color-background-subtle-default: #f7f8fa;--ds-color-background-subtle-inverse: #2a2a2a;--ds-color-background-accent-default: #ebfafd;--ds-color-background-accent-inverse: #275b72;--ds-color-background-emphasis-default: #c9e0f7;--ds-color-background-emphasis-inverse: #225296;--ds-color-background-scrimmed-default: rgba(0, 0, 0, 0.5);--ds-color-background-lightest: #ffffff;--ds-color-background-lighter: #f7f7f7;--ds-color-background-darker: #01426a;--ds-color-background-darkest: #00274a;--ds-color-background-gradient-default: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5));--ds-color-base-white: #ffffff;--ds-color-base-white-100: rgba(255, 255, 255, 0.03);--ds-color-base-white-200: rgba(255, 255, 255, 0.06);--ds-color-base-white-300: rgba(255, 255, 255, 0.12);--ds-color-base-white-400: rgba(255, 255, 255, 0.25);--ds-color-base-white-500: rgba(255, 255, 255, 0.5);--ds-color-base-white-opacity-50: rgba(255, 255, 255, 0.5);--ds-color-base-white-opacity-40: rgba(255, 255, 255, 0.4);--ds-color-base-white-opacity-0: rgba(255, 255, 255, 0);--ds-color-base-black: #000000;--ds-color-base-black-100: rgba(0, 0, 0, 0.03);--ds-color-base-black-200: rgba(0, 0, 0, 0.06);--ds-color-base-black-300: rgba(0, 0, 0, 0.12);--ds-color-base-black-400: rgba(0, 0, 0, 0.25);--ds-color-base-black-500: rgba(0, 0, 0, 0.5);--ds-color-base-black-opacity-15: rgba(0, 0, 0, 0.15);--ds-color-base-blue-100: #f0f7fd;--ds-color-base-blue-200: #c9e0f7;--ds-color-base-blue-300: #a0c9f1;--ds-color-base-blue-400: #79b2ec;--ds-color-base-blue-500: #5398e6;--ds-color-base-blue-600: #3b7fd2;--ds-color-base-blue-700: #2c67b5;--ds-color-base-blue-800: #225296;--ds-color-base-blue-900: #193d73;--ds-color-base-blue-1000: #102a51;--ds-color-base-cyan-100: #ebfafd;--ds-color-base-cyan-200: #a8e9f7;--ds-color-base-cyan-300: #6ad5ef;--ds-color-base-cyan-400: #56bbde;--ds-color-base-cyan-500: #4aa2c7;--ds-color-base-cyan-600: #3e89aa;--ds-color-base-cyan-700: #32718e;--ds-color-base-cyan-800: #275b72;--ds-color-base-cyan-900: #1d4658;--ds-color-base-cyan-1000: #12303d;--ds-color-base-error-100: #fff4f4;--ds-color-base-error-200: #f9aca6;--ds-color-base-error-300: #f16359;--ds-color-base-error-400: #cc1816;--ds-color-base-error-500: #74110e;--ds-color-base-gray-100: #f7f7f7;--ds-color-base-gray-200: #d4d4d4;--ds-color-base-gray-300: #c5c5c5;--ds-color-base-gray-400: #adadad;--ds-color-base-gray-500: #959595;--ds-color-base-gray-600: #7e7e7e;--ds-color-base-gray-700: #676767;--ds-color-base-gray-800: #525252;--ds-color-base-gray-900: #3d3d3d;--ds-color-base-gray-1000: #2a2a2a;--ds-color-base-green-100: #f3faf7;--ds-color-base-green-200: #000000;--ds-color-base-green-300: #addbca;--ds-color-base-green-400: #7ec6ac;--ds-color-base-green-500: #51ae8c;--ds-color-base-green-600: #459578;--ds-color-base-green-700: #3a7d64;--ds-color-base-green-800: #306854;--ds-color-base-green-900: #285545;--ds-color-base-green-1000: #1f4436;--ds-color-base-lime-100: #f5fbeb;--ds-color-base-lime-200: #d8efb4;--ds-color-base-lime-300: #badd81;--ds-color-base-lime-400: #a2c270;--ds-color-base-lime-500: #8ca761;--ds-color-base-lime-600: #778f53;--ds-color-base-lime-700: #647845;--ds-color-base-lime-800: #53643a;--ds-color-base-lime-900: #44522f;--ds-color-base-lime-1000: #364126;--ds-color-base-navy-100: #f2f7fb;--ds-color-base-navy-200: #cfe0ef;--ds-color-base-navy-300: #acc9e2;--ds-color-base-navy-400: #89b2d4;--ds-color-base-navy-500: #6899c6;--ds-color-base-navy-600: #4a82b7;--ds-color-base-navy-700: #326aa5;--ds-color-base-navy-800: #265688;--ds-color-base-navy-900: #194069;--ds-color-base-navy-1000: #0e2b4f;--ds-color-base-neutral-100: #f7f8fa;--ds-color-base-neutral-200: #e4e8ec;--ds-color-base-neutral-300: #ccd2db;--ds-color-base-neutral-400: #afb9c6;--ds-color-base-neutral-500: #939fad;--ds-color-base-neutral-600: #7e8894;--ds-color-base-neutral-700: #6a717c;--ds-color-base-neutral-800: #585e67;--ds-color-base-neutral-900: #484d55;--ds-color-base-neutral-1000: #393d43;--ds-color-base-pink-100: #fff7f8;--ds-color-base-pink-200: #fde0e6;--ds-color-base-pink-300: #fcc2ce;--ds-color-base-pink-400: #fa9db0;--ds-color-base-pink-500: #f7738e;--ds-color-base-pink-600: #e45472;--ds-color-base-pink-700: #bf475f;--ds-color-base-pink-800: #a03b50;--ds-color-base-pink-900: #833142;--ds-color-base-pink-1000: #692734;--ds-color-base-purple-100: #fbf8fe;--ds-color-base-purple-200: #ede3fd;--ds-color-base-purple-300: #ddc9fb;--ds-color-base-purple-400: #c9a9f8;--ds-color-base-purple-500: #b588f5;--ds-color-base-purple-600: #a268f3;--ds-color-base-purple-700: #8d47f0;--ds-color-base-purple-800: #7633d7;--ds-color-base-purple-900: #622ab2;--ds-color-base-purple-1000: #4e228d;--ds-color-base-red-100: #fef7f5;--ds-color-base-red-200: #fae2da;--ds-color-base-red-300: #f5c7b8;--ds-color-base-red-400: #f0a68d;--ds-color-base-red-500: #e9815e;--ds-color-base-red-600: #e35c2f;--ds-color-base-red-700: #d03a08;--ds-color-base-red-800: #ae3007;--ds-color-base-red-900: #902806;--ds-color-base-red-1000: #732005;--ds-color-base-success-100: #eef8f5;--ds-color-base-success-200: #8eceb9;--ds-color-base-success-300: #40a080;--ds-color-base-success-400: #0b6f4d;--ds-color-base-success-500: #173c30;--ds-color-base-turquoise-100: #f7fafa;--ds-color-base-turquoise-200: #dfe9ea;--ds-color-base-turquoise-300: #c2d5d6;--ds-color-base-turquoise-400: #9fbdbe;--ds-color-base-turquoise-500: #7ba5a6;--ds-color-base-turquoise-600: #5c8f91;--ds-color-base-turquoise-700: #3d7a7d;--ds-color-base-turquoise-800: #21686a;--ds-color-base-turquoise-900: #085659;--ds-color-base-turquoise-1000: #004447;--ds-color-base-yellow-100: #fff9df;--ds-color-base-yellow-200: #ffe87e;--ds-color-base-yellow-300: #f9ce06;--ds-color-base-yellow-400: #d6b622;--ds-color-base-yellow-500: #b49d35;--ds-color-base-yellow-600: #96873e;--ds-color-base-yellow-700: #7c7140;--ds-color-base-yellow-800: #665e3d;--ds-color-base-yellow-900: #524e38;--ds-color-base-yellow-1000: #403d30;--ds-color-base-warning-100: #fef8e9;--ds-color-base-warning-200: #f2c153;--ds-color-base-warning-300: #c49432;--ds-color-base-warning-400: #8e6b22;--ds-color-base-warning-500: #5d4514;--ds-color-state-error-100: #ff999b;--ds-color-state-error-500: #df0b37;--ds-color-state-success-100: #69cf96;--ds-color-state-success-500: #00805d;--ds-color-state-warning-500: #de750c;--ds-color-border-primary-default: #585e67;--ds-color-border-primary-inverse: #afb9c6;--ds-color-border-secondary-default: #939fad;--ds-color-border-secondary-inverse: #7e8894;--ds-color-border-tertiary-default: #dddddd;--ds-color-border-tertiary-inverse: #676767;--ds-color-border-error-default: #cc1816;--ds-color-border-error-inverse: #f9aca6;--ds-color-border-divider-default: rgba(0, 0, 0, 0.12);--ds-color-border-divider-inverse: rgba(255, 255, 255, 0.25);--ds-color-border-subtle-default: #f0f7fd;--ds-color-border-subtle-inverse: #326aa5;--ds-color-border-emphasis-default: #194069;--ds-color-border-emphasis-inverse: #f2f7fb;--ds-color-border-accent-default: #badd81;--ds-color-border-accent-inverse: #a2c270;--ds-color-border-success-default: #0b6f4d;--ds-color-border-success-inverse: #8eceb9;--ds-color-border-warning-default: #c49432;--ds-color-border-warning-inverse: #f2c153;--ds-color-border-info-default: #326aa5;--ds-color-border-info-inverse: #89b2d4;--ds-color-border-ui-default-default: #2c67b5;--ds-color-border-ui-default-inverse: #56bbde;--ds-color-border-ui-hover-default: #193d73;--ds-color-border-ui-hover-inverse: #a8e9f7;--ds-color-border-ui-active-default: #225296;--ds-color-border-ui-active-inverse: #6ad5ef;--ds-color-border-ui-focus-default: #2c67b5;--ds-color-border-ui-focus-inverse: #56bbde;--ds-color-border-ui-disabled-default: #adadad;--ds-color-border-ui-disabled-inverse: #7e7e7e;--ds-color-border-active-default: #0074c8;--ds-color-border-active-inverse: #00cff0;--ds-color-border-disabled-default: #d4d4d4;--ds-color-border-focus-default: #959595;--ds-color-brand-neutral-100: #f7f8fa;--ds-color-brand-neutral-200: #e4e8ec;--ds-color-brand-neutral-300: #ccd2db;--ds-color-brand-neutral-400: #afb9c6;--ds-color-brand-neutral-500: #939fad;--ds-color-brand-neutral-600: #7e8894;--ds-color-brand-neutral-700: #6a717c;--ds-color-brand-neutral-800: #585e67;--ds-color-brand-neutral-900: #484d55;--ds-color-brand-neutral-1000: #393d43;--ds-color-brand-gray-100: #f7f7f7;--ds-color-brand-gray-200: #dddddd;--ds-color-brand-gray-300: #c5c5c5;--ds-color-brand-gray-400: #adadad;--ds-color-brand-gray-500: #959595;--ds-color-brand-gray-600: #7e7e7e;--ds-color-brand-gray-700: #676767;--ds-color-brand-gray-800: #525252;--ds-color-brand-gray-900: #3d3d3d;--ds-color-brand-gray-1000: #2a2a2a;--ds-color-brand-red-100: #fef7f5;--ds-color-brand-red-200: #fae2da;--ds-color-brand-red-300: #f5c7b8;--ds-color-brand-red-400: #f0a68d;--ds-color-brand-red-500: #e9815e;--ds-color-brand-red-600: #e35c2f;--ds-color-brand-red-700: #d03a08;--ds-color-brand-red-800: #ae3007;--ds-color-brand-red-900: #902806;--ds-color-brand-red-1000: #732005;--ds-color-brand-yellow-100: #fff9df;--ds-color-brand-yellow-200: #ffe87e;--ds-color-brand-yellow-300: #f9ce06;--ds-color-brand-yellow-400: #d6b622;--ds-color-brand-yellow-500: #b49d35;--ds-color-brand-yellow-600: #96873e;--ds-color-brand-yellow-700: #7c7140;--ds-color-brand-yellow-800: #665e3d;--ds-color-brand-yellow-900: #524e38;--ds-color-brand-yellow-1000: #403d30;--ds-color-brand-lime-100: #f5fbeb;--ds-color-brand-lime-200: #d8efb4;--ds-color-brand-lime-300: #badd81;--ds-color-brand-lime-400: #a2c270;--ds-color-brand-lime-500: #8ca761;--ds-color-brand-lime-600: #778f53;--ds-color-brand-lime-700: #647845;--ds-color-brand-lime-800: #53643a;--ds-color-brand-lime-900: #44522f;--ds-color-brand-lime-1000: #364126;--ds-color-brand-green-100: #f3faf7;--ds-color-brand-green-200: #d4ece4;--ds-color-brand-green-300: #addbca;--ds-color-brand-green-400: #7ec6ac;--ds-color-brand-green-500: #51ae8c;--ds-color-brand-green-600: #459578;--ds-color-brand-green-700: #3a7d64;--ds-color-brand-green-800: #306854;--ds-color-brand-green-900: #285545;--ds-color-brand-green-1000: #1f4436;--ds-color-brand-turquoise-100: #f7fafa;--ds-color-brand-turquoise-200: #dfe9ea;--ds-color-brand-turquoise-300: #c2d5d6;--ds-color-brand-turquoise-400: #9fbdbe;--ds-color-brand-turquoise-500: #7ba5a6;--ds-color-brand-turquoise-600: #5c8f91;--ds-color-brand-turquoise-700: #3d7a7d;--ds-color-brand-turquoise-800: #21686a;--ds-color-brand-turquoise-900: #085659;--ds-color-brand-turquoise-1000: #004447;--ds-color-brand-cyan-100: #ebfafd;--ds-color-brand-cyan-200: #a8e9f7;--ds-color-brand-cyan-300: #6ad5ef;--ds-color-brand-cyan-400: #56bbde;--ds-color-brand-cyan-500: #4aa2c7;--ds-color-brand-cyan-600: #3e89aa;--ds-color-brand-cyan-700: #32718e;--ds-color-brand-cyan-800: #275b72;--ds-color-brand-cyan-900: #1d4658;--ds-color-brand-cyan-1000: #12303d;--ds-color-brand-blue-100: #f0f7fd;--ds-color-brand-blue-200: #c9e0f7;--ds-color-brand-blue-300: #a0c9f1;--ds-color-brand-blue-400: #79b2ec;--ds-color-brand-blue-500: #5398e6;--ds-color-brand-blue-600: #3b7fd2;--ds-color-brand-blue-700: #2c67b5;--ds-color-brand-blue-800: #225296;--ds-color-brand-blue-900: #193d73;--ds-color-brand-blue-1000: #102a51;--ds-color-brand-navy-100: #f2f7fb;--ds-color-brand-navy-200: #cfe0ef;--ds-color-brand-navy-300: #acc9e2;--ds-color-brand-navy-400: #89b2d4;--ds-color-brand-navy-500: #6899c6;--ds-color-brand-navy-600: #4a82b7;--ds-color-brand-navy-700: #326aa5;--ds-color-brand-navy-800: #265688;--ds-color-brand-navy-900: #194069;--ds-color-brand-navy-1000: #0e2b4f;--ds-color-brand-purple-100: #fbf8fe;--ds-color-brand-purple-200: #ede3fd;--ds-color-brand-purple-300: #ddc9fb;--ds-color-brand-purple-400: #c9a9f8;--ds-color-brand-purple-500: #b588f5;--ds-color-brand-purple-600: #a268f3;--ds-color-brand-purple-700: #8d47f0;--ds-color-brand-purple-800: #7633d7;--ds-color-brand-purple-900: #622ab2;--ds-color-brand-purple-1000: #4e228d;--ds-color-brand-pink-100: #fff7f8;--ds-color-brand-pink-200: #fde0e6;--ds-color-brand-pink-300: #fcc2ce;--ds-color-brand-pink-400: #fa9db0;--ds-color-brand-pink-500: #f7738e;--ds-color-brand-pink-600: #e45472;--ds-color-brand-pink-700: #bf475f;--ds-color-brand-pink-800: #a03b50;--ds-color-brand-pink-900: #833142;--ds-color-brand-pink-1000: #692734;--ds-color-brand-midnight-100: #c1daf0;--ds-color-brand-midnight-200: #569ed7;--ds-color-brand-midnight-300: #156fad;--ds-color-brand-midnight-400: #01426a;--ds-color-brand-midnight-500: #00274a;--ds-color-brand-atlas-100: #cde6ff;--ds-color-brand-atlas-200: #6bb7fb;--ds-color-brand-atlas-300: #2492eb;--ds-color-brand-atlas-400: #0074c8;--ds-color-brand-atlas-500: #054687;--ds-color-brand-atlas-400-opacity-20: rgba(0, 116, 200, 0.2);--ds-color-brand-breeze-100: #c0f7ff;--ds-color-brand-breeze-200: #5de3f7;--ds-color-brand-breeze-300: #00cff0;--ds-color-brand-breeze-400: #099dc5;--ds-color-brand-breeze-500: #0b5575;--ds-color-brand-breeze-300-opacity-30: rgba(0, 207, 240, 0.3);--ds-color-brand-tropical-100: #e2ffcd;--ds-color-brand-tropical-200: #d0fba6;--ds-color-brand-tropical-300: #c0e585;--ds-color-brand-tropical-400: #91be62;--ds-color-brand-tropical-500: #5e8741;--ds-color-brand-alpine-100: #bcaae6;--ds-color-brand-alpine-200: #9e73ea;--ds-color-brand-alpine-300: #8439ef;--ds-color-brand-alpine-400: #631db8;--ds-color-brand-alpine-500: #39115c;--ds-color-brand-flamingo-100: #ffebee;--ds-color-brand-flamingo-200: #ffc0ca;--ds-color-brand-flamingo-300: #ff94a7;--ds-color-brand-flamingo-400: #f65b7b;--ds-color-brand-flamingo-500: #b82b47;--ds-color-brand-canyon-100: #ffcab6;--ds-color-brand-canyon-200: #f99574;--ds-color-brand-canyon-300: #f26135;--ds-color-brand-canyon-400: #de3e09;--ds-color-brand-canyon-500: #b83302;--ds-color-brand-goldcoast-100: #fff0cd;--ds-color-brand-goldcoast-200: #ffdb67;--ds-color-brand-goldcoast-300: #ffd200;--ds-color-brand-goldcoast-400: #e5ad07;--ds-color-brand-goldcoast-500: #b88624;--ds-color-brand-goldgray-100: #c5c1bf;--ds-color-brand-goldgray-200: #726e6c;--ds-color-brand-gold-100: #ccbc94;--ds-color-brand-gold-200: #7f682e;--ds-color-brand-emerald: #139142;--ds-color-brand-sapphire: #015daa;--ds-color-brand-ruby: #a41d4a;--ds-color-brand-lounge: #01426a;--ds-color-brand-loungeplus: #53b390;--ds-color-container-accent-default: #f5fbeb;--ds-color-container-accent-inverse: #badd81;--ds-color-container-emphasis-default: #ebfafd;--ds-color-container-emphasis-inverse: #6ad5ef;--ds-color-container-error-default: #fff4f4;--ds-color-container-error-inverse: #74110e;--ds-color-container-info-default: #f0f7fd;--ds-color-container-info-inverse: #193d73;--ds-color-container-primary-default: #ffffff;--ds-color-container-primary-inverse: #0e2b4f;--ds-color-container-secondary-default: #f7f7f7;--ds-color-container-secondary-inverse: #194069;--ds-color-container-subtle-default: #f7f8fa;--ds-color-container-subtle-inverse: #393d43;--ds-color-container-success-default: #eef8f5;--ds-color-container-success-inverse: #173c30;--ds-color-container-tertiary-default: rgba(0, 0, 0, 0.03);--ds-color-container-tertiary-inverse: rgba(255, 255, 255, 0.06);--ds-color-container-warning-default: #fef8e9;--ds-color-container-warning-inverse: #5d4514;--ds-color-container-ui-primary-active-default: #225296;--ds-color-container-ui-primary-active-inverse: #6ad5ef;--ds-color-container-ui-primary-default-default: #2c67b5;--ds-color-container-ui-primary-default-inverse: #56bbde;--ds-color-container-ui-primary-disabled-default: #a0c9f1;--ds-color-container-ui-primary-disabled-inverse: #275b72;--ds-color-container-ui-primary-focus-default: #2c67b5;--ds-color-container-ui-primary-focus-inverse: #56bbde;--ds-color-container-ui-primary-hover-default: #193d73;--ds-color-container-ui-primary-hover-inverse: #a8e9f7;--ds-color-container-ui-secondary-active-default: #f0f7fd;--ds-color-container-ui-secondary-active-inverse: rgba(255, 255, 255, 0.06);--ds-color-container-ui-secondary-default-default: #ffffff;--ds-color-container-ui-secondary-default-inverse: rgba(255, 255, 255, 0.03);--ds-color-container-ui-secondary-disabled-default: #f7f7f7;--ds-color-container-ui-secondary-disabled-inverse: rgba(255, 255, 255, 0.12);--ds-color-container-ui-secondary-focus-default: #ffffff;--ds-color-container-ui-secondary-focus-inverse: rgba(255, 255, 255, 0.03);--ds-color-container-ui-secondary-hover-default: rgba(0, 0, 0, 0.03);--ds-color-container-ui-secondary-hover-inverse: rgba(255, 255, 255, 0.12);--ds-color-container-ui-tertiary-active-default: rgba(0, 0, 0, 0.06);--ds-color-container-ui-tertiary-active-inverse: rgba(255, 255, 255, 0.06);--ds-color-container-ui-tertiary-default-default: rgba(0, 0, 0, 0.03);--ds-color-container-ui-tertiary-default-inverse: rgba(255, 255, 255, 0.12);--ds-color-container-ui-tertiary-disabled-default: rgba(0, 0, 0, 0.03);--ds-color-container-ui-tertiary-disabled-inverse: rgba(255, 255, 255, 0.25);--ds-color-container-ui-tertiary-focus-default: rgba(0, 0, 0, 0.03);--ds-color-container-ui-tertiary-focus-inverse: rgba(255, 255, 255, 0.12);--ds-color-container-ui-tertiary-hover-default: rgba(0, 0, 0, 0.12);--ds-color-container-ui-tertiary-hover-inverse: rgba(255, 255, 255, 0.25);--ds-color-icon-primary-default: #676767;--ds-color-icon-primary-inverse: #f7f7f7;--ds-color-icon-secondary-default: #7e8894;--ds-color-icon-secondary-inverse: #ccd2db;--ds-color-icon-tertiary-default: #afb9c6;--ds-color-icon-tertiary-inverse: #939fad;--ds-color-icon-emphasis-default: #2a2a2a;--ds-color-icon-emphasis-inverse: #ffffff;--ds-color-icon-accent-default: #a2c270;--ds-color-icon-accent-inverse: #badd81;--ds-color-icon-info-default: #326aa5;--ds-color-icon-info-inverse: #89b2d4;--ds-color-icon-error-default: #cc1816;--ds-color-icon-error-inverse: #f9aca6;--ds-color-icon-warning-default: #c49432;--ds-color-icon-warning-inverse: #f2c153;--ds-color-icon-success-default: #40a080;--ds-color-icon-success-inverse: #8eceb9;--ds-color-icon-subtle-default: #a0c9f1;--ds-color-icon-subtle-inverse: #326aa5;--ds-color-icon-ui-primary-default-default: #2c67b5;--ds-color-icon-ui-primary-default-inverse: #56bbde;--ds-color-icon-ui-primary-hover-default: #193d73;--ds-color-icon-ui-primary-hover-inverse: #a8e9f7;--ds-color-icon-ui-primary-active-default: #225296;--ds-color-icon-ui-primary-active-inverse: #6ad5ef;--ds-color-icon-ui-primary-disabled-default: #adadad;--ds-color-icon-ui-primary-disabled-inverse: #7e7e7e;--ds-color-icon-ui-primary-focus-default: #2c67b5;--ds-color-icon-ui-primary-focus-inverse: #56bbde;--ds-color-icon-ui-secondary-active-default: #676767;--ds-color-icon-ui-secondary-active-inverse: #c5c5c5;--ds-color-icon-ui-secondary-default-default: #7e7e7e;--ds-color-icon-ui-secondary-default-inverse: #adadad;--ds-color-icon-ui-secondary-disabled-default: #adadad;--ds-color-icon-ui-secondary-disabled-inverse: #7e7e7e;--ds-color-icon-ui-secondary-focus-default: #7e7e7e;--ds-color-icon-ui-secondary-focus-inverse: #adadad;--ds-color-icon-ui-secondary-hover-default: #525252;--ds-color-icon-ui-secondary-hover-inverse: #dddddd;--ds-color-icon-brand-red-default: #d03a08;--ds-color-icon-brand-red-inverse: #e9815e;--ds-color-icon-brand-yellow-default: #7c7140;--ds-color-icon-brand-yellow-inverse: #f9ce06;--ds-color-icon-brand-pink-default: #bf475f;--ds-color-icon-brand-pink-inverse: #f7738e;--ds-color-icon-brand-purple-default: #8d47f0;--ds-color-icon-brand-purple-inverse: #b588f5;--ds-color-icon-brand-lime-default: #647845;--ds-color-icon-brand-lime-inverse: #badd81;--ds-color-icon-brand-green-default: #3a7d64;--ds-color-icon-brand-green-inverse: #51ae8c;--ds-color-icon-brand-turquoise-default: #3d7a7d;--ds-color-icon-brand-turquoise-inverse: #7ba5a6;--ds-color-icon-brand-navy-default: #265688;--ds-color-icon-brand-navy-inverse: #6899c6;--ds-color-icon-brand-blue-default: #2c67b5;--ds-color-icon-brand-blue-inverse: #5398e6;--ds-color-icon-brand-cyan-default: #32718e;--ds-color-icon-brand-cyan-inverse: #6ad5ef;--ds-color-icon-brand-gray-default: #676767;--ds-color-icon-brand-gray-inverse: #c5c5c5;--ds-color-icon-brand-neutral-default: #6a717c;--ds-color-icon-brand-neutral-inverse: #afb9c6;--ds-color-icon-disabled-default: rgba(0, 0, 0, 0.15);--ds-color-text-primary-default: #2a2a2a;--ds-color-text-primary-inverse: #ffffff;--ds-color-text-secondary-default: #525252;--ds-color-text-secondary-inverse: #dddddd;--ds-color-text-tertiary-default: #6a717c;--ds-color-text-tertiary-inverse: #adadad;--ds-color-text-error-default: #cc1816;--ds-color-text-error-inverse: #f9aca6;--ds-color-text-emphasis-default: #265688;--ds-color-text-emphasis-inverse: #cfe0ef;--ds-color-text-accent-default: #647845;--ds-color-text-accent-inverse: #badd81;--ds-color-text-info-default: #326aa5;--ds-color-text-info-inverse: #acc9e2;--ds-color-text-subtle-default: #32718e;--ds-color-text-subtle-inverse: #56bbde;--ds-color-text-success-default: #0b6f4d;--ds-color-text-success-inverse: #8eceb9;--ds-color-text-ui-active-default: #225296;--ds-color-text-ui-active-inverse: #6ad5ef;--ds-color-text-ui-default-default: #2c67b5;--ds-color-text-ui-default-inverse: #56bbde;--ds-color-text-ui-disabled-default: #adadad;--ds-color-text-ui-disabled-inverse: #7e7e7e;--ds-color-text-ui-focus-default: #2c67b5;--ds-color-text-ui-focus-inverse: #56bbde;--ds-color-text-ui-hover-default: #193d73;--ds-color-text-ui-hover-inverse: #a8e9f7;--ds-color-text-link-default: #0074c8;--ds-color-text-link-inverse: #00cff0;--ds-color-tier-alaska-mvp-default: #726e6c;--ds-color-tier-alaska-mvp-inverse: #c5c1bf;--ds-color-tier-alaska-mvpgold-default: #7f682e;--ds-color-tier-alaska-mvpgold-inverse: #c5c1bf;--ds-color-tier-alaska-mvpgold75k-default: #7f682e;--ds-color-tier-alaska-mvpgold75k-inverse: #c5c1bf;--ds-color-tier-alaska-mvpgold100k-default: #7f682e;--ds-color-tier-alaska-mvpgold100k-inverse: #c5c1bf;--ds-color-tier-alaska-lounge: #01426a;--ds-color-tier-alaska-loungeplus: #53b390;--ds-color-tier-fare-business-default: #005154;--ds-color-tier-fare-business-inverse: #9fbdbe;--ds-color-tier-fare-economy-default: #2c67b5;--ds-color-tier-fare-economy-inverse: #a0c9f1;--ds-color-tier-fare-first-class-default: #002c4e;--ds-color-tier-fare-first-class-inverse: #89b2d4;--ds-color-tier-fare-saver-default: #4aa2c7;--ds-color-tier-fare-saver-inverse: #a8e9f7;--ds-color-tier-oneworld-emerald: #139142;--ds-color-tier-oneworld-sapphire: #015daa;--ds-color-tier-oneworld-ruby: #a41d4a;--ds-color-ui-default-default: #0074c8;--ds-color-ui-default-inverse: #00cff0;--ds-color-ui-hover-default: #054687;--ds-color-ui-hover-inverse: #5de3f7;--ds-color-ui-active-default: #054687;--ds-color-ui-active-inverse: #5de3f7;--ds-color-ui-disabled-default: rgba(0, 116, 200, 0.2);--ds-color-ui-bkg-default-default: rgba(0, 0, 0, 0.03);--ds-color-ui-bkg-default-inverse: rgba(255, 255, 255, 0.03);--ds-color-ui-bkg-hover-default: rgba(0, 0, 0, 0.06);--ds-color-ui-bkg-hover-inverse: rgba(255, 255, 255, 0.06);--ds-color-utility-blue-default: #79b2ec;--ds-color-utility-blue-inverse: #c9e0f7;--ds-color-utility-cyan-default: #6ad5ef;--ds-color-utility-cyan-inverse: #a8e9f7;--ds-color-utility-green-default: #7ec6ac;--ds-color-utility-green-inverse: #addbca;--ds-color-utility-gray-default: #adadad;--ds-color-utility-gray-inverse: #dddddd;--ds-color-utility-lime-default: #badd81;--ds-color-utility-lime-inverse: #d8efb4;--ds-color-utility-navy-default: #265688;--ds-color-utility-navy-inverse: #acc9e2;--ds-color-utility-neutral-default: #7e8894;--ds-color-utility-neutral-inverse: #ccd2db;--ds-color-utility-pink-default: #f7738e;--ds-color-utility-pink-inverse: #fcc2ce;--ds-color-utility-purple-default: #8d47f0;--ds-color-utility-purple-inverse: #ddc9fb;--ds-color-utility-red-default: #e35c2f;--ds-color-utility-red-inverse: #f0a68d;--ds-color-utility-turquoise-default: #5c8f91;--ds-color-utility-turquoise-inverse: #9fbdbe;--ds-color-utility-yellow-default: #f9ce06;--ds-color-utility-yellow-inverse: #ffe87e;--ds-color-utility-error-default: #cc1816;--ds-color-utility-error-inverse: #f9aca6;--ds-color-utility-warning-default: #f2c153;--ds-color-utility-warning-inverse: #f2c153;--ds-color-utility-success-default: #0b6f4d;--ds-color-utility-success-inverse: #8eceb9}*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}:focus:not(:focus-visible){outline:3px solid transparent}:host{display:inline-block;width:100%;margin:0;padding:0;vertical-align:middle}:host ::slotted(auro-menuoption),:host ::slotted([auro-menuoption]),:host auro-menuoption[loadingplaceholder]{padding-left:calc(var(--ds-size-150, 0.75rem) + 24px + var(--ds-size-100, 0.5rem))}:host ::slotted([selected]){padding-left:0}:host ::slotted(hr){box-sizing:content-box !important;height:0 !important;overflow:visible !important;margin:var(--ds-size-100, 0.5rem) 0 !important;border-width:0 !important;border-top-width:1px !important;border-top-style:solid !important}:host([nocheckmark]) ::slotted(auro-menuoption),:host([nocheckmark]) auro-menuoption[loadingplaceholder]{padding-left:var(--ds-size-200, 1rem)}:host([root]){overflow-y:auto}[loadingplaceholder]{color:var(--ds-color-text-secondary-default, #525252)}[loadingplaceholder].empty{opacity:0;position:absolute}[loadingplaceholder] slot[name=loadingIcon]{vertical-align:middle;line-height:1;display:inline-block}[loadingplaceholder] slot[name=loadingIcon]::slotted(*){margin-right:var(--ds-size-150, 0.75rem)}`;
+var styleCss$2 = i$f`:root{--ds-asset-font-circular-family-name: "AS Circular";--ds-asset-font-circular-filename: "ASCircularWeb";--ds-asset-font-circular-weight-light: "-Light";--ds-asset-font-circular-weight-medium: "-Medium";--ds-asset-font-circular-weight-book: "-Book";--ds-border-radius: 0.375rem;--ds-size-25: 0.125rem;--ds-size-50: 0.25rem;--ds-size-75: 0.375rem;--ds-size-100: 0.5rem;--ds-size-150: 0.75rem;--ds-size-200: 1rem;--ds-size-250: 1.25rem;--ds-size-300: 1.5rem;--ds-size-400: 2rem;--ds-size-500: 2.5rem;--ds-size-600: 3rem;--ds-size-700: 3.5rem;--ds-size-800: 4rem;--ds-size-900: 4.5rem;--ds-size-1000: 5rem;--ds-unitless-scale-20: 0.25;--ds-unitless-scale-50: 0.5;--ds-unitless-scale-100: 1;--ds-unitless-scale-140: 1.4;--ds-unitless-scale-150: 1.5;--ds-unitless-scale-200: 2;--ds-unitless-scale-300: 3;--ds-unitless-scale-350: 3.5;--ds-animation-default-property: all;--ds-animation-default-duration: 0.3s;--ds-animation-default-timing: ease-out;--ds-depth-overlay: 200;--ds-depth-modal: 300;--ds-depth-tooltip: 400;--ds-elevation-100: 0px 0px 5px rgba(0, 0, 0, 0.15);--ds-elevation-200: 0px 0px 10px rgba(0, 0, 0, 0.15);--ds-elevation-300: 0px 0px 15px rgba(0, 0, 0, 0.2);--ds-grid-breakpoint-xs: 320px;--ds-grid-breakpoint-sm: 576px;--ds-grid-breakpoint-md: 768px;--ds-grid-breakpoint-lg: 1024px;--ds-grid-breakpoint-xl: 1232px;--ds-grid-column-xs: 6;--ds-grid-column-sm: 12;--ds-grid-column-md: 12;--ds-grid-column-lg: 12;--ds-grid-column-xl: 12;--ds-grid-gutter-xs: 0.5rem;--ds-grid-gutter-sm: 1rem;--ds-grid-gutter-md: 1.5rem;--ds-grid-gutter-lg: 1.5rem;--ds-grid-gutter-xl: 2rem;--ds-grid-margin-xs: 1rem;--ds-grid-margin-sm: 1rem;--ds-grid-margin-md: 1.5rem;--ds-grid-margin-lg: 2rem;--ds-grid-margin-xl: 2rem;--ds-font-family-default: "AS Circular", Helvetica Neue, Arial, sans-serif;--ds-font-family-mono: Menlo, Monaco, Consolas, "Courier New", monospace;--ds-text-heading-300-weight: 300;--ds-text-heading-300-px: 18px;--ds-text-heading-300-size: 1.125rem;--ds-text-heading-300-height: 1.625rem;--ds-text-heading-300-height-px: 26px;--ds-text-heading-400-weight: 300;--ds-text-heading-400-px: 20px;--ds-text-heading-400-size: 1.25rem;--ds-text-heading-400-height: 1.625rem;--ds-text-heading-400-height-px: 26px;--ds-text-heading-500-weight: 300;--ds-text-heading-500-px-breakpoint-sm: 22px;--ds-text-heading-500-px-breakpoint-md: 24px;--ds-text-heading-500-px-breakpoint-lg: 24px;--ds-text-heading-500-size-breakpoint-sm: 1.375rem;--ds-text-heading-500-size-breakpoint-md: 1.5rem;--ds-text-heading-500-size-breakpoint-lg: 1.5rem;--ds-text-heading-500-height-breakpoint-sm: 1.625rem;--ds-text-heading-500-height-breakpoint-px-sm: 26px;--ds-text-heading-500-height-breakpoint-md: 1.875rem;--ds-text-heading-500-height-breakpoint-px-md: 30px;--ds-text-heading-500-height-breakpoint-lg: 2rem;--ds-text-heading-500-height-breakpoint-px-lg: 32px;--ds-text-heading-600-weight: 300;--ds-text-heading-600-px-breakpoint-sm: 26px;--ds-text-heading-600-px-breakpoint-md: 28px;--ds-text-heading-600-px-breakpoint-lg: 28px;--ds-text-heading-600-size-breakpoint-sm: 1.625rem;--ds-text-heading-600-size-breakpoint-md: 1.75rem;--ds-text-heading-600-size-breakpoint-lg: 1.75rem;--ds-text-heading-600-height-breakpoint-sm: 1.875rem;--ds-text-heading-600-height-breakpoint-px-sm: 30px;--ds-text-heading-600-height-breakpoint-md: 2.125rem;--ds-text-heading-600-height-breakpoint-px-md: 34px;--ds-text-heading-600-height-breakpoint-lg: 2.25rem;--ds-text-heading-600-height-breakpoint-px-lg: 36px;--ds-text-heading-700-weight: 500;--ds-text-heading-700-px-breakpoint-sm: 28px;--ds-text-heading-700-px-breakpoint-md: 32px;--ds-text-heading-700-px-breakpoint-lg: 36px;--ds-text-heading-700-size-breakpoint-sm: 1.75rem;--ds-text-heading-700-size-breakpoint-md: 2rem;--ds-text-heading-700-size-breakpoint-lg: 2.25rem;--ds-text-heading-700-height-breakpoint-sm: 2.125rem;--ds-text-heading-700-height-breakpoint-px-sm: 34px;--ds-text-heading-700-height-breakpoint-md: 2.375rem;--ds-text-heading-700-height-breakpoint-px-md: 38px;--ds-text-heading-700-height-breakpoint-lg: 2.75rem;--ds-text-heading-700-height-breakpoint-px-lg: 44px;--ds-text-heading-800-weight: 500;--ds-text-heading-800-px-breakpoint-sm: 32px;--ds-text-heading-800-px-breakpoint-md: 36px;--ds-text-heading-800-px-breakpoint-lg: 40px;--ds-text-heading-800-size-breakpoint-sm: 2rem;--ds-text-heading-800-size-breakpoint-md: 2.25rem;--ds-text-heading-800-size-breakpoint-lg: 2.5rem;--ds-text-heading-800-height-breakpoint-sm: 2.375rem;--ds-text-heading-800-height-breakpoint-px-sm: 38px;--ds-text-heading-800-height-breakpoint-md: 2.625rem;--ds-text-heading-800-height-breakpoint-px-md: 42px;--ds-text-heading-800-height-breakpoint-lg: 3rem;--ds-text-heading-800-height-breakpoint-px-lg: 48px;--ds-text-heading-default-weight: 500;--ds-text-heading-default-margin: 0;--ds-text-heading-default-spacing: -0.2px;--ds-text-heading-medium-weight: 300;--ds-text-heading-display-weight: 100;--ds-text-heading-display-px-breakpoint-sm: 44px;--ds-text-heading-display-px-breakpoint-md: 48px;--ds-text-heading-display-px-breakpoint-lg: 56px;--ds-text-heading-display-size-breakpoint-sm: 2.75rem;--ds-text-heading-display-size-breakpoint-md: 3rem;--ds-text-heading-display-size-breakpoint-lg: 3.5rem;--ds-text-heading-display-height-breakpoint-sm: 3.375rem;--ds-text-heading-display-height-breakpoint-px-sm: 54px;--ds-text-heading-display-height-breakpoint-md: 3.75rem;--ds-text-heading-display-height-breakpoint-px-md: 60px;--ds-text-heading-display-height-breakpoint-lg: 4.25rem;--ds-text-heading-display-height-breakpoint-px-lg: 68px;--ds-text-body-default-weight: 500;--ds-text-body-size-xxs: 0.625rem;--ds-text-body-size-xs: 0.75rem;--ds-text-body-size-sm: 0.875rem;--ds-text-body-size-default: 1rem;--ds-text-body-size-lg: 1.125rem;--ds-text-body-height-xs: 1rem;--ds-text-body-height-sm: 1.25rem;--ds-text-body-height-default: 1.5rem;--ds-text-body-height-lg: 1.625rem;--ds-color-alert-notification-default: #0074c8;--ds-color-alert-warning-default: #de750c;--ds-color-alert-error-default: #df0b37;--ds-color-alert-success-default: #00805d;--ds-color-alert-advisory-default: #fff0cd;--ds-color-alert-bkg-success-default: #ddf6e8;--ds-color-alert-bkg-error-default: #ffedf1;--ds-color-background-primary-100-default: #ffffff;--ds-color-background-primary-100-inverse: #0e2b4f;--ds-color-background-primary-200-default: #f7f7f7;--ds-color-background-primary-200-inverse: #194069;--ds-color-background-primary-300-default: #e4e8ec;--ds-color-background-primary-300-inverse: #265688;--ds-color-background-primary-400-default: #dddddd;--ds-color-background-primary-400-inverse: #326aa5;--ds-color-background-success-default: #eef8f5;--ds-color-background-success-inverse: #173c30;--ds-color-background-error-default: #fff4f4;--ds-color-background-error-inverse: #74110e;--ds-color-background-warning-default: #fef8e9;--ds-color-background-warning-inverse: #5d4514;--ds-color-background-info-default: #f0f7fd;--ds-color-background-info-inverse: #193d73;--ds-color-background-subtle-default: #f7f8fa;--ds-color-background-subtle-inverse: #2a2a2a;--ds-color-background-accent-default: #ebfafd;--ds-color-background-accent-inverse: #275b72;--ds-color-background-emphasis-default: #c9e0f7;--ds-color-background-emphasis-inverse: #225296;--ds-color-background-scrimmed-default: rgba(0, 0, 0, 0.5);--ds-color-background-lightest: #ffffff;--ds-color-background-lighter: #f7f7f7;--ds-color-background-darker: #01426a;--ds-color-background-darkest: #00274a;--ds-color-background-gradient-default: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5));--ds-color-base-white: #ffffff;--ds-color-base-white-100: rgba(255, 255, 255, 0.03);--ds-color-base-white-200: rgba(255, 255, 255, 0.06);--ds-color-base-white-300: rgba(255, 255, 255, 0.12);--ds-color-base-white-400: rgba(255, 255, 255, 0.25);--ds-color-base-white-500: rgba(255, 255, 255, 0.5);--ds-color-base-white-opacity-50: rgba(255, 255, 255, 0.5);--ds-color-base-white-opacity-40: rgba(255, 255, 255, 0.4);--ds-color-base-white-opacity-0: rgba(255, 255, 255, 0);--ds-color-base-black: #000000;--ds-color-base-black-100: rgba(0, 0, 0, 0.03);--ds-color-base-black-200: rgba(0, 0, 0, 0.06);--ds-color-base-black-300: rgba(0, 0, 0, 0.12);--ds-color-base-black-400: rgba(0, 0, 0, 0.25);--ds-color-base-black-500: rgba(0, 0, 0, 0.5);--ds-color-base-black-opacity-15: rgba(0, 0, 0, 0.15);--ds-color-base-blue-100: #f0f7fd;--ds-color-base-blue-200: #c9e0f7;--ds-color-base-blue-300: #a0c9f1;--ds-color-base-blue-400: #79b2ec;--ds-color-base-blue-500: #5398e6;--ds-color-base-blue-600: #3b7fd2;--ds-color-base-blue-700: #2c67b5;--ds-color-base-blue-800: #225296;--ds-color-base-blue-900: #193d73;--ds-color-base-blue-1000: #102a51;--ds-color-base-cyan-100: #ebfafd;--ds-color-base-cyan-200: #a8e9f7;--ds-color-base-cyan-300: #6ad5ef;--ds-color-base-cyan-400: #56bbde;--ds-color-base-cyan-500: #4aa2c7;--ds-color-base-cyan-600: #3e89aa;--ds-color-base-cyan-700: #32718e;--ds-color-base-cyan-800: #275b72;--ds-color-base-cyan-900: #1d4658;--ds-color-base-cyan-1000: #12303d;--ds-color-base-error-100: #fff4f4;--ds-color-base-error-200: #f9aca6;--ds-color-base-error-300: #f16359;--ds-color-base-error-400: #cc1816;--ds-color-base-error-500: #74110e;--ds-color-base-gray-100: #f7f7f7;--ds-color-base-gray-200: #d4d4d4;--ds-color-base-gray-300: #c5c5c5;--ds-color-base-gray-400: #adadad;--ds-color-base-gray-500: #959595;--ds-color-base-gray-600: #7e7e7e;--ds-color-base-gray-700: #676767;--ds-color-base-gray-800: #525252;--ds-color-base-gray-900: #3d3d3d;--ds-color-base-gray-1000: #2a2a2a;--ds-color-base-green-100: #f3faf7;--ds-color-base-green-200: #000000;--ds-color-base-green-300: #addbca;--ds-color-base-green-400: #7ec6ac;--ds-color-base-green-500: #51ae8c;--ds-color-base-green-600: #459578;--ds-color-base-green-700: #3a7d64;--ds-color-base-green-800: #306854;--ds-color-base-green-900: #285545;--ds-color-base-green-1000: #1f4436;--ds-color-base-lime-100: #f5fbeb;--ds-color-base-lime-200: #d8efb4;--ds-color-base-lime-300: #badd81;--ds-color-base-lime-400: #a2c270;--ds-color-base-lime-500: #8ca761;--ds-color-base-lime-600: #778f53;--ds-color-base-lime-700: #647845;--ds-color-base-lime-800: #53643a;--ds-color-base-lime-900: #44522f;--ds-color-base-lime-1000: #364126;--ds-color-base-navy-100: #f2f7fb;--ds-color-base-navy-200: #cfe0ef;--ds-color-base-navy-300: #acc9e2;--ds-color-base-navy-400: #89b2d4;--ds-color-base-navy-500: #6899c6;--ds-color-base-navy-600: #4a82b7;--ds-color-base-navy-700: #326aa5;--ds-color-base-navy-800: #265688;--ds-color-base-navy-900: #194069;--ds-color-base-navy-1000: #0e2b4f;--ds-color-base-neutral-100: #f7f8fa;--ds-color-base-neutral-200: #e4e8ec;--ds-color-base-neutral-300: #ccd2db;--ds-color-base-neutral-400: #afb9c6;--ds-color-base-neutral-500: #939fad;--ds-color-base-neutral-600: #7e8894;--ds-color-base-neutral-700: #6a717c;--ds-color-base-neutral-800: #585e67;--ds-color-base-neutral-900: #484d55;--ds-color-base-neutral-1000: #393d43;--ds-color-base-pink-100: #fff7f8;--ds-color-base-pink-200: #fde0e6;--ds-color-base-pink-300: #fcc2ce;--ds-color-base-pink-400: #fa9db0;--ds-color-base-pink-500: #f7738e;--ds-color-base-pink-600: #e45472;--ds-color-base-pink-700: #bf475f;--ds-color-base-pink-800: #a03b50;--ds-color-base-pink-900: #833142;--ds-color-base-pink-1000: #692734;--ds-color-base-purple-100: #fbf8fe;--ds-color-base-purple-200: #ede3fd;--ds-color-base-purple-300: #ddc9fb;--ds-color-base-purple-400: #c9a9f8;--ds-color-base-purple-500: #b588f5;--ds-color-base-purple-600: #a268f3;--ds-color-base-purple-700: #8d47f0;--ds-color-base-purple-800: #7633d7;--ds-color-base-purple-900: #622ab2;--ds-color-base-purple-1000: #4e228d;--ds-color-base-red-100: #fef7f5;--ds-color-base-red-200: #fae2da;--ds-color-base-red-300: #f5c7b8;--ds-color-base-red-400: #f0a68d;--ds-color-base-red-500: #e9815e;--ds-color-base-red-600: #e35c2f;--ds-color-base-red-700: #d03a08;--ds-color-base-red-800: #ae3007;--ds-color-base-red-900: #902806;--ds-color-base-red-1000: #732005;--ds-color-base-success-100: #eef8f5;--ds-color-base-success-200: #8eceb9;--ds-color-base-success-300: #40a080;--ds-color-base-success-400: #0b6f4d;--ds-color-base-success-500: #173c30;--ds-color-base-turquoise-100: #f7fafa;--ds-color-base-turquoise-200: #dfe9ea;--ds-color-base-turquoise-300: #c2d5d6;--ds-color-base-turquoise-400: #9fbdbe;--ds-color-base-turquoise-500: #7ba5a6;--ds-color-base-turquoise-600: #5c8f91;--ds-color-base-turquoise-700: #3d7a7d;--ds-color-base-turquoise-800: #21686a;--ds-color-base-turquoise-900: #085659;--ds-color-base-turquoise-1000: #004447;--ds-color-base-yellow-100: #fff9df;--ds-color-base-yellow-200: #ffe87e;--ds-color-base-yellow-300: #f9ce06;--ds-color-base-yellow-400: #d6b622;--ds-color-base-yellow-500: #b49d35;--ds-color-base-yellow-600: #96873e;--ds-color-base-yellow-700: #7c7140;--ds-color-base-yellow-800: #665e3d;--ds-color-base-yellow-900: #524e38;--ds-color-base-yellow-1000: #403d30;--ds-color-base-warning-100: #fef8e9;--ds-color-base-warning-200: #f2c153;--ds-color-base-warning-300: #c49432;--ds-color-base-warning-400: #8e6b22;--ds-color-base-warning-500: #5d4514;--ds-color-state-error-100: #ff999b;--ds-color-state-error-500: #df0b37;--ds-color-state-success-100: #69cf96;--ds-color-state-success-500: #00805d;--ds-color-state-warning-500: #de750c;--ds-color-border-primary-default: #585e67;--ds-color-border-primary-inverse: #afb9c6;--ds-color-border-secondary-default: #939fad;--ds-color-border-secondary-inverse: #7e8894;--ds-color-border-tertiary-default: #dddddd;--ds-color-border-tertiary-inverse: #676767;--ds-color-border-error-default: #cc1816;--ds-color-border-error-inverse: #f9aca6;--ds-color-border-divider-default: rgba(0, 0, 0, 0.12);--ds-color-border-divider-inverse: rgba(255, 255, 255, 0.25);--ds-color-border-subtle-default: #f0f7fd;--ds-color-border-subtle-inverse: #326aa5;--ds-color-border-emphasis-default: #194069;--ds-color-border-emphasis-inverse: #f2f7fb;--ds-color-border-accent-default: #badd81;--ds-color-border-accent-inverse: #a2c270;--ds-color-border-success-default: #0b6f4d;--ds-color-border-success-inverse: #8eceb9;--ds-color-border-warning-default: #c49432;--ds-color-border-warning-inverse: #f2c153;--ds-color-border-info-default: #326aa5;--ds-color-border-info-inverse: #89b2d4;--ds-color-border-ui-default-default: #2c67b5;--ds-color-border-ui-default-inverse: #56bbde;--ds-color-border-ui-hover-default: #193d73;--ds-color-border-ui-hover-inverse: #a8e9f7;--ds-color-border-ui-active-default: #225296;--ds-color-border-ui-active-inverse: #6ad5ef;--ds-color-border-ui-focus-default: #2c67b5;--ds-color-border-ui-focus-inverse: #56bbde;--ds-color-border-ui-disabled-default: #adadad;--ds-color-border-ui-disabled-inverse: #7e7e7e;--ds-color-border-active-default: #0074c8;--ds-color-border-active-inverse: #00cff0;--ds-color-border-disabled-default: #d4d4d4;--ds-color-border-focus-default: #959595;--ds-color-brand-neutral-100: #f7f8fa;--ds-color-brand-neutral-200: #e4e8ec;--ds-color-brand-neutral-300: #ccd2db;--ds-color-brand-neutral-400: #afb9c6;--ds-color-brand-neutral-500: #939fad;--ds-color-brand-neutral-600: #7e8894;--ds-color-brand-neutral-700: #6a717c;--ds-color-brand-neutral-800: #585e67;--ds-color-brand-neutral-900: #484d55;--ds-color-brand-neutral-1000: #393d43;--ds-color-brand-gray-100: #f7f7f7;--ds-color-brand-gray-200: #dddddd;--ds-color-brand-gray-300: #c5c5c5;--ds-color-brand-gray-400: #adadad;--ds-color-brand-gray-500: #959595;--ds-color-brand-gray-600: #7e7e7e;--ds-color-brand-gray-700: #676767;--ds-color-brand-gray-800: #525252;--ds-color-brand-gray-900: #3d3d3d;--ds-color-brand-gray-1000: #2a2a2a;--ds-color-brand-red-100: #fef7f5;--ds-color-brand-red-200: #fae2da;--ds-color-brand-red-300: #f5c7b8;--ds-color-brand-red-400: #f0a68d;--ds-color-brand-red-500: #e9815e;--ds-color-brand-red-600: #e35c2f;--ds-color-brand-red-700: #d03a08;--ds-color-brand-red-800: #ae3007;--ds-color-brand-red-900: #902806;--ds-color-brand-red-1000: #732005;--ds-color-brand-yellow-100: #fff9df;--ds-color-brand-yellow-200: #ffe87e;--ds-color-brand-yellow-300: #f9ce06;--ds-color-brand-yellow-400: #d6b622;--ds-color-brand-yellow-500: #b49d35;--ds-color-brand-yellow-600: #96873e;--ds-color-brand-yellow-700: #7c7140;--ds-color-brand-yellow-800: #665e3d;--ds-color-brand-yellow-900: #524e38;--ds-color-brand-yellow-1000: #403d30;--ds-color-brand-lime-100: #f5fbeb;--ds-color-brand-lime-200: #d8efb4;--ds-color-brand-lime-300: #badd81;--ds-color-brand-lime-400: #a2c270;--ds-color-brand-lime-500: #8ca761;--ds-color-brand-lime-600: #778f53;--ds-color-brand-lime-700: #647845;--ds-color-brand-lime-800: #53643a;--ds-color-brand-lime-900: #44522f;--ds-color-brand-lime-1000: #364126;--ds-color-brand-green-100: #f3faf7;--ds-color-brand-green-200: #d4ece4;--ds-color-brand-green-300: #addbca;--ds-color-brand-green-400: #7ec6ac;--ds-color-brand-green-500: #51ae8c;--ds-color-brand-green-600: #459578;--ds-color-brand-green-700: #3a7d64;--ds-color-brand-green-800: #306854;--ds-color-brand-green-900: #285545;--ds-color-brand-green-1000: #1f4436;--ds-color-brand-turquoise-100: #f7fafa;--ds-color-brand-turquoise-200: #dfe9ea;--ds-color-brand-turquoise-300: #c2d5d6;--ds-color-brand-turquoise-400: #9fbdbe;--ds-color-brand-turquoise-500: #7ba5a6;--ds-color-brand-turquoise-600: #5c8f91;--ds-color-brand-turquoise-700: #3d7a7d;--ds-color-brand-turquoise-800: #21686a;--ds-color-brand-turquoise-900: #085659;--ds-color-brand-turquoise-1000: #004447;--ds-color-brand-cyan-100: #ebfafd;--ds-color-brand-cyan-200: #a8e9f7;--ds-color-brand-cyan-300: #6ad5ef;--ds-color-brand-cyan-400: #56bbde;--ds-color-brand-cyan-500: #4aa2c7;--ds-color-brand-cyan-600: #3e89aa;--ds-color-brand-cyan-700: #32718e;--ds-color-brand-cyan-800: #275b72;--ds-color-brand-cyan-900: #1d4658;--ds-color-brand-cyan-1000: #12303d;--ds-color-brand-blue-100: #f0f7fd;--ds-color-brand-blue-200: #c9e0f7;--ds-color-brand-blue-300: #a0c9f1;--ds-color-brand-blue-400: #79b2ec;--ds-color-brand-blue-500: #5398e6;--ds-color-brand-blue-600: #3b7fd2;--ds-color-brand-blue-700: #2c67b5;--ds-color-brand-blue-800: #225296;--ds-color-brand-blue-900: #193d73;--ds-color-brand-blue-1000: #102a51;--ds-color-brand-navy-100: #f2f7fb;--ds-color-brand-navy-200: #cfe0ef;--ds-color-brand-navy-300: #acc9e2;--ds-color-brand-navy-400: #89b2d4;--ds-color-brand-navy-500: #6899c6;--ds-color-brand-navy-600: #4a82b7;--ds-color-brand-navy-700: #326aa5;--ds-color-brand-navy-800: #265688;--ds-color-brand-navy-900: #194069;--ds-color-brand-navy-1000: #0e2b4f;--ds-color-brand-purple-100: #fbf8fe;--ds-color-brand-purple-200: #ede3fd;--ds-color-brand-purple-300: #ddc9fb;--ds-color-brand-purple-400: #c9a9f8;--ds-color-brand-purple-500: #b588f5;--ds-color-brand-purple-600: #a268f3;--ds-color-brand-purple-700: #8d47f0;--ds-color-brand-purple-800: #7633d7;--ds-color-brand-purple-900: #622ab2;--ds-color-brand-purple-1000: #4e228d;--ds-color-brand-pink-100: #fff7f8;--ds-color-brand-pink-200: #fde0e6;--ds-color-brand-pink-300: #fcc2ce;--ds-color-brand-pink-400: #fa9db0;--ds-color-brand-pink-500: #f7738e;--ds-color-brand-pink-600: #e45472;--ds-color-brand-pink-700: #bf475f;--ds-color-brand-pink-800: #a03b50;--ds-color-brand-pink-900: #833142;--ds-color-brand-pink-1000: #692734;--ds-color-brand-midnight-100: #c1daf0;--ds-color-brand-midnight-200: #569ed7;--ds-color-brand-midnight-300: #156fad;--ds-color-brand-midnight-400: #01426a;--ds-color-brand-midnight-500: #00274a;--ds-color-brand-atlas-100: #cde6ff;--ds-color-brand-atlas-200: #6bb7fb;--ds-color-brand-atlas-300: #2492eb;--ds-color-brand-atlas-400: #0074c8;--ds-color-brand-atlas-500: #054687;--ds-color-brand-atlas-400-opacity-20: rgba(0, 116, 200, 0.2);--ds-color-brand-breeze-100: #c0f7ff;--ds-color-brand-breeze-200: #5de3f7;--ds-color-brand-breeze-300: #00cff0;--ds-color-brand-breeze-400: #099dc5;--ds-color-brand-breeze-500: #0b5575;--ds-color-brand-breeze-300-opacity-30: rgba(0, 207, 240, 0.3);--ds-color-brand-tropical-100: #e2ffcd;--ds-color-brand-tropical-200: #d0fba6;--ds-color-brand-tropical-300: #c0e585;--ds-color-brand-tropical-400: #91be62;--ds-color-brand-tropical-500: #5e8741;--ds-color-brand-alpine-100: #bcaae6;--ds-color-brand-alpine-200: #9e73ea;--ds-color-brand-alpine-300: #8439ef;--ds-color-brand-alpine-400: #631db8;--ds-color-brand-alpine-500: #39115c;--ds-color-brand-flamingo-100: #ffebee;--ds-color-brand-flamingo-200: #ffc0ca;--ds-color-brand-flamingo-300: #ff94a7;--ds-color-brand-flamingo-400: #f65b7b;--ds-color-brand-flamingo-500: #b82b47;--ds-color-brand-canyon-100: #ffcab6;--ds-color-brand-canyon-200: #f99574;--ds-color-brand-canyon-300: #f26135;--ds-color-brand-canyon-400: #de3e09;--ds-color-brand-canyon-500: #b83302;--ds-color-brand-goldcoast-100: #fff0cd;--ds-color-brand-goldcoast-200: #ffdb67;--ds-color-brand-goldcoast-300: #ffd200;--ds-color-brand-goldcoast-400: #e5ad07;--ds-color-brand-goldcoast-500: #b88624;--ds-color-brand-goldgray-100: #c5c1bf;--ds-color-brand-goldgray-200: #726e6c;--ds-color-brand-gold-100: #ccbc94;--ds-color-brand-gold-200: #7f682e;--ds-color-brand-emerald: #139142;--ds-color-brand-sapphire: #015daa;--ds-color-brand-ruby: #a41d4a;--ds-color-brand-lounge: #01426a;--ds-color-brand-loungeplus: #53b390;--ds-color-container-accent-default: #f5fbeb;--ds-color-container-accent-inverse: #badd81;--ds-color-container-emphasis-default: #ebfafd;--ds-color-container-emphasis-inverse: #6ad5ef;--ds-color-container-error-default: #fff4f4;--ds-color-container-error-inverse: #74110e;--ds-color-container-info-default: #f0f7fd;--ds-color-container-info-inverse: #193d73;--ds-color-container-primary-default: #ffffff;--ds-color-container-primary-inverse: #0e2b4f;--ds-color-container-secondary-default: #f7f7f7;--ds-color-container-secondary-inverse: #194069;--ds-color-container-subtle-default: #f7f8fa;--ds-color-container-subtle-inverse: #393d43;--ds-color-container-success-default: #eef8f5;--ds-color-container-success-inverse: #173c30;--ds-color-container-tertiary-default: rgba(0, 0, 0, 0.03);--ds-color-container-tertiary-inverse: rgba(255, 255, 255, 0.06);--ds-color-container-warning-default: #fef8e9;--ds-color-container-warning-inverse: #5d4514;--ds-color-container-ui-primary-active-default: #225296;--ds-color-container-ui-primary-active-inverse: #6ad5ef;--ds-color-container-ui-primary-default-default: #2c67b5;--ds-color-container-ui-primary-default-inverse: #56bbde;--ds-color-container-ui-primary-disabled-default: #a0c9f1;--ds-color-container-ui-primary-disabled-inverse: #275b72;--ds-color-container-ui-primary-focus-default: #2c67b5;--ds-color-container-ui-primary-focus-inverse: #56bbde;--ds-color-container-ui-primary-hover-default: #193d73;--ds-color-container-ui-primary-hover-inverse: #a8e9f7;--ds-color-container-ui-secondary-active-default: #f0f7fd;--ds-color-container-ui-secondary-active-inverse: rgba(255, 255, 255, 0.06);--ds-color-container-ui-secondary-default-default: #ffffff;--ds-color-container-ui-secondary-default-inverse: rgba(255, 255, 255, 0.03);--ds-color-container-ui-secondary-disabled-default: #f7f7f7;--ds-color-container-ui-secondary-disabled-inverse: rgba(255, 255, 255, 0.12);--ds-color-container-ui-secondary-focus-default: #ffffff;--ds-color-container-ui-secondary-focus-inverse: rgba(255, 255, 255, 0.03);--ds-color-container-ui-secondary-hover-default: rgba(0, 0, 0, 0.03);--ds-color-container-ui-secondary-hover-inverse: rgba(255, 255, 255, 0.12);--ds-color-container-ui-tertiary-active-default: rgba(0, 0, 0, 0.06);--ds-color-container-ui-tertiary-active-inverse: rgba(255, 255, 255, 0.06);--ds-color-container-ui-tertiary-default-default: rgba(0, 0, 0, 0.03);--ds-color-container-ui-tertiary-default-inverse: rgba(255, 255, 255, 0.12);--ds-color-container-ui-tertiary-disabled-default: rgba(0, 0, 0, 0.03);--ds-color-container-ui-tertiary-disabled-inverse: rgba(255, 255, 255, 0.25);--ds-color-container-ui-tertiary-focus-default: rgba(0, 0, 0, 0.03);--ds-color-container-ui-tertiary-focus-inverse: rgba(255, 255, 255, 0.12);--ds-color-container-ui-tertiary-hover-default: rgba(0, 0, 0, 0.12);--ds-color-container-ui-tertiary-hover-inverse: rgba(255, 255, 255, 0.25);--ds-color-icon-primary-default: #676767;--ds-color-icon-primary-inverse: #f7f7f7;--ds-color-icon-secondary-default: #7e8894;--ds-color-icon-secondary-inverse: #ccd2db;--ds-color-icon-tertiary-default: #afb9c6;--ds-color-icon-tertiary-inverse: #939fad;--ds-color-icon-emphasis-default: #2a2a2a;--ds-color-icon-emphasis-inverse: #ffffff;--ds-color-icon-accent-default: #a2c270;--ds-color-icon-accent-inverse: #badd81;--ds-color-icon-info-default: #326aa5;--ds-color-icon-info-inverse: #89b2d4;--ds-color-icon-error-default: #cc1816;--ds-color-icon-error-inverse: #f9aca6;--ds-color-icon-warning-default: #c49432;--ds-color-icon-warning-inverse: #f2c153;--ds-color-icon-success-default: #40a080;--ds-color-icon-success-inverse: #8eceb9;--ds-color-icon-subtle-default: #a0c9f1;--ds-color-icon-subtle-inverse: #326aa5;--ds-color-icon-ui-primary-default-default: #2c67b5;--ds-color-icon-ui-primary-default-inverse: #56bbde;--ds-color-icon-ui-primary-hover-default: #193d73;--ds-color-icon-ui-primary-hover-inverse: #a8e9f7;--ds-color-icon-ui-primary-active-default: #225296;--ds-color-icon-ui-primary-active-inverse: #6ad5ef;--ds-color-icon-ui-primary-disabled-default: #adadad;--ds-color-icon-ui-primary-disabled-inverse: #7e7e7e;--ds-color-icon-ui-primary-focus-default: #2c67b5;--ds-color-icon-ui-primary-focus-inverse: #56bbde;--ds-color-icon-ui-secondary-active-default: #676767;--ds-color-icon-ui-secondary-active-inverse: #c5c5c5;--ds-color-icon-ui-secondary-default-default: #7e7e7e;--ds-color-icon-ui-secondary-default-inverse: #adadad;--ds-color-icon-ui-secondary-disabled-default: #adadad;--ds-color-icon-ui-secondary-disabled-inverse: #7e7e7e;--ds-color-icon-ui-secondary-focus-default: #7e7e7e;--ds-color-icon-ui-secondary-focus-inverse: #adadad;--ds-color-icon-ui-secondary-hover-default: #525252;--ds-color-icon-ui-secondary-hover-inverse: #dddddd;--ds-color-icon-brand-red-default: #d03a08;--ds-color-icon-brand-red-inverse: #e9815e;--ds-color-icon-brand-yellow-default: #7c7140;--ds-color-icon-brand-yellow-inverse: #f9ce06;--ds-color-icon-brand-pink-default: #bf475f;--ds-color-icon-brand-pink-inverse: #f7738e;--ds-color-icon-brand-purple-default: #8d47f0;--ds-color-icon-brand-purple-inverse: #b588f5;--ds-color-icon-brand-lime-default: #647845;--ds-color-icon-brand-lime-inverse: #badd81;--ds-color-icon-brand-green-default: #3a7d64;--ds-color-icon-brand-green-inverse: #51ae8c;--ds-color-icon-brand-turquoise-default: #3d7a7d;--ds-color-icon-brand-turquoise-inverse: #7ba5a6;--ds-color-icon-brand-navy-default: #265688;--ds-color-icon-brand-navy-inverse: #6899c6;--ds-color-icon-brand-blue-default: #2c67b5;--ds-color-icon-brand-blue-inverse: #5398e6;--ds-color-icon-brand-cyan-default: #32718e;--ds-color-icon-brand-cyan-inverse: #6ad5ef;--ds-color-icon-brand-gray-default: #676767;--ds-color-icon-brand-gray-inverse: #c5c5c5;--ds-color-icon-brand-neutral-default: #6a717c;--ds-color-icon-brand-neutral-inverse: #afb9c6;--ds-color-icon-disabled-default: rgba(0, 0, 0, 0.15);--ds-color-text-primary-default: #2a2a2a;--ds-color-text-primary-inverse: #ffffff;--ds-color-text-secondary-default: #525252;--ds-color-text-secondary-inverse: #dddddd;--ds-color-text-tertiary-default: #6a717c;--ds-color-text-tertiary-inverse: #adadad;--ds-color-text-error-default: #cc1816;--ds-color-text-error-inverse: #f9aca6;--ds-color-text-emphasis-default: #265688;--ds-color-text-emphasis-inverse: #cfe0ef;--ds-color-text-accent-default: #647845;--ds-color-text-accent-inverse: #badd81;--ds-color-text-info-default: #326aa5;--ds-color-text-info-inverse: #acc9e2;--ds-color-text-subtle-default: #32718e;--ds-color-text-subtle-inverse: #56bbde;--ds-color-text-success-default: #0b6f4d;--ds-color-text-success-inverse: #8eceb9;--ds-color-text-ui-active-default: #225296;--ds-color-text-ui-active-inverse: #6ad5ef;--ds-color-text-ui-default-default: #2c67b5;--ds-color-text-ui-default-inverse: #56bbde;--ds-color-text-ui-disabled-default: #adadad;--ds-color-text-ui-disabled-inverse: #7e7e7e;--ds-color-text-ui-focus-default: #2c67b5;--ds-color-text-ui-focus-inverse: #56bbde;--ds-color-text-ui-hover-default: #193d73;--ds-color-text-ui-hover-inverse: #a8e9f7;--ds-color-text-link-default: #0074c8;--ds-color-text-link-inverse: #00cff0;--ds-color-tier-alaska-mvp-default: #726e6c;--ds-color-tier-alaska-mvp-inverse: #c5c1bf;--ds-color-tier-alaska-mvpgold-default: #7f682e;--ds-color-tier-alaska-mvpgold-inverse: #c5c1bf;--ds-color-tier-alaska-mvpgold75k-default: #7f682e;--ds-color-tier-alaska-mvpgold75k-inverse: #c5c1bf;--ds-color-tier-alaska-mvpgold100k-default: #7f682e;--ds-color-tier-alaska-mvpgold100k-inverse: #c5c1bf;--ds-color-tier-alaska-lounge: #01426a;--ds-color-tier-alaska-loungeplus: #53b390;--ds-color-tier-fare-business-default: #005154;--ds-color-tier-fare-business-inverse: #9fbdbe;--ds-color-tier-fare-economy-default: #2c67b5;--ds-color-tier-fare-economy-inverse: #a0c9f1;--ds-color-tier-fare-first-class-default: #002c4e;--ds-color-tier-fare-first-class-inverse: #89b2d4;--ds-color-tier-fare-saver-default: #4aa2c7;--ds-color-tier-fare-saver-inverse: #a8e9f7;--ds-color-tier-oneworld-emerald: #139142;--ds-color-tier-oneworld-sapphire: #015daa;--ds-color-tier-oneworld-ruby: #a41d4a;--ds-color-ui-default-default: #0074c8;--ds-color-ui-default-inverse: #00cff0;--ds-color-ui-hover-default: #054687;--ds-color-ui-hover-inverse: #5de3f7;--ds-color-ui-active-default: #054687;--ds-color-ui-active-inverse: #5de3f7;--ds-color-ui-disabled-default: rgba(0, 116, 200, 0.2);--ds-color-ui-bkg-default-default: rgba(0, 0, 0, 0.03);--ds-color-ui-bkg-default-inverse: rgba(255, 255, 255, 0.03);--ds-color-ui-bkg-hover-default: rgba(0, 0, 0, 0.06);--ds-color-ui-bkg-hover-inverse: rgba(255, 255, 255, 0.06);--ds-color-utility-blue-default: #79b2ec;--ds-color-utility-blue-inverse: #c9e0f7;--ds-color-utility-cyan-default: #6ad5ef;--ds-color-utility-cyan-inverse: #a8e9f7;--ds-color-utility-green-default: #7ec6ac;--ds-color-utility-green-inverse: #addbca;--ds-color-utility-gray-default: #adadad;--ds-color-utility-gray-inverse: #dddddd;--ds-color-utility-lime-default: #badd81;--ds-color-utility-lime-inverse: #d8efb4;--ds-color-utility-navy-default: #265688;--ds-color-utility-navy-inverse: #acc9e2;--ds-color-utility-neutral-default: #7e8894;--ds-color-utility-neutral-inverse: #ccd2db;--ds-color-utility-pink-default: #f7738e;--ds-color-utility-pink-inverse: #fcc2ce;--ds-color-utility-purple-default: #8d47f0;--ds-color-utility-purple-inverse: #ddc9fb;--ds-color-utility-red-default: #e35c2f;--ds-color-utility-red-inverse: #f0a68d;--ds-color-utility-turquoise-default: #5c8f91;--ds-color-utility-turquoise-inverse: #9fbdbe;--ds-color-utility-yellow-default: #f9ce06;--ds-color-utility-yellow-inverse: #ffe87e;--ds-color-utility-error-default: #cc1816;--ds-color-utility-error-inverse: #f9aca6;--ds-color-utility-warning-default: #f2c153;--ds-color-utility-warning-inverse: #f2c153;--ds-color-utility-success-default: #0b6f4d;--ds-color-utility-success-inverse: #8eceb9}*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}:focus:not(:focus-visible){outline:3px solid transparent}:host{display:inline-block;width:100%;margin:0;padding:0;vertical-align:middle}:host ::slotted(auro-menuoption),:host ::slotted([auro-menuoption]),:host auro-menuoption[loadingplaceholder]{padding-left:calc(var(--ds-size-150, 0.75rem) + 24px + var(--ds-size-100, 0.5rem))}:host ::slotted([selected]){padding-left:0}:host ::slotted(hr){box-sizing:content-box !important;height:0 !important;overflow:visible !important;margin:var(--ds-size-100, 0.5rem) 0 !important;border-width:0 !important;border-top-width:1px !important;border-top-style:solid !important}:host([nocheckmark]) ::slotted(auro-menuoption),:host([nocheckmark]) auro-menuoption[loadingplaceholder]{padding-left:var(--ds-size-200, 1rem)}:host([root]){overflow-y:auto}[loadingplaceholder]{color:var(--ds-color-text-secondary-default, #525252)}[loadingplaceholder].empty{opacity:0;position:absolute}[loadingplaceholder] slot[name=loadingIcon]{vertical-align:middle;line-height:1;display:inline-block}[loadingplaceholder] slot[name=loadingIcon]::slotted(*){margin-right:var(--ds-size-150, 0.75rem)}`;
+
+var colorCss$2 = i$f`:host ::slotted(hr){border-top-color:var(--ds-auro-menu-divider-color) !important}`;
+
+var tokensCss$1 = i$f`:host{--ds-auro-menu-divider-color: var(--ds-color-border-divider-default, $ds-color-border-divider-default);--ds-auro-menuoption-container-color: transparent;--ds-auro-menuoption-icon-color: transparent;--ds-auro-menuoption-text-color: var(--ds-color-text-primary-default, $ds-color-text-primary-default)}`;
+
+// Copyright (c) 2021 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
+// See LICENSE in the project root for license information.
+
+// ---------------------------------------------------------------------
+
+/**
+ * Converts value to an array.
+ * If the value is a JSON string representing an array, it will be parsed.
+ * If the value is already an array, it is returned.
+ * If the value is undefined, it returns undefined.
+ * @private
+ * @param {any} value - The value to be converted. Can be a string, array, or undefined.
+ * @returns {Array|undefined} - The converted array or undefined.
+ * @throws {Error} - Throws an error if the value is not an array, undefined,
+ * or if the value cannot be parsed into an array from a JSON string.
+ */
+function arrayConverter(value) {
+  // Allow undefined
+  if (value === undefined) {
+    return undefined;
+  }
+
+  // Return the value if it is already an array
+  if (Array.isArray(value)) {
+    return value;
+  }
+
+  try {
+    // If value is a JSON string, parse it
+    const parsed = typeof value === 'string' ? JSON.parse(value) : value;
+
+    // Check if the parsed value is an array
+    if (Array.isArray(parsed)) {
+      return parsed;
+    }
+  } catch (error) {
+    // If JSON parsing fails, continue to throw an error below
+    /* eslint-disable no-console */
+    console.error('JSON parsing failed:', error);
+  }
+
+  // Throw error if the input is not an array or undefined
+  throw new Error('Invalid value: Input must be an array or undefined');
+}
+
+/**
+ * Compare two arrays for equality.
+ * @private
+ * @param {Array} arr1 - First array to compare.
+ * @param {Array} arr2 - Second array to compare.
+ * @returns {boolean} True if arrays are equal.
+ */
+function arraysAreEqual(arr1, arr2) {
+  // If both arrays undefined, they are equal (true)
+  if (arr1 === undefined || arr2 === undefined) {
+    return arr1 === arr2;
+  }
+
+  // If arrays have different lengths, they are not equal
+  if (arr1.length !== arr2.length) {
+    return false;
+  }
+
+  // If every item at each index is the same, return true
+  for (let index = 0; index < arr1.length; index += 1) {
+    if (arr1[index] !== arr2[index]) {
+      return false;
+    }
+  }
+  return true;
+}
+
+/**
+ * Compares array for changes.
+ * @private
+ * @param {Array|any} newVal - New value to compare.
+ * @param {Array|any} oldVal - Old value to compare.
+ * @returns {boolean} True if arrays have changed.
+ */
+function arrayOrUndefinedHasChanged(newVal, oldVal) {
+  try {
+    // Check if values are undefined or arrays
+    const isArrayOrUndefined = (val) => val === undefined || Array.isArray(val);
+
+    // If non-array or non-undefined, throw error
+    if (!isArrayOrUndefined(newVal) || !isArrayOrUndefined(oldVal)) {
+      const invalidValue = isArrayOrUndefined(newVal) ? oldVal : newVal;
+      throw new Error(`Value must be an array or undefined, received ${typeof invalidValue}`);
+    }
+
+    // Return true if arrays have changed, false if they are the same
+    return !arraysAreEqual(newVal, oldVal);
+  } catch (error) {
+    /* eslint-disable no-console */
+    console.error(error);
+    // If validation fails, it has changed
+    return true;
+  }
+}
+
+/**
+ * Validates if an option can be interacted with.
+ * @private
+ * @param {HTMLElement} option - The option to check.
+ * @returns {boolean} True if option is interactive.
+ */
+function isOptionInteractive(option) {
+  return !option.hasAttribute('hidden') &&
+         !option.hasAttribute('disabled') &&
+         !option.hasAttribute('static');
+}
+
+/**
+ * Helper method to dispatch custom events.
+ * @param {HTMLElement} element - Element to dispatch event from.
+ * @param {string} eventName - Name of the event to dispatch.
+ * @param {Object} [detail] - Optional detail object to include with the event.
+ */
+function dispatchMenuEvent(element, eventName, detail = null) {
+  const eventConfig = {
+    bubbles: true,
+    cancelable: false,
+    composed: true
+  };
 
-var colorCss$2 = i$b`:host ::slotted(hr){border-top-color:var(--ds-auro-menu-divider-color) !important}`;
+  if (detail !== null) {
+    eventConfig.detail = detail;
+  }
 
-var tokensCss$1 = i$b`:host{--ds-auro-menu-divider-color: var(--ds-color-border-divider-default, $ds-color-border-divider-default);--ds-auro-menuoption-container-color: transparent;--ds-auro-menuoption-icon-color: transparent;--ds-auro-menuoption-text-color: var(--ds-color-text-primary-default, $ds-color-text-primary-default)}`;
+  element.dispatchEvent(new CustomEvent(eventName, eventConfig));
+}
 
 // Copyright (c) 2021 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
 
 
+
 // See https://git.io/JJ6SJ for "How to document your components using JSDoc"
 /**
  * The auro-menu element provides users a way to select from a list of options.
- * @attr {Object} optionSelected - Specifies the current selected menuOption.
- * @attr {String} matchWord - Specifies a string used to highlight matched string parts in options.
- * @attr {Boolean} disabled - When true, the entire menu and all options are disabled;
- * @attr {Boolean} noCheckmark - When true, selected option will not show the checkmark.
- * @attr {Boolean} loading - When true, displays a loading state using the loadingIcon and loadingText slots if provided.
- * @attr {String} value - Value selected for the menu.
- * @prop {Boolean} hasLoadingPlaceholder - Indicates whether the menu has a loadingIcon or loadingText to render when in a loading state.
- * @event auroMenu-selectedOption - Notifies that a new menuoption selection has been made.
- * @event auroMenu-activatedOption - Notifies that a menuoption has been made `active`.
- * @event auroMenu-selectValueFailure - Notifies that a an attempt to select a menuoption by matching a value has failed.
- * @event auroMenu-selectValueReset - Notifies that the component value has been reset.
- * @event auroMenu-customEventFired - Notifies that a custom event has been fired.
- * @event auroMenu-loadingChange - Notifies when the loading attribute is changed.
+ * @attr {Array<HTMLElement>|undefined} optionselected - An array of currently selected menu options. In single-select mode, the array will contain only one HTMLElement. `undefined` when no options are selected.
+ * @attr {object} optionactive - Specifies the current active menuOption.
+ * @attr {string} matchword - Specifies a string used to highlight matched string parts in options.
+ * @attr {boolean} disabled - When true, the entire menu and all options are disabled;
+ * @attr {boolean} nocheckmark - When true, selected option will not show the checkmark.
+ * @attr {boolean} loading - When true, displays a loading state using the loadingIcon and loadingText slots if provided.
+ * @attr {boolean} multiselect - When true, the selected option can be multiple options.
+ * @attr {Array<string>|undefined} value - Value selected for the menu. `undefined` when no selection has been made, otherwise an array of strings. In single-select mode, the array will contain only one value.
+ * @prop {boolean} hasLoadingPlaceholder - Indicates whether the menu has a loadingIcon or loadingText to render when in a loading state.
+ * @event {CustomEvent<Element>} auroMenu-activatedOption - Notifies that a menuoption has been made `active`.
+ * @event {CustomEvent<any>} auroMenu-customEventFired - Notifies that a custom event has been fired.
+ * @event {CustomEvent<{ loading: boolean; hasLoadingPlaceholder: boolean; }>} auroMenu-loadingChange - Notifies when the loading attribute is changed.
+ * @event {CustomEvent<any>} auroMenu-selectValueFailure - Notifies that an attempt to select a menuoption by matching a value has failed.
+ * @event {CustomEvent<any>} auroMenu-selectValueReset - Notifies that the component value has been reset.
+ * @event {CustomEvent<any>} auroMenu-selectedOption - Notifies that a new menuoption selection has been made.
  * @slot loadingText - Text to show while loading attribute is set
  * @slot loadingIcon - Icon to show while loading attribute is set
  * @slot - Slot for insertion of menu options.
@@ -3955,55 +4727,107 @@ var tokensCss$1 = i$b`:host{--ds-auro-menu-divider-color: var(--ds-color-border-
 
 /* eslint-disable no-magic-numbers, max-lines */
 
-class AuroMenu extends r$4 {
+class AuroMenu extends r$9 {
   constructor() {
     super();
+
+    // State properties (reactive)
+
+    // Value of the selected options
     this.value = undefined;
+    // Currently selected option
     this.optionSelected = undefined;
+    // String used for highlighting/filtering
     this.matchWord = undefined;
+    // Hide the checkmark icon on selected options
     this.noCheckmark = false;
+    // Currently active option
     this.optionActive = undefined;
+    // Loading state
     this.loading = false;
+    // Multi-select mode
+    this.multiSelect = false;
+
+    // Event Bindings
 
     /**
      * @private
      */
-    this.rootMenu = true;
+    this.handleKeyDown = this.handleKeyDown.bind(this);
 
     /**
      * @private
      */
-    this.runtimeUtils = new AuroLibraryRuntimeUtils$1();
+    this.handleMouseSelect = this.handleMouseSelect.bind(this);
 
     /**
      * @private
      */
-    this.nestingSpacer = '<span class="nestingSpacer"></span>';
+    this.handleOptionHover = this.handleOptionHover.bind(this);
 
     /**
      * @private
      */
-    this.loadingSlots = null;
+    this.handleSlotChange = this.handleSlotChange.bind(this);
+
+    // Instance properties (non-reactive)
+
+    /**
+     * @private
+     */
+    Object.assign(this, {
+      // Root-level menu (true) or a nested submenu (false)
+      rootMenu: true,
+      // Currently focused/active menu item index
+      index: -1,
+      // Nested menu spacer
+      nestingSpacer: '<span class="nestingSpacer"></span>',
+      // Loading indicator for slot elements
+      loadingSlots: null,
+      // Store for menu items
+      items: [],
+    });
   }
 
   static get properties() {
     return {
-      noCheckmark:    {
+      noCheckmark: {
         type: Boolean,
-        reflect: true
+        reflect: true,
+        attribute: 'nocheckmark'
       },
-      disabled:    {
+      disabled: {
         type: Boolean,
         reflect: true
       },
-      loading:     {
+      loading: {
         type: Boolean,
         reflect: true
       },
-      optionSelected: { type: Object },
-      optionActive:   { type: Object },
-      matchWord:      { type: String },
-      value:          { type: String }
+      optionSelected: {
+        // Allow HTMLElement[] arrays and undefined
+        converter: arrayConverter,
+        hasChanged: arrayOrUndefinedHasChanged
+      },
+      optionActive: {
+        type: Object,
+        attribute: 'optionactive'
+      },
+      matchWord: {
+        type: String,
+        attribute: 'matchword'
+      },
+      multiSelect: {
+        type: Boolean,
+        reflect: true,
+        attribute: 'multiselect'
+      },
+      value: {
+        // Allow string[] arrays and undefined
+        type: Object,
+        converter: arrayConverter,
+        hasChanged: arrayOrUndefinedHasChanged
+      }
     };
   }
 
@@ -4024,201 +4848,331 @@ class AuroMenu extends r$4 {
    *
    */
   static register(name = "auro-menu") {
-    AuroLibraryRuntimeUtils$1.prototype.registerComponent(name, AuroMenu);
+    AuroLibraryRuntimeUtils$2.prototype.registerComponent(name, AuroMenu);
   }
 
-  /**
-   * Passes the noCheckmark attribute to all nested auro-menuoptions.
-   * @private
-   * @returns {void}
-   */
-  handleNoCheckmarkAttr() {
-    if (this.noCheckmark) {
-      const menus = this.querySelectorAll('auro-menu, [auro-menu]');
+  // Lifecycle Methods
 
-      menus.forEach((menu) => {
-        menu.setAttribute('noCheckmark', '');
-      });
+  connectedCallback() {
+    super.connectedCallback();
 
-      const options = this.querySelectorAll('auro-menuoption, [auro-menuoption]');
+    this.addEventListener('keydown', this.handleKeyDown);
+    this.addEventListener('mousedown', this.handleMouseSelect);
+    this.addEventListener('auroMenuOption-mouseover', this.handleOptionHover);
+    this.addEventListener('slotchange', this.handleSlotChange);
+  }
 
-      options.forEach((option) => {
-        option.setAttribute('noCheckmark', '');
-      });
-    }
+  disconnectedCallback() {
+    this.removeEventListener('keydown', this.handleKeyDown);
+    this.removeEventListener('mousedown', this.handleMouseSelect);
+    this.removeEventListener('auroMenuOption-mouseover', this.handleOptionHover);
+    this.removeEventListener('slotchange', this.handleSlotChange);
+
+    super.disconnectedCallback();
   }
 
   firstUpdated() {
-    // Add the tag name as an attribute if it is different than the component name
-    this.runtimeUtils.handleComponentTagRename(this, 'auro-menu');
-
-    this.addEventListener('keydown', this.handleKeyDown);
+    AuroLibraryRuntimeUtils$2.prototype.handleComponentTagRename(this, 'auro-menu');
 
     this.loadingSlots = this.querySelectorAll("[slot='loadingText'], [slot='loadingIcon']");
+    this.initializeMenu();
   }
 
   updated(changedProperties) {
-    if (changedProperties.has('matchWord')) {
-      this.markOptions();
+    if (changedProperties.has('value')) {
+      // Handle null/undefined case
+      if (this.value === undefined || this.value === null) {
+        this.optionSelected = undefined;
+        // Reset index tracking
+        this.index = -1;
+      } else {
+        // Convert single values to arrays
+        const valueArray = Array.isArray(this.value) ? this.value : [this.value];
+
+        // Find all matching options
+        const matchingOptions = this.items.filter((item) => valueArray.includes(item.value));
+
+        if (matchingOptions.length > 0) {
+          if (this.multiSelect) {
+            // For multiselect, keep all matching options
+            this.optionSelected = matchingOptions;
+          } else {
+            // For single select, only use the first match
+            this.optionSelected = [matchingOptions[0]];
+            this.index = this.items.indexOf(matchingOptions[0]);
+          }
+        } else {
+          // No matches found - trigger failure event
+          dispatchMenuEvent(this, 'auroMenu-selectValueFailure');
+          this.optionSelected = undefined;
+          this.index = -1;
+        }
+      }
+
+      // Update UI state
+      this.updateItemsState(new Map([
+        [
+          'optionSelected',
+          true
+        ]
+      ]));
+
+      // Notify of changes
+      if (this.optionSelected !== undefined) {
+        this.notifySelectionChange();
+      }
     }
 
-    if (changedProperties.has('value')) {
-      this.selectByValue(this.value);
+    // Process all other UI updates
+    this.updateItemsState(changedProperties);
+  }
+
+  /**
+   * Updates the UI state and appearance of menu items based on changed properties.
+   * @private
+   * @param {Map<string, boolean>} changedProperties - LitElement's changed properties map.
+   */
+  updateItemsState(changedProperties) {
+    if (!this.items) {
+      return;
+    }
+
+    // Handle noCheckmark propagation to all menus and options
+    if (changedProperties.has('noCheckmark') && this.noCheckmark) {
+      // Update both menus and options
+      this.querySelectorAll('auro-menu, [auro-menu], auro-menuoption, [auro-menuoption]').forEach((element) => element.setAttribute('noCheckmark', ''));
     }
 
-    if (changedProperties.has('disabled')) {
-      const options = Array.from(this.querySelectorAll('auro-menuoption, [auro-menuoption]'));
+    // Regex for matchWord if needed
+    let regexWord = null;
 
-      for (const element of options) {
-        element.disabled = this.disabled;
-      }
+    if (changedProperties.has('matchWord') && this.matchWord && this.matchWord.length) {
+      const escapedWord = this.matchWord.replace(/[.*+?^${}()|[\]\\]/gu, '\\$&');
+      regexWord = new RegExp(escapedWord, 'giu');
     }
 
-    if (changedProperties.has('loading')) {
-      const event = new CustomEvent("auroMenu-loadingChange", {
-        detail: {
-          loading: this.loading,
-          hasLoadingPlaceholder:
-          this.hasLoadingPlaceholder
+    // Handle direct item updates
+    this.items.forEach((option) => {
+      // Update selection if option or value changed
+      if (changedProperties.has('optionSelected') || changedProperties.has('value')) {
+        const isSelected = this.isOptionSelected(option);
+        option.setAttribute('aria-selected', isSelected ? 'true' : 'false');
+
+        // Add/remove selected attribute based on state
+        if (isSelected) {
+          option.setAttribute('selected', '');
+        } else {
+          option.removeAttribute('selected');
         }
+      }
+
+      // Update text highlighting if matchWord changed
+      if (changedProperties.has('matchWord') && regexWord &&
+          isOptionInteractive(option) && !option.hasAttribute('persistent')) {
+        const nested = option.querySelectorAll('.nestingSpacer');
+        // Create nested spacers
+        const nestingSpacerBundle = [...nested].map(() => this.nestingSpacer).join('');
+
+        // Update with spacers and matchWord
+        option.innerHTML = nestingSpacerBundle +
+          option.textContent.replace(
+            regexWord,
+            (match) => `<strong>${match}</strong>`
+          );
+      }
+
+      // Update disabled state
+      if (changedProperties.has('disabled')) {
+        option.disabled = this.disabled;
+      }
+    });
+
+    // Handle loading state changes
+    if (changedProperties.has('loading')) {
+      this.setAttribute("aria-busy", this.loading);
+      dispatchMenuEvent(this, "auroMenu-loadingChange", {
+        loading: this.loading,
+        hasLoadingPlaceholder: this.hasLoadingPlaceholder
       });
-      this.setAttribute("aria-busy", this.hasAttribute("loading"));
-      this.dispatchEvent(event);
     }
   }
 
+  // Init Methods
+
   /**
+   * Initializes the menu's state and structure.
    * @private
-   * @param {Object} option - The menuoption to check for interactive state.
-   * @returns {Boolean} Returns true if the option is interactive.
    */
-  optionInteractive(option) {
-    return !option.hasAttribute('hidden') && !option.hasAttribute('disabled') && !option.hasAttribute('static');
+  initializeMenu() {
+    this.initItems();
+    if (this.rootMenu) {
+      this.setAttribute('role', 'listbox');
+      this.setAttribute('root', '');
+      this.handleNestedMenus(this);
+    }
   }
 
   /**
+   * Initializes menu items and their attributes.
    * @private
-   * @returns {void} When called will update the DOM with visible suggest text matches.
    */
-  markOptions() {
-    if (this.items && this.items.length > 0 && (this.matchWord && this.matchWord.length > 0)) {
-
-      // Escape special regex characters
-      const escapedWord = this.matchWord.replace(/[.*+?^${}()|[\]\\]/gu, '\\$&');
-
-      // Global, case-insensitive, unicode matching regex pattern
-      const regexWord = new RegExp(escapedWord, 'giu');
-
-      this.items.forEach((item) => {
-        if (this.optionInteractive(item) && !item.hasAttribute('persistent')) {
-          const nested = item.querySelectorAll('.nestingSpacer');
-          const nestingSpacerBundle = [...nested].map(() => this.nestingSpacer).join('');
-
-          item.innerHTML = nestingSpacerBundle + item.textContent.replace(regexWord, (match) => `<strong>${match}</strong>`);
-        }
-      });
+  initItems() {
+    this.items = Array.from(this.querySelectorAll('auro-menuoption, [auro-menuoption]'));
+    if (this.noCheckmark) {
+      this.updateItemsState(new Map([
+        [
+          'noCheckmark',
+          true
+        ]
+      ]));
     }
   }
 
+  // Logic Methods
+
   /**
-   * Reset the menu and all options.
+   * Updates menu state when an option is selected.
+   * @private
+   * @param {HTMLElement} option - The option element to select.
    */
-  resetOptionsStates() {
-    this.optionSelected = undefined;
-    if (this.items) {
-      this.items.forEach((item) => {
-        item.classList.remove('active');
-        item.removeAttribute('selected');
-      });
+  handleSelectState(option) {
+    if (this.multiSelect) {
+      const currentValue = this.value || [];
+      const currentSelected = this.optionSelected || [];
+
+      if (!currentValue.includes(option.value)) {
+        this.value = [
+          ...currentValue,
+          option.value
+        ];
+      }
+      if (!currentSelected.includes(option)) {
+        this.optionSelected = [
+          ...currentSelected,
+          option
+        ];
+      }
+    } else {
+      // Single select - use arrays with single values
+      this.value = [option.value];
+      this.optionSelected = [option];
     }
+
+    this.index = this.items.indexOf(option);
   }
 
   /**
-   * Set the attributes on the selected menuoption, the menu value and stored option.
-   * @param {Object} option - The menuoption to be selected.
+   * Deselects a menu option and updates related state.
    * @private
+   * @param {HTMLElement} option - The menuoption to be deselected.
    */
-  handleLocalSelectState(option) {
-    option.setAttribute('selected', '');
-    option.classList.add('active');
-    option.ariaSelected = true;
+  handleDeselectState(option) {
+    if (this.multiSelect && Array.isArray(this.value)) {
+      // Remove this option from array
+      this.value = this.value.filter((val) => val !== option.value);
+
+      // If array is empty after removal, set back to undefined
+      if (this.value.length === 0) {
+        this.value = undefined;
+      }
+
+      this.optionSelected = this.optionSelected.filter((val) => val !== option);
+      if (this.optionSelected.length === 0) {
+        this.optionSelected = undefined;
+      }
+    } else {
+      // For single-select: Back to undefined when deselected
+      this.value = undefined;
+      this.optionSelected = undefined;
+    }
 
-    this.value = option.value;
-    this.optionSelected = option;
+    // Update the index tracking
     this.index = this.items.indexOf(option);
+
+    // Update UI to reflect changes
+    this.updateItemsState(new Map([
+      [
+        'optionSelected',
+        true
+      ]
+    ]));
+
+    // Notify of selection change
+    this.notifySelectionChange();
   }
 
   /**
-   * Notify selection change.
+   * Resets all options to their default state.
    * @private
-   * @return {void}
    */
-  notifySelectionChange() {
-    this.dispatchEvent(new CustomEvent('auroMenu-selectedOption', {
-      bubbles: true,
-      cancelable: false,
-      composed: true,
-    }));
+  clearSelection() {
+    this.optionSelected = undefined;
+    this.value = undefined;
   }
 
   /**
-   * Process actions for making making a menuoption selection.
+   * Resets the menu to its initial state.
+   * This is the only way to return value to undefined.
+   * @public
    */
-  makeSelection() {
-    if (!this.items) {
-      this.initItems();
-    }
+  reset() {
+    // Reset to undefined - initial state
+    this.value = undefined;
+    this.optionSelected = undefined;
+    this.index = -1;
 
-    if (this.items[this.index] && !this.items[this.index].hasAttribute('disabled')) {
-      this.resetOptionsStates();
+    // Reset UI state
+    this.updateItemsState(new Map([
+      [
+        'optionSelected',
+        true
+      ]
+    ]));
 
-      if (this.index >= 0) {
-        const option = this.items[this.index];
+    // Dispatch reset event
+    dispatchMenuEvent(this, 'auroMenu-selectValueReset');
+  }
 
-        // only handle options that are not disabled, hidden or static
-        if (option && this.optionInteractive(option)) {
-          // fire custom event if defined otherwise make selection
-          if (option.hasAttribute('event')) {
-            this.dispatchEvent(new CustomEvent(option.getAttribute('event'), {
-              bubbles: true,
-              cancelable: false,
-              composed: true,
-            }));
+  /**
+   * Handles nested menu structure.
+   * @private
+   * @param {HTMLElement} menu - Root menu element.
+   */
+  handleNestedMenus(menu) {
+    const nestedMenus = menu.querySelectorAll('auro-menu, [auro-menu]');
 
-            this.dispatchEvent(new CustomEvent('auroMenu-customEventFired', {
-              bubbles: true,
-              cancelable: false,
-              composed: true,
-            }));
-          } else {
-            this.handleLocalSelectState(option);
-          }
-        }
+    nestedMenus.forEach((nestedMenu) => {
+      // role="listbox" only allows "role=group" for children.
+      nestedMenu.setAttribute('role', 'group');
+      if (!nestedMenu.hasAttribute('aria-label')) {
+        nestedMenu.setAttribute('aria-label', 'submenu');
       }
-    }
 
-    this.notifySelectionChange();
+      const options = nestedMenu.querySelectorAll(':scope > auro-menuoption, :scope > [auro-menuoption]');
+      options.forEach((option) => {
+        option.innerHTML = this.nestingSpacer + option.innerHTML;
+      });
+
+      this.handleNestedMenus(nestedMenu);
+    });
   }
 
+  // Event Handlers
+
   /**
-   * Manage ArrowDown, ArrowUp and Enter keyboard events.
+   * Handles keyboard navigation.
    * @private
-   * @param {Object} event - Event object from the browser.
+   * @param {KeyboardEvent} event - Event object from the browser.
    */
   handleKeyDown(event) {
     event.preventDefault();
-
-    // With ArrowDown/ArrowUp events, pass new value to selectNextItem()
-    // With Enter event, set value and apply attrs
     switch (event.key) {
       case "ArrowDown":
-        this.selectNextItem('down');
+        this.navigateOptions('down');
         break;
-
       case "ArrowUp":
-        this.selectNextItem('up');
+        this.navigateOptions('up');
         break;
-
       case "Enter":
         this.makeSelection();
         break;
@@ -4226,225 +5180,221 @@ class AuroMenu extends r$4 {
   }
 
   /**
-   * Initializes all menu options in the DOM. This must be re-run every time the options are changed.
+   * Makes a selection based on the current index or clicked option.
    * @private
    */
-  initItems() {
-    this.items = Array.from(this.querySelectorAll('auro-menuoption, [auro-menuoption]'));
-    this.handleNoCheckmarkAttr();
+  makeSelection() {
+    if (!this.items) {
+      this.initItems();
+    }
+
+    // Get currently selected menu option based on index
+    const option = this.items[this.index];
+
+    // Return early if option is not interactive
+    if (!option || !isOptionInteractive(option)) {
+      return;
+    }
+
+    // Handle custom events first
+    if (option.hasAttribute('event')) {
+      this.handleCustomEvent(option);
+      return;
+    }
+
+    if (this.multiSelect) {
+      // In multiselect, toggle individual selections
+      this.toggleOption(option);
+      // In single select, only handle selection of new options
+    } else if (!this.isOptionSelected(option)) {
+      this.clearSelection();
+      this.handleSelectState(option);
+    }
+
+    this.notifySelectionChange();
   }
 
   /**
-   * Sets the index value of the selected item or first non-disabled menuoption.
+   * Toggle the selection state of the menuoption.
    * @private
+   * @param {HTMLElement} option - The menuoption to toggle.
    */
-  getSelectedIndex() {
-    // find the first `selected` and not `disabled`, `hidden` or `static` option
-    const index = this.items.findIndex((option) => option.hasAttribute('selected') && this.optionInteractive(option));
+  toggleOption(option) {
+    const isCurrentlySelected = this.isOptionSelected(option);
 
-    if (index >= 0) {
-      this.index = index;
-      this.makeSelection();
+    if (isCurrentlySelected) {
+      this.handleDeselectState(option);
+    } else if (option.value === undefined || option.value === '') {
+      dispatchMenuEvent(this, 'auroMenu-selectValueFailure');
+    } else {
+      this.handleSelectState(option);
     }
   }
 
   /**
-   * Using value of current this.index evaluates index
-   * of next :focus to set based on array of this.items ignoring items
-   * with disabled attr.
-   *
-   * The event.target is not used as the function needs to know where to go,
-   * versus knowing where it is.
-   * @param {String} moveDirection - Up or Down based on keyboard event.
+   * Handles option selection via mouse.
+   * @private
+   * @param {MouseEvent} event - Event object from the browser.
    */
-  selectNextItem(moveDirection) {
-    if (this.index >= 0) {
-      this.items[this.index].classList.remove('active');
-
-      // calculate which is the selection we should focus next
-      let increment = 0;
-
-      if (moveDirection === 'down') {
-        increment = 1;
-      } else if (moveDirection === 'up') {
-        increment = -1;
-      }
-
-      this.index += increment;
-
-      // keep looping inside the array of options
-      if (this.index > this.items.length - 1) {
-        this.index = 0;
-      } else if (this.index < 0) {
-        this.index = this.items.length - 1;
-      }
-
-      // check if new index is disabled, static or hidden, if so, execute again
-      if (!this.optionInteractive(this.items[this.index])) {
-        this.selectNextItem(moveDirection);
-      } else {
-        // apply focus to new index
-        this.updateActiveOption(this.index);
-      }
-    } else {
-      this.index = 0;
+  handleMouseSelect(event) {
+    if (event.target === this) {
+      return;
+    }
 
-      if (this.items[this.index].hasAttribute('hidden') || this.items[this.index].hasAttribute('disabled')) {
-        this.selectNextItem(moveDirection);
-      } else {
-        this.updateActiveOption(this.index);
-      }
+    const option = event.target.closest('auro-menuoption, [auro-menuoption]');
+    if (option) {
+      this.index = this.items.indexOf(option);
+      this.makeSelection();
     }
   }
 
   /**
-   * Used for applying indentation to each level of nested menu.
+   * Handles option hover events.
    * @private
-   * @param {String} menu - Root level menu object.
+   * @param {CustomEvent} event - Event object from the browser.
    */
-  handleNestedMenus(menu) {
-    const nestedMenus = menu.querySelectorAll('auro-menu, [auro-menu');
+  handleOptionHover(event) {
+    const option = event.target;
+    this.index = this.items.indexOf(option);
+    this.updateActiveOption(this.index);
+  }
 
-    if (nestedMenus.length === 0) {
-      return;
+  /**
+   * Handles slot change events.
+   * @private
+   */
+  handleSlotChange() {
+    if (this.parentElement && this.parentElement.closest('auro-menu, [auro-menu]')) {
+      this.rootMenu = false;
     }
 
-    nestedMenus.forEach((nestedMenu) => {
-      const options = nestedMenu.querySelectorAll(':scope > auro-menuoption, :scope > [auro-menuoption');
-
-      options.forEach((option) => {
-        option.innerHTML = this.nestingSpacer + option.innerHTML;
-      });
-
-      this.handleNestedMenus(nestedMenu);
-    });
+    if (this.rootMenu) {
+      this.initializeMenu();
+    } else if (this.noCheckmark) {
+      this.updateItemsState(new Map([
+        [
+          'noCheckmark',
+          true
+        ]
+      ]));
+    }
   }
 
   /**
-   * Method to apply `selected` attribute to `menuoption` via `value`.
+   * Navigates through options using keyboard.
    * @private
-   * @param {String} value - Must match a unique `menuoption` value.
+   * @param {string} direction - 'up' or 'down'.
    */
-  selectByValue(value) {
-    let valueMatch = false;
-    if (!this.items) {
-      this.initItems();
+  navigateOptions(direction) {
+    // Return early if no items exist
+    if (!this.items || !this.items.length) {
+      return;
     }
 
-    this.index = undefined;
+    let newIndex = this.index;
+    const increment = direction === 'down' ? 1 : -1;
+    const maxIterations = this.items.length;
+    let iterations = 0;
+    let foundInteractiveOption = false;
 
-    if (this.value && this.value.length > 0) {
-      for (let index = 0; index < this.items.length; index += 1) {
-        if (this.items[index].value === value) {
-          valueMatch = true;
-          this.index = index;
-        }
-      }
+    do {
+      newIndex = (newIndex + increment + this.items.length) % this.items.length;
+      iterations += 1;
 
-      if (!valueMatch) {
-        // reset the menu to no selection
-        this.index = undefined;
+      // Check if current option is interactive
+      const currentOption = this.items[newIndex];
+      if (isOptionInteractive(currentOption)) {
+        foundInteractiveOption = true;
+        break;
+      }
 
-        this.dispatchEvent(new CustomEvent('auroMenu-selectValueFailure', {
-          bubbles: true,
-          cancelable: false,
-          composed: true,
-        }));
-      } else {
-        this.makeSelection();
+      // Break if all options were checked
+      if (iterations >= maxIterations) {
+        break;
       }
-    } else {
-      this.resetOptionsStates();
+    } while (iterations < maxIterations);
 
-      this.dispatchEvent(new CustomEvent('auroMenu-selectValueReset', {
-        bubbles: true,
-        cancelable: false,
-        composed: true,
-      }));
+    // Handle the results of the search
+    if (foundInteractiveOption) {
+      // Update only if an interactive option was found
+      this.index = newIndex;
+      this.updateActiveOption(this.index);
+    } else {
+      // All options are disabled or non-interactive
+      // Keep the current index unchanged
+      dispatchMenuEvent(this, 'auroMenu-navigateFailure', {
+        reason: 'No interactive options available',
+        direction,
+        currentIndex: this.index
+      });
     }
   }
 
   /**
-   * Used to make the active state for options follow mouseover.
-   * @param {Number} index - Index of the menuoption that will be made active.
+   * Updates the active option state and dispatches events.
    * @private
+   * @param {number} index - Index of the option to make active.
    */
   updateActiveOption(index) {
-    this.items.forEach((item) => {
-      item.classList.remove('active');
-    });
+    if (!this.items || !this.items[index]) {
+      return;
+    }
+
+    this.items.forEach((item) => item.classList.remove('active'));
     this.items[index].classList.add('active');
     this.optionActive = this.items[index];
 
-    this.dispatchEvent(new CustomEvent('auroMenu-activatedOption', {
-      bubbles: true,
-      cancelable: false,
-      composed: true,
-      detail: this.items[index]
-    }));
+    dispatchMenuEvent(this, 'auroMenu-activatedOption', this.items[index]);
   }
 
   /**
-   * Used to only make a selection when a menuoption is receiving a mousedown event.
-   * @param {Event} evt - Mousedown event.
+   * Handles custom events defined on options.
    * @private
+   * @param {HTMLElement} option - Option with custom event.
    */
-  handleMenuMouseDown(evt) {
-    if (evt.target !== this) {
-      this.makeSelection();
-    }
+  handleCustomEvent(option) {
+    const eventName = option.getAttribute('event');
+    dispatchMenuEvent(this, eventName);
+    dispatchMenuEvent(this, 'auroMenu-customEventFired');
   }
 
   /**
-   * Checks if there are any loading placeholders in the component.
-   *
-   * This getter evaluates the `loadingSlots` collection to determine if it contains any items.
-   * If the size of the collection is greater than zero, it indicates the presence of loading
-   * placeholders, returning true; otherwise, it returns false.
-   *
-   * @getter hasLoadingPlaceholder
-   * @type {boolean}
-   * @returns {boolean} Returns true if loading placeholders exist; false otherwise.
+   * Notifies selection change to parent components.
+   * @private
    */
-  get hasLoadingPlaceholder() {
-    return this.loadingSlots.length > 0;
+  notifySelectionChange() {
+    dispatchMenuEvent(this, 'auroMenu-selectedOption');
   }
 
   /**
-   * Used for @slotchange event on slotted element.
+   * Checks if an option is currently selected.
    * @private
+   * @param {HTMLElement} option - The option to check.
+   * @returns {boolean}
    */
-  handleSlotItems() {
-    // Determine if this is the root of the menu/submenu layout.
-    if (this.parentElement && this.parentElement.closest('auro-menu, [auro-menu]')) {
-      this.rootMenu = false;
+  isOptionSelected(option) {
+    if (!this.optionSelected) {
+      return false;
     }
+    // Always treat as array for both single and multi-select
+    return Array.isArray(this.optionSelected) && this.optionSelected.includes(option);
+  }
 
-    // If this is the root menu (not a nested menu) handle events, states and styling.
-    if (this.rootMenu) {
-      this.initItems();
-      this.setAttribute('role', 'listbox');
-      this.setAttribute('root', '');
-      this.handleNestedMenus(this);
-      this.markOptions();
-      this.index = -1;
-      this.getSelectedIndex();
-
-      this.addEventListener('keydown', this.handleKeyDown);
-      this.addEventListener('mousedown', this.handleMenuMouseDown);
-      this.addEventListener('auroMenuOption-mouseover', (evt) => {
-        this.index = this.items.indexOf(evt.target);
-        this.updateActiveOption(this.index);
-      });
-    } else {
-      // make sure to update all menuoption noCheckmark attributes when the menu is dynamically changed
-      this.handleNoCheckmarkAttr();
-    }
+  /**
+   * Getter for loading placeholder state.
+   * @returns {boolean} - True if loading slots are present and non-empty.
+   */
+  get hasLoadingPlaceholder() {
+    return this.loadingSlots && this.loadingSlots.length > 0;
   }
 
+  /**
+   * Renders the component.
+   * @returns {boolean} - True if loading slots are present and non-empty.
+   */
   render() {
     if (this.loading) {
-      return x$1`
+      return x$2`
         <auro-menuoption disabled loadingplaceholder class="${this.hasLoadingPlaceholder ? '' : 'empty'}">
           <div>
             <slot name="loadingIcon"></slot>
@@ -4453,19 +5403,20 @@ class AuroMenu extends r$4 {
         </auro-menuoption>
       `;
     }
-    return x$1`<slot @slotchange=${this.handleSlotItems}></slot>`;
+
+    return x$2`<slot @slotchange=${this.handleSlotChange}></slot>`;
   }
 }
 
-var styleCss$1 = i$b`:host{display:flex;align-items:center;padding:var(--ds-size-50, 0.25rem) var(--ds-size-200, 1rem) var(--ds-size-50, 0.25rem) 0;cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent}:host slot{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host [auro-icon]{--ds-auro-icon-size: var(--ds-size-300, 1.5rem);margin-right:var(--ds-size-150, 0.75rem);margin-left:var(--ds-size-100, 0.5rem)}:host ::slotted(.nestingSpacer){display:inline-block;width:var(--ds-size-300, 1.5rem)}:host ::slotted(strong){font-weight:700}:host([hidden]){display:none}:host([static]){pointer-events:none}:host([disabled]:hover){cursor:auto}:host([disabled]){user-select:none;pointer-events:none}`;
+var styleCss$1 = i$f`:host{display:flex;align-items:center;padding:var(--ds-size-50, 0.25rem) var(--ds-size-200, 1rem) var(--ds-size-50, 0.25rem) 0;cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent}:host slot{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host [auro-icon]{--ds-auro-icon-size: var(--ds-size-300, 1.5rem);margin-right:var(--ds-size-150, 0.75rem);margin-left:var(--ds-size-100, 0.5rem)}:host ::slotted(.nestingSpacer){display:inline-block;width:var(--ds-size-300, 1.5rem)}:host ::slotted(strong){font-weight:700}:host([hidden]){display:none}:host([static]){pointer-events:none}:host([disabled]:hover){cursor:auto}:host([disabled]){user-select:none;pointer-events:none}`;
 
-var colorCss$1 = i$b`:host{background-color:var(--ds-auro-menuoption-container-color);color:var(--ds-auro-menuoption-text-color)}:host svg{fill:var(--ds-auro-menuoption-icon-color) !important}:host([disabled]){--ds-auro-menuoption-text-color: var(--ds-color-text-ui-disabled-default, #adadad)}:host(:hover),:host(.active){--ds-auro-menuoption-container-color: var(--ds-color-container-ui-secondary-hover-default, rgba(0, 0, 0, 0.03))}:host([selected]){--ds-auro-menuoption-container-color: var(--ds-color-container-ui-primary-default-default, #2c67b5);--ds-auro-menuoption-text-color: var(--ds-color-text-primary-inverse, #ffffff);--ds-auro-menuoption-icon-color: var(--ds-color-icon-emphasis-inverse, #ffffff)}`;
+var colorCss$1 = i$f`:host{background-color:var(--ds-auro-menuoption-container-color);color:var(--ds-auro-menuoption-text-color)}:host svg{fill:var(--ds-auro-menuoption-icon-color) !important}:host([disabled]){--ds-auro-menuoption-text-color: var(--ds-color-text-ui-disabled-default, #adadad)}:host(:hover),:host(.active){--ds-auro-menuoption-container-color: var(--ds-color-container-ui-secondary-hover-default, rgba(0, 0, 0, 0.03))}:host([selected]){--ds-auro-menuoption-container-color: var(--ds-color-container-ui-primary-default-default, #2c67b5);--ds-auro-menuoption-text-color: var(--ds-color-text-primary-inverse, #ffffff);--ds-auro-menuoption-icon-color: var(--ds-color-icon-emphasis-inverse, #ffffff)}:host([selected]):host(.active){--ds-auro-menuoption-container-color: var(--ds-color-container-ui-primary-active-default, #225296)}`;
 
 /**
  * @license
  * Copyright 2018 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
- */const o=o=>o??E$1;
+ */const o=o=>o??E$3;
 
 // Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -4477,7 +5428,7 @@ var colorCss$1 = i$b`:host{background-color:var(--ds-auro-menuoption-container-c
  * @attr {Boolean} hiddenAudible - If present, the component will be hidden from screen readers, but seen visually
  */
 
-class AuroElement extends r$4 {
+class AuroElement extends r$9 {
 
   // function to define props used within the scope of this component
   static get properties() {
@@ -4503,7 +5454,7 @@ class AuroElement extends r$4 {
   }
 }
 
-var error = {"role":"img","color":"currentColor","title":"","desc":"Error alert indicator.","width":"var(--auro-size-lg, var(--ds-size-300, 1.5rem))","height":"var(--auro-size-lg, var(--ds-size-300, 1.5rem))","xmlns":"http://www.w3.org/2000/svg","xmlns_xlink":"http://www.w3.org/1999/xlink","viewBox":"0 0 24 24","path":"/icons","style":"ico_squareLarge","type":"icon","name":"error","category":"alert","deprecated":true,"svg":"<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" aria-labelledby=\"error__desc\" class=\"ico_squareLarge\" data-deprecated=\"true\" role=\"img\" style=\"min-width:var(--auro-size-lg, var(--ds-size-300, 1.5rem));height:var(--auro-size-lg, var(--ds-size-300, 1.5rem));fill:currentColor\" viewBox=\"0 0 24 24\" part=\"svg\"><title/><desc id=\"error__desc\">Error alert indicator.</desc><path d=\"m13.047 5.599 6.786 11.586A1.207 1.207 0 0 1 18.786 19H5.214a1.207 1.207 0 0 1-1.047-1.815l6.786-11.586a1.214 1.214 0 0 1 2.094 0m-1.165.87a.23.23 0 0 0-.085.085L5.419 17.442a.232.232 0 0 0 .203.35h12.756a.234.234 0 0 0 .203-.35L12.203 6.554a.236.236 0 0 0-.321-.084M12 15.5a.75.75 0 1 1 0 1.5.75.75 0 0 1 0-1.5m-.024-6.22c.325 0 .589.261.589.583v4.434a.586.586 0 0 1-.589.583.586.586 0 0 1-.588-.583V9.863c0-.322.264-.583.588-.583\"/></svg>"};
+var error = {"svg":"<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" aria-labelledby=\"error__desc\" class=\"ico_squareLarge\" data-deprecated=\"true\" role=\"img\" style=\"min-width:var(--auro-size-lg, var(--ds-size-300, 1.5rem));height:var(--auro-size-lg, var(--ds-size-300, 1.5rem));fill:currentColor\" viewBox=\"0 0 24 24\" part=\"svg\"><title/><desc id=\"error__desc\">Error alert indicator.</desc><path d=\"m13.047 5.599 6.786 11.586A1.207 1.207 0 0 1 18.786 19H5.214a1.207 1.207 0 0 1-1.047-1.815l6.786-11.586a1.214 1.214 0 0 1 2.094 0m-1.165.87a.23.23 0 0 0-.085.085L5.419 17.442a.232.232 0 0 0 .203.35h12.756a.234.234 0 0 0 .203-.35L12.203 6.554a.236.236 0 0 0-.321-.084M12 15.5a.75.75 0 1 1 0 1.5.75.75 0 0 1 0-1.5m-.024-6.22c.325 0 .589.261.589.583v4.434a.586.586 0 0 1-.589.583.586.586 0 0 1-.588-.583V9.863c0-.322.264-.583.588-.583\"/></svg>"};
 
 /* eslint-disable no-underscore-dangle, jsdoc/no-undefined-types, jsdoc/require-param-description */
 
@@ -4533,7 +5484,7 @@ const cacheFetch = (uri, options = {}) => {
   return _fetchMap.get(uri);
 };
 
-var styleCss = i$b`*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock,:host{display:block}.util_displayFlex{display:flex}.util_displayHidden,:host([hidden]:not(:focus):not(:active)){display:none}.util_displayHiddenVisually,:host([hiddenVisually]:not(:focus):not(:active)){position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}.ico_squareLarge{fill:currentColor;height:var(--auro-size-lg, var(--ds-size-300, 1.5rem))}.ico_squareSmall{fill:currentColor;height:.6rem}.ico_squareMed{fill:currentColor;height:var(--auro-size-md, var(--ds-size-200, 1rem))}.ico_squareSml{fill:currentColor;height:var(--auro-size-sm, var(--ds-size-150, 0.75rem))}:host{color:currentColor;vertical-align:middle;line-height:1;display:inline-block}:host .logo{color:var(--ds-color-brand-midnight-400, #01426a)}svg{min-width:var(--ds-auro-icon-size, 1.5rem) !important;width:var(--ds-auro-icon-size, 1.5rem) !important;height:var(--ds-auro-icon-size, 1.5rem) !important}.label{display:flex;align-items:flex-start}.label svg{margin:0 var(--ds-size-50, 0.25rem)}.wrapper{height:var(--ds-auro-icon-size);width:var(--ds-auro-icon-size)}.labelContainer{line-height:1.8}`;
+var styleCss = i$f`*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock,:host{display:block}.util_displayFlex{display:flex}.util_displayHidden,:host([hidden]:not(:focus):not(:active)){display:none}.util_displayHiddenVisually,:host([hiddenVisually]:not(:focus):not(:active)){position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}.ico_squareLarge{fill:currentColor;height:var(--auro-size-lg, var(--ds-size-300, 1.5rem))}.ico_squareSmall{fill:currentColor;height:.6rem}.ico_squareMed{fill:currentColor;height:var(--auro-size-md, var(--ds-size-200, 1rem))}.ico_squareSml{fill:currentColor;height:var(--auro-size-sm, var(--ds-size-150, 0.75rem))}:host{color:currentColor;vertical-align:middle;line-height:1;display:inline-block}:host .logo{color:var(--ds-color-brand-midnight-400, #01426a)}svg{min-width:var(--ds-auro-icon-size, 1.5rem) !important;width:var(--ds-auro-icon-size, 1.5rem) !important;height:var(--ds-auro-icon-size, 1.5rem) !important}.label{display:flex;align-items:flex-start}.label svg{margin:0 var(--ds-size-50, 0.25rem)}.wrapper{height:var(--ds-auro-icon-size);width:var(--ds-auro-icon-size)}.labelContainer{line-height:1.8}`;
 
 // Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -4572,7 +5523,7 @@ class BaseIcon extends AuroElement {
   }
 
   static get styles() {
-    return i$b`
+    return i$f`
       ${styleCss}
     `;
   }
@@ -4614,9 +5565,9 @@ class BaseIcon extends AuroElement {
   }
 }
 
-var tokensCss = i$b`:host{--ds-auro-icon-color: var(--ds-color-icon-primary-default, $ds-color-icon-primary-default);--ds-auro-icon-size: var(--ds-size-300, $ds-size-300)}`;
+var tokensCss = i$f`:host{--ds-auro-icon-color: var(--ds-color-icon-primary-default, $ds-color-icon-primary-default);--ds-auro-icon-size: var(--ds-size-300, $ds-size-300)}`;
 
-var colorCss = i$b`:host{color:var(--ds-auro-icon-color)}:host([customColor]){color:inherit}:host(:not([onDark])[accent]){--ds-auro-icon-color: var(--ds-color-icon-accent-default, #a2c270)}:host(:not([onDark])[disabled]){--ds-auro-icon-color: var(--ds-color-icon-ui-primary-disabled-default, #adadad)}:host(:not([onDark])[emphasis]){--ds-auro-icon-color: var(--ds-color-icon-emphasis-default, #2a2a2a)}:host(:not([onDark])[error]){--ds-auro-icon-color: var(--ds-color-icon-error-default, #cc1816)}:host(:not([onDark])[info]){--ds-auro-icon-color: var(--ds-color-icon-info-default, #326aa5)}:host(:not([onDark])[secondary]){--ds-auro-icon-color: var(--ds-color-icon-secondary-default, #7e8894)}:host(:not([onDark])[subtle]){--ds-auro-icon-color: var(--ds-color-icon-subtle-default, #a0c9f1)}:host(:not([onDark])[success]){--ds-auro-icon-color: var(--ds-color-icon-success-default, #40a080)}:host(:not([onDark])[tertiary]){--ds-auro-icon-color: var(--ds-color-icon-tertiary-default, #afb9c6)}:host(:not([onDark])[warning]){--ds-auro-icon-color: var(--ds-color-icon-warning-default, #c49432)}:host([onDark]){--ds-auro-icon-color: var(--ds-color-icon-primary-inverse, #f7f7f7)}:host([onDark][accent]){--ds-auro-icon-color: var(--ds-color-icon-accent-inverse, #badd81)}:host([onDark][disabled]){--ds-auro-icon-color: var(--ds-color-icon-ui-primary-disabled-inverse, #7e7e7e)}:host([onDark][emphasis]){--ds-auro-icon-color: var(--ds-color-icon-emphasis-inverse, #ffffff)}:host([onDark][error]){--ds-auro-icon-color: var(--ds-color-icon-error-inverse, #f9aca6)}:host([onDark][info]){--ds-auro-icon-color: var(--ds-color-icon-info-inverse, #89b2d4)}:host([onDark][secondary]){--ds-auro-icon-color: var(--ds-color-icon-secondary-inverse, #ccd2db)}:host([onDark][subtle]){--ds-auro-icon-color: var(--ds-color-icon-subtle-inverse, #326aa5)}:host([onDark][success]){--ds-auro-icon-color: var(--ds-color-icon-success-inverse, #8eceb9)}:host([onDark][tertiary]){--ds-auro-icon-color: var(--ds-color-icon-tertiary-inverse, #939fad)}:host([onDark][warning]){--ds-auro-icon-color: var(--ds-color-icon-warning-inverse, #f2c153)}`;
+var colorCss = i$f`:host{color:var(--ds-auro-icon-color)}:host([customColor]){color:inherit}:host(:not([onDark])[accent]){--ds-auro-icon-color: var(--ds-color-icon-accent-default, #a2c270)}:host(:not([onDark])[disabled]){--ds-auro-icon-color: var(--ds-color-icon-ui-primary-disabled-default, #adadad)}:host(:not([onDark])[emphasis]){--ds-auro-icon-color: var(--ds-color-icon-emphasis-default, #2a2a2a)}:host(:not([onDark])[error]){--ds-auro-icon-color: var(--ds-color-icon-error-default, #cc1816)}:host(:not([onDark])[info]){--ds-auro-icon-color: var(--ds-color-icon-info-default, #326aa5)}:host(:not([onDark])[secondary]){--ds-auro-icon-color: var(--ds-color-icon-secondary-default, #7e8894)}:host(:not([onDark])[subtle]){--ds-auro-icon-color: var(--ds-color-icon-subtle-default, #a0c9f1)}:host(:not([onDark])[success]){--ds-auro-icon-color: var(--ds-color-icon-success-default, #40a080)}:host(:not([onDark])[tertiary]){--ds-auro-icon-color: var(--ds-color-icon-tertiary-default, #afb9c6)}:host(:not([onDark])[warning]){--ds-auro-icon-color: var(--ds-color-icon-warning-default, #c49432)}:host([onDark]){--ds-auro-icon-color: var(--ds-color-icon-primary-inverse, #f7f7f7)}:host([onDark][accent]){--ds-auro-icon-color: var(--ds-color-icon-accent-inverse, #badd81)}:host([onDark][disabled]){--ds-auro-icon-color: var(--ds-color-icon-ui-primary-disabled-inverse, #7e7e7e)}:host([onDark][emphasis]){--ds-auro-icon-color: var(--ds-color-icon-emphasis-inverse, #ffffff)}:host([onDark][error]){--ds-auro-icon-color: var(--ds-color-icon-error-inverse, #f9aca6)}:host([onDark][info]){--ds-auro-icon-color: var(--ds-color-icon-info-inverse, #89b2d4)}:host([onDark][secondary]){--ds-auro-icon-color: var(--ds-color-icon-secondary-inverse, #ccd2db)}:host([onDark][subtle]){--ds-auro-icon-color: var(--ds-color-icon-subtle-inverse, #326aa5)}:host([onDark][success]){--ds-auro-icon-color: var(--ds-color-icon-success-inverse, #8eceb9)}:host([onDark][tertiary]){--ds-auro-icon-color: var(--ds-color-icon-tertiary-inverse, #939fad)}:host([onDark][warning]){--ds-auro-icon-color: var(--ds-color-icon-warning-inverse, #f2c153)}`;
 
 // Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -4678,7 +5629,7 @@ class AuroIcon extends BaseIcon {
     this.success = false;
     this.tertiary = false;
     this.warning = false;
-    this.runtimeUtils = new AuroLibraryRuntimeUtils$1();
+    this.runtimeUtils = new AuroLibraryRuntimeUtils$2();
   }
 
   // function to define props used within the scope of this component
@@ -4760,9 +5711,9 @@ class AuroIcon extends BaseIcon {
   static get styles() {
     return [
       super.styles,
-      i$b`${tokensCss}`,
-      i$b`${styleCss}`,
-      i$b`${colorCss}`
+      i$f`${tokensCss}`,
+      i$f`${styleCss}`,
+      i$f`${colorCss}`
     ];
   }
 
@@ -4775,7 +5726,7 @@ class AuroIcon extends BaseIcon {
    *
    */
   static register(name = "auro-icon") {
-    AuroLibraryRuntimeUtils$1.prototype.registerComponent(name, AuroIcon);
+    AuroLibraryRuntimeUtils$2.prototype.registerComponent(name, AuroIcon);
   }
 
   connectedCallback() {
@@ -4804,20 +5755,20 @@ class AuroIcon extends BaseIcon {
       'wrapper': true,
     };
 
-    return x$1`
+    return x$2`
       <div
-        class="${e$5(classes)}"
+        class="${e$8(classes)}"
         title="${o(this.title || undefined)}">
         <span aria-hidden="${o(this.ariaHidden ? this.ariaHidden : true)}" part="svg">
-          ${this.customSvg ? x$1`
+          ${this.customSvg ? x$2`
               <slot name="svg"></slot>
-            ` : x$1`
+            ` : x$2`
               ${this.svg}
             `
           }
         </span>
 
-        <div class="${e$5(a11y)}">
+        <div class="${e$8(a11y)}">
           <slot></slot>
         </div>
       </div>
@@ -4827,7 +5778,7 @@ class AuroIcon extends BaseIcon {
 
 var iconVersion = '6.1.2';
 
-var checkmarkIcon = {"role":"img","color":"currentColor","title":"","desc":"a small check mark.","width":"var(--auro-size-lg, var(--ds-size-300, 1.5rem))","height":"var(--auro-size-lg, var(--ds-size-300, 1.5rem))","xmlns":"http://www.w3.org/2000/svg","xmlns_xlink":"http://www.w3.org/1999/xlink","viewBox":"0 0 24 24","path":"/icons","style":"ico_squareLarge","type":"icon","name":"checkmark-sm","category":"interface","svg":"<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" aria-labelledby=\"checkmark-sm__desc\" class=\"ico_squareLarge\" role=\"img\" style=\"min-width:var(--auro-size-lg, var(--ds-size-300, 1.5rem));height:var(--auro-size-lg, var(--ds-size-300, 1.5rem));fill:currentColor\" viewBox=\"0 0 24 24\" part=\"svg\"><title/><desc id=\"checkmark-sm__desc\">a small check mark.</desc><path d=\"M8.461 11.84a.625.625 0 1 0-.922.844l2.504 2.738c.247.27.674.27.922 0l5.496-6a.625.625 0 1 0-.922-.844l-5.035 5.496z\"/></svg>"};
+var checkmarkIcon = {"svg":"<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" aria-labelledby=\"checkmark-sm__desc\" class=\"ico_squareLarge\" role=\"img\" style=\"min-width:var(--auro-size-lg, var(--ds-size-300, 1.5rem));height:var(--auro-size-lg, var(--ds-size-300, 1.5rem));fill:currentColor\" viewBox=\"0 0 24 24\" part=\"svg\"><title/><desc id=\"checkmark-sm__desc\">a small check mark.</desc><path d=\"M8.461 11.84a.625.625 0 1 0-.922.844l2.504 2.738c.247.27.674.27.922 0l5.496-6a.625.625 0 1 0-.922-.844l-5.035 5.496z\"/></svg>"};
 
 // Copyright (c) 2021 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -4843,7 +5794,7 @@ var checkmarkIcon = {"role":"img","color":"currentColor","title":"","desc":"a sm
  * @event auroMenuOption-mouseover - Notifies that this option has been hovered over.
  * @slot - Specifies text for an option, but is not the value.
  */
-class AuroMenuOption extends r$4 {
+class AuroMenuOption extends r$9 {
   constructor() {
     super();
 
@@ -4865,7 +5816,7 @@ class AuroMenuOption extends r$4 {
     /**
      * @private
      */
-    this.runtimeUtils = new AuroLibraryRuntimeUtils$1();
+    this.runtimeUtils = new AuroLibraryRuntimeUtils$2();
   }
 
   static get properties() {
@@ -4909,7 +5860,7 @@ class AuroMenuOption extends r$4 {
    *
    */
   static register(name = "auro-menuoption") {
-    AuroLibraryRuntimeUtils$1.prototype.registerComponent(name, AuroMenuOption);
+    AuroLibraryRuntimeUtils$2.prototype.registerComponent(name, AuroMenuOption);
   }
 
   firstUpdated() {
@@ -4949,11 +5900,11 @@ class AuroMenuOption extends r$4 {
 
     svg.setAttribute('slot', 'svg');
 
-    return u$3`<${this.iconTag} customColor customSvg slot="icon">${svg}</${this.iconTag}>`;
+    return u$5`<${this.iconTag} customColor customSvg slot="icon">${svg}</${this.iconTag}>`;
   }
 
   render() {
-    return u$3`
+    return u$5`
       ${this.selected && !this.nocheckmark ? this.generateIconHtml(checkmarkIcon.svg) : undefined}
       <slot></slot>
     `;