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

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

@@ -1442,7 +1442,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$2 {
   }
 };
 
-var formkitVersion$1 = '202602201708';
+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.
@@ -1827,7 +1827,7 @@ class AuroCounter extends i$2 {
             aria-valuemax="${this.max}" 
             aria-valuemin="${this.min}" 
             aria-valuenow="${this.value}"
-            aria-valuetext="${this.value !== undefined ? this.value : this.min}"
+            aria-valuetext="'${this.value !== undefined ? this.value : this.min}'"
             role="spinbutton" 
             tabindex="${this.disabled ? '-1' : '0'}" 
           >
@@ -4696,7 +4696,7 @@ let p$2 = class p{registerComponent(t,a){customElements.get(t)||customElements.d
 
 var iconVersion$1 = '9.1.2';
 
-var styleCss$2 = i$5`: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 = i$5`: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 = i$5`.container{background-color:var(--ds-auro-dropdownbib-container-color);box-shadow:var(--ds-auro-dropdownbib-boxshadow-color);color:var(--ds-auro-dropdownbib-text-color)}`;
 
@@ -4704,6 +4704,8 @@ var tokensCss$1 = i$5`: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-';
@@ -4879,22 +4881,63 @@ class AuroDropdownBib extends i$2 {
     // 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', {
@@ -4918,9 +4961,55 @@ class AuroDropdownBib extends i$2 {
   }
 
   /**
-   * 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) {
@@ -4937,6 +5026,8 @@ class AuroDropdownBib extends i$2 {
 
         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
@@ -4952,6 +5043,7 @@ class AuroDropdownBib extends i$2 {
   close() {
     const dialog = this.shadowRoot.querySelector('dialog');
     if (dialog && dialog.open) {
+      this._unlockTouchScroll();
       dialog.close();
     }
   }
@@ -5217,7 +5309,7 @@ class AuroHelpText extends i$2 {
   }
 }
 
-var formkitVersion = '202602201708';
+var formkitVersion = '202602260152';
 
 let AuroElement$1 = class AuroElement extends i$2 {
   static get properties() {
@@ -5490,6 +5582,18 @@ class AuroDropdown extends AuroElement$1 {
    */
   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);
+    }
   }
 
   /**
@@ -5876,6 +5980,14 @@ class AuroDropdown extends AuroElement$1 {
         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);
+    }
   }
 
   /**

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

@@ -1442,7 +1442,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$2 {
   }
 };
 
-var formkitVersion$1 = '202602201708';
+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.
@@ -1827,7 +1827,7 @@ class AuroCounter extends i$2 {
             aria-valuemax="${this.max}" 
             aria-valuemin="${this.min}" 
             aria-valuenow="${this.value}"
-            aria-valuetext="${this.value !== undefined ? this.value : this.min}"
+            aria-valuetext="'${this.value !== undefined ? this.value : this.min}'"
             role="spinbutton" 
             tabindex="${this.disabled ? '-1' : '0'}" 
           >
@@ -4696,7 +4696,7 @@ let p$2 = class p{registerComponent(t,a){customElements.get(t)||customElements.d
 
 var iconVersion$1 = '9.1.2';
 
-var styleCss$2 = i$5`: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 = i$5`: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 = i$5`.container{background-color:var(--ds-auro-dropdownbib-container-color);box-shadow:var(--ds-auro-dropdownbib-boxshadow-color);color:var(--ds-auro-dropdownbib-text-color)}`;
 
@@ -4704,6 +4704,8 @@ var tokensCss$1 = i$5`: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-';
@@ -4879,22 +4881,63 @@ class AuroDropdownBib extends i$2 {
     // 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', {
@@ -4918,9 +4961,55 @@ class AuroDropdownBib extends i$2 {
   }
 
   /**
-   * 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) {
@@ -4937,6 +5026,8 @@ class AuroDropdownBib extends i$2 {
 
         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
@@ -4952,6 +5043,7 @@ class AuroDropdownBib extends i$2 {
   close() {
     const dialog = this.shadowRoot.querySelector('dialog');
     if (dialog && dialog.open) {
+      this._unlockTouchScroll();
       dialog.close();
     }
   }
@@ -5217,7 +5309,7 @@ class AuroHelpText extends i$2 {
   }
 }
 
-var formkitVersion = '202602201708';
+var formkitVersion = '202602260152';
 
 let AuroElement$1 = class AuroElement extends i$2 {
   static get properties() {
@@ -5490,6 +5582,18 @@ class AuroDropdown extends AuroElement$1 {
    */
   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);
+    }
   }
 
   /**
@@ -5876,6 +5980,14 @@ class AuroDropdown extends AuroElement$1 {
         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);
+    }
   }
 
   /**