@aurodesignsystem-dev/auro-formkit 0.0.0-pr1483.0 → 0.0.0-pr1483.10

package/components/combobox/demo/keyboard-behavior.md

@@ -30,7 +30,7 @@
 </thead>
 <tbody>
 <tr>
-<td rowspan="6">ArrowDown</td>
+<td rowspan="8">ArrowDown</td>
 <td rowspan="2">-</td>
 <td>Collapsed, list options have been populated</td>
 <td>
@@ -51,12 +51,17 @@
 </td>
 </tr>
 <tr>
-<td rowspan="2">Command</td>
+<td rowspan="2">Meta (Command / Windows key)</td>
 <td>Collapsed, list options have been populated</td>
 <td>
               Trigger input element, <strong>NOT</strong> the trigger input clear button
 </td>
-<td>Opens the bib.</td>
+<td>
+              Opens the bib.
+<div class="note">
+<strong>Note:</strong> On Windows, <code>Meta</code> + arrow key combinations are reserved by the operating system for window management. Windows users should use <code>Control</code> or <code>Alt</code> instead.
+</div>
+</td>
 </tr>
 <tr>
 <td>Expanded</td>
@@ -71,7 +76,7 @@
 </td>
 </tr>
 <tr>
-<td rowspan="2">Option</td>
+<td rowspan="2">Alt (Option)</td>
 <td>Collapsed, list options have been populated</td>
 <td>
               Trigger input element, <strong>NOT</strong> the trigger input clear button
@@ -91,7 +96,32 @@
 </td>
 </tr>
 <tr>
-<td rowspan="6">ArrowUp</td>
+<td rowspan="2">Control</td>
+<td>Collapsed, list options have been populated</td>
+<td>
+              Trigger input element, <strong>NOT</strong> the trigger input clear button
+</td>
+<td>
+              Opens the bib.
+<div class="note">
+<strong>Note:</strong> On macOS, <code>Control</code> + arrow key combinations are reserved by the operating system for Mission Control and Application Windows. macOS users should use <code>Meta</code> or <code>Alt</code> instead.
+</div>
+</td>
+</tr>
+<tr>
+<td>Expanded</td>
+<td>
+              Input element, <strong>NOT</strong> the input clear button
+<div class="note">
+<strong>Note:</strong> Includes both trigger and bib content inputs.
+</div>
+</td>
+<td>
+              Advances the <code>focused</code> option to the last enabled option in the list.
+</td>
+</tr>
+<tr>
+<td rowspan="8">ArrowUp</td>
 <td rowspan="2">-</td>
 <td>Collapsed, list options have been populated</td>
 <td>
@@ -112,12 +142,17 @@
 </td>
 </tr>
 <tr>
-<td rowspan="2">Command</td>
+<td rowspan="2">Meta (Command / Windows key)</td>
 <td>Collapsed, list options have been populated</td>
 <td>
               Trigger input element, <strong>NOT</strong> the trigger input clear button
 </td>
-<td>Opens the bib.</td>
+<td>
+              Opens the bib.
+<div class="note">
+<strong>Note:</strong> On Windows, <code>Meta</code> + arrow key combinations are reserved by the operating system for window management. Windows users should use <code>Control</code> or <code>Alt</code> instead.
+</div>
+</td>
 </tr>
 <tr>
 <td>Expanded</td>
@@ -132,7 +167,7 @@
 </td>
 </tr>
 <tr>
-<td rowspan="2">Option</td>
+<td rowspan="2">Alt (Option)</td>
 <td>Collapsed, list options have been populated</td>
 <td>
               Input element, <strong>NOT</strong> the input clear button
@@ -152,6 +187,31 @@
 </td>
 </tr>
 <tr>
+<td rowspan="2">Control</td>
+<td>Collapsed, list options have been populated</td>
+<td>
+              Trigger input element, <strong>NOT</strong> the trigger input clear button
+</td>
+<td>
+              Opens the bib.
+<div class="note">
+<strong>Note:</strong> On macOS, <code>Control</code> + arrow key combinations are reserved by the operating system for Mission Control and Application Windows. macOS users should use <code>Meta</code> or <code>Alt</code> instead.
+</div>
+</td>
+</tr>
+<tr>
+<td>Expanded</td>
+<td>
+              Input element, <strong>NOT</strong> the input clear button
+<div class="note">
+<strong>Note:</strong> Includes both trigger and bib content inputs.
+</div>
+</td>
+<td>
+              Advances the <code>focused</code> option to the first enabled option in the list.
+</td>
+</tr>
+<tr>
 <td>End</td>
 <td>-</td>
 <td>Expanded</td>

