@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/layouts/Flex/examples/Flex.md CHANGED
@@ -41,11 +41,11 @@ The flex layout provides two ways of spacing its direct children.
41
41
  ### Basic flex example
42
42
 
43
43
  ```html
44
- <div class="pf-v5-l-flex">
45
- <div class="pf-v5-l-flex__item">Flex item</div>
46
- <div class="pf-v5-l-flex__item">Flex item</div>
47
- <div class="pf-v5-l-flex__item">Flex item</div>
48
- <div class="pf-v5-l-flex__item">Flex item</div>
44
+ <div class="pf-v6-l-flex">
45
+ <div class="pf-v6-l-flex__item">Flex item</div>
46
+ <div class="pf-v6-l-flex__item">Flex item</div>
47
+ <div class="pf-v6-l-flex__item">Flex item</div>
48
+ <div class="pf-v6-l-flex__item">Flex item</div>
49
49
  </div>
50
50
 
51
51
  ```
@@ -53,15 +53,15 @@ The flex layout provides two ways of spacing its direct children.
53
53
  ### Nested flex example
54
54
 
55
55
  ```html
56
- <div class="pf-v5-l-flex">
57
- <div class="pf-v5-l-flex">
58
- <div class="pf-v5-l-flex__item">Flex item</div>
59
- <div class="pf-v5-l-flex__item">Flex item</div>
56
+ <div class="pf-v6-l-flex">
57
+ <div class="pf-v6-l-flex">
58
+ <div class="pf-v6-l-flex__item">Flex item</div>
59
+ <div class="pf-v6-l-flex__item">Flex item</div>
60
60
  </div>
61
- <div class="pf-v5-l-flex">
62
- <div class="pf-v5-l-flex__item">Flex item</div>
63
- <div class="pf-v5-l-flex__item">Flex item</div>
64
- <div class="pf-v5-l-flex__item">Flex item</div>
61
+ <div class="pf-v6-l-flex">
62
+ <div class="pf-v6-l-flex__item">Flex item</div>
63
+ <div class="pf-v6-l-flex__item">Flex item</div>
64
+ <div class="pf-v6-l-flex__item">Flex item</div>
65
65
  </div>
66
66
  </div>
67
67
 
@@ -70,17 +70,17 @@ The flex layout provides two ways of spacing its direct children.
70
70
  ### Nested flex and items example
71
71
 
72
72
  ```html
73
- <div class="pf-v5-l-flex">
74
- <div class="pf-v5-l-flex">
75
- <div class="pf-v5-l-flex__item">Flex item</div>
76
- <div class="pf-v5-l-flex__item">Flex item</div>
73
+ <div class="pf-v6-l-flex">
74
+ <div class="pf-v6-l-flex">
75
+ <div class="pf-v6-l-flex__item">Flex item</div>
76
+ <div class="pf-v6-l-flex__item">Flex item</div>
77
77
  </div>
78
78
 
79
- <div class="pf-v5-l-flex__item">Flex item</div>
80
- <div class="pf-v5-l-flex__item">Flex item</div>
79
+ <div class="pf-v6-l-flex__item">Flex item</div>
80
+ <div class="pf-v6-l-flex__item">Flex item</div>
81
81
 
82
- <div class="pf-v5-l-flex">
83
- <div class="pf-v5-l-flex__item">Flex item</div>
82
+ <div class="pf-v6-l-flex">
83
+ <div class="pf-v6-l-flex__item">Flex item</div>
84
84
  </div>
85
85
  </div>
86
86
 
@@ -102,12 +102,12 @@ The CSS approach, by keeping specificity low on base class properties and resett
102
102
  ### Spacing system on parent example
103
103
 
104
104
  ```html
105
- <div class="pf-v5-l-flex pf-m-space-items-2xl">
106
- <div class="pf-v5-l-flex__item">Flex item</div>
107
- <div class="pf-v5-l-flex__item">Flex item</div>
108
- <div class="pf-v5-l-flex__item">Flex item</div>
109
- <div class="pf-v5-l-flex__item">Flex item</div>
110
- <div class="pf-v5-l-flex__item">Flex item</div>
105
+ <div class="pf-v6-l-flex pf-m-space-items-2xl">
106
+ <div class="pf-v6-l-flex__item">Flex item</div>
107
+ <div class="pf-v6-l-flex__item">Flex item</div>
108
+ <div class="pf-v6-l-flex__item">Flex item</div>
109
+ <div class="pf-v6-l-flex__item">Flex item</div>
110
+ <div class="pf-v6-l-flex__item">Flex item</div>
111
111
  </div>
112
112
 
113
113
  ```
@@ -115,16 +115,16 @@ The CSS approach, by keeping specificity low on base class properties and resett
115
115
  ### Spacing system on children example
116
116
 
117
117
  ```html
118
- <div class="pf-v5-l-flex">
119
- <div class="pf-v5-l-flex__item pf-m-spacer-none">Item - none</div>
120
- <div class="pf-v5-l-flex__item pf-m-spacer-xs">Item - xs</div>
121
- <div class="pf-v5-l-flex__item pf-m-spacer-sm">Item - sm</div>
122
- <div class="pf-v5-l-flex__item pf-m-spacer-md">Item - md</div>
123
- <div class="pf-v5-l-flex__item pf-m-spacer-lg">Item - lg</div>
124
- <div class="pf-v5-l-flex__item pf-m-spacer-xl">Item - xl</div>
125
- <div class="pf-v5-l-flex__item pf-m-spacer-2xl">Item - 2xl</div>
126
- <div class="pf-v5-l-flex__item pf-m-spacer-3xl">Item - 3xl</div>
127
- <div class="pf-v5-l-flex__item pf-m-spacer-4xl">Item - 4xl</div>
118
+ <div class="pf-v6-l-flex">
119
+ <div class="pf-v6-l-flex__item pf-m-spacer-none">Item - none</div>
120
+ <div class="pf-v6-l-flex__item pf-m-spacer-xs">Item - xs</div>
121
+ <div class="pf-v6-l-flex__item pf-m-spacer-sm">Item - sm</div>
122
+ <div class="pf-v6-l-flex__item pf-m-spacer-md">Item - md</div>
123
+ <div class="pf-v6-l-flex__item pf-m-spacer-lg">Item - lg</div>
124
+ <div class="pf-v6-l-flex__item pf-m-spacer-xl">Item - xl</div>
125
+ <div class="pf-v6-l-flex__item pf-m-spacer-2xl">Item - 2xl</div>
126
+ <div class="pf-v6-l-flex__item pf-m-spacer-3xl">Item - 3xl</div>
127
+ <div class="pf-v6-l-flex__item pf-m-spacer-4xl">Item - 4xl</div>
128
128
  </div>
129
129
 
130
130
  ```
@@ -132,12 +132,12 @@ The CSS approach, by keeping specificity low on base class properties and resett
132
132
  ### Spacing system on parent and children example
