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

package/components/dropdown/demo/api.md

@@ -1314,6 +1314,101 @@ export function inDialogExample() {
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
+### Dropdown 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="dropdown-drawer-opener">Dropdown in Drawer</auro-button>
+    <auro-drawer id="dropdown-drawer">
+      <span slot="header">Dropdown in Drawer</span>
+      <div slot="content">
+        <auro-dropdown id="in-drawer-dropdown" layout="classic" shape="classic" size="lg">
+          <div style="padding: var(--ds-size-150);">
+            Lorem ipsum dolor
+            <br />
+            <auro-button id="in-drawer-dismiss-btn">
+              Dismiss Dropdown
+            </auro-button>
+          </div>
+          <span slot="helpText">
+            Help text
+          </span>
+          <span slot="label">
+            Element label (default text will be read by screen reader)
+          </span>
+          <div slot="trigger">
+            Dropdown Trigger in Drawer
+          </div>
+        </auro-dropdown>
+      </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="dropdown-drawer-opener">Dropdown in Drawer</auro-button>
+  <auro-drawer id="dropdown-drawer">
+    <span slot="header">Dropdown in Drawer</span>
+    <div slot="content">
+      <auro-dropdown id="in-drawer-dropdown" layout="classic" shape="classic" size="lg">
+        <div style="padding: var(--ds-size-150);">
+          Lorem ipsum dolor
+          <br />
+          <auro-button id="in-drawer-dismiss-btn">
+            Dismiss Dropdown
+          </auro-button>
+        </div>
+        <span slot="helpText">
+          Help text
+        </span>
+        <span slot="label">
+          Element label (default text will be read by screen reader)
+        </span>
+        <div slot="trigger">
+          Dropdown Trigger in Drawer
+        </div>
+      </auro-dropdown>
+    </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() {
+  const openBtn = document.querySelector("#dropdown-drawer-opener");
+  const closeBtn = document.querySelector("#in-drawer-dismiss-btn");
+  const dropdown = document.querySelector("#in-drawer-dropdown");
+
+  openBtn?.addEventListener("click", () => {
+    const drawer = document.querySelector("#dropdown-drawer");
+    if (drawer.hasAttribute('open')) {
+      drawer.removeAttribute('open');
+    } else {
+      drawer.setAttribute('open', true);
+    }
+  });
+
+  closeBtn?.addEventListener("click", () => {
+    dropdown?.hide();
+  });
+};
+```
+<!-- 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/dropdown/demo/api.min.js

@@ -85,6 +85,25 @@ function inDialogExample() {
   });
 }
 
+function inDrawerExample() {
+  const openBtn = document.querySelector("#dropdown-drawer-opener");
+  const closeBtn = document.querySelector("#in-drawer-dismiss-btn");
+  const dropdown = document.querySelector("#in-drawer-dropdown");
+
+  openBtn?.addEventListener("click", () => {
+    const drawer = document.querySelector("#dropdown-drawer");
+    if (drawer.hasAttribute('open')) {
+      drawer.removeAttribute('open');
+    } else {
+      drawer.setAttribute('open', true);
+    }
+  });
+
+  closeBtn?.addEventListener("click", () => {
+    dropdown?.hide();
+  });
+}
+
 /**
  * @license
  * Copyright 2017 Google LLC
@@ -137,7 +156,7 @@ const t$1={ATTRIBUTE:1,CHILD:2},e$5=t=>(...e)=>({_$litDirective$:t,values:e});le
 
 /* 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 */
 
@@ -3203,89 +3222,6 @@ class p{registerComponent(t,a){customElements.get(t)||customElements.define(t,cl
 
 var iconVersion = '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;
-  }
-};
-
 /**
  * @license
  * Copyright 2017 Google LLC
@@ -3974,7 +3910,7 @@ class AuroHelpText extends i {
   }
 }
 
-var formkitVersion = '202604082129';
+var formkitVersion = '202604091756';
 
 class AuroElement extends i {
   static get properties() {
@@ -4080,7 +4016,7 @@ class AuroElement extends i {
   }
 }
 
-// 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.
 
 
@@ -4185,7 +4121,7 @@ class AuroDropdown extends AuroElement {
     /**
      * @private
      */
-    this.runtimeUtils = new AuroLibraryRuntimeUtils$2();
+    this.runtimeUtils = new AuroLibraryRuntimeUtils$1();
 
     /**
      * @private
@@ -4603,7 +4539,7 @@ class AuroDropdown extends AuroElement {
    *
    */
   static register(name = "auro-dropdown") {
-    AuroLibraryRuntimeUtils$2.prototype.registerComponent(name, AuroDropdown);
+    AuroLibraryRuntimeUtils$1.prototype.registerComponent(name, AuroDropdown);
   }
 
   /**
@@ -5125,6 +5061,7 @@ function initExamples() {
   hideExample();
   showExample();
   inDialogExample();
+  inDrawerExample();
 }
 
 export { initExamples };

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

@@ -77,7 +77,7 @@ const t$1={ATTRIBUTE:1,CHILD:2},e$5=t=>(...e)=>({_$litDirective$:t,values:e});le
 
 /* 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 */
 
@@ -3143,89 +3143,6 @@ class p{registerComponent(t,a){customElements.get(t)||customElements.define(t,cl
 
 var iconVersion = '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;
-  }
-};
-
 /**
  * @license
  * Copyright 2017 Google LLC
@@ -3914,7 +3831,7 @@ class AuroHelpText extends i {
   }
 }
 
-var formkitVersion = '202604082129';
+var formkitVersion = '202604091756';
 
 class AuroElement extends i {
   static get properties() {
@@ -4020,7 +3937,7 @@ class AuroElement extends i {
   }
 }
 
-// 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.
 
 
@@ -4125,7 +4042,7 @@ class AuroDropdown extends AuroElement {
     /**
      * @private
      */
-    this.runtimeUtils = new AuroLibraryRuntimeUtils$2();
+    this.runtimeUtils = new AuroLibraryRuntimeUtils$1();
 
     /**
      * @private
@@ -4543,7 +4460,7 @@ class AuroDropdown extends AuroElement {
    *
    */
   static register(name = "auro-dropdown") {
-    AuroLibraryRuntimeUtils$2.prototype.registerComponent(name, AuroDropdown);
+    AuroLibraryRuntimeUtils$1.prototype.registerComponent(name, AuroDropdown);
   }
 
   /**

package/components/dropdown/dist/index.js

@@ -13,7 +13,7 @@ import 'lit-html/directives/unsafe-html.js';
 
 /* 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 */
 
@@ -3054,89 +3054,6 @@ class p{registerComponent(t,a){customElements.get(t)||customElements.define(t,cl
 
 var iconVersion = '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.
@@ -3819,7 +3736,7 @@ class AuroHelpText extends LitElement {
   }
 }
 
-var formkitVersion = '202604082129';
+var formkitVersion = '202604091756';
 
 class AuroElement extends LitElement {
   static get properties() {
@@ -3925,7 +3842,7 @@ 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.
 
 
@@ -4030,7 +3947,7 @@ class AuroDropdown extends AuroElement {
     /**
      * @private
      */
-    this.runtimeUtils = new AuroLibraryRuntimeUtils$2();
+    this.runtimeUtils = new AuroLibraryRuntimeUtils$1();
 
     /**
      * @private
@@ -4448,7 +4365,7 @@ class AuroDropdown extends AuroElement {
    *
    */
   static register(name = "auro-dropdown") {
-    AuroLibraryRuntimeUtils$2.prototype.registerComponent(name, AuroDropdown);
+    AuroLibraryRuntimeUtils$1.prototype.registerComponent(name, AuroDropdown);
   }
 
   /**

package/components/dropdown/dist/registered.js

@@ -13,7 +13,7 @@ import 'lit-html/directives/unsafe-html.js';
 
 /* 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 */
 
@@ -3054,89 +3054,6 @@ class p{registerComponent(t,a){customElements.get(t)||customElements.define(t,cl
 
 var iconVersion = '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.
@@ -3819,7 +3736,7 @@ class AuroHelpText extends LitElement {
   }
 }
 
-var formkitVersion = '202604082129';
+var formkitVersion = '202604091756';
 
 class AuroElement extends LitElement {
   static get properties() {
@@ -3925,7 +3842,7 @@ 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.
 
 
@@ -4030,7 +3947,7 @@ class AuroDropdown extends AuroElement {
     /**
      * @private
      */
-    this.runtimeUtils = new AuroLibraryRuntimeUtils$2();
+    this.runtimeUtils = new AuroLibraryRuntimeUtils$1();
 
     /**
      * @private
@@ -4448,7 +4365,7 @@ class AuroDropdown extends AuroElement {
    *
    */
   static register(name = "auro-dropdown") {
-    AuroLibraryRuntimeUtils$2.prototype.registerComponent(name, AuroDropdown);
+    AuroLibraryRuntimeUtils$1.prototype.registerComponent(name, AuroDropdown);
   }
 
   /**