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

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 +1 -1
  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
@@ -9,11 +9,11 @@ cssPrefix: pf-v5-c-sidebar
9
9
  ### Basic
10
10
 
11
11
  ```html
12
- <div class="pf-v5-c-sidebar">
13
- <div class="pf-v5-c-sidebar__main">
14
- <div class="pf-v5-c-sidebar__panel">Sidebar panel</div>
15
- <div class="pf-v5-c-sidebar__content">
16
- <div class="pf-v5-c-content">
12
+ <div class="pf-v6-c-sidebar">
13
+ <div class="pf-v6-c-sidebar__main">
14
+ <div class="pf-v6-c-sidebar__panel">Sidebar panel</div>
15
+ <div class="pf-v6-c-sidebar__content">
16
+ <div class="pf-v6-c-content">
17
17
  <p>Default layout.</p>
18
18
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dapibus nulla id augue dictum commodo. Donec mollis arcu massa, sollicitudin venenatis est rutrum vitae. Integer pulvinar ligula at augue mollis, ac pulvinar arcu semper. Maecenas nisi lorem, malesuada ac lectus nec, porta pretium neque. Ut convallis libero sit amet metus mattis, vel facilisis lorem malesuada. Duis consectetur ante sit amet magna efficitur, a interdum leo vulputate.</p>
19
19
  <p>Praesent at odio nec sapien ultrices tincidunt in non mauris. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis consectetur nisl quis facilisis faucibus. Sed eu bibendum risus. Suspendisse porta euismod tortor, at elementum odio suscipit sed. Cras eget ultrices urna, ac feugiat lectus. Integer a pharetra velit, in imperdiet mi. Phasellus vel hendrerit velit. Vestibulum ut augue vitae erat vulputate bibendum a ut magna.</p>
@@ -27,11 +27,11 @@ cssPrefix: pf-v5-c-sidebar
27
27
  ### With secondary background
28
28
 
29
29
  ```html
30
- <div class="pf-v5-c-sidebar">
31
- <div class="pf-v5-c-sidebar__main">
32
- <div class="pf-v5-c-sidebar__panel pf-m-secondary">Sidebar panel</div>
33
- <div class="pf-v5-c-sidebar__content pf-m-secondary">
34
- <div class="pf-v5-c-content">
30
+ <div class="pf-v6-c-sidebar">
31
+ <div class="pf-v6-c-sidebar__main">
32
+ <div class="pf-v6-c-sidebar__panel pf-m-secondary">Sidebar panel</div>
33
+ <div class="pf-v6-c-sidebar__content pf-m-secondary">
34
+ <div class="pf-v6-c-content">
35
35
  <p>Default layout.</p>
36
36
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dapibus nulla id augue dictum commodo. Donec mollis arcu massa, sollicitudin venenatis est rutrum vitae. Integer pulvinar ligula at augue mollis, ac pulvinar arcu semper. Maecenas nisi lorem, malesuada ac lectus nec, porta pretium neque. Ut convallis libero sit amet metus mattis, vel facilisis lorem malesuada. Duis consectetur ante sit amet magna efficitur, a interdum leo vulputate.</p>
37
37
  <p>Praesent at odio nec sapien ultrices tincidunt in non mauris. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis consectetur nisl quis facilisis faucibus. Sed eu bibendum risus. Suspendisse porta euismod tortor, at elementum odio suscipit sed. Cras eget ultrices urna, ac feugiat lectus. Integer a pharetra velit, in imperdiet mi. Phasellus vel hendrerit velit. Vestibulum ut augue vitae erat vulputate bibendum a ut magna.</p>
@@ -45,13 +45,13 @@ cssPrefix: pf-v5-c-sidebar
45
45
  ### Gutter
46
46
 
