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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (69) 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 +1 -1
  7. package/components/combobox/demo/customize.min.js +22 -91
  8. package/components/combobox/demo/getting-started.min.js +22 -91
  9. package/components/combobox/demo/index.md +0 -1
  10. package/components/combobox/demo/index.min.js +22 -91
  11. package/components/combobox/dist/auro-combobox.d.ts +1 -1
  12. package/components/combobox/dist/index.js +4 -4
  13. package/components/combobox/dist/registered.js +4 -4
  14. package/components/counter/demo/customize.min.js +2 -2
  15. package/components/counter/demo/index.min.js +2 -2
  16. package/components/counter/dist/index.js +2 -2
  17. package/components/counter/dist/registered.js +2 -2
  18. package/components/datepicker/demo/customize.min.js +3 -3
  19. package/components/datepicker/demo/index.min.js +3 -3
  20. package/components/datepicker/dist/index.js +3 -3
  21. package/components/datepicker/dist/registered.js +3 -3
  22. package/components/dropdown/demo/customize.min.js +1 -1
  23. package/components/dropdown/demo/getting-started.min.js +1 -1
  24. package/components/dropdown/demo/index.min.js +1 -1
  25. package/components/dropdown/dist/index.js +1 -1
  26. package/components/dropdown/dist/registered.js +1 -1
  27. package/components/form/demo/customize.min.js +33 -106
  28. package/components/form/demo/getting-started.min.js +33 -106
  29. package/components/form/demo/index.min.js +33 -106
  30. package/components/form/demo/registerDemoDeps.min.js +33 -106
  31. package/components/input/demo/customize.min.js +1 -1
  32. package/components/input/demo/getting-started.min.js +1 -1
  33. package/components/input/demo/index.min.js +1 -1
  34. package/components/input/dist/index.js +1 -1
  35. package/components/input/dist/registered.js +1 -1
  36. package/components/menu/demo/accessibility.md +4 -4
  37. package/components/menu/demo/api.md +19 -26
  38. package/components/menu/demo/css-only.md +19 -26
  39. package/components/menu/demo/customize.md +47 -307
  40. package/components/menu/demo/design.md +1 -1
  41. package/components/menu/demo/getting-started.md +7 -144
  42. package/components/menu/demo/index.min.js +19 -214
  43. package/components/menu/demo/keyboard-behavior.md +4 -83
  44. package/components/menu/demo/voiceover.md +8 -12
  45. package/components/menu/demo/why-menu.md +9 -8
  46. package/components/menu/dist/auro-menu-utils.d.ts +0 -19
  47. package/components/menu/dist/auro-menu.d.ts +8 -4
  48. package/components/menu/dist/auro-menuoption.d.ts +0 -12
  49. package/components/menu/dist/index.js +18 -87
  50. package/components/menu/dist/registered.js +18 -87
  51. package/components/radio/demo/customize.min.js +1 -1
  52. package/components/radio/demo/getting-started.min.js +1 -1
  53. package/components/radio/demo/index.min.js +1 -1
  54. package/components/radio/dist/index.js +1 -1
  55. package/components/radio/dist/registered.js +1 -1
  56. package/components/select/demo/api.md +2 -2
  57. package/components/select/demo/customize.md +2 -5
  58. package/components/select/demo/customize.min.js +21 -94
  59. package/components/select/demo/design.md +10 -10
  60. package/components/select/demo/getting-started.md +1 -1
  61. package/components/select/demo/getting-started.min.js +21 -94
  62. package/components/select/demo/index.md +2 -2
  63. package/components/select/demo/index.min.js +21 -94
  64. package/components/select/demo/keyboard-behavior.md +18 -49
  65. package/components/select/dist/auro-select.d.ts +2 -6
  66. package/components/select/dist/index.js +3 -7
  67. package/components/select/dist/registered.js +3 -7
  68. package/custom-elements.json +1540 -1614
  69. 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 = '202607082143';
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 = '202607082143';
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 = '202607082143';
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 = '202607082143';
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 = '202607082143';
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.
@@ -42,7 +42,7 @@ The `auro-combobox` element provides users with a way to select an option from a
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
 