package/components/combobox/dist/index.js

@@ -130,237 +130,6 @@ let AuroLibraryRuntimeUtils$4 = class AuroLibraryRuntimeUtils {
   }
 };
 
-/**
- * @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$1(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}`,
-    );
-  }
-
-  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$1(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$1(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$1(dateStr, format = "mm/dd/yyyy") {
-  if (!dateStr || !format) {
-    return undefined;
-  }
-  const result = getDateParts$1(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$1(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$1(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$1(dateStr, format) {
-  if (format === "mm/dd/yyyy") {
-    return dateStr;
-  }
-
-  const parsedDate = parseDate$1(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$1(dateStr, format = "yyyy-mm-dd") {
-  try {
-    if (typeof dateStr !== "string" || !dateStr || format?.length < 8) {
-      return false;
-    }
-
-    if (parseDate$1(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$1(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$1(dateStr, format = "yyyy-mm-dd") {
-  if (typeof dateStr !== "string") {
-    return null;
-  }
-
-  const { month, day, year } = parseDate$1(dateStr, format);
-  return new Date(`${year}/${month}/${day}`);
-}
-
-const dateFormatter$1 = {
-  parseDate: parseDate$1,
-  getDateParts: getDateParts$1,
-  getDateAsString: getDateAsString$1,
-  toNorthAmericanFormat: toNorthAmericanFormat$1,
-  isValidDate: isValidDate$1,
-  toISOFormatString: toISOFormatString$1,
-  stringToDateInstance: stringToDateInstance$1,
-};
-
 // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
 
@@ -582,7 +351,7 @@ let AuroFormValidation$1 = class AuroFormValidation {
         }
 
         // Validate that the date passed was the correct format and is a valid date
-        if (elem.value && !dateFormatter$1.isValidDate(elem.inputElement.value, elem.format)) {
+        if (elem.value && !elem.valueObject) {
           elem.validity = 'patternMismatch';
           elem.errorMessage = elem.setCustomValidityPatternMismatch || elem.setCustomValidity || 'Invalid Date Format Entered';
           return;
@@ -1041,7 +810,7 @@ const comboboxKeyboardStrategy = {
 
       // navigate if bib is open otherwise open it
       if (component.dropdown.isPopoverVisible) {
-        if (evt.altKey || evt.metaKey) {
+        if (evt.altKey || evt.ctrlKey || evt.metaKey) {
           component.activateLastEnabledAvailableOption();
         } else {
           navigateArrow(component, 'down');
@@ -1064,7 +833,7 @@ const comboboxKeyboardStrategy = {
 
       // navigate if bib is open otherwise open it
       if (component.dropdown.isPopoverVisible) {
-        if (evt.altKey || evt.metaKey) {
+        if (evt.altKey || evt.ctrlKey || evt.metaKey) {
           component.activateFirstEnabledAvailableOption();
         } else {
           navigateArrow(component, 'up');
@@ -5020,7 +4789,7 @@ let AuroHelpText$2 = class AuroHelpText extends LitElement {
   }
 };
 
-var formkitVersion$2 = '202605271728';
+var formkitVersion$2 = '202606051610';
 
 let AuroElement$2 = class AuroElement extends LitElement {
   static get properties() {
@@ -10437,7 +10206,7 @@ class AuroFormValidation {
         }
 
         // Validate that the date passed was the correct format and is a valid date
-        if (elem.value && !dateFormatter.isValidDate(elem.inputElement.value, elem.format)) {
+        if (elem.value && !elem.valueObject) {
           elem.validity = 'patternMismatch';
           elem.errorMessage = elem.setCustomValidityPatternMismatch || elem.setCustomValidity || 'Invalid Date Format Entered';
           return;
@@ -18271,7 +18040,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
   }
 };
 
-var formkitVersion$1 = '202605271728';
+var formkitVersion$1 = '202606051610';
 
 // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -19388,7 +19157,7 @@ class AuroBibtemplate extends LitElement {
   }
 }
 
-var formkitVersion = '202605271728';
+var formkitVersion = '202606051610';
 
 var styleCss$1 = css`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}:host{display:block;text-align:left}:host [auro-dropdown]{--ds-auro-dropdown-trigger-background-color: transparent}:host #inputInBib::part(wrapper){box-shadow:none}:host #inputInBib::part(accent-left){display:none}:host([layout*=classic]) [auro-input]{width:100%}:host([layout*=classic]) [auro-input]::part(helpText){display:none}:host([layout*=classic]) #slotHolder{display:none}`;