@aurodesignsystem-dev/auro-formkit 0.0.0-pr1541.5 → 0.0.0-pr1542.0

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 (71) hide show
  1. package/components/checkbox/demo/customize.min.js +1 -1
  2. package/components/checkbox/demo/getting-started.min.js +1 -1
  3. package/components/checkbox/demo/index.min.js +1 -1
  4. package/components/checkbox/dist/index.js +1 -1
  5. package/components/checkbox/dist/registered.js +1 -1
  6. package/components/combobox/demo/api.md +2 -2
  7. package/components/combobox/demo/customize.md +1 -1
  8. package/components/combobox/demo/customize.min.js +41 -91
  9. package/components/combobox/demo/getting-started.min.js +41 -91
  10. package/components/combobox/demo/index.md +0 -1
  11. package/components/combobox/demo/index.min.js +41 -91
  12. package/components/combobox/demo/keyboard-behavior.md +1 -4
  13. package/components/combobox/dist/auro-combobox.d.ts +3 -1
  14. package/components/combobox/dist/index.js +23 -4
  15. package/components/combobox/dist/registered.js +23 -4
  16. package/components/counter/demo/customize.min.js +2 -2
  17. package/components/counter/demo/index.min.js +2 -2
  18. package/components/counter/dist/index.js +2 -2
  19. package/components/counter/dist/registered.js +2 -2
  20. package/components/datepicker/demo/customize.min.js +3 -3
  21. package/components/datepicker/demo/index.min.js +3 -3
  22. package/components/datepicker/dist/index.js +3 -3
  23. package/components/datepicker/dist/registered.js +3 -3
  24. package/components/dropdown/demo/customize.min.js +1 -1
  25. package/components/dropdown/demo/getting-started.min.js +1 -1
  26. package/components/dropdown/demo/index.min.js +1 -1
  27. package/components/dropdown/dist/index.js +1 -1
  28. package/components/dropdown/dist/registered.js +1 -1
  29. package/components/form/demo/customize.min.js +52 -106
  30. package/components/form/demo/getting-started.min.js +52 -106
  31. package/components/form/demo/index.min.js +52 -106
  32. package/components/form/demo/registerDemoDeps.min.js +52 -106
  33. package/components/input/demo/customize.min.js +1 -1
  34. package/components/input/demo/getting-started.min.js +1 -1
  35. package/components/input/demo/index.min.js +1 -1
  36. package/components/input/dist/index.js +1 -1
  37. package/components/input/dist/registered.js +1 -1
  38. package/components/menu/demo/accessibility.md +4 -4
  39. package/components/menu/demo/api.md +19 -26
  40. package/components/menu/demo/css-only.md +19 -26
  41. package/components/menu/demo/customize.md +47 -307
  42. package/components/menu/demo/design.md +1 -1
  43. package/components/menu/demo/getting-started.md +7 -144
  44. package/components/menu/demo/index.min.js +19 -214
  45. package/components/menu/demo/keyboard-behavior.md +4 -83
  46. package/components/menu/demo/voiceover.md +8 -12
  47. package/components/menu/demo/why-menu.md +9 -8
  48. package/components/menu/dist/auro-menu-utils.d.ts +0 -19
  49. package/components/menu/dist/auro-menu.d.ts +8 -4
  50. package/components/menu/dist/auro-menuoption.d.ts +0 -12
  51. package/components/menu/dist/index.js +18 -87
  52. package/components/menu/dist/registered.js +18 -87
  53. package/components/radio/demo/customize.min.js +1 -1
  54. package/components/radio/demo/getting-started.min.js +1 -1
  55. package/components/radio/demo/index.min.js +1 -1
  56. package/components/radio/dist/index.js +1 -1
  57. package/components/radio/dist/registered.js +1 -1
  58. package/components/select/demo/api.md +2 -2
  59. package/components/select/demo/customize.md +2 -5
  60. package/components/select/demo/customize.min.js +21 -94
  61. package/components/select/demo/design.md +10 -10
  62. package/components/select/demo/getting-started.md +1 -1
  63. package/components/select/demo/getting-started.min.js +21 -94
  64. package/components/select/demo/index.md +2 -2
  65. package/components/select/demo/index.min.js +21 -94
  66. package/components/select/demo/keyboard-behavior.md +18 -49
  67. package/components/select/dist/auro-select.d.ts +2 -6
  68. package/components/select/dist/index.js +3 -7
  69. package/components/select/dist/registered.js +3 -7
  70. package/custom-elements.json +1540 -1614
  71. package/package.json +1 -1
@@ -1275,7 +1275,7 @@ class AuroHelpText extends i$2 {
1275
1275
  }
1276
1276
  }
1277
1277
 
1278
- var formkitVersion = '202607082148';
1278
+ var formkitVersion = '202607082142';
1279
1279
 
1280
1280
  // Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
1281
1281
  // See LICENSE in the project root for license information.
@@ -1275,7 +1275,7 @@ class AuroHelpText extends i$2 {
1275
1275
  }
1276
1276
  }
1277
1277
 
1278
- var formkitVersion = '202607082148';
1278
+ var formkitVersion = '202607082142';
1279
1279
 
1280
1280
  // Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
1281
1281
  // See LICENSE in the project root for license information.
@@ -1275,7 +1275,7 @@ class AuroHelpText extends i$2 {
1275
1275
  }
