@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
@@ -4977,7 +4977,7 @@ let AuroHelpText$2 = class AuroHelpText extends i$3 {
4977
4977
  }
4978
4978
  };
4979
4979
 
4980
- var formkitVersion$2 = '202608041729';
4980
+ var formkitVersion$2 = '202608041712';
4981
4981
 
4982
4982
  let AuroElement$2 = class AuroElement extends i$3 {
4983
4983
  static get properties() {
@@ -5679,6 +5679,15 @@ class AuroDropdown extends AuroElement$2 {
5679
5679
 
5680
5680
  connectedCallback() {
5681
5681
  super.connectedCallback();
5682
+ // Re-register trigger event listeners removed by floater.disconnect() in
5683
+ // disconnectedCallback(). Fires when a parent element (e.g. auro-drawer)
5684
+ // moves this element to a new DOM location. firstUpdated() won't re-run,
5685
+ // so without this the trigger click/keydown handlers are permanently gone.
5686
+ // Guard on floater.element so this is a no-op on the initial connect
5687
+ // (before firstUpdated() has called configure()).
5688
+ if (this.floater?.element) {
5689
+ this.floater.configure(this, 'auroDropdown', !this.disableKeyboardHandling);
5690
+ }
5682
5691
  }
5683
5692
 
5684
5693
  disconnectedCallback() {
@@ -18666,7 +18675,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$3 {
18666
18675
  }
18667
18676
  };
18668
18677
 
18669
- var formkitVersion$1 = '202608041729';
18678
+ var formkitVersion$1 = '202608041712';
18670
18679
 
18671
18680
  // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
18672
18681
  // See LICENSE in the project root for license information.
@@ -19822,7 +19831,7 @@ class AuroBibtemplate extends i$3 {
19822
19831
  }
19823
19832
  }
19824
19833
 
19825
- var formkitVersion = '202608041729';
19834
+ var formkitVersion = '202608041712';
19826
19835
 
19827
19836
  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}`;
19828
19837
 
@@ -21628,17 +21637,7 @@ class AuroCombobox extends AuroElement {
21628
21637
  return;
21629
21638
  }
21630
21639
 
21631
- // Skip this write during a display-value sync: that path sets the input to
21632
- // the selected option's LABEL, which is not its machine value. When an
21633
- // option's label differs from its value (and especially when several
21634
- // options share a value but render distinct labels — AB#1602086), writing
21635
- // the label back into this.value clobbers the machine value the selection
21636
- // listener just set (this.value = optionSelected.value), collapsing the
21637
- // selection. _syncingBibValue still tracks (that mirrors user-typed text
21638
- // from the fullscreen bib, where value should follow the input).
21639
- if (!this._syncingDisplayValue) {
21640
- this.value = this.input.value;
21641
- }
21640
+ this.value = this.input.value;
21642
21641
 
21643
21642
  // Ignore re-entrant input events caused by programmatic value sets.
21644
21643
  if (this._syncingBibValue || this._syncingDisplayValue) {
@@ -21902,50 +21901,33 @@ class AuroCombobox extends AuroElement {
21902
21901
  }
21903
21902
 
21904
21903
  if (this.input.value !== this.value) {
21905
- // A fresh user selection leaves the input showing the option's LABEL
21906
- // while this.value holds its machine value, so input.value !== this.value
21907
- // is expected whenever label ≠ value. In that case the menu's current
21908
- // selection is authoritative — and when several options share a value it
21909
- // is the ONLY thing that records WHICH same-value option the user picked
21910
- // (the menu tracks it by element identity via `_selectedKey`). Clearing
21911
- // it here drops that key; the ensuing value-only re-resolution then
21912
- // collapses the selection onto the first same-value option (AB#1602086).
21913
- // So only treat the divergence as a stale menu when the selected option
21914
- // does NOT match the new value.
21915
- const menuSelectionMatchesValue =
21916
- this.menu.optionSelected &&
21917
- !Array.isArray(this.menu.optionSelected) &&
21918
- this.menu.optionSelected.value === this.value;
21919
-
21920
- if (!menuSelectionMatchesValue) {
21921
- // Clear menu.value AND menu.optionSelected together. Clearing only
21922
- // menu.value leaves the previously-selected option element pinned
21923
- // as menu.optionSelected; a later auroMenu-selectedOption event
21924
- // would then write its stale .value back into combobox.value
21925
- // (e.g. Tab-after-Backspace re-selecting the prior option).
21926
- if (this.menu.value || this.menu.optionSelected) {
21927
- this.menu.clearSelection();
21928
- }
21904
+ // Clear menu.value AND menu.optionSelected together. Clearing only
21905
+ // menu.value leaves the previously-selected option element pinned
21906
+ // as menu.optionSelected; a later auroMenu-selectedOption event
21907
+ // would then write its stale .value back into combobox.value
21908
+ // (e.g. Tab-after-Backspace re-selecting the prior option).
21909
+ if (this.menu.value || this.menu.optionSelected) {
21910
+ this.menu.clearSelection();
21911
+ }
21929
21912
 
21930
- if (!this.persistInput) {
21931
- this.syncInputValuesAcrossTriggerAndBib(this.value || '');
21932
- }
21913
+ if (!this.persistInput) {
21914
+ this.syncInputValuesAcrossTriggerAndBib(this.value || '');
21915
+ }
21933
21916
 
21934
- // Programmatic value with no matching option: updateFilter will close
21935
- // the bib silently (see line 648 — no noMatchOption + 0 results
21936
- // hides). Announce so screen-reader users hear the request was
21937
- // dropped. Gated on `input.value !== this.value` so this never fires
21938
- // for user typing — that path always reconciles input.value to
21939
- // this.value before updated() runs.
21940
- if (
21941
- this.value &&
21942
- this.menu &&
21943
- this.menu.options &&
21944
- this.menu.options.length > 0 &&
21945
- !this.menu.options.some((opt) => opt.value === this.value)
21946
- ) {
21947
- announceToScreenReader(this._getAnnouncementRoot(), `No matching option for ${this.value}`);
21948
- }
21917
+ // Programmatic value with no matching option: updateFilter will close
21918
+ // the bib silently (see line 648 — no noMatchOption + 0 results
21919
+ // hides). Announce so screen-reader users hear the request was
21920
+ // dropped. Gated on `input.value !== this.value` so this never fires
21921
+ // for user typing — that path always reconciles input.value to
21922
+ // this.value before updated() runs.
21923
+ if (
21924
+ this.value &&
21925
+ this.menu &&
21926
+ this.menu.options &&
21927
+ this.menu.options.length > 0 &&
21928
+ !this.menu.options.some((opt) => opt.value === this.value)
21929
+ ) {
21930
+ announceToScreenReader(this._getAnnouncementRoot(), `No matching option for ${this.value}`);
21949
21931
  }
21950
21932
  }
21951
21933
 
@@ -22282,107 +22264,6 @@ function isSelectableByValue(option) {
22282
22264
  !option.hasAttribute('static');
22283
22265
  }
22284
22266
 
22285
- /* eslint-disable no-underscore-dangle */
22286
- /**
22287
- * Resolves the single selected option for a given `value`, preferring the
22288
- * option tracked by `selectedKey` (a user-initiated selection) over a
22289
- * first-by-value match. When multiple options share the same `value`, matching
22290
- * by `value` alone cannot distinguish which one the user picked; the key
22291
- * disambiguates it.
22292
- *
22293
- * The key is trusted only when it still resolves to an option whose `value`
22294
- * matches the requested `value`. If the key is stale (option removed) or the
22295
- * value was changed programmatically, resolution falls back to value matching —
22296
- * preserving backward-compatible behavior for preselection and `selectByValue`.
22297
- * @private
22298
- * @param {Array<HTMLElement>} items - The menu's flat option list.
22299
- * @param {string} value - The value to resolve.
22300
- * @param {string|undefined} selectedKey - The `_optionKey` of the user-selected option, if any.
22301
- * @returns {HTMLElement|undefined} The resolved option, or undefined when none match.
22302
- */
22303
- function resolveSelectedOption(items, value, selectedKey) {
22304
- if (!items) {
22305
- return undefined;
22306
- }
22307
-
22308
- if (selectedKey !== undefined) {
22309
- const keyed = items.find((item) => item._optionKey === selectedKey);
22310
- if (keyed && isSelectableByValue(keyed) && keyed.value === value) {
22311
- return keyed;
22312
- }
22313
- // Key exists but the option is gone or its value no longer matches — fall
22314
- // through to value-based matching.
22315
- }
22316
-
22317
- return items.find((item) => isSelectableByValue(item) && item.value === value);
22318
- }
22319
-
22320
- /**
22321
- * Resolves the selected options for a multi-select `value` array, preferring
22322
- * options tracked by `selectedKeys` (user-initiated selections) and falling
22323
- * back to value matching for any values not resolved by key. The result is
22324
- * always sorted into DOM order regardless of selection sequence.
22325
- * @private
22326
- * @param {Array<HTMLElement>} items - The menu's flat option list.
22327
- * @param {Array<string>} valueArray - The selected values.
22328
- * @param {Array<string>|undefined} selectedKeys - The `_optionKey`s of the user-selected options, if any.
22329
- * @returns {Array<HTMLElement>} The resolved options in DOM order.
22330
- */
22331
- function resolveSelectedOptions(items, valueArray, selectedKeys) {
22332
- if (!items) {
22333
- return [];
22334
- }
22335
-
22336
- const resolved = [];
22337
-
22338
- // Track how many of each value are still available to resolve. A value that
22339
- // appears N times in `valueArray` may be satisfied at most N times total across
22340
- // the key pass and the value fallback below — matching by count, not presence,
22341
- // on BOTH passes. This stops a duplicate value from being over-resolved: e.g.
22342
- // two keyed options that both carry `SEA` cannot both match a single requested
22343
- // `SEA` (which happens when `value` is set directly without clearing
22344
- // `_selectedKey`, so more keys survive than the value set now asks for).
22345
- const remaining = new Map();
22346
- valueArray.forEach((val) => remaining.set(val, (remaining.get(val) || 0) + 1));
22347
-
22348
- // Resolve by key first: trust a key only when its option is still selectable
22349
- // and there is still an unmatched occurrence of its value in the request set.
22350
- if (Array.isArray(selectedKeys)) {
22351
- selectedKeys.forEach((key) => {
22352
- const keyed = items.find((item) => item._optionKey === key);
22353
- if (keyed && isSelectableByValue(keyed) && (remaining.get(keyed.value) || 0) > 0 && !resolved.includes(keyed)) {
22354
- resolved.push(keyed);
22355
- remaining.set(keyed.value, remaining.get(keyed.value) - 1);
22356
- }
22357
- });
22358
- }
22359
-
22360
- // Fall back to value matching for the occurrences not resolved by key. Iterate
22361
- // the leftover per-value counts so a value that appears twice but was only
22362
- // resolved once by key still matches its remaining occurrence(s).
22363
- remaining.forEach((count, val) => {
22364
- for (let occurrence = 0; occurrence < count; occurrence += 1) {
22365
- const option = items.find((item) => isSelectableByValue(item) && item.value === val && !resolved.includes(item));
22366
- if (option) {
22367
- resolved.push(option);
22368
- }
22369
- }
22370
- });
22371
-
22372
- // Always return in DOM order so display is consistent regardless of the order
22373
- // keys/values were selected. Every resolved option came from `items`, so an
22374
- // O(1) index lookup mirrors `_sortSelectedByDomOrder` and avoids the O(n)
22375
- // `items.indexOf` per comparison for large combobox option sets.
22376
- const indexMap = new Map(items.map((item, index) => [
22377
- item,
22378
- index
22379
- ]));
22380
- resolved.sort((optionA, optionB) => indexMap.get(optionA) - indexMap.get(optionB));
22381
-
22382
- return resolved;
22383
- }
22384
- /* eslint-enable no-underscore-dangle */
22385
-
22386
22267
  /**
22387
22268
  * Helper method to dispatch custom events.
22388
22269
  * @param {HTMLElement} element - Element to dispatch event from.
@@ -22408,14 +22289,6 @@ function dispatchMenuEvent(element, eventName, detail = null) {
22408
22289
  // See LICENSE in the project root for license information.
22409
22290
 
22410
22291
 
22411
- /**
22412
- * Monotonically increasing counter used to give each menu instance a unique
22413
- * `_menuInstanceId` prefix. Auto-generating the id (rather than using a random
22414
- * string) keeps option keys deterministic and collision-free across menus.
22415
- * @private
22416
- */
22417
- let menuInstanceIdCounter = 0;
22418
-
22419
22292
 
22420
22293
  /**
22421
22294
  * The `auro-menu` element provides users a way to select from a list of options.
@@ -22487,8 +22360,9 @@ class AuroMenu extends AuroElement {
22487
22360
 
22488
22361
  // Instance properties (non-reactive)
22489
22362
 
22490
- menuInstanceIdCounter += 1;
22491
-
22363
+ /**
22364
+ * @private
22365
+ */
22492
22366
  Object.assign(this, {
22493
22367
  // Root-level menu (true) or a nested submenu (false)
22494
22368
  rootMenu: true,
@@ -22498,21 +22372,6 @@ class AuroMenu extends AuroElement {
22498
22372
  nestingSpacer: '<span class="nestingSpacer"></span>',
22499
22373
  // Loading indicator for slot elements
22500
22374
  loadingSlots: null,
22501
- // Unique id for this menu instance; prefixes every auto-generated option
22502
- // key so keys never collide across menus in the same document.
22503
- _menuInstanceId: `menu-${menuInstanceIdCounter}`,
22504
- // Monotonically increasing counter for option key generation. Never
22505
- // resets, so a key is never reused within this instance's lifetime.
22506
- _optionKeyCounter: 0,
22507
- // Key(s) of the option(s) the user has actively selected. A single string
22508
- // in single-select, an array in multi-select, undefined when nothing is
22509
- // user-selected. Used to disambiguate options that share a `value`.
22510
- _selectedKey: undefined,
22511
- // True only for the one updated() cycle following a user selection, so
22512
- // reconciliation trusts `_selectedKey`. A `value` change from a consumer's
22513
- // direct property assignment leaves this false, dropping the stale key so
22514
- // reconciliation falls back to first-by-value (see updated()).
22515
- _valueChangeFromSelection: false,
22516
22375
  });
22517
22376
  }
22518
22377
 
@@ -22732,13 +22591,6 @@ class AuroMenu extends AuroElement {
22732
22591
  return;
22733
22592
  }
22734
22593
 
22735
- // A programmatic value set carries no positional intent, so drop any
22736
- // `_selectedKey` left over from a prior user click. This makes reconciliation
22737
- // in updated() fall back to first-by-value (single) / value-in-DOM-order
22738
- // (multi), matching the documented contract for programmatic selection even
22739
- // when a stale key would still resolve to a duplicate-value option.
22740
- this._selectedKey = undefined;
22741
-
22742
22594
  // `value` is a String property; stringify arrays so attribute reflection and `formattedValue` parsing stay correct.
22743
22595
  this.value = Array.isArray(value) ? JSON.stringify(value) : value;
22744
22596
  }
@@ -22786,17 +22638,6 @@ class AuroMenu extends AuroElement {
22786
22638
  updated(changedProperties) {
22787
22639
  super.updated(changedProperties);
22788
22640
 
22789
- // Consume the selection-driven flag for THIS cycle up front. Clearing it
22790
- // unconditionally — not only inside the `value` branch below — prevents it
22791
- // from lingering `true` when a selection produces a serialized `value`
22792
- // byte-identical to the current one, in which case Lit schedules no
22793
- // `value`-change cycle to consume it. A lingering flag would misclassify a
22794
- // later consumer's programmatic `value` set as selection-driven and keep a
22795
- // stale `_selectedKey`. The reconcile path below re-sets the instance flag
22796
- // after this point, so its intentional cross-cycle hand-off still works.
22797
- const valueChangeFromSelection = this._valueChangeFromSelection;
22798
- this._valueChangeFromSelection = false;
22799
-
22800
22641
  // Single source of truth for 'auroMenu-selectedOption'. Selection handlers
22801
22642
  // mutate optionSelected and let Lit's update cycle dispatch here; the prior
22802
22643
  // .value comparison missed multi-select array changes and combined with the
@@ -22820,17 +22661,6 @@ class AuroMenu extends AuroElement {
22820
22661
  this.initItems();
22821
22662
  }
22822
22663
 
22823
- // Distinguish a selection-driven `value` change (a user click, which set
22824
- // the flag in handleSelectState / _sortSelectedByDomOrder) from a
22825
- // programmatic assignment by a consumer. A programmatic set carries no
22826
- // positional intent, so drop any leftover `_selectedKey` and let
22827
- // reconciliation fall back to first-by-value (single) / value-in-DOM-order
22828
- // (multi) — the same contract selectByValue() guarantees, even when a
22829
- // stale key would otherwise still resolve to a duplicate-value option.
22830
- if (!valueChangeFromSelection) {
22831
- this._selectedKey = undefined;
22832
- }
22833
-
22834
22664
  // Set when reconciliation reassigns `value` below. That reassignment schedules a
22835
22665
  // second updated() cycle, so the `event`-attribute dispatch is deferred to that
22836
22666
  // cycle to avoid firing option custom events twice on the same selection.
@@ -22848,55 +22678,19 @@ class AuroMenu extends AuroElement {
22848
22678
  // Defensive default: `formattedValue` can be undefined for unexpected value types,
22849
22679
  // and calling `.includes` on undefined would throw during reconciliation.
22850
22680
  const valueArray = this.formattedValue || [];
22851
- // Resolve by key first (the user's exact picks), then fall back to
22852
- // value matching for any values not resolved by key — so pre-selection
22853
- // and programmatic value sets keep working. Result is DOM-ordered.
22854
- const matchingOptions = resolveSelectedOptions(this.items, valueArray, this._selectedKey);
22681
+ const matchingOptions = this.items ? this.items.filter((item) => isSelectableByValue(item) && valueArray.includes(item.value)) : [];
22855
22682
  newSelected = matchingOptions.length > 0 ? matchingOptions : undefined;
22856
22683
 
22857
- // Reconcile `value` with the selectable set. An occurrence is dropped
22858
- // only when it is loaded but no selectable option can satisfy it —
22859
- // every loaded item sharing that value is non-selectable, or the value
22860
- // recurs more often than it has selectable options (a duplicate value
22861
- // whose extra siblings are disabled/static). This is count-based, not
22862
- // presence-based, so an enabled option is kept even when a disabled
22863
- // sibling shares its value — mirroring how `resolveSelectedOptions`
22864
- // resolves the same set. Entries with no matching item yet are
22865
- // preserved so async preselection still works, and the toggle handlers
22866
- // rebuild `value` from `formattedValue`, so a rejected entry cannot
22867
- // resurface on the next select/deselect.
22868
- const selectableByValue = new Map();
22869
- const loadedValues = new Set();
22870
- if (this.items) {
22871
- this.items.forEach((item) => {
22872
- loadedValues.add(item.value);
22873
- if (isSelectableByValue(item)) {
22874
- selectableByValue.set(item.value, (selectableByValue.get(item.value) || 0) + 1);
22875
- }
22876
- });
22877
- }
22878
-
22879
- const reconciled = valueArray.filter((val) => {
22880
- // Not loaded yet (async preselection) — keep for a later cycle.
22881
- if (!loadedValues.has(val)) {
22882
- return true;
22883
- }
22884
- // Consume one selectable option per occurrence; drop once exhausted.
22885
- const remaining = selectableByValue.get(val) || 0;
22886
- if (remaining > 0) {
22887
- selectableByValue.set(val, remaining - 1);
22888
- return true;
22889
- }
22890
- return false;
22891
- });
22892
-
22893
- if (reconciled.length !== valueArray.length) {
22894
- // This is an internal correction, not a consumer's programmatic set,
22895
- // so preserve the selection-driven flag through the re-entrant
22896
- // updated() cycle it schedules. Otherwise that cycle would treat the
22897
- // reassignment as programmatic and drop `_selectedKey` mid-cascade,
22898
- // flipping resolution and looping.
22899
- this._valueChangeFromSelection = true;
22684
+ // Reconcile `value` with the selectable set. Drop only entries whose option is
22685
+ // loaded but non-selectable (disabled/static) — leaving them would desync `value`
22686
+ // from `optionSelected`, and the toggle handlers rebuild `value` from `formattedValue`,
22687
+ // so the rejected entry would resurface on the next select/deselect. Entries with no
22688
+ // matching item yet are preserved so async preselection still works once options render.
22689
+ const rejectedValues = this.items
22690
+ ? this.items.filter((item) => !isSelectableByValue(item) && valueArray.includes(item.value)).map((item) => item.value)
22691
+ : [];
22692
+ if (rejectedValues.length > 0) {
22693
+ const reconciled = valueArray.filter((val) => !rejectedValues.includes(val));
22900
22694
  this.value = serializeMultiSelectValue(reconciled);
22901
22695
  valueReconciled = true;
22902
22696
  }
@@ -22908,11 +22702,7 @@ class AuroMenu extends AuroElement {
22908
22702
  // `hidden` is intentionally NOT excluded: the combobox toggles
22909
22703
  // `hidden` as its type-ahead filter, so a filtered-out option is
22910
22704
  // still a valid programmatic selection.
22911
- // Prefer the option the user actually selected (tracked by
22912
- // `_selectedKey`) so a click on the second of two options sharing a
22913
- // `value` resolves back to that exact element instead of the first
22914
- // value match. Falls back to first-by-value for programmatic sets.
22915
- const matchingOption = resolveSelectedOption(this.items, this.value, this._selectedKey);
22705
+ const matchingOption = this.items ? this.items.find((item) => isSelectableByValue(item) && item.value === this.value) : undefined;
22916
22706
 
22917
22707
  if (matchingOption) {
22918
22708
  newSelected = matchingOption;
@@ -23140,14 +22930,6 @@ class AuroMenu extends AuroElement {
23140
22930
  }
23141
22931
  });
23142
22932
 
23143
- // Assign private keys once items are populated. Only the root menu assigns
23144
- // keys: its `items` is a deep query that already includes nested submenu
23145
- // options, so a single pass keys the entire tree. Nested menus skip this
23146
- // and inherit keys from the root.
23147
- if (this.rootMenu) {
23148
- this._assignOptionKeys();
23149
- }
23150
-
23151
22933
  if (this.noCheckmark) {
23152
22934
  this.updateItemsState(new Map([
23153
22935
  [
@@ -23164,31 +22946,6 @@ class AuroMenu extends AuroElement {
23164
22946
  }));
23165
22947
  }
23166
22948
 
23167
- /**
23168
- * Assigns a private, auto-generated unique key (`_optionKey`) to each menu
23169
- * option that does not already have one. Keys are internal state on the
23170
- * element instance — never reflected as an attribute or exposed publicly —
23171
- * and let selection tracking distinguish options that share the same `value`.
23172
- *
23173
- * The `_optionKey === undefined` guard makes this idempotent: options keep the
23174
- * key they were first assigned across re-renders and slot changes, and if a
23175
- * nested menu's lifecycle runs a pass before the root, options simply wait for
23176
- * the root to key them (or keep whatever key they already hold).
23177
- * @private
23178
- */
23179
- _assignOptionKeys() {
23180
- if (!this.items) {
23181
- return;
23182
- }
23183
-
23184
- this.items.forEach((option) => {
23185
- if (option._optionKey === undefined) {
23186
- this._optionKeyCounter += 1;
23187
- option._optionKey = `${this._menuInstanceId}-${this._optionKeyCounter}`;
23188
- }
23189
- });
23190
- }
23191
-
23192
22949
  // Logic Methods
23193
22950
 
23194
22951
  /**
@@ -23198,28 +22955,24 @@ class AuroMenu extends AuroElement {
23198
22955
  */
23199
22956
  handleSelectState(option) {
23200
22957
  if (this.multiSelect) {
22958
+ const currentValue = this.formattedValue || [];
23201
22959
  const currentSelected = this.optionSelected || [];
23202
22960
 
22961
+ if (!currentValue.includes(option.value)) {
22962
+ this.value = serializeMultiSelectValue([
22963
+ ...currentValue,
22964
+ option.value
22965
+ ]);
22966
+ }
23203
22967
  if (!currentSelected.includes(option)) {
23204
22968
  this.optionSelected = [
23205
22969
  ...currentSelected,
23206
22970
  option
23207
22971
  ];
23208
22972
  }
23209
-
23210
- // Re-sort by DOM order and rebuild `_selectedKey`/`value` from the
23211
- // selected set so display order stays consistent with the menu, not with
23212
- // click order.
23213
- this._sortSelectedByDomOrder();
23214
22973
  } else {
23215
22974
  this.value = option.value;
23216
22975
  this.optionSelected = option;
23217
- // Track the specific option the user selected so the value→option
23218
- // reconciliation in updated() resolves back to this exact element even
23219
- // when another option shares the same `value`.
23220
- this._selectedKey = option._optionKey;
23221
- // Mark this `value` change as selection-driven so updated() trusts the key.
23222
- this._valueChangeFromSelection = true;
23223
22976
  }
23224
22977
 
23225
22978
  this._index = this.items.indexOf(option);
@@ -23232,22 +22985,18 @@ class AuroMenu extends AuroElement {
23232
22985
  */
23233
22986
  handleDeselectState(option) {
23234
22987
  if (this.multiSelect) {
23235
- // Remove this exact element from the selection (identity, not value — two
23236
- // options can share a `value`), then rebuild `value`/`_selectedKey` from
23237
- // the remaining set in DOM order. An empty result collapses to undefined.
23238
- this.optionSelected = this.optionSelected.filter((selected) => selected !== option);
22988
+ // Remove this option from array; an empty result collapses `value` to undefined.
22989
+ const newFormattedValue = (this.formattedValue || []).filter((val) => val !== option.value);
22990
+ this.value = serializeMultiSelectValue(newFormattedValue);
22991
+
22992
+ this.optionSelected = this.optionSelected.filter((val) => val !== option);
23239
22993
  if (this.optionSelected.length === 0) {
23240
22994
  this.optionSelected = undefined;
23241
- this._selectedKey = undefined;
23242
- this.value = undefined;
23243
- } else {
23244
- this._sortSelectedByDomOrder();
23245
22995
  }
23246
22996
  } else {
23247
22997
  // For single-select: Back to undefined when deselected
23248
22998
  this.value = undefined;
23249
22999
  this.optionSelected = undefined;
23250
- this._selectedKey = undefined;
23251
23000
  }
23252
23001
 
23253
23002
  // Update the index tracking
@@ -23271,38 +23020,9 @@ class AuroMenu extends AuroElement {
23271
23020
  clearSelection() {
23272
23021
  this.optionSelected = undefined;
23273
23022
  this.value = undefined;
23274
- this._selectedKey = undefined;
23275
23023
  this._index = -1;
23276
23024
  }
23277
23025
 
23278
- /**
23279
- * Re-sorts the multi-select selection into DOM order and rebuilds the derived
23280
- * `_selectedKey` and `value` from `optionSelected`. Selection is always stored
23281
- * and serialized in the order options appear in the menu, never in click
23282
- * order — so selecting C then A yields `[A, C]`.
23283
- * @private
23284
- */
23285
- _sortSelectedByDomOrder() {
23286
- if (!this.multiSelect || !Array.isArray(this.optionSelected) || !this.items) {
23287
- return;
23288
- }
23289
-
23290
- const indexMap = new Map(this.items.map((item, index) => [
23291
- item,
23292
- index
23293
- ]));
23294
-
23295
- // Sort any element no longer in `items` (a stale selection left over from a
23296
- // dynamic rebuild that the consumer has not cleared) to the END rather than
23297
- // the front, so it never displaces a live option to the head of the
23298
- // serialized order. Value reconciliation drops it on the next updated() cycle.
23299
- this.optionSelected.sort((optionA, optionB) => (indexMap.get(optionA) ?? this.items.length) - (indexMap.get(optionB) ?? this.items.length));
23300
- this._selectedKey = this.optionSelected.map((option) => option._optionKey);
23301
- this.value = serializeMultiSelectValue(this.optionSelected.map((option) => option.value));
23302
- // Mark this `value` change as selection-driven so updated() trusts the keys.
23303
- this._valueChangeFromSelection = true;
23304
- }
23305
-
23306
23026
  /**
23307
23027
  * Resets the menu to its initial state.
23308
23028
  * This is the only way to return value to undefined.
@@ -23312,7 +23032,6 @@ class AuroMenu extends AuroElement {
23312
23032
  // Reset to undefined - initial state
23313
23033
  this.value = undefined;
23314
23034
  this.optionSelected = undefined;
23315
- this._selectedKey = undefined;
23316
23035
  this._index = -1;
23317
23036
 
23318
23037
  // Clear active option state so a follow-up open/navigation starts fresh
@@ -23374,19 +23093,6 @@ class AuroMenu extends AuroElement {
23374
23093
  this.initItems();
23375
23094
  }
23376
23095
 
23377
- // Recover `_index` from the highlighted option when it has been reset to -1.
23378
- // In multi-select, deselecting the last remaining option collapses the value
23379
- // to undefined, and the updated() reconciliation resets `_index = -1` even
23380
- // though `optionActive` still points at the highlighted option. Without this,
23381
- // reading `items[-1]` returns undefined and the re-select no-ops until the
23382
- // highlight is moved away and back. Mirrors auro-combobox's reconcileMenuIndex.
23383
- if (this._index < 0 && this.optionActive && this.items) {
23384
- const activeIndex = this.items.indexOf(this.optionActive);
23385
- if (activeIndex >= 0) {
23386
- this._index = activeIndex;
23387
- }
23388
- }
23389
-
23390
23096
  // Get currently selected menu option based on index
23391
23097
  const option = this.items ? this.items[this._index] : undefined;
23392
23098