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

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

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

@@ -1231,17 +1231,53 @@ 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.
+ * 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 {HTMLElement} [options.dropdown] - Explicit dropdown reference. Falls back to component.dropdown.
+ * @param {Function} [options.inputResolver] - Called with (component, ctx) to resolve the active input element.
+ * @returns {{isExpanded: boolean, isModal: boolean, isPopover: boolean, activeInput: HTMLElement|null}}
+ *   isModal and isPopover reflect the display mode (fullscreen vs not) regardless of expanded state.
+ */
+function createDisplayContext(component, options = {}) {
+  const dd = options.dropdown || component.dropdown;
+  // isPopoverVisible reflects as the `open` attribute.
+  // It reports whether the bib is open in any mode (popover or modal).
+  const isExpanded = Boolean(dd && dd.isPopoverVisible);
+  const isFullscreen = Boolean(dd && dd.isBibFullscreen);
+
+  const ctx = {
+    isExpanded,
+    isModal: isFullscreen,
+    isPopover: !isFullscreen,
+    activeInput: null,
+  };
+
+  if (options.inputResolver) {
+    const resolvedInput = options.inputResolver(component, ctx);
+    // Guard against resolvers returning undefined or non-HTMLElement values.
+    ctx.activeInput = resolvedInput instanceof HTMLElement ? resolvedInput : null;
+  }
+
+  return 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);
+    if (typeof handler === 'function') {
+      const ctx = createDisplayContext(component, options);
+      await handler(component, evt, ctx);
     }
   });
 }
@@ -1253,39 +1289,58 @@ 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.isExpanded : component.dropdown.isPopoverVisible;
+  if (visible) {
     component.menu.navigateOptions(direction);
   } else if (options.showFn) {
     options.showFn();
   }
 }
 
+/**
+ * Returns the clear button element from the active input's shadow
+ * DOM, if available.
+ * @param {Object} ctx - Display context with activeInput.
+ * @returns {Element|null}
+ */
+function getClearBtn(ctx) {
+  const root = ctx && ctx.activeInput && ctx.activeInput.shadowRoot;
+  if (!root) {
+    return null;
+  }
+  return root.querySelector('.clearBtn');
+}
+
+/**
+ * Returns true when the clear button inside the active input's shadow DOM has focus.
+ * Uses shadowRoot.activeElement to detect focus inside auro-button,
+ * since Safari does not propagate :focus-within through shadow DOM.
+ * @param {Object} ctx - Display context with activeInput.
+ * @param {Element} [clearBtn=getClearBtn(ctx)] - Pre-fetched clear button element.
+ * @returns {boolean}
+ */
+function isClearBtnFocused(ctx, clearBtn = getClearBtn(ctx)) {
+  if (!clearBtn) {
+    return false;
+  }
+  return Boolean(clearBtn.shadowRoot && clearBtn.shadowRoot.activeElement !== null);
+}
+
 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')
