@aurodesignsystem-dev/auro-formkit 0.0.0-pr624.9 → 0.0.0-pr624.90

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 (149) hide show
  1. package/components/bibtemplate/dist/auro-bibtemplate.d.ts +12 -2
  2. package/components/bibtemplate/dist/buttonVersion.d.ts +2 -0
  3. package/components/bibtemplate/dist/headerVersion.d.ts +1 -1
  4. package/components/bibtemplate/dist/iconVersion.d.ts +1 -1
  5. package/components/bibtemplate/dist/index.js +1241 -94
  6. package/components/bibtemplate/dist/registered.js +1241 -94
  7. package/components/checkbox/README.md +1 -1
  8. package/components/checkbox/demo/api.html +16 -10
  9. package/components/checkbox/demo/api.md +49 -15
  10. package/components/checkbox/demo/api.min.js +74 -46
  11. package/components/checkbox/demo/index.html +16 -10
  12. package/components/checkbox/demo/index.md +2 -2
  13. package/components/checkbox/demo/index.min.js +74 -46
  14. package/components/checkbox/demo/readme.html +16 -9
  15. package/components/checkbox/demo/readme.md +1 -1
  16. package/components/checkbox/dist/auro-checkbox-group.d.ts +1 -1
  17. package/components/checkbox/dist/auro-checkbox.d.ts +3 -3
  18. package/components/checkbox/dist/index.js +73 -45
  19. package/components/checkbox/dist/registered.js +73 -45
  20. package/components/combobox/demo/api.html +16 -10
  21. package/components/combobox/demo/api.md +115 -8
  22. package/components/combobox/demo/api.min.js +3305 -1002
  23. package/components/combobox/demo/index.html +16 -10
  24. package/components/combobox/demo/index.md +8 -34
  25. package/components/combobox/demo/index.min.js +3305 -1002
  26. package/components/combobox/demo/readme.html +16 -9
  27. package/components/combobox/dist/auro-combobox.d.ts +57 -14
  28. package/components/combobox/dist/index.js +2992 -836
  29. package/components/combobox/dist/registered.js +2992 -836
  30. package/components/counter/demo/api.html +17 -10
  31. package/components/counter/demo/api.md +158 -21
  32. package/components/counter/demo/api.min.js +3417 -765
  33. package/components/counter/demo/index.html +17 -10
  34. package/components/counter/demo/index.md +185 -34
  35. package/components/counter/demo/index.min.js +3417 -765
  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 +161 -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 +3420 -768
  43. package/components/counter/dist/registered.js +3420 -768
  44. package/components/datepicker/README.md +1 -1
  45. package/components/datepicker/demo/api.html +16 -10
  46. package/components/datepicker/demo/api.md +59 -28
  47. package/components/datepicker/demo/api.min.js +11956 -8070
  48. package/components/datepicker/demo/index.html +16 -10
  49. package/components/datepicker/demo/index.md +75 -8
  50. package/components/datepicker/demo/index.min.js +11956 -8070
  51. package/components/datepicker/demo/readme.html +16 -9
  52. package/components/datepicker/demo/readme.md +1 -1
  53. package/components/datepicker/dist/auro-datepicker.d.ts +151 -12
  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 +13802 -9916
  57. package/components/datepicker/dist/popoverVersion.d.ts +1 -1
  58. package/components/datepicker/dist/registered.js +13802 -9916
  59. package/components/dropdown/demo/api.html +16 -10
  60. package/components/dropdown/demo/api.md +82 -275
  61. package/components/dropdown/demo/api.min.js +450 -261
  62. package/components/dropdown/demo/index.html +16 -10
  63. package/components/dropdown/demo/index.md +92 -362
  64. package/components/dropdown/demo/index.min.js +450 -261
  65. package/components/dropdown/demo/readme.html +16 -9
  66. package/components/dropdown/dist/auro-dropdown.d.ts +43 -83
  67. package/components/dropdown/dist/auro-dropdownBib.d.ts +14 -0
  68. package/components/dropdown/dist/index.js +449 -260
  69. package/components/dropdown/dist/registered.js +449 -260
  70. package/components/form/demo/api.html +16 -9
  71. package/components/form/demo/api.md +1 -1
  72. package/components/form/demo/api.min.js +3 -3
  73. package/components/form/demo/autocomplete.html +19 -3
  74. package/components/form/demo/index.html +16 -9
  75. package/components/form/demo/index.min.js +3 -3
  76. package/components/form/demo/readme.html +16 -9
  77. package/components/form/demo/working.html +19 -13
  78. package/components/form/dist/auro-form.d.ts +1 -1
  79. package/components/form/dist/index.js +2 -2
  80. package/components/form/dist/registered.js +2 -2
  81. package/components/helptext/dist/auro-helptext.d.ts +0 -2
  82. package/components/helptext/dist/index.js +3 -5
  83. package/components/helptext/dist/registered.js +3 -5
  84. package/components/input/README.md +5 -2
  85. package/components/input/demo/api.html +16 -10
  86. package/components/input/demo/api.md +226 -132
  87. package/components/input/demo/api.min.js +1034 -297
  88. package/components/input/demo/index.html +16 -10
  89. package/components/input/demo/index.md +48 -32
  90. package/components/input/demo/index.min.js +1048 -311
  91. package/components/input/demo/readme.html +16 -9
  92. package/components/input/demo/readme.md +5 -2
  93. package/components/input/dist/auro-input.d.ts +24 -0
  94. package/components/input/dist/base-input.d.ts +45 -11
  95. package/components/input/dist/buttonVersion.d.ts +1 -1
  96. package/components/input/dist/iconVersion.d.ts +1 -1
  97. package/components/input/dist/index.js +1047 -310
  98. package/components/input/dist/registered.js +1047 -310
  99. package/components/layoutElement/dist/index.js +11 -8
  100. package/components/layoutElement/dist/registered.js +97 -0
  101. package/components/menu/demo/api.html +17 -10
  102. package/components/menu/demo/api.md +65 -8
  103. package/components/menu/demo/api.min.js +305 -63
  104. package/components/menu/demo/index.html +16 -10
  105. package/components/menu/demo/index.min.js +305 -63
  106. package/components/menu/demo/readme.html +16 -9
  107. package/components/menu/dist/auro-menu.d.ts +53 -7
  108. package/components/menu/dist/auro-menuoption.d.ts +21 -3
  109. package/components/menu/dist/iconVersion.d.ts +1 -1
  110. package/components/menu/dist/index.js +290 -48
  111. package/components/menu/dist/registered.js +290 -48
  112. package/components/menu/dist/styles/default/tokens-css.d.ts +2 -0
  113. package/components/menu/dist/styles/shapeSize-css.d.ts +2 -0
  114. package/components/radio/demo/api.html +16 -10
  115. package/components/radio/demo/api.md +39 -9
  116. package/components/radio/demo/api.min.js +92 -96
  117. package/components/radio/demo/index.html +16 -10
  118. package/components/radio/demo/index.min.js +92 -96
  119. package/components/radio/demo/readme.html +16 -9
  120. package/components/radio/dist/auro-radio-group.d.ts +1 -1
  121. package/components/radio/dist/auro-radio.d.ts +9 -12
  122. package/components/radio/dist/index.js +91 -95
  123. package/components/radio/dist/registered.js +91 -95
  124. package/components/select/demo/api.html +16 -10
  125. package/components/select/demo/api.js +0 -2
  126. package/components/select/demo/api.md +149 -122
  127. package/components/select/demo/api.min.js +2283 -736
  128. package/components/select/demo/index.html +17 -11
  129. package/components/select/demo/index.md +1066 -259
  130. package/components/select/demo/index.min.js +2284 -725
  131. package/components/select/demo/readme.html +16 -9
  132. package/components/select/dist/auro-select.d.ts +74 -25
  133. package/components/select/dist/index.js +2165 -753
  134. package/components/select/dist/registered.js +2165 -753
  135. package/package.json +31 -28
  136. /package/components/{datepicker/dist/styles/default/color-css.d.ts → counter/dist/styles/shapeSize-css.d.ts} +0 -0
  137. /package/components/{dropdown/dist/styles/default → datepicker/dist/styles/classic}/color-css.d.ts +0 -0
  138. /package/components/datepicker/dist/styles/{emphasized → classic}/style-css.d.ts +0 -0
  139. /package/components/{dropdown/dist/styles/default/bibColors-css.d.ts → datepicker/dist/styles/snowflake/color-css.d.ts} +0 -0
  140. /package/components/{dropdown/dist/styles/default → datepicker/dist/styles/snowflake}/style-css.d.ts +0 -0
  141. /package/components/dropdown/dist/styles/{default/bibStyles-css.d.ts → classic/bibColors-css.d.ts} +0 -0
  142. /package/components/{input/dist/styles/default/input-css.d.ts → dropdown/dist/styles/classic/bibStyles-css.d.ts} +0 -0
  143. /package/components/{input/dist/styles/default/label-css.d.ts → dropdown/dist/styles/classic/color-css.d.ts} +0 -0
  144. /package/components/{input/dist/styles/input-css.d.ts → dropdown/dist/styles/classic/style-css.d.ts} +0 -0
  145. /package/components/{menu/dist/styles/color-menu-css.d.ts → dropdown/dist/styles/style-css.d.ts} +0 -0
  146. /package/components/menu/dist/styles/{color-menuoption-css.d.ts → default/color-menu-css.d.ts} +0 -0
  147. /package/components/menu/dist/styles/{style-menu-css.d.ts → default/color-menuoption-css.d.ts} +0 -0
  148. /package/components/menu/dist/styles/{style-menuoption-css.d.ts → default/style-menu-css.d.ts} +0 -0
  149. /package/components/menu/dist/styles/{tokens-css.d.ts → default/style-menuoption-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
 
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
@@ -25,7 +25,7 @@ The `<auro-input>` element should be used in situations where users may:
25
25
  </auro-input> -->
26
26
  <auro-input id="alpha" value="lax" layout="emphasized" shape="box" size="xl" placeholder="Departure" style="width: 249px;" ondark required>
27
27
  <label slot="label">From</label>
28
- <span slot="helptext">Example help text</span>
28
+ <span slot="helpText">Example help text</span>
29
29
  <span slot="displayValue">
30
30
  <div>
31
31
  <div class="mainText">LAX</div>
@@ -35,15 +35,15 @@ The `<auro-input>` element should be used in situations where users may:
35
35
  </auro-input>
36
36
  <auro-input id="beta" layout="emphasized" shape="pill" size="xl" placeholder="Departure" style="width: 249px;" ondark required>
37
37
  <label slot="label">From</label>
38
- <span slot="helptext">Example help text</span>
38
+ <span slot="helpText">Example help text</span>
39
39
  </auro-input>
40
40
  <auro-input id="charlie" layout="emphasized-left" shape="pill-left" size="xl" placeholder="Departure" style="width: 249px;" ondark required>
41
41
  <label slot="label">From</label>
42
- <span slot="helptext">Example help text</span>
42
+ <span slot="helpText">Example help text</span>
43
43
  </auro-input>
44
44
  <auro-input id="delta" layout="emphasized-right" shape="pill-right" size="xl" placeholder="Departure" style="width: 249px;" ondark required>
45
45
  <label slot="label">From</label>
46
- <span slot="helptext">Example help text</span>
46
+ <span slot="helpText">Example help text</span>
47
47
  </auro-input>
48
48
  <!-- AURO-GENERATED-CONTENT:END -->
49
49
  </div>
@@ -55,7 +55,7 @@ The `<auro-input>` element should be used in situations where users may:
55
55
  <!-- The below content is automatically added from ./../apiExamples/snowflake/basic.html -->
56
56
  <auro-input id="snowflakePill" layout="snowflake" shape="snowflake" size="lg" placeholder="Departure" style="width: 249px;" ondark required>
57
57
  <label slot="label">From</label>
58
- <span slot="helptext">Example help text</span>
58
+ <span slot="helpText">Example help text</span>
59
59
  </auro-input>
60
60
  <!-- AURO-GENERATED-CONTENT:END -->
61
61
  </div>
@@ -67,13 +67,19 @@ The default component supports the basic input `type="text"` structure. The `(op
67
67
  <div class="exampleWrapper">
68
68
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
69
69
  <!-- The below content is automatically added from ./../apiExamples/basic.html -->
70
- <auro-input bordered shape="rounded" size="lg"></auro-input>
70
+ <auro-input>
71
+ <span slot="label">Label</span>
72
+ <span slot="helpText">Help Text</span>
73
+ </auro-input>
71
74
  <!-- AURO-GENERATED-CONTENT:END -->
72
75
  </div>
73
76
  <div class="exampleWrapper--ondark" aria-hidden>
74
77
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/onDark.html) -->
75
78
  <!-- The below content is automatically added from ./../apiExamples/onDark.html -->
76
- <auro-input onDark bordered shape="rounded" size="lg"></auro-input>
79
+ <auro-input ondark>
80
+ <span slot="label">Label</span>
81
+ <span slot="helpText">Help Text</span>
82
+ </auro-input>
77
83
  <!-- AURO-GENERATED-CONTENT:END -->
78
84
  </div>
79
85
  <auro-accordion alignRight>
@@ -82,14 +88,20 @@ The default component supports the basic input `type="text"` structure. The `(op
82
88
  <!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
83
89
 
84
90
  ```html
85
- <auro-input bordered shape="rounded" size="lg"></auro-input>
91
+ <auro-input>
92
+ <span slot="label">Label</span>
93
+ <span slot="helpText">Help Text</span>
94
+ </auro-input>
86
95
  ```
87
96
  <!-- AURO-GENERATED-CONTENT:END -->
88
97
  <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/onDark.html) -->
89
98
  <!-- The below code snippet is automatically added from ./../apiExamples/onDark.html -->
90
99
 
91
100
  ```html
92
- <auro-input onDark bordered shape="rounded" size="lg"></auro-input>
101
+ <auro-input ondark>
102
+ <span slot="label">Label</span>
103
+ <span slot="helpText">Help Text</span>
104
+ </auro-input>
93
105
  ```
94
106
  <!-- AURO-GENERATED-CONTENT:END -->
95
107
  </auro-accordion>
@@ -101,9 +113,9 @@ Use the `placeholder` attribute to add a custom placeholder message within the e
101
113
  <div class="exampleWrapper">
102
114
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/placeholder.html) -->
103
115
  <!-- The below content is automatically added from ./../apiExamples/placeholder.html -->
