@patternfly/patternfly 6.0.0-alpha.90 → 6.0.0-alpha.92

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 (259) hide show
  1. package/base/patternfly-common.css +10 -10
  2. package/base/patternfly-globals.css +3 -3
  3. package/base/patternfly-icons.css +1 -1
  4. package/base/patternfly-themes.css +53 -53
  5. package/base/patternfly-variables.css +236 -245
  6. package/base/tokens/_tokens-font.scss +0 -11
  7. package/components/AboutModalBox/about-modal-box.css +102 -102
  8. package/components/Accordion/accordion.css +118 -118
  9. package/components/ActionList/action-list.css +16 -16
  10. package/components/Alert/alert-group.css +50 -50
  11. package/components/Alert/alert.css +161 -161
  12. package/components/AppLauncher/app-launcher.css +167 -167
  13. package/components/Avatar/avatar.css +116 -116
  14. package/components/BackToTop/back-to-top.css +21 -21
  15. package/components/Backdrop/backdrop.css +9 -9
  16. package/components/BackgroundImage/background-image.css +15 -15
  17. package/components/Badge/badge.css +35 -35
  18. package/components/Banner/banner.css +114 -114
  19. package/components/Brand/brand.css +28 -28
  20. package/components/Breadcrumb/breadcrumb.css +62 -62
  21. package/components/Button/button.css +514 -514
  22. package/components/CalendarMonth/calendar-month.css +144 -144
  23. package/components/Card/card.css +230 -230
  24. package/components/Check/check.css +43 -43
  25. package/components/Chip/chip-group.css +60 -60
  26. package/components/Chip/chip.css +83 -83
  27. package/components/ClipboardCopy/clipboard-copy.css +71 -71
  28. package/components/CodeBlock/code-block.css +35 -35
  29. package/components/CodeEditor/code-editor.css +121 -121
  30. package/components/Content/content.css +216 -216
  31. package/components/ContextSelector/context-selector.css +251 -251
  32. package/components/DataList/data-list-grid.css +182 -182
  33. package/components/DataList/data-list.css +468 -468
  34. package/components/DatePicker/date-picker.css +35 -35
  35. package/components/DescriptionList/description-list-order.css +90 -90
  36. package/components/DescriptionList/description-list.css +193 -193
  37. package/components/Divider/divider.css +143 -143
  38. package/components/DragDrop/drag-drop.css +46 -46
  39. package/components/Drawer/drawer.css +474 -474
  40. package/components/Dropdown/dropdown.css +457 -457
  41. package/components/DualListSelector/dual-list-selector.css +199 -199
  42. package/components/EmptyState/empty-state.css +104 -104
  43. package/components/ExpandableSection/expandable-section.css +113 -113
  44. package/components/FileUpload/file-upload.css +32 -32
  45. package/components/Form/form.css +281 -281
  46. package/components/FormControl/form-control.css +197 -197
  47. package/components/HelperText/helper-text.css +51 -51
  48. package/components/Hint/hint.css +46 -46
  49. package/components/Icon/icon.css +218 -218
  50. package/components/InlineEdit/inline-edit.css +43 -43
  51. package/components/InputGroup/input-group.css +52 -52
  52. package/components/JumpLinks/jump-links.css +183 -183
  53. package/components/Label/label-group.css +86 -86
  54. package/components/Label/label.css +438 -438
  55. package/components/List/list.css +53 -53
  56. package/components/LogViewer/log-viewer.css +138 -138
  57. package/components/Login/login.css +139 -139
  58. package/components/Masthead/masthead.css +319 -319
  59. package/components/Menu/menu.css +415 -415
  60. package/components/MenuToggle/menu-toggle.css +275 -275
  61. package/components/ModalBox/modal-box.css +121 -121
  62. package/components/MultipleFileUpload/multiple-file-upload.css +163 -163
  63. package/components/Nav/nav.css +225 -225
  64. package/components/NotificationBadge/notification-badge.css +66 -66
  65. package/components/NotificationDrawer/notification-drawer.css +179 -179
  66. package/components/NumberInput/number-input.css +20 -20
  67. package/components/OptionsMenu/options-menu.css +190 -190
  68. package/components/OverflowMenu/overflow-menu.css +19 -19
  69. package/components/Page/page.css +598 -598
  70. package/components/Pagination/pagination.css +220 -220
  71. package/components/Panel/panel.css +72 -72
  72. package/components/Popover/popover.css +148 -148
  73. package/components/Progress/progress.css +80 -80
  74. package/components/ProgressStepper/progress-stepper.css +514 -514
  75. package/components/Radio/radio.css +44 -44
  76. package/components/Select/select.css +423 -423
  77. package/components/Sidebar/sidebar.css +166 -166
  78. package/components/SimpleList/simple-list.css +53 -53
  79. package/components/Skeleton/skeleton.css +112 -112
  80. package/components/SkipToContent/skip-to-content.css +8 -8
  81. package/components/Slider/slider.css +144 -144
  82. package/components/Spinner/spinner.css +36 -36
  83. package/components/Switch/switch.css +89 -89
  84. package/components/TabContent/tab-content.css +34 -34
  85. package/components/Table/table-grid.css +911 -911
  86. package/components/Table/table-scrollable.css +38 -38
  87. package/components/Table/table-tree-view.css +497 -497
  88. package/components/Table/table.css +660 -660
  89. package/components/Tabs/tabs.css +616 -616
  90. package/components/TextInputGroup/text-input-group.css +88 -88
  91. package/components/Tile/tile.css +68 -68
  92. package/components/Timestamp/timestamp.css +29 -29
  93. package/components/Title/title.css +87 -87
  94. package/components/ToggleGroup/toggle-group.css +86 -86
  95. package/components/Toolbar/toolbar.css +2279 -2279
  96. package/components/Tooltip/tooltip.css +85 -85
  97. package/components/TreeView/tree-view.css +363 -363
  98. package/components/Truncate/truncate.css +15 -15
  99. package/components/Wizard/wizard.css +272 -272
  100. package/docs/components/AboutModalBox/examples/AboutModalBox.md +11 -11
  101. package/docs/components/Accordion/examples/Accordion.md +188 -188
  102. package/docs/components/ActionList/examples/ActionList.md +55 -55
  103. package/docs/components/Alert/examples/Alert.md +222 -222
  104. package/docs/components/AppLauncher/deprecated/application-launcher.md +146 -146
  105. package/docs/components/Avatar/examples/Avatar.md +6 -6
  106. package/docs/components/BackToTop/examples/BackToTop.md +3 -3
  107. package/docs/components/Backdrop/examples/Backdrop.md +1 -1
  108. package/docs/components/BackgroundImage/examples/BackgroundImage.md +2 -2
  109. package/docs/components/Badge/examples/Badge.md +17 -17
  110. package/docs/components/Banner/examples/Banner.md +42 -42
  111. package/docs/components/Brand/examples/Brand.md +4 -4
  112. package/docs/components/Breadcrumb/examples/Breadcrumb.md +90 -90
  113. package/docs/components/Button/examples/Button.md +364 -364
  114. package/docs/components/CalendarMonth/examples/CalendarMonth.md +436 -436
  115. package/docs/components/Card/examples/Card.md +515 -515
  116. package/docs/components/Check/examples/Check.md +37 -37
  117. package/docs/components/Chip/examples/Chip.md +216 -216
  118. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +82 -82
  119. package/docs/components/CodeBlock/examples/CodeBlock.md +39 -39
  120. package/docs/components/CodeEditor/examples/CodeEditor.md +85 -85
  121. package/docs/components/Content/examples/Content.md +1 -1
  122. package/docs/components/ContextSelector/deprecated/context-selector.md +160 -160
  123. package/docs/components/DataList/examples/DataList.md +666 -666
  124. package/docs/components/DatePicker/examples/DatePicker.md +54 -54
  125. package/docs/components/DescriptionList/examples/DescriptionList.md +737 -737
  126. package/docs/components/Divider/examples/Divider.md +18 -18
  127. package/docs/components/DragDrop/examples/DragDrop.md +27 -27
  128. package/docs/components/Drawer/examples/Drawer.md +225 -225
  129. package/docs/components/Dropdown/deprecated/Dropdown.md +541 -541
  130. package/docs/components/DualListSelector/examples/DualListSelector.md +1012 -1012
  131. package/docs/components/EmptyState/examples/EmptyState.md +100 -100
  132. package/docs/components/ExpandableSection/examples/ExpandableSection.md +47 -47
  133. package/docs/components/FileUpload/examples/FileUpload.md +94 -94
  134. package/docs/components/Form/examples/Form.md +226 -226
  135. package/docs/components/FormControl/examples/FormControl.md +65 -65
  136. package/docs/components/HelperText/examples/HelperText.md +72 -72
  137. package/docs/components/Hint/examples/Hint.md +44 -44
  138. package/docs/components/Icon/examples/Icon.md +85 -85
  139. package/docs/components/InlineEdit/examples/InlineEdit.md +209 -209
  140. package/docs/components/InputGroup/examples/InputGroup.md +73 -73
  141. package/docs/components/JumpLinks/examples/JumpLinks.md +285 -285
  142. package/docs/components/Label/examples/Label.md +1717 -1717
  143. package/docs/components/List/examples/List.md +30 -30
  144. package/docs/components/LogViewer/examples/LogViewer.md +1785 -1785
  145. package/docs/components/Login/examples/Login.md +287 -287
  146. package/docs/components/Masthead/examples/masthead.md +39 -39
  147. package/docs/components/Menu/examples/Menu.md +2377 -2377
  148. package/docs/components/MenuToggle/examples/MenuToggle.md +242 -242
  149. package/docs/components/ModalBox/examples/ModalBox.md +119 -119
  150. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +192 -192
  151. package/docs/components/Nav/examples/Navigation.md +856 -856
  152. package/docs/components/NotificationBadge/examples/NotificationBadge.md +42 -42
  153. package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +659 -659
  154. package/docs/components/NumberInput/examples/NumberInput.md +127 -127
  155. package/docs/components/OptionsMenu/deprecated/options-menu.md +178 -178
  156. package/docs/components/OverflowMenu/examples/overflow-menu.md +97 -97
  157. package/docs/components/Page/deprecated/PageHeader.md +85 -85
  158. package/docs/components/Page/examples/Page.md +90 -90
  159. package/docs/components/Pagination/examples/Pagination.md +285 -285
  160. package/docs/components/Panel/examples/Panel.md +38 -38
  161. package/docs/components/Popover/examples/Popover.md +169 -169
  162. package/docs/components/Progress/examples/Progress.md +145 -145
  163. package/docs/components/ProgressStepper/examples/ProgressStepper.md +295 -295
  164. package/docs/components/Radio/examples/Radio.md +33 -33
  165. package/docs/components/Select/deprecated/Select.md +736 -736
  166. package/docs/components/Sidebar/examples/Sidebar.md +65 -65
  167. package/docs/components/SimpleList/examples/SimpleList.md +39 -39
  168. package/docs/components/Skeleton/examples/Skeleton.md +29 -29
  169. package/docs/components/SkipToContent/examples/SkipToContent.md +3 -3
  170. package/docs/components/Slider/examples/Slider.md +213 -213
  171. package/docs/components/Spinner/examples/Spinner.md +14 -14
  172. package/docs/components/Switch/examples/Switch.md +58 -58
  173. package/docs/components/TabContent/examples/TabContent.md +24 -24
  174. package/docs/components/Table/examples/Table.md +6982 -6982
  175. package/docs/components/Tabs/examples/Tabs.md +2114 -2114
  176. package/docs/components/TextInputGroup/examples/TextInputGroup.md +373 -373
  177. package/docs/components/Tile/examples/Tile.md +131 -131
  178. package/docs/components/Timestamp/examples/Timestamp.md +10 -10
  179. package/docs/components/Title/examples/Title.md +12 -12
  180. package/docs/components/ToggleGroup/examples/toggle-group.md +116 -116
  181. package/docs/components/Toolbar/examples/Toolbar.md +611 -611
  182. package/docs/components/Tooltip/examples/Tooltip.md +27 -27
  183. package/docs/components/TreeView/examples/TreeView.md +1166 -1166
  184. package/docs/components/Truncate/examples/Truncate.md +7 -7
  185. package/docs/components/Wizard/examples/Wizard.md +522 -522
  186. package/docs/demos/AboutModal/examples/AboutModal.md +106 -106
  187. package/docs/demos/Alert/examples/Alert.md +391 -391
  188. package/docs/demos/BackToTop/examples/BackToTop.md +175 -175
  189. package/docs/demos/Banner/examples/Banner.md +364 -364
  190. package/docs/demos/Button/examples/Button.md +50 -50
  191. package/docs/demos/Card/examples/Card.md +1054 -1054
  192. package/docs/demos/CardView/examples/CardView.md +378 -378
  193. package/docs/demos/ContextSelector/examples/ContextSelector.md +449 -449
  194. package/docs/demos/Dashboard/examples/Dashboard.md +541 -541
  195. package/docs/demos/DataList/examples/DataList.md +1148 -1148
  196. package/docs/demos/DescriptionList/examples/DescriptionList.md +544 -544
  197. package/docs/demos/Drawer/examples/Drawer.md +531 -531
  198. package/docs/demos/Form/examples/BasicForms.md +444 -444
  199. package/docs/demos/HelperText/examples/HelperText.md +51 -51
  200. package/docs/demos/JumpLinks/examples/JumpLinks.md +596 -596
  201. package/docs/demos/Masthead/examples/Masthead.md +763 -763
  202. package/docs/demos/Modal/examples/Modal.md +645 -645
  203. package/docs/demos/Nav/examples/Nav.md +649 -649
  204. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +1570 -1570
  205. package/docs/demos/Page/examples/Page.md +1330 -1330
  206. package/docs/demos/Page/examples/Penta.md +217 -217
  207. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +23 -23
  208. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +108 -108
  209. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +1890 -1890
  210. package/docs/demos/Skeleton/examples/Skeleton.md +176 -176
  211. package/docs/demos/Table/examples/Table.md +4580 -4580
  212. package/docs/demos/Tabs/examples/Tabs.md +1040 -1040
  213. package/docs/demos/Toolbar/examples/Toolbar.md +961 -961
  214. package/docs/demos/Wizard/examples/Wizard.md +1574 -1574
  215. package/docs/layouts/Bullseye/examples/Bullseye.md +2 -2
  216. package/docs/layouts/Flex/examples/Flex.md +290 -290
  217. package/docs/layouts/Gallery/examples/Gallery.md +48 -48
  218. package/docs/layouts/Grid/examples/Grid.md +121 -121
  219. package/docs/layouts/Level/examples/Level.md +11 -11
  220. package/docs/layouts/Split/examples/Split.md +23 -23
  221. package/docs/layouts/Stack/examples/Stack.md +8 -8
  222. package/docs/utilities/Accessibility/examples/Accessibility.md +3 -3
  223. package/docs/utilities/Alignment/examples/Alignment.md +4 -4
  224. package/docs/utilities/Display/examples/Display.md +16 -16
  225. package/docs/utilities/Flex/examples/Flex.md +53 -53
  226. package/docs/utilities/Float/examples/Float.md +2 -2
  227. package/docs/utilities/Spacing/examples/Spacing.md +16 -16
  228. package/layouts/Bullseye/bullseye.css +3 -3
  229. package/layouts/Flex/flex.css +1276 -1276
  230. package/layouts/Gallery/gallery.css +34 -34
  231. package/layouts/Grid/grid.css +531 -531
  232. package/layouts/Level/level.css +4 -4
  233. package/layouts/Split/split.css +6 -6
  234. package/layouts/Stack/stack.css +5 -5
  235. package/package.json +5 -5
  236. package/patternfly-addons.css +2989 -2989
  237. package/patternfly-base-no-globals-theme-dark-unversioned.css +269 -278
  238. package/patternfly-base-no-globals.css +284 -293
  239. package/patternfly-base-theme-dark-unversioned.css +271 -280
  240. package/patternfly-base.css +286 -295
  241. package/patternfly-charts-theme-dark-unversioned.css +66 -66
  242. package/patternfly-charts-theme-dark.css +66 -66
  243. package/patternfly-charts.css +320 -320
  244. package/patternfly-no-globals.css +20217 -20226
  245. package/patternfly-theme-dark-unversioned.css +20209 -20218
  246. package/patternfly.css +20219 -20228
  247. package/patternfly.min.css +1 -1
  248. package/patternfly.min.css.map +1 -1
  249. package/sass-utilities/_init.scss +1 -1
  250. package/utilities/Accessibility/accessibility.css +18 -18
  251. package/utilities/Alignment/alignment.css +24 -24
  252. package/utilities/BackgroundColor/BackgroundColor.css +252 -252
  253. package/utilities/BoxShadow/box-shadow.css +42 -42
  254. package/utilities/Display/display.css +54 -54
  255. package/utilities/Flex/flex.css +228 -228
  256. package/utilities/Float/float.css +12 -12
  257. package/utilities/Sizing/sizing.css +216 -216
  258. package/utilities/Spacing/spacing.css +1512 -1512
  259. package/utilities/Text/text.css +631 -631
