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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (259) hide show
  1. package/base/patternfly-common.css +10 -10
  2. package/base/patternfly-globals.css +3 -3
  3. package/base/patternfly-icons.css +1 -1
  4. package/base/patternfly-themes.css +53 -53
  5. package/base/patternfly-variables.css +236 -245
  6. package/base/tokens/_tokens-font.scss +0 -11
  7. package/components/AboutModalBox/about-modal-box.css +102 -102
  8. package/components/Accordion/accordion.css +118 -118
  9. package/components/ActionList/action-list.css +16 -16
  10. package/components/Alert/alert-group.css +50 -50
  11. package/components/Alert/alert.css +161 -161
  12. package/components/AppLauncher/app-launcher.css +167 -167
  13. package/components/Avatar/avatar.css +116 -116
  14. package/components/BackToTop/back-to-top.css +21 -21
  15. package/components/Backdrop/backdrop.css +9 -9
  16. package/components/BackgroundImage/background-image.css +15 -15
  17. package/components/Badge/badge.css +35 -35
  18. package/components/Banner/banner.css +114 -114
  19. package/components/Brand/brand.css +28 -28
  20. package/components/Breadcrumb/breadcrumb.css +62 -62
  21. package/components/Button/button.css +514 -514
  22. package/components/CalendarMonth/calendar-month.css +144 -144
  23. package/components/Card/card.css +230 -230
  24. package/components/Check/check.css +43 -43
  25. package/components/Chip/chip-group.css +60 -60
  26. package/components/Chip/chip.css +83 -83
  27. package/components/ClipboardCopy/clipboard-copy.css +71 -71
  28. package/components/CodeBlock/code-block.css +35 -35
  29. package/components/CodeEditor/code-editor.css +121 -121
  30. package/components/Content/content.css +216 -216
  31. package/components/ContextSelector/context-selector.css +251 -251
  32. package/components/DataList/data-list-grid.css +182 -182
  33. package/components/DataList/data-list.css +468 -468
  34. package/components/DatePicker/date-picker.css +35 -35
  35. package/components/DescriptionList/description-list-order.css +90 -90
  36. package/components/DescriptionList/description-list.css +193 -193
  37. package/components/Divider/divider.css +143 -143
  38. package/components/DragDrop/drag-drop.css +46 -46
  39. package/components/Drawer/drawer.css +474 -474
  40. package/components/Dropdown/dropdown.css +457 -457
  41. package/components/DualListSelector/dual-list-selector.css +199 -199
  42. package/components/EmptyState/empty-state.css +104 -104
  43. package/components/ExpandableSection/expandable-section.css +113 -113
  44. package/components/FileUpload/file-upload.css +32 -32
  45. package/components/Form/form.css +281 -281
  46. package/components/FormControl/form-control.css +197 -197
  47. package/components/HelperText/helper-text.css +51 -51
  48. package/components/Hint/hint.css +46 -46
  49. package/components/Icon/icon.css +218 -218
  50. package/components/InlineEdit/inline-edit.css +43 -43
  51. package/components/InputGroup/input-group.css +52 -52
  52. package/components/JumpLinks/jump-links.css +183 -183
  53. package/components/Label/label-group.css +86 -86
  54. package/components/Label/label.css +438 -438
  55. package/components/List/list.css +53 -53
  56. package/components/LogViewer/log-viewer.css +138 -138
  57. package/components/Login/login.css +139 -139
  58. package/components/Masthead/masthead.css +319 -319
  59. package/components/Menu/menu.css +415 -415
  60. package/components/MenuToggle/menu-toggle.css +275 -275
  61. package/components/ModalBox/modal-box.css +121 -121
  62. package/components/MultipleFileUpload/multiple-file-upload.css +163 -163
  63. package/components/Nav/nav.css +225 -225
  64. package/components/NotificationBadge/notification-badge.css +66 -66
  65. package/components/NotificationDrawer/notification-drawer.css +179 -179
  66. package/components/NumberInput/number-input.css +20 -20
  67. package/components/OptionsMenu/options-menu.css +190 -190
  68. package/components/OverflowMenu/overflow-menu.css +19 -19
  69. package/components/Page/page.css +598 -598
  70. package/components/Pagination/pagination.css +220 -220
  71. package/components/Panel/panel.css +72 -72
  72. package/components/Popover/popover.css +148 -148
  73. package/components/Progress/progress.css +80 -80
  74. package/components/ProgressStepper/progress-stepper.css +514 -514
  75. package/components/Radio/radio.css +44 -44
  76. package/components/Select/select.css +423 -423
  77. package/components/Sidebar/sidebar.css +166 -166
  78. package/components/SimpleList/simple-list.css +53 -53
  79. package/components/Skeleton/skeleton.css +112 -112
  80. package/components/SkipToContent/skip-to-content.css +8 -8
  81. package/components/Slider/slider.css +144 -144
  82. package/components/Spinner/spinner.css +36 -36
  83. package/components/Switch/switch.css +89 -89
  84. package/components/TabContent/tab-content.css +34 -34
  85. package/components/Table/table-grid.css +911 -911
  86. package/components/Table/table-scrollable.css +38 -38
  87. package/components/Table/table-tree-view.css +497 -497
  88. package/components/Table/table.css +660 -660
  89. package/components/Tabs/tabs.css +616 -616
  90. package/components/TextInputGroup/text-input-group.css +88 -88
  91. package/components/Tile/tile.css +68 -68
  92. package/components/Timestamp/timestamp.css +29 -29
  93. package/components/Title/title.css +87 -87
  94. package/components/ToggleGroup/toggle-group.css +86 -86
  95. package/components/Toolbar/toolbar.css +2279 -2279
  96. package/components/Tooltip/tooltip.css +85 -85
  97. package/components/TreeView/tree-view.css +363 -363
  98. package/components/Truncate/truncate.css +15 -15
  99. package/components/Wizard/wizard.css +272 -272
  100. package/docs/components/AboutModalBox/examples/AboutModalBox.md +11 -11
  101. package/docs/components/Accordion/examples/Accordion.md +188 -188
  102. package/docs/components/ActionList/examples/ActionList.md +55 -55
  103. package/docs/components/Alert/examples/Alert.md +222 -222
  104. package/docs/components/AppLauncher/deprecated/application-launcher.md +146 -146
  105. package/docs/components/Avatar/examples/Avatar.md +6 -6
  106. package/docs/components/BackToTop/examples/BackToTop.md +3 -3
  107. package/docs/components/Backdrop/examples/Backdrop.md +1 -1
  108. package/docs/components/BackgroundImage/examples/BackgroundImage.md +2 -2
  109. package/docs/components/Badge/examples/Badge.md +17 -17
  110. package/docs/components/Banner/examples/Banner.md +42 -42
  111. package/docs/components/Brand/examples/Brand.md +4 -4
  112. package/docs/components/Breadcrumb/examples/Breadcrumb.md +90 -90
  113. package/docs/components/Button/examples/Button.md +364 -364
  114. package/docs/components/CalendarMonth/examples/CalendarMonth.md +436 -436
  115. package/docs/components/Card/examples/Card.md +515 -515
  116. package/docs/components/Check/examples/Check.md +37 -37
  117. package/docs/components/Chip/examples/Chip.md +216 -216
  118. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +82 -82
  119. package/docs/components/CodeBlock/examples/CodeBlock.md +39 -39
  120. package/docs/components/CodeEditor/examples/CodeEditor.md +85 -85
  121. package/docs/components/Content/examples/Content.md +1 -1
  122. package/docs/components/ContextSelector/deprecated/context-selector.md +160 -160
  123. package/docs/components/DataList/examples/DataList.md +666 -666
  124. package/docs/components/DatePicker/examples/DatePicker.md +54 -54
  125. package/docs/components/DescriptionList/examples/DescriptionList.md +737 -737
  126. package/docs/components/Divider/examples/Divider.md +18 -18
  127. package/docs/components/DragDrop/examples/DragDrop.md +27 -27
  128. package/docs/components/Drawer/examples/Drawer.md +225 -225
  129. package/docs/components/Dropdown/deprecated/Dropdown.md +541 -541
  130. package/docs/components/DualListSelector/examples/DualListSelector.md +1012 -1012
  131. package/docs/components/EmptyState/examples/EmptyState.md +100 -100
  132. package/docs/components/ExpandableSection/examples/ExpandableSection.md +47 -47
  133. package/docs/components/FileUpload/examples/FileUpload.md +94 -94
  134. package/docs/components/Form/examples/Form.md +226 -226
  135. package/docs/components/FormControl/examples/FormControl.md +65 -65
  136. package/docs/components/HelperText/examples/HelperText.md +72 -72
  137. package/docs/components/Hint/examples/Hint.md +44 -44
  138. package/docs/components/Icon/examples/Icon.md +85 -85
  139. package/docs/components/InlineEdit/examples/InlineEdit.md +209 -209
  140. package/docs/components/InputGroup/examples/InputGroup.md +73 -73
  141. package/docs/components/JumpLinks/examples/JumpLinks.md +285 -285
  142. package/docs/components/Label/examples/Label.md +1717 -1717
  143. package/docs/components/List/examples/List.md +30 -30
  144. package/docs/components/LogViewer/examples/LogViewer.md +1785 -1785
  145. package/docs/components/Login/examples/Login.md +287 -287
  146. package/docs/components/Masthead/examples/masthead.md +39 -39
  147. package/docs/components/Menu/examples/Menu.md +2377 -2377
  148. package/docs/components/MenuToggle/examples/MenuToggle.md +242 -242
  149. package/docs/components/ModalBox/examples/ModalBox.md +119 -119
  150. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +192 -192
  151. package/docs/components/Nav/examples/Navigation.md +856 -856
  152. package/docs/components/NotificationBadge/examples/NotificationBadge.md +42 -42
  153. package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +659 -659
  154. package/docs/components/NumberInput/examples/NumberInput.md +127 -127
  155. package/docs/components/OptionsMenu/deprecated/options-menu.md +178 -178
  156. package/docs/components/OverflowMenu/examples/overflow-menu.md +97 -97
  157. package/docs/components/Page/deprecated/PageHeader.md +85 -85
  158. package/docs/components/Page/examples/Page.md +90 -90
  159. package/docs/components/Pagination/examples/Pagination.md +285 -285
  160. package/docs/components/Panel/examples/Panel.md +38 -38
  161. package/docs/components/Popover/examples/Popover.md +169 -169
  162. package/docs/components/Progress/examples/Progress.md +145 -145
  163. package/docs/components/ProgressStepper/examples/ProgressStepper.md +295 -295
  164. package/docs/components/Radio/examples/Radio.md +33 -33
  165. package/docs/components/Select/deprecated/Select.md +736 -736
  166. package/docs/components/Sidebar/examples/Sidebar.md +65 -65
  167. package/docs/components/SimpleList/examples/SimpleList.md +39 -39
  168. package/docs/components/Skeleton/examples/Skeleton.md +29 -29
  169. package/docs/components/SkipToContent/examples/SkipToContent.md +3 -3
  170. package/docs/components/Slider/examples/Slider.md +213 -213
  171. package/docs/components/Spinner/examples/Spinner.md +14 -14
  172. package/docs/components/Switch/examples/Switch.md +58 -58
  173. package/docs/components/TabContent/examples/TabContent.md +24 -24
  174. package/docs/components/Table/examples/Table.md +6982 -6982
  175. package/docs/components/Tabs/examples/Tabs.md +2114 -2114
  176. package/docs/components/TextInputGroup/examples/TextInputGroup.md +373 -373
  177. package/docs/components/Tile/examples/Tile.md +131 -131
  178. package/docs/components/Timestamp/examples/Timestamp.md +10 -10
  179. package/docs/components/Title/examples/Title.md +12 -12
  180. package/docs/components/ToggleGroup/examples/toggle-group.md +116 -116
  181. package/docs/components/Toolbar/examples/Toolbar.md +611 -611
  182. package/docs/components/Tooltip/examples/Tooltip.md +27 -27
  183. package/docs/components/TreeView/examples/TreeView.md +1166 -1166
  184. package/docs/components/Truncate/examples/Truncate.md +7 -7
  185. package/docs/components/Wizard/examples/Wizard.md +522 -522
  186. package/docs/demos/AboutModal/examples/AboutModal.md +106 -106
  187. package/docs/demos/Alert/examples/Alert.md +391 -391
  188. package/docs/demos/BackToTop/examples/BackToTop.md +175 -175
  189. package/docs/demos/Banner/examples/Banner.md +364 -364
  190. package/docs/demos/Button/examples/Button.md +50 -50
  191. package/docs/demos/Card/examples/Card.md +1054 -1054
  192. package/docs/demos/CardView/examples/CardView.md +378 -378
  193. package/docs/demos/ContextSelector/examples/ContextSelector.md +449 -449
  194. package/docs/demos/Dashboard/examples/Dashboard.md +541 -541
  195. package/docs/demos/DataList/examples/DataList.md +1148 -1148
  196. package/docs/demos/DescriptionList/examples/DescriptionList.md +544 -544
  197. package/docs/demos/Drawer/examples/Drawer.md +531 -531
  198. package/docs/demos/Form/examples/BasicForms.md +444 -444
  199. package/docs/demos/HelperText/examples/HelperText.md +51 -51
  200. package/docs/demos/JumpLinks/examples/JumpLinks.md +596 -596
  201. package/docs/demos/Masthead/examples/Masthead.md +763 -763
  202. package/docs/demos/Modal/examples/Modal.md +645 -645
  203. package/docs/demos/Nav/examples/Nav.md +649 -649
  204. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +1570 -1570
  205. package/docs/demos/Page/examples/Page.md +1330 -1330
  206. package/docs/demos/Page/examples/Penta.md +217 -217
  207. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +23 -23
  208. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +108 -108
  209. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +1890 -1890
  210. package/docs/demos/Skeleton/examples/Skeleton.md +176 -176
  211. package/docs/demos/Table/examples/Table.md +4580 -4580
  212. package/docs/demos/Tabs/examples/Tabs.md +1040 -1040
  213. package/docs/demos/Toolbar/examples/Toolbar.md +961 -961
  214. package/docs/demos/Wizard/examples/Wizard.md +1574 -1574
  215. package/docs/layouts/Bullseye/examples/Bullseye.md +2 -2
  216. package/docs/layouts/Flex/examples/Flex.md +290 -290
  217. package/docs/layouts/Gallery/examples/Gallery.md +48 -48
  218. package/docs/layouts/Grid/examples/Grid.md +121 -121
  219. package/docs/layouts/Level/examples/Level.md +11 -11
  220. package/docs/layouts/Split/examples/Split.md +23 -23
  221. package/docs/layouts/Stack/examples/Stack.md +8 -8
  222. package/docs/utilities/Accessibility/examples/Accessibility.md +3 -3
  223. package/docs/utilities/Alignment/examples/Alignment.md +4 -4
  224. package/docs/utilities/Display/examples/Display.md +16 -16
  225. package/docs/utilities/Flex/examples/Flex.md +53 -53
  226. package/docs/utilities/Float/examples/Float.md +2 -2
  227. package/docs/utilities/Spacing/examples/Spacing.md +16 -16
  228. package/layouts/Bullseye/bullseye.css +3 -3
  229. package/layouts/Flex/flex.css +1276 -1276
  230. package/layouts/Gallery/gallery.css +34 -34
  231. package/layouts/Grid/grid.css +531 -531
  232. package/layouts/Level/level.css +4 -4
  233. package/layouts/Split/split.css +6 -6
  234. package/layouts/Stack/stack.css +5 -5
  235. package/package.json +5 -5
  236. package/patternfly-addons.css +2989 -2989
  237. package/patternfly-base-no-globals-theme-dark-unversioned.css +269 -278
  238. package/patternfly-base-no-globals.css +284 -293
  239. package/patternfly-base-theme-dark-unversioned.css +271 -280
  240. package/patternfly-base.css +286 -295
  241. package/patternfly-charts-theme-dark-unversioned.css +66 -66
  242. package/patternfly-charts-theme-dark.css +66 -66
  243. package/patternfly-charts.css +320 -320
  244. package/patternfly-no-globals.css +20217 -20226
  245. package/patternfly-theme-dark-unversioned.css +20209 -20218
  246. package/patternfly.css +20219 -20228
  247. package/patternfly.min.css +1 -1
  248. package/patternfly.min.css.map +1 -1
  249. package/sass-utilities/_init.scss +1 -1
  250. package/utilities/Accessibility/accessibility.css +18 -18
  251. package/utilities/Alignment/alignment.css +24 -24
  252. package/utilities/BackgroundColor/BackgroundColor.css +252 -252
  253. package/utilities/BoxShadow/box-shadow.css +42 -42
  254. package/utilities/Display/display.css +54 -54
  255. package/utilities/Flex/flex.css +228 -228
  256. package/utilities/Float/float.css +12 -12
  257. package/utilities/Sizing/sizing.css +216 -216
  258. package/utilities/Spacing/spacing.css +1512 -1512
  259. package/utilities/Text/text.css +631 -631
