@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/MenuToggle/examples/MenuToggle.md CHANGED
@@ -73,6 +73,26 @@ cssPrefix: pf-v6-c-menu-toggle
73
73
  </span>
74
74
  </button>
75
75
 
76
+ &nbsp;
77
+ <button
78
+ class="pf-v6-c-menu-toggle pf-m-plain pf-m-small pf-m-text"
79
+ type="button"
80
+ aria-expanded="false"
81
+ aria-label="Menu toggle"
82
+ >
83
+ <span class="pf-v6-c-menu-toggle__count">
84
+ <span class="pf-v6-c-badge pf-m-unread">
85
+ 4
86
+ <span class="pf-v6-screen-reader">additional items</span>
87
+ </span>
88
+ </span>
89
+ <span class="pf-v6-c-menu-toggle__controls">
90
+ <span class="pf-v6-c-menu-toggle__toggle-icon">
91
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
92
+ </span>
93
+ </span>
94
+ </button>
95
+
76
96
  ```
77
97
 
78
98
  ### Primary
@@ -249,6 +269,7 @@ cssPrefix: pf-v6-c-menu-toggle
249
269
  class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
250
270
  type="button"
251
271
  aria-expanded="false"
272
+ aria-label="Menu toggle"
252
273
  >
253
274
  <span class="pf-v6-c-menu-toggle__text">Custom text</span>
254
275
  <span class="pf-v6-c-menu-toggle__controls">
@@ -263,6 +284,7 @@ cssPrefix: pf-v6-c-menu-toggle
263
284
  class="pf-v6-c-menu-toggle pf-m-plain pf-m-text pf-m-expanded"
264
285
  type="button"
265
286
  aria-expanded="true"
287
+ aria-label="Menu toggle"
266
288
  >
267
289
  <span class="pf-v6-c-menu-toggle__text">Custom text</span>
268
290
  <span class="pf-v6-c-menu-toggle__controls">
@@ -278,6 +300,7 @@ cssPrefix: pf-v6-c-menu-toggle
278
300
  type="button"
279
301
  aria-expanded="false"
280
302
  disabled
303
+ aria-label="Menu toggle"
281
304
  >
282
305
  <span class="pf-v6-c-menu-toggle__text">Disabled</span>
283
306
  <span class="pf-v6-c-menu-toggle__controls">
@@ -289,21 +312,20 @@ cssPrefix: pf-v6-c-menu-toggle
289
312
 
290
313
  ```
291
314
 
292
- ### Split button (checkbox)
315
+ ### Split toggle with checkbox
293
316
 
294
317
  ```html
295
318
  <div
296
319
  class="pf-v6-c-menu-toggle pf-m-split-button"
297
320
  id="split-button-checkbox-example"
298
321
  >
299
- <label
300
- class="pf-v6-c-check pf-m-standalone"
301
- for="split-button-checkbox-example-input"
302
- >
322
+ <label class="pf-v6-c-check pf-m-standalone">
303
323
  <input
304
324
  class="pf-v6-c-check__input"
305
325
  type="checkbox"
306
- aria-label="Standalone check"
326
+ id="split-button-checkbox-example-input"
327
+ name="split-button-checkbox-example-input"
328
+ aria-label="Select all items"
307
329
  />
308
330
  </label>
309
331
  <button
@@ -325,14 +347,13 @@ cssPrefix: pf-v6-c-menu-toggle
325
347
  class="pf-v6-c-menu-toggle pf-m-expanded pf-m-split-button"
326
348
  id="split-button-checkbox-expanded-example"
327
349
  >
328
- <label
329
- class="pf-v6-c-check pf-m-standalone"
330
- for="split-button-checkbox-expanded-example-input"
331
- >
350
+ <label class="pf-v6-c-check pf-m-standalone">
332
351
  <input
333
352
  class="pf-v6-c-check__input"
334
353
  type="checkbox"
335
- aria-label="Standalone check"
354
+ id="split-button-checkbox-expanded-example-input"
355
+ name="split-button-checkbox-expanded-example-input"
356
+ aria-label="Select all items"
336
357
  />
337
358
  </label>
338
359
  <button
@@ -354,15 +375,14 @@ cssPrefix: pf-v6-c-menu-toggle
354
375
  class="pf-v6-c-menu-toggle pf-m-split-button pf-m-disabled"
355
376
  id="split-button-checkbox-disabled-example"
356
377
  >
357
- <label
358
- class="pf-v6-c-check pf-m-standalone"
359
- for="split-button-checkbox-disabled-example-input"
360
- >
378
+ <label class="pf-v6-c-check pf-m-standalone">
361
379
  <input
362
380
  class="pf-v6-c-check__input"
363
381
  type="checkbox"
364
- aria-label="Standalone check"
365
382
  disabled
383
+ id="split-button-checkbox-disabled-example-input"
384
+ name="split-button-checkbox-disabled-example-input"
385
+ aria-label="Select all items"
366
386
  />
367
387
  </label>
368
388
  <button
@@ -383,7 +403,9 @@ cssPrefix: pf-v6-c-menu-toggle
383
403
 
384
404
  ```