47
47
  ```html
48
- <div class="pf-v5-c-sidebar pf-m-gutter">
49
- <div class="pf-v5-c-sidebar__main">
48
+ <div class="pf-v6-c-sidebar pf-m-gutter">
49
+ <div class="pf-v6-c-sidebar__main">
50
50
  <div
51
- class="pf-v5-c-sidebar__panel"
51
+ class="pf-v6-c-sidebar__panel"
52
52
  >Sidebar panel. Adding some extra content so that the gap between the panel and content area is better illustrated in this example.</div>
53
- <div class="pf-v5-c-sidebar__content">
54
- <div class="pf-v5-c-content">
53
+ <div class="pf-v6-c-sidebar__content">
54
+ <div class="pf-v6-c-content">
55
55
  <p>Adds a gutter between the panel and content when in the split layout.</p>
56
56
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dapibus nulla id augue dictum commodo. Donec mollis arcu massa, sollicitudin venenatis est rutrum vitae. Integer pulvinar ligula at augue mollis, ac pulvinar arcu semper. Maecenas nisi lorem, malesuada ac lectus nec, porta pretium neque. Ut convallis libero sit amet metus mattis, vel facilisis lorem malesuada. Duis consectetur ante sit amet magna efficitur, a interdum leo vulputate.</p>
57
57
  <p>Praesent at odio nec sapien ultrices tincidunt in non mauris. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis consectetur nisl quis facilisis faucibus. Sed eu bibendum risus. Suspendisse porta euismod tortor, at elementum odio suscipit sed. Cras eget ultrices urna, ac feugiat lectus. Integer a pharetra velit, in imperdiet mi. Phasellus vel hendrerit velit. Vestibulum ut augue vitae erat vulputate bibendum a ut magna.</p>
@@ -65,11 +65,11 @@ cssPrefix: pf-v5-c-sidebar
65
65
  ### Stack
66
66
 
67
67
  ```html
68
- <div class="pf-v5-c-sidebar pf-m-stack">
69
- <div class="pf-v5-c-sidebar__main">
70
- <div class="pf-v5-c-sidebar__panel">Sidebar panel</div>
71
- <div class="pf-v5-c-sidebar__content">
72
- <div class="pf-v5-c-content">
68
+ <div class="pf-v6-c-sidebar pf-m-stack">
69
+ <div class="pf-v6-c-sidebar__main">
70
+ <div class="pf-v6-c-sidebar__panel">Sidebar panel</div>
71
+ <div class="pf-v6-c-sidebar__content">
72
+ <div class="pf-v6-c-content">
73
73
  <p>Forces a stacked layout.</p>
74
74
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dapibus nulla id augue dictum commodo. Donec mollis arcu massa, sollicitudin venenatis est rutrum vitae. Integer pulvinar ligula at augue mollis, ac pulvinar arcu semper. Maecenas nisi lorem, malesuada ac lectus nec, porta pretium neque. Ut convallis libero sit amet metus mattis, vel facilisis lorem malesuada. Duis consectetur ante sit amet magna efficitur, a interdum leo vulputate.</p>
75
75
  <p>Praesent at odio nec sapien ultrices tincidunt in non mauris. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis consectetur nisl quis facilisis faucibus. Sed eu bibendum risus. Suspendisse porta euismod tortor, at elementum odio suscipit sed. Cras eget ultrices urna, ac feugiat lectus. Integer a pharetra velit, in imperdiet mi. Phasellus vel hendrerit velit. Vestibulum ut augue vitae erat vulputate bibendum a ut magna.</p>
@@ -83,11 +83,11 @@ cssPrefix: pf-v5-c-sidebar
83
83
  ### Split
84
84
 
85
85
  ```html
86
- <div class="pf-v5-c-sidebar pf-m-split">
87
- <div class="pf-v5-c-sidebar__main">
88
- <div class="pf-v5-c-sidebar__panel">Sidebar panel</div>
89
- <div class="pf-v5-c-sidebar__content">
90
- <div class="pf-v5-c-content">
86
+ <div class="pf-v6-c-sidebar pf-m-split">
87
+ <div class="pf-v6-c-sidebar__main">
88
+ <div class="pf-v6-c-sidebar__panel">Sidebar panel</div>
89
+ <div class="pf-v6-c-sidebar__content">
90
+ <div class="pf-v6-c-content">
91
91
  <p>Forces a split layout.</p>
92
92
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dapibus nulla id augue dictum commodo. Donec mollis arcu massa, sollicitudin venenatis est rutrum vitae. Integer pulvinar ligula at augue mollis, ac pulvinar arcu semper. Maecenas nisi lorem, malesuada ac lectus nec, porta pretium neque. Ut convallis libero sit amet metus mattis, vel facilisis lorem malesuada. Duis consectetur ante sit amet magna efficitur, a interdum leo vulputate.</p>
93
93
  <p>Praesent at odio nec sapien ultrices tincidunt in non mauris. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis consectetur nisl quis facilisis faucibus. Sed eu bibendum risus. Suspendisse porta euismod tortor, at elementum odio suscipit sed. Cras eget ultrices urna, ac feugiat lectus. Integer a pharetra velit, in imperdiet mi. Phasellus vel hendrerit velit. Vestibulum ut augue vitae erat vulputate bibendum a ut magna.</p>
@@ -101,16 +101,16 @@ cssPrefix: pf-v5-c-sidebar
101
101
  ### Panel right (HTML)
102
102
 
103
103
  ```html
