@patternfly/patternfly 6.0.0-alpha.99 → 6.0.0-prerelease.2

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 (501) hide show
  1. package/README.md +1 -2
  2. package/assets/fontawesome/_animated.scss +1 -0
  3. package/assets/fontawesome/_bordered-pulled.scss +1 -0
  4. package/assets/fontawesome/_core.scss +2 -0
  5. package/assets/fontawesome/_fixed-width.scss +2 -0
  6. package/assets/fontawesome/_icons.scss +1 -0
  7. package/assets/fontawesome/_index.scss +12 -0
  8. package/assets/fontawesome/_larger.scss +4 -2
  9. package/assets/fontawesome/_list.scss +4 -2
  10. package/assets/fontawesome/_rotated-flipped.scss +2 -0
  11. package/assets/fontawesome/_screen-reader.scss +1 -0
  12. package/assets/fontawesome/_stacked.scss +3 -1
  13. package/assets/fontawesome/_variables.scss +3 -2
  14. package/assets/fontawesome/fontawesome.scss +12 -12
  15. package/assets/icons/iconUnicodes.json +6 -0
  16. package/assets/images/img_avatar-dark.svg +22 -16
  17. package/assets/images/img_avatar-light.svg +25 -18
  18. package/assets/images/pf-background.svg +21 -21
  19. package/assets/images/pf_logo.svg +11 -11
  20. package/assets/images/pf_logo_white.svg +16 -17
  21. package/assets/pficon/pf-v6-pficon.woff2 +0 -0
  22. package/assets/pficon/pficon.scss +310 -271
  23. package/base/_index.scss +10 -0
  24. package/base/{_globals.scss → normalize.scss} +15 -48
  25. package/base/patternfly-common.css +14 -0
  26. package/base/patternfly-common.scss +68 -2
  27. package/base/patternfly-fa-icons.css +1 -1
  28. package/base/patternfly-fa-icons.scss +35 -2
  29. package/base/patternfly-fonts.css +10 -80
  30. package/base/patternfly-fonts.scss +49 -2
  31. package/base/patternfly-pf-icons.css +158 -134
  32. package/base/patternfly-pf-icons.scss +1 -2
  33. package/base/patternfly-svg-icons.css +5 -0
  34. package/base/{_svg-icons.scss → patternfly-svg-icons.scss} +2 -0
  35. package/base/patternfly-variables.css +1082 -1206
  36. package/base/patternfly-variables.scss +20 -2
  37. package/base/reset.scss +33 -0
  38. package/base/tokens/_index.scss +6 -0
  39. package/base/tokens/tokens-charts-dark.scss +173 -0
  40. package/base/tokens/{_tokens-charts.scss → tokens-charts.scss} +162 -148
  41. package/base/tokens/{_tokens-dark.scss → tokens-dark.scss} +307 -294
  42. package/base/tokens/{_tokens-default.scss → tokens-default.scss} +574 -447
  43. package/base/tokens/{_tokens-font.scss → tokens-local.scss} +13 -34
  44. package/base/tokens/{_tokens-palette.scss → tokens-palette.scss} +69 -70
  45. package/components/AboutModalBox/about-modal-box.css +86 -81
  46. package/components/AboutModalBox/about-modal-box.scss +80 -82
  47. package/components/Accordion/accordion.css +44 -43
  48. package/components/Accordion/accordion.scss +52 -52
  49. package/components/ActionList/action-list.css +6 -5
  50. package/components/ActionList/action-list.scss +7 -5
  51. package/components/Alert/alert-group.css +72 -19
  52. package/components/Alert/alert-group.scss +105 -18
  53. package/components/Alert/alert.css +52 -59
  54. package/components/Alert/alert.scss +56 -65
  55. package/components/Avatar/avatar.css +42 -41
  56. package/components/Avatar/avatar.scss +8 -7
  57. package/components/BackToTop/back-to-top.css +19 -17
  58. package/components/BackToTop/back-to-top.scss +17 -17
  59. package/components/Backdrop/backdrop.css +1 -1
  60. package/components/Backdrop/backdrop.scss +3 -4
  61. package/components/BackgroundImage/background-image.scss +3 -4
  62. package/components/Badge/badge.css +29 -7
  63. package/components/Badge/badge.scss +33 -9
  64. package/components/Banner/banner.css +30 -37
  65. package/components/Banner/banner.scss +30 -43
  66. package/components/Brand/brand.css +14 -10
  67. package/components/Brand/brand.scss +8 -5
  68. package/components/Breadcrumb/breadcrumb.css +23 -24
  69. package/components/Breadcrumb/breadcrumb.scss +25 -28
  70. package/components/Button/button.css +150 -128
  71. package/components/Button/button.scss +155 -130
  72. package/components/CalendarMonth/calendar-month.css +46 -46
  73. package/components/CalendarMonth/calendar-month.scss +49 -50
  74. package/components/Card/card.css +110 -93
  75. package/components/Card/card.scss +118 -92
  76. package/components/Check/check.css +5 -5
  77. package/components/Check/check.scss +7 -8
  78. package/components/ClipboardCopy/clipboard-copy.css +33 -41
  79. package/components/ClipboardCopy/clipboard-copy.scss +35 -44
  80. package/components/CodeBlock/code-block.css +21 -20
  81. package/components/CodeBlock/code-block.scss +21 -21
  82. package/components/CodeEditor/code-editor.css +35 -34
  83. package/components/CodeEditor/code-editor.scss +35 -35
  84. package/components/Content/content.css +167 -153
  85. package/components/Content/content.scss +204 -145
  86. package/components/DataList/data-list-grid.css +117 -117
  87. package/components/DataList/data-list-grid.scss +22 -20
  88. package/components/DataList/data-list.css +308 -312
  89. package/components/DataList/data-list.scss +145 -152
  90. package/components/DatePicker/date-picker.css +17 -17
  91. package/components/DatePicker/date-picker.scss +17 -18
  92. package/components/DescriptionList/description-list-order.css +5 -5
  93. package/components/DescriptionList/description-list-order.scss +3 -1
  94. package/components/DescriptionList/description-list.css +46 -44
  95. package/components/DescriptionList/description-list.scss +26 -31
  96. package/components/Divider/divider.css +104 -107
  97. package/components/Divider/divider.scss +19 -19
  98. package/components/DragDrop/drag-drop.css +4 -2
  99. package/components/DragDrop/drag-drop.scss +3 -3
  100. package/components/Drawer/drawer.css +115 -114
  101. package/components/Drawer/drawer.scss +136 -134
  102. package/components/DualListSelector/dual-list-selector.css +64 -61
  103. package/components/DualListSelector/dual-list-selector.scss +54 -51
  104. package/components/EmptyState/empty-state.css +38 -37
  105. package/components/EmptyState/empty-state.scss +39 -39
  106. package/components/ExpandableSection/expandable-section.css +27 -86
  107. package/components/ExpandableSection/expandable-section.scss +32 -101
  108. package/components/FileUpload/file-upload.css +2 -2
  109. package/components/FileUpload/file-upload.scss +2 -3
  110. package/components/Form/form.css +173 -115
  111. package/components/Form/form.scss +117 -103
  112. package/components/FormControl/form-control.css +57 -57
  113. package/components/FormControl/form-control.scss +69 -67
  114. package/components/HelperText/helper-text.css +5 -4
  115. package/components/HelperText/helper-text.scss +8 -6
  116. package/components/Hint/hint.css +25 -25
  117. package/components/Hint/hint.scss +25 -27
  118. package/components/Icon/icon.css +10 -10
  119. package/components/Icon/icon.scss +11 -12
  120. package/components/InlineEdit/inline-edit.css +12 -12
  121. package/components/InlineEdit/inline-edit.scss +12 -13
  122. package/components/InputGroup/input-group.css +16 -16
  123. package/components/InputGroup/input-group.scss +18 -19
  124. package/components/JumpLinks/jump-links.css +80 -96
  125. package/components/JumpLinks/jump-links.scss +80 -100
  126. package/components/Label/label-group.css +28 -28
  127. package/components/Label/label-group.scss +29 -30
  128. package/components/Label/label.css +102 -87
  129. package/components/Label/label.scss +113 -94
  130. package/components/List/list.css +44 -47
  131. package/components/List/list.scss +51 -58
  132. package/components/Login/login.css +122 -118
  133. package/components/Login/login.scss +105 -112
  134. package/components/Masthead/masthead.css +273 -175
  135. package/components/Masthead/masthead.scss +102 -68
  136. package/components/Menu/menu.css +151 -95
  137. package/components/Menu/menu.scss +59 -40
  138. package/components/MenuToggle/menu-toggle.css +129 -108
  139. package/components/MenuToggle/menu-toggle.scss +150 -128
  140. package/components/ModalBox/modal-box.css +53 -45
  141. package/components/ModalBox/modal-box.scss +52 -46
  142. package/components/MultipleFileUpload/multiple-file-upload.css +37 -37
  143. package/components/MultipleFileUpload/multiple-file-upload.scss +38 -39
  144. package/components/Nav/nav.css +33 -9
  145. package/components/Nav/nav.scss +46 -13
  146. package/components/NotificationDrawer/notification-drawer.css +50 -51
  147. package/components/NotificationDrawer/notification-drawer.scss +58 -57
  148. package/components/NumberInput/number-input.css +7 -11
  149. package/components/NumberInput/number-input.scss +5 -7
  150. package/components/OverflowMenu/overflow-menu.css +2 -1
  151. package/components/OverflowMenu/overflow-menu.scss +3 -1
  152. package/components/Page/page.css +175 -519
  153. package/components/Page/page.scss +155 -386
  154. package/components/Pagination/pagination.css +82 -79
  155. package/components/Pagination/pagination.scss +43 -40
  156. package/components/Panel/panel.css +33 -30
  157. package/components/Panel/panel.scss +35 -33
  158. package/components/Popover/popover.css +54 -52
  159. package/components/Popover/popover.scss +55 -54
  160. package/components/Progress/progress.css +8 -4
  161. package/components/Progress/progress.scss +14 -11
  162. package/components/ProgressStepper/progress-stepper.css +246 -245
  163. package/components/ProgressStepper/progress-stepper.scss +118 -118
  164. package/components/Radio/radio.css +7 -7
  165. package/components/Radio/radio.scss +9 -10
  166. package/components/Sidebar/sidebar.css +139 -139
  167. package/components/Sidebar/sidebar.scss +61 -61
  168. package/components/SimpleList/simple-list.css +21 -20
  169. package/components/SimpleList/simple-list.scss +22 -23
  170. package/components/Skeleton/skeleton.css +4 -4
  171. package/components/Skeleton/skeleton.scss +7 -8
  172. package/components/SkipToContent/skip-to-content.css +7 -6
  173. package/components/SkipToContent/skip-to-content.scss +7 -7
  174. package/components/Slider/slider.css +31 -31
  175. package/components/Slider/slider.scss +54 -55
  176. package/components/Spinner/spinner.scss +4 -5
  177. package/components/Switch/switch.css +4 -10
  178. package/components/Switch/switch.scss +8 -17
  179. package/components/TabContent/tab-content.css +25 -25
  180. package/components/TabContent/tab-content.scss +28 -28
  181. package/components/Table/table-grid.css +434 -508
  182. package/components/Table/table-grid.scss +131 -150
  183. package/components/Table/table-scrollable.css +31 -34
  184. package/components/Table/table-scrollable.scss +44 -41
  185. package/components/Table/table-tree-view.css +287 -279
  186. package/components/Table/table-tree-view.scss +84 -84
  187. package/components/Table/table.css +316 -279
  188. package/components/Table/table.scss +346 -301
  189. package/components/Tabs/tabs.css +215 -240
  190. package/components/Tabs/tabs.scss +130 -162
  191. package/components/TextInputGroup/text-input-group.css +122 -64
  192. package/components/TextInputGroup/text-input-group.scss +144 -87
  193. package/components/Tile/tile.css +15 -15
  194. package/components/Tile/tile.scss +16 -17
  195. package/components/Timestamp/timestamp.css +13 -19
  196. package/components/Timestamp/timestamp.scss +16 -22
  197. package/components/Title/title.css +14 -13
  198. package/components/Title/title.scss +15 -15
  199. package/components/ToggleGroup/toggle-group.css +37 -37
  200. package/components/ToggleGroup/toggle-group.scss +38 -41
  201. package/components/Toolbar/toolbar.css +547 -1431
  202. package/components/Toolbar/toolbar.scss +159 -123
  203. package/components/Tooltip/tooltip.css +28 -27
  204. package/components/Tooltip/tooltip.scss +31 -30
  205. package/components/TreeView/tree-view.css +184 -184
  206. package/components/TreeView/tree-view.scss +133 -133
  207. package/components/Truncate/truncate.css +2 -2
  208. package/components/Truncate/truncate.scss +7 -8
  209. package/components/Wizard/wizard.css +190 -154
  210. package/components/Wizard/wizard.scss +211 -165
  211. package/components/_index.css +22378 -0
  212. package/components/_index.scss +82 -0
  213. package/docs/components/AboutModalBox/examples/AboutModalBox.md +3 -1
  214. package/docs/components/Accordion/examples/Accordion.md +1 -1
  215. package/docs/components/ActionList/examples/ActionList.md +64 -24
  216. package/docs/components/Alert/examples/Alert.md +116 -74
  217. package/docs/components/BackToTop/examples/BackToTop.md +1 -1
  218. package/docs/components/Badge/examples/Badge.md +6 -16
  219. package/docs/components/Banner/examples/Banner.md +16 -10
  220. package/docs/components/Brand/examples/Brand.md +2 -2
  221. package/docs/components/Breadcrumb/examples/Breadcrumb.md +19 -59
  222. package/docs/components/Button/examples/Button.md +537 -368
  223. package/docs/components/CalendarMonth/examples/CalendarMonth.md +24 -8
  224. package/docs/components/Card/examples/Card.md +372 -658
  225. package/docs/components/Check/examples/Check.md +10 -15
  226. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +92 -47
  227. package/docs/components/CodeBlock/examples/CodeBlock.md +51 -28
  228. package/docs/components/CodeEditor/examples/CodeEditor.md +41 -22
  229. package/docs/components/Content/examples/Content.md +600 -60
  230. package/docs/components/DataList/examples/DataList.md +291 -1028
  231. package/docs/components/DatePicker/examples/DatePicker.md +18 -6
  232. package/docs/components/DescriptionList/examples/DescriptionList.md +80 -55
  233. package/docs/components/Drawer/examples/Drawer.md +60 -21
  234. package/docs/components/DualListSelector/examples/DualListSelector.md +364 -996
  235. package/docs/components/EmptyState/examples/EmptyState.md +123 -53
  236. package/docs/components/ExpandableSection/examples/ExpandableSection.md +96 -91
  237. package/docs/components/FileUpload/examples/FileUpload.md +42 -14
  238. package/docs/components/Form/examples/Form.md +100 -26
  239. package/docs/components/Hint/examples/Hint.md +54 -164
  240. package/docs/components/InlineEdit/examples/InlineEdit.md +132 -45
  241. package/docs/components/InputGroup/examples/InputGroup.md +38 -62
  242. package/docs/components/JumpLinks/examples/JumpLinks.md +189 -72
  243. package/docs/components/Label/examples/Label.md +2577 -406
  244. package/docs/components/Login/examples/Login.md +372 -334
  245. package/docs/components/Masthead/examples/masthead.md +515 -484
  246. package/docs/components/Menu/examples/Menu.md +77 -138
  247. package/docs/components/MenuToggle/examples/MenuToggle.md +289 -39
  248. package/docs/components/ModalBox/examples/ModalBox.md +158 -100
  249. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +137 -97
  250. package/docs/components/Nav/examples/Navigation.css +2 -7
  251. package/docs/components/Nav/examples/Navigation.md +337 -270
  252. package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +515 -2076
  253. package/docs/components/NumberInput/examples/NumberInput.md +96 -48
  254. package/docs/components/OverflowMenu/examples/overflow-menu.css +4 -28
  255. package/docs/components/OverflowMenu/examples/overflow-menu.md +104 -159
  256. package/docs/components/Page/examples/Page.css +5 -9
  257. package/docs/components/Page/examples/Page.md +254 -181
  258. package/docs/components/Pagination/examples/Pagination.md +336 -756
  259. package/docs/components/Panel/examples/Panel.md +3 -2
  260. package/docs/components/Popover/examples/Popover.md +60 -15
  261. package/docs/components/ProgressStepper/examples/ProgressStepper.md +15 -15
  262. package/docs/components/Sidebar/examples/Sidebar.css +4 -2
  263. package/docs/components/Sidebar/examples/Sidebar.md +3 -3
  264. package/docs/components/Skeleton/examples/Skeleton.css +1 -1
  265. package/docs/components/SkipToContent/examples/SkipToContent.md +3 -1
  266. package/docs/components/Slider/examples/Slider.md +53 -45
  267. package/docs/components/Spinner/examples/Spinner.md +1 -1
  268. package/docs/components/Switch/examples/Switch.md +33 -148
  269. package/docs/components/Table/examples/Table.css +11 -6
  270. package/docs/components/Table/examples/Table.md +5302 -2464
  271. package/docs/components/Tabs/examples/Tabs.md +1267 -607
  272. package/docs/components/TextInputGroup/examples/TextInputGroup.css +8 -3
  273. package/docs/components/TextInputGroup/examples/TextInputGroup.md +469 -278
  274. package/docs/components/Tile/examples/Tile.css +5 -5
  275. package/docs/components/Timestamp/examples/Timestamp.md +7 -1
  276. package/docs/components/ToggleGroup/examples/toggle-group.md +1 -3
  277. package/docs/components/Toolbar/examples/Toolbar.css +50 -39
  278. package/docs/components/Toolbar/examples/Toolbar.md +1562 -1200
  279. package/docs/components/Tooltip/examples/Tooltip.css +1 -1
  280. package/docs/components/TreeView/examples/TreeView.md +627 -49
  281. package/docs/components/Truncate/examples/Truncate.css +1 -2
  282. package/docs/components/Wizard/examples/Wizard.md +1595 -126
  283. package/docs/demos/AboutModal/examples/AboutModal.md +191 -198
  284. package/docs/demos/Alert/examples/Alert.md +924 -909
  285. package/docs/demos/BackToTop/examples/BackToTop.md +318 -327
  286. package/docs/demos/Banner/examples/Banner.md +641 -659
  287. package/docs/demos/Button/examples/Button.md +8 -8
  288. package/docs/demos/Card/examples/Card.css +6 -6
  289. package/docs/demos/Card/examples/Card.md +419 -606
  290. package/docs/demos/CardView/examples/CardView.md +822 -1435
  291. package/docs/demos/Dashboard/examples/Dashboard.md +1308 -1442
  292. package/docs/demos/DataList/examples/DataList.md +3210 -3424
  293. package/docs/demos/DescriptionList/examples/DescriptionList.md +899 -937
  294. package/docs/demos/Drawer/examples/Drawer.md +1165 -1176
  295. package/docs/demos/Form/examples/BasicForms.md +153 -88
  296. package/docs/demos/JumpLinks/examples/JumpLinks.md +1710 -1602
  297. package/docs/demos/Masthead/examples/Masthead.md +1719 -1583
  298. package/docs/demos/Modal/examples/Modal.md +1231 -1235
  299. package/docs/demos/Nav/examples/Nav.md +1216 -1230
  300. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +1910 -4577
  301. package/docs/demos/Page/examples/Page.css +11 -0
  302. package/docs/demos/Page/examples/Page.md +3753 -2540
  303. package/docs/demos/Panel/Panel.md +88 -0
  304. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +9 -3
  305. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +16 -48
  306. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +5150 -6255
  307. package/docs/demos/Skeleton/examples/Skeleton.md +297 -304
  308. package/docs/demos/Table/examples/Table.md +14272 -15154
  309. package/docs/demos/Tabs/examples/Tabs.md +2821 -2891
  310. package/docs/demos/Toolbar/examples/Toolbar.css +10 -18
  311. package/docs/demos/Toolbar/examples/Toolbar.md +2487 -2663
  312. package/docs/demos/Wizard/examples/Wizard.md +3021 -2784
  313. package/docs/layouts/Bullseye/examples/Bullseye.css +4 -4
  314. package/docs/layouts/Flex/examples/Flex.css +4 -4
  315. package/docs/layouts/Flex/examples/Flex.md +50 -50
  316. package/docs/layouts/Gallery/examples/Gallery.css +4 -4
  317. package/docs/layouts/Gallery/examples/Gallery.md +6 -6
  318. package/docs/layouts/Grid/examples/Grid.css +3 -3
  319. package/docs/layouts/Grid/examples/Grid.md +33 -33
  320. package/docs/layouts/Level/examples/Level.css +5 -5
  321. package/docs/layouts/Split/examples/Split.css +4 -4
  322. package/docs/layouts/Stack/examples/Stack.css +5 -5
  323. package/docs/utilities/Accessibility/examples/Accessibility.md +2 -2
  324. package/docs/utilities/Alignment/examples/Alignment.css +6 -6
  325. package/docs/utilities/Alignment/examples/Alignment.md +5 -5
  326. package/docs/utilities/BackgroundColor/examples/BackgroundColor.md +7 -67
  327. package/docs/utilities/BoxShadow/examples/box-shadow.css +11 -11
  328. package/docs/utilities/BoxShadow/examples/box-shadow.md +15 -38
  329. package/docs/utilities/Display/examples/Display.css +3 -10
  330. package/docs/utilities/Display/examples/Display.md +21 -12
  331. package/docs/utilities/Flex/examples/Flex.css +7 -7
  332. package/docs/utilities/Flex/examples/Flex.md +82 -40
  333. package/docs/utilities/Float/examples/Float.css +5 -5
  334. package/docs/utilities/Float/examples/Float.md +6 -6
  335. package/docs/utilities/Sizing/examples/Sizing.css +6 -6
  336. package/docs/utilities/Sizing/examples/Sizing.md +60 -60
  337. package/docs/utilities/Spacing/examples/Spacing.css +3 -3
  338. package/docs/utilities/Spacing/examples/Spacing.md +37 -37
  339. package/docs/utilities/Text/examples/Text.md +78 -77
  340. package/icons/pficons.mjs +6 -0
  341. package/layouts/Bullseye/bullseye.css +4 -0
  342. package/layouts/Bullseye/bullseye.scss +5 -1
  343. package/layouts/Flex/flex.css +241 -237
  344. package/layouts/Flex/flex.scss +48 -44
  345. package/layouts/Gallery/gallery.css +15 -11
  346. package/layouts/Gallery/gallery.scss +9 -5
  347. package/layouts/Grid/grid.css +20 -16
  348. package/layouts/Grid/grid.scss +12 -8
  349. package/layouts/Level/level.css +5 -1
  350. package/layouts/Level/level.scss +6 -2
  351. package/layouts/Split/split.css +5 -1
  352. package/layouts/Split/split.scss +6 -2
  353. package/layouts/Stack/stack.css +5 -1
  354. package/layouts/Stack/stack.scss +6 -2
  355. package/layouts/_index.css +3461 -0
  356. package/layouts/_index.scss +8 -0
  357. package/package.json +39 -39
  358. package/patternfly-addons.css +2071 -2648
  359. package/patternfly-addons.scss +2 -12
  360. package/patternfly-base-no-globals.css +1429 -1645
  361. package/patternfly-base-no-globals.scss +5 -3
  362. package/patternfly-base.css +1511 -1723
  363. package/patternfly-base.scss +2 -6
  364. package/patternfly-charts.css +579 -240
  365. package/patternfly-charts.scss +352 -337
  366. package/patternfly-no-globals.css +19895 -23410
  367. package/patternfly-no-globals.scss +5 -4
  368. package/patternfly.css +19999 -23510
  369. package/patternfly.min.css +1 -1
  370. package/patternfly.min.css.map +1 -1
  371. package/patternfly.scss +3 -4
  372. package/sass-utilities/_index.scss +6 -0
  373. package/sass-utilities/functions.scss +25 -25
  374. package/sass-utilities/{_init.scss → init.scss} +6 -6
  375. package/sass-utilities/mixins.scss +108 -72
  376. package/sass-utilities/{component-namespaces.scss → namespaces-components.scss} +3 -27
  377. package/sass-utilities/{layout-namespaces.scss → namespaces-layouts.scss} +3 -1
  378. package/sass-utilities/scss-variables.scss +49 -261
  379. package/utilities/Accessibility/accessibility.css +15 -15
  380. package/utilities/Accessibility/accessibility.scss +8 -6
  381. package/utilities/Alignment/alignment.css +29 -29
  382. package/utilities/Alignment/alignment.scss +6 -4
  383. package/utilities/BackgroundColor/background-color.css +67 -0
  384. package/utilities/BackgroundColor/background-color.scss +16 -0
  385. package/utilities/BoxShadow/box-shadow.css +15 -39
  386. package/utilities/BoxShadow/box-shadow.scss +19 -28
  387. package/utilities/Display/display.css +43 -5
  388. package/utilities/Display/display.scss +7 -4
  389. package/utilities/Flex/flex.css +50 -50
  390. package/utilities/Flex/flex.scss +21 -20
  391. package/utilities/Float/float.css +29 -29
  392. package/utilities/Float/float.scss +6 -6
  393. package/utilities/Sizing/sizing.css +58 -58
  394. package/utilities/Sizing/sizing.scss +23 -21
  395. package/utilities/Spacing/spacing.css +1372 -1372
  396. package/utilities/Spacing/spacing.scss +6 -6
  397. package/utilities/Text/text.css +419 -662
  398. package/utilities/Text/text.scss +81 -107
  399. package/utilities/_index.css +7815 -0
  400. package/utilities/_index.scss +10 -0
  401. package/assets/images/pf-logo-small.svg +0 -23
  402. package/assets/images/pf_logo_white.hbs +0 -35
  403. package/assets/images/pfbg-icon.svg +0 -1
  404. package/assets/pficon/pf-v5-pficon.woff2 +0 -0
  405. package/base/_base.scss +0 -2
  406. package/base/_chart-globals.scss +0 -415
  407. package/base/_common.scss +0 -50
  408. package/base/_fa-icons.scss +0 -33
  409. package/base/_fonts.scss +0 -136
  410. package/base/_icons.scss +0 -3
  411. package/base/_pficons.scss +0 -2
  412. package/base/_themes.scss +0 -43
  413. package/base/_variables.scss +0 -299
  414. package/base/patternfly-globals.css +0 -120
  415. package/base/patternfly-globals.scss +0 -2
  416. package/base/patternfly-icons.css +0 -4728
  417. package/base/patternfly-icons.scss +0 -2
  418. package/base/patternfly-themes.css +0 -82
  419. package/base/patternfly-themes.scss +0 -2
  420. package/base/themes/dark/_chart-globals.scss +0 -42
  421. package/base/themes/dark/_globals.scss +0 -5
  422. package/base/tokens/_workspace-overrides.scss +0 -7
  423. package/components/AppLauncher/app-launcher.css +0 -244
  424. package/components/AppLauncher/app-launcher.scss +0 -308
  425. package/components/AppLauncher/themes/dark/app-launcher.scss +0 -13
  426. package/components/Chip/chip-group.css +0 -93
  427. package/components/Chip/chip-group.scss +0 -98
  428. package/components/Chip/chip.css +0 -122
  429. package/components/Chip/chip.scss +0 -140
  430. package/components/Chip/themes/dark/chip.scss +0 -9
  431. package/components/ContextSelector/context-selector.css +0 -336
  432. package/components/ContextSelector/context-selector.scss +0 -384
  433. package/components/ContextSelector/themes/dark/context-selector.scss +0 -24
  434. package/components/Dropdown/dropdown.css +0 -686
  435. package/components/Dropdown/dropdown.scss +0 -820
  436. package/components/Dropdown/themes/dark/dropdown.scss +0 -32
  437. package/components/LogViewer/log-viewer.css +0 -197
  438. package/components/LogViewer/log-viewer.scss +0 -226
  439. package/components/LogViewer/themes/dark/log-viewer.scss +0 -7
  440. package/components/NotificationBadge/notification-badge.css +0 -87
  441. package/components/NotificationBadge/notification-badge.scss +0 -108
  442. package/components/OptionsMenu/options-menu.css +0 -279
  443. package/components/OptionsMenu/options-menu.scss +0 -332
  444. package/components/OptionsMenu/themes/dark/options-menu.scss +0 -21
  445. package/components/Select/select.css +0 -599
  446. package/components/Select/select.scss +0 -713
  447. package/components/Select/themes/dark/select.scss +0 -23
  448. package/components/_all.scss +0 -91
  449. package/docs/components/AppLauncher/deprecated/application-launcher.css +0 -25
  450. package/docs/components/AppLauncher/deprecated/application-launcher.md +0 -792
  451. package/docs/components/Breadcrumb/examples/Breadcrumb.css +0 -3
  452. package/docs/components/Chip/examples/Chip.md +0 -846
  453. package/docs/components/ContextSelector/deprecated/context-selector.css +0 -7
  454. package/docs/components/ContextSelector/deprecated/context-selector.md +0 -909
  455. package/docs/components/Dropdown/deprecated/Dropdown.css +0 -64
  456. package/docs/components/Dropdown/deprecated/Dropdown.md +0 -2920
  457. package/docs/components/LogViewer/examples/LogViewer.css +0 -17
  458. package/docs/components/LogViewer/examples/LogViewer.md +0 -5936
  459. package/docs/components/NotificationBadge/examples/NotificationBadge.md +0 -222
  460. package/docs/components/OptionsMenu/deprecated/options-menu.css +0 -25
  461. package/docs/components/OptionsMenu/deprecated/options-menu.md +0 -1014
  462. package/docs/components/Page/deprecated/PageHeader.css +0 -17
  463. package/docs/components/Page/deprecated/PageHeader.md +0 -261
  464. package/docs/components/Pagination/examples/Pagination.css +0 -3
  465. package/docs/components/Select/deprecated/Select.css +0 -56
  466. package/docs/components/Select/deprecated/Select.md +0 -3525
  467. package/docs/components/Tabs/examples/Tabs.css +0 -10
  468. package/docs/components/ToggleGroup/examples/toggle-group.css +0 -4
  469. package/docs/demos/ContextSelector/examples/ContextSelector.md +0 -1712
  470. package/docs/demos/Page/examples/Penta.md +0 -821
  471. package/docs/utilities/Text/examples/Text.css +0 -0
  472. package/layouts/_all.scss +0 -7
  473. package/patternfly-base-no-globals-theme-dark-unversioned.css +0 -6276
  474. package/patternfly-base-no-globals-theme-dark-unversioned.scss +0 -11
  475. package/patternfly-base-theme-dark-unversioned.css +0 -6393
  476. package/patternfly-base-theme-dark-unversioned.scss +0 -5
  477. package/patternfly-charts-theme-dark-unversioned.css +0 -70
  478. package/patternfly-charts-theme-dark-unversioned.scss +0 -8
  479. package/patternfly-charts-theme-dark.css +0 -70
  480. package/patternfly-charts-theme-dark.scss +0 -8
  481. package/patternfly-theme-dark-unversioned.css +0 -35533
  482. package/patternfly-theme-dark-unversioned.scss +0 -6
  483. package/patternfly-theme-dark.css +0 -0
  484. package/patternfly-theme-dark.scss +0 -1
  485. package/sass-utilities/_all.scss +0 -9
  486. package/sass-utilities/colors.scss +0 -82
  487. package/sass-utilities/div.import.scss +0 -3
  488. package/sass-utilities/div.scss +0 -4
  489. package/sass-utilities/placeholders.scss +0 -72
  490. package/sass-utilities/themes/dark/_all.scss +0 -4
  491. package/sass-utilities/themes/dark/colors.scss +0 -16
  492. package/sass-utilities/themes/dark/mixins.scss +0 -7
  493. package/sass-utilities/themes/dark/placeholders.scss +0 -5
  494. package/sass-utilities/themes/dark/scss-variables.scss +0 -92
  495. package/themes/dark/_patternfly-charts-theme-dark.scss +0 -98
  496. package/utilities/BackgroundColor/BackgroundColor.css +0 -414
  497. package/utilities/BackgroundColor/BackgroundColor.scss +0 -64
  498. package/utilities/BackgroundColor/themes/dark/BackgroundColor.css +0 -0
  499. package/utilities/BackgroundColor/themes/dark/BackgroundColor.scss +0 -25
  500. package/utilities/Text/themes/dark/text.css +0 -0
  501. package/utilities/Text/themes/dark/text.scss +0 -33
