@aurodesignsystem-dev/auro-formkit 0.0.0-pr624.30 → 0.0.0-pr624.32

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 (11) hide show
  1. package/components/combobox/demo/api.md +1 -1
  2. package/components/combobox/demo/api.min.js +82 -89
  3. package/components/combobox/demo/index.min.js +82 -89
  4. package/components/combobox/dist/auro-combobox.d.ts +25 -4
  5. package/components/combobox/dist/index.js +82 -89
  6. package/components/combobox/dist/registered.js +82 -89
  7. package/components/input/README.md +4 -1
  8. package/components/input/demo/api.md +139 -79
  9. package/components/input/demo/index.md +34 -18
  10. package/components/input/demo/readme.md +4 -1
  11. package/package.json +1 -1
package/components/input/demo/api.md CHANGED
@@ -115,13 +115,19 @@ The default component supports the basic input `type="text"` structure. The `(op
115
115
  <div class="exampleWrapper">
116
116
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
117
117
  <!-- The below content is automatically added from ./../apiExamples/basic.html -->
118
- <auro-input bordered shape="rounded" size="lg"></auro-input>
118
+ <auro-input>
119
+ <span slot="label">Label</span>
120
+ <span slot="helpText">Help Text</span>
121
+ </auro-input>
119
122
  <!-- AURO-GENERATED-CONTENT:END -->
120
123
  </div>
121
124
  <div class="exampleWrapper--ondark" aria-hidden>
122
125
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/onDark.html) -->
123
126
  <!-- The below content is automatically added from ./../apiExamples/onDark.html -->
124
- <auro-input onDark bordered shape="rounded" size="lg"></auro-input>
127
+ <auro-input ondark shape="rounded" size="lg">
128
+ <span slot="label">Label</span>
129
+ <span slot="helpText">Help Text</span>
130
+ </auro-input>
125
131
  <!-- AURO-GENERATED-CONTENT:END -->
126
132
  </div>
127
133
  <auro-accordion alignRight>
@@ -130,14 +136,20 @@ The default component supports the basic input `type="text"` structure. The `(op
130
136
  <!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
131
137
 
132
138
  ```html
133
- <auro-input bordered shape="rounded" size="lg"></auro-input>
139
+ <auro-input>
140
+ <span slot="label">Label</span>
141
+ <span slot="helpText">Help Text</span>
142
+ </auro-input>
134
143
  ```
135
144
  <!-- AURO-GENERATED-CONTENT:END -->
136
145
  <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/onDark.html) -->
137
146
  <!-- The below code snippet is automatically added from ./../apiExamples/onDark.html -->
138
147
 
139
148
  ```html
140
- <auro-input onDark bordered shape="rounded" size="lg"></auro-input>
149
+ <auro-input ondark shape="rounded" size="lg">
150
+ <span slot="label">Label</span>
151
+ <span slot="helpText">Help Text</span>
152
+ </auro-input>
141
153
  ```
142
154
  <!-- AURO-GENERATED-CONTENT:END -->
143
155
  </auro-accordion>
@@ -150,16 +162,18 @@ Use the `disable` attribute to prevent the user from interacting with the input.
150
162
  <div class="exampleWrapper">
151
163
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/disabled.html) -->
152
164
  <!-- The below content is automatically added from ./../apiExamples/disabled.html -->
153
- <auro-input disabled bordered type="date">
154
- <span slot="label">Arrival date</span>
165
+ <auro-input disabled type="date">
166
+ <span slot="label">Disabled</span>
167
+ <span slot="helpText">Help Text</span>
155
168
  </auro-input>
156
169
  <!-- AURO-GENERATED-CONTENT:END -->
157
170
  </div>
158
171
  <div class="exampleWrapper--ondark" aria-hidden>
159
172
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/onDarkDisabled.html) -->
160
173
  <!-- The below content is automatically added from ./../apiExamples/onDarkDisabled.html -->
161
- <auro-input onDark disabled bordered type="date">
174
+ <auro-input onDark disabled type="date">
162
175
  <span slot="label">Arrival date</span>
176
+ <span slot="helpText">Help Text</span>
163
177
  </auro-input>
164
178
  <!-- AURO-GENERATED-CONTENT:END -->
165
179
  </div>
@@ -169,8 +183,9 @@ Use the `disable` attribute to prevent the user from interacting with the input.
169
183
  <!-- The below code snippet is automatically added from ./../apiExamples/disabled.html -->
170
184
 
171
185
  ```html
172
- <auro-input disabled bordered type="date">
173
- <span slot="label">Arrival date</span>
186
+ <auro-input disabled type="date">
187
+ <span slot="label">Disabled</span>
188
+ <span slot="helpText">Help Text</span>
174
189
  </auro-input>
175
190
  ```
176
191
  <!-- AURO-GENERATED-CONTENT:END -->
@@ -178,8 +193,9 @@ Use the `disable` attribute to prevent the user from interacting with the input.
178
193
  <!-- The below code snippet is automatically added from ./../apiExamples/onDarkDisabled.html -->
179
194
 
180
195
  ```html
181
- <auro-input onDark disabled bordered type="date">
196
+ <auro-input onDark disabled type="date">
182
197
  <span slot="label">Arrival date</span>
198
+ <span slot="helpText">Help Text</span>
183
199
  </auro-input>
184
200
  ```
185
201
  <!-- AURO-GENERATED-CONTENT:END -->
@@ -194,7 +210,10 @@ Set the input mode for the input.
194
210
  <div class="exampleWrapper">
195
211
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/inputmode.html) -->
196
212
  <!-- The below content is automatically added from ./../apiExamples/inputmode.html -->
197
- <auro-input bordered inputmode="tel" />
213
+ <auro-input inputmode="tel">
214
+ <span slot="label">Telephone</span>
215
+ <span slot="helpText">Help Text</span>
216
+ </auro-input>
198
217
  <!-- AURO-GENERATED-CONTENT:END -->
199
218
  </div>
200
219
  <auro-accordion alignRight>