@@ -4879,7 +4879,7 @@ let AuroHelpText$2 = class AuroHelpText extends i$3 {
4879
4879
  }
4880
4880
  };
4881
4881
 
4882
- var formkitVersion$2 = '202607082148';
4882
+ var formkitVersion$2 = '202607082143';
4883
4883
 
4884
4884
  let AuroElement$2 = class AuroElement extends i$3 {
4885
4885
  static get properties() {
@@ -18504,7 +18504,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$3 {
18504
18504
  }
18505
18505
  };
18506
18506
 
18507
- var formkitVersion$1 = '202607082148';
18507
+ var formkitVersion$1 = '202607082143';
18508
18508
 
18509
18509
  // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
18510
18510
  // See LICENSE in the project root for license information.
@@ -19625,7 +19625,7 @@ class AuroBibtemplate extends i$3 {
19625
19625
  }
19626
19626
  }
19627
19627
 
19628
- var formkitVersion = '202607082148';
19628
+ var formkitVersion = '202607082143';
19629
19629
 
19630
19630
  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
19631
 
@@ -20439,7 +20439,7 @@ class AuroCombobox extends AuroElement {
20439
20439
  },
20440
20440
 
20441
20441
  /**
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.
20442
+ * Value selected for the dropdown menu.
20443
20443
  */