package/docs/components/Drawer/examples/Drawer.md CHANGED
@@ -9,20 +9,20 @@ cssPrefix: pf-v5-c-drawer
9
9
  ### Closed panel on right (default)
10
10
 
11
11
  ```html
12
- <div class="pf-v5-c-drawer">
13
- <div class="pf-v5-c-drawer__main">
14
- <div class="pf-v5-c-drawer__content">
12
+ <div class="pf-v6-c-drawer">
13
+ <div class="pf-v6-c-drawer__main">
14
+ <div class="pf-v6-c-drawer__content">
15
15
  <div
16
- class="pf-v5-c-drawer__body"
16
+ class="pf-v6-c-drawer__body"
17
17
  >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat, nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.</div>
18
18
  </div>
19
- <div class="pf-v5-c-drawer__panel" hidden>
20
- <div class="pf-v5-c-drawer__head">
19
+ <div class="pf-v6-c-drawer__panel" hidden>
20
+ <div class="pf-v6-c-drawer__head">
21
21
  <span>Drawer panel header content</span>
22
- <div class="pf-v5-c-drawer__actions">
23
- <div class="pf-v5-c-drawer__close">
22
+ <div class="pf-v6-c-drawer__actions">
23
+ <div class="pf-v6-c-drawer__close">
24
24
  <button
25
- class="pf-v5-c-button pf-m-plain"
25
+ class="pf-v6-c-button pf-m-plain"
26
26
  type="button"
27
27
  aria-label="Close drawer panel"
28
28
  >
@@ -32,9 +32,9 @@ cssPrefix: pf-v5-c-drawer
32
32
  </div>
33
33
  </div>
34
34
  <div
35
- class="pf-v5-c-drawer__description"
35
+ class="pf-v6-c-drawer__description"
36
36
  >This is a helpful description of the drawer panel.</div>
37
- <div class="pf-v5-c-drawer__body">Drawer panel body content</div>
37
+ <div class="pf-v6-c-drawer__body">Drawer panel body content</div>
38
38
  </div>
39
39
  </div>
40
40
  </div>
@@ -44,20 +44,20 @@ cssPrefix: pf-v5-c-drawer
44
44
  ### Expanded panel on right
45
45
 
46
46
  ```html