@@ -203,7 +222,10 @@ Set the input mode for the input.
203
222
  <!-- The below code snippet is automatically added from ./../apiExamples/inputmode.html -->
204
223
 
205
224
  ```html
206
- <auro-input bordered inputmode="tel" />
225
+ <auro-input inputmode="tel">
226
+ <span slot="label">Telephone</span>
227
+ <span slot="helpText">Help Text</span>
228
+ </auro-input>
207
229
  ```
208
230
  <!-- AURO-GENERATED-CONTENT:END -->
209
231
  </auro-accordion>
@@ -214,7 +236,7 @@ Use the `placeholder` attribute to add a custom placeholder message within the e
214
236
  <div class="exampleWrapper">
215
237
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/placeholder.html) -->
216
238
  <!-- The below content is automatically added from ../apiExamples/placeholder.html -->
217
- <auro-input placeholder="John Doe" bordered required>
239
+ <auro-input placeholder="John Doe" required>
218
240
  <span slot="label">Full name</span>
219
241
  <span slot="helpText">Please enter your full name.</span>
220
242
  </auro-input>
@@ -226,7 +248,7 @@ Use the `placeholder` attribute to add a custom placeholder message within the e
226
248
  <!-- The below code snippet is automatically added from ../apiExamples/placeholder.html -->
227
249
 
228
250
  ```html
229
- <auro-input placeholder="John Doe" bordered required>
251
+ <auro-input placeholder="John Doe" required>
230
252
  <span slot="label">Full name</span>
231
253
  <span slot="helpText">Please enter your full name.</span>
232
254
  </auro-input>
@@ -240,7 +262,7 @@ Use the `value` attribute to programmatically set the value of the input.
240
262
  <div class="exampleWrapper">
241
263
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/programmaticValue.html) -->
242
264
  <!-- The below content is automatically added from ../apiExamples/programmaticValue.html -->
243
- <auro-input value="Alaska Airlines is the best!" bordered>
265
+ <auro-input value="Alaska Airlines is the best!">
244
266
  <span slot="label">Name</span>
245
267
  <span slot="helpText">Please enter your full name.</span>
246
268
  </auro-input>
@@ -252,7 +274,7 @@ Use the `value` attribute to programmatically set the value of the input.
252
274
  <!-- The below code snippet is automatically added from ../apiExamples/programmaticValue.html -->
253
275
 
254
276
  ```html
255
- <auro-input value="Alaska Airlines is the best!" bordered>
277
+ <auro-input value="Alaska Airlines is the best!">
256
278
  <span slot="label">Name</span>
257
279
  <span slot="helpText">Please enter your full name.</span>
258
280
  </auro-input>
@@ -272,7 +294,7 @@ Note: Setting the `value` to `undefined` will also reset the element.
272
294
  <auro-button id="setValidValueBtn">Set Value to Alaska</auro-button>
273
295
  <auro-button id="setUndefinedValueBtn">Set Value to Undefined</auro-button>
274
296
  <br /><br />
275
- <auro-input id="setProgrammaticValueExample" value="Press one of the buttons above!" bordered>
297
+ <auro-input id="setProgrammaticValueExample" value="Press one of the buttons above!">
276
298
  <span slot="label">Name</span>
277
299
  <span slot="helpText">Please enter your full name.</span>
278
300
  </auro-input>
@@ -287,7 +309,7 @@ Note: Setting the `value` to `undefined` will also reset the element.
287
309
  <auro-button id="setValidValueBtn">Set Value to Alaska</auro-button>
288
310
  <auro-button id="setUndefinedValueBtn">Set Value to Undefined</auro-button>
289
311
  <br /><br />
290
- <auro-input id="setProgrammaticValueExample" value="Press one of the buttons above!" bordered>
312
+ <auro-input id="setProgrammaticValueExample" value="Press one of the buttons above!">
291
313
  <span slot="label">Name</span>
292
314
  <span slot="helpText">Please enter your full name.</span>
293
315
  </auro-input>
@@ -324,8 +346,9 @@ The `setCustomValidityRangeOverflow` attribute may optionally be used in combina
324
346
  <div class="exampleWrapper">
325
347
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/maxDate.html) -->
326
348
  <!-- The below content is automatically added from ../apiExamples/maxDate.html -->
327
- <auro-input type="date" max="03/25/2023" setCustomValidityRangeOverflow="The selected date is past the defined maximum date." bordered>
349
+ <auro-input type="date" max="03/25/2023" setCustomValidityRangeOverflow="The selected date is past the defined maximum date.">
328
350
  <span slot="label">Choose a date</span>
351
+ <span slot="helpText">Help Text</span>
329
352
  </auro-input>
330
353
  <!-- AURO-GENERATED-CONTENT:END -->
331
354
  </div>
@@ -335,8 +358,9 @@ The `setCustomValidityRangeOverflow` attribute may optionally be used in combina
335
358
  <!-- The below code snippet is automatically added from ../apiExamples/maxDate.html -->
336
359
 
337
360
  ```html
338
- <auro-input type="date" max="03/25/2023" setCustomValidityRangeOverflow="The selected date is past the defined maximum date." bordered>
361
+ <auro-input type="date" max="03/25/2023" setCustomValidityRangeOverflow="The selected date is past the defined maximum date.">
339
362
  <span slot="label">Choose a date</span>
363
+ <span slot="helpText">Help Text</span>
340
364
  </auro-input>
341
365
  ```
342
366
  <!-- AURO-GENERATED-CONTENT:END -->
@@ -347,8 +371,9 @@ The `setCustomValidityRangeOverflow` attribute may optionally be used in combina
347
371
  <div class="exampleWrapper">
348
372
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/maxNumber.html) -->
349
373
  <!-- The below content is automatically added from ../apiExamples/maxNumber.html -->
350
- <auro-input type="number" max="10" setCustomValidityRangeOverflow="The selected value is above the defined maximum." bordered>
374
+ <auro-input type="number" max="10" setCustomValidityRangeOverflow="The selected value is above the defined maximum.">
351
375
  <span slot="label">Choose a number</span>
