@aurodesignsystem-dev/auro-formkit 0.0.0-pr1460.2 → 0.0.0-pr1464.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 (85) hide show
  1. package/components/checkbox/demo/api.html +4 -26
  2. package/components/checkbox/demo/getting-started.md +5 -6
  3. package/components/checkbox/demo/index.min.js +1 -1
  4. package/components/checkbox/dist/index.js +1 -1
  5. package/components/checkbox/dist/registered.js +1 -1
  6. package/components/combobox/demo/api.html +4 -25
  7. package/components/combobox/demo/getting-started.md +76 -27
  8. package/components/combobox/demo/index.min.js +15 -1
  9. package/components/combobox/demo/registered.min.js +1517 -1509
  10. package/components/combobox/dist/auro-combobox.d.ts +1 -1
  11. package/components/combobox/dist/index.js +18 -11
  12. package/components/combobox/dist/registered.js +18 -11
  13. package/components/counter/demo/api.html +5 -29
  14. package/components/counter/demo/getting-started.md +4 -3
  15. package/components/counter/demo/index.min.js +8392 -1
  16. package/components/counter/dist/index.js +53 -5284
  17. package/components/counter/dist/registered.js +106 -5110
  18. package/components/datepicker/demo/accessibility.html +0 -1
  19. package/components/datepicker/demo/api.html +4 -29
  20. package/components/datepicker/demo/getting-started.md +25 -2
  21. package/components/datepicker/demo/index.min.js +24612 -1
  22. package/components/datepicker/demo/readme.html +2 -10
  23. package/components/datepicker/dist/index.js +10 -10
  24. package/components/datepicker/dist/registered.js +10 -10
  25. package/components/dropdown/demo/api.html +5 -31
  26. package/components/dropdown/demo/getting-started.md +34 -2
  27. package/components/dropdown/demo/index.min.js +5097 -1
  28. package/components/dropdown/dist/index.js +1 -1
  29. package/components/dropdown/dist/registered.js +1 -1
  30. package/components/form/demo/api.html +5 -27
  31. package/components/form/demo/getting-started.md +5 -6
  32. package/components/form/demo/index.min.js +719 -2
  33. package/components/form/demo/keyboard-behavior.md +38 -0
  34. package/components/form/demo/pages.json +1 -1
  35. package/components/form/demo/registerDemoDeps.min.js +11842 -60908
  36. package/components/input/demo/accessibility.md +1 -1
  37. package/components/input/demo/api.html +15 -26
  38. package/components/input/demo/auro-input.min.js +1 -1
  39. package/components/input/demo/getting-started.md +1 -1
  40. package/components/input/demo/readme.html +2 -10
  41. package/components/input/dist/index.js +1 -1
  42. package/components/input/dist/registered.js +1 -1
  43. package/components/menu/demo/api.html +5 -30
  44. package/components/menu/demo/api.md +1 -1
  45. package/components/menu/demo/getting-started.md +1 -1
  46. package/components/menu/demo/index.min.js +1574 -1573
  47. package/components/menu/dist/auro-menu.context.d.ts +0 -1
  48. package/components/menu/dist/auro-menu.d.ts +1 -1
  49. package/components/menu/dist/index.js +1609 -1608
  50. package/components/menu/dist/registered.js +1553 -1552
  51. package/components/radio/demo/api.html +7 -28
  52. package/components/radio/demo/getting-started.md +27 -2
  53. package/components/radio/demo/index.md +1 -3
  54. package/components/radio/demo/index.min.js +1 -1
  55. package/components/radio/demo/readme.md +0 -2
  56. package/components/radio/dist/index.js +1 -1
  57. package/components/radio/dist/registered.js +1 -1
  58. package/components/select/demo/api.html +5 -42
  59. package/components/select/demo/getting-started.md +39 -5
  60. package/components/select/demo/registered.min.js +1503 -1502
  61. package/components/select/dist/index.js +2 -2
  62. package/components/select/dist/registered.js +2 -2
  63. package/custom-elements.json +1487 -1489
  64. package/package.json +37 -4
  65. package/components/combobox/demo/api.js +0 -39
  66. package/components/combobox/demo/api.min.js +0 -106
  67. package/components/combobox/demo/install.html +0 -50
  68. package/components/combobox/demo/styles.css +0 -974
  69. package/components/combobox/demo/swap-value.min.js +0 -16
  70. package/components/counter/demo/api.js +0 -24
  71. package/components/counter/demo/api.min.js +0 -52
  72. package/components/counter/demo/auro-counter-group.min.js +0 -8394
  73. package/components/datepicker/demo/api.js +0 -37
  74. package/components/datepicker/demo/api.min.js +0 -300
  75. package/components/datepicker/demo/auro-datepicker.min.js +0 -24614
  76. package/components/dropdown/demo/api.js +0 -26
  77. package/components/dropdown/demo/api.min.js +0 -109
  78. package/components/dropdown/demo/auro-dropdown.min.js +0 -5099
  79. package/components/form/demo/api.js +0 -5
  80. package/components/form/demo/api.min.js +0 -5
  81. package/components/form/demo/auro-form.min.js +0 -718
  82. package/components/form/demo/autocomplete.html +0 -31
  83. package/components/radio/demo/api.js +0 -19
  84. package/components/radio/demo/api.min.js +0 -44
  85. package/components/select/demo/keyboardBehavior.html +0 -48
