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

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

@@ -256,7 +256,7 @@ let AuroDependencyVersioning$3 = class AuroDependencyVersioning {
 
 /* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
 
-let AuroLibraryRuntimeUtils$6 = class AuroLibraryRuntimeUtils {
+let AuroLibraryRuntimeUtils$7 = class AuroLibraryRuntimeUtils {
 
   /* eslint-disable jsdoc/require-param */
 
@@ -735,7 +735,7 @@ const {
 let AuroFormValidation$1 = class AuroFormValidation {
 
   constructor() {
-    this.runtimeUtils = new AuroLibraryRuntimeUtils$6();
+    this.runtimeUtils = new AuroLibraryRuntimeUtils$7();
   }
 
   /**
@@ -4279,7 +4279,7 @@ var tokensCss$6 = 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$5 = class AuroLibraryRuntimeUtils {
+let AuroLibraryRuntimeUtils$6 = class AuroLibraryRuntimeUtils {
 
   /* eslint-disable jsdoc/require-param */
 
@@ -4360,7 +4360,7 @@ let AuroHelpText$2 = class AuroHelpText extends i$2 {
     this.onDark = false;
     this.hasTextContent = false;
 
-    AuroLibraryRuntimeUtils$5.prototype.handleComponentTagRename(this, 'auro-helptext');
+    AuroLibraryRuntimeUtils$6.prototype.handleComponentTagRename(this, 'auro-helptext');
   }
 
   static get styles() {
@@ -4416,7 +4416,7 @@ let AuroHelpText$2 = class AuroHelpText extends i$2 {
    *
    */
   static register(name = "auro-helptext") {
-    AuroLibraryRuntimeUtils$5.prototype.registerComponent(name, AuroHelpText);
+    AuroLibraryRuntimeUtils$6.prototype.registerComponent(name, AuroHelpText);
   }
 
   updated() {
@@ -10483,9 +10483,6 @@ let AuroElement$2$1 = class AuroElement extends i$2 {
  * @prop {string} id - The id global attribute defines an identifier (ID) which must be unique in the whole document.
  * @attr id
  *
- * @slot ariaLabel.clear - Sets aria-label on clear button for screenreader to read
- * @slot ariaLabel.password.show - Sets aria-label on password button to toggle on showing password
- * @slot ariaLabel.password.hide - Sets aria-label on password button to toggle off showing password
  * @slot helpText - Sets the help text displayed below the input.
  * @slot label - Sets the label text for the input.
  * @slot {HTMLSlotElement} optionalLabel - Allows overriding the optional display text "(optional)", which appears next to the label.
@@ -13100,7 +13097,7 @@ var tokensCss$5 = 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 */
 
@@ -13181,7 +13178,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() {
@@ -13237,7 +13234,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() {
@@ -13551,13 +13548,12 @@ class AuroInput extends BaseInput {
         <${this.buttonTag}
           @click="${this.handleClickClear}"
           ?onDark="${this.onDark}"
+          aria-label="${i18n(this.lang, 'clearInput')}"
           class="notificationBtn clearBtn"
           shape="circle"
           size="sm"
           variant="ghost">
-          <span><slot name="ariaLabel.clear">Clear Input</slot></span>
           <${this.iconTag}
-            aria-hidden="true"
             ?customColor="${this.onDark}"
             category="interface"
             name="x-lg"
@@ -13580,23 +13576,18 @@ class AuroInput extends BaseInput {
           @click="${this.handleClickShowPassword}"
           ?onDark="${this.onDark}"
           class="notificationBtn passwordBtn"
+          aria-label="${this.showPassword ? i18n(this.lang, "hidePassword") : i18n(this.lang, "showPassword")}"
           shape="circle"
           size="sm"
           variant="ghost">
-            <span>
-            ${this.showPassword ? u$2`<slot name="ariaLabel.password.hide">Hide Password</slot>`
-              : u$2`<slot name="ariaLabel.password.show">Show Password</slot>`}
-            </span>
           <${this.iconTag}
             ?customColor="${this.onDark}"
-            aria-hidden="true"
             ?hidden=${!this.showPassword}
             category="interface"
             name="hide-password-stroke">
           </${this.iconTag}>
           <${this.iconTag}
             ?customColor="${this.onDark}"
-            aria-hidden="true"
             ?hidden=${this.showPassword}
             category="interface"
             name="view-password-stroke">
@@ -13821,7 +13812,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 */
 
@@ -14404,7 +14395,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 */
 
@@ -14499,7 +14490,7 @@ class AuroLoader extends i$2 {
     /**
      * @private
      */
-    this.runtimeUtils = new AuroLibraryRuntimeUtils$1$1();
+    this.runtimeUtils = new AuroLibraryRuntimeUtils$2();
 
     this.orbit = false;
     this.ringworm = false;
@@ -14562,7 +14553,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() {
@@ -14842,7 +14833,7 @@ class AuroButton extends AuroElement$1$1 {
    *
    */
   static register(name = "auro-button") {
-    AuroLibraryRuntimeUtils$2.prototype.registerComponent(name, AuroButton);
+    AuroLibraryRuntimeUtils$3.prototype.registerComponent(name, AuroButton);
   }
 
   /**
@@ -15179,7 +15170,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 */
 
@@ -15261,7 +15252,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
@@ -15343,7 +15334,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() {
@@ -15413,9 +15404,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.
+
+// ---------------------------------------------------------------------
+
+/* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
 
-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)}`;
+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.
@@ -15425,12 +15486,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
@@ -15443,7 +15505,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
@@ -15464,22 +15526,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.
@@ -15489,7 +15535,7 @@ class AuroHeader extends i$2 {
    *
    */
   static register(name = "auro-header") {
-    AuroLibraryRuntimeUtils$2.prototype.registerComponent(name, AuroHeader);
+    AuroLibraryRuntimeUtils$4.prototype.registerComponent(name, AuroHeader);
   }
 
   firstUpdated() {
@@ -15556,42 +15602,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$1(`h${headingLevel}`);
-    return u$2`<${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.
@@ -15604,7 +15631,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();
 
@@ -15656,7 +15683,7 @@ class AuroBibtemplate extends i$2 {
    *
    */
   static register(name = "auro-bibtemplate") {
-    AuroLibraryRuntimeUtils$2.prototype.registerComponent(name, AuroBibtemplate);
+    AuroLibraryRuntimeUtils$3.prototype.registerComponent(name, AuroBibtemplate);
   }
 
   /**
@@ -15714,9 +15741,8 @@ class AuroBibtemplate extends i$2 {
       <div id="bibTemplate" part="bibtemplate">
       ${this.isFullscreen ? u$2`
         <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>
@@ -16056,8 +16082,6 @@ class AuroHelpText extends i$2 {
 /**
  * @slot - Default slot for the menu content.
  * @slot {HTMLSlotElement} optionalLabel - Allows overriding the optional display text "(optional)", which appears next to the label.
- * @slot ariaLabel.clear - Sets aria-label on clear button
- * @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 helpText - Defines the content of the helpText.
@@ -16106,7 +16130,7 @@ class AuroCombobox extends AuroElement$1 {
 
     this.validation = new AuroFormValidation$1();
 
-    this.runtimeUtils = new AuroLibraryRuntimeUtils$6();
+    this.runtimeUtils = new AuroLibraryRuntimeUtils$7();
 
     this.isHiddenWhileLoading = false;
 
@@ -16425,7 +16449,7 @@ class AuroCombobox extends AuroElement$1 {
    *
    */
   static register(name = 'auro-combobox') {
-    AuroLibraryRuntimeUtils$6.prototype.registerComponent(name, AuroCombobox);
+    AuroLibraryRuntimeUtils$7.prototype.registerComponent(name, AuroCombobox);
   }
 
   /**
@@ -17025,13 +17049,13 @@ class AuroCombobox extends AuroElement$1 {
 
         this.handleMenuOptions();
         break;
-
-      // Programmatically inject as the slot cannot be carried over to bibtemplate.
-      // It's because the bib is/will be separated from dropdown to body.
       case 'label':
-      case 'ariaLabel.clear':
+        // Programmatically inject as the slot cannot be carried over to bibtemplate.
+        // It's because the bib is/will be separated from dropdown to body.
+        this.transportAssignedNodes(event.target, this.inputInBib, "label");
+        break;
       case 'optionalLabel':
-        this.transportAssignedNodes(event.target, this.inputInBib, event.target.name);
+        this.transportAssignedNodes(event.target, this.inputInBib, "optionalLabel");
         break;
       case 'bib.fullscreen.headline':
         this.transportAssignedNodes(event.target, this.bibtemplate, 'header');
@@ -17102,7 +17126,6 @@ class AuroCombobox extends AuroElement$1 {
               shape="${this.shape}"
               size="${this.size}"
               slot="trigger">
-              <slot name="ariaLabel.clear" slot="ariaLabel.clear" @slotchange="${this.handleSlotChange}"></slot>
               <slot name="label" slot="label" @slotchange="${this.handleSlotChange}"></slot>
               <slot name="optionalLabel" slot="optionalLabel" @slotchange="${this.handleSlotChange}"> (optional)</slot>
               <slot name="displayValue" slot="displayValue"></slot>
@@ -17110,7 +17133,6 @@ class AuroCombobox extends AuroElement$1 {
 
           <${this.bibtemplateTag} ?large="${this.largeFullscreenHeadline}">
             <slot name="bib.fullscreen.headline" slot="header"></slot>
-            <slot name="ariaLabel.close" slot="ariaLabel.close">Close</slot>
             <slot></slot>
             <${this.inputTag}
               @input="${this.handleInputValueChange}"
@@ -17366,7 +17388,7 @@ class AuroMenu extends AuroElement$1 {
    *
    */
   static register(name = "auro-menu") {
-    AuroLibraryRuntimeUtils$6.prototype.registerComponent(name, AuroMenu);
+    AuroLibraryRuntimeUtils$7.prototype.registerComponent(name, AuroMenu);
   }
 
   /**
@@ -17410,7 +17432,7 @@ class AuroMenu extends AuroElement$1 {
   }
 
   firstUpdated() {
-    AuroLibraryRuntimeUtils$6.prototype.handleComponentTagRename(this, 'auro-menu');
+    AuroLibraryRuntimeUtils$7.prototype.handleComponentTagRename(this, 'auro-menu');
 
     this.loadingSlots = this.querySelectorAll("[slot='loadingText'], [slot='loadingIcon']");
     this.initializeMenu();
@@ -18399,7 +18421,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>"};
 
@@ -18442,7 +18464,7 @@ class AuroMenuOption extends AuroElement$1 {
     /**
      * @private
      */
-    this.runtimeUtils = new AuroLibraryRuntimeUtils$6();
+    this.runtimeUtils = new AuroLibraryRuntimeUtils$7();
   }
 
   static get properties() {
@@ -18487,7 +18509,7 @@ class AuroMenuOption extends AuroElement$1 {
    *
    */
   static register(name = "auro-menuoption") {
-    AuroLibraryRuntimeUtils$6.prototype.registerComponent(name, AuroMenuOption);
+    AuroLibraryRuntimeUtils$7.prototype.registerComponent(name, AuroMenuOption);
   }
 
   firstUpdated() {

package/components/combobox/demo/index.md

@@ -28,8 +28,6 @@ The `<auro-combobox>` element should be used in situations where users may:
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/classic/basic.html) -->
   <!-- The below content is automatically added from ./../apiExamples/classic/basic.html -->
   <auro-combobox layout="classic" shape="classic" size="lg" placeholder="Placeholder content" required style="width: 249px;">
-    <span slot="ariaLabel.close">Close combobox</span>
-    <span slot="ariaLabel.clear">Clear All</span>
     <span slot="bib.fullscreen.headline">Bib Header</span>
     <span slot="label">Name</span>
     <auro-menu>
@@ -50,8 +48,6 @@ The `<auro-combobox>` element should be used in situations where users may:
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/classic/onDark.html) -->
   <!-- The below content is automatically added from ./../apiExamples/classic/onDark.html -->
   <auro-combobox layout="classic" shape="classic" size="lg" placeholder="Placeholder content" ondark required style="width: 249px;">
-    <span slot="ariaLabel.close">Close combobox</span>
-    <span slot="ariaLabel.clear">Clear All</span>
     <span slot="bib.fullscreen.headline">Bib Header</span>
     <span slot="label">Name</span>
     <auro-menu>
@@ -75,8 +71,6 @@ The `<auro-combobox>` element should be used in situations where users may:
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/emphasized/basic.html) -->
   <!-- The below content is automatically added from ./../apiExamples/emphasized/basic.html -->
   <auro-combobox layout="emphasized" value="Oranges" shape="pill" size="xl" placeholder="Placeholder content" required ondark style="width: 249px;">
-    <span slot="ariaLabel.close">Close combobox</span>
-    <span slot="ariaLabel.clear">Clear All</span>
     <span slot="bib.fullscreen.headline">Bib Header</span>
     <span slot="label">Name</span>
     <auro-menu>
@@ -106,8 +100,6 @@ The `<auro-combobox>` element should be used in situations where users may:
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/snowflake/basic.html) -->
   <!-- The below content is automatically added from ./../apiExamples/snowflake/basic.html -->
   <auro-combobox layout="snowflake" shape="snowflake" size="lg" placeholder="Placeholder content" required ondark style="width: 249px;">
-    <span slot="ariaLabel.close">Close combobox</span>
-    <span slot="ariaLabel.clear">Clear All</span>
     <span slot="bib.fullscreen.headline">Bib Header</span>
     <span slot="label">Name</span>
     <auro-menu>
@@ -128,8 +120,6 @@ The `<auro-combobox>` element should be used in situations where users may:
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
   <!-- The below content is automatically added from ./../apiExamples/basic.html -->
   <auro-combobox>
-    <span slot="ariaLabel.close">Close combobox</span>
-    <span slot="ariaLabel.clear">Clear All</span>
     <span slot="bib.fullscreen.headline">Bib Header</span>
     <span slot="label">Name</span>
     <auro-menu>
@@ -167,8 +157,6 @@ The `<auro-combobox>` element should be used in situations where users may:
 
 ```html
 <auro-combobox>
-  <span slot="ariaLabel.close">Close combobox</span>
-  <span slot="ariaLabel.clear">Clear All</span>
   <span slot="bib.fullscreen.headline">Bib Header</span>
   <span slot="label">Name</span>
   <auro-menu>