@patternfly/patternfly 5.1.0-prerelease.1 → 5.1.0-prerelease.11

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 (267) hide show
  1. package/README.md +10 -0
  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 +22 -0
  6. package/base/_globals.scss +1 -1
  7. package/base/_variables.scss +7 -0
  8. package/base/patternfly-common.css +17 -2
  9. package/base/patternfly-globals.css +1 -1
  10. package/base/patternfly-icons.css +5 -1
  11. package/base/patternfly-pf-icons.css +5 -1
  12. package/base/patternfly-variables.css +5 -0
  13. package/components/AboutModalBox/about-modal-box.css +20 -13
  14. package/components/AboutModalBox/about-modal-box.scss +20 -13
  15. package/components/Accordion/accordion.css +33 -20
  16. package/components/Accordion/accordion.scss +32 -20
  17. package/components/ActionList/action-list.css +2 -2
  18. package/components/ActionList/action-list.scss +2 -2
  19. package/components/Alert/alert-group.css +7 -4
  20. package/components/Alert/alert-group.scss +7 -4
  21. package/components/Alert/alert.css +16 -13
  22. package/components/Alert/alert.scss +16 -13
  23. package/components/AppLauncher/app-launcher.css +32 -23
  24. package/components/AppLauncher/app-launcher.scss +32 -23
  25. package/components/BackToTop/back-to-top.css +2 -2
  26. package/components/BackToTop/back-to-top.scss +2 -2
  27. package/components/Backdrop/backdrop.css +2 -2
  28. package/components/Backdrop/backdrop.scss +2 -2
  29. package/components/BackgroundImage/background-image.css +2 -2
  30. package/components/BackgroundImage/background-image.scss +2 -2
  31. package/components/Badge/badge.css +2 -2
  32. package/components/Badge/badge.scss +2 -2
  33. package/components/Banner/banner.css +5 -2
  34. package/components/Banner/banner.scss +5 -2
  35. package/components/Breadcrumb/breadcrumb.css +6 -3
  36. package/components/Breadcrumb/breadcrumb.scss +6 -3
  37. package/components/Button/button.css +23 -17
  38. package/components/Button/button.scss +22 -16
  39. package/components/Button/themes/dark/button.scss +1 -1
  40. package/components/CalendarMonth/calendar-month.css +21 -15
  41. package/components/CalendarMonth/calendar-month.scss +21 -15
  42. package/components/Card/card.css +21 -16
  43. package/components/Card/card.scss +21 -16
  44. package/components/Check/check.css +2 -2
  45. package/components/Check/check.scss +2 -2
  46. package/components/Chip/chip-group.css +6 -6
  47. package/components/Chip/chip-group.scss +6 -6
  48. package/components/Chip/chip.css +16 -9
  49. package/components/Chip/chip.scss +17 -9
  50. package/components/ClipboardCopy/clipboard-copy.css +16 -10
  51. package/components/ClipboardCopy/clipboard-copy.scss +14 -8
  52. package/components/ClipboardCopy/themes/dark/clipboard-copy.scss +2 -2
  53. package/components/CodeBlock/code-block.css +6 -3
  54. package/components/CodeBlock/code-block.scss +6 -3
  55. package/components/CodeEditor/code-editor.css +31 -22
  56. package/components/CodeEditor/code-editor.scss +30 -21
  57. package/components/CodeEditor/themes/dark/code-editor.scss +1 -1
  58. package/components/Content/content.css +33 -30
  59. package/components/Content/content.scss +33 -30
  60. package/components/ContextSelector/context-selector.css +41 -26
  61. package/components/ContextSelector/context-selector.scss +40 -25
  62. package/components/ContextSelector/themes/dark/context-selector.scss +1 -1
  63. package/components/DataList/data-list-grid.css +21 -49
  64. package/components/DataList/data-list-grid.scss +3 -3
  65. package/components/DataList/data-list.css +66 -84
  66. package/components/DataList/data-list.scss +45 -35
  67. package/components/DatePicker/date-picker.css +8 -8
  68. package/components/DatePicker/date-picker.scss +8 -8
  69. package/components/DescriptionList/description-list.css +8 -5
  70. package/components/DescriptionList/description-list.scss +8 -5
  71. package/components/DragDrop/drag-drop.css +8 -8
  72. package/components/DragDrop/drag-drop.scss +8 -8
  73. package/components/Drawer/drawer.css +75 -60
  74. package/components/Drawer/drawer.scss +51 -36
  75. package/components/Dropdown/dropdown.css +75 -66
  76. package/components/Dropdown/dropdown.scss +65 -56
  77. package/components/DualListSelector/dual-list-selector.css +29 -15
  78. package/components/DualListSelector/dual-list-selector.scss +30 -15
  79. package/components/EmptyState/empty-state.css +7 -4
  80. package/components/EmptyState/empty-state.scss +7 -4
  81. package/components/ExpandableSection/expandable-section.css +17 -10
  82. package/components/ExpandableSection/expandable-section.scss +15 -10
  83. package/components/FileUpload/file-upload.css +9 -15
  84. package/components/FileUpload/file-upload.scss +9 -15
  85. package/components/Form/form.css +50 -50
  86. package/components/Form/form.scss +44 -44
  87. package/components/FormControl/form-control.css +21 -11
  88. package/components/FormControl/form-control.scss +21 -11
  89. package/components/HelperText/helper-text.css +1 -1
  90. package/components/HelperText/helper-text.scss +1 -1
  91. package/components/Hint/hint.css +9 -6
  92. package/components/Hint/hint.scss +9 -6
  93. package/components/Icon/icon.css +1 -1
  94. package/components/Icon/icon.scss +1 -1
  95. package/components/InlineEdit/inline-edit.css +4 -4
  96. package/components/InlineEdit/inline-edit.scss +4 -4
  97. package/components/InputGroup/input-group.css +12 -6
  98. package/components/InputGroup/input-group.scss +11 -5
  99. package/components/InputGroup/themes/dark/input-group.scss +1 -1
  100. package/components/JumpLinks/jump-links.css +24 -24
  101. package/components/JumpLinks/jump-links.scss +24 -24
  102. package/components/Label/label-group.css +13 -10
  103. package/components/Label/label-group.scss +13 -10
  104. package/components/Label/label.css +9 -9
  105. package/components/Label/label.scss +9 -9
  106. package/components/List/list.css +9 -9
  107. package/components/List/list.scss +9 -9
  108. package/components/LogViewer/log-viewer.css +14 -14
  109. package/components/LogViewer/log-viewer.scss +14 -14
  110. package/components/Login/login.css +36 -27
  111. package/components/Login/login.scss +36 -27
  112. package/components/Masthead/masthead.css +19 -22
  113. package/components/Masthead/masthead.scss +19 -22
  114. package/components/Menu/menu.css +69 -66
  115. package/components/Menu/menu.scss +69 -67
  116. package/components/MenuToggle/menu-toggle.css +41 -29
  117. package/components/MenuToggle/menu-toggle.scss +41 -29
  118. package/components/ModalBox/modal-box.css +19 -19
  119. package/components/ModalBox/modal-box.scss +20 -20
  120. package/components/MultipleFileUpload/multiple-file-upload.css +11 -8
  121. package/components/MultipleFileUpload/multiple-file-upload.scss +11 -8
  122. package/components/Nav/nav.css +100 -93
  123. package/components/Nav/nav.scss +98 -91
  124. package/components/Nav/themes/dark/nav.scss +2 -2
  125. package/components/NotificationBadge/notification-badge.css +13 -7
  126. package/components/NotificationBadge/notification-badge.scss +13 -7
  127. package/components/NotificationDrawer/notification-drawer.css +28 -19
  128. package/components/NotificationDrawer/notification-drawer.scss +28 -19
  129. package/components/NumberInput/number-input.css +3 -3
  130. package/components/NumberInput/number-input.scss +2 -2
  131. package/components/OptionsMenu/options-menu.css +43 -31
  132. package/components/OptionsMenu/options-menu.scss +43 -31
  133. package/components/OverflowMenu/overflow-menu.css +2 -2
  134. package/components/OverflowMenu/overflow-menu.scss +2 -2
  135. package/components/Page/page.css +119 -65
  136. package/components/Page/page.scss +63 -39
  137. package/components/Page/themes/dark/page.scss +1 -1
  138. package/components/Pagination/pagination.css +28 -18
  139. package/components/Pagination/pagination.scss +25 -17
  140. package/components/Panel/panel.css +13 -7
  141. package/components/Panel/panel.scss +13 -7
  142. package/components/Popover/popover.css +24 -21
  143. package/components/Popover/popover.scss +24 -21
  144. package/components/Progress/progress.css +7 -7
  145. package/components/Progress/progress.scss +7 -7
  146. package/components/ProgressStepper/progress-stepper.css +26 -20
  147. package/components/ProgressStepper/progress-stepper.scss +25 -19
  148. package/components/Radio/radio.css +4 -5
  149. package/components/Radio/radio.scss +4 -5
  150. package/components/Select/select.css +56 -47
  151. package/components/Select/select.scss +56 -47
  152. package/components/Sidebar/sidebar.css +11 -5
  153. package/components/Sidebar/sidebar.scss +11 -5
  154. package/components/SimpleList/simple-list.css +10 -4
  155. package/components/SimpleList/simple-list.scss +10 -4
  156. package/components/Skeleton/skeleton.css +2 -5
  157. package/components/Skeleton/skeleton.scss +2 -5
  158. package/components/SkipToContent/skip-to-content.css +3 -3
  159. package/components/SkipToContent/skip-to-content.scss +3 -3
  160. package/components/Slider/slider.css +46 -26
  161. package/components/Slider/slider.scss +54 -26
  162. package/components/Switch/switch.css +9 -5
  163. package/components/Switch/switch.scss +10 -6
  164. package/components/TabContent/tab-content.css +4 -1
  165. package/components/TabContent/tab-content.scss +4 -1
  166. package/components/Table/table-grid.css +256 -219
  167. package/components/Table/table-grid.scss +53 -39
  168. package/components/Table/table-scrollable.css +2 -2
  169. package/components/Table/table-scrollable.scss +2 -2
  170. package/components/Table/table-tree-view.css +107 -104
  171. package/components/Table/table-tree-view.scss +32 -32
  172. package/components/Table/table.css +87 -69
  173. package/components/Table/table.scss +87 -69
  174. package/components/Tabs/tabs.css +66 -48
  175. package/components/Tabs/tabs.scss +66 -48
  176. package/components/TextInputGroup/text-input-group.css +15 -15
  177. package/components/TextInputGroup/text-input-group.scss +15 -15
  178. package/components/Tile/tile.css +10 -10
  179. package/components/Tile/tile.scss +10 -10
  180. package/components/ToggleGroup/toggle-group.css +14 -11
  181. package/components/ToggleGroup/toggle-group.scss +14 -11
  182. package/components/Toolbar/toolbar.css +44 -41
  183. package/components/Toolbar/toolbar.scss +24 -21
  184. package/components/Tooltip/tooltip.css +19 -16
  185. package/components/Tooltip/tooltip.scss +19 -16
  186. package/components/TreeView/tree-view.css +42 -27
  187. package/components/TreeView/tree-view.scss +43 -28
  188. package/components/Wizard/wizard.css +57 -36
  189. package/components/Wizard/wizard.scss +57 -36
  190. package/docs/components/AppLauncher/deprecated/application-launcher.md +155 -70
  191. package/docs/components/Badge/examples/Badge.md +16 -4
  192. package/docs/components/Breadcrumb/examples/Breadcrumb.md +11 -5
  193. package/docs/components/Button/examples/Button.css +2 -2
  194. package/docs/components/Button/examples/Button.md +1 -0
  195. package/docs/components/Card/examples/Card.md +152 -64
  196. package/docs/components/Chip/examples/Chip.md +31 -11
  197. package/docs/components/ContextSelector/deprecated/context-selector.md +198 -96
  198. package/docs/components/DataList/examples/DataList.md +391 -136
  199. package/docs/components/DragDrop/examples/DragDrop.css +2 -2
  200. package/docs/components/Dropdown/deprecated/Dropdown.css +1 -1
  201. package/docs/components/Dropdown/deprecated/Dropdown.md +881 -367
  202. package/docs/components/DualListSelector/examples/DualListSelector.md +368 -128
  203. package/docs/components/FormControl/examples/FormControl.md +2 -1
  204. package/docs/components/Hint/examples/Hint.md +57 -24
  205. package/docs/components/InlineEdit/examples/InlineEdit.md +46 -16
  206. package/docs/components/Label/examples/Label.md +1 -1
  207. package/docs/components/LogViewer/examples/LogViewer.css +2 -2
  208. package/docs/components/LogViewer/examples/LogViewer.md +40 -30
  209. package/docs/components/Menu/examples/Menu.md +41 -20
  210. package/docs/components/MenuToggle/examples/MenuToggle.md +1 -1
  211. package/docs/components/ModalBox/examples/ModalBox.css +2 -2
  212. package/docs/components/Nav/examples/Navigation.css +3 -26
  213. package/docs/components/Nav/examples/Navigation.md +99 -0
  214. package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +619 -240
  215. package/docs/components/OptionsMenu/deprecated/options-menu.md +403 -160
  216. package/docs/components/OverflowMenu/examples/overflow-menu.md +45 -34
  217. package/docs/components/Pagination/examples/Pagination.md +195 -65
  218. package/docs/components/Popover/examples/Popover.css +2 -2
  219. package/docs/components/ProgressStepper/examples/ProgressStepper.md +50 -0
  220. package/docs/components/Select/deprecated/Select.css +3 -3
  221. package/docs/components/Select/deprecated/Select.md +43 -55
  222. package/docs/components/Table/examples/Table.css +2 -2
  223. package/docs/components/Table/examples/Table.md +4546 -1668
  224. package/docs/components/Tabs/examples/Tabs.md +1094 -438
  225. package/docs/components/TextInputGroup/examples/TextInputGroup.css +1 -1
  226. package/docs/components/TextInputGroup/examples/TextInputGroup.md +2 -2
  227. package/docs/components/Tile/examples/Tile.css +1 -1
  228. package/docs/components/Toolbar/examples/Toolbar.md +148 -80
  229. package/docs/components/TreeView/examples/TreeView.md +23 -8
  230. package/docs/components/Wizard/examples/Wizard.md +75 -36
  231. package/docs/demos/Card/examples/Card.css +3 -3
  232. package/docs/demos/Card/examples/Card.md +49 -24
  233. package/docs/demos/CardView/examples/CardView.md +182 -74
  234. package/docs/demos/ContextSelector/examples/ContextSelector.md +95 -47
  235. package/docs/demos/Dashboard/examples/Dashboard.md +18 -9
  236. package/docs/demos/DataList/examples/DataList.md +163 -70
  237. package/docs/demos/DescriptionList/examples/DescriptionList.md +20 -9
  238. package/docs/demos/Drawer/examples/Drawer.md +20 -9
  239. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +803 -338
  240. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +241 -101
  241. package/docs/demos/Table/examples/Table.md +1422 -607
  242. package/docs/demos/Tabs/examples/Tabs.md +113 -48
  243. package/docs/demos/Toolbar/examples/Toolbar.md +320 -127
  244. package/docs/demos/Wizard/examples/Wizard.md +191 -41
  245. package/docs/layouts/Flex/examples/Flex.md +5 -5
  246. package/docs/utilities/BoxShadow/examples/box-shadow.css +5 -5
  247. package/icons/pficons.mjs +1 -0
  248. package/layouts/Flex/flex.css +115 -43
  249. package/layouts/Flex/flex.scss +20 -8
  250. package/package.json +40 -37
  251. package/patternfly-addons.css +732 -972
  252. package/patternfly-base-no-globals-theme-dark-unversioned.css +27 -3
  253. package/patternfly-base-no-globals.css +27 -3
  254. package/patternfly-base-theme-dark-unversioned.css +28 -4
  255. package/patternfly-base.css +28 -4
  256. package/patternfly-no-globals.css +2420 -1872
  257. package/patternfly-theme-dark-unversioned.css +2421 -1873
  258. package/patternfly.css +2421 -1873
  259. package/patternfly.min.css +1 -1
  260. package/patternfly.min.css.map +1 -1
  261. package/sass-utilities/functions.scss +6 -0
  262. package/sass-utilities/mixins.scss +62 -2
  263. package/sass-utilities/placeholders.scss +1 -1
  264. package/sass-utilities/scss-variables.scss +8 -8
  265. package/utilities/Accessibility/accessibility.css +12 -12
  266. package/utilities/Spacing/spacing.css +720 -960
  267. package/utilities/Spacing/spacing.scss +4 -8
