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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (266) 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 +2 -2
  213. package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +619 -240
  214. package/docs/components/OptionsMenu/deprecated/options-menu.md +403 -160
  215. package/docs/components/OverflowMenu/examples/overflow-menu.md +45 -34
  216. package/docs/components/Pagination/examples/Pagination.md +195 -65
  217. package/docs/components/Popover/examples/Popover.css +2 -2
  218. package/docs/components/ProgressStepper/examples/ProgressStepper.md +50 -0
  219. package/docs/components/Select/deprecated/Select.css +3 -3
  220. package/docs/components/Select/deprecated/Select.md +43 -55
  221. package/docs/components/Table/examples/Table.css +2 -2
  222. package/docs/components/Table/examples/Table.md +4546 -1668
  223. package/docs/components/Tabs/examples/Tabs.md +1094 -438
  224. package/docs/components/TextInputGroup/examples/TextInputGroup.css +1 -1
  225. package/docs/components/TextInputGroup/examples/TextInputGroup.md +2 -2
  226. package/docs/components/Tile/examples/Tile.css +1 -1
  227. package/docs/components/Toolbar/examples/Toolbar.md +148 -80
  228. package/docs/components/TreeView/examples/TreeView.md +23 -8
  229. package/docs/components/Wizard/examples/Wizard.md +75 -36
  230. package/docs/demos/Card/examples/Card.css +3 -3
  231. package/docs/demos/Card/examples/Card.md +49 -24
  232. package/docs/demos/CardView/examples/CardView.md +182 -74
  233. package/docs/demos/ContextSelector/examples/ContextSelector.md +95 -47
  234. package/docs/demos/Dashboard/examples/Dashboard.md +18 -9
  235. package/docs/demos/DataList/examples/DataList.md +163 -70
  236. package/docs/demos/DescriptionList/examples/DescriptionList.md +20 -9
  237. package/docs/demos/Drawer/examples/Drawer.md +20 -9
  238. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +803 -338
  239. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +241 -101
  240. package/docs/demos/Table/examples/Table.md +1422 -607
  241. package/docs/demos/Tabs/examples/Tabs.md +113 -48
  242. package/docs/demos/Toolbar/examples/Toolbar.md +320 -127
  243. package/docs/demos/Wizard/examples/Wizard.md +191 -41
  244. package/docs/layouts/Flex/examples/Flex.md +5 -5
  245. package/docs/utilities/BoxShadow/examples/box-shadow.css +5 -5
  246. package/icons/pficons.mjs +1 -0
  247. package/layouts/Flex/flex.css +115 -43
  248. package/layouts/Flex/flex.scss +20 -8
  249. package/package.json +40 -37
  250. package/patternfly-addons.css +732 -972
  251. package/patternfly-base-no-globals-theme-dark-unversioned.css +27 -3
  252. package/patternfly-base-no-globals.css +27 -3
  253. package/patternfly-base-theme-dark-unversioned.css +28 -4
  254. package/patternfly-base.css +28 -4
  255. package/patternfly-no-globals.css +2420 -1872
  256. package/patternfly-theme-dark-unversioned.css +2421 -1873
  257. package/patternfly.css +2421 -1873
  258. package/patternfly.min.css +1 -1
  259. package/patternfly.min.css.map +1 -1
  260. package/sass-utilities/functions.scss +6 -0
  261. package/sass-utilities/mixins.scss +62 -2
  262. package/sass-utilities/placeholders.scss +1 -1
  263. package/sass-utilities/scss-variables.scss +8 -8
  264. package/utilities/Accessibility/accessibility.css +12 -12
  265. package/utilities/Spacing/spacing.css +720 -960
  266. package/utilities/Spacing/spacing.scss +4 -8
package/base/patternfly-pf-icons.css CHANGED
@@ -2,7 +2,7 @@
2
2
  font-family: "pf-v5-pficon";
3
3
  src: url("./assets/pficon/pf-v5-pficon.woff2") format("woff2");
4
4
  }
