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

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,19 +1301,10 @@ const comboboxKeyboardStrategy = {
     }
   },
 
-  Escape(component, evt, ctx) {
-    if (!ctx.isExpanded) {
-      return;
-    }
-
-    // Prevent the Escape key from bubbling up and closing any parent dialogs / drawers / popups
-    evt.stopPropagation();
-
-    if (ctx.isModal) {
+  Escape(component, _evt, ctx) {
+    if (ctx.isExpanded && ctx.isModal) {
       component.setTriggerInputFocus();
     }
-
-    component.hideBib();
   },
 
   Home(component, evt, ctx) {
@@ -1350,7 +1341,7 @@ const comboboxKeyboardStrategy = {
 
 /* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
 
-let AuroLibraryRuntimeUtils$1$2 = class AuroLibraryRuntimeUtils {
+let AuroLibraryRuntimeUtils$2$1 = class AuroLibraryRuntimeUtils {
 
   /* eslint-disable jsdoc/require-param */
 
@@ -3139,6 +3130,7 @@ class AuroFloatingUI {
     this.focusHandler = null;
     this.clickHandler = null;
     this.keyDownHandler = null;
+    this.touchHandler = null;
 
     /**
      * @private
@@ -3556,6 +3548,28 @@ class AuroFloatingUI {
     setTimeout(() => {
       window.addEventListener("click", this.clickHandler);
     }, 0);
+
+    // iOS Safari does not fire `click` on non-interactive elements, so
+    // tapping an inert backdrop never reaches the click handler above.
+    // Mirror the same outside-tap logic with a passive touchstart listener.
+    this.touchHandler = (evt) => {
+      const element = this.element;
+      if (!element?.bib) {
+        return;
+      }
+
+      // fullscreen (modal) dialog handles its own dismissal
+      if (element.bib.hasAttribute("isfullscreen")) {
+        return;
+      }
+
+      const path = evt.composedPath();
+      if (!path.includes(element.trigger) && !path.includes(element.bib)) {
+        this.hideBib("click");
+      }
+    };
+
+    window.addEventListener("touchstart", this.touchHandler, { passive: true });
   }
 
   cleanupHideHandlers() {
@@ -3571,6 +3585,11 @@ class AuroFloatingUI {
       this.clickHandler = null;
     }
 
+    if (this.touchHandler) {
+      window.removeEventListener("touchstart", this.touchHandler);
+      this.touchHandler = null;
+    }
+
     if (this.keyDownHandler) {
       document.removeEventListener("keydown", this.keyDownHandler);
       this.keyDownHandler = null;
@@ -4363,6 +4382,89 @@ let p$3 = class p{registerComponent(t,a){customElements.get(t)||customElements.d
 
 var iconVersion$2 = '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$2 = 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.
@@ -5045,7 +5147,7 @@ let AuroHelpText$2 = class AuroHelpText extends LitElement {
   }
 };
 
-var formkitVersion$2 = '202604081945';
+var formkitVersion$2 = '202604082129';
 
 let AuroElement$2 = class AuroElement extends LitElement {
   static get properties() {
@@ -5151,7 +5253,7 @@ let AuroElement$2 = class AuroElement extends LitElement {
   }
 };
 
-// Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
+// Copyright (c) 2026 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
 
 
@@ -5256,7 +5358,7 @@ class AuroDropdown extends AuroElement$2 {
     /**
      * @private
      */
-    this.runtimeUtils = new AuroLibraryRuntimeUtils$1$2();
+    this.runtimeUtils = new AuroLibraryRuntimeUtils$2$1();
 
     /**
      * @private
@@ -5674,7 +5776,7 @@ class AuroDropdown extends AuroElement$2 {
    *
    */
   static register(name = "auro-dropdown") {
-    AuroLibraryRuntimeUtils$1$2.prototype.registerComponent(name, AuroDropdown);
+    AuroLibraryRuntimeUtils$2$1.prototype.registerComponent(name, AuroDropdown);
   }
 
   /**
@@ -12802,7 +12904,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
   }
 };
 
-var formkitVersion$1 = '202604081945';
+var formkitVersion$1 = '202604082129';
 
 // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -13867,7 +13969,7 @@ class AuroBibtemplate extends LitElement {
   }
 }
 
-var formkitVersion = '202604081945';
+var formkitVersion = '202604082129';
 
 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}`;
 
@@ -14207,7 +14309,7 @@ class AuroHelpText extends LitElement {
   }
 }
 
-// Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
+// 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/dist/registered.js

@@ -1301,19 +1301,10 @@ const comboboxKeyboardStrategy = {
     }
   },
 
-  Escape(component, evt, ctx) {
-    if (!ctx.isExpanded) {
-      return;
-    }
-
-    // Prevent the Escape key from bubbling up and closing any parent dialogs / drawers / popups
-    evt.stopPropagation();
-
-    if (ctx.isModal) {
+  Escape(component, _evt, ctx) {
+    if (ctx.isExpanded && ctx.isModal) {
       component.setTriggerInputFocus();
     }
-
-    component.hideBib();
   },
 
   Home(component, evt, ctx) {
@@ -1350,7 +1341,7 @@ const comboboxKeyboardStrategy = {
 
 /* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
 
-let AuroLibraryRuntimeUtils$1$2 = class AuroLibraryRuntimeUtils {
+let AuroLibraryRuntimeUtils$2$1 = class AuroLibraryRuntimeUtils {
 
   /* eslint-disable jsdoc/require-param */
 
@@ -3139,6 +3130,7 @@ class AuroFloatingUI {
     this.focusHandler = null;
     this.clickHandler = null;
     this.keyDownHandler = null;
+    this.touchHandler = null;
 
     /**
      * @private
@@ -3556,6 +3548,28 @@ class AuroFloatingUI {
     setTimeout(() => {
       window.addEventListener("click", this.clickHandler);
     }, 0);
+
+    // iOS Safari does not fire `click` on non-interactive elements, so
+    // tapping an inert backdrop never reaches the click handler above.
+    // Mirror the same outside-tap logic with a passive touchstart listener.
+    this.touchHandler = (evt) => {
+      const element = this.element;
+      if (!element?.bib) {
+        return;
+      }
+
+      // fullscreen (modal) dialog handles its own dismissal
+      if (element.bib.hasAttribute("isfullscreen")) {
+        return;
+      }
+
+      const path = evt.composedPath();
+      if (!path.includes(element.trigger) && !path.includes(element.bib)) {
+        this.hideBib("click");
+      }
+    };
+
+    window.addEventListener("touchstart", this.touchHandler, { passive: true });
   }
 
   cleanupHideHandlers() {
@@ -3571,6 +3585,11 @@ class AuroFloatingUI {
       this.clickHandler = null;
     }
 
+    if (this.touchHandler) {
+      window.removeEventListener("touchstart", this.touchHandler);
+      this.touchHandler = null;
+    }
+
     if (this.keyDownHandler) {
       document.removeEventListener("keydown", this.keyDownHandler);
       this.keyDownHandler = null;
@@ -4363,6 +4382,89 @@ let p$3 = class p{registerComponent(t,a){customElements.get(t)||customElements.d
 
 var iconVersion$2 = '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$2 = 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.
@@ -5045,7 +5147,7 @@ let AuroHelpText$2 = class AuroHelpText extends LitElement {
   }
 };
 
-var formkitVersion$2 = '202604081945';
+var formkitVersion$2 = '202604082129';
 
 let AuroElement$2 = class AuroElement extends LitElement {
   static get properties() {
@@ -5151,7 +5253,7 @@ let AuroElement$2 = class AuroElement extends LitElement {
   }
 };
 
-// Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
+// Copyright (c) 2026 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
 
 
@@ -5256,7 +5358,7 @@ class AuroDropdown extends AuroElement$2 {
     /**
      * @private
      */
-    this.runtimeUtils = new AuroLibraryRuntimeUtils$1$2();
+    this.runtimeUtils = new AuroLibraryRuntimeUtils$2$1();
 
     /**
      * @private
@@ -5674,7 +5776,7 @@ class AuroDropdown extends AuroElement$2 {
    *
    */
   static register(name = "auro-dropdown") {
-    AuroLibraryRuntimeUtils$1$2.prototype.registerComponent(name, AuroDropdown);
+    AuroLibraryRuntimeUtils$2$1.prototype.registerComponent(name, AuroDropdown);
   }
 
   /**
@@ -12802,7 +12904,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
   }
 };
 
-var formkitVersion$1 = '202604081945';
+var formkitVersion$1 = '202604082129';
 
 // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -13867,7 +13969,7 @@ class AuroBibtemplate extends LitElement {
   }
 }
 
-var formkitVersion = '202604081945';
+var formkitVersion = '202604082129';
 
 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}`;
 
@@ -14207,7 +14309,7 @@ class AuroHelpText extends LitElement {
   }
 }
 
-// Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
+// 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/counter/demo/api.html

@@ -56,8 +56,5 @@
     
     <!-- 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,16 +2,12 @@
 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,136 +1232,6 @@ 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).