@aurodesignsystem/auro-formkit 4.0.2 → 5.0.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 (172) hide show
  1. package/CHANGELOG.md +193 -2
  2. package/components/bibtemplate/dist/auro-bibtemplate.d.ts +12 -2
  3. package/components/bibtemplate/dist/buttonVersion.d.ts +2 -0
  4. package/components/bibtemplate/dist/headerVersion.d.ts +1 -1
  5. package/components/bibtemplate/dist/iconVersion.d.ts +1 -1
  6. package/components/bibtemplate/dist/index.js +1184 -105
  7. package/components/bibtemplate/dist/registered.js +1184 -105
  8. package/components/checkbox/demo/api.html +16 -10
  9. package/components/checkbox/demo/api.md +52 -17
  10. package/components/checkbox/demo/api.min.js +66 -33
  11. package/components/checkbox/demo/index.html +16 -10
  12. package/components/checkbox/demo/index.min.js +66 -33
  13. package/components/checkbox/demo/readme.html +16 -9
  14. package/components/checkbox/dist/auro-checkbox-group.d.ts +2 -2
  15. package/components/checkbox/dist/auro-checkbox.d.ts +8 -1
  16. package/components/checkbox/dist/index.js +65 -32
  17. package/components/checkbox/dist/registered.js +65 -32
  18. package/components/combobox/README.md +2 -0
  19. package/components/combobox/demo/api.html +16 -10
  20. package/components/combobox/demo/api.md +124 -7
  21. package/components/combobox/demo/api.min.js +4542 -1330
  22. package/components/combobox/demo/index.html +16 -10
  23. package/components/combobox/demo/index.md +108 -4
  24. package/components/combobox/demo/index.min.js +4542 -1330
  25. package/components/combobox/demo/readme.html +16 -9
  26. package/components/combobox/demo/readme.md +2 -0
  27. package/components/combobox/dist/auro-combobox.d.ts +81 -18
  28. package/components/combobox/dist/index.js +4588 -1520
  29. package/components/combobox/dist/registered.js +4588 -1520
  30. package/components/counter/demo/api.html +17 -10
  31. package/components/counter/demo/api.md +167 -21
  32. package/components/counter/demo/api.min.js +3621 -866
  33. package/components/counter/demo/index.html +17 -10
  34. package/components/counter/demo/index.md +191 -34
  35. package/components/counter/demo/index.min.js +3621 -866
  36. package/components/counter/demo/readme.html +16 -9
  37. package/components/counter/dist/auro-counter-button.d.ts +2 -0
  38. package/components/counter/dist/auro-counter-group.d.ts +162 -11
  39. package/components/counter/dist/auro-counter.d.ts +16 -0
  40. package/components/counter/dist/helptextVersion.d.ts +2 -0
  41. package/components/counter/dist/iconVersion.d.ts +1 -1
  42. package/components/counter/dist/index.js +3619 -864
  43. package/components/counter/dist/registered.js +3619 -864
  44. package/components/datepicker/README.md +2 -1
  45. package/components/datepicker/demo/api.html +16 -10
  46. package/components/datepicker/demo/api.md +80 -30
  47. package/components/datepicker/demo/api.min.js +14795 -10365
  48. package/components/datepicker/demo/index.html +16 -10
  49. package/components/datepicker/demo/index.md +96 -4
  50. package/components/datepicker/demo/index.min.js +14795 -10365
  51. package/components/datepicker/demo/readme.html +16 -9
  52. package/components/datepicker/demo/readme.md +2 -1
  53. package/components/datepicker/dist/auro-datepicker.d.ts +163 -4
  54. package/components/datepicker/dist/buttonVersion.d.ts +1 -1
  55. package/components/datepicker/dist/iconVersion.d.ts +2 -0
  56. package/components/datepicker/dist/index.js +14916 -10486
  57. package/components/datepicker/dist/popoverVersion.d.ts +1 -1
  58. package/components/datepicker/dist/registered.js +14916 -10486
  59. package/components/dropdown/demo/api.html +16 -10
  60. package/components/dropdown/demo/api.md +94 -262
  61. package/components/dropdown/demo/api.min.js +738 -259
  62. package/components/dropdown/demo/index.html +16 -10
  63. package/components/dropdown/demo/index.md +93 -266
  64. package/components/dropdown/demo/index.min.js +738 -259
  65. package/components/dropdown/demo/readme.html +16 -9
  66. package/components/dropdown/dist/auro-dropdown.d.ts +92 -73
  67. package/components/dropdown/dist/auro-dropdownBib.d.ts +14 -0
  68. package/components/dropdown/dist/index.js +710 -231
  69. package/components/dropdown/dist/registered.js +710 -231
  70. package/components/dropdown/dist/styles/classic/style-css.d.ts +2 -0
  71. package/components/dropdown/dist/styles/emphasized/style-css.d.ts +2 -0
  72. package/components/dropdown/dist/styles/shapeSize-css.d.ts +2 -0
  73. package/components/dropdown/dist/styles/snowflake/style-css.d.ts +2 -0
  74. package/components/form/demo/api.html +16 -9
  75. package/components/form/demo/api.md +1 -1
  76. package/components/form/demo/api.min.js +3 -3
  77. package/components/form/demo/autocomplete.html +19 -3
  78. package/components/form/demo/index.html +16 -9
  79. package/components/form/demo/index.min.js +3 -3
  80. package/components/form/demo/readme.html +16 -9
  81. package/components/form/demo/working.html +19 -13
  82. package/components/form/dist/auro-form.d.ts +1 -1
  83. package/components/form/dist/index.js +2 -2
  84. package/components/form/dist/registered.js +2 -2
  85. package/components/helptext/dist/auro-helptext.d.ts +0 -2
  86. package/components/helptext/dist/index.js +2 -4
  87. package/components/helptext/dist/registered.js +2 -4
  88. package/components/input/README.md +6 -2
  89. package/components/input/demo/api.html +16 -10
  90. package/components/input/demo/api.md +258 -144
  91. package/components/input/demo/api.min.js +1550 -497
  92. package/components/input/demo/index.html +17 -11
  93. package/components/input/demo/index.md +95 -27
  94. package/components/input/demo/index.min.js +1549 -496
  95. package/components/input/demo/readme.html +16 -9
  96. package/components/input/demo/readme.md +6 -2
  97. package/components/input/dist/auro-input.d.ts +139 -3
  98. package/components/input/dist/base-input.d.ts +80 -26
  99. package/components/input/dist/buttonVersion.d.ts +1 -1
  100. package/components/input/dist/iconVersion.d.ts +1 -1
  101. package/components/input/dist/index.js +1504 -451
  102. package/components/input/dist/registered.js +1504 -451
  103. package/components/input/dist/styles/classic/color-css.d.ts +2 -0
  104. package/components/input/dist/styles/classic/style-css.d.ts +2 -0
  105. package/components/input/dist/styles/default/borders-css.d.ts +2 -0
  106. package/components/input/dist/styles/default/color-css.d.ts +2 -0
  107. package/components/input/dist/styles/default/mixins-css.d.ts +2 -0
  108. package/components/input/dist/styles/default/notificationIcons-css.d.ts +2 -0
  109. package/components/input/dist/styles/default/style-css.d.ts +2 -0
  110. package/components/input/dist/styles/emphasized/color-css.d.ts +2 -0
  111. package/components/input/dist/styles/emphasized/style-css.d.ts +2 -0
  112. package/components/input/dist/styles/shapeSize-css.d.ts +2 -0
  113. package/components/input/dist/styles/snowflake/style-css.d.ts +2 -0
  114. package/components/layoutElement/dist/auroElement.d.ts +34 -0
  115. package/components/layoutElement/dist/index.d.ts +2 -0
  116. package/components/layoutElement/dist/index.js +98 -0
  117. package/components/layoutElement/dist/registered.js +98 -0
  118. package/components/menu/demo/api.html +17 -10
  119. package/components/menu/demo/api.md +65 -8
  120. package/components/menu/demo/api.min.js +304 -65
  121. package/components/menu/demo/index.html +16 -10
  122. package/components/menu/demo/index.min.js +304 -65
  123. package/components/menu/demo/readme.html +16 -9
  124. package/components/menu/dist/auro-menu.d.ts +53 -7
  125. package/components/menu/dist/auro-menuoption.d.ts +21 -3
  126. package/components/menu/dist/iconVersion.d.ts +1 -1
  127. package/components/menu/dist/index.js +289 -50
  128. package/components/menu/dist/registered.js +289 -50
  129. package/components/menu/dist/styles/default/color-menu-css.d.ts +2 -0
  130. package/components/menu/dist/styles/default/color-menuoption-css.d.ts +2 -0
  131. package/components/menu/dist/styles/default/style-menu-css.d.ts +2 -0
  132. package/components/menu/dist/styles/default/style-menuoption-css.d.ts +2 -0
  133. package/components/menu/dist/styles/default/tokens-css.d.ts +2 -0
  134. package/components/radio/demo/api.html +16 -10
  135. package/components/radio/demo/api.md +41 -9
  136. package/components/radio/demo/api.min.js +93 -95
  137. package/components/radio/demo/index.html +16 -10
  138. package/components/radio/demo/index.min.js +93 -95
  139. package/components/radio/demo/readme.html +16 -9
  140. package/components/radio/dist/auro-radio-group.d.ts +1 -1
  141. package/components/radio/dist/auro-radio.d.ts +11 -12
  142. package/components/radio/dist/index.js +92 -94
  143. package/components/radio/dist/registered.js +92 -94
  144. package/components/select/README.md +1 -0
  145. package/components/select/demo/api.html +16 -10
  146. package/components/select/demo/api.js +0 -2
  147. package/components/select/demo/api.md +156 -114
  148. package/components/select/demo/api.min.js +3126 -657
  149. package/components/select/demo/index.html +17 -10
  150. package/components/select/demo/index.md +398 -62
  151. package/components/select/demo/index.min.js +3129 -648
  152. package/components/select/demo/readme.html +16 -9
  153. package/components/select/demo/readme.md +1 -0
  154. package/components/select/dist/auro-select.d.ts +173 -18
  155. package/components/select/dist/helptextVersion.d.ts +2 -0
  156. package/components/select/dist/index.js +3128 -791
  157. package/components/select/dist/registered.js +3128 -791
  158. package/components/select/dist/styles/shapeSize-css.d.ts +2 -0
  159. package/components/select/dist/styles/tokens-css.d.ts +2 -0
  160. package/package.json +33 -32
  161. package/packages/build-tools/src/postinstall.mjs +0 -12
  162. /package/components/{dropdown/dist/styles/bibColors-css.d.ts → combobox/dist/styles/emphasized/style-css.d.ts} +0 -0
  163. /package/components/{dropdown/dist/styles/bibStyles-css.d.ts → combobox/dist/styles/snowflake/style-css.d.ts} +0 -0
  164. /package/components/{input/dist/styles/borders-css.d.ts → counter/dist/styles/shapeSize-css.d.ts} +0 -0
  165. /package/components/{input/dist/styles/input-css.d.ts → datepicker/dist/styles/classic/color-css.d.ts} +0 -0
  166. /package/components/{input/dist/styles/label-css.d.ts → datepicker/dist/styles/classic/style-css.d.ts} +0 -0
  167. /package/components/{input/dist/styles/notificationIcons-css.d.ts → datepicker/dist/styles/shapeSize-css.d.ts} +0 -0
  168. /package/components/{menu/dist/styles/color-menu-css.d.ts → datepicker/dist/styles/snowflake/color-css.d.ts} +0 -0
  169. /package/components/{menu/dist/styles/color-menuoption-css.d.ts → datepicker/dist/styles/snowflake/style-css.d.ts} +0 -0
  170. /package/components/{menu/dist/styles/style-menu-css.d.ts → dropdown/dist/styles/classic/bibColors-css.d.ts} +0 -0
  171. /package/components/{menu/dist/styles/style-menuoption-css.d.ts → dropdown/dist/styles/classic/bibStyles-css.d.ts} +0 -0
  172. /package/components/{menu/dist/styles/tokens-css.d.ts → dropdown/dist/styles/classic/color-css.d.ts} +0 -0