133
133
 
134
134
  ```html
135
- <div class="pf-v5-l-flex pf-m-space-items-2xl">
136
- <div class="pf-v5-l-flex__item">Flex item</div>
137
- <div class="pf-v5-l-flex__item pf-m-spacer-md">Flex item - md</div>
138
- <div class="pf-v5-l-flex__item">Flex item</div>
139
- <div class="pf-v5-l-flex__item">Flex item</div>
140
- <div class="pf-v5-l-flex__item">Flex item</div>
135
+ <div class="pf-v6-l-flex pf-m-space-items-2xl">
136
+ <div class="pf-v6-l-flex__item">Flex item</div>
137
+ <div class="pf-v6-l-flex__item pf-m-spacer-md">Flex item - md</div>
138
+ <div class="pf-v6-l-flex__item">Flex item</div>
139
+ <div class="pf-v6-l-flex__item">Flex item</div>
140
+ <div class="pf-v6-l-flex__item">Flex item</div>
141
141
  </div>
142
142
 
143
143
  ```
@@ -154,23 +154,23 @@ The CSS approach, by keeping specificity low on base class properties and resett
154
154
  ### Row gap example
155
155
 
156
156
  ```html
157
- <div class="pf-v5-l-flex pf-m-row-gap-2xl">
158
- <div class="pf-v5-l-flex__item">Flex item</div>
159
- <div class="pf-v5-l-flex__item">Flex item</div>
160
- <div class="pf-v5-l-flex__item">Flex item</div>
161
- <div class="pf-v5-l-flex__item">Flex item</div>
162
- <div class="pf-v5-l-flex__item">Flex item</div>
163
- <div class="pf-v5-l-flex__item">Flex item</div>
164
- <div class="pf-v5-l-flex__item">Flex item</div>
165
- <div class="pf-v5-l-flex__item">Flex item</div>
166
- <div class="pf-v5-l-flex__item">Flex item</div>
167
- <div class="pf-v5-l-flex__item">Flex item</div>
168
- <div class="pf-v5-l-flex__item">Flex item</div>
169
- <div class="pf-v5-l-flex__item">Flex item</div>
170
- <div class="pf-v5-l-flex__item">Flex item</div>
171
- <div class="pf-v5-l-flex__item">Flex item</div>
172
- <div class="pf-v5-l-flex__item">Flex item</div>
173
- <div class="pf-v5-l-flex__item">Flex item</div>
157
+ <div class="pf-v6-l-flex pf-m-row-gap-2xl">
158
+ <div class="pf-v6-l-flex__item">Flex item</div>
159
+ <div class="pf-v6-l-flex__item">Flex item</div>
160
+ <div class="pf-v6-l-flex__item">Flex item</div>
161
+ <div class="pf-v6-l-flex__item">Flex item</div>
162
+ <div class="pf-v6-l-flex__item">Flex item</div>
163
+ <div class="pf-v6-l-flex__item">Flex item</div>
164
+ <div class="pf-v6-l-flex__item">Flex item</div>
165
+ <div class="pf-v6-l-flex__item">Flex item</div>
166
+ <div class="pf-v6-l-flex__item">Flex item</div>
167
+ <div class="pf-v6-l-flex__item">Flex item</div>
168
+ <div class="pf-v6-l-flex__item">Flex item</div>
169
+ <div class="pf-v6-l-flex__item">Flex item</div>
170
+ <div class="pf-v6-l-flex__item">Flex item</div>
171
+ <div class="pf-v6-l-flex__item">Flex item</div>
172
+ <div class="pf-v6-l-flex__item">Flex item</div>
173
+ <div class="pf-v6-l-flex__item">Flex item</div>
174
174
  </div>
175
175
 
176
176
  ```
@@ -178,23 +178,23 @@ The CSS approach, by keeping specificity low on base class properties and resett
178
178
  ### Column gap example
179
179
 
180
180
  ```html
181
- <div class="pf-v5-l-flex pf-m-column-gap-2xl">
182
- <div class="pf-v5-l-flex__item">Flex item</div>
183
- <div class="pf-v5-l-flex__item">Flex item</div>
184
- <div class="pf-v5-l-flex__item">Flex item</div>
185
- <div class="pf-v5-l-flex__item">Flex item</div>
186
- <div class="pf-v5-l-flex__item">Flex item</div>
187
- <div class="pf-v5-l-flex__item">Flex item</div>
188
- <div class="pf-v5-l-flex__item">Flex item</div>
189
- <div class="pf-v5-l-flex__item">Flex item</div>
190
- <div class="pf-v5-l-flex__item">Flex item</div>
191
- <div class="pf-v5-l-flex__item">Flex item</div>
192
- <div class="pf-v5-l-flex__item">Flex item</div>
193
- <div class="pf-v5-l-flex__item">Flex item</div>
194
- <div class="pf-v5-l-flex__item">Flex item</div>
195
- <div class="pf-v5-l-flex__item">Flex item</div>
196
- <div class="pf-v5-l-flex__item">Flex item</div>
197
- <div class="pf-v5-l-flex__item">Flex item</div>
181
+ <div class="pf-v6-l-flex pf-m-column-gap-2xl">
182
+ <div class="pf-v6-l-flex__item">Flex item</div>
183
+ <div class="pf-v6-l-flex__item">Flex item</div>
184
+ <div class="pf-v6-l-flex__item">Flex item</div>
185
+ <div class="pf-v6-l-flex__item">Flex item</div>
186
+ <div class="pf-v6-l-flex__item">Flex item</div>
187
+ <div class="pf-v6-l-flex__item">Flex item</div>
188
+ <div class="pf-v6-l-flex__item">Flex item</div>
189
+ <div class="pf-v6-l-flex__item">Flex item</div>
190
+ <div class="pf-v6-l-flex__item">Flex item</div>
191
+ <div class="pf-v6-l-flex__item">Flex item</div>
192
+ <div class="pf-v6-l-flex__item">Flex item</div>
193
+ <div class="pf-v6-l-flex__item">Flex item</div>
194
+ <div class="pf-v6-l-flex__item">Flex item</div>
195
+ <div class="pf-v6-l-flex__item">Flex item</div>
196
+ <div class="pf-v6-l-flex__item">Flex item</div>
197
+ <div class="pf-v6-l-flex__item">Flex item</div>
198
198
  </div>
199
199
 
200
200
  ```
@@ -202,23 +202,23 @@ The CSS approach, by keeping specificity low on base class properties and resett
202
202
  ### Gap example
203
203
 
