semantic-forms 5.1.12 → 5.2.1

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 (20) hide show
  1. package/CHANGELOG.md +11 -0
  2. package/dist/semantic-forms.cjs +42 -7
  3. package/dist/semantic-forms.cjs.map +1 -1
  4. package/dist/semantic-forms.css +2004 -1237
  5. package/dist/semantic-forms.css.map +1 -1
  6. package/dist/semantic-forms.js +42 -7
  7. package/dist/semantic-forms.js.map +1 -1
  8. package/dist/semantic-forms.min.js +1 -1
  9. package/dist/semantic-forms.min.js.map +1 -1
  10. package/dist/semantic-forms.min.mjs +1 -1
  11. package/dist/semantic-forms.min.mjs.map +1 -1
  12. package/dist/semantic-forms.mjs +42 -7
  13. package/dist/semantic-forms.mjs.map +1 -1
  14. package/docs/statics/pages/fullDemo.html +214 -215
  15. package/docs/statics/pages/index.html +1 -0
  16. package/docs/statics/pages/reservedKeyboardShortcuts.html +840 -0
  17. package/docs/statics/pages/usage.html +48 -0
  18. package/package.json +3 -3
  19. package/semanticForms.js +193 -11
  20. package/semanticForms.scss +865 -465
package/docs/statics/pages/fullDemo.html CHANGED
@@ -75,7 +75,7 @@
75
75
  </dl>
76
76
 
77
77
  <dl class="colspan-1">
78
- <dt><label for="max-content-input"><code>data-max-content</code>text input</label></dt>
78
+ <dt><label for="max-content-input"><code>data-max-content</code> text input</label></dt>
79
79
  <dd><input type="text" name="max-content-input" id="max-content-input" placeholder="This is a placeholder." value="This is some text." data-max-content></dd>
80
80
 
81
81
  <dt><label for="max-content-select"><code>data-max-content</code> select</label></dt>
@@ -415,6 +415,51 @@
415
415
  </dd>
416
416
  </dl>
417
417
 
418
+ <h3>Keyboard shortcuts</h3>
419
+ <dl>
420
+ <dt><label for="custom-focus-input">Default Input focus</label></dt>
421
+ <dd><input type="text" name="custom-focus-input" id="custom-focus-input" data-focus-key="P"></dd>
422
+
423
+ <dt><label for="custom-focus-ctrl-input">Ctrl Input focus</label></dt>
424
+ <dd><input type="text" name="custom-focus-ctrl-input" id="custom-focus-ctrl-input" data-focus-modifier="ctrl" data-focus-key="P"></dd>
425
+
426
+ <dt><label for="custom-focus-alt-input">Alt Input focus</label></dt>
427
+ <dd><input type="text" name="custom-focus-alt-input" id="custom-focus-alt-input" data-focus-modifier="alt" data-focus-key="P"></dd>
428
+
429
+ <dt><label for="custom-focus-meta-input">Meta Input focus</label></dt>
430
+ <dd>
431
+ <input type="text" name="custom-focus-meta-input" id="custom-focus-meta-input" data-focus-modifier="meta" data-focus-key="Y">
432
+ </dd>
433
+
434
+ <dt><label for="custom-focus-number">Number focus</label></dt>
435
+ <dd><input type="number" name="custom-focus-number" id="custom-focus-number" data-focus-key="L"></dd>
436
+
437
+ <dt><label for="custom-focus-textarea">Textarea focus</label></dt>
438
+ <dd>
439
+ <textarea name="custom-focus-textarea" id="custom-focus-textarea" data-focus-key="!"></textarea>
440
+ <label for="custom-focus-textarea">Special character keyboard shortcuts also require <kbd>Shift</kbd> to be pressed.</label>
441
+ </dd>
442
+
443
+ <dt><label for="custom-focus-date">Date focus</label></dt>
444
+ <dd>
445
+ <input type="date" name="custom-focus-date" id="custom-focus-date" data-focus-key="D">
446
+ <label for="custom-focus-date">Hover over these inputs to see the keyboard shortcut</label>
447
+ </dd>
448
+
449
+ <dt><label for="custom-focus-color">Color focus</label></dt>
450
+ <dd><input type="color" name="custom-focus-color" id="custom-focus-color" title="This input has a keyboard shortcut!" data-focus-key="$" data-focus-modifier-mac="alt"></dd>
451
+
452
+ <dt><label for="custom-focus-range">Range focus</label></dt>
453
+ <dd><input type="range" name="custom-focus-range" id="custom-focus-range" data-focus-key="U"></dd>
454
+
455
+ <dt><label for="custom-focus-select">Select focus</label></dt>
456
+ <dd><select name="custom-focus-select" id="custom-focus-select" data-focus-key="K">
457
+ <option value="1">Value 1</option>
458
+ <option value="2">Value 2</option>
459
+ <option value="3">Value 3</option>
460
+ </select></dd>
461
+ </dl>
462
+
418
463
  <h3>Tables</h3>