104
- <div class="pf-v5-c-sidebar">
105
- <div class="pf-v5-c-sidebar__main">
106
- <div class="pf-v5-c-sidebar__content">
107
- <div class="pf-v5-c-content">
104
+ <div class="pf-v6-c-sidebar">
105
+ <div class="pf-v6-c-sidebar__main">
106
+ <div class="pf-v6-c-sidebar__content">
107
+ <div class="pf-v6-c-content">
108
108
  <p>Moves the panel to the right by placing the panel after the content in the HTML.</p>
109
109
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dapibus nulla id augue dictum commodo. Donec mollis arcu massa, sollicitudin venenatis est rutrum vitae. Integer pulvinar ligula at augue mollis, ac pulvinar arcu semper. Maecenas nisi lorem, malesuada ac lectus nec, porta pretium neque. Ut convallis libero sit amet metus mattis, vel facilisis lorem malesuada. Duis consectetur ante sit amet magna efficitur, a interdum leo vulputate.</p>
110
110
  <p>Praesent at odio nec sapien ultrices tincidunt in non mauris. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis consectetur nisl quis facilisis faucibus. Sed eu bibendum risus. Suspendisse porta euismod tortor, at elementum odio suscipit sed. Cras eget ultrices urna, ac feugiat lectus. Integer a pharetra velit, in imperdiet mi. Phasellus vel hendrerit velit. Vestibulum ut augue vitae erat vulputate bibendum a ut magna.</p>
111
111
  </div>
112
112
  </div>
113
- <div class="pf-v5-c-sidebar__panel">Sidebar panel</div>
113
+ <div class="pf-v6-c-sidebar__panel">Sidebar panel</div>
114
114
  </div>
115
115
  </div>
116
116
 
@@ -119,11 +119,11 @@ cssPrefix: pf-v5-c-sidebar
119
119
  ### Panel right (modifier)
120
120
 
121
121
  ```html
122
- <div class="pf-v5-c-sidebar pf-m-panel-right">
123
- <div class="pf-v5-c-sidebar__main">
124
- <div class="pf-v5-c-sidebar__panel">Sidebar panel</div>
125
- <div class="pf-v5-c-sidebar__content">
126
- <div class="pf-v5-c-content">
122
+ <div class="pf-v6-c-sidebar pf-m-panel-right">
123
+ <div class="pf-v6-c-sidebar__main">
124
+ <div class="pf-v6-c-sidebar__panel">Sidebar panel</div>
125
+ <div class="pf-v6-c-sidebar__content">
126
+ <div class="pf-v6-c-content">
127
127
  <p>
128
128
  Moves the panel to the right via the modifier class
129
129
  <b>.pf-m-panel-right</b>&nbsp;on the sidebar component.
@@ -140,11 +140,11 @@ cssPrefix: pf-v5-c-sidebar
140
140
  ### Sticky panel
141
141
 
142
142
  ```html
143
- <div class="pf-v5-c-sidebar">
144
- <div class="pf-v5-c-sidebar__main">
145
- <div class="pf-v5-c-sidebar__panel pf-m-sticky">Sidebar panel</div>
146
- <div class="pf-v5-c-sidebar__content">
147
- <div class="pf-v5-c-content">
143
+ <div class="pf-v6-c-sidebar">
144
+ <div class="pf-v6-c-sidebar__main">
145
+ <div class="pf-v6-c-sidebar__panel pf-m-sticky">Sidebar panel</div>
146
+ <div class="pf-v6-c-sidebar__content">
147
+ <div class="pf-v6-c-content">
148
148
  <p>Forces the panel to be sticky to the top of the layout.</p>
149
149
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dapibus nulla id augue dictum commodo. Donec mollis arcu massa, sollicitudin venenatis est rutrum vitae. Integer pulvinar ligula at augue mollis, ac pulvinar arcu semper. Maecenas nisi lorem, malesuada ac lectus nec, porta pretium neque. Ut convallis libero sit amet metus mattis, vel facilisis lorem malesuada. Duis consectetur ante sit amet magna efficitur, a interdum leo vulputate.</p>
150
150
  <p>Praesent at odio nec sapien ultrices tincidunt in non mauris. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis consectetur nisl quis facilisis faucibus. Sed eu bibendum risus. Suspendisse porta euismod tortor, at elementum odio suscipit sed. Cras eget ultrices urna, ac feugiat lectus. Integer a pharetra velit, in imperdiet mi. Phasellus vel hendrerit velit. Vestibulum ut augue vitae erat vulputate bibendum a ut magna.</p>
@@ -158,11 +158,11 @@ cssPrefix: pf-v5-c-sidebar
158
158
  ### Static panel
159
159
 