package/components/checkbox/demo/api.html CHANGED
@@ -3,9 +3,6 @@
3
3
  See LICENSE in the project root for license information.
4
4
 
5
5
  HTML in this document is standardized and NOT to be edited.
6
- All demo code should be added/edited in ./demo/api.md
7
-
8
- With the exception of adding custom elements if needed for the demo.
9
6
 
10
7
  ----------------------- DO NOT EDIT -----------------------------
11
8
 
@@ -17,37 +14,18 @@
17
14
  <meta charset="UTF-8" />
18
15
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
19
16
  <title>Auro Web Component Demo | auro-checkbox</title>
20
-
21
- <!-- highlight.js Stylesheet -->
22
- <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/styles/github.min.css"/>
23
-
24
- <!-- Legacy reference is still needed to support auro-checkbox's use of legacy token values at this time -->
25
17
  <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
18
  <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
19
  <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 -->
34
20
  <link rel="stylesheet" type="text/css" href="./styles.min.css" />
35
- </head>
36
- <body class="auro-markdown">
37
- <main></main>
38
-
39
- <!-- If additional elements are needed for the demo, add them here. -->
40
- <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/+esm" type="module"></script>
41
- <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-button@latest/+esm" type="module"></script>
42
- <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-header@latest/+esm" type="module"></script>
43
21
  <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-hyperlink@latest/+esm" type="module"></script>
44
-
22
+ <script src="./api.min.js" data-demo-script="true" type="module"></script>
45
23
  <script type="module">
46
24
  import { renderPage } from './demo-support.min.js';
47
25
  await renderPage('./api.md');
48
- import { initExamples } from "./api.min.js";
49
- initExamples();
50
26
  </script>
51
- <script src="./api.min.js" data-demo-script="true" type="module"></script>
27
+ </head>
28
+ <body class="auro-markdown">
29
+ <main></main>
52
30
  </body>
53
31
  </html>
package/components/checkbox/demo/getting-started.md CHANGED
@@ -32,7 +32,7 @@
32
32
  <section>
33
33
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/getting-started/install.md) -->
34
34
  <!-- The below content is automatically added from ./../docs/partials/getting-started/install.md -->
35
- <auro-header level="2" id="setup">Setup</auro-header>
35
+ <auro-header level="2" id="setup">Setup</auro-header>
36
36
  <auro-accordion-group Emphasis>
37
37
  <auro-accordion expanded class="section" id="recommendedAccordion">
38
38
  <span slot="trigger">Recommended Installation and Implementation</span>