376
+ <span slot="helpText">Help Text</span>
352
377
  </auro-input>
353
378
  <!-- AURO-GENERATED-CONTENT:END -->
354
379
  </div>
@@ -358,8 +383,9 @@ The `setCustomValidityRangeOverflow` attribute may optionally be used in combina
358
383
  <!-- The below code snippet is automatically added from ../apiExamples/maxNumber.html -->
359
384
 
360
385
  ```html
361
- <auro-input type="number" max="10" setCustomValidityRangeOverflow="The selected value is above the defined maximum." bordered>
386
+ <auro-input type="number" max="10" setCustomValidityRangeOverflow="The selected value is above the defined maximum.">
362
387
  <span slot="label">Choose a number</span>
388
+ <span slot="helpText">Help Text</span>
363
389
  </auro-input>
364
390
  ```
365
391
  <!-- AURO-GENERATED-CONTENT:END -->
@@ -375,8 +401,9 @@ The `setCustomValidityRangeUnderflow` attribute may optionally be used in combin
375
401
  <div class="exampleWrapper">
376
402
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/minDate.html) -->
377
403
  <!-- The below content is automatically added from ../apiExamples/minDate.html -->
378
- <auro-input type="date" min="03/25/2023" setCustomValidityRangeUnderflow="The selected date is before the defined minimum date." bordered>
404
+ <auro-input type="date" min="03/25/2023" setCustomValidityRangeUnderflow="The selected date is before the defined minimum date.">
379
405
  <span slot="label">Choose a date</span>
406
+ <span slot="helpText">Help Text</span>
380
407
  </auro-input>
381
408
  <!-- AURO-GENERATED-CONTENT:END -->
382
409
  </div>
@@ -386,8 +413,9 @@ The `setCustomValidityRangeUnderflow` attribute may optionally be used in combin
386
413
  <!-- The below code snippet is automatically added from ../apiExamples/minDate.html -->
387
414
 
388
415
  ```html
389
- <auro-input type="date" min="03/25/2023" setCustomValidityRangeUnderflow="The selected date is before the defined minimum date." bordered>
416
+ <auro-input type="date" min="03/25/2023" setCustomValidityRangeUnderflow="The selected date is before the defined minimum date.">
390
417
  <span slot="label">Choose a date</span>
418
+ <span slot="helpText">Help Text</span>
391
419
  </auro-input>
392
420
  ```
393
421
  <!-- AURO-GENERATED-CONTENT:END -->
@@ -398,8 +426,9 @@ The `setCustomValidityRangeUnderflow` attribute may optionally be used in combin
398
426
  <div class="exampleWrapper">
399
427
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/minNumber.html) -->
400
428
  <!-- The below content is automatically added from ../apiExamples/minNumber.html -->
401
- <auro-input type="number" min="10" setCustomValidityRangeUnderflow="The selected value is below the defined minimum." bordered>
429
+ <auro-input type="number" min="10" setCustomValidityRangeUnderflow="The selected value is below the defined minimum.">
402
430
  <span slot="label">Choose a number</span>
431
+ <span slot="helpText">Help Text</span>
403
432
  </auro-input>
404
433
  <!-- AURO-GENERATED-CONTENT:END -->
405
434
  </div>
@@ -409,8 +438,9 @@ The `setCustomValidityRangeUnderflow` attribute may optionally be used in combin
409
438
  <!-- The below code snippet is automatically added from ../apiExamples/minNumber.html -->
410
439
 
411
440
  ```html
412
- <auro-input type="number" min="10" setCustomValidityRangeUnderflow="The selected value is below the defined minimum." bordered>
441
+ <auro-input type="number" min="10" setCustomValidityRangeUnderflow="The selected value is below the defined minimum.">
413
442
  <span slot="label">Choose a number</span>
443
+ <span slot="helpText">Help Text</span>
414
444
  </auro-input>
415
445
  ```
416
446
  <!-- AURO-GENERATED-CONTENT:END -->
@@ -424,7 +454,7 @@ The `setCustomValidityTooLong` attribute may optionally be used in combination w
424
454
  <div class="exampleWrapper">
425
455
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/maxLength.html) -->
426
456
  <!-- The below content is automatically added from ../apiExamples/maxLength.html -->
427
- <auro-input maxlength="12" setCustomValidityTooLong="Oops! There were too many characters entered." bordered required>
457
+ <auro-input maxlength="12" setCustomValidityTooLong="Oops! There were too many characters entered." required>
428
458
  <span slot="label">Voucher Code</span>
429
459
  <span slot="helpText">Please enter your 12 character voucher code.</span>
430
460
  </auro-input>
@@ -436,7 +466,7 @@ The `setCustomValidityTooLong` attribute may optionally be used in combination w
436
466
  <!-- The below code snippet is automatically added from ../apiExamples/maxLength.html -->
437
467
 
438
468
  ```html
439
- <auro-input maxlength="12" setCustomValidityTooLong="Oops! There were too many characters entered." bordered required>
469
+ <auro-input maxlength="12" setCustomValidityTooLong="Oops! There were too many characters entered." required>
440
470
  <span slot="label">Voucher Code</span>
441
471
  <span slot="helpText">Please enter your 12 character voucher code.</span>
442
472
  </auro-input>
@@ -452,7 +482,7 @@ The `setCustomValidityTooShort` attribute may optionally be used in combination
452
482
  <div class="exampleWrapper">
453
483
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/minLength.html) -->
454
484
  <!-- The below content is automatically added from ../apiExamples/minLength.html -->
455
- <auro-input minlength="4" setCustomValidityTooShort="Please enter a full voucher code." bordered required>
485
+ <auro-input minlength="4" setCustomValidityTooShort="Please enter a full voucher code." required>
456
486
  <span slot="label">Voucher Code</span>
457
487
  <span slot="helpText">Please enter your 4 character voucher code.</span>
458
488
  </auro-input>
@@ -464,7 +494,7 @@ The `setCustomValidityTooShort` attribute may optionally be used in combination
464
494
  <!-- The below code snippet is automatically added from ../apiExamples/minLength.html -->
465
495
 
466
496
  ```html
