@aurodesignsystem-dev/auro-formkit 0.0.0-pr1428.1 → 0.0.0-pr1429.0

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

@@ -1687,7 +1687,7 @@ class AuroHelpText extends i$2 {
   }
 }
 
-var formkitVersion = '202604081450';
+var formkitVersion = '202604081917';
 
 // Copyright (c) 2026 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.

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

@@ -1679,7 +1679,7 @@ class AuroHelpText extends i$2 {
   }
 }
 
-var formkitVersion = '202604081450';
+var formkitVersion = '202604081917';
 
 // Copyright (c) 2026 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.

package/components/checkbox/dist/index.js

@@ -1632,7 +1632,7 @@ class AuroHelpText extends LitElement {
   }
 }
 
-var formkitVersion = '202604081450';
+var formkitVersion = '202604081917';
 
 // Copyright (c) 2026 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.

package/components/checkbox/dist/registered.js

@@ -1632,7 +1632,7 @@ class AuroHelpText extends LitElement {
   }
 }
 
-var formkitVersion = '202604081450';
+var formkitVersion = '202604081917';
 
 // Copyright (c) 2026 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.

package/components/combobox/demo/api.html

@@ -54,6 +54,7 @@
     <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-button@latest/+esm" type="module"></script>
     <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-icon@latest/+esm" type="module"></script>
     <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-dialog@latest/+esm" type="module"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-drawer@latest/+esm" type="module"></script>
     <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-loader@latest/+esm" type="module"></script>
 
     <script type="module" data-demo-script="true">

package/components/combobox/demo/api.js

@@ -5,6 +5,7 @@ import { resetStateExample } from '../apiExamples/reset-state';
 import { setupExternalSelectionExample } from '../apiExamples/external-selection';
 import { valueExample } from '../apiExamples/value';
 import { inDialogExample } from '../apiExamples/in-dialog';
+import { inDrawerExample } from '../apiExamples/in-drawer';
 import { persistentExample } from '../apiExamples/persistent';
 import { swapValueExample } from '../apiExamples/swap-value';
 
@@ -22,7 +23,8 @@ export function initExamples(initCount) {
     resetStateExample();
     setupExternalSelectionExample();
     valueExample();
-    inDialogExample();  
+    inDialogExample();
+    inDrawerExample();
     persistentExample();
     swapValueExample();
   } catch (err) {

package/components/combobox/demo/api.md

@@ -2097,6 +2097,81 @@ export function inDialogExample() {
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
+### In Drawer
+
+Example use of component within an `auro-drawer`.
+
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/in-drawer.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/in-drawer.html -->
+  <div>
+    <auro-button id="combobox-drawer-opener">Combobox in Drawer</auro-button>
+    <auro-drawer id="combobox-drawer">
+      <span slot="header">Combobox in Drawer</span>
+      <div slot="content">
+        <auro-combobox>
+          <span slot="bib.fullscreen.headline">Bib Header</span>
+          <span slot="label">Name</span>
+          <auro-menu>
+            <auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
+            <auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
+            <auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
+            <auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
+            <auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
+            <auro-menuoption static nomatch>No matching option</auro-menuoption>
+          </auro-menu>
+        </auro-combobox>
+      </div>
+    </auro-drawer>
+  </div>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/in-drawer.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/in-drawer.html -->
+
+```html
+<div>
+  <auro-button id="combobox-drawer-opener">Combobox in Drawer</auro-button>
+  <auro-drawer id="combobox-drawer">
+    <span slot="header">Combobox in Drawer</span>
+    <div slot="content">
+      <auro-combobox>
+        <span slot="bib.fullscreen.headline">Bib Header</span>
+        <span slot="label">Name</span>
+        <auro-menu>
+          <auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
+          <auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
+          <auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
+          <auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
+          <auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
+          <auro-menuoption static nomatch>No matching option</auro-menuoption>
+        </auro-menu>
+      </auro-combobox>
+    </div>
+  </auro-drawer>
+</div>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/in-drawer.js) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/in-drawer.js -->
+
+```js
+export function inDrawerExample() {
+  document.querySelector("#combobox-drawer-opener").addEventListener("click", () => {
+    const drawer = document.querySelector("#combobox-drawer");
+    if (drawer.hasAttribute('open')) {
+      drawer.removeAttribute('open');
+    } else {
+      drawer.setAttribute('open', true);
+    }
+  });
+};
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+
 ### Persistent Menu Option with a Custom Event
 
 This example demonstrates a static menu option that will always appears regardless of the suggestion filtering performed. In this example "Add new address" will always be a displayed menu option.

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

@@ -52,6 +52,17 @@ function inDialogExample() {
   });
 }
 