160
160
  ```html
161
- <div class="pf-v5-c-sidebar">
162
- <div class="pf-v5-c-sidebar__main">
163
- <div class="pf-v5-c-sidebar__panel pf-m-static">Sidebar panel</div>
164
- <div class="pf-v5-c-sidebar__content">
165
- <div class="pf-v5-c-content">
161
+ <div class="pf-v6-c-sidebar">
162
+ <div class="pf-v6-c-sidebar__main">
163
+ <div class="pf-v6-c-sidebar__panel pf-m-static">Sidebar panel</div>
164
+ <div class="pf-v6-c-sidebar__content">
165
+ <div class="pf-v6-c-content">
166
166
  <p>Forces the panel to be statically positioned (not sticky).</p>
167
167
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dapibus nulla id augue dictum commodo. Donec mollis arcu massa, sollicitudin venenatis est rutrum vitae. Integer pulvinar ligula at augue mollis, ac pulvinar arcu semper. Maecenas nisi lorem, malesuada ac lectus nec, porta pretium neque. Ut convallis libero sit amet metus mattis, vel facilisis lorem malesuada. Duis consectetur ante sit amet magna efficitur, a interdum leo vulputate.</p>
168
168
  <p>Praesent at odio nec sapien ultrices tincidunt in non mauris. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis consectetur nisl quis facilisis faucibus. Sed eu bibendum risus. Suspendisse porta euismod tortor, at elementum odio suscipit sed. Cras eget ultrices urna, ac feugiat lectus. Integer a pharetra velit, in imperdiet mi. Phasellus vel hendrerit velit. Vestibulum ut augue vitae erat vulputate bibendum a ut magna.</p>
@@ -176,13 +176,13 @@ cssPrefix: pf-v5-c-sidebar
176
176
  ### Responsive panel width
177
177
 
178
178
  ```html
179
- <div class="pf-v5-c-sidebar">
180
- <div class="pf-v5-c-sidebar__main">
179
+ <div class="pf-v6-c-sidebar">
180
+ <div class="pf-v6-c-sidebar__main">
181
181
  <div
182
- class="pf-v5-c-sidebar__panel pf-m-sticky pf-m-width-50 pf-m-width-33-on-lg pf-m-width-75-on-xl"
182
+ class="pf-v6-c-sidebar__panel pf-m-sticky pf-m-width-50 pf-m-width-33-on-lg pf-m-width-75-on-xl"
183
183
  >Sidebar panel</div>
184
- <div class="pf-v5-c-sidebar__content">
185
- <div class="pf-v5-c-content">
184
+ <div class="pf-v6-c-sidebar__content">
185
+ <div class="pf-v6-c-content">
186
186
  <p>Changes the panel with and can change responsively at different breakpoints.</p>
187
187
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dapibus nulla id augue dictum commodo. Donec mollis arcu massa, sollicitudin venenatis est rutrum vitae. Integer pulvinar ligula at augue mollis, ac pulvinar arcu semper. Maecenas nisi lorem, malesuada ac lectus nec, porta pretium neque. Ut convallis libero sit amet metus mattis, vel facilisis lorem malesuada. Duis consectetur ante sit amet magna efficitur, a interdum leo vulputate.</p>
188
188
  <p>Praesent at odio nec sapien ultrices tincidunt in non mauris. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis consectetur nisl quis facilisis faucibus. Sed eu bibendum risus. Suspendisse porta euismod tortor, at elementum odio suscipit sed. Cras eget ultrices urna, ac feugiat lectus. Integer a pharetra velit, in imperdiet mi. Phasellus vel hendrerit velit. Vestibulum ut augue vitae erat vulputate bibendum a ut magna.</p>
@@ -196,11 +196,11 @@ cssPrefix: pf-v5-c-sidebar
196
196
  ### Border
197
197
 
198
198
  ```html
199
- <div class="pf-v5-c-sidebar pf-m-gutter">
200
- <div class="pf-v5-c-sidebar__main pf-m-border">
201
- <div class="pf-v5-c-sidebar__panel">Sidebar panel</div>
202
- <div class="pf-v5-c-sidebar__content">
203
- <div class="pf-v5-c-content">
199
+ <div class="pf-v6-c-sidebar pf-m-gutter">
200
+ <div class="pf-v6-c-sidebar__main pf-m-border">
201
+ <div class="pf-v6-c-sidebar__panel">Sidebar panel</div>
202
+ <div class="pf-v6-c-sidebar__content">
203
+ <div class="pf-v6-c-content">
204
204
  <p>Default layout.</p>
205
205
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dapibus nulla id augue dictum commodo. Donec mollis arcu massa, sollicitudin venenatis est rutrum vitae. Integer pulvinar ligula at augue mollis, ac pulvinar arcu semper. Maecenas nisi lorem, malesuada ac lectus nec, porta pretium neque. Ut convallis libero sit amet metus mattis, vel facilisis lorem malesuada. Duis consectetur ante sit amet magna efficitur, a interdum leo vulputate.</p>
206
206
  <p>Praesent at odio nec sapien ultrices tincidunt in non mauris. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis consectetur nisl quis facilisis faucibus. Sed eu bibendum risus. Suspendisse porta euismod tortor, at elementum odio suscipit sed. Cras eget ultrices urna, ac feugiat lectus. Integer a pharetra velit, in imperdiet mi. Phasellus vel hendrerit velit. Vestibulum ut augue vitae erat vulputate bibendum a ut magna.</p>
@@ -214,11 +214,11 @@ cssPrefix: pf-v5-c-sidebar
214
214
  ### Padding on panel
215
215
 
216
216
  ```html
