@aurodesignsystem-dev/auro-formkit 0.0.0-pr1506.0 → 0.0.0-pr1506.2

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

@@ -4888,7 +4888,7 @@ let AuroHelpText$2 = class AuroHelpText extends i$3 {
   }
 };
 
-var formkitVersion$2 = '202606190840';
+var formkitVersion$2 = '202606221656';
 
 let AuroElement$2 = class AuroElement extends i$3 {
   static get properties() {
@@ -16761,10 +16761,8 @@ class BaseInput extends AuroElement$1 {
     this.layout = 'classic';
     this.locale = 'en-US';
     this.max = undefined;
-    this._maxObject = undefined;
     this.maxLength = undefined;
     this.min = undefined;
-    this._minObject = undefined;
     this.minLength = undefined;
     this.required = false;
     this.onDark = false;
@@ -16772,7 +16770,6 @@ class BaseInput extends AuroElement$1 {
     this.size = 'lg';
     this.shape = 'classic';
     this.value = undefined;
-    this._valueObject = undefined;
 
     this._initializePrivateDefaults();
   }
@@ -17312,7 +17309,7 @@ class BaseInput extends AuroElement$1 {
    * @returns {Date|undefined}
    */
   get valueObject() {
-    return this._valueObject || this._computeDateObjectFallback(this.value);
+    return this.value && dateFormatter.isValidDate(this.value) ? dateFormatter.stringToDateInstance(this.value) : undefined;
   }
 
   /**
@@ -17320,7 +17317,7 @@ class BaseInput extends AuroElement$1 {
    * @returns {Date|undefined}
    */
   get minObject() {
-    return this._minObject || this._computeDateObjectFallback(this.min);
+    return this.min && dateFormatter.isValidDate(this.min) ? dateFormatter.stringToDateInstance(this.min) : undefined;
   }
 
   /**
@@ -17328,50 +17325,7 @@ class BaseInput extends AuroElement$1 {
    * @returns {Date|undefined}
    */
   get maxObject() {
-    return this._maxObject || this._computeDateObjectFallback(this.max);
-  }
-
-  /**
-   * Parses a date string into a Date object when the corresponding `_*Object`
-   * field hasn't been synced yet by `updated()`. Returns undefined when the
-   * input type/format isn't a full date or the string is not a valid date.
-   *
-   * Why this exists: a parent (datepicker) can call `inputN.validate()` from
-   * inside its own `updated()` before this input's `updated()` has run
-   * `syncDateValues()` — so `_valueObject`/`_maxObject` are still `undefined`
-   * and range checks would otherwise silently no-op (flipping the result to
-   * `valid` or `patternMismatch`).
-   * @private
-   * @param {string|undefined} dateStr - ISO date string from `value`/`min`/`max`.
-   * @returns {Date|undefined}
-   */
-  _computeDateObjectFallback(dateStr) {
-    if (!dateStr || !this.util || !this.util.isFullDateFormat(this.type, this.format)) {
-      return undefined;
-    }
-    if (!dateFormatter.isValidDate(dateStr)) {
-      return undefined;
-    }
-    return dateFormatter.stringToDateInstance(dateStr);
-  }
-
-  /**
-   * Internal setter for readonly date object properties.
-   * @private
-   * @param {'valueObject'|'minObject'|'maxObject'} propertyName - Public object property name.
-   * @param {Date|undefined} propertyValue - Value to assign.
-   * @returns {void}
-   */
-  setDateObjectProperty(propertyName, propertyValue) {
-    const internalPropertyName = `_${propertyName}`;
-    const previousValue = this[internalPropertyName];
-
-    if (previousValue === propertyValue) {
-      return;
-    }
-
-    this[internalPropertyName] = propertyValue;
-    this.requestUpdate(propertyName, previousValue);
+    return this.max && dateFormatter.isValidDate(this.max) ? dateFormatter.stringToDateInstance(this.max) : undefined;
   }
 
   connectedCallback() {
@@ -17400,7 +17354,6 @@ class BaseInput extends AuroElement$1 {
       format: this.format
     });
     this.configureDataForType();
-    this.syncDateValues();
   }
 
   disconnectedCallback() {
@@ -17430,7 +17383,6 @@ class BaseInput extends AuroElement$1 {
     this.setCustomHelpTextMessage();
     this.configureAutoFormatting();
     this.configureDataForType();
-    this.syncDateValues();
   }
 
   /**
@@ -17567,8 +17519,6 @@ class BaseInput extends AuroElement$1 {
       this.configureDataForType();
     }
 
-    this.syncDateValues(changedProperties);
-
     if (changedProperties.has('value')) {
       if (this.value && this.value.length > 0) {
         this.hasValue = true;
@@ -17639,69 +17589,6 @@ class BaseInput extends AuroElement$1 {
     }));
   }
 
-
-  /**
-   * Synchronizes the ISO string values and Date object representations for date-related properties.
-   * This keeps the model and display values aligned when either side changes.
-   *
-   * When a full date format is in use, this method updates `value`, `min`, and `max` from their corresponding
-   * Date objects or vice versa, based on which properties have changed. It only runs when the current configuration
-   * represents a full year/month/day date format.
-   *
-   * @param {Map<string, unknown>|undefined} [changedProperties=undefined] - Optional map of changed properties used to limit which values are synchronized.
-   * @returns {void}
-   * @private
-   */
-  syncDateValues(changedProperties = undefined) {
-    if (!this.util.isFullDateFormat(this.type, this.format)) {
-      return;
-    }
-
-    this.syncSingleDateValue(changedProperties, 'valueObject', 'value');
-    this.syncSingleDateValue(changedProperties, 'minObject', 'min');
-    this.syncSingleDateValue(changedProperties, 'maxObject', 'max');
-  }
-
-  /**
-   * Synchronizes one date object/string property pair.
-   * @private
-   * @param {Map<string, unknown>|undefined} changedProperties - Map of changed properties from Lit.
-   * @param {string} objectProperty - Date object property name.
-   * @param {string} valueProperty - ISO string property name.
-   * @returns {void}
-   */
-  syncSingleDateValue(changedProperties, objectProperty, valueProperty) {
-    const objectPropertyChanged = !changedProperties || changedProperties.has(objectProperty);
-
-    // objectProperty wins over valueProperty when both changed
-    if (objectPropertyChanged && this[objectProperty]) {
-      this[valueProperty] = dateFormatter.toISOFormatString(this[objectProperty]);
-      return;
-    }
-
-    const valuePropertyChanged = !changedProperties || changedProperties.has(valueProperty);
-    if (!valuePropertyChanged) {
-      return;
-    }
-
-    // when value is newly set to the same ISO string that corresponds to the existing Date object, do not clear the Date object (avoid unnecessary updates)
-    if (
-      changedProperties &&
-      valueProperty === 'value' &&
-      changedProperties.get('value') === undefined &&
-      this[objectProperty] instanceof Date &&
-      this[valueProperty] === dateFormatter.toISOFormatString(this[objectProperty])
-    ) {
-      return;
-    }
-
-    if (dateFormatter.isValidDate(this[valueProperty])) {
-      this.setDateObjectProperty(objectProperty, dateFormatter.stringToDateInstance(this[valueProperty]));
-    } else {
-      this.setDateObjectProperty(objectProperty, undefined);
-    }
-  }
-
   /**
    * Sets up IMasks and logic based on auto-formatting requirements.
    * @private
@@ -17716,8 +17603,13 @@ class BaseInput extends AuroElement$1 {
     this._configuringMask = true;
     try {
       // Destroy any prior mask so IMask can attach fresh under the new format.
+      // Null the reference too — if the new maskOptions.mask is falsy (e.g.
+      // type switched from credit-card to text) the IMask() reassignment
+      // below is skipped, and downstream writes at line ~823 would otherwise
+      // route through the destroyed instance.
       if (this.maskInstance) {
         this.maskInstance.destroy();
+        this.maskInstance = null;
       }
 
       this.util.updateFormat(this.format);
@@ -17738,9 +17630,7 @@ class BaseInput extends AuroElement$1 {
         if (
           this.util.isFullDateFormat(this.type, this.format) &&
           this.value &&
-          dateFormatter.isValidDate(this.value) &&
-          this.valueObject instanceof Date &&
-          !Number.isNaN(this.valueObject.getTime()) &&
+          this.valueObject &&
           typeof maskOptions.format === 'function'
         ) {
           existingValue = maskOptions.format(this.valueObject);
@@ -17945,7 +17835,6 @@ class BaseInput extends AuroElement$1 {
    */
   reset() {
     this.value = undefined;
-    this.setDateObjectProperty('valueObject', undefined);
     this.validation.reset(this);
   }
 
@@ -17954,7 +17843,6 @@ class BaseInput extends AuroElement$1 {
    */
   clear() {
     this.value = undefined;
-    this.setDateObjectProperty('valueObject', undefined);
   }
 
   /**
@@ -18483,7 +18371,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$3 {
   }
 };
 
-var formkitVersion$1 = '202606190840';
+var formkitVersion$1 = '202606221656';
 
 // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -19604,7 +19492,7 @@ class AuroBibtemplate extends i$3 {
   }
 }
 
-var formkitVersion = '202606190840';
+var formkitVersion = '202606221656';
 
 var styleCss$3 = i$6`.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}`;
 
@@ -21121,11 +21009,15 @@ class AuroCombobox extends AuroElement {
 
         // Announce the selection after the dropdown closes so it isn't
         // overridden by VoiceOver's "collapsed" announcement from aria-expanded.
+        // Skip when there's no selected value (e.g. menu.clearSelection() from
+        // the unmatched-value path), otherwise VoiceOver reads "undefined".
         const selectedValue = this.menu.value;
-        const announcementDelay = 300;
-        setTimeout(() => {
-          announceToScreenReader(this._getAnnouncementRoot(), `${selectedValue}, selected`);
-        }, announcementDelay);
+        if (selectedValue) {
+          const announcementDelay = 300;
+          setTimeout(() => {
+            announceToScreenReader(this._getAnnouncementRoot(), `${selectedValue}, selected`);
+          }, announcementDelay);
+        }
       }
 
       // Programmatic value syncs leave availableOptions stale because
@@ -21546,8 +21438,12 @@ class AuroCombobox extends AuroElement {
         if (this.menu.options.some((opt) => opt.value === this.value) || this.behavior === 'filter') {
           this.setMenuValue(this.value);
         } else {
-          if (this.menu.value) {
-            this.menu.value = undefined;
+          // Clear menu.value AND menu.optionSelected together. Clearing only
+          // menu.value leaves the previously-selected option element pinned
+          // as menu.optionSelected; a later auroMenu-selectedOption event
+          // would then write its stale .value back into combobox.value.
+          if (this.menu.value || this.menu.optionSelected) {
+            this.menu.clearSelection();
           }
           // Suggestion-mode freeform value: sync the trigger + bib to show it,
           // then refresh the filter once the inputs flush (handleInputValueChange

package/components/combobox/dist/index.js

@@ -4806,7 +4806,7 @@ let AuroHelpText$2 = class AuroHelpText extends LitElement {
   }
 };
 
-var formkitVersion$2 = '202606190840';
+var formkitVersion$2 = '202606221656';
 
 let AuroElement$2 = class AuroElement extends LitElement {
   static get properties() {
@@ -16672,10 +16672,8 @@ class BaseInput extends AuroElement$1 {
     this.layout = 'classic';
     this.locale = 'en-US';
     this.max = undefined;
-    this._maxObject = undefined;
     this.maxLength = undefined;
     this.min = undefined;
-    this._minObject = undefined;
     this.minLength = undefined;
     this.required = false;
     this.onDark = false;
@@ -16683,7 +16681,6 @@ class BaseInput extends AuroElement$1 {
     this.size = 'lg';
     this.shape = 'classic';
     this.value = undefined;
-    this._valueObject = undefined;
 
     this._initializePrivateDefaults();
   }
@@ -17223,7 +17220,7 @@ class BaseInput extends AuroElement$1 {
    * @returns {Date|undefined}
    */
   get valueObject() {
-    return this._valueObject || this._computeDateObjectFallback(this.value);
+    return this.value && dateFormatter.isValidDate(this.value) ? dateFormatter.stringToDateInstance(this.value) : undefined;
   }
 
   /**
@@ -17231,7 +17228,7 @@ class BaseInput extends AuroElement$1 {
    * @returns {Date|undefined}
    */
   get minObject() {
-    return this._minObject || this._computeDateObjectFallback(this.min);
+    return this.min && dateFormatter.isValidDate(this.min) ? dateFormatter.stringToDateInstance(this.min) : undefined;
   }
 
   /**
@@ -17239,50 +17236,7 @@ class BaseInput extends AuroElement$1 {
    * @returns {Date|undefined}
    */
   get maxObject() {
-    return this._maxObject || this._computeDateObjectFallback(this.max);
-  }
-
-  /**
-   * Parses a date string into a Date object when the corresponding `_*Object`
-   * field hasn't been synced yet by `updated()`. Returns undefined when the
-   * input type/format isn't a full date or the string is not a valid date.
-   *
-   * Why this exists: a parent (datepicker) can call `inputN.validate()` from
-   * inside its own `updated()` before this input's `updated()` has run
-   * `syncDateValues()` — so `_valueObject`/`_maxObject` are still `undefined`
-   * and range checks would otherwise silently no-op (flipping the result to
-   * `valid` or `patternMismatch`).
-   * @private
-   * @param {string|undefined} dateStr - ISO date string from `value`/`min`/`max`.
-   * @returns {Date|undefined}
-   */
-  _computeDateObjectFallback(dateStr) {
-    if (!dateStr || !this.util || !this.util.isFullDateFormat(this.type, this.format)) {
-      return undefined;
-    }
-    if (!dateFormatter.isValidDate(dateStr)) {
-      return undefined;
-    }
-    return dateFormatter.stringToDateInstance(dateStr);
-  }
-
-  /**
-   * Internal setter for readonly date object properties.
-   * @private
-   * @param {'valueObject'|'minObject'|'maxObject'} propertyName - Public object property name.
-   * @param {Date|undefined} propertyValue - Value to assign.
-   * @returns {void}
-   */
-  setDateObjectProperty(propertyName, propertyValue) {
-    const internalPropertyName = `_${propertyName}`;
-    const previousValue = this[internalPropertyName];
-
-    if (previousValue === propertyValue) {
-      return;
-    }
-
-    this[internalPropertyName] = propertyValue;
-    this.requestUpdate(propertyName, previousValue);
+    return this.max && dateFormatter.isValidDate(this.max) ? dateFormatter.stringToDateInstance(this.max) : undefined;
   }
 
   connectedCallback() {
@@ -17311,7 +17265,6 @@ class BaseInput extends AuroElement$1 {
       format: this.format
     });
     this.configureDataForType();
-    this.syncDateValues();
   }
 
   disconnectedCallback() {
@@ -17341,7 +17294,6 @@ class BaseInput extends AuroElement$1 {
     this.setCustomHelpTextMessage();
     this.configureAutoFormatting();
     this.configureDataForType();
-    this.syncDateValues();
   }
 
   /**
@@ -17478,8 +17430,6 @@ class BaseInput extends AuroElement$1 {
       this.configureDataForType();
     }
 
-    this.syncDateValues(changedProperties);
-
     if (changedProperties.has('value')) {
       if (this.value && this.value.length > 0) {
         this.hasValue = true;
@@ -17550,69 +17500,6 @@ class BaseInput extends AuroElement$1 {
     }));
   }
 
-
-  /**
-   * Synchronizes the ISO string values and Date object representations for date-related properties.
-   * This keeps the model and display values aligned when either side changes.
-   *
-   * When a full date format is in use, this method updates `value`, `min`, and `max` from their corresponding
-   * Date objects or vice versa, based on which properties have changed. It only runs when the current configuration
-   * represents a full year/month/day date format.
-   *
-   * @param {Map<string, unknown>|undefined} [changedProperties=undefined] - Optional map of changed properties used to limit which values are synchronized.
-   * @returns {void}
-   * @private
-   */
-  syncDateValues(changedProperties = undefined) {
-    if (!this.util.isFullDateFormat(this.type, this.format)) {
-      return;
-    }
-
-    this.syncSingleDateValue(changedProperties, 'valueObject', 'value');
-    this.syncSingleDateValue(changedProperties, 'minObject', 'min');
-    this.syncSingleDateValue(changedProperties, 'maxObject', 'max');
-  }
-
-  /**
-   * Synchronizes one date object/string property pair.
-   * @private
-   * @param {Map<string, unknown>|undefined} changedProperties - Map of changed properties from Lit.
-   * @param {string} objectProperty - Date object property name.
-   * @param {string} valueProperty - ISO string property name.
-   * @returns {void}
-   */
-  syncSingleDateValue(changedProperties, objectProperty, valueProperty) {
-    const objectPropertyChanged = !changedProperties || changedProperties.has(objectProperty);
-
-    // objectProperty wins over valueProperty when both changed
-    if (objectPropertyChanged && this[objectProperty]) {
-      this[valueProperty] = dateFormatter.toISOFormatString(this[objectProperty]);
-      return;
-    }
-
-    const valuePropertyChanged = !changedProperties || changedProperties.has(valueProperty);
-    if (!valuePropertyChanged) {
-      return;
-    }
-
-    // when value is newly set to the same ISO string that corresponds to the existing Date object, do not clear the Date object (avoid unnecessary updates)
-    if (
-      changedProperties &&
-      valueProperty === 'value' &&
-      changedProperties.get('value') === undefined &&
-      this[objectProperty] instanceof Date &&
-      this[valueProperty] === dateFormatter.toISOFormatString(this[objectProperty])
-    ) {
-      return;
-    }
-
-    if (dateFormatter.isValidDate(this[valueProperty])) {
-      this.setDateObjectProperty(objectProperty, dateFormatter.stringToDateInstance(this[valueProperty]));
-    } else {
-      this.setDateObjectProperty(objectProperty, undefined);
-    }
-  }
-
   /**
    * Sets up IMasks and logic based on auto-formatting requirements.
    * @private
@@ -17627,8 +17514,13 @@ class BaseInput extends AuroElement$1 {
     this._configuringMask = true;
     try {
       // Destroy any prior mask so IMask can attach fresh under the new format.
+      // Null the reference too — if the new maskOptions.mask is falsy (e.g.
+      // type switched from credit-card to text) the IMask() reassignment
+      // below is skipped, and downstream writes at line ~823 would otherwise
+      // route through the destroyed instance.
       if (this.maskInstance) {
         this.maskInstance.destroy();
+        this.maskInstance = null;
       }
 
       this.util.updateFormat(this.format);
@@ -17649,9 +17541,7 @@ class BaseInput extends AuroElement$1 {
         if (
           this.util.isFullDateFormat(this.type, this.format) &&
           this.value &&
-          dateFormatter.isValidDate(this.value) &&
-          this.valueObject instanceof Date &&
-          !Number.isNaN(this.valueObject.getTime()) &&
+          this.valueObject &&
           typeof maskOptions.format === 'function'
         ) {
           existingValue = maskOptions.format(this.valueObject);
@@ -17856,7 +17746,6 @@ class BaseInput extends AuroElement$1 {
    */
   reset() {
     this.value = undefined;
-    this.setDateObjectProperty('valueObject', undefined);
     this.validation.reset(this);
   }
 
@@ -17865,7 +17754,6 @@ class BaseInput extends AuroElement$1 {
    */
   clear() {
     this.value = undefined;
-    this.setDateObjectProperty('valueObject', undefined);
   }
 
   /**
@@ -18394,7 +18282,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
   }
 };
 
-var formkitVersion$1 = '202606190840';
+var formkitVersion$1 = '202606221656';
 
 // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -19515,7 +19403,7 @@ class AuroBibtemplate extends LitElement {
   }
 }
 
-var formkitVersion = '202606190840';
+var formkitVersion = '202606221656';
 
 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}`;
 
@@ -21032,11 +20920,15 @@ class AuroCombobox extends AuroElement {
 
         // Announce the selection after the dropdown closes so it isn't
         // overridden by VoiceOver's "collapsed" announcement from aria-expanded.
+        // Skip when there's no selected value (e.g. menu.clearSelection() from
+        // the unmatched-value path), otherwise VoiceOver reads "undefined".
         const selectedValue = this.menu.value;
-        const announcementDelay = 300;
-        setTimeout(() => {
-          announceToScreenReader(this._getAnnouncementRoot(), `${selectedValue}, selected`);
-        }, announcementDelay);
+        if (selectedValue) {
+          const announcementDelay = 300;
+          setTimeout(() => {
+            announceToScreenReader(this._getAnnouncementRoot(), `${selectedValue}, selected`);
+          }, announcementDelay);
+        }
       }
 
       // Programmatic value syncs leave availableOptions stale because
@@ -21457,8 +21349,12 @@ class AuroCombobox extends AuroElement {
         if (this.menu.options.some((opt) => opt.value === this.value) || this.behavior === 'filter') {
           this.setMenuValue(this.value);
         } else {
-          if (this.menu.value) {
-            this.menu.value = undefined;
+          // Clear menu.value AND menu.optionSelected together. Clearing only
+          // menu.value leaves the previously-selected option element pinned
+          // as menu.optionSelected; a later auroMenu-selectedOption event
+          // would then write its stale .value back into combobox.value.
+          if (this.menu.value || this.menu.optionSelected) {
+            this.menu.clearSelection();
           }
           // Suggestion-mode freeform value: sync the trigger + bib to show it,
           // then refresh the filter once the inputs flush (handleInputValueChange