47
- <div class="pf-v5-c-drawer pf-m-expanded">
48
- <div class="pf-v5-c-drawer__main">
49
- <div class="pf-v5-c-drawer__content">
47
+ <div class="pf-v6-c-drawer pf-m-expanded">
48
+ <div class="pf-v6-c-drawer__main">
49
+ <div class="pf-v6-c-drawer__content">
50
50
  <div
51
- class="pf-v5-c-drawer__body"
51
+ class="pf-v6-c-drawer__body"
52
52
  >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat, nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.</div>
53
53
  </div>
54
- <div class="pf-v5-c-drawer__panel">
55
- <div class="pf-v5-c-drawer__head">
54
+ <div class="pf-v6-c-drawer__panel">
55
+ <div class="pf-v6-c-drawer__head">
56
56
  <span>Drawer panel header content</span>
57
- <div class="pf-v5-c-drawer__actions">
58
- <div class="pf-v5-c-drawer__close">
57
+ <div class="pf-v6-c-drawer__actions">
58
+ <div class="pf-v6-c-drawer__close">
59
59
  <button
60
- class="pf-v5-c-button pf-m-plain"
60
+ class="pf-v6-c-button pf-m-plain"
61
61
  type="button"
62
62
  aria-label="Close drawer panel"
63
63
  >
@@ -67,9 +67,9 @@ cssPrefix: pf-v5-c-drawer
67
67
  </div>
68
68
  </div>
69
69
  <div
70
- class="pf-v5-c-drawer__description"
70
+ class="pf-v6-c-drawer__description"
71
71
  >This is a helpful description of the drawer panel.</div>
72
- <div class="pf-v5-c-drawer__body">Drawer panel body content</div>
72
+ <div class="pf-v6-c-drawer__body">Drawer panel body content</div>
73
73
  </div>
74
74
  </div>
75
75
  </div>
@@ -79,20 +79,20 @@ cssPrefix: pf-v5-c-drawer
79
79
  ### Closed panel on left
80
80
 
