@patternfly/patternfly 5.1.0-prerelease.2 → 5.1.0-prerelease.21

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 (273) 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 +19 -13
  22. package/components/Alert/alert.scss +18 -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 +6 -3
  30. package/components/BackgroundImage/background-image.scss +8 -3
  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 +9 -3
  36. package/components/Breadcrumb/breadcrumb.scss +8 -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 +25 -15
  41. package/components/CalendarMonth/calendar-month.scss +23 -15
  42. package/components/Card/card.css +24 -16
  43. package/components/Card/card.scss +23 -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 +19 -10
  51. package/components/ClipboardCopy/clipboard-copy.scss +16 -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 +69 -84
  66. package/components/DataList/data-list.scss +47 -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 +120 -61
  74. package/components/Drawer/drawer.scss +92 -43
  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 +53 -50
  86. package/components/Form/form.scss +46 -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 +27 -24
  101. package/components/JumpLinks/jump-links.scss +26 -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 +80 -66
  115. package/components/Menu/menu.scss +81 -69
  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 +120 -93
  123. package/components/Nav/nav.scss +120 -93
  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 +32 -19
  128. package/components/NotificationDrawer/notification-drawer.scss +30 -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 +123 -65
  136. package/components/Page/page.scss +69 -40
  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 +82 -31
  143. package/components/Popover/popover.scss +104 -45
  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 +6 -5
  157. package/components/Skeleton/skeleton.scss +4 -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 +47 -26
  161. package/components/Slider/slider.scss +56 -28
  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 +4 -4
  169. package/components/Table/table-scrollable.scss +6 -4
  170. package/components/Table/table-tree-view.css +112 -105
  171. package/components/Table/table-tree-view.scss +38 -33
  172. package/components/Table/table.css +91 -69
  173. package/components/Table/table.scss +89 -69
  174. package/components/Tabs/tabs.css +76 -48
  175. package/components/Tabs/tabs.scss +74 -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 +76 -25
  185. package/components/Tooltip/tooltip.scss +100 -41
  186. package/components/TreeView/tree-view.css +48 -27
  187. package/components/TreeView/tree-view.scss +51 -29
  188. package/components/Truncate/truncate.css +9 -0
  189. package/components/Truncate/truncate.scss +16 -3
  190. package/components/Wizard/wizard.css +57 -36
  191. package/components/Wizard/wizard.scss +57 -36
  192. package/docs/components/AppLauncher/deprecated/application-launcher.md +155 -70
  193. package/docs/components/Badge/examples/Badge.md +16 -4
  194. package/docs/components/Breadcrumb/examples/Breadcrumb.md +11 -5
  195. package/docs/components/Button/examples/Button.css +2 -2
  196. package/docs/components/Button/examples/Button.md +1 -0
  197. package/docs/components/Card/examples/Card.md +152 -64
  198. package/docs/components/Chip/examples/Chip.md +1 -1
  199. package/docs/components/ContextSelector/deprecated/context-selector.md +198 -96
  200. package/docs/components/DataList/examples/DataList.md +391 -136
  201. package/docs/components/DragDrop/examples/DragDrop.css +2 -2
  202. package/docs/components/Dropdown/deprecated/Dropdown.css +1 -1
  203. package/docs/components/Dropdown/deprecated/Dropdown.md +881 -367
  204. package/docs/components/DualListSelector/examples/DualListSelector.md +368 -128
  205. package/docs/components/FormControl/examples/FormControl.md +2 -1
  206. package/docs/components/Hint/examples/Hint.md +57 -24
  207. package/docs/components/InlineEdit/examples/InlineEdit.md +46 -16
  208. package/docs/components/Label/examples/Label.md +1 -1
  209. package/docs/components/LogViewer/examples/LogViewer.css +2 -2
  210. package/docs/components/LogViewer/examples/LogViewer.md +40 -30
  211. package/docs/components/Menu/examples/Menu.md +41 -20
  212. package/docs/components/MenuToggle/examples/MenuToggle.md +1 -1
  213. package/docs/components/ModalBox/examples/ModalBox.css +3 -8
  214. package/docs/components/Nav/examples/Navigation.css +3 -26
  215. package/docs/components/Nav/examples/Navigation.md +99 -0
  216. package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +619 -240
  217. package/docs/components/OptionsMenu/deprecated/options-menu.md +403 -160
  218. package/docs/components/OverflowMenu/examples/overflow-menu.md +45 -34
  219. package/docs/components/Pagination/examples/Pagination.md +195 -65
  220. package/docs/components/Popover/examples/Popover.css +3 -9
  221. package/docs/components/Popover/examples/Popover.md +4 -4
  222. package/docs/components/ProgressStepper/examples/ProgressStepper.md +50 -0
  223. package/docs/components/Select/deprecated/Select.css +3 -3
  224. package/docs/components/Select/deprecated/Select.md +40 -52
  225. package/docs/components/Table/examples/Table.css +2 -2
  226. package/docs/components/Table/examples/Table.md +4548 -1670
  227. package/docs/components/Tabs/examples/Tabs.md +1094 -438
  228. package/docs/components/TextInputGroup/examples/TextInputGroup.css +1 -1
  229. package/docs/components/Tile/examples/Tile.css +1 -1
  230. package/docs/components/Toolbar/examples/Toolbar.md +218 -128
  231. package/docs/components/Tooltip/examples/Tooltip.css +4 -0
  232. package/docs/components/Tooltip/examples/Tooltip.md +8 -6
  233. package/docs/components/TreeView/examples/TreeView.md +23 -8
  234. package/docs/components/Truncate/examples/Truncate.md +2 -2
  235. package/docs/components/Wizard/examples/Wizard.md +75 -36
  236. package/docs/demos/Card/examples/Card.css +3 -3
  237. package/docs/demos/Card/examples/Card.md +72 -31
  238. package/docs/demos/CardView/examples/CardView.md +182 -74
  239. package/docs/demos/ContextSelector/examples/ContextSelector.md +95 -47
  240. package/docs/demos/Dashboard/examples/Dashboard.md +18 -9
  241. package/docs/demos/DataList/examples/DataList.md +163 -70
  242. package/docs/demos/DescriptionList/examples/DescriptionList.md +20 -9
  243. package/docs/demos/Drawer/examples/Drawer.md +20 -9
  244. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +803 -338
  245. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +241 -101
  246. package/docs/demos/Skeleton/examples/Skeleton.md +7 -35
  247. package/docs/demos/Table/examples/Table.md +1422 -607
  248. package/docs/demos/Tabs/examples/Tabs.md +113 -48
  249. package/docs/demos/Toolbar/examples/Toolbar.md +318 -123
  250. package/docs/demos/Wizard/examples/Wizard.md +191 -41
  251. package/docs/layouts/Flex/examples/Flex.md +5 -5
  252. package/docs/utilities/BoxShadow/examples/box-shadow.css +5 -5
  253. package/icons/pficons.mjs +1 -0
  254. package/layouts/Flex/flex.css +115 -43
  255. package/layouts/Flex/flex.scss +20 -8
  256. package/package.json +40 -37
  257. package/patternfly-addons.css +732 -972
  258. package/patternfly-base-no-globals-theme-dark-unversioned.css +27 -3
  259. package/patternfly-base-no-globals.css +27 -3
  260. package/patternfly-base-theme-dark-unversioned.css +28 -4
  261. package/patternfly-base.css +28 -4
  262. package/patternfly-no-globals.css +2687 -1894
  263. package/patternfly-theme-dark-unversioned.css +2688 -1895
  264. package/patternfly.css +2688 -1895
  265. package/patternfly.min.css +1 -1
  266. package/patternfly.min.css.map +1 -1
  267. package/sass-utilities/functions.scss +6 -0
  268. package/sass-utilities/mixins.scss +62 -2
  269. package/sass-utilities/placeholders.scss +1 -1
  270. package/sass-utilities/scss-variables.scss +8 -8
  271. package/utilities/Accessibility/accessibility.css +12 -12
  272. package/utilities/Spacing/spacing.css +720 -960
  273. package/utilities/Spacing/spacing.scss +4 -8