@@ -44,8 +44,8 @@
44
44
  <pre class="language-shell"><code class="language-shell">$ npm i @aurodesignsystem/auro-formkit</code></pre>
45
45
  <!-- AURO-GENERATED-CONTENT:END -->
46
46
  <auro-header level="3">Implementation</auro-header>
47
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/customRegistration.md) -->
48
- <!-- The below content is automatically added from ./../docs/partials/customRegistration.md -->
47
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/getting-started/customRegistration.md) -->
48
+ <!-- The below content is automatically added from ./../docs/partials/getting-started/customRegistration.md -->
49
49
  <auro-header level="2" id="customRegistration">Custom Component Registration for Version Management</auro-header>
50
50
  There are two key parts to every Auro component: the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes">class</a> and the custom element definition. The class defines the component’s behavior, while the custom element registers it under a specific name so it can be used in HTML.
51
51
 
@@ -100,10 +100,9 @@ This will create a new custom element <code>&gt;custom-checkbox&lt;</code> and <
100
100
  </div>
101
101
  </auro-accordion>
102
102
  <auro-accordion class="section" id="cdnAccordion">
103
- <span slot="trigger">CDN Installation and Implementation</span>
103
+ <span slot="trigger">CDN Installation</span>
104
104
  <div class="accordion-content">
105
- <p class="warning"><strong>Warning:</strong> CDN install & registration can cause conflicts if another package registers the same tag name using a different version of the component, leading to unexpected behavior. Use custom registration to avoid this risk.</p>
106
- <auro-header level="3">Install & Implementation</auro-header>
105
+ <p class="warning"><strong>Warning:</strong> CDN registration can cause conflicts if another package registers the same tag name using a different version of the component, leading to unexpected behavior. Use custom registration to avoid this risk.</p>
107
106
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/getting-started/cdnRegistration.md) -->
108
107
  <!-- The below content is automatically added from ./../docs/partials/getting-started/cdnRegistration.md -->
109
108
  <p>Add the following script tag to your HTML to load the component directly from a CDN:</p>
package/components/checkbox/demo/index.min.js CHANGED
@@ -1682,7 +1682,7 @@ class AuroHelpText extends i$2 {
1682
1682
  }
1683
1683
  }
1684
1684
 
1685
- var formkitVersion = '202605070044';
1685
+ var formkitVersion = '202605081752';
1686
1686
 
1687
1687
  // Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
1688
1688
  // See LICENSE in the project root for license information.
package/components/checkbox/dist/index.js CHANGED
@@ -1635,7 +1635,7 @@ class AuroHelpText extends LitElement {
1635
1635
  }
1636
1636
  }
1637
1637
 
1638
- var formkitVersion = '202605070044';
1638
+ var formkitVersion = '202605081752';
1639
1639
 
1640
1640
  // Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
1641
1641
  // See LICENSE in the project root for license information.
package/components/checkbox/dist/registered.js CHANGED
@@ -1635,7 +1635,7 @@ class AuroHelpText extends LitElement {
1635
1635
  }
1636
1636
  }
1637
1637
 
1638
- var formkitVersion = '202605070044';
1638
+ var formkitVersion = '202605081752';
1639
1639
 
1640
1640
  // Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
1641
1641
  // See LICENSE in the project root for license information.
package/components/combobox/demo/api.html CHANGED
@@ -3,9 +3,6 @@
3
3
  See LICENSE in the project root for license information.
4
4
 
5
5
  HTML in this document is standardized and NOT to be edited.
6
- All demo code should be added/edited in ./demo/demo.md
7
-
8
- With the exception of adding custom elements if needed for the demo.
9
6
 
10
7
  ----------------------- DO NOT EDIT -----------------------------
11
8
 
@@ -17,36 +14,18 @@
17
14
  <meta charset="UTF-8" />
18
15
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
19
16
  <title>Auro Web Component Demo | auro-combobox</title>
20
-
21
- <!-- highlight.js Stylesheet -->
22
- <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/styles/github.min.css"/>
23
-
24
- <!-- Legacy reference is still needed to support auro-combobox's use of legacy token values at this time -->
25
17
  <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
