@aurodesignsystem-dev/auro-formkit 0.0.0-pr1600.3 → 0.0.0-pr1603.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (48) hide show
  1. package/components/checkbox/demo/customize.min.js +1 -1
  2. package/components/checkbox/demo/getting-started.min.js +1 -1
  3. package/components/checkbox/demo/index.min.js +1 -1
  4. package/components/checkbox/dist/index.js +1 -1
  5. package/components/checkbox/dist/registered.js +1 -1
  6. package/components/combobox/demo/customize.min.js +79 -4
  7. package/components/combobox/demo/getting-started.min.js +79 -4
  8. package/components/combobox/demo/index.min.js +79 -4
  9. package/components/combobox/dist/auro-combobox.d.ts +22 -0
  10. package/components/combobox/dist/index.js +63 -4
  11. package/components/combobox/dist/registered.js +63 -4
  12. package/components/counter/demo/customize.min.js +2 -2
  13. package/components/counter/demo/index.min.js +2 -2
  14. package/components/counter/dist/index.js +2 -2
  15. package/components/counter/dist/registered.js +2 -2
  16. package/components/datepicker/demo/customize.min.js +3 -3
  17. package/components/datepicker/demo/index.min.js +3 -3
  18. package/components/datepicker/dist/index.js +3 -3
  19. package/components/datepicker/dist/registered.js +3 -3
  20. package/components/dropdown/demo/customize.min.js +1 -1
  21. package/components/dropdown/demo/getting-started.min.js +2 -2
  22. package/components/dropdown/demo/index.min.js +1 -1
  23. package/components/dropdown/dist/index.js +1 -1
  24. package/components/dropdown/dist/registered.js +1 -1
  25. package/components/form/demo/customize.min.js +89 -14
  26. package/components/form/demo/getting-started.min.js +89 -14
  27. package/components/form/demo/index.min.js +89 -14
  28. package/components/form/demo/registerDemoDeps.min.js +89 -14
  29. package/components/input/demo/customize.min.js +1 -1
  30. package/components/input/demo/getting-started.min.js +1 -1
  31. package/components/input/demo/index.min.js +1 -1
  32. package/components/input/dist/index.js +1 -1
  33. package/components/input/dist/registered.js +1 -1
  34. package/components/menu/demo/index.min.js +16 -0
  35. package/components/menu/dist/index.js +16 -0
  36. package/components/menu/dist/registered.js +16 -0
  37. package/components/radio/demo/customize.min.js +1 -1
  38. package/components/radio/demo/getting-started.min.js +1 -1
  39. package/components/radio/demo/index.min.js +1 -1
  40. package/components/radio/dist/index.js +1 -1
  41. package/components/radio/dist/registered.js +1 -1
  42. package/components/select/demo/customize.min.js +18 -2
  43. package/components/select/demo/getting-started.min.js +18 -2
  44. package/components/select/demo/index.min.js +18 -2
  45. package/components/select/dist/index.js +2 -2
  46. package/components/select/dist/registered.js +2 -2
  47. package/custom-elements.json +1712 -1692
  48. package/package.json +1 -1
@@ -1284,7 +1284,7 @@ class AuroHelpText extends i$2 {
1284
1284
  }
1285
1285
  }
1286
1286
 
1287
- var formkitVersion = '202609011635';
1287
+ var formkitVersion = '202609011810';
1288
1288
 
1289
1289
  // Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
1290
1290
  // See LICENSE in the project root for license information.
@@ -1284,7 +1284,7 @@ class AuroHelpText extends i$2 {
1284
1284
  }
1285
1285
  }
1286
1286
 
1287
- var formkitVersion = '202609011635';
1287
+ var formkitVersion = '202609011810';
1288
1288
 
1289
1289
  // Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
1290
1290
  // See LICENSE in the project root for license information.
@@ -1284,7 +1284,7 @@ class AuroHelpText extends i$2 {
1284
1284
  }
1285
1285
  }
1286
1286
 
1287
- var formkitVersion = '202609011635';
1287
+ var formkitVersion = '202609011810';
1288
1288
 
1289
1289
  // Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
1290
1290
  // See LICENSE in the project root for license information.
@@ -1237,7 +1237,7 @@ class AuroHelpText extends LitElement {
1237
1237
  }
1238
1238
  }
1239
1239
 
1240
- var formkitVersion = '202609011635';
1240
+ var formkitVersion = '202609011810';
1241
1241
 
1242
1242
  // Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
