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

package/components/select/demo/index.md

@@ -21,7 +21,6 @@ A baseline `<auro-select>` using `<auro-menu>` and `<auro-menuoption>` elements.
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
   <!-- The below content is automatically added from ./../apiExamples/basic.html -->
   <auro-select>
-    <span slot="ariaLabel.close">Close Popup</span>
     <span slot="bib.fullscreen.headline">Bib Headline</span>
     <span slot="label">Select Example</span>
     <auro-menu>
@@ -59,7 +58,6 @@ A baseline `<auro-select>` using `<auro-menu>` and `<auro-menuoption>` elements.
 
 ```html
 <auro-select>
-  <span slot="ariaLabel.close">Close Popup</span>
   <span slot="bib.fullscreen.headline">Bib Headline</span>
   <span slot="label">Select Example</span>
   <auro-menu>
@@ -104,7 +102,6 @@ The `classic` layout is default for `auro-select`. No customization is needed to
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
   <!-- The below content is automatically added from ./../apiExamples/basic.html -->
   <auro-select>
-    <span slot="ariaLabel.close">Close Popup</span>
     <span slot="bib.fullscreen.headline">Bib Headline</span>
     <span slot="label">Select Example</span>
     <auro-menu>
@@ -125,7 +122,6 @@ The `classic` layout is default for `auro-select`. No customization is needed to
 
 ```html
 <auro-select>
-  <span slot="ariaLabel.close">Close Popup</span>
   <span slot="bib.fullscreen.headline">Bib Headline</span>
   <span slot="label">Select Example</span>
   <auro-menu>
@@ -158,7 +154,6 @@ The `emphasized` layout supports the following sizes:
   <!-- The below content is automatically added from ./../apiExamples/emphasized/basic-ondark.html -->
   <div>
     <auro-select layout="emphasized" shape="pill" size="xl" ondark required style="width:300px;">
-      <span slot="ariaLabel.close">Close Popup</span>
       <span slot="label">Label</span>
       <span slot="helpText">Help Text</span>
       <auro-menu nocheckmark>
@@ -234,7 +229,6 @@ The `emphasized` layout supports the following sizes:
 ```html
 <div>
   <auro-select layout="emphasized" shape="pill" size="xl" ondark required style="width:300px;">
-    <span slot="ariaLabel.close">Close Popup</span>
     <span slot="label">Label</span>
     <span slot="helpText">Help Text</span>
     <auro-menu nocheckmark>
@@ -312,7 +306,6 @@ The `snowflake` layout is a unique, one off layout that does not follow the norm
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/snowflake/basic-ondark.html) -->
   <!-- The below content is automatically added from ./../apiExamples/snowflake/basic-ondark.html -->
   <auro-select layout="snowflake" shape="snowflake" ondark required style="width:300px;">
-    <span slot="ariaLabel.close">Close Popup</span>
     <span slot="label">Label</span>
     <span slot="helpText">Help Text</span>
     <auro-menu nocheckmark>
@@ -342,7 +335,6 @@ The `snowflake` layout is a unique, one off layout that does not follow the norm
 
 ```html
 <auro-select layout="snowflake" shape="snowflake" ondark required style="width:300px;">
-  <span slot="ariaLabel.close">Close Popup</span>
   <span slot="label">Label</span>
   <span slot="helpText">Help Text</span>
   <auro-menu nocheckmark>

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