package/components/OverflowMenu/overflow-menu.css CHANGED
@@ -43,7 +43,7 @@
43
43
  .pf-v5-c-overflow-menu__control,
44
44
  .pf-v5-c-overflow-menu__group,
45
45
  .pf-v5-c-overflow-menu__item {
46
- margin-right: var(--pf-v5-c-overflow-menu--spacer);
46
+ margin-inline-end: var(--pf-v5-c-overflow-menu--spacer);
47
47
  }
48
48
  .pf-v5-c-overflow-menu__content:last-child,
49
49
  .pf-v5-c-overflow-menu__control:last-child,
@@ -58,7 +58,7 @@
58
58
  }
59
59
  .pf-v5-c-overflow-menu > .pf-v5-c-divider.pf-m-vertical,
60
60
  .pf-v5-c-overflow-menu__group > .pf-v5-c-divider.pf-m-vertical {
61
- margin-right: var(--pf-v5-c-overflow-menu--spacer);
61
+ margin-inline-end: var(--pf-v5-c-overflow-menu--spacer);
62
62
  }
63
63
  .pf-v5-c-overflow-menu > .pf-v5-c-divider.pf-m-vertical:last-child,
64
64
  .pf-v5-c-overflow-menu__group > .pf-v5-c-divider.pf-m-vertical:last-child {
package/components/OverflowMenu/overflow-menu.scss CHANGED
@@ -64,7 +64,7 @@
64
64
  .#{$overflow-menu}__control,
65
65
  .#{$overflow-menu}__group,
66
66
  .#{$overflow-menu}__item {
67
- margin-right: var(--#{$overflow-menu}--spacer);
67
+ margin-inline-end: var(--#{$overflow-menu}--spacer);
68
68
 
69
69
  &:last-child {
70
70
  --#{$overflow-menu}--spacer: 0;
@@ -80,7 +80,7 @@
80
80
  }
81
81
 
82
82
  > .#{$divider}.pf-m-vertical {
83
- margin-right: var(--#{$overflow-menu}--spacer);
83
+ margin-inline-end: var(--#{$overflow-menu}--spacer);
84
84
 
85
85
  &:last-child {
86
86
  --#{$overflow-menu}--spacer: 0;
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: "";
@@ -399,6 +399,10 @@
399
399
  transition: var(--pf-v5-c-page__sidebar--Transition);
400
400
  transform: translateX(var(--pf-v5-c-page__sidebar--TranslateX)) translateZ(var(--pf-v5-c-page__sidebar--TranslateZ));
401
401
  }
402
+ :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-page__sidebar {
403
+ transform: translateX(calc(var(--pf-v5-c-page__sidebar--TranslateX) * var(--pf-v5-global--inverse--multiplier))) translateZ(var(--pf-v5-c-page__sidebar--TranslateZ));
404
+ }
405
+
402
406
  .pf-v5-c-page__sidebar.pf-m-expanded {
403
407
  --pf-v5-c-page__sidebar--TranslateX: var(--pf-v5-c-page__sidebar--m-expanded--TranslateX);
404
408
  box-shadow: var(--pf-v5-c-page__sidebar--BoxShadow);
@@ -415,19 +419,19 @@
415
419
  .pf-v5-c-page__sidebar.pf-m-light {
416
420
  color: var(--pf-v5-global--Color--100);
417
421
  --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);
422
+ border-inline-end: var(--pf-v5-c-page__sidebar--m-light--BorderRightWidth) solid var(--pf-v5-c-page__sidebar--m-light--BorderRightColor);
419
423
  }
420
424
 
421
425
  .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);
426
+ padding-inline-start: var(--pf-v5-c-page__sidebar-body--PaddingLeft);
427
+ padding-inline-end: var(--pf-v5-c-page__sidebar-body--PaddingRight);
424
428
  }
425
429
  .pf-v5-c-page__sidebar-body:last-child {
426
430
  flex-grow: 1;
427
431
  }
428
432
  .pf-v5-c-page__sidebar-body.pf-m-menu {
429
433
  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);
434
+ 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
435
  }
432
436
  .pf-v5-c-page__sidebar-body.pf-m-menu + .pf-v5-c-page__sidebar-body.pf-m-menu {
433
437
  --pf-v5-c-page__sidebar-body--m-menu--BorderTopWidth: 0;
@@ -536,7 +540,7 @@
536
540
  .pf-v5-c-page__main-group.pf-m-sticky-top,
537
541
  .pf-v5-c-page__main-subnav.pf-m-sticky-top {
538
542
  position: sticky;
539
- top: 0;
543
+ inset-block-start: 0;
540
544
  z-index: var(--pf-v5-c-page--section--m-sticky-top--ZIndex);
541
545
  box-shadow: var(--pf-v5-c-page--section--m-sticky-top--BoxShadow);
542
546
  }
@@ -548,7 +552,7 @@
548
552
  .pf-v5-c-page__main-group.pf-m-sticky-bottom,
549
553
  .pf-v5-c-page__main-subnav.pf-m-sticky-bottom {
550
554
  position: sticky;
551
- bottom: 0;
555
+ inset-block-end: 0;
552
556
  z-index: var(--pf-v5-c-page--section--m-sticky-bottom--ZIndex);
553
557
  box-shadow: var(--pf-v5-c-page--section--m-sticky-bottom--BoxShadow);
554
558
  }
@@ -561,7 +565,7 @@
561
565
  .pf-v5-c-page__main-group.pf-m-sticky-top-on-sm-height,
562
566
  .pf-v5-c-page__main-subnav.pf-m-sticky-top-on-sm-height {
563
567
  position: sticky;
564
- top: 0;
568
+ inset-block-start: 0;
565
569
  z-index: var(--pf-v5-c-page--section--m-sticky-top--ZIndex);
566
570
  box-shadow: var(--pf-v5-c-page--section--m-sticky-top--BoxShadow);
567
571
  }
@@ -573,7 +577,7 @@
573
577
  .pf-v5-c-page__main-group.pf-m-sticky-bottom-on-sm-height,
574
578
  .pf-v5-c-page__main-subnav.pf-m-sticky-bottom-on-sm-height {
575
579
  position: sticky;
576
- bottom: 0;
580
+ inset-block-end: 0;
577
581
  z-index: var(--pf-v5-c-page--section--m-sticky-bottom--ZIndex);
578
582
  box-shadow: var(--pf-v5-c-page--section--m-sticky-bottom--BoxShadow);
579
583
  }
@@ -587,7 +591,7 @@
587
591
  .pf-v5-c-page__main-group.pf-m-sticky-top-on-md-height,
588
592
  .pf-v5-c-page__main-subnav.pf-m-sticky-top-on-md-height {
589
593
  position: sticky;
590
- top: 0;
594
+ inset-block-start: 0;
591
595
  z-index: var(--pf-v5-c-page--section--m-sticky-top--ZIndex);
592
596
  box-shadow: var(--pf-v5-c-page--section--m-sticky-top--BoxShadow);
593
597
  }
@@ -599,7 +603,7 @@
599
603
  .pf-v5-c-page__main-group.pf-m-sticky-bottom-on-md-height,
600
604
  .pf-v5-c-page__main-subnav.pf-m-sticky-bottom-on-md-height {
601
605
  position: sticky;
602
- bottom: 0;
606
+ inset-block-end: 0;
603
607
  z-index: var(--pf-v5-c-page--section--m-sticky-bottom--ZIndex);
604
608
  box-shadow: var(--pf-v5-c-page--section--m-sticky-bottom--BoxShadow);
605
609
  }
@@ -613,7 +617,7 @@
613
617
  .pf-v5-c-page__main-group.pf-m-sticky-top-on-lg-height,
614
618
  .pf-v5-c-page__main-subnav.pf-m-sticky-top-on-lg-height {
615
619
  position: sticky;
616
- top: 0;
620
+ inset-block-start: 0;
617
621
  z-index: var(--pf-v5-c-page--section--m-sticky-top--ZIndex);
618
622
  box-shadow: var(--pf-v5-c-page--section--m-sticky-top--BoxShadow);
619
623
  }
@@ -625,7 +629,7 @@
625
629
  .pf-v5-c-page__main-group.pf-m-sticky-bottom-on-lg-height,
626
630
  .pf-v5-c-page__main-subnav.pf-m-sticky-bottom-on-lg-height {
627
631
  position: sticky;
628
- bottom: 0;
632
+ inset-block-end: 0;
629
633
  z-index: var(--pf-v5-c-page--section--m-sticky-bottom--ZIndex);
630
634
  box-shadow: var(--pf-v5-c-page--section--m-sticky-bottom--BoxShadow);
631
635
  }
@@ -639,7 +643,7 @@
639
643
  .pf-v5-c-page__main-group.pf-m-sticky-top-on-xl-height,
640
644
  .pf-v5-c-page__main-subnav.pf-m-sticky-top-on-xl-height {
641
645
  position: sticky;
642
- top: 0;
646
+ inset-block-start: 0;
643
647
  z-index: var(--pf-v5-c-page--section--m-sticky-top--ZIndex);
644
648
  box-shadow: var(--pf-v5-c-page--section--m-sticky-top--BoxShadow);
645
649
  }
@@ -651,7 +655,7 @@
651
655
  .pf-v5-c-page__main-group.pf-m-sticky-bottom-on-xl-height,
652
656
  .pf-v5-c-page__main-subnav.pf-m-sticky-bottom-on-xl-height {
653
657
  position: sticky;
654
- bottom: 0;
658
+ inset-block-end: 0;
655
659
  z-index: var(--pf-v5-c-page--section--m-sticky-bottom--ZIndex);
656
660
  box-shadow: var(--pf-v5-c-page--section--m-sticky-bottom--BoxShadow);
657
661
  }
@@ -665,7 +669,7 @@
665
669
  .pf-v5-c-page__main-group.pf-m-sticky-top-on-2xl-height,
666
670
  .pf-v5-c-page__main-subnav.pf-m-sticky-top-on-2xl-height {
667
671
  position: sticky;
668
- top: 0;
672
+ inset-block-start: 0;
669
673
  z-index: var(--pf-v5-c-page--section--m-sticky-top--ZIndex);
670
674
  box-shadow: var(--pf-v5-c-page--section--m-sticky-top--BoxShadow);
671
675
  }
@@ -677,7 +681,7 @@
677
681
  .pf-v5-c-page__main-group.pf-m-sticky-bottom-on-2xl-height,
678
682
  .pf-v5-c-page__main-subnav.pf-m-sticky-bottom-on-2xl-height {
679
683
  position: sticky;
680
- bottom: 0;
684
+ inset-block-end: 0;
681
685
  z-index: var(--pf-v5-c-page--section--m-sticky-bottom--ZIndex);
682
686
  box-shadow: var(--pf-v5-c-page--section--m-sticky-bottom--BoxShadow);
683
687
  }
@@ -704,44 +708,44 @@
704
708
  }
705
709
 
706
710
  .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);
711
+ padding-block-start: var(--pf-v5-c-page__main-nav--PaddingTop);
712
+ padding-inline-start: var(--pf-v5-c-page__main-nav--PaddingLeft);
713
+ padding-inline-end: var(--pf-v5-c-page__main-nav--PaddingRight);
710
714
  background-color: var(--pf-v5-c-page__main-nav--BackgroundColor);
711
715
  }