package/components/Page/page.css CHANGED
@@ -281,11 +281,11 @@
281
281
 
282
282
  .pf-v5-c-page__header-brand {
283
283
  grid-column: 1/2;
284
- padding-left: var(--pf-v5-c-page__header-brand--PaddingLeft);
284
+ padding-inline-start: var(--pf-v5-c-page__header-brand--PaddingLeft);
285
285
  }
286
286
  @media (min-width: 1200px) {
287
287
  .pf-v5-c-page__header-brand {
288
- padding-right: var(--pf-v5-c-page__header-brand--xl--PaddingRight);
288
+ padding-inline-end: var(--pf-v5-c-page__header-brand--xl--PaddingRight);
289
289
  }
290
290
  }
291
291
 
@@ -299,9 +299,12 @@
299
299
  }
300
300
 
301
301
  .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);
302
+ padding-block-start: var(--pf-v5-c-page__header-sidebar-toggle__c-button--PaddingTop);
303
+ padding-block-end: var(--pf-v5-c-page__header-sidebar-toggle__c-button--PaddingBottom);
304
+ padding-inline-start: var(--pf-v5-c-page__header-sidebar-toggle__c-button--PaddingLeft);
305
+ padding-inline-end: var(--pf-v5-c-page__header-sidebar-toggle__c-button--PaddingRight);
306
+ margin-inline-start: var(--pf-v5-c-page__header-sidebar-toggle__c-button--MarginLeft);
307
+ margin-inline-end: var(--pf-v5-c-page__header-sidebar-toggle__c-button--MarginRight);
305
308
  font-size: var(--pf-v5-c-page__header-sidebar-toggle__c-button--FontSize);
