@aurodesignsystem-dev/auro-formkit 0.0.0-pr1400.3 → 0.0.0-pr1403.0

package/components/checkbox/demo/api.min.js

@@ -1687,7 +1687,7 @@ class AuroHelpText extends i$2 {
   }
 }
 
-var formkitVersion = '202603270007';
+var formkitVersion = '202603270028';
 
 // Copyright (c) 2026 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.

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

@@ -1679,7 +1679,7 @@ class AuroHelpText extends i$2 {
   }
 }
 
-var formkitVersion = '202603270007';
+var formkitVersion = '202603270028';
 
 // Copyright (c) 2026 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.

package/components/checkbox/dist/index.js

@@ -1632,7 +1632,7 @@ class AuroHelpText extends LitElement {
   }
 }
 
-var formkitVersion = '202603270007';
+var formkitVersion = '202603270028';
 
 // Copyright (c) 2026 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.

package/components/checkbox/dist/registered.js

@@ -1632,7 +1632,7 @@ class AuroHelpText extends LitElement {
   }
 }
 
-var formkitVersion = '202603270007';
+var formkitVersion = '202603270028';
 
 // Copyright (c) 2026 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.

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

@@ -1300,8 +1300,6 @@ function navigateArrow(component, direction, options = {}) {
   }
 }
 