712
716
  .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);
717
+ padding-block-end: var(--pf-v5-c-page__main-nav--m-sticky-top--PaddingBottom);
714
718
  }
715
719
  @media (min-height: 0) {
716
720
  .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);
721
+ padding-block-end: var(--pf-v5-c-page__main-nav--m-sticky-top--PaddingBottom);
718
722
  }
719
723
  }
720
724
  @media (min-height: 40rem) {
721
725
  .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);
726
+ padding-block-end: var(--pf-v5-c-page__main-nav--m-sticky-top--PaddingBottom);
723
727
  }
724
728
  }
725
729
  @media (min-height: 48rem) {
726
730
  .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);
731
+ padding-block-end: var(--pf-v5-c-page__main-nav--m-sticky-top--PaddingBottom);
728
732
  }
729
733
  }
730
734
  @media (min-height: 60rem) {
731
735
  .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);
736
+ padding-block-end: var(--pf-v5-c-page__main-nav--m-sticky-top--PaddingBottom);
733
737
  }
734
738
  }
735
739
  @media (min-height: 80rem) {
736
740
  .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);
741
+ padding-block-end: var(--pf-v5-c-page__main-nav--m-sticky-top--PaddingBottom);
738
742
  }
739
743
  }
740
744
 
741
745
  .pf-v5-c-page__main-subnav {
742
746
  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);