package/docs/components/Page/examples/Page.md CHANGED
@@ -12,17 +12,21 @@ wrapperTag: div
12
12
  ```html
13
13
  <div class="pf-v6-c-page">
14
14
  <header class="pf-v6-c-masthead">
15
- <span class="pf-v6-c-masthead__toggle">
16
- <button
17
- class="pf-v6-c-button pf-m-plain"
18
- type="button"
19
- aria-label="Global navigation"
20
- >
21
- <i class="fas fa-bars" aria-hidden="true"></i>
22
- </button>
23
- </span>
24
15
  <div class="pf-v6-c-masthead__main">
25
- <a class="pf-v6-c-masthead__brand" href="#">Logo</a>
16
+ <span class="pf-v6-c-masthead__toggle">
17
+ <button
18
+ class="pf-v6-c-button pf-m-plain"
19
+ type="button"
20
+ aria-label="Global navigation"
21
+ >
22
+ <span class="pf-v6-c-button__icon">
23
+ <i class="fas fa-bars" aria-hidden="true"></i>
24
+ </span>
25
+ </button>
26
+ </span>
27
+ <div class="pf-v6-c-masthead__brand">
28
+ <a class="pf-v6-c-masthead__logo" href="#">Logo</a>
29
+ </div>
26
30
  </div>
27
31
  <div class="pf-v6-c-masthead__content">
28
32
  <span>Content</span>
@@ -31,21 +35,40 @@ wrapperTag: div
31
35
  <div class="pf-v6-c-page__sidebar">
32
36
  <div class="pf-v6-c-page__sidebar-body">Navigation</div>
33
37
  </div>
34
- <main class="pf-v6-c-page__main" tabindex="-1">
35
- <section class="pf-v6-c-page__main-section">
36
- This is a default
37
- <code>.pf-v6-c-page__main-section</code>.
38
- </section>
39
- <section class="pf-v6-c-page__main-section pf-m-secondary">
40
- This
41
- <code>.pf-v6-c-page__main-section</code> uses
42
- <code>.pf-m-secondary</code>.
43
- </section>
44
- <section class="pf-v6-c-page__main-section">
45
- This is a default
46
- <code>.pf-v6-c-page__main-section</code>.
47
- </section>
48
- </main>
38
+ <div class="pf-v6-c-page__main-container" tabindex="-1">
39
+ <main class="pf-v6-c-page__main" tabindex="-1">
40
+ <section class="pf-v6-c-page__main-section">
41
+ <div class="pf-v6-c-page__main-body">
42
+ This is a default
43
+ <code>.pf-v6-c-page__main-section</code>.
44
+ </div>
45
+ </section>
46
+ <section class="pf-v6-c-page__main-section pf-m-secondary">
47
+ <div class="pf-v6-c-page__main-body">
48
+ This
49
+ <code>.pf-v6-c-page__main-section</code> uses
50
+ <code>.pf-m-secondary</code>.
51
+ </div>
52
+ </section>
53
+ <section class="pf-v6-c-page__main-section">
54
+ <div class="pf-v6-c-page__main-body">
55
+ This is a default
56
+ <code>.pf-v6-c-page__main-section</code>.
57
+ </div>
58
+ </section>
59
+ <section class="pf-v6-c-page__main-section pf-m-secondary">
60
+ <div
61
+ class="pf-v6-c-page__main-body"
62
+ >This is a page__main-body, one of three within one page__main-section.</div>
63
+ <div
64
+ class="pf-v6-c-page__main-body"
65
+ >This is a page__main-body, one of three within one page__main-section.</div>
66
+ <div
67
+ class="pf-v6-c-page__main-body"
68
+ >This is a page__main-body, one of three within one page__main-section.</div>
69
+ </section>
70
+ </main>
71
+ </div>
49
72
  </div>
50
73
 
51
74
  ```