419
464
 
420
465
  <h4>Table with inputs and buttons</h4>
@@ -574,106 +619,11 @@
574
619
  </fieldset>
575
620
  </fieldset>
576
621
 
577
- <fieldset>
578
- <legend>Colspan classes</legend>
579
-
580
- <dl>
581
- <dt><label for="colspan-1a">colspan-1</label></dt>
582
- <dd class="colspan-1"><input type="text" name="colspan-1a" id="colspan-1a"></dd>
583
- <dt><label for="colspan-1b">colspan-1</label></dt>
584
- <dd class="colspan-1"><input type="text" name="colspan-1b" id="colspan-1b"></dd>
585
- <dt><label for="colspan-2">colspan-2</label></dt>
586
- <dd class="colspan-2"><input type="text" name="colspan-2" id="colspan-2"></dd>
587
- <dt><label for="colspan-4">colspan-4</label></dt>
588
- <dd class="colspan-4"><input type="text" name="colspan-4" id="colspan-4"></dd>
589
- <dt><label for="colspan-3">colspan-3</label></dt>
590
- <dd class="colspan-3"><input type="text" name="colspan-3" id="colspan-3"></dd>
591
- <dt><label for="colspan-1c">colspan-1</label></dt>
592
- <dd class="colspan-1"><input type="text" name="colspan-1c" id="colspan-1c"></dd>
593
- <dt><label for="colspan-full">colspan-full</label></dt>
594
- <dd class="colspan-full"><input type="text" name="colspan-full" id="colspan-full"></dd>
595
- <dt><label for="colspan-5">colspan-5</label></dt>
596
- <dd class="colspan-5"><input type="text" name="colspan-5" id="colspan-5"></dd>
597
- </dl>
598
-
599
- <fieldset class="colspan-1">
600
- <legend>colspan-1</legend>
601
-
602
- <dl>
603
- <dt><label for="colspan-1-a">Input A</label></dt>
604
- <dd><input type="text" id="colspan-1-a" name="colspan-1-a" placeholder="Some interesting placeholder text"></dd>
605
-
606
- <dt><label for="colspan-1-b">Input B</label></dt>
607
- <dd><input type="text" id="colspan-1-b" name="colspan-1-b" placeholder="Some interesting placeholder text"></dd>
608
-
609
- <dt><label for="colspan-1-c">Input C</label></dt>
610
- <dd><input type="text" id="colspan-1-c" name="colspan-1-c" placeholder="Some interesting placeholder text"></dd>
611
-
612
- <dt><label for="colspan-1-d">Input D</label></dt>
613
- <dd><input type="text" id="colspan-1-d" name="colspan-1-d" placeholder="Some interesting placeholder text"></dd>
614
- </dl>
615
- </fieldset>
616
-
617
- <fieldset class="colspan-2">
618
- <legend>colspan-2</legend>
619
-
620
- <dl>
621
- <dt><label for="colspan-2-a">Input A</label></dt>
622
- <dd><input type="text" id="colspan-2-a" name="colspan-2-a" placeholder="Some interesting placeholder text"></dd>
623
-
624
- <dt><label for="colspan-2-b">Input B</label></dt>
625
- <dd><input type="text" id="colspan-2-b" name="colspan-2-b" placeholder="Some interesting placeholder text"></dd>
626
-
627
- <dt><label for="colspan-2-c">Input C</label></dt>
628
- <dd><input type="text" id="colspan-2-c" name="colspan-2-c" placeholder="Some interesting placeholder text"></dd>
629
-
630
- <dt><label for="colspan-2-d">Input D</label></dt>
631
- <dd><input type="text" id="colspan-2-d" name="colspan-2-d" placeholder="Some interesting placeholder text"></dd>
632
- </dl>
633
- </fieldset>
634
-
635
- <fieldset>
636
- <legend>colspan-3</legend>
637
-
638
- <dl class="colspan-3">
639
- <dt><label for="colspan-3-a">Input A</label></dt>
640
- <dd><input type="text" id="colspan-3-a" name="colspan-3-a" placeholder="Some interesting placeholder text"></dd>
641
-
642
- <dt><label for="colspan-3-b">Input B</label></dt>
643
- <dd><input type="text" id="colspan-3-b" name="colspan-3-b" placeholder="Some interesting placeholder text"></dd>
644
-
645
- <dt><label for="colspan-3-c">Input C</label></dt>
646
- <dd><input type="text" id="colspan-3-c" name="colspan-3-c" placeholder="Some interesting placeholder text"></dd>
647
-
648
- <dt><label for="colspan-3-d">Input D</label></dt>
649
- <dd><input type="text" id="colspan-3-d" name="colspan-3-d" placeholder="Some interesting placeholder text"></dd>
650
- </dl>
651
- </fieldset>
652
-
653
- <fieldset class="colspan-full">
654
- <legend>colspan-full</legend>
655
-
656
- <dl>
657
- <dt><label for="colspan-full-a">Input A</label></dt>
658
- <dd><input type="text" id="colspan-full-a" name="colspan-full-a" placeholder="Some interesting placeholder text"></dd>
659
-
660
- <dt><label for="colspan-full-b">Input B</label></dt>
661
- <dd><input type="text" id="colspan-full-b" name="colspan-full-b" placeholder="Some interesting placeholder text"></dd>
662
-
663
- <dt><label for="colspan-full-c">Input C</label></dt>
664
- <dd><input type="text" id="colspan-full-c" name="colspan-full-c" placeholder="Some interesting placeholder text"></dd>
665
-
666
- <dt><label for="colspan-full-d">Input D</label></dt>
667
- <dd><input type="text" id="colspan-full-d" name="colspan-full-d" placeholder="Some interesting placeholder text"></dd>
668
- </dl>
669
- </fieldset>
670
- </fieldset>
671
-
672
622
  <details>