217
- <div class="pf-v5-c-sidebar">
218
- <div class="pf-v5-c-sidebar__main">
219
- <div class="pf-v5-c-sidebar__panel pf-m-padding">Sidebar panel, with padding</div>
220
- <div class="pf-v5-c-sidebar__content">
221
- <div class="pf-v5-c-content">
217
+ <div class="pf-v6-c-sidebar">
218
+ <div class="pf-v6-c-sidebar__main">
219
+ <div class="pf-v6-c-sidebar__panel pf-m-padding">Sidebar panel, with padding</div>
220
+ <div class="pf-v6-c-sidebar__content">
221
+ <div class="pf-v6-c-content">
222
222
  <p>Default layout.</p>
223
223
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dapibus nulla id augue dictum commodo. Donec mollis arcu massa, sollicitudin venenatis est rutrum vitae. Integer pulvinar ligula at augue mollis, ac pulvinar arcu semper. Maecenas nisi lorem, malesuada ac lectus nec, porta pretium neque. Ut convallis libero sit amet metus mattis, vel facilisis lorem malesuada. Duis consectetur ante sit amet magna efficitur, a interdum leo vulputate.</p>
224
224
  <p>Praesent at odio nec sapien ultrices tincidunt in non mauris. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis consectetur nisl quis facilisis faucibus. Sed eu bibendum risus. Suspendisse porta euismod tortor, at elementum odio suscipit sed. Cras eget ultrices urna, ac feugiat lectus. Integer a pharetra velit, in imperdiet mi. Phasellus vel hendrerit velit. Vestibulum ut augue vitae erat vulputate bibendum a ut magna.</p>
@@ -232,11 +232,11 @@ cssPrefix: pf-v5-c-sidebar
232
232
  ### Padding on content
233
233
 
234
234
  ```html
235
- <div class="pf-v5-c-sidebar">
236
- <div class="pf-v5-c-sidebar__main">
237
- <div class="pf-v5-c-sidebar__panel">Sidebar panel</div>
238
- <div class="pf-v5-c-sidebar__content pf-m-padding">
239
- <div class="pf-v5-c-content">
235
+ <div class="pf-v6-c-sidebar">
236
+ <div class="pf-v6-c-sidebar__main">
237
+ <div class="pf-v6-c-sidebar__panel">Sidebar panel</div>
238
+ <div class="pf-v6-c-sidebar__content pf-m-padding">
239
+ <div class="pf-v6-c-content">
240
240
  <p>Sidebar content, with padding</p>
241
241
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dapibus nulla id augue dictum commodo. Donec mollis arcu massa, sollicitudin venenatis est rutrum vitae. Integer pulvinar ligula at augue mollis, ac pulvinar arcu semper. Maecenas nisi lorem, malesuada ac lectus nec, porta pretium neque. Ut convallis libero sit amet metus mattis, vel facilisis lorem malesuada. Duis consectetur ante sit amet magna efficitur, a interdum leo vulputate.</p>
242
242
  <p>Praesent at odio nec sapien ultrices tincidunt in non mauris. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis consectetur nisl quis facilisis faucibus. Sed eu bibendum risus. Suspendisse porta euismod tortor, at elementum odio suscipit sed. Cras eget ultrices urna, ac feugiat lectus. Integer a pharetra velit, in imperdiet mi. Phasellus vel hendrerit velit. Vestibulum ut augue vitae erat vulputate bibendum a ut magna.</p>
@@ -7,19 +7,19 @@ cssPrefix: pf-v5-c-simple-list
7
7
  ### Simple list
8
8
 
9
9
  ```html
10
- <div class="pf-v5-c-simple-list">
11
- <ul class="pf-v5-c-simple-list__list" role="list">
12
- <li class="pf-v5-c-simple-list__item">
10
+ <div class="pf-v6-c-simple-list">
11
+ <ul class="pf-v6-c-simple-list__list" role="list">
12
+ <li class="pf-v6-c-simple-list__item">
13
13
  <button