@@ -55,37 +78,49 @@ wrapperTag: div
55
78
  ```html
56
79
  <div class="pf-v6-c-page">
57
80
  <header class="pf-v6-c-masthead">
58
- <span class="pf-v6-c-masthead__toggle">
59
- <button
60
- class="pf-v6-c-button pf-m-plain"
61
- type="button"
62
- aria-label="Global navigation"
63
- >
64
- <i class="fas fa-bars" aria-hidden="true"></i>
65
- </button>
66
- </span>
67
81
  <div class="pf-v6-c-masthead__main">
68
- <a class="pf-v6-c-masthead__brand" href="#">Logo</a>
82
+ <span class="pf-v6-c-masthead__toggle">
83
+ <button
84
+ class="pf-v6-c-button pf-m-plain"
85
+ type="button"
86
+ aria-label="Global navigation"
87
+ >
88
+ <span class="pf-v6-c-button__icon">
89
+ <i class="fas fa-bars" aria-hidden="true"></i>
90
+ </span>
91
+ </button>
92
+ </span>
93
+ <div class="pf-v6-c-masthead__brand">
94
+ <a class="pf-v6-c-masthead__logo" href="#">Logo</a>
95
+ </div>
69
96
  </div>
70
97
  <div class="pf-v6-c-masthead__content">
71
98
  <span>Content</span>
72
99
  </div>
73
100
  </header>
74
- <main class="pf-v6-c-page__main" tabindex="-1">
75
- <section class="pf-v6-c-page__main-section">
76
- This is a default
77
- <code>.pf-v6-c-page__main-section</code>.
78
- </section>
79
- <section class="pf-v6-c-page__main-section pf-m-secondary">
80
- This
81
- <code>.pf-v6-c-page__main-section</code> uses
82
- <code>.pf-m-secondary</code>.
83
- </section>
84
- <section class="pf-v6-c-page__main-section">
85
- This is a default
86
- <code>.pf-v6-c-page__main-section</code>.
87
- </section>
88
- </main>
101
+ <div class="pf-v6-c-page__main-container" tabindex="-1">
102
+ <main class="pf-v6-c-page__main" tabindex="-1">
103
+ <section class="pf-v6-c-page__main-section">
104
+ <div class="pf-v6-c-page__main-body">
105
+ This is a default
106
+ <code>.pf-v6-c-page__main-section</code>.
107
+ </div>
108
+ </section>
109
+ <section class="pf-v6-c-page__main-section pf-m-secondary">
110
+ <div class="pf-v6-c-page__main-body">
111
+ This
112
+ <code>.pf-v6-c-page__main-section</code> uses
113
+ <code>.pf-m-secondary</code>.
114
+ </div>
115
+ </section>
116
+ <section class="pf-v6-c-page__main-section">
117
+ <div class="pf-v6-c-page__main-body">
118
+ This is a default
119
+ <code>.pf-v6-c-page__main-section</code>.
120
+ </div>
121
+ </section>
122
+ </main>
123
+ </div>
89
124
  </div>
90
125
 
91
126
  ```
