@aurodesignsystem-dev/auro-formkit 0.0.0-pr1394.0 → 0.0.0-pr1394.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (44) hide show
  1. package/components/checkbox/demo/api.min.js +1 -1
  2. package/components/checkbox/demo/index.min.js +1 -1
  3. package/components/checkbox/dist/index.js +1 -1
  4. package/components/checkbox/dist/registered.js +1 -1
  5. package/components/combobox/demo/api.min.js +166 -40
  6. package/components/combobox/demo/index.min.js +166 -40
  7. package/components/combobox/dist/index.js +18 -3
  8. package/components/combobox/dist/registered.js +18 -3
  9. package/components/counter/demo/api.min.js +17 -2
  10. package/components/counter/demo/index.min.js +17 -2
  11. package/components/counter/dist/index.js +17 -2
  12. package/components/counter/dist/registered.js +17 -2
  13. package/components/datepicker/demo/api.min.js +18 -3
  14. package/components/datepicker/demo/index.min.js +18 -3
  15. package/components/datepicker/dist/index.js +18 -3
  16. package/components/datepicker/dist/registered.js +18 -3
  17. package/components/dropdown/demo/api.min.js +16 -1
  18. package/components/dropdown/demo/index.min.js +16 -1
  19. package/components/dropdown/dist/auro-dropdownBib.d.ts +12 -0
  20. package/components/dropdown/dist/index.js +16 -1
  21. package/components/dropdown/dist/registered.js +16 -1
  22. package/components/form/demo/api.min.js +229 -53
  23. package/components/form/demo/index.min.js +229 -53
  24. package/components/input/demo/api.min.js +1 -1
  25. package/components/input/demo/index.min.js +1 -1
  26. package/components/input/dist/index.js +1 -1
  27. package/components/input/dist/registered.js +1 -1
  28. package/components/menu/demo/api.md +1 -1
  29. package/components/menu/demo/api.min.js +148 -37
  30. package/components/menu/demo/index.min.js +148 -37
  31. package/components/menu/dist/auro-menu.context.d.ts +15 -3
  32. package/components/menu/dist/auro-menu.d.ts +1 -1
  33. package/components/menu/dist/index.js +148 -37
  34. package/components/menu/dist/registered.js +148 -37
  35. package/components/radio/demo/api.min.js +1 -1
  36. package/components/radio/demo/index.min.js +1 -1
  37. package/components/radio/dist/index.js +1 -1
  38. package/components/radio/dist/registered.js +1 -1
  39. package/components/select/demo/api.min.js +173 -42
  40. package/components/select/demo/index.min.js +173 -42
  41. package/components/select/dist/index.js +25 -5
  42. package/components/select/dist/registered.js +25 -5
  43. package/custom-elements.json +1519 -1438
  44. package/package.json +12 -4
@@ -1687,7 +1687,7 @@ class AuroHelpText extends i$2 {
1687
1687
  }
1688
1688
  }
1689
1689
 
1690
- var formkitVersion = '202603232324';
1690
+ var formkitVersion = '202603242021';
1691
1691
 
1692
1692
  // Copyright (c) 2026 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
1693
1693
  // See LICENSE in the project root for license information.
@@ -1679,7 +1679,7 @@ class AuroHelpText extends i$2 {
1679
1679
  }
1680
1680
  }
1681
1681
 
1682
- var formkitVersion = '202603232324';
1682
+ var formkitVersion = '202603242021';
1683
1683
 
1684
1684
  // Copyright (c) 2026 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
1685
1685
  // See LICENSE in the project root for license information.
@@ -1632,7 +1632,7 @@ class AuroHelpText extends LitElement {
1632
1632
  }
1633
1633
  }
1634
1634
 
1635
- var formkitVersion = '202603232324';
1635
+ var formkitVersion = '202603242021';
1636
1636
 
1637
1637
  // Copyright (c) 2026 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
1638
1638
  // See LICENSE in the project root for license information.
@@ -1632,7 +1632,7 @@ class AuroHelpText extends LitElement {
1632
1632
  }
1633
1633
  }
1634
1634
 
1635
- var formkitVersion = '202603232324';
1635
+ var formkitVersion = '202603242021';
1636
1636
 
1637
1637
  // Copyright (c) 2026 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
1638
1638
  // See LICENSE in the project root for license information.