673
623
  <summary>Detail element</summary>
674
624
  <dl>
675
625
  <dt><label for="detail-input-1">Detail input</label></dt>
676
- <dd><input type="text" name="detail-input-1" id="detail-input-1"></dd>
626
+ <dd><input type="text" name="detail-input-1" id="detail-input-1" value="Some input..."></dd>
677
627
 
678
628
  <dt><label for="detail-input-2">Detail input</label></dt>
679
629
  <dd><input type="text" name="detail-input-2" id="detail-input-2"></dd>
@@ -721,6 +671,101 @@
721
671
  </menu>
722
672
  </fieldset>
723
673
 
674
+ <fieldset>
675
+ <legend>Colspan classes</legend>
676
+
677
+ <dl>
678
+ <dt><label for="colspan-1a">colspan-1</label></dt>
679
+ <dd class="colspan-1"><input type="text" name="colspan-1a" id="colspan-1a"></dd>
680
+ <dt><label for="colspan-1b">colspan-1</label></dt>
681
+ <dd class="colspan-1"><input type="text" name="colspan-1b" id="colspan-1b"></dd>
682
+ <dt><label for="colspan-2">colspan-2</label></dt>
683
+ <dd class="colspan-2"><input type="text" name="colspan-2" id="colspan-2"></dd>
684
+ <dt><label for="colspan-4">colspan-4</label></dt>
685
+ <dd class="colspan-4"><input type="text" name="colspan-4" id="colspan-4"></dd>
686
+ <dt><label for="colspan-3">colspan-3</label></dt>
687
+ <dd class="colspan-3"><input type="text" name="colspan-3" id="colspan-3"></dd>
688
+ <dt><label for="colspan-1c">colspan-1</label></dt>
689
+ <dd class="colspan-1"><input type="text" name="colspan-1c" id="colspan-1c"></dd>
690
+ <dt><label for="colspan-full">colspan-full</label></dt>
691
+ <dd class="colspan-full"><input type="text" name="colspan-full" id="colspan-full"></dd>
692
+ <dt><label for="colspan-5">colspan-5</label></dt>
693
+ <dd class="colspan-5"><input type="text" name="colspan-5" id="colspan-5"></dd>
694
+ </dl>
695
+
696
+ <fieldset class="colspan-1">
697
+ <legend>colspan-1</legend>
698
+
699
+ <dl>
700
+ <dt><label for="colspan-1-a">Input A</label></dt>
701
+ <dd><input type="text" id="colspan-1-a" name="colspan-1-a" placeholder="Some interesting placeholder text"></dd>
702
+
703
+ <dt><label for="colspan-1-b">Input B</label></dt>
704
+ <dd><input type="text" id="colspan-1-b" name="colspan-1-b" placeholder="Some interesting placeholder text"></dd>
705
+
706
+ <dt><label for="colspan-1-c">Input C</label></dt>
707
+ <dd><input type="text" id="colspan-1-c" name="colspan-1-c" placeholder="Some interesting placeholder text"></dd>
708
+
709
+ <dt><label for="colspan-1-d">Input D</label></dt>
710
+ <dd><input type="text" id="colspan-1-d" name="colspan-1-d" placeholder="Some interesting placeholder text"></dd>
711
+ </dl>
712
+ </fieldset>
713
+
714
+ <fieldset class="colspan-2">
715
+ <legend>colspan-2</legend>
716
+
717
+ <dl>
718
+ <dt><label for="colspan-2-a">Input A</label></dt>
719
+ <dd><input type="text" id="colspan-2-a" name="colspan-2-a" placeholder="Some interesting placeholder text"></dd>
720
+
721
+ <dt><label for="colspan-2-b">Input B</label></dt>
722
+ <dd><input type="text" id="colspan-2-b" name="colspan-2-b" placeholder="Some interesting placeholder text"></dd>
723
+
724
+ <dt><label for="colspan-2-c">Input C</label></dt>
725
+ <dd><input type="text" id="colspan-2-c" name="colspan-2-c" placeholder="Some interesting placeholder text"></dd>
726
+
727
+ <dt><label for="colspan-2-d">Input D</label></dt>
728
+ <dd><input type="text" id="colspan-2-d" name="colspan-2-d" placeholder="Some interesting placeholder text"></dd>
729
+ </dl>
730
+ </fieldset>
731
+
732
+ <fieldset>
733
+ <legend>colspan-3</legend>
734
+
735
+ <dl class="colspan-3">
736
+ <dt><label for="colspan-3-a">Input A</label></dt>
737
+ <dd><input type="text" id="colspan-3-a" name="colspan-3-a" placeholder="Some interesting placeholder text"></dd>
738
+
739
+ <dt><label for="colspan-3-b">Input B</label></dt>
740
+ <dd><input type="text" id="colspan-3-b" name="colspan-3-b" placeholder="Some interesting placeholder text"></dd>
741
+
742
+ <dt><label for="colspan-3-c">Input C</label></dt>
743
+ <dd><input type="text" id="colspan-3-c" name="colspan-3-c" placeholder="Some interesting placeholder text"></dd>
744
+
745
+ <dt><label for="colspan-3-d">Input D</label></dt>
746
+ <dd><input type="text" id="colspan-3-d" name="colspan-3-d" placeholder="Some interesting placeholder text"></dd>
747
+ </dl>
748
+ </fieldset>
749
+
750
+ <fieldset class="colspan-full">
751
+ <legend>colspan-full</legend>
752
+
753
+ <dl>
754
+ <dt><label for="colspan-full-a">Input A</label></dt>
755
+ <dd><input type="text" id="colspan-full-a" name="colspan-full-a" placeholder="Some interesting placeholder text"></dd>
756
+
757
+ <dt><label for="colspan-full-b">Input B</label></dt>
758
+ <dd><input type="text" id="colspan-full-b" name="colspan-full-b" placeholder="Some interesting placeholder text"></dd>
759
+
760
+ <dt><label for="colspan-full-c">Input C</label></dt>
761
+ <dd><input type="text" id="colspan-full-c" name="colspan-full-c" placeholder="Some interesting placeholder text"></dd>
762
+
763
+ <dt><label for="colspan-full-d">Input D</label></dt>
764
+ <dd><input type="text" id="colspan-full-d" name="colspan-full-d" placeholder="Some interesting placeholder text"></dd>
765
+ </dl>
766
+ </fieldset>
767
+ </fieldset>
768
+
724
769
  <fieldset>
