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

package/components/select/dist/index.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$8=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$8.get(s)),void 0===t&&((this.o=t=new CSSStyleSheet).replaceSync(this.cssText),e&&o$8.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$8=globalThis,e$d=t$8.ShadowRoot&&(void 0===t$8.ShadyCSS||t$8.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,s$8=Symbol(),o$c=new WeakMap;let n$b = class n{constructor(t,e,o){if(this._$cssResult$=true,o!==s$8)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$d&&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$b("string"==typeof t?t:t+"",void 0,s$8),i$g=(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$b(o,t,s$8)},S$6=(s,o)=>{if(e$d)s.adoptedStyleSheets=o.map((t=>t instanceof CSSStyleSheet?t:t.styleSheet));else for(const e of o){const o=document.createElement("style"),n=t$8.litNonce;void 0!==n&&o.setAttribute("nonce",n),o.textContent=e.cssText,s.appendChild(o);}},c$9=e$d?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$7,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$7(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$f,defineProperty:e$c,getOwnPropertyDescriptor:r$b,getOwnPropertyNames:h$6,getOwnPropertySymbols:o$b,getPrototypeOf:n$a}=Object,a$8=globalThis,c$8=a$8.trustedTypes,l$8=c$8?c$8.emptyScript:"",p$6=a$8.reactiveElementPolyfillSupport,d$6=(t,s)=>t,u$8={toAttribute(t,s){switch(s){case Boolean:t=t?l$8: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$f(t,s),y$6={attribute:true,type:String,converter:u$8,reflect:false,hasChanged:f$6};Symbol.metadata??=Symbol("metadata"),a$8.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$6){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$c(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$6}static _$Ei(){if(this.hasOwnProperty(d$6("elementProperties")))return;const t=n$a(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$8).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$8;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$8.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$6="?"+h$2,n$5=`<${o$6}>`,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$6)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$7=globalThis,i$e=t$7.trustedTypes,s$7=i$e?i$e.createPolicy("lit-html",{createHTML:t=>t}):void 0,e$b="$lit$",h$5=`lit$${Math.random().toFixed(9).slice(2)}$`,o$a="?"+h$5,n$9=`<${o$a}>`,r$a=document,l$7=()=>r$a.createComment(""),c$7=t=>null===t||"object"!=typeof t&&"function"!=typeof t,a$7=Array.isArray,u$7=t=>a$7(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$5=t=>(i,...s)=>({_$litType$:t,strings:i,values:s}),x$3=y$5(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$7(t)||!t.hasOwnProperty("raw"))throw Error("invalid template strings array");return void 0!==s$7?s$7.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$9:d>=0?(o.push(a),s.slice(0,d)+e$b+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$b)){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$e?i$e.emptyScript:"";for(let i=0;i<s;i++)r.append(t[i],l$7()),C$3.nextNode(),d.push({type:2,index:++c});r.append(t[s],l$7());}}}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$7(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$7(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$7()),this.O(l$7()),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$7.litHtmlPolyfillSupport;j$3?.(N$3,R$3),(t$7.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$7(),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$d=globalThis.litElementPolyfillSupport;i$d?.({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$6={ATTRIBUTE:1},e$a=t=>(...e)=>({_$litDirective$:t,values:e});let i$c = 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$9=e$a(class extends i$c{constructor(t){if(super(t),t.type!==t$6.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$5=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$5(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$6=Symbol.for(""),o$9=t=>{if(t?.r===a$6)return t?._$litStatic$},s$6=t=>({_$litStatic$:t,r:a$6}),i$b=(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$6}),l$6=new Map,n$8=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$6.get(t))&&(n.raw=n,l$6.set(t,r=n)),e=u;}return t(r,...e)},u$6=n$8(x$3);
 
 // 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$5=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$3 = 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$3();
   }
 
   /**
@@ -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);
       }
     }
 
@@ -373,7 +429,7 @@ class AuroFormValidation {
 // See LICENSE in the project root for license information.
 
 
-let AuroDependencyVersioning$1 = class AuroDependencyVersioning {
+let AuroDependencyVersioning$2 = class AuroDependencyVersioning {
 
   /**
    * Generates a unique string to be used for child auro element naming.
@@ -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$b`${s$6(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$1=/-->/g,_$1$1=/>/g,m$1$1=RegExp(`>|${d$3}(?:([^\\s"'>=/]+)(${d$3}*=${d$3}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,"g"),p$3=/'/g,g$1$1=/"/g,$$1$1=/^(?:script|style|textarea|title)$/i,y$3=t=>(i,...s)=>({_$litType$:t,strings:i,values:s}),x$1=y$3(1),T$1$1=Symbol.for("lit-noChange"),E$1$1=Symbol.for("lit-nothing"),A$1$1=new WeakMap,C$1$1=r$7.createTreeWalker(r$7,129);function P$1$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$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$1:void 0!==u[1]?c=_$1$1:void 0!==u[2]?($$1$1.test(u[2])&&(r=RegExp("</"+u[2],"g")),c=m$1$1):void 0!==u[3]&&(c=m$1$1):c===m$1$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$1:'"'===u[3]?g$1$1:p$3):c===g$1$1||c===p$3?c=m$1$1:c===v$1$1||c===_$1$1?c=f$3:(c=m$1$1,r=void 0);const x=c===m$1$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$1(t,l+(t[s]||"<?>")+(2===i?"</svg>":3===i?"</math>":"")),o]};let N$1$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$1(t,s);if(this.el=N.createElement(f,n),C$1$1.currentNode=this.el.content,2===s||3===s){const t=this.el.content.firstChild;t.replaceWith(...t.childNodes);}for(;null!==(r=C$1$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$1:"?"===e[1]?I$1$1:"@"===e[1]?L$1$1:k$1$1}),r.removeAttribute(t);}else t.startsWith(h$3)&&(d.push({type:6,index:c}),r.removeAttribute(t));if($$1$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$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$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$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$1.currentNode=e;let h=C$1$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$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$1(h,this,t)),this._$AV.push(i),l=s[++n];}o!==l?.index&&(h=C$1$1.nextNode(),o++);}return C$1$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$1 = class R{get _$AU(){return this._$AM?._$AU??this._$Cv}constructor(t,i,s,e){this.type=2,this._$AH=E$1$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$1||null==t||""===t?(this._$AH!==E$1$1&&this._$AR(),this._$AH=E$1$1):t!==this._$AH&&t!==T$1$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$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$1.createElement(P$1$1(s.h,s.h[0]),this.options)),s);if(this._$AH?._$AD===e)this._$AH.p(i);else {const t=new M$1$1(e,this),s=t.u(this.options);t.p(i),this.T(s),this._$AH=t;}}_$AC(t){let i=A$1$1.get(t.strings);return void 0===i&&A$1$1.set(t.strings,i=new N$1$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$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$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$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$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$1&&(r=this._$AH[n]),o||=!c$5(r)||r!==this._$AH[n],r===E$1$1?t=E$1$1:t!==E$1$1&&(t+=(r??"")+h[n+1]),this._$AH[n]=r;}o&&!e&&this.j(t);}j(t){t===E$1$1?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,t??"");}};let H$1$1 = class H extends k$1$1{constructor(){super(...arguments),this.type=3;}j(t){this.element[this.name]=t===E$1$1?void 0:t;}};let I$1$1 = class I extends k$1$1{constructor(){super(...arguments),this.type=4;}j(t){this.element.toggleAttribute(this.name,!!t&&t!==E$1$1);}};let L$1$1 = class L extends k$1$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$1)===T$1$1)return;const s=this._$AH,e=t===E$1$1&&s!==E$1$1||t.capture!==s.capture||t.once!==s.once||t.passive!==s.passive,h=t!==E$1$1&&(s===E$1$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$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$1=t$4.litHtmlPolyfillSupport;j$1$1?.(N$1$1,R$1$1),(t$4.litHtmlVersions??=[]).push("3.2.1");const B$1$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$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$2=Symbol(),o$5=new WeakMap;let n$4 = class n{constructor(t,e,o){if(this._$cssResult$=true,o!==s$2$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$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$2),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$2)},S$2$1=(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$1,getOwnPropertySymbols:o$4$2,getPrototypeOf:n$3$2}=Object,a$2$2=globalThis,c$3$1=a$2$2.trustedTypes,l$2$2=c$3$1?c$3$1.emptyScript:"",p$2$1=a$2$2.reactiveElementPolyfillSupport,d$2$1=(t,s)=>t,u$2$2={toAttribute(t,s){switch(s){case Boolean:t=t?l$2$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$2$1=(t,s)=>!i$6(t,s),y$2={attribute:true,type:String,converter:u$2$2,reflect:false,hasChanged:f$2$1};Symbol.metadata??=Symbol("metadata"),a$2$2.litPropertyMetadata??=new WeakMap;let b$1$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$1("elementProperties")))return;const t=n$3$2(this);t.finalize(),void 0!==t.l&&(this.l=[...t.l]),this.elementProperties=new Map(t.elementProperties);}static finalize(){if(this.hasOwnProperty(d$2$1("finalized")))return;if(this.finalized=true,this._$Ei(),this.hasOwnProperty(d$2$1("properties"))){const t=this.properties,s=[...h$2$1(t),...o$4$2(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$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$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$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$2$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$1$1.elementStyles=[],b$1$1.shadowRootOptions={mode:"open"},b$1$1[d$2$1("elementProperties")]=new Map,b$1$1[d$2$1("finalized")]=new Map,p$2$1?.({ReactiveElement:b$1$1}),(a$2$2.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$1 = class r extends b$1$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$1(s,this.renderRoot,this.renderOptions);}connectedCallback(){super.connectedCallback(),this._$Do?.setConnected(true);}disconnectedCallback(){super.disconnectedCallback(),this._$Do?.setConnected(false);}render(){return T$1$1}};r$4$1._$litElement$=true,r$4$1["finalized"]=true,globalThis.litElementHydrateSupport?.({LitElement:r$4$1});const i$5$2=globalThis.litElementPolyfillSupport;i$5$2?.({LitElement:r$4$1});(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);
     }
   }
 }
@@ -2398,7 +2494,7 @@ class AuroFloatingUI {
 // See LICENSE in the project root for license information.
 
 
-class AuroDependencyVersioning {
+let AuroDependencyVersioning$1 = class AuroDependencyVersioning {
 
   /**
    * Generates a unique string to be used for child auro element naming.
@@ -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 {});
@@ -2432,26 +2528,26 @@ class AuroDependencyVersioning {
 
     return tag;
   }
-}
+};
 
 /**
  * @license
  * 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$2={ATTRIBUTE:1},e$4$2=t=>(...e)=>({_$litDirective$:t,values:e});let i$4$2 = 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$2=e$4$2(class extends i$4$2{constructor(t){if(super(t),t.type!==t$2$2.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$1}});
 
 /**
  * @license
  * Copyright 2018 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
- */const o=o=>o??E;
+ */const o$3$2=o=>o??E$1$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
  */
 
-class AuroElement extends r {
+let AuroElement$1 = class AuroElement extends r$4$1 {
 
   // function to define props used within the scope of this component
   static get properties() {
@@ -2487,13 +2583,13 @@ class AuroElement extends r {
 
     return 'false'
   }
-}
+};
 
-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$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 */
 
-const _fetchMap = new Map();
+const _fetchMap$1 = new Map();
 
 /**
  * A callback to parse Response body.
@@ -2511,15 +2607,15 @@ const _fetchMap = new Map();
  * @param {ResponseParser} [options.responseParser=(response) => response.text()]
  * @returns {Promise}
  */
-const cacheFetch = (uri, options = {}) => {
+const cacheFetch$1 = (uri, options = {}) => {
   const responseParser = options.responseParser || ((response) => response.text());
-  if (!_fetchMap.has(uri)) {
-    _fetchMap.set(uri, fetch(uri).then(responseParser));
+  if (!_fetchMap$1.has(uri)) {
+    _fetchMap$1.set(uri, fetch(uri).then(responseParser));
   }
-  return _fetchMap.get(uri);
+  return _fetchMap$1.get(uri);
 };
 
-var styleCss$2 = 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.
@@ -2532,7 +2628,7 @@ var styleCss$2 = i$3`*,*:before,*:after{box-sizing:border-box}@media(prefers-red
  */
 
 // build the component class
-class BaseIcon extends AuroElement {
+let BaseIcon$1 = class BaseIcon extends AuroElement$1 {
   constructor() {
     super();
     this.onDark = false;
@@ -2558,8 +2654,8 @@ class BaseIcon extends AuroElement {
   }
 
   static get styles() {
-    return i$3`
-      ${styleCss$2}
+    return i$7`
+      ${styleCss$3$1}
     `;
   }
 
@@ -2574,9 +2670,9 @@ class BaseIcon extends AuroElement {
     let iconHTML = '';
 
     if (category === 'logos') {
-      iconHTML = await cacheFetch(`${this.uri}/${category}/${name}.svg`);
+      iconHTML = await cacheFetch$1(`${this.uri}/${category}/${name}.svg`);
     } else {
-      iconHTML = await cacheFetch(`${this.uri}/icons/${category}/${name}.svg`);
+      iconHTML = await cacheFetch$1(`${this.uri}/icons/${category}/${name}.svg`);
     }
 
     const dom = new DOMParser().parseFromString(iconHTML, 'text/html');
@@ -2592,17 +2688,17 @@ class BaseIcon extends AuroElement {
       if (svg) {
         this.svg = svg;
       } else if (!svg) {
-        const penDOM = new DOMParser().parseFromString(error.svg, 'text/html');
+        const penDOM = new DOMParser().parseFromString(error$1.svg, 'text/html');
 
         this.svg = penDOM.body.firstChild;
       }
     }
   }
-}
+};
 
-var tokensCss$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 = 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 = 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 = 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.
@@ -2635,7 +2731,7 @@ var colorCss$2 = i$3`:host{color:var(--ds-auro-icon-color)}:host([customColor]){
  */
 
 // build the component class
-class AuroIcon extends BaseIcon {
+let AuroIcon$1 = class AuroIcon extends BaseIcon$1 {
   constructor() {
     super();
 
@@ -2664,7 +2760,7 @@ class AuroIcon extends BaseIcon {
     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 @@ class AuroIcon extends BaseIcon {
   static get styles() {
     return [
       super.styles,
-      i$3`${tokensCss$1}`,
-      i$3`${styleCss$2}`,
-      i$3`${colorCss$2}`
+      i$7`${tokensCss$2}`,
+      i$7`${styleCss$3$1}`,
+      i$7`${colorCss$3}`
     ];
   }
 
@@ -2761,7 +2857,7 @@ class AuroIcon extends BaseIcon {
    *
    */
   static register(name = "auro-icon") {
-    AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroIcon);
+    AuroLibraryRuntimeUtils$1.prototype.registerComponent(name, AuroIcon);
   }
 
   connectedCallback() {
@@ -2790,38 +2886,34 @@ class AuroIcon extends BaseIcon {
       'wrapper': true,
     };
 
-    return x`
+    return x$1`
       <div
-        class="${e(classes)}"
-        title="${o(this.title || undefined)}">
-        <span aria-hidden="${o(this.ariaHidden ? this.ariaHidden : true)}" part="svg">
-          ${this.customSvg ? x`
+        class="${e$3$2(classes)}"
+        title="${o$3$2(this.title || undefined)}">
+        <span aria-hidden="${o$3$2(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$2(a11y)}">
           <slot></slot>
         </div>
       </div>
     `;
   }
-}
-
-var iconVersion = '6.1.2';
-
-var styleCss$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 = 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 iconVersion$1 = '6.1.2';
 
-var tokensCss$2 = 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 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 styleCss$3 = 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$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 colorCss$3 = 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$1 {
 
   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$3,
-      colorCss$3,
-      tokensCss$2
+      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,124 +3032,383 @@ 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$2=globalThis,e$2$2=t$1$2.ShadowRoot&&(void 0===t$1$2.ShadyCSS||t$1$2.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,s$1$2=Symbol(),o$2$2=new WeakMap;let n$2$2 = class n{constructor(t,e,o){if(this._$cssResult$=true,o!==s$1$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$2$2&&void 0===t){const e=void 0!==s&&1===s.length;e&&(t=o$2$2.get(s)),void 0===t&&((this.o=t=new CSSStyleSheet).replaceSync(this.cssText),e&&o$2$2.set(s,t));}return t}toString(){return this.cssText}};const r$3$2=t=>new n$2$2("string"==typeof t?t:t+"",void 0,s$1$2),i$3$2=(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$2(o,t,s$1$2)},S$1$2=(s,o)=>{if(e$2$2)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$2.litNonce;void 0!==n&&o.setAttribute("nonce",n),o.textContent=e.cssText,s.appendChild(o);}},c$2$2=e$2$2?t=>t:t=>t instanceof CSSStyleSheet?(t=>{let e="";for(const s of t.cssRules)e+=s.cssText;return r$3$2(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$2,defineProperty:e$1$1,getOwnPropertyDescriptor:r$2$2,getOwnPropertyNames:h$1$2,getOwnPropertySymbols:o$1$1,getPrototypeOf:n$1$2}=Object,a$1$2=globalThis,c$1$2=a$1$2.trustedTypes,l$1$2=c$1$2?c$1$2.emptyScript:"",p$1$2=a$1$2.reactiveElementPolyfillSupport,d$1$2=(t,s)=>t,u$1$2={toAttribute(t,s){switch(s){case Boolean:t=t?l$1$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$2=(t,s)=>!i$2$2(t,s),y$1$2={attribute:true,type:String,converter:u$1$2,reflect:false,hasChanged:f$1$2};Symbol.metadata??=Symbol("metadata"),a$1$2.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$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$1$1(this.prototype,t,r);}}static getPropertyDescriptor(t,s,i){const{get:e,set:h}=r$2$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$2}static _$Ei(){if(this.hasOwnProperty(d$1$2("elementProperties")))return;const t=n$1$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$2("finalized")))return;if(this.finalized=true,this._$Ei(),this.hasOwnProperty(d$1$2("properties"))){const t=this.properties,s=[...h$1$2(t),...o$1$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$2(s));}else void 0!==s&&i.push(c$2$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$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$1$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$1$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$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$2.elementStyles=[],b$2.shadowRootOptions={mode:"open"},b$2[d$1$2("elementProperties")]=new Map,b$2[d$1$2("finalized")]=new Map,p$1$2?.({ReactiveElement:b$2}),(a$1$2.reactiveElementVersions??=[]).push("2.0.4");
 
-    this.privateDefaults();
-  }
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const t$5=globalThis,i$1$1=t$5.trustedTypes,s$5=i$1$1?i$1$1.createPolicy("lit-html",{createHTML:t=>t}):void 0,e$8="$lit$",h$4=`lit$${Math.random().toFixed(9).slice(2)}$`,o$8="?"+h$4,n$7=`<${o$8}>`,r$1$2=document,l$5=()=>r$1$2.createComment(""),c$6=t=>null===t||"object"!=typeof t&&"function"!=typeof t,a$5=Array.isArray,u$5=t=>a$5(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$4=t=>(i,...s)=>({_$litType$:t,strings:i,values:s}),x$2=y$4(1),T$2=Symbol.for("lit-noChange"),E$2=Symbol.for("lit-nothing"),A$2=new WeakMap,C$2=r$1$2.createTreeWalker(r$1$2,129);function P$2(t,i){if(!a$5(t)||!t.hasOwnProperty("raw"))throw Error("invalid template strings array");return void 0!==s$5?s$5.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$7:d>=0?(o.push(a),s.slice(0,d)+e$8+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$8)){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$1?i$1$1.emptyScript:"";for(let i=0;i<s;i++)r.append(t[i],l$5()),C$2.nextNode(),d.push({type:2,index:++c});r.append(t[s],l$5());}}}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$2.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$2).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$2,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$5(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$2.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$5(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$5()),this.O(l$5()),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$5.litHtmlPolyfillSupport;j$2?.(N$2,R$2),(t$5.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$5(),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$a=globalThis.litElementPolyfillSupport;i$a?.({LitElement:r$8});(globalThis.litElementVersions??=[]).push("4.1.1");
 
-    /**
-     * @private
-     */
-    this.hasTriggerContent = false;
+var colorCss$4 = i$3$2`: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$2`.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$2`: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, AuroIcon);
-  }
+/* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
+
+let AuroLibraryRuntimeUtils$2 = class AuroLibraryRuntimeUtils {
+
+  /* eslint-disable jsdoc/require-param */
 
   /**
-   * Public method to hide the dropdown.
+   * 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}
    */
-  hide() {
-    this.floater.hideBib();
+  registerComponent(name, componentClass) {
+    if (!customElements.get(name)) {
+      customElements.define(name, class extends componentClass {});
+    }
   }
 
   /**
-   * Public method to show the dropdown.
+   * Finds and returns the closest HTML Element based on a selector.
    * @returns {void}
    */
-  show() {
-    this.floater.showBib();
+  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 */
 
-  // function to define props used within the scope of this component
-  static get properties() {
-    return {
+  /**
+   * 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}
+   */
+  handleComponentTagRename(elem, tagName) {
+    const tag = tagName.toLowerCase();
+    const elemTag = elem.tagName.toLowerCase();
 
-      /**
-       * If declared, applies a border around the trigger slot.
-       */
-      bordered: {
-        type: Boolean,
-        reflect: true
-      },
+    if (elemTag !== tag) {
+      elem.setAttribute(tag, true);
+    }
+  }
 
-      /**
-       * If declared, the dropdown displays a chevron on the right.
-       * @attr {Boolean} chevron
-       */
-      chevron: {
+  /**
+   * 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$2.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
+  static get properties() {
+    return {
+
+      /**
+       * @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$2.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$2`
+      <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$1 {
+  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$1.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$1();
+
+    /**
+     * @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,
+        reflect: true
+      },
+
+      /**
+       * If declared, the dropdown displays a chevron on the right.
+       * @attr {Boolean} chevron
+       */
+      chevron: {
         type: Boolean,
         reflect: true
       },
@@ -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
       },
@@ -3177,9 +3561,9 @@ class AuroDropdown extends r {
 
   static get styles() {
     return [
-      colorCss$1,
-      styleCss$1,
-      tokensCss$2
+      colorCss$1$1,
+      styleCss$1$1,
+      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,
@@ -3217,170 +3601,1174 @@ class AuroDropdown extends r {
     }
   }
 
-  firstUpdated() {
-    this.floater.configure(this, 'auroDropdown');
-    this.bibContent = this.floater.element.bib;
+  firstUpdated() {
+    this.floater.configure(this, 'auroDropdown');
+    this.bibContent = this.floater.element.bib;
+
+    // Add the tag name as an attribute if it is different than the component name
+    this.runtimeUtils.handleComponentTagRename(this, 'auro-dropdown');
+  }
+
+  /**
+   * Exposes CSS parts for styling from parent components.
+   * @returns {void}
+   */
+  exposeCssParts() {
+    this.setAttribute('exportparts', 'trigger:dropdownTrigger, chevron:dropdownChevron, helpText:dropdownHelpText, size:dropdownSize');
+  }
+
+  /**
+   * Determines if content is within a custom slot.
+   * @private
+   * @param {HTMLElement} element - The element to check.
+   * @returns {Boolean}
+   */
+  isCustomSlotContent(element) {
+    let currentElement = element;
+
+    let inCustomSlot = false;
+
+    while (currentElement) {
+      currentElement = currentElement.parentElement;
+
+      if (currentElement && currentElement.hasAttribute('slot')) {
+        inCustomSlot = true;
+        break;
+      }
+    }
+
+    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.
+   *
+   * It first updates the floater settings
+   * Then, it retrieves the assigned nodes from the event target and checks if any of
+   * the nodes contain non-empty text content, updating the `hasTriggerContent` property accordingly.
+   *
+   * @private
+   * @method handleTriggerContentSlotChange
+   * @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();
+    }
+
+    if (this.triggerContentSlot) {
+      this.hasTriggerContent = this.triggerContentSlot.some((slot) => {
+        if (slot.textContent.trim()) {
+          return true;
+        }
+        const slotInSlot = slot.querySelector('slot');
+        if (!slotInSlot) {
+          return false;
+        }
+        const slotsInSlotNodes = slotInSlot.assignedNodes();
+        return slotsInSlotNodes.some((ss) => Boolean(ss.textContent.trim()));
+      });
+    } else {
+      this.hasTriggerContent = false;
+    }
+  }
+
+  /**
+   * Handles the default slot change event and updates the content.
+   *
+   * This method retrieves all nodes assigned to the default slot of the event target and appends them
+   * to the `bibContent` element. If a callback function `onSlotChange` is defined, it is invoked to
+   * notify about the slot change.
+   *
+   * @private
+   * @method handleDefaultSlot
+   * @param {Event} event - The event object representing the slot change.
+   * @fires Function#onSlotChange - Optional callback invoked when the slot content changes.
+   */
+  handleDefaultSlot(event) {
+    [...event.target.assignedNodes()].forEach((node) => this.bibContent.append(node));
+
+    if (this.onSlotChange) {
+      this.onSlotChange();
+    }
+  }
+
+  // function that renders the HTML and CSS into  the scope of the component
+  render() {
+    return u$3`
+      <div>
+        <div
+          id="trigger"
+          class="trigger"
+          part="trigger"
+          aria-labelledby="triggerLabel"
+          tabindex="${this.tabIndex}"
+          ?showBorder="${this.showTriggerBorders}"
+          >
+          <div class="triggerContentWrapper">
+            <label class="label" id="triggerLabel" hasTrigger=${this.hasTriggerContent}>
+              <slot name="label"></slot>
+            </label>
+            <div class="triggerContent">
+              <slot
+                name="trigger"
+                @slotchange="${this.handleTriggerContentSlotChange}"></slot>
+            </div>
+          </div>
+          ${this.chevron || this.common ? u$3`
+              <div
+                id="showStateIcon"
+                part="chevron">
+                <${this.iconTag}
+                  category="interface"
+                  name="chevron-down"
+                  customColor
+                  ?disabled=${this.disabled}
+                  >
+                </${this.iconTag}>
+              </div>
+            ` : undefined }
+        </div>
+        <${this.helpTextTag} part="helpText" ?error="${this.error}">
+          <slot name="helpText"></slot>
+        </${this.helpTextTag}>
+        <div class="slotContent">
+          <slot @slotchange="${this.handleDefaultSlot}"></slot>
+        </div>
+        <div id="bibSizer" part="size"></div>
+        <${this.dropdownBibTag}
+          id="bib"
+          role="tooltip"
+          ?isfullscreen="${this.isBibFullscreen}"
+          ?common="${this.common}"
+          ?rounded="${this.common || this.rounded}"
+          ?inset="${this.common || this.inset}">
+        </${this.dropdownBibTag}>
+      </div>
+    `;
+  }
+}
+
+var dropdownVersion = '3.0.0';
+
+/**
+ * @license
+ * Copyright 2019 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const t$2$1=globalThis,e$4$1=t$2$1.ShadowRoot&&(void 0===t$2$1.ShadyCSS||t$2$1.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,s$2$1=Symbol(),o$4$1=new WeakMap;let n$3$1 = 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$4$1&&void 0===t){const e=void 0!==s&&1===s.length;e&&(t=o$4$1.get(s)),void 0===t&&((this.o=t=new CSSStyleSheet).replaceSync(this.cssText),e&&o$4$1.set(s,t));}return t}toString(){return this.cssText}};const r$3$1=t=>new n$3$1("string"==typeof t?t:t+"",void 0,s$2$1),i$5$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$3$1(o,t,s$2$1)},S$1$1=(s,o)=>{if(e$4$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$2$1.litNonce;void 0!==n&&o.setAttribute("nonce",n),o.textContent=e.cssText,s.appendChild(o);}},c$2$1=e$4$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;
+
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */const{is:i$4$1,defineProperty:e$3$1,getOwnPropertyDescriptor:r$2$1,getOwnPropertyNames:h$1$1,getOwnPropertySymbols:o$3$1,getPrototypeOf:n$2$1}=Object,a$2$1=globalThis,c$1$1=a$2$1.trustedTypes,l$2$1=c$1$1?c$1$1.emptyScript:"",p$1$1=a$2$1.reactiveElementPolyfillSupport,d$1$1=(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$1$1=(t,s)=>!i$4$1(t,s),y$1$1={attribute:true,type:String,converter:u$2$1,reflect:false,hasChanged:f$1$1};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$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$3$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$2$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$3$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$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$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$1.elementStyles=[],b$1.shadowRootOptions={mode:"open"},b$1[d$1$1("elementProperties")]=new Map,b$1[d$1$1("finalized")]=new Map,p$1$1?.({ReactiveElement:b$1}),(a$2$1.reactiveElementVersions??=[]).push("2.0.4");
+
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const t$1$1=globalThis,i$3$1=t$1$1.trustedTypes,s$1$1=i$3$1?i$3$1.createPolicy("lit-html",{createHTML:t=>t}):void 0,e$2$1="$lit$",h$2=`lit$${Math.random().toFixed(9).slice(2)}$`,o$2$1="?"+h$2,n$1$1=`<${o$2$1}>`,r$1$1=document,l$1$1=()=>r$1$1.createComment(""),c$3=t=>null===t||"object"!=typeof t&&"function"!=typeof t,a$1$1=Array.isArray,u$1$1=t=>a$1$1(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=t=>(i,...s)=>({_$litType$:t,strings:i,values:s}),x=y(1),T$1=Symbol.for("lit-noChange"),E$1=Symbol.for("lit-nothing"),A$1=new WeakMap,C$1=r$1$1.createTreeWalker(r$1$1,129);function P$1(t,i){if(!a$1$1(t)||!t.hasOwnProperty("raw"))throw Error("invalid template strings array");return void 0!==s$1$1?s$1$1.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$1$1:d>=0?(o.push(a),s.slice(0,d)+e$2$1+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$2$1)){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$3$1?i$3$1.emptyScript:"";for(let i=0;i<s;i++)r.append(t[i],l$1$1()),C$1.nextNode(),d.push({type:2,index:++c});r.append(t[s],l$1$1());}}}else if(8===r.nodeType)if(r.data===o$2$1)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$1$1.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?.(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$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$1$1).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$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$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$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$1$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$1&&c$3(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$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$1$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$1()),this.O(l$1$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));}};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$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$1$1.litHtmlPolyfillSupport;j$1?.(N$1,R$1),(t$1$1.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$1$1(),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(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$2$1=globalThis.litElementPolyfillSupport;i$2$1?.({LitElement:r$4});(globalThis.litElementVersions??=[]).push("4.1.1");
+
+/**
+ * @license
+ * Copyright 2020 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const a=Symbol.for(""),o$1=t=>{if(t?.r===a)return t?._$litStatic$},s=t=>({_$litStatic$:t,r:a}),i$1=(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}),l=new Map,n=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$1(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.get(t))&&(n.raw=n,l.set(t,r=n)),e=u;}return t(r,...e)},u=n(x);
+
+var colorCss$1 = i$5$1`#headerContainer{box-shadow:var(--ds-auro-dropdownbib-header-boxshadow-color)}#footerContainer{background-color:var(--ds-auro-dropdownbib-footer-container-color)}`;
+
+var styleCss$2 = i$5$1`#bibTemplate{display:flex;overflow:hidden;height:100%;max-height:100%;flex-direction:column}#headerContainer{display:flex;flex-direction:column}#header{display:flex;width:100%;min-height:var(--ds-size-1000, 5rem);box-sizing:border-box;align-items:end;padding-top:var(--ds-size-400, 2rem);padding-right:var(--ds-size-700, 3.5rem);padding-left:var(--ds-size-200, 1rem);pointer-events:none}#subheader{width:100%}#subheader ::slotted([auro-input]){padding:0 var(--ds-size-200, 1rem)}#closeButton{position:absolute;top:var(--ds-size-400, 2rem);right:var(--ds-size-200, 1rem);border:none;background-color:transparent;cursor:pointer}#closeButton [auro-icon]{--ds-auro-icon-size: var(--ds-size-500, $ds-size-500)}#bodyContainer{position:relative;overflow:auto;flex:1 1 100%}:host([isfullscreen]) #bibTemplate{max-height:100dvh}:host([isfullscreen]) #bodyContainer{margin-top:var(--ds-size-100, 0.5rem)}#footerContainer{position:absolute;right:0;bottom:0;left:0;padding:var(--ds-size-200, 1rem)}`;
+
+var tokenCss = i$5$1`:host{--ds-auro-dropdownbib-header-boxshadow-color: var(--ds-elevation-200, 0px 0px 10px rgba(0, 0, 0, 0.15));--ds-auro-dropdownbib-footer-container-color: var(--ds-color-container-primary-default, #ffffff)}`;
+
+// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
+// See LICENSE in the project root for license information.
+
+// ---------------------------------------------------------------------
+
+/* 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 {});
+    }
+  }
+
+  /**
+   * Finds and returns the closest HTML Element based on a selector.
+   * @returns {void}
+   */
+  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 */
+
+  /**
+   * 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}
+   */
+  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) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
+// See LICENSE in the project root for license information.
+
+
+class AuroDependencyVersioning {
+
+  /**
+   * Generates a unique string to be used for child auro element naming.
+   * @private
+   * @param {string} baseName - Defines the first part of the unique element name.
+   * @param {string} version - Version of the component that will be appended to the baseName.
+   * @returns {string} - Unique string to be used for naming.
+   */
+  generateElementName(baseName, version) {
+    let result = baseName;
+
+    result += '-';
+    result += version.replace(/[.]/g, '_');
+
+    return result;
+  }
+
+  /**
+   * Generates a unique string to be used for child auro element naming.
+   * @param {string} baseName - Defines the first part of the unique element name.
+   * @param {string} version - Version of the component that will be appended to the baseName.
+   * @returns {string} - Unique string to be used for naming.
+   */
+  generateTag(baseName, version, tagClass) {
+    const elementName = this.generateElementName(baseName, version);
+    const tag = i$1`${s(elementName)}`;
+
+    if (!customElements.get(elementName)) {
+      customElements.define(elementName, class extends tagClass {});
+    }
+
+    return tag;
+  }
+}
+
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const t={ATTRIBUTE:1},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)}}
+
+/**
+ * @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$1}});
+
+/**
+ * @license
+ * Copyright 2018 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */const o=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.
+
+
+/**
+ * @attr {Boolean} hidden - If present, the component will be hidden both visually and from screen readers
+ * @attr {Boolean} hiddenVisually - If present, the component will be hidden visually, but still read by screen readers
+ * @attr {Boolean} hiddenAudible - If present, the component will be hidden from screen readers, but seen visually
+ */
+
+class AuroElement extends r$4 {
+
+  // function to define props used within the scope of this component
+  static get properties() {
+    return {
+      hidden:         { type: Boolean,
+                        reflect: true },
+      hiddenVisually: { type: Boolean,
+                        reflect: true },
+      hiddenAudible:  { type: Boolean,
+                        reflect: true },
+    };
+  }
+
+  /**
+   * @private Function that determines state of aria-hidden
+   */
+  hideAudible(value) {
+    if (value) {
+      return 'true'
+    }
+
+    return 'false'
+  }
+}
+
+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 */
+
+const _fetchMap = new Map();
+
+/**
+ * A callback to parse Response body.
+ *
+ * @callback ResponseParser
+ * @param {Fetch.Response} response
+ * @returns {Promise}
+ */
+
+/**
+ * A minimal in-memory map to de-duplicate Fetch API media requests.
+ *
+ * @param {String} uri
+ * @param {Object} [options={}]
+ * @param {ResponseParser} [options.responseParser=(response) => response.text()]
+ * @returns {Promise}
+ */
+const cacheFetch = (uri, options = {}) => {
+  const responseParser = options.responseParser || ((response) => response.text());
+  if (!_fetchMap.has(uri)) {
+    _fetchMap.set(uri, fetch(uri).then(responseParser));
+  }
+  return _fetchMap.get(uri);
+};
+
+var styleCss$1 = i$5$1`*,*: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.
+
+
+// See https://git.io/JJ6SJ for "How to document your components using JSDoc"
+/**
+ * @attr {Boolean} onDark - Set value for on-dark version of auro-icon
+ * @slot - Hidden from visibility, used for a11y if icon description is needed
+ */
+
+// build the component class
+class BaseIcon extends AuroElement {
+  constructor() {
+    super();
+    this.onDark = false;
+  }
+
+  // function to define props used within the scope of this component
+  static get properties() {
+    return {
+      ...super.properties,
+      onDark: {
+        type: Boolean,
+        reflect: true
+      },
+
+      /**
+       * @private
+       */
+      svg: {
+        attribute: false,
+        reflect: true
+      }
+    };
+  }
+
+  static get styles() {
+    return i$5$1`
+      ${styleCss$1}
+    `;
+  }
+
+  /**
+   * Async function to fetch requested icon from npm CDN.
+   * @private
+   * @param {string} category - Icon category.
+   * @param {string} name - Icon name.
+   * @returns {SVGElement} DOM - Ready HTML to be appended.
+   */
+  async fetchIcon(category, name) {
+    let iconHTML = '';
+
+    if (category === 'logos') {
+      iconHTML = await cacheFetch(`${this.uri}/${category}/${name}.svg`);
+    } else {
+      iconHTML = await cacheFetch(`${this.uri}/icons/${category}/${name}.svg`);
+    }
+
+    const dom = new DOMParser().parseFromString(iconHTML, 'text/html');
+
+    return dom.body.querySelector('svg');
+  }
+
+  // lifecycle function
+  async firstUpdated() {
+    if (!this.customSvg) {
+      const svg = await this.fetchIcon(this.category, this.name);
+
+      if (svg) {
+        this.svg = svg;
+      } else if (!svg) {
+        const penDOM = new DOMParser().parseFromString(error.svg, 'text/html');
+
+        this.svg = penDOM.body.firstChild;
+      }
+    }
+  }
+}
+
+var tokensCss$1 = i$5$1`: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 = i$5$1`: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.
+
+
+// See https://git.io/JJ6SJ for "How to document your components using JSDoc"
+/**
+ * auro-icon provides users a way to use the Auro Icons by simply passing in the category and name.
+ *
+ * @attr {String} category - The category of the icon you are looking for. See https://auro.alaskaair.com/icons/usage.
+ * @attr {String} name - The name of the icon you are looking for without the file extension. See https://auro.alaskaair.com/icons/usage
+ * @attr {Boolean} customColor - Removes primary selector.
+ * @attr {Boolean} customSvg - When true, auro-icon will render a custom SVG inside the default slot.
+ * @attr {Boolean} label - Exposes content in slot as icon label.
+ * @attr {Boolean} primary - DEPRECATED: Sets the icon to use the baseline primary icon style.
+ * @attr {Boolean} accent - Sets the icon to use the accent style.
+ * @attr {Boolean} emphasis - Sets the icon to use the emphasis style.
+ * @attr {Boolean} disabled - Sets the icon to use the disabled style.
+ * @attr {Boolean} error - Sets the icon to use the error style.
+ * @attr {Boolean} info - Sets the icon to use the info style.
+ * @attr {Boolean} secondary - Sets the icon to use the secondary style.
+ * @attr {Boolean} tertiary - Sets the icon to use the tertiary style.
+ * @attr {Boolean} subtle - Sets the icon to use the subtle style.
+ * @attr {Boolean} success - Sets the icon to use the success style.
+ * @attr {Boolean} warning - Sets the icon to use the warning style.
+ * @attr {String} ariaHidden - Set aria-hidden value. Default is `true`. Option is `false`.
+ * @attr {String} uri - Set the uri for CDN used when fetching icons
+ * @slot - Hidden from visibility, used for a11y if icon description is needed.
+ * @slot svg - Used for custom SVG content.
+ */
+
+// build the component class
+class AuroIcon extends BaseIcon {
+  constructor() {
+    super();
+
+    this.uri = 'https://cdn.jsdelivr.net/npm/@alaskaairux/icons@latest/dist';
+
+    this.privateDefaults();
+  }
+
+  /**
+   * Internal Defaults.
+   * @private
+   * @returns {void}
+   */
+  privateDefaults() {
+    this.accent = false;
+    this.customColor = false;
+    this.customSvg = false;
+    this.disabled = false;
+    this.emphasis = false;
+    this.error = false;
+    this.info = false;
+    this.label = false;
+    this.primary = false;
+    this.secondary = false;
+    this.subtle = false;
+    this.success = false;
+    this.tertiary = false;
+    this.warning = false;
+    this.runtimeUtils = new AuroLibraryRuntimeUtils();
+  }
+
+  // function to define props used within the scope of this component
+  static get properties() {
+    return {
+      ...super.properties,
+      accent: {
+        type: Boolean,
+        reflect: true
+      },
+      ariaHidden: {
+        type: String,
+        reflect: true
+      },
+      category: {
+        type: String,
+        reflect: true
+      },
+      customColor: {
+        type: Boolean
+      },
+      customSvg: {
+        type: Boolean
+      },
+      disabled: {
+        type: Boolean,
+        reflect: true
+      },
+      emphasis: {
+        type: Boolean,
+        reflect: true
+      },
+      error: {
+        type: Boolean,
+        reflect: true
+      },
+      info: {
+        type: Boolean,
+        reflect: true
+      },
+      label: {
+        type: Boolean,
+        reflect: true
+      },
+      name: {
+        type: String,
+        reflect: true
+      },
+      primary: {
+        type: Boolean,
+        reflect: true
+      },
+      secondary: {
+        type: Boolean,
+        reflect: true
+      },
+      subtle: {
+        type: Boolean,
+        reflect: true
+      },
+      success: {
+        type: Boolean,
+        reflect: true
+      },
+      tertiary: {
+        type: Boolean,
+        reflect: true
+      },
+      uri: {
+        type: String
+      },
+      warning: {
+        type: Boolean,
+        reflect: true
+      }
+    };
+  }
+
+  static get styles() {
+    return [
+      super.styles,
+      i$5$1`${tokensCss$1}`,
+      i$5$1`${styleCss$1}`,
+      i$5$1`${colorCss$2}`
+    ];
+  }
+
+  /**
+   * This will register this element with the browser.
+   * @param {string} [name="auro-icon"] - The name of element that you want to register to.
+   *
+   * @example
+   * AuroIcon.register("custom-icon") // this will register this element to <custom-icon/>
+   *
+   */
+  static register(name = "auro-icon") {
+    AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroIcon);
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+
+    // Add the tag name as an attribute if it is different than the component name
+    this.runtimeUtils.handleComponentTagRename(this, 'auro-icon');
+  }
+
+  /**
+   * @returns {void} Exposes CSS parts for styling from parent components.
+   */
+  exposeCssParts() {
+    this.setAttribute('exportparts', 'svg:iconSvg');
+  }
+
+  // function that renders the HTML and CSS into  the scope of the component
+  render() {
+    const a11y = {
+      'labelContainer': true,
+      'util_displayHiddenVisually': !this.label
+    };
+
+    const classes = {
+      'label': this.label,
+      'wrapper': true,
+    };
+
+    return x`
+      <div
+        class="${e(classes)}"
+        title="${o(this.title || undefined)}">
+        <span aria-hidden="${o(this.ariaHidden ? this.ariaHidden : true)}" part="svg">
+          ${this.customSvg ? x`
+              <slot name="svg"></slot>
+            ` : x`
+              ${this.svg}
+            `
+          }
+        </span>
+
+        <div class="${e(a11y)}">
+          <slot></slot>
+        </div>
+      </div>
+    `;
+  }
+}
+
+var iconVersion = '6.1.2';
+
+var styleCss$3 = i$5$1`.heading{margin:1.75rem 0;letter-spacing:var(--ds-text-heading-default-spacing, -0.2px);font-weight:var(--ds-text-heading-default-weight, 500)}.heading--display{margin-top:0;font-size:var(--ds-text-heading-display-size-breakpoint-sm, 2.75rem);font-weight:var(--ds-text-heading-display-weight, 100);line-height:var(--ds-text-heading-display-height-breakpoint-sm, 3.375rem)}@media screen and (min-width: 768px){.heading--display{font-size:var(--ds-text-heading-display-size-breakpoint-md, 3rem);line-height:var(--ds-text-heading-display-height-breakpoint-md, 3.75rem)}}@media screen and (min-width: 1024px){.heading--display{font-size:var(--ds-text-heading-display-size-breakpoint-lg, 3.5rem);line-height:var(--ds-text-heading-display-height-breakpoint-lg, 4.25rem)}}.heading--800{font-size:var(--ds-text-heading-800-size-breakpoint-sm, 2rem);font-weight:var(--ds-text-heading-800-weight, 500);line-height:var(--ds-text-heading-800-height-breakpoint-sm, 2.375rem)}@media screen and (min-width: 768px){.heading--800{font-size:var(--ds-text-heading-800-size-breakpoint-md, 2.25rem);line-height:var(--ds-text-heading-800-height-breakpoint-md, 2.625rem)}}@media screen and (min-width: 1024px){.heading--800{font-size:var(--ds-text-heading-800-size-breakpoint-lg, 2.5rem);line-height:var(--ds-text-heading-800-height-breakpoint-lg, 3rem)}}.heading--700{font-size:var(--ds-text-heading-700-size-breakpoint-sm, 1.75rem);font-weight:var(--ds-text-heading-700-weight, 500);line-height:var(--ds-text-heading-700-height-breakpoint-sm, 2.125rem)}@media screen and (min-width: 768px){.heading--700{font-size:var(--ds-text-heading-700-size-breakpoint-md, 2rem);line-height:var(--ds-text-heading-700-height-breakpoint-md, 2.375rem)}}@media screen and (min-width: 1024px){.heading--700{font-size:var(--ds-text-heading-700-size-breakpoint-lg, 2.25rem);line-height:var(--ds-text-heading-700-height-breakpoint-lg, 2.75rem)}}.heading--600{margin:1rem 0;font-size:var(--ds-text-heading-600-size-breakpoint-sm, 1.625rem);font-weight:var(--ds-text-heading-600-weight, 300);line-height:var(--ds-text-heading-600-height-breakpoint-sm, 1.875rem)}@media screen and (min-width: 768px){.heading--600{font-size:var(--ds-text-heading-600-size-breakpoint-md, 1.75rem);line-height:var(--ds-text-heading-600-height-breakpoint-md, 2.125rem)}}@media screen and (min-width: 1024px){.heading--600{font-size:var(--ds-text-heading-600-size-breakpoint-lg, 1.75rem);line-height:var(--ds-text-heading-600-height-breakpoint-lg, 2.25rem)}}.heading--500{margin:1rem 0;font-size:var(--ds-text-heading-500-size-breakpoint-sm, 1.375rem);font-weight:var(--ds-text-heading-500-weight, 300);line-height:var(--ds-text-heading-500-height-breakpoint-sm, 1.625rem)}@media screen and (min-width: 768px){.heading--500{font-size:var(--ds-text-heading-500-size-breakpoint-md, 1.5rem);line-height:var(--ds-text-heading-500-height-breakpoint-md, 1.875rem)}}@media screen and (min-width: 1024px){.heading--500{font-size:var(--ds-text-heading-500-size-breakpoint-lg, 1.5rem);line-height:var(--ds-text-heading-500-height-breakpoint-lg, 2rem)}}.heading--400{margin:.75rem 0;font-size:var(--ds-text-heading-400-size, 1.25rem);font-weight:var(--ds-text-heading-400-weight, 300);line-height:var(--ds-text-heading-400-height, 1.625rem)}.heading--300{margin:.75rem 0;font-size:var(--ds-text-heading-300-size, 1.125rem);font-weight:var(--ds-text-heading-300-weight, 300);line-height:var(--ds-text-heading-300-height, 1.625rem)}.util_stackMarginnone--bottom{margin-bottom:0}.util_stackMargin25--bottom{margin-bottom:var(--ds-size-25, 0.125rem)}.util_stackMargin50--bottom{margin-bottom:var(--ds-size-50, 0.25rem)}.util_stackMargin100--bottom{margin-bottom:var(--ds-size-100, 0.5rem)}.util_stackMargin150--bottom{margin-bottom:var(--ds-size-150, 0.75rem)}.util_stackMargin200--bottom{margin-bottom:var(--ds-size-200, 1rem)}.util_stackMargin300--bottom{margin-bottom:var(--ds-size-300, 1.5rem)}.util_stackMargin400--bottom{margin-bottom:var(--ds-size-400, 2rem)}.util_stackMargin600--bottom{margin-bottom:var(--ds-size-600, 3rem)}.util_stackMargin800--bottom{margin-bottom:var(--ds-size-800, 4rem)}.util_stackMarginnone--top{margin-top:0}.util_stackMargin25--top{margin-top:var(--ds-size-25, 0.125rem)}.util_stackMargin50--top{margin-top:var(--ds-size-50, 0.25rem)}.util_stackMargin100--top{margin-top:var(--ds-size-100, 0.5rem)}.util_stackMargin150--top{margin-top:var(--ds-size-150, 0.75rem)}.util_stackMargin200--top{margin-top:var(--ds-size-200, 1rem)}.util_stackMargin300--top{margin-top:var(--ds-size-300, 1.5rem)}.util_stackMargin400--top{margin-top:var(--ds-size-400, 2rem)}.util_stackMargin600--top{margin-top:var(--ds-size-600, 3rem)}.util_stackMargin800--top{margin-top:var(--ds-size-800, 4rem)}`;
+
+// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
+// See LICENSE in the project root for license information.
+
+
+/**
+ * The auro-header component is a custom element to make using headers with the Auro Design System seamless and easy.
+ *
+ * @attr {String} level - Determines heading level for HTML element. Options are `1` - `6`
+ * @attr {String} display - Determines presentation of header. Options are `display`, `800`, `700`, `600`, `500`, `400`, `300`.
+ * @attr {String} color - Allows user to pass in CSS custom property or direct hex value to change the color of the header
+ * @attr {String} margin - Specify the margin(s) to be altered. Options are `top`, `bottom`, or `both`.
+ * @attr {String} size - Specify size of margin adjustment, either `none`, `25`, `50`, `100`, `150`, `200`, `300`, `400`, `600` or `800`.
+ */
+
+/* eslint complexity: ["error", 21] */
+
+// build the component class
+class AuroHeader extends r$4 {
+  constructor() {
+    super();
+
+    this.display = 'display';
+
+    /**
+     * @private
+     */
+    this.runtimeUtils = new AuroLibraryRuntimeUtils();
+  }
+
+  // function to define props used within the scope of this component
+  static get properties() {
+    return {
+      level:    { type: String },
+      display:  {
+        type: String,
+        reflect: true
+      },
+      color:    { type: String },
+      margin:   { type: String },
+      size:     { type: String }
+    };
+  }
+
+  static get styles() {
+    return [styleCss$3];
+  }
+
+  /**
+   * This will register this element with the browser.
+   * @param {string} [name="auro-header"] - The name of element that you want to register to.
+   *
+   * @example
+   * AuroHeader.register("custom-header") // this will register this element to <custom-header/>
+   *
+   */
+  static register(name = "auro-header") {
+    AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroHeader);
+  }
+
+  firstUpdated() {
+    // Add the tag name as an attribute if it is different than the component name
+    this.runtimeUtils.handleComponentTagRename(this, 'auro-header');
+  }
+
+  /**
+   * Determines if the spacing is to be applied uniform or individual.
+   * @private
+   * @param {string} size - Accepts string for size definition.
+   * @returns {string} - Returns either selectors or function.
+   */
+  spacingDecision(size) {
+    if (this.margin === 'both') {
+      switch (size) {
+        case 'none': return `util_stackMarginnone--top util_stackMarginnone--bottom`;
+        case '25': return `util_stackMargin25--top util_stackMargin25--bottom`;
+        case '50': return `util_stackMargin50--top util_stackMargin50--bottom`;
+        case '100': return `util_stackMargin100--top util_stackMargin100--bottom`;
+        case '150': return `util_stackMargin150--top util_stackMargin150--bottom`;
+        case '200': return `util_stackMargin200--top util_stackMargin200--bottom`;
+        case '300': return `util_stackMargin300--top util_stackMargin300--bottom`;
+        case '400': return `util_stackMargin400--top util_stackMargin400--bottom`;
+        case '600': return `util_stackMargin600--top util_stackMargin600--bottom`;
+        case '800': return `util_stackMargin800--top util_stackMargin800--bottom`;
+        default: return '';
+      }
+    } else {
+      return this.spacingApplied(size);
+    }
+  }
+
+  /**
+   * If spacing is individual, return will be single selector based on input.
+   * @private
+   * @param {string} size - Accepts string for size definition.
+   * @returns {string} - Returns selector.
+   */
+  spacingApplied(size) {
+    switch (size) {
+      case 'none': return `util_stackMarginnone--${this.margin}`;
+      case '25': return `util_stackMargin25--${this.margin}`;
+      case '50': return `util_stackMargin50--${this.margin}`;
+      case '100': return `util_stackMargin100--${this.margin}`;
+      case '150': return `util_stackMargin150--${this.margin}`;
+      case '200': return `util_stackMargin200--${this.margin}`;
+      case '300': return `util_stackMargin300--${this.margin}`;
+      case '400': return `util_stackMargin400--${this.margin}`;
+      case '600': return `util_stackMarginX600--${this.margin}`;
+      case '800': return `util_stackMargin800--${this.margin}`;
+      default: return '';
+    }
+  }
+
+  /**
+   * Creates HTML template for use in render function.
+   * @private
+   * @param {string} level - Accepts string value.
+   * @returns {string} - Returns HTML template.
+   */
+  template(level) {
+    if (this.display === '' || this.display === null) {
+      this.display = 'display';
+    }
+
+    switch (level) {
+      case '2': return x`<h2 class="heading heading--${this.display} ${this.spacingDecision(this.size)}" style="color: ${o(this.color ? this.color : undefined)}"><slot></slot></h2>`;
+      case '3': return x`<h3 class="heading heading--${this.display} ${this.spacingDecision(this.size)}" style="color: ${o(this.color ? this.color : undefined)}"><slot></slot></h3>`;
+      case '4': return x`<h4 class="heading heading--${this.display} ${this.spacingDecision(this.size)}" style="color: ${o(this.color ? this.color : undefined)}"><slot></slot></h4>`;
+      case '5': return x`<h5 class="heading heading--${this.display} ${this.spacingDecision(this.size)}" style="color: ${o(this.color ? this.color : undefined)}"><slot></slot></h5>`;
+      case '6': return x`<h6 class="heading heading--${this.display} ${this.spacingDecision(this.size)}" style="color: ${o(this.color ? this.color : undefined)}"><slot></slot></h6>`;
+      default: return x`<h1 class="heading heading--${this.display} ${this.spacingDecision(this.size)}" style="color: ${o(this.color ? this.color : undefined)}"><slot></slot></h1>`;
+    }
+  }
+  // function that renders the HTML and CSS into  the scope of the component
+
+  render() {
+    return this.template(this.level);
+  }
+}
+
+var headerVersion = '3.0.0';
+
+// Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
+// See LICENSE in the project root for license information.
+
+
+class AuroBibtemplate extends r$4 {
+
+  constructor() {
+    super();
+
+    AuroLibraryRuntimeUtils.prototype.handleComponentTagRename(this, 'auro-bibtemplate');
+
+    const versioning = new AuroDependencyVersioning();
+    this.iconTag = versioning.generateTag('auro-icon', iconVersion, AuroIcon);
+    this.headerTag = versioning.generateTag('auro-header', headerVersion, AuroHeader);
+  }
+
+  static get styles() {
+    return [
+      colorCss$1,
+      styleCss$2,
+      tokenCss
+    ];
+  }
+
+  // function to define props used within the scope of this component
+  static get properties() {
+    return {
+      isFullscreen: {
+        type: Boolean,
+        reflect: true,
+      },
+      large: {
+        type: Boolean,
+        reflect: true,
+      }
+    };
+  }
+
+  // function to define props used within the scope of this component
+  /**
+   * This will register this element with the browser.
+   * @param {string} [name="auro-bibtemplate"] - The name of element that you want to register to.
+   *
+   * @example
+   * AuroCheckbox.register("custom-bibtemplate") // this will register this element to <custom-bibtemplate/>
+   *
+   */
+  static register(name = "auro-bibtemplate") {
+    AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroBibtemplate);
+  }
+
+  /**
+   * Prevents scrolling of the body when touching empty areas of the component.
+   * @param {Event} event - The touchmove event.
+   * @returns {void}
+   */
+  preventBodyScroll(event) {
+    if (event.target === this) {
+      event.preventDefault();
+    }
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+
+    this.preventBodyScroll = this.preventBodyScroll.bind(this);
+    this.addEventListener('touchmove', this.preventBodyScroll, { passive: false });
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
 
-    // Add the tag name as an attribute if it is different than the component name
-    this.runtimeUtils.handleComponentTagRename(this, 'auro-dropdown');
+    this.removeEventListener('touchmove', this.preventBodyScroll, { passive: false });
+  }
+
+  onCloseButtonClick() {
+    this.dispatchEvent(new Event("close-click", { bubbles: true,
+      composed: true }));
   }
 
   /**
    * Exposes CSS parts for styling from parent components.
-   * @private
    * @returns {void}
    */
   exposeCssParts() {
-    this.setAttribute('exportparts', 'trigger:dropdownTrigger, chevron:dropdownChevron, helpText:dropdownHelpText, size:dropdownSize');
+    this.setAttribute('exportparts', 'bibtemplate:dropdownBibTemplate');
   }
 
-  /**
-   * Determines if content is within a custom slot.
-   * @private
-   * @param {HTMLElement} element - The element to check.
-   * @returns {Boolean}
-   */
-  isCustomSlotContent(element) {
-    let currentElement = element;
+  // function that renders the HTML and CSS into  the scope of the component
+  render() {
+    return u`
+      <div id="bibTemplate" part="bibtemplate">
+      ${this.isFullscreen ? u`
+        <div id="headerContainer">
+          <button id="closeButton" @click="${this.onCloseButtonClick}">
+            <${this.iconTag} category="interface" name="x-lg"></${this.iconTag}>
+          </button>
+          <${this.headerTag} display="${this.large ? 'display' : '600'}" level="3" size="none" id="header">
+            <slot name="header"></slot>
+          </${this.headerTag}>
+          <span id="subheader">
+            <slot name="subheader"></slot>
+          </span>
+        </div>` : null}
 
-    let inCustomSlot = false;
+        <div id="bodyContainer">
+          <slot></slot>
+        </div>
 
-    while (currentElement) {
-      currentElement = currentElement.parentElement;
+      ${this.isFullscreen ? u`
+        <div id="footerContainer">
+          <slot name="footer"></slot>
+        </div>` : null}
+      </div>
+      `;
+  }
+}
 
-      if (currentElement && currentElement.hasAttribute('slot')) {
-        inCustomSlot = true;
-        break;
-      }
-    }
+var bibTemplateVersion = '1.0.0';
 
-    return inCustomSlot;
+/**
+ * @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(value) {
+  // Allow undefined
+  if (value === undefined) {
+    return undefined;
   }
 
-  /**
-   * Handles changes to the trigger content slot and updates related properties.
-   *
-   * It first updates the floater settings
-   * Then, it retrieves the assigned nodes from the event target and checks if any of
-   * the nodes contain non-empty text content, updating the `hasTriggerContent` property accordingly.
-   *
-   * @private
-   * @method handleTriggerContentSlotChange
-   * @param {Event} event - native slotchange event
-   * @returns {void}
-   */
-  handleTriggerContentSlotChange(event) {
-    this.floater.handleTriggerTabIndex();
+  // Return the value if it is already an array
+  if (Array.isArray(value)) {
+    return value;
+  }
 
-    if (event) {
-      this.triggerNode = event.target;
-      this.triggerContentSlot = event.target.assignedNodes();
-    }
+  try {
+    // If value is a JSON string, parse it
+    const parsed = typeof value === 'string' ? JSON.parse(value) : value;
 
-    if (this.triggerContentSlot) {
-      this.hasTriggerContent = this.triggerContentSlot.some((slot) => {
-        if (slot.textContent.trim()) {
-          return true;
-        }
-        const slotInSlot = slot.querySelector('slot');
-        if (!slotInSlot) {
-          return false;
-        }
-        const slotsInSlotNodes = slotInSlot.assignedNodes();
-        return slotsInSlotNodes.some((ss) => Boolean(ss.textContent.trim()));
-      });
-    } else {
-      this.hasTriggerContent = false;
+    // 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);
   }
 
-  /**
-   * Handles the default slot change event and updates the content.
-   *
-   * This method retrieves all nodes assigned to the default slot of the event target and appends them
-   * to the `bibContent` element. If a callback function `onSlotChange` is defined, it is invoked to
-   * notify about the slot change.
-   *
-   * @private
-   * @method handleDefaultSlot
-   * @param {Event} event - The event object representing the slot change.
-   * @fires Function#onSlotChange - Optional callback invoked when the slot content changes.
-   */
-  handleDefaultSlot(event) {
-    [...event.target.assignedNodes()].forEach((node) => this.bibContent.append(node));
+  // Throw error if the input is not an array or undefined
+  throw new Error('Invalid value: Input must be an array or undefined');
+}
 
-    if (this.onSlotChange) {
-      this.onSlotChange();
+/**
+ * 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;
+}
 
-  // function that renders the HTML and CSS into  the scope of the component
-  render() {
-    return u$1`
-      <div>
-        <div
-          id="trigger"
-          class="trigger"
-          part="trigger"
-          role="button"
-          aria-labelledby="triggerLabel"
-          aria-controls="popover"
-          tabindex="${this.tabIndex}"
-          >
-          <div class="triggerContentWrapper">
-            <label class="label" id="triggerLabel" hasTrigger=${this.hasTriggerContent}>
-              <slot name="label"></slot>
-            </label>
-            <div class="triggerContent">
-              <slot
-                name="trigger"
-                @slotchange="${(event) => this.handleTriggerContentSlotChange(event)}"></slot>
-            </div>
-          </div>
-          ${this.chevron || this.common ? u$1`
-              <div
-                id="showStateIcon"
-                part="chevron">
-                <${this.iconTag}
-                  category="interface"
-                  name="chevron-down"
-                  customColor
-                  ?disabled=${this.disabled}
-                  >
-                </${this.iconTag}>
-              </div>
-            ` : undefined }
-        </div>
-        <div
-          class="helpText"
-          part="helpText">
-          <slot name="helpText"></slot>
-        </div>
-        <div class="slotContent">
-          <slot @slotchange="${this.handleDefaultSlot}"></slot>
-        </div>
-        <div id="bibSizer" part="size"></div>
-        <auro-dropdownbib
-          id="bib"
-          role="tooltip"
-          ?common="${this.common}"
-          ?rounded="${this.common || this.rounded}"
-          ?inset="${this.common || this.inset}">
-        </auro-dropdownbib>
-      </div>
-    `;
+/**
+ * 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;
   }
 }
 
-AuroDropdown.register();
+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}`;
 
-var dropdownVersion = '3.0.0';
+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 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{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}`;
+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 colorCss = 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)}`;
+var styleCss = i$g`*,*: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)}#slotHolder{display:none}`;
 
-var tokensCss = i$b`:host{--ds-auro-select-placeholder-text-color: var(--ds-color-text-secondary-default, $ds-color-text-secondary-default)}`;
+var colorCss = i$g`*,*: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 = i$g`: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.
@@ -3391,21 +4779,22 @@ var tokensCss = i$b`:host{--ds-auro-select-placeholder-text-color: var(--ds-colo
  * The auro-select element is a wrapper for auro-dropdown and auro-menu to create a dropdown menu control.
  *
  * @slot - Default slot for the menu content.
+ * @slot bib.fullscreen.headline - Defines the headline to display above menu-options
  * @slot label - Defines the content of the label.
  * @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.privateDefaults();
 
     const idLength = 36;
     const idSubstrEnd = 8;
@@ -3426,18 +4815,23 @@ class AuroSelect extends r$4 {
     /**
      * @private
      */
-    this.runtimeUtils = new AuroLibraryRuntimeUtils$1();
+    this.runtimeUtils = new AuroLibraryRuntimeUtils$3();
 
     /**
      * Generate unique names for dependency components.
      */
-    const versioning = new AuroDependencyVersioning$1();
+    const versioning = new AuroDependencyVersioning$2();
 
     /**
      * @private
      */
     this.dropdownTag = versioning.generateTag('auro-dropdown', dropdownVersion, AuroDropdown);
 
+    /**
+     * @private
+     */
+    this.bibtemplateTag = versioning.generateTag('auro-bibtemplate', bibTemplateVersion, AuroBibtemplate);
+
     /**
      * @private
      */
@@ -3451,6 +4845,9 @@ class AuroSelect extends r$4 {
   privateDefaults() {
     this.options = [];
     this.optionActive = null;
+    this.optionSelected = undefined;
+    this.value = undefined;
+    this.fullscreenBreakpoint = 'sm';
   }
 
   // This function is to define props used within the scope of this component
@@ -3475,6 +4872,25 @@ class AuroSelect extends r$4 {
         reflect: true
       },
 
+      /**
+       * 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.
+       * @default sm
+       */
+      fullscreenBreakpoint: {
+        type: String,
+        reflect: true
+      },
+
+      /**
+       * If declared, make mobileHeadline in HeadingDisplay.
+       * Otherwise, Heading 600
+       */
+      largeFullscreenHeadline: {
+        type: Boolean,
+        reflect: true
+      },
+
       /**
        * When true, checkmark on selected option will no longer be present.
        */
@@ -3502,7 +4918,9 @@ class AuroSelect extends r$4 {
        * Specifies the current selected menuOption.
        */
       optionSelected: {
-        type: Object
+        // Allow HTMLElement[] arrays and undefined
+        converter: arrayConverter,
+        hasChanged: arrayOrUndefinedHasChanged
       },
 
       /**
@@ -3561,8 +4979,19 @@ class AuroSelect extends r$4 {
        * Value selected for the component.
        */
       value: {
-        type: String
-      }
+        // Allow string[] arrays and undefined
+        converter: arrayConverter,
+        hasChanged: arrayOrUndefinedHasChanged
+      },
+
+      /**
+       * Sets multi-select mode, allowing multiple options to be selected at once.
+       */
+      multiSelect: {
+        type: Boolean,
+        reflect: true,
+        attribute: 'multiselect'
+      },
     };
   }
 
@@ -3583,6 +5012,10 @@ class AuroSelect extends r$4 {
     this.dropdown = this.shadowRoot.querySelector(this.dropdownTag._$litStatic$);
     this.menuWrapper = this.dropdown.querySelector('.menuWrapper');
 
+    // setting up bibtemplate
+    this.bibtemplate = this.dropdown.querySelector(this.bibtemplateTag._$litStatic$); // eslint-disable-line no-underscore-dangle
+    this.bibtemplate.append(this.menuWrapper);
+
     if (this.customBibWidth) {
       this.dropdown.dropdownWidth = this.customBibWidth;
     }
@@ -3600,33 +5033,34 @@ class AuroSelect extends r$4 {
    *
    */
   static register(name = "auro-select") {
-    AuroLibraryRuntimeUtils$1.prototype.registerComponent(name, AuroSelect);
+    AuroLibraryRuntimeUtils$3.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 +5080,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 +5094,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 +5112,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 +5137,7 @@ class AuroSelect extends r$4 {
         this.dropdown.show();
 
         if (this.dropdown.isPopoverVisible) {
-          this.menu.selectNextItem('up');
+          this.menu.navigateOptions('up');
         }
       }
 
@@ -3707,7 +5147,7 @@ class AuroSelect extends r$4 {
         this.dropdown.show();
 
         if (this.dropdown.isPopoverVisible) {
-          this.menu.selectNextItem('down');
+          this.menu.navigateOptions('down');
         }
       }
 
@@ -3719,7 +5159,11 @@ class AuroSelect extends r$4 {
       }
 
       if (evt.key === 'Tab') {
-        this.dropdown.hide();
+        if (this.dropdown.isBibFullscreen) {
+          evt.preventDefault();
+        } else {
+          this.dropdown.hide();
+        }
       }
     });
 
@@ -3770,11 +5214,30 @@ 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);
     }
   }
 
+  /**
+   * Watch for slot changes and recalculate the menuoptions.
+   * @private
+   * @param {Event} event - `slotchange` event.
+   * @returns {void}
+   */
+  handleSlotChange(event) {
+    // Remove previous slot nodes if necessary.
+    const oldSlots = this.bibtemplate.querySelectorAll(`[slot="header"]`);
+    oldSlots.forEach((old) => old.remove());
+
+    const newSlots = event.target.assignedNodes();
+    newSlots.forEach((node) => {
+      const clone = node.cloneNode(true);
+      clone.setAttribute('slot', "header");
+      this.bibtemplate.append(clone);
+    });
+  }
+
   /**
    * Determines the element error state based on the `required` attribute and input value.
    * @private
@@ -3828,22 +5291,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 +5325,7 @@ class AuroSelect extends r$4 {
     }
 
     if (changedProperties.has('error')) {
-      this.validation.validate(this, true);
+      this.validate(true);
     }
   }
 
@@ -3863,6 +5337,24 @@ class AuroSelect extends r$4 {
     this.validation.reset(this);
   }
 
+  /**
+   * Hide dropdownbib.
+   * @private
+   */
+  hideBib() {
+    if (this.dropdown) {
+      this.dropdown.hide();
+    }
+  }
+
+  /**
+   * 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,49 +5364,57 @@ class AuroSelect extends r$4 {
       hidden: this.value,
     };
 
-    return u$3`
+    return u$6`
       <div class="outerWrapper">
         <div aria-live="polite" class="util_displayHiddenVisually">
           ${this.optionActive && this.options.length > 0
-            ? u$3`
+            ? u$6`
               ${`${this.optionActive.innerText}, option ${this.options.indexOf(this.optionActive) + 1} of ${this.options.length}`}
             `
             : undefined
           };
 
           ${this.optionSelected && this.options.length > 0
-            ? u$3`
+            ? u$6`
             ${`${this.optionSelected.innerText} selected`}
             `
             : undefined
           };
         </div>
+        <div id="slotHolder" aria-hidden="true">
+          <slot name="bib.fullscreen.headline" @slotchange="${this.handleSlotChange}"></slot>
+        </div>
         <${this.dropdownTag}
           for="selectmenu"
           ?error="${this.validity !== undefined && this.validity !== 'valid'}"
           common
           fluid
+          .fullscreenBreakpoint="${this.fullscreenBreakpoint}"
           ?matchWidth="${!this.flexMenuWidth}"
           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$9(placeholderClass)}"><slot name="placeholder"></slot></span>
           </span>
+
           <div class="menuWrapper">
           </div>
+
+          <${this.bibtemplateTag} ?large="${this.largeFullscreenHeadline}" @close-click="${this.hideBib}">
+          </${this.bibtemplateTag}>
           <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$6`
+                <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$6`
+                <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,6 +5422,4 @@ class AuroSelect extends r$4 {
   }
 }
 
-AuroSelect.register();
-
 export { AuroSelect };