@aurodesignsystem-dev/auro-formkit 0.0.0-pr1346.3 → 0.0.0-pr1346.4

package/components/combobox/dist/index.js

@@ -3810,7 +3810,7 @@ let p$3 = class p{registerComponent(t,a){customElements.get(t)||customElements.d
 
 var iconVersion$2 = '9.1.2';
 
-var styleCss$2$1 = css`:host{position:fixed;z-index:var(--depth-tooltip, 400);display:none;isolation:isolate}:host dialog{max-width:none;max-height:none;padding:0;border:none;margin:0;outline:none;transform:translateZ(0)}:host dialog::backdrop{background:transparent}:host(:not([isfullscreen])) dialog{position:absolute;inset:unset}:host(:not([isfullscreen])) .container.shape-box{border-radius:unset}:host(:not([isfullscreen])) .container[class*=shape-pill],:host(:not([isfullscreen])) .container[class*=shape-snowflake]{border-radius:30px}:host(:not([isfullscreen])) .container[class*=shape-rounded]{border-radius:16px}:host(:not([matchWidth])) .container{min-width:fit-content}:host([isfullscreen]){position:fixed;top:0;left:0}:host([isfullscreen]) .container{width:100dvw;max-width:none;height:100dvh;max-height:none;border-radius:unset;margin-top:0;box-shadow:unset;overscroll-behavior:contain}:host([data-show]){display:flex}:host([common]:not([isfullscreen])) .container,:host([rounded]:not([isfullscreen])) .container{border-radius:var(--ds-border-radius, 0.375rem)}:host([common][isfullscreen]) .container,:host([rounded][isfullscreen]) .container{border-radius:unset;box-shadow:unset}.container{display:inline-block;overflow:auto;box-sizing:border-box;border-radius:var(--ds-border-radius, 0.375rem);margin:var(--ds-size-50, 0.25rem) 0}.util_displayHiddenVisually{position:absolute;overflow:hidden;width:1px;height:1px;padding:0;border:0;margin:-1px;clip-path:inset(50%);white-space:nowrap}`;
+var styleCss$2$1 = css`:host{position:fixed;z-index:var(--depth-tooltip, 400);display:none;isolation:isolate}:host dialog{max-width:none;max-height:none;padding:0;border:none;margin:0;outline:none;transform:translateZ(0)}:host dialog::backdrop{background:transparent}:host(:not([isfullscreen])) dialog{position:absolute;inset:unset}:host(:not([isfullscreen])) .container.shape-box{border-radius:unset}:host(:not([isfullscreen])) .container[class*=shape-pill],:host(:not([isfullscreen])) .container[class*=shape-snowflake]{border-radius:30px}:host(:not([isfullscreen])) .container[class*=shape-rounded]{border-radius:16px}:host(:not([matchWidth])) .container{min-width:fit-content}:host([isfullscreen]){position:fixed;top:0;left:0}:host([isfullscreen]) .container{width:100dvw;max-width:none;height:100dvh;max-height:none;border-radius:unset;margin-top:0;box-shadow:unset;overscroll-behavior:contain}:host([isfullscreen]) .container::backdrop{background:var(--ds-color-background-primary, #fff)}:host([data-show]){display:flex}:host([common]:not([isfullscreen])) .container,:host([rounded]:not([isfullscreen])) .container{border-radius:var(--ds-border-radius, 0.375rem)}:host([common][isfullscreen]) .container,:host([rounded][isfullscreen]) .container{border-radius:unset;box-shadow:unset}.container{display:inline-block;overflow:auto;box-sizing:border-box;border-radius:var(--ds-border-radius, 0.375rem);margin:var(--ds-size-50, 0.25rem) 0}.util_displayHiddenVisually{position:absolute;overflow:hidden;width:1px;height:1px;padding:0;border:0;margin:-1px;clip-path:inset(50%);white-space:nowrap}`;
 
 var colorCss$2$1 = css`.container{background-color:var(--ds-auro-dropdownbib-container-color);box-shadow:var(--ds-auro-dropdownbib-boxshadow-color);color:var(--ds-auro-dropdownbib-text-color)}`;
 
@@ -3818,6 +3818,8 @@ var tokensCss$1$1 = css`:host(:not([ondark])),:host(:not([appearance=inverse])){
 
 // Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
+/* eslint-disable max-lines */
+// ---------------------------------------------------------------------
 
 
 const DESIGN_TOKEN_BREAKPOINT_PREFIX = '--ds-grid-breakpoint-';
@@ -3993,22 +3995,63 @@ class AuroDropdownBib extends LitElement {
     // Handle ESC key via dialog's cancel event
     const dialog = this.shadowRoot.querySelector('dialog');
     dialog.addEventListener('cancel', (event) => {
-      event.preventDefault(); // Let parent handle closing
+      // Let parent handle closing
+      event.preventDefault();
       this.dispatchEvent(new CustomEvent('auro-bib-cancel', {
         bubbles: true,
         composed: true
       }));
     });
 
-    // Re-dispatch navigation keyboard events so they cross the shadow DOM
-    // boundary and reach the combobox/select key handlers.
-    // Only intercept keys used for menu navigation — let all other keys
-    // (characters, Backspace, etc.) through so typing in inputs works.
-    const navKeys = new Set(['ArrowUp', 'ArrowDown', 'Enter', 'Escape']);
+    // showModal() creates a closed focus scope — keyboard events inside
+    // the dialog's shadow DOM do NOT bubble out to the combobox/select
+    // keydown handlers in the parent shadow DOM. This handler bridges
+    // that gap by re-dispatching navigation keys so they cross the
+    // shadow boundary and reach the menu navigation logic in the parent
+    // component.
+    //
+    // The trade-off: intercepting these keys means native keyboard
+    // behaviors that would normally "just work" must be manually
+    // re-implemented here:
+    //
+    // - Enter on buttons: Custom elements (auro-button) don't get the
+    //   native Enter→click that <button> provides, so we call .click()
+    //   directly when Enter is pressed on a button-like element.
+    //
+    // - Tab: NOT intercepted — left to the browser's native focus trap
+    //   provided by showModal(), which cycles Tab between focusable
+    //   elements inside the dialog (e.g. the input and close button).
+    //   Intercepting Tab would kill the native focus trap and break
+    //   focus management inside the dialog.
+    //
+    // - Escape: The native <dialog> fires a `cancel` event on ESC
+    //   (handled above), so the re-dispatched Escape is a secondary
+    //   path for parent components that also listen for Escape keydown.
+    const navKeys = new Set([
+      'ArrowUp',
+      'ArrowDown',
+      'Enter',
+      'Escape'
+    ]);
     dialog.addEventListener('keydown', (event) => {
       if (!navKeys.has(event.key)) {
         return;
       }
+
+      // Custom elements (auro-button) don't get the native Enter→click
+      // behavior that <button> has. Find the button in the composed path
+      // and click it directly.
+      if (event.key === 'Enter') {
+        const buttonSelector = 'button, [role="button"], auro-button, [auro-button]';
+        const btn = event.composedPath().find((el) => el.matches && el.matches(buttonSelector));
+        if (btn) {
+          event.preventDefault();
+          event.stopPropagation();
+          btn.click();
+          return;
+        }
+      }
+
       event.preventDefault();
       event.stopPropagation();
       const newEvent = new KeyboardEvent('keydown', {
@@ -4032,9 +4075,55 @@ class AuroDropdownBib extends LitElement {
   }
 
   /**
-   * Opens the dialog using showModal() for accessibility.
-   * @param {boolean} modal - If true, uses showModal() (default). If false, uses show().
+   * Blocks touch-driven page scroll while a fullscreen modal dialog is open.
+   *
+   * The showModal() function places the dialog in the browser's **top layer**,
+   * which is a separate rendering layer above the normal DOM. On mobile, the
+   * compositor processes visual-viewport panning before top-layer touch
+   * handling. This means the entire viewport — including the top-layer dialog
+   * — can be panned by a touch gesture, causing the page behind the dialog to
+   * scroll into view. To prevent this, we add a touchmove listener that cancels
+   * the event if the touch started outside the dialog or any scrollable child within it.
+   *
+   * @private
+   */
+  _lockTouchScroll() {
+    const dialog = this.shadowRoot.querySelector('dialog');
+
+    this._touchMoveHandler = (event) => {
+      // Walk the composed path (which crosses shadow DOM boundaries) to
+      // check whether the touch started inside a scrollable element that
+      // lives within the dialog.  If so, allow the scroll.
+      for (const el of event.composedPath()) {
+        if (el === dialog) {
+          // Reached the dialog boundary without finding a scrollable child.
+          break;
+        }
+        if (el instanceof HTMLElement && el.scrollHeight > el.clientHeight) {
+          const { overflowY } = getComputedStyle(el);
+          if (overflowY === 'auto' || overflowY === 'scroll') {
+            return;
+          }
+        }
+      }
+
+      event.preventDefault();
+    };
+
+    document.addEventListener('touchmove', this._touchMoveHandler, { passive: false });
+  }
+
+  /**
+   * Removes the touchmove listener added by _lockTouchScroll().
+   * @private
    */
+  _unlockTouchScroll() {
+    if (this._touchMoveHandler) {
+      document.removeEventListener('touchmove', this._touchMoveHandler);
+      this._touchMoveHandler = undefined;
+    }
+  }
+
   open(modal = true) {
     const dialog = this.shadowRoot.querySelector('dialog');
     if (dialog && !dialog.open) {
@@ -4051,6 +4140,8 @@ class AuroDropdownBib extends LitElement {
 
         documentElement.style.overflow = prevOverflow;
 
+        this._lockTouchScroll();
+
       } else {
         // Use setAttribute instead of dialog.show() to avoid the dialog
         // focusing steps which steal focus from the trigger and cause
@@ -4066,6 +4157,7 @@ class AuroDropdownBib extends LitElement {
   close() {
     const dialog = this.shadowRoot.querySelector('dialog');
     if (dialog && dialog.open) {
+      this._unlockTouchScroll();
       dialog.close();
     }
   }
@@ -4331,7 +4423,7 @@ let AuroHelpText$2 = class AuroHelpText extends LitElement {
   }
 };
 
-var formkitVersion$2 = '202602232116';
+var formkitVersion$2 = '202602260152';
 
 let AuroElement$2 = class AuroElement extends LitElement {
   static get properties() {
@@ -4604,6 +4696,18 @@ class AuroDropdown extends AuroElement$2 {
    */
   show() {
     this.floater.showBib();
+
+    // Open dialog synchronously so callers remain in the user gesture
+    // chain. This is critical for mobile browsers (iOS Safari) to keep
+    // the virtual keyboard open when transitioning from the trigger
+    // input to an input inside the fullscreen dialog. Without this,
+    // showModal() fires asynchronously via Lit's update cycle, which
+    // falls outside the user activation window and causes iOS to
+    // dismiss the keyboard.
+    if (this.isBibFullscreen && this.bibElement && this.bibElement.value) {
+      const useModal = !this.disableFocusTrap;
+      this.bibElement.value.open(useModal);
+    }
   }
 
   /**
@@ -4990,6 +5094,14 @@ class AuroDropdown extends AuroElement$2 {
         this.bibElement.value.close();
       }
     }
+
+    // When fullscreen strategy changes while open, re-open dialog with correct mode
+    // (e.g. resizing from desktop → mobile while dropdown is open)
+    if (changedProperties.has('isBibFullscreen') && this.isPopoverVisible && this.bibElement.value) {
+      const useModal = this.isBibFullscreen && !this.disableFocusTrap;
+      this.bibElement.value.close();
+      this.bibElement.value.open(useModal);
+    }
   }
 
   /**
@@ -10484,6 +10596,15 @@ class BaseInput extends AuroElement$1 {
   constructor() {
     super();
 
+    // Delegate focus to the native <input> inside the shadow root so that
+    // showModal()'s dialog focusing steps reach the input element.
+    // This keeps the mobile virtual keyboard open when the fullscreen dialog
+    // opens, because the browser sees an input-to-input focus transfer.
+    this.constructor.shadowRootOptions = {
+      ...AuroElement$1.shadowRootOptions,
+      delegatesFocus: true,
+    };
+
     this._initializeDefaults();
   }
 
@@ -10605,14 +10726,6 @@ class BaseInput extends AuroElement$1 {
         reflect: true
       },
 
-      /**
-       * The value for the aria-controls attribute.
-       */
-      a11yControls: {
-        type: String,
-        reflect: true
-      },
-
       /**
        * The value for the aria-activedescendant attribute.
        * Points to the ID of the currently active/highlighted option in a listbox.
@@ -12032,7 +12145,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
   }
 };
 
-var formkitVersion$1 = '202602232116';
+var formkitVersion$1 = '202602260152';
 
 // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -13059,7 +13172,7 @@ class AuroBibtemplate extends LitElement {
   }
 }
 
-var formkitVersion = '202602232116';
+var formkitVersion = '202602260152';
 
 var styleCss$1 = css`.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}`;
 
@@ -13477,6 +13590,7 @@ class AuroCombobox extends AuroElement {
     this.dropdownOpen = false;
     this.triggerExpandedState = false;
     this._expandedTimeout = null;
+    this._inFullscreenTransition = false;
     this.errorMessage = null;
     this.isHiddenWhileLoading = false;
     this.largeFullscreenHeadline = false;
@@ -13497,7 +13611,7 @@ class AuroCombobox extends AuroElement {
 
       /**
        * Defines whether the component will be on lighter or darker backgrounds.
-       * @property {'default' | 'inverse'}
+       * @property {'default' | 'inverse'} appearance - The visual appearance of the component.
        * @default 'default'
        */
       appearance: {
@@ -14052,7 +14166,7 @@ class AuroCombobox extends AuroElement {
    * @returns {void}
    */
   showBib() {
-    if (!this.input.value) {
+    if (!this.input.value && !this.dropdown.isBibFullscreen) {
       this.dropdown.hide();
       return;
     }
@@ -14121,6 +14235,18 @@ class AuroCombobox extends AuroElement {
 
         // Restore trigger accessibility when closing fullscreen
         this.dropdown.trigger.inert = false;
+
+        // Restore focus to the trigger input after closing the
+        // fullscreen dialog. The browser's native dialog focus restoration
+        // fails because the trigger was set to inert before showModal().
+        // Use rAF to run after Lit's microtask update cycle calls dialog.close().
+        if (this.dropdown.isBibFullscreen) {
+          requestAnimationFrame(() => {
+            if (!this.dropdown.isPopoverVisible) {
+              this.input.focus();
+            }
+          });
+        }
       }
 
       if (this.dropdownOpen) {
@@ -14130,6 +14256,19 @@ class AuroCombobox extends AuroElement {
         this.updateBibDialogRole();
 
         if (this.dropdown.isBibFullscreen) {
+          // Guard against spurious validation during the focus transition
+          // from trigger to bib input. Setting trigger.inert = true removes
+          // focus, which fires focusout on the child auro-input before the
+          // bib input receives focus. That focusout triggers the input's own
+          // validate(), which dispatches a composed auroFormElement-validated
+          // event. Because composed events are retargetted at each shadow DOM
+          // boundary, the event appears to originate from the combobox itself
+          // and its listener unconditionally sets this.validity — causing
+          // premature validation. This flag suppresses all validation paths
+          // (focusout handler, handleInputValueChange, validate(), and the
+          // auroFormElement-validated listener) until focus settles in the bib.
+          this._inFullscreenTransition = true;
+
           // Hide the trigger from assistive technology so VoiceOver cannot reach it
           // behind the fullscreen dialog
           this.dropdown.trigger.inert = true;
@@ -14161,6 +14300,7 @@ class AuroCombobox extends AuroElement {
           requestAnimationFrame(() => {
             requestAnimationFrame(() => {
               this.setInputFocus();
+              this._inFullscreenTransition = false;
             });
           });
         } else {
@@ -14255,7 +14395,7 @@ class AuroCombobox extends AuroElement {
    * @private
    */
   updateBibDialogRole() {
-    const bibEl = this.dropdown.bibElement?.value;
+    const bibEl = this.dropdown.bibElement && this.dropdown.bibElement.value;
     if (!bibEl) {
       return;
     }
@@ -14384,9 +14524,10 @@ class AuroCombobox extends AuroElement {
         // Announce the selection after the dropdown closes so it isn't
         // overridden by VoiceOver's "collapsed" announcement from aria-expanded.
         const selectedValue = event.detail.stringValue;
+        const announcementDelay = 300;
         setTimeout(() => {
           this.announceToScreenReader(`${selectedValue}, selected`);
-        }, 300);
+        }, announcementDelay);
       }
     });
 
@@ -14434,7 +14575,7 @@ class AuroCombobox extends AuroElement {
      * Validate every time we remove focus from the combo box.
      */
     this.addEventListener('focusout', () => {
-      if (!this.componentHasFocus) {
+      if (!this.componentHasFocus && !this._inFullscreenTransition) {
         this.validate();
       }
     });
@@ -14485,8 +14626,11 @@ class AuroCombobox extends AuroElement {
     }
     this.handleMenuOptions();
 
-    // Validate only if the value was set programmatically
-    if (!this.componentHasFocus) {
+    // Validate only if the value was set programmatically (not during user
+    // interaction). In fullscreen dialog mode, componentHasFocus returns false
+    // because focus is inside the top-layer dialog, so also check
+    // dropdownOpen and the fullscreen transition flag.
+    if (!this.componentHasFocus && !this.dropdownOpen && !this._inFullscreenTransition) {
       this.validate();
     }
 
@@ -14501,6 +14645,22 @@ class AuroCombobox extends AuroElement {
       this.hideBib();
     }
 
+    // iOS virtual keyboard retention: when in fullscreen mode, ensure the
+    // dialog opens and the bib input is focused synchronously within the
+    // input event (user gesture) chain. Without this, Lit's async update
+    // cycle delays showModal() past the user activation window, causing
+    // iOS Safari to dismiss the virtual keyboard when the fullscreen
+    // dialog opens — the user then has to tap the input again to resume
+    // typing.
+    if (this.dropdown.isBibFullscreen && this.input.value && this.input.value.length > 0) {
+      if (!this.dropdown.isPopoverVisible) {
+        this.showBib();
+      }
+      if (this.dropdown.isPopoverVisible) {
+        this.setInputFocus();
+      }
+    }
+
     this.dispatchEvent(new CustomEvent('inputValue', { detail: { value: this.inputValue } }));
   }
 
@@ -14526,23 +14686,20 @@ class AuroCombobox extends AuroElement {
       }
 
       if (evt.key === 'Tab' && this.dropdown.isPopoverVisible) {
-        if (this.dropdown.isBibFullscreen) {
-
-          // when focus is on the input, move focus back to close button with Tab key
-          if (document.activeElement.shadowRoot.activeElement === this.inputInBib) {
-            evt.preventDefault();
-            this.dropdown.focus();
-          }
-        } else {
+        // Non-fullscreen (combobox pattern per WAI-ARIA APG):
+        // Tab accepts the focused option and closes the popup, moving focus
+        // to the next focusable element on the page.
+        // https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/
+        //
+        // Fullscreen (dialog / modal pattern): Tab navigates between
+        // focusable elements inside the modal (e.g. the close button) via
+        // the native focus trap provided by showModal(). The dropdown is
+        // closed by the close button or Escape instead.
+        if (!this.dropdown.isBibFullscreen) {
           if (this.menu.optionActive && this.menu.optionActive.value) {
             this.menu.value = this.menu.optionActive.value;
           }
-
-          setTimeout(() => {
-            if (!this.componentHasFocus) {
-              this.hideBib();
-            }
-          }, 0);
+          this.hideBib();
         }
       }
 
@@ -14573,6 +14730,14 @@ class AuroCombobox extends AuroElement {
     });
 
     this.addEventListener('auroFormElement-validated', (evt) => {
+      // During the fullscreen transition, child elements (auro-input) may fire
+      // their own validation events when the trigger becomes inert and loses
+      // focus. Those composed events bubble up through shadow DOM boundaries
+      // and would incorrectly set combobox validity. Ignore them.
+      if (this._inFullscreenTransition) {
+        return;
+      }
+
       this.input.validity = evt.detail.validity;
       this.input.errorMessage = evt.detail.message;
       this.validity = evt.detail.validity;
@@ -14676,6 +14841,9 @@ class AuroCombobox extends AuroElement {
    * @param {boolean} [force=false] - Whether to force validation.
    */
   validate(force = false) {
+    if (this._inFullscreenTransition) {
+      return;
+    }
     this.validation.validate(this, force);
   }
 
@@ -14729,7 +14897,13 @@ class AuroCombobox extends AuroElement {
     }
 
     if (changedProperties.has('availableOptions')) {
-      if ((this.availableOptions.length > 0 && this.componentHasFocus) || this.menu.loading || (this.availableOptions.length === 0 && this.noMatchOption)) {
+      // dropdownOpen is set synchronously by the auroDropdown-toggled event
+      // handler during showBib() → floater.showBib() → dispatchEventDropdownToggle(),
+      // so it's already true by the time updated() runs. This prevents the else
+      // branch from calling hideBib() when the dropdown was just opened but
+      // :focus-within hasn't propagated through the top-layer dialog's nested
+      // shadow DOM boundaries.
+      if ((this.availableOptions.length > 0 && (this.componentHasFocus || this.dropdownOpen)) || this.menu.loading || (this.availableOptions.length === 0 && this.noMatchOption)) {
         this.showBib();
       } else {
         this.hideBib();
@@ -14904,6 +15078,7 @@ class AuroCombobox extends AuroElement {
             <slot @slotchange="${this.handleSlotChange}"></slot>
             <${this.inputTag}
               id="inputInBib"
+              autofocus
               @input="${this.handleInputValueChange}"
               .a11yActivedescendant="${this.dropdownOpen && this.optionActive ? this.optionActive.id : undefined}"
               .a11yControls=${`${this.dropdownId}-floater-bib`}