1243
1243
  // See LICENSE in the project root for license information.
@@ -1237,7 +1237,7 @@ class AuroHelpText extends LitElement {
1237
1237
  }
1238
1238
  }
1239
1239
 
1240
- var formkitVersion = '202609011635';
1240
+ var formkitVersion = '202609011810';
1241
1241
 
1242
1242
  // Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
1243
1243
  // See LICENSE in the project root for license information.
@@ -5066,7 +5066,7 @@ let AuroHelpText$2 = class AuroHelpText extends i$3 {
5066
5066
  }
5067
5067
  };
5068
5068
 
5069
- var formkitVersion$2 = '202609011635';
5069
+ var formkitVersion$2 = '202609011810';
5070
5070
 
5071
5071
  /**
5072
5072
  * AuroElement is the shared base class for layout-aware Auro form components.
@@ -18935,7 +18935,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$3 {
18935
18935
  }
18936
18936
  };
18937
18937
 
18938
- var formkitVersion$1 = '202609011635';
18938
+ var formkitVersion$1 = '202609011810';
18939
18939
 
18940
18940
  // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
18941
18941
  // See LICENSE in the project root for license information.
@@ -20127,7 +20127,7 @@ class AuroBibtemplate extends i$3 {
20127
20127
  }
20128
20128
  }
20129
20129
 
20130
- var formkitVersion = '202609011635';
20130
+ var formkitVersion = '202609011810';
20131
20131
 
20132
20132
  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}`;
20133
20133
 
@@ -20568,6 +20568,11 @@ class AuroCombobox extends AuroElement {
20568
20568
  this.behavior = "suggestion";
20569
20569
  this.clearBtnFocused = false;
20570
20570
 
20571
+ // One-shot: set when the input's clear button is activated so the
20572
+ // SPA-preselect guard in handleInputValueChange doesn't swallow the
20573
+ // genuine clear (AB#1634257).
20574
+ this._clearBtnActivated = false;
20575
+
20571
20576
  // Defaults that effect the overall layout of the combobox
20572
20577
  this.checkmark = false;
20573
20578
  this.dvInputOnly = false;
@@ -21525,6 +21530,13 @@ class AuroCombobox extends AuroElement {
21525
21530
  this.bibtemplate = this.dropdown.querySelector(this.bibtemplateTag._$litStatic$);
21526
21531
  this.inputInBib = this.bibtemplate.querySelector(this.inputTag._$litStatic$);
21527
21532
 
21533
+ // Mirror the trigger's clear-button tracking onto the fullscreen bib input
21534
+ // so clearing there also fully resets the combobox (AB#1634257). See
21535
+ // trackClearBtnActivation for why this must run in the capture phase.
21536
+ if (this.inputInBib && this.inputInBib !== this.input) {
21537
+ this.trackClearBtnActivation(this.inputInBib);
21538
+ }
21539
+
21528
21540
  // Pass label text to the dropdown bib for accessible dialog naming
21529
21541
  const labelElement = this.querySelector('[slot="label"]');
21530
21542
  if (labelElement) {
@@ -21910,6 +21922,39 @@ class AuroCombobox extends AuroElement {
21910
21922
  this.clearBtnFocused = false;
21911
21923
  }
21912
21924
  });
21925
+
21926
+ this.trackClearBtnActivation(this.input);
21927
+ }
21928
+
21929
+ /**
21930
+ * Flags genuine clear-button activations on an auro-input so the SPA-preselect
21931
+ * guard in handleInputValueChange doesn't swallow them.
21932
+ *
21933
+ * The auro-input clear button fires an `isProgrammatic` input event (via
21934
+ * notifyValueChanged) that is indistinguishable in shape from the
21935
+ * SPA-preselect echo that guard bails on (isProgrammatic + set value + empty
21936
+ * input). Without this one-shot flag, clicking clear would leave
21937
+ * this.value/optionSelected stale (AB#1634257).
21938
+ *
21939
+ * Delegated on the shadow root so it works regardless of when .clearBtn
21940
+ * renders (it only exists after a value is set), and covers both real clicks
21941
+ * and programmatic clearBtn.click() (which no focusin precedes). Registered in
21942
+ * the CAPTURE phase so the flag is set BEFORE the button's own @click
21943
+ * (handleClickClear) fires its synchronous input event — which is when
21944
+ * handleInputValueChange reads the flag.
21945
+ * @private
21946
+ * @param {Element} inputEl - The auro-input whose clear button to track.
21947
+ * @returns {void}
21948
+ */
21949
+ trackClearBtnActivation(inputEl) {
21950
+ if (!inputEl || !inputEl.shadowRoot) {
21951
+ return;
21952
+ }
21953
+ inputEl.shadowRoot.addEventListener('click', (event) => {
21954
+ if (event.target.closest('.clearBtn')) {
21955
+ this._clearBtnActivated = true;
21956
+ }
21957
+ }, true);
21913
21958
  }