+function inDrawerExample() {
+  document.querySelector("#combobox-drawer-opener").addEventListener("click", () => {
+    const drawer = document.querySelector("#combobox-drawer");
+    if (drawer.hasAttribute('open')) {
+      drawer.removeAttribute('open');
+    } else {
+      drawer.setAttribute('open', true);
+    }
+  });
+}
+
 function persistentExample() {
   const persistentExample = document.querySelector('#persistent');
 
@@ -1421,10 +1432,19 @@ const comboboxKeyboardStrategy = {
     }
   },
 
-  Escape(component, _evt, ctx) {
-    if (ctx.isExpanded && ctx.isModal) {
+  Escape(component, evt, ctx) {
+    // Prevent the Escape key from bubbling up and closing any parent dialogs / drawers / popups
+    evt.stopPropagation();
+
+    if (!ctx.isExpanded) {
+      return;
+    }
+
+    if (ctx.isModal) {
       component.setTriggerInputFocus();
     }
+
+    component.hideBib();
   },
 
   Home(component, evt, ctx) {
@@ -5180,7 +5200,7 @@ let AuroHelpText$2 = class AuroHelpText extends i$4 {
   }
 };
 
-var formkitVersion$2 = '202604081450';
+var formkitVersion$2 = '202604081917';
 
 let AuroElement$2 = class AuroElement extends i$4 {
   static get properties() {
@@ -12944,7 +12964,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$4 {
   }
 };
 
-var formkitVersion$1 = '202604081450';
+var formkitVersion$1 = '202604081917';
 
 // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -14009,7 +14029,7 @@ class AuroBibtemplate extends i$4 {
   }
 }
 
-var formkitVersion = '202604081450';
+var formkitVersion = '202604081917';
 
 var styleCss$3 = i$7`.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}:host{display:block;text-align:left}:host [auro-dropdown]{--ds-auro-dropdown-trigger-background-color: transparent}:host #inputInBib::part(wrapper){box-shadow:none}:host #inputInBib::part(accent-left){display:none}:host([layout*=classic]) [auro-input]{width:100%}:host([layout*=classic]) [auro-input]::part(helpText){display:none}:host([layout*=classic]) #slotHolder{display:none}`;
 
@@ -18009,7 +18029,8 @@ function initExamples(initCount) {
     resetStateExample();
     setupExternalSelectionExample();
     valueExample();
-    inDialogExample();  
+    inDialogExample();
+    inDrawerExample();
     persistentExample();
     swapValueExample();
   } catch (err) {

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

@@ -1344,10 +1344,19 @@ const comboboxKeyboardStrategy = {
     }
   },
 
-  Escape(component, _evt, ctx) {
-    if (ctx.isExpanded && ctx.isModal) {
+  Escape(component, evt, ctx) {
+    // Prevent the Escape key from bubbling up and closing any parent dialogs / drawers / popups
+    evt.stopPropagation();
+
+    if (!ctx.isExpanded) {
+      return;
+    }
+
+    if (ctx.isModal) {
       component.setTriggerInputFocus();
     }
+
+    component.hideBib();
   },
 
   Home(component, evt, ctx) {
@@ -5103,7 +5112,7 @@ let AuroHelpText$2 = class AuroHelpText extends i$4 {
   }
 };
 
-var formkitVersion$2 = '202604081450';
+var formkitVersion$2 = '202604081917';
 
 let AuroElement$2 = class AuroElement extends i$4 {
   static get properties() {
@@ -12867,7 +12876,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$4 {
   }
 };
 
-var formkitVersion$1 = '202604081450';
+var formkitVersion$1 = '202604081917';
 
 // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -13932,7 +13941,7 @@ class AuroBibtemplate extends i$4 {
   }
 }
 
-var formkitVersion = '202604081450';
+var formkitVersion = '202604081917';
 
 var styleCss$3 = i$7`.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}:host{display:block;text-align:left}:host [auro-dropdown]{--ds-auro-dropdown-trigger-background-color: transparent}:host #inputInBib::part(wrapper){box-shadow:none}:host #inputInBib::part(accent-left){display:none}:host([layout*=classic]) [auro-input]{width:100%}:host([layout*=classic]) [auro-input]::part(helpText){display:none}:host([layout*=classic]) #slotHolder{display:none}`;
 

package/components/combobox/dist/comboboxKeyboardStrategy.d.ts

@@ -3,7 +3,7 @@ export namespace comboboxKeyboardStrategy {
     function ArrowUp(component: any, evt: any, ctx: any): void;
     function End(component: any, evt: any, ctx: any): void;
     function Enter(component: any, evt: any, ctx: any): void;
-    function Escape(component: any, _evt: any, ctx: any): void;
+    function Escape(component: any, evt: any, ctx: any): void;
     function Home(component: any, evt: any, ctx: any): void;
     function Tab(component: any, evt: any, ctx: any): void;
 }

package/components/combobox/dist/index.js

@@ -1301,10 +1301,19 @@ const comboboxKeyboardStrategy = {
     }
   },
 
-  Escape(component, _evt, ctx) {
-    if (ctx.isExpanded && ctx.isModal) {
+  Escape(component, evt, ctx) {
+    // Prevent the Escape key from bubbling up and closing any parent dialogs / drawers / popups
+    evt.stopPropagation();
+
+    if (!ctx.isExpanded) {
+      return;
+    }
+
+    if (ctx.isModal) {
       component.setTriggerInputFocus();
     }
+
+    component.hideBib();
   },
 
   Home(component, evt, ctx) {
@@ -5036,7 +5045,7 @@ let AuroHelpText$2 = class AuroHelpText extends LitElement {
   }
 };
 
-var formkitVersion$2 = '202604081450';
+var formkitVersion$2 = '202604081917';
 
 let AuroElement$2 = class AuroElement extends LitElement {
   static get properties() {
@@ -12793,7 +12802,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
   }
 };
 
-var formkitVersion$1 = '202604081450';
+var formkitVersion$1 = '202604081917';
 
 // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -13858,7 +13867,7 @@ class AuroBibtemplate extends LitElement {
   }
 }
 
-var formkitVersion = '202604081450';
+var formkitVersion = '202604081917';
 
 var styleCss$1 = css`.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}:host{display:block;text-align:left}:host [auro-dropdown]{--ds-auro-dropdown-trigger-background-color: transparent}:host #inputInBib::part(wrapper){box-shadow:none}:host #inputInBib::part(accent-left){display:none}:host([layout*=classic]) [auro-input]{width:100%}:host([layout*=classic]) [auro-input]::part(helpText){display:none}:host([layout*=classic]) #slotHolder{display:none}`;
 

package/components/combobox/dist/registered.js

@@ -1301,10 +1301,19 @@ const comboboxKeyboardStrategy = {
     }
   },
 
