@aurodesignsystem-dev/auro-formkit 0.0.0-pr1376.0 → 0.0.0-pr1377.1

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

@@ -1687,7 +1687,7 @@ class AuroHelpText extends i$2 {
   }
 }
 
-var formkitVersion = '202603171954';
+var formkitVersion = '202603181732';
 
 // 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 = '202603171954';
+var formkitVersion = '202603181732';
 
 // 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 = '202603171954';
+var formkitVersion = '202603181732';
 
 // 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 = '202603171954';
+var formkitVersion = '202603181732';
 
 // 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

@@ -1233,17 +1233,46 @@ function restoreTriggerAfterClose(dropdown, focusTarget) {
  * SPDX-License-Identifier: BSD-3-Clause
  */let e$2 = class e extends i$2{constructor(i){if(super(i),this.it=A$2,i.type!==t$1.CHILD)throw Error(this.constructor.directiveName+"() can only be used in child bindings")}render(r){if(r===A$2||null==r)return this._t=void 0,this.it=r;if(r===E)return r;if("string"!=typeof r)throw Error(this.constructor.directiveName+"() called with a non-string value");if(r===this.it)return this._t;this.it=r;const s=[r];return s.raw=s,this._t={_$litType$:this.constructor.resultType,strings:s,values:[]}}};e$2.directiveName="unsafeHTML",e$2.resultType=1;
 
+/**
+ * Computes display state once per keydown event and returns a frozen context object.
+ * Centralizes null-safety checks and makes the shared/modal/popover branching explicit.
+ * @param {HTMLElement} component - The component with a dropdown reference.
+ * @param {Object} [options] - Optional config.
+ * @param {Function} [options.inputResolver] - Called with (component, ctx) to resolve the active input element.
+ * @returns {Readonly<{isVisible: boolean, isModal: boolean, isPopover: boolean, activeInput: HTMLElement|null}>}
+ */
+function createDisplayContext(component, options = {}) {
+  const dd = component.dropdown;
+  const isVisible = Boolean(dd && dd.isPopoverVisible);
+  const isFullscreen = Boolean(dd && dd.isBibFullscreen);
+
+  const ctx = {
+    isVisible,
+    isModal: isVisible && isFullscreen,
+    isPopover: isVisible && !isFullscreen,
+    activeInput: null,
+  };
+
+  if (options.inputResolver) {
+    ctx.activeInput = options.inputResolver(component, ctx);
+  }
+
+  return Object.freeze(ctx);
+}
+
 /**
  * Wires up a keydown listener that dispatches to strategy[evt.key] or strategy.default.
  * Handles both sync and async handlers.
  * @param {HTMLElement} component - The component to attach the listener to.
  * @param {Object} strategy - Map of key names to handler functions.
+ * @param {Object} [options] - Optional config passed to createDisplayContext.
  */
-function applyKeyboardStrategy(component, strategy) {
+function applyKeyboardStrategy(component, strategy, options = {}) {
   component.addEventListener('keydown', async (evt) => {
     const handler = strategy[evt.key] || strategy.default;
     if (handler) {
-      await handler(component, evt);
+      const ctx = createDisplayContext(component, options);
+      await handler(component, evt, ctx);
     }
   });
 }
@@ -1255,9 +1284,11 @@ function applyKeyboardStrategy(component, strategy) {
  * @param {string} direction - 'up' or 'down'.
  * @param {Object} [options] - Optional config.
  * @param {Function} [options.showFn] - Called to open the dropdown when closed.
+ * @param {Object} [options.ctx] - Display context to avoid re-checking visibility.
  */
 function navigateArrow(component, direction, options = {}) {
-  if (component.dropdown.isPopoverVisible) {
+  const visible = options.ctx ? options.ctx.isVisible : component.dropdown.isPopoverVisible;
+  if (visible) {
     component.menu.navigateOptions(direction);
   } else if (options.showFn) {
     options.showFn();
@@ -1265,29 +1296,21 @@ function navigateArrow(component, direction, options = {}) {
 }
 
 const comboboxKeyboardStrategy = {
-  async Enter(component, evt) {
+  async Enter(component, evt, ctx) {
     // If the clear button has focus, let the browser activate it normally.
     // stopPropagation prevents parent containers (e.g., forms) from treating
     // Enter as a submit, but we must NOT call preventDefault — that would
     // block the browser's built-in "Enter activates focused button" behavior.
-    const isBibFullscreenActive =
-      component.dropdown &&
-      component.dropdown.isBibFullscreen &&
-      component.dropdown.isPopoverVisible;
-    const activeInput =
-      isBibFullscreenActive && component.inputInBib
-        ? component.inputInBib
-        : component.input;
     const clearBtn =
-      activeInput && activeInput.shadowRoot
-        ? activeInput.shadowRoot.querySelector('.clearBtn')
+      ctx.activeInput && ctx.activeInput.shadowRoot
+        ? ctx.activeInput.shadowRoot.querySelector('.clearBtn')
         : null;
     if (clearBtn && clearBtn.shadowRoot && clearBtn.shadowRoot.activeElement !== null) {
       evt.stopPropagation();
       return;
     }
 
-    if (component.dropdown.isPopoverVisible && component.optionActive) {
+    if (ctx.isVisible && component.optionActive) {
       component.menu.makeSelection();
       await component.updateComplete;
       evt.preventDefault();
@@ -1304,20 +1327,34 @@ const comboboxKeyboardStrategy = {
     }
   },
 
-  Tab(component) {
-    if (!component.dropdown.isPopoverVisible) {
+  Tab(component, evt, ctx) {
+    if (!ctx.isVisible) {
       return;
     }
 
-    if (component.dropdown.isBibFullscreen) {
-      const clearBtn = component.inputInBib.shadowRoot.querySelector('.clearBtn');
+    if (ctx.isModal) {
+      if (!ctx.activeInput) {
+        return;
+      }
+      const clearBtn = ctx.activeInput.shadowRoot.querySelector('.clearBtn');
 
       // Use shadowRoot.activeElement to detect focus inside auro-button,
       // since Safari does not propagate :focus-within through shadow DOM.
       const clearBtnHasFocus = clearBtn && clearBtn.shadowRoot && clearBtn.shadowRoot.activeElement !== null;
 
+      if (evt.shiftKey) {
+        // Shift+Tab from clear button: move focus back to the input
+        if (clearBtnHasFocus) {
+          ctx.activeInput.focus();
+          return;
+        }
+        // Shift+Tab from input (or no clear button): close without selecting
+        component.hideBib();
+        return;
+      }
+
       // Tab from input: if clear button exists and doesn't have focus, focus it
-      if (clearBtn && !clearBtnHasFocus && component.inputInBib.value) {
+      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.
@@ -1353,8 +1390,8 @@ const comboboxKeyboardStrategy = {
       return;
     }
 
-    // Non-fullscreen: select + close
-    if (component.menu.optionActive && component.menu.optionActive.value) {
+    // Non-fullscreen: select + close (Shift+Tab closes without selecting)
+    if (!evt.shiftKey && component.menu.optionActive && component.menu.optionActive.value) {
       component.menu.value = component.menu.optionActive.value;
     }
     component.hideBib();
@@ -1364,6 +1401,7 @@ const comboboxKeyboardStrategy = {
     if (component.availableOptions.length > 0) {
       component.showBib();
     }
+    // Check live visibility: showBib() above may have just opened the dropdown.
     if (component.dropdown.isPopoverVisible) {
       evt.preventDefault();
       navigateArrow(component, 'up');
@@ -1374,6 +1412,7 @@ const comboboxKeyboardStrategy = {
     if (component.availableOptions.length > 0) {
       component.showBib();
     }
+    // Check live visibility: showBib() above may have just opened the dropdown.
     if (component.dropdown.isPopoverVisible) {
       evt.preventDefault();
       navigateArrow(component, 'down');
@@ -3611,19 +3650,32 @@ class AuroFloatingUI {
    * @param {String} eventType - The event type that triggered the hiding action.
    */
   hideBib(eventType = "unknown") {
-    if (!this.element.disabled && !this.element.noToggle) {
-      this.lockScroll(false);
-      this.element.triggerChevron?.removeAttribute("data-expanded");
+    if (this.element.disabled) {
+      return;
+    }
 
-      if (this.element.isPopoverVisible) {
-        this.element.isPopoverVisible = false;
-      }
-      if (this.showing) {
-        this.cleanupHideHandlers();
-        this.showing = false;
-        this.dispatchEventDropdownToggle(eventType);
-      }
+    // noToggle dropdowns should not close when the trigger is clicked (the
+    // "toggle" behavior), but they CAN still close via other interactions like
+    // Escape key or focus loss.
+    if (this.element.noToggle && eventType === "click") {
+      return;
+    }
+
+    this.lockScroll(false);
+    this.element.triggerChevron?.removeAttribute("data-expanded");
+
+    if (this.element.isPopoverVisible) {
+      this.element.isPopoverVisible = false;
+    }
+    if (this.showing) {
+      this.cleanupHideHandlers();
+      this.showing = false;
+      this.dispatchEventDropdownToggle(eventType);
     }
+
+    // Only clear the global reference if the bib was actually hidden.
+    // Clearing it when hideBib is blocked (e.g. noToggle + click) corrupts
+    // the singleton state so other dropdowns can't detect this one is still open.
     document.expandedAuroFloater = null;
   }
 
@@ -4956,7 +5008,7 @@ let AuroHelpText$2 = class AuroHelpText extends i$4 {
   }
 };
 
-var formkitVersion$2 = '202603171954';
+var formkitVersion$2 = '202603181732';
 
 let AuroElement$2 = class AuroElement extends i$4 {
   static get properties() {
@@ -12711,7 +12763,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$4 {
   }
 };
 
-var formkitVersion$1 = '202603171954';
+var formkitVersion$1 = '202603181732';
 
 // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -13750,7 +13802,7 @@ class AuroBibtemplate extends i$4 {
   }
 }
 
-var formkitVersion = '202603171954';
+var formkitVersion = '202603181732';
 
 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}`;
 
@@ -14137,6 +14189,7 @@ class AuroCombobox extends AuroElement {
     this.value = undefined;
     this.typedValue = undefined;
     this.behavior = "suggestion";
+    this.clearBtnFocused = false;
 
     // Defaults that effect the overall layout of the combobox
     this.checkmark = false;
@@ -15096,6 +15149,21 @@ class AuroCombobox extends AuroElement {
         this.validate();
       }
     });
+
+    /**
+     * Track focus on the clear button within the input.
+     * This is used to prevent unwanted interactions when the clear button is focused.
+     *
+     * Use event delegation on the shadow root so the listener works regardless
+     * of when .clearBtn is rendered (it only exists after a value is set).
+     */
+    this.input.shadowRoot.addEventListener('focusin', (event) => {
+      if (event.target.closest('.clearBtn')) {
+        this.clearBtnFocused = true;
+      } else {
+        this.clearBtnFocused = false;
+      }
+    });
   }
 
   /**
@@ -15212,7 +15280,10 @@ class AuroCombobox extends AuroElement {
    * @returns {void}
    */
   configureCombobox() {
-    applyKeyboardStrategy(this, comboboxKeyboardStrategy);
+    applyKeyboardStrategy(this, comboboxKeyboardStrategy, {
+      // In modal mode the input moves into the bib; route keyboard events to that element instead.
+      inputResolver: (comp, ctx) => (ctx.isModal && comp.inputInBib ? comp.inputInBib : comp.input),
+    });
 
     this.addEventListener('focusin', () => {
       this.touched = true;

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

@@ -1156,17 +1156,46 @@ function restoreTriggerAfterClose(dropdown, focusTarget) {
  * SPDX-License-Identifier: BSD-3-Clause
  */let e$2 = class e extends i$2{constructor(i){if(super(i),this.it=A$2,i.type!==t$1.CHILD)throw Error(this.constructor.directiveName+"() can only be used in child bindings")}render(r){if(r===A$2||null==r)return this._t=void 0,this.it=r;if(r===E)return r;if("string"!=typeof r)throw Error(this.constructor.directiveName+"() called with a non-string value");if(r===this.it)return this._t;this.it=r;const s=[r];return s.raw=s,this._t={_$litType$:this.constructor.resultType,strings:s,values:[]}}};e$2.directiveName="unsafeHTML",e$2.resultType=1;
 
+/**
+ * Computes display state once per keydown event and returns a frozen context object.
+ * Centralizes null-safety checks and makes the shared/modal/popover branching explicit.
+ * @param {HTMLElement} component - The component with a dropdown reference.
+ * @param {Object} [options] - Optional config.
+ * @param {Function} [options.inputResolver] - Called with (component, ctx) to resolve the active input element.
+ * @returns {Readonly<{isVisible: boolean, isModal: boolean, isPopover: boolean, activeInput: HTMLElement|null}>}
+ */
+function createDisplayContext(component, options = {}) {
+  const dd = component.dropdown;
+  const isVisible = Boolean(dd && dd.isPopoverVisible);
+  const isFullscreen = Boolean(dd && dd.isBibFullscreen);
+
+  const ctx = {
+    isVisible,
+    isModal: isVisible && isFullscreen,
+    isPopover: isVisible && !isFullscreen,
+    activeInput: null,
+  };
+
+  if (options.inputResolver) {
+    ctx.activeInput = options.inputResolver(component, ctx);
+  }
+
+  return Object.freeze(ctx);
+}
+
 /**
  * Wires up a keydown listener that dispatches to strategy[evt.key] or strategy.default.
  * Handles both sync and async handlers.
  * @param {HTMLElement} component - The component to attach the listener to.
  * @param {Object} strategy - Map of key names to handler functions.
+ * @param {Object} [options] - Optional config passed to createDisplayContext.
  */
-function applyKeyboardStrategy(component, strategy) {
+function applyKeyboardStrategy(component, strategy, options = {}) {
   component.addEventListener('keydown', async (evt) => {
     const handler = strategy[evt.key] || strategy.default;
     if (handler) {
-      await handler(component, evt);
+      const ctx = createDisplayContext(component, options);
+      await handler(component, evt, ctx);
     }
   });
 }
@@ -1178,9 +1207,11 @@ function applyKeyboardStrategy(component, strategy) {
  * @param {string} direction - 'up' or 'down'.
  * @param {Object} [options] - Optional config.
  * @param {Function} [options.showFn] - Called to open the dropdown when closed.
+ * @param {Object} [options.ctx] - Display context to avoid re-checking visibility.
  */
 function navigateArrow(component, direction, options = {}) {
-  if (component.dropdown.isPopoverVisible) {
+  const visible = options.ctx ? options.ctx.isVisible : component.dropdown.isPopoverVisible;
+  if (visible) {
     component.menu.navigateOptions(direction);
   } else if (options.showFn) {
     options.showFn();
@@ -1188,29 +1219,21 @@ function navigateArrow(component, direction, options = {}) {
 }
 
 const comboboxKeyboardStrategy = {
-  async Enter(component, evt) {
+  async Enter(component, evt, ctx) {
     // If the clear button has focus, let the browser activate it normally.
     // stopPropagation prevents parent containers (e.g., forms) from treating
     // Enter as a submit, but we must NOT call preventDefault — that would
     // block the browser's built-in "Enter activates focused button" behavior.
-    const isBibFullscreenActive =
-      component.dropdown &&
-      component.dropdown.isBibFullscreen &&
-      component.dropdown.isPopoverVisible;
-    const activeInput =
-      isBibFullscreenActive && component.inputInBib
-        ? component.inputInBib
-        : component.input;
     const clearBtn =
-      activeInput && activeInput.shadowRoot
-        ? activeInput.shadowRoot.querySelector('.clearBtn')
+      ctx.activeInput && ctx.activeInput.shadowRoot
+        ? ctx.activeInput.shadowRoot.querySelector('.clearBtn')
         : null;
     if (clearBtn && clearBtn.shadowRoot && clearBtn.shadowRoot.activeElement !== null) {
       evt.stopPropagation();
       return;
     }
 
-    if (component.dropdown.isPopoverVisible && component.optionActive) {
+    if (ctx.isVisible && component.optionActive) {
       component.menu.makeSelection();
       await component.updateComplete;
       evt.preventDefault();
@@ -1227,20 +1250,34 @@ const comboboxKeyboardStrategy = {
     }
   },
 
-  Tab(component) {
-    if (!component.dropdown.isPopoverVisible) {
+  Tab(component, evt, ctx) {
+    if (!ctx.isVisible) {
       return;
     }
 
-    if (component.dropdown.isBibFullscreen) {
-      const clearBtn = component.inputInBib.shadowRoot.querySelector('.clearBtn');
+    if (ctx.isModal) {
+      if (!ctx.activeInput) {
+        return;
+      }
+      const clearBtn = ctx.activeInput.shadowRoot.querySelector('.clearBtn');
 
       // Use shadowRoot.activeElement to detect focus inside auro-button,
       // since Safari does not propagate :focus-within through shadow DOM.
       const clearBtnHasFocus = clearBtn && clearBtn.shadowRoot && clearBtn.shadowRoot.activeElement !== null;
 
+      if (evt.shiftKey) {
+        // Shift+Tab from clear button: move focus back to the input
+        if (clearBtnHasFocus) {
+          ctx.activeInput.focus();
+          return;
+        }
+        // Shift+Tab from input (or no clear button): close without selecting
+        component.hideBib();
+        return;
+      }
+
       // Tab from input: if clear button exists and doesn't have focus, focus it
-      if (clearBtn && !clearBtnHasFocus && component.inputInBib.value) {
+      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.
@@ -1276,8 +1313,8 @@ const comboboxKeyboardStrategy = {
       return;
     }
 
-    // Non-fullscreen: select + close
-    if (component.menu.optionActive && component.menu.optionActive.value) {
+    // Non-fullscreen: select + close (Shift+Tab closes without selecting)
+    if (!evt.shiftKey && component.menu.optionActive && component.menu.optionActive.value) {
       component.menu.value = component.menu.optionActive.value;
     }
     component.hideBib();
@@ -1287,6 +1324,7 @@ const comboboxKeyboardStrategy = {
     if (component.availableOptions.length > 0) {
       component.showBib();
     }
+    // Check live visibility: showBib() above may have just opened the dropdown.
     if (component.dropdown.isPopoverVisible) {
       evt.preventDefault();
       navigateArrow(component, 'up');
@@ -1297,6 +1335,7 @@ const comboboxKeyboardStrategy = {
     if (component.availableOptions.length > 0) {
       component.showBib();
     }
+    // Check live visibility: showBib() above may have just opened the dropdown.
     if (component.dropdown.isPopoverVisible) {
       evt.preventDefault();
       navigateArrow(component, 'down');
@@ -3534,19 +3573,32 @@ class AuroFloatingUI {
    * @param {String} eventType - The event type that triggered the hiding action.
    */
   hideBib(eventType = "unknown") {
-    if (!this.element.disabled && !this.element.noToggle) {
-      this.lockScroll(false);
-      this.element.triggerChevron?.removeAttribute("data-expanded");
+    if (this.element.disabled) {
+      return;
+    }
 
-      if (this.element.isPopoverVisible) {
-        this.element.isPopoverVisible = false;
-      }
-      if (this.showing) {
-        this.cleanupHideHandlers();
-        this.showing = false;
-        this.dispatchEventDropdownToggle(eventType);
-      }
+    // noToggle dropdowns should not close when the trigger is clicked (the
+    // "toggle" behavior), but they CAN still close via other interactions like
+    // Escape key or focus loss.
+    if (this.element.noToggle && eventType === "click") {
+      return;
+    }
+
+    this.lockScroll(false);
+    this.element.triggerChevron?.removeAttribute("data-expanded");
+
+    if (this.element.isPopoverVisible) {
+      this.element.isPopoverVisible = false;
+    }
+    if (this.showing) {
+      this.cleanupHideHandlers();
+      this.showing = false;
+      this.dispatchEventDropdownToggle(eventType);
     }
+
+    // Only clear the global reference if the bib was actually hidden.
+    // Clearing it when hideBib is blocked (e.g. noToggle + click) corrupts
+    // the singleton state so other dropdowns can't detect this one is still open.
     document.expandedAuroFloater = null;
   }
 
@@ -4879,7 +4931,7 @@ let AuroHelpText$2 = class AuroHelpText extends i$4 {
   }
 };
 
-var formkitVersion$2 = '202603171954';
+var formkitVersion$2 = '202603181732';
 
 let AuroElement$2 = class AuroElement extends i$4 {
   static get properties() {
@@ -12634,7 +12686,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$4 {
   }
 };
 
-var formkitVersion$1 = '202603171954';
+var formkitVersion$1 = '202603181732';
 
 // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -13673,7 +13725,7 @@ class AuroBibtemplate extends i$4 {
   }
 }
 
-var formkitVersion = '202603171954';
+var formkitVersion = '202603181732';
 
 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}`;
 
@@ -14060,6 +14112,7 @@ class AuroCombobox extends AuroElement {
     this.value = undefined;
     this.typedValue = undefined;
     this.behavior = "suggestion";
+    this.clearBtnFocused = false;
 
     // Defaults that effect the overall layout of the combobox
     this.checkmark = false;
@@ -15019,6 +15072,21 @@ class AuroCombobox extends AuroElement {
         this.validate();
       }
     });
+
+    /**
+     * Track focus on the clear button within the input.
+     * This is used to prevent unwanted interactions when the clear button is focused.
+     *
+     * Use event delegation on the shadow root so the listener works regardless
+     * of when .clearBtn is rendered (it only exists after a value is set).
+     */
+    this.input.shadowRoot.addEventListener('focusin', (event) => {
+      if (event.target.closest('.clearBtn')) {
+        this.clearBtnFocused = true;
+      } else {
+        this.clearBtnFocused = false;
+      }
+    });
   }
 
   /**
@@ -15135,7 +15203,10 @@ class AuroCombobox extends AuroElement {
    * @returns {void}
    */
   configureCombobox() {
-    applyKeyboardStrategy(this, comboboxKeyboardStrategy);
+    applyKeyboardStrategy(this, comboboxKeyboardStrategy, {
+      // In modal mode the input moves into the bib; route keyboard events to that element instead.
+      inputResolver: (comp, ctx) => (ctx.isModal && comp.inputInBib ? comp.inputInBib : comp.input),
+    });
 
     this.addEventListener('focusin', () => {
       this.touched = true;

package/components/combobox/dist/auro-combobox.d.ts

@@ -339,6 +339,7 @@ export class AuroCombobox extends AuroElement {
     value: any;
     typedValue: any;
     behavior: string;
+    clearBtnFocused: boolean;
     checkmark: boolean;
     dvInputOnly: boolean;
     fullscreenBreakpoint: string;

package/components/combobox/dist/comboboxKeyboardStrategy.d.ts

@@ -1,6 +1,6 @@
 export namespace comboboxKeyboardStrategy {
-    function Enter(component: any, evt: any): Promise<void>;
-    function Tab(component: any): void;
+    function Enter(component: any, evt: any, ctx: any): Promise<void>;
+    function Tab(component: any, evt: any, ctx: any): void;
     function ArrowUp(component: any, evt: any): void;
     function ArrowDown(component: any, evt: any): void;
 }