@aurodesignsystem-dev/auro-formkit 0.0.0-pr1452.0 → 0.0.0-pr1456.0

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

@@ -6178,7 +6178,8 @@ let BaseInput$2 = class BaseInput extends AuroElement$6 {
        * The id global attribute defines an identifier (ID) which must be unique in the whole document.
        */
       id: {
-        type: String
+        type: String,
+        reflect: true,
       },
 
       /**
@@ -6715,11 +6716,10 @@ let BaseInput$2 = class BaseInput extends AuroElement$6 {
    */
   handleClickClear() {
     this.inputElement.value = "";
-    this.value = "";
     this.labelElement.classList.remove('inputElement-label--sticky');
+    this.validation.reset(this);
     this.notifyValueChanged();
     this.focus();
-    this.validation.validate(this);
   }
 
   /**
@@ -7458,7 +7458,7 @@ let AuroHelpText$8 = class AuroHelpText extends i$4 {
   }
 };
 
-var formkitVersion$8 = '202604242248';
+var formkitVersion$8 = '202605011613';
 
 // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -17378,7 +17378,7 @@ let AuroBibtemplate$3 = class AuroBibtemplate extends i$4 {
   }
 };
 
-var formkitVersion$2$1 = '202604242248';
+var formkitVersion$2$1 = '202605011613';
 
 let l$1$2 = class l{generateElementName(t,e){let o=t;return o+="-",o+=e.replace(/[.]/g,"_"),o}generateTag(o,s,a){const r=this.generateElementName(o,s),i=i$3`${s$6(r)}`;return customElements.get(r)||customElements.define(r,class extends a{}),i}};let d$1$2 = class d{registerComponent(t,e){customElements.get(t)||customElements.define(t,class extends e{});}closestElement(t,e=this,o=(e,s=e&&e.closest(t))=>e&&e!==document&&e!==window?s||o(e.getRootNode().host):null){return o(e)}handleComponentTagRename(t,e){const o=e.toLowerCase();t.tagName.toLowerCase()!==o&&t.setAttribute(o,true);}elementMatch(t,e){const o=e.toLowerCase();return t.tagName.toLowerCase()===o||t.hasAttribute(o)}getSlotText(t,e){const o=t.shadowRoot?.querySelector(`slot[name="${e}"]`),s=(o?.assignedNodes({flatten:true})||[]).map(t=>t.textContent?.trim()).join(" ").trim();return s||null}};let h$1$2 = class h{registerComponent(t,e){customElements.get(t)||customElements.define(t,class extends e{});}closestElement(t,e=this,o=(e,s=e&&e.closest(t))=>e&&e!==document&&e!==window?s||o(e.getRootNode().host):null){return o(e)}handleComponentTagRename(t,e){const o=e.toLowerCase();t.tagName.toLowerCase()!==o&&t.setAttribute(o,true);}elementMatch(t,e){const o=e.toLowerCase();return t.tagName.toLowerCase()===o||t.hasAttribute(o)}};var c$1$3=i$7`:host{color:var(--ds-auro-loader-color)}:host>span{background-color:var(--ds-auro-loader-background-color);border-color:var(--ds-auro-loader-border-color)}:host([onlight]),:host([appearance=brand]){--ds-auro-loader-color: var(--ds-basic-color-brand-primary, #01426a)}:host([ondark]),:host([appearance=inverse]){--ds-auro-loader-color: var(--ds-basic-color-texticon-inverse, #ffffff)}:host([orbit])>span{--ds-auro-loader-background-color: transparent}:host([orbit])>span:nth-child(1){--ds-auro-loader-border-color: currentcolor;opacity:.25}:host([orbit])>span:nth-child(2){--ds-auro-loader-border-color: currentcolor;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent}
 `,u$4$2=i$7`.body-default{font-size:var(--wcss-body-default-font-size, 1rem);line-height:var(--wcss-body-default-line-height, 1.5rem)}.body-default,.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-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-lg{font-size:var(--wcss-body-lg-font-size, 1.125rem);line-height:var(--wcss-body-lg-line-height, 1.625rem)}.body-sm{font-size:var(--wcss-body-sm-font-size, .875rem);line-height:var(--wcss-body-sm-line-height, 1.25rem)}.body-sm,.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-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-xs{font-size:var(--wcss-body-xs-font-size, .75rem);line-height:var(--wcss-body-xs-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-size:var(--wcss-body-2xs-font-size, .625rem);font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0);line-height:var(--wcss-body-2xs-line-height, .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-size:var(--wcss-display-2xl-font-size, clamp(3.5rem, 6vw, 5.375rem));font-weight:var(--wcss-display-2xl-weight, 300);letter-spacing:var(--wcss-display-2xl-letter-spacing, 0);line-height:var(--wcss-display-2xl-line-height, 1.3)}.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-size:var(--wcss-display-xl-font-size, clamp(3rem, 5.3333333333vw, 4.5rem));font-weight:var(--wcss-display-xl-weight, 300);letter-spacing:var(--wcss-display-xl-letter-spacing, 0);line-height:var(--wcss-display-xl-line-height, 1.3)}.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-size:var(--wcss-display-lg-font-size, clamp(2.75rem, 4.6666666667vw, 4rem));font-weight:var(--wcss-display-lg-weight, 300);letter-spacing:var(--wcss-display-lg-letter-spacing, 0);line-height:var(--wcss-display-lg-line-height, 1.3)}.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-size:var(--wcss-display-md-font-size, clamp(2.5rem, 4vw, 3.5rem));font-weight:var(--wcss-display-md-weight, 300);letter-spacing:var(--wcss-display-md-letter-spacing, 0);line-height:var(--wcss-display-md-line-height, 1.3)}.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-size:var(--wcss-display-sm-font-size, clamp(2rem, 3.6666666667vw, 3rem));font-weight:var(--wcss-display-sm-weight, 300);letter-spacing:var(--wcss-display-sm-letter-spacing, 0);line-height:var(--wcss-display-sm-line-height, 1.3)}.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-size:var(--wcss-display-xs-font-size, clamp(1.75rem, 3vw, 2.375rem));font-weight:var(--wcss-display-xs-weight, 300);letter-spacing:var(--wcss-display-xs-letter-spacing, 0);line-height:var(--wcss-display-xs-line-height, 1.3)}.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-size:var(--wcss-heading-xl-font-size, clamp(2rem, 3vw, 2.5rem));font-weight:var(--wcss-heading-xl-weight, 300);letter-spacing:var(--wcss-heading-xl-letter-spacing, 0);line-height:var(--wcss-heading-xl-line-height, 1.3)}.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-size:var(--wcss-heading-lg-font-size, clamp(1.75rem, 2.6666666667vw, 2.25rem));font-weight:var(--wcss-heading-lg-weight, 300);letter-spacing:var(--wcss-heading-lg-letter-spacing, 0);line-height:var(--wcss-heading-lg-line-height, 1.3)}.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-size:var(--wcss-heading-md-font-size, clamp(1.625rem, 2.3333333333vw, 1.75rem));font-weight:var(--wcss-heading-md-weight, 300);letter-spacing:var(--wcss-heading-md-letter-spacing, 0);line-height:var(--wcss-heading-md-line-height, 1.3)}.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-size:var(--wcss-heading-sm-font-size, clamp(1.375rem, 2vw, 1.5rem));font-weight:var(--wcss-heading-sm-weight, 300);letter-spacing:var(--wcss-heading-sm-letter-spacing, 0);line-height:var(--wcss-heading-sm-line-height, 1.3)}.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-size:var(--wcss-heading-xs-font-size, clamp(1.25rem, 1.6666666667vw, 1.25rem));font-weight:var(--wcss-heading-xs-weight, 450);letter-spacing:var(--wcss-heading-xs-letter-spacing, 0);line-height:var(--wcss-heading-xs-line-height, 1.3)}.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-size:var(--wcss-heading-2xs-font-size, clamp(1.125rem, 1.5vw, 1.125rem));font-weight:var(--wcss-heading-2xs-weight, 450);letter-spacing:var(--wcss-heading-2xs-letter-spacing, 0);line-height:var(--wcss-heading-2xs-line-height, 1.3)}.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-size:var(--wcss-accent-2xl-font-size, clamp(2rem, 3.1666666667vw, 2.375rem));font-weight:var(--wcss-accent-2xl-weight, 450);letter-spacing:var(--wcss-accent-2xl-letter-spacing, .05em);line-height:var(--wcss-accent-2xl-line-height, 1)}.accent-2xl,.accent-xl{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-size:var(--wcss-accent-xl-font-size, clamp(1.625rem, 2.3333333333vw, 2rem));font-weight:var(--wcss-accent-xl-weight, 450);letter-spacing:var(--wcss-accent-xl-letter-spacing, .05em);line-height:var(--wcss-accent-xl-line-height, 1.3)}.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-size:var(--wcss-accent-lg-font-size, clamp(1.5rem, 2.1666666667vw, 1.75rem));font-weight:var(--wcss-accent-lg-weight, 450);letter-spacing:var(--wcss-accent-lg-letter-spacing, .05em);line-height:var(--wcss-accent-lg-line-height, 1.3)}.accent-lg,.accent-md{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-size:var(--wcss-accent-md-font-size, clamp(1.375rem, 1.8333333333vw, 1.5rem));font-weight:var(--wcss-accent-md-weight, 500);letter-spacing:var(--wcss-accent-md-letter-spacing, .05em);line-height:var(--wcss-accent-md-line-height, 1.3)}.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-size:var(--wcss-accent-sm-font-size, clamp(1.125rem, 1.5vw, 1.25rem));font-weight:var(--wcss-accent-sm-weight, 500);letter-spacing:var(--wcss-accent-sm-letter-spacing, .05em);line-height:var(--wcss-accent-sm-line-height, 1.3)}.accent-sm,.accent-xs{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-size:var(--wcss-accent-xs-font-size, clamp(1rem, 1.3333333333vw, 1rem));font-weight:var(--wcss-accent-xs-weight, 500);letter-spacing:var(--wcss-accent-xs-letter-spacing, .1em);line-height:var(--wcss-accent-xs-line-height, 1.3)}.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-size:var(--wcss-accent-2xs-font-size, clamp(.875rem, 1.1666666667vw, .875rem));font-weight:var(--wcss-accent-2xs-weight, 450);letter-spacing:var(--wcss-accent-2xs-letter-spacing, .1em);line-height:var(--wcss-accent-2xs-line-height, 1.3);text-transform:uppercase}:focus:not(:focus-visible){outline:3px solid transparent}:host,:host>span{position:relative}:host{width:2rem;height:2rem;display:inline-block;font-size:0}:host>span{position:absolute;display:inline-block;float:none;top:0;left:0;width:2rem;height:2rem;border-radius:100%;border-style:solid;border-width:0;box-sizing:border-box}:host([xs]),:host([xs])>span{width:1.2rem;height:1.2rem}:host([sm]),:host([sm])>span{width:3rem;height:3rem}:host([md]),:host([md])>span{width:5rem;height:5rem}:host([lg]),:host([lg])>span{width:8rem;height:8rem}:host{--margin: .375rem;--margin-xs: .2rem;--margin-sm: .5rem;--margin-md: .75rem;--margin-lg: 1rem}:host([pulse]),:host([pulse])>span{position:relative}:host([pulse]){width:calc(3rem + var(--margin) * 6);height:calc(1rem + var(--margin) * 2)}:host([pulse])>span{width:1rem;height:1rem;margin:var(--margin);animation:pulse 1.5s ease infinite}:host([pulse][xs]){width:calc(1.95rem + var(--margin-xs) * 6);height:calc(.65rem + var(--margin-xs) * 2)}:host([pulse][xs])>span{margin:var(--margin-xs);width:.65rem;height:.65rem}:host([pulse][sm]){width:calc(6rem + var(--margin-sm) * 6);height:calc(2rem + var(--margin-sm) * 2)}:host([pulse][sm])>span{margin:var(--margin-sm);width:2rem;height:2rem}:host([pulse][md]){width:calc(9rem + var(--margin-md) * 6);height:calc(3rem + var(--margin-md) * 2)}:host([pulse][md])>span{margin:var(--margin-md);width:3rem;height:3rem}:host([pulse][lg]){width:calc(15rem + var(--margin-lg) * 6);height:calc(5rem + var(--margin-lg) * 2)}:host([pulse][lg])>span{margin:var(--margin-lg);width:5rem;height:5rem}:host([pulse])>span:nth-child(1){animation-delay:-.4s}:host([pulse])>span:nth-child(2){animation-delay:-.2s}:host([pulse])>span:nth-child(3){animation-delay:0ms}@keyframes pulse{0%,to{opacity:.1;transform:scale(.9)}50%{opacity:1;transform:scale(1.1)}}:host([orbit]),:host([orbit])>span{opacity:1}:host([orbit])>span{border-width:5px}:host([orbit])>span:nth-child(2){animation:orbit 2s linear infinite}:host([orbit][sm])>span{border-width:8px}:host([orbit][md])>span{border-width:13px}:host([orbit][lg])>span{border-width:21px}@keyframes orbit{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host([ringworm])>svg{animation:rotate 2s linear infinite;height:100%;width:100%;stroke:currentcolor;stroke-width:8}:host([ringworm]) .path{stroke-dashoffset:0;animation:ringworm 1.5s ease-in-out infinite;stroke-linecap:round}@keyframes rotate{to{transform:rotate(360deg)}}@keyframes ringworm{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35px}to{stroke-dasharray:89,200;stroke-dashoffset:-124px}}:host([laser]){position:static;width:100%;display:block;height:0;overflow:hidden;font-size:unset}:host([laser])>span{position:fixed;width:100%;height:.25rem;border-radius:0;z-index:100}:host([laser])>span:nth-child(1){border-color:currentcolor;opacity:.25}:host([laser])>span:nth-child(2){border-color:currentcolor;animation:laser 2s linear infinite;opacity:1;width:50%}:host([laser][sm])>span:nth-child(2){width:20%}:host([laser][md])>span:nth-child(2){width:30%}:host([laser][lg])>span:nth-child(2){width:50%;animation-duration:1.5s}:host([laser][xl])>span:nth-child(2){width:80%;animation-duration:1.5s}@keyframes laser{0%{left:-100%}to{left:110%}}:host>.no-animation{display:none}@media (prefers-reduced-motion: reduce){:host{display:flex;align-items:center;justify-content:center}:host>span{opacity:1}:host>.loader{display:none}:host>svg{display:none}:host>.no-animation{display:block}}
@@ -21584,7 +21584,7 @@ let AuroHelpText$2$1 = class AuroHelpText extends i$4 {
   }
 };
 
-var formkitVersion$1$3 = '202604242248';
+var formkitVersion$1$3 = '202605011613';
 
 let AuroElement$2$2 = class AuroElement extends i$4 {
   static get properties() {
@@ -28049,7 +28049,8 @@ let BaseInput$1 = class BaseInput extends AuroElement$1$3 {
        * The id global attribute defines an identifier (ID) which must be unique in the whole document.
        */
       id: {
-        type: String
+        type: String,
+        reflect: true,
       },
 
       /**
@@ -28586,11 +28587,10 @@ let BaseInput$1 = class BaseInput extends AuroElement$1$3 {
    */
   handleClickClear() {
     this.inputElement.value = "";
-    this.value = "";
     this.labelElement.classList.remove('inputElement-label--sticky');
+    this.validation.reset(this);
     this.notifyValueChanged();
     this.focus();
-    this.validation.validate(this);
   }
 
   /**
@@ -29329,7 +29329,7 @@ let AuroHelpText$1$3 = class AuroHelpText extends i$4 {
   }
 };
 
-var formkitVersion$7 = '202604242248';
+var formkitVersion$7 = '202605011613';
 
 // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -33997,7 +33997,7 @@ let AuroHelpText$1$2 = class AuroHelpText extends i$4 {
   }
 };
 
-var formkitVersion$1$2 = '202604242248';
+var formkitVersion$1$2 = '202605011613';
 
 // Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -38187,7 +38187,7 @@ let AuroHelpText$6 = class AuroHelpText extends i$4 {
   }
 };
 
-var formkitVersion$6 = '202604242248';
+var formkitVersion$6 = '202605011613';
 
 let AuroElement$1$2 = class AuroElement extends i$4 {
   static get properties() {
@@ -42279,7 +42279,7 @@ let AuroHelpText$5 = class AuroHelpText extends i$4 {
   }
 };
 
-var formkitVersion$5 = '202604242248';
+var formkitVersion$5 = '202605011613';
 
 // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -43006,7 +43006,8 @@ class AuroCheckbox extends i$4 {
        * The id global attribute defines an identifier (ID) which must be unique in the whole document.
        */
       id: {
-        type: String
+        type: String,
+        reflect: true
       },
 
       /**
@@ -44450,7 +44451,7 @@ let AuroHelpText$4 = class AuroHelpText extends i$4 {
   }
 };
 
-var formkitVersion$4 = '202604242248';
+var formkitVersion$4 = '202605011613';
 
 // Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -49932,7 +49933,7 @@ let AuroHelpText$2 = class AuroHelpText extends i$4 {
   }
 };
 
-var formkitVersion$2 = '202604242248';
+var formkitVersion$2 = '202605011613';
 
 let AuroElement$2$1 = class AuroElement extends i$4 {
   static get properties() {
@@ -56397,7 +56398,8 @@ class BaseInput extends AuroElement$1$1 {
        * The id global attribute defines an identifier (ID) which must be unique in the whole document.
        */
       id: {
-        type: String
+        type: String,
+        reflect: true,
       },
 
       /**
@@ -56934,11 +56936,10 @@ class BaseInput extends AuroElement$1$1 {
    */
   handleClickClear() {
     this.inputElement.value = "";
-    this.value = "";
     this.labelElement.classList.remove('inputElement-label--sticky');
+    this.validation.reset(this);
     this.notifyValueChanged();
     this.focus();
-    this.validation.validate(this);
   }
 
   /**
@@ -57677,7 +57678,7 @@ let AuroHelpText$1$1 = class AuroHelpText extends i$4 {
   }
 };
 
-var formkitVersion$1$1 = '202604242248';
+var formkitVersion$1$1 = '202605011613';
 
 // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -58742,7 +58743,7 @@ let AuroBibtemplate$1 = class AuroBibtemplate extends i$4 {
   }
 };
 
-var formkitVersion$3 = '202604242248';
+var formkitVersion$3 = '202605011613';
 
 var styleCss$1$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}`;
 
@@ -59788,6 +59789,8 @@ class AuroCombobox extends AuroElement$3 {
    * @returns {void}
    */
   showBib() {
+    // for fullscreen bib, with `noFilter` showBib() gets called again as availableOptions gets updated
+    // to prevent closing bib in that case, adding guard not to hide bib for empty input on fullscreen bib
     if (!this.input.value && !this.dropdown.isBibFullscreen) {
       this.dropdown.hide();
       return;
@@ -60869,1644 +60872,1503 @@ let AuroElement$2 = class AuroElement extends i$4 {
   }
 };
 
-/* eslint-disable */
+var styleCss$4 = 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-weight, 450);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-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-weight, 450);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-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-weight, 450);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-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-weight, 450);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-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-weight, 450);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)}.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);letter-spacing:var(--wcss-display-2xl-letter-spacing, 0);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))}.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);letter-spacing:var(--wcss-display-xl-letter-spacing, 0);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))}.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);letter-spacing:var(--wcss-display-lg-letter-spacing, 0);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))}.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);letter-spacing:var(--wcss-display-md-letter-spacing, 0);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))}.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);letter-spacing:var(--wcss-display-sm-letter-spacing, 0);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))}.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);letter-spacing:var(--wcss-display-xs-letter-spacing, 0);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))}.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);letter-spacing:var(--wcss-heading-xl-letter-spacing, 0);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))}.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);letter-spacing:var(--wcss-heading-lg-letter-spacing, 0);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))}.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);letter-spacing:var(--wcss-heading-md-letter-spacing, 0);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))}.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);letter-spacing:var(--wcss-heading-sm-letter-spacing, 0);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))}.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);letter-spacing:var(--wcss-heading-xs-letter-spacing, 0);font-weight:var(--wcss-heading-xs-weight, 450);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))}.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);letter-spacing:var(--wcss-heading-2xs-letter-spacing, 0);font-weight:var(--wcss-heading-2xs-weight, 450);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))}.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);letter-spacing:var(--wcss-accent-2xl-letter-spacing, 0.05em);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));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);letter-spacing:var(--wcss-accent-xl-letter-spacing, 0.05em);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));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);letter-spacing:var(--wcss-accent-lg-letter-spacing, 0.05em);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));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);letter-spacing:var(--wcss-accent-md-letter-spacing, 0.05em);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));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);letter-spacing:var(--wcss-accent-sm-letter-spacing, 0.05em);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));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);letter-spacing:var(--wcss-accent-xs-letter-spacing, 0.1em);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));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);letter-spacing:var(--wcss-accent-2xs-letter-spacing, 0.1em);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));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}`;
 
-class MenuService {
+var colorCss$4 = 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)}}`;
 