package/components/input/demo/index.html CHANGED
@@ -3,18 +3,24 @@
3
3
  <head>
4
4
  <meta charset="UTF-8" />
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
- <title>Auro Web Component Generator | auro-input custom element</title>
7
- <link
8
- rel="stylesheet"
9
- type="text/css"
10
- href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/themes/prism.css"
11
- />
12
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/auro-classic/CSSCustomProperties.css">
13
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/alaska/CSSCustomProperties--alaska.css">
6
+ <title>Auro Web Component Demo | auro-input</title>
7
+
8
+ <!-- Prism.js Stylesheet -->
9
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/themes/prism.css"/>
10
+
11
+ <!-- Legacy reference is still needed to support auro-input's use of legacy token values at this time -->
12
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/legacy/auro-classic/CSSCustomProperties.css"/>
13
+
14
+ <!-- Design Token Alaska Theme -->
15
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/themes/alaska/CSSCustomProperties--alaska.min.css"/>
16
+
17
+ <!-- Webcore Stylesheet Alaska Theme -->
18
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/themes/alaska.global.min.css" />
19
+
20
+ <!-- Demo Specific Styles -->
14
21
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
15
22
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/elementDemoStyles.css" />
16
- <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/essentials-as.css" />
17
- </head>
23
+ </head>
18
24
  <body class="auro-markdown">
