@aurodesignsystem-dev/auro-formkit 0.0.0-pr624.10 → 0.0.0-pr624.100

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 (148) 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 +1242 -94
  6. package/components/bibtemplate/dist/registered.js +1242 -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 +54 -19
  10. package/components/checkbox/demo/api.min.js +71 -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 +71 -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 +6 -3
  18. package/components/checkbox/dist/index.js +70 -45
  19. package/components/checkbox/dist/registered.js +70 -45
  20. package/components/combobox/README.md +2 -0
  21. package/components/combobox/demo/api.html +16 -10
  22. package/components/combobox/demo/api.md +121 -8
  23. package/components/combobox/demo/api.min.js +3314 -1013
  24. package/components/combobox/demo/index.html +16 -10
  25. package/components/combobox/demo/index.md +20 -34
  26. package/components/combobox/demo/index.min.js +3314 -1013
  27. package/components/combobox/demo/readme.html +16 -9
  28. package/components/combobox/demo/readme.md +2 -0
  29. package/components/combobox/dist/auro-combobox.d.ts +59 -14
  30. package/components/combobox/dist/index.js +3008 -850
  31. package/components/combobox/dist/registered.js +3008 -850
  32. package/components/counter/demo/api.html +17 -10
  33. package/components/counter/demo/api.md +167 -21
  34. package/components/counter/demo/api.min.js +3419 -773
  35. package/components/counter/demo/index.html +17 -10
  36. package/components/counter/demo/index.md +191 -34
  37. package/components/counter/demo/index.min.js +3419 -773
  38. package/components/counter/demo/readme.html +16 -9
  39. package/components/counter/dist/auro-counter-button.d.ts +2 -0
  40. package/components/counter/dist/auro-counter-group.d.ts +162 -11
  41. package/components/counter/dist/auro-counter.d.ts +16 -0
  42. package/components/counter/dist/helptextVersion.d.ts +2 -0
  43. package/components/counter/dist/iconVersion.d.ts +1 -1
  44. package/components/counter/dist/index.js +3419 -773
  45. package/components/counter/dist/registered.js +3419 -773
  46. package/components/datepicker/README.md +2 -1
  47. package/components/datepicker/demo/api.html +16 -10
  48. package/components/datepicker/demo/api.md +70 -28
  49. package/components/datepicker/demo/api.min.js +11970 -8081
  50. package/components/datepicker/demo/index.html +16 -10
  51. package/components/datepicker/demo/index.md +87 -8
  52. package/components/datepicker/demo/index.min.js +11970 -8081
  53. package/components/datepicker/demo/readme.html +16 -9
  54. package/components/datepicker/demo/readme.md +2 -1
  55. package/components/datepicker/dist/auro-datepicker.d.ts +152 -12
  56. package/components/datepicker/dist/buttonVersion.d.ts +1 -1
  57. package/components/datepicker/dist/iconVersion.d.ts +2 -0
  58. package/components/datepicker/dist/index.js +14577 -10688
  59. package/components/datepicker/dist/popoverVersion.d.ts +1 -1
  60. package/components/datepicker/dist/registered.js +14577 -10688
  61. package/components/dropdown/demo/api.html +16 -10
  62. package/components/dropdown/demo/api.md +89 -281
  63. package/components/dropdown/demo/api.min.js +451 -271
  64. package/components/dropdown/demo/index.html +16 -10
  65. package/components/dropdown/demo/index.md +92 -362
  66. package/components/dropdown/demo/index.min.js +451 -271
  67. package/components/dropdown/demo/readme.html +16 -9
  68. package/components/dropdown/dist/auro-dropdown.d.ts +43 -82
  69. package/components/dropdown/dist/auro-dropdownBib.d.ts +14 -0
  70. package/components/dropdown/dist/index.js +450 -270
  71. package/components/dropdown/dist/registered.js +450 -270
  72. package/components/form/demo/api.html +16 -9
  73. package/components/form/demo/api.md +1 -1
  74. package/components/form/demo/api.min.js +3 -3
  75. package/components/form/demo/autocomplete.html +19 -3
  76. package/components/form/demo/index.html +16 -9
  77. package/components/form/demo/index.min.js +3 -3
  78. package/components/form/demo/readme.html +16 -9
  79. package/components/form/demo/working.html +19 -13
  80. package/components/form/dist/auro-form.d.ts +1 -1
  81. package/components/form/dist/index.js +2 -2
  82. package/components/form/dist/registered.js +2 -2
  83. package/components/helptext/dist/auro-helptext.d.ts +0 -2
  84. package/components/helptext/dist/index.js +3 -5
  85. package/components/helptext/dist/registered.js +3 -5
  86. package/components/input/README.md +6 -2
  87. package/components/input/demo/api.html +16 -10
  88. package/components/input/demo/api.md +235 -135
  89. package/components/input/demo/api.min.js +1046 -301
  90. package/components/input/demo/index.html +16 -10
  91. package/components/input/demo/index.md +55 -32
  92. package/components/input/demo/index.min.js +1062 -317
  93. package/components/input/demo/readme.html +16 -9
  94. package/components/input/demo/readme.md +6 -2
  95. package/components/input/dist/auro-input.d.ts +26 -2
  96. package/components/input/dist/base-input.d.ts +47 -11
  97. package/components/input/dist/buttonVersion.d.ts +1 -1
  98. package/components/input/dist/iconVersion.d.ts +1 -1
  99. package/components/input/dist/index.js +1061 -316
  100. package/components/input/dist/registered.js +1061 -316
  101. package/components/layoutElement/dist/index.js +11 -8
  102. package/components/layoutElement/dist/registered.js +97 -0
  103. package/components/menu/demo/api.html +17 -10
  104. package/components/menu/demo/api.md +65 -8
  105. package/components/menu/demo/api.min.js +301 -63
  106. package/components/menu/demo/index.html +16 -10
  107. package/components/menu/demo/index.min.js +301 -63
  108. package/components/menu/demo/readme.html +16 -9
  109. package/components/menu/dist/auro-menu.d.ts +53 -7
  110. package/components/menu/dist/auro-menuoption.d.ts +21 -3
  111. package/components/menu/dist/iconVersion.d.ts +1 -1
  112. package/components/menu/dist/index.js +286 -48
  113. package/components/menu/dist/registered.js +286 -48
  114. package/components/menu/dist/styles/default/tokens-css.d.ts +2 -0
  115. package/components/radio/demo/api.html +16 -10
  116. package/components/radio/demo/api.md +41 -9
  117. package/components/radio/demo/api.min.js +95 -97
  118. package/components/radio/demo/index.html +16 -10
  119. package/components/radio/demo/index.min.js +95 -97
  120. package/components/radio/demo/readme.html +16 -9
  121. package/components/radio/dist/auro-radio-group.d.ts +1 -1
  122. package/components/radio/dist/auro-radio.d.ts +11 -12
  123. package/components/radio/dist/index.js +94 -96
  124. package/components/radio/dist/registered.js +94 -96
  125. package/components/select/README.md +1 -0
  126. package/components/select/demo/api.html +16 -10
  127. package/components/select/demo/api.js +0 -2
  128. package/components/select/demo/api.md +159 -125
  129. package/components/select/demo/api.min.js +2281 -730
  130. package/components/select/demo/index.html +17 -11
  131. package/components/select/demo/index.md +1074 -259
  132. package/components/select/demo/index.min.js +2283 -720
  133. package/components/select/demo/readme.html +16 -9
  134. package/components/select/demo/readme.md +1 -0
  135. package/components/select/dist/auro-select.d.ts +86 -25
  136. package/components/select/dist/index.js +2175 -755
  137. package/components/select/dist/registered.js +2175 -755
  138. package/package.json +31 -28
  139. /package/components/{datepicker/dist/styles/default/color-css.d.ts → counter/dist/styles/shapeSize-css.d.ts} +0 -0
  140. /package/components/datepicker/dist/styles/{emphasized/style-css.d.ts → classic/color-css.d.ts} +0 -0
  141. /package/components/{input/dist/styles/default/input-css.d.ts → datepicker/dist/styles/classic/style-css.d.ts} +0 -0
  142. /package/components/{input/dist/styles/default/label-css.d.ts → datepicker/dist/styles/snowflake/color-css.d.ts} +0 -0
  143. /package/components/{input/dist/styles/input-css.d.ts → datepicker/dist/styles/snowflake/style-css.d.ts} +0 -0
  144. /package/components/{menu/dist/styles/color-menu-css.d.ts → dropdown/dist/styles/style-css.d.ts} +0 -0
  145. /package/components/menu/dist/styles/{color-menuoption-css.d.ts → default/color-menu-css.d.ts} +0 -0
  146. /package/components/menu/dist/styles/{style-menu-css.d.ts → default/color-menuoption-css.d.ts} +0 -0
  147. /package/components/menu/dist/styles/{style-menuoption-css.d.ts → default/style-menu-css.d.ts} +0 -0
  148. /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
