@aurodesignsystem/auro-library 5.13.0 → 5.13.2

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # Semantic Release Automated Changelog
 
+## [5.13.2](https://github.com/AlaskaAirlines/auro-library/compare/v5.13.1...v5.13.2) (2026-07-28)
+
+
+### Bug Fixes
+
+* track visualViewport continuously during scroll lock ([631cf89](https://github.com/AlaskaAirlines/auro-library/commit/631cf89627fd4053b0ae8252736eb1db78919843))
+
+## [5.13.1](https://github.com/AlaskaAirlines/auro-library/compare/v5.13.0...v5.13.1) (2026-07-10)
+
+
+### Bug Fixes
+
+* **floatingUI:** handle focus loss in Chrome during popover promotion ([511b2a0](https://github.com/AlaskaAirlines/auro-library/commit/511b2a04ffb28b421d183f1a192fea59e7082c4c))
+* **floatingUI:** update hideBib method to differentiate focus loss events ([632366f](https://github.com/AlaskaAirlines/auro-library/commit/632366f24b2aa66455c9024f0538a588e7e8f9d1))
+
 # [5.13.0](https://github.com/AlaskaAirlines/auro-library/compare/v5.12.3...v5.13.0) (2026-05-14)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aurodesignsystem/auro-library",
-  "version": "5.13.0",
+  "version": "5.13.2",
   "description": "This repository holds shared scripts, utilities, and workflows utilized across repositories along the Auro Design System.",
   "repository": {
     "type": "git",

package/scripts/runtime/floatingUI.mjs

@@ -339,15 +339,57 @@ export default 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 =
@@ -439,7 +481,7 @@ export default 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;
@@ -526,12 +568,40 @@ export default class AuroFloatingUI {
       return;
     }
 
+    // Chrome-specific: during popover top-layer promotion after a click on a
+    // slotted focusable, :focus-within can briefly evaluate false while the
+    // active element is still structurally inside the trigger/bib. Fall back
+    // to a shadow-piercing ancestry walk from the deep active element before
+    // treating this as a real focus loss.
+    try {
+      let active = document.activeElement;
+      while (active && active.shadowRoot && active.shadowRoot.activeElement) {
+        active = active.shadowRoot.activeElement;
+      }
+      const targets = [element, element.trigger, element.bib].filter(Boolean);
+      let node = active;
+      while (node) {
+        if (targets.includes(node)) {
+          return;
+        }
+        node =
+          node.parentElement ||
+          (node.getRootNode && node.getRootNode().host) ||
+          null;
+      }
+    } catch (e) {
+      // Defensive: fall through to the existing close path if traversal fails.
+    }
+
     // if fullscreen bib is in fullscreen mode, do not close
     if (element.bib.hasAttribute("isfullscreen")) {
       return;
     }
 
-    this.hideBib("keydown");
+    // eventType "focusloss" distinguishes a Tab/click-driven close from an
+    // Escape keydown close. Consumers use this to decide whether to restore
+    // focus to the trigger (Escape) or let it advance naturally (Tab).
+    this.hideBib("focusloss");
   }
 
   setupHideHandlers() {

package/scripts/runtime/floatingUI.test.js

@@ -86,7 +86,7 @@ describe("AuroFloatingUI", () => {
     expect(hideBibSpy.called).to.be.false;
   });
 
-  it("hides with a keydown event when the host no longer has focus", () => {
+  it("hides with a focus loss event when the host no longer has focus", () => {
     const checkedSelectors = [];
 
     sinon.stub(host, "matches").callsFake((selector) => {
@@ -97,7 +97,7 @@ describe("AuroFloatingUI", () => {
     floatingUI.handleFocusLoss();
 
     expect(checkedSelectors).to.deep.equal([":focus", ":focus-within"]);
-    expect(hideBibSpy.calledOnceWithExactly("keydown")).to.be.true;
+    expect(hideBibSpy.calledOnceWithExactly("focusloss")).to.be.true;
   });
 
   it("no-ops safely when element is not set", () => {