306
309
  line-height: 1;
307
310
  }
@@ -311,8 +314,8 @@
311
314
  grid-column: 1/-1;
312
315
  align-self: stretch;
313
316
  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);
317
+ padding-inline-start: var(--pf-v5-c-page__header-nav--PaddingLeft);
318
+ padding-inline-end: var(--pf-v5-c-page__header-nav--PaddingRight);
316
319
  background-color: var(--pf-v5-c-page__header-nav--BackgroundColor);
317
320
  }
318
321
  @media screen and (min-width: 1200px) {
@@ -327,11 +330,11 @@
327
330
 
328
331
  .pf-v5-c-page__header-tools {
329
332
  grid-column: 2/3;
330
- margin-right: var(--pf-v5-c-page__header-tools--MarginRight);
331
- margin-left: auto;
333
+ margin-inline-start: auto;
334
+ margin-inline-end: var(--pf-v5-c-page__header-tools--MarginRight);
332
335
  }
333
336
  .pf-v5-c-page__header-tools .pf-v5-c-avatar {
334
- margin-left: var(--pf-v5-c-page__header-tools--c-avatar--MarginLeft);
337
+ margin-inline-start: var(--pf-v5-c-page__header-tools--c-avatar--MarginLeft);
335
338
  }
336
339
  @media screen and (min-width: 992px) {
337
340
  .pf-v5-c-page__header-tools {
@@ -344,7 +347,7 @@
344
347
  align-items: center;
345
348
  }
346
349
  .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);
350
+ margin-inline-start: var(--pf-v5-c-page__header-tools-group--MarginLeft);
348
351
  }