@@ -24,8 +24,9 @@ The `<auro-input>` element should be used in situations where users may:
24
24
  <label slot="label">From</label>
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
+ <span slot="ariaLabel.clear">Clear All</span>
27
28
  <label slot="label">From</label>
28
- <span slot="helptext">Example help text</span>
29
+ <span slot="helpText">Example help text</span>
29
30
  <span slot="displayValue">
30
31
  <div>
31
32
  <div class="mainText">LAX</div>
@@ -34,16 +35,19 @@ The `<auro-input>` element should be used in situations where users may:
34
35
  </span>
35
36
  </auro-input>
36
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>
37
39
  <label slot="label">From</label>
38
- <span slot="helptext">Example help text</span>
40
+ <span slot="helpText">Example help text</span>
39
41
  </auro-input>
40
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>
41
44
  <label slot="label">From</label>
42
- <span slot="helptext">Example help text</span>
45
+ <span slot="helpText">Example help text</span>
43
46
  </auro-input>
44
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>
45
49
  <label slot="label">From</label>
46
- <span slot="helptext">Example help text</span>
50
+ <span slot="helpText">Example help text</span>
47
51
  </auro-input>
48
52
  <!-- AURO-GENERATED-CONTENT:END -->
49
53
  </div>
@@ -54,8 +58,9 @@ The `<auro-input>` element should be used in situations where users may:
54
58
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/snowflake/basic.html) -->
55
59
  <!-- The below content is automatically added from ./../apiExamples/snowflake/basic.html -->
