@aurodesignsystem-dev/auro-formkit 0.0.0-pr1604.1 → 0.0.0-pr1605.0

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

@@ -3018,6 +3018,48 @@ const computePosition = (reference, floating, options) => {
   });
 };
 
+/**
+ * Generates a v4 UUID with a three-tier fallback for insecure contexts.
+ *
+ * Tier 1 (secure contexts): crypto.randomUUID() — native, fully random.
+ * Tier 2 (insecure contexts): crypto.getRandomValues() — available on all
+ *   modern browsers regardless of secure-context status.
+ * Tier 3 (last resort, no crypto API): new Date().getTime() — lower entropy,
+ *   but sufficient for element IDs where collision risk is negligible.
+ *
+ * See: https://w3c.github.io/webcrypto/#dom-crypto-randomuuid (secure-context restriction)
+ */
+function generateUUID() {
+  let uuid;
+
+  if (
+    typeof crypto !== "undefined" &&
+    typeof crypto.randomUUID === "function"
+  ) {
+    uuid = crypto.randomUUID();
+  } else if (
+    typeof crypto !== "undefined" &&
+    typeof crypto.getRandomValues === "function"
+  ) {
+    const bytes = new Uint8Array(16);
+    crypto.getRandomValues(bytes);
+    bytes[6] = (bytes[6] & 0x0f) | 0x40;
+    bytes[8] = (bytes[8] & 0x3f) | 0x80;
+    const hex = Array.from(bytes).map((b) => b.toString(16).padStart(2, "0"));
+    uuid = `${hex.slice(0, 4).join("")}-${hex.slice(4, 6).join("")}-${hex.slice(6, 8).join("")}-${hex.slice(8, 10).join("")}-${hex.slice(10).join("")}`;
+  } else {
+    let d = new Date().getTime();
+    uuid = "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (c) => {
+      const r = (d % 16) | 0;
+      d = (d - r) / 16 || new Date().getTime();
+      return (c === "x" ? r : (r & 0x3) | 0x8).toString(16);
+    });
+  }
+
+  // CSS selectors require IDs starting with a letter; replace a leading digit with 'a'.
+  return /^[0-9]/.test(uuid) ? `a${uuid.slice(1)}` : uuid;
+}
+
 /* eslint-disable line-comment-position, no-inline-comments */
 
 
@@ -4036,7 +4078,7 @@ class AuroFloatingUI {
 
     this.id = element.getAttribute("id");
     if (!this.id) {
-      this.id = window.crypto.randomUUID();
+      this.id = generateUUID();
       element.setAttribute("id", this.id);
     }
 
@@ -5081,7 +5123,7 @@ let AuroHelpText$2 = class AuroHelpText extends i$3 {
   }
 };
 
