@patternfly/patternfly 5.0.0-alpha.53 → 5.0.0-alpha.54

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 (39) hide show
  1. package/components/FormControl/form-control.css +164 -214
  2. package/components/FormControl/form-control.scss +175 -281
  3. package/components/FormControl/themes/dark/form-control.scss +1 -2
  4. package/components/NumberInput/number-input.css +0 -1
  5. package/components/NumberInput/number-input.scss +0 -1
  6. package/docs/components/CalendarMonth/examples/CalendarMonth.md +32 -28
  7. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +52 -46
  8. package/docs/components/DatePicker/examples/DatePicker.md +55 -49
  9. package/docs/components/FileUpload/examples/FileUpload.md +105 -93
  10. package/docs/components/Form/examples/Form.md +165 -145
  11. package/docs/components/FormControl/examples/FormControl.md +439 -475
  12. package/docs/components/InlineEdit/examples/InlineEdit.md +87 -76
  13. package/docs/components/InputGroup/examples/InputGroup.md +84 -74
  14. package/docs/components/Login/examples/Login.md +92 -82
  15. package/docs/components/NumberInput/examples/NumberInput.md +99 -87
  16. package/docs/components/Pagination/examples/Pagination.md +100 -89
  17. package/docs/components/Select/examples/Select.md +77 -68
  18. package/docs/components/Slider/examples/Slider.md +31 -44
  19. package/docs/components/TextInputGroup/examples/TextInputGroup.md +60 -52
  20. package/docs/components/Toolbar/examples/Toolbar.md +18 -16
  21. package/docs/components/Wizard/examples/Wizard.md +280 -245
  22. package/docs/demos/Alert/examples/Alert.md +69 -57
  23. package/docs/demos/Button/examples/Button.md +54 -48
  24. package/docs/demos/CardView/examples/CardView.md +9 -8
  25. package/docs/demos/DataList/examples/DataList.md +36 -32
  26. package/docs/demos/Form/examples/BasicForms.md +247 -227
  27. package/docs/demos/HelperText/examples/HelperText.md +37 -33
  28. package/docs/demos/Modal/examples/Modal.md +14 -21
  29. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +11 -10
  30. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +44 -40
  31. package/docs/demos/Table/examples/Table.md +99 -88
  32. package/docs/demos/Toolbar/examples/Toolbar.md +28 -25
  33. package/docs/demos/Wizard/examples/Wizard.md +448 -392
  34. package/package.json +3 -3
  35. package/patternfly-no-globals.css +161 -212
  36. package/patternfly.css +161 -212
  37. package/patternfly.min.css +1 -1
  38. package/patternfly.min.css.map +1 -1
  39. package/docs/components/FormControl/examples/FormControl.css +0 -5
package/docs/components/Pagination/examples/Pagination.md CHANGED
@@ -79,14 +79,15 @@ cssPrefix: pf-v5-c-pagination
79
79
  </button>
80
80
  </div>
81
81
  <div class="pf-v5-c-pagination__nav-page-select">
82
- <input
83
- class="pf-v5-c-form-control"
84
- aria-label="Current page"
85
- type="number"
86
- min="1"
87
- max="4"
88
- value="1"
89
- />
82
+ <div class="pf-v5-c-form-control">
83
+ <input
84
+ aria-label="Current page"
85
+ type="number"
86
+ min="1"
87
+ max="4"
88
+ value="1"
89
+ />
90
+ </div>
90
91
  <span aria-hidden="true">of 4</span>
91
92
  </div>
92
93
  <div class="pf-v5-c-pagination__nav-control pf-m-next">
@@ -184,14 +185,15 @@ cssPrefix: pf-v5-c-pagination
184
185
  </button>
185
186
  </div>
186
187
  <div class="pf-v5-c-pagination__nav-page-select">
187
- <input
188
- class="pf-v5-c-form-control"
189
- aria-label="Current page"
190
- type="number"
191
- min="1"
192
- max="4"
193
- value="1"
194
- />
188
+ <div class="pf-v5-c-form-control">
189
+ <input
190
+ aria-label="Current page"
191
+ type="number"
192
+ min="1"
193
+ max="4"
194
+ value="1"
195
+ />
196
+ </div>
195
197
  <span aria-hidden="true">of 4</span>
196
198
  </div>
197
199
  <div class="pf-v5-c-pagination__nav-control pf-m-next">
