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