@@ -559,7 +559,7 @@ const {
 
 /* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
 
-let AuroLibraryRuntimeUtils$5 = class AuroLibraryRuntimeUtils {
+let AuroLibraryRuntimeUtils$6 = class AuroLibraryRuntimeUtils {
 
   /* eslint-disable jsdoc/require-param */
 
@@ -629,7 +629,7 @@ let AuroLibraryRuntimeUtils$5 = class AuroLibraryRuntimeUtils {
 class AuroFormValidation {
 
   constructor() {
-    this.runtimeUtils = new AuroLibraryRuntimeUtils$5();
+    this.runtimeUtils = new AuroLibraryRuntimeUtils$6();
   }
 
   /**
@@ -4213,7 +4213,7 @@ var tokensCss$4 = i$5`: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$5 = class AuroLibraryRuntimeUtils {
 
   /* eslint-disable jsdoc/require-param */
 
@@ -4294,7 +4294,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$2 {
     this.onDark = false;
     this.hasTextContent = false;
 
-    AuroLibraryRuntimeUtils$4.prototype.handleComponentTagRename(this, 'auro-helptext');
+    AuroLibraryRuntimeUtils$5.prototype.handleComponentTagRename(this, 'auro-helptext');
   }
 
   static get styles() {
@@ -4350,7 +4350,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$2 {
    *
    */
   static register(name = "auro-helptext") {
-    AuroLibraryRuntimeUtils$4.prototype.registerComponent(name, AuroHelpText);
+    AuroLibraryRuntimeUtils$5.prototype.registerComponent(name, AuroHelpText);
   }
 
   updated() {
@@ -5467,7 +5467,7 @@ var tokenCss = i$5`:host{--ds-auro-dropdownbib-header-boxshadow-color: var(--ds-
 
 /* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
 
-let AuroLibraryRuntimeUtils$2 = class AuroLibraryRuntimeUtils {
+let AuroLibraryRuntimeUtils$3 = class AuroLibraryRuntimeUtils {
 
   /* eslint-disable jsdoc/require-param */
 
@@ -6050,7 +6050,7 @@ var shapeSize = i$5`.shape-rounded-xl{min-height:68px;max-height:68px;border-sty
 
 /* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
 
-let AuroLibraryRuntimeUtils$1$1 = class AuroLibraryRuntimeUtils {
+let AuroLibraryRuntimeUtils$2 = class AuroLibraryRuntimeUtils {
 
   /* eslint-disable jsdoc/require-param */
 
@@ -6145,7 +6145,7 @@ class AuroLoader extends i$2 {
     /**
      * @private
      */
-    this.runtimeUtils = new AuroLibraryRuntimeUtils$1$1();
+    this.runtimeUtils = new AuroLibraryRuntimeUtils$2();
 
     this.orbit = false;
     this.ringworm = false;
@@ -6208,7 +6208,7 @@ class AuroLoader extends i$2 {
    *
    */
   static register(name = "auro-loader") {
-    AuroLibraryRuntimeUtils$1$1.prototype.registerComponent(name, AuroLoader);
+    AuroLibraryRuntimeUtils$2.prototype.registerComponent(name, AuroLoader);
   }
 
   firstUpdated() {
@@ -6488,7 +6488,7 @@ class AuroButton extends AuroElement$1 {
    *
    */
   static register(name = "auro-button") {
-    AuroLibraryRuntimeUtils$2.prototype.registerComponent(name, AuroButton);
+    AuroLibraryRuntimeUtils$3.prototype.registerComponent(name, AuroButton);
   }
 
   /**
@@ -6825,7 +6825,7 @@ var colorCss$4 = i$5`:host{color:var(--ds-auro-icon-color)}:host([customColor]){
 
 /* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
 
-let AuroLibraryRuntimeUtils$3 = class AuroLibraryRuntimeUtils {
+let AuroLibraryRuntimeUtils$1$1 = class AuroLibraryRuntimeUtils {
 
   /* eslint-disable jsdoc/require-param */
 
@@ -6907,7 +6907,7 @@ let AuroIcon$1 = class AuroIcon extends BaseIcon$1 {
    */
   privateDefaults() {
     this.uri = 'https://cdn.jsdelivr.net/npm/@alaskaairux/icons@latest/dist';
-    this.runtimeUtils = new AuroLibraryRuntimeUtils$3();
+    this.runtimeUtils = new AuroLibraryRuntimeUtils$1$1();
   }
 
   // function to define props used within the scope of this component
@@ -6989,7 +6989,7 @@ let AuroIcon$1 = class AuroIcon extends BaseIcon$1 {
    *
    */
   static register(name = "auro-icon") {
-    AuroLibraryRuntimeUtils$3.prototype.registerComponent(name, AuroIcon);
+    AuroLibraryRuntimeUtils$1$1.prototype.registerComponent(name, AuroIcon);
   }
 
   connectedCallback() {
@@ -7059,9 +7059,79 @@ let AuroIcon$1 = class AuroIcon extends BaseIcon$1 {
   }
 };
 
-var iconVersion$1 = '8.1.0';
+var iconVersion$1 = '8.0.4';
+
+// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
+// See LICENSE in the project root for license information.
+
+// ---------------------------------------------------------------------
 
-var styleCss$5 = i$5`.body-default{font-size:var(--wcss-body-default-font-size, 1rem);line-height:var(--wcss-body-default-line-height, 1.5)}.body-default,.body-lg{font-family:var(--wcss-body-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-lg{font-size:var(--wcss-body-lg-font-size, 1.125rem);line-height:var(--wcss-body-lg-line-height, 1.63)}.body-sm{font-size:var(--wcss-body-sm-font-size, 0.875rem);line-height:var(--wcss-body-sm-line-height, 1.25)}.body-sm,.body-xs{font-family:var(--wcss-body-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-xs{font-size:var(--wcss-body-xs-font-size, 0.75rem);line-height:var(--wcss-body-xs-line-height, 1)}.body-2xs{font-family:var(--wcss-body-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-body-2xs-font-size, 0.625rem);font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0);line-height:var(--wcss-body-2xs-line-height, 0.88)}.display-2xl{font-family:var(--wcss-display-2xl-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-2xl-font-size, clamp(3.5rem, 6vw, 5.375rem));font-weight:var(--wcss-display-2xl-weight, 300);letter-spacing:var(--wcss-display-2xl-letter-spacing, 0);line-height:var(--wcss-display-2xl-line-height, 1.3)}.display-xl{font-family:var(--wcss-display-xl-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xl-font-size, clamp(3rem, 5.3333333333vw, 4.5rem));font-weight:var(--wcss-display-xl-weight, 300);letter-spacing:var(--wcss-display-xl-letter-spacing, 0);line-height:var(--wcss-display-xl-line-height, 1.3)}.display-lg{font-family:var(--wcss-display-lg-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-lg-font-size, clamp(2.75rem, 4.6666666667vw, 4rem));font-weight:var(--wcss-display-lg-weight, 300);letter-spacing:var(--wcss-display-lg-letter-spacing, 0);line-height:var(--wcss-display-lg-line-height, 1.3)}.display-md{font-family:var(--wcss-display-md-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-md-font-size, clamp(2.5rem, 4vw, 3.5rem));font-weight:var(--wcss-display-md-weight, 300);letter-spacing:var(--wcss-display-md-letter-spacing, 0);line-height:var(--wcss-display-md-line-height, 1.3)}.display-sm{font-family:var(--wcss-display-sm-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-sm-font-size, clamp(2rem, 3.6666666667vw, 3rem));font-weight:var(--wcss-display-sm-weight, 300);letter-spacing:var(--wcss-display-sm-letter-spacing, 0);line-height:var(--wcss-display-sm-line-height, 1.3)}.display-xs{font-family:var(--wcss-display-xs-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xs-font-size, clamp(1.75rem, 3vw, 2.375rem));font-weight:var(--wcss-display-xs-weight, 300);letter-spacing:var(--wcss-display-xs-letter-spacing, 0);line-height:var(--wcss-display-xs-line-height, 1.3)}.heading-xl{font-family:var(--wcss-heading-xl-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xl-font-size, clamp(2rem, 3vw, 2.5rem));font-weight:var(--wcss-heading-xl-weight, 300);letter-spacing:var(--wcss-heading-xl-letter-spacing, 0);line-height:var(--wcss-heading-xl-line-height, 1.3)}.heading-lg{font-family:var(--wcss-heading-lg-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-lg-font-size, clamp(1.75rem, 2.6666666667vw, 2.25rem));font-weight:var(--wcss-heading-lg-weight, 300);letter-spacing:var(--wcss-heading-lg-letter-spacing, 0);line-height:var(--wcss-heading-lg-line-height, 1.3)}.heading-md{font-family:var(--wcss-heading-md-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-md-font-size, clamp(1.625rem, 2.3333333333vw, 1.75rem));font-weight:var(--wcss-heading-md-weight, 300);letter-spacing:var(--wcss-heading-md-letter-spacing, 0);line-height:var(--wcss-heading-md-line-height, 1.3)}.heading-sm{font-family:var(--wcss-heading-sm-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-sm-font-size, clamp(1.375rem, 2vw, 1.5rem));font-weight:var(--wcss-heading-sm-weight, 300);letter-spacing:var(--wcss-heading-sm-letter-spacing, 0);line-height:var(--wcss-heading-sm-line-height, 1.3)}.heading-xs{font-family:var(--wcss-heading-xs-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xs-font-size, clamp(1.25rem, 1.6666666667vw, 1.25rem));font-weight:var(--wcss-heading-xs-weight, 450);letter-spacing:var(--wcss-heading-xs-letter-spacing, 0);line-height:var(--wcss-heading-xs-line-height, 1.3)}.heading-2xs{font-family:var(--wcss-heading-2xs-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-2xs-font-size, clamp(1.125rem, 1.5vw, 1.125rem));font-weight:var(--wcss-heading-2xs-weight, 450);letter-spacing:var(--wcss-heading-2xs-letter-spacing, 0);line-height:var(--wcss-heading-2xs-line-height, 1.3)}.accent-2xl{font-family:var(--wcss-accent-2xl-family, "Good OT", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xl-font-size, clamp(2rem, 3.1666666667vw, 2.375rem));font-weight:var(--wcss-accent-2xl-weight, 450);letter-spacing:var(--wcss-accent-2xl-letter-spacing, 0.05em);line-height:var(--wcss-accent-2xl-line-height, 1)}.accent-xl{font-family:var(--wcss-accent-xl-family, "Good OT", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xl-font-size, clamp(1.625rem, 2.3333333333vw, 2rem));font-weight:var(--wcss-accent-xl-weight, 450);letter-spacing:var(--wcss-accent-xl-letter-spacing, 0.05em);line-height:var(--wcss-accent-xl-line-height, 1.3)}.accent-lg{font-family:var(--wcss-accent-lg-family, "Good OT", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-lg-font-size, clamp(1.5rem, 2.1666666667vw, 1.75rem));font-weight:var(--wcss-accent-lg-weight, 450);letter-spacing:var(--wcss-accent-lg-letter-spacing, 0.05em);line-height:var(--wcss-accent-lg-line-height, 1.3)}.accent-md{font-family:var(--wcss-accent-md-family, "Good OT", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-md-font-size, clamp(1.375rem, 1.8333333333vw, 1.5rem));font-weight:var(--wcss-accent-md-weight, 500);letter-spacing:var(--wcss-accent-md-letter-spacing, 0.05em);line-height:var(--wcss-accent-md-line-height, 1.3)}.accent-sm{font-family:var(--wcss-accent-sm-family, "Good OT", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-sm-font-size, clamp(1.125rem, 1.5vw, 1.25rem));font-weight:var(--wcss-accent-sm-weight, 500);letter-spacing:var(--wcss-accent-sm-letter-spacing, 0.05em);line-height:var(--wcss-accent-sm-line-height, 1.3)}.accent-xs{font-family:var(--wcss-accent-xs-family, "Good OT", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xs-font-size, clamp(1rem, 1.3333333333vw, 1rem));font-weight:var(--wcss-accent-xs-weight, 500);letter-spacing:var(--wcss-accent-xs-letter-spacing, 0.1em);line-height:var(--wcss-accent-xs-line-height, 1.3)}.accent-2xs{font-family:var(--wcss-accent-2xs-family, "Good OT", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xs-font-size, clamp(0.875rem, 1.1666666667vw, 0.875rem));font-weight:var(--wcss-accent-2xs-weight, 450);letter-spacing:var(--wcss-accent-2xs-letter-spacing, 0.1em);line-height:var(--wcss-accent-2xs-line-height, 1.3)}:host([no-margin-block]) .heading{margin-block:0}.util_stackMarginnone--bottom{margin-bottom:0}.util_stackMargin25--bottom{margin-bottom:var(--ds-size-25, 0.125rem)}.util_stackMargin50--bottom{margin-bottom:var(--ds-size-50, 0.25rem)}.util_stackMargin100--bottom{margin-bottom:var(--ds-size-100, 0.5rem)}.util_stackMargin150--bottom{margin-bottom:var(--ds-size-150, 0.75rem)}.util_stackMargin200--bottom{margin-bottom:var(--ds-size-200, 1rem)}.util_stackMargin300--bottom{margin-bottom:var(--ds-size-300, 1.5rem)}.util_stackMargin400--bottom{margin-bottom:var(--ds-size-400, 2rem)}.util_stackMargin600--bottom{margin-bottom:var(--ds-size-600, 3rem)}.util_stackMargin800--bottom{margin-bottom:var(--ds-size-800, 4rem)}.util_stackMarginnone--top{margin-top:0}.util_stackMargin25--top{margin-top:var(--ds-size-25, 0.125rem)}.util_stackMargin50--top{margin-top:var(--ds-size-50, 0.25rem)}.util_stackMargin100--top{margin-top:var(--ds-size-100, 0.5rem)}.util_stackMargin150--top{margin-top:var(--ds-size-150, 0.75rem)}.util_stackMargin200--top{margin-top:var(--ds-size-200, 1rem)}.util_stackMargin300--top{margin-top:var(--ds-size-300, 1.5rem)}.util_stackMargin400--top{margin-top:var(--ds-size-400, 2rem)}.util_stackMargin600--top{margin-top:var(--ds-size-600, 3rem)}.util_stackMargin800--top{margin-top:var(--ds-size-800, 4rem)}`;
+/* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
+
+let AuroLibraryRuntimeUtils$4 = 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);
+  }
+};
+
+var styleCss$5 = i$5`.heading{margin:1.75rem 0;letter-spacing:var(--ds-text-heading-default-spacing, -0.2px);font-weight:var(--ds-text-heading-default-weight, 500)}.heading--display{margin-top:0;font-size:var(--ds-text-heading-display-size-breakpoint-sm, 2.75rem);font-weight:var(--ds-text-heading-display-weight, 100);line-height:var(--ds-text-heading-display-height-breakpoint-sm, 3.375rem)}@media screen and (min-width: 768px){.heading--display{font-size:var(--ds-text-heading-display-size-breakpoint-md, 3rem);line-height:var(--ds-text-heading-display-height-breakpoint-md, 3.75rem)}}@media screen and (min-width: 1024px){.heading--display{font-size:var(--ds-text-heading-display-size-breakpoint-lg, 3.5rem);line-height:var(--ds-text-heading-display-height-breakpoint-lg, 4.25rem)}}.heading--800{font-size:var(--ds-text-heading-800-size-breakpoint-sm, 2rem);font-weight:var(--ds-text-heading-800-weight, 500);line-height:var(--ds-text-heading-800-height-breakpoint-sm, 2.375rem)}@media screen and (min-width: 768px){.heading--800{font-size:var(--ds-text-heading-800-size-breakpoint-md, 2.25rem);line-height:var(--ds-text-heading-800-height-breakpoint-md, 2.625rem)}}@media screen and (min-width: 1024px){.heading--800{font-size:var(--ds-text-heading-800-size-breakpoint-lg, 2.5rem);line-height:var(--ds-text-heading-800-height-breakpoint-lg, 3rem)}}.heading--700{font-size:var(--ds-text-heading-700-size-breakpoint-sm, 1.75rem);font-weight:var(--ds-text-heading-700-weight, 500);line-height:var(--ds-text-heading-700-height-breakpoint-sm, 2.125rem)}@media screen and (min-width: 768px){.heading--700{font-size:var(--ds-text-heading-700-size-breakpoint-md, 2rem);line-height:var(--ds-text-heading-700-height-breakpoint-md, 2.375rem)}}@media screen and (min-width: 1024px){.heading--700{font-size:var(--ds-text-heading-700-size-breakpoint-lg, 2.25rem);line-height:var(--ds-text-heading-700-height-breakpoint-lg, 2.75rem)}}.heading--600{margin:1rem 0;font-size:var(--ds-text-heading-600-size-breakpoint-sm, 1.625rem);font-weight:var(--ds-text-heading-600-weight, 300);line-height:var(--ds-text-heading-600-height-breakpoint-sm, 1.875rem)}@media screen and (min-width: 768px){.heading--600{font-size:var(--ds-text-heading-600-size-breakpoint-md, 1.75rem);line-height:var(--ds-text-heading-600-height-breakpoint-md, 2.125rem)}}@media screen and (min-width: 1024px){.heading--600{font-size:var(--ds-text-heading-600-size-breakpoint-lg, 1.75rem);line-height:var(--ds-text-heading-600-height-breakpoint-lg, 2.25rem)}}.heading--500{margin:1rem 0;font-size:var(--ds-text-heading-500-size-breakpoint-sm, 1.375rem);font-weight:var(--ds-text-heading-500-weight, 300);line-height:var(--ds-text-heading-500-height-breakpoint-sm, 1.625rem)}@media screen and (min-width: 768px){.heading--500{font-size:var(--ds-text-heading-500-size-breakpoint-md, 1.5rem);line-height:var(--ds-text-heading-500-height-breakpoint-md, 1.875rem)}}@media screen and (min-width: 1024px){.heading--500{font-size:var(--ds-text-heading-500-size-breakpoint-lg, 1.5rem);line-height:var(--ds-text-heading-500-height-breakpoint-lg, 2rem)}}.heading--400{margin:.75rem 0;font-size:var(--ds-text-heading-400-size, 1.25rem);font-weight:var(--ds-text-heading-400-weight, 300);line-height:var(--ds-text-heading-400-height, 1.625rem)}.heading--300{margin:.75rem 0;font-size:var(--ds-text-heading-300-size, 1.125rem);font-weight:var(--ds-text-heading-300-weight, 300);line-height:var(--ds-text-heading-300-height, 1.625rem)}:host([no-margin-block]) .heading{margin-block:0}.util_stackMarginnone--bottom{margin-bottom:0}.util_stackMargin25--bottom{margin-bottom:var(--ds-size-25, 0.125rem)}.util_stackMargin50--bottom{margin-bottom:var(--ds-size-50, 0.25rem)}.util_stackMargin100--bottom{margin-bottom:var(--ds-size-100, 0.5rem)}.util_stackMargin150--bottom{margin-bottom:var(--ds-size-150, 0.75rem)}.util_stackMargin200--bottom{margin-bottom:var(--ds-size-200, 1rem)}.util_stackMargin300--bottom{margin-bottom:var(--ds-size-300, 1.5rem)}.util_stackMargin400--bottom{margin-bottom:var(--ds-size-400, 2rem)}.util_stackMargin600--bottom{margin-bottom:var(--ds-size-600, 3rem)}.util_stackMargin800--bottom{margin-bottom:var(--ds-size-800, 4rem)}.util_stackMarginnone--top{margin-top:0}.util_stackMargin25--top{margin-top:var(--ds-size-25, 0.125rem)}.util_stackMargin50--top{margin-top:var(--ds-size-50, 0.25rem)}.util_stackMargin100--top{margin-top:var(--ds-size-100, 0.5rem)}.util_stackMargin150--top{margin-top:var(--ds-size-150, 0.75rem)}.util_stackMargin200--top{margin-top:var(--ds-size-200, 1rem)}.util_stackMargin300--top{margin-top:var(--ds-size-300, 1.5rem)}.util_stackMargin400--top{margin-top:var(--ds-size-400, 2rem)}.util_stackMargin600--top{margin-top:var(--ds-size-600, 3rem)}.util_stackMargin800--top{margin-top:var(--ds-size-800, 4rem)}`;
 
 // Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -7071,12 +7141,13 @@ var styleCss$5 = i$5`.body-default{font-size:var(--wcss-body-default-font-size,
  * The auro-header component is a custom element to make using headers with the Auro Design System seamless and easy.
  *
  * @attr {Boolean} no-margin-block - if declared, margin-block will be set to `0`
+ * @attr {String} level - Determines heading level for HTML element. Options are `1` - `6`
+ * @attr {String} display - Determines presentation of header. Options are `display`, `800`, `700`, `600`, `500`, `400`, `300`.
  * @attr {String} color - Allows user to pass in CSS custom property or direct hex value to change the color of the header
- * @attr {String} display - Determines the visual appearance of the header. Options are `display`, `800`, `700`, `600`, `500`, `400`, `300`.
- * @attr {String} level - Determines the semantic heading level of the HTML element. Options are `1` - `6`
  * @attr {String} margin - Specify the margin(s) to be altered. Options are `top`, `bottom`, or `both`.
  * @attr {String} size - Specify size of margin adjustment, either `none`, `25`, `50`, `100`, `150`, `200`, `300`, `400`, `600` or `800`.
  */
+
 /* eslint complexity: ["error", 21] */
 
 // build the component class
@@ -7089,7 +7160,7 @@ class AuroHeader extends i$2 {
     /**
      * @private
      */
-    this.runtimeUtils = new AuroLibraryRuntimeUtils$2();
+    this.runtimeUtils = new AuroLibraryRuntimeUtils$4();
   }
 
   // function to define props used within the scope of this component
@@ -7110,22 +7181,6 @@ class AuroHeader extends i$2 {
     return [styleCss$5];
   }
 
-  /**
-   * Mapping of display values to their corresponding CSS classes
-   * @private
-   */
-  static get displayClassMap() {
-    return {
-      'display': 'heading-xl',
-      '800': 'heading-xl',
-      '700': 'heading-lg',
-      '600': 'heading-md',
-      '500': 'heading-sm',
-      '400': 'heading-xs',
-      '300': 'heading-2xs'
-    };
-  }
-
   /**
    * This will register this element with the browser.
    * @param {string} [name="auro-header"] - The name of element that you want to register to.
@@ -7135,7 +7190,7 @@ class AuroHeader extends i$2 {
    *
    */
   static register(name = "auro-header") {
-    AuroLibraryRuntimeUtils$2.prototype.registerComponent(name, AuroHeader);
+    AuroLibraryRuntimeUtils$4.prototype.registerComponent(name, AuroHeader);
   }
 
   firstUpdated() {
@@ -7202,42 +7257,23 @@ class AuroHeader extends i$2 {
       this.display = 'display';
     }
 
-    const headingLevel = level || '1';
-    const spacingClasses = this.spacingDecision(this.size);
-    
-    // Get the CSS class based on the display prop
-    const headingClass = AuroHeader.displayClassMap[this.display];
-    
-    const classObject = {
-      'heading': true,
-      [`heading--${this.display}`]: true,
-      [headingClass]: true
-    };
-
-    // Add spacing classes to the class object if they exist
-    if (spacingClasses) {
-      const spacingClassArray = spacingClasses.split(' ');
-      spacingClassArray.forEach(cls => {
-        if (cls.trim()) {
-          classObject[cls.trim()] = true;
-        }
-      });
+    switch (level) {
+      case '2': return x`<h2 class="heading heading--${this.display} ${this.spacingDecision(this.size)}" style="color: ${o(this.color ? this.color : undefined)}"><slot></slot></h2>`;
+      case '3': return x`<h3 class="heading heading--${this.display} ${this.spacingDecision(this.size)}" style="color: ${o(this.color ? this.color : undefined)}"><slot></slot></h3>`;
+      case '4': return x`<h4 class="heading heading--${this.display} ${this.spacingDecision(this.size)}" style="color: ${o(this.color ? this.color : undefined)}"><slot></slot></h4>`;
+      case '5': return x`<h5 class="heading heading--${this.display} ${this.spacingDecision(this.size)}" style="color: ${o(this.color ? this.color : undefined)}"><slot></slot></h5>`;
+      case '6': return x`<h6 class="heading heading--${this.display} ${this.spacingDecision(this.size)}" style="color: ${o(this.color ? this.color : undefined)}"><slot></slot></h6>`;
+      default: return x`<h1 class="heading heading--${this.display} ${this.spacingDecision(this.size)}" style="color: ${o(this.color ? this.color : undefined)}"><slot></slot></h1>`;
     }
-
-    const headerClasses = e(classObject);
-
-    // unsafeStatic dynamically creates tag names at runtime
-    const tag = s(`h${headingLevel}`);
-    return u`<${tag} class="${headerClasses}" style="color: ${o(this.color ? this.color : undefined)}"><slot></slot></${tag}>`;
   }
-  
   // function that renders the HTML and CSS into  the scope of the component
+
   render() {
     return this.template(this.level);
   }
 }
 
-var headerVersion = '4.0.2';
+var headerVersion = '4.0.1';
 
 // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -7250,7 +7286,7 @@ class AuroBibtemplate extends i$2 {
 
     this.large = false;
 
-    AuroLibraryRuntimeUtils$2.prototype.handleComponentTagRename(this, 'auro-bibtemplate');
+    AuroLibraryRuntimeUtils$3.prototype.handleComponentTagRename(this, 'auro-bibtemplate');
 
     const versioning = new AuroDependencyVersioning();
 
@@ -7302,7 +7338,7 @@ class AuroBibtemplate extends i$2 {
    *
    */
   static register(name = "auro-bibtemplate") {
-    AuroLibraryRuntimeUtils$2.prototype.registerComponent(name, AuroBibtemplate);
+    AuroLibraryRuntimeUtils$3.prototype.registerComponent(name, AuroBibtemplate);
   }
 
   /**
@@ -7360,9 +7396,8 @@ class AuroBibtemplate extends i$2 {
       <div id="bibTemplate" part="bibtemplate">
       ${this.isFullscreen ? u`
         <div id="headerContainer">
-          <${this.buttonTag} id="closeButton" variant="ghost" shape="circle" size="sm" @click="${this.onCloseButtonClick}">
-            <span><slot name="ariaLabel.close">Close</slot></span>
-            <${this.iconTag} aria-hidden="true" category="interface" name="x-lg"></${this.iconTag}>
+          <${this.buttonTag} id="closeButton" aria-label="Close" variant="ghost" shape="circle" size="sm" @click="${this.onCloseButtonClick}">
+            <${this.iconTag} category="interface" name="x-lg"></${this.iconTag}>
           </${this.buttonTag}>
           <${this.headerTag} display="${this.large ? 'display' : '600'}" level="3" size="none" id="header" no-margin-block>
             <slot name="header"></slot>
@@ -7606,7 +7641,6 @@ var styleCss$3 = i$5`.util_displayInline{display:inline}.util_displayInlineBlock
  * The auro-select element is a wrapper for auro-dropdown and auro-menu to create a dropdown menu control.
  *
  * @slot - Default slot for the menu content.
- * @slot ariaLabel.close - Sets aria-label on close button in fullscreen bib
  * @slot bib.fullscreen.headline - Defines the headline to display above menu-options
  * @slot label - Defines the content of the label.
  * @slot {HTMLSlotElement} optionalLabel - Allows overriding the optional display text "(optional)", which appears next to the label.
@@ -7664,7 +7698,7 @@ class AuroSelect extends AuroElement$4 {
     /**
      * @private
      */
-    this.runtimeUtils = new AuroLibraryRuntimeUtils$5();
+    this.runtimeUtils = new AuroLibraryRuntimeUtils$6();
 
     /**
      * Generate unique names for dependency components.
@@ -8081,7 +8115,7 @@ class AuroSelect extends AuroElement$4 {
    *
    */
   static register(name = "auro-select") {
-    AuroLibraryRuntimeUtils$5.prototype.registerComponent(name, AuroSelect);
+    AuroLibraryRuntimeUtils$6.prototype.registerComponent(name, AuroSelect);
   }
 
   /**
@@ -8733,7 +8767,6 @@ class AuroSelect extends AuroElement$4 {
           </div>
           <div class="menuWrapper"></div>
           <${this.bibtemplateTag} ?large="${this.largeFullscreenHeadline}" @close-click="${this.hideBib}">
-            <slot name="ariaLabel.close" slot="ariaLabel.close">Close</slot>
             <slot></slot>
           </${this.bibtemplateTag}>
           <div slot="helpText">
@@ -8812,7 +8845,6 @@ class AuroSelect extends AuroElement$4 {
           </div>
           <div class="menuWrapper"></div>
           <${this.bibtemplateTag} ?large="${this.largeFullscreenHeadline}" @close-click="${this.hideBib}">
-            <slot name="ariaLabel.close" slot="ariaLabel.close">Close</slot>
             <slot></slot>
           </${this.bibtemplateTag}>
           <div slot="helpText">
@@ -8892,7 +8924,6 @@ class AuroSelect extends AuroElement$4 {
           </div>
           <div class="menuWrapper"></div>
           <${this.bibtemplateTag} ?large="${this.largeFullscreenHeadline}" @close-click="${this.hideBib}">
-            <slot name="ariaLabel.close" slot="ariaLabel.close">Close</slot>
             <slot></slot>
           </${this.bibtemplateTag}>
           <div slot="helpText">
@@ -9143,7 +9174,7 @@ class AuroMenu extends AuroElement$4 {
    *
    */
   static register(name = "auro-menu") {
-    AuroLibraryRuntimeUtils$5.prototype.registerComponent(name, AuroMenu);
+    AuroLibraryRuntimeUtils$6.prototype.registerComponent(name, AuroMenu);
   }
 
   /**
@@ -9187,7 +9218,7 @@ class AuroMenu extends AuroElement$4 {
   }
 
   firstUpdated() {
-    AuroLibraryRuntimeUtils$5.prototype.handleComponentTagRename(this, 'auro-menu');
+    AuroLibraryRuntimeUtils$6.prototype.handleComponentTagRename(this, 'auro-menu');
 
     this.loadingSlots = this.querySelectorAll("[slot='loadingText'], [slot='loadingIcon']");
     this.initializeMenu();
@@ -10176,7 +10207,7 @@ class AuroIcon extends BaseIcon {
   }
 }
 
-var iconVersion = '8.1.0';
+var iconVersion = '8.0.4';
 
 var checkmarkIcon = {"svg":"<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" aria-labelledby=\"checkmark-sm__desc\" class=\"ico_squareLarge\" role=\"img\" style=\"min-width:var(--auro-size-lg, var(--ds-size-300, 1.5rem));height:var(--auro-size-lg, var(--ds-size-300, 1.5rem));fill:currentColor\" viewBox=\"0 0 24 24\" part=\"svg\"><title/><desc id=\"checkmark-sm__desc\">a small check mark.</desc><path d=\"M8.461 11.84a.625.625 0 1 0-.922.844l2.504 2.738c.247.27.674.27.922 0l5.496-6a.625.625 0 1 0-.922-.844l-5.035 5.496z\"/></svg>"};
 
@@ -10219,7 +10250,7 @@ class AuroMenuOption extends AuroElement$4 {
     /**
      * @private
      */
-    this.runtimeUtils = new AuroLibraryRuntimeUtils$5();
+    this.runtimeUtils = new AuroLibraryRuntimeUtils$6();
   }
 
   static get properties() {
@@ -10264,7 +10295,7 @@ class AuroMenuOption extends AuroElement$4 {
    *
    */
   static register(name = "auro-menuoption") {
-    AuroLibraryRuntimeUtils$5.prototype.registerComponent(name, AuroMenuOption);
+    AuroLibraryRuntimeUtils$6.prototype.registerComponent(name, AuroMenuOption);
   }
 
   firstUpdated() {

package/components/select/demo/readme.md

@@ -84,7 +84,6 @@ This configuration enables proper module resolution for the component's TypeScri
 
 ```html
 <auro-select>
-  <span slot="ariaLabel.close">Close Popup</span>
   <span slot="bib.fullscreen.headline">Bib Headline</span>
   <span slot="label">Select Example</span>
   <auro-menu>

package/components/select/dist/auro-select.d.ts

@@ -2,7 +2,6 @@
  * The auro-select element is a wrapper for auro-dropdown and auro-menu to create a dropdown menu control.
  *
  * @slot - Default slot for the menu content.
- * @slot ariaLabel.close - Sets aria-label on close button in fullscreen bib
  * @slot bib.fullscreen.headline - Defines the headline to display above menu-options
  * @slot label - Defines the content of the label.
  * @slot {HTMLSlotElement} optionalLabel - Allows overriding the optional display text "(optional)", which appears next to the label.