@patternfly/patternfly 6.0.0-alpha.99 → 6.0.0-prerelease.2

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/_core.scss +2 -0
  5. package/assets/fontawesome/_fixed-width.scss +2 -0
  6. package/assets/fontawesome/_icons.scss +1 -0
  7. package/assets/fontawesome/_index.scss +12 -0
  8. package/assets/fontawesome/_larger.scss +4 -2
  9. package/assets/fontawesome/_list.scss +4 -2
  10. package/assets/fontawesome/_rotated-flipped.scss +2 -0
  11. package/assets/fontawesome/_screen-reader.scss +1 -0
  12. package/assets/fontawesome/_stacked.scss +3 -1
  13. package/assets/fontawesome/_variables.scss +3 -2
  14. package/assets/fontawesome/fontawesome.scss +12 -12
  15. package/assets/icons/iconUnicodes.json +6 -0
  16. package/assets/images/img_avatar-dark.svg +22 -16
  17. package/assets/images/img_avatar-light.svg +25 -18
  18. package/assets/images/pf-background.svg +21 -21
  19. package/assets/images/pf_logo.svg +11 -11
  20. package/assets/images/pf_logo_white.svg +16 -17
  21. package/assets/pficon/pf-v6-pficon.woff2 +0 -0
  22. package/assets/pficon/pficon.scss +310 -271
  23. package/base/_index.scss +10 -0
  24. package/base/{_globals.scss → normalize.scss} +15 -48
  25. package/base/patternfly-common.css +14 -0
  26. package/base/patternfly-common.scss +68 -2
  27. package/base/patternfly-fa-icons.css +1 -1
  28. package/base/patternfly-fa-icons.scss +35 -2
  29. package/base/patternfly-fonts.css +10 -80
  30. package/base/patternfly-fonts.scss +49 -2
  31. package/base/patternfly-pf-icons.css +158 -134
  32. package/base/patternfly-pf-icons.scss +1 -2
  33. package/base/patternfly-svg-icons.css +5 -0
  34. package/base/{_svg-icons.scss → patternfly-svg-icons.scss} +2 -0
  35. package/base/patternfly-variables.css +1082 -1206
  36. package/base/patternfly-variables.scss +20 -2
  37. package/base/reset.scss +33 -0
  38. package/base/tokens/_index.scss +6 -0
  39. package/base/tokens/tokens-charts-dark.scss +173 -0
  40. package/base/tokens/{_tokens-charts.scss → tokens-charts.scss} +162 -148
  41. package/base/tokens/{_tokens-dark.scss → tokens-dark.scss} +307 -294
  42. package/base/tokens/{_tokens-default.scss → tokens-default.scss} +574 -447
  43. package/base/tokens/{_tokens-font.scss → tokens-local.scss} +13 -34
  44. package/base/tokens/{_tokens-palette.scss → tokens-palette.scss} +69 -70
  45. package/components/AboutModalBox/about-modal-box.css +86 -81
  46. package/components/AboutModalBox/about-modal-box.scss +80 -82
  47. package/components/Accordion/accordion.css +44 -43
  48. package/components/Accordion/accordion.scss +52 -52
  49. package/components/ActionList/action-list.css +6 -5
  50. package/components/ActionList/action-list.scss +7 -5
  51. package/components/Alert/alert-group.css +72 -19
  52. package/components/Alert/alert-group.scss +105 -18
  53. package/components/Alert/alert.css +52 -59
  54. package/components/Alert/alert.scss +56 -65
  55. package/components/Avatar/avatar.css +42 -41
  56. package/components/Avatar/avatar.scss +8 -7
  57. package/components/BackToTop/back-to-top.css +19 -17
  58. package/components/BackToTop/back-to-top.scss +17 -17
  59. package/components/Backdrop/backdrop.css +1 -1
  60. package/components/Backdrop/backdrop.scss +3 -4
  61. package/components/BackgroundImage/background-image.scss +3 -4
  62. package/components/Badge/badge.css +29 -7
  63. package/components/Badge/badge.scss +33 -9
  64. package/components/Banner/banner.css +30 -37
  65. package/components/Banner/banner.scss +30 -43
  66. package/components/Brand/brand.css +14 -10
  67. package/components/Brand/brand.scss +8 -5
  68. package/components/Breadcrumb/breadcrumb.css +23 -24
  69. package/components/Breadcrumb/breadcrumb.scss +25 -28
  70. package/components/Button/button.css +150 -128
  71. package/components/Button/button.scss +155 -130
  72. package/components/CalendarMonth/calendar-month.css +46 -46
  73. package/components/CalendarMonth/calendar-month.scss +49 -50
  74. package/components/Card/card.css +110 -93
  75. package/components/Card/card.scss +118 -92
  76. package/components/Check/check.css +5 -5
  77. package/components/Check/check.scss +7 -8
  78. package/components/ClipboardCopy/clipboard-copy.css +33 -41
  79. package/components/ClipboardCopy/clipboard-copy.scss +35 -44
  80. package/components/CodeBlock/code-block.css +21 -20
  81. package/components/CodeBlock/code-block.scss +21 -21
  82. package/components/CodeEditor/code-editor.css +35 -34
  83. package/components/CodeEditor/code-editor.scss +35 -35
  84. package/components/Content/content.css +167 -153
  85. package/components/Content/content.scss +204 -145
  86. package/components/DataList/data-list-grid.css +117 -117
  87. package/components/DataList/data-list-grid.scss +22 -20
  88. package/components/DataList/data-list.css +308 -312
  89. package/components/DataList/data-list.scss +145 -152
  90. package/components/DatePicker/date-picker.css +17 -17
  91. package/components/DatePicker/date-picker.scss +17 -18
  92. package/components/DescriptionList/description-list-order.css +5 -5
  93. package/components/DescriptionList/description-list-order.scss +3 -1
  94. package/components/DescriptionList/description-list.css +46 -44
  95. package/components/DescriptionList/description-list.scss +26 -31
  96. package/components/Divider/divider.css +104 -107
  97. package/components/Divider/divider.scss +19 -19
  98. package/components/DragDrop/drag-drop.css +4 -2
  99. package/components/DragDrop/drag-drop.scss +3 -3
  100. package/components/Drawer/drawer.css +115 -114
  101. package/components/Drawer/drawer.scss +136 -134
  102. package/components/DualListSelector/dual-list-selector.css +64 -61
  103. package/components/DualListSelector/dual-list-selector.scss +54 -51
  104. package/components/EmptyState/empty-state.css +38 -37
  105. package/components/EmptyState/empty-state.scss +39 -39
  106. package/components/ExpandableSection/expandable-section.css +27 -86
  107. package/components/ExpandableSection/expandable-section.scss +32 -101
  108. package/components/FileUpload/file-upload.css +2 -2
  109. package/components/FileUpload/file-upload.scss +2 -3
  110. package/components/Form/form.css +173 -115
  111. package/components/Form/form.scss +117 -103
  112. package/components/FormControl/form-control.css +57 -57
  113. package/components/FormControl/form-control.scss +69 -67
  114. package/components/HelperText/helper-text.css +5 -4
  115. package/components/HelperText/helper-text.scss +8 -6
  116. package/components/Hint/hint.css +25 -25
  117. package/components/Hint/hint.scss +25 -27
  118. package/components/Icon/icon.css +10 -10
  119. package/components/Icon/icon.scss +11 -12
  120. package/components/InlineEdit/inline-edit.css +12 -12
  121. package/components/InlineEdit/inline-edit.scss +12 -13
  122. package/components/InputGroup/input-group.css +16 -16
  123. package/components/InputGroup/input-group.scss +18 -19
  124. package/components/JumpLinks/jump-links.css +80 -96
  125. package/components/JumpLinks/jump-links.scss +80 -100
  126. package/components/Label/label-group.css +28 -28
  127. package/components/Label/label-group.scss +29 -30
  128. package/components/Label/label.css +102 -87
  129. package/components/Label/label.scss +113 -94
  130. package/components/List/list.css +44 -47
  131. package/components/List/list.scss +51 -58
  132. package/components/Login/login.css +122 -118
  133. package/components/Login/login.scss +105 -112
  134. package/components/Masthead/masthead.css +273 -175
  135. package/components/Masthead/masthead.scss +102 -68
  136. package/components/Menu/menu.css +151 -95
  137. package/components/Menu/menu.scss +59 -40
  138. package/components/MenuToggle/menu-toggle.css +129 -108
  139. package/components/MenuToggle/menu-toggle.scss +150 -128
  140. package/components/ModalBox/modal-box.css +53 -45
  141. package/components/ModalBox/modal-box.scss +52 -46
  142. package/components/MultipleFileUpload/multiple-file-upload.css +37 -37
  143. package/components/MultipleFileUpload/multiple-file-upload.scss +38 -39
  144. package/components/Nav/nav.css +33 -9
  145. package/components/Nav/nav.scss +46 -13
  146. package/components/NotificationDrawer/notification-drawer.css +50 -51
  147. package/components/NotificationDrawer/notification-drawer.scss +58 -57
  148. package/components/NumberInput/number-input.css +7 -11
  149. package/components/NumberInput/number-input.scss +5 -7
  150. package/components/OverflowMenu/overflow-menu.css +2 -1
  151. package/components/OverflowMenu/overflow-menu.scss +3 -1
  152. package/components/Page/page.css +175 -519
  153. package/components/Page/page.scss +155 -386
  154. package/components/Pagination/pagination.css +82 -79
  155. package/components/Pagination/pagination.scss +43 -40
  156. package/components/Panel/panel.css +33 -30
  157. package/components/Panel/panel.scss +35 -33
  158. package/components/Popover/popover.css +54 -52
  159. package/components/Popover/popover.scss +55 -54
  160. package/components/Progress/progress.css +8 -4
  161. package/components/Progress/progress.scss +14 -11
  162. package/components/ProgressStepper/progress-stepper.css +246 -245
  163. package/components/ProgressStepper/progress-stepper.scss +118 -118
  164. package/components/Radio/radio.css +7 -7
  165. package/components/Radio/radio.scss +9 -10
  166. package/components/Sidebar/sidebar.css +139 -139
  167. package/components/Sidebar/sidebar.scss +61 -61
  168. package/components/SimpleList/simple-list.css +21 -20
  169. package/components/SimpleList/simple-list.scss +22 -23
  170. package/components/Skeleton/skeleton.css +4 -4
  171. package/components/Skeleton/skeleton.scss +7 -8
  172. package/components/SkipToContent/skip-to-content.css +7 -6
  173. package/components/SkipToContent/skip-to-content.scss +7 -7
  174. package/components/Slider/slider.css +31 -31
  175. package/components/Slider/slider.scss +54 -55
  176. package/components/Spinner/spinner.scss +4 -5
  177. package/components/Switch/switch.css +4 -10
  178. package/components/Switch/switch.scss +8 -17
  179. package/components/TabContent/tab-content.css +25 -25
  180. package/components/TabContent/tab-content.scss +28 -28
  181. package/components/Table/table-grid.css +434 -508
  182. package/components/Table/table-grid.scss +131 -150
  183. package/components/Table/table-scrollable.css +31 -34
  184. package/components/Table/table-scrollable.scss +44 -41
  185. package/components/Table/table-tree-view.css +287 -279
  186. package/components/Table/table-tree-view.scss +84 -84
  187. package/components/Table/table.css +316 -279
  188. package/components/Table/table.scss +346 -301
  189. package/components/Tabs/tabs.css +215 -240
  190. package/components/Tabs/tabs.scss +130 -162
  191. package/components/TextInputGroup/text-input-group.css +122 -64
  192. package/components/TextInputGroup/text-input-group.scss +144 -87
  193. package/components/Tile/tile.css +15 -15
  194. package/components/Tile/tile.scss +16 -17
  195. package/components/Timestamp/timestamp.css +13 -19
  196. package/components/Timestamp/timestamp.scss +16 -22
  197. package/components/Title/title.css +14 -13
  198. package/components/Title/title.scss +15 -15
  199. package/components/ToggleGroup/toggle-group.css +37 -37
  200. package/components/ToggleGroup/toggle-group.scss +38 -41
  201. package/components/Toolbar/toolbar.css +547 -1431
  202. package/components/Toolbar/toolbar.scss +159 -123
  203. package/components/Tooltip/tooltip.css +28 -27
  204. package/components/Tooltip/tooltip.scss +31 -30
  205. package/components/TreeView/tree-view.css +184 -184
  206. package/components/TreeView/tree-view.scss +133 -133
  207. package/components/Truncate/truncate.css +2 -2
  208. package/components/Truncate/truncate.scss +7 -8
  209. package/components/Wizard/wizard.css +190 -154
  210. package/components/Wizard/wizard.scss +211 -165
  211. package/components/_index.css +22378 -0
  212. package/components/_index.scss +82 -0
  213. package/docs/components/AboutModalBox/examples/AboutModalBox.md +3 -1
  214. package/docs/components/Accordion/examples/Accordion.md +1 -1
  215. package/docs/components/ActionList/examples/ActionList.md +64 -24
  216. package/docs/components/Alert/examples/Alert.md +116 -74
  217. package/docs/components/BackToTop/examples/BackToTop.md +1 -1
  218. package/docs/components/Badge/examples/Badge.md +6 -16
  219. package/docs/components/Banner/examples/Banner.md +16 -10
  220. package/docs/components/Brand/examples/Brand.md +2 -2
  221. package/docs/components/Breadcrumb/examples/Breadcrumb.md +19 -59
  222. package/docs/components/Button/examples/Button.md +537 -368
  223. package/docs/components/CalendarMonth/examples/CalendarMonth.md +24 -8
  224. package/docs/components/Card/examples/Card.md +372 -658
  225. package/docs/components/Check/examples/Check.md +10 -15
  226. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +92 -47
  227. package/docs/components/CodeBlock/examples/CodeBlock.md +51 -28
  228. package/docs/components/CodeEditor/examples/CodeEditor.md +41 -22
  229. package/docs/components/Content/examples/Content.md +600 -60
  230. package/docs/components/DataList/examples/DataList.md +291 -1028
  231. package/docs/components/DatePicker/examples/DatePicker.md +18 -6
  232. package/docs/components/DescriptionList/examples/DescriptionList.md +80 -55
  233. package/docs/components/Drawer/examples/Drawer.md +60 -21
  234. package/docs/components/DualListSelector/examples/DualListSelector.md +364 -996
  235. package/docs/components/EmptyState/examples/EmptyState.md +123 -53
  236. package/docs/components/ExpandableSection/examples/ExpandableSection.md +96 -91
  237. package/docs/components/FileUpload/examples/FileUpload.md +42 -14
  238. package/docs/components/Form/examples/Form.md +100 -26
  239. package/docs/components/Hint/examples/Hint.md +54 -164
  240. package/docs/components/InlineEdit/examples/InlineEdit.md +132 -45
  241. package/docs/components/InputGroup/examples/InputGroup.md +38 -62
  242. package/docs/components/JumpLinks/examples/JumpLinks.md +189 -72
  243. package/docs/components/Label/examples/Label.md +2577 -406
  244. package/docs/components/Login/examples/Login.md +372 -334
  245. package/docs/components/Masthead/examples/masthead.md +515 -484
  246. package/docs/components/Menu/examples/Menu.md +77 -138
  247. package/docs/components/MenuToggle/examples/MenuToggle.md +289 -39
  248. package/docs/components/ModalBox/examples/ModalBox.md +158 -100
  249. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +137 -97
  250. package/docs/components/Nav/examples/Navigation.css +2 -7
  251. package/docs/components/Nav/examples/Navigation.md +337 -270
  252. package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +515 -2076
  253. package/docs/components/NumberInput/examples/NumberInput.md +96 -48
  254. package/docs/components/OverflowMenu/examples/overflow-menu.css +4 -28
  255. package/docs/components/OverflowMenu/examples/overflow-menu.md +104 -159
  256. package/docs/components/Page/examples/Page.css +5 -9
  257. package/docs/components/Page/examples/Page.md +254 -181
  258. package/docs/components/Pagination/examples/Pagination.md +336 -756
  259. package/docs/components/Panel/examples/Panel.md +3 -2
  260. package/docs/components/Popover/examples/Popover.md +60 -15
  261. package/docs/components/ProgressStepper/examples/ProgressStepper.md +15 -15
  262. package/docs/components/Sidebar/examples/Sidebar.css +4 -2
  263. package/docs/components/Sidebar/examples/Sidebar.md +3 -3
  264. package/docs/components/Skeleton/examples/Skeleton.css +1 -1
  265. package/docs/components/SkipToContent/examples/SkipToContent.md +3 -1
  266. package/docs/components/Slider/examples/Slider.md +53 -45
  267. package/docs/components/Spinner/examples/Spinner.md +1 -1
  268. package/docs/components/Switch/examples/Switch.md +33 -148
  269. package/docs/components/Table/examples/Table.css +11 -6
  270. package/docs/components/Table/examples/Table.md +5302 -2464
  271. package/docs/components/Tabs/examples/Tabs.md +1267 -607
  272. package/docs/components/TextInputGroup/examples/TextInputGroup.css +8 -3
  273. package/docs/components/TextInputGroup/examples/TextInputGroup.md +469 -278
  274. package/docs/components/Tile/examples/Tile.css +5 -5
  275. package/docs/components/Timestamp/examples/Timestamp.md +7 -1
  276. package/docs/components/ToggleGroup/examples/toggle-group.md +1 -3
  277. package/docs/components/Toolbar/examples/Toolbar.css +50 -39
  278. package/docs/components/Toolbar/examples/Toolbar.md +1562 -1200
  279. package/docs/components/Tooltip/examples/Tooltip.css +1 -1
  280. package/docs/components/TreeView/examples/TreeView.md +627 -49
  281. package/docs/components/Truncate/examples/Truncate.css +1 -2
  282. package/docs/components/Wizard/examples/Wizard.md +1595 -126
  283. package/docs/demos/AboutModal/examples/AboutModal.md +191 -198
  284. package/docs/demos/Alert/examples/Alert.md +924 -909
  285. package/docs/demos/BackToTop/examples/BackToTop.md +318 -327
  286. package/docs/demos/Banner/examples/Banner.md +641 -659
  287. package/docs/demos/Button/examples/Button.md +8 -8
  288. package/docs/demos/Card/examples/Card.css +6 -6
  289. package/docs/demos/Card/examples/Card.md +419 -606
  290. package/docs/demos/CardView/examples/CardView.md +822 -1435
  291. package/docs/demos/Dashboard/examples/Dashboard.md +1308 -1442
  292. package/docs/demos/DataList/examples/DataList.md +3210 -3424
  293. package/docs/demos/DescriptionList/examples/DescriptionList.md +899 -937
  294. package/docs/demos/Drawer/examples/Drawer.md +1165 -1176
  295. package/docs/demos/Form/examples/BasicForms.md +153 -88
  296. package/docs/demos/JumpLinks/examples/JumpLinks.md +1710 -1602
  297. package/docs/demos/Masthead/examples/Masthead.md +1719 -1583
  298. package/docs/demos/Modal/examples/Modal.md +1231 -1235
  299. package/docs/demos/Nav/examples/Nav.md +1216 -1230
  300. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +1910 -4577
  301. package/docs/demos/Page/examples/Page.css +11 -0
  302. package/docs/demos/Page/examples/Page.md +3753 -2540
  303. package/docs/demos/Panel/Panel.md +88 -0
  304. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +9 -3
  305. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +16 -48
  306. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +5150 -6255
  307. package/docs/demos/Skeleton/examples/Skeleton.md +297 -304
  308. package/docs/demos/Table/examples/Table.md +14272 -15154
  309. package/docs/demos/Tabs/examples/Tabs.md +2821 -2891
  310. package/docs/demos/Toolbar/examples/Toolbar.css +10 -18
  311. package/docs/demos/Toolbar/examples/Toolbar.md +2487 -2663
  312. package/docs/demos/Wizard/examples/Wizard.md +3021 -2784
  313. package/docs/layouts/Bullseye/examples/Bullseye.css +4 -4
  314. package/docs/layouts/Flex/examples/Flex.css +4 -4
  315. package/docs/layouts/Flex/examples/Flex.md +50 -50
  316. package/docs/layouts/Gallery/examples/Gallery.css +4 -4
  317. package/docs/layouts/Gallery/examples/Gallery.md +6 -6
  318. package/docs/layouts/Grid/examples/Grid.css +3 -3
  319. package/docs/layouts/Grid/examples/Grid.md +33 -33
  320. package/docs/layouts/Level/examples/Level.css +5 -5
  321. package/docs/layouts/Split/examples/Split.css +4 -4
  322. package/docs/layouts/Stack/examples/Stack.css +5 -5
  323. package/docs/utilities/Accessibility/examples/Accessibility.md +2 -2
  324. package/docs/utilities/Alignment/examples/Alignment.css +6 -6
  325. package/docs/utilities/Alignment/examples/Alignment.md +5 -5
  326. package/docs/utilities/BackgroundColor/examples/BackgroundColor.md +7 -67
  327. package/docs/utilities/BoxShadow/examples/box-shadow.css +11 -11
  328. package/docs/utilities/BoxShadow/examples/box-shadow.md +15 -38
  329. package/docs/utilities/Display/examples/Display.css +3 -10
  330. package/docs/utilities/Display/examples/Display.md +21 -12
  331. package/docs/utilities/Flex/examples/Flex.css +7 -7
  332. package/docs/utilities/Flex/examples/Flex.md +82 -40
  333. package/docs/utilities/Float/examples/Float.css +5 -5
  334. package/docs/utilities/Float/examples/Float.md +6 -6
  335. package/docs/utilities/Sizing/examples/Sizing.css +6 -6
  336. package/docs/utilities/Sizing/examples/Sizing.md +60 -60
  337. package/docs/utilities/Spacing/examples/Spacing.css +3 -3
  338. package/docs/utilities/Spacing/examples/Spacing.md +37 -37
  339. package/docs/utilities/Text/examples/Text.md +78 -77
  340. package/icons/pficons.mjs +6 -0
  341. package/layouts/Bullseye/bullseye.css +4 -0
  342. package/layouts/Bullseye/bullseye.scss +5 -1
  343. package/layouts/Flex/flex.css +241 -237
  344. package/layouts/Flex/flex.scss +48 -44
  345. package/layouts/Gallery/gallery.css +15 -11
  346. package/layouts/Gallery/gallery.scss +9 -5
  347. package/layouts/Grid/grid.css +20 -16
  348. package/layouts/Grid/grid.scss +12 -8
  349. package/layouts/Level/level.css +5 -1
  350. package/layouts/Level/level.scss +6 -2
  351. package/layouts/Split/split.css +5 -1
  352. package/layouts/Split/split.scss +6 -2
  353. package/layouts/Stack/stack.css +5 -1
  354. package/layouts/Stack/stack.scss +6 -2
  355. package/layouts/_index.css +3461 -0
  356. package/layouts/_index.scss +8 -0
  357. package/package.json +39 -39
  358. package/patternfly-addons.css +2071 -2648
  359. package/patternfly-addons.scss +2 -12
  360. package/patternfly-base-no-globals.css +1429 -1645
  361. package/patternfly-base-no-globals.scss +5 -3
  362. package/patternfly-base.css +1511 -1723
  363. package/patternfly-base.scss +2 -6
  364. package/patternfly-charts.css +579 -240
  365. package/patternfly-charts.scss +352 -337
  366. package/patternfly-no-globals.css +19895 -23410
  367. package/patternfly-no-globals.scss +5 -4
  368. package/patternfly.css +19999 -23510
  369. package/patternfly.min.css +1 -1
  370. package/patternfly.min.css.map +1 -1
  371. package/patternfly.scss +3 -4
  372. package/sass-utilities/_index.scss +6 -0
  373. package/sass-utilities/functions.scss +25 -25
  374. package/sass-utilities/{_init.scss → init.scss} +6 -6
  375. package/sass-utilities/mixins.scss +108 -72
  376. package/sass-utilities/{component-namespaces.scss → namespaces-components.scss} +3 -27
  377. package/sass-utilities/{layout-namespaces.scss → namespaces-layouts.scss} +3 -1
  378. package/sass-utilities/scss-variables.scss +49 -261
  379. package/utilities/Accessibility/accessibility.css +15 -15
  380. package/utilities/Accessibility/accessibility.scss +8 -6
  381. package/utilities/Alignment/alignment.css +29 -29
  382. package/utilities/Alignment/alignment.scss +6 -4
  383. package/utilities/BackgroundColor/background-color.css +67 -0
  384. package/utilities/BackgroundColor/background-color.scss +16 -0
  385. package/utilities/BoxShadow/box-shadow.css +15 -39
  386. package/utilities/BoxShadow/box-shadow.scss +19 -28
  387. package/utilities/Display/display.css +43 -5
  388. package/utilities/Display/display.scss +7 -4
  389. package/utilities/Flex/flex.css +50 -50
  390. package/utilities/Flex/flex.scss +21 -20
  391. package/utilities/Float/float.css +29 -29
  392. package/utilities/Float/float.scss +6 -6
  393. package/utilities/Sizing/sizing.css +58 -58
  394. package/utilities/Sizing/sizing.scss +23 -21
  395. package/utilities/Spacing/spacing.css +1372 -1372
  396. package/utilities/Spacing/spacing.scss +6 -6
  397. package/utilities/Text/text.css +419 -662
  398. package/utilities/Text/text.scss +81 -107
  399. package/utilities/_index.css +7815 -0
  400. package/utilities/_index.scss +10 -0
  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. |