package/docs/components/Slider/examples/Slider.md CHANGED
@@ -7,74 +7,74 @@ cssPrefix: pf-v5-c-slider
7
7
  ### Discrete
8
8
 
9
9
  ```html
10
- <div class="pf-v5-c-slider" style="--pf-v5-c-slider--value: 62.5%;">
11
- <div class="pf-v5-c-slider__main">
12
- <div class="pf-v5-c-slider__rail">
13
- <div class="pf-v5-c-slider__rail-track"></div>
10
+ <div class="pf-v6-c-slider" style="--pf-v5-c-slider--value: 62.5%;">
11
+ <div class="pf-v6-c-slider__main">
12
+ <div class="pf-v6-c-slider__rail">
13
+ <div class="pf-v6-c-slider__rail-track"></div>
14
14
  </div>
15
- <div class="pf-v5-c-slider__steps" aria-hidden="true">
15
+ <div class="pf-v6-c-slider__steps" aria-hidden="true">
16
16
  <div
17
- class="pf-v5-c-slider__step pf-m-active"
17
+ class="pf-v6-c-slider__step pf-m-active"
18
18
  style="--pf-v5-c-slider__step--Left: 0%;"
19
19
  >
20
- <div class="pf-v5-c-slider__step-tick"></div>
21
- <div class="pf-v5-c-slider__step-label">0</div>
20
+ <div class="pf-v6-c-slider__step-tick"></div>
21
+ <div class="pf-v6-c-slider__step-label">0</div>
22
22
  </div>
23
23
  <div
24
- class="pf-v5-c-slider__step pf-m-active"
24
+ class="pf-v6-c-slider__step pf-m-active"
25
25
  style="--pf-v5-c-slider__step--Left: 12.5%;"
26
26
  >
27
- <div class="pf-v5-c-slider__step-tick"></div>
27
+ <div class="pf-v6-c-slider__step-tick"></div>
28
28
  </div>
29
29
  <div
30
- class="pf-v5-c-slider__step pf-m-active"
30
+ class="pf-v6-c-slider__step pf-m-active"
31
31
  style="--pf-v5-c-slider__step--Left: 25%;"
32
32
  >
33
- <div class="pf-v5-c-slider__step-tick"></div>
34
- <div class="pf-v5-c-slider__step-label">2</div>
33
+ <div class="pf-v6-c-slider__step-tick"></div>
34
+ <div class="pf-v6-c-slider__step-label">2</div>
35
35
  </div>
36
36
  <div
37
- class="pf-v5-c-slider__step pf-m-active"
37
+ class="pf-v6-c-slider__step pf-m-active"
38
38
  style="--pf-v5-c-slider__step--Left: 37.5%;"
39
39
  >
40
- <div class="pf-v5-c-slider__step-tick"></div>
40
+ <div class="pf-v6-c-slider__step-tick"></div>
41
41
  </div>
42
42
  <div
43
- class="pf-v5-c-slider__step pf-m-active"
43
+ class="pf-v6-c-slider__step pf-m-active"
44
44
  style="--pf-v5-c-slider__step--Left: 50%;"
45
45
  >
46
- <div class="pf-v5-c-slider__step-tick"></div>
47
- <div class="pf-v5-c-slider__step-label">4</div>
46
+ <div class="pf-v6-c-slider__step-tick"></div>
47
+ <div class="pf-v6-c-slider__step-label">4</div>
48
48
  </div>
49
49
  <div
50
- class="pf-v5-c-slider__step pf-m-active"
50
+ class="pf-v6-c-slider__step pf-m-active"
51
51
  style="--pf-v5-c-slider__step--Left: 62.5%;"
52
52
  >
53
- <div class="pf-v5-c-slider__step-tick"></div>
53
+ <div class="pf-v6-c-slider__step-tick"></div>
54
54
  </div>
55
55
  <div
56
- class="pf-v5-c-slider__step"
56
+ class="pf-v6-c-slider__step"
57
57
  style="--pf-v5-c-slider__step--Left: 75%;"
58
58
  >
59
- <div class="pf-v5-c-slider__step-tick"></div>
60
- <div class="pf-v5-c-slider__step-label">6</div>
59
+ <div class="pf-v6-c-slider__step-tick"></div>
60
+ <div class="pf-v6-c-slider__step-label">6</div>
61
61
  </div>
62
62
  <div
63
- class="pf-v5-c-slider__step"
63
+ class="pf-v6-c-slider__step"
64
64
  style="--pf-v5-c-slider__step--Left: 87.5%;"
65
65
  >
66
- <div class="pf-v5-c-slider__step-tick"></div>
66
+ <div class="pf-v6-c-slider__step-tick"></div>
67
67
  </div>
68
68
  <div
69
- class="pf-v5-c-slider__step"
69
+ class="pf-v6-c-slider__step"
70
70
  style="--pf-v5-c-slider__step--Left: 100%;"
71
71
  >
72
- <div class="pf-v5-c-slider__step-tick"></div>
73
- <div class="pf-v5-c-slider__step-label">8</div>
72
+ <div class="pf-v6-c-slider__step-tick"></div>
73
+ <div class="pf-v6-c-slider__step-label">8</div>
74
74
  </div>
75
75
  </div>
76
76
  <div
77
- class="pf-v5-c-slider__thumb"
77
+ class="pf-v6-c-slider__thumb"
78
78
  role="slider"
79
79
  aria-valuemin="0"
80
80
  aria-valuemax="8"
@@ -90,13 +90,13 @@ cssPrefix: pf-v5-c-slider
90
90
  ### Continuous
91
91
 
92
92
  ```html