349
352
 
350
353
  .pf-v5-c-page__header-tools-item {
@@ -359,10 +362,7 @@
359
362
  }
360
363
  .pf-v5-c-page__header-tools-item.pf-m-selected .pf-v5-c-button::before {
361
364
  position: absolute;
362
- top: 0;
363
- right: 0;
364
- bottom: 0;
365
- left: 0;
365
+ inset: 0;
366
366
  width: var(--pf-v5-c-page__header-tools--c-button--m-selected--before--Width);
367
367
  height: var(--pf-v5-c-page__header-tools--c-button--m-selected--before--Height);
368
368
  content: "";
@@ -415,19 +415,19 @@
415
415
  .pf-v5-c-page__sidebar.pf-m-light {
416
416
  color: var(--pf-v5-global--Color--100);
417
417
  --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);
418
+ border-inline-end: var(--pf-v5-c-page__sidebar--m-light--BorderRightWidth) solid var(--pf-v5-c-page__sidebar--m-light--BorderRightColor);
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,7 +677,7 @@
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
  }
@@ -704,44 +704,44 @@
704
704
  }
705
705
 
706
706
  .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);
707
+ padding-block-start: var(--pf-v5-c-page__main-nav--PaddingTop);
708
+ padding-inline-start: var(--pf-v5-c-page__main-nav--PaddingLeft);
709
+ padding-inline-end: var(--pf-v5-c-page__main-nav--PaddingRight);
710
710
  background-color: var(--pf-v5-c-page__main-nav--BackgroundColor);