@@ -95,17 +130,21 @@ wrapperTag: div
95
130
  ```html
96
131
  <div class="pf-v6-c-page">
97
132
  <header class="pf-v6-c-masthead">
98
- <span class="pf-v6-c-masthead__toggle">
99
- <button
100
- class="pf-v6-c-button pf-m-plain"
101
- type="button"
102
- aria-label="Global navigation"
103
- >
104
- <i class="fas fa-bars" aria-hidden="true"></i>
105
- </button>
106
- </span>
107
133
  <div class="pf-v6-c-masthead__main">
108
- <a class="pf-v6-c-masthead__brand" href="#">Logo</a>
134
+ <span class="pf-v6-c-masthead__toggle">
135
+ <button
136
+ class="pf-v6-c-button pf-m-plain"
137
+ type="button"
138
+ aria-label="Global navigation"
139
+ >
140
+ <span class="pf-v6-c-button__icon">
141
+ <i class="fas fa-bars" aria-hidden="true"></i>
142
+ </span>
143
+ </button>
144
+ </span>
145
+ <div class="pf-v6-c-masthead__brand">
146
+ <a class="pf-v6-c-masthead__logo" href="#">Logo</a>
147
+ </div>
109
148
  </div>
110
149
  <div class="pf-v6-c-masthead__content">
111
150
  <span>Content</span>
@@ -118,9 +157,13 @@ wrapperTag: div
118
157
  >inset content</div>
119
158
  <div class="pf-v6-c-page__sidebar-body pf-m-page-insets">footer content</div>
120
159
  </div>
121
- <main class="pf-v6-c-page__main" tabindex="-1">
122
- <section class="pf-v6-c-page__main-section"></section>
123
- </main>
160
+ <div class="pf-v6-c-page__main-container" tabindex="-1">
161
+ <main class="pf-v6-c-page__main" tabindex="-1">
162
+ <section class="pf-v6-c-page__main-section">
163
+ <div class="pf-v6-c-page__main-body"></div>
164
+ </section>
165
+ </main>
166
+ </div>
124
167
  </div>
125
168
 
126
169
  ```