725
770
  <legend>P tag elements</legend>
726
771
 
@@ -769,10 +814,6 @@
769
814
  <dt>description list title</dt>
770
815
  <dd>description list value</dd>
771
816
  </dl>
772
- <details>
773
- <summary>Details summary</summary>
774
- <p>Some detail text</p>
775
- </details>
776
817
  </form>
777
818
 
778
819
  <h2>Table with <code>semanticForms</code> class</h2>
@@ -1064,42 +1105,51 @@
1064
1105
  </fieldset>
1065
1106
  </fieldset>
1066
1107
 
1108
+ <details>
1109
+ <summary>Details summary</summary>
1110
+ <dl>
1111
+ <dt><label for="low-flow-detail-input-1">Detail input</label></dt>
1112
+ <dd><input type="text" name="low-flow-detail-input-1" id="low-flow-detail-input-1"></dd>
1113
+
1114
+ <dt><label for="low-flow-detail-input-2">Detail input</label></dt>
1115
+ <dd><input type="text" name="low-flow-detail-input-2" id="low-flow-detail-input-2"></dd>
1116
+
1117
+ <dt><label for="low-flow-detail-input-3">Detail input</label></dt>
1118
+ <dd><input type="text" name="low-flow-detail-input-3" id="low-flow-detail-input-3"></dd>
1119
+
1120
+ <dt><label for="low-flow-detail-input-4">Detail input</label></dt>
1121
+ <dd><input type="text" name="low-flow-detail-input-4" id="low-flow-detail-input-4"></dd>
1122
+ </dl>
1123
+ </details>
1124
+
1125
+ <details>
1126
+ <summary>Another details element</summary>
1127
+ <dl>
1128
+ <dt><label for="low-flow-another-detail-input-1">Detail input</label></dt>
1129
+ <dd><input type="text" name="low-flow-another-detail-input-1" id="low-flow-another-detail-input-1"></dd>
1130
+ </dl>
1131
+ </details>
1132
+
1067
1133
  <fieldset>