14
- class="pf-v5-c-simple-list__item-link pf-m-current"
14
+ class="pf-v6-c-simple-list__item-link pf-m-current"
15
15
  type="button"
16
16
  >List item 1</button>
17
17
  </li>
18
- <li class="pf-v5-c-simple-list__item">
19
- <button class="pf-v5-c-simple-list__item-link" type="button">List item 2</button>
18
+ <li class="pf-v6-c-simple-list__item">
19
+ <button class="pf-v6-c-simple-list__item-link" type="button">List item 2</button>
20
20
  </li>
21
- <li class="pf-v5-c-simple-list__item">
22
- <button class="pf-v5-c-simple-list__item-link" type="button">List item 3</button>
21
+ <li class="pf-v6-c-simple-list__item">
22
+ <button class="pf-v6-c-simple-list__item-link" type="button">List item 3</button>
23
23
  </li>
24
24
  </ul>
25
25
  </div>
@@ -29,25 +29,25 @@ cssPrefix: pf-v5-c-simple-list
29
29
  ### Simple list with links
30
30
 
31
31
  ```html
32
- <div class="pf-v5-c-simple-list">
33
- <ul class="pf-v5-c-simple-list__list" role="list">
34
- <li class="pf-v5-c-simple-list__item">
32
+ <div class="pf-v6-c-simple-list">
33
+ <ul class="pf-v6-c-simple-list__list" role="list">
34
+ <li class="pf-v6-c-simple-list__item">
35
35
  <a
36
- class="pf-v5-c-simple-list__item-link pf-m-link pf-m-current"
36
+ class="pf-v6-c-simple-list__item-link pf-m-link pf-m-current"
37
37
  href="#"
38
38
  tabindex="0"
39
39
  >List item 1</a>
40
40
  </li>
41
- <li class="pf-v5-c-simple-list__item">
41
+ <li class="pf-v6-c-simple-list__item">
42
42
  <a
43
- class="pf-v5-c-simple-list__item-link pf-m-link"
43
+ class="pf-v6-c-simple-list__item-link pf-m-link"
44
44
  href="#"
45
45
  tabindex="0"
46
46
  >List item 2</a>
47
47
  </li>
48
- <li class="pf-v5-c-simple-list__item">
48
+ <li class="pf-v6-c-simple-list__item">
49
49
  <a
50
- class="pf-v5-c-simple-list__item-link pf-m-link"
50
+ class="pf-v6-c-simple-list__item-link pf-m-link"
51
51
  href="#"
52
52
  tabindex="0"
53
53
  >List item 3</a>
@@ -60,41 +60,41 @@ cssPrefix: pf-v5-c-simple-list
60
60
  ### Grouped list
61
61
 
62
62
  ```html
63
- <div class="pf-v5-c-simple-list">
64
- <section class="pf-v5-c-simple-list__section">
65
- <h2 class="pf-v5-c-simple-list__title">Title</h2>
66
- <ul class="pf-v5-c-simple-list__list" role="list">
67
- <li class="pf-v5-c-simple-list__item">
63
+ <div class="pf-v6-c-simple-list">
64
+ <section class="pf-v6-c-simple-list__section">
65
+ <h2 class="pf-v6-c-simple-list__title">Title</h2>
66
+ <ul class="pf-v6-c-simple-list__list" role="list">
67
+ <li class="pf-v6-c-simple-list__item">
68
68
  <button
69
- class="pf-v5-c-simple-list__item-link pf-m-current"
69
+ class="pf-v6-c-simple-list__item-link pf-m-current"
70
70
  type="button"
71
71
  >List item 1</button>
72
72
  </li>
73
- <li class="pf-v5-c-simple-list__item">
74
- <button class="pf-v5-c-simple-list__item-link" type="button">List item 2</button>
73
+ <li class="pf-v6-c-simple-list__item">
74
+ <button class="pf-v6-c-simple-list__item-link" type="button">List item 2</button>
75
75
  </li>
76
- <li class="pf-v5-c-simple-list__item">
77
- <button class="pf-v5-c-simple-list__item-link" type="button">List item 3</button>
76
+ <li class="pf-v6-c-simple-list__item">
77
+ <button class="pf-v6-c-simple-list__item-link" type="button">List item 3</button>
78
78
  </li>
79
- <li class="pf-v5-c-simple-list__item">
80
- <button class="pf-v5-c-simple-list__item-link" type="button">List item 4</button>
79
+ <li class="pf-v6-c-simple-list__item">
80
+ <button class="pf-v6-c-simple-list__item-link" type="button">List item 4</button>
81
81
  </li>