747
+ border-block-start: var(--pf-v5-c-page__main-subnav--BorderTopWidth) solid var(--pf-v5-c-page__main-subnav--BorderTopColor);
748
+ border-inline-start: var(--pf-v5-c-page__main-subnav--BorderLeftWidth) solid var(--pf-v5-c-page__main-subnav--BorderLeftColor);
745
749
  }
746
750
  @media screen and (min-width: 1200px) {
747
751
  .pf-v5-c-page__sidebar ~ .pf-v5-c-page__main {
@@ -753,7 +757,10 @@
753
757
  }
754
758
 
755
759
  .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);
760
+ padding-block-start: var(--pf-v5-c-page__main-breadcrumb--PaddingTop);
761
+ padding-block-end: var(--pf-v5-c-page__main-breadcrumb--PaddingBottom);
762
+ padding-inline-start: var(--pf-v5-c-page__main-breadcrumb--PaddingLeft);
763
+ padding-inline-end: var(--pf-v5-c-page__main-breadcrumb--PaddingRight);
757
764
  background-color: var(--pf-v5-c-page__main-breadcrumb--BackgroundColor);
758
765
  }
759
766
  .pf-v5-c-page__main-breadcrumb + .pf-v5-c-page__main-section {
@@ -789,7 +796,10 @@
789
796
  }