-  Escape(component, _evt, ctx) {
-    if (ctx.isExpanded && ctx.isModal) {
+  Escape(component, evt, ctx) {
+    // Prevent the Escape key from bubbling up and closing any parent dialogs / drawers / popups
+    evt.stopPropagation();
+
+    if (!ctx.isExpanded) {
+      return;
+    }
+
+    if (ctx.isModal) {
       component.setTriggerInputFocus();
     }
+
+    component.hideBib();
   },
 
   Home(component, evt, ctx) {
@@ -5036,7 +5045,7 @@ let AuroHelpText$2 = class AuroHelpText extends LitElement {
   }
 };
 
-var formkitVersion$2 = '202604081450';
+var formkitVersion$2 = '202604081917';
 
 let AuroElement$2 = class AuroElement extends LitElement {
   static get properties() {
@@ -12793,7 +12802,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
   }
 };
 
-var formkitVersion$1 = '202604081450';
+var formkitVersion$1 = '202604081917';
 
 // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -13858,7 +13867,7 @@ class AuroBibtemplate extends LitElement {
   }
 }
 
-var formkitVersion = '202604081450';
+var formkitVersion = '202604081917';
 
 var styleCss$1 = css`.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}:host{display:block;text-align:left}:host [auro-dropdown]{--ds-auro-dropdown-trigger-background-color: transparent}:host #inputInBib::part(wrapper){box-shadow:none}:host #inputInBib::part(accent-left){display:none}:host([layout*=classic]) [auro-input]{width:100%}:host([layout*=classic]) [auro-input]::part(helpText){display:none}:host([layout*=classic]) #slotHolder{display:none}`;
 

