@patternfly/patternfly 6.0.0-alpha.1 → 6.0.0-alpha.10

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 (282) hide show
  1. package/README.md +13 -3
  2. package/assets/icons/iconUnicodes.json +1 -0
  3. package/assets/pficon/pf-v5-pficon.woff2 +0 -0
  4. package/assets/pficon/pficon.scss +6 -129
  5. package/base/_common.scss +21 -0
  6. package/base/_globals.scss +14 -14
  7. package/base/_variables.scss +12 -0
  8. package/base/patternfly-common.css +16 -2
  9. package/base/patternfly-globals.css +13 -14
  10. package/base/patternfly-icons.css +5 -1
  11. package/base/patternfly-pf-icons.css +5 -1
  12. package/base/patternfly-variables.css +865 -0
  13. package/base/tokens/_tokens-dark.scss +331 -0
  14. package/base/tokens/_tokens-default.scss +379 -0
  15. package/base/tokens/_tokens-font.scss +96 -0
  16. package/base/tokens/_tokens-palette.scss +75 -0
  17. package/components/AboutModalBox/about-modal-box.css +23 -12
  18. package/components/AboutModalBox/about-modal-box.scss +25 -12
  19. package/components/Accordion/accordion.css +33 -20
  20. package/components/Accordion/accordion.scss +32 -20
  21. package/components/ActionList/action-list.css +2 -2
  22. package/components/ActionList/action-list.scss +2 -2
  23. package/components/Alert/alert-group.css +27 -20
  24. package/components/Alert/alert-group.scss +27 -20
  25. package/components/Alert/alert.css +74 -95
  26. package/components/Alert/alert.scss +76 -89
  27. package/components/AppLauncher/app-launcher.css +32 -23
  28. package/components/AppLauncher/app-launcher.scss +32 -23
  29. package/components/BackToTop/back-to-top.css +2 -2
  30. package/components/BackToTop/back-to-top.scss +2 -2
  31. package/components/Backdrop/backdrop.css +2 -2
  32. package/components/Backdrop/backdrop.scss +2 -2
  33. package/components/BackgroundImage/background-image.css +6 -3
  34. package/components/BackgroundImage/background-image.scss +8 -3
  35. package/components/Badge/badge.css +2 -2
  36. package/components/Badge/badge.scss +2 -2
  37. package/components/Banner/banner.css +5 -5
  38. package/components/Banner/banner.scss +5 -2
  39. package/components/Breadcrumb/breadcrumb.css +9 -3
  40. package/components/Breadcrumb/breadcrumb.scss +8 -3
  41. package/components/Button/button.css +167 -195
  42. package/components/Button/button.scss +187 -157
  43. package/components/Button/themes/dark/button.scss +1 -1
  44. package/components/CalendarMonth/calendar-month.css +25 -15
  45. package/components/CalendarMonth/calendar-month.scss +23 -15
  46. package/components/Card/card.css +25 -17
  47. package/components/Card/card.scss +24 -17
  48. package/components/Check/check.css +2 -2
  49. package/components/Check/check.scss +2 -2
  50. package/components/Chip/chip-group.css +6 -6
  51. package/components/Chip/chip-group.scss +6 -6
  52. package/components/Chip/chip.css +16 -9
  53. package/components/Chip/chip.scss +17 -9
  54. package/components/ClipboardCopy/clipboard-copy.css +19 -10
  55. package/components/ClipboardCopy/clipboard-copy.scss +16 -8
  56. package/components/ClipboardCopy/themes/dark/clipboard-copy.scss +2 -2
  57. package/components/CodeBlock/code-block.css +6 -3
  58. package/components/CodeBlock/code-block.scss +6 -3
  59. package/components/CodeEditor/code-editor.css +31 -22
  60. package/components/CodeEditor/code-editor.scss +30 -21
  61. package/components/CodeEditor/themes/dark/code-editor.scss +1 -1
  62. package/components/Content/content.css +100 -97
  63. package/components/Content/content.scss +101 -98
  64. package/components/ContextSelector/context-selector.css +41 -26
  65. package/components/ContextSelector/context-selector.scss +40 -25
  66. package/components/ContextSelector/themes/dark/context-selector.scss +1 -1
  67. package/components/DataList/data-list-grid.css +21 -21
  68. package/components/DataList/data-list-grid.scss +3 -3
  69. package/components/DataList/data-list.css +69 -56
  70. package/components/DataList/data-list.scss +47 -35
  71. package/components/DatePicker/date-picker.css +8 -8
  72. package/components/DatePicker/date-picker.scss +8 -8
  73. package/components/DescriptionList/description-list.css +8 -5
  74. package/components/DescriptionList/description-list.scss +8 -5
  75. package/components/DragDrop/drag-drop.css +8 -8
  76. package/components/DragDrop/drag-drop.scss +8 -8
  77. package/components/Drawer/drawer.css +120 -61
  78. package/components/Drawer/drawer.scss +92 -43
  79. package/components/Dropdown/dropdown.css +75 -66
  80. package/components/Dropdown/dropdown.scss +65 -56
  81. package/components/DualListSelector/dual-list-selector.css +29 -15
  82. package/components/DualListSelector/dual-list-selector.scss +30 -15
  83. package/components/EmptyState/empty-state.css +7 -4
  84. package/components/EmptyState/empty-state.scss +7 -4
  85. package/components/ExpandableSection/expandable-section.css +17 -10
  86. package/components/ExpandableSection/expandable-section.scss +15 -10
  87. package/components/FileUpload/file-upload.css +9 -15
  88. package/components/FileUpload/file-upload.scss +9 -15
  89. package/components/Form/form.css +53 -50
  90. package/components/Form/form.scss +46 -44
  91. package/components/FormControl/form-control.css +18 -9
  92. package/components/FormControl/form-control.scss +18 -9
  93. package/components/HelperText/helper-text.css +1 -1
  94. package/components/HelperText/helper-text.scss +1 -1
  95. package/components/Hint/hint.css +9 -6
  96. package/components/Hint/hint.scss +9 -6
  97. package/components/Icon/icon.css +1 -1
  98. package/components/Icon/icon.scss +1 -1
  99. package/components/InlineEdit/inline-edit.css +4 -4
  100. package/components/InlineEdit/inline-edit.scss +4 -4
  101. package/components/InputGroup/input-group.css +12 -6
  102. package/components/InputGroup/input-group.scss +11 -5
  103. package/components/InputGroup/themes/dark/input-group.scss +1 -1
  104. package/components/JumpLinks/jump-links.css +27 -24
  105. package/components/JumpLinks/jump-links.scss +26 -24
  106. package/components/Label/label-group.css +13 -10
  107. package/components/Label/label-group.scss +13 -10
  108. package/components/Label/label.css +9 -9
  109. package/components/Label/label.scss +9 -9
  110. package/components/List/list.css +9 -9
  111. package/components/List/list.scss +9 -9
  112. package/components/LogViewer/log-viewer.css +14 -14
  113. package/components/LogViewer/log-viewer.scss +14 -14
  114. package/components/Login/login.css +36 -27
  115. package/components/Login/login.scss +36 -27
  116. package/components/Masthead/masthead.css +68 -125
  117. package/components/Masthead/masthead.scss +123 -153
  118. package/components/Menu/menu.css +79 -65
  119. package/components/Menu/menu.scss +80 -68
  120. package/components/MenuToggle/menu-toggle.css +89 -99
  121. package/components/MenuToggle/menu-toggle.scss +92 -108
  122. package/components/ModalBox/modal-box.css +19 -19
  123. package/components/ModalBox/modal-box.scss +20 -20
  124. package/components/MultipleFileUpload/multiple-file-upload.css +11 -8
  125. package/components/MultipleFileUpload/multiple-file-upload.scss +11 -8
  126. package/components/Nav/nav.css +162 -133
  127. package/components/Nav/nav.scss +162 -135
  128. package/components/Nav/themes/dark/nav.scss +2 -2
  129. package/components/NotificationBadge/notification-badge.css +66 -85
  130. package/components/NotificationBadge/notification-badge.scss +72 -103
  131. package/components/NotificationDrawer/notification-drawer.css +32 -19
  132. package/components/NotificationDrawer/notification-drawer.scss +30 -19
  133. package/components/NumberInput/number-input.css +2 -2
  134. package/components/NumberInput/number-input.scss +2 -2
  135. package/components/OptionsMenu/options-menu.css +43 -31
  136. package/components/OptionsMenu/options-menu.scss +43 -31
  137. package/components/OverflowMenu/overflow-menu.css +2 -2
  138. package/components/OverflowMenu/overflow-menu.scss +2 -2
  139. package/components/Page/page.css +203 -135
  140. package/components/Page/page.scss +149 -108
  141. package/components/Page/themes/dark/page.scss +1 -1
  142. package/components/Pagination/pagination.css +27 -17
  143. package/components/Pagination/pagination.scss +25 -17
  144. package/components/Panel/panel.css +13 -7
  145. package/components/Panel/panel.scss +13 -7
  146. package/components/Popover/popover.css +72 -40
  147. package/components/Popover/popover.scss +95 -75
  148. package/components/Progress/progress.css +9 -7
  149. package/components/Progress/progress.scss +12 -7
  150. package/components/ProgressStepper/progress-stepper.css +26 -20
  151. package/components/ProgressStepper/progress-stepper.scss +25 -19
  152. package/components/Radio/radio.css +3 -3
  153. package/components/Radio/radio.scss +3 -3
  154. package/components/Select/select.css +56 -47
  155. package/components/Select/select.scss +56 -47
  156. package/components/Sidebar/sidebar.css +11 -5
  157. package/components/Sidebar/sidebar.scss +11 -5
  158. package/components/SimpleList/simple-list.css +10 -4
  159. package/components/SimpleList/simple-list.scss +10 -4
  160. package/components/Skeleton/skeleton.css +6 -5
  161. package/components/Skeleton/skeleton.scss +4 -5
  162. package/components/SkipToContent/skip-to-content.css +3 -3
  163. package/components/SkipToContent/skip-to-content.scss +3 -3
  164. package/components/Slider/slider.css +47 -26
  165. package/components/Slider/slider.scss +56 -28
  166. package/components/Switch/switch.css +9 -5
  167. package/components/Switch/switch.scss +10 -6
  168. package/components/TabContent/tab-content.css +4 -1
  169. package/components/TabContent/tab-content.scss +4 -1
  170. package/components/Table/table-grid.css +264 -203
  171. package/components/Table/table-grid.scss +61 -47
  172. package/components/Table/table-scrollable.css +4 -4
  173. package/components/Table/table-scrollable.scss +6 -4
  174. package/components/Table/table-tree-view.css +112 -105
  175. package/components/Table/table-tree-view.scss +38 -33
  176. package/components/Table/table.css +181 -158
  177. package/components/Table/table.scss +181 -164
  178. package/components/Tabs/tabs.css +76 -48
  179. package/components/Tabs/tabs.scss +74 -48
  180. package/components/TextInputGroup/text-input-group.css +15 -15
  181. package/components/TextInputGroup/text-input-group.scss +15 -15
  182. package/components/Tile/tile.css +10 -10
  183. package/components/Tile/tile.scss +10 -10
  184. package/components/ToggleGroup/toggle-group.css +14 -11
  185. package/components/ToggleGroup/toggle-group.scss +14 -11
  186. package/components/Toolbar/toolbar.css +48 -43
  187. package/components/Toolbar/toolbar.scss +29 -23
  188. package/components/Tooltip/tooltip.css +60 -28
  189. package/components/Tooltip/tooltip.scss +76 -56
  190. package/components/TreeView/tree-view.css +48 -27
  191. package/components/TreeView/tree-view.scss +50 -28
  192. package/components/Truncate/truncate.css +9 -0
  193. package/components/Truncate/truncate.scss +16 -3
  194. package/components/Wizard/wizard.css +57 -36
  195. package/components/Wizard/wizard.scss +57 -36
  196. package/docs/components/Alert/examples/Alert.md +1 -1
  197. package/docs/components/Button/examples/Button.css +2 -2
  198. package/docs/components/Button/examples/Button.md +15 -3
  199. package/docs/components/Card/examples/Card.md +15 -15
  200. package/docs/components/Check/examples/Check.md +71 -59
  201. package/docs/components/Chip/examples/Chip.md +1 -1
  202. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +106 -0
  203. package/docs/components/CodeEditor/examples/CodeEditor.md +3 -3
  204. package/docs/components/DragDrop/examples/DragDrop.css +2 -2
  205. package/docs/components/Dropdown/deprecated/Dropdown.css +1 -1
  206. package/docs/components/DualListSelector/examples/DualListSelector.md +64 -16
  207. package/docs/components/Label/examples/Label.md +1 -1
  208. package/docs/components/LogViewer/examples/LogViewer.css +2 -2
  209. package/docs/components/LogViewer/examples/LogViewer.md +120 -30
  210. package/docs/components/Masthead/examples/masthead.md +7 -54
  211. package/docs/components/Menu/examples/Menu.css +8 -0
  212. package/docs/components/Menu/examples/Menu.md +90 -73
  213. package/docs/components/MenuToggle/examples/MenuToggle.md +102 -81
  214. package/docs/components/ModalBox/examples/ModalBox.css +3 -8
  215. package/docs/components/Nav/examples/Navigation.css +3 -25
  216. package/docs/components/Nav/examples/Navigation.md +99 -0
  217. package/docs/components/NotificationBadge/examples/NotificationBadge.md +5 -7
  218. package/docs/components/OptionsMenu/deprecated/options-menu.md +12 -3
  219. package/docs/components/Popover/examples/Popover.css +4 -9
  220. package/docs/components/Radio/examples/Radio.md +63 -55
  221. package/docs/components/Select/deprecated/Select.md +184 -177
  222. package/docs/components/Table/examples/Table.css +2 -2
  223. package/docs/components/Table/examples/Table.md +2 -2
  224. package/docs/components/TextInputGroup/examples/TextInputGroup.css +1 -1
  225. package/docs/components/Tile/examples/Tile.css +1 -1
  226. package/docs/components/Toolbar/examples/Toolbar.md +525 -431
  227. package/docs/components/Tooltip/examples/Tooltip.css +4 -0
  228. package/docs/components/Tooltip/examples/Tooltip.md +3 -1
  229. package/docs/components/Truncate/examples/Truncate.md +2 -2
  230. package/docs/demos/AboutModal/examples/AboutModal.md +83 -8
  231. package/docs/demos/Alert/examples/Alert.md +249 -24
  232. package/docs/demos/BackToTop/examples/BackToTop.md +83 -8
  233. package/docs/demos/Banner/examples/Banner.md +168 -16
  234. package/docs/demos/Card/examples/Card.css +3 -3
  235. package/docs/demos/Card/examples/Card.md +26 -10
  236. package/docs/demos/CardView/examples/CardView.md +107 -28
  237. package/docs/demos/ContextSelector/examples/ContextSelector.md +332 -32
  238. package/docs/demos/Dashboard/examples/Dashboard.md +86 -11
  239. package/docs/demos/DataList/examples/DataList.md +340 -34
  240. package/docs/demos/DescriptionList/examples/DescriptionList.md +249 -24
  241. package/docs/demos/Drawer/examples/Drawer.md +415 -40
  242. package/docs/demos/JumpLinks/examples/JumpLinks.md +498 -48
  243. package/docs/demos/Masthead/examples/Masthead.md +742 -67
  244. package/docs/demos/Modal/examples/Modal.md +498 -48
  245. package/docs/demos/Nav/examples/Nav.md +664 -64
  246. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +415 -40
  247. package/docs/demos/Page/examples/Page.md +747 -72
  248. package/docs/demos/Page/examples/Penta.md +746 -0
  249. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +741 -180
  250. package/docs/demos/Skeleton/examples/Skeleton.md +90 -43
  251. package/docs/demos/Table/examples/Table.md +1581 -372
  252. package/docs/demos/Tabs/examples/Tabs.md +526 -69
  253. package/docs/demos/Toolbar/examples/Toolbar.css +5 -0
  254. package/docs/demos/Toolbar/examples/Toolbar.md +210 -60
  255. package/docs/demos/Wizard/examples/Wizard.md +747 -72
  256. package/docs/layouts/Flex/examples/Flex.md +5 -5
  257. package/docs/utilities/BoxShadow/examples/box-shadow.css +5 -5
  258. package/icons/pficons.mjs +1 -0
  259. package/layouts/Flex/flex.css +115 -43
  260. package/layouts/Flex/flex.scss +20 -8
  261. package/package.json +9 -5
  262. package/patternfly-addons.css +732 -972
  263. package/patternfly-base-no-globals-theme-dark-unversioned.css +886 -3
  264. package/patternfly-base-no-globals.css +886 -3
  265. package/patternfly-base-theme-dark-unversioned.css +899 -17
  266. package/patternfly-base.css +899 -17
  267. package/patternfly-no-globals.css +4239 -2698
  268. package/patternfly-theme-dark-unversioned.css +4252 -2712
  269. package/patternfly.css +4252 -2712
  270. package/patternfly.min.css +1 -1
  271. package/patternfly.min.css.map +1 -1
  272. package/sass-utilities/functions.scss +6 -0
  273. package/sass-utilities/mixins.scss +62 -2
  274. package/sass-utilities/scss-variables.scss +8 -8
  275. package/sass-utilities/themes/dark/mixins.scss +3 -1
  276. package/utilities/Accessibility/accessibility.css +12 -12
  277. package/utilities/Spacing/spacing.css +720 -960
  278. package/utilities/Spacing/spacing.scss +4 -8
  279. package/components/Alert/themes/dark/alert.scss +0 -17
  280. package/components/Masthead/themes/dark/masthead.scss +0 -14
  281. package/components/NotificationBadge/themes/dark/notification-badge.scss +0 -10
  282. package/docs/components/NotificationBadge/examples/NotificationBadge.css +0 -3