21914
21959
 
21915
21960
  /**
@@ -21998,7 +22043,13 @@ class AuroCombobox extends AuroElement {
21998
22043
  // to the exact shape of that echo (isProgrammatic + non-empty combobox
21999
22044
  // value + empty input.value) so it doesn't affect the swap/typed paths
22000
22045
  // where value/input already track each other through the sync helpers.
22001
- if (event && event.isProgrammatic && this.value && !this.input.value) {
22046
+ // The clear button's echo has the same shape (isProgrammatic + set value +
22047
+ // empty input) but is a genuine user clear that MUST reset this.value and
22048
+ // optionSelected below. Consume the one-shot flag so only the real
22049
+ // SPA-preselect echo bails (AB#1634257).
22050
+ const clearBtnActivated = this._clearBtnActivated;
22051
+ this._clearBtnActivated = false;
22052
+ if (event && event.isProgrammatic && this.value && !this.input.value && !clearBtnActivated) {
22002
22053
  return;
22003
22054
  }
22004
22055
 
@@ -22241,6 +22292,14 @@ class AuroCombobox extends AuroElement {
22241
22292
  }
22242
22293
  if (this.menu.value || this.menu.optionSelected) {
22243
22294
  this.menu.reset();
22295
+ } else {
22296
+ // The menu's selection properties are already cleared, but option
22297
+ // elements can still carry a stale `selected` attribute (e.g. the menu
22298
+ // options were rebuilt after the value was set, orphaning the DOM from
22299
+ // the now-null optionSelected). reset() is skipped above in that case,
22300
+ // so re-sync the option DOM directly to guarantee no option renders as
22301
+ // selected once the field is cleared (AB#1634259).
22302
+ this.menu.clearSelection();
22244
22303
  }
22245
22304
  } finally {
22246
22305
  this._clearing = false;
@@ -23692,6 +23751,22 @@ class AuroMenu extends AuroElement {
23692
23751
  this.value = undefined;
23693
23752
  this._selectedKey = undefined;
23694
23753
  this._index = -1;
23754
+
23755
+ // Eagerly sync the option DOM to the now-empty selection. Nulling the
23756
+ // reactive properties above normally schedules updated() → updateItemsState,
23757
+ // but that only runs when a property actually changes. If an option still
23758
+ // carries a stale `selected`/`aria-selected` attribute while these
23759
+ // properties are already undefined (e.g. options were rebuilt after a value
23760
+ // was set), no re-render fires and the option keeps rendering as selected.
23761
+ // Strip that state now so no option looks selected after a clear (AB#1634259).
23762
+ // Intentionally leaves `active`/`optionActive` untouched so a highlighted
23763
+ // option remains keyboard-re-selectable after emptying the value (AB#1606433).
23764
+ this.updateItemsState(new Map([
23765
+ [
23766
+ 'optionSelected',
23767
+ true
23768
+ ]
23769
+ ]));
23695
23770
  }
23696
23771
 
23697
23772
  /**
@@ -5066,7 +5066,7 @@ let AuroHelpText$2 = class AuroHelpText extends i$3 {
5066
5066
  }
5067
5067
  };
5068
5068
 
5069
- var formkitVersion$2 = '202609011635';
5069
+ var formkitVersion$2 = '202609011810';
5070
5070
 
5071
5071
  /**
5072
5072
  * AuroElement is the shared base class for layout-aware Auro form components.
@@ -18935,7 +18935,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$3 {
18935
18935
  }
18936
18936
  };
18937
18937
 
18938
- var formkitVersion$1 = '202609011635';
18938
+ var formkitVersion$1 = '202609011810';
18939
18939
 
18940
18940
  // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
18941
18941
  // See LICENSE in the project root for license information.
@@ -20127,7 +20127,7 @@ class AuroBibtemplate extends i$3 {
20127
20127
  }
20128
20128
  }
20129
20129
 
20130
- var formkitVersion = '202609011635';
20130
+ var formkitVersion = '202609011810';
20131
20131
 
20132
20132
  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}`;
20133
20133
 
@@ -20568,6 +20568,11 @@ class AuroCombobox extends AuroElement {
20568
20568
  this.behavior = "suggestion";
20569
20569
  this.clearBtnFocused = false;
20570
20570
 
20571
+ // One-shot: set when the input's clear button is activated so the
20572
+ // SPA-preselect guard in handleInputValueChange doesn't swallow the
20573
+ // genuine clear (AB#1634257).
20574
+ this._clearBtnActivated = false;
20575
+
20571
20576
  // Defaults that effect the overall layout of the combobox
20572
20577
  this.checkmark = false;
20573
20578
  this.dvInputOnly = false;
@@ -21525,6 +21530,13 @@ class AuroCombobox extends AuroElement {
21525
21530
  this.bibtemplate = this.dropdown.querySelector(this.bibtemplateTag._$litStatic$);
21526
21531
  this.inputInBib = this.bibtemplate.querySelector(this.inputTag._$litStatic$);
21527
21532
 
21533
+ // Mirror the trigger's clear-button tracking onto the fullscreen bib input
21534
+ // so clearing there also fully resets the combobox (AB#1634257). See
21535
+ // trackClearBtnActivation for why this must run in the capture phase.
21536
+ if (this.inputInBib && this.inputInBib !== this.input) {
21537
+ this.trackClearBtnActivation(this.inputInBib);
21538
+ }
21539
+
21528
21540
  // Pass label text to the dropdown bib for accessible dialog naming
21529
21541
  const labelElement = this.querySelector('[slot="label"]');
21530
21542
  if (labelElement) {
@@ -21910,6 +21922,39 @@ class AuroCombobox extends AuroElement {
21910
21922
  this.clearBtnFocused = false;
21911
21923
  }
21912
21924
  });
21925
+
21926
+ this.trackClearBtnActivation(this.input);
21927
+ }
21928
+
21929
+ /**
21930
+ * Flags genuine clear-button activations on an auro-input so the SPA-preselect
21931
+ * guard in handleInputValueChange doesn't swallow them.
21932
+ *
21933
+ * The auro-input clear button fires an `isProgrammatic` input event (via
21934
+ * notifyValueChanged) that is indistinguishable in shape from the
21935
+ * SPA-preselect echo that guard bails on (isProgrammatic + set value + empty
21936
+ * input). Without this one-shot flag, clicking clear would leave
21937
+ * this.value/optionSelected stale (AB#1634257).
21938
+ *
21939
+ * Delegated on the shadow root so it works regardless of when .clearBtn
21940
+ * renders (it only exists after a value is set), and covers both real clicks
21941
+ * and programmatic clearBtn.click() (which no focusin precedes). Registered in
21942
+ * the CAPTURE phase so the flag is set BEFORE the button's own @click
21943
+ * (handleClickClear) fires its synchronous input event — which is when
21944
+ * handleInputValueChange reads the flag.
21945
+ * @private
21946
+ * @param {Element} inputEl - The auro-input whose clear button to track.
21947
+ * @returns {void}
21948
+ */
21949
+ trackClearBtnActivation(inputEl) {
21950
+ if (!inputEl || !inputEl.shadowRoot) {
21951
+ return;
21952
+ }
21953
+ inputEl.shadowRoot.addEventListener('click', (event) => {
21954
+ if (event.target.closest('.clearBtn')) {
21955
+ this._clearBtnActivated = true;
21956
+ }
21957
+ }, true);
21913
21958
  }