467
- <auro-input minlength="4" setCustomValidityTooShort="Please enter a full voucher code." bordered required>
497
+ <auro-input minlength="4" setCustomValidityTooShort="Please enter a full voucher code." required>
468
498
  <span slot="label">Voucher Code</span>
469
499
  <span slot="helpText">Please enter your 4 character voucher code.</span>
470
500
  </auro-input>
@@ -480,7 +510,7 @@ The `<auro-input>` component supports setting a custom validity message specific
480
510
  <div class="exampleWrapper">
481
511
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/pattern.html) -->
482
512
  <!-- The below content is automatically added from ../apiExamples/pattern.html -->
483
- <auro-input pattern="[a-z]{1,15}" spellcheck="false" setCustomValidityPatternMismatch="Only contain lowercase letters w/no spaces" bordered>
513
+ <auro-input pattern="[a-z]{1,15}" spellcheck="false" setCustomValidityPatternMismatch="Only contain lowercase letters w/no spaces">
484
514
  <span slot="label">Username</span>
485
515
  <span slot="helpText">Please enter a username.</span>
486
516
  </auro-input>
@@ -492,7 +522,7 @@ The `<auro-input>` component supports setting a custom validity message specific
492
522
  <!-- The below code snippet is automatically added from ../apiExamples/pattern.html -->
493
523
 
494
524
  ```html
495
- <auro-input pattern="[a-z]{1,15}" spellcheck="false" setCustomValidityPatternMismatch="Only contain lowercase letters w/no spaces" bordered>
525
+ <auro-input pattern="[a-z]{1,15}" spellcheck="false" setCustomValidityPatternMismatch="Only contain lowercase letters w/no spaces">
496
526
  <span slot="label">Username</span>
497
527
  <span slot="helpText">Please enter a username.</span>
498
528
  </auro-input>
@@ -511,7 +541,7 @@ In this example, the user is able to programmatically change the value of the in
511
541
  <auro-button id="setReadonlyValueBtn">Set Value to Auro Alaska</auro-button>
512
542
  <auro-button id="resetReadonlyValueBtn">Reset</auro-button>
513
543
  <br /><br />
514
- <auro-input readonly bordered id="readonlyExample">
544
+ <auro-input readonly id="readonlyExample">
515
545
  <span slot="label">Name</span>
516
546
  <span slot="helpText">Please enter your full name.</span>
517
547
  </auro-input>
@@ -526,7 +556,7 @@ In this example, the user is able to programmatically change the value of the in
526
556
  <auro-button id="setReadonlyValueBtn">Set Value to Auro Alaska</auro-button>
527
557
  <auro-button id="resetReadonlyValueBtn">Reset</auro-button>
528
558
  <br /><br />
529
- <auro-input readonly bordered id="readonlyExample">
559
+ <auro-input readonly id="readonlyExample">
530
560
  <span slot="label">Name</span>
531
561
  <span slot="helpText">Please enter your full name.</span>
532
562
  </auro-input>
@@ -558,7 +588,7 @@ Example use cases for auro-input support the `activeLabel` attribute. If set, th
558
588
  <div class="exampleWrapper">
559
589
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/activeLabel.html) -->
560
590
  <!-- The below content is automatically added from ../apiExamples/activeLabel.html -->
561
- <auro-input activeLabel bordered>
591
+ <auro-input activeLabel>
562
592
  <span slot="label">Address</span>
563
593
  <span slot="helpText">Please enter your home address.</span>
564
594
  </auro-input>
@@ -570,7 +600,7 @@ Example use cases for auro-input support the `activeLabel` attribute. If set, th
570
600
  <!-- The below code snippet is automatically added from ../apiExamples/activeLabel.html -->
571
601
 
572
602
  ```html
573
- <auro-input activeLabel bordered>
603
+ <auro-input activeLabel>
574
604
  <span slot="label">Address</span>
575
605
  <span slot="helpText">Please enter your home address.</span>
576
606
  </auro-input>
@@ -584,7 +614,7 @@ For use cases where the field is `required`, but live validation is not wanted,
584
614
  <div class="exampleWrapper">
585
615
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/noValidate.html) -->
586
616
  <!-- The below content is automatically added from ../apiExamples/noValidate.html -->
587
- <auro-input noValidate required bordered>
617
+ <auro-input noValidate required>
588
618
  <span slot="label">Address</span>
589
619
  <span slot="helpText">Please enter your home address.</span>
590
620
  </auro-input>
@@ -596,7 +626,7 @@ For use cases where the field is `required`, but live validation is not wanted,
596
626
  <!-- The below code snippet is automatically added from ../apiExamples/noValidate.html -->
597
627
 
598
628
  ```html
599
- <auro-input noValidate required bordered>
629
+ <auro-input noValidate required>
600
630
  <span slot="label">Address</span>
601
631
  <span slot="helpText">Please enter your home address.</span>
602
632
  </auro-input>
@@ -617,7 +647,10 @@ See [IMask](https://imask.js.org/) for more information on how to configure a ma
617
647
  <div class="exampleWrapper">
618
648
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/format.html) -->
619
649
  <!-- The below content is automatically added from ../apiExamples/format.html -->
620
- <auro-input bordered format="47440000"></auro-input>
650
+ <auro-input format="47440000">
651
+ <span slot="label">Custom format</span>
652
+ <span slot="helpText">Format is: 47440000</span>
653
+ </auro-input>
621
654
  <!-- AURO-GENERATED-CONTENT:END -->
622
655
  </div>
623
656
  <auro-accordion alignRight>
@@ -626,7 +659,10 @@ See [IMask](https://imask.js.org/) for more information on how to configure a ma
626
659
  <!-- The below code snippet is automatically added from ../apiExamples/format.html -->
627
660
 
628
661
  ```html