385
405
 
386
- ### Split button (checkbox with toggle text)
406
+ ### Split toggle with labeled checkbox
407
+
408
+ To add a label to a split toggle that will be linked to the checkbox, pass the text wrapped in `span.pf-v6-c-check__label` as a child to `label.pf-v6-c-check`. Clicking the text will update the checked state of the split toggle's checkbox.
387
409
 
388
410
  ```html
389
411
  <div
@@ -394,8 +416,13 @@ cssPrefix: pf-v6-c-menu-toggle
394
416
  class="pf-v6-c-check"
395
417
  for="split-button-checkbox-with-toggle-text-example-input"
396
418
  >
397
- <input class="pf-v6-c-check__input" type="checkbox" />
398
- <label class="pf-v6-c-check__label" for="-input">10 selected</label>
419
+ <input
420
+ class="pf-v6-c-check__input"
421
+ type="checkbox"
422
+ id="split-button-checkbox-with-toggle-text-example-input"
423
+ name="split-button-checkbox-with-toggle-text-example-input"
424
+ />
425
+ <span class="pf-v6-c-check__label">Select all items</span>
399
426
  </label>
400
427
  <button
401
428
  class="pf-v6-c-menu-toggle__button"
@@ -420,8 +447,13 @@ cssPrefix: pf-v6-c-menu-toggle
420
447
  class="pf-v6-c-check"
421
448
  for="split-button-checkbox-with-toggle-text-expanded-example-input"
422
449
  >
423
- <input class="pf-v6-c-check__input" type="checkbox" />
424
- <label class="pf-v6-c-check__label" for="-input">10 selected</label>
450
+ <input
451
+ class="pf-v6-c-check__input"
452
+ type="checkbox"
453
+ id="split-button-checkbox-with-toggle-text-expanded-example-input"
454
+ name="split-button-checkbox-with-toggle-text-expanded-example-input"
455
+ />
456
+ <span class="pf-v6-c-check__label">Select all items</span>
425
457
  </label>
426
458
  <button
427
459
  class="pf-v6-c-menu-toggle__button"
@@ -446,8 +478,14 @@ cssPrefix: pf-v6-c-menu-toggle
446
478
  class="pf-v6-c-check"
447
479
  for="split-button-checkbox-with-toggle-text-disabled-example-input"
448
480
  >
449
- <input class="pf-v6-c-check__input" type="checkbox" disabled />
450
- <label class="pf-v6-c-check__label pf-m-disabled" for="-input">10 selected</label>
481
+ <input
482
+ class="pf-v6-c-check__input"
483
+ type="checkbox"
484
+ disabled
485
+ id="split-button-checkbox-with-toggle-text-disabled-example-input"
486
+ name="split-button-checkbox-with-toggle-text-disabled-example-input"
487
+ />
488
+ <span class="pf-v6-c-check__label pf-m-disabled">Select all items</span>
451
489
  </label>
452
490
  <button
453
491
  class="pf-v6-c-menu-toggle__button"
@@ -467,6 +505,100 @@ cssPrefix: pf-v6-c-menu-toggle
467
505
 
468
506
  ```