93
- <div class="pf-v5-c-slider" style="--pf-v5-c-slider--value: 50%;">
94
- <div class="pf-v5-c-slider__main">
95
- <div class="pf-v5-c-slider__rail">
96
- <div class="pf-v5-c-slider__rail-track"></div>
93
+ <div class="pf-v6-c-slider" style="--pf-v5-c-slider--value: 50%;">
94
+ <div class="pf-v6-c-slider__main">
95
+ <div class="pf-v6-c-slider__rail">
96
+ <div class="pf-v6-c-slider__rail-track"></div>
97
97
  </div>
98
98
  <div
99
- class="pf-v5-c-slider__thumb"
99
+ class="pf-v6-c-slider__thumb"
100
100
  role="slider"
101
101
  aria-valuemin="0"
102
102
  aria-valuemax="100"
@@ -107,29 +107,29 @@ cssPrefix: pf-v5-c-slider
107
107
  </div>
108
108
  </div>
109
109
 
110
- <div class="pf-v5-c-slider" style="--pf-v5-c-slider--value: 50%;">
111
- <div class="pf-v5-c-slider__main">
112
- <div class="pf-v5-c-slider__rail">
113
- <div class="pf-v5-c-slider__rail-track"></div>
110
+ <div class="pf-v6-c-slider" style="--pf-v5-c-slider--value: 50%;">
111
+ <div class="pf-v6-c-slider__main">
112
+ <div class="pf-v6-c-slider__rail">
113
+ <div class="pf-v6-c-slider__rail-track"></div>
114
114
  </div>
