@aurodesignsystem-dev/auro-formkit 0.0.0-pr783.1 → 0.0.0-pr785.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 (64) hide show
  1. package/components/checkbox/demo/api.html +10 -16
  2. package/components/checkbox/demo/api.min.js +2 -2
  3. package/components/checkbox/demo/index.html +10 -16
  4. package/components/checkbox/demo/index.min.js +2 -2
  5. package/components/checkbox/demo/readme.html +9 -16
  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 +10 -16
  9. package/components/combobox/demo/api.min.js +15 -32
  10. package/components/combobox/demo/index.html +10 -16
  11. package/components/combobox/demo/index.min.js +15 -32
  12. package/components/combobox/demo/readme.html +9 -16
  13. package/components/combobox/dist/index.js +15 -32
  14. package/components/combobox/dist/registered.js +15 -32
  15. package/components/counter/demo/api.html +10 -16
  16. package/components/counter/demo/api.min.js +13 -31
  17. package/components/counter/demo/index.html +10 -16
  18. package/components/counter/demo/index.min.js +13 -31
  19. package/components/counter/demo/readme.html +9 -16
  20. package/components/counter/dist/index.js +13 -31
  21. package/components/counter/dist/registered.js +13 -31
  22. package/components/datepicker/demo/api.html +10 -16
  23. package/components/datepicker/demo/api.md +1 -0
  24. package/components/datepicker/demo/api.min.js +16 -44
  25. package/components/datepicker/demo/index.html +10 -16
  26. package/components/datepicker/demo/index.min.js +16 -44
  27. package/components/datepicker/demo/readme.html +9 -16
  28. package/components/datepicker/dist/auro-datepicker.d.ts +2 -3
  29. package/components/datepicker/dist/index.js +16 -44
  30. package/components/datepicker/dist/registered.js +16 -44
  31. package/components/dropdown/demo/api.html +10 -16
  32. package/components/dropdown/demo/api.min.js +13 -30
  33. package/components/dropdown/demo/index.html +10 -16
  34. package/components/dropdown/demo/index.min.js +13 -30
  35. package/components/dropdown/demo/readme.html +9 -16
  36. package/components/dropdown/dist/auro-dropdown.d.ts +0 -6
  37. package/components/dropdown/dist/index.js +13 -30
  38. package/components/dropdown/dist/registered.js +13 -30
  39. package/components/form/demo/api.html +9 -16
  40. package/components/form/demo/autocomplete.html +3 -19
  41. package/components/form/demo/index.html +9 -16
  42. package/components/form/demo/readme.html +9 -16
  43. package/components/form/demo/working.html +13 -19
  44. package/components/input/demo/api.html +10 -16
  45. package/components/input/demo/api.min.js +2 -2
  46. package/components/input/demo/index.html +10 -16
  47. package/components/input/demo/index.min.js +2 -2
  48. package/components/input/demo/readme.html +9 -16
  49. package/components/input/dist/index.js +2 -2
  50. package/components/input/dist/registered.js +2 -2
  51. package/components/menu/demo/api.html +32 -16
  52. package/components/menu/demo/index.html +10 -16
  53. package/components/menu/demo/readme.html +9 -16
  54. package/components/radio/demo/api.html +10 -16
  55. package/components/radio/demo/index.html +10 -16
  56. package/components/radio/demo/readme.html +9 -16
  57. package/components/select/demo/api.html +10 -16
  58. package/components/select/demo/api.min.js +13 -30
  59. package/components/select/demo/index.html +11 -16
  60. package/components/select/demo/index.min.js +13 -30
  61. package/components/select/demo/readme.html +9 -16
  62. package/components/select/dist/index.js +13 -30
  63. package/components/select/dist/registered.js +13 -30
  64. package/package.json +3 -4
package/components/select/demo/api.min.js CHANGED
@@ -3032,7 +3032,7 @@ class AuroFloatingUI {
3032
3032
  return;
3033
3033
  }
3034
3034
 
3035
- this.hideBib("keydown");
3035
+ this.hideBib();
3036
3036
  }
