@aurodesignsystem-dev/auro-formkit 0.0.0-pr1451.2 → 0.0.0-pr1451.21

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 (254) hide show
  1. package/components/checkbox/README.md +11 -27
  2. package/components/checkbox/demo/accessibility.html +49 -0
  3. package/components/checkbox/demo/accessibility.md +44 -0
  4. package/components/checkbox/demo/api.html +17 -25
  5. package/components/checkbox/demo/api.md +40 -416
  6. package/components/checkbox/demo/api.min.js +5 -4
  7. package/components/checkbox/demo/customize.html +52 -0
  8. package/components/checkbox/demo/customize.md +361 -0
  9. package/components/checkbox/demo/demo-support.js +60 -0
  10. package/components/checkbox/demo/design.html +52 -0
  11. package/components/checkbox/demo/design.md +149 -0
  12. package/components/checkbox/demo/getting-started.html +52 -0
  13. package/components/checkbox/demo/getting-started.md +261 -0
  14. package/components/checkbox/demo/index.html +17 -20
  15. package/components/checkbox/demo/index.md +144 -29
  16. package/components/checkbox/demo/index.min.js +5 -4
  17. package/components/checkbox/demo/keyboard-behavior.html +49 -0
  18. package/components/checkbox/demo/keyboard-behavior.md +0 -3
  19. package/components/checkbox/demo/layout.md +30 -0
  20. package/components/checkbox/demo/readme.html +10 -17
  21. package/components/checkbox/demo/readme.md +11 -27
  22. package/components/checkbox/demo/styles.css +974 -0
  23. package/components/checkbox/demo/voiceover.html +49 -0
  24. package/components/checkbox/demo/voiceover.md +37 -0
  25. package/components/checkbox/dist/auro-checkbox.d.ts +1 -0
  26. package/components/checkbox/dist/index.js +5 -4
  27. package/components/checkbox/dist/registered.js +5 -4
  28. package/components/combobox/README.md +8 -29
  29. package/components/combobox/demo/accessibility.html +2 -20
  30. package/components/combobox/demo/accessibility.md +1 -1
  31. package/components/combobox/demo/api.html +5 -52
  32. package/components/combobox/demo/api.md +53 -2261
  33. package/components/combobox/demo/api.min.js +15 -12
  34. package/components/combobox/demo/customize.html +53 -0
  35. package/components/combobox/demo/customize.js +24 -0
  36. package/components/combobox/demo/customize.md +1249 -0
  37. package/components/combobox/demo/customize.min.js +18132 -0
  38. package/components/combobox/demo/demo-support.js +60 -0
  39. package/components/combobox/demo/design.html +2 -43
  40. package/components/combobox/demo/design.md +4 -4
  41. package/components/combobox/demo/getting-started.html +53 -0
  42. package/components/combobox/demo/{install.js → getting-started.js} +2 -5
  43. package/components/combobox/demo/getting-started.md +397 -0
  44. package/components/combobox/demo/{install.min.js → getting-started.min.js} +14 -38
  45. package/components/combobox/demo/index.html +4 -47
  46. package/components/combobox/demo/index.md +3 -569
  47. package/components/combobox/demo/index.min.js +15 -12
  48. package/components/combobox/demo/keyboard-behavior.html +2 -20
  49. package/components/combobox/demo/keyboard-behavior.md +2 -2
  50. package/components/combobox/demo/layout.md +2 -2
  51. package/components/combobox/demo/readme.html +2 -43
  52. package/components/combobox/demo/readme.md +8 -29
  53. package/components/combobox/demo/styles.css +98 -105
  54. package/components/combobox/demo/voiceover.html +2 -20
  55. package/components/combobox/demo/voiceover.md +1 -1
  56. package/components/combobox/dist/index.js +12 -10
  57. package/components/combobox/dist/registered.js +12 -10
  58. package/components/counter/README.md +21 -51
  59. package/components/counter/demo/accessibility.html +49 -0
  60. package/components/counter/demo/accessibility.md +34 -0
  61. package/components/counter/demo/api.html +12 -20
  62. package/components/counter/demo/api.md +49 -1299
  63. package/components/counter/demo/api.min.js +6 -6
  64. package/components/counter/demo/customize.html +53 -0
  65. package/components/counter/demo/customize.md +650 -0
  66. package/components/counter/demo/demo-support.js +60 -0
  67. package/components/counter/demo/design.html +52 -0
  68. package/components/counter/demo/design.md +192 -0
  69. package/components/counter/demo/getting-started.html +54 -0
  70. package/components/counter/demo/getting-started.md +332 -0
  71. package/components/counter/demo/index.html +14 -19
  72. package/components/counter/demo/index.md +113 -47
  73. package/components/counter/demo/index.min.js +6 -6
  74. package/components/counter/demo/keyboard-behavior.html +49 -0
  75. package/components/counter/demo/keyboard-behavior.md +1 -1
  76. package/components/counter/demo/keyboardBehavior.html +7 -39
  77. package/components/counter/demo/layout.md +10 -0
  78. package/components/counter/demo/readme.html +11 -15
  79. package/components/counter/demo/readme.md +21 -51
  80. package/components/counter/demo/styles.css +974 -0
  81. package/components/counter/demo/voiceover.html +51 -0
  82. package/components/counter/demo/voiceover.md +80 -0
  83. package/components/counter/dist/index.js +6 -6
  84. package/components/counter/dist/registered.js +6 -6
  85. package/components/datepicker/README.md +10 -24
  86. package/components/datepicker/demo/accessibility.html +50 -0
  87. package/components/datepicker/demo/accessibility.md +64 -0
  88. package/components/datepicker/demo/api.md +69 -1739
  89. package/components/datepicker/demo/api.min.js +14 -14
  90. package/components/datepicker/demo/customize.html +53 -0
  91. package/components/datepicker/demo/customize.md +723 -0
  92. package/components/datepicker/demo/demo-support.js +60 -0
  93. package/components/{select/demo/layout.html → datepicker/demo/design.html} +7 -47
  94. package/components/datepicker/demo/design.md +158 -0
  95. package/components/datepicker/demo/getting-started.html +53 -0
  96. package/components/datepicker/demo/getting-started.md +237 -0
  97. package/components/datepicker/demo/index.html +14 -34
  98. package/components/datepicker/demo/index.md +160 -103
  99. package/components/datepicker/demo/index.min.js +14 -14
  100. package/components/datepicker/demo/keyboard-behavior.html +12 -33
  101. package/components/datepicker/demo/layout.md +92 -0
  102. package/components/datepicker/demo/readme.md +10 -24
  103. package/components/datepicker/demo/styles.css +974 -0
  104. package/components/{dropdown/demo/keyboardBehavior.html → datepicker/demo/voiceover.html} +14 -36
  105. package/components/datepicker/demo/voiceover.md +98 -0
  106. package/components/datepicker/dist/index.js +14 -14
  107. package/components/datepicker/dist/registered.js +14 -14
  108. package/components/dropdown/README.md +0 -25
  109. package/components/dropdown/demo/accessibility.html +49 -0
  110. package/components/dropdown/demo/accessibility.md +45 -0
  111. package/components/dropdown/demo/api.html +10 -19
  112. package/components/dropdown/demo/api.md +40 -1364
  113. package/components/dropdown/demo/api.min.js +2 -2
  114. package/components/dropdown/demo/customize.html +54 -0
  115. package/components/dropdown/demo/customize.md +780 -0
  116. package/components/dropdown/demo/demo-support.js +60 -0
  117. package/components/dropdown/demo/design.html +52 -0
  118. package/components/dropdown/demo/design.md +186 -0
  119. package/components/dropdown/demo/getting-started.html +54 -0
  120. package/components/dropdown/demo/getting-started.md +317 -0
  121. package/components/dropdown/demo/index.html +12 -20
  122. package/components/dropdown/demo/index.md +70 -225
  123. package/components/dropdown/demo/index.min.js +2 -2
  124. package/components/dropdown/demo/keyboard-behavior.html +49 -0
  125. package/components/dropdown/demo/keyboard-behavior.md +4 -8
  126. package/components/dropdown/demo/layout.md +21 -0
  127. package/components/dropdown/demo/readme.html +7 -20
  128. package/components/dropdown/demo/readme.md +0 -25
  129. package/components/dropdown/demo/styles.css +974 -0
  130. package/components/dropdown/demo/voiceover.html +51 -0
  131. package/components/dropdown/demo/voiceover.md +63 -0
  132. package/components/dropdown/dist/index.js +2 -2
  133. package/components/dropdown/dist/registered.js +2 -2
  134. package/components/form/README.md +9 -13
  135. package/components/form/demo/accessibility.html +51 -0
  136. package/components/form/demo/accessibility.md +23 -0
  137. package/components/form/demo/api.html +11 -14
  138. package/components/form/demo/api.md +14 -290
  139. package/components/form/demo/api.min.js +53 -50
  140. package/components/form/demo/customize.html +54 -0
  141. package/components/form/demo/customize.md +246 -0
  142. package/components/form/demo/demo-support.js +60 -0
  143. package/components/form/demo/getting-started.html +54 -0
  144. package/components/form/demo/getting-started.md +291 -0
  145. package/components/form/demo/index.html +12 -14
  146. package/components/form/demo/index.md +66 -96
  147. package/components/form/demo/index.min.js +53 -50
  148. package/components/form/demo/keyboard-behavior.html +51 -0
  149. package/components/form/demo/readme.html +12 -17
  150. package/components/form/demo/readme.md +9 -13
  151. package/components/form/demo/styles.css +974 -0
  152. package/components/form/demo/voiceover.html +51 -0
  153. package/components/form/demo/voiceover.md +36 -0
  154. package/components/helptext/dist/index.js +1 -1
  155. package/components/helptext/dist/registered.js +1 -1
  156. package/components/input/README.md +17 -28
  157. package/components/input/demo/accessibility.html +38 -0
  158. package/components/input/demo/accessibility.md +69 -0
  159. package/components/input/demo/api.html +17 -22
  160. package/components/input/demo/api.js +4 -23
  161. package/components/input/demo/api.md +67 -1267
  162. package/components/input/demo/api.min.js +6 -98
  163. package/components/input/demo/customize.html +54 -0
  164. package/components/input/demo/customize.js +25 -0
  165. package/components/input/demo/customize.md +1372 -0
  166. package/components/input/demo/customize.min.js +7431 -0
  167. package/components/input/demo/demo-support.js +60 -0
  168. package/components/input/demo/design.html +39 -0
  169. package/components/input/demo/design.md +224 -0
  170. package/components/input/demo/getting-started.html +53 -0
  171. package/components/input/demo/getting-started.js +8 -0
  172. package/components/input/demo/getting-started.md +312 -0
  173. package/components/input/demo/getting-started.min.js +7369 -0
  174. package/components/input/demo/index.html +16 -22
  175. package/components/input/demo/index.js +0 -11
  176. package/components/input/demo/index.md +171 -139
  177. package/components/input/demo/index.min.js +6 -18
  178. package/components/input/demo/keyboard-behavior.html +38 -0
  179. package/components/input/demo/layout.md +77 -0
  180. package/components/input/demo/readme.md +17 -28
  181. package/components/input/demo/styles.css +974 -0
  182. package/components/input/demo/voiceover.html +38 -0
  183. package/components/input/demo/voiceover.md +70 -0
  184. package/components/input/dist/base-input.d.ts +1 -0
  185. package/components/input/dist/index.js +6 -6
  186. package/components/input/dist/registered.js +6 -6
  187. package/components/menu/README.md +1 -5
  188. package/components/menu/demo/api.md +43 -43
  189. package/components/menu/demo/api.min.js +2 -2
  190. package/components/menu/demo/index.md +1 -1
  191. package/components/menu/demo/index.min.js +2 -2
  192. package/components/menu/demo/readme.md +1 -5
  193. package/components/menu/dist/index.js +2 -2
  194. package/components/menu/dist/registered.js +2 -2
  195. package/components/radio/README.md +9 -22
  196. package/components/radio/demo/accessibility.html +51 -0
  197. package/components/radio/demo/accessibility.md +44 -0
  198. package/components/radio/demo/api.html +13 -20
  199. package/components/radio/demo/api.md +44 -589
  200. package/components/radio/demo/api.min.js +3 -3
  201. package/components/radio/demo/customize.html +53 -0
  202. package/components/radio/demo/customize.md +368 -0
  203. package/components/radio/demo/demo-support.js +60 -0
  204. package/components/radio/demo/design.html +52 -0
  205. package/components/radio/demo/design.md +143 -0
  206. package/components/radio/demo/getting-started.html +54 -0
  207. package/components/radio/demo/getting-started.md +296 -0
  208. package/components/radio/demo/index.html +16 -19
  209. package/components/radio/demo/index.md +110 -45
  210. package/components/radio/demo/index.min.js +3 -3
  211. package/components/radio/demo/keyboard-behavior.html +51 -0
  212. package/components/radio/demo/layout.md +30 -0
  213. package/components/radio/demo/readme.html +11 -17
  214. package/components/radio/demo/readme.md +9 -22
  215. package/components/radio/demo/styles.css +974 -0
  216. package/components/radio/demo/voiceover.html +51 -0
  217. package/components/radio/demo/voiceover.md +43 -0
  218. package/components/radio/dist/index.js +3 -3
  219. package/components/radio/dist/registered.js +3 -3
  220. package/components/select/README.md +7 -4
  221. package/components/select/demo/accessibility.html +5 -21
  222. package/components/select/demo/accessibility.md +1 -1
  223. package/components/select/demo/api.html +3 -48
  224. package/components/select/demo/api.md +52 -2342
  225. package/components/select/demo/customize.html +54 -0
  226. package/components/select/demo/customize.js +11 -0
  227. package/components/select/demo/customize.md +1049 -0
  228. package/components/select/demo/{api.min.js → customize.min.js} +12 -113
  229. package/components/select/demo/demo-support.js +60 -0
  230. package/components/select/demo/design.html +3 -44
  231. package/components/select/demo/design.md +2 -2
  232. package/components/select/demo/getting-started.html +5 -76
  233. package/components/select/demo/getting-started.js +20 -3
  234. package/components/select/demo/getting-started.md +97 -705
  235. package/components/select/demo/getting-started.min.js +58 -9
  236. package/components/select/demo/index.html +4 -43
  237. package/components/select/demo/index.js +5 -3
  238. package/components/select/demo/index.md +2 -2
  239. package/components/select/demo/index.min.js +14 -9
  240. package/components/select/demo/keyboard-behavior.html +6 -47
  241. package/components/select/demo/keyboard-behavior.md +5 -6
  242. package/components/select/demo/keyboardBehavior.html +4 -46
  243. package/components/select/demo/readme.html +3 -44
  244. package/components/select/demo/readme.md +7 -4
  245. package/components/select/demo/styles.css +57 -109
  246. package/components/select/demo/voiceover.html +3 -30
  247. package/components/select/dist/index.js +5 -5
  248. package/components/select/dist/registered.js +5 -5
  249. package/custom-elements.json +249 -246
  250. package/package.json +3 -3
  251. package/components/combobox/demo/install.html +0 -94
  252. package/components/combobox/demo/install.md +0 -98
  253. package/components/select/demo/api.js +0 -39
  254. package/components/select/demo/install.md +0 -92