115
- <div class="pf-v5-c-slider__steps" aria-hidden="true">
115
+ <div class="pf-v6-c-slider__steps" aria-hidden="true">
116
116
  <div
117
- class="pf-v5-c-slider__step pf-m-active"
117
+ class="pf-v6-c-slider__step pf-m-active"
118
118
  style="--pf-v5-c-slider__step--Left: 0%;"
119
119
  >
120
- <div class="pf-v5-c-slider__step-tick"></div>
121
- <div class="pf-v5-c-slider__step-label">0%</div>
120
+ <div class="pf-v6-c-slider__step-tick"></div>
121
+ <div class="pf-v6-c-slider__step-label">0%</div>
122
122
  </div>
123
123
  <div
124
- class="pf-v5-c-slider__step"
124
+ class="pf-v6-c-slider__step"
125
125
  style="--pf-v5-c-slider__step--Left: 100%;"
126
126
  >
127
- <div class="pf-v5-c-slider__step-tick"></div>
128
- <div class="pf-v5-c-slider__step-label">100%</div>
127
+ <div class="pf-v6-c-slider__step-tick"></div>
128
+ <div class="pf-v6-c-slider__step-label">100%</div>
129
129
  </div>
130
130
  </div>
131
131
  <div
132
- class="pf-v5-c-slider__thumb"
132
+ class="pf-v6-c-slider__thumb"
133
133
  role="slider"
134
134
  aria-valuemin="0"
135
135
  aria-valuemax="100"
@@ -146,76 +146,76 @@ cssPrefix: pf-v5-c-slider
146
146
 
