@aurodesignsystem/auro-formkit 6.0.0 → 6.0.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 (46) hide show
  1. package/CHANGELOG.md +5 -240
  2. package/components/checkbox/demo/customize.min.js +1 -1
  3. package/components/checkbox/demo/getting-started.min.js +1 -1
  4. package/components/checkbox/demo/index.min.js +1 -1
  5. package/components/checkbox/dist/index.js +1 -1
  6. package/components/checkbox/dist/registered.js +1 -1
  7. package/components/combobox/demo/customize.min.js +172 -46
  8. package/components/combobox/demo/getting-started.min.js +172 -46
  9. package/components/combobox/demo/index.min.js +172 -46
  10. package/components/combobox/dist/index.js +172 -46
  11. package/components/combobox/dist/registered.js +172 -46
  12. package/components/counter/demo/customize.min.js +59 -7
  13. package/components/counter/demo/index.min.js +59 -7
  14. package/components/counter/dist/index.js +59 -7
  15. package/components/counter/dist/registered.js +59 -7
  16. package/components/datepicker/demo/customize.min.js +106 -18
  17. package/components/datepicker/demo/index.min.js +106 -18
  18. package/components/datepicker/dist/index.js +106 -18
  19. package/components/datepicker/dist/registered.js +106 -18
  20. package/components/dropdown/demo/customize.min.js +58 -6
  21. package/components/dropdown/demo/getting-started.min.js +58 -6
  22. package/components/dropdown/demo/index.min.js +58 -6
  23. package/components/dropdown/dist/auro-dropdown.d.ts +16 -1
  24. package/components/dropdown/dist/index.js +58 -6
  25. package/components/dropdown/dist/registered.js +58 -6
  26. package/components/form/demo/customize.min.js +445 -91
  27. package/components/form/demo/getting-started.min.js +445 -91
  28. package/components/form/demo/index.min.js +445 -91
  29. package/components/form/demo/registerDemoDeps.min.js +445 -91
  30. package/components/input/demo/customize.min.js +47 -11
  31. package/components/input/demo/getting-started.min.js +47 -11
  32. package/components/input/demo/index.min.js +47 -11
  33. package/components/input/dist/index.js +47 -11
  34. package/components/input/dist/registered.js +47 -11
  35. package/components/radio/demo/customize.min.js +1 -1
  36. package/components/radio/demo/getting-started.min.js +1 -1
  37. package/components/radio/demo/index.min.js +1 -1
  38. package/components/radio/dist/index.js +1 -1
  39. package/components/radio/dist/registered.js +1 -1
  40. package/components/select/demo/customize.min.js +59 -7
  41. package/components/select/demo/getting-started.min.js +59 -7
  42. package/components/select/demo/index.min.js +59 -7
  43. package/components/select/dist/index.js +59 -7
  44. package/components/select/dist/registered.js +59 -7
  45. package/custom-elements.json +1500 -1484
  46. package/package.json +1 -1
@@ -3709,7 +3709,7 @@ class AuroHelpText extends LitElement {
3709
3709
  }
3710
3710
  }
3711
3711
 
3712
- var formkitVersion = '202607102309';
3712
+ var formkitVersion = '202607161943';
3713
3713
 
