@patternfly/patternfly 6.0.0-alpha.9 → 6.0.0-alpha.90

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 (341) hide show
  1. package/CODE_OF_CONDUCT.md +1 -2
  2. package/assets/images/PF-Backdrop.svg +1 -0
  3. package/assets/images/PF-HorizontalLogo-Color.svg +29 -0
  4. package/assets/images/PF-HorizontalLogo-Reverse.svg +28 -0
  5. package/assets/images/PF-IconLogo-Reverse.svg +14 -0
  6. package/assets/images/PF-IconLogo-color.svg +17 -0
  7. package/assets/images/PF-IconLogo.svg +17 -0
  8. package/assets/images/logo__pf--reverse-on-md.svg +1 -1
  9. package/assets/images/pf-background.svg +22 -0
  10. package/assets/images/pf-c-brand__logo-on-lg-white.svg +32 -0
  11. package/assets/images/pf-c-brand__logo-on-md-white.svg +42 -0
  12. package/assets/images/pf-c-brand__logo-on-sm-white.svg +17 -0
  13. package/assets/images/pf-c-brand__logo-on-sm.svg +1 -1
  14. package/assets/images/pf-c-brand__logo-on-xl-white.svg +39 -0
  15. package/assets/images/pf_logo_white.hbs +35 -0
  16. package/assets/images/pf_logo_white.svg +38 -0
  17. package/base/_common.scss +8 -4
  18. package/base/_globals.scss +4 -6
  19. package/base/_variables.scss +2 -7
  20. package/base/patternfly-common.css +8 -4
  21. package/base/patternfly-globals.css +4 -3
  22. package/base/patternfly-variables.css +1005 -856
  23. package/base/tokens/_tokens-charts.scss +159 -0
  24. package/base/tokens/_tokens-dark.scss +319 -290
  25. package/base/tokens/_tokens-default.scss +485 -329
  26. package/base/tokens/_tokens-font.scss +122 -58
  27. package/base/tokens/_tokens-palette.scss +71 -71
  28. package/base/tokens/_workspace-overrides.scss +7 -0
  29. package/components/AboutModalBox/about-modal-box.css +57 -94
  30. package/components/AboutModalBox/about-modal-box.scss +37 -62
  31. package/components/Accordion/accordion.css +85 -177
  32. package/components/Accordion/accordion.scss +96 -195
  33. package/components/ActionList/action-list.css +18 -17
  34. package/components/ActionList/action-list.scss +26 -16
  35. package/components/Alert/alert-group.css +20 -16
  36. package/components/Alert/alert-group.scss +20 -16
  37. package/components/Alert/alert.css +59 -84
  38. package/components/Alert/alert.scss +62 -78
  39. package/components/Avatar/avatar.css +10 -13
  40. package/components/Avatar/avatar.scss +10 -17
  41. package/components/BackToTop/back-to-top.css +17 -16
  42. package/components/BackToTop/back-to-top.scss +12 -12
  43. package/components/Backdrop/backdrop.css +6 -2
  44. package/components/Backdrop/backdrop.scss +5 -2
  45. package/components/BackgroundImage/background-image.css +5 -1
  46. package/components/BackgroundImage/background-image.scss +5 -1
  47. package/components/Badge/badge.css +23 -15
  48. package/components/Badge/badge.scss +25 -17
  49. package/components/Banner/banner.css +90 -64
  50. package/components/Banner/banner.scss +95 -32
  51. package/components/Breadcrumb/breadcrumb.css +27 -16
  52. package/components/Breadcrumb/breadcrumb.scss +27 -18
  53. package/components/Button/button.css +398 -354
  54. package/components/Button/button.scss +455 -477
  55. package/components/CalendarMonth/calendar-month.css +61 -92
  56. package/components/CalendarMonth/calendar-month.scss +68 -63
  57. package/components/Card/card.css +100 -194
  58. package/components/Card/card.scss +121 -237
  59. package/components/Check/check.css +24 -21
  60. package/components/Check/check.scss +25 -23
  61. package/components/ClipboardCopy/clipboard-copy.css +30 -33
  62. package/components/ClipboardCopy/clipboard-copy.scss +34 -26
  63. package/components/CodeBlock/code-block.css +22 -9
  64. package/components/CodeBlock/code-block.scss +22 -10
  65. package/components/CodeEditor/code-editor.css +94 -72
  66. package/components/CodeEditor/code-editor.scss +104 -82
  67. package/components/Content/content.css +7 -7
  68. package/components/Content/content.scss +7 -7
  69. package/components/DataList/data-list.css +101 -158
  70. package/components/DataList/data-list.scss +95 -154
  71. package/components/DatePicker/date-picker.css +13 -14
  72. package/components/DatePicker/date-picker.scss +12 -16
  73. package/components/DescriptionList/description-list.css +39 -34
  74. package/components/DescriptionList/description-list.scss +25 -25
  75. package/components/Divider/divider.css +91 -169
  76. package/components/Divider/divider.scss +60 -77
  77. package/components/DragDrop/drag-drop.css +18 -14
  78. package/components/DragDrop/drag-drop.scss +18 -17
  79. package/components/Drawer/drawer.css +112 -113
  80. package/components/Drawer/drawer.scss +134 -134
  81. package/components/Dropdown/dropdown.css +1 -3
  82. package/components/Dropdown/dropdown.scss +2 -6
  83. package/components/DualListSelector/dual-list-selector.css +54 -51
  84. package/components/DualListSelector/dual-list-selector.scss +55 -54
  85. package/components/EmptyState/empty-state.css +57 -34
  86. package/components/EmptyState/empty-state.scss +63 -34
  87. package/components/ExpandableSection/expandable-section.css +64 -62
  88. package/components/ExpandableSection/expandable-section.scss +73 -76
  89. package/components/FileUpload/file-upload.css +28 -34
  90. package/components/FileUpload/file-upload.scss +30 -42
  91. package/components/Form/form.css +66 -116
  92. package/components/Form/form.scss +63 -128
  93. package/components/FormControl/form-control.css +86 -111
  94. package/components/FormControl/form-control.scss +88 -92
  95. package/components/HelperText/helper-text.css +28 -34
  96. package/components/HelperText/helper-text.scss +30 -40
  97. package/components/Hint/hint.css +28 -21
  98. package/components/Hint/hint.scss +28 -24
  99. package/components/Icon/icon.css +154 -18
  100. package/components/Icon/icon.scss +187 -20
  101. package/components/InlineEdit/inline-edit.css +8 -7
  102. package/components/InlineEdit/inline-edit.scss +8 -7
  103. package/components/InputGroup/input-group.css +22 -38
  104. package/components/InputGroup/input-group.scss +21 -29
  105. package/components/JumpLinks/jump-links.css +34 -34
  106. package/components/JumpLinks/jump-links.scss +35 -36
  107. package/components/Label/label-group.css +39 -44
  108. package/components/Label/label-group.scss +39 -45
  109. package/components/Label/label.css +378 -355
  110. package/components/Label/label.scss +431 -348
  111. package/components/List/list.css +16 -16
  112. package/components/List/list.scss +17 -17
  113. package/components/Login/login.css +68 -112
  114. package/components/Login/login.scss +54 -82
  115. package/components/Masthead/masthead.css +261 -502
  116. package/components/Masthead/masthead.scss +123 -286
  117. package/components/Menu/menu.css +388 -417
  118. package/components/Menu/menu.scss +370 -525
  119. package/components/MenuToggle/menu-toggle.css +223 -276
  120. package/components/MenuToggle/menu-toggle.scss +322 -390
  121. package/components/ModalBox/modal-box.css +59 -52
  122. package/components/ModalBox/modal-box.scss +57 -53
  123. package/components/MultipleFileUpload/multiple-file-upload.css +77 -50
  124. package/components/MultipleFileUpload/multiple-file-upload.scss +82 -53
  125. package/components/Nav/nav.css +240 -918
  126. package/components/Nav/nav.scss +300 -1082
  127. package/components/NotificationBadge/notification-badge.css +4 -4
  128. package/components/NotificationBadge/notification-badge.scss +4 -4
  129. package/components/NotificationDrawer/notification-drawer.css +104 -115
  130. package/components/NotificationDrawer/notification-drawer.scss +106 -116
  131. package/components/NumberInput/number-input.css +8 -8
  132. package/components/NumberInput/number-input.scss +7 -12
  133. package/components/OverflowMenu/overflow-menu.css +17 -47
  134. package/components/OverflowMenu/overflow-menu.scss +27 -65
  135. package/components/Page/page.css +56 -164
  136. package/components/Page/page.scss +60 -154
  137. package/components/Pagination/pagination.css +57 -124
  138. package/components/Pagination/pagination.scss +40 -128
  139. package/components/Panel/panel.css +27 -23
  140. package/components/Panel/panel.scss +29 -26
  141. package/components/Popover/popover.css +42 -53
  142. package/components/Popover/popover.scss +46 -55
  143. package/components/Progress/progress.css +31 -45
  144. package/components/Progress/progress.scss +36 -55
  145. package/components/ProgressStepper/progress-stepper.css +72 -69
  146. package/components/ProgressStepper/progress-stepper.scss +65 -65
  147. package/components/Radio/radio.css +27 -20
  148. package/components/Radio/radio.scss +28 -22
  149. package/components/Sidebar/sidebar.css +20 -9
  150. package/components/Sidebar/sidebar.scss +23 -11
  151. package/components/SimpleList/simple-list.css +32 -52
  152. package/components/SimpleList/simple-list.scss +37 -51
  153. package/components/Skeleton/skeleton.css +18 -20
  154. package/components/Skeleton/skeleton.scss +17 -21
  155. package/components/SkipToContent/skip-to-content.css +6 -3
  156. package/components/SkipToContent/skip-to-content.scss +8 -6
  157. package/components/Slider/slider.css +34 -30
  158. package/components/Slider/slider.scss +46 -43
  159. package/components/Spinner/spinner.css +17 -34
  160. package/components/Spinner/spinner.scss +19 -47
  161. package/components/Switch/switch.css +42 -38
  162. package/components/Switch/switch.scss +48 -43
  163. package/components/TabContent/tab-content.css +17 -11
  164. package/components/TabContent/tab-content.scss +18 -14
  165. package/components/Table/table-grid.css +31 -47
  166. package/components/Table/table-grid.scss +42 -55
  167. package/components/Table/table-scrollable.css +6 -6
  168. package/components/Table/table-scrollable.scss +8 -8
  169. package/components/Table/table-tree-view.css +81 -74
  170. package/components/Table/table-tree-view.scss +53 -39
  171. package/components/Table/table.css +159 -264
  172. package/components/Table/table.scss +216 -351
  173. package/components/Tabs/tabs.css +142 -175
  174. package/components/Tabs/tabs.scss +158 -218
  175. package/components/TextInputGroup/text-input-group.css +0 -14
  176. package/components/TextInputGroup/text-input-group.scss +3 -16
  177. package/components/Tile/tile.css +40 -81
  178. package/components/Tile/tile.scss +38 -84
  179. package/components/Timestamp/timestamp.css +12 -9
  180. package/components/Timestamp/timestamp.scss +11 -10
  181. package/components/Title/title.css +70 -19
  182. package/components/Title/title.scss +90 -20
  183. package/components/ToggleGroup/toggle-group.css +54 -48
  184. package/components/ToggleGroup/toggle-group.scss +62 -50
  185. package/components/Toolbar/toolbar.css +2527 -1031
  186. package/components/Toolbar/toolbar.scss +233 -520
  187. package/components/Tooltip/tooltip.css +16 -18
  188. package/components/Tooltip/tooltip.scss +20 -24
  189. package/components/TreeView/tree-view.css +76 -97
  190. package/components/TreeView/tree-view.scss +82 -113
  191. package/components/Truncate/truncate.css +4 -0
  192. package/components/Truncate/truncate.scss +3 -0
  193. package/components/Wizard/wizard.css +122 -205
  194. package/components/Wizard/wizard.scss +121 -181
  195. package/docs/components/AboutModalBox/examples/AboutModalBox.md +2 -2
  196. package/docs/components/Accordion/examples/Accordion.md +614 -416
  197. package/docs/components/ActionList/examples/ActionList.md +73 -22
  198. package/docs/components/Alert/examples/Alert.md +3 -3
  199. package/docs/components/Avatar/examples/Avatar.md +5 -19
  200. package/docs/components/BackgroundImage/examples/BackgroundImage.md +1 -1
  201. package/docs/components/Badge/examples/Badge.md +21 -0
  202. package/docs/components/Banner/examples/Banner.md +48 -25
  203. package/docs/components/Brand/examples/Brand.css +12 -0
  204. package/docs/components/Brand/examples/Brand.md +51 -32
  205. package/docs/components/Breadcrumb/examples/Breadcrumb.md +1 -1
  206. package/docs/components/Button/examples/Button.css +4 -0
  207. package/docs/components/Button/examples/Button.md +1439 -113
  208. package/docs/components/CalendarMonth/examples/CalendarMonth.md +44 -220
  209. package/docs/components/Card/examples/Card.md +550 -133
  210. package/docs/components/Check/examples/Check.md +1 -0
  211. package/docs/components/CodeBlock/examples/CodeBlock.md +4 -4
  212. package/docs/components/CodeEditor/examples/CodeEditor.md +144 -132
  213. package/docs/components/Content/examples/Content.md +5 -5
  214. package/docs/components/DatePicker/examples/DatePicker.md +5 -2
  215. package/docs/components/Divider/examples/Divider.css +3 -1
  216. package/docs/components/Divider/examples/Divider.md +30 -5
  217. package/docs/components/DragDrop/examples/DragDrop.css +1 -1
  218. package/docs/components/Drawer/examples/Drawer.md +294 -256
  219. package/docs/components/DualListSelector/examples/DualListSelector.md +18 -18
  220. package/docs/components/EmptyState/examples/EmptyState.md +45 -1
  221. package/docs/components/ExpandableSection/examples/ExpandableSection.md +49 -28
  222. package/docs/components/FileUpload/examples/FileUpload.md +112 -53
  223. package/docs/components/Form/examples/Form.md +134 -89
  224. package/docs/components/Icon/examples/Icon.md +82 -11
  225. package/docs/components/InlineEdit/examples/InlineEdit.md +3 -1
  226. package/docs/components/JumpLinks/examples/JumpLinks.md +280 -168
  227. package/docs/components/Label/examples/Label.css +4 -0
  228. package/docs/components/Label/examples/Label.md +3090 -703
  229. package/docs/components/LogViewer/examples/LogViewer.md +100 -80
  230. package/docs/components/Login/examples/Login.md +160 -105
  231. package/docs/components/Masthead/examples/masthead.md +443 -65
  232. package/docs/components/Menu/examples/Menu.css +7 -11
  233. package/docs/components/Menu/examples/Menu.md +213 -486
  234. package/docs/components/MenuToggle/examples/MenuToggle.md +253 -224
  235. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +9 -9
  236. package/docs/components/Nav/examples/Navigation.css +1 -23
  237. package/docs/components/Nav/examples/Navigation.md +69 -243
  238. package/docs/components/Page/examples/Page.css +0 -8
  239. package/docs/components/Page/examples/Page.md +22 -21
  240. package/docs/components/Pagination/examples/Pagination.md +663 -637
  241. package/docs/components/Panel/examples/Panel.md +12 -0
  242. package/docs/components/Popover/examples/Popover.md +1 -1
  243. package/docs/components/ProgressStepper/examples/ProgressStepper.md +15 -14
  244. package/docs/components/Radio/examples/Radio.md +1 -1
  245. package/docs/components/Sidebar/examples/Sidebar.md +19 -0
  246. package/docs/components/SimpleList/examples/SimpleList.md +3 -3
  247. package/docs/components/TabContent/examples/TabContent.md +10 -10
  248. package/docs/components/Table/examples/Table.md +8 -8
  249. package/docs/components/Tabs/examples/Tabs.css +1 -1
  250. package/docs/components/Tabs/examples/Tabs.md +1025 -826
  251. package/docs/components/Tile/examples/Tile.md +264 -144
  252. package/docs/components/Title/examples/Title.md +18 -0
  253. package/docs/components/Toolbar/examples/Toolbar.css +20 -15
  254. package/docs/components/Toolbar/examples/Toolbar.md +985 -3341
  255. package/docs/components/TreeView/examples/TreeView.md +7 -57
  256. package/docs/components/Truncate/examples/Truncate.css +2 -2
  257. package/docs/components/Wizard/examples/Wizard.md +31 -7
  258. package/docs/demos/AboutModal/examples/AboutModal.md +116 -35
  259. package/docs/demos/Alert/examples/Alert.md +366 -99
  260. package/docs/demos/BackToTop/examples/BackToTop.md +114 -33
  261. package/docs/demos/Banner/examples/Banner.md +235 -68
  262. package/docs/demos/Button/examples/Button.md +1 -1
  263. package/docs/demos/Card/examples/Card.md +2 -2
  264. package/docs/demos/CardView/examples/CardView.md +256 -192
  265. package/docs/demos/ContextSelector/examples/ContextSelector.md +414 -107
  266. package/docs/demos/Dashboard/examples/Dashboard.md +114 -33
  267. package/docs/demos/DataList/examples/DataList.md +1049 -950
  268. package/docs/demos/DescriptionList/examples/DescriptionList.md +342 -99
  269. package/docs/demos/Drawer/examples/Drawer.md +700 -271
  270. package/docs/demos/Form/examples/BasicForms.md +138 -84
  271. package/docs/demos/JumpLinks/examples/JumpLinks.md +989 -409
  272. package/docs/demos/Masthead/examples/Masthead.md +833 -357
  273. package/docs/demos/Modal/examples/Modal.md +717 -222
  274. package/docs/demos/Nav/examples/Nav.md +763 -926
  275. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +575 -165
  276. package/docs/demos/Page/examples/Page.md +1050 -309
  277. package/docs/demos/Page/examples/Penta.md +73 -31
  278. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +20 -16
  279. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +44 -32
  280. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +1276 -861
  281. package/docs/demos/Skeleton/examples/Skeleton.md +114 -33
  282. package/docs/demos/Table/examples/Table.md +4002 -3503
  283. package/docs/demos/Tabs/examples/Tabs.md +711 -219
  284. package/docs/demos/Toolbar/examples/Toolbar.css +10 -0
  285. package/docs/demos/Toolbar/examples/Toolbar.md +1350 -1480
  286. package/docs/demos/Wizard/examples/Wizard.md +1134 -315
  287. package/docs/layouts/Flex/examples/Flex.md +11 -11
  288. package/package.json +32 -32
  289. package/patternfly-base-no-globals-theme-dark-unversioned.css +1021 -868
  290. package/patternfly-base-no-globals.css +1021 -868
  291. package/patternfly-base-theme-dark-unversioned.css +1027 -873
  292. package/patternfly-base.css +1027 -873
  293. package/patternfly-no-globals.css +9048 -8979
  294. package/patternfly-theme-dark-unversioned.css +9051 -8981
  295. package/patternfly.css +9051 -8981
  296. package/patternfly.min.css +1 -1
  297. package/patternfly.min.css.map +1 -1
  298. package/sass-utilities/mixins.scss +18 -0
  299. package/base/themes/dark/_variables.scss +0 -102
  300. package/components/AboutModalBox/themes/dark/about-modal-box.scss +0 -7
  301. package/components/Accordion/themes/dark/accordion.scss +0 -9
  302. package/components/Alert/themes/dark/alert.scss +0 -17
  303. package/components/Badge/themes/dark/badge.scss +0 -9
  304. package/components/Banner/themes/dark/banner.scss +0 -14
  305. package/components/Button/themes/dark/button.scss +0 -51
  306. package/components/CalendarMonth/themes/dark/calendar-month.scss +0 -37
  307. package/components/Card/themes/dark/card.scss +0 -20
  308. package/components/ClipboardCopy/themes/dark/clipboard-copy.scss +0 -19
  309. package/components/CodeEditor/themes/dark/code-editor.scss +0 -14
  310. package/components/DataList/themes/dark/data-list.scss +0 -10
  311. package/components/DatePicker/themes/dark/date-picker.scss +0 -8
  312. package/components/DragDrop/themes/dark/drag-drop.scss +0 -7
  313. package/components/Drawer/themes/dark/drawer.scss +0 -13
  314. package/components/DualListSelector/themes/dark/dual-list-selector.scss +0 -9
  315. package/components/Form/themes/dark/form.scss +0 -7
  316. package/components/FormControl/themes/dark/form-control.scss +0 -24
  317. package/components/HelperText/themes/dark/helper-text.scss +0 -7
  318. package/components/Hint/themes/dark/hint.scss +0 -8
  319. package/components/InputGroup/themes/dark/input-group.scss +0 -22
  320. package/components/Label/themes/dark/label.scss +0 -53
  321. package/components/Login/themes/dark/login.scss +0 -12
  322. package/components/Masthead/themes/dark/masthead.scss +0 -14
  323. package/components/MenuToggle/themes/dark/menu-toggle.scss +0 -27
  324. package/components/ModalBox/themes/dark/modal-box.scss +0 -7
  325. package/components/NotificationDrawer/themes/dark/notification-drawer.scss +0 -14
  326. package/components/Page/themes/dark/page.scss +0 -69
  327. package/components/Pagination/themes/dark/pagination.scss +0 -7
  328. package/components/Panel/themes/dark/panel.scss +0 -7
  329. package/components/Popover/themes/dark/popover.scss +0 -11
  330. package/components/Progress/themes/dark/progress.scss +0 -9
  331. package/components/SimpleList/themes/dark/simple-list.scss +0 -14
  332. package/components/Skeleton/themes/dark/skeleton.scss +0 -10
  333. package/components/Switch/themes/dark/switch.scss +0 -11
  334. package/components/Tabs/themes/dark/tabs.scss +0 -10
  335. package/components/TextInputGroup/themes/dark/text-input-group.scss +0 -11
  336. package/components/Tile/themes/dark/tile.scss +0 -10
  337. package/components/ToggleGroup/themes/dark/toggle-group.scss +0 -12
  338. package/components/Tooltip/themes/dark/tooltip.scss +0 -8
  339. package/components/TreeView/themes/dark/tree-view.scss +0 -8
  340. package/components/Wizard/themes/dark/wizard.scss +0 -12
  341. package/docs/components/Avatar/examples/Avatar.css +0 -3