204
204
  ```html
205
- <div class="pf-v5-l-flex pf-m-gap-2xl">
206
- <div class="pf-v5-l-flex__item">Flex item</div>
207
- <div class="pf-v5-l-flex__item">Flex item</div>
208
- <div class="pf-v5-l-flex__item">Flex item</div>
209
- <div class="pf-v5-l-flex__item">Flex item</div>
210
- <div class="pf-v5-l-flex__item">Flex item</div>
211
- <div class="pf-v5-l-flex__item">Flex item</div>
212
- <div class="pf-v5-l-flex__item">Flex item</div>
213
- <div class="pf-v5-l-flex__item">Flex item</div>
214
- <div class="pf-v5-l-flex__item">Flex item</div>
215
- <div class="pf-v5-l-flex__item">Flex item</div>
216
- <div class="pf-v5-l-flex__item">Flex item</div>
217
- <div class="pf-v5-l-flex__item">Flex item</div>
218
- <div class="pf-v5-l-flex__item">Flex item</div>
219
- <div class="pf-v5-l-flex__item">Flex item</div>
220
- <div class="pf-v5-l-flex__item">Flex item</div>
221
- <div class="pf-v5-l-flex__item">Flex item</div>
205
+ <div class="pf-v6-l-flex pf-m-gap-2xl">
206
+ <div class="pf-v6-l-flex__item">Flex item</div>
207
+ <div class="pf-v6-l-flex__item">Flex item</div>
208
+ <div class="pf-v6-l-flex__item">Flex item</div>
209
+ <div class="pf-v6-l-flex__item">Flex item</div>
210
+ <div class="pf-v6-l-flex__item">Flex item</div>
211
+ <div class="pf-v6-l-flex__item">Flex item</div>
212
+ <div class="pf-v6-l-flex__item">Flex item</div>
213
+ <div class="pf-v6-l-flex__item">Flex item</div>
214
+ <div class="pf-v6-l-flex__item">Flex item</div>
215
+ <div class="pf-v6-l-flex__item">Flex item</div>
216
+ <div class="pf-v6-l-flex__item">Flex item</div>
217
+ <div class="pf-v6-l-flex__item">Flex item</div>
218
+ <div class="pf-v6-l-flex__item">Flex item</div>
219
+ <div class="pf-v6-l-flex__item">Flex item</div>
220
+ <div class="pf-v6-l-flex__item">Flex item</div>
221
+ <div class="pf-v6-l-flex__item">Flex item</div>
222
222
  </div>
223
223
 
224
224
  ```
@@ -236,12 +236,12 @@ The CSS approach, by keeping specificity low on base class properties and resett
236
236
  ### Default layout example
237
237
 
238
238
  ```html
239
- <div class="pf-v5-l-flex ws-example-flex-border">
240
- <div class="pf-v5-l-flex__item">Flex item</div>
239
+ <div class="pf-v6-l-flex ws-example-flex-border">
240
+ <div class="pf-v6-l-flex__item">Flex item</div>
241
241
 
242
- <div class="pf-v5-l-flex__item">Flex item</div>
242
+ <div class="pf-v6-l-flex__item">Flex item</div>
243
243
 
244
- <div class="pf-v5-l-flex__item">Flex item</div>
244
+ <div class="pf-v6-l-flex__item">Flex item</div>
245
245
  </div>
246
246
 
247
247
  ```
@@ -249,12 +249,12 @@ The CSS approach, by keeping specificity low on base class properties and resett
249
249
  ### Inline flex layout example
250
250
 
251
251
  ```html
252
- <div class="pf-v5-l-flex pf-m-inline-flex ws-example-flex-border">
253
- <div class="pf-v5-l-flex__item">Flex item</div>
252
+ <div class="pf-v6-l-flex pf-m-inline-flex ws-example-flex-border">
253
+ <div class="pf-v6-l-flex__item">Flex item</div>
254
254
 
255
- <div class="pf-v5-l-flex__item">Flex item</div>
255
+ <div class="pf-v6-l-flex__item">Flex item</div>
256
256
 
257
- <div class="pf-v5-l-flex__item">Flex item</div>
257
+ <div class="pf-v6-l-flex__item">Flex item</div>
258
258
  </div>
259
259
 
260
260
  ```
@@ -264,24 +264,24 @@ The CSS approach, by keeping specificity low on base class properties and resett
264
264
  Adjusting width with `.pf-m-grow`, which sets `flex-grow: 1`. In this example, the first group is set to `.pf-m-grow`, will occupy the remaining available space.
265
265
 
266
266
  ```html
267
- <div class="pf-v5-l-flex">
267
+ <div class="pf-v6-l-flex">
268
268
  <div
269
- class="pf-v5-l-flex pf-m-grow ws-example-flex-border"
269
+ class="pf-v6-l-flex pf-m-grow ws-example-flex-border"
270
270
  data-label=".pf-m-grow"
271
271
  >
272
- <div class="pf-v5-l-flex__item">Flex item</div>
272
+ <div class="pf-v6-l-flex__item">Flex item</div>
273
273
 
274
- <div class="pf-v5-l-flex__item">Flex item</div>
274
+ <div class="pf-v6-l-flex__item">Flex item</div>
275
275
 
276
- <div class="pf-v5-l-flex__item">Flex item</div>
276
+ <div class="pf-v6-l-flex__item">Flex item</div>
277
277
  </div>
278
- <div class="pf-v5-l-flex ws-example-flex-border">
279
- <div class="pf-v5-l-flex__item">Flex item</div>
278
+ <div class="pf-v6-l-flex ws-example-flex-border">
279
+ <div class="pf-v6-l-flex__item">Flex item</div>
280
280
 
281
- <div class="pf-v5-l-flex__item">Flex item</div>
281
+ <div class="pf-v6-l-flex__item">Flex item</div>
282
282
  </div>
283
- <div class="pf-v5-l-flex ws-example-flex-border">
284
- <div class="pf-v5-l-flex__item">Flex item</div>
283
+ <div class="pf-v6-l-flex ws-example-flex-border">
284
+ <div class="pf-v6-l-flex__item">Flex item</div>
285
285
  </div>
286
286
  </div>
287
287
 
@@ -292,30 +292,30 @@ Adjusting width with `.pf-m-grow`, which sets `flex-grow: 1`. In this example, t
292
292
  Adjusting width with `.pf-m-flex-1`. In this example, all groups are set to `.pf-m-flex-1`. They will share available space equally.
293
293
 
294
294
  ```html
295
- <div class="pf-v5-l-flex">
295
+ <div class="pf-v6-l-flex">
296
296
  <div
297
- class="pf-v5-l-flex pf-m-flex-1 ws-example-flex-border"
297
+ class="pf-v6-l-flex pf-m-flex-1 ws-example-flex-border"
298
298
  data-label=".pf-m-flex-1"
299
299
  >
300
- <div class="pf-v5-l-flex__item">Flex item</div>
300
+ <div class="pf-v6-l-flex__item">Flex item</div>
301
301
 
302
- <div class="pf-v5-l-flex__item">Flex item</div>
302
+ <div class="pf-v6-l-flex__item">Flex item</div>
303
303
 
304
- <div class="pf-v5-l-flex__item">Flex item</div>
304
+ <div class="pf-v6-l-flex__item">Flex item</div>
305
305
  </div>