5
- .pf-v5-pficon-zone:before, .pf-v5-pficon-warning-triangle:before, .pf-v5-pficon-volume:before, .pf-v5-pficon-virtual-machine:before, .pf-v5-pficon-users:before, .pf-v5-pficon-user:before, .pf-v5-pficon-unplugged:before, .pf-v5-pficon-unlocked:before, .pf-v5-pficon-unknown:before, .pf-v5-pficon-trend-up:before, .pf-v5-pficon-trend-down:before, .pf-v5-pficon-topology:before, .pf-v5-pficon-thumb-tack:before, .pf-v5-pficon-tenant:before, .pf-v5-pficon-task:before, .pf-v5-pficon-storage-domain:before, .pf-v5-pficon-spinner2:before, .pf-v5-pficon-spinner:before, .pf-v5-pficon-services:before, .pf-v5-pficon-service:before, .pf-v5-pficon-service-catalog:before, .pf-v5-pficon-server:before, .pf-v5-pficon-server-group:before, .pf-v5-pficon-security:before, .pf-v5-pficon-screen:before, .pf-v5-pficon-save:before, .pf-v5-pficon-running:before, .pf-v5-pficon-resources-full:before, .pf-v5-pficon-resources-empty:before, .pf-v5-pficon-resources-almost-full:before, .pf-v5-pficon-resources-almost-empty:before, .pf-v5-pficon-resource-pool:before, .pf-v5-pficon-repository:before, .pf-v5-pficon-replicator:before, .pf-v5-pficon-remove2:before, .pf-v5-pficon-registry:before, .pf-v5-pficon-regions:before, .pf-v5-pficon-rebooting:before, .pf-v5-pficon-rebalance:before, .pf-v5-pficon-project:before, .pf-v5-pficon-process-automation:before, .pf-v5-pficon-private:before, .pf-v5-pficon-print:before, .pf-v5-pficon-port:before, .pf-v5-pficon-plugged:before, .pf-v5-pficon-pficon-vcenter:before, .pf-v5-pficon-pficon-template:before, .pf-v5-pficon-pficon-sort-common-desc:before, .pf-v5-pficon-pficon-sort-common-asc:before, .pf-v5-pficon-pficon-satellite:before, .pf-v5-pficon-pficon-network-range:before, .pf-v5-pficon-pficon-history:before, .pf-v5-pficon-pficon-dragdrop:before, .pf-v5-pficon-pending:before, .pf-v5-pficon-paused:before, .pf-v5-pficon-panel-open:before, .pf-v5-pficon-panel-close:before, .pf-v5-pficon-package:before, .pf-v5-pficon-os-image:before, .pf-v5-pficon-orders:before, .pf-v5-pficon-optimize:before, .pf-v5-pficon-openstack:before, .pf-v5-pficon-openshift:before, .pf-v5-pficon-open-drawer-right:before, .pf-v5-pficon-on:before, .pf-v5-pficon-on-running:before, .pf-v5-pficon-ok:before, .pf-v5-pficon-off:before, .pf-v5-pficon-not-started:before, .pf-v5-pficon-new-process:before, .pf-v5-pficon-network:before, .pf-v5-pficon-namespaces:before, .pf-v5-pficon-multicluster:before, .pf-v5-pficon-monitoring:before, .pf-v5-pficon-module:before, .pf-v5-pficon-migration:before, .pf-v5-pficon-middleware:before, .pf-v5-pficon-messages:before, .pf-v5-pficon-memory:before, .pf-v5-pficon-maintenance:before, .pf-v5-pficon-locked:before, .pf-v5-pficon-key:before, .pf-v5-pficon-integration:before, .pf-v5-pficon-infrastructure:before, .pf-v5-pficon-info:before, .pf-v5-pficon-in-progress:before, .pf-v5-pficon-import:before, .pf-v5-pficon-home:before, .pf-v5-pficon-history:before, .pf-v5-pficon-help:before, .pf-v5-pficon-globe-route:before, .pf-v5-pficon-folder-open:before, .pf-v5-pficon-folder-close:before, .pf-v5-pficon-flavor:before, .pf-v5-pficon-filter:before, .pf-v5-pficon-export:before, .pf-v5-pficon-error-circle-o:before, .pf-v5-pficon-equalizer:before, .pf-v5-pficon-enterprise:before, .pf-v5-pficon-enhancement:before, .pf-v5-pficon-edit:before, .pf-v5-pficon-domain:before, .pf-v5-pficon-disconnected:before, .pf-v5-pficon-degraded:before, .pf-v5-pficon-data-source:before, .pf-v5-pficon-data-sink:before, .pf-v5-pficon-data-processor:before, .pf-v5-pficon-critical-risk:before, .pf-v5-pficon-cpu:before, .pf-v5-pficon-container-node:before, .pf-v5-pficon-connected:before, .pf-v5-pficon-cluster:before, .pf-v5-pficon-cloud-tenant:before, .pf-v5-pficon-cloud-security:before, .pf-v5-pficon-close:before, .pf-v5-pficon-chat:before, .pf-v5-pficon-catalog:before, .pf-v5-pficon-bundle:before, .pf-v5-pficon-builder-image:before, .pf-v5-pficon-build:before, .pf-v5-pficon-blueprint:before, .pf-v5-pficon-bell:before, .pf-v5-pficon-automation:before, .pf-v5-pficon-attention-bell:before, .pf-v5-pficon-asleep:before, .pf-v5-pficon-arrow:before, .pf-v5-pficon-applications:before, .pf-v5-pficon-ansible-tower:before, .pf-v5-pficon-add-circle-o:before {
5
+ .pf-v5-pficon-zone:before, .pf-v5-pficon-warning-triangle:before, .pf-v5-pficon-volume:before, .pf-v5-pficon-virtual-machine:before, .pf-v5-pficon-users:before, .pf-v5-pficon-user:before, .pf-v5-pficon-unplugged:before, .pf-v5-pficon-unlocked:before, .pf-v5-pficon-unknown:before, .pf-v5-pficon-trend-up:before, .pf-v5-pficon-trend-down:before, .pf-v5-pficon-treeview:before, .pf-v5-pficon-topology:before, .pf-v5-pficon-thumb-tack:before, .pf-v5-pficon-tenant:before, .pf-v5-pficon-task:before, .pf-v5-pficon-storage-domain:before, .pf-v5-pficon-spinner2:before, .pf-v5-pficon-spinner:before, .pf-v5-pficon-services:before, .pf-v5-pficon-service:before, .pf-v5-pficon-service-catalog:before, .pf-v5-pficon-server:before, .pf-v5-pficon-server-group:before, .pf-v5-pficon-security:before, .pf-v5-pficon-screen:before, .pf-v5-pficon-save:before, .pf-v5-pficon-running:before, .pf-v5-pficon-resources-full:before, .pf-v5-pficon-resources-empty:before, .pf-v5-pficon-resources-almost-full:before, .pf-v5-pficon-resources-almost-empty:before, .pf-v5-pficon-resource-pool:before, .pf-v5-pficon-repository:before, .pf-v5-pficon-replicator:before, .pf-v5-pficon-remove2:before, .pf-v5-pficon-registry:before, .pf-v5-pficon-regions:before, .pf-v5-pficon-rebooting:before, .pf-v5-pficon-rebalance:before, .pf-v5-pficon-project:before, .pf-v5-pficon-process-automation:before, .pf-v5-pficon-private:before, .pf-v5-pficon-print:before, .pf-v5-pficon-port:before, .pf-v5-pficon-plugged:before, .pf-v5-pficon-pficon-vcenter:before, .pf-v5-pficon-pficon-template:before, .pf-v5-pficon-pficon-sort-common-desc:before, .pf-v5-pficon-pficon-sort-common-asc:before, .pf-v5-pficon-pficon-satellite:before, .pf-v5-pficon-pficon-network-range:before, .pf-v5-pficon-pficon-history:before, .pf-v5-pficon-pficon-dragdrop:before, .pf-v5-pficon-pending:before, .pf-v5-pficon-paused:before, .pf-v5-pficon-panel-open:before, .pf-v5-pficon-panel-close:before, .pf-v5-pficon-package:before, .pf-v5-pficon-os-image:before, .pf-v5-pficon-orders:before, .pf-v5-pficon-optimize:before, .pf-v5-pficon-openstack:before, .pf-v5-pficon-openshift:before, .pf-v5-pficon-open-drawer-right:before, .pf-v5-pficon-on:before, .pf-v5-pficon-on-running:before, .pf-v5-pficon-ok:before, .pf-v5-pficon-off:before, .pf-v5-pficon-not-started:before, .pf-v5-pficon-new-process:before, .pf-v5-pficon-network:before, .pf-v5-pficon-namespaces:before, .pf-v5-pficon-multicluster:before, .pf-v5-pficon-monitoring:before, .pf-v5-pficon-module:before, .pf-v5-pficon-migration:before, .pf-v5-pficon-middleware:before, .pf-v5-pficon-messages:before, .pf-v5-pficon-memory:before, .pf-v5-pficon-maintenance:before, .pf-v5-pficon-locked:before, .pf-v5-pficon-key:before, .pf-v5-pficon-integration:before, .pf-v5-pficon-infrastructure:before, .pf-v5-pficon-info:before, .pf-v5-pficon-in-progress:before, .pf-v5-pficon-import:before, .pf-v5-pficon-home:before, .pf-v5-pficon-history:before, .pf-v5-pficon-help:before, .pf-v5-pficon-globe-route:before, .pf-v5-pficon-folder-open:before, .pf-v5-pficon-folder-close:before, .pf-v5-pficon-flavor:before, .pf-v5-pficon-filter:before, .pf-v5-pficon-export:before, .pf-v5-pficon-error-circle-o:before, .pf-v5-pficon-equalizer:before, .pf-v5-pficon-enterprise:before, .pf-v5-pficon-enhancement:before, .pf-v5-pficon-edit:before, .pf-v5-pficon-domain:before, .pf-v5-pficon-disconnected:before, .pf-v5-pficon-degraded:before, .pf-v5-pficon-data-source:before, .pf-v5-pficon-data-sink:before, .pf-v5-pficon-data-processor:before, .pf-v5-pficon-critical-risk:before, .pf-v5-pficon-cpu:before, .pf-v5-pficon-container-node:before, .pf-v5-pficon-connected:before, .pf-v5-pficon-cluster:before, .pf-v5-pficon-cloud-tenant:before, .pf-v5-pficon-cloud-security:before, .pf-v5-pficon-close:before, .pf-v5-pficon-chat:before, .pf-v5-pficon-catalog:before, .pf-v5-pficon-bundle:before, .pf-v5-pficon-builder-image:before, .pf-v5-pficon-build:before, .pf-v5-pficon-blueprint:before, .pf-v5-pficon-bell:before, .pf-v5-pficon-automation:before, .pf-v5-pficon-attention-bell:before, .pf-v5-pficon-asleep:before, .pf-v5-pficon-arrow:before, .pf-v5-pficon-applications:before, .pf-v5-pficon-ansible-tower:before, .pf-v5-pficon-add-circle-o:before {
6
6
  font-family: "pf-v5-pficon";
7
7
  -webkit-font-smoothing: antialiased;
8
8
  -moz-osx-font-smoothing: grayscale;
@@ -485,6 +485,10 @@
485
485
  content: "\e608";
486
486
  }
487
487
 
488
+ .pf-v5-pficon-treeview:before {
489
+ content: "\e97d";
490
+ }
491
+
488
492
  .pf-v5-pficon-trend-down:before {
489
493
  content: "\e900";
490
494
  }
package/base/patternfly-variables.css CHANGED
@@ -232,6 +232,11 @@
232
232
  --pf-v5-global--arrow--width-lg: 1.5625rem;
233
233
  --pf-v5-global--target-size--MinWidth: 44px;
234
234
  --pf-v5-global--target-size--MinHeight: 44px;
235
+ --pf-v5-global--inverse--multiplier: 1;
236
+ }
237
+
238
+ :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) {
239
+ --pf-v5-global--inverse--multiplier: -1;
235
240
  }
236
241
 
237
242
  :where(.pf-v5-theme-dark) {
package/components/AboutModalBox/about-modal-box.css CHANGED
@@ -14,6 +14,7 @@
14
14
  }
15
15
 
16
16
  .pf-v5-c-about-modal-box {
17
+ --pf-v5-c-about-modal-box--BackgroundImage: none;
17
18
  --pf-v5-c-about-modal-box--BackgroundColor: var(--pf-v5-global--palette--black-1000);
18
19
  --pf-v5-c-about-modal-box--BackgroundPosition: bottom right;
19
20
  --pf-v5-c-about-modal-box--BackgroundSize--min-width: 200px;
@@ -72,7 +73,7 @@
72
73
  overflow-x: hidden;
73
74
  overflow-y: auto;
74
75
  background-color: var(--pf-v5-c-about-modal-box--BackgroundColor);
75
- background-image: var(--pf-v5-c-about-modal-box--BackgroundImage, none);
76
+ background-image: var(--pf-v5-c-about-modal-box--BackgroundImage);
76
77
  background-repeat: no-repeat;
77
78
  background-position: var(--pf-v5-c-about-modal-box--BackgroundPosition);
78
79
  background-size: var(--pf-v5-c-about-modal-box--BackgroundSize);
@@ -131,7 +132,10 @@
131
132
  .pf-v5-c-about-modal-box__brand {
132
133
  display: flex;
133
134
  grid-area: brand;
134
- padding: var(--pf-v5-c-about-modal-box__brand--PaddingTop) var(--pf-v5-c-about-modal-box__brand--PaddingRight) var(--pf-v5-c-about-modal-box__brand--PaddingBottom) var(--pf-v5-c-about-modal-box__brand--PaddingLeft);
135
+ padding-block-start: var(--pf-v5-c-about-modal-box__brand--PaddingTop);
136
+ padding-block-end: var(--pf-v5-c-about-modal-box__brand--PaddingBottom);
137
+ padding-inline-start: var(--pf-v5-c-about-modal-box__brand--PaddingLeft);
138
+ padding-inline-end: var(--pf-v5-c-about-modal-box__brand--PaddingRight);
135
139
  }
136
140
 
137
141
  .pf-v5-c-about-modal-box__brand-image {
@@ -142,14 +146,14 @@
142
146
  display: flex;
143
147
  flex-direction: column;
144
148
  grid-area: header;
145
- padding-right: var(--pf-v5-c-about-modal-box__header--PaddingRight);
146
- padding-bottom: var(--pf-v5-c-about-modal-box__header--PaddingBottom);
147
- padding-left: var(--pf-v5-c-about-modal-box__header--PaddingLeft);
149
+ padding-block-end: var(--pf-v5-c-about-modal-box__header--PaddingBottom);
150
+ padding-inline-start: var(--pf-v5-c-about-modal-box__header--PaddingLeft);
151
+ padding-inline-end: var(--pf-v5-c-about-modal-box__header--PaddingRight);
148
152
  }
149
153
 
150
154
  .pf-v5-c-about-modal-box__strapline {
151
- padding-top: var(--pf-v5-c-about-modal-box__strapline--PaddingTop);
152
- margin-top: auto;
155
+ padding-block-start: var(--pf-v5-c-about-modal-box__strapline--PaddingTop);
156
+ margin-block-start: auto;
153
157
  font-size: var(--pf-v5-c-about-modal-box__strapline--FontSize);
154
158
  }
155
159
 
@@ -157,12 +161,15 @@
157
161
  display: flex;
158
162
  flex-direction: column;
159
163
  grid-area: content;
160
- margin: var(--pf-v5-c-about-modal-box__content--MarginTop) var(--pf-v5-c-about-modal-box__content--MarginRight) var(--pf-v5-c-about-modal-box__content--MarginBottom) var(--pf-v5-c-about-modal-box__content--MarginLeft);
164
+ margin-block-start: var(--pf-v5-c-about-modal-box__content--MarginTop);
165
+ margin-block-end: var(--pf-v5-c-about-modal-box__content--MarginBottom);
166
+ margin-inline-start: var(--pf-v5-c-about-modal-box__content--MarginLeft);
167
+ margin-inline-end: var(--pf-v5-c-about-modal-box__content--MarginRight);
161
168
  overflow-x: hidden;
162
169
  overflow-y: auto;
163
170
  overscroll-behavior: contain;
164
- -webkit-overflow-scrolling: touch;
165
171
  word-break: break-word;
172
+ -webkit-overflow-scrolling: touch;
166
173
  }
