@patternfly/patternfly 6.0.0-alpha.4 → 6.0.0-alpha.41

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 (346) hide show
  1. package/CODE_OF_CONDUCT.md +1 -2
  2. package/README.md +13 -3
  3. package/assets/icons/iconUnicodes.json +1 -0
  4. package/assets/images/PF-Backdrop.svg +1 -0
  5. package/assets/images/PF-HorizontalLogo-Color.svg +29 -0
  6. package/assets/images/PF-HorizontalLogo-Reverse.svg +28 -0
  7. package/assets/images/PF-IconLogo-Reverse.svg +14 -0
  8. package/assets/images/PF-IconLogo-color.svg +17 -0
  9. package/assets/images/PF-IconLogo.svg +17 -0
  10. package/assets/images/logo__pf--reverse-on-md.svg +1 -1
  11. package/assets/images/pf-background.svg +22 -0
  12. package/assets/images/pf-c-brand__logo-on-lg-white.svg +32 -0
  13. package/assets/images/pf-c-brand__logo-on-md-white.svg +42 -0
  14. package/assets/images/pf-c-brand__logo-on-sm-white.svg +17 -0
  15. package/assets/images/pf-c-brand__logo-on-sm.svg +1 -1
  16. package/assets/images/pf-c-brand__logo-on-xl-white.svg +39 -0
  17. package/assets/images/pf_logo_white.hbs +35 -0
  18. package/assets/images/pf_logo_white.svg +38 -0
  19. package/assets/pficon/pf-v5-pficon.woff2 +0 -0
  20. package/assets/pficon/pficon.scss +6 -129
  21. package/base/_common.scss +29 -4
  22. package/base/_globals.scss +5 -9
  23. package/base/_variables.scss +8 -6
  24. package/base/patternfly-common.css +24 -6
  25. package/base/patternfly-globals.css +5 -5
  26. package/base/patternfly-icons.css +5 -1
  27. package/base/patternfly-pf-icons.css +5 -1
  28. package/base/patternfly-variables.css +889 -787
  29. package/base/tokens/_tokens-dark.scss +322 -265
  30. package/base/tokens/_tokens-default.scss +428 -306
  31. package/base/tokens/_tokens-font.scss +41 -46
  32. package/base/tokens/_tokens-palette.scss +69 -71
  33. package/base/tokens/_workspace-overrides.scss +7 -0
  34. package/components/AboutModalBox/about-modal-box.css +78 -104
  35. package/components/AboutModalBox/about-modal-box.scss +62 -74
  36. package/components/Accordion/accordion.css +96 -175
  37. package/components/Accordion/accordion.scss +106 -193
  38. package/components/ActionList/action-list.css +2 -2
  39. package/components/ActionList/action-list.scss +2 -2
  40. package/components/Alert/alert-group.css +27 -20
  41. package/components/Alert/alert-group.scss +27 -20
  42. package/components/Alert/alert.css +74 -95
  43. package/components/Alert/alert.scss +76 -89
  44. package/components/AppLauncher/app-launcher.css +32 -23
  45. package/components/AppLauncher/app-launcher.scss +32 -23
  46. package/components/Avatar/avatar.css +10 -13
  47. package/components/Avatar/avatar.scss +10 -17
  48. package/components/BackToTop/back-to-top.css +17 -15
  49. package/components/BackToTop/back-to-top.scss +14 -13
  50. package/components/Backdrop/backdrop.css +8 -4
  51. package/components/Backdrop/backdrop.scss +7 -4
  52. package/components/BackgroundImage/background-image.css +11 -4
  53. package/components/BackgroundImage/background-image.scss +13 -4
  54. package/components/Badge/badge.css +25 -17
  55. package/components/Badge/badge.scss +27 -19
  56. package/components/Banner/banner.css +95 -69
  57. package/components/Banner/banner.scss +100 -34
  58. package/components/Breadcrumb/breadcrumb.css +28 -19
  59. package/components/Breadcrumb/breadcrumb.scss +26 -19
  60. package/components/Button/button.css +35 -23
  61. package/components/Button/button.scss +36 -26
  62. package/components/Button/themes/dark/button.scss +1 -1
  63. package/components/CalendarMonth/calendar-month.css +25 -15
  64. package/components/CalendarMonth/calendar-month.scss +23 -15
  65. package/components/Card/card.css +28 -17
  66. package/components/Card/card.scss +32 -17
  67. package/components/Check/check.css +12 -10
  68. package/components/Check/check.scss +17 -12
  69. package/components/Chip/chip-group.css +6 -6
  70. package/components/Chip/chip-group.scss +6 -6
  71. package/components/Chip/chip.css +16 -9
  72. package/components/Chip/chip.scss +17 -9
  73. package/components/ClipboardCopy/clipboard-copy.css +19 -10
  74. package/components/ClipboardCopy/clipboard-copy.scss +16 -8
  75. package/components/ClipboardCopy/themes/dark/clipboard-copy.scss +2 -2
  76. package/components/CodeBlock/code-block.css +6 -3
  77. package/components/CodeBlock/code-block.scss +6 -3
  78. package/components/CodeEditor/code-editor.css +31 -22
  79. package/components/CodeEditor/code-editor.scss +30 -21
  80. package/components/CodeEditor/themes/dark/code-editor.scss +1 -1
  81. package/components/Content/content.css +100 -97
  82. package/components/Content/content.scss +101 -98
  83. package/components/ContextSelector/context-selector.css +41 -26
  84. package/components/ContextSelector/context-selector.scss +40 -25
  85. package/components/ContextSelector/themes/dark/context-selector.scss +1 -1
  86. package/components/DataList/data-list-grid.css +21 -21
  87. package/components/DataList/data-list-grid.scss +3 -3
  88. package/components/DataList/data-list.css +69 -56
  89. package/components/DataList/data-list.scss +47 -35
  90. package/components/DatePicker/date-picker.css +8 -8
  91. package/components/DatePicker/date-picker.scss +8 -8
  92. package/components/DescriptionList/description-list.css +8 -5
  93. package/components/DescriptionList/description-list.scss +8 -5
  94. package/components/Divider/divider.css +97 -177
  95. package/components/Divider/divider.scss +60 -79
  96. package/components/DragDrop/drag-drop.css +8 -8
  97. package/components/DragDrop/drag-drop.scss +8 -8
  98. package/components/Drawer/drawer.css +120 -62
  99. package/components/Drawer/drawer.scss +94 -44
  100. package/components/Dropdown/dropdown.css +76 -69
  101. package/components/Dropdown/dropdown.scss +67 -62
  102. package/components/DualListSelector/dual-list-selector.css +29 -15
  103. package/components/DualListSelector/dual-list-selector.scss +30 -15
  104. package/components/EmptyState/empty-state.css +64 -38
  105. package/components/EmptyState/empty-state.scss +70 -38
  106. package/components/ExpandableSection/expandable-section.css +75 -66
  107. package/components/ExpandableSection/expandable-section.scss +82 -80
  108. package/components/FileUpload/file-upload.css +9 -15
  109. package/components/FileUpload/file-upload.scss +9 -15
  110. package/components/Form/form.css +59 -50
  111. package/components/Form/form.scss +50 -45
  112. package/components/FormControl/form-control.css +18 -9
  113. package/components/FormControl/form-control.scss +18 -9
  114. package/components/HelperText/helper-text.css +29 -35
  115. package/components/HelperText/helper-text.scss +31 -41
  116. package/components/Hint/hint.css +37 -27
  117. package/components/Hint/hint.scss +37 -30
  118. package/components/Icon/icon.css +1 -1
  119. package/components/Icon/icon.scss +1 -1
  120. package/components/InlineEdit/inline-edit.css +9 -9
  121. package/components/InlineEdit/inline-edit.scss +9 -9
  122. package/components/InputGroup/input-group.css +12 -6
  123. package/components/InputGroup/input-group.scss +11 -5
  124. package/components/InputGroup/themes/dark/input-group.scss +1 -1
  125. package/components/JumpLinks/jump-links.css +27 -24
  126. package/components/JumpLinks/jump-links.scss +26 -24
  127. package/components/Label/label-group.css +13 -10
  128. package/components/Label/label-group.scss +13 -10
  129. package/components/Label/label.css +9 -9
  130. package/components/Label/label.scss +9 -9
  131. package/components/List/list.css +25 -25
  132. package/components/List/list.scss +26 -26
  133. package/components/LogViewer/log-viewer.css +14 -14
  134. package/components/LogViewer/log-viewer.scss +14 -14
  135. package/components/Login/login.css +104 -122
  136. package/components/Login/login.scss +92 -91
  137. package/components/Masthead/masthead.css +273 -498
  138. package/components/Masthead/masthead.scss +137 -282
  139. package/components/Menu/menu.css +82 -65
  140. package/components/Menu/menu.scss +85 -69
  141. package/components/MenuToggle/menu-toggle.css +90 -100
  142. package/components/MenuToggle/menu-toggle.scss +93 -111
  143. package/components/ModalBox/modal-box.css +76 -69
  144. package/components/ModalBox/modal-box.scss +74 -70
  145. package/components/MultipleFileUpload/multiple-file-upload.css +11 -8
  146. package/components/MultipleFileUpload/multiple-file-upload.scss +11 -8
  147. package/components/Nav/nav.css +162 -133
  148. package/components/Nav/nav.scss +162 -135
  149. package/components/Nav/themes/dark/nav.scss +2 -2
  150. package/components/NotificationBadge/notification-badge.css +66 -85
  151. package/components/NotificationBadge/notification-badge.scss +72 -103
  152. package/components/NotificationDrawer/notification-drawer.css +32 -19
  153. package/components/NotificationDrawer/notification-drawer.scss +30 -19
  154. package/components/NumberInput/number-input.css +2 -2
  155. package/components/NumberInput/number-input.scss +2 -2
  156. package/components/OptionsMenu/options-menu.css +43 -31
  157. package/components/OptionsMenu/options-menu.scss +43 -31
  158. package/components/OverflowMenu/overflow-menu.css +2 -2
  159. package/components/OverflowMenu/overflow-menu.scss +2 -2
  160. package/components/Page/page.css +232 -271
  161. package/components/Page/page.scss +180 -231
  162. package/components/Pagination/pagination.css +71 -121
  163. package/components/Pagination/pagination.scss +56 -127
  164. package/components/Panel/panel.css +13 -7
  165. package/components/Panel/panel.scss +13 -7
  166. package/components/Popover/popover.css +108 -87
  167. package/components/Popover/popover.scss +120 -109
  168. package/components/Progress/progress.css +9 -7
  169. package/components/Progress/progress.scss +12 -7
  170. package/components/ProgressStepper/progress-stepper.css +26 -20
  171. package/components/ProgressStepper/progress-stepper.scss +25 -19
  172. package/components/Radio/radio.css +16 -13
  173. package/components/Radio/radio.scss +20 -14
  174. package/components/Select/select.css +56 -47
  175. package/components/Select/select.scss +56 -47
  176. package/components/Sidebar/sidebar.css +11 -5
  177. package/components/Sidebar/sidebar.scss +11 -5
  178. package/components/SimpleList/simple-list.css +45 -56
  179. package/components/SimpleList/simple-list.scss +51 -55
  180. package/components/Skeleton/skeleton.css +24 -25
  181. package/components/Skeleton/skeleton.scss +21 -26
  182. package/components/SkipToContent/skip-to-content.css +9 -6
  183. package/components/SkipToContent/skip-to-content.scss +8 -6
  184. package/components/Slider/slider.css +47 -26
  185. package/components/Slider/slider.scss +56 -28
  186. package/components/Switch/switch.css +10 -6
  187. package/components/Switch/switch.scss +11 -7
  188. package/components/TabContent/tab-content.css +4 -1
  189. package/components/TabContent/tab-content.scss +4 -1
  190. package/components/Table/table-grid.css +264 -203
  191. package/components/Table/table-grid.scss +61 -47
  192. package/components/Table/table-scrollable.css +4 -4
  193. package/components/Table/table-scrollable.scss +6 -4
  194. package/components/Table/table-tree-view.css +112 -105
  195. package/components/Table/table-tree-view.scss +38 -33
  196. package/components/Table/table.css +105 -89
  197. package/components/Table/table.scss +105 -89
  198. package/components/Tabs/tabs.css +76 -48
  199. package/components/Tabs/tabs.scss +74 -48
  200. package/components/TextInputGroup/text-input-group.css +15 -15
  201. package/components/TextInputGroup/text-input-group.scss +15 -15
  202. package/components/Tile/tile.css +10 -10
  203. package/components/Tile/tile.scss +10 -10
  204. package/components/Title/title.css +70 -19
  205. package/components/Title/title.scss +90 -20
  206. package/components/ToggleGroup/toggle-group.css +14 -11
  207. package/components/ToggleGroup/toggle-group.scss +14 -11
  208. package/components/Toolbar/toolbar.css +57 -43
  209. package/components/Toolbar/toolbar.scss +45 -25
  210. package/components/Tooltip/tooltip.css +74 -44
  211. package/components/Tooltip/tooltip.scss +93 -77
  212. package/components/TreeView/tree-view.css +48 -27
  213. package/components/TreeView/tree-view.scss +50 -28
  214. package/components/Truncate/truncate.css +13 -0
  215. package/components/Truncate/truncate.scss +19 -3
  216. package/components/Wizard/wizard.css +57 -36
  217. package/components/Wizard/wizard.scss +57 -36
  218. package/docs/components/AboutModalBox/examples/AboutModalBox.md +2 -2
  219. package/docs/components/Accordion/examples/Accordion.md +614 -416
  220. package/docs/components/Alert/examples/Alert.md +3 -3
  221. package/docs/components/Avatar/examples/Avatar.md +5 -19
  222. package/docs/components/BackgroundImage/examples/BackgroundImage.md +1 -1
  223. package/docs/components/Badge/examples/Badge.md +21 -0
  224. package/docs/components/Banner/examples/Banner.md +48 -25
  225. package/docs/components/Brand/examples/Brand.css +12 -0
  226. package/docs/components/Brand/examples/Brand.md +51 -32
  227. package/docs/components/Breadcrumb/examples/Breadcrumb.md +1 -1
  228. package/docs/components/Button/examples/Button.css +2 -2
  229. package/docs/components/Button/examples/Button.md +15 -3
  230. package/docs/components/Card/examples/Card.md +143 -37
  231. package/docs/components/Check/examples/Check.md +71 -58
  232. package/docs/components/Chip/examples/Chip.md +1 -1
  233. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +106 -0
  234. package/docs/components/CodeBlock/examples/CodeBlock.md +4 -4
  235. package/docs/components/CodeEditor/examples/CodeEditor.md +3 -3
  236. package/docs/components/Content/examples/Content.md +5 -5
  237. package/docs/components/Divider/examples/Divider.css +3 -1
  238. package/docs/components/Divider/examples/Divider.md +4 -5
  239. package/docs/components/DragDrop/examples/DragDrop.css +2 -2
  240. package/docs/components/Dropdown/deprecated/Dropdown.css +1 -1
  241. package/docs/components/DualListSelector/examples/DualListSelector.md +64 -16
  242. package/docs/components/EmptyState/examples/EmptyState.md +45 -1
  243. package/docs/components/ExpandableSection/examples/ExpandableSection.md +49 -28
  244. package/docs/components/InlineEdit/examples/InlineEdit.md +3 -1
  245. package/docs/components/Label/examples/Label.md +12 -12
  246. package/docs/components/LogViewer/examples/LogViewer.css +2 -2
  247. package/docs/components/LogViewer/examples/LogViewer.md +250 -160
  248. package/docs/components/Login/examples/Login.md +10 -5
  249. package/docs/components/Masthead/examples/masthead.md +443 -65
  250. package/docs/components/Menu/examples/Menu.css +8 -0
  251. package/docs/components/Menu/examples/Menu.md +594 -543
  252. package/docs/components/MenuToggle/examples/MenuToggle.md +151 -138
  253. package/docs/components/ModalBox/examples/ModalBox.css +3 -8
  254. package/docs/components/Nav/examples/Navigation.css +2 -8
  255. package/docs/components/Nav/examples/Navigation.md +240 -114
  256. package/docs/components/NotificationBadge/examples/NotificationBadge.md +5 -7
  257. package/docs/components/OptionsMenu/deprecated/options-menu.md +12 -3
  258. package/docs/components/Page/examples/Page.css +0 -8
  259. package/docs/components/Page/examples/Page.md +22 -21
  260. package/docs/components/Pagination/examples/Pagination.md +663 -637
  261. package/docs/components/Popover/examples/Popover.css +4 -9
  262. package/docs/components/Popover/examples/Popover.md +1 -1
  263. package/docs/components/Radio/examples/Radio.md +62 -54
  264. package/docs/components/Select/deprecated/Select.md +184 -177
  265. package/docs/components/SimpleList/examples/SimpleList.md +3 -3
  266. package/docs/components/Table/examples/Table.css +2 -2
  267. package/docs/components/Table/examples/Table.md +10 -10
  268. package/docs/components/TextInputGroup/examples/TextInputGroup.css +1 -1
  269. package/docs/components/TextInputGroup/examples/TextInputGroup.md +9 -9
  270. package/docs/components/Tile/examples/Tile.css +1 -1
  271. package/docs/components/Title/examples/Title.md +18 -0
  272. package/docs/components/Toolbar/examples/Toolbar.md +663 -2894
  273. package/docs/components/Tooltip/examples/Tooltip.css +4 -0
  274. package/docs/components/Tooltip/examples/Tooltip.md +3 -1
  275. package/docs/components/Truncate/examples/Truncate.css +2 -2
  276. package/docs/components/Truncate/examples/Truncate.md +2 -2
  277. package/docs/demos/AboutModal/examples/AboutModal.md +103 -30
  278. package/docs/demos/Alert/examples/Alert.md +303 -84
  279. package/docs/demos/BackToTop/examples/BackToTop.md +101 -28
  280. package/docs/demos/Banner/examples/Banner.md +209 -58
  281. package/docs/demos/Card/examples/Card.css +3 -3
  282. package/docs/demos/Card/examples/Card.md +28 -12
  283. package/docs/demos/CardView/examples/CardView.md +259 -197
  284. package/docs/demos/ContextSelector/examples/ContextSelector.md +374 -91
  285. package/docs/demos/Dashboard/examples/Dashboard.md +104 -31
  286. package/docs/demos/DataList/examples/DataList.md +974 -907
  287. package/docs/demos/DescriptionList/examples/DescriptionList.md +303 -84
  288. package/docs/demos/Drawer/examples/Drawer.md +505 -140
  289. package/docs/demos/JumpLinks/examples/JumpLinks.md +606 -168
  290. package/docs/demos/Masthead/examples/Masthead.md +745 -310
  291. package/docs/demos/Modal/examples/Modal.md +606 -168
  292. package/docs/demos/Nav/examples/Nav.md +808 -224
  293. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +510 -140
  294. package/docs/demos/Page/examples/Page.md +909 -252
  295. package/docs/demos/Page/examples/Penta.md +570 -503
  296. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +2 -1
  297. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +1293 -914
  298. package/docs/demos/Skeleton/examples/Skeleton.md +108 -63
  299. package/docs/demos/Table/examples/Table.md +3842 -3400
  300. package/docs/demos/Tabs/examples/Tabs.md +636 -191
  301. package/docs/demos/Toolbar/examples/Toolbar.css +15 -0
  302. package/docs/demos/Toolbar/examples/Toolbar.md +1305 -1467
  303. package/docs/demos/Wizard/examples/Wizard.md +909 -252
  304. package/docs/layouts/Flex/examples/Flex.md +16 -16
  305. package/docs/utilities/BoxShadow/examples/box-shadow.css +5 -5
  306. package/icons/pficons.mjs +1 -0
  307. package/layouts/Flex/flex.css +115 -43
  308. package/layouts/Flex/flex.scss +20 -8
  309. package/package.json +36 -32
  310. package/patternfly-addons.css +732 -972
  311. package/patternfly-base-no-globals-theme-dark-unversioned.css +923 -799
  312. package/patternfly-base-no-globals.css +923 -799
  313. package/patternfly-base-theme-dark-unversioned.css +928 -804
  314. package/patternfly-base.css +928 -804
  315. package/patternfly-no-globals.css +5253 -4984
  316. package/patternfly-theme-dark-unversioned.css +5258 -4989
  317. package/patternfly.css +5258 -4989
  318. package/patternfly.min.css +1 -1
  319. package/patternfly.min.css.map +1 -1
  320. package/sass-utilities/functions.scss +6 -0
  321. package/sass-utilities/mixins.scss +62 -2
  322. package/sass-utilities/scss-variables.scss +8 -8
  323. package/sass-utilities/themes/dark/mixins.scss +3 -1
  324. package/utilities/Accessibility/accessibility.css +12 -12
  325. package/utilities/Spacing/spacing.css +720 -960
  326. package/utilities/Spacing/spacing.scss +4 -8
  327. package/base/themes/dark/_variables.scss +0 -102
  328. package/components/AboutModalBox/themes/dark/about-modal-box.scss +0 -7
  329. package/components/Accordion/themes/dark/accordion.scss +0 -9
  330. package/components/Alert/themes/dark/alert.scss +0 -17
  331. package/components/Badge/themes/dark/badge.scss +0 -9
  332. package/components/Banner/themes/dark/banner.scss +0 -14
  333. package/components/HelperText/themes/dark/helper-text.scss +0 -7
  334. package/components/Hint/themes/dark/hint.scss +0 -8
  335. package/components/Login/themes/dark/login.scss +0 -12
  336. package/components/Masthead/themes/dark/masthead.scss +0 -14
  337. package/components/ModalBox/themes/dark/modal-box.scss +0 -7
  338. package/components/NotificationBadge/themes/dark/notification-badge.scss +0 -10
  339. package/components/Page/themes/dark/page.scss +0 -69
  340. package/components/Pagination/themes/dark/pagination.scss +0 -7
  341. package/components/Popover/themes/dark/popover.scss +0 -11
  342. package/components/SimpleList/themes/dark/simple-list.scss +0 -14
  343. package/components/Skeleton/themes/dark/skeleton.scss +0 -10
  344. package/components/Tooltip/themes/dark/tooltip.scss +0 -8
  345. package/docs/components/Avatar/examples/Avatar.css +0 -3
  346. package/docs/components/NotificationBadge/examples/NotificationBadge.css +0 -3