306
306
  <div
307
- class="pf-v5-l-flex pf-m-flex-1 ws-example-flex-border"
307
+ class="pf-v6-l-flex pf-m-flex-1 ws-example-flex-border"
308
308
  data-label=".pf-m-flex-1"
309
309
  >
310
- <div class="pf-v5-l-flex__item">Flex item</div>
310
+ <div class="pf-v6-l-flex__item">Flex item</div>
311
311
 
312
- <div class="pf-v5-l-flex__item">Flex item</div>
312
+ <div class="pf-v6-l-flex__item">Flex item</div>
313
313
  </div>
314
314
  <div
315
- class="pf-v5-l-flex pf-m-flex-1 ws-example-flex-border"
315
+ class="pf-v6-l-flex pf-m-flex-1 ws-example-flex-border"
316
316
  data-label=".pf-m-flex-1"
317
317
  >
318
- <div class="pf-v5-l-flex__item">Flex item</div>
318
+ <div class="pf-v6-l-flex__item">Flex item</div>
319
319
  </div>
320
320
  </div>
321
321
 
@@ -324,36 +324,36 @@ Adjusting width with `.pf-m-flex-1`. In this example, all groups are set to `.pf
324
324
  ### Flex grow 1-4 example
325
325
 
326
326
  ```html
327
- <div class="pf-v5-l-flex">
327
+ <div class="pf-v6-l-flex">
328
328
  <div
329
- class="pf-v5-l-flex pf-m-flex-1 ws-example-flex-border"
329
+ class="pf-v6-l-flex pf-m-flex-1 ws-example-flex-border"
330
330
  data-label=".pf-m-flex-1"
331
331
  >
332
- <div class="pf-v5-l-flex__item">Flex item</div>
332
+ <div class="pf-v6-l-flex__item">Flex item</div>
333
333
  </div>
334
334
  <div
335
- class="pf-v5-l-flex pf-m-flex-2 ws-example-flex-border"
335
+ class="pf-v6-l-flex pf-m-flex-2 ws-example-flex-border"
336
336
  data-label=".pf-m-flex-2"
337
337
  >
338
- <div class="pf-v5-l-flex__item">Flex item</div>
338
+ <div class="pf-v6-l-flex__item">Flex item</div>
339
339
 
340
- <div class="pf-v5-l-flex__item">Flex item</div>
340
+ <div class="pf-v6-l-flex__item">Flex item</div>
341
341
 
342
- <div class="pf-v5-l-flex__item">Flex item</div>
342
+ <div class="pf-v6-l-flex__item">Flex item</div>
343
343
  </div>
344
344
  <div
345
- class="pf-v5-l-flex pf-m-flex-3 ws-example-flex-border"
345
+ class="pf-v6-l-flex pf-m-flex-3 ws-example-flex-border"
346
346
  data-label=".pf-m-flex-3"
347
347
  >
348
- <div class="pf-v5-l-flex__item">Flex item</div>
348
+ <div class="pf-v6-l-flex__item">Flex item</div>
349
349
 
350
- <div class="pf-v5-l-flex__item">Flex item</div>
350
+ <div class="pf-v6-l-flex__item">Flex item</div>
351
351
  </div>
352
352
  <div
353
- class="pf-v5-l-flex pf-m-flex-4 ws-example-flex-border"
353
+ class="pf-v6-l-flex pf-m-flex-4 ws-example-flex-border"
354
354
  data-label=".pf-m-flex-4"
355
355
  >
356
- <div class="pf-v5-l-flex__item">Flex item</div>
356
+ <div class="pf-v6-l-flex__item">Flex item</div>
357
357
  </div>
358
358
  </div>
359
359
 
@@ -379,10 +379,10 @@ Adjusting width with `.pf-m-flex-1`. In this example, all groups are set to `.pf
379
379
  ### Basic column example
380
380
 
381
381
  ```html
382
- <div class="pf-v5-l-flex pf-m-column">
383
- <div class="pf-v5-l-flex__item">Flex item</div>
384
- <div class="pf-v5-l-flex__item">Flex item</div>
385
- <div class="pf-v5-l-flex__item">Flex item</div>
382
+ <div class="pf-v6-l-flex pf-m-column">
383
+ <div class="pf-v6-l-flex__item">Flex item</div>
384
+ <div class="pf-v6-l-flex__item">Flex item</div>
385
+ <div class="pf-v6-l-flex__item">Flex item</div>
386
386
  </div>
387
387
 
388
388
  ```
@@ -390,34 +390,34 @@ Adjusting width with `.pf-m-flex-1`. In this example, all groups are set to `.pf
390
390
  ### Nested column example
391
391
 
392
392
  ```html
393
- <div class="pf-v5-l-flex pf-m-column">
394
- <div class="pf-v5-l-flex">
395
- <div class="pf-v5-l-flex__item">Flex item</div>
396
- <div class="pf-v5-l-flex__item">Flex item</div>
397
- <div class="pf-v5-l-flex__item">Flex item</div>
393
+ <div class="pf-v6-l-flex pf-m-column">
394
+ <div class="pf-v6-l-flex">
395
+ <div class="pf-v6-l-flex__item">Flex item</div>
396
+ <div class="pf-v6-l-flex__item">Flex item</div>
397
+ <div class="pf-v6-l-flex__item">Flex item</div>
398
398
  </div>
399
- <div class="pf-v5-l-flex">
400
- <div class="pf-v5-l-flex__item">Flex item</div>
401
- <div class="pf-v5-l-flex__item">Flex item</div>
399
+ <div class="pf-v6-l-flex">
400
+ <div class="pf-v6-l-flex__item">Flex item</div>
401
+ <div class="pf-v6-l-flex__item">Flex item</div>
402
402
  </div>
403
- <div class="pf-v5-l-flex">
404
- <div class="pf-v5-l-flex__item">Flex item</div>
405
- <div class="pf-v5-l-flex__item">Flex item</div>
406
- <div class="pf-v5-l-flex__item">Flex item</div>
407
- <div class="pf-v5-l-flex__item">Flex item</div>
403
+ <div class="pf-v6-l-flex">
404
+ <div class="pf-v6-l-flex__item">Flex item</div>
405
+ <div class="pf-v6-l-flex__item">Flex item</div>
406
+ <div class="pf-v6-l-flex__item">Flex item</div>
407
+ <div class="pf-v6-l-flex__item">Flex item</div>
408
408
  </div>
409
409
  </div>
410
410
  <br />
411
411
  <br />
412
- <div class="pf-v5-l-flex">
413
- <div class="pf-v5-l-flex pf-m-column">
414
- <div class="pf-v5-l-flex__item">Flex item</div>
415
- <div class="pf-v5-l-flex__item">Flex item</div>
416
- <div class="pf-v5-l-flex__item">Flex item</div>
412
+ <div class="pf-v6-l-flex">
413
+ <div class="pf-v6-l-flex pf-m-column">
414
+ <div class="pf-v6-l-flex__item">Flex item</div>
415
+ <div class="pf-v6-l-flex__item">Flex item</div>
416
+ <div class="pf-v6-l-flex__item">Flex item</div>
417
417
  </div>
418
- <div class="pf-v5-l-flex pf-m-column">
419
- <div class="pf-v5-l-flex__item">Flex item</div>
420
- <div class="pf-v5-l-flex__item">Flex item</div>
418
+ <div class="pf-v6-l-flex pf-m-column">
419
+ <div class="pf-v6-l-flex__item">Flex item</div>
420
+ <div class="pf-v6-l-flex__item">Flex item</div>
421
421
  </div>
422
422
  </div>
423
423
 
@@ -434,40 +434,40 @@ Adjusting width with `.pf-m-flex-1`. In this example, all groups are set to `.pf
434
434
  ### Flex direction responsive example
