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

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 +123 -49
  7. package/components/combobox/demo/getting-started.min.js +123 -49
  8. package/components/combobox/demo/index.min.js +123 -49
  9. package/components/combobox/dist/index.js +123 -49
  10. package/components/combobox/dist/registered.js +123 -49
  11. package/components/counter/demo/customize.min.js +47 -6
  12. package/components/counter/demo/index.min.js +47 -6
  13. package/components/counter/dist/index.js +47 -6
  14. package/components/counter/dist/registered.js +47 -6
  15. package/components/datepicker/demo/customize.min.js +85 -22
  16. package/components/datepicker/demo/index.min.js +85 -22
  17. package/components/datepicker/dist/index.js +85 -22
  18. package/components/datepicker/dist/registered.js +85 -22
  19. package/components/dropdown/demo/customize.min.js +46 -5
  20. package/components/dropdown/demo/getting-started.min.js +46 -5
  21. package/components/dropdown/demo/index.min.js +46 -5
  22. package/components/dropdown/dist/auro-dropdown.d.ts +8 -1
  23. package/components/dropdown/dist/index.js +46 -5
  24. package/components/dropdown/dist/registered.js +46 -5
  25. package/components/form/demo/customize.min.js +342 -101
  26. package/components/form/demo/getting-started.min.js +342 -101
  27. package/components/form/demo/index.min.js +342 -101
  28. package/components/form/demo/registerDemoDeps.min.js +342 -101
  29. package/components/input/demo/customize.min.js +38 -16
  30. package/components/input/demo/getting-started.min.js +38 -16
  31. package/components/input/demo/index.min.js +38 -16
  32. package/components/input/dist/index.js +38 -16
  33. package/components/input/dist/registered.js +38 -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 +47 -6
  40. package/components/select/demo/getting-started.min.js +47 -6
  41. package/components/select/demo/index.min.js +47 -6
  42. package/components/select/dist/index.js +47 -6
  43. package/components/select/dist/registered.js +47 -6
  44. package/custom-elements.json +1529 -1523
  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 = '202607160655';
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
 
@@ -5654,14 +5693,16 @@ class AuroDropdown extends AuroElement$2 {
5654
5693
 
5655
5694
  const eventType = event.detail.eventType || "unknown";
5656
5695
  if (!this.isPopoverVisible && this.hasFocus && eventType === "keydown") {
5657
- this.trigger.focus();
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 = '202607160655';
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,45 @@ 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
+ ));
18870
+ this.requestUpdate();
18828
18871
  return;
18829
18872
  }
18830
18873
  const nodes = slot.assignedNodes({ flatten: true });
18831
18874
 
18832
- this.hasDisplayValueContent = nodes.length > 0;
18875
+ // Check for actual visible content, not just node existence.
18876
+ // An empty <span slot="displayValue"></span> forwarded from the
18877
+ // consumer should not be treated as "has content" — it causes the
18878
+ // displayValue wrapper to render (with hasContent class) but show
18879
+ // nothing, blocking the combobox's synthetic displayValue from
18880
+ // being visible on preset/deeplink load.
18881
+ // Custom elements (e.g. <auro-icon>) that render via shadow DOM are
18882
+ // treated as content even when they have no text or light-DOM children.
18883
+ this.hasDisplayValueContent = nodes.some((node) => {
18884
+ if (node.nodeType === Node.TEXT_NODE) {
18885
+ return node.textContent.trim().length > 0;
18886
+ }
18887
+ if (node.nodeType === Node.ELEMENT_NODE) {
18888
+ return node.textContent.trim().length > 0 ||
18889
+ node.children.length > 0 ||
18890
+ node.shadowRoot !== null;
18891
+ }
18892
+ return false;
18893
+ });
18894
+
18895
+ this.requestUpdate();
18833
18896
  }
18834
18897
 
18835
18898
  firstUpdated() {
@@ -19656,7 +19719,7 @@ class AuroBibtemplate extends LitElement {
19656
19719
  }
19657
19720
  }
19658
19721
 
19659
- var formkitVersion = '202607152206';
19722
+ var formkitVersion = '202607160655';
19660
19723
 
19661
19724
  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
19725
 