@@ -290,14 +292,15 @@ cssPrefix: pf-v5-c-pagination
290
292
  </button>
291
293
  </div>
292
294
  <div class="pf-v5-c-pagination__nav-page-select">
293
- <input
294
- class="pf-v5-c-form-control"
295
- aria-label="Current page"
296
- type="number"
297
- min="1"
298
- max="4"
299
- value="1"
300
- />
295
+ <div class="pf-v5-c-form-control">
296
+ <input
297
+ aria-label="Current page"
298
+ type="number"
299
+ min="1"
300
+ max="4"
301
+ value="1"
302
+ />
303
+ </div>
301
304
  <span aria-hidden="true">of 4</span>
302
305
  </div>
303
306
  <div class="pf-v5-c-pagination__nav-control pf-m-next">
@@ -406,14 +409,15 @@ cssPrefix: pf-v5-c-pagination
406
409
  </button>
407
410
  </div>
408
411
  <div class="pf-v5-c-pagination__nav-page-select">
409
- <input
410
- class="pf-v5-c-form-control"
411
- aria-label="Current page"
412
- type="number"
413
- min="1"
414
- max="4"
415
- value="1"
416
- />
412
+ <div class="pf-v5-c-form-control">
413
+ <input
414
+ aria-label="Current page"
415
+ type="number"
416
+ min="1"
417
+ max="4"
418
+ value="1"
419
+ />
420
+ </div>
417
421
  </div>
418
422
  <div class="pf-v5-c-pagination__nav-control pf-m-next">
419
423
  <button
@@ -507,14 +511,15 @@ cssPrefix: pf-v5-c-pagination
507
511
  </button>
508
512
  </div>
509
513
  <div class="pf-v5-c-pagination__nav-page-select">
510
- <input
511
- class="pf-v5-c-form-control"
512
- aria-label="Current page"
513
- type="number"
514
- min="1"
515
- max="4"
516
- value="1"
517
- />
514
+ <div class="pf-v5-c-form-control">
515
+ <input
516
+ aria-label="Current page"
517
+ type="number"
518
+ min="1"
519
+ max="4"
520
+ value="1"
521
+ />
522
+ </div>
518
523
  <span aria-hidden="true">of 4</span>
519
524
  </div>
520
525
  <div class="pf-v5-c-pagination__nav-control pf-m-next">
@@ -619,14 +624,15 @@ cssPrefix: pf-v5-c-pagination
619
624
  </button>
620
625
  </div>
621
626
  <div class="pf-v5-c-pagination__nav-page-select">
622
- <input
623
- class="pf-v5-c-form-control"
624
- aria-label="Current page"
625
- type="number"
626
- min="1"
627
- max="4"
628
- value="1"
629
- />
627
+ <div class="pf-v5-c-form-control">
628
+ <input
629
+ aria-label="Current page"
630
+ type="number"
631
+ min="1"
632
+ max="4"
633
+ value="1"
634
+ />
635
+ </div>
630
636
  <span aria-hidden="true">of 4</span>
631
637
  </div>
632
638
  <div class="pf-v5-c-pagination__nav-control pf-m-next">
@@ -726,15 +732,16 @@ cssPrefix: pf-v5-c-pagination
726
732
  </button>
727
733
  </div>
728
734
  <div class="pf-v5-c-pagination__nav-page-select">
729
- <input
730
- class="pf-v5-c-form-control"
731
- disabled
732
- aria-label="Current page"
733
- type="number"
734
- min="1"
735
- max="4"
736
- value="1"
737
- />
735
+ <div class="pf-v5-c-form-control">
736
+ <input
737
+ disabled
738
+ aria-label="Current page"
739
+ type="number"
740
+ min="1"
741
+ max="4"
742
+ value="1"
743
+ />
744
+ </div>
738
745
  <span aria-hidden="true">of 4</span>
739
746
  </div>
740
747
  <div class="pf-v5-c-pagination__nav-control pf-m-next">
@@ -911,14 +918,15 @@ cssPrefix: pf-v5-c-pagination
911
918
  </button>
912
919
  </div>
913
920
  <div class="pf-v5-c-pagination__nav-page-select">