435
435
 
436
436
  ```html
437
- <div class="pf-v5-l-flex pf-m-column pf-m-row-on-lg">
438
- <div class="pf-v5-l-flex">
439
- <div class="pf-v5-l-flex__item">Flex item</div>
440
- <div class="pf-v5-l-flex__item">Flex item</div>
441
- <div class="pf-v5-l-flex__item">Flex item</div>
442
- <div class="pf-v5-l-flex__item">Flex item</div>
437
+ <div class="pf-v6-l-flex pf-m-column pf-m-row-on-lg">
438
+ <div class="pf-v6-l-flex">
439
+ <div class="pf-v6-l-flex__item">Flex item</div>
440
+ <div class="pf-v6-l-flex__item">Flex item</div>
441
+ <div class="pf-v6-l-flex__item">Flex item</div>
442
+ <div class="pf-v6-l-flex__item">Flex item</div>
443
443
  </div>
444
444
 
445
- <div class="pf-v5-l-flex">
446
- <div class="pf-v5-l-flex__item">Flex item</div>
447
- <div class="pf-v5-l-flex__item">Flex item</div>
445
+ <div class="pf-v6-l-flex">
446
+ <div class="pf-v6-l-flex__item">Flex item</div>
447
+ <div class="pf-v6-l-flex__item">Flex item</div>
448
448
  </div>
449
449
  </div>
450
450
  <br />
451
451
  <br />
452
- <div class="pf-v5-l-flex pf-m-column pf-m-row-on-lg">
453
- <div class="pf-v5-l-flex">
454
- <div class="pf-v5-l-flex__item">Flex item</div>
455
- <div class="pf-v5-l-flex__item">
452
+ <div class="pf-v6-l-flex pf-m-column pf-m-row-on-lg">
453
+ <div class="pf-v6-l-flex">
454
+ <div class="pf-v6-l-flex__item">Flex item</div>
455
+ <div class="pf-v6-l-flex__item">
456
456
  <b>Because this text is long enough to wrap, this item's width will force the adjacent item to wrap. If content is likely to wrap, modifiers will need to be used to control width.</b> Lorem ipsum dolor sit amet consectetur adipisicing elit. Est animi modi temporibus, alias qui obcaecati ullam dolor nam, nulla magni iste rem praesentium numquam provident amet ut nesciunt harum accusamus.
457
457
  </div>
458
458
  </div>
459
459
 
460
- <div class="pf-v5-l-flex pf-m-column">
461
- <div class="pf-v5-l-flex__item">Flex item</div>
462
- <div class="pf-v5-l-flex__item">Flex item</div>
460
+ <div class="pf-v6-l-flex pf-m-column">
461
+ <div class="pf-v6-l-flex__item">Flex item</div>
462
+ <div class="pf-v6-l-flex__item">Flex item</div>
463
463
  </div>
464
464
  </div>
465
465
  <br />
466
466
  <br />
467
- <div class="pf-v5-l-flex pf-m-column pf-m-row-on-lg">
468
- <div class="pf-v5-l-flex pf-m-flex-1">
469
- <div class="pf-v5-l-flex__item">Flex item</div>
470
- <div class="pf-v5-l-flex__item pf-m-flex-1">
467
+ <div class="pf-v6-l-flex pf-m-column pf-m-row-on-lg">
468
+ <div class="pf-v6-l-flex pf-m-flex-1">
469
+ <div class="pf-v6-l-flex__item">Flex item</div>
470
+ <div class="pf-v6-l-flex__item pf-m-flex-1">
471
471
  <b>
472
472
  To control the width of the flex item, set
473
473
  <code>.pf-m-flex-1</code>.
@@ -475,9 +475,9 @@ Adjusting width with `.pf-m-flex-1`. In this example, all groups are set to `.pf
475
475
  </div>
476
476
  </div>
477
477
 
478
- <div class="pf-v5-l-flex pf-m-column">
479
- <div class="pf-v5-l-flex__item">Flex item</div>
480
- <div class="pf-v5-l-flex__item">Flex item</div>
478
+ <div class="pf-v6-l-flex pf-m-column">
479
+ <div class="pf-v6-l-flex__item">Flex item</div>
480
+ <div class="pf-v6-l-flex__item">Flex item</div>
481
481
  </div>
482
482
  </div>
483
483
 
@@ -497,12 +497,12 @@ Adjusting width with `.pf-m-flex-1`. In this example, all groups are set to `.pf
497
497
  Aligning right with `.pf-m-align-right`. This solution will always align element right by setting margin-inline-start: auto, including when wrapped.
498
498
 
499
499
  ```html
500
- <div class="pf-v5-l-flex ws-example-flex-border">
501
- <div class="pf-v5-l-flex__item">Flex item</div>
502
- <div class="pf-v5-l-flex__item">Flex item</div>
503
- <div class="pf-v5-l-flex__item">Flex item</div>
504
- <div class="pf-v5-l-flex__item pf-m-align-right">Flex item</div>
505
- <div class="pf-v5-l-flex__item">Flex item</div>
500
+ <div class="pf-v6-l-flex ws-example-flex-border">
501
+ <div class="pf-v6-l-flex__item">Flex item</div>
502
+ <div class="pf-v6-l-flex__item">Flex item</div>
503
+ <div class="pf-v6-l-flex__item">Flex item</div>
504
+ <div class="pf-v6-l-flex__item pf-m-align-right">Flex item</div>
505
+ <div class="pf-v6-l-flex__item">Flex item</div>
506
506
  </div>
507
507
 
508
508
  ```
@@ -510,9 +510,9 @@ Aligning right with `.pf-m-align-right`. This solution will always align element
510
510
  ### Align right on single item example
511
511
 
512
512
  ```html