104
- <auro-input placeholder="John Doe" bordered required>
116
+ <auro-input placeholder="John Doe" required>
105
117
  <span slot="label">Full name</span>
106
- <span slot="helptext">Please enter your full name.</span>
118
+ <span slot="helpText">Please enter your full name.</span>
107
119
  </auro-input>
108
120
  <!-- AURO-GENERATED-CONTENT:END -->
109
121
  </div>
@@ -113,9 +125,9 @@ Use the `placeholder` attribute to add a custom placeholder message within the e
113
125
  <!-- The below code snippet is automatically added from ./../apiExamples/placeholder.html -->
114
126
 
115
127
  ```html
116
- <auro-input placeholder="John Doe" bordered required>
128
+ <auro-input placeholder="John Doe" required>
117
129
  <span slot="label">Full name</span>
118
- <span slot="helptext">Please enter your full name.</span>
130
+ <span slot="helpText">Please enter your full name.</span>
119
131
  </auro-input>
120
132
  ```
121
133
  <!-- AURO-GENERATED-CONTENT:END -->
@@ -128,16 +140,18 @@ Use the `disabled` attribute to prevent the user from interacting with the input
128
140
  <div class="exampleWrapper">
129
141
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/disabled.html) -->
130
142
  <!-- The below content is automatically added from ./../apiExamples/disabled.html -->
