@aurodesignsystem-dev/auro-formkit 0.0.0-pr652.7 → 0.0.0-pr652.8

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

@@ -34,6 +34,7 @@ export class AuroBibtemplate extends LitElement {
      * @returns {void}
      */
     exposeCssParts(): void;
+    firstUpdated(changedProperties: any): void;
     render(): import("lit-html").TemplateResult;
 }
 import { LitElement } from "lit";

package/components/bibtemplate/dist/index.js

@@ -16,7 +16,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 */
 
-class AuroLibraryRuntimeUtils {
+let AuroLibraryRuntimeUtils$1 = class AuroLibraryRuntimeUtils {
 
   /* eslint-disable jsdoc/require-param */
 
@@ -77,7 +77,7 @@ class AuroLibraryRuntimeUtils {
 
     return elemTag === tag || elem.hasAttribute(tag);
   }
-}
+};
 
 // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -273,6 +273,76 @@ var tokensCss = css`:host{--ds-auro-icon-color:var(--ds-basic-color-texticon-def
 
 var colorCss = css`:host{color:var(--ds-auro-icon-color)}:host([customColor]){color:inherit}:host(:not([onDark])[variant=accent1]){--ds-auro-icon-color:var(--ds-basic-color-texticon-accent1, #265688)}:host(:not([onDark])[variant=disabled]){--ds-auro-icon-color:var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host(:not([onDark])[variant=muted]){--ds-auro-icon-color:var(--ds-basic-color-texticon-muted, #676767)}:host(:not([onDark])[variant=statusDefault]){--ds-auro-icon-color:var(--ds-basic-color-status-default, #afb9c6)}:host(:not([onDark])[variant=statusInfo]){--ds-auro-icon-color:var(--ds-basic-color-status-info, #01426a)}:host(:not([onDark])[variant=statusSuccess]){--ds-auro-icon-color:var(--ds-basic-color-status-success, #447a1f)}:host(:not([onDark])[variant=statusWarning]){--ds-auro-icon-color:var(--ds-basic-color-status-warning, #fac200)}:host(:not([onDark])[variant=statusError]){--ds-auro-icon-color:var(--ds-basic-color-status-error, #e31f26)}:host(:not([onDark])[variant=statusInfoSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-info-subtle, #ebf3f9)}:host(:not([onDark])[variant=statusSuccessSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-success-subtle, #d6eac7)}:host(:not([onDark])[variant=statusWarningSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-warning-subtle, #fff0b2)}:host(:not([onDark])[variant=statusErrorSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-error-subtle, #fbc6c6)}:host(:not([onDark])[variant=fareBasicEconomy]){--ds-auro-icon-color:var(--ds-basic-color-fare-basiceconomy, #97eaf8)}:host(:not([onDark])[variant=fareBusiness]){--ds-auro-icon-color:var(--ds-basic-color-fare-business, #01426a)}:host(:not([onDark])[variant=fareEconomy]){--ds-auro-icon-color:var(--ds-basic-color-fare-economy, #0074ca)}:host(:not([onDark])[variant=fareFirst]){--ds-auro-icon-color:var(--ds-basic-color-fare-first, #00274a)}:host(:not([onDark])[variant=farePremiumEconomy]){--ds-auro-icon-color:var(--ds-basic-color-fare-premiumeconomy, #005154)}:host(:not([onDark])[variant=tierOneWorldEmerald]){--ds-auro-icon-color:var(--ds-basic-color-tier-program-oneworld-emerald, #139142)}:host(:not([onDark])[variant=tierOneWorldSapphire]){--ds-auro-icon-color:var(--ds-basic-color-tier-program-oneworld-sapphire, #015daa)}:host(:not([onDark])[variant=tierOneWorldRuby]){--ds-auro-icon-color:var(--ds-basic-color-tier-program-oneworld-ruby, #a41d4a)}:host([onDark]){--ds-auro-icon-color:var(--ds-basic-color-texticon-inverse, #ffffff)}:host([onDark][variant=disabled]){--ds-auro-icon-color:var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}:host([onDark][variant=muted]){--ds-auro-icon-color:var(--ds-basic-color-texticon-inverse-muted, #ccd2db)}:host([onDark][variant=statusError]){--ds-auro-icon-color:var(--ds-advanced-color-state-error-inverse, #f9a4a8)}`;
 