790
797
 
791
798
  .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);
799
+ padding-block-start: var(--pf-v5-c-page__main-tabs--PaddingTop);
800
+ padding-block-end: var(--pf-v5-c-page__main-tabs--PaddingBottom);
801
+ padding-inline-start: var(--pf-v5-c-page__main-tabs--PaddingLeft);
802
+ padding-inline-end: var(--pf-v5-c-page__main-tabs--PaddingRight);
793
803
  background-color: var(--pf-v5-c-page__main-tabs--BackgroundColor);
794
804
  }
795
805
  .pf-v5-c-page__main-nav + .pf-v5-c-page__main-tabs {
@@ -815,7 +825,10 @@
815
825
  }
816
826
 
817
827
  .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);
828
+ padding-block-start: var(--pf-v5-c-page__main-section--PaddingTop);
829
+ padding-block-end: var(--pf-v5-c-page__main-section--PaddingBottom);
830
+ padding-inline-start: var(--pf-v5-c-page__main-section--PaddingLeft);
831
+ padding-inline-end: var(--pf-v5-c-page__main-section--PaddingRight);
819
832
  background-color: var(--pf-v5-c-page__main-section--BackgroundColor);
820
833
  }
821
834
  .pf-v5-c-page__main-section.pf-m-light {
@@ -834,26 +847,38 @@
834
847
  --pf-v5-c-page__main-section--BackgroundColor: var(--pf-v5-c-page__main-section--m-dark-200--BackgroundColor);
835
848
  }