1068
1134
  <legend>Colspan classes</legend>
1069
1135
 
1070
1136
  <dl>
1071
- <div class="colspan-1">
1072
- <dt><label for="low-flow-colspan-1a">colspan-1</label></dt>
1073
- <dd><input type="text" name="low-flow-colspan-1a" id="low-flow-colspan-1a"></dd>
1074
- </div>
1075
- <div class="colspan-1">
1076
- <dt><label for="low-flow-colspan-1b">colspan-1</label></dt>
1077
- <dd><input type="text" name="low-flow-colspan-1b" id="low-flow-colspan-1b"></dd>
1078
- </div>
1079
- <div class="colspan-2">
1080
- <dt><label for="low-flow-colspan-2">colspan-2</label></dt>
1081
- <dd><input type="text" name="low-flow-colspan-2" id="low-flow-colspan-2"></dd>
1082
- </div>
1083
- <div class="colspan-4">
1084
- <dt><label for="low-flow-colspan-4">colspan-4</label></dt>
1085
- <dd><input type="text" name="low-flow-colspan-4" id="low-flow-colspan-4"></dd>
1086
- </div>
1087
- <div class="colspan-3">
1088
- <dt><label for="low-flow-colspan-3">colspan-3</label></dt>
1089
- <dd><input type="text" name="low-flow-colspan-3" id="low-flow-colspan-3"></dd>
1090
- </div>
1091
- <div class="colspan-1">
1092
- <dt><label for="low-flow-colspan-1c">colspan-1</label></dt>
1093
- <dd><input type="text" name="low-flow-colspan-1c" id="low-flow-colspan-1c"></dd>
1094
- </div>
1095
- <div class="colspan-full">
1096
- <dt><label for="low-flow-colspan-full">colspan-full</label></dt>
1097
- <dd><input type="text" name="low-flow-colspan-full" id="low-flow-colspan-full"></dd>
1098
- </div>
1099
- <div class="colspan-5">
1100
- <dt><label for="low-flow-colspan-5">colspan-5</label></dt>
1101
- <dd><input type="text" name="low-flow-colspan-5" id="low-flow-colspan-5"></dd>
1102
- </div>
1137
+ <dt><label for="low-flow-colspan-1a">colspan-1</label></dt>
1138
+ <dd class="colspan-1"><input type="text" name="low-flow-colspan-1a" id="low-flow-colspan-1a"></dd>
1139
+ <dt><label for="low-flow-colspan-1b">colspan-1</label></dt>
1140
+ <dd class="colspan-1"><input type="text" name="low-flow-colspan-1b" id="low-flow-colspan-1b"></dd>
1141
+ <dt><label for="low-flow-colspan-2">colspan-2</label></dt>
1142
+ <dd class="colspan-2"><input type="text" name="low-flow-colspan-2" id="low-flow-colspan-2"></dd>
1143
+ <dt><label for="low-flow-colspan-4">colspan-4</label></dt>
1144
+ <dd class="colspan-4"><input type="text" name="low-flow-colspan-4" id="low-flow-colspan-4"></dd>
1145
+ <dt><label for="low-flow-colspan-3">colspan-3</label></dt>
1146
+ <dd class="colspan-3"><input type="text" name="low-flow-colspan-3" id="low-flow-colspan-3"></dd>
1147
+ <dt><label for="low-flow-colspan-1c">colspan-1</label></dt>
1148
+ <dd class="colspan-1"><input type="text" name="low-flow-colspan-1c" id="low-flow-colspan-1c"></dd>
1149
+ <dt><label for="low-flow-colspan-full">colspan-full</label></dt>
1150
+ <dd class="colspan-full"><input type="text" name="low-flow-colspan-full" id="low-flow-colspan-full"></dd>
1151
+ <dt><label for="low-flow-colspan-5">colspan-5</label></dt>
1152
+ <dd class="colspan-5"><input type="text" name="low-flow-colspan-5" id="low-flow-colspan-5"></dd>
1103
1153
  </dl>