@@ -130,33 +173,45 @@ wrapperTag: div
130
173
  ```html
131
174
  <div class="pf-v6-c-page">
132
175
  <header class="pf-v6-c-masthead">
133
- <span class="pf-v6-c-masthead__toggle">
134
- <button
135
- class="pf-v6-c-button pf-m-plain"
136
- type="button"
137
- aria-label="Global navigation"
138
- >
139
- <i class="fas fa-bars" aria-hidden="true"></i>
140
- </button>
141
- </span>
142
176
  <div class="pf-v6-c-masthead__main">
143
- <a class="pf-v6-c-masthead__brand" href="#">Logo</a>
177
+ <span class="pf-v6-c-masthead__toggle">
178
+ <button
179
+ class="pf-v6-c-button pf-m-plain"
180
+ type="button"
181
+ aria-label="Global navigation"
182
+ >
183
+ <span class="pf-v6-c-button__icon">
184
+ <i class="fas fa-bars" aria-hidden="true"></i>
185
+ </span>
186
+ </button>
187
+ </span>
188
+ <div class="pf-v6-c-masthead__brand">
189
+ <a class="pf-v6-c-masthead__logo" href="#">Logo</a>
190
+ </div>
144
191
  </div>
145
192
  <div class="pf-v6-c-masthead__content">
146
193
  <span>Content</span>
147
194
  </div>
148
195
  </header>
149
- <main class="pf-v6-c-page__main" tabindex="-1">
150
- <section class="pf-v6-c-page__main-section">A regular page section.</section>
151
- <section class="pf-v6-c-page__main-section pf-m-fill">
152
- This section uses
153
- <code>.pf-m-fill</code> to fill the available space.
154
- </section>
155
- <section class="pf-v6-c-page__main-section pf-m-no-fill">
156
- This section uses
157
- <code>.pf-m-no-fill</code> to not fill the available space.
158
- </section>
159
- </main>
196
+ <div class="pf-v6-c-page__main-container" tabindex="-1">
197
+ <main class="pf-v6-c-page__main" tabindex="-1">
198
+ <section class="pf-v6-c-page__main-section">
199
+ <div class="pf-v6-c-page__main-body">A regular page section.</div>
200
+ </section>
201
+ <section class="pf-v6-c-page__main-section pf-m-fill">
202
+ <div class="pf-v6-c-page__main-body">
203
+ This section uses
204
+ <code>.pf-m-fill</code> to fill the available space.
205
+ </div>
206
+ </section>
207
+ <section class="pf-v6-c-page__main-section pf-m-no-fill">
208
+ <div class="pf-v6-c-page__main-body">
209
+ This section uses
210
+ <code>.pf-m-no-fill</code> not to fill the available space.
211
+ </div>
212
+ </section>
213
+ </main>
214
+ </div>
160
215
  </div>
161
216
 
162
217
  ```