147
147
  ```html
148
148
  <div
149
- class="pf-v5-c-slider"
149
+ class="pf-v6-c-slider"
150
150
  style="--pf-v5-c-slider--value: 62.5%; --pf-v5-c-slider__value--c-form-control--width-chars: 1;"
151
151
  >
152
- <div class="pf-v5-c-slider__main">
153
- <div class="pf-v5-c-slider__rail">
154
- <div class="pf-v5-c-slider__rail-track"></div>
152
+ <div class="pf-v6-c-slider__main">
153
+ <div class="pf-v6-c-slider__rail">
154
+ <div class="pf-v6-c-slider__rail-track"></div>
155
155
  </div>
156
- <div class="pf-v5-c-slider__steps" aria-hidden="true">
156
+ <div class="pf-v6-c-slider__steps" aria-hidden="true">
157
157
  <div
158
- class="pf-v5-c-slider__step pf-m-active"
158
+ class="pf-v6-c-slider__step pf-m-active"
159
159
  style="--pf-v5-c-slider__step--Left: 0%;"
160
160
  >
161
- <div class="pf-v5-c-slider__step-tick"></div>
162
- <div class="pf-v5-c-slider__step-label">0</div>
161
+ <div class="pf-v6-c-slider__step-tick"></div>
162
+ <div class="pf-v6-c-slider__step-label">0</div>
163
163
  </div>
164
164
  <div
165
- class="pf-v5-c-slider__step pf-m-active"
165
+ class="pf-v6-c-slider__step pf-m-active"
166
166
  style="--pf-v5-c-slider__step--Left: 12.5%;"
167
167
  >
168
- <div class="pf-v5-c-slider__step-tick"></div>
168
+ <div class="pf-v6-c-slider__step-tick"></div>
169
169
  </div>
170
170
  <div
171
- class="pf-v5-c-slider__step pf-m-active"
171
+ class="pf-v6-c-slider__step pf-m-active"
172
172
  style="--pf-v5-c-slider__step--Left: 25%;"
173
173
  >
174
- <div class="pf-v5-c-slider__step-tick"></div>
175
- <div class="pf-v5-c-slider__step-label">2</div>
174
+ <div class="pf-v6-c-slider__step-tick"></div>
175
+ <div class="pf-v6-c-slider__step-label">2</div>
176
176
  </div>
177
177
  <div
178
- class="pf-v5-c-slider__step pf-m-active"
178
+ class="pf-v6-c-slider__step pf-m-active"
179
179
  style="--pf-v5-c-slider__step--Left: 37.5%;"
180
180
  >
181
- <div class="pf-v5-c-slider__step-tick"></div>
181
+ <div class="pf-v6-c-slider__step-tick"></div>
182
182
  </div>
183
183
  <div
184
- class="pf-v5-c-slider__step pf-m-active"
184
+ class="pf-v6-c-slider__step pf-m-active"
185
185
  style="--pf-v5-c-slider__step--Left: 50%;"
186
186
  >
187
- <div class="pf-v5-c-slider__step-tick"></div>
188
- <div class="pf-v5-c-slider__step-label">4</div>
187
+ <div class="pf-v6-c-slider__step-tick"></div>
188
+ <div class="pf-v6-c-slider__step-label">4</div>
189
189
  </div>
190
190
  <div
191
- class="pf-v5-c-slider__step pf-m-active"
191
+ class="pf-v6-c-slider__step pf-m-active"
192
192
  style="--pf-v5-c-slider__step--Left: 62.5%;"
193
193
  >
194
- <div class="pf-v5-c-slider__step-tick"></div>
194
+ <div class="pf-v6-c-slider__step-tick"></div>
195
195
  </div>
196
196
  <div
197
- class="pf-v5-c-slider__step"
197
+ class="pf-v6-c-slider__step"
198
198
  style="--pf-v5-c-slider__step--Left: 75%;"
199
199
  >
200
- <div class="pf-v5-c-slider__step-tick"></div>
201
- <div class="pf-v5-c-slider__step-label">6</div>
200
+ <div class="pf-v6-c-slider__step-tick"></div>
201
+ <div class="pf-v6-c-slider__step-label">6</div>
202
202
  </div>
203
203
  <div
204
- class="pf-v5-c-slider__step"
204
+ class="pf-v6-c-slider__step"
205
205
  style="--pf-v5-c-slider__step--Left: 87.5%;"
206
206
  >
207
- <div class="pf-v5-c-slider__step-tick"></div>
207
+ <div class="pf-v6-c-slider__step-tick"></div>
208
208
  </div>
209
209
  <div
210
- class="pf-v5-c-slider__step"
210
+ class="pf-v6-c-slider__step"
211
211
  style="--pf-v5-c-slider__step--Left: 100%;"
212
212
  >
213
- <div class="pf-v5-c-slider__step-tick"></div>
214
- <div class="pf-v5-c-slider__step-label">8</div>
213
+ <div class="pf-v6-c-slider__step-tick"></div>
214
+ <div class="pf-v6-c-slider__step-label">8</div>
215
215
  </div>
216
216
  </div>
217
217
  <div
218
- class="pf-v5-c-slider__thumb"
218
+ class="pf-v6-c-slider__thumb"
219
219
  role="slider"
220
220
  aria-valuemin="0"
221
221
  aria-valuemax="8"
@@ -224,8 +224,8 @@ cssPrefix: pf-v5-c-slider
224
224
  tabindex="0"
225
225
  ></div>
226
226
  </div>
227
- <div class="pf-v5-c-slider__value">
228
- <span class="pf-v5-c-form-control">
227
+ <div class="pf-v6-c-slider__value">
228
+ <span class="pf-v6-c-form-control">
229
229
  <input type="number" value="5" aria-label="Slider value input" />
230
230
  </span>
231
231
  </div>
@@ -233,48 +233,48 @@ cssPrefix: pf-v5-c-slider
233
233
 
234
234
  <br />
235
235
 
236
- <div class="pf-v5-c-slider" style="--pf-v5-c-slider--value: 50%;">
237
- <div class="pf-v5-c-slider__main">
238
- <div class="pf-v5-c-slider__rail">
239
- <div class="pf-v5-c-slider__rail-track"></div>
236
+ <div class="pf-v6-c-slider" style="--pf-v5-c-slider--value: 50%;">
237
+ <div class="pf-v6-c-slider__main">
238
+ <div class="pf-v6-c-slider__rail">
239
+ <div class="pf-v6-c-slider__rail-track"></div>
240
240
  </div>
241
- <div class="pf-v5-c-slider__steps" aria-hidden="true">
241
+ <div class="pf-v6-c-slider__steps" aria-hidden="true">
242
242
  <div
243
- class="pf-v5-c-slider__step pf-m-active"
243
+ class="pf-v6-c-slider__step pf-m-active"
244
244
  style="--pf-v5-c-slider__step--Left: 0%;"
245
245
  >
246
- <div class="pf-v5-c-slider__step-tick"></div>
247
- <div class="pf-v5-c-slider__step-label">0%</div>
246
+ <div class="pf-v6-c-slider__step-tick"></div>
247
+ <div class="pf-v6-c-slider__step-label">0%</div>
248
248
  </div>
249
249
  <div
250
- class="pf-v5-c-slider__step pf-m-active"
250
+ class="pf-v6-c-slider__step pf-m-active"
251
251
  style="--pf-v5-c-slider__step--Left: 25%;"
252
252
  >
253
- <div class="pf-v5-c-slider__step-tick"></div>
253
+ <div class="pf-v6-c-slider__step-tick"></div>
254
254
  </div>
255
255
  <div
256
- class="pf-v5-c-slider__step pf-m-active"
256
+ class="pf-v6-c-slider__step pf-m-active"
257
257
  style="--pf-v5-c-slider__step--Left: 50%;"
258
258
  >
259
- <div class="pf-v5-c-slider__step-tick"></div>
260
- <div class="pf-v5-c-slider__step-label">50%</div>
259
+ <div class="pf-v6-c-slider__step-tick"></div>
260
+ <div class="pf-v6-c-slider__step-label">50%</div>
261
261
  </div>
262
262
  <div
263
- class="pf-v5-c-slider__step"
263
+ class="pf-v6-c-slider__step"
264
264
  style="--pf-v5-c-slider__step--Left: 75%;"
265
265
  >
266
- <div class="pf-v5-c-slider__step-tick"></div>
266
+ <div class="pf-v6-c-slider__step-tick"></div>
267
267
  </div>
268
268
  <div
269
- class="pf-v5-c-slider__step"
269
+ class="pf-v6-c-slider__step"
270
270
  style="--pf-v5-c-slider__step--Left: 100%;"
271
271
  >
272
- <div class="pf-v5-c-slider__step-tick"></div>
273
- <div class="pf-v5-c-slider__step-label">100%</div>
272
+ <div class="pf-v6-c-slider__step-tick"></div>
273
+ <div class="pf-v6-c-slider__step-label">100%</div>
274
274
  </div>
275
275
  </div>
276
276
  <div
277
- class="pf-v5-c-slider__thumb"
277
+ class="pf-v6-c-slider__thumb"
278
278
  role="slider"
279
279
  aria-valuemin="0"
280
280
  aria-valuemax="100"
@@ -283,15 +283,15 @@ cssPrefix: pf-v5-c-slider
283
283
  tabindex="0"
284
284
  ></div>
285
285
  </div>
286
- <div class="pf-v5-c-slider__value">
287
- <div class="pf-v5-c-input-group">
288
- <div class="pf-v5-c-input-group__item pf-m-fill">
289
- <span class="pf-v5-c-form-control">
286
+ <div class="pf-v6-c-slider__value">
287
+ <div class="pf-v6-c-input-group">
288
+ <div class="pf-v6-c-input-group__item pf-m-fill">
289
+ <span class="pf-v6-c-form-control">
290
290
  <input type="number" value="50" aria-label="Slider value input" />
291
291
  </span>
292
292
  </div>
293
- <div class="pf-v5-c-input-group__item pf-m-box">
294
- <span class="pf-v5-c-input-group__text">%</span>
293
+ <div class="pf-v6-c-input-group__item pf-m-box">
294
+ <span class="pf-v6-c-input-group__text">%</span>
295
295
  </div>
296
296
  </div>
297
297
  </div>
@@ -299,13 +299,13 @@ cssPrefix: pf-v5-c-slider
299
299
 
300
300
  <br />
301
301
 
302
- <div class="pf-v5-c-slider" style="--pf-v5-c-slider--value: 50%;">
303
- <div class="pf-v5-c-slider__main">
304
- <div class="pf-v5-c-slider__rail">
305
- <div class="pf-v5-c-slider__rail-track"></div>
302
+ <div class="pf-v6-c-slider" style="--pf-v5-c-slider--value: 50%;">
303
+ <div class="pf-v6-c-slider__main">
304
+ <div class="pf-v6-c-slider__rail">
305
+ <div class="pf-v6-c-slider__rail-track"></div>
306
306
  </div>
307
307
  <div
308
- class="pf-v5-c-slider__thumb"
308
+ class="pf-v6-c-slider__thumb"
309
309
  role="slider"
310
310
  aria-valuemin="0"
311
311
  aria-valuemax="100"
@@ -314,15 +314,15 @@ cssPrefix: pf-v5-c-slider
314
314
  tabindex="0"
315
315
  ></div>
316
316
  </div>
317
- <div class="pf-v5-c-slider__value">
318
- <div class="pf-v5-c-input-group">
319
- <div class="pf-v5-c-input-group__item pf-m-fill">
320
- <span class="pf-v5-c-form-control">
317
+ <div class="pf-v6-c-slider__value">
318
+ <div class="pf-v6-c-input-group">
319
+ <div class="pf-v6-c-input-group__item pf-m-fill">
320
+ <span class="pf-v6-c-form-control">
321
321
  <input type="number" value="50" aria-label="Slider value input" />
322
322
  </span>
323
323
  </div>
324
- <div class="pf-v5-c-input-group__item pf-m-box">
325
- <span class="pf-v5-c-input-group__text">%</span>
324
+ <div class="pf-v6-c-input-group__item pf-m-box">
325
+ <span class="pf-v6-c-input-group__text">%</span>
326
326
  </div>
327
327
  </div>
328
328
  </div>
@@ -333,13 +333,13 @@ cssPrefix: pf-v5-c-slider
333
333
  ### Thumb value input
334
334
 
335
335
  ```html