1104
1154
 
1105
1155
  <fieldset class="colspan-1">
@@ -1107,13 +1157,16 @@
1107
1157
 
1108
1158
  <dl>
1109
1159
  <dt><label for="low-flow-colspan-1-a">Input A</label></dt>
1110
- <dd><input type="text" id="low-flow-colspan-1-a" name="low-flow-colspan-1-a"></dd>
1160
+ <dd><input type="text" id="low-flow-colspan-1-a" name="low-flow-colspan-1-a" placeholder="Some interesting placeholder text"></dd>
1111
1161
 
1112
1162
  <dt><label for="low-flow-colspan-1-b">Input B</label></dt>
1113
- <dd><input type="text" id="low-flow-colspan-1-b" name="low-flow-colspan-1-b"></dd>
1163
+ <dd><input type="text" id="low-flow-colspan-1-b" name="low-flow-colspan-1-b" placeholder="Some interesting placeholder text"></dd>
1114
1164
 
1115
1165
  <dt><label for="low-flow-colspan-1-c">Input C</label></dt>
1116
- <dd><input type="text" id="low-flow-colspan-1-c" name="low-flow-colspan-1-c"></dd>
1166
+ <dd><input type="text" id="low-flow-colspan-1-c" name="low-flow-colspan-1-c" placeholder="Some interesting placeholder text"></dd>
1167
+
1168
+ <dt><label for="low-flow-colspan-1-d">Input D</label></dt>
1169
+ <dd><input type="text" id="low-flow-colspan-1-d" name="low-flow-colspan-1-d" placeholder="Some interesting placeholder text"></dd>
1117
1170
  </dl>
1118
1171
  </fieldset>
1119
1172
 
@@ -1122,106 +1175,56 @@
1122
1175
 
1123
1176
  <dl>
1124
1177
  <dt><label for="low-flow-colspan-2-a">Input A</label></dt>
1125
- <dd><input type="text" id="low-flow-colspan-2-a" name="low-flow-colspan-2-a"></dd>
1178
+ <dd><input type="text" id="low-flow-colspan-2-a" name="low-flow-colspan-2-a" placeholder="Some interesting placeholder text"></dd>
1126
1179
 
1127
1180
  <dt><label for="low-flow-colspan-2-b">Input B</label></dt>
1128
- <dd><input type="text" id="low-flow-colspan-2-b" name="low-flow-colspan-2-b"></dd>
1181
+ <dd><input type="text" id="low-flow-colspan-2-b" name="low-flow-colspan-2-b" placeholder="Some interesting placeholder text"></dd>
1129
1182
 
1130
1183
  <dt><label for="low-flow-colspan-2-c">Input C</label></dt>