469
507
 
508
+ ### Split toggle with checkbox and toggle text
509
+
510
+ To add a label to a split toggle that will be linked to the toggle button, pass the text wrapped in `span.pf-v6-c-menu-toggle__text` as a child to `button.pf-v6-c-menu-toggle__button.pf-m-text`. Clicking the text should trigger any click action on the toggle.
511
+
512
+ ```html
513
+ <div
514
+ class="pf-v6-c-menu-toggle pf-m-split-button"
515
+ id="split-button-checkbox-with-toggle-button-text-example"
516
+ >
517
+ <label class="pf-v6-c-check pf-m-standalone">
518
+ <input
519
+ class="pf-v6-c-check__input"
520
+ type="checkbox"
521
+ id="split-button-checkbox-with-toggle-button-text-example-input"
522
+ name="split-button-checkbox-with-toggle-button-text-example-input"
523
+ aria-label="Select all items"
524
+ />
525
+ </label>
526
+ <button
527
+ class="pf-v6-c-menu-toggle__button pf-m-text"
528
+ type="button"
529
+ aria-expanded="false"
530
+ id="split-button-checkbox-with-toggle-button-text-example-toggle-button"
531
+ aria-label="Menu toggle"
532
+ >
533
+ <span class="pf-v6-c-menu-toggle__text">Toggle button text</span>
534
+ <span class="pf-v6-c-menu-toggle__controls">
535
+ <span class="pf-v6-c-menu-toggle__toggle-icon">
536
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
537
+ </span>
538
+ </span>
539
+ </button>
540
+ </div>&nbsp;
541
+ <div
542
+ class="pf-v6-c-menu-toggle pf-m-expanded pf-m-split-button"
543
+ id="split-button-checkbox-with-toggle-button-text-expanded-example"
544
+ >
545
+ <label class="pf-v6-c-check pf-m-standalone">
546
+ <input
547
+ class="pf-v6-c-check__input"
548
+ type="checkbox"
549
+ id="split-button-checkbox-with-toggle-button-text-expanded-example-input"
550
+ name="split-button-checkbox-with-toggle-button-text-expanded-example-input"
551
+ aria-label="Select all items"
552
+ />
553
+ </label>
554
+ <button
555
+ class="pf-v6-c-menu-toggle__button pf-m-text"
556
+ type="button"
557
+ aria-expanded="true"
558
+ id="split-button-checkbox-with-toggle-button-text-expanded-example-toggle-button"
559
+ aria-label="Menu toggle"
560
+ >
561
+ <span class="pf-v6-c-menu-toggle__text">Toggle button text</span>
562
+ <span class="pf-v6-c-menu-toggle__controls">
563
+ <span class="pf-v6-c-menu-toggle__toggle-icon">
564
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
565
+ </span>
566
+ </span>
567
+ </button>
568
+ </div>&nbsp;
569
+ <div
570
+ class="pf-v6-c-menu-toggle pf-m-split-button pf-m-disabled"
571
+ id="split-button-checkbox-with-toggle-button-text-disabled-example"
572
+ >
573
+ <label class="pf-v6-c-check pf-m-standalone">
574
+ <input
575
+ class="pf-v6-c-check__input"
576
+ type="checkbox"
577
+ disabled
578
+ id="split-button-checkbox-with-toggle-button-text-disabled-example-input"
579
+ name="split-button-checkbox-with-toggle-button-text-disabled-example-input"
580
+ aria-label="Select all items"
581
+ />
582
+ </label>
583
+ <button
584
+ class="pf-v6-c-menu-toggle__button pf-m-text"
585
+ type="button"
586
+ aria-expanded="false"
587
+ id="split-button-checkbox-with-toggle-button-text-disabled-example-toggle-button"
588
+ aria-label="Menu toggle"
589
+ disabled
590
+ >
591
+ <span class="pf-v6-c-menu-toggle__text">Toggle button text</span>
592
+ <span class="pf-v6-c-menu-toggle__controls">
593
+ <span class="pf-v6-c-menu-toggle__toggle-icon">
594
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
595
+ </span>
596
+ </span>
597
+ </button>
598
+ </div>
599
+
600
+ ```
601
+
470
602
  ### Small
