@aurodesignsystem-dev/auro-formkit 0.0.0-pr1413.0 → 0.0.0-pr1413.2
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 +121 -129
- package/components/combobox/demo/index.min.js +121 -129
- package/components/combobox/demo/keyboardBehavior.md +9 -36
- package/components/combobox/dist/auro-combobox.d.ts +13 -0
- package/components/combobox/dist/comboboxKeyboardStrategy.d.ts +4 -2
- package/components/combobox/dist/index.js +120 -128
- package/components/combobox/dist/registered.js +120 -128
- package/components/counter/demo/api.min.js +13 -3
- package/components/counter/demo/index.min.js +13 -3
- package/components/counter/dist/index.js +13 -3
- package/components/counter/dist/registered.js +13 -3
- package/components/datepicker/demo/api.min.js +44 -21
- package/components/datepicker/demo/index.min.js +44 -21
- package/components/datepicker/dist/index.js +44 -21
- package/components/datepicker/dist/registered.js +44 -21
- package/components/dropdown/demo/api.md +29 -28
- package/components/dropdown/demo/api.min.js +12 -2
- package/components/dropdown/demo/index.min.js +12 -2
- package/components/dropdown/dist/auro-dropdown.d.ts +8 -0
- package/components/dropdown/dist/index.js +12 -2
- package/components/dropdown/dist/registered.js +12 -2
- package/components/form/demo/api.min.js +363 -264
- package/components/form/demo/index.min.js +363 -264
- package/components/input/demo/api.min.js +102 -77
- package/components/input/demo/index.min.js +102 -77
- package/components/input/dist/auro-input.d.ts +11 -0
- package/components/input/dist/base-input.d.ts +1 -0
- package/components/input/dist/index.js +32 -18
- package/components/input/dist/registered.js +32 -18
- package/components/menu/demo/api.min.js +1 -1
- package/components/menu/demo/index.min.js +1 -1
- package/components/menu/dist/index.js +1 -1
- package/components/menu/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 +87 -26
- package/components/select/demo/index.min.js +87 -26
- package/components/select/demo/keyboardBehavior.md +3 -3
- package/components/select/dist/index.js +86 -25
- package/components/select/dist/registered.js +86 -25
- package/components/select/dist/selectKeyboardStrategy.d.ts +5 -2
- package/custom-elements.json +62 -4
- package/package.json +1 -1
|
@@ -1206,26 +1206,23 @@ function isClearBtnFocused(ctx, clearBtn = getClearBtn(ctx)) {
|
|
|
1206
1206
|
if (!clearBtn) {
|
|
1207
1207
|
return false;
|
|
1208
1208
|
}
|
|
1209
|
-
|
|
1209
|
+
const isFocused = Boolean(clearBtn.shadowRoot && clearBtn.shadowRoot.activeElement !== null);
|
|
1210
|
+
return isFocused;
|
|
1210
1211
|
}
|
|
1211
1212
|
|
|
1212
1213
|
const comboboxKeyboardStrategy = {
|
|
1213
|
-
|
|
1214
|
-
// If the clear button has focus, let the browser activate it normally.
|
|
1215
|
-
// stopPropagation prevents parent containers (e.g., forms) from treating
|
|
1216
|
-
// Enter as a submit, but we must NOT call preventDefault — that would
|
|
1217
|
-
// block the browser's built-in "Enter activates focused button" behavior.
|
|
1214
|
+
Enter(component, evt, ctx) {
|
|
1218
1215
|
if (isClearBtnFocused(ctx)) {
|
|
1216
|
+
// If the clear button has focus, let the browser activate it normally.
|
|
1217
|
+
// stopPropagation prevents parent containers (e.g., forms) from treating
|
|
1218
|
+
// Enter as a submit, but we must NOT call preventDefault — that would
|
|
1219
|
+
// block the browser's built-in "Enter activates focused button" behavior.
|
|
1219
1220
|
evt.stopPropagation();
|
|
1220
|
-
|
|
1221
|
-
}
|
|
1222
|
-
|
|
1223
|
-
if (ctx.isExpanded && component.optionActive) {
|
|
1221
|
+
} else if (ctx.isExpanded && component.menu.optionActive) {
|
|
1224
1222
|
component.menu.makeSelection();
|
|
1225
|
-
|
|
1223
|
+
component.setClearBtnFocus();
|
|
1226
1224
|
evt.preventDefault();
|
|
1227
1225
|
evt.stopPropagation();
|
|
1228
|
-
component.setClearBtnFocus();
|
|
1229
1226
|
} else {
|
|
1230
1227
|
// Prevent the keypress from bubbling to parent containers (e.g., forms)
|
|
1231
1228
|
// which could interpret Enter as a submit or trigger other unintended behavior.
|
|
@@ -1237,71 +1234,28 @@ const comboboxKeyboardStrategy = {
|
|
|
1237
1234
|
}
|
|
1238
1235
|
},
|
|
1239
1236
|
|
|
1240
|
-
Tab(component,
|
|
1241
|
-
if (
|
|
1242
|
-
|
|
1237
|
+
Tab(component, _evt, ctx) {
|
|
1238
|
+
if (ctx.isExpanded && !isClearBtnFocused(ctx)) {
|
|
1239
|
+
// ClearBtn will not bubble up tab key events when it's focused, so need to manage it here when focused
|
|
1240
|
+
component.menu.makeSelection();
|
|
1241
|
+
component.hideBib();
|
|
1243
1242
|
}
|
|
1243
|
+
},
|
|
1244
1244
|
|
|
1245
|
-
|
|
1246
|
-
|
|
1247
|
-
if (evt.shiftKey) {
|
|
1245
|
+
Home(component, evt, ctx) {
|
|
1246
|
+
if (ctx.isExpanded) {
|
|
1248
1247
|
evt.preventDefault();
|
|
1249
|
-
|
|
1250
|
-
|
|
1251
|
-
component.menu.updateActiveOption(firstActive);
|
|
1252
|
-
}
|
|
1253
|
-
return;
|
|
1254
|
-
}
|
|
1255
|
-
|
|
1256
|
-
if (ctx.isModal) {
|
|
1257
|
-
if (!ctx.activeInput) {
|
|
1258
|
-
return;
|
|
1259
|
-
}
|
|
1260
|
-
const clearBtn = getClearBtn(ctx);
|
|
1261
|
-
const clearBtnHasFocus = isClearBtnFocused(ctx, clearBtn);
|
|
1262
|
-
|
|
1263
|
-
// Tab from input: if clear button exists and doesn't have focus, focus it
|
|
1264
|
-
if (clearBtn && !clearBtnHasFocus && ctx.activeInput.value) {
|
|
1265
|
-
// Force clear button container visible to work around Safari not
|
|
1266
|
-
// propagating :focus-within through shadow DOM boundaries, which
|
|
1267
|
-
// causes .wrapper:not(:focus-within) to hide .notification.clear.
|
|
1268
|
-
const clearContainer = clearBtn.closest('.clear');
|
|
1269
|
-
if (clearContainer) {
|
|
1270
|
-
clearContainer.style.display = 'flex';
|
|
1271
|
-
clearBtn.addEventListener('focusout', () => {
|
|
1272
|
-
// Delay cleanup so :focus-within settles when focus moves
|
|
1273
|
-
// to a sibling (e.g., Shift+Tab back to the input).
|
|
1274
|
-
requestAnimationFrame(() => {
|
|
1275
|
-
clearContainer.style.display = '';
|
|
1276
|
-
});
|
|
1277
|
-
}, { once: true });
|
|
1278
|
-
}
|
|
1279
|
-
|
|
1280
|
-
// Focus the native button inside auro-button so the browser
|
|
1281
|
-
// treats it as a real focusable element inside the dialog.
|
|
1282
|
-
const nativeBtn = clearBtn.shadowRoot && clearBtn.shadowRoot.querySelector('button');
|
|
1283
|
-
if (nativeBtn) {
|
|
1284
|
-
nativeBtn.focus();
|
|
1285
|
-
} else {
|
|
1286
|
-
clearBtn.focus();
|
|
1287
|
-
}
|
|
1288
|
-
return;
|
|
1289
|
-
}
|
|
1290
|
-
|
|
1291
|
-
// Tab from clear button (or no clear button / no value) →
|
|
1292
|
-
// select the highlighted option if any, then close
|
|
1293
|
-
if (component.optionActive) {
|
|
1294
|
-
component.menu.makeSelection();
|
|
1295
|
-
}
|
|
1296
|
-
component.hideBib();
|
|
1297
|
-
return;
|
|
1248
|
+
evt.stopPropagation();
|
|
1249
|
+
component.activateFirstEnabledAvailableOption();
|
|
1298
1250
|
}
|
|
1251
|
+
},
|
|
1299
1252
|
|
|
1300
|
-
|
|
1301
|
-
if (
|
|
1302
|
-
|
|
1253
|
+
End(component, evt, ctx) {
|
|
1254
|
+
if (ctx.isExpanded) {
|
|
1255
|
+
evt.preventDefault();
|
|
1256
|
+
evt.stopPropagation();
|
|
1257
|
+
component.activateLastEnabledAvailableOption();
|
|
1303
1258
|
}
|
|
1304
|
-
component.hideBib();
|
|
1305
1259
|
},
|
|
1306
1260
|
|
|
1307
1261
|
ArrowUp(component, evt, ctx) {
|
|
@@ -1310,14 +1264,15 @@ const comboboxKeyboardStrategy = {
|
|
|
1310
1264
|
return;
|
|
1311
1265
|
}
|
|
1312
1266
|
|
|
1267
|
+
// option display and navigation are prevented if there are no available options
|
|
1313
1268
|
if (component.availableOptions.length > 0) {
|
|
1314
|
-
|
|
1315
|
-
|
|
1316
|
-
|
|
1317
|
-
|
|
1318
|
-
|
|
1319
|
-
|
|
1320
|
-
|
|
1269
|
+
// navigate if bib is open otherwise open it
|
|
1270
|
+
if (component.dropdown.isPopoverVisible) {
|
|
1271
|
+
evt.preventDefault();
|
|
1272
|
+
navigateArrow(component, 'up');
|
|
1273
|
+
} else {
|
|
1274
|
+
component.showBib();
|
|
1275
|
+
}
|
|
1321
1276
|
}
|
|
1322
1277
|
},
|
|
1323
1278
|
|
|
@@ -1327,16 +1282,17 @@ const comboboxKeyboardStrategy = {
|
|
|
1327
1282
|
return;
|
|
1328
1283
|
}
|
|
1329
1284
|
|
|
1285
|
+
// option display and navigation are prevented if there are no available options
|
|
1330
1286
|
if (component.availableOptions.length > 0) {
|
|
1331
|
-
|
|
1332
|
-
|
|
1333
|
-
|
|
1334
|
-
|
|
1335
|
-
|
|
1336
|
-
|
|
1337
|
-
|
|
1287
|
+
// navigate if bib is open otherwise open it
|
|
1288
|
+
if (component.dropdown.isPopoverVisible) {
|
|
1289
|
+
evt.preventDefault();
|
|
1290
|
+
navigateArrow(component, 'down');
|
|
1291
|
+
} else {
|
|
1292
|
+
component.showBib();
|
|
1293
|
+
}
|
|
1338
1294
|
}
|
|
1339
|
-
}
|
|
1295
|
+
}
|
|
1340
1296
|
};
|
|
1341
1297
|
|
|
1342
1298
|
// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
|
|
@@ -4916,7 +4872,7 @@ let AuroHelpText$2 = class AuroHelpText extends LitElement {
|
|
|
4916
4872
|
}
|
|
4917
4873
|
};
|
|
4918
4874
|
|
|
4919
|
-
var formkitVersion$2 = '
|
|
4875
|
+
var formkitVersion$2 = '202604031554';
|
|
4920
4876
|
|
|
4921
4877
|
let AuroElement$2 = class AuroElement extends LitElement {
|
|
4922
4878
|
static get properties() {
|
|
@@ -5097,6 +5053,7 @@ class AuroDropdown extends AuroElement$2 {
|
|
|
5097
5053
|
this.appearance = 'default';
|
|
5098
5054
|
this.chevron = false;
|
|
5099
5055
|
this.disabled = false;
|
|
5056
|
+
this.disableKeyboardHandling = false;
|
|
5100
5057
|
this.error = false;
|
|
5101
5058
|
this.tabIndex = 0;
|
|
5102
5059
|
this.noToggle = false;
|
|
@@ -5308,6 +5265,14 @@ class AuroDropdown extends AuroElement$2 {
|
|
|
5308
5265
|
reflect: true
|
|
5309
5266
|
},
|
|
5310
5267
|
|
|
5268
|
+
/**
|
|
5269
|
+
* If declared, the dropdown will not handle keyboard events and will require the consumer to manage this behavior.
|
|
5270
|
+
*/
|
|
5271
|
+
disableKeyboardHandling: {
|
|
5272
|
+
type: Boolean,
|
|
5273
|
+
reflect: true
|
|
5274
|
+
},
|
|
5275
|
+
|
|
5311
5276
|
/**
|
|
5312
5277
|
* @private
|
|
5313
5278
|
*/
|
|
@@ -5613,7 +5578,7 @@ class AuroDropdown extends AuroElement$2 {
|
|
|
5613
5578
|
|
|
5614
5579
|
firstUpdated() {
|
|
5615
5580
|
// Configure the floater to, this will generate the ID for the bib
|
|
5616
|
-
this.floater.configure(this, 'auroDropdown');
|
|
5581
|
+
this.floater.configure(this, 'auroDropdown', !this.disableKeyboardHandling);
|
|
5617
5582
|
|
|
5618
5583
|
// Prevent `contain: layout` on the dropdown host. Layout containment
|
|
5619
5584
|
// creates a containing block for position:fixed descendants (the bib),
|
|
@@ -5921,6 +5886,7 @@ class AuroDropdown extends AuroElement$2 {
|
|
|
5921
5886
|
aria-expanded="${ifDefined(this.a11yRole === 'button' || this.triggerContentFocusable ? undefined : this.isPopoverVisible)}"
|
|
5922
5887
|
aria-controls="${ifDefined(this.a11yRole === 'button' || this.triggerContentFocusable ? undefined : this.dropdownId)}"
|
|
5923
5888
|
aria-labelledby="${ifDefined(this.triggerContentFocusable ? undefined : 'triggerLabel')}"
|
|
5889
|
+
aria-disabled="${ifDefined(this.disabled ? 'true' : undefined)}"
|
|
5924
5890
|
@focusin="${this.handleFocusin}"
|
|
5925
5891
|
@blur="${this.handleFocusOut}">
|
|
5926
5892
|
<div class="triggerContentWrapper" id="triggerLabel">
|
|
@@ -11640,6 +11606,12 @@ class BaseInput extends AuroElement$1 {
|
|
|
11640
11606
|
this.wrapperElement = this.shadowRoot.querySelector('.wrapper');
|
|
11641
11607
|
this.inputElement = this.renderRoot.querySelector('input');
|
|
11642
11608
|
this.labelElement = this.shadowRoot.querySelector('label');
|
|
11609
|
+
this.clearBtn = this.clearButtonRef.value;
|
|
11610
|
+
|
|
11611
|
+
// This must get moved into inputKeyboardStrategy when implemented
|
|
11612
|
+
this.clearBtn.addEventListener('keydown', (evt) => {
|
|
11613
|
+
evt.stopPropagation();
|
|
11614
|
+
});
|
|
11643
11615
|
|
|
11644
11616
|
this.patchInputEvent(this.inputElement);
|
|
11645
11617
|
|
|
@@ -12663,7 +12635,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
|
|
|
12663
12635
|
}
|
|
12664
12636
|
};
|
|
12665
12637
|
|
|
12666
|
-
var formkitVersion$1 = '
|
|
12638
|
+
var formkitVersion$1 = '202604031554';
|
|
12667
12639
|
|
|
12668
12640
|
// Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
12669
12641
|
// See LICENSE in the project root for license information.
|
|
@@ -12720,6 +12692,11 @@ class AuroInput extends BaseInput {
|
|
|
12720
12692
|
* @private
|
|
12721
12693
|
*/
|
|
12722
12694
|
this.iconTag = versioning.generateTag('auro-formkit-input-icon', iconVersion$1, _$1);
|
|
12695
|
+
|
|
12696
|
+
/**
|
|
12697
|
+
* @private
|
|
12698
|
+
*/
|
|
12699
|
+
this.clearButtonRef = createRef();
|
|
12723
12700
|
}
|
|
12724
12701
|
|
|
12725
12702
|
static get styles() {
|
|
@@ -12737,6 +12714,19 @@ class AuroInput extends BaseInput {
|
|
|
12737
12714
|
];
|
|
12738
12715
|
}
|
|
12739
12716
|
|
|
12717
|
+
/**
|
|
12718
|
+
* Returns classmap configuration for the clear button visibility.
|
|
12719
|
+
* The button is hidden when the input has no value, is read-only, or is disabled.
|
|
12720
|
+
* @private
|
|
12721
|
+
* @returns {Record<string, boolean>} - Classmap object controlling clear button display state.
|
|
12722
|
+
*/
|
|
12723
|
+
get clearBtnClassMap() {
|
|
12724
|
+
return {
|
|
12725
|
+
'util_displayHidden': !this.hasValue || this.readyOnly || this.disabled
|
|
12726
|
+
};
|
|
12727
|
+
}
|
|
12728
|
+
|
|
12729
|
+
|
|
12740
12730
|
/**
|
|
12741
12731
|
* Determines if the HTML input element should be visually hidden.
|
|
12742
12732
|
* Returns true when display value content exists without focus and has a value,
|
|
@@ -13056,10 +13046,11 @@ class AuroInput extends BaseInput {
|
|
|
13056
13046
|
<${this.buttonTag}
|
|
13057
13047
|
@click="${this.handleClickClear}"
|
|
13058
13048
|
appearance="${this.onDark ? 'inverse' : this.appearance}"
|
|
13059
|
-
class="notificationBtn clearBtn"
|
|
13049
|
+
class="notificationBtn clearBtn ${classMap(this.clearBtnClassMap)}"
|
|
13060
13050
|
shape="circle"
|
|
13061
13051
|
size="sm"
|
|
13062
|
-
variant="ghost"
|
|
13052
|
+
variant="ghost"
|
|
13053
|
+
${ref(this.clearButtonRef)}>
|
|
13063
13054
|
<span><slot name="ariaLabel.clear">Clear Input</slot></span>
|
|
13064
13055
|
<${this.iconTag}
|
|
13065
13056
|
aria-hidden="true"
|
|
@@ -13204,11 +13195,7 @@ class AuroInput extends BaseInput {
|
|
|
13204
13195
|
<div part="accent-right" class="accents right">
|
|
13205
13196
|
${this.renderValidationErrorIconHtml()}
|
|
13206
13197
|
${this.hasValue && this.type === 'password' ? this.renderHtmlNotificationPassword() : undefined}
|
|
13207
|
-
${this.
|
|
13208
|
-
${!this.disabled && !this.readonly ? html`
|
|
13209
|
-
${this.renderHtmlActionClear()}
|
|
13210
|
-
` : undefined}
|
|
13211
|
-
` : undefined}
|
|
13198
|
+
${this.renderHtmlActionClear()}
|
|
13212
13199
|
</div>
|
|
13213
13200
|
</div>
|
|
13214
13201
|
<div class="helpTextWrapper leftIndent rightIndent" part="inputHelpText">
|
|
@@ -13240,11 +13227,7 @@ class AuroInput extends BaseInput {
|
|
|
13240
13227
|
${this.layout.includes('right') || this.layout === "emphasized" ? html`
|
|
13241
13228
|
${this.renderValidationErrorIconHtml()}
|
|
13242
13229
|
` : undefined}
|
|
13243
|
-
${this.
|
|
13244
|
-
${!this.disabled && !this.readonly ? html`
|
|
13245
|
-
${this.renderHtmlActionClear()}
|
|
13246
|
-
` : undefined}
|
|
13247
|
-
` : undefined}
|
|
13230
|
+
${this.renderHtmlActionClear()}
|
|
13248
13231
|
</div>
|
|
13249
13232
|
</div>
|
|
13250
13233
|
<div class="${classMap(this.helpTextClasses)}" part="inputHelpText">
|
|
@@ -13272,11 +13255,7 @@ class AuroInput extends BaseInput {
|
|
|
13272
13255
|
</div>
|
|
13273
13256
|
<div class="accents right">
|
|
13274
13257
|
${this.renderValidationErrorIconHtml()}
|
|
13275
|
-
${this.
|
|
13276
|
-
${!this.disabled && !this.readonly ? html`
|
|
13277
|
-
${this.renderHtmlActionClear()}
|
|
13278
|
-
` : undefined}
|
|
13279
|
-
` : undefined}
|
|
13258
|
+
${this.renderHtmlActionClear()}
|
|
13280
13259
|
</div>
|
|
13281
13260
|
</div>
|
|
13282
13261
|
<div class="helpTextWrapper leftIndent rightIndent" part="inputHelpText">
|
|
@@ -13702,7 +13681,7 @@ class AuroBibtemplate extends LitElement {
|
|
|
13702
13681
|
}
|
|
13703
13682
|
}
|
|
13704
13683
|
|
|
13705
|
-
var formkitVersion = '
|
|
13684
|
+
var formkitVersion = '202604031554';
|
|
13706
13685
|
|
|
13707
13686
|
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}`;
|
|
13708
13687
|
|
|
@@ -14181,6 +14160,7 @@ class AuroCombobox extends AuroElement {
|
|
|
14181
14160
|
|
|
14182
14161
|
/**
|
|
14183
14162
|
* Array of available options to display in the dropdown.
|
|
14163
|
+
* This array contains all non-hidden options (e.g., hidden by filtering on input value).
|
|
14184
14164
|
* @private
|
|
14185
14165
|
*/
|
|
14186
14166
|
availableOptions: {
|
|
@@ -14558,12 +14538,40 @@ class AuroCombobox extends AuroElement {
|
|
|
14558
14538
|
AuroLibraryRuntimeUtils$4.prototype.registerComponent(name, AuroCombobox);
|
|
14559
14539
|
}
|
|
14560
14540
|
|
|
14541
|
+
/**
|
|
14542
|
+
* Mark the first available (non-hidden), enabled option as `active`.
|
|
14543
|
+
* @private
|
|
14544
|
+
* @returns {void}
|
|
14545
|
+
*/
|
|
14546
|
+
activateFirstEnabledAvailableOption() {
|
|
14547
|
+
const firstEnabledOptionIndex = this.availableOptions.findIndex((opt) => !opt.disabled);
|
|
14548
|
+
this.updateActiveOption(firstEnabledOptionIndex);
|
|
14549
|
+
}
|
|
14550
|
+
|
|
14551
|
+
/**
|
|
14552
|
+
* Mark the last available (non-hidden), enabled option as `active`.
|
|
14553
|
+
* @private
|
|
14554
|
+
* @returns {void}
|
|
14555
|
+
*/
|
|
14556
|
+
activateLastEnabledAvailableOption() {
|
|
14557
|
+
let lastEnabledOptionIndex = -1;
|
|
14558
|
+
|
|
14559
|
+
// Work backwards through the available options array to find the last enabled option
|
|
14560
|
+
for (let index = this.availableOptions.length - 1; index >= 0; index -= 1) {
|
|
14561
|
+
if (!this.availableOptions[index].disabled) {
|
|
14562
|
+
lastEnabledOptionIndex = index;
|
|
14563
|
+
break;
|
|
14564
|
+
}
|
|
14565
|
+
}
|
|
14566
|
+
|
|
14567
|
+
this.updateActiveOption(lastEnabledOptionIndex);
|
|
14568
|
+
}
|
|
14569
|
+
|
|
14561
14570
|
/**
|
|
14562
14571
|
* Updates the filter for the available options based on the input value.
|
|
14563
14572
|
* @private
|
|
14564
14573
|
*/
|
|
14565
14574
|
updateFilter() {
|
|
14566
|
-
|
|
14567
14575
|
// Reset available options if noFilter is set to false after being true.
|
|
14568
14576
|
if (this.noFilter) {
|
|
14569
14577
|
this.availableOptions = [...this.options];
|
|
@@ -14682,6 +14690,10 @@ class AuroCombobox extends AuroElement {
|
|
|
14682
14690
|
if (this.value && this.input.value && !this.menu.value) {
|
|
14683
14691
|
this.syncValuesAndStates();
|
|
14684
14692
|
}
|
|
14693
|
+
|
|
14694
|
+
if (!this.availableOptions.includes(this.menu.optionActive)) {
|
|
14695
|
+
this.activateFirstEnabledAvailableOption();
|
|
14696
|
+
}
|
|
14685
14697
|
}
|
|
14686
14698
|
|
|
14687
14699
|
/**
|
|
@@ -14755,9 +14767,6 @@ class AuroCombobox extends AuroElement {
|
|
|
14755
14767
|
if (this.dropdownOpen) {
|
|
14756
14768
|
const expandedDelay = 150;
|
|
14757
14769
|
this._expandedTimeout = setTimeout(() => {
|
|
14758
|
-
if (!this.value) {
|
|
14759
|
-
this.updateActiveOption(0);
|
|
14760
|
-
}
|
|
14761
14770
|
this.triggerExpandedState = true;
|
|
14762
14771
|
}, expandedDelay);
|
|
14763
14772
|
} else {
|
|
@@ -14767,16 +14776,6 @@ class AuroCombobox extends AuroElement {
|
|
|
14767
14776
|
// Clear aria-activedescendant when dropdown closes
|
|
14768
14777
|
if (!this.dropdownOpen && this.input) {
|
|
14769
14778
|
this.input.setActiveDescendant(null);
|
|
14770
|
-
this.optionActive = null;
|
|
14771
|
-
|
|
14772
|
-
// Remove the highlighted state from all menu options so re-opening
|
|
14773
|
-
// the dropdown doesn't show a stale highlight.
|
|
14774
|
-
if (this.options) {
|
|
14775
|
-
this.options.forEach((opt) => {
|
|
14776
|
-
opt.active = false;
|
|
14777
|
-
opt.classList.remove('active');
|
|
14778
|
-
});
|
|
14779
|
-
}
|
|
14780
14779
|
|
|
14781
14780
|
// Restore pointer events on the menu in case they were disabled
|
|
14782
14781
|
// during fullscreen open to prevent touch pass-through.
|
|
@@ -14817,13 +14816,6 @@ class AuroCombobox extends AuroElement {
|
|
|
14817
14816
|
this.setInputFocus();
|
|
14818
14817
|
this._inFullscreenTransition = false;
|
|
14819
14818
|
});
|
|
14820
|
-
} else {
|
|
14821
|
-
// wait a frame in case the bib gets hidden immediately after showing because there is no value
|
|
14822
|
-
setTimeout(() => {
|
|
14823
|
-
if (this.componentHasFocus) {
|
|
14824
|
-
this.setInputFocus();
|
|
14825
|
-
}
|
|
14826
|
-
}, 0);
|
|
14827
14819
|
}
|
|
14828
14820
|
}
|
|
14829
14821
|
});
|
|
@@ -1521,7 +1521,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$2 {
|
|
|
1521
1521
|
}
|
|
1522
1522
|
};
|
|
1523
1523
|
|
|
1524
|
-
var formkitVersion$1 = '
|
|
1524
|
+
var formkitVersion$1 = '202604031554';
|
|
1525
1525
|
|
|
1526
1526
|
// Copyright (c) 2026 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
1527
1527
|
// See LICENSE in the project root for license information.
|
|
@@ -5580,7 +5580,7 @@ class AuroHelpText extends i$2 {
|
|
|
5580
5580
|
}
|
|
5581
5581
|
}
|
|
5582
5582
|
|
|
5583
|
-
var formkitVersion = '
|
|
5583
|
+
var formkitVersion = '202604031554';
|
|
5584
5584
|
|
|
5585
5585
|
let AuroElement$1 = class AuroElement extends i$2 {
|
|
5586
5586
|
static get properties() {
|
|
@@ -5761,6 +5761,7 @@ class AuroDropdown extends AuroElement$1 {
|
|
|
5761
5761
|
this.appearance = 'default';
|
|
5762
5762
|
this.chevron = false;
|
|
5763
5763
|
this.disabled = false;
|
|
5764
|
+
this.disableKeyboardHandling = false;
|
|
5764
5765
|
this.error = false;
|
|
5765
5766
|
this.tabIndex = 0;
|
|
5766
5767
|
this.noToggle = false;
|
|
@@ -5972,6 +5973,14 @@ class AuroDropdown extends AuroElement$1 {
|
|
|
5972
5973
|
reflect: true
|
|
5973
5974
|
},
|
|
5974
5975
|
|
|
5976
|
+
/**
|
|
5977
|
+
* If declared, the dropdown will not handle keyboard events and will require the consumer to manage this behavior.
|
|
5978
|
+
*/
|
|
5979
|
+
disableKeyboardHandling: {
|
|
5980
|
+
type: Boolean,
|
|
5981
|
+
reflect: true
|
|
5982
|
+
},
|
|
5983
|
+
|
|
5975
5984
|
/**
|
|
5976
5985
|
* @private
|
|
5977
5986
|
*/
|
|
@@ -6277,7 +6286,7 @@ class AuroDropdown extends AuroElement$1 {
|
|
|
6277
6286
|
|
|
6278
6287
|
firstUpdated() {
|
|
6279
6288
|
// Configure the floater to, this will generate the ID for the bib
|
|
6280
|
-
this.floater.configure(this, 'auroDropdown');
|
|
6289
|
+
this.floater.configure(this, 'auroDropdown', !this.disableKeyboardHandling);
|
|
6281
6290
|
|
|
6282
6291
|
// Prevent `contain: layout` on the dropdown host. Layout containment
|
|
6283
6292
|
// creates a containing block for position:fixed descendants (the bib),
|
|
@@ -6585,6 +6594,7 @@ class AuroDropdown extends AuroElement$1 {
|
|
|
6585
6594
|
aria-expanded="${o$2(this.a11yRole === 'button' || this.triggerContentFocusable ? undefined : this.isPopoverVisible)}"
|
|
6586
6595
|
aria-controls="${o$2(this.a11yRole === 'button' || this.triggerContentFocusable ? undefined : this.dropdownId)}"
|
|
6587
6596
|
aria-labelledby="${o$2(this.triggerContentFocusable ? undefined : 'triggerLabel')}"
|
|
6597
|
+
aria-disabled="${o$2(this.disabled ? 'true' : undefined)}"
|
|
6588
6598
|
@focusin="${this.handleFocusin}"
|
|
6589
6599
|
@blur="${this.handleFocusOut}">
|
|
6590
6600
|
<div class="triggerContentWrapper" id="triggerLabel">
|
|
@@ -1521,7 +1521,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$2 {
|
|
|
1521
1521
|
}
|
|
1522
1522
|
};
|
|
1523
1523
|
|
|
1524
|
-
var formkitVersion$1 = '
|
|
1524
|
+
var formkitVersion$1 = '202604031554';
|
|
1525
1525
|
|
|
1526
1526
|
// Copyright (c) 2026 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
1527
1527
|
// See LICENSE in the project root for license information.
|
|
@@ -5580,7 +5580,7 @@ class AuroHelpText extends i$2 {
|
|
|
5580
5580
|
}
|
|
5581
5581
|
}
|
|
5582
5582
|
|
|
5583
|
-
var formkitVersion = '
|
|
5583
|
+
var formkitVersion = '202604031554';
|
|
5584
5584
|
|
|
5585
5585
|
let AuroElement$1 = class AuroElement extends i$2 {
|
|
5586
5586
|
static get properties() {
|
|
@@ -5761,6 +5761,7 @@ class AuroDropdown extends AuroElement$1 {
|
|
|
5761
5761
|
this.appearance = 'default';
|
|
5762
5762
|
this.chevron = false;
|
|
5763
5763
|
this.disabled = false;
|
|
5764
|
+
this.disableKeyboardHandling = false;
|
|
5764
5765
|
this.error = false;
|
|
5765
5766
|
this.tabIndex = 0;
|
|
5766
5767
|
this.noToggle = false;
|
|
@@ -5972,6 +5973,14 @@ class AuroDropdown extends AuroElement$1 {
|
|
|
5972
5973
|
reflect: true
|
|
5973
5974
|
},
|
|
5974
5975
|
|
|
5976
|
+
/**
|
|
5977
|
+
* If declared, the dropdown will not handle keyboard events and will require the consumer to manage this behavior.
|
|
5978
|
+
*/
|
|
5979
|
+
disableKeyboardHandling: {
|
|
5980
|
+
type: Boolean,
|
|
5981
|
+
reflect: true
|
|
5982
|
+
},
|
|
5983
|
+
|
|
5975
5984
|
/**
|
|
5976
5985
|
* @private
|
|
5977
5986
|
*/
|
|
@@ -6277,7 +6286,7 @@ class AuroDropdown extends AuroElement$1 {
|
|
|
6277
6286
|
|
|
6278
6287
|
firstUpdated() {
|
|
6279
6288
|
// Configure the floater to, this will generate the ID for the bib
|
|
6280
|
-
this.floater.configure(this, 'auroDropdown');
|
|
6289
|
+
this.floater.configure(this, 'auroDropdown', !this.disableKeyboardHandling);
|
|
6281
6290
|
|
|
6282
6291
|
// Prevent `contain: layout` on the dropdown host. Layout containment
|
|
6283
6292
|
// creates a containing block for position:fixed descendants (the bib),
|
|
@@ -6585,6 +6594,7 @@ class AuroDropdown extends AuroElement$1 {
|
|
|
6585
6594
|
aria-expanded="${o$2(this.a11yRole === 'button' || this.triggerContentFocusable ? undefined : this.isPopoverVisible)}"
|
|
6586
6595
|
aria-controls="${o$2(this.a11yRole === 'button' || this.triggerContentFocusable ? undefined : this.dropdownId)}"
|
|
6587
6596
|
aria-labelledby="${o$2(this.triggerContentFocusable ? undefined : 'triggerLabel')}"
|
|
6597
|
+
aria-disabled="${o$2(this.disabled ? 'true' : undefined)}"
|
|
6588
6598
|
@focusin="${this.handleFocusin}"
|
|
6589
6599
|
@blur="${this.handleFocusOut}">
|
|
6590
6600
|
<div class="triggerContentWrapper" id="triggerLabel">
|
|
@@ -1471,7 +1471,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
|
|
|
1471
1471
|
}
|
|
1472
1472
|
};
|
|
1473
1473
|
|
|
1474
|
-
var formkitVersion$1 = '
|
|
1474
|
+
var formkitVersion$1 = '202604031554';
|
|
1475
1475
|
|
|
1476
1476
|
// Copyright (c) 2026 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
1477
1477
|
// See LICENSE in the project root for license information.
|
|
@@ -5512,7 +5512,7 @@ class AuroHelpText extends LitElement {
|
|
|
5512
5512
|
}
|
|
5513
5513
|
}
|
|
5514
5514
|
|
|
5515
|
-
var formkitVersion = '
|
|
5515
|
+
var formkitVersion = '202604031554';
|
|
5516
5516
|
|
|
5517
5517
|
let AuroElement$1 = class AuroElement extends LitElement {
|
|
5518
5518
|
static get properties() {
|
|
@@ -5693,6 +5693,7 @@ class AuroDropdown extends AuroElement$1 {
|
|
|
5693
5693
|
this.appearance = 'default';
|
|
5694
5694
|
this.chevron = false;
|
|
5695
5695
|
this.disabled = false;
|
|
5696
|
+
this.disableKeyboardHandling = false;
|
|
5696
5697
|
this.error = false;
|
|
5697
5698
|
this.tabIndex = 0;
|
|
5698
5699
|
this.noToggle = false;
|
|
@@ -5904,6 +5905,14 @@ class AuroDropdown extends AuroElement$1 {
|
|
|
5904
5905
|
reflect: true
|
|
5905
5906
|
},
|
|
5906
5907
|
|
|
5908
|
+
/**
|
|
5909
|
+
* If declared, the dropdown will not handle keyboard events and will require the consumer to manage this behavior.
|
|
5910
|
+
*/
|
|
5911
|
+
disableKeyboardHandling: {
|
|
5912
|
+
type: Boolean,
|
|
5913
|
+
reflect: true
|
|
5914
|
+
},
|
|
5915
|
+
|
|
5907
5916
|
/**
|
|
5908
5917
|
* @private
|
|
5909
5918
|
*/
|
|
@@ -6209,7 +6218,7 @@ class AuroDropdown extends AuroElement$1 {
|
|
|
6209
6218
|
|
|
6210
6219
|
firstUpdated() {
|
|
6211
6220
|
// Configure the floater to, this will generate the ID for the bib
|
|
6212
|
-
this.floater.configure(this, 'auroDropdown');
|
|
6221
|
+
this.floater.configure(this, 'auroDropdown', !this.disableKeyboardHandling);
|
|
6213
6222
|
|
|
6214
6223
|
// Prevent `contain: layout` on the dropdown host. Layout containment
|
|
6215
6224
|
// creates a containing block for position:fixed descendants (the bib),
|
|
@@ -6517,6 +6526,7 @@ class AuroDropdown extends AuroElement$1 {
|
|
|
6517
6526
|
aria-expanded="${ifDefined(this.a11yRole === 'button' || this.triggerContentFocusable ? undefined : this.isPopoverVisible)}"
|
|
6518
6527
|
aria-controls="${ifDefined(this.a11yRole === 'button' || this.triggerContentFocusable ? undefined : this.dropdownId)}"
|
|
6519
6528
|
aria-labelledby="${ifDefined(this.triggerContentFocusable ? undefined : 'triggerLabel')}"
|
|
6529
|
+
aria-disabled="${ifDefined(this.disabled ? 'true' : undefined)}"
|
|
6520
6530
|
@focusin="${this.handleFocusin}"
|
|
6521
6531
|
@blur="${this.handleFocusOut}">
|
|
6522
6532
|
<div class="triggerContentWrapper" id="triggerLabel">
|
|
@@ -1471,7 +1471,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
|
|
|
1471
1471
|
}
|
|
1472
1472
|
};
|
|
1473
1473
|
|
|
1474
|
-
var formkitVersion$1 = '
|
|
1474
|
+
var formkitVersion$1 = '202604031554';
|
|
1475
1475
|
|
|
1476
1476
|
// Copyright (c) 2026 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
1477
1477
|
// See LICENSE in the project root for license information.
|
|
@@ -5512,7 +5512,7 @@ class AuroHelpText extends LitElement {
|
|
|
5512
5512
|
}
|
|
5513
5513
|
}
|
|
5514
5514
|
|
|
5515
|
-
var formkitVersion = '
|
|
5515
|
+
var formkitVersion = '202604031554';
|
|
5516
5516
|
|
|
5517
5517
|
let AuroElement$1 = class AuroElement extends LitElement {
|
|
5518
5518
|
static get properties() {
|
|
@@ -5693,6 +5693,7 @@ class AuroDropdown extends AuroElement$1 {
|
|
|
5693
5693
|
this.appearance = 'default';
|
|
5694
5694
|
this.chevron = false;
|
|
5695
5695
|
this.disabled = false;
|
|
5696
|
+
this.disableKeyboardHandling = false;
|
|
5696
5697
|
this.error = false;
|
|
5697
5698
|
this.tabIndex = 0;
|
|
5698
5699
|
this.noToggle = false;
|
|
@@ -5904,6 +5905,14 @@ class AuroDropdown extends AuroElement$1 {
|
|
|
5904
5905
|
reflect: true
|
|
5905
5906
|
},
|
|
5906
5907
|
|
|
5908
|
+
/**
|
|
5909
|
+
* If declared, the dropdown will not handle keyboard events and will require the consumer to manage this behavior.
|
|
5910
|
+
*/
|
|
5911
|
+
disableKeyboardHandling: {
|
|
5912
|
+
type: Boolean,
|
|
5913
|
+
reflect: true
|
|
5914
|
+
},
|
|
5915
|
+
|
|
5907
5916
|
/**
|
|
5908
5917
|
* @private
|
|
5909
5918
|
*/
|
|
@@ -6209,7 +6218,7 @@ class AuroDropdown extends AuroElement$1 {
|
|
|
6209
6218
|
|
|
6210
6219
|
firstUpdated() {
|
|
6211
6220
|
// Configure the floater to, this will generate the ID for the bib
|
|
6212
|
-
this.floater.configure(this, 'auroDropdown');
|
|
6221
|
+
this.floater.configure(this, 'auroDropdown', !this.disableKeyboardHandling);
|
|
6213
6222
|
|
|
6214
6223
|
// Prevent `contain: layout` on the dropdown host. Layout containment
|
|
6215
6224
|
// creates a containing block for position:fixed descendants (the bib),
|
|
@@ -6517,6 +6526,7 @@ class AuroDropdown extends AuroElement$1 {
|
|
|
6517
6526
|
aria-expanded="${ifDefined(this.a11yRole === 'button' || this.triggerContentFocusable ? undefined : this.isPopoverVisible)}"
|
|
6518
6527
|
aria-controls="${ifDefined(this.a11yRole === 'button' || this.triggerContentFocusable ? undefined : this.dropdownId)}"
|
|
6519
6528
|
aria-labelledby="${ifDefined(this.triggerContentFocusable ? undefined : 'triggerLabel')}"
|
|
6529
|
+
aria-disabled="${ifDefined(this.disabled ? 'true' : undefined)}"
|
|
6520
6530
|
@focusin="${this.handleFocusin}"
|
|
6521
6531
|
@blur="${this.handleFocusOut}">
|
|
6522
6532
|
<div class="triggerContentWrapper" id="triggerLabel">
|