81
81
  ```html
82
- <div class="pf-v5-c-drawer pf-m-panel-left">
83
- <div class="pf-v5-c-drawer__main">
84
- <div class="pf-v5-c-drawer__content">
82
+ <div class="pf-v6-c-drawer pf-m-panel-left">
83
+ <div class="pf-v6-c-drawer__main">
84
+ <div class="pf-v6-c-drawer__content">
85
85
  <div
86
- class="pf-v5-c-drawer__body"
86
+ class="pf-v6-c-drawer__body"
87
87
  >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat, nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.</div>
88
88
  </div>
89
- <div class="pf-v5-c-drawer__panel" hidden>
90
- <div class="pf-v5-c-drawer__head">
89
+ <div class="pf-v6-c-drawer__panel" hidden>
90
+ <div class="pf-v6-c-drawer__head">
91
91
  <span>Drawer panel header content</span>
92
- <div class="pf-v5-c-drawer__actions">
93
- <div class="pf-v5-c-drawer__close">
92
+ <div class="pf-v6-c-drawer__actions">
93
+ <div class="pf-v6-c-drawer__close">
94
94
  <button
95
- class="pf-v5-c-button pf-m-plain"
95
+ class="pf-v6-c-button pf-m-plain"
96
96
  type="button"
97
97
  aria-label="Close drawer panel"
98
98
  >
@@ -102,9 +102,9 @@ cssPrefix: pf-v5-c-drawer
102
102
  </div>
103
103
  </div>
104
104
  <div
105
- class="pf-v5-c-drawer__description"
105
+ class="pf-v6-c-drawer__description"
106
106
  >This is a helpful description of the drawer panel.</div>
107
- <div class="pf-v5-c-drawer__body">Drawer panel body content</div>
107
+ <div class="pf-v6-c-drawer__body">Drawer panel body content</div>
108
108
  </div>
109
109
  </div>
110
110
  </div>
@@ -114,20 +114,20 @@ cssPrefix: pf-v5-c-drawer
114
114
  ### Expanded panel on left
115
115
 
116
116
  ```html
117
- <div class="pf-v5-c-drawer pf-m-expanded pf-m-panel-left">
118
- <div class="pf-v5-c-drawer__main">
119
- <div class="pf-v5-c-drawer__content">
117
+ <div class="pf-v6-c-drawer pf-m-expanded pf-m-panel-left">
118
+ <div class="pf-v6-c-drawer__main">
119
+ <div class="pf-v6-c-drawer__content">
120
120
  <div
121
- class="pf-v5-c-drawer__body"
121
+ class="pf-v6-c-drawer__body"
122
122
  >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat, nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.</div>
123
123
  </div>
124
- <div class="pf-v5-c-drawer__panel">
125
- <div class="pf-v5-c-drawer__head">
124
+ <div class="pf-v6-c-drawer__panel">
125
+ <div class="pf-v6-c-drawer__head">
126
126
  <span>Drawer panel header content</span>
127
- <div class="pf-v5-c-drawer__actions">
128
- <div class="pf-v5-c-drawer__close">
127
+ <div class="pf-v6-c-drawer__actions">
128
+ <div class="pf-v6-c-drawer__close">
129
129
  <button
130
- class="pf-v5-c-button pf-m-plain"
130
+ class="pf-v6-c-button pf-m-plain"
131
131
  type="button"
132
132
  aria-label="Close drawer panel"
133
133
  >
@@ -137,9 +137,9 @@ cssPrefix: pf-v5-c-drawer
137
137
  </div>
138
138
  </div>
139
139
  <div
140
- class="pf-v5-c-drawer__description"
140
+ class="pf-v6-c-drawer__description"
141
141
  >This is a helpful description of the drawer panel.</div>
142
- <div class="pf-v5-c-drawer__body">Drawer panel body content</div>
142
+ <div class="pf-v6-c-drawer__body">Drawer panel body content</div>
143
143
  </div>
144
144
  </div>
145
145
  </div>
@@ -149,22 +149,22 @@ cssPrefix: pf-v5-c-drawer
149
149
  ### Closed panel on bottom
150
150
 
151
151
  ```html
152
- <div class="pf-v5-c-drawer pf-m-panel-bottom">
153
- <div class="pf-v5-c-drawer__main">
154
- <div class="pf-v5-c-drawer__content">
155
- <div class="pf-v5-c-drawer__body">
152
+ <div class="pf-v6-c-drawer pf-m-panel-bottom">
153
+ <div class="pf-v6-c-drawer__main">
154
+ <div class="pf-v6-c-drawer__content">
155
+ <div class="pf-v6-c-drawer__body">
156
156
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat, nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.
157
157
  <br />
158
158
  <br />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat, nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.
159
159
  </div>
160
160
  </div>
161
- <div class="pf-v5-c-drawer__panel" hidden>
162
- <div class="pf-v5-c-drawer__head">
161
+ <div class="pf-v6-c-drawer__panel" hidden>
162
+ <div class="pf-v6-c-drawer__head">
163
163
  <span>Drawer panel header content</span>
164
- <div class="pf-v5-c-drawer__actions">
165
- <div class="pf-v5-c-drawer__close">
164
+ <div class="pf-v6-c-drawer__actions">
165
+ <div class="pf-v6-c-drawer__close">
166
166
  <button
167
- class="pf-v5-c-button pf-m-plain"
167
+ class="pf-v6-c-button pf-m-plain"
168
168
  type="button"
169
169
  aria-label="Close drawer panel"
170
170
  >
@@ -174,9 +174,9 @@ cssPrefix: pf-v5-c-drawer
174
174
  </div>
175
175
  </div>
176
176
  <div
177
- class="pf-v5-c-drawer__description"
177
+ class="pf-v6-c-drawer__description"
178
178
  >This is a helpful description of the drawer panel.</div>
179
- <div class="pf-v5-c-drawer__body">Drawer panel body content</div>
179
+ <div class="pf-v6-c-drawer__body">Drawer panel body content</div>
180
180
  </div>
181
181
  </div>
182
182
  </div>
@@ -186,23 +186,23 @@ cssPrefix: pf-v5-c-drawer
186
186
  ### Expanded panel on bottom
187
187
 
188
188
  ```html
189
- <div class="pf-v5-c-drawer pf-m-expanded pf-m-panel-bottom">
190
- <div class="pf-v5-c-drawer__main">
191
- <div class="pf-v5-c-drawer__content">
192
- <div class="pf-v5-c-drawer__body">
189
+ <div class="pf-v6-c-drawer pf-m-expanded pf-m-panel-bottom">
190
+ <div class="pf-v6-c-drawer__main">
191
+ <div class="pf-v6-c-drawer__content">
192
+ <div class="pf-v6-c-drawer__body">
193
193
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat, nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.
194
194
  <br />
195
195
  <br />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat, nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.
196
196
  </div>
197
197
  </div>
198
198
 
199
- <div class="pf-v5-c-drawer__panel">
200
- <div class="pf-v5-c-drawer__head">
199
+ <div class="pf-v6-c-drawer__panel">
200
+ <div class="pf-v6-c-drawer__head">
201
201
  <span>Drawer panel header content</span>
202
- <div class="pf-v5-c-drawer__actions">
203
- <div class="pf-v5-c-drawer__close">
202
+ <div class="pf-v6-c-drawer__actions">
203
+ <div class="pf-v6-c-drawer__close">
204
204
  <button
205
- class="pf-v5-c-button pf-m-plain"
205
+ class="pf-v6-c-button pf-m-plain"
206
206
  type="button"
207
207
  aria-label="Close drawer panel"
208
208
  >
@@ -212,9 +212,9 @@ cssPrefix: pf-v5-c-drawer
212
212
  </div>
213
213
  </div>
214
214
  <div
215
- class="pf-v5-c-drawer__description"
215
+ class="pf-v6-c-drawer__description"
216
216
  >This is a helpful description of the drawer panel.</div>
217
- <div class="pf-v5-c-drawer__body">Drawer panel body content</div>
217
+ <div class="pf-v6-c-drawer__body">Drawer panel body content</div>
218
218
  </div>
219
219
  </div>
220
220
  </div>
@@ -224,20 +224,20 @@ cssPrefix: pf-v5-c-drawer
224
224
  ### Expanded inline panel
225
225
 
