@aurodesignsystem-dev/auro-formkit 0.0.0-pr593.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 (268) 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 +39 -0
  6. package/components/bibtemplate/dist/headerVersion.d.ts +2 -0
  7. package/components/bibtemplate/dist/iconVersion.d.ts +2 -0
  8. package/components/bibtemplate/dist/index.d.ts +2 -0
  9. package/components/bibtemplate/dist/index.js +709 -0
  10. package/components/bibtemplate/dist/registered.js +709 -0
  11. package/components/bibtemplate/dist/styles/color-css.d.ts +2 -0
  12. package/components/bibtemplate/dist/styles/style-css.d.ts +2 -0
  13. package/components/bibtemplate/dist/styles/tokens-css.d.ts +2 -0
  14. package/components/checkbox/README.md +142 -0
  15. package/components/checkbox/demo/api.html +55 -0
  16. package/components/checkbox/demo/api.js +17 -0
  17. package/components/checkbox/demo/api.md +401 -0
  18. package/components/checkbox/demo/api.min.js +1833 -0
  19. package/components/checkbox/demo/index.html +51 -0
  20. package/components/checkbox/demo/index.js +8 -0
  21. package/components/checkbox/demo/index.md +327 -0
  22. package/components/checkbox/demo/index.min.js +1808 -0
  23. package/components/checkbox/demo/readme.html +50 -0
  24. package/components/checkbox/demo/readme.md +142 -0
  25. package/components/checkbox/dist/auro-checkbox-group.d.ts +166 -0
  26. package/components/checkbox/dist/auro-checkbox.d.ts +129 -0
  27. package/components/checkbox/dist/helptextVersion.d.ts +2 -0
  28. package/components/checkbox/dist/index.d.ts +3 -0
  29. package/components/checkbox/dist/index.js +1757 -0
  30. package/components/checkbox/dist/registered.js +1758 -0
  31. package/components/checkbox/dist/styles/auro-checkbox-css.d.ts +2 -0
  32. package/components/checkbox/dist/styles/auro-checkbox-group-css.d.ts +2 -0
  33. package/components/checkbox/dist/styles/color-css.d.ts +2 -0
  34. package/components/checkbox/dist/styles/colorGroup-css.d.ts +2 -0
  35. package/components/checkbox/dist/styles/tokens-css.d.ts +2 -0
  36. package/components/combobox/README.md +152 -0
  37. package/components/combobox/demo/api.html +57 -0
  38. package/components/combobox/demo/api.js +36 -0
  39. package/components/combobox/demo/api.md +1209 -0
  40. package/components/combobox/demo/api.min.js +15117 -0
  41. package/components/combobox/demo/index.html +56 -0
  42. package/components/combobox/demo/index.js +26 -0
  43. package/components/combobox/demo/index.md +621 -0
  44. package/components/combobox/demo/index.min.js +14971 -0
  45. package/components/combobox/demo/readme.html +50 -0
  46. package/components/combobox/demo/readme.md +152 -0
  47. package/components/combobox/dist/auro-combobox.d.ts +384 -0
  48. package/components/combobox/dist/bibtemplateVersion.d.ts +2 -0
  49. package/components/combobox/dist/dropdownVersion.d.ts +2 -0
  50. package/components/combobox/dist/index.d.ts +2 -0
  51. package/components/combobox/dist/index.js +13554 -0
  52. package/components/combobox/dist/inputVersion.d.ts +2 -0
  53. package/components/combobox/dist/registered.js +13556 -0
  54. package/components/combobox/dist/styles/style-css.d.ts +2 -0
  55. package/components/counter/README.md +146 -0
  56. package/components/counter/demo/api.html +54 -0
  57. package/components/counter/demo/api.js +20 -0
  58. package/components/counter/demo/api.md +584 -0
  59. package/components/counter/demo/api.min.js +7111 -0
  60. package/components/counter/demo/index.html +54 -0
  61. package/components/counter/demo/index.js +21 -0
  62. package/components/counter/demo/index.md +244 -0
  63. package/components/counter/demo/index.min.js +7075 -0
  64. package/components/counter/demo/readme.html +50 -0
  65. package/components/counter/demo/readme.md +146 -0
  66. package/components/counter/dist/auro-counter-button.d.ts +12 -0
  67. package/components/counter/dist/auro-counter-group.d.ts +235 -0
  68. package/components/counter/dist/auro-counter-wrapper.d.ts +22 -0
  69. package/components/counter/dist/auro-counter.d.ts +97 -0
  70. package/components/counter/dist/bibtemplateVersion.d.ts +2 -0
  71. package/components/counter/dist/dropdownVersion.d.ts +2 -0
  72. package/components/counter/dist/iconVersion.d.ts +2 -0
  73. package/components/counter/dist/index.d.ts +3 -0
  74. package/components/counter/dist/index.js +7018 -0
  75. package/components/counter/dist/registered.js +7019 -0
  76. package/components/counter/dist/styles/color-css.d.ts +2 -0
  77. package/components/counter/dist/styles/counter-button-color-css.d.ts +2 -0
  78. package/components/counter/dist/styles/counter-button-css.d.ts +2 -0
  79. package/components/counter/dist/styles/counter-group-css.d.ts +2 -0
  80. package/components/counter/dist/styles/counter-wrapper-color-css.d.ts +2 -0
  81. package/components/counter/dist/styles/counter-wrapper-css.d.ts +2 -0
  82. package/components/counter/dist/styles/style-css.d.ts +2 -0
  83. package/components/counter/dist/styles/tokens-css.d.ts +2 -0
  84. package/components/datepicker/README.md +140 -0
  85. package/components/datepicker/demo/api.html +57 -0
  86. package/components/datepicker/demo/api.js +35 -0
  87. package/components/datepicker/demo/api.md +1479 -0
  88. package/components/datepicker/demo/api.min.js +24534 -0
  89. package/components/datepicker/demo/index.html +56 -0
  90. package/components/datepicker/demo/index.js +19 -0
  91. package/components/datepicker/demo/index.md +112 -0
  92. package/components/datepicker/demo/index.min.js +24255 -0
  93. package/components/datepicker/demo/readme.html +50 -0
  94. package/components/datepicker/demo/readme.md +140 -0
  95. package/components/datepicker/dist/auro-calendar-cell.d.ts +163 -0
  96. package/components/datepicker/dist/auro-calendar-month.d.ts +20 -0
  97. package/components/datepicker/dist/auro-calendar.d.ts +133 -0
  98. package/components/datepicker/dist/auro-datepicker.d.ts +466 -0
  99. package/components/datepicker/dist/bibtemplateVersion.d.ts +2 -0
  100. package/components/datepicker/dist/buttonVersion.d.ts +2 -0
  101. package/components/datepicker/dist/dropdownVersion.d.ts +2 -0
  102. package/components/datepicker/dist/index.d.ts +2 -0
  103. package/components/datepicker/dist/index.js +24185 -0
  104. package/components/datepicker/dist/inputVersion.d.ts +2 -0
  105. package/components/datepicker/dist/popoverVersion.d.ts +2 -0
  106. package/components/datepicker/dist/registered.js +24185 -0
  107. package/components/datepicker/dist/styles/color-calendar-css.d.ts +2 -0
  108. package/components/datepicker/dist/styles/color-cell-css.d.ts +2 -0
  109. package/components/datepicker/dist/styles/color-css.d.ts +2 -0
  110. package/components/datepicker/dist/styles/color-month-css.d.ts +2 -0
  111. package/components/datepicker/dist/styles/style-auro-calendar-cell-css.d.ts +2 -0
  112. package/components/datepicker/dist/styles/style-auro-calendar-css.d.ts +2 -0
  113. package/components/datepicker/dist/styles/style-auro-calendar-month-css.d.ts +2 -0
  114. package/components/datepicker/dist/styles/style-css.d.ts +2 -0
  115. package/components/datepicker/dist/styles/tokens-css.d.ts +2 -0
  116. package/components/datepicker/dist/utilities.d.ts +78 -0
  117. package/components/datepicker/dist/utilitiesCalendar.d.ts +38 -0
  118. package/components/datepicker/dist/utilitiesCalendarRender.d.ts +50 -0
  119. package/components/datepicker/dist/vendor/wc-range-datepicker/day.d.ts +5 -0
  120. package/components/datepicker/dist/vendor/wc-range-datepicker/range-datepicker-calendar.d.ts +60 -0
  121. package/components/datepicker/dist/vendor/wc-range-datepicker/range-datepicker-cell.d.ts +1 -0
  122. package/components/datepicker/dist/vendor/wc-range-datepicker/range-datepicker.d.ts +57 -0
  123. package/components/dropdown/README.md +144 -0
  124. package/components/dropdown/demo/api.html +57 -0
  125. package/components/dropdown/demo/api.js +21 -0
  126. package/components/dropdown/demo/api.md +1434 -0
  127. package/components/dropdown/demo/api.min.js +3826 -0
  128. package/components/dropdown/demo/index.html +55 -0
  129. package/components/dropdown/demo/index.js +19 -0
  130. package/components/dropdown/demo/index.md +510 -0
  131. package/components/dropdown/demo/index.min.js +3789 -0
  132. package/components/dropdown/demo/readme.html +50 -0
  133. package/components/dropdown/demo/readme.md +144 -0
  134. package/components/dropdown/dist/auro-dropdown.d.ts +406 -0
  135. package/components/dropdown/dist/auro-dropdownBib.d.ts +46 -0
  136. package/components/dropdown/dist/dropdownVersion.d.ts +2 -0
  137. package/components/dropdown/dist/helptextVersion.d.ts +2 -0
  138. package/components/dropdown/dist/iconVersion.d.ts +2 -0
  139. package/components/dropdown/dist/index.d.ts +2 -0
  140. package/components/dropdown/dist/index.js +3734 -0
  141. package/components/dropdown/dist/registered.js +3734 -0
  142. package/components/dropdown/dist/styles/bibColors-css.d.ts +2 -0
  143. package/components/dropdown/dist/styles/bibStyles-css.d.ts +2 -0
  144. package/components/dropdown/dist/styles/color-css.d.ts +2 -0
  145. package/components/dropdown/dist/styles/style-css.d.ts +2 -0
  146. package/components/dropdown/dist/styles/tokens-css.d.ts +2 -0
  147. package/components/form/README.md +142 -0
  148. package/components/form/demo/api.html +49 -0
  149. package/components/form/demo/api.js +3 -0
  150. package/components/form/demo/api.md +51 -0
  151. package/components/form/demo/api.min.js +638 -0
  152. package/components/form/demo/autocomplete.html +15 -0
  153. package/components/form/demo/index.html +50 -0
  154. package/components/form/demo/index.js +4 -0
  155. package/components/form/demo/index.md +403 -0
  156. package/components/form/demo/index.min.js +639 -0
  157. package/components/form/demo/readme.html +50 -0
  158. package/components/form/demo/readme.md +142 -0
  159. package/components/form/demo/registerDemoDeps.js +23 -0
  160. package/components/form/demo/working.html +118 -0
  161. package/components/form/dist/auro-form.d.ts +223 -0
  162. package/components/form/dist/index.d.ts +2 -0
  163. package/components/form/dist/index.js +614 -0
  164. package/components/form/dist/registered.d.ts +1 -0
  165. package/components/form/dist/registered.js +614 -0
  166. package/components/form/dist/styles/style-css.d.ts +2 -0
  167. package/components/helptext/dist/auro-helptext.d.ts +61 -0
  168. package/components/helptext/dist/index.d.ts +2 -0
  169. package/components/helptext/dist/index.js +209 -0
  170. package/components/helptext/dist/registered.js +209 -0
  171. package/components/helptext/dist/styles/color-css.d.ts +2 -0
  172. package/components/helptext/dist/styles/style-css.d.ts +2 -0
  173. package/components/helptext/dist/styles/tokens-css.d.ts +2 -0
  174. package/components/input/README.md +135 -0
  175. package/components/input/demo/api.html +42 -0
  176. package/components/input/demo/api.js +29 -0
  177. package/components/input/demo/api.md +1252 -0
  178. package/components/input/demo/api.min.js +7238 -0
  179. package/components/input/demo/index.html +43 -0
  180. package/components/input/demo/index.js +20 -0
  181. package/components/input/demo/index.md +202 -0
  182. package/components/input/demo/index.min.js +7157 -0
  183. package/components/input/demo/readme.html +50 -0
  184. package/components/input/demo/readme.md +135 -0
  185. package/components/input/dist/auro-input.d.ts +31 -0
  186. package/components/input/dist/base-input.d.ts +512 -0
  187. package/components/input/dist/buttonVersion.d.ts +2 -0
  188. package/components/input/dist/helptextVersion.d.ts +2 -0
  189. package/components/input/dist/i18n.d.ts +18 -0
  190. package/components/input/dist/iconVersion.d.ts +2 -0
  191. package/components/input/dist/index.d.ts +2 -0
  192. package/components/input/dist/index.js +7063 -0
  193. package/components/input/dist/registered.js +7063 -0
  194. package/components/input/dist/styles/borders-css.d.ts +2 -0
  195. package/components/input/dist/styles/color-css.d.ts +2 -0
  196. package/components/input/dist/styles/input-css.d.ts +2 -0
  197. package/components/input/dist/styles/label-css.d.ts +2 -0
  198. package/components/input/dist/styles/mixins-css.d.ts +2 -0
  199. package/components/input/dist/styles/notificationIcons-css.d.ts +2 -0
  200. package/components/input/dist/styles/style-css.d.ts +2 -0
  201. package/components/input/dist/styles/tokens-css.d.ts +2 -0
  202. package/components/input/dist/utilities.d.ts +25 -0
  203. package/components/menu/README.md +145 -0
  204. package/components/menu/demo/api.html +55 -0
  205. package/components/menu/demo/api.js +27 -0
  206. package/components/menu/demo/api.md +954 -0
  207. package/components/menu/demo/api.min.js +1538 -0
  208. package/components/menu/demo/index.html +52 -0
  209. package/components/menu/demo/index.js +28 -0
  210. package/components/menu/demo/index.md +61 -0
  211. package/components/menu/demo/index.min.js +1484 -0
  212. package/components/menu/demo/readme.html +50 -0
  213. package/components/menu/demo/readme.md +145 -0
  214. package/components/menu/dist/auro-menu-utils.d.ts +42 -0
  215. package/components/menu/dist/auro-menu.d.ts +205 -0
  216. package/components/menu/dist/auro-menuoption.d.ts +63 -0
  217. package/components/menu/dist/dropdownVersion.d.ts +2 -0
  218. package/components/menu/dist/iconVersion.d.ts +2 -0
  219. package/components/menu/dist/index.d.ts +4 -0
  220. package/components/menu/dist/index.js +1426 -0
  221. package/components/menu/dist/registered.js +1427 -0
  222. package/components/menu/dist/styles/color-menu-css.d.ts +2 -0
  223. package/components/menu/dist/styles/color-menuoption-css.d.ts +2 -0
  224. package/components/menu/dist/styles/style-menu-css.d.ts +2 -0
  225. package/components/menu/dist/styles/style-menuoption-css.d.ts +2 -0
  226. package/components/menu/dist/styles/tokens-css.d.ts +2 -0
  227. package/components/radio/README.md +137 -0
  228. package/components/radio/demo/api.html +53 -0
  229. package/components/radio/demo/api.js +19 -0
  230. package/components/radio/demo/api.md +562 -0
  231. package/components/radio/demo/api.min.js +1944 -0
  232. package/components/radio/demo/index.html +50 -0
  233. package/components/radio/demo/index.js +8 -0
  234. package/components/radio/demo/index.md +150 -0
  235. package/components/radio/demo/index.min.js +1901 -0
  236. package/components/radio/demo/readme.html +50 -0
  237. package/components/radio/demo/readme.md +137 -0
  238. package/components/radio/dist/auro-radio-group.d.ts +194 -0
  239. package/components/radio/dist/auro-radio.d.ts +144 -0
  240. package/components/radio/dist/helptextVersion.d.ts +2 -0
  241. package/components/radio/dist/index.d.ts +3 -0
  242. package/components/radio/dist/index.js +1850 -0
  243. package/components/radio/dist/registered.js +1851 -0
  244. package/components/radio/dist/styles/auro-radio-group-css.d.ts +2 -0
  245. package/components/radio/dist/styles/color-css.d.ts +2 -0
  246. package/components/radio/dist/styles/groupColor-css.d.ts +2 -0
  247. package/components/radio/dist/styles/style-css.d.ts +2 -0
  248. package/components/radio/dist/styles/tokens-css.d.ts +2 -0
  249. package/components/select/README.md +144 -0
  250. package/components/select/demo/api.html +71 -0
  251. package/components/select/demo/api.js +35 -0
  252. package/components/select/demo/api.md +1313 -0
  253. package/components/select/demo/api.min.js +7763 -0
  254. package/components/select/demo/index.html +66 -0
  255. package/components/select/demo/index.js +9 -0
  256. package/components/select/demo/index.md +815 -0
  257. package/components/select/demo/index.min.js +7651 -0
  258. package/components/select/demo/readme.html +50 -0
  259. package/components/select/demo/readme.md +144 -0
  260. package/components/select/dist/auro-select.d.ts +359 -0
  261. package/components/select/dist/bibtemplateVersion.d.ts +2 -0
  262. package/components/select/dist/dropdownVersion.d.ts +2 -0
  263. package/components/select/dist/index.d.ts +2 -0
  264. package/components/select/dist/index.js +6300 -0
  265. package/components/select/dist/registered.js +6300 -0
  266. package/components/select/dist/styles/style-css.d.ts +2 -0
  267. package/package.json +217 -0
  268. package/packages/build-tools/src/postinstall.mjs +12 -0