package/docs/components/MenuToggle/examples/MenuToggle.md CHANGED
@@ -14,7 +14,7 @@ cssPrefix: pf-v5-c-menu-toggle
14
14
  <span class="pf-v5-c-menu-toggle__text">Collapsed</span>
15
15
  <span class="pf-v5-c-menu-toggle__controls">
16
16
  <span class="pf-v5-c-menu-toggle__toggle-icon">
17
- <i class="fas fa-angle-down" aria-hidden="true"></i>
17
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
18
18
  </span>
19
19
  </span>
20
20
  </button>
@@ -32,7 +32,7 @@ cssPrefix: pf-v5-c-menu-toggle
32
32
  <span class="pf-v5-c-menu-toggle__text">Expanded</span>
33
33
  <span class="pf-v5-c-menu-toggle__controls">
34
34
  <span class="pf-v5-c-menu-toggle__toggle-icon">
35
- <i class="fas fa-angle-down" aria-hidden="true"></i>
35
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
36
36
  </span>
37
37
  </span>
38
38
  </button>
@@ -43,7 +43,7 @@ cssPrefix: pf-v5-c-menu-toggle
43
43
 
44
44
  ```html
45
45
  <button
46
- class="pf-v5-c-menu-toggle"
46
+ class="pf-v5-c-menu-toggle pf-m-disabled"
47
47
  type="button"
48
48
  aria-expanded="false"
49
49
  disabled
@@ -51,7 +51,7 @@ cssPrefix: pf-v5-c-menu-toggle
51
51
  <span class="pf-v5-c-menu-toggle__text">Disabled</span>
52
52
  <span class="pf-v5-c-menu-toggle__controls">
53
53
  <span class="pf-v5-c-menu-toggle__toggle-icon">
54
- <i class="fas fa-angle-down" aria-hidden="true"></i>
54
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
55
55
  </span>
56
56
  </span>
57
57
  </button>
@@ -68,7 +68,7 @@ cssPrefix: pf-v5-c-menu-toggle
68
68
  </span>
69
69
  <span class="pf-v5-c-menu-toggle__controls">
70
70
  <span class="pf-v5-c-menu-toggle__toggle-icon">
71
- <i class="fas fa-angle-down" aria-hidden="true"></i>
71
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
72
72
  </span>
73
73
  </span>
74
74
  </button>
@@ -86,7 +86,7 @@ cssPrefix: pf-v5-c-menu-toggle
86
86
  <span class="pf-v5-c-menu-toggle__text">Collapsed</span>
87
87
  <span class="pf-v5-c-menu-toggle__controls">
88
88
  <span class="pf-v5-c-menu-toggle__toggle-icon">
89
- <i class="fas fa-angle-down" aria-hidden="true"></i>
89
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
90
90
  </span>
91
91
  </span>
92
92
  </button>
@@ -103,7 +103,7 @@ cssPrefix: pf-v5-c-menu-toggle
103
103
  <span class="pf-v5-c-menu-toggle__text">Icon</span>
104
104
  <span class="pf-v5-c-menu-toggle__controls">
105
105
  <span class="pf-v5-c-menu-toggle__toggle-icon">
106
- <i class="fas fa-angle-down" aria-hidden="true"></i>
106
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
107
107
  </span>
108
108
  </span>
109
109
  </button>
@@ -117,14 +117,14 @@ cssPrefix: pf-v5-c-menu-toggle
117
117
  <span class="pf-v5-c-menu-toggle__text">Expanded</span>
118
118
  <span class="pf-v5-c-menu-toggle__controls">
119
119
  <span class="pf-v5-c-menu-toggle__toggle-icon">
120
- <i class="fas fa-angle-down" aria-hidden="true"></i>
120
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
121
121
  </span>
122
122
  </span>
123
123
  </button>
124
124
 
125
125
  &nbsp;
126
126
  <button
127
- class="pf-v5-c-menu-toggle pf-m-primary"
127
+ class="pf-v5-c-menu-toggle pf-m-primary pf-m-disabled"
128
128
  type="button"
129
129
  aria-expanded="false"
130
130
  disabled
@@ -132,7 +132,7 @@ cssPrefix: pf-v5-c-menu-toggle
132
132
  <span class="pf-v5-c-menu-toggle__text">Disabled</span>
133
133
  <span class="pf-v5-c-menu-toggle__controls">
134
134
  <span class="pf-v5-c-menu-toggle__toggle-icon">
135
- <i class="fas fa-angle-down" aria-hidden="true"></i>
135
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
136
136
  </span>
137
137
  </span>
138
138
  </button>
@@ -150,7 +150,7 @@ cssPrefix: pf-v5-c-menu-toggle
150
150
  <span class="pf-v5-c-menu-toggle__text">Collapsed</span>
151
151
  <span class="pf-v5-c-menu-toggle__controls">
152
152
  <span class="pf-v5-c-menu-toggle__toggle-icon">
153
- <i class="fas fa-angle-down" aria-hidden="true"></i>
153
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
154
154
  </span>
155
155
  </span>
156
156
  </button>
@@ -167,7 +167,7 @@ cssPrefix: pf-v5-c-menu-toggle
167
167
  <span class="pf-v5-c-menu-toggle__text">Icon</span>
168
168
  <span class="pf-v5-c-menu-toggle__controls">
169
169
  <span class="pf-v5-c-menu-toggle__toggle-icon">
170
- <i class="fas fa-angle-down" aria-hidden="true"></i>
170
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
171
171
  </span>
172
172
  </span>
173
173
  </button>
@@ -181,14 +181,14 @@ cssPrefix: pf-v5-c-menu-toggle
181
181
  <span class="pf-v5-c-menu-toggle__text">Expanded</span>
182
182
  <span class="pf-v5-c-menu-toggle__controls">
183
183
  <span class="pf-v5-c-menu-toggle__toggle-icon">
184
- <i class="fas fa-angle-down" aria-hidden="true"></i>
184
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
185
185
  </span>
186
186
  </span>
187
187
  </button>
188
188
 
189
189
  &nbsp;
190
190
  <button
191
- class="pf-v5-c-menu-toggle pf-m-secondary"
191
+ class="pf-v5-c-menu-toggle pf-m-secondary pf-m-disabled"
192
192
  type="button"
193
193
  aria-expanded="false"
194
194
  disabled
@@ -196,7 +196,7 @@ cssPrefix: pf-v5-c-menu-toggle
196
196
  <span class="pf-v5-c-menu-toggle__text">Disabled</span>
197
197
  <span class="pf-v5-c-menu-toggle__controls">
198
198
  <span class="pf-v5-c-menu-toggle__toggle-icon">
199
- <i class="fas fa-angle-down" aria-hidden="true"></i>
199
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
200
200
  </span>
201
201
  </span>
202
202
  </button>
@@ -212,9 +212,10 @@ cssPrefix: pf-v5-c-menu-toggle
212
212
  aria-expanded="false"
213
213
  aria-label="Actions"
214
214
  >
215
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
215
+ <span class="pf-v5-c-menu-toggle__icon">
216
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
217
+ </span>
216
218
  </button>
217
-
218
219
  &nbsp;
219
220
  <button
220
221
  class="pf-v5-c-menu-toggle pf-m-plain pf-m-expanded"
@@ -222,18 +223,21 @@ cssPrefix: pf-v5-c-menu-toggle
222
223
  aria-expanded="true"
223
224
  aria-label="Actions"
224
225
  >
225
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
226
+ <span class="pf-v5-c-menu-toggle__icon">
227
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
228
+ </span>
226
229
  </button>
227
-
228
230
  &nbsp;
229
231
  <button
230
- class="pf-v5-c-menu-toggle pf-m-plain"
232
+ class="pf-v5-c-menu-toggle pf-m-plain pf-m-disabled"
231
233
  type="button"
232
234
  aria-expanded="false"
233
235
  disabled
234
236
  aria-label="Actions"
235
237
  >
236
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
238
+ <span class="pf-v5-c-menu-toggle__icon">
239
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
240
+ </span>
237
241
  </button>
238
242
 
239
243
  ```