+// 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 */
+
+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);
+  }
+}
+
 // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
 
@@ -471,7 +541,7 @@ class AuroHeader extends LitElement {
     /**
      * @private
      */
-    this.runtimeUtils = new AuroLibraryRuntimeUtils();
+    this.runtimeUtils = new AuroLibraryRuntimeUtils$1();
   }
 
   // function to define props used within the scope of this component
@@ -501,7 +571,7 @@ class AuroHeader extends LitElement {
    *
    */
   static register(name = "auro-header") {
-    AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroHeader);
+    AuroLibraryRuntimeUtils$1.prototype.registerComponent(name, AuroHeader);
   }
 
   firstUpdated() {
@@ -597,7 +667,7 @@ class AuroBibtemplate extends LitElement {
 
     this.large = false;
 
-    AuroLibraryRuntimeUtils.prototype.handleComponentTagRename(this, 'auro-bibtemplate');
+    AuroLibraryRuntimeUtils$1.prototype.handleComponentTagRename(this, 'auro-bibtemplate');
 
     const versioning = new AuroDependencyVersioning();
     this.iconTag = versioning.generateTag('auro-formkit-bibtemplate-icon', iconVersion, AuroIcon);
@@ -636,7 +706,7 @@ class AuroBibtemplate extends LitElement {
    *
    */
   static register(name = "auro-bibtemplate") {
-    AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroBibtemplate);
+    AuroLibraryRuntimeUtils$1.prototype.registerComponent(name, AuroBibtemplate);
   }
 
   /**
@@ -676,6 +746,18 @@ class AuroBibtemplate extends LitElement {
     this.setAttribute('exportparts', 'bibtemplate:dropdownBibTemplate');
   }
 
+  firstUpdated(changedProperties) {
+    super.firstUpdated(changedProperties);
+
+    this.dispatchEvent(new CustomEvent("auro-bibtemplate-connected", {
+      bubbles: true,
+      composed: true,
+      detail: {
+        element: this
+      }
+    }));
+  }
+
   // function that renders the HTML and CSS into  the scope of the component
   render() {
     return html$1`

package/components/bibtemplate/dist/registered.js

@@ -16,7 +16,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 */
 
-class AuroLibraryRuntimeUtils {
+let AuroLibraryRuntimeUtils$1 = class AuroLibraryRuntimeUtils {
 
   /* eslint-disable jsdoc/require-param */
 
@@ -77,7 +77,7 @@ class AuroLibraryRuntimeUtils {
 
     return elemTag === tag || elem.hasAttribute(tag);
   }
-}
+};
 
 // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -273,6 +273,76 @@ var tokensCss = css`:host{--ds-auro-icon-color:var(--ds-basic-color-texticon-def
 
 var colorCss = css`:host{color:var(--ds-auro-icon-color)}:host([customColor]){color:inherit}:host(:not([onDark])[variant=accent1]){--ds-auro-icon-color:var(--ds-basic-color-texticon-accent1, #265688)}:host(:not([onDark])[variant=disabled]){--ds-auro-icon-color:var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host(:not([onDark])[variant=muted]){--ds-auro-icon-color:var(--ds-basic-color-texticon-muted, #676767)}:host(:not([onDark])[variant=statusDefault]){--ds-auro-icon-color:var(--ds-basic-color-status-default, #afb9c6)}:host(:not([onDark])[variant=statusInfo]){--ds-auro-icon-color:var(--ds-basic-color-status-info, #01426a)}:host(:not([onDark])[variant=statusSuccess]){--ds-auro-icon-color:var(--ds-basic-color-status-success, #447a1f)}:host(:not([onDark])[variant=statusWarning]){--ds-auro-icon-color:var(--ds-basic-color-status-warning, #fac200)}:host(:not([onDark])[variant=statusError]){--ds-auro-icon-color:var(--ds-basic-color-status-error, #e31f26)}:host(:not([onDark])[variant=statusInfoSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-info-subtle, #ebf3f9)}:host(:not([onDark])[variant=statusSuccessSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-success-subtle, #d6eac7)}:host(:not([onDark])[variant=statusWarningSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-warning-subtle, #fff0b2)}:host(:not([onDark])[variant=statusErrorSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-error-subtle, #fbc6c6)}:host(:not([onDark])[variant=fareBasicEconomy]){--ds-auro-icon-color:var(--ds-basic-color-fare-basiceconomy, #97eaf8)}:host(:not([onDark])[variant=fareBusiness]){--ds-auro-icon-color:var(--ds-basic-color-fare-business, #01426a)}:host(:not([onDark])[variant=fareEconomy]){--ds-auro-icon-color:var(--ds-basic-color-fare-economy, #0074ca)}:host(:not([onDark])[variant=fareFirst]){--ds-auro-icon-color:var(--ds-basic-color-fare-first, #00274a)}:host(:not([onDark])[variant=farePremiumEconomy]){--ds-auro-icon-color:var(--ds-basic-color-fare-premiumeconomy, #005154)}:host(:not([onDark])[variant=tierOneWorldEmerald]){--ds-auro-icon-color:var(--ds-basic-color-tier-program-oneworld-emerald, #139142)}:host(:not([onDark])[variant=tierOneWorldSapphire]){--ds-auro-icon-color:var(--ds-basic-color-tier-program-oneworld-sapphire, #015daa)}:host(:not([onDark])[variant=tierOneWorldRuby]){--ds-auro-icon-color:var(--ds-basic-color-tier-program-oneworld-ruby, #a41d4a)}:host([onDark]){--ds-auro-icon-color:var(--ds-basic-color-texticon-inverse, #ffffff)}:host([onDark][variant=disabled]){--ds-auro-icon-color:var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}:host([onDark][variant=muted]){--ds-auro-icon-color:var(--ds-basic-color-texticon-inverse-muted, #ccd2db)}:host([onDark][variant=statusError]){--ds-auro-icon-color:var(--ds-advanced-color-state-error-inverse, #f9a4a8)}`;
 
+// 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 */
+
+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);
+  }
+}
+
 // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
 
