@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.
Files changed (49) hide show
  1. package/components/checkbox/demo/api.min.js +1 -1
  2. package/components/checkbox/demo/index.min.js +1 -1
  3. package/components/checkbox/dist/index.js +1 -1
  4. package/components/checkbox/dist/registered.js +1 -1
  5. package/components/combobox/demo/api.min.js +121 -129
  6. package/components/combobox/demo/index.min.js +121 -129
  7. package/components/combobox/demo/keyboardBehavior.md +9 -36
  8. package/components/combobox/dist/auro-combobox.d.ts +13 -0
  9. package/components/combobox/dist/comboboxKeyboardStrategy.d.ts +4 -2
  10. package/components/combobox/dist/index.js +120 -128
  11. package/components/combobox/dist/registered.js +120 -128
  12. package/components/counter/demo/api.min.js +13 -3
  13. package/components/counter/demo/index.min.js +13 -3
  14. package/components/counter/dist/index.js +13 -3
  15. package/components/counter/dist/registered.js +13 -3
  16. package/components/datepicker/demo/api.min.js +44 -21
  17. package/components/datepicker/demo/index.min.js +44 -21
  18. package/components/datepicker/dist/index.js +44 -21
  19. package/components/datepicker/dist/registered.js +44 -21
  20. package/components/dropdown/demo/api.md +29 -28
  21. package/components/dropdown/demo/api.min.js +12 -2
  22. package/components/dropdown/demo/index.min.js +12 -2
  23. package/components/dropdown/dist/auro-dropdown.d.ts +8 -0
  24. package/components/dropdown/dist/index.js +12 -2
  25. package/components/dropdown/dist/registered.js +12 -2
  26. package/components/form/demo/api.min.js +363 -264
  27. package/components/form/demo/index.min.js +363 -264
  28. package/components/input/demo/api.min.js +102 -77
  29. package/components/input/demo/index.min.js +102 -77
  30. package/components/input/dist/auro-input.d.ts +11 -0
  31. package/components/input/dist/base-input.d.ts +1 -0
  32. package/components/input/dist/index.js +32 -18
  33. package/components/input/dist/registered.js +32 -18
  34. package/components/menu/demo/api.min.js +1 -1
  35. package/components/menu/demo/index.min.js +1 -1
  36. package/components/menu/dist/index.js +1 -1
  37. package/components/menu/dist/registered.js +1 -1
  38. package/components/radio/demo/api.min.js +1 -1
  39. package/components/radio/demo/index.min.js +1 -1
  40. package/components/radio/dist/index.js +1 -1
  41. package/components/radio/dist/registered.js +1 -1
  42. package/components/select/demo/api.min.js +87 -26
  43. package/components/select/demo/index.min.js +87 -26
  44. package/components/select/demo/keyboardBehavior.md +3 -3
  45. package/components/select/dist/index.js +86 -25
  46. package/components/select/dist/registered.js +86 -25
  47. package/components/select/dist/selectKeyboardStrategy.d.ts +5 -2
  48. package/custom-elements.json +62 -4
  49. 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
- return Boolean(clearBtn.shadowRoot && clearBtn.shadowRoot.activeElement !== null);
1209
+ const isFocused = Boolean(clearBtn.shadowRoot && clearBtn.shadowRoot.activeElement !== null);
1210
+ return isFocused;
1210
1211
  }
1211
1212
 
1212
1213
  const comboboxKeyboardStrategy = {
1213
- async Enter(component, evt, ctx) {
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
- return;
1221
- }
1222
-
1223
- if (ctx.isExpanded && component.optionActive) {
1221
+ } else if (ctx.isExpanded && component.menu.optionActive) {
1224
1222
  component.menu.makeSelection();
1225
- await component.updateComplete;
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, evt, ctx) {
1241
- if (!ctx.isExpanded) {
1242
- return;
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
- // Shift+Tab moves the highlight to the first non-disabled option
1246
- // without making a selection or closing the bib.
1247
- if (evt.shiftKey) {
1245
+ Home(component, evt, ctx) {
1246
+ if (ctx.isExpanded) {
1248
1247
  evt.preventDefault();
1249
- const firstActive = component.menu.menuService.menuOptions.find((option) => option.isActive);
1250
- if (firstActive) {
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
- // Non-fullscreen: select + close
1301
- if (component.menu.optionActive && component.menu.optionActive.value) {
1302
- component.menu.value = component.menu.optionActive.value;
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
- component.showBib();
1315
- }
1316
- // Read live visibility — ctx.isExpanded was computed before showBib() above,
1317
- // so it wouldn't reflect the state change.
1318
- if (component.dropdown.isPopoverVisible) {
1319
- evt.preventDefault();
1320
- navigateArrow(component, 'up');
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
- component.showBib();
1332
- }
1333
- // Read live visibility — ctx.isExpanded was computed before showBib() above,
1334
- // so it wouldn't reflect the state change.
1335
- if (component.dropdown.isPopoverVisible) {
1336
- evt.preventDefault();
1337
- navigateArrow(component, 'down');
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 = '202604021941';
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 = '202604021941';
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.hasValue ? html`
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.hasValue ? html`
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.hasValue ? html`
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 = '202604021941';
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 = '202604021941';
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 = '202604021941';
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 = '202604021941';
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 = '202604021941';
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 = '202604021941';
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 = '202604021941';
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 = '202604021941';
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 = '202604021941';
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">