@aurodesignsystem-dev/auro-formkit 0.0.0-pr794.1 → 0.0.0-pr798.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 (65) hide show
  1. package/components/bibtemplate/dist/buttonVersion.d.ts +1 -1
  2. package/components/bibtemplate/dist/index.js +22 -72
  3. package/components/bibtemplate/dist/registered.js +22 -72
  4. package/components/checkbox/demo/api.md +1 -2
  5. package/components/checkbox/demo/api.min.js +4 -9
  6. package/components/checkbox/demo/index.min.js +4 -9
  7. package/components/checkbox/dist/index.js +4 -9
  8. package/components/checkbox/dist/registered.js +4 -9
  9. package/components/combobox/demo/api.md +0 -2
  10. package/components/combobox/demo/api.min.js +70 -182
  11. package/components/combobox/demo/index.min.js +70 -182
  12. package/components/combobox/dist/auro-combobox.d.ts +4 -2
  13. package/components/combobox/dist/index.js +62 -160
  14. package/components/combobox/dist/registered.js +62 -160
  15. package/components/counter/demo/api.md +0 -2
  16. package/components/counter/demo/api.min.js +52 -174
  17. package/components/counter/demo/index.md +4 -4
  18. package/components/counter/demo/index.min.js +52 -174
  19. package/components/counter/dist/auro-counter-group.d.ts +0 -10
  20. package/components/counter/dist/index.js +52 -174
  21. package/components/counter/dist/registered.js +52 -174
  22. package/components/datepicker/README.md +1 -1
  23. package/components/datepicker/demo/api.md +19 -41
  24. package/components/datepicker/demo/api.min.js +166 -462
  25. package/components/datepicker/demo/index.md +4 -4
  26. package/components/datepicker/demo/index.min.js +166 -462
  27. package/components/datepicker/demo/readme.md +1 -1
  28. package/components/datepicker/dist/auro-datepicker.d.ts +12 -60
  29. package/components/datepicker/dist/index.js +166 -462
  30. package/components/datepicker/dist/registered.js +166 -462
  31. package/components/dropdown/demo/api.md +8 -7
  32. package/components/dropdown/demo/api.min.js +5 -9
  33. package/components/dropdown/demo/index.min.js +5 -9
  34. package/components/dropdown/dist/index.js +5 -9
  35. package/components/dropdown/dist/registered.js +5 -9
  36. package/components/helptext/dist/auro-helptext.d.ts +2 -0
  37. package/components/helptext/dist/index.js +4 -2
  38. package/components/helptext/dist/registered.js +4 -2
  39. package/components/input/demo/api.min.js +28 -76
  40. package/components/input/demo/index.min.js +28 -76
  41. package/components/input/dist/index.js +28 -76
  42. package/components/input/dist/registered.js +28 -76
  43. package/components/menu/demo/api.html +15 -0
  44. package/components/menu/demo/api.md +12 -12
  45. package/components/menu/demo/api.min.js +8 -22
  46. package/components/menu/demo/index.min.js +8 -22
  47. package/components/menu/dist/auro-menu.d.ts +2 -2
  48. package/components/menu/dist/auro-menuoption.d.ts +2 -2
  49. package/components/menu/dist/index.js +8 -22
  50. package/components/menu/dist/registered.js +8 -22
  51. package/components/radio/demo/api.md +1 -32
  52. package/components/radio/demo/api.min.js +6 -4
  53. package/components/radio/demo/index.min.js +6 -4
  54. package/components/radio/dist/index.js +6 -4
  55. package/components/radio/dist/registered.js +6 -4
  56. package/components/select/demo/api.md +70 -49
  57. package/components/select/demo/api.min.js +54 -126
  58. package/components/select/demo/index.md +137 -1057
  59. package/components/select/demo/index.min.js +54 -126
  60. package/components/select/dist/auro-select.d.ts +9 -10
  61. package/components/select/dist/index.js +46 -104
  62. package/components/select/dist/registered.js +46 -104
  63. package/package.json +1 -1
  64. package/components/datepicker/dist/styles/classic/style-css.d.ts +0 -2
  65. /package/components/datepicker/dist/styles/{classic → default}/color-css.d.ts +0 -0
