@aurodesignsystem-dev/auro-formkit 0.0.0-pr785.0 → 0.0.0-pr785.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 (63) hide show
  1. package/components/checkbox/demo/api.html +16 -10
  2. package/components/checkbox/demo/api.min.js +2 -2
  3. package/components/checkbox/demo/index.html +16 -10
  4. package/components/checkbox/demo/index.min.js +2 -2
  5. package/components/checkbox/demo/readme.html +16 -9
  6. package/components/checkbox/dist/index.js +2 -2
  7. package/components/checkbox/dist/registered.js +2 -2
  8. package/components/combobox/demo/api.html +16 -10
  9. package/components/combobox/demo/api.min.js +27 -15
  10. package/components/combobox/demo/index.html +16 -10
  11. package/components/combobox/demo/index.min.js +27 -15
  12. package/components/combobox/demo/readme.html +16 -9
  13. package/components/combobox/dist/index.js +27 -15
  14. package/components/combobox/dist/registered.js +27 -15
  15. package/components/counter/demo/api.html +16 -10
  16. package/components/counter/demo/api.min.js +25 -13
  17. package/components/counter/demo/index.html +16 -10
  18. package/components/counter/demo/index.min.js +25 -13
  19. package/components/counter/demo/readme.html +16 -9
  20. package/components/counter/dist/index.js +25 -13
  21. package/components/counter/dist/registered.js +25 -13
  22. package/components/datepicker/demo/api.html +16 -10
  23. package/components/datepicker/demo/api.min.js +37 -15
  24. package/components/datepicker/demo/index.html +16 -10
  25. package/components/datepicker/demo/index.min.js +37 -15
  26. package/components/datepicker/demo/readme.html +16 -9
  27. package/components/datepicker/dist/index.js +37 -15
  28. package/components/datepicker/dist/registered.js +37 -15
  29. package/components/dropdown/demo/api.html +16 -10
  30. package/components/dropdown/demo/api.md +7 -6
  31. package/components/dropdown/demo/api.min.js +25 -13
  32. package/components/dropdown/demo/index.html +16 -10
  33. package/components/dropdown/demo/index.min.js +25 -13
  34. package/components/dropdown/demo/readme.html +16 -9
  35. package/components/dropdown/dist/auro-dropdown.d.ts +1 -0
  36. package/components/dropdown/dist/index.js +25 -13
  37. package/components/dropdown/dist/registered.js +25 -13
  38. package/components/form/demo/api.html +16 -9
  39. package/components/form/demo/autocomplete.html +19 -3
  40. package/components/form/demo/index.html +16 -9
  41. package/components/form/demo/readme.html +16 -9
  42. package/components/form/demo/working.html +19 -13
  43. package/components/input/demo/api.html +16 -10
  44. package/components/input/demo/api.min.js +2 -2
  45. package/components/input/demo/index.html +16 -10
  46. package/components/input/demo/index.min.js +2 -2
  47. package/components/input/demo/readme.html +16 -9
  48. package/components/input/dist/index.js +2 -2
  49. package/components/input/dist/registered.js +2 -2
  50. package/components/menu/demo/api.html +16 -32
  51. package/components/menu/demo/index.html +16 -10
  52. package/components/menu/demo/readme.html +16 -9
  53. package/components/radio/demo/api.html +16 -10
  54. package/components/radio/demo/index.html +16 -10
  55. package/components/radio/demo/readme.html +16 -9
  56. package/components/select/demo/api.html +16 -10
  57. package/components/select/demo/api.min.js +25 -13
  58. package/components/select/demo/index.html +16 -11
  59. package/components/select/demo/index.min.js +25 -13
  60. package/components/select/demo/readme.html +16 -9
  61. package/components/select/dist/index.js +25 -13
  62. package/components/select/dist/registered.js +25 -13
  63. package/package.json +4 -3
package/components/counter/demo/index.min.js CHANGED
@@ -4966,7 +4966,7 @@ class AuroFloatingUI {
4966
4966
  return;
4967
4967
  }
4968
4968
 
4969
- this.hideBib();
4969
+ this.hideBib("keydown");
4970
4970
  }
4971
4971
 
4972
4972
  setupHideHandlers() {
@@ -4991,7 +4991,7 @@ class AuroFloatingUI {
4991
4991
  document.expandedAuroFormkitDropdown = null;
4992
4992
  document.expandedAuroFloater = this;
4993
4993
  } else {
4994
- this.hideBib();
4994
+ this.hideBib("click");
4995
4995
  }
4996
4996
  }