21914
21959
 
21915
21960
  /**
@@ -21998,7 +22043,13 @@ class AuroCombobox extends AuroElement {
21998
22043
  // to the exact shape of that echo (isProgrammatic + non-empty combobox
21999
22044
  // value + empty input.value) so it doesn't affect the swap/typed paths
22000
22045
  // where value/input already track each other through the sync helpers.
22001
- if (event && event.isProgrammatic && this.value && !this.input.value) {
22046
+ // The clear button's echo has the same shape (isProgrammatic + set value +
22047
+ // empty input) but is a genuine user clear that MUST reset this.value and
22048
+ // optionSelected below. Consume the one-shot flag so only the real
22049
+ // SPA-preselect echo bails (AB#1634257).
22050
+ const clearBtnActivated = this._clearBtnActivated;
22051
+ this._clearBtnActivated = false;
22052
+ if (event && event.isProgrammatic && this.value && !this.input.value && !clearBtnActivated) {
22002
22053
  return;
22003
22054
  }
22004
22055
 
@@ -22241,6 +22292,14 @@ class AuroCombobox extends AuroElement {
22241
22292
  }
22242
22293
  if (this.menu.value || this.menu.optionSelected) {
22243
22294
  this.menu.reset();
22295
+ } else {
22296
+ // The menu's selection properties are already cleared, but option
22297
+ // elements can still carry a stale `selected` attribute (e.g. the menu
22298
+ // options were rebuilt after the value was set, orphaning the DOM from
22299
+ // the now-null optionSelected). reset() is skipped above in that case,
22300
+ // so re-sync the option DOM directly to guarantee no option renders as
22301
+ // selected once the field is cleared (AB#1634259).
22302
+ this.menu.clearSelection();
22244
22303
  }
22245
22304
  } finally {
22246
22305
  this._clearing = false;
@@ -23692,6 +23751,22 @@ class AuroMenu extends AuroElement {
23692
23751
  this.value = undefined;
23693
23752
  this._selectedKey = undefined;
23694
23753
  this._index = -1;
23754
+
23755
+ // Eagerly sync the option DOM to the now-empty selection. Nulling the
23756
+ // reactive properties above normally schedules updated() → updateItemsState,
23757
+ // but that only runs when a property actually changes. If an option still
23758
+ // carries a stale `selected`/`aria-selected` attribute while these
23759
+ // properties are already undefined (e.g. options were rebuilt after a value
23760
+ // was set), no re-render fires and the option keeps rendering as selected.
23761
+ // Strip that state now so no option looks selected after a clear (AB#1634259).
23762
+ // Intentionally leaves `active`/`optionActive` untouched so a highlighted
23763
+ // option remains keyboard-re-selectable after emptying the value (AB#1606433).
23764
+ this.updateItemsState(new Map([
23765
+ [
23766
+ 'optionSelected',
23767
+ true
23768
+ ]
23769
+ ]));
23695
23770
  }
23696
23771
 
23697
23772
  /**
@@ -5081,7 +5081,7 @@ let AuroHelpText$2 = class AuroHelpText extends i$3 {
5081
5081
  }
5082
5082
  };
5083
5083
 
5084
- var formkitVersion$2 = '202609011635';
5084
+ var formkitVersion$2 = '202609011810';
5085
5085
 
5086
5086
  /**
5087
5087
  * AuroElement is the shared base class for layout-aware Auro form components.
@@ -18950,7 +18950,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$3 {
18950
18950
  }
18951
18951
  };
18952
18952
 
18953
- var formkitVersion$1 = '202609011635';
18953
+ var formkitVersion$1 = '202609011810';
18954
18954
 
18955
18955
  // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
18956
18956
  // See LICENSE in the project root for license information.
@@ -20142,7 +20142,7 @@ class AuroBibtemplate extends i$3 {
20142
20142
  }
20143
20143
  }
20144
20144
 
20145
- var formkitVersion = '202609011635';
20145
+ var formkitVersion = '202609011810';
20146
20146
 
20147
20147
  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}`;
20148
20148
 
@@ -20583,6 +20583,11 @@ class AuroCombobox extends AuroElement {
20583
20583
  this.behavior = "suggestion";
20584
20584
  this.clearBtnFocused = false;
20585
20585
 
20586
+ // One-shot: set when the input's clear button is activated so the
20587
+ // SPA-preselect guard in handleInputValueChange doesn't swallow the
20588
+ // genuine clear (AB#1634257).
20589
+ this._clearBtnActivated = false;
20590
+
20586
20591
  // Defaults that effect the overall layout of the combobox
20587
20592
  this.checkmark = false;
20588
20593
  this.dvInputOnly = false;
@@ -21540,6 +21545,13 @@ class AuroCombobox extends AuroElement {
21540
21545
  this.bibtemplate = this.dropdown.querySelector(this.bibtemplateTag._$litStatic$);
21541
21546
  this.inputInBib = this.bibtemplate.querySelector(this.inputTag._$litStatic$);
21542
21547
 
21548
+ // Mirror the trigger's clear-button tracking onto the fullscreen bib input
21549
+ // so clearing there also fully resets the combobox (AB#1634257). See
21550
+ // trackClearBtnActivation for why this must run in the capture phase.
21551
+ if (this.inputInBib && this.inputInBib !== this.input) {
21552
+ this.trackClearBtnActivation(this.inputInBib);
21553
+ }
21554
+
21543
21555
  // Pass label text to the dropdown bib for accessible dialog naming
21544
21556
  const labelElement = this.querySelector('[slot="label"]');
21545
21557
  if (labelElement) {
@@ -21925,6 +21937,39 @@ class AuroCombobox extends AuroElement {
21925
21937
  this.clearBtnFocused = false;
21926
21938
  }
21927
21939
  });
21940
+
21941
+ this.trackClearBtnActivation(this.input);
21942
+ }
21943
+
21944
+ /**
21945
+ * Flags genuine clear-button activations on an auro-input so the SPA-preselect
21946
+ * guard in handleInputValueChange doesn't swallow them.
21947
+ *
21948
+ * The auro-input clear button fires an `isProgrammatic` input event (via
21949
+ * notifyValueChanged) that is indistinguishable in shape from the
21950
+ * SPA-preselect echo that guard bails on (isProgrammatic + set value + empty
21951
+ * input). Without this one-shot flag, clicking clear would leave
21952
+ * this.value/optionSelected stale (AB#1634257).
21953
+ *
21954
+ * Delegated on the shadow root so it works regardless of when .clearBtn
21955
+ * renders (it only exists after a value is set), and covers both real clicks
21956
+ * and programmatic clearBtn.click() (which no focusin precedes). Registered in
21957
+ * the CAPTURE phase so the flag is set BEFORE the button's own @click
21958
+ * (handleClickClear) fires its synchronous input event — which is when
21959
+ * handleInputValueChange reads the flag.
21960
+ * @private
21961
+ * @param {Element} inputEl - The auro-input whose clear button to track.
21962
+ * @returns {void}
21963
+ */
21964
+ trackClearBtnActivation(inputEl) {
21965
+ if (!inputEl || !inputEl.shadowRoot) {
21966
+ return;
21967
+ }
21968
+ inputEl.shadowRoot.addEventListener('click', (event) => {
21969
+ if (event.target.closest('.clearBtn')) {
21970
+ this._clearBtnActivated = true;
21971
+ }
21972
+ }, true);
21928
21973
  }