@@ -33,21 +33,21 @@ cssPrefix: pf-v5-c-simple-list
33
33
  <ul class="pf-v5-c-simple-list__list" role="list">
34
34
  <li class="pf-v5-c-simple-list__item">
35
35
  <a
36
- class="pf-v5-c-simple-list__item-link pf-m-current"
36
+ class="pf-v5-c-simple-list__item-link pf-m-link pf-m-current"
37
37
  href="#"
38
38
  tabindex="0"
39
39
  >List item 1</a>
40
40
  </li>
41
41
  <li class="pf-v5-c-simple-list__item">
42
42
  <a
43
- class="pf-v5-c-simple-list__item-link"
43
+ class="pf-v5-c-simple-list__item-link pf-m-link"
44
44
  href="#"
45
45
  tabindex="0"
46
46
  >List item 2</a>
47
47
  </li>
48
48
  <li class="pf-v5-c-simple-list__item">
49
49
  <a
50
- class="pf-v5-c-simple-list__item-link"
50
+ class="pf-v5-c-simple-list__item-link pf-m-link"
51
51
  href="#"
52
52
  tabindex="0"
53
53
  >List item 3</a>
@@ -5,8 +5,8 @@
5
5
 
6
6
  #ws-core-c-table-th-truncation .pf-v5-c-tooltip {