711
711
  }
712
712
  .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);
713
+ padding-block-end: var(--pf-v5-c-page__main-nav--m-sticky-top--PaddingBottom);
714
714
  }
715
715
  @media (min-height: 0) {
716
716
  .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);
717
+ padding-block-end: var(--pf-v5-c-page__main-nav--m-sticky-top--PaddingBottom);
718
718
  }
719
719
  }
720
720
  @media (min-height: 40rem) {
721
721
  .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);
722
+ padding-block-end: var(--pf-v5-c-page__main-nav--m-sticky-top--PaddingBottom);
723
723
  }
724
724
  }
725
725
  @media (min-height: 48rem) {
726
726
  .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);
727
+ padding-block-end: var(--pf-v5-c-page__main-nav--m-sticky-top--PaddingBottom);
728
728
  }
729
729
  }
730
730
  @media (min-height: 60rem) {
731
731
  .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);
732
+ padding-block-end: var(--pf-v5-c-page__main-nav--m-sticky-top--PaddingBottom);
733
733
  }
734
734
  }
735
735
  @media (min-height: 80rem) {
736
736
  .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);
737
+ padding-block-end: var(--pf-v5-c-page__main-nav--m-sticky-top--PaddingBottom);
738
738
  }
739
739
  }
740
740
 