3037
3037
 
3038
3038
  setupHideHandlers() {
@@ -3057,7 +3057,7 @@ class AuroFloatingUI {
3057
3057
  document.expandedAuroFormkitDropdown = null;
3058
3058
  document.expandedAuroFloater = this;
3059
3059
  } else {
3060
- this.hideBib("click");
3060
+ this.hideBib();
3061
3061
  }
3062
3062
  }
3063
3063
  };
@@ -3070,7 +3070,7 @@ class AuroFloatingUI {
3070
3070
  // if something else is open, let it handle itself
3071
3071
  return;
3072
3072
  }
3073
- this.hideBib("keydown");
3073
+ this.hideBib();
3074
3074
  }
3075
3075
  };
3076
3076
 
@@ -3153,11 +3153,7 @@ class AuroFloatingUI {
3153
3153
  }
3154
3154
  }
3155
3155
 
3156
- /**
3157
- * Hides the floating UI element.
3158
- * @param {String} eventType - The event type that triggered the hiding action.
3159
- */
3160
- hideBib(eventType = "unknown") {
3156
+ hideBib() {
3161
3157
  if (!this.element.disabled && !this.element.noToggle) {
3162
3158
  this.lockScroll(false);
3163
3159
  this.element.triggerChevron?.removeAttribute('data-expanded');
@@ -3168,7 +3164,7 @@ class AuroFloatingUI {
3168
3164
  if (this.showing) {
3169
3165
  this.cleanupHideHandlers();
3170
3166
  this.showing = false;
3171
- this.dispatchEventDropdownToggle(eventType);
3167
+ this.dispatchEventDropdownToggle();
3172
3168
  }
3173
3169
  }
3174
3170
  document.expandedAuroFloater = null;
@@ -3177,13 +3173,11 @@ class AuroFloatingUI {
3177
3173
  /**
3178
3174
  * @private
3179
3175
  * @returns {void} Dispatches event with an object showing the state of the dropdown.
3180
- * @param {String} eventType - The event type that triggered the toggle action.
3181
3176
  */
3182
- dispatchEventDropdownToggle(eventType) {
3177
+ dispatchEventDropdownToggle() {
3183
3178
  const event = new CustomEvent(this.eventPrefix ? `${this.eventPrefix}-toggled` : 'toggled', {
3184
3179
  detail: {
3185
3180
  expanded: this.showing,
3186
- eventType: eventType || "unknown",
3187
3181
  },
3188
3182
  composed: true
3189
3183
  });
@@ -3193,7 +3187,7 @@ class AuroFloatingUI {
3193
3187
 
3194
3188
  handleClick() {
3195
3189
  if (this.element.isPopoverVisible) {
3196
- this.hideBib("click");
3190
+ this.hideBib();
3197
3191
  } else {
3198
3192
  this.showBib();
3199
3193
  }
@@ -3229,7 +3223,7 @@ class AuroFloatingUI {
3229
3223
  break;
3230
3224
  case 'mouseleave':
3231
3225
  if (this.element.hoverToggle) {
3232
- this.hideBib("mouseleave");
3226
+ this.hideBib();
3233
3227
  }
3234
3228
  break;
3235
3229
  case 'focus':
@@ -4617,9 +4611,6 @@ class AuroDropdown extends AuroElement$3 {
4617
4611
 
4618
4612
  this.parentBorder = false;
4619
4613
 
4620
- /** @private */
4621
- this.handleDropdownToggle = this.handleDropdownToggle.bind(this);
4622
-
4623
4614
  this.privateDefaults();
4624
4615
  }
4625
4616
 
@@ -5053,19 +5044,12 @@ class AuroDropdown extends AuroElement$3 {
5053
5044
  if (changedProperties.size === 0 || changedProperties.has('isPopoverVisible')) {
5054
5045
  this.handleTriggerContentSlotChange();
5055
5046
  }
5056
- }
5057
5047
 
5058
- /**
5059
- * Handles the custom event `auroDropdown-toggled` to update the visibility of the dropdown bib.
5060
- * @private
5061
- * @param {CustomEvent} event - The custom event that contains the dropdown toggle information.
5062
- */
5063
- handleDropdownToggle(event) {
5064
- this.updateFocusTrap();
5065
- this.isPopoverVisible = event.detail.expanded;
5066
- const eventType = event.detail.eventType || "unknown";
5067
- if (!this.isPopoverVisible && this.hasFocus && eventType === "keydown") {
5068
- this.trigger.focus();
5048
+ if (changedProperties.has('isPopoverVisible')) {
5049
+ this.updateFocusTrap();
5050
+ if (!this.isPopoverVisible && this.hasFocus) {
5051
+ this.trigger.focus();
5052
+ }
5069
5053
  }
5070
5054
  }
5071
5055
 
@@ -5073,7 +5057,6 @@ class AuroDropdown extends AuroElement$3 {
5073
5057
 
5074
5058
  // Configure the floater to, this will generate the ID for the bib
5075
5059
  this.floater.configure(this, 'auroDropdown');
5076
- this.addEventListener('auroDropdown-toggled', this.handleDropdownToggle);
5077
5060
 
5078
5061
  /**
5079
5062
  * @description Let subscribers know that the dropdown ID ha been generated and added.
package/components/select/demo/index.html CHANGED
@@ -16,24 +16,19 @@
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 Demo | auro-select</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-select'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 -->
19
+ <title>Auro Web Component Generator | auro-select 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">
34
27
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
35
28
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/elementDemoStyles.css" />
36
- </head>
29
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/essentials-as.css" />
30
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-icon@8.0.3/dist/auro-icon__bundled.js" type="module"></script>
31
+ </head>
37
32
  <body class="auro-markdown">
38
33
  <main></main>
39
34
 
package/components/select/demo/index.min.js CHANGED
@@ -2940,7 +2940,7 @@ class AuroFloatingUI {
2940
2940
  return;
2941
2941
  }
2942
2942
 
2943
- this.hideBib("keydown");
2943
+ this.hideBib();
2944
2944
  }
2945
2945
 
2946
2946
  setupHideHandlers() {
@@ -2965,7 +2965,7 @@ class AuroFloatingUI {
2965
2965
  document.expandedAuroFormkitDropdown = null;
2966
2966
  document.expandedAuroFloater = this;
2967
2967
  } else {
2968
- this.hideBib("click");
2968
+ this.hideBib();
2969
2969
  }
2970
2970
  }
2971
2971
  };
@@ -2978,7 +2978,7 @@ class AuroFloatingUI {
2978
2978
  // if something else is open, let it handle itself
2979
2979
  return;
2980
2980
  }
2981
- this.hideBib("keydown");
2981
+ this.hideBib();
2982
2982
  }
2983
2983
  };
2984
2984
 
@@ -3061,11 +3061,7 @@ class AuroFloatingUI {
3061
3061
  }
3062
3062
  }
3063
3063
 
3064
- /**
3065
- * Hides the floating UI element.
3066
- * @param {String} eventType - The event type that triggered the hiding action.
3067
- */
3068
- hideBib(eventType = "unknown") {
3064
+ hideBib() {
3069
3065
  if (!this.element.disabled && !this.element.noToggle) {
3070
3066
  this.lockScroll(false);
3071
3067
  this.element.triggerChevron?.removeAttribute('data-expanded');
@@ -3076,7 +3072,7 @@ class AuroFloatingUI {
3076
3072
  if (this.showing) {
3077
3073
  this.cleanupHideHandlers();
3078
3074
  this.showing = false;
3079
- this.dispatchEventDropdownToggle(eventType);
3075
+ this.dispatchEventDropdownToggle();
3080
3076
  }
3081
3077
  }
3082
3078
  document.expandedAuroFloater = null;
@@ -3085,13 +3081,11 @@ class AuroFloatingUI {
3085
3081
  /**
3086
3082
  * @private
3087
3083
  * @returns {void} Dispatches event with an object showing the state of the dropdown.
3088
- * @param {String} eventType - The event type that triggered the toggle action.
3089
3084
  */
3090
- dispatchEventDropdownToggle(eventType) {
3085
+ dispatchEventDropdownToggle() {
3091
3086
  const event = new CustomEvent(this.eventPrefix ? `${this.eventPrefix}-toggled` : 'toggled', {
3092
3087
  detail: {
3093
3088
  expanded: this.showing,
3094
- eventType: eventType || "unknown",
3095
3089
  },
3096
3090
  composed: true
3097
3091
  });
@@ -3101,7 +3095,7 @@ class AuroFloatingUI {
3101
3095
 
3102
3096
  handleClick() {
3103
3097
  if (this.element.isPopoverVisible) {
3104
- this.hideBib("click");
3098
+ this.hideBib();
3105
3099
  } else {
3106
3100
  this.showBib();
3107
3101
  }
@@ -3137,7 +3131,7 @@ class AuroFloatingUI {
3137
3131
  break;
3138
3132
  case 'mouseleave':
3139
3133
  if (this.element.hoverToggle) {
3140
- this.hideBib("mouseleave");
3134
+ this.hideBib();
3141
3135
  }
3142
3136
  break;
3143
3137
  case 'focus':
@@ -4525,9 +4519,6 @@ class AuroDropdown extends AuroElement$3 {
4525
4519
 
4526
4520
  this.parentBorder = false;
4527
4521
 
4528
- /** @private */
4529
- this.handleDropdownToggle = this.handleDropdownToggle.bind(this);
4530
-
4531
4522
  this.privateDefaults();
4532
4523
  }
4533
4524
 
@@ -4961,19 +4952,12 @@ class AuroDropdown extends AuroElement$3 {
4961
4952
  if (changedProperties.size === 0 || changedProperties.has('isPopoverVisible')) {
4962
4953
  this.handleTriggerContentSlotChange();
4963
4954
  }
4964
- }
4965
4955
 
4966
- /**
4967
- * Handles the custom event `auroDropdown-toggled` to update the visibility of the dropdown bib.
4968
- * @private
4969
- * @param {CustomEvent} event - The custom event that contains the dropdown toggle information.
4970
- */
4971
- handleDropdownToggle(event) {
4972
- this.updateFocusTrap();
4973
- this.isPopoverVisible = event.detail.expanded;
4974
- const eventType = event.detail.eventType || "unknown";
4975
- if (!this.isPopoverVisible && this.hasFocus && eventType === "keydown") {
4976
- this.trigger.focus();
4956
+ if (changedProperties.has('isPopoverVisible')) {
4957
+ this.updateFocusTrap();
4958
+ if (!this.isPopoverVisible && this.hasFocus) {
4959
+ this.trigger.focus();
4960
+ }
4977
4961
  }
4978
4962
  }
4979
4963
 
@@ -4981,7 +4965,6 @@ class AuroDropdown extends AuroElement$3 {
4981
4965
 
4982
4966
  // Configure the floater to, this will generate the ID for the bib
4983
4967
  this.floater.configure(this, 'auroDropdown');
4984
- this.addEventListener('auroDropdown-toggled', this.handleDropdownToggle);
4985
4968
 
4986
4969
  /**
4987
4970
  * @description Let subscribers know that the dropdown ID ha been generated and added.
package/components/select/demo/readme.html CHANGED
@@ -16,24 +16,17 @@
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 Demo | auro-select</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-select'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 -->
19
+ <title>Auro Web Component Generator | auro-select 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">
34
27
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
35
28
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/elementDemoStyles.css" />
36
- </head>
29
+ </head>
37
30
  <body class="auro-markdown">
38
31
  <main></main>
39
32
 
package/components/select/dist/index.js CHANGED
@@ -2894,7 +2894,7 @@ class AuroFloatingUI {
2894
2894
  return;
2895
2895
  }
2896
2896
 
2897
- this.hideBib("keydown");
2897
+ this.hideBib();
2898
2898
  }
2899
2899
 
2900
2900
  setupHideHandlers() {
@@ -2919,7 +2919,7 @@ class AuroFloatingUI {
2919
2919
  document.expandedAuroFormkitDropdown = null;
2920
2920
  document.expandedAuroFloater = this;
2921
2921
  } else {
2922
- this.hideBib("click");
2922
+ this.hideBib();
2923
2923
  }
2924
2924
  }
2925
2925
  };
@@ -2932,7 +2932,7 @@ class AuroFloatingUI {
2932
2932
  // if something else is open, let it handle itself
2933
2933
  return;
2934
2934
  }
2935
- this.hideBib("keydown");
2935
+ this.hideBib();
2936
2936
  }
2937
2937
  };
2938
2938
 
@@ -3015,11 +3015,7 @@ class AuroFloatingUI {
3015
3015
  }
3016
3016
  }
3017
3017
 
3018
- /**
3019
- * Hides the floating UI element.
3020
- * @param {String} eventType - The event type that triggered the hiding action.
3021
- */
3022
- hideBib(eventType = "unknown") {
3018
+ hideBib() {
3023
3019
  if (!this.element.disabled && !this.element.noToggle) {
3024
3020
  this.lockScroll(false);
3025
3021
  this.element.triggerChevron?.removeAttribute('data-expanded');
@@ -3030,7 +3026,7 @@ class AuroFloatingUI {
3030
3026
  if (this.showing) {
3031
3027
  this.cleanupHideHandlers();
3032
3028
  this.showing = false;
3033
- this.dispatchEventDropdownToggle(eventType);
3029
+ this.dispatchEventDropdownToggle();
3034
3030
  }
3035
3031
  }
3036
3032
  document.expandedAuroFloater = null;
@@ -3039,13 +3035,11 @@ class AuroFloatingUI {
3039
3035
  /**
3040
3036
  * @private
3041
3037
  * @returns {void} Dispatches event with an object showing the state of the dropdown.
3042
- * @param {String} eventType - The event type that triggered the toggle action.
3043
3038
  */
3044
- dispatchEventDropdownToggle(eventType) {
3039
+ dispatchEventDropdownToggle() {
3045
3040
  const event = new CustomEvent(this.eventPrefix ? `${this.eventPrefix}-toggled` : 'toggled', {
3046
3041
  detail: {
3047
3042
  expanded: this.showing,
3048
- eventType: eventType || "unknown",
3049
3043
  },
3050
3044
  composed: true
3051
3045
  });
@@ -3055,7 +3049,7 @@ class AuroFloatingUI {
3055
3049
 
3056
3050
  handleClick() {
3057
3051
  if (this.element.isPopoverVisible) {
3058
- this.hideBib("click");
3052
+ this.hideBib();
3059
3053
  } else {
3060
3054
  this.showBib();
3061
3055
  }
@@ -3091,7 +3085,7 @@ class AuroFloatingUI {
3091
3085
  break;
3092
3086
  case 'mouseleave':
3093
3087
  if (this.element.hoverToggle) {
3094
- this.hideBib("mouseleave");
3088
+ this.hideBib();
3095
3089
  }
3096
3090
  break;
3097
3091
  case 'focus':
@@ -4479,9 +4473,6 @@ class AuroDropdown extends AuroElement$2 {
4479
4473
 
4480
4474
  this.parentBorder = false;
4481
4475
 
4482
- /** @private */
4483
- this.handleDropdownToggle = this.handleDropdownToggle.bind(this);
4484
-
4485
4476
  this.privateDefaults();
4486
4477
  }
4487
4478
 
@@ -4915,19 +4906,12 @@ class AuroDropdown extends AuroElement$2 {
4915
4906
  if (changedProperties.size === 0 || changedProperties.has('isPopoverVisible')) {
4916
4907
  this.handleTriggerContentSlotChange();
4917
4908
  }
4918
- }
4919
4909
 
4920
- /**
4921
- * Handles the custom event `auroDropdown-toggled` to update the visibility of the dropdown bib.
4922
- * @private
4923
- * @param {CustomEvent} event - The custom event that contains the dropdown toggle information.
4924
- */
4925
- handleDropdownToggle(event) {
4926
- this.updateFocusTrap();
4927
- this.isPopoverVisible = event.detail.expanded;
4928
- const eventType = event.detail.eventType || "unknown";
4929
- if (!this.isPopoverVisible && this.hasFocus && eventType === "keydown") {
4930
- this.trigger.focus();
4910
+ if (changedProperties.has('isPopoverVisible')) {
4911
+ this.updateFocusTrap();
4912
+ if (!this.isPopoverVisible && this.hasFocus) {
4913
+ this.trigger.focus();
4914
+ }
4931
4915
  }
4932
4916
  }
4933
4917
 
@@ -4935,7 +4919,6 @@ class AuroDropdown extends AuroElement$2 {
4935
4919
 
4936
4920
  // Configure the floater to, this will generate the ID for the bib
4937
4921
  this.floater.configure(this, 'auroDropdown');
4938
- this.addEventListener('auroDropdown-toggled', this.handleDropdownToggle);
4939
4922
 
4940
4923
  /**
4941
4924
  * @description Let subscribers know that the dropdown ID ha been generated and added.
package/components/select/dist/registered.js CHANGED
@@ -2894,7 +2894,7 @@ class AuroFloatingUI {
2894
2894
  return;
2895
2895
  }
2896
2896
 
2897
- this.hideBib("keydown");
2897
+ this.hideBib();
2898
2898
  }
2899
2899
 
2900
2900
  setupHideHandlers() {
@@ -2919,7 +2919,7 @@ class AuroFloatingUI {
2919
2919
  document.expandedAuroFormkitDropdown = null;
2920
2920
  document.expandedAuroFloater = this;
2921
2921
  } else {
2922
- this.hideBib("click");
2922
+ this.hideBib();
2923
2923
  }
2924
2924
  }
2925
2925
  };
@@ -2932,7 +2932,7 @@ class AuroFloatingUI {
2932
2932
  // if something else is open, let it handle itself
2933
2933
  return;
2934
2934
  }
2935
- this.hideBib("keydown");
2935
+ this.hideBib();
2936
2936
  }
2937
2937
  };
2938
2938
 
@@ -3015,11 +3015,7 @@ class AuroFloatingUI {
3015
3015
  }
3016
3016
  }
3017
3017
 
3018
- /**
3019
- * Hides the floating UI element.
3020
- * @param {String} eventType - The event type that triggered the hiding action.
3021
- */
3022
- hideBib(eventType = "unknown") {
3018
+ hideBib() {
3023
3019
  if (!this.element.disabled && !this.element.noToggle) {
3024
3020
  this.lockScroll(false);
3025
3021
  this.element.triggerChevron?.removeAttribute('data-expanded');
@@ -3030,7 +3026,7 @@ class AuroFloatingUI {
3030
3026
  if (this.showing) {
3031
3027
  this.cleanupHideHandlers();
3032
3028
  this.showing = false;
3033
- this.dispatchEventDropdownToggle(eventType);
3029
+ this.dispatchEventDropdownToggle();
3034
3030
  }
3035
3031
  }
3036
3032
  document.expandedAuroFloater = null;
@@ -3039,13 +3035,11 @@ class AuroFloatingUI {
3039
3035
  /**
3040
3036
  * @private
3041
3037
  * @returns {void} Dispatches event with an object showing the state of the dropdown.
3042
- * @param {String} eventType - The event type that triggered the toggle action.
3043
3038
  */
3044
- dispatchEventDropdownToggle(eventType) {
3039
+ dispatchEventDropdownToggle() {
3045
3040
  const event = new CustomEvent(this.eventPrefix ? `${this.eventPrefix}-toggled` : 'toggled', {
3046
3041
  detail: {
3047
3042
  expanded: this.showing,
3048
- eventType: eventType || "unknown",
3049
3043
  },
3050
3044
  composed: true
3051
3045
  });
@@ -3055,7 +3049,7 @@ class AuroFloatingUI {
3055
3049
 
3056
3050
  handleClick() {
3057
3051
  if (this.element.isPopoverVisible) {
3058
- this.hideBib("click");
3052
+ this.hideBib();
3059
3053
  } else {
3060
3054
  this.showBib();
3061
3055
  }
@@ -3091,7 +3085,7 @@ class AuroFloatingUI {
3091
3085
  break;
3092
3086
  case 'mouseleave':
3093
3087
  if (this.element.hoverToggle) {
3094
- this.hideBib("mouseleave");
3088
+ this.hideBib();
3095
3089
  }
3096
3090
  break;
3097
3091
  case 'focus':
@@ -4479,9 +4473,6 @@ class AuroDropdown extends AuroElement$2 {
4479
4473
 
4480
4474
  this.parentBorder = false;
4481
4475
 
4482
- /** @private */
4483
- this.handleDropdownToggle = this.handleDropdownToggle.bind(this);
4484
-
4485
4476
  this.privateDefaults();
4486
4477
  }
4487
4478
 
@@ -4915,19 +4906,12 @@ class AuroDropdown extends AuroElement$2 {
4915
4906
  if (changedProperties.size === 0 || changedProperties.has('isPopoverVisible')) {
4916
4907
  this.handleTriggerContentSlotChange();
4917
4908
  }
4918
- }
4919
4909
 
4920
- /**
4921
- * Handles the custom event `auroDropdown-toggled` to update the visibility of the dropdown bib.
4922
- * @private
4923
- * @param {CustomEvent} event - The custom event that contains the dropdown toggle information.
4924
- */
4925
- handleDropdownToggle(event) {
4926
- this.updateFocusTrap();
4927
- this.isPopoverVisible = event.detail.expanded;
4928
- const eventType = event.detail.eventType || "unknown";
4929
- if (!this.isPopoverVisible && this.hasFocus && eventType === "keydown") {
4930
- this.trigger.focus();
4910
+ if (changedProperties.has('isPopoverVisible')) {
4911
+ this.updateFocusTrap();
4912
+ if (!this.isPopoverVisible && this.hasFocus) {
4913
+ this.trigger.focus();
4914
+ }
4931
4915
  }
4932
4916
  }
4933
4917
 
@@ -4935,7 +4919,6 @@ class AuroDropdown extends AuroElement$2 {
4935
4919
 
4936
4920
  // Configure the floater to, this will generate the ID for the bib
4937
4921
  this.floater.configure(this, 'auroDropdown');
4938
- this.addEventListener('auroDropdown-toggled', this.handleDropdownToggle);
4939
4922
 
4940
4923
  /**
4941
4924
  * @description Let subscribers know that the dropdown ID ha been generated and added.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@aurodesignsystem-dev/auro-formkit",
3
- "version": "0.0.0-pr783.1",
3
+ "version": "0.0.0-pr785.0",
4
4
  "description": "A collection of web components used to build forms.",
5
5
  "homepage": "https://github.com/AlaskaAirlines/auro-formkit#readme",
6
6
  "bugs": {
@@ -49,11 +49,10 @@
49
49
  "sweep": "find ./components ./packages -type d -name 'dist' -exec rm -rf {} + && find ./ -type d -name '.turbo' -exec rm -rf {} + && find ./components ./packages -not -path '*/node_modules/*' -type f \\( -name '*.css' -o -name '*-css.js' \\) -delete",
50
50
  "preCommit": "node ./node_modules/@aurodesignsystem/auro-library/scripts/build/pre-commit.mjs",
51
51
  "prepare": "husky",
52
- "deploy-demo": "npm run build && sh ./deploy-components.sh",
53
- "local-demo": "npm run build && sh ./local-demo.sh --zip"
52
+ "deploy-demo": "npm run build && sh ./deploy-components.sh"
54
53
  },
55
54
  "dependencies": {
56
- "@aurodesignsystem/auro-library": "^5.3.0",
55
+ "@aurodesignsystem/auro-library": "^5.2.3",
57
56
  "@lit/reactive-element": "^2.1.0",
58
57
  "lit": "^3.2.1"
59
58
  },