513
- <div class="pf-v5-l-flex ws-example-flex-border">
514
- <div class="pf-v5-l-flex__item pf-m-align-right">Flex item</div>
515
- <div class="pf-v5-l-flex__item">Flex item</div>
513
+ <div class="pf-v6-l-flex ws-example-flex-border">
514
+ <div class="pf-v6-l-flex__item pf-m-align-right">Flex item</div>
515
+ <div class="pf-v6-l-flex__item">Flex item</div>
516
516
  </div>
517
517
 
518
518
  ```
@@ -520,18 +520,18 @@ Aligning right with `.pf-m-align-right`. This solution will always align element
520
520
  ### Align right on multiple groups example
521
521
 
522
522
  ```html
523
- <div class="pf-v5-l-flex">
524
- <div class="pf-v5-l-flex">
525
- <div class="pf-v5-l-flex__item">Flex item</div>
526
- <div class="pf-v5-l-flex__item">Flex item</div>
523
+ <div class="pf-v6-l-flex">
524
+ <div class="pf-v6-l-flex">
525
+ <div class="pf-v6-l-flex__item">Flex item</div>
526
+ <div class="pf-v6-l-flex__item">Flex item</div>
527
527
  </div>
528
- <div class="pf-v5-l-flex pf-m-align-right">
529
- <div class="pf-v5-l-flex__item">Flex item</div>
530
- <div class="pf-v5-l-flex__item">Flex item</div>
528
+ <div class="pf-v6-l-flex pf-m-align-right">
529
+ <div class="pf-v6-l-flex__item">Flex item</div>
530
+ <div class="pf-v6-l-flex__item">Flex item</div>
531
531
  </div>
532
- <div class="pf-v5-l-flex pf-m-align-right">
533
- <div class="pf-v5-l-flex__item">Flex item</div>
534
- <div class="pf-v5-l-flex__item">Flex item</div>
532
+ <div class="pf-v6-l-flex pf-m-align-right">
533
+ <div class="pf-v6-l-flex__item">Flex item</div>
534
+ <div class="pf-v6-l-flex__item">Flex item</div>
535
535
  </div>
536
536
  </div>
537
537
 
@@ -540,16 +540,16 @@ Aligning right with `.pf-m-align-right`. This solution will always align element
540
540
  #### Alignment using .pf-m-flex-1 example
541
541
 
542
542
  ```html
543
- <div class="pf-v5-l-flex">
544
- <div class="pf-v5-l-flex pf-m-flex-1">
545
- <div class="pf-v5-l-flex__item">Flex item</div>
546
- <div class="pf-v5-l-flex__item">Flex item</div>
547
- <div class="pf-v5-l-flex__item">Flex item</div>
548
- <div class="pf-v5-l-flex__item">Flex item</div>
543
+ <div class="pf-v6-l-flex">
544
+ <div class="pf-v6-l-flex pf-m-flex-1">
545
+ <div class="pf-v6-l-flex__item">Flex item</div>
546
+ <div class="pf-v6-l-flex__item">Flex item</div>
547
+ <div class="pf-v6-l-flex__item">Flex item</div>
548
+ <div class="pf-v6-l-flex__item">Flex item</div>
549
549
  </div>
550
- <div class="pf-v5-l-flex">
551
- <div class="pf-v5-l-flex__item">Flex item</div>
552
- <div class="pf-v5-l-flex__item">Flex item</div>
550
+ <div class="pf-v6-l-flex">
551
+ <div class="pf-v6-l-flex__item">Flex item</div>
552
+ <div class="pf-v6-l-flex__item">Flex item</div>
553
553
  </div>
554
554
  </div>
555
555
 
@@ -558,15 +558,15 @@ Aligning right with `.pf-m-align-right`. This solution will always align element
558
558
  ### Alignment using .pf-m-align-self-flex-end example
559
559
 
560
560
  ```html
561
- <div class="pf-v5-l-flex">
562
- <div class="pf-v5-l-flex pf-m-column">
563
- <div class="pf-v5-l-flex__item">Flex item</div>
564
- <div class="pf-v5-l-flex__item">Flex item</div>
565
- <div class="pf-v5-l-flex__item">Flex item</div>
561
+ <div class="pf-v6-l-flex">
562
+ <div class="pf-v6-l-flex pf-m-column">
563
+ <div class="pf-v6-l-flex__item">Flex item</div>
564
+ <div class="pf-v6-l-flex__item">Flex item</div>
565
+ <div class="pf-v6-l-flex__item">Flex item</div>
566
566
  </div>
567
- <div class="pf-v5-l-flex pf-m-column pf-m-align-self-flex-end">
568
- <div class="pf-v5-l-flex__item">Flex item</div>
569
- <div class="pf-v5-l-flex__item">Flex item</div>
567
+ <div class="pf-v6-l-flex pf-m-column pf-m-align-self-flex-end">
568
+ <div class="pf-v6-l-flex__item">Flex item</div>
569
+ <div class="pf-v6-l-flex__item">Flex item</div>
570
570
  </div>
571
571
  </div>
572
572
 
@@ -575,15 +575,15 @@ Aligning right with `.pf-m-align-right`. This solution will always align element
575
575
  ### Aligning nested columns with .pf-m-align-self-center example
576
576
 
577
577
  ```html
578
- <div class="pf-v5-l-flex">
579
- <div class="pf-v5-l-flex pf-m-column">
580
- <div class="pf-v5-l-flex__item">Flex item</div>
581
- <div class="pf-v5-l-flex__item">Flex item</div>
582
- <div class="pf-v5-l-flex__item">Flex item</div>
578
+ <div class="pf-v6-l-flex">
579
+ <div class="pf-v6-l-flex pf-m-column">
580
+ <div class="pf-v6-l-flex__item">Flex item</div>
581
+ <div class="pf-v6-l-flex__item">Flex item</div>
582
+ <div class="pf-v6-l-flex__item">Flex item</div>
583
583
  </div>
584
- <div class="pf-v5-l-flex pf-m-column pf-m-align-self-center">
585
- <div class="pf-v5-l-flex__item">Flex item</div>
586
- <div class="pf-v5-l-flex__item">Flex item</div>
584
+ <div class="pf-v6-l-flex pf-m-column pf-m-align-self-center">
585
+ <div class="pf-v6-l-flex__item">Flex item</div>
586
+ <div class="pf-v6-l-flex__item">Flex item</div>
587
587
  </div>
588
588
  </div>
589
589
 
@@ -592,15 +592,15 @@ Aligning right with `.pf-m-align-right`. This solution will always align element
592
592
  ### Aligning nested columns with .pf-m-align-self-baseline example
593
593
 
594
594
  ```html
595
- <div class="pf-v5-l-flex">
596
- <div class="pf-v5-l-flex pf-m-column">
597
- <div class="pf-v5-l-flex__item">Flex item</div>
598
- <div class="pf-v5-l-flex__item">Flex item</div>
599
- <div class="pf-v5-l-flex__item">Flex item</div>
595
+ <div class="pf-v6-l-flex">
596
+ <div class="pf-v6-l-flex pf-m-column">
597
+ <div class="pf-v6-l-flex__item">Flex item</div>
598
+ <div class="pf-v6-l-flex__item">Flex item</div>
599
+ <div class="pf-v6-l-flex__item">Flex item</div>
600
600
  </div>