19
25
  <main></main>
20
26
 
@@ -29,7 +35,7 @@
29
35
  Prism.highlightAll();
30
36
  });
31
37
  </script>
32
-
38
+
33
39
  <script type="module" data-demo-script="true">
34
40
  import { initExamples } from "./index.min.js";
35
41
 
package/components/input/demo/index.md CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/description.md) -->
4
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.
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
6
  <!-- AURO-GENERATED-CONTENT:END -->
7
7
 
8
8
  ## auro-input use cases
@@ -15,6 +15,56 @@ The `<auro-input>` element should be used in situations where users may:
15
15
  * be filling out a form
16
16
  <!-- AURO-GENERATED-CONTENT:END -->
17
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
+
18
68
  ## Default component
19
69
 
20
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>`.
@@ -22,13 +72,20 @@ The default component supports the basic input `type="text"` structure. The `(op
22
72
  <div class="exampleWrapper">
23
73
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
24
74
  <!-- The below content is automatically added from ./../apiExamples/basic.html -->
25
- <auro-input bordered></auro-input>
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>
26
80
  <!-- AURO-GENERATED-CONTENT:END -->
27
81
  </div>
28
82
  <div class="exampleWrapper--ondark" aria-hidden>
29
83
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/onDark.html) -->
30
84
  <!-- The below content is automatically added from ./../apiExamples/onDark.html -->