@@ -20708,6 +20771,14 @@ class AuroCombobox extends AuroElement {
20708
20771
  // auroMenu-selectedOption event hasn't fired yet, or we're on remount
20709
20772
  // with no options loaded). Synthesize a displayValue from the value so
20710
20773
  // the overlay isn't blank.
20774
+ //
20775
+ // NOTE: This renders the raw machine value (e.g. "SEA"), not the
20776
+ // human-readable label (e.g. "Seattle, WA"). For consumers where
20777
+ // value ≠ label, this produces a brief flash of the raw value until
20778
+ // the option elements load and updateTriggerTextDisplay re-runs with
20779
+ // the correct label. This is intentionally preferred over a blank
20780
+ // state — the displayValueInTrigger.remove() cleanup above ensures
20781
+ // this placeholder is replaced once the real option is available.
20711
20782
  const syntheticDV = document.createElement('span');
20712
20783
  syntheticDV.setAttribute('slot', 'displayValue');
20713
20784
  syntheticDV.textContent = this.value;
@@ -20960,7 +21031,11 @@ class AuroCombobox extends AuroElement {
20960
21031
  // after the dropdown layout settles.
20961
21032
 
20962
21033
  doubleRaf(() => {
20963
- this.setInputFocus();
21034
+ // Guard: skip if the dropdown closed before this rAF fired
21035
+ // (e.g. user selected an option immediately after the bib opened).
21036
+ if (this.dropdownOpen) {
21037
+ this.setInputFocus();
21038
+ }
20964
21039
  if (this._inFullscreenTransition) {
20965
21040
  this._inFullscreenTransition = false;
20966
21041
  }
@@ -21007,7 +21082,9 @@ class AuroCombobox extends AuroElement {
21007
21082
  }
21008
21083
 
21009
21084
  this._scheduleTimer(() => {
21010
- this.setInputFocus();
21085
+ if (this.dropdown.isPopoverVisible) {
21086
+ this.setInputFocus();
21087
+ }
21011
21088
  }, 0);
21012
21089
  });
21013
21090
  }
@@ -21016,14 +21093,19 @@ class AuroCombobox extends AuroElement {
21016
21093
  * @private
21017
21094
  */
21018
21095
  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(() => {
21096
+ doubleRaf(() => {
21097
+ // First establish focus inside the input's shadow root.
21098
+ // Without this, clearBtn.focus() silently fails when focus is on
21099
+ // document.body (e.g. after a click selection closes the bib dialog).
21100
+ // delegatesFocus on BaseInput routes this to the native <input>.
21101
+ this.input.focus();
21102
+
21103
+ // Now move focus to the clear button within the same shadow root.
21104
+ const clearBtn = this.input.shadowRoot.querySelector('.clearBtn');
21105
+ if (clearBtn) {
21024
21106
  clearBtn.focus();
21025
- });
21026
- }
21107
+ }
21108
+ });
21027
21109
  }
21028
21110
 
21029
21111
  /**
@@ -21234,6 +21316,9 @@ class AuroCombobox extends AuroElement {
21234
21316
  // only — fresh user selections take the existing hideBib path.
21235
21317
  if (isEcho && this.menu.optionSelected) {
21236
21318
  this._programmaticFilterRefresh = true;
21319
+ this.updateComplete.then(() => {
21320
+ this._programmaticFilterRefresh = false;
21321
+ });
21237
21322
  }
21238
21323
  });
21239
21324
 
@@ -21464,15 +21549,6 @@ class AuroCombobox extends AuroElement {
21464
21549
  * @returns {void}
21465
21550
  */
21466
21551
  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
21552
  // 'input' fires for every user-initiated value change — typing, paste,
21477
21553
  // IME composition end, dead-key composition, drag-drop. Flip _userTyped
21478
21554
  // here so updated('availableOptions') auto-opens the bib for sources
@@ -21495,10 +21571,6 @@ class AuroCombobox extends AuroElement {
21495
21571
  if (this.dropdown.isBibFullscreen && this.input.value && this.input.value.length > 0 && this.dropdown.isPopoverVisible) {
21496
21572
  this.setInputFocus();
21497
21573
  }
21498
-
21499
- if (this._programmaticFilterRefresh) {
21500
- this._programmaticFilterRefresh = false;
21501
- }
21502
21574
  }
21503
21575
 