1276
1276
  }
1277
1277
 
1278
- var formkitVersion = '202607082148';
1278
+ var formkitVersion = '202607082142';
1279
1279
 
1280
1280
  // Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
1281
1281
  // See LICENSE in the project root for license information.
@@ -1228,7 +1228,7 @@ class AuroHelpText extends LitElement {
1228
1228
  }
1229
1229
  }
1230
1230
 
1231
- var formkitVersion = '202607082148';
1231
+ var formkitVersion = '202607082142';
1232
1232
 
1233
1233
  // Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
1234
1234
  // See LICENSE in the project root for license information.
@@ -1228,7 +1228,7 @@ class AuroHelpText extends LitElement {
1228
1228
  }
1229
1229
  }
1230
1230
 
1231
- var formkitVersion = '202607082148';
1231
+ var formkitVersion = '202607082142';
1232
1232
 
1233
1233
  // Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
1234
1234
  // See LICENSE in the project root for license information.
@@ -38,11 +38,11 @@ The `auro-combobox` element provides users with a way to select an option from a
38
38
  | `setCustomValidityValueMissing` | `setCustomValidityValueMissing` | | `string` | | Custom help text message to display when validity = `valueMissing`. |
39
39
  | `setCustomValidityValueMissingFilter` | `setCustomValidityValueMissingFilter` | | `string` | | Custom help text message to display when validity = `valueMissing` due to the user not choosing a menu option when behavior = "filter". |
40
40
  | `shift` | `shift` | | `boolean` | | If declared, the dropdown will shift its position to avoid being cut off by the viewport. |
41
- | `triggerIcon` | `triggerIcon` | | `boolean` | | If set, the `icon` attribute will be applied to the trigger `auro-input` element. |
41
+ | `triggerIcon` | `triggerIcon` | | `boolean` | | If set, the `icon` attribute will be applied to the trigger `auro-input` element.<br />Icon rendering is currently limited to `type="credit-card"`. Setting `triggerIcon`<br />without a supported `type` propagates the attribute but does not render a visible icon. |
42
42
  | `type` | `type` | | `string` | | Applies the defined value as the type attribute on `auro-input`. |
43
43
  | `typedValue` | `typedValue` | | `string` | | Specifies the value of the input element within the combobox. |
44
44
  | `validity` | `validity` | | `string` | | Specifies the `validityState` this element is in. |
45
- | `value` | `value` | | `string` | | Value selected for the dropdown menu. When set programmatically or as a preset attribute, the value must match a selectable option. If it matches an option marked `disabled` or `static`, the selection is rejected: `value` and `optionSelected` are cleared to `undefined`. `hidden` options (including those filtered out by type-ahead) remain selectable by value. |
45
+ | `value` | `value` | | `string` | | Value selected for the dropdown menu. |
46
46
 
47
47
  ## Methods
48
48
 
@@ -669,7 +669,7 @@
669
669
  <!-- AURO-GENERATED-CONTENT:END -->
670
670
  </auro-accordion>
671
671
  <auro-header level="3" id="inputType">Input Type</auro-header>
672
- <p>When defined, the <code>auro-input</code> in the combobox trigger will use the defined <code>type</code>. Use the <code>triggerIcon</code> attribute to provide context to the user about the expected input type.</p>
672
+ <p>When defined, the <code>auro-input</code> in the combobox trigger will use the defined <code>type</code>. Use the <code>triggerIcon</code> attribute to provide context to the user about the expected input type. Icon rendering is currently limited to <code>type="credit-card"</code>; <code>triggerIcon</code> without a supported type propagates the attribute but does not render a visible icon.</p>
673
673
  <div class="exampleWrapper">
674
674
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/type_credit-card.html) -->
675
675
  <!-- The below content is automatically added from ./../apiExamples/type_credit-card.html -->
@@ -968,6 +968,23 @@ const comboboxKeyboardStrategy = {
968
968
  },
969
969
 