4997
4997
  };
@@ -5004,7 +5004,7 @@ class AuroFloatingUI {
5004
5004
  // if something else is open, let it handle itself
5005
5005
  return;
5006
5006
  }
5007
- this.hideBib();
5007
+ this.hideBib("keydown");
5008
5008
  }
5009
5009
  };
5010
5010
 
@@ -5087,7 +5087,11 @@ class AuroFloatingUI {
5087
5087
  }
5088
5088
  }
5089
5089
 
5090
- hideBib() {
5090
+ /**
5091
+ * Hides the floating UI element.
5092
+ * @param {String} eventType - The event type that triggered the hiding action.
5093
+ */
5094
+ hideBib(eventType = "unknown") {
5091
5095
  if (!this.element.disabled && !this.element.noToggle) {
5092
5096
  this.lockScroll(false);
5093
5097
  this.element.triggerChevron?.removeAttribute('data-expanded');
@@ -5098,7 +5102,7 @@ class AuroFloatingUI {
5098
5102
  if (this.showing) {
5099
5103
  this.cleanupHideHandlers();
5100
5104
  this.showing = false;
5101
- this.dispatchEventDropdownToggle();
5105
+ this.dispatchEventDropdownToggle(eventType);
5102
5106
  }
5103
5107
  }
5104
5108
  document.expandedAuroFloater = null;
@@ -5107,11 +5111,13 @@ class AuroFloatingUI {
5107
5111
  /**
5108
5112
  * @private
5109
5113
  * @returns {void} Dispatches event with an object showing the state of the dropdown.
5114
+ * @param {String} eventType - The event type that triggered the toggle action.
5110
5115
  */
5111
- dispatchEventDropdownToggle() {
5116
+ dispatchEventDropdownToggle(eventType) {
5112
5117
  const event = new CustomEvent(this.eventPrefix ? `${this.eventPrefix}-toggled` : 'toggled', {
5113
5118
  detail: {
5114
5119
  expanded: this.showing,
5120
+ eventType: eventType || "unknown",
5115
5121
  },
5116
5122
  composed: true
5117
5123
  });
@@ -5121,7 +5127,7 @@ class AuroFloatingUI {
5121
5127
 
5122
5128
  handleClick() {
5123
5129
  if (this.element.isPopoverVisible) {
5124
- this.hideBib();
5130
+ this.hideBib("click");
5125
5131
  } else {
5126
5132
  this.showBib();
5127
5133
  }
@@ -5157,7 +5163,7 @@ class AuroFloatingUI {
5157
5163
  break;
5158
5164
  case 'mouseleave':
5159
5165
  if (this.element.hoverToggle) {
5160
- this.hideBib();
5166
+ this.hideBib("mouseleave");
5161
5167
  }
5162
5168
  break;
5163
5169
  case 'focus':
@@ -6545,6 +6551,9 @@ class AuroDropdown extends AuroElement$3 {
6545
6551
 
6546
6552
  this.parentBorder = false;
6547
6553
 
6554
+ /** @private */
6555
+ this.handleDropdownToggle = this.handleDropdownToggle.bind(this);
6556
+
6548
6557
  this.privateDefaults();
6549
6558
  }
6550
6559
 
@@ -6978,12 +6987,14 @@ class AuroDropdown extends AuroElement$3 {
6978
6987
  if (changedProperties.size === 0 || changedProperties.has('isPopoverVisible')) {
6979
6988
  this.handleTriggerContentSlotChange();
6980
6989
  }
6990
+ }
6981
6991
 
6982
- if (changedProperties.has('isPopoverVisible')) {
6983
- this.updateFocusTrap();
6984
- if (!this.isPopoverVisible && this.hasFocus) {
6985
- this.trigger.focus();
6986
- }
6992
+ handleDropdownToggle(event) {
6993
+ this.updateFocusTrap();
6994
+ this.isPopoverVisible = event.detail.expanded;
6995
+ const eventType = event.detail.eventType || "unknown";
6996
+ if (!this.isPopoverVisible && this.hasFocus && eventType === "keydown") {
6997
+ this.trigger.focus();
6987
6998
  }
6988
6999
  }
6989
7000
 
@@ -6991,6 +7002,7 @@ class AuroDropdown extends AuroElement$3 {
6991
7002
 
6992
7003
  // Configure the floater to, this will generate the ID for the bib
6993
7004
  this.floater.configure(this, 'auroDropdown');
7005
+ this.addEventListener('auroDropdown-toggled', this.handleDropdownToggle);
6994
7006
 
6995
7007
  /**
6996
7008
  * @description Let subscribers know that the dropdown ID ha been generated and added.
package/components/counter/demo/readme.html CHANGED
@@ -16,17 +16,24 @@
16
16
  <head>
17
17
  <meta charset="UTF-8" />
18
18
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
19
- <title>Auro Web Component Generator | auro-counter custom element</title>
20
- <link
21
- rel="stylesheet"
22
- type="text/css"
23
- href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/themes/prism.css"
24
- />
25
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/auro-classic/CSSCustomProperties.css">
26
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/alaska/CSSCustomProperties--alaska.css">
19
+ <title>Auro Web Component Demo | auro-counter</title>
20
+
21
+ <!-- Prism.js Stylesheet -->
22
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/themes/prism.css"/>
23
+
24
+ <!-- Legacy reference is still needed to support auro-counter's use of legacy token values at this time -->
25
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/legacy/auro-classic/CSSCustomProperties.css"/>
26
+
27
+ <!-- Design Token Alaska Theme -->
28
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/themes/alaska/CSSCustomProperties--alaska.min.css"/>
29
+
30
+ <!-- Webcore Stylesheet Alaska Theme -->
31
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/themes/alaska.global.min.css" />
32
+
33
+ <!-- Demo Specific Styles -->
27
34
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
28
35
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/elementDemoStyles.css" />
29
- </head>
36
+ </head>
30
37
  <body class="auro-markdown">
31
38
  <main></main>
32
39
 
package/components/counter/dist/index.js CHANGED
@@ -4919,7 +4919,7 @@ class AuroFloatingUI {
4919
4919
  return;
4920
4920
  }
4921
4921
 
4922
- this.hideBib();
4922
+ this.hideBib("keydown");
4923
4923
  }
4924
4924
 
4925
4925
  setupHideHandlers() {
@@ -4944,7 +4944,7 @@ class AuroFloatingUI {
4944
4944
  document.expandedAuroFormkitDropdown = null;
4945
4945
  document.expandedAuroFloater = this;
4946
4946
  } else {
4947
- this.hideBib();
4947
+ this.hideBib("click");
4948
4948
  }
4949
4949
  }
4950
4950
  };
@@ -4957,7 +4957,7 @@ class AuroFloatingUI {
4957
4957
  // if something else is open, let it handle itself
4958
4958
  return;
4959
4959
  }
4960
- this.hideBib();
4960
+ this.hideBib("keydown");
4961
4961
  }
4962
4962
  };
4963
4963
 
@@ -5040,7 +5040,11 @@ class AuroFloatingUI {
5040
5040
  }
5041
5041
  }
5042
5042
 
5043
- hideBib() {
5043
+ /**
5044
+ * Hides the floating UI element.
5045
+ * @param {String} eventType - The event type that triggered the hiding action.
5046
+ */
5047
+ hideBib(eventType = "unknown") {
5044
5048
  if (!this.element.disabled && !this.element.noToggle) {
5045
5049
  this.lockScroll(false);
5046
5050
  this.element.triggerChevron?.removeAttribute('data-expanded');
@@ -5051,7 +5055,7 @@ class AuroFloatingUI {
5051
5055
  if (this.showing) {
5052
5056
  this.cleanupHideHandlers();
5053
5057
  this.showing = false;
5054
- this.dispatchEventDropdownToggle();
5058
+ this.dispatchEventDropdownToggle(eventType);
5055
5059
  }
5056
5060
  }
5057
5061
  document.expandedAuroFloater = null;
@@ -5060,11 +5064,13 @@ class AuroFloatingUI {
5060
5064
  /**
5061
5065
  * @private
5062
5066
  * @returns {void} Dispatches event with an object showing the state of the dropdown.
5067
+ * @param {String} eventType - The event type that triggered the toggle action.
5063
5068
  */
5064
- dispatchEventDropdownToggle() {
5069
+ dispatchEventDropdownToggle(eventType) {
5065
5070
  const event = new CustomEvent(this.eventPrefix ? `${this.eventPrefix}-toggled` : 'toggled', {
5066
5071
  detail: {
5067
5072
  expanded: this.showing,
5073
+ eventType: eventType || "unknown",
5068
5074
  },
5069
5075
  composed: true
5070
5076
  });
@@ -5074,7 +5080,7 @@ class AuroFloatingUI {
5074
5080
 
5075
5081
  handleClick() {
5076
5082
  if (this.element.isPopoverVisible) {
5077
- this.hideBib();
5083
+ this.hideBib("click");
5078
5084
  } else {
5079
5085
  this.showBib();
5080
5086
  }
@@ -5110,7 +5116,7 @@ class AuroFloatingUI {
5110
5116
  break;
5111
5117
  case 'mouseleave':
5112
5118
  if (this.element.hoverToggle) {
5113
- this.hideBib();
5119
+ this.hideBib("mouseleave");
5114
5120
  }
5115
5121
  break;
5116
5122
  case 'focus':
@@ -6498,6 +6504,9 @@ class AuroDropdown extends AuroElement$3 {
6498
6504
 
6499
6505
  this.parentBorder = false;
6500
6506
 
6507
+ /** @private */
6508
+ this.handleDropdownToggle = this.handleDropdownToggle.bind(this);
6509
+
6501
6510
  this.privateDefaults();
6502
6511
  }
6503
6512
 
@@ -6931,12 +6940,14 @@ class AuroDropdown extends AuroElement$3 {
6931
6940
  if (changedProperties.size === 0 || changedProperties.has('isPopoverVisible')) {
6932
6941
  this.handleTriggerContentSlotChange();
6933
6942
  }
6943
+ }
6934
6944
 
6935
- if (changedProperties.has('isPopoverVisible')) {
6936
- this.updateFocusTrap();
6937
- if (!this.isPopoverVisible && this.hasFocus) {
6938
- this.trigger.focus();
6939
- }
6945
+ handleDropdownToggle(event) {
6946
+ this.updateFocusTrap();
6947
+ this.isPopoverVisible = event.detail.expanded;
6948
+ const eventType = event.detail.eventType || "unknown";
6949
+ if (!this.isPopoverVisible && this.hasFocus && eventType === "keydown") {
6950
+ this.trigger.focus();
6940
6951
  }
6941
6952
  }
6942
6953
 
@@ -6944,6 +6955,7 @@ class AuroDropdown extends AuroElement$3 {
6944
6955
 
6945
6956
  // Configure the floater to, this will generate the ID for the bib
6946
6957
  this.floater.configure(this, 'auroDropdown');
6958
+ this.addEventListener('auroDropdown-toggled', this.handleDropdownToggle);
6947
6959
 
6948
6960
  /**
6949
6961
  * @description Let subscribers know that the dropdown ID ha been generated and added.
package/components/counter/dist/registered.js CHANGED
@@ -4919,7 +4919,7 @@ class AuroFloatingUI {
4919
4919
  return;
4920
4920
  }
4921
4921
 
4922
- this.hideBib();
4922
+ this.hideBib("keydown");
4923
4923
  }
4924
4924
 
4925
4925
  setupHideHandlers() {
@@ -4944,7 +4944,7 @@ class AuroFloatingUI {
4944
4944
  document.expandedAuroFormkitDropdown = null;
4945
4945
  document.expandedAuroFloater = this;
4946
4946
  } else {
4947
- this.hideBib();
4947
+ this.hideBib("click");
4948
4948
  }
4949
4949
  }
4950
4950
  };
@@ -4957,7 +4957,7 @@ class AuroFloatingUI {
4957
4957
  // if something else is open, let it handle itself
4958
4958
  return;
4959
4959
  }
4960
- this.hideBib();
4960
+ this.hideBib("keydown");
4961
4961
  }
4962
4962
  };
4963
4963
 
@@ -5040,7 +5040,11 @@ class AuroFloatingUI {
5040
5040
  }
5041
5041
  }
5042
5042
 
5043
- hideBib() {
5043
+ /**
5044
+ * Hides the floating UI element.
5045
+ * @param {String} eventType - The event type that triggered the hiding action.
5046
+ */
5047
+ hideBib(eventType = "unknown") {
5044
5048
  if (!this.element.disabled && !this.element.noToggle) {
5045
5049
  this.lockScroll(false);
5046
5050
  this.element.triggerChevron?.removeAttribute('data-expanded');
@@ -5051,7 +5055,7 @@ class AuroFloatingUI {
5051
5055
  if (this.showing) {
5052
5056
  this.cleanupHideHandlers();
5053
5057
  this.showing = false;
5054
- this.dispatchEventDropdownToggle();
5058
+ this.dispatchEventDropdownToggle(eventType);
5055
5059
  }
5056
5060
  }
5057
5061
  document.expandedAuroFloater = null;
@@ -5060,11 +5064,13 @@ class AuroFloatingUI {
5060
5064
  /**
5061
5065
  * @private
5062
5066
  * @returns {void} Dispatches event with an object showing the state of the dropdown.
5067
+ * @param {String} eventType - The event type that triggered the toggle action.
5063
5068
  */
5064
- dispatchEventDropdownToggle() {
5069
+ dispatchEventDropdownToggle(eventType) {
5065
5070
  const event = new CustomEvent(this.eventPrefix ? `${this.eventPrefix}-toggled` : 'toggled', {
5066
5071
  detail: {
5067
5072
  expanded: this.showing,
5073
+ eventType: eventType || "unknown",
5068
5074
  },
5069
5075
  composed: true
5070
5076
  });
@@ -5074,7 +5080,7 @@ class AuroFloatingUI {
5074
5080
 
5075
5081
  handleClick() {
5076
5082
  if (this.element.isPopoverVisible) {
5077
- this.hideBib();
5083
+ this.hideBib("click");
5078
5084
  } else {
5079
5085
  this.showBib();
5080
5086
  }
@@ -5110,7 +5116,7 @@ class AuroFloatingUI {
5110
5116
  break;
5111
5117
  case 'mouseleave':
5112
5118
  if (this.element.hoverToggle) {
5113
- this.hideBib();
5119
+ this.hideBib("mouseleave");
5114
5120
  }
5115
5121
  break;
5116
5122
  case 'focus':
@@ -6498,6 +6504,9 @@ class AuroDropdown extends AuroElement$3 {
6498
6504
 
6499
6505
  this.parentBorder = false;
6500
6506
 
6507
+ /** @private */
6508
+ this.handleDropdownToggle = this.handleDropdownToggle.bind(this);
6509
+
6501
6510
  this.privateDefaults();
6502
6511
  }
6503
6512
 
@@ -6931,12 +6940,14 @@ class AuroDropdown extends AuroElement$3 {
6931
6940
  if (changedProperties.size === 0 || changedProperties.has('isPopoverVisible')) {
6932
6941
  this.handleTriggerContentSlotChange();
6933
6942
  }
6943
+ }
6934
6944
 
6935
- if (changedProperties.has('isPopoverVisible')) {
6936
- this.updateFocusTrap();
6937
- if (!this.isPopoverVisible && this.hasFocus) {
6938
- this.trigger.focus();
6939
- }
6945
+ handleDropdownToggle(event) {
6946
+ this.updateFocusTrap();
6947
+ this.isPopoverVisible = event.detail.expanded;
6948
+ const eventType = event.detail.eventType || "unknown";
6949
+ if (!this.isPopoverVisible && this.hasFocus && eventType === "keydown") {
6950
+ this.trigger.focus();
6940
6951
  }
6941
6952
  }
6942
6953
 
@@ -6944,6 +6955,7 @@ class AuroDropdown extends AuroElement$3 {
6944
6955
 
6945
6956
  // Configure the floater to, this will generate the ID for the bib
6946
6957
  this.floater.configure(this, 'auroDropdown');
6958
+ this.addEventListener('auroDropdown-toggled', this.handleDropdownToggle);
6947
6959
 
6948
6960
  /**
6949
6961
  * @description Let subscribers know that the dropdown ID ha been generated and added.
package/components/datepicker/demo/api.html CHANGED
@@ -16,18 +16,24 @@
16
16
  <head>
17
17
  <meta charset="UTF-8" />
18
18
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
19
- <title>Auro Web Component Generator | auro-datepicker custom element</title>
20
- <link
21
- rel="stylesheet"
22
- type="text/css"
23
- href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/themes/prism.css"
24
- />
25
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/auro-classic/CSSCustomProperties.css">
26
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/alaska/CSSCustomProperties--alaska.css">
19
+ <title>Auro Web Component Demo | auro-datepicker</title>
20
+
21
+ <!-- Prism.js Stylesheet -->
22
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/themes/prism.css"/>
23
+
24
+ <!-- Legacy reference is still needed to support auro-datepicker's use of legacy token values at this time -->
25
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/legacy/auro-classic/CSSCustomProperties.css"/>
26
+
27
+ <!-- Design Token Alaska Theme -->
28
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/themes/alaska/CSSCustomProperties--alaska.min.css"/>
29
+
30
+ <!-- Webcore Stylesheet Alaska Theme -->
31
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/themes/alaska.global.min.css" />
32
+
33
+ <!-- Demo Specific Styles -->
27
34
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
28
35
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/elementDemoStyles.css" />
29
- <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/essentials-as.css" />
30
- </head>
36
+ </head>
31
37
  <body class="auro-markdown">
32
38
  <main></main>
33
39
 
package/components/datepicker/demo/api.min.js CHANGED
@@ -16323,7 +16323,7 @@ class AuroFloatingUI {
16323
16323
  return;
16324
16324
  }
16325
16325
 
16326
- this.hideBib();
16326
+ this.hideBib("keydown");
16327
16327
  }
16328
16328
 
16329
16329
  setupHideHandlers() {
@@ -16348,7 +16348,7 @@ class AuroFloatingUI {
16348
16348
  document.expandedAuroFormkitDropdown = null;
16349
16349
  document.expandedAuroFloater = this;
16350
16350
  } else {
16351
- this.hideBib();
16351
+ this.hideBib("click");
16352
16352
  }
16353
16353
  }
16354
16354
  };
@@ -16361,7 +16361,7 @@ class AuroFloatingUI {
16361
16361
  // if something else is open, let it handle itself
16362
16362
  return;
16363
16363
  }
16364
- this.hideBib();
16364
+ this.hideBib("keydown");
16365
16365
  }
16366
16366
  };
16367
16367
 
@@ -16444,7 +16444,11 @@ class AuroFloatingUI {
16444
16444
  }
16445
16445
  }
16446
16446
 
16447
- hideBib() {
16447
+ /**
16448
+ * Hides the floating UI element.
16449
+ * @param {String} eventType - The event type that triggered the hiding action.
16450
+ */
16451
+ hideBib(eventType = "unknown") {
16448
16452
  if (!this.element.disabled && !this.element.noToggle) {
16449
16453
  this.lockScroll(false);
16450
16454
  this.element.triggerChevron?.removeAttribute('data-expanded');
@@ -16455,7 +16459,7 @@ class AuroFloatingUI {
16455
16459
  if (this.showing) {
16456
16460
  this.cleanupHideHandlers();
16457
16461
  this.showing = false;
16458
- this.dispatchEventDropdownToggle();
16462
+ this.dispatchEventDropdownToggle(eventType);
16459
16463
  }
16460
16464
  }
16461
16465
  document.expandedAuroFloater = null;
@@ -16464,11 +16468,13 @@ class AuroFloatingUI {
16464
16468
  /**
16465
16469
  * @private
16466
16470
  * @returns {void} Dispatches event with an object showing the state of the dropdown.
16471
+ * @param {String} eventType - The event type that triggered the toggle action.
16467
16472
  */
16468
- dispatchEventDropdownToggle() {
16473
+ dispatchEventDropdownToggle(eventType) {
16469
16474
  const event = new CustomEvent(this.eventPrefix ? `${this.eventPrefix}-toggled` : 'toggled', {
16470
16475
  detail: {
16471
16476
  expanded: this.showing,
16477
+ eventType: eventType || "unknown",
16472
16478
  },
16473
16479
  composed: true
16474
16480
  });
@@ -16478,7 +16484,7 @@ class AuroFloatingUI {
16478
16484
 
16479
16485
  handleClick() {
16480
16486
  if (this.element.isPopoverVisible) {
16481
- this.hideBib();
16487
+ this.hideBib("click");
16482
16488
  } else {
16483
16489
  this.showBib();
16484
16490
  }
@@ -16514,7 +16520,7 @@ class AuroFloatingUI {
16514
16520
  break;
16515
16521
  case 'mouseleave':
16516
16522
  if (this.element.hoverToggle) {
16517
- this.hideBib();
16523
+ this.hideBib("mouseleave");
16518
16524
  }
16519
16525
  break;
16520
16526
  case 'focus':
@@ -17902,6 +17908,9 @@ class AuroDropdown extends AuroElement$4 {
17902
17908
 
17903
17909
  this.parentBorder = false;
17904
17910
 
17911
+ /** @private */
17912
+ this.handleDropdownToggle = this.handleDropdownToggle.bind(this);
17913
+
17905
17914
  this.privateDefaults();
17906
17915
  }
17907
17916
 
@@ -18335,12 +18344,14 @@ class AuroDropdown extends AuroElement$4 {
18335
18344
  if (changedProperties.size === 0 || changedProperties.has('isPopoverVisible')) {
18336
18345
  this.handleTriggerContentSlotChange();
18337
18346
  }
18347
+ }
18338
18348
 
18339
- if (changedProperties.has('isPopoverVisible')) {
18340
- this.updateFocusTrap();
18341
- if (!this.isPopoverVisible && this.hasFocus) {
18342
- this.trigger.focus();
18343
- }
18349
+ handleDropdownToggle(event) {
18350
+ this.updateFocusTrap();
18351
+ this.isPopoverVisible = event.detail.expanded;
18352
+ const eventType = event.detail.eventType || "unknown";
18353
+ if (!this.isPopoverVisible && this.hasFocus && eventType === "keydown") {
18354
+ this.trigger.focus();
18344
18355
  }
18345
18356
  }
18346
18357
 
@@ -18348,6 +18359,7 @@ class AuroDropdown extends AuroElement$4 {
18348
18359
 
18349
18360
  // Configure the floater to, this will generate the ID for the bib
18350
18361
  this.floater.configure(this, 'auroDropdown');
18362
+ this.addEventListener('auroDropdown-toggled', this.handleDropdownToggle);
18351
18363
 
18352
18364
  /**
18353
18365
  * @description Let subscribers know that the dropdown ID ha been generated and added.
@@ -24337,9 +24349,9 @@ class BaseInput extends AuroElement$2 {
24337
24349
  if (!this.shadowRoot.contains(this.getActiveElement())) {
24338
24350
  this.validation.validate(this);
24339
24351
  }
24340
-
24341
- this.notifyValueChanged();
24342
24352
  }
24353
+
24354
+ this.notifyValueChanged();
24343
24355
  }
24344
24356
 
24345
24357
  if (changedProperties.has('error')) {
@@ -27973,6 +27985,15 @@ class AuroDatePicker extends AuroElement$1 {
27973
27985
  this.layout = 'classic';
27974
27986
  this.shape = 'classic';
27975
27987
  this.size = 'lg';
27988
+
27989
+ /**
27990
+ * @private
27991
+ * @property {boolean} delegatesFocus - Whether the shadow root delegates focus.
27992
+ */
27993
+ this.constructor.shadowRootOptions = {
27994
+ ...i.shadowRootOptions,
27995
+ delegatesFocus: true,
27996
+ };
27976
27997
  }
27977
27998
 
27978
27999
  // This function is to define props used within the scope of this component
@@ -28710,6 +28731,7 @@ class AuroDatePicker extends AuroElement$1 {
28710
28731
  }
28711
28732
 
28712
28733
  this.hasFocus = true;
28734
+ this.dropdown.show();
28713
28735
 
28714
28736
  // shadowroot active element is null if we focus the datepicker itself
28715
28737
  if (this.shadowRoot.activeElement === null) {
package/components/datepicker/demo/index.html CHANGED
@@ -16,18 +16,24 @@
16
16
  <head>
17
17
  <meta charset="UTF-8" />
18
18
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
19
- <title>Auro Web Component Generator | auro-datepicker custom element</title>
20
- <link
21
- rel="stylesheet"
22
- type="text/css"
23
- href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/themes/prism.css"
24
- />
25
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/auro-classic/CSSCustomProperties.css">
26
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/alaska/CSSCustomProperties--alaska.css">
19
+ <title>Auro Web Component Demo | auro-datepicker</title>
20
+
21
+ <!-- Prism.js Stylesheet -->
22
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/themes/prism.css"/>
23
+
24
+ <!-- Legacy reference is still needed to support auro-datepicker's use of legacy token values at this time -->
25
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/legacy/auro-classic/CSSCustomProperties.css"/>
26
+
27
+ <!-- Design Token Alaska Theme -->
28
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/themes/alaska/CSSCustomProperties--alaska.min.css"/>
29
+
30
+ <!-- Webcore Stylesheet Alaska Theme -->
31
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/themes/alaska.global.min.css" />
32
+
33
+ <!-- Demo Specific Styles -->
27
34
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
28
35
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/elementDemoStyles.css" />
29
- <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/essentials-as.css" />
30
- </head>
36
+ </head>
31
37
  <body class="auro-markdown">
32
38
  <main></main>
33
39