@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.
- 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 +123 -49
- package/components/combobox/demo/getting-started.min.js +123 -49
- package/components/combobox/demo/index.min.js +123 -49
- package/components/combobox/dist/index.js +123 -49
- package/components/combobox/dist/registered.js +123 -49
- package/components/counter/demo/customize.min.js +47 -6
- package/components/counter/demo/index.min.js +47 -6
- package/components/counter/dist/index.js +47 -6
- package/components/counter/dist/registered.js +47 -6
- package/components/datepicker/demo/customize.min.js +85 -22
- package/components/datepicker/demo/index.min.js +85 -22
- package/components/datepicker/dist/index.js +85 -22
- package/components/datepicker/dist/registered.js +85 -22
- package/components/dropdown/demo/customize.min.js +46 -5
- package/components/dropdown/demo/getting-started.min.js +46 -5
- package/components/dropdown/demo/index.min.js +46 -5
- package/components/dropdown/dist/auro-dropdown.d.ts +8 -1
- package/components/dropdown/dist/index.js +46 -5
- package/components/dropdown/dist/registered.js +46 -5
- package/components/form/demo/customize.min.js +342 -101
- package/components/form/demo/getting-started.min.js +342 -101
- package/components/form/demo/index.min.js +342 -101
- package/components/form/demo/registerDemoDeps.min.js +342 -101
- package/components/input/demo/customize.min.js +38 -16
- package/components/input/demo/getting-started.min.js +38 -16
- package/components/input/demo/index.min.js +38 -16
- package/components/input/dist/index.js +38 -16
- package/components/input/dist/registered.js +38 -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 +47 -6
- package/components/select/demo/getting-started.min.js +47 -6
- package/components/select/demo/index.min.js +47 -6
- package/components/select/dist/index.js +47 -6
- package/components/select/dist/registered.js +47 -6
- package/custom-elements.json +1529 -1523
- 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 = '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.
|
|
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 = '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
|
|
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
|
+
));
|
|
18870
|
+
this.requestUpdate();
|
|
18828
18871
|
return;
|
|
18829
18872
|
}
|
|
18830
18873
|
const nodes = slot.assignedNodes({ flatten: true });
|
|
18831
18874
|
|
|
18832
|
-
|
|
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 = '
|
|
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
|
|
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.
|
|
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
|
-
|
|
21020
|
-
|
|
21021
|
-
//
|
|
21022
|
-
//
|
|
21023
|
-
|
|
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 = '
|
|
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.
|
|
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 = '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
|
|
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
|
+
));
|
|
18870
|
+
this.requestUpdate();
|
|
18828
18871
|
return;
|
|
18829
18872
|
}
|
|
18830
18873
|
const nodes = slot.assignedNodes({ flatten: true });
|
|
18831
18874
|
|
|
18832
|
-
|
|
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 = '
|
|
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
|
|
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.
|
|
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
|
-
|
|
21020
|
-
|
|
21021
|
-
//
|
|
21022
|
-
//
|
|
21023
|
-
|
|
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`}
|