629
- <auro-input bordered format="47440000"></auro-input>
662
+ <auro-input format="47440000">
663
+ <span slot="label">Custom format</span>
664
+ <span slot="helpText">Format is: 47440000</span>
665
+ </auro-input>
630
666
  ```
631
667
  <!-- AURO-GENERATED-CONTENT:END -->
632
668
  </auro-accordion>
@@ -645,7 +681,7 @@ When the validity check fails, the validityState equals `valueMissing`. The erro
645
681
  <div class="exampleWrapper">
646
682
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/required.html) -->
647
683
  <!-- The below content is automatically added from ../apiExamples/required.html -->
648
- <auro-input required bordered placeholder="John Doe">
684
+ <auro-input required placeholder="John Doe">
649
685
  <span slot="label">Full name</span>
650
686
  <span slot="helpText">Please enter your full name.</span>
651
687
  </auro-input>
@@ -657,7 +693,7 @@ When the validity check fails, the validityState equals `valueMissing`. The erro
657
693
  <!-- The below code snippet is automatically added from ../apiExamples/required.html -->
658
694
 
659
695
  ```html
660
- <auro-input required bordered placeholder="John Doe">
696
+ <auro-input required placeholder="John Doe">
661
697
  <span slot="label">Full name</span>
662
698
  <span slot="helpText">Please enter your full name.</span>
663
699
  </auro-input>
@@ -699,7 +735,7 @@ Use the `validateOnInput` attribute to enable live validation on the `input` eve
699
735
  <div class="exampleWrapper">
700
736
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/validateOnInput.html) -->
701
737
  <!-- The below content is automatically added from ../apiExamples/validateOnInput.html -->
702
- <auro-input validateOnInput bordered required pattern="[a-zA-Z-.']+( +[a-zA-Z-.']+)+" setCustomValidityPatternMismatch="Full name requires two or more names with at least one space.">
738
+ <auro-input validateOnInput required pattern="[a-zA-Z-.']+( +[a-zA-Z-.']+)+" setCustomValidityPatternMismatch="Full name requires two or more names with at least one space.">
703
739
  <span slot="label">Full Name</span>
704
740
  <span slot="helpText">Please enter your full name as it appears on the card.</span>
705
741
  </auro-input>
@@ -711,7 +747,7 @@ Use the `validateOnInput` attribute to enable live validation on the `input` eve
711
747
  <!-- The below code snippet is automatically added from ../apiExamples/validateOnInput.html -->
712
748
 
713
749
  ```html
714
- <auro-input validateOnInput bordered required pattern="[a-zA-Z-.']+( +[a-zA-Z-.']+)+" setCustomValidityPatternMismatch="Full name requires two or more names with at least one space.">
750
+ <auro-input validateOnInput required pattern="[a-zA-Z-.']+( +[a-zA-Z-.']+)+" setCustomValidityPatternMismatch="Full name requires two or more names with at least one space.">
715
751
  <span slot="label">Full Name</span>
716
752
  <span slot="helpText">Please enter your full name as it appears on the card.</span>
717
753
  </auro-input>
@@ -727,7 +763,7 @@ The `setCustomValidity` attribute can be used to set a custom string for all val
727
763
  <div class="exampleWrapper">
728
764
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/setCustomValidity.html) -->
729
765
  <!-- The below content is automatically added from ../apiExamples/setCustomValidity.html -->
730
- <auro-input bordered required minlength="3" setCustomValidity="Sorry, please enter your first and last name (one space required).">
766
+ <auro-input required minlength="3" setCustomValidity="Sorry, please enter your first and last name (one space required).">
731
767
  <span slot="label">Full Name</span>
732
768
  <span slot="helpText">Please enter your full name.</span>
733
769
  </auro-input>
@@ -739,7 +775,7 @@ The `setCustomValidity` attribute can be used to set a custom string for all val
739
775
  <!-- The below code snippet is automatically added from ../apiExamples/setCustomValidity.html -->
740
776
 
741
777
  ```html
742
- <auro-input bordered required minlength="3" setCustomValidity="Sorry, please enter your first and last name (one space required).">
778
+ <auro-input required minlength="3" setCustomValidity="Sorry, please enter your first and last name (one space required).">
743
779
  <span slot="label">Full Name</span>
744
780
  <span slot="helpText">Please enter your full name.</span>
745
781
  </auro-input>
@@ -758,7 +794,7 @@ A custom error message can be set using the `error` attribute, or it can be used
758
794
  <auro-button id="setCustomErrorBtn">Set Custom Error</auro-button>
759
795
  <auro-button id="setCustomErrorClearBtn">Clear Custom Error</auro-button>
760
796
  <br /><br />
761
- <auro-input id="setCustomErrorExample" error="Initial error attribute value" bordered>
797
+ <auro-input id="setCustomErrorExample" error="Initial error attribute value">
762
798
  <span slot="label">Name</span>
763
799
  <span slot="helpText">Please enter your full name.</span>
764
800
  </auro-input>
@@ -773,7 +809,7 @@ A custom error message can be set using the `error` attribute, or it can be used
773
809
  <auro-button id="setCustomErrorBtn">Set Custom Error</auro-button>
774
810
  <auro-button id="setCustomErrorClearBtn">Clear Custom Error</auro-button>
775
811
  <br /><br />
776
- <auro-input id="setCustomErrorExample" error="Initial error attribute value" bordered>
812
+ <auro-input id="setCustomErrorExample" error="Initial error attribute value">
777
813
  <span slot="label">Name</span>
778
814
  <span slot="helpText">Please enter your full name.</span>
779
815
  </auro-input>
