@aurodesignsystem-dev/auro-formkit 0.0.0-pr785.0 → 0.0.0-pr785.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (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 +13 -7
  10. package/components/combobox/demo/index.html +16 -10
  11. package/components/combobox/demo/index.min.js +13 -7
  12. package/components/combobox/demo/readme.html +16 -9
  13. package/components/combobox/dist/index.js +13 -7
  14. package/components/combobox/dist/registered.js +13 -7
  15. package/components/counter/demo/api.html +16 -10
  16. package/components/counter/demo/api.min.js +11 -5
  17. package/components/counter/demo/index.html +16 -10
  18. package/components/counter/demo/index.min.js +11 -5
  19. package/components/counter/demo/readme.html +16 -9
  20. package/components/counter/dist/index.js +11 -5
  21. package/components/counter/dist/registered.js +11 -5
  22. package/components/datepicker/demo/api.html +16 -10
  23. package/components/datepicker/demo/api.min.js +23 -7
  24. package/components/datepicker/demo/index.html +16 -10
  25. package/components/datepicker/demo/index.min.js +23 -7
  26. package/components/datepicker/demo/readme.html +16 -9
  27. package/components/datepicker/dist/index.js +23 -7
  28. package/components/datepicker/dist/registered.js +23 -7
  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 +11 -5
  32. package/components/dropdown/demo/index.html +16 -10
  33. package/components/dropdown/demo/index.min.js +11 -5
  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 +11 -5
  37. package/components/dropdown/dist/registered.js +11 -5
  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 +11 -5
  58. package/components/select/demo/index.html +16 -11
  59. package/components/select/demo/index.min.js +11 -5
  60. package/components/select/demo/readme.html +16 -9
  61. package/components/select/dist/index.js +11 -5
  62. package/components/select/dist/registered.js +11 -5
  63. package/package.json +3 -2
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
@@ -4611,6 +4611,9 @@ class AuroDropdown extends AuroElement$3 {
4611
4611
 
4612
4612
  this.parentBorder = false;
4613
4613
 
4614
+ /** @private */
4615
+ this.handleDropdownToggle = this.handleDropdownToggle.bind(this);
4616
+
4614
4617
  this.privateDefaults();
4615
4618
  }
4616
4619
 
@@ -5044,12 +5047,14 @@ class AuroDropdown extends AuroElement$3 {
5044
5047
  if (changedProperties.size === 0 || changedProperties.has('isPopoverVisible')) {
5045
5048
  this.handleTriggerContentSlotChange();
5046
5049
  }
5050
+ }
5047
5051
 
5048
- if (changedProperties.has('isPopoverVisible')) {
5049
- this.updateFocusTrap();
5050
- if (!this.isPopoverVisible && this.hasFocus) {
5051
- this.trigger.focus();
5052
- }
5052
+ handleDropdownToggle(event) {
5053
+ this.updateFocusTrap();
5054
+ this.isPopoverVisible = event.detail.expanded;
5055
+ const eventType = event.detail.eventType || "unknown";
5056
+ if (!this.isPopoverVisible && this.hasFocus && eventType === "keydown") {
5057
+ this.trigger.focus();
5053
5058
  }
5054
5059
  }
5055
5060
 
@@ -5057,6 +5062,7 @@ class AuroDropdown extends AuroElement$3 {
5057
5062
 
5058
5063
  // Configure the floater to, this will generate the ID for the bib
5059
5064
  this.floater.configure(this, 'auroDropdown');
5065
+ this.addEventListener('auroDropdown-toggled', this.handleDropdownToggle);
5060
5066
 
5061
5067
  /**
5062
5068
  * @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
 
package/components/select/demo/index.min.js CHANGED
@@ -4519,6 +4519,9 @@ class AuroDropdown extends AuroElement$3 {
4519
4519
 
4520
4520
  this.parentBorder = false;
4521
4521
 
4522
+ /** @private */
4523
+ this.handleDropdownToggle = this.handleDropdownToggle.bind(this);
4524
+
4522
4525
  this.privateDefaults();
4523
4526
  }
4524
4527
 
@@ -4952,12 +4955,14 @@ class AuroDropdown extends AuroElement$3 {
4952
4955
  if (changedProperties.size === 0 || changedProperties.has('isPopoverVisible')) {
4953
4956
  this.handleTriggerContentSlotChange();
4954
4957
  }
4958
+ }
4955
4959
 
4956
- if (changedProperties.has('isPopoverVisible')) {
4957
- this.updateFocusTrap();
4958
- if (!this.isPopoverVisible && this.hasFocus) {
4959
- this.trigger.focus();
4960
- }
4960
+ handleDropdownToggle(event) {
4961
+ this.updateFocusTrap();
4962
+ this.isPopoverVisible = event.detail.expanded;
4963
+ const eventType = event.detail.eventType || "unknown";
4964
+ if (!this.isPopoverVisible && this.hasFocus && eventType === "keydown") {
4965
+ this.trigger.focus();
4961
4966
  }
4962
4967
  }
4963
4968
 
@@ -4965,6 +4970,7 @@ class AuroDropdown extends AuroElement$3 {
4965
4970
 
4966
4971
  // Configure the floater to, this will generate the ID for the bib
4967
4972
  this.floater.configure(this, 'auroDropdown');
4973
+ this.addEventListener('auroDropdown-toggled', this.handleDropdownToggle);
4968
4974
 
4969
4975
  /**
4970
4976
  * @description Let subscribers know that the dropdown ID ha been generated and added.
package/components/select/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-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
- </head>
36
+ </head>
30
37
  <body class="auro-markdown">
31
38
  <main></main>
32
39
 
package/components/select/dist/index.js CHANGED
@@ -4473,6 +4473,9 @@ class AuroDropdown extends AuroElement$2 {
4473
4473
 
4474
4474
  this.parentBorder = false;
4475
4475
 
4476
+ /** @private */
4477
+ this.handleDropdownToggle = this.handleDropdownToggle.bind(this);
4478
+
4476
4479
  this.privateDefaults();
4477
4480
  }
4478
4481
 
@@ -4906,12 +4909,14 @@ class AuroDropdown extends AuroElement$2 {
4906
4909
  if (changedProperties.size === 0 || changedProperties.has('isPopoverVisible')) {
4907
4910
  this.handleTriggerContentSlotChange();
4908
4911
  }
4912
+ }
4909
4913
 
4910
- if (changedProperties.has('isPopoverVisible')) {
4911
- this.updateFocusTrap();
4912
- if (!this.isPopoverVisible && this.hasFocus) {
4913
- this.trigger.focus();
4914
- }
4914
+ handleDropdownToggle(event) {
4915
+ this.updateFocusTrap();
4916
+ this.isPopoverVisible = event.detail.expanded;
4917
+ const eventType = event.detail.eventType || "unknown";
4918
+ if (!this.isPopoverVisible && this.hasFocus && eventType === "keydown") {
4919
+ this.trigger.focus();
4915
4920
  }
4916
4921
  }
4917
4922
 
@@ -4919,6 +4924,7 @@ class AuroDropdown extends AuroElement$2 {
4919
4924
 
4920
4925
  // Configure the floater to, this will generate the ID for the bib
4921
4926
  this.floater.configure(this, 'auroDropdown');
4927
+ this.addEventListener('auroDropdown-toggled', this.handleDropdownToggle);
4922
4928
 
4923
4929
  /**
4924
4930
  * @description Let subscribers know that the dropdown ID ha been generated and added.
package/components/select/dist/registered.js CHANGED
@@ -4473,6 +4473,9 @@ class AuroDropdown extends AuroElement$2 {
4473
4473
 
4474
4474
  this.parentBorder = false;
4475
4475
 
4476
+ /** @private */
4477
+ this.handleDropdownToggle = this.handleDropdownToggle.bind(this);
4478
+
4476
4479
  this.privateDefaults();
4477
4480
  }
4478
4481
 
@@ -4906,12 +4909,14 @@ class AuroDropdown extends AuroElement$2 {
4906
4909
  if (changedProperties.size === 0 || changedProperties.has('isPopoverVisible')) {
4907
4910
  this.handleTriggerContentSlotChange();
4908
4911
  }
4912
+ }
4909
4913
 
4910
- if (changedProperties.has('isPopoverVisible')) {
4911
- this.updateFocusTrap();
4912
- if (!this.isPopoverVisible && this.hasFocus) {
4913
- this.trigger.focus();
4914
- }
4914
+ handleDropdownToggle(event) {
4915
+ this.updateFocusTrap();
4916
+ this.isPopoverVisible = event.detail.expanded;
4917
+ const eventType = event.detail.eventType || "unknown";
4918
+ if (!this.isPopoverVisible && this.hasFocus && eventType === "keydown") {
4919
+ this.trigger.focus();
4915
4920
  }
4916
4921
  }
4917
4922
 
@@ -4919,6 +4924,7 @@ class AuroDropdown extends AuroElement$2 {
4919
4924
 
4920
4925
  // Configure the floater to, this will generate the ID for the bib
4921
4926
  this.floater.configure(this, 'auroDropdown');
4927
+ this.addEventListener('auroDropdown-toggled', this.handleDropdownToggle);
4922
4928
 
4923
4929
  /**
4924
4930
  * @description Let subscribers know that the dropdown ID ha been generated and added.