@@ -4404,6 +4404,7 @@ class AuroDropdownBib extends i$4 {
4404
4404
 
4405
4405
  this.shape = "rounded";
4406
4406
  this.matchWidth = false;
4407
+ this.hasActiveDescendant = false;
4407
4408
  }
4408
4409
 
4409
4410
  static get styles() {
@@ -4490,6 +4491,18 @@ class AuroDropdownBib extends i$4 {
4490
4491
  */
4491
4492
  dialogRole: {
4492
4493
  type: String
4494
+ },
4495
+
4496
+ /**
4497
+ * Set by auro-dropdown when a menu option is highlighted via
4498
+ * aria-activedescendant. The dialog keyboard bridge checks this
4499
+ * flag so that Enter selects the highlighted option instead of
4500
+ * activating the focused interactive element (e.g. the trigger
4501
+ * button, or the bibtemplate close button in fullscreen).
4502
+ * @private
4503
+ */
4504
+ hasActiveDescendant: {
4505
+ type: Boolean
4493
4506
  }
4494
4507
  };
4495
4508
  }
@@ -4767,6 +4780,8 @@ class AuroDropdownBib extends i$4 {
4767
4780
  * Closes the dialog.
4768
4781
  */
4769
4782
  close() {
4783
+ this.hasActiveDescendant = false;
4784
+
4770
4785
  const dialog = this.shadowRoot.querySelector('dialog');
4771
4786
 
4772
4787
  if (dialog && dialog.open) {
@@ -5044,7 +5059,7 @@ let AuroHelpText$2 = class AuroHelpText extends i$4 {
5044
5059
  }
5045
5060
  };
5046
5061
 
5047
- var formkitVersion$2 = '202603232324';
5062
+ var formkitVersion$2 = '202603242021';
5048
5063
 
5049
5064
  let AuroElement$2 = class AuroElement extends i$4 {
5050
5065
  static get properties() {
@@ -12808,7 +12823,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$4 {
12808
12823
  }
12809
12824
  };
12810
12825
 
12811
- var formkitVersion$1 = '202603232324';
12826
+ var formkitVersion$1 = '202603242021';
12812
12827
 
12813
12828
  // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
12814
12829
  // See LICENSE in the project root for license information.
@@ -13847,7 +13862,7 @@ class AuroBibtemplate extends i$4 {
13847
13862
  }
13848
13863
  }
13849
13864
 
13850
- var formkitVersion = '202603232324';
13865
+ var formkitVersion = '202603242021';
13851
13866
 
13852
13867
  var styleCss$3 = i$7`.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}`;
13853
13868
 
@@ -16035,10 +16050,20 @@ class AuroMenuOption extends AuroElement {
16035
16050
  subscribe: true
16036
16051
  });
16037
16052
 
16038
- // Establish the key property as early as possible
16053
+ // Establish the key property as early as possible.
16054
+ // When a framework (e.g. Svelte) inserts the element into the DOM before
16055
+ // setting its `value` property, both `getAttribute('value')` and
16056
+ // `getAttribute('key')` return null here. Setting `this.key = null`
16057
+ // would block the fallback in `updated()` that assigns key from the
16058
+ // value property (the guard checked `=== undefined`). Only assign key
16059
+ // if at least one source attribute is actually present so that the
16060
+ // `updated()` fallback can run when the value property arrives later.
16039
16061
  const valueAttr = this.getAttribute('value');
16040
16062
  const keyAttr = this.getAttribute('key');
16041
- this.key = keyAttr !== null ? keyAttr : valueAttr;
16063
+ const resolvedKey = keyAttr !== null ? keyAttr : valueAttr;
16064
+ if (resolvedKey !== null) {
16065
+ this.key = resolvedKey;
16066
+ }
16042
16067
  }
16043
16068
 