131
- <auro-input disabled bordered type="date">
132
- <span slot="label">Arrival date</span>
143
+ <auro-input disabled type="date">
144
+ <span slot="label">Disabled</span>
145
+ <span slot="helpText">Help Text</span>
133
146
  </auro-input>
134
147
  <!-- AURO-GENERATED-CONTENT:END -->
135
148
  </div>
136
149
  <div class="exampleWrapper--ondark" aria-hidden>
137
150
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/onDarkDisabled.html) -->
138
151
  <!-- The below content is automatically added from ./../apiExamples/onDarkDisabled.html -->
139
- <auro-input onDark disabled bordered type="date">
152
+ <auro-input onDark disabled type="date">
140
153
  <span slot="label">Arrival date</span>
154
+ <span slot="helpText">Help Text</span>
141
155
  </auro-input>
142
156
  <!-- AURO-GENERATED-CONTENT:END -->
143
157
  </div>
@@ -147,8 +161,9 @@ Use the `disabled` attribute to prevent the user from interacting with the input
147
161
  <!-- The below code snippet is automatically added from ./../apiExamples/disabled.html -->
148
162
 
149
163
  ```html
150
- <auro-input disabled bordered type="date">
151
- <span slot="label">Arrival date</span>
164
+ <auro-input disabled type="date">
165
+ <span slot="label">Disabled</span>
166
+ <span slot="helpText">Help Text</span>
152
167
  </auro-input>
153
168
  ```