package/components/Page/page.css CHANGED
@@ -10,7 +10,7 @@
10
10
  --pf-v5-global--icon--Color--dark: var(--pf-v5-global--icon--Color--dark--dark);
11
11
  }
12
12
 
13
- .pf-v5-c-page__main-section[class*=pf-m-dark-], .pf-v5-c-page__sidebar-body.pf-m-menu .pf-v5-c-context-selector, .pf-v5-c-page__sidebar, .pf-v5-c-page__header {
13
+ .pf-v5-c-page__main-section[class*=pf-m-dark-], .pf-v5-c-page__sidebar-body.pf-m-menu .pf-v5-c-context-selector, .pf-v5-c-page__header {
14
14
  --pf-v5-global--Color--100: var(--pf-v5-global--Color--light-100);
15
15
  --pf-v5-global--Color--200: var(--pf-v5-global--Color--light-200);
16
16
  --pf-v5-global--BorderColor--100: var(--pf-v5-global--BorderColor--light-100);
@@ -21,7 +21,7 @@
21
21
  --pf-v5-global--icon--Color--light: var(--pf-v5-global--icon--Color--light--light);
22
22
  --pf-v5-global--icon--Color--dark: var(--pf-v5-global--icon--Color--dark--light);
23
23
  }
24
- .pf-v5-c-page__main-section[class*=pf-m-dark-] .pf-v5-c-button, .pf-v5-c-page__sidebar-body.pf-m-menu .pf-v5-c-context-selector .pf-v5-c-button, .pf-v5-c-page__sidebar .pf-v5-c-button, .pf-v5-c-page__header .pf-v5-c-button {
24
+ .pf-v5-c-page__main-section[class*=pf-m-dark-] .pf-v5-c-button, .pf-v5-c-page__sidebar-body.pf-m-menu .pf-v5-c-context-selector .pf-v5-c-button, .pf-v5-c-page__header .pf-v5-c-button {
25
25
  --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--dark-100);
26
26
  }
27
27
 
@@ -75,31 +75,31 @@
75
75
  }