836
849
  .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);
850
+ padding-block-start: var(--pf-v5-c-page__main-section--PaddingTop);
851
+ padding-block-end: var(--pf-v5-c-page__main-section--PaddingBottom);
852
+ padding-inline-start: var(--pf-v5-c-page__main-section--PaddingLeft);
853
+ padding-inline-end: var(--pf-v5-c-page__main-section--PaddingRight);
838
854
  }
839
855
  .pf-v5-c-page__main-section.pf-m-padding.pf-m-limit-width {
840
856
  padding: 0;
841
857
  }
842
858
  .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);
859
+ padding-block-start: var(--pf-v5-c-page__main-section--PaddingTop);
860
+ padding-block-end: var(--pf-v5-c-page__main-section--PaddingBottom);
861
+ padding-inline-start: var(--pf-v5-c-page__main-section--PaddingLeft);
862
+ padding-inline-end: var(--pf-v5-c-page__main-section--PaddingRight);
844
863
  }
845
864
  .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
865
  padding: 0;
847
866
  }
848
867
  @media (min-width: 576px) {
849
868
  .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);
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);
851
873
  }
852
874
  .pf-v5-c-page__main-section.pf-m-padding-on-sm.pf-m-limit-width {
853
875
  padding: 0;
854
876
  }
855
877
  .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);