@@ -471,7 +541,7 @@ class AuroHeader extends LitElement {
     /**
      * @private
      */
-    this.runtimeUtils = new AuroLibraryRuntimeUtils();
+    this.runtimeUtils = new AuroLibraryRuntimeUtils$1();
   }
 
   // function to define props used within the scope of this component
@@ -501,7 +571,7 @@ class AuroHeader extends LitElement {
    *
    */
   static register(name = "auro-header") {
-    AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroHeader);
+    AuroLibraryRuntimeUtils$1.prototype.registerComponent(name, AuroHeader);
   }
 
   firstUpdated() {
@@ -597,7 +667,7 @@ class AuroBibtemplate extends LitElement {
 
     this.large = false;
 
-    AuroLibraryRuntimeUtils.prototype.handleComponentTagRename(this, 'auro-bibtemplate');
+    AuroLibraryRuntimeUtils$1.prototype.handleComponentTagRename(this, 'auro-bibtemplate');
 
     const versioning = new AuroDependencyVersioning();
     this.iconTag = versioning.generateTag('auro-formkit-bibtemplate-icon', iconVersion, AuroIcon);
@@ -636,7 +706,7 @@ class AuroBibtemplate extends LitElement {
    *
    */
   static register(name = "auro-bibtemplate") {
-    AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroBibtemplate);
+    AuroLibraryRuntimeUtils$1.prototype.registerComponent(name, AuroBibtemplate);
   }
 
   /**
@@ -676,6 +746,18 @@ class AuroBibtemplate extends LitElement {
     this.setAttribute('exportparts', 'bibtemplate:dropdownBibTemplate');
   }
 
+  firstUpdated(changedProperties) {
+    super.firstUpdated(changedProperties);
+
+    this.dispatchEvent(new CustomEvent("auro-bibtemplate-connected", {
+      bubbles: true,
+      composed: true,
+      detail: {
+        element: this
+      }
+    }));
+  }
+
   // function that renders the HTML and CSS into  the scope of the component
   render() {
     return html$1`

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

@@ -453,9 +453,10 @@ class DateFormatter {
     /**
      * Convert a date object to string format.
      * @param {Object} date - Date to convert to string.
-     * @returns {Object} Returns the date as a string.
+     * @param {String} locale - Optional locale to use for the date string. Defaults to user's locale.
+     * @returns {String} Returns the date as a string.
      */
-    this.getDateAsString = (date) => date.toLocaleDateString(undefined, {
+    this.getDateAsString = (date, locale = undefined) => date.toLocaleDateString(locale, {
       year: "numeric",
       month: "2-digit",
       day: "2-digit",
@@ -647,7 +648,7 @@ class AuroDateUtilities extends AuroDateUtilitiesBase {
       const dateObj = new Date(this.getFourDigitYear(dateParts.year), dateParts.month - 1, dateParts.day || 1);
 
       // Get the date string of the date object we created from the string date
-      const actualDateStr = dateFormatter.getDateAsString(dateObj);
+      const actualDateStr = dateFormatter.getDateAsString(dateObj, "en-US");
 
       // Guard Clause: Generated date matches date string input
       if (expectedDateStr !== actualDateStr) {

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

@@ -445,9 +445,10 @@ class DateFormatter {
     /**
      * Convert a date object to string format.
      * @param {Object} date - Date to convert to string.
-     * @returns {Object} Returns the date as a string.
+     * @param {String} locale - Optional locale to use for the date string. Defaults to user's locale.
+     * @returns {String} Returns the date as a string.
      */
-    this.getDateAsString = (date) => date.toLocaleDateString(undefined, {
+    this.getDateAsString = (date, locale = undefined) => date.toLocaleDateString(locale, {
       year: "numeric",
       month: "2-digit",
       day: "2-digit",
@@ -639,7 +640,7 @@ class AuroDateUtilities extends AuroDateUtilitiesBase {
       const dateObj = new Date(this.getFourDigitYear(dateParts.year), dateParts.month - 1, dateParts.day || 1);
 
       // Get the date string of the date object we created from the string date
-      const actualDateStr = dateFormatter.getDateAsString(dateObj);
+      const actualDateStr = dateFormatter.getDateAsString(dateObj, "en-US");
 
       // Guard Clause: Generated date matches date string input
       if (expectedDateStr !== actualDateStr) {

package/components/checkbox/dist/index.js

@@ -398,9 +398,10 @@ class DateFormatter {
     /**
      * Convert a date object to string format.
      * @param {Object} date - Date to convert to string.
-     * @returns {Object} Returns the date as a string.
+     * @param {String} locale - Optional locale to use for the date string. Defaults to user's locale.
+     * @returns {String} Returns the date as a string.
      */
-    this.getDateAsString = (date) => date.toLocaleDateString(undefined, {
+    this.getDateAsString = (date, locale = undefined) => date.toLocaleDateString(locale, {
       year: "numeric",
       month: "2-digit",
       day: "2-digit",
@@ -592,7 +593,7 @@ class AuroDateUtilities extends AuroDateUtilitiesBase {
       const dateObj = new Date(this.getFourDigitYear(dateParts.year), dateParts.month - 1, dateParts.day || 1);
 
       // Get the date string of the date object we created from the string date
-      const actualDateStr = dateFormatter.getDateAsString(dateObj);
+      const actualDateStr = dateFormatter.getDateAsString(dateObj, "en-US");
 
       // Guard Clause: Generated date matches date string input
       if (expectedDateStr !== actualDateStr) {

package/components/checkbox/dist/registered.js

@@ -398,9 +398,10 @@ class DateFormatter {
     /**
      * Convert a date object to string format.
      * @param {Object} date - Date to convert to string.
-     * @returns {Object} Returns the date as a string.
+     * @param {String} locale - Optional locale to use for the date string. Defaults to user's locale.
+     * @returns {String} Returns the date as a string.
      */
-    this.getDateAsString = (date) => date.toLocaleDateString(undefined, {
+    this.getDateAsString = (date, locale = undefined) => date.toLocaleDateString(locale, {
       year: "numeric",
       month: "2-digit",
       day: "2-digit",
@@ -592,7 +593,7 @@ class AuroDateUtilities extends AuroDateUtilitiesBase {
       const dateObj = new Date(this.getFourDigitYear(dateParts.year), dateParts.month - 1, dateParts.day || 1);
 
       // Get the date string of the date object we created from the string date
-      const actualDateStr = dateFormatter.getDateAsString(dateObj);
+      const actualDateStr = dateFormatter.getDateAsString(dateObj, "en-US");
 
       // Guard Clause: Generated date matches date string input
       if (expectedDateStr !== actualDateStr) {