56
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>
57
62
  <label slot="label">From</label>
58
- <span slot="helptext">Example help text</span>
63
+ <span slot="helpText">Example help text</span>
59
64
  </auro-input>
60
65
  <!-- AURO-GENERATED-CONTENT:END -->
61
66
  </div>
@@ -67,13 +72,20 @@ The default component supports the basic input `type="text"` structure. The `(op
67
72
  <div class="exampleWrapper">
68
73
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
69
74
  <!-- The below content is automatically added from ./../apiExamples/basic.html -->
70
- <auro-input bordered shape="rounded" size="lg"></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>
71
80
  <!-- AURO-GENERATED-CONTENT:END -->
72
81
  </div>
73
82
  <div class="exampleWrapper--ondark" aria-hidden>
74
83
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/onDark.html) -->
75
84
  <!-- The below content is automatically added from ./../apiExamples/onDark.html -->
76
- <auro-input onDark bordered shape="rounded" size="lg"></auro-input>
85
+ <auro-input ondark>
86
+ <span slot="label">Label</span>
87
+ <span slot="helpText">Help Text</span>
88
+ </auro-input>
77
89
  <!-- AURO-GENERATED-CONTENT:END -->
78
90
  </div>
79
91
  <auro-accordion alignRight>
@@ -82,14 +94,21 @@ The default component supports the basic input `type="text"` structure. The `(op
82
94
  <!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
83
95
 
84
96
  ```html
85
- <auro-input bordered shape="rounded" size="lg"></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>
86
102
  ```
87
103
  <!-- AURO-GENERATED-CONTENT:END -->
88
104
  <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/onDark.html) -->
