@aurodesignsystem-dev/auro-formkit 0.0.0-pr1554.1 → 0.0.0-pr1554.11

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 +121 -50
  7. package/components/combobox/demo/getting-started.min.js +121 -50
  8. package/components/combobox/demo/index.min.js +121 -50
  9. package/components/combobox/dist/index.js +121 -50
  10. package/components/combobox/dist/registered.js +121 -50
  11. package/components/counter/demo/customize.min.js +48 -7
  12. package/components/counter/demo/index.min.js +48 -7
  13. package/components/counter/dist/index.js +48 -7
  14. package/components/counter/dist/registered.js +48 -7
  15. package/components/datepicker/demo/customize.min.js +83 -23
  16. package/components/datepicker/demo/index.min.js +83 -23
  17. package/components/datepicker/dist/index.js +83 -23
  18. package/components/datepicker/dist/registered.js +83 -23
  19. package/components/dropdown/demo/customize.min.js +47 -6
  20. package/components/dropdown/demo/getting-started.min.js +47 -6
  21. package/components/dropdown/demo/index.min.js +47 -6
  22. package/components/dropdown/dist/auro-dropdown.d.ts +8 -1
  23. package/components/dropdown/dist/index.js +47 -6
  24. package/components/dropdown/dist/registered.js +47 -6
  25. package/components/form/demo/customize.min.js +337 -105
  26. package/components/form/demo/getting-started.min.js +337 -105
  27. package/components/form/demo/index.min.js +337 -105
  28. package/components/form/demo/registerDemoDeps.min.js +337 -105
  29. package/components/input/demo/customize.min.js +35 -16
  30. package/components/input/demo/getting-started.min.js +35 -16
  31. package/components/input/demo/index.min.js +35 -16
  32. package/components/input/dist/index.js +35 -16
  33. package/components/input/dist/registered.js +35 -16
  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 +48 -7
  40. package/components/select/demo/getting-started.min.js +48 -7
  41. package/components/select/demo/index.min.js +48 -7
  42. package/components/select/dist/index.js +48 -7
  43. package/components/select/dist/registered.js +48 -7
  44. package/custom-elements.json +6 -0
  45. package/package.json +1 -1
@@ -4904,7 +4904,7 @@ let AuroHelpText$2 = class AuroHelpText extends LitElement {
4904
4904
  }
4905
4905
  };
4906
4906
 
4907
- var formkitVersion$2 = '202607152206';
4907
+ var formkitVersion$2 = '202607160709';
4908
4908
 
