@aurodesignsystem-dev/auro-formkit 0.0.0-pr1001.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 (297) hide show
  1. package/CHANGELOG.md +5 -0
  2. package/LICENSE +201 -0
  3. package/NOTICE +2 -0
  4. package/README.md +314 -0
  5. package/components/bibtemplate/dist/auro-bibtemplate.d.ts +50 -0
  6. package/components/bibtemplate/dist/buttonVersion.d.ts +2 -0
  7. package/components/bibtemplate/dist/headerVersion.d.ts +2 -0
  8. package/components/bibtemplate/dist/iconVersion.d.ts +2 -0
  9. package/components/bibtemplate/dist/index.d.ts +2 -0
  10. package/components/bibtemplate/dist/index.js +1940 -0
  11. package/components/bibtemplate/dist/registered.js +1940 -0
  12. package/components/bibtemplate/dist/styles/color-css.d.ts +2 -0
  13. package/components/bibtemplate/dist/styles/style-css.d.ts +2 -0
  14. package/components/bibtemplate/dist/styles/tokens-css.d.ts +2 -0
  15. package/components/checkbox/README.md +142 -0
  16. package/components/checkbox/demo/api.html +61 -0
  17. package/components/checkbox/demo/api.js +17 -0
  18. package/components/checkbox/demo/api.md +436 -0
  19. package/components/checkbox/demo/api.min.js +1870 -0
  20. package/components/checkbox/demo/index.html +57 -0
  21. package/components/checkbox/demo/index.js +8 -0
  22. package/components/checkbox/demo/index.md +327 -0
  23. package/components/checkbox/demo/index.min.js +1845 -0
  24. package/components/checkbox/demo/readme.html +57 -0
  25. package/components/checkbox/demo/readme.md +142 -0
  26. package/components/checkbox/dist/auro-checkbox-group.d.ts +166 -0
  27. package/components/checkbox/dist/auro-checkbox.d.ts +136 -0
  28. package/components/checkbox/dist/helptextVersion.d.ts +2 -0
  29. package/components/checkbox/dist/index.d.ts +3 -0
  30. package/components/checkbox/dist/index.js +1794 -0
  31. package/components/checkbox/dist/registered.js +1795 -0
  32. package/components/checkbox/dist/styles/auro-checkbox-css.d.ts +2 -0
  33. package/components/checkbox/dist/styles/auro-checkbox-group-css.d.ts +2 -0
  34. package/components/checkbox/dist/styles/color-css.d.ts +2 -0
  35. package/components/checkbox/dist/styles/colorGroup-css.d.ts +2 -0
  36. package/components/checkbox/dist/styles/tokens-css.d.ts +2 -0
  37. package/components/combobox/README.md +154 -0
  38. package/components/combobox/demo/api.html +63 -0
  39. package/components/combobox/demo/api.js +36 -0
  40. package/components/combobox/demo/api.md +1326 -0
  41. package/components/combobox/demo/api.min.js +18691 -0
  42. package/components/combobox/demo/index.html +63 -0
  43. package/components/combobox/demo/index.js +26 -0
  44. package/components/combobox/demo/index.md +725 -0
  45. package/components/combobox/demo/index.min.js +18545 -0
  46. package/components/combobox/demo/readme.html +57 -0
  47. package/components/combobox/demo/readme.md +154 -0
  48. package/components/combobox/dist/auro-combobox.d.ts +434 -0
  49. package/components/combobox/dist/bibtemplateVersion.d.ts +2 -0
  50. package/components/combobox/dist/dropdownVersion.d.ts +2 -0
  51. package/components/combobox/dist/index.d.ts +2 -0
  52. package/components/combobox/dist/index.js +16999 -0
  53. package/components/combobox/dist/inputVersion.d.ts +2 -0
  54. package/components/combobox/dist/registered.js +17001 -0
  55. package/components/combobox/dist/styles/emphasized/style-css.d.ts +2 -0
  56. package/components/combobox/dist/styles/snowflake/style-css.d.ts +2 -0
  57. package/components/combobox/dist/styles/style-css.d.ts +2 -0
  58. package/components/counter/README.md +146 -0
  59. package/components/counter/demo/api.html +61 -0
  60. package/components/counter/demo/api.js +20 -0
  61. package/components/counter/demo/api.md +730 -0
  62. package/components/counter/demo/api.min.js +10406 -0
  63. package/components/counter/demo/index.html +61 -0
  64. package/components/counter/demo/index.js +21 -0
  65. package/components/counter/demo/index.md +401 -0
  66. package/components/counter/demo/index.min.js +10370 -0
  67. package/components/counter/demo/readme.html +57 -0
  68. package/components/counter/demo/readme.md +146 -0
  69. package/components/counter/dist/auro-counter-button.d.ts +14 -0
  70. package/components/counter/dist/auro-counter-group.d.ts +386 -0
  71. package/components/counter/dist/auro-counter-wrapper.d.ts +22 -0
  72. package/components/counter/dist/auro-counter.d.ts +113 -0
  73. package/components/counter/dist/bibtemplateVersion.d.ts +2 -0
  74. package/components/counter/dist/dropdownVersion.d.ts +2 -0
  75. package/components/counter/dist/helptextVersion.d.ts +2 -0
  76. package/components/counter/dist/iconVersion.d.ts +2 -0
  77. package/components/counter/dist/index.d.ts +3 -0
  78. package/components/counter/dist/index.js +10313 -0
  79. package/components/counter/dist/registered.js +10314 -0
  80. package/components/counter/dist/styles/color-css.d.ts +2 -0
  81. package/components/counter/dist/styles/counter-button-color-css.d.ts +2 -0
  82. package/components/counter/dist/styles/counter-button-css.d.ts +2 -0
  83. package/components/counter/dist/styles/counter-group-css.d.ts +2 -0
  84. package/components/counter/dist/styles/counter-wrapper-color-css.d.ts +2 -0
  85. package/components/counter/dist/styles/counter-wrapper-css.d.ts +2 -0
  86. package/components/counter/dist/styles/shapeSize-css.d.ts +2 -0
  87. package/components/counter/dist/styles/style-css.d.ts +2 -0
  88. package/components/counter/dist/styles/tokens-css.d.ts +2 -0
  89. package/components/datepicker/README.md +141 -0
  90. package/components/datepicker/demo/api.html +63 -0
  91. package/components/datepicker/demo/api.js +35 -0
  92. package/components/datepicker/demo/api.md +1529 -0
  93. package/components/datepicker/demo/api.min.js +29755 -0
  94. package/components/datepicker/demo/index.html +62 -0
  95. package/components/datepicker/demo/index.js +19 -0
  96. package/components/datepicker/demo/index.md +204 -0
  97. package/components/datepicker/demo/index.min.js +29476 -0
  98. package/components/datepicker/demo/readme.html +57 -0
  99. package/components/datepicker/demo/readme.md +141 -0
  100. package/components/datepicker/dist/auro-calendar-cell.d.ts +163 -0
  101. package/components/datepicker/dist/auro-calendar-month.d.ts +20 -0
  102. package/components/datepicker/dist/auro-calendar.d.ts +133 -0
  103. package/components/datepicker/dist/auro-datepicker.d.ts +625 -0
  104. package/components/datepicker/dist/bibtemplateVersion.d.ts +2 -0
  105. package/components/datepicker/dist/buttonVersion.d.ts +2 -0
  106. package/components/datepicker/dist/dropdownVersion.d.ts +2 -0
  107. package/components/datepicker/dist/iconVersion.d.ts +2 -0
  108. package/components/datepicker/dist/index.d.ts +2 -0
  109. package/components/datepicker/dist/index.js +29406 -0
  110. package/components/datepicker/dist/inputVersion.d.ts +2 -0
  111. package/components/datepicker/dist/popoverVersion.d.ts +2 -0
  112. package/components/datepicker/dist/registered.js +29406 -0
  113. package/components/datepicker/dist/styles/classic/color-css.d.ts +2 -0
  114. package/components/datepicker/dist/styles/classic/style-css.d.ts +2 -0
  115. package/components/datepicker/dist/styles/color-calendar-css.d.ts +2 -0
  116. package/components/datepicker/dist/styles/color-cell-css.d.ts +2 -0
  117. package/components/datepicker/dist/styles/color-css.d.ts +2 -0
  118. package/components/datepicker/dist/styles/color-month-css.d.ts +2 -0
  119. package/components/datepicker/dist/styles/shapeSize-css.d.ts +2 -0
  120. package/components/datepicker/dist/styles/snowflake/color-css.d.ts +2 -0
  121. package/components/datepicker/dist/styles/snowflake/style-css.d.ts +2 -0
  122. package/components/datepicker/dist/styles/style-auro-calendar-cell-css.d.ts +2 -0
  123. package/components/datepicker/dist/styles/style-auro-calendar-css.d.ts +2 -0
  124. package/components/datepicker/dist/styles/style-auro-calendar-month-css.d.ts +2 -0
  125. package/components/datepicker/dist/styles/style-css.d.ts +2 -0
  126. package/components/datepicker/dist/styles/tokens-css.d.ts +2 -0
  127. package/components/datepicker/dist/utilities.d.ts +78 -0
  128. package/components/datepicker/dist/utilitiesCalendar.d.ts +38 -0
  129. package/components/datepicker/dist/utilitiesCalendarRender.d.ts +50 -0
  130. package/components/datepicker/dist/vendor/wc-range-datepicker/day.d.ts +5 -0
  131. package/components/datepicker/dist/vendor/wc-range-datepicker/range-datepicker-calendar.d.ts +60 -0
  132. package/components/datepicker/dist/vendor/wc-range-datepicker/range-datepicker-cell.d.ts +1 -0
  133. package/components/datepicker/dist/vendor/wc-range-datepicker/range-datepicker.d.ts +57 -0
  134. package/components/dropdown/README.md +144 -0
  135. package/components/dropdown/demo/api.html +63 -0
  136. package/components/dropdown/demo/api.js +21 -0
  137. package/components/dropdown/demo/api.md +1266 -0
  138. package/components/dropdown/demo/api.min.js +4442 -0
  139. package/components/dropdown/demo/index.html +61 -0
  140. package/components/dropdown/demo/index.js +19 -0
  141. package/components/dropdown/demo/index.md +337 -0
  142. package/components/dropdown/demo/index.min.js +4405 -0
  143. package/components/dropdown/demo/readme.html +57 -0
  144. package/components/dropdown/demo/readme.md +144 -0
  145. package/components/dropdown/dist/auro-dropdown.d.ts +425 -0
  146. package/components/dropdown/dist/auro-dropdownBib.d.ts +68 -0
  147. package/components/dropdown/dist/dropdownVersion.d.ts +2 -0
  148. package/components/dropdown/dist/helptextVersion.d.ts +2 -0
  149. package/components/dropdown/dist/iconVersion.d.ts +2 -0
  150. package/components/dropdown/dist/index.d.ts +2 -0
  151. package/components/dropdown/dist/index.js +4350 -0
  152. package/components/dropdown/dist/registered.js +4350 -0
  153. package/components/dropdown/dist/styles/classic/bibColors-css.d.ts +2 -0
  154. package/components/dropdown/dist/styles/classic/bibStyles-css.d.ts +2 -0
  155. package/components/dropdown/dist/styles/classic/color-css.d.ts +2 -0
  156. package/components/dropdown/dist/styles/classic/style-css.d.ts +2 -0
  157. package/components/dropdown/dist/styles/color-css.d.ts +2 -0
  158. package/components/dropdown/dist/styles/emphasized/style-css.d.ts +2 -0
  159. package/components/dropdown/dist/styles/shapeSize-css.d.ts +2 -0
  160. package/components/dropdown/dist/styles/snowflake/style-css.d.ts +2 -0
  161. package/components/dropdown/dist/styles/style-css.d.ts +2 -0
  162. package/components/dropdown/dist/styles/tokens-css.d.ts +2 -0
  163. package/components/form/README.md +142 -0
  164. package/components/form/demo/api.html +56 -0
  165. package/components/form/demo/api.js +3 -0
  166. package/components/form/demo/api.md +51 -0
  167. package/components/form/demo/api.min.js +638 -0
  168. package/components/form/demo/autocomplete.html +31 -0
  169. package/components/form/demo/index.html +57 -0
  170. package/components/form/demo/index.js +4 -0
  171. package/components/form/demo/index.md +403 -0
  172. package/components/form/demo/index.min.js +639 -0
  173. package/components/form/demo/readme.html +57 -0
  174. package/components/form/demo/readme.md +142 -0
  175. package/components/form/demo/registerDemoDeps.js +23 -0
  176. package/components/form/demo/working.html +124 -0
  177. package/components/form/dist/auro-form.d.ts +223 -0
  178. package/components/form/dist/index.d.ts +2 -0
  179. package/components/form/dist/index.js +614 -0
  180. package/components/form/dist/registered.d.ts +1 -0
  181. package/components/form/dist/registered.js +614 -0
  182. package/components/form/dist/styles/style-css.d.ts +2 -0
  183. package/components/helptext/dist/auro-helptext.d.ts +59 -0
  184. package/components/helptext/dist/index.d.ts +2 -0
  185. package/components/helptext/dist/index.js +207 -0
  186. package/components/helptext/dist/registered.js +207 -0
  187. package/components/helptext/dist/styles/color-css.d.ts +2 -0
  188. package/components/helptext/dist/styles/style-css.d.ts +2 -0
  189. package/components/helptext/dist/styles/tokens-css.d.ts +2 -0
  190. package/components/input/README.md +139 -0
  191. package/components/input/demo/api.html +48 -0
  192. package/components/input/demo/api.js +29 -0
  193. package/components/input/demo/api.md +1366 -0
  194. package/components/input/demo/api.min.js +8542 -0
  195. package/components/input/demo/index.html +49 -0
  196. package/components/input/demo/index.js +20 -0
  197. package/components/input/demo/index.md +270 -0
  198. package/components/input/demo/index.min.js +8461 -0
  199. package/components/input/demo/readme.html +57 -0
  200. package/components/input/demo/readme.md +139 -0
  201. package/components/input/dist/auro-input.d.ts +167 -0
  202. package/components/input/dist/base-input.d.ts +566 -0
  203. package/components/input/dist/buttonVersion.d.ts +2 -0
  204. package/components/input/dist/helptextVersion.d.ts +2 -0
  205. package/components/input/dist/i18n.d.ts +18 -0
  206. package/components/input/dist/iconVersion.d.ts +2 -0
  207. package/components/input/dist/index.d.ts +2 -0
  208. package/components/input/dist/index.js +8367 -0
  209. package/components/input/dist/registered.js +8367 -0
  210. package/components/input/dist/styles/classic/color-css.d.ts +2 -0
  211. package/components/input/dist/styles/classic/style-css.d.ts +2 -0
  212. package/components/input/dist/styles/color-css.d.ts +2 -0
  213. package/components/input/dist/styles/default/borders-css.d.ts +2 -0
  214. package/components/input/dist/styles/default/color-css.d.ts +2 -0
  215. package/components/input/dist/styles/default/mixins-css.d.ts +2 -0
  216. package/components/input/dist/styles/default/notificationIcons-css.d.ts +2 -0
  217. package/components/input/dist/styles/default/style-css.d.ts +2 -0
  218. package/components/input/dist/styles/emphasized/color-css.d.ts +2 -0
  219. package/components/input/dist/styles/emphasized/style-css.d.ts +2 -0
  220. package/components/input/dist/styles/mixins-css.d.ts +2 -0
  221. package/components/input/dist/styles/shapeSize-css.d.ts +2 -0
  222. package/components/input/dist/styles/snowflake/style-css.d.ts +2 -0
  223. package/components/input/dist/styles/style-css.d.ts +2 -0
  224. package/components/input/dist/styles/tokens-css.d.ts +2 -0
  225. package/components/input/dist/utilities.d.ts +25 -0
  226. package/components/layoutElement/dist/auroElement.d.ts +34 -0
  227. package/components/layoutElement/dist/index.d.ts +2 -0
  228. package/components/layoutElement/dist/index.js +98 -0
  229. package/components/layoutElement/dist/registered.js +98 -0
  230. package/components/menu/README.md +145 -0
  231. package/components/menu/demo/api.html +62 -0
  232. package/components/menu/demo/api.js +27 -0
  233. package/components/menu/demo/api.md +1011 -0
  234. package/components/menu/demo/api.min.js +1762 -0
  235. package/components/menu/demo/index.html +58 -0
  236. package/components/menu/demo/index.js +28 -0
  237. package/components/menu/demo/index.md +61 -0
  238. package/components/menu/demo/index.min.js +1708 -0
  239. package/components/menu/demo/readme.html +57 -0
  240. package/components/menu/demo/readme.md +145 -0
  241. package/components/menu/dist/auro-menu-utils.d.ts +34 -0
  242. package/components/menu/dist/auro-menu.d.ts +246 -0
  243. package/components/menu/dist/auro-menuoption.d.ts +81 -0
  244. package/components/menu/dist/dropdownVersion.d.ts +2 -0
  245. package/components/menu/dist/iconVersion.d.ts +2 -0
  246. package/components/menu/dist/index.d.ts +4 -0
  247. package/components/menu/dist/index.js +1691 -0
  248. package/components/menu/dist/registered.js +1651 -0
  249. package/components/menu/dist/styles/default/color-menu-css.d.ts +2 -0
  250. package/components/menu/dist/styles/default/color-menuoption-css.d.ts +2 -0
  251. package/components/menu/dist/styles/default/style-menu-css.d.ts +2 -0
  252. package/components/menu/dist/styles/default/style-menuoption-css.d.ts +2 -0
  253. package/components/menu/dist/styles/default/tokens-css.d.ts +2 -0
  254. package/components/radio/README.md +137 -0
  255. package/components/radio/demo/api.html +59 -0
  256. package/components/radio/demo/api.js +19 -0
  257. package/components/radio/demo/api.md +602 -0
  258. package/components/radio/demo/api.min.js +1951 -0
  259. package/components/radio/demo/index.html +56 -0
  260. package/components/radio/demo/index.js +8 -0
  261. package/components/radio/demo/index.md +150 -0
  262. package/components/radio/demo/index.min.js +1908 -0
  263. package/components/radio/demo/readme.html +57 -0
  264. package/components/radio/demo/readme.md +137 -0
  265. package/components/radio/dist/auro-radio-group.d.ts +194 -0
  266. package/components/radio/dist/auro-radio.d.ts +147 -0
  267. package/components/radio/dist/helptextVersion.d.ts +2 -0
  268. package/components/radio/dist/index.d.ts +3 -0
  269. package/components/radio/dist/index.js +1857 -0
  270. package/components/radio/dist/registered.js +1858 -0
  271. package/components/radio/dist/styles/auro-radio-group-css.d.ts +2 -0
  272. package/components/radio/dist/styles/color-css.d.ts +2 -0
  273. package/components/radio/dist/styles/groupColor-css.d.ts +2 -0
  274. package/components/radio/dist/styles/style-css.d.ts +2 -0
  275. package/components/radio/dist/styles/tokens-css.d.ts +2 -0
  276. package/components/select/README.md +145 -0
  277. package/components/select/demo/api.html +77 -0
  278. package/components/select/demo/api.js +35 -0
  279. package/components/select/demo/api.md +1413 -0
  280. package/components/select/demo/api.min.js +10502 -0
  281. package/components/select/demo/index.html +73 -0
  282. package/components/select/demo/index.js +9 -0
  283. package/components/select/demo/index.md +1151 -0
  284. package/components/select/demo/index.min.js +10390 -0
  285. package/components/select/demo/readme.html +57 -0
  286. package/components/select/demo/readme.md +145 -0
  287. package/components/select/dist/auro-select.d.ts +512 -0
  288. package/components/select/dist/bibtemplateVersion.d.ts +2 -0
  289. package/components/select/dist/dropdownVersion.d.ts +2 -0
  290. package/components/select/dist/helptextVersion.d.ts +2 -0
  291. package/components/select/dist/index.d.ts +2 -0
  292. package/components/select/dist/index.js +8898 -0
  293. package/components/select/dist/registered.js +8898 -0
  294. package/components/select/dist/styles/shapeSize-css.d.ts +2 -0
  295. package/components/select/dist/styles/style-css.d.ts +2 -0
  296. package/components/select/dist/styles/tokens-css.d.ts +2 -0
  297. package/package.json +218 -0