226
226
  ```html
227
- <div class="pf-v5-c-drawer pf-m-expanded pf-m-inline">
228
- <div class="pf-v5-c-drawer__main">
229
- <div class="pf-v5-c-drawer__content">
227
+ <div class="pf-v6-c-drawer pf-m-expanded pf-m-inline">
228
+ <div class="pf-v6-c-drawer__main">
229
+ <div class="pf-v6-c-drawer__content">
230
230
  <div
231
- class="pf-v5-c-drawer__body"
231
+ class="pf-v6-c-drawer__body"
232
232
  >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat, nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.</div>
233
233
  </div>
234
- <div class="pf-v5-c-drawer__panel">
235
- <div class="pf-v5-c-drawer__head">
234
+ <div class="pf-v6-c-drawer__panel">
235
+ <div class="pf-v6-c-drawer__head">
236
236
  <span>Drawer panel header content</span>
237
- <div class="pf-v5-c-drawer__actions">
238
- <div class="pf-v5-c-drawer__close">
237
+ <div class="pf-v6-c-drawer__actions">
238
+ <div class="pf-v6-c-drawer__close">
239
239
  <button
240
- class="pf-v5-c-button pf-m-plain"
240
+ class="pf-v6-c-button pf-m-plain"
241
241
  type="button"
242
242
  aria-label="Close drawer panel"
243
243
  >
@@ -247,9 +247,9 @@ cssPrefix: pf-v5-c-drawer
247
247
  </div>
248
248
  </div>
249
249
  <div
250
- class="pf-v5-c-drawer__description"
250
+ class="pf-v6-c-drawer__description"
251
251
  >This is a helpful description of the drawer panel.</div>
252
- <div class="pf-v5-c-drawer__body">Drawer panel body content</div>
252
+ <div class="pf-v6-c-drawer__body">Drawer panel body content</div>
253
253
  </div>
254
254
  </div>
255
255
  </div>
@@ -259,20 +259,20 @@ cssPrefix: pf-v5-c-drawer
259
259
  ### Expanded inline panel on left
260
260
 
261
261
  ```html
262
- <div class="pf-v5-c-drawer pf-m-expanded pf-m-inline pf-m-panel-left">
263
- <div class="pf-v5-c-drawer__main">
264
- <div class="pf-v5-c-drawer__content">
262
+ <div class="pf-v6-c-drawer pf-m-expanded pf-m-inline pf-m-panel-left">
263
+ <div class="pf-v6-c-drawer__main">
264
+ <div class="pf-v6-c-drawer__content">
265
265
  <div
266
- class="pf-v5-c-drawer__body"
266
+ class="pf-v6-c-drawer__body"
267
267
  >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat, nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.</div>
268
268
  </div>
269
- <div class="pf-v5-c-drawer__panel">
270
- <div class="pf-v5-c-drawer__head">
269
+ <div class="pf-v6-c-drawer__panel">
270
+ <div class="pf-v6-c-drawer__head">
271
271
  <span>Drawer panel header content</span>
272
- <div class="pf-v5-c-drawer__actions">
273
- <div class="pf-v5-c-drawer__close">
272
+ <div class="pf-v6-c-drawer__actions">
273
+ <div class="pf-v6-c-drawer__close">
274
274
  <button
275
- class="pf-v5-c-button pf-m-plain"
275
+ class="pf-v6-c-button pf-m-plain"
276
276
  type="button"
277
277
  aria-label="Close drawer panel"
278
278
  >
@@ -282,9 +282,9 @@ cssPrefix: pf-v5-c-drawer
282
282
  </div>
283
283
  </div>
284
284
  <div
285
- class="pf-v5-c-drawer__description"
285
+ class="pf-v6-c-drawer__description"
286
286
  >This is a helpful description of the drawer panel.</div>
287
- <div class="pf-v5-c-drawer__body">Drawer panel body content</div>
287
+ <div class="pf-v6-c-drawer__body">Drawer panel body content</div>
288
288
  </div>
289
289
  </div>
290
290
  </div>
@@ -294,20 +294,20 @@ cssPrefix: pf-v5-c-drawer
294
294
  ### Static
295
295
 
296
296
  ```html
297
- <div class="pf-v5-c-drawer pf-m-expanded pf-m-static">
298
- <div class="pf-v5-c-drawer__main">
299
- <div class="pf-v5-c-drawer__content">
297
+ <div class="pf-v6-c-drawer pf-m-expanded pf-m-static">
298
+ <div class="pf-v6-c-drawer__main">
299
+ <div class="pf-v6-c-drawer__content">
300
300
  <div
301
- class="pf-v5-c-drawer__body"
301
+ class="pf-v6-c-drawer__body"
302
302
  >Static drawers don't have interactive elements. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat, nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.</div>
303
303
  </div>
304
- <div class="pf-v5-c-drawer__panel">
305
- <div class="pf-v5-c-drawer__head">
304
+ <div class="pf-v6-c-drawer__panel">
305
+ <div class="pf-v6-c-drawer__head">
306
306
  <span>Drawer panel header content</span>
307
- <div class="pf-v5-c-drawer__actions">
308
- <div class="pf-v5-c-drawer__close">
307
+ <div class="pf-v6-c-drawer__actions">
308
+ <div class="pf-v6-c-drawer__close">
309
309
  <button
310
- class="pf-v5-c-button pf-m-plain"
310
+ class="pf-v6-c-button pf-m-plain"
311
311
  type="button"
312
312
  aria-label="Close drawer panel"
313
313
  >
@@ -317,9 +317,9 @@ cssPrefix: pf-v5-c-drawer
317
317
  </div>
318
318
  </div>
319
319
  <div
320
- class="pf-v5-c-drawer__description"
320
+ class="pf-v6-c-drawer__description"
321
321
  >This is a helpful description of the drawer panel.</div>
322
- <div class="pf-v5-c-drawer__body">Drawer panel body content</div>
322
+ <div class="pf-v6-c-drawer__body">Drawer panel body content</div>
323
323
  </div>
324
324
  </div>
325
325
  </div>
@@ -329,21 +329,21 @@ cssPrefix: pf-v5-c-drawer
329
329
  ### Stacked content body elements
330
330
 
331
331
  ```html
332
- <div class="pf-v5-c-drawer pf-m-expanded">
333
- <div class="pf-v5-c-drawer__main">
334
- <div class="pf-v5-c-drawer__content">
335
- <div class="pf-v5-c-drawer__body">content-body</div>
336
- <div class="pf-v5-c-drawer__body pf-m-padding">content-body with padding</div>
337
- <div class="pf-v5-c-drawer__body">content-body</div>
332
+ <div class="pf-v6-c-drawer pf-m-expanded">
333
+ <div class="pf-v6-c-drawer__main">
334
+ <div class="pf-v6-c-drawer__content">
335
+ <div class="pf-v6-c-drawer__body">content-body</div>
336
+ <div class="pf-v6-c-drawer__body pf-m-padding">content-body with padding</div>
337
+ <div class="pf-v6-c-drawer__body">content-body</div>
338
338
  </div>
339
339
 
340
- <div class="pf-v5-c-drawer__panel">
341
- <div class="pf-v5-c-drawer__head">
340
+ <div class="pf-v6-c-drawer__panel">
341
+ <div class="pf-v6-c-drawer__head">
342
342
  <span>Drawer panel header content</span>
343
- <div class="pf-v5-c-drawer__actions">
344
- <div class="pf-v5-c-drawer__close">
343
+ <div class="pf-v6-c-drawer__actions">
344
+ <div class="pf-v6-c-drawer__close">
345
345
  <button