970
970
  Tab(component, evt, ctx) {
971
+ // Runs for both Tab and Shift+Tab.
972
+ //
973
+ // Current behavior:
974
+ // Tab — select the active option, close the bib, and (in fullscreen
975
+ // modal mode only) explicitly move focus to the trigger's
976
+ // clear button. In desktop popover mode the browser's native
977
+ // tab traversal takes focus forward from the input.
978
+ // Shift+Tab — select the active option and close the bib. Focus then
979
+ // lands on the trigger's clear button as a byproduct of the
980
+ // shadow-DOM tab order, so keyboard users must press
981
+ // Shift+Tab three times to exit the component (clear button
982
+ // → input → previous element on the page).
983
+ //
984
+ // Intended behavior for Shift+Tab (per team decision, tracked in
985
+ // AB#1590650): a single Shift+Tab should select the active option, close
986
+ // the bib, and move focus directly to the previous focusable element on
987
+ // the page — symmetric with Tab.
971
988
  if (ctx.isExpanded && !isClearBtnFocused(ctx)) {
972
989
  // When the clear button is focused, Tab events do not bubble out of
973
990
  // its shadow DOM, so this handler only fires when the clear button
@@ -4879,7 +4896,7 @@ let AuroHelpText$2 = class AuroHelpText extends i$3 {
4879
4896
  }
4880
4897
  };
4881
4898
 
4882
- var formkitVersion$2 = '202607082148';
4899
+ var formkitVersion$2 = '202607082142';
4883
4900
 
4884
4901
  let AuroElement$2 = class AuroElement extends i$3 {
4885
4902
  static get properties() {
@@ -18504,7 +18521,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$3 {
18504
18521
  }
18505
18522
  };
18506
18523
 
18507
- var formkitVersion$1 = '202607082148';
18524
+ var formkitVersion$1 = '202607082142';
18508
18525
 
18509
18526
  // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
18510
18527
  // See LICENSE in the project root for license information.
@@ -19625,7 +19642,7 @@ class AuroBibtemplate extends i$3 {
19625
19642
  }
19626
19643
  }
19627
19644
 
19628
- var formkitVersion = '202607082148';
19645
+ var formkitVersion = '202607082142';
19629
19646
 
19630
19647
  var styleCss$3 = i$6`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}:host{display:block;text-align:left}:host [auro-dropdown]{--ds-auro-dropdown-trigger-background-color: transparent}:host #inputInBib::part(wrapper){box-shadow:none}:host #inputInBib::part(accent-left){display:none}:host([layout*=classic]) [auro-input]{width:100%}:host([layout*=classic]) [auro-input]::part(helpText){display:none}:host([layout*=classic]) #slotHolder{display:none}`;
19631
19648
 
@@ -20408,6 +20425,8 @@ class AuroCombobox extends AuroElement {
20408
20425
 
20409
20426
  /**
20410
20427
  * If set, the `icon` attribute will be applied to the trigger `auro-input` element.
20428
+ * Icon rendering is currently limited to `type="credit-card"`. Setting `triggerIcon`
20429
+ * without a supported `type` propagates the attribute but does not render a visible icon.
20411
20430
  */
20412
20431
  triggerIcon: {
20413
20432
  type: Boolean,
@@ -20439,7 +20458,7 @@ class AuroCombobox extends AuroElement {
20439
20458
  },
20440
20459
 
20441
20460
  /**
20442
- * Value selected for the dropdown menu. When set programmatically or as a preset attribute, the value must match a selectable option. If it matches an option marked `disabled` or `static`, the selection is rejected: `value` and `optionSelected` are cleared to `undefined`. `hidden` options (including those filtered out by type-ahead) remain selectable by value.
20461
+ * Value selected for the dropdown menu.
20443
20462
  */
20444
20463
  value: {
20445
20464
  type: String
@@ -21957,18 +21976,6 @@ var tokensCss = i$6`:host{--ds-auro-menu-divider-color: var(--ds-basic-color-bor
21957
21976
  // See LICENSE in the project root for license information.
21958
21977
 
21959
21978
 
21960
- /**
21961
- * Serializes a multi-select value array back into the String `value` property.
21962
- * An empty (or missing) array collapses to `undefined` so an emptied selection
21963
- * clears `value` rather than reflecting a `"[]"` attribute.
21964
- * @private
21965
- * @param {Array<string>|undefined} values - The selected values.
21966
- * @returns {string|undefined} JSON string of the values, or undefined when empty.
21967
- */
21968
- function serializeMultiSelectValue(values) {
21969
- return values && values.length > 0 ? JSON.stringify(values) : undefined;
21970
- }
21971
-
21972
21979
  /**
21973
21980
  * Validates if an option can be interacted with.
21974
21981
  * @private
@@ -21981,20 +21988,6 @@ function isOptionInteractive(option) {
21981
21988
  !option.hasAttribute('static');
21982
21989
  }
21983
21990
 
21984
- /**
21985
- * Validates if an option may be selected by matching a programmatic value.
21986
- * Unlike `isOptionInteractive`, `hidden` is allowed: the combobox toggles
21987
- * `hidden` as its type-ahead filter, so a filtered-out option is still a
21988
- * valid programmatic selection. Only disabled and static options — which are
21989
- * never selectable — are rejected.
21990
- * @param {HTMLElement} option - The option to check.
21991
- * @returns {boolean} True if option can be selected by value.
21992
- */
21993
- function isSelectableByValue(option) {
21994
- return !option.hasAttribute('disabled') &&
21995
- !option.hasAttribute('static');
21996
- }
21997
-
21998
21991
  /**
21999
21992
  * Helper method to dispatch custom events.
22000
21993
  * @param {HTMLElement} element - Element to dispatch event from.
@@ -22164,26 +22157,22 @@ class AuroMenu extends AuroElement {
22164
22157
 
22165
22158
  /**
22166
22159
  * Specifies the current active menuOption.
22167
- * @readonly
22168
22160
  */
22169
22161
  optionActive: {
22170
22162
  type: Object,
22171
- attribute: false
22163
+ attribute: 'optionactive'
22172
22164
  },
22173
22165
 
22174
22166
  /**
22175
- * The currently selected menu option(s). In single-select mode this is a single `HTMLElement` (or `undefined` when nothing is selected). In multi-select mode this is an array of `HTMLElement`s.
22176
- * @readonly
22167
+ * An array of currently selected menu options, type `HTMLElement` by default. In multi-select mode, `optionSelected` is an array of HTML elements.
22177
22168
  */
22178
22169
  optionSelected: {
22179
22170
  // Allow HTMLElement, HTMLElement[] arrays and undefined
22180
- type: Object,
22181
- attribute: false
22171
+ type: Object
22182
22172
  },
22183
22173
 
22184
22174
  /**
22185
22175
  * The value of the selected option. In multi-select mode, this is a JSON stringified array of selected option values.
22186
- * Options marked `disabled` or `static` are not selectable by value; `hidden` options remain selectable. In single-select mode, if the value matches a non-selectable option the selection is cleared (`optionSelected` becomes `undefined`) and `auroMenu-selectValueFailure` is dispatched. In multi-select mode, non-selectable entries are dropped from the value and the remaining selectable entries are selected; `auroMenu-selectValueFailure` is dispatched only when none of the entries match a selectable option.
22187
22176
  */
22188
22177
  value: {
22189
22178
  type: String,
@@ -22307,7 +22296,7 @@ class AuroMenu extends AuroElement {
22307
22296
  }
22308
22297
 
22309
22298
  /**
22310
- * Selects options by value. Options marked `disabled` or `static` are not selectable; `hidden` options remain selectable. In single-select mode, if the value matches a non-selectable option the selection is cleared and `auroMenu-selectValueFailure` is dispatched. In multi-select mode, non-selectable entries are dropped and the remaining selectable entries are selected; `auroMenu-selectValueFailure` is dispatched only when none of the entries match a selectable option. Passing `undefined`, `null`, an empty string, or an empty array clears the selection without dispatching a failure.
22299
+ * Selects options by value.
22311
22300
  * @param {string|string[]|undefined|null} value - The value(s) to select.
22312
22301
  * @public
22313
22302
  */
@@ -22392,11 +22381,6 @@ class AuroMenu extends AuroElement {
22392
22381
  this.initItems();
22393
22382
  }
22394
22383
 
22395
- // Set when reconciliation reassigns `value` below. That reassignment schedules a
22396
- // second updated() cycle, so the `event`-attribute dispatch is deferred to that
22397
- // cycle to avoid firing option custom events twice on the same selection.
22398
- let valueReconciled = false;
22399
-
22400
22384
  // Handle null/undefined/empty case — empty/whitespace strings clear selection
22401
22385
  // consistently with selectByValue(''), and avoid downstream `.includes('')` matches.
22402
22386
  if (this.value === undefined || this.value === null || (typeof this.value === 'string' && this.value.trim() === '')) {
@@ -22409,31 +22393,11 @@ class AuroMenu extends AuroElement {
22409
22393
  // Defensive default: `formattedValue` can be undefined for unexpected value types,
22410
22394
  // and calling `.includes` on undefined would throw during reconciliation.
22411
22395
  const valueArray = this.formattedValue || [];
22412
- const matchingOptions = this.items ? this.items.filter((item) => isSelectableByValue(item) && valueArray.includes(item.value)) : [];
22396
+ const matchingOptions = this.items ? this.items.filter((item) => valueArray.includes(item.value)) : [];
22413
22397
  newSelected = matchingOptions.length > 0 ? matchingOptions : undefined;
22414
-
22415
- // Reconcile `value` with the selectable set. Drop only entries whose option is
22416
- // loaded but non-selectable (disabled/static) — leaving them would desync `value`
22417
- // from `optionSelected`, and the toggle handlers rebuild `value` from `formattedValue`,
22418
- // so the rejected entry would resurface on the next select/deselect. Entries with no
22419
- // matching item yet are preserved so async preselection still works once options render.
22420
- const rejectedValues = this.items
22421
- ? this.items.filter((item) => !isSelectableByValue(item) && valueArray.includes(item.value)).map((item) => item.value)
22422
- : [];
22423
- if (rejectedValues.length > 0) {
22424
- const reconciled = valueArray.filter((val) => !rejectedValues.includes(val));
22425
- this.value = serializeMultiSelectValue(reconciled);
22426
- valueReconciled = true;
22427
- }
22428
22398
  } else {
22429
- // In single-select mode, this.value should be a string. Reject
22430
- // disabled/static options so a programmatic value pointing at a
22431
- // non-selectable option falls through to the no-match path below
22432
- // (dispatching auroMenu-selectValueFailure) instead of pinning it.
22433
- // `hidden` is intentionally NOT excluded: the combobox toggles
22434
- // `hidden` as its type-ahead filter, so a filtered-out option is
22435
- // still a valid programmatic selection.
22436
- const matchingOption = this.items ? this.items.find((item) => isSelectableByValue(item) && item.value === this.value) : undefined;
22399
+ // In single-select mode, this.value should be a string
22400
+ const matchingOption = this.items ? this.items.find((item) => item.value === this.value) : undefined;
22437
22401
 
22438
22402
  if (matchingOption) {
22439
22403
  newSelected = matchingOption;
@@ -22475,9 +22439,8 @@ class AuroMenu extends AuroElement {
22475
22439
  ]
22476
22440
  ]));
22477
22441
 
22478
- // Notify of changes. Skip when reconciliation just reassigned `value`: the
22479
- // follow-on update cycle re-runs this branch and fires the events exactly once.
22480
- if (this.optionSelected !== undefined && !valueReconciled) {
22442
+ // Notify of changes
22443
+ if (this.optionSelected !== undefined) {
22481
22444
  const selected = Array.isArray(this.optionSelected) ? this.optionSelected : [this.optionSelected];
22482
22445
  selected.forEach((opt) => {
22483
22446
  if (opt.hasAttribute('event')) {
@@ -22690,7 +22653,7 @@ class AuroMenu extends AuroElement {
22690
22653
  const currentSelected = this.optionSelected || [];
22691
22654
 
22692
22655
  if (!currentValue.includes(option.value)) {
22693
- this.value = serializeMultiSelectValue([
22656
+ this.value = JSON.stringify([
22694
22657
  ...currentValue,
22695
22658
  option.value
22696
22659
  ]);
@@ -22716,9 +22679,15 @@ class AuroMenu extends AuroElement {
22716
22679
  */
22717
22680
  handleDeselectState(option) {
22718
22681
  if (this.multiSelect) {
22719
- // Remove this option from array; an empty result collapses `value` to undefined.
22682
+ // Remove this option from array
22720
22683
  const newFormattedValue = (this.formattedValue || []).filter((val) => val !== option.value);
22721
- this.value = serializeMultiSelectValue(newFormattedValue);
22684
+
22685
+ // If array is empty after removal, set back to undefined
22686
+ if (newFormattedValue && newFormattedValue.length === 0) {
22687
+ this.value = undefined;
22688
+ } else {
22689
+ this.value = JSON.stringify(newFormattedValue);
22690
+ }
22722
22691
 
22723
22692
  this.optionSelected = this.optionSelected.filter((val) => val !== option);
22724
22693
  if (this.optionSelected.length === 0) {
@@ -22765,11 +22734,6 @@ class AuroMenu extends AuroElement {
22765
22734
  this.optionSelected = undefined;
22766
22735
  this._index = -1;
22767
22736
 
22768
- // Clear active option state so a follow-up open/navigation starts fresh
22769
- // rather than reusing a stale reference from before the reset.
22770
- this.items?.forEach((item) => item.classList.remove('active'));
22771
- this.optionActive = undefined;
22772
-
22773
22737
  // Reset UI state
22774
22738
  this.updateItemsState(new Map([
22775
22739
  [
@@ -23179,7 +23143,6 @@ let menuOptionIdCounter = 0;
23179
23143
  * The `auro-menuoption` element provides users a way to define a menu option.
23180
23144
  * @customElement auro-menuoption
23181
23145
  *
23182
- * @attr {Boolean} static - When present, marks the option as non-interactive — it renders but is skipped during keyboard navigation and cannot be selected. Useful for section headers, informational rows inside a menu, or attaching event listeners.
23183
23146
  * @slot default - The default slot for the menu option text.
23184
23147
  *
23185
23148
  * @event auroMenuOption-mouseover - Notifies that this option has been hovered over.
@@ -23209,7 +23172,6 @@ class AuroMenuOption extends AuroElement {
23209
23172
  this.noCheckmark = false;
23210
23173
  this.disabled = false;
23211
23174
  this.noMatch = false;
23212
- this.persistent = false;
23213
23175
 
23214
23176
  /**
23215
23177
  * @private
@@ -23231,12 +23193,6 @@ class AuroMenuOption extends AuroElement {
23231
23193
  type: Boolean,
23232
23194
  reflect: true
23233
23195
  },
23234
-
23235
- /**
23236
- * **Deprecated.** Use the `value` attribute on `auro-menu` to set the selected option when the menu renders (or call `menu.selectByValue(value)` programmatically). Support for the child-level `selected` attribute will be removed in a future major release.
23237
- *
23238
- * @deprecated Use the `value` attribute on `auro-menu` instead.
23239
- */
23240
23196
  selected: {
23241
23197
  type: Boolean,
23242
23198
  reflect: true
@@ -23271,12 +23227,6 @@ class AuroMenuOption extends AuroElement {
23271
23227
  reflect: true,
23272
23228
  attribute: 'nomatch'
23273
23229
  },
23274
-
23275
- /** When true, this option is excluded from `matchWord` DOM rewriting — useful for utility rows (e.g., "Add new…") that must render identically regardless of the current filter. */
23276
- persistent: {
23277
- type: Boolean,
23278
- reflect: true
23279
- },
23280
23230
  };
23281
23231
  }
23282
23232
 
@@ -968,6 +968,23 @@ const comboboxKeyboardStrategy = {
968
968
  },
969
969
 
970
970
  Tab(component, evt, ctx) {
971
+ // Runs for both Tab and Shift+Tab.
972
+ //
973
+ // Current behavior:
974
+ // Tab — select the active option, close the bib, and (in fullscreen
975
+ // modal mode only) explicitly move focus to the trigger's
976
+ // clear button. In desktop popover mode the browser's native
977
+ // tab traversal takes focus forward from the input.
978
+ // Shift+Tab — select the active option and close the bib. Focus then
979
+ // lands on the trigger's clear button as a byproduct of the
980
+ // shadow-DOM tab order, so keyboard users must press
981
+ // Shift+Tab three times to exit the component (clear button
982
+ // → input → previous element on the page).
983
+ //
984
+ // Intended behavior for Shift+Tab (per team decision, tracked in
985
+ // AB#1590650): a single Shift+Tab should select the active option, close
986
+ // the bib, and move focus directly to the previous focusable element on
987
+ // the page — symmetric with Tab.
971
988
  if (ctx.isExpanded && !isClearBtnFocused(ctx)) {
972
989
  // When the clear button is focused, Tab events do not bubble out of
973
990
  // its shadow DOM, so this handler only fires when the clear button
@@ -4879,7 +4896,7 @@ let AuroHelpText$2 = class AuroHelpText extends i$3 {
4879
4896
  }
4880
4897
  };
4881
4898
 
4882
- var formkitVersion$2 = '202607082148';
4899
+ var formkitVersion$2 = '202607082142';
4883
4900
 
4884
4901
  let AuroElement$2 = class AuroElement extends i$3 {
4885
4902
  static get properties() {
@@ -18504,7 +18521,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$3 {
18504
18521
  }
18505
18522
  };
18506
18523
 
18507
- var formkitVersion$1 = '202607082148';
18524
+ var formkitVersion$1 = '202607082142';
18508
18525
 
18509
18526
  // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
18510
18527
  // See LICENSE in the project root for license information.
@@ -19625,7 +19642,7 @@ class AuroBibtemplate extends i$3 {
19625
19642
  }
19626
19643
  }
19627
19644
 
19628
- var formkitVersion = '202607082148';
19645
+ var formkitVersion = '202607082142';
19629
19646
 
19630
19647
  var styleCss$3 = i$6`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}:host{display:block;text-align:left}:host [auro-dropdown]{--ds-auro-dropdown-trigger-background-color: transparent}:host #inputInBib::part(wrapper){box-shadow:none}:host #inputInBib::part(accent-left){display:none}:host([layout*=classic]) [auro-input]{width:100%}:host([layout*=classic]) [auro-input]::part(helpText){display:none}:host([layout*=classic]) #slotHolder{display:none}`;
19631
19648
 
@@ -20408,6 +20425,8 @@ class AuroCombobox extends AuroElement {
20408
20425
 
20409
20426
  /**
20410
20427
  * If set, the `icon` attribute will be applied to the trigger `auro-input` element.
20428
+ * Icon rendering is currently limited to `type="credit-card"`. Setting `triggerIcon`
20429
+ * without a supported `type` propagates the attribute but does not render a visible icon.
20411
20430
  */
20412
20431
  triggerIcon: {
20413
20432
  type: Boolean,
@@ -20439,7 +20458,7 @@ class AuroCombobox extends AuroElement {
20439
20458
  },
20440
20459
 
20441
20460
  /**
20442
- * Value selected for the dropdown menu. When set programmatically or as a preset attribute, the value must match a selectable option. If it matches an option marked `disabled` or `static`, the selection is rejected: `value` and `optionSelected` are cleared to `undefined`. `hidden` options (including those filtered out by type-ahead) remain selectable by value.
20461
+ * Value selected for the dropdown menu.
20443
20462
  */
20444
20463
  value: {
20445
20464
  type: String
@@ -21957,18 +21976,6 @@ var tokensCss = i$6`:host{--ds-auro-menu-divider-color: var(--ds-basic-color-bor
21957
21976
  // See LICENSE in the project root for license information.
21958
21977
 
21959
21978
 
21960
- /**
21961
- * Serializes a multi-select value array back into the String `value` property.
21962
- * An empty (or missing) array collapses to `undefined` so an emptied selection
21963
- * clears `value` rather than reflecting a `"[]"` attribute.
21964
- * @private
21965
- * @param {Array<string>|undefined} values - The selected values.
21966
- * @returns {string|undefined} JSON string of the values, or undefined when empty.
21967
- */
21968
- function serializeMultiSelectValue(values) {
21969
- return values && values.length > 0 ? JSON.stringify(values) : undefined;
21970
- }
21971
-
21972
21979
  /**
21973
21980
  * Validates if an option can be interacted with.
21974
21981
  * @private
@@ -21981,20 +21988,6 @@ function isOptionInteractive(option) {
21981
21988
  !option.hasAttribute('static');
21982
21989
  }
21983
21990
 
21984
- /**
21985
- * Validates if an option may be selected by matching a programmatic value.
21986
- * Unlike `isOptionInteractive`, `hidden` is allowed: the combobox toggles
21987
- * `hidden` as its type-ahead filter, so a filtered-out option is still a
21988
- * valid programmatic selection. Only disabled and static options — which are
21989
- * never selectable — are rejected.
21990
- * @param {HTMLElement} option - The option to check.
21991
- * @returns {boolean} True if option can be selected by value.
21992
- */
21993
- function isSelectableByValue(option) {
21994
- return !option.hasAttribute('disabled') &&
21995
- !option.hasAttribute('static');
21996
- }
21997
-
21998
21991
  /**
21999
21992
  * Helper method to dispatch custom events.
22000
21993
  * @param {HTMLElement} element - Element to dispatch event from.
@@ -22164,26 +22157,22 @@ class AuroMenu extends AuroElement {
22164
22157
 
22165
22158
  /**
22166
22159
  * Specifies the current active menuOption.
22167
- * @readonly
22168
22160
  */
22169
22161
  optionActive: {
22170
22162
  type: Object,
22171
- attribute: false
22163
+ attribute: 'optionactive'
22172
22164
  },
22173
22165
 
22174
22166
  /**
22175
- * The currently selected menu option(s). In single-select mode this is a single `HTMLElement` (or `undefined` when nothing is selected). In multi-select mode this is an array of `HTMLElement`s.
22176
- * @readonly
22167
+ * An array of currently selected menu options, type `HTMLElement` by default. In multi-select mode, `optionSelected` is an array of HTML elements.
22177
22168
  */
22178
22169
  optionSelected: {
22179
22170
  // Allow HTMLElement, HTMLElement[] arrays and undefined
22180
- type: Object,
22181
- attribute: false
22171
+ type: Object
22182
22172
  },
22183
22173
 
22184
22174
  /**
22185
22175
  * The value of the selected option. In multi-select mode, this is a JSON stringified array of selected option values.
22186
- * Options marked `disabled` or `static` are not selectable by value; `hidden` options remain selectable. In single-select mode, if the value matches a non-selectable option the selection is cleared (`optionSelected` becomes `undefined`) and `auroMenu-selectValueFailure` is dispatched. In multi-select mode, non-selectable entries are dropped from the value and the remaining selectable entries are selected; `auroMenu-selectValueFailure` is dispatched only when none of the entries match a selectable option.
22187
22176
  */
22188
22177
  value: {
22189
22178
  type: String,
@@ -22307,7 +22296,7 @@ class AuroMenu extends AuroElement {
22307
22296
  }
22308
22297
 
22309
22298
  /**
22310
- * Selects options by value. Options marked `disabled` or `static` are not selectable; `hidden` options remain selectable. In single-select mode, if the value matches a non-selectable option the selection is cleared and `auroMenu-selectValueFailure` is dispatched. In multi-select mode, non-selectable entries are dropped and the remaining selectable entries are selected; `auroMenu-selectValueFailure` is dispatched only when none of the entries match a selectable option. Passing `undefined`, `null`, an empty string, or an empty array clears the selection without dispatching a failure.
22299
+ * Selects options by value.
22311
22300
  * @param {string|string[]|undefined|null} value - The value(s) to select.
22312
22301
  * @public
22313
22302
  */
@@ -22392,11 +22381,6 @@ class AuroMenu extends AuroElement {
22392
22381
  this.initItems();
22393
22382
  }
22394
22383
 
22395
- // Set when reconciliation reassigns `value` below. That reassignment schedules a
22396
- // second updated() cycle, so the `event`-attribute dispatch is deferred to that
22397
- // cycle to avoid firing option custom events twice on the same selection.
22398
- let valueReconciled = false;
22399
-
22400
22384
  // Handle null/undefined/empty case — empty/whitespace strings clear selection
22401
22385
  // consistently with selectByValue(''), and avoid downstream `.includes('')` matches.
22402
22386
  if (this.value === undefined || this.value === null || (typeof this.value === 'string' && this.value.trim() === '')) {
@@ -22409,31 +22393,11 @@ class AuroMenu extends AuroElement {
22409
22393
  // Defensive default: `formattedValue` can be undefined for unexpected value types,
22410
22394
  // and calling `.includes` on undefined would throw during reconciliation.
22411
22395
  const valueArray = this.formattedValue || [];
22412
- const matchingOptions = this.items ? this.items.filter((item) => isSelectableByValue(item) && valueArray.includes(item.value)) : [];
22396
+ const matchingOptions = this.items ? this.items.filter((item) => valueArray.includes(item.value)) : [];
22413
22397
  newSelected = matchingOptions.length > 0 ? matchingOptions : undefined;
22414
-
22415
- // Reconcile `value` with the selectable set. Drop only entries whose option is
22416
- // loaded but non-selectable (disabled/static) — leaving them would desync `value`
22417
- // from `optionSelected`, and the toggle handlers rebuild `value` from `formattedValue`,
22418
- // so the rejected entry would resurface on the next select/deselect. Entries with no
22419
- // matching item yet are preserved so async preselection still works once options render.
22420
- const rejectedValues = this.items
22421
- ? this.items.filter((item) => !isSelectableByValue(item) && valueArray.includes(item.value)).map((item) => item.value)
22422
- : [];
22423
- if (rejectedValues.length > 0) {
22424
- const reconciled = valueArray.filter((val) => !rejectedValues.includes(val));
22425
- this.value = serializeMultiSelectValue(reconciled);
22426
- valueReconciled = true;
22427
- }
22428
22398
  } else {
22429
- // In single-select mode, this.value should be a string. Reject
22430
- // disabled/static options so a programmatic value pointing at a
22431
- // non-selectable option falls through to the no-match path below
22432
- // (dispatching auroMenu-selectValueFailure) instead of pinning it.
22433
- // `hidden` is intentionally NOT excluded: the combobox toggles
22434
- // `hidden` as its type-ahead filter, so a filtered-out option is
22435
- // still a valid programmatic selection.
22436
- const matchingOption = this.items ? this.items.find((item) => isSelectableByValue(item) && item.value === this.value) : undefined;
22399
+ // In single-select mode, this.value should be a string
22400
+ const matchingOption = this.items ? this.items.find((item) => item.value === this.value) : undefined;
22437
22401
 
22438
22402
  if (matchingOption) {
22439
22403
  newSelected = matchingOption;
@@ -22475,9 +22439,8 @@ class AuroMenu extends AuroElement {
22475
22439
  ]
22476
22440
  ]));
22477
22441
 
22478
- // Notify of changes. Skip when reconciliation just reassigned `value`: the
22479
- // follow-on update cycle re-runs this branch and fires the events exactly once.
22480
- if (this.optionSelected !== undefined && !valueReconciled) {
22442
+ // Notify of changes
22443
+ if (this.optionSelected !== undefined) {
22481
22444
  const selected = Array.isArray(this.optionSelected) ? this.optionSelected : [this.optionSelected];
22482
22445
  selected.forEach((opt) => {
22483
22446
  if (opt.hasAttribute('event')) {
@@ -22690,7 +22653,7 @@ class AuroMenu extends AuroElement {
22690
22653
  const currentSelected = this.optionSelected || [];
22691
22654
 
22692
22655
  if (!currentValue.includes(option.value)) {
22693
- this.value = serializeMultiSelectValue([
22656
+ this.value = JSON.stringify([
22694
22657
  ...currentValue,
22695
22658
  option.value
22696
22659
  ]);
@@ -22716,9 +22679,15 @@ class AuroMenu extends AuroElement {
22716
22679
  */
22717
22680
  handleDeselectState(option) {
22718
22681
  if (this.multiSelect) {
22719
- // Remove this option from array; an empty result collapses `value` to undefined.
22682
+ // Remove this option from array
22720
22683
  const newFormattedValue = (this.formattedValue || []).filter((val) => val !== option.value);
22721
- this.value = serializeMultiSelectValue(newFormattedValue);
22684
+
22685
+ // If array is empty after removal, set back to undefined
22686
+ if (newFormattedValue && newFormattedValue.length === 0) {
22687
+ this.value = undefined;
22688
+ } else {
22689
+ this.value = JSON.stringify(newFormattedValue);
22690
+ }
22722
22691
 
22723
22692
  this.optionSelected = this.optionSelected.filter((val) => val !== option);
22724
22693
  if (this.optionSelected.length === 0) {
@@ -22765,11 +22734,6 @@ class AuroMenu extends AuroElement {
22765
22734
  this.optionSelected = undefined;
22766
22735
  this._index = -1;
22767
22736
 
22768
- // Clear active option state so a follow-up open/navigation starts fresh
22769
- // rather than reusing a stale reference from before the reset.
22770
- this.items?.forEach((item) => item.classList.remove('active'));
22771
- this.optionActive = undefined;
22772
-
22773
22737
  // Reset UI state
22774
22738
  this.updateItemsState(new Map([
22775
22739
  [
@@ -23179,7 +23143,6 @@ let menuOptionIdCounter = 0;
23179
23143
  * The `auro-menuoption` element provides users a way to define a menu option.
23180
23144
  * @customElement auro-menuoption
23181
23145
  *
23182
- * @attr {Boolean} static - When present, marks the option as non-interactive — it renders but is skipped during keyboard navigation and cannot be selected. Useful for section headers, informational rows inside a menu, or attaching event listeners.
23183
23146
  * @slot default - The default slot for the menu option text.
23184
23147
  *
23185
23148
  * @event auroMenuOption-mouseover - Notifies that this option has been hovered over.
@@ -23209,7 +23172,6 @@ class AuroMenuOption extends AuroElement {
23209
23172
  this.noCheckmark = false;
23210
23173
  this.disabled = false;
23211
23174
  this.noMatch = false;
23212
- this.persistent = false;
23213
23175
 
23214
23176
  /**
23215
23177
  * @private
@@ -23231,12 +23193,6 @@ class AuroMenuOption extends AuroElement {
23231
23193
  type: Boolean,
23232
23194
  reflect: true
23233
23195
  },
23234
-
23235
- /**
23236
- * **Deprecated.** Use the `value` attribute on `auro-menu` to set the selected option when the menu renders (or call `menu.selectByValue(value)` programmatically). Support for the child-level `selected` attribute will be removed in a future major release.
23237
- *
23238
- * @deprecated Use the `value` attribute on `auro-menu` instead.
23239
- */
23240
23196
  selected: {
23241
23197
  type: Boolean,
23242
23198
  reflect: true
@@ -23271,12 +23227,6 @@ class AuroMenuOption extends AuroElement {
23271
23227
  reflect: true,
23272
23228
  attribute: 'nomatch'
23273
23229
  },
23274
-
23275
- /** When true, this option is excluded from `matchWord` DOM rewriting — useful for utility rows (e.g., "Add new…") that must render identically regardless of the current filter. */
23276
- persistent: {
23277
- type: Boolean,
23278
- reflect: true
23279
- },
23280
23230
  };
23281
23231
  }
23282
23232
 
@@ -136,7 +136,6 @@
136
136
  <auro-header level="3" id="presetValue">Preset the value</auro-header>
137
137
  <p>In some cases it is necessary to preset the value of the component as part of the initial render.</p>
138
138
  <p>When a value is preset, the matching option in the menu will be marked as both <code>active</code> and <code>selected</code>, and the input will display the corresponding text.</p>
139
- <p>If a preset value matches an option marked <code>disabled</code> or <code>static</code>, the selection is rejected: <code>value</code> and <code>optionSelected</code> are cleared to <code>undefined</code>. A value that matches a <code>hidden</code> option is still applied.</p>
140
139
  <p>If a preset value does not match any option, the component value is preserved and displayed in the input, but no menu option will be marked as selected. In suggestion mode, this value is treated as valid freeform input. In filter mode, the value will fail validation if the component is <code>required</code>.</p>
141
140
  <auro-header level="3" id="autocomplete">Autocomplete</auro-header>
142
141
  <p>The component supports the use of <auro-hyperlink href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/autocomplete">autocomplete</auro-hyperlink> configuration through HTML attributes.</p>