@aurodesignsystem-dev/auro-formkit 0.0.0-pr1554.0 → 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 -43
- package/components/combobox/demo/getting-started.min.js +123 -43
- package/components/combobox/demo/index.min.js +123 -43
- package/components/combobox/dist/index.js +123 -43
- package/components/combobox/dist/registered.js +123 -43
- 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 -16
- package/components/datepicker/demo/index.min.js +85 -16
- package/components/datepicker/dist/index.js +85 -16
- package/components/datepicker/dist/registered.js +85 -16
- 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 -83
- package/components/form/demo/getting-started.min.js +342 -83
- package/components/form/demo/index.min.js +342 -83
- package/components/form/demo/registerDemoDeps.min.js +342 -83
- package/components/input/demo/customize.min.js +38 -10
- package/components/input/demo/getting-started.min.js +38 -10
- package/components/input/demo/index.min.js +38 -10
- package/components/input/dist/index.js +38 -10
- package/components/input/dist/registered.js +38 -10
- 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 +1783 -1777
- package/package.json +1 -1
|
@@ -1275,7 +1275,7 @@ class AuroHelpText extends i$2 {
|
|
|
1275
1275
|
}
|
|
1276
1276
|
}
|
|
1277
1277
|
|
|
1278
|
-
var formkitVersion = '
|
|
1278
|
+
var formkitVersion = '202607160655';
|
|
1279
1279
|
|
|
1280
1280
|
// Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
|
|
1281
1281
|
// See LICENSE in the project root for license information.
|
|
@@ -1275,7 +1275,7 @@ class AuroHelpText extends i$2 {
|
|
|
1275
1275
|
}
|
|
1276
1276
|
}
|
|
1277
1277
|
|
|
1278
|
-
var formkitVersion = '
|
|
1278
|
+
var formkitVersion = '202607160655';
|
|
1279
1279
|
|
|
1280
1280
|
// Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
|
|
1281
1281
|
// See LICENSE in the project root for license information.
|
|
@@ -1275,7 +1275,7 @@ class AuroHelpText extends i$2 {
|
|
|
1275
1275
|
}
|
|
1276
1276
|
}
|
|
1277
1277
|
|
|
1278
|
-
var formkitVersion = '
|
|
1278
|
+
var formkitVersion = '202607160655';
|
|
1279
1279
|
|
|
1280
1280
|
// Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
|
|
1281
1281
|
// See LICENSE in the project root for license information.
|
|
@@ -1228,7 +1228,7 @@ class AuroHelpText extends LitElement {
|
|
|
1228
1228
|
}
|
|
1229
1229
|
}
|
|
1230
1230
|
|
|
1231
|
-
var formkitVersion = '
|
|
1231
|
+
var formkitVersion = '202607160655';
|
|
1232
1232
|
|
|
1233
1233
|
// Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
|
|
1234
1234
|
// See LICENSE in the project root for license information.
|
|
@@ -1228,7 +1228,7 @@ class AuroHelpText extends LitElement {
|
|
|
1228
1228
|
}
|
|
1229
1229
|
}
|
|
1230
1230
|
|
|
1231
|
-
var formkitVersion = '
|
|
1231
|
+
var formkitVersion = '202607160655';
|
|
1232
1232
|
|
|
1233
1233
|
// Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
|
|
1234
1234
|
// See LICENSE in the project root for license information.
|
|
@@ -4971,7 +4971,7 @@ let AuroHelpText$2 = class AuroHelpText extends i$3 {
|
|
|
4971
4971
|
}
|
|
4972
4972
|
};
|
|
4973
4973
|
|
|
4974
|
-
var formkitVersion$2 = '
|
|
4974
|
+
var formkitVersion$2 = '202607160655';
|
|
4975
4975
|
|
|
4976
4976
|
let AuroElement$2 = class AuroElement extends i$3 {
|
|
4977
4977
|
static get properties() {
|
|
@@ -5100,7 +5100,6 @@ class AuroDropdown extends AuroElement$2 {
|
|
|
5100
5100
|
static get shadowRootOptions() {
|
|
5101
5101
|
return {
|
|
5102
5102
|
...AuroElement$2.shadowRootOptions,
|
|
5103
|
-
delegatesFocus: true,
|
|
5104
5103
|
};
|
|
5105
5104
|
}
|
|
5106
5105
|
|
|
@@ -5267,7 +5266,47 @@ class AuroDropdown extends AuroElement$2 {
|
|
|
5267
5266
|
focusables[0].focus();
|
|
5268
5267
|
}
|
|
5269
5268
|
} else {
|
|
5269
|
+
this.focusTrigger();
|
|
5270
|
+
}
|
|
5271
|
+
}
|
|
5272
|
+
|
|
5273
|
+
/**
|
|
5274
|
+
* Focus the trigger content. When the trigger wrapper itself is focusable
|
|
5275
|
+
* (has tabindex), focus it directly. Otherwise, focus the first focusable
|
|
5276
|
+
* element slotted into the trigger slot (e.g. the auro-input).
|
|
5277
|
+
* @private
|
|
5278
|
+
*/
|
|
5279
|
+
focusTrigger() {
|
|
5280
|
+
if (this.trigger.hasAttribute('tabindex')) {
|
|
5270
5281
|
this.trigger.focus();
|
|
5282
|
+
} else {
|
|
5283
|
+
// Slotted content isn't a DOM child of the trigger div, so
|
|
5284
|
+
// getFocusableElements can't find it. Query assigned nodes directly.
|
|
5285
|
+
const slot = this.trigger.querySelector('slot[name="trigger"]');
|
|
5286
|
+
if (slot) {
|
|
5287
|
+
const assigned = slot.assignedElements();
|
|
5288
|
+
for (const el of assigned) {
|
|
5289
|
+
if (el.hasAttribute('disabled')) {
|
|
5290
|
+
continue;
|
|
5291
|
+
}
|
|
5292
|
+
// Try finding a focusable descendant first (handles non-focusable
|
|
5293
|
+
// wrappers like <div> containing a <button>). If none found, try
|
|
5294
|
+
// focusing the element directly (works for custom elements like
|
|
5295
|
+
// auro-input that have delegatesFocus or a custom focus() method).
|
|
5296
|
+
const descendants = getFocusableElements(el);
|
|
5297
|
+
if (descendants.length > 0) {
|
|
5298
|
+
descendants[0].focus();
|
|
5299
|
+
return;
|
|
5300
|
+
}
|
|
5301
|
+
el.focus();
|
|
5302
|
+
return;
|
|
5303
|
+
}
|
|
5304
|
+
}
|
|
5305
|
+
// Fallback: try DOM children (non-slotted content)
|
|
5306
|
+
const focusables = getFocusableElements(this.trigger);
|
|
5307
|
+
if (focusables.length > 0) {
|
|
5308
|
+
focusables[0].focus();
|
|
5309
|
+
}
|
|
5271
5310
|
}
|
|
5272
5311
|
}
|
|
5273
5312
|
|
|
@@ -5721,14 +5760,16 @@ class AuroDropdown extends AuroElement$2 {
|
|
|
5721
5760
|
|
|
5722
5761
|
const eventType = event.detail.eventType || "unknown";
|
|
5723
5762
|
if (!this.isPopoverVisible && this.hasFocus && eventType === "keydown") {
|
|
5724
|
-
this.
|
|
5763
|
+
this.focusTrigger();
|
|
5725
5764
|
}
|
|
5726
5765
|
|
|
5727
5766
|
|
|
5728
5767
|
// On Tab-driven close (eventType "focusloss"), let focus advance naturally
|
|
5729
5768
|
// — restoring to the trigger would trap the user on this dropdown, forcing
|
|
5730
5769
|
// an extra Tab to move on. Escape and outside-click still restore.
|
|
5731
|
-
|
|
5770
|
+
// When noHideOnThisFocusLoss is true, the consumer (e.g. combobox) manages
|
|
5771
|
+
// its own focus restoration — skip the generic trigger focus to avoid races.
|
|
5772
|
+
if (!this.isPopoverVisible && eventType !== "focusloss" && !this.noHideOnThisFocusLoss) {
|
|
5732
5773
|
// wait til the bib gets fully closed and rendered
|
|
5733
5774
|
setTimeout(() => {
|
|
5734
5775
|
// Skip if the bib re-opened, or if focus moved intentionally outside the dropdown (not to body).
|
|
@@ -5740,7 +5781,7 @@ class AuroDropdown extends AuroElement$2 {
|
|
|
5740
5781
|
return;
|
|
5741
5782
|
}
|
|
5742
5783
|
// Restore focus to the trigger.
|
|
5743
|
-
this.
|
|
5784
|
+
this.focusTrigger();
|
|
5744
5785
|
});
|
|
5745
5786
|
}
|
|
5746
5787
|
}
|
|
@@ -16921,9 +16962,10 @@ class DomHandler {
|
|
|
16921
16962
|
class BaseInput extends AuroElement$1 {
|
|
16922
16963
|
|
|
16923
16964
|
// Delegate focus to the native <input> inside the shadow root so that
|
|
16924
|
-
//
|
|
16925
|
-
//
|
|
16926
|
-
//
|
|
16965
|
+
// clicking anywhere on the input wrapper focuses the native input, and
|
|
16966
|
+
// programmatic .focus() calls on elements in the shadow DOM work correctly.
|
|
16967
|
+
// The initial-load focus theft was caused by the static `autofocus`
|
|
16968
|
+
// attribute on the bib input (now conditional), not by delegatesFocus.
|
|
16927
16969
|
static get shadowRootOptions() {
|
|
16928
16970
|
return {
|
|
16929
16971
|
...AuroElement$1.shadowRootOptions,
|
|
@@ -18600,7 +18642,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$3 {
|
|
|
18600
18642
|
}
|
|
18601
18643
|
};
|
|
18602
18644
|
|
|
18603
|
-
var formkitVersion$1 = '
|
|
18645
|
+
var formkitVersion$1 = '202607160655';
|
|
18604
18646
|
|
|
18605
18647
|
// Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
18606
18648
|
// See LICENSE in the project root for license information.
|
|
@@ -18886,18 +18928,45 @@ class AuroInput extends BaseInput {
|
|
|
18886
18928
|
* @returns {void}
|
|
18887
18929
|
*/
|
|
18888
18930
|
checkDisplayValueSlotChange() {
|
|
18889
|
-
// flatten:true resolves through auro-combobox's forwarding slot
|
|
18890
|
-
// (<slot name="displayValue" slot="displayValue">) so a clone appended
|
|
18891
|
-
// directly to auro-input's light DOM alongside the forwarder still
|
|
18892
|
-
// counts as content. The prior nodes[0].tagName === 'SLOT' recursion
|
|
18893
|
-
// discarded any siblings past the forwarder.
|
|
18894
18931
|
const slot = this.shadowRoot?.querySelector('slot[name="displayValue"]');
|
|
18895
18932
|
if (!slot) {
|
|
18933
|
+
// Shadow slot not yet rendered — fall back to checking light-DOM
|
|
18934
|
+
// children so hasDisplayValueContent isn't stuck false when called
|
|
18935
|
+
// before firstUpdated (e.g. from auro-combobox during mount).
|
|
18936
|
+
// Check for any element (including custom elements like <auro-icon>
|
|
18937
|
+
// that render via shadow DOM with no text content).
|
|
18938
|
+
const lightDomContent = this.querySelector('[slot="displayValue"]:not(slot)');
|
|
18939
|
+
this.hasDisplayValueContent = Boolean(lightDomContent && (
|
|
18940
|
+
lightDomContent.textContent.trim().length > 0 ||
|
|
18941
|
+
lightDomContent.children.length > 0 ||
|
|
18942
|
+
lightDomContent.shadowRoot !== null
|
|
18943
|
+
));
|
|
18944
|
+
this.requestUpdate();
|
|
18896
18945
|
return;
|
|
18897
18946
|
}
|
|
18898
18947
|
const nodes = slot.assignedNodes({ flatten: true });
|
|
18899
18948
|
|
|
18900
|
-
|
|
18949
|
+
// Check for actual visible content, not just node existence.
|
|
18950
|
+
// An empty <span slot="displayValue"></span> forwarded from the
|
|
18951
|
+
// consumer should not be treated as "has content" — it causes the
|
|
18952
|
+
// displayValue wrapper to render (with hasContent class) but show
|
|
18953
|
+
// nothing, blocking the combobox's synthetic displayValue from
|
|
18954
|
+
// being visible on preset/deeplink load.
|
|
18955
|
+
// Custom elements (e.g. <auro-icon>) that render via shadow DOM are
|
|
18956
|
+
// treated as content even when they have no text or light-DOM children.
|
|
18957
|
+
this.hasDisplayValueContent = nodes.some((node) => {
|
|
18958
|
+
if (node.nodeType === Node.TEXT_NODE) {
|
|
18959
|
+
return node.textContent.trim().length > 0;
|
|
18960
|
+
}
|
|
18961
|
+
if (node.nodeType === Node.ELEMENT_NODE) {
|
|
18962
|
+
return node.textContent.trim().length > 0 ||
|
|
18963
|
+
node.children.length > 0 ||
|
|
18964
|
+
node.shadowRoot !== null;
|
|
18965
|
+
}
|
|
18966
|
+
return false;
|
|
18967
|
+
});
|
|
18968
|
+
|
|
18969
|
+
this.requestUpdate();
|
|
18901
18970
|
}
|
|
18902
18971
|
|
|
18903
18972
|
firstUpdated() {
|
|
@@ -19724,7 +19793,7 @@ class AuroBibtemplate extends i$3 {
|
|
|
19724
19793
|
}
|
|
19725
19794
|
}
|
|
19726
19795
|
|
|
19727
|
-
var formkitVersion = '
|
|
19796
|
+
var formkitVersion = '202607160655';
|
|
19728
19797
|
|
|
19729
19798
|
var styleCss$3 = i$6`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}:host{display:block;text-align:left}:host [auro-dropdown]{--ds-auro-dropdown-trigger-background-color: transparent}:host #inputInBib::part(wrapper){box-shadow:none}:host #inputInBib::part(accent-left){display:none}:host([layout*=classic]) [auro-input]{width:100%}:host([layout*=classic]) [auro-input]::part(helpText){display:none}:host([layout*=classic]) #slotHolder{display:none}`;
|
|
19730
19799
|
|
|
@@ -20776,6 +20845,14 @@ class AuroCombobox extends AuroElement {
|
|
|
20776
20845
|
// auroMenu-selectedOption event hasn't fired yet, or we're on remount
|
|
20777
20846
|
// with no options loaded). Synthesize a displayValue from the value so
|
|
20778
20847
|
// the overlay isn't blank.
|
|
20848
|
+
//
|
|
20849
|
+
// NOTE: This renders the raw machine value (e.g. "SEA"), not the
|
|
20850
|
+
// human-readable label (e.g. "Seattle, WA"). For consumers where
|
|
20851
|
+
// value ≠ label, this produces a brief flash of the raw value until
|
|
20852
|
+
// the option elements load and updateTriggerTextDisplay re-runs with
|
|
20853
|
+
// the correct label. This is intentionally preferred over a blank
|
|
20854
|
+
// state — the displayValueInTrigger.remove() cleanup above ensures
|
|
20855
|
+
// this placeholder is replaced once the real option is available.
|
|
20779
20856
|
const syntheticDV = document.createElement('span');
|
|
20780
20857
|
syntheticDV.setAttribute('slot', 'displayValue');
|
|
20781
20858
|
syntheticDV.textContent = this.value;
|
|
@@ -21028,7 +21105,11 @@ class AuroCombobox extends AuroElement {
|
|
|
21028
21105
|
// after the dropdown layout settles.
|
|
21029
21106
|
|
|
21030
21107
|
doubleRaf(() => {
|
|
21031
|
-
this
|
|
21108
|
+
// Guard: skip if the dropdown closed before this rAF fired
|
|
21109
|
+
// (e.g. user selected an option immediately after the bib opened).
|
|
21110
|
+
if (this.dropdownOpen) {
|
|
21111
|
+
this.setInputFocus();
|
|
21112
|
+
}
|
|
21032
21113
|
if (this._inFullscreenTransition) {
|
|
21033
21114
|
this._inFullscreenTransition = false;
|
|
21034
21115
|
}
|
|
@@ -21075,7 +21156,9 @@ class AuroCombobox extends AuroElement {
|
|
|
21075
21156
|
}
|
|
21076
21157
|
|
|
21077
21158
|
this._scheduleTimer(() => {
|
|
21078
|
-
this.
|
|
21159
|
+
if (this.dropdown.isPopoverVisible) {
|
|
21160
|
+
this.setInputFocus();
|
|
21161
|
+
}
|
|
21079
21162
|
}, 0);
|
|
21080
21163
|
});
|
|
21081
21164
|
}
|
|
@@ -21084,14 +21167,19 @@ class AuroCombobox extends AuroElement {
|
|
|
21084
21167
|
* @private
|
|
21085
21168
|
*/
|
|
21086
21169
|
setClearBtnFocus() {
|
|
21087
|
-
|
|
21088
|
-
|
|
21089
|
-
//
|
|
21090
|
-
//
|
|
21091
|
-
|
|
21170
|
+
doubleRaf(() => {
|
|
21171
|
+
// First establish focus inside the input's shadow root.
|
|
21172
|
+
// Without this, clearBtn.focus() silently fails when focus is on
|
|
21173
|
+
// document.body (e.g. after a click selection closes the bib dialog).
|
|
21174
|
+
// delegatesFocus on BaseInput routes this to the native <input>.
|
|
21175
|
+
this.input.focus();
|
|
21176
|
+
|
|
21177
|
+
// Now move focus to the clear button within the same shadow root.
|
|
21178
|
+
const clearBtn = this.input.shadowRoot.querySelector('.clearBtn');
|
|
21179
|
+
if (clearBtn) {
|
|
21092
21180
|
clearBtn.focus();
|
|
21093
|
-
}
|
|
21094
|
-
}
|
|
21181
|
+
}
|
|
21182
|
+
});
|
|
21095
21183
|
}
|
|
21096
21184
|
|
|
21097
21185
|
/**
|
|
@@ -21302,6 +21390,9 @@ class AuroCombobox extends AuroElement {
|
|
|
21302
21390
|
// only — fresh user selections take the existing hideBib path.
|
|
21303
21391
|
if (isEcho && this.menu.optionSelected) {
|
|
21304
21392
|
this._programmaticFilterRefresh = true;
|
|
21393
|
+
this.updateComplete.then(() => {
|
|
21394
|
+
this._programmaticFilterRefresh = false;
|
|
21395
|
+
});
|
|
21305
21396
|
}
|
|
21306
21397
|
});
|
|
21307
21398
|
|
|
@@ -21532,15 +21623,6 @@ class AuroCombobox extends AuroElement {
|
|
|
21532
21623
|
* @returns {void}
|
|
21533
21624
|
*/
|
|
21534
21625
|
handleTriggerInputValueChange(event) {
|
|
21535
|
-
// Clear a stale _programmaticFilterRefresh when the user is genuinely
|
|
21536
|
-
// interacting. On mount, updated('value') sets the flag, but the early
|
|
21537
|
-
// return at `this.value === this.input.value` exits before clearing it.
|
|
21538
|
-
// Without this, the first keystroke after mount fails to set _userTyped
|
|
21539
|
-
// and the bib doesn't open.
|
|
21540
|
-
if (this._programmaticFilterRefresh && this.componentHasFocus) {
|
|
21541
|
-
this._programmaticFilterRefresh = false;
|
|
21542
|
-
}
|
|
21543
|
-
|
|
21544
21626
|
// 'input' fires for every user-initiated value change — typing, paste,
|
|
21545
21627
|
// IME composition end, dead-key composition, drag-drop. Flip _userTyped
|
|
21546
21628
|
// here so updated('availableOptions') auto-opens the bib for sources
|
|
@@ -21563,10 +21645,6 @@ class AuroCombobox extends AuroElement {
|
|
|
21563
21645
|
if (this.dropdown.isBibFullscreen && this.input.value && this.input.value.length > 0 && this.dropdown.isPopoverVisible) {
|
|
21564
21646
|
this.setInputFocus();
|
|
21565
21647
|
}
|
|
21566
|
-
|
|
21567
|
-
if (this._programmaticFilterRefresh) {
|
|
21568
|
-
this._programmaticFilterRefresh = false;
|
|
21569
|
-
}
|
|
21570
21648
|
}
|
|
21571
21649
|
|
|
21572
21650
|
/**
|
|
@@ -21765,6 +21843,12 @@ class AuroCombobox extends AuroElement {
|
|
|
21765
21843
|
// setting the flag unconditionally here masks the user-typed open path.
|
|
21766
21844
|
if (!this._userTyped) {
|
|
21767
21845
|
this._programmaticFilterRefresh = true;
|
|
21846
|
+
// Self-clear after this update cycle completes. This collapses
|
|
21847
|
+
// the previous scattered clear-points into one and prevents the
|
|
21848
|
+
// flag from surviving into the next user interaction.
|
|
21849
|
+
this.updateComplete.then(() => {
|
|
21850
|
+
this._programmaticFilterRefresh = false;
|
|
21851
|
+
});
|
|
21768
21852
|
}
|
|
21769
21853
|
|
|
21770
21854
|
if (this.input.value !== this.value) {
|
|
@@ -21854,10 +21938,6 @@ class AuroCombobox extends AuroElement {
|
|
|
21854
21938
|
} else if (!this.dropdown.isBibFullscreen) {
|
|
21855
21939
|
this.hideBib();
|
|
21856
21940
|
}
|
|
21857
|
-
|
|
21858
|
-
if (this._programmaticFilterRefresh) {
|
|
21859
|
-
this._programmaticFilterRefresh = false;
|
|
21860
|
-
}
|
|
21861
21941
|
}
|
|
21862
21942
|
|
|
21863
21943
|
if (changedProperties.has('error')) {
|
|
@@ -22039,7 +22119,7 @@ class AuroCombobox extends AuroElement {
|
|
|
22039
22119
|
<slot @slotchange="${this.handleSlotChange}"></slot>
|
|
22040
22120
|
<${this.inputTag}
|
|
22041
22121
|
id="inputInBib"
|
|
22042
|
-
autofocus
|
|
22122
|
+
?autofocus="${this.dropdownOpen && this.dropdown?.isBibFullscreen}"
|
|
22043
22123
|
@input="${this.handleInputValueChange}"
|
|
22044
22124
|
.a11yActivedescendant="${this.dropdownOpen && this.optionActive ? this.optionActive.id : undefined}"
|
|
22045
22125
|
.a11yControls=${`${this.dropdownId}-floater-bib`}
|
|
@@ -4971,7 +4971,7 @@ let AuroHelpText$2 = class AuroHelpText extends i$3 {
|
|
|
4971
4971
|
}
|
|
4972
4972
|
};
|
|
4973
4973
|
|
|
4974
|
-
var formkitVersion$2 = '
|
|
4974
|
+
var formkitVersion$2 = '202607160655';
|
|
4975
4975
|
|
|
4976
4976
|
let AuroElement$2 = class AuroElement extends i$3 {
|
|
4977
4977
|
static get properties() {
|
|
@@ -5100,7 +5100,6 @@ class AuroDropdown extends AuroElement$2 {
|
|
|
5100
5100
|
static get shadowRootOptions() {
|
|
5101
5101
|
return {
|
|
5102
5102
|
...AuroElement$2.shadowRootOptions,
|
|
5103
|
-
delegatesFocus: true,
|
|
5104
5103
|
};
|
|
5105
5104
|
}
|
|
5106
5105
|
|
|
@@ -5267,7 +5266,47 @@ class AuroDropdown extends AuroElement$2 {
|
|
|
5267
5266
|
focusables[0].focus();
|
|
5268
5267
|
}
|
|
5269
5268
|
} else {
|
|
5269
|
+
this.focusTrigger();
|
|
5270
|
+
}
|
|
5271
|
+
}
|
|
5272
|
+
|
|
5273
|
+
/**
|
|
5274
|
+
* Focus the trigger content. When the trigger wrapper itself is focusable
|
|
5275
|
+
* (has tabindex), focus it directly. Otherwise, focus the first focusable
|
|
5276
|
+
* element slotted into the trigger slot (e.g. the auro-input).
|
|
5277
|
+
* @private
|
|
5278
|
+
*/
|
|
5279
|
+
focusTrigger() {
|
|
5280
|
+
if (this.trigger.hasAttribute('tabindex')) {
|
|
5270
5281
|
this.trigger.focus();
|
|
5282
|
+
} else {
|
|
5283
|
+
// Slotted content isn't a DOM child of the trigger div, so
|
|
5284
|
+
// getFocusableElements can't find it. Query assigned nodes directly.
|
|
5285
|
+
const slot = this.trigger.querySelector('slot[name="trigger"]');
|
|
5286
|
+
if (slot) {
|
|
5287
|
+
const assigned = slot.assignedElements();
|
|
5288
|
+
for (const el of assigned) {
|
|
5289
|
+
if (el.hasAttribute('disabled')) {
|
|
5290
|
+
continue;
|
|
5291
|
+
}
|
|
5292
|
+
// Try finding a focusable descendant first (handles non-focusable
|
|
5293
|
+
// wrappers like <div> containing a <button>). If none found, try
|
|
5294
|
+
// focusing the element directly (works for custom elements like
|
|
5295
|
+
// auro-input that have delegatesFocus or a custom focus() method).
|
|
5296
|
+
const descendants = getFocusableElements(el);
|
|
5297
|
+
if (descendants.length > 0) {
|
|
5298
|
+
descendants[0].focus();
|
|
5299
|
+
return;
|
|
5300
|
+
}
|
|
5301
|
+
el.focus();
|
|
5302
|
+
return;
|
|
5303
|
+
}
|
|
5304
|
+
}
|
|
5305
|
+
// Fallback: try DOM children (non-slotted content)
|
|
5306
|
+
const focusables = getFocusableElements(this.trigger);
|
|
5307
|
+
if (focusables.length > 0) {
|
|
5308
|
+
focusables[0].focus();
|
|
5309
|
+
}
|
|
5271
5310
|
}
|
|
5272
5311
|
}
|
|
5273
5312
|
|
|
@@ -5721,14 +5760,16 @@ class AuroDropdown extends AuroElement$2 {
|
|
|
5721
5760
|
|
|
5722
5761
|
const eventType = event.detail.eventType || "unknown";
|
|
5723
5762
|
if (!this.isPopoverVisible && this.hasFocus && eventType === "keydown") {
|
|
5724
|
-
this.
|
|
5763
|
+
this.focusTrigger();
|
|
5725
5764
|
}
|
|
5726
5765
|
|
|
5727
5766
|
|
|
5728
5767
|
// On Tab-driven close (eventType "focusloss"), let focus advance naturally
|
|
5729
5768
|
// — restoring to the trigger would trap the user on this dropdown, forcing
|
|
5730
5769
|
// an extra Tab to move on. Escape and outside-click still restore.
|
|
5731
|
-
|
|
5770
|
+
// When noHideOnThisFocusLoss is true, the consumer (e.g. combobox) manages
|
|
5771
|
+
// its own focus restoration — skip the generic trigger focus to avoid races.
|
|
5772
|
+
if (!this.isPopoverVisible && eventType !== "focusloss" && !this.noHideOnThisFocusLoss) {
|
|
5732
5773
|
// wait til the bib gets fully closed and rendered
|
|
5733
5774
|
setTimeout(() => {
|
|
5734
5775
|
// Skip if the bib re-opened, or if focus moved intentionally outside the dropdown (not to body).
|
|
@@ -5740,7 +5781,7 @@ class AuroDropdown extends AuroElement$2 {
|
|
|
5740
5781
|
return;
|
|
5741
5782
|
}
|
|
5742
5783
|
// Restore focus to the trigger.
|
|
5743
|
-
this.
|
|
5784
|
+
this.focusTrigger();
|
|
5744
5785
|
});
|
|
5745
5786
|
}
|
|
5746
5787
|
}
|
|
@@ -16921,9 +16962,10 @@ class DomHandler {
|
|
|
16921
16962
|
class BaseInput extends AuroElement$1 {
|
|
16922
16963
|
|
|
16923
16964
|
// Delegate focus to the native <input> inside the shadow root so that
|
|
16924
|
-
//
|
|
16925
|
-
//
|
|
16926
|
-
//
|
|
16965
|
+
// clicking anywhere on the input wrapper focuses the native input, and
|
|
16966
|
+
// programmatic .focus() calls on elements in the shadow DOM work correctly.
|
|
16967
|
+
// The initial-load focus theft was caused by the static `autofocus`
|
|
16968
|
+
// attribute on the bib input (now conditional), not by delegatesFocus.
|
|
16927
16969
|
static get shadowRootOptions() {
|
|
16928
16970
|
return {
|
|
16929
16971
|
...AuroElement$1.shadowRootOptions,
|
|
@@ -18600,7 +18642,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$3 {
|
|
|
18600
18642
|
}
|
|
18601
18643
|
};
|
|
18602
18644
|
|
|
18603
|
-
var formkitVersion$1 = '
|
|
18645
|
+
var formkitVersion$1 = '202607160655';
|
|
18604
18646
|
|
|
18605
18647
|
// Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
18606
18648
|
// See LICENSE in the project root for license information.
|
|
@@ -18886,18 +18928,45 @@ class AuroInput extends BaseInput {
|
|
|
18886
18928
|
* @returns {void}
|
|
18887
18929
|
*/
|
|
18888
18930
|
checkDisplayValueSlotChange() {
|
|
18889
|
-
// flatten:true resolves through auro-combobox's forwarding slot
|
|
18890
|
-
// (<slot name="displayValue" slot="displayValue">) so a clone appended
|
|
18891
|
-
// directly to auro-input's light DOM alongside the forwarder still
|
|
18892
|
-
// counts as content. The prior nodes[0].tagName === 'SLOT' recursion
|
|
18893
|
-
// discarded any siblings past the forwarder.
|
|
18894
18931
|
const slot = this.shadowRoot?.querySelector('slot[name="displayValue"]');
|
|
18895
18932
|
if (!slot) {
|
|
18933
|
+
// Shadow slot not yet rendered — fall back to checking light-DOM
|
|
18934
|
+
// children so hasDisplayValueContent isn't stuck false when called
|
|
18935
|
+
// before firstUpdated (e.g. from auro-combobox during mount).
|
|
18936
|
+
// Check for any element (including custom elements like <auro-icon>
|
|
18937
|
+
// that render via shadow DOM with no text content).
|
|
18938
|
+
const lightDomContent = this.querySelector('[slot="displayValue"]:not(slot)');
|
|
18939
|
+
this.hasDisplayValueContent = Boolean(lightDomContent && (
|
|
18940
|
+
lightDomContent.textContent.trim().length > 0 ||
|
|
18941
|
+
lightDomContent.children.length > 0 ||
|
|
18942
|
+
lightDomContent.shadowRoot !== null
|
|
18943
|
+
));
|
|
18944
|
+
this.requestUpdate();
|
|
18896
18945
|
return;
|
|
18897
18946
|
}
|
|
18898
18947
|
const nodes = slot.assignedNodes({ flatten: true });
|
|
18899
18948
|
|
|
18900
|
-
|
|
18949
|
+
// Check for actual visible content, not just node existence.
|
|
18950
|
+
// An empty <span slot="displayValue"></span> forwarded from the
|
|
18951
|
+
// consumer should not be treated as "has content" — it causes the
|
|
18952
|
+
// displayValue wrapper to render (with hasContent class) but show
|
|
18953
|
+
// nothing, blocking the combobox's synthetic displayValue from
|
|
18954
|
+
// being visible on preset/deeplink load.
|
|
18955
|
+
// Custom elements (e.g. <auro-icon>) that render via shadow DOM are
|
|
18956
|
+
// treated as content even when they have no text or light-DOM children.
|
|
18957
|
+
this.hasDisplayValueContent = nodes.some((node) => {
|
|
18958
|
+
if (node.nodeType === Node.TEXT_NODE) {
|
|
18959
|
+
return node.textContent.trim().length > 0;
|
|
18960
|
+
}
|
|
18961
|
+
if (node.nodeType === Node.ELEMENT_NODE) {
|
|
18962
|
+
return node.textContent.trim().length > 0 ||
|
|
18963
|
+
node.children.length > 0 ||
|
|
18964
|
+
node.shadowRoot !== null;
|
|
18965
|
+
}
|
|
18966
|
+
return false;
|
|
18967
|
+
});
|
|
18968
|
+
|
|
18969
|
+
this.requestUpdate();
|
|
18901
18970
|
}
|
|
18902
18971
|
|
|
18903
18972
|
firstUpdated() {
|
|
@@ -19724,7 +19793,7 @@ class AuroBibtemplate extends i$3 {
|
|
|
19724
19793
|
}
|
|
19725
19794
|
}
|
|
19726
19795
|
|
|
19727
|
-
var formkitVersion = '
|
|
19796
|
+
var formkitVersion = '202607160655';
|
|
19728
19797
|
|
|
19729
19798
|
var styleCss$3 = i$6`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}:host{display:block;text-align:left}:host [auro-dropdown]{--ds-auro-dropdown-trigger-background-color: transparent}:host #inputInBib::part(wrapper){box-shadow:none}:host #inputInBib::part(accent-left){display:none}:host([layout*=classic]) [auro-input]{width:100%}:host([layout*=classic]) [auro-input]::part(helpText){display:none}:host([layout*=classic]) #slotHolder{display:none}`;
|
|
19730
19799
|
|
|
@@ -20776,6 +20845,14 @@ class AuroCombobox extends AuroElement {
|
|
|
20776
20845
|
// auroMenu-selectedOption event hasn't fired yet, or we're on remount
|
|
20777
20846
|
// with no options loaded). Synthesize a displayValue from the value so
|
|
20778
20847
|
// the overlay isn't blank.
|
|
20848
|
+
//
|
|
20849
|
+
// NOTE: This renders the raw machine value (e.g. "SEA"), not the
|
|
20850
|
+
// human-readable label (e.g. "Seattle, WA"). For consumers where
|
|
20851
|
+
// value ≠ label, this produces a brief flash of the raw value until
|
|
20852
|
+
// the option elements load and updateTriggerTextDisplay re-runs with
|
|
20853
|
+
// the correct label. This is intentionally preferred over a blank
|
|
20854
|
+
// state — the displayValueInTrigger.remove() cleanup above ensures
|
|
20855
|
+
// this placeholder is replaced once the real option is available.
|
|
20779
20856
|
const syntheticDV = document.createElement('span');
|
|
20780
20857
|
syntheticDV.setAttribute('slot', 'displayValue');
|
|
20781
20858
|
syntheticDV.textContent = this.value;
|
|
@@ -21028,7 +21105,11 @@ class AuroCombobox extends AuroElement {
|
|
|
21028
21105
|
// after the dropdown layout settles.
|
|
21029
21106
|
|
|
21030
21107
|
doubleRaf(() => {
|
|
21031
|
-
this
|
|
21108
|
+
// Guard: skip if the dropdown closed before this rAF fired
|
|
21109
|
+
// (e.g. user selected an option immediately after the bib opened).
|
|
21110
|
+
if (this.dropdownOpen) {
|
|
21111
|
+
this.setInputFocus();
|
|
21112
|
+
}
|
|
21032
21113
|
if (this._inFullscreenTransition) {
|
|
21033
21114
|
this._inFullscreenTransition = false;
|
|
21034
21115
|
}
|
|
@@ -21075,7 +21156,9 @@ class AuroCombobox extends AuroElement {
|
|
|
21075
21156
|
}
|
|
21076
21157
|
|
|
21077
21158
|
this._scheduleTimer(() => {
|
|
21078
|
-
this.
|
|
21159
|
+
if (this.dropdown.isPopoverVisible) {
|
|
21160
|
+
this.setInputFocus();
|
|
21161
|
+
}
|
|
21079
21162
|
}, 0);
|
|
21080
21163
|
});
|
|
21081
21164
|
}
|
|
@@ -21084,14 +21167,19 @@ class AuroCombobox extends AuroElement {
|
|
|
21084
21167
|
* @private
|
|
21085
21168
|
*/
|
|
21086
21169
|
setClearBtnFocus() {
|
|
21087
|
-
|
|
21088
|
-
|
|
21089
|
-
//
|
|
21090
|
-
//
|
|
21091
|
-
|
|
21170
|
+
doubleRaf(() => {
|
|
21171
|
+
// First establish focus inside the input's shadow root.
|
|
21172
|
+
// Without this, clearBtn.focus() silently fails when focus is on
|
|
21173
|
+
// document.body (e.g. after a click selection closes the bib dialog).
|
|
21174
|
+
// delegatesFocus on BaseInput routes this to the native <input>.
|
|
21175
|
+
this.input.focus();
|
|
21176
|
+
|
|
21177
|
+
// Now move focus to the clear button within the same shadow root.
|
|
21178
|
+
const clearBtn = this.input.shadowRoot.querySelector('.clearBtn');
|
|
21179
|
+
if (clearBtn) {
|
|
21092
21180
|
clearBtn.focus();
|
|
21093
|
-
}
|
|
21094
|
-
}
|
|
21181
|
+
}
|
|
21182
|
+
});
|
|
21095
21183
|
}
|
|
21096
21184
|
|
|
21097
21185
|
/**
|
|
@@ -21302,6 +21390,9 @@ class AuroCombobox extends AuroElement {
|
|
|
21302
21390
|
// only — fresh user selections take the existing hideBib path.
|
|
21303
21391
|
if (isEcho && this.menu.optionSelected) {
|
|
21304
21392
|
this._programmaticFilterRefresh = true;
|
|
21393
|
+
this.updateComplete.then(() => {
|
|
21394
|
+
this._programmaticFilterRefresh = false;
|
|
21395
|
+
});
|
|
21305
21396
|
}
|
|
21306
21397
|
});
|
|
21307
21398
|
|
|
@@ -21532,15 +21623,6 @@ class AuroCombobox extends AuroElement {
|
|
|
21532
21623
|
* @returns {void}
|
|
21533
21624
|
*/
|
|
21534
21625
|
handleTriggerInputValueChange(event) {
|
|
21535
|
-
// Clear a stale _programmaticFilterRefresh when the user is genuinely
|
|
21536
|
-
// interacting. On mount, updated('value') sets the flag, but the early
|
|
21537
|
-
// return at `this.value === this.input.value` exits before clearing it.
|
|
21538
|
-
// Without this, the first keystroke after mount fails to set _userTyped
|
|
21539
|
-
// and the bib doesn't open.
|
|
21540
|
-
if (this._programmaticFilterRefresh && this.componentHasFocus) {
|
|
21541
|
-
this._programmaticFilterRefresh = false;
|
|
21542
|
-
}
|
|
21543
|
-
|
|
21544
21626
|
// 'input' fires for every user-initiated value change — typing, paste,
|
|
21545
21627
|
// IME composition end, dead-key composition, drag-drop. Flip _userTyped
|
|
21546
21628
|
// here so updated('availableOptions') auto-opens the bib for sources
|
|
@@ -21563,10 +21645,6 @@ class AuroCombobox extends AuroElement {
|
|
|
21563
21645
|
if (this.dropdown.isBibFullscreen && this.input.value && this.input.value.length > 0 && this.dropdown.isPopoverVisible) {
|
|
21564
21646
|
this.setInputFocus();
|
|
21565
21647
|
}
|
|
21566
|
-
|
|
21567
|
-
if (this._programmaticFilterRefresh) {
|
|
21568
|
-
this._programmaticFilterRefresh = false;
|
|
21569
|
-
}
|
|
21570
21648
|
}
|
|
21571
21649
|
|
|
21572
21650
|
/**
|
|
@@ -21765,6 +21843,12 @@ class AuroCombobox extends AuroElement {
|
|
|
21765
21843
|
// setting the flag unconditionally here masks the user-typed open path.
|
|
21766
21844
|
if (!this._userTyped) {
|
|
21767
21845
|
this._programmaticFilterRefresh = true;
|
|
21846
|
+
// Self-clear after this update cycle completes. This collapses
|
|
21847
|
+
// the previous scattered clear-points into one and prevents the
|
|
21848
|
+
// flag from surviving into the next user interaction.
|
|
21849
|
+
this.updateComplete.then(() => {
|
|
21850
|
+
this._programmaticFilterRefresh = false;
|
|
21851
|
+
});
|
|
21768
21852
|
}
|
|
21769
21853
|
|
|
21770
21854
|
if (this.input.value !== this.value) {
|
|
@@ -21854,10 +21938,6 @@ class AuroCombobox extends AuroElement {
|
|
|
21854
21938
|
} else if (!this.dropdown.isBibFullscreen) {
|
|
21855
21939
|
this.hideBib();
|
|
21856
21940
|
}
|
|
21857
|
-
|
|
21858
|
-
if (this._programmaticFilterRefresh) {
|
|
21859
|
-
this._programmaticFilterRefresh = false;
|
|
21860
|
-
}
|
|
21861
21941
|
}
|
|
21862
21942
|
|
|
21863
21943
|
if (changedProperties.has('error')) {
|
|
@@ -22039,7 +22119,7 @@ class AuroCombobox extends AuroElement {
|
|
|
22039
22119
|
<slot @slotchange="${this.handleSlotChange}"></slot>
|
|
22040
22120
|
<${this.inputTag}
|
|
22041
22121
|
id="inputInBib"
|
|
22042
|
-
autofocus
|
|
22122
|
+
?autofocus="${this.dropdownOpen && this.dropdown?.isBibFullscreen}"
|
|
22043
22123
|
@input="${this.handleInputValueChange}"
|
|
22044
22124
|
.a11yActivedescendant="${this.dropdownOpen && this.optionActive ? this.optionActive.id : undefined}"
|
|
22045
22125
|
.a11yControls=${`${this.dropdownId}-floater-bib`}
|