@aurodesignsystem/auro-library 5.2.3 → 5.3.1

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Semantic Release Automated Changelog
 
+## [5.3.1](https://github.com/AlaskaAirlines/auro-library/compare/v5.3.0...v5.3.1) (2025-07-11)
+
+
+### Bug Fixes
+
+* add contain: layout as needed to resolve issues with positioning in projects that use tailwindcss ([ad8474d](https://github.com/AlaskaAirlines/auro-library/commit/ad8474d958bcf088be880f494f0505e873819490))
+
+# [5.3.0](https://github.com/AlaskaAirlines/auro-library/compare/v5.2.3...v5.3.0) (2025-07-04)
+
+
+### Features
+
+* add event type to auroDropdown-toggled for keyboard detection ([d7ec5b7](https://github.com/AlaskaAirlines/auro-library/commit/d7ec5b755cee75d0371bf3202d5a382ce20cd47c))
+
 ## [5.2.3](https://github.com/AlaskaAirlines/auro-library/compare/v5.2.2...v5.2.3) (2025-07-02)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aurodesignsystem/auro-library",
-  "version": "5.2.3",
+  "version": "5.3.1",
   "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

@@ -231,6 +231,7 @@ export default class AuroFloatingUI {
       this.element.bib.style.left = "0px";
       this.element.bib.style.width = '';
       this.element.bib.style.height = '';
+      this.element.style.contain = '';
 
       // reset the size that was mirroring `size` css-part
       const bibContent = this.element.bib.shadowRoot.querySelector(".container");
@@ -255,6 +256,7 @@ export default class AuroFloatingUI {
       this.element.bib.style.position = '';
       this.element.bib.removeAttribute('isfullscreen');
       this.element.isBibFullscreen = false;
+      this.element.style.contain = 'layout';
     }
 
     const isChanged = this.strategy && this.strategy !== value;
@@ -313,7 +315,7 @@ export default class AuroFloatingUI {
       return;
     }
 
-    this.hideBib();
+    this.hideBib("keydown");
   }
 
   setupHideHandlers() {
@@ -338,7 +340,7 @@ export default class AuroFloatingUI {
           document.expandedAuroFormkitDropdown = null;
           document.expandedAuroFloater = this;
         } else {
-          this.hideBib();
+          this.hideBib("click");
         }
       }
     };
@@ -351,7 +353,7 @@ export default class AuroFloatingUI {
           // if something else is open, let it handle itself
           return;
         }
-        this.hideBib();
+        this.hideBib("keydown");
       }
     };
 
@@ -434,7 +436,11 @@ export default class AuroFloatingUI {
     }
   }
 
-  hideBib() {
+  /**
+   * Hides the floating UI element.
+   * @param {String} eventType - The event type that triggered the hiding action.
+   */
+  hideBib(eventType = "unknown") {
     if (!this.element.disabled && !this.element.noToggle) {
       this.lockScroll(false);
       this.element.triggerChevron?.removeAttribute('data-expanded');
@@ -445,7 +451,7 @@ export default class AuroFloatingUI {
       if (this.showing) {
         this.cleanupHideHandlers();
         this.showing = false;
-        this.dispatchEventDropdownToggle();
+        this.dispatchEventDropdownToggle(eventType);
       }
     }
     document.expandedAuroFloater = null;
@@ -454,11 +460,13 @@ export default class AuroFloatingUI {
   /**
    * @private
    * @returns {void} Dispatches event with an object showing the state of the dropdown.
+   * @param {String} eventType - The event type that triggered the toggle action.
    */
-  dispatchEventDropdownToggle() {
+  dispatchEventDropdownToggle(eventType) {
     const event = new CustomEvent(this.eventPrefix ? `${this.eventPrefix}-toggled` : 'toggled', {
       detail: {
         expanded: this.showing,
+        eventType: eventType || "unknown",
       },
       composed: true
     });
@@ -468,7 +476,7 @@ export default class AuroFloatingUI {
 
   handleClick() {
     if (this.element.isPopoverVisible) {
-      this.hideBib();
+      this.hideBib("click");
     } else {
       this.showBib();
     }
@@ -504,7 +512,7 @@ export default class AuroFloatingUI {
           break;
         case 'mouseleave':
           if (this.element.hoverToggle) {
-            this.hideBib();
+            this.hideBib("mouseleave");
           }
           break;
         case 'focus':