76
76
 
77
77
  :root {
78
- --pf-v5-c-page--BackgroundColor: var(--pf-v5-global--BackgroundColor--light-300);
79
- --pf-v5-c-page--inset: var(--pf-v5-global--spacer--md);
80
- --pf-v5-c-page--xl--inset: var(--pf-v5-global--spacer--lg);
81
- --pf-v5-c-page__header--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-100);
78
+ --pf-v5-c-page--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
79
+ --pf-v5-c-page--inset: var(--pf-t--global--spacer--md);
80
+ --pf-v5-c-page--xl--inset: var(--pf-t--global--spacer--xl);
81
+ --pf-v5-c-page__header--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
82
82
  --pf-v5-c-page__header--ZIndex: var(--pf-v5-global--ZIndex--md);
83
83
  --pf-v5-c-page__header--MinHeight: 4.75rem;
84
- --pf-v5-c-page__header-brand--PaddingLeft: var(--pf-v5-global--spacer--md);
85
- --pf-v5-c-page__header-brand--xl--PaddingRight: var(--pf-v5-global--spacer--xl);
86
- --pf-v5-c-page__header-brand--xl--PaddingLeft: var(--pf-v5-global--spacer--lg);
87
- --pf-v5-c-page__header-sidebar-toggle__c-button--PaddingTop: var(--pf-v5-global--spacer--sm);
88
- --pf-v5-c-page__header-sidebar-toggle__c-button--PaddingRight: var(--pf-v5-global--spacer--sm);
89
- --pf-v5-c-page__header-sidebar-toggle__c-button--PaddingBottom: var(--pf-v5-global--spacer--sm);
90
- --pf-v5-c-page__header-sidebar-toggle__c-button--PaddingLeft: var(--pf-v5-global--spacer--sm);
91
- --pf-v5-c-page__header-sidebar-toggle__c-button--MarginRight: var(--pf-v5-global--spacer--md);
84
+ --pf-v5-c-page__header-brand--PaddingLeft: var(--pf-t--global--spacer--md);
85
+ --pf-v5-c-page__header-brand--xl--PaddingRight: var(--pf-t--global--spacer--xl);
86
+ --pf-v5-c-page__header-brand--xl--PaddingLeft: var(--pf-t--global--spacer--xl);
87
+ --pf-v5-c-page__header-sidebar-toggle__c-button--PaddingTop: var(--pf-t--global--spacer--sm);
88
+ --pf-v5-c-page__header-sidebar-toggle__c-button--PaddingRight: var(--pf-t--global--spacer--sm);
89
+ --pf-v5-c-page__header-sidebar-toggle__c-button--PaddingBottom: var(--pf-t--global--spacer--sm);
90
+ --pf-v5-c-page__header-sidebar-toggle__c-button--PaddingLeft: var(--pf-t--global--spacer--sm);
91
+ --pf-v5-c-page__header-sidebar-toggle__c-button--MarginRight: var(--pf-t--global--spacer--md);
92
92
  --pf-v5-c-page__header-sidebar-toggle__c-button--MarginLeft: calc(var(--pf-v5-c-page__header-sidebar-toggle__c-button--PaddingLeft) * -1);
93
- --pf-v5-c-page__header-sidebar-toggle__c-button--FontSize: var(--pf-v5-global--FontSize--2xl);
93
+ --pf-v5-c-page__header-sidebar-toggle__c-button--FontSize: var(--pf-t--global--icon--size--lg);
94
94
  --pf-v5-c-page__header-brand-link--c-brand--MaxHeight: 3.75rem;
95
- --pf-v5-c-page__header-nav--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-300);
95
+ --pf-v5-c-page__header-nav--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
96
96
  --pf-v5-c-page__header-nav--xl--BackgroundColor: transparent;
97
- --pf-v5-c-page__header-nav--xl--PaddingRight: var(--pf-v5-global--spacer--xl);
98
- --pf-v5-c-page__header-nav--xl--PaddingLeft: var(--pf-v5-global--spacer--xl);
99
- --pf-v5-c-page__header-tools--MarginRight: var(--pf-v5-global--spacer--md);
100
- --pf-v5-c-page__header-tools--xl--MarginRight: var(--pf-v5-global--spacer--lg);
101
- --pf-v5-c-page__header-tools--c-avatar--MarginLeft: var(--pf-v5-global--spacer--md);
102
- --pf-v5-c-page__header-tools-group--MarginLeft: var(--pf-v5-global--spacer--xl);
97
+ --pf-v5-c-page__header-nav--xl--PaddingRight: var(--pf-t--global--spacer--xl);
98
+ --pf-v5-c-page__header-nav--xl--PaddingLeft: var(--pf-t--global--spacer--xl);
99
+ --pf-v5-c-page__header-tools--MarginRight: var(--pf-t--global--spacer--md);
100
+ --pf-v5-c-page__header-tools--xl--MarginRight: var(--pf-t--global--spacer--lg);
101
+ --pf-v5-c-page__header-tools--c-avatar--MarginLeft: var(--pf-t--global--spacer--md);
102
+ --pf-v5-c-page__header-tools-group--MarginLeft: var(--pf-t--global--spacer--xl);
103
103
  --pf-v5-c-page__header-tools-group--Display: flex;
104
104
  --pf-v5-c-page__header-tools-item--Display: block;
105
105
  --pf-v5-c-page__header-tools-item--c-notification-badge--hover--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-200);
@@ -114,16 +114,24 @@
114
114
  --pf-v5-c-page__header-tools--c-button--m-selected--c-notification-badge--m-unread--after--BorderColor: transparent;
115
115
  --pf-v5-c-page__sidebar--ZIndex: var(--pf-v5-global--ZIndex--sm);
116
116
  --pf-v5-c-page__sidebar--Width: 18.125rem;
117
- --pf-v5-c-page__sidebar--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-300);
117
+ --pf-v5-c-page__sidebar--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
118
118
  --pf-v5-c-page__sidebar--m-light--BackgroundColor: var(--pf-v5-global--BackgroundColor--light-100);
119
119
  --pf-v5-c-page__sidebar--m-light--BorderRightWidth: var(--pf-v5-global--BorderWidth--sm);
120
120
  --pf-v5-c-page__sidebar--m-light--BorderRightColor: var(--pf-v5-global--BorderColor--100);
121
- --pf-v5-c-page__sidebar--BoxShadow: var(--pf-v5-global--BoxShadow--lg-right);
121
+ --pf-v5-c-page__sidebar--BoxShadow: none;
122
122
  --pf-v5-c-page__sidebar--Transition: var(--pf-v5-global--Transition);
123
123
  --pf-v5-c-page__sidebar--TranslateX: -100%;
124
124
  --pf-v5-c-page__sidebar--TranslateZ: 0;
125
125
  --pf-v5-c-page__sidebar--m-expanded--TranslateX: 0;
126
126
  --pf-v5-c-page__sidebar--xl--TranslateX: 0;
127
+ --pf-v5-c-page__sidebar-header--BorderBottomWidth: var(--pf-t--global--border--width--divider--default);
128
+ --pf-v5-c-page__sidebar-header--BorderBottomColor: var(--pf-t--global--border--color--default);
129
+ --pf-v5-c-page__sidebar-header--PaddingTop: var(--pf-t--global--spacer--sm);
130
+ --pf-v5-c-page__sidebar-header--PaddingBottom: var(--pf-t--global--spacer--md);
131
+ --pf-v5-c-page__sidebar-title--FontSize: var(--pf-t--global--font--size--heading--xs);
132
+ --pf-v5-c-page__sidebar-title--LineHeight: var(--pf-t--global--font--line-height--heading);
133
+ --pf-v5-c-page__sidebar-title--FontFamily: var(--pf-t--global--font--family--heading);
134
+ --pf-v5-c-page__sidebar-title--FontWeight: var(--pf-t--global--font--weight--heading--bold);
127
135
  --pf-v5-c-page__sidebar-body--PaddingRight: 0;
128
136
  --pf-v5-c-page__sidebar-body--PaddingLeft: 0;
129
137
  --pf-v5-c-page__sidebar-body--m-page-insets--PaddingRight: var(--pf-v5-c-page--inset);
@@ -132,22 +140,19 @@
132
140
  --pf-v5-c-page__sidebar-body--m-menu--BorderTopWidth: var(--pf-v5-global--BorderWidth--sm);
133
141
  --pf-v5-c-page__sidebar-body--m-menu--c-context-selector--BorderBottomColor: var(--pf-v5-global--BackgroundColor--dark-200);
134
142
  --pf-v5-c-page__main--ZIndex: var(--pf-v5-global--ZIndex--xs);