31
- <auro-input onDark bordered></auro-input>
85
+ <auro-input ondark>
86
+ <span slot="label">Label</span>
87
+ <span slot="helpText">Help Text</span>
88
+ </auro-input>
32
89
  <!-- AURO-GENERATED-CONTENT:END -->
33
90
  </div>
34
91
  <auro-accordion alignRight>
@@ -37,14 +94,21 @@ The default component supports the basic input `type="text"` structure. The `(op
37
94
  <!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
38
95
 
39
96
  ```html
40
- <auro-input bordered></auro-input>
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>
41
102
  ```
42
103
  <!-- AURO-GENERATED-CONTENT:END -->
43
104
  <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/onDark.html) -->
44
105
  <!-- The below code snippet is automatically added from ./../apiExamples/onDark.html -->
45
106
 
46
107
  ```html
47
- <auro-input onDark bordered></auro-input>
108
+ <auro-input ondark>
109
+ <span slot="label">Label</span>
110
+ <span slot="helpText">Help Text</span>
111
+ </auro-input>
48
112
  ```
49
113
  <!-- AURO-GENERATED-CONTENT:END -->
50
114
  </auro-accordion>
@@ -56,9 +120,9 @@ Use the `placeholder` attribute to add a custom placeholder message within the e
56
120
  <div class="exampleWrapper">
57
121
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/placeholder.html) -->
58
122
  <!-- The below content is automatically added from ./../apiExamples/placeholder.html -->
59
- <auro-input placeholder="John Doe" bordered required>
123
+ <auro-input placeholder="John Doe" required>
60
124
  <span slot="label">Full name</span>
61
- <span slot="helptext">Please enter your full name.</span>
125
+ <span slot="helpText">Please enter your full name.</span>
62
126
  </auro-input>
63
127
  <!-- AURO-GENERATED-CONTENT:END -->
64
128
  </div>
@@ -68,9 +132,9 @@ Use the `placeholder` attribute to add a custom placeholder message within the e
68
132
  <!-- The below code snippet is automatically added from ./../apiExamples/placeholder.html -->
69
133
 
70
134
  ```html