4909
4909
  let AuroElement$2 = class AuroElement extends LitElement {
4910
4910
  static get properties() {
@@ -5033,7 +5033,6 @@ class AuroDropdown extends AuroElement$2 {
5033
5033
  static get shadowRootOptions() {
5034
5034
  return {
5035
5035
  ...AuroElement$2.shadowRootOptions,
5036
- delegatesFocus: true,
5037
5036
  };
5038
5037
  }
5039
5038
 
@@ -5200,7 +5199,47 @@ class AuroDropdown extends AuroElement$2 {
5200
5199
  focusables[0].focus();
5201
5200
  }
5202
5201
  } else {
5202
+ this.focusTrigger();
5203
+ }
5204
+ }
5205
+
5206
+ /**
5207
+ * Focus the trigger content. When the trigger wrapper itself is focusable
5208
+ * (has tabindex), focus it directly. Otherwise, focus the first focusable
5209
+ * element slotted into the trigger slot (e.g. the auro-input).
5210
+ * @private
5211
+ */
5212
+ focusTrigger() {
5213
+ if (this.trigger.hasAttribute('tabindex')) {
5203
5214
  this.trigger.focus();
5215
+ } else {
5216
+ // Slotted content isn't a DOM child of the trigger div, so
5217
+ // getFocusableElements can't find it. Query assigned nodes directly.
5218
+ const slot = this.trigger.querySelector('slot[name="trigger"]');
5219
+ if (slot) {
5220
+ const assigned = slot.assignedElements();
5221
+ for (const el of assigned) {
5222
+ if (el.hasAttribute('disabled')) {
5223
+ continue;
5224
+ }
5225
+ // Try finding a focusable descendant first (handles non-focusable
5226
+ // wrappers like <div> containing a <button>). If none found, try
5227
+ // focusing the element directly (works for custom elements like
5228
+ // auro-input that have delegatesFocus or a custom focus() method).
5229
+ const descendants = getFocusableElements(el);
5230
+ if (descendants.length > 0) {
5231
+ descendants[0].focus();
5232
+ return;
5233
+ }
5234
+ el.focus();
5235
+ return;
5236
+ }
5237
+ }
5238
+ // Fallback: try DOM children (non-slotted content)
5239
+ const focusables = getFocusableElements(this.trigger);
5240
+ if (focusables.length > 0) {
5241
+ focusables[0].focus();
5242
+ }
5204
5243
  }
5205
5244
  }
5206
5245
 
@@ -5653,15 +5692,17 @@ class AuroDropdown extends AuroElement$2 {
5653
5692
  }
5654
5693
 
5655
5694
  const eventType = event.detail.eventType || "unknown";
5656
- if (!this.isPopoverVisible && this.hasFocus && eventType === "keydown") {
5657
- this.trigger.focus();
5695
+ if (!this.isPopoverVisible && this.hasFocus && eventType === "keydown" && !this.noHideOnThisFocusLoss) {
5696
+ this.focusTrigger();
5658
5697
  }
5659
5698
 
5660
5699
 
5661
5700
  // On Tab-driven close (eventType "focusloss"), let focus advance naturally
5662
5701
  // — restoring to the trigger would trap the user on this dropdown, forcing
5663
5702
  // an extra Tab to move on. Escape and outside-click still restore.
5664
- if (!this.isPopoverVisible && eventType !== "focusloss") {
5703
+ // When noHideOnThisFocusLoss is true, the consumer (e.g. combobox) manages
5704
+ // its own focus restoration — skip the generic trigger focus to avoid races.
5705
+ if (!this.isPopoverVisible && eventType !== "focusloss" && !this.noHideOnThisFocusLoss) {
5665
5706
  // wait til the bib gets fully closed and rendered
5666
5707
  setTimeout(() => {
5667
5708
  // Skip if the bib re-opened, or if focus moved intentionally outside the dropdown (not to body).
@@ -5673,7 +5714,7 @@ class AuroDropdown extends AuroElement$2 {
5673
5714
  return;
5674
5715
  }
5675
5716
  // Restore focus to the trigger.
5676
- this.trigger.focus();
5717
+ this.focusTrigger();
5677
5718
  });
5678
5719
  }
5679
5720
  }
@@ -16847,9 +16888,10 @@ class DomHandler {
16847
16888
  class BaseInput extends AuroElement$1 {
16848
16889
 
16849
16890
  // Delegate focus to the native <input> inside the shadow root so that
16850
- // showModal()'s dialog focusing steps reach the input element.
16851
- // This keeps the mobile virtual keyboard open when the fullscreen dialog
16852
- // opens, because the browser sees an input-to-input focus transfer.
16891
+ // clicking anywhere on the input wrapper focuses the native input, and
16892
+ // programmatic .focus() calls on elements in the shadow DOM work correctly.
16893
+ // The initial-load focus theft was caused by the static `autofocus`
16894
+ // attribute on the bib input (now conditional), not by delegatesFocus.
16853
16895
  static get shadowRootOptions() {
16854
16896
  return {
16855
16897
  ...AuroElement$1.shadowRootOptions,
@@ -18526,7 +18568,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
18526
18568
  }
18527
18569
  };
18528
18570
 
18529
- var formkitVersion$1 = '202607152206';
18571
+ var formkitVersion$1 = '202607160709';
18530
18572
 
18531
18573
  // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
18532
18574
  // See LICENSE in the project root for license information.
@@ -18812,24 +18854,42 @@ class AuroInput extends BaseInput {
18812
18854
  * @returns {void}
18813
18855
  */
18814
18856
  checkDisplayValueSlotChange() {
18815
- // flatten:true resolves through auro-combobox's forwarding slot
18816
- // (<slot name="displayValue" slot="displayValue">) so a clone appended
18817
- // directly to auro-input's light DOM alongside the forwarder still
18818
- // counts as content. The prior nodes[0].tagName === 'SLOT' recursion
18819
- // discarded any siblings past the forwarder.
18820
18857
  const slot = this.shadowRoot?.querySelector('slot[name="displayValue"]');
18821
18858
  if (!slot) {
18822
- // Shadow root not yet rendered — fall back to checking light-DOM
18823
- // children so hasDisplayValueContent isn't stuck false after an
18824
- // early call from auro-combobox during mount.
18825
- this.hasDisplayValueContent = Boolean(
18826
- this.querySelector('[slot="displayValue"]:not(slot)')
18827
- );
18859
+ // Shadow slot not yet rendered — fall back to checking light-DOM
18860
+ // children so hasDisplayValueContent isn't stuck false when called
18861
+ // before firstUpdated (e.g. from auro-combobox during mount).
18862
+ // Check for any element (including custom elements like <auro-icon>
18863
+ // that render via shadow DOM with no text content).
18864
+ const lightDomContent = this.querySelector('[slot="displayValue"]:not(slot)');
18865
+ this.hasDisplayValueContent = Boolean(lightDomContent && (
18866
+ lightDomContent.textContent.trim().length > 0 ||
18867
+ lightDomContent.children.length > 0 ||
18868
+ lightDomContent.shadowRoot !== null
18869
+ ));
18828
18870
  return;
18829
18871
  }
18830
18872
  const nodes = slot.assignedNodes({ flatten: true });
18831
18873
 
18832
- this.hasDisplayValueContent = nodes.length > 0;
18874
+ // Check for actual visible content, not just node existence.
18875
+ // An empty <span slot="displayValue"></span> forwarded from the
18876
+ // consumer should not be treated as "has content" — it causes the
18877
+ // displayValue wrapper to render (with hasContent class) but show
18878
+ // nothing, blocking the combobox's synthetic displayValue from
18879
+ // being visible on preset/deeplink load.
18880
+ // Custom elements (e.g. <auro-icon>) that render via shadow DOM are
18881
+ // treated as content even when they have no text or light-DOM children.
18882
+ this.hasDisplayValueContent = nodes.some((node) => {
18883
+ if (node.nodeType === Node.TEXT_NODE) {
18884
+ return node.textContent.trim().length > 0;
18885
+ }
18886
+ if (node.nodeType === Node.ELEMENT_NODE) {
18887
+ return node.textContent.trim().length > 0 ||
18888
+ node.children.length > 0 ||
18889
+ node.shadowRoot !== null;
18890
+ }
18891
+ return false;
18892
+ });
18833
18893
  }
18834
18894
 
18835
18895
  firstUpdated() {
@@ -19656,7 +19716,7 @@ class AuroBibtemplate extends LitElement {
19656
19716
  }
19657
19717
  }
19658
19718
 
19659
- var formkitVersion = '202607152206';
19719
+ var formkitVersion = '202607160709';
19660
19720
 
19661
19721
  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}`;
19662
19722
 
@@ -20708,6 +20768,14 @@ class AuroCombobox extends AuroElement {
20708
20768
  // auroMenu-selectedOption event hasn't fired yet, or we're on remount
20709
20769
  // with no options loaded). Synthesize a displayValue from the value so
20710
20770
  // the overlay isn't blank.
20771
+ //
20772
+ // NOTE: This renders the raw machine value (e.g. "SEA"), not the
20773
+ // human-readable label (e.g. "Seattle, WA"). For consumers where
20774
+ // value ≠ label, this produces a brief flash of the raw value until
20775
+ // the option elements load and updateTriggerTextDisplay re-runs with
20776
+ // the correct label. This is intentionally preferred over a blank
20777
+ // state — the displayValueInTrigger.remove() cleanup above ensures
20778
+ // this placeholder is replaced once the real option is available.
20711
20779
  const syntheticDV = document.createElement('span');
20712
20780
  syntheticDV.setAttribute('slot', 'displayValue');
20713
20781
  syntheticDV.textContent = this.value;
@@ -20960,7 +21028,11 @@ class AuroCombobox extends AuroElement {
20960
21028
  // after the dropdown layout settles.
20961
21029
 
20962
21030
  doubleRaf(() => {
20963
- this.setInputFocus();
21031
+ // Guard: skip if the dropdown closed before this rAF fired
21032
+ // (e.g. user selected an option immediately after the bib opened).
21033
+ if (this.dropdownOpen) {
21034
+ this.setInputFocus();
21035
+ }
20964
21036
  if (this._inFullscreenTransition) {
20965
21037
  this._inFullscreenTransition = false;
20966
21038
  }
@@ -21007,7 +21079,9 @@ class AuroCombobox extends AuroElement {
21007
21079
  }
21008
21080
 
21009
21081
  this._scheduleTimer(() => {
21010
- this.setInputFocus();
21082
+ if (this.dropdown.isPopoverVisible) {
21083
+ this.setInputFocus();
21084
+ }
21011
21085
  }, 0);
21012
21086
  });
21013
21087
  }
@@ -21016,14 +21090,19 @@ class AuroCombobox extends AuroElement {
21016
21090
  * @private
21017
21091
  */
21018
21092
  setClearBtnFocus() {
21019
- const clearBtn = this.input.shadowRoot.querySelector('.clearBtn');
21020
- if (clearBtn) {
21021
- // Wait for the element to fully render across
21022
- // multiple Lit update cycles before moving focus
21023
- doubleRaf(() => {
21093
+ doubleRaf(() => {
21094
+ // First establish focus inside the input's shadow root.
21095
+ // Without this, clearBtn.focus() silently fails when focus is on
21096
+ // document.body (e.g. after a click selection closes the bib dialog).
21097
+ // delegatesFocus on BaseInput routes this to the native <input>.
21098
+ this.input.focus();
21099
+
21100
+ // Now move focus to the clear button within the same shadow root.
21101
+ const clearBtn = this.input.shadowRoot.querySelector('.clearBtn');
21102
+ if (clearBtn) {
21024
21103
  clearBtn.focus();
21025
- });
21026
- }
21104
+ }
21105
+ });
21027
21106
  }
21028
21107
 
21029
21108
  /**
@@ -21234,6 +21313,9 @@ class AuroCombobox extends AuroElement {
21234
21313
  // only — fresh user selections take the existing hideBib path.
21235
21314
  if (isEcho && this.menu.optionSelected) {
21236
21315
  this._programmaticFilterRefresh = true;
21316
+ this.updateComplete.then(() => {
21317
+ this._programmaticFilterRefresh = false;
21318
+ });
21237
21319
  }
21238
21320
  });
21239
21321
 
@@ -21464,15 +21546,6 @@ class AuroCombobox extends AuroElement {
21464
21546
  * @returns {void}
21465
21547
  */
21466
21548
  handleTriggerInputValueChange(event) {
21467
- // Clear a stale _programmaticFilterRefresh when the user is genuinely
21468
- // interacting. On mount, updated('value') sets the flag, but the early
21469
- // return at `this.value === this.input.value` exits before clearing it.
21470
- // Without this, the first keystroke after mount fails to set _userTyped
21471
- // and the bib doesn't open.
21472
- if (this._programmaticFilterRefresh && this.componentHasFocus) {
21473
- this._programmaticFilterRefresh = false;
21474
- }
21475
-
21476
21549
  // 'input' fires for every user-initiated value change — typing, paste,
21477
21550
  // IME composition end, dead-key composition, drag-drop. Flip _userTyped
21478
21551
  // here so updated('availableOptions') auto-opens the bib for sources
@@ -21495,10 +21568,6 @@ class AuroCombobox extends AuroElement {
21495
21568
  if (this.dropdown.isBibFullscreen && this.input.value && this.input.value.length > 0 && this.dropdown.isPopoverVisible) {
21496
21569
  this.setInputFocus();
21497
21570
  }
21498
-
21499
- if (this._programmaticFilterRefresh) {
21500
- this._programmaticFilterRefresh = false;
21501
- }
21502
21571
  }
21503
21572
 
21504
21573
  /**
@@ -21697,6 +21766,12 @@ class AuroCombobox extends AuroElement {
21697
21766
  // setting the flag unconditionally here masks the user-typed open path.
21698
21767
  if (!this._userTyped) {
21699
21768
  this._programmaticFilterRefresh = true;
21769
+ // Self-clear after this update cycle completes. This collapses
21770
+ // the previous scattered clear-points into one and prevents the
21771
+ // flag from surviving into the next user interaction.
21772
+ this.updateComplete.then(() => {
21773
+ this._programmaticFilterRefresh = false;
21774
+ });
21700
21775
  }
21701
21776
 
21702
21777
  if (this.input.value !== this.value) {
@@ -21786,10 +21861,6 @@ class AuroCombobox extends AuroElement {
21786
21861
  } else if (!this.dropdown.isBibFullscreen) {
21787
21862
  this.hideBib();
21788
21863
  }
21789
-
21790
- if (this._programmaticFilterRefresh) {
21791
- this._programmaticFilterRefresh = false;
21792
- }
21793
21864
  }
21794
21865
 
21795
21866
  if (changedProperties.has('error')) {
@@ -21971,7 +22042,7 @@ class AuroCombobox extends AuroElement {
21971
22042
  <slot @slotchange="${this.handleSlotChange}"></slot>
21972
22043
  <${this.inputTag}
21973
22044
  id="inputInBib"
21974
- autofocus
22045
+ ?autofocus="${this.dropdownOpen && this.dropdown?.isBibFullscreen}"
21975
22046
  @input="${this.handleInputValueChange}"
21976
22047
  .a11yActivedescendant="${this.dropdownOpen && this.optionActive ? this.optionActive.id : undefined}"
21977
22048
  .a11yControls=${`${this.dropdownId}-floater-bib`}
@@ -4904,7 +4904,7 @@ let AuroHelpText$2 = class AuroHelpText extends LitElement {
4904
4904
  }
4905
4905
  };
4906
4906
 
4907
- var formkitVersion$2 = '202607152206';
4907
+ var formkitVersion$2 = '202607160709';
4908
4908
 
4909
4909
  let AuroElement$2 = class AuroElement extends LitElement {
4910
4910
  static get properties() {
@@ -5033,7 +5033,6 @@ class AuroDropdown extends AuroElement$2 {
5033
5033
  static get shadowRootOptions() {
5034
5034
  return {
5035
5035
  ...AuroElement$2.shadowRootOptions,
5036
- delegatesFocus: true,
5037
5036
  };
5038
5037
  }
5039
5038
 
@@ -5200,7 +5199,47 @@ class AuroDropdown extends AuroElement$2 {
5200
5199
  focusables[0].focus();
5201
5200
  }
5202
5201
  } else {
5202
+ this.focusTrigger();
5203
+ }
5204
+ }
5205
+
5206
+ /**
5207
+ * Focus the trigger content. When the trigger wrapper itself is focusable
5208
+ * (has tabindex), focus it directly. Otherwise, focus the first focusable
5209
+ * element slotted into the trigger slot (e.g. the auro-input).
5210
+ * @private
5211
+ */
5212
+ focusTrigger() {
5213
+ if (this.trigger.hasAttribute('tabindex')) {
5203
5214
  this.trigger.focus();
5215
+ } else {
5216
+ // Slotted content isn't a DOM child of the trigger div, so
5217
+ // getFocusableElements can't find it. Query assigned nodes directly.
5218
+ const slot = this.trigger.querySelector('slot[name="trigger"]');
5219
+ if (slot) {
5220
+ const assigned = slot.assignedElements();
5221
+ for (const el of assigned) {
5222
+ if (el.hasAttribute('disabled')) {
5223
+ continue;
5224
+ }
5225
+ // Try finding a focusable descendant first (handles non-focusable
5226
+ // wrappers like <div> containing a <button>). If none found, try
5227
+ // focusing the element directly (works for custom elements like
5228
+ // auro-input that have delegatesFocus or a custom focus() method).
5229
+ const descendants = getFocusableElements(el);
5230
+ if (descendants.length > 0) {
5231
+ descendants[0].focus();
5232
+ return;
5233
+ }
5234
+ el.focus();
5235
+ return;
5236
+ }
5237
+ }
5238
+ // Fallback: try DOM children (non-slotted content)
5239
+ const focusables = getFocusableElements(this.trigger);
5240
+ if (focusables.length > 0) {
5241
+ focusables[0].focus();
5242
+ }
5204
5243
  }
5205
5244
  }
5206
5245
 
@@ -5653,15 +5692,17 @@ class AuroDropdown extends AuroElement$2 {
5653
5692
  }
5654
5693
 
5655
5694
  const eventType = event.detail.eventType || "unknown";
5656
- if (!this.isPopoverVisible && this.hasFocus && eventType === "keydown") {
5657
- this.trigger.focus();
5695
+ if (!this.isPopoverVisible && this.hasFocus && eventType === "keydown" && !this.noHideOnThisFocusLoss) {
5696
+ this.focusTrigger();
5658
5697
  }
5659
5698
 
5660
5699
 
5661
5700
  // On Tab-driven close (eventType "focusloss"), let focus advance naturally
5662
5701
  // — restoring to the trigger would trap the user on this dropdown, forcing
5663
5702
  // an extra Tab to move on. Escape and outside-click still restore.
5664
- if (!this.isPopoverVisible && eventType !== "focusloss") {
5703
+ // When noHideOnThisFocusLoss is true, the consumer (e.g. combobox) manages
5704
+ // its own focus restoration — skip the generic trigger focus to avoid races.
5705
+ if (!this.isPopoverVisible && eventType !== "focusloss" && !this.noHideOnThisFocusLoss) {
5665
5706
  // wait til the bib gets fully closed and rendered
5666
5707
  setTimeout(() => {
5667
5708
  // Skip if the bib re-opened, or if focus moved intentionally outside the dropdown (not to body).
@@ -5673,7 +5714,7 @@ class AuroDropdown extends AuroElement$2 {
5673
5714
  return;
5674
5715
  }
5675
5716
  // Restore focus to the trigger.
5676
- this.trigger.focus();
5717
+ this.focusTrigger();
5677
5718
  });
5678
5719
  }
5679
5720
  }
@@ -16847,9 +16888,10 @@ class DomHandler {
16847
16888
  class BaseInput extends AuroElement$1 {
16848
16889
 
16849
16890
  // Delegate focus to the native <input> inside the shadow root so that
16850
- // showModal()'s dialog focusing steps reach the input element.
16851
- // This keeps the mobile virtual keyboard open when the fullscreen dialog
16852
- // opens, because the browser sees an input-to-input focus transfer.
16891
+ // clicking anywhere on the input wrapper focuses the native input, and
16892
+ // programmatic .focus() calls on elements in the shadow DOM work correctly.
16893
+ // The initial-load focus theft was caused by the static `autofocus`
16894
+ // attribute on the bib input (now conditional), not by delegatesFocus.
16853
16895
  static get shadowRootOptions() {
16854
16896
  return {
16855
16897
  ...AuroElement$1.shadowRootOptions,
@@ -18526,7 +18568,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
18526
18568
  }
18527
18569
  };
18528
18570
 
18529
- var formkitVersion$1 = '202607152206';
18571
+ var formkitVersion$1 = '202607160709';
18530
18572
 
18531
18573
  // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
18532
18574
  // See LICENSE in the project root for license information.
@@ -18812,24 +18854,42 @@ class AuroInput extends BaseInput {
18812
18854
  * @returns {void}
18813
18855
  */
18814
18856
  checkDisplayValueSlotChange() {
18815
- // flatten:true resolves through auro-combobox's forwarding slot
18816
- // (<slot name="displayValue" slot="displayValue">) so a clone appended
18817
- // directly to auro-input's light DOM alongside the forwarder still
18818
- // counts as content. The prior nodes[0].tagName === 'SLOT' recursion
18819
- // discarded any siblings past the forwarder.
18820
18857
  const slot = this.shadowRoot?.querySelector('slot[name="displayValue"]');
18821
18858
  if (!slot) {
18822
- // Shadow root not yet rendered — fall back to checking light-DOM
18823
- // children so hasDisplayValueContent isn't stuck false after an
18824
- // early call from auro-combobox during mount.
18825
- this.hasDisplayValueContent = Boolean(
18826
- this.querySelector('[slot="displayValue"]:not(slot)')
18827
- );
18859
+ // Shadow slot not yet rendered — fall back to checking light-DOM
18860
+ // children so hasDisplayValueContent isn't stuck false when called
18861
+ // before firstUpdated (e.g. from auro-combobox during mount).
18862
+ // Check for any element (including custom elements like <auro-icon>
18863
+ // that render via shadow DOM with no text content).
18864
+ const lightDomContent = this.querySelector('[slot="displayValue"]:not(slot)');
18865
+ this.hasDisplayValueContent = Boolean(lightDomContent && (
18866
+ lightDomContent.textContent.trim().length > 0 ||
18867
+ lightDomContent.children.length > 0 ||
18868
+ lightDomContent.shadowRoot !== null
18869
+ ));
18828
18870
  return;
18829
18871
  }
18830
18872
  const nodes = slot.assignedNodes({ flatten: true });
18831
18873
 
18832
- this.hasDisplayValueContent = nodes.length > 0;
18874
+ // Check for actual visible content, not just node existence.
18875
+ // An empty <span slot="displayValue"></span> forwarded from the
18876
+ // consumer should not be treated as "has content" — it causes the
18877
+ // displayValue wrapper to render (with hasContent class) but show
18878
+ // nothing, blocking the combobox's synthetic displayValue from
18879
+ // being visible on preset/deeplink load.
18880
+ // Custom elements (e.g. <auro-icon>) that render via shadow DOM are
18881
+ // treated as content even when they have no text or light-DOM children.
18882
+ this.hasDisplayValueContent = nodes.some((node) => {
18883
+ if (node.nodeType === Node.TEXT_NODE) {
18884
+ return node.textContent.trim().length > 0;
18885
+ }
18886
+ if (node.nodeType === Node.ELEMENT_NODE) {
18887
+ return node.textContent.trim().length > 0 ||
18888
+ node.children.length > 0 ||
18889
+ node.shadowRoot !== null;
18890
+ }
18891
+ return false;
18892
+ });
18833
18893
  }
18834
18894
 
18835
18895
  firstUpdated() {
@@ -19656,7 +19716,7 @@ class AuroBibtemplate extends LitElement {
19656
19716
  }
19657
19717
  }
19658
19718
 
19659
- var formkitVersion = '202607152206';
19719
+ var formkitVersion = '202607160709';
19660
19720
 
19661
19721
  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}`;
19662
19722
 
@@ -20708,6 +20768,14 @@ class AuroCombobox extends AuroElement {
20708
20768
  // auroMenu-selectedOption event hasn't fired yet, or we're on remount
20709
20769
  // with no options loaded). Synthesize a displayValue from the value so
20710
20770
  // the overlay isn't blank.
20771
+ //
20772
+ // NOTE: This renders the raw machine value (e.g. "SEA"), not the
20773
+ // human-readable label (e.g. "Seattle, WA"). For consumers where
20774
+ // value ≠ label, this produces a brief flash of the raw value until
20775
+ // the option elements load and updateTriggerTextDisplay re-runs with
20776
+ // the correct label. This is intentionally preferred over a blank
20777
+ // state — the displayValueInTrigger.remove() cleanup above ensures
20778
+ // this placeholder is replaced once the real option is available.
20711
20779
  const syntheticDV = document.createElement('span');
20712
20780
  syntheticDV.setAttribute('slot', 'displayValue');
20713
20781
  syntheticDV.textContent = this.value;
@@ -20960,7 +21028,11 @@ class AuroCombobox extends AuroElement {
20960
21028
  // after the dropdown layout settles.
20961
21029
 
20962
21030
  doubleRaf(() => {
20963
- this.setInputFocus();
21031
+ // Guard: skip if the dropdown closed before this rAF fired
21032
+ // (e.g. user selected an option immediately after the bib opened).
21033
+ if (this.dropdownOpen) {
21034
+ this.setInputFocus();
21035
+ }
20964
21036
  if (this._inFullscreenTransition) {
20965
21037
  this._inFullscreenTransition = false;
20966
21038
  }
@@ -21007,7 +21079,9 @@ class AuroCombobox extends AuroElement {
21007
21079
  }
21008
21080
 
21009
21081
  this._scheduleTimer(() => {
21010
- this.setInputFocus();
21082
+ if (this.dropdown.isPopoverVisible) {
21083
+ this.setInputFocus();
21084
+ }
21011
21085
  }, 0);
21012
21086
  });
21013
21087
  }
@@ -21016,14 +21090,19 @@ class AuroCombobox extends AuroElement {
21016
21090
  * @private
21017
21091
  */
21018
21092
  setClearBtnFocus() {
21019
- const clearBtn = this.input.shadowRoot.querySelector('.clearBtn');
21020
- if (clearBtn) {
21021
- // Wait for the element to fully render across
21022
- // multiple Lit update cycles before moving focus
21023
- doubleRaf(() => {
21093
+ doubleRaf(() => {
21094
+ // First establish focus inside the input's shadow root.
21095
+ // Without this, clearBtn.focus() silently fails when focus is on
21096
+ // document.body (e.g. after a click selection closes the bib dialog).
21097
+ // delegatesFocus on BaseInput routes this to the native <input>.
21098
+ this.input.focus();
21099
+
21100
+ // Now move focus to the clear button within the same shadow root.
21101
+ const clearBtn = this.input.shadowRoot.querySelector('.clearBtn');
21102
+ if (clearBtn) {
21024
21103
  clearBtn.focus();
21025
- });
21026
- }
21104
+ }
21105
+ });
21027
21106
  }
21028
21107
 
21029
21108
  /**
@@ -21234,6 +21313,9 @@ class AuroCombobox extends AuroElement {
21234
21313
  // only — fresh user selections take the existing hideBib path.
21235
21314
  if (isEcho && this.menu.optionSelected) {
21236
21315
  this._programmaticFilterRefresh = true;
21316
+ this.updateComplete.then(() => {
21317
+ this._programmaticFilterRefresh = false;
21318
+ });
21237
21319
  }
21238
21320
  });
21239
21321
 
@@ -21464,15 +21546,6 @@ class AuroCombobox extends AuroElement {
21464
21546
  * @returns {void}
21465
21547
  */
21466
21548
  handleTriggerInputValueChange(event) {
21467
- // Clear a stale _programmaticFilterRefresh when the user is genuinely
21468
- // interacting. On mount, updated('value') sets the flag, but the early
21469
- // return at `this.value === this.input.value` exits before clearing it.
21470
- // Without this, the first keystroke after mount fails to set _userTyped
21471
- // and the bib doesn't open.
21472
- if (this._programmaticFilterRefresh && this.componentHasFocus) {
21473
- this._programmaticFilterRefresh = false;
21474
- }
21475
-
21476
21549
  // 'input' fires for every user-initiated value change — typing, paste,
21477
21550
  // IME composition end, dead-key composition, drag-drop. Flip _userTyped
21478
21551
  // here so updated('availableOptions') auto-opens the bib for sources
@@ -21495,10 +21568,6 @@ class AuroCombobox extends AuroElement {
21495
21568
  if (this.dropdown.isBibFullscreen && this.input.value && this.input.value.length > 0 && this.dropdown.isPopoverVisible) {
21496
21569
  this.setInputFocus();
21497
21570
  }
21498
-
21499
- if (this._programmaticFilterRefresh) {
21500
- this._programmaticFilterRefresh = false;
21501
- }
21502
21571
  }
21503
21572
 
21504
21573
  /**
@@ -21697,6 +21766,12 @@ class AuroCombobox extends AuroElement {
21697
21766
  // setting the flag unconditionally here masks the user-typed open path.
21698
21767
  if (!this._userTyped) {
21699
21768
  this._programmaticFilterRefresh = true;
21769
+ // Self-clear after this update cycle completes. This collapses
21770
+ // the previous scattered clear-points into one and prevents the
21771
+ // flag from surviving into the next user interaction.
21772
+ this.updateComplete.then(() => {
21773
+ this._programmaticFilterRefresh = false;
21774
+ });
21700
21775
  }
21701
21776
 
21702
21777
  if (this.input.value !== this.value) {
@@ -21786,10 +21861,6 @@ class AuroCombobox extends AuroElement {
21786
21861
  } else if (!this.dropdown.isBibFullscreen) {
21787
21862
  this.hideBib();
21788
21863
  }
21789
-
21790
- if (this._programmaticFilterRefresh) {
21791
- this._programmaticFilterRefresh = false;
21792
- }
21793
21864
  }
21794
21865
 
21795
21866
  if (changedProperties.has('error')) {
@@ -21971,7 +22042,7 @@ class AuroCombobox extends AuroElement {
21971
22042
  <slot @slotchange="${this.handleSlotChange}"></slot>
21972
22043
  <${this.inputTag}
21973
22044
  id="inputInBib"
21974
- autofocus
22045
+ ?autofocus="${this.dropdownOpen && this.dropdown?.isBibFullscreen}"
21975
22046
  @input="${this.handleInputValueChange}"
21976
22047
  .a11yActivedescendant="${this.dropdownOpen && this.optionActive ? this.optionActive.id : undefined}"
21977
22048
  .a11yControls=${`${this.dropdownId}-floater-bib`}