878
+ padding-block-start: var(--pf-v5-c-page__main-section--PaddingTop);
879
+ padding-block-end: var(--pf-v5-c-page__main-section--PaddingBottom);
880
+ padding-inline-start: var(--pf-v5-c-page__main-section--PaddingLeft);
881
+ padding-inline-end: var(--pf-v5-c-page__main-section--PaddingRight);
857
882
  }
858
883
  .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
884
  padding: 0;
@@ -861,13 +886,19 @@
861
886
  }
862
887
  @media (min-width: 768px) {
863
888
  .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);
889
+ padding-block-start: var(--pf-v5-c-page__main-section--PaddingTop);
890
+ padding-block-end: var(--pf-v5-c-page__main-section--PaddingBottom);
891
+ padding-inline-start: var(--pf-v5-c-page__main-section--PaddingLeft);
892
+ padding-inline-end: var(--pf-v5-c-page__main-section--PaddingRight);
865
893
  }
866
894
  .pf-v5-c-page__main-section.pf-m-padding-on-md.pf-m-limit-width {
867
895
  padding: 0;
868
896
  }
869
897
  .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);
898
+ padding-block-start: var(--pf-v5-c-page__main-section--PaddingTop);
899
+ padding-block-end: var(--pf-v5-c-page__main-section--PaddingBottom);
900
+ padding-inline-start: var(--pf-v5-c-page__main-section--PaddingLeft);
901
+ padding-inline-end: var(--pf-v5-c-page__main-section--PaddingRight);
871
902
  }
872
903
  .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
904
  padding: 0;
@@ -875,13 +906,19 @@
875
906
  }
876
907
  @media (min-width: 992px) {
877
908
  .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);
909
+ padding-block-start: var(--pf-v5-c-page__main-section--PaddingTop);
910
+ padding-block-end: var(--pf-v5-c-page__main-section--PaddingBottom);
911
+ padding-inline-start: var(--pf-v5-c-page__main-section--PaddingLeft);
912
+ padding-inline-end: var(--pf-v5-c-page__main-section--PaddingRight);
879
913
  }
880
914
  .pf-v5-c-page__main-section.pf-m-padding-on-lg.pf-m-limit-width {
881
915
  padding: 0;
882
916
  }
883
917
  .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);
918
+ padding-block-start: var(--pf-v5-c-page__main-section--PaddingTop);
919
+ padding-block-end: var(--pf-v5-c-page__main-section--PaddingBottom);
920
+ padding-inline-start: var(--pf-v5-c-page__main-section--PaddingLeft);
921
+ padding-inline-end: var(--pf-v5-c-page__main-section--PaddingRight);
885
922
  }
886
923
  .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
924
  padding: 0;
@@ -889,13 +926,19 @@
889
926
  }
890
927
  @media (min-width: 1200px) {
891
928
  .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);
929
+ padding-block-start: var(--pf-v5-c-page__main-section--PaddingTop);
930
+ padding-block-end: var(--pf-v5-c-page__main-section--PaddingBottom);
931
+ padding-inline-start: var(--pf-v5-c-page__main-section--PaddingLeft);
932
+ padding-inline-end: var(--pf-v5-c-page__main-section--PaddingRight);
893
933
  }
894
934
  .pf-v5-c-page__main-section.pf-m-padding-on-xl.pf-m-limit-width {
895
935
  padding: 0;
896
936
  }
897
937
  .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);