71
- <auro-input placeholder="John Doe" bordered required>
135
+ <auro-input placeholder="John Doe" required>
72
136
  <span slot="label">Full name</span>
73
- <span slot="helptext">Please enter your full name.</span>
137
+ <span slot="helpText">Please enter your full name.</span>
74
138
  </auro-input>
75
139
  ```
76
140
  <!-- AURO-GENERATED-CONTENT:END -->
@@ -83,16 +147,18 @@ Use the `disabled` attribute to prevent the user from interacting with the input
83
147
  <div class="exampleWrapper">
84
148
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/disabled.html) -->
85
149
  <!-- The below content is automatically added from ./../apiExamples/disabled.html -->
86
- <auro-input disabled bordered type="date">
87
- <span slot="label">Arrival date</span>
150
+ <auro-input disabled type="date">
151
+ <span slot="label">Disabled</span>
152
+ <span slot="helpText">Help Text</span>
88
153
  </auro-input>
89
154
  <!-- AURO-GENERATED-CONTENT:END -->
90
155
  </div>
91
156
  <div class="exampleWrapper--ondark" aria-hidden>
92
157
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/onDarkDisabled.html) -->
93
158
  <!-- The below content is automatically added from ./../apiExamples/onDarkDisabled.html -->
94
- <auro-input onDark disabled bordered type="date">
159
+ <auro-input onDark disabled type="date">
95
160
  <span slot="label">Arrival date</span>
161
+ <span slot="helpText">Help Text</span>
96
162
  </auro-input>
97
163
  <!-- AURO-GENERATED-CONTENT:END -->
98
164
  </div>
@@ -102,8 +168,9 @@ Use the `disabled` attribute to prevent the user from interacting with the input
102
168
  <!-- The below code snippet is automatically added from ./../apiExamples/disabled.html -->
103
169
 
104
170
  ```html
105
- <auro-input disabled bordered type="date">
106
- <span slot="label">Arrival date</span>
171
+ <auro-input disabled type="date">
172
+ <span slot="label">Disabled</span>
173
+ <span slot="helpText">Help Text</span>
107
174
  </auro-input>
108
175
  ```
109
176
  <!-- AURO-GENERATED-CONTENT:END -->
@@ -111,8 +178,9 @@ Use the `disabled` attribute to prevent the user from interacting with the input
111
178
  <!-- The below code snippet is automatically added from ./../apiExamples/onDarkDisabled.html -->
112
179
 
113
180
  ```html
114
- <auro-input onDark disabled bordered type="date">
181
+ <auro-input onDark disabled type="date">
115
182
  <span slot="label">Arrival date</span>
183
+ <span slot="helpText">Help Text</span>
116
184
  </auro-input>