21929
21974
 
21930
21975
  /**
@@ -22013,7 +22058,13 @@ class AuroCombobox extends AuroElement {
22013
22058
  // to the exact shape of that echo (isProgrammatic + non-empty combobox
22014
22059
  // value + empty input.value) so it doesn't affect the swap/typed paths
22015
22060
  // where value/input already track each other through the sync helpers.
22016
- if (event && event.isProgrammatic && this.value && !this.input.value) {
22061
+ // The clear button's echo has the same shape (isProgrammatic + set value +
22062
+ // empty input) but is a genuine user clear that MUST reset this.value and
22063
+ // optionSelected below. Consume the one-shot flag so only the real
22064
+ // SPA-preselect echo bails (AB#1634257).
22065
+ const clearBtnActivated = this._clearBtnActivated;
22066
+ this._clearBtnActivated = false;
22067
+ if (event && event.isProgrammatic && this.value && !this.input.value && !clearBtnActivated) {
22017
22068
  return;
22018
22069
  }
22019
22070
 
@@ -22256,6 +22307,14 @@ class AuroCombobox extends AuroElement {
22256
22307
  }
22257
22308
  if (this.menu.value || this.menu.optionSelected) {
22258
22309
  this.menu.reset();
22310
+ } else {
22311
+ // The menu's selection properties are already cleared, but option
22312
+ // elements can still carry a stale `selected` attribute (e.g. the menu
22313
+ // options were rebuilt after the value was set, orphaning the DOM from
22314
+ // the now-null optionSelected). reset() is skipped above in that case,
22315
+ // so re-sync the option DOM directly to guarantee no option renders as
22316
+ // selected once the field is cleared (AB#1634259).
22317
+ this.menu.clearSelection();
22259
22318
  }
22260
22319
  } finally {
22261
22320
  this._clearing = false;
@@ -23707,6 +23766,22 @@ class AuroMenu extends AuroElement {
23707
23766
  this.value = undefined;
23708
23767
  this._selectedKey = undefined;
23709
23768
  this._index = -1;
23769
+
23770
+ // Eagerly sync the option DOM to the now-empty selection. Nulling the
23771
+ // reactive properties above normally schedules updated() → updateItemsState,
23772
+ // but that only runs when a property actually changes. If an option still
23773
+ // carries a stale `selected`/`aria-selected` attribute while these
23774
+ // properties are already undefined (e.g. options were rebuilt after a value
23775
+ // was set), no re-render fires and the option keeps rendering as selected.
23776
+ // Strip that state now so no option looks selected after a clear (AB#1634259).
23777
+ // Intentionally leaves `active`/`optionActive` untouched so a highlighted
23778
+ // option remains keyboard-re-selectable after emptying the value (AB#1606433).
23779
+ this.updateItemsState(new Map([
23780
+ [
23781
+ 'optionSelected',
23782
+ true
23783
+ ]
23784
+ ]));
23710
23785
  }
23711
23786
 
23712
23787
  /**
@@ -351,6 +351,7 @@ export class AuroCombobox extends AuroElement {
351
351
  /** @type {'filter' | 'suggestion'} */