471
603
 
472
604
  ```html
@@ -562,8 +694,13 @@ cssPrefix: pf-v6-c-menu-toggle
562
694
  class="pf-v6-c-check"
563
695
  for="split-button-checkbox-primary-example-input"
564
696
  >
565
- <input class="pf-v6-c-check__input" type="checkbox" />
566
- <label class="pf-v6-c-check__label" for="-input">10 selected</label>
697
+ <input
698
+ class="pf-v6-c-check__input"
699
+ type="checkbox"
700
+ id="split-button-checkbox-primary-example-input"
701
+ name="split-button-checkbox-primary-example-input"
702
+ />
703
+ <span class="pf-v6-c-check__label">Select all items</span>
567
704
  </label>
568
705
  <button
569
706
  class="pf-v6-c-menu-toggle__button"
@@ -588,8 +725,13 @@ cssPrefix: pf-v6-c-menu-toggle
588
725
  class="pf-v6-c-check"
589
726
  for="split-button-checkbox-primary-expanded-example-input"
590
727
  >
591
- <input class="pf-v6-c-check__input" type="checkbox" />
592
- <label class="pf-v6-c-check__label" for="-input">10 selected</label>
728
+ <input
729
+ class="pf-v6-c-check__input"
730
+ type="checkbox"
731
+ id="split-button-checkbox-primary-expanded-example-input"
732
+ name="split-button-checkbox-primary-expanded-example-input"
733
+ />
734
+ <span class="pf-v6-c-check__label">Select all items</span>
593
735
  </label>
594
736
  <button
595
737
  class="pf-v6-c-menu-toggle__button"
@@ -614,8 +756,14 @@ cssPrefix: pf-v6-c-menu-toggle
614
756
  class="pf-v6-c-check"
615
757
  for="split-button-checkbox-primary-disabled-example-input"
616
758
  >
617
- <input class="pf-v6-c-check__input" type="checkbox" disabled />
618
- <label class="pf-v6-c-check__label pf-m-disabled" for="-input">10 selected</label>
759
+ <input
760
+ class="pf-v6-c-check__input"
761
+ type="checkbox"
762
+ disabled
763
+ id="split-button-checkbox-primary-disabled-example-input"
764
+ name="split-button-checkbox-primary-disabled-example-input"
765
+ />
766
+ <span class="pf-v6-c-check__label pf-m-disabled">Select all items</span>
619
767
  </label>
620
768
  <button
621
769
  class="pf-v6-c-menu-toggle__button"
@@ -646,8 +794,13 @@ cssPrefix: pf-v6-c-menu-toggle
646
794
  class="pf-v6-c-check"
647
795
  for="split-button-checkbox-secondary-example-input"
648
796
  >
649
- <input class="pf-v6-c-check__input" type="checkbox" />
650
- <label class="pf-v6-c-check__label" for="-input">10 selected</label>
797
+ <input
798
+ class="pf-v6-c-check__input"
799
+ type="checkbox"
800
+ id="split-button-checkbox-secondary-example-input"
801
+ name="split-button-checkbox-secondary-example-input"
802
+ />
803
+ <span class="pf-v6-c-check__label">Select all items</span>
651
804
  </label>
652
805
  <button
653
806
  class="pf-v6-c-menu-toggle__button"
@@ -672,8 +825,13 @@ cssPrefix: pf-v6-c-menu-toggle
672
825
  class="pf-v6-c-check"
673
826
  for="split-button-checkbox-secondary-expanded-example-input"
674
827
  >
675
- <input class="pf-v6-c-check__input" type="checkbox" />
676
- <label class="pf-v6-c-check__label" for="-input">10 selected</label>
828
+ <input
829
+ class="pf-v6-c-check__input"
830
+ type="checkbox"
831
+ id="split-button-checkbox-secondary-expanded-example-input"
832
+ name="split-button-checkbox-secondary-expanded-example-input"
833
+ />
834
+ <span class="pf-v6-c-check__label">Select all items</span>
677
835
  </label>
678
836
  <button
679
837
  class="pf-v6-c-menu-toggle__button"
@@ -698,8 +856,14 @@ cssPrefix: pf-v6-c-menu-toggle
698
856
  class="pf-v6-c-check"
699
857
  for="split-button-checkbox-secondary-disabled-example-input"
700
858
  >
701
- <input class="pf-v6-c-check__input" type="checkbox" disabled />
702
- <label class="pf-v6-c-check__label pf-m-disabled" for="-input">10 selected</label>
859
+ <input
860
+ class="pf-v6-c-check__input"
861
+ type="checkbox"
862
+ disabled
863
+ id="split-button-checkbox-secondary-disabled-example-input"
864
+ name="split-button-checkbox-secondary-disabled-example-input"
865
+ />
866
+ <span class="pf-v6-c-check__label pf-m-disabled">Select all items</span>
703
867
  </label>
704
868
  <button
705
869
  class="pf-v6-c-menu-toggle__button"
@@ -962,7 +1126,7 @@ cssPrefix: pf-v6-c-menu-toggle
962
1126
  <button class="pf-v6-c-menu-toggle" type="button" aria-expanded="false">
963
1127
  <span class="pf-v6-c-menu-toggle__icon">
964
1128
  <img
965
- class="pf-v6-c-avatar"
1129
+ class="pf-v6-c-avatar pf-m-sm"
966
1130
  alt="Avatar image"
967
1131
  src="/assets/images/img_avatar-light.svg"
968
1132
  />
@@ -983,7 +1147,7 @@ cssPrefix: pf-v6-c-menu-toggle
983
1147
  >
984
1148
  <span class="pf-v6-c-menu-toggle__icon">
985
1149
  <img
986
- class="pf-v6-c-avatar"
1150
+ class="pf-v6-c-avatar pf-m-sm"
987
1151
  alt="Avatar image"
988
1152
  src="/assets/images/img_avatar-light.svg"
989
1153
  />
@@ -1005,7 +1169,7 @@ cssPrefix: pf-v6-c-menu-toggle
1005
1169
  >
1006
1170
  <span class="pf-v6-c-menu-toggle__icon">
1007
1171
  <img
1008
- class="pf-v6-c-avatar"
1172
+ class="pf-v6-c-avatar pf-m-sm"
1009
1173
  alt="Avatar image"
1010
1174
  src="/assets/images/img_avatar-light.svg"
1011
1175
  />
@@ -1080,7 +1244,9 @@ cssPrefix: pf-v6-c-menu-toggle
1080
1244
  type="button"
1081
1245
  aria-label="Clear input"
1082
1246
  >
1083
- <i class="fas fa-times fa-fw" aria-hidden="true"></i>
1247
+ <span class="pf-v6-c-button__icon">
1248
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
1249
+ </span>
1084
1250
  </button>
1085
1251
  </div>
1086
1252
  </div>
@@ -1101,6 +1267,85 @@ cssPrefix: pf-v6-c-menu-toggle
1101
1267
 
1102
1268
  ```