@@ -245,26 +249,40 @@ cssPrefix: pf-v5-c-menu-toggle
245
249
  class="pf-v5-c-menu-toggle pf-m-plain pf-m-text"
246
250
  type="button"
247
251
  aria-expanded="false"
248
- disabled
249
252
  >
250
- <span class="pf-v5-c-menu-toggle__text">Disabled</span>
253
+ <span class="pf-v5-c-menu-toggle__text">Custom text</span>
251
254
  <span class="pf-v5-c-menu-toggle__controls">
252
255
  <span class="pf-v5-c-menu-toggle__toggle-icon">
253
- <i class="fas fa-angle-down" aria-hidden="true"></i>
256
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
254
257
  </span>
255
258
  </span>
256
259
  </button>
257
260
 
258
261
  &nbsp;
259
262
  <button
260
- class="pf-v5-c-menu-toggle pf-m-plain pf-m-text"
263
+ class="pf-v5-c-menu-toggle pf-m-plain pf-m-text pf-m-expanded"
261
264
  type="button"
262
- aria-expanded="false"
265
+ aria-expanded="true"
263
266
  >
264
267
  <span class="pf-v5-c-menu-toggle__text">Custom text</span>
265
268
  <span class="pf-v5-c-menu-toggle__controls">
266
269
  <span class="pf-v5-c-menu-toggle__toggle-icon">
