@aurodesignsystem-dev/auro-formkit 0.0.0-pr741.0 → 0.0.0-pr750.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (92) hide show
  1. package/components/bibtemplate/dist/index.js +1 -1
  2. package/components/bibtemplate/dist/registered.js +1 -1
  3. package/components/checkbox/demo/api.html +16 -10
  4. package/components/checkbox/demo/api.min.js +11 -11
  5. package/components/checkbox/demo/index.html +16 -10
  6. package/components/checkbox/demo/index.min.js +11 -11
  7. package/components/checkbox/demo/readme.html +16 -9
  8. package/components/checkbox/dist/index.js +11 -11
  9. package/components/checkbox/dist/registered.js +11 -11
  10. package/components/combobox/demo/api.html +16 -10
  11. package/components/combobox/demo/api.md +12 -6
  12. package/components/combobox/demo/api.min.js +411 -103
  13. package/components/combobox/demo/index.html +16 -10
  14. package/components/combobox/demo/index.min.js +411 -103
  15. package/components/combobox/demo/readme.html +16 -9
  16. package/components/combobox/dist/index.js +374 -91
  17. package/components/combobox/dist/registered.js +374 -91
  18. package/components/counter/demo/api.html +16 -10
  19. package/components/counter/demo/api.md +140 -7
  20. package/components/counter/demo/api.min.js +1145 -987
  21. package/components/counter/demo/index.html +16 -10
  22. package/components/counter/demo/index.md +82 -0
  23. package/components/counter/demo/index.min.js +1145 -987
  24. package/components/counter/demo/readme.html +16 -9
  25. package/components/counter/dist/auro-counter-group.d.ts +64 -23
  26. package/components/counter/dist/auro-counter.d.ts +10 -0
  27. package/components/counter/dist/index.js +1145 -987
  28. package/components/counter/dist/registered.js +1145 -987
  29. package/components/datepicker/demo/api.html +16 -10
  30. package/components/datepicker/demo/api.min.js +374 -91
  31. package/components/datepicker/demo/index.html +16 -10
  32. package/components/datepicker/demo/index.min.js +374 -91
  33. package/components/datepicker/demo/readme.html +16 -9
  34. package/components/datepicker/dist/auro-datepicker.d.ts +6 -0
  35. package/components/datepicker/dist/index.js +374 -91
  36. package/components/datepicker/dist/registered.js +374 -91
  37. package/components/dropdown/demo/api.html +16 -10
  38. package/components/dropdown/demo/api.md +77 -267
  39. package/components/dropdown/demo/api.min.js +331 -64
  40. package/components/dropdown/demo/index.html +16 -10
  41. package/components/dropdown/demo/index.md +45 -363
  42. package/components/dropdown/demo/index.min.js +331 -64
  43. package/components/dropdown/demo/readme.html +16 -9
  44. package/components/dropdown/dist/auro-dropdown.d.ts +35 -67
  45. package/components/dropdown/dist/index.js +331 -64
  46. package/components/dropdown/dist/registered.js +331 -64
  47. package/components/form/demo/api.html +16 -9
  48. package/components/form/demo/autocomplete.html +19 -3
  49. package/components/form/demo/index.html +16 -9
  50. package/components/form/demo/readme.html +16 -9
  51. package/components/form/demo/working.html +19 -13
  52. package/components/helptext/dist/index.js +1 -1
  53. package/components/helptext/dist/registered.js +1 -1
  54. package/components/input/demo/api.html +16 -10
  55. package/components/input/demo/api.md +1 -1
  56. package/components/input/demo/api.min.js +14 -14
  57. package/components/input/demo/index.html +16 -10
  58. package/components/input/demo/index.min.js +14 -14
  59. package/components/input/demo/readme.html +16 -9
  60. package/components/input/dist/base-input.d.ts +1 -1
  61. package/components/input/dist/index.js +14 -14
  62. package/components/input/dist/registered.js +14 -14
  63. package/components/menu/demo/api.html +16 -32
  64. package/components/menu/demo/api.md +1 -1
  65. package/components/menu/demo/api.min.js +37 -12
  66. package/components/menu/demo/index.html +16 -10
  67. package/components/menu/demo/index.min.js +37 -12
  68. package/components/menu/demo/readme.html +16 -9
  69. package/components/menu/dist/auro-menu.d.ts +13 -2
  70. package/components/menu/dist/index.js +37 -12
  71. package/components/menu/dist/registered.js +37 -12
  72. package/components/radio/demo/api.html +16 -10
  73. package/components/radio/demo/api.md +0 -1
  74. package/components/radio/demo/api.min.js +61 -76
  75. package/components/radio/demo/index.html +16 -10
  76. package/components/radio/demo/index.min.js +61 -76
  77. package/components/radio/demo/readme.html +16 -9
  78. package/components/radio/dist/auro-radio.d.ts +8 -11
  79. package/components/radio/dist/index.js +61 -76
  80. package/components/radio/dist/registered.js +61 -76
  81. package/components/select/demo/api.html +16 -10
  82. package/components/select/demo/api.js +0 -2
  83. package/components/select/demo/api.md +53 -51
  84. package/components/select/demo/api.min.js +491 -326
  85. package/components/select/demo/index.html +16 -11
  86. package/components/select/demo/index.md +6 -158
  87. package/components/select/demo/index.min.js +491 -314
  88. package/components/select/demo/readme.html +16 -9
  89. package/components/select/dist/auro-select.d.ts +33 -8
  90. package/components/select/dist/index.js +454 -302
  91. package/components/select/dist/registered.js +454 -302
  92. package/package.json +26 -25