package/components/input/demo/index.html ADDED
@@ -0,0 +1,49 @@
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</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 -->
21
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
22
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/elementDemoStyles.css" />
23
+ </head>
24
+ <body class="auro-markdown">
25
+ <main></main>
26
+
27
+ <script type="module">
28
+ import 'https://cdn.jsdelivr.net/npm/marked@latest/marked.min.js';
29
+ import 'https://cdn.jsdelivr.net/npm/prismjs@latest/prism.js';
30
+ fetch('./index.md')
31
+ .then((response) => response.text())
32
+ .then((text) => {
33
+ const rawHtml = marked.parse(text);
34
+ document.querySelector('main').innerHTML = rawHtml;
35
+ Prism.highlightAll();
36
+ });
37
+ </script>
38
+
39
+ <script type="module" data-demo-script="true">
40
+ import { initExamples } from "./index.min.js";
41
+
42
+ initExamples();
43
+ </script>
44
+
45
+ <!-- If additional elements are needed for the demo, add them here. -->
46
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/dist/auro-accordion__bundled.js" type="module"></script>
47
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-radio@latest/dist/auro-radio__bundled.js" type="module"></script>
48
+ </body>
49
+ </html>
package/components/input/demo/index.js ADDED
@@ -0,0 +1,20 @@
1
+ import { changeLang } from "../apiExamples/changeLang";
2
+ import { AuroInput } from '../src/auro-input.js';
3
+
4
+ AuroInput.register();
5
+ AuroInput.register('custom-input');
6
+
7
+ export function initExamples(initCount) {
8
+ initCount = initCount || 0;
9
+
10
+ try {
11
+ changeLang();
12
+ } catch (error) {
13
+ if (initCount <= 20) {
14
+ // setTimeout handles issue where content is sometimes loaded after the functions get called
15
+ setTimeout(() => {
16
+ initExamples(initCount + 1);
17
+ }, 100);
18
+ }
19
+ }
20
+ }
package/components/input/demo/index.md ADDED
@@ -0,0 +1,270 @@
1
+ # Input
2
+
3
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/description.md) -->
4
+ <!-- The below content is automatically added from ./../docs/partials/description.md -->
5
+ 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.
6
+ <!-- AURO-GENERATED-CONTENT:END -->
7
+
8
+ ## auro-input use cases
9
+
10
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/useCases.md) -->
11
+ <!-- The below content is automatically added from ./../docs/partials/useCases.md -->
12
+ The `<auro-input>` element should be used in situations where users may:
13
+
14
+ * needs to enter information
15
+ * be filling out a form
16
+ <!-- AURO-GENERATED-CONTENT:END -->
17
+
18
+ ## Emphasized Layout
19
+
20
+ <div class="exampleWrapper--ondark">
21
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/emphasized/basic.html) -->
22
+ <!-- The below content is automatically added from ./../apiExamples/emphasized/basic.html -->
23
+ <!-- <auro-input layout="default" shape="rounded" size="xl" placeholder="Departure">
24
+ <label slot="label">From</label>
25
+ </auro-input> -->
26
+ <auro-input id="alpha" value="lax" layout="emphasized" shape="box" size="xl" placeholder="Departure" style="width: 249px;" ondark required>
27
+ <span slot="ariaLabel.clear">Clear All</span>
28
+ <label slot="label">From</label>
29
+ <span slot="helpText">Example help text</span>
30
+ <span slot="displayValue">
31
+ <div>
32
+ <div class="mainText">LAX</div>
33
+ <div class="subText">Los Angeles</div>
34
+ </div>
35
+ </span>
36
+ </auro-input>
37
+ <auro-input id="beta" layout="emphasized" shape="pill" size="xl" placeholder="Departure" style="width: 249px;" ondark required>
38
+ <span slot="ariaLabel.clear">Clear All</span>
39
+ <label slot="label">From</label>
40
+ <span slot="helpText">Example help text</span>
41
+ </auro-input>
42
+ <auro-input id="charlie" layout="emphasized-left" shape="pill-left" size="xl" placeholder="Departure" style="width: 249px;" ondark required>
43
+ <span slot="ariaLabel.clear">Clear All</span>
44
+ <label slot="label">From</label>
45
+ <span slot="helpText">Example help text</span>
46
+ </auro-input>
47
+ <auro-input id="delta" layout="emphasized-right" shape="pill-right" size="xl" placeholder="Departure" style="width: 249px;" ondark required>
48
+ <span slot="ariaLabel.clear">Clear All</span>
49
+ <label slot="label">From</label>
50
+ <span slot="helpText">Example help text</span>
51
+ </auro-input>
52
+ <!-- AURO-GENERATED-CONTENT:END -->
53
+ </div>
54
+
55
+ ## Snowflake Layout
56
+
57
+ <div class="exampleWrapper--ondark">
58
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/snowflake/basic.html) -->
59
+ <!-- The below content is automatically added from ./../apiExamples/snowflake/basic.html -->
60
+ <auro-input id="snowflakePill" layout="snowflake" shape="snowflake" size="lg" placeholder="Departure" style="width: 249px;" ondark required>
61
+ <span slot="ariaLabel.clear">Clear All</span>
62
+ <label slot="label">From</label>
63
+ <span slot="helpText">Example help text</span>
64
+ </auro-input>
65
+ <!-- AURO-GENERATED-CONTENT:END -->
66
+ </div>
67
+
68
+ ## Default component
69
+
70
+ The default component supports the basic input `type="text"` structure. The `(optional)` label is provided to instruct the user that their input is not required. Use the `bordered` attribute for a bordered `<auro-input>`.
71
+
72
+ <div class="exampleWrapper">
73
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
74
+ <!-- The below content is automatically added from ./../apiExamples/basic.html -->
75
+ <auro-input>
76
+ <span slot="ariaLabel.clear">Clear All</span>
77
+ <span slot="label">Label</span>
78
+ <span slot="helpText">Help Text</span>
79
+ </auro-input>
80
+ <!-- AURO-GENERATED-CONTENT:END -->
81
+ </div>
82
+ <div class="exampleWrapper--ondark" aria-hidden>
83
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/onDark.html) -->
84
+ <!-- The below content is automatically added from ./../apiExamples/onDark.html -->
85
+ <auro-input ondark>
86
+ <span slot="label">Label</span>
87
+ <span slot="helpText">Help Text</span>
88
+ </auro-input>
89
+ <!-- AURO-GENERATED-CONTENT:END -->
90
+ </div>
91
+ <auro-accordion alignRight>
92
+ <span slot="trigger">See code</span>
93
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic.html) -->
94
+ <!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
95
+
96
+ ```html
97
+ <auro-input>
98
+ <span slot="ariaLabel.clear">Clear All</span>
99
+ <span slot="label">Label</span>
100
+ <span slot="helpText">Help Text</span>
101
+ </auro-input>
102
+ ```
103
+ <!-- AURO-GENERATED-CONTENT:END -->
104
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/onDark.html) -->
105
+ <!-- The below code snippet is automatically added from ./../apiExamples/onDark.html -->
106
+
107
+ ```html
108
+ <auro-input ondark>
109
+ <span slot="label">Label</span>
110
+ <span slot="helpText">Help Text</span>
111
+ </auro-input>
112
+ ```
113
+ <!-- AURO-GENERATED-CONTENT:END -->
114
+ </auro-accordion>
115
+
116
+ ## Placeholder
117
+
118
+ Use the `placeholder` attribute to add a custom placeholder message within the element.
119
+
120
+ <div class="exampleWrapper">
121
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/placeholder.html) -->
122
+ <!-- The below content is automatically added from ./../apiExamples/placeholder.html -->
123
+ <auro-input placeholder="John Doe" required>
124
+ <span slot="label">Full name</span>
125
+ <span slot="helpText">Please enter your full name.</span>
126
+ </auro-input>
127
+ <!-- AURO-GENERATED-CONTENT:END -->
128
+ </div>
129
+ <auro-accordion alignRight>
130
+ <span slot="trigger">See code</span>
131
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/placeholder.html) -->
132
+ <!-- The below code snippet is automatically added from ./../apiExamples/placeholder.html -->
133
+
134
+ ```html
135
+ <auro-input placeholder="John Doe" required>
136
+ <span slot="label">Full name</span>
137
+ <span slot="helpText">Please enter your full name.</span>
138
+ </auro-input>
139
+ ```
140
+ <!-- AURO-GENERATED-CONTENT:END -->
141
+ </auro-accordion>
142
+
143
+ ## Disabled
144
+
145
+ Use the `disabled` attribute to prevent the user from interacting with the input.
146
+
147
+ <div class="exampleWrapper">
148
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/disabled.html) -->
149
+ <!-- The below content is automatically added from ./../apiExamples/disabled.html -->
150
+ <auro-input disabled type="date">
151
+ <span slot="label">Disabled</span>
152
+ <span slot="helpText">Help Text</span>
153
+ </auro-input>
154
+ <!-- AURO-GENERATED-CONTENT:END -->
155
+ </div>
156
+ <div class="exampleWrapper--ondark" aria-hidden>
157
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/onDarkDisabled.html) -->
158
+ <!-- The below content is automatically added from ./../apiExamples/onDarkDisabled.html -->
159
+ <auro-input onDark disabled type="date">
160
+ <span slot="label">Arrival date</span>
161
+ <span slot="helpText">Help Text</span>
162
+ </auro-input>
163
+ <!-- AURO-GENERATED-CONTENT:END -->
164
+ </div>
165
+ <auro-accordion alignRight>
166
+ <span slot="trigger">See code</span>
167
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/disabled.html) -->
168
+ <!-- The below code snippet is automatically added from ./../apiExamples/disabled.html -->
169
+
170
+ ```html
171
+ <auro-input disabled type="date">
172
+ <span slot="label">Disabled</span>
173
+ <span slot="helpText">Help Text</span>
174
+ </auro-input>
175
+ ```
176
+ <!-- AURO-GENERATED-CONTENT:END -->
177
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/onDarkDisabled.html) -->
178
+ <!-- The below code snippet is automatically added from ./../apiExamples/onDarkDisabled.html -->
179
+
180
+ ```html
181
+ <auro-input onDark disabled type="date">
182
+ <span slot="label">Arrival date</span>
183
+ <span slot="helpText">Help Text</span>
184
+ </auro-input>
185
+ ```
186
+ <!-- AURO-GENERATED-CONTENT:END -->
187
+ </auro-accordion>
188
+
189
+ ## Active Label
190
+
191
+ Example use cases for auro-input support the `activeLabel` attribute. If set, the label will stay fixed in the active position.
192
+
193
+ <div class="exampleWrapper">
194
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/activeLabel.html) -->
195
+ <!-- The below content is automatically added from ./../apiExamples/activeLabel.html -->
196
+ <auro-input activeLabel>
197
+ <span slot="label">Address</span>
198
+ <span slot="helpText">Please enter your home address.</span>
199
+ </auro-input>
200
+ <!-- AURO-GENERATED-CONTENT:END -->
201
+ </div>
202
+ <auro-accordion alignRight>
203
+ <span slot="trigger">See code</span>
204
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/activeLabel.html) -->
205
+ <!-- The below code snippet is automatically added from ./../apiExamples/activeLabel.html -->
206
+
207
+ ```html
208
+ <auro-input activeLabel>
209
+ <span slot="label">Address</span>
210
+ <span slot="helpText">Please enter your home address.</span>
211
+ </auro-input>
212
+ ```
213
+ <!-- AURO-GENERATED-CONTENT:END -->
214
+ </auro-accordion>
215
+
216
+ ## Value
217
+
218
+ Use the `value` attribute to preset the value of the element.
219
+
220
+ <div class="exampleWrapper">
221
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/programmaticValue.html) -->
222
+ <!-- The below content is automatically added from ./../apiExamples/programmaticValue.html -->
223
+ <auro-input value="Alaska Airlines is the best!">
224
+ <span slot="label">Name</span>
225
+ <span slot="helpText">Please enter your full name.</span>
226
+ </auro-input>
227
+ <!-- AURO-GENERATED-CONTENT:END -->
228
+ </div>
229
+ <auro-accordion alignRight>
230
+ <span slot="trigger">See code</span>
231
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/programmaticValue.html) -->
232
+ <!-- The below code snippet is automatically added from ./../apiExamples/programmaticValue.html -->
233
+
234
+ ```html
235
+ <auro-input value="Alaska Airlines is the best!">
236
+ <span slot="label">Name</span>
237
+ <span slot="helpText">Please enter your full name.</span>
238
+ </auro-input>
239
+ ```
240
+ <!-- AURO-GENERATED-CONTENT:END -->
241
+ </auro-accordion>
242
+
243
+ ## Pattern
244
+
245
+ Use the `pattern` attribute to set custom input validation. This example also uses the `spellcheck` attribute set to `false` which in turn sets `autocorrect` to `off` and `autocapitalize` to `none`. Additionally the `maxlength` attribute sets the maximum length of characters that can be entered.
246
+
247
+ The `<auro-input>` component supports setting a custom validity message specific to the pattern validation by using the `setCustomValidityPatternMismatch` attribute.
248
+
249
+ <div class="exampleWrapper">
250
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/pattern.html) -->
251
+ <!-- The below content is automatically added from ./../apiExamples/pattern.html -->
252
+ <auro-input pattern="[a-z]{1,15}" spellcheck="false" setCustomValidityPatternMismatch="Only contain lowercase letters w/no spaces">
253
+ <span slot="label">Username</span>
254
+ <span slot="helpText">Please enter a username.</span>
255
+ </auro-input>
256
+ <!-- AURO-GENERATED-CONTENT:END -->
257
+ </div>
258
+ <auro-accordion alignRight>
259
+ <span slot="trigger">See code</span>
260
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/pattern.html) -->
261
+ <!-- The below code snippet is automatically added from ./../apiExamples/pattern.html -->
262
+
263
+ ```html
264
+ <auro-input pattern="[a-z]{1,15}" spellcheck="false" setCustomValidityPatternMismatch="Only contain lowercase letters w/no spaces">
265
+ <span slot="label">Username</span>
266
+ <span slot="helpText">Please enter a username.</span>
267
+ </auro-input>
268
+ ```
269
+ <!-- AURO-GENERATED-CONTENT:END -->
270
+ </auro-accordion>