741
741
  .pf-v5-c-page__main-subnav {
742
742
  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);
743
+ border-block-start: var(--pf-v5-c-page__main-subnav--BorderTopWidth) solid var(--pf-v5-c-page__main-subnav--BorderTopColor);
744
+ border-inline-start: var(--pf-v5-c-page__main-subnav--BorderLeftWidth) solid var(--pf-v5-c-page__main-subnav--BorderLeftColor);
745
745
  }
746
746
  @media screen and (min-width: 1200px) {
747
747
  .pf-v5-c-page__sidebar ~ .pf-v5-c-page__main {
@@ -753,7 +753,10 @@
753
753
  }
754
754
 
755
755
  .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);
756
+ padding-block-start: var(--pf-v5-c-page__main-breadcrumb--PaddingTop);
757
+ padding-block-end: var(--pf-v5-c-page__main-breadcrumb--PaddingBottom);
758
+ padding-inline-start: var(--pf-v5-c-page__main-breadcrumb--PaddingLeft);
759
+ padding-inline-end: var(--pf-v5-c-page__main-breadcrumb--PaddingRight);
757
760
  background-color: var(--pf-v5-c-page__main-breadcrumb--BackgroundColor);
758
761
  }
759
762
  .pf-v5-c-page__main-breadcrumb + .pf-v5-c-page__main-section {
@@ -789,7 +792,10 @@
789
792
  }
790
793
 
791
794
  .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);
795
+ padding-block-start: var(--pf-v5-c-page__main-tabs--PaddingTop);
796
+ padding-block-end: var(--pf-v5-c-page__main-tabs--PaddingBottom);
797
+ padding-inline-start: var(--pf-v5-c-page__main-tabs--PaddingLeft);
798
+ padding-inline-end: var(--pf-v5-c-page__main-tabs--PaddingRight);
793
799
  background-color: var(--pf-v5-c-page__main-tabs--BackgroundColor);
794
800
  }
795
801
  .pf-v5-c-page__main-nav + .pf-v5-c-page__main-tabs {
@@ -815,7 +821,10 @@
815
821
  }
816
822
 
817
823
  .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);
824
+ padding-block-start: var(--pf-v5-c-page__main-section--PaddingTop);
825
+ padding-block-end: var(--pf-v5-c-page__main-section--PaddingBottom);
826
+ padding-inline-start: var(--pf-v5-c-page__main-section--PaddingLeft);
827
+ padding-inline-end: var(--pf-v5-c-page__main-section--PaddingRight);
819
828
  background-color: var(--pf-v5-c-page__main-section--BackgroundColor);
820
829
  }
821
830
  .pf-v5-c-page__main-section.pf-m-light {
@@ -834,26 +843,38 @@
834
843
  --pf-v5-c-page__main-section--BackgroundColor: var(--pf-v5-c-page__main-section--m-dark-200--BackgroundColor);
835
844
  }
836
845
  .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);
846
+ padding-block-start: var(--pf-v5-c-page__main-section--PaddingTop);
847
+ padding-block-end: var(--pf-v5-c-page__main-section--PaddingBottom);
848
+ padding-inline-start: var(--pf-v5-c-page__main-section--PaddingLeft);
849
+ padding-inline-end: var(--pf-v5-c-page__main-section--PaddingRight);
838
850
  }
839
851
  .pf-v5-c-page__main-section.pf-m-padding.pf-m-limit-width {
840
852
  padding: 0;
841
853
  }
