@patternfly/patternfly 6.0.0-alpha.99 → 6.0.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 (501) hide show
  1. package/README.md +1 -2
  2. package/assets/fontawesome/_animated.scss +1 -0
  3. package/assets/fontawesome/_bordered-pulled.scss +1 -0
  4. package/assets/fontawesome/_fixed-width.scss +3 -1
  5. package/assets/fontawesome/_icons.scss +1333 -1330
  6. package/assets/fontawesome/_index.scss +11 -0
  7. package/assets/fontawesome/_larger.scss +4 -2
  8. package/assets/fontawesome/_list.scss +4 -2
  9. package/assets/fontawesome/_rotated-flipped.scss +2 -0
  10. package/assets/fontawesome/_screen-reader.scss +1 -0
  11. package/assets/fontawesome/_stacked.scss +3 -1
  12. package/assets/fontawesome/_variables.scss +4 -4
  13. package/assets/fontawesome/fontawesome.scss +12 -12
  14. package/assets/icons/iconUnicodes.json +6 -0
  15. package/assets/images/img_avatar-dark.svg +22 -16
  16. package/assets/images/img_avatar-light.svg +25 -18
  17. package/assets/images/pf-background.svg +21 -21
  18. package/assets/images/pf_logo.svg +11 -11
  19. package/assets/images/pf_logo_white.svg +16 -17
  20. package/assets/pficon/pf-v6-pficon.woff2 +0 -0
  21. package/assets/pficon/pficon.scss +310 -271
  22. package/base/_index.scss +10 -0
  23. package/base/{_globals.scss → normalize.scss} +15 -48
  24. package/base/patternfly-common.css +14 -0
  25. package/base/patternfly-common.scss +69 -2
  26. package/base/patternfly-fa-icons.css +2787 -1420
  27. package/base/patternfly-fa-icons.scss +53 -2
  28. package/base/patternfly-fonts.css +10 -80
  29. package/base/patternfly-fonts.scss +49 -2
  30. package/base/patternfly-pf-icons.css +158 -134
  31. package/base/patternfly-pf-icons.scss +1 -2
  32. package/base/patternfly-svg-icons.css +5 -0
  33. package/base/{_svg-icons.scss → patternfly-svg-icons.scss} +2 -0
  34. package/base/patternfly-variables.css +1094 -1206
  35. package/base/patternfly-variables.scss +20 -2
  36. package/base/reset.scss +33 -0
  37. package/base/tokens/_index.scss +6 -0
  38. package/base/tokens/tokens-charts-dark.scss +173 -0
  39. package/base/tokens/{_tokens-charts.scss → tokens-charts.scss} +162 -148
  40. package/base/tokens/{_tokens-dark.scss → tokens-dark.scss} +310 -294
  41. package/base/tokens/{_tokens-default.scss → tokens-default.scss} +580 -447
  42. package/base/tokens/{_tokens-font.scss → tokens-local.scss} +16 -34
  43. package/base/tokens/{_tokens-palette.scss → tokens-palette.scss} +69 -70
  44. package/components/AboutModalBox/about-modal-box.css +86 -81
  45. package/components/AboutModalBox/about-modal-box.scss +80 -82
  46. package/components/Accordion/accordion.css +46 -45
  47. package/components/Accordion/accordion.scss +56 -55
  48. package/components/ActionList/action-list.css +6 -5
  49. package/components/ActionList/action-list.scss +7 -5
  50. package/components/Alert/alert-group.css +72 -19
  51. package/components/Alert/alert-group.scss +105 -18
  52. package/components/Alert/alert.css +52 -59
  53. package/components/Alert/alert.scss +56 -65
  54. package/components/Avatar/avatar.css +42 -41
  55. package/components/Avatar/avatar.scss +8 -7
  56. package/components/BackToTop/back-to-top.css +19 -17
  57. package/components/BackToTop/back-to-top.scss +17 -17
  58. package/components/Backdrop/backdrop.css +1 -1
  59. package/components/Backdrop/backdrop.scss +3 -4
  60. package/components/BackgroundImage/background-image.scss +3 -4
  61. package/components/Badge/badge.css +29 -7
  62. package/components/Badge/badge.scss +33 -9
  63. package/components/Banner/banner.css +30 -37
  64. package/components/Banner/banner.scss +30 -43
  65. package/components/Brand/brand.css +14 -10
  66. package/components/Brand/brand.scss +8 -5
  67. package/components/Breadcrumb/breadcrumb.css +23 -24
  68. package/components/Breadcrumb/breadcrumb.scss +25 -28
  69. package/components/Button/button.css +152 -130
  70. package/components/Button/button.scss +157 -133
  71. package/components/CalendarMonth/calendar-month.css +47 -47
  72. package/components/CalendarMonth/calendar-month.scss +50 -51
  73. package/components/Card/card.css +111 -94
  74. package/components/Card/card.scss +119 -93
  75. package/components/Check/check.css +6 -6
  76. package/components/Check/check.scss +8 -9
  77. package/components/ClipboardCopy/clipboard-copy.css +34 -45
  78. package/components/ClipboardCopy/clipboard-copy.scss +36 -49
  79. package/components/CodeBlock/code-block.css +21 -20
  80. package/components/CodeBlock/code-block.scss +21 -21
  81. package/components/CodeEditor/code-editor.css +36 -35
  82. package/components/CodeEditor/code-editor.scss +36 -36
  83. package/components/Content/content.css +167 -153
  84. package/components/Content/content.scss +204 -145
  85. package/components/DataList/data-list-grid.css +117 -117
  86. package/components/DataList/data-list-grid.scss +22 -20
  87. package/components/DataList/data-list.css +308 -312
  88. package/components/DataList/data-list.scss +145 -152
  89. package/components/DatePicker/date-picker.css +17 -17
  90. package/components/DatePicker/date-picker.scss +17 -18
  91. package/components/DescriptionList/description-list-order.css +5 -5
  92. package/components/DescriptionList/description-list-order.scss +3 -1
  93. package/components/DescriptionList/description-list.css +52 -50
  94. package/components/DescriptionList/description-list.scss +32 -37
  95. package/components/Divider/divider.css +104 -107
  96. package/components/Divider/divider.scss +19 -19
  97. package/components/DragDrop/drag-drop.css +4 -2
  98. package/components/DragDrop/drag-drop.scss +3 -3
  99. package/components/Drawer/drawer.css +119 -114
  100. package/components/Drawer/drawer.scss +139 -134
  101. package/components/DualListSelector/dual-list-selector.css +65 -62
  102. package/components/DualListSelector/dual-list-selector.scss +55 -52
  103. package/components/EmptyState/empty-state.css +38 -37
  104. package/components/EmptyState/empty-state.scss +39 -39
  105. package/components/ExpandableSection/expandable-section.css +27 -86
  106. package/components/ExpandableSection/expandable-section.scss +32 -101
  107. package/components/FileUpload/file-upload.css +3 -3
  108. package/components/FileUpload/file-upload.scss +3 -4
  109. package/components/Form/form.css +177 -125
  110. package/components/Form/form.scss +121 -115
  111. package/components/FormControl/form-control.css +68 -64
  112. package/components/FormControl/form-control.scss +80 -74
  113. package/components/HelperText/helper-text.css +5 -4
  114. package/components/HelperText/helper-text.scss +8 -6
  115. package/components/Hint/hint.css +25 -25
  116. package/components/Hint/hint.scss +25 -27
  117. package/components/Icon/icon.css +10 -10
  118. package/components/Icon/icon.scss +11 -12
  119. package/components/InlineEdit/inline-edit.css +12 -12
  120. package/components/InlineEdit/inline-edit.scss +12 -13
  121. package/components/InputGroup/input-group.css +17 -17
  122. package/components/InputGroup/input-group.scss +19 -20
  123. package/components/JumpLinks/jump-links.css +80 -96
  124. package/components/JumpLinks/jump-links.scss +80 -100
  125. package/components/Label/label-group.css +28 -28
  126. package/components/Label/label-group.scss +29 -30
  127. package/components/Label/label.css +103 -88
  128. package/components/Label/label.scss +114 -95
  129. package/components/List/list.css +44 -47
  130. package/components/List/list.scss +51 -58
  131. package/components/Login/login.css +122 -118
  132. package/components/Login/login.scss +105 -112
  133. package/components/Masthead/masthead.css +273 -175
  134. package/components/Masthead/masthead.scss +102 -68
  135. package/components/Menu/menu.css +151 -95
  136. package/components/Menu/menu.scss +59 -40
  137. package/components/MenuToggle/menu-toggle.css +131 -110
  138. package/components/MenuToggle/menu-toggle.scss +152 -130
  139. package/components/ModalBox/modal-box.css +53 -45
  140. package/components/ModalBox/modal-box.scss +52 -46
  141. package/components/MultipleFileUpload/multiple-file-upload.css +37 -37
  142. package/components/MultipleFileUpload/multiple-file-upload.scss +38 -39
  143. package/components/Nav/nav.css +33 -9
  144. package/components/Nav/nav.scss +46 -13
  145. package/components/NotificationDrawer/notification-drawer.css +50 -51
  146. package/components/NotificationDrawer/notification-drawer.scss +58 -57
  147. package/components/NumberInput/number-input.css +7 -11
  148. package/components/NumberInput/number-input.scss +5 -7
  149. package/components/OverflowMenu/overflow-menu.css +2 -1
  150. package/components/OverflowMenu/overflow-menu.scss +3 -1
  151. package/components/Page/page.css +177 -517
  152. package/components/Page/page.scss +157 -384
  153. package/components/Pagination/pagination.css +82 -79
  154. package/components/Pagination/pagination.scss +43 -40
  155. package/components/Panel/panel.css +33 -30
  156. package/components/Panel/panel.scss +35 -33
  157. package/components/Popover/popover.css +54 -52
  158. package/components/Popover/popover.scss +55 -54
  159. package/components/Progress/progress.css +8 -4
  160. package/components/Progress/progress.scss +14 -11
  161. package/components/ProgressStepper/progress-stepper.css +246 -245
  162. package/components/ProgressStepper/progress-stepper.scss +118 -118
  163. package/components/Radio/radio.css +9 -9
  164. package/components/Radio/radio.scss +11 -12
  165. package/components/Sidebar/sidebar.css +139 -139
  166. package/components/Sidebar/sidebar.scss +61 -61
  167. package/components/SimpleList/simple-list.css +21 -20
  168. package/components/SimpleList/simple-list.scss +22 -23
  169. package/components/Skeleton/skeleton.css +4 -4
  170. package/components/Skeleton/skeleton.scss +7 -8
  171. package/components/SkipToContent/skip-to-content.css +7 -6
  172. package/components/SkipToContent/skip-to-content.scss +7 -7
  173. package/components/Slider/slider.css +31 -31
  174. package/components/Slider/slider.scss +54 -55
  175. package/components/Spinner/spinner.scss +4 -5
  176. package/components/Switch/switch.css +4 -10
  177. package/components/Switch/switch.scss +8 -17
  178. package/components/TabContent/tab-content.css +25 -25
  179. package/components/TabContent/tab-content.scss +28 -28
  180. package/components/Table/table-grid.css +434 -508
  181. package/components/Table/table-grid.scss +131 -150
  182. package/components/Table/table-scrollable.css +31 -34
  183. package/components/Table/table-scrollable.scss +44 -41
  184. package/components/Table/table-tree-view.css +287 -279
  185. package/components/Table/table-tree-view.scss +84 -84
  186. package/components/Table/table.css +316 -279
  187. package/components/Table/table.scss +346 -301
  188. package/components/Tabs/tabs.css +215 -240
  189. package/components/Tabs/tabs.scss +130 -162
  190. package/components/TextInputGroup/text-input-group.css +122 -64
  191. package/components/TextInputGroup/text-input-group.scss +144 -87
  192. package/components/Tile/tile.css +15 -15
  193. package/components/Tile/tile.scss +16 -17
  194. package/components/Timestamp/timestamp.css +13 -19
  195. package/components/Timestamp/timestamp.scss +16 -22
  196. package/components/Title/title.css +14 -13
  197. package/components/Title/title.scss +15 -15
  198. package/components/ToggleGroup/toggle-group.css +37 -37
  199. package/components/ToggleGroup/toggle-group.scss +38 -41
  200. package/components/Toolbar/toolbar.css +547 -1431
  201. package/components/Toolbar/toolbar.scss +159 -123
  202. package/components/Tooltip/tooltip.css +28 -27
  203. package/components/Tooltip/tooltip.scss +31 -30
  204. package/components/TreeView/tree-view.css +184 -184
  205. package/components/TreeView/tree-view.scss +133 -133
  206. package/components/Truncate/truncate.css +2 -2
  207. package/components/Truncate/truncate.scss +7 -8
  208. package/components/Wizard/wizard.css +190 -154
  209. package/components/Wizard/wizard.scss +211 -165
  210. package/components/_index.css +22381 -0
  211. package/components/_index.scss +82 -0
  212. package/docs/components/AboutModalBox/examples/AboutModalBox.md +3 -1
  213. package/docs/components/Accordion/examples/Accordion.md +1 -1
  214. package/docs/components/ActionList/examples/ActionList.md +64 -24
  215. package/docs/components/Alert/examples/Alert.md +116 -74
  216. package/docs/components/BackToTop/examples/BackToTop.md +1 -1
  217. package/docs/components/Badge/examples/Badge.md +6 -16
  218. package/docs/components/Banner/examples/Banner.md +16 -10
  219. package/docs/components/Brand/examples/Brand.md +2 -2
  220. package/docs/components/Breadcrumb/examples/Breadcrumb.md +19 -59
  221. package/docs/components/Button/examples/Button.md +537 -368
  222. package/docs/components/CalendarMonth/examples/CalendarMonth.md +24 -8
  223. package/docs/components/Card/examples/Card.md +372 -658
  224. package/docs/components/Check/examples/Check.md +10 -15
  225. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +92 -47
  226. package/docs/components/CodeBlock/examples/CodeBlock.md +51 -28
  227. package/docs/components/CodeEditor/examples/CodeEditor.md +41 -22
  228. package/docs/components/Content/examples/Content.md +600 -60
  229. package/docs/components/DataList/examples/DataList.md +291 -1028
  230. package/docs/components/DatePicker/examples/DatePicker.md +18 -6
  231. package/docs/components/DescriptionList/examples/DescriptionList.md +80 -55
  232. package/docs/components/Drawer/examples/Drawer.md +60 -21
  233. package/docs/components/DualListSelector/examples/DualListSelector.md +364 -996
  234. package/docs/components/EmptyState/examples/EmptyState.md +123 -53
  235. package/docs/components/ExpandableSection/examples/ExpandableSection.md +96 -91
  236. package/docs/components/FileUpload/examples/FileUpload.md +42 -14
  237. package/docs/components/Form/examples/Form.md +100 -26
  238. package/docs/components/Hint/examples/Hint.md +54 -164
  239. package/docs/components/InlineEdit/examples/InlineEdit.md +132 -45
  240. package/docs/components/InputGroup/examples/InputGroup.md +38 -62
  241. package/docs/components/JumpLinks/examples/JumpLinks.md +189 -72
  242. package/docs/components/Label/examples/Label.md +2577 -406
  243. package/docs/components/Login/examples/Login.md +372 -334
  244. package/docs/components/Masthead/examples/masthead.md +515 -484
  245. package/docs/components/Menu/examples/Menu.md +77 -138
  246. package/docs/components/MenuToggle/examples/MenuToggle.md +289 -39
  247. package/docs/components/ModalBox/examples/ModalBox.md +158 -100
  248. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +137 -97
  249. package/docs/components/Nav/examples/Navigation.css +2 -7
  250. package/docs/components/Nav/examples/Navigation.md +337 -270
  251. package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +515 -2076
  252. package/docs/components/NumberInput/examples/NumberInput.md +96 -48
  253. package/docs/components/OverflowMenu/examples/overflow-menu.css +4 -28
  254. package/docs/components/OverflowMenu/examples/overflow-menu.md +104 -159
  255. package/docs/components/Page/examples/Page.css +5 -9
  256. package/docs/components/Page/examples/Page.md +254 -181
  257. package/docs/components/Pagination/examples/Pagination.md +336 -756
  258. package/docs/components/Panel/examples/Panel.md +3 -2
  259. package/docs/components/Popover/examples/Popover.md +60 -15
  260. package/docs/components/ProgressStepper/examples/ProgressStepper.md +15 -15
  261. package/docs/components/Sidebar/examples/Sidebar.css +4 -2
  262. package/docs/components/Sidebar/examples/Sidebar.md +3 -3
  263. package/docs/components/Skeleton/examples/Skeleton.css +1 -1
  264. package/docs/components/SkipToContent/examples/SkipToContent.md +3 -1
  265. package/docs/components/Slider/examples/Slider.md +53 -45
  266. package/docs/components/Spinner/examples/Spinner.md +1 -1
  267. package/docs/components/Switch/examples/Switch.md +33 -148
  268. package/docs/components/Table/examples/Table.css +11 -6
  269. package/docs/components/Table/examples/Table.md +5302 -2464
  270. package/docs/components/Tabs/examples/Tabs.md +1267 -607
  271. package/docs/components/TextInputGroup/examples/TextInputGroup.css +8 -3
  272. package/docs/components/TextInputGroup/examples/TextInputGroup.md +469 -278
  273. package/docs/components/Tile/examples/Tile.css +5 -5
  274. package/docs/components/Timestamp/examples/Timestamp.md +7 -1
  275. package/docs/components/ToggleGroup/examples/toggle-group.md +1 -3
  276. package/docs/components/Toolbar/examples/Toolbar.css +50 -39
  277. package/docs/components/Toolbar/examples/Toolbar.md +1562 -1200
  278. package/docs/components/Tooltip/examples/Tooltip.css +1 -1
  279. package/docs/components/TreeView/examples/TreeView.md +627 -49
  280. package/docs/components/Truncate/examples/Truncate.css +1 -2
  281. package/docs/components/Wizard/examples/Wizard.md +1595 -126
  282. package/docs/demos/AboutModal/examples/AboutModal.md +191 -198
  283. package/docs/demos/Alert/examples/Alert.md +924 -909
  284. package/docs/demos/BackToTop/examples/BackToTop.md +318 -327
  285. package/docs/demos/Banner/examples/Banner.md +641 -659
  286. package/docs/demos/Button/examples/Button.md +8 -8
  287. package/docs/demos/Card/examples/Card.css +6 -6
  288. package/docs/demos/Card/examples/Card.md +419 -606
  289. package/docs/demos/CardView/examples/CardView.md +822 -1435
  290. package/docs/demos/Dashboard/examples/Dashboard.md +1308 -1442
  291. package/docs/demos/DataList/examples/DataList.md +3210 -3424
  292. package/docs/demos/DescriptionList/examples/DescriptionList.md +899 -937
  293. package/docs/demos/Drawer/examples/Drawer.md +1165 -1176
  294. package/docs/demos/Form/examples/BasicForms.md +153 -88
  295. package/docs/demos/JumpLinks/examples/JumpLinks.md +1710 -1602
  296. package/docs/demos/Masthead/examples/Masthead.md +1719 -1583
  297. package/docs/demos/Modal/examples/Modal.md +1231 -1235
  298. package/docs/demos/Nav/examples/Nav.md +1216 -1230
  299. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +1910 -4577
  300. package/docs/demos/Page/examples/Page.css +11 -0
  301. package/docs/demos/Page/examples/Page.md +3753 -2540
  302. package/docs/demos/Panel/Panel.md +88 -0
  303. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +9 -3
  304. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +16 -48
  305. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +5150 -6255
  306. package/docs/demos/Skeleton/examples/Skeleton.md +297 -304
  307. package/docs/demos/Table/examples/Table.md +14272 -15154
  308. package/docs/demos/Tabs/examples/Tabs.md +2821 -2891
  309. package/docs/demos/Toolbar/examples/Toolbar.css +10 -18
  310. package/docs/demos/Toolbar/examples/Toolbar.md +2487 -2663
  311. package/docs/demos/Wizard/examples/Wizard.md +3021 -2784
  312. package/docs/layouts/Bullseye/examples/Bullseye.css +4 -4
  313. package/docs/layouts/Flex/examples/Flex.css +4 -4
  314. package/docs/layouts/Flex/examples/Flex.md +50 -50
  315. package/docs/layouts/Gallery/examples/Gallery.css +4 -4
  316. package/docs/layouts/Gallery/examples/Gallery.md +6 -6
  317. package/docs/layouts/Grid/examples/Grid.css +3 -3
  318. package/docs/layouts/Grid/examples/Grid.md +33 -33
  319. package/docs/layouts/Level/examples/Level.css +5 -5
  320. package/docs/layouts/Split/examples/Split.css +4 -4
  321. package/docs/layouts/Stack/examples/Stack.css +5 -5
  322. package/docs/utilities/Accessibility/examples/Accessibility.md +2 -2
  323. package/docs/utilities/Alignment/examples/Alignment.css +6 -6
  324. package/docs/utilities/Alignment/examples/Alignment.md +5 -5
  325. package/docs/utilities/BackgroundColor/examples/BackgroundColor.md +7 -67
  326. package/docs/utilities/BoxShadow/examples/box-shadow.css +11 -11
  327. package/docs/utilities/BoxShadow/examples/box-shadow.md +15 -38
  328. package/docs/utilities/Display/examples/Display.css +3 -10
  329. package/docs/utilities/Display/examples/Display.md +21 -12
  330. package/docs/utilities/Flex/examples/Flex.css +7 -7
  331. package/docs/utilities/Flex/examples/Flex.md +82 -40
  332. package/docs/utilities/Float/examples/Float.css +5 -5
  333. package/docs/utilities/Float/examples/Float.md +6 -6
  334. package/docs/utilities/Sizing/examples/Sizing.css +6 -6
  335. package/docs/utilities/Sizing/examples/Sizing.md +60 -60
  336. package/docs/utilities/Spacing/examples/Spacing.css +3 -3
  337. package/docs/utilities/Spacing/examples/Spacing.md +37 -37
  338. package/docs/utilities/Text/examples/Text.md +78 -77
  339. package/icons/pficons.mjs +6 -0
  340. package/layouts/Bullseye/bullseye.css +4 -0
  341. package/layouts/Bullseye/bullseye.scss +5 -1
  342. package/layouts/Flex/flex.css +241 -237
  343. package/layouts/Flex/flex.scss +48 -44
  344. package/layouts/Gallery/gallery.css +15 -11
  345. package/layouts/Gallery/gallery.scss +9 -5
  346. package/layouts/Grid/grid.css +20 -16
  347. package/layouts/Grid/grid.scss +12 -8
  348. package/layouts/Level/level.css +5 -1
  349. package/layouts/Level/level.scss +6 -2
  350. package/layouts/Split/split.css +5 -1
  351. package/layouts/Split/split.scss +6 -2
  352. package/layouts/Stack/stack.css +5 -1
  353. package/layouts/Stack/stack.scss +6 -2
  354. package/layouts/_index.css +3461 -0
  355. package/layouts/_index.scss +8 -0
  356. package/package.json +39 -39
  357. package/patternfly-addons.css +2071 -2648
  358. package/patternfly-addons.scss +2 -12
  359. package/patternfly-base-no-globals.css +4227 -3064
  360. package/patternfly-base-no-globals.scss +5 -3
  361. package/patternfly-base.css +4307 -3140
  362. package/patternfly-base.scss +2 -6
  363. package/patternfly-charts.css +579 -240
  364. package/patternfly-charts.scss +352 -337
  365. package/patternfly-no-globals.css +21105 -23238
  366. package/patternfly-no-globals.scss +5 -4
  367. package/patternfly.css +21209 -23338
  368. package/patternfly.min.css +1 -1
  369. package/patternfly.min.css.map +1 -1
  370. package/patternfly.scss +6 -4
  371. package/sass-utilities/_index.scss +6 -0
  372. package/sass-utilities/functions.scss +25 -25
  373. package/sass-utilities/{_init.scss → init.scss} +6 -6
  374. package/sass-utilities/mixins.scss +108 -72
  375. package/sass-utilities/{component-namespaces.scss → namespaces-components.scss} +3 -27
  376. package/sass-utilities/{layout-namespaces.scss → namespaces-layouts.scss} +3 -1
  377. package/sass-utilities/scss-variables.scss +48 -261
  378. package/utilities/Accessibility/accessibility.css +15 -15
  379. package/utilities/Accessibility/accessibility.scss +8 -6
  380. package/utilities/Alignment/alignment.css +29 -29
  381. package/utilities/Alignment/alignment.scss +6 -4
  382. package/utilities/BackgroundColor/background-color.css +67 -0
  383. package/utilities/BackgroundColor/background-color.scss +16 -0
  384. package/utilities/BoxShadow/box-shadow.css +15 -39
  385. package/utilities/BoxShadow/box-shadow.scss +19 -28
  386. package/utilities/Display/display.css +43 -5
  387. package/utilities/Display/display.scss +7 -4
  388. package/utilities/Flex/flex.css +50 -50
  389. package/utilities/Flex/flex.scss +21 -20
  390. package/utilities/Float/float.css +29 -29
  391. package/utilities/Float/float.scss +6 -6
  392. package/utilities/Sizing/sizing.css +58 -58
  393. package/utilities/Sizing/sizing.scss +23 -21
  394. package/utilities/Spacing/spacing.css +1372 -1372
  395. package/utilities/Spacing/spacing.scss +6 -6
  396. package/utilities/Text/text.css +419 -662
  397. package/utilities/Text/text.scss +81 -107
  398. package/utilities/_index.css +7815 -0
  399. package/utilities/_index.scss +10 -0
  400. package/assets/fontawesome/_core.scss +0 -20
  401. package/assets/images/pf-logo-small.svg +0 -23
  402. package/assets/images/pf_logo_white.hbs +0 -35
  403. package/assets/images/pfbg-icon.svg +0 -1
  404. package/assets/pficon/pf-v5-pficon.woff2 +0 -0
  405. package/base/_base.scss +0 -2
  406. package/base/_chart-globals.scss +0 -415
  407. package/base/_common.scss +0 -50
  408. package/base/_fa-icons.scss +0 -33
  409. package/base/_fonts.scss +0 -136
  410. package/base/_icons.scss +0 -3
  411. package/base/_pficons.scss +0 -2
  412. package/base/_themes.scss +0 -43
  413. package/base/_variables.scss +0 -299
  414. package/base/patternfly-globals.css +0 -120
  415. package/base/patternfly-globals.scss +0 -2
  416. package/base/patternfly-icons.css +0 -4728
  417. package/base/patternfly-icons.scss +0 -2
  418. package/base/patternfly-themes.css +0 -82
  419. package/base/patternfly-themes.scss +0 -2
  420. package/base/themes/dark/_chart-globals.scss +0 -42
  421. package/base/themes/dark/_globals.scss +0 -5
  422. package/base/tokens/_workspace-overrides.scss +0 -7
  423. package/components/AppLauncher/app-launcher.css +0 -244
  424. package/components/AppLauncher/app-launcher.scss +0 -308
  425. package/components/AppLauncher/themes/dark/app-launcher.scss +0 -13
  426. package/components/Chip/chip-group.css +0 -93
  427. package/components/Chip/chip-group.scss +0 -98
  428. package/components/Chip/chip.css +0 -122
  429. package/components/Chip/chip.scss +0 -140
  430. package/components/Chip/themes/dark/chip.scss +0 -9
  431. package/components/ContextSelector/context-selector.css +0 -336
  432. package/components/ContextSelector/context-selector.scss +0 -384
  433. package/components/ContextSelector/themes/dark/context-selector.scss +0 -24
  434. package/components/Dropdown/dropdown.css +0 -686
  435. package/components/Dropdown/dropdown.scss +0 -820
  436. package/components/Dropdown/themes/dark/dropdown.scss +0 -32
  437. package/components/LogViewer/log-viewer.css +0 -197
  438. package/components/LogViewer/log-viewer.scss +0 -226
  439. package/components/LogViewer/themes/dark/log-viewer.scss +0 -7
  440. package/components/NotificationBadge/notification-badge.css +0 -87
  441. package/components/NotificationBadge/notification-badge.scss +0 -108
  442. package/components/OptionsMenu/options-menu.css +0 -279
  443. package/components/OptionsMenu/options-menu.scss +0 -332
  444. package/components/OptionsMenu/themes/dark/options-menu.scss +0 -21
  445. package/components/Select/select.css +0 -599
  446. package/components/Select/select.scss +0 -713
  447. package/components/Select/themes/dark/select.scss +0 -23
  448. package/components/_all.scss +0 -91
  449. package/docs/components/AppLauncher/deprecated/application-launcher.css +0 -25
  450. package/docs/components/AppLauncher/deprecated/application-launcher.md +0 -792
  451. package/docs/components/Breadcrumb/examples/Breadcrumb.css +0 -3
  452. package/docs/components/Chip/examples/Chip.md +0 -846
  453. package/docs/components/ContextSelector/deprecated/context-selector.css +0 -7
  454. package/docs/components/ContextSelector/deprecated/context-selector.md +0 -909
  455. package/docs/components/Dropdown/deprecated/Dropdown.css +0 -64
  456. package/docs/components/Dropdown/deprecated/Dropdown.md +0 -2920
  457. package/docs/components/LogViewer/examples/LogViewer.css +0 -17
  458. package/docs/components/LogViewer/examples/LogViewer.md +0 -5936
  459. package/docs/components/NotificationBadge/examples/NotificationBadge.md +0 -222
  460. package/docs/components/OptionsMenu/deprecated/options-menu.css +0 -25
  461. package/docs/components/OptionsMenu/deprecated/options-menu.md +0 -1014
  462. package/docs/components/Page/deprecated/PageHeader.css +0 -17
  463. package/docs/components/Page/deprecated/PageHeader.md +0 -261
  464. package/docs/components/Pagination/examples/Pagination.css +0 -3
  465. package/docs/components/Select/deprecated/Select.css +0 -56
  466. package/docs/components/Select/deprecated/Select.md +0 -3525
  467. package/docs/components/Tabs/examples/Tabs.css +0 -10
  468. package/docs/components/ToggleGroup/examples/toggle-group.css +0 -4
  469. package/docs/demos/ContextSelector/examples/ContextSelector.md +0 -1712
  470. package/docs/demos/Page/examples/Penta.md +0 -821
  471. package/docs/utilities/Text/examples/Text.css +0 -0
  472. package/layouts/_all.scss +0 -7
  473. package/patternfly-base-no-globals-theme-dark-unversioned.css +0 -6276
  474. package/patternfly-base-no-globals-theme-dark-unversioned.scss +0 -11
  475. package/patternfly-base-theme-dark-unversioned.css +0 -6393
  476. package/patternfly-base-theme-dark-unversioned.scss +0 -5
  477. package/patternfly-charts-theme-dark-unversioned.css +0 -70
  478. package/patternfly-charts-theme-dark-unversioned.scss +0 -8
  479. package/patternfly-charts-theme-dark.css +0 -70
  480. package/patternfly-charts-theme-dark.scss +0 -8
  481. package/patternfly-theme-dark-unversioned.css +0 -35533
  482. package/patternfly-theme-dark-unversioned.scss +0 -6
  483. package/patternfly-theme-dark.css +0 -0
  484. package/patternfly-theme-dark.scss +0 -1
  485. package/sass-utilities/_all.scss +0 -9
  486. package/sass-utilities/colors.scss +0 -82
  487. package/sass-utilities/div.import.scss +0 -3
  488. package/sass-utilities/div.scss +0 -4
  489. package/sass-utilities/placeholders.scss +0 -72
  490. package/sass-utilities/themes/dark/_all.scss +0 -4
  491. package/sass-utilities/themes/dark/colors.scss +0 -16
  492. package/sass-utilities/themes/dark/mixins.scss +0 -7
  493. package/sass-utilities/themes/dark/placeholders.scss +0 -5
  494. package/sass-utilities/themes/dark/scss-variables.scss +0 -92
  495. package/themes/dark/_patternfly-charts-theme-dark.scss +0 -98
  496. package/utilities/BackgroundColor/BackgroundColor.css +0 -414
  497. package/utilities/BackgroundColor/BackgroundColor.scss +0 -64
  498. package/utilities/BackgroundColor/themes/dark/BackgroundColor.css +0 -0
  499. package/utilities/BackgroundColor/themes/dark/BackgroundColor.scss +0 -25
  500. package/utilities/Text/themes/dark/text.css +0 -0
  501. package/utilities/Text/themes/dark/text.scss +0 -33