18
  <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
19
  <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 -->
34
20
  <link rel="stylesheet" type="text/css" href="./styles.min.css" />
35
- </head>
36
- <body class="auro-markdown">
37
- <main></main>
38
-
39
- <!-- If additional elements are needed for the demo, add them here. -->
40
- <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/+esm" type="module"></script>
41
21
  <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-hyperlink@latest/+esm" type="module"></script>
42
- <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-button@latest/+esm" type="module"></script>
43
- <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-icon@latest/+esm" type="module"></script>
22
+ <script src="./api.min.js" data-demo-script="true" type="module"></script>
44
23
  <script type="module">
45
24
  import { renderPage } from './demo-support.min.js';
46
25
  await renderPage('./api.md');
47
- import { initExamples } from "./api.min.js";
48
- initExamples();
49
26
  </script>
50
- <script src="./api.min.js" data-demo-script="true" type="module"></script>
27
+ </head>
28
+ <body class="auro-markdown">
29
+ <main></main>
51
30
  </body>
52
31
  </html>
package/components/combobox/demo/getting-started.md CHANGED
@@ -41,54 +41,103 @@
41
41
  <section>
42
42
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/getting-started/install.md) -->
43
43
  <!-- The below content is automatically added from ./../docs/partials/getting-started/install.md -->
44
- <auro-header level="1" id="install">Install</auro-header>
45
- <auro-header level="2" id="npmInstall">NPM Installation</auro-header>
44
+ <auro-header level="2" id="setup">Setup</auro-header>
45
+ <auro-accordion-group Emphasis>
46
+ <auro-accordion expanded class="section" id="recommendedAccordion">
47
+ <span slot="trigger">Recommended Installation and Implementation</span>
48
+ <div class="accordion-content">
49
+ <auro-header level="3">Install</auro-header>
46
50
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../../docs/templates/componentInstall.md) -->
47
51
  <!-- The below content is automatically added from ./../../../docs/templates/componentInstall.md -->
48
52
 
49
53
  <pre class="language-shell"><code class="language-shell">$ npm i @aurodesignsystem/auro-formkit</code></pre>
54
+ <!-- AURO-GENERATED-CONTENT:END -->
55
+ <auro-header level="3">Implementation</auro-header>
56
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/getting-started/customRegistration.md) -->
57
+ <!-- The below content is automatically added from ./../docs/partials/getting-started/customRegistration.md -->
58
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../../docs/partials/customRegistrationDescription.md) -->
59
+ <!-- The below content is automatically added from ./../../../docs/partials/customRegistrationDescription.md -->
60
+ <p>Every Auro component consists of a JavaScript <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes">class</a> and a <a href="https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry/define">custom element registration</a>. The class defines the component's behavior, and the registration maps it to an HTML tag name so it can be used in markup.</p>
61
+ <p>The default import (shown above) handles both steps automatically, registering the component under its standard tag name.</p>
62
+ <p>If you need multiple versions of the same component on a single page — for example, when two projects depend on different versions — you can register the class under a custom tag name to avoid conflicts.</p>
63
+ <p>To do this, import the component class directly and call its <code>register(name)</code> method with a unique name:</p>
50
64
  <!-- AURO-GENERATED-CONTENT:END -->
51
- <auro-header level="2" id="gettingStarted">Getting Started</auro-header>
52
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../../docs/templates/gettingStarted.md) -->
53
- <!-- The below content is automatically added from ./../../../docs/templates/gettingStarted.md -->
54
65
 
55
- ### TypeScript Module Resolution
66
+ <pre class="language-js"><code class="language-js">// Import the class only
67
+ import { AuroCombobox } from '@aurodesignsystem/auro-formkit/auro-combobox/class';
68
+ ​
69
+ // Register with a custom name if desired
70
+ AuroCombobox.register('custom-combobox');</code></pre>
56
71
 
