@aurodesignsystem-dev/auro-formkit 0.0.0-pr1522.3 → 0.0.0-pr1524.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 (45) 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 +67 -25
  7. package/components/combobox/demo/getting-started.min.js +67 -25
  8. package/components/combobox/demo/index.min.js +67 -25
  9. package/components/combobox/dist/auro-combobox.d.ts +2 -0
  10. package/components/combobox/dist/index.js +67 -25
  11. package/components/combobox/dist/registered.js +67 -25
  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 +19 -21
  17. package/components/datepicker/demo/index.min.js +19 -21
  18. package/components/datepicker/dist/index.js +19 -21
  19. package/components/datepicker/dist/registered.js +19 -21
  20. package/components/dropdown/demo/customize.min.js +1 -1
  21. package/components/dropdown/demo/getting-started.min.js +1 -1
  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 +107 -69
  26. package/components/form/demo/getting-started.min.js +107 -69
  27. package/components/form/demo/index.min.js +107 -69
  28. package/components/form/demo/registerDemoDeps.min.js +107 -69
  29. package/components/input/demo/customize.min.js +17 -19
  30. package/components/input/demo/getting-started.min.js +17 -19
  31. package/components/input/demo/index.min.js +17 -19
  32. package/components/input/dist/index.js +17 -19
  33. package/components/input/dist/registered.js +17 -19
  34. package/components/radio/demo/customize.min.js +1 -1
  35. package/components/radio/demo/getting-started.min.js +1 -1
  36. package/components/radio/demo/index.min.js +1 -1
  37. package/components/radio/dist/index.js +1 -1
  38. package/components/radio/dist/registered.js +1 -1
  39. package/components/select/demo/customize.min.js +2 -2
  40. package/components/select/demo/getting-started.min.js +2 -2
  41. package/components/select/demo/index.min.js +2 -2
  42. package/components/select/dist/index.js +2 -2
  43. package/components/select/dist/registered.js +2 -2
  44. package/custom-elements.json +575 -561
  45. package/package.json +1 -1
@@ -1275,7 +1275,7 @@ class AuroHelpText extends i$2 {
1275
1275
  }
1276
1276
  }
1277
1277
 
1278
- var formkitVersion = '202607012103';
1278
+ var formkitVersion = '202607020031';
1279
1279
 
1280
1280
  // Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
1281
1281
  // See LICENSE in the project root for license information.
@@ -1275,7 +1275,7 @@ class AuroHelpText extends i$2 {
1275
1275
  }
1276
1276
  }
1277
1277
 
1278
- var formkitVersion = '202607012103';
1278
+ var formkitVersion = '202607020031';
1279
1279
 
1280
1280
  // Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
1281
1281
  // See LICENSE in the project root for license information.
@@ -1275,7 +1275,7 @@ class AuroHelpText extends i$2 {
1275
1275
  }
1276
1276
  }
1277
1277
 
1278
- var formkitVersion = '202607012103';
1278
+ var formkitVersion = '202607020031';
1279
1279
 
1280
1280
  // Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
1281
1281
  // See LICENSE in the project root for license information.
@@ -1228,7 +1228,7 @@ class AuroHelpText extends LitElement {
1228
1228
  }
1229
1229
  }
1230
1230
 
1231
- var formkitVersion = '202607012103';
1231
+ var formkitVersion = '202607020031';
1232
1232
 
1233
1233
  // Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
1234
1234
  // See LICENSE in the project root for license information.
@@ -1228,7 +1228,7 @@ class AuroHelpText extends LitElement {
1228
1228
  }
1229
1229
  }
1230
1230
 
1231
- var formkitVersion = '202607012103';
1231
+ var formkitVersion = '202607020031';
1232
1232
 
1233
1233
  // Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
1234
1234
  // See LICENSE in the project root for license information.
@@ -4879,7 +4879,7 @@ let AuroHelpText$2 = class AuroHelpText extends i$3 {
4879
4879
  }
4880
4880
  };
4881
4881
 
4882
- var formkitVersion$2 = '202607012103';
4882
+ var formkitVersion$2 = '202607020031';
4883
4883
 