267
- <i class="fas fa-angle-down" aria-hidden="true"></i>
270
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
271
+ </span>
272
+ </span>
273
+ </button>
274
+
275
+ &nbsp;
276
+ <button
277
+ class="pf-v5-c-menu-toggle pf-m-plain pf-m-text pf-m-disabled"
278
+ type="button"
279
+ aria-expanded="false"
280
+ disabled
281
+ >
282
+ <span class="pf-v5-c-menu-toggle__text">Disabled</span>
283
+ <span class="pf-v5-c-menu-toggle__controls">
284
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
285
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
268
286
  </span>
269
287
  </span>
270
288
  </button>
@@ -274,90 +292,90 @@ cssPrefix: pf-v5-c-menu-toggle
274
292
  ### Split button (checkbox)
275
293
 
276
294
  ```html
277
- <div class="pf-v5-c-menu-toggle pf-m-split-button pf-m-disabled">
295
+ <div
296
+ class="pf-v5-c-menu-toggle pf-m-split-button"
297
+ id="split-button-checkbox-example"
298
+ >
278
299
  <label
279
300
  class="pf-v5-c-check pf-m-standalone"
280
- id="split-button-checkbox-disabled-example-check"
281
- for="split-button-checkbox-disabled-example-check-input"
301
+ for="split-button-checkbox-example-input"
282
302
  >
283
303
  <input
284
304
  class="pf-v5-c-check__input"
285
305
  type="checkbox"
286
- id="split-button-checkbox-disabled-example-check-input"
287
- name="split-button-checkbox-disabled-example-check-input"
288
306
  aria-label="Standalone check"
289
- disabled
290
307
  />
291
308
  </label>
292
309
  <button
293
310
  class="pf-v5-c-menu-toggle__button"
294
311
  type="button"
295
312
  aria-expanded="false"
296
- id="split-button-checkbox-disabled-example-toggle-button"
313
+ id="split-button-checkbox-example-toggle-button"
297
314
  aria-label="Menu toggle"
298
- disabled
299
315
  >
300
316
  <span class="pf-v5-c-menu-toggle__controls">
301
317
  <span class="pf-v5-c-menu-toggle__toggle-icon">
302
- <i class="fas fa-angle-down" aria-hidden="true"></i>
318
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
303
319
  </span>
304
320
  </span>
305
321
  </button>
306
322
  </div>
307
323
  &nbsp;
308
- <div class="pf-v5-c-menu-toggle pf-m-split-button">
324
+ <div
325
+ class="pf-v5-c-menu-toggle pf-m-expanded pf-m-split-button"
326
+ id="split-button-checkbox-expanded-example"
327
+ >
309
328
  <label
310
329
  class="pf-v5-c-check pf-m-standalone"
311
- id="split-button-checkbox-example-check"
312
- for="split-button-checkbox-example-check-input"
330
+ for="split-button-checkbox-expanded-example-input"
313
331
  >
314
332
  <input
315
333
  class="pf-v5-c-check__input"
316
334
  type="checkbox"
317
- id="split-button-checkbox-example-check-input"
318
- name="split-button-checkbox-example-check-input"
319
335
  aria-label="Standalone check"
320
336
  />
321
337
  </label>
322
338
  <button
323
339
  class="pf-v5-c-menu-toggle__button"
324
340
  type="button"
325
- aria-expanded="false"
326
- id="split-button-checkbox-example-toggle-button"
341
+ aria-expanded="true"
342
+ id="split-button-checkbox-expanded-example-toggle-button"
327
343
  aria-label="Menu toggle"
328
344
  >
329
345
  <span class="pf-v5-c-menu-toggle__controls">
330
346
  <span class="pf-v5-c-menu-toggle__toggle-icon">
331
- <i class="fas fa-angle-down" aria-hidden="true"></i>
347
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
332
348
  </span>
333
349
  </span>
334
350
  </button>
335
351
  </div>
336
352
  &nbsp;
337
- <div class="pf-v5-c-menu-toggle pf-m-expanded pf-m-split-button">
353
+ <div
354
+ class="pf-v5-c-menu-toggle pf-m-split-button pf-m-disabled"
355
+ id="split-button-checkbox-disabled-example"
356
+ >
338
357
  <label
339
358
  class="pf-v5-c-check pf-m-standalone"
340
- id="split-button-checkbox-expanded-example-check"
341
- for="split-button-checkbox-expanded-example-check-input"
359
+ for="split-button-checkbox-disabled-example-input"
342
360
  >
343
361
  <input
344
362
  class="pf-v5-c-check__input"
345
363
  type="checkbox"
346
- id="split-button-checkbox-expanded-example-check-input"
347
- name="split-button-checkbox-expanded-example-check-input"
348
364
  aria-label="Standalone check"
365
+ disabled
349
366
  />
350
367
  </label>
351
368
  <button
352
369
  class="pf-v5-c-menu-toggle__button"
353
370
  type="button"
354
- aria-expanded="true"
355
- id="split-button-checkbox-expanded-example-toggle-button"
371
+ aria-expanded="false"
372
+ id="split-button-checkbox-disabled-example-toggle-button"
356
373
  aria-label="Menu toggle"
374
+ disabled
357
375
  >
358
376
  <span class="pf-v5-c-menu-toggle__controls">
359
377
  <span class="pf-v5-c-menu-toggle__toggle-icon">
360
- <i class="fas fa-angle-down" aria-hidden="true"></i>
378
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
361
379
  </span>
362
380
  </span>
363
381
  </button>
@@ -368,90 +386,80 @@ cssPrefix: pf-v5-c-menu-toggle
368
386
  ### Split button (checkbox with toggle text)
369
387
 
370
388
  ```html