601
- <div class="pf-v5-l-flex pf-m-column pf-m-align-self-baseline">
602
- <div class="pf-v5-l-flex__item">Flex item</div>
603
- <div class="pf-v5-l-flex__item">Flex item</div>
601
+ <div class="pf-v6-l-flex pf-m-column pf-m-align-self-baseline">
602
+ <div class="pf-v6-l-flex__item">Flex item</div>
603
+ <div class="pf-v6-l-flex__item">Flex item</div>
604
604
  </div>
605
605
  </div>
606
606
 
@@ -609,15 +609,15 @@ Aligning right with `.pf-m-align-right`. This solution will always align element
609
609
  ### Aligning nested columns with .pf-m-align-self-stretch example
610
610
 
611
611
  ```html
612
- <div class="pf-v5-l-flex">
613
- <div class="pf-v5-l-flex pf-m-column">
614
- <div class="pf-v5-l-flex__item">Flex item</div>
615
- <div class="pf-v5-l-flex__item">Flex item</div>
616
- <div class="pf-v5-l-flex__item">Flex item</div>
612
+ <div class="pf-v6-l-flex">
613
+ <div class="pf-v6-l-flex pf-m-column">
614
+ <div class="pf-v6-l-flex__item">Flex item</div>
615
+ <div class="pf-v6-l-flex__item">Flex item</div>
616
+ <div class="pf-v6-l-flex__item">Flex item</div>
617
617
  </div>
618
- <div class="pf-v5-l-flex pf-m-column pf-m-align-self-stretch">
619
- <div class="pf-v5-l-flex__item">Flex item</div>
620
- <div class="pf-v5-l-flex__item">Flex item</div>
618
+ <div class="pf-v6-l-flex pf-m-column pf-m-align-self-stretch">
619
+ <div class="pf-v6-l-flex__item">Flex item</div>
620
+ <div class="pf-v6-l-flex__item">Flex item</div>
621
621
  </div>
622
622
  </div>
623
623
 
@@ -640,11 +640,11 @@ Aligning right with `.pf-m-align-right`. This solution will always align element
640
640
  ### Justify content flex end example
641
641
 
642
642
  ```html
643
- <div class="pf-v5-l-flex pf-m-justify-content-flex-end ws-example-flex-border">
644
- <div class="pf-v5-l-flex__item">Flex item</div>
645
- <div class="pf-v5-l-flex__item">Flex item</div>
646
- <div class="pf-v5-l-flex__item">Flex item</div>
647
- <div class="pf-v5-l-flex__item">Flex item</div>
643
+ <div class="pf-v6-l-flex pf-m-justify-content-flex-end ws-example-flex-border">
644
+ <div class="pf-v6-l-flex__item">Flex item</div>
645
+ <div class="pf-v6-l-flex__item">Flex item</div>
646
+ <div class="pf-v6-l-flex__item">Flex item</div>
647
+ <div class="pf-v6-l-flex__item">Flex item</div>
648
648
  </div>
649
649
 
650
650
  ```
@@ -653,11 +653,11 @@ Aligning right with `.pf-m-align-right`. This solution will always align element
653
653
 
654
654
  ```html
655
655
  <div
656
- class="pf-v5-l-flex pf-m-justify-content-space-between ws-example-flex-border"
656
+ class="pf-v6-l-flex pf-m-justify-content-space-between ws-example-flex-border"
657
657
  >
658
- <div class="pf-v5-l-flex__item">Flex item</div>
659
- <div class="pf-v5-l-flex__item">Flex item</div>
660
- <div class="pf-v5-l-flex__item">Flex item</div>
658
+ <div class="pf-v6-l-flex__item">Flex item</div>
659
+ <div class="pf-v6-l-flex__item">Flex item</div>
660
+ <div class="pf-v6-l-flex__item">Flex item</div>
661
661
  </div>
662
662
 
663
663
  ```
@@ -666,11 +666,11 @@ Aligning right with `.pf-m-align-right`. This solution will always align element
666
666
 
667
667
  ```html
668
668
  <div
669
- class="pf-v5-l-flex pf-m-justify-content-flex-start ws-example-flex-border"
669
+ class="pf-v6-l-flex pf-m-justify-content-flex-start ws-example-flex-border"
670
670
  >
671
- <div class="pf-v5-l-flex__item">Flex item</div>
672
- <div class="pf-v5-l-flex__item">Flex item</div>
673
- <div class="pf-v5-l-flex__item">Flex item</div>
671
+ <div class="pf-v6-l-flex__item">Flex item</div>
672
+ <div class="pf-v6-l-flex__item">Flex item</div>
673
+ <div class="pf-v6-l-flex__item">Flex item</div>
674
674
  </div>
675
675
 
676
676
  ```
@@ -688,34 +688,34 @@ Ordering - Ordering can be applied to nested `.pf-v5-l-flex` and `.pf-v5-l-flex_
688
688
  ### Basic ordering example
689
689
 
690
690
  ```html
691
- <div class="pf-v5-l-flex">
691
+ <div class="pf-v6-l-flex">
692
692
  <div
693
- class="pf-v5-l-flex pf-m-spacer-none"
693
+ class="pf-v6-l-flex pf-m-spacer-none"
694
694
  style="--pf-v5-l-flex--item--Order: 1;"
695
695
  >
696
696
  <div
697
- class="pf-v5-l-flex__item pf-m-spacer-none"
697
+ class="pf-v6-l-flex__item pf-m-spacer-none"
698
698
  style="--pf-v5-l-flex--item--Order: 3;"
699
699
  >Set 1, Item A</div>
700
700
  <div
701
- class="pf-v5-l-flex__item"
701
+ class="pf-v6-l-flex__item"
702
702
  style="--pf-v5-l-flex--item--Order: 1;"
703
703
  >Set 1, Item B</div>
704
- <div class="pf-v5-l-flex__item">Set 1, Item C</div>
705
- <div class="pf-v5-l-flex__item pf-m-order-2 pf-m-spacer-md">Set 1, Item D</div>
704
+ <div class="pf-v6-l-flex__item">Set 1, Item C</div>
705
+ <div class="pf-v6-l-flex__item pf-m-order-2 pf-m-spacer-md">Set 1, Item D</div>
706
706
  </div>
707
- <div class="pf-v5-l-flex pf-m-spacer-md">
707
+ <div class="pf-v6-l-flex pf-m-spacer-md">
708
708
  <div
709
- class="pf-v5-l-flex__item pf-m-spacer-none"
709
+ class="pf-v6-l-flex__item pf-m-spacer-none"
710
710
  style="--pf-v5-l-flex--item--Order: 3;"
711
711
  >Set 2, Item A</div>
712
712
  <div
713
- class="pf-v5-l-flex__item"
713
+ class="pf-v6-l-flex__item"
714
714
  style="--pf-v5-l-flex--item--Order-on-lg: 1;"
715
715
  >Set 2, Item B</div>
716
- <div class="pf-v5-l-flex__item">Set 2, Item C</div>
716
+ <div class="pf-v6-l-flex__item">Set 2, Item C</div>
717
717
  <div
718
- class="pf-v5-l-flex__item pf-m-spacer-md"
718
+ class="pf-v6-l-flex__item pf-m-spacer-md"
719
719
  style="--pf-v5-l-flex--item--Order: 2;"
720
720
  >Set 2, Item D</div>
721
721
  </div>
@@ -726,14 +726,14 @@ Ordering - Ordering can be applied to nested `.pf-v5-l-flex` and `.pf-v5-l-flex_
726
726
  ### First and last ordering example