package/components/input/demo/index.html ADDED
@@ -0,0 +1,43 @@
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 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">
14
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
15
+ <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>
18
+ <body class="auro-markdown">
19
+ <main></main>
20
+
21
+ <script type="module">
22
+ import 'https://cdn.jsdelivr.net/npm/marked@latest/marked.min.js';
23
+ import 'https://cdn.jsdelivr.net/npm/prismjs@latest/prism.js';
24
+ fetch('./index.md')
25
+ .then((response) => response.text())
26
+ .then((text) => {
27
+ const rawHtml = marked.parse(text);
28
+ document.querySelector('main').innerHTML = rawHtml;
29
+ Prism.highlightAll();
30
+ });
31
+ </script>
32
+
33
+ <script type="module" data-demo-script="true">
34
+ import { initExamples } from "./index.min.js";
35
+
36
+ initExamples();
37
+ </script>
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/dist/auro-accordion__bundled.js" type="module"></script>
41
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-radio@latest/dist/auro-radio__bundled.js" type="module"></script>
42
+ </body>
43
+ </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,202 @@
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
+ ## Default component
19
+
20
+ 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>`.
21
+
22
+ <div class="exampleWrapper">
23
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
24
+ <!-- The below content is automatically added from ./../apiExamples/basic.html -->
25
+ <auro-input bordered></auro-input>
26
+ <!-- AURO-GENERATED-CONTENT:END -->
27
+ </div>
28
+ <div class="exampleWrapper--ondark" aria-hidden>
29
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/onDark.html) -->
30
+ <!-- The below content is automatically added from ./../apiExamples/onDark.html -->
31
+ <auro-input onDark bordered></auro-input>
32
+ <!-- AURO-GENERATED-CONTENT:END -->
33
+ </div>
34
+ <auro-accordion alignRight>
35
+ <span slot="trigger">See code</span>
36
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic.html) -->
37
+ <!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
38
+
39
+ ```html
40
+ <auro-input bordered></auro-input>
41
+ ```
42
+ <!-- AURO-GENERATED-CONTENT:END -->
43
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/onDark.html) -->
44
+ <!-- The below code snippet is automatically added from ./../apiExamples/onDark.html -->
45
+
46
+ ```html
47
+ <auro-input onDark bordered></auro-input>
48
+ ```
49
+ <!-- AURO-GENERATED-CONTENT:END -->
50
+ </auro-accordion>
51
+
52
+ ## Placeholder
53
+
54
+ Use the `placeholder` attribute to add a custom placeholder message within the element.
55
+
56
+ <div class="exampleWrapper">
57
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/placeholder.html) -->
58
+ <!-- The below content is automatically added from ./../apiExamples/placeholder.html -->
59
+ <auro-input placeholder="John Doe" bordered required>
60
+ <span slot="label">Full name</span>
61
+ <span slot="helptext">Please enter your full name.</span>
62
+ </auro-input>
63
+ <!-- AURO-GENERATED-CONTENT:END -->
64
+ </div>
65
+ <auro-accordion alignRight>
66
+ <span slot="trigger">See code</span>
67
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/placeholder.html) -->
68
+ <!-- The below code snippet is automatically added from ./../apiExamples/placeholder.html -->
69
+
70
+ ```html
71
+ <auro-input placeholder="John Doe" bordered required>
72
+ <span slot="label">Full name</span>
73
+ <span slot="helptext">Please enter your full name.</span>
74
+ </auro-input>
75
+ ```
76
+ <!-- AURO-GENERATED-CONTENT:END -->
77
+ </auro-accordion>
78
+
79
+ ## Disabled
80
+
81
+ Use the `disabled` attribute to prevent the user from interacting with the input.
82
+
83
+ <div class="exampleWrapper">
84
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/disabled.html) -->
85
+ <!-- The below content is automatically added from ./../apiExamples/disabled.html -->
86
+ <auro-input disabled bordered type="date">
87
+ <span slot="label">Arrival date</span>
88
+ </auro-input>
89
+ <!-- AURO-GENERATED-CONTENT:END -->
90
+ </div>
91
+ <div class="exampleWrapper--ondark" aria-hidden>
92
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/onDarkDisabled.html) -->
93
+ <!-- The below content is automatically added from ./../apiExamples/onDarkDisabled.html -->
94
+ <auro-input onDark disabled bordered type="date">
95
+ <span slot="label">Arrival date</span>
96
+ </auro-input>
97
+ <!-- AURO-GENERATED-CONTENT:END -->
98
+ </div>
99
+ <auro-accordion alignRight>
100
+ <span slot="trigger">See code</span>
101
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/disabled.html) -->
102
+ <!-- The below code snippet is automatically added from ./../apiExamples/disabled.html -->
103
+
104
+ ```html
105
+ <auro-input disabled bordered type="date">
106
+ <span slot="label">Arrival date</span>
107
+ </auro-input>
108
+ ```
109
+ <!-- AURO-GENERATED-CONTENT:END -->
110
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/onDarkDisabled.html) -->
111
+ <!-- The below code snippet is automatically added from ./../apiExamples/onDarkDisabled.html -->
112
+
113
+ ```html
114
+ <auro-input onDark disabled bordered type="date">
115
+ <span slot="label">Arrival date</span>
116
+ </auro-input>
117
+ ```
118
+ <!-- AURO-GENERATED-CONTENT:END -->
119
+ </auro-accordion>
120
+
121
+ ## Active Label
122
+
123
+ Example use cases for auro-input support the `activeLabel` attribute. If set, the label will stay fixed in the active position.
124
+
125
+ <div class="exampleWrapper">
126
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/activeLabel.html) -->
127
+ <!-- The below content is automatically added from ./../apiExamples/activeLabel.html -->
128
+ <auro-input activeLabel bordered>
129
+ <span slot="label">Address</span>
130
+ <span slot="helptext">Please enter your home address.</span>
131
+ </auro-input>
132
+ <!-- AURO-GENERATED-CONTENT:END -->
133
+ </div>
134
+ <auro-accordion alignRight>
135
+ <span slot="trigger">See code</span>
136
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/activeLabel.html) -->
137
+ <!-- The below code snippet is automatically added from ./../apiExamples/activeLabel.html -->
138
+
139
+ ```html
140
+ <auro-input activeLabel bordered>
141
+ <span slot="label">Address</span>
142
+ <span slot="helptext">Please enter your home address.</span>
143
+ </auro-input>
144
+ ```
145
+ <!-- AURO-GENERATED-CONTENT:END -->
146
+ </auro-accordion>
147
+
148
+ ## Value
149
+
150
+ Use the `value` attribute to preset the value of the element.
151
+
152
+ <div class="exampleWrapper">
153
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/programmaticValue.html) -->
154
+ <!-- The below content is automatically added from ./../apiExamples/programmaticValue.html -->
155
+ <auro-input value="Alaska Airlines is the best!" bordered>
156
+ <span slot="label">Name</span>
157
+ <span slot="helptext">Please enter your full name.</span>
158
+ </auro-input>
159
+ <!-- AURO-GENERATED-CONTENT:END -->
160
+ </div>
161
+ <auro-accordion alignRight>
162
+ <span slot="trigger">See code</span>
163
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/programmaticValue.html) -->
164
+ <!-- The below code snippet is automatically added from ./../apiExamples/programmaticValue.html -->
165
+
166
+ ```html
167
+ <auro-input value="Alaska Airlines is the best!" bordered>
168
+ <span slot="label">Name</span>
169
+ <span slot="helptext">Please enter your full name.</span>
170
+ </auro-input>
171
+ ```
172
+ <!-- AURO-GENERATED-CONTENT:END -->
173
+ </auro-accordion>
174
+
175
+ ## Pattern
176
+
177
+ 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.
178
+
179
+ The `<auro-input>` component supports setting a custom validity message specific to the pattern validation by using the `setCustomValidityPatternMismatch` attribute.
180
+
181
+ <div class="exampleWrapper">
182
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/pattern.html) -->
183
+ <!-- The below content is automatically added from ./../apiExamples/pattern.html -->
184
+ <auro-input pattern="[a-z]{1,15}" spellcheck="false" setCustomValidityPatternMismatch="Only contain lowercase letters w/no spaces" bordered>
185
+ <span slot="label">Username</span>
186
+ <span slot="helptext">Please enter a username.</span>
187
+ </auro-input>
188
+ <!-- AURO-GENERATED-CONTENT:END -->
189
+ </div>
190
+ <auro-accordion alignRight>
191
+ <span slot="trigger">See code</span>
192
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/pattern.html) -->
193
+ <!-- The below code snippet is automatically added from ./../apiExamples/pattern.html -->
194
+
195
+ ```html
196
+ <auro-input pattern="[a-z]{1,15}" spellcheck="false" setCustomValidityPatternMismatch="Only contain lowercase letters w/no spaces" bordered>
197
+ <span slot="label">Username</span>
198
+ <span slot="helptext">Please enter a username.</span>
199
+ </auro-input>
200
+ ```
201
+ <!-- AURO-GENERATED-CONTENT:END -->
202
+ </auro-accordion>