@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/input/demo/api.min.js CHANGED
@@ -5677,9 +5677,9 @@ class BaseInput extends AuroElement$2 {
5677
5677
  if (!this.shadowRoot.contains(this.getActiveElement())) {
5678
5678
  this.validation.validate(this);
5679
5679
  }
5680
-
5681
- this.notifyValueChanged();
5682
5680
  }
5681
+
5682
+ this.notifyValueChanged();
5683
5683
  }
5684
5684
 
5685
5685
  if (changedProperties.has('error')) {
package/components/input/demo/index.html CHANGED
@@ -3,18 +3,24 @@
3
3
  <head>
4
4
  <meta charset="UTF-8" />
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
- <title>Auro Web Component Generator | auro-input custom element</title>
7
- <link
8
- rel="stylesheet"
9
- type="text/css"
10
- href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/themes/prism.css"
11
- />
12
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/auro-classic/CSSCustomProperties.css">
13
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/alaska/CSSCustomProperties--alaska.css">
6
+ <title>Auro Web Component Demo | auro-input</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-input'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 -->
14
21
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
15
22
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/elementDemoStyles.css" />
16
- <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/essentials-as.css" />
17
- </head>
23
+ </head>
18
24
  <body class="auro-markdown">
19
25
  <main></main>
20
26
 
package/components/input/demo/index.min.js CHANGED
@@ -5602,9 +5602,9 @@ class BaseInput extends AuroElement$2 {
5602
5602
  if (!this.shadowRoot.contains(this.getActiveElement())) {
5603
5603
  this.validation.validate(this);
5604
5604
  }
5605
-
5606
- this.notifyValueChanged();
5607
5605
  }
5606
+
5607
+ this.notifyValueChanged();
5608
5608
  }
5609
5609
 
5610
5610
  if (changedProperties.has('error')) {
package/components/input/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-input 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-input</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-input'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/input/dist/index.js CHANGED
@@ -5526,9 +5526,9 @@ class BaseInput extends AuroElement$2 {
5526
5526
  if (!this.shadowRoot.contains(this.getActiveElement())) {
5527
5527
  this.validation.validate(this);
5528
5528
  }
5529
-
5530
- this.notifyValueChanged();
5531
5529
  }
5530
+
5531
+ this.notifyValueChanged();
5532
5532
  }
5533
5533
 
5534
5534
  if (changedProperties.has('error')) {
package/components/input/dist/registered.js CHANGED
@@ -5526,9 +5526,9 @@ class BaseInput extends AuroElement$2 {
5526
5526
  if (!this.shadowRoot.contains(this.getActiveElement())) {
5527
5527
  this.validation.validate(this);
5528
5528
  }
5529
-
5530
- this.notifyValueChanged();
5531
5529
  }
5530
+
5531
+ this.notifyValueChanged();
5532
5532
  }
5533
5533
 
5534
5534
  if (changedProperties.has('error')) {
package/components/menu/demo/api.html CHANGED
@@ -16,40 +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-menu 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-menu</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-menu'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
- <style>
31
- header {
32
- background: lightgray;
33
- position: fixed;
34
- bottom: 0;
35
- right: 0;
36
- z-index: 10;
37
- }
38
- </style>
39
- <script>
40
- function onRadioInput(event) {
41
- if (event.constructor.name === 'CustomEvent') {
42
- const group = event.target.getAttribute('name');
43
- const menus = document.querySelectorAll('auro-menu');
44
- if (menus) {
45
- menus.forEach((menu) => {
46
- menu.setAttribute(group, event.target.value);
47
- });
48
- }
49
- };
50
- }
51
- </script>
52
- </head>
36
+ </head>
53
37
  <body class="auro-markdown">
54
38
  <header oninput="onRadioInput(event)">
55
39
  <auro-radio-group required horizontal name="shape">
package/components/menu/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-menu 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-menu</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-menu'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/menu/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-menu 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-menu</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-menu'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/radio/demo/api.html CHANGED
@@ -15,18 +15,24 @@
15
15
  <head>
16
16
  <meta charset="UTF-8" />
17
17
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
18
- <title>Auro Web Component Generator | auro-radio custom element</title>
19
- <link
20
- rel="stylesheet"
21
- type="text/css"
22
- href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/themes/prism.css"
23
- />
24
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/auro-classic/CSSCustomProperties.css">
25
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/alaska/CSSCustomProperties--alaska.css">
18
+ <title>Auro Web Component Demo | auro-radio</title>
19
+
20
+ <!-- Prism.js Stylesheet -->
21
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/themes/prism.css"/>
22
+
23
+ <!-- Legacy reference is still needed to support auro-radio's use of legacy token values at this time -->
24
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/legacy/auro-classic/CSSCustomProperties.css"/>
25
+
26
+ <!-- Design Token Alaska Theme -->
27
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/themes/alaska/CSSCustomProperties--alaska.min.css"/>
28
+
29
+ <!-- Webcore Stylesheet Alaska Theme -->
30
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/themes/alaska.global.min.css" />
31
+
32
+ <!-- Demo Specific Styles -->
26
33
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
27
34
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/elementDemoStyles.css" />
28
- <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/essentials-as.css" />
29
- </head>
35
+ </head>
30
36
  <body class="auro-markdown">
31
37
  <main></main>
32
38
 
package/components/radio/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-radio 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-radio</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-radio'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/radio/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-radio 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-radio</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-radio'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/select/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-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">
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 -->
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/select/demo/api.min.js CHANGED
@@ -3032,7 +3032,7 @@ class AuroFloatingUI {
3032
3032
  return;
3033
3033
  }
3034
3034
 
3035
- this.hideBib();
3035
+ this.hideBib("keydown");
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();
3060
+ this.hideBib("click");
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();
3073
+ this.hideBib("keydown");
3074
3074
  }