336
- <div class="pf-v5-c-slider" style="--pf-v5-c-slider--value: 50%;">
337
- <div class="pf-v5-c-slider__main">
338
- <div class="pf-v5-c-slider__rail">
339
- <div class="pf-v5-c-slider__rail-track"></div>
336
+ <div class="pf-v6-c-slider" style="--pf-v5-c-slider--value: 50%;">
337
+ <div class="pf-v6-c-slider__main">
338
+ <div class="pf-v6-c-slider__rail">
339
+ <div class="pf-v6-c-slider__rail-track"></div>
340
340
  </div>
341
341
  <div
342
- class="pf-v5-c-slider__thumb"
342
+ class="pf-v6-c-slider__thumb"
343
343
  role="slider"
344
344
  aria-valuemin="0"
345
345
  aria-valuemax="100"
@@ -347,15 +347,15 @@ cssPrefix: pf-v5-c-slider
347
347
  aria-label="Value"
348
348
  tabindex="0"
349
349
  ></div>
350
- <div class="pf-v5-c-slider__value pf-m-floating">
351
- <div class="pf-v5-c-input-group">
352
- <div class="pf-v5-c-input-group__item pf-m-fill">
353
- <span class="pf-v5-c-form-control">
350
+ <div class="pf-v6-c-slider__value pf-m-floating">
351
+ <div class="pf-v6-c-input-group">
352
+ <div class="pf-v6-c-input-group__item pf-m-fill">
353
+ <span class="pf-v6-c-form-control">
354
354
  <input type="number" value="50" aria-label="Slider value input" />
355
355
  </span>
356
356
  </div>
357
- <div class="pf-v5-c-input-group__item pf-m-box">
358
- <span class="pf-v5-c-input-group__text">%</span>
357
+ <div class="pf-v6-c-input-group__item pf-m-box">
358
+ <span class="pf-v6-c-input-group__text">%</span>
359
359
  </div>
360
360
  </div>
361
361
  </div>
@@ -367,18 +367,18 @@ cssPrefix: pf-v5-c-slider
367
367
  ### Actions
368
368
 