package/components/input/demo/keyboard-behavior.html ADDED
@@ -0,0 +1,38 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
+ <title>Auro Web Component Demo | auro-input | Keyboard Behavior</title>
7
+
8
+ <!-- highlight.js Stylesheet -->
9
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/styles/github.min.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 -->
21
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
22
+ <link rel="stylesheet" type="text/css" href="./styles.css" />
23
+ </head>
24
+ <body class="auro-markdown">
25
+ <main></main>
26
+
27
+ <script type="module">
28
+ import { renderPage } from './demo-support.js';
29
+ await renderPage('./keyboard-behavior.md');
30
+ </script>
31
+
32
+ <!-- If additional elements are needed for the demo, add them here. -->
33
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/+esm" type="module"></script>
34
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-header@latest/+esm" type="module"></script>
35
+
36
+ <script src="./index.min.js" data-demo-script="true" type="module"></script>
37
+ </body>
38
+ </html>
package/components/input/demo/layout.md ADDED
@@ -0,0 +1,77 @@
1
+ <p>The component consists of the following elements:</p>
2
+ <ul>
3
+ <li>
4
+ <strong>input field:</strong> shows the component label, current value and will render to reflect state of the component (e.g. <code>focus</code>, <code>hover</code>, <code>disabled</code>, <code>valid</code>, <code>invalid</code>), and a flag marking instances that are required.
5
+ </li>
6
+ <li>
7
+ <strong>label:</strong> descriptive text rendered above the input field to identify the purpose of the input. The label is required in order to ensure correct behavior when a guest is using accessibility tools such as screen readers and VoiceOver utilities.
8
+ </li>
9
+ <li>
10
+ <strong>help text:</strong> descriptive text rendered below the input field intended to help clarify the intended use of the component instance and any current validation error with instructions to resolve those errors.
11
+ </li>
12
+ </ul>
13
+ <p>The following elements are conditionally visible based on the component's configuration and state:</p>
14
+ <ul>
15
+ <li>
16
+ <strong>icon:</strong> an optional icon rendered to the left of the input value. Visible when the <code>icon</code> attribute is set (e.g. credit card icon when using <code>type="credit-card"</code> or calendar icon when using <code>type="date"</code>).
17
+ </li>
18
+ <li>
19
+ <strong>clear button:</strong> a button that clears the current input value. Visible when the input has a value, is not <code>disabled</code> or <code>readonly</code>, and the user has focus in or is hovering over the component.
20
+ </li>
21
+ <li>
22
+ <strong>show/hide password button:</strong> a toggle button that reveals or hides the input value. Visible when <code>type="password"</code> is set and the input has a value.
23
+ </li>
24
+ <li>
25
+ <strong>validation error icon:</strong> an alert icon rendered when the input is in an invalid state. Visible when the component fails validation.
26
+ </li>
27
+ </ul>
28
+ <auro-header level="4" id="inputField">Input Field</auro-header>
29
+ <p>The input field includes the component label, a flag marking the component optional/required and the current value. The label is required in order to ensure correct behavior when a guest is using accessibility tools such as screen readers and VoiceOver utilities. The invalid state will also announce to accessibility tools when applied.</p>
30
+ <p>The optional/required flag content may be customized.</p>
31
+ <p>The input field is a focusable element and will visually respond to common UI states - <strong>Hover</strong> <em>(:hover)</em>, <strong>Focus</strong> <em>(:focus / :focus-visible)</em>, <strong>Disabled</strong> <em>(:disabled)</em>. The component does not have a visual response to the <strong>Active</strong> <em>(:active)</em> state.</p>
32
+ <auro-header level="4" id="helpText">Help Text</auro-header>
33
+ <p>Help text is not required. However, consideration should be given to how users will understand the full context of the component instance, particularly users reliant on accessibility tools like screen readers. In certain cases, a component label alone may be confusing.</p>
34
+ <p>If the component fails validation, the help text will change to show a validation help message instead of the default help text.</p>
35
+ <auro-header level="3" id="colors">Colors</auro-header>
36
+ <auro-header level="4" id="defaultColor">Default Color</auro-header>
37
+ <p>When the component is used on a light background.</p>
38
+ <div class="exampleWrapper">
39
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/appearance-default.html) -->
40
+ <!-- The below content is automatically added from ./../apiExamples/appearance-default.html -->
41
+ <auro-input>
42
+ <span slot="label">Default Appearance</span>
43
+ <span slot="helpText">Help Text</span>
44
+ </auro-input>
45
+ <!-- AURO-GENERATED-CONTENT:END -->
46
+ </div>
47
+ <auro-accordion alignRight>
48
+ <span slot="trigger">See code</span>
49
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/appearance-default.html) -->
50
+ <!-- The below code snippet is automatically added from ./../apiExamples/appearance-default.html -->
51
+ <pre class="language-html"><code class="language-html">&lt;auro-input&gt;
52
+ &lt;span slot="label"&gt;Default Appearance&lt;/span&gt;
53
+ &lt;span slot="helpText"&gt;Help Text&lt;/span&gt;
54
+ &lt;/auro-input&gt;</code></pre>
55
+ <!-- AURO-GENERATED-CONTENT:END -->
56
+ </auro-accordion>
57
+ <auro-header level="4" id="inverseColor">Inverse Color</auro-header>
58
+ <p>When the component is used on a darker background, set <code>appearance="inverse"</code> to invert the component colors for proper contrast and visibility.</p>
59
+ <div class="exampleWrapper--ondark">
60
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/appearance-inverse.html) -->
61
+ <!-- The below content is automatically added from ./../apiExamples/appearance-inverse.html -->
62
+ <auro-input appearance="inverse">
63
+ <span slot="label">Inverse Appearance</span>
64
+ <span slot="helpText">Help Text</span>
65
+ </auro-input>
66
+ <!-- AURO-GENERATED-CONTENT:END -->
67
+ </div>
68
+ <auro-accordion alignRight>
69
+ <span slot="trigger">See code</span>
70
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/appearance-inverse.html) -->
71
+ <!-- The below code snippet is automatically added from ./../apiExamples/appearance-inverse.html -->
72
+ <pre class="language-html"><code class="language-html">&lt;auro-input appearance="inverse"&gt;
73
+ &lt;span slot="label"&gt;Inverse Appearance&lt;/span&gt;
74
+ &lt;span slot="helpText"&gt;Help Text&lt;/span&gt;
75
+ &lt;/auro-input&gt;</code></pre>
76
+ <!-- AURO-GENERATED-CONTENT:END -->
77
+ </auro-accordion>
package/components/input/demo/readme.md CHANGED
@@ -21,7 +21,7 @@ The following sections are editable by making changes to the following files:
21
21
 
