@aurodesignsystem-dev/auro-formkit 0.0.0-pr624.12 → 0.0.0-pr624.14

package/components/select/dist/index.js

@@ -516,7 +516,7 @@ const {
 
 /* 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 */
 
@@ -586,7 +586,7 @@ let AuroLibraryRuntimeUtils$4 = class AuroLibraryRuntimeUtils {
 class AuroFormValidation {
 
   constructor() {
-    this.runtimeUtils = new AuroLibraryRuntimeUtils$4();
+    this.runtimeUtils = new AuroLibraryRuntimeUtils$5();
   }
 
   /**
@@ -3843,7 +3843,7 @@ var styleSnowflakeCss = css`:host{display:block}.wrapper{display:flex;flex-direc
 
 var colorCss$4 = css`:host([error]){--ds-auro-helptext-color: var(--ds-basic-color-status-error, #e31f26)}:host([onDark]){--ds-auro-helptext-color: var(--ds-basic-color-texticon-inverse-muted, #ccd2db)}:host([onDark][error]){--ds-auro-helptext-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8)}.helptext-wrapper{color:var(--ds-auro-helptext-color)}`;
 
-var styleCss$4 = css`.helptext-wrapper{display:none;font-size:var(--ds-basic-text-body-xs-font-size, 12px);font-weight:var(--ds-basic-text-body-xs-font-weight, 450);letter-spacing:var(--ds-basic-text-body-xs-letter-spacing, 0);line-height:var(--ds-basic-text-body-xs-line-height, 16px)}:host([large]) .helptext-wrapper{font-size:var(--ds-basic-text-body-default-font-size, 16px);font-weight:var(--ds-basic-text-body-default-font-weight, 450);letter-spacing:var(--ds-basic-text-body-default-letter-spacing, 0);line-height:var(--ds-basic-text-body-default-line-height, 24px)}.helptext-wrapper[visible]{display:block}::slotted(*:not(:empty)){margin-top:var(--ds-size-50, 0.25rem);margin-bottom:0}::slotted(p){margin-block:0}`;
+var styleCss$4 = css`.helptext-wrapper{display:none;font-size:12px;font-weight:450;letter-spacing:0;line-height:16px}:host([large]) .helptext-wrapper{font-size:16px;font-weight:450;letter-spacing:0;line-height:24px}.helptext-wrapper[visible]{display:block}::slotted(*:not(:empty)){margin-top:var(--ds-size-50, 0.25rem);margin-bottom:0}::slotted(p){margin-block:0}`;
 
 var tokensCss$3 = css`:host{--ds-auro-helptext-color: var(--ds-basic-color-texticon-muted, #676767)}`;
 
@@ -3854,7 +3854,7 @@ var tokensCss$3 = css`:host{--ds-auro-helptext-color: var(--ds-basic-color-texti
 
 /* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
 
-let AuroLibraryRuntimeUtils$3 = class AuroLibraryRuntimeUtils {
+let AuroLibraryRuntimeUtils$4 = class AuroLibraryRuntimeUtils {
 
   /* eslint-disable jsdoc/require-param */
 
@@ -3935,7 +3935,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
     this.onDark = false;
     this.hasTextContent = false;
 
-    AuroLibraryRuntimeUtils$3.prototype.handleComponentTagRename(this, 'auro-helptext');
+    AuroLibraryRuntimeUtils$4.prototype.handleComponentTagRename(this, 'auro-helptext');
   }
 
   static get styles() {
@@ -3991,7 +3991,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
    *
    */
   static register(name = "auro-helptext") {
-    AuroLibraryRuntimeUtils$3.prototype.registerComponent(name, AuroHelpText);
+    AuroLibraryRuntimeUtils$4.prototype.registerComponent(name, AuroHelpText);
   }
 
   updated() {
@@ -5163,7 +5163,7 @@ var tokenCss = css`: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$1 = class AuroLibraryRuntimeUtils {
+let AuroLibraryRuntimeUtils$2 = class AuroLibraryRuntimeUtils {
 
   /* eslint-disable jsdoc/require-param */
 
@@ -5427,7 +5427,7 @@ var colorCss$2 = css`: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$2 = class AuroLibraryRuntimeUtils {
+let AuroLibraryRuntimeUtils$1 = class AuroLibraryRuntimeUtils {
 
   /* eslint-disable jsdoc/require-param */
 
@@ -5509,7 +5509,7 @@ class AuroIcon extends BaseIcon {
    */
   privateDefaults() {
     this.uri = 'https://cdn.jsdelivr.net/npm/@alaskaairux/icons@latest/dist';
-    this.runtimeUtils = new AuroLibraryRuntimeUtils$2();
+    this.runtimeUtils = new AuroLibraryRuntimeUtils$1();
   }
 
   // function to define props used within the scope of this component
@@ -5591,7 +5591,7 @@ class AuroIcon extends BaseIcon {
    *
    */
   static register(name = "auro-icon") {
-    AuroLibraryRuntimeUtils$2.prototype.registerComponent(name, AuroIcon);
+    AuroLibraryRuntimeUtils$1.prototype.registerComponent(name, AuroIcon);
   }
 
   connectedCallback() {
@@ -5659,6 +5659,76 @@ class AuroIcon extends BaseIcon {
 
 var iconVersion = '8.0.3';
 
+// 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$3 = 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$3 = css`.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
@@ -5688,7 +5758,7 @@ class AuroHeader extends LitElement {
     /**
      * @private
      */
-    this.runtimeUtils = new AuroLibraryRuntimeUtils$1();
+    this.runtimeUtils = new AuroLibraryRuntimeUtils$3();
   }
 
   // function to define props used within the scope of this component
@@ -5718,7 +5788,7 @@ class AuroHeader extends LitElement {
    *
    */
   static register(name = "auro-header") {
-    AuroLibraryRuntimeUtils$1.prototype.registerComponent(name, AuroHeader);
+    AuroLibraryRuntimeUtils$3.prototype.registerComponent(name, AuroHeader);
   }
 
   firstUpdated() {
@@ -5814,7 +5884,7 @@ class AuroBibtemplate extends LitElement {
 
     this.large = false;
 
-    AuroLibraryRuntimeUtils$1.prototype.handleComponentTagRename(this, 'auro-bibtemplate');
+    AuroLibraryRuntimeUtils$2.prototype.handleComponentTagRename(this, 'auro-bibtemplate');
 
     const versioning = new AuroDependencyVersioning();
     this.iconTag = versioning.generateTag('auro-formkit-bibtemplate-icon', iconVersion, AuroIcon);
@@ -5853,7 +5923,7 @@ class AuroBibtemplate extends LitElement {
    *
    */
   static register(name = "auro-bibtemplate") {
-    AuroLibraryRuntimeUtils$1.prototype.registerComponent(name, AuroBibtemplate);
+    AuroLibraryRuntimeUtils$2.prototype.registerComponent(name, AuroBibtemplate);
   }
 
   /**
@@ -5939,7 +6009,7 @@ var bibTemplateVersion = '1.0.0';
 
 var colorCss = css`:host([error]){--ds-auro-helptext-color: var(--ds-basic-color-status-error, #e31f26)}:host([onDark]){--ds-auro-helptext-color: var(--ds-basic-color-texticon-inverse-muted, #ccd2db)}:host([onDark][error]){--ds-auro-helptext-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8)}.helptext-wrapper{color:var(--ds-auro-helptext-color)}`;
 
-var styleCss$1 = css`.helptext-wrapper{display:none;font-size:var(--ds-basic-text-body-xs-font-size, 12px);font-weight:var(--ds-basic-text-body-xs-font-weight, 450);letter-spacing:var(--ds-basic-text-body-xs-letter-spacing, 0);line-height:var(--ds-basic-text-body-xs-line-height, 16px)}:host([large]) .helptext-wrapper{font-size:var(--ds-basic-text-body-default-font-size, 16px);font-weight:var(--ds-basic-text-body-default-font-weight, 450);letter-spacing:var(--ds-basic-text-body-default-letter-spacing, 0);line-height:var(--ds-basic-text-body-default-line-height, 24px)}.helptext-wrapper[visible]{display:block}::slotted(*:not(:empty)){margin-top:var(--ds-size-50, 0.25rem);margin-bottom:0}::slotted(p){margin-block:0}`;
+var styleCss$1 = css`.helptext-wrapper{display:none;font-size:12px;font-weight:450;letter-spacing:0;line-height:16px}:host([large]) .helptext-wrapper{font-size:16px;font-weight:450;letter-spacing:0;line-height:24px}.helptext-wrapper[visible]{display:block}::slotted(*:not(:empty)){margin-top:var(--ds-size-50, 0.25rem);margin-bottom:0}::slotted(p){margin-block:0}`;
 
 var tokensCss = css`:host{--ds-auro-helptext-color: var(--ds-basic-color-texticon-muted, #676767)}`;
 
@@ -6269,7 +6339,7 @@ class AuroSelect extends AuroElement$3 {
     /**
      * @private
      */
-    this.runtimeUtils = new AuroLibraryRuntimeUtils$4();
+    this.runtimeUtils = new AuroLibraryRuntimeUtils$5();
 
     /**
      * Generate unique names for dependency components.
@@ -6638,7 +6708,7 @@ class AuroSelect extends AuroElement$3 {
    *
    */
   static register(name = "auro-select") {
-    AuroLibraryRuntimeUtils$4.prototype.registerComponent(name, AuroSelect);
+    AuroLibraryRuntimeUtils$5.prototype.registerComponent(name, AuroSelect);
   }
 
   /**

package/components/select/dist/registered.js

@@ -516,7 +516,7 @@ const {
 
 /* 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 */
 
@@ -586,7 +586,7 @@ let AuroLibraryRuntimeUtils$4 = class AuroLibraryRuntimeUtils {
 class AuroFormValidation {
 
   constructor() {
-    this.runtimeUtils = new AuroLibraryRuntimeUtils$4();
+    this.runtimeUtils = new AuroLibraryRuntimeUtils$5();
   }
 
   /**
@@ -3843,7 +3843,7 @@ var styleSnowflakeCss = css`:host{display:block}.wrapper{display:flex;flex-direc
 
 var colorCss$4 = css`:host([error]){--ds-auro-helptext-color: var(--ds-basic-color-status-error, #e31f26)}:host([onDark]){--ds-auro-helptext-color: var(--ds-basic-color-texticon-inverse-muted, #ccd2db)}:host([onDark][error]){--ds-auro-helptext-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8)}.helptext-wrapper{color:var(--ds-auro-helptext-color)}`;
 
-var styleCss$4 = css`.helptext-wrapper{display:none;font-size:var(--ds-basic-text-body-xs-font-size, 12px);font-weight:var(--ds-basic-text-body-xs-font-weight, 450);letter-spacing:var(--ds-basic-text-body-xs-letter-spacing, 0);line-height:var(--ds-basic-text-body-xs-line-height, 16px)}:host([large]) .helptext-wrapper{font-size:var(--ds-basic-text-body-default-font-size, 16px);font-weight:var(--ds-basic-text-body-default-font-weight, 450);letter-spacing:var(--ds-basic-text-body-default-letter-spacing, 0);line-height:var(--ds-basic-text-body-default-line-height, 24px)}.helptext-wrapper[visible]{display:block}::slotted(*:not(:empty)){margin-top:var(--ds-size-50, 0.25rem);margin-bottom:0}::slotted(p){margin-block:0}`;
+var styleCss$4 = css`.helptext-wrapper{display:none;font-size:12px;font-weight:450;letter-spacing:0;line-height:16px}:host([large]) .helptext-wrapper{font-size:16px;font-weight:450;letter-spacing:0;line-height:24px}.helptext-wrapper[visible]{display:block}::slotted(*:not(:empty)){margin-top:var(--ds-size-50, 0.25rem);margin-bottom:0}::slotted(p){margin-block:0}`;
 
 var tokensCss$3 = css`:host{--ds-auro-helptext-color: var(--ds-basic-color-texticon-muted, #676767)}`;
 
@@ -3854,7 +3854,7 @@ var tokensCss$3 = css`:host{--ds-auro-helptext-color: var(--ds-basic-color-texti
 
 /* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
 
-let AuroLibraryRuntimeUtils$3 = class AuroLibraryRuntimeUtils {
+let AuroLibraryRuntimeUtils$4 = class AuroLibraryRuntimeUtils {
 
   /* eslint-disable jsdoc/require-param */
 
@@ -3935,7 +3935,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
     this.onDark = false;
     this.hasTextContent = false;
 
-    AuroLibraryRuntimeUtils$3.prototype.handleComponentTagRename(this, 'auro-helptext');
+    AuroLibraryRuntimeUtils$4.prototype.handleComponentTagRename(this, 'auro-helptext');
   }
 
   static get styles() {
@@ -3991,7 +3991,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
    *
    */
   static register(name = "auro-helptext") {
-    AuroLibraryRuntimeUtils$3.prototype.registerComponent(name, AuroHelpText);
+    AuroLibraryRuntimeUtils$4.prototype.registerComponent(name, AuroHelpText);
   }
 
   updated() {
@@ -5163,7 +5163,7 @@ var tokenCss = css`: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$1 = class AuroLibraryRuntimeUtils {
+let AuroLibraryRuntimeUtils$2 = class AuroLibraryRuntimeUtils {
 
   /* eslint-disable jsdoc/require-param */
 
@@ -5427,7 +5427,7 @@ var colorCss$2 = css`: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$2 = class AuroLibraryRuntimeUtils {
+let AuroLibraryRuntimeUtils$1 = class AuroLibraryRuntimeUtils {
 
   /* eslint-disable jsdoc/require-param */
 
@@ -5509,7 +5509,7 @@ class AuroIcon extends BaseIcon {
    */
   privateDefaults() {
     this.uri = 'https://cdn.jsdelivr.net/npm/@alaskaairux/icons@latest/dist';
-    this.runtimeUtils = new AuroLibraryRuntimeUtils$2();
+    this.runtimeUtils = new AuroLibraryRuntimeUtils$1();
   }
 
   // function to define props used within the scope of this component
@@ -5591,7 +5591,7 @@ class AuroIcon extends BaseIcon {
    *
    */
   static register(name = "auro-icon") {
-    AuroLibraryRuntimeUtils$2.prototype.registerComponent(name, AuroIcon);
+    AuroLibraryRuntimeUtils$1.prototype.registerComponent(name, AuroIcon);
   }
 
   connectedCallback() {
@@ -5659,6 +5659,76 @@ class AuroIcon extends BaseIcon {
 
 var iconVersion = '8.0.3';
 
+// 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$3 = 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$3 = css`.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
@@ -5688,7 +5758,7 @@ class AuroHeader extends LitElement {
     /**
      * @private
      */
-    this.runtimeUtils = new AuroLibraryRuntimeUtils$1();
+    this.runtimeUtils = new AuroLibraryRuntimeUtils$3();
   }
 
   // function to define props used within the scope of this component
@@ -5718,7 +5788,7 @@ class AuroHeader extends LitElement {
    *
    */
   static register(name = "auro-header") {
-    AuroLibraryRuntimeUtils$1.prototype.registerComponent(name, AuroHeader);
+    AuroLibraryRuntimeUtils$3.prototype.registerComponent(name, AuroHeader);
   }
 
   firstUpdated() {
@@ -5814,7 +5884,7 @@ class AuroBibtemplate extends LitElement {
 
     this.large = false;
 
-    AuroLibraryRuntimeUtils$1.prototype.handleComponentTagRename(this, 'auro-bibtemplate');
+    AuroLibraryRuntimeUtils$2.prototype.handleComponentTagRename(this, 'auro-bibtemplate');
 
     const versioning = new AuroDependencyVersioning();
     this.iconTag = versioning.generateTag('auro-formkit-bibtemplate-icon', iconVersion, AuroIcon);
@@ -5853,7 +5923,7 @@ class AuroBibtemplate extends LitElement {
    *
    */
   static register(name = "auro-bibtemplate") {
-    AuroLibraryRuntimeUtils$1.prototype.registerComponent(name, AuroBibtemplate);
+    AuroLibraryRuntimeUtils$2.prototype.registerComponent(name, AuroBibtemplate);
   }
 
   /**
@@ -5939,7 +6009,7 @@ var bibTemplateVersion = '1.0.0';
 
 var colorCss = css`:host([error]){--ds-auro-helptext-color: var(--ds-basic-color-status-error, #e31f26)}:host([onDark]){--ds-auro-helptext-color: var(--ds-basic-color-texticon-inverse-muted, #ccd2db)}:host([onDark][error]){--ds-auro-helptext-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8)}.helptext-wrapper{color:var(--ds-auro-helptext-color)}`;
 
-var styleCss$1 = css`.helptext-wrapper{display:none;font-size:var(--ds-basic-text-body-xs-font-size, 12px);font-weight:var(--ds-basic-text-body-xs-font-weight, 450);letter-spacing:var(--ds-basic-text-body-xs-letter-spacing, 0);line-height:var(--ds-basic-text-body-xs-line-height, 16px)}:host([large]) .helptext-wrapper{font-size:var(--ds-basic-text-body-default-font-size, 16px);font-weight:var(--ds-basic-text-body-default-font-weight, 450);letter-spacing:var(--ds-basic-text-body-default-letter-spacing, 0);line-height:var(--ds-basic-text-body-default-line-height, 24px)}.helptext-wrapper[visible]{display:block}::slotted(*:not(:empty)){margin-top:var(--ds-size-50, 0.25rem);margin-bottom:0}::slotted(p){margin-block:0}`;
+var styleCss$1 = css`.helptext-wrapper{display:none;font-size:12px;font-weight:450;letter-spacing:0;line-height:16px}:host([large]) .helptext-wrapper{font-size:16px;font-weight:450;letter-spacing:0;line-height:24px}.helptext-wrapper[visible]{display:block}::slotted(*:not(:empty)){margin-top:var(--ds-size-50, 0.25rem);margin-bottom:0}::slotted(p){margin-block:0}`;
 
 var tokensCss = css`:host{--ds-auro-helptext-color: var(--ds-basic-color-texticon-muted, #676767)}`;
 
@@ -6269,7 +6339,7 @@ class AuroSelect extends AuroElement$3 {
     /**
      * @private
      */
-    this.runtimeUtils = new AuroLibraryRuntimeUtils$4();
+    this.runtimeUtils = new AuroLibraryRuntimeUtils$5();
 
     /**
      * Generate unique names for dependency components.
@@ -6638,7 +6708,7 @@ class AuroSelect extends AuroElement$3 {
    *
    */
   static register(name = "auro-select") {
-    AuroLibraryRuntimeUtils$4.prototype.registerComponent(name, AuroSelect);
+    AuroLibraryRuntimeUtils$5.prototype.registerComponent(name, AuroSelect);
   }
 
   /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aurodesignsystem-dev/auro-formkit",
-  "version": "0.0.0-pr624.12",
+  "version": "0.0.0-pr624.14",
   "description": "A collection of web components used to build forms.",
   "homepage": "https://github.com/AlaskaAirlines/auro-formkit#readme",
   "bugs": {
@@ -61,6 +61,8 @@
   },
   "devDependencies": {
     "@aurodesignsystem/eslint-config": "^1.3.4",
+    "@aurodesignsystem/webcorestylesheets": "^8.1.1",
+    "@aurodesignsystem/design-tokens": "^8.2.0",
     "@commitlint/cli": "^19.8.0",
     "@commitlint/config-conventional": "^19.8.0",
     "@open-wc/testing": "^4.0.0",