3714
3714
  class AuroElement extends LitElement {
3715
3715
  static get properties() {
@@ -3838,7 +3838,6 @@ class AuroDropdown extends AuroElement {
3838
3838
  static get shadowRootOptions() {
3839
3839
  return {
3840
3840
  ...AuroElement.shadowRootOptions,
3841
- delegatesFocus: true,
3842
3841
  };
3843
3842
  }
3844
3843
 
@@ -3850,6 +3849,15 @@ class AuroDropdown extends AuroElement {
3850
3849
  this.matchWidth = false;
3851
3850
  this.noHideOnThisFocusLoss = false;
3852
3851
 
3852
+ /**
3853
+ * When true, the dropdown skips its generic focus restoration on close.
3854
+ * Set by consumers (e.g. combobox) that manage their own focus routing
3855
+ * via setClearBtnFocus / setInputFocus / keyboard strategy.
3856
+ * Separate from noHideOnThisFocusLoss (which controls auto-close behavior).
3857
+ * @private
3858
+ */
3859
+ this.noFocusRestoreOnClose = false;
3860
+
3853
3861
  this.errorMessage = undefined; // TODO - check with Doug if there is still more to do here
3854
3862
 
3855
3863
  // Layout Config
@@ -4005,7 +4013,49 @@ class AuroDropdown extends AuroElement {
4005
4013
  focusables[0].focus();
4006
4014
  }
4007
4015
  } else {
4016
+ this.focusTrigger();
4017
+ }
4018
+ }
4019
+
4020
+ /**
4021
+ * Focus the trigger content. When the trigger wrapper itself is focusable
4022
+ * (has tabindex), focus it directly. Otherwise, focus the first focusable
4023
+ * element slotted into the trigger slot (e.g. the auro-input).
4024
+ * @private
4025
+ */
4026
+ focusTrigger() {
4027
+ if (this.trigger.hasAttribute('tabindex')) {
4008
4028
  this.trigger.focus();
4029
+ } else {
4030
+ // Slotted content isn't a DOM child of the trigger div, so
4031
+ // getFocusableElements can't find it. Query assigned nodes directly.
4032
+ const slot = this.trigger.querySelector('slot[name="trigger"]');
4033
+ if (slot) {
4034
+ const assigned = slot.assignedElements();
4035
+ for (const el of assigned) {
4036
+ if (el.hasAttribute('disabled')) {
4037
+ continue;
4038
+ }
4039
+ // Try finding a focusable descendant first (handles non-focusable
4040
+ // wrappers like <div> containing a <button>). If none found, try
4041
+ // focusing the element directly (works for custom elements like
4042
+ // auro-input that have delegatesFocus or a custom focus() method).
4043
+ const descendants = getFocusableElements(el);
4044
+ if (descendants.length > 0) {
4045
+ descendants[0].focus();
4046
+ return;
4047
+ }
4048
+ el.focus();
4049
+ if (document.activeElement === el) {
4050
+ return;
4051
+ }
4052
+ }
4053
+ }
4054
+ // Fallback: try DOM children (non-slotted content)
4055
+ const focusables = getFocusableElements(this.trigger);
4056
+ if (focusables.length > 0) {
4057
+ focusables[0].focus();
4058
+ }
4009
4059
  }
4010
4060
  }
4011
4061
 
@@ -4458,15 +4508,17 @@ class AuroDropdown extends AuroElement {
4458
4508
  }
4459
4509
 
4460
4510
  const eventType = event.detail.eventType || "unknown";
4461
- if (!this.isPopoverVisible && this.hasFocus && eventType === "keydown") {
4462
- this.trigger.focus();
4511
+ if (!this.isPopoverVisible && this.hasFocus && eventType === "keydown" && !this.noFocusRestoreOnClose) {
4512
+ this.focusTrigger();
4463
4513
  }
4464
4514
 
4465
4515
 
4466
4516
  // On Tab-driven close (eventType "focusloss"), let focus advance naturally
4467
4517
  // — restoring to the trigger would trap the user on this dropdown, forcing
4468
4518
  // an extra Tab to move on. Escape and outside-click still restore.
4469
- if (!this.isPopoverVisible && eventType !== "focusloss") {
4519
+ // When noFocusRestoreOnClose is true, the consumer (e.g. combobox) manages
4520
+ // its own focus restoration — skip the generic trigger focus to avoid races.
4521
+ if (!this.isPopoverVisible && eventType !== "focusloss" && !this.noFocusRestoreOnClose) {
4470
4522
  // wait til the bib gets fully closed and rendered
4471
4523
  setTimeout(() => {
4472
4524
  // Skip if the bib re-opened, or if focus moved intentionally outside the dropdown (not to body).
@@ -4478,7 +4530,7 @@ class AuroDropdown extends AuroElement {
4478
4530
  return;
4479
4531
  }
4480
4532
  // Restore focus to the trigger.
4481
- this.trigger.focus();
4533
+ this.focusTrigger();
4482
4534
  });
4483
4535
  }
4484
4536
  }
@@ -3709,7 +3709,7 @@ class AuroHelpText extends LitElement {
3709
3709
  }
3710
3710
  }
3711
3711
 
3712
- var formkitVersion = '202607102309';
3712
+ var formkitVersion = '202607161943';
3713
3713
 
3714
3714
  class AuroElement extends LitElement {
3715
3715
  static get properties() {
@@ -3838,7 +3838,6 @@ class AuroDropdown extends AuroElement {
3838
3838
  static get shadowRootOptions() {
3839
3839
  return {
3840
3840
  ...AuroElement.shadowRootOptions,
3841
- delegatesFocus: true,
3842
3841
  };
3843
3842
  }
3844
3843
 
@@ -3850,6 +3849,15 @@ class AuroDropdown extends AuroElement {
3850
3849
  this.matchWidth = false;
3851
3850
  this.noHideOnThisFocusLoss = false;
3852
3851
 
3852
+ /**
3853
+ * When true, the dropdown skips its generic focus restoration on close.
3854
+ * Set by consumers (e.g. combobox) that manage their own focus routing
3855
+ * via setClearBtnFocus / setInputFocus / keyboard strategy.
3856
+ * Separate from noHideOnThisFocusLoss (which controls auto-close behavior).
3857
+ * @private
3858
+ */
3859
+ this.noFocusRestoreOnClose = false;
3860
+
3853
3861
  this.errorMessage = undefined; // TODO - check with Doug if there is still more to do here
3854
3862
 
3855
3863
  // Layout Config
@@ -4005,7 +4013,49 @@ class AuroDropdown extends AuroElement {
4005
4013
  focusables[0].focus();
4006
4014
  }
4007
4015
  } else {
4016
+ this.focusTrigger();
4017
+ }
4018
+ }
4019
+
4020
+ /**
4021
+ * Focus the trigger content. When the trigger wrapper itself is focusable
4022
+ * (has tabindex), focus it directly. Otherwise, focus the first focusable
4023
+ * element slotted into the trigger slot (e.g. the auro-input).
4024
+ * @private
4025
+ */
4026
+ focusTrigger() {
4027
+ if (this.trigger.hasAttribute('tabindex')) {
4008
4028
  this.trigger.focus();
4029
+ } else {
4030
+ // Slotted content isn't a DOM child of the trigger div, so
4031
+ // getFocusableElements can't find it. Query assigned nodes directly.
4032
+ const slot = this.trigger.querySelector('slot[name="trigger"]');
4033
+ if (slot) {
4034
+ const assigned = slot.assignedElements();
4035
+ for (const el of assigned) {
4036
+ if (el.hasAttribute('disabled')) {
4037
+ continue;
4038
+ }
4039
+ // Try finding a focusable descendant first (handles non-focusable
4040
+ // wrappers like <div> containing a <button>). If none found, try
4041
+ // focusing the element directly (works for custom elements like
4042
+ // auro-input that have delegatesFocus or a custom focus() method).
4043
+ const descendants = getFocusableElements(el);
4044
+ if (descendants.length > 0) {
4045
+ descendants[0].focus();
4046
+ return;
4047
+ }
4048
+ el.focus();
4049
+ if (document.activeElement === el) {
4050
+ return;
4051
+ }
4052
+ }
4053
+ }
4054
+ // Fallback: try DOM children (non-slotted content)
4055
+ const focusables = getFocusableElements(this.trigger);
4056
+ if (focusables.length > 0) {
4057
+ focusables[0].focus();
4058
+ }
4009
4059
  }
4010
4060
  }
4011
4061
 
@@ -4458,15 +4508,17 @@ class AuroDropdown extends AuroElement {
4458
4508
  }
4459
4509
 
4460
4510
  const eventType = event.detail.eventType || "unknown";
4461
- if (!this.isPopoverVisible && this.hasFocus && eventType === "keydown") {
4462
- this.trigger.focus();
4511
+ if (!this.isPopoverVisible && this.hasFocus && eventType === "keydown" && !this.noFocusRestoreOnClose) {
4512
+ this.focusTrigger();
4463
4513
  }
4464
4514
 
4465
4515
 
4466
4516
  // On Tab-driven close (eventType "focusloss"), let focus advance naturally
4467
4517
  // — restoring to the trigger would trap the user on this dropdown, forcing
4468
4518
  // an extra Tab to move on. Escape and outside-click still restore.
4469
- if (!this.isPopoverVisible && eventType !== "focusloss") {
4519
+ // When noFocusRestoreOnClose is true, the consumer (e.g. combobox) manages
4520
+ // its own focus restoration — skip the generic trigger focus to avoid races.
4521
+ if (!this.isPopoverVisible && eventType !== "focusloss" && !this.noFocusRestoreOnClose) {
4470
4522
  // wait til the bib gets fully closed and rendered
4471
4523
  setTimeout(() => {
4472
4524
  // Skip if the bib re-opened, or if focus moved intentionally outside the dropdown (not to body).
@@ -4478,7 +4530,7 @@ class AuroDropdown extends AuroElement {
4478
4530
  return;
4479
4531
  }
4480
4532
  // Restore focus to the trigger.
4481
- this.trigger.focus();
4533
+ this.focusTrigger();
4482
4534
  });
4483
4535
  }
4484
4536
  }