@aurodesignsystem-dev/auro-formkit 0.0.0-pr1460.2 → 0.0.0-pr1462.0

package/components/combobox/demo/registered.min.js

@@ -5278,7 +5278,7 @@ let AuroHelpText$2 = class AuroHelpText extends i$4 {
   }
 };
 
-var formkitVersion$2 = '202605070044';
+var formkitVersion$2 = '202605071937';
 
 let AuroElement$2 = class AuroElement extends i$4 {
   static get properties() {
@@ -13030,7 +13030,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$4 {
   }
 };
 
-var formkitVersion$1 = '202605070044';
+var formkitVersion$1 = '202605071937';
 
 // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -14095,7 +14095,7 @@ class AuroBibtemplate extends i$4 {
   }
 }
 
-var formkitVersion = '202605070044';
+var formkitVersion = '202605071937';
 
 var styleCss$3 = i$7`.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{display:block;text-align:left}:host [auro-dropdown]{--ds-auro-dropdown-trigger-background-color: transparent}:host #inputInBib::part(wrapper){box-shadow:none}:host #inputInBib::part(accent-left){display:none}:host([layout*=classic]) [auro-input]{width:100%}:host([layout*=classic]) [auro-input]::part(helpText){display:none}:host([layout*=classic]) #slotHolder{display:none}`;
 