package/components/select/demo/api.md CHANGED
@@ -48,9 +48,7 @@ The auro-select element is a wrapper for auro-dropdown and auro-menu to create a
48
48
 
49
49
  | Method | Type | Description |
50
50
  |------------|----------------------------------------|--------------------------------------------------|
51
- | [hideBib](#hideBib) | `(): void` | Hides the dropdown bib if its open. |
52
51
  | [reset](#reset) | `(): void` | Resets component to initial state. |
53
- | [showBib](#showBib) | `(): void` | Shows the dropdown bib if there are options to show. |
54
52
  | [validate](#validate) | `(force?: boolean \| undefined): void` | Validates value.<br /><br />**force**: Whether to force validation. |
55
53
 
56
54
  ## Events
@@ -75,9 +73,12 @@ The auro-select element is a wrapper for auro-dropdown and auro-menu to create a
75
73
 
76
74
  ## CSS Shadow Parts
77
75
 
78
- | Part | Description |
79
- |------------|-----------------------------|
80
- | [helpText](#helpText) | Apply CSS to the help text. |
76
+ | Part | Description |
77
+ |-------------------|--------------------------------------------------|
78
+ | [dropdownChevron](#dropdownChevron) | Apply CSS to the collapsed/expanded state icon container. |
79
+ | [dropdownSize](#dropdownSize) | Apply size styles to the dropdown bib. (height, width, maxHeight, maxWidth only) |
80
+ | [dropdownTrigger](#dropdownTrigger) | Apply CSS to the trigger content container. |
81
+ | [helpText](#helpText) | Apply CSS to the help text. |
81
82
  <!-- AURO-GENERATED-CONTENT:END -->
82
83
 
83
84
  ## API Examples
@@ -410,9 +411,10 @@ When the validity check fails the validityState, equals `valueMissing`. The erro
410
411
  <div class="exampleWrapper">
411
412
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/required.html) -->
412
413
  <!-- The below content is automatically added from ./../apiExamples/required.html -->
413
- <auro-select required setCustomValidityValueMissing="Custom required validation error message." placeholder="Placeholder Text">
414
+ <auro-select required setCustomValidityValueMissing="Custom required validation error message.">
414
415
  <span slot="bib.fullscreen.headline">Bib Headline</span>
415
- <span slot="label">Label</span>
416
+ <span slot="label">required field</span>
417
+ <label slot="placeholder">Placeholder Text</label>
416
418
  <auro-menu>
417
419
  <auro-menuoption value="stops">Stops</auro-menuoption>
418
420
  <auro-menuoption value="price">Price</auro-menuoption>
@@ -430,9 +432,10 @@ When the validity check fails the validityState, equals `valueMissing`. The erro
430
432
  <!-- The below code snippet is automatically added from ./../apiExamples/required.html -->
431
433
 
432
434
  ```html
433
- <auro-select required setCustomValidityValueMissing="Custom required validation error message." placeholder="Placeholder Text">
435
+ <auro-select required setCustomValidityValueMissing="Custom required validation error message.">
434
436
  <span slot="bib.fullscreen.headline">Bib Headline</span>
435
- <span slot="label">Label</span>
437
+ <span slot="label">required field</span>
438
+ <label slot="placeholder">Placeholder Text</label>
436
439
  <auro-menu>
437
440
  <auro-menuoption value="stops">Stops</auro-menuoption>
438
441
  <auro-menuoption value="price">Price</auro-menuoption>
@@ -496,9 +499,10 @@ Use the `error` boolean attribute to toggle the error UI.
496
499
  <div class="exampleWrapper">
497
500
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/error.html) -->
498
501
  <!-- The below content is automatically added from ./../apiExamples/error.html -->
499
- <auro-select error="Custom error message" placeholder="Placeholder Text">
502
+ <auro-select error="Custom error message">
503
+ <span slot="label">error select example</span>
500
504
  <span slot="bib.fullscreen.headline">Bib Headline</span>
501
- <span slot="label">Label</span>
505
+ <label slot="placeholder">Placeholder Text</label>
502
506
  <auro-menu>
503
507
  <auro-menuoption value="stops">Stops</auro-menuoption>
504
508
  <auro-menuoption value="price">Price</auro-menuoption>
@@ -513,9 +517,10 @@ Use the `error` boolean attribute to toggle the error UI.
513
517
  <div class="exampleWrapper--ondark" aria-hidden>
514
518
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/onDarkError.html) -->
515
519
  <!-- The below content is automatically added from ./../apiExamples/onDarkError.html -->
516
- <auro-select onDark error="Custom error message" placeholder="Placeholder Text">
520
+ <auro-select onDark error="Custom error message">
521
+ <span slot="label">error select example</span>
517
522
  <span slot="bib.fullscreen.headline">Bib Headline</span>
518
- <span slot="label">Label</span>
523
+ <label slot="placeholder">Placeholder Text</label>
519
524
  <auro-menu>
520
525
  <auro-menuoption value="stops">Stops</auro-menuoption>
521
526
  <auro-menuoption value="price">Price</auro-menuoption>
@@ -533,9 +538,10 @@ Use the `error` boolean attribute to toggle the error UI.
533
538
  <!-- The below code snippet is automatically added from ./../apiExamples/error.html -->
534
539
 
535
540
  ```html
536
- <auro-select error="Custom error message" placeholder="Placeholder Text">
541
+ <auro-select error="Custom error message">
542
+ <span slot="label">error select example</span>
537
543
  <span slot="bib.fullscreen.headline">Bib Headline</span>
538
- <span slot="label">Label</span>
544
+ <label slot="placeholder">Placeholder Text</label>
539
545
  <auro-menu>
540
546
  <auro-menuoption value="stops">Stops</auro-menuoption>
541
547
  <auro-menuoption value="price">Price</auro-menuoption>
@@ -549,9 +555,10 @@ Use the `error` boolean attribute to toggle the error UI.
549
555
  <!-- AURO-GENERATED-CONTENT:END -->
550
556
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/onDarkError.html) -->
551
557
  <!-- The below content is automatically added from ./../apiExamples/onDarkError.html -->
552
- <auro-select onDark error="Custom error message" placeholder="Placeholder Text">
558
+ <auro-select onDark error="Custom error message">
559
+ <span slot="label">error select example</span>
553
560
  <span slot="bib.fullscreen.headline">Bib Headline</span>
554
- <span slot="label">Label</span>
561
+ <label slot="placeholder">Placeholder Text</label>
555
562
  <auro-menu>
556
563
  <auro-menuoption value="stops">Stops</auro-menuoption>
557
564
  <auro-menuoption value="price">Price</auro-menuoption>
@@ -570,9 +577,10 @@ Use the `disabled` boolean attribute to toggle the disabled UI.
570
577
  <div class="exampleWrapper">
571
578
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/disabled.html) -->
572
579
  <!-- The below content is automatically added from ./../apiExamples/disabled.html -->
573
- <auro-select disabled placeholder="Placeholder Text">
580
+ <auro-select disabled>
574
581
  <span slot="bib.fullscreen.headline">Bib Headline</span>
575
- <span slot="label">Label</span>
582
+ <label slot="placeholder">Placeholder Text</label>
583
+ <span slot="label">disabled select example</span>
576
584
  <auro-menu>
577
585
  <auro-menuoption value="stops">Stops</auro-menuoption>
578
586
  <auro-menuoption value="price">Price</auro-menuoption>
@@ -587,9 +595,10 @@ Use the `disabled` boolean attribute to toggle the disabled UI.
587
595
  <div class="exampleWrapper--ondark" aria-hidden>
588
596
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/onDarkDisabled.html) -->
589
597
  <!-- The below content is automatically added from ./../apiExamples/onDarkDisabled.html -->
590
- <auro-select onDark disabled placeholder="Placeholder Text">
598
+ <auro-select onDark disabled>
591
599
  <span slot="bib.fullscreen.headline">Bib Headline</span>
592
- <span slot="label">Label</span>
600
+ <label slot="placeholder">Placeholder Text</label>
601
+ <span slot="label">disabled select example</span>
593
602
  <auro-menu>
594
603
  <auro-menuoption value="stops">Stops</auro-menuoption>
595
604
  <auro-menuoption value="price">Price</auro-menuoption>
@@ -607,9 +616,10 @@ Use the `disabled` boolean attribute to toggle the disabled UI.
607
616
  <!-- The below code snippet is automatically added from ./../apiExamples/disabled.html -->
608
617
 
609
618
  ```html
610
- <auro-select disabled placeholder="Placeholder Text">
619
+ <auro-select disabled>
611
620
  <span slot="bib.fullscreen.headline">Bib Headline</span>
612
- <span slot="label">Label</span>
621
+ <label slot="placeholder">Placeholder Text</label>
622
+ <span slot="label">disabled select example</span>
613
623
  <auro-menu>
614
624
  <auro-menuoption value="stops">Stops</auro-menuoption>
615
625
  <auro-menuoption value="price">Price</auro-menuoption>
@@ -623,9 +633,10 @@ Use the `disabled` boolean attribute to toggle the disabled UI.
623
633
  <!-- AURO-GENERATED-CONTENT:END -->
624
634
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/onDarkDisabled.html) -->
625
635
  <!-- The below content is automatically added from ./../apiExamples/onDarkDisabled.html -->
626
- <auro-select onDark disabled placeholder="Placeholder Text">
636
+ <auro-select onDark disabled>
627
637
  <span slot="bib.fullscreen.headline">Bib Headline</span>
628
- <span slot="label">Label</span>
638
+ <label slot="placeholder">Placeholder Text</label>
639
+ <span slot="label">disabled select example</span>
629
640
  <auro-menu>
630
641
  <auro-menuoption value="stops">Stops</auro-menuoption>
631
642
  <auro-menuoption value="price">Price</auro-menuoption>
@@ -682,9 +693,10 @@ Use the `flexMenuWidth` boolean attribute to toggle the width of the `<auro-sele
682
693
  <div class="exampleWrapper">
683
694
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/flexMenuWidth.html) -->
684
695
  <!-- The below content is automatically added from ../apiExamples/flexMenuWidth.html -->
685
- <auro-select flexMenuWidth id="flexMenuWidthExample" placeholder="Placeholder Text">
696
+ <auro-select flexMenuWidth id="flexMenuWidthExample">
697
+ <span slot="label">flexMenuWidth select example</span>
686
698
  <span slot="bib.fullscreen.headline">Bib Headline</span>
687
- <span slot="label">Label</span>
699
+ <label slot="placeholder">Placeholder Text</label>
688
700
  <auro-menu>
689
701
  <auro-menuoption value="united states">United States has a country code of (+1)</auro-menuoption>
690
702
  <auro-menuoption value="costa rica">Costa Rica has a country code of (+506)</auro-menuoption>
@@ -706,9 +718,10 @@ Use the `flexMenuWidth` boolean attribute to toggle the width of the `<auro-sele
706
718
  <!-- The below code snippet is automatically added from ../apiExamples/flexMenuWidth.html -->
707
719
 
708
720
  ```html
709
- <auro-select flexMenuWidth id="flexMenuWidthExample" placeholder="Placeholder Text">
721
+ <auro-select flexMenuWidth id="flexMenuWidthExample">
722
+ <span slot="label">flexMenuWidth select example</span>
710
723
  <span slot="bib.fullscreen.headline">Bib Headline</span>
711
- <span slot="label">Label</span>
724
+ <label slot="placeholder">Placeholder Text</label>
712
725
  <auro-menu>
713
726
  <auro-menuoption value="united states">United States has a country code of (+1)</auro-menuoption>
714
727
  <auro-menuoption value="costa rica">Costa Rica has a country code of (+506)</auro-menuoption>
@@ -776,10 +789,11 @@ Use the `helpText` slot to provide additional information back to your user abou
776
789
  <div class="exampleWrapper">
777
790
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/helpText.html) -->
778
791
  <!-- The below content is automatically added from ./../apiExamples/helpText.html -->
779
- <auro-select placeholder="Placeholder Text">
792
+ <auro-select>
780
793
  <span slot="bib.fullscreen.headline">Bib Headline</span>
781
- <span slot="label">Label</span>
794
+ <label slot="placeholder">Placeholder Text</label>
782
795
  <span slot="helpText">Custom help text message.</span>
796
+ <span slot="label">helpText select example</span>
783
797
  <auro-menu>
784
798
  <auro-menuoption value="stops">Stops</auro-menuoption>
785
799
  <auro-menuoption value="price">Price</auro-menuoption>
@@ -797,10 +811,11 @@ Use the `helpText` slot to provide additional information back to your user abou
797
811
  <!-- The below code snippet is automatically added from ./../apiExamples/helpText.html -->
798
812
 
799
813
  ```html
800
- <auro-select placeholder="Placeholder Text">
814
+ <auro-select>
801
815
  <span slot="bib.fullscreen.headline">Bib Headline</span>
802
- <span slot="label">Label</span>
816
+ <label slot="placeholder">Placeholder Text</label>
803
817
  <span slot="helpText">Custom help text message.</span>
818
+ <span slot="label">helpText select example</span>
804
819
  <auro-menu>
805
820
  <auro-menuoption value="stops">Stops</auro-menuoption>
806
821
  <auro-menuoption value="price">Price</auro-menuoption>
@@ -825,9 +840,9 @@ Use the `reset()` method to reset the `<auro-select>`'s `value` and `validity` s
825
840
  <!-- The below content is automatically added from ./../apiExamples/resetState.html -->
826
841
  <auro-button id="resetStateBtn">Reset</auro-button>
827
842
  <br/><br/>
828
- <auro-select id="resetStateExample" value="price" placeholder="Placeholder Text">
843
+ <auro-select id="resetStateExample" value="price">
829
844
  <span slot="bib.fullscreen.headline">Bib Headline</span>
830
- <span slot="label">Label</span>
845
+ <label slot="placeholder">Placeholder Text</label>
831
846
  <span slot="label">Name</span>
832
847
  <auro-menu>
833
848
  <auro-menuoption value="stops">Stops</auro-menuoption>
@@ -848,9 +863,9 @@ Use the `reset()` method to reset the `<auro-select>`'s `value` and `validity` s
848
863
  ```html
849
864
  <auro-button id="resetStateBtn">Reset</auro-button>
850
865
  <br/><br/>
851
- <auro-select id="resetStateExample" value="price" placeholder="Placeholder Text">
866
+ <auro-select id="resetStateExample" value="price">
852
867
  <span slot="bib.fullscreen.headline">Bib Headline</span>
853
- <span slot="label">Label</span>
868
+ <label slot="placeholder">Placeholder Text</label>
854
869
  <span slot="label">Name</span>
855
870
  <auro-menu>
856
871
  <auro-menuoption value="stops">Stops</auro-menuoption>
@@ -885,9 +900,10 @@ The following example illustrates how a user may query the `element.value` or `e
885
900
  <div class="exampleWrapper">
886
901
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/valueExtraction.html) -->
887
902
  <!-- The below content is automatically added from ./../apiExamples/valueExtraction.html -->
888
- <auro-select id="valueExtraction" placeholder="Placeholder Text">
903
+ <auro-select id="valueExtraction">
889
904
  <span slot="bib.fullscreen.headline">Bib Headline</span>
890
- <span slot="label">Label</span>
905
+ <label slot="placeholder">Placeholder Text</label>
906
+ <span slot="label">Select Example</span>
891
907
  <auro-menu>
892
908
  <auro-menuoption value="stops">Stops</auro-menuoption>
893
909
  <auro-menuoption value="price">Price</auro-menuoption>
@@ -906,9 +922,10 @@ The following example illustrates how a user may query the `element.value` or `e
906
922
  <!-- The below code snippet is automatically added from ./../apiExamples/valueExtraction.html -->
907
923
 
908
924
  ```html
909
- <auro-select id="valueExtraction" placeholder="Placeholder Text">
925
+ <auro-select id="valueExtraction">
910
926
  <span slot="bib.fullscreen.headline">Bib Headline</span>
911
- <span slot="label">Label</span>
927
+ <label slot="placeholder">Placeholder Text</label>
928
+ <span slot="label">Select Example</span>
912
929
  <auro-menu>
913
930
  <auro-menuoption value="stops">Stops</auro-menuoption>
914
931
  <auro-menuoption value="price">Price</auro-menuoption>
@@ -947,9 +964,10 @@ This example programmatically adds the `error` state when a user selects an opti
947
964
  <div class="exampleWrapper">
948
965
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/customErrorValidity.html) -->
949
966
  <!-- The below content is automatically added from ./../apiExamples/customErrorValidity.html -->
950
- <auro-select id="primaryError" placeholder="Placeholder Text">
967
+ <auro-select id="primaryError">
951
968
  <span slot="bib.fullscreen.headline">Bib Headline</span>
952
- <span slot="label">Label</span>
969
+ <label slot="placeholder">Placeholder Text</label>
970
+ <span slot="label">Select Example</span>
953
971
  <auro-menu>
954
972
  <auro-menuoption value="1">1</auro-menuoption>
955
973
  <auro-menuoption value="2">2</auro-menuoption>
@@ -967,9 +985,10 @@ This example programmatically adds the `error` state when a user selects an opti
967
985
  <!-- The below code snippet is automatically added from ./../apiExamples/customErrorValidity.html -->
968
986
 
969
987
  ```html
970
- <auro-select id="primaryError" placeholder="Placeholder Text">
988
+ <auro-select id="primaryError">
971
989
  <span slot="bib.fullscreen.headline">Bib Headline</span>
972
- <span slot="label">Label</span>
990
+ <label slot="placeholder">Placeholder Text</label>
991
+ <span slot="label">Select Example</span>
973
992
  <auro-menu>
974
993
  <auro-menuoption value="1">1</auro-menuoption>
975
994
  <auro-menuoption value="2">2</auro-menuoption>
@@ -1356,9 +1375,10 @@ The following example listens for the `auroMenu-selectedOption` event. Once trig
1356
1375
  <div class="exampleWrapper">
1357
1376
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/valueAlert.html) -->
1358
1377
  <!-- The below content is automatically added from ./../apiExamples/valueAlert.html -->
1359
- <auro-select id="valueAlert" placeholder="Placeholder Text">
1378
+ <auro-select id="valueAlert">
1379
+ <span slot="label">Select Example</span>
1360
1380
  <span slot="bib.fullscreen.headline">Bib Headline</span>
1361
- <span slot="label">Label</span>
1381
+ <label slot="placeholder">Placeholder Text</label>
1362
1382
  <auro-menu id="valueAlertMenu">
1363
1383
  <auro-menuoption value="stops">Stops</auro-menuoption>
1364
1384
  <auro-menuoption value="price">Price</auro-menuoption>
@@ -1376,9 +1396,10 @@ The following example listens for the `auroMenu-selectedOption` event. Once trig
1376
1396
  <!-- The below code snippet is automatically added from ./../apiExamples/valueAlert.html -->
1377
1397
 
1378
1398
  ```html
1379
- <auro-select id="valueAlert" placeholder="Placeholder Text">
1399
+ <auro-select id="valueAlert">
1400
+ <span slot="label">Select Example</span>
1380
1401
  <span slot="bib.fullscreen.headline">Bib Headline</span>
1381
- <span slot="label">Label</span>
1402
+ <label slot="placeholder">Placeholder Text</label>
1382
1403
  <auro-menu id="valueAlertMenu">
1383
1404
  <auro-menuoption value="stops">Stops</auro-menuoption>
1384
1405
  <auro-menuoption value="price">Price</auro-menuoption>