82
82
  </ul>
83
83
  </section>
84
- <section class="pf-v5-c-simple-list__section">
85
- <h2 class="pf-v5-c-simple-list__title">Title</h2>
86
- <ul class="pf-v5-c-simple-list__list" role="list">
87
- <li class="pf-v5-c-simple-list__item">
88
- <button class="pf-v5-c-simple-list__item-link" type="button">List item 1</button>
84
+ <section class="pf-v6-c-simple-list__section">
85
+ <h2 class="pf-v6-c-simple-list__title">Title</h2>
86
+ <ul class="pf-v6-c-simple-list__list" role="list">
87
+ <li class="pf-v6-c-simple-list__item">
88
+ <button class="pf-v6-c-simple-list__item-link" type="button">List item 1</button>
89
89
  </li>
90
- <li class="pf-v5-c-simple-list__item">
91
- <button class="pf-v5-c-simple-list__item-link" type="button">List item 2</button>
90
+ <li class="pf-v6-c-simple-list__item">
91
+ <button class="pf-v6-c-simple-list__item-link" type="button">List item 2</button>
92
92
  </li>
93
- <li class="pf-v5-c-simple-list__item">
94
- <button class="pf-v5-c-simple-list__item-link" type="button">List item 3</button>
93
+ <li class="pf-v6-c-simple-list__item">
94
+ <button class="pf-v6-c-simple-list__item-link" type="button">List item 3</button>
95
95
  </li>
96
- <li class="pf-v5-c-simple-list__item">
97
- <button class="pf-v5-c-simple-list__item-link" type="button">List item 4</button>
96
+ <li class="pf-v6-c-simple-list__item">
97
+ <button class="pf-v6-c-simple-list__item-link" type="button">List item 4</button>
98
98
  </li>
99
99
  </ul>
100
100
  </section>
@@ -9,36 +9,36 @@ cssPrefix: pf-v5-c-skeleton
9
9
  ### Default
10
10
 
11
11
  ```html
12
- <div class="pf-v5-c-skeleton"></div>
12
+ <div class="pf-v6-c-skeleton"></div>
13
13
 
14
14
  ```
15
15
 
16
16
  ### Percentage width modifiers
17
17
 
18
18
  ```html
19
- <div class="pf-v5-c-skeleton pf-m-width-25"></div>
19
+ <div class="pf-v6-c-skeleton pf-m-width-25"></div>
20
20
  <br />
21
- <div class="pf-v5-c-skeleton pf-m-width-33"></div>
21
+ <div class="pf-v6-c-skeleton pf-m-width-33"></div>
22
22
  <br />
23
- <div class="pf-v5-c-skeleton pf-m-width-50"></div>
23
+ <div class="pf-v6-c-skeleton pf-m-width-50"></div>
24
24
  <br />
25
- <div class="pf-v5-c-skeleton pf-m-width-66"></div>
25
+ <div class="pf-v6-c-skeleton pf-m-width-66"></div>
26
26
  <br />
27
- <div class="pf-v5-c-skeleton pf-m-width-75"></div>
27
+ <div class="pf-v6-c-skeleton pf-m-width-75"></div>
28
28
  <br />
29
- <div class="pf-v5-c-skeleton"></div>
29
+ <div class="pf-v6-c-skeleton"></div>
30
30
 
31
31
  ```
32
32
 
33
33
  ### Percentage height modifiers
34
34
 
35
35
  ```html
36
- <div class="pf-v5-c-skeleton pf-m-height-25"></div>
37
- <div class="pf-v5-c-skeleton pf-m-height-33"></div>
38
- <div class="pf-v5-c-skeleton pf-m-height-50"></div>
39
- <div class="pf-v5-c-skeleton pf-m-height-66"></div>
40
- <div class="pf-v5-c-skeleton pf-m-height-75"></div>
41
- <div class="pf-v5-c-skeleton pf-m-height-100"></div>
36
+ <div class="pf-v6-c-skeleton pf-m-height-25"></div>
37
+ <div class="pf-v6-c-skeleton pf-m-height-33"></div>
38
+ <div class="pf-v6-c-skeleton pf-m-height-50"></div>
39
+ <div class="pf-v6-c-skeleton pf-m-height-66"></div>
40
+ <div class="pf-v6-c-skeleton pf-m-height-75"></div>
41
+ <div class="pf-v6-c-skeleton pf-m-height-100"></div>
42
42
 
43
43
  ```
44
44
 
@@ -46,19 +46,19 @@ cssPrefix: pf-v5-c-skeleton
46
46
 