22
22
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/description.md) -->
23
23
  <!-- The below content is automatically added from ./docs/partials/description.md -->
24
- Use the `<auro-input>` custom element to create basic single-line text fields. Supports type `text`, `password`, and `email` with validation, required input, error states and a secondary `bordered` theme. Use the slots `label` and `helpText` for additional content support.
24
+ <p><code>&lt;auro-input&gt;</code> is a customizable text input component for single-line data entry. It supports types <code>text</code>, <code>password</code>, and <code>email</code> with built-in validation, required input, error states, and a secondary <code>bordered</code> theme. Use the <code>label</code> and <code>helpText</code> slots for additional content support.</p>
25
25
  <!-- AURO-GENERATED-CONTENT:END -->
26
26
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/readmeAddlInfo.md) -->
27
27
  <!-- The below content is automatically added from ./docs/partials/readmeAddlInfo.md -->
@@ -31,10 +31,11 @@ Use the `<auro-input>` custom element to create basic single-line text fields. S
31
31
 
32
32
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/useCases.md) -->
33
33
  <!-- The below content is automatically added from ./docs/partials/useCases.md -->
34
- The `<auro-input>` element should be used in situations where users may:
35
-
36
- * needs to enter information
37
- * be filling out a form
34
+ <p>The <code>&lt;auro-input&gt;</code> element should be used in situations where users may:</p>
35
+ <ul>
36
+ <li>Need to enter information</li>
37
+ <li>Be filling out a form</li>
38
+ </ul>
38
39
  <!-- AURO-GENERATED-CONTENT:END -->