20444
20444
  value: {
20445
20445
  type: String
@@ -21957,18 +21957,6 @@ var tokensCss = i$6`:host{--ds-auro-menu-divider-color: var(--ds-basic-color-bor
21957
21957
  // See LICENSE in the project root for license information.
21958
21958
 
21959
21959
 
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
21960
  /**
21973
21961
  * Validates if an option can be interacted with.
21974
21962
  * @private
@@ -21981,20 +21969,6 @@ function isOptionInteractive(option) {
21981
21969
  !option.hasAttribute('static');
21982
21970
  }
21983
21971
 
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
21972
  /**
21999
21973
  * Helper method to dispatch custom events.
22000
21974
  * @param {HTMLElement} element - Element to dispatch event from.
@@ -22164,26 +22138,22 @@ class AuroMenu extends AuroElement {
22164
22138
 
22165
22139
  /**
22166
22140
  * Specifies the current active menuOption.
22167
- * @readonly
22168
22141
  */
22169
22142
  optionActive: {
22170
22143
  type: Object,
22171
- attribute: false
22144
+ attribute: 'optionactive'
22172
22145
  },
22173
22146
 
22174
22147
  /**
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
22148
+ * An array of currently selected menu options, type `HTMLElement` by default. In multi-select mode, `optionSelected` is an array of HTML elements.
22177
22149
  */
22178
22150
  optionSelected: {
22179
22151
  // Allow HTMLElement, HTMLElement[] arrays and undefined
22180
- type: Object,
22181
- attribute: false
22152
+ type: Object
22182
22153
  },
22183
22154
 
22184
22155
  /**
22185
22156
  * 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
22157
  */
22188
22158
  value: {
22189
22159
  type: String,
@@ -22307,7 +22277,7 @@ class AuroMenu extends AuroElement {
22307
22277
  }
22308
22278
 
22309
22279
  /**
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.
22280
+ * Selects options by value.
22311
22281
  * @param {string|string[]|undefined|null} value - The value(s) to select.
22312
22282
  * @public
22313
22283
  */
@@ -22392,11 +22362,6 @@ class AuroMenu extends AuroElement {
22392
22362
  this.initItems();
22393
22363
  }
22394
22364
 
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
22365
  // Handle null/undefined/empty case — empty/whitespace strings clear selection
22401
22366
  // consistently with selectByValue(''), and avoid downstream `.includes('')` matches.
22402
22367
  if (this.value === undefined || this.value === null || (typeof this.value === 'string' && this.value.trim() === '')) {
@@ -22409,31 +22374,11 @@ class AuroMenu extends AuroElement {
22409
22374
  // Defensive default: `formattedValue` can be undefined for unexpected value types,
22410
22375
  // and calling `.includes` on undefined would throw during reconciliation.
22411
22376
  const valueArray = this.formattedValue || [];
22412
- const matchingOptions = this.items ? this.items.filter((item) => isSelectableByValue(item) && valueArray.includes(item.value)) : [];
22377
+ const matchingOptions = this.items ? this.items.filter((item) => valueArray.includes(item.value)) : [];
22413
22378
  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
22379
  } 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;
22380
+ // In single-select mode, this.value should be a string
22381
+ const matchingOption = this.items ? this.items.find((item) => item.value === this.value) : undefined;
22437
22382
 
22438
22383
  if (matchingOption) {
22439
22384
  newSelected = matchingOption;
@@ -22475,9 +22420,8 @@ class AuroMenu extends AuroElement {
22475
22420
  ]
22476
22421
  ]));
22477
22422
 
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) {
22423
+ // Notify of changes
22424
+ if (this.optionSelected !== undefined) {
22481
22425
  const selected = Array.isArray(this.optionSelected) ? this.optionSelected : [this.optionSelected];
22482
22426
  selected.forEach((opt) => {
22483
22427
  if (opt.hasAttribute('event')) {
@@ -22690,7 +22634,7 @@ class AuroMenu extends AuroElement {
22690
22634
  const currentSelected = this.optionSelected || [];
22691
22635
 
22692
22636
  if (!currentValue.includes(option.value)) {
22693
- this.value = serializeMultiSelectValue([
22637
+ this.value = JSON.stringify([
22694
22638
  ...currentValue,
22695
22639
  option.value
22696
22640
  ]);
@@ -22716,9 +22660,15 @@ class AuroMenu extends AuroElement {
22716
22660
  */
22717
22661
  handleDeselectState(option) {
22718
22662
  if (this.multiSelect) {
22719
- // Remove this option from array; an empty result collapses `value` to undefined.
22663
+ // Remove this option from array
22720
22664
  const newFormattedValue = (this.formattedValue || []).filter((val) => val !== option.value);
22721
- this.value = serializeMultiSelectValue(newFormattedValue);
22665
+
22666
+ // If array is empty after removal, set back to undefined
22667
+ if (newFormattedValue && newFormattedValue.length === 0) {
22668
+ this.value = undefined;
22669
+ } else {
22670
+ this.value = JSON.stringify(newFormattedValue);
22671
+ }
22722
22672
 
22723
22673
  this.optionSelected = this.optionSelected.filter((val) => val !== option);
22724
22674
  if (this.optionSelected.length === 0) {
@@ -22765,11 +22715,6 @@ class AuroMenu extends AuroElement {
22765
22715
  this.optionSelected = undefined;
22766
22716
  this._index = -1;
22767
22717
 
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
22718
  // Reset UI state
22774
22719
  this.updateItemsState(new Map([
22775
22720
  [
@@ -23179,7 +23124,6 @@ let menuOptionIdCounter = 0;
23179
23124
  * The `auro-menuoption` element provides users a way to define a menu option.
23180
23125
  * @customElement auro-menuoption
23181
23126
  *
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
23127
  * @slot default - The default slot for the menu option text.
23184
23128
  *
23185
23129
  * @event auroMenuOption-mouseover - Notifies that this option has been hovered over.
@@ -23209,7 +23153,6 @@ class AuroMenuOption extends AuroElement {
23209
23153
  this.noCheckmark = false;
23210
23154
  this.disabled = false;
23211
23155
  this.noMatch = false;
23212
- this.persistent = false;
23213
23156
 
23214
23157
  /**
23215
23158
  * @private
@@ -23231,12 +23174,6 @@ class AuroMenuOption extends AuroElement {
23231
23174
  type: Boolean,
23232
23175
  reflect: true
23233
23176
  },
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
23177
  selected: {
23241
23178
  type: Boolean,
23242
23179
  reflect: true
@@ -23271,12 +23208,6 @@ class AuroMenuOption extends AuroElement {
23271
23208
  reflect: true,
23272
23209
  attribute: 'nomatch'
23273
23210
  },
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
23211
  };
23281
23212
  }
23282
23213
 
@@ -4879,7 +4879,7 @@ let AuroHelpText$2 = class AuroHelpText extends i$3 {
4879
4879
  }
4880
4880
  };
4881
4881
 
4882
- var formkitVersion$2 = '202607082148';
4882
+ var formkitVersion$2 = '202607082143';
4883
4883
 
4884
4884
  let AuroElement$2 = class AuroElement extends i$3 {
4885
4885
  static get properties() {
@@ -18504,7 +18504,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$3 {
18504
18504
  }
18505
18505
  };
18506
18506
 
18507
- var formkitVersion$1 = '202607082148';
18507
+ var formkitVersion$1 = '202607082143';
18508
18508
 
18509
18509
  // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
18510
18510
  // See LICENSE in the project root for license information.
@@ -19625,7 +19625,7 @@ class AuroBibtemplate extends i$3 {
19625
19625
  }
19626
19626
  }
19627
19627
 
19628
- var formkitVersion = '202607082148';
19628
+ var formkitVersion = '202607082143';
19629
19629
 
19630
19630
  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
19631
 
@@ -20439,7 +20439,7 @@ class AuroCombobox extends AuroElement {
20439
20439
  },
20440
20440
 
20441
20441
  /**
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.
20442
+ * Value selected for the dropdown menu.
20443
20443
  */
20444
20444
  value: {
20445
20445
  type: String
@@ -21957,18 +21957,6 @@ var tokensCss = i$6`:host{--ds-auro-menu-divider-color: var(--ds-basic-color-bor
21957
21957
  // See LICENSE in the project root for license information.
21958
21958
 
21959
21959
 
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
21960
  /**
21973
21961
  * Validates if an option can be interacted with.
21974
21962
  * @private
@@ -21981,20 +21969,6 @@ function isOptionInteractive(option) {
21981
21969
  !option.hasAttribute('static');
21982
21970
  }
21983
21971
 
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
21972
  /**
21999
21973
  * Helper method to dispatch custom events.
22000
21974
  * @param {HTMLElement} element - Element to dispatch event from.
@@ -22164,26 +22138,22 @@ class AuroMenu extends AuroElement {
22164
22138
 
22165
22139
  /**
22166
22140
  * Specifies the current active menuOption.
22167
- * @readonly
22168
22141
  */
22169
22142
  optionActive: {
22170
22143
  type: Object,
22171
- attribute: false
22144
+ attribute: 'optionactive'
22172
22145
  },
22173
22146
 
22174
22147
  /**
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
22148
+ * An array of currently selected menu options, type `HTMLElement` by default. In multi-select mode, `optionSelected` is an array of HTML elements.
22177
22149
  */
22178
22150
  optionSelected: {
22179
22151
  // Allow HTMLElement, HTMLElement[] arrays and undefined
22180
- type: Object,
22181
- attribute: false
22152
+ type: Object
22182
22153
  },
22183
22154
 
22184
22155
  /**
22185
22156
  * 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
22157
  */
22188
22158
  value: {
22189
22159
  type: String,
@@ -22307,7 +22277,7 @@ class AuroMenu extends AuroElement {
22307
22277
  }
22308
22278
 
22309
22279
  /**
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.
22280
+ * Selects options by value.
22311
22281
  * @param {string|string[]|undefined|null} value - The value(s) to select.
22312
22282
  * @public
22313
22283
  */
@@ -22392,11 +22362,6 @@ class AuroMenu extends AuroElement {
22392
22362
  this.initItems();
22393
22363
  }
22394
22364
 
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
22365
  // Handle null/undefined/empty case — empty/whitespace strings clear selection
22401
22366
  // consistently with selectByValue(''), and avoid downstream `.includes('')` matches.
22402
22367
  if (this.value === undefined || this.value === null || (typeof this.value === 'string' && this.value.trim() === '')) {
@@ -22409,31 +22374,11 @@ class AuroMenu extends AuroElement {
22409
22374
  // Defensive default: `formattedValue` can be undefined for unexpected value types,
22410
22375
  // and calling `.includes` on undefined would throw during reconciliation.
22411
22376
  const valueArray = this.formattedValue || [];
22412
- const matchingOptions = this.items ? this.items.filter((item) => isSelectableByValue(item) && valueArray.includes(item.value)) : [];
22377
+ const matchingOptions = this.items ? this.items.filter((item) => valueArray.includes(item.value)) : [];
22413
22378
  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
22379
  } 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;
22380
+ // In single-select mode, this.value should be a string
22381
+ const matchingOption = this.items ? this.items.find((item) => item.value === this.value) : undefined;
22437
22382
 
22438
22383
  if (matchingOption) {
22439
22384
  newSelected = matchingOption;
@@ -22475,9 +22420,8 @@ class AuroMenu extends AuroElement {
22475
22420
  ]
22476
22421
  ]));
22477
22422
 
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) {
22423
+ // Notify of changes
22424
+ if (this.optionSelected !== undefined) {
22481
22425
  const selected = Array.isArray(this.optionSelected) ? this.optionSelected : [this.optionSelected];
22482
22426
  selected.forEach((opt) => {
22483
22427
  if (opt.hasAttribute('event')) {
@@ -22690,7 +22634,7 @@ class AuroMenu extends AuroElement {
22690
22634
  const currentSelected = this.optionSelected || [];
22691
22635
 
22692
22636
  if (!currentValue.includes(option.value)) {
22693
- this.value = serializeMultiSelectValue([
22637
+ this.value = JSON.stringify([
22694
22638
  ...currentValue,
22695
22639
  option.value
22696
22640
  ]);
@@ -22716,9 +22660,15 @@ class AuroMenu extends AuroElement {
22716
22660
  */
22717
22661
  handleDeselectState(option) {
22718
22662
  if (this.multiSelect) {
22719
- // Remove this option from array; an empty result collapses `value` to undefined.
22663
+ // Remove this option from array
22720
22664
  const newFormattedValue = (this.formattedValue || []).filter((val) => val !== option.value);
22721
- this.value = serializeMultiSelectValue(newFormattedValue);
22665
+
22666
+ // If array is empty after removal, set back to undefined
22667
+ if (newFormattedValue && newFormattedValue.length === 0) {
22668
+ this.value = undefined;
22669
+ } else {
22670
+ this.value = JSON.stringify(newFormattedValue);
22671
+ }
22722
22672
 
22723
22673
  this.optionSelected = this.optionSelected.filter((val) => val !== option);
22724
22674
  if (this.optionSelected.length === 0) {
@@ -22765,11 +22715,6 @@ class AuroMenu extends AuroElement {
22765
22715
  this.optionSelected = undefined;
22766
22716
  this._index = -1;
22767
22717
 
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
22718
  // Reset UI state
22774
22719
  this.updateItemsState(new Map([
22775
22720
  [
@@ -23179,7 +23124,6 @@ let menuOptionIdCounter = 0;
23179
23124
  * The `auro-menuoption` element provides users a way to define a menu option.
23180
23125
  * @customElement auro-menuoption
23181
23126
  *
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
23127
  * @slot default - The default slot for the menu option text.
23184
23128
  *
23185
23129
  * @event auroMenuOption-mouseover - Notifies that this option has been hovered over.
@@ -23209,7 +23153,6 @@ class AuroMenuOption extends AuroElement {
23209
23153
  this.noCheckmark = false;
23210
23154
  this.disabled = false;
23211
23155
  this.noMatch = false;
23212
- this.persistent = false;
23213
23156
 
23214
23157
  /**
23215
23158
  * @private
@@ -23231,12 +23174,6 @@ class AuroMenuOption extends AuroElement {
23231
23174
  type: Boolean,
23232
23175
  reflect: true
23233
23176
  },
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
23177
  selected: {
23241
23178
  type: Boolean,
23242
23179
  reflect: true
@@ -23271,12 +23208,6 @@ class AuroMenuOption extends AuroElement {
23271
23208
  reflect: true,
23272
23209
  attribute: 'nomatch'
23273
23210
  },
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
23211
  };
23281
23212
  }
23282
23213
 
@@ -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>