4884
4884
  let AuroElement$2 = class AuroElement extends i$3 {
4885
4885
  static get properties() {
@@ -17768,14 +17768,17 @@ class BaseInput extends AuroElement$1 {
17768
17768
  * @returns {void}
17769
17769
  */
17770
17770
  notifyValueChanged() {
17771
- let inputEvent = null;
17772
-
17773
- inputEvent = new Event('input', {
17771
+ // This echoes Lit's reactive value update (and handleClickClear's
17772
+ // programmatic clear) — it is NOT a fresh user-input event. Mark it
17773
+ // `isProgrammatic` so consumers (e.g. auro-combobox) can distinguish
17774
+ // it from genuine user typing and skip clobbering their own
17775
+ // programmatic state during init-time renders.
17776
+ const inputEvent = new Event('input', {
17774
17777
  bubbles: true,
17775
17778
  composed: true,
17776
17779
  });
17780
+ inputEvent.isProgrammatic = true;
17777
17781
 
17778
- // Dispatched event to alert outside shadow DOM context of event firing.
17779
17782
  this.dispatchEvent(inputEvent);
17780
17783
  }
17781
17784
 
@@ -18488,7 +18491,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$3 {
18488
18491
  }
18489
18492
  };
18490
18493
 
18491
- var formkitVersion$1 = '202607012103';
18494
+ var formkitVersion$1 = '202607020031';
18492
18495
 
18493
18496
  // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
18494
18497
  // See LICENSE in the project root for license information.
@@ -18774,20 +18777,15 @@ class AuroInput extends BaseInput {
18774
18777
  * @returns {void}
18775
18778
  */
18776
18779
  checkDisplayValueSlotChange() {
18777
- let nodes = this.shadowRoot.querySelector('slot[name="displayValue"]').assignedNodes();
18778
-
18779
- // Handle when DisplayValue is multi-level slot content (e.g. combobox passing displayValue to input)
18780
- if (nodes && nodes[0] && nodes[0].tagName === 'SLOT') {
18781
- nodes = nodes[0].assignedNodes();
18782
- }
18783
-
18784
- let hasContent = false;
18785
-
18786
- if (nodes.length > 0) {
18787
- hasContent = true;
18788
- }
18780
+ // flatten:true resolves through auro-combobox's forwarding slot
18781
+ // (<slot name="displayValue" slot="displayValue">) so a clone appended
18782
+ // directly to auro-input's light DOM alongside the forwarder still
18783
+ // counts as content. The prior nodes[0].tagName === 'SLOT' recursion
18784
+ // discarded any siblings past the forwarder.
18785
+ const slot = this.shadowRoot.querySelector('slot[name="displayValue"]');
18786
+ const nodes = slot.assignedNodes({ flatten: true });
18789
18787
 
18790
- this.hasDisplayValueContent = hasContent;
18788
+ this.hasDisplayValueContent = nodes.length > 0;
18791
18789
  }
18792
18790
 
18793
18791
  firstUpdated() {
@@ -19614,7 +19612,7 @@ class AuroBibtemplate extends i$3 {
19614
19612
  }
19615
19613
  }
19616
19614
 
19617
- var formkitVersion = '202607012103';
19615
+ var formkitVersion = '202607020031';
19618
19616
 
19619
19617
  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}`;
19620
19618
 
@@ -20713,9 +20711,11 @@ class AuroCombobox extends AuroElement {
20713
20711
  /**
20714
20712
  * Processes hidden state of all menu options and determines if there are any available options not hidden.
20715
20713
  * @private
20714
+ * @param {object} [root0={}] - Optional flag bag.
20715
+ * @param {boolean} [root0.preferComboboxValue=false] - When true, a match on `this.value` wins the tie-break over `this.input.value` (used by handleSlotChange on mount / re-mount).
20716
20716
  * @returns {void}
20717
20717
  */
20718
- handleMenuOptions() {
20718
+ handleMenuOptions({ preferComboboxValue = false } = {}) {
20719
20719
  this.generateOptionsArray();
20720
20720
  this.availableOptions = [];
20721
20721
  // Single source of truth for the menu's filter/highlight token per call.
@@ -20736,8 +20736,20 @@ class AuroCombobox extends AuroElement {
20736
20736
  option.setAttribute('aria-posinset', index + 1);
20737
20737
  });
20738
20738
 
20739
- if (this.input.value && this.menu.options && this.menu.options.some((opt) => opt.value === this.input.value)) {
20740
- this.setMenuValue(this.input.value);
20739
+ // On mount/re-mount (via handleSlotChange), prefer the framework-set
20740
+ // `this.value` when it matches a menu option. Covers SPA preselect and
20741
+ // consumer swap patterns (e.g. Svelte `{#key}` re-mount) where
20742
+ // `this.value` is authoritative but `this.input.value` may be empty or
20743
+ // carry stale typed text from another field. Do NOT enable this in the
20744
+ // event-driven path — user clears would be undone by re-syncing to the
20745
+ // previous combobox.value.
20746
+ const valueMatches = preferComboboxValue &&
20747
+ this.value &&
20748
+ this.menu.options &&
20749
+ this.menu.options.some((opt) => opt.value === this.value);
20750
+ const matchValue = valueMatches ? this.value : this.input.value;
20751
+ if (matchValue && this.menu.options && this.menu.options.some((opt) => opt.value === matchValue)) {
20752
+ this.setMenuValue(matchValue);
20741
20753
  this.syncValuesAndStates();
20742
20754
  }
20743
20755
 
@@ -21173,7 +21185,21 @@ class AuroCombobox extends AuroElement {
21173
21185
  this.optionActive = evt.detail;
21174
21186
 
21175
21187
  if (this.input) {
21176
- this.input.setActiveDescendant(this.optionActive);
21188
+ // Defer to after this optionActive assignment flushes through Lit:
21189
+ // the template binds `.a11yActivedescendant` on the trigger input,
21190
+ // which propagates to auro-input.updated() → setAttribute(
21191
+ // 'aria-activedescendant', id) on the internal <input>. That
21192
+ // setAttribute call clears the reflected ariaActiveDescendantElement
21193
+ // property, so setting the ref first (synchronously here) gets
21194
+ // clobbered. Awaiting updateComplete lets the attribute write finish
21195
+ // first; the element reference then sticks and screen readers can
21196
+ // cross the shadow-DOM boundary to the auro-menuoption in light DOM.
21197
+ const targetOption = this.optionActive;
21198
+ this.updateComplete.then(() => {
21199
+ if (this.input && this.optionActive === targetOption) {
21200
+ this.input.setActiveDescendant(targetOption);
21201
+ }
21202
+ });
21177
21203
  }
21178
21204
 
21179
21205
  // In fullscreen mode the menu sits inside a nested <dialog> shadow root,
@@ -21310,6 +21336,18 @@ class AuroCombobox extends AuroElement {
21310
21336
  }
21311
21337
  }
21312
21338
 
21339
+ // SPA preselect guard: on init render, auro-input's notifyValueChanged
21340
+ // echoes an empty value through as an isProgrammatic input event before
21341
+ // the framework-set combobox.value has propagated down to the input.
21342
+ // Without this bail, the `this.value = this.input.value` below clobbers
21343
+ // the framework value with '' and clear() wipes optionSelected. Scoped
21344
+ // to the exact shape of that echo (isProgrammatic + non-empty combobox
21345
+ // value + empty input.value) so it doesn't affect the swap/typed paths
21346
+ // where value/input already track each other through the sync helpers.
21347
+ if (event && event.isProgrammatic && this.value && !this.input.value) {
21348
+ return;
21349
+ }
21350
+
21313
21351
  this.value = this.input.value;
21314
21352
 
21315
21353
  // Ignore re-entrant input events caused by programmatic value sets.
@@ -21742,7 +21780,11 @@ class AuroCombobox extends AuroElement {
21742
21780
  }
21743
21781
  });
21744
21782
 
21745
- this.handleMenuOptions();
21783
+ // Slot change (mount/re-mount): pass `preferComboboxValue` so that a
21784
+ // framework-set `this.value` wins over any stale `input.value` when
21785
+ // matching against the newly-available options. Fixes the display
21786
+ // for SPA preselect and Svelte `{#key}` re-mount swap patterns.
21787
+ this.handleMenuOptions({ preferComboboxValue: true });
21746
21788
 
21747
21789
  break;
21748
21790
 
@@ -4879,7 +4879,7 @@ let AuroHelpText$2 = class AuroHelpText extends i$3 {
4879
4879
  }
4880
4880
  };
4881
4881
 
4882
- var formkitVersion$2 = '202607012103';
4882
+ var formkitVersion$2 = '202607020031';
4883
4883
 
4884
4884
  let AuroElement$2 = class AuroElement extends i$3 {
4885
4885
  static get properties() {
@@ -17768,14 +17768,17 @@ class BaseInput extends AuroElement$1 {
17768
17768
  * @returns {void}
17769
17769
  */
17770
17770
  notifyValueChanged() {
17771
- let inputEvent = null;
17772
-
17773
- inputEvent = new Event('input', {
17771
+ // This echoes Lit's reactive value update (and handleClickClear's
17772
+ // programmatic clear) — it is NOT a fresh user-input event. Mark it
17773
+ // `isProgrammatic` so consumers (e.g. auro-combobox) can distinguish
17774
+ // it from genuine user typing and skip clobbering their own
17775
+ // programmatic state during init-time renders.
17776
+ const inputEvent = new Event('input', {
17774
17777
  bubbles: true,
17775
17778
  composed: true,
17776
17779
  });
17780
+ inputEvent.isProgrammatic = true;
17777
17781
 
17778
- // Dispatched event to alert outside shadow DOM context of event firing.
17779
17782
  this.dispatchEvent(inputEvent);
17780
17783
  }
17781
17784
 
@@ -18488,7 +18491,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$3 {
18488
18491
  }
18489
18492
  };
18490
18493
 
18491
- var formkitVersion$1 = '202607012103';
18494
+ var formkitVersion$1 = '202607020031';
18492
18495
 
18493
18496
  // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
18494
18497
  // See LICENSE in the project root for license information.
@@ -18774,20 +18777,15 @@ class AuroInput extends BaseInput {
18774
18777
  * @returns {void}
18775
18778
  */
18776
18779
  checkDisplayValueSlotChange() {
18777
- let nodes = this.shadowRoot.querySelector('slot[name="displayValue"]').assignedNodes();
18778
-
18779
- // Handle when DisplayValue is multi-level slot content (e.g. combobox passing displayValue to input)
18780
- if (nodes && nodes[0] && nodes[0].tagName === 'SLOT') {
18781
- nodes = nodes[0].assignedNodes();
18782
- }
18783
-
18784
- let hasContent = false;
18785
-
18786
- if (nodes.length > 0) {
18787
- hasContent = true;
18788
- }
18780
+ // flatten:true resolves through auro-combobox's forwarding slot
18781
+ // (<slot name="displayValue" slot="displayValue">) so a clone appended
18782
+ // directly to auro-input's light DOM alongside the forwarder still
18783
+ // counts as content. The prior nodes[0].tagName === 'SLOT' recursion
18784
+ // discarded any siblings past the forwarder.
18785
+ const slot = this.shadowRoot.querySelector('slot[name="displayValue"]');
18786
+ const nodes = slot.assignedNodes({ flatten: true });
18789
18787
 
18790
- this.hasDisplayValueContent = hasContent;
18788
+ this.hasDisplayValueContent = nodes.length > 0;
18791
18789
  }
18792
18790
 
18793
18791
  firstUpdated() {
@@ -19614,7 +19612,7 @@ class AuroBibtemplate extends i$3 {
19614
19612
  }
19615
19613
  }
19616
19614
 
19617
- var formkitVersion = '202607012103';
19615
+ var formkitVersion = '202607020031';
19618
19616
 
19619
19617
  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}`;
19620
19618
 
@@ -20713,9 +20711,11 @@ class AuroCombobox extends AuroElement {
20713
20711
  /**
20714
20712
  * Processes hidden state of all menu options and determines if there are any available options not hidden.
20715
20713
  * @private
20714
+ * @param {object} [root0={}] - Optional flag bag.
20715
+ * @param {boolean} [root0.preferComboboxValue=false] - When true, a match on `this.value` wins the tie-break over `this.input.value` (used by handleSlotChange on mount / re-mount).
20716
20716
  * @returns {void}
20717
20717
  */
20718
- handleMenuOptions() {
20718
+ handleMenuOptions({ preferComboboxValue = false } = {}) {
20719
20719
  this.generateOptionsArray();
20720
20720
  this.availableOptions = [];
20721
20721
  // Single source of truth for the menu's filter/highlight token per call.
@@ -20736,8 +20736,20 @@ class AuroCombobox extends AuroElement {
20736
20736
  option.setAttribute('aria-posinset', index + 1);
20737
20737
  });
20738
20738
 
20739
- if (this.input.value && this.menu.options && this.menu.options.some((opt) => opt.value === this.input.value)) {
20740
- this.setMenuValue(this.input.value);
20739
+ // On mount/re-mount (via handleSlotChange), prefer the framework-set
20740
+ // `this.value` when it matches a menu option. Covers SPA preselect and
20741
+ // consumer swap patterns (e.g. Svelte `{#key}` re-mount) where
20742
+ // `this.value` is authoritative but `this.input.value` may be empty or
20743
+ // carry stale typed text from another field. Do NOT enable this in the
20744
+ // event-driven path — user clears would be undone by re-syncing to the
20745
+ // previous combobox.value.
20746
+ const valueMatches = preferComboboxValue &&
20747
+ this.value &&
20748
+ this.menu.options &&
20749
+ this.menu.options.some((opt) => opt.value === this.value);
20750
+ const matchValue = valueMatches ? this.value : this.input.value;
20751
+ if (matchValue && this.menu.options && this.menu.options.some((opt) => opt.value === matchValue)) {
20752
+ this.setMenuValue(matchValue);
20741
20753
  this.syncValuesAndStates();
20742
20754
  }
20743
20755
 
@@ -21173,7 +21185,21 @@ class AuroCombobox extends AuroElement {
21173
21185
  this.optionActive = evt.detail;
21174
21186
 
21175
21187
  if (this.input) {
21176
- this.input.setActiveDescendant(this.optionActive);
21188
+ // Defer to after this optionActive assignment flushes through Lit:
21189
+ // the template binds `.a11yActivedescendant` on the trigger input,
21190
+ // which propagates to auro-input.updated() → setAttribute(
21191
+ // 'aria-activedescendant', id) on the internal <input>. That
21192
+ // setAttribute call clears the reflected ariaActiveDescendantElement
21193
+ // property, so setting the ref first (synchronously here) gets
21194
+ // clobbered. Awaiting updateComplete lets the attribute write finish
21195
+ // first; the element reference then sticks and screen readers can
21196
+ // cross the shadow-DOM boundary to the auro-menuoption in light DOM.
21197
+ const targetOption = this.optionActive;
21198
+ this.updateComplete.then(() => {
21199
+ if (this.input && this.optionActive === targetOption) {
21200
+ this.input.setActiveDescendant(targetOption);
21201
+ }
21202
+ });
21177
21203
  }
21178
21204
 
21179
21205
  // In fullscreen mode the menu sits inside a nested <dialog> shadow root,
@@ -21310,6 +21336,18 @@ class AuroCombobox extends AuroElement {
21310
21336
  }
21311
21337
  }
21312
21338
 
21339
+ // SPA preselect guard: on init render, auro-input's notifyValueChanged
21340
+ // echoes an empty value through as an isProgrammatic input event before
21341
+ // the framework-set combobox.value has propagated down to the input.
21342
+ // Without this bail, the `this.value = this.input.value` below clobbers
21343
+ // the framework value with '' and clear() wipes optionSelected. Scoped
21344
+ // to the exact shape of that echo (isProgrammatic + non-empty combobox
21345
+ // value + empty input.value) so it doesn't affect the swap/typed paths
21346
+ // where value/input already track each other through the sync helpers.
21347
+ if (event && event.isProgrammatic && this.value && !this.input.value) {
21348
+ return;
21349
+ }
21350
+
21313
21351
  this.value = this.input.value;
21314
21352
 
21315
21353
  // Ignore re-entrant input events caused by programmatic value sets.
@@ -21742,7 +21780,11 @@ class AuroCombobox extends AuroElement {
21742
21780
  }
21743
21781
  });
21744
21782
 
21745
- this.handleMenuOptions();
21783
+ // Slot change (mount/re-mount): pass `preferComboboxValue` so that a
21784
+ // framework-set `this.value` wins over any stale `input.value` when
21785
+ // matching against the newly-available options. Fixes the display
21786
+ // for SPA preselect and Svelte `{#key}` re-mount swap patterns.
21787
+ this.handleMenuOptions({ preferComboboxValue: true });
21746
21788
 
21747
21789
  break;
21748
21790
 
@@ -4894,7 +4894,7 @@ let AuroHelpText$2 = class AuroHelpText extends i$3 {
4894
4894
  }
4895
4895
  };
4896
4896
 
4897
- var formkitVersion$2 = '202607012103';
4897
+ var formkitVersion$2 = '202607020031';
4898
4898
 
4899
4899
  let AuroElement$2 = class AuroElement extends i$3 {
4900
4900
  static get properties() {
@@ -17783,14 +17783,17 @@ class BaseInput extends AuroElement$1 {
17783
17783
  * @returns {void}
17784
17784
  */
17785
17785
  notifyValueChanged() {
17786
- let inputEvent = null;
17787
-
17788
- inputEvent = new Event('input', {
17786
+ // This echoes Lit's reactive value update (and handleClickClear's
17787
+ // programmatic clear) — it is NOT a fresh user-input event. Mark it
17788
+ // `isProgrammatic` so consumers (e.g. auro-combobox) can distinguish
17789
+ // it from genuine user typing and skip clobbering their own
17790
+ // programmatic state during init-time renders.
17791
+ const inputEvent = new Event('input', {
17789
17792
  bubbles: true,
17790
17793
  composed: true,
17791
17794
  });
17795
+ inputEvent.isProgrammatic = true;
17792
17796
 
17793
- // Dispatched event to alert outside shadow DOM context of event firing.
17794
17797
  this.dispatchEvent(inputEvent);
17795
17798
  }
17796
17799
 
@@ -18503,7 +18506,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$3 {
18503
18506
  }
18504
18507
  };
18505
18508
 
18506
- var formkitVersion$1 = '202607012103';
18509
+ var formkitVersion$1 = '202607020031';
18507
18510
 
18508
18511
  // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
18509
18512
  // See LICENSE in the project root for license information.
@@ -18789,20 +18792,15 @@ class AuroInput extends BaseInput {
18789
18792
  * @returns {void}
18790
18793
  */
18791
18794
  checkDisplayValueSlotChange() {
18792
- let nodes = this.shadowRoot.querySelector('slot[name="displayValue"]').assignedNodes();
18793
-
18794
- // Handle when DisplayValue is multi-level slot content (e.g. combobox passing displayValue to input)
18795
- if (nodes && nodes[0] && nodes[0].tagName === 'SLOT') {
18796
- nodes = nodes[0].assignedNodes();
18797
- }
18798
-
18799
- let hasContent = false;
18800
-
18801
- if (nodes.length > 0) {
18802
- hasContent = true;
18803
- }
18795
+ // flatten:true resolves through auro-combobox's forwarding slot
18796
+ // (<slot name="displayValue" slot="displayValue">) so a clone appended
18797
+ // directly to auro-input's light DOM alongside the forwarder still
18798
+ // counts as content. The prior nodes[0].tagName === 'SLOT' recursion
18799
+ // discarded any siblings past the forwarder.
18800
+ const slot = this.shadowRoot.querySelector('slot[name="displayValue"]');
18801
+ const nodes = slot.assignedNodes({ flatten: true });
18804
18802
 
18805
- this.hasDisplayValueContent = hasContent;
18803
+ this.hasDisplayValueContent = nodes.length > 0;
18806
18804
  }
18807
18805
 
18808
18806
  firstUpdated() {
@@ -19629,7 +19627,7 @@ class AuroBibtemplate extends i$3 {
19629
19627
  }
19630
19628
  }
19631
19629
 
19632
- var formkitVersion = '202607012103';
19630
+ var formkitVersion = '202607020031';
19633
19631
 
19634
19632
  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}`;
19635
19633
 
@@ -20728,9 +20726,11 @@ class AuroCombobox extends AuroElement {
20728
20726
  /**
20729
20727
  * Processes hidden state of all menu options and determines if there are any available options not hidden.
20730
20728
  * @private
20729
+ * @param {object} [root0={}] - Optional flag bag.
20730
+ * @param {boolean} [root0.preferComboboxValue=false] - When true, a match on `this.value` wins the tie-break over `this.input.value` (used by handleSlotChange on mount / re-mount).
20731
20731
  * @returns {void}
20732
20732
  */
20733
- handleMenuOptions() {
20733
+ handleMenuOptions({ preferComboboxValue = false } = {}) {
20734
20734
  this.generateOptionsArray();
20735
20735
  this.availableOptions = [];
20736
20736
  // Single source of truth for the menu's filter/highlight token per call.
@@ -20751,8 +20751,20 @@ class AuroCombobox extends AuroElement {
20751
20751
  option.setAttribute('aria-posinset', index + 1);
20752
20752
  });
20753
20753
 
20754
- if (this.input.value && this.menu.options && this.menu.options.some((opt) => opt.value === this.input.value)) {
20755
- this.setMenuValue(this.input.value);
20754
+ // On mount/re-mount (via handleSlotChange), prefer the framework-set
20755
+ // `this.value` when it matches a menu option. Covers SPA preselect and
20756
+ // consumer swap patterns (e.g. Svelte `{#key}` re-mount) where
20757
+ // `this.value` is authoritative but `this.input.value` may be empty or
20758
+ // carry stale typed text from another field. Do NOT enable this in the
20759
+ // event-driven path — user clears would be undone by re-syncing to the
20760
+ // previous combobox.value.
20761
+ const valueMatches = preferComboboxValue &&
20762
+ this.value &&
20763
+ this.menu.options &&
20764
+ this.menu.options.some((opt) => opt.value === this.value);
20765
+ const matchValue = valueMatches ? this.value : this.input.value;
20766
+ if (matchValue && this.menu.options && this.menu.options.some((opt) => opt.value === matchValue)) {
20767
+ this.setMenuValue(matchValue);
20756
20768
  this.syncValuesAndStates();
20757
20769
  }
20758
20770
 
@@ -21188,7 +21200,21 @@ class AuroCombobox extends AuroElement {
21188
21200
  this.optionActive = evt.detail;
21189
21201
 
21190
21202
  if (this.input) {
21191
- this.input.setActiveDescendant(this.optionActive);
21203
+ // Defer to after this optionActive assignment flushes through Lit:
21204
+ // the template binds `.a11yActivedescendant` on the trigger input,
21205
+ // which propagates to auro-input.updated() → setAttribute(
21206
+ // 'aria-activedescendant', id) on the internal <input>. That
21207
+ // setAttribute call clears the reflected ariaActiveDescendantElement
21208
+ // property, so setting the ref first (synchronously here) gets
21209
+ // clobbered. Awaiting updateComplete lets the attribute write finish
21210
+ // first; the element reference then sticks and screen readers can
21211
+ // cross the shadow-DOM boundary to the auro-menuoption in light DOM.
21212
+ const targetOption = this.optionActive;
21213
+ this.updateComplete.then(() => {
21214
+ if (this.input && this.optionActive === targetOption) {
21215
+ this.input.setActiveDescendant(targetOption);
21216
+ }
21217
+ });
21192
21218
  }
21193
21219
 
21194
21220
  // In fullscreen mode the menu sits inside a nested <dialog> shadow root,
@@ -21325,6 +21351,18 @@ class AuroCombobox extends AuroElement {
21325
21351
  }
21326
21352
  }
21327
21353
 
21354
+ // SPA preselect guard: on init render, auro-input's notifyValueChanged
21355
+ // echoes an empty value through as an isProgrammatic input event before
21356
+ // the framework-set combobox.value has propagated down to the input.
21357
+ // Without this bail, the `this.value = this.input.value` below clobbers
21358
+ // the framework value with '' and clear() wipes optionSelected. Scoped
21359
+ // to the exact shape of that echo (isProgrammatic + non-empty combobox
21360
+ // value + empty input.value) so it doesn't affect the swap/typed paths
21361
+ // where value/input already track each other through the sync helpers.
21362
+ if (event && event.isProgrammatic && this.value && !this.input.value) {
21363
+ return;
21364
+ }
21365
+
21328
21366
  this.value = this.input.value;
21329
21367
 
21330
21368
  // Ignore re-entrant input events caused by programmatic value sets.
@@ -21757,7 +21795,11 @@ class AuroCombobox extends AuroElement {
21757
21795
  }
21758
21796
  });
21759
21797
 
21760
- this.handleMenuOptions();
21798
+ // Slot change (mount/re-mount): pass `preferComboboxValue` so that a
21799
+ // framework-set `this.value` wins over any stale `input.value` when
21800
+ // matching against the newly-available options. Fixes the display
21801
+ // for SPA preselect and Svelte `{#key}` re-mount swap patterns.
21802
+ this.handleMenuOptions({ preferComboboxValue: true });
21761
21803
 
21762
21804
  break;
21763
21805
 
@@ -424,6 +424,8 @@ export class AuroCombobox extends AuroElement {
424
424
  /**
425
425
  * Processes hidden state of all menu options and determines if there are any available options not hidden.
426
426
  * @private
427
+ * @param {object} [root0={}] - Optional flag bag.
428
+ * @param {boolean} [root0.preferComboboxValue=false] - When true, a match on `this.value` wins the tie-break over `this.input.value` (used by handleSlotChange on mount / re-mount).
427
429
  * @returns {void}
428
430
  */
429
431
  private handleMenuOptions;