39
40
 
40
41
  ## Getting Started
@@ -83,34 +84,22 @@ To only develop a single component, use the `--filter` flag:
83
84
  <pre class="language-shell"><code class="language-shell">npx turbo dev --filter=@aurodesignsystem/auro-input</code></pre>
84
85
  <!-- AURO-GENERATED-CONTENT:END -->
85
86
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/customRegistration.md) -->
86
- <!-- The below content is automatically added from ./docs/partials/customRegistration.md -->
87
+ <!-- The below content is automatically added from ./docs/partials/customRegistration.md -->
88
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../../docs/partials/customRegistrationDescription.md) -->
89
+ <!-- The below content is automatically added from ./../../../docs/partials/customRegistrationDescription.md -->
90
+ <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>
91
+ <p>The default import (shown above) handles both steps automatically, registering the component under its standard tag name.</p>
92
+ <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>
93
+ <p>To do this, import the component class directly and call its <code>register(name)</code> method with a unique name:</p>
94
+ <!-- AURO-GENERATED-CONTENT:END -->
87
95
 
88
- ## Custom Component Registration for Version Management
89
-
90
- 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.
91
-
92
- When you install the component as described on the `Install` page, the class is imported automatically, and the component is registered globally for you.
93
-
94
- However, if you need to load multiple versions of the same component on a single page (for example, when two projects depend on different versions), you can manually register the class under a custom element name to avoid conflicts.
95
-
96
- You can do this by importing only the component class and using the `register(name)` method with a unique name:
97
-
98
96
  <pre class="language-js"><code class="language-js">// Import the class only
99
97
  import { AuroInput } from '@aurodesignsystem/auro-formkit/auro-input/class';
100
98
  ​
101
99
  // Register with a custom name if desired
102
- AuroInput.register('custom-input');</code></pre>
103
-
104
- This will create a new custom element `<custom-input>` that behaves exactly like `<auro-input>`, allowing both to coexist on the same page without interfering with each other.
105
-
106
- <div class="exampleWrapper exampleWrapper--flex">
107
- <custom-input>
108
- <span slot="label">Label</span>
109
- <span slot="helpText">Help Text</span>
110
- </custom-input>
111
- </div>
112
- <auro-accordion alignRight>
113
- <span slot="trigger">See code</span>
100
+ AuroInput.register('[custom]-input');</code></pre>
101
+
102
+ <p>This will create a new custom element <code>&lt;custom-input&gt;</code> that behaves exactly like <code>&lt;auro-input&gt;</code>, allowing both to coexist on the same page without interfering with each other.</p>
114
103
 
115
104
  <pre class="language-html"><code class="language-html">&lt;custom-input&gt;
116
105
  &lt;span slot="label"&gt;Label&lt;/span&gt;