346
- class="pf-v5-c-button pf-m-plain"
346
+ class="pf-v6-c-button pf-m-plain"
347
347
  type="button"
348
348
  aria-label="Close drawer panel"
349
349
  >
@@ -352,11 +352,11 @@ cssPrefix: pf-v5-c-drawer
352
352
  </div>
353
353
  </div>
354
354
  </div>
355
- <div class="pf-v5-c-drawer__body">Drawer panel body content</div>
355
+ <div class="pf-v6-c-drawer__body">Drawer panel body content</div>
356
356
  <div
357
- class="pf-v5-c-drawer__body pf-m-no-padding"
357
+ class="pf-v6-c-drawer__body pf-m-no-padding"
358
358
  >Drawer panel body content with no padding</div>
359
- <div class="pf-v5-c-drawer__body">Drawer panel body content</div>
359
+ <div class="pf-v6-c-drawer__body">Drawer panel body content</div>
360
360
  </div>
361
361
  </div>
362
362
  </div>
@@ -366,20 +366,20 @@ cssPrefix: pf-v5-c-drawer
366
366
  ### Modified content body padding
367
367
 
368
368
  ```html
369
- <div class="pf-v5-c-drawer pf-m-expanded">
370
- <div class="pf-v5-c-drawer__main">
371
- <div class="pf-v5-c-drawer__content">
372
- <div class="pf-v5-c-drawer__body pf-m-padding">
369
+ <div class="pf-v6-c-drawer pf-m-expanded">
370
+ <div class="pf-v6-c-drawer__main">
371
+ <div class="pf-v6-c-drawer__content">
372
+ <div class="pf-v6-c-drawer__body pf-m-padding">
373
373
  <b>Drawer content padding.</b>&nbsp;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat, nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.
374
374
  </div>
375
375
  </div>
376
- <div class="pf-v5-c-drawer__panel">
377
- <div class="pf-v5-c-drawer__head">
376
+ <div class="pf-v6-c-drawer__panel">
377
+ <div class="pf-v6-c-drawer__head">
378
378
  <span>Drawer panel header content</span>
379
- <div class="pf-v5-c-drawer__actions">
380
- <div class="pf-v5-c-drawer__close">
379
+ <div class="pf-v6-c-drawer__actions">
380
+ <div class="pf-v6-c-drawer__close">
381
381
  <button
382
- class="pf-v5-c-button pf-m-plain"
382
+ class="pf-v6-c-button pf-m-plain"
383
383
  type="button"
384
384
  aria-label="Close drawer panel"
385
385
  >
@@ -389,9 +389,9 @@ cssPrefix: pf-v5-c-drawer
389
389
  </div>
390
390
  </div>
391
391
  <div
392
- class="pf-v5-c-drawer__description"
392
+ class="pf-v6-c-drawer__description"
393
393
  >This is a helpful description of the drawer panel.</div>
394
- <div class="pf-v5-c-drawer__body">Drawer panel body content</div>
394
+ <div class="pf-v6-c-drawer__body">Drawer panel body content</div>
395
395
  </div>
396
396
  </div>
397
397
  </div>
@@ -401,20 +401,20 @@ cssPrefix: pf-v5-c-drawer
401
401
  ### Modified panel body padding
402
402
 
403
403
  ```html
404
- <div class="pf-v5-c-drawer pf-m-expanded">
405
- <div class="pf-v5-c-drawer__main">
406
- <div class="pf-v5-c-drawer__content">
404
+ <div class="pf-v6-c-drawer pf-m-expanded">
405
+ <div class="pf-v6-c-drawer__main">
406
+ <div class="pf-v6-c-drawer__content">
407
407
  <div
408
- class="pf-v5-c-drawer__body"
408
+ class="pf-v6-c-drawer__body"
409
409
  >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat, nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.</div>
410
410
  </div>
411
- <div class="pf-v5-c-drawer__panel">
412
- <div class="pf-v5-c-drawer__head">
411
+ <div class="pf-v6-c-drawer__panel">
412
+ <div class="pf-v6-c-drawer__head">
413
413
  <span>Drawer panel header content</span>
414
- <div class="pf-v5-c-drawer__actions">
415
- <div class="pf-v5-c-drawer__close">
414
+ <div class="pf-v6-c-drawer__actions">
415
+ <div class="pf-v6-c-drawer__close">
416
416
  <button
417
- class="pf-v5-c-button pf-m-plain"
417
+ class="pf-v6-c-button pf-m-plain"
418
418
  type="button"
419
419
  aria-label="Close drawer panel"
420
420
  >
@@ -423,9 +423,9 @@ cssPrefix: pf-v5-c-drawer
423
423
  </div>
424
424
  </div>
425
425
  </div>
426
- <div class="pf-v5-c-drawer__body">Drawer panel body content</div>
426
+ <div class="pf-v6-c-drawer__body">Drawer panel body content</div>
427
427
  <div
428
- class="pf-v5-c-drawer__body pf-m-paddinng"
428
+ class="pf-v6-c-drawer__body pf-m-paddinng"
429
429
  style="--pf-v5-c-drawer__panel__body--PaddingLeft: 48px;"
430
430
  >Drawer panel body content with modified inline start padding</div>
431
431
  </div>
@@ -437,22 +437,22 @@ cssPrefix: pf-v5-c-drawer
437
437
  ### Modified panel width
438
438
 
439
439
  ```html
440
- <div class="pf-v5-c-drawer pf-m-expanded">
441
- <div class="pf-v5-c-drawer__main">
442
- <div class="pf-v5-c-drawer__content">
440
+ <div class="pf-v6-c-drawer pf-m-expanded">
441
+ <div class="pf-v6-c-drawer__main">
442
+ <div class="pf-v6-c-drawer__content">
443
443
  <div
444
- class="pf-v5-c-drawer__body"
444
+ class="pf-v6-c-drawer__body"
445
445
  >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat, nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.</div>
446
446
  </div>
447
447
  <div
448
- class="pf-v5-c-drawer__panel pf-m-width-75 pf-m-width-33-on-lg pf-m-width-25-on-2xl"
448
+ class="pf-v6-c-drawer__panel pf-m-width-75 pf-m-width-33-on-lg pf-m-width-25-on-2xl"
449
449
  >
450
- <div class="pf-v5-c-drawer__head">
450
+ <div class="pf-v6-c-drawer__head">
451
451
  <span>Drawer panel header content</span>
452
- <div class="pf-v5-c-drawer__actions">
453
- <div class="pf-v5-c-drawer__close">
452
+ <div class="pf-v6-c-drawer__actions">
453
+ <div class="pf-v6-c-drawer__close">
454
454
  <button
455
- class="pf-v5-c-button pf-m-plain"
455
+ class="pf-v6-c-button pf-m-plain"
456
456
  type="button"
457
457
  aria-label="Close drawer panel"
458
458
  >
@@ -462,9 +462,9 @@ cssPrefix: pf-v5-c-drawer
462
462
  </div>
463
463
  </div>
464
464
  <div
465
- class="pf-v5-c-drawer__description"
465
+ class="pf-v6-c-drawer__description"
466
466
  >This is a helpful description of the drawer panel.</div>
467
- <div class="pf-v5-c-drawer__body">Drawer panel body content</div>
467
+ <div class="pf-v6-c-drawer__body">Drawer panel body content</div>
468
468
  </div>
469
469
  </div>
470
470
  </div>
@@ -474,21 +474,21 @@ cssPrefix: pf-v5-c-drawer
474
474
  ### Additional section above main
475
475
 
476
476
  ```html