369
369
  ```html
370
- <div class="pf-v5-c-slider" style="--pf-v5-c-slider--value: 50%;">
371
- <div class="pf-v5-c-slider__actions">
372
- <button class="pf-v5-c-button pf-m-plain" type="button" aria-label="Minus">
370
+ <div class="pf-v6-c-slider" style="--pf-v5-c-slider--value: 50%;">
371
+ <div class="pf-v6-c-slider__actions">
372
+ <button class="pf-v6-c-button pf-m-plain" type="button" aria-label="Minus">
373
373
  <i class="fas fa-fw fa-minus" aria-hidden="true"></i>
374
374
  </button>
375
375
  </div>
376
- <div class="pf-v5-c-slider__main">
377
- <div class="pf-v5-c-slider__rail">
378
- <div class="pf-v5-c-slider__rail-track"></div>
376
+ <div class="pf-v6-c-slider__main">
377
+ <div class="pf-v6-c-slider__rail">
378
+ <div class="pf-v6-c-slider__rail-track"></div>
379
379
  </div>
380
380
  <div
381
- class="pf-v5-c-slider__thumb"
381
+ class="pf-v6-c-slider__thumb"
382
382
  role="slider"
383
383
  aria-valuemin="0"
384
384
  aria-valuemax="100"
@@ -387,8 +387,8 @@ cssPrefix: pf-v5-c-slider
387
387
  tabindex="0"
388
388
  ></div>
389
389
  </div>
390
- <div class="pf-v5-c-slider__actions">
391
- <button class="pf-v5-c-button pf-m-plain" type="button" aria-label="Plus">
390
+ <div class="pf-v6-c-slider__actions">
391
+ <button class="pf-v6-c-button pf-m-plain" type="button" aria-label="Plus">
392
392
  <i class="fas fa-fw fa-plus" aria-hidden="true"></i>
393
393
  </button>
394
394
  </div>
@@ -397,13 +397,13 @@ cssPrefix: pf-v5-c-slider
397
397
  <br />
398
398
  <br />
399
399
 
400
- <div class="pf-v5-c-slider" style="--pf-v5-c-slider--value: 50%;">
401
- <div class="pf-v5-c-slider__main">
402
- <div class="pf-v5-c-slider__rail">
403
- <div class="pf-v5-c-slider__rail-track"></div>
400
+ <div class="pf-v6-c-slider" style="--pf-v5-c-slider--value: 50%;">
401
+ <div class="pf-v6-c-slider__main">
402
+ <div class="pf-v6-c-slider__rail">
403
+ <div class="pf-v6-c-slider__rail-track"></div>
404
404
  </div>
405
405
  <div
406
- class="pf-v5-c-slider__thumb"
406
+ class="pf-v6-c-slider__thumb"
407
407
  role="slider"
408
408
  aria-valuemin="0"
409
409
  aria-valuemax="100"
@@ -411,10 +411,10 @@ cssPrefix: pf-v5-c-slider
411
411
  aria-label="Value"
412
412
  tabindex="0"
413
413
  ></div>
414
- <div class="pf-v5-c-slider__value pf-m-floating">
415
- <div class="pf-v5-c-input-group">
416
- <div class="pf-v5-c-input-group__item pf-m-fill">
417
- <span class="pf-v5-c-form-control pf-m-disabled">
414
+ <div class="pf-v6-c-slider__value pf-m-floating">
415
+ <div class="pf-v6-c-input-group">
416
+ <div class="pf-v6-c-input-group__item pf-m-fill">
417
+ <span class="pf-v6-c-form-control pf-m-disabled">
418
418
  <input
419
419
  disabled
420
420
  type="number"
@@ -423,14 +423,14 @@ cssPrefix: pf-v5-c-slider
423
423
  />
424
424
  </span>
425
425
  </div>
426
- <div class="pf-v5-c-input-group__item pf-m-box pf-m-disabled">
427
- <span class="pf-v5-c-input-group__text">%</span>
426
+ <div class="pf-v6-c-input-group__item pf-m-box pf-m-disabled">
427
+ <span class="pf-v6-c-input-group__text">%</span>
428
428
  </div>
429
429
  </div>
430
430
  </div>
431
431
  </div>
432
- <div class="pf-v5-c-slider__actions">
433
- <button class="pf-v5-c-button pf-m-plain" type="button" aria-label="Locked">
432
+ <div class="pf-v6-c-slider__actions">
433
+ <button class="pf-v6-c-button pf-m-plain" type="button" aria-label="Locked">
434
434
  <i class="fas fa-fw fa-lock" aria-hidden="true"></i>
435
435
  </button>
436
436
  </div>
@@ -439,13 +439,13 @@ cssPrefix: pf-v5-c-slider
439
439
  <br />
440
440
  <br />
441
441
 
442
- <div class="pf-v5-c-slider" style="--pf-v5-c-slider--value: 50%;">
443
- <div class="pf-v5-c-slider__main">
444
- <div class="pf-v5-c-slider__rail">
445
- <div class="pf-v5-c-slider__rail-track"></div>
442
+ <div class="pf-v6-c-slider" style="--pf-v5-c-slider--value: 50%;">
443
+ <div class="pf-v6-c-slider__main">
444
+ <div class="pf-v6-c-slider__rail">
445
+ <div class="pf-v6-c-slider__rail-track"></div>
446
446
  </div>
447
447
  <div
448
- class="pf-v5-c-slider__thumb"
448
+ class="pf-v6-c-slider__thumb"
449
449
  role="slider"
450
450
  aria-valuemin="0"
451
451
  aria-valuemax="100"
@@ -453,21 +453,21 @@ cssPrefix: pf-v5-c-slider
453
453
  aria-label="Value"
454
454
  tabindex="0"
455
455
  ></div>
456
- <div class="pf-v5-c-slider__value pf-m-floating">
457
- <div class="pf-v5-c-input-group">
458
- <div class="pf-v5-c-input-group__item pf-m-fill">
459
- <span class="pf-v5-c-form-control">
456
+ <div class="pf-v6-c-slider__value pf-m-floating">
457
+ <div class="pf-v6-c-input-group">
458
+ <div class="pf-v6-c-input-group__item pf-m-fill">
459
+ <span class="pf-v6-c-form-control">
460
460
  <input type="number" value="50" aria-label="Slider value input" />
461
461
  </span>
462
462
  </div>
463
- <div class="pf-v5-c-input-group__item pf-m-box">
464
- <span class="pf-v5-c-input-group__text">%</span>
463
+ <div class="pf-v6-c-input-group__item pf-m-box">
464
+ <span class="pf-v6-c-input-group__text">%</span>
465
465
  </div>
466
466
  </div>
467
467
  </div>
468
468
  </div>
469
- <div class="pf-v5-c-slider__actions">
470
- <button class="pf-v5-c-button pf-m-plain" type="button" aria-label="Lock">
469
+ <div class="pf-v6-c-slider__actions">
470
+ <button class="pf-v6-c-button pf-m-plain" type="button" aria-label="Lock">
471
471
  <i class="fas fa-fw fa-lock-open" aria-hidden="true"></i>
472
472
  </button>
473
473
  </div>
@@ -479,76 +479,76 @@ cssPrefix: pf-v5-c-slider
479
479
 
480
480
  ```html
481
481
  <div
482
- class="pf-v5-c-slider pf-m-disabled"
482
+ class="pf-v6-c-slider pf-m-disabled"
483
483
  style="--pf-v5-c-slider--value: 62.5%;"
484
484
  >
485
- <div class="pf-v5-c-slider__main">
486
- <div class="pf-v5-c-slider__rail">
487
- <div class="pf-v5-c-slider__rail-track"></div>
485
+ <div class="pf-v6-c-slider__main">
486
+ <div class="pf-v6-c-slider__rail">
487
+ <div class="pf-v6-c-slider__rail-track"></div>
488
488
  </div>
489
- <div class="pf-v5-c-slider__steps" aria-hidden="true">
489
+ <div class="pf-v6-c-slider__steps" aria-hidden="true">
490
490
  <div
491
- class="pf-v5-c-slider__step pf-m-active"
491
+ class="pf-v6-c-slider__step pf-m-active"
492
492
  style="--pf-v5-c-slider__step--Left: 0%;"
493
493
  >
494
- <div class="pf-v5-c-slider__step-tick"></div>
495
- <div class="pf-v5-c-slider__step-label">0</div>
494
+ <div class="pf-v6-c-slider__step-tick"></div>
495
+ <div class="pf-v6-c-slider__step-label">0</div>
496
496
  </div>
497
497
  <div
498
- class="pf-v5-c-slider__step pf-m-active"
498
+ class="pf-v6-c-slider__step pf-m-active"
499
499
  style="--pf-v5-c-slider__step--Left: 12.5%;"
500
500
  >
501
- <div class="pf-v5-c-slider__step-tick"></div>
501
+ <div class="pf-v6-c-slider__step-tick"></div>
502
502
  </div>
503
503
  <div
504
- class="pf-v5-c-slider__step pf-m-active"
504
+ class="pf-v6-c-slider__step pf-m-active"
505
505
  style="--pf-v5-c-slider__step--Left: 25%;"
506
506
  >
507
- <div class="pf-v5-c-slider__step-tick"></div>
508
- <div class="pf-v5-c-slider__step-label">2</div>
507
+ <div class="pf-v6-c-slider__step-tick"></div>
508
+ <div class="pf-v6-c-slider__step-label">2</div>
509
509
  </div>
510
510
  <div
511
- class="pf-v5-c-slider__step pf-m-active"
511
+ class="pf-v6-c-slider__step pf-m-active"
512
512
  style="--pf-v5-c-slider__step--Left: 37.5%;"
513
513
  >
514
- <div class="pf-v5-c-slider__step-tick"></div>
514
+ <div class="pf-v6-c-slider__step-tick"></div>
515
515
  </div>
516
516
  <div
517
- class="pf-v5-c-slider__step pf-m-active"
517
+ class="pf-v6-c-slider__step pf-m-active"
518
518
  style="--pf-v5-c-slider__step--Left: 50%;"