352
352
  behavior: "filter" | "suggestion" | undefined;
353
353
  clearBtnFocused: boolean | undefined;
354
+ _clearBtnActivated: boolean | undefined;
354
355
  checkmark: boolean | undefined;
355
356
  dvInputOnly: boolean | undefined;
356
357
  /** @type {'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'disabled'} */
@@ -538,6 +539,27 @@ export class AuroCombobox extends AuroElement {
538
539
  * @returns {void}
539
540
  */
540
541
  private configureInput;
542
+ /**
543
+ * Flags genuine clear-button activations on an auro-input so the SPA-preselect
544
+ * guard in handleInputValueChange doesn't swallow them.
545
+ *
546
+ * The auro-input clear button fires an `isProgrammatic` input event (via
547
+ * notifyValueChanged) that is indistinguishable in shape from the
548
+ * SPA-preselect echo that guard bails on (isProgrammatic + set value + empty
549
+ * input). Without this one-shot flag, clicking clear would leave
550
+ * this.value/optionSelected stale (AB#1634257).
551
+ *
552
+ * Delegated on the shadow root so it works regardless of when .clearBtn
553
+ * renders (it only exists after a value is set), and covers both real clicks
554
+ * and programmatic clearBtn.click() (which no focusin precedes). Registered in
555
+ * the CAPTURE phase so the flag is set BEFORE the button's own @click
556
+ * (handleClickClear) fires its synchronous input event — which is when
557
+ * handleInputValueChange reads the flag.
558
+ * @private
559
+ * @param {Element} inputEl - The auro-input whose clear button to track.
560
+ * @returns {void}
561
+ */
562
+ private trackClearBtnActivation;
541
563
  /**
542
564
  * Manages the visibility of the dropdown based on loading state changes.
543
565
  *
@@ -4999,7 +4999,7 @@ let AuroHelpText$2 = class AuroHelpText extends LitElement {
4999
4999
  }
5000
5000
  };
5001
5001
 
5002
- var formkitVersion$2 = '202609011635';
5002
+ var formkitVersion$2 = '202609011810';
5003
5003
 
5004
5004
  /**
5005
5005
  * AuroElement is the shared base class for layout-aware Auro form components.
@@ -18861,7 +18861,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
18861
18861
  }
18862
18862
  };
18863
18863
 
18864
- var formkitVersion$1 = '202609011635';
18864
+ var formkitVersion$1 = '202609011810';
18865
18865
 
18866
18866
  // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
18867
18867
  // See LICENSE in the project root for license information.
@@ -20053,7 +20053,7 @@ class AuroBibtemplate extends LitElement {
20053
20053
  }
20054
20054
  }
20055
20055
 
20056
- var formkitVersion = '202609011635';
20056
+ var formkitVersion = '202609011810';
20057
20057
 
20058
20058
  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}`;
20059
20059
 
@@ -20494,6 +20494,11 @@ class AuroCombobox extends AuroElement {
20494
20494
  this.behavior = "suggestion";
20495
20495
  this.clearBtnFocused = false;
20496
20496
 
20497
+ // One-shot: set when the input's clear button is activated so the
20498
+ // SPA-preselect guard in handleInputValueChange doesn't swallow the
20499
+ // genuine clear (AB#1634257).
20500
+ this._clearBtnActivated = false;
20501
+
20497
20502
  // Defaults that effect the overall layout of the combobox
20498
20503
  this.checkmark = false;
20499
20504
  this.dvInputOnly = false;
@@ -21451,6 +21456,13 @@ class AuroCombobox extends AuroElement {
21451
21456
  this.bibtemplate = this.dropdown.querySelector(this.bibtemplateTag._$litStatic$);
21452
21457
  this.inputInBib = this.bibtemplate.querySelector(this.inputTag._$litStatic$);
21453
21458
 
21459
+ // Mirror the trigger's clear-button tracking onto the fullscreen bib input
21460
+ // so clearing there also fully resets the combobox (AB#1634257). See
21461
+ // trackClearBtnActivation for why this must run in the capture phase.
21462
+ if (this.inputInBib && this.inputInBib !== this.input) {
21463
+ this.trackClearBtnActivation(this.inputInBib);
21464
+ }
21465
+
21454
21466
  // Pass label text to the dropdown bib for accessible dialog naming
21455
21467
  const labelElement = this.querySelector('[slot="label"]');
21456
21468
  if (labelElement) {
@@ -21836,6 +21848,39 @@ class AuroCombobox extends AuroElement {
21836
21848
  this.clearBtnFocused = false;
21837
21849
  }
21838
21850
  });
21851
+
21852
+ this.trackClearBtnActivation(this.input);
21853
+ }
21854
+
21855
+ /**
21856
+ * Flags genuine clear-button activations on an auro-input so the SPA-preselect
21857
+ * guard in handleInputValueChange doesn't swallow them.
21858
+ *
21859
+ * The auro-input clear button fires an `isProgrammatic` input event (via
21860
+ * notifyValueChanged) that is indistinguishable in shape from the
21861
+ * SPA-preselect echo that guard bails on (isProgrammatic + set value + empty
21862
+ * input). Without this one-shot flag, clicking clear would leave
21863
+ * this.value/optionSelected stale (AB#1634257).
21864
+ *
21865
+ * Delegated on the shadow root so it works regardless of when .clearBtn
21866
+ * renders (it only exists after a value is set), and covers both real clicks
21867
+ * and programmatic clearBtn.click() (which no focusin precedes). Registered in
21868
+ * the CAPTURE phase so the flag is set BEFORE the button's own @click
21869
+ * (handleClickClear) fires its synchronous input event — which is when
21870
+ * handleInputValueChange reads the flag.
21871
+ * @private
21872
+ * @param {Element} inputEl - The auro-input whose clear button to track.
21873
+ * @returns {void}
21874
+ */
21875
+ trackClearBtnActivation(inputEl) {
21876
+ if (!inputEl || !inputEl.shadowRoot) {
21877
+ return;
21878
+ }
21879
+ inputEl.shadowRoot.addEventListener('click', (event) => {
21880
+ if (event.target.closest('.clearBtn')) {
21881
+ this._clearBtnActivated = true;
21882
+ }
21883
+ }, true);
21839
21884
  }
21840
21885
 
21841
21886
  /**
@@ -21924,7 +21969,13 @@ class AuroCombobox extends AuroElement {
21924
21969
  // to the exact shape of that echo (isProgrammatic + non-empty combobox
21925
21970
  // value + empty input.value) so it doesn't affect the swap/typed paths
21926
21971
  // where value/input already track each other through the sync helpers.
21927
- if (event && event.isProgrammatic && this.value && !this.input.value) {
21972
+ // The clear button's echo has the same shape (isProgrammatic + set value +
21973
+ // empty input) but is a genuine user clear that MUST reset this.value and
21974
+ // optionSelected below. Consume the one-shot flag so only the real
21975
+ // SPA-preselect echo bails (AB#1634257).
21976
+ const clearBtnActivated = this._clearBtnActivated;
21977
+ this._clearBtnActivated = false;
21978
+ if (event && event.isProgrammatic && this.value && !this.input.value && !clearBtnActivated) {
21928
21979
  return;
21929
21980
  }
21930
21981
 
@@ -22167,6 +22218,14 @@ class AuroCombobox extends AuroElement {
22167
22218
  }
22168
22219
  if (this.menu.value || this.menu.optionSelected) {
22169
22220
  this.menu.reset();
22221
+ } else {
22222
+ // The menu's selection properties are already cleared, but option
22223
+ // elements can still carry a stale `selected` attribute (e.g. the menu
22224
+ // options were rebuilt after the value was set, orphaning the DOM from
22225
+ // the now-null optionSelected). reset() is skipped above in that case,
22226
+ // so re-sync the option DOM directly to guarantee no option renders as
22227
+ // selected once the field is cleared (AB#1634259).
22228
+ this.menu.clearSelection();
22170
22229
  }
22171
22230
  } finally {
22172
22231
  this._clearing = false;