7
7
  position: absolute;
8
- left: 440px;
9
- top: -18px;
8
+ inset-inline-start: 440px;
9
+ inset-block-start: -18px;
10
10
  }
11
11
 
12
12
  #ws-core-c-table-sticky-header .ws-preview-html {
@@ -24703,9 +24703,9 @@ Add a [width modifier](#width-modifiers) to `thead th` to limit string length or
24703
24703
 
24704
24704
  There are a few ways this can be handled:
24705
24705
 
24706
- * Manipulate the `z-index` of the menu and/or table headers/columns manually.
24707
- * Use the `menuAppendTo` prop in non-composable react components with menus to append the menu to an element outside of the table (e.g., the `<body>` element) so that the menu has a higher stacking context than - and can appear on top of - sticky headers/columns as well as appear outside of any scrollable content in the table.
24708
- * In the case where the menu is outside of the table (e.g., above the table in a toolbar, or below the table and the menu expands up), assign the entire table a lower `z-index` than the `z-index` of the menu. This creates a lower stacking context for the entire table compared to the menu, while preserving the stacking context of the elements inside of the table.
24706
+ * Manipulate the `z-index` of the menu and/or table headers/columns manually.
24707
+ * Use the `menuAppendTo` prop in non-composable react components with menus to append the menu to an element outside of the table (e.g., the `<body>` element) so that the menu has a higher stacking context than - and can appear on top of - sticky headers/columns as well as appear outside of any scrollable content in the table.
24708
+ * In the case where the menu is outside of the table (e.g., above the table in a toolbar, or below the table and the menu expands up), assign the entire table a lower `z-index` than the `z-index` of the menu. This creates a lower stacking context for the entire table compared to the menu, while preserving the stacking context of the elements inside of the table.
24709
24709
 
24710
24710
  ### Sticky header
24711
24711
 
@@ -27051,8 +27051,8 @@ For sticky columns to function correctly, the parent table's width must be contr
27051
27051
  | `.pf-v5-c-scroll-outer-wrapper` | `<div>` | Initiates a table container sticky columns outer wrapper. |
27052
27052
  | `.pf-v5-c-scroll-inner-wrapper` | `<div>` | Initiates a table container sticky columns inner wrapper. |
27053
27053
  | `.pf-v5-c-table__sticky-cell` | `<th>`, `<td>` | Initiates a sticky table cell. |
27054
- | `.pf-m-right` | `.pf-v5-c-table__sticky-cell` | Initiates a sticky, right-hand table cell. |
27055
- | `.pf-m-left` | `.pf-v5-c-table__sticky-cell` | Initiates a sticky, left-hand table cell. |
27054
+ | `.pf-m-right`, `.pf-m-inline-end` | `.pf-v5-c-table__sticky-cell` | Initiates a sticky, right-hand (in LTR) or left-hand (in RTL) table cell. |
27055
+ | `.pf-m-left`, `.pf-m-inline-start` | `.pf-v5-c-table__sticky-cell` | Initiates a sticky, left-hand (in LTR) or right-hand (in RTL) table cell. |
27056
27056
 
27057
27057
  ## Nested column headers
27058
27058
 
@@ -30824,8 +30824,8 @@ By default, all table header cells are set to `white-space: nowrap`. If a `<th>`
30824
30824
 
30825
30825
  ### Implementation support
30826
30826
 
30827
- * One expandable toggle button, positioned in the first cell of a non-expandable row, preceding an expandable row.
30828
- * One checkbox or radio input, positioned in the first or second cell of a non-expandable row.
30829
- * One action button, positioned in the last cell of a non-expandable row.
30830
- * Tabular data.
30831
- * Compact presentation modifier (not compatible with expandable table).
30827
+ * One expandable toggle button, positioned in the first cell of a non-expandable row, preceding an expandable row.
30828
+ * One checkbox or radio input, positioned in the first or second cell of a non-expandable row.
30829
+ * One action button, positioned in the last cell of a non-expandable row.
30830
+ * Tabular data.
30831
+ * Compact presentation modifier (not compatible with expandable table).
@@ -5,7 +5,7 @@
5
5
  .ws-example-wrapper .pf-v5-c-menu,
6
6
  .ws-example-wrapper .pf-v5-c-panel {
7
7
  position: absolute;
8
- top: 40px;
8
+ inset-block-start: 40px;
9
9
  width: 100%;
10
10
  }
11
11
 
@@ -1022,28 +1022,28 @@ cssPrefix: pf-v5-c-text-input-group
1022
1022
  <div class="pf-v5-c-menu">
1023
1023
  <div class="pf-v5-c-menu__content">
1024
1024
  <ul class="pf-v5-c-menu__list" role="menu">
1025
- <li class="pf-v5-c-menu__list-item" role="none">
1025
+ <li class="pf-v5-c-menu__list-item" role="group">
1026
1026
  <button class="pf-v5-c-menu__item" type="button" role="menuitem">
1027
1027
  <span class="pf-v5-c-menu__item-main">
1028
1028
  <span class="pf-v5-c-menu__item-text">apple</span>
1029
1029
  </span>
1030
1030
  </button>
1031
1031
  </li>
1032
- <li class="pf-v5-c-menu__list-item" role="none">
1032
+ <li class="pf-v5-c-menu__list-item" role="group">
1033
1033
  <button class="pf-v5-c-menu__item" type="button" role="menuitem">
1034
1034
  <span class="pf-v5-c-menu__item-main">
1035
1035
  <span class="pf-v5-c-menu__item-text">appleby</span>
1036
1036
  </span>
1037
1037
  </button>
1038
1038
  </li>
1039
- <li class="pf-v5-c-menu__list-item" role="none">
1039
+ <li class="pf-v5-c-menu__list-item" role="group">
1040
1040
  <button class="pf-v5-c-menu__item" type="button" role="menuitem">
1041
1041
  <span class="pf-v5-c-menu__item-main">
1042
1042
  <span class="pf-v5-c-menu__item-text">appleseed</span>
1043
1043
  </span>
1044
1044
  </button>
1045
1045
  </li>
1046
- <li class="pf-v5-c-menu__list-item" role="none">
1046
+ <li class="pf-v5-c-menu__list-item" role="group">
1047
1047
  <button class="pf-v5-c-menu__item" type="button" role="menuitem">
1048
1048
  <span class="pf-v5-c-menu__item-main">
1049
1049
  <span class="pf-v5-c-menu__item-text">appleton</span>
@@ -1088,7 +1088,7 @@ cssPrefix: pf-v5-c-text-input-group
1088
1088
  <div class="pf-v5-c-menu">
1089
1089
  <div class="pf-v5-c-menu__content">
1090
1090
  <ul class="pf-v5-c-menu__list" role="menu">
1091
- <li class="pf-v5-c-menu__list-item" role="none">
1091
+ <li class="pf-v5-c-menu__list-item" role="group">
1092
1092
  <button class="pf-v5-c-menu__item" type="button" role="menuitem">
1093
1093
  <span class="pf-v5-c-menu__item-main">
1094
1094
  <span class="pf-v5-c-menu__item-text">appleseed</span>
@@ -1241,28 +1241,28 @@ cssPrefix: pf-v5-c-text-input-group
1241
1241
  <div class="pf-v5-c-menu">
1242
1242
  <div class="pf-v5-c-menu__content">
1243
1243
  <ul class="pf-v5-c-menu__list" role="menu">
1244
- <li class="pf-v5-c-menu__list-item" role="none">
1244
+ <li class="pf-v5-c-menu__list-item" role="group">
1245
1245
  <button class="pf-v5-c-menu__item" type="button" role="menuitem">
1246
1246
  <span class="pf-v5-c-menu__item-main">
1247
1247
  <span class="pf-v5-c-menu__item-text">nancy</span>
1248
1248
  </span>
1249
1249
  </button>
1250
1250
  </li>
1251
- <li class="pf-v5-c-menu__list-item" role="none">
1251
+ <li class="pf-v5-c-menu__list-item" role="group">
1252
1252
  <button class="pf-v5-c-menu__item" type="button" role="menuitem">
1253
1253
  <span class="pf-v5-c-menu__item-main">
1254
1254
  <span class="pf-v5-c-menu__item-text">ned</span>
1255
1255
  </span>
1256
1256
  </button>
1257
1257
  </li>
1258
- <li class="pf-v5-c-menu__list-item" role="none">
1258
+ <li class="pf-v5-c-menu__list-item" role="group">
1259
1259
  <button class="pf-v5-c-menu__item" type="button" role="menuitem">
1260
1260
  <span class="pf-v5-c-menu__item-main">
1261
1261
  <span class="pf-v5-c-menu__item-text">neil</span>
1262
1262
  </span>
1263
1263
  </button>
1264
1264
  </li>
1265
- <li class="pf-v5-c-menu__list-item" role="none">
1265
+ <li class="pf-v5-c-menu__list-item" role="group">
1266
1266
  <button class="pf-v5-c-menu__item" type="button" role="menuitem">
1267
1267
  <span class="pf-v5-c-menu__item-main">
1268
1268
  <span class="pf-v5-c-menu__item-text">nicole</span>
@@ -2,7 +2,7 @@
2
2
  #ws-core-c-tile-extra-content .ws-preview-html .pf-v5-c-tile,
3
3
  #ws-core-c-tile-stacked-tiles .ws-preview-html .pf-v5-c-tile,
4
4
  #ws-core-c-tile-stacked-tiles-large .ws-preview-html .pf-v5-c-tile {
5
- margin-right: 8px;
5
+ margin-inline-end: 8px;
6
6
  }