16044
16069
  firstUpdated() {
@@ -16088,8 +16113,14 @@ class AuroMenuOption extends AuroElement {
16088
16113
  this.updateTextHighlight();
16089
16114
  }
16090
16115
 
16091
- // Set the key to be the passed value if no key is provided
16092
- if (changedProperties.has('value') && this.key === undefined) {
16116
+ // Set the key to be the passed value if no key is provided.
16117
+ // Loose equality (== null) is intentional: it catches both null AND
16118
+ // undefined. When a framework (e.g. Svelte, React) inserts the element
16119
+ // before setting its value property, connectedCallback skips key
16120
+ // assignment because both attributes are null at that point. The Lit
16121
+ // property default for `key` is undefined (not null), so strict
16122
+ // === null would miss the case and the fallback would never run.
16123
+ if (changedProperties.has('value') && this.key == null) { // eslint-disable-line eqeqeq, no-eq-null
16093
16124
  this.key = this.value;
16094
16125
  }
16095
16126
  }
@@ -16458,6 +16489,9 @@ class MenuService {
16458
16489
  this._subscribers = [];
16459
16490
  this.internalUpdateInProgress = false;
16460
16491
  this.selectedOptions = [];
16492
+ this._pendingValue = null;
16493
+ this._pendingRetryScheduled = false;
16494
+ this._pendingRetryCount = 0;
16461
16495
  }
16462
16496
 
16463
16497
  /**
@@ -16497,6 +16531,9 @@ class MenuService {
16497
16531
  hostDisconnected() {
16498
16532
  this._subscribers = [];
16499
16533
  this._menuOptions = [];
16534
+ this._pendingValue = null;
16535
+ this._pendingRetryScheduled = false;
16536
+ this._pendingRetryCount = 0;
16500
16537
  }
16501
16538
 
16502
16539
  /**
@@ -16699,17 +16736,22 @@ class MenuService {
16699
16736
  * @param {string|number|Array<string|number>} value - The value(s) to select.
16700
16737
  */
16701
16738
  selectByValue(value) {
16702
- // Early exit for invalid/empty values or internal updates
16703
- if (this.internalUpdateInProgress ||
16704
- this.host.internalUpdateInProgress ||
16705
- value === undefined ||
16739
+ const isEmptyValue = value === undefined ||
16706
16740
  value === null ||
16707
16741
  (Array.isArray(value) && value.length === 0) ||
16708
- (typeof value === 'string' && value.trim() === '')) {
16742
+ (typeof value === 'string' && value.trim() === '');
16743
+
16744
+ // Early exit for invalid/empty values
16745
+ if (isEmptyValue) {
16709
16746
  return;
16710
16747
  }
16711
16748
 
16712
- this.reset();
16749
+ // If an internal update cycle is still in progress, defer value application
16750
+ // rather than dropping it.
16751
+ if (this.internalUpdateInProgress || this.host.internalUpdateInProgress) {
16752
+ this.queuePendingValue(value);
16753
+ return;
16754
+ }
16713
16755
 
16714
16756
  // Normalize values to array of strings
16715
16757
  const normalizedValues = this._getNormalizedValues(value);
@@ -16721,33 +16763,100 @@ class MenuService {
16721
16763
  validatedValues = [normalizedValues[0]];
16722
16764
  }
16723
16765
 
16766
+ if (this._menuOptions.length === 0) {
16767
+ this.queuePendingValue(value);
16768
+ return;
16769
+ }
16770
+
16724
16771
  // Find matching options by comparing available options to validated values
16725
16772
  const trackedKeys = new Set();
16726
16773
  const optionsToSelect = this._menuOptions.filter(option => {
16727
16774
  const passesFilter = validatedValues.includes(option.key);
16728
16775
  const alreadyTracked = trackedKeys.has(option.key);
16776
+ const isActive = option.isActive;
16729
16777
 
16730
16778
  trackedKeys.add(option.key);
16731
16779
 
16732
16780
  // Include the option in the options to be selected if it passes the filter check and
16733
16781
  // either hasn't been tracked yet or selectAllMatchingOptions is true
16734
- return passesFilter && (!alreadyTracked || (alreadyTracked && this.selectAllMatchingOptions));
16782
+ return isActive && passesFilter && (!alreadyTracked || (alreadyTracked && this.selectAllMatchingOptions));
16735
16783
  });
16736
16784
 
16737
- // Handle selection result
16738
- if (optionsToSelect.length && !this.optionsArraysMatch(optionsToSelect, this.selectedOptions)) {
16739
- this.selectOptions(optionsToSelect);
16740
- } else {
16741
- this.stageUpdate();
16785
+ // Handle no matches: clear existing selection, but do not dispatch an intermediate
16786
+ // undefined value that can overwrite the host value in parent components.
16787
+ if (!optionsToSelect.length) {
16788
+ const hasUnresolvedKeys = this._menuOptions.some((option) => option.isActive && option.key == null);
16789
+
16790
+ if (hasUnresolvedKeys) {
16791
+ this.queuePendingValue(value);
16792
+ return;
16793
+ }
16794
+
16795
+ this.clearPendingValue();
16796
+
16797
+ if (this.selectedOptions.length > 0) {
16798
+ this.selectedOptions = [];
16799
+ }
16800
+
16801
+ // Always notify so the host resets any stale invalid value, even when
16802
+ // selectedOptions was already empty (e.g. double-clicking set-invalid).
16803
+ this.stageUpdate({ reason: 'no-match' });
16804
+
16805
+ // Dispatch failure event if no matches found
16806
+ if (validatedValues.length) {
16807
+ this.dispatchChangeEvent('auroMenu-selectValueFailure', {
16808
+ message: 'No matching options found for the provided value(s).',
16809
+ values: validatedValues
16810
+ });
16811
+ }
16812
+
16813
+ return;
16742
16814
  }
16743
16815
 
16744
- // Dispatch failure event if no matches found
16745
- if (!optionsToSelect.length && validatedValues.length) {
16746
- this.dispatchChangeEvent('auroMenu-selectValueFailure', {
16747
- message: 'No matching options found for the provided value(s).',
16748
- values: validatedValues
16749
- });
16816
+ this.clearPendingValue();
16817
+
16818
+ if (this.optionsArraysMatch(optionsToSelect, this.selectedOptions)) {
16819
+ return;
16750
16820
  }
16821
+
16822
+ // Apply programmatic selection as a single transaction and emit one final state.
16823
+ this.selectedOptions = optionsToSelect;
16824
+ this.stageUpdate();
16825
+ }
16826
+
16827
+ /**
16828
+ * Queues a pending value and schedules a bounded retry.
16829
+ * @param {string|number|Array<string|number>} value - The value to retry.
16830
+ */
16831
+ queuePendingValue(value) {
16832
+ this._pendingValue = value;
16833
+
16834
+ if (this._pendingRetryScheduled || this._pendingRetryCount >= 5) {
16835
+ return;
16836
+ }
16837
+
16838
+ this._pendingRetryScheduled = true;
16839
+ this._pendingRetryCount += 1;
16840
+
16841
+ setTimeout(() => {
16842
+ this._pendingRetryScheduled = false;
16843
+
16844
+ if (this._pendingValue == null) {
16845
+ return;
16846
+ }
16847
+
16848
+ const pendingValue = this._pendingValue;
16849
+ this.selectByValue(pendingValue);
16850
+ }, 0);
16851
+ }
16852
+
16853
+ /**
16854
+ * Clears pending retry state.
16855
+ */
16856
+ clearPendingValue() {
16857
+ this._pendingValue = null;
16858
+ this._pendingRetryScheduled = false;
16859
+ this._pendingRetryCount = 0;
16751
16860
  }
16752
16861
 
16753
16862
  /**
@@ -16786,9 +16895,9 @@ class MenuService {
16786
16895
  /**
16787
16896
  * Stages an update to notify subscribers of state and value changes.
16788
16897
  */
16789
- stageUpdate() {
16790
- this.notifyStateChange();
16791
- this.notifyValueChange();
16898
+ stageUpdate(meta = {}) {
16899
+ this.notifyStateChange(meta);
16900
+ this.notifyValueChange(meta);
16792
16901
  }
16793
16902
 
16794
16903
  /**
@@ -16803,14 +16912,18 @@ class MenuService {
16803
16912
  /**
16804
16913
  * Notifies subscribers of a state change (selected options has changed).
16805
16914
  */
16806
- notifyStateChange() {
16807
- this.notify({ type: 'stateChange', selectedOptions: this.selectedOptions });
16915
+ notifyStateChange(meta = {}) {
16916
+ this.notify({
16917
+ type: 'stateChange',
16918
+ selectedOptions: this.selectedOptions,
16919
+ ...meta
16920
+ });
16808
16921
  }
16809
16922
 
16810
16923
  /**
16811
16924
  * Notifies subscribers of a value change (current value has changed).
16812
16925
  */
16813
- notifyValueChange() {
16926
+ notifyValueChange(meta = {}) {
16814
16927
 
16815
16928
  // Prepare details for the event
16816
16929
  const details = {
@@ -16826,10 +16939,9 @@ class MenuService {
16826
16939
 
16827
16940
  this.notify({
16828
16941
  type: 'valueChange',
16942
+ ...meta,
16829
16943
  ...details
16830
16944
  });
16831
-
16832
- this.dispatchChangeEvent('auroMenu-selectedOption', details);
16833
16945
  }
16834
16946
 
16835
16947
  /**
@@ -16857,6 +16969,10 @@ class MenuService {
16857
16969
  addMenuOption(option) {
16858
16970
  this._menuOptions.push(option);
16859
16971
  this.notify({ type: 'optionsChange', options: this._menuOptions });
16972
+
16973
+ if (this._pendingValue != null) {
16974
+ this.queuePendingValue(this._pendingValue);
16975
+ }
16860
16976
  }
16861
16977
 
16862
16978
  /**
@@ -16866,6 +16982,10 @@ class MenuService {
16866
16982
  removeMenuOption(option) {
16867
16983
  this._menuOptions = this._menuOptions.filter(opt => opt !== option);
16868
16984
  this.notify({ type: 'optionsChange', options: this._menuOptions });
16985
+
16986
+ if (this._menuOptions.length === 0) {
16987
+ this.clearPendingValue();
16988
+ }
16869
16989
  }
16870
16990
 
16871
16991
  /**
@@ -17139,7 +17259,7 @@ class AuroMenu extends AuroElement {
17139
17259
  },
17140
17260
 
17141
17261
  /**
17142
- * Available menu options
17262
+ * Available menu options.
17143
17263
  * @readonly
17144
17264
  */
17145
17265
  options: {
@@ -17206,7 +17326,7 @@ class AuroMenu extends AuroElement {
17206
17326
  /**
17207
17327
  * @readonly
17208
17328
  * @returns {Array<HTMLElement>} - Returns the array of available menu options.
17209
- * @deprecated use `options` property instead.
17329
+ * @deprecated Use `options` property instead.
17210
17330
  */
17211
17331
  get items() {
17212
17332
  return this.options;
@@ -17314,7 +17434,7 @@ class AuroMenu extends AuroElement {
17314
17434
  const newValue = event.stringValue;
17315
17435
 
17316
17436
  // Check if the option or value has actually changed
17317
- if (newValue === undefined || (this.optionSelected !== newOption || this.stringValue !== newValue)) {
17437
+ if (this.optionSelected !== newOption || this.stringValue !== newValue) {
17318
17438
  this.optionSelected = newOption;
17319
17439
  this.setInternalValue(newValue);
17320
17440
  }
@@ -17388,8 +17508,13 @@ class AuroMenu extends AuroElement {
17388
17508
  updated(changedProperties) {
17389
17509
  super.updated(changedProperties);
17390
17510
 
17391
- // Update menu service properties on host update
17392
- if (changedProperties.has('value')) {
17511
+ // Apply value selection synchronously so that static-HTML fixtures
17512
+ // resolve within a single update cycle. The refactored selectByValue
17513
+ // no longer calls reset() first, so the destructive intermediate-event
17514
+ // cascade that originally required deferral is eliminated. If option
17515
+ // keys are not yet resolved (framework mount-order race), selectByValue
17516
+ // queues a bounded retry automatically via queuePendingValue.
17517
+ if (changedProperties.has('value') && !this.internalUpdateInProgress) {
17393
17518
  this.menuService.selectByValue(this.value);
17394
17519
  }
17395
17520
 
@@ -17569,12 +17694,13 @@ class AuroMenu extends AuroElement {
17569
17694
  * @param {any} source - The source that triggers this event.
17570
17695
  * @private
17571
17696
  */
17572
- notifySelectionChange({value, stringValue, keys, options} = {}) {
17697
+ notifySelectionChange({value, stringValue, keys, options, reason} = {}) {
17573
17698
  dispatchMenuEvent(this, 'auroMenu-selectedOption', {
17574
17699
  value,
17575
17700
  stringValue,
17576
17701
  keys,
17577
- options
17702
+ options,
17703
+ reason
17578
17704
  });
17579
17705
  }
17580
17706