3075
3075
  };
3076
3076
 
@@ -3153,7 +3153,11 @@ class AuroFloatingUI {
3153
3153
  }
3154
3154
  }
3155
3155
 
3156
- hideBib() {
3156
+ /**
3157
+ * Hides the floating UI element.
3158
+ * @param {String} eventType - The event type that triggered the hiding action.
3159
+ */
3160
+ hideBib(eventType = "unknown") {
3157
3161
  if (!this.element.disabled && !this.element.noToggle) {
3158
3162
  this.lockScroll(false);
3159
3163
  this.element.triggerChevron?.removeAttribute('data-expanded');
@@ -3164,7 +3168,7 @@ class AuroFloatingUI {
3164
3168
  if (this.showing) {
3165
3169
  this.cleanupHideHandlers();
3166
3170
  this.showing = false;
3167
- this.dispatchEventDropdownToggle();
3171
+ this.dispatchEventDropdownToggle(eventType);
3168
3172
  }
3169
3173
  }
3170
3174
  document.expandedAuroFloater = null;
@@ -3173,11 +3177,13 @@ class AuroFloatingUI {
3173
3177
  /**
3174
3178
  * @private
3175
3179
  * @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.
3176
3181
  */
3177
- dispatchEventDropdownToggle() {
3182
+ dispatchEventDropdownToggle(eventType) {
3178
3183
  const event = new CustomEvent(this.eventPrefix ? `${this.eventPrefix}-toggled` : 'toggled', {
3179
3184
  detail: {
3180
3185
  expanded: this.showing,
3186
+ eventType: eventType || "unknown",
3181
3187
  },
3182
3188
  composed: true
3183
3189
  });
@@ -3187,7 +3193,7 @@ class AuroFloatingUI {
3187
3193
 
3188
3194
  handleClick() {
3189
3195
  if (this.element.isPopoverVisible) {
3190
- this.hideBib();
3196
+ this.hideBib("click");
3191
3197
  } else {
3192
3198
  this.showBib();
3193
3199
  }
@@ -3223,7 +3229,7 @@ class AuroFloatingUI {
3223
3229
  break;
3224
3230
  case 'mouseleave':
3225
3231
  if (this.element.hoverToggle) {
3226
- this.hideBib();
3232
+ this.hideBib("mouseleave");
3227
3233
  }
3228
3234
  break;
3229
3235
  case 'focus':
@@ -4611,6 +4617,9 @@ class AuroDropdown extends AuroElement$3 {
4611
4617
 
4612
4618
  this.parentBorder = false;
4613
4619
 
4620
+ /** @private */
4621
+ this.handleDropdownToggle = this.handleDropdownToggle.bind(this);
4622
+
4614
4623
  this.privateDefaults();
4615
4624
  }
4616
4625
 
@@ -5044,12 +5053,14 @@ class AuroDropdown extends AuroElement$3 {
5044
5053
  if (changedProperties.size === 0 || changedProperties.has('isPopoverVisible')) {
5045
5054
  this.handleTriggerContentSlotChange();
5046
5055
  }
5056
+ }
5047
5057
 
5048
- if (changedProperties.has('isPopoverVisible')) {
5049
- this.updateFocusTrap();
5050
- if (!this.isPopoverVisible && this.hasFocus) {
5051
- this.trigger.focus();
5052
- }
5058
+ handleDropdownToggle(event) {
5059
+ this.updateFocusTrap();
5060
+ this.isPopoverVisible = event.detail.expanded;
5061
+ const eventType = event.detail.eventType || "unknown";
5062
+ if (!this.isPopoverVisible && this.hasFocus && eventType === "keydown") {
5063
+ this.trigger.focus();
5053
5064
  }
5054
5065
  }
5055
5066
 
@@ -5057,6 +5068,7 @@ class AuroDropdown extends AuroElement$3 {
5057
5068
 
5058
5069
  // Configure the floater to, this will generate the ID for the bib
5059
5070
  this.floater.configure(this, 'auroDropdown');
5071
+ this.addEventListener('auroDropdown-toggled', this.handleDropdownToggle);
5060
5072
 
5061
5073
  /**
5062
5074
  * @description Let subscribers know that the dropdown ID ha been generated and added.
package/components/select/demo/index.html CHANGED
@@ -16,19 +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-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">
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 -->
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
- <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-icon@8.0.3/dist/auro-icon__bundled.js" type="module"></script>
31
- </head>
36
+ </head>
32
37
  <body class="auro-markdown">
33
38
  <main></main>
34
39