@aurodesignsystem-dev/auro-formkit 0.0.0-pr1346.7 → 0.0.0-pr1346.8

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

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

@@ -1115,6 +1115,127 @@ let AuroFormValidation$1 = class AuroFormValidation {
   }
 };
 
+/**
+ * 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.
+ */
+function applyKeyboardStrategy(component, strategy) {
+  component.addEventListener('keydown', async (evt) => {
+    const handler = strategy[evt.key] || strategy.default;
+    if (handler) {
+      await handler(component, evt);
+    }
+  });
+}
+
+/**
+ * Shared arrow navigation. Calls menu.navigateOptions(direction) if visible.
+ * Optionally opens dropdown via showFn when closed.
+ * @param {HTMLElement} component - The component with dropdown and menu references.
+ * @param {string} direction - 'up' or 'down'.
+ * @param {Object} [options] - Optional config.
+ * @param {Function} [options.showFn] - Called to open the dropdown when closed.
+ */
+function navigateArrow(component, direction, options = {}) {
+  if (component.dropdown.isPopoverVisible) {
+    component.menu.navigateOptions(direction);
+  } else if (options.showFn) {
+    options.showFn();
+  }
+}
+
+const comboboxKeyboardStrategy = {
+  async Enter(component, evt) {
+    if (component.dropdown.isPopoverVisible && component.optionActive) {
+      component.menu.makeSelection();
+      await component.updateComplete;
+      evt.preventDefault();
+      evt.stopPropagation();
+      component.setClearBtnFocus();
+    } else {
+      component.showBib();
+    }
+  },
+
+  Tab(component) {
+    if (!component.dropdown.isPopoverVisible) {
+      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;
+
+      // Tab from input: if clear button exists and doesn't have focus, focus it
+      if (clearBtn && !clearBtnHasFocus && component.inputInBib.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', () => {
+            // Delay cleanup so :focus-within settles when focus moves
+            // to a sibling (e.g., Shift+Tab back to the input).
+            requestAnimationFrame(() => {
+              clearContainer.style.display = '';
+            });
+          }, { once: true });
+        }
+
+        // Focus the native button inside auro-button so the browser
+        // treats it as a real focusable element inside the dialog.
+        const nativeBtn = clearBtn.shadowRoot && clearBtn.shadowRoot.querySelector('button');
+        if (nativeBtn) {
+          nativeBtn.focus();
+        } else {
+          clearBtn.focus();
+        }
+        return;
+      }
+
+      // 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.menu.optionActive && component.menu.optionActive.value) {
+      component.menu.value = component.menu.optionActive.value;
+    }
+    component.hideBib();
+  },
+
+  ArrowUp(component, evt) {
+    if (component.availableOptions.length > 0) {
+      component.showBib();
+    }
+    if (component.dropdown.isPopoverVisible) {
+      evt.preventDefault();
+      navigateArrow(component, 'up');
+    }
+  },
+
+  ArrowDown(component, evt) {
+    if (component.availableOptions.length > 0) {
+      component.showBib();
+    }
+    if (component.dropdown.isPopoverVisible) {
+      evt.preventDefault();
+      navigateArrow(component, 'down');
+    }
+  },
+};
+
 /**
  * @license
  * Copyright 2020 Google LLC
@@ -4202,6 +4323,10 @@ class AuroDropdownBib extends i$4 {
       const newEvent = new KeyboardEvent('keydown', {
         key: event.key,
         code: event.code,
+        shiftKey: event.shiftKey,
+        altKey: event.altKey,
+        ctrlKey: event.ctrlKey,
+        metaKey: event.metaKey,
         bubbles: true,
         composed: true,
         cancelable: true
@@ -4568,7 +4693,7 @@ let AuroHelpText$2 = class AuroHelpText extends i$4 {
   }
 };
 
-var formkitVersion$2 = '202603022150';
+var formkitVersion$2 = '202603031728';
 
 let AuroElement$2 = class AuroElement extends i$4 {
   static get properties() {
@@ -12310,7 +12435,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$4 {
   }
 };
 
-var formkitVersion$1 = '202603022150';
+var formkitVersion$1 = '202603031728';
 
 // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -13337,7 +13462,7 @@ class AuroBibtemplate extends i$4 {
   }
 }
 
-var formkitVersion = '202603022150';
+var formkitVersion = '202603031728';
 
 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}`;
 
@@ -14779,8 +14904,33 @@ class AuroCombobox extends AuroElement {
    * @returns {void}
    */
   handleInputValueChange(event) {
+    // When the event comes from the fullscreen bib input, sync the value to
+    // the trigger input. Setting trigger.value triggers Lit's updated()
+    // (async, microtask) which fires notifyValueChanged() → another 'input'
+    // event from the trigger. The _syncingBibValue guard persists across the
+    // async boundary and prevents that re-entrant event from running the
+    // non-fullscreen path (which would call clear() → hideBib()).
+    // When the event comes from the fullscreen bib input, sync the value to
+    // the trigger and run filtering, but suppress the re-entrant input event
+    // that the trigger fires (via Lit updated() → notifyValueChanged()) so
+    // the non-fullscreen hide/clear logic doesn't close the dialog.
     if (event.target === this.inputInBib) {
+      this._syncingBibValue = true;
       this.input.value = this.inputInBib.value;
+      this.input.updateComplete.then(() => {
+        this._syncingBibValue = false;
+      });
+
+      // Run filtering inline — the re-entrant event won't reach this code.
+      this.menu.matchWord = this.inputInBib.value;
+      this.optionActive = null;
+      this.handleMenuOptions();
+      this.dispatchEvent(new CustomEvent('inputValue', { detail: { value: this.inputValue } }));
+      return;
+    }
+
+    // Ignore re-entrant input events caused by the bib→trigger sync above.
+    if (this._syncingBibValue) {
       return;
     }
 
@@ -14838,58 +14988,7 @@ class AuroCombobox extends AuroElement {
    * @returns {void}
    */
   configureCombobox() {
-    this.addEventListener('keydown', async (evt) => {
-      if (evt.key === 'Enter') {
-        if (this.dropdown.isPopoverVisible && this.optionActive) {
-          this.menu.makeSelection();
-
-          await this.updateComplete;
-
-          evt.preventDefault();
-          evt.stopPropagation();
-          this.setClearBtnFocus();
-        } else {
-          this.showBib();
-        }
-      }
-
-      if (evt.key === 'Tab' && this.dropdown.isPopoverVisible) {
-        // Tab accepts the focused option and closes the popup per the
-        // WAI-ARIA APG combobox / listbox pattern.
-        // https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/
-        //
-        // In fullscreen mode the popup is inside a <dialog> which provides
-        // containment (inert background, VoiceOver focus trapping), but
-        // the content is a role="listbox" navigated via
-        // aria-activedescendant, not Tab focus. The dialog's native Tab
-        // trap only reaches the close button, so Tab is overridden (via
-        // re-dispatch from auro-dropdownBib) to follow listbox keyboard
-        // conventions in both modes.
-        if (this.menu.optionActive && this.menu.optionActive.value) {
-          this.menu.value = this.menu.optionActive.value;
-        }
-        this.hideBib();
-      }
-
-      /**
-       * Prevent moving the cursor position while navigating the menu options.
-       */
-      if (evt.key === 'ArrowUp' || evt.key === 'ArrowDown') {
-        if (this.availableOptions.length > 0) {
-          this.showBib();
-        }
-
-        if (this.dropdown.isPopoverVisible) {
-          evt.preventDefault();
-
-          // navigate on menu only when the focus is on input
-          if (!this.dropdown.isBibFullscreen || this.dropdown.isPopoverVisible) {
-            const direction = evt.key.replace('Arrow', '').toLowerCase();
-            this.menu.navigateOptions(direction);
-          }
-        }
-      }
-    });
+    applyKeyboardStrategy(this, comboboxKeyboardStrategy);
 
     this.addEventListener('focusin', () => {
       this.touched = true;

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

@@ -1038,6 +1038,127 @@ let AuroFormValidation$1 = class AuroFormValidation {
   }
 };
 
+/**
+ * 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.
+ */
+function applyKeyboardStrategy(component, strategy) {
+  component.addEventListener('keydown', async (evt) => {
+    const handler = strategy[evt.key] || strategy.default;
+    if (handler) {
+      await handler(component, evt);
+    }
+  });
+}
+
+/**
+ * Shared arrow navigation. Calls menu.navigateOptions(direction) if visible.
+ * Optionally opens dropdown via showFn when closed.
+ * @param {HTMLElement} component - The component with dropdown and menu references.
+ * @param {string} direction - 'up' or 'down'.
+ * @param {Object} [options] - Optional config.
+ * @param {Function} [options.showFn] - Called to open the dropdown when closed.
+ */
+function navigateArrow(component, direction, options = {}) {
+  if (component.dropdown.isPopoverVisible) {
+    component.menu.navigateOptions(direction);
+  } else if (options.showFn) {
+    options.showFn();
+  }
+}
+
+const comboboxKeyboardStrategy = {
+  async Enter(component, evt) {
+    if (component.dropdown.isPopoverVisible && component.optionActive) {
+      component.menu.makeSelection();
+      await component.updateComplete;
+      evt.preventDefault();
+      evt.stopPropagation();
+      component.setClearBtnFocus();
+    } else {
+      component.showBib();
+    }
+  },
+
+  Tab(component) {
+    if (!component.dropdown.isPopoverVisible) {
+      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;
+
+      // Tab from input: if clear button exists and doesn't have focus, focus it
+      if (clearBtn && !clearBtnHasFocus && component.inputInBib.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', () => {
+            // Delay cleanup so :focus-within settles when focus moves
+            // to a sibling (e.g., Shift+Tab back to the input).
+            requestAnimationFrame(() => {
+              clearContainer.style.display = '';
+            });
+          }, { once: true });
+        }
+
+        // Focus the native button inside auro-button so the browser
+        // treats it as a real focusable element inside the dialog.
+        const nativeBtn = clearBtn.shadowRoot && clearBtn.shadowRoot.querySelector('button');
+        if (nativeBtn) {
+          nativeBtn.focus();
+        } else {
+          clearBtn.focus();
+        }
+        return;
+      }
+
+      // 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.menu.optionActive && component.menu.optionActive.value) {
+      component.menu.value = component.menu.optionActive.value;
+    }
+    component.hideBib();
+  },
+
+  ArrowUp(component, evt) {
+    if (component.availableOptions.length > 0) {
+      component.showBib();
+    }
+    if (component.dropdown.isPopoverVisible) {
+      evt.preventDefault();
+      navigateArrow(component, 'up');
+    }
+  },
+
+  ArrowDown(component, evt) {
+    if (component.availableOptions.length > 0) {
+      component.showBib();
+    }
+    if (component.dropdown.isPopoverVisible) {
+      evt.preventDefault();
+      navigateArrow(component, 'down');
+    }
+  },
+};
+
 /**
  * @license
  * Copyright 2020 Google LLC
@@ -4125,6 +4246,10 @@ class AuroDropdownBib extends i$4 {
       const newEvent = new KeyboardEvent('keydown', {
         key: event.key,
         code: event.code,
+        shiftKey: event.shiftKey,
+        altKey: event.altKey,
+        ctrlKey: event.ctrlKey,
+        metaKey: event.metaKey,
         bubbles: true,
         composed: true,
         cancelable: true
@@ -4491,7 +4616,7 @@ let AuroHelpText$2 = class AuroHelpText extends i$4 {
   }
 };
 
-var formkitVersion$2 = '202603022150';
+var formkitVersion$2 = '202603031728';
 
 let AuroElement$2 = class AuroElement extends i$4 {
   static get properties() {
@@ -12233,7 +12358,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$4 {
   }
 };
 
-var formkitVersion$1 = '202603022150';
+var formkitVersion$1 = '202603031728';
 
 // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -13260,7 +13385,7 @@ class AuroBibtemplate extends i$4 {
   }
 }
 
-var formkitVersion = '202603022150';
+var formkitVersion = '202603031728';
 
 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}`;
 
@@ -14702,8 +14827,33 @@ class AuroCombobox extends AuroElement {
    * @returns {void}
    */
   handleInputValueChange(event) {
+    // When the event comes from the fullscreen bib input, sync the value to
+    // the trigger input. Setting trigger.value triggers Lit's updated()
+    // (async, microtask) which fires notifyValueChanged() → another 'input'
+    // event from the trigger. The _syncingBibValue guard persists across the
+    // async boundary and prevents that re-entrant event from running the
+    // non-fullscreen path (which would call clear() → hideBib()).
+    // When the event comes from the fullscreen bib input, sync the value to
+    // the trigger and run filtering, but suppress the re-entrant input event
+    // that the trigger fires (via Lit updated() → notifyValueChanged()) so
+    // the non-fullscreen hide/clear logic doesn't close the dialog.
     if (event.target === this.inputInBib) {
+      this._syncingBibValue = true;
       this.input.value = this.inputInBib.value;
+      this.input.updateComplete.then(() => {
+        this._syncingBibValue = false;
+      });
+
+      // Run filtering inline — the re-entrant event won't reach this code.
+      this.menu.matchWord = this.inputInBib.value;
+      this.optionActive = null;
+      this.handleMenuOptions();
+      this.dispatchEvent(new CustomEvent('inputValue', { detail: { value: this.inputValue } }));
+      return;
+    }
+
+    // Ignore re-entrant input events caused by the bib→trigger sync above.
+    if (this._syncingBibValue) {
       return;
     }
 
@@ -14761,58 +14911,7 @@ class AuroCombobox extends AuroElement {
    * @returns {void}
    */
   configureCombobox() {
-    this.addEventListener('keydown', async (evt) => {
-      if (evt.key === 'Enter') {
-        if (this.dropdown.isPopoverVisible && this.optionActive) {
-          this.menu.makeSelection();
-
-          await this.updateComplete;
-
-          evt.preventDefault();
-          evt.stopPropagation();
-          this.setClearBtnFocus();
-        } else {
-          this.showBib();
-        }
-      }
-
-      if (evt.key === 'Tab' && this.dropdown.isPopoverVisible) {
-        // Tab accepts the focused option and closes the popup per the
-        // WAI-ARIA APG combobox / listbox pattern.
-        // https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/
-        //
-        // In fullscreen mode the popup is inside a <dialog> which provides
-        // containment (inert background, VoiceOver focus trapping), but
-        // the content is a role="listbox" navigated via
-        // aria-activedescendant, not Tab focus. The dialog's native Tab
-        // trap only reaches the close button, so Tab is overridden (via
-        // re-dispatch from auro-dropdownBib) to follow listbox keyboard
-        // conventions in both modes.
-        if (this.menu.optionActive && this.menu.optionActive.value) {
-          this.menu.value = this.menu.optionActive.value;
-        }
-        this.hideBib();
-      }
-
-      /**
-       * Prevent moving the cursor position while navigating the menu options.
-       */
-      if (evt.key === 'ArrowUp' || evt.key === 'ArrowDown') {
-        if (this.availableOptions.length > 0) {
-          this.showBib();
-        }
-
-        if (this.dropdown.isPopoverVisible) {
-          evt.preventDefault();
-
-          // navigate on menu only when the focus is on input
-          if (!this.dropdown.isBibFullscreen || this.dropdown.isPopoverVisible) {
-            const direction = evt.key.replace('Arrow', '').toLowerCase();
-            this.menu.navigateOptions(direction);
-          }
-        }
-      }
-    });
+    applyKeyboardStrategy(this, comboboxKeyboardStrategy);
 
     this.addEventListener('focusin', () => {
       this.touched = true;

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

@@ -492,6 +492,7 @@ export class AuroCombobox extends AuroElement {
      * @returns {void}
      */
     private handleInputValueChange;
+    _syncingBibValue: boolean;
     /**
      * Binds all behavior needed to the combobox after rendering.
      * @private

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

@@ -0,0 +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;
+}