@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.
- package/components/checkbox/demo/customize.min.js +1 -1
- package/components/checkbox/demo/getting-started.min.js +1 -1
- package/components/checkbox/demo/index.min.js +1 -1
- package/components/checkbox/dist/index.js +1 -1
- package/components/checkbox/dist/registered.js +1 -1
- package/components/combobox/demo/customize.min.js +121 -50
- package/components/combobox/demo/getting-started.min.js +121 -50
- package/components/combobox/demo/index.min.js +121 -50
- package/components/combobox/dist/index.js +121 -50
- package/components/combobox/dist/registered.js +121 -50
- package/components/counter/demo/customize.min.js +48 -7
- package/components/counter/demo/index.min.js +48 -7
- package/components/counter/dist/index.js +48 -7
- package/components/counter/dist/registered.js +48 -7
- package/components/datepicker/demo/customize.min.js +83 -23
- package/components/datepicker/demo/index.min.js +83 -23
- package/components/datepicker/dist/index.js +83 -23
- package/components/datepicker/dist/registered.js +83 -23
- package/components/dropdown/demo/customize.min.js +47 -6
- package/components/dropdown/demo/getting-started.min.js +47 -6
- package/components/dropdown/demo/index.min.js +47 -6
- package/components/dropdown/dist/auro-dropdown.d.ts +8 -1
- package/components/dropdown/dist/index.js +47 -6
- package/components/dropdown/dist/registered.js +47 -6
- package/components/form/demo/customize.min.js +337 -105
- package/components/form/demo/getting-started.min.js +337 -105
- package/components/form/demo/index.min.js +337 -105
- package/components/form/demo/registerDemoDeps.min.js +337 -105
- package/components/input/demo/customize.min.js +35 -16
- package/components/input/demo/getting-started.min.js +35 -16
- package/components/input/demo/index.min.js +35 -16
- package/components/input/dist/index.js +35 -16
- package/components/input/dist/registered.js +35 -16
- package/components/radio/demo/customize.min.js +1 -1
- package/components/radio/demo/getting-started.min.js +1 -1
- package/components/radio/demo/index.min.js +1 -1
- package/components/radio/dist/index.js +1 -1
- package/components/radio/dist/registered.js +1 -1
- package/components/select/demo/customize.min.js +48 -7
- package/components/select/demo/getting-started.min.js +48 -7
- package/components/select/demo/index.min.js +48 -7
- package/components/select/dist/index.js +48 -7
- package/components/select/dist/registered.js +48 -7
- package/custom-elements.json +6 -0
- 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 = '
|
|
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.
|
|
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
|
-
|
|
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.
|
|
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
|
-
//
|
|
16851
|
-
//
|
|
16852
|
-
//
|
|
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 = '
|
|
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
|
|
18823
|
-
// children so hasDisplayValueContent isn't stuck false
|
|
18824
|
-
//
|
|
18825
|
-
|
|
18826
|
-
|
|
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
|
-
|
|
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 = '
|
|
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
|
|
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.
|
|
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
|
-
|
|
21020
|
-
|
|
21021
|
-
//
|
|
21022
|
-
//
|
|
21023
|
-
|
|
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 = '
|
|
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.
|
|
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
|
-
|
|
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.
|
|
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
|
-
//
|
|
16851
|
-
//
|
|
16852
|
-
//
|
|
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 = '
|
|
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
|
|
18823
|
-
// children so hasDisplayValueContent isn't stuck false
|
|
18824
|
-
//
|
|
18825
|
-
|
|
18826
|
-
|
|
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
|
-
|
|
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 = '
|
|
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
|
|
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.
|
|
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
|
-
|
|
21020
|
-
|
|
21021
|
-
//
|
|
21022
|
-
//
|
|
21023
|
-
|
|
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`}
|