package/docs/components/Toolbar/examples/Toolbar.md CHANGED
@@ -6,14 +6,16 @@ cssPrefix: pf-v6-c-toolbar
6
6
 
7
7
  <!-- TODO: add documentation for resize observer/responsive variable usage -->
8
8
 
9
- Toolbar relies on groups (`.pf-v6-c-toolbar__group`) and items (`.pf-v6-c-toolbar__item`), with default col/row gap values. Groups and items can be siblings and/or items can be nested within groups. Modifier selectors adjust spacing based on the type of group. The default `column-gap` value for items and groups is set to `--pf-v6-c--ColumnGap`, whose value is `--pf-t--global--spacer--sm` or 8px.
9
+ Toolbar relies on groups (`.pf-v6-c-toolbar__group`) and items (`.pf-v6-c-toolbar__item`), with default col/row gap values. Groups and items can be siblings and/or items can be nested within groups. Modifier selectors adjust spacing based on the type of group. The default `column-gap` value for items and groups is set to `--pf-v6-c--ColumnGap`, whose value is `--pf-t--global--spacer--md` or 16px. The default `row-gap` value for items and groups is set to `--pf-v6-c--RowGap`, whose value is `--pf-t--global--spacer--sm` or 8px.
10
10
 
11
11
  ### Default spacing for items and groups:
12
12
 
13
13
  | Class | CSS Variable | Computed Value |
14
14
  | -- | -- | -- |
15
- | `.pf-v6-c-toolbar__group` | `--pf-v6-c-toolbar__group--ColumnGap` | `8px` |
16
- | `.pf-v6-c-toolbar__item` | `--pf-v6-c-toolbar__item--ColumnGap` | `8px` |
15
+ | `.pf-v6-c-toolbar__group` | `--pf-v6-c-toolbar__group--ColumnGap` | `16px` |
16
+ | `.pf-v6-c-toolbar__item` | `--pf-v6-c-toolbar__item--ColumnGap` | `16px` |
17
+ | `.pf-m-[column/row]-gap-[none/sm/md/lg/xl/2xl]{-on-[breakpoint]}` | `.pf-v6-c-toolbar__content-section`, `.pf-v6-c-toolbar__group`, `.pf-v6-c-toolbar__item` | Modifies toolbar group or item spacing at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
18
+ | `.pf-m-gap-[none/sm/md/lg/xl/2xl]{-on-[breakpoint]}` | `.pf-v6-c-toolbar__content-section`, `.pf-v6-c-toolbar__group`, `.pf-v6-c-toolbar__item` | Modifies both column gap and row gap for toolbar group or item spacing at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
17
19
 
18
20
  ### Toolbar item types
19
21
 