-  /**
-   * PROPERTIES AND GETTERS
-   */
+// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
+// See LICENSE in the project root for license information.
 
-  /**
-   * Gets the list of registered menu options.
-   * @returns {AuroMenuOption[]}
-   */
-  get menuOptions() {
-    return this._menuOptions;
-  }
+// ---------------------------------------------------------------------
 
-  /**
-   * Gets the currently highlighted option.
-   * @returns {AuroMenuOption|null}
-   */
-  get highlightedOption() {
-    return this._menuOptions[this.highlightedIndex] || null;
-  }
+/* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
 
-  /**
-   * 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];
-  }
+let AuroLibraryRuntimeUtils$4 = class AuroLibraryRuntimeUtils {
 
-  /**
-   * 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] || '';
-  }
+  /* eslint-disable jsdoc/require-param */
 
   /**
-   * Gets the string representation of the current value(s).
-   * For multi-select, this is a JSON stringified array.
-   * @returns {string|undefined}
+   * This will register a new custom element with the browser.
+   * @param {String} name - The name of the custom element.
+   * @param {Object} componentClass - The class to register as a custom element.
+   * @returns {void}
    */
-  get stringValue() {
-    const { currentValue } = this;
-
-    if (Array.isArray(currentValue)) {
-      if (currentValue.length > 0) {
-        return JSON.stringify(currentValue);
-      }
-      return undefined;
-    }
-
-    if (typeof currentValue === 'string') {
-      if (currentValue.length > 0) {
-        return currentValue;
-      }
-      return undefined;
+  registerComponent(name, componentClass) {
+    if (!customElements.get(name)) {
+      customElements.define(name, class extends componentClass {});
     }
-
-    // Future: handle other types here (e.g., number, object, etc.)
-    return undefined;
   }
 
   /**
-   * Gets the key(s) of the currently selected option(s).
-   * @returns {string|string[]|undefined}
+   * Finds and returns the closest HTML Element based on a selector.
+   * @returns {void}
    */
-  get currentKeys() {
-    const keys = (this.selectedOptions || []).map(option => option.key);
-    return this.multiSelect ? keys : keys[0];
+  closestElement(
+    selector, // selector like in .closest()
+    base = this, // extra functionality to skip a parent
+    __Closest = (el, found = el && el.closest(selector)) =>
+      !el || el === document || el === window
+        ? null // standard .closest() returns null for non-found selectors also
+        : found
+          ? found // found a selector INside this element
+          : __Closest(el.getRootNode().host) // recursion!! break out to parent DOM
+  ) {
+    return __Closest(base);
   }
+  /* eslint-enable jsdoc/require-param */
 
   /**
-   * CONSTRUCTOR
-   */
-
-  /**
-   * 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.
+   * If the element passed is registered with a different tag name than what is passed in, the tag name is added as an attribute to the element.
+   * @param {Object} elem - The element to check.
+   * @param {String} tagName - The name of the Auro component to check for or add as an attribute.
+   * @returns {void}
    */
-  constructor({ host } = {}) {
+  handleComponentTagRename(elem, tagName) {
+    const tag = tagName.toLowerCase();
+    const elemTag = elem.tagName.toLowerCase();
 
-    // Ensure a host was passed
-    if (!host) {
-      throw new Error("MenuService requires a host element.");
+    if (elemTag !== tag) {
+      elem.setAttribute(tag, true);
     }
-
-    // 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;
-
-    this._menuOptions = [];
-    this._subscribers = [];
-    this.internalUpdateInProgress = false;
-    this.selectedOptions = [];
-    this._pendingValue = null;
-    this._pendingRetryScheduled = false;
-    this._pendingRetryCount = 0;
   }
 
   /**
-   * PROPERTY SYNCING
-   */
-
-  /**
-   * 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/
+   * Validates if an element is a specific Auro component.
+   * @param {Object} elem - The element to validate.
+   * @param {String} tagName - The name of the Auro component to check against.
+   * @returns {Boolean} - Returns true if the element is the specified Auro component.
    */
-  hostUpdated() {
-
-    // Reset selection if multiSelect mode changes
-    if (this.host.multiSelect !== this.multiSelect) {
-      this.selectedOptions = [];
-    }
+  elementMatch(elem, tagName) {
+    const tag = tagName.toLowerCase();
+    const elemTag = elem.tagName.toLowerCase();
 
-    // 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
-    });
+    return elemTag === tag || elem.hasAttribute(tag);
   }
 
   /**
-   * Handles host disconnection and memory cleanup.
+   * Gets the text content of a named slot.
+   * @returns {String}
+   * @private
    */
-  hostDisconnected() {
-    this._subscribers = [];
-    this._menuOptions = [];
-    this._pendingValue = null;
-    this._pendingRetryScheduled = false;
-    this._pendingRetryCount = 0;
-  }
+  getSlotText(elem, name) {
+    const slot = elem.shadowRoot?.querySelector(`slot[name="${name}"]`);
+    const nodes = slot?.assignedNodes({ flatten: true }) || [];
+    const text = nodes.map(n => n.textContent?.trim()).join(' ').trim();
 
-  /**
-   * Sets a property value if it exists on the instance and the value has changed.
-   * @param {string} property
-   * @param {any} value
-   */
-  setProperty(property, value) {
+    return text || null;
+  }
+};
 
-    // Only update if we are tracking the property in this service
-    if (this.hasOwnProperty(property)) {
+// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
+// See LICENSE in the project root for license information.
 
-      // Check if the value has changed
-      const valueChanged = this[property] !== value;
 
-      // Update and notify if changed
-      if (valueChanged) {
-        this[property] = value;
-        this.notify({ property, value });
-      }
-    }
-  }
+let AuroDependencyVersioning$3 = class AuroDependencyVersioning {
 
   /**
-   * Sets multiple properties on the instance.
-   * @param {Object} properties - Key-value pairs of properties to set.
+   * Generates a unique string to be used for child auro element naming.
+   * @private
+   * @param {string} baseName - Defines the first part of the unique element name.
+   * @param {string} version - Version of the component that will be appended to the baseName.
+   * @returns {string} - Unique string to be used for naming.
    */
-  setProperties(properties) {
-    for (const [key, value] of Object.entries(properties)) {
-      this.setProperty(key, value);
-    }
-  }
+  generateElementName(baseName, version) {
+    let result = baseName;
 
-  /**
-   * MENU OPTION HIGHLIGHTING
-   */
+    result += '-';
+    result += version.replace(/[.]/g, '_');
 
-  /**
-   * Highlights the next active option in the menu.
-   */
-  highlightNext() {
-    this.moveHighlightedOption("next");
+    return result;
   }
 
   /**
-   * Highlights the previous active option in the menu.
+   * Generates a unique string to be used for child auro element naming.
+   * @param {string} baseName - Defines the first part of the unique element name.
+   * @param {string} version - Version of the component that will be appended to the baseName.
+   * @returns {string} - Unique string to be used for naming.
    */
-  highlightPrevious() {
-    this.moveHighlightedOption("previous");
+  generateTag(baseName, version, tagClass) {
+    const elementName = this.generateElementName(baseName, version);
+    const tag = i$3`${s$6(elementName)}`;
+
+    if (!customElements.get(elementName)) {
+      customElements.define(elementName, class extends tagClass {});
+    }
+
+    return tag;
   }
+};
 
-  /**
-   * Moves the highlighted option in the specified direction.
-   * @param {string} direction - The direction to move the highlight ("next" or "previous").
-   */
-  moveHighlightedOption(direction) {
+let p$3 = 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$3='<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>';let m$3 = 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 g$3=new Map,f$3=(t,a={})=>{const e=a.responseParser||(t=>t.text());return g$3.has(t)||g$3.set(t,fetch(t).then(e)),g$3.get(t)};var w$3=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}
+`;let z$3 = class z extends m$3{constructor(){super(),this._initializeDefaults();}_initializeDefaults(){this.onDark=false,this.appearance="default";}static get properties(){return {...m$3.properties,onDark:{type:Boolean,reflect:true},appearance:{type:String,reflect:true},svg:{attribute:false,reflect:true}}}static get styles(){return w$3}async fetchIcon(t,a){let e="";e="logos"===t?await f$3(`${this.uri}/${t}/${a}.svg`):await f$3(`${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=(new DOMParser).parseFromString(u$3,"text/html");this.svg=t.body.firstChild;}}}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 y$3=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 x$3=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)}
+`;let _$2 = class _ extends z$3{constructor(){super(),this._initializeDefaults();}_initializeDefaults(){this.variant=void 0,this.uri="https://cdn.jsdelivr.net/npm/@alaskaairux/icons@latest/dist",this.runtimeUtils=new p$3;}static get properties(){return {...z$3.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 [z$3.styles,y$3,w$3,x$3]}static register(t="auro-icon"){p$3.prototype.registerComponent(t,_);}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$7`
+      <div class="componentWrapper">
+        <div
+          class="${e$3({svgWrapper:true})}"
+          title="${o$4(this.title||void 0)}">
+          <span aria-hidden="${o$4(this.ariaHidden||true)}" part="svg">
+            ${this.customSvg?b$7`
+                <slot name="svg"></slot>
+              `:b$7`
+                ${this.svg}
+              `}
+          </span>
+        </div>
 
-    // Get the active options
-    const activeOptions = this._menuOptions.filter(option => option.isActive);
+        <div class="${e$3(t)}" part="label">
+          <slot></slot>
+        </div>
+      </div>
+    `}};
 
-    // Get the currently active option
-    const currentActiveOption = activeOptions[activeOptions.indexOf(this.highlightedOption)];
+var iconVersion$2 = '9.1.2';
 
-    // 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;
+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>"};
 
-    // Wrap around the index if needed
-    newIndex = newIndex < 0 ? activeOptions.length - 1 : newIndex >= activeOptions.length ? 0 : newIndex;
+/**
+ * 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 new active option and set it as highlighted
-    const newActiveOption = activeOptions[newIndex];
-    this.setHighlightedOption(newActiveOption);
+  if (detail !== null) {
+    eventConfig.detail = detail;
   }
 
-  /**
-   * Sets the highlighted index to the specified option.
-   * @param {AuroMenuOption} option - The option to highlight.
-   */
-  setHighlightedOption(option) {
-
-    if (!option) return;
+  element.dispatchEvent(new CustomEvent(eventName, eventConfig));
+}
 
-    // Get the index of the option to highlight
-    const index = this._menuOptions.indexOf(option);
+// Copyright (c) 2021 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
+// See LICENSE in the project root for license information.
 
-    // Update highlighted index
-    this.highlightedIndex = index;
 
-    // Notify subscribers of highlight change
-    this.notify({ type: 'highlightChange', option, index: this.highlightedIndex });
+let menuOptionIdCounter = 0;
 
-    // Dispatch the change event
-    this.dispatchChangeEvent('auroMenu-activatedOption', option);
-  }
+/**
+ * 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$2 {
 
   /**
-   * Sets the highlighted option to the option at the specified index if it exists.
-   * @param {number} index
+   * 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/>
+   *
    */
-  setHighlightedIndex(index) {
-    const option = this._menuOptions[index] || null;
-    this.setHighlightedOption(option);
+  static register(name = "auro-menuoption") {
+    AuroLibraryRuntimeUtils$4.prototype.registerComponent(name, AuroMenuOption);
   }
 
   /**
-   * Selects the currently highlighted option.
+   * 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.
    */
-  selectHighlightedOption() {
-    if (this.highlightedOption) {
-      this.toggleOption(this.highlightedOption);
-    }
+  get isActive() {
+    return !this.hasAttribute('hidden') &&
+      !this.disabled &&
+      !this.hasAttribute('static');
   }
 
-  /**
-   * SELECTION AND DESELECTION METHODS
-   */
+  constructor() {
+    super();
 
-  /**
-   * 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];
+    this.bindEvents();
 
-    // Filter out options that are inactive
-    optionsToSelect = optionsToSelect.filter(option => option.isActive);
+    /**
+     * @private
+     */
+    this.shape = undefined;
 
-    if (!optionsToSelect.length) return;
+    /**
+     * @private
+     */
+    this.size = undefined;
 
-    if (this.multiSelect) {
-      this.selectedOptions = [...(this.selectedOptions || []), ...optionsToSelect];
-    } else {
-      // In single select mode, only take the last option
-      this.selectedOptions = [optionsToSelect[optionsToSelect.length - 1]];
-    }
+    /**
+     * Generate unique names for dependency components.
+     */
+    const versioning = new AuroDependencyVersioning$3();
+    this.iconTag = versioning.generateTag('auro-formkit-menuoption-icon', iconVersion$2, _$2);
 
-    this.stageUpdate();
-  }
+    this.selected = false;
+    this.noCheckmark = false;
+    this.disabled = false;
+    this.noMatch = false;
 
-  /**
-   * 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];
+    /**
+     * @private
+     */
+    this.runtimeUtils = new AuroLibraryRuntimeUtils$4();
 
-    if (!optionsToDeselect.length) return;
+    // Initialize context-related properties
+    this.menuService = null;
+    this.unsubscribe = null;
 
-    // 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.handleMenuChange = this.handleMenuChange.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;
-    }
+  static get properties() {
+    return {
+      ...super.properties,
 
-    const optionsSet = new Set(optionsToDeselect);
-    this.selectedOptions = (this.selectedOptions || [])
-      .filter(opt => !optionsSet.has(opt));
+      /**
+       * When true, disables the menu option.
+       */
+      disabled: {
+        type: Boolean,
+        reflect: true
+      },
 
-    this.stageUpdate();
-  }
+      /**
+       * @private
+       */
+      event: {
+        type: String,
+        reflect: true
+      },
 
-  /**
-   * Selects a single option.
-   * @param {AuroMenuOption} option
-   */
-  selectOption(option) {
-    this.selectOptions(option);
-  }
+      /**
+       * @private
+       */
+      layout: {
+        type: String
+      },
 
-  /**
-   * Deselects a single option.
-   * @param {AuroMenuOption} option
-   */
-  deselectOption(option) {
-    this.deselectOptions(option);
-  }
+      /**
+       * 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
+      },
 
-  /**
-   * Toggles the selection state of a single option.
-   * @param {AuroMenuOption} option
-   */
-  toggleOption(option) {
-    if (option.selected) {
-      this.deselectOption(option);
-    } else {
-      this.selectOption(option);
-    }
+      /**
+       * @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
+      },
+
+      /**
+       * Specifies the tab index of the menu option.
+       */
+      tabIndex: {
+        type: Number,
+        reflect: true
+      },
+
+      /**
+       * Specifies the value to be sent to a server.
+       */
+      value: {
+        type: String,
+        reflect: true
+      },
+    };
   }
 
-  /**
-   * 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() === '');
+  static get styles() {
+    return [
+      styleCss$4,
+      colorCss$4,
+      tokensCss$4
+    ];
+  }
 
-    // Early exit for invalid/empty values
-    if (isEmptyValue) {
-      this.selectedOptions.forEach(opt => opt.selected = false);
-      this.selectedOptions = [];
-      return;
-    }
+  connectedCallback() {
+    super.connectedCallback();
 
-    // 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;
-    }
+    // 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');
 
-    // Normalize values to array of strings
-    const normalizedValues = this._getNormalizedValues(value);
+    // Set up context consumption in connectedCallback
+    this._contextConsumer = new s$1(this, {
+      context: MenuContext,
+      callback: this.attachTo.bind(this),
+      subscribe: true
+    });
 
-    // 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]];
+    // 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;
     }
+  }
 
-    if (this._menuOptions.length === 0) {
-      this.queuePendingValue(value);
-      return;
-    }
+  firstUpdated() {
+    // Add the tag name as an attribute if it is different than the component name
+    this.runtimeUtils.handleComponentTagRename(this, 'auro-menuoption');
 
-    // 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;
+    // Generate unique ID if not already set (required for aria-activedescendant)
+    if (!this.id) {
+      menuOptionIdCounter += 1;
+      this.id = `menuoption-${menuOptionIdCounter}`;
+    }
 
-      trackedKeys.add(option.key);
+    this.setAttribute('role', 'option');
+    this.setAttribute('aria-selected', 'false');
 
-      // 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));
+    this.addEventListener('mouseover', () => {
+      this.dispatchEvent(new CustomEvent('auroMenuOption-mouseover', {
+        bubbles: true,
+        cancelable: false,
+        composed: true,
+        detail: this
+      }));
     });
+  }
 
-    // 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);
+  updated(changedProperties) {
+    super.updated(changedProperties);
 
-      if (hasUnresolvedKeys) {
-        this.queuePendingValue(value);
-        return;
-      }
+    // Update aria-selected attribute if selected changed
+    if (changedProperties.has('selected')) {
 
-      this.clearPendingValue();
+      // Update aria-selected attribute
+      this.setAttribute('aria-selected', this.selected.toString());
 
-      if (this.selectedOptions.length > 0) {
-        this.selectedOptions = [];
+      // Update menu service selection state if this isn't an internal update
+      if (this.internalUpdateInProgress !== true) {
+        this.menuService[this.selected ? 'selectOption' : 'deselectOption'](this);
       }
+    }
 
-      // 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
-        });
+    if (changedProperties.has('disabled')) {
+      if (this.disabled) {
+        this.setAttribute('aria-disabled', 'true');
+      } else {
+        this.removeAttribute('aria-disabled');
       }
-
-      return;
     }
 
-    this.clearPendingValue();
+    if (changedProperties.has('active')) {
+      this.updateActiveClasses();
+    }
 
-    if (this.optionsArraysMatch(optionsToSelect, this.selectedOptions)) {
-      return;
+    // Update text highlight if matchWord changed
+    if (changedProperties.has('matchWord')) {
+      this.updateTextHighlight();
     }
 
-    // Apply programmatic selection as a single transaction and emit one final state.
-    this.selectedOptions = optionsToSelect;
-    this.stageUpdate();
+    // 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;
+    }
   }
 
-  /**
-   * 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;
-
-    if (this._pendingRetryScheduled || this._pendingRetryCount >= 5) {
-      return;
+  disconnectedCallback() {
+    if (this.menuService) {
+      this.menuService.unsubscribe(this.handleMenuChange);
+      this.menuService.removeMenuOption(this);
     }
-
-    this._pendingRetryScheduled = true;
-    this._pendingRetryCount += 1;
-
-    setTimeout(() => {
-      this._pendingRetryScheduled = false;
-
-      if (this._pendingValue == null) {
-        return;
-      }
-
-      const pendingValue = this._pendingValue;
-      this.selectByValue(pendingValue);
-    }, 0);
   }
 
   /**
-   * Clears pending retry state.
+   * 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.
    */
-  clearPendingValue() {
-    this._pendingValue = null;
-    this._pendingRetryScheduled = false;
-    this._pendingRetryCount = 0;
+  bindEvents() {
+    this.addEventListener('click', this.handleClick.bind(this));
+    this.addEventListener('mouseenter', this.handleMouseEnter.bind(this));
   }
 
   /**
-   * Resets the selected options to an empty array.
+   * 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.
    */
-  reset() {
-    const previousOptions = [...this.selectedOptions];
-    previousOptions.forEach(opt => opt.selected = false);
-    this.selectedOptions = [];
-
-    // Single update after clearing all
-    if (previousOptions.length) {
-      this.stageUpdate();
+  attachTo(service) {
+    if (!service) {
+      return;
     }
+    this.menuService = service;
+    this.menuService.addMenuOption(this);
+    this.menuService.subscribe(this.handleMenuChange);
   }
 
   /**
-   * SUBSCRIPTION, NOTIFICATION AND EVENT DISPATCH 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) {
 
-  /**
-   * Subscribes a callback to menu service events.
-   * @param {Function} callback - The callback to invoke on events.
-   */
-  subscribe(callback) {
-    this._subscribers.push(callback);
+    // 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);
+    }
   }
 
   /**
-   * Remove a previously subscribed callback from menu service events.
-   * @param {Function} callback
+   * 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.
    */
-  unsubscribe(callback) {
-    this._subscribers = this._subscribers.filter(cb => cb !== callback);
+  setInternalSelected(isSelected) {
+    this.internalUpdateInProgress = true;
+    this.selected = isSelected;
+
+    // Fire custom event if selected
+    if (isSelected) {
+      this.handleCustomEvent();
+    }
+
+    setTimeout(() => {
+      this.internalUpdateInProgress = false;
+    }, 0);
   }
 
   /**
-   * Stages an update to notify subscribers of state and value changes.
+   * 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.
    */
-  stageUpdate(meta = {}) {
-    this.notifyStateChange(meta);
-    this.notifyValueChange(meta);
+  setSelected(isSelected) {
+    this.selected = isSelected;
   }
 
   /**
-   * Notifies subscribers of a menu service event.
-   * All notifications are sent to all subscribers.
-   * @param {string} event - The event to send to subscribers.
+   * 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.
    */
-  notify(event) {
-    this._subscribers.forEach(callback => callback(event));
+  updateActive(isActive) {
+
+    // Set active state
+    this.active = isActive;
+    this.updateActiveClasses();
   }
 
   /**
-   * Notifies subscribers of a state change (selected options has changed).
+   * 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
    */
-  notifyStateChange(meta = {}) {
-    this.notify({
-      type: 'stateChange',
-      selectedOptions: this.selectedOptions,
-      ...meta
-    });
+  updateActiveClasses() {
+    // Update class based on active state
+    if (this.active) this.classList.add('active');
+    else this.classList.remove('active');
   }
 
+
   /**
-   * Notifies subscribers of a value change (current value has changed).
+   * 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
    */
-  notifyValueChange(meta = {}) {
+  updateTextHighlight() {
 
-    // Prepare details for the event
-    const details = {
-      value: this.currentValue,
-      stringValue: this.stringValue,
-      keys: this.currentKeys,
-      options: this.selectedOptions,
-      label: this.currentLabel
-    };
+    // Regex for matchWord if needed
+    let regexWord = null;
 
-    // If only one option is selected, include its index
-    if (this.selectedOptions.length === 1) details.index = this._menuOptions.indexOf(this.selectedOptions[0]);
+    if (this.matchWord && this.matchWord.length) {
+      const escapedWord = this.matchWord.replace(/[.*+?^${}()|[\]\\]/gu, '\\$&');
+      regexWord = new RegExp(escapedWord, 'giu');
+    }
 
-    this.notify({
-      type: 'valueChange',
-      ...meta,
-      ...details
-    });
-  }
+    // Update text highlighting if matchWord changed
+    if (regexWord &&
+      this.isActive && !this.hasAttribute('persistent')) {
+      const nested = this.querySelectorAll('.nestingSpacer');
 
-  /**
-   * 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
-    }));
+      const displayValueEl = this.querySelector('[slot="displayValue"]');
+      if (displayValueEl) {
+        this.removeChild(displayValueEl);
+      }
+
+      // 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);
+      }
+    }
   }
 
   /**
-   * MENU OPTION MANAGEMENT METHODS
+   * 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;
+    }
+  }
 
   /**
-   * Adds a menu option to the service's list.
-   * @param {AuroMenuOption} option - the option to track
+   * 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
    */
-  addMenuOption(option) {
-    this._menuOptions.push(option);
-    this.notify({ type: 'optionsChange', options: this._menuOptions });
-
-    if (this._pendingValue != null) {
-      this.queuePendingValue(this._pendingValue);
+  handleMouseEnter() {
+    if (!this.disabled) {
+      this.menuService.setHighlightedOption(this);
     }
   }
 
   /**
-   * Removes a menu option from the service's list.
-   * @param {AuroMenuOption} option - the option to remove
+   * Dispatches custom events defined for this menu option.
+   * This function notifies listeners when a custom event is triggered by the option.
+   * @private
    */
-  removeMenuOption(option) {
-    this._menuOptions = this._menuOptions.filter(opt => opt !== option);
-    this.notify({ type: 'optionsChange', options: this._menuOptions });
-
-    if (this._menuOptions.length === 0) {
-      this.clearPendingValue();
+  handleCustomEvent() {
+    if (this.event) {
+      dispatchMenuEvent(this, this.event, { option: this });
+      dispatchMenuEvent(this, 'auroMenu-customEventFired', { option: this });
     }
   }
 
   /**
-   * UTILITIES
+   * 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
+    }));
+  }
 
   /**
-   * 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.
+   * Generates an HTML element containing an SVG icon based on the provided `svgContent`.
    *
-   * @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.
+   * @private
+   * @param {string} svgContent - The SVG content to be embedded.
+   * @returns {Element} The HTML element containing the SVG icon.
    */
-  _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"');
-
-        // Attempt parse
-        const parsed = JSON.parse(parseValue);
-
-        // Ensure parsed value is an array
-        if (!Array.isArray(parsed)) throw new Error('Not an array');
-
-        // Set values to parsed array
-        values = parsed;
-      } catch (err) {
-
-        // If parsing fails, treat as single value
-        values = [value];
-      }
-    }
-
-    // Handle a single number being passed
-    if (typeof values === 'number') {
-      values = [String(values)];
-    }
-
-    // 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.');
-      }
+  generateIconHtml(svgContent) {
+    const dom = new DOMParser().parseFromString(svgContent, 'text/html');
+    const svg = dom.body.firstChild;
 
-      // Convert numbers to strings for consistency
-      if (typeof val === 'number') {
-        values[index] = String(val);
-      }
-    });
+    svg.setAttribute('slot', 'svg');
 
-    // Return the resulting array of string values
-    return values;
+    return u$c`<${this.iconTag} customColor customSvg>${svg}</${this.iconTag}>`;
   }
 
   /**
-   * 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.
+   * Logic to determine the layout of the component.
+   * @protected
+   * @returns {void}
    */
-  optionsArraysMatch(arr1, arr2) {
-    if (arr1.length !== arr2.length) return false;
+  renderLayout() {
 
-    const set1 = new Set(arr1);
-    const set2 = new Set(arr2);
+    const fontClassMap = {
+      xs: 'body-sm',
+      sm: 'body-default',
+      md: 'body-default',
+      lg: 'body-lg',
+      xl: 'body-lg'
+    };
 
-    for (let item of set1) {
-      if (!set2.has(item)) {
-        return false;
-      }
-    }
+    const classes = e$3({
+      'wrapper': true,
+      [this.size ? fontClassMap[this.size] : 'body-sm']: true,
+    });
 
-    return true;
+    return u$c`
+      <div class="${classes}">
+        ${this.selected && !this.noCheckmark
+        ? this.generateIconHtml(checkmarkIcon.svg)
+        : undefined}
+        <slot></slot>
+      </div>
+    `;
   }
 }
 
-const MenuContext = n$1('menu-context');
-
-// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
-// See LICENSE in the project root for license information.
-
-// ---------------------------------------------------------------------
-
-/* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
+/* eslint-disable */
 
-let AuroLibraryRuntimeUtils$4 = class AuroLibraryRuntimeUtils {
+class MenuService {
 
-  /* eslint-disable jsdoc/require-param */
+  /**
+   * PROPERTIES AND GETTERS
+   */
 
   /**
-   * This will register a new custom element with the browser.
-   * @param {String} name - The name of the custom element.
-   * @param {Object} componentClass - The class to register as a custom element.
-   * @returns {void}
+   * Gets the list of registered menu options.
+   * @returns {AuroMenuOption[]}
    */
-  registerComponent(name, componentClass) {
-    if (!customElements.get(name)) {
-      customElements.define(name, class extends componentClass {});
-    }
+  get menuOptions() {
+    return this._menuOptions;
   }
 
   /**
-   * Finds and returns the closest HTML Element based on a selector.
-   * @returns {void}
+   * Gets the currently highlighted option.
+   * @returns {AuroMenuOption|null}
    */
-  closestElement(
-    selector, // selector like in .closest()
-    base = this, // extra functionality to skip a parent
-    __Closest = (el, found = el && el.closest(selector)) =>
-      !el || el === document || el === window
-        ? null // standard .closest() returns null for non-found selectors also
-        : found
-          ? found // found a selector INside this element
-          : __Closest(el.getRootNode().host) // recursion!! break out to parent DOM
-  ) {
-    return __Closest(base);
+  get highlightedOption() {
+    return this._menuOptions[this.highlightedIndex] || null;
   }
-  /* eslint-enable jsdoc/require-param */
 
   /**
-   * If the element passed is registered with a different tag name than what is passed in, the tag name is added as an attribute to the element.
-   * @param {Object} elem - The element to check.
-   * @param {String} tagName - The name of the Auro component to check for or add as an attribute.
-   * @returns {void}
+   * Gets the current value(s) of the selected option(s).
+   * @returns {string|string[]|undefined}
    */
-  handleComponentTagRename(elem, tagName) {
-    const tag = tagName.toLowerCase();
-    const elemTag = elem.tagName.toLowerCase();
-
-    if (elemTag !== tag) {
-      elem.setAttribute(tag, true);
-    }
+  get currentValue() {
+    const values = (this.selectedOptions || []).map(option => option.value);
+    return this.multiSelect ? values : values[0];
   }
 
   /**
-   * Validates if an element is a specific Auro component.
-   * @param {Object} elem - The element to validate.
-   * @param {String} tagName - The name of the Auro component to check against.
-   * @returns {Boolean} - Returns true if the element is the specified Auro component.
+   * Gets the label(s) of the currently selected option(s).
+   * @returns {string}
    */
-  elementMatch(elem, tagName) {
-    const tag = tagName.toLowerCase();
-    const elemTag = elem.tagName.toLowerCase();
-
-    return elemTag === tag || elem.hasAttribute(tag);
+  get currentLabel() {
+    const labels = (this.selectedOptions || []).map(option => option.textContent);
+    return this.multiSelect ? labels.join(", ") : labels[0] || '';
   }
 
   /**
-   * Gets the text content of a named slot.
-   * @returns {String}
-   * @private
+   * Gets the string representation of the current value(s).
+   * For multi-select, this is a JSON stringified array.
+   * @returns {string|undefined}
    */
-  getSlotText(elem, name) {
-    const slot = elem.shadowRoot?.querySelector(`slot[name="${name}"]`);
-    const nodes = slot?.assignedNodes({ flatten: true }) || [];
-    const text = nodes.map(n => n.textContent?.trim()).join(' ').trim();
+  get stringValue() {
+    const { currentValue } = this;
 
-    return text || null;
-  }
-};
+    if (Array.isArray(currentValue)) {
+      if (currentValue.length > 0) {
+        return JSON.stringify(currentValue);
+      }
+      return undefined;
+    }
 
-/**
- * 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
-  };
+    if (typeof currentValue === 'string') {
+      if (currentValue.length > 0) {
+        return currentValue;
+      }
+      return undefined;
+    }
 
-  if (detail !== null) {
-    eventConfig.detail = detail;
+    // Future: handle other types here (e.g., number, object, etc.)
+    return undefined;
   }
 
-  element.dispatchEvent(new CustomEvent(eventName, eventConfig));
-}
-
-/* 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.
-
-
-
-/**
- * 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.
- */
-
-/* eslint-disable max-lines */
-
-class AuroMenu extends AuroElement$2 {
+  /**
+   * Gets the key(s) of the currently selected option(s).
+   * @returns {string|string[]|undefined}
+   */
+  get currentKeys() {
+    const keys = (this.selectedOptions || []).map(option => option.key);
+    return this.multiSelect ? keys : keys[0];
+  }
 
-  constructor() {
-    super();
+  /**
+   * CONSTRUCTOR
+   */
 
-    // State properties (reactive)
+  /**
+   * 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 } = {}) {
 
-    /**
-     * @private
-     */
-    this.shape = "box";
+    // Ensure a host was passed
+    if (!host) {
+      throw new Error("MenuService requires a host element.");
+    }
 
-    /**
-     * @private
-     */
-    this.size = "sm";
+    // Attach the service to the host
+    this.host = host;
+    this.host.addController(this);
 
-    // Value of the selected options
-    this.value = undefined;
-    // Currently selected option
-    this.optionSelected = undefined;
-    // String used for highlighting/filtering
+    // Set default properties
+    this.size = undefined;
+    this.shape = undefined;
+    this.noCheckmark = undefined;
+    this.disabled = undefined;
     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;
-
-    // Event Bindings
-
-    /**
-     * @private
-     */
-    this.handleSlotChange = this.handleSlotChange.bind(this);
+    this.multiSelect = undefined;
+    this.allowDeselect = undefined;
+    this.selectAllMatchingOptions = undefined;
 
-    // Instance properties (non-reactive)
+    this.highlightedIndex = -1;
 
-    /**
-     * @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,
-    });
+    this._menuOptions = [];
+    this._subscribers = [];
+    this.internalUpdateInProgress = false;
+    this.selectedOptions = [];
+    this._pendingValue = null;
+    this._pendingRetryScheduled = false;
+    this._pendingRetryCount = 0;
   }
 
-  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
-      },
-
-      /**
-       * @private
-       */
-      layout: {
-        type: String
-      },
-
-      /**
-       * Indent level for submenus.
-       * @private
-       */
-      level: {
-        type: Number,
-        reflect: false,
-        attribute: false
-      },
-
-      /**
-       * When true, displays a loading state using the loadingIcon and loadingText slots if provided.
-       */
-      loading: {
-        type: Boolean,
-        reflect: true
-      },
-
-      /**
-       * Specifies a string used to highlight matched string parts in options.
-       */
-      matchWord: {
-        type: String,
-        attribute: 'matchword'
-      },
-
-      /**
-       * When true, the selected option can be multiple options.
-       */
-      multiSelect: {
-        type: Boolean,
-        reflect: true,
-        attribute: 'multiselect'
-      },
+  /**
+   * PROPERTY SYNCING
+   */
 
-      /**
-       * When true, selected option will not show the checkmark.
-       */
-      noCheckmark: {
-        type: Boolean,
-        reflect: true,
-        attribute: 'nocheckmark'
-      },
+  /**
+   * 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() {
 
-      /**
-       * Specifies the current active menuOption.
-       */
-      optionActive: {
-        type: Object,
-        attribute: 'optionactive'
-      },
+    // Reset selection if multiSelect mode changes
+    if (this.host.multiSelect !== this.multiSelect) {
+      this.selectedOptions = [];
+    }
 
-      /**
-       * 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
-      },
+    // 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
+    });
+  }
 
-      /**
-       * Available menu options.
-       * @readonly
-       */
-      options: {
-        type: Array,
-        reflect: false,
-        attribute: false
-      },
+  /**
+   * Handles host disconnection and memory cleanup.
+   */
+  hostDisconnected() {
+    this._subscribers = [];
+    this._menuOptions = [];
+    this._pendingValue = null;
+    this._pendingRetryScheduled = false;
+    this._pendingRetryCount = 0;
+  }
 
-      /**
-       * Sets the size of the menu.
-       * @type {'sm' | 'md'}
-       * @default 'sm'
-       */
-      size: {
-        type: String,
-        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) {
 
-      /**
-       * When true, selects all options that match the provided value/key when setting value and multiselect is enabled.
-       */
-      selectAllMatchingOptions: {
-        type: Boolean,
-        reflect: true,
-      },
+    // Only update if we are tracking the property in this service
+    if (this.hasOwnProperty(property)) {
 
-      /**
-       * Sets the shape of the menu.
-       * @type {'box' | 'round'}
-       * @default 'box'
-       */
-      shape: {
-        type: String,
-        reflect: true
-      },
+      // Check if the value has changed
+      const valueChanged = this[property] !== value;
 
-      /**
-       * 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'
+      // Update and notify if changed
+      if (valueChanged) {
+        this[property] = value;
+        this.notify({ property, value });
       }
-    };
-  }
-
-  static get styles() {
-    return [
-      styleCss$1$2,
-      colorCss$1$2,
-      tokensCss$4
-    ];
+    }
   }
 
   /**
-   * @readonly
-   * @returns {string} - Returns the label of the currently selected option(s).
+   * Sets multiple properties on the instance.
+   * @param {Object} properties - Key-value pairs of properties to set.
    */
-  get currentLabel() {
-    return this.menuService.currentLabel;
-  };
+  setProperties(properties) {
+    for (const [key, value] of Object.entries(properties)) {
+      this.setProperty(key, value);
+    }
+  }
 
   /**
-   * @readonly
-   * @returns {Array<HTMLElement>} - Returns the array of available menu options.
-   * @deprecated Use `options` property instead.
+   * MENU OPTION HIGHLIGHTING
    */
-  get items() {
-    return this.options;
-  }
 
   /**
-   * @returns {number} - Returns the index of the currently active option.
+   * Highlights the next active option in the menu.
    */
-  get index() {
-    return this._index;
+  highlightNext() {
+    this.moveHighlightedOption("next");
   }
 
   /**
-   * @param {number} value - Sets the index of the currently active option.
+   * Highlights the previous active option in the menu.
    */
-  set index(value) {
-    this.menuService.setHighlightedIndex(value);
+  highlightPrevious() {
+    this.moveHighlightedOption("previous");
   }
 
   /**
-   * 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/>
-   *
+   * Moves the highlighted option in the specified direction.
+   * @param {string} direction - The direction to move the highlight ("next" or "previous").
    */
-  static register(name = "auro-menu") {
-    AuroLibraryRuntimeUtils$4.prototype.registerComponent(name, AuroMenu);
+  moveHighlightedOption(direction) {
+
+    // Get the active options
+    const activeOptions = this._menuOptions.filter(option => option.isActive);
+
+    // Get the currently active option
+    const currentActiveOption = activeOptions[activeOptions.indexOf(this.highlightedOption)];
+
+    // 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;
+
+    // Wrap around the index if needed
+    newIndex = newIndex < 0 ? activeOptions.length - 1 : newIndex >= activeOptions.length ? 0 : newIndex;
+
+    // Get the new active option and set it as highlighted
+    const newActiveOption = activeOptions[newIndex];
+    this.setHighlightedOption(newActiveOption);
   }
 
   /**
-   * Formatted value based on `multiSelect` state.
-   * Default type is `String`, changing to `Array<String>` when `multiSelect` is true.
-   * @private
-   * @returns {String|Array<String>}
+   * Sets the highlighted index to the specified option.
+   * @param {AuroMenuOption} option - The option to highlight.
    */
-  get formattedValue() {
-    return this.menuService.currentValue;
+  setHighlightedOption(option) {
+
+    if (!option) return;
+
+    // Get the index of the option to highlight
+    const index = this._menuOptions.indexOf(option);
+
+    // Update highlighted index
+    this.highlightedIndex = index;
+
+    // Notify subscribers of highlight change
+    this.notify({ type: 'highlightChange', option, index: this.highlightedIndex });
+
+    // Dispatch the change event
+    this.dispatchChangeEvent('auroMenu-activatedOption', option);
   }
 
   /**
-   * Gets the current property values for the menu service.
-   * @private
-   * @returns {Object}
+   * Sets the highlighted option to the option at the specified index if it exists.
+   * @param {number} index
    */
-  get propertyValues() {
-    return {
-      size: this.size,
-      shape: this.shape,
-      noCheckmark: this.nocheckmark,
-      disabled: this.disabled
-    };
+  setHighlightedIndex(index) {
+    const option = this._menuOptions[index] || null;
+    this.setHighlightedOption(option);
   }
 
   /**
-   * Provides the menu context to child components.
-   * Initializes the MenuService and subscribes to menu changes.
-   * @protected
+   * Selects the currently highlighted option.
    */
-  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;
+  selectHighlightedOption() {
+    if (this.highlightedOption) {
+      this.toggleOption(this.highlightedOption);
     }
-
-    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
-    });
   }
 
   /**
-   * Updates the currently active option in the menu.
-   * @param {HTMLElement} option - The option to set as active.
+   * SELECTION AND DESELECTION METHODS
    */
-  updateActiveOption(option) {
-    this.menuService.setHighlightedOption(option);
-  }
 
   /**
-   * Sets the internal value and manages update state.
-   * @param {String|Array<String>} value - The value to set.
-   * @protected
+   * Selects one or more options in a batch operation
+   * @param {AuroMenuOption|AuroMenuOption[]} options - Single option or array of options to select
    */
-  setInternalValue(value) {
-    if (this.value !== value) {
-      this.internalUpdateInProgress = true;
-      this.value = value;
+  selectOptions(options) {
+    let optionsToSelect = Array.isArray(options) ? options : [options];
 
-      setTimeout(() => {
-        this.internalUpdateInProgress = false;
-      });
+    // Filter out options that are inactive
+    optionsToSelect = optionsToSelect.filter(option => option.isActive);
+
+    if (!optionsToSelect.length) return;
+
+    if (this.multiSelect) {
+      this.selectedOptions = [...(this.selectedOptions || []), ...optionsToSelect];
+    } else {
+      // In single select mode, only take the last option
+      this.selectedOptions = [optionsToSelect[optionsToSelect.length - 1]];
     }
+
+    this.stageUpdate();
   }
 
   /**
-   * Handles changes from the menu service and updates component state.
-   * @param {Object} event - The event object from the menu service.
-   * @protected
+   * Deselects one or more options in a batch operation
+   * @param {AuroMenuOption|AuroMenuOption[]} options - Single option or array of options to deselect
    */
-  handleMenuChange(event) {
-    if (event.type === 'valueChange') {
+  deselectOptions(options) {
+    const optionsToDeselect = Array.isArray(options) ? options : [options];
 
-      // 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 (!optionsToDeselect.length) return;
 
-      // Check if the option or value has actually changed
-      if (this.optionSelected !== newOption || this.stringValue !== newValue) {
-        this.optionSelected = newOption;
-        this.setInternalValue(newValue);
-      }
+    // Check if deselection should be prevented
+    const shouldPreventDeselect = !this.allowDeselect && !this.multiSelect;
+    const isOnlySelectedOption = this.selectedOptions.length === 1 && optionsToDeselect.includes(this.selectedOptions[0]);
 
-      // Notify components of selection change
-      this.notifySelectionChange(event);
+    // 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;
     }
 
-    if (event.type === 'highlightChange') {
-      this.optionActive = event.option;
-      this._index = event.index;
-    }
+    const optionsSet = new Set(optionsToDeselect);
+    this.selectedOptions = (this.selectedOptions || [])
+      .filter(opt => !optionsSet.has(opt));
 
-    if (event.type === 'optionsChange') {
-      this.options = event.options;
-      this.dispatchEvent(new CustomEvent('auroMenu-optionsChange', {
-        detail: {
-          options: event.options
-        }
-      }));
-    }
+    this.stageUpdate();
   }
 
   /**
-   * Gets the currently selected options.
-   * @returns {Array<HTMLElement>}
+   * Selects a single option.
+   * @param {AuroMenuOption} option
    */
-  get selectedOptions() {
-    return this.menuService ? this.menuService.selectedOptions : [];
+  selectOption(option) {
+    this.selectOptions(option);
   }
 
   /**
-   * Gets the first selected option, or null if none.
-   * @returns {HTMLElement|null}
+   * Deselects a single option.
+   * @param {AuroMenuOption} option
    */
-  get selectedOption() {
-    return this.menuService ? this.menuService.selectedOptions[0] : null;
+  deselectOption(option) {
+    this.deselectOptions(option);
   }
 
-  // Lifecycle Methods
+  /**
+   * Toggles the selection state of a single option.
+   * @param {AuroMenuOption} option
+   */
+  toggleOption(option) {
+    if (option.selected) {
+      this.deselectOption(option);
+    } else {
+      this.selectOption(option);
+    }
+  }
 
-  connectedCallback() {
-    super.connectedCallback();
+  /**
+   * 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() === '');
 
-    this.provideContext();
+    // Early exit for invalid/empty values
+    if (isEmptyValue) {
+      this.selectedOptions.forEach(opt => opt.selected = false);
+      this.selectedOptions = [];
+      return;
+    }
 
-    // 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");
-  }
+    // 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;
+    }
 
-  disconnectedCallback() {
-    // this.removeEventListener('keydown', this.handleKeyDown);
-    this.removeEventListener('auroMenuOption-click', this.handleMouseSelect);
-    this.removeEventListener('auroMenuOption-mouseover', this.handleOptionHover);
-    this.removeEventListener('slotchange', this.handleSlotChange);
+    // Normalize values to array of strings
+    const normalizedValues = this._getNormalizedValues(value);
 
-    super.disconnectedCallback();
-  }
+    // 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]];
+    }
 
-  firstUpdated() {
-    AuroLibraryRuntimeUtils$4.prototype.handleComponentTagRename(this, 'auro-menu');
+    if (this._menuOptions.length === 0) {
+      this.queuePendingValue(value);
+      return;
+    }
 
-    this.loadingSlots = this.querySelectorAll("[slot='loadingText'], [slot='loadingIcon']");
-    this.initializeMenu();
-  }
+    // 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);
 
-  updated(changedProperties) {
-    super.updated(changedProperties);
+      // 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));
+    });
 
-    // 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);
-    }
+    // 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);
 
-    // Handle loading state changes
-    if (changedProperties.has('loading')) {
-      this.setLoadingState(this.loading);
-    }
+      if (hasUnresolvedKeys) {
+        this.queuePendingValue(value);
+        return;
+      }
 
-    if (changedProperties.has('multiSelect') && this.rootMenu) {
-      if (this.multiSelect) {
-        this.setAttribute('aria-multiselectable', 'true');
-      } else {
-        this.removeAttribute('aria-multiselectable');
+      this.clearPendingValue();
+
+      if (this.selectedOptions.length > 0) {
+        this.selectedOptions = [];
       }
+
+      // 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;
+    }
+
+    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();
   }
 
   /**
-   * 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
+   * Queues a pending value and schedules a bounded retry.
+   * @param {string|number|Array<string|number>} value - The value to retry.
    */
-  setTagAttribute(tagName) {
-    if (this.tagName.toLowerCase() !== tagName) {
-      this.setAttribute(tagName, true);
+  queuePendingValue(value) {
+    this._pendingValue = value;
+
+    if (this._pendingRetryScheduled || this._pendingRetryCount >= 5) {
+      return;
     }
+
+    this._pendingRetryScheduled = true;
+    this._pendingRetryCount += 1;
+
+    setTimeout(() => {
+      this._pendingRetryScheduled = false;
+
+      if (this._pendingValue == null) {
+        return;
+      }
+
+      const pendingValue = this._pendingValue;
+      this.selectByValue(pendingValue);
+    }, 0);
   }
 
   /**
-   * Sets the loading state and dispatches a loading change event.
-   * @param {boolean} isLoading - Whether the menu is loading.
-   * @protected
+   * Clears pending retry state.
    */
-  setLoadingState(isLoading) {
-    this.setAttribute("aria-busy", isLoading);
-    dispatchMenuEvent(this, "auroMenu-loadingChange", {
-      loading: isLoading,
-      hasLoadingPlaceholder: this.hasLoadingPlaceholder
-    });
+  clearPendingValue() {
+    this._pendingValue = null;
+    this._pendingRetryScheduled = false;
+    this._pendingRetryCount = 0;
   }
 
-  // Init Methods
-
   /**
-   * Initializes the menu's state and structure.
-   * @private
+   * Resets the selected options to an empty array.
    */
-  initializeMenu() {
-    if (this.rootMenu) {
-      this.setAttribute('role', 'listbox');
-      this.setAttribute('root', '');
+  reset() {
+    const previousOptions = [...this.selectedOptions];
+    previousOptions.forEach(opt => opt.selected = false);
+    this.selectedOptions = [];
 
-      if (this.multiSelect) {
-        this.setAttribute('aria-multiselectable', 'true');
-      }
+    // Single update after clearing all
+    if (previousOptions.length) {
+      this.stageUpdate();
     }
-
-    this.handleNestedMenus(this);
   }
 
   /**
-   * Selects the currently highlighted option.
-   * @protected
+   * SUBSCRIPTION, NOTIFICATION AND EVENT DISPATCH METHODS
    */
-  makeSelection() {
-    this.menuService.selectHighlightedOption();
-  }
 
   /**
-   * Resets all options to their default state.
-   * @private
+   * Subscribes a callback to menu service events.
+   * @param {Function} callback - The callback to invoke on events.
    */
-  clearSelection() {
-    this.optionSelected = undefined;
-    this.value = undefined;
-    this._index = -1;
+  subscribe(callback) {
+    this._subscribers.push(callback);
   }
 
   /**
-   * Resets the menu to its initial state.
-   * This is the only way to return value to undefined.
-   * @public
+   * Remove a previously subscribed callback from menu service events.
+   * @param {Function} callback
    */
-  reset() {
-    this.menuService.reset();
-
-    // Dispatch reset event
-    dispatchMenuEvent(this, 'auroMenu-selectValueReset');
+  unsubscribe(callback) {
+    this._subscribers = this._subscribers.filter(cb => cb !== callback);
   }
 
   /**
-   * Handles nested menu structure.
-   * @private
-   * @param {HTMLElement} menu - Root menu element.
+   * Stages an update to notify subscribers of state and value changes.
    */
-  handleNestedMenus(menu) {
-    menu.level = menu.parentElement.level >= 0 ? menu.parentElement.level + 1 : 0;
-
-    if (menu.level > 0) {
-      menu.setAttribute('role', 'group');
-      menu.removeAttribute("root");
-      if (!menu.hasAttribute('aria-label')) {
-        menu.setAttribute('aria-label', 'submenu');
-      }
-    }
+  stageUpdate(meta = {}) {
+    this.notifyStateChange(meta);
+    this.notifyValueChange(meta);
+  }
 
-    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, '');
-    });
+  /**
+   * Notifies subscribers of a menu service event.
+   * All notifications are sent to all subscribers.
+   * @param {string} event - The event to send to subscribers.
+   */
+  notify(event) {
+    this._subscribers.forEach(callback => callback(event));
   }
 
   /**
-   * Navigates the menu options in the specified direction.
-   * @param {'up'|'down'} direction - The direction to navigate.
-   * @protected
+   * Notifies subscribers of a state change (selected options has changed).
    */
-  navigateOptions(direction) {
-    if (direction === 'up') {
-      this.menuService.highlightPrevious();
-    } else if (direction === 'down') {
-      this.menuService.highlightNext();
-    }
+  notifyStateChange(meta = {}) {
+    this.notify({
+      type: 'stateChange',
+      selectedOptions: this.selectedOptions,
+      ...meta
+    });
   }
 
   /**
-   * Handles slot change events.
-   * @private
+   * Notifies subscribers of a value change (current value has changed).
    */
-  handleSlotChange() {
-    if (this.rootMenu) {
-      this.initializeMenu();
-    }
+  notifyValueChange(meta = {}) {
+
+    // Prepare details for the event
+    const details = {
+      value: this.currentValue,
+      stringValue: this.stringValue,
+      keys: this.currentKeys,
+      options: this.selectedOptions,
+      label: this.currentLabel
+    };
+
+    // 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
+    });
   }
 
   /**
-   * Handles custom events defined on options.
-   * @private
-   * @param {HTMLElement} option - Option with custom event.
+   * Dispatches a custom event from the host element.
+   * @param {string} eventName
+   * @param {any} detail
    */
-  handleCustomEvent(option) {
-    const eventName = option.getAttribute('event');
-    dispatchMenuEvent(this, eventName);
-    dispatchMenuEvent(this, 'auroMenu-customEventFired');
+  dispatchChangeEvent(eventName, detail) {
+    this.host.dispatchEvent(new CustomEvent(eventName, {
+      bubbles: true,
+      cancelable: false,
+      composed: true,
+      detail
+    }));
   }
 
   /**
-   * Notifies selection change to parent components.
-   * @param {any} source - The source that triggers this event.
-   * @private
+   * MENU OPTION MANAGEMENT METHODS
    */
-  notifySelectionChange({value, stringValue, keys, options, reason} = {}) {
-    dispatchMenuEvent(this, 'auroMenu-selectedOption', {
-      value,
-      stringValue,
-      keys,
-      options,
-      reason
-    });
-  }
 
   /**
-   * Checks if an option is currently selected.
-   * @private
-   * @param {HTMLElement} option - The option to check.
-   * @returns {boolean}
+   * Adds a menu option to the service's list.
+   * @param {AuroMenuOption} option - the option to track
    */
-  isOptionSelected(option) {
-    if (!this.optionSelected) {
-      return false;
-    }
+  addMenuOption(option) {
+    this._menuOptions.push(option);
+    this.notify({ type: 'optionsChange', options: this._menuOptions });
 
-    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);
+    if (this._pendingValue != null) {
+      this.queuePendingValue(this._pendingValue);
     }
-
-    return this.optionSelected === option;
   }
 
   /**
-   * Getter for loading placeholder state.
-   * @returns {boolean} - True if loading slots are present and non-empty.
+   * Removes a menu option from the service's list.
+   * @param {AuroMenuOption} option - the option to remove
    */
-  get hasLoadingPlaceholder() {
-    return this.loadingSlots && this.loadingSlots.length > 0;
+  removeMenuOption(option) {
+    this._menuOptions = this._menuOptions.filter(opt => opt !== option);
+    this.notify({ type: 'optionsChange', options: this._menuOptions });
+
+    if (this._menuOptions.length === 0) {
+      this.clearPendingValue();
+    }
   }
 
   /**
-   * Getter for wrapper classes based on size.
-   * @returns {Object} - Class map for the wrapper element.
-   * @private
+   * UTILITIES
    */
-  get wrapperClasses() {
-    return e$3({
-      'menuWrapper': true,
-      [this.size]: true,
-    });
-  }
 
   /**
-   * Logic to determine the layout of the component.
-   * @protected
-   * @returns {void}
+   * 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.
    */
-  renderLayout() {
-    if (this.loading) {
-      return b$7`
-        <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>
-      `;
-    }
+  _getNormalizedValues(value) {
+    let values = value;
 
-    return b$7`
-      <div class="${this.wrapperClasses}">
-        <slot @slotchange=${this.handleSlotChange}></slot>
-      </div>
-    `;
-  }
-}
+    // Handle JSON string and single value string input
+    if (!Array.isArray(values) && typeof values === 'string') {
 
-var styleCss$4 = 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-weight, 450);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-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-weight, 450);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-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-weight, 450);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-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-weight, 450);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-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-weight, 450);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)}.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);letter-spacing:var(--wcss-display-2xl-letter-spacing, 0);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))}.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);letter-spacing:var(--wcss-display-xl-letter-spacing, 0);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))}.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);letter-spacing:var(--wcss-display-lg-letter-spacing, 0);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))}.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);letter-spacing:var(--wcss-display-md-letter-spacing, 0);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))}.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);letter-spacing:var(--wcss-display-sm-letter-spacing, 0);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))}.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);letter-spacing:var(--wcss-display-xs-letter-spacing, 0);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))}.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);letter-spacing:var(--wcss-heading-xl-letter-spacing, 0);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))}.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);letter-spacing:var(--wcss-heading-lg-letter-spacing, 0);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))}.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);letter-spacing:var(--wcss-heading-md-letter-spacing, 0);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))}.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);letter-spacing:var(--wcss-heading-sm-letter-spacing, 0);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))}.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);letter-spacing:var(--wcss-heading-xs-letter-spacing, 0);font-weight:var(--wcss-heading-xs-weight, 450);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))}.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);letter-spacing:var(--wcss-heading-2xs-letter-spacing, 0);font-weight:var(--wcss-heading-2xs-weight, 450);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))}.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);letter-spacing:var(--wcss-accent-2xl-letter-spacing, 0.05em);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));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);letter-spacing:var(--wcss-accent-xl-letter-spacing, 0.05em);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));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);letter-spacing:var(--wcss-accent-lg-letter-spacing, 0.05em);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));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);letter-spacing:var(--wcss-accent-md-letter-spacing, 0.05em);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));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);letter-spacing:var(--wcss-accent-sm-letter-spacing, 0.05em);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));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);letter-spacing:var(--wcss-accent-xs-letter-spacing, 0.1em);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));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);letter-spacing:var(--wcss-accent-2xs-letter-spacing, 0.1em);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));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}`;
+      // Attempt to parse as JSON array
+      try {
 
-var colorCss$4 = 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)}}`;
+        // 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"');
 
-// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
-// See LICENSE in the project root for license information.
+        // Attempt parse
+        const parsed = JSON.parse(parseValue);
 
+        // Ensure parsed value is an array
+        if (!Array.isArray(parsed)) throw new Error('Not an array');
 
-let AuroDependencyVersioning$3 = class AuroDependencyVersioning {
+        // Set values to parsed array
+        values = parsed;
+      } catch (err) {
 
-  /**
-   * Generates a unique string to be used for child auro element naming.
-   * @private
-   * @param {string} baseName - Defines the first part of the unique element name.
-   * @param {string} version - Version of the component that will be appended to the baseName.
-   * @returns {string} - Unique string to be used for naming.
-   */
-  generateElementName(baseName, version) {
-    let result = baseName;
+        // If parsing fails, treat as single value
+        values = [value];
+      }
+    }
 
-    result += '-';
-    result += version.replace(/[.]/g, '_');
+    // Handle a single number being passed
+    if (typeof values === 'number') {
+      values = [String(values)];
+    }
 
-    return result;
+    // 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);
+      }
+    });
+
+    // Return the resulting array of string values
+    return values;
   }
 
   /**
-   * Generates a unique string to be used for child auro element naming.
-   * @param {string} baseName - Defines the first part of the unique element name.
-   * @param {string} version - Version of the component that will be appended to the baseName.
-   * @returns {string} - Unique string to be used for naming.
+   * 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.
    */
-  generateTag(baseName, version, tagClass) {
-    const elementName = this.generateElementName(baseName, version);
-    const tag = i$3`${s$6(elementName)}`;
+  optionsArraysMatch(arr1, arr2) {
+    if (arr1.length !== arr2.length) return false;
 
-    if (!customElements.get(elementName)) {
-      customElements.define(elementName, class extends tagClass {});
+    const set1 = new Set(arr1);
+    const set2 = new Set(arr2);
+
+    for (let item of set1) {
+      if (!set2.has(item)) {
+        return false;
+      }
     }
 
-    return tag;
+    return true;
   }
-};
-
-let p$3 = 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$3='<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>';let m$3 = 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 g$3=new Map,f$3=(t,a={})=>{const e=a.responseParser||(t=>t.text());return g$3.has(t)||g$3.set(t,fetch(t).then(e)),g$3.get(t)};var w$3=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}
-`;let z$3 = class z extends m$3{constructor(){super(),this._initializeDefaults();}_initializeDefaults(){this.onDark=false,this.appearance="default";}static get properties(){return {...m$3.properties,onDark:{type:Boolean,reflect:true},appearance:{type:String,reflect:true},svg:{attribute:false,reflect:true}}}static get styles(){return w$3}async fetchIcon(t,a){let e="";e="logos"===t?await f$3(`${this.uri}/${t}/${a}.svg`):await f$3(`${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=(new DOMParser).parseFromString(u$3,"text/html");this.svg=t.body.firstChild;}}}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 y$3=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 x$3=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)}
-`;let _$2 = class _ extends z$3{constructor(){super(),this._initializeDefaults();}_initializeDefaults(){this.variant=void 0,this.uri="https://cdn.jsdelivr.net/npm/@alaskaairux/icons@latest/dist",this.runtimeUtils=new p$3;}static get properties(){return {...z$3.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 [z$3.styles,y$3,w$3,x$3]}static register(t="auro-icon"){p$3.prototype.registerComponent(t,_);}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$7`
-      <div class="componentWrapper">
-        <div
-          class="${e$3({svgWrapper:true})}"
-          title="${o$4(this.title||void 0)}">
-          <span aria-hidden="${o$4(this.ariaHidden||true)}" part="svg">
-            ${this.customSvg?b$7`
-                <slot name="svg"></slot>
-              `:b$7`
-                ${this.svg}
-              `}
-          </span>
-        </div>
-
-        <div class="${e$3(t)}" part="label">
-          <slot></slot>
-        </div>
-      </div>
-    `}};
-
-var iconVersion$2 = '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>"};
+const MenuContext = n$1('menu-context');
 
-// Copyright (c) 2021 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
+/* 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.
 
 
-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.
+ * The `auro-menu` element provides users a way to select from a list of options.
+ * @customElement auro-menu
  *
- * @event auroMenuOption-mouseover - Notifies that this option has been hovered over.
+ * @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.
  */
-class AuroMenuOption extends AuroElement$2 {
 
-  /**
-   * 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/>
-   *
-   */
-  static register(name = "auro-menuoption") {
-    AuroLibraryRuntimeUtils$4.prototype.registerComponent(name, AuroMenuOption);
-  }
+/* eslint-disable max-lines */
 
-  /**
-   * 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 isActive() {
-    return !this.hasAttribute('hidden') &&
-      !this.disabled &&
-      !this.hasAttribute('static');
-  }
+class AuroMenu extends AuroElement$2 {
 
   constructor() {
     super();
 
-    this.bindEvents();
+    // State properties (reactive)
 
     /**
      * @private
      */
-    this.shape = undefined;
+    this.shape = "box";
 
     /**
      * @private
      */
-    this.size = undefined;
-
-    /**
-     * Generate unique names for dependency components.
-     */
-    const versioning = new AuroDependencyVersioning$3();
-    this.iconTag = versioning.generateTag('auro-formkit-menuoption-icon', iconVersion$2, _$2);
+    this.size = "sm";
 
-    this.selected = false;
+    // 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;
-    this.disabled = false;
-    this.noMatch = 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;
+
+    // Event Bindings
 
     /**
      * @private
      */
-    this.runtimeUtils = new AuroLibraryRuntimeUtils$4();
+    this.handleSlotChange = this.handleSlotChange.bind(this);
 
-    // Initialize context-related properties
-    this.menuService = null;
-    this.unsubscribe = null;
+    // Instance properties (non-reactive)
 
     /**
      * @private
      */
-    this.handleMenuChange = this.handleMenuChange.bind(this);
+    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,
+    });
   }
 
   static get properties() {
@@ -62514,7 +62376,15 @@ class AuroMenuOption extends AuroElement$2 {
       ...super.properties,
 
       /**
-       * When true, disables the menu option.
+       * 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,
@@ -62522,11 +62392,10 @@ class AuroMenuOption extends AuroElement$2 {
       },
 
       /**
-       * @private
+       * Indicates whether the menu has a loadingIcon or loadingText to render when in a loading state.
        */
-      event: {
-        type: String,
-        reflect: true
+      hasLoadingPlaceholder: {
+        type: Boolean
       },
 
       /**
@@ -62537,394 +62406,528 @@ class AuroMenuOption extends AuroElement$2 {
       },
 
       /**
-       * 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.
+       * Indent level for submenus.
+       * @private
        */
-      key: {
-        type: String,
-        reflect: true
+      level: {
+        type: Number,
+        reflect: false,
+        attribute: false
       },
 
       /**
-       * @private
+       * When true, displays a loading state using the loadingIcon and loadingText slots if provided.
        */
-      menuService: {
-        type: Object,
-        state: true
+      loading: {
+        type: Boolean,
+        reflect: true
       },
 
       /**
-       * @private
+       * Specifies a string used to highlight matched string parts in options.
        */
       matchWord: {
         type: String,
-        state: true
+        attribute: 'matchword'
       },
 
       /**
-       * @private
+       * When true, the selected option can be multiple options.
        */
-      noCheckmark: {
+      multiSelect: {
         type: Boolean,
-        reflect: true
+        reflect: true,
+        attribute: 'multiselect'
       },
 
       /**
-       * 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.
+       * When true, selected option will not show the checkmark.
        */
-      noMatch: {
+      noCheckmark: {
         type: Boolean,
         reflect: true,
-        attribute: 'nomatch'
+        attribute: 'nocheckmark'
       },
 
       /**
-       * Specifies that an option is selected.
+       * Specifies the current active menuOption.
        */
-      selected: {
-        type: Boolean,
-        reflect: true
+      optionActive: {
+        type: Object,
+        attribute: 'optionactive'
       },
 
       /**
-       * Specifies the tab index of the menu option.
+       * An array of currently selected menu options, type `HTMLElement` by default. In multi-select mode, `optionSelected` is an array of HTML elements.
        */
-      tabIndex: {
-        type: Number,
+      optionSelected: {
+        // Allow HTMLElement, HTMLElement[] arrays and undefined
+        type: Object
+      },
+
+      /**
+       * Available menu options.
+       * @readonly
+       */
+      options: {
+        type: Array,
+        reflect: false,
+        attribute: false
+      },
+
+      /**
+       * Sets the size of the menu.
+       * @type {'sm' | 'md'}
+       * @default 'sm'
+       */
+      size: {
+        type: String,
         reflect: true
       },
 
       /**
-       * Specifies the value to be sent to a server.
+       * When true, selects all options that match the provided value/key when setting value and multiselect is enabled.
        */
-      value: {
+      selectAllMatchingOptions: {
+        type: Boolean,
+        reflect: true,
+      },
+
+      /**
+       * Sets the shape of the menu.
+       * @type {'box' | 'round'}
+       * @default 'box'
+       */
+      shape: {
         type: String,
         reflect: true
       },
+
+      /**
+       * 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'
+      }
     };
   }
 
   static get styles() {
     return [
-      styleCss$4,
-      colorCss$4,
+      styleCss$1$2,
+      colorCss$1$2,
       tokensCss$4
     ];
   }
 
-  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');
+  /**
+   * @readonly
+   * @returns {string} - Returns the label of the currently selected option(s).
+   */
+  get currentLabel() {
+    return this.menuService.currentLabel;
+  };
+
+  /**
+   * @readonly
+   * @returns {Array<HTMLElement>} - Returns the array of available menu options.
+   * @deprecated Use `options` property instead.
+   */
+  get items() {
+    return this.options;
+  }
+
+  /**
+   * @returns {number} - Returns the index of the currently active option.
+   */
+  get index() {
+    return this._index;
+  }
+
+  /**
+   * @param {number} value - Sets the index of the currently active option.
+   */
+  set index(value) {
+    this.menuService.setHighlightedIndex(value);
+  }
+
+  /**
+   * 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/>
+   *
+   */
+  static register(name = "auro-menu") {
+    AuroLibraryRuntimeUtils$4.prototype.registerComponent(name, AuroMenu);
+  }
+
+  /**
+   * Formatted value based on `multiSelect` state.
+   * Default type is `String`, changing to `Array<String>` when `multiSelect` is true.
+   * @private
+   * @returns {String|Array<String>}
+   */
+  get formattedValue() {
+    return this.menuService.currentValue;
+  }
+
+  /**
+   * 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
+    };
+  }
+
+  /**
+   * 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;
+    }
 
-    // Set up context consumption in connectedCallback
-    this._contextConsumer = new s$1(this, {
+    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,
-      callback: this.attachTo.bind(this),
-      subscribe: true
+      initialValue: this.menuService
     });
+  }
 
-    // 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;
-    }
+  /**
+   * Updates the currently active option in the menu.
+   * @param {HTMLElement} option - The option to set as active.
+   */
+  updateActiveOption(option) {
+    this.menuService.setHighlightedOption(option);
   }
 
-  firstUpdated() {
-    // Add the tag name as an attribute if it is different than the component name
-    this.runtimeUtils.handleComponentTagRename(this, 'auro-menuoption');
+  /**
+   * 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 ID if not already set (required for aria-activedescendant)
-    if (!this.id) {
-      menuOptionIdCounter += 1;
-      this.id = `menuoption-${menuOptionIdCounter}`;
+      setTimeout(() => {
+        this.internalUpdateInProgress = false;
+      });
     }
-
-    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);
-
-    // Update aria-selected attribute if selected changed
-    if (changedProperties.has('selected')) {
-
-      // Update aria-selected attribute
-      this.setAttribute('aria-selected', this.selected.toString());
+  /**
+   * 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') {
 
-      // Update menu service selection state if this isn't an internal update
-      if (this.internalUpdateInProgress !== true) {
-        this.menuService[this.selected ? 'selectOption' : 'deselectOption'](this);
-      }
-    }
+      // 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 (changedProperties.has('disabled')) {
-      if (this.disabled) {
-        this.setAttribute('aria-disabled', 'true');
-      } else {
-        this.removeAttribute('aria-disabled');
+      // Check if the option or value has actually changed
+      if (this.optionSelected !== newOption || this.stringValue !== newValue) {
+        this.optionSelected = newOption;
+        this.setInternalValue(newValue);
       }
-    }
-
-    if (changedProperties.has('active')) {
-      this.updateActiveClasses();
-    }
 
-    // Update text highlight if matchWord changed
-    if (changedProperties.has('matchWord')) {
-      this.updateTextHighlight();
+      // Notify components of selection change
+      this.notifySelectionChange(event);
     }
 
-    // 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;
+    if (event.type === 'highlightChange') {
+      this.optionActive = event.option;
+      this._index = event.index;
     }
-  }
 
-  disconnectedCallback() {
-    if (this.menuService) {
-      this.menuService.unsubscribe(this.handleMenuChange);
-      this.menuService.removeMenuOption(this);
+    if (event.type === 'optionsChange') {
+      this.options = event.options;
+      this.dispatchEvent(new CustomEvent('auroMenu-optionsChange', {
+        detail: {
+          options: event.options
+        }
+      }));
     }
   }
 
   /**
-   * 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.
+   * Gets the currently selected options.
+   * @returns {Array<HTMLElement>}
    */
-  bindEvents() {
-    this.addEventListener('click', this.handleClick.bind(this));
-    this.addEventListener('mouseenter', this.handleMouseEnter.bind(this));
+  get selectedOptions() {
+    return this.menuService ? this.menuService.selectedOptions : [];
   }
 
   /**
-   * 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.
+   * Gets the first selected option, or null if none.
+   * @returns {HTMLElement|null}
    */
-  attachTo(service) {
-    if (!service) {
-      return;
-    }
-    this.menuService = service;
-    this.menuService.addMenuOption(this);
-    this.menuService.subscribe(this.handleMenuChange);
+  get selectedOption() {
+    return this.menuService ? this.menuService.selectedOptions[0] : null;
   }
 
-  /**
-   * 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) {
+  // Lifecycle Methods
 
-    // Ignore events without a type or property
-    if (!event || (!event.type && !event.property)) {
-      return;
-    }
+  connectedCallback() {
+    super.connectedCallback();
 
-    // Update reactive properties based on event type
-    if (event.property && Object.keys(AuroMenuOption.properties).includes(event.property)) {
-      this[event.property] = event.value;
+    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");
+  }
+
+  disconnectedCallback() {
+    // this.removeEventListener('keydown', this.handleKeyDown);
+    this.removeEventListener('auroMenuOption-click', this.handleMouseSelect);
+    this.removeEventListener('auroMenuOption-mouseover', this.handleOptionHover);
+    this.removeEventListener('slotchange', this.handleSlotChange);
+
+    super.disconnectedCallback();
+  }
+
+  firstUpdated() {
+    AuroLibraryRuntimeUtils$4.prototype.handleComponentTagRename(this, 'auro-menu');
+
+    this.loadingSlots = this.querySelectorAll("[slot='loadingText'], [slot='loadingIcon']");
+    this.initializeMenu();
+  }
+
+
+  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);
     }
 
-    // Handle highlight changes
-    if (event.type === 'highlightChange') {
-      const isActive = event.option === this;
-      this.active = isActive;
-      this.updateActiveClasses();
+    // Handle loading state changes
+    if (changedProperties.has('loading')) {
+      this.setLoadingState(this.loading);
     }
 
-    if (event.type === 'stateChange') {
-      const isSelected = event.selectedOptions.includes(this);
-      this.setInternalSelected(isSelected);
+    if (changedProperties.has('multiSelect') && this.rootMenu) {
+      if (this.multiSelect) {
+        this.setAttribute('aria-multiselectable', 'true');
+      } else {
+        this.removeAttribute('aria-multiselectable');
+      }
     }
   }
 
   /**
-   * 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.
+   * 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
    */
-  setInternalSelected(isSelected) {
-    this.internalUpdateInProgress = true;
-    this.selected = isSelected;
-
-    // Fire custom event if selected
-    if (isSelected) {
-      this.handleCustomEvent();
+  setTagAttribute(tagName) {
+    if (this.tagName.toLowerCase() !== tagName) {
+      this.setAttribute(tagName, true);
     }
-
-    setTimeout(() => {
-      this.internalUpdateInProgress = false;
-    }, 0);
   }
 
   /**
-   * 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.
+   * Sets the loading state and dispatches a loading change event.
+   * @param {boolean} isLoading - Whether the menu is loading.
+   * @protected
    */
-  setSelected(isSelected) {
-    this.selected = isSelected;
+  setLoadingState(isLoading) {
+    this.setAttribute("aria-busy", isLoading);
+    dispatchMenuEvent(this, "auroMenu-loadingChange", {
+      loading: isLoading,
+      hasLoadingPlaceholder: this.hasLoadingPlaceholder
+    });
   }
 
+  // Init Methods
+
   /**
-   * 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.
+   * Initializes the menu's state and structure.
+   * @private
    */
-  updateActive(isActive) {
+  initializeMenu() {
+    if (this.rootMenu) {
+      this.setAttribute('role', 'listbox');
+      this.setAttribute('root', '');
 
-    // Set active state
-    this.active = isActive;
-    this.updateActiveClasses();
+      if (this.multiSelect) {
+        this.setAttribute('aria-multiselectable', 'true');
+      }
+    }
+
+    this.handleNestedMenus(this);
   }
 
   /**
-   * 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
+   * Selects the currently highlighted option.
+   * @protected
    */
-  updateActiveClasses() {
-    // Update class based on active state
-    if (this.active) this.classList.add('active');
-    else this.classList.remove('active');
+  makeSelection() {
+    this.menuService.selectHighlightedOption();
   }
 
-
   /**
-   * 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.
+   * Resets all options to their default state.
    * @private
    */
-  updateTextHighlight() {
-
-    // 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');
-    }
+  clearSelection() {
+    this.optionSelected = undefined;
+    this.value = undefined;
+    this._index = -1;
+  }
 
-    // Update text highlighting if matchWord changed
-    if (regexWord &&
-      this.isActive && !this.hasAttribute('persistent')) {
-      const nested = this.querySelectorAll('.nestingSpacer');
+  /**
+   * Resets the menu to its initial state.
+   * This is the only way to return value to undefined.
+   * @public
+   */
+  reset() {
+    this.menuService.reset();
 
-      const displayValueEl = this.querySelector('[slot="displayValue"]');
-      if (displayValueEl) {
-        this.removeChild(displayValueEl);
-      }
+    // Dispatch reset event
+    dispatchMenuEvent(this, 'auroMenu-selectValueReset');
+  }
 
-      // Create nested spacers
-      const nestingSpacerBundle = [...nested].map(() => this.nestingSpacer).join('');
+  /**
+   * Handles nested menu structure.
+   * @private
+   * @param {HTMLElement} menu - Root menu element.
+   */
+  handleNestedMenus(menu) {
+    menu.level = menu.parentElement.level >= 0 ? menu.parentElement.level + 1 : 0;
 
-      // Update with spacers and matchWord
-      this.innerHTML = nestingSpacerBundle +
-        this.textContent.replace(
-          regexWord,
-          (match) => `<strong>${match}</strong>`
-        );
-      if (displayValueEl) {
-        this.append(displayValueEl);
+    if (menu.level > 0) {
+      menu.setAttribute('role', 'group');
+      menu.removeAttribute("root");
+      if (!menu.hasAttribute('aria-label')) {
+        menu.setAttribute('aria-label', 'submenu');
       }
     }
+
+    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, '');
+    });
   }
 
   /**
-   * 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
+   * Navigates the menu options in the specified direction.
+   * @param {'up'|'down'} direction - The direction to navigate.
+   * @protected
    */
-  handleClick() {
-    if (!this.disabled) {
-      this.dispatchClickEvent();
-      this.selected = !this.selected;
+  navigateOptions(direction) {
+    if (direction === 'up') {
+      this.menuService.highlightPrevious();
+    } else if (direction === 'down') {
+      this.menuService.highlightNext();
     }
   }
 
   /**
-   * 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.
+   * Handles slot change events.
    * @private
    */
-  handleMouseEnter() {
-    if (!this.disabled) {
-      this.menuService.setHighlightedOption(this);
+  handleSlotChange() {
+    if (this.rootMenu) {
+      this.initializeMenu();
     }
   }
 
   /**
-   * Dispatches custom events defined for this menu option.
-   * This function notifies listeners when a custom event is triggered by the option.
+   * Handles custom events defined on options.
    * @private
+   * @param {HTMLElement} option - Option with custom event.
    */
-  handleCustomEvent() {
-    if (this.event) {
-      dispatchMenuEvent(this, this.event, { option: this });
-      dispatchMenuEvent(this, 'auroMenu-customEventFired', { option: this });
-    }
+  handleCustomEvent(option) {
+    const eventName = option.getAttribute('event');
+    dispatchMenuEvent(this, eventName);
+    dispatchMenuEvent(this, 'auroMenu-customEventFired');
   }
 
   /**
-   * Dispatches a click event for this menu option.
-   * This function notifies listeners that the option has been clicked.
+   * Notifies selection change to parent components.
+   * @param {any} source - The source that triggers this event.
    * @private
    */
-  dispatchClickEvent() {
-    this.dispatchEvent(new CustomEvent('auroMenuOption-click', {
-      bubbles: true,
-      cancelable: false,
-      composed: true,
-      detail: this
-    }));
+  notifySelectionChange({value, stringValue, keys, options, reason} = {}) {
+    dispatchMenuEvent(this, 'auroMenu-selectedOption', {
+      value,
+      stringValue,
+      keys,
+      options,
+      reason
+    });
   }
 
   /**
-   * Generates an HTML element containing an SVG icon based on the provided `svgContent`.
-   *
+   * Checks if an option is currently selected.
    * @private
-   * @param {string} svgContent - The SVG content to be embedded.
-   * @returns {Element} The HTML element containing the SVG icon.
+   * @param {HTMLElement} option - The option to check.
+   * @returns {boolean}
    */
-  generateIconHtml(svgContent) {
-    const dom = new DOMParser().parseFromString(svgContent, 'text/html');
-    const svg = dom.body.firstChild;
+  isOptionSelected(option) {
+    if (!this.optionSelected) {
+      return false;
+    }
 
-    svg.setAttribute('slot', 'svg');
+    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 u$c`<${this.iconTag} customColor customSvg>${svg}</${this.iconTag}>`;
+    return this.optionSelected === option;
+  }
+
+  /**
+   * Getter for loading placeholder state.
+   * @returns {boolean} - True if loading slots are present and non-empty.
+   */
+  get hasLoadingPlaceholder() {
+    return this.loadingSlots && this.loadingSlots.length > 0;
+  }
+
+  /**
+   * Getter for wrapper classes based on size.
+   * @returns {Object} - Class map for the wrapper element.
+   * @private
+   */
+  get wrapperClasses() {
+    return e$3({
+      'menuWrapper': true,
+      [this.size]: true,
+    });
   }
 
   /**
@@ -62933,26 +62936,26 @@ class AuroMenuOption extends AuroElement$2 {
    * @returns {void}
    */
   renderLayout() {
+    if (this.loading) {
+      return b$7`
+        <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>
+      `;
+    }
 
-    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$c`
-      <div class="${classes}">
-        ${this.selected && !this.noCheckmark
-        ? this.generateIconHtml(checkmarkIcon.svg)
-        : undefined}
-        <slot></slot>
+    return b$7`
+      <div class="${this.wrapperClasses}">
+        <slot @slotchange=${this.handleSlotChange}></slot>
       </div>
     `;
   }
@@ -68079,7 +68082,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$4 {
   }
 };
 
-var formkitVersion$1 = '202604242248';
+var formkitVersion$1 = '202605011613';
 
 class AuroElement extends i$4 {
   static get properties() {
@@ -69832,7 +69835,7 @@ class AuroHelpText extends i$4 {
   }
 }
 
-var formkitVersion = '202604242248';
+var formkitVersion = '202605011613';
 
 var styleCss = 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}.body-default{font-size:var(--wcss-body-default-font-size, 1rem);line-height:var(--wcss-body-default-line-height, 1.5rem)}.body-default,.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-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-lg{font-size:var(--wcss-body-lg-font-size, 1.125rem);line-height:var(--wcss-body-lg-line-height, 1.625rem)}.body-sm{font-size:var(--wcss-body-sm-font-size, 0.875rem);line-height:var(--wcss-body-sm-line-height, 1.25rem)}.body-sm,.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-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-xs{font-size:var(--wcss-body-xs-font-size, 0.75rem);line-height:var(--wcss-body-xs-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-size:var(--wcss-body-2xs-font-size, 0.625rem);font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0);line-height:var(--wcss-body-2xs-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-size:var(--wcss-display-2xl-font-size, clamp(3.5rem, 6vw, 5.375rem));font-weight:var(--wcss-display-2xl-weight, 300);letter-spacing:var(--wcss-display-2xl-letter-spacing, 0);line-height:var(--wcss-display-2xl-line-height, 1.3)}.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-size:var(--wcss-display-xl-font-size, clamp(3rem, 5.3333333333vw, 4.5rem));font-weight:var(--wcss-display-xl-weight, 300);letter-spacing:var(--wcss-display-xl-letter-spacing, 0);line-height:var(--wcss-display-xl-line-height, 1.3)}.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-size:var(--wcss-display-lg-font-size, clamp(2.75rem, 4.6666666667vw, 4rem));font-weight:var(--wcss-display-lg-weight, 300);letter-spacing:var(--wcss-display-lg-letter-spacing, 0);line-height:var(--wcss-display-lg-line-height, 1.3)}.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-size:var(--wcss-display-md-font-size, clamp(2.5rem, 4vw, 3.5rem));font-weight:var(--wcss-display-md-weight, 300);letter-spacing:var(--wcss-display-md-letter-spacing, 0);line-height:var(--wcss-display-md-line-height, 1.3)}.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-size:var(--wcss-display-sm-font-size, clamp(2rem, 3.6666666667vw, 3rem));font-weight:var(--wcss-display-sm-weight, 300);letter-spacing:var(--wcss-display-sm-letter-spacing, 0);line-height:var(--wcss-display-sm-line-height, 1.3)}.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-size:var(--wcss-display-xs-font-size, clamp(1.75rem, 3vw, 2.375rem));font-weight:var(--wcss-display-xs-weight, 300);letter-spacing:var(--wcss-display-xs-letter-spacing, 0);line-height:var(--wcss-display-xs-line-height, 1.3)}.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-size:var(--wcss-heading-xl-font-size, clamp(2rem, 3vw, 2.5rem));font-weight:var(--wcss-heading-xl-weight, 300);letter-spacing:var(--wcss-heading-xl-letter-spacing, 0);line-height:var(--wcss-heading-xl-line-height, 1.3)}.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-size:var(--wcss-heading-lg-font-size, clamp(1.75rem, 2.6666666667vw, 2.25rem));font-weight:var(--wcss-heading-lg-weight, 300);letter-spacing:var(--wcss-heading-lg-letter-spacing, 0);line-height:var(--wcss-heading-lg-line-height, 1.3)}.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-size:var(--wcss-heading-md-font-size, clamp(1.625rem, 2.3333333333vw, 1.75rem));font-weight:var(--wcss-heading-md-weight, 300);letter-spacing:var(--wcss-heading-md-letter-spacing, 0);line-height:var(--wcss-heading-md-line-height, 1.3)}.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-size:var(--wcss-heading-sm-font-size, clamp(1.375rem, 2vw, 1.5rem));font-weight:var(--wcss-heading-sm-weight, 300);letter-spacing:var(--wcss-heading-sm-letter-spacing, 0);line-height:var(--wcss-heading-sm-line-height, 1.3)}.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-size:var(--wcss-heading-xs-font-size, clamp(1.25rem, 1.6666666667vw, 1.25rem));font-weight:var(--wcss-heading-xs-weight, 450);letter-spacing:var(--wcss-heading-xs-letter-spacing, 0);line-height:var(--wcss-heading-xs-line-height, 1.3)}.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-size:var(--wcss-heading-2xs-font-size, clamp(1.125rem, 1.5vw, 1.125rem));font-weight:var(--wcss-heading-2xs-weight, 450);letter-spacing:var(--wcss-heading-2xs-letter-spacing, 0);line-height:var(--wcss-heading-2xs-line-height, 1.3)}.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-size:var(--wcss-accent-2xl-font-size, clamp(2rem, 3.1666666667vw, 2.375rem));font-weight:var(--wcss-accent-2xl-weight, 450);letter-spacing:var(--wcss-accent-2xl-letter-spacing, 0.05em);line-height:var(--wcss-accent-2xl-line-height, 1)}.accent-2xl,.accent-xl{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-size:var(--wcss-accent-xl-font-size, clamp(1.625rem, 2.3333333333vw, 2rem));font-weight:var(--wcss-accent-xl-weight, 450);letter-spacing:var(--wcss-accent-xl-letter-spacing, 0.05em);line-height:var(--wcss-accent-xl-line-height, 1.3)}.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-size:var(--wcss-accent-lg-font-size, clamp(1.5rem, 2.1666666667vw, 1.75rem));font-weight:var(--wcss-accent-lg-weight, 450);letter-spacing:var(--wcss-accent-lg-letter-spacing, 0.05em);line-height:var(--wcss-accent-lg-line-height, 1.3)}.accent-lg,.accent-md{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-size:var(--wcss-accent-md-font-size, clamp(1.375rem, 1.8333333333vw, 1.5rem));font-weight:var(--wcss-accent-md-weight, 500);letter-spacing:var(--wcss-accent-md-letter-spacing, 0.05em);line-height:var(--wcss-accent-md-line-height, 1.3)}.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-size:var(--wcss-accent-sm-font-size, clamp(1.125rem, 1.5vw, 1.25rem));font-weight:var(--wcss-accent-sm-weight, 500);letter-spacing:var(--wcss-accent-sm-letter-spacing, 0.05em);line-height:var(--wcss-accent-sm-line-height, 1.3)}.accent-sm,.accent-xs{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-size:var(--wcss-accent-xs-font-size, clamp(1rem, 1.3333333333vw, 1rem));font-weight:var(--wcss-accent-xs-weight, 500);letter-spacing:var(--wcss-accent-xs-letter-spacing, 0.1em);line-height:var(--wcss-accent-xs-line-height, 1.3)}.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-size:var(--wcss-accent-2xs-font-size, clamp(0.875rem, 1.1666666667vw, 0.875rem));font-weight:var(--wcss-accent-2xs-weight, 450);letter-spacing:var(--wcss-accent-2xs-letter-spacing, 0.1em);line-height:var(--wcss-accent-2xs-line-height, 1.3);text-transform:uppercase}[auro-dropdown]{--ds-auro-dropdown-trigger-border-color: var(--ds-auro-select-border-color);--ds-auro-dropdown-trigger-background-color: var(--ds-auro-select-background-color);--ds-auro-dropdown-trigger-container-color: var(--ds-auro-select-background-color);--ds-auro-dropdown-trigger-outline-color: var(--ds-auro-select-outline-color)}:host{display:inline-block;text-align:left;vertical-align:top}:host([layout*=emphasized]) [auro-dropdown],:host([layout*=snowflake]) [auro-dropdown]{--ds-auro-select-border-color: transparent}:host([layout*=emphasized]) .mainContent,:host([layout*=snowflake]) .mainContent{text-align:center}.mainContent{position:relative;display:flex;overflow:hidden;flex:1;flex-direction:column;align-items:center;justify-content:center}.valueContainer [slot=displayValue]{display:none}.accents{display:flex;flex-direction:row;align-items:center;justify-content:center}::slotted([slot=typeIcon]){margin-right:var(--ds-size-100, 0.5rem)}.displayValue{display:block}.displayValue:not(.force){display:none}.displayValue:not(.force).hasContent:is(.withValue):not(.hasFocus){display:block}.triggerContent{display:flex;width:100%;align-items:center;justify-content:center}:host([layout*=emphasized]) .triggerContent{padding:0 var(--ds-size-100, 0.5rem) 0 var(--ds-size-300, 1.5rem)}:host([layout*=snowflake]) .triggerContent{padding:0 var(--ds-size-100, 0.5rem) 0 var(--ds-size-200, 1rem)}:host([layout*=snowflake]) label{padding-block:var(--ds-size-25, 0.125rem)}:host([layout*=classic]) .triggerContent{padding:0 var(--ds-size-100, 0.5rem)}:host([layout*=classic]) .mainContent{align-items:start}:host([layout*=classic]) label{overflow:hidden;cursor:text;text-overflow:ellipsis;white-space:nowrap}:host([layout*=classic]) .value{height:auto}label{color:var(--ds-auro-select-label-text-color)}:host(:is([validity]:not([validity=valid]))) [auro-dropdown]{--ds-auro-select-border-color: var(--ds-basic-color-status-error, #e31f26);--ds-auro-select-outline-color: var(--ds-basic-color-status-error, #e31f26);--ds-auro-dropdown-helptext-text-color: var(--ds-basic-color-texticon-default, #2a2a2a)}:host([ondark]:is([validity]:not([validity=valid]))) [auro-dropdown],:host([appearance=inverse]:is([validity]:not([validity=valid]))) [auro-dropdown]{--ds-auro-select-border-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8);--ds-auro-select-outline-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8);--ds-auro-dropdown-helptext-text-color: var(--ds-basic-color-texticon-inverse, #ffffff)}#slotHolder{display:none}:host([fluid]){width:100%}:host([disabled]){pointer-events:none;user-select:none}:host([disabled]:not([ondark])) [auro-dropdown],:host([disabled]:not([appearance=inverse])) [auro-dropdown]{--ds-auro-select-border-color: var(--ds-basic-color-border-subtle, #dddddd)}:host(:not([layout*=classic])[disabled][ondark]) [auro-dropdown],:host(:not([layout*=classic])[disabled][appearance=inverse]) [auro-dropdown]{--ds-auro-select-border-color: transparent}`;