938
+ padding-block-start: var(--pf-v5-c-page__main-section--PaddingTop);
939
+ padding-block-end: var(--pf-v5-c-page__main-section--PaddingBottom);
940
+ padding-inline-start: var(--pf-v5-c-page__main-section--PaddingLeft);
941
+ padding-inline-end: var(--pf-v5-c-page__main-section--PaddingRight);
899
942
  }
900
943
  .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
944
  padding: 0;
@@ -903,13 +946,19 @@
903
946
  }
904
947
  @media (min-width: 1450px) {
905
948
  .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);
949
+ padding-block-start: var(--pf-v5-c-page__main-section--PaddingTop);
950
+ padding-block-end: var(--pf-v5-c-page__main-section--PaddingBottom);
951
+ padding-inline-start: var(--pf-v5-c-page__main-section--PaddingLeft);
952
+ padding-inline-end: var(--pf-v5-c-page__main-section--PaddingRight);
907
953
  }
908
954
  .pf-v5-c-page__main-section.pf-m-padding-on-2xl.pf-m-limit-width {
909
955
  padding: 0;
910
956
  }
911
957
  .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);
958
+ padding-block-start: var(--pf-v5-c-page__main-section--PaddingTop);
959
+ padding-block-end: var(--pf-v5-c-page__main-section--PaddingBottom);
960
+ padding-inline-start: var(--pf-v5-c-page__main-section--PaddingLeft);
961
+ padding-inline-end: var(--pf-v5-c-page__main-section--PaddingRight);
913
962
  }
914
963
  .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
964
  padding: 0;
@@ -920,7 +969,7 @@
920
969
  flex: 1 1;
921
970
  min-height: 0;
922
971
  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);
972
+ border-block-start: var(--pf-v5-c-page__main-wizard--BorderTopWidth) solid var(--pf-v5-c-page__main-wizard--BorderTopColor);
924
973
  }
925
974
  .pf-v5-c-page__main-wizard:first-child {
926
975
  --pf-v5-c-page__main-wizard--BorderTopWidth: 0;
@@ -938,18 +987,27 @@
938
987
  }
939
988
 
940
989
  .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);
990
+ padding-block-start: var(--pf-v5-c-page__main-nav--PaddingTop);
991
+ padding-inline-start: var(--pf-v5-c-page__main-nav--PaddingLeft);
992
+ padding-inline-end: var(--pf-v5-c-page__main-nav--PaddingRight);
944
993
  }
945
994
  .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);
995
+ padding-block-start: var(--pf-v5-c-page__main-breadcrumb--PaddingTop);
996
+ padding-block-end: var(--pf-v5-c-page__main-breadcrumb--PaddingBottom);
997
+ padding-inline-start: var(--pf-v5-c-page__main-breadcrumb--PaddingLeft);
998
+ padding-inline-end: var(--pf-v5-c-page__main-breadcrumb--PaddingRight);
947
999
  }
948
1000
  .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);
1001
+ padding-block-start: var(--pf-v5-c-page__main-section--PaddingTop);
1002
+ padding-block-end: var(--pf-v5-c-page__main-section--PaddingBottom);
1003
+ padding-inline-start: var(--pf-v5-c-page__main-section--PaddingLeft);
1004
+ padding-inline-end: var(--pf-v5-c-page__main-section--PaddingRight);
950
1005
  }
951
1006
  .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);
1007
+ padding-block-start: var(--pf-v5-c-page__main-tabs--PaddingTop);
1008
+ padding-block-end: var(--pf-v5-c-page__main-tabs--PaddingBottom);
1009
+ padding-inline-start: var(--pf-v5-c-page__main-tabs--PaddingLeft);
1010
+ padding-inline-end: var(--pf-v5-c-page__main-tabs--PaddingRight);
953
1011
  }
954
1012
 
955
1013
  .pf-v5-c-page__drawer {
@@ -978,7 +1036,7 @@
978
1036
  background-color: var(--pf-v5-c-page__header-tools--c-button--m-selected--before--BackgroundColor);
979
1037
  }
980
1038
  :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);
1039
+ border-inline-end: var(--pf-v5-global--BorderWidth--sm) solid var(--pf-v5-global--BorderColor--100);
982
1040
  }
983
1041
  :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
1042
  --pf-v5-c-page__main-nav--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);