@@ -28,7 +30,7 @@ Toolbar relies on groups (`.pf-v6-c-toolbar__group`) and items (`.pf-v6-c-toolba
28
30
  | `.pf-m-[hidden/visible]` | `.pf-v6-c-toolbar > *` | Modifies toolbar element to be hidden/visible. |
29
31
  | `.pf-m-flex-grow` | `.pf-v6-c-toolbar__group`, `.pf-v6-c-toolbar__item` | Modifies toolbar element to `flex-grow: 1`, allowing it to consume available main-axis space. |
30
32
  | `.pf-m-align-[start/end]` | `.pf-v6-c-toolbar__group`, `.pf-v6-c-toolbar__item` | Modifies toolbar [main axis](https://developer.mozilla.org/en-US/docs/Glossary/Main_Axis) element alignment. |
31
- | `.pf-m-align-items-[stretch/baseline/start/center/end]` | `.pf-v6-c-toolbar__content`, `.pf-v6-c-toolbar__content-section`, `.pf-v6-c-toolbar__group`, `.pf-v6-c-toolbar__item` | Modifies toolbar element [cross axis](https://developer.mozilla.org/en-US/docs/Glossary/Cross_Axis) child alignment. |
33
+ | `.pf-m-align-items-[stretch/baseline/start/center/end]` | `.pf-v6-c-toolbar__content-section`, `.pf-v6-c-toolbar__group`, `.pf-v6-c-toolbar__item` | Modifies toolbar element [cross axis](https://developer.mozilla.org/en-US/docs/Glossary/Cross_Axis) child alignment. |
32
34
  | `.pf-m-align-self-[stretch/baseline/start/center/end]` | `.pf-v6-c-toolbar__group`, `.pf-v6-c-toolbar__item` | Modifies toolbar element [cross axis](https://developer.mozilla.org/en-US/docs/Glossary/Cross_Axis) self alignment. |
33
35
 
34
36
  ### Special notes
@@ -49,11 +51,13 @@ Several components in the following examples do not include functional and/or ac
49
51
  <div class="pf-v6-c-toolbar__item">Item</div>
50
52
  <div class="pf-v6-c-toolbar__item">Item</div>
51
53
  <hr class="pf-v6-c-divider pf-m-vertical" />
54
+
52
55
  <div class="pf-v6-c-toolbar__group">
53
56
  <div class="pf-v6-c-toolbar__item">Item</div>
54
57
  <div class="pf-v6-c-toolbar__item">Item</div>
55
58
  <div class="pf-v6-c-toolbar__item">Item</div>
56
59
  </div>
60
+
57
61
  <hr class="pf-v6-c-divider pf-m-vertical" />
58
62
  <div class="pf-v6-c-toolbar__item">Item</div>
59
63
  <div class="pf-v6-c-toolbar__item">Item</div>
@@ -81,7 +85,9 @@ Several components in the following examples do not include functional and/or ac
81
85
  <div class="pf-v6-c-toolbar__item">Item</div>
82
86
  <div class="pf-v6-c-toolbar__item">Item</div>
83
87
  </div>
88
+
84
89
  <hr class="pf-v6-c-divider pf-m-vertical" />
90
+
85
91
  <div
86
92
  class="pf-v6-c-toolbar__group pf-m-column-gap-none pf-m-column-gap-sm"
87
93
  >
@@ -104,25 +110,7 @@ Several components in the following examples do not include functional and/or ac
104
110
  <div class="pf-v6-c-toolbar__item">Item</div>
105
111
  <div class="pf-v6-c-toolbar__item">Item</div>
106
112
  </div>
107
- <hr class="pf-v6-c-divider pf-m-vertical" />
108
- <div class="pf-v6-c-toolbar__item">Item</div>
109
- <div class="pf-v6-c-toolbar__item">Item</div>
110
- </div>
111
- </div>
112
- </div>
113
-
114
- ```
115
-
116
- ### Page insets
117
113
 
118
- ```html
119
- <div class="pf-v6-c-toolbar pf-m-page-insets" id="toolbar-page-insets-example">
120
- <div class="pf-v6-c-toolbar__content">
121
- <div class="pf-v6-c-toolbar__content-section">
122
- <div class="pf-v6-c-toolbar__group">
123
- <div class="pf-v6-c-toolbar__item">Item</div>
124
- <div class="pf-v6-c-toolbar__item">Item</div>
125
- </div>
126
114
  <hr class="pf-v6-c-divider pf-m-vertical" />
127
115
  <div class="pf-v6-c-toolbar__item">Item</div>
128
116
  <div class="pf-v6-c-toolbar__item">Item</div>
@@ -152,6 +140,7 @@ Several components in the following examples do not include functional and/or ac
152
140
  >Item</div>
153
141
  <div class="pf-v6-c-toolbar__item">Item</div>
154
142
  </div>
143
+
155
144
  <hr class="pf-v6-c-divider pf-m-vertical" />
156
145
  <div class="pf-v6-c-toolbar__item">Item</div>
157
146
  <div class="pf-v6-c-toolbar__item">Item</div>
@@ -168,133 +157,423 @@ Several components in the following examples do not include functional and/or ac
168
157
  | `--pf-v6-c-toolbar__item--Width: {width}` | `.pf-v6-c-toolbar__item` | Modifies the width value of a toolbar item at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
169
158
  | `--pf-v6-c-toolbar__item--MinWidth: {width}` | `.pf-v6-c-toolbar__item` | Modifies the min width value of a toolbar item at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
170
159
 
171
- ### Group types
160
+ ## Group types
161
+
162
+ ### Filter group
172
163
 
173
164
  ```html
174
- <div class="pf-v6-c-toolbar" id="toolbar-group-types-example">
175
- <div class="pf-v6-c-toolbar__content">
176
- <div class="pf-v6-c-toolbar__content-section">
177
- <div class="pf-v6-c-toolbar__group pf-m-filter-group">
178
- <div class="pf-v6-c-toolbar__item">
179
- <button
180
- class="pf-v6-c-menu-toggle"
181
- type="button"
182
- aria-expanded="false"
183
- id="toolbar-group-types-example-toggle-1"
184
- >
185
- <span class="pf-v6-c-menu-toggle__text">Filter 1</span>
186
- <span class="pf-v6-c-menu-toggle__controls">
187
- <span class="pf-v6-c-menu-toggle__toggle-icon">
188
- <i class="fas fa-caret-down" aria-hidden="true"></i>
189
- </span>
190
- </span>
191
- </button>
192
- </div>
193
- <div class="pf-v6-c-toolbar__item">
194
- <button
195
- class="pf-v6-c-menu-toggle"
196
- type="button"
197
- aria-expanded="false"
198
- id="toolbar-group-types-example-toggle-2"
199
- >
200
- <span class="pf-v6-c-menu-toggle__text">Filter 2</span>
201
- <span class="pf-v6-c-menu-toggle__controls">
202
- <span class="pf-v6-c-menu-toggle__toggle-icon">
203
- <i class="fas fa-caret-down" aria-hidden="true"></i>
204
- </span>
205
- </span>
206
- </button>
207
- </div>
208
- <div class="pf-v6-c-toolbar__item">
209
- <button
210
- class="pf-v6-c-menu-toggle"
211
- type="button"
212
- aria-expanded="false"
213
- id="toolbar-group-types-example-toggle-3"
214
- >
215
- <span class="pf-v6-c-menu-toggle__text">Filter 3</span>
216
- <span class="pf-v6-c-menu-toggle__controls">
217
- <span class="pf-v6-c-menu-toggle__toggle-icon">
218
- <i class="fas fa-caret-down" aria-hidden="true"></i>
165
+ <h4 class="pf-v6-c-content--h4">Standard filters</h4>
166
+ <div class="pf-v6-c-toolbar" id="toolbar-group-types-standard-filter">
167
+ <div class="pf-v6-c-toolbar__group pf-m-filter-group">
168
+ <div class="pf-v6-c-toolbar__item">
169
+ <button
170
+ class="pf-v6-c-menu-toggle"
171
+ type="button"
172
+ aria-expanded="false"
173
+ id="toolbar-group-types-standard-filter-menu-toggle-checkbox-status"
174
+ >
175
+ <span class="pf-v6-c-menu-toggle__text">Status</span>
176
+ <span class="pf-v6-c-menu-toggle__controls">
177
+ <span class="pf-v6-c-menu-toggle__toggle-icon">
178
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
179
+ </span>
180
+ </span>
181
+ </button>
182
+ </div>
183
+ <div class="pf-v6-c-toolbar__item">
184
+ <button
185
+ class="pf-v6-c-menu-toggle"
186
+ type="button"
187
+ aria-expanded="false"
188
+ id="toolbar-group-types-standard-filter-menu-toggle-checkbox-risk"
189
+ >
190
+ <span class="pf-v6-c-menu-toggle__text">Risk</span>
191
+ <span class="pf-v6-c-menu-toggle__controls">
192
+ <span class="pf-v6-c-menu-toggle__toggle-icon">
193
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
194
+ </span>
195
+ </span>
196
+ </button>
197
+ </div>
198
+ </div>
199
+ </div>
200
+ <hr class="pf-v6-c-divider" />
201
+ <h4 class="pf-v6-c-content--h4">Input groups and filters</h4>
202
+ <div class="pf-v6-c-toolbar" id="toolbar-group-types-input-group-filter">
203
+ <div class="pf-v6-c-toolbar__group">
204
+ <div class="pf-v6-c-toolbar__item">
205
+ <div class="pf-v6-c-toolbar__item">
206
+ <div
207
+ class="pf-v6-c-input-group"
208
+ aria-label="search filter"
209
+ role="group"
210
+ >
211
+ <div class="pf-v6-c-input-group__item">
212
+ <button
213
+ class="pf-v6-c-menu-toggle"
214
+ type="button"
215
+ aria-expanded="false"
216
+ id="toolbar-group-types-input-group-filter-search-filter-menu"
217
+ >
218
+ <span class="pf-v6-c-menu-toggle__text">Name</span>
219
+ <span class="pf-v6-c-menu-toggle__controls">
220
+ <span class="pf-v6-c-menu-toggle__toggle-icon">
221
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
222
+ </span>
219
223
  </span>
220
- </span>
221
- </button>
222
- </div>
223
- </div>
224
- <div class="pf-v6-c-toolbar__group pf-m-icon-button-group">
225
- <div class="pf-v6-c-toolbar__item">
226
- <button
227
- class="pf-v6-c-button pf-m-plain"
228
- type="button"
229
- aria-label="Edit"
230
- >
231
- <i class="fas fa-edit" aria-hidden="true"></i>
232
- </button>
233
- </div>
234
- <div class="pf-v6-c-toolbar__item">
235
- <button
236
- class="pf-v6-c-button pf-m-plain"
237
- type="button"
238
- aria-label="Clone"
239
- >
240
- <i class="fas fa-clone" aria-hidden="true"></i>
241
- </button>
242
- </div>
243
- <div class="pf-v6-c-toolbar__item">
244
- <button
245
- class="pf-v6-c-button pf-m-plain"
246
- type="button"
247
- aria-label="Sync"
248
- >
249
- <i class="fas fa-sync" aria-hidden="true"></i>
250
- </button>
251
- </div>
252
- </div>
253
- <div class="pf-v6-c-toolbar__group pf-m-button-group">
254
- <div class="pf-v6-c-toolbar__item">
255
- <button class="pf-v6-c-button pf-m-primary" type="button">Action</button>
256
- </div>
257
- <div class="pf-v6-c-toolbar__item">
258
- <button class="pf-v6-c-button pf-m-secondary" type="button">Secondary</button>
259
- </div>
260
- <div class="pf-v6-c-toolbar__item">
261
- <button class="pf-v6-c-button pf-m-tertiary" type="button">Tertiary</button>
224
+ </button>
225
+ </div>
226
+ <div class="pf-v6-c-input-group__item pf-m-fill">
227
+ <div class="pf-v6-c-text-input-group">
228
+ <div class="pf-v6-c-text-input-group__main pf-m-icon">
229
+ <span class="pf-v6-c-text-input-group__text">
230
+ <span class="pf-v6-c-text-input-group__icon">
231
+ <i class="fas fa-fw fa-search"></i>
232
+ </span>
233
+ <input
234
+ class="pf-v6-c-text-input-group__text-input"
235
+ type="text"
236
+ placeholder="Find by name"
237
+ value
238
+ aria-label="Search input"
239
+ />
240
+ </span>
241
+ </div>
242
+ </div>
243
+ </div>
262
244
  </div>
263
245
  </div>
264
246
  </div>
247
+ <div class="pf-v6-c-toolbar__item">
248
+ <button
249
+ class="pf-v6-c-menu-toggle"
250
+ type="button"
251
+ aria-expanded="false"
252
+ id="toolbar-group-types-input-group-filter-menu-toggle-checkbox-status"
253
+ >
254
+ <span class="pf-v6-c-menu-toggle__text">Status</span>
255
+ <span class="pf-v6-c-menu-toggle__controls">
256
+ <span class="pf-v6-c-menu-toggle__toggle-icon">
257
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
258
+ </span>
259
+ </span>
260
+ </button>
261
+ </div>
265
262
  </div>
266
263
  </div>
267
264
 
268
265
  ```
269
266
 
270
- ### Toolbar group types
267
+ ### Action group
271
268
 
272
- | Class | Applied to | Outcome |
273
- | -- | -- | -- |
274
- | `.pf-m-filter-group` | `.pf-v6-c-toolbar__group` | Modifies toolbar group column gap. |
275
- | `.pf-m-icon-button-group` | `.pf-v6-c-toolbar__group` | Modifies toolbar group column gap. |
269
+ ```html
270
+ <div class="pf-v6-c-toolbar" id="toolbar-group-types-action">
271
+ <div class="pf-v6-c-toolbar__group pf-m-action-group">
272
+ <div class="pf-v6-c-toolbar__item">
273
+ <button class="pf-v6-c-button pf-m-primary" type="button">
274
+ <span class="pf-v6-c-button__text">Primary</span>
275
+ </button>
276
+ </div>
277
+ <div class="pf-v6-c-toolbar__item">
278
+ <button class="pf-v6-c-button pf-m-secondary" type="button">
279
+ <span class="pf-v6-c-button__text">Secondary</span>
280
+ </button>
281
+ </div>
282
+ <div class="pf-v6-c-toolbar__item">
283
+ <button class="pf-v6-c-button pf-m-tertiary" type="button">
284
+ <span class="pf-v6-c-button__text">Tertiary</span>
285
+ </button>
286
+ </div>
287
+ </div>
288
+ </div>
289
+
290
+ ```
291
+
292
+ ### Action group plain
293
+
294
+ ```html
295
+ <div class="pf-v6-c-toolbar" id="toolbar-group-types-plain">
296
+ <div class="pf-v6-c-toolbar__group pf-m-action-group-plain">
297
+ <div class="pf-v6-c-toolbar__item">
298
+ <button
299
+ class="pf-v6-c-button pf-m-plain"
300
+ type="button"
301
+ aria-label="Column view"
302
+ >
303
+ <span class="pf-v6-c-button__icon">
304
+ <i class="fas fa-columns" aria-hidden="true"></i>
305
+ </span>
306
+ </button>
307
+ </div>
308
+ <div class="pf-v6-c-toolbar__item">
309
+ <button
310
+ class="pf-v6-c-button pf-m-plain"
311
+ type="button"
312
+ aria-label="Expand"
313
+ >
314
+ <span class="pf-v6-c-button__icon">
315
+ <i class="fas fa-expand" aria-hidden="true"></i>
316
+ </span>
317
+ </button>
318
+ </div>
319
+ <div class="pf-v6-c-toolbar__item">
320
+ <button
321
+ class="pf-v6-c-button pf-m-plain"
322
+ type="button"
323
+ aria-label="Settings"
324
+ >
325
+ <span class="pf-v6-c-button__icon">
326
+ <i class="fas fa-cog" aria-hidden="true"></i>
327
+ </span>
328
+ </button>
329
+ </div>
330
+ </div>
331
+ </div>
332
+
333
+ ```
334
+
335
+ ### Action group inline
336
+
337
+ ```html
338
+ <div class="pf-v6-c-toolbar" id="toolbar-group-types-inline">
339
+ <div class="pf-v6-c-toolbar__group pf-m-action-group-inline">
340
+ <div class="pf-v6-c-toolbar__item">6 filters applied</div>
341
+ <div class="pf-v6-c-toolbar__item">
342
+ <button class="pf-v6-c-button pf-m-inline pf-m-link" type="button">
343
+ <span class="pf-v6-c-button__text">Clear all filters</span>
344
+ </button>
345
+ </div>
346
+ <div class="pf-v6-c-toolbar__item">
347
+ <button class="pf-v6-c-button pf-m-inline pf-m-link" type="button">
348
+ <span class="pf-v6-c-button__text">Save all filters</span>
349
+ </button>
350
+ </div>
351
+ </div>
352
+ </div>
353
+
354
+ ```
355
+
356
+ ### Label group
357
+
358
+ ```html
359
+ <div class="pf-v6-c-toolbar" id="toolbar-group-label-group">
360
+ <div class="pf-v6-c-toolbar__content">
361
+ <div class="pf-v6-c-toolbar__content-section">
362
+ <div class="pf-v6-c-toolbar__group pf-m-label-group">
363
+ <div class="pf-v6-c-toolbar__group pf-m-grow pf-m-label-group">
364
+ <div class="pf-v6-c-toolbar__item">
365
+ <div class="pf-v6-c-label-group pf-m-category">
366
+ <div class="pf-v6-c-label-group__main">
367
+ <span
368
+ class="pf-v6-c-label-group__label"
369
+ aria-hidden="true"
370
+ id="toolbar-group-label-group-label-group-status-label-group-label"
371
+ >Status</span>
372
+ <ul
373
+ class="pf-v6-c-label-group__list"
374
+ role="list"
375
+ aria-labelledby="toolbar-group-label-group-label-group-status-label-group-label"
376
+ >
377
+ <li class="pf-v6-c-label-group__list-item">
378
+ <span class="pf-v6-c-label pf-m-outline">
379
+ <span class="pf-v6-c-label__content">
380
+ <span class="pf-v6-c-label__content">
381
+ <span
382
+ class="pf-v6-c-label__text"
383
+ id="toolbar-group-label-group-label-group-statuslabel-one"
384
+ >Label one</span>
385
+ </span>
386
+ <span class="pf-v6-c-label__actions">
387
+ <button
388
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
389
+ type="button"
390
+ aria-labelledby="toolbar-group-label-group-label-group-statusremove-label-one toolbar-group-label-group-label-group-statuslabel-one"
391
+ aria-label="Remove"
392
+ id="toolbar-group-label-group-label-group-statusremove-label-one"
393
+ >
394
+ <span class="pf-v6-c-button__icon">
395
+ <i class="fas fa-times" aria-hidden="true"></i>
396
+ </span>
397
+ </button>
398
+ </span>
399
+ </span>
400
+ </span>
401
+ </li>
402
+ <li class="pf-v6-c-label-group__list-item">
403
+ <span class="pf-v6-c-label pf-m-outline">
404
+ <span class="pf-v6-c-label__content">
405
+ <span class="pf-v6-c-label__content">
406
+ <span
407
+ class="pf-v6-c-label__text"
408
+ id="toolbar-group-label-group-label-group-statuslabel-two"
409
+ >Label two</span>
410
+ </span>
411
+ <span class="pf-v6-c-label__actions">
412
+ <button
413
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
414
+ type="button"
415
+ aria-labelledby="toolbar-group-label-group-label-group-statusremove-label-two toolbar-group-label-group-label-group-statuslabel-two"
416
+ aria-label="Remove"
417
+ id="toolbar-group-label-group-label-group-statusremove-label-two"
418
+ >
419
+ <span class="pf-v6-c-button__icon">
420
+ <i class="fas fa-times" aria-hidden="true"></i>
421
+ </span>
422
+ </button>
423
+ </span>
424
+ </span>
425
+ </span>
426
+ </li>
427
+ <li class="pf-v6-c-label-group__list-item">
428
+ <span class="pf-v6-c-label pf-m-outline">
429
+ <span class="pf-v6-c-label__content">
430
+ <span class="pf-v6-c-label__content">
431
+ <span
432
+ class="pf-v6-c-label__text"
433
+ id="toolbar-group-label-group-label-group-statuslabel-three"
434
+ >Label three</span>
435
+ </span>
436
+ <span class="pf-v6-c-label__actions">
437
+ <button
438
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
439
+ type="button"
440
+ aria-labelledby="toolbar-group-label-group-label-group-statusremove-label-three toolbar-group-label-group-label-group-statuslabel-three"
441
+ aria-label="Remove"
442
+ id="toolbar-group-label-group-label-group-statusremove-label-three"
443
+ >
444
+ <span class="pf-v6-c-button__icon">
445
+ <i class="fas fa-times" aria-hidden="true"></i>
446
+ </span>
447
+ </button>
448
+ </span>
449
+ </span>
450
+ </span>
451
+ </li>
452
+ </ul>
453
+ </div>
454
+ </div>
455
+ </div>
456
+ <div class="pf-v6-c-toolbar__item">
457
+ <div class="pf-v6-c-label-group pf-m-category">
458
+ <div class="pf-v6-c-label-group__main">
459
+ <span
460
+ class="pf-v6-c-label-group__label"
461
+ aria-hidden="true"
462
+ id="toolbar-group-label-group-label-group-risk-label-group-label"
463
+ >Risk</span>
464
+ <ul
465
+ class="pf-v6-c-label-group__list"
466
+ role="list"
467
+ aria-labelledby="toolbar-group-label-group-label-group-risk-label-group-label"
468
+ >
469
+ <li class="pf-v6-c-label-group__list-item">
470
+ <span class="pf-v6-c-label pf-m-outline">
471
+ <span class="pf-v6-c-label__content">
472
+ <span class="pf-v6-c-label__content">
473
+ <span
474
+ class="pf-v6-c-label__text"
475
+ id="toolbar-group-label-group-label-group-risklabel-one"
476
+ >Label one</span>
477
+ </span>
478
+ <span class="pf-v6-c-label__actions">
479
+ <button
480
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
481
+ type="button"
482
+ aria-labelledby="toolbar-group-label-group-label-group-riskremove-label-one toolbar-group-label-group-label-group-risklabel-one"
483
+ aria-label="Remove"
484
+ id="toolbar-group-label-group-label-group-riskremove-label-one"
485
+ >
486
+ <span class="pf-v6-c-button__icon">
487
+ <i class="fas fa-times" aria-hidden="true"></i>
488
+ </span>
489
+ </button>
490
+ </span>
491
+ </span>
492
+ </span>
493
+ </li>
494
+ <li class="pf-v6-c-label-group__list-item">
495
+ <span class="pf-v6-c-label pf-m-outline">
496
+ <span class="pf-v6-c-label__content">
497
+ <span class="pf-v6-c-label__content">
498
+ <span
499
+ class="pf-v6-c-label__text"
500
+ id="toolbar-group-label-group-label-group-risklabel-two"
501
+ >Label two</span>
502
+ </span>
503
+ <span class="pf-v6-c-label__actions">
504
+ <button
505
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
506
+ type="button"
507
+ aria-labelledby="toolbar-group-label-group-label-group-riskremove-label-two toolbar-group-label-group-label-group-risklabel-two"
508
+ aria-label="Remove"
509
+ id="toolbar-group-label-group-label-group-riskremove-label-two"
510
+ >
511
+ <span class="pf-v6-c-button__icon">
512
+ <i class="fas fa-times" aria-hidden="true"></i>
513
+ </span>
514
+ </button>
515
+ </span>
516
+ </span>
517
+ </span>
518
+ </li>
519
+ <li class="pf-v6-c-label-group__list-item">
520
+ <span class="pf-v6-c-label pf-m-outline">
521
+ <span class="pf-v6-c-label__content">
522
+ <span class="pf-v6-c-label__content">
523
+ <span
524
+ class="pf-v6-c-label__text"
525
+ id="toolbar-group-label-group-label-group-risklabel-three"
526
+ >Label three</span>
527
+ </span>
528
+ <span class="pf-v6-c-label__actions">
529
+ <button
530
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
531
+ type="button"
532
+ aria-labelledby="toolbar-group-label-group-label-group-riskremove-label-three toolbar-group-label-group-label-group-risklabel-three"
533
+ aria-label="Remove"
534
+ id="toolbar-group-label-group-label-group-riskremove-label-three"
535
+ >
536
+ <span class="pf-v6-c-button__icon">
537
+ <i class="fas fa-times" aria-hidden="true"></i>
538
+ </span>
539
+ </button>
540
+ </span>
541
+ </span>
542
+ </span>
543
+ </li>
544
+ </ul>
545
+ </div>
546
+ </div>
547
+ </div>
548
+ </div>
549
+ </div>
550
+ </div>
551
+ </div>
552
+ </div>
553
+
554
+ ```
276
555
 
277
- ### Toggle group
556
+ ### Toggle group on mobile (filters collapsed, expandable content expanded)
278
557
 
279
558
  ```html
280
- <div class="pf-v6-c-toolbar" id="toolbar-toggle-group-example">
559
+ <div class="pf-v6-c-toolbar" id="toolbar-toggle-group-on-mobile">
281
560
  <div class="pf-v6-c-toolbar__content">
282
561
  <div class="pf-v6-c-toolbar__content-section">
283
- <div class="pf-v6-c-toolbar__group pf-m-toggle-group pf-m-show-on-lg">
284
- <div class="pf-v6-c-toolbar__toggle pf-m-show">
562
+ <div class="pf-v6-c-toolbar__group pf-m-toggle-group">
563
+ <div class="pf-v6-c-toolbar__toggle">
285
564
  <button
286
- class="pf-v6-c-menu-toggle pf-m-plain"
565
+ class="pf-v6-c-menu-toggle pf-m-plain pf-m-expanded"
287
566
  type="button"
288
- aria-expanded="false"
567
+ aria-expanded="true"
289
568
  aria-label="Show filters"
290
- aria-controls="toolbar-toggle-group-example-expandable-content"
569
+ aria-controls="toolbar-toggle-group-on-mobile-expandable-content"
291
570
  >
292
571
  <span class="pf-v6-c-menu-toggle__icon">
293
572
  <i class="fas fa-filter" aria-hidden="true"></i>
294
573
  </span>
295
574
  </button>
296
575
  </div>
297
- <div class="pf-v6-c-toolbar__item pf-m-search-filter">
576
+ <div class="pf-v6-c-toolbar__item">
298
577
  <div
299
578
  class="pf-v6-c-input-group"
300
579
  aria-label="search filter"
@@ -305,11 +584,8 @@ Several components in the following examples do not include functional and/or ac
305
584
  class="pf-v6-c-menu-toggle"
306
585
  type="button"
307
586
  aria-expanded="false"
308
- id="toolbar-toggle-group-example-search-filter-menu"
587
+ id="toolbar-toggle-group-on-mobile-search-filter-menu"
309
588
  >
310
- <span class="pf-v6-c-menu-toggle__icon">
311
- <i class="fas fa-filter" aria-hidden="true"></i>
312
- </span>
313
589
  <span class="pf-v6-c-menu-toggle__text">Name</span>
314
590
  <span class="pf-v6-c-menu-toggle__controls">
315
591
  <span class="pf-v6-c-menu-toggle__toggle-icon">
@@ -328,7 +604,7 @@ Several components in the following examples do not include functional and/or ac
328
604
  <input
329
605
  class="pf-v6-c-text-input-group__text-input"
330
606
  type="text"
331
- placeholder="Filter by name"
607
+ placeholder="Find by name"
332
608
  value
333
609
  aria-label="Search input"
334
610
  />
@@ -338,13 +614,14 @@ Several components in the following examples do not include functional and/or ac
338
614
  </div>
339
615
  </div>
340
616
  </div>
341
- <div class="pf-v6-c-toolbar__group pf-m-filter-group">
617
+
618
+ <div class="pf-v6-c-toolbar__group pf-m-filter-group pf-m-toggle-group">
342
619
  <div class="pf-v6-c-toolbar__item">
343
620
  <button
344
621
  class="pf-v6-c-menu-toggle"
345
622
  type="button"
346
623
  aria-expanded="false"
347
- id="toolbar-toggle-group-example-menu-toggle-checkbox-status"
624
+ id="toolbar-toggle-group-on-mobile-menu-toggle-checkbox-status"
348
625
  >
349
626
  <span class="pf-v6-c-menu-toggle__text">Status</span>
350
627
  <span class="pf-v6-c-menu-toggle__controls">
@@ -359,7 +636,7 @@ Several components in the following examples do not include functional and/or ac
359
636
  class="pf-v6-c-menu-toggle"
360
637
  type="button"
361
638
  aria-expanded="false"
362
- id="toolbar-toggle-group-example-menu-toggle-checkbox-risk"
639
+ id="toolbar-toggle-group-on-mobile-menu-toggle-checkbox-risk"
363
640
  >
364
641
  <span class="pf-v6-c-menu-toggle__text">Risk</span>
365
642
  <span class="pf-v6-c-menu-toggle__controls">
@@ -372,43 +649,12 @@ Several components in the following examples do not include functional and/or ac
372
649
  </div>
373
650
  </div>
374
651
  </div>
375
- <div
376
- class="pf-v6-c-toolbar__expandable-content pf-m-hidden"
377
- id="toolbar-toggle-group-example-expandable-content"
378
- hidden
379
- ></div>
380
- </div>
381
- </div>
382
-
383
- ```
384
-
385
- ### Toggle group on mobile (filters collapsed, expandable content expanded)
386
652
 
387
- ```html
388
- <div class="pf-v6-c-toolbar" id="toolbar-toggle-group-collapsed-example">
389
- <div class="pf-v6-c-toolbar__content">
390
- <div class="pf-v6-c-toolbar__content-section">
391
- <div class="pf-v6-c-toolbar__group pf-m-toggle-group">
392
- <div class="pf-v6-c-toolbar__toggle pf-m-show">
393
- <button
394
- class="pf-v6-c-menu-toggle pf-m-plain pf-m-expanded"
395
- type="button"
396
- aria-expanded="true"
397
- aria-label="Show filters"
398
- aria-controls="toolbar-toggle-group-collapsed-example-expandable-content"
399
- >
400
- <span class="pf-v6-c-menu-toggle__icon">
401
- <i class="fas fa-filter" aria-hidden="true"></i>
402
- </span>
403
- </button>
404
- </div>
405
- </div>
406
- </div>
407
653
  <div
408
654
  class="pf-v6-c-toolbar__expandable-content pf-m-expanded"
409
- id="toolbar-toggle-group-collapsed-example-expandable-content"
655
+ id="toolbar-toggle-group-on-mobile-expandable-content"
410
656
  >
411
- <div class="pf-v6-c-toolbar__item pf-m-search-filter">
657
+ <div class="pf-v6-c-toolbar__item">
412
658
  <div
413
659
  class="pf-v6-c-input-group"
414
660
  aria-label="search filter"
@@ -419,11 +665,8 @@ Several components in the following examples do not include functional and/or ac
419
665
  class="pf-v6-c-menu-toggle"
420
666
  type="button"
421
667
  aria-expanded="false"
422
- id="toolbar-toggle-group-collapsed-example-search-filter-menu"
668
+ id="toolbar-toggle-group-on-mobile-expandable-search-filter-menu"
423
669
  >
424
- <span class="pf-v6-c-menu-toggle__icon">
425
- <i class="fas fa-filter" aria-hidden="true"></i>
426
- </span>
427
670
  <span class="pf-v6-c-menu-toggle__text">Name</span>
428
671
  <span class="pf-v6-c-menu-toggle__controls">
429
672
  <span class="pf-v6-c-menu-toggle__toggle-icon">
@@ -442,7 +685,7 @@ Several components in the following examples do not include functional and/or ac
442
685
  <input
443
686
  class="pf-v6-c-text-input-group__text-input"
444
687
  type="text"
445
- placeholder="Filter by name"
688
+ placeholder="Find by name"
446
689
  value
447
690
  aria-label="Search input"
448
691
  />
@@ -452,13 +695,14 @@ Several components in the following examples do not include functional and/or ac
452
695
  </div>
453
696
  </div>
454
697
  </div>
698
+
455
699
  <div class="pf-v6-c-toolbar__group pf-m-filter-group">
456
700
  <div class="pf-v6-c-toolbar__item">
457
701
  <button
458
702
  class="pf-v6-c-menu-toggle"
459
703
  type="button"
460
704
  aria-expanded="false"
461
- id="toolbar-toggle-group-collapsed-example-menu-toggle-checkbox-status"
705
+ id="toolbar-toggle-group-on-mobile-menu-toggle-checkbox-status-expandable"
462
706
  >
463
707
  <span class="pf-v6-c-menu-toggle__text">Status</span>
464
708
  <span class="pf-v6-c-menu-toggle__controls">
@@ -473,7 +717,7 @@ Several components in the following examples do not include functional and/or ac
473
717
  class="pf-v6-c-menu-toggle"
474
718
  type="button"
475
719
  aria-expanded="false"
476
- id="toolbar-toggle-group-collapsed-example-menu-toggle-checkbox-risk"
720
+ id="toolbar-toggle-group-on-mobile-menu-toggle-checkbox-risk-expandable"
477
721
  >
478
722
  <span class="pf-v6-c-menu-toggle__text">Risk</span>
479
723
  <span class="pf-v6-c-menu-toggle__controls">
@@ -490,9 +734,199 @@ Several components in the following examples do not include functional and/or ac
490
734
 
491
735
  ```
492
736
 
493
- ### Toggle group modifier
737
+ ### Toggle group on desktop
494
738
 
495
- The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be hidden/shown. By default, all filters are hidden until the specified breakpoint is reached. `.pf-m-show-on-{md, lg, xl}` controls when filters are shown and when the toggle button is hidden.
739
+ ```html
740
+ <div class="pf-v6-c-toolbar" id="toolbar-toggle-group-desktop">
741
+ <div class="pf-v6-c-toolbar__content">
742
+ <div class="pf-v6-c-toolbar__content-section">
743
+ <div class="pf-v6-c-toolbar__group pf-m-show pf-m-toggle-group">
744
+ <div class="pf-v6-c-toolbar__toggle">
745
+ <button
746
+ class="pf-v6-c-menu-toggle pf-m-plain"
747
+ type="button"
748
+ aria-expanded="false"
749
+ aria-label="Show filters"
750
+ aria-controls="toolbar-toggle-group-desktop-expandable-content"
751
+ >
752
+ <span class="pf-v6-c-menu-toggle__icon">
753
+ <i class="fas fa-filter" aria-hidden="true"></i>
754
+ </span>
755
+ </button>
756
+ </div>
757
+ <div class="pf-v6-c-toolbar__item">
758
+ <div
759
+ class="pf-v6-c-input-group"
760
+ aria-label="search filter"
761
+ role="group"
762
+ >
763
+ <div class="pf-v6-c-input-group__item">
764
+ <button
765
+ class="pf-v6-c-menu-toggle"
766
+ type="button"
767
+ aria-expanded="false"
768
+ id="toolbar-toggle-group-desktop-search-filter-menu"
769
+ >
770
+ <span class="pf-v6-c-menu-toggle__text">Name</span>
771
+ <span class="pf-v6-c-menu-toggle__controls">
772
+ <span class="pf-v6-c-menu-toggle__toggle-icon">
773
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
774
+ </span>
775
+ </span>
776
+ </button>
777
+ </div>
778
+ <div class="pf-v6-c-input-group__item pf-m-fill">
779
+ <div class="pf-v6-c-text-input-group">
780
+ <div class="pf-v6-c-text-input-group__main pf-m-icon">
781
+ <span class="pf-v6-c-text-input-group__text">
782
+ <span class="pf-v6-c-text-input-group__icon">
783
+ <i class="fas fa-fw fa-search"></i>
784
+ </span>
785
+ <input
786
+ class="pf-v6-c-text-input-group__text-input"
787
+ type="text"
788
+ placeholder="Find by name"
789
+ value
790
+ aria-label="Search input"
791
+ />
792
+ </span>
793
+ </div>
794
+ </div>
795
+ </div>
796
+ </div>
797
+ </div>
798
+
799
+ <div
800
+ class="pf-v6-c-toolbar__group pf-m-show pf-m-filter-group pf-m-toggle-group"
801
+ >
802
+ <div class="pf-v6-c-toolbar__item">
803
+ <button
804
+ class="pf-v6-c-menu-toggle"
805
+ type="button"
806
+ aria-expanded="false"
807
+ id="toolbar-toggle-group-desktop-menu-toggle-checkbox-status"
808
+ >
809
+ <span class="pf-v6-c-menu-toggle__text">Status</span>
810
+ <span class="pf-v6-c-menu-toggle__controls">
811
+ <span class="pf-v6-c-menu-toggle__toggle-icon">
812
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
813
+ </span>
814
+ </span>
815
+ </button>
816
+ </div>
817
+ <div class="pf-v6-c-toolbar__item">
818
+ <button
819
+ class="pf-v6-c-menu-toggle"
820
+ type="button"
821
+ aria-expanded="false"
822
+ id="toolbar-toggle-group-desktop-menu-toggle-checkbox-risk"
823
+ >
824
+ <span class="pf-v6-c-menu-toggle__text">Risk</span>
825
+ <span class="pf-v6-c-menu-toggle__controls">
826
+ <span class="pf-v6-c-menu-toggle__toggle-icon">
827
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
828
+ </span>
829
+ </span>
830
+ </button>
831
+ </div>
832
+ </div>
833
+ </div>
834
+ </div>
835
+
836
+ <div
837
+ class="pf-v6-c-toolbar__expandable-content pf-m-hidden"
838
+ id="toolbar-toggle-group-desktop-expandable-content"
839
+ hidden
840
+ >
841
+ <div class="pf-v6-c-toolbar__item">
842
+ <div
843
+ class="pf-v6-c-input-group"
844
+ aria-label="search filter"
845
+ role="group"
846
+ >
847
+ <div class="pf-v6-c-input-group__item">
848
+ <button
849
+ class="pf-v6-c-menu-toggle"
850
+ type="button"
851
+ aria-expanded="false"
852
+ id="toolbar-toggle-group-desktop-expandable-search-filter-menu"
853
+ >
854
+ <span class="pf-v6-c-menu-toggle__text">Name</span>
855
+ <span class="pf-v6-c-menu-toggle__controls">
856
+ <span class="pf-v6-c-menu-toggle__toggle-icon">
857
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
858
+ </span>
859
+ </span>
860
+ </button>
861
+ </div>
862
+ <div class="pf-v6-c-input-group__item pf-m-fill">
863
+ <div class="pf-v6-c-text-input-group">
864
+ <div class="pf-v6-c-text-input-group__main pf-m-icon">
865
+ <span class="pf-v6-c-text-input-group__text">
866
+ <span class="pf-v6-c-text-input-group__icon">
867
+ <i class="fas fa-fw fa-search"></i>
868
+ </span>
869
+ <input
870
+ class="pf-v6-c-text-input-group__text-input"
871
+ type="text"
872
+ placeholder="Find by name"
873
+ value
874
+ aria-label="Search input"
875
+ />
876
+ </span>
877
+ </div>
878
+ </div>
879
+ </div>
880
+ </div>
881
+ </div>
882
+
883
+ <div class="pf-v6-c-toolbar__group pf-m-filter-group">
884
+ <div class="pf-v6-c-toolbar__item">
885
+ <button
886
+ class="pf-v6-c-menu-toggle"
887
+ type="button"
888
+ aria-expanded="false"
889
+ id="toolbar-toggle-group-desktop-menu-toggle-checkbox-status-expandable"
890
+ >
891
+ <span class="pf-v6-c-menu-toggle__text">Status</span>
892
+ <span class="pf-v6-c-menu-toggle__controls">
893
+ <span class="pf-v6-c-menu-toggle__toggle-icon">
894
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
895
+ </span>
896
+ </span>
897
+ </button>
898
+ </div>
899
+ <div class="pf-v6-c-toolbar__item">
900
+ <button
901
+ class="pf-v6-c-menu-toggle"
902
+ type="button"
903
+ aria-expanded="false"
904
+ id="toolbar-toggle-group-desktop-menu-toggle-checkbox-risk-expandable"
905
+ >
906
+ <span class="pf-v6-c-menu-toggle__text">Risk</span>
907
+ <span class="pf-v6-c-menu-toggle__controls">
908
+ <span class="pf-v6-c-menu-toggle__toggle-icon">
909
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
910
+ </span>
911
+ </span>
912
+ </button>
913
+ </div>
914
+ </div>
915
+ </div>
916
+ </div>
917
+ </div>
918
+
919
+ ```
920
+
921
+ ### Toolbar group types
922
+
923
+ | Class | Applied to | Outcome |
924
+ | -- | -- | -- |
925
+ | `.pf-m-filter-group` | `.pf-v6-c-toolbar__group` | Modifies toolbar group column gap. |
926
+ | `.pf-m-action-group` | `.pf-v6-c-toolbar__group` | Modifies toolbar group column gap for action group. |
927
+ | `.pf-m-action-group-plain` | `.pf-v6-c-toolbar__group` | Modifies toolbar group column gap for action plain group. |
928
+ | `.pf-m-action-group-inline` | `.pf-v6-c-toolbar__group` | Modifies toolbar group column gap for action inline group. |
929
+ | `.pf-m-toggle-group` | `.pf-v6-c-toolbar__group` | The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be hidden/shown. By default, all filters are hidden until the specified breakpoint is reached. `.pf-m-show-on-{md, lg, xl}` controls when filters are shown and when the toggle button is hidden. |
496
930
 
497
931
  ### Accessibility
498
932
 
@@ -513,8 +947,7 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
513
947
 
514
948
  | Class | Applied to | Outcome |
515
949
  | -- | -- | -- |
516
- | `.pf-m-[show/hide][-on-[sm/md/lg/xl/2xl]]` | `.pf-v6-c-toolbar__group.pf-m-toggle-group`, `.pf-v6-c-toolbar__expandable-content` | Modifies toolbar element visibility. |
517
- | `.pf-m-chip-container` | `.pf-v6-c-toolbar__content-section`, `.pf-v6-c-toolbar__group` | Modifies the toolbar element for applied filters layout. |
950
+ | `.pf-m-[show/hide][-on-[sm/md/lg/xl/2xl]]` | `.pf-v6-c-toolbar__group`, `.pf-v6-c-toolbar__item`, `.pf-v6-c-toolbar__expandable-content` | Modifies toolbar element visibility. |
518
951
  | `.pf-m-expanded` | `.pf-v6-c-toolbar__expandable-content`, `.pf-v6-c-toolbar__toggle` | Modifies the component for the expanded state. |
519
952
 
520
953
  ### Selected
@@ -535,7 +968,6 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
535
968
  >
536
969
  <label
537
970
  class="pf-v6-c-check pf-m-standalone"
538
- id="toolbar-selected-filters-toggle-group-collapsed-example-check-check"
539
971
  for="toolbar-selected-filters-toggle-group-collapsed-example-check-check-input"
540
972
  >
541
973
  <input
@@ -561,8 +993,9 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
561
993
  </button>
562
994
  </div>
563
995
  </div>
996
+
564
997
  <div class="pf-v6-c-toolbar__group pf-m-toggle-group">
565
- <div class="pf-v6-c-toolbar__toggle pf-m-show">
998
+ <div class="pf-v6-c-toolbar__toggle">
566
999
  <button
567
1000
  class="pf-v6-c-menu-toggle pf-m-plain"
568
1001
  type="button"
@@ -575,7 +1008,7 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
575
1008
  </span>
576
1009
  </button>
577
1010
  </div>
578
- <div class="pf-v6-c-toolbar__item pf-m-search-filter">
1011
+ <div class="pf-v6-c-toolbar__item">
579
1012
  <div
580
1013
  class="pf-v6-c-input-group"
581
1014
  aria-label="search filter"
@@ -588,9 +1021,6 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
588
1021
  aria-expanded="false"
589
1022
  id="toolbar-selected-filters-toggle-group-collapsed-example-search-filter-menu"
590
1023
  >
591
- <span class="pf-v6-c-menu-toggle__icon">
592
- <i class="fas fa-filter" aria-hidden="true"></i>
593
- </span>
594
1024
  <span class="pf-v6-c-menu-toggle__text">Name</span>
595
1025
  <span class="pf-v6-c-menu-toggle__controls">
596
1026
  <span class="pf-v6-c-menu-toggle__toggle-icon">
@@ -609,7 +1039,7 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
609
1039
  <input
610
1040
  class="pf-v6-c-text-input-group__text-input"
611
1041
  type="text"
612
- placeholder="Filter by name"
1042
+ placeholder="Find by name"
613
1043
  value
614
1044
  aria-label="Search input"
615
1045
  />
@@ -619,7 +1049,8 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
619
1049
  </div>
620
1050
  </div>
621
1051
  </div>
622
- <div class="pf-v6-c-toolbar__group pf-m-filter-group">
1052
+
1053
+ <div class="pf-v6-c-toolbar__group pf-m-filter-group pf-m-toggle-group">
623
1054
  <div class="pf-v6-c-toolbar__item">
624
1055
  <button
625
1056
  class="pf-v6-c-menu-toggle"
@@ -652,235 +1083,40 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
652
1083
  </div>
653
1084
  </div>
654
1085
  </div>
655
- <div class="pf-v6-c-toolbar__item pf-m-overflow-menu">
656
- <div
657
- class="pf-v6-c-overflow-menu"
658
- id="toolbar-selected-filters-toggle-group-collapsed-example-icon-button-overflow-menu"
659
- >
660
- <div class="pf-v6-c-overflow-menu__control">
661
- <div class="pf-v6-c-dropdown">
662
- <button
663
- class="pf-v6-c-button pf-v5-c-dropdown__toggle pf-m-plain"
664
- type="button"
665
- id="toolbar-selected-filters-toggle-group-collapsed-example-icon-button-overflow-menu-dropdown-toggle"
666
- aria-label="Overflow menu"
667
- aria-expanded="false"
668
- >
669
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
670
- </button>
671
- <ul
672
- class="pf-v6-c-dropdown__menu"
673
- role="menu"
674
- aria-labelledby="toolbar-selected-filters-toggle-group-collapsed-example-icon-button-overflow-menu-dropdown-toggle"
675
- hidden
676
- >
677
- <li role="none">
678
- <button
679
- role="menuitem"
680
- class="pf-v6-c-dropdown__menu-item"
681
- >Edit</button>
682
- </li>
683
- <li role="none">
684
- <button
685
- role="menuitem"
686
- class="pf-v6-c-dropdown__menu-item"
687
- >Clone</button>
688
- </li>
689
- <li role="none">
690
- <button
691
- role="menuitem"
692
- class="pf-v6-c-dropdown__menu-item"
693
- >Sync</button>
694
- </li>
695
- </ul>
696
- </div>
697
- </div>
698
- </div>
699
- </div>
700
1086
  </div>
1087
+
701
1088
  <div
702
1089
  class="pf-v6-c-toolbar__expandable-content pf-m-hidden"
703
1090
  id="toolbar-selected-filters-toggle-group-collapsed-example-expandable-content"
704
1091
  hidden
705
1092
  >
706
- <div class="pf-v6-c-toolbar__group pf-m-chip-container">
707
- <div class="pf-v6-c-toolbar__group pf-m-grow">
708
- <div class="pf-v6-c-toolbar__item">
709
- <div class="pf-v6-c-chip-group" role="group">
710
- <div class="pf-v6-c-chip-group__main">
711
- <span
712
- class="pf-v6-c-chip-group__label"
713
- id="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-status-chip-group-label"
714
- >Status</span>
715
- <ul
716
- class="pf-v6-c-chip-group__list"
717
- role="list"
718
- aria-labelledby="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-status-chip-group-label"
719
- >
720
- <li class="pf-v6-c-chip-group__list-item">
721
- <div class="pf-v6-c-chip">
722
- <span class="pf-v6-c-chip__content">
723
- <span
724
- class="pf-v6-c-chip__text"
725
- id="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-statuschip-one"
726
- >Chip one</span>
727
- </span>
728
- <span class="pf-v6-c-chip__actions">
729
- <button
730
- class="pf-v6-c-button pf-m-plain"
731
- type="button"
732
- aria-labelledby="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-statusremove-chip-one toolbar-selected-filters-toggle-group-collapsed-example-chip-group-statuschip-one"
733
- aria-label="Remove"
734
- id="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-statusremove-chip-one"
735
- >
736
- <i class="fas fa-times" aria-hidden="true"></i>
737
- </button>
738
- </span>
739
- </div>
740
- </li>
741
- <li class="pf-v6-c-chip-group__list-item">
742
- <div class="pf-v6-c-chip">
743
- <span class="pf-v6-c-chip__content">
744
- <span
745
- class="pf-v6-c-chip__text"
746
- id="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-statuschip-two"
747
- >Chip two</span>
748
- </span>
749
- <span class="pf-v6-c-chip__actions">
750
- <button
751
- class="pf-v6-c-button pf-m-plain"
752
- type="button"
753
- aria-labelledby="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-statusremove-chip-two toolbar-selected-filters-toggle-group-collapsed-example-chip-group-statuschip-two"
754
- aria-label="Remove"
755
- id="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-statusremove-chip-two"
756
- >
757
- <i class="fas fa-times" aria-hidden="true"></i>
758
- </button>
759
- </span>
760
- </div>
761
- </li>
762
- <li class="pf-v6-c-chip-group__list-item">
763
- <div class="pf-v6-c-chip">
764
- <span class="pf-v6-c-chip__content">
765
- <span
766
- class="pf-v6-c-chip__text"
767
- id="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-statuschip-three"
768
- >Chip three</span>
769
- </span>
770
- <span class="pf-v6-c-chip__actions">
771
- <button
772
- class="pf-v6-c-button pf-m-plain"
773
- type="button"
774
- aria-labelledby="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-statusremove-chip-three toolbar-selected-filters-toggle-group-collapsed-example-chip-group-statuschip-three"
775
- aria-label="Remove"
776
- id="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-statusremove-chip-three"
777
- >
778
- <i class="fas fa-times" aria-hidden="true"></i>
779
- </button>
780
- </span>
781
- </div>
782
- </li>
783
- </ul>
784
- </div>
785
- </div>
786
- </div>
787
- <div class="pf-v6-c-toolbar__item">
788
- <div class="pf-v6-c-chip-group" role="group">
789
- <div class="pf-v6-c-chip-group__main">
790
- <span
791
- class="pf-v6-c-chip-group__label"
792
- id="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-risk-chip-group-label"
793
- >Risk</span>
794
- <ul
795
- class="pf-v6-c-chip-group__list"
796
- role="list"
797
- aria-labelledby="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-risk-chip-group-label"
798
- >
799
- <li class="pf-v6-c-chip-group__list-item">
800
- <div class="pf-v6-c-chip">
801
- <span class="pf-v6-c-chip__content">
802
- <span
803
- class="pf-v6-c-chip__text"
804
- id="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-riskchip-one"
805
- >Chip one</span>
806
- </span>
807
- <span class="pf-v6-c-chip__actions">
808
- <button
809
- class="pf-v6-c-button pf-m-plain"
810
- type="button"
811
- aria-labelledby="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-riskremove-chip-one toolbar-selected-filters-toggle-group-collapsed-example-chip-group-riskchip-one"
812
- aria-label="Remove"
813
- id="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-riskremove-chip-one"
814
- >
815
- <i class="fas fa-times" aria-hidden="true"></i>
816
- </button>
817
- </span>
818
- </div>
819
- </li>
820
- <li class="pf-v6-c-chip-group__list-item">
821
- <div class="pf-v6-c-chip">
822
- <span class="pf-v6-c-chip__content">
823
- <span
824
- class="pf-v6-c-chip__text"
825
- id="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-riskchip-two"
826
- >Chip two</span>
827
- </span>
828
- <span class="pf-v6-c-chip__actions">
829
- <button
830
- class="pf-v6-c-button pf-m-plain"
831
- type="button"
832
- aria-labelledby="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-riskremove-chip-two toolbar-selected-filters-toggle-group-collapsed-example-chip-group-riskchip-two"
833
- aria-label="Remove"
834
- id="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-riskremove-chip-two"
835
- >
836
- <i class="fas fa-times" aria-hidden="true"></i>
837
- </button>
838
- </span>
839
- </div>
840
- </li>
841
- <li class="pf-v6-c-chip-group__list-item">
842
- <div class="pf-v6-c-chip">
843
- <span class="pf-v6-c-chip__content">
844
- <span
845
- class="pf-v6-c-chip__text"
846
- id="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-riskchip-three"
847
- >Chip three</span>
848
- </span>
849
- <span class="pf-v6-c-chip__actions">
850
- <button
851
- class="pf-v6-c-button pf-m-plain"
852
- type="button"
853
- aria-labelledby="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-riskremove-chip-three toolbar-selected-filters-toggle-group-collapsed-example-chip-group-riskchip-three"
854
- aria-label="Remove"
855
- id="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-riskremove-chip-three"
856
- >
857
- <i class="fas fa-times" aria-hidden="true"></i>
858
- </button>
859
- </span>
860
- </div>
861
- </li>
862
- </ul>
863
- </div>
864
- </div>
865
- </div>
1093
+ <div class="pf-v6-c-toolbar__group pf-m-action-group-inline">
1094
+ <div class="pf-v6-c-toolbar__item">6 filters applied</div>
1095
+ <div class="pf-v6-c-toolbar__item">
1096
+ <button class="pf-v6-c-button pf-m-inline pf-m-link" type="button">
1097
+ <span class="pf-v6-c-button__text">Clear all filters</span>
1098
+ </button>
866
1099
  </div>
867
1100
  <div class="pf-v6-c-toolbar__item">
868
- <button
869
- class="pf-v6-c-button pf-m-link pf-m-inline"
870
- type="button"
871
- >Clear all filters</button>
1101
+ <button class="pf-v6-c-button pf-m-inline pf-m-link" type="button">
1102
+ <span class="pf-v6-c-button__text">Save all filters</span>
1103
+ </button>
872
1104
  </div>
873
1105
  </div>
874
1106
  </div>
875
1107
  </div>
876
1108
  <div class="pf-v6-c-toolbar__content">
877
- <div class="pf-v6-c-toolbar__group">
1109
+ <div class="pf-v6-c-toolbar__group pf-m-action-group-inline">
878
1110
  <div class="pf-v6-c-toolbar__item">6 filters applied</div>
879
1111
  <div class="pf-v6-c-toolbar__item">
880
- <button
881
- class="pf-v6-c-button pf-m-link pf-m-inline"
882
- type="button"
883
- >Clear all filters</button>
1112
+ <button class="pf-v6-c-button pf-m-inline pf-m-link" type="button">
1113
+ <span class="pf-v6-c-button__text">Clear all filters</span>
1114
+ </button>
1115
+ </div>
1116
+ <div class="pf-v6-c-toolbar__item">
1117
+ <button class="pf-v6-c-button pf-m-inline pf-m-link" type="button">
1118
+ <span class="pf-v6-c-button__text">Save all filters</span>
1119
+ </button>
884
1120
  </div>
885
1121
  </div>
886
1122
  </div>
@@ -904,7 +1140,6 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
904
1140
  >
905
1141
  <label
906
1142
  class="pf-v6-c-check pf-m-standalone"
907
- id="toolbar-selected-filters-toggle-group-expanded-example-check-check"
908
1143
  for="toolbar-selected-filters-toggle-group-expanded-example-check-check-input"
909
1144
  >
910
1145
  <input
@@ -930,8 +1165,9 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
930
1165
  </button>
931
1166
  </div>
932
1167
  </div>
1168
+
933
1169
  <div class="pf-v6-c-toolbar__group pf-m-toggle-group">
934
- <div class="pf-v6-c-toolbar__toggle pf-m-show">
1170
+ <div class="pf-v6-c-toolbar__toggle">
935
1171
  <button
936
1172
  class="pf-v6-c-menu-toggle pf-m-plain pf-m-expanded"
937
1173
  type="button"
@@ -944,58 +1180,88 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
944
1180
  </span>
945
1181
  </button>
946
1182
  </div>
947
- </div>
948
- <div class="pf-v6-c-toolbar__item pf-m-overflow-menu">
949
- <div
950
- class="pf-v6-c-overflow-menu"
951
- id="toolbar-selected-filters-toggle-group-expanded-example-icon-button-overflow-menu"
952
- >
953
- <div class="pf-v6-c-overflow-menu__control">
954
- <div class="pf-v6-c-dropdown">
1183
+ <div class="pf-v6-c-toolbar__item">
1184
+ <div
1185
+ class="pf-v6-c-input-group"
1186
+ aria-label="search filter"
1187
+ role="group"
1188
+ >
1189
+ <div class="pf-v6-c-input-group__item">
955
1190
  <button
956
- class="pf-v6-c-button pf-v5-c-dropdown__toggle pf-m-plain"
1191
+ class="pf-v6-c-menu-toggle"
957
1192
  type="button"
958
- id="toolbar-selected-filters-toggle-group-expanded-example-icon-button-overflow-menu-dropdown-toggle"
959
- aria-label="Overflow menu"
960
1193
  aria-expanded="false"
1194
+ id="toolbar-selected-filters-toggle-group-expanded-example-search-filter-menu"
961
1195
  >
962
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1196
+ <span class="pf-v6-c-menu-toggle__text">Name</span>
1197
+ <span class="pf-v6-c-menu-toggle__controls">
1198
+ <span class="pf-v6-c-menu-toggle__toggle-icon">
1199
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
1200
+ </span>
1201
+ </span>
963
1202
  </button>
964
- <ul
965
- class="pf-v6-c-dropdown__menu"
966
- role="menu"
967
- aria-labelledby="toolbar-selected-filters-toggle-group-expanded-example-icon-button-overflow-menu-dropdown-toggle"
968
- hidden
969
- >
970
- <li role="none">
971
- <button
972
- role="menuitem"
973
- class="pf-v6-c-dropdown__menu-item"
974
- >Edit</button>
975
- </li>
976
- <li role="none">
977
- <button
978
- role="menuitem"
979
- class="pf-v6-c-dropdown__menu-item"
980
- >Clone</button>
981
- </li>
982
- <li role="none">
983
- <button
984
- role="menuitem"
985
- class="pf-v6-c-dropdown__menu-item"
986
- >Sync</button>
987
- </li>
988
- </ul>
989
1203
  </div>
1204
+ <div class="pf-v6-c-input-group__item pf-m-fill">
1205
+ <div class="pf-v6-c-text-input-group">
1206
+ <div class="pf-v6-c-text-input-group__main pf-m-icon">
1207
+ <span class="pf-v6-c-text-input-group__text">
1208
+ <span class="pf-v6-c-text-input-group__icon">
1209
+ <i class="fas fa-fw fa-search"></i>
1210
+ </span>
1211
+ <input
1212
+ class="pf-v6-c-text-input-group__text-input"
1213
+ type="text"
1214
+ placeholder="Find by name"
1215
+ value
1216
+ aria-label="Search input"
1217
+ />
1218
+ </span>
1219
+ </div>
1220
+ </div>
1221
+ </div>
1222
+ </div>
1223
+ </div>
1224
+
1225
+ <div class="pf-v6-c-toolbar__group pf-m-filter-group pf-m-toggle-group">
1226
+ <div class="pf-v6-c-toolbar__item">
1227
+ <button
1228
+ class="pf-v6-c-menu-toggle"
1229
+ type="button"
1230
+ aria-expanded="false"
1231
+ id="toolbar-selected-filters-toggle-group-expanded-example-menu-toggle-checkbox-status"
1232
+ >
1233
+ <span class="pf-v6-c-menu-toggle__text">Status</span>
1234
+ <span class="pf-v6-c-menu-toggle__controls">
1235
+ <span class="pf-v6-c-menu-toggle__toggle-icon">
1236
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
1237
+ </span>
1238
+ </span>
1239
+ </button>
1240
+ </div>
1241
+ <div class="pf-v6-c-toolbar__item">
1242
+ <button
1243
+ class="pf-v6-c-menu-toggle"
1244
+ type="button"
1245
+ aria-expanded="false"
1246
+ id="toolbar-selected-filters-toggle-group-expanded-example-menu-toggle-checkbox-risk"
1247
+ >
1248
+ <span class="pf-v6-c-menu-toggle__text">Risk</span>
1249
+ <span class="pf-v6-c-menu-toggle__controls">
1250
+ <span class="pf-v6-c-menu-toggle__toggle-icon">
1251
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
1252
+ </span>
1253
+ </span>
1254
+ </button>
990
1255
  </div>
991
1256
  </div>
992
1257
  </div>
993
1258
  </div>
1259
+
994
1260
  <div
995
1261
  class="pf-v6-c-toolbar__expandable-content pf-m-expanded"
996
1262
  id="toolbar-selected-filters-toggle-group-expanded-example-expandable-content"
997
1263
  >
998
- <div class="pf-v6-c-toolbar__item pf-m-search-filter">
1264
+ <div class="pf-v6-c-toolbar__item">
999
1265
  <div
1000
1266
  class="pf-v6-c-input-group"
1001
1267
  aria-label="search filter"
@@ -1006,11 +1272,8 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
1006
1272
  class="pf-v6-c-menu-toggle"
1007
1273
  type="button"
1008
1274
  aria-expanded="false"
1009
- id="toolbar-selected-filters-toggle-group-expanded-example-search-filter-menu"
1275
+ id="toolbar-selected-filters-toggle-group-expanded-example-expandable-search-filter-menu"
1010
1276
  >
1011
- <span class="pf-v6-c-menu-toggle__icon">
1012
- <i class="fas fa-filter" aria-hidden="true"></i>
1013
- </span>
1014
1277
  <span class="pf-v6-c-menu-toggle__text">Name</span>
1015
1278
  <span class="pf-v6-c-menu-toggle__controls">
1016
1279
  <span class="pf-v6-c-menu-toggle__toggle-icon">
@@ -1029,7 +1292,7 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
1029
1292
  <input
1030
1293
  class="pf-v6-c-text-input-group__text-input"
1031
1294
  type="text"
1032
- placeholder="Filter by name"
1295
+ placeholder="Find by name"
1033
1296
  value
1034
1297
  aria-label="Search input"
1035
1298
  />
@@ -1039,13 +1302,14 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
1039
1302
  </div>
1040
1303
  </div>
1041
1304
  </div>
1305
+
1042
1306
  <div class="pf-v6-c-toolbar__group pf-m-filter-group">
1043
1307
  <div class="pf-v6-c-toolbar__item">
1044
1308
  <button
1045
1309
  class="pf-v6-c-menu-toggle"
1046
1310
  type="button"
1047
1311
  aria-expanded="false"
1048
- id="toolbar-selected-filters-toggle-group-expanded-example-menu-toggle-checkbox-status"
1312
+ id="toolbar-selected-filters-toggle-group-expanded-example-menu-toggle-checkbox-status-expandable"
1049
1313
  >
1050
1314
  <span class="pf-v6-c-menu-toggle__text">Status</span>
1051
1315
  <span class="pf-v6-c-menu-toggle__controls">
@@ -1060,7 +1324,7 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
1060
1324
  class="pf-v6-c-menu-toggle"
1061
1325
  type="button"
1062
1326
  aria-expanded="false"
1063
- id="toolbar-selected-filters-toggle-group-expanded-example-menu-toggle-checkbox-risk"
1327
+ id="toolbar-selected-filters-toggle-group-expanded-example-menu-toggle-checkbox-risk-expandable"
1064
1328
  >
1065
1329
  <span class="pf-v6-c-menu-toggle__text">Risk</span>
1066
1330
  <span class="pf-v6-c-menu-toggle__controls">
@@ -1071,172 +1335,207 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
1071
1335
  </button>
1072
1336
  </div>
1073
1337
  </div>
1074
- <div class="pf-v6-c-toolbar__group pf-m-chip-container">
1075
- <div class="pf-v6-c-toolbar__group pf-m-grow">
1338
+
1339
+ <div class="pf-v6-c-toolbar__group pf-m-label-group">
1340
+ <div class="pf-v6-c-toolbar__group pf-m-grow pf-m-label-group">
1076
1341
  <div class="pf-v6-c-toolbar__item">
1077
- <div class="pf-v6-c-chip-group" role="group">
1078
- <div class="pf-v6-c-chip-group__main">
1342
+ <div class="pf-v6-c-label-group pf-m-category">
1343
+ <div class="pf-v6-c-label-group__main">
1079
1344
  <span
1080
- class="pf-v6-c-chip-group__label"
1081
- id="toolbar-selected-filters-toggle-group-expanded-example-chip-group-status-chip-group-label"
1345
+ class="pf-v6-c-label-group__label"
1346
+ aria-hidden="true"
1347
+ id="toolbar-selected-filters-toggle-group-expanded-example-label-group-status-label-group-label"
1082
1348
  >Status</span>
1083
1349
  <ul
1084
- class="pf-v6-c-chip-group__list"
1350
+ class="pf-v6-c-label-group__list"
1085
1351
  role="list"
1086
- aria-labelledby="toolbar-selected-filters-toggle-group-expanded-example-chip-group-status-chip-group-label"
1352
+ aria-labelledby="toolbar-selected-filters-toggle-group-expanded-example-label-group-status-label-group-label"
1087
1353
  >
1088
- <li class="pf-v6-c-chip-group__list-item">
1089
- <div class="pf-v6-c-chip">
1090
- <span class="pf-v6-c-chip__content">
1091
- <span
1092
- class="pf-v6-c-chip__text"
1093
- id="toolbar-selected-filters-toggle-group-expanded-example-chip-group-statuschip-one"
1094
- >Chip one</span>
1354
+ <li class="pf-v6-c-label-group__list-item">
1355
+ <span class="pf-v6-c-label pf-m-outline">
1356
+ <span class="pf-v6-c-label__content">
1357
+ <span class="pf-v6-c-label__content">
1358
+ <span
1359
+ class="pf-v6-c-label__text"
1360
+ id="toolbar-selected-filters-toggle-group-expanded-example-label-group-statuslabel-one"
1361
+ >Label one</span>
1362
+ </span>
1363
+ <span class="pf-v6-c-label__actions">
1364
+ <button
1365
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
1366
+ type="button"
1367
+ aria-labelledby="toolbar-selected-filters-toggle-group-expanded-example-label-group-statusremove-label-one toolbar-selected-filters-toggle-group-expanded-example-label-group-statuslabel-one"
1368
+ aria-label="Remove"
1369
+ id="toolbar-selected-filters-toggle-group-expanded-example-label-group-statusremove-label-one"
1370
+ >
1371
+ <span class="pf-v6-c-button__icon">
1372
+ <i class="fas fa-times" aria-hidden="true"></i>
1373
+ </span>
1374
+ </button>
1375
+ </span>
1095
1376
  </span>
1096
- <span class="pf-v6-c-chip__actions">
1097
- <button
1098
- class="pf-v6-c-button pf-m-plain"
1099
- type="button"
1100
- aria-labelledby="toolbar-selected-filters-toggle-group-expanded-example-chip-group-statusremove-chip-one toolbar-selected-filters-toggle-group-expanded-example-chip-group-statuschip-one"
1101
- aria-label="Remove"
1102
- id="toolbar-selected-filters-toggle-group-expanded-example-chip-group-statusremove-chip-one"
1103
- >
1104
- <i class="fas fa-times" aria-hidden="true"></i>
1105
- </button>
1106
- </span>
1107
- </div>
1377
+ </span>
1108
1378
  </li>
1109
- <li class="pf-v6-c-chip-group__list-item">
1110
- <div class="pf-v6-c-chip">
1111
- <span class="pf-v6-c-chip__content">
1112
- <span
1113
- class="pf-v6-c-chip__text"
1114
- id="toolbar-selected-filters-toggle-group-expanded-example-chip-group-statuschip-two"
1115
- >Chip two</span>
1379
+ <li class="pf-v6-c-label-group__list-item">
1380
+ <span class="pf-v6-c-label pf-m-outline">
1381
+ <span class="pf-v6-c-label__content">
1382
+ <span class="pf-v6-c-label__content">
1383
+ <span
1384
+ class="pf-v6-c-label__text"
1385
+ id="toolbar-selected-filters-toggle-group-expanded-example-label-group-statuslabel-two"
1386
+ >Label two</span>
1387
+ </span>
1388
+ <span class="pf-v6-c-label__actions">
1389
+ <button
1390
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
1391
+ type="button"
1392
+ aria-labelledby="toolbar-selected-filters-toggle-group-expanded-example-label-group-statusremove-label-two toolbar-selected-filters-toggle-group-expanded-example-label-group-statuslabel-two"
1393
+ aria-label="Remove"
1394
+ id="toolbar-selected-filters-toggle-group-expanded-example-label-group-statusremove-label-two"
1395
+ >
1396
+ <span class="pf-v6-c-button__icon">
1397
+ <i class="fas fa-times" aria-hidden="true"></i>
1398
+ </span>
1399
+ </button>
1400
+ </span>
1116
1401
  </span>
1117
- <span class="pf-v6-c-chip__actions">
1118
- <button
1119
- class="pf-v6-c-button pf-m-plain"
1120
- type="button"
1121
- aria-labelledby="toolbar-selected-filters-toggle-group-expanded-example-chip-group-statusremove-chip-two toolbar-selected-filters-toggle-group-expanded-example-chip-group-statuschip-two"
1122
- aria-label="Remove"
1123
- id="toolbar-selected-filters-toggle-group-expanded-example-chip-group-statusremove-chip-two"
1124
- >
1125
- <i class="fas fa-times" aria-hidden="true"></i>
1126
- </button>
1127
- </span>
1128
- </div>
1402
+ </span>
1129
1403
  </li>
1130
- <li class="pf-v6-c-chip-group__list-item">
1131
- <div class="pf-v6-c-chip">
1132
- <span class="pf-v6-c-chip__content">
1133
- <span
1134
- class="pf-v6-c-chip__text"
1135
- id="toolbar-selected-filters-toggle-group-expanded-example-chip-group-statuschip-three"
1136
- >Chip three</span>
1404
+ <li class="pf-v6-c-label-group__list-item">
1405
+ <span class="pf-v6-c-label pf-m-outline">
1406
+ <span class="pf-v6-c-label__content">
1407
+ <span class="pf-v6-c-label__content">
1408
+ <span
1409
+ class="pf-v6-c-label__text"
1410
+ id="toolbar-selected-filters-toggle-group-expanded-example-label-group-statuslabel-three"
1411
+ >Label three</span>
1412
+ </span>
1413
+ <span class="pf-v6-c-label__actions">
1414
+ <button
1415
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
1416
+ type="button"
1417
+ aria-labelledby="toolbar-selected-filters-toggle-group-expanded-example-label-group-statusremove-label-three toolbar-selected-filters-toggle-group-expanded-example-label-group-statuslabel-three"
1418
+ aria-label="Remove"
1419
+ id="toolbar-selected-filters-toggle-group-expanded-example-label-group-statusremove-label-three"
1420
+ >
1421
+ <span class="pf-v6-c-button__icon">
1422
+ <i class="fas fa-times" aria-hidden="true"></i>
1423
+ </span>
1424
+ </button>
1425
+ </span>
1137
1426
  </span>
1138
- <span class="pf-v6-c-chip__actions">
1139
- <button
1140
- class="pf-v6-c-button pf-m-plain"
1141
- type="button"
1142
- aria-labelledby="toolbar-selected-filters-toggle-group-expanded-example-chip-group-statusremove-chip-three toolbar-selected-filters-toggle-group-expanded-example-chip-group-statuschip-three"
1143
- aria-label="Remove"
1144
- id="toolbar-selected-filters-toggle-group-expanded-example-chip-group-statusremove-chip-three"
1145
- >
1146
- <i class="fas fa-times" aria-hidden="true"></i>
1147
- </button>
1148
- </span>
1149
- </div>
1427
+ </span>
1150
1428
  </li>
1151
1429
  </ul>
1152
1430
  </div>
1153
1431
  </div>
1154
1432
  </div>
1155
1433
  <div class="pf-v6-c-toolbar__item">
1156
- <div class="pf-v6-c-chip-group" role="group">
1157
- <div class="pf-v6-c-chip-group__main">
1434
+ <div class="pf-v6-c-label-group pf-m-category">
1435
+ <div class="pf-v6-c-label-group__main">
1158
1436
  <span
1159
- class="pf-v6-c-chip-group__label"
1160
- id="toolbar-selected-filters-toggle-group-expanded-example-chip-group-risk-chip-group-label"
1437
+ class="pf-v6-c-label-group__label"
1438
+ aria-hidden="true"
1439
+ id="toolbar-selected-filters-toggle-group-expanded-example-label-group-risk-label-group-label"
1161
1440
  >Risk</span>
1162
1441
  <ul
1163
- class="pf-v6-c-chip-group__list"
1442
+ class="pf-v6-c-label-group__list"
1164
1443
  role="list"
1165
- aria-labelledby="toolbar-selected-filters-toggle-group-expanded-example-chip-group-risk-chip-group-label"
1444
+ aria-labelledby="toolbar-selected-filters-toggle-group-expanded-example-label-group-risk-label-group-label"
1166
1445
  >
1167
- <li class="pf-v6-c-chip-group__list-item">
1168
- <div class="pf-v6-c-chip">
1169
- <span class="pf-v6-c-chip__content">
1170
- <span
1171
- class="pf-v6-c-chip__text"
1172
- id="toolbar-selected-filters-toggle-group-expanded-example-chip-group-riskchip-one"
1173
- >Chip one</span>
1446
+ <li class="pf-v6-c-label-group__list-item">
1447
+ <span class="pf-v6-c-label pf-m-outline">
1448
+ <span class="pf-v6-c-label__content">
1449
+ <span class="pf-v6-c-label__content">
1450
+ <span
1451
+ class="pf-v6-c-label__text"
1452
+ id="toolbar-selected-filters-toggle-group-expanded-example-label-group-risklabel-one"
1453
+ >Label one</span>
1454
+ </span>
1455
+ <span class="pf-v6-c-label__actions">
1456
+ <button
1457
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
1458
+ type="button"
1459
+ aria-labelledby="toolbar-selected-filters-toggle-group-expanded-example-label-group-riskremove-label-one toolbar-selected-filters-toggle-group-expanded-example-label-group-risklabel-one"
1460
+ aria-label="Remove"
1461
+ id="toolbar-selected-filters-toggle-group-expanded-example-label-group-riskremove-label-one"
1462
+ >
1463
+ <span class="pf-v6-c-button__icon">
1464
+ <i class="fas fa-times" aria-hidden="true"></i>
1465
+ </span>
1466
+ </button>
1467
+ </span>
1174
1468
  </span>
1175
- <span class="pf-v6-c-chip__actions">
1176
- <button
1177
- class="pf-v6-c-button pf-m-plain"
1178
- type="button"
1179
- aria-labelledby="toolbar-selected-filters-toggle-group-expanded-example-chip-group-riskremove-chip-one toolbar-selected-filters-toggle-group-expanded-example-chip-group-riskchip-one"
1180
- aria-label="Remove"
1181
- id="toolbar-selected-filters-toggle-group-expanded-example-chip-group-riskremove-chip-one"
1182
- >
1183
- <i class="fas fa-times" aria-hidden="true"></i>
1184
- </button>
1185
- </span>
1186
- </div>
1469
+ </span>
1187
1470
  </li>
1188
- <li class="pf-v6-c-chip-group__list-item">
1189
- <div class="pf-v6-c-chip">
1190
- <span class="pf-v6-c-chip__content">
1191
- <span
1192
- class="pf-v6-c-chip__text"
1193
- id="toolbar-selected-filters-toggle-group-expanded-example-chip-group-riskchip-two"
1194
- >Chip two</span>
1471
+ <li class="pf-v6-c-label-group__list-item">
1472
+ <span class="pf-v6-c-label pf-m-outline">
1473
+ <span class="pf-v6-c-label__content">
1474
+ <span class="pf-v6-c-label__content">
1475
+ <span
1476
+ class="pf-v6-c-label__text"
1477
+ id="toolbar-selected-filters-toggle-group-expanded-example-label-group-risklabel-two"
1478
+ >Label two</span>
1479
+ </span>
1480
+ <span class="pf-v6-c-label__actions">
1481
+ <button
1482
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
1483
+ type="button"
1484
+ aria-labelledby="toolbar-selected-filters-toggle-group-expanded-example-label-group-riskremove-label-two toolbar-selected-filters-toggle-group-expanded-example-label-group-risklabel-two"
1485
+ aria-label="Remove"
1486
+ id="toolbar-selected-filters-toggle-group-expanded-example-label-group-riskremove-label-two"
1487
+ >
1488
+ <span class="pf-v6-c-button__icon">
1489
+ <i class="fas fa-times" aria-hidden="true"></i>
1490
+ </span>
1491
+ </button>
1492
+ </span>
1195
1493
  </span>
1196
- <span class="pf-v6-c-chip__actions">
1197
- <button
1198
- class="pf-v6-c-button pf-m-plain"
1199
- type="button"
1200
- aria-labelledby="toolbar-selected-filters-toggle-group-expanded-example-chip-group-riskremove-chip-two toolbar-selected-filters-toggle-group-expanded-example-chip-group-riskchip-two"
1201
- aria-label="Remove"
1202
- id="toolbar-selected-filters-toggle-group-expanded-example-chip-group-riskremove-chip-two"
1203
- >
1204
- <i class="fas fa-times" aria-hidden="true"></i>
1205
- </button>
1206
- </span>
1207
- </div>
1494
+ </span>
1208
1495
  </li>
1209
- <li class="pf-v6-c-chip-group__list-item">
1210
- <div class="pf-v6-c-chip">
1211
- <span class="pf-v6-c-chip__content">
1212
- <span
1213
- class="pf-v6-c-chip__text"
1214
- id="toolbar-selected-filters-toggle-group-expanded-example-chip-group-riskchip-three"
1215
- >Chip three</span>
1496
+ <li class="pf-v6-c-label-group__list-item">
1497
+ <span class="pf-v6-c-label pf-m-outline">
1498
+ <span class="pf-v6-c-label__content">
1499
+ <span class="pf-v6-c-label__content">
1500
+ <span
1501
+ class="pf-v6-c-label__text"
1502
+ id="toolbar-selected-filters-toggle-group-expanded-example-label-group-risklabel-three"
1503
+ >Label three</span>
1504
+ </span>
1505
+ <span class="pf-v6-c-label__actions">
1506
+ <button
1507
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
1508
+ type="button"
1509
+ aria-labelledby="toolbar-selected-filters-toggle-group-expanded-example-label-group-riskremove-label-three toolbar-selected-filters-toggle-group-expanded-example-label-group-risklabel-three"
1510
+ aria-label="Remove"
1511
+ id="toolbar-selected-filters-toggle-group-expanded-example-label-group-riskremove-label-three"
1512
+ >
1513
+ <span class="pf-v6-c-button__icon">
1514
+ <i class="fas fa-times" aria-hidden="true"></i>
1515
+ </span>
1516
+ </button>
1517
+ </span>
1216
1518
  </span>
1217
- <span class="pf-v6-c-chip__actions">
1218
- <button
1219
- class="pf-v6-c-button pf-m-plain"
1220
- type="button"
1221
- aria-labelledby="toolbar-selected-filters-toggle-group-expanded-example-chip-group-riskremove-chip-three toolbar-selected-filters-toggle-group-expanded-example-chip-group-riskchip-three"
1222
- aria-label="Remove"
1223
- id="toolbar-selected-filters-toggle-group-expanded-example-chip-group-riskremove-chip-three"
1224
- >
1225
- <i class="fas fa-times" aria-hidden="true"></i>
1226
- </button>
1227
- </span>
1228
- </div>
1519
+ </span>
1229
1520
  </li>
1230
1521
  </ul>
1231
1522
  </div>
1232
1523
  </div>
1233
1524
  </div>
1234
1525
  </div>
1526
+ </div>
1527
+
1528
+ <div class="pf-v6-c-toolbar__group pf-m-action-group-inline">
1529
+ <div class="pf-v6-c-toolbar__item">6 filters applied</div>
1530
+ <div class="pf-v6-c-toolbar__item">
1531
+ <button class="pf-v6-c-button pf-m-inline pf-m-link" type="button">
1532
+ <span class="pf-v6-c-button__text">Clear all filters</span>
1533
+ </button>
1534
+ </div>
1235
1535
  <div class="pf-v6-c-toolbar__item">
1236
- <button
1237
- class="pf-v6-c-button pf-m-link pf-m-inline"
1238
- type="button"
1239
- >Clear all filters</button>
1536
+ <button class="pf-v6-c-button pf-m-inline pf-m-link" type="button">
1537
+ <span class="pf-v6-c-button__text">Save all filters</span>
1538
+ </button>
1240
1539
  </div>
1241
1540
  </div>
1242
1541
  </div>
@@ -1258,7 +1557,6 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
1258
1557
  >
1259
1558
  <label
1260
1559
  class="pf-v6-c-check pf-m-standalone"
1261
- id="toolbar-selected-filters-example-check-check"
1262
1560
  for="toolbar-selected-filters-example-check-check-input"
1263
1561
  >
1264
1562
  <input
@@ -1284,310 +1582,277 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
1284
1582
  </button>
1285
1583
  </div>
1286
1584
  </div>
1287
- <div class="pf-v6-c-toolbar__group pf-m-toggle-group pf-m-show">
1288
- <div class="pf-v6-c-toolbar__toggle pf-m-show">
1585
+
1586
+ <div class="pf-v6-c-toolbar__group pf-m-filter-group">
1587
+ <div class="pf-v6-c-toolbar__item">
1289
1588
  <button
1290
- class="pf-v6-c-menu-toggle pf-m-plain"
1589
+ class="pf-v6-c-menu-toggle"
1291
1590
  type="button"
1292
1591
  aria-expanded="false"
1293
- aria-label="Show filters"
1294
- aria-controls="toolbar-selected-filters-example-expandable-content"
1592
+ id="toolbar-selected-filters-example-menu-toggle-checkbox-status"
1295
1593
  >
1296
- <span class="pf-v6-c-menu-toggle__icon">
1297
- <i class="fas fa-filter" aria-hidden="true"></i>
1594
+ <span class="pf-v6-c-menu-toggle__text">Status</span>
1595
+ <span class="pf-v6-c-menu-toggle__controls">
1596
+ <span class="pf-v6-c-menu-toggle__toggle-icon">
1597
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
1598
+ </span>
1298
1599
  </span>
1299
1600
  </button>
1300
1601
  </div>
1301
- <div class="pf-v6-c-toolbar__group pf-m-filter-group">
1302
- <div class="pf-v6-c-toolbar__item">
1303
- <button
1304
- class="pf-v6-c-menu-toggle"
1305
- type="button"
1306
- aria-expanded="false"
1307
- id="toolbar-selected-filters-example-menu-toggle-checkbox-status"
1308
- >
1309
- <span class="pf-v6-c-menu-toggle__text">Status</span>
1310
- <span class="pf-v6-c-menu-toggle__controls">
1311
- <span class="pf-v6-c-menu-toggle__toggle-icon">
1312
- <i class="fas fa-caret-down" aria-hidden="true"></i>
1313
- </span>
1314
- </span>
1315
- </button>
1316
- </div>
1317
- <div class="pf-v6-c-toolbar__item">
1318
- <button
1319
- class="pf-v6-c-menu-toggle"
1320
- type="button"
1321
- aria-expanded="false"
1322
- id="toolbar-selected-filters-example-menu-toggle-checkbox-risk"
1323
- >
1324
- <span class="pf-v6-c-menu-toggle__text">Risk</span>
1325
- <span class="pf-v6-c-menu-toggle__controls">
1326
- <span class="pf-v6-c-menu-toggle__toggle-icon">
1327
- <i class="fas fa-caret-down" aria-hidden="true"></i>
1328
- </span>
1602
+ <div class="pf-v6-c-toolbar__item">
1603
+ <button
1604
+ class="pf-v6-c-menu-toggle"
1605
+ type="button"
1606
+ aria-expanded="false"
1607
+ id="toolbar-selected-filters-example-menu-toggle-checkbox-risk"
1608
+ >
1609
+ <span class="pf-v6-c-menu-toggle__text">Risk</span>
1610
+ <span class="pf-v6-c-menu-toggle__controls">
1611
+ <span class="pf-v6-c-menu-toggle__toggle-icon">
1612
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
1329
1613
  </span>
1330
- </button>
1331
- </div>
1614
+ </span>
1615
+ </button>
1332
1616
  </div>
1333
1617
  </div>
1334
- <div class="pf-v6-c-toolbar__item pf-m-overflow-menu">
1618
+
1619
+ <div class="pf-v6-c-toolbar__item">
1335
1620
  <div
1336
1621
  class="pf-v6-c-overflow-menu"
1337
- id="toolbar-selected-filters-example-icon-button-overflow-menu"
1622
+ id="toolbar-selected-filters-example--overflow-menu"
1338
1623
  >
1339
1624
  <div class="pf-v6-c-overflow-menu__content">
1340
- <div class="pf-v6-c-overflow-menu__group pf-m-icon-button-group">
1341
- <div class="pf-v6-c-overflow-menu__item">
1342
- <button
1343
- class="pf-v6-c-button pf-m-plain"
1344
- type="button"
1345
- aria-label="Edit"
1346
- >
1347
- <i class="fas fa-edit" aria-hidden="true"></i>
1348
- </button>
1349
- </div>
1625
+ <div class="pf-v6-c-overflow-menu__group pf-m-button-group">
1350
1626
  <div class="pf-v6-c-overflow-menu__item">
1351
- <button
1352
- class="pf-v6-c-button pf-m-plain"
1353
- type="button"
1354
- aria-label="Clone"
1355
- >
1356
- <i class="fas fa-clone" aria-hidden="true"></i>
1627
+ <button class="pf-v6-c-button pf-m-primary" type="button">
1628
+ <span class="pf-v6-c-button__text">Primary</span>
1357
1629
  </button>
1358
1630
  </div>
1359
1631
  <div class="pf-v6-c-overflow-menu__item">
1360
- <button
1361
- class="pf-v6-c-button pf-m-plain"
1362
- type="button"
1363
- aria-label="Sync"
1364
- >
1365
- <i class="fas fa-sync" aria-hidden="true"></i>
1632
+ <button class="pf-v6-c-button pf-m-secondary" type="button">
1633
+ <span class="pf-v6-c-button__text">Secondary</span>
1366
1634
  </button>
1367
1635
  </div>
1368
1636
  </div>
1369
1637
  </div>
1370
- </div>
1371
- </div>
1372
- <div class="pf-v6-c-toolbar__item pf-m-overflow-menu">
1373
- <div
1374
- class="pf-v6-c-overflow-menu"
1375
- id="toolbar-selected-filters-example-overflow-menu"
1376
- >
1377
- <div class="pf-v6-c-overflow-menu__content">
1378
- <div class="pf-v6-c-overflow-menu__group pf-m-button-group">
1379
- <div class="pf-v6-c-overflow-menu__item">
1380
- <button
1381
- class="pf-v6-c-button pf-m-primary"
1382
- type="button"
1383
- >Primary</button>
1384
- </div>
1385
- <div class="pf-v6-c-overflow-menu__item">
1386
- <button
1387
- class="pf-v6-c-button pf-m-secondary"
1388
- type="button"
1389
- >Secondary</button>
1390
- </div>
1391
- </div>
1392
- </div>
1393
-
1394
1638
  <div class="pf-v6-c-overflow-menu__control">
1395
- <div class="pf-v6-c-dropdown">
1396
- <button
1397
- class="pf-v6-c-button pf-v5-c-dropdown__toggle pf-m-plain"
1398
- type="button"
1399
- id="toolbar-selected-filters-example-overflow-menu-dropdown-toggle"
1400
- aria-label="Overflow menu"
1401
- aria-expanded="false"
1402
- >
1639
+ <button
1640
+ class="pf-v6-c-menu-toggle pf-m-plain"
1641
+ type="button"
1642
+ aria-expanded="false"
1643
+ aria-label="Menu toggle"
1644
+ id="toolbar-selected-filters-example-overflow-toggle"
1645
+ >
1646
+ <span class="pf-v6-c-menu-toggle__icon">
1403
1647
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1404
- </button>
1405
- <ul
1406
- class="pf-v6-c-dropdown__menu"
1407
- role="menu"
1408
- aria-labelledby="toolbar-selected-filters-example-overflow-menu-dropdown-toggle"
1409
- hidden
1410
- >
1411
- <li role="none">
1412
- <button
1413
- role="menuitem"
1414
- class="pf-v6-c-dropdown__menu-item"
1415
- >Tertiary</button>
1416
- </li>
1417
- </ul>
1418
- </div>
1648
+ </span>
1649
+ </button>
1419
1650
  </div>
1420
1651
  </div>
1421
1652
  </div>
1422
1653
  </div>
1423
1654
  </div>
1424
- <div class="pf-v6-c-toolbar__content pf-m-chip-container">
1425
- <div class="pf-v6-c-toolbar__group">
1426
- <div class="pf-v6-c-toolbar__group">
1655
+ <div class="pf-v6-c-toolbar__content">
1656
+ <div class="pf-v6-c-toolbar__group pf-m-label-group">
1657
+ <div class="pf-v6-c-toolbar__group pf-m-grow pf-m-label-group">
1427
1658
  <div class="pf-v6-c-toolbar__item">
1428
- <div class="pf-v6-c-chip-group" role="group">
1429
- <div class="pf-v6-c-chip-group__main">
1659
+ <div class="pf-v6-c-label-group pf-m-category">
1660
+ <div class="pf-v6-c-label-group__main">
1430
1661
  <span
1431
- class="pf-v6-c-chip-group__label"
1432
- id="toolbar-selected-filters-example-chip-group-status-chip-group-label"
1662
+ class="pf-v6-c-label-group__label"
1663
+ aria-hidden="true"
1664
+ id="toolbar-selected-filters-example-label-group-status-label-group-label"
1433
1665
  >Status</span>
1434
1666
  <ul
1435
- class="pf-v6-c-chip-group__list"
1667
+ class="pf-v6-c-label-group__list"
1436
1668
  role="list"
1437
- aria-labelledby="toolbar-selected-filters-example-chip-group-status-chip-group-label"
1669
+ aria-labelledby="toolbar-selected-filters-example-label-group-status-label-group-label"
1438
1670
  >
1439
- <li class="pf-v6-c-chip-group__list-item">
1440
- <div class="pf-v6-c-chip">
1441
- <span class="pf-v6-c-chip__content">
1442
- <span
1443
- class="pf-v6-c-chip__text"
1444
- id="toolbar-selected-filters-example-chip-group-statuschip-one"
1445
- >Chip one</span>
1446
- </span>
1447
- <span class="pf-v6-c-chip__actions">
1448
- <button
1449
- class="pf-v6-c-button pf-m-plain"
1450
- type="button"
1451
- aria-labelledby="toolbar-selected-filters-example-chip-group-statusremove-chip-one toolbar-selected-filters-example-chip-group-statuschip-one"
1452
- aria-label="Remove"
1453
- id="toolbar-selected-filters-example-chip-group-statusremove-chip-one"
1454
- >
1455
- <i class="fas fa-times" aria-hidden="true"></i>
1456
- </button>
1457
- </span>
1458
- </div>
1459
- </li>
1460
- <li class="pf-v6-c-chip-group__list-item">
1461
- <div class="pf-v6-c-chip">
1462
- <span class="pf-v6-c-chip__content">
1463
- <span
1464
- class="pf-v6-c-chip__text"
1465
- id="toolbar-selected-filters-example-chip-group-statuschip-two"
1466
- >Chip two</span>
1467
- </span>
1468
- <span class="pf-v6-c-chip__actions">
1469
- <button
1470
- class="pf-v6-c-button pf-m-plain"
1471
- type="button"
1472
- aria-labelledby="toolbar-selected-filters-example-chip-group-statusremove-chip-two toolbar-selected-filters-example-chip-group-statuschip-two"
1473
- aria-label="Remove"
1474
- id="toolbar-selected-filters-example-chip-group-statusremove-chip-two"
1475
- >
1476
- <i class="fas fa-times" aria-hidden="true"></i>
1477
- </button>
1671
+ <li class="pf-v6-c-label-group__list-item">
1672
+ <span class="pf-v6-c-label pf-m-outline">
1673
+ <span class="pf-v6-c-label__content">
1674
+ <span class="pf-v6-c-label__content">
1675
+ <span
1676
+ class="pf-v6-c-label__text"
1677
+ id="toolbar-selected-filters-example-label-group-statuslabel-one"
1678
+ >Label one</span>
1679
+ </span>
1680
+ <span class="pf-v6-c-label__actions">
1681
+ <button
1682
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
1683
+ type="button"
1684
+ aria-labelledby="toolbar-selected-filters-example-label-group-statusremove-label-one toolbar-selected-filters-example-label-group-statuslabel-one"
1685
+ aria-label="Remove"
1686
+ id="toolbar-selected-filters-example-label-group-statusremove-label-one"
1687
+ >
1688
+ <span class="pf-v6-c-button__icon">
1689
+ <i class="fas fa-times" aria-hidden="true"></i>
1690
+ </span>
1691
+ </button>
1692
+ </span>
1478
1693
  </span>
1479
- </div>
1694
+ </span>
1480
1695
  </li>
1481
- <li class="pf-v6-c-chip-group__list-item">
1482
- <div class="pf-v6-c-chip">
1483
- <span class="pf-v6-c-chip__content">
1484
- <span
1485
- class="pf-v6-c-chip__text"
1486
- id="toolbar-selected-filters-example-chip-group-statuschip-three"
1487
- >Chip three</span>
1696
+ <li class="pf-v6-c-label-group__list-item">
1697
+ <span class="pf-v6-c-label pf-m-outline">
1698
+ <span class="pf-v6-c-label__content">
1699
+ <span class="pf-v6-c-label__content">
1700
+ <span
1701
+ class="pf-v6-c-label__text"
1702
+ id="toolbar-selected-filters-example-label-group-statuslabel-two"
1703
+ >Label two</span>
1704
+ </span>
1705
+ <span class="pf-v6-c-label__actions">
1706
+ <button
1707
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
1708
+ type="button"
1709
+ aria-labelledby="toolbar-selected-filters-example-label-group-statusremove-label-two toolbar-selected-filters-example-label-group-statuslabel-two"
1710
+ aria-label="Remove"
1711
+ id="toolbar-selected-filters-example-label-group-statusremove-label-two"
1712
+ >
1713
+ <span class="pf-v6-c-button__icon">
1714
+ <i class="fas fa-times" aria-hidden="true"></i>
1715
+ </span>
1716
+ </button>
1717
+ </span>
1488
1718
  </span>
1489
- <span class="pf-v6-c-chip__actions">
1490
- <button
1491
- class="pf-v6-c-button pf-m-plain"
1492
- type="button"
1493
- aria-labelledby="toolbar-selected-filters-example-chip-group-statusremove-chip-three toolbar-selected-filters-example-chip-group-statuschip-three"
1494
- aria-label="Remove"
1495
- id="toolbar-selected-filters-example-chip-group-statusremove-chip-three"
1496
- >
1497
- <i class="fas fa-times" aria-hidden="true"></i>
1498
- </button>
1719
+ </span>
1720
+ </li>
1721
+ <li class="pf-v6-c-label-group__list-item">
1722
+ <span class="pf-v6-c-label pf-m-outline">
1723
+ <span class="pf-v6-c-label__content">
1724
+ <span class="pf-v6-c-label__content">
1725
+ <span
1726
+ class="pf-v6-c-label__text"
1727
+ id="toolbar-selected-filters-example-label-group-statuslabel-three"
1728
+ >Label three</span>
1729
+ </span>
1730
+ <span class="pf-v6-c-label__actions">
1731
+ <button
1732
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
1733
+ type="button"
1734
+ aria-labelledby="toolbar-selected-filters-example-label-group-statusremove-label-three toolbar-selected-filters-example-label-group-statuslabel-three"
1735
+ aria-label="Remove"
1736
+ id="toolbar-selected-filters-example-label-group-statusremove-label-three"
1737
+ >
1738
+ <span class="pf-v6-c-button__icon">
1739
+ <i class="fas fa-times" aria-hidden="true"></i>
1740
+ </span>
1741
+ </button>
1742
+ </span>
1499
1743
  </span>
1500
- </div>
1744
+ </span>
1501
1745
  </li>
1502
1746
  </ul>
1503
1747
  </div>
1504
1748
  </div>
1505
1749
  </div>
1506
1750
  <div class="pf-v6-c-toolbar__item">
1507
- <div class="pf-v6-c-chip-group" role="group">
1508
- <div class="pf-v6-c-chip-group__main">
1751
+ <div class="pf-v6-c-label-group pf-m-category">
1752
+ <div class="pf-v6-c-label-group__main">
1509
1753
  <span
1510
- class="pf-v6-c-chip-group__label"
1511
- id="toolbar-selected-filters-example-chip-group-risk-chip-group-label"
1754
+ class="pf-v6-c-label-group__label"
1755
+ aria-hidden="true"
1756
+ id="toolbar-selected-filters-example-label-group-risk-label-group-label"
1512
1757
  >Risk</span>
1513
1758
  <ul
1514
- class="pf-v6-c-chip-group__list"
1759
+ class="pf-v6-c-label-group__list"
1515
1760
  role="list"
1516
- aria-labelledby="toolbar-selected-filters-example-chip-group-risk-chip-group-label"
1761
+ aria-labelledby="toolbar-selected-filters-example-label-group-risk-label-group-label"
1517
1762
  >
1518
- <li class="pf-v6-c-chip-group__list-item">
1519
- <div class="pf-v6-c-chip">
1520
- <span class="pf-v6-c-chip__content">
1521
- <span
1522
- class="pf-v6-c-chip__text"
1523
- id="toolbar-selected-filters-example-chip-group-riskchip-one"
1524
- >Chip one</span>
1525
- </span>
1526
- <span class="pf-v6-c-chip__actions">
1527
- <button
1528
- class="pf-v6-c-button pf-m-plain"
1529
- type="button"
1530
- aria-labelledby="toolbar-selected-filters-example-chip-group-riskremove-chip-one toolbar-selected-filters-example-chip-group-riskchip-one"
1531
- aria-label="Remove"
1532
- id="toolbar-selected-filters-example-chip-group-riskremove-chip-one"
1533
- >
1534
- <i class="fas fa-times" aria-hidden="true"></i>
1535
- </button>
1763
+ <li class="pf-v6-c-label-group__list-item">
1764
+ <span class="pf-v6-c-label pf-m-outline">
1765
+ <span class="pf-v6-c-label__content">
1766
+ <span class="pf-v6-c-label__content">
1767
+ <span
1768
+ class="pf-v6-c-label__text"
1769
+ id="toolbar-selected-filters-example-label-group-risklabel-one"
1770
+ >Label one</span>
1771
+ </span>
1772
+ <span class="pf-v6-c-label__actions">
1773
+ <button
1774
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
1775
+ type="button"
1776
+ aria-labelledby="toolbar-selected-filters-example-label-group-riskremove-label-one toolbar-selected-filters-example-label-group-risklabel-one"
1777
+ aria-label="Remove"
1778
+ id="toolbar-selected-filters-example-label-group-riskremove-label-one"
1779
+ >
1780
+ <span class="pf-v6-c-button__icon">
1781
+ <i class="fas fa-times" aria-hidden="true"></i>
1782
+ </span>
1783
+ </button>
1784
+ </span>
1536
1785
  </span>
1537
- </div>
1786
+ </span>
1538
1787
  </li>
1539
- <li class="pf-v6-c-chip-group__list-item">
1540
- <div class="pf-v6-c-chip">
1541
- <span class="pf-v6-c-chip__content">
1542
- <span
1543
- class="pf-v6-c-chip__text"
1544
- id="toolbar-selected-filters-example-chip-group-riskchip-two"
1545
- >Chip two</span>
1546
- </span>
1547
- <span class="pf-v6-c-chip__actions">
1548
- <button
1549
- class="pf-v6-c-button pf-m-plain"
1550
- type="button"
1551
- aria-labelledby="toolbar-selected-filters-example-chip-group-riskremove-chip-two toolbar-selected-filters-example-chip-group-riskchip-two"
1552
- aria-label="Remove"
1553
- id="toolbar-selected-filters-example-chip-group-riskremove-chip-two"
1554
- >
1555
- <i class="fas fa-times" aria-hidden="true"></i>
1556
- </button>
1788
+ <li class="pf-v6-c-label-group__list-item">
1789
+ <span class="pf-v6-c-label pf-m-outline">
1790
+ <span class="pf-v6-c-label__content">
1791
+ <span class="pf-v6-c-label__content">
1792
+ <span
1793
+ class="pf-v6-c-label__text"
1794
+ id="toolbar-selected-filters-example-label-group-risklabel-two"
1795
+ >Label two</span>
1796
+ </span>
1797
+ <span class="pf-v6-c-label__actions">
1798
+ <button
1799
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
1800
+ type="button"
1801
+ aria-labelledby="toolbar-selected-filters-example-label-group-riskremove-label-two toolbar-selected-filters-example-label-group-risklabel-two"
1802
+ aria-label="Remove"
1803
+ id="toolbar-selected-filters-example-label-group-riskremove-label-two"
1804
+ >
1805
+ <span class="pf-v6-c-button__icon">
1806
+ <i class="fas fa-times" aria-hidden="true"></i>
1807
+ </span>
1808
+ </button>
1809
+ </span>
1557
1810
  </span>
1558
- </div>
1811
+ </span>
1559
1812
  </li>
1560
- <li class="pf-v6-c-chip-group__list-item">
1561
- <div class="pf-v6-c-chip">
1562
- <span class="pf-v6-c-chip__content">
1563
- <span
1564
- class="pf-v6-c-chip__text"
1565
- id="toolbar-selected-filters-example-chip-group-riskchip-three"
1566
- >Chip three</span>
1567
- </span>
1568
- <span class="pf-v6-c-chip__actions">
1569
- <button
1570
- class="pf-v6-c-button pf-m-plain"
1571
- type="button"
1572
- aria-labelledby="toolbar-selected-filters-example-chip-group-riskremove-chip-three toolbar-selected-filters-example-chip-group-riskchip-three"
1573
- aria-label="Remove"
1574
- id="toolbar-selected-filters-example-chip-group-riskremove-chip-three"
1575
- >
1576
- <i class="fas fa-times" aria-hidden="true"></i>
1577
- </button>
1813
+ <li class="pf-v6-c-label-group__list-item">
1814
+ <span class="pf-v6-c-label pf-m-outline">
1815
+ <span class="pf-v6-c-label__content">
1816
+ <span class="pf-v6-c-label__content">
1817
+ <span
1818
+ class="pf-v6-c-label__text"
1819
+ id="toolbar-selected-filters-example-label-group-risklabel-three"
1820
+ >Label three</span>
1821
+ </span>
1822
+ <span class="pf-v6-c-label__actions">
1823
+ <button
1824
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
1825
+ type="button"
1826
+ aria-labelledby="toolbar-selected-filters-example-label-group-riskremove-label-three toolbar-selected-filters-example-label-group-risklabel-three"
1827
+ aria-label="Remove"
1828
+ id="toolbar-selected-filters-example-label-group-riskremove-label-three"
1829
+ >
1830
+ <span class="pf-v6-c-button__icon">
1831
+ <i class="fas fa-times" aria-hidden="true"></i>
1832
+ </span>
1833
+ </button>
1834
+ </span>
1578
1835
  </span>
1579
- </div>
1836
+ </span>
1580
1837
  </li>
1581
1838
  </ul>
1582
1839
  </div>
1583
1840
  </div>
1584
1841
  </div>
1585
1842
  </div>
1843
+ </div>
1844
+
1845
+ <div class="pf-v6-c-toolbar__group pf-m-action-group-inline">
1846
+ <div class="pf-v6-c-toolbar__item">6 filters applied</div>
1847
+ <div class="pf-v6-c-toolbar__item">
1848
+ <button class="pf-v6-c-button pf-m-inline pf-m-link" type="button">
1849
+ <span class="pf-v6-c-button__text">Clear all filters</span>
1850
+ </button>
1851
+ </div>
1586
1852
  <div class="pf-v6-c-toolbar__item">
1587
- <button
1588
- class="pf-v6-c-button pf-m-link pf-m-inline"
1589
- type="button"
1590
- >Clear all filters</button>
1853
+ <button class="pf-v6-c-button pf-m-inline pf-m-link" type="button">
1854
+ <span class="pf-v6-c-button__text">Save all filters</span>
1855
+ </button>
1591
1856
  </div>
1592
1857
  </div>
1593
1858
  </div>
@@ -1603,182 +1868,41 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
1603
1868
  <div class="pf-v6-c-toolbar" id="toolbar-stacked-example">
1604
1869
  <div class="pf-v6-c-toolbar__content">
1605
1870
  <div class="pf-v6-c-toolbar__content-section">
1606
- <div class="pf-v6-c-toolbar__group pf-m-toggle-group pf-m-show-on-2xl">
1607
- <div class="pf-v6-c-toolbar__toggle pf-m-show">
1608
- <button
1609
- class="pf-v6-c-menu-toggle pf-m-plain"
1610
- type="button"
1611
- aria-expanded="false"
1612
- aria-label="Show filters"
1613
- aria-controls="toolbar-stacked-example-expandable-content"
1614
- >
1615
- <span class="pf-v6-c-menu-toggle__icon">
1616
- <i class="fas fa-filter" aria-hidden="true"></i>
1617
- </span>
1618
- </button>
1619
- </div>
1620
- <div class="pf-v6-c-toolbar__group">
1621
- <div
1622
- class="pf-v6-c-toolbar__item pf-m-label"
1623
- id="toolbar-stacked-example-menu-toggle-resource-label"
1624
- aria-hidden="true"
1625
- >Resource</div>
1626
-
1627
- <div class="pf-v6-c-toolbar__item">
1628
- <button
1629
- class="pf-v6-c-menu-toggle"
1630
- type="button"
1631
- aria-expanded="false"
1632
- id="toolbar-stacked-example-menu-toggle-resource"
1633
- >
1634
- <span class="pf-v6-c-menu-toggle__text">Pod</span>
1635
- <span class="pf-v6-c-menu-toggle__controls">
1636
- <span class="pf-v6-c-menu-toggle__toggle-icon">
1637
- <i class="fas fa-caret-down" aria-hidden="true"></i>
1638
- </span>
1639
- </span>
1640
- </button>
1641
- </div>
1642
- </div>
1643
- <div class="pf-v6-c-toolbar__group">
1644
- <div
1645
- class="pf-v6-c-toolbar__item pf-m-label"
1646
- id="toolbar-stacked-example-menu-toggle-status-label"
1647
- aria-hidden="true"
1648
- >Status</div>
1649
- <div class="pf-v6-c-toolbar__item">
1650
- <button
1651
- class="pf-v6-c-menu-toggle"
1652
- type="button"
1653
- aria-expanded="false"
1654
- id="toolbar-stacked-example-menu-toggle-status"
1655
- >
1656
- <span class="pf-v6-c-menu-toggle__text">Running</span>
1657
- <span class="pf-v6-c-menu-toggle__controls">
1658
- <span class="pf-v6-c-menu-toggle__toggle-icon">
1659
- <i class="fas fa-caret-down" aria-hidden="true"></i>
1660
- </span>
1661
- </span>
1662
- </button>
1663
- </div>
1664
- </div>
1665
- <div class="pf-v6-c-toolbar__group">
1666
- <div
1667
- class="pf-v6-c-toolbar__item pf-m-label"
1668
- id="toolbar-stacked-example-menu-toggle-type-label"
1669
- aria-hidden="true"
1670
- >Type</div>
1671
- <div class="pf-v6-c-toolbar__item">
1672
- <button
1673
- class="pf-v6-c-menu-toggle"
1674
- type="button"
1675
- aria-expanded="false"
1676
- id="toolbar-stacked-example-menu-toggle-type"
1677
- >
1678
- <span class="pf-v6-c-menu-toggle__text">Any</span>
1679
- <span class="pf-v6-c-menu-toggle__controls">
1680
- <span class="pf-v6-c-menu-toggle__toggle-icon">
1681
- <i class="fas fa-caret-down" aria-hidden="true"></i>
1682
- </span>
1683
- </span>
1684
- </button>
1685
- </div>
1686
- </div>
1687
- </div>
1688
- <div class="pf-v6-c-toolbar__item pf-m-overflow-menu">
1871
+ <div class="pf-v6-c-toolbar__item">
1689
1872
  <div
1690
1873
  class="pf-v6-c-overflow-menu"
1691
- id="toolbar-stacked-example-icon-button-overflow-menu"
1874
+ id="toolbar-stacked-example--overflow-menu"
1692
1875
  >
1693
1876
  <div class="pf-v6-c-overflow-menu__content">
1694
- <div class="pf-v6-c-overflow-menu__group pf-m-icon-button-group">
1695
- <div class="pf-v6-c-overflow-menu__item">
1696
- <button
1697
- class="pf-v6-c-button pf-m-plain"
1698
- type="button"
1699
- aria-label="Edit"
1700
- >
1701
- <i class="fas fa-edit" aria-hidden="true"></i>
1702
- </button>
1703
- </div>
1877
+ <div class="pf-v6-c-overflow-menu__group pf-m-button-group">
1704
1878
  <div class="pf-v6-c-overflow-menu__item">
1705
- <button
1706
- class="pf-v6-c-button pf-m-plain"
1707
- type="button"
1708
- aria-label="Clone"
1709
- >
1710
- <i class="fas fa-clone" aria-hidden="true"></i>
1879
+ <button class="pf-v6-c-button pf-m-primary" type="button">
1880
+ <span class="pf-v6-c-button__text">Primary</span>
1711
1881
  </button>
1712
1882
  </div>
1713
1883
  <div class="pf-v6-c-overflow-menu__item">
1714
- <button
1715
- class="pf-v6-c-button pf-m-plain"
1716
- type="button"
1717
- aria-label="Sync"
1718
- >
1719
- <i class="fas fa-sync" aria-hidden="true"></i>
1884
+ <button class="pf-v6-c-button pf-m-secondary" type="button">
1885
+ <span class="pf-v6-c-button__text">Secondary</span>
1720
1886
  </button>
1721
1887
  </div>
1722
1888
  </div>
1723
1889
  </div>
1724
- </div>
1725
- </div>
1726
- <div class="pf-v6-c-toolbar__item pf-m-overflow-menu">
1727
- <div
1728
- class="pf-v6-c-overflow-menu"
1729
- id="toolbar-stacked-example-overflow-menu"
1730
- >
1731
- <div class="pf-v6-c-overflow-menu__content">
1732
- <div class="pf-v6-c-overflow-menu__group pf-m-button-group">
1733
- <div class="pf-v6-c-overflow-menu__item">
1734
- <button
1735
- class="pf-v6-c-button pf-m-primary"
1736
- type="button"
1737
- >Primary</button>
1738
- </div>
1739
- <div class="pf-v6-c-overflow-menu__item">
1740
- <button
1741
- class="pf-v6-c-button pf-m-secondary"
1742
- type="button"
1743
- >Secondary</button>
1744
- </div>
1745
- </div>
1746
- </div>
1747
-
1748
1890
  <div class="pf-v6-c-overflow-menu__control">
1749
- <div class="pf-v6-c-dropdown">
1750
- <button
1751
- class="pf-v6-c-button pf-v5-c-dropdown__toggle pf-m-plain"
1752
- type="button"
1753
- id="toolbar-stacked-example-overflow-menu-dropdown-toggle"
1754
- aria-label="Overflow menu"
1755
- aria-expanded="false"
1756
- >
1891
+ <button
1892
+ class="pf-v6-c-menu-toggle pf-m-plain"
1893
+ type="button"
1894
+ aria-expanded="false"
1895
+ aria-label="Menu toggle"
1896
+ id="toolbar-stacked-example-overflow-toggle"
1897
+ >
1898
+ <span class="pf-v6-c-menu-toggle__icon">
1757
1899
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1758
- </button>
1759
- <ul
1760
- class="pf-v6-c-dropdown__menu"
1761
- role="menu"
1762
- aria-labelledby="toolbar-stacked-example-overflow-menu-dropdown-toggle"
1763
- hidden
1764
- >
1765
- <li role="none">
1766
- <button
1767
- role="menuitem"
1768
- class="pf-v6-c-dropdown__menu-item"
1769
- >Tertiary</button>
1770
- </li>
1771
- </ul>
1772
- </div>
1900
+ </span>
1901
+ </button>
1773
1902
  </div>
1774
1903
  </div>
1775
1904
  </div>
1776
1905
  </div>
1777
- <div
1778
- class="pf-v6-c-toolbar__expandable-content pf-m-hidden"
1779
- id="toolbar-stacked-example-expandable-content"
1780
- hidden
1781
- ></div>
1782
1906
  </div>
1783
1907
  <hr class="pf-v6-c-divider" />
1784
1908
 
@@ -1791,7 +1915,6 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
1791
1915
  >
1792
1916
  <label
1793
1917
  class="pf-v6-c-check pf-m-standalone"
1794
- id="toolbar-stacked-example-check-check"
1795
1918
  for="toolbar-stacked-example-check-check-input"
1796
1919
  >
1797
1920
  <input
@@ -1821,76 +1944,48 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
1821
1944
  <div class="pf-v6-c-pagination" aria-label="Element pagination">
1822
1945
  <div class="pf-v6-c-pagination__total-items">37 items</div>
1823
1946
  <div class="pf-v6-c-pagination__page-menu">
1824
- <div class="pf-v6-c-options-menu">
1825
- <button
1826
- class="pf-v6-c-options-menu__toggle pf-m-text pf-m-plain"
1827
- type="button"
1828
- id="toolbar-stacked-example-pagination-options-menu-toggle"
1829
- aria-haspopup="listbox"
1830
- aria-expanded="false"
1831
- >
1832
- <span class="pf-v6-c-options-menu__toggle-text">
1833
- <b>1 - 10</b>&nbsp;of&nbsp;
1834
- <b>36</b>
1835
- </span>
1836
- <div class="pf-v6-c-options-menu__toggle-icon">
1947
+ <button
1948
+ class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
1949
+ type="button"
1950
+ aria-expanded="false"
1951
+ aria-label="Menu toggle"
1952
+ id="toolbar-stacked-example-pagination-menu-toggle"
1953
+ >
1954
+ <span class="pf-v6-c-menu-toggle__text">
1955
+ <b>1 - 10</b>&nbsp;of&nbsp;
1956
+ <b>36</b>
1957
+ </span>
1958
+ <span class="pf-v6-c-menu-toggle__controls">
1959
+ <span class="pf-v6-c-menu-toggle__toggle-icon">
1837
1960
  <i class="fas fa-caret-down" aria-hidden="true"></i>
1838
- </div>
1839
- </button>
1840
- <ul
1841
- class="pf-v6-c-options-menu__menu"
1842
- role="menu"
1843
- aria-labelledby="toolbar-stacked-example-pagination-options-menu-toggle"
1844
- hidden
1845
- >
1846
- <li role="none">
1847
- <button
1848
- class="pf-v6-c-options-menu__menu-item"
1849
- type="button"
1850
- role="menuitem"
1851
- >5 per page</button>
1852
- </li>
1853
- <li role="none">
1854
- <button
1855
- class="pf-v6-c-options-menu__menu-item"
1856
- type="button"
1857
- role="menuitem"
1858
- >
1859
- 10 per page
1860
- <div class="pf-v6-c-options-menu__menu-item-icon">
1861
- <i class="fas fa-check" aria-hidden="true"></i>
1862
- </div>
1863
- </button>
1864
- </li>
1865
- <li role="none">
1866
- <button
1867
- class="pf-v6-c-options-menu__menu-item"
1868
- type="button"
1869
- role="menuitem"
1870
- >20 per page</button>
1871
- </li>
1872
- </ul>
1873
- </div>
1961
+ </span>
1962
+ </span>
1963
+ </button>
1874
1964
  </div>
1965
+
1875
1966
  <nav class="pf-v6-c-pagination__nav" aria-label="Pagination">
1876
1967
  <div class="pf-v6-c-pagination__nav-control pf-m-first">
1877
1968
  <button
1878
- class="pf-v6-c-button pf-m-plain pf-m-disabled"
1969
+ class="pf-v6-c-button pf-m-plain"
1879
1970
  type="button"
1880
1971
  aria-label="Go to first page"
1881
- aria-disabled="true"
1972
+ disabled
1882
1973
  >
1883
- <i class="fas fa-angle-double-left" aria-hidden="true"></i>
1974
+ <span class="pf-v6-c-button__icon">
1975
+ <i class="fas fa-angle-double-left" aria-hidden="true"></i>
1976
+ </span>
1884
1977
  </button>
1885
1978
  </div>
1886
1979
  <div class="pf-v6-c-pagination__nav-control pf-m-prev">
1887
1980
  <button
1888
- class="pf-v6-c-button pf-m-plain pf-m-disabled"
1981
+ class="pf-v6-c-button pf-m-plain"
1889
1982
  type="button"
1890
1983
  aria-label="Go to previous page"
1891
- aria-disabled="true"
1984
+ disabled
1892
1985
  >
1893
- <i class="fas fa-angle-left" aria-hidden="true"></i>
1986
+ <span class="pf-v6-c-button__icon">
1987
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
1988
+ </span>
1894
1989
  </button>
1895
1990
  </div>
1896
1991
 
@@ -1915,7 +2010,9 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
1915
2010
  type="button"
1916
2011
  aria-label="Go to next page"
1917
2012
  >
1918
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2013
+ <span class="pf-v6-c-button__icon">
2014
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
2015
+ </span>
1919
2016
  </button>
1920
2017
  </div>
1921
2018
  <div class="pf-v6-c-pagination__nav-control pf-m-last">
@@ -1924,7 +2021,9 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
1924
2021
  type="button"
1925
2022
  aria-label="Go to last page"
1926
2023
  >
1927
- <i class="fas fa-angle-double-right" aria-hidden="true"></i>
2024
+ <span class="pf-v6-c-button__icon">
2025
+ <i class="fas fa-angle-double-right" aria-hidden="true"></i>
2026
+ </span>
1928
2027
  </button>
1929
2028
  </div>
1930
2029
  </nav>
@@ -1943,7 +2042,7 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
1943
2042
  <div class="pf-v6-c-toolbar__content">
1944
2043
  <div class="pf-v6-c-toolbar__content-section">
1945
2044
  <div class="pf-v6-c-toolbar__group pf-m-toggle-group">
1946
- <div class="pf-v6-c-toolbar__toggle pf-m-show">
2045
+ <div class="pf-v6-c-toolbar__toggle">
1947
2046
  <button
1948
2047
  class="pf-v6-c-menu-toggle pf-m-plain pf-m-expanded"
1949
2048
  type="button"
@@ -1956,128 +2055,278 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
1956
2055
  </span>
1957
2056
  </button>
1958
2057
  </div>
1959
- </div>
1960
- <div class="pf-v6-c-toolbar__item pf-m-overflow-menu">
1961
- <div
1962
- class="pf-v6-c-overflow-menu"
1963
- id="toolbar-stacked-collapsed-example-icon-button-overflow-menu"
1964
- >
1965
- <div class="pf-v6-c-overflow-menu__control">
1966
- <div class="pf-v6-c-dropdown">
2058
+ <div class="pf-v6-c-toolbar__item">
2059
+ <div
2060
+ class="pf-v6-c-input-group"
2061
+ aria-label="search filter"
2062
+ role="group"
2063
+ >
2064
+ <div class="pf-v6-c-input-group__item">
1967
2065
  <button
1968
- class="pf-v6-c-button pf-v5-c-dropdown__toggle pf-m-plain"
2066
+ class="pf-v6-c-menu-toggle"
1969
2067
  type="button"
1970
- id="toolbar-stacked-collapsed-example-icon-button-overflow-menu-dropdown-toggle"
1971
- aria-label="Overflow menu"
1972
2068
  aria-expanded="false"
2069
+ id="toolbar-stacked-collapsed-example-search-filter-menu"
1973
2070
  >
1974
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
2071
+ <span class="pf-v6-c-menu-toggle__text">Name</span>
2072
+ <span class="pf-v6-c-menu-toggle__controls">
2073
+ <span class="pf-v6-c-menu-toggle__toggle-icon">
2074
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
2075
+ </span>
2076
+ </span>
1975
2077
  </button>
1976
- <ul
1977
- class="pf-v6-c-dropdown__menu"
1978
- role="menu"
1979
- aria-labelledby="toolbar-stacked-collapsed-example-icon-button-overflow-menu-dropdown-toggle"
1980
- hidden
1981
- >
1982
- <li role="none">
1983
- <button
1984
- role="menuitem"
1985
- class="pf-v6-c-dropdown__menu-item"
1986
- >Edit</button>
1987
- </li>
1988
- <li role="none">
1989
- <button
1990
- role="menuitem"
1991
- class="pf-v6-c-dropdown__menu-item"
1992
- >Clone</button>
1993
- </li>
1994
- <li role="none">
1995
- <button
1996
- role="menuitem"
1997
- class="pf-v6-c-dropdown__menu-item"
1998
- >Sync</button>
1999
- </li>
2000
- </ul>
2001
2078
  </div>
2079
+ <div class="pf-v6-c-input-group__item pf-m-fill">
2080
+ <div class="pf-v6-c-text-input-group">
2081
+ <div class="pf-v6-c-text-input-group__main pf-m-icon">
2082
+ <span class="pf-v6-c-text-input-group__text">
2083
+ <span class="pf-v6-c-text-input-group__icon">
2084
+ <i class="fas fa-fw fa-search"></i>
2085
+ </span>
2086
+ <input
2087
+ class="pf-v6-c-text-input-group__text-input"
2088
+ type="text"
2089
+ placeholder="Find by name"
2090
+ value
2091
+ aria-label="Search input"
2092
+ />
2093
+ </span>
2094
+ </div>
2095
+ </div>
2096
+ </div>
2097
+ </div>
2098
+ </div>
2099
+
2100
+ <div class="pf-v6-c-toolbar__group pf-m-filter-group pf-m-toggle-group">
2101
+ <div class="pf-v6-c-toolbar__item">
2102
+ <button
2103
+ class="pf-v6-c-menu-toggle"
2104
+ type="button"
2105
+ aria-expanded="false"
2106
+ id="toolbar-stacked-collapsed-example-menu-toggle-checkbox-status"
2107
+ >
2108
+ <span class="pf-v6-c-menu-toggle__text">Status</span>
2109
+ <span class="pf-v6-c-menu-toggle__controls">
2110
+ <span class="pf-v6-c-menu-toggle__toggle-icon">
2111
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
2112
+ </span>
2113
+ </span>
2114
+ </button>
2115
+ </div>
2116
+ <div class="pf-v6-c-toolbar__item">
2117
+ <button
2118
+ class="pf-v6-c-menu-toggle"
2119
+ type="button"
2120
+ aria-expanded="false"
2121
+ id="toolbar-stacked-collapsed-example-menu-toggle-checkbox-risk"
2122
+ >
2123
+ <span class="pf-v6-c-menu-toggle__text">Risk</span>
2124
+ <span class="pf-v6-c-menu-toggle__controls">
2125
+ <span class="pf-v6-c-menu-toggle__toggle-icon">
2126
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
2127
+ </span>
2128
+ </span>
2129
+ </button>
2002
2130
  </div>
2003
2131
  </div>
2004
2132
  </div>
2005
2133
  </div>
2134
+
2006
2135
  <div
2007
2136
  class="pf-v6-c-toolbar__expandable-content pf-m-expanded"
2008
2137
  id="toolbar-stacked-collapsed-example-expandable-content"
2009
2138
  >
2010
- <div class="pf-v6-c-toolbar__group">
2011
- <div
2012
- class="pf-v6-c-toolbar__item pf-m-label"
2013
- id="toolbar-stacked-collapsed-example-menu-toggle-resource-label"
2014
- aria-hidden="true"
2015
- >Resource</div>
2016
-
2017
- <div class="pf-v6-c-toolbar__item">
2018
- <button
2019
- class="pf-v6-c-menu-toggle"
2020
- type="button"
2021
- aria-expanded="false"
2022
- id="toolbar-stacked-collapsed-example-menu-toggle-resource"
2023
- >
2024
- <span class="pf-v6-c-menu-toggle__text">Pod</span>
2025
- <span class="pf-v6-c-menu-toggle__controls">
2026
- <span class="pf-v6-c-menu-toggle__toggle-icon">
2027
- <i class="fas fa-caret-down" aria-hidden="true"></i>
2028
- </span>
2029
- </span>
2030
- </button>
2031
- </div>
2032
- </div>
2033
- <div class="pf-v6-c-toolbar__group">
2034
- <div
2035
- class="pf-v6-c-toolbar__item pf-m-label"
2036
- id="-menu-toggle-status-label"
2037
- aria-hidden="true"
2038
- >Status</div>
2039
- <div class="pf-v6-c-toolbar__item">
2040
- <button
2041
- class="pf-v6-c-menu-toggle"
2042
- type="button"
2043
- aria-expanded="false"
2044
- id="-menu-toggle-status"
2045
- >
2046
- <span class="pf-v6-c-menu-toggle__text">Running</span>
2047
- <span class="pf-v6-c-menu-toggle__controls">
2048
- <span class="pf-v6-c-menu-toggle__toggle-icon">
2049
- <i class="fas fa-caret-down" aria-hidden="true"></i>
2050
- </span>
2051
- </span>
2052
- </button>
2053
- </div>
2054
- </div>
2055
- <div class="pf-v6-c-toolbar__group">
2056
- <div
2057
- class="pf-v6-c-toolbar__item pf-m-label"
2058
- id="-menu-toggle-type-label"
2059
- aria-hidden="true"
2060
- >Type</div>
2061
- <div class="pf-v6-c-toolbar__item">
2062
- <button
2063
- class="pf-v6-c-menu-toggle"
2064
- type="button"
2065
- aria-expanded="false"
2066
- id="-menu-toggle-type"
2067
- >
2068
- <span class="pf-v6-c-menu-toggle__text">Any</span>
2069
- <span class="pf-v6-c-menu-toggle__controls">
2070
- <span class="pf-v6-c-menu-toggle__toggle-icon">
2071
- <i class="fas fa-caret-down" aria-hidden="true"></i>
2072
- </span>
2073
- </span>
2074
- </button>
2139
+ <div class="pf-v6-c-toolbar__group pf-m-label-group">
2140
+ <div class="pf-v6-c-toolbar__group pf-m-grow pf-m-label-group">
2141
+ <div class="pf-v6-c-toolbar__item">
2142
+ <div class="pf-v6-c-label-group pf-m-category">
2143
+ <div class="pf-v6-c-label-group__main">
2144
+ <span
2145
+ class="pf-v6-c-label-group__label"
2146
+ aria-hidden="true"
2147
+ id="toolbar-stacked-collapsed-example-label-group-status-label-group-label"
2148
+ >Status</span>
2149
+ <ul
2150
+ class="pf-v6-c-label-group__list"
2151
+ role="list"
2152
+ aria-labelledby="toolbar-stacked-collapsed-example-label-group-status-label-group-label"
2153
+ >
2154
+ <li class="pf-v6-c-label-group__list-item">
2155
+ <span class="pf-v6-c-label pf-m-outline">
2156
+ <span class="pf-v6-c-label__content">
2157
+ <span class="pf-v6-c-label__content">
2158
+ <span
2159
+ class="pf-v6-c-label__text"
2160
+ id="toolbar-stacked-collapsed-example-label-group-statuslabel-one"
2161
+ >Label one</span>
2162
+ </span>
2163
+ <span class="pf-v6-c-label__actions">
2164
+ <button
2165
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
2166
+ type="button"
2167
+ aria-labelledby="toolbar-stacked-collapsed-example-label-group-statusremove-label-one toolbar-stacked-collapsed-example-label-group-statuslabel-one"
2168
+ aria-label="Remove"
2169
+ id="toolbar-stacked-collapsed-example-label-group-statusremove-label-one"
2170
+ >
2171
+ <span class="pf-v6-c-button__icon">
2172
+ <i class="fas fa-times" aria-hidden="true"></i>
2173
+ </span>
2174
+ </button>
2175
+ </span>
2176
+ </span>
2177
+ </span>
2178
+ </li>
2179
+ <li class="pf-v6-c-label-group__list-item">
2180
+ <span class="pf-v6-c-label pf-m-outline">
2181
+ <span class="pf-v6-c-label__content">
2182
+ <span class="pf-v6-c-label__content">
2183
+ <span
2184
+ class="pf-v6-c-label__text"
2185
+ id="toolbar-stacked-collapsed-example-label-group-statuslabel-two"
2186
+ >Label two</span>
2187
+ </span>
2188
+ <span class="pf-v6-c-label__actions">
2189
+ <button
2190
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
2191
+ type="button"
2192
+ aria-labelledby="toolbar-stacked-collapsed-example-label-group-statusremove-label-two toolbar-stacked-collapsed-example-label-group-statuslabel-two"
2193
+ aria-label="Remove"
2194
+ id="toolbar-stacked-collapsed-example-label-group-statusremove-label-two"
2195
+ >
2196
+ <span class="pf-v6-c-button__icon">
2197
+ <i class="fas fa-times" aria-hidden="true"></i>
2198
+ </span>
2199
+ </button>
2200
+ </span>
2201
+ </span>
2202
+ </span>
2203
+ </li>
2204
+ <li class="pf-v6-c-label-group__list-item">
2205
+ <span class="pf-v6-c-label pf-m-outline">
2206
+ <span class="pf-v6-c-label__content">
2207
+ <span class="pf-v6-c-label__content">
2208
+ <span
2209
+ class="pf-v6-c-label__text"
2210
+ id="toolbar-stacked-collapsed-example-label-group-statuslabel-three"
2211
+ >Label three</span>
2212
+ </span>
2213
+ <span class="pf-v6-c-label__actions">
2214
+ <button
2215
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
2216
+ type="button"
2217
+ aria-labelledby="toolbar-stacked-collapsed-example-label-group-statusremove-label-three toolbar-stacked-collapsed-example-label-group-statuslabel-three"
2218
+ aria-label="Remove"
2219
+ id="toolbar-stacked-collapsed-example-label-group-statusremove-label-three"
2220
+ >
2221
+ <span class="pf-v6-c-button__icon">
2222
+ <i class="fas fa-times" aria-hidden="true"></i>
2223
+ </span>
2224
+ </button>
2225
+ </span>
2226
+ </span>
2227
+ </span>
2228
+ </li>
2229
+ </ul>
2230
+ </div>
2231
+ </div>
2232
+ </div>
2233
+ <div class="pf-v6-c-toolbar__item">
2234
+ <div class="pf-v6-c-label-group pf-m-category">
2235
+ <div class="pf-v6-c-label-group__main">
2236
+ <span
2237
+ class="pf-v6-c-label-group__label"
2238
+ aria-hidden="true"
2239
+ id="toolbar-stacked-collapsed-example-label-group-risk-label-group-label"
2240
+ >Risk</span>
2241
+ <ul
2242
+ class="pf-v6-c-label-group__list"
2243
+ role="list"
2244
+ aria-labelledby="toolbar-stacked-collapsed-example-label-group-risk-label-group-label"
2245
+ >
2246
+ <li class="pf-v6-c-label-group__list-item">
2247
+ <span class="pf-v6-c-label pf-m-outline">
2248
+ <span class="pf-v6-c-label__content">
2249
+ <span class="pf-v6-c-label__content">
2250
+ <span
2251
+ class="pf-v6-c-label__text"
2252
+ id="toolbar-stacked-collapsed-example-label-group-risklabel-one"
2253
+ >Label one</span>
2254
+ </span>
2255
+ <span class="pf-v6-c-label__actions">
2256
+ <button
2257
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
2258
+ type="button"
2259
+ aria-labelledby="toolbar-stacked-collapsed-example-label-group-riskremove-label-one toolbar-stacked-collapsed-example-label-group-risklabel-one"
2260
+ aria-label="Remove"
2261
+ id="toolbar-stacked-collapsed-example-label-group-riskremove-label-one"
2262
+ >
2263
+ <span class="pf-v6-c-button__icon">
2264
+ <i class="fas fa-times" aria-hidden="true"></i>
2265
+ </span>
2266
+ </button>
2267
+ </span>
2268
+ </span>
2269
+ </span>
2270
+ </li>
2271
+ <li class="pf-v6-c-label-group__list-item">
2272
+ <span class="pf-v6-c-label pf-m-outline">
2273
+ <span class="pf-v6-c-label__content">
2274
+ <span class="pf-v6-c-label__content">
2275
+ <span
2276
+ class="pf-v6-c-label__text"
2277
+ id="toolbar-stacked-collapsed-example-label-group-risklabel-two"
2278
+ >Label two</span>
2279
+ </span>
2280
+ <span class="pf-v6-c-label__actions">
2281
+ <button
2282
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
2283
+ type="button"
2284
+ aria-labelledby="toolbar-stacked-collapsed-example-label-group-riskremove-label-two toolbar-stacked-collapsed-example-label-group-risklabel-two"
2285
+ aria-label="Remove"
2286
+ id="toolbar-stacked-collapsed-example-label-group-riskremove-label-two"
2287
+ >
2288
+ <span class="pf-v6-c-button__icon">
2289
+ <i class="fas fa-times" aria-hidden="true"></i>
2290
+ </span>
2291
+ </button>
2292
+ </span>
2293
+ </span>
2294
+ </span>
2295
+ </li>
2296
+ <li class="pf-v6-c-label-group__list-item">
2297
+ <span class="pf-v6-c-label pf-m-outline">
2298
+ <span class="pf-v6-c-label__content">
2299
+ <span class="pf-v6-c-label__content">
2300
+ <span
2301
+ class="pf-v6-c-label__text"
2302
+ id="toolbar-stacked-collapsed-example-label-group-risklabel-three"
2303
+ >Label three</span>
2304
+ </span>
2305
+ <span class="pf-v6-c-label__actions">
2306
+ <button
2307
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
2308
+ type="button"
2309
+ aria-labelledby="toolbar-stacked-collapsed-example-label-group-riskremove-label-three toolbar-stacked-collapsed-example-label-group-risklabel-three"
2310
+ aria-label="Remove"
2311
+ id="toolbar-stacked-collapsed-example-label-group-riskremove-label-three"
2312
+ >
2313
+ <span class="pf-v6-c-button__icon">
2314
+ <i class="fas fa-times" aria-hidden="true"></i>
2315
+ </span>
2316
+ </button>
2317
+ </span>
2318
+ </span>
2319
+ </span>
2320
+ </li>
2321
+ </ul>
2322
+ </div>
2323
+ </div>
2324
+ </div>
2075
2325
  </div>
2076
2326
  </div>
2077
2327
  </div>
2078
2328
  </div>
2079
2329
  <hr class="pf-v6-c-divider" />
2080
-
2081
2330
  <div class="pf-v6-c-toolbar__content">
2082
2331
  <div class="pf-v6-c-toolbar__content-section">
2083
2332
  <div class="pf-v6-c-toolbar__item pf-m-bulk-select">
@@ -2087,7 +2336,6 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
2087
2336
  >
2088
2337
  <label
2089
2338
  class="pf-v6-c-check pf-m-standalone"
2090
- id="toolbar-stacked-collapsed-example-check-check"
2091
2339
  for="toolbar-stacked-collapsed-example-check-check-input"
2092
2340
  >
2093
2341
  <input
@@ -2117,76 +2365,48 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
2117
2365
  <div class="pf-v6-c-pagination" aria-label="Element pagination">
2118
2366
  <div class="pf-v6-c-pagination__total-items">37 items</div>
2119
2367
  <div class="pf-v6-c-pagination__page-menu">
2120
- <div class="pf-v6-c-options-menu">
2121
- <button
2122
- class="pf-v6-c-options-menu__toggle pf-m-text pf-m-plain"
2123
- type="button"
2124
- id="toolbar-stacked-collapsed-example-pagination-options-menu-toggle"
2125
- aria-haspopup="listbox"
2126
- aria-expanded="false"
2127
- >
2128
- <span class="pf-v6-c-options-menu__toggle-text">
2129
- <b>1 - 10</b>&nbsp;of&nbsp;
2130
- <b>36</b>
2131
- </span>
2132
- <div class="pf-v6-c-options-menu__toggle-icon">
2368
+ <button
2369
+ class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
2370
+ type="button"
2371
+ aria-expanded="false"
2372
+ aria-label="Menu toggle"
2373
+ id="toolbar-stacked-collapsed-example-pagination-menu-toggle"
2374
+ >
2375
+ <span class="pf-v6-c-menu-toggle__text">
2376
+ <b>1 - 10</b>&nbsp;of&nbsp;
2377
+ <b>36</b>
2378
+ </span>
2379
+ <span class="pf-v6-c-menu-toggle__controls">
2380
+ <span class="pf-v6-c-menu-toggle__toggle-icon">
2133
2381
  <i class="fas fa-caret-down" aria-hidden="true"></i>
2134
- </div>
2135
- </button>
2136
- <ul
2137
- class="pf-v6-c-options-menu__menu"
2138
- role="menu"
2139
- aria-labelledby="toolbar-stacked-collapsed-example-pagination-options-menu-toggle"
2140
- hidden
2141
- >
2142
- <li role="none">
2143
- <button
2144
- class="pf-v6-c-options-menu__menu-item"
2145
- type="button"
2146
- role="menuitem"
2147
- >5 per page</button>
2148
- </li>
2149
- <li role="none">
2150
- <button
2151
- class="pf-v6-c-options-menu__menu-item"
2152
- type="button"
2153
- role="menuitem"
2154
- >
2155
- 10 per page
2156
- <div class="pf-v6-c-options-menu__menu-item-icon">
2157
- <i class="fas fa-check" aria-hidden="true"></i>
2158
- </div>
2159
- </button>
2160
- </li>
2161
- <li role="none">
2162
- <button
2163
- class="pf-v6-c-options-menu__menu-item"
2164
- type="button"
2165
- role="menuitem"
2166
- >20 per page</button>
2167
- </li>
2168
- </ul>
2169
- </div>
2382
+ </span>
2383
+ </span>
2384
+ </button>
2170
2385
  </div>
2386
+
2171
2387
  <nav class="pf-v6-c-pagination__nav" aria-label="Pagination">
2172
2388
  <div class="pf-v6-c-pagination__nav-control pf-m-first">
2173
2389
  <button
2174
- class="pf-v6-c-button pf-m-plain pf-m-disabled"
2390
+ class="pf-v6-c-button pf-m-plain"
2175
2391
  type="button"
2176
2392
  aria-label="Go to first page"
2177
- aria-disabled="true"
2393
+ disabled
2178
2394
  >
2179
- <i class="fas fa-angle-double-left" aria-hidden="true"></i>
2395
+ <span class="pf-v6-c-button__icon">
2396
+ <i class="fas fa-angle-double-left" aria-hidden="true"></i>
2397
+ </span>
2180
2398
  </button>
2181
2399
  </div>
2182
2400
  <div class="pf-v6-c-pagination__nav-control pf-m-prev">
2183
2401
  <button
2184
- class="pf-v6-c-button pf-m-plain pf-m-disabled"
2402
+ class="pf-v6-c-button pf-m-plain"
2185
2403
  type="button"
2186
2404
  aria-label="Go to previous page"
2187
- aria-disabled="true"
2405
+ disabled
2188
2406
  >
2189
- <i class="fas fa-angle-left" aria-hidden="true"></i>
2407
+ <span class="pf-v6-c-button__icon">
2408
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
2409
+ </span>
2190
2410
  </button>
2191
2411
  </div>
2192
2412
 
@@ -2211,7 +2431,9 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
2211
2431
  type="button"
2212
2432
  aria-label="Go to next page"
2213
2433
  >
2214
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2434
+ <span class="pf-v6-c-button__icon">
2435
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
2436
+ </span>
2215
2437
  </button>
2216
2438
  </div>
2217
2439
  <div class="pf-v6-c-pagination__nav-control pf-m-last">
@@ -2220,7 +2442,9 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
2220
2442
  type="button"
2221
2443
  aria-label="Go to last page"
2222
2444
  >
2223
- <i class="fas fa-angle-double-right" aria-hidden="true"></i>
2445
+ <span class="pf-v6-c-button__icon">
2446
+ <i class="fas fa-angle-double-right" aria-hidden="true"></i>
2447
+ </span>
2224
2448
  </button>
2225
2449
  </div>
2226
2450
  </nav>
@@ -2232,6 +2456,135 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
2232
2456
 
2233
2457
  ```
2234
2458
 
2459
+ ### Primary background
2460
+
2461
+ ```html
2462
+ <div
2463
+ class="pf-v6-c-toolbar pf-m-primary"
2464
+ id="toolbar-primary-background-example"
2465
+ >
2466
+ <div class="pf-v6-c-toolbar__content">
2467
+ <div class="pf-v6-c-toolbar__content-section">
2468
+ <div class="pf-v6-c-toolbar__item">Item</div>
2469
+ <div class="pf-v6-c-toolbar__item">Item</div>
2470
+ <div class="pf-v6-c-toolbar__item">Item</div>
2471
+ <hr class="pf-v6-c-divider pf-m-vertical" />
2472
+
2473
+ <div class="pf-v6-c-toolbar__group">
2474
+ <div class="pf-v6-c-toolbar__item">Item</div>
2475
+ <div class="pf-v6-c-toolbar__item">Item</div>
2476
+ <div class="pf-v6-c-toolbar__item">Item</div>
2477
+ </div>
2478
+
2479
+ <hr class="pf-v6-c-divider pf-m-vertical" />
2480
+ <div class="pf-v6-c-toolbar__item">Item</div>
2481
+ <div class="pf-v6-c-toolbar__item">Item</div>
2482
+ <div class="pf-v6-c-toolbar__item">Item</div>
2483
+ </div>
2484
+ </div>
2485
+ </div>
2486
+
2487
+ ```
2488
+
2489
+ ### Secondary background
2490
+
2491
+ ```html
2492
+ <div
2493
+ class="pf-v6-c-toolbar pf-m-secondary"
2494
+ id="toolbar-secondary-background-example"
2495
+ >
2496
+ <div class="pf-v6-c-toolbar__content">
2497
+ <div class="pf-v6-c-toolbar__content-section">
2498
+ <div class="pf-v6-c-toolbar__item">Item</div>
2499
+ <div class="pf-v6-c-toolbar__item">Item</div>
2500
+ <div class="pf-v6-c-toolbar__item">Item</div>
2501
+ <hr class="pf-v6-c-divider pf-m-vertical" />
2502
+
2503
+ <div class="pf-v6-c-toolbar__group">
2504
+ <div class="pf-v6-c-toolbar__item">Item</div>
2505
+ <div class="pf-v6-c-toolbar__item">Item</div>
2506
+ <div class="pf-v6-c-toolbar__item">Item</div>
2507
+ </div>
2508
+
2509
+ <hr class="pf-v6-c-divider pf-m-vertical" />
2510
+ <div class="pf-v6-c-toolbar__item">Item</div>
2511
+ <div class="pf-v6-c-toolbar__item">Item</div>
2512
+ <div class="pf-v6-c-toolbar__item">Item</div>
2513
+ </div>
2514
+ </div>
2515
+ </div>
2516
+
2517
+ ```
2518
+
2519
+ ### No background
2520
+
2521
+ ```html
2522
+ <div
2523
+ class="pf-v6-c-toolbar pf-m-no-background"
2524
+ id="toolbar-no-background-example"
2525
+ >
2526
+ <div class="pf-v6-c-toolbar__content">
2527
+ <div class="pf-v6-c-toolbar__content-section">
2528
+ <div class="pf-v6-c-toolbar__item">Item</div>
2529
+ <div class="pf-v6-c-toolbar__item">Item</div>
2530
+ <div class="pf-v6-c-toolbar__item">Item</div>
2531
+ <hr class="pf-v6-c-divider pf-m-vertical" />
2532
+
2533
+ <div class="pf-v6-c-toolbar__group">
2534
+ <div class="pf-v6-c-toolbar__item">Item</div>
2535
+ <div class="pf-v6-c-toolbar__item">Item</div>
2536
+ <div class="pf-v6-c-toolbar__item">Item</div>
2537
+ </div>
2538
+
2539
+ <hr class="pf-v6-c-divider pf-m-vertical" />
2540
+ <div class="pf-v6-c-toolbar__item">Item</div>
2541
+ <div class="pf-v6-c-toolbar__item">Item</div>
2542
+ <div class="pf-v6-c-toolbar__item">Item</div>
2543
+ </div>
2544
+ </div>
2545
+ </div>
2546
+
2547
+ ```
2548
+
2549
+ ### Sticky toolbar
2550
+
2551
+ ```html
2552
+ <div class="pf-v6-c-toolbar pf-m-sticky" id="toolbar-sticky-example">
2553
+ <div class="pf-v6-c-toolbar__content">
2554
+ <div class="pf-v6-c-toolbar__content-section">
2555
+ <div class="pf-v6-c-toolbar__item">Item</div>
2556
+ <div class="pf-v6-c-toolbar__item">Item</div>
2557
+ <div class="pf-v6-c-toolbar__item">Item</div>
2558
+ <hr class="pf-v6-c-divider pf-m-vertical" />
2559
+
2560
+ <div class="pf-v6-c-toolbar__group">
2561
+ <div class="pf-v6-c-toolbar__item">Item</div>
2562
+ <div class="pf-v6-c-toolbar__item">Item</div>
2563
+ <div class="pf-v6-c-toolbar__item">Item</div>
2564
+ </div>
2565
+
2566
+ <hr class="pf-v6-c-divider pf-m-vertical" />
2567
+ <div class="pf-v6-c-toolbar__item">Item</div>
2568
+ <div class="pf-v6-c-toolbar__item">Item</div>
2569
+ <div class="pf-v6-c-toolbar__item">Item</div>
2570
+ </div>
2571
+ </div>
2572
+ </div>
2573
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempor mattis massa dignissim blandit. Mauris pellentesque nisi a erat ultricies, mollis auctor nulla volutpat. Donec eu nisl magna. Donec nisi nulla, blandit et mauris in, lobortis elementum neque. Nunc pharetra eleifend purus, in commodo nisl accumsan in. Vestibulum feugiat nisl eu venenatis feugiat. Morbi ornare velit vitae tellus sollicitudin, sed ornare neque sagittis. Proin sodales, libero et vestibulum luctus, nunc mi euismod dui, vel accumsan lacus odio vel nibh. Etiam at mattis purus, sit amet vestibulum metus. Maecenas feugiat condimentum ligula eget hendrerit. Nullam eleifend convallis sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nullam rhoncus consectetur enim, at interdum mi tincidunt eget. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
2574
+ <br />
2575
+ <br />
2576
+ Maecenas vel sollicitudin ipsum, pulvinar pharetra magna. Aenean vel ipsum vel purus malesuada sagittis eget ac odio. Nullam vitae diam mollis, consectetur est vitae, sodales diam. Vivamus eu lectus quis mi maximus porta. Praesent erat sapien, vestibulum nec libero non, tincidunt congue mauris. Pellentesque vitae imperdiet mi. Nulla in ipsum neque. Cras a quam ut sem venenatis euismod non at tortor. Mauris porta purus augue, ut pharetra elit varius at. Vestibulum fringilla ligula ac leo tristique, porta venenatis nibh convallis.
2577
+ <br />
2578
+ <br />
2579
+ Vestibulum vel orci mattis magna tristique suscipit. In vel tellus tempor, consectetur mi at, pellentesque enim. Cras venenatis tellus eget velit porttitor, sit amet malesuada tortor venenatis. Maecenas vitae augue ac orci volutpat gravida. In fermentum, orci eget tincidunt lobortis, turpis orci porta nibh, cursus dignissim lectus sapien at felis. Nulla facilisi. Aenean lectus justo, pellentesque sed nulla ut, pulvinar pellentesque tortor. Ut tempus euismod dolor gravida rhoncus. Quisque sed lorem sit amet erat tincidunt aliquet quis in nulla. Maecenas arcu erat, hendrerit a dui eget, convallis pharetra sapien. Nunc tellus enim, dictum eu egestas vel, ultrices eget est. Etiam quis vehicula sem. Nulla facilisi. Donec ante ipsum, fringilla iaculis ex a, tincidunt lobortis mi.
2580
+ <br />
2581
+ <br />
2582
+ Etiam nulla lacus, porttitor vel volutpat et, malesuada id nunc. Suspendisse porttitor sem quis ante consequat, vitae commodo nulla ultricies. Nulla fermentum ipsum ac dolor elementum, eu luctus ex condimentum. Sed sed arcu aliquam, porta metus in, sollicitudin felis. Sed faucibus lacus consectetur orci ultricies laoreet. Morbi sed lectus dictum sem tempor porta. Donec ut diam tempor, venenatis erat vitae, accumsan diam. Etiam sed purus eget lacus vehicula iaculis non euismod dolor. Quisque ultricies eget est in semper.
2583
+ <br />
2584
+ <br />Fusce tristique nulla id vestibulum maximus. Morbi sit amet nisi nec orci pulvinar interdum. Duis convallis, nunc vel pharetra blandit, urna neque eleifend nunc, maximus faucibus tellus nisl a velit. Aliquam quis turpis tempor nisi ultricies fermentum at et ipsum. Pellentesque vel tincidunt nisl. Donec elit ante, sodales ac ultrices vitae, egestas ut magna. Nulla sollicitudin ornare mi, a porttitor sem fermentum vitae. Praesent maximus fringilla gravida. Sed ultricies turpis ut lacus sodales, et aliquet risus accumsan. Pellentesque lacus sapien, cursus vitae nulla vel, bibendum tristique risus.
2585
+
2586
+ ```
2587
+
2235
2588
  ## Documentation
2236
2589
 
2237
2590
  ### Overview
@@ -2248,20 +2601,28 @@ As the toolbar component is a hybrid layout and component, some of its elements
2248
2601
  | `.pf-v6-c-toolbar__content` | `<div>` | Initiates a toolbar content container. **Required** |
2249
2602
  | `.pf-v6-c-toolbar__content-section` | `<div>` | Initiates a toolbar content section. This is used to separate static elements from dynamic elements within a content container. There should be no more than one `.pf-v6-c-toolbar__content-section` per `.pf-v6-c-toolbar__content` **Required** |
2250
2603
  | `.pf-v6-c-toolbar__expandable-content` | `<div>` | Initiates a toolbar expandable content section. |
2604
+ | `.pf-v6-c-toolbar__expand-all-icon` | `<div>` | Initiates a toolbar expand all icon. |
2251
2605
  | `.pf-m-sticky` | `.pf-v6-c-toolbar` | Modifies toolbar component to be sticky to the top of its container. |
2252
2606
  | `.pf-m-full-height` | `.pf-v6-c-toolbar`, `.pf-v6-c-toolbar__content-section`, `.pf-v6-c-toolbar__group` | Modifies toolbar component to full height of its container and removes vertical padding. |
2253
2607
  | `.pf-m-static` | `.pf-v6-c-toolbar` | Modifies expandable content section to position itself to the nearest absolutely positioned parent outside of the toolbar component. This is used primarily for masthead toolbar. |
2608
+ | `.pf-m-primary` | `.pf-v6-c-toolbar` | Modifies toolbar to have primary background color. |
2609
+ | `.pf-m-secondary` | `.pf-v6-c-toolbar` | Modifies toolbar to have secondary background color. |
2610
+ | `.pf-m-no-background` | `.pf-v6-c-toolbar` | Modifies toolbar to have no background color. |
2254
2611
  | `.pf-m-expanded` | `.pf-v6-c-toolbar__expandable-content` | Modifies expandable content section for the expanded state. |
2255
2612
  | `.pf-m-expanded` | `.pf-v6-c-toolbar__item.pf-m-expand-all` | Modifies an expand all button for the expanded state. |
2256
- | `.pf-m-icon-button-group` | `.pf-v6-c-toolbar__group` | Initiates icon button group spacing. |
2613
+ | `.pf-m-action-group` | `.pf-v6-c-toolbar__group` | Initiates action group spacing. |
2614
+ | `.pf-m-action-group-inline` | `.pf-v6-c-toolbar__group` | Initiates inline action group spacing. |
2615
+ | `.pf-m-action-group-plain` | `.pf-v6-c-toolbar__group` | Initiates plain action group spacing. |
2257
2616
  | `.pf-m-filter-group` | `.pf-v6-c-toolbar__group` | Initiates filter group spacing. |
2258
- | `.pf-m-chip-container` | `.pf-v6-c-toolbar__content`, `.pf-v6-c-toolbar__content-section`, `.pf-v6-c-toolbar__group` | Modifies the toolbar element for applied filters layout. |
2617
+ | `.pf-m-label` | `.pf-v6-c-toolbar__item` | Initiates label item presenatation. |
2618
+ | `.pf-m-label-group` | `.pf-v6-c-toolbar__group` | Initiates label group spacing. |
2259
2619
  | `.pf-m-overflow-container` | `.pf-v6-c-toolbar__item`, `.pf-v6-c-toolbar__group` | Modifies the toolbar element to hide overflow and respond to available space. Used for horizontal navigation. |
2260
2620
  | `.pf-m-expanded` | `.pf-v6-c-toolbar__expandable-content`, `.pf-v6-c-toolbar__toggle` | Modifies the component for the expanded state. |
2261
2621
  | `.pf-m-[wrap/nowrap]` | `.pf-v6-c-toolbar__content`, `.pf-v6-c-toolbar__content-section`, `.pf-v6-c-toolbar__group`, `.pf-v6-c-toolbar__item` | Modifies the toolbar element to wrap/not wrap. |
2262
- | `.pf-m-align-[start/end]` | `.pf-v6-c-toolbar__group`, `.pf-v6-c-toolbar__item` | Modifies toolbar [main axis](https://developer.mozilla.org/en-US/docs/Glossary/Main_Axis) element alignment. |
2622
+ | `.pf-m-align-[start/center/end]` | `.pf-v6-c-toolbar__group`, `.pf-v6-c-toolbar__item` | Modifies toolbar [main axis](https://developer.mozilla.org/en-US/docs/Glossary/Main_Axis) element alignment. |
2263
2623
  | `.pf-m-align-items-[stretch/baseline/start/center/end]` | `.pf-v6-c-toolbar__content`, `.pf-v6-c-toolbar__content-section`, `.pf-v6-c-toolbar__group`, `.pf-v6-c-toolbar__item` | Modifies toolbar element [cross axis](https://developer.mozilla.org/en-US/docs/Glossary/Cross_Axis) child alignment. |
2264
2624
  | `.pf-m-align-self-[stretch/baseline/start/center/end]` | `.pf-v6-c-toolbar__group`, `.pf-v6-c-toolbar__item` | Modifies toolbar element [cross axis](https://developer.mozilla.org/en-US/docs/Glossary/Cross_Axis) self alignment. |
2625
+ | `.pf-m-inset-[none/sm/md/lg/xl/2xl]` | `.pf-v6-c-toolbar` | Modifies toolbar horizontal. |
2265
2626
 
2266
2627
  ### Accessibility
2267
2628
 
@@ -2286,3 +2647,4 @@ As the toolbar component is a hybrid layout and component, some of its elements
2286
2647
  | Class | Applied to | Outcome |
2287
2648
  | -- | -- | -- |
2288
2649
  | `.pf-m-[column/row]-gap-[none/sm/md/lg/xl/2xl]` | `.pf-v6-c-toolbar__group`, `.pf-v6-c-toolbar__item` | Modifies toolbar group or item spacing at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
2650
+ | `.pf-m-gap-[none/sm/md/lg/xl/2xl]` | `.pf-v6-c-toolbar__group`, `.pf-v6-c-toolbar__item` | Modifies both column and row gap for toolbar group or item spacing at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |