@aurodesignsystem/auro-library 5.12.2 → 5.13.0

package/CHANGELOG.md

@@ -1,5 +1,34 @@
 # Semantic Release Automated Changelog
 
+# [5.13.0](https://github.com/AlaskaAirlines/auro-library/compare/v5.12.3...v5.13.0) (2026-05-14)
+
+
+### Features
+
+* add ISO date formatting support AB[#1495381](https://github.com/AlaskaAirlines/auro-library/issues/1495381) ([006947a](https://github.com/AlaskaAirlines/auro-library/commit/006947abf0736ec8efa25fe7861d99327e459a3b))
+
+
+### Performance Improvements
+
+* **dateutil:** add null check guard ([e5187f4](https://github.com/AlaskaAirlines/auro-library/commit/e5187f45a96aeec66c286ba9ca858e5bce9b6860))
+* **dateutil:** clean up some dup logics ([bbed2ee](https://github.com/AlaskaAirlines/auro-library/commit/bbed2ee4257ff1d107505158809eaa8cc3245685))
+* refactor structure and performance ([42247a0](https://github.com/AlaskaAirlines/auro-library/commit/42247a03392c80dd29ab3447bf65b73fc461ba38))
+
+## [5.12.3](https://github.com/AlaskaAirlines/auro-library/compare/v5.12.2...v5.12.3) (2026-04-30)
+
+
+### Bug Fixes
+
+* **floatingUI:** restore bib transform ([65a236f](https://github.com/AlaskaAirlines/auro-library/commit/65a236f0419d4946b6cb194e1ea6e8af74cdf15e))
+* **floatingUI:** set `role="application"` on bib Container to lock 3finger swipe ([88fa5ca](https://github.com/AlaskaAirlines/auro-library/commit/88fa5ca6875f91a301b4a26f2d195d47b7e0192a))
+* **floatingUI:** use `aria-modal` instead of `role="application"` ([7a3dddc](https://github.com/AlaskaAirlines/auro-library/commit/7a3dddc2a42a6bc416ae5b35f0b9efc5aeb2998f))
+
+
+### Performance Improvements
+
+* **floatingUI:** add queue to main track opened floatingUI activities ([662ce52](https://github.com/AlaskaAirlines/auro-library/commit/662ce52efc0b0b74db6512f7e6b2a60d64a3ab98))
+* **floatingUI:** lock scroll for fullscreen mode ([6d425b6](https://github.com/AlaskaAirlines/auro-library/commit/6d425b64e66a2ec1519f098b5472580e29dcf6a7))
+
 ## [5.12.2](https://github.com/AlaskaAirlines/auro-library/compare/v5.12.1...v5.12.2) (2026-04-09)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aurodesignsystem/auro-library",
-  "version": "5.12.2",
+  "version": "5.13.0",
   "description": "This repository holds shared scripts, utilities, and workflows utilized across repositories along the Auro Design System.",
   "repository": {
     "type": "git",

package/scripts/runtime/Focusables/test/Focusables.test.js

@@ -1,21 +1,26 @@
 /* eslint-disable max-classes-per-file */
-import { fixture, html, expect, elementUpdated } from '@open-wc/testing';
+import { expect, fixtureSync, html } from "@open-wc/testing";
 
-import {
-  isFocusableComponent,
-  getFocusableElements
-} from '../Focusables.mjs';
+import { getFocusableElements, isFocusableComponent } from "../Focusables.mjs";
 
-describe('isFocusableComponent', () => {
-  it('returns true for enabled custom focusable components', async () => {
+describe("isFocusableComponent", () => {
+  it("returns true for enabled custom focusable components", async () => {
     for (const tag of [
-      'auro-checkbox', 'auro-radio', 'auro-dropdown', 'auro-button', 'auro-combobox',
-      'auro-input', 'auro-counter', 'auro-select', 'auro-datepicker',
-      'auro-hyperlink', 'auro-accordion'
+      "auro-checkbox",
+      "auro-radio",
+      "auro-dropdown",
+      "auro-button",
+      "auro-combobox",
+      "auro-input",
+      "auro-counter",
+      "auro-select",
+      "auro-datepicker",
+      "auro-hyperlink",
+      "auro-accordion",
     ]) {
       const el = document.createElement(tag);
-      if (tag === 'auro-hyperlink') {
-        el.setAttribute('href', '#');
+      if (tag === "auro-hyperlink") {
+        el.setAttribute("href", "#");
       }
       document.body.appendChild(el);
       expect(isFocusableComponent(el)).to.be.true;
@@ -23,16 +28,24 @@ describe('isFocusableComponent', () => {
     }
   });
 
-  it('returns false for custom components with disabled attribute', async () => {
+  it("returns false for custom components with disabled attribute", async () => {
     for (const tag of [
-      'auro-checkbox', 'auro-radio', 'auro-dropdown', 'auro-button', 'auro-combobox',
-      'auro-input', 'auro-counter', 'auro-select', 'auro-datepicker',
-      'auro-hyperlink', 'auro-accordion'
+      "auro-checkbox",
+      "auro-radio",
+      "auro-dropdown",
+      "auro-button",
+      "auro-combobox",
+      "auro-input",
+      "auro-counter",
+      "auro-select",
+      "auro-datepicker",
+      "auro-hyperlink",
+      "auro-accordion",
     ]) {
       const el = document.createElement(tag);
-      el.setAttribute('disabled', '');
-      if (tag === 'auro-hyperlink') {
-        el.setAttribute('href', '#');
+      el.setAttribute("disabled", "");
+      if (tag === "auro-hyperlink") {
+        el.setAttribute("href", "#");
       }
       document.body.appendChild(el);
       expect(isFocusableComponent(el)).to.be.false;
@@ -40,24 +53,26 @@ describe('isFocusableComponent', () => {
     }
   });
 
-  it('returns false for auro-hyperlink without href', async () => {
-    const el = document.createElement('auro-hyperlink');
+  it("returns false for auro-hyperlink without href", async () => {
+    const el = document.createElement("auro-hyperlink");
     document.body.appendChild(el);
     expect(isFocusableComponent(el)).to.be.false;
     el.remove();
   });
 
-  it('returns false for non-custom elements', async () => {
-    const el = document.createElement('div');
+  it("returns false for non-custom elements", async () => {
+    const el = document.createElement("div");
     document.body.appendChild(el);
     expect(isFocusableComponent(el)).to.be.false;
     el.remove();
   });
 });
 
-describe('getFocusableElements', () => {
-  it('finds standard focusable elements', async () => {
-    const el = await fixture(html`
+// fixtureSync is used instead of fixture to avoid requestAnimationFrame, which Chrome
+// pauses in background tabs when multiple test files run concurrently under WTR.
+describe("getFocusableElements", () => {
+  it("finds standard focusable elements", () => {
+    const el = fixtureSync(html`
       <div>
         <button id="btn"></button>
         <input id="input">
@@ -67,11 +82,17 @@ describe('getFocusableElements', () => {
       </div>
     `);
     const focusables = getFocusableElements(el);
-    expect(focusables.map(e => e.id)).to.include.members(['btn', 'input', 'link', 'ta', 'sel']);
+    expect(focusables.map((e) => e.id)).to.include.members([
+      "btn",
+      "input",
+      "link",
+      "ta",
+      "sel",
+    ]);
   });
 
-  it('skips disabled elements', async () => {
-    const el = await fixture(html`
+  it("skips disabled elements", () => {
+    const el = fixtureSync(html`
       <div>
         <button id="btn" disabled></button>
         <input id="input" disabled>
@@ -83,8 +104,8 @@ describe('getFocusableElements', () => {
     expect(focusables.length).to.equal(0);
   });
 
-  it('finds custom focusable components', async () => {
-    const el = await fixture(html`
+  it("finds custom focusable components", () => {
+    const el = fixtureSync(html`
       <div>
         <auro-checkbox id="cb"></auro-checkbox>
         <auro-hyperlink id="hl" href="#"></auro-hyperlink>
@@ -92,11 +113,11 @@ describe('getFocusableElements', () => {
       </div>
     `);
     const focusables = getFocusableElements(el);
-    expect(focusables.map(e => e.id)).to.include.members(['cb', 'hl', 'ab']);
+    expect(focusables.map((e) => e.id)).to.include.members(["cb", "hl", "ab"]);
   });
 
-  it('skips disabled custom components', async () => {
-    const el = await fixture(html`
+  it("skips disabled custom components", () => {
+    const el = fixtureSync(html`
       <div>
         <auro-checkbox id="cb" disabled></auro-checkbox>
         <auro-hyperlink id="hl" disabled href="#"></auro-hyperlink>
@@ -106,60 +127,59 @@ describe('getFocusableElements', () => {
     expect(focusables.length).to.equal(0);
   });
 
-  it('finds elements in shadow DOM', async () => {
+  it("finds elements in shadow DOM", () => {
     class ShadowEl extends HTMLElement {
       constructor() {
         super();
-        this.attachShadow({ mode: 'open' });
+        this.attachShadow({ mode: "open" });
       }
       connectedCallback() {
-        this.shadowRoot.innerHTML = `<button id="shadowBtn"></button>`;
+        const btn = document.createElement("button");
+        btn.id = "shadowBtn";
+        this.shadowRoot.appendChild(btn);
       }
     }
-    customElements.define('shadow-el', ShadowEl);
-    const el = await fixture(html`
+    customElements.define("shadow-el", ShadowEl);
+    const el = fixtureSync(html`
       <div>
         <shadow-el id="host"></shadow-el>
       </div>
     `);
-    await elementUpdated(el);
     const focusables = getFocusableElements(el);
-    // Should find the button inside shadow DOM
-    const shadowBtn = el.querySelector('shadow-el').shadowRoot.getElementById('shadowBtn');
+    const shadowBtn = el
+      .querySelector("shadow-el")
+      .shadowRoot.getElementById("shadowBtn");
     expect(focusables).to.include(shadowBtn);
   });
 
-  it('finds elements assigned to slots', async () => {
+  it("finds elements assigned to slots", () => {
     class SlotEl extends HTMLElement {
       constructor() {
         super();
-        this.attachShadow({ mode: 'open' });
+        this.attachShadow({ mode: "open" });
       }
       connectedCallback() {
-        this.shadowRoot.innerHTML = `<slot></slot>`;
+        this.shadowRoot.appendChild(document.createElement("slot"));
       }
     }
-    customElements.define('slot-el', SlotEl);
-    const el = await fixture(html`
+    customElements.define("slot-el", SlotEl);
+    const el = fixtureSync(html`
       <slot-el>
         <button id="slottedBtn"></button>
       </slot-el>
     `);
-    await elementUpdated(el);
     const focusables = getFocusableElements(el);
-    const slottedBtn = el.querySelector('#slottedBtn');
+    const slottedBtn = el.querySelector("#slottedBtn");
     expect(focusables).to.include(slottedBtn);
   });
 
-  it('does not return duplicates', async () => {
-    // This is a contrived case, but let's check that duplicates are not returned
-    const el = await fixture(html`
+  it("does not return duplicates", () => {
+    const el = fixtureSync(html`
       <div>
         <button id="btn"></button>
       </div>
     `);
     const focusables = getFocusableElements(el);
-    // Should only have one instance of the button
-    expect(focusables.filter(e => e.id === 'btn').length).to.equal(1);
+    expect(focusables.filter((e) => e.id === "btn").length).to.equal(1);
   });
-});
+});

package/scripts/runtime/dateUtilities/dateFormatter.mjs

@@ -1,104 +1,230 @@
-class DateFormatter {
-
-  constructor() {
-
-    /**
-     * @description Parses a date string into its components.
-     * @param {string} dateStr - Date string to parse.
-     * @param {string} format - Date format to parse.
-     * @returns {Object<key["month" | "day" | "year"]: number>|undefined}
-     */
-    this.parseDate = (dateStr, format = 'mm/dd/yyyy') => {
-
-      // Guard Clause: Date string is defined
-      if (!dateStr) {
-        return undefined;
-      }
-
-      // Assume the separator is a "/" a defined in our code base
-      const separator = '/';
-
-      // Get the parts of the date and format
-      const valueParts = dateStr.split(separator);
-      const formatParts = format.split(separator);
-
-      // Check if the value and format have the correct number of parts
-      if (valueParts.length !== formatParts.length) {
-        throw new Error('AuroDatepickerUtilities | parseDate: Date string and format length do not match');
-      }
-
-      // Holds the result to be returned
-      const result = formatParts.reduce((acc, part, index) => {
-        const value = valueParts[index];
-
-        if ((/m/iu).test(part)) {
-          acc.month = value;
-        } else if ((/d/iu).test(part)) {
-          acc.day = value;
-        } else if ((/y/iu).test(part)) {
-          acc.year = value;
-        }
-
-        return acc;
-      }, {});
-
-      // If we found all the parts, return the result
-      if (result.month && result.year) {
-        return result;
-      }
-
-      // Throw an error to let the dev know we were unable to parse the date string
-      throw new Error('AuroDatepickerUtilities | parseDate: Unable to parse date string');
-    };
-
-    /**
-     * Convert a date object to string format.
-     * @param {Object} date - Date to convert to 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, locale = undefined) => date.toLocaleDateString(locale, {
-      year: "numeric",
-      month: "2-digit",
-      day: "2-digit",
-    });
-
-    /**
-     * Converts a date string to a North American date format.
-     * @param {String} dateStr - Date to validate.
-     * @param {String} format - Date format to validate against.
-     * @returns {Boolean}
-     */
-    this.toNorthAmericanFormat = (dateStr, format) => {
-
-      if (format === 'mm/dd/yyyy') {
-        return dateStr;
-      }
-
-      const parsedDate = this.parseDate(dateStr, format);
-
-      if (!parsedDate) {
-        throw new Error('AuroDatepickerUtilities | toNorthAmericanFormat: Unable to parse date string');
-      }
-
-      const { month, day, year } = parsedDate;
-
-      const dateParts = [];
-      if (month) {
-        dateParts.push(month);
-      }
-
-      if (day) {
-        dateParts.push(day);
-      }
-
-      if (year) {
-        dateParts.push(year);
-      }
-
-      return dateParts.join('/');
-    };
+/**
+ * @description Splits a date string into its parts according to the provided format. Does NOT validate that the result is a real calendar date — use `parseDate` when validation is required.
+ * @param {string} dateStr - Date string to parse.
+ * @param {string} format - Date format to parse.
+ * @returns {{ month?: string, day?: string, year?: string }|undefined}
+ */
+function getDateParts(dateStr, format) {
+  if (!dateStr) {
+    return undefined;
+  }
+
+  const formatSeparatorMatch = format.match(/[/.-]/);
+  let valueParts;
+  let formatParts;
+
+  if (formatSeparatorMatch) {
+    const separator = formatSeparatorMatch[0];
+    valueParts = dateStr.split(separator);
+    formatParts = format.split(separator);
+  } else {
+    if (dateStr.match(/[/.-]/)) {
+      throw new Error(
+        "AuroDatepickerUtilities | parseDate: Date string has no separators",
+      );
+    }
+
+    if (dateStr.length !== format.length) {
+      throw new Error(
+        "AuroDatepickerUtilities | parseDate: Date string and format length do not match",
+      );
+    }
+
+    valueParts = [dateStr];
+    formatParts = [format];
+  }
+
+  if (valueParts.length !== formatParts.length) {
+    throw new Error(
+      `AuroDatepickerUtilities | parseDate: Date string and format do not match : ${dateStr} vs ${format}`,
+    );
   }
-};
 
-export const dateFormatter = new DateFormatter();
+  const result = formatParts.reduce((acc, part, index) => {
+    const value = valueParts[index];
+
+    if (/m/iu.test(part) && part.length === value.length) {
+      acc.month = value;
+    } else if (/d/iu.test(part) && part.length === value.length) {
+      acc.day = value;
+    } else if (/y/iu.test(part) && part.length === value.length) {
+      acc.year = value;
+    }
+
+    return acc;
+  }, {});
+
+  if (!result.month && !result.day && !result.year) {
+    throw new Error(
+      "AuroDatepickerUtilities | parseDate: Unable to parse date string",
+    );
+  }
+
+  return result;
+}
+
+function isCalendarDate(year, month, day) {
+  let yearNumber = Number(year);
+  const monthNumber = Number(month);
+  const dayNumber = Number(day);
+
+  if (
+    !Number.isInteger(yearNumber) ||
+    !Number.isInteger(monthNumber) ||
+    !Number.isInteger(dayNumber)
+  ) {
+    return false;
+  }
+
+  // Handle 2-digit years by converting them to 4-digit years based on a cutoff. This allows for parsing of 2-digit year formats while still validating the resulting date.
+  if (yearNumber < 100 && yearNumber >= 50) {
+    yearNumber += 1900;
+  } else if (yearNumber < 50) {
+    yearNumber += 2000;
+  }
+
+  const stringified = `${String(yearNumber).padStart(4, "0")}-${String(monthNumber).padStart(2, "0")}-${String(dayNumber).padStart(2, "0")}`;
+  const date = new Date(stringified.replace(/[.-]/g, "/"));
+
+  return (
+    !Number.isNaN(date.getTime()) && toISOFormatString(date) === stringified
+  );
+}
+
+/**
+ * @description Parses a date string into its components and validates that the result is a real calendar date. Use `getDateParts` instead when raw splitting without validation is needed (e.g. for in-progress input).
+ *
+ * Partial formats are supported: components absent from `format` default to `year → "0"`,
+ * `month → "01"`, `day → "01"` for calendar validation only. The returned object contains
+ * only the fields actually present in the format string — missing fields are never injected.
+ * @param {string} dateStr - Date string to parse.
+ * @param {string} format - Date format to parse.
+ * @returns {{ month?: string, day?: string, year?: string }|undefined}
+ * @throws {Error} Throws when the parsed result does not represent a valid calendar date.
+ */
+function parseDate(dateStr, format = "mm/dd/yyyy") {
+  if (!dateStr || !format) {
+    return undefined;
+  }
+  const result = getDateParts(dateStr.trim(), format);
+
+  if (!result) {
+    return undefined;
+  }
+
+  const lowerFormat = format.toLowerCase();
+  const year = lowerFormat.includes("yy") ? result.year : "0";
+  const month = lowerFormat.includes("mm") ? result.month : "01";
+  const day = lowerFormat.includes("dd") ? result.day : "01";
+
+  if (isCalendarDate(year, month, day)) {
+    return result;
+  }
+
+  throw new Error(
+    `AuroDatepickerUtilities | parseDate: Date string is not a valid date ${JSON.stringify(result)} with format ${format}`,
+  );
+}
+
+/**
+ * Convert a date object to string format.
+ * @param {Object} date - Date to convert to 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.
+ */
+function getDateAsString(date, locale = undefined) {
+  return date.toLocaleDateString(locale, {
+    year: "numeric",
+    month: "2-digit",
+    day: "2-digit",
+  });
+}
+
+/**
+ * Converts a date string to a North American date format.
+ * @param {String} dateStr - Date to validate.
+ * @param {String} format - Date format to validate against.
+ * @returns {String}
+ */
+function toNorthAmericanFormat(dateStr, format) {
+  if (format === "mm/dd/yyyy") {
+    return dateStr;
+  }
+
+  const parsedDate = parseDate(dateStr, format);
+
+  if (!parsedDate) {
+    throw new Error(
+      "AuroDatepickerUtilities | toNorthAmericanFormat: Unable to parse date string",
+    );
+  }
+
+  const { month, day, year } = parsedDate;
+
+  return [month, day, year].filter(Boolean).join("/");
+}
+
+/**
+ * Validates that a date string matches the provided format and represents a real calendar date.
+ *
+ * @param {string} dateStr - Date string to validate.
+ * @param {string} [format="yyyy-mm-dd"] - Format of the date string.
+ * @returns {boolean} True when the date string is valid for the provided format, otherwise false.
+ */
+function isValidDate(dateStr, format = "yyyy-mm-dd") {
+  try {
+    if (typeof dateStr !== "string" || !dateStr || format?.length < 8) {
+      return false;
+    }
+
+    if (parseDate(dateStr, format)) {
+      return true;
+    }
+  } catch (error) {
+    return false;
+  }
+  return false;
+}
+
+/**
+ * Converts a JavaScript Date instance to a simple ISO-like date string. This returns only the calendar date portion without any time or timezone information.
+ *
+ * @param {Date} date - Date instance to convert to an ISO-like string.
+ * @returns {string} A string in the format "yyyy-mm-dd" representing the provided date.
+ * @throws {Error} Throws an error when the input is not a valid Date instance.
+ */
+function toISOFormatString(date) {
+  if (!(date instanceof Date) || Number.isNaN(date.getTime())) {
+    throw new Error(
+      "AuroDatepickerUtilities | toISOFormatString: Input must be a valid Date instance",
+    );
+  }
+  return `${String(date.getFullYear()).padStart(4, "0")}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(date.getDate()).padStart(2, "0")}`;
+}
+
+/**
+ * Converts a date string into a JavaScript Date instance. This method supports ISO formatted strings and other formats that can be parsed by the formatter.
+ *
+ * @param {String} dateStr - Date string to convert into a Date object.
+ * @param {String} format - Date format used to parse the string when it is not in ISO format.
+ * @returns {Date|null} Returns a Date instance for valid input or null for non-string input.
+ * @throws {Error} Throws when parsing fails for non-ISO string input.
+ */
+function stringToDateInstance(dateStr, format = "yyyy-mm-dd") {
+  if (typeof dateStr !== "string") {
+    return null;
+  }
+
+  const { month, day, year } = parseDate(dateStr, format);
+  return new Date(`${year}/${month}/${day}`);
+}
+
+export const dateFormatter = {
+  parseDate,
+  getDateParts,
+  getDateAsString,
+  toNorthAmericanFormat,
+  isValidDate,
+  toISOFormatString,
+  stringToDateInstance,
+};