21504
21576
  /**
@@ -21697,6 +21769,12 @@ class AuroCombobox extends AuroElement {
21697
21769
  // setting the flag unconditionally here masks the user-typed open path.
21698
21770
  if (!this._userTyped) {
21699
21771
  this._programmaticFilterRefresh = true;
21772
+ // Self-clear after this update cycle completes. This collapses
21773
+ // the previous scattered clear-points into one and prevents the
21774
+ // flag from surviving into the next user interaction.
21775
+ this.updateComplete.then(() => {
21776
+ this._programmaticFilterRefresh = false;
21777
+ });
21700
21778
  }
21701
21779
 
21702
21780
  if (this.input.value !== this.value) {
@@ -21786,10 +21864,6 @@ class AuroCombobox extends AuroElement {
21786
21864
  } else if (!this.dropdown.isBibFullscreen) {
21787
21865
  this.hideBib();
21788
21866
  }
21789
-
21790
- if (this._programmaticFilterRefresh) {
21791
- this._programmaticFilterRefresh = false;
21792
- }
21793
21867
  }
21794
21868
 
21795
21869
  if (changedProperties.has('error')) {
@@ -21971,7 +22045,7 @@ class AuroCombobox extends AuroElement {
21971
22045
  <slot @slotchange="${this.handleSlotChange}"></slot>
21972
22046
  <${this.inputTag}
21973
22047
  id="inputInBib"
21974
- autofocus
22048
+ ?autofocus="${this.dropdownOpen && this.dropdown?.isBibFullscreen}"
21975
22049
  @input="${this.handleInputValueChange}"
21976
22050
  .a11yActivedescendant="${this.dropdownOpen && this.optionActive ? this.optionActive.id : undefined}"
21977
22051
  .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 = '202607160655';
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
 
@@ -5654,14 +5693,16 @@ class AuroDropdown extends AuroElement$2 {
5654
5693
 
5655
5694
  const eventType = event.detail.eventType || "unknown";
5656
5695
  if (!this.isPopoverVisible && this.hasFocus && eventType === "keydown") {
5657
- this.trigger.focus();
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 = '202607160655';
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,45 @@ 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
+ ));
18870
+ this.requestUpdate();
18828
18871
  return;
18829
18872
  }
18830
18873
  const nodes = slot.assignedNodes({ flatten: true });
18831
18874
 
18832
- this.hasDisplayValueContent = nodes.length > 0;
18875
+ // Check for actual visible content, not just node existence.
18876
+ // An empty <span slot="displayValue"></span> forwarded from the
18877
+ // consumer should not be treated as "has content" — it causes the
18878
+ // displayValue wrapper to render (with hasContent class) but show
18879
+ // nothing, blocking the combobox's synthetic displayValue from
18880
+ // being visible on preset/deeplink load.
18881
+ // Custom elements (e.g. <auro-icon>) that render via shadow DOM are
18882
+ // treated as content even when they have no text or light-DOM children.
18883
+ this.hasDisplayValueContent = nodes.some((node) => {
18884
+ if (node.nodeType === Node.TEXT_NODE) {
18885
+ return node.textContent.trim().length > 0;
18886
+ }
18887
+ if (node.nodeType === Node.ELEMENT_NODE) {
18888
+ return node.textContent.trim().length > 0 ||
18889
+ node.children.length > 0 ||
18890
+ node.shadowRoot !== null;
18891
+ }
18892
+ return false;
18893
+ });
18894
+
18895
+ this.requestUpdate();
18833
18896
  }
18834
18897
 
18835
18898
  firstUpdated() {
@@ -19656,7 +19719,7 @@ class AuroBibtemplate extends LitElement {
19656
19719
  }
19657
19720
  }
19658
19721
 
19659
- var formkitVersion = '202607152206';
19722
+ var formkitVersion = '202607160655';
19660
19723
 
19661
19724
  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
19725
 
@@ -20708,6 +20771,14 @@ class AuroCombobox extends AuroElement {
20708
20771
  // auroMenu-selectedOption event hasn't fired yet, or we're on remount
20709
20772
  // with no options loaded). Synthesize a displayValue from the value so
20710
20773
  // the overlay isn't blank.
20774
+ //
20775
+ // NOTE: This renders the raw machine value (e.g. "SEA"), not the
20776
+ // human-readable label (e.g. "Seattle, WA"). For consumers where
20777
+ // value ≠ label, this produces a brief flash of the raw value until
20778
+ // the option elements load and updateTriggerTextDisplay re-runs with
20779
+ // the correct label. This is intentionally preferred over a blank
20780
+ // state — the displayValueInTrigger.remove() cleanup above ensures
20781
+ // this placeholder is replaced once the real option is available.
20711
20782
  const syntheticDV = document.createElement('span');
20712
20783
  syntheticDV.setAttribute('slot', 'displayValue');
20713
20784
  syntheticDV.textContent = this.value;
@@ -20960,7 +21031,11 @@ class AuroCombobox extends AuroElement {
20960
21031
  // after the dropdown layout settles.
20961
21032
 
20962
21033
  doubleRaf(() => {
20963
- this.setInputFocus();
21034
+ // Guard: skip if the dropdown closed before this rAF fired
21035
+ // (e.g. user selected an option immediately after the bib opened).
21036
+ if (this.dropdownOpen) {
21037
+ this.setInputFocus();
21038
+ }
20964
21039
  if (this._inFullscreenTransition) {
20965
21040
  this._inFullscreenTransition = false;
20966
21041
  }
@@ -21007,7 +21082,9 @@ class AuroCombobox extends AuroElement {
21007
21082
  }
21008
21083
 
21009
21084
  this._scheduleTimer(() => {
21010
- this.setInputFocus();
21085
+ if (this.dropdown.isPopoverVisible) {
21086
+ this.setInputFocus();
21087
+ }
21011
21088
  }, 0);
21012
21089
  });
21013
21090
  }
@@ -21016,14 +21093,19 @@ class AuroCombobox extends AuroElement {
21016
21093
  * @private
21017
21094
  */