89
105
  <!-- The below code snippet is automatically added from ./../apiExamples/onDark.html -->
90
106
 
91
107
  ```html
92
- <auro-input onDark bordered shape="rounded" size="lg"></auro-input>
108
+ <auro-input ondark>
109
+ <span slot="label">Label</span>
110
+ <span slot="helpText">Help Text</span>
111
+ </auro-input>
93
112
  ```
94
113
  <!-- AURO-GENERATED-CONTENT:END -->
95
114
  </auro-accordion>
@@ -101,9 +120,9 @@ Use the `placeholder` attribute to add a custom placeholder message within the e
101
120
  <div class="exampleWrapper">
102
121
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/placeholder.html) -->
103
122
  <!-- The below content is automatically added from ./../apiExamples/placeholder.html -->
104
- <auro-input placeholder="John Doe" bordered required>
123
+ <auro-input placeholder="John Doe" required>
105
124
  <span slot="label">Full name</span>
106
- <span slot="helptext">Please enter your full name.</span>
125
+ <span slot="helpText">Please enter your full name.</span>
107
126
  </auro-input>
108
127
  <!-- AURO-GENERATED-CONTENT:END -->
109
128
  </div>
@@ -113,9 +132,9 @@ Use the `placeholder` attribute to add a custom placeholder message within the e
113
132
  <!-- The below code snippet is automatically added from ./../apiExamples/placeholder.html -->
114
133
 
115
134
  ```html
116
- <auro-input placeholder="John Doe" bordered required>
135
+ <auro-input placeholder="John Doe" required>
117
136
  <span slot="label">Full name</span>
118
- <span slot="helptext">Please enter your full name.</span>
137
+ <span slot="helpText">Please enter your full name.</span>
119
138
  </auro-input>
120
139
  ```
121
140
  <!-- AURO-GENERATED-CONTENT:END -->
@@ -128,16 +147,18 @@ Use the `disabled` attribute to prevent the user from interacting with the input
128
147
  <div class="exampleWrapper">
129
148
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/disabled.html) -->
130
149
  <!-- The below content is automatically added from ./../apiExamples/disabled.html -->
131
- <auro-input disabled bordered type="date">
132
- <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>
133
153
  </auro-input>
134
154
  <!-- AURO-GENERATED-CONTENT:END -->
135
155
  </div>
136
156
  <div class="exampleWrapper--ondark" aria-hidden>
137
157
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/onDarkDisabled.html) -->
138
158
  <!-- The below content is automatically added from ./../apiExamples/onDarkDisabled.html -->
139
- <auro-input onDark disabled bordered type="date">
159
+ <auro-input onDark disabled type="date">
140
160
  <span slot="label">Arrival date</span>
161
+ <span slot="helpText">Help Text</span>
141
162
  </auro-input>
142
163
  <!-- AURO-GENERATED-CONTENT:END -->
143
164
  </div>
@@ -147,8 +168,9 @@ Use the `disabled` attribute to prevent the user from interacting with the input
147
168
  <!-- The below code snippet is automatically added from ./../apiExamples/disabled.html -->
148
169
 
149
170
  ```html
150
- <auro-input disabled bordered type="date">
151
- <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>
152
174
  </auro-input>
153
175
  ```
154
176
  <!-- AURO-GENERATED-CONTENT:END -->
@@ -156,8 +178,9 @@ Use the `disabled` attribute to prevent the user from interacting with the input
156
178
  <!-- The below code snippet is automatically added from ./../apiExamples/onDarkDisabled.html -->
157
179
 
158
180
  ```html
159
- <auro-input onDark disabled bordered type="date">
181
+ <auro-input onDark disabled type="date">
160
182
  <span slot="label">Arrival date</span>
183
+ <span slot="helpText">Help Text</span>
161
184
  </auro-input>
162
185
  ```
