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

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

@@ -243,6 +243,17 @@ function inDialogExample() {
   });
 }
 
+function inDrawerExample() {
+  document.querySelector("#datepicker-drawer-opener").addEventListener("click", () => {
+    const drawer = document.querySelector("#datepicker-drawer");
+    if (drawer.hasAttribute('open')) {
+      drawer.removeAttribute('open');
+    } else {
+      drawer.setAttribute('open', true);
+    }
+  });
+}
+
 function localizationExample() {
   const localizedDatepicker = document.querySelector("#localizationExample");
 
@@ -9549,7 +9560,7 @@ class AuroBibtemplate extends i$1 {
   }
 }
 
-var formkitVersion$2 = '202604072212';
+var formkitVersion$2 = '202604091759';
 
 let l$1 = class l{generateElementName(t,e){let o=t;return o+="-",o+=e.replace(/[.]/g,"_"),o}generateTag(o,s,a){const r=this.generateElementName(o,s),i=i$5`${s$5(r)}`;return customElements.get(r)||customElements.define(r,class extends a{}),i}};let d$1 = class d{registerComponent(t,e){customElements.get(t)||customElements.define(t,class extends e{});}closestElement(t,e=this,o=(e,s=e&&e.closest(t))=>e&&e!==document&&e!==window?s||o(e.getRootNode().host):null){return o(e)}handleComponentTagRename(t,e){const o=e.toLowerCase();t.tagName.toLowerCase()!==o&&t.setAttribute(o,true);}elementMatch(t,e){const o=e.toLowerCase();return t.tagName.toLowerCase()===o||t.hasAttribute(o)}getSlotText(t,e){const o=t.shadowRoot?.querySelector(`slot[name="${e}"]`),s=(o?.assignedNodes({flatten:true})||[]).map(t=>t.textContent?.trim()).join(" ").trim();return s||null}};let h$4 = class h{registerComponent(t,e){customElements.get(t)||customElements.define(t,class extends e{});}closestElement(t,e=this,o=(e,s=e&&e.closest(t))=>e&&e!==document&&e!==window?s||o(e.getRootNode().host):null){return o(e)}handleComponentTagRename(t,e){const o=e.toLowerCase();t.tagName.toLowerCase()!==o&&t.setAttribute(o,true);}elementMatch(t,e){const o=e.toLowerCase();return t.tagName.toLowerCase()===o||t.hasAttribute(o)}};var c$3=i$3`:host{color:var(--ds-auro-loader-color)}:host>span{background-color:var(--ds-auro-loader-background-color);border-color:var(--ds-auro-loader-border-color)}:host([onlight]),:host([appearance=brand]){--ds-auro-loader-color: var(--ds-basic-color-brand-primary, #01426a)}:host([ondark]),:host([appearance=inverse]){--ds-auro-loader-color: var(--ds-basic-color-texticon-inverse, #ffffff)}:host([orbit])>span{--ds-auro-loader-background-color: transparent}:host([orbit])>span:nth-child(1){--ds-auro-loader-border-color: currentcolor;opacity:.25}:host([orbit])>span:nth-child(2){--ds-auro-loader-border-color: currentcolor;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent}
 `,u$6=i$3`.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, .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, .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, .625rem);font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0);line-height:var(--wcss-body-2xs-line-height, .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, .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, .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, .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, .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, .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, .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(.875rem, 1.1666666667vw, .875rem));font-weight:var(--wcss-accent-2xs-weight, 450);letter-spacing:var(--wcss-accent-2xs-letter-spacing, .1em);line-height:var(--wcss-accent-2xs-line-height, 1.3);text-transform:uppercase}:focus:not(:focus-visible){outline:3px solid transparent}:host,:host>span{position:relative}:host{width:2rem;height:2rem;display:inline-block;font-size:0}:host>span{position:absolute;display:inline-block;float:none;top:0;left:0;width:2rem;height:2rem;border-radius:100%;border-style:solid;border-width:0;box-sizing:border-box}:host([xs]),:host([xs])>span{width:1.2rem;height:1.2rem}:host([sm]),:host([sm])>span{width:3rem;height:3rem}:host([md]),:host([md])>span{width:5rem;height:5rem}:host([lg]),:host([lg])>span{width:8rem;height:8rem}:host{--margin: .375rem;--margin-xs: .2rem;--margin-sm: .5rem;--margin-md: .75rem;--margin-lg: 1rem}:host([pulse]),:host([pulse])>span{position:relative}:host([pulse]){width:calc(3rem + var(--margin) * 6);height:calc(1rem + var(--margin) * 2)}:host([pulse])>span{width:1rem;height:1rem;margin:var(--margin);animation:pulse 1.5s ease infinite}:host([pulse][xs]){width:calc(1.95rem + var(--margin-xs) * 6);height:calc(.65rem + var(--margin-xs) * 2)}:host([pulse][xs])>span{margin:var(--margin-xs);width:.65rem;height:.65rem}:host([pulse][sm]){width:calc(6rem + var(--margin-sm) * 6);height:calc(2rem + var(--margin-sm) * 2)}:host([pulse][sm])>span{margin:var(--margin-sm);width:2rem;height:2rem}:host([pulse][md]){width:calc(9rem + var(--margin-md) * 6);height:calc(3rem + var(--margin-md) * 2)}:host([pulse][md])>span{margin:var(--margin-md);width:3rem;height:3rem}:host([pulse][lg]){width:calc(15rem + var(--margin-lg) * 6);height:calc(5rem + var(--margin-lg) * 2)}:host([pulse][lg])>span{margin:var(--margin-lg);width:5rem;height:5rem}:host([pulse])>span:nth-child(1){animation-delay:-.4s}:host([pulse])>span:nth-child(2){animation-delay:-.2s}:host([pulse])>span:nth-child(3){animation-delay:0ms}@keyframes pulse{0%,to{opacity:.1;transform:scale(.9)}50%{opacity:1;transform:scale(1.1)}}:host([orbit]),:host([orbit])>span{opacity:1}:host([orbit])>span{border-width:5px}:host([orbit])>span:nth-child(2){animation:orbit 2s linear infinite}:host([orbit][sm])>span{border-width:8px}:host([orbit][md])>span{border-width:13px}:host([orbit][lg])>span{border-width:21px}@keyframes orbit{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host([ringworm])>svg{animation:rotate 2s linear infinite;height:100%;width:100%;stroke:currentcolor;stroke-width:8}:host([ringworm]) .path{stroke-dashoffset:0;animation:ringworm 1.5s ease-in-out infinite;stroke-linecap:round}@keyframes rotate{to{transform:rotate(360deg)}}@keyframes ringworm{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35px}to{stroke-dasharray:89,200;stroke-dashoffset:-124px}}:host([laser]){position:static;width:100%;display:block;height:0;overflow:hidden;font-size:unset}:host([laser])>span{position:fixed;width:100%;height:.25rem;border-radius:0;z-index:100}:host([laser])>span:nth-child(1){border-color:currentcolor;opacity:.25}:host([laser])>span:nth-child(2){border-color:currentcolor;animation:laser 2s linear infinite;opacity:1;width:50%}:host([laser][sm])>span:nth-child(2){width:20%}:host([laser][md])>span:nth-child(2){width:30%}:host([laser][lg])>span:nth-child(2){width:50%;animation-duration:1.5s}:host([laser][xl])>span:nth-child(2){width:80%;animation-duration:1.5s}@keyframes laser{0%{left:-100%}to{left:110%}}:host>.no-animation{display:none}@media (prefers-reduced-motion: reduce){:host{display:flex;align-items:center;justify-content:center}:host>span{opacity:1}:host>.loader{display:none}:host>svg{display:none}:host>.no-animation{display:block}}
@@ -11883,11 +11894,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;
       }
@@ -11909,9 +11928,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";
@@ -11922,9 +11946,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";
@@ -11954,42 +11978,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`,
         });
       });
     }