842
854
  .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);
855
+ padding-block-start: var(--pf-v5-c-page__main-section--PaddingTop);
856
+ padding-block-end: var(--pf-v5-c-page__main-section--PaddingBottom);
857
+ padding-inline-start: var(--pf-v5-c-page__main-section--PaddingLeft);
858
+ padding-inline-end: var(--pf-v5-c-page__main-section--PaddingRight);
844
859
  }
845
860
  .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
861
  padding: 0;
847
862
  }
848
863
  @media (min-width: 576px) {
849
864
  .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);
865
+ padding-block-start: var(--pf-v5-c-page__main-section--PaddingTop);
866
+ padding-block-end: var(--pf-v5-c-page__main-section--PaddingBottom);
867
+ padding-inline-start: var(--pf-v5-c-page__main-section--PaddingLeft);
868
+ padding-inline-end: var(--pf-v5-c-page__main-section--PaddingRight);
851
869
  }
852
870
  .pf-v5-c-page__main-section.pf-m-padding-on-sm.pf-m-limit-width {
853
871
  padding: 0;
854
872
  }
855
873
  .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);
874
+ padding-block-start: var(--pf-v5-c-page__main-section--PaddingTop);
875
+ padding-block-end: var(--pf-v5-c-page__main-section--PaddingBottom);
876
+ padding-inline-start: var(--pf-v5-c-page__main-section--PaddingLeft);
877
+ padding-inline-end: var(--pf-v5-c-page__main-section--PaddingRight);
857
878
  }
858
879
  .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
880
  padding: 0;
@@ -861,13 +882,19 @@
861
882
  }
862
883
  @media (min-width: 768px) {
863
884
  .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);
885
+ padding-block-start: var(--pf-v5-c-page__main-section--PaddingTop);
886
+ padding-block-end: var(--pf-v5-c-page__main-section--PaddingBottom);
887
+ padding-inline-start: var(--pf-v5-c-page__main-section--PaddingLeft);
888
+ padding-inline-end: var(--pf-v5-c-page__main-section--PaddingRight);
865
889
  }
866
890
  .pf-v5-c-page__main-section.pf-m-padding-on-md.pf-m-limit-width {
867
891
  padding: 0;
868
892
  }
869
893
  .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);
894
+ padding-block-start: var(--pf-v5-c-page__main-section--PaddingTop);
895
+ padding-block-end: var(--pf-v5-c-page__main-section--PaddingBottom);
896
+ padding-inline-start: var(--pf-v5-c-page__main-section--PaddingLeft);
897
+ padding-inline-end: var(--pf-v5-c-page__main-section--PaddingRight);
871
898
  }
872
899
  .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
900
  padding: 0;
@@ -875,13 +902,19 @@
875
902
  }
876
903
  @media (min-width: 992px) {
877
904
  .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);
905
+ padding-block-start: var(--pf-v5-c-page__main-section--PaddingTop);
906
+ padding-block-end: var(--pf-v5-c-page__main-section--PaddingBottom);
907
+ padding-inline-start: var(--pf-v5-c-page__main-section--PaddingLeft);
908
+ padding-inline-end: var(--pf-v5-c-page__main-section--PaddingRight);
879
909
  }
880
910
  .pf-v5-c-page__main-section.pf-m-padding-on-lg.pf-m-limit-width {
881
911
  padding: 0;
882
912
  }
883
913
  .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);
914
+ padding-block-start: var(--pf-v5-c-page__main-section--PaddingTop);
915
+ padding-block-end: var(--pf-v5-c-page__main-section--PaddingBottom);
916
+ padding-inline-start: var(--pf-v5-c-page__main-section--PaddingLeft);
917
+ padding-inline-end: var(--pf-v5-c-page__main-section--PaddingRight);
885
918
  }
886
919
  .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
920
  padding: 0;
@@ -889,13 +922,19 @@
889
922
  }
890
923
  @media (min-width: 1200px) {
891
924
  .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);
925
+ padding-block-start: var(--pf-v5-c-page__main-section--PaddingTop);
926
+ padding-block-end: var(--pf-v5-c-page__main-section--PaddingBottom);
927
+ padding-inline-start: var(--pf-v5-c-page__main-section--PaddingLeft);
928
+ padding-inline-end: var(--pf-v5-c-page__main-section--PaddingRight);
893
929
  }