167
174
  @media screen and (min-width: 576px) {
168
175
  .pf-v5-c-about-modal-box__content {
@@ -173,14 +180,14 @@
173
180
 
174
181
  .pf-v5-c-about-modal-box__close {
175
182
  position: sticky;
176
- top: 0;
183
+ inset-block-start: 0;
177
184
  display: flex;
178
185
  grid-area: close;
179
186
  align-items: flex-start;
180
187
  justify-content: flex-end;
181
- padding-top: var(--pf-v5-c-about-modal-box__close--PaddingTop);
182
- padding-right: var(--pf-v5-c-about-modal-box__close--PaddingRight);
183
- padding-bottom: var(--pf-v5-c-about-modal-box__close--PaddingBottom);
188
+ padding-block-start: var(--pf-v5-c-about-modal-box__close--PaddingTop);
189
+ padding-block-end: var(--pf-v5-c-about-modal-box__close--PaddingBottom);
190
+ padding-inline-end: var(--pf-v5-c-about-modal-box__close--PaddingRight);
184
191
  }
185
192
  @media only screen and (min-width: 576px) {
186
193
  .pf-v5-c-about-modal-box__close {
package/components/AboutModalBox/about-modal-box.scss CHANGED
@@ -2,6 +2,7 @@
2
2
 
3
3
  .#{$about-modal-box} {
4
4
  // Component variables
5
+ --#{$about-modal-box}--BackgroundImage: none;
5
6
  --#{$about-modal-box}--BackgroundColor: var(--#{$pf-global}--palette--black-1000); // Modal uses a non-standard background color
6
7
  --#{$about-modal-box}--BackgroundPosition: bottom right;
7
8
  --#{$about-modal-box}--BackgroundSize--min-width: 200px;
@@ -110,7 +111,7 @@
110
111
  overflow-x: hidden;
111
112
  overflow-y: auto;
112
113
  background-color: var(--#{$about-modal-box}--BackgroundColor); // Because this component is always dark, set the background color
113
- background-image: var(--#{$about-modal-box}--BackgroundImage, none);
114
+ background-image: var(--#{$about-modal-box}--BackgroundImage);
114
115
  background-repeat: no-repeat;
115
116
  background-position: var(--#{$about-modal-box}--BackgroundPosition);
116
117
  background-size: var(--#{$about-modal-box}--BackgroundSize);
@@ -136,7 +137,10 @@
136
137
  .#{$about-modal-box}__brand {
137
138
  display: flex;
138
139
  grid-area: brand;
139
- padding: var(--#{$about-modal-box}__brand--PaddingTop) var(--#{$about-modal-box}__brand--PaddingRight) var(--#{$about-modal-box}__brand--PaddingBottom) var(--#{$about-modal-box}__brand--PaddingLeft);
140
+ padding-block-start: var(--#{$about-modal-box}__brand--PaddingTop);
141
+ padding-block-end: var(--#{$about-modal-box}__brand--PaddingBottom);
142
+ padding-inline-start: var(--#{$about-modal-box}__brand--PaddingLeft);
143
+ padding-inline-end: var(--#{$about-modal-box}__brand--PaddingRight);
140
144
  }
141
145
 
142
146
  .#{$about-modal-box}__brand-image {
@@ -148,15 +152,15 @@
148
152
  display: flex;
149
153
  flex-direction: column;
150
154
  grid-area: header;
151
- padding-right: var(--#{$about-modal-box}__header--PaddingRight);
152
- padding-bottom: var(--#{$about-modal-box}__header--PaddingBottom);
153
- padding-left: var(--#{$about-modal-box}__header--PaddingLeft);
155
+ padding-block-end: var(--#{$about-modal-box}__header--PaddingBottom);
156
+ padding-inline-start: var(--#{$about-modal-box}__header--PaddingLeft);
157
+ padding-inline-end: var(--#{$about-modal-box}__header--PaddingRight);
154
158
  }
155
159
 
156
160
  // Strapline
157
161
  .#{$about-modal-box}__strapline {
158
- padding-top: var(--#{$about-modal-box}__strapline--PaddingTop);
159
- margin-top: auto;
162
+ padding-block-start: var(--#{$about-modal-box}__strapline--PaddingTop);
163
+ margin-block-start: auto;
160
164
  font-size: var(--#{$about-modal-box}__strapline--FontSize);
161
165
  }
162
166
 
@@ -165,12 +169,15 @@
165
169
  display: flex;
166
170
  flex-direction: column;
167
171
  grid-area: content;
168
- margin: var(--#{$about-modal-box}__content--MarginTop) var(--#{$about-modal-box}__content--MarginRight) var(--#{$about-modal-box}__content--MarginBottom) var(--#{$about-modal-box}__content--MarginLeft); // Using margin instead of padding to prevent scrollbar extending to top of content block
172
+ margin-block-start: var(--#{$about-modal-box}__content--MarginTop);
173
+ margin-block-end: var(--#{$about-modal-box}__content--MarginBottom);
174
+ margin-inline-start: var(--#{$about-modal-box}__content--MarginLeft); // Using margin instead of padding to prevent scrollbar extending to top of content block
175
+ margin-inline-end: var(--#{$about-modal-box}__content--MarginRight);
169
176
  overflow-x: hidden;
170
177
  overflow-y: auto;
171
178
  overscroll-behavior: contain;
172
- -webkit-overflow-scrolling: touch;
173
179
  word-break: break-word;
180
+ -webkit-overflow-scrolling: touch;
174
181
 
175
182
  @media screen and (min-width: $pf-v5-global--breakpoint--sm) {
176
183
  overflow: visible;
@@ -181,14 +188,14 @@
181
188
  // Close
182
189
  .#{$about-modal-box}__close {
183
190
  position: sticky;
184
- top: 0;
191
+ inset-block-start: 0;
185
192
  display: flex;
186
193
  grid-area: close;
187
194
  align-items: flex-start;
188
195
  justify-content: flex-end;
189
- padding-top: var(--#{$about-modal-box}__close--PaddingTop);
190
- padding-right: var(--#{$about-modal-box}__close--PaddingRight);
191
- padding-bottom: var(--#{$about-modal-box}__close--PaddingBottom);
196
+ padding-block-start: var(--#{$about-modal-box}__close--PaddingTop);
197
+ padding-block-end: var(--#{$about-modal-box}__close--PaddingBottom);
198
+ padding-inline-end: var(--#{$about-modal-box}__close--PaddingRight);
192
199
 
193
200
  @media only screen and (min-width: $pf-v5-global--breakpoint--sm) {
194
201
  grid-area: 1 / 2;
package/components/Accordion/accordion.css CHANGED
@@ -105,30 +105,34 @@
105
105
  }
106
106
  .pf-v5-c-accordion.pf-m-bordered {
107
107
  --pf-v5-c-accordion__toggle--after--Top: var(--pf-v5-c-accordion--m-bordered__toggle--after--Top);
108
- border-top: var(--pf-v5-c-accordion--m-bordered--BorderTopWidth) solid var(--pf-v5-c-accordion--m-bordered--BorderTopColor);
108
+ border-block-start: var(--pf-v5-c-accordion--m-bordered--BorderTopWidth) solid var(--pf-v5-c-accordion--m-bordered--BorderTopColor);
109
109
  }
110
110
  .pf-v5-c-accordion.pf-m-bordered .pf-v5-c-accordion__toggle::before {
111
111
  position: absolute;
112
- top: 0;
113
- right: 0;
114
- bottom: 0;
115
- left: 0;
112
+ inset-block-start: 0;
113
+ inset-block-end: 0;
114
+ inset-inline-start: 0;
115
+ inset-inline-end: 0;
116
116
  content: "";
117
- border: solid var(--pf-v5-c-accordion--m-bordered__toggle--before--BorderColor);
118
- border-width: var(--pf-v5-c-accordion--m-bordered__toggle--before--BorderTopWidth) 0 var(--pf-v5-c-accordion--m-bordered__toggle--before--BorderBottomWidth);
117
+ border-color: var(--pf-v5-c-accordion--m-bordered__toggle--before--BorderColor);
118
+ border-style: solid;
119
+ border-block-start-width: var(--pf-v5-c-accordion--m-bordered__toggle--before--BorderTopWidth);
120
+ border-block-end-width: var(--pf-v5-c-accordion--m-bordered__toggle--before--BorderBottomWidth);
121
+ border-inline-start-width: 0;
122
+ border-inline-end-width: 0;
119
123
  }
120
124
  .pf-v5-c-accordion.pf-m-bordered .pf-v5-c-accordion__toggle.pf-m-expanded {
121
125
  --pf-v5-c-accordion--m-bordered__toggle--before--BorderBottomWidth: 0;
122
126
  }
123
127
  .pf-v5-c-accordion.pf-m-bordered .pf-v5-c-accordion__expandable-content.pf-m-expanded .pf-v5-c-accordion__expandable-content-body:last-child::before {
124
128
  position: absolute;
125
- top: 0;
126
- right: 0;
127
- bottom: 0;
128
- left: 0;
129
+ inset-block-start: 0;
130
+ inset-block-end: 0;
131
+ inset-inline-start: 0;
132
+ inset-inline-end: 0;
129
133
  pointer-events: none;
130
134
  content: "";
131
- border-bottom: var(--pf-v5-c-accordion--m-bordered__expandable-content--m-expanded__expandable-content-body--last-child--before--BorderBottomWidth) solid var(--pf-v5-c-accordion--m-bordered__expandable-content--m-expanded__expandable-content-body--last-child--before--BorderBottomColor);
135
+ border-block-end: var(--pf-v5-c-accordion--m-bordered__expandable-content--m-expanded__expandable-content-body--last-child--before--BorderBottomWidth) solid var(--pf-v5-c-accordion--m-bordered__expandable-content--m-expanded__expandable-content-body--last-child--before--BorderBottomColor);
132
136
  }
133
137
 
134
138
  .pf-v5-c-accordion__toggle {
@@ -137,7 +141,10 @@
137
141
  align-items: center;
138
142
  justify-content: space-between;
139
143
  width: 100%;
140
- padding: var(--pf-v5-c-accordion__toggle--PaddingTop) var(--pf-v5-c-accordion__toggle--PaddingRight) var(--pf-v5-c-accordion__toggle--PaddingBottom) var(--pf-v5-c-accordion__toggle--PaddingLeft);
144
+ padding-block-start: var(--pf-v5-c-accordion__toggle--PaddingTop);
145
+ padding-block-end: var(--pf-v5-c-accordion__toggle--PaddingBottom);
146
+ padding-inline-start: var(--pf-v5-c-accordion__toggle--PaddingLeft);
147
+ padding-inline-end: var(--pf-v5-c-accordion__toggle--PaddingRight);
141
148
  font-family: var(--pf-v5-c-accordion__toggle--FontFamily, inherit);
142
149
  font-size: var(--pf-v5-c-accordion__toggle--FontSize, inherit);
143
150
  background-color: var(--pf-v5-c-accordion__toggle--BackgroundColor);
@@ -145,9 +152,9 @@
145
152
  }
146
153
  .pf-v5-c-accordion__toggle::after {
147
154
  position: absolute;
148
- top: var(--pf-v5-c-accordion__toggle--after--Top);
149
- bottom: 0;
150
- left: 0;
155
+ inset-block-start: var(--pf-v5-c-accordion__toggle--after--Top);
156
+ inset-block-end: 0;
157
+ inset-inline-start: 0;
151
158
  width: var(--pf-v5-c-accordion__toggle--after--Width);
152
159
  content: "";
153
160
  background-color: var(--pf-v5-c-accordion__toggle--after--BackgroundColor);
@@ -193,6 +200,9 @@
193
200
  .pf-v5-c-accordion__toggle-icon {
194
201
  transition: var(--pf-v5-c-accordion__toggle-icon--Transition);
195
202
  }
203
+ :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-accordion__toggle-icon {
204
+ scale: -1 1;
205
+ }
196
206
 
197
207
  .pf-v5-c-accordion__expandable-content {
198
208
  font-size: var(--pf-v5-c-accordion__expandable-content--FontSize);
@@ -208,13 +218,16 @@
208
218
 
209
219
  .pf-v5-c-accordion__expandable-content-body {
210
220
  position: relative;
211
- padding: var(--pf-v5-c-accordion__expandable-content-body--PaddingTop) var(--pf-v5-c-accordion__expandable-content-body--PaddingRight) var(--pf-v5-c-accordion__expandable-content-body--PaddingBottom) var(--pf-v5-c-accordion__expandable-content-body--PaddingLeft);
221
+ padding-block-start: var(--pf-v5-c-accordion__expandable-content-body--PaddingTop);
222
+ padding-block-end: var(--pf-v5-c-accordion__expandable-content-body--PaddingBottom);
223
+ padding-inline-start: var(--pf-v5-c-accordion__expandable-content-body--PaddingLeft);
224
+ padding-inline-end: var(--pf-v5-c-accordion__expandable-content-body--PaddingRight);
212
225
  }
213
226
  .pf-v5-c-accordion__expandable-content-body::after {
214
227
  position: absolute;
215
- top: 0;
216
- bottom: 0;
217
- left: 0;
228
+ inset-block-start: 0;
229
+ inset-block-end: 0;
230
+ inset-inline-start: 0;
218
231
  width: var(--pf-v5-c-accordion__expandable-content-body--after--Width);
219
232
  content: "";
220
233
  background-color: var(--pf-v5-c-accordion__expandable-content-body--after--BackgroundColor);
package/components/Accordion/accordion.scss CHANGED
@@ -114,18 +114,22 @@
114
114
  &.pf-m-bordered {
115
115
  --#{$accordion}__toggle--after--Top: var(--#{$accordion}--m-bordered__toggle--after--Top);
116
116
 
117
- border-top: var(--#{$accordion}--m-bordered--BorderTopWidth) solid var(--#{$accordion}--m-bordered--BorderTopColor);
117
+ border-block-start: var(--#{$accordion}--m-bordered--BorderTopWidth) solid var(--#{$accordion}--m-bordered--BorderTopColor);
118
118
 
119
119
  .#{$accordion}__toggle {
120
120
  &::before {
121
121
  position: absolute;
122
- top: 0;
123
- right: 0;
124
- bottom: 0;
125
- left: 0;
122
+ inset-block-start: 0;
123
+ inset-block-end: 0;
124
+ inset-inline-start: 0;
125
+ inset-inline-end: 0;
126
126
  content: "";
127
- border: solid var(--#{$accordion}--m-bordered__toggle--before--BorderColor);
128
- border-width: var(--#{$accordion}--m-bordered__toggle--before--BorderTopWidth) 0 var(--#{$accordion}--m-bordered__toggle--before--BorderBottomWidth);
127
+ border-color: var(--#{$accordion}--m-bordered__toggle--before--BorderColor);
128
+ border-style: solid;
129
+ border-block-start-width: var(--#{$accordion}--m-bordered__toggle--before--BorderTopWidth);
130
+ border-block-end-width: var(--#{$accordion}--m-bordered__toggle--before--BorderBottomWidth);
131
+ border-inline-start-width: 0;
132
+ border-inline-end-width: 0;
129
133
  }
130
134
 
131
135
  &.pf-m-expanded {
@@ -139,13 +143,13 @@
139
143
  .#{$accordion}__expandable-content-body:last-child {
140
144
  &::before {
141
145
  position: absolute;
142
- top: 0;
143
- right: 0;
144
- bottom: 0;
145
- left: 0;
146
+ inset-block-start: 0;
147
+ inset-block-end: 0;
148
+ inset-inline-start: 0;
149
+ inset-inline-end: 0;
146
150
  pointer-events: none;
147
151
  content: "";
148
- border-bottom: var(--#{$accordion}--m-bordered__expandable-content--m-expanded__expandable-content-body--last-child--before--BorderBottomWidth) solid var(--#{$accordion}--m-bordered__expandable-content--m-expanded__expandable-content-body--last-child--before--BorderBottomColor);
152
+ border-block-end: var(--#{$accordion}--m-bordered__expandable-content--m-expanded__expandable-content-body--last-child--before--BorderBottomWidth) solid var(--#{$accordion}--m-bordered__expandable-content--m-expanded__expandable-content-body--last-child--before--BorderBottomColor);
149
153
  }
150
154
  }
151
155
  }
@@ -160,7 +164,10 @@
160
164
  align-items: center;
161
165
  justify-content: space-between;
162
166
  width: 100%;
163
- padding: var(--#{$accordion}__toggle--PaddingTop) var(--#{$accordion}__toggle--PaddingRight) var(--#{$accordion}__toggle--PaddingBottom) var(--#{$accordion}__toggle--PaddingLeft);
167
+ padding-block-start: var(--#{$accordion}__toggle--PaddingTop);
168
+ padding-block-end: var(--#{$accordion}__toggle--PaddingBottom);
169
+ padding-inline-start: var(--#{$accordion}__toggle--PaddingLeft);
170
+ padding-inline-end: var(--#{$accordion}__toggle--PaddingRight);
164
171
  font-family: var(--#{$accordion}__toggle--FontFamily, inherit);
165
172
  font-size: var(--#{$accordion}__toggle--FontSize, inherit);
166
173
  background-color: var(--#{$accordion}__toggle--BackgroundColor);
@@ -168,9 +175,9 @@
168
175
 
169
176
  &::after {
170
177
  position: absolute;
171
- top: var(--#{$accordion}__toggle--after--Top);
172
- bottom: 0;
173
- left: 0;
178
+ inset-block-start: var(--#{$accordion}__toggle--after--Top);
179
+ inset-block-end: 0;
180
+ inset-inline-start: 0;
174
181
  width: var(--#{$accordion}__toggle--after--Width);
175
182
  content: "";
176
183
  background-color: var(--#{$accordion}__toggle--after--BackgroundColor);
@@ -223,6 +230,8 @@
223
230
  }
224
231
 
225
232
  .#{$accordion}__toggle-icon {
233
+ @include pf-v5-mirror-inline-on-rtl;
234
+
226
235
  transition: var(--#{$accordion}__toggle-icon--Transition);
227
236
  }
228
237
 
@@ -242,13 +251,16 @@
242
251
 
243
252
  .#{$accordion}__expandable-content-body {
244
253
  position: relative;
245
- padding: var(--#{$accordion}__expandable-content-body--PaddingTop) var(--#{$accordion}__expandable-content-body--PaddingRight) var(--#{$accordion}__expandable-content-body--PaddingBottom) var(--#{$accordion}__expandable-content-body--PaddingLeft);
254
+ padding-block-start: var(--#{$accordion}__expandable-content-body--PaddingTop);
255
+ padding-block-end: var(--#{$accordion}__expandable-content-body--PaddingBottom);
256
+ padding-inline-start: var(--#{$accordion}__expandable-content-body--PaddingLeft);
257
+ padding-inline-end: var(--#{$accordion}__expandable-content-body--PaddingRight);
246
258
 
247
259
  &::after {
248
260
  position: absolute;
249
- top: 0;
250
- bottom: 0;
251
- left: 0;
261
+ inset-block-start: 0;
262
+ inset-block-end: 0;
263
+ inset-inline-start: 0;
252
264
  width: var(--#{$accordion}__expandable-content-body--after--Width);
253
265
  content: "";
254
266
  background-color: var(--#{$accordion}__expandable-content-body--after--BackgroundColor);
package/components/ActionList/action-list.css CHANGED
@@ -13,13 +13,13 @@
13
13
  }
14
14
  .pf-v5-c-action-list > * + *,
15
15
  .pf-v5-c-action-list__group > * + * {
16
- margin-left: var(--pf-v5-c-action-list--child--spacer);
16
+ margin-inline-start: var(--pf-v5-c-action-list--child--spacer);
17
17
  }
18
18
  .pf-v5-c-action-list > * + .pf-v5-c-action-list__group,
19
19
  .pf-v5-c-action-list .pf-v5-c-action-list__group + *,
20
20
  .pf-v5-c-action-list__group > * + .pf-v5-c-action-list__group,
21
21
  .pf-v5-c-action-list__group .pf-v5-c-action-list__group + * {
22
- margin-left: var(--pf-v5-c-action-list--group--spacer);
22
+ margin-inline-start: var(--pf-v5-c-action-list--group--spacer);
23
23
  }
24
24
  .pf-v5-c-action-list.pf-m-icons,
25
25
  .pf-v5-c-action-list__group.pf-m-icons {
package/components/ActionList/action-list.scss CHANGED
@@ -15,12 +15,12 @@
15
15
  align-items: center;
16
16
 
17
17
  > * + * {
18
- margin-left: var(--#{$action-list}--child--spacer);
18
+ margin-inline-start: var(--#{$action-list}--child--spacer);
19
19
  }
20
20
 
21
21
  > * + .#{$action-list}__group,
22
22
  .#{$action-list}__group + * {
23
- margin-left: var(--#{$action-list}--group--spacer);
23
+ margin-inline-start: var(--#{$action-list}--group--spacer);
24
24
  }
25
25
 
26
26
  &.pf-m-icons {
package/components/Alert/alert-group.css CHANGED
@@ -20,12 +20,12 @@
20
20
  --pf-v5-c-alert-group__overflow-button--active--BoxShadow: var(--pf-v5-global--BoxShadow--lg), var(--pf-v5-global--BoxShadow--lg-bottom);
21
21
  }
22
22
  .pf-v5-c-alert-group > * + * {
23
- margin-top: var(--pf-v5-c-alert-group__item--MarginTop);
23
+ margin-block-start: var(--pf-v5-c-alert-group__item--MarginTop);
24
24
  }
25
25
  .pf-v5-c-alert-group.pf-m-toast {
26
26
  position: fixed;
27
- top: var(--pf-v5-c-alert-group--m-toast--Top);
28
- right: var(--pf-v5-c-alert-group--m-toast--Right);
27
+ inset-block-start: var(--pf-v5-c-alert-group--m-toast--Top);
28
+ inset-inline-end: var(--pf-v5-c-alert-group--m-toast--Right);
29
29
  z-index: var(--pf-v5-c-alert-group--m-toast--ZIndex);
30
30
  width: calc(100% - var(--pf-v5-c-alert-group--m-toast--Right) * 2);
31
31
  max-width: var(--pf-v5-c-alert-group--m-toast--MaxWidth);
@@ -34,7 +34,10 @@
34
34
  .pf-v5-c-alert-group__overflow-button {
35
35
  position: relative;
36
36
  width: 100%;
37
- padding: var(--pf-v5-c-alert-group__overflow-button--PaddingTop) var(--pf-v5-c-alert-group__overflow-button--PaddingRight) var(--pf-v5-c-alert-group__overflow-button--PaddingBottom) var(--pf-v5-c-alert-group__overflow-button--PaddingLeft);
37
+ padding-block-start: var(--pf-v5-c-alert-group__overflow-button--PaddingTop);
38
+ padding-block-end: var(--pf-v5-c-alert-group__overflow-button--PaddingBottom);
39
+ padding-inline-start: var(--pf-v5-c-alert-group__overflow-button--PaddingLeft);
40
+ padding-inline-end: var(--pf-v5-c-alert-group__overflow-button--PaddingRight);
38
41
  color: var(--pf-v5-c-alert-group__overflow-button--Color);
39
42
  background-color: var(--pf-v5-c-alert-group__overflow-button--BackgroundColor);
40
43
  border-width: var(--pf-v5-c-alert-group__overflow-button--BorderWidth);
package/components/Alert/alert-group.scss CHANGED
@@ -29,14 +29,14 @@
29
29
 
30
30
  // Spacing between alerts
31
31
  > * + * {
32
- margin-top: var(--#{$alert-group}__item--MarginTop);
32
+ margin-block-start: var(--#{$alert-group}__item--MarginTop);
33
33
  }
34
34
 
35
35
  // Toast positioning modifier
36
36
  &.pf-m-toast {
37
37
  position: fixed;
38
- top: var(--#{$alert-group}--m-toast--Top);
39
- right: var(--#{$alert-group}--m-toast--Right);
38
+ inset-block-start: var(--#{$alert-group}--m-toast--Top);
39
+ inset-inline-end: var(--#{$alert-group}--m-toast--Right);
40
40
  z-index: var(--#{$alert-group}--m-toast--ZIndex);
41
41
  width: calc(100% - calc(var(--#{$alert-group}--m-toast--Right) * 2));
42
42
  max-width: var(--#{$alert-group}--m-toast--MaxWidth);
@@ -46,7 +46,10 @@
46
46
  .#{$alert-group}__overflow-button {
47
47
  position: relative;
48
48
  width: 100%;
49
- padding: var(--#{$alert-group}__overflow-button--PaddingTop) var(--#{$alert-group}__overflow-button--PaddingRight) var(--#{$alert-group}__overflow-button--PaddingBottom) var(--#{$alert-group}__overflow-button--PaddingLeft);
49
+ padding-block-start: var(--#{$alert-group}__overflow-button--PaddingTop);
50
+ padding-block-end: var(--#{$alert-group}__overflow-button--PaddingBottom);
51
+ padding-inline-start: var(--#{$alert-group}__overflow-button--PaddingLeft);
52
+ padding-inline-end: var(--#{$alert-group}__overflow-button--PaddingRight);
50
53
  color: var(--#{$alert-group}__overflow-button--Color);
51
54
  background-color: var(--#{$alert-group}__overflow-button--BackgroundColor);
52
55
  border-width: var(--#{$alert-group}__overflow-button--BorderWidth);
package/components/Alert/alert.css CHANGED
@@ -87,10 +87,13 @@
87
87
  display: grid;
88
88
  grid-template-areas: var(--pf-v5-c-alert--GridTemplateAreas);
89
89
  grid-template-columns: var(--pf-v5-c-alert--GridTemplateColumns);
90
- padding: var(--pf-v5-c-alert--PaddingTop) var(--pf-v5-c-alert--PaddingRight) var(--pf-v5-c-alert--PaddingBottom) var(--pf-v5-c-alert--PaddingLeft);
90
+ padding-block-start: var(--pf-v5-c-alert--PaddingTop);
91
+ padding-block-end: var(--pf-v5-c-alert--PaddingBottom);
92
+ padding-inline-start: var(--pf-v5-c-alert--PaddingLeft);
93
+ padding-inline-end: var(--pf-v5-c-alert--PaddingRight);
91
94
  font-size: var(--pf-v5-c-alert__FontSize);
92
95
  background-color: var(--pf-v5-c-alert--BackgroundColor);
93
- border-top: var(--pf-v5-c-alert--BorderTopWidth) solid var(--pf-v5-c-alert--BorderTopColor);
96
+ border-block-start: var(--pf-v5-c-alert--BorderTopWidth) solid var(--pf-v5-c-alert--BorderTopColor);
94
97
  box-shadow: var(--pf-v5-c-alert--BoxShadow);
95
98
  }
96
99
  .pf-v5-c-alert.pf-m-custom {
@@ -146,9 +149,9 @@
146
149
  }
147
150
 
148
151
  .pf-v5-c-alert__toggle {
149
- margin-top: var(--pf-v5-c-alert__toggle--MarginTop);
150
- margin-bottom: var(--pf-v5-c-alert__toggle--MarginBottom);
151
- margin-left: var(--pf-v5-c-alert__toggle--MarginLeft);
152
+ margin-block-start: var(--pf-v5-c-alert__toggle--MarginTop);
153
+ margin-block-end: var(--pf-v5-c-alert__toggle--MarginBottom);
154
+ margin-inline-start: var(--pf-v5-c-alert__toggle--MarginLeft);
152
155
  }
153
156
 
154
157
  .pf-v5-c-alert__toggle-icon {
@@ -160,8 +163,8 @@
160
163
  .pf-v5-c-alert__icon {
161
164
  display: flex;
162
165
  grid-area: icon;
163
- margin-top: var(--pf-v5-c-alert__icon--MarginTop);
164
- margin-right: var(--pf-v5-c-alert__icon--MarginRight);
166
+ margin-block-start: var(--pf-v5-c-alert__icon--MarginTop);
167
+ margin-inline-end: var(--pf-v5-c-alert__icon--MarginRight);
165
168
  font-size: var(--pf-v5-c-alert__icon--FontSize);
166
169
  color: var(--pf-v5-c-alert__icon--Color);
167
170
  }
@@ -181,7 +184,7 @@
181
184
 
182
185
  .pf-v5-c-alert__description {
183
186
  grid-area: description;
184
- padding-top: var(--pf-v5-c-alert__description--PaddingTop);
187
+ padding-block-start: var(--pf-v5-c-alert__description--PaddingTop);
185
188
  word-break: break-word;
186
189
  }
187
190
  .pf-v5-c-alert__description + .pf-v5-c-alert__action-group {
@@ -190,9 +193,9 @@
190
193
 
191
194
  .pf-v5-c-alert__action {
192
195
  grid-area: action;
193
- margin-top: var(--pf-v5-c-alert__action--MarginTop);
194
- margin-right: var(--pf-v5-c-alert__action--MarginRight);
195
- margin-bottom: var(--pf-v5-c-alert__action--MarginBottom);
196
+ margin-block-start: var(--pf-v5-c-alert__action--MarginTop);
197
+ margin-block-end: var(--pf-v5-c-alert__action--MarginBottom);
198
+ margin-inline-end: var(--pf-v5-c-alert__action--MarginRight);
196
199
  transform: translateY(var(--pf-v5-c-alert__action--TranslateY));
197
200
  }
198
201
  .pf-v5-c-alert__action > .pf-v5-c-button {
@@ -201,13 +204,13 @@
201
204
 
202
205
  .pf-v5-c-alert__action-group {
203
206
  grid-area: actiongroup;
204
- padding-top: var(--pf-v5-c-alert__action-group--PaddingTop);
207
+ padding-block-start: var(--pf-v5-c-alert__action-group--PaddingTop);
205
208
  }
206
209
  .pf-v5-c-alert__action-group > .pf-v5-c-button {
207
210
  --pf-v5-c-button--m-link--m-inline--hover--TextDecoration: none;
208
211
  }
209
212
  .pf-v5-c-alert__action-group > .pf-v5-c-button:not(:last-child) {
210
- margin-right: var(--pf-v5-c-alert__action-group__c-button--not-last-child--MarginRight);
213
+ margin-inline-end: var(--pf-v5-c-alert__action-group__c-button--not-last-child--MarginRight);
211
214
  }
212
215
 
213
216
  :where(.pf-v5-theme-dark) .pf-v5-c-alert {