@@ -166,17 +221,21 @@ wrapperTag: div
166
221
  ```html
167
222
  <div class="pf-v6-c-page">
168
223
  <header class="pf-v6-c-masthead">
169
- <span class="pf-v6-c-masthead__toggle">
170
- <button
171
- class="pf-v6-c-button pf-m-plain"
172
- type="button"
173
- aria-label="Global navigation"
174
- >
175
- <i class="fas fa-bars" aria-hidden="true"></i>
176
- </button>
177
- </span>
178
224
  <div class="pf-v6-c-masthead__main">
179
- <a class="pf-v6-c-masthead__brand" href="#">Logo</a>
225
+ <span class="pf-v6-c-masthead__toggle">
226
+ <button
227
+ class="pf-v6-c-button pf-m-plain"
228
+ type="button"
229
+ aria-label="Global navigation"
230
+ >
231
+ <span class="pf-v6-c-button__icon">
232
+ <i class="fas fa-bars" aria-hidden="true"></i>
233
+ </span>
234
+ </button>
235
+ </span>
236
+ <div class="pf-v6-c-masthead__brand">
237
+ <a class="pf-v6-c-masthead__logo" href="#">Logo</a>
238
+ </div>
180
239
  </div>
181
240
  <div class="pf-v6-c-masthead__content">
182
241
  <span>Content</span>
@@ -185,25 +244,33 @@ wrapperTag: div
185
244
  <div class="pf-v6-c-page__sidebar">
186
245
  <div class="pf-v6-c-page__sidebar-body">Navigation</div>
187
246
  </div>
188
- <main class="pf-v6-c-page__main" tabindex="-1">
189
- <section class="pf-v6-c-page__main-section">
190
- This
191
- <code>.pf-v6-c-page__main-section</code> has default padding.
192
- </section>
193
- <section class="pf-v6-c-page__main-section pf-m-no-padding">
194
- This
195
- <code>.pf-v6-c-page__main-section</code> uses
196
- <code>.pf-m-no-padding</code> to remove all padding.
197
- </section>
198
- <section
199
- class="pf-v6-c-page__main-section pf-m-no-padding pf-m-padding-on-md"
200
- >
201
- This
202
- <code>.pf-v6-c-page__main-section</code> uses
203
- <code>.pf-m-no-padding .pf-m-padding-on-md</code> to remove padding up to the
204
- <code>md</code> breakpoint.
205
- </section>
206
- </main>
247
+ <div class="pf-v6-c-page__main-container" tabindex="-1">
248
+ <main class="pf-v6-c-page__main" tabindex="-1">
249
+ <section class="pf-v6-c-page__main-section">
250
+ <div class="pf-v6-c-page__main-body">
251
+ This
252
+ <code>.pf-v6-c-page__main-section</code> has default padding.
253
+ </div>
254
+ </section>
255
+ <section class="pf-v6-c-page__main-section pf-m-no-padding">
256
+ <div class="pf-v6-c-page__main-body">
257
+ This
258
+ <code>.pf-v6-c-page__main-section</code> uses
259
+ <code>.pf-m-no-padding</code> to remove all padding.
260
+ </div>
261
+ </section>
262
+ <section
263
+ class="pf-v6-c-page__main-section pf-m-no-padding pf-m-padding-on-md"
264
+ >
265
+ <div class="pf-v6-c-page__main-body">
266
+ This
267
+ <code>.pf-v6-c-page__main-section</code> uses
268
+ <code>.pf-m-no-padding .pf-m-padding-on-md</code> to remove padding up to the
269
+ <code>md</code> breakpoint.
270
+ </div>
271
+ </section>
272
+ </main>
273
+ </div>
207
274
  </div>
208
275
 
209
276
  ```