21018
21095
  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(() => {
21096
+ doubleRaf(() => {
21097
+ // First establish focus inside the input's shadow root.
21098
+ // Without this, clearBtn.focus() silently fails when focus is on
21099
+ // document.body (e.g. after a click selection closes the bib dialog).
21100
+ // delegatesFocus on BaseInput routes this to the native <input>.
21101
+ this.input.focus();
21102
+
21103
+ // Now move focus to the clear button within the same shadow root.
21104
+ const clearBtn = this.input.shadowRoot.querySelector('.clearBtn');
21105
+ if (clearBtn) {
21024
21106
  clearBtn.focus();
21025
- });
21026
- }
21107
+ }
21108
+ });
21027
21109
  }
21028
21110
 
21029
21111
  /**
@@ -21234,6 +21316,9 @@ class AuroCombobox extends AuroElement {
21234
21316
  // only — fresh user selections take the existing hideBib path.
21235
21317
  if (isEcho && this.menu.optionSelected) {
21236
21318
  this._programmaticFilterRefresh = true;
21319
+ this.updateComplete.then(() => {
21320
+ this._programmaticFilterRefresh = false;
21321
+ });
21237
21322
  }
21238
21323
  });
21239
21324
 
@@ -21464,15 +21549,6 @@ class AuroCombobox extends AuroElement {
21464
21549
  * @returns {void}
21465
21550
  */
21466
21551
  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
21552
  // 'input' fires for every user-initiated value change — typing, paste,
21477
21553
  // IME composition end, dead-key composition, drag-drop. Flip _userTyped
21478
21554
  // here so updated('availableOptions') auto-opens the bib for sources
@@ -21495,10 +21571,6 @@ class AuroCombobox extends AuroElement {
21495
21571
  if (this.dropdown.isBibFullscreen && this.input.value && this.input.value.length > 0 && this.dropdown.isPopoverVisible) {
21496
21572
  this.setInputFocus();
21497
21573
  }
21498
-
21499
- if (this._programmaticFilterRefresh) {
21500
- this._programmaticFilterRefresh = false;
21501
- }
21502
21574
  }
21503
21575
 
21504
21576
  /**
@@ -21697,6 +21769,12 @@ class AuroCombobox extends AuroElement {
21697
21769
  // setting the flag unconditionally here masks the user-typed open path.
21698
21770
  if (!this._userTyped) {
21699
21771
  this._programmaticFilterRefresh = true;
21772
+ // Self-clear after this update cycle completes. This collapses
21773
+ // the previous scattered clear-points into one and prevents the
21774
+ // flag from surviving into the next user interaction.
21775
+ this.updateComplete.then(() => {
21776
+ this._programmaticFilterRefresh = false;
21777
+ });
21700
21778
  }
21701
21779
 
21702
21780
  if (this.input.value !== this.value) {
@@ -21786,10 +21864,6 @@ class AuroCombobox extends AuroElement {
21786
21864
  } else if (!this.dropdown.isBibFullscreen) {
21787
21865
  this.hideBib();
21788
21866
  }
21789
-
21790
- if (this._programmaticFilterRefresh) {
21791
- this._programmaticFilterRefresh = false;
21792
- }
21793
21867
  }
21794
21868
 
21795
21869
  if (changedProperties.has('error')) {
@@ -21971,7 +22045,7 @@ class AuroCombobox extends AuroElement {
21971
22045
  <slot @slotchange="${this.handleSlotChange}"></slot>
21972
22046
  <${this.inputTag}
21973
22047
  id="inputInBib"
21974
- autofocus
22048
+ ?autofocus="${this.dropdownOpen && this.dropdown?.isBibFullscreen}"
21975
22049
  @input="${this.handleInputValueChange}"
21976
22050
  .a11yActivedescendant="${this.dropdownOpen && this.optionActive ? this.optionActive.id : undefined}"
21977
22051
  .a11yControls=${`${this.dropdownId}-floater-bib`}