@aurodesignsystem-dev/auro-formkit 0.0.0-pr1595.4 → 0.0.0-pr1595.5

package/components/dropdown/demo/getting-started.min.js

@@ -2108,15 +2108,57 @@ class AuroFloatingUI {
         document.body.style.top = `-${this._savedScrollY}px`;
         document.body.style.width = "100%";
 
-        // Move `bib` by the amount the viewport is shifted to stay aligned in fullscreen.
-        if (element?.bib && window?.visualViewport?.offsetTop) {
-          element.bib.style.transform = `translateY(${window?.visualViewport?.offsetTop}px)`;
+        // Keep the bib aligned with the visual viewport as the VKB opens.
+        // A one-shot offsetTop check at lock time is stale by the time the user
+        // taps an input mid-drawer — iOS then pans visualViewport upward and the
+        // bib drifts off-screen. Listen continuously so the transform tracks the pan.
+        // RAF-throttled to avoid a style recalc on every scroll tick during the
+        // keyboard animation; the pending frame is canceled on unlock so it cannot
+        // reapply a translate after bibTransform has been restored.
+        if (window.visualViewport) {
+          this._viewportRafId = undefined;
+          this._viewportHandler = () => {
+            if (this._viewportRafId !== undefined) {
+              return;
+            }
+            this._viewportRafId = requestAnimationFrame(() => {
+              this._viewportRafId = undefined;
+              if (element?.bib) {
+                element.bib.style.transform = `translateY(${window.visualViewport.offsetTop}px)`;
+              }
+            });
+          };
+          window.visualViewport.addEventListener(
+            "resize",
+            this._viewportHandler,
+          );
+          window.visualViewport.addEventListener(
+            "scroll",
+            this._viewportHandler,
+          );
+          this._viewportHandler();
         }
 
         this.lockTouchScroll(true);
       }
     } else {
       if (this._scrollLocked) {
+        if (this._viewportHandler && window.visualViewport) {
+          window.visualViewport.removeEventListener(
+            "resize",
+            this._viewportHandler,
+          );
+          window.visualViewport.removeEventListener(
+            "scroll",
+            this._viewportHandler,
+          );
+          this._viewportHandler = undefined;
+        }
+        if (this._viewportRafId !== undefined) {
+          cancelAnimationFrame(this._viewportRafId);
+          this._viewportRafId = undefined;
+        }
+
         document.documentElement.style.scrollbarGutter =
           this._savedScrollStyles?.rootScrollbarGutter ?? "";
         document.documentElement.style.overflow =
@@ -2208,7 +2250,7 @@ class AuroFloatingUI {
         bibContent.style.width = "";
         bibContent.style.height = "";
         bibContent.style.maxWidth = "";
-        bibContent.style.maxHeight = `${window?.visualViewport?.height}px`;
+        bibContent.style.maxHeight = "";
         this.configureTrial = 0;
       } else if (this.configureTrial < MAX_CONFIGURATION_COUNT) {
         this.configureTrial += 1;
@@ -2505,6 +2547,24 @@ class AuroFloatingUI {
       if (!this.showing) {
         if (!element.modal) {
           this.setupHideHandlers();
+        } else {
+          if (this.keyDownHandler) {
+            document.removeEventListener("keydown", this.keyDownHandler);
+          }
+          this.keyDownHandler = (evt) => {
+            if (evt.key === "Escape" && element.isPopoverVisible) {
+              // Intercept at keydown so CloseWatcher never sees the keystroke.
+              // Canceling `cancel` alone is insufficient — a second Esc with no
+              // intervening user activation triggers the anti-trap and fires `close`
+              // directly, bypassing any `cancel` preventDefault (AB#1613688).
+              // stopImmediatePropagation is intentional: it prevents other document
+              // keydown handlers (e.g. consumer code, auro-dialog) from also acting
+              // on Escape while the modal owns the key.
+              evt.preventDefault();
+              evt.stopImmediatePropagation();
+            }
+          };
+          document.addEventListener("keydown", this.keyDownHandler);
         }
         this.showing = true;
         element.isPopoverVisible = true;
@@ -3809,7 +3869,7 @@ let AuroHelpText$1 = class AuroHelpText extends i {
   }
 };
 
-var formkitVersion$1 = '202608300149';
+var formkitVersion$1 = '202608300227';
 
 /**
  * AuroElement is the shared base class for layout-aware Auro form components.
@@ -17678,7 +17738,7 @@ class AuroHelpText extends i {
   }
 }
 
-var formkitVersion = '202608300149';
+var formkitVersion = '202608300227';
 
 // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.

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

@@ -2135,15 +2135,57 @@ class AuroFloatingUI {
         document.body.style.top = `-${this._savedScrollY}px`;
         document.body.style.width = "100%";
 
-        // Move `bib` by the amount the viewport is shifted to stay aligned in fullscreen.
-        if (element?.bib && window?.visualViewport?.offsetTop) {
-          element.bib.style.transform = `translateY(${window?.visualViewport?.offsetTop}px)`;
+        // Keep the bib aligned with the visual viewport as the VKB opens.
+        // A one-shot offsetTop check at lock time is stale by the time the user
+        // taps an input mid-drawer — iOS then pans visualViewport upward and the
+        // bib drifts off-screen. Listen continuously so the transform tracks the pan.
+        // RAF-throttled to avoid a style recalc on every scroll tick during the
+        // keyboard animation; the pending frame is canceled on unlock so it cannot
+        // reapply a translate after bibTransform has been restored.
+        if (window.visualViewport) {
+          this._viewportRafId = undefined;
+          this._viewportHandler = () => {
+            if (this._viewportRafId !== undefined) {
+              return;
+            }
+            this._viewportRafId = requestAnimationFrame(() => {
+              this._viewportRafId = undefined;
+              if (element?.bib) {
+                element.bib.style.transform = `translateY(${window.visualViewport.offsetTop}px)`;
+              }
+            });
+          };
+          window.visualViewport.addEventListener(
+            "resize",
+            this._viewportHandler,
+          );
+          window.visualViewport.addEventListener(
+            "scroll",
+            this._viewportHandler,
+          );
+          this._viewportHandler();
         }
 
         this.lockTouchScroll(true);
       }
     } else {
       if (this._scrollLocked) {
+        if (this._viewportHandler && window.visualViewport) {
+          window.visualViewport.removeEventListener(
+            "resize",
+            this._viewportHandler,
+          );
+          window.visualViewport.removeEventListener(
+            "scroll",
+            this._viewportHandler,
+          );
+          this._viewportHandler = undefined;
+        }
+        if (this._viewportRafId !== undefined) {
+          cancelAnimationFrame(this._viewportRafId);
+          this._viewportRafId = undefined;
+        }
+
         document.documentElement.style.scrollbarGutter =
           this._savedScrollStyles?.rootScrollbarGutter ?? "";
         document.documentElement.style.overflow =
@@ -2235,7 +2277,7 @@ class AuroFloatingUI {
         bibContent.style.width = "";
         bibContent.style.height = "";
         bibContent.style.maxWidth = "";
-        bibContent.style.maxHeight = `${window?.visualViewport?.height}px`;
+        bibContent.style.maxHeight = "";
         this.configureTrial = 0;
       } else if (this.configureTrial < MAX_CONFIGURATION_COUNT) {
         this.configureTrial += 1;
@@ -2532,6 +2574,24 @@ class AuroFloatingUI {
       if (!this.showing) {
         if (!element.modal) {
           this.setupHideHandlers();
+        } else {
+          if (this.keyDownHandler) {
+            document.removeEventListener("keydown", this.keyDownHandler);
+          }
+          this.keyDownHandler = (evt) => {
+            if (evt.key === "Escape" && element.isPopoverVisible) {
+              // Intercept at keydown so CloseWatcher never sees the keystroke.
+              // Canceling `cancel` alone is insufficient — a second Esc with no
+              // intervening user activation triggers the anti-trap and fires `close`
+              // directly, bypassing any `cancel` preventDefault (AB#1613688).
+              // stopImmediatePropagation is intentional: it prevents other document
+              // keydown handlers (e.g. consumer code, auro-dialog) from also acting
+              // on Escape while the modal owns the key.
+              evt.preventDefault();
+              evt.stopImmediatePropagation();
+            }
+          };
+          document.addEventListener("keydown", this.keyDownHandler);
         }
         this.showing = true;
         element.isPopoverVisible = true;
@@ -3836,7 +3896,7 @@ class AuroHelpText extends i {
   }
 }
 
-var formkitVersion = '202608300149';
+var formkitVersion = '202608300227';
 
 /**
  * AuroElement is the shared base class for layout-aware Auro form components.

package/components/dropdown/dist/index.js

@@ -2071,15 +2071,57 @@ class AuroFloatingUI {
         document.body.style.top = `-${this._savedScrollY}px`;
         document.body.style.width = "100%";
 
-        // Move `bib` by the amount the viewport is shifted to stay aligned in fullscreen.
-        if (element?.bib && window?.visualViewport?.offsetTop) {
-          element.bib.style.transform = `translateY(${window?.visualViewport?.offsetTop}px)`;
+        // Keep the bib aligned with the visual viewport as the VKB opens.
+        // A one-shot offsetTop check at lock time is stale by the time the user
+        // taps an input mid-drawer — iOS then pans visualViewport upward and the
+        // bib drifts off-screen. Listen continuously so the transform tracks the pan.
+        // RAF-throttled to avoid a style recalc on every scroll tick during the
+        // keyboard animation; the pending frame is canceled on unlock so it cannot
+        // reapply a translate after bibTransform has been restored.
+        if (window.visualViewport) {
+          this._viewportRafId = undefined;
+          this._viewportHandler = () => {
+            if (this._viewportRafId !== undefined) {
+              return;
+            }
+            this._viewportRafId = requestAnimationFrame(() => {
+              this._viewportRafId = undefined;
+              if (element?.bib) {
+                element.bib.style.transform = `translateY(${window.visualViewport.offsetTop}px)`;
+              }
+            });
+          };
+          window.visualViewport.addEventListener(
+            "resize",
+            this._viewportHandler,
+          );
+          window.visualViewport.addEventListener(
+            "scroll",
+            this._viewportHandler,
+          );
+          this._viewportHandler();
         }
 
         this.lockTouchScroll(true);
       }
     } else {
       if (this._scrollLocked) {
+        if (this._viewportHandler && window.visualViewport) {
+          window.visualViewport.removeEventListener(
+            "resize",
+            this._viewportHandler,
+          );
+          window.visualViewport.removeEventListener(
+            "scroll",
+            this._viewportHandler,
+          );
+          this._viewportHandler = undefined;
+        }
+        if (this._viewportRafId !== undefined) {
+          cancelAnimationFrame(this._viewportRafId);
+          this._viewportRafId = undefined;
+        }
+
         document.documentElement.style.scrollbarGutter =
           this._savedScrollStyles?.rootScrollbarGutter ?? "";
         document.documentElement.style.overflow =
@@ -2171,7 +2213,7 @@ class AuroFloatingUI {
         bibContent.style.width = "";
         bibContent.style.height = "";
         bibContent.style.maxWidth = "";
-        bibContent.style.maxHeight = `${window?.visualViewport?.height}px`;
+        bibContent.style.maxHeight = "";
         this.configureTrial = 0;
       } else if (this.configureTrial < MAX_CONFIGURATION_COUNT) {
         this.configureTrial += 1;
@@ -2468,6 +2510,24 @@ class AuroFloatingUI {
       if (!this.showing) {
         if (!element.modal) {
           this.setupHideHandlers();
+        } else {
+          if (this.keyDownHandler) {
+            document.removeEventListener("keydown", this.keyDownHandler);
+          }
+          this.keyDownHandler = (evt) => {
+            if (evt.key === "Escape" && element.isPopoverVisible) {
+              // Intercept at keydown so CloseWatcher never sees the keystroke.
+              // Canceling `cancel` alone is insufficient — a second Esc with no
+              // intervening user activation triggers the anti-trap and fires `close`
+              // directly, bypassing any `cancel` preventDefault (AB#1613688).
+              // stopImmediatePropagation is intentional: it prevents other document
+              // keydown handlers (e.g. consumer code, auro-dialog) from also acting
+              // on Escape while the modal owns the key.
+              evt.preventDefault();
+              evt.stopImmediatePropagation();
+            }
+          };
+          document.addEventListener("keydown", this.keyDownHandler);
         }
         this.showing = true;
         element.isPopoverVisible = true;
@@ -3741,7 +3801,7 @@ class AuroHelpText extends LitElement {
   }
 }
 
-var formkitVersion = '202608300149';
+var formkitVersion = '202608300227';
 
 /**
  * AuroElement is the shared base class for layout-aware Auro form components.

package/components/dropdown/dist/registered.js

@@ -2071,15 +2071,57 @@ class AuroFloatingUI {
         document.body.style.top = `-${this._savedScrollY}px`;
         document.body.style.width = "100%";
 
-        // Move `bib` by the amount the viewport is shifted to stay aligned in fullscreen.
-        if (element?.bib && window?.visualViewport?.offsetTop) {
-          element.bib.style.transform = `translateY(${window?.visualViewport?.offsetTop}px)`;
+        // Keep the bib aligned with the visual viewport as the VKB opens.
+        // A one-shot offsetTop check at lock time is stale by the time the user
+        // taps an input mid-drawer — iOS then pans visualViewport upward and the
+        // bib drifts off-screen. Listen continuously so the transform tracks the pan.
+        // RAF-throttled to avoid a style recalc on every scroll tick during the
+        // keyboard animation; the pending frame is canceled on unlock so it cannot
+        // reapply a translate after bibTransform has been restored.
+        if (window.visualViewport) {
+          this._viewportRafId = undefined;
+          this._viewportHandler = () => {
+            if (this._viewportRafId !== undefined) {
+              return;
+            }
+            this._viewportRafId = requestAnimationFrame(() => {
+              this._viewportRafId = undefined;
+              if (element?.bib) {
+                element.bib.style.transform = `translateY(${window.visualViewport.offsetTop}px)`;
+              }
+            });
+          };
+          window.visualViewport.addEventListener(
+            "resize",
+            this._viewportHandler,
+          );
+          window.visualViewport.addEventListener(
+            "scroll",
+            this._viewportHandler,
+          );
+          this._viewportHandler();
         }
 
         this.lockTouchScroll(true);
       }
     } else {
       if (this._scrollLocked) {
+        if (this._viewportHandler && window.visualViewport) {
+          window.visualViewport.removeEventListener(
+            "resize",
+            this._viewportHandler,
+          );
+          window.visualViewport.removeEventListener(
+            "scroll",
+            this._viewportHandler,
+          );
+          this._viewportHandler = undefined;
+        }
+        if (this._viewportRafId !== undefined) {
+          cancelAnimationFrame(this._viewportRafId);
+          this._viewportRafId = undefined;
+        }
+
         document.documentElement.style.scrollbarGutter =
           this._savedScrollStyles?.rootScrollbarGutter ?? "";
         document.documentElement.style.overflow =
@@ -2171,7 +2213,7 @@ class AuroFloatingUI {
         bibContent.style.width = "";
         bibContent.style.height = "";
         bibContent.style.maxWidth = "";
-        bibContent.style.maxHeight = `${window?.visualViewport?.height}px`;
+        bibContent.style.maxHeight = "";
         this.configureTrial = 0;
       } else if (this.configureTrial < MAX_CONFIGURATION_COUNT) {
         this.configureTrial += 1;
@@ -2468,6 +2510,24 @@ class AuroFloatingUI {
       if (!this.showing) {
         if (!element.modal) {
           this.setupHideHandlers();
+        } else {
+          if (this.keyDownHandler) {
+            document.removeEventListener("keydown", this.keyDownHandler);
+          }
+          this.keyDownHandler = (evt) => {
+            if (evt.key === "Escape" && element.isPopoverVisible) {
+              // Intercept at keydown so CloseWatcher never sees the keystroke.
+              // Canceling `cancel` alone is insufficient — a second Esc with no
+              // intervening user activation triggers the anti-trap and fires `close`
+              // directly, bypassing any `cancel` preventDefault (AB#1613688).
+              // stopImmediatePropagation is intentional: it prevents other document
+              // keydown handlers (e.g. consumer code, auro-dialog) from also acting
+              // on Escape while the modal owns the key.
+              evt.preventDefault();
+              evt.stopImmediatePropagation();
+            }
+          };
+          document.addEventListener("keydown", this.keyDownHandler);
         }
         this.showing = true;
         element.isPopoverVisible = true;
@@ -3741,7 +3801,7 @@ class AuroHelpText extends LitElement {
   }
 }
 
-var formkitVersion = '202608300149';
+var formkitVersion = '202608300227';
 
 /**
  * AuroElement is the shared base class for layout-aware Auro form components.