163
186
  <!-- AURO-GENERATED-CONTENT:END -->
@@ -170,9 +193,9 @@ Example use cases for auro-input support the `activeLabel` attribute. If set, th
170
193
  <div class="exampleWrapper">
171
194
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/activeLabel.html) -->
172
195
  <!-- The below content is automatically added from ./../apiExamples/activeLabel.html -->
173
- <auro-input activeLabel bordered>
196
+ <auro-input activeLabel>
174
197
  <span slot="label">Address</span>
175
- <span slot="helptext">Please enter your home address.</span>
198
+ <span slot="helpText">Please enter your home address.</span>
176
199
  </auro-input>
177
200
  <!-- AURO-GENERATED-CONTENT:END -->
178
201
  </div>
@@ -182,9 +205,9 @@ Example use cases for auro-input support the `activeLabel` attribute. If set, th
182
205
  <!-- The below code snippet is automatically added from ./../apiExamples/activeLabel.html -->
183
206
 
184
207
  ```html
185
- <auro-input activeLabel bordered>
208
+ <auro-input activeLabel>
186
209
  <span slot="label">Address</span>
187
- <span slot="helptext">Please enter your home address.</span>
210
+ <span slot="helpText">Please enter your home address.</span>
188
211
  </auro-input>
189
212
  ```
190
213
  <!-- AURO-GENERATED-CONTENT:END -->
@@ -197,9 +220,9 @@ Use the `value` attribute to preset the value of the element.
197
220
  <div class="exampleWrapper">
198
221
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/programmaticValue.html) -->
199
222
  <!-- The below content is automatically added from ./../apiExamples/programmaticValue.html -->
200
- <auro-input value="Alaska Airlines is the best!" bordered>
223
+ <auro-input value="Alaska Airlines is the best!">
201
224
  <span slot="label">Name</span>
202
- <span slot="helptext">Please enter your full name.</span>
225
+ <span slot="helpText">Please enter your full name.</span>
203
226
  </auro-input>
204
227
  <!-- AURO-GENERATED-CONTENT:END -->
205
228
  </div>
@@ -209,9 +232,9 @@ Use the `value` attribute to preset the value of the element.
209
232
  <!-- The below code snippet is automatically added from ./../apiExamples/programmaticValue.html -->
210
233
 
211
234
  ```html
212
- <auro-input value="Alaska Airlines is the best!" bordered>
235
+ <auro-input value="Alaska Airlines is the best!">
213
236
  <span slot="label">Name</span>
214
- <span slot="helptext">Please enter your full name.</span>
237
+ <span slot="helpText">Please enter your full name.</span>
215
238
  </auro-input>
216
239
  ```
217
240
  <!-- AURO-GENERATED-CONTENT:END -->
@@ -226,9 +249,9 @@ The `<auro-input>` component supports setting a custom validity message specific
226
249
  <div class="exampleWrapper">
227
250
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/pattern.html) -->
228
251
  <!-- 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>
252
+ <auro-input pattern="[a-z]{1,15}" spellcheck="false" setCustomValidityPatternMismatch="Only contain lowercase letters w/no spaces">
230
253
  <span slot="label">Username</span>
231
- <span slot="helptext">Please enter a username.</span>
254
+ <span slot="helpText">Please enter a username.</span>
232
255
  </auro-input>
233
256
  <!-- AURO-GENERATED-CONTENT:END -->
234
257
  </div>
@@ -238,9 +261,9 @@ The `<auro-input>` component supports setting a custom validity message specific
238
261
  <!-- The below code snippet is automatically added from ./../apiExamples/pattern.html -->
239
262
 
240
263
  ```html
241
- <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">
242
265
  <span slot="label">Username</span>
243
- <span slot="helptext">Please enter a username.</span>
266
+ <span slot="helpText">Please enter a username.</span>
244
267
  </auro-input>
245
268
  ```
246
269
  <!-- AURO-GENERATED-CONTENT:END -->