47
47
  ```html
48
48
  --pf-v5-global--FontSize--4xl
49
- <div class="pf-v5-c-skeleton pf-m-text-4xl"></div>
49
+ <div class="pf-v6-c-skeleton pf-m-text-4xl"></div>
50
50
  <br />--pf-v5-global--FontSize--3xl
51
- <div class="pf-v5-c-skeleton pf-m-text-3xl"></div>
51
+ <div class="pf-v6-c-skeleton pf-m-text-3xl"></div>
52
52
  <br />--pf-v5-global--FontSize--2xl
53
- <div class="pf-v5-c-skeleton pf-m-text-2xl"></div>
53
+ <div class="pf-v6-c-skeleton pf-m-text-2xl"></div>
54
54
  <br />--pf-v5-global--FontSize--xl
55
- <div class="pf-v5-c-skeleton pf-m-text-xl"></div>
55
+ <div class="pf-v6-c-skeleton pf-m-text-xl"></div>
56
56
  <br />--pf-v5-global--FontSize--lg
57
- <div class="pf-v5-c-skeleton pf-m-text-lg"></div>
57
+ <div class="pf-v6-c-skeleton pf-m-text-lg"></div>
58
58
  <br />--pf-v5-global--FontSize--md
59
- <div class="pf-v5-c-skeleton pf-m-text-md"></div>
59
+ <div class="pf-v6-c-skeleton pf-m-text-md"></div>
60
60
  <br />--pf-v5-global--FontSize--sm
61
- <div class="pf-v5-c-skeleton pf-m-text-sm"></div>
61
+ <div class="pf-v6-c-skeleton pf-m-text-sm"></div>
62
62
 
63
63
  ```
64
64
 
@@ -66,23 +66,23 @@ cssPrefix: pf-v5-c-skeleton
66
66
 
67
67
  ```html
68
68
  Small circle
69
- <div class="pf-v5-c-skeleton pf-m-circle pf-m-width-sm"></div>
69
+ <div class="pf-v6-c-skeleton pf-m-circle pf-m-width-sm"></div>
70
70
  <br />Medium circle
71
- <div class="pf-v5-c-skeleton pf-m-circle pf-m-width-md"></div>
71
+ <div class="pf-v6-c-skeleton pf-m-circle pf-m-width-md"></div>
72
72
  <br />Large circle
73
- <div class="pf-v5-c-skeleton pf-m-circle pf-m-width-lg"></div>
73
+ <div class="pf-v6-c-skeleton pf-m-circle pf-m-width-lg"></div>
74
74
  <br />Small square
75
- <div class="pf-v5-c-skeleton pf-m-square pf-m-width-sm"></div>
75
+ <div class="pf-v6-c-skeleton pf-m-square pf-m-width-sm"></div>
76
76
  <br />Medium square
77
- <div class="pf-v5-c-skeleton pf-m-square pf-m-width-md"></div>
77
+ <div class="pf-v6-c-skeleton pf-m-square pf-m-width-md"></div>
78
78
  <br />Large square
79
- <div class="pf-v5-c-skeleton pf-m-square pf-m-width-lg"></div>
79
+ <div class="pf-v6-c-skeleton pf-m-square pf-m-width-lg"></div>
80
80
  <br />Small rectangle
81
- <div class="pf-v5-c-skeleton pf-m-height-sm pf-m-width-md"></div>
81
+ <div class="pf-v6-c-skeleton pf-m-height-sm pf-m-width-md"></div>
82
82
  <br />Medium rectangle
83
- <div class="pf-v5-c-skeleton pf-m-height-md pf-m-width-lg"></div>
83
+ <div class="pf-v6-c-skeleton pf-m-height-md pf-m-width-lg"></div>
84
84
  <br />Large rectangle
85
- <div class="pf-v5-c-skeleton pf-m-height-lg"></div>
85
+ <div class="pf-v6-c-skeleton pf-m-height-lg"></div>
86
86
 
87
87
  ```
88
88
 
@@ -7,11 +7,11 @@ cssPrefix: pf-v5-c-skip-to-content
7
7
  ### Basic
8
8
 
9
9
  ```html isFullscreen
10
- <div class="pf-v5-c-skip-to-content">
11
- <a class="pf-v5-c-button pf-m-primary" href="#main-content">Skip to content</a>
10
+ <div class="pf-v6-c-skip-to-content">
11
+ <a class="pf-v6-c-button pf-m-primary" href="#main-content">Skip to content</a>
12
12
  </div>Press tab to skip to content at the bottom of the page.
13
13
  <div style="height:2000px"></div>
14
- <div class="pf-v5-c-content">
14
+ <div class="pf-v6-c-content">
15
15
  <h1 id="main-content">Main content</h1>
16
16
  <p>
17
17
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius