@aurodesignsystem-dev/auro-formkit 0.0.0-pr1576.7 → 0.0.0-pr1577.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 (51) 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/customize.md +0 -40
  7. package/components/combobox/demo/customize.min.js +65 -359
  8. package/components/combobox/demo/getting-started.min.js +65 -359
  9. package/components/combobox/demo/index.min.js +65 -359
  10. package/components/combobox/dist/index.js +38 -56
  11. package/components/combobox/dist/registered.js +38 -56
  12. package/components/counter/demo/customize.min.js +11 -2
  13. package/components/counter/demo/index.min.js +11 -2
  14. package/components/counter/dist/index.js +11 -2
  15. package/components/counter/dist/registered.js +11 -2
  16. package/components/datepicker/demo/customize.min.js +12 -3
  17. package/components/datepicker/demo/index.min.js +12 -3
  18. package/components/datepicker/dist/index.js +12 -3
  19. package/components/datepicker/dist/registered.js +12 -3
  20. package/components/dropdown/demo/customize.min.js +10 -1
  21. package/components/dropdown/demo/getting-started.min.js +10 -1
  22. package/components/dropdown/demo/index.min.js +10 -1
  23. package/components/dropdown/dist/index.js +10 -1
  24. package/components/dropdown/dist/registered.js +10 -1
  25. package/components/form/demo/customize.min.js +102 -369
  26. package/components/form/demo/getting-started.min.js +102 -369
  27. package/components/form/demo/index.min.js +102 -369
  28. package/components/form/demo/registerDemoDeps.min.js +102 -369
  29. package/components/input/demo/customize.min.js +1 -1
  30. package/components/input/demo/getting-started.min.js +1 -1
  31. package/components/input/demo/index.min.js +1 -1
  32. package/components/input/dist/index.js +1 -1
  33. package/components/input/dist/registered.js +1 -1
  34. package/components/menu/demo/index.min.js +27 -303
  35. package/components/menu/dist/auro-menu-utils.d.ts +0 -30
  36. package/components/menu/dist/auro-menu.d.ts +0 -23
  37. package/components/menu/dist/index.js +27 -303
  38. package/components/menu/dist/registered.js +27 -303
  39. package/components/radio/demo/customize.min.js +1 -1
  40. package/components/radio/demo/getting-started.min.js +1 -1
  41. package/components/radio/demo/index.min.js +1 -1
  42. package/components/radio/dist/index.js +1 -1
  43. package/components/radio/dist/registered.js +1 -1
  44. package/components/select/demo/customize.md +0 -72
  45. package/components/select/demo/customize.min.js +38 -305
  46. package/components/select/demo/getting-started.min.js +38 -305
  47. package/components/select/demo/index.min.js +38 -305
  48. package/components/select/dist/index.js +11 -2
  49. package/components/select/dist/registered.js +11 -2
  50. package/custom-elements.json +1511 -1614
  51. package/package.json +1 -1
@@ -4992,7 +4992,7 @@ let AuroHelpText$2 = class AuroHelpText extends i$3 {
4992
4992
  }
4993
4993
  };
4994
4994
 
4995
- var formkitVersion$2 = '202608041729';
4995
+ var formkitVersion$2 = '202608041712';
4996
4996
 