519
519
  >
520
- <div class="pf-v5-c-slider__step-tick"></div>
521
- <div class="pf-v5-c-slider__step-label">4</div>
520
+ <div class="pf-v6-c-slider__step-tick"></div>
521
+ <div class="pf-v6-c-slider__step-label">4</div>
522
522
  </div>
523
523
  <div
524
- class="pf-v5-c-slider__step pf-m-active"
524
+ class="pf-v6-c-slider__step pf-m-active"
525
525
  style="--pf-v5-c-slider__step--Left: 62.5%;"
526
526
  >
527
- <div class="pf-v5-c-slider__step-tick"></div>
527
+ <div class="pf-v6-c-slider__step-tick"></div>
528
528
  </div>
529
529
  <div
530
- class="pf-v5-c-slider__step"
530
+ class="pf-v6-c-slider__step"
531
531
  style="--pf-v5-c-slider__step--Left: 75%;"
532
532
  >
533
- <div class="pf-v5-c-slider__step-tick"></div>
534
- <div class="pf-v5-c-slider__step-label">6</div>
533
+ <div class="pf-v6-c-slider__step-tick"></div>
534
+ <div class="pf-v6-c-slider__step-label">6</div>
535
535
  </div>
536
536
  <div
537
- class="pf-v5-c-slider__step"
537
+ class="pf-v6-c-slider__step"
538
538
  style="--pf-v5-c-slider__step--Left: 87.5%;"
539
539
  >
540
- <div class="pf-v5-c-slider__step-tick"></div>
540
+ <div class="pf-v6-c-slider__step-tick"></div>
541
541
  </div>
542
542
  <div
543
- class="pf-v5-c-slider__step"
543
+ class="pf-v6-c-slider__step"
544
544
  style="--pf-v5-c-slider__step--Left: 100%;"
545
545
  >
546
- <div class="pf-v5-c-slider__step-tick"></div>
547
- <div class="pf-v5-c-slider__step-label">8</div>
546
+ <div class="pf-v6-c-slider__step-tick"></div>
547
+ <div class="pf-v6-c-slider__step-label">8</div>
548
548
  </div>
549
549
  </div>
550
550
  <div
551
- class="pf-v5-c-slider__thumb"
551
+ class="pf-v6-c-slider__thumb"
552
552
  role="slider"
553
553
  aria-valuemin="0"
554
554
  aria-valuemax="8"
@@ -562,48 +562,48 @@ cssPrefix: pf-v5-c-slider
562
562
  <br />
563
563
  <br />
564
564
 
565
- <div class="pf-v5-c-slider pf-m-disabled" style="--pf-v5-c-slider--value: 50%;">
566
- <div class="pf-v5-c-slider__main">
567
- <div class="pf-v5-c-slider__rail">
568
- <div class="pf-v5-c-slider__rail-track"></div>
565
+ <div class="pf-v6-c-slider pf-m-disabled" style="--pf-v5-c-slider--value: 50%;">
566
+ <div class="pf-v6-c-slider__main">
567
+ <div class="pf-v6-c-slider__rail">
568
+ <div class="pf-v6-c-slider__rail-track"></div>
569
569
  </div>
570
- <div class="pf-v5-c-slider__steps" aria-hidden="true">
570
+ <div class="pf-v6-c-slider__steps" aria-hidden="true">
571
571
  <div
572
- class="pf-v5-c-slider__step pf-m-active"
572
+ class="pf-v6-c-slider__step pf-m-active"
573
573
  style="--pf-v5-c-slider__step--Left: 0%;"
574
574
  >
575
- <div class="pf-v5-c-slider__step-tick"></div>
576
- <div class="pf-v5-c-slider__step-label">0%</div>
575
+ <div class="pf-v6-c-slider__step-tick"></div>
576
+ <div class="pf-v6-c-slider__step-label">0%</div>
577
577
  </div>
578
578
  <div
579
- class="pf-v5-c-slider__step pf-m-active"
579
+ class="pf-v6-c-slider__step pf-m-active"
580
580
  style="--pf-v5-c-slider__step--Left: 25%;"
581
581
  >
582
- <div class="pf-v5-c-slider__step-tick"></div>
582
+ <div class="pf-v6-c-slider__step-tick"></div>
583
583
  </div>
584
584
  <div
585
- class="pf-v5-c-slider__step pf-m-active"
585
+ class="pf-v6-c-slider__step pf-m-active"
586
586
  style="--pf-v5-c-slider__step--Left: 50%;"
587
587
  >
588
- <div class="pf-v5-c-slider__step-tick"></div>
589
- <div class="pf-v5-c-slider__step-label">50%</div>
588
+ <div class="pf-v6-c-slider__step-tick"></div>
589
+ <div class="pf-v6-c-slider__step-label">50%</div>
590
590
  </div>
591
591
  <div
592
- class="pf-v5-c-slider__step"
592
+ class="pf-v6-c-slider__step"
593
593
  style="--pf-v5-c-slider__step--Left: 75%;"
594
594
  >
595
- <div class="pf-v5-c-slider__step-tick"></div>
595
+ <div class="pf-v6-c-slider__step-tick"></div>
596
596
  </div>
597
597
  <div
598
- class="pf-v5-c-slider__step"
598
+ class="pf-v6-c-slider__step"
599
599
  style="--pf-v5-c-slider__step--Left: 100%;"
600
600
  >
601
- <div class="pf-v5-c-slider__step-tick"></div>
602
- <div class="pf-v5-c-slider__step-label">100%</div>
601
+ <div class="pf-v6-c-slider__step-tick"></div>
602
+ <div class="pf-v6-c-slider__step-label">100%</div>
603
603
  </div>
604
604
  </div>
605
605
  <div
606
- class="pf-v5-c-slider__thumb"
606
+ class="pf-v6-c-slider__thumb"
607
607
  role="slider"
608
608
  aria-valuemin="0"
609
609
  aria-valuemax="100"
@@ -612,10 +612,10 @@ cssPrefix: pf-v5-c-slider
612
612
  aria-disabled="true"
613
613
  ></div>
614
614
  </div>
615
- <div class="pf-v5-c-slider__value">
616
- <div class="pf-v5-c-input-group">
617
- <div class="pf-v5-c-input-group__item pf-m-fill">
618
- <span class="pf-v5-c-form-control pf-m-disabled">
615
+ <div class="pf-v6-c-slider__value">
616
+ <div class="pf-v6-c-input-group">
617
+ <div class="pf-v6-c-input-group__item pf-m-fill">
618
+ <span class="pf-v6-c-form-control pf-m-disabled">
619
619
  <input
620
620
  disabled
621
621
  type="number"
@@ -624,8 +624,8 @@ cssPrefix: pf-v5-c-slider
624
624
  />
625
625
  </span>
626
626
  </div>
627
- <div class="pf-v5-c-input-group__item pf-m-box pf-m-disabled">
628
- <span class="pf-v5-c-input-group__text">%</span>
627
+ <div class="pf-v6-c-input-group__item pf-m-box pf-m-disabled">
628
+ <span class="pf-v6-c-input-group__text">%</span>
629
629
  </div>
630
630
  </div>
631
631
  </div>