-/* eslint-disable no-underscore-dangle */
-
 /**
  * Returns the clear button element from the active input's shadow
  * DOM, if available.
@@ -1379,32 +1377,15 @@ const comboboxKeyboardStrategy = {
       if (!ctx.activeInput) {
         return;
       }
-
-      // Active option → select immediately and close the dialog.
-      // Flag the component so the close handler focuses the trigger's
-      // clear button instead of the input. Set flags before makeSelection
-      // because the value change triggers showBib via Lit's updated().
-      if (component.optionActive) {
-        evt.preventDefault();
-        component._focusClearBtnAfterClose = true;
-        component._clearBtnFocusPending = true;
-        component.menu.makeSelection();
-        component.hideBib();
-        return;
-      }
-
       const clearBtn = getClearBtn(ctx);
       const clearBtnHasFocus = isClearBtnFocused(ctx, clearBtn);
 
-      // No active option, input has a value, clear button not focused →
-      // move focus to the dialog's clear button.
+      // Tab from input: if clear button exists and doesn't have focus, focus it
       if (clearBtn && !clearBtnHasFocus && ctx.activeInput.value) {
-
         // Force clear button container visible to work around Safari not
         // propagating :focus-within through shadow DOM boundaries, which
         // causes .wrapper:not(:focus-within) to hide .notification.clear.
         const clearContainer = clearBtn.closest('.clear');
-
         if (clearContainer) {
           clearContainer.style.display = 'flex';
           clearBtn.addEventListener('focusout', () => {
@@ -1427,17 +1408,18 @@ const comboboxKeyboardStrategy = {
         return;
       }
 
-      // No active option, no clear button (or already focused) → just close.
+      // Tab from clear button (or no clear button / no value) →
+      // select the highlighted option if any, then close
+      if (component.optionActive) {
+        component.menu.makeSelection();
+      }
       component.hideBib();
       return;
     }
 
     // Non-fullscreen: select + close
-    if (component.optionActive) {
-      evt.preventDefault();
-      component._focusClearBtnAfterClose = true;
-      component._clearBtnFocusPending = true;
-      component.menu.makeSelection();
+    if (component.menu.optionActive && component.menu.optionActive.value) {
+      component.menu.value = component.menu.optionActive.value;
     }
     component.hideBib();
   },
@@ -5088,7 +5070,7 @@ let AuroHelpText$2 = class AuroHelpText extends i$4 {
   }
 };
 
-var formkitVersion$2 = '202603270007';
+var formkitVersion$2 = '202603270028';
 
 let AuroElement$2 = class AuroElement extends i$4 {
   static get properties() {
@@ -12852,7 +12834,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$4 {
   }
 };
 
-var formkitVersion$1 = '202603270007';
+var formkitVersion$1 = '202603270028';
 
 // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -13891,7 +13873,7 @@ class AuroBibtemplate extends i$4 {
   }
 }
 
-var formkitVersion = '202603270007';
+var formkitVersion = '202603270028';
 
 var styleCss$3 = i$7`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}:host{display:block;text-align:left}:host [auro-dropdown]{--ds-auro-dropdown-trigger-background-color: transparent}:host #inputInBib::part(wrapper){box-shadow:none}:host #inputInBib::part(accent-left){display:none}:host([layout*=classic]) [auro-input]{width:100%}:host([layout*=classic]) [auro-input]::part(helpText){display:none}:host([layout*=classic]) #slotHolder{display:none}`;
 
@@ -14901,12 +14883,6 @@ class AuroCombobox extends AuroElement {
    * @returns {void}
    */
   showBib() {
-    // Suppress reopening the bib when a Tab selection is in progress —
-    // the value change from makeSelection triggers availableOptions update
-    // which calls showBib from updated(), but the bib should stay closed.
-    if (this._clearBtnFocusPending) {
-      return;
-    }
     if (!this.input.value && !this.dropdown.isBibFullscreen) {
       this.dropdown.hide();
       return;
@@ -14963,6 +14939,7 @@ class AuroCombobox extends AuroElement {
       if (!this.dropdownOpen && this.input) {
         this.input.setActiveDescendant(null);
         this.optionActive = null;
+        this.menu.menuService.clearHighlight();
 
         // Remove the highlighted state from all menu options so re-opening
         // the dropdown doesn't show a stale highlight.
@@ -14977,38 +14954,7 @@ class AuroCombobox extends AuroElement {
         // during fullscreen open to prevent touch pass-through.
         this.menu.style.pointerEvents = '';
 
-        const shouldFocusClearBtn = this._focusClearBtnAfterClose;
-        this._focusClearBtnAfterClose = false;
-
-        if (shouldFocusClearBtn) {
-          // Set a guard so duplicate toggle events don't call
-          // restoreTriggerAfterClose and steal focus from the clear button.
-          this._clearBtnFocusPending = true;
-
-          restoreTriggerAfterClose(this.dropdown, this.input);
-
-          if (this.input.componentHasFocus) {
-            // Desktop: input already has focus, redirect to clear button
-            // after restoreTriggerAfterClose's rAF settles.
-            requestAnimationFrame(() => {
-              this.setClearBtnFocus();
-              this._clearBtnFocusPending = false;
-            });
-          } else {
-            // Fullscreen: input will receive focus after dialog.close().
-            // Listen for that focus event then redirect to clear button.
-            const onFocus = () => {
-              this.input.removeEventListener('focusin', onFocus);
-              requestAnimationFrame(() => {
-                this.setClearBtnFocus();
-                this._clearBtnFocusPending = false;
-              });
-            };
-            this.input.addEventListener('focusin', onFocus);
-          }
-        } else if (!this._clearBtnFocusPending) {
-          restoreTriggerAfterClose(this.dropdown, this.input);
-        }
+        restoreTriggerAfterClose(this.dropdown, this.input);
       }
 
       if (this.dropdownOpen) {
@@ -15099,28 +15045,7 @@ class AuroCombobox extends AuroElement {
   setClearBtnFocus() {
     const clearBtn = this.input.shadowRoot.querySelector('.clearBtn');
     if (clearBtn) {
-      // Force the clear button container visible — without :focus-within
-      // the CSS rule `.wrapper:not(:focus-within) .notification.clear`
-      // hides the container with display:none, preventing focus.
-      const clearContainer = clearBtn.closest('.clear');
-
-      if (clearContainer) {
-        clearContainer.style.display = 'flex';
-        clearBtn.addEventListener('focusout', () => {
-          requestAnimationFrame(() => {
-            clearContainer.style.display = '';
-          });
-        }, { once: true });
-      }
-
-      // Focus the native button inside auro-button so the browser
-      // treats it as a real focusable element.
-      const nativeBtn = clearBtn.shadowRoot && clearBtn.shadowRoot.querySelector('button');
-      if (nativeBtn) {
-        nativeBtn.focus();
-      } else {
-        clearBtn.focus();
-      }
+      clearBtn.focus();
     }
   }
 
@@ -16483,7 +16408,7 @@ class MenuService {
    * @returns {AuroMenuOption|null}
    */
   get highlightedOption() {
-    return this._menuOptions[this.highlightedIndex] || null;
+    return this._highlightedOption;
   }
 
   /**
@@ -16571,6 +16496,7 @@ class MenuService {
     this.selectAllMatchingOptions = undefined;
 
     this.highlightedIndex = -1;
+    this._highlightedOption = null;
 
     this._menuOptions = [];
     this._subscribers = [];
@@ -16621,6 +16547,7 @@ class MenuService {
     this._pendingValue = null;
     this._pendingRetryScheduled = false;
     this._pendingRetryCount = 0;
+    this._highlightedOption = null;
   }
 
   /**
@@ -16678,8 +16605,12 @@ class MenuService {
    */
   moveHighlightedOption(direction) {
 
-    // Get the active options
-    const activeOptions = this._menuOptions.filter(option => option.isActive);
+    // Build a flattened list of all active options from the full menu subtree in
+    // DOM order so that nested <auro-menu> options participate in traversal.
+    // querySelectorAll walks the entire light-DOM subtree and is not limited to
+    // direct children, which is what caused nested options to be unreachable.
+    const allOptions = Array.from(this.host.querySelectorAll('auro-menuoption, [auro-menuoption]'));
+    const activeOptions = allOptions.filter(option => option.isActive);
 
     // Get the currently active option
     const currentActiveOption = activeOptions[activeOptions.indexOf(this.highlightedOption)];
@@ -16709,15 +16640,39 @@ class MenuService {
 
     if (!option) return;
 
-    // Get the index of the option to highlight
+    // If the previously highlighted option belongs to a nested menu's own
+    // MenuService (i.e. not in this._menuOptions), notify() won't reach it —
+    // subscribers are per-service. Deactivate it directly so it loses its
+    // highlighted CSS class before we move on.
+    const prevOption = this._highlightedOption;
+    if (prevOption && !this._menuOptions.includes(prevOption)) {
+      prevOption.active = false;
+      prevOption.updateActiveClasses();
+    }
+
+    // Track by direct reference so nested options (not in _menuOptions) are
+    // correctly remembered for the next navigation call.
+    this._highlightedOption = option;
+
+    // highlightedIndex reflects position within the registered _menuOptions array.
+    // For options that live in a nested menu's own MenuService this will be -1,
+    // which is acceptable — the index is informational only.
     const index = this._menuOptions.indexOf(option);
 
     // Update highlighted index
     this.highlightedIndex = index;
 
-    // Notify subscribers of highlight change
+    // Notify root-level subscribers of the highlight change. This correctly
+    // activates/deactivates options that subscribed to THIS service.
     this.notify({ type: 'highlightChange', option, index: this.highlightedIndex });
 
+    // If the new option is nested (not in this._menuOptions), notify() won't
+    // reach it either. Activate it directly so it gains the highlighted class.
+    if (!this._menuOptions.includes(option)) {
+      option.active = true;
+      option.updateActiveClasses();
+    }
+
     // Dispatch the change event
     this.dispatchChangeEvent('auroMenu-activatedOption', option);
   }
@@ -16731,6 +16686,20 @@ class MenuService {
     this.setHighlightedOption(option);
   }
 
+  /**
+   * Clears the highlighted option and removes its active CSS class.
+   * Call this when the dropdown closes so the next open starts from a clean state.
+   */
+  clearHighlight() {
+    const prev = this._highlightedOption;
+    if (prev) {
+      prev.active = false;
+      prev.updateActiveClasses();
+    }
+    this._highlightedOption = null;
+    this.highlightedIndex = -1;
+  }
+
   /**
    * Selects the currently highlighted option.
    */
@@ -16879,6 +16848,26 @@ class MenuService {
         return;
       }
 
+      // Before treating this as a hard miss, scan the full DOM subtree for
+      // nested menuoptions whose keys match. Nested options register with
+      // their own MenuService instance (context isolation), so they never
+      // appear in this._menuOptions.
+      const allOptions = Array.from(this.host.querySelectorAll('auro-menuoption, [auro-menuoption]'));
+      const nestedMatches = allOptions.filter(option =>
+        !this._menuOptions.includes(option) &&
+        option.isActive &&
+        validatedValues.includes(option.key)
+      );
+
+      if (nestedMatches.length) {
+        this.clearPendingValue();
+        const selected = this.multiSelect ? nestedMatches : [nestedMatches[nestedMatches.length - 1]];
+        if (this.optionsArraysMatch(selected, this.selectedOptions)) return;
+        this.selectedOptions = selected;
+        this.stageUpdate();
+        return;
+      }
+
       this.clearPendingValue();
 
       if (this.selectedOptions.length > 0) {
@@ -17005,6 +16994,16 @@ class MenuService {
       selectedOptions: this.selectedOptions,
       ...meta
     });
+
+    // Options subscribed to a nested menu's own service never receive the
+    // notify() broadcast above. Sync their selected state directly so the
+    // DOM attribute stays accurate and dual-selection cannot occur.
+    const allOptions = Array.from(this.host.querySelectorAll('auro-menuoption, [auro-menuoption]'));
+    allOptions.forEach(option => {
+      if (!this._menuOptions.includes(option)) {
+        option.setInternalSelected(this.selectedOptions.includes(option));
+      }
+    });
   }
 
   /**