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

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

@@ -51,6 +51,18 @@ function inDialogExample() {
   });
 }
 
+function inDrawerExample() {
+  document.querySelector("#select-drawer-opener").addEventListener("click", () => {
+    const drawer = document.querySelector("#select-drawer");
+
+    if (drawer.hasAttribute('open')) {
+      drawer.removeAttribute('open');
+    } else {
+      drawer.setAttribute('open', true);
+    }
+  });
+}
+
 function resetStateExample() {
   const elem = document.querySelector('#resetStateExample');
 
@@ -1405,6 +1417,10 @@ const selectKeyboardStrategy = {
     if (!ctx.isExpanded) {
       return;
     }
+
+    // Prevent the Escape key from bubbling up and closing any parent dialogs / drawers / popups
+    evt.stopPropagation();
+
     component.dropdown.hide();
   },
 
@@ -3367,11 +3383,19 @@ class AuroFloatingUI {
    * This ensures that the bib content has the same dimensions as the sizer element.
    */
   mirrorSize() {
+    const element = this.element;
+    if (!element) {
+      return;
+    }
+
     // mirror the boxsize from bibSizer
-    if (this.element.bibSizer && this.element.matchWidth) {
-      const sizerStyle = window.getComputedStyle(this.element.bibSizer);
-      const bibContent =
-        this.element.bib.shadowRoot.querySelector(".container");
+    if (element.bibSizer && element.matchWidth && element.bib?.shadowRoot) {
+      const sizerStyle = window.getComputedStyle(element.bibSizer);
+      const bibContent = element.bib.shadowRoot.querySelector(".container");
+      if (!bibContent) {
+        return;
+      }
+
       if (sizerStyle.width !== "0px") {
         bibContent.style.width = sizerStyle.width;
       }
@@ -3393,9 +3417,14 @@ class AuroFloatingUI {
    * @returns {String} The positioning strategy, one of 'fullscreen', 'floating', 'cover'.
    */
   getPositioningStrategy() {
+    const element = this.element;
+    if (!element) {
+      return "floating";
+    }
+
     const breakpoint =
-      this.element.bib.mobileFullscreenBreakpoint ||
-      this.element.floaterConfig?.fullscreenBreakpoint;
+      element.bib?.mobileFullscreenBreakpoint ||
+      element.floaterConfig?.fullscreenBreakpoint;
     switch (this.behavior) {
       case "tooltip":
         return "floating";
@@ -3406,9 +3435,9 @@ class AuroFloatingUI {
             `(max-width: ${breakpoint})`,
           ).matches;
 
-          this.element.expanded = smallerThanBreakpoint;
+          element.expanded = smallerThanBreakpoint;
         }
-        if (this.element.nested) {
+        if (element.nested) {
           return "cover";
         }
         return "fullscreen";
@@ -3438,42 +3467,65 @@ class AuroFloatingUI {
    * and applies the calculated position to the bib's style.
    */
   position() {
+    const element = this.element;
+    if (!element) {
+      return;
+    }
+
     const strategy = this.getPositioningStrategy();
     this.configureBibStrategy(strategy);
 
     if (strategy === "floating") {
+      if (!element.trigger || !element.bib) {
+        return;
+      }
+
       this.mirrorSize();
       // Define the middlware for the floater configuration
       const middleware = [
-        offset(this.element.floaterConfig?.offset || 0),
-        ...(this.element.floaterConfig?.shift ? [shift()] : []), // Add shift middleware if shift is enabled.
-        ...(this.element.floaterConfig?.flip ? [flip()] : []), // Add flip middleware if flip is enabled.
-        ...(this.element.floaterConfig?.autoPlacement ? [autoPlacement()] : []), // Add autoPlacement middleware if autoPlacement is enabled.
+        offset(element.floaterConfig?.offset || 0),
+        ...(element.floaterConfig?.shift ? [shift()] : []), // Add shift middleware if shift is enabled.
+        ...(element.floaterConfig?.flip ? [flip()] : []), // Add flip middleware if flip is enabled.
+        ...(element.floaterConfig?.autoPlacement ? [autoPlacement()] : []), // Add autoPlacement middleware if autoPlacement is enabled.
       ];
 
       // Compute the position of the bib
-      computePosition(this.element.trigger, this.element.bib, {
-        strategy: this.element.floaterConfig?.strategy || "fixed",
-        placement: this.element.floaterConfig?.placement,
+      computePosition(element.trigger, element.bib, {
+        strategy: element.floaterConfig?.strategy || "fixed",
+        placement: element.floaterConfig?.placement,
         middleware: middleware || [],
       }).then(({ x, y }) => {
         // eslint-disable-line id-length
-        Object.assign(this.element.bib.style, {
+        const currentElement = this.element;
+        if (!currentElement?.bib) {
+          return;
+        }
+
+        Object.assign(currentElement.bib.style, {
           left: `${x}px`,
           top: `${y}px`,
         });
       });
     } else if (strategy === "cover") {
+      if (!element.parentNode || !element.bib) {
+        return;
+      }
+
       // Compute the position of the bib
-      computePosition(this.element.parentNode, this.element.bib, {
+      computePosition(element.parentNode, element.bib, {
         placement: "bottom-start",
       }).then(({ x, y }) => {
         // eslint-disable-line id-length
-        Object.assign(this.element.bib.style, {
+        const currentElement = this.element;
+        if (!currentElement?.bib || !currentElement.parentNode) {
+          return;
+        }
+
+        Object.assign(currentElement.bib.style, {
           left: `${x}px`,
-          top: `${y - this.element.parentNode.offsetHeight}px`,
-          width: `${this.element.parentNode.offsetWidth}px`,
-          height: `${this.element.parentNode.offsetHeight}px`,
+          top: `${y - currentElement.parentNode.offsetHeight}px`,
+          width: `${currentElement.parentNode.offsetWidth}px`,
+          height: `${currentElement.parentNode.offsetHeight}px`,
         });
       });
     }
@@ -3485,11 +3537,17 @@ class AuroFloatingUI {
    * @param {Boolean} lock - If true, locks the body's scrolling functionlity; otherwise, unlock.
    */
   lockScroll(lock = true) {
+    const element = this.element;
+
     if (lock) {
+      if (!element?.bib) {
+        return;
+      }
+
       document.body.style.overflow = "hidden"; // hide body's scrollbar
 
       // Move `bib` by the amount the viewport is shifted to stay aligned in fullscreen.
-      this.element.bib.style.transform = `translateY(${window?.visualViewport?.offsetTop}px)`;
+      element.bib.style.transform = `translateY(${window?.visualViewport?.offsetTop}px)`;
     } else {
       document.body.style.overflow = "";
     }
@@ -3505,20 +3563,24 @@ class AuroFloatingUI {
    * @param {string} strategy - The positioning strategy ('fullscreen' or 'floating').
    */
   configureBibStrategy(value) {
+    const element = this.element;
+    if (!element?.bib) {
+      return;
+    }
+
     if (value === "fullscreen") {
-      this.element.isBibFullscreen = true;
+      element.isBibFullscreen = true;
       // reset the prev position
-      this.element.bib.setAttribute("isfullscreen", "");
-      this.element.bib.style.position = "fixed";
-      this.element.bib.style.top = "0px";
-      this.element.bib.style.left = "0px";
-      this.element.bib.style.width = "";
-      this.element.bib.style.height = "";
-      this.element.style.contain = "";
+      element.bib.setAttribute("isfullscreen", "");
+      element.bib.style.position = "fixed";
+      element.bib.style.top = "0px";
+      element.bib.style.left = "0px";
+      element.bib.style.width = "";
+      element.bib.style.height = "";
+      element.style.contain = "";
 
       // reset the size that was mirroring `size` css-part
-      const bibContent =
-        this.element.bib.shadowRoot.querySelector(".container");
+      const bibContent = element.bib.shadowRoot?.querySelector(".container");
       if (bibContent) {
         bibContent.style.width = "";
         bibContent.style.height = "";
@@ -3533,14 +3595,14 @@ class AuroFloatingUI {
         }, 0);
       }
 
-      if (this.element.isPopoverVisible) {
+      if (element.isPopoverVisible) {
         this.lockScroll(true);
       }
     } else {
-      this.element.bib.style.position = "";
-      this.element.bib.removeAttribute("isfullscreen");
-      this.element.isBibFullscreen = false;
-      this.element.style.contain = "layout";
+      element.bib.style.position = "";
+      element.bib.removeAttribute("isfullscreen");
+      element.isBibFullscreen = false;
+      element.style.contain = "layout";
     }
 
     const isChanged = this.strategy && this.strategy !== value;
@@ -3558,16 +3620,21 @@ class AuroFloatingUI {
         },
       );
 
-      this.element.dispatchEvent(event);
+      element.dispatchEvent(event);
     }
   }
 
   updateState() {
-    const isVisible = this.element.isPopoverVisible;
+    const element = this.element;
+    if (!element) {
+      return;
+    }
+
+    const isVisible = element.isPopoverVisible;
     if (!isVisible) {
       this.cleanupHideHandlers();
       try {
-        this.element.cleanup?.();
+        element.cleanup?.();
       } catch (error) {
         // Do nothing
       }
@@ -3583,28 +3650,30 @@ class AuroFloatingUI {
    * If not, and if the bib isn't in fullscreen mode with focus lost, it hides the bib.
    */
   handleFocusLoss() {
+    const element = this.element;
+    if (!element?.bib) {
+      return;
+    }
+
     // if mouse is being pressed, skip and let click event to handle the action
     if (AuroFloatingUI.isMousePressed) {
       return;
     }
 
     if (
-      this.element.noHideOnThisFocusLoss ||
-      this.element.hasAttribute("noHideOnThisFocusLoss")
+      element.noHideOnThisFocusLoss ||
+      element.hasAttribute("noHideOnThisFocusLoss")
     ) {
       return;
     }
 
     // if focus is still inside of trigger or bib, do not close
-    if (
-      this.element.matches(":focus") ||
-      this.element.matches(":focus-within")
-    ) {
+    if (element.matches(":focus") || element.matches(":focus-within")) {
       return;
     }
 
     // if fullscreen bib is in fullscreen mode, do not close
-    if (this.element.bib.hasAttribute("isfullscreen")) {
+    if (element.bib.hasAttribute("isfullscreen")) {
       return;
     }
 
@@ -3612,23 +3681,33 @@ class AuroFloatingUI {
   }
 
   setupHideHandlers() {
+    const element = this.element;
+    if (!element) {
+      return;
+    }
+
     // Define handlers & store references
     this.focusHandler = () => this.handleFocusLoss();
 
     this.clickHandler = (evt) => {
+      const element = this.element;
+      if (!element?.bib) {
+        return;
+      }
+
       // When the bib is fullscreen (modal dialog), don't close on outside
       // clicks. VoiceOver's synthetic click events inside a top-layer modal
       // <dialog> may not include the bib in composedPath(), causing false
       // positives. This mirrors the fullscreen guard in handleFocusLoss().
-      if (this.element.bib && this.element.bib.hasAttribute("isfullscreen")) {
+      if (element.bib.hasAttribute("isfullscreen")) {
         return;
       }
 
       if (
-        (!evt.composedPath().includes(this.element.trigger) &&
-          !evt.composedPath().includes(this.element.bib)) ||
-        (this.element.bib.backdrop &&
-          evt.composedPath().includes(this.element.bib.backdrop))
+        (!evt.composedPath().includes(element.trigger) &&
+          !evt.composedPath().includes(element.bib)) ||
+        (element.bib.backdrop &&
+          evt.composedPath().includes(element.bib.backdrop))
       ) {
         const existedVisibleFloatingUI =
           document.expandedAuroFormkitDropdown || document.expandedAuroFloater;
@@ -3649,7 +3728,12 @@ class AuroFloatingUI {
 
     // ESC key handler
     this.keyDownHandler = (evt) => {
-      if (evt.key === "Escape" && this.element.isPopoverVisible) {
+      const element = this.element;
+      if (!element) {
+        return;
+      }
+
+      if (evt.key === "Escape" && element.isPopoverVisible) {
         const existedVisibleFloatingUI =
           document.expandedAuroFormkitDropdown || document.expandedAuroFloater;
         if (
@@ -3706,6 +3790,10 @@ class AuroFloatingUI {
   }
 
   updateCurrentExpandedDropdown() {
+    if (!this.element) {
+      return;
+    }
+
     // Close any other dropdown that is already open
     const existedVisibleFloatingUI =
       document.expandedAuroFormkitDropdown || document.expandedAuroFloater;
@@ -3722,25 +3810,34 @@ class AuroFloatingUI {
   }
 
   showBib() {
-    if (!this.element.disabled && !this.showing) {
+    const element = this.element;
+    if (!element) {
+      return;
+    }
+
+    if (!element.bib || (!element.trigger && !element.parentNode)) {
+      return;
+    }
+
+    if (!element.disabled && !this.showing) {
       this.updateCurrentExpandedDropdown();
-      this.element.triggerChevron?.setAttribute("data-expanded", true);
+      element.triggerChevron?.setAttribute("data-expanded", true);
 
       // prevent double showing: isPopovervisible gets first and showBib gets called later
       if (!this.showing) {
-        if (!this.element.modal) {
+        if (!element.modal) {
           this.setupHideHandlers();
         }
         this.showing = true;
-        this.element.isPopoverVisible = true;
+        element.isPopoverVisible = true;
         this.position();
         this.dispatchEventDropdownToggle();
       }
 
       // Setup auto update to handle resize and scroll
-      this.element.cleanup = autoUpdate(
-        this.element.trigger || this.element.parentNode,
-        this.element.bib,
+      element.cleanup = autoUpdate(
+        element.trigger || element.parentNode,
+        element.bib,
         () => {
           this.position();
         },
@@ -3753,22 +3850,27 @@ class AuroFloatingUI {
    * @param {String} eventType - The event type that triggered the hiding action.
    */
   hideBib(eventType = "unknown") {
-    if (this.element.disabled) {
+    const element = this.element;
+    if (!element) {
+      return;
+    }
+
+    if (element.disabled) {
       return;
     }
 
     // noToggle dropdowns should not close when the trigger is clicked (the
     // "toggle" behavior), but they CAN still close via other interactions like
     // Escape key or focus loss.
-    if (this.element.noToggle && eventType === "click") {
+    if (element.noToggle && eventType === "click") {
       return;
     }
 
     this.lockScroll(false);
-    this.element.triggerChevron?.removeAttribute("data-expanded");
+    element.triggerChevron?.removeAttribute("data-expanded");
 
-    if (this.element.isPopoverVisible) {
-      this.element.isPopoverVisible = false;
+    if (element.isPopoverVisible) {
+      element.isPopoverVisible = false;
     }
     if (this.showing) {
       this.cleanupHideHandlers();
@@ -3788,6 +3890,11 @@ class AuroFloatingUI {
    * @param {String} eventType - The event type that triggered the toggle action.
    */
   dispatchEventDropdownToggle(eventType) {
+    const element = this.element;
+    if (!element) {
+      return;
+    }
+
     const event = new CustomEvent(
       this.eventPrefix ? `${this.eventPrefix}-toggled` : "toggled",
       {
@@ -3799,11 +3906,16 @@ class AuroFloatingUI {
       },
     );
 
-    this.element.dispatchEvent(event);
+    element.dispatchEvent(event);
   }
 
   handleClick() {
-    if (this.element.isPopoverVisible) {
+    const element = this.element;
+    if (!element) {
+      return;
+    }
+
+    if (element.isPopoverVisible) {
       this.hideBib("click");
     } else {
       this.showBib();
@@ -3814,63 +3926,66 @@ class AuroFloatingUI {
       {
         composed: true,
         detail: {
-          expanded: this.element.isPopoverVisible,
+          expanded: element.isPopoverVisible,
         },
       },
     );
 
-    this.element.dispatchEvent(event);
+    element.dispatchEvent(event);
   }
 
   handleEvent(event) {
-    if (!this.element.disableEventShow) {
-      switch (event.type) {
-        case "keydown": {
-          // Support both Enter and Space keys for accessibility
-          // Space is included as it's expected behavior for interactive elements
-
-          const origin = event.composedPath()[0];
-          if (
-            event.key === "Enter" ||
-            (event.key === " " && (!origin || origin.tagName !== "INPUT"))
-          ) {
-            event.preventDefault();
-            this.handleClick();
-          }
-          break;
-        }
-        case "mouseenter":
-          if (this.element.hoverToggle) {
-            this.showBib();
-          }
-          break;
-        case "mouseleave":
-          if (this.element.hoverToggle) {
-            this.hideBib("mouseleave");
-          }
-          break;
-        case "focus":
-          if (this.element.focusShow) {
-            /*
-              This needs to better handle clicking that gives focus -
-              currently it shows and then immediately hides the bib
-            */
-            this.showBib();
-          }
-          break;
-        case "blur":
-          // send this task 100ms later queue to
-          // wait a frame in case focus moves within the floating element/bib
-          setTimeout(() => this.handleFocusLoss(), 0);
-          break;
-        case "click":
-          if (document.activeElement === document.body) {
-            event.currentTarget.focus();
-          }
+    const element = this.element;
+    if (!element || element.disableEventShow) {
+      return;
+    }
+
+    switch (event.type) {
+      case "keydown": {
+        // Support both Enter and Space keys for accessibility
+        // Space is included as it's expected behavior for interactive elements
+
+        const origin = event.composedPath()[0];
+        if (
+          event.key === "Enter" ||
+          (event.key === " " && (!origin || origin.tagName !== "INPUT"))
+        ) {
+          event.preventDefault();
           this.handleClick();
-          break;
-        // Do nothing
+        }
+        break;
       }
+      case "mouseenter":
+        if (element.hoverToggle) {
+          this.showBib();
+        }
+        break;
+      case "mouseleave":
+        if (element.hoverToggle) {
+          this.hideBib("mouseleave");
+        }
+        break;
+      case "focus":
+        if (element.focusShow) {
+          /*
+            This needs to better handle clicking that gives focus -
+            currently it shows and then immediately hides the bib
+          */
+          this.showBib();
+        }
+        break;
+      case "blur":
+        // send this task 100ms later queue to
+        // wait a frame in case focus moves within the floating element/bib
+        setTimeout(() => this.handleFocusLoss(), 0);
+        break;
+      case "click":
+        if (document.activeElement === document.body) {
+          event.currentTarget.focus();
+        }
+        this.handleClick();
+        break;
+      // Do nothing
     }
   }
 
@@ -3881,6 +3996,11 @@ class AuroFloatingUI {
    * This prevents the component itself from being focusable when the trigger element already handles focus.
    */
   handleTriggerTabIndex() {
+    const element = this.element;
+    if (!element) {
+      return;
+    }
+
     const focusableElementSelectors = [
       "a",
       "button",
@@ -3893,7 +4013,7 @@ class AuroFloatingUI {
       "auro-hyperlink",
     ];
 
-    const triggerNode = this.element.querySelectorAll('[slot="trigger"]')[0];
+    const triggerNode = element.querySelectorAll('[slot="trigger"]')[0];
     if (!triggerNode) {
       return;
     }
@@ -3902,13 +4022,13 @@ class AuroFloatingUI {
     focusableElementSelectors.forEach((selector) => {
       // Check if the trigger node element is focusable
       if (triggerNodeTagName === selector) {
-        this.element.tabIndex = -1;
+        element.tabIndex = -1;
         return;
       }
 
       // Check if any child is focusable
       if (triggerNode.querySelector(selector)) {
-        this.element.tabIndex = -1;
+        element.tabIndex = -1;
       }
     });
   }
@@ -3918,13 +4038,18 @@ class AuroFloatingUI {
    * @param {*} eventPrefix
    */
   regenerateBibId() {
-    this.id = this.element.getAttribute("id");
+    const element = this.element;
+    if (!element) {
+      return;
+    }
+
+    this.id = element.getAttribute("id");
     if (!this.id) {
       this.id = window.crypto.randomUUID();
-      this.element.setAttribute("id", this.id);
+      element.setAttribute("id", this.id);
     }
 
-    this.element.bib.setAttribute("id", `${this.id}-floater-bib`);
+    element.bib?.setAttribute("id", `${this.id}-floater-bib`);
   }
 
   configure(elem, eventPrefix, enableKeyboardHandling = true) {
@@ -3936,67 +4061,69 @@ class AuroFloatingUI {
       this.element = elem;
     }
 
-    if (this.behavior !== this.element.behavior) {
-      this.behavior = this.element.behavior;
+    const element = this.element;
+    if (!element) {
+      return;
+    }
+
+    if (this.behavior !== element.behavior) {
+      this.behavior = element.behavior;
     }
 
-    if (this.element.trigger) {
+    if (element.trigger) {
       this.disconnect();
     }
-    this.element.trigger =
-      this.element.triggerElement ||
-      this.element.shadowRoot.querySelector("#trigger") ||
-      this.element.trigger;
-    this.element.bib =
-      this.element.shadowRoot.querySelector("#bib") || this.element.bib;
-    this.element.bibSizer = this.element.shadowRoot.querySelector("#bibSizer");
-    this.element.triggerChevron =
-      this.element.shadowRoot.querySelector("#showStateIcon");
+    element.trigger =
+      element.triggerElement ||
+      element.shadowRoot?.querySelector("#trigger") ||
+      element.trigger;
+    element.bib = element.shadowRoot?.querySelector("#bib") || element.bib;
+    element.bibSizer = element.shadowRoot?.querySelector("#bibSizer");
+    element.triggerChevron =
+      element.shadowRoot?.querySelector("#showStateIcon");
 
-    if (this.element.floaterConfig) {
-      this.element.hoverToggle = this.element.floaterConfig.hoverToggle;
+    if (element.floaterConfig) {
+      element.hoverToggle = element.floaterConfig.hoverToggle;
     }
 
     this.regenerateBibId();
     this.handleTriggerTabIndex();
 
     this.handleEvent = this.handleEvent.bind(this);
-    if (this.element.trigger) {
+    if (element.trigger) {
       if (this.enableKeyboardHandling) {
-        this.element.trigger.addEventListener("keydown", this.handleEvent);
+        element.trigger.addEventListener("keydown", this.handleEvent);
       }
-      this.element.trigger.addEventListener("click", this.handleEvent);
-      this.element.trigger.addEventListener("mouseenter", this.handleEvent);
-      this.element.trigger.addEventListener("mouseleave", this.handleEvent);
-      this.element.trigger.addEventListener("focus", this.handleEvent);
-      this.element.trigger.addEventListener("blur", this.handleEvent);
+      element.trigger.addEventListener("click", this.handleEvent);
+      element.trigger.addEventListener("mouseenter", this.handleEvent);
+      element.trigger.addEventListener("mouseleave", this.handleEvent);
+      element.trigger.addEventListener("focus", this.handleEvent);
+      element.trigger.addEventListener("blur", this.handleEvent);
     }
   }
 
   disconnect() {
     this.cleanupHideHandlers();
-    if (this.element) {
-      this.element.cleanup?.();
 
-      if (this.element.bib) {
-        this.element.shadowRoot.append(this.element.bib);
-      }
+    const element = this.element;
+    if (!element) {
+      return;
+    }
 
-      // Remove event & keyboard listeners
-      if (this.element?.trigger) {
-        this.element.trigger.removeEventListener("keydown", this.handleEvent);
-        this.element.trigger.removeEventListener("click", this.handleEvent);
-        this.element.trigger.removeEventListener(
-          "mouseenter",
-          this.handleEvent,
-        );
-        this.element.trigger.removeEventListener(
-          "mouseleave",
-          this.handleEvent,
-        );
-        this.element.trigger.removeEventListener("focus", this.handleEvent);
-        this.element.trigger.removeEventListener("blur", this.handleEvent);
-      }
+    element.cleanup?.();
+
+    if (element.bib && element.shadowRoot) {
+      element.shadowRoot.append(element.bib);
+    }
+
+    // Remove event & keyboard listeners
+    if (element.trigger) {
+      element.trigger.removeEventListener("keydown", this.handleEvent);
+      element.trigger.removeEventListener("click", this.handleEvent);
+      element.trigger.removeEventListener("mouseenter", this.handleEvent);
+      element.trigger.removeEventListener("mouseleave", this.handleEvent);
+      element.trigger.removeEventListener("focus", this.handleEvent);
+      element.trigger.removeEventListener("blur", this.handleEvent);
     }
   }
 }
@@ -5124,7 +5251,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$3 {
   }
 };
 
-var formkitVersion$1 = '202604072212';
+var formkitVersion$1 = '202604091759';
 
 class AuroElement extends i$3 {
   static get properties() {
@@ -5230,7 +5357,7 @@ class AuroElement extends i$3 {
   }
 }
 
-// Copyright (c) 2026 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
+// Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
 
 
@@ -6869,13 +6996,13 @@ class AuroHelpText extends i$3 {
   }
 }
 
-var formkitVersion = '202604072212';
+var formkitVersion = '202604091759';
 
 var styleCss$2 = i$6`.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}.body-default{font-size:var(--wcss-body-default-font-size, 1rem);line-height:var(--wcss-body-default-line-height, 1.5rem)}.body-default,.body-lg{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-lg{font-size:var(--wcss-body-lg-font-size, 1.125rem);line-height:var(--wcss-body-lg-line-height, 1.625rem)}.body-sm{font-size:var(--wcss-body-sm-font-size, 0.875rem);line-height:var(--wcss-body-sm-line-height, 1.25rem)}.body-sm,.body-xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-xs{font-size:var(--wcss-body-xs-font-size, 0.75rem);line-height:var(--wcss-body-xs-line-height, 1rem)}.body-2xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:var(--wcss-body-2xs-font-size, 0.625rem);font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0);line-height:var(--wcss-body-2xs-line-height, 0.875rem)}.display-2xl{font-family:var(--wcss-display-2xl-family, "AS Circular"),var(--wcss-display-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-2xl-font-size, clamp(3.5rem, 6vw, 5.375rem));font-weight:var(--wcss-display-2xl-weight, 300);letter-spacing:var(--wcss-display-2xl-letter-spacing, 0);line-height:var(--wcss-display-2xl-line-height, 1.3)}.display-xl{font-family:var(--wcss-display-xl-family, "AS Circular"),var(--wcss-display-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xl-font-size, clamp(3rem, 5.3333333333vw, 4.5rem));font-weight:var(--wcss-display-xl-weight, 300);letter-spacing:var(--wcss-display-xl-letter-spacing, 0);line-height:var(--wcss-display-xl-line-height, 1.3)}.display-lg{font-family:var(--wcss-display-lg-family, "AS Circular"),var(--wcss-display-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-lg-font-size, clamp(2.75rem, 4.6666666667vw, 4rem));font-weight:var(--wcss-display-lg-weight, 300);letter-spacing:var(--wcss-display-lg-letter-spacing, 0);line-height:var(--wcss-display-lg-line-height, 1.3)}.display-md{font-family:var(--wcss-display-md-family, "AS Circular"),var(--wcss-display-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-md-font-size, clamp(2.5rem, 4vw, 3.5rem));font-weight:var(--wcss-display-md-weight, 300);letter-spacing:var(--wcss-display-md-letter-spacing, 0);line-height:var(--wcss-display-md-line-height, 1.3)}.display-sm{font-family:var(--wcss-display-sm-family, "AS Circular"),var(--wcss-display-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-sm-font-size, clamp(2rem, 3.6666666667vw, 3rem));font-weight:var(--wcss-display-sm-weight, 300);letter-spacing:var(--wcss-display-sm-letter-spacing, 0);line-height:var(--wcss-display-sm-line-height, 1.3)}.display-xs{font-family:var(--wcss-display-xs-family, "AS Circular"),var(--wcss-display-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xs-font-size, clamp(1.75rem, 3vw, 2.375rem));font-weight:var(--wcss-display-xs-weight, 300);letter-spacing:var(--wcss-display-xs-letter-spacing, 0);line-height:var(--wcss-display-xs-line-height, 1.3)}.heading-xl{font-family:var(--wcss-heading-xl-family, "AS Circular"),var(--wcss-heading-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xl-font-size, clamp(2rem, 3vw, 2.5rem));font-weight:var(--wcss-heading-xl-weight, 300);letter-spacing:var(--wcss-heading-xl-letter-spacing, 0);line-height:var(--wcss-heading-xl-line-height, 1.3)}.heading-lg{font-family:var(--wcss-heading-lg-family, "AS Circular"),var(--wcss-heading-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-lg-font-size, clamp(1.75rem, 2.6666666667vw, 2.25rem));font-weight:var(--wcss-heading-lg-weight, 300);letter-spacing:var(--wcss-heading-lg-letter-spacing, 0);line-height:var(--wcss-heading-lg-line-height, 1.3)}.heading-md{font-family:var(--wcss-heading-md-family, "AS Circular"),var(--wcss-heading-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-md-font-size, clamp(1.625rem, 2.3333333333vw, 1.75rem));font-weight:var(--wcss-heading-md-weight, 300);letter-spacing:var(--wcss-heading-md-letter-spacing, 0);line-height:var(--wcss-heading-md-line-height, 1.3)}.heading-sm{font-family:var(--wcss-heading-sm-family, "AS Circular"),var(--wcss-heading-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-sm-font-size, clamp(1.375rem, 2vw, 1.5rem));font-weight:var(--wcss-heading-sm-weight, 300);letter-spacing:var(--wcss-heading-sm-letter-spacing, 0);line-height:var(--wcss-heading-sm-line-height, 1.3)}.heading-xs{font-family:var(--wcss-heading-xs-family, "AS Circular"),var(--wcss-heading-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xs-font-size, clamp(1.25rem, 1.6666666667vw, 1.25rem));font-weight:var(--wcss-heading-xs-weight, 450);letter-spacing:var(--wcss-heading-xs-letter-spacing, 0);line-height:var(--wcss-heading-xs-line-height, 1.3)}.heading-2xs{font-family:var(--wcss-heading-2xs-family, "AS Circular"),var(--wcss-heading-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-2xs-font-size, clamp(1.125rem, 1.5vw, 1.125rem));font-weight:var(--wcss-heading-2xs-weight, 450);letter-spacing:var(--wcss-heading-2xs-letter-spacing, 0);line-height:var(--wcss-heading-2xs-line-height, 1.3)}.accent-2xl{font-family:var(--wcss-accent-2xl-family, "Good OT"),var(--wcss-accent-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xl-font-size, clamp(2rem, 3.1666666667vw, 2.375rem));font-weight:var(--wcss-accent-2xl-weight, 450);letter-spacing:var(--wcss-accent-2xl-letter-spacing, 0.05em);line-height:var(--wcss-accent-2xl-line-height, 1)}.accent-2xl,.accent-xl{text-transform:uppercase}.accent-xl{font-family:var(--wcss-accent-xl-family, "Good OT"),var(--wcss-accent-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xl-font-size, clamp(1.625rem, 2.3333333333vw, 2rem));font-weight:var(--wcss-accent-xl-weight, 450);letter-spacing:var(--wcss-accent-xl-letter-spacing, 0.05em);line-height:var(--wcss-accent-xl-line-height, 1.3)}.accent-lg{font-family:var(--wcss-accent-lg-family, "Good OT"),var(--wcss-accent-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-lg-font-size, clamp(1.5rem, 2.1666666667vw, 1.75rem));font-weight:var(--wcss-accent-lg-weight, 450);letter-spacing:var(--wcss-accent-lg-letter-spacing, 0.05em);line-height:var(--wcss-accent-lg-line-height, 1.3)}.accent-lg,.accent-md{text-transform:uppercase}.accent-md{font-family:var(--wcss-accent-md-family, "Good OT"),var(--wcss-accent-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-md-font-size, clamp(1.375rem, 1.8333333333vw, 1.5rem));font-weight:var(--wcss-accent-md-weight, 500);letter-spacing:var(--wcss-accent-md-letter-spacing, 0.05em);line-height:var(--wcss-accent-md-line-height, 1.3)}.accent-sm{font-family:var(--wcss-accent-sm-family, "Good OT"),var(--wcss-accent-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-sm-font-size, clamp(1.125rem, 1.5vw, 1.25rem));font-weight:var(--wcss-accent-sm-weight, 500);letter-spacing:var(--wcss-accent-sm-letter-spacing, 0.05em);line-height:var(--wcss-accent-sm-line-height, 1.3)}.accent-sm,.accent-xs{text-transform:uppercase}.accent-xs{font-family:var(--wcss-accent-xs-family, "Good OT"),var(--wcss-accent-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xs-font-size, clamp(1rem, 1.3333333333vw, 1rem));font-weight:var(--wcss-accent-xs-weight, 500);letter-spacing:var(--wcss-accent-xs-letter-spacing, 0.1em);line-height:var(--wcss-accent-xs-line-height, 1.3)}.accent-2xs{font-family:var(--wcss-accent-2xs-family, "Good OT"),var(--wcss-accent-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xs-font-size, clamp(0.875rem, 1.1666666667vw, 0.875rem));font-weight:var(--wcss-accent-2xs-weight, 450);letter-spacing:var(--wcss-accent-2xs-letter-spacing, 0.1em);line-height:var(--wcss-accent-2xs-line-height, 1.3);text-transform:uppercase}[auro-dropdown]{--ds-auro-dropdown-trigger-border-color: var(--ds-auro-select-border-color);--ds-auro-dropdown-trigger-background-color: var(--ds-auro-select-background-color);--ds-auro-dropdown-trigger-container-color: var(--ds-auro-select-background-color);--ds-auro-dropdown-trigger-outline-color: var(--ds-auro-select-outline-color)}:host{display:inline-block;text-align:left;vertical-align:top}:host([layout*=emphasized]) [auro-dropdown],:host([layout*=snowflake]) [auro-dropdown]{--ds-auro-select-border-color: transparent}:host([layout*=emphasized]) .mainContent,:host([layout*=snowflake]) .mainContent{text-align:center}.mainContent{position:relative;display:flex;overflow:hidden;flex:1;flex-direction:column;align-items:center;justify-content:center}.valueContainer [slot=displayValue]{display:none}.accents{display:flex;flex-direction:row;align-items:center;justify-content:center}::slotted([slot=typeIcon]){margin-right:var(--ds-size-100, 0.5rem)}.displayValue{display:block}.displayValue:not(.force){display:none}.displayValue:not(.force).hasContent:is(.withValue):not(.hasFocus){display:block}.triggerContent{display:flex;width:100%;align-items:center;justify-content:center}:host([layout*=emphasized]) .triggerContent{padding:0 var(--ds-size-100, 0.5rem) 0 var(--ds-size-300, 1.5rem)}:host([layout*=snowflake]) .triggerContent{padding:0 var(--ds-size-100, 0.5rem) 0 var(--ds-size-200, 1rem)}:host([layout*=snowflake]) label{padding-block:var(--ds-size-25, 0.125rem)}:host([layout*=classic]) .triggerContent{padding:0 var(--ds-size-100, 0.5rem)}:host([layout*=classic]) .mainContent{align-items:start}:host([layout*=classic]) label{overflow:hidden;cursor:text;text-overflow:ellipsis;white-space:nowrap}:host([layout*=classic]) .value{height:auto}label{color:var(--ds-auro-select-label-text-color)}:host(:is([validity]:not([validity=valid]))) [auro-dropdown]{--ds-auro-select-border-color: var(--ds-basic-color-status-error, #e31f26);--ds-auro-select-outline-color: var(--ds-basic-color-status-error, #e31f26);--ds-auro-dropdown-helptext-text-color: var(--ds-basic-color-texticon-default, #2a2a2a)}:host([ondark]:is([validity]:not([validity=valid]))) [auro-dropdown],:host([appearance=inverse]:is([validity]:not([validity=valid]))) [auro-dropdown]{--ds-auro-select-border-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8);--ds-auro-select-outline-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8);--ds-auro-dropdown-helptext-text-color: var(--ds-basic-color-texticon-inverse, #ffffff)}#slotHolder{display:none}:host([fluid]){width:100%}:host([disabled]){pointer-events:none;user-select:none}:host([disabled]:not([ondark])) [auro-dropdown],:host([disabled]:not([appearance=inverse])) [auro-dropdown]{--ds-auro-select-border-color: var(--ds-basic-color-border-subtle, #dddddd)}:host(:not([layout*=classic])[disabled][ondark]) [auro-dropdown],:host(:not([layout*=classic])[disabled][appearance=inverse]) [auro-dropdown]{--ds-auro-select-border-color: transparent}`;
 
 var emphasizedColorCss = i$6`:host([layout=emphasized]) [auro-dropdown]{--ds-auro-dropdown-trigger-background-color: var(--ds-advanced-color-dropdown-emphasized-background, rgba(0, 39, 74, 0.1019607843))}:host([layout=emphasized]) [auro-dropdown]:hover{--ds-auro-dropdown-trigger-hover-background-color: var(--ds-advanced-color-dropdown-emphasized-background, rgba(0, 39, 74, 0.1019607843))}:host([layout=emphasized]) [auro-dropdown][layout*=emphasized]::part(wrapper){--ds-auro-dropdown-trigger-background-color: var(--ds-advanced-color-dropdown-emphasized-background, rgba(0, 39, 74, 0.1019607843))}`;
 
-// Copyright (c) 2026 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
+// Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
 
 
@@ -7670,6 +7797,7 @@ class AuroSelect extends AuroElement$1 {
         this.scrollActiveOptionIntoView();
       }
     });
+
     this.menu.addEventListener('auroMenu-selectedOption', (event) => {
 
       // Update the displayed value
@@ -7683,6 +7811,7 @@ class AuroSelect extends AuroElement$1 {
 
       if (this.dropdown.isPopoverVisible && !this.multiSelect) {
         this.dropdown.hide();
+        this.dropdown.trigger.focus();
       }
 
       // Announce the selection after the dropdown closes so it isn't
@@ -7944,9 +8073,6 @@ class AuroSelect extends AuroElement$1 {
       if (!this.multiSelect) {
         this.hideBib();
       }
-      if (this.dropdown && this.dropdown.trigger) {
-        this.dropdown.trigger.focus();
-      }
 
       // LEGACY EVENT
       this.dispatchEvent(new CustomEvent('auroSelect-valueSet', {
@@ -8551,6 +8677,7 @@ class AuroMenuOption extends AuroElement$1 {
     this.selected = false;
     this.noCheckmark = false;
     this.disabled = false;
+    this.noMatch = false;
 
     /**
      * @private
@@ -8626,6 +8753,15 @@ class AuroMenuOption extends AuroElement$1 {
         reflect: true
       },
 
+      /**
+       * When true, marks this option as the "no matching results" placeholder shown by combobox when the user's input does not match any available options. Enables distinct styling and prevents the option from being treated as a selectable match.
+       */
+      noMatch: {
+        type: Boolean,
+        reflect: true,
+        attribute: 'nomatch'
+      },
+
       /**
        * Specifies that an option is selected.
        */
@@ -10407,6 +10543,7 @@ function initExamples(initCount) {
     valueExtractionExample();
     valueAlertExample();
     inDialogExample();
+    inDrawerExample();
     resetStateExample();
     updateActiveOptionExample();
     // auroMenuLoadingExample();