package/components/counter/demo/api.html CHANGED
@@ -16,18 +16,24 @@
16
16
  <head>
17
17
  <meta charset="UTF-8" />
18
18
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
19
- <title>Auro Web Component Generator | auro-counter custom element</title>
20
- <link
21
- rel="stylesheet"
22
- type="text/css"
23
- href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/themes/prism.css"
24
- />
25
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/auro-classic/CSSCustomProperties.css">
26
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/alaska/CSSCustomProperties--alaska.css">
19
+ <title>Auro Web Component Demo | auro-counter</title>
20
+
21
+ <!-- Prism.js Stylesheet -->
22
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/themes/prism.css"/>
23
+
24
+ <!-- Legacy reference is still needed to support auro-counter's use of legacy token values at this time -->
25
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/legacy/auro-classic/CSSCustomProperties.css"/>
26
+
27
+ <!-- Design Token Alaska Theme -->
28
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/themes/alaska/CSSCustomProperties--alaska.min.css"/>
29
+
30
+ <!-- Webcore Stylesheet Alaska Theme -->
31
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/themes/alaska.global.min.css" />
32
+
33
+ <!-- Demo Specific Styles -->
27
34
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
28
35
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/elementDemoStyles.css" />
29
- <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/essentials-as.css" />
30
- </head>
36
+ </head>
31
37
  <body class="auro-markdown">
32
38
  <main></main>
33
39
 
package/components/counter/demo/api.md CHANGED
@@ -8,6 +8,7 @@
8
8
  | Property | Attribute | Type | Default | Description |
9
9
  |------------|------------|-----------|-------------|--------------------------------------------------|