371
- <div class="pf-v5-c-menu-toggle pf-m-split-button pf-m-disabled">
389
+ <div
390
+ class="pf-v5-c-menu-toggle pf-m-split-button"
391
+ id="split-button-checkbox-with-toggle-text-example"
392
+ >
372
393
  <label
373
394
  class="pf-v5-c-check"
374
- id="split-button-checkbox-with-toggle-text-disabled-example-check"
375
- for="split-button-checkbox-with-toggle-text-disabled-example-check-input"
395
+ for="split-button-checkbox-with-toggle-text-example-input"
376
396
  >
377
- <input
378
- class="pf-v5-c-check__input"
379
- type="checkbox"
380
- id="split-button-checkbox-with-toggle-text-disabled-example-check-input"
381
- name="split-button-checkbox-with-toggle-text-disabled-example-check-input"
382
- disabled
383
- />
384
- <span class="pf-v5-c-check__label pf-m-disabled">10 selected</span>
397
+ <input class="pf-v5-c-check__input" type="checkbox" />
398
+ <label class="pf-v5-c-check__label" for="-input">10 selected</label>
385
399
  </label>
386
400
  <button
387
401
  class="pf-v5-c-menu-toggle__button"
388
402
  type="button"
389
403
  aria-expanded="false"
390
- id="split-button-checkbox-with-toggle-text-disabled-example-toggle-button"
404
+ id="split-button-checkbox-with-toggle-text-example-toggle-button"
391
405
  aria-label="Menu toggle"
392
- disabled
393
406
  >
394
407
  <span class="pf-v5-c-menu-toggle__controls">
395
408
  <span class="pf-v5-c-menu-toggle__toggle-icon">
396
- <i class="fas fa-angle-down" aria-hidden="true"></i>
409
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
397
410
  </span>
398
411
  </span>
399
412
  </button>
400
413
  </div>
401
414
  &nbsp;
402
- <div class="pf-v5-c-menu-toggle pf-m-split-button">
415
+ <div
416
+ class="pf-v5-c-menu-toggle pf-m-expanded pf-m-split-button"
417
+ id="split-button-checkbox-with-toggle-text-expanded-example"
418
+ >
403
419
  <label
404
420
  class="pf-v5-c-check"
405
- id="split-button-checkbox-with-toggle-text-example-check"
406
- for="split-button-checkbox-with-toggle-text-example-check-input"
421
+ for="split-button-checkbox-with-toggle-text-expanded-example-input"
407
422
  >
408
- <input
409
- class="pf-v5-c-check__input"
410
- type="checkbox"
411
- id="split-button-checkbox-with-toggle-text-example-check-input"
412
- name="split-button-checkbox-with-toggle-text-example-check-input"
413
- />
414
- <span class="pf-v5-c-check__label">10 selected</span>
423
+ <input class="pf-v5-c-check__input" type="checkbox" />
424
+ <label class="pf-v5-c-check__label" for="-input">10 selected</label>
415
425
  </label>
416
426
  <button
417
427
  class="pf-v5-c-menu-toggle__button"
418
428
  type="button"
419
- aria-expanded="false"
420
- id="split-button-checkbox-with-toggle-text-example-toggle-button"
429
+ aria-expanded="true"
430
+ id="split-button-checkbox-with-toggle-text-expanded-example-toggle-button"
421
431
  aria-label="Menu toggle"
422
432
  >
423
433
  <span class="pf-v5-c-menu-toggle__controls">
424
434
  <span class="pf-v5-c-menu-toggle__toggle-icon">
425
- <i class="fas fa-angle-down" aria-hidden="true"></i>
435
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
426
436
  </span>
427
437
  </span>
428
438
  </button>
429
439
  </div>
430
440
  &nbsp;
431
- <div class="pf-v5-c-menu-toggle pf-m-expanded pf-m-split-button">
441
+ <div
442
+ class="pf-v5-c-menu-toggle pf-m-split-button pf-m-disabled"
443
+ id="split-button-checkbox-with-toggle-text-disabled-example"
444
+ >
432
445
  <label
433
446
  class="pf-v5-c-check"
434
- id="split-button-checkbox-with-toggle-text-expanded-example-check"
435
- for="split-button-checkbox-with-toggle-text-expanded-example-check-input"
447
+ for="split-button-checkbox-with-toggle-text-disabled-example-input"
436
448
  >
437
- <input
438
- class="pf-v5-c-check__input"
439
- type="checkbox"
440
- id="split-button-checkbox-with-toggle-text-expanded-example-check-input"
441
- name="split-button-checkbox-with-toggle-text-expanded-example-check-input"
442
- />
443
- <span class="pf-v5-c-check__label">10 selected</span>
449
+ <input class="pf-v5-c-check__input" type="checkbox" disabled />
450
+ <label class="pf-v5-c-check__label pf-m-disabled" for="-input">10 selected</label>
444
451
  </label>
445
452
  <button
446
453
  class="pf-v5-c-menu-toggle__button"
447
454
  type="button"
448
- aria-expanded="true"
449
- id="split-button-checkbox-with-toggle-text-expanded-example-toggle-button"
455
+ aria-expanded="false"
456
+ id="split-button-checkbox-with-toggle-text-disabled-example-toggle-button"
450
457
  aria-label="Menu toggle"
458
+ disabled
451
459
  >
452
460
  <span class="pf-v5-c-menu-toggle__controls">
453
461
  <span class="pf-v5-c-menu-toggle__toggle-icon">
454
- <i class="fas fa-angle-down" aria-hidden="true"></i>
462
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
455
463
  </span>
456
464
  </span>
457
465
  </button>
@@ -462,90 +470,80 @@ cssPrefix: pf-v5-c-menu-toggle
462
470
  ### Split button, primary
463
471
 