57
- When using TypeScript set `moduleResolution` to `bundler`, add the following to your `tsconfig.json`:
72
+ This will create a new custom element `<custom-combobox>` that behaves exactly like `<auro-combobox>`, allowing both to coexist on the same page without interfering with each other.
58
73
 
59
- <pre class="language-json"><code class="language-json">{
60
- "compilerOptions": {
61
- "moduleResolution": "bundler"
62
- }
63
- }</code></pre>
64
-
65
- This configuration enables proper module resolution for the component's TypeScript files.
66
- <!-- AURO-GENERATED-CONTENT:END -->
67
- <auro-header level="2" id="defaultSetup">Default Component Setup</auro-header>
68
- Once installed, the component can be used in your project by importing the component's registered module:
74
+ <pre class="language-html"><code class="language-html">&lt;custom-combobox&gt;
75
+ &lt;span slot="bib.fullscreen.headline"&gt;Bib Header&lt;/span&gt;
76
+ &lt;span slot="label"&gt;Name&lt;/span&gt;
77
+ &lt;auro-menu&gt;
78
+ &lt;auro-menuoption value="Apples" id="option-0"&gt;Apples&lt;/auro-menuoption&gt;
79
+ &lt;auro-menuoption value="Oranges" id="option-1"&gt;Oranges&lt;/auro-menuoption&gt;
80
+ &lt;auro-menuoption value="Peaches" id="option-2"&gt;Peaches&lt;/auro-menuoption&gt;
81
+ &lt;auro-menuoption value="Grapes" id="option-3"&gt;Grapes&lt;/auro-menuoption&gt;
82
+ &lt;auro-menuoption value="Cherries" id="option-4"&gt;Cherries&lt;/auro-menuoption&gt;
83
+ &lt;auro-menuoption static nomatch&gt;No matching option&lt;/auro-menuoption&gt;
84
+ &lt;/auro-menu&gt;
85
+ &lt;/custom-combobox&gt;</code></pre>
86
+ <!-- AURO-GENERATED-CONTENT:END -->
87
+ </div>
88
+ </auro-accordion>
89
+ <auro-accordion class="section" id="autoAccordion">
90
+ <span slot="trigger">Auto Installation and Implementation</span>
91
+ <div class="accordion-content">
92
+ <p class="warning"><strong>Warning:</strong> Default registration can cause conflicts if another package registers the same tag name using a different version of the component, leading to unexpected behavior. Use custom registration to avoid this risk.</p>
93
+ <auro-header level="3">Install</auro-header>
94
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../../docs/templates/componentInstall.md) -->
95
+ <!-- The below content is automatically added from ./../../../docs/templates/componentInstall.md -->
69
96
 
70
- <pre class="language-js"><code class="language-js">import '@aurodesignsystem/auro-formkit/auro-combobox';</code></pre>
97
+ <pre class="language-shell"><code class="language-shell">$ npm i @aurodesignsystem/auro-formkit</code></pre>
98
+ <!-- AURO-GENERATED-CONTENT:END -->
99
+ <auro-header level="3">Implementation</auro-header>
100
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/getting-started/defaultRegistration.md) -->
101
+ <!-- The below content is automatically added from ./../docs/partials/getting-started/defaultRegistration.md -->
102
+ <p>Once installed, the component can be used in your project by importing the component's registered module:</p>
71
103
 
72
- This import registers the `<auro-combobox>` custom element globally. You can then use it in your HTML:
104
+ <pre class="language-js"><code class="language-js">import '@aurodesignsystem/auro-formkit/auro-combobox';</code></pre>
105
+ <p>This import registers the <code>&lt;auro-combobox&gt;</code> custom element globally. You can then use it in your HTML:</p>
73
106
 
74
107
  <pre class="language-html"><code class="language-html">&lt;auro-combobox&gt;
75
108
  &lt;span slot="label"&gt;Choose an option&lt;/span&gt;
76
109
  &lt;auro-menu&gt;
77
110
  &lt;auro-menuoption value="option1"&gt;Option 1&lt;/auro-menuoption&gt;