154
169
  <!-- AURO-GENERATED-CONTENT:END -->
@@ -156,8 +171,9 @@ Use the `disabled` attribute to prevent the user from interacting with the input
156
171
  <!-- The below code snippet is automatically added from ./../apiExamples/onDarkDisabled.html -->
157
172
 
158
173
  ```html
159
- <auro-input onDark disabled bordered type="date">
174
+ <auro-input onDark disabled type="date">
160
175
  <span slot="label">Arrival date</span>
176
+ <span slot="helpText">Help Text</span>
161
177
  </auro-input>
162
178
  ```
163
179
  <!-- AURO-GENERATED-CONTENT:END -->
@@ -170,9 +186,9 @@ Example use cases for auro-input support the `activeLabel` attribute. If set, th
170
186
  <div class="exampleWrapper">
171
187
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/activeLabel.html) -->
172
188
  <!-- The below content is automatically added from ./../apiExamples/activeLabel.html -->
173
- <auro-input activeLabel bordered>
189
+ <auro-input activeLabel>
174
190
  <span slot="label">Address</span>
175
- <span slot="helptext">Please enter your home address.</span>
191
+ <span slot="helpText">Please enter your home address.</span>
176
192
  </auro-input>
177
193
  <!-- AURO-GENERATED-CONTENT:END -->
