@aurodesignsystem-dev/auro-formkit 0.0.0-pr1603.4 → 0.0.0-pr1604.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 (63) 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 +4 -102
  7. package/components/combobox/demo/getting-started.md +49 -0
  8. package/components/combobox/demo/getting-started.min.js +23 -102
  9. package/components/combobox/demo/index.min.js +4 -102
  10. package/components/combobox/dist/auro-combobox.d.ts +0 -22
  11. package/components/combobox/dist/index.js +4 -86
  12. package/components/combobox/dist/registered.js +4 -86
  13. package/components/counter/demo/api.md +2 -0
  14. package/components/counter/demo/customize.min.js +26 -2
  15. package/components/counter/demo/getting-started.html +3 -1
  16. package/components/counter/demo/getting-started.md +49 -0
  17. package/components/counter/demo/getting-started.min.js +8492 -0
  18. package/components/counter/demo/index.min.js +26 -2
  19. package/components/counter/dist/auro-counter-group.d.ts +6 -0
  20. package/components/counter/dist/auro-counter.d.ts +6 -0
  21. package/components/counter/dist/index.js +26 -2
  22. package/components/counter/dist/registered.js +26 -2
  23. package/components/datepicker/demo/customize.min.js +3 -3
  24. package/components/datepicker/demo/getting-started.html +3 -1
  25. package/components/datepicker/demo/getting-started.md +39 -0
  26. package/components/datepicker/demo/getting-started.min.js +37626 -0
  27. package/components/datepicker/demo/index.min.js +3 -3
  28. package/components/datepicker/dist/index.js +3 -3
  29. package/components/datepicker/dist/registered.js +3 -3
  30. package/components/dropdown/demo/customize.min.js +1 -1
  31. package/components/dropdown/demo/getting-started.min.js +2 -2
  32. package/components/dropdown/demo/index.min.js +1 -1
  33. package/components/dropdown/dist/index.js +1 -1
  34. package/components/dropdown/dist/registered.js +1 -1
  35. package/components/form/demo/customize.min.js +44 -113
  36. package/components/form/demo/getting-started.min.js +44 -113
  37. package/components/form/demo/index.min.js +44 -113
  38. package/components/form/demo/registerDemoDeps.min.js +38 -112
  39. package/components/form/dist/index.js +6 -1
  40. package/components/form/dist/registered.js +6 -1
  41. package/components/input/demo/customize.md +0 -37
  42. package/components/input/demo/customize.min.js +1 -10
  43. package/components/input/demo/getting-started.md +33 -0
  44. package/components/input/demo/getting-started.min.js +21 -1
  45. package/components/input/demo/index.min.js +1 -1
  46. package/components/input/dist/index.js +1 -1
  47. package/components/input/dist/registered.js +1 -1
  48. package/components/menu/demo/index.min.js +0 -16
  49. package/components/menu/dist/index.js +0 -16
  50. package/components/menu/dist/registered.js +0 -16
  51. package/components/radio/demo/customize.min.js +1 -1
  52. package/components/radio/demo/getting-started.min.js +1 -1
  53. package/components/radio/demo/index.min.js +1 -1
  54. package/components/radio/dist/index.js +1 -1
  55. package/components/radio/dist/registered.js +1 -1
  56. package/components/select/demo/customize.min.js +2 -18
  57. package/components/select/demo/getting-started.md +49 -0
  58. package/components/select/demo/getting-started.min.js +24 -19
  59. package/components/select/demo/index.min.js +2 -18
  60. package/components/select/dist/index.js +2 -2
  61. package/components/select/dist/registered.js +2 -2
  62. package/custom-elements.json +1492 -1492
  63. package/package.json +1 -1
@@ -1284,7 +1284,7 @@ class AuroHelpText extends i$2 {
1284
1284
  }
1285
1285
  }
1286
1286
 