914
- <input
915
- class="pf-v5-c-form-control"
916
- aria-label="Current page"
917
- type="number"
918
- min="1"
919
- max="4"
920
- value="1"
921
- />
921
+ <div class="pf-v5-c-form-control">
922
+ <input
923
+ aria-label="Current page"
924
+ type="number"
925
+ min="1"
926
+ max="4"
927
+ value="1"
928
+ />
929
+ </div>
922
930
  <span aria-hidden="true">of 4</span>
923
931
  </div>
924
932
  <div class="pf-v5-c-pagination__nav-control pf-m-next">
@@ -1017,14 +1025,15 @@ cssPrefix: pf-v5-c-pagination
1017
1025
  </button>
1018
1026
  </div>
1019
1027
  <div class="pf-v5-c-pagination__nav-page-select">
1020
- <input
1021
- class="pf-v5-c-form-control"
1022
- aria-label="Current page"
1023
- type="number"
1024
- min="1"
1025
- max="4"
1026
- value="1"
1027
- />
1028
+ <div class="pf-v5-c-form-control">
1029
+ <input
1030
+ aria-label="Current page"
1031
+ type="number"
1032
+ min="1"
1033
+ max="4"
1034
+ value="1"
1035
+ />
1036
+ </div>
1028
1037
  <span aria-hidden="true">of 4</span>
1029
1038
  </div>
1030
1039
  <div class="pf-v5-c-pagination__nav-control pf-m-next">
@@ -1125,14 +1134,15 @@ cssPrefix: pf-v5-c-pagination
1125
1134
  </button>
1126
1135
  </div>
1127
1136
  <div class="pf-v5-c-pagination__nav-page-select">
1128
- <input
1129
- class="pf-v5-c-form-control"
1130
- aria-label="Current page"
1131
- type="number"
1132
- min="1"
1133
- max="4"
1134
- value="1"
1135
- />
1137
+ <div class="pf-v5-c-form-control">
1138
+ <input
1139
+ aria-label="Current page"
1140
+ type="number"
1141
+ min="1"
1142
+ max="4"
1143
+ value="1"
1144
+ />
1145
+ </div>
1136
1146
  <span aria-hidden="true">of 4</span>
1137
1147
  </div>
1138
1148
  <div class="pf-v5-c-pagination__nav-control pf-m-next">
@@ -1309,14 +1319,15 @@ cssPrefix: pf-v5-c-pagination
1309
1319
  </button>
1310
1320
  </div>
1311
1321
  <div class="pf-v5-c-pagination__nav-page-select">
1312
- <input
1313
- class="pf-v5-c-form-control"
1314
- aria-label="Current page"
1315
- type="number"
1316
- min="1"
1317
- max="4"
1318
- value="1"
1319
- />
1322
+ <div class="pf-v5-c-form-control">
1323
+ <input
1324
+ aria-label="Current page"
1325
+ type="number"
1326
+ min="1"
1327
+ max="4"
1328
+ value="1"
1329
+ />
1330
+ </div>
1320
1331
  <span aria-hidden="true">of 4</span>
1321
1332
  </div>
1322
1333
  <div class="pf-v5-c-pagination__nav-control pf-m-next">
package/docs/components/Select/examples/Select.md CHANGED
@@ -527,13 +527,14 @@ The single select should be used when the user is selecting an option from a lis
527
527
 
528
528
  <div class="pf-v5-c-select__toggle pf-m-typeahead">
529
529
  <div class="pf-v5-c-select__toggle-wrapper">
530
- <input
531
- class="pf-v5-c-form-control pf-v5-c-select__toggle-typeahead"
532
- type="text"
533
- id="select-single-typeahead-typeahead"
534
- aria-label="Type to filter"
535
- placeholder="Choose a state"
536
- />
530
+ <div class="pf-v5-c-form-control pf-v5-c-select__toggle-typeahead">
531
+ <input
532
+ type="text"
533
+ id="select-single-typeahead-typeahead"
534
+ aria-label="Type to filter"
535
+ placeholder="Choose a state"
536
+ />
537
+ </div>
537
538
  </div>
538
539
  <button
539
540
  class="pf-v5-c-button pf-m-plain pf-v5-c-select__toggle-button"
@@ -604,13 +605,14 @@ The single select should be used when the user is selecting an option from a lis
604
605
 
605
606
  <div class="pf-v5-c-select__toggle pf-m-typeahead">
606
607
  <div class="pf-v5-c-select__toggle-wrapper">