@@ -807,7 +843,7 @@ export function customError() {
807
843
  <auro-button onDark id="setCustomErrorBtnOnDark">Set Custom Error</auro-button>
808
844
  <auro-button onDark id="setCustomErrorClearBtnOnDark">Clear Custom Error</auro-button>
809
845
  <br /><br />
810
- <auro-input onDark id="setCustomErrorExampleOnDark" error="Initial error attribute value" bordered>
846
+ <auro-input onDark id="setCustomErrorExampleOnDark" error="Initial error attribute value">
811
847
  <span slot="label">Name</span>
812
848
  <span slot="helpText">Please enter your full name.</span>
813
849
  </auro-input>
@@ -822,7 +858,7 @@ export function customError() {
822
858
  <auro-button onDark id="setCustomErrorBtnOnDark">Set Custom Error</auro-button>
823
859
  <auro-button onDark id="setCustomErrorClearBtnOnDark">Clear Custom Error</auro-button>
824
860
  <br /><br />
825
- <auro-input onDark id="setCustomErrorExampleOnDark" error="Initial error attribute value" bordered>
861
+ <auro-input onDark id="setCustomErrorExampleOnDark" error="Initial error attribute value">
826
862
  <span slot="label">Name</span>
827
863
  <span slot="helpText">Please enter your full name.</span>
828
864
  </auro-input>
@@ -859,7 +895,7 @@ Default help text will be added to the input `type="password"` if custom help te
859
895
  <div class="exampleWrapper">
860
896
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/password.html) -->
861
897
  <!-- The below content is automatically added from ../apiExamples/password.html -->
862
- <auro-input type="password" required bordered>
898
+ <auro-input type="password" required>
863
899
  <span slot="label">Password</span>
864
900
  <span slot="helpText">Please enter a secure password.</span>
865
901
  </auro-input>
@@ -868,7 +904,7 @@ Default help text will be added to the input `type="password"` if custom help te
868
904
  <div class="exampleWrapper--ondark" aria-hidden>
869
905
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/onDarkPassword.html) -->
870
906
  <!-- The below content is automatically added from ../apiExamples/onDarkPassword.html -->
871
- <auro-input onDark type="password" required bordered>
907
+ <auro-input onDark type="password" required>
872
908
  <span slot="label">Password</span>
873
909
  <span slot="helpText">Please enter a secure password.</span>
874
910
  </auro-input>
@@ -880,7 +916,7 @@ Default help text will be added to the input `type="password"` if custom help te
880
916
  <!-- The below code snippet is automatically added from ../apiExamples/onDarkPassword.html -->
881
917
 
882
918
  ```html
883
- <auro-input onDark type="password" required bordered>
919
+ <auro-input onDark type="password" required>
884
920
  <span slot="label">Password</span>
885
921
  <span slot="helpText">Please enter a secure password.</span>
886
922
  </auro-input>
@@ -897,7 +933,7 @@ Default help text will be added to the input `type="email"` if custom help text
897
933
  <div class="exampleWrapper">
898
934
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/email.html) -->
899
935
  <!-- The below content is automatically added from ../apiExamples/email.html -->
900
- <auro-input type="email" bordered required>
936
+ <auro-input type="email" required>
901
937
  <span slot="label">Email address</span>
902
938
  <span slot="helpText">Please enter your email address.</span>
903
939
  </auro-input>
@@ -909,7 +945,7 @@ Default help text will be added to the input `type="email"` if custom help text
909
945
  <!-- The below code snippet is automatically added from ../apiExamples/email.html -->
910
946
 
911
947
  ```html
912
- <auro-input type="email" bordered required>
948
+ <auro-input type="email" required>
913
949
  <span slot="label">Email address</span>
914
950
  <span slot="helpText">Please enter your email address.</span>
915
951
  </auro-input>
@@ -926,7 +962,7 @@ This `number` input type should only be used for incremental numeric values, mea
926
962
  <div class="exampleWrapper">
927
963
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/number.html) -->
928
964
  <!-- The below content is automatically added from ../apiExamples/number.html -->
929
- <auro-input type="number" bordered required>
965
+ <auro-input type="number" required>
930
966
  <span slot="label">Number of Passengers</span>
931
967
  <span slot="helpText">Please enter the number of passengers.</span>
932
968
  </auro-input>
@@ -938,7 +974,7 @@ This `number` input type should only be used for incremental numeric values, mea
938
974
  <!-- The below code snippet is automatically added from ../apiExamples/number.html -->
939
975
 
940
976
  ```html
941
- <auro-input type="number" bordered required>
977
+ <auro-input type="number" required>
942
978
  <span slot="label">Number of Passengers</span>
943
979
  <span slot="helpText">Please enter the number of passengers.</span>
944
980
  </auro-input>
@@ -955,7 +991,7 @@ Default help text will be added to the input `type="credit-card"` if custom help
955
991
  <div class="exampleWrapper">
956
992
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/creditCard.html) -->
957
993
  <!-- The below content is automatically added from ../apiExamples/creditCard.html -->
958
- <auro-input type="credit-card" bordered required>
994
+ <auro-input type="credit-card" required>
959
995
  <span slot="label">Card number</span>
960
996
  <span slot="helpText">Valid credit card numbers must include 16 digits (15 for Amex).</span>
961
997
  </auro-input>
@@ -967,7 +1003,7 @@ Default help text will be added to the input `type="credit-card"` if custom help
967
1003
  <!-- The below code snippet is automatically added from ../apiExamples/creditCard.html -->
968
1004
 
969
1005
  ```html
970
- <auro-input type="credit-card" bordered required>
1006
+ <auro-input type="credit-card" required>
971
1007
  <span slot="label">Card number</span>
972
1008
  <span slot="helpText">Valid credit card numbers must include 16 digits (15 for Amex).</span>
973
1009
  </auro-input>
@@ -981,7 +1017,7 @@ Use the `type="credit-card"` and `icon` attributes for a credit card formatted i
981
1017
  <div class="exampleWrapper">
982
1018
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/creditCardIcon.html) -->
983
1019
  <!-- The below content is automatically added from ../apiExamples/creditCardIcon.html -->
984
- <auro-input icon type="credit-card" bordered required>
1020
+ <auro-input icon type="credit-card" required>
985
1021
  <span slot="label">Card number</span>
986
1022
  <span slot="helpText">Valid credit card numbers must include 16 digits (15 for Amex).</span>