894
930
  .pf-v5-c-page__main-section.pf-m-padding-on-xl.pf-m-limit-width {
895
931
  padding: 0;
896
932
  }
897
933
  .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);
934
+ padding-block-start: var(--pf-v5-c-page__main-section--PaddingTop);
935
+ padding-block-end: var(--pf-v5-c-page__main-section--PaddingBottom);
936
+ padding-inline-start: var(--pf-v5-c-page__main-section--PaddingLeft);
937
+ padding-inline-end: var(--pf-v5-c-page__main-section--PaddingRight);
899
938
  }
900
939
  .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
940
  padding: 0;
@@ -903,13 +942,19 @@
903
942
  }
904
943
  @media (min-width: 1450px) {
905
944
  .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);
945
+ padding-block-start: var(--pf-v5-c-page__main-section--PaddingTop);
946
+ padding-block-end: var(--pf-v5-c-page__main-section--PaddingBottom);
947
+ padding-inline-start: var(--pf-v5-c-page__main-section--PaddingLeft);
948
+ padding-inline-end: var(--pf-v5-c-page__main-section--PaddingRight);
907
949
  }
908
950
  .pf-v5-c-page__main-section.pf-m-padding-on-2xl.pf-m-limit-width {
909
951
  padding: 0;
910
952
  }
911
953
  .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);
954
+ padding-block-start: var(--pf-v5-c-page__main-section--PaddingTop);
955
+ padding-block-end: var(--pf-v5-c-page__main-section--PaddingBottom);
956
+ padding-inline-start: var(--pf-v5-c-page__main-section--PaddingLeft);
957
+ padding-inline-end: var(--pf-v5-c-page__main-section--PaddingRight);
913
958
  }
914
959
  .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
960
  padding: 0;
@@ -920,7 +965,7 @@
920
965
  flex: 1 1;
921
966
  min-height: 0;
922
967
  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);
968
+ border-block-start: var(--pf-v5-c-page__main-wizard--BorderTopWidth) solid var(--pf-v5-c-page__main-wizard--BorderTopColor);
924
969
  }
925
970
  .pf-v5-c-page__main-wizard:first-child {
926
971
  --pf-v5-c-page__main-wizard--BorderTopWidth: 0;
@@ -938,18 +983,27 @@
938
983
  }
939
984
 
940
985
  .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);
986
+ padding-block-start: var(--pf-v5-c-page__main-nav--PaddingTop);
987
+ padding-inline-start: var(--pf-v5-c-page__main-nav--PaddingLeft);
988
+ padding-inline-end: var(--pf-v5-c-page__main-nav--PaddingRight);
944
989
  }
945
990
  .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);
991
+ padding-block-start: var(--pf-v5-c-page__main-breadcrumb--PaddingTop);
992
+ padding-block-end: var(--pf-v5-c-page__main-breadcrumb--PaddingBottom);
993
+ padding-inline-start: var(--pf-v5-c-page__main-breadcrumb--PaddingLeft);
994
+ padding-inline-end: var(--pf-v5-c-page__main-breadcrumb--PaddingRight);
947
995
  }
948
996
  .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);
997
+ padding-block-start: var(--pf-v5-c-page__main-section--PaddingTop);
998
+ padding-block-end: var(--pf-v5-c-page__main-section--PaddingBottom);
999
+ padding-inline-start: var(--pf-v5-c-page__main-section--PaddingLeft);
1000
+ padding-inline-end: var(--pf-v5-c-page__main-section--PaddingRight);
950
1001
  }
951
1002
  .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);
1003
+ padding-block-start: var(--pf-v5-c-page__main-tabs--PaddingTop);
1004
+ padding-block-end: var(--pf-v5-c-page__main-tabs--PaddingBottom);
1005
+ padding-inline-start: var(--pf-v5-c-page__main-tabs--PaddingLeft);
1006
+ padding-inline-end: var(--pf-v5-c-page__main-tabs--PaddingRight);
953
1007
  }
954
1008
 
955
1009
  .pf-v5-c-page__drawer {
@@ -978,7 +1032,7 @@
978
1032
  background-color: var(--pf-v5-c-page__header-tools--c-button--m-selected--before--BackgroundColor);
979
1033
  }
980
1034
  :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);
1035
+ border-inline-end: var(--pf-v5-global--BorderWidth--sm) solid var(--pf-v5-global--BorderColor--100);
982
1036
  }
983
1037
  :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
1038
  --pf-v5-c-page__main-nav--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);