464
472
  ```html
465
- <div class="pf-v5-c-menu-toggle pf-m-split-button pf-m-disabled pf-m-primary">
473
+ <div
474
+ class="pf-v5-c-menu-toggle pf-m-split-button pf-m-primary"
475
+ id="split-button-checkbox-primary-example"
476
+ >
466
477
  <label
467
478
  class="pf-v5-c-check"
468
- id="split-button-checkbox-primary-disabled-example-check"
469
- for="split-button-checkbox-primary-disabled-example-check-input"
479
+ for="split-button-checkbox-primary-example-input"
470
480
  >
471
- <input
472
- class="pf-v5-c-check__input"
473
- type="checkbox"
474
- id="split-button-checkbox-primary-disabled-example-check-input"
475
- name="split-button-checkbox-primary-disabled-example-check-input"
476
- disabled
477
- />
478
- <span class="pf-v5-c-check__label pf-m-disabled">10 selected</span>
481
+ <input class="pf-v5-c-check__input" type="checkbox" />
482
+ <label class="pf-v5-c-check__label" for="-input">10 selected</label>
479
483
  </label>
480
484
  <button
481
485
  class="pf-v5-c-menu-toggle__button"
482
486
  type="button"
483
487
  aria-expanded="false"
484
- id="split-button-checkbox-primary-disabled-example-toggle-button"
488
+ id="split-button-checkbox-primary-example-toggle-button"
485
489
  aria-label="Menu toggle"
486
- disabled
487
490
  >
488
491
  <span class="pf-v5-c-menu-toggle__controls">
489
492
  <span class="pf-v5-c-menu-toggle__toggle-icon">
490
- <i class="fas fa-angle-down" aria-hidden="true"></i>
493
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
491
494
  </span>
492
495
  </span>
493
496
  </button>
494
497
  </div>
495
498
  &nbsp;
496
- <div class="pf-v5-c-menu-toggle pf-m-split-button pf-m-primary">
499
+ <div
500
+ class="pf-v5-c-menu-toggle pf-m-expanded pf-m-split-button pf-m-primary"
501
+ id="split-button-checkbox-primary-expanded-example"
502
+ >
497
503
  <label
498
504
  class="pf-v5-c-check"
499
- id="split-button-checkbox-primary-example-check"
500
- for="split-button-checkbox-primary-example-check-input"
505
+ for="split-button-checkbox-primary-expanded-example-input"
501
506
  >
502
- <input
503
- class="pf-v5-c-check__input"
504
- type="checkbox"
505
- id="split-button-checkbox-primary-example-check-input"
506
- name="split-button-checkbox-primary-example-check-input"
507
- />
508
- <span class="pf-v5-c-check__label">10 selected</span>
507
+ <input class="pf-v5-c-check__input" type="checkbox" />
508
+ <label class="pf-v5-c-check__label" for="-input">10 selected</label>
509
509
  </label>
510
510
  <button
511
511
  class="pf-v5-c-menu-toggle__button"
512
512
  type="button"
513
- aria-expanded="false"
514
- id="split-button-checkbox-primary-example-toggle-button"
513
+ aria-expanded="true"
514
+ id="split-button-checkbox-primary-expanded-example-toggle-button"
515
515
  aria-label="Menu toggle"
516
516
  >
517
517
  <span class="pf-v5-c-menu-toggle__controls">
518
518
  <span class="pf-v5-c-menu-toggle__toggle-icon">
519
- <i class="fas fa-angle-down" aria-hidden="true"></i>
519
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
520
520
  </span>
521
521
  </span>
522
522
  </button>
523
523
  </div>
524
524
  &nbsp;
525
- <div class="pf-v5-c-menu-toggle pf-m-expanded pf-m-split-button pf-m-primary">
525
+ <div
526
+ class="pf-v5-c-menu-toggle pf-m-split-button pf-m-disabled pf-m-primary"
527
+ id="split-button-checkbox-primary-disabled-example"
528
+ >
526
529
  <label
527
530
  class="pf-v5-c-check"
528
- id="split-button-checkbox-primary-expanded-example-check"
529
- for="split-button-checkbox-primary-expanded-example-check-input"
531
+ for="split-button-checkbox-primary-disabled-example-input"
530
532
  >
531
- <input
532
- class="pf-v5-c-check__input"
533
- type="checkbox"
534
- id="split-button-checkbox-primary-expanded-example-check-input"
535
- name="split-button-checkbox-primary-expanded-example-check-input"
536
- />
537
- <span class="pf-v5-c-check__label">10 selected</span>
533
+ <input class="pf-v5-c-check__input" type="checkbox" disabled />
534
+ <label class="pf-v5-c-check__label pf-m-disabled" for="-input">10 selected</label>
538
535
  </label>
539
536
  <button
540
537
  class="pf-v5-c-menu-toggle__button"
541
538
  type="button"
542
- aria-expanded="true"
543
- id="split-button-checkbox-primary-expanded-example-toggle-button"
539
+ aria-expanded="false"
540
+ id="split-button-checkbox-primary-disabled-example-toggle-button"
544
541
  aria-label="Menu toggle"
542
+ disabled
545
543
  >
546
544
  <span class="pf-v5-c-menu-toggle__controls">
547
545
  <span class="pf-v5-c-menu-toggle__toggle-icon">
548
- <i class="fas fa-angle-down" aria-hidden="true"></i>
546
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
549
547
  </span>
550
548
  </span>
551
549
  </button>
@@ -556,90 +554,80 @@ cssPrefix: pf-v5-c-menu-toggle
556
554
  ### Split button, secondary
557
555
 
558
556
  ```html
559
- <div class="pf-v5-c-menu-toggle pf-m-split-button pf-m-disabled pf-m-secondary">
557
+ <div
558
+ class="pf-v5-c-menu-toggle pf-m-split-button pf-m-secondary"
559
+ id="split-button-checkbox-secondary-example"
560
+ >
560
561
  <label
561
562
  class="pf-v5-c-check"
562
- id="split-button-checkbox-secondary-disabled-example-check"
563
- for="split-button-checkbox-secondary-disabled-example-check-input"
563
+ for="split-button-checkbox-secondary-example-input"
564
564
  >
565
- <input
566
- class="pf-v5-c-check__input"
567
- type="checkbox"
568
- id="split-button-checkbox-secondary-disabled-example-check-input"
569
- name="split-button-checkbox-secondary-disabled-example-check-input"
570
- disabled
571
- />
572
- <span class="pf-v5-c-check__label pf-m-disabled">10 selected</span>
565
+ <input class="pf-v5-c-check__input" type="checkbox" />
566
+ <label class="pf-v5-c-check__label" for="-input">10 selected</label>
573
567
  </label>
574
568
  <button
575
569
  class="pf-v5-c-menu-toggle__button"
576
570
  type="button"
577
571
  aria-expanded="false"
578
- id="split-button-checkbox-secondary-disabled-example-toggle-button"
572
+ id="split-button-checkbox-secondary-example-toggle-button"
579
573
  aria-label="Menu toggle"
580
- disabled
581
574
  >
582
575
  <span class="pf-v5-c-menu-toggle__controls">
583
576
  <span class="pf-v5-c-menu-toggle__toggle-icon">
584
- <i class="fas fa-angle-down" aria-hidden="true"></i>
577
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
585
578
  </span>
586
579
  </span>
587
580
  </button>
588
581
  </div>
589
582
  &nbsp;
590
- <div class="pf-v5-c-menu-toggle pf-m-split-button pf-m-secondary">
583
+ <div
584
+ class="pf-v5-c-menu-toggle pf-m-expanded pf-m-split-button pf-m-secondary"
585
+ id="split-button-checkbox-secondary-expanded-example"
586
+ >
591
587
  <label
592
588
  class="pf-v5-c-check"
593
- id="split-button-checkbox-secondary-example-check"
594
- for="split-button-checkbox-secondary-example-check-input"
589
+ for="split-button-checkbox-secondary-expanded-example-input"
595
590
  >
596
- <input
597
- class="pf-v5-c-check__input"
598
- type="checkbox"
599
- id="split-button-checkbox-secondary-example-check-input"
600
- name="split-button-checkbox-secondary-example-check-input"
601
- />
602
- <span class="pf-v5-c-check__label">10 selected</span>
591
+ <input class="pf-v5-c-check__input" type="checkbox" />
592
+ <label class="pf-v5-c-check__label" for="-input">10 selected</label>
603
593
  </label>
604
594
  <button
605
595
  class="pf-v5-c-menu-toggle__button"
606
596
  type="button"
607
- aria-expanded="false"
608
- id="split-button-checkbox-secondary-example-toggle-button"
597
+ aria-expanded="true"
598
+ id="split-button-checkbox-secondary-expanded-example-toggle-button"
609
599
  aria-label="Menu toggle"
610
600
  >
611
601
  <span class="pf-v5-c-menu-toggle__controls">
612
602
  <span class="pf-v5-c-menu-toggle__toggle-icon">
613
- <i class="fas fa-angle-down" aria-hidden="true"></i>
603
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
614
604
  </span>
615
605
  </span>
616
606
  </button>
617
607
  </div>
618
608
  &nbsp;
619
- <div class="pf-v5-c-menu-toggle pf-m-expanded pf-m-split-button pf-m-secondary">
609
+ <div
610
+ class="pf-v5-c-menu-toggle pf-m-split-button pf-m-disabled pf-m-secondary"
611
+ id="split-button-checkbox-secondary-disabled-example"
612
+ >
620
613
  <label
621
614
  class="pf-v5-c-check"
622
- id="split-button-checkbox-secondary-expanded-example-check"
623
- for="split-button-checkbox-secondary-expanded-example-check-input"
615
+ for="split-button-checkbox-secondary-disabled-example-input"
624
616
  >
625
- <input
626
- class="pf-v5-c-check__input"
627
- type="checkbox"
628
- id="split-button-checkbox-secondary-expanded-example-check-input"
629
- name="split-button-checkbox-secondary-expanded-example-check-input"
630
- />
631
- <span class="pf-v5-c-check__label">10 selected</span>
617
+ <input class="pf-v5-c-check__input" type="checkbox" disabled />
618
+ <label class="pf-v5-c-check__label pf-m-disabled" for="-input">10 selected</label>
632
619
  </label>