987
1023
  </auro-input>
@@ -994,7 +1030,7 @@ Use the `type="credit-card"` and `icon` attributes for a credit card formatted i
994
1030
  <!-- The below code snippet is automatically added from ../apiExamples/creditCardIcon.html -->
995
1031
 
996
1032
  ```html
997
- <auro-input icon type="credit-card" bordered required>
1033
+ <auro-input icon type="credit-card" required>
998
1034
  <span slot="label">Card number</span>
999
1035
  <span slot="helpText">Valid credit card numbers must include 16 digits (15 for Amex).</span>
1000
1036
  </auro-input>
@@ -1009,7 +1045,10 @@ Use the `type="tel"` attribute for a phone number formatted input. The default f
1009
1045
  <div class="exampleWrapper">
1010
1046
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/tel.html) -->
1011
1047
  <!-- The below content is automatically added from ../apiExamples/tel.html -->
1012
- <auro-input type="tel" bordered></auro-input>
1048
+ <auro-input type="tel">
1049
+ <span slot="label">Telephone</span>
1050
+ <span slot="helpText">Help Text</span>
1051
+ </auro-input>
1013
1052
  <!-- AURO-GENERATED-CONTENT:END -->
1014
1053
  </div>
1015
1054
  <auro-accordion alignRight>
@@ -1018,7 +1057,10 @@ Use the `type="tel"` attribute for a phone number formatted input. The default f
1018
1057
  <!-- The below code snippet is automatically added from ../apiExamples/tel.html -->
1019
1058
 
1020
1059
  ```html
1021
- <auro-input type="tel" bordered></auro-input>
1060
+ <auro-input type="tel">
1061
+ <span slot="label">Telephone</span>
1062
+ <span slot="helpText">Help Text</span>
1063
+ </auro-input>
1022
1064
  ```
1023
1065
  <!-- AURO-GENERATED-CONTENT:END -->
1024
1066
  </auro-accordion>
@@ -1030,7 +1072,10 @@ Use the `format` attribute to set a custom phone number format.
1030
1072
  <div class="exampleWrapper">
1031
1073
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/telFormat.html) -->
1032
1074
  <!-- The below content is automatically added from ../apiExamples/telFormat.html -->
1033
- <auro-input type="tel" format="+22 999 99 9999" bordered></auro-input>
1075
+ <auro-input type="tel" format="+22 999 99 9999">
1076
+ <span slot="label">Telephone</span>
1077
+ <span slot="helpText">Help Text</span>
1078
+ </auro-input>
1034
1079
  <!-- AURO-GENERATED-CONTENT:END -->
1035
1080
  </div>
1036
1081
  <auro-accordion alignRight>
@@ -1039,7 +1084,10 @@ Use the `format` attribute to set a custom phone number format.
1039
1084
  <!-- The below code snippet is automatically added from ../apiExamples/telFormat.html -->
1040
1085
 
1041
1086
  ```html
1042
- <auro-input type="tel" format="+22 999 99 9999" bordered></auro-input>
1087
+ <auro-input type="tel" format="+22 999 99 9999">
1088
+ <span slot="label">Telephone</span>
1089
+ <span slot="helpText">Help Text</span>
1090
+ </auro-input>
1043
1091
  ```
1044
1092
  <!-- AURO-GENERATED-CONTENT:END -->
1045
1093
  </auro-accordion>
@@ -1051,8 +1099,9 @@ Use the `type="date"` attribute for a date formatted input. The default date for
1051
1099
  <div class="exampleWrapper">
1052
1100
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/monthDayYear.html) -->
1053
1101
  <!-- The below content is automatically added from ../apiExamples/monthDayYear.html -->
1054
- <auro-input type="date" bordered>
1102
+ <auro-input type="date">
1055
1103
  <span slot="label">Arrival date</span>
1104
+ <span slot="helpText">Help Text</span>
1056
1105
  </auro-input>
1057
1106
  <!-- AURO-GENERATED-CONTENT:END -->
1058
1107
  </div>
@@ -1062,8 +1111,9 @@ Use the `type="date"` attribute for a date formatted input. The default date for
1062
1111
  <!-- The below code snippet is automatically added from ../apiExamples/monthDayYear.html -->
1063
1112
 
1064
1113
  ```html
1065
- <auro-input type="date" bordered>
1114
+ <auro-input type="date">
1066
1115
  <span slot="label">Arrival date</span>
1116
+ <span slot="helpText">Help Text</span>
1067
1117
  </auro-input>
1068
1118
  ```
1069
1119
  <!-- AURO-GENERATED-CONTENT:END -->
@@ -1076,8 +1126,9 @@ Use the `format` attribute to put together any combination of `mm`, `dd`, & `yyy
1076
1126
  <div class="exampleWrapper">
1077
1127
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/yearMonthDay.html) -->
1078
1128
  <!-- The below content is automatically added from ../apiExamples/yearMonthDay.html -->
1079
- <auro-input type="date" format="yyyy/mm/dd" bordered>
1129
+ <auro-input type="date" format="yyyy/mm/dd">
1080
1130
  <span slot="label">Arrival date</span>
1131
+ <span slot="helpText">Help Text</span>
1081
1132
  </auro-input>
1082
1133
  <!-- AURO-GENERATED-CONTENT:END -->
1083
1134
  </div>
@@ -1087,8 +1138,9 @@ Use the `format` attribute to put together any combination of `mm`, `dd`, & `yyy
1087
1138
  <!-- The below code snippet is automatically added from ../apiExamples/yearMonthDay.html -->
1088
1139
 
1089
1140
  ```html
1090
- <auro-input type="date" format="yyyy/mm/dd" bordered>
1141
+ <auro-input type="date" format="yyyy/mm/dd">
1091
1142
  <span slot="label">Arrival date</span>
1143
+ <span slot="helpText">Help Text</span>
1092
1144
  </auro-input>
