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

package/components/checkbox/demo/customize.min.js

@@ -1046,6 +1046,22 @@ class AuroDependencyVersioning {
   }
 }
 
+/**
+ * Class for generating unique hashes based on the current timestamp.
+ * This can be used to create unique identifiers for elements or data within an application,
+ * ensuring that each identifier is distinct and can be easily generated without the need
+ * for external libraries or complex algorithms.
+ */
+class UniqueId {
+  /**
+   * Creates a unique hash based on the current timestamp.
+   * @returns {Function} Timestamp as a base-36 string
+   */
+  create() {
+    return Date.now().toString(36);
+  }
+}
+
 var styleCss$1 = i$5`:host{display:block;padding-bottom:var(--ds-size-150, 0.75rem)}.displayFlex legend+slot{display:flex;white-space:nowrap}fieldset{all:unset}legend{margin-bottom:var(--ds-size-150, 0.75rem)}[auro-helptext]{margin-top:var(--ds-size-150, 0.75rem)}`;
 
 var colorCss$1 = i$5`:host{color:var(--ds-auro-checkbox-group-text-color)}:host([disabled]){--ds-auro-checkbox-group-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host([onDark]),:host([appearance=inverse]){--ds-auro-checkbox-group-text-color: var(--ds-basic-color-texticon-inverse, #ffffff)}:host([onDark][disabled]),:host([appearance=inverse][disabled]){--ds-auro-checkbox-group-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}`;
@@ -1284,7 +1300,7 @@ class AuroHelpText extends i$2 {
   }
 }
 
-var formkitVersion = '202609011830';
+var formkitVersion = '202609021913';
 
 // Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -1361,6 +1377,11 @@ class AuroCheckboxGroup extends i$2 {
      * @private
      */
     this.helpTextTag = versioning.generateTag('auro-formkit-checkbox-helptext', formkitVersion, AuroHelpText);
+
+    /**
+     * @private
+     */
+    this.uniqueId = new UniqueId().create();
   }
 
   static get styles() {
@@ -1646,8 +1667,10 @@ class AuroCheckboxGroup extends i$2 {
       this.checkboxes.forEach((el) => {
         if (this.validity && this.validity !== 'valid') {
           el.setAttribute('error', true);
+          el.setAttribute('aria-invalid', 'true');
         } else {
           el.removeAttribute('error');
+          el.removeAttribute('aria-invalid');
         }
       });
     }
@@ -1673,12 +1696,6 @@ class AuroCheckboxGroup extends i$2 {
     }
 
     if (changedProperties.has('error')) {
-      if (this.error) {
-        this.setAttribute('aria-invalid', true);
-      } else {
-        this.removeAttribute('aria-invalid');
-      }
-
       this.validate(true);
     }
   }
@@ -1697,7 +1714,11 @@ class AuroCheckboxGroup extends i$2 {
     };
 
     return u`
-      <fieldset class="${e(groupClasses)}">
+      <fieldset
+        class="${e(groupClasses)}"
+        aria-invalid="${o$1(this.validity && this.validity !== 'valid' ? 'true' : undefined)}"
+        aria-describedby="${this.uniqueId}"
+      >
         <legend>
           <slot name="legend"></slot>
           ${this.required ? undefined : u`<slot name="optionalLabel"> (optional)</slot>`}
@@ -1707,11 +1728,11 @@ class AuroCheckboxGroup extends i$2 {
 
       ${!this.validity || this.validity === undefined || this.validity === 'valid'
         ? u`
-          <${this.helpTextTag} part="helpText" appearance="${this.onDark ? 'inverse' : this.appearance}">
+          <${this.helpTextTag} id="${this.uniqueId}" part="helpText" appearance="${this.onDark ? 'inverse' : this.appearance}">
             <slot name="helpText"></slot>
           </${this.helpTextTag}>`
         : u`
