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

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