633
620
  <button
634
621
  class="pf-v5-c-menu-toggle__button"
635
622
  type="button"
636
- aria-expanded="true"
637
- id="split-button-checkbox-secondary-expanded-example-toggle-button"
623
+ aria-expanded="false"
624
+ id="split-button-checkbox-secondary-disabled-example-toggle-button"
638
625
  aria-label="Menu toggle"
626
+ disabled
639
627
  >
640
628
  <span class="pf-v5-c-menu-toggle__controls">
641
629
  <span class="pf-v5-c-menu-toggle__toggle-icon">
642
- <i class="fas fa-angle-down" aria-hidden="true"></i>
630
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
643
631
  </span>
644
632
  </span>
645
633
  </button>
@@ -650,53 +638,62 @@ cssPrefix: pf-v5-c-menu-toggle
650
638
  ### Split button (action)
651
639
 
652
640
  ```html
653
- <div class="pf-v5-c-menu-toggle pf-m-split-button pf-m-action pf-m-disabled">
654
- <button class="pf-v5-c-menu-toggle__button" type="button" disabled>Action</button>
641
+ <div
642
+ class="pf-v5-c-menu-toggle pf-m-split-button pf-m-action"
643
+ id="split-button-checkbox-with-toggle-action-example"
644
+ >
645
+ <button class="pf-v5-c-menu-toggle__button" type="button">Action</button>
655
646
  <button
656
647
  class="pf-v5-c-menu-toggle__button"
657
648
  type="button"
658
649
  aria-expanded="false"
659
- id="split-button-checkbox-with-toggle-action-disabled-example-toggle-button"
650
+ id="split-button-checkbox-with-toggle-action-example-toggle-button"
660
651
  aria-label="Menu toggle"
661
- disabled
662
652
  >
663
653
  <span class="pf-v5-c-menu-toggle__controls">
664
654
  <span class="pf-v5-c-menu-toggle__toggle-icon">
665
- <i class="fas fa-angle-down" aria-hidden="true"></i>
655
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
666
656
  </span>
667
657
  </span>
668
658
  </button>
669
659
  </div>
670
660
  &nbsp;
671
- <div class="pf-v5-c-menu-toggle pf-m-split-button pf-m-action">
661
+ <div
662
+ class="pf-v5-c-menu-toggle pf-m-expanded pf-m-split-button pf-m-action"
663
+ id="split-button-checkbox-with-toggle-action-expanded-example"
664
+ >
672
665
  <button class="pf-v5-c-menu-toggle__button" type="button">Action</button>
673
666
  <button
674
667
  class="pf-v5-c-menu-toggle__button"
675
668
  type="button"
676
- aria-expanded="false"
677
- id="split-button-checkbox-with-toggle-action-example-toggle-button"
669
+ aria-expanded="true"
670
+ id="split-button-checkbox-with-toggle-action-expanded-example-toggle-button"
678
671
  aria-label="Menu toggle"
679
672
  >
680
673
  <span class="pf-v5-c-menu-toggle__controls">
681
674
  <span class="pf-v5-c-menu-toggle__toggle-icon">
682
- <i class="fas fa-angle-down" aria-hidden="true"></i>
675
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
683
676
  </span>
684
677
  </span>
685
678
  </button>
686
679
  </div>
687
680
  &nbsp;
688
- <div class="pf-v5-c-menu-toggle pf-m-expanded pf-m-split-button pf-m-action">
689
- <button class="pf-v5-c-menu-toggle__button" type="button">Action</button>
681
+ <div
682
+ class="pf-v5-c-menu-toggle pf-m-split-button pf-m-action pf-m-disabled"
683
+ id="split-button-checkbox-with-toggle-action-disabled-example"
684
+ >
685
+ <button class="pf-v5-c-menu-toggle__button" type="button" disabled>Action</button>
690
686
  <button
691
687
  class="pf-v5-c-menu-toggle__button"
692
688
  type="button"
693
- aria-expanded="true"
694
- id="split-button-checkbox-with-toggle-action-expanded-example-toggle-button"
689
+ aria-expanded="false"
690
+ id="split-button-checkbox-with-toggle-action-disabled-example-toggle-button"
695
691
  aria-label="Menu toggle"
692
+ disabled
696
693
  >
697
694
  <span class="pf-v5-c-menu-toggle__controls">
698
695
  <span class="pf-v5-c-menu-toggle__toggle-icon">
699
- <i class="fas fa-angle-down" aria-hidden="true"></i>
696
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
700
697
  </span>
701
698
  </span>
702
699
  </button>
@@ -708,56 +705,61 @@ cssPrefix: pf-v5-c-menu-toggle
708
705
 
709
706
  ```html
710
707
  <div
711
- class="pf-v5-c-menu-toggle pf-m-split-button pf-m-action pf-m-disabled pf-m-primary"
708
+ class="pf-v5-c-menu-toggle pf-m-split-button pf-m-action pf-m-primary"
709
+ id="split-button-checkbox-with-toggle-action-primary-example"
712
710
  >
713
- <button class="pf-v5-c-menu-toggle__button" type="button" disabled>Action</button>
711
+ <button class="pf-v5-c-menu-toggle__button" type="button">Action</button>
714
712
  <button
715
713
  class="pf-v5-c-menu-toggle__button"
716
714
  type="button"
717
715
  aria-expanded="false"
718
- id="split-button-checkbox-with-toggle-action-primary-disabled-example-toggle-button"
716
+ id="split-button-checkbox-with-toggle-action-primary-example-toggle-button"
719
717
  aria-label="Menu toggle"
720
- disabled
721
718
  >
722
719
  <span class="pf-v5-c-menu-toggle__controls">
723
720
  <span class="pf-v5-c-menu-toggle__toggle-icon">
724
- <i class="fas fa-angle-down" aria-hidden="true"></i>
721
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
725
722
  </span>
726
723
  </span>
727
724
  </button>
728
725
  </div>
729
726
  &nbsp;
730
- <div class="pf-v5-c-menu-toggle pf-m-split-button pf-m-action pf-m-primary">
727
+ <div
728
+ class="pf-v5-c-menu-toggle pf-m-expanded pf-m-split-button pf-m-action pf-m-primary"
729
+ id="split-button-checkbox-with-toggle-action-primary-expanded-example"
730
+ >
731
731
  <button class="pf-v5-c-menu-toggle__button" type="button">Action</button>
732
732
  <button
733
733
  class="pf-v5-c-menu-toggle__button"
734
734
  type="button"
735
- aria-expanded="false"
736
- id="split-button-checkbox-with-toggle-action-primary-example-toggle-button"
735
+ aria-expanded="true"
736
+ id="split-button-checkbox-with-toggle-action-primary-expanded-example-toggle-button"
737
737
  aria-label="Menu toggle"
738
738
  >
739
739
  <span class="pf-v5-c-menu-toggle__controls">
740
740
  <span class="pf-v5-c-menu-toggle__toggle-icon">
741
- <i class="fas fa-angle-down" aria-hidden="true"></i>
741
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
742
742
  </span>
743
743
  </span>
744
744
  </button>
745
745
  </div>
746
746
  &nbsp;
747
747
  <div
748
- class="pf-v5-c-menu-toggle pf-m-expanded pf-m-split-button pf-m-action pf-m-primary"
748
+ class="pf-v5-c-menu-toggle pf-m-split-button pf-m-action pf-m-disabled pf-m-primary"
749
+ id="split-button-checkbox-with-toggle-action-primary-disabled-example"
749
750
  >
750
- <button class="pf-v5-c-menu-toggle__button" type="button">Action</button>
751
+ <button class="pf-v5-c-menu-toggle__button" type="button" disabled>Action</button>
751
752
  <button
752
753
  class="pf-v5-c-menu-toggle__button"
753
754
  type="button"
754
- aria-expanded="true"
755
- id="split-button-checkbox-with-toggle-action-primary-expanded-example-toggle-button"
755
+ aria-expanded="false"
756
+ id="split-button-checkbox-with-toggle-action-primary-disabled-example-toggle-button"
756
757
  aria-label="Menu toggle"
758
+ disabled
757
759
  >
758
760
  <span class="pf-v5-c-menu-toggle__controls">
759
761
  <span class="pf-v5-c-menu-toggle__toggle-icon">
760
- <i class="fas fa-angle-down" aria-hidden="true"></i>
762
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
761
763
  </span>
762
764
  </span>
763
765
  </button>
@@ -769,56 +771,61 @@ cssPrefix: pf-v5-c-menu-toggle
769
771
 