-var formkitVersion$2 = '202609012101';
+var formkitVersion$2 = '202609022200';
 
 /**
  * AuroElement is the shared base class for layout-aware Auro form components.
@@ -18950,7 +18992,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$3 {
   }
 };
 
-var formkitVersion$1 = '202609012101';
+var formkitVersion$1 = '202609022200';
 
 // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -20142,7 +20184,7 @@ class AuroBibtemplate extends i$3 {
   }
 }
 
-var formkitVersion = '202609012101';
+var formkitVersion = '202609022200';
 
 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}`;
 
@@ -20583,6 +20625,11 @@ class AuroCombobox extends AuroElement {
     this.behavior = "suggestion";
     this.clearBtnFocused = false;
 
+    // One-shot: set when the input's clear button is activated so the
+    // SPA-preselect guard in handleInputValueChange doesn't swallow the
+    // genuine clear (AB#1634257).
+    this._clearBtnActivated = false;
+
     // Defaults that effect the overall layout of the combobox
     this.checkmark = false;
     this.dvInputOnly = false;
@@ -21540,6 +21587,13 @@ class AuroCombobox extends AuroElement {
     this.bibtemplate = this.dropdown.querySelector(this.bibtemplateTag._$litStatic$);
     this.inputInBib = this.bibtemplate.querySelector(this.inputTag._$litStatic$);
 
+    // Mirror the trigger's clear-button tracking onto the fullscreen bib input
+    // so clearing there also fully resets the combobox (AB#1634257). See
+    // trackClearBtnActivation for why this must run in the capture phase.
+    if (this.inputInBib && this.inputInBib !== this.input) {
+      this.trackClearBtnActivation(this.inputInBib);
+    }
+
     // Pass label text to the dropdown bib for accessible dialog naming
     const labelElement = this.querySelector('[slot="label"]');
     if (labelElement) {
@@ -21925,6 +21979,52 @@ class AuroCombobox extends AuroElement {
         this.clearBtnFocused = false;
       }
     });
+
+    this.trackClearBtnActivation(this.input);
+  }
+
+  /**
+   * Flags genuine clear-button activations on an auro-input so the SPA-preselect
+   * guard in handleInputValueChange doesn't swallow them.
+   *
+   * The auro-input clear button fires an `isProgrammatic` input event (via
+   * notifyValueChanged) that is indistinguishable in shape from the
+   * SPA-preselect echo that guard bails on (isProgrammatic + set value + empty
+   * input). Without this one-shot flag, clicking clear would leave
+   * this.value/optionSelected stale (AB#1634257).
+   *
+   * Delegated on the shadow root so it works regardless of when .clearBtn
+   * renders (it only exists after a value is set), and covers both real clicks
+   * and programmatic clearBtn.click() (which no focusin precedes). Registered in
+   * the CAPTURE phase so the flag is set BEFORE the button's own @click
+   * (handleClickClear) fires its synchronous input event — which is when
+   * handleInputValueChange reads the flag.
+   * @private
+   * @param {Element} inputEl - The auro-input whose clear button to track.
+   * @returns {void}
+   */
+  trackClearBtnActivation(inputEl) {
+    if (!inputEl || !inputEl.shadowRoot) {
+      return;
+    }
+    inputEl.shadowRoot.addEventListener('click', (event) => {
+      if (event.target.closest('.clearBtn')) {
+        this._clearBtnActivated = true;
+
+        // Bound the flag's lifetime to this synchronous clear -> input window.
+        // auro-input's handleClickClear fires its input event synchronously
+        // (before any macrotask runs), so handleInputValueChange consumes the
+        // flag first and this reset is a harmless no-op. It only does real work
+        // if that input event never arrives (e.g. auro-input throws mid-clear),
+        // guaranteeing the flag can't survive to be misread as a genuine clear
+        // by a later unrelated event such as an SPA-preselect echo (AB#1634257).
+        // Scheduled via _scheduleTimer so disconnectedCallback cancels it if the
+        // component tears down inside that window.
+        this._scheduleTimer(() => {
+          this._clearBtnActivated = false;
+        }, 0);
+      }
+    }, true);
   }
 
   /**
@@ -21966,6 +22066,17 @@ class AuroCombobox extends AuroElement {
    * @returns {void}
    */
   handleInputValueChange(event) {
+    // Consume the one-shot clear-button flag on EVERY entry, before any branch
+    // below can early-return. trackClearBtnActivation sets it in the capture
+    // phase right before auro-input's clear button fires its synchronous input
+    // event; reading and immediately clearing it here guarantees the flag never
+    // survives a handleInputValueChange call to leak into a later event (e.g.
+    // the bib branch bailing at _syncingDisplayValue, or an SPA-preselect echo)
+    // where it would defeat the guard below. Held in a local so that guard can
+    // still tell a genuine clear from the init-render echo (AB#1634257).
+    const clearBtnActivated = this._clearBtnActivated;
+    this._clearBtnActivated = false;
+
     // When the event comes from the fullscreen bib input, sync the value to
     // the trigger input. Setting trigger.value triggers Lit's updated()
     // (async, microtask) which fires notifyValueChanged() → another 'input'
@@ -22013,7 +22124,12 @@ class AuroCombobox extends AuroElement {
     // to the exact shape of that echo (isProgrammatic + non-empty combobox
     // value + empty input.value) so it doesn't affect the swap/typed paths
     // where value/input already track each other through the sync helpers.
-    if (event && event.isProgrammatic && this.value && !this.input.value) {
+    // The clear button's echo has the same shape (isProgrammatic + set value +
+    // empty input) but is a genuine user clear that MUST reset this.value and
+    // optionSelected below. clearBtnActivated (consumed at the top of this
+    // method) is true only for that genuine clear, so only the real
+    // SPA-preselect echo bails (AB#1634257).
+    if (event && event.isProgrammatic && this.value && !this.input.value && !clearBtnActivated) {
       return;
     }
 
@@ -22158,6 +22274,14 @@ class AuroCombobox extends AuroElement {
     // retry would otherwise keep rescheduling itself indefinitely.
     this._pendingTimers.forEach((id) => clearTimeout(id));
     this._pendingTimers.clear();
+
+    // Cancelling the timers above drops the macrotask that would have reset
+    // _clearBtnActivated, so reset it here too. Otherwise a disconnect inside
+    // the clear-click -> macrotask window strands the flag `true`; instance
+    // state survives reconnect, and the first matching input event (including
+    // an SPA-preselect echo) would then bypass the guard in
+    // handleInputValueChange and silently clear value/optionSelected (AB#1634257).
+    this._clearBtnActivated = false;
   }
 
   firstUpdated() {
@@ -22256,6 +22380,14 @@ class AuroCombobox extends AuroElement {
       }
       if (this.menu.value || this.menu.optionSelected) {
         this.menu.reset();
+      } else {
+        // The menu's selection properties are already cleared, but option
+        // elements can still carry a stale `selected` attribute (e.g. the menu
+        // options were rebuilt after the value was set, orphaning the DOM from
+        // the now-null optionSelected). reset() is skipped above in that case,
+        // so re-sync the option DOM directly to guarantee no option renders as
+        // selected once the field is cleared (AB#1634259).
+        this.menu.clearSelection();
       }
     } finally {
       this._clearing = false;
@@ -23707,6 +23839,22 @@ class AuroMenu extends AuroElement {
     this.value = undefined;
     this._selectedKey = undefined;
     this._index = -1;
+
+    // Eagerly sync the option DOM to the now-empty selection. Nulling the
+    // reactive properties above normally schedules updated() → updateItemsState,
+    // but that only runs when a property actually changes. If an option still
+    // carries a stale `selected`/`aria-selected` attribute while these
+    // properties are already undefined (e.g. options were rebuilt after a value
+    // was set), no re-render fires and the option keeps rendering as selected.
+    // Strip that state now so no option looks selected after a clear (AB#1634259).
+    // Intentionally leaves `active`/`optionActive` untouched so a highlighted
+    // option remains keyboard-re-selectable after emptying the value (AB#1606433).
+    this.updateItemsState(new Map([
+      [
+        'optionSelected',
+        true
+      ]
+    ]));
   }
 
   /**

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

@@ -351,6 +351,7 @@ export class AuroCombobox extends AuroElement {
     /** @type {'filter' | 'suggestion'} */
     behavior: "filter" | "suggestion" | undefined;
     clearBtnFocused: boolean | undefined;
+    _clearBtnActivated: boolean | undefined;
     checkmark: boolean | undefined;
     dvInputOnly: boolean | undefined;
     /** @type {'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'disabled'} */
@@ -538,6 +539,27 @@ export class AuroCombobox extends AuroElement {
      * @returns {void}
      */
     private configureInput;
+    /**
+     * Flags genuine clear-button activations on an auro-input so the SPA-preselect
+     * guard in handleInputValueChange doesn't swallow them.
+     *
+     * The auro-input clear button fires an `isProgrammatic` input event (via
+     * notifyValueChanged) that is indistinguishable in shape from the
+     * SPA-preselect echo that guard bails on (isProgrammatic + set value + empty
+     * input). Without this one-shot flag, clicking clear would leave
+     * this.value/optionSelected stale (AB#1634257).
+     *
+     * Delegated on the shadow root so it works regardless of when .clearBtn
+     * renders (it only exists after a value is set), and covers both real clicks
+     * and programmatic clearBtn.click() (which no focusin precedes). Registered in
+     * the CAPTURE phase so the flag is set BEFORE the button's own @click
+     * (handleClickClear) fires its synchronous input event — which is when
+     * handleInputValueChange reads the flag.
+     * @private
+     * @param {Element} inputEl - The auro-input whose clear button to track.
+     * @returns {void}
+     */
+    private trackClearBtnActivation;
     /**
      * Manages the visibility of the dropdown based on loading state changes.
      *

package/components/combobox/dist/index.js

@@ -2936,6 +2936,48 @@ const computePosition = (reference, floating, options) => {
   });
 };
 
+/**
+ * Generates a v4 UUID with a three-tier fallback for insecure contexts.
+ *
+ * Tier 1 (secure contexts): crypto.randomUUID() — native, fully random.
+ * Tier 2 (insecure contexts): crypto.getRandomValues() — available on all
+ *   modern browsers regardless of secure-context status.
+ * Tier 3 (last resort, no crypto API): new Date().getTime() — lower entropy,
+ *   but sufficient for element IDs where collision risk is negligible.
+ *
+ * See: https://w3c.github.io/webcrypto/#dom-crypto-randomuuid (secure-context restriction)
+ */
+function generateUUID() {
+  let uuid;
+
+  if (
+    typeof crypto !== "undefined" &&
+    typeof crypto.randomUUID === "function"
+  ) {
+    uuid = crypto.randomUUID();
+  } else if (
+    typeof crypto !== "undefined" &&
+    typeof crypto.getRandomValues === "function"
+  ) {
+    const bytes = new Uint8Array(16);
+    crypto.getRandomValues(bytes);
+    bytes[6] = (bytes[6] & 0x0f) | 0x40;
+    bytes[8] = (bytes[8] & 0x3f) | 0x80;
+    const hex = Array.from(bytes).map((b) => b.toString(16).padStart(2, "0"));
+    uuid = `${hex.slice(0, 4).join("")}-${hex.slice(4, 6).join("")}-${hex.slice(6, 8).join("")}-${hex.slice(8, 10).join("")}-${hex.slice(10).join("")}`;
+  } else {
+    let d = new Date().getTime();
+    uuid = "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (c) => {
+      const r = (d % 16) | 0;
+      d = (d - r) / 16 || new Date().getTime();
+      return (c === "x" ? r : (r & 0x3) | 0x8).toString(16);
+    });
+  }
+
+  // CSS selectors require IDs starting with a letter; replace a leading digit with 'a'.
+  return /^[0-9]/.test(uuid) ? `a${uuid.slice(1)}` : uuid;
+}
+
 /* eslint-disable line-comment-position, no-inline-comments */
 
 
@@ -3954,7 +3996,7 @@ class AuroFloatingUI {
 
     this.id = element.getAttribute("id");
     if (!this.id) {
-      this.id = window.crypto.randomUUID();
+      this.id = generateUUID();
       element.setAttribute("id", this.id);
     }
 
@@ -4999,7 +5041,7 @@ let AuroHelpText$2 = class AuroHelpText extends LitElement {
   }
 };
 
-var formkitVersion$2 = '202609012101';
+var formkitVersion$2 = '202609022200';
 
 /**
  * AuroElement is the shared base class for layout-aware Auro form components.
@@ -18861,7 +18903,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
   }
 };
 
-var formkitVersion$1 = '202609012101';
+var formkitVersion$1 = '202609022200';
 
 // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -20053,7 +20095,7 @@ class AuroBibtemplate extends LitElement {
   }
 }
 
-var formkitVersion = '202609012101';
+var formkitVersion = '202609022200';
 
 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}`;
 
@@ -20494,6 +20536,11 @@ class AuroCombobox extends AuroElement {
     this.behavior = "suggestion";
     this.clearBtnFocused = false;
 
+    // One-shot: set when the input's clear button is activated so the
+    // SPA-preselect guard in handleInputValueChange doesn't swallow the
+    // genuine clear (AB#1634257).
+    this._clearBtnActivated = false;
+
     // Defaults that effect the overall layout of the combobox
     this.checkmark = false;
     this.dvInputOnly = false;
@@ -21451,6 +21498,13 @@ class AuroCombobox extends AuroElement {
     this.bibtemplate = this.dropdown.querySelector(this.bibtemplateTag._$litStatic$);
     this.inputInBib = this.bibtemplate.querySelector(this.inputTag._$litStatic$);
 
+    // Mirror the trigger's clear-button tracking onto the fullscreen bib input
+    // so clearing there also fully resets the combobox (AB#1634257). See
+    // trackClearBtnActivation for why this must run in the capture phase.
+    if (this.inputInBib && this.inputInBib !== this.input) {
+      this.trackClearBtnActivation(this.inputInBib);
+    }
+
     // Pass label text to the dropdown bib for accessible dialog naming
     const labelElement = this.querySelector('[slot="label"]');
     if (labelElement) {
@@ -21836,6 +21890,52 @@ class AuroCombobox extends AuroElement {
         this.clearBtnFocused = false;
       }
     });
+
+    this.trackClearBtnActivation(this.input);
+  }
+
+  /**
+   * Flags genuine clear-button activations on an auro-input so the SPA-preselect
+   * guard in handleInputValueChange doesn't swallow them.
+   *
+   * The auro-input clear button fires an `isProgrammatic` input event (via
+   * notifyValueChanged) that is indistinguishable in shape from the
+   * SPA-preselect echo that guard bails on (isProgrammatic + set value + empty
+   * input). Without this one-shot flag, clicking clear would leave
+   * this.value/optionSelected stale (AB#1634257).
+   *
+   * Delegated on the shadow root so it works regardless of when .clearBtn
+   * renders (it only exists after a value is set), and covers both real clicks
+   * and programmatic clearBtn.click() (which no focusin precedes). Registered in
+   * the CAPTURE phase so the flag is set BEFORE the button's own @click
+   * (handleClickClear) fires its synchronous input event — which is when
+   * handleInputValueChange reads the flag.
+   * @private
+   * @param {Element} inputEl - The auro-input whose clear button to track.
+   * @returns {void}
+   */
+  trackClearBtnActivation(inputEl) {
+    if (!inputEl || !inputEl.shadowRoot) {
+      return;
+    }
+    inputEl.shadowRoot.addEventListener('click', (event) => {
+      if (event.target.closest('.clearBtn')) {
+        this._clearBtnActivated = true;
+
+        // Bound the flag's lifetime to this synchronous clear -> input window.
+        // auro-input's handleClickClear fires its input event synchronously
+        // (before any macrotask runs), so handleInputValueChange consumes the
+        // flag first and this reset is a harmless no-op. It only does real work
+        // if that input event never arrives (e.g. auro-input throws mid-clear),
+        // guaranteeing the flag can't survive to be misread as a genuine clear
+        // by a later unrelated event such as an SPA-preselect echo (AB#1634257).
+        // Scheduled via _scheduleTimer so disconnectedCallback cancels it if the
+        // component tears down inside that window.
+        this._scheduleTimer(() => {
+          this._clearBtnActivated = false;
+        }, 0);
+      }
+    }, true);
   }
 
   /**
@@ -21877,6 +21977,17 @@ class AuroCombobox extends AuroElement {
    * @returns {void}
    */
   handleInputValueChange(event) {
+    // Consume the one-shot clear-button flag on EVERY entry, before any branch
+    // below can early-return. trackClearBtnActivation sets it in the capture
+    // phase right before auro-input's clear button fires its synchronous input
+    // event; reading and immediately clearing it here guarantees the flag never
+    // survives a handleInputValueChange call to leak into a later event (e.g.
+    // the bib branch bailing at _syncingDisplayValue, or an SPA-preselect echo)
+    // where it would defeat the guard below. Held in a local so that guard can
+    // still tell a genuine clear from the init-render echo (AB#1634257).
+    const clearBtnActivated = this._clearBtnActivated;
+    this._clearBtnActivated = false;
+
     // When the event comes from the fullscreen bib input, sync the value to
     // the trigger input. Setting trigger.value triggers Lit's updated()
     // (async, microtask) which fires notifyValueChanged() → another 'input'
@@ -21924,7 +22035,12 @@ class AuroCombobox extends AuroElement {
     // to the exact shape of that echo (isProgrammatic + non-empty combobox
     // value + empty input.value) so it doesn't affect the swap/typed paths
     // where value/input already track each other through the sync helpers.
-    if (event && event.isProgrammatic && this.value && !this.input.value) {
+    // The clear button's echo has the same shape (isProgrammatic + set value +
+    // empty input) but is a genuine user clear that MUST reset this.value and
+    // optionSelected below. clearBtnActivated (consumed at the top of this
+    // method) is true only for that genuine clear, so only the real
+    // SPA-preselect echo bails (AB#1634257).
+    if (event && event.isProgrammatic && this.value && !this.input.value && !clearBtnActivated) {
       return;
     }
 
@@ -22069,6 +22185,14 @@ class AuroCombobox extends AuroElement {
     // retry would otherwise keep rescheduling itself indefinitely.
     this._pendingTimers.forEach((id) => clearTimeout(id));
     this._pendingTimers.clear();
+
+    // Cancelling the timers above drops the macrotask that would have reset
+    // _clearBtnActivated, so reset it here too. Otherwise a disconnect inside
+    // the clear-click -> macrotask window strands the flag `true`; instance
+    // state survives reconnect, and the first matching input event (including
+    // an SPA-preselect echo) would then bypass the guard in
+    // handleInputValueChange and silently clear value/optionSelected (AB#1634257).
+    this._clearBtnActivated = false;
   }
 
   firstUpdated() {
@@ -22167,6 +22291,14 @@ class AuroCombobox extends AuroElement {
       }
       if (this.menu.value || this.menu.optionSelected) {
         this.menu.reset();
+      } else {
+        // The menu's selection properties are already cleared, but option
+        // elements can still carry a stale `selected` attribute (e.g. the menu
+        // options were rebuilt after the value was set, orphaning the DOM from
+        // the now-null optionSelected). reset() is skipped above in that case,
+        // so re-sync the option DOM directly to guarantee no option renders as
+        // selected once the field is cleared (AB#1634259).
+        this.menu.clearSelection();
       }
     } finally {
       this._clearing = false;