1287
- var formkitVersion = '202609011927';
1287
+ var formkitVersion = '202609011830';
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 = '202609011927';
1287
+ var formkitVersion = '202609011830';
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 = '202609011927';
1287
+ var formkitVersion = '202609011830';
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 = '202609011927';
1240
+ var formkitVersion = '202609011830';
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 = '202609011927';
1240
+ var formkitVersion = '202609011830';
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 = '202609011927';
5069
+ var formkitVersion$2 = '202609011830';
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 = '202609011927';
18938
+ var formkitVersion$1 = '202609011830';
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 = '202609011927';
20130
+ var formkitVersion = '202609011830';
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,11 +20568,6 @@ 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
-
20576
20571
  // Defaults that effect the overall layout of the combobox
20577
20572
  this.checkmark = false;
20578
20573
  this.dvInputOnly = false;
@@ -21530,13 +21525,6 @@ class AuroCombobox extends AuroElement {
21530
21525
  this.bibtemplate = this.dropdown.querySelector(this.bibtemplateTag._$litStatic$);
21531
21526
  this.inputInBib = this.bibtemplate.querySelector(this.inputTag._$litStatic$);
21532
21527
 
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
-
21540
21528
  // Pass label text to the dropdown bib for accessible dialog naming
21541
21529
  const labelElement = this.querySelector('[slot="label"]');
21542
21530
  if (labelElement) {
@@ -21922,52 +21910,6 @@ class AuroCombobox extends AuroElement {
21922
21910
  this.clearBtnFocused = false;
21923
21911
  }
21924
21912
  });
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
- // Bound the flag's lifetime to this synchronous clear -> input window.
21958
- // auro-input's handleClickClear fires its input event synchronously
21959
- // (before any macrotask runs), so handleInputValueChange consumes the
21960
- // flag first and this reset is a harmless no-op. It only does real work
21961
- // if that input event never arrives (e.g. auro-input throws mid-clear),
21962
- // guaranteeing the flag can't survive to be misread as a genuine clear
21963
- // by a later unrelated event such as an SPA-preselect echo (AB#1634257).
21964
- // Scheduled via _scheduleTimer so disconnectedCallback cancels it if the
21965
- // component tears down inside that window.
21966
- this._scheduleTimer(() => {
21967
- this._clearBtnActivated = false;
21968
- }, 0);
21969
- }
21970
- }, true);
21971
21913
  }
21972
21914
 
21973
21915
  /**
@@ -22009,17 +21951,6 @@ class AuroCombobox extends AuroElement {
22009
21951
  * @returns {void}
22010
21952
  */