1093
1145
  ```
1094
1146
  <!-- AURO-GENERATED-CONTENT:END -->
@@ -1096,8 +1148,9 @@ Use the `format` attribute to put together any combination of `mm`, `dd`, & `yyy
1096
1148
  <div class="exampleWrapper">
1097
1149
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/monthYear.html) -->
1098
1150
  <!-- The below content is automatically added from ../apiExamples/monthYear.html -->
1099
- <auro-input type="date" format="mm/yy" bordered>
1151
+ <auro-input type="date" format="mm/yy">
1100
1152
  <span slot="label">Expiration date</span>
1153
+ <span slot="helpText">Help Text</span>
1101
1154
  </auro-input>
1102
1155
  <!-- AURO-GENERATED-CONTENT:END -->
1103
1156
  </div>
@@ -1107,8 +1160,9 @@ Use the `format` attribute to put together any combination of `mm`, `dd`, & `yyy
1107
1160
  <!-- The below code snippet is automatically added from ../apiExamples/monthYear.html -->
1108
1161
 
1109
1162
  ```html
1110
- <auro-input type="date" format="mm/yy" bordered>
1163
+ <auro-input type="date" format="mm/yy">
1111
1164
  <span slot="label">Expiration date</span>
1165
+ <span slot="helpText">Help Text</span>
1112
1166
  </auro-input>
1113
1167
  ```
1114
1168
  <!-- AURO-GENERATED-CONTENT:END -->
@@ -1116,8 +1170,9 @@ Use the `format` attribute to put together any combination of `mm`, `dd`, & `yyy
1116
1170
  <div class="exampleWrapper">
1117
1171
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/day.html) -->
1118
1172
  <!-- The below content is automatically added from ../apiExamples/day.html -->
1119
- <auro-input type="date" format="dd" bordered>
1173
+ <auro-input type="date" format="dd">
1120
1174
  <span slot="label">Day</span>
1175
+ <span slot="helpText">Help Text</span>
1121
1176
  </auro-input>
1122
1177
  <!-- AURO-GENERATED-CONTENT:END -->
1123
1178
  </div>
@@ -1127,8 +1182,9 @@ Use the `format` attribute to put together any combination of `mm`, `dd`, & `yyy
1127
1182
  <!-- The below code snippet is automatically added from ../apiExamples/day.html -->
1128
1183
 
1129
1184
  ```html
1130
- <auro-input type="date" format="dd" bordered>
1185
+ <auro-input type="date" format="dd">
1131
1186
  <span slot="label">Day</span>
1187
+ <span slot="helpText">Help Text</span>
1132
1188
  </auro-input>
1133
1189
  ```
1134
1190
  <!-- AURO-GENERATED-CONTENT:END -->
@@ -1145,7 +1201,7 @@ Use the `reset()` method to reset the `<auro-input>`'s `value` and `validity` st
1145
1201
  <!-- The below content is automatically added from ../apiExamples/resetState.html -->
1146
1202
  <auro-button id="resetStateBtn">Reset</auro-button>
1147
1203
  <br /><br />
1148
- <auro-input id="resetStateExample" bordered minlength="12" value="Auro Team" setCustomValidityTooShort="Please enter your full name!">
1204
+ <auro-input id="resetStateExample" minlength="12" value="Auro Team" setCustomValidityTooShort="Please enter your full name!">
1149
1205
  <span slot="label">Full Name</span>
1150
1206
  <span slot="helpText">Please enter your full name.</span>
1151
1207
  </auro-input>
@@ -1159,7 +1215,7 @@ Use the `reset()` method to reset the `<auro-input>`'s `value` and `validity` st
1159
1215
  ```html
1160
1216
  <auro-button id="resetStateBtn">Reset</auro-button>
1161
1217
  <br /><br />
1162
- <auro-input id="resetStateExample" bordered minlength="12" value="Auro Team" setCustomValidityTooShort="Please enter your full name!">
1218
+ <auro-input id="resetStateExample" minlength="12" value="Auro Team" setCustomValidityTooShort="Please enter your full name!">
1163
1219
  <span slot="label">Full Name</span>
1164
1220
  <span slot="helpText">Please enter your full name.</span>
1165
1221
  </auro-input>
@@ -1187,12 +1243,14 @@ Example illustrates using a JavaScript function attached to an `auro-button` com
1187
1243
  <div class="exampleWrapper">
1188
1244
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/swapValue.html) -->
1189
1245
  <!-- The below content is automatically added from ../apiExamples/swapValue.html -->
1190
- <auro-input id="swapExampleLeft" bordered>
1246
+ <auro-input id="swapExampleLeft">
1191
1247
  <span slot="label">Left Input</span>
1248
+ <span slot="helpText">Help Text</span>
1192
1249
  </auro-input>
1193
1250
  <auro-button id="swapExampleBtn">Swap Values</auro-button>
1194
- <auro-input id="swapExampleRight" bordered>
1251
+ <auro-input id="swapExampleRight">
1195
1252
  <span slot="label">Right Input</span>
1253
+ <span slot="helpText">Help Text</span>
1196
1254
  </auro-input>
1197
1255
  <style>
1198
1256
  #swapExampleWrapper {
@@ -1217,12 +1275,14 @@ Example illustrates using a JavaScript function attached to an `auro-button` com
1217
1275
  <!-- The below code snippet is automatically added from ../apiExamples/swapValue.html -->
1218
1276
 
1219
1277
  ```html
1220
- <auro-input id="swapExampleLeft" bordered>
1278
+ <auro-input id="swapExampleLeft">
1221
1279
  <span slot="label">Left Input</span>
1280
+ <span slot="helpText">Help Text</span>
1222
1281
  </auro-input>
1223
1282
  <auro-button id="swapExampleBtn">Swap Values</auro-button>
1224
- <auro-input id="swapExampleRight" bordered>
1283
+ <auro-input id="swapExampleRight">
1225
1284
  <span slot="label">Right Input</span>
1285
+ <span slot="helpText">Help Text</span>
1226
1286
  </auro-input>
1227
1287
  <style>
1228
1288
  #swapExampleWrapper {