770
772
  ```html
771
773
  <div
772
- class="pf-v5-c-menu-toggle pf-m-split-button pf-m-action pf-m-disabled pf-m-secondary"
774
+ class="pf-v5-c-menu-toggle pf-m-split-button pf-m-action pf-m-secondary"
775
+ id="split-button-checkbox-with-toggle-action-secondary-example"
773
776
  >
774
- <button class="pf-v5-c-menu-toggle__button" type="button" disabled>Action</button>
777
+ <button class="pf-v5-c-menu-toggle__button" type="button">Action</button>
775
778
  <button
776
779
  class="pf-v5-c-menu-toggle__button"
777
780
  type="button"
778
781
  aria-expanded="false"
779
- id="split-button-checkbox-with-toggle-action-secondary-disabled-example-toggle-button"
782
+ id="split-button-checkbox-with-toggle-action-secondary-example-toggle-button"
780
783
  aria-label="Menu toggle"
781
- disabled
782
784
  >
783
785
  <span class="pf-v5-c-menu-toggle__controls">
784
786
  <span class="pf-v5-c-menu-toggle__toggle-icon">
785
- <i class="fas fa-angle-down" aria-hidden="true"></i>
787
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
786
788
  </span>
787
789
  </span>
788
790
  </button>
789
791
  </div>
790
792
  &nbsp;
791
- <div class="pf-v5-c-menu-toggle pf-m-split-button pf-m-action pf-m-secondary">
793
+ <div
794
+ class="pf-v5-c-menu-toggle pf-m-expanded pf-m-split-button pf-m-action pf-m-secondary"
795
+ id="split-button-checkbox-with-toggle-action-secondary-expanded-example"
796
+ >
792
797
  <button class="pf-v5-c-menu-toggle__button" type="button">Action</button>
793
798
  <button
794
799
  class="pf-v5-c-menu-toggle__button"
795
800
  type="button"
796
- aria-expanded="false"
797
- id="split-button-checkbox-with-toggle-action-secondary-example-toggle-button"
801
+ aria-expanded="true"
802
+ id="split-button-checkbox-with-toggle-action-secondary-expanded-example-toggle-button"
798
803
  aria-label="Menu toggle"
799
804
  >
800
805
  <span class="pf-v5-c-menu-toggle__controls">
801
806
  <span class="pf-v5-c-menu-toggle__toggle-icon">
802
- <i class="fas fa-angle-down" aria-hidden="true"></i>
807
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
803
808
  </span>
804
809
  </span>
805
810
  </button>
806
811
  </div>
807
812
  &nbsp;
808
813
  <div
809
- class="pf-v5-c-menu-toggle pf-m-expanded pf-m-split-button pf-m-action pf-m-secondary"
814
+ class="pf-v5-c-menu-toggle pf-m-split-button pf-m-action pf-m-disabled pf-m-secondary"
815
+ id="split-button-checkbox-with-toggle-action-secondary-disabled-example"
810
816
  >
811
- <button class="pf-v5-c-menu-toggle__button" type="button">Action</button>
817
+ <button class="pf-v5-c-menu-toggle__button" type="button" disabled>Action</button>
812
818
  <button
813
819
  class="pf-v5-c-menu-toggle__button"
814
820
  type="button"
815
- aria-expanded="true"
816
- id="split-button-checkbox-with-toggle-action-secondary-expanded-example-toggle-button"
821
+ aria-expanded="false"
822
+ id="split-button-checkbox-with-toggle-action-secondary-disabled-example-toggle-button"
817
823
  aria-label="Menu toggle"
824
+ disabled
818
825
  >
819
826
  <span class="pf-v5-c-menu-toggle__controls">
820
827
  <span class="pf-v5-c-menu-toggle__toggle-icon">
821
- <i class="fas fa-angle-down" aria-hidden="true"></i>
828
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
822
829
  </span>
823
830
  </span>
824
831
  </button>
@@ -840,14 +847,14 @@ cssPrefix: pf-v5-c-menu-toggle
840
847
  <span class="pf-v5-c-menu-toggle__text">Icon</span>
841
848
  <span class="pf-v5-c-menu-toggle__controls">
842
849
  <span class="pf-v5-c-menu-toggle__toggle-icon">
843
- <i class="fas fa-angle-down" aria-hidden="true"></i>
850
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
844
851
  </span>
845
852
  </span>
846
853
  </button>
847
854
 
848
855
  &nbsp;
849
856
  <button
850
- class="pf-v5-c-menu-toggle pf-m-secondary"
857
+ class="pf-v5-c-menu-toggle pf-m-secondary pf-m-disabled"
851
858
  type="button"
852
859
  aria-expanded="false"
853
860
  disabled
@@ -858,7 +865,7 @@ cssPrefix: pf-v5-c-menu-toggle
858
865
  <span class="pf-v5-c-menu-toggle__text">Icon</span>
859
866
  <span class="pf-v5-c-menu-toggle__controls">
860
867
  <span class="pf-v5-c-menu-toggle__toggle-icon">
861
- <i class="fas fa-angle-down" aria-hidden="true"></i>
868
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
862
869
  </span>
863
870
  </span>
864
871
  </button>
@@ -879,7 +886,7 @@ cssPrefix: pf-v5-c-menu-toggle
879
886
  <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
880
887
  <span class="pf-v5-c-menu-toggle__controls">
881
888
  <span class="pf-v5-c-menu-toggle__toggle-icon">
882
- <i class="fas fa-angle-down" aria-hidden="true"></i>
889
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
883
890
  </span>
884
891
  </span>
885
892
  </button>
@@ -900,14 +907,14 @@ cssPrefix: pf-v5-c-menu-toggle
900
907
  <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
901
908
  <span class="pf-v5-c-menu-toggle__controls">
902
909
  <span class="pf-v5-c-menu-toggle__toggle-icon">
903
- <i class="fas fa-angle-down" aria-hidden="true"></i>
910
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
904
911
  </span>
905
912
  </span>
906
913
  </button>
907
914
 
908
915
  &nbsp;
909
916
  <button
910
- class="pf-v5-c-menu-toggle"
917
+ class="pf-v5-c-menu-toggle pf-m-disabled"
911
918
  type="button"
912
919
  aria-expanded="false"
913
920
  disabled
@@ -922,7 +929,7 @@ cssPrefix: pf-v5-c-menu-toggle
922
929
  <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
923
930
  <span class="pf-v5-c-menu-toggle__controls">
924
931
  <span class="pf-v5-c-menu-toggle__toggle-icon">
925
- <i class="fas fa-angle-down" aria-hidden="true"></i>
932
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
926
933
  </span>
927
934
  </span>
928
935
  </button>
@@ -940,7 +947,25 @@ cssPrefix: pf-v5-c-menu-toggle
940
947
  <span class="pf-v5-c-menu-toggle__text">Full height</span>
941
948
  <span class="pf-v5-c-menu-toggle__controls">
942
949
  <span class="pf-v5-c-menu-toggle__toggle-icon">
943
- <i class="fas fa-angle-down" aria-hidden="true"></i>
950
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
951
+ </span>
952
+ </span>
953
+ </button>
954
+
955
+ ```
956
+
957
+ ### Full width
958
+
959
+ ```html
960
+ <button
961
+ class="pf-v5-c-menu-toggle pf-m-full-width"
962
+ type="button"
963
+ aria-expanded="false"
964
+ >
965
+ <span class="pf-v5-c-menu-toggle__text">Full width</span>
966
+ <span class="pf-v5-c-menu-toggle__controls">
967
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
968
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
944
969
  </span>
945
970
  </span>
946
971
  </button>
@@ -950,7 +975,10 @@ cssPrefix: pf-v5-c-menu-toggle
950
975
  ### Typeahead
951
976
 
952
977
  ```html
953
- <div class="pf-v5-c-menu-toggle pf-m-typeahead pf-m-full-width">
978
+ <div
979
+ class="pf-v5-c-menu-toggle pf-m-typeahead pf-m-full-width"
980
+ id="typeahead-example"
981
+ >
954
982
  <div class="pf-v5-c-text-input-group pf-m-plain">
955
983
  <div class="pf-v5-c-text-input-group__main">
956
984
  <span class="pf-v5-c-text-input-group__text">
@@ -981,7 +1009,7 @@ cssPrefix: pf-v5-c-menu-toggle
981
1009
  >
982
1010
  <span class="pf-v5-c-menu-toggle__controls">
983
1011
  <span class="pf-v5-c-menu-toggle__toggle-icon">
984
- <i class="fas fa-angle-down" aria-hidden="true"></i>
1012
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
985
1013
  </span>
986
1014
  </span>
987
1015
  </button>
@@ -1018,3 +1046,4 @@ cssPrefix: pf-v5-c-menu-toggle
1018
1046
  | `.pf-m-plain` | `.pf-v5-c-menu-toggle` | Modifies the menu toggle component for the plain variation. |
1019
1047
  | `.pf-m-expanded` | `.pf-v5-c-menu-toggle` | Modifies the menu toggle component for the expanded state. |
1020
1048
  | `.pf-m-full-height` | `.pf-v5-c-menu-toggle` | Modifies the menu toggle component to full height of parent. |
1049
+ | `.pf-m-full-width` | `.pf-v5-c-menu-toggle` | Modifies the menu toggle component to full width of parent. |