1103
1269
 
1270
+ ### Status
1271
+
1272
+ ```html
1273
+ <button
1274
+ class="pf-v6-c-menu-toggle pf-m-success"
1275
+ type="button"
1276
+ aria-expanded="false"
1277
+ >
1278
+ <span class="pf-v6-c-menu-toggle__text">Success</span>
1279
+ <span class="pf-v6-c-menu-toggle__controls">
1280
+ <span class="pf-v6-c-menu-toggle__status-icon">
1281
+ <i class="fas fa-check-circle" aria-hidden="true"></i>
1282
+ </span>
1283
+ <span class="pf-v6-c-menu-toggle__toggle-icon">
1284
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
1285
+ </span>
1286
+ </span>
1287
+ </button>
1288
+
1289
+ <br />
1290
+ <br />
1291
+
1292
+ <button
1293
+ class="pf-v6-c-menu-toggle pf-m-warning"
1294
+ type="button"
1295
+ aria-expanded="false"
1296
+ >
1297
+ <span class="pf-v6-c-menu-toggle__text">Warning</span>
1298
+ <span class="pf-v6-c-menu-toggle__controls">
1299
+ <span class="pf-v6-c-menu-toggle__status-icon">
1300
+ <i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
1301
+ </span>
1302
+ <span class="pf-v6-c-menu-toggle__toggle-icon">
1303
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
1304
+ </span>
1305
+ </span>
1306
+ </button>
1307
+
1308
+ <br />
1309
+ <br />
1310
+
1311
+ <button
1312
+ class="pf-v6-c-menu-toggle pf-m-danger"
1313
+ type="button"
1314
+ aria-expanded="false"
1315
+ >
1316
+ <span class="pf-v6-c-menu-toggle__text">Danger</span>
1317
+ <span class="pf-v6-c-menu-toggle__controls">
1318
+ <span class="pf-v6-c-menu-toggle__status-icon">
1319
+ <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
1320
+ </span>
1321
+ <span class="pf-v6-c-menu-toggle__toggle-icon">
1322
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
1323
+ </span>
1324
+ </span>
1325
+ </button>
1326
+
1327
+ ```
1328
+
1329
+ ### Placeholder
1330
+
1331
+ ```html
1332
+ <button
1333
+ class="pf-v6-c-menu-toggle pf-m-placeholder"
1334
+ type="button"
1335
+ aria-expanded="false"
1336
+ >
1337
+ <span class="pf-v6-c-menu-toggle__text">Placeholder text</span>
1338
+ <span class="pf-v6-c-menu-toggle__controls">
1339
+ <span class="pf-v6-c-menu-toggle__toggle-icon">
1340
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
1341
+ </span>
1342
+ </span>
1343
+ </button>
1344
+
1345
+ ```
1346
+
1347
+ ## Documentation
1348
+
1104
1349
  ### Accessibility