477
- <div class="pf-v5-c-drawer pf-m-expanded">
478
- <div class="pf-v5-c-drawer__section">drawer-section</div>
479
- <div class="pf-v5-c-drawer__main">
480
- <div class="pf-v5-c-drawer__content">
477
+ <div class="pf-v6-c-drawer pf-m-expanded">
478
+ <div class="pf-v6-c-drawer__section">drawer-section</div>
479
+ <div class="pf-v6-c-drawer__main">
480
+ <div class="pf-v6-c-drawer__content">
481
481
  <div
482
- class="pf-v5-c-drawer__body"
482
+ class="pf-v6-c-drawer__body"
483
483
  >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat, nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.</div>
484
484
  </div>
485
- <div class="pf-v5-c-drawer__panel">
486
- <div class="pf-v5-c-drawer__head">
485
+ <div class="pf-v6-c-drawer__panel">
486
+ <div class="pf-v6-c-drawer__head">
487
487
  <span>Drawer panel header content</span>
488
- <div class="pf-v5-c-drawer__actions">
489
- <div class="pf-v5-c-drawer__close">
488
+ <div class="pf-v6-c-drawer__actions">
489
+ <div class="pf-v6-c-drawer__close">
490
490
  <button
491
- class="pf-v5-c-button pf-m-plain"
491
+ class="pf-v6-c-button pf-m-plain"
492
492
  type="button"
493
493
  aria-label="Close drawer panel"
494
494
  >
@@ -498,9 +498,9 @@ cssPrefix: pf-v5-c-drawer
498
498
  </div>
499
499
  </div>
500
500
  <div
501
- class="pf-v5-c-drawer__description"
501
+ class="pf-v6-c-drawer__description"
502
502
  >This is a helpful description of the drawer panel.</div>
503
- <div class="pf-v5-c-drawer__body">Drawer panel body content</div>
503
+ <div class="pf-v6-c-drawer__body">Drawer panel body content</div>
504
504
  </div>
505
505
  </div>
506
506
  </div>
@@ -510,29 +510,29 @@ cssPrefix: pf-v5-c-drawer
510
510
  ### Resizable panel
511
511
 
512
512
  ```html
513
- <div class="pf-v5-c-drawer pf-m-expanded">
514
- <div class="pf-v5-c-drawer__main">
515
- <div class="pf-v5-c-drawer__content">
513
+ <div class="pf-v6-c-drawer pf-m-expanded">
514
+ <div class="pf-v6-c-drawer__main">
515
+ <div class="pf-v6-c-drawer__content">
516
516
  <div
517
- class="pf-v5-c-drawer__body"
517
+ class="pf-v6-c-drawer__body"
518
518
  >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat, nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.</div>
519
519
  </div>
520
- <div class="pf-v5-c-drawer__panel pf-m-resizable">
520
+ <div class="pf-v6-c-drawer__panel pf-m-resizable">
521
521
  <div
522
- class="pf-v5-c-drawer__splitter pf-m-vertical"
522
+ class="pf-v6-c-drawer__splitter pf-m-vertical"
523
523
  role="separator"
524
524
  tabindex="0"
525
525
  aria-orientation="vertical"
526
526
  >
527
- <div class="pf-v5-c-drawer__splitter-handle"></div>
527
+ <div class="pf-v6-c-drawer__splitter-handle"></div>
528
528
  </div>
529
- <div class="pf-v5-c-drawer__panel-main">
530
- <div class="pf-v5-c-drawer__head">
529
+ <div class="pf-v6-c-drawer__panel-main">
530
+ <div class="pf-v6-c-drawer__head">
531
531
  <span>Drawer panel header content</span>
532
- <div class="pf-v5-c-drawer__actions">
533
- <div class="pf-v5-c-drawer__close">
532
+ <div class="pf-v6-c-drawer__actions">
533
+ <div class="pf-v6-c-drawer__close">
534
534
  <button
535
- class="pf-v5-c-button pf-m-plain"
535
+ class="pf-v6-c-button pf-m-plain"
536
536
  type="button"
537
537
  aria-label="Close drawer panel"
538
538
  >
@@ -542,9 +542,9 @@ cssPrefix: pf-v5-c-drawer
542
542
  </div>
543
543
  </div>
544
544
  <div
545
- class="pf-v5-c-drawer__description"
545
+ class="pf-v6-c-drawer__description"
546
546
  >This is a helpful description of the drawer panel.</div>
547
- <div class="pf-v5-c-drawer__body">Drawer panel body content</div>
547
+ <div class="pf-v6-c-drawer__body">Drawer panel body content</div>
548
548
  </div>
549
549
  </div>
550
550
  </div>
@@ -555,29 +555,29 @@ cssPrefix: pf-v5-c-drawer
555
555
  ### Resizable left panel
556
556
 
557
557
  ```html
558
- <div class="pf-v5-c-drawer pf-m-expanded pf-m-panel-left">
559
- <div class="pf-v5-c-drawer__main">
560
- <div class="pf-v5-c-drawer__content">
558
+ <div class="pf-v6-c-drawer pf-m-expanded pf-m-panel-left">
559
+ <div class="pf-v6-c-drawer__main">
560
+ <div class="pf-v6-c-drawer__content">
561
561
  <div
562
- class="pf-v5-c-drawer__body"
562
+ class="pf-v6-c-drawer__body"
563
563
  >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat, nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.</div>
564
564
  </div>
565
- <div class="pf-v5-c-drawer__panel pf-m-resizable">
565
+ <div class="pf-v6-c-drawer__panel pf-m-resizable">
566
566
  <div
567
- class="pf-v5-c-drawer__splitter pf-m-vertical"
567
+ class="pf-v6-c-drawer__splitter pf-m-vertical"
568
568
  role="separator"
569
569
  tabindex="0"
570
570
  aria-orientation="vertical"
571
571
  >
572
- <div class="pf-v5-c-drawer__splitter-handle"></div>
572
+ <div class="pf-v6-c-drawer__splitter-handle"></div>
573
573
  </div>
574
- <div class="pf-v5-c-drawer__panel-main">
575
- <div class="pf-v5-c-drawer__head">
574
+ <div class="pf-v6-c-drawer__panel-main">
575
+ <div class="pf-v6-c-drawer__head">
576
576
  <span>Drawer panel header content</span>
577
- <div class="pf-v5-c-drawer__actions">
578
- <div class="pf-v5-c-drawer__close">
577
+ <div class="pf-v6-c-drawer__actions">
578
+ <div class="pf-v6-c-drawer__close">
579
579
  <button
580
- class="pf-v5-c-button pf-m-plain"
580
+ class="pf-v6-c-button pf-m-plain"
581
581
  type="button"
582
582
  aria-label="Close drawer panel"
583
583
  >
@@ -587,9 +587,9 @@ cssPrefix: pf-v5-c-drawer
587
587
  </div>
588
588
  </div>
589
589
  <div
590
- class="pf-v5-c-drawer__description"
590
+ class="pf-v6-c-drawer__description"
591
591
  >This is a helpful description of the drawer panel.</div>
592
- <div class="pf-v5-c-drawer__body">Drawer panel body content</div>
592
+ <div class="pf-v6-c-drawer__body">Drawer panel body content</div>
593
593
  </div>
594
594
  </div>