78
111
  &lt;auro-menuoption value="option2"&gt;Option 2&lt;/auro-menuoption&gt;
112
+ &lt;auro-menuoption static nomatch&gt;No matching option&lt;/auro-menuoption&gt;
79
113
  &lt;/auro-menu&gt;
80
114
  &lt;/auro-combobox&gt;</code></pre>
115
+ <!-- AURO-GENERATED-CONTENT:END -->
116
+ </div>
117
+ </auro-accordion>
118
+ <auro-accordion class="section" id="cdnAccordion">
119
+ <span slot="trigger">CDN Installation</span>
120
+ <div class="accordion-content">
121
+ <p class="warning"><strong>Warning:</strong> CDN registration can cause conflicts if another package registers the same tag name using a different version of the component, leading to unexpected behavior. Use custom registration to avoid this risk.</p>
122
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/getting-started/cdnRegistration.md) -->
123
+ <!-- The below content is automatically added from ./../docs/partials/getting-started/cdnRegistration.md -->
124
+ <p>Add the following script tag to your HTML to load the component directly from a CDN:</p>
81
125
 
82
- <auro-header level="2" id="cdn">Install from CDN</auro-header>
83
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../../docs/templates/bundleInstallDescription.md) -->
84
- <!-- The below content is automatically added from ./../../../docs/templates/bundleInstallDescription.md -->
85
- In cases where the project is not able to process JS assets, there are pre-processed assets available for use. Legacy browsers such as IE11 are no longer supported.
86
-
87
126
  <pre class="language-html"><code class="language-html">&lt;script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@latest/auro-combobox/+esm"&gt;&lt;/script&gt;</code></pre>
88
- <!-- AURO-GENERATED-CONTENT:END -->
89
- <auro-header level="2" id="customRegistration">Custom Component Registration</auro-header>
90
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/customRegistration.md) -->
127
+ <p>This script registers the <code>&lt;auro-combobox&gt;</code> custom element globally. You can then use it in your HTML:</p>
128
+
129
+ <pre class="language-html"><code class="language-html">&lt;auro-combobox&gt;
130
+ &lt;span slot="label"&gt;Choose an option&lt;/span&gt;
131
+ &lt;auro-menu&gt;
132
+ &lt;auro-menuoption value="option1"&gt;Option 1&lt;/auro-menuoption&gt;
133
+ &lt;auro-menuoption value="option2"&gt;Option 2&lt;/auro-menuoption&gt;
134
+ &lt;auro-menuoption static nomatch&gt;No matching option&lt;/auro-menuoption&gt;
135
+ &lt;/auro-menu&gt;
136
+ &lt;/auro-combobox&gt;</code></pre>
91
137
  <!-- AURO-GENERATED-CONTENT:END -->
138
+ </div>
139
+ </auro-accordion>
140
+ </auro-accordion-group>
92
141
  <!-- AURO-GENERATED-CONTENT:END -->
93
142
  </section>
94
143
  <section>
package/components/combobox/demo/index.min.js CHANGED
@@ -1,6 +1,20 @@
1
- import { s as swapValueExample } from './swap-value.min.js';
2
1
  import { A as AuroCombobox } from './registered.min.js';
3
2
 
3
+ function swapValueExample() {
4
+ const btn = document.querySelector('#swapExampleBtn');
5
+ const comboboxOne = document.querySelector('#swapExampleLeft');
6
+ const comboboxTwo = document.querySelector('#swapExampleRight');
7
+
8
+ btn.addEventListener('click', () => {
9
+ console.warn('swap value example button clicked');
10
+ const valueOne = comboboxOne.value;
11
+ const valueTwo = comboboxTwo.value;
12
+
13
+ comboboxOne.value = valueTwo;
14
+ comboboxTwo.value = valueOne;
15
+ });
16
+ }
17
+
4
18
  /* eslint-disable jsdoc/require-jsdoc, no-magic-numbers, no-param-reassign */
5
19
 
6
20