1131
- <dd><input type="text" id="low-flow-colspan-2-c" name="low-flow-colspan-2-c"></dd>
1184
+ <dd><input type="text" id="low-flow-colspan-2-c" name="low-flow-colspan-2-c" placeholder="Some interesting placeholder text"></dd>
1185
+
1186
+ <dt><label for="low-flow-colspan-2-d">Input D</label></dt>
1187
+ <dd><input type="text" id="low-flow-colspan-2-d" name="low-flow-colspan-2-d" placeholder="Some interesting placeholder text"></dd>
1132
1188
  </dl>
1133
1189
  </fieldset>
1134
1190
 
1135
- <fieldset class="colspan-3">
1191
+ <fieldset>
1136
1192
  <legend>colspan-3</legend>
1137
1193
 
1138
- <dl>
1194
+ <dl class="colspan-3">
1139
1195
  <dt><label for="low-flow-colspan-3-a">Input A</label></dt>
1140
- <dd><input type="text" id="low-flow-colspan-3-a" name="low-flow-colspan-3-a"></dd>
1141
-
1142
- <dt><label for="low-flow-colspan-3-b">Input B</label></dt>
1143
- <dd><input type="text" id="low-flow-colspan-3-b" name="low-flow-colspan-3-b"></dd>
1144
-
1145
- <dt><label for="low-flow-colspan-3-c">Input C</label></dt>
1146
- <dd><input type="text" id="low-flow-colspan-3-c" name="low-flow-colspan-3-c"></dd>
1147
-
1148
- <dt><label for="low-flow-colspan-3-d">Input D</label></dt>
1149
- <dd><input type="text" id="low-flow-colspan-3-d" name="low-flow-colspan-3-d"></dd>
1150
- </dl>
1151
- </fieldset>
1152
-
1153
- <fieldset class="colspan-4">
1154
- <legend>colspan-4</legend>
1155
-
1156
- <dl>
1157
- <dt><label for="low-flow-colspan-4-a">Input A</label></dt>
1158
- <dd><input type="text" id="low-flow-colspan-4-a" name="low-flow-colspan-4-a"></dd>
1159
-
1160
- <dt><label for="low-flow-colspan-4-b">Input B</label></dt>
1161
- <dd><input type="text" id="low-flow-colspan-4-b" name="low-flow-colspan-4-b"></dd>
1196
+ <dd><input type="text" id="low-flow-colspan-3-a" name="low-flow-colspan-3-a" placeholder="Some interesting placeholder text"></dd>
1162
1197
 
1163
- <dt><label for="low-flow-colspan-4-c">Input C</label></dt>
1164
- <dd><input type="text" id="low-flow-colspan-4-c" name="low-flow-colspan-4-c"></dd>
1198
+ <dt><label for="colspan-3-b">Input B</label></dt>
1199
+ <dd><input type="text" id="low-flow-colspan-3-b" name="low-flow-colspan-3-b" placeholder="Some interesting placeholder text"></dd>
1165
1200
 
1166
- <dt><label for="low-flow-colspan-4-d">Input D</label></dt>
1167
- <dd><input type="text" id="low-flow-colspan-4-d" name="low-flow-colspan-4-d"></dd>
1201
+ <dt><label for="colspan-3-c">Input C</label></dt>
1202
+ <dd><input type="text" id="low-flow-colspan-3-c" name="low-flow-colspan-3-c" placeholder="Some interesting placeholder text"></dd>
1168
1203
 
1169
- <dt><label for="low-flow-colspan-4-e">Input E</label></dt>
1170
- <dd><input type="text" id="low-flow-colspan-4-e" name="low-flow-colspan-4-e"></dd>
1204
+ <dt><label for="colspan-3-d">Input D</label></dt>
1205
+ <dd><input type="text" id="low-flow-colspan-3-d" name="low-flow-colspan-3-d" placeholder="Some interesting placeholder text"></dd>
1171
1206
  </dl>
1172
1207
  </fieldset>
1173
1208
 
1174
- <fieldset class="colspan-5">
1175
- <legend>colspan-5</legend>
1209
+ <fieldset class="colspan-full">
1210
+ <legend>colspan-full</legend>
1176
1211
 
1177
1212
  <dl>
1178
- <dt><label for="low-flow-colspan-5-a">Input A</label></dt>
1179
- <dd><input type="text" id="low-flow-colspan-5-a" name="low-flow-colspan-5-a"></dd>
1180
-
1181
- <dt><label for="low-flow-colspan-5-b">Input B</label></dt>
1182
- <dd><input type="text" id="low-flow-colspan-5-b" name="low-flow-colspan-5-b"></dd>
1213
+ <dt><label for="low-flow-colspan-full-a">Input A</label></dt>
1214
+ <dd><input type="text" id="low-flow-colspan-full-a" name="low-flow-colspan-full-a" placeholder="Some interesting placeholder text"></dd>
1183
1215
 