@@ -12001,11 +12048,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 = "";
     }
@@ -12021,20 +12074,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 = "";
@@ -12049,14 +12106,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;
@@ -12074,16 +12131,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
       }
@@ -12099,28 +12161,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;
     }
 
@@ -12128,23 +12192,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;
@@ -12165,7 +12239,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 (
@@ -12222,6 +12301,10 @@ class AuroFloatingUI {
   }
 
   updateCurrentExpandedDropdown() {
+    if (!this.element) {
+      return;
+    }
+
     // Close any other dropdown that is already open
     const existedVisibleFloatingUI =
       document.expandedAuroFormkitDropdown || document.expandedAuroFloater;
@@ -12238,25 +12321,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();
         },
@@ -12269,22 +12361,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();
@@ -12304,6 +12401,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",
       {
@@ -12315,11 +12417,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();
@@ -12330,63 +12437,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
     }
   }
 
@@ -12397,6 +12507,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",
@@ -12409,7 +12524,7 @@ class AuroFloatingUI {
       "auro-hyperlink",
     ];
 
-    const triggerNode = this.element.querySelectorAll('[slot="trigger"]')[0];
+    const triggerNode = element.querySelectorAll('[slot="trigger"]')[0];
     if (!triggerNode) {
       return;
     }
@@ -12418,13 +12533,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;
       }
     });
   }