607
- <input
608
- class="pf-v5-c-form-control pf-v5-c-select__toggle-typeahead"
609
- type="text"
610
- id="select-single-typeahead-expanded-typeahead"
611
- aria-label="Type to filter"
612
- placeholder="New"
613
- />
608
+ <div class="pf-v5-c-form-control pf-v5-c-select__toggle-typeahead">
609
+ <input
610
+ type="text"
611
+ id="select-single-typeahead-expanded-typeahead"
612
+ aria-label="Type to filter"
613
+ placeholder="New"
614
+ />
615
+ </div>
614
616
  </div>
615
617
  <button
616
618
  class="pf-v5-c-button pf-m-plain pf-v5-c-select__toggle-clear"
@@ -678,13 +680,14 @@ The single select should be used when the user is selecting an option from a lis
678
680
 
679
681
  <div class="pf-v5-c-select__toggle pf-m-typeahead">
680
682
  <div class="pf-v5-c-select__toggle-wrapper">
681
- <input
682
- class="pf-v5-c-form-control pf-v5-c-select__toggle-typeahead"
683
- type="text"
684
- id="select-single-typeahead-expanded-selected-typeahead"
685
- aria-label="Type to filter"
686
- placeholder="New Mexico"
687
- />
683
+ <div class="pf-v5-c-form-control pf-v5-c-select__toggle-typeahead">
684
+ <input
685
+ type="text"
686
+ id="select-single-typeahead-expanded-selected-typeahead"
687
+ aria-label="Type to filter"
688
+ placeholder="New Mexico"
689
+ />
690
+ </div>
688
691
  </div>
689
692
  <button
690
693
  class="pf-v5-c-button pf-m-plain pf-v5-c-select__toggle-clear"
@@ -761,14 +764,15 @@ The single select should be used when the user is selecting an option from a lis
761
764
 
762
765
  <div class="pf-v5-c-select__toggle pf-m-typeahead pf-m-disabled">
763
766
  <div class="pf-v5-c-select__toggle-wrapper">
764
- <input
765
- class="pf-v5-c-form-control pf-v5-c-select__toggle-typeahead"
766
- type="text"
767
- id="select-single-typeahead-disabled-typeahead"
768
- aria-label="Type to filter"
769
- placeholder="Choose a state"
770
- disabled
771
- />
767
+ <div class="pf-v5-c-form-control pf-v5-c-select__toggle-typeahead">
768
+ <input
769
+ type="text"
770
+ id="select-single-typeahead-disabled-typeahead"
771
+ aria-label="Type to filter"
772
+ placeholder="Choose a state"
773
+ disabled
774
+ />
775
+ </div>
772
776
  </div>
773
777
  <button
774
778
  class="pf-v5-c-button pf-m-plain pf-v5-c-select__toggle-button"
@@ -840,15 +844,16 @@ The single select should be used when the user is selecting an option from a lis
840
844
 
841
845
  <div class="pf-v5-c-select__toggle pf-m-typeahead">
842
846
  <div class="pf-v5-c-select__toggle-wrapper">
843
- <input
844
- class="pf-v5-c-form-control pf-v5-c-select__toggle-typeahead"
845
- type="text"
846
- id="select-single-typeahead-invalid-typeahead"
847
- aria-invalid="true"
848
- value="Invalid"
849
- aria-label="Type to filter"
850
- placeholder="Choose a state"
851
- />
847
+ <div class="pf-v5-c-form-control pf-v5-c-select__toggle-typeahead">
848
+ <input
849
+ type="text"
850
+ id="select-single-typeahead-invalid-typeahead"
851
+ aria-invalid="true"
852
+ value="Invalid"
853
+ aria-label="Type to filter"
854
+ placeholder="Choose a state"
855
+ />
856
+ </div>
852
857
  </div>
853
858
  <span class="pf-v5-c-select__toggle-status-icon">
854
859
  <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
@@ -949,13 +954,14 @@ The single select typeahead should be used when the user is selecting one option
949
954
 
950
955
  <div class="pf-v5-c-select__toggle pf-m-typeahead">
951
956
  <div class="pf-v5-c-select__toggle-wrapper">