1105
1350
 
1106
1351
  | Class | Applied to | Outcome |
@@ -1123,6 +1368,7 @@ cssPrefix: pf-v6-c-menu-toggle
1123
1368
  | `.pf-v6-c-menu-toggle__button` | `<button>` | Initiates the menu toggle button. |
1124
1369
  | `.pf-m-split-button` | `.pf-v6-c-menu-toggle` | Modifies the menu toggle component for the split button variation. |
1125
1370
  | `.pf-m-action` | `.pf-v6-c-menu-toggle.pf-m-split-button` | Modifies the menu toggle component for the action, split button variation. |
1371
+ | `.pf-m-text` | `.pf-v6-c-menu-toggle__button` | Modifies the menu toggle component split button variation with text. |
1126
1372
  | `.pf-m-disabled` | `.pf-v6-c-menu-toggle` | Modifies the menu toggle component for the disabled variation. |
1127
1373
  | `.pf-m-primary` | `.pf-v6-c-menu-toggle` | Modifies the menu toggle component for the primary variation. |
1128
1374
  | `.pf-m-secondary` | `.pf-v6-c-menu-toggle` | Modifies the menu toggle component for the secondary variation. |
@@ -1131,3 +1377,7 @@ cssPrefix: pf-v6-c-menu-toggle
1131
1377
  | `.pf-m-expanded` | `.pf-v6-c-menu-toggle` | Modifies the menu toggle component for the expanded state. |
1132
1378
  | `.pf-m-full-height` | `.pf-v6-c-menu-toggle` | Modifies the menu toggle component to full height of parent. |
1133
1379
  | `.pf-m-full-width` | `.pf-v6-c-menu-toggle` | Modifies the menu toggle component to full width of parent. |
1380
+ | `.pf-m-success` | `.pf-v6-c-menu-toggle` | Modifies the menu toggle component for the success state. |
1381
+ | `.pf-m-warning` | `.pf-v6-c-menu-toggle` | Modifies the menu toggle component for the warning state. |
1382
+ | `.pf-m-danger` | `.pf-v6-c-menu-toggle` | Modifies the menu toggle component for the danger state. |
1383
+ | `.pf-m-placeholder` | `.pf-v6-c-menu-toggle` | Modifies the menu toggle text for placeholder styles. |