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

package/components/counter/dist/index.js

@@ -76,7 +76,7 @@ let l$1 = class l{generateElementName(t,e){let o=t;return o+="-",o+=e.replace(/[
 
 /* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
 
-let AuroLibraryRuntimeUtils$5 = class AuroLibraryRuntimeUtils {
+let AuroLibraryRuntimeUtils$4 = class AuroLibraryRuntimeUtils {
 
   /* eslint-disable jsdoc/require-param */
 
@@ -152,7 +152,7 @@ let AuroLibraryRuntimeUtils$5 = class AuroLibraryRuntimeUtils {
   }
 };
 
-// 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.
 
 
@@ -182,7 +182,7 @@ class AuroCounterButton extends T$1 {
    *
    */
   static register(name = "auro-counter-button") {
-    AuroLibraryRuntimeUtils$5.prototype.registerComponent(name, AuroCounterButton);
+    AuroLibraryRuntimeUtils$4.prototype.registerComponent(name, AuroCounterButton);
   }
 }
 
@@ -674,7 +674,7 @@ const {
 class AuroFormValidation {
 
   constructor() {
-    this.runtimeUtils = new AuroLibraryRuntimeUtils$5();
+    this.runtimeUtils = new AuroLibraryRuntimeUtils$4();
   }
 
   /**
@@ -1256,7 +1256,7 @@ var tokensCss$2 = css`:host{--ds-auro-helptext-color: var(--ds-basic-color-texti
 
 /* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
 
-let AuroLibraryRuntimeUtils$4 = class AuroLibraryRuntimeUtils {
+let AuroLibraryRuntimeUtils$3 = class AuroLibraryRuntimeUtils {
 
   /* eslint-disable jsdoc/require-param */
 
@@ -1349,7 +1349,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
     this.onDark = false;
     this.hasTextContent = false;
 
-    AuroLibraryRuntimeUtils$4.prototype.handleComponentTagRename(this, 'auro-helptext');
+    AuroLibraryRuntimeUtils$3.prototype.handleComponentTagRename(this, 'auro-helptext');
   }
 
   static get styles() {
@@ -1415,7 +1415,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
    *
    */
   static register(name = "auro-helptext") {
-    AuroLibraryRuntimeUtils$4.prototype.registerComponent(name, AuroHelpText);
+    AuroLibraryRuntimeUtils$3.prototype.registerComponent(name, AuroHelpText);
   }
 
   updated() {
@@ -1471,9 +1471,9 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
   }
 };
 
-var formkitVersion$1 = '202604082129';
+var formkitVersion$1 = '202604091756';
 
-// 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.
 
 const keyboardStrategy = {
@@ -1562,7 +1562,7 @@ class AuroCounter extends LitElement {
     /**
      * @private
      */
-    this.runtimeUtils = new AuroLibraryRuntimeUtils$5();
+    this.runtimeUtils = new AuroLibraryRuntimeUtils$4();
 
   }
 
@@ -1704,7 +1704,7 @@ class AuroCounter extends LitElement {
    * AuroCounter.register("custom-counter") // registers <custom-counter/>
    */
   static register(name = "auro-counter") {
-    AuroLibraryRuntimeUtils$5.prototype.registerComponent(name, AuroCounter);
+    AuroLibraryRuntimeUtils$4.prototype.registerComponent(name, AuroCounter);
   }
 
   static get styles() {
@@ -1942,7 +1942,7 @@ var shapeSizeCss$1 = css`.shape-classic-xl,.shape-classic-lg,.shape-classic-md,.
 
 /* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
 
-let AuroLibraryRuntimeUtils$2 = class AuroLibraryRuntimeUtils {
+let AuroLibraryRuntimeUtils$1 = class AuroLibraryRuntimeUtils {
 
   /* eslint-disable jsdoc/require-param */
 
@@ -4983,89 +4983,6 @@ let p$2 = class p{registerComponent(t,a){customElements.get(t)||customElements.d
 
 var iconVersion$1 = '9.1.2';
 
-// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
-// See LICENSE in the project root for license information.
-
-// ---------------------------------------------------------------------
-
-/* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
-
-let AuroLibraryRuntimeUtils$1 = class AuroLibraryRuntimeUtils {
-
-  /* eslint-disable jsdoc/require-param */
-
-  /**
-   * This will register a new custom element with the browser.
-   * @param {String} name - The name of the custom element.
-   * @param {Object} componentClass - The class to register as a custom element.
-   * @returns {void}
-   */
-  registerComponent(name, componentClass) {
-    if (!customElements.get(name)) {
-      customElements.define(name, class extends componentClass {});
-    }
-  }
-
-  /**
-   * Finds and returns the closest HTML Element based on a selector.
-   * @returns {void}
-   */
-  closestElement(
-    selector, // selector like in .closest()
-    base = this, // extra functionality to skip a parent
-    __Closest = (el, found = el && el.closest(selector)) =>
-      !el || el === document || el === window
-        ? null // standard .closest() returns null for non-found selectors also
-        : found
-          ? found // found a selector INside this element
-          : __Closest(el.getRootNode().host) // recursion!! break out to parent DOM
-  ) {
-    return __Closest(base);
-  }
-  /* eslint-enable jsdoc/require-param */
-
-  /**
-   * If the element passed is registered with a different tag name than what is passed in, the tag name is added as an attribute to the element.
-   * @param {Object} elem - The element to check.
-   * @param {String} tagName - The name of the Auro component to check for or add as an attribute.
-   * @returns {void}
-   */
-  handleComponentTagRename(elem, tagName) {
-    const tag = tagName.toLowerCase();
-    const elemTag = elem.tagName.toLowerCase();
-
-    if (elemTag !== tag) {
-      elem.setAttribute(tag, true);
-    }
-  }
-
-  /**
-   * Validates if an element is a specific Auro component.
-   * @param {Object} elem - The element to validate.
-   * @param {String} tagName - The name of the Auro component to check against.
-   * @returns {Boolean} - Returns true if the element is the specified Auro component.
-   */
-  elementMatch(elem, tagName) {
-    const tag = tagName.toLowerCase();
-    const elemTag = elem.tagName.toLowerCase();
-
-    return elemTag === tag || elem.hasAttribute(tag);
-  }
-
-  /**
-   * Gets the text content of a named slot.
-   * @returns {String}
-   * @private
-   */
-  getSlotText(elem, name) {
-    const slot = elem.shadowRoot?.querySelector(`slot[name="${name}"]`);
-    const nodes = slot?.assignedNodes({ flatten: true }) || [];
-    const text = nodes.map(n => n.textContent?.trim()).join(' ').trim();
-
-    return text || null;
-  }
-};
-
 /**
  * Computes display state once per keydown event.
  * Centralizes null-safety checks and makes the shared/modal/popover branching explicit.
@@ -5533,7 +5450,7 @@ var tokensCss = css`:host{--ds-auro-helptext-color: var(--ds-basic-color-textico
 
 /* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
 
-let AuroLibraryRuntimeUtils$3 = class AuroLibraryRuntimeUtils {
+let AuroLibraryRuntimeUtils$2 = class AuroLibraryRuntimeUtils {
 
   /* eslint-disable jsdoc/require-param */
 
@@ -5626,7 +5543,7 @@ class AuroHelpText extends LitElement {
     this.onDark = false;
     this.hasTextContent = false;
 
-    AuroLibraryRuntimeUtils$3.prototype.handleComponentTagRename(this, 'auro-helptext');
+    AuroLibraryRuntimeUtils$2.prototype.handleComponentTagRename(this, 'auro-helptext');
   }
 
   static get styles() {
@@ -5692,7 +5609,7 @@ class AuroHelpText extends LitElement {
    *
    */
   static register(name = "auro-helptext") {
-    AuroLibraryRuntimeUtils$3.prototype.registerComponent(name, AuroHelpText);
+    AuroLibraryRuntimeUtils$2.prototype.registerComponent(name, AuroHelpText);
   }
 
   updated() {
@@ -5748,7 +5665,7 @@ class AuroHelpText extends LitElement {
   }
 }
 
-var formkitVersion = '202604082129';
+var formkitVersion = '202604091756';
 
 let AuroElement$1 = class AuroElement extends LitElement {
   static get properties() {
@@ -5854,7 +5771,7 @@ let AuroElement$1 = class AuroElement extends LitElement {
   }
 };
 
-// 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.
 
 
@@ -5959,7 +5876,7 @@ class AuroDropdown extends AuroElement$1 {
     /**
      * @private
      */
-    this.runtimeUtils = new AuroLibraryRuntimeUtils$2();
+    this.runtimeUtils = new AuroLibraryRuntimeUtils$1();
 
     /**
      * @private
@@ -6377,7 +6294,7 @@ class AuroDropdown extends AuroElement$1 {
    *
    */
   static register(name = "auro-dropdown") {
-    AuroLibraryRuntimeUtils$2.prototype.registerComponent(name, AuroDropdown);
+    AuroLibraryRuntimeUtils$1.prototype.registerComponent(name, AuroDropdown);
   }
 
   /**
@@ -7303,7 +7220,7 @@ class AuroCounterWrapper extends LitElement {
    * AuroCounterWrapper.register("custom-counter-wrapper") // registers <custom-counter-wrapper/>
    */
   static register(name = "auro-counter-wrapper") {
-    AuroLibraryRuntimeUtils$5.prototype.registerComponent(name, AuroCounterWrapper);
+    AuroLibraryRuntimeUtils$4.prototype.registerComponent(name, AuroCounterWrapper);
   }
 
   // function that renders the HTML and CSS into the scope of the component
@@ -7422,6 +7339,24 @@ class AuroElement extends LitElement {
   }
 }
 
+// Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
+// See LICENSE in the project root for license information.
+
+const counterGroupKeyboardStrategy = {
+  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();
+  },
+};
+
 /* 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,
 */
 
@@ -8022,6 +7957,10 @@ class AuroCounterGroup extends AuroElement {
     super.firstUpdated();
     this.updateValue();
     this.updateValueText();
+
+    if (this.isDropdown) {
+      applyKeyboardStrategy$1(this, counterGroupKeyboardStrategy);
+    }
   }
 
   /**
@@ -8031,7 +7970,7 @@ class AuroCounterGroup extends AuroElement {
    * AuroCounterGroup.register("custom-counter-group") // registers <custom-counter-group/>
    */
   static register(name = "auro-counter-group") {
-    AuroLibraryRuntimeUtils$5.prototype.registerComponent(name, AuroCounterGroup);
+    AuroLibraryRuntimeUtils$4.prototype.registerComponent(name, AuroCounterGroup);
   }
 
   /**

package/components/counter/dist/registered.js

@@ -76,7 +76,7 @@ let l$1 = class l{generateElementName(t,e){let o=t;return o+="-",o+=e.replace(/[
 
 /* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
 
-let AuroLibraryRuntimeUtils$5 = class AuroLibraryRuntimeUtils {
+let AuroLibraryRuntimeUtils$4 = class AuroLibraryRuntimeUtils {
 
   /* eslint-disable jsdoc/require-param */
 
@@ -152,7 +152,7 @@ let AuroLibraryRuntimeUtils$5 = class AuroLibraryRuntimeUtils {
   }
 };
 
-// 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.
 
 
@@ -182,7 +182,7 @@ class AuroCounterButton extends T$1 {
    *
    */
   static register(name = "auro-counter-button") {
-    AuroLibraryRuntimeUtils$5.prototype.registerComponent(name, AuroCounterButton);
+    AuroLibraryRuntimeUtils$4.prototype.registerComponent(name, AuroCounterButton);
   }
 }
 
@@ -674,7 +674,7 @@ const {
 class AuroFormValidation {
 
   constructor() {
-    this.runtimeUtils = new AuroLibraryRuntimeUtils$5();
+    this.runtimeUtils = new AuroLibraryRuntimeUtils$4();
   }
 
   /**
@@ -1256,7 +1256,7 @@ var tokensCss$2 = css`:host{--ds-auro-helptext-color: var(--ds-basic-color-texti
 
 /* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
 
-let AuroLibraryRuntimeUtils$4 = class AuroLibraryRuntimeUtils {
+let AuroLibraryRuntimeUtils$3 = class AuroLibraryRuntimeUtils {
 
   /* eslint-disable jsdoc/require-param */
 
@@ -1349,7 +1349,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
     this.onDark = false;
     this.hasTextContent = false;
 
-    AuroLibraryRuntimeUtils$4.prototype.handleComponentTagRename(this, 'auro-helptext');
+    AuroLibraryRuntimeUtils$3.prototype.handleComponentTagRename(this, 'auro-helptext');
   }
 
   static get styles() {
@@ -1415,7 +1415,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
    *
    */
   static register(name = "auro-helptext") {
-    AuroLibraryRuntimeUtils$4.prototype.registerComponent(name, AuroHelpText);
+    AuroLibraryRuntimeUtils$3.prototype.registerComponent(name, AuroHelpText);
   }
 
   updated() {
@@ -1471,9 +1471,9 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
   }
 };
 
-var formkitVersion$1 = '202604082129';
+var formkitVersion$1 = '202604091756';
 
-// 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.
 
 const keyboardStrategy = {
@@ -1562,7 +1562,7 @@ class AuroCounter extends LitElement {
     /**
      * @private
      */
-    this.runtimeUtils = new AuroLibraryRuntimeUtils$5();
+    this.runtimeUtils = new AuroLibraryRuntimeUtils$4();
 
   }
 
@@ -1704,7 +1704,7 @@ class AuroCounter extends LitElement {
    * AuroCounter.register("custom-counter") // registers <custom-counter/>
    */
   static register(name = "auro-counter") {
-    AuroLibraryRuntimeUtils$5.prototype.registerComponent(name, AuroCounter);
+    AuroLibraryRuntimeUtils$4.prototype.registerComponent(name, AuroCounter);
   }
 
   static get styles() {
@@ -1942,7 +1942,7 @@ var shapeSizeCss$1 = css`.shape-classic-xl,.shape-classic-lg,.shape-classic-md,.
 
 /* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
 
-let AuroLibraryRuntimeUtils$2 = class AuroLibraryRuntimeUtils {
+let AuroLibraryRuntimeUtils$1 = class AuroLibraryRuntimeUtils {
 
   /* eslint-disable jsdoc/require-param */
 
@@ -4983,89 +4983,6 @@ let p$2 = class p{registerComponent(t,a){customElements.get(t)||customElements.d
 
 var iconVersion$1 = '9.1.2';
 
-// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
-// See LICENSE in the project root for license information.
-
-// ---------------------------------------------------------------------
-
-/* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
-
-let AuroLibraryRuntimeUtils$1 = class AuroLibraryRuntimeUtils {
-
-  /* eslint-disable jsdoc/require-param */
-
-  /**
-   * This will register a new custom element with the browser.
-   * @param {String} name - The name of the custom element.
-   * @param {Object} componentClass - The class to register as a custom element.
-   * @returns {void}
-   */
-  registerComponent(name, componentClass) {
-    if (!customElements.get(name)) {
-      customElements.define(name, class extends componentClass {});
-    }
-  }
-
-  /**
-   * Finds and returns the closest HTML Element based on a selector.
-   * @returns {void}
-   */
-  closestElement(
-    selector, // selector like in .closest()
-    base = this, // extra functionality to skip a parent
-    __Closest = (el, found = el && el.closest(selector)) =>
-      !el || el === document || el === window
-        ? null // standard .closest() returns null for non-found selectors also
-        : found
-          ? found // found a selector INside this element
-          : __Closest(el.getRootNode().host) // recursion!! break out to parent DOM
-  ) {
-    return __Closest(base);
-  }
-  /* eslint-enable jsdoc/require-param */
-
-  /**
-   * If the element passed is registered with a different tag name than what is passed in, the tag name is added as an attribute to the element.
-   * @param {Object} elem - The element to check.
-   * @param {String} tagName - The name of the Auro component to check for or add as an attribute.
-   * @returns {void}
-   */
-  handleComponentTagRename(elem, tagName) {
-    const tag = tagName.toLowerCase();
-    const elemTag = elem.tagName.toLowerCase();
-
-    if (elemTag !== tag) {
-      elem.setAttribute(tag, true);
-    }
-  }
-
-  /**
-   * Validates if an element is a specific Auro component.
-   * @param {Object} elem - The element to validate.
-   * @param {String} tagName - The name of the Auro component to check against.
-   * @returns {Boolean} - Returns true if the element is the specified Auro component.
-   */
-  elementMatch(elem, tagName) {
-    const tag = tagName.toLowerCase();
-    const elemTag = elem.tagName.toLowerCase();
-
-    return elemTag === tag || elem.hasAttribute(tag);
-  }
-
-  /**
-   * Gets the text content of a named slot.
-   * @returns {String}
-   * @private
-   */
-  getSlotText(elem, name) {
-    const slot = elem.shadowRoot?.querySelector(`slot[name="${name}"]`);
-    const nodes = slot?.assignedNodes({ flatten: true }) || [];
-    const text = nodes.map(n => n.textContent?.trim()).join(' ').trim();
-
-    return text || null;
-  }
-};
-
 /**
  * Computes display state once per keydown event.
  * Centralizes null-safety checks and makes the shared/modal/popover branching explicit.
@@ -5533,7 +5450,7 @@ var tokensCss = css`:host{--ds-auro-helptext-color: var(--ds-basic-color-textico
 
 /* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
 
-let AuroLibraryRuntimeUtils$3 = class AuroLibraryRuntimeUtils {
+let AuroLibraryRuntimeUtils$2 = class AuroLibraryRuntimeUtils {
 
   /* eslint-disable jsdoc/require-param */
 
@@ -5626,7 +5543,7 @@ class AuroHelpText extends LitElement {
     this.onDark = false;
     this.hasTextContent = false;
 
-    AuroLibraryRuntimeUtils$3.prototype.handleComponentTagRename(this, 'auro-helptext');
+    AuroLibraryRuntimeUtils$2.prototype.handleComponentTagRename(this, 'auro-helptext');
   }
 
   static get styles() {
@@ -5692,7 +5609,7 @@ class AuroHelpText extends LitElement {
    *
    */
   static register(name = "auro-helptext") {
-    AuroLibraryRuntimeUtils$3.prototype.registerComponent(name, AuroHelpText);
+    AuroLibraryRuntimeUtils$2.prototype.registerComponent(name, AuroHelpText);
   }
 
   updated() {
@@ -5748,7 +5665,7 @@ class AuroHelpText extends LitElement {
   }
 }
 
-var formkitVersion = '202604082129';
+var formkitVersion = '202604091756';
 
 let AuroElement$1 = class AuroElement extends LitElement {
   static get properties() {
@@ -5854,7 +5771,7 @@ let AuroElement$1 = class AuroElement extends LitElement {
   }
 };
 
-// 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.
 
 
@@ -5959,7 +5876,7 @@ class AuroDropdown extends AuroElement$1 {
     /**
      * @private
      */
-    this.runtimeUtils = new AuroLibraryRuntimeUtils$2();
+    this.runtimeUtils = new AuroLibraryRuntimeUtils$1();
 
     /**
      * @private
@@ -6377,7 +6294,7 @@ class AuroDropdown extends AuroElement$1 {
    *
    */
   static register(name = "auro-dropdown") {
-    AuroLibraryRuntimeUtils$2.prototype.registerComponent(name, AuroDropdown);
+    AuroLibraryRuntimeUtils$1.prototype.registerComponent(name, AuroDropdown);
   }
 
   /**
@@ -7303,7 +7220,7 @@ class AuroCounterWrapper extends LitElement {
    * AuroCounterWrapper.register("custom-counter-wrapper") // registers <custom-counter-wrapper/>
    */
   static register(name = "auro-counter-wrapper") {
-    AuroLibraryRuntimeUtils$5.prototype.registerComponent(name, AuroCounterWrapper);
+    AuroLibraryRuntimeUtils$4.prototype.registerComponent(name, AuroCounterWrapper);
   }
 
   // function that renders the HTML and CSS into the scope of the component
@@ -7422,6 +7339,24 @@ class AuroElement extends LitElement {
   }
 }
 
+// Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
+// See LICENSE in the project root for license information.
+
+const counterGroupKeyboardStrategy = {
+  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();
+  },
+};
+
 /* 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,
 */
 
@@ -8022,6 +7957,10 @@ class AuroCounterGroup extends AuroElement {
     super.firstUpdated();
     this.updateValue();
     this.updateValueText();
+
+    if (this.isDropdown) {
+      applyKeyboardStrategy$1(this, counterGroupKeyboardStrategy);
+    }
   }
 
   /**
@@ -8031,7 +7970,7 @@ class AuroCounterGroup extends AuroElement {
    * AuroCounterGroup.register("custom-counter-group") // registers <custom-counter-group/>
    */
   static register(name = "auro-counter-group") {
-    AuroLibraryRuntimeUtils$5.prototype.registerComponent(name, AuroCounterGroup);
+    AuroLibraryRuntimeUtils$4.prototype.registerComponent(name, AuroCounterGroup);
   }
 
   /**

package/components/datepicker/demo/api.html

@@ -53,6 +53,7 @@
     <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>
 
     <script type="module" data-demo-script="true">
       import { initExamples } from "./api.min.js";

package/components/datepicker/demo/api.js

@@ -6,6 +6,7 @@ import { updateMaxDateExample } from './../apiExamples/update-max-date';
 import { updateMinDateExample } from './../apiExamples/update-min-date';
 import { validityExample } from './../apiExamples/validity';
 import { inDialogExample } from '../apiExamples/in-dialog';
+import { inDrawerExample } from '../apiExamples/in-drawer';
 import { localizationExample } from '../apiExamples/localization';
 import { resetStateExample } from '../apiExamples/reset-state';
 import '../src/registered.js';
@@ -22,6 +23,7 @@ export function initExamples(initCount) {
     updateMinDateExample();
     validityExample();
     inDialogExample();
+    inDrawerExample();
     localizationExample();
     resetStateExample();
   } catch (error) {

package/components/datepicker/demo/api.md

@@ -1759,6 +1759,63 @@ export function inDialogExample() {
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
+### Datepicker in Drawer
+
+The following example demonstrates the use of `<auro-datepicker>` within an `<auro-drawer>` component.
+
+<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="datepicker-drawer-opener">Datepicker in Drawer</auro-button>
+    <auro-drawer id="datepicker-drawer">
+      <span slot="header">Datepicker in Drawer</span>
+      <div slot="content">
+        <auro-datepicker>
+          <span slot="bib.fullscreen.headline">inDrawer Example</span>
+        </auro-datepicker>
+      </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="datepicker-drawer-opener">Datepicker in Drawer</auro-button>
+  <auro-drawer id="datepicker-drawer">
+    <span slot="header">Datepicker in Drawer</span>
+    <div slot="content">
+      <auro-datepicker>
+        <span slot="bib.fullscreen.headline">inDrawer Example</span>
+      </auro-datepicker>
+    </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("#datepicker-drawer-opener").addEventListener("click", () => {
+    const drawer = document.querySelector("#datepicker-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).