@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/dropdown/demo/api.min.js CHANGED
@@ -1973,7 +1973,7 @@ class AuroFloatingUI {
1973
1973
  return;
1974
1974
  }
1975
1975
 
1976
- this.hideBib("keydown");
1976
+ this.hideBib();
1977
1977
  }
1978
1978
 
1979
1979
  setupHideHandlers() {
@@ -1998,7 +1998,7 @@ class AuroFloatingUI {
1998
1998
  document.expandedAuroFormkitDropdown = null;
1999
1999
  document.expandedAuroFloater = this;
2000
2000
  } else {
2001
- this.hideBib("click");
2001
+ this.hideBib();
2002
2002
  }
2003
2003
  }
2004
2004
  };
@@ -2011,7 +2011,7 @@ class AuroFloatingUI {
2011
2011
  // if something else is open, let it handle itself
2012
2012
  return;
2013
2013
  }
2014
- this.hideBib("keydown");
2014
+ this.hideBib();
2015
2015
  }
2016
2016
  };
2017
2017
 
@@ -2094,11 +2094,7 @@ class AuroFloatingUI {
2094
2094
  }
2095
2095
  }
2096
2096
 
2097
- /**
2098
- * Hides the floating UI element.
2099
- * @param {String} eventType - The event type that triggered the hiding action.
2100
- */
2101
- hideBib(eventType = "unknown") {
2097
+ hideBib() {
2102
2098
  if (!this.element.disabled && !this.element.noToggle) {
2103
2099
  this.lockScroll(false);
2104
2100
  this.element.triggerChevron?.removeAttribute('data-expanded');
@@ -2109,7 +2105,7 @@ class AuroFloatingUI {
2109
2105
  if (this.showing) {
2110
2106
  this.cleanupHideHandlers();
2111
2107
  this.showing = false;
2112
- this.dispatchEventDropdownToggle(eventType);
2108
+ this.dispatchEventDropdownToggle();
2113
2109
  }
2114
2110
  }
2115
2111
  document.expandedAuroFloater = null;
@@ -2118,13 +2114,11 @@ class AuroFloatingUI {
2118
2114
  /**
2119
2115
  * @private
2120
2116
  * @returns {void} Dispatches event with an object showing the state of the dropdown.
2121
- * @param {String} eventType - The event type that triggered the toggle action.
2122
2117
  */
2123
- dispatchEventDropdownToggle(eventType) {
2118
+ dispatchEventDropdownToggle() {
2124
2119
  const event = new CustomEvent(this.eventPrefix ? `${this.eventPrefix}-toggled` : 'toggled', {
2125
2120
  detail: {
2126
2121
  expanded: this.showing,
2127
- eventType: eventType || "unknown",
2128
2122
  },
2129
2123
  composed: true
2130
2124
  });
@@ -2134,7 +2128,7 @@ class AuroFloatingUI {
2134
2128
 
2135
2129
  handleClick() {
2136
2130
  if (this.element.isPopoverVisible) {
2137
- this.hideBib("click");
2131
+ this.hideBib();
2138
2132
  } else {
2139
2133
  this.showBib();
2140
2134
  }
@@ -2170,7 +2164,7 @@ class AuroFloatingUI {
2170
2164
  break;
2171
2165
  case 'mouseleave':
2172
2166
  if (this.element.hoverToggle) {
2173
- this.hideBib("mouseleave");
2167
+ this.hideBib();
2174
2168
  }
2175
2169
  break;
2176
2170
  case 'focus':
@@ -3564,9 +3558,6 @@ class AuroDropdown extends AuroElement {
3564
3558
 
3565
3559
  this.parentBorder = false;
3566
3560
 
3567
- /** @private */
3568
- this.handleDropdownToggle = this.handleDropdownToggle.bind(this);
3569
-
3570
3561
  this.privateDefaults();
3571
3562
  }
3572
3563
 
@@ -4000,19 +3991,12 @@ class AuroDropdown extends AuroElement {
4000
3991
  if (changedProperties.size === 0 || changedProperties.has('isPopoverVisible')) {
4001
3992
  this.handleTriggerContentSlotChange();
4002
3993
  }
4003
- }
4004
3994
 
4005
- /**
4006
- * Handles the custom event `auroDropdown-toggled` to update the visibility of the dropdown bib.
4007
- * @private
4008
- * @param {CustomEvent} event - The custom event that contains the dropdown toggle information.
4009
- */
4010
- handleDropdownToggle(event) {
4011
- this.updateFocusTrap();
4012
- this.isPopoverVisible = event.detail.expanded;
4013
- const eventType = event.detail.eventType || "unknown";
4014
- if (!this.isPopoverVisible && this.hasFocus && eventType === "keydown") {
4015
- this.trigger.focus();
3995
+ if (changedProperties.has('isPopoverVisible')) {
3996
+ this.updateFocusTrap();
3997
+ if (!this.isPopoverVisible && this.hasFocus) {
3998
+ this.trigger.focus();
3999
+ }
4016
4000
  }
4017
4001
  }
4018
4002
 
@@ -4020,7 +4004,6 @@ class AuroDropdown extends AuroElement {
4020
4004
 
4021
4005
  // Configure the floater to, this will generate the ID for the bib
4022
4006
  this.floater.configure(this, 'auroDropdown');
4023
- this.addEventListener('auroDropdown-toggled', this.handleDropdownToggle);
4024
4007
 
4025
4008
  /**
4026
4009
  * @description Let subscribers know that the dropdown ID ha been generated and added.
package/components/dropdown/demo/index.html CHANGED
@@ -16,24 +16,18 @@
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-dropdown</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-dropdown'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-dropdown 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
+ </head>
37
31
  <body class="auro-markdown">
38
32
  <main></main>
39
33
 
package/components/dropdown/demo/index.min.js CHANGED
@@ -1948,7 +1948,7 @@ class AuroFloatingUI {
1948
1948
  return;
1949
1949
  }
1950
1950
 
1951
- this.hideBib("keydown");
1951
+ this.hideBib();
1952
1952
  }
1953
1953
 
1954
1954
  setupHideHandlers() {
@@ -1973,7 +1973,7 @@ class AuroFloatingUI {
1973
1973
  document.expandedAuroFormkitDropdown = null;
1974
1974
  document.expandedAuroFloater = this;
1975
1975
  } else {
1976
- this.hideBib("click");
1976
+ this.hideBib();
1977
1977
  }
1978
1978
  }
1979
1979
  };
@@ -1986,7 +1986,7 @@ class AuroFloatingUI {
1986
1986
  // if something else is open, let it handle itself
1987
1987
  return;
1988
1988
  }
1989
- this.hideBib("keydown");
1989
+ this.hideBib();
1990
1990
  }
1991
1991
  };
1992
1992
 
@@ -2069,11 +2069,7 @@ class AuroFloatingUI {
2069
2069
  }
2070
2070
  }
2071
2071
 
2072
- /**
2073
- * Hides the floating UI element.
2074
- * @param {String} eventType - The event type that triggered the hiding action.
2075
- */
2076
- hideBib(eventType = "unknown") {
2072
+ hideBib() {
2077
2073
  if (!this.element.disabled && !this.element.noToggle) {
2078
2074
  this.lockScroll(false);
2079
2075
  this.element.triggerChevron?.removeAttribute('data-expanded');
@@ -2084,7 +2080,7 @@ class AuroFloatingUI {
2084
2080
  if (this.showing) {
2085
2081
  this.cleanupHideHandlers();
2086
2082
  this.showing = false;
2087
- this.dispatchEventDropdownToggle(eventType);
2083
+ this.dispatchEventDropdownToggle();
2088
2084
  }
2089
2085
  }
2090
2086
  document.expandedAuroFloater = null;
@@ -2093,13 +2089,11 @@ class AuroFloatingUI {
2093
2089
  /**
2094
2090
  * @private
2095
2091
  * @returns {void} Dispatches event with an object showing the state of the dropdown.
2096
- * @param {String} eventType - The event type that triggered the toggle action.
2097
2092
  */
2098
- dispatchEventDropdownToggle(eventType) {
2093
+ dispatchEventDropdownToggle() {
2099
2094
  const event = new CustomEvent(this.eventPrefix ? `${this.eventPrefix}-toggled` : 'toggled', {
2100
2095
  detail: {
2101
2096
  expanded: this.showing,
2102
- eventType: eventType || "unknown",
2103
2097
  },
2104
2098
  composed: true
2105
2099
  });
@@ -2109,7 +2103,7 @@ class AuroFloatingUI {
2109
2103
 
2110
2104
  handleClick() {
2111
2105
  if (this.element.isPopoverVisible) {
2112
- this.hideBib("click");
2106
+ this.hideBib();
2113
2107
  } else {
2114
2108
  this.showBib();
2115
2109
  }
@@ -2145,7 +2139,7 @@ class AuroFloatingUI {
2145
2139
  break;
2146
2140
  case 'mouseleave':
2147
2141
  if (this.element.hoverToggle) {
2148
- this.hideBib("mouseleave");
2142
+ this.hideBib();
2149
2143
  }
2150
2144
  break;
2151
2145
  case 'focus':
@@ -3539,9 +3533,6 @@ class AuroDropdown extends AuroElement {
3539
3533
 
3540
3534
  this.parentBorder = false;
3541
3535
 
3542
- /** @private */
3543
- this.handleDropdownToggle = this.handleDropdownToggle.bind(this);
3544
-
3545
3536
  this.privateDefaults();
3546
3537
  }
3547
3538
 
@@ -3975,19 +3966,12 @@ class AuroDropdown extends AuroElement {
3975
3966
  if (changedProperties.size === 0 || changedProperties.has('isPopoverVisible')) {
3976
3967
  this.handleTriggerContentSlotChange();
3977
3968
  }
3978
- }
3979
3969
 
3980
- /**
3981
- * Handles the custom event `auroDropdown-toggled` to update the visibility of the dropdown bib.
3982
- * @private
3983
- * @param {CustomEvent} event - The custom event that contains the dropdown toggle information.
3984
- */
3985
- handleDropdownToggle(event) {
3986
- this.updateFocusTrap();
3987
- this.isPopoverVisible = event.detail.expanded;
3988
- const eventType = event.detail.eventType || "unknown";
3989
- if (!this.isPopoverVisible && this.hasFocus && eventType === "keydown") {
3990
- this.trigger.focus();
3970
+ if (changedProperties.has('isPopoverVisible')) {
3971
+ this.updateFocusTrap();
3972
+ if (!this.isPopoverVisible && this.hasFocus) {
3973
+ this.trigger.focus();
3974
+ }
3991
3975
  }
3992
3976
  }
3993
3977
 
@@ -3995,7 +3979,6 @@ class AuroDropdown extends AuroElement {
3995
3979
 
3996
3980
  // Configure the floater to, this will generate the ID for the bib
3997
3981
  this.floater.configure(this, 'auroDropdown');
3998
- this.addEventListener('auroDropdown-toggled', this.handleDropdownToggle);
3999
3982
 
4000
3983
  /**
4001
3984
  * @description Let subscribers know that the dropdown ID ha been generated and added.
package/components/dropdown/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-dropdown</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-dropdown'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-dropdown 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/dropdown/dist/auro-dropdown.d.ts CHANGED
@@ -220,12 +220,6 @@ export class AuroDropdown extends AuroElement {
220
220
  shape: any;
221
221
  size: any;
222
222
  parentBorder: boolean;
223
- /**
224
- * Handles the custom event `auroDropdown-toggled` to update the visibility of the dropdown bib.
225
- * @private
226
- * @param {CustomEvent} event - The custom event that contains the dropdown toggle information.
227
- */
228
- private handleDropdownToggle;
229
223
  /**
230
224
  * @private
231
225
  * @returns {object} Class definition for the wrapper element.
package/components/dropdown/dist/index.js CHANGED
@@ -1907,7 +1907,7 @@ class AuroFloatingUI {
1907
1907
  return;
1908
1908
  }
1909
1909
 
1910
- this.hideBib("keydown");
1910
+ this.hideBib();
1911
1911
  }
1912
1912
 
1913
1913
  setupHideHandlers() {
@@ -1932,7 +1932,7 @@ class AuroFloatingUI {
1932
1932
  document.expandedAuroFormkitDropdown = null;
1933
1933
  document.expandedAuroFloater = this;
1934
1934
  } else {
1935
- this.hideBib("click");
1935
+ this.hideBib();
1936
1936
  }
1937
1937
  }
1938
1938
  };
@@ -1945,7 +1945,7 @@ class AuroFloatingUI {
1945
1945
  // if something else is open, let it handle itself
1946
1946
  return;
1947
1947
  }
1948
- this.hideBib("keydown");
1948
+ this.hideBib();
1949
1949
  }
1950
1950
  };
1951
1951
 
@@ -2028,11 +2028,7 @@ class AuroFloatingUI {
2028
2028
  }
2029
2029
  }
2030
2030
 
2031
- /**
2032
- * Hides the floating UI element.
2033
- * @param {String} eventType - The event type that triggered the hiding action.
2034
- */
2035
- hideBib(eventType = "unknown") {
2031
+ hideBib() {
2036
2032
  if (!this.element.disabled && !this.element.noToggle) {
2037
2033
  this.lockScroll(false);
2038
2034
  this.element.triggerChevron?.removeAttribute('data-expanded');
@@ -2043,7 +2039,7 @@ class AuroFloatingUI {
2043
2039
  if (this.showing) {
2044
2040
  this.cleanupHideHandlers();
2045
2041
  this.showing = false;
2046
- this.dispatchEventDropdownToggle(eventType);
2042
+ this.dispatchEventDropdownToggle();
2047
2043
  }
2048
2044
  }
2049
2045
  document.expandedAuroFloater = null;
@@ -2052,13 +2048,11 @@ class AuroFloatingUI {
2052
2048
  /**
2053
2049
  * @private
2054
2050
  * @returns {void} Dispatches event with an object showing the state of the dropdown.
2055
- * @param {String} eventType - The event type that triggered the toggle action.
2056
2051
  */
2057
- dispatchEventDropdownToggle(eventType) {
2052
+ dispatchEventDropdownToggle() {
2058
2053
  const event = new CustomEvent(this.eventPrefix ? `${this.eventPrefix}-toggled` : 'toggled', {
2059
2054
  detail: {
2060
2055
  expanded: this.showing,
2061
- eventType: eventType || "unknown",
2062
2056
  },
2063
2057
  composed: true
2064
2058
  });
@@ -2068,7 +2062,7 @@ class AuroFloatingUI {
2068
2062
 
2069
2063
  handleClick() {
2070
2064
  if (this.element.isPopoverVisible) {
2071
- this.hideBib("click");
2065
+ this.hideBib();
2072
2066
  } else {
2073
2067
  this.showBib();
2074
2068
  }
@@ -2104,7 +2098,7 @@ class AuroFloatingUI {
2104
2098
  break;
2105
2099
  case 'mouseleave':
2106
2100
  if (this.element.hoverToggle) {
2107
- this.hideBib("mouseleave");
2101
+ this.hideBib();
2108
2102
  }
2109
2103
  break;
2110
2104
  case 'focus':
@@ -3492,9 +3486,6 @@ class AuroDropdown extends AuroElement {
3492
3486
 
3493
3487
  this.parentBorder = false;
3494
3488
 
3495
- /** @private */
3496
- this.handleDropdownToggle = this.handleDropdownToggle.bind(this);
3497
-
3498
3489
  this.privateDefaults();
3499
3490
  }
3500
3491
 
@@ -3928,19 +3919,12 @@ class AuroDropdown extends AuroElement {
3928
3919
  if (changedProperties.size === 0 || changedProperties.has('isPopoverVisible')) {
3929
3920
  this.handleTriggerContentSlotChange();
3930
3921
  }
3931
- }
3932
3922
 
3933
- /**
3934
- * Handles the custom event `auroDropdown-toggled` to update the visibility of the dropdown bib.
3935
- * @private
3936
- * @param {CustomEvent} event - The custom event that contains the dropdown toggle information.
3937
- */
3938
- handleDropdownToggle(event) {
3939
- this.updateFocusTrap();
3940
- this.isPopoverVisible = event.detail.expanded;
3941
- const eventType = event.detail.eventType || "unknown";
3942
- if (!this.isPopoverVisible && this.hasFocus && eventType === "keydown") {
3943
- this.trigger.focus();
3923
+ if (changedProperties.has('isPopoverVisible')) {
3924
+ this.updateFocusTrap();
3925
+ if (!this.isPopoverVisible && this.hasFocus) {
3926
+ this.trigger.focus();
3927
+ }
3944
3928
  }
3945
3929
  }
3946
3930
 
@@ -3948,7 +3932,6 @@ class AuroDropdown extends AuroElement {
3948
3932
 
3949
3933
  // Configure the floater to, this will generate the ID for the bib
3950
3934
  this.floater.configure(this, 'auroDropdown');
3951
- this.addEventListener('auroDropdown-toggled', this.handleDropdownToggle);
3952
3935
 
3953
3936
  /**
3954
3937
  * @description Let subscribers know that the dropdown ID ha been generated and added.
package/components/dropdown/dist/registered.js CHANGED
@@ -1907,7 +1907,7 @@ class AuroFloatingUI {
1907
1907
  return;
1908
1908
  }
1909
1909
 
1910
- this.hideBib("keydown");
1910
+ this.hideBib();
1911
1911
  }
1912
1912
 
1913
1913
  setupHideHandlers() {
@@ -1932,7 +1932,7 @@ class AuroFloatingUI {
1932
1932
  document.expandedAuroFormkitDropdown = null;
1933
1933
  document.expandedAuroFloater = this;
1934
1934
  } else {
1935
- this.hideBib("click");
1935
+ this.hideBib();
1936
1936
  }
1937
1937
  }
1938
1938
  };
@@ -1945,7 +1945,7 @@ class AuroFloatingUI {
1945
1945
  // if something else is open, let it handle itself
1946
1946
  return;
1947
1947
  }
1948
- this.hideBib("keydown");
1948
+ this.hideBib();
1949
1949
  }
1950
1950
  };
1951
1951
 
@@ -2028,11 +2028,7 @@ class AuroFloatingUI {
2028
2028
  }
2029
2029
  }
2030
2030
 
2031
- /**
2032
- * Hides the floating UI element.
2033
- * @param {String} eventType - The event type that triggered the hiding action.
2034
- */
2035
- hideBib(eventType = "unknown") {
2031
+ hideBib() {
2036
2032
  if (!this.element.disabled && !this.element.noToggle) {
2037
2033
  this.lockScroll(false);
2038
2034
  this.element.triggerChevron?.removeAttribute('data-expanded');
@@ -2043,7 +2039,7 @@ class AuroFloatingUI {
2043
2039
  if (this.showing) {
2044
2040
  this.cleanupHideHandlers();
2045
2041
  this.showing = false;
2046
- this.dispatchEventDropdownToggle(eventType);
2042
+ this.dispatchEventDropdownToggle();
2047
2043
  }
2048
2044
  }
2049
2045
  document.expandedAuroFloater = null;
@@ -2052,13 +2048,11 @@ class AuroFloatingUI {
2052
2048
  /**
2053
2049
  * @private
2054
2050
  * @returns {void} Dispatches event with an object showing the state of the dropdown.
2055
- * @param {String} eventType - The event type that triggered the toggle action.
2056
2051
  */
2057
- dispatchEventDropdownToggle(eventType) {
2052
+ dispatchEventDropdownToggle() {
2058
2053
  const event = new CustomEvent(this.eventPrefix ? `${this.eventPrefix}-toggled` : 'toggled', {
2059
2054
  detail: {
2060
2055
  expanded: this.showing,
2061
- eventType: eventType || "unknown",
2062
2056
  },
2063
2057
  composed: true
2064
2058
  });
@@ -2068,7 +2062,7 @@ class AuroFloatingUI {
2068
2062
 
2069
2063
  handleClick() {
2070
2064
  if (this.element.isPopoverVisible) {
2071
- this.hideBib("click");
2065
+ this.hideBib();
2072
2066
  } else {
2073
2067
  this.showBib();
2074
2068
  }
@@ -2104,7 +2098,7 @@ class AuroFloatingUI {
2104
2098
  break;
2105
2099
  case 'mouseleave':
2106
2100
  if (this.element.hoverToggle) {
2107
- this.hideBib("mouseleave");
2101
+ this.hideBib();
2108
2102
  }
2109
2103
  break;
2110
2104
  case 'focus':
@@ -3492,9 +3486,6 @@ class AuroDropdown extends AuroElement {
3492
3486
 
3493
3487
  this.parentBorder = false;
3494
3488
 
3495
- /** @private */
3496
- this.handleDropdownToggle = this.handleDropdownToggle.bind(this);
3497
-
3498
3489
  this.privateDefaults();
3499
3490
  }
3500
3491
 
@@ -3928,19 +3919,12 @@ class AuroDropdown extends AuroElement {
3928
3919
  if (changedProperties.size === 0 || changedProperties.has('isPopoverVisible')) {
3929
3920
  this.handleTriggerContentSlotChange();
3930
3921
  }
3931
- }
3932
3922
 
3933
- /**
3934
- * Handles the custom event `auroDropdown-toggled` to update the visibility of the dropdown bib.
3935
- * @private
3936
- * @param {CustomEvent} event - The custom event that contains the dropdown toggle information.
3937
- */
3938
- handleDropdownToggle(event) {
3939
- this.updateFocusTrap();
3940
- this.isPopoverVisible = event.detail.expanded;
3941
- const eventType = event.detail.eventType || "unknown";
3942
- if (!this.isPopoverVisible && this.hasFocus && eventType === "keydown") {
3943
- this.trigger.focus();
3923
+ if (changedProperties.has('isPopoverVisible')) {
3924
+ this.updateFocusTrap();
3925
+ if (!this.isPopoverVisible && this.hasFocus) {
3926
+ this.trigger.focus();
3927
+ }
3944
3928
  }
3945
3929
  }
3946
3930
 
@@ -3948,7 +3932,6 @@ class AuroDropdown extends AuroElement {
3948
3932
 
3949
3933
  // Configure the floater to, this will generate the ID for the bib
3950
3934
  this.floater.configure(this, 'auroDropdown');
3951
- this.addEventListener('auroDropdown-toggled', this.handleDropdownToggle);
3952
3935
 
3953
3936
  /**
3954
3937
  * @description Let subscribers know that the dropdown ID ha been generated and added.
package/components/form/demo/api.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-form</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-form'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-form 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/form/demo/autocomplete.html CHANGED
@@ -1,25 +1,9 @@
1
1
  <!doctype html>
2
2
  <html lang="en">
3
3
  <head>
4
- <meta charset="UTF-8" />
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
- <title>Auro Web Component Demo | auro-form</title>
7
-
8
- <!-- Prism.js Stylesheet -->
9
- <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/themes/prism.css"/>
10
-
11
- <!-- Legacy reference is still needed to support auro-form's use of legacy token values at this time -->
12
- <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/legacy/auro-classic/CSSCustomProperties.css"/>
13
-
14
- <!-- Design Token Alaska Theme -->
15
- <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/themes/alaska/CSSCustomProperties--alaska.min.css"/>
16
-
17
- <!-- Webcore Stylesheet Alaska Theme -->
18
- <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/themes/alaska.global.min.css" />
19
-
20
- <!-- Demo Specific Styles -->
21
- <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
22
- <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/elementDemoStyles.css" />
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1">
6
+ <title>Demo page for auto-complete</title>
23
7
  </head>
24
8
  <body>
25
9
  <!-- EVERY AUTOCOMPLETE OPTION, auro inputs -->