@@ -16125,1943 +16125,1943 @@ class s{get value(){return this.o}set value(s){this.setValue(s);}setValue(s,t=fa
  * SPDX-License-Identifier: BSD-3-Clause
  */class e extends Event{constructor(t,s){super("context-provider",{bubbles:true,composed:true}),this.context=t,this.contextTarget=s;}}class i extends s{constructor(s,e,i){super(void 0!==e.context?e.initialValue:i),this.onContextRequest=t=>{if(t.context!==this.context)return;const s=t.contextTarget??t.composedPath()[0];s!==this.host&&(t.stopPropagation(),this.addCallback(t.callback,s,t.subscribe));},this.onProviderRequest=s=>{if(s.context!==this.context)return;if((s.contextTarget??s.composedPath()[0])===this.host)return;const e=new Set;for(const[s,{consumerHost:i}]of this.subscriptions)e.has(s)||(e.add(s),i.dispatchEvent(new s$2(this.context,i,s,true)));s.stopPropagation();},this.host=s,void 0!==e.context?this.context=e.context:this.context=e,this.attachListeners(),this.host.addController?.(this);}attachListeners(){this.host.addEventListener("context-request",this.onContextRequest),this.host.addEventListener("context-provider",this.onProviderRequest);}hostConnected(){this.host.dispatchEvent(new e(this.context,this.host));}}
 
-var styleCss = i$7`.body-default{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-default-weight, );letter-spacing:var(--wcss-body-letter-spacing, 0);font-size:var(--wcss-body-default-font-size, 1rem);line-height:var(--wcss-body-default-line-height, 1.5rem)}.body-default-emphasized{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-default-emphasized-weight, );letter-spacing:var(--wcss-body-letter-spacing, 0);font-size:var(--wcss-body-default-emphasized-font-size, 1rem);line-height:var(--wcss-body-default-emphasized-line-height, 1.5rem)}.body-lg{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-lg-weight, );letter-spacing:var(--wcss-body-letter-spacing, 0);font-size:var(--wcss-body-lg-font-size, 1.125rem);line-height:var(--wcss-body-lg-line-height, 1.625rem)}.body-lg-emphasized{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-lg-emphasized-weight, );letter-spacing:var(--wcss-body-letter-spacing, 0);font-size:var(--wcss-body-lg-emphasized-font-size, 1.125rem);line-height:var(--wcss-body-lg-emphasized-line-height, 1.625rem)}.body-sm{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-sm-weight, );letter-spacing:var(--wcss-body-letter-spacing, 0);font-size:var(--wcss-body-sm-font-size, 0.875rem);line-height:var(--wcss-body-sm-line-height, 1.25rem)}.body-sm-emphasized{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-sm-emphasized-weight, );letter-spacing:var(--wcss-body-letter-spacing, 0);font-size:var(--wcss-body-sm-emphasized-font-size, 0.875rem);line-height:var(--wcss-body-sm-emphasized-line-height, 1.25rem)}.body-xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-xs-weight, );letter-spacing:var(--wcss-body-letter-spacing, 0);font-size:var(--wcss-body-xs-font-size, 0.75rem);line-height:var(--wcss-body-xs-line-height, 1rem)}.body-xs-emphasized{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-xs-emphasized-weight, );letter-spacing:var(--wcss-body-letter-spacing, 0);font-size:var(--wcss-body-xs-emphasized-font-size, 0.75rem);line-height:var(--wcss-body-xs-emphasized-line-height, 1rem)}.body-2xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-2xs-weight, );letter-spacing:var(--wcss-body-letter-spacing, 0);font-size:var(--wcss-body-2xs-font-size, 0.625rem);line-height:var(--wcss-body-2xs-line-height, 0.875rem)}.body-2xs-emphasized{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-2xs-emphasized-weight, );letter-spacing:var(--wcss-body-letter-spacing, 0);font-size:var(--wcss-body-2xs-emphasized-font-size, 0.625rem);line-height:var(--wcss-body-2xs-emphasized-line-height, 0.875rem)}.display-2xl{font-family:var(--wcss-display-2xl-family, "AS Circular"),var(--wcss-display-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-weight:var(--wcss-display-2xl-weight, 300);line-height:var(--wcss-display-2xl-line-height, 1.3);font-size:var(--wcss-display-2xl-font-size, clamp(3.5rem, 6vw, 5.375rem));letter-spacing:var(--wcss-display-2xl-letter-spacing, 0)}.display-xl{font-family:var(--wcss-display-xl-family, "AS Circular"),var(--wcss-display-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-weight:var(--wcss-display-xl-weight, 300);line-height:var(--wcss-display-xl-line-height, 1.3);font-size:var(--wcss-display-xl-font-size, clamp(3rem, 5.3333333333vw, 4.5rem));letter-spacing:var(--wcss-display-xl-letter-spacing, 0)}.display-lg{font-family:var(--wcss-display-lg-family, "AS Circular"),var(--wcss-display-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-weight:var(--wcss-display-lg-weight, 300);line-height:var(--wcss-display-lg-line-height, 1.3);font-size:var(--wcss-display-lg-font-size, clamp(2.75rem, 4.6666666667vw, 4rem));letter-spacing:var(--wcss-display-lg-letter-spacing, 0)}.display-md{font-family:var(--wcss-display-md-family, "AS Circular"),var(--wcss-display-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-weight:var(--wcss-display-md-weight, 300);line-height:var(--wcss-display-md-line-height, 1.3);font-size:var(--wcss-display-md-font-size, clamp(2.5rem, 4vw, 3.5rem));letter-spacing:var(--wcss-display-md-letter-spacing, 0)}.display-sm{font-family:var(--wcss-display-sm-family, "AS Circular"),var(--wcss-display-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-weight:var(--wcss-display-sm-weight, 300);line-height:var(--wcss-display-sm-line-height, 1.3);font-size:var(--wcss-display-sm-font-size, clamp(2rem, 3.6666666667vw, 3rem));letter-spacing:var(--wcss-display-sm-letter-spacing, 0)}.display-xs{font-family:var(--wcss-display-xs-family, "AS Circular"),var(--wcss-display-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-weight:var(--wcss-display-xs-weight, 300);line-height:var(--wcss-display-xs-line-height, 1.3);font-size:var(--wcss-display-xs-font-size, clamp(1.75rem, 3vw, 2.375rem));letter-spacing:var(--wcss-display-xs-letter-spacing, 0)}.heading-xl{font-family:var(--wcss-heading-xl-family, "AS Circular"),var(--wcss-heading-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-weight:var(--wcss-heading-xl-weight, 300);line-height:var(--wcss-heading-xl-line-height, 1.3);font-size:var(--wcss-heading-xl-font-size, clamp(2rem, 3vw, 2.5rem));letter-spacing:var(--wcss-heading-xl-letter-spacing, 0)}.heading-lg{font-family:var(--wcss-heading-lg-family, "AS Circular"),var(--wcss-heading-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-weight:var(--wcss-heading-lg-weight, 300);line-height:var(--wcss-heading-lg-line-height, 1.3);font-size:var(--wcss-heading-lg-font-size, clamp(1.75rem, 2.6666666667vw, 2.25rem));letter-spacing:var(--wcss-heading-lg-letter-spacing, 0)}.heading-md{font-family:var(--wcss-heading-md-family, "AS Circular"),var(--wcss-heading-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-weight:var(--wcss-heading-md-weight, 300);line-height:var(--wcss-heading-md-line-height, 1.3);font-size:var(--wcss-heading-md-font-size, clamp(1.625rem, 2.3333333333vw, 1.75rem));letter-spacing:var(--wcss-heading-md-letter-spacing, 0)}.heading-sm{font-family:var(--wcss-heading-sm-family, "AS Circular"),var(--wcss-heading-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-weight:var(--wcss-heading-sm-weight, 300);line-height:var(--wcss-heading-sm-line-height, 1.3);font-size:var(--wcss-heading-sm-font-size, clamp(1.375rem, 2vw, 1.5rem));letter-spacing:var(--wcss-heading-sm-letter-spacing, 0)}.heading-xs{font-family:var(--wcss-heading-xs-family, "AS Circular"),var(--wcss-heading-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-weight:var(--wcss-heading-xs-weight, 300);line-height:var(--wcss-heading-xs-line-height, 1.3);font-size:var(--wcss-heading-xs-font-size, clamp(1.25rem, 1.6666666667vw, 1.25rem));letter-spacing:var(--wcss-heading-xs-letter-spacing, 0)}.heading-2xs{font-family:var(--wcss-heading-2xs-family, "AS Circular"),var(--wcss-heading-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-weight:var(--wcss-heading-2xs-weight, 300);line-height:var(--wcss-heading-2xs-line-height, 1.3);font-size:var(--wcss-heading-2xs-font-size, clamp(1.125rem, 1.5vw, 1.125rem));letter-spacing:var(--wcss-heading-2xs-letter-spacing, 0)}.accent-2xl{font-family:var(--wcss-accent-2xl-family, "Good OT"),var(--wcss-accent-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-weight:var(--wcss-accent-2xl-weight, 450);line-height:var(--wcss-accent-2xl-line-height, 1);font-size:var(--wcss-accent-2xl-font-size, clamp(2rem, 3.1666666667vw, 2.375rem));letter-spacing:var(--wcss-accent-2xl-letter-spacing, 0.05em);text-transform:uppercase}.accent-xl{font-family:var(--wcss-accent-xl-family, "Good OT"),var(--wcss-accent-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-weight:var(--wcss-accent-xl-weight, 450);line-height:var(--wcss-accent-xl-line-height, 1.3);font-size:var(--wcss-accent-xl-font-size, clamp(1.625rem, 2.3333333333vw, 2rem));letter-spacing:var(--wcss-accent-xl-letter-spacing, 0.05em);text-transform:uppercase}.accent-lg{font-family:var(--wcss-accent-lg-family, "Good OT"),var(--wcss-accent-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-weight:var(--wcss-accent-lg-weight, 450);line-height:var(--wcss-accent-lg-line-height, 1.3);font-size:var(--wcss-accent-lg-font-size, clamp(1.5rem, 2.1666666667vw, 1.75rem));letter-spacing:var(--wcss-accent-lg-letter-spacing, 0.05em);text-transform:uppercase}.accent-md{font-family:var(--wcss-accent-md-family, "Good OT"),var(--wcss-accent-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-weight:var(--wcss-accent-md-weight, 500);line-height:var(--wcss-accent-md-line-height, 1.3);font-size:var(--wcss-accent-md-font-size, clamp(1.375rem, 1.8333333333vw, 1.5rem));letter-spacing:var(--wcss-accent-md-letter-spacing, 0.05em);text-transform:uppercase}.accent-sm{font-family:var(--wcss-accent-sm-family, "Good OT"),var(--wcss-accent-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-weight:var(--wcss-accent-sm-weight, 500);line-height:var(--wcss-accent-sm-line-height, 1.3);font-size:var(--wcss-accent-sm-font-size, clamp(1.125rem, 1.5vw, 1.25rem));letter-spacing:var(--wcss-accent-sm-letter-spacing, 0.05em);text-transform:uppercase}.accent-xs{font-family:var(--wcss-accent-xs-family, "Good OT"),var(--wcss-accent-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-weight:var(--wcss-accent-xs-weight, 500);line-height:var(--wcss-accent-xs-line-height, 1.3);font-size:var(--wcss-accent-xs-font-size, clamp(1rem, 1.3333333333vw, 1rem));letter-spacing:var(--wcss-accent-xs-letter-spacing, 0.1em);text-transform:uppercase}.accent-2xs{font-family:var(--wcss-accent-2xs-family, "Good OT"),var(--wcss-accent-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-weight:var(--wcss-accent-2xs-weight, 450);line-height:var(--wcss-accent-2xs-line-height, 1.3);font-size:var(--wcss-accent-2xs-font-size, clamp(0.875rem, 1.1666666667vw, 0.875rem));letter-spacing:var(--wcss-accent-2xs-letter-spacing, 0.1em);text-transform:uppercase}:host{cursor:pointer;user-select:none;text-overflow:ellipsis;max-width:100dvw}:host .wrapper{display:flex;align-items:center;height:var(--ds-size-400, 2rem);padding-right:var(--ds-size-200, 1rem);padding-left:calc(var(--ds-size-150, 0.75rem) + var(--ds-size-300, 1.5rem) + var(--ds-size-100, 0.5rem));border-radius:var(--ds-size-100, 0.5rem);-webkit-tap-highlight-color:transparent}:host .wrapper[class*=shape-box]{border-radius:unset}:host .wrapper[class*=shape-snowflake]{border-radius:unset;line-height:24px}:host .wrapper[class*=shape-pill]{border-radius:30px}:host .wrapper[class*=-lg]{padding-top:var(--ds-size-75, 0.375rem);padding-bottom:var(--ds-size-75, 0.375rem);padding-right:var(--ds-size-150, 0.75rem);line-height:26px}:host .wrapper[class*=-xl]{padding-top:var(--ds-size-100, 0.5rem);padding-bottom:var(--ds-size-100, 0.5rem);padding-right:var(--ds-size-200, 1rem);line-height:26px}: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)}[slot=displayValue]{display:none}:host([loadingplaceholder]) .wrapper{padding-left:calc(var(--ds-size-150, 0.75rem) + var(--ds-size-300, 1.5rem) + var(--ds-size-100, 0.5rem))}:host([selected]) .wrapper{padding-left:0}:host([nocheckmark]) .wrapper{padding-left:var(--ds-size-150, 0.75rem)}:host([nocheckmark]) .wrapper[class*=-lg]{padding-left:var(--ds-size-150, 0.75rem)}:host([nocheckmark]) .wrapper[class*=-xl]{padding-left:var(--ds-size-200, 1rem)}:host([hidden]){display:none}:host([static]){pointer-events:none}:host([disabled]:hover){cursor:auto}:host([disabled]){user-select:none;pointer-events:none}`;
-
-var colorCss = i$7`:host .wrapper{background-color:var(--ds-auro-menuoption-container-color, transparent);box-shadow:inset 0 0 0 1px var(--ds-auro-menuoption-container-border-color, transparent);color:var(--ds-auro-menuoption-text-color)}:host svg{fill:var(--ds-auro-menuoption-icon-color)}:host([disabled]){--ds-auro-menuoption-container-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-menuoption-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0);--ds-auro-menuoption-icon-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host(.active){--ds-auro-menuoption-container-color: var(--ds-basic-color-surface-accent1-muted, #ebfafd)}@media(hover: hover){:host(:hover){--ds-auro-menuoption-container-color: var(--ds-basic-color-surface-accent1-muted, #ebfafd)}}:host(:focus){--ds-auro-menuoption-container-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-menuoption-container-border-color: var(--ds-basic-color-border-brand, #00274a)}:host([selected]){--ds-auro-menuoption-container-color: var(--ds-basic-color-surface-accent1-subtle, #b4eff9);--ds-auro-menuoption-text-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-menuoption-icon-color: var(--ds-basic-color-texticon-default, #2a2a2a)}:host([selected].active){--ds-auro-menuoption-container-color: var(--ds-basic-color-surface-accent1-muted, #ebfafd)}@media(hover: hover){:host([selected]:hover){--ds-auro-menuoption-container-color: var(--ds-basic-color-surface-accent1-muted, #ebfafd)}}:host([selected]:focus){--ds-auro-menuoption-container-color: var(--ds-basic-color-surface-accent1-subtle, #b4eff9);--ds-auro-menuoption-container-border-color: var(--ds-basic-color-border-brand, #00274a)}:host(:focus.active){--ds-auro-menuoption-container-color: var(--ds-basic-color-surface-accent1-muted, #ebfafd);--ds-auro-menuoption-container-border-color: var(--ds-basic-color-border-brand, #00274a)}@media(hover: hover){:host(:focus:hover){--ds-auro-menuoption-container-color: var(--ds-basic-color-surface-accent1-muted, #ebfafd);--ds-auro-menuoption-container-border-color: var(--ds-basic-color-border-brand, #00274a)}}:host([selected]:focus.active){--ds-auro-menuoption-container-color: var(--ds-basic-color-surface-accent1-muted, #ebfafd);--ds-auro-menuoption-container-border-color: var(--ds-basic-color-border-brand, #00274a)}@media(hover: hover){:host([selected]:focus:hover){--ds-auro-menuoption-container-color: var(--ds-basic-color-surface-accent1-muted, #ebfafd);--ds-auro-menuoption-container-border-color: var(--ds-basic-color-border-brand, #00274a)}}`;
-
-class p{registerComponent(t,a){customElements.get(t)||customElements.define(t,class extends a{});}closestElement(t,a=this,e=(a,s=a&&a.closest(t))=>a&&a!==document&&a!==window?s||e(a.getRootNode().host):null){return e(a)}handleComponentTagRename(t,a){const e=a.toLowerCase();t.tagName.toLowerCase()!==e&&t.setAttribute(e,true);}elementMatch(t,a){const e=a.toLowerCase();return t.tagName.toLowerCase()===e||t.hasAttribute(e)}getSlotText(t,a){const e=t.shadowRoot?.querySelector(`slot[name="${a}"]`);return (e?.assignedNodes({flatten:true})||[]).map(t=>t.textContent?.trim()).join(" ").trim()||null}}var u='<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>',g='<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" style="min-width:100%;height:auto;fill:currentColor" viewBox="0 0 142 138" part="svg"><title id="tail-DEFAULT__title">Airplane tail default image with light gray color</title><path fill="url(#paint0_linear_9225_2069)" fill-rule="evenodd" d="M124.093 14.665a3.26 3.26 0 0 1 3.208 3.829L101.097 119.85c-.47 1.087-2.211 3.398-5.692 3.471l-.106.001-80.65.013A659230 659230 0 0 1 99.08 17.412c1.214-1.497 3.275-2.722 5.372-2.747z" clip-rule="evenodd"/><defs><linearGradient id="paint0_linear_9225_2069" x1="114.823" x2="60.061" y1="14.665" y2="123.335" gradientUnits="userSpaceOnUse"><stop offset=".5" stop-color="#707984"/><stop offset=".5" stop-color="#646E7B"/></linearGradient></defs></svg>';class m extends i$4{static get properties(){return {hidden:{type:Boolean,reflect:true},hiddenVisually:{type:Boolean,reflect:true},hiddenAudible:{type:Boolean,reflect:true}}}hideAudible(t){return t?"true":"false"}}const f=new Map,w=(t,a={})=>{const e=a.responseParser||(t=>t.text());return f.has(t)||f.set(t,fetch(t).then(e)),f.get(t)};var z=i$7`: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, .75rem))}:host{color:currentColor;vertical-align:middle;display:inline-block}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}.componentWrapper{display:flex;line-height:var(--ds-auro-icon-size)}.svgWrapper{height:var(--ds-auro-icon-size);width:var(--ds-auro-icon-size)}.svgWrapper [part=svg]{display:flex}.labelWrapper{margin-left:var(--ds-size-50, .25rem)}.labelWrapper ::slotted(*){line-height:inherit!important}
-`;class y extends m{constructor(){super(),this._initializeDefaults();}_initializeDefaults(){this.onDark=false,this.appearance="default";}static get properties(){return {...m.properties,onDark:{type:Boolean,reflect:true},appearance:{type:String,reflect:true},svg:{attribute:false,reflect:true}}}static get styles(){return z}async fetchIcon(t,a){let e="";e="logos"===t?await w(`${this.uri}/${t}/${a}.svg`):await w(`${this.uri}/icons/${t}/${a}.svg`);return (new DOMParser).parseFromString(e,"text/html").body.querySelector("svg")}async firstUpdated(){try{if(!this.customSvg){const t=await this.fetchIcon(this.category,this.name);if(t)this.svg=t;else if(!t){const t=this.name?.startsWith("tail-")?g:u;this.svg=(new DOMParser).parseFromString(t,"text/html").body.querySelector("svg");}}}catch(t){this.svg=void 0;}}}i$7`.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}:host{display:inline-block;--ds-auro-icon-size: 100%;width:100%;height:100%}:host .logo{color:var(--ds-auro-alaska-color)}:host([onDark]),:host([appearance=inverse]){--ds-auro-alaska-color: #FFF}
-`;var M=i$7`:host{--ds-auro-icon-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-alaska-color: #02426D;--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}
-`;var _=i$7`:host{color:var(--ds-auro-icon-color)}:host([customColor]){color:inherit}:host(:not([onDark])[variant=accent1]),:host(:not([appearance=inverse])[variant=accent1]){--ds-auro-icon-color: var(--ds-basic-color-texticon-accent1, #265688)}:host(:not([onDark])[variant=disabled]),:host(:not([appearance=inverse])[variant=disabled]){--ds-auro-icon-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host(:not([onDark])[variant=muted]),:host(:not([appearance=inverse])[variant=muted]){--ds-auro-icon-color: var(--ds-basic-color-texticon-muted, #676767)}:host(:not([onDark])[variant=statusDefault]),:host(:not([appearance=inverse])[variant=statusDefault]){--ds-auro-icon-color: var(--ds-basic-color-status-default, #afb9c6)}:host(:not([onDark])[variant=statusInfo]),:host(:not([appearance=inverse])[variant=statusInfo]){--ds-auro-icon-color: var(--ds-basic-color-status-info, #01426a)}:host(:not([onDark])[variant=statusSuccess]),:host(:not([appearance=inverse])[variant=statusSuccess]){--ds-auro-icon-color: var(--ds-basic-color-status-success, #447a1f)}:host(:not([onDark])[variant=statusWarning]),:host(:not([appearance=inverse])[variant=statusWarning]){--ds-auro-icon-color: var(--ds-basic-color-status-warning, #fac200)}:host(:not([onDark])[variant=statusError]),:host(:not([appearance=inverse])[variant=statusError]){--ds-auro-icon-color: var(--ds-basic-color-status-error, #e31f26)}:host(:not([onDark])[variant=statusInfoSubtle]),:host(:not([appearance=inverse])[variant=statusInfoSubtle]){--ds-auro-icon-color: var(--ds-basic-color-status-info-subtle, #ebf3f9)}:host(:not([onDark])[variant=statusSuccessSubtle]),:host(:not([appearance=inverse])[variant=statusSuccessSubtle]){--ds-auro-icon-color: var(--ds-basic-color-status-success-subtle, #d6eac7)}:host(:not([onDark])[variant=statusWarningSubtle]),:host(:not([appearance=inverse])[variant=statusWarningSubtle]){--ds-auro-icon-color: var(--ds-basic-color-status-warning-subtle, #fff0b2)}:host(:not([onDark])[variant=statusErrorSubtle]),:host(:not([appearance=inverse])[variant=statusErrorSubtle]){--ds-auro-icon-color: var(--ds-basic-color-status-error-subtle, #fbc6c6)}:host(:not([onDark])[variant=fareBasicEconomy]),:host(:not([appearance=inverse])[variant=fareBasicEconomy]){--ds-auro-icon-color: var(--ds-basic-color-fare-basiceconomy, #97eaf8)}:host(:not([onDark])[variant=fareBusiness]),:host(:not([appearance=inverse])[variant=fareBusiness]){--ds-auro-icon-color: var(--ds-basic-color-fare-business, #01426a)}:host(:not([onDark])[variant=fareEconomy]),:host(:not([appearance=inverse])[variant=fareEconomy]){--ds-auro-icon-color: var(--ds-basic-color-fare-economy, #0074ca)}:host(:not([onDark])[variant=fareFirst]),:host(:not([appearance=inverse])[variant=fareFirst]){--ds-auro-icon-color: var(--ds-basic-color-fare-first, #00274a)}:host(:not([onDark])[variant=farePremiumEconomy]),:host(:not([appearance=inverse])[variant=farePremiumEconomy]){--ds-auro-icon-color: var(--ds-basic-color-fare-premiumeconomy, #005154)}:host(:not([onDark])[variant=tierOneWorldEmerald]),:host(:not([appearance=inverse])[variant=tierOneWorldEmerald]){--ds-auro-icon-color: var(--ds-basic-color-tier-program-oneworld-emerald, #139142)}:host(:not([onDark])[variant=tierOneWorldSapphire]),:host(:not([appearance=inverse])[variant=tierOneWorldSapphire]){--ds-auro-icon-color: var(--ds-basic-color-tier-program-oneworld-sapphire, #015daa)}:host(:not([onDark])[variant=tierOneWorldRuby]),:host(:not([appearance=inverse])[variant=tierOneWorldRuby]){--ds-auro-icon-color: var(--ds-basic-color-tier-program-oneworld-ruby, #a41d4a)}:host([onDark]),:host([appearance=inverse]){--ds-auro-icon-color: var(--ds-basic-color-texticon-inverse, #ffffff)}:host([onDark][variant=disabled]),:host([appearance=inverse][variant=disabled]){--ds-auro-icon-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}:host([onDark][variant=muted]),:host([appearance=inverse][variant=muted]){--ds-auro-icon-color: var(--ds-basic-color-texticon-inverse-muted, #ccd2db)}:host([onDark][variant=statusError]),:host([appearance=inverse][variant=statusError]){--ds-auro-icon-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8)}
-`;class k extends y{constructor(){super(),this._initializeDefaults();}_initializeDefaults(){this.variant=void 0,this.uri="https://cdn.jsdelivr.net/npm/@alaskaairux/icons@latest/dist",this.runtimeUtils=new p;}static get properties(){return {...y.properties,ariaHidden:{type:String,reflect:true},category:{type:String,reflect:true},customColor:{type:Boolean,reflect:true},customSvg:{type:Boolean},label:{type:Boolean,reflect:true},name:{type:String,reflect:true},variant:{type:String,reflect:true}}}static get styles(){return [y.styles,M,z,_]}static register(t="auro-icon"){p.prototype.registerComponent(t,k);}connectedCallback(){super.connectedCallback(),this.runtimeUtils.handleComponentTagRename(this,"auro-icon");}exposeCssParts(){this.setAttribute("exportparts","svg:iconSvg");}async firstUpdated(){if(await super.firstUpdated(),this.hasAttribute("ariaHidden")&&this.svg){const t=this.svg.querySelector("desc");t&&(t.remove(),this.svg.removeAttribute("aria-labelledby"));}}render(){const t={labelWrapper:true,util_displayHiddenVisually:!this.label};return b$2`
-      <div class="componentWrapper">
-        <div
-          class="${e$3({svgWrapper:true})}"
-          title="${o(this.title||void 0)}">
-          <span aria-hidden="${o(this.ariaHidden||true)}" part="svg">
-            ${this.customSvg?b$2`
-                <slot name="svg"></slot>
-              `:b$2`
-                ${this.svg}
-              `}
-          </span>
-        </div>
-
-        <div class="${e$3(t)}" part="label">
-          <slot></slot>
-        </div>
-      </div>
-    `}}
-
-var iconVersion = '9.1.2';
+/* eslint-disable */
 
-var checkmarkIcon = {"svg":"<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" aria-labelledby=\"checkmark-sm__desc\" class=\"ico_squareLarge\" role=\"img\" style=\"min-width:var(--auro-size-lg, var(--ds-size-300, 1.5rem));height:var(--auro-size-lg, var(--ds-size-300, 1.5rem));fill:currentColor\" viewBox=\"0 0 24 24\" part=\"svg\"><title/><desc id=\"checkmark-sm__desc\">a small check mark.</desc><path d=\"M8.461 11.84a.625.625 0 1 0-.922.844l2.504 2.738c.247.27.674.27.922 0l5.496-6a.625.625 0 1 0-.922-.844l-5.035 5.496z\"/></svg>"};
+class MenuService {
 
-// Copyright (c) 2021 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
-// See LICENSE in the project root for license information.
+  /**
+   * PROPERTIES AND GETTERS
+   */
 
+  /**
+   * Gets the list of registered menu options.
+   * @returns {AuroMenuOption[]}
+   */
+  get menuOptions() {
+    return this._menuOptions;
+  }
 
-/**
- * Helper method to dispatch custom events.
- * @param {HTMLElement} element - Element to dispatch event from.
- * @param {string} eventName - Name of the event to dispatch.
- * @param {Object} [detail] - Optional detail object to include with the event.
- */
-function dispatchMenuEvent(element, eventName, detail = null) {
-  const eventConfig = {
-    bubbles: true,
-    cancelable: false,
-    composed: true
-  };
+  /**
+   * Gets the currently highlighted option.
+   * @returns {AuroMenuOption|null}
+   */
+  get highlightedOption() {
+    return this._menuOptions[this.highlightedIndex] || null;
+  }
 
-  if (detail !== null) {
-    eventConfig.detail = detail;
+  /**
+   * Gets the current value(s) of the selected option(s).
+   * @returns {string|string[]|undefined}
+   */
+  get currentValue() {
+    const values = (this.selectedOptions || []).map(option => option.value);
+    return this.multiSelect ? values : values[0];
   }
 
-  element.dispatchEvent(new CustomEvent(eventName, eventConfig));
-}
+  /**
+   * Gets the label(s) of the currently selected option(s).
+   * @returns {string}
+   */
+  get currentLabel() {
+    const labels = (this.selectedOptions || []).map(option => option.textContent);
+    return this.multiSelect ? labels.join(", ") : labels[0] || '';
+  }
 
-// Copyright (c) 2021 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
-// See LICENSE in the project root for license information.
+  /**
+   * Gets the string representation of the current value(s).
+   * For multi-select, this is a JSON stringified array.
+   * @returns {string|undefined}
+   */
+  get stringValue() {
+    const { currentValue } = this;
 
+    if (Array.isArray(currentValue)) {
+      if (currentValue.length > 0) {
+        return JSON.stringify(currentValue);
+      }
+      return undefined;
+    }
 
-let menuOptionIdCounter = 0;
+    if (typeof currentValue === 'string') {
+      if (currentValue.length > 0) {
+        return currentValue;
+      }
+      return undefined;
+    }
 
-/**
- * The `auro-menuoption` element provides users a way to define a menu option.
- * @customElement auro-menuoption
- *
- * @slot default - The default slot for the menu option text.
- *
- * @event auroMenuOption-mouseover - Notifies that this option has been hovered over.
- */
-class AuroMenuOption extends AuroElement {
+    // Future: handle other types here (e.g., number, object, etc.)
+    return undefined;
+  }
 
   /**
-   * This will register this element with the browser.
-   * @param {string} [name="auro-menuoption"] - The name of the element that you want to register.
-   *
-   * @example
-   * AuroMenuOption.register("custom-menuoption") // this will register this element to <custom-menuoption/>
-   *
+   * Gets the key(s) of the currently selected option(s).
+   * @returns {string|string[]|undefined}
    */
-  static register(name = "auro-menuoption") {
-    AuroLibraryRuntimeUtils$4.prototype.registerComponent(name, AuroMenuOption);
+  get currentKeys() {
+    const keys = (this.selectedOptions || []).map(option => option.key);
+    return this.multiSelect ? keys : keys[0];
   }
 
   /**
-   * Returns whether the menu option is currently active and selectable.
-   * An option is considered active if it is not hidden, not disabled, and not static.
-   * @returns {boolean} True if the option is active, false otherwise.
+   * CONSTRUCTOR
    */
-  get isActive() {
-    return !this.hasAttribute('hidden') &&
-      !this.disabled &&
-      !this.hasAttribute('static');
-  }
 
-  constructor() {
-    super();
+  /**
+   * Creates a new MenuService instance.
+   * @param {Object} options - The options object.
+   *   @param {AuroMenu} options.host - The host element that this service will control. Required.
+   * @throws {Error} If the host is not provided.
+   */
+  constructor({ host } = {}) {
 
-    this.bindEvents();
+    // Ensure a host was passed
+    if (!host) {
+      throw new Error("MenuService requires a host element.");
+    }
 
-    /**
-     * @private
-     */
-    this.shape = undefined;
+    // Attach the service to the host
+    this.host = host;
+    this.host.addController(this);
 
-    /**
-     * @private
-     */
+    // Set default properties
     this.size = undefined;
+    this.shape = undefined;
+    this.noCheckmark = undefined;
+    this.disabled = undefined;
+    this.matchWord = undefined;
+    this.multiSelect = undefined;
+    this.allowDeselect = undefined;
+    this.selectAllMatchingOptions = undefined;
 
-    /**
-     * Generate unique names for dependency components.
-     */
-    const versioning = new AuroDependencyVersioning$3();
-    this.iconTag = versioning.generateTag('auro-formkit-menuoption-icon', iconVersion, k);
+    this.highlightedIndex = -1;
 
-    this.selected = false;
-    this.noCheckmark = false;
-    this.disabled = false;
-    this.noMatch = false;
+    this._menuOptions = [];
+    this._subscribers = [];
+    this.internalUpdateInProgress = false;
+    this.selectedOptions = [];
+    this._pendingValue = null;
+    this._pendingRetryScheduled = false;
+    this._pendingRetryCount = 0;
+  }
 
-    /**
-     * @private
-     */
-    this.runtimeUtils = new AuroLibraryRuntimeUtils$4();
+  /**
+   * PROPERTY SYNCING
+   */
 
-    // Initialize context-related properties
-    this.menuService = null;
-    this.unsubscribe = null;
+  /**
+   * Handles host updates.
+   * This is a lit reactive lifecycle method.
+   * This comes from the Lit controller interface provided by adding this service as a controller to the host.
+   * See constructor for `this.host.addController(this)`
+   * You can read more about Lit reactive controllers here: https://lit.dev/docs/composition/controllers/
+   */
+  hostUpdated() {
 
-    /**
-     * @private
-     */
-    this.handleMenuChange = this.handleMenuChange.bind(this);
+    // Reset selection if multiSelect mode changes
+    if (this.host.multiSelect !== this.multiSelect) {
+      this.selectedOptions = [];
+    }
+
+    // Update properties on host update
+    this.setProperties({
+      size: this.host.size,
+      shape: this.host.shape,
+      noCheckmark: this.host.noCheckmark,
+      disabled: this.host.disabled,
+      matchWord: this.host.matchWord,
+      multiSelect: this.host.multiSelect,
+      allowDeselect: this.host.allowDeselect,
+      selectAllMatchingOptions: this.host.selectAllMatchingOptions
+    });
   }
 
-  static get properties() {
-    return {
-      ...super.properties,
+  /**
+   * Handles host disconnection and memory cleanup.
+   */
+  hostDisconnected() {
+    this._subscribers = [];
+    this._menuOptions = [];
+    this._pendingValue = null;
+    this._pendingRetryScheduled = false;
+    this._pendingRetryCount = 0;
+  }
 
-      /**
-       * When true, disables the menu option.
-       */
-      disabled: {
-        type: Boolean,
-        reflect: true
-      },
+  /**
+   * Sets a property value if it exists on the instance and the value has changed.
+   * @param {string} property
+   * @param {any} value
+   */
+  setProperty(property, value) {
 
-      /**
-       * @private
-       */
-      event: {
-        type: String,
-        reflect: true
-      },
-
-      /**
-       * @private
-       */
-      layout: {
-        type: String
-      },
-
-      /**
-       * Allows users to set a unique key for the menu option for specified option selection. If no key is provided, the value property will be used.
-       */
-      key: {
-        type: String,
-        reflect: true
-      },
-
-      /**
-       * @private
-       */
-      menuService: {
-        type: Object,
-        state: true
-      },
-
-      /**
-       * @private
-       */
-      matchWord: {
-        type: String,
-        state: true
-      },
-
-      /**
-       * @private
-       */
-      noCheckmark: {
-        type: Boolean,
-        reflect: true
-      },
-
-      /**
-       * When true, marks this option as the "no matching results" placeholder shown by combobox when the user's input does not match any available options. Enables distinct styling and prevents the option from being treated as a selectable match.
-       */
-      noMatch: {
-        type: Boolean,
-        reflect: true,
-        attribute: 'nomatch'
-      },
-
-      /**
-       * Specifies that an option is selected.
-       */
-      selected: {
-        type: Boolean,
-        reflect: true
-      },
+    // Only update if we are tracking the property in this service
+    if (this.hasOwnProperty(property)) {
 
-      /**
-       * Specifies the tab index of the menu option.
-       */
-      tabIndex: {
-        type: Number,
-        reflect: true
-      },
+      // Check if the value has changed
+      const valueChanged = this[property] !== value;
 
-      /**
-       * Specifies the value to be sent to a server.
-       */
-      value: {
-        type: String,
-        reflect: true
-      },
-    };
+      // Update and notify if changed
+      if (valueChanged) {
+        this[property] = value;
+        this.notify({ property, value });
+      }
+    }
   }
 
-  static get styles() {
-    return [
-      styleCss,
-      colorCss,
-      tokensCss
-    ];
+  /**
+   * Sets multiple properties on the instance.
+   * @param {Object} properties - Key-value pairs of properties to set.
+   */
+  setProperties(properties) {
+    for (const [key, value] of Object.entries(properties)) {
+      this.setProperty(key, value);
+    }
   }
 
-  connectedCallback() {
-    super.connectedCallback();
-
-    // Add the tag name as an attribute if it is different than the component name
-    // Add this step soon as this node gets attached to the DOM to avoid racing condition with menu's value setting logic.
-    this.runtimeUtils.handleComponentTagRename(this, 'auro-menuoption');
+  /**
+   * MENU OPTION HIGHLIGHTING
+   */
 
-    // Set up context consumption in connectedCallback
-    this._contextConsumer = new s$1(this, {
-      context: MenuContext,
-      callback: this.attachTo.bind(this),
-      subscribe: true
-    });
+  /**
+   * Highlights the next active option in the menu.
+   */
+  highlightNext() {
+    this.moveHighlightedOption("next");
+  }
 
-    // Establish the key property as early as possible.
-    // When a framework (e.g. Svelte) inserts the element into the DOM before
-    // setting its `value` property, both `getAttribute('value')` and
-    // `getAttribute('key')` return null here. Setting `this.key = null`
-    // would block the fallback in `updated()` that assigns key from the
-    // value property (the guard checked `=== undefined`). Only assign key
-    // if at least one source attribute is actually present so that the
-    // `updated()` fallback can run when the value property arrives later.
-    const valueAttr = this.getAttribute('value');
-    const keyAttr = this.getAttribute('key');
-    const resolvedKey = keyAttr !== null ? keyAttr : valueAttr;
-    if (resolvedKey !== null) {
-      this.key = resolvedKey;
-    }
+  /**
+   * Highlights the previous active option in the menu.
+   */
+  highlightPrevious() {
+    this.moveHighlightedOption("previous");
   }
 
-  firstUpdated() {
-    // Add the tag name as an attribute if it is different than the component name
-    this.runtimeUtils.handleComponentTagRename(this, 'auro-menuoption');
+  /**
+   * Moves the highlighted option in the specified direction.
+   * @param {string} direction - The direction to move the highlight ("next" or "previous").
+   */
+  moveHighlightedOption(direction) {
 
-    // Generate unique ID if not already set (required for aria-activedescendant)
-    if (!this.id) {
-      menuOptionIdCounter += 1;
-      this.id = `menuoption-${menuOptionIdCounter}`;
-    }
+    // Get the active options
+    const activeOptions = this._menuOptions.filter(option => option.isActive);
 
-    this.setAttribute('role', 'option');
-    this.setAttribute('aria-selected', 'false');
+    // Get the currently active option
+    const currentActiveOption = activeOptions[activeOptions.indexOf(this.highlightedOption)];
 
-    this.addEventListener('mouseover', () => {
-      this.dispatchEvent(new CustomEvent('auroMenuOption-mouseover', {
-        bubbles: true,
-        cancelable: false,
-        composed: true,
-        detail: this
-      }));
-    });
-  }
+    // Determine the new index based on the currently active option and direction
+    let newIndex = currentActiveOption
+      ? direction === "previous"
+        ? activeOptions.indexOf(currentActiveOption) - 1
+        : activeOptions.indexOf(currentActiveOption) + 1
+      : direction === "previous"
+        ? activeOptions.length - 1
+        : 0;
 
-  updated(changedProperties) {
-    super.updated(changedProperties);
+    // Wrap around the index if needed
+    newIndex = newIndex < 0 ? activeOptions.length - 1 : newIndex >= activeOptions.length ? 0 : newIndex;
 
-    // Update aria-selected attribute if selected changed
-    if (changedProperties.has('selected')) {
+    // Get the new active option and set it as highlighted
+    const newActiveOption = activeOptions[newIndex];
+    this.setHighlightedOption(newActiveOption);
+  }
 
-      // Update aria-selected attribute
-      this.setAttribute('aria-selected', this.selected.toString());
+  /**
+   * Sets the highlighted index to the specified option.
+   * @param {AuroMenuOption} option - The option to highlight.
+   */
+  setHighlightedOption(option) {
 
-      // Update menu service selection state if this isn't an internal update
-      if (this.internalUpdateInProgress !== true && this.menuService) {
-        this.menuService[this.selected ? 'selectOption' : 'deselectOption'](this);
-      }
-    }
+    if (!option) return;
 
-    if (changedProperties.has('disabled')) {
-      if (this.disabled) {
-        this.setAttribute('aria-disabled', 'true');
-      } else {
-        this.removeAttribute('aria-disabled');
-      }
-    }
+    // Get the index of the option to highlight
+    const index = this._menuOptions.indexOf(option);
 
-    if (changedProperties.has('active')) {
-      this.updateActiveClasses();
-    }
+    // Update highlighted index
+    this.highlightedIndex = index;
 
-    // Update text highlight if matchWord changed
-    if (changedProperties.has('matchWord')) {
-      this.updateTextHighlight();
-    }
+    // Notify subscribers of highlight change
+    this.notify({ type: 'highlightChange', option, index: this.highlightedIndex });
 
-    // Set the key to be the passed value if no key is provided.
-    // Loose equality (== null) is intentional: it catches both null AND
-    // undefined. When a framework (e.g. Svelte, React) inserts the element
-    // before setting its value property, connectedCallback skips key
-    // assignment because both attributes are null at that point. The Lit
-    // property default for `key` is undefined (not null), so strict
-    // === null would miss the case and the fallback would never run.
-    if (changedProperties.has('value') && this.key == null) { // eslint-disable-line eqeqeq, no-eq-null
-      this.key = this.value;
-    }
+    // Dispatch the change event
+    this.dispatchChangeEvent('auroMenu-activatedOption', option);
   }
 
-  disconnectedCallback() {
-    if (this.menuService) {
-      this.menuService.unsubscribe(this.handleMenuChange);
-      this.menuService.removeMenuOption(this);
-    }
+  /**
+   * Sets the highlighted option to the option at the specified index if it exists.
+   * @param {number} index
+   */
+  setHighlightedIndex(index) {
+    const option = this._menuOptions[index] || null;
+    this.setHighlightedOption(option);
   }
 
   /**
-   * Sets up event listeners for user interaction with the menu option.
-   * This function enables click and mouse enter events to trigger selection and highlighting logic.
+   * Selects the currently highlighted option.
    */
-  bindEvents() {
-    this.addEventListener('click', this.handleClick.bind(this));
-    this.addEventListener('mouseenter', this.handleMouseEnter.bind(this));
+  selectHighlightedOption() {
+    if (this.highlightedOption) {
+      this.toggleOption(this.highlightedOption);
+    }
   }
 
   /**
-   * Attaches this menu option to a menu service and subscribes to its events.
-   * This method enables the option to participate in menu selection and highlighting logic.
-   * @param {Object} service - The menu service instance to attach to.
+   * SELECTION AND DESELECTION METHODS
    */
-  attachTo(service) {
-    if (!service) {
-      return;
-    }
-    this.menuService = service;
-    this.menuService.addMenuOption(this);
-    this.menuService.subscribe(this.handleMenuChange);
-  }
 
   /**
-   * Handles changes from the menu service and updates the option's state.
-   * This function synchronizes the option's properties and selection/highlight state with menu events.
-   * @param {Object} event - The event object from the menu service.
+   * Selects one or more options in a batch operation
+   * @param {AuroMenuOption|AuroMenuOption[]} options - Single option or array of options to select
    */
-  handleMenuChange(event) {
+  selectOptions(options) {
+    let optionsToSelect = Array.isArray(options) ? options : [options];
 
-    // Ignore events without a type or property
-    if (!event || (!event.type && !event.property)) {
-      return;
-    }
+    // Filter out options that are inactive
+    optionsToSelect = optionsToSelect.filter(option => option.isActive);
 
-    // Update reactive properties based on event type
-    if (event.property && Object.keys(AuroMenuOption.properties).includes(event.property)) {
-      this[event.property] = event.value;
-    }
+    if (!optionsToSelect.length) return;
 
-    // Handle highlight changes
-    if (event.type === 'highlightChange') {
-      const isActive = event.option === this;
-      this.active = isActive;
-      this.updateActiveClasses();
+    if (this.multiSelect) {
+      this.selectedOptions = [...(this.selectedOptions || []), ...optionsToSelect];
+    } else {
+      // In single select mode, only take the last option
+      this.selectedOptions = [optionsToSelect[optionsToSelect.length - 1]];
     }
 
-    if (event.type === 'stateChange') {
-      const isSelected = event.selectedOptions.includes(this);
-      this.setInternalSelected(isSelected);
-    }
+    this.stageUpdate();
   }
 
   /**
-   * Updates the internal selected state of the menu option bypassing 'updated' and triggers custom events if selected.
-   * This function ensures the option's selection state is synchronized with menu logic and notifies listeners.
-   * @param {boolean} isSelected - Whether the option should be marked as selected.
+   * Deselects one or more options in a batch operation
+   * @param {AuroMenuOption|AuroMenuOption[]} options - Single option or array of options to deselect
    */
-  setInternalSelected(isSelected) {
-    this.internalUpdateInProgress = true;
-    this.selected = isSelected;
+  deselectOptions(options) {
+    const optionsToDeselect = Array.isArray(options) ? options : [options];
 
-    // Fire custom event if selected
-    if (isSelected) {
-      this.handleCustomEvent();
+    if (!optionsToDeselect.length) return;
+
+    // Check if deselection should be prevented
+    const shouldPreventDeselect = !this.allowDeselect && !this.multiSelect;
+    const isOnlySelectedOption = this.selectedOptions.length === 1 && optionsToDeselect.includes(this.selectedOptions[0]);
+
+    // Prevent deselecting the only selected option if not allowed
+    if (shouldPreventDeselect && isOnlySelectedOption) {
+      optionsToDeselect.forEach(option => {
+        option.selected = true;
+      });
+      this.dispatchChangeEvent('auroMenu-deselectPrevented', {
+        values: optionsToDeselect
+      });
+      return;
     }
 
-    setTimeout(() => {
-      this.internalUpdateInProgress = false;
-    }, 0);
+    const optionsSet = new Set(optionsToDeselect);
+    this.selectedOptions = (this.selectedOptions || [])
+      .filter(opt => !optionsSet.has(opt));
+
+    this.stageUpdate();
   }
 
   /**
-   * Sets the selected state of the menu option.
-   * This function updates whether the option is currently selected.
-   * @param {boolean} isSelected - Whether the option should be marked as selected.
-   * @deprecated Simply modify the `selected` property directly instead.
+   * Selects a single option.
+   * @param {AuroMenuOption} option
    */
-  setSelected(isSelected) {
-    this.selected = isSelected;
+  selectOption(option) {
+    this.selectOptions(option);
   }
 
   /**
-   * Updates the active state and visual highlighting of the menu option.
-   * This function toggles the option's active status and applies or removes the active CSS class.
-   * @param {boolean} isActive - Whether the option should be marked as active.
-   * @deprecated Simply modify the `active` property directly instead.
+   * Deselects a single option.
+   * @param {AuroMenuOption} option
    */
-  updateActive(isActive) {
-
-    // Set active state
-    this.active = isActive;
-    this.updateActiveClasses();
+  deselectOption(option) {
+    this.deselectOptions(option);
   }
 
   /**
-   * Updates the CSS class for the menu option based on its active state.
-   * This function adds or removes the 'active' class to visually indicate the option's active status.
-   * @private
+   * Toggles the selection state of a single option.
+   * @param {AuroMenuOption} option
    */
-  updateActiveClasses() {
-    // Update class based on active state
-    if (this.active) this.classList.add('active');
-    else this.classList.remove('active');
+  toggleOption(option) {
+    if (option.selected) {
+      this.deselectOption(option);
+    } else {
+      this.selectOption(option);
+    }
   }
 
-
   /**
-   * Updates the visual highlighting of text within the menu option based on the current match word.
-   * This function highlights matching text segments and manages nested spacers for display formatting.
-   * @private
+   * Selects options based on their value(s) when compared to a passed value or values.
+   * Value or values are normalized to an array of strings that can be matched to option keys.
+   * @param {string|number|Array<string|number>} value - The value(s) to select.
    */
-  updateTextHighlight() {
+  selectByValue(value) {
+    const isEmptyValue = value === undefined ||
+        value === null ||
+        (Array.isArray(value) && value.length === 0) ||
+        (typeof value === 'string' && value.trim() === '');
 
-    // Regex for matchWord if needed
-    let regexWord = null;
+    // Early exit for invalid/empty values
+    if (isEmptyValue) {
+      this.selectedOptions.forEach(opt => opt.selected = false);
+      this.selectedOptions = [];
+      return;
+    }
 
-    if (this.matchWord && this.matchWord.length) {
-      const escapedWord = this.matchWord.replace(/[.*+?^${}()|[\]\\]/gu, '\\$&');
-      regexWord = new RegExp(escapedWord, 'giu');
+    // If an internal update cycle is still in progress, defer value application
+    // rather than dropping it.
+    if (this.internalUpdateInProgress || this.host.internalUpdateInProgress) {
+      this.queuePendingValue(value);
+      return;
     }
 
-    // Update text highlighting if matchWord changed
-    if (regexWord &&
-      this.isActive && !this.hasAttribute('persistent')) {
-      const nested = this.querySelectorAll('.nestingSpacer');
+    // Normalize values to array of strings
+    const normalizedValues = this._getNormalizedValues(value);
 
-      const displayValueEl = this.querySelector('[slot="displayValue"]');
-      if (displayValueEl) {
-        this.removeChild(displayValueEl);
+    // Validate for single-select mode
+    let validatedValues = normalizedValues;
+    if (normalizedValues.length > 1 && !this.multiSelect) {
+      console.warn("MenuService - Multiple values provided for single-select menu. Only the first value will be selected.");
+      validatedValues = [normalizedValues[0]];
+    }
+
+    if (this._menuOptions.length === 0) {
+      this.queuePendingValue(value);
+      return;
+    }
+
+    // Find matching options by comparing available options to validated values
+    const trackedKeys = new Set();
+    const optionsToSelect = this._menuOptions.filter(option => {
+      const passesFilter = validatedValues.includes(option.key);
+      const alreadyTracked = trackedKeys.has(option.key);
+      const isActive = option.isActive;
+
+      trackedKeys.add(option.key);
+
+      // Include the option in the options to be selected if it passes the filter check and
+      // either hasn't been tracked yet or selectAllMatchingOptions is true
+      return isActive && passesFilter && (!alreadyTracked || (alreadyTracked && this.selectAllMatchingOptions));
+    });
+
+    // Handle no matches: clear existing selection, but do not dispatch an intermediate
+    // undefined value that can overwrite the host value in parent components.
+    if (!optionsToSelect.length) {
+      const hasUnresolvedKeys = this._menuOptions.some((option) => option.isActive && option.key == null);
+
+      if (hasUnresolvedKeys) {
+        this.queuePendingValue(value);
+        return;
       }
 
-      // Create nested spacers
-      const nestingSpacerBundle = [...nested].map(() => this.nestingSpacer).join('');
+      this.clearPendingValue();
 
-      // Update with spacers and matchWord
-      this.innerHTML = nestingSpacerBundle +
-        this.textContent.replace(
-          regexWord,
-          (match) => `<strong>${match}</strong>`
-        );
-      if (displayValueEl) {
-        this.append(displayValueEl);
+      if (this.selectedOptions.length > 0) {
+        this.selectedOptions = [];
       }
-    }
-  }
 
-  /**
-   * Handles click events on the menu option, toggling its selected state.
-   * This function dispatches a click event and updates selection if the option is not disabled.
-   * @private
-   */
-  handleClick() {
-    if (!this.disabled) {
-      this.dispatchClickEvent();
-      this.selected = !this.selected;
+      // Always notify so the host resets any stale invalid value, even when
+      // selectedOptions was already empty (e.g. double-clicking set-invalid).
+      this.stageUpdate({ reason: 'no-match' });
+
+      // Dispatch failure event if no matches found
+      if (validatedValues.length) {
+        this.dispatchChangeEvent('auroMenu-selectValueFailure', {
+          message: 'No matching options found for the provided value(s).',
+          values: validatedValues
+        });
+      }
+
+      return;
     }
-  }
 
-  /**
-   * Handles mouse enter events to highlight the menu option.
-   * This function updates the menu service to set this option as the currently highlighted item if not disabled.
-   * @private
-   */
-  handleMouseEnter() {
-    if (!this.disabled) {
-      this.menuService.setHighlightedOption(this);
+    this.clearPendingValue();
+
+    if (this.optionsArraysMatch(optionsToSelect, this.selectedOptions)) {
+      return;
     }
+
+    // Apply programmatic selection as a single transaction and emit one final state.
+    this.selectedOptions = optionsToSelect;
+    this.stageUpdate();
   }
 
   /**
-   * Dispatches custom events defined for this menu option.
-   * This function notifies listeners when a custom event is triggered by the option.
-   * @private
+   * Queues a pending value and schedules a bounded retry.
+   * @param {string|number|Array<string|number>} value - The value to retry.
    */
-  handleCustomEvent() {
-    if (this.event) {
-      dispatchMenuEvent(this, this.event, { option: this });
-      dispatchMenuEvent(this, 'auroMenu-customEventFired', { option: this });
+  queuePendingValue(value) {
+    this._pendingValue = value;
+
+    if (this._pendingRetryScheduled || this._pendingRetryCount >= 5) {
+      return;
     }
-  }
 
-  /**
-   * Dispatches a click event for this menu option.
-   * This function notifies listeners that the option has been clicked.
-   * @private
-   */
-  dispatchClickEvent() {
-    this.dispatchEvent(new CustomEvent('auroMenuOption-click', {
-      bubbles: true,
-      cancelable: false,
-      composed: true,
-      detail: this
-    }));
-  }
+    this._pendingRetryScheduled = true;
+    this._pendingRetryCount += 1;
 
-  /**
-   * Generates an HTML element containing an SVG icon based on the provided `svgContent`.
-   *
-   * @private
-   * @param {string} svgContent - The SVG content to be embedded.
-   * @returns {Element} The HTML element containing the SVG icon.
-   */
-  generateIconHtml(svgContent) {
-    const dom = new DOMParser().parseFromString(svgContent, 'text/html');
-    const svg = dom.body.firstChild;
+    setTimeout(() => {
+      this._pendingRetryScheduled = false;
 
-    svg.setAttribute('slot', 'svg');
+      if (this._pendingValue == null) {
+        return;
+      }
 
-    return u$7`<${this.iconTag} customColor customSvg>${svg}</${this.iconTag}>`;
+      const pendingValue = this._pendingValue;
+      this.selectByValue(pendingValue);
+    }, 0);
   }
 
   /**
-   * Logic to determine the layout of the component.
-   * @protected
-   * @returns {void}
+   * Clears pending retry state.
    */
-  renderLayout() {
-
-    const fontClassMap = {
-      xs: 'body-sm',
-      sm: 'body-default',
-      md: 'body-default',
-      lg: 'body-lg',
-      xl: 'body-lg'
-    };
+  clearPendingValue() {
+    this._pendingValue = null;
+    this._pendingRetryScheduled = false;
+    this._pendingRetryCount = 0;
+  }
 
-    const classes = e$3({
-      'wrapper': true,
-      [this.size ? fontClassMap[this.size] : 'body-sm']: true,
-    });
+  /**
+   * Resets the selected options to an empty array.
+   */
+  reset() {
+    const previousOptions = [...this.selectedOptions];
+    previousOptions.forEach(opt => opt.selected = false);
+    this.selectedOptions = [];
 
-    return u$7`
-      <div class="${classes}">
-        ${this.selected && !this.noCheckmark
-        ? this.generateIconHtml(checkmarkIcon.svg)
-        : undefined}
-        <slot></slot>
-      </div>
-    `;
+    // Single update after clearing all
+    if (previousOptions.length) {
+      this.stageUpdate();
+    }
   }
-}
-
-/* eslint-disable */
 
-class MenuService {
+  /**
+   * SUBSCRIPTION, NOTIFICATION AND EVENT DISPATCH METHODS
+   */
 
   /**
-   * PROPERTIES AND GETTERS
+   * Subscribes a callback to menu service events.
+   * @param {Function} callback - The callback to invoke on events.
    */
+  subscribe(callback) {
+    this._subscribers.push(callback);
+  }
 
   /**
-   * Gets the list of registered menu options.
-   * @returns {AuroMenuOption[]}
+   * Remove a previously subscribed callback from menu service events.
+   * @param {Function} callback
    */
-  get menuOptions() {
-    return this._menuOptions;
+  unsubscribe(callback) {
+    this._subscribers = this._subscribers.filter(cb => cb !== callback);
   }
 
   /**
-   * Gets the currently highlighted option.
-   * @returns {AuroMenuOption|null}
+   * Stages an update to notify subscribers of state and value changes.
    */
-  get highlightedOption() {
-    return this._menuOptions[this.highlightedIndex] || null;
+  stageUpdate(meta = {}) {
+    this.notifyStateChange(meta);
+    this.notifyValueChange(meta);
   }
 
   /**
-   * Gets the current value(s) of the selected option(s).
-   * @returns {string|string[]|undefined}
+   * Notifies subscribers of a menu service event.
+   * All notifications are sent to all subscribers.
+   * @param {string} event - The event to send to subscribers.
    */
-  get currentValue() {
-    const values = (this.selectedOptions || []).map(option => option.value);
-    return this.multiSelect ? values : values[0];
+  notify(event) {
+    this._subscribers.forEach(callback => callback(event));
   }
 
   /**
-   * Gets the label(s) of the currently selected option(s).
-   * @returns {string}
+   * Notifies subscribers of a state change (selected options has changed).
    */
-  get currentLabel() {
-    const labels = (this.selectedOptions || []).map(option => option.textContent);
-    return this.multiSelect ? labels.join(", ") : labels[0] || '';
+  notifyStateChange(meta = {}) {
+    this.notify({
+      type: 'stateChange',
+      selectedOptions: this.selectedOptions,
+      ...meta
+    });
   }
 
   /**
-   * Gets the string representation of the current value(s).
-   * For multi-select, this is a JSON stringified array.
-   * @returns {string|undefined}
+   * Notifies subscribers of a value change (current value has changed).
    */
-  get stringValue() {
-    const { currentValue } = this;
+  notifyValueChange(meta = {}) {
 
-    if (Array.isArray(currentValue)) {
-      if (currentValue.length > 0) {
-        return JSON.stringify(currentValue);
-      }
-      return undefined;
-    }
+    // Prepare details for the event
+    const details = {
+      value: this.currentValue,
+      stringValue: this.stringValue,
+      keys: this.currentKeys,
+      options: this.selectedOptions,
+      label: this.currentLabel
+    };
 
-    if (typeof currentValue === 'string') {
-      if (currentValue.length > 0) {
-        return currentValue;
-      }
-      return undefined;
-    }
+    // If only one option is selected, include its index
+    if (this.selectedOptions.length === 1) details.index = this._menuOptions.indexOf(this.selectedOptions[0]);
 
-    // Future: handle other types here (e.g., number, object, etc.)
-    return undefined;
+    this.notify({
+      type: 'valueChange',
+      ...meta,
+      ...details
+    });
   }
 
   /**
-   * Gets the key(s) of the currently selected option(s).
-   * @returns {string|string[]|undefined}
+   * Dispatches a custom event from the host element.
+   * @param {string} eventName
+   * @param {any} detail
    */
-  get currentKeys() {
-    const keys = (this.selectedOptions || []).map(option => option.key);
-    return this.multiSelect ? keys : keys[0];
+  dispatchChangeEvent(eventName, detail) {
+    this.host.dispatchEvent(new CustomEvent(eventName, {
+      bubbles: true,
+      cancelable: false,
+      composed: true,
+      detail
+    }));
   }
 
   /**
-   * CONSTRUCTOR
+   * MENU OPTION MANAGEMENT METHODS
    */
 
   /**
-   * Creates a new MenuService instance.
-   * @param {Object} options - The options object.
-   *   @param {AuroMenu} options.host - The host element that this service will control. Required.
-   * @throws {Error} If the host is not provided.
+   * Adds a menu option to the service's list.
+   * @param {AuroMenuOption} option - the option to track
    */
-  constructor({ host } = {}) {
+  addMenuOption(option) {
+    this._menuOptions.push(option);
+    this.notify({ type: 'optionsChange', options: this._menuOptions });
 
-    // Ensure a host was passed
-    if (!host) {
-      throw new Error("MenuService requires a host element.");
+    if (this._pendingValue != null) {
+      this.queuePendingValue(this._pendingValue);
     }
+  }
 
-    // Attach the service to the host
-    this.host = host;
-    this.host.addController(this);
-
-    // Set default properties
-    this.size = undefined;
-    this.shape = undefined;
-    this.noCheckmark = undefined;
-    this.disabled = undefined;
-    this.matchWord = undefined;
-    this.multiSelect = undefined;
-    this.allowDeselect = undefined;
-    this.selectAllMatchingOptions = undefined;
-
-    this.highlightedIndex = -1;
+  /**
+   * Removes a menu option from the service's list.
+   * @param {AuroMenuOption} option - the option to remove
+   */
+  removeMenuOption(option) {
+    this._menuOptions = this._menuOptions.filter(opt => opt !== option);
+    this.notify({ type: 'optionsChange', options: this._menuOptions });
 
-    this._menuOptions = [];
-    this._subscribers = [];
-    this.internalUpdateInProgress = false;
-    this.selectedOptions = [];
-    this._pendingValue = null;
-    this._pendingRetryScheduled = false;
-    this._pendingRetryCount = 0;
+    if (this._menuOptions.length === 0) {
+      this.clearPendingValue();
+    }
   }
 
   /**
-   * PROPERTY SYNCING
+   * UTILITIES
    */
 
   /**
-   * Handles host updates.
-   * This is a lit reactive lifecycle method.
-   * This comes from the Lit controller interface provided by adding this service as a controller to the host.
-   * See constructor for `this.host.addController(this)`
-   * You can read more about Lit reactive controllers here: https://lit.dev/docs/composition/controllers/
+   * Normalizes a value or array of values into an array of strings for option selection.
+   * This function ensures that input values are consistently formatted for matching menu options.
+   *
+   * @param {string|number|Array<string|number>} value - The value(s) to normalize.
+   * @returns {Array<string>} An array of string values suitable for option matching.
+   * @throws {Error} If any value is not a string or number.
    */
-  hostUpdated() {
+  _getNormalizedValues(value) {
+    let values = value;
 
-    // Reset selection if multiSelect mode changes
-    if (this.host.multiSelect !== this.multiSelect) {
-      this.selectedOptions = [];
-    }
+    // Handle JSON string and single value string input
+    if (!Array.isArray(values) && typeof values === 'string') {
 
-    // Update properties on host update
-    this.setProperties({
-      size: this.host.size,
-      shape: this.host.shape,
-      noCheckmark: this.host.noCheckmark,
-      disabled: this.host.disabled,
-      matchWord: this.host.matchWord,
-      multiSelect: this.host.multiSelect,
-      allowDeselect: this.host.allowDeselect,
-      selectAllMatchingOptions: this.host.selectAllMatchingOptions
-    });
-  }
+      // Attempt to parse as JSON array
+      try {
 
-  /**
-   * Handles host disconnection and memory cleanup.
-   */
-  hostDisconnected() {
-    this._subscribers = [];
-    this._menuOptions = [];
-    this._pendingValue = null;
-    this._pendingRetryScheduled = false;
-    this._pendingRetryCount = 0;
-  }
+        // Normalize single quotes to double quotes for JSON parsing
+        // This will not handle complex cases but will cover basic usage
+        const parseValue = values.replace(/'([^']*?)'/g, '"$1"');
 
-  /**
-   * Sets a property value if it exists on the instance and the value has changed.
-   * @param {string} property
-   * @param {any} value
-   */
-  setProperty(property, value) {
+        // Attempt parse
+        const parsed = JSON.parse(parseValue);
 
-    // Only update if we are tracking the property in this service
-    if (this.hasOwnProperty(property)) {
+        // Ensure parsed value is an array
+        if (!Array.isArray(parsed)) throw new Error('Not an array');
 
-      // Check if the value has changed
-      const valueChanged = this[property] !== value;
+        // Set values to parsed array
+        values = parsed;
+      } catch (err) {
 
-      // Update and notify if changed
-      if (valueChanged) {
-        this[property] = value;
-        this.notify({ property, value });
+        // If parsing fails, treat as single value
+        values = [value];
       }
     }
-  }
 
-  /**
-   * Sets multiple properties on the instance.
-   * @param {Object} properties - Key-value pairs of properties to set.
-   */
-  setProperties(properties) {
-    for (const [key, value] of Object.entries(properties)) {
-      this.setProperty(key, value);
+    // Handle a single number being passed
+    if (typeof values === 'number') {
+      values = [String(values)];
     }
-  }
 
-  /**
-   * MENU OPTION HIGHLIGHTING
-   */
+    // Coerce each value to string and validate types
+    values.forEach((val, index) => {
 
-  /**
-   * Highlights the next active option in the menu.
-   */
-  highlightNext() {
-    this.moveHighlightedOption("next");
-  }
+      // Throw an error for invalid value types
+      if (typeof val !== 'string' && typeof val !== 'number') {
+        throw new Error('Value contains invalid value type. Supported types are string and number.');
+      }
 
-  /**
-   * Highlights the previous active option in the menu.
-   */
-  highlightPrevious() {
-    this.moveHighlightedOption("previous");
+      // Convert numbers to strings for consistency
+      if (typeof val === 'number') {
+        values[index] = String(val);
+      }
+    });
+
+    // Return the resulting array of string values
+    return values;
   }
 
   /**
-   * Moves the highlighted option in the specified direction.
-   * @param {string} direction - The direction to move the highlight ("next" or "previous").
+   * Returns whether two arrays of options contain the same elements.
+   * @param {AuroMenuOption[]} arr1 - First array of options.
+   * @param {AuroMenuOption[]} arr2 - Second array of options.
+   * @returns {boolean} True if arrays match, false otherwise.
    */
-  moveHighlightedOption(direction) {
+  optionsArraysMatch(arr1, arr2) {
+    if (arr1.length !== arr2.length) return false;
 
-    // Get the active options
-    const activeOptions = this._menuOptions.filter(option => option.isActive);
+    const set1 = new Set(arr1);
+    const set2 = new Set(arr2);
 
-    // Get the currently active option
-    const currentActiveOption = activeOptions[activeOptions.indexOf(this.highlightedOption)];
+    for (let item of set1) {
+      if (!set2.has(item)) {
+        return false;
+      }
+    }
 
-    // Determine the new index based on the currently active option and direction
-    let newIndex = currentActiveOption
-      ? direction === "previous"
-        ? activeOptions.indexOf(currentActiveOption) - 1
-        : activeOptions.indexOf(currentActiveOption) + 1
-      : direction === "previous"
-        ? activeOptions.length - 1
-        : 0;
+    return true;
+  }
+}
 
-    // Wrap around the index if needed
-    newIndex = newIndex < 0 ? activeOptions.length - 1 : newIndex >= activeOptions.length ? 0 : newIndex;
+const MenuContext = n('menu-context');
 
-    // Get the new active option and set it as highlighted
-    const newActiveOption = activeOptions[newIndex];
-    this.setHighlightedOption(newActiveOption);
-  }
+// Copyright (c) 2021 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
+// See LICENSE in the project root for license information.
 
-  /**
-   * Sets the highlighted index to the specified option.
-   * @param {AuroMenuOption} option - The option to highlight.
-   */
-  setHighlightedOption(option) {
 
-    if (!option) return;
+/**
+ * Helper method to dispatch custom events.
+ * @param {HTMLElement} element - Element to dispatch event from.
+ * @param {string} eventName - Name of the event to dispatch.
+ * @param {Object} [detail] - Optional detail object to include with the event.
+ */
+function dispatchMenuEvent(element, eventName, detail = null) {
+  const eventConfig = {
+    bubbles: true,
+    cancelable: false,
+    composed: true
+  };
 
-    // Get the index of the option to highlight
-    const index = this._menuOptions.indexOf(option);
+  if (detail !== null) {
+    eventConfig.detail = detail;
+  }
 
-    // Update highlighted index
-    this.highlightedIndex = index;
+  element.dispatchEvent(new CustomEvent(eventName, eventConfig));
+}
 
-    // Notify subscribers of highlight change
-    this.notify({ type: 'highlightChange', option, index: this.highlightedIndex });
+/* eslint-disable no-underscore-dangle */
+// Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
+// See LICENSE in the project root for license information.
 
-    // Dispatch the change event
-    this.dispatchChangeEvent('auroMenu-activatedOption', option);
-  }
 
-  /**
-   * Sets the highlighted option to the option at the specified index if it exists.
-   * @param {number} index
-   */
-  setHighlightedIndex(index) {
-    const option = this._menuOptions[index] || null;
-    this.setHighlightedOption(option);
-  }
 
-  /**
-   * Selects the currently highlighted option.
-   */
-  selectHighlightedOption() {
-    if (this.highlightedOption) {
-      this.toggleOption(this.highlightedOption);
-    }
-  }
+/**
+ * The `auro-menu` element provides users a way to select from a list of options.
+ * @customElement auro-menu
+ *
+ * @event {CustomEvent<Element>} auroMenu-activatedOption - Notifies that a menuoption has been made `active`.
+ * @event {CustomEvent<any>} auroMenu-customEventFired - Notifies that a custom event has been fired.
+ * @event {CustomEvent<{ loading: boolean; hasLoadingPlaceholder: boolean; }>} auroMenu-loadingChange - Notifies when the loading attribute is changed.
+ * @event {CustomEvent<any>} auroMenu-selectValueFailure - Notifies that an attempt to select a menuoption by matching a value has failed.
+ * @event {CustomEvent<{ values: HTMLElement[] }>} auroMenu-deselectPrevented - Notifies that deselection was prevented and includes the affected options in `detail.values`.
+ * @event {CustomEvent<any>} auroMenu-selectValueReset - Notifies that the component value has been reset.
+ * @event {CustomEvent<any>} auroMenu-selectedOption - Notifies that a new menuoption selection has been made.
+ * @slot loadingText - Text to show while loading attribute is set
+ * @slot loadingIcon - Icon to show while loading attribute is set
+ * @slot - Slot for insertion of menu options.
+ */
 
-  /**
-   * SELECTION AND DESELECTION METHODS
-   */
+/* eslint-disable max-lines */
 
-  /**
-   * Selects one or more options in a batch operation
-   * @param {AuroMenuOption|AuroMenuOption[]} options - Single option or array of options to select
-   */
-  selectOptions(options) {
-    let optionsToSelect = Array.isArray(options) ? options : [options];
+class AuroMenu extends AuroElement {
 
-    // Filter out options that are inactive
-    optionsToSelect = optionsToSelect.filter(option => option.isActive);
+  constructor() {
+    super();
 
-    if (!optionsToSelect.length) return;
+    // State properties (reactive)
 
-    if (this.multiSelect) {
-      this.selectedOptions = [...(this.selectedOptions || []), ...optionsToSelect];
-    } else {
-      // In single select mode, only take the last option
-      this.selectedOptions = [optionsToSelect[optionsToSelect.length - 1]];
-    }
+    /**
+     * @private
+     */
+    this.shape = "box";
 
-    this.stageUpdate();
-  }
+    /**
+     * @private
+     */
+    this.size = "sm";
 
-  /**
-   * Deselects one or more options in a batch operation
-   * @param {AuroMenuOption|AuroMenuOption[]} options - Single option or array of options to deselect
-   */
-  deselectOptions(options) {
-    const optionsToDeselect = Array.isArray(options) ? options : [options];
+    // Value of the selected options
+    this.value = undefined;
+    // Currently selected option
+    this.optionSelected = undefined;
+    // String used for highlighting/filtering
+    this.matchWord = undefined;
+    // Hide the checkmark icon on selected options
+    this.noCheckmark = false;
+    // Currently active option
+    this.optionActive = undefined;
+    // Loading state
+    this.loading = false;
+    // Multi-select mode
+    this.multiSelect = false;
+    // Allow deselecting of menu options
+    this.allowDeselect = false;
+    // Select all matching options when setting value in multi-select mode
+    this.selectAllMatchingOptions = false;
 
-    if (!optionsToDeselect.length) return;
+    // Event Bindings
 
-    // Check if deselection should be prevented
-    const shouldPreventDeselect = !this.allowDeselect && !this.multiSelect;
-    const isOnlySelectedOption = this.selectedOptions.length === 1 && optionsToDeselect.includes(this.selectedOptions[0]);
+    /**
+     * @private
+     */
+    this.handleSlotChange = this.handleSlotChange.bind(this);
 
-    // Prevent deselecting the only selected option if not allowed
-    if (shouldPreventDeselect && isOnlySelectedOption) {
-      optionsToDeselect.forEach(option => {
-        option.selected = true;
-      });
-      this.dispatchChangeEvent('auroMenu-deselectPrevented', {
-        values: optionsToDeselect
-      });
-      return;
-    }
-
-    const optionsSet = new Set(optionsToDeselect);
-    this.selectedOptions = (this.selectedOptions || [])
-      .filter(opt => !optionsSet.has(opt));
-
-    this.stageUpdate();
-  }
-
-  /**
-   * Selects a single option.
-   * @param {AuroMenuOption} option
-   */
-  selectOption(option) {
-    this.selectOptions(option);
-  }
-
-  /**
-   * Deselects a single option.
-   * @param {AuroMenuOption} option
-   */
-  deselectOption(option) {
-    this.deselectOptions(option);
-  }
+    // Instance properties (non-reactive)
 
-  /**
-   * Toggles the selection state of a single option.
-   * @param {AuroMenuOption} option
-   */
-  toggleOption(option) {
-    if (option.selected) {
-      this.deselectOption(option);
-    } else {
-      this.selectOption(option);
-    }
+    /**
+     * @private
+     */
+    Object.assign(this, {
+      // Root-level menu (true) or a nested submenu (false)
+      rootMenu: true,
+      // Currently focused/active menu item index
+      _index: -1,
+      // Nested menu spacer
+      nestingSpacer: '<span class="nestingSpacer"></span>',
+      // Loading indicator for slot elements
+      loadingSlots: null,
+    });
   }
 
-  /**
-   * Selects options based on their value(s) when compared to a passed value or values.
-   * Value or values are normalized to an array of strings that can be matched to option keys.
-   * @param {string|number|Array<string|number>} value - The value(s) to select.
-   */
-  selectByValue(value) {
-    const isEmptyValue = value === undefined ||
-        value === null ||
-        (Array.isArray(value) && value.length === 0) ||
-        (typeof value === 'string' && value.trim() === '');
-
-    // Early exit for invalid/empty values
-    if (isEmptyValue) {
-      this.selectedOptions.forEach(opt => opt.selected = false);
-      this.selectedOptions = [];
-      return;
-    }
-
-    // If an internal update cycle is still in progress, defer value application
-    // rather than dropping it.
-    if (this.internalUpdateInProgress || this.host.internalUpdateInProgress) {
-      this.queuePendingValue(value);
-      return;
-    }
-
-    // Normalize values to array of strings
-    const normalizedValues = this._getNormalizedValues(value);
-
-    // Validate for single-select mode
-    let validatedValues = normalizedValues;
-    if (normalizedValues.length > 1 && !this.multiSelect) {
-      console.warn("MenuService - Multiple values provided for single-select menu. Only the first value will be selected.");
-      validatedValues = [normalizedValues[0]];
-    }
-
-    if (this._menuOptions.length === 0) {
-      this.queuePendingValue(value);
-      return;
-    }
-
-    // Find matching options by comparing available options to validated values
-    const trackedKeys = new Set();
-    const optionsToSelect = this._menuOptions.filter(option => {
-      const passesFilter = validatedValues.includes(option.key);
-      const alreadyTracked = trackedKeys.has(option.key);
-      const isActive = option.isActive;
-
-      trackedKeys.add(option.key);
+  static get properties() {
+    return {
+      ...super.properties,
 
-      // Include the option in the options to be selected if it passes the filter check and
-      // either hasn't been tracked yet or selectAllMatchingOptions is true
-      return isActive && passesFilter && (!alreadyTracked || (alreadyTracked && this.selectAllMatchingOptions));
-    });
+      /**
+       * Allows deselecting an already selected option when clicked again in single-select mode.
+       */
+      allowDeselect: {
+        type: Boolean,
+        reflect: true,
+      },
 
-    // Handle no matches: clear existing selection, but do not dispatch an intermediate
-    // undefined value that can overwrite the host value in parent components.
-    if (!optionsToSelect.length) {
-      const hasUnresolvedKeys = this._menuOptions.some((option) => option.isActive && option.key == null);
+      /**
+       * When true, the entire menu and all options are disabled.
+       */
+      disabled: {
+        type: Boolean,
+        reflect: true
+      },
 
-      if (hasUnresolvedKeys) {
-        this.queuePendingValue(value);
-        return;
-      }
+      /**
+       * Indicates whether the menu has a loadingIcon or loadingText to render when in a loading state.
+       */
+      hasLoadingPlaceholder: {
+        type: Boolean
+      },
 
-      this.clearPendingValue();
+      /**
+       * @private
+       */
+      layout: {
+        type: String
+      },
 
-      if (this.selectedOptions.length > 0) {
-        this.selectedOptions = [];
-      }
+      /**
+       * Indent level for submenus.
+       * @private
+       */
+      level: {
+        type: Number,
+        reflect: false,
+        attribute: false
+      },
 
-      // Always notify so the host resets any stale invalid value, even when
-      // selectedOptions was already empty (e.g. double-clicking set-invalid).
-      this.stageUpdate({ reason: 'no-match' });
+      /**
+       * When true, displays a loading state using the loadingIcon and loadingText slots if provided.
+       */
+      loading: {
+        type: Boolean,
+        reflect: true
+      },
 
-      // Dispatch failure event if no matches found
-      if (validatedValues.length) {
-        this.dispatchChangeEvent('auroMenu-selectValueFailure', {
-          message: 'No matching options found for the provided value(s).',
-          values: validatedValues
-        });
-      }
+      /**
+       * Specifies a string used to highlight matched string parts in options.
+       */
+      matchWord: {
+        type: String,
+        attribute: 'matchword'
+      },
 
-      return;
-    }
+      /**
+       * When true, the selected option can be multiple options.
+       */
+      multiSelect: {
+        type: Boolean,
+        reflect: true,
+        attribute: 'multiselect'
+      },
 
-    this.clearPendingValue();
+      /**
+       * When true, selected option will not show the checkmark.
+       */
+      noCheckmark: {
+        type: Boolean,
+        reflect: true,
+        attribute: 'nocheckmark'
+      },
 
-    if (this.optionsArraysMatch(optionsToSelect, this.selectedOptions)) {
-      return;
-    }
+      /**
+       * Specifies the current active menuOption.
+       */
+      optionActive: {
+        type: Object,
+        attribute: 'optionactive'
+      },
 
-    // Apply programmatic selection as a single transaction and emit one final state.
-    this.selectedOptions = optionsToSelect;
-    this.stageUpdate();
-  }
+      /**
+       * An array of currently selected menu options, type `HTMLElement` by default. In multi-select mode, `optionSelected` is an array of HTML elements.
+       */
+      optionSelected: {
+        // Allow HTMLElement, HTMLElement[] arrays and undefined
+        type: Object
+      },
 
-  /**
-   * Queues a pending value and schedules a bounded retry.
-   * @param {string|number|Array<string|number>} value - The value to retry.
-   */
-  queuePendingValue(value) {
-    this._pendingValue = value;
+      /**
+       * Available menu options.
+       * @readonly
+       */
+      options: {
+        type: Array,
+        reflect: false,
+        attribute: false
+      },
 
-    if (this._pendingRetryScheduled || this._pendingRetryCount >= 5) {
-      return;
-    }
+      /**
+       * Sets the size of the menu.
+       * @type {'sm' | 'md'}
+       * @default 'sm'
+       */
+      size: {
+        type: String,
+        reflect: true
+      },
 
-    this._pendingRetryScheduled = true;
-    this._pendingRetryCount += 1;
+      /**
+       * When true, selects all options that match the provided value/key when setting value and multiselect is enabled.
+       */
+      selectAllMatchingOptions: {
+        type: Boolean,
+        reflect: true,
+      },
 
-    setTimeout(() => {
-      this._pendingRetryScheduled = false;
+      /**
+       * Sets the shape of the menu.
+       * @type {'box' | 'round'}
+       * @default 'box'
+       */
+      shape: {
+        type: String,
+        reflect: true
+      },
 
-      if (this._pendingValue == null) {
-        return;
+      /**
+       * The value of the selected option. In multi-select mode, this is a JSON stringified array of selected option values.
+       */
+      value: {
+        type: String,
+        reflect: true,
+        attribute: 'value'
       }
-
-      const pendingValue = this._pendingValue;
-      this.selectByValue(pendingValue);
-    }, 0);
-  }
-
-  /**
-   * Clears pending retry state.
-   */
-  clearPendingValue() {
-    this._pendingValue = null;
-    this._pendingRetryScheduled = false;
-    this._pendingRetryCount = 0;
+    };
   }
 
-  /**
-   * Resets the selected options to an empty array.
-   */
-  reset() {
-    const previousOptions = [...this.selectedOptions];
-    previousOptions.forEach(opt => opt.selected = false);
-    this.selectedOptions = [];
-
-    // Single update after clearing all
-    if (previousOptions.length) {
-      this.stageUpdate();
-    }
+  static get styles() {
+    return [
+      styleCss$1,
+      colorCss$1,
+      tokensCss
+    ];
   }
 
   /**
-   * SUBSCRIPTION, NOTIFICATION AND EVENT DISPATCH METHODS
+   * @readonly
+   * @returns {string} - Returns the label of the currently selected option(s).
    */
+  get currentLabel() {
+    return this.menuService.currentLabel;
+  };
 
   /**
-   * Subscribes a callback to menu service events.
-   * @param {Function} callback - The callback to invoke on events.
+   * @readonly
+   * @returns {Array<HTMLElement>} - Returns the array of available menu options.
+   * @deprecated Use `options` property instead.
    */
-  subscribe(callback) {
-    this._subscribers.push(callback);
+  get items() {
+    return this.options;
   }
 
   /**
-   * Remove a previously subscribed callback from menu service events.
-   * @param {Function} callback
+   * @returns {number} - Returns the index of the currently active option.
    */
-  unsubscribe(callback) {
-    this._subscribers = this._subscribers.filter(cb => cb !== callback);
+  get index() {
+    return this._index;
   }
 
   /**
-   * Stages an update to notify subscribers of state and value changes.
+   * @param {number} value - Sets the index of the currently active option.
    */
-  stageUpdate(meta = {}) {
-    this.notifyStateChange(meta);
-    this.notifyValueChange(meta);
+  set index(value) {
+    this.menuService.setHighlightedIndex(value);
   }
 
   /**
-   * Notifies subscribers of a menu service event.
-   * All notifications are sent to all subscribers.
-   * @param {string} event - The event to send to subscribers.
+   * This will register this element with the browser.
+   * @param {string} [name="auro-menu"] - The name of the element that you want to register.
+   *
+   * @example
+   * AuroMenu.register("custom-menu") // this will register this element to <custom-menu/>
+   *
    */
-  notify(event) {
-    this._subscribers.forEach(callback => callback(event));
+  static register(name = "auro-menu") {
+    AuroLibraryRuntimeUtils$4.prototype.registerComponent(name, AuroMenu);
   }
 
   /**
-   * Notifies subscribers of a state change (selected options has changed).
+   * Formatted value based on `multiSelect` state.
+   * Default type is `String`, changing to `Array<String>` when `multiSelect` is true.
+   * @private
+   * @returns {String|Array<String>}
    */
-  notifyStateChange(meta = {}) {
-    this.notify({
-      type: 'stateChange',
-      selectedOptions: this.selectedOptions,
-      ...meta
-    });
+  get formattedValue() {
+    return this.menuService.currentValue;
   }
 
   /**
-   * Notifies subscribers of a value change (current value has changed).
+   * Gets the current property values for the menu service.
+   * @private
+   * @returns {Object}
    */
-  notifyValueChange(meta = {}) {
-
-    // Prepare details for the event
-    const details = {
-      value: this.currentValue,
-      stringValue: this.stringValue,
-      keys: this.currentKeys,
-      options: this.selectedOptions,
-      label: this.currentLabel
+  get propertyValues() {
+    return {
+      size: this.size,
+      shape: this.shape,
+      noCheckmark: this.nocheckmark,
+      disabled: this.disabled
     };
-
-    // If only one option is selected, include its index
-    if (this.selectedOptions.length === 1) details.index = this._menuOptions.indexOf(this.selectedOptions[0]);
-
-    this.notify({
-      type: 'valueChange',
-      ...meta,
-      ...details
-    });
-  }
-
-  /**
-   * Dispatches a custom event from the host element.
-   * @param {string} eventName
-   * @param {any} detail
-   */
-  dispatchChangeEvent(eventName, detail) {
-    this.host.dispatchEvent(new CustomEvent(eventName, {
-      bubbles: true,
-      cancelable: false,
-      composed: true,
-      detail
-    }));
   }
 
   /**
-   * MENU OPTION MANAGEMENT METHODS
-   */
-
-  /**
-   * Adds a menu option to the service's list.
-   * @param {AuroMenuOption} option - the option to track
+   * Provides the menu context to child components.
+   * Initializes the MenuService and subscribes to menu changes.
+   * @protected
    */
-  addMenuOption(option) {
-    this._menuOptions.push(option);
-    this.notify({ type: 'optionsChange', options: this._menuOptions });
-
-    if (this._pendingValue != null) {
-      this.queuePendingValue(this._pendingValue);
+  provideContext() {
+    if (this.parentElement && this.parentElement.closest('auro-menu, [auro-menu]')) {
+      this.rootMenu = false;
+      this.menuService = this.parentElement.menuService;
+      this._contextProvider = this.parentElement._contextProvider;
+      return;
     }
-  }
 
-  /**
-   * Removes a menu option from the service's list.
-   * @param {AuroMenuOption} option - the option to remove
-   */
-  removeMenuOption(option) {
-    this._menuOptions = this._menuOptions.filter(opt => opt !== option);
-    this.notify({ type: 'optionsChange', options: this._menuOptions });
-
-    if (this._menuOptions.length === 0) {
-      this.clearPendingValue();
-    }
+    this.menuService = new MenuService({host: this});
+    this.menuService.setProperties(this.propertyValues);
+    this.menuService.subscribe(this.handleMenuChange.bind(this));
+    this._contextProvider = new i(this, {
+      context: MenuContext,
+      initialValue: this.menuService
+    });
   }
 
   /**
-   * UTILITIES
+   * Updates the currently active option in the menu.
+   * @param {HTMLElement} option - The option to set as active.
    */
+  updateActiveOption(option) {
+    this.menuService.setHighlightedOption(option);
+  }
 
   /**
-   * Normalizes a value or array of values into an array of strings for option selection.
-   * This function ensures that input values are consistently formatted for matching menu options.
-   *
-   * @param {string|number|Array<string|number>} value - The value(s) to normalize.
-   * @returns {Array<string>} An array of string values suitable for option matching.
-   * @throws {Error} If any value is not a string or number.
+   * Sets the internal value and manages update state.
+   * @param {String|Array<String>} value - The value to set.
+   * @protected
    */
-  _getNormalizedValues(value) {
-    let values = value;
-
-    // Handle JSON string and single value string input
-    if (!Array.isArray(values) && typeof values === 'string') {
-
-      // Attempt to parse as JSON array
-      try {
-
-        // Normalize single quotes to double quotes for JSON parsing
-        // This will not handle complex cases but will cover basic usage
-        const parseValue = values.replace(/'([^']*?)'/g, '"$1"');
+  setInternalValue(value) {
+    if (this.value !== value) {
+      this.internalUpdateInProgress = true;
+      this.value = value;
 
-        // Attempt parse
-        const parsed = JSON.parse(parseValue);
+      setTimeout(() => {
+        this.internalUpdateInProgress = false;
+      });
+    }
+  }
 
-        // Ensure parsed value is an array
-        if (!Array.isArray(parsed)) throw new Error('Not an array');
+  /**
+   * Handles changes from the menu service and updates component state.
+   * @param {Object} event - The event object from the menu service.
+   * @protected
+   */
+  handleMenuChange(event) {
+    if (event.type === 'valueChange') {
 
-        // Set values to parsed array
-        values = parsed;
-      } catch (err) {
+      // New option is array value or first option with fallback to undefined for empty array in all cases
+      const newOption = this.multiSelect && event.options.length ? event.options : event.options[0] || undefined;
+      const newValue = event.stringValue;
 
-        // If parsing fails, treat as single value
-        values = [value];
+      // Check if the option or value has actually changed
+      if (this.optionSelected !== newOption || this.stringValue !== newValue) {
+        this.optionSelected = newOption;
+        this.setInternalValue(newValue);
       }
-    }
 
-    // Handle a single number being passed
-    if (typeof values === 'number') {
-      values = [String(values)];
+      // Notify components of selection change
+      this.notifySelectionChange(event);
     }
 
-    // Coerce each value to string and validate types
-    values.forEach((val, index) => {
-
-      // Throw an error for invalid value types
-      if (typeof val !== 'string' && typeof val !== 'number') {
-        throw new Error('Value contains invalid value type. Supported types are string and number.');
-      }
-
-      // Convert numbers to strings for consistency
-      if (typeof val === 'number') {
-        values[index] = String(val);
-      }
-    });
+    if (event.type === 'highlightChange') {
+      this.optionActive = event.option;
+      this._index = event.index;
+    }
 
-    // Return the resulting array of string values
-    return values;
+    if (event.type === 'optionsChange') {
+      this.options = event.options;
+      this.dispatchEvent(new CustomEvent('auroMenu-optionsChange', {
+        detail: {
+          options: event.options
+        }
+      }));
+    }
   }
 
   /**
-   * Returns whether two arrays of options contain the same elements.
-   * @param {AuroMenuOption[]} arr1 - First array of options.
-   * @param {AuroMenuOption[]} arr2 - Second array of options.
-   * @returns {boolean} True if arrays match, false otherwise.
+   * Gets the currently selected options.
+   * @returns {Array<HTMLElement>}
    */
-  optionsArraysMatch(arr1, arr2) {
-    if (arr1.length !== arr2.length) return false;
-
-    const set1 = new Set(arr1);
-    const set2 = new Set(arr2);
-
-    for (let item of set1) {
-      if (!set2.has(item)) {
-        return false;
-      }
-    }
-
-    return true;
+  get selectedOptions() {
+    return this.menuService ? this.menuService.selectedOptions : [];
   }
-}
 
-const MenuContext = n('menu-context');
+  /**
+   * Gets the first selected option, or null if none.
+   * @returns {HTMLElement|null}
+   */
+  get selectedOption() {
+    return this.menuService ? this.menuService.selectedOptions[0] : null;
+  }
 
-/* eslint-disable no-underscore-dangle */
-// Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
-// See LICENSE in the project root for license information.
+  // Lifecycle Methods
 
+  connectedCallback() {
+    super.connectedCallback();
 
+    this.provideContext();
 
-/**
- * The `auro-menu` element provides users a way to select from a list of options.
- * @customElement auro-menu
- *
- * @event {CustomEvent<Element>} auroMenu-activatedOption - Notifies that a menuoption has been made `active`.
- * @event {CustomEvent<any>} auroMenu-customEventFired - Notifies that a custom event has been fired.
- * @event {CustomEvent<{ loading: boolean; hasLoadingPlaceholder: boolean; }>} auroMenu-loadingChange - Notifies when the loading attribute is changed.
- * @event {CustomEvent<any>} auroMenu-selectValueFailure - Notifies that an attempt to select a menuoption by matching a value has failed.
- * @event {CustomEvent<{ values: HTMLElement[] }>} auroMenu-deselectPrevented - Notifies that deselection was prevented and includes the affected options in `detail.values`.
- * @event {CustomEvent<any>} auroMenu-selectValueReset - Notifies that the component value has been reset.
- * @event {CustomEvent<any>} auroMenu-selectedOption - Notifies that a new menuoption selection has been made.
- * @slot loadingText - Text to show while loading attribute is set
- * @slot loadingIcon - Icon to show while loading attribute is set
- * @slot - Slot for insertion of menu options.
- */
+    // this.addEventListener('keydown', this.handleKeyDown);
+    this.addEventListener('auroMenuOption-click', this.handleMouseSelect);
+    this.addEventListener('auroMenuOption-mouseover', this.handleOptionHover);
+    this.addEventListener('slotchange', this.handleSlotChange);
+    this.setTagAttribute("auro-menu");
+  }
 
-/* eslint-disable max-lines */
+  disconnectedCallback() {
+    // this.removeEventListener('keydown', this.handleKeyDown);
+    this.removeEventListener('auroMenuOption-click', this.handleMouseSelect);
+    this.removeEventListener('auroMenuOption-mouseover', this.handleOptionHover);
+    this.removeEventListener('slotchange', this.handleSlotChange);
 
-class AuroMenu extends AuroElement {
+    super.disconnectedCallback();
+  }
 
-  constructor() {
-    super();
+  firstUpdated() {
+    AuroLibraryRuntimeUtils$4.prototype.handleComponentTagRename(this, 'auro-menu');
 
-    // State properties (reactive)
+    this.loadingSlots = this.querySelectorAll("[slot='loadingText'], [slot='loadingIcon']");
+    this.initializeMenu();
+  }
 
-    /**
-     * @private
-     */
-    this.shape = "box";
 
-    /**
-     * @private
-     */
-    this.size = "sm";
+  updated(changedProperties) {
+    super.updated(changedProperties);
 
-    // Value of the selected options
-    this.value = undefined;
-    // Currently selected option
-    this.optionSelected = undefined;
-    // String used for highlighting/filtering
-    this.matchWord = undefined;
-    // Hide the checkmark icon on selected options
-    this.noCheckmark = false;
-    // Currently active option
-    this.optionActive = undefined;
-    // Loading state
-    this.loading = false;
-    // Multi-select mode
-    this.multiSelect = false;
-    // Allow deselecting of menu options
-    this.allowDeselect = false;
-    // Select all matching options when setting value in multi-select mode
-    this.selectAllMatchingOptions = false;
+    // Apply value selection synchronously so that static-HTML fixtures
+    // resolve within a single update cycle.  The refactored selectByValue
+    // no longer calls reset() first, so the destructive intermediate-event
+    // cascade that originally required deferral is eliminated.  If option
+    // keys are not yet resolved (framework mount-order race), selectByValue
+    // queues a bounded retry automatically via queuePendingValue.
+    if (changedProperties.has('value') && !this.internalUpdateInProgress) {
+      this.menuService.selectByValue(this.value);
+    }
 
-    // Event Bindings
+    // Handle loading state changes
+    if (changedProperties.has('loading')) {
+      this.setLoadingState(this.loading);
+    }
 
-    /**
-     * @private
-     */
-    this.handleSlotChange = this.handleSlotChange.bind(this);
+    if (changedProperties.has('multiSelect') && this.rootMenu) {
+      if (this.multiSelect) {
+        this.setAttribute('aria-multiselectable', 'true');
+      } else {
+        this.removeAttribute('aria-multiselectable');
+      }
+    }
+  }
 
-    // Instance properties (non-reactive)
+  /**
+   * Sets an attribute that matches the default tag name if the tag name is not the default.
+   * @param {string} tagName - The tag name to set as an attribute.
+   * @private
+   */
+  setTagAttribute(tagName) {
+    if (this.tagName.toLowerCase() !== tagName) {
+      this.setAttribute(tagName, true);
+    }
+  }
 
-    /**
-     * @private
-     */
-    Object.assign(this, {
-      // Root-level menu (true) or a nested submenu (false)
-      rootMenu: true,
-      // Currently focused/active menu item index
-      _index: -1,
-      // Nested menu spacer
-      nestingSpacer: '<span class="nestingSpacer"></span>',
-      // Loading indicator for slot elements
-      loadingSlots: null,
+  /**
+   * Sets the loading state and dispatches a loading change event.
+   * @param {boolean} isLoading - Whether the menu is loading.
+   * @protected
+   */
+  setLoadingState(isLoading) {
+    this.setAttribute("aria-busy", isLoading);
+    dispatchMenuEvent(this, "auroMenu-loadingChange", {
+      loading: isLoading,
+      hasLoadingPlaceholder: this.hasLoadingPlaceholder
     });
   }
 
-  static get properties() {
-    return {
-      ...super.properties,
-
-      /**
-       * Allows deselecting an already selected option when clicked again in single-select mode.
-       */
-      allowDeselect: {
-        type: Boolean,
-        reflect: true,
-      },
-
-      /**
-       * When true, the entire menu and all options are disabled.
-       */
-      disabled: {
-        type: Boolean,
-        reflect: true
-      },
-
-      /**
-       * Indicates whether the menu has a loadingIcon or loadingText to render when in a loading state.
-       */
-      hasLoadingPlaceholder: {
-        type: Boolean
-      },
+  // Init Methods
 
-      /**
-       * @private
-       */
-      layout: {
-        type: String
-      },
+  /**
+   * Initializes the menu's state and structure.
+   * @private
+   */
+  initializeMenu() {
+    if (this.rootMenu) {
+      this.setAttribute('role', 'listbox');
+      this.setAttribute('root', '');
 
-      /**
-       * Indent level for submenus.
-       * @private
-       */
-      level: {
-        type: Number,
-        reflect: false,
-        attribute: false
-      },
+      if (this.multiSelect) {
+        this.setAttribute('aria-multiselectable', 'true');
+      }
+    }
 
-      /**
-       * When true, displays a loading state using the loadingIcon and loadingText slots if provided.
-       */
-      loading: {
-        type: Boolean,
-        reflect: true
-      },
+    this.handleNestedMenus(this);
+  }
 
-      /**
-       * Specifies a string used to highlight matched string parts in options.
-       */
-      matchWord: {
-        type: String,
-        attribute: 'matchword'
-      },
+  /**
+   * Selects the currently highlighted option.
+   * @protected
+   */
+  makeSelection() {
+    this.menuService.selectHighlightedOption();
+  }
 
-      /**
-       * When true, the selected option can be multiple options.
-       */
-      multiSelect: {
-        type: Boolean,
-        reflect: true,
-        attribute: 'multiselect'
-      },
+  /**
+   * Resets all options to their default state.
+   * @private
+   */
+  clearSelection() {
+    this.optionSelected = undefined;
+    this.value = undefined;
+    this._index = -1;
+  }
 
-      /**
-       * When true, selected option will not show the checkmark.
-       */
-      noCheckmark: {
-        type: Boolean,
-        reflect: true,
-        attribute: 'nocheckmark'
-      },
+  /**
+   * Resets the menu to its initial state.
+   * This is the only way to return value to undefined.
+   * @public
+   */
+  reset() {
+    this.menuService.reset();
 
-      /**
-       * Specifies the current active menuOption.
-       */
-      optionActive: {
-        type: Object,
-        attribute: 'optionactive'
-      },
+    // Dispatch reset event
+    dispatchMenuEvent(this, 'auroMenu-selectValueReset');
+  }
 
-      /**
-       * An array of currently selected menu options, type `HTMLElement` by default. In multi-select mode, `optionSelected` is an array of HTML elements.
-       */
-      optionSelected: {
-        // Allow HTMLElement, HTMLElement[] arrays and undefined
-        type: Object
-      },
+  /**
+   * Handles nested menu structure.
+   * @private
+   * @param {HTMLElement} menu - Root menu element.
+   */
+  handleNestedMenus(menu) {
+    menu.level = menu.parentElement.level >= 0 ? menu.parentElement.level + 1 : 0;
 
-      /**
-       * Available menu options.
-       * @readonly
-       */
-      options: {
-        type: Array,
-        reflect: false,
-        attribute: false
-      },
+    if (menu.level > 0) {
+      menu.setAttribute('role', 'group');
+      menu.removeAttribute("root");
+      if (!menu.hasAttribute('aria-label')) {
+        menu.setAttribute('aria-label', 'submenu');
+      }
+    }
 
-      /**
-       * Sets the size of the menu.
-       * @type {'sm' | 'md'}
-       * @default 'sm'
-       */
-      size: {
-        type: String,
-        reflect: true
-      },
+    const options = menu.querySelectorAll(':scope > auro-menuoption, :scope > [auro-menuoption]');
+    options.forEach((option) => {
+      const regex = new RegExp(this.nestingSpacer, "gu");
+      option.innerHTML = this.nestingSpacer.repeat(menu.level) + option.innerHTML.replace(regex, '');
+    });
+  }
 
-      /**
-       * When true, selects all options that match the provided value/key when setting value and multiselect is enabled.
-       */
-      selectAllMatchingOptions: {
-        type: Boolean,
-        reflect: true,
-      },
+  /**
+   * Navigates the menu options in the specified direction.
+   * @param {'up'|'down'} direction - The direction to navigate.
+   * @protected
+   */
+  navigateOptions(direction) {
+    if (direction === 'up') {
+      this.menuService.highlightPrevious();
+    } else if (direction === 'down') {
+      this.menuService.highlightNext();
+    }
+  }
 
-      /**
-       * Sets the shape of the menu.
-       * @type {'box' | 'round'}
-       * @default 'box'
-       */
-      shape: {
-        type: String,
-        reflect: true
-      },
+  /**
+   * Handles slot change events.
+   * @private
+   */
+  handleSlotChange() {
+    if (this.rootMenu) {
+      this.initializeMenu();
+    }
+  }
 
-      /**
-       * The value of the selected option. In multi-select mode, this is a JSON stringified array of selected option values.
-       */
-      value: {
-        type: String,
-        reflect: true,
-        attribute: 'value'
-      }
-    };
+  /**
+   * Handles custom events defined on options.
+   * @private
+   * @param {HTMLElement} option - Option with custom event.
+   */
+  handleCustomEvent(option) {
+    const eventName = option.getAttribute('event');
+    dispatchMenuEvent(this, eventName);
+    dispatchMenuEvent(this, 'auroMenu-customEventFired');
   }
 
-  static get styles() {
-    return [
-      styleCss$1,
-      colorCss$1,
-      tokensCss
-    ];
+  /**
+   * Notifies selection change to parent components.
+   * @param {any} source - The source that triggers this event.
+   * @private
+   */
+  notifySelectionChange({value, stringValue, keys, options, reason} = {}) {
+    dispatchMenuEvent(this, 'auroMenu-selectedOption', {
+      value,
+      stringValue,
+      keys,
+      options,
+      reason
+    });
   }
 
   /**
-   * @readonly
-   * @returns {string} - Returns the label of the currently selected option(s).
+   * Checks if an option is currently selected.
+   * @private
+   * @param {HTMLElement} option - The option to check.
+   * @returns {boolean}
    */
-  get currentLabel() {
-    return this.menuService.currentLabel;
-  };
+  isOptionSelected(option) {
+    if (!this.optionSelected) {
+      return false;
+    }
+
+    if (this.multiSelect) {
+      // In multi-select mode, check if the option is in the selected array
+      return Array.isArray(this.optionSelected) && this.optionSelected.some((selectedOption) => selectedOption === option);
+    }
+
+    return this.optionSelected === option;
+  }
 
   /**
-   * @readonly
-   * @returns {Array<HTMLElement>} - Returns the array of available menu options.
-   * @deprecated Use `options` property instead.
+   * Getter for loading placeholder state.
+   * @returns {boolean} - True if loading slots are present and non-empty.
    */
-  get items() {
-    return this.options;
+  get hasLoadingPlaceholder() {
+    return this.loadingSlots && this.loadingSlots.length > 0;
   }
 
   /**
-   * @returns {number} - Returns the index of the currently active option.
+   * Getter for wrapper classes based on size.
+   * @returns {Object} - Class map for the wrapper element.
+   * @private
    */
-  get index() {
-    return this._index;
+  get wrapperClasses() {
+    return e$3({
+      'menuWrapper': true,
+      [this.size]: true,
+    });
   }
 
   /**
-   * @param {number} value - Sets the index of the currently active option.
+   * Logic to determine the layout of the component.
+   * @protected
+   * @returns {void}
    */
-  set index(value) {
-    this.menuService.setHighlightedIndex(value);
+  renderLayout() {
+    if (this.loading) {
+      return b$2`
+        <div class="${this.wrapperClasses}">
+          <auro-menuoption
+            disabled
+            loadingplaceholder
+            class="${this.hasLoadingPlaceholder ? "" : "empty"}"
+          >
+            <div>
+              <slot name="loadingIcon" class="body-lg"></slot>
+              <slot name="loadingText"></slot>
+            </div>
+          </auro-menuoption>
+        </div>
+      `;
+    }
+
+    return b$2`
+      <div class="${this.wrapperClasses}">
+        <slot @slotchange=${this.handleSlotChange}></slot>
+      </div>
+    `;
   }
+}
+
+var styleCss = i$7`.body-default{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-default-weight, );letter-spacing:var(--wcss-body-letter-spacing, 0);font-size:var(--wcss-body-default-font-size, 1rem);line-height:var(--wcss-body-default-line-height, 1.5rem)}.body-default-emphasized{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-default-emphasized-weight, );letter-spacing:var(--wcss-body-letter-spacing, 0);font-size:var(--wcss-body-default-emphasized-font-size, 1rem);line-height:var(--wcss-body-default-emphasized-line-height, 1.5rem)}.body-lg{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-lg-weight, );letter-spacing:var(--wcss-body-letter-spacing, 0);font-size:var(--wcss-body-lg-font-size, 1.125rem);line-height:var(--wcss-body-lg-line-height, 1.625rem)}.body-lg-emphasized{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-lg-emphasized-weight, );letter-spacing:var(--wcss-body-letter-spacing, 0);font-size:var(--wcss-body-lg-emphasized-font-size, 1.125rem);line-height:var(--wcss-body-lg-emphasized-line-height, 1.625rem)}.body-sm{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-sm-weight, );letter-spacing:var(--wcss-body-letter-spacing, 0);font-size:var(--wcss-body-sm-font-size, 0.875rem);line-height:var(--wcss-body-sm-line-height, 1.25rem)}.body-sm-emphasized{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-sm-emphasized-weight, );letter-spacing:var(--wcss-body-letter-spacing, 0);font-size:var(--wcss-body-sm-emphasized-font-size, 0.875rem);line-height:var(--wcss-body-sm-emphasized-line-height, 1.25rem)}.body-xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-xs-weight, );letter-spacing:var(--wcss-body-letter-spacing, 0);font-size:var(--wcss-body-xs-font-size, 0.75rem);line-height:var(--wcss-body-xs-line-height, 1rem)}.body-xs-emphasized{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-xs-emphasized-weight, );letter-spacing:var(--wcss-body-letter-spacing, 0);font-size:var(--wcss-body-xs-emphasized-font-size, 0.75rem);line-height:var(--wcss-body-xs-emphasized-line-height, 1rem)}.body-2xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-2xs-weight, );letter-spacing:var(--wcss-body-letter-spacing, 0);font-size:var(--wcss-body-2xs-font-size, 0.625rem);line-height:var(--wcss-body-2xs-line-height, 0.875rem)}.body-2xs-emphasized{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-2xs-emphasized-weight, );letter-spacing:var(--wcss-body-letter-spacing, 0);font-size:var(--wcss-body-2xs-emphasized-font-size, 0.625rem);line-height:var(--wcss-body-2xs-emphasized-line-height, 0.875rem)}.display-2xl{font-family:var(--wcss-display-2xl-family, "AS Circular"),var(--wcss-display-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-weight:var(--wcss-display-2xl-weight, 300);line-height:var(--wcss-display-2xl-line-height, 1.3);font-size:var(--wcss-display-2xl-font-size, clamp(3.5rem, 6vw, 5.375rem));letter-spacing:var(--wcss-display-2xl-letter-spacing, 0)}.display-xl{font-family:var(--wcss-display-xl-family, "AS Circular"),var(--wcss-display-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-weight:var(--wcss-display-xl-weight, 300);line-height:var(--wcss-display-xl-line-height, 1.3);font-size:var(--wcss-display-xl-font-size, clamp(3rem, 5.3333333333vw, 4.5rem));letter-spacing:var(--wcss-display-xl-letter-spacing, 0)}.display-lg{font-family:var(--wcss-display-lg-family, "AS Circular"),var(--wcss-display-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-weight:var(--wcss-display-lg-weight, 300);line-height:var(--wcss-display-lg-line-height, 1.3);font-size:var(--wcss-display-lg-font-size, clamp(2.75rem, 4.6666666667vw, 4rem));letter-spacing:var(--wcss-display-lg-letter-spacing, 0)}.display-md{font-family:var(--wcss-display-md-family, "AS Circular"),var(--wcss-display-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-weight:var(--wcss-display-md-weight, 300);line-height:var(--wcss-display-md-line-height, 1.3);font-size:var(--wcss-display-md-font-size, clamp(2.5rem, 4vw, 3.5rem));letter-spacing:var(--wcss-display-md-letter-spacing, 0)}.display-sm{font-family:var(--wcss-display-sm-family, "AS Circular"),var(--wcss-display-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-weight:var(--wcss-display-sm-weight, 300);line-height:var(--wcss-display-sm-line-height, 1.3);font-size:var(--wcss-display-sm-font-size, clamp(2rem, 3.6666666667vw, 3rem));letter-spacing:var(--wcss-display-sm-letter-spacing, 0)}.display-xs{font-family:var(--wcss-display-xs-family, "AS Circular"),var(--wcss-display-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-weight:var(--wcss-display-xs-weight, 300);line-height:var(--wcss-display-xs-line-height, 1.3);font-size:var(--wcss-display-xs-font-size, clamp(1.75rem, 3vw, 2.375rem));letter-spacing:var(--wcss-display-xs-letter-spacing, 0)}.heading-xl{font-family:var(--wcss-heading-xl-family, "AS Circular"),var(--wcss-heading-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-weight:var(--wcss-heading-xl-weight, 300);line-height:var(--wcss-heading-xl-line-height, 1.3);font-size:var(--wcss-heading-xl-font-size, clamp(2rem, 3vw, 2.5rem));letter-spacing:var(--wcss-heading-xl-letter-spacing, 0)}.heading-lg{font-family:var(--wcss-heading-lg-family, "AS Circular"),var(--wcss-heading-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-weight:var(--wcss-heading-lg-weight, 300);line-height:var(--wcss-heading-lg-line-height, 1.3);font-size:var(--wcss-heading-lg-font-size, clamp(1.75rem, 2.6666666667vw, 2.25rem));letter-spacing:var(--wcss-heading-lg-letter-spacing, 0)}.heading-md{font-family:var(--wcss-heading-md-family, "AS Circular"),var(--wcss-heading-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-weight:var(--wcss-heading-md-weight, 300);line-height:var(--wcss-heading-md-line-height, 1.3);font-size:var(--wcss-heading-md-font-size, clamp(1.625rem, 2.3333333333vw, 1.75rem));letter-spacing:var(--wcss-heading-md-letter-spacing, 0)}.heading-sm{font-family:var(--wcss-heading-sm-family, "AS Circular"),var(--wcss-heading-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-weight:var(--wcss-heading-sm-weight, 300);line-height:var(--wcss-heading-sm-line-height, 1.3);font-size:var(--wcss-heading-sm-font-size, clamp(1.375rem, 2vw, 1.5rem));letter-spacing:var(--wcss-heading-sm-letter-spacing, 0)}.heading-xs{font-family:var(--wcss-heading-xs-family, "AS Circular"),var(--wcss-heading-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-weight:var(--wcss-heading-xs-weight, 300);line-height:var(--wcss-heading-xs-line-height, 1.3);font-size:var(--wcss-heading-xs-font-size, clamp(1.25rem, 1.6666666667vw, 1.25rem));letter-spacing:var(--wcss-heading-xs-letter-spacing, 0)}.heading-2xs{font-family:var(--wcss-heading-2xs-family, "AS Circular"),var(--wcss-heading-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-weight:var(--wcss-heading-2xs-weight, 300);line-height:var(--wcss-heading-2xs-line-height, 1.3);font-size:var(--wcss-heading-2xs-font-size, clamp(1.125rem, 1.5vw, 1.125rem));letter-spacing:var(--wcss-heading-2xs-letter-spacing, 0)}.accent-2xl{font-family:var(--wcss-accent-2xl-family, "Good OT"),var(--wcss-accent-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-weight:var(--wcss-accent-2xl-weight, 450);line-height:var(--wcss-accent-2xl-line-height, 1);font-size:var(--wcss-accent-2xl-font-size, clamp(2rem, 3.1666666667vw, 2.375rem));letter-spacing:var(--wcss-accent-2xl-letter-spacing, 0.05em);text-transform:uppercase}.accent-xl{font-family:var(--wcss-accent-xl-family, "Good OT"),var(--wcss-accent-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-weight:var(--wcss-accent-xl-weight, 450);line-height:var(--wcss-accent-xl-line-height, 1.3);font-size:var(--wcss-accent-xl-font-size, clamp(1.625rem, 2.3333333333vw, 2rem));letter-spacing:var(--wcss-accent-xl-letter-spacing, 0.05em);text-transform:uppercase}.accent-lg{font-family:var(--wcss-accent-lg-family, "Good OT"),var(--wcss-accent-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-weight:var(--wcss-accent-lg-weight, 450);line-height:var(--wcss-accent-lg-line-height, 1.3);font-size:var(--wcss-accent-lg-font-size, clamp(1.5rem, 2.1666666667vw, 1.75rem));letter-spacing:var(--wcss-accent-lg-letter-spacing, 0.05em);text-transform:uppercase}.accent-md{font-family:var(--wcss-accent-md-family, "Good OT"),var(--wcss-accent-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-weight:var(--wcss-accent-md-weight, 500);line-height:var(--wcss-accent-md-line-height, 1.3);font-size:var(--wcss-accent-md-font-size, clamp(1.375rem, 1.8333333333vw, 1.5rem));letter-spacing:var(--wcss-accent-md-letter-spacing, 0.05em);text-transform:uppercase}.accent-sm{font-family:var(--wcss-accent-sm-family, "Good OT"),var(--wcss-accent-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-weight:var(--wcss-accent-sm-weight, 500);line-height:var(--wcss-accent-sm-line-height, 1.3);font-size:var(--wcss-accent-sm-font-size, clamp(1.125rem, 1.5vw, 1.25rem));letter-spacing:var(--wcss-accent-sm-letter-spacing, 0.05em);text-transform:uppercase}.accent-xs{font-family:var(--wcss-accent-xs-family, "Good OT"),var(--wcss-accent-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-weight:var(--wcss-accent-xs-weight, 500);line-height:var(--wcss-accent-xs-line-height, 1.3);font-size:var(--wcss-accent-xs-font-size, clamp(1rem, 1.3333333333vw, 1rem));letter-spacing:var(--wcss-accent-xs-letter-spacing, 0.1em);text-transform:uppercase}.accent-2xs{font-family:var(--wcss-accent-2xs-family, "Good OT"),var(--wcss-accent-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-weight:var(--wcss-accent-2xs-weight, 450);line-height:var(--wcss-accent-2xs-line-height, 1.3);font-size:var(--wcss-accent-2xs-font-size, clamp(0.875rem, 1.1666666667vw, 0.875rem));letter-spacing:var(--wcss-accent-2xs-letter-spacing, 0.1em);text-transform:uppercase}:host{cursor:pointer;user-select:none;text-overflow:ellipsis;max-width:100dvw}:host .wrapper{display:flex;align-items:center;height:var(--ds-size-400, 2rem);padding-right:var(--ds-size-200, 1rem);padding-left:calc(var(--ds-size-150, 0.75rem) + var(--ds-size-300, 1.5rem) + var(--ds-size-100, 0.5rem));border-radius:var(--ds-size-100, 0.5rem);-webkit-tap-highlight-color:transparent}:host .wrapper[class*=shape-box]{border-radius:unset}:host .wrapper[class*=shape-snowflake]{border-radius:unset;line-height:24px}:host .wrapper[class*=shape-pill]{border-radius:30px}:host .wrapper[class*=-lg]{padding-top:var(--ds-size-75, 0.375rem);padding-bottom:var(--ds-size-75, 0.375rem);padding-right:var(--ds-size-150, 0.75rem);line-height:26px}:host .wrapper[class*=-xl]{padding-top:var(--ds-size-100, 0.5rem);padding-bottom:var(--ds-size-100, 0.5rem);padding-right:var(--ds-size-200, 1rem);line-height:26px}: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)}[slot=displayValue]{display:none}:host([loadingplaceholder]) .wrapper{padding-left:calc(var(--ds-size-150, 0.75rem) + var(--ds-size-300, 1.5rem) + var(--ds-size-100, 0.5rem))}:host([selected]) .wrapper{padding-left:0}:host([nocheckmark]) .wrapper{padding-left:var(--ds-size-150, 0.75rem)}:host([nocheckmark]) .wrapper[class*=-lg]{padding-left:var(--ds-size-150, 0.75rem)}:host([nocheckmark]) .wrapper[class*=-xl]{padding-left:var(--ds-size-200, 1rem)}:host([hidden]){display:none}:host([static]){pointer-events:none}:host([disabled]:hover){cursor:auto}:host([disabled]){user-select:none;pointer-events:none}`;
+
+var colorCss = i$7`:host .wrapper{background-color:var(--ds-auro-menuoption-container-color, transparent);box-shadow:inset 0 0 0 1px var(--ds-auro-menuoption-container-border-color, transparent);color:var(--ds-auro-menuoption-text-color)}:host svg{fill:var(--ds-auro-menuoption-icon-color)}:host([disabled]){--ds-auro-menuoption-container-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-menuoption-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0);--ds-auro-menuoption-icon-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host(.active){--ds-auro-menuoption-container-color: var(--ds-basic-color-surface-accent1-muted, #ebfafd)}@media(hover: hover){:host(:hover){--ds-auro-menuoption-container-color: var(--ds-basic-color-surface-accent1-muted, #ebfafd)}}:host(:focus){--ds-auro-menuoption-container-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-menuoption-container-border-color: var(--ds-basic-color-border-brand, #00274a)}:host([selected]){--ds-auro-menuoption-container-color: var(--ds-basic-color-surface-accent1-subtle, #b4eff9);--ds-auro-menuoption-text-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-menuoption-icon-color: var(--ds-basic-color-texticon-default, #2a2a2a)}:host([selected].active){--ds-auro-menuoption-container-color: var(--ds-basic-color-surface-accent1-muted, #ebfafd)}@media(hover: hover){:host([selected]:hover){--ds-auro-menuoption-container-color: var(--ds-basic-color-surface-accent1-muted, #ebfafd)}}:host([selected]:focus){--ds-auro-menuoption-container-color: var(--ds-basic-color-surface-accent1-subtle, #b4eff9);--ds-auro-menuoption-container-border-color: var(--ds-basic-color-border-brand, #00274a)}:host(:focus.active){--ds-auro-menuoption-container-color: var(--ds-basic-color-surface-accent1-muted, #ebfafd);--ds-auro-menuoption-container-border-color: var(--ds-basic-color-border-brand, #00274a)}@media(hover: hover){:host(:focus:hover){--ds-auro-menuoption-container-color: var(--ds-basic-color-surface-accent1-muted, #ebfafd);--ds-auro-menuoption-container-border-color: var(--ds-basic-color-border-brand, #00274a)}}:host([selected]:focus.active){--ds-auro-menuoption-container-color: var(--ds-basic-color-surface-accent1-muted, #ebfafd);--ds-auro-menuoption-container-border-color: var(--ds-basic-color-border-brand, #00274a)}@media(hover: hover){:host([selected]:focus:hover){--ds-auro-menuoption-container-color: var(--ds-basic-color-surface-accent1-muted, #ebfafd);--ds-auro-menuoption-container-border-color: var(--ds-basic-color-border-brand, #00274a)}}`;
+
+class p{registerComponent(t,a){customElements.get(t)||customElements.define(t,class extends a{});}closestElement(t,a=this,e=(a,s=a&&a.closest(t))=>a&&a!==document&&a!==window?s||e(a.getRootNode().host):null){return e(a)}handleComponentTagRename(t,a){const e=a.toLowerCase();t.tagName.toLowerCase()!==e&&t.setAttribute(e,true);}elementMatch(t,a){const e=a.toLowerCase();return t.tagName.toLowerCase()===e||t.hasAttribute(e)}getSlotText(t,a){const e=t.shadowRoot?.querySelector(`slot[name="${a}"]`);return (e?.assignedNodes({flatten:true})||[]).map(t=>t.textContent?.trim()).join(" ").trim()||null}}var u='<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>',g='<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" style="min-width:100%;height:auto;fill:currentColor" viewBox="0 0 142 138" part="svg"><title id="tail-DEFAULT__title">Airplane tail default image with light gray color</title><path fill="url(#paint0_linear_9225_2069)" fill-rule="evenodd" d="M124.093 14.665a3.26 3.26 0 0 1 3.208 3.829L101.097 119.85c-.47 1.087-2.211 3.398-5.692 3.471l-.106.001-80.65.013A659230 659230 0 0 1 99.08 17.412c1.214-1.497 3.275-2.722 5.372-2.747z" clip-rule="evenodd"/><defs><linearGradient id="paint0_linear_9225_2069" x1="114.823" x2="60.061" y1="14.665" y2="123.335" gradientUnits="userSpaceOnUse"><stop offset=".5" stop-color="#707984"/><stop offset=".5" stop-color="#646E7B"/></linearGradient></defs></svg>';class m extends i$4{static get properties(){return {hidden:{type:Boolean,reflect:true},hiddenVisually:{type:Boolean,reflect:true},hiddenAudible:{type:Boolean,reflect:true}}}hideAudible(t){return t?"true":"false"}}const f=new Map,w=(t,a={})=>{const e=a.responseParser||(t=>t.text());return f.has(t)||f.set(t,fetch(t).then(e)),f.get(t)};var z=i$7`: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, .75rem))}:host{color:currentColor;vertical-align:middle;display:inline-block}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}.componentWrapper{display:flex;line-height:var(--ds-auro-icon-size)}.svgWrapper{height:var(--ds-auro-icon-size);width:var(--ds-auro-icon-size)}.svgWrapper [part=svg]{display:flex}.labelWrapper{margin-left:var(--ds-size-50, .25rem)}.labelWrapper ::slotted(*){line-height:inherit!important}
+`;class y extends m{constructor(){super(),this._initializeDefaults();}_initializeDefaults(){this.onDark=false,this.appearance="default";}static get properties(){return {...m.properties,onDark:{type:Boolean,reflect:true},appearance:{type:String,reflect:true},svg:{attribute:false,reflect:true}}}static get styles(){return z}async fetchIcon(t,a){let e="";e="logos"===t?await w(`${this.uri}/${t}/${a}.svg`):await w(`${this.uri}/icons/${t}/${a}.svg`);return (new DOMParser).parseFromString(e,"text/html").body.querySelector("svg")}async firstUpdated(){try{if(!this.customSvg){const t=await this.fetchIcon(this.category,this.name);if(t)this.svg=t;else if(!t){const t=this.name?.startsWith("tail-")?g:u;this.svg=(new DOMParser).parseFromString(t,"text/html").body.querySelector("svg");}}}catch(t){this.svg=void 0;}}}i$7`.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}:host{display:inline-block;--ds-auro-icon-size: 100%;width:100%;height:100%}:host .logo{color:var(--ds-auro-alaska-color)}:host([onDark]),:host([appearance=inverse]){--ds-auro-alaska-color: #FFF}
+`;var M=i$7`:host{--ds-auro-icon-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-alaska-color: #02426D;--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}
+`;var _=i$7`:host{color:var(--ds-auro-icon-color)}:host([customColor]){color:inherit}:host(:not([onDark])[variant=accent1]),:host(:not([appearance=inverse])[variant=accent1]){--ds-auro-icon-color: var(--ds-basic-color-texticon-accent1, #265688)}:host(:not([onDark])[variant=disabled]),:host(:not([appearance=inverse])[variant=disabled]){--ds-auro-icon-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host(:not([onDark])[variant=muted]),:host(:not([appearance=inverse])[variant=muted]){--ds-auro-icon-color: var(--ds-basic-color-texticon-muted, #676767)}:host(:not([onDark])[variant=statusDefault]),:host(:not([appearance=inverse])[variant=statusDefault]){--ds-auro-icon-color: var(--ds-basic-color-status-default, #afb9c6)}:host(:not([onDark])[variant=statusInfo]),:host(:not([appearance=inverse])[variant=statusInfo]){--ds-auro-icon-color: var(--ds-basic-color-status-info, #01426a)}:host(:not([onDark])[variant=statusSuccess]),:host(:not([appearance=inverse])[variant=statusSuccess]){--ds-auro-icon-color: var(--ds-basic-color-status-success, #447a1f)}:host(:not([onDark])[variant=statusWarning]),:host(:not([appearance=inverse])[variant=statusWarning]){--ds-auro-icon-color: var(--ds-basic-color-status-warning, #fac200)}:host(:not([onDark])[variant=statusError]),:host(:not([appearance=inverse])[variant=statusError]){--ds-auro-icon-color: var(--ds-basic-color-status-error, #e31f26)}:host(:not([onDark])[variant=statusInfoSubtle]),:host(:not([appearance=inverse])[variant=statusInfoSubtle]){--ds-auro-icon-color: var(--ds-basic-color-status-info-subtle, #ebf3f9)}:host(:not([onDark])[variant=statusSuccessSubtle]),:host(:not([appearance=inverse])[variant=statusSuccessSubtle]){--ds-auro-icon-color: var(--ds-basic-color-status-success-subtle, #d6eac7)}:host(:not([onDark])[variant=statusWarningSubtle]),:host(:not([appearance=inverse])[variant=statusWarningSubtle]){--ds-auro-icon-color: var(--ds-basic-color-status-warning-subtle, #fff0b2)}:host(:not([onDark])[variant=statusErrorSubtle]),:host(:not([appearance=inverse])[variant=statusErrorSubtle]){--ds-auro-icon-color: var(--ds-basic-color-status-error-subtle, #fbc6c6)}:host(:not([onDark])[variant=fareBasicEconomy]),:host(:not([appearance=inverse])[variant=fareBasicEconomy]){--ds-auro-icon-color: var(--ds-basic-color-fare-basiceconomy, #97eaf8)}:host(:not([onDark])[variant=fareBusiness]),:host(:not([appearance=inverse])[variant=fareBusiness]){--ds-auro-icon-color: var(--ds-basic-color-fare-business, #01426a)}:host(:not([onDark])[variant=fareEconomy]),:host(:not([appearance=inverse])[variant=fareEconomy]){--ds-auro-icon-color: var(--ds-basic-color-fare-economy, #0074ca)}:host(:not([onDark])[variant=fareFirst]),:host(:not([appearance=inverse])[variant=fareFirst]){--ds-auro-icon-color: var(--ds-basic-color-fare-first, #00274a)}:host(:not([onDark])[variant=farePremiumEconomy]),:host(:not([appearance=inverse])[variant=farePremiumEconomy]){--ds-auro-icon-color: var(--ds-basic-color-fare-premiumeconomy, #005154)}:host(:not([onDark])[variant=tierOneWorldEmerald]),:host(:not([appearance=inverse])[variant=tierOneWorldEmerald]){--ds-auro-icon-color: var(--ds-basic-color-tier-program-oneworld-emerald, #139142)}:host(:not([onDark])[variant=tierOneWorldSapphire]),:host(:not([appearance=inverse])[variant=tierOneWorldSapphire]){--ds-auro-icon-color: var(--ds-basic-color-tier-program-oneworld-sapphire, #015daa)}:host(:not([onDark])[variant=tierOneWorldRuby]),:host(:not([appearance=inverse])[variant=tierOneWorldRuby]){--ds-auro-icon-color: var(--ds-basic-color-tier-program-oneworld-ruby, #a41d4a)}:host([onDark]),:host([appearance=inverse]){--ds-auro-icon-color: var(--ds-basic-color-texticon-inverse, #ffffff)}:host([onDark][variant=disabled]),:host([appearance=inverse][variant=disabled]){--ds-auro-icon-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}:host([onDark][variant=muted]),:host([appearance=inverse][variant=muted]){--ds-auro-icon-color: var(--ds-basic-color-texticon-inverse-muted, #ccd2db)}:host([onDark][variant=statusError]),:host([appearance=inverse][variant=statusError]){--ds-auro-icon-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8)}
+`;class k extends y{constructor(){super(),this._initializeDefaults();}_initializeDefaults(){this.variant=void 0,this.uri="https://cdn.jsdelivr.net/npm/@alaskaairux/icons@latest/dist",this.runtimeUtils=new p;}static get properties(){return {...y.properties,ariaHidden:{type:String,reflect:true},category:{type:String,reflect:true},customColor:{type:Boolean,reflect:true},customSvg:{type:Boolean},label:{type:Boolean,reflect:true},name:{type:String,reflect:true},variant:{type:String,reflect:true}}}static get styles(){return [y.styles,M,z,_]}static register(t="auro-icon"){p.prototype.registerComponent(t,k);}connectedCallback(){super.connectedCallback(),this.runtimeUtils.handleComponentTagRename(this,"auro-icon");}exposeCssParts(){this.setAttribute("exportparts","svg:iconSvg");}async firstUpdated(){if(await super.firstUpdated(),this.hasAttribute("ariaHidden")&&this.svg){const t=this.svg.querySelector("desc");t&&(t.remove(),this.svg.removeAttribute("aria-labelledby"));}}render(){const t={labelWrapper:true,util_displayHiddenVisually:!this.label};return b$2`
+      <div class="componentWrapper">
+        <div
+          class="${e$3({svgWrapper:true})}"
+          title="${o(this.title||void 0)}">
+          <span aria-hidden="${o(this.ariaHidden||true)}" part="svg">
+            ${this.customSvg?b$2`
+                <slot name="svg"></slot>
+              `:b$2`
+                ${this.svg}
+              `}
+          </span>
+        </div>
+
+        <div class="${e$3(t)}" part="label">
+          <slot></slot>
+        </div>
+      </div>
+    `}}
+
+var iconVersion = '9.1.2';
+
+var checkmarkIcon = {"svg":"<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" aria-labelledby=\"checkmark-sm__desc\" class=\"ico_squareLarge\" role=\"img\" style=\"min-width:var(--auro-size-lg, var(--ds-size-300, 1.5rem));height:var(--auro-size-lg, var(--ds-size-300, 1.5rem));fill:currentColor\" viewBox=\"0 0 24 24\" part=\"svg\"><title/><desc id=\"checkmark-sm__desc\">a small check mark.</desc><path d=\"M8.461 11.84a.625.625 0 1 0-.922.844l2.504 2.738c.247.27.674.27.922 0l5.496-6a.625.625 0 1 0-.922-.844l-5.035 5.496z\"/></svg>"};
+
+// Copyright (c) 2021 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
+// See LICENSE in the project root for license information.
+
+
+let menuOptionIdCounter = 0;
+
+/**
+ * The `auro-menuoption` element provides users a way to define a menu option.
+ * @customElement auro-menuoption
+ *
+ * @slot default - The default slot for the menu option text.
+ *
+ * @event auroMenuOption-mouseover - Notifies that this option has been hovered over.
+ */
+class AuroMenuOption extends AuroElement {
 
   /**
    * This will register this element with the browser.
-   * @param {string} [name="auro-menu"] - The name of the element that you want to register.
+   * @param {string} [name="auro-menuoption"] - The name of the element that you want to register.
    *
    * @example
-   * AuroMenu.register("custom-menu") // this will register this element to <custom-menu/>
+   * AuroMenuOption.register("custom-menuoption") // this will register this element to <custom-menuoption/>
    *
    */
-  static register(name = "auro-menu") {
-    AuroLibraryRuntimeUtils$4.prototype.registerComponent(name, AuroMenu);
+  static register(name = "auro-menuoption") {
+    AuroLibraryRuntimeUtils$4.prototype.registerComponent(name, AuroMenuOption);
   }
 
   /**
-   * Formatted value based on `multiSelect` state.
-   * Default type is `String`, changing to `Array<String>` when `multiSelect` is true.
-   * @private
-   * @returns {String|Array<String>}
+   * Returns whether the menu option is currently active and selectable.
+   * An option is considered active if it is not hidden, not disabled, and not static.
+   * @returns {boolean} True if the option is active, false otherwise.
    */
-  get formattedValue() {
-    return this.menuService.currentValue;
+  get isActive() {
+    return !this.hasAttribute('hidden') &&
+      !this.disabled &&
+      !this.hasAttribute('static');
   }
 
-  /**
-   * Gets the current property values for the menu service.
-   * @private
-   * @returns {Object}
-   */
-  get propertyValues() {
-    return {
-      size: this.size,
-      shape: this.shape,
-      noCheckmark: this.nocheckmark,
-      disabled: this.disabled
-    };
-  }
+  constructor() {
+    super();
 
-  /**
-   * Provides the menu context to child components.
-   * Initializes the MenuService and subscribes to menu changes.
-   * @protected
-   */
-  provideContext() {
-    if (this.parentElement && this.parentElement.closest('auro-menu, [auro-menu]')) {
-      this.rootMenu = false;
-      this.menuService = this.parentElement.menuService;
-      this._contextProvider = this.parentElement._contextProvider;
-      return;
-    }
+    this.bindEvents();
 
-    this.menuService = new MenuService({host: this});
-    this.menuService.setProperties(this.propertyValues);
-    this.menuService.subscribe(this.handleMenuChange.bind(this));
-    this._contextProvider = new i(this, {
-      context: MenuContext,
-      initialValue: this.menuService
-    });
-  }
+    /**
+     * @private
+     */
+    this.shape = undefined;
 
-  /**
-   * Updates the currently active option in the menu.
-   * @param {HTMLElement} option - The option to set as active.
-   */
-  updateActiveOption(option) {
-    this.menuService.setHighlightedOption(option);
-  }
+    /**
+     * @private
+     */
+    this.size = undefined;
 
-  /**
-   * Sets the internal value and manages update state.
-   * @param {String|Array<String>} value - The value to set.
-   * @protected
-   */
-  setInternalValue(value) {
-    if (this.value !== value) {
-      this.internalUpdateInProgress = true;
-      this.value = value;
+    /**
+     * Generate unique names for dependency components.
+     */
+    const versioning = new AuroDependencyVersioning$3();
+    this.iconTag = versioning.generateTag('auro-formkit-menuoption-icon', iconVersion, k);
 
-      setTimeout(() => {
-        this.internalUpdateInProgress = false;
-      });
-    }
+    this.selected = false;
+    this.noCheckmark = false;
+    this.disabled = false;
+    this.noMatch = false;
+
+    /**
+     * @private
+     */
+    this.runtimeUtils = new AuroLibraryRuntimeUtils$4();
+
+    // Initialize context-related properties
+    this.menuService = null;
+    this.unsubscribe = null;
+
+    /**
+     * @private
+     */
+    this.handleMenuChange = this.handleMenuChange.bind(this);
   }
 
-  /**
-   * Handles changes from the menu service and updates component state.
-   * @param {Object} event - The event object from the menu service.
-   * @protected
-   */
-  handleMenuChange(event) {
-    if (event.type === 'valueChange') {
+  static get properties() {
+    return {
+      ...super.properties,
+
+      /**
+       * When true, disables the menu option.
+       */
+      disabled: {
+        type: Boolean,
+        reflect: true
+      },
+
+      /**
+       * @private
+       */
+      event: {
+        type: String,
+        reflect: true
+      },
+
+      /**
+       * @private
+       */
+      layout: {
+        type: String
+      },
+
+      /**
+       * Allows users to set a unique key for the menu option for specified option selection. If no key is provided, the value property will be used.
+       */
+      key: {
+        type: String,
+        reflect: true
+      },
+
+      /**
+       * @private
+       */
+      menuService: {
+        type: Object,
+        state: true
+      },
 
-      // New option is array value or first option with fallback to undefined for empty array in all cases
-      const newOption = this.multiSelect && event.options.length ? event.options : event.options[0] || undefined;
-      const newValue = event.stringValue;
+      /**
+       * @private
+       */
+      matchWord: {
+        type: String,
+        state: true
+      },
 
-      // Check if the option or value has actually changed
-      if (this.optionSelected !== newOption || this.stringValue !== newValue) {
-        this.optionSelected = newOption;
-        this.setInternalValue(newValue);
-      }
+      /**
+       * @private
+       */
+      noCheckmark: {
+        type: Boolean,
+        reflect: true
+      },
 
-      // Notify components of selection change
-      this.notifySelectionChange(event);
-    }
+      /**
+       * When true, marks this option as the "no matching results" placeholder shown by combobox when the user's input does not match any available options. Enables distinct styling and prevents the option from being treated as a selectable match.
+       */
+      noMatch: {
+        type: Boolean,
+        reflect: true,
+        attribute: 'nomatch'
+      },
 
-    if (event.type === 'highlightChange') {
-      this.optionActive = event.option;
-      this._index = event.index;
-    }
+      /**
+       * Specifies that an option is selected.
+       */
+      selected: {
+        type: Boolean,
+        reflect: true
+      },
 
-    if (event.type === 'optionsChange') {
-      this.options = event.options;
-      this.dispatchEvent(new CustomEvent('auroMenu-optionsChange', {
-        detail: {
-          options: event.options
-        }
-      }));
-    }
-  }
+      /**
+       * Specifies the tab index of the menu option.
+       */
+      tabIndex: {
+        type: Number,
+        reflect: true
+      },
 
-  /**
-   * Gets the currently selected options.
-   * @returns {Array<HTMLElement>}
-   */
-  get selectedOptions() {
-    return this.menuService ? this.menuService.selectedOptions : [];
+      /**
+       * Specifies the value to be sent to a server.
+       */
+      value: {
+        type: String,
+        reflect: true
+      },
+    };
   }
 
-  /**
-   * Gets the first selected option, or null if none.
-   * @returns {HTMLElement|null}
-   */
-  get selectedOption() {
-    return this.menuService ? this.menuService.selectedOptions[0] : null;
+  static get styles() {
+    return [
+      styleCss,
+      colorCss,
+      tokensCss
+    ];
   }
 
-  // Lifecycle Methods
-
   connectedCallback() {
     super.connectedCallback();
 
-    this.provideContext();
-
-    // this.addEventListener('keydown', this.handleKeyDown);
-    this.addEventListener('auroMenuOption-click', this.handleMouseSelect);
-    this.addEventListener('auroMenuOption-mouseover', this.handleOptionHover);
-    this.addEventListener('slotchange', this.handleSlotChange);
-    this.setTagAttribute("auro-menu");
-  }
+    // Add the tag name as an attribute if it is different than the component name
+    // Add this step soon as this node gets attached to the DOM to avoid racing condition with menu's value setting logic.
+    this.runtimeUtils.handleComponentTagRename(this, 'auro-menuoption');
 
-  disconnectedCallback() {
-    // this.removeEventListener('keydown', this.handleKeyDown);
-    this.removeEventListener('auroMenuOption-click', this.handleMouseSelect);
-    this.removeEventListener('auroMenuOption-mouseover', this.handleOptionHover);
-    this.removeEventListener('slotchange', this.handleSlotChange);
+    // Set up context consumption in connectedCallback
+    this._contextConsumer = new s$1(this, {
+      context: MenuContext,
+      callback: this.attachTo.bind(this),
+      subscribe: true
+    });
 
-    super.disconnectedCallback();
+    // Establish the key property as early as possible.
+    // When a framework (e.g. Svelte) inserts the element into the DOM before
+    // setting its `value` property, both `getAttribute('value')` and
+    // `getAttribute('key')` return null here. Setting `this.key = null`
+    // would block the fallback in `updated()` that assigns key from the
+    // value property (the guard checked `=== undefined`). Only assign key
+    // if at least one source attribute is actually present so that the
+    // `updated()` fallback can run when the value property arrives later.
+    const valueAttr = this.getAttribute('value');
+    const keyAttr = this.getAttribute('key');
+    const resolvedKey = keyAttr !== null ? keyAttr : valueAttr;
+    if (resolvedKey !== null) {
+      this.key = resolvedKey;
+    }
   }
 
   firstUpdated() {
-    AuroLibraryRuntimeUtils$4.prototype.handleComponentTagRename(this, 'auro-menu');
+    // Add the tag name as an attribute if it is different than the component name
+    this.runtimeUtils.handleComponentTagRename(this, 'auro-menuoption');
 
-    this.loadingSlots = this.querySelectorAll("[slot='loadingText'], [slot='loadingIcon']");
-    this.initializeMenu();
-  }
+    // Generate unique ID if not already set (required for aria-activedescendant)
+    if (!this.id) {
+      menuOptionIdCounter += 1;
+      this.id = `menuoption-${menuOptionIdCounter}`;
+    }
+
+    this.setAttribute('role', 'option');
+    this.setAttribute('aria-selected', 'false');
 
+    this.addEventListener('mouseover', () => {
+      this.dispatchEvent(new CustomEvent('auroMenuOption-mouseover', {
+        bubbles: true,
+        cancelable: false,
+        composed: true,
+        detail: this
+      }));
+    });
+  }
 
   updated(changedProperties) {
     super.updated(changedProperties);
 
-    // Apply value selection synchronously so that static-HTML fixtures
-    // resolve within a single update cycle.  The refactored selectByValue
-    // no longer calls reset() first, so the destructive intermediate-event
-    // cascade that originally required deferral is eliminated.  If option
-    // keys are not yet resolved (framework mount-order race), selectByValue
-    // queues a bounded retry automatically via queuePendingValue.
-    if (changedProperties.has('value') && !this.internalUpdateInProgress) {
-      this.menuService.selectByValue(this.value);
-    }
+    // Update aria-selected attribute if selected changed
+    if (changedProperties.has('selected')) {
 
-    // Handle loading state changes
-    if (changedProperties.has('loading')) {
-      this.setLoadingState(this.loading);
+      // Update aria-selected attribute
+      this.setAttribute('aria-selected', this.selected.toString());
+
+      // Update menu service selection state if this isn't an internal update
+      if (this.internalUpdateInProgress !== true && this.menuService) {
+        this.menuService[this.selected ? 'selectOption' : 'deselectOption'](this);
+      }
     }
 
-    if (changedProperties.has('multiSelect') && this.rootMenu) {
-      if (this.multiSelect) {
-        this.setAttribute('aria-multiselectable', 'true');
+    if (changedProperties.has('disabled')) {
+      if (this.disabled) {
+        this.setAttribute('aria-disabled', 'true');
       } else {
-        this.removeAttribute('aria-multiselectable');
+        this.removeAttribute('aria-disabled');
       }
     }
+
+    if (changedProperties.has('active')) {
+      this.updateActiveClasses();
+    }
+
+    // Update text highlight if matchWord changed
+    if (changedProperties.has('matchWord')) {
+      this.updateTextHighlight();
+    }
+
+    // Set the key to be the passed value if no key is provided.
+    // Loose equality (== null) is intentional: it catches both null AND
+    // undefined. When a framework (e.g. Svelte, React) inserts the element
+    // before setting its value property, connectedCallback skips key
+    // assignment because both attributes are null at that point. The Lit
+    // property default for `key` is undefined (not null), so strict
+    // === null would miss the case and the fallback would never run.
+    if (changedProperties.has('value') && this.key == null) { // eslint-disable-line eqeqeq, no-eq-null
+      this.key = this.value;
+    }
+  }
+
+  disconnectedCallback() {
+    if (this.menuService) {
+      this.menuService.unsubscribe(this.handleMenuChange);
+      this.menuService.removeMenuOption(this);
+    }
   }
 
   /**
-   * Sets an attribute that matches the default tag name if the tag name is not the default.
-   * @param {string} tagName - The tag name to set as an attribute.
-   * @private
+   * Sets up event listeners for user interaction with the menu option.
+   * This function enables click and mouse enter events to trigger selection and highlighting logic.
    */
-  setTagAttribute(tagName) {
-    if (this.tagName.toLowerCase() !== tagName) {
-      this.setAttribute(tagName, true);
-    }
+  bindEvents() {
+    this.addEventListener('click', this.handleClick.bind(this));
+    this.addEventListener('mouseenter', this.handleMouseEnter.bind(this));
   }
 
   /**
-   * Sets the loading state and dispatches a loading change event.
-   * @param {boolean} isLoading - Whether the menu is loading.
-   * @protected
+   * Attaches this menu option to a menu service and subscribes to its events.
+   * This method enables the option to participate in menu selection and highlighting logic.
+   * @param {Object} service - The menu service instance to attach to.
    */
-  setLoadingState(isLoading) {
-    this.setAttribute("aria-busy", isLoading);
-    dispatchMenuEvent(this, "auroMenu-loadingChange", {
-      loading: isLoading,
-      hasLoadingPlaceholder: this.hasLoadingPlaceholder
-    });
+  attachTo(service) {
+    if (!service) {
+      return;
+    }
+    this.menuService = service;
+    this.menuService.addMenuOption(this);
+    this.menuService.subscribe(this.handleMenuChange);
   }
 
-  // Init Methods
+  /**
+   * Handles changes from the menu service and updates the option's state.
+   * This function synchronizes the option's properties and selection/highlight state with menu events.
+   * @param {Object} event - The event object from the menu service.
+   */
+  handleMenuChange(event) {
+
+    // Ignore events without a type or property
+    if (!event || (!event.type && !event.property)) {
+      return;
+    }
+
+    // Update reactive properties based on event type
+    if (event.property && Object.keys(AuroMenuOption.properties).includes(event.property)) {
+      this[event.property] = event.value;
+    }
+
+    // Handle highlight changes
+    if (event.type === 'highlightChange') {
+      const isActive = event.option === this;
+      this.active = isActive;
+      this.updateActiveClasses();
+    }
+
+    if (event.type === 'stateChange') {
+      const isSelected = event.selectedOptions.includes(this);
+      this.setInternalSelected(isSelected);
+    }
+  }
 
   /**
-   * Initializes the menu's state and structure.
-   * @private
+   * Updates the internal selected state of the menu option bypassing 'updated' and triggers custom events if selected.
+   * This function ensures the option's selection state is synchronized with menu logic and notifies listeners.
+   * @param {boolean} isSelected - Whether the option should be marked as selected.
    */
-  initializeMenu() {
-    if (this.rootMenu) {
-      this.setAttribute('role', 'listbox');
-      this.setAttribute('root', '');
+  setInternalSelected(isSelected) {
+    this.internalUpdateInProgress = true;
+    this.selected = isSelected;
 
-      if (this.multiSelect) {
-        this.setAttribute('aria-multiselectable', 'true');
-      }
+    // Fire custom event if selected
+    if (isSelected) {
+      this.handleCustomEvent();
     }
 
-    this.handleNestedMenus(this);
+    setTimeout(() => {
+      this.internalUpdateInProgress = false;
+    }, 0);
   }
 
   /**
-   * Selects the currently highlighted option.
-   * @protected
+   * Sets the selected state of the menu option.
+   * This function updates whether the option is currently selected.
+   * @param {boolean} isSelected - Whether the option should be marked as selected.
+   * @deprecated Simply modify the `selected` property directly instead.
    */
-  makeSelection() {
-    this.menuService.selectHighlightedOption();
+  setSelected(isSelected) {
+    this.selected = isSelected;
   }
 
   /**
-   * Resets all options to their default state.
-   * @private
+   * Updates the active state and visual highlighting of the menu option.
+   * This function toggles the option's active status and applies or removes the active CSS class.
+   * @param {boolean} isActive - Whether the option should be marked as active.
+   * @deprecated Simply modify the `active` property directly instead.
    */
-  clearSelection() {
-    this.optionSelected = undefined;
-    this.value = undefined;
-    this._index = -1;
+  updateActive(isActive) {
+
+    // Set active state
+    this.active = isActive;
+    this.updateActiveClasses();
   }
 
   /**
-   * Resets the menu to its initial state.
-   * This is the only way to return value to undefined.
-   * @public
+   * Updates the CSS class for the menu option based on its active state.
+   * This function adds or removes the 'active' class to visually indicate the option's active status.
+   * @private
    */
-  reset() {
-    this.menuService.reset();
-
-    // Dispatch reset event
-    dispatchMenuEvent(this, 'auroMenu-selectValueReset');
+  updateActiveClasses() {
+    // Update class based on active state
+    if (this.active) this.classList.add('active');
+    else this.classList.remove('active');
   }
 
+
   /**
-   * Handles nested menu structure.
+   * Updates the visual highlighting of text within the menu option based on the current match word.
+   * This function highlights matching text segments and manages nested spacers for display formatting.
    * @private
-   * @param {HTMLElement} menu - Root menu element.
    */
-  handleNestedMenus(menu) {
-    menu.level = menu.parentElement.level >= 0 ? menu.parentElement.level + 1 : 0;
+  updateTextHighlight() {
 
-    if (menu.level > 0) {
-      menu.setAttribute('role', 'group');
-      menu.removeAttribute("root");
-      if (!menu.hasAttribute('aria-label')) {
-        menu.setAttribute('aria-label', 'submenu');
-      }
+    // Regex for matchWord if needed
+    let regexWord = null;
+
+    if (this.matchWord && this.matchWord.length) {
+      const escapedWord = this.matchWord.replace(/[.*+?^${}()|[\]\\]/gu, '\\$&');
+      regexWord = new RegExp(escapedWord, 'giu');
     }
 
-    const options = menu.querySelectorAll(':scope > auro-menuoption, :scope > [auro-menuoption]');
-    options.forEach((option) => {
-      const regex = new RegExp(this.nestingSpacer, "gu");
-      option.innerHTML = this.nestingSpacer.repeat(menu.level) + option.innerHTML.replace(regex, '');
-    });
-  }
+    // Update text highlighting if matchWord changed
+    if (regexWord &&
+      this.isActive && !this.hasAttribute('persistent')) {
+      const nested = this.querySelectorAll('.nestingSpacer');
 
-  /**
-   * Navigates the menu options in the specified direction.
-   * @param {'up'|'down'} direction - The direction to navigate.
-   * @protected
-   */
-  navigateOptions(direction) {
-    if (direction === 'up') {
-      this.menuService.highlightPrevious();
-    } else if (direction === 'down') {
-      this.menuService.highlightNext();
-    }
-  }
+      const displayValueEl = this.querySelector('[slot="displayValue"]');
+      if (displayValueEl) {
+        this.removeChild(displayValueEl);
+      }
 
-  /**
-   * Handles slot change events.
-   * @private
-   */
-  handleSlotChange() {
-    if (this.rootMenu) {
-      this.initializeMenu();
+      // Create nested spacers
+      const nestingSpacerBundle = [...nested].map(() => this.nestingSpacer).join('');
+
+      // Update with spacers and matchWord
+      this.innerHTML = nestingSpacerBundle +
+        this.textContent.replace(
+          regexWord,
+          (match) => `<strong>${match}</strong>`
+        );
+      if (displayValueEl) {
+        this.append(displayValueEl);
+      }
     }
   }
 
   /**
-   * Handles custom events defined on options.
+   * Handles click events on the menu option, toggling its selected state.
+   * This function dispatches a click event and updates selection if the option is not disabled.
    * @private
-   * @param {HTMLElement} option - Option with custom event.
    */
-  handleCustomEvent(option) {
-    const eventName = option.getAttribute('event');
-    dispatchMenuEvent(this, eventName);
-    dispatchMenuEvent(this, 'auroMenu-customEventFired');
+  handleClick() {
+    if (!this.disabled) {
+      this.dispatchClickEvent();
+      this.selected = !this.selected;
+    }
   }
 
   /**
-   * Notifies selection change to parent components.
-   * @param {any} source - The source that triggers this event.
+   * Handles mouse enter events to highlight the menu option.
+   * This function updates the menu service to set this option as the currently highlighted item if not disabled.
    * @private
    */
-  notifySelectionChange({value, stringValue, keys, options, reason} = {}) {
-    dispatchMenuEvent(this, 'auroMenu-selectedOption', {
-      value,
-      stringValue,
-      keys,
-      options,
-      reason
-    });
+  handleMouseEnter() {
+    if (!this.disabled) {
+      this.menuService.setHighlightedOption(this);
+    }
   }
 
   /**
-   * Checks if an option is currently selected.
+   * Dispatches custom events defined for this menu option.
+   * This function notifies listeners when a custom event is triggered by the option.
    * @private
-   * @param {HTMLElement} option - The option to check.
-   * @returns {boolean}
    */
-  isOptionSelected(option) {
-    if (!this.optionSelected) {
-      return false;
-    }
-
-    if (this.multiSelect) {
-      // In multi-select mode, check if the option is in the selected array
-      return Array.isArray(this.optionSelected) && this.optionSelected.some((selectedOption) => selectedOption === option);
+  handleCustomEvent() {
+    if (this.event) {
+      dispatchMenuEvent(this, this.event, { option: this });
+      dispatchMenuEvent(this, 'auroMenu-customEventFired', { option: this });
     }
-
-    return this.optionSelected === option;
   }
 
   /**
-   * Getter for loading placeholder state.
-   * @returns {boolean} - True if loading slots are present and non-empty.
+   * Dispatches a click event for this menu option.
+   * This function notifies listeners that the option has been clicked.
+   * @private
    */
-  get hasLoadingPlaceholder() {
-    return this.loadingSlots && this.loadingSlots.length > 0;
+  dispatchClickEvent() {
+    this.dispatchEvent(new CustomEvent('auroMenuOption-click', {
+      bubbles: true,
+      cancelable: false,
+      composed: true,
+      detail: this
+    }));
   }
 
   /**
-   * Getter for wrapper classes based on size.
-   * @returns {Object} - Class map for the wrapper element.
+   * Generates an HTML element containing an SVG icon based on the provided `svgContent`.
+   *
    * @private
+   * @param {string} svgContent - The SVG content to be embedded.
+   * @returns {Element} The HTML element containing the SVG icon.
    */
-  get wrapperClasses() {
-    return e$3({
-      'menuWrapper': true,
-      [this.size]: true,
-    });
+  generateIconHtml(svgContent) {
+    const dom = new DOMParser().parseFromString(svgContent, 'text/html');
+    const svg = dom.body.firstChild;
+
+    svg.setAttribute('slot', 'svg');
+
+    return u$7`<${this.iconTag} customColor customSvg>${svg}</${this.iconTag}>`;
   }
 
   /**
@@ -18070,26 +18070,26 @@ class AuroMenu extends AuroElement {
    * @returns {void}
    */
   renderLayout() {
-    if (this.loading) {
-      return b$2`
-        <div class="${this.wrapperClasses}">
-          <auro-menuoption
-            disabled
-            loadingplaceholder
-            class="${this.hasLoadingPlaceholder ? "" : "empty"}"
-          >
-            <div>
-              <slot name="loadingIcon" class="body-lg"></slot>
-              <slot name="loadingText"></slot>
-            </div>
-          </auro-menuoption>
-        </div>
-      `;
-    }
 
-    return b$2`
-      <div class="${this.wrapperClasses}">
-        <slot @slotchange=${this.handleSlotChange}></slot>
+    const fontClassMap = {
+      xs: 'body-sm',
+      sm: 'body-default',
+      md: 'body-default',
+      lg: 'body-lg',
+      xl: 'body-lg'
+    };
+
+    const classes = e$3({
+      'wrapper': true,
+      [this.size ? fontClassMap[this.size] : 'body-sm']: true,
+    });
+
+    return u$7`
+      <div class="${classes}">
+        ${this.selected && !this.noCheckmark
+        ? this.generateIconHtml(checkmarkIcon.svg)
+        : undefined}
+        <slot></slot>
       </div>
     `;
   }