178
194
  </div>
@@ -182,9 +198,9 @@ Example use cases for auro-input support the `activeLabel` attribute. If set, th
182
198
  <!-- The below code snippet is automatically added from ./../apiExamples/activeLabel.html -->
183
199
 
184
200
  ```html
185
- <auro-input activeLabel bordered>
201
+ <auro-input activeLabel>
186
202
  <span slot="label">Address</span>
187
- <span slot="helptext">Please enter your home address.</span>
203
+ <span slot="helpText">Please enter your home address.</span>
188
204
  </auro-input>
189
205
  ```
190
206
  <!-- AURO-GENERATED-CONTENT:END -->
@@ -197,9 +213,9 @@ Use the `value` attribute to preset the value of the element.
197
213
  <div class="exampleWrapper">
198
214
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/programmaticValue.html) -->
199
215
  <!-- The below content is automatically added from ./../apiExamples/programmaticValue.html -->
200
- <auro-input value="Alaska Airlines is the best!" bordered>
216
+ <auro-input value="Alaska Airlines is the best!">
201
217
  <span slot="label">Name</span>
202
- <span slot="helptext">Please enter your full name.</span>
218
+ <span slot="helpText">Please enter your full name.</span>
203
219
  </auro-input>
204
220
  <!-- AURO-GENERATED-CONTENT:END -->
205
221
  </div>
@@ -209,9 +225,9 @@ Use the `value` attribute to preset the value of the element.
209
225
  <!-- The below code snippet is automatically added from ./../apiExamples/programmaticValue.html -->
210
226
 
211
227
  ```html
212
- <auro-input value="Alaska Airlines is the best!" bordered>
228
+ <auro-input value="Alaska Airlines is the best!">
213
229
  <span slot="label">Name</span>
214
- <span slot="helptext">Please enter your full name.</span>
230
+ <span slot="helpText">Please enter your full name.</span>
215
231
  </auro-input>
216
232
  ```
217
233
  <!-- AURO-GENERATED-CONTENT:END -->
@@ -226,9 +242,9 @@ The `<auro-input>` component supports setting a custom validity message specific
226
242
  <div class="exampleWrapper">
227
243
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/pattern.html) -->
228
244
  <!-- The below content is automatically added from ./../apiExamples/pattern.html -->
229
- <auro-input pattern="[a-z]{1,15}" spellcheck="false" setCustomValidityPatternMismatch="Only contain lowercase letters w/no spaces" bordered>
245
+ <auro-input pattern="[a-z]{1,15}" spellcheck="false" setCustomValidityPatternMismatch="Only contain lowercase letters w/no spaces">
230
246
  <span slot="label">Username</span>
231
- <span slot="helptext">Please enter a username.</span>
247
+ <span slot="helpText">Please enter a username.</span>
232
248
  </auro-input>
233
249
  <!-- AURO-GENERATED-CONTENT:END -->
234
250
  </div>
@@ -238,9 +254,9 @@ The `<auro-input>` component supports setting a custom validity message specific
238
254
  <!-- The below code snippet is automatically added from ./../apiExamples/pattern.html -->
239
255
 
240
256
  ```html
241
- <auro-input pattern="[a-z]{1,15}" spellcheck="false" setCustomValidityPatternMismatch="Only contain lowercase letters w/no spaces" bordered>
257
+ <auro-input pattern="[a-z]{1,15}" spellcheck="false" setCustomValidityPatternMismatch="Only contain lowercase letters w/no spaces">
242
258
  <span slot="label">Username</span>
243
- <span slot="helptext">Please enter a username.</span>
259
+ <span slot="helpText">Please enter a username.</span>
244
260
  </auro-input>
245
261
  ```
246
262
  <!-- AURO-GENERATED-CONTENT:END -->