952
- <input
953
- class="pf-v5-c-form-control pf-v5-c-select__toggle-typeahead"
954
- type="text"
955
- id="select-multi-typeahead-typeahead"
956
- aria-label="Type to filter"
957
- placeholder="Choose states"
958
- />
957
+ <div class="pf-v5-c-form-control pf-v5-c-select__toggle-typeahead">
958
+ <input
959
+ type="text"
960
+ id="select-multi-typeahead-typeahead"
961
+ aria-label="Type to filter"
962
+ placeholder="Choose states"
963
+ />
964
+ </div>
959
965
  </div>
960
966
  <button
961
967
  class="pf-v5-c-button pf-m-plain pf-v5-c-select__toggle-button"
@@ -1128,13 +1134,14 @@ The single select typeahead should be used when the user is selecting one option
1128
1134
  </ul>
1129
1135
  </div>
1130
1136
  </div>
1131
- <input
1132
- class="pf-v5-c-form-control pf-v5-c-select__toggle-typeahead"
1133
- type="text"
1134
- id="select-multi-typeahead-expanded-typeahead"
1135
- aria-label="Type to filter"
1136
- placeholder="Choose states"
1137
- />
1137
+ <div class="pf-v5-c-form-control pf-v5-c-select__toggle-typeahead">
1138
+ <input
1139
+ type="text"
1140
+ id="select-multi-typeahead-expanded-typeahead"
1141
+ aria-label="Type to filter"
1142
+ placeholder="Choose states"
1143
+ />
1144
+ </div>
1138
1145
  </div>
1139
1146
  <button
1140
1147
  class="pf-v5-c-button pf-m-plain pf-v5-c-select__toggle-clear"
@@ -1278,13 +1285,14 @@ The single select typeahead should be used when the user is selecting one option
1278
1285
  </ul>
1279
1286
  </div>
1280
1287
  </div>
1281
- <input
1282
- class="pf-v5-c-form-control pf-v5-c-select__toggle-typeahead"
1283
- type="text"
1284
- id="select-multi-typeahead-expanded-selected-typeahead"
1285
- aria-label="Type to filter"
1286
- placeholder="New"
1287
- />
1288
+ <div class="pf-v5-c-form-control pf-v5-c-select__toggle-typeahead">
1289
+ <input
1290
+ type="text"
1291
+ id="select-multi-typeahead-expanded-selected-typeahead"
1292
+ aria-label="Type to filter"
1293
+ placeholder="New"
1294
+ />
1295
+ </div>
1288
1296
  </div>
1289
1297
  <button
1290
1298
  class="pf-v5-c-button pf-m-plain pf-v5-c-select__toggle-clear"
@@ -1454,15 +1462,16 @@ The single select typeahead should be used when the user is selecting one option
1454
1462
  </ul>
1455
1463
  </div>
1456
1464
  </div>
1457
- <input
1458
- class="pf-v5-c-form-control pf-v5-c-select__toggle-typeahead"
1459
- type="text"
1460
- id="select-multi-typeahead-invalid-typeahead"
1461
- aria-invalid="true"
1462
- value="Invalid"
1463
- aria-label="Type to filter"
1464
- placeholder="Choose states"
1465
- />
1465
+ <div class="pf-v5-c-form-control pf-v5-c-select__toggle-typeahead">
1466
+ <input
1467
+ type="text"
1468
+ id="select-multi-typeahead-invalid-typeahead"
1469
+ aria-invalid="true"
1470
+ value="Invalid"
1471
+ aria-label="Type to filter"
1472
+ placeholder="Choose states"
1473
+ />
1474
+ </div>
1466
1475
  </div>
1467
1476
  <span class="pf-v5-c-select__toggle-status-icon">
1468
1477
  <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
package/docs/components/Slider/examples/Slider.md CHANGED
@@ -225,12 +225,9 @@ cssPrefix: pf-v5-c-slider
225
225
  ></div>
226
226
  </div>
227
227
  <div class="pf-v5-c-slider__value">
228
- <input
229
- class="pf-v5-c-form-control"
230
- type="number"
231
- value="5"
232
- aria-label="Slider value input"
233
- />
228
+ <div class="pf-v5-c-form-control">
229
+ <input type="number" value="5" aria-label="Slider value input" />
230
+ </div>
234
231
  </div>
235
232
  </div>
236
233
 
@@ -289,12 +286,9 @@ cssPrefix: pf-v5-c-slider
289
286
  <div class="pf-v5-c-slider__value">
290
287
  <div class="pf-v5-c-input-group">