@@ -213,17 +280,21 @@ wrapperTag: div
213
280
  ```html
214
281
  <div class="pf-v6-c-page">
215
282
  <header class="pf-v6-c-masthead">
216
- <span class="pf-v6-c-masthead__toggle">
217
- <button
218
- class="pf-v6-c-button pf-m-plain"
219
- type="button"
220
- aria-label="Global navigation"
221
- >
222
- <i class="fas fa-bars" aria-hidden="true"></i>
223
- </button>
224
- </span>
225
283
  <div class="pf-v6-c-masthead__main">
226
- <a class="pf-v6-c-masthead__brand" href="#">Logo</a>
284
+ <span class="pf-v6-c-masthead__toggle">
285
+ <button
286
+ class="pf-v6-c-button pf-m-plain"
287
+ type="button"
288
+ aria-label="Global navigation"
289
+ >
290
+ <span class="pf-v6-c-button__icon">
291
+ <i class="fas fa-bars" aria-hidden="true"></i>
292
+ </span>
293
+ </button>
294
+ </span>
295
+ <div class="pf-v6-c-masthead__brand">
296
+ <a class="pf-v6-c-masthead__logo" href="#">Logo</a>
297
+ </div>
227
298
  </div>
228
299
  <div class="pf-v6-c-masthead__content">
229
300
  <span>Content</span>
@@ -232,29 +303,30 @@ wrapperTag: div
232
303
  <div class="pf-v6-c-page__sidebar">
233
304
  <div class="pf-v6-c-page__sidebar-body">Navigation</div>
234
305
  </div>
235
- <main class="pf-v6-c-page__main" tabindex="-1">
236
- <section class="pf-v6-c-page__main-subnav">
237
- <code>.pf-v6-c-page__main-subnav</code> for horizontal subnav navigation
238
- </section>
239
- <section class="pf-v6-c-page__main-nav">
240
- <code>.pf-v6-c-page__main-nav</code> for tertiary navigation
241
- </section>
242
- <section class="pf-v6-c-page__main-tabs">
243
- <code>.pf-v6-c-page__main-tabs</code> for tabs
244
- </section>
245
- <div class="pf-v6-c-page__main-group">
246
- <code>.pf-v6-c-page__main-group</code> for a group of page sections
247
- </div>
248
- <section class="pf-v6-c-page__main-breadcrumb">
249
- <code>.pf-v6-c-page__main-breadcrumb</code> for breadcrumbs
250
- </section>
251
- <section class="pf-v6-c-page__main-section">
252
- <code>.pf-v6-c-page__main-section</code> for main sections
253
- </section>
254
- <section class="pf-v6-c-page__main-wizard">
255
- <code>.pf-v6-c-page__main-wizard</code> for wizards
256
- </section>
257
- </main>
306
+ <div class="pf-v6-c-page__main-container" tabindex="-1">
307
+ <main class="pf-v6-c-page__main" tabindex="-1">
308
+ <section class="pf-v6-c-page__main-subnav">
309
+ <code>.pf-v6-c-page__main-subnav</code> for horizontal subnav navigation
310
+ </section>
311
+ <section class="pf-v6-c-page__main-tabs">
312
+ <code>.pf-v6-c-page__main-tabs</code> for tabs
313
+ </section>
314
+ <div class="pf-v6-c-page__main-group">
315
+ <code>.pf-v6-c-page__main-group</code> for a group of page sections
316
+ </div>
317
+ <section class="pf-v6-c-page__main-breadcrumb">
318
+ <code>.pf-v6-c-page__main-breadcrumb</code> for breadcrumbs
319
+ </section>
320
+ <section class="pf-v6-c-page__main-section">
321
+ <div class="pf-v6-c-page__main-body">
322
+ <code>.pf-v6-c-page__main-section</code> for main sections
323
+ </div>
324
+ </section>
325
+ <section class="pf-v6-c-page__main-wizard">
326
+ <code>.pf-v6-c-page__main-wizard</code> for wizards
327
+ </section>
328
+ </main>
329
+ </div>
258
330
  </div>
259
331
 
260
332
  ```