-        : null;
-    if (clearBtn && clearBtn.shadowRoot && clearBtn.shadowRoot.activeElement !== null) {
+    if (isClearBtnFocused(ctx)) {
       evt.stopPropagation();
       return;
     }
 
-    if (component.dropdown.isPopoverVisible && component.optionActive) {
+    if (ctx.isExpanded && component.optionActive) {
       component.menu.makeSelection();
       await component.updateComplete;
       evt.preventDefault();
@@ -1302,20 +1357,20 @@ const comboboxKeyboardStrategy = {
     }
   },
 
-  Tab(component) {
-    if (!component.dropdown.isPopoverVisible) {
+  Tab(component, _evt, ctx) {
+    if (!ctx.isExpanded) {
       return;
     }
 
-    if (component.dropdown.isBibFullscreen) {
-      const clearBtn = component.inputInBib.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 (ctx.isModal) {
+      if (!ctx.activeInput) {
+        return;
+      }
+      const clearBtn = getClearBtn(ctx);
+      const clearBtnHasFocus = isClearBtnFocused(ctx, clearBtn);
 
       // 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.
@@ -1358,30 +1413,34 @@ const comboboxKeyboardStrategy = {
     component.hideBib();
   },
 
-  ArrowUp(component, evt) {
-    // If the clear button has focus, let the browser handle ArrowUp normally
-    if (component.clearBtnFocused) {
+  ArrowUp(component, evt, ctx) {
+    // If the clear button has focus, let the browser handle ArrowUp normally.
+    if (isClearBtnFocused(ctx)) {
       return;
     }
 
     if (component.availableOptions.length > 0) {
       component.showBib();
     }
+    // Read live visibility — ctx.isExpanded was computed before showBib() above,
+    // so it wouldn't reflect the state change.
     if (component.dropdown.isPopoverVisible) {
       evt.preventDefault();
       navigateArrow(component, 'up');
     }
   },
 
-  ArrowDown(component, evt) {
-    // If the clear button has focus, let the browser handle ArrowDown normally
-    if (component.clearBtnFocused) {
+  ArrowDown(component, evt, ctx) {
+    // If the clear button has focus, let the browser handle ArrowDown normally.
+    if (isClearBtnFocused(ctx)) {
       return;
     }
 
     if (component.availableOptions.length > 0) {
       component.showBib();
     }
+    // Read live visibility — ctx.isExpanded was computed before showBib() above,
+    // so it wouldn't reflect the state change.
     if (component.dropdown.isPopoverVisible) {
       evt.preventDefault();
       navigateArrow(component, 'down');
@@ -4977,7 +5036,7 @@ let AuroHelpText$2 = class AuroHelpText extends i$4 {
   }
 };
 
-var formkitVersion$2 = '202603191747';
+var formkitVersion$2 = '202603201823';
 
 let AuroElement$2 = class AuroElement extends i$4 {
   static get properties() {
@@ -12732,7 +12791,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$4 {
   }
 };
 
-var formkitVersion$1 = '202603191747';
+var formkitVersion$1 = '202603201823';
 
 // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -13771,7 +13830,7 @@ class AuroBibtemplate extends i$4 {
   }
 }
 
-var formkitVersion = '202603191747';
+var formkitVersion = '202603201823';
 
 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}`;
 
@@ -15249,7 +15308,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

@@ -1154,17 +1154,53 @@ 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.
+ * 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 {HTMLElement} [options.dropdown] - Explicit dropdown reference. Falls back to component.dropdown.
+ * @param {Function} [options.inputResolver] - Called with (component, ctx) to resolve the active input element.
+ * @returns {{isExpanded: boolean, isModal: boolean, isPopover: boolean, activeInput: HTMLElement|null}}
+ *   isModal and isPopover reflect the display mode (fullscreen vs not) regardless of expanded state.
+ */
+function createDisplayContext(component, options = {}) {
+  const dd = options.dropdown || component.dropdown;
+  // isPopoverVisible reflects as the `open` attribute.
+  // It reports whether the bib is open in any mode (popover or modal).
+  const isExpanded = Boolean(dd && dd.isPopoverVisible);
+  const isFullscreen = Boolean(dd && dd.isBibFullscreen);
+
+  const ctx = {
+    isExpanded,
+    isModal: isFullscreen,
+    isPopover: !isFullscreen,
+    activeInput: null,
+  };
+
+  if (options.inputResolver) {
+    const resolvedInput = options.inputResolver(component, ctx);
+    // Guard against resolvers returning undefined or non-HTMLElement values.
+    ctx.activeInput = resolvedInput instanceof HTMLElement ? resolvedInput : null;
+  }
+
+  return 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);
+    if (typeof handler === 'function') {
+      const ctx = createDisplayContext(component, options);
+      await handler(component, evt, ctx);
     }
   });
 }
@@ -1176,39 +1212,58 @@ 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.isExpanded : component.dropdown.isPopoverVisible;
+  if (visible) {
     component.menu.navigateOptions(direction);
   } else if (options.showFn) {
     options.showFn();
   }
 }
 
+/**
+ * Returns the clear button element from the active input's shadow
+ * DOM, if available.
+ * @param {Object} ctx - Display context with activeInput.
+ * @returns {Element|null}
+ */
+function getClearBtn(ctx) {
+  const root = ctx && ctx.activeInput && ctx.activeInput.shadowRoot;
+  if (!root) {
+    return null;
+  }
+  return root.querySelector('.clearBtn');
+}
+
+/**
+ * Returns true when the clear button inside the active input's shadow DOM has focus.
+ * Uses shadowRoot.activeElement to detect focus inside auro-button,
+ * since Safari does not propagate :focus-within through shadow DOM.
+ * @param {Object} ctx - Display context with activeInput.
+ * @param {Element} [clearBtn=getClearBtn(ctx)] - Pre-fetched clear button element.
+ * @returns {boolean}
+ */
+function isClearBtnFocused(ctx, clearBtn = getClearBtn(ctx)) {
+  if (!clearBtn) {
+    return false;
+  }
+  return Boolean(clearBtn.shadowRoot && clearBtn.shadowRoot.activeElement !== null);
+}
+
 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')
-        : null;
-    if (clearBtn && clearBtn.shadowRoot && clearBtn.shadowRoot.activeElement !== null) {
+    if (isClearBtnFocused(ctx)) {
       evt.stopPropagation();
       return;
     }
 
-    if (component.dropdown.isPopoverVisible && component.optionActive) {
+    if (ctx.isExpanded && component.optionActive) {
       component.menu.makeSelection();
       await component.updateComplete;
       evt.preventDefault();
@@ -1225,20 +1280,20 @@ const comboboxKeyboardStrategy = {
     }
   },
 
-  Tab(component) {
-    if (!component.dropdown.isPopoverVisible) {
+  Tab(component, _evt, ctx) {
+    if (!ctx.isExpanded) {
       return;
     }
 
-    if (component.dropdown.isBibFullscreen) {
-      const clearBtn = component.inputInBib.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 (ctx.isModal) {
+      if (!ctx.activeInput) {
+        return;
+      }
+      const clearBtn = getClearBtn(ctx);
+      const clearBtnHasFocus = isClearBtnFocused(ctx, clearBtn);
 
       // 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.
@@ -1281,30 +1336,34 @@ const comboboxKeyboardStrategy = {
     component.hideBib();
   },
 
-  ArrowUp(component, evt) {
-    // If the clear button has focus, let the browser handle ArrowUp normally
-    if (component.clearBtnFocused) {
+  ArrowUp(component, evt, ctx) {
+    // If the clear button has focus, let the browser handle ArrowUp normally.
+    if (isClearBtnFocused(ctx)) {
       return;
     }
 
     if (component.availableOptions.length > 0) {
       component.showBib();
     }
+    // Read live visibility — ctx.isExpanded was computed before showBib() above,
+    // so it wouldn't reflect the state change.
     if (component.dropdown.isPopoverVisible) {
       evt.preventDefault();
       navigateArrow(component, 'up');
     }
   },
 
-  ArrowDown(component, evt) {
-    // If the clear button has focus, let the browser handle ArrowDown normally
-    if (component.clearBtnFocused) {
+  ArrowDown(component, evt, ctx) {
+    // If the clear button has focus, let the browser handle ArrowDown normally.
+    if (isClearBtnFocused(ctx)) {
       return;
     }
 
     if (component.availableOptions.length > 0) {
       component.showBib();
     }
+    // Read live visibility — ctx.isExpanded was computed before showBib() above,
+    // so it wouldn't reflect the state change.
     if (component.dropdown.isPopoverVisible) {
       evt.preventDefault();
       navigateArrow(component, 'down');
@@ -4900,7 +4959,7 @@ let AuroHelpText$2 = class AuroHelpText extends i$4 {
   }
 };
 
-var formkitVersion$2 = '202603191747';
+var formkitVersion$2 = '202603201823';
 
 let AuroElement$2 = class AuroElement extends i$4 {
   static get properties() {
@@ -12655,7 +12714,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$4 {
   }
 };
 
-var formkitVersion$1 = '202603191747';
+var formkitVersion$1 = '202603201823';
 
 // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -13694,7 +13753,7 @@ class AuroBibtemplate extends i$4 {
   }
 }
 
-var formkitVersion = '202603191747';
+var formkitVersion = '202603201823';
 
 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}`;
 
@@ -15172,7 +15231,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/comboboxKeyboardStrategy.d.ts

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