291
288
  <div class="pf-v5-c-input-group__item pf-m-fill">
292
- <input
293
- class="pf-v5-c-form-control"
294
- type="number"
295
- value="50"
296
- aria-label="Slider value input"
297
- />
289
+ <div class="pf-v5-c-form-control">
290
+ <input type="number" value="50" aria-label="Slider value input" />
291
+ </div>
298
292
  </div>
299
293
  <div class="pf-v5-c-input-group__item">
300
294
  <span class="pf-v5-c-input-group__text">%</span>
@@ -323,12 +317,9 @@ cssPrefix: pf-v5-c-slider
323
317
  <div class="pf-v5-c-slider__value">
324
318
  <div class="pf-v5-c-input-group">
325
319
  <div class="pf-v5-c-input-group__item pf-m-fill">
326
- <input
327
- class="pf-v5-c-form-control"
328
- type="number"
329
- value="50"
330
- aria-label="Slider value input"
331
- />
320
+ <div class="pf-v5-c-form-control">
321
+ <input type="number" value="50" aria-label="Slider value input" />
322
+ </div>
332
323
  </div>
333
324
  <div class="pf-v5-c-input-group__item">
334
325
  <span class="pf-v5-c-input-group__text">%</span>
@@ -358,12 +349,9 @@ cssPrefix: pf-v5-c-slider
358
349
  ></div>
359
350
  <div class="pf-v5-c-slider__value pf-m-floating">
360
351
  <div class="pf-v5-c-input-group__item pf-m-fill">
361
- <input
362
- class="pf-v5-c-form-control"
363
- type="number"
364
- value="50"
365
- aria-label="Slider value input"
366
- />
352
+ <div class="pf-v5-c-form-control">
353
+ <input type="number" value="50" aria-label="Slider value input" />
354
+ </div>
367
355
  </div>
368
356
  <div class="pf-v5-c-input-group__item">
369
357
  <span class="pf-v5-c-input-group__text">%</span>
@@ -424,13 +412,14 @@ cssPrefix: pf-v5-c-slider
424
412
  <div class="pf-v5-c-slider__value pf-m-floating">
425
413
  <div class="pf-v5-c-input-group">
426
414
  <div class="pf-v5-c-input-group__item pf-m-fill">
427
- <input
428
- class="pf-v5-c-form-control"
429
- disabled
430
- type="number"
431
- value="50"
432
- aria-label="Slider value input"
433
- />
415
+ <div class="pf-v5-c-form-control">
416
+ <input
417
+ disabled
418
+ type="number"
419
+ value="50"
420
+ aria-label="Slider value input"
421
+ />
422
+ </div>
434
423
  </div>
435
424
  <div class="pf-v5-c-input-group__item">
436
425
  <span class="pf-v5-c-input-group__text pf-m-disabled">%</span>
@@ -465,12 +454,9 @@ cssPrefix: pf-v5-c-slider
465
454
  <div class="pf-v5-c-slider__value pf-m-floating">
466
455
  <div class="pf-v5-c-input-group">
467
456
  <div class="pf-v5-c-input-group__item pf-m-fill">
468
- <input
469
- class="pf-v5-c-form-control"
470
- type="number"
471
- value="50"
472
- aria-label="Slider value input"
473
- />
457
+ <div class="pf-v5-c-form-control">
458
+ <input type="number" value="50" aria-label="Slider value input" />
459
+ </div>
474
460
  </div>
475
461
  <div class="pf-v5-c-input-group__item">
476
462
  <span class="pf-v5-c-input-group__text">%</span>
@@ -627,13 +613,14 @@ cssPrefix: pf-v5-c-slider
627
613
  <div class="pf-v5-c-slider__value">
628
614
  <div class="pf-v5-c-input-group">
629
615
  <div class="pf-v5-c-input-group__item pf-m-fill">
630
- <input
631
- class="pf-v5-c-form-control"
632
- disabled
633
- type="number"
634
- value="50"
635
- aria-label="Slider value input"
636
- />
616
+ <div class="pf-v5-c-form-control">
617
+ <input
618
+ disabled
619
+ type="number"
620
+ value="50"
621
+ aria-label="Slider value input"
622
+ />
623
+ </div>
637
624
  </div>
638
625
  <div class="pf-v5-c-input-group__item">
639
626
  <span class="pf-v5-c-input-group__text pf-m-disabled">%</span>