@@ -264,38 +336,44 @@ wrapperTag: div
264
336
  ```html
265
337
  <div class="pf-v6-c-page">
266
338
  <header class="pf-v6-c-masthead">
267
- <span class="pf-v6-c-masthead__toggle">
268
- <button
269
- class="pf-v6-c-button pf-m-plain"
270
- type="button"
271
- aria-label="Global navigation"
272
- >
273
- <i class="fas fa-bars" aria-hidden="true"></i>
274
- </button>
275
- </span>
276
339
  <div class="pf-v6-c-masthead__main">
277
- <a class="pf-v6-c-masthead__brand" href="#">Logo</a>
340
+ <span class="pf-v6-c-masthead__toggle">
341
+ <button
342
+ class="pf-v6-c-button pf-m-plain"
343
+ type="button"
344
+ aria-label="Global navigation"
345
+ >
346
+ <span class="pf-v6-c-button__icon">
347
+ <i class="fas fa-bars" aria-hidden="true"></i>
348
+ </span>
349
+ </button>
350
+ </span>
351
+ <div class="pf-v6-c-masthead__brand">
352
+ <a class="pf-v6-c-masthead__logo" href="#">Logo</a>
353
+ </div>
278
354
  </div>
279
355
  <div class="pf-v6-c-masthead__content">
280
356
  <span>Content</span>
281
357
  </div>
282
358
  </header>
283
- <main class="pf-v6-c-page__main" tabindex="-1">
284
- <section
285
- class="pf-v6-c-page__main-section pf-m-limit-width pf-m-align-center"
286
- >
287
- <div class="pf-v6-c-page__main-body">
288
- <div class="pf-v6-c-card">
289
- <div class="pf-v6-c-card__body">
290
- When a width limited page section is wider than the value of
291
- <code>--pf-v6-c-page--section--m-limit-width--MaxWidth</code>, the section will be centered in the main section.
292
- <br />
293
- <br />The content in this example is placed in a card to better illustrate how the section behaves when it is centered. A card is not required to center a page section.
359
+ <div class="pf-v6-c-page__main-container" tabindex="-1">
360
+ <main class="pf-v6-c-page__main" tabindex="-1">
361
+ <section
362
+ class="pf-v6-c-page__main-section pf-m-limit-width pf-m-align-center"
363
+ >
364
+ <div class="pf-v6-c-page__main-body">
365
+ <div class="pf-v6-c-card">
366
+ <div class="pf-v6-c-card__body">
367
+ When a width limited page section is wider than the value of
368
+ <code>--pf-v6-c-page--section--m-limit-width--MaxWidth</code>, the section will be centered in the main section.
369
+ <br />
370
+ <br />The content in this example is placed in a card to better illustrate how the section behaves when it is centered. A card is not required to center a page section.
371
+ </div>
294
372
  </div>
295
373
  </div>
296
- </div>
297
- </section>
298
- </main>
374
+ </section>
375
+ </main>
376
+ </div>
299
377
  </div>
300
378
 
301
379
  ```
@@ -321,30 +399,25 @@ This component provides the basic chrome for a page, including sidebar and main
321
399
  | -- | -- | -- |
322
400
  | `.pf-v6-c-page` | `<div>` | Declares the page component. |
323
401
  | `.pf-v6-c-page__sidebar` | `<aside>` | Declares the page sidebar. |
324
- | `.pf-v6-c-page__sidebar-body` | `<div>` | Creates a wrapper within the sidebar to hold content. **Note: The last/only `.pf-v6-c-page__sidebar-body` element will grow to fill the availble vertical space. You can change this behavior using `.pf-m-fill` and `.pf-m-no-fill`, which are documented below.** |
402
+ | `.pf-v6-c-page__sidebar-body` | `<div>` | Creates a wrapper within the sidebar to hold content. **Note: The last/only `.pf-v6-c-page__sidebar-body` element will grow to fill the available vertical space. You can change this behavior using `.pf-m-fill` and `.pf-m-no-fill`, which are documented below.** |
325
403
  | `.pf-v6-c-page__main` | `<main>` | Declares the main page area. |
326
- | `.pf-v6-c-page__main-nav` | `<section>` | Creates a container to nest the (deprecated) tertiary navigation component in the main page area. |
327
404
  | `.pf-v6-c-page__main-subnav` | `<section>` | Creates a container to nest the horizontal subnav navigation component in the main page area. |
328
405
  | `.pf-v6-c-page__main-breadcrumb` | `<section>` | Creates a container to nest the breadcrumb component in the main page area. |
329
- | `.pf-v6-c-page__main-section` | `<section>` | Creates a section container in the main page area. **Note: The last/only `.pf-v6-c-page__main-section` element will grow to fill the availble vertical space. You can change this behavior using `.pf-m-fill` and `.pf-m-no-fill`, which are documented below.** |
406
+ | `.pf-v6-c-page__main-section` | `<section>` | Creates a section container in the main page area. **Note: This section will not fill the vertical space. You can change this behavior using `.pf-m-fill` and `.pf-m-no-fill`, which are documented below.** |
330
407
  | `.pf-v6-c-page__main-tabs` | `<section>` | Creates a container to nest the tabs component in the main page area. |
331
408
  | `.pf-v6-c-page__main-wizard` | `<section>` | Creates a container to nest the wizard component in the main page area. |
332
- | `.pf-v6-c-page__main-body` | `<div>` | Creates the body section for a page section. **Required when using `.pf-m-limit-width` on `.pf-v6-c-page__main-section`** |
409
+ | `.pf-v6-c-page__main-body` | `<div>` | Creates the body section for a page section. **Required** |
333
410
  | `.pf-v6-c-page__main-group` | `<div>` | Creates the group of `.pf-v6-c-page__main-*` sections. Can be used in combination with `.pf-m-sticky-[top/bottom]` to make multiple sections sticky. |
334
411
  | `.pf-v6-c-page__drawer` | `<div>` | Creates a container for the drawer component when placing the main page element in the drawer body. |
335
412
  | `.pf-m-expanded` | `.pf-v6-c-page__sidebar` | Modifies the sidebar for the expanded state. |
336
413
  | `.pf-m-collapsed` | `.pf-v6-c-page__sidebar` | Modifies the sidebar for the collapsed state. |
337
414
  | `.pf-m-page-insets` | `.pf-v6-c-page__sidebar-body` | Modifies a sidebar body padding/inset to visually match padding of page elements. |
415
+ | `.pf-m-context-selector` | `.pf-v6-c-page__sidebar-body` | Modifies a sidebar body to contain a context selector. |
338
416
  | `.pf-m-inset-none` | `.pf-v6-c-page__sidebar-body` | Removes a sidebar body left/right inset. |
339
- | `.pf-m-light` | `.pf-v6-c-page__sidebar` | Modifies the sidebar the light variation. **Note: for use with a light themed nav component** |
340
- | `.pf-m-light` | `.pf-v6-c-page__main-section` | Modifies a main page section to have a light theme. |
341
- | `.pf-m-dark-200` | `.pf-v6-c-page__main-section` | Modifies a main page section to have a dark theme and a dark transparent background. |
342
- | `.pf-m-dark-100` | `.pf-v6-c-page__main-section` | Modifies a main page section to have a dark theme and a darker transparent background. |
343
- | `.pf-m-light-200` | `.pf-v6-c-page__main-wizard` | Modifies a wizard page section to have a light 200 theme. |
344
417
  | `.pf-m-padding{-on-[breakpoint]}` | `.pf-v6-c-page__main-section` | Modifies the main page section to add padding back in at an optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). Should be used with pf-m-no-padding. |
345
418
  | `.pf-m-no-padding{-on-[breakpoint]}` | `.pf-v6-c-page__main-section` | Removes padding from the main page section at an optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
346
- | `.pf-m-fill` | `.pf-v6-c-page__main-section`, `.pf-v6-c-page__sidebar-body` | Modifies the element to grow to fill the available space. |
347
- | `.pf-m-no-fill` | `.pf-v6-c-page__main-section`, `.pf-v6-c-page__sidebar-body` | Modifies the element to not grow to fill the available vertical space. |
419
+ | `.pf-m-fill` | `.pf-v6-c-page__main-container`, `.pf-v6-c-page__main-section`, `.pf-v6-c-page__main-group`, `.pf-v6-c-page__main-wizard`, `.pf-v6-c-page__sidebar-body` | Modifies the element to grow to fill the available space. |
420
+ | `.pf-m-no-fill` | `.pf-v6-c-page__main-section`, `.pf-v6-c-page__main-group`, `.pf-v6-c-page__main-wizard`, `.pf-v6-c-page__sidebar-body` | Modifies the element not to grow to fill the available vertical space. |
348
421
  | `.pf-m-limit-width` | `.pf-v6-c-page__main-section` | Modifies a page section to limit the `max-width` of the content inside. |
349
422
  | `.pf-m-align-center` | `.pf-v6-c-page__main-section.pf-m-limit-width` | Modifies a page section body to align center. |
350
423
  | `.pf-m-sticky-top{-on-[breakpoint]-height}` | `.pf-v6-c-page__main-*` | Modifies a section/group to be sticky to the top of its container at an optional height breakpoint. |