@aurodesignsystem-dev/auro-formkit 0.0.0-pr1400.0 → 0.0.0-pr1400.1
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/api.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/api.min.js +117 -68
- package/components/combobox/demo/index.min.js +117 -68
- package/components/combobox/dist/auro-combobox.d.ts +2 -1
- package/components/combobox/dist/comboboxKeyboardStrategy.d.ts +1 -1
- package/components/combobox/dist/index.js +117 -68
- package/components/combobox/dist/registered.js +117 -68
- package/components/counter/demo/api.min.js +2 -2
- package/components/counter/demo/index.min.js +2 -2
- package/components/counter/dist/index.js +2 -2
- package/components/counter/dist/registered.js +2 -2
- package/components/datepicker/demo/api.min.js +3 -3
- package/components/datepicker/demo/index.min.js +3 -3
- package/components/datepicker/dist/index.js +3 -3
- package/components/datepicker/dist/registered.js +3 -3
- package/components/dropdown/demo/api.min.js +1 -1
- package/components/dropdown/demo/index.min.js +1 -1
- package/components/dropdown/dist/index.js +1 -1
- package/components/dropdown/dist/registered.js +1 -1
- package/components/form/demo/api.min.js +127 -78
- package/components/form/demo/index.min.js +127 -78
- package/components/input/demo/api.min.js +1 -1
- package/components/input/demo/index.min.js +1 -1
- package/components/input/dist/index.js +1 -1
- package/components/input/dist/registered.js +1 -1
- package/components/radio/demo/api.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/api.min.js +2 -2
- package/components/select/demo/index.min.js +2 -2
- package/components/select/dist/index.js +2 -2
- package/components/select/dist/registered.js +2 -2
- package/custom-elements.json +1 -1
- package/package.json +1 -1
|
@@ -1687,7 +1687,7 @@ class AuroHelpText extends i$2 {
|
|
|
1687
1687
|
}
|
|
1688
1688
|
}
|
|
1689
1689
|
|
|
1690
|
-
var formkitVersion = '
|
|
1690
|
+
var formkitVersion = '202603262343';
|
|
1691
1691
|
|
|
1692
1692
|
// Copyright (c) 2026 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
1693
1693
|
// See LICENSE in the project root for license information.
|
|
@@ -1679,7 +1679,7 @@ class AuroHelpText extends i$2 {
|
|
|
1679
1679
|
}
|
|
1680
1680
|
}
|
|
1681
1681
|
|
|
1682
|
-
var formkitVersion = '
|
|
1682
|
+
var formkitVersion = '202603262343';
|
|
1683
1683
|
|
|
1684
1684
|
// Copyright (c) 2026 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
1685
1685
|
// See LICENSE in the project root for license information.
|
|
@@ -1632,7 +1632,7 @@ class AuroHelpText extends LitElement {
|
|
|
1632
1632
|
}
|
|
1633
1633
|
}
|
|
1634
1634
|
|
|
1635
|
-
var formkitVersion = '
|
|
1635
|
+
var formkitVersion = '202603262343';
|
|
1636
1636
|
|
|
1637
1637
|
// Copyright (c) 2026 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
1638
1638
|
// See LICENSE in the project root for license information.
|
|
@@ -1632,7 +1632,7 @@ class AuroHelpText extends LitElement {
|
|
|
1632
1632
|
}
|
|
1633
1633
|
}
|
|
1634
1634
|
|
|
1635
|
-
var formkitVersion = '
|
|
1635
|
+
var formkitVersion = '202603262343';
|
|
1636
1636
|
|
|
1637
1637
|
// Copyright (c) 2026 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
1638
1638
|
// See LICENSE in the project root for license information.
|
|
@@ -1227,18 +1227,13 @@ function restoreTriggerAfterClose(dropdown, focusTarget, onAfterRestore) {
|
|
|
1227
1227
|
// Default path: clear inert immediately so the trigger is focusable when
|
|
1228
1228
|
// the rAF fires. With no callback there is no custom focus target, so
|
|
1229
1229
|
// dialog.close() restoring focus to the trigger is fine.
|
|
1230
|
-
|
|
1230
|
+
{
|
|
1231
1231
|
dropdown.trigger.inert = false;
|
|
1232
1232
|
}
|
|
1233
1233
|
|
|
1234
1234
|
requestAnimationFrame(() => {
|
|
1235
1235
|
if (!dropdown.isPopoverVisible) {
|
|
1236
|
-
|
|
1237
|
-
// Defer inert removal to here so dialog.close() (microtask) cannot
|
|
1238
|
-
// restore focus to the trigger before the callback's target takes over.
|
|
1239
|
-
dropdown.trigger.inert = false;
|
|
1240
|
-
onAfterRestore();
|
|
1241
|
-
} else {
|
|
1236
|
+
{
|
|
1242
1237
|
focusTarget.focus();
|
|
1243
1238
|
}
|
|
1244
1239
|
}
|
|
@@ -1322,7 +1317,6 @@ function navigateArrow(component, direction, options = {}) {
|
|
|
1322
1317
|
|
|
1323
1318
|
/* eslint-disable no-underscore-dangle */
|
|
1324
1319
|
|
|
1325
|
-
|
|
1326
1320
|
/**
|
|
1327
1321
|
* Returns the clear button element from the active input's shadow
|
|
1328
1322
|
* DOM, if available.
|
|
@@ -1353,7 +1347,7 @@ function isClearBtnFocused(ctx, clearBtn = getClearBtn(ctx)) {
|
|
|
1353
1347
|
}
|
|
1354
1348
|
|
|
1355
1349
|
const comboboxKeyboardStrategy = {
|
|
1356
|
-
Enter(component, evt, ctx) {
|
|
1350
|
+
async Enter(component, evt, ctx) {
|
|
1357
1351
|
// If the clear button has focus, let the browser activate it normally.
|
|
1358
1352
|
// stopPropagation prevents parent containers (e.g., forms) from treating
|
|
1359
1353
|
// Enter as a submit, but we must NOT call preventDefault — that would
|
|
@@ -1364,10 +1358,11 @@ const comboboxKeyboardStrategy = {
|
|
|
1364
1358
|
}
|
|
1365
1359
|
|
|
1366
1360
|
if (ctx.isExpanded && component.optionActive) {
|
|
1361
|
+
component.menu.makeSelection();
|
|
1362
|
+
await component.updateComplete;
|
|
1367
1363
|
evt.preventDefault();
|
|
1368
1364
|
evt.stopPropagation();
|
|
1369
|
-
component.
|
|
1370
|
-
component.menu.makeSelection();
|
|
1365
|
+
component.setClearBtnFocus();
|
|
1371
1366
|
} else {
|
|
1372
1367
|
// Prevent the keypress from bubbling to parent containers (e.g., forms)
|
|
1373
1368
|
// which could interpret Enter as a submit or trigger other unintended behavior.
|
|
@@ -1395,16 +1390,67 @@ const comboboxKeyboardStrategy = {
|
|
|
1395
1390
|
return;
|
|
1396
1391
|
}
|
|
1397
1392
|
|
|
1393
|
+
if (ctx.isModal) {
|
|
1394
|
+
if (!ctx.activeInput) {
|
|
1395
|
+
return;
|
|
1396
|
+
}
|
|
1397
|
+
|
|
1398
|
+
// Active option → select immediately and close the dialog.
|
|
1399
|
+
// Flag the component so the close handler focuses the trigger's
|
|
1400
|
+
// clear button instead of the input. Set flags before makeSelection
|
|
1401
|
+
// because the value change triggers showBib via Lit's updated().
|
|
1402
|
+
if (component.optionActive) {
|
|
1403
|
+
evt.preventDefault();
|
|
1404
|
+
component._focusClearBtnAfterClose = true;
|
|
1405
|
+
component._clearBtnFocusPending = true;
|
|
1406
|
+
component.menu.makeSelection();
|
|
1407
|
+
component.hideBib();
|
|
1408
|
+
return;
|
|
1409
|
+
}
|
|
1410
|
+
|
|
1411
|
+
const clearBtn = getClearBtn(ctx);
|
|
1412
|
+
const clearBtnHasFocus = isClearBtnFocused(ctx, clearBtn);
|
|
1413
|
+
|
|
1414
|
+
// No active option, input has a value, clear button not focused →
|
|
1415
|
+
// move focus to the dialog's clear button.
|
|
1416
|
+
if (clearBtn && !clearBtnHasFocus && ctx.activeInput.value) {
|
|
1417
|
+
// Force clear button container visible to work around Safari not
|
|
1418
|
+
// propagating :focus-within through shadow DOM boundaries, which
|
|
1419
|
+
// causes .wrapper:not(:focus-within) to hide .notification.clear.
|
|
1420
|
+
const clearContainer = clearBtn.closest('.clear');
|
|
1421
|
+
if (clearContainer) {
|
|
1422
|
+
clearContainer.style.display = 'flex';
|
|
1423
|
+
clearBtn.addEventListener('focusout', () => {
|
|
1424
|
+
// Delay cleanup so :focus-within settles when focus moves
|
|
1425
|
+
// to a sibling (e.g., Shift+Tab back to the input).
|
|
1426
|
+
requestAnimationFrame(() => {
|
|
1427
|
+
clearContainer.style.display = '';
|
|
1428
|
+
});
|
|
1429
|
+
}, { once: true });
|
|
1430
|
+
}
|
|
1431
|
+
|
|
1432
|
+
// Focus the native button inside auro-button so the browser
|
|
1433
|
+
// treats it as a real focusable element inside the dialog.
|
|
1434
|
+
const nativeBtn = clearBtn.shadowRoot && clearBtn.shadowRoot.querySelector('button');
|
|
1435
|
+
if (nativeBtn) {
|
|
1436
|
+
nativeBtn.focus();
|
|
1437
|
+
} else {
|
|
1438
|
+
clearBtn.focus();
|
|
1439
|
+
}
|
|
1440
|
+
return;
|
|
1441
|
+
}
|
|
1442
|
+
|
|
1443
|
+
// No active option, no clear button (or already focused) → just close.
|
|
1444
|
+
component.hideBib();
|
|
1445
|
+
return;
|
|
1446
|
+
}
|
|
1447
|
+
|
|
1448
|
+
// Non-fullscreen: select + close
|
|
1398
1449
|
if (component.optionActive) {
|
|
1399
1450
|
evt.preventDefault();
|
|
1400
|
-
component.
|
|
1451
|
+
component._focusClearBtnAfterClose = true;
|
|
1452
|
+
component._clearBtnFocusPending = true;
|
|
1401
1453
|
component.menu.makeSelection();
|
|
1402
|
-
// Do NOT call hideBib() here — makeSelection() defers it via
|
|
1403
|
-
// auroMenu-selectedOption's setTimeout(hideBib). Calling hideBib()
|
|
1404
|
-
// synchronously sets isPopoverVisible=false, causing
|
|
1405
|
-
// handleInputValueChange's Lit microtask to call showBib() (iOS guard),
|
|
1406
|
-
// re-opening the dialog and trapping focus before setClearBtnFocus fires.
|
|
1407
|
-
return;
|
|
1408
1454
|
}
|
|
1409
1455
|
component.hideBib();
|
|
1410
1456
|
},
|
|
@@ -5055,7 +5101,7 @@ let AuroHelpText$2 = class AuroHelpText extends i$4 {
|
|
|
5055
5101
|
}
|
|
5056
5102
|
};
|
|
5057
5103
|
|
|
5058
|
-
var formkitVersion$2 = '
|
|
5104
|
+
var formkitVersion$2 = '202603262343';
|
|
5059
5105
|
|
|
5060
5106
|
let AuroElement$2 = class AuroElement extends i$4 {
|
|
5061
5107
|
static get properties() {
|
|
@@ -12819,7 +12865,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$4 {
|
|
|
12819
12865
|
}
|
|
12820
12866
|
};
|
|
12821
12867
|
|
|
12822
|
-
var formkitVersion$1 = '
|
|
12868
|
+
var formkitVersion$1 = '202603262343';
|
|
12823
12869
|
|
|
12824
12870
|
// Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
12825
12871
|
// See LICENSE in the project root for license information.
|
|
@@ -13858,7 +13904,7 @@ class AuroBibtemplate extends i$4 {
|
|
|
13858
13904
|
}
|
|
13859
13905
|
}
|
|
13860
13906
|
|
|
13861
|
-
var formkitVersion = '
|
|
13907
|
+
var formkitVersion = '202603262343';
|
|
13862
13908
|
|
|
13863
13909
|
var styleCss$3 = i$7`.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}`;
|
|
13864
13910
|
|
|
@@ -14290,7 +14336,6 @@ class AuroCombobox extends AuroElement {
|
|
|
14290
14336
|
this.dropdownOpen = false;
|
|
14291
14337
|
this.triggerExpandedState = false;
|
|
14292
14338
|
this._expandedTimeout = null;
|
|
14293
|
-
this._pendingClearBtnFocus = false;
|
|
14294
14339
|
this._inFullscreenTransition = false;
|
|
14295
14340
|
this.errorMessage = null;
|
|
14296
14341
|
this.isHiddenWhileLoading = false;
|
|
@@ -14869,6 +14914,12 @@ class AuroCombobox extends AuroElement {
|
|
|
14869
14914
|
* @returns {void}
|
|
14870
14915
|
*/
|
|
14871
14916
|
showBib() {
|
|
14917
|
+
// Suppress reopening the bib when a Tab selection is in progress —
|
|
14918
|
+
// the value change from makeSelection triggers availableOptions update
|
|
14919
|
+
// which calls showBib from updated(), but the bib should stay closed.
|
|
14920
|
+
if (this._clearBtnFocusPending) {
|
|
14921
|
+
return;
|
|
14922
|
+
}
|
|
14872
14923
|
if (!this.input.value && !this.dropdown.isBibFullscreen) {
|
|
14873
14924
|
this.dropdown.hide();
|
|
14874
14925
|
return;
|
|
@@ -14939,25 +14990,36 @@ class AuroCombobox extends AuroElement {
|
|
|
14939
14990
|
// during fullscreen open to prevent touch pass-through.
|
|
14940
14991
|
this.menu.style.pointerEvents = '';
|
|
14941
14992
|
|
|
14942
|
-
|
|
14943
|
-
|
|
14944
|
-
|
|
14945
|
-
|
|
14946
|
-
//
|
|
14947
|
-
//
|
|
14948
|
-
|
|
14949
|
-
|
|
14950
|
-
restoreTriggerAfterClose(this.dropdown, this.input
|
|
14951
|
-
|
|
14952
|
-
|
|
14953
|
-
|
|
14954
|
-
|
|
14955
|
-
|
|
14956
|
-
}
|
|
14993
|
+
const shouldFocusClearBtn = this._focusClearBtnAfterClose;
|
|
14994
|
+
this._focusClearBtnAfterClose = false;
|
|
14995
|
+
|
|
14996
|
+
if (shouldFocusClearBtn) {
|
|
14997
|
+
// Set a guard so duplicate toggle events don't call
|
|
14998
|
+
// restoreTriggerAfterClose and steal focus from the clear button.
|
|
14999
|
+
this._clearBtnFocusPending = true;
|
|
15000
|
+
|
|
15001
|
+
restoreTriggerAfterClose(this.dropdown, this.input);
|
|
15002
|
+
|
|
15003
|
+
if (this.input.componentHasFocus) {
|
|
15004
|
+
// Desktop: input already has focus, redirect to clear button
|
|
15005
|
+
// after restoreTriggerAfterClose's rAF settles.
|
|
15006
|
+
requestAnimationFrame(() => {
|
|
14957
15007
|
this.setClearBtnFocus();
|
|
14958
|
-
|
|
14959
|
-
|
|
14960
|
-
|
|
15008
|
+
this._clearBtnFocusPending = false;
|
|
15009
|
+
});
|
|
15010
|
+
} else {
|
|
15011
|
+
// Fullscreen: input will receive focus after dialog.close().
|
|
15012
|
+
// Listen for that focus event then redirect to clear button.
|
|
15013
|
+
const onFocus = () => {
|
|
15014
|
+
this.input.removeEventListener('focusin', onFocus);
|
|
15015
|
+
requestAnimationFrame(() => {
|
|
15016
|
+
this.setClearBtnFocus();
|
|
15017
|
+
this._clearBtnFocusPending = false;
|
|
15018
|
+
});
|
|
15019
|
+
};
|
|
15020
|
+
this.input.addEventListener('focusin', onFocus);
|
|
15021
|
+
}
|
|
15022
|
+
} else if (!this._clearBtnFocusPending) {
|
|
14961
15023
|
restoreTriggerAfterClose(this.dropdown, this.input);
|
|
14962
15024
|
}
|
|
14963
15025
|
}
|
|
@@ -15049,40 +15111,27 @@ class AuroCombobox extends AuroElement {
|
|
|
15049
15111
|
*/
|
|
15050
15112
|
setClearBtnFocus() {
|
|
15051
15113
|
const clearBtn = this.input.shadowRoot.querySelector('.clearBtn');
|
|
15052
|
-
if (
|
|
15053
|
-
|
|
15054
|
-
|
|
15055
|
-
|
|
15056
|
-
|
|
15057
|
-
|
|
15058
|
-
|
|
15059
|
-
|
|
15060
|
-
if (clearContainer) {
|
|
15061
|
-
clearContainer.style.display = 'flex';
|
|
15062
|
-
}
|
|
15063
|
-
const nativeBtn = clearBtn.shadowRoot && clearBtn.shadowRoot.querySelector('button');
|
|
15064
|
-
|
|
15065
|
-
if (nativeBtn) {
|
|
15066
|
-
nativeBtn.focus();
|
|
15067
|
-
} else {
|
|
15068
|
-
clearBtn.focus();
|
|
15069
|
-
}
|
|
15070
|
-
|
|
15071
|
-
// If focus failed (e.g. element inert, disabled, or hidden for another reason),
|
|
15072
|
-
// clean up the inline style immediately so the clear UI does not stay visible.
|
|
15073
|
-
const focusLanded = clearBtn.shadowRoot
|
|
15074
|
-
? clearBtn.shadowRoot.activeElement !== null
|
|
15075
|
-
: document.activeElement === clearBtn;
|
|
15076
|
-
|
|
15077
|
-
if (clearContainer) {
|
|
15078
|
-
if (focusLanded) {
|
|
15114
|
+
if (clearBtn) {
|
|
15115
|
+
// Force the clear button container visible — without :focus-within
|
|
15116
|
+
// the CSS rule `.wrapper:not(:focus-within) .notification.clear`
|
|
15117
|
+
// hides the container with display:none, preventing focus.
|
|
15118
|
+
const clearContainer = clearBtn.closest('.clear');
|
|
15119
|
+
if (clearContainer) {
|
|
15120
|
+
clearContainer.style.display = 'flex';
|
|
15079
15121
|
clearBtn.addEventListener('focusout', () => {
|
|
15080
15122
|
requestAnimationFrame(() => {
|
|
15081
15123
|
clearContainer.style.display = '';
|
|
15082
15124
|
});
|
|
15083
15125
|
}, { once: true });
|
|
15126
|
+
}
|
|
15127
|
+
|
|
15128
|
+
// Focus the native button inside auro-button so the browser
|
|
15129
|
+
// treats it as a real focusable element.
|
|
15130
|
+
const nativeBtn = clearBtn.shadowRoot && clearBtn.shadowRoot.querySelector('button');
|
|
15131
|
+
if (nativeBtn) {
|
|
15132
|
+
nativeBtn.focus();
|
|
15084
15133
|
} else {
|
|
15085
|
-
|
|
15134
|
+
clearBtn.focus();
|
|
15086
15135
|
}
|
|
15087
15136
|
}
|
|
15088
15137
|
}
|
|
@@ -1150,18 +1150,13 @@ function restoreTriggerAfterClose(dropdown, focusTarget, onAfterRestore) {
|
|
|
1150
1150
|
// Default path: clear inert immediately so the trigger is focusable when
|
|
1151
1151
|
// the rAF fires. With no callback there is no custom focus target, so
|
|
1152
1152
|
// dialog.close() restoring focus to the trigger is fine.
|
|
1153
|
-
|
|
1153
|
+
{
|
|
1154
1154
|
dropdown.trigger.inert = false;
|
|
1155
1155
|
}
|
|
1156
1156
|
|
|
1157
1157
|
requestAnimationFrame(() => {
|
|
1158
1158
|
if (!dropdown.isPopoverVisible) {
|
|
1159
|
-
|
|
1160
|
-
// Defer inert removal to here so dialog.close() (microtask) cannot
|
|
1161
|
-
// restore focus to the trigger before the callback's target takes over.
|
|
1162
|
-
dropdown.trigger.inert = false;
|
|
1163
|
-
onAfterRestore();
|
|
1164
|
-
} else {
|
|
1159
|
+
{
|
|
1165
1160
|
focusTarget.focus();
|
|
1166
1161
|
}
|
|
1167
1162
|
}
|
|
@@ -1245,7 +1240,6 @@ function navigateArrow(component, direction, options = {}) {
|
|
|
1245
1240
|
|
|
1246
1241
|
/* eslint-disable no-underscore-dangle */
|
|
1247
1242
|
|
|
1248
|
-
|
|
1249
1243
|
/**
|
|
1250
1244
|
* Returns the clear button element from the active input's shadow
|
|
1251
1245
|
* DOM, if available.
|
|
@@ -1276,7 +1270,7 @@ function isClearBtnFocused(ctx, clearBtn = getClearBtn(ctx)) {
|
|
|
1276
1270
|
}
|
|
1277
1271
|
|
|
1278
1272
|
const comboboxKeyboardStrategy = {
|
|
1279
|
-
Enter(component, evt, ctx) {
|
|
1273
|
+
async Enter(component, evt, ctx) {
|
|
1280
1274
|
// If the clear button has focus, let the browser activate it normally.
|
|
1281
1275
|
// stopPropagation prevents parent containers (e.g., forms) from treating
|
|
1282
1276
|
// Enter as a submit, but we must NOT call preventDefault — that would
|
|
@@ -1287,10 +1281,11 @@ const comboboxKeyboardStrategy = {
|
|
|
1287
1281
|
}
|
|
1288
1282
|
|
|
1289
1283
|
if (ctx.isExpanded && component.optionActive) {
|
|
1284
|
+
component.menu.makeSelection();
|
|
1285
|
+
await component.updateComplete;
|
|
1290
1286
|
evt.preventDefault();
|
|
1291
1287
|
evt.stopPropagation();
|
|
1292
|
-
component.
|
|
1293
|
-
component.menu.makeSelection();
|
|
1288
|
+
component.setClearBtnFocus();
|
|
1294
1289
|
} else {
|
|
1295
1290
|
// Prevent the keypress from bubbling to parent containers (e.g., forms)
|
|
1296
1291
|
// which could interpret Enter as a submit or trigger other unintended behavior.
|
|
@@ -1318,16 +1313,67 @@ const comboboxKeyboardStrategy = {
|
|
|
1318
1313
|
return;
|
|
1319
1314
|
}
|
|
1320
1315
|
|
|
1316
|
+
if (ctx.isModal) {
|
|
1317
|
+
if (!ctx.activeInput) {
|
|
1318
|
+
return;
|
|
1319
|
+
}
|
|
1320
|
+
|
|
1321
|
+
// Active option → select immediately and close the dialog.
|
|
1322
|
+
// Flag the component so the close handler focuses the trigger's
|
|
1323
|
+
// clear button instead of the input. Set flags before makeSelection
|
|
1324
|
+
// because the value change triggers showBib via Lit's updated().
|
|
1325
|
+
if (component.optionActive) {
|
|
1326
|
+
evt.preventDefault();
|
|
1327
|
+
component._focusClearBtnAfterClose = true;
|
|
1328
|
+
component._clearBtnFocusPending = true;
|
|
1329
|
+
component.menu.makeSelection();
|
|
1330
|
+
component.hideBib();
|
|
1331
|
+
return;
|
|
1332
|
+
}
|
|
1333
|
+
|
|
1334
|
+
const clearBtn = getClearBtn(ctx);
|
|
1335
|
+
const clearBtnHasFocus = isClearBtnFocused(ctx, clearBtn);
|
|
1336
|
+
|
|
1337
|
+
// No active option, input has a value, clear button not focused →
|
|
1338
|
+
// move focus to the dialog's clear button.
|
|
1339
|
+
if (clearBtn && !clearBtnHasFocus && ctx.activeInput.value) {
|
|
1340
|
+
// Force clear button container visible to work around Safari not
|
|
1341
|
+
// propagating :focus-within through shadow DOM boundaries, which
|
|
1342
|
+
// causes .wrapper:not(:focus-within) to hide .notification.clear.
|
|
1343
|
+
const clearContainer = clearBtn.closest('.clear');
|
|
1344
|
+
if (clearContainer) {
|
|
1345
|
+
clearContainer.style.display = 'flex';
|
|
1346
|
+
clearBtn.addEventListener('focusout', () => {
|
|
1347
|
+
// Delay cleanup so :focus-within settles when focus moves
|
|
1348
|
+
// to a sibling (e.g., Shift+Tab back to the input).
|
|
1349
|
+
requestAnimationFrame(() => {
|
|
1350
|
+
clearContainer.style.display = '';
|
|
1351
|
+
});
|
|
1352
|
+
}, { once: true });
|
|
1353
|
+
}
|
|
1354
|
+
|
|
1355
|
+
// Focus the native button inside auro-button so the browser
|
|
1356
|
+
// treats it as a real focusable element inside the dialog.
|
|
1357
|
+
const nativeBtn = clearBtn.shadowRoot && clearBtn.shadowRoot.querySelector('button');
|
|
1358
|
+
if (nativeBtn) {
|
|
1359
|
+
nativeBtn.focus();
|
|
1360
|
+
} else {
|
|
1361
|
+
clearBtn.focus();
|
|
1362
|
+
}
|
|
1363
|
+
return;
|
|
1364
|
+
}
|
|
1365
|
+
|
|
1366
|
+
// No active option, no clear button (or already focused) → just close.
|
|
1367
|
+
component.hideBib();
|
|
1368
|
+
return;
|
|
1369
|
+
}
|
|
1370
|
+
|
|
1371
|
+
// Non-fullscreen: select + close
|
|
1321
1372
|
if (component.optionActive) {
|
|
1322
1373
|
evt.preventDefault();
|
|
1323
|
-
component.
|
|
1374
|
+
component._focusClearBtnAfterClose = true;
|
|
1375
|
+
component._clearBtnFocusPending = true;
|
|
1324
1376
|
component.menu.makeSelection();
|
|
1325
|
-
// Do NOT call hideBib() here — makeSelection() defers it via
|
|
1326
|
-
// auroMenu-selectedOption's setTimeout(hideBib). Calling hideBib()
|
|
1327
|
-
// synchronously sets isPopoverVisible=false, causing
|
|
1328
|
-
// handleInputValueChange's Lit microtask to call showBib() (iOS guard),
|
|
1329
|
-
// re-opening the dialog and trapping focus before setClearBtnFocus fires.
|
|
1330
|
-
return;
|
|
1331
1377
|
}
|
|
1332
1378
|
component.hideBib();
|
|
1333
1379
|
},
|
|
@@ -4978,7 +5024,7 @@ let AuroHelpText$2 = class AuroHelpText extends i$4 {
|
|
|
4978
5024
|
}
|
|
4979
5025
|
};
|
|
4980
5026
|
|
|
4981
|
-
var formkitVersion$2 = '
|
|
5027
|
+
var formkitVersion$2 = '202603262343';
|
|
4982
5028
|
|
|
4983
5029
|
let AuroElement$2 = class AuroElement extends i$4 {
|
|
4984
5030
|
static get properties() {
|
|
@@ -12742,7 +12788,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$4 {
|
|
|
12742
12788
|
}
|
|
12743
12789
|
};
|
|
12744
12790
|
|
|
12745
|
-
var formkitVersion$1 = '
|
|
12791
|
+
var formkitVersion$1 = '202603262343';
|
|
12746
12792
|
|
|
12747
12793
|
// Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
12748
12794
|
// See LICENSE in the project root for license information.
|
|
@@ -13781,7 +13827,7 @@ class AuroBibtemplate extends i$4 {
|
|
|
13781
13827
|
}
|
|
13782
13828
|
}
|
|
13783
13829
|
|
|
13784
|
-
var formkitVersion = '
|
|
13830
|
+
var formkitVersion = '202603262343';
|
|
13785
13831
|
|
|
13786
13832
|
var styleCss$3 = i$7`.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}`;
|
|
13787
13833
|
|
|
@@ -14213,7 +14259,6 @@ class AuroCombobox extends AuroElement {
|
|
|
14213
14259
|
this.dropdownOpen = false;
|
|
14214
14260
|
this.triggerExpandedState = false;
|
|
14215
14261
|
this._expandedTimeout = null;
|
|
14216
|
-
this._pendingClearBtnFocus = false;
|
|
14217
14262
|
this._inFullscreenTransition = false;
|
|
14218
14263
|
this.errorMessage = null;
|
|
14219
14264
|
this.isHiddenWhileLoading = false;
|
|
@@ -14792,6 +14837,12 @@ class AuroCombobox extends AuroElement {
|
|
|
14792
14837
|
* @returns {void}
|
|
14793
14838
|
*/
|
|
14794
14839
|
showBib() {
|
|
14840
|
+
// Suppress reopening the bib when a Tab selection is in progress —
|
|
14841
|
+
// the value change from makeSelection triggers availableOptions update
|
|
14842
|
+
// which calls showBib from updated(), but the bib should stay closed.
|
|
14843
|
+
if (this._clearBtnFocusPending) {
|
|
14844
|
+
return;
|
|
14845
|
+
}
|
|
14795
14846
|
if (!this.input.value && !this.dropdown.isBibFullscreen) {
|
|
14796
14847
|
this.dropdown.hide();
|
|
14797
14848
|
return;
|
|
@@ -14862,25 +14913,36 @@ class AuroCombobox extends AuroElement {
|
|
|
14862
14913
|
// during fullscreen open to prevent touch pass-through.
|
|
14863
14914
|
this.menu.style.pointerEvents = '';
|
|
14864
14915
|
|
|
14865
|
-
|
|
14866
|
-
|
|
14867
|
-
|
|
14868
|
-
|
|
14869
|
-
//
|
|
14870
|
-
//
|
|
14871
|
-
|
|
14872
|
-
|
|
14873
|
-
restoreTriggerAfterClose(this.dropdown, this.input
|
|
14874
|
-
|
|
14875
|
-
|
|
14876
|
-
|
|
14877
|
-
|
|
14878
|
-
|
|
14879
|
-
}
|
|
14916
|
+
const shouldFocusClearBtn = this._focusClearBtnAfterClose;
|
|
14917
|
+
this._focusClearBtnAfterClose = false;
|
|
14918
|
+
|
|
14919
|
+
if (shouldFocusClearBtn) {
|
|
14920
|
+
// Set a guard so duplicate toggle events don't call
|
|
14921
|
+
// restoreTriggerAfterClose and steal focus from the clear button.
|
|
14922
|
+
this._clearBtnFocusPending = true;
|
|
14923
|
+
|
|
14924
|
+
restoreTriggerAfterClose(this.dropdown, this.input);
|
|
14925
|
+
|
|
14926
|
+
if (this.input.componentHasFocus) {
|
|
14927
|
+
// Desktop: input already has focus, redirect to clear button
|
|
14928
|
+
// after restoreTriggerAfterClose's rAF settles.
|
|
14929
|
+
requestAnimationFrame(() => {
|
|
14880
14930
|
this.setClearBtnFocus();
|
|
14881
|
-
|
|
14882
|
-
|
|
14883
|
-
|
|
14931
|
+
this._clearBtnFocusPending = false;
|
|
14932
|
+
});
|
|
14933
|
+
} else {
|
|
14934
|
+
// Fullscreen: input will receive focus after dialog.close().
|
|
14935
|
+
// Listen for that focus event then redirect to clear button.
|
|
14936
|
+
const onFocus = () => {
|
|
14937
|
+
this.input.removeEventListener('focusin', onFocus);
|
|
14938
|
+
requestAnimationFrame(() => {
|
|
14939
|
+
this.setClearBtnFocus();
|
|
14940
|
+
this._clearBtnFocusPending = false;
|
|
14941
|
+
});
|
|
14942
|
+
};
|
|
14943
|
+
this.input.addEventListener('focusin', onFocus);
|
|
14944
|
+
}
|
|
14945
|
+
} else if (!this._clearBtnFocusPending) {
|
|
14884
14946
|
restoreTriggerAfterClose(this.dropdown, this.input);
|
|
14885
14947
|
}
|
|
14886
14948
|
}
|
|
@@ -14972,40 +15034,27 @@ class AuroCombobox extends AuroElement {
|
|
|
14972
15034
|
*/
|
|
14973
15035
|
setClearBtnFocus() {
|
|
14974
15036
|
const clearBtn = this.input.shadowRoot.querySelector('.clearBtn');
|
|
14975
|
-
if (
|
|
14976
|
-
|
|
14977
|
-
|
|
14978
|
-
|
|
14979
|
-
|
|
14980
|
-
|
|
14981
|
-
|
|
14982
|
-
|
|
14983
|
-
if (clearContainer) {
|
|
14984
|
-
clearContainer.style.display = 'flex';
|
|
14985
|
-
}
|
|
14986
|
-
const nativeBtn = clearBtn.shadowRoot && clearBtn.shadowRoot.querySelector('button');
|
|
14987
|
-
|
|
14988
|
-
if (nativeBtn) {
|
|
14989
|
-
nativeBtn.focus();
|
|
14990
|
-
} else {
|
|
14991
|
-
clearBtn.focus();
|
|
14992
|
-
}
|
|
14993
|
-
|
|
14994
|
-
// If focus failed (e.g. element inert, disabled, or hidden for another reason),
|
|
14995
|
-
// clean up the inline style immediately so the clear UI does not stay visible.
|
|
14996
|
-
const focusLanded = clearBtn.shadowRoot
|
|
14997
|
-
? clearBtn.shadowRoot.activeElement !== null
|
|
14998
|
-
: document.activeElement === clearBtn;
|
|
14999
|
-
|
|
15000
|
-
if (clearContainer) {
|
|
15001
|
-
if (focusLanded) {
|
|
15037
|
+
if (clearBtn) {
|
|
15038
|
+
// Force the clear button container visible — without :focus-within
|
|
15039
|
+
// the CSS rule `.wrapper:not(:focus-within) .notification.clear`
|
|
15040
|
+
// hides the container with display:none, preventing focus.
|
|
15041
|
+
const clearContainer = clearBtn.closest('.clear');
|
|
15042
|
+
if (clearContainer) {
|
|
15043
|
+
clearContainer.style.display = 'flex';
|
|
15002
15044
|
clearBtn.addEventListener('focusout', () => {
|
|
15003
15045
|
requestAnimationFrame(() => {
|
|
15004
15046
|
clearContainer.style.display = '';
|
|
15005
15047
|
});
|
|
15006
15048
|
}, { once: true });
|
|
15049
|
+
}
|
|
15050
|
+
|
|
15051
|
+
// Focus the native button inside auro-button so the browser
|
|
15052
|
+
// treats it as a real focusable element.
|
|
15053
|
+
const nativeBtn = clearBtn.shadowRoot && clearBtn.shadowRoot.querySelector('button');
|
|
15054
|
+
if (nativeBtn) {
|
|
15055
|
+
nativeBtn.focus();
|
|
15007
15056
|
} else {
|
|
15008
|
-
|
|
15057
|
+
clearBtn.focus();
|
|
15009
15058
|
}
|
|
15010
15059
|
}
|
|
15011
15060
|
}
|
|
@@ -361,7 +361,6 @@ export class AuroCombobox extends AuroElement {
|
|
|
361
361
|
dropdownOpen: any;
|
|
362
362
|
triggerExpandedState: boolean;
|
|
363
363
|
_expandedTimeout: NodeJS.Timeout;
|
|
364
|
-
_pendingClearBtnFocus: boolean;
|
|
365
364
|
_inFullscreenTransition: boolean;
|
|
366
365
|
errorMessage: any;
|
|
367
366
|
isHiddenWhileLoading: boolean;
|
|
@@ -429,6 +428,8 @@ export class AuroCombobox extends AuroElement {
|
|
|
429
428
|
* @returns {void}
|
|
430
429
|
*/
|
|
431
430
|
private configureDropdown;
|
|
431
|
+
_focusClearBtnAfterClose: boolean;
|
|
432
|
+
_clearBtnFocusPending: boolean;
|
|
432
433
|
bibtemplate: any;
|
|
433
434
|
inputInBib: any;
|
|
434
435
|
/**
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
export namespace comboboxKeyboardStrategy {
|
|
2
|
-
function Enter(component: any, evt: any, ctx: any): void
|
|
2
|
+
function Enter(component: any, evt: any, ctx: any): Promise<void>;
|
|
3
3
|
function Tab(component: any, evt: any, ctx: any): void;
|
|
4
4
|
function ArrowUp(component: any, evt: any, ctx: any): void;
|
|
5
5
|
function ArrowDown(component: any, evt: any, ctx: any): void;
|