package/components/counter/demo/api.html

@@ -56,5 +56,8 @@
     
     <!-- If additional elements are needed for the demo, add them here. -->
     <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/+esm" type="module"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-button@latest/+esm" type="module"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-dialog@latest/+esm" type="module"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-drawer@latest/+esm" type="module"></script>
   </body>
 </html>

package/components/counter/demo/api.js

@@ -2,12 +2,16 @@
 import '../src/registered.js';
 // import { dropdownCounterExample } from "../apiExamples/dropdown-mobile-properties.js";
 import { eventCounterExample } from "../apiExamples/events.js";
+import { inDialogExample } from "../apiExamples/in-dialog.js";
+import { inDrawerExample } from "../apiExamples/in-drawer.js";
 
 export function initExamples(initialCount = 0) {
   try {
     // javascript example function calls to be added here upon creation to test examples
     // dropdownCounterExample();
     eventCounterExample();
+    inDialogExample();
+    inDrawerExample();
 
   } catch (err) {
     if (initialCount <= 20) {

package/components/counter/demo/api.md

@@ -1232,6 +1232,136 @@ All available slots for both components.
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
+### Counter Group in Dialog
+
+The element used within an `auro-dialog`.
+
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/in-dialog.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/in-dialog.html -->
+  <div>
+    <auro-button id="counter-dialog-opener">Counter Group in Dialog</auro-button>
+    <auro-dialog id="counter-dialog">
+      <span slot="header">Counter Group in Dialog</span>
+      <div slot="content">
+        <auro-counter-group isDropdown>
+          <span slot="ariaLabel.bib.close">Close Popup</span>
+          <div slot="bib.fullscreen.headline">Group fullscreen label</div>
+          <div slot="label">Counter Group</div>
+          <div slot="helpText">Select a value</div>
+          <auro-counter>Counter 1</auro-counter>
+          <auro-counter>Counter 2</auro-counter>
+        </auro-counter-group>
+      </div>
+    </auro-dialog>
+  </div>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/in-dialog.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/in-dialog.html -->
+
+```html
+<div>
+  <auro-button id="counter-dialog-opener">Counter Group in Dialog</auro-button>
+  <auro-dialog id="counter-dialog">
+    <span slot="header">Counter Group in Dialog</span>
+    <div slot="content">
+      <auro-counter-group isDropdown>
+        <span slot="ariaLabel.bib.close">Close Popup</span>
+        <div slot="bib.fullscreen.headline">Group fullscreen label</div>
+        <div slot="label">Counter Group</div>
+        <div slot="helpText">Select a value</div>
+        <auro-counter>Counter 1</auro-counter>
+        <auro-counter>Counter 2</auro-counter>
+      </auro-counter-group>
+    </div>
+  </auro-dialog>
+</div>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/in-dialog.js) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/in-dialog.js -->
+
+```js
+export function inDialogExample() {
+  document.querySelector("#counter-dialog-opener").addEventListener("click", () => {
+    const dialog = document.querySelector("#counter-dialog");
+    dialog.open = true;
+  });
+};
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+
+### Counter Group in Drawer
+
+The element used within an `auro-drawer`.
+
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/in-drawer.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/in-drawer.html -->
+  <div>
+    <auro-button id="counter-drawer-opener">Counter Group in Drawer</auro-button>
+    <auro-drawer id="counter-drawer">
+      <span slot="header">Counter Group in Drawer</span>
+      <div slot="content">
+        <auro-counter-group isDropdown>
+          <span slot="ariaLabel.bib.close">Close Popup</span>
+          <div slot="bib.fullscreen.headline">Group fullscreen label</div>
+          <div slot="label">Counter Group</div>
+          <div slot="helpText">Select a value</div>
+          <auro-counter>Counter 1</auro-counter>
+          <auro-counter>Counter 2</auro-counter>
+        </auro-counter-group>
+      </div>
+    </auro-drawer>
+  </div>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/in-drawer.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/in-drawer.html -->
+
+```html
+<div>
+  <auro-button id="counter-drawer-opener">Counter Group in Drawer</auro-button>
+  <auro-drawer id="counter-drawer">
+    <span slot="header">Counter Group in Drawer</span>
+    <div slot="content">
+      <auro-counter-group isDropdown>
+        <span slot="ariaLabel.bib.close">Close Popup</span>
+        <div slot="bib.fullscreen.headline">Group fullscreen label</div>
+        <div slot="label">Counter Group</div>
+        <div slot="helpText">Select a value</div>
+        <auro-counter>Counter 1</auro-counter>
+        <auro-counter>Counter 2</auro-counter>
+      </auro-counter-group>
+    </div>
+  </auro-drawer>
+</div>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/in-drawer.js) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/in-drawer.js -->
+
+```js
+export function inDrawerExample() {
+  document.querySelector("#counter-drawer-opener").addEventListener("click", () => {
+    const drawer = document.querySelector("#counter-drawer");
+    if (drawer.hasAttribute('open')) {
+      drawer.removeAttribute('open');
+    } else {
+      drawer.setAttribute('open', true);
+    }
+  });
+};
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+
 ## Restyle Component with CSS Variables
 
 The component may be restyled by changing the values of the following token(s).

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

@@ -1521,7 +1521,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$2 {
   }
 };
 
-var formkitVersion$1 = '202604081450';
+var formkitVersion$1 = '202604081917';
 
 // Copyright (c) 2026 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -5705,7 +5705,7 @@ class AuroHelpText extends i$2 {
   }
 }
 