135
- --pf-v5-c-page__main-section--PaddingTop: var(--pf-v5-global--spacer--md);
136
- --pf-v5-c-page__main-section--PaddingRight: var(--pf-v5-global--spacer--md);
137
- --pf-v5-c-page__main-section--PaddingBottom: var(--pf-v5-global--spacer--md);
138
- --pf-v5-c-page__main-section--PaddingLeft: var(--pf-v5-global--spacer--md);
139
- --pf-v5-c-page__main-section--xl--PaddingTop: var(--pf-v5-global--spacer--lg);
140
- --pf-v5-c-page__main-section--xl--PaddingRight: var(--pf-v5-global--spacer--lg);
141
- --pf-v5-c-page__main-section--xl--PaddingBottom: var(--pf-v5-global--spacer--lg);
142
- --pf-v5-c-page__main-section--xl--PaddingLeft: var(--pf-v5-global--spacer--lg);
143
- --pf-v5-c-page__main-breadcrumb--main-section--PaddingTop: var(--pf-v5-global--spacer--md);
144
- --pf-v5-c-page__main-section--BackgroundColor: var(--pf-v5-global--BackgroundColor--light-300);
145
- --pf-v5-c-page__main-section--m-light--BackgroundColor: var(--pf-v5-global--BackgroundColor--light-100);
146
- --pf-v5-c-page__main-section--m-light-100--BackgroundColor: var(--pf-v5-global--BackgroundColor--150);
147
- --pf-v5-c-page__main-section--m-dark-100--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-transparent-100);
148
- --pf-v5-c-page__main-section--m-dark-200--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-transparent-200);
149
- --pf-v5-c-page__main-breadcrumb--page__main-tabs--PaddingTop: var(--pf-v5-global--spacer--md);
150
- --pf-v5-c-page__main-nav--page__main-tabs--PaddingTop: var(--pf-v5-global--spacer--md);
143
+ --pf-v5-c-page__main-section--MarginTop: var(--pf-t--global--spacer--md);
144
+ --pf-v5-c-page__main-section--PaddingTop: var(--pf-t--global--spacer--lg);
145
+ --pf-v5-c-page__main-section--PaddingRight: var(--pf-t--global--spacer--lg);
146
+ --pf-v5-c-page__main-section--PaddingBottom: 0;
147
+ --pf-v5-c-page__main-section--PaddingLeft: var(--pf-t--global--spacer--lg);
148
+ --pf-v5-c-page__main-breadcrumb--main-section--PaddingTop: var(--pf-t--global--spacer--md);
149
+ --pf-v5-c-page__main-section--BackgroundColor: transparent;
150
+ --pf-v5-c-page__main-section--m-light--BackgroundColor: transparent;
151
+ --pf-v5-c-page__main-section--m-light-100--BackgroundColor: transparent;
152
+ --pf-v5-c-page__main-section--m-dark-100--BackgroundColor: transparent;
153
+ --pf-v5-c-page__main-section--m-dark-200--BackgroundColor: transparent;
154
+ --pf-v5-c-page__main-breadcrumb--page__main-tabs--PaddingTop: var(--pf-t--global--spacer--md);
155
+ --pf-v5-c-page__main-nav--page__main-tabs--PaddingTop: var(--pf-t--global--spacer--md);
151
156
  --pf-v5-c-page--section--m-limit-width--MaxWidth: calc(125rem - var(--pf-v5-c-page__sidebar--Width));
152
157
  --pf-v5-c-page--section--m-sticky-top--ZIndex: var(--pf-v5-global--ZIndex--md);
153
158
  --pf-v5-c-page--section--m-sticky-top--BoxShadow: var(--pf-v5-global--BoxShadow--sm-bottom);
@@ -171,19 +176,14 @@
171
176
  --pf-v5-c-page__main-subnav--BorderLeftColor: var(--pf-v5-global--palette--black-800);
172
177
  --pf-v5-c-page__sidebar--main__main-subnav--BorderLeftWidth: var(--pf-v5-global--BorderWidth--sm);
173
178
  --pf-v5-c-page__sidebar--m-collapsed--main__main-subnav--BorderLeftWidth: 0;
174
- --pf-v5-c-page__main-breadcrumb--BackgroundColor: var(--pf-v5-global--BackgroundColor--light-100);
175
- --pf-v5-c-page__main-breadcrumb--PaddingTop: var(--pf-v5-global--spacer--md);
176
- --pf-v5-c-page__main-breadcrumb--PaddingRight: var(--pf-v5-global--spacer--md);
179
+ --pf-v5-c-page__main-breadcrumb--PaddingTop: var(--pf-t--global--spacer--md);
180
+ --pf-v5-c-page__main-breadcrumb--PaddingRight: var(--pf-t--global--spacer--md);
177
181
  --pf-v5-c-page__main-breadcrumb--PaddingBottom: 0;
178
- --pf-v5-c-page__main-breadcrumb--PaddingLeft: var(--pf-v5-global--spacer--md);
179
- --pf-v5-c-page__main-breadcrumb--m-sticky-top--PaddingBottom: var(--pf-v5-global--spacer--md);
180
- --pf-v5-c-page__main-breadcrumb--xl--PaddingRight: var(--pf-v5-global--spacer--lg);
181
- --pf-v5-c-page__main-breadcrumb--xl--PaddingLeft: var(--pf-v5-global--spacer--lg);
182
+ --pf-v5-c-page__main-breadcrumb--PaddingLeft: var(--pf-t--global--spacer--lg);
182
183
  --pf-v5-c-page__main-tabs--PaddingTop: 0;
183
184
  --pf-v5-c-page__main-tabs--PaddingRight: 0;
184
185
  --pf-v5-c-page__main-tabs--PaddingBottom: 0;
185
186
  --pf-v5-c-page__main-tabs--PaddingLeft: 0;
186
- --pf-v5-c-page__main-tabs--BackgroundColor: var(--pf-v5-global--BackgroundColor--light-100);
187
187
  --pf-v5-c-page__main-wizard--BackgroundColor: var(--pf-v5-global--BackgroundColor--light-100);
188
188
  --pf-v5-c-page__main-wizard--BorderTopColor: var(--pf-v5-global--BorderColor--100);
189
189
  --pf-v5-c-page__main-wizard--BorderTopWidth: var(--pf-v5-global--BorderWidth--sm);
@@ -212,26 +212,6 @@
212
212
  --pf-v5-c-page__sidebar--TranslateX: var(--pf-v5-c-page__sidebar--xl--TranslateX);
213
213
  }
214
214
  }
215
- @media screen and (min-width: 1200px) {
216
- :root {
217
- --pf-v5-c-page__main-section--PaddingTop: var(--pf-v5-c-page__main-section--xl--PaddingTop);
218
- --pf-v5-c-page__main-section--PaddingRight: var(--pf-v5-c-page__main-section--xl--PaddingRight);
219
- --pf-v5-c-page__main-section--PaddingBottom: var(--pf-v5-c-page__main-section--xl--PaddingBottom);
220
- --pf-v5-c-page__main-section--PaddingLeft: var(--pf-v5-c-page__main-section--xl--PaddingLeft);
221
- }
222
- }
223
- @media screen and (min-width: 1200px) {
224
- :root {
225
- --pf-v5-c-page__main-nav--PaddingRight: var(--pf-v5-c-page__main-nav--xl--PaddingRight);
226
- --pf-v5-c-page__main-nav--PaddingLeft: var(--pf-v5-c-page__main-nav--xl--PaddingLeft);
227
- }
228
- }
229
- @media screen and (min-width: 1200px) {
230
- :root {
231
- --pf-v5-c-page__main-breadcrumb--PaddingRight: var(--pf-v5-c-page__main-breadcrumb--xl--PaddingRight);
232
- --pf-v5-c-page__main-breadcrumb--PaddingLeft: var(--pf-v5-c-page__main-breadcrumb--xl--PaddingLeft);
233
- }
234
- }
235
215
 
236
216
  .pf-v5-c-page {
237
217
  display: grid;
@@ -281,11 +261,11 @@
281
261
 
282
262
  .pf-v5-c-page__header-brand {
283
263
  grid-column: 1/2;
284
- padding-left: var(--pf-v5-c-page__header-brand--PaddingLeft);
264
+ padding-inline-start: var(--pf-v5-c-page__header-brand--PaddingLeft);
285
265
  }
286
266
  @media (min-width: 1200px) {
287
267
  .pf-v5-c-page__header-brand {
288
- padding-right: var(--pf-v5-c-page__header-brand--xl--PaddingRight);
268
+ padding-inline-end: var(--pf-v5-c-page__header-brand--xl--PaddingRight);
289
269
  }
290
270
  }
291
271
 
@@ -299,9 +279,12 @@
299
279
  }
300
280
 
301
281
  .pf-v5-c-page__header-brand-toggle .pf-v5-c-button {
302
- padding: var(--pf-v5-c-page__header-sidebar-toggle__c-button--PaddingTop) var(--pf-v5-c-page__header-sidebar-toggle__c-button--PaddingRight) var(--pf-v5-c-page__header-sidebar-toggle__c-button--PaddingBottom) var(--pf-v5-c-page__header-sidebar-toggle__c-button--PaddingLeft);
303
- margin-right: var(--pf-v5-c-page__header-sidebar-toggle__c-button--MarginRight);
304
- margin-left: var(--pf-v5-c-page__header-sidebar-toggle__c-button--MarginLeft);
282
+ padding-block-start: var(--pf-v5-c-page__header-sidebar-toggle__c-button--PaddingTop);
283
+ padding-block-end: var(--pf-v5-c-page__header-sidebar-toggle__c-button--PaddingBottom);
284
+ padding-inline-start: var(--pf-v5-c-page__header-sidebar-toggle__c-button--PaddingLeft);
285
+ padding-inline-end: var(--pf-v5-c-page__header-sidebar-toggle__c-button--PaddingRight);
286
+ margin-inline-start: var(--pf-v5-c-page__header-sidebar-toggle__c-button--MarginLeft);
287
+ margin-inline-end: var(--pf-v5-c-page__header-sidebar-toggle__c-button--MarginRight);
305
288
  font-size: var(--pf-v5-c-page__header-sidebar-toggle__c-button--FontSize);
306
289
  line-height: 1;
307
290
  }
@@ -311,8 +294,8 @@
311
294
  grid-column: 1/-1;
312
295
  align-self: stretch;
313
296
  min-width: 0;
314
- padding-right: var(--pf-v5-c-page__header-nav--PaddingRight);
315
- padding-left: var(--pf-v5-c-page__header-nav--PaddingLeft);
297
+ padding-inline-start: var(--pf-v5-c-page__header-nav--PaddingLeft);
298
+ padding-inline-end: var(--pf-v5-c-page__header-nav--PaddingRight);
316
299
  background-color: var(--pf-v5-c-page__header-nav--BackgroundColor);