117
185
  ```
118
186
  <!-- AURO-GENERATED-CONTENT:END -->
@@ -125,9 +193,9 @@ Example use cases for auro-input support the `activeLabel` attribute. If set, th
125
193
  <div class="exampleWrapper">
126
194
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/activeLabel.html) -->
127
195
  <!-- The below content is automatically added from ./../apiExamples/activeLabel.html -->
128
- <auro-input activeLabel bordered>
196
+ <auro-input activeLabel>
129
197
  <span slot="label">Address</span>
130
- <span slot="helptext">Please enter your home address.</span>
198
+ <span slot="helpText">Please enter your home address.</span>
131
199
  </auro-input>
132
200
  <!-- AURO-GENERATED-CONTENT:END -->
133
201
  </div>
@@ -137,9 +205,9 @@ Example use cases for auro-input support the `activeLabel` attribute. If set, th
137
205
  <!-- The below code snippet is automatically added from ./../apiExamples/activeLabel.html -->
138
206
 
139
207
  ```html
140
- <auro-input activeLabel bordered>
208
+ <auro-input activeLabel>
141
209
  <span slot="label">Address</span>
142
- <span slot="helptext">Please enter your home address.</span>
210
+ <span slot="helpText">Please enter your home address.</span>
143
211
  </auro-input>
144
212
  ```
145
213
  <!-- AURO-GENERATED-CONTENT:END -->
@@ -152,9 +220,9 @@ Use the `value` attribute to preset the value of the element.
152
220
  <div class="exampleWrapper">
153
221
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/programmaticValue.html) -->
154
222
  <!-- The below content is automatically added from ./../apiExamples/programmaticValue.html -->
155
- <auro-input value="Alaska Airlines is the best!" bordered>
223
+ <auro-input value="Alaska Airlines is the best!">
156
224
  <span slot="label">Name</span>
157
- <span slot="helptext">Please enter your full name.</span>
225
+ <span slot="helpText">Please enter your full name.</span>
158
226
  </auro-input>
159
227
  <!-- AURO-GENERATED-CONTENT:END -->
160
228
  </div>
@@ -164,9 +232,9 @@ Use the `value` attribute to preset the value of the element.
164
232
  <!-- The below code snippet is automatically added from ./../apiExamples/programmaticValue.html -->
165
233
 
166
234
  ```html
167
- <auro-input value="Alaska Airlines is the best!" bordered>
235
+ <auro-input value="Alaska Airlines is the best!">
168
236
  <span slot="label">Name</span>
169
- <span slot="helptext">Please enter your full name.</span>
237
+ <span slot="helpText">Please enter your full name.</span>
170
238
  </auro-input>
171
239
  ```
172
240
  <!-- AURO-GENERATED-CONTENT:END -->
@@ -181,9 +249,9 @@ The `<auro-input>` component supports setting a custom validity message specific
181
249
  <div class="exampleWrapper">
182
250
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/pattern.html) -->
183
251
  <!-- 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>
252
+ <auro-input pattern="[a-z]{1,15}" spellcheck="false" setCustomValidityPatternMismatch="Only contain lowercase letters w/no spaces">
185
253
  <span slot="label">Username</span>
186
- <span slot="helptext">Please enter a username.</span>
254
+ <span slot="helpText">Please enter a username.</span>
187
255
  </auro-input>
188
256
  <!-- AURO-GENERATED-CONTENT:END -->
189
257
  </div>
@@ -193,9 +261,9 @@ The `<auro-input>` component supports setting a custom validity message specific
193
261
  <!-- The below code snippet is automatically added from ./../apiExamples/pattern.html -->
194
262
 
195
263
  ```html
196
- <auro-input pattern="[a-z]{1,15}" spellcheck="false" setCustomValidityPatternMismatch="Only contain lowercase letters w/no spaces" bordered>
264
+ <auro-input pattern="[a-z]{1,15}" spellcheck="false" setCustomValidityPatternMismatch="Only contain lowercase letters w/no spaces">
197
265
  <span slot="label">Username</span>
198
- <span slot="helptext">Please enter a username.</span>
266
+ <span slot="helpText">Please enter a username.</span>
199
267
  </auro-input>
200
268
  ```
201
269
  <!-- AURO-GENERATED-CONTENT:END -->