-          <${this.helpTextTag} error appearance="${this.onDark ? 'inverse' : this.appearance}"" role="alert" aria-live="assertive" part="helpText">
+          <${this.helpTextTag} id="${this.uniqueId}" error appearance="${this.onDark ? 'inverse' : this.appearance}" role="alert" aria-live="assertive" part="helpText">
             ${this.errorMessage}
           </${this.helpTextTag}>`
       }

package/components/checkbox/demo/getting-started.min.js

@@ -1046,6 +1046,22 @@ class AuroDependencyVersioning {
   }
 }
 
+/**
+ * Class for generating unique hashes based on the current timestamp.
+ * This can be used to create unique identifiers for elements or data within an application,
+ * ensuring that each identifier is distinct and can be easily generated without the need
+ * for external libraries or complex algorithms.
+ */
+class UniqueId {
+  /**
+   * Creates a unique hash based on the current timestamp.
+   * @returns {Function} Timestamp as a base-36 string
+   */
+  create() {
+    return Date.now().toString(36);
+  }
+}
+
 var styleCss$1 = i$5`:host{display:block;padding-bottom:var(--ds-size-150, 0.75rem)}.displayFlex legend+slot{display:flex;white-space:nowrap}fieldset{all:unset}legend{margin-bottom:var(--ds-size-150, 0.75rem)}[auro-helptext]{margin-top:var(--ds-size-150, 0.75rem)}`;
 
 var colorCss$1 = i$5`:host{color:var(--ds-auro-checkbox-group-text-color)}:host([disabled]){--ds-auro-checkbox-group-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host([onDark]),:host([appearance=inverse]){--ds-auro-checkbox-group-text-color: var(--ds-basic-color-texticon-inverse, #ffffff)}:host([onDark][disabled]),:host([appearance=inverse][disabled]){--ds-auro-checkbox-group-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}`;
@@ -1284,7 +1300,7 @@ class AuroHelpText extends i$2 {
   }
 }
 
-var formkitVersion = '202609011830';
+var formkitVersion = '202609021913';
 
 // Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -1361,6 +1377,11 @@ class AuroCheckboxGroup extends i$2 {
      * @private
      */
     this.helpTextTag = versioning.generateTag('auro-formkit-checkbox-helptext', formkitVersion, AuroHelpText);
+
+    /**
+     * @private
+     */
+    this.uniqueId = new UniqueId().create();
   }
 
   static get styles() {
@@ -1646,8 +1667,10 @@ class AuroCheckboxGroup extends i$2 {
       this.checkboxes.forEach((el) => {
         if (this.validity && this.validity !== 'valid') {
           el.setAttribute('error', true);
+          el.setAttribute('aria-invalid', 'true');
         } else {
           el.removeAttribute('error');
+          el.removeAttribute('aria-invalid');
         }
       });
     }
@@ -1673,12 +1696,6 @@ class AuroCheckboxGroup extends i$2 {
     }
 
     if (changedProperties.has('error')) {
-      if (this.error) {
-        this.setAttribute('aria-invalid', true);
-      } else {
-        this.removeAttribute('aria-invalid');
-      }
-
       this.validate(true);
     }
   }
@@ -1697,7 +1714,11 @@ class AuroCheckboxGroup extends i$2 {
     };
 
     return u`
-      <fieldset class="${e(groupClasses)}">
+      <fieldset
+        class="${e(groupClasses)}"
+        aria-invalid="${o$1(this.validity && this.validity !== 'valid' ? 'true' : undefined)}"
+        aria-describedby="${this.uniqueId}"
+      >
         <legend>
           <slot name="legend"></slot>
           ${this.required ? undefined : u`<slot name="optionalLabel"> (optional)</slot>`}
@@ -1707,11 +1728,11 @@ class AuroCheckboxGroup extends i$2 {
 
       ${!this.validity || this.validity === undefined || this.validity === 'valid'
         ? u`
-          <${this.helpTextTag} part="helpText" appearance="${this.onDark ? 'inverse' : this.appearance}">
+          <${this.helpTextTag} id="${this.uniqueId}" part="helpText" appearance="${this.onDark ? 'inverse' : this.appearance}">
             <slot name="helpText"></slot>
           </${this.helpTextTag}>`
         : u`
-          <${this.helpTextTag} error appearance="${this.onDark ? 'inverse' : this.appearance}"" role="alert" aria-live="assertive" part="helpText">
+          <${this.helpTextTag} id="${this.uniqueId}" error appearance="${this.onDark ? 'inverse' : this.appearance}" role="alert" aria-live="assertive" part="helpText">
             ${this.errorMessage}
           </${this.helpTextTag}>`
       }

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

@@ -1046,6 +1046,22 @@ class AuroDependencyVersioning {
   }
 }
 
+/**
+ * Class for generating unique hashes based on the current timestamp.
+ * This can be used to create unique identifiers for elements or data within an application,
+ * ensuring that each identifier is distinct and can be easily generated without the need
+ * for external libraries or complex algorithms.
+ */
+class UniqueId {
+  /**
+   * Creates a unique hash based on the current timestamp.
+   * @returns {Function} Timestamp as a base-36 string
+   */
+  create() {
+    return Date.now().toString(36);
+  }
+}
+
 var styleCss$1 = i$5`:host{display:block;padding-bottom:var(--ds-size-150, 0.75rem)}.displayFlex legend+slot{display:flex;white-space:nowrap}fieldset{all:unset}legend{margin-bottom:var(--ds-size-150, 0.75rem)}[auro-helptext]{margin-top:var(--ds-size-150, 0.75rem)}`;
 
 var colorCss$1 = i$5`:host{color:var(--ds-auro-checkbox-group-text-color)}:host([disabled]){--ds-auro-checkbox-group-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host([onDark]),:host([appearance=inverse]){--ds-auro-checkbox-group-text-color: var(--ds-basic-color-texticon-inverse, #ffffff)}:host([onDark][disabled]),:host([appearance=inverse][disabled]){--ds-auro-checkbox-group-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}`;
@@ -1284,7 +1300,7 @@ class AuroHelpText extends i$2 {
   }
 }
 
-var formkitVersion = '202609011830';
+var formkitVersion = '202609021913';
 
 // Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -1361,6 +1377,11 @@ class AuroCheckboxGroup extends i$2 {
      * @private
      */
     this.helpTextTag = versioning.generateTag('auro-formkit-checkbox-helptext', formkitVersion, AuroHelpText);
+
+    /**
+     * @private
+     */
+    this.uniqueId = new UniqueId().create();
   }
 
   static get styles() {
@@ -1646,8 +1667,10 @@ class AuroCheckboxGroup extends i$2 {
       this.checkboxes.forEach((el) => {
         if (this.validity && this.validity !== 'valid') {
           el.setAttribute('error', true);
+          el.setAttribute('aria-invalid', 'true');
         } else {
           el.removeAttribute('error');
+          el.removeAttribute('aria-invalid');
         }
       });
     }
@@ -1673,12 +1696,6 @@ class AuroCheckboxGroup extends i$2 {
     }
 
     if (changedProperties.has('error')) {
-      if (this.error) {
-        this.setAttribute('aria-invalid', true);
-      } else {
-        this.removeAttribute('aria-invalid');
-      }
-
       this.validate(true);
     }
   }
@@ -1697,7 +1714,11 @@ class AuroCheckboxGroup extends i$2 {
     };
 
     return u`
-      <fieldset class="${e(groupClasses)}">
+      <fieldset
+        class="${e(groupClasses)}"
+        aria-invalid="${o$1(this.validity && this.validity !== 'valid' ? 'true' : undefined)}"
+        aria-describedby="${this.uniqueId}"
+      >
         <legend>
           <slot name="legend"></slot>
           ${this.required ? undefined : u`<slot name="optionalLabel"> (optional)</slot>`}
@@ -1707,11 +1728,11 @@ class AuroCheckboxGroup extends i$2 {
 
       ${!this.validity || this.validity === undefined || this.validity === 'valid'
         ? u`
-          <${this.helpTextTag} part="helpText" appearance="${this.onDark ? 'inverse' : this.appearance}">
+          <${this.helpTextTag} id="${this.uniqueId}" part="helpText" appearance="${this.onDark ? 'inverse' : this.appearance}">
             <slot name="helpText"></slot>
           </${this.helpTextTag}>`
         : u`
-          <${this.helpTextTag} error appearance="${this.onDark ? 'inverse' : this.appearance}"" role="alert" aria-live="assertive" part="helpText">
+          <${this.helpTextTag} id="${this.uniqueId}" error appearance="${this.onDark ? 'inverse' : this.appearance}" role="alert" aria-live="assertive" part="helpText">
             ${this.errorMessage}
           </${this.helpTextTag}>`
       }

package/components/checkbox/dist/auro-checkbox-group.d.ts

@@ -141,6 +141,10 @@ export class AuroCheckboxGroup extends LitElement {
      * @private
      */
     private helpTextTag;
+    /**
+     * @private
+     */
+    private uniqueId;
     /**
      * Helper method to handle checkbox value changing.
      * @private

package/components/checkbox/dist/index.js

@@ -999,6 +999,22 @@ class AuroDependencyVersioning {
   }
 }
 
+/**
+ * Class for generating unique hashes based on the current timestamp.
+ * This can be used to create unique identifiers for elements or data within an application,
+ * ensuring that each identifier is distinct and can be easily generated without the need
+ * for external libraries or complex algorithms.
+ */
+class UniqueId {
+  /**
+   * Creates a unique hash based on the current timestamp.
+   * @returns {Function} Timestamp as a base-36 string
+   */
+  create() {
+    return Date.now().toString(36);
+  }
+}
+
 var styleCss$1 = css`:host{display:block;padding-bottom:var(--ds-size-150, 0.75rem)}.displayFlex legend+slot{display:flex;white-space:nowrap}fieldset{all:unset}legend{margin-bottom:var(--ds-size-150, 0.75rem)}[auro-helptext]{margin-top:var(--ds-size-150, 0.75rem)}`;
 
 var colorCss$1 = css`:host{color:var(--ds-auro-checkbox-group-text-color)}:host([disabled]){--ds-auro-checkbox-group-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host([onDark]),:host([appearance=inverse]){--ds-auro-checkbox-group-text-color: var(--ds-basic-color-texticon-inverse, #ffffff)}:host([onDark][disabled]),:host([appearance=inverse][disabled]){--ds-auro-checkbox-group-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}`;
@@ -1237,7 +1253,7 @@ class AuroHelpText extends LitElement {
   }
 }
 
-var formkitVersion = '202609011830';
+var formkitVersion = '202609021913';
 
 // Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -1314,6 +1330,11 @@ class AuroCheckboxGroup extends LitElement {
      * @private
      */
     this.helpTextTag = versioning.generateTag('auro-formkit-checkbox-helptext', formkitVersion, AuroHelpText);
+
+    /**
+     * @private
+     */
+    this.uniqueId = new UniqueId().create();
   }
 
   static get styles() {
@@ -1599,8 +1620,10 @@ class AuroCheckboxGroup extends LitElement {
       this.checkboxes.forEach((el) => {
         if (this.validity && this.validity !== 'valid') {
           el.setAttribute('error', true);
+          el.setAttribute('aria-invalid', 'true');
         } else {
           el.removeAttribute('error');
+          el.removeAttribute('aria-invalid');
         }
       });
     }
@@ -1626,12 +1649,6 @@ class AuroCheckboxGroup extends LitElement {
     }
 
     if (changedProperties.has('error')) {
-      if (this.error) {
-        this.setAttribute('aria-invalid', true);
-      } else {
-        this.removeAttribute('aria-invalid');
-      }
-
       this.validate(true);
     }
   }
@@ -1650,7 +1667,11 @@ class AuroCheckboxGroup extends LitElement {
     };
 
     return html$1`
-      <fieldset class="${classMap(groupClasses)}">
+      <fieldset
+        class="${classMap(groupClasses)}"
+        aria-invalid="${ifDefined(this.validity && this.validity !== 'valid' ? 'true' : undefined)}"
+        aria-describedby="${this.uniqueId}"
+      >
         <legend>
           <slot name="legend"></slot>
           ${this.required ? undefined : html$1`<slot name="optionalLabel"> (optional)</slot>`}
@@ -1660,11 +1681,11 @@ class AuroCheckboxGroup extends LitElement {
 
       ${!this.validity || this.validity === undefined || this.validity === 'valid'
         ? html$1`
-          <${this.helpTextTag} part="helpText" appearance="${this.onDark ? 'inverse' : this.appearance}">
+          <${this.helpTextTag} id="${this.uniqueId}" part="helpText" appearance="${this.onDark ? 'inverse' : this.appearance}">
             <slot name="helpText"></slot>
           </${this.helpTextTag}>`
         : html$1`
-          <${this.helpTextTag} error appearance="${this.onDark ? 'inverse' : this.appearance}"" role="alert" aria-live="assertive" part="helpText">
+          <${this.helpTextTag} id="${this.uniqueId}" error appearance="${this.onDark ? 'inverse' : this.appearance}" role="alert" aria-live="assertive" part="helpText">
             ${this.errorMessage}
           </${this.helpTextTag}>`
       }

package/components/checkbox/dist/registered.js

@@ -999,6 +999,22 @@ class AuroDependencyVersioning {
   }
 }
 
+/**
+ * Class for generating unique hashes based on the current timestamp.
+ * This can be used to create unique identifiers for elements or data within an application,
+ * ensuring that each identifier is distinct and can be easily generated without the need
+ * for external libraries or complex algorithms.
+ */
+class UniqueId {
+  /**
+   * Creates a unique hash based on the current timestamp.
+   * @returns {Function} Timestamp as a base-36 string
+   */
+  create() {
+    return Date.now().toString(36);
+  }
+}
+
 var styleCss$1 = css`:host{display:block;padding-bottom:var(--ds-size-150, 0.75rem)}.displayFlex legend+slot{display:flex;white-space:nowrap}fieldset{all:unset}legend{margin-bottom:var(--ds-size-150, 0.75rem)}[auro-helptext]{margin-top:var(--ds-size-150, 0.75rem)}`;
 
 var colorCss$1 = css`:host{color:var(--ds-auro-checkbox-group-text-color)}:host([disabled]){--ds-auro-checkbox-group-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host([onDark]),:host([appearance=inverse]){--ds-auro-checkbox-group-text-color: var(--ds-basic-color-texticon-inverse, #ffffff)}:host([onDark][disabled]),:host([appearance=inverse][disabled]){--ds-auro-checkbox-group-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}`;
@@ -1237,7 +1253,7 @@ class AuroHelpText extends LitElement {
   }
 }
 
-var formkitVersion = '202609011830';
+var formkitVersion = '202609021913';
 
 // Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -1314,6 +1330,11 @@ class AuroCheckboxGroup extends LitElement {
      * @private
      */
     this.helpTextTag = versioning.generateTag('auro-formkit-checkbox-helptext', formkitVersion, AuroHelpText);
+
+    /**
+     * @private
+     */
+    this.uniqueId = new UniqueId().create();
   }
 
   static get styles() {
@@ -1599,8 +1620,10 @@ class AuroCheckboxGroup extends LitElement {
       this.checkboxes.forEach((el) => {
         if (this.validity && this.validity !== 'valid') {
           el.setAttribute('error', true);
+          el.setAttribute('aria-invalid', 'true');
         } else {
           el.removeAttribute('error');
+          el.removeAttribute('aria-invalid');
         }
       });
     }
@@ -1626,12 +1649,6 @@ class AuroCheckboxGroup extends LitElement {
     }
 
     if (changedProperties.has('error')) {
-      if (this.error) {
-        this.setAttribute('aria-invalid', true);
-      } else {
-        this.removeAttribute('aria-invalid');
-      }
-
       this.validate(true);
     }
   }
@@ -1650,7 +1667,11 @@ class AuroCheckboxGroup extends LitElement {
     };
 
     return html$1`
-      <fieldset class="${classMap(groupClasses)}">
+      <fieldset
+        class="${classMap(groupClasses)}"
+        aria-invalid="${ifDefined(this.validity && this.validity !== 'valid' ? 'true' : undefined)}"
+        aria-describedby="${this.uniqueId}"
+      >
         <legend>
           <slot name="legend"></slot>
           ${this.required ? undefined : html$1`<slot name="optionalLabel"> (optional)</slot>`}
@@ -1660,11 +1681,11 @@ class AuroCheckboxGroup extends LitElement {
 
       ${!this.validity || this.validity === undefined || this.validity === 'valid'
         ? html$1`
-          <${this.helpTextTag} part="helpText" appearance="${this.onDark ? 'inverse' : this.appearance}">
+          <${this.helpTextTag} id="${this.uniqueId}" part="helpText" appearance="${this.onDark ? 'inverse' : this.appearance}">
             <slot name="helpText"></slot>
           </${this.helpTextTag}>`
         : html$1`
-          <${this.helpTextTag} error appearance="${this.onDark ? 'inverse' : this.appearance}"" role="alert" aria-live="assertive" part="helpText">
+          <${this.helpTextTag} id="${this.uniqueId}" error appearance="${this.onDark ? 'inverse' : this.appearance}" role="alert" aria-live="assertive" part="helpText">
             ${this.errorMessage}
           </${this.helpTextTag}>`
       }

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

@@ -5066,7 +5066,7 @@ let AuroHelpText$2 = class AuroHelpText extends i$3 {
   }
 };
 
-var formkitVersion$2 = '202609011830';
+var formkitVersion$2 = '202609021913';
 
 /**
  * AuroElement is the shared base class for layout-aware Auro form components.
@@ -18935,7 +18935,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$3 {
   }
 };
 
-var formkitVersion$1 = '202609011830';
+var formkitVersion$1 = '202609021913';
 
 // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -20127,7 +20127,7 @@ class AuroBibtemplate extends i$3 {
   }
 }
 
-var formkitVersion = '202609011830';
+var formkitVersion = '202609021913';
 
 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}`;
 
@@ -20568,6 +20568,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;
@@ -21525,6 +21530,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) {
@@ -21910,6 +21922,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);
   }
 
   /**
@@ -21951,6 +22009,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'
@@ -21998,7 +22067,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;
     }
 
@@ -22143,6 +22217,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() {
@@ -22241,6 +22323,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;
@@ -23692,6 +23782,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
+      ]
+    ]));
   }
 
   /**