317
300
  }
318
301
  @media screen and (min-width: 1200px) {
@@ -327,11 +310,11 @@
327
310
 
328
311
  .pf-v5-c-page__header-tools {
329
312
  grid-column: 2/3;
330
- margin-right: var(--pf-v5-c-page__header-tools--MarginRight);
331
- margin-left: auto;
313
+ margin-inline-start: auto;
314
+ margin-inline-end: var(--pf-v5-c-page__header-tools--MarginRight);
332
315
  }
333
316
  .pf-v5-c-page__header-tools .pf-v5-c-avatar {
334
- margin-left: var(--pf-v5-c-page__header-tools--c-avatar--MarginLeft);
317
+ margin-inline-start: var(--pf-v5-c-page__header-tools--c-avatar--MarginLeft);
335
318
  }
336
319
  @media screen and (min-width: 992px) {
337
320
  .pf-v5-c-page__header-tools {
@@ -344,7 +327,7 @@
344
327
  align-items: center;
345
328
  }
346
329
  .pf-v5-c-page__header-tools-group + .pf-v5-c-page__header-tools-group {
347
- margin-left: var(--pf-v5-c-page__header-tools-group--MarginLeft);
330
+ margin-inline-start: var(--pf-v5-c-page__header-tools-group--MarginLeft);
348
331
  }
349
332
 
350
333
  .pf-v5-c-page__header-tools-item {
@@ -359,10 +342,7 @@
359
342
  }
360
343
  .pf-v5-c-page__header-tools-item.pf-m-selected .pf-v5-c-button::before {
361
344
  position: absolute;
362
- top: 0;
363
- right: 0;
364
- bottom: 0;
365
- left: 0;
345
+ inset: 0;
366
346
  width: var(--pf-v5-c-page__header-tools--c-button--m-selected--before--Width);
367
347
  height: var(--pf-v5-c-page__header-tools--c-button--m-selected--before--Height);
368
348
  content: "";
@@ -384,7 +364,6 @@
384
364
  }
385
365
 
386
366
  .pf-v5-c-page__sidebar {
387
- color: var(--pf-v5-global--Color--100);
388
367
  z-index: var(--pf-v5-c-page__sidebar--ZIndex);
389
368
  display: flex;
390
369
  flex-direction: column;
@@ -392,6 +371,10 @@
392
371
  grid-row-start: 2;
393
372
  grid-column-start: 1;
394
373
  width: var(--pf-v5-c-page__sidebar--Width);
374
+ padding-block-start: 0;
375
+ padding-block-end: var(--pf-t--global--spacer--lg);
376
+ padding-inline-start: var(--pf-t--global--spacer--lg);
377
+ margin-inline-end: var(--pf-v5-c-page__sidebar--MarginRight);
395
378
  overflow-x: hidden;
396
379
  overflow-y: auto;
397
380
  -webkit-overflow-scrolling: touch;
@@ -399,6 +382,10 @@
399
382
  transition: var(--pf-v5-c-page__sidebar--Transition);
400
383
  transform: translateX(var(--pf-v5-c-page__sidebar--TranslateX)) translateZ(var(--pf-v5-c-page__sidebar--TranslateZ));
401
384
  }
385
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-page__sidebar {
386
+ transform: translateX(calc(var(--pf-v5-c-page__sidebar--TranslateX) * var(--pf-v5-global--inverse--multiplier))) translateZ(var(--pf-v5-c-page__sidebar--TranslateZ));
387
+ }
388
+
402
389
  .pf-v5-c-page__sidebar.pf-m-expanded {
403
390
  --pf-v5-c-page__sidebar--TranslateX: var(--pf-v5-c-page__sidebar--m-expanded--TranslateX);
404
391
  box-shadow: var(--pf-v5-c-page__sidebar--BoxShadow);
@@ -415,19 +402,32 @@
415
402
  .pf-v5-c-page__sidebar.pf-m-light {
416
403
  color: var(--pf-v5-global--Color--100);
417
404
  --pf-v5-c-page__sidebar--BackgroundColor: var(--pf-v5-c-page__sidebar--m-light--BackgroundColor);
418
- border-right: var(--pf-v5-c-page__sidebar--m-light--BorderRightWidth) solid var(--pf-v5-c-page__sidebar--m-light--BorderRightColor);
405
+ border-inline-end: var(--pf-v5-c-page__sidebar--m-light--BorderRightWidth) solid var(--pf-v5-c-page__sidebar--m-light--BorderRightColor);
406
+ }
407
+
408
+ .pf-v5-c-page__sidebar-header {
409
+ padding-block-start: var(--pf-v5-c-page__sidebar-header--PaddingTop);
410
+ padding-block-end: var(--pf-v5-c-page__sidebar-header--PaddingBottom);
411
+ border-block-end: var(--pf-v5-c-page__sidebar-header--BorderBottomWidth) solid var(--pf-v5-c-page__sidebar-header--BorderBottomColor);
412
+ }
413
+
414
+ .pf-v5-c-page__sidebar-title {
415
+ font-family: var(--pf-v5-c-page__sidebar-title--FontFamily);
416
+ font-size: var(--pf-v5-c-page__sidebar-title--FontSize);
417
+ font-weight: var(--pf-v5-c-page__sidebar-title--FontWeight);
418
+ line-height: var(--pf-v5-c-page__sidebar-title--LineHeight);
419
419
  }
420
420
 
421
421
  .pf-v5-c-page__sidebar-body {
422
- padding-right: var(--pf-v5-c-page__sidebar-body--PaddingRight);
423
- padding-left: var(--pf-v5-c-page__sidebar-body--PaddingLeft);
422
+ padding-inline-start: var(--pf-v5-c-page__sidebar-body--PaddingLeft);
423
+ padding-inline-end: var(--pf-v5-c-page__sidebar-body--PaddingRight);
424
424
  }
425
425
  .pf-v5-c-page__sidebar-body:last-child {
426
426
  flex-grow: 1;
427
427
  }
428
428
  .pf-v5-c-page__sidebar-body.pf-m-menu {
429
429
  background-color: var(--pf-v5-global--palette--black-900);
430
- border-top: var(--pf-v5-c-page__sidebar-body--m-menu--BorderTopWidth) solid var(--pf-v5-c-page__sidebar-body--m-menu--BorderTopColor);
430
+ border-block-start: var(--pf-v5-c-page__sidebar-body--m-menu--BorderTopWidth) solid var(--pf-v5-c-page__sidebar-body--m-menu--BorderTopColor);
431
431
  }
432
432
  .pf-v5-c-page__sidebar-body.pf-m-menu + .pf-v5-c-page__sidebar-body.pf-m-menu {
433
433
  --pf-v5-c-page__sidebar-body--m-menu--BorderTopWidth: 0;
@@ -536,7 +536,7 @@
536
536
  .pf-v5-c-page__main-group.pf-m-sticky-top,
537
537
  .pf-v5-c-page__main-subnav.pf-m-sticky-top {
538
538
  position: sticky;
539
- top: 0;
539
+ inset-block-start: 0;
540
540
  z-index: var(--pf-v5-c-page--section--m-sticky-top--ZIndex);
541
541
  box-shadow: var(--pf-v5-c-page--section--m-sticky-top--BoxShadow);
542
542
  }
@@ -548,7 +548,7 @@
548
548
  .pf-v5-c-page__main-group.pf-m-sticky-bottom,
549
549
  .pf-v5-c-page__main-subnav.pf-m-sticky-bottom {
550
550
  position: sticky;
551
- bottom: 0;
551
+ inset-block-end: 0;
552
552
  z-index: var(--pf-v5-c-page--section--m-sticky-bottom--ZIndex);
553
553
  box-shadow: var(--pf-v5-c-page--section--m-sticky-bottom--BoxShadow);
554
554
  }
@@ -561,7 +561,7 @@
561
561
  .pf-v5-c-page__main-group.pf-m-sticky-top-on-sm-height,
562
562
  .pf-v5-c-page__main-subnav.pf-m-sticky-top-on-sm-height {
563
563
  position: sticky;
564
- top: 0;
564
+ inset-block-start: 0;
565
565
  z-index: var(--pf-v5-c-page--section--m-sticky-top--ZIndex);
566
566
  box-shadow: var(--pf-v5-c-page--section--m-sticky-top--BoxShadow);
567
567
  }
@@ -573,7 +573,7 @@
573
573
  .pf-v5-c-page__main-group.pf-m-sticky-bottom-on-sm-height,
574
574
  .pf-v5-c-page__main-subnav.pf-m-sticky-bottom-on-sm-height {
575
575
  position: sticky;
576
- bottom: 0;
576
+ inset-block-end: 0;
577
577
  z-index: var(--pf-v5-c-page--section--m-sticky-bottom--ZIndex);
578
578
  box-shadow: var(--pf-v5-c-page--section--m-sticky-bottom--BoxShadow);
579
579
  }
@@ -587,7 +587,7 @@
587
587
  .pf-v5-c-page__main-group.pf-m-sticky-top-on-md-height,
588
588
  .pf-v5-c-page__main-subnav.pf-m-sticky-top-on-md-height {
589
589
  position: sticky;
590
- top: 0;
590
+ inset-block-start: 0;
591
591
  z-index: var(--pf-v5-c-page--section--m-sticky-top--ZIndex);
592
592
  box-shadow: var(--pf-v5-c-page--section--m-sticky-top--BoxShadow);
593
593
  }
@@ -599,7 +599,7 @@
599
599
  .pf-v5-c-page__main-group.pf-m-sticky-bottom-on-md-height,
600
600
  .pf-v5-c-page__main-subnav.pf-m-sticky-bottom-on-md-height {
601
601
  position: sticky;
602
- bottom: 0;
602
+ inset-block-end: 0;
603
603
  z-index: var(--pf-v5-c-page--section--m-sticky-bottom--ZIndex);
604
604
  box-shadow: var(--pf-v5-c-page--section--m-sticky-bottom--BoxShadow);
605
605
  }
@@ -613,7 +613,7 @@
613
613
  .pf-v5-c-page__main-group.pf-m-sticky-top-on-lg-height,
614
614
  .pf-v5-c-page__main-subnav.pf-m-sticky-top-on-lg-height {
615
615
  position: sticky;
616
- top: 0;
616
+ inset-block-start: 0;
617
617
  z-index: var(--pf-v5-c-page--section--m-sticky-top--ZIndex);
618
618
  box-shadow: var(--pf-v5-c-page--section--m-sticky-top--BoxShadow);
619
619
  }
@@ -625,7 +625,7 @@
625
625
  .pf-v5-c-page__main-group.pf-m-sticky-bottom-on-lg-height,
626
626
  .pf-v5-c-page__main-subnav.pf-m-sticky-bottom-on-lg-height {
627
627
  position: sticky;
628
- bottom: 0;
628
+ inset-block-end: 0;
629
629
  z-index: var(--pf-v5-c-page--section--m-sticky-bottom--ZIndex);
630
630
  box-shadow: var(--pf-v5-c-page--section--m-sticky-bottom--BoxShadow);
631
631
  }
@@ -639,7 +639,7 @@
639
639
  .pf-v5-c-page__main-group.pf-m-sticky-top-on-xl-height,
640
640
  .pf-v5-c-page__main-subnav.pf-m-sticky-top-on-xl-height {
641
641
  position: sticky;
642
- top: 0;
642
+ inset-block-start: 0;
643
643
  z-index: var(--pf-v5-c-page--section--m-sticky-top--ZIndex);
644
644
  box-shadow: var(--pf-v5-c-page--section--m-sticky-top--BoxShadow);
645
645
  }
@@ -651,7 +651,7 @@
651
651
  .pf-v5-c-page__main-group.pf-m-sticky-bottom-on-xl-height,
652
652
  .pf-v5-c-page__main-subnav.pf-m-sticky-bottom-on-xl-height {
653
653
  position: sticky;
654
- bottom: 0;
654
+ inset-block-end: 0;
655
655
  z-index: var(--pf-v5-c-page--section--m-sticky-bottom--ZIndex);
656
656
  box-shadow: var(--pf-v5-c-page--section--m-sticky-bottom--BoxShadow);
657
657
  }
@@ -665,7 +665,7 @@
665
665
  .pf-v5-c-page__main-group.pf-m-sticky-top-on-2xl-height,
666
666
  .pf-v5-c-page__main-subnav.pf-m-sticky-top-on-2xl-height {
667
667
  position: sticky;
668
- top: 0;
668
+ inset-block-start: 0;
669
669
  z-index: var(--pf-v5-c-page--section--m-sticky-top--ZIndex);
670
670
  box-shadow: var(--pf-v5-c-page--section--m-sticky-top--BoxShadow);
671
671
  }
@@ -677,12 +677,25 @@
677
677
  .pf-v5-c-page__main-group.pf-m-sticky-bottom-on-2xl-height,
678
678
  .pf-v5-c-page__main-subnav.pf-m-sticky-bottom-on-2xl-height {
679
679
  position: sticky;
680
- bottom: 0;
680
+ inset-block-end: 0;
681
681
  z-index: var(--pf-v5-c-page--section--m-sticky-bottom--ZIndex);
682
682
  box-shadow: var(--pf-v5-c-page--section--m-sticky-bottom--BoxShadow);
683
683
  }
684
684
  }
685
685
 
686
+ .pf-v5-c-page__main {
687
+ margin-block-start: 0;
688
+ margin-inline-start: var(--pf-t--global--spacer--lg);
689
+ margin-inline-end: var(--pf-t--global--spacer--lg);
690
+ }
691
+
692
+ .pf-v5-c-page__main-list {
693
+ padding-block-end: var(--pf-t--global--spacer--lg);
694
+ margin-block-end: var(--pf-t--global--spacer--lg);
695
+ background-color: var(--pf-t--global--background--color--primary--default);
696
+ border-radius: var(--pf-t--global--border--radius--large);
697
+ }
698
+
686
699
  .pf-v5-c-page__main,
687
700
  .pf-v5-c-page__drawer {
688
701
  z-index: var(--pf-v5-c-page__main--ZIndex);
@@ -698,50 +711,51 @@
698
711
 
699
712
  .pf-v5-c-page__main,
700
713
  .pf-v5-c-page__main-drawer,
701
- .pf-v5-c-page__main-group {
714
+ .pf-v5-c-page__main-group,
715
+ .pf-v5-c-page__main-list {
702
716
  display: flex;
703
717
  flex-direction: column;
704
718
  }
705
719
 
706
720
  .pf-v5-c-page__main-nav {
707
- padding-top: var(--pf-v5-c-page__main-nav--PaddingTop);
708
- padding-right: var(--pf-v5-c-page__main-nav--PaddingRight);
709
- padding-left: var(--pf-v5-c-page__main-nav--PaddingLeft);
721
+ padding-block-start: var(--pf-v5-c-page__main-nav--PaddingTop);
722
+ padding-inline-start: var(--pf-v5-c-page__main-nav--PaddingLeft);
723
+ padding-inline-end: var(--pf-v5-c-page__main-nav--PaddingRight);
710
724
  background-color: var(--pf-v5-c-page__main-nav--BackgroundColor);
711
725
  }
712
726
  .pf-v5-c-page__main-nav.pf-m-sticky-top, .pf-v5-c-page__main-group.pf-m-sticky-top .pf-v5-c-page__main-nav:last-child {
713
- padding-bottom: var(--pf-v5-c-page__main-nav--m-sticky-top--PaddingBottom);
727
+ padding-block-end: var(--pf-v5-c-page__main-nav--m-sticky-top--PaddingBottom);
714
728
  }
715
729
  @media (min-height: 0) {
716
730
  .pf-v5-c-page__main-nav.pf-m-sticky-top-on-sm-height, .pf-v5-c-page__main-group.pf-m-sticky-top-on-sm-height .pf-v5-c-page__main-nav:last-child {
717
- padding-bottom: var(--pf-v5-c-page__main-nav--m-sticky-top--PaddingBottom);
731
+ padding-block-end: var(--pf-v5-c-page__main-nav--m-sticky-top--PaddingBottom);
718
732
  }
719
733
  }
720
734
  @media (min-height: 40rem) {
721
735
  .pf-v5-c-page__main-nav.pf-m-sticky-top-on-md-height, .pf-v5-c-page__main-group.pf-m-sticky-top-on-md-height .pf-v5-c-page__main-nav:last-child {
722
- padding-bottom: var(--pf-v5-c-page__main-nav--m-sticky-top--PaddingBottom);
736
+ padding-block-end: var(--pf-v5-c-page__main-nav--m-sticky-top--PaddingBottom);
723
737
  }
724
738
  }
725
739
  @media (min-height: 48rem) {
726
740
  .pf-v5-c-page__main-nav.pf-m-sticky-top-on-lg-height, .pf-v5-c-page__main-group.pf-m-sticky-top-on-lg-height .pf-v5-c-page__main-nav:last-child {
727
- padding-bottom: var(--pf-v5-c-page__main-nav--m-sticky-top--PaddingBottom);
741
+ padding-block-end: var(--pf-v5-c-page__main-nav--m-sticky-top--PaddingBottom);
728
742
  }
729
743
  }
730
744
  @media (min-height: 60rem) {
731
745
  .pf-v5-c-page__main-nav.pf-m-sticky-top-on-xl-height, .pf-v5-c-page__main-group.pf-m-sticky-top-on-xl-height .pf-v5-c-page__main-nav:last-child {
732
- padding-bottom: var(--pf-v5-c-page__main-nav--m-sticky-top--PaddingBottom);
746
+ padding-block-end: var(--pf-v5-c-page__main-nav--m-sticky-top--PaddingBottom);
733
747
  }
734
748
  }
735
749
  @media (min-height: 80rem) {
736
750
  .pf-v5-c-page__main-nav.pf-m-sticky-top-on-2xl-height, .pf-v5-c-page__main-group.pf-m-sticky-top-on-2xl-height .pf-v5-c-page__main-nav:last-child {
737
- padding-bottom: var(--pf-v5-c-page__main-nav--m-sticky-top--PaddingBottom);
751
+ padding-block-end: var(--pf-v5-c-page__main-nav--m-sticky-top--PaddingBottom);
738
752
  }
739
753
  }
740
754
 
741
755
  .pf-v5-c-page__main-subnav {
742
756
  background-color: var(--pf-v5-c-page__main-subnav--BackgroundColor);
743
- border-top: var(--pf-v5-c-page__main-subnav--BorderTopWidth) solid var(--pf-v5-c-page__main-subnav--BorderTopColor);
744
- border-left: var(--pf-v5-c-page__main-subnav--BorderLeftWidth) solid var(--pf-v5-c-page__main-subnav--BorderLeftColor);
757
+ border-block-start: var(--pf-v5-c-page__main-subnav--BorderTopWidth) solid var(--pf-v5-c-page__main-subnav--BorderTopColor);
758
+ border-inline-start: var(--pf-v5-c-page__main-subnav--BorderLeftWidth) solid var(--pf-v5-c-page__main-subnav--BorderLeftColor);
745
759
  }
746
760
  @media screen and (min-width: 1200px) {
747
761
  .pf-v5-c-page__sidebar ~ .pf-v5-c-page__main {
@@ -753,7 +767,10 @@
753
767
  }
754
768
 
755
769
  .pf-v5-c-page__main-breadcrumb {
756
- padding: var(--pf-v5-c-page__main-breadcrumb--PaddingTop) var(--pf-v5-c-page__main-breadcrumb--PaddingRight) var(--pf-v5-c-page__main-breadcrumb--PaddingBottom) var(--pf-v5-c-page__main-breadcrumb--PaddingLeft);
770
+ padding-block-start: var(--pf-v5-c-page__main-breadcrumb--PaddingTop);
771
+ padding-block-end: var(--pf-v5-c-page__main-breadcrumb--PaddingBottom);
772
+ padding-inline-start: var(--pf-v5-c-page__main-breadcrumb--PaddingLeft);
773
+ padding-inline-end: var(--pf-v5-c-page__main-breadcrumb--PaddingRight);
757
774
  background-color: var(--pf-v5-c-page__main-breadcrumb--BackgroundColor);
758
775
  }
759
776
  .pf-v5-c-page__main-breadcrumb + .pf-v5-c-page__main-section {
@@ -789,7 +806,10 @@
789
806
  }
790
807
 
791
808
  .pf-v5-c-page__main-tabs {
792
- padding: var(--pf-v5-c-page__main-tabs--PaddingTop) var(--pf-v5-c-page__main-tabs--PaddingRight) var(--pf-v5-c-page__main-tabs--PaddingBottom) var(--pf-v5-c-page__main-tabs--PaddingLeft);
809
+ padding-block-start: var(--pf-v5-c-page__main-tabs--PaddingTop);
810
+ padding-block-end: var(--pf-v5-c-page__main-tabs--PaddingBottom);
811
+ padding-inline-start: var(--pf-v5-c-page__main-tabs--PaddingLeft);
812
+ padding-inline-end: var(--pf-v5-c-page__main-tabs--PaddingRight);
793
813
  background-color: var(--pf-v5-c-page__main-tabs--BackgroundColor);
794
814
  }
795
815
  .pf-v5-c-page__main-nav + .pf-v5-c-page__main-tabs {
@@ -815,7 +835,10 @@
815
835
  }
816
836
 
817
837
  .pf-v5-c-page__main-section {
818
- padding: var(--pf-v5-c-page__main-section--PaddingTop) var(--pf-v5-c-page__main-section--PaddingRight) var(--pf-v5-c-page__main-section--PaddingBottom) var(--pf-v5-c-page__main-section--PaddingLeft);
838
+ padding-block-start: var(--pf-v5-c-page__main-section--PaddingTop);
839
+ padding-block-end: var(--pf-v5-c-page__main-section--PaddingBottom);
840
+ padding-inline-start: var(--pf-v5-c-page__main-section--PaddingLeft);
841
+ padding-inline-end: var(--pf-v5-c-page__main-section--PaddingRight);
819
842
  background-color: var(--pf-v5-c-page__main-section--BackgroundColor);
820
843
  }
821
844
  .pf-v5-c-page__main-section.pf-m-light {
@@ -834,26 +857,38 @@
834
857
  --pf-v5-c-page__main-section--BackgroundColor: var(--pf-v5-c-page__main-section--m-dark-200--BackgroundColor);
835
858
  }
836
859
  .pf-v5-c-page__main-section.pf-m-padding {
837
- padding: var(--pf-v5-c-page__main-section--PaddingTop) var(--pf-v5-c-page__main-section--PaddingRight) var(--pf-v5-c-page__main-section--PaddingBottom) var(--pf-v5-c-page__main-section--PaddingLeft);
860
+ padding-block-start: var(--pf-v5-c-page__main-section--PaddingTop);
861
+ padding-block-end: var(--pf-v5-c-page__main-section--PaddingBottom);
862
+ padding-inline-start: var(--pf-v5-c-page__main-section--PaddingLeft);
863
+ padding-inline-end: var(--pf-v5-c-page__main-section--PaddingRight);
838
864
  }
839
865
  .pf-v5-c-page__main-section.pf-m-padding.pf-m-limit-width {
840
866
  padding: 0;
841
867
  }
842
868
  .pf-v5-c-page__main-section.pf-m-padding.pf-m-limit-width .pf-v5-c-page__main-body {
843
- padding: var(--pf-v5-c-page__main-section--PaddingTop) var(--pf-v5-c-page__main-section--PaddingRight) var(--pf-v5-c-page__main-section--PaddingBottom) var(--pf-v5-c-page__main-section--PaddingLeft);
869
+ padding-block-start: var(--pf-v5-c-page__main-section--PaddingTop);
870
+ padding-block-end: var(--pf-v5-c-page__main-section--PaddingBottom);
871
+ padding-inline-start: var(--pf-v5-c-page__main-section--PaddingLeft);
872
+ padding-inline-end: var(--pf-v5-c-page__main-section--PaddingRight);
844
873
  }
845
874
  .pf-v5-c-page__main-section.pf-m-no-padding, .pf-v5-c-page__main-section.pf-m-no-padding.pf-m-limit-width .pf-v5-c-page__main-body {
846
875
  padding: 0;
847
876
  }
848
877
  @media (min-width: 576px) {
849
878
  .pf-v5-c-page__main-section.pf-m-padding-on-sm {
850
- padding: var(--pf-v5-c-page__main-section--PaddingTop) var(--pf-v5-c-page__main-section--PaddingRight) var(--pf-v5-c-page__main-section--PaddingBottom) var(--pf-v5-c-page__main-section--PaddingLeft);
879
+ padding-block-start: var(--pf-v5-c-page__main-section--PaddingTop);
880
+ padding-block-end: var(--pf-v5-c-page__main-section--PaddingBottom);
881
+ padding-inline-start: var(--pf-v5-c-page__main-section--PaddingLeft);
882
+ padding-inline-end: var(--pf-v5-c-page__main-section--PaddingRight);
851
883
  }
852
884
  .pf-v5-c-page__main-section.pf-m-padding-on-sm.pf-m-limit-width {
853
885
  padding: 0;
854
886
  }
855
887
  .pf-v5-c-page__main-section.pf-m-padding-on-sm.pf-m-limit-width .pf-v5-c-page__main-body {
856
- padding: var(--pf-v5-c-page__main-section--PaddingTop) var(--pf-v5-c-page__main-section--PaddingRight) var(--pf-v5-c-page__main-section--PaddingBottom) var(--pf-v5-c-page__main-section--PaddingLeft);
888
+ padding-block-start: var(--pf-v5-c-page__main-section--PaddingTop);
889
+ padding-block-end: var(--pf-v5-c-page__main-section--PaddingBottom);
890
+ padding-inline-start: var(--pf-v5-c-page__main-section--PaddingLeft);
891
+ padding-inline-end: var(--pf-v5-c-page__main-section--PaddingRight);
857
892
  }
858
893
  .pf-v5-c-page__main-section.pf-m-no-padding-on-sm, .pf-v5-c-page__main-section.pf-m-no-padding-on-sm.pf-m-limit-width .pf-v5-c-page__main-body {
859
894
  padding: 0;
@@ -861,13 +896,19 @@
861
896
  }
862
897
  @media (min-width: 768px) {
863
898
  .pf-v5-c-page__main-section.pf-m-padding-on-md {
864
- padding: var(--pf-v5-c-page__main-section--PaddingTop) var(--pf-v5-c-page__main-section--PaddingRight) var(--pf-v5-c-page__main-section--PaddingBottom) var(--pf-v5-c-page__main-section--PaddingLeft);
899
+ padding-block-start: var(--pf-v5-c-page__main-section--PaddingTop);
900
+ padding-block-end: var(--pf-v5-c-page__main-section--PaddingBottom);
901
+ padding-inline-start: var(--pf-v5-c-page__main-section--PaddingLeft);
902
+ padding-inline-end: var(--pf-v5-c-page__main-section--PaddingRight);
865
903
  }
866
904
  .pf-v5-c-page__main-section.pf-m-padding-on-md.pf-m-limit-width {
867
905
  padding: 0;
868
906
  }
869
907
  .pf-v5-c-page__main-section.pf-m-padding-on-md.pf-m-limit-width .pf-v5-c-page__main-body {
870
- padding: var(--pf-v5-c-page__main-section--PaddingTop) var(--pf-v5-c-page__main-section--PaddingRight) var(--pf-v5-c-page__main-section--PaddingBottom) var(--pf-v5-c-page__main-section--PaddingLeft);
908
+ padding-block-start: var(--pf-v5-c-page__main-section--PaddingTop);
909
+ padding-block-end: var(--pf-v5-c-page__main-section--PaddingBottom);
910
+ padding-inline-start: var(--pf-v5-c-page__main-section--PaddingLeft);
911
+ padding-inline-end: var(--pf-v5-c-page__main-section--PaddingRight);
871
912
  }
872
913
  .pf-v5-c-page__main-section.pf-m-no-padding-on-md, .pf-v5-c-page__main-section.pf-m-no-padding-on-md.pf-m-limit-width .pf-v5-c-page__main-body {
873
914
  padding: 0;
@@ -875,13 +916,19 @@
875
916
  }
876
917
  @media (min-width: 992px) {
877
918
  .pf-v5-c-page__main-section.pf-m-padding-on-lg {
878
- padding: var(--pf-v5-c-page__main-section--PaddingTop) var(--pf-v5-c-page__main-section--PaddingRight) var(--pf-v5-c-page__main-section--PaddingBottom) var(--pf-v5-c-page__main-section--PaddingLeft);
919
+ padding-block-start: var(--pf-v5-c-page__main-section--PaddingTop);
920
+ padding-block-end: var(--pf-v5-c-page__main-section--PaddingBottom);
921
+ padding-inline-start: var(--pf-v5-c-page__main-section--PaddingLeft);
922
+ padding-inline-end: var(--pf-v5-c-page__main-section--PaddingRight);
879
923
  }
880
924
  .pf-v5-c-page__main-section.pf-m-padding-on-lg.pf-m-limit-width {
881
925
  padding: 0;
882
926
  }
883
927
  .pf-v5-c-page__main-section.pf-m-padding-on-lg.pf-m-limit-width .pf-v5-c-page__main-body {
884
- padding: var(--pf-v5-c-page__main-section--PaddingTop) var(--pf-v5-c-page__main-section--PaddingRight) var(--pf-v5-c-page__main-section--PaddingBottom) var(--pf-v5-c-page__main-section--PaddingLeft);
928
+ padding-block-start: var(--pf-v5-c-page__main-section--PaddingTop);
929
+ padding-block-end: var(--pf-v5-c-page__main-section--PaddingBottom);
930
+ padding-inline-start: var(--pf-v5-c-page__main-section--PaddingLeft);
931
+ padding-inline-end: var(--pf-v5-c-page__main-section--PaddingRight);
885
932
  }
886
933
  .pf-v5-c-page__main-section.pf-m-no-padding-on-lg, .pf-v5-c-page__main-section.pf-m-no-padding-on-lg.pf-m-limit-width .pf-v5-c-page__main-body {
887
934
  padding: 0;
@@ -889,13 +936,19 @@
889
936
  }
890
937
  @media (min-width: 1200px) {
891
938
  .pf-v5-c-page__main-section.pf-m-padding-on-xl {
892
- padding: var(--pf-v5-c-page__main-section--PaddingTop) var(--pf-v5-c-page__main-section--PaddingRight) var(--pf-v5-c-page__main-section--PaddingBottom) var(--pf-v5-c-page__main-section--PaddingLeft);
939
+ padding-block-start: var(--pf-v5-c-page__main-section--PaddingTop);
940
+ padding-block-end: var(--pf-v5-c-page__main-section--PaddingBottom);
941
+ padding-inline-start: var(--pf-v5-c-page__main-section--PaddingLeft);
942
+ padding-inline-end: var(--pf-v5-c-page__main-section--PaddingRight);
893
943
  }
894
944
  .pf-v5-c-page__main-section.pf-m-padding-on-xl.pf-m-limit-width {
895
945
  padding: 0;
896
946
  }
897
947
  .pf-v5-c-page__main-section.pf-m-padding-on-xl.pf-m-limit-width .pf-v5-c-page__main-body {
898
- padding: var(--pf-v5-c-page__main-section--PaddingTop) var(--pf-v5-c-page__main-section--PaddingRight) var(--pf-v5-c-page__main-section--PaddingBottom) var(--pf-v5-c-page__main-section--PaddingLeft);
948
+ padding-block-start: var(--pf-v5-c-page__main-section--PaddingTop);
949
+ padding-block-end: var(--pf-v5-c-page__main-section--PaddingBottom);
950
+ padding-inline-start: var(--pf-v5-c-page__main-section--PaddingLeft);
951
+ padding-inline-end: var(--pf-v5-c-page__main-section--PaddingRight);
899
952
  }
900
953
  .pf-v5-c-page__main-section.pf-m-no-padding-on-xl, .pf-v5-c-page__main-section.pf-m-no-padding-on-xl.pf-m-limit-width .pf-v5-c-page__main-body {
901
954
  padding: 0;
@@ -903,13 +956,19 @@
903
956
  }
904
957
  @media (min-width: 1450px) {
905
958
  .pf-v5-c-page__main-section.pf-m-padding-on-2xl {
906
- padding: var(--pf-v5-c-page__main-section--PaddingTop) var(--pf-v5-c-page__main-section--PaddingRight) var(--pf-v5-c-page__main-section--PaddingBottom) var(--pf-v5-c-page__main-section--PaddingLeft);
959
+ padding-block-start: var(--pf-v5-c-page__main-section--PaddingTop);
960
+ padding-block-end: var(--pf-v5-c-page__main-section--PaddingBottom);
961
+ padding-inline-start: var(--pf-v5-c-page__main-section--PaddingLeft);
962
+ padding-inline-end: var(--pf-v5-c-page__main-section--PaddingRight);
907
963
  }
908
964
  .pf-v5-c-page__main-section.pf-m-padding-on-2xl.pf-m-limit-width {
909
965
  padding: 0;
910
966
  }
911
967
  .pf-v5-c-page__main-section.pf-m-padding-on-2xl.pf-m-limit-width .pf-v5-c-page__main-body {
912
- padding: var(--pf-v5-c-page__main-section--PaddingTop) var(--pf-v5-c-page__main-section--PaddingRight) var(--pf-v5-c-page__main-section--PaddingBottom) var(--pf-v5-c-page__main-section--PaddingLeft);
968
+ padding-block-start: var(--pf-v5-c-page__main-section--PaddingTop);
969
+ padding-block-end: var(--pf-v5-c-page__main-section--PaddingBottom);
970
+ padding-inline-start: var(--pf-v5-c-page__main-section--PaddingLeft);
971
+ padding-inline-end: var(--pf-v5-c-page__main-section--PaddingRight);
913
972
  }
914
973
  .pf-v5-c-page__main-section.pf-m-no-padding-on-2xl, .pf-v5-c-page__main-section.pf-m-no-padding-on-2xl.pf-m-limit-width .pf-v5-c-page__main-body {
915
974
  padding: 0;
@@ -920,7 +979,7 @@
920
979
  flex: 1 1;
921
980
  min-height: 0;
922
981
  background-color: var(--pf-v5-c-page__main-wizard--BackgroundColor);
923
- border-top: var(--pf-v5-c-page__main-wizard--BorderTopWidth) solid var(--pf-v5-c-page__main-wizard--BorderTopColor);
982
+ border-block-start: var(--pf-v5-c-page__main-wizard--BorderTopWidth) solid var(--pf-v5-c-page__main-wizard--BorderTopColor);
924
983
  }
925
984
  .pf-v5-c-page__main-wizard:first-child {
926
985
  --pf-v5-c-page__main-wizard--BorderTopWidth: 0;
@@ -938,18 +997,27 @@
938
997
  }
939
998
 
940
999
  .pf-v5-c-page__main-nav .pf-v5-c-page__main-body {
941
- padding-top: var(--pf-v5-c-page__main-nav--PaddingTop);
942
- padding-right: var(--pf-v5-c-page__main-nav--PaddingRight);
943
- padding-left: var(--pf-v5-c-page__main-nav--PaddingLeft);
1000
+ padding-block-start: var(--pf-v5-c-page__main-nav--PaddingTop);
1001
+ padding-inline-start: var(--pf-v5-c-page__main-nav--PaddingLeft);
1002
+ padding-inline-end: var(--pf-v5-c-page__main-nav--PaddingRight);
944
1003
  }
945
1004
  .pf-v5-c-page__main-breadcrumb .pf-v5-c-page__main-body {
946
- padding: var(--pf-v5-c-page__main-breadcrumb--PaddingTop) var(--pf-v5-c-page__main-breadcrumb--PaddingRight) var(--pf-v5-c-page__main-breadcrumb--PaddingBottom) var(--pf-v5-c-page__main-breadcrumb--PaddingLeft);
1005
+ padding-block-start: var(--pf-v5-c-page__main-breadcrumb--PaddingTop);
1006
+ padding-block-end: var(--pf-v5-c-page__main-breadcrumb--PaddingBottom);
1007
+ padding-inline-start: var(--pf-v5-c-page__main-breadcrumb--PaddingLeft);
1008
+ padding-inline-end: var(--pf-v5-c-page__main-breadcrumb--PaddingRight);
947
1009
  }
948
1010
  .pf-v5-c-page__main-section .pf-v5-c-page__main-body {
949
- padding: var(--pf-v5-c-page__main-section--PaddingTop) var(--pf-v5-c-page__main-section--PaddingRight) var(--pf-v5-c-page__main-section--PaddingBottom) var(--pf-v5-c-page__main-section--PaddingLeft);
1011
+ padding-block-start: var(--pf-v5-c-page__main-section--PaddingTop);
1012
+ padding-block-end: var(--pf-v5-c-page__main-section--PaddingBottom);
1013
+ padding-inline-start: var(--pf-v5-c-page__main-section--PaddingLeft);
1014
+ padding-inline-end: var(--pf-v5-c-page__main-section--PaddingRight);
950
1015
  }
951
1016
  .pf-v5-c-page__main-tabs .pf-v5-c-page__main-body {
952
- padding: var(--pf-v5-c-page__main-tabs--PaddingTop) var(--pf-v5-c-page__main-tabs--PaddingRight) var(--pf-v5-c-page__main-tabs--PaddingBottom) var(--pf-v5-c-page__main-tabs--PaddingLeft);
1017
+ padding-block-start: var(--pf-v5-c-page__main-tabs--PaddingTop);
1018
+ padding-block-end: var(--pf-v5-c-page__main-tabs--PaddingBottom);
1019
+ padding-inline-start: var(--pf-v5-c-page__main-tabs--PaddingLeft);
1020
+ padding-inline-end: var(--pf-v5-c-page__main-tabs--PaddingRight);
953
1021
  }
954
1022
 
955
1023
  .pf-v5-c-page__drawer {
@@ -978,7 +1046,7 @@
978
1046
  background-color: var(--pf-v5-c-page__header-tools--c-button--m-selected--before--BackgroundColor);
979
1047
  }
980
1048
  :where(.pf-v5-theme-dark) .pf-v5-c-page__sidebar {
981
- border-right: var(--pf-v5-global--BorderWidth--sm) solid var(--pf-v5-global--BorderColor--100);
1049
+ border-inline-end: var(--pf-v5-global--BorderWidth--sm) solid var(--pf-v5-global--BorderColor--100);
982
1050
  }
983
1051
  :where(.pf-v5-theme-dark) .pf-v5-c-page__main-nav.pf-m-sticky-top, :where(.pf-v5-theme-dark) .pf-v5-c-page__main-nav.pf-m-sticky-bottom {
984
1052
  --pf-v5-c-page__main-nav--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);