10
10
  | [disabled](#disabled) | `disabled` | `boolean` | false | Indicates if the counter is disabled. |
11
+ | [error](#error) | `error` | `string` | | Error state and message.<br />True if set, value is the error message. |
11
12
  | [max](#max) | `max` | `number` | 9 | The maximum value for the counter. |
12
13
  | [min](#min) | `min` | `number` | 0 | The minimum value for the counter. |
13
14
  | [onDark](#onDark) | `onDark` | `boolean` | false | If declared, the counter will be rendered with onDark styles. |
@@ -42,6 +43,7 @@
42
43
  | Property | Attribute | Type | Default | Description |
43
44
  |---------------------------|---------------------------|--------------------------|----------------|--------------------------------------------------|
44
45
  | [autoPlacement](#autoPlacement) | `autoPlacement` | `boolean` | "false" | If declared, bib's position will be automatically calculated where to appear. |
46
+ | [error](#error) | `error` | `string` | | The current error message to display when the component is invalid. |
45
47
  | [fullscreenBreakpoint](#fullscreenBreakpoint) | `fullscreenBreakpoint` | `string` | "sm" | Defines the screen size breakpoint (`xs`, `sm`, `md`, `lg`, `xl`, `disabled`)<br />at which the dropdown switches to fullscreen mode on mobile. `disabled` indicates a dropdown should _never_ enter fullscreen.<br /><br />When expanded, the dropdown will automatically display in fullscreen mode<br />if the screen size is equal to or smaller than the selected breakpoint. |
46
48
  | [isDropdown](#isDropdown) | `isDropdown` | `boolean` | false | Indicates if the counter group is displayed as a dropdown. |
47
49
  | [largeFullscreenHeadline](#largeFullscreenHeadline) | `largeFullscreenHeadline` | `boolean` | false | If declared, make bib.fullscreen.headline in HeadingDisplay.<br />Otherwise, Heading 600. |
@@ -52,7 +54,7 @@
52
54
  | [noFlip](#noFlip) | `noFlip` | `boolean` | "false" | If declared, the bib will NOT flip to an alternate position<br />when there isn't enough space in the specified `placement`. |
53
55
  | [offset](#offset) | `offset` | `number` | "0" | Gap between the trigger element and bib. |
54
56
  | [onDark](#onDark) | `onDark` | `boolean` | false | If declared, counters and dropdown will be rendered with onDark styles. |
55
- | [placement](#placement) | `placement` | `string` | "bottom-start" | Position where the bib should appear relative to the trigger.<br />Accepted values:<br />"top" \| "right" \| "bottom" \| "left" \|<br />"bottom-start" \| "top-start" \| "top-end" \|<br />"right-start" \| "right-end" \| "bottom-end" \|<br />"left-start" \| "left-end" |
57
+ | [placement](#placement) | `placement` | `string` | "bottom-start" | Position where the bib should appear relative to the trigger.<br />Accepted values:<br />"top" \| "right" \| "bottom" \| "left" \|<br />"bottom-start" \| "top-start" \| "top-end" \|<br />"right-start" \| "right-end" \| "bottom-end" \|<br />"left-start" \| "left-end". |
56
58
  | [total](#total) | `total` | `number` | "undefined" | The total value of the counters. |
57
59
  | [validity](#validity) | `validity` | `string` | "undefined" | Reflects the validity state. |
58
60
  | [value](#value) | `value` | `object` | "undefined" | The current individual values of the nested counters. |
@@ -340,6 +342,131 @@ counter.addEventListener('input', (event) => {
340
342
  <!-- AURO-GENERATED-CONTENT:END -->
341
343
  </auro-accordion>
342
344
 
345
+ ### Counter with Custom Error
346
+
347
+ A custom error can be set on the counter by adding the `error` attribute the desired message.
348
+
349
+ <div class="exampleWrapper">
350
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/counter-error.html) -->
351
+ <!-- The below content is automatically added from ./../apiExamples/counter-error.html -->
352
+ <auro-counter error="There is an error with the counter">
353
+ Adults
354
+ </auro-counter>
355
+ <!-- AURO-GENERATED-CONTENT:END -->
356
+ </div>
357
+ <div class="exampleWrapper--ondark" aria-hidden>
358
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/ondark-counter-error.html) -->
359
+ <!-- The below content is automatically added from ./../apiExamples/ondark-counter-error.html -->
360
+ <auro-counter ondark error="There is an error with the counter">
361
+ Adults
362
+ </auro-counter>
363
+ <!-- AURO-GENERATED-CONTENT:END -->
364
+ </div>
365
+ <auro-accordion alignRight>
366
+ <span slot="trigger">See code</span>
367
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/counter-error.html) -->
368
+ <!-- The below code snippet is automatically added from ./../apiExamples/counter-error.html -->
369
+
370
+ ```html
371
+ <auro-counter error="There is an error with the counter">
372
+ Adults
373
+ </auro-counter>
374
+ ```
375
+ <!-- AURO-GENERATED-CONTENT:END -->
376
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/ondark-counter-error.html) -->
377
+ <!-- The below content is automatically added from ./../apiExamples/ondark-counter-error.html -->
378
+ <auro-counter ondark error="There is an error with the counter">
379
+ Adults
380
+ </auro-counter>
381
+ <!-- AURO-GENERATED-CONTENT:END -->
382
+ </auro-accordion>
383
+
384
+ ### Counter Dropdown with Errored Counters
385
+
386
+ A counter dropdown with counters in an errored state will display the errors for each errored counter by default
387
+
388
+ <div class="exampleWrapper">
389
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/dropdown-error-basic.html) -->
390
+ <!-- The below content is automatically added from ./../apiExamples/dropdown-error-basic.html -->
391
+ <auro-counter-group isDropdown>
392
+ <div slot="bib.fullscreen.headline">Passengers</div>
393
+ <div slot="label">Passengers</div>
394
+ <auro-counter error="Cannot have less than 1 adult passenger">
395
+ Adults
396
+ <span slot="description">18 years or older</span>
397
+ </auro-counter>
398
+ <auro-counter error="Cannot have more than 2 child passengers">
399
+ Children
400
+ <span slot="description">2-17 years</span>
401
+ </auro-counter>
402
+ </auro-counter-group>
403
+ <!-- AURO-GENERATED-CONTENT:END -->
404
+ </div>
405
+ <auro-accordion alignRight>
406
+ <span slot="trigger">See code</span>
407
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/dropdown-error-basic.html) -->
408
+ <!-- The below code snippet is automatically added from ./../apiExamples/dropdown-error-basic.html -->
409
+
410
+ ```html
411
+ <auro-counter-group isDropdown>
412
+ <div slot="bib.fullscreen.headline">Passengers</div>
413
+ <div slot="label">Passengers</div>
414
+ <auro-counter error="Cannot have less than 1 adult passenger">
415
+ Adults
416
+ <span slot="description">18 years or older</span>
417
+ </auro-counter>
418
+ <auro-counter error="Cannot have more than 2 child passengers">
419
+ Children
420
+ <span slot="description">2-17 years</span>
421
+ </auro-counter>
422
+ </auro-counter-group>
423
+ ```
424
+ <!-- AURO-GENERATED-CONTENT:END -->
425
+ </auro-accordion>
426
+
427
+ ### Counter Dropdown with Custom Error
428
+
429
+ The error message for a dropdown counter with errored counters can also be overridden with the `error` attribute.
430
+
431
+ <div class="exampleWrapper">
432
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/dropdown-error-custom.html) -->
433
+ <!-- The below content is automatically added from ./../apiExamples/dropdown-error-custom.html -->
434
+ <auro-counter-group error="Please select the appropriate number of passengers" isDropdown>
435
+ <div slot="bib.fullscreen.headline">Passengers</div>
436
+ <div slot="label">Passengers</div>
437
+ <auro-counter error="Cannot have less than 1 adult passenger">
438
+ Adults
439
+ <span slot="description">18 years or older</span>
440
+ </auro-counter>
441
+ <auro-counter error="Cannot have more than 2 child passengers">
442
+ Children
443
+ <span slot="description">2-17 years</span>
444
+ </auro-counter>
445
+ </auro-counter-group>
446
+ <!-- AURO-GENERATED-CONTENT:END -->
447
+ </div>
448
+ <auro-accordion alignRight>
449
+ <span slot="trigger">See code</span>
450
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/dropdown-error-custom.html) -->
451
+ <!-- The below code snippet is automatically added from ./../apiExamples/dropdown-error-custom.html -->
452
+
453
+ ```html
454
+ <auro-counter-group error="Please select the appropriate number of passengers" isDropdown>
455
+ <div slot="bib.fullscreen.headline">Passengers</div>
456
+ <div slot="label">Passengers</div>
457
+ <auro-counter error="Cannot have less than 1 adult passenger">
458
+ Adults
459
+ <span slot="description">18 years or older</span>
460
+ </auro-counter>
461
+ <auro-counter error="Cannot have more than 2 child passengers">
462
+ Children
463
+ <span slot="description">2-17 years</span>
464
+ </auro-counter>
465
+ </auro-counter-group>
466
+ ```
467
+ <!-- AURO-GENERATED-CONTENT:END -->
468
+ </auro-accordion>
469
+
343
470
  ### Group Max/Min
344
471
 
345
472
  The group counter max or min property sets the value for all counters in the group. If a counter has a max value set, the group max attribute will override it. All increment buttons as a result will be disabled to prevent the group of counters from exceeding the group max.
@@ -428,7 +555,8 @@ The bib position can be customized with `placement`, `offset`, `flip`, `autoPlac
428
555
  <div style="width: 350px">
429
556
  <auro-counter-group isDropdown offset="20" placement="bottom-end">
430
557
  <div slot="bib.fullscreen.headline">Passengers</div>
431
- <div slot="label">bottom-end bib with 20px offset</div>
558
+ <span slot="label">Label</span>
559
+ <span slot="helpText">bottom-end bib with 20px offset</span>
432
560
  <auro-counter>
433
561
  Adults
434
562
  <span slot="description">18 years or older</span>
@@ -440,7 +568,8 @@ The bib position can be customized with `placement`, `offset`, `flip`, `autoPlac
440
568
  </auro-counter-group>
441
569
  <auro-counter-group isDropdown offset="20" placement="bottom-end" noFlip>
442
570
  <div slot="bib.fullscreen.headline">Passengers</div>
443
- <div slot="label">bottom-end bib with 20px offset and noFlip</div>
571
+ <span slot="label">Label</span>
572
+ <span slot="helpText">bottom-end bib with 20px offset and noFlip</span>
444
573
  <auro-counter>
445
574
  Adults
446
575
  <span slot="description">18 years or older</span>
@@ -452,7 +581,8 @@ The bib position can be customized with `placement`, `offset`, `flip`, `autoPlac
452
581
  </auro-counter-group>
453
582
  <auro-counter-group isDropdown offset="20" placement="right" noFlip autoPlacement>
454
583
  <div slot="bib.fullscreen.headline">Passengers</div>
455
- <div slot="label">right bib with 20px offset, noFlip and autoPlacement</div>
584
+ <span slot="label">Label</span>
585
+ <span slot="helpText">right bib with 20px offset, noFlip and autoPlacement</span>
456
586
  <auro-counter>
457
587
  Adults
458
588
  <span slot="description">18 years or older</span>
@@ -474,7 +604,8 @@ The bib position can be customized with `placement`, `offset`, `flip`, `autoPlac
474
604
  <div style="width: 350px">
475
605
  <auro-counter-group isDropdown offset="20" placement="bottom-end">
476
606
  <div slot="bib.fullscreen.headline">Passengers</div>
477
- <div slot="label">bottom-end bib with 20px offset</div>
607
+ <span slot="label">Label</span>
608
+ <span slot="helpText">bottom-end bib with 20px offset</span>
478
609
  <auro-counter>
479
610
  Adults
480
611
  <span slot="description">18 years or older</span>
@@ -486,7 +617,8 @@ The bib position can be customized with `placement`, `offset`, `flip`, `autoPlac
486
617
  </auro-counter-group>
487
618
  <auro-counter-group isDropdown offset="20" placement="bottom-end" noFlip>
488
619
  <div slot="bib.fullscreen.headline">Passengers</div>
489
- <div slot="label">bottom-end bib with 20px offset and noFlip</div>
620
+ <span slot="label">Label</span>
621
+ <span slot="helpText">bottom-end bib with 20px offset and noFlip</span>
490
622
  <auro-counter>
491
623
  Adults
492
624
  <span slot="description">18 years or older</span>
@@ -498,7 +630,8 @@ The bib position can be customized with `placement`, `offset`, `flip`, `autoPlac
498
630
  </auro-counter-group>
499
631
  <auro-counter-group isDropdown offset="20" placement="right" noFlip autoPlacement>
500
632
  <div slot="bib.fullscreen.headline">Passengers</div>
501
- <div slot="label">right bib with 20px offset, noFlip and autoPlacement</div>
633
+ <span slot="label">Label</span>
634
+ <span slot="helpText">right bib with 20px offset, noFlip and autoPlacement</span>
502
635
  <auro-counter>
503
636
  Adults
504
637
  <span slot="description">18 years or older</span>