7
7
 
8
8
  #ws-core-c-tile-extra-content .ws-preview-html {
@@ -16,6 +16,18 @@ cssPrefix: pf-v5-c-title
16
16
 
17
17
  ```
18
18
 
19
+ ### Heading level modifiers
20
+
21
+ ```html
22
+ <div class="pf-v5-c-title pf-m-h1">H1-styled title</div>
23
+ <div class="pf-v5-c-title pf-m-h2">H2-styled title</div>
24
+ <div class="pf-v5-c-title pf-m-h3">H3-styled title</div>
25
+ <div class="pf-v5-c-title pf-m-h4">H4-styled title</div>
26
+ <div class="pf-v5-c-title pf-m-h5">H5-styled title</div>
27
+ <div class="pf-v5-c-title pf-m-h6">H6-styled title</div>
28
+
29
+ ```
30
+
19
31
  ## Documentation
20
32
 
21
33
  ### Overview
@@ -44,3 +56,9 @@ The content component defines margin on headers. To regain the same spacing use,
44
56
  | `.pf-m-xl` | `.pf-v5-c-title` | Modifies for xl size |
45
57
  | `.pf-m-lg` | `.pf-v5-c-title` | Modifies for lg size |
46
58
  | `.pf-m-md` | `.pf-v5-c-title` | Modifies for md size |
59
+ | `.pf-m-h1` | `.pf-v5-c-title` | Modifies for default h1 size |
60
+ | `.pf-m-h2` | `.pf-v5-c-title` | Modifies for default h2 size |
61
+ | `.pf-m-h3` | `.pf-v5-c-title` | Modifies for default h3 size |
62
+ | `.pf-m-h4` | `.pf-v5-c-title` | Modifies for default h4 size |
63
+ | `.pf-m-h5` | `.pf-v5-c-title` | Modifies for default h5 size |
64
+ | `.pf-m-h6` | `.pf-v5-c-title` | Modifies for default h6 size |