1184
- <dt><label for="low-flow-colspan-5-c">Input C</label></dt>
1185
- <dd><input type="text" id="low-flow-colspan-5-c" name="low-flow-colspan-5-c"></dd>
1216
+ <dt><label for="low-flow-colspan-full-b">Input B</label></dt>
1217
+ <dd><input type="text" id="low-flow-colspan-full-b" name="low-flow-colspan-full-b" placeholder="Some interesting placeholder text"></dd>
1186
1218
 
1187
- <dt><label for="low-flow-colspan-5-d">Input D</label></dt>
1188
- <dd><input type="text" id="low-flow-colspan-5-d" name="low-flow-colspan-5-d"></dd>
1219
+ <dt><label for="low-flow-colspan-full-c">Input C</label></dt>
1220
+ <dd><input type="text" id="low-flow-colspan-full-c" name="low-flow-colspan-full-c" placeholder="Some interesting placeholder text"></dd>
1189
1221
 
1190
- <dt><label for="low-flow-colspan-5-e">Input E</label></dt>
1191
- <dd><input type="text" id="low-flow-colspan-5-e" name="low-flow-colspan-5-e"></dd>
1192
-
1193
- <dt><label for="low-flow-colspan-5-f">Input F</label></dt>
1194
- <dd><input type="text" id="low-flow-colspan-5-f" name="low-flow-colspan-5-f"></dd>
1222
+ <dt><label for="low-flow-colspan-full-d">Input D</label></dt>
1223
+ <dd><input type="text" id="low-flow-colspan-full-d" name="low-flow-colspan-full-d" placeholder="Some interesting placeholder text"></dd>
1195
1224
  </dl>
1196
1225
  </fieldset>
1197
1226
  </fieldset>
1198
1227
 
1199
-
1200
- <details>
1201
- <summary>Details summary</summary>
1202
- <dl>
1203
- <dt><label for="low-flow-detail-input-1">Detail input</label></dt>
1204
- <dd><input type="text" name="low-flow-detail-input-1" id="low-flow-detail-input-1"></dd>
1205
-
1206
- <dt><label for="low-flow-detail-input-2">Detail input</label></dt>
1207
- <dd><input type="text" name="low-flow-detail-input-2" id="low-flow-detail-input-2"></dd>
1208
-
1209
- <dt><label for="low-flow-detail-input-3">Detail input</label></dt>
1210
- <dd><input type="text" name="low-flow-detail-input-3" id="low-flow-detail-input-3"></dd>
1211
-
1212
- <dt><label for="low-flow-detail-input-4">Detail input</label></dt>
1213
- <dd><input type="text" name="low-flow-detail-input-4" id="low-flow-detail-input-4"></dd>
1214
- </dl>
1215
- </details>
1216
-
1217
- <details>
1218
- <summary>Another details element</summary>
1219
- <dl>
1220
- <dt><label for="low-flow-another-detail-input-1">Detail input</label></dt>
1221
- <dd><input type="text" name="low-flow-another-detail-input-1" id="low-flow-another-detail-input-1"></dd>
1222
- </dl>
1223
- </details>
1224
-
1225
1228
  <fieldset>
1226
1229
  <legend>P tag elements</legend>
1227
1230
 
@@ -1287,10 +1290,6 @@
1287
1290
  <dt>description list title</dt>
1288
1291
  <dd>description list value</dd>
1289
1292
  </dl>
1290
- <details>
1291
- <summary>Details summary</summary>
1292
- <p>Some detail text</p>
1293
- </details>
1294
1293
  </form>
1295
1294
  </article>
1296
1295
  </main>
package/docs/statics/pages/index.html CHANGED
@@ -10,6 +10,7 @@
10
10
  <li>Attractive, modern float label visual design.</li>
11
11
  <li>Responsive layout based on modern CSS grid technique.</li>
12
12
  <li>Clear fields.</li>
13
+ <li>Ability to define keyboard shortcuts for focusing fields.</li>
13
14
  <li>Light and dark mode.</li>
14
15
  <li>Invalid field styling.</li>
15
16
  <li>Good accessibility.</li>