727
727
 
728
728
  ```html
729
- <div class="pf-v5-l-flex">
729
+ <div class="pf-v6-l-flex">
730
730
  <div
731
- class="pf-v5-l-flex__item pf-m-spacer-none"
731
+ class="pf-v6-l-flex__item pf-m-spacer-none"
732
732
  style="--pf-v5-l-flex--item--Order: 2;"
733
733
  >Item A</div>
734
- <div class="pf-v5-l-flex__item">Item B</div>
734
+ <div class="pf-v6-l-flex__item">Item B</div>
735
735
  <div
736
- class="pf-v5-l-flex__item pf-m-spacer-md"
736
+ class="pf-v6-l-flex__item pf-m-spacer-md"
737
737
  style="--pf-v5-l-flex--item--Order: -1;"
738
738
  >Item C</div>
739
739
  </div>
@@ -743,17 +743,17 @@ Ordering - Ordering can be applied to nested `.pf-v5-l-flex` and `.pf-v5-l-flex_
743
743
  ### Responsive first last ordering example
744
744
 
745
745
  ```html
746
- <div class="pf-v5-l-flex">
746
+ <div class="pf-v6-l-flex">
747
747
  <div
748
- class="pf-v5-l-flex__item pf-m-spacer-none-on-lg"
748
+ class="pf-v6-l-flex__item pf-m-spacer-none-on-lg"
749
749
  style="--pf-v5-l-flex--item--Order-on-lg: 2;"
750
750
  >Item A</div>
751
751
  <div
752
- class="pf-v5-l-flex__item pf-m-spacer-none-on-md pf-m-spacer-md-on-lg"
752
+ class="pf-v6-l-flex__item pf-m-spacer-none-on-md pf-m-spacer-md-on-lg"
753
753
  style="--pf-v5-l-flex--item--Order: -1; --pf-v5-l-flex--item--Order-on-md: 1;"
754
754
  >Item B</div>
755
755
  <div
756
- class="pf-v5-l-flex__item pf-m-spacer-md"
756
+ class="pf-v6-l-flex__item pf-m-spacer-md"
757
757
  style="--pf-v5-l-flex--item--Order-on-md: -1;"
758
758
  >Item C</div>
759
759
  </div>
@@ -763,40 +763,40 @@ Ordering - Ordering can be applied to nested `.pf-v5-l-flex` and `.pf-v5-l-flex_
763
763
  ### Responsive ordering example
764
764
 
765
765
  ```html
766
- <div class="pf-v5-l-flex">
766
+ <div class="pf-v6-l-flex">
767
767
  <div
768
- class="pf-v5-l-flex pf-m-spacer-none"
768
+ class="pf-v6-l-flex pf-m-spacer-none"
769
769
  style="--pf-v5-l-flex--item--Order-on-lg: 1;"
770
770
  >
771
771
  <div
772
- class="pf-v5-l-flex__item"
772
+ class="pf-v6-l-flex__item"
773
773
  style="--pf-v5-l-flex--item--Order-on-md: 2;"
774
774
  >Set 1, Item A</div>
775
775
  <div
776
- class="pf-v5-l-flex__item"
776
+ class="pf-v6-l-flex__item"
777
777
  style="--pf-v5-l-flex--item--Order-on-md: -1;"
778
778
  >Set 1, Item B</div>
779
779
  <div
780
- class="pf-v5-l-flex__item"
780
+ class="pf-v6-l-flex__item"
781
781
  style="--pf-v5-l-flex--item--Order-on-xl: 1;"
782
782
  >Set 1, Item C</div>
783
783
  <div
784
- class="pf-v5-l-flex__item pf-m-spacer-none-on-xl"
784
+ class="pf-v6-l-flex__item pf-m-spacer-none-on-xl"
785
785
  style="--pf-v5-l-flex--item--Order-on-xl: 2;"
786
786
  >Set 1, Item D</div>
787
787
  </div>
788
- <div class="pf-v5-l-flex pf-m-spacer-md-on-lg">
788
+ <div class="pf-v6-l-flex pf-m-spacer-md-on-lg">
789
789
  <div
790
- class="pf-v5-l-flex__item pf-m-spacer-none"
790
+ class="pf-v6-l-flex__item pf-m-spacer-none"
791
791
  style="--pf-v5-l-flex--item--Order: 3;"
792
792
  >Set 2, Item A</div>
793
793
  <div
794
- class="pf-v5-l-flex__item"
794
+ class="pf-v6-l-flex__item"
795
795
  style="--pf-v5-l-flex--item--Order: 1;"
796
796
  >Set 2, Item B</div>
797
- <div class="pf-v5-l-flex__item">Set 2, Item C</div>
797
+ <div class="pf-v6-l-flex__item">Set 2, Item C</div>
798
798
  <div
799
- class="pf-v5-l-flex__item pf-m-spacer-md"
799
+ class="pf-v6-l-flex__item pf-m-spacer-md"
800
800
  style="--pf-v5-l-flex--item--Order: 2;"
801
801
  >Set 2, Item D</div>
802
802
  </div>
@@ -813,11 +813,11 @@ Ordering - Ordering can be applied to nested `.pf-v5-l-flex` and `.pf-v5-l-flex_
813
813
  ## Flex layout as list
814
814
 
815
815
  ```html
816
- <ul class="pf-v5-l-flex">
817
- <li class="pf-v5-l-flex__item">Flex item</li>
818
- <li class="pf-v5-l-flex__item">Flex item</li>
819
- <li class="pf-v5-l-flex__item">Flex item</li>
820
- <li class="pf-v5-l-flex__item">Flex item</li>
816
+ <ul class="pf-v6-l-flex">
817
+ <li class="pf-v6-l-flex__item">Flex item</li>
818
+ <li class="pf-v6-l-flex__item">Flex item</li>
819
+ <li class="pf-v6-l-flex__item">Flex item</li>
820
+ <li class="pf-v6-l-flex__item">Flex item</li>
821
821
  </ul>
822
822
 
823
823
  ```