-var formkitVersion = '202604081450';
+var formkitVersion = '202604081917';
 
 let AuroElement$1 = class AuroElement extends i$2 {
   static get properties() {
@@ -7379,6 +7379,22 @@ class AuroElement extends i$2 {
   }
 }
 
+// Copyright (c) 2026 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
+// See LICENSE in the project root for license information.
+
+const counterGroupKeyboardStrategy = {
+  Escape(component, evt) {
+    // 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();
+
+    if (component.dropdown && component.dropdown.isPopoverVisible) {
+      component.dropdown.hide();
+    }
+  },
+};
+
 /* eslint-disable lit/no-invalid-html, lit/binding-positions, max-lines, no-underscore-dangle, arrow-parens, no-confusing-arrow, curly, dot-location, no-inline-comments, line-comment-position,
 */
 
@@ -7979,6 +7995,10 @@ class AuroCounterGroup extends AuroElement {
     super.firstUpdated();
     this.updateValue();
     this.updateValueText();
+
+    if (this.isDropdown) {
+      applyKeyboardStrategy$1(this, counterGroupKeyboardStrategy);
+    }
   }
 
   /**
@@ -8216,6 +8236,24 @@ function eventCounterExample() {
   });
 }
 
+function inDialogExample() {
+  document.querySelector("#counter-dialog-opener").addEventListener("click", () => {
+    const dialog = document.querySelector("#counter-dialog");
+    dialog.open = true;
+  });
+}
+
+function inDrawerExample() {
+  document.querySelector("#counter-drawer-opener").addEventListener("click", () => {
+    const drawer = document.querySelector("#counter-drawer");
+    if (drawer.hasAttribute('open')) {
+      drawer.removeAttribute('open');
+    } else {
+      drawer.setAttribute('open', true);
+    }
+  });
+}
+
 /* eslint-disable jsdoc/require-jsdoc, no-magic-numbers */
 
 function initExamples(initialCount = 0) {
@@ -8223,6 +8261,8 @@ function initExamples(initialCount = 0) {
     // javascript example function calls to be added here upon creation to test examples
     // dropdownCounterExample();
     eventCounterExample();
+    inDialogExample();
+    inDrawerExample();
 
   } catch (err) {
     if (initialCount <= 20) {