22011
21953
  handleInputValueChange(event) {
22012
- // Consume the one-shot clear-button flag on EVERY entry, before any branch
22013
- // below can early-return. trackClearBtnActivation sets it in the capture
22014
- // phase right before auro-input's clear button fires its synchronous input
22015
- // event; reading and immediately clearing it here guarantees the flag never
22016
- // survives a handleInputValueChange call to leak into a later event (e.g.
22017
- // the bib branch bailing at _syncingDisplayValue, or an SPA-preselect echo)
22018
- // where it would defeat the guard below. Held in a local so that guard can
22019
- // still tell a genuine clear from the init-render echo (AB#1634257).
22020
- const clearBtnActivated = this._clearBtnActivated;
22021
- this._clearBtnActivated = false;
22022
-
22023
21954
  // When the event comes from the fullscreen bib input, sync the value to
22024
21955
  // the trigger input. Setting trigger.value triggers Lit's updated()
22025
21956
  // (async, microtask) which fires notifyValueChanged() → another 'input'
@@ -22067,12 +21998,7 @@ class AuroCombobox extends AuroElement {
22067
21998
  // to the exact shape of that echo (isProgrammatic + non-empty combobox
22068
21999
  // value + empty input.value) so it doesn't affect the swap/typed paths
22069
22000
  // where value/input already track each other through the sync helpers.
22070
- // The clear button's echo has the same shape (isProgrammatic + set value +
22071
- // empty input) but is a genuine user clear that MUST reset this.value and
22072
- // optionSelected below. clearBtnActivated (consumed at the top of this
22073
- // method) is true only for that genuine clear, so only the real
22074
- // SPA-preselect echo bails (AB#1634257).
22075
- if (event && event.isProgrammatic && this.value && !this.input.value && !clearBtnActivated) {
22001
+ if (event && event.isProgrammatic && this.value && !this.input.value) {
22076
22002
  return;
22077
22003
  }
22078
22004
 
@@ -22315,14 +22241,6 @@ class AuroCombobox extends AuroElement {
22315
22241
  }
22316
22242
  if (this.menu.value || this.menu.optionSelected) {
22317
22243
  this.menu.reset();
22318
- } else {
22319
- // The menu's selection properties are already cleared, but option
22320
- // elements can still carry a stale `selected` attribute (e.g. the menu
22321
- // options were rebuilt after the value was set, orphaning the DOM from
22322
- // the now-null optionSelected). reset() is skipped above in that case,
22323
- // so re-sync the option DOM directly to guarantee no option renders as
22324
- // selected once the field is cleared (AB#1634259).
22325
- this.menu.clearSelection();
22326
22244
  }
22327
22245
  } finally {
22328
22246
  this._clearing = false;
@@ -23774,22 +23692,6 @@ class AuroMenu extends AuroElement {
23774
23692
  this.value = undefined;
23775
23693
  this._selectedKey = undefined;
23776
23694
  this._index = -1;
23777
-
23778
- // Eagerly sync the option DOM to the now-empty selection. Nulling the
23779
- // reactive properties above normally schedules updated() → updateItemsState,
23780
- // but that only runs when a property actually changes. If an option still
23781
- // carries a stale `selected`/`aria-selected` attribute while these
23782
- // properties are already undefined (e.g. options were rebuilt after a value
23783
- // was set), no re-render fires and the option keeps rendering as selected.
23784
- // Strip that state now so no option looks selected after a clear (AB#1634259).
23785
- // Intentionally leaves `active`/`optionActive` untouched so a highlighted
23786
- // option remains keyboard-re-selectable after emptying the value (AB#1606433).
23787
- this.updateItemsState(new Map([
23788
- [
23789
- 'optionSelected',
23790
- true
23791
- ]
23792
- ]));
23793
23695
  }
23794
23696
 
23795
23697
  /**
@@ -394,6 +394,55 @@ Ensure your `tsconfig.json` uses `"moduleResolution": "bundler"` so TypeScript c
394
394
  <p>Programmatically moves focus to the combobox trigger input.</p>
395
395
  <auro-header level="3" id="reset">reset()</auro-header>
396
396
  <p>Resets the component to its initial state, clearing the value, input text, and validation state.</p>
397
+ <div class="exampleWrapper">
398
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/reset-state.html) -->
399
+ <!-- The below content is automatically added from ./../apiExamples/reset-state.html -->
400
+ <auro-button id="resetStateBtn">Reset</auro-button>
401
+ <br /><br />
402
+ <auro-combobox id="resetStateExample" required>
403
+ <span slot="bib.fullscreen.headline">Bib Header</span>
404
+ <span slot="label">Name</span>
405
+ <auro-menu>
406
+ <auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
407
+ <auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
408
+ <auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
409
+ <auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
410
+ <auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
411
+ <auro-menuoption static nomatch>No matching option</auro-menuoption>
412
+ </auro-menu>
413
+ </auro-combobox>
414
+ <!-- AURO-GENERATED-CONTENT:END -->
415
+ </div>
416
+ <auro-accordion alignRight>
417
+ <span slot="trigger">See code</span>
418
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/reset-state.html) -->
419
+ <!-- The below code snippet is automatically added from ./../apiExamples/reset-state.html -->
420
+ <pre class="language-html"><code class="language-html">&lt;auro-button id="resetStateBtn"&gt;Reset&lt;/auro-button&gt;
421
+ &lt;br /&gt;&lt;br /&gt;
422
+ &lt;auro-combobox id="resetStateExample" required&gt;
423
+ &lt;span slot="bib.fullscreen.headline"&gt;Bib Header&lt;/span&gt;
424
+ &lt;span slot="label"&gt;Name&lt;/span&gt;
425
+ &lt;auro-menu&gt;
426
+ &lt;auro-menuoption value="Apples" id="option-0"&gt;Apples&lt;/auro-menuoption&gt;
427
+ &lt;auro-menuoption value="Oranges" id="option-1"&gt;Oranges&lt;/auro-menuoption&gt;
428
+ &lt;auro-menuoption value="Peaches" id="option-2"&gt;Peaches&lt;/auro-menuoption&gt;
429
+ &lt;auro-menuoption value="Grapes" id="option-3"&gt;Grapes&lt;/auro-menuoption&gt;
430
+ &lt;auro-menuoption value="Cherries" id="option-4"&gt;Cherries&lt;/auro-menuoption&gt;
431
+ &lt;auro-menuoption static nomatch&gt;No matching option&lt;/auro-menuoption&gt;
432
+ &lt;/auro-menu&gt;
433
+ &lt;/auro-combobox&gt;</code></pre>
434
+ <!-- AURO-GENERATED-CONTENT:END -->
435
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/reset-state.js) -->
436
+ <!-- The below code snippet is automatically added from ./../apiExamples/reset-state.js -->
437
+ <pre class="language-js"><code class="language-js">export function resetStateExample() {
438
+ const elem = document.querySelector('#resetStateExample');
439
+ ​
440
+ document.querySelector('#resetStateBtn').addEventListener('click', () =&gt; {
441
+ elem.reset();
442
+ });
443
+ }</code></pre>
444
+ <!-- AURO-GENERATED-CONTENT:END -->
445
+ </auro-accordion>
397
446
  <auro-header level="3" id="validate">validate()</auro-header>
398
447
  <p>Triggers validation on the component. Pass <code>true</code> to force validation even when <code>noValidate</code> is set.</p>
399
448
  <auro-header level="3" id="hideBib">hideBib()</auro-header>
@@ -5066,7 +5066,7 @@ let AuroHelpText$2 = class AuroHelpText extends i$3 {
5066
5066
  }
5067
5067
  };
5068
5068
 
5069
- var formkitVersion$2 = '202609011927';
5069
+ var formkitVersion$2 = '202609011830';
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 = '202609011927';
18938
+ var formkitVersion$1 = '202609011830';
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 = '202609011927';
20130
+ var formkitVersion = '202609011830';
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,11 +20568,6 @@ 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
-
20576
20571
  // Defaults that effect the overall layout of the combobox
20577
20572
  this.checkmark = false;
20578
20573
  this.dvInputOnly = false;
@@ -21530,13 +21525,6 @@ class AuroCombobox extends AuroElement {
21530
21525
  this.bibtemplate = this.dropdown.querySelector(this.bibtemplateTag._$litStatic$);
21531
21526
  this.inputInBib = this.bibtemplate.querySelector(this.inputTag._$litStatic$);
21532
21527
 
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
-
21540
21528
  // Pass label text to the dropdown bib for accessible dialog naming
21541
21529
  const labelElement = this.querySelector('[slot="label"]');
21542
21530
  if (labelElement) {
@@ -21922,52 +21910,6 @@ class AuroCombobox extends AuroElement {
21922
21910
  this.clearBtnFocused = false;
21923
21911
  }
21924
21912
  });
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
- // Bound the flag's lifetime to this synchronous clear -> input window.
21958
- // auro-input's handleClickClear fires its input event synchronously
21959
- // (before any macrotask runs), so handleInputValueChange consumes the
21960
- // flag first and this reset is a harmless no-op. It only does real work
21961
- // if that input event never arrives (e.g. auro-input throws mid-clear),
21962
- // guaranteeing the flag can't survive to be misread as a genuine clear
21963
- // by a later unrelated event such as an SPA-preselect echo (AB#1634257).
21964
- // Scheduled via _scheduleTimer so disconnectedCallback cancels it if the
21965
- // component tears down inside that window.
21966
- this._scheduleTimer(() => {
21967
- this._clearBtnActivated = false;
21968
- }, 0);
21969
- }
21970
- }, true);
21971
21913
  }
21972
21914
 
21973
21915
  /**
@@ -22009,17 +21951,6 @@ class AuroCombobox extends AuroElement {
22009
21951
  * @returns {void}
22010
21952
  */
22011
21953
  handleInputValueChange(event) {
22012
- // Consume the one-shot clear-button flag on EVERY entry, before any branch
22013
- // below can early-return. trackClearBtnActivation sets it in the capture
22014
- // phase right before auro-input's clear button fires its synchronous input
22015
- // event; reading and immediately clearing it here guarantees the flag never
22016
- // survives a handleInputValueChange call to leak into a later event (e.g.
22017
- // the bib branch bailing at _syncingDisplayValue, or an SPA-preselect echo)
22018
- // where it would defeat the guard below. Held in a local so that guard can
22019
- // still tell a genuine clear from the init-render echo (AB#1634257).
22020
- const clearBtnActivated = this._clearBtnActivated;
22021
- this._clearBtnActivated = false;
22022
-
22023
21954
  // When the event comes from the fullscreen bib input, sync the value to
22024
21955
  // the trigger input. Setting trigger.value triggers Lit's updated()
22025
21956
  // (async, microtask) which fires notifyValueChanged() → another 'input'
@@ -22067,12 +21998,7 @@ class AuroCombobox extends AuroElement {
22067
21998
  // to the exact shape of that echo (isProgrammatic + non-empty combobox
22068
21999
  // value + empty input.value) so it doesn't affect the swap/typed paths
22069
22000
  // where value/input already track each other through the sync helpers.
22070
- // The clear button's echo has the same shape (isProgrammatic + set value +
22071
- // empty input) but is a genuine user clear that MUST reset this.value and
22072
- // optionSelected below. clearBtnActivated (consumed at the top of this
22073
- // method) is true only for that genuine clear, so only the real
22074
- // SPA-preselect echo bails (AB#1634257).
22075
- if (event && event.isProgrammatic && this.value && !this.input.value && !clearBtnActivated) {
22001
+ if (event && event.isProgrammatic && this.value && !this.input.value) {
22076
22002
  return;
22077
22003
  }
22078
22004
 
@@ -22315,14 +22241,6 @@ class AuroCombobox extends AuroElement {
22315
22241
  }
22316
22242
  if (this.menu.value || this.menu.optionSelected) {
22317
22243
  this.menu.reset();
22318
- } else {
22319
- // The menu's selection properties are already cleared, but option
22320
- // elements can still carry a stale `selected` attribute (e.g. the menu
22321
- // options were rebuilt after the value was set, orphaning the DOM from
22322
- // the now-null optionSelected). reset() is skipped above in that case,
22323
- // so re-sync the option DOM directly to guarantee no option renders as
22324
- // selected once the field is cleared (AB#1634259).
22325
- this.menu.clearSelection();
22326
22244
  }
22327
22245
  } finally {
22328
22246
  this._clearing = false;
@@ -23774,22 +23692,6 @@ class AuroMenu extends AuroElement {
23774
23692
  this.value = undefined;
23775
23693
  this._selectedKey = undefined;
23776
23694
  this._index = -1;
23777
-
23778
- // Eagerly sync the option DOM to the now-empty selection. Nulling the
23779
- // reactive properties above normally schedules updated() → updateItemsState,
23780
- // but that only runs when a property actually changes. If an option still
23781
- // carries a stale `selected`/`aria-selected` attribute while these
23782
- // properties are already undefined (e.g. options were rebuilt after a value
23783
- // was set), no re-render fires and the option keeps rendering as selected.
23784
- // Strip that state now so no option looks selected after a clear (AB#1634259).
23785
- // Intentionally leaves `active`/`optionActive` untouched so a highlighted
23786
- // option remains keyboard-re-selectable after emptying the value (AB#1606433).
23787
- this.updateItemsState(new Map([
23788
- [
23789
- 'optionSelected',
23790
- true
23791
- ]
23792
- ]));
23793
23695
  }
23794
23696
 
23795
23697
  /**
@@ -24585,6 +24487,14 @@ class AuroMenuOption extends AuroElement {
24585
24487
  AuroMenu.register();
24586
24488
  AuroMenuOption.register();
24587
24489
 
24490
+ function resetStateExample() {
24491
+ const elem = document.querySelector('#resetStateExample');
24492
+
24493
+ document.querySelector('#resetStateBtn').addEventListener('click', () => {
24494
+ elem.reset();
24495
+ });
24496
+ }
24497
+
24588
24498
  /* eslint-disable jsdoc/require-jsdoc, no-magic-numbers, no-param-reassign */
24589
24499
 
24590
24500
 
@@ -24592,6 +24502,17 @@ AuroCombobox.register();
24592
24502
  AuroCombobox.register('custom-combobox');
24593
24503
 
24594
24504
  function initExamples(initCount) {
24505
+ initCount = initCount || 0;
24506
+
24507
+ try {
24508
+ resetStateExample();
24509
+ } catch (err) {
24510
+ if (initCount <= 20) {
24511
+ setTimeout(() => {
24512
+ initExamples(initCount + 1);
24513
+ }, 100);
24514
+ }
24515
+ }
24595
24516
  }
24596
24517
 
24597
24518
  export { initExamples };
@@ -5081,7 +5081,7 @@ let AuroHelpText$2 = class AuroHelpText extends i$3 {
5081
5081
  }
5082
5082
  };
5083
5083
 
5084
- var formkitVersion$2 = '202609011927';
5084
+ var formkitVersion$2 = '202609011830';
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 = '202609011927';
18953
+ var formkitVersion$1 = '202609011830';
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 = '202609011927';
20145
+ var formkitVersion = '202609011830';
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,11 +20583,6 @@ 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
-
20591
20586
  // Defaults that effect the overall layout of the combobox
20592
20587
  this.checkmark = false;
20593
20588
  this.dvInputOnly = false;
@@ -21545,13 +21540,6 @@ class AuroCombobox extends AuroElement {
21545
21540
  this.bibtemplate = this.dropdown.querySelector(this.bibtemplateTag._$litStatic$);
21546
21541
  this.inputInBib = this.bibtemplate.querySelector(this.inputTag._$litStatic$);
21547
21542
 
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
-
21555
21543
  // Pass label text to the dropdown bib for accessible dialog naming
21556
21544
  const labelElement = this.querySelector('[slot="label"]');
21557
21545
  if (labelElement) {
@@ -21937,52 +21925,6 @@ class AuroCombobox extends AuroElement {
21937
21925
  this.clearBtnFocused = false;
21938
21926
  }
21939
21927
  });
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
- // Bound the flag's lifetime to this synchronous clear -> input window.
21973
- // auro-input's handleClickClear fires its input event synchronously
21974
- // (before any macrotask runs), so handleInputValueChange consumes the
21975
- // flag first and this reset is a harmless no-op. It only does real work
21976
- // if that input event never arrives (e.g. auro-input throws mid-clear),
21977
- // guaranteeing the flag can't survive to be misread as a genuine clear
21978
- // by a later unrelated event such as an SPA-preselect echo (AB#1634257).
21979
- // Scheduled via _scheduleTimer so disconnectedCallback cancels it if the
21980
- // component tears down inside that window.
21981
- this._scheduleTimer(() => {
21982
- this._clearBtnActivated = false;
21983
- }, 0);
21984
- }
21985
- }, true);
21986
21928
  }
21987
21929
 
21988
21930
  /**
@@ -22024,17 +21966,6 @@ class AuroCombobox extends AuroElement {
22024
21966
  * @returns {void}
22025
21967
  */
22026
21968
  handleInputValueChange(event) {
22027
- // Consume the one-shot clear-button flag on EVERY entry, before any branch
22028
- // below can early-return. trackClearBtnActivation sets it in the capture
22029
- // phase right before auro-input's clear button fires its synchronous input
22030
- // event; reading and immediately clearing it here guarantees the flag never
22031
- // survives a handleInputValueChange call to leak into a later event (e.g.
22032
- // the bib branch bailing at _syncingDisplayValue, or an SPA-preselect echo)
22033
- // where it would defeat the guard below. Held in a local so that guard can
22034
- // still tell a genuine clear from the init-render echo (AB#1634257).
22035
- const clearBtnActivated = this._clearBtnActivated;
22036
- this._clearBtnActivated = false;
22037
-
22038
21969
  // When the event comes from the fullscreen bib input, sync the value to
22039
21970
  // the trigger input. Setting trigger.value triggers Lit's updated()
22040
21971
  // (async, microtask) which fires notifyValueChanged() → another 'input'
@@ -22082,12 +22013,7 @@ class AuroCombobox extends AuroElement {
22082
22013
  // to the exact shape of that echo (isProgrammatic + non-empty combobox
22083
22014
  // value + empty input.value) so it doesn't affect the swap/typed paths
22084
22015
  // where value/input already track each other through the sync helpers.
22085
- // The clear button's echo has the same shape (isProgrammatic + set value +
22086
- // empty input) but is a genuine user clear that MUST reset this.value and
22087
- // optionSelected below. clearBtnActivated (consumed at the top of this
22088
- // method) is true only for that genuine clear, so only the real
22089
- // SPA-preselect echo bails (AB#1634257).
22090
- if (event && event.isProgrammatic && this.value && !this.input.value && !clearBtnActivated) {
22016
+ if (event && event.isProgrammatic && this.value && !this.input.value) {
22091
22017
  return;
22092
22018
  }
22093
22019
 
@@ -22330,14 +22256,6 @@ class AuroCombobox extends AuroElement {
22330
22256
  }
22331
22257
  if (this.menu.value || this.menu.optionSelected) {
22332
22258
  this.menu.reset();
22333
- } else {
22334
- // The menu's selection properties are already cleared, but option
22335
- // elements can still carry a stale `selected` attribute (e.g. the menu
22336
- // options were rebuilt after the value was set, orphaning the DOM from
22337
- // the now-null optionSelected). reset() is skipped above in that case,
22338
- // so re-sync the option DOM directly to guarantee no option renders as
22339
- // selected once the field is cleared (AB#1634259).
22340
- this.menu.clearSelection();
22341
22259
  }
22342
22260
  } finally {
22343
22261
  this._clearing = false;
@@ -23789,22 +23707,6 @@ class AuroMenu extends AuroElement {
23789
23707
  this.value = undefined;
23790
23708
  this._selectedKey = undefined;
23791
23709
  this._index = -1;
23792
-
23793
- // Eagerly sync the option DOM to the now-empty selection. Nulling the
23794
- // reactive properties above normally schedules updated() → updateItemsState,
23795
- // but that only runs when a property actually changes. If an option still
23796
- // carries a stale `selected`/`aria-selected` attribute while these
23797
- // properties are already undefined (e.g. options were rebuilt after a value
23798
- // was set), no re-render fires and the option keeps rendering as selected.
23799
- // Strip that state now so no option looks selected after a clear (AB#1634259).
23800
- // Intentionally leaves `active`/`optionActive` untouched so a highlighted
23801
- // option remains keyboard-re-selectable after emptying the value (AB#1606433).
23802
- this.updateItemsState(new Map([
23803
- [
23804
- 'optionSelected',
23805
- true
23806
- ]
23807
- ]));
23808
23710
  }
23809
23711
 
23810
23712
  /**