@@ -12434,13 +12549,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) {
@@ -12452,67 +12572,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);
     }
   }
 }
@@ -12969,7 +13091,7 @@ var iconVersion$2 = '9.1.2';
  * @returns {{isExpanded: boolean, isModal: boolean, isPopover: boolean, activeInput: HTMLElement|null}}
  *   isModal and isPopover reflect the display mode (fullscreen vs not) regardless of expanded state.
  */
-function createDisplayContext(component, options = {}) {
+function createDisplayContext$1(component, options = {}) {
   const dd = options.dropdown || component.dropdown;
   // isPopoverVisible reflects as the `open` attribute.
   // It reports whether the bib is open in any mode (popover or modal).
@@ -12999,11 +13121,11 @@ function createDisplayContext(component, options = {}) {
  * @param {Object} strategy - Map of key names to handler functions.
  * @param {Object} [options] - Optional config passed to createDisplayContext.
  */
-function applyKeyboardStrategy(component, strategy, options = {}) {
+function applyKeyboardStrategy$1(component, strategy, options = {}) {
   component.addEventListener('keydown', async (evt) => {
     const handler = strategy[evt.key] || strategy.default;
     if (typeof handler === 'function') {
-      const ctx = createDisplayContext(component, options);
+      const ctx = createDisplayContext$1(component, options);
       await handler(component, evt, ctx);
     }
   });
@@ -13238,7 +13360,7 @@ class AuroDropdownBib extends i$1 {
 
     const dialog = this.shadowRoot.querySelector('dialog');
     this._setupCancelHandler(dialog);
-    applyKeyboardStrategy(dialog, createDropdownBibKeyboardStrategy());
+    applyKeyboardStrategy$1(dialog, createDropdownBibKeyboardStrategy());
 
     this.dispatchEvent(new CustomEvent('auro-dropdownbib-connected', {
       bubbles: true,
@@ -13640,7 +13762,7 @@ let AuroHelpText$2 = class AuroHelpText extends i$1 {
   }
 };
 
-var formkitVersion$1 = '202604072212';
+var formkitVersion$1 = '202604091759';
 
 let AuroElement$2 = class AuroElement extends i$1 {
   static get properties() {
@@ -13746,7 +13868,7 @@ let AuroElement$2 = class AuroElement extends i$1 {
   }
 };
 
-// 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.
 
 
@@ -21396,7 +21518,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$1 {
   }
 };
 
-var formkitVersion = '202604072212';
+var formkitVersion = '202604091759';
 
 // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -22593,7 +22715,88 @@ function guardTouchPassthrough(element) {
   }, { once: true });
 }
 
-// Copyright (c) 2026 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
+/**
+ * Computes display state once per keydown event.
+ * Centralizes null-safety checks and makes the shared/modal/popover branching explicit.
+ *
+ * @param {HTMLElement} component - The component with a dropdown reference.
+ * @param {Object} [options] - Optional config.
+ * @param {HTMLElement} [options.dropdown] - Explicit dropdown reference. Falls back to component.dropdown.
+ * @param {Function} [options.inputResolver] - Called with (component, ctx) to resolve the active input element.
+ * @returns {{isExpanded: boolean, isModal: boolean, isPopover: boolean, activeInput: HTMLElement|null}}
+ *   isModal and isPopover reflect the display mode (fullscreen vs not) regardless of expanded state.
+ */
+function createDisplayContext(component, options = {}) {
+  const dd = options.dropdown || component.dropdown;
+  // isPopoverVisible reflects as the `open` attribute.
+  // It reports whether the bib is open in any mode (popover or modal).
+  const isExpanded = Boolean(dd && dd.isPopoverVisible);
+  const isFullscreen = Boolean(dd && dd.isBibFullscreen);
+
+  const ctx = {
+    isExpanded,
+    isModal: isFullscreen,
+    isPopover: !isFullscreen,
+    activeInput: null,
+  };
+
+  if (options.inputResolver) {
+    const resolvedInput = options.inputResolver(component, ctx);
+    // Guard against resolvers returning undefined or non-HTMLElement values.
+    ctx.activeInput = resolvedInput instanceof HTMLElement ? resolvedInput : null;
+  }
+
+  return ctx;
+}
+
+/**
+ * Wires up a keydown listener that dispatches to strategy[evt.key] or strategy.default.
+ * Handles both sync and async handlers.
+ * @param {HTMLElement} component - The component to attach the listener to.
+ * @param {Object} strategy - Map of key names to handler functions.
+ * @param {Object} [options] - Optional config passed to createDisplayContext.
+ */
+function applyKeyboardStrategy(component, strategy, options = {}) {
+  component.addEventListener('keydown', async (evt) => {
+    const handler = strategy[evt.key] || strategy.default;
+    if (typeof handler === 'function') {
+      const ctx = createDisplayContext(component, options);
+      await handler(component, evt, ctx);
+    }
+  });
+}
+
+// Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
+// See LICENSE in the project root for license information.
+
+// Authoritative datepicker keyboard behavior spec:
+//   components/datepicker/docs/partials/keyboardBehavior.md
+//
+// Current behavior (transitional — full bib keyboard navigation is planned for a future iteration):
+//   - The bib opens and closes via pointer/touch interaction only.
+//   - Escape closes the bib and prevents the event from reaching parent containers.
+//   - Tab uses the browser's default tabindex sequence across trigger controls.
+//   - Enter and Space do not open or close the bib.
+//
+// This file is an intentional placeholder for most keys. When datepicker bib keyboard navigation is
+// added, handlers should go here following the same strategy pattern used by
+// auro-select (selectKeyboardStrategy.js) and auro-combobox (comboboxKeyboardStrategy.js).
+const datepickerKeyboardStrategy = {
+  Escape(component, evt) {
+    if (!component.dropdown || !component.dropdown.isPopoverVisible) {
+      return;
+    }
+
+    // Prevent the Escape key from bubbling up and closing any parent dialogs / drawers / popups.
+    // Because stopPropagation prevents the document-level floatingUI keydown handler from
+    // seeing this event, we must also close the dropdown explicitly.
+    evt.stopPropagation();
+
+    component.dropdown.hide();
+  },
+};
+
+// Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
 
 
@@ -24050,6 +24253,7 @@ class AuroDatePicker extends AuroElement {
     this.configureCalendar();
     this.configureDatepicker();
     this.configureClickHandler();
+    applyKeyboardStrategy(this, datepickerKeyboardStrategy);
   }
 
   connectedCallback() {
@@ -24520,6 +24724,7 @@ function initExamples(initCount) {
     updateMinDateExample();
     validityExample();
     inDialogExample();
+    inDrawerExample();
     localizationExample();
     resetStateExample();
   } catch (error) {