4997
4997
  let AuroElement$2 = class AuroElement extends i$3 {
4998
4998
  static get properties() {
@@ -5694,6 +5694,15 @@ class AuroDropdown extends AuroElement$2 {
5694
5694
 
5695
5695
  connectedCallback() {
5696
5696
  super.connectedCallback();
5697
+ // Re-register trigger event listeners removed by floater.disconnect() in
5698
+ // disconnectedCallback(). Fires when a parent element (e.g. auro-drawer)
5699
+ // moves this element to a new DOM location. firstUpdated() won't re-run,
5700
+ // so without this the trigger click/keydown handlers are permanently gone.
5701
+ // Guard on floater.element so this is a no-op on the initial connect
5702
+ // (before firstUpdated() has called configure()).
5703
+ if (this.floater?.element) {
5704
+ this.floater.configure(this, 'auroDropdown', !this.disableKeyboardHandling);
5705
+ }
5697
5706
  }
5698
5707
 
5699
5708
  disconnectedCallback() {
@@ -18681,7 +18690,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$3 {
18681
18690
  }
18682
18691
  };
18683
18692
 
18684
- var formkitVersion$1 = '202608041729';
18693
+ var formkitVersion$1 = '202608041712';
18685
18694
 
18686
18695
  // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
18687
18696
  // See LICENSE in the project root for license information.
@@ -19837,7 +19846,7 @@ class AuroBibtemplate extends i$3 {
19837
19846
  }
19838
19847
  }
19839
19848
 
19840
- var formkitVersion = '202608041729';
19849
+ var formkitVersion = '202608041712';
19841
19850
 
19842
19851
  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}`;
19843
19852
 
@@ -21643,17 +21652,7 @@ class AuroCombobox extends AuroElement {
21643
21652
  return;
21644
21653
  }
21645
21654
 
21646
- // Skip this write during a display-value sync: that path sets the input to
21647
- // the selected option's LABEL, which is not its machine value. When an
21648
- // option's label differs from its value (and especially when several
21649
- // options share a value but render distinct labels — AB#1602086), writing
21650
- // the label back into this.value clobbers the machine value the selection
21651
- // listener just set (this.value = optionSelected.value), collapsing the
21652
- // selection. _syncingBibValue still tracks (that mirrors user-typed text
21653
- // from the fullscreen bib, where value should follow the input).
21654
- if (!this._syncingDisplayValue) {
21655
- this.value = this.input.value;
21656
- }
21655
+ this.value = this.input.value;
21657
21656
 
21658
21657
  // Ignore re-entrant input events caused by programmatic value sets.
21659
21658
  if (this._syncingBibValue || this._syncingDisplayValue) {
@@ -21917,50 +21916,33 @@ class AuroCombobox extends AuroElement {
21917
21916
  }
21918
21917
 
21919
21918
  if (this.input.value !== this.value) {
21920
- // A fresh user selection leaves the input showing the option's LABEL
21921
- // while this.value holds its machine value, so input.value !== this.value
21922
- // is expected whenever label ≠ value. In that case the menu's current
21923
- // selection is authoritative — and when several options share a value it
21924
- // is the ONLY thing that records WHICH same-value option the user picked
21925
- // (the menu tracks it by element identity via `_selectedKey`). Clearing
21926
- // it here drops that key; the ensuing value-only re-resolution then
21927
- // collapses the selection onto the first same-value option (AB#1602086).
21928
- // So only treat the divergence as a stale menu when the selected option
21929
- // does NOT match the new value.
21930
- const menuSelectionMatchesValue =
21931
- this.menu.optionSelected &&
21932
- !Array.isArray(this.menu.optionSelected) &&
21933
- this.menu.optionSelected.value === this.value;
21934
-
21935
- if (!menuSelectionMatchesValue) {
21936
- // Clear menu.value AND menu.optionSelected together. Clearing only
21937
- // menu.value leaves the previously-selected option element pinned
21938
- // as menu.optionSelected; a later auroMenu-selectedOption event
21939
- // would then write its stale .value back into combobox.value
21940
- // (e.g. Tab-after-Backspace re-selecting the prior option).
21941
- if (this.menu.value || this.menu.optionSelected) {
21942
- this.menu.clearSelection();
21943
- }
21919
+ // Clear menu.value AND menu.optionSelected together. Clearing only
21920
+ // menu.value leaves the previously-selected option element pinned
21921
+ // as menu.optionSelected; a later auroMenu-selectedOption event
21922
+ // would then write its stale .value back into combobox.value
21923
+ // (e.g. Tab-after-Backspace re-selecting the prior option).
21924
+ if (this.menu.value || this.menu.optionSelected) {
21925
+ this.menu.clearSelection();
21926
+ }
21944
21927
 
21945
- if (!this.persistInput) {
21946
- this.syncInputValuesAcrossTriggerAndBib(this.value || '');
21947
- }
21928
+ if (!this.persistInput) {
21929
+ this.syncInputValuesAcrossTriggerAndBib(this.value || '');
21930
+ }
21948
21931
 
21949
- // Programmatic value with no matching option: updateFilter will close
21950
- // the bib silently (see line 648 — no noMatchOption + 0 results
21951
- // hides). Announce so screen-reader users hear the request was
21952
- // dropped. Gated on `input.value !== this.value` so this never fires
21953
- // for user typing — that path always reconciles input.value to
21954
- // this.value before updated() runs.
21955
- if (
21956
- this.value &&
21957
- this.menu &&
21958
- this.menu.options &&
21959
- this.menu.options.length > 0 &&
21960
- !this.menu.options.some((opt) => opt.value === this.value)
21961
- ) {
21962
- announceToScreenReader(this._getAnnouncementRoot(), `No matching option for ${this.value}`);
21963
- }
21932
+ // Programmatic value with no matching option: updateFilter will close
21933
+ // the bib silently (see line 648 — no noMatchOption + 0 results
21934
+ // hides). Announce so screen-reader users hear the request was
21935
+ // dropped. Gated on `input.value !== this.value` so this never fires
21936
+ // for user typing — that path always reconciles input.value to
21937
+ // this.value before updated() runs.
21938
+ if (
21939
+ this.value &&
21940
+ this.menu &&
21941
+ this.menu.options &&
21942
+ this.menu.options.length > 0 &&
21943
+ !this.menu.options.some((opt) => opt.value === this.value)
21944
+ ) {
21945
+ announceToScreenReader(this._getAnnouncementRoot(), `No matching option for ${this.value}`);
21964
21946
  }
21965
21947
  }
21966
21948
 
@@ -22297,107 +22279,6 @@ function isSelectableByValue(option) {
22297
22279
  !option.hasAttribute('static');
22298
22280
  }
22299
22281
 
22300
- /* eslint-disable no-underscore-dangle */
22301
- /**
22302
- * Resolves the single selected option for a given `value`, preferring the
22303
- * option tracked by `selectedKey` (a user-initiated selection) over a
22304
- * first-by-value match. When multiple options share the same `value`, matching
22305
- * by `value` alone cannot distinguish which one the user picked; the key
22306
- * disambiguates it.
22307
- *
22308
- * The key is trusted only when it still resolves to an option whose `value`
22309
- * matches the requested `value`. If the key is stale (option removed) or the
22310
- * value was changed programmatically, resolution falls back to value matching —
22311
- * preserving backward-compatible behavior for preselection and `selectByValue`.
22312
- * @private
22313
- * @param {Array<HTMLElement>} items - The menu's flat option list.
22314
- * @param {string} value - The value to resolve.
22315
- * @param {string|undefined} selectedKey - The `_optionKey` of the user-selected option, if any.
22316
- * @returns {HTMLElement|undefined} The resolved option, or undefined when none match.
22317
- */
22318
- function resolveSelectedOption(items, value, selectedKey) {
22319
- if (!items) {
22320
- return undefined;
22321
- }
22322
-
22323
- if (selectedKey !== undefined) {
22324
- const keyed = items.find((item) => item._optionKey === selectedKey);
22325
- if (keyed && isSelectableByValue(keyed) && keyed.value === value) {
22326
- return keyed;
22327
- }
22328
- // Key exists but the option is gone or its value no longer matches — fall
22329
- // through to value-based matching.
22330
- }
22331
-
22332
- return items.find((item) => isSelectableByValue(item) && item.value === value);
22333
- }
22334
-
22335
- /**
22336
- * Resolves the selected options for a multi-select `value` array, preferring
22337
- * options tracked by `selectedKeys` (user-initiated selections) and falling
22338
- * back to value matching for any values not resolved by key. The result is
22339
- * always sorted into DOM order regardless of selection sequence.
22340
- * @private
22341
- * @param {Array<HTMLElement>} items - The menu's flat option list.
22342
- * @param {Array<string>} valueArray - The selected values.
22343
- * @param {Array<string>|undefined} selectedKeys - The `_optionKey`s of the user-selected options, if any.
22344
- * @returns {Array<HTMLElement>} The resolved options in DOM order.
22345
- */
22346
- function resolveSelectedOptions(items, valueArray, selectedKeys) {
22347
- if (!items) {
22348
- return [];
22349
- }
22350
-
22351
- const resolved = [];
22352
-
22353
- // Track how many of each value are still available to resolve. A value that
22354
- // appears N times in `valueArray` may be satisfied at most N times total across
22355
- // the key pass and the value fallback below — matching by count, not presence,
22356
- // on BOTH passes. This stops a duplicate value from being over-resolved: e.g.
22357
- // two keyed options that both carry `SEA` cannot both match a single requested
22358
- // `SEA` (which happens when `value` is set directly without clearing
22359
- // `_selectedKey`, so more keys survive than the value set now asks for).
22360
- const remaining = new Map();
22361
- valueArray.forEach((val) => remaining.set(val, (remaining.get(val) || 0) + 1));
22362
-
22363
- // Resolve by key first: trust a key only when its option is still selectable
22364
- // and there is still an unmatched occurrence of its value in the request set.
22365
- if (Array.isArray(selectedKeys)) {
22366
- selectedKeys.forEach((key) => {
22367
- const keyed = items.find((item) => item._optionKey === key);
22368
- if (keyed && isSelectableByValue(keyed) && (remaining.get(keyed.value) || 0) > 0 && !resolved.includes(keyed)) {
22369
- resolved.push(keyed);
22370
- remaining.set(keyed.value, remaining.get(keyed.value) - 1);
22371
- }
22372
- });
22373
- }
22374
-
22375
- // Fall back to value matching for the occurrences not resolved by key. Iterate
22376
- // the leftover per-value counts so a value that appears twice but was only
22377
- // resolved once by key still matches its remaining occurrence(s).
22378
- remaining.forEach((count, val) => {
22379
- for (let occurrence = 0; occurrence < count; occurrence += 1) {
22380
- const option = items.find((item) => isSelectableByValue(item) && item.value === val && !resolved.includes(item));
22381
- if (option) {
22382
- resolved.push(option);
22383
- }
22384
- }
22385
- });
22386
-
22387
- // Always return in DOM order so display is consistent regardless of the order
22388
- // keys/values were selected. Every resolved option came from `items`, so an
22389
- // O(1) index lookup mirrors `_sortSelectedByDomOrder` and avoids the O(n)
22390
- // `items.indexOf` per comparison for large combobox option sets.
22391
- const indexMap = new Map(items.map((item, index) => [
22392
- item,
22393
- index
22394
- ]));
22395
- resolved.sort((optionA, optionB) => indexMap.get(optionA) - indexMap.get(optionB));
22396
-
22397
- return resolved;
22398
- }
22399
- /* eslint-enable no-underscore-dangle */
22400
-
22401
22282
  /**
22402
22283
  * Helper method to dispatch custom events.
22403
22284
  * @param {HTMLElement} element - Element to dispatch event from.
@@ -22423,14 +22304,6 @@ function dispatchMenuEvent(element, eventName, detail = null) {
22423
22304
  // See LICENSE in the project root for license information.
22424
22305
 
22425
22306
 
22426
- /**
22427
- * Monotonically increasing counter used to give each menu instance a unique
22428
- * `_menuInstanceId` prefix. Auto-generating the id (rather than using a random
22429
- * string) keeps option keys deterministic and collision-free across menus.
22430
- * @private
22431
- */
22432
- let menuInstanceIdCounter = 0;
22433
-
22434
22307
 
22435
22308
  /**
22436
22309
  * The `auro-menu` element provides users a way to select from a list of options.
@@ -22502,8 +22375,9 @@ class AuroMenu extends AuroElement {
22502
22375
 
22503
22376
  // Instance properties (non-reactive)
22504
22377
 
22505
- menuInstanceIdCounter += 1;
22506
-
22378
+ /**
22379
+ * @private
22380
+ */
22507
22381
  Object.assign(this, {
22508
22382
  // Root-level menu (true) or a nested submenu (false)
22509
22383
  rootMenu: true,
@@ -22513,21 +22387,6 @@ class AuroMenu extends AuroElement {
22513
22387
  nestingSpacer: '<span class="nestingSpacer"></span>',
22514
22388
  // Loading indicator for slot elements
22515
22389
  loadingSlots: null,
22516
- // Unique id for this menu instance; prefixes every auto-generated option
22517
- // key so keys never collide across menus in the same document.
22518
- _menuInstanceId: `menu-${menuInstanceIdCounter}`,
22519
- // Monotonically increasing counter for option key generation. Never
22520
- // resets, so a key is never reused within this instance's lifetime.
22521
- _optionKeyCounter: 0,
22522
- // Key(s) of the option(s) the user has actively selected. A single string
22523
- // in single-select, an array in multi-select, undefined when nothing is
22524
- // user-selected. Used to disambiguate options that share a `value`.
22525
- _selectedKey: undefined,
22526
- // True only for the one updated() cycle following a user selection, so
22527
- // reconciliation trusts `_selectedKey`. A `value` change from a consumer's
22528
- // direct property assignment leaves this false, dropping the stale key so
22529
- // reconciliation falls back to first-by-value (see updated()).
22530
- _valueChangeFromSelection: false,
22531
22390
  });
22532
22391
  }
22533
22392
 
@@ -22747,13 +22606,6 @@ class AuroMenu extends AuroElement {
22747
22606
  return;
22748
22607
  }
22749
22608
 
22750
- // A programmatic value set carries no positional intent, so drop any
22751
- // `_selectedKey` left over from a prior user click. This makes reconciliation
22752
- // in updated() fall back to first-by-value (single) / value-in-DOM-order
22753
- // (multi), matching the documented contract for programmatic selection even
22754
- // when a stale key would still resolve to a duplicate-value option.
22755
- this._selectedKey = undefined;
22756
-
22757
22609
  // `value` is a String property; stringify arrays so attribute reflection and `formattedValue` parsing stay correct.
22758
22610
  this.value = Array.isArray(value) ? JSON.stringify(value) : value;
22759
22611
  }
@@ -22801,17 +22653,6 @@ class AuroMenu extends AuroElement {
22801
22653
  updated(changedProperties) {
22802
22654
  super.updated(changedProperties);
22803
22655
 
22804
- // Consume the selection-driven flag for THIS cycle up front. Clearing it
22805
- // unconditionally — not only inside the `value` branch below — prevents it
22806
- // from lingering `true` when a selection produces a serialized `value`
22807
- // byte-identical to the current one, in which case Lit schedules no
22808
- // `value`-change cycle to consume it. A lingering flag would misclassify a
22809
- // later consumer's programmatic `value` set as selection-driven and keep a
22810
- // stale `_selectedKey`. The reconcile path below re-sets the instance flag
22811
- // after this point, so its intentional cross-cycle hand-off still works.
22812
- const valueChangeFromSelection = this._valueChangeFromSelection;
22813
- this._valueChangeFromSelection = false;
22814
-
22815
22656
  // Single source of truth for 'auroMenu-selectedOption'. Selection handlers
22816
22657
  // mutate optionSelected and let Lit's update cycle dispatch here; the prior
22817
22658
  // .value comparison missed multi-select array changes and combined with the
@@ -22835,17 +22676,6 @@ class AuroMenu extends AuroElement {
22835
22676
  this.initItems();
22836
22677
  }
22837
22678
 
22838
- // Distinguish a selection-driven `value` change (a user click, which set
22839
- // the flag in handleSelectState / _sortSelectedByDomOrder) from a
22840
- // programmatic assignment by a consumer. A programmatic set carries no
22841
- // positional intent, so drop any leftover `_selectedKey` and let
22842
- // reconciliation fall back to first-by-value (single) / value-in-DOM-order
22843
- // (multi) — the same contract selectByValue() guarantees, even when a
22844
- // stale key would otherwise still resolve to a duplicate-value option.
22845
- if (!valueChangeFromSelection) {
22846
- this._selectedKey = undefined;
22847
- }
22848
-
22849
22679
  // Set when reconciliation reassigns `value` below. That reassignment schedules a
22850
22680
  // second updated() cycle, so the `event`-attribute dispatch is deferred to that
22851
22681
  // cycle to avoid firing option custom events twice on the same selection.
@@ -22863,55 +22693,19 @@ class AuroMenu extends AuroElement {
22863
22693
  // Defensive default: `formattedValue` can be undefined for unexpected value types,
22864
22694
  // and calling `.includes` on undefined would throw during reconciliation.
22865
22695
  const valueArray = this.formattedValue || [];
22866
- // Resolve by key first (the user's exact picks), then fall back to
22867
- // value matching for any values not resolved by key — so pre-selection
22868
- // and programmatic value sets keep working. Result is DOM-ordered.
22869
- const matchingOptions = resolveSelectedOptions(this.items, valueArray, this._selectedKey);
22696
+ const matchingOptions = this.items ? this.items.filter((item) => isSelectableByValue(item) && valueArray.includes(item.value)) : [];
22870
22697
  newSelected = matchingOptions.length > 0 ? matchingOptions : undefined;
22871
22698
 
22872
- // Reconcile `value` with the selectable set. An occurrence is dropped
22873
- // only when it is loaded but no selectable option can satisfy it —
22874
- // every loaded item sharing that value is non-selectable, or the value
22875
- // recurs more often than it has selectable options (a duplicate value
22876
- // whose extra siblings are disabled/static). This is count-based, not
22877
- // presence-based, so an enabled option is kept even when a disabled
22878
- // sibling shares its value — mirroring how `resolveSelectedOptions`
22879
- // resolves the same set. Entries with no matching item yet are
22880
- // preserved so async preselection still works, and the toggle handlers
22881
- // rebuild `value` from `formattedValue`, so a rejected entry cannot
22882
- // resurface on the next select/deselect.
22883
- const selectableByValue = new Map();
22884
- const loadedValues = new Set();
22885
- if (this.items) {
22886
- this.items.forEach((item) => {
22887
- loadedValues.add(item.value);
22888
- if (isSelectableByValue(item)) {
22889
- selectableByValue.set(item.value, (selectableByValue.get(item.value) || 0) + 1);
22890
- }
22891
- });
22892
- }
22893
-
22894
- const reconciled = valueArray.filter((val) => {
22895
- // Not loaded yet (async preselection) — keep for a later cycle.
22896
- if (!loadedValues.has(val)) {
22897
- return true;
22898
- }
22899
- // Consume one selectable option per occurrence; drop once exhausted.
22900
- const remaining = selectableByValue.get(val) || 0;
22901
- if (remaining > 0) {
22902
- selectableByValue.set(val, remaining - 1);
22903
- return true;
22904
- }
22905
- return false;
22906
- });
22907
-
22908
- if (reconciled.length !== valueArray.length) {
22909
- // This is an internal correction, not a consumer's programmatic set,
22910
- // so preserve the selection-driven flag through the re-entrant
22911
- // updated() cycle it schedules. Otherwise that cycle would treat the
22912
- // reassignment as programmatic and drop `_selectedKey` mid-cascade,
22913
- // flipping resolution and looping.
22914
- this._valueChangeFromSelection = true;
22699
+ // Reconcile `value` with the selectable set. Drop only entries whose option is
22700
+ // loaded but non-selectable (disabled/static) — leaving them would desync `value`
22701
+ // from `optionSelected`, and the toggle handlers rebuild `value` from `formattedValue`,
22702
+ // so the rejected entry would resurface on the next select/deselect. Entries with no
22703
+ // matching item yet are preserved so async preselection still works once options render.
22704
+ const rejectedValues = this.items
22705
+ ? this.items.filter((item) => !isSelectableByValue(item) && valueArray.includes(item.value)).map((item) => item.value)
22706
+ : [];
22707
+ if (rejectedValues.length > 0) {
22708
+ const reconciled = valueArray.filter((val) => !rejectedValues.includes(val));
22915
22709
  this.value = serializeMultiSelectValue(reconciled);
22916
22710
  valueReconciled = true;
22917
22711
  }
@@ -22923,11 +22717,7 @@ class AuroMenu extends AuroElement {
22923
22717
  // `hidden` is intentionally NOT excluded: the combobox toggles
22924
22718
  // `hidden` as its type-ahead filter, so a filtered-out option is
22925
22719
  // still a valid programmatic selection.
22926
- // Prefer the option the user actually selected (tracked by
22927
- // `_selectedKey`) so a click on the second of two options sharing a
22928
- // `value` resolves back to that exact element instead of the first
22929
- // value match. Falls back to first-by-value for programmatic sets.
22930
- const matchingOption = resolveSelectedOption(this.items, this.value, this._selectedKey);
22720
+ const matchingOption = this.items ? this.items.find((item) => isSelectableByValue(item) && item.value === this.value) : undefined;
22931
22721
 
22932
22722
  if (matchingOption) {
22933
22723
  newSelected = matchingOption;
@@ -23155,14 +22945,6 @@ class AuroMenu extends AuroElement {
23155
22945
  }
23156
22946
  });
23157
22947
 
23158
- // Assign private keys once items are populated. Only the root menu assigns
23159
- // keys: its `items` is a deep query that already includes nested submenu
23160
- // options, so a single pass keys the entire tree. Nested menus skip this
23161
- // and inherit keys from the root.
23162
- if (this.rootMenu) {
23163
- this._assignOptionKeys();
23164
- }
23165
-
23166
22948
  if (this.noCheckmark) {
23167
22949
  this.updateItemsState(new Map([
23168
22950
  [
@@ -23179,31 +22961,6 @@ class AuroMenu extends AuroElement {
23179
22961
  }));
23180
22962
  }
23181
22963
 
23182
- /**
23183
- * Assigns a private, auto-generated unique key (`_optionKey`) to each menu
23184
- * option that does not already have one. Keys are internal state on the
23185
- * element instance — never reflected as an attribute or exposed publicly —
23186
- * and let selection tracking distinguish options that share the same `value`.
23187
- *
23188
- * The `_optionKey === undefined` guard makes this idempotent: options keep the
23189
- * key they were first assigned across re-renders and slot changes, and if a
23190
- * nested menu's lifecycle runs a pass before the root, options simply wait for
23191
- * the root to key them (or keep whatever key they already hold).
23192
- * @private
23193
- */
23194
- _assignOptionKeys() {
23195
- if (!this.items) {
23196
- return;
23197
- }
23198
-
23199
- this.items.forEach((option) => {
23200
- if (option._optionKey === undefined) {
23201
- this._optionKeyCounter += 1;
23202
- option._optionKey = `${this._menuInstanceId}-${this._optionKeyCounter}`;
23203
- }
23204
- });
23205
- }
23206
-
23207
22964
  // Logic Methods
23208
22965
 
23209
22966
  /**
@@ -23213,28 +22970,24 @@ class AuroMenu extends AuroElement {
23213
22970
  */
23214
22971
  handleSelectState(option) {
23215
22972
  if (this.multiSelect) {
22973
+ const currentValue = this.formattedValue || [];
23216
22974
  const currentSelected = this.optionSelected || [];
23217
22975
 
22976
+ if (!currentValue.includes(option.value)) {
22977
+ this.value = serializeMultiSelectValue([
22978
+ ...currentValue,
22979
+ option.value
22980
+ ]);
22981
+ }
23218
22982
  if (!currentSelected.includes(option)) {
23219
22983
  this.optionSelected = [
23220
22984
  ...currentSelected,
23221
22985
  option
23222
22986
  ];
23223
22987
  }
23224
-
23225
- // Re-sort by DOM order and rebuild `_selectedKey`/`value` from the
23226
- // selected set so display order stays consistent with the menu, not with
23227
- // click order.
23228
- this._sortSelectedByDomOrder();
23229
22988
  } else {
23230
22989
  this.value = option.value;
23231
22990
  this.optionSelected = option;
23232
- // Track the specific option the user selected so the value→option
23233
- // reconciliation in updated() resolves back to this exact element even
23234
- // when another option shares the same `value`.
23235
- this._selectedKey = option._optionKey;
23236
- // Mark this `value` change as selection-driven so updated() trusts the key.
23237
- this._valueChangeFromSelection = true;
23238
22991
  }
23239
22992
 
23240
22993
  this._index = this.items.indexOf(option);
@@ -23247,22 +23000,18 @@ class AuroMenu extends AuroElement {
23247
23000
  */
23248
23001
  handleDeselectState(option) {
23249
23002
  if (this.multiSelect) {
23250
- // Remove this exact element from the selection (identity, not value — two
23251
- // options can share a `value`), then rebuild `value`/`_selectedKey` from
23252
- // the remaining set in DOM order. An empty result collapses to undefined.
23253
- this.optionSelected = this.optionSelected.filter((selected) => selected !== option);
23003
+ // Remove this option from array; an empty result collapses `value` to undefined.
23004
+ const newFormattedValue = (this.formattedValue || []).filter((val) => val !== option.value);
23005
+ this.value = serializeMultiSelectValue(newFormattedValue);
23006
+
23007
+ this.optionSelected = this.optionSelected.filter((val) => val !== option);
23254
23008
  if (this.optionSelected.length === 0) {
23255
23009
  this.optionSelected = undefined;
23256
- this._selectedKey = undefined;
23257
- this.value = undefined;
23258
- } else {
23259
- this._sortSelectedByDomOrder();
23260
23010
  }
23261
23011
  } else {
23262
23012
  // For single-select: Back to undefined when deselected
23263
23013
  this.value = undefined;
23264
23014
  this.optionSelected = undefined;
23265
- this._selectedKey = undefined;
23266
23015
  }
23267
23016
 
23268
23017
  // Update the index tracking
@@ -23286,38 +23035,9 @@ class AuroMenu extends AuroElement {
23286
23035
  clearSelection() {
23287
23036
  this.optionSelected = undefined;
23288
23037
  this.value = undefined;
23289
- this._selectedKey = undefined;
23290
23038
  this._index = -1;
23291
23039
  }
23292
23040
 
23293
- /**
23294
- * Re-sorts the multi-select selection into DOM order and rebuilds the derived
23295
- * `_selectedKey` and `value` from `optionSelected`. Selection is always stored
23296
- * and serialized in the order options appear in the menu, never in click
23297
- * order — so selecting C then A yields `[A, C]`.
23298
- * @private
23299
- */
23300
- _sortSelectedByDomOrder() {
23301
- if (!this.multiSelect || !Array.isArray(this.optionSelected) || !this.items) {
23302
- return;
23303
- }
23304
-
23305
- const indexMap = new Map(this.items.map((item, index) => [
23306
- item,
23307
- index
23308
- ]));
23309
-
23310
- // Sort any element no longer in `items` (a stale selection left over from a
23311
- // dynamic rebuild that the consumer has not cleared) to the END rather than
23312
- // the front, so it never displaces a live option to the head of the
23313
- // serialized order. Value reconciliation drops it on the next updated() cycle.
23314
- this.optionSelected.sort((optionA, optionB) => (indexMap.get(optionA) ?? this.items.length) - (indexMap.get(optionB) ?? this.items.length));
23315
- this._selectedKey = this.optionSelected.map((option) => option._optionKey);
23316
- this.value = serializeMultiSelectValue(this.optionSelected.map((option) => option.value));
23317
- // Mark this `value` change as selection-driven so updated() trusts the keys.
23318
- this._valueChangeFromSelection = true;
23319
- }
23320
-
23321
23041
  /**
23322
23042
  * Resets the menu to its initial state.
23323
23043
  * This is the only way to return value to undefined.
@@ -23327,7 +23047,6 @@ class AuroMenu extends AuroElement {
23327
23047
  // Reset to undefined - initial state
23328
23048
  this.value = undefined;
23329
23049
  this.optionSelected = undefined;
23330
- this._selectedKey = undefined;
23331
23050
  this._index = -1;
23332
23051
 
23333
23052
  // Clear active option state so a follow-up open/navigation starts fresh
@@ -23389,19 +23108,6 @@ class AuroMenu extends AuroElement {
23389
23108
  this.initItems();
23390
23109
  }
23391
23110
 
23392
- // Recover `_index` from the highlighted option when it has been reset to -1.
23393
- // In multi-select, deselecting the last remaining option collapses the value
23394
- // to undefined, and the updated() reconciliation resets `_index = -1` even
23395
- // though `optionActive` still points at the highlighted option. Without this,
23396
- // reading `items[-1]` returns undefined and the re-select no-ops until the
23397
- // highlight is moved away and back. Mirrors auro-combobox's reconcileMenuIndex.
23398
- if (this._index < 0 && this.optionActive && this.items) {
23399
- const activeIndex = this.items.indexOf(this.optionActive);
23400
- if (activeIndex >= 0) {
23401
- this._index = activeIndex;
23402
- }
23403
- }
23404
-
23405
23111
  // Get currently selected menu option based on index
23406
23112
  const option = this.items ? this.items[this._index] : undefined;
23407
23113