595
595
  </div>
@@ -600,32 +600,32 @@ cssPrefix: pf-v5-c-drawer
600
600
  ### Resizable bottom panel
601
601
 
602
602
  ```html
603
- <div class="pf-v5-c-drawer pf-m-expanded pf-m-panel-bottom">
604
- <div class="pf-v5-c-drawer__main">
605
- <div class="pf-v5-c-drawer__content">
606
- <div class="pf-v5-c-drawer__body">
603
+ <div class="pf-v6-c-drawer pf-m-expanded pf-m-panel-bottom">
604
+ <div class="pf-v6-c-drawer__main">
605
+ <div class="pf-v6-c-drawer__content">
606
+ <div class="pf-v6-c-drawer__body">
607
607
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat, nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.
608
608
  <br />
609
609
  <br />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat, nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.
610
610
  </div>
611
611
  </div>
612
612
 
613
- <div class="pf-v5-c-drawer__panel pf-m-resizable">
613
+ <div class="pf-v6-c-drawer__panel pf-m-resizable">
614
614
  <div
615
- class="pf-v5-c-drawer__splitter"
615
+ class="pf-v6-c-drawer__splitter"
616
616
  role="separator"
617
617
  tabindex="0"
618
618
  aria-orientation="horizontal"
619
619
  >
620
- <div class="pf-v5-c-drawer__splitter-handle"></div>
620
+ <div class="pf-v6-c-drawer__splitter-handle"></div>
621
621
  </div>
622
- <div class="pf-v5-c-drawer__panel-main">
623
- <div class="pf-v5-c-drawer__head">
622
+ <div class="pf-v6-c-drawer__panel-main">
623
+ <div class="pf-v6-c-drawer__head">
624
624
  <span>Drawer panel header content</span>
625
- <div class="pf-v5-c-drawer__actions">
626
- <div class="pf-v5-c-drawer__close">
625
+ <div class="pf-v6-c-drawer__actions">
626
+ <div class="pf-v6-c-drawer__close">
627
627
  <button
628
- class="pf-v5-c-button pf-m-plain"
628
+ class="pf-v6-c-button pf-m-plain"
629
629
  type="button"
630
630
  aria-label="Close drawer panel"
631
631
  >
@@ -635,9 +635,9 @@ cssPrefix: pf-v5-c-drawer
635
635
  </div>
636
636
  </div>
637
637
  <div
638
- class="pf-v5-c-drawer__description"
638
+ class="pf-v6-c-drawer__description"
639
639
  >This is a helpful description of the drawer panel.</div>
640
- <div class="pf-v5-c-drawer__body">Drawer panel body content</div>
640
+ <div class="pf-v6-c-drawer__body">Drawer panel body content</div>
641
641
  </div>
642
642
  </div>
643
643
  </div>
@@ -648,29 +648,29 @@ cssPrefix: pf-v5-c-drawer
648
648
  ### Resizable inline panel
649
649
 
650
650
  ```html
651
- <div class="pf-v5-c-drawer pf-m-expanded pf-m-inline">
652
- <div class="pf-v5-c-drawer__main">
653
- <div class="pf-v5-c-drawer__content">
651
+ <div class="pf-v6-c-drawer pf-m-expanded pf-m-inline">
652
+ <div class="pf-v6-c-drawer__main">
653
+ <div class="pf-v6-c-drawer__content">
654
654
  <div
655
- class="pf-v5-c-drawer__body"
655
+ class="pf-v6-c-drawer__body"
656
656
  >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat, nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.</div>
657
657
  </div>
658
- <div class="pf-v5-c-drawer__panel pf-m-resizable">
658
+ <div class="pf-v6-c-drawer__panel pf-m-resizable">
659
659
  <div
660
- class="pf-v5-c-drawer__splitter pf-m-vertical"
660
+ class="pf-v6-c-drawer__splitter pf-m-vertical"
661
661
  role="separator"
662
662
  tabindex="0"
663
663
  aria-orientation="vertical"
664
664
  >
665
- <div class="pf-v5-c-drawer__splitter-handle"></div>
665
+ <div class="pf-v6-c-drawer__splitter-handle"></div>
666
666
  </div>
667
- <div class="pf-v5-c-drawer__panel-main">
668
- <div class="pf-v5-c-drawer__head">
667
+ <div class="pf-v6-c-drawer__panel-main">
668
+ <div class="pf-v6-c-drawer__head">
669
669
  <span>Drawer panel header content</span>
670
- <div class="pf-v5-c-drawer__actions">
671
- <div class="pf-v5-c-drawer__close">
670
+ <div class="pf-v6-c-drawer__actions">
671
+ <div class="pf-v6-c-drawer__close">
672
672
  <button
673
- class="pf-v5-c-button pf-m-plain"
673
+ class="pf-v6-c-button pf-m-plain"
674
674
  type="button"
675
675
  aria-label="Close drawer panel"
676
676
  >
@@ -680,9 +680,9 @@ cssPrefix: pf-v5-c-drawer
680
680
  </div>
681
681
  </div>
682
682
  <div
683
- class="pf-v5-c-drawer__description"
683
+ class="pf-v6-c-drawer__description"
684
684
  >This is a helpful description of the drawer panel.</div>
685
- <div class="pf-v5-c-drawer__body">Drawer panel body content</div>
685
+ <div class="pf-v6-c-drawer__body">Drawer panel body content</div>
686
686
  </div>
687
687
  </div>
688
688
  </div>
@@ -693,20 +693,20 @@ cssPrefix: pf-v5-c-drawer
693
693
  ### Panel with secondary background
694
694
 
695
695
  ```html
696
- <div class="pf-v5-c-drawer pf-m-expanded">
697
- <div class="pf-v5-c-drawer__main">
698
- <div class="pf-v5-c-drawer__content">
696
+ <div class="pf-v6-c-drawer pf-m-expanded">
697
+ <div class="pf-v6-c-drawer__main">
698
+ <div class="pf-v6-c-drawer__content">
699
699
  <div
700
- class="pf-v5-c-drawer__body"
700
+ class="pf-v6-c-drawer__body"
701
701
  >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat, nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.</div>
702
702
  </div>
703
- <div class="pf-v5-c-drawer__panel pf-m-secondary">
704
- <div class="pf-v5-c-drawer__head">
703
+ <div class="pf-v6-c-drawer__panel pf-m-secondary">
704
+ <div class="pf-v6-c-drawer__head">
705
705
  <span>Drawer panel header content</span>
706
- <div class="pf-v5-c-drawer__actions">
707
- <div class="pf-v5-c-drawer__close">
706
+ <div class="pf-v6-c-drawer__actions">
707
+ <div class="pf-v6-c-drawer__close">
708
708
  <button
709
- class="pf-v5-c-button pf-m-plain"
709
+ class="pf-v6-c-button pf-m-plain"
710
710
  type="button"
711
711
  aria-label="Close drawer panel"
712
712
  >
@@ -716,9 +716,9 @@ cssPrefix: pf-v5-c-drawer
716
716
  </div>
717
717
  </div>
718
718
  <div
719
- class="pf-v5-c-drawer__description"
719
+ class="pf-v6-c-drawer__description"
720
720
  >This is a helpful description of the drawer panel.</div>
721
- <div class="pf-v5-c-drawer__body">Drawer panel body content</div>
721
+ <div class="pf-v6-c-drawer__body">Drawer panel body content</div>
722
722
  </div>
723
723
  </div>
724
724
  </div>