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

package/components/combobox/dist/registered.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 = '202609011830';
+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 = '202609011830';
+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 = '202609011830';
+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;