@patternfly/patternfly 6.0.0-alpha.1 → 6.0.0-alpha.11

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 (284) hide show
  1. package/README.md +13 -3
  2. package/assets/icons/iconUnicodes.json +1 -0
  3. package/assets/pficon/pf-v5-pficon.woff2 +0 -0
  4. package/assets/pficon/pficon.scss +6 -129
  5. package/base/_common.scss +21 -0
  6. package/base/_globals.scss +14 -14
  7. package/base/_variables.scss +12 -0
  8. package/base/patternfly-common.css +16 -2
  9. package/base/patternfly-globals.css +13 -14
  10. package/base/patternfly-icons.css +5 -1
  11. package/base/patternfly-pf-icons.css +5 -1
  12. package/base/patternfly-variables.css +865 -0
  13. package/base/tokens/_tokens-dark.scss +331 -0
  14. package/base/tokens/_tokens-default.scss +379 -0
  15. package/base/tokens/_tokens-font.scss +96 -0
  16. package/base/tokens/_tokens-palette.scss +75 -0
  17. package/components/AboutModalBox/about-modal-box.css +23 -12
  18. package/components/AboutModalBox/about-modal-box.scss +25 -12
  19. package/components/Accordion/accordion.css +33 -20
  20. package/components/Accordion/accordion.scss +32 -20
  21. package/components/ActionList/action-list.css +2 -2
  22. package/components/ActionList/action-list.scss +2 -2
  23. package/components/Alert/alert-group.css +27 -20
  24. package/components/Alert/alert-group.scss +27 -20
  25. package/components/Alert/alert.css +74 -95
  26. package/components/Alert/alert.scss +76 -89
  27. package/components/AppLauncher/app-launcher.css +32 -23
  28. package/components/AppLauncher/app-launcher.scss +32 -23
  29. package/components/BackToTop/back-to-top.css +2 -2
  30. package/components/BackToTop/back-to-top.scss +2 -2
  31. package/components/Backdrop/backdrop.css +2 -2
  32. package/components/Backdrop/backdrop.scss +2 -2
  33. package/components/BackgroundImage/background-image.css +6 -3
  34. package/components/BackgroundImage/background-image.scss +8 -3
  35. package/components/Badge/badge.css +2 -2
  36. package/components/Badge/badge.scss +2 -2
  37. package/components/Banner/banner.css +5 -5
  38. package/components/Banner/banner.scss +5 -2
  39. package/components/Breadcrumb/breadcrumb.css +9 -3
  40. package/components/Breadcrumb/breadcrumb.scss +8 -3
  41. package/components/Button/button.css +167 -195
  42. package/components/Button/button.scss +187 -157
  43. package/components/Button/themes/dark/button.scss +1 -1
  44. package/components/CalendarMonth/calendar-month.css +25 -15
  45. package/components/CalendarMonth/calendar-month.scss +23 -15
  46. package/components/Card/card.css +25 -17
  47. package/components/Card/card.scss +24 -17
  48. package/components/Check/check.css +2 -2
  49. package/components/Check/check.scss +2 -2
  50. package/components/Chip/chip-group.css +6 -6
  51. package/components/Chip/chip-group.scss +6 -6
  52. package/components/Chip/chip.css +16 -9
  53. package/components/Chip/chip.scss +17 -9
  54. package/components/ClipboardCopy/clipboard-copy.css +19 -10
  55. package/components/ClipboardCopy/clipboard-copy.scss +16 -8
  56. package/components/ClipboardCopy/themes/dark/clipboard-copy.scss +2 -2
  57. package/components/CodeBlock/code-block.css +6 -3
  58. package/components/CodeBlock/code-block.scss +6 -3
  59. package/components/CodeEditor/code-editor.css +31 -22
  60. package/components/CodeEditor/code-editor.scss +30 -21
  61. package/components/CodeEditor/themes/dark/code-editor.scss +1 -1
  62. package/components/Content/content.css +100 -97
  63. package/components/Content/content.scss +101 -98
  64. package/components/ContextSelector/context-selector.css +41 -26
  65. package/components/ContextSelector/context-selector.scss +40 -25
  66. package/components/ContextSelector/themes/dark/context-selector.scss +1 -1
  67. package/components/DataList/data-list-grid.css +21 -21
  68. package/components/DataList/data-list-grid.scss +3 -3
  69. package/components/DataList/data-list.css +69 -56
  70. package/components/DataList/data-list.scss +47 -35
  71. package/components/DatePicker/date-picker.css +8 -8
  72. package/components/DatePicker/date-picker.scss +8 -8
  73. package/components/DescriptionList/description-list.css +8 -5
  74. package/components/DescriptionList/description-list.scss +8 -5
  75. package/components/DragDrop/drag-drop.css +8 -8
  76. package/components/DragDrop/drag-drop.scss +8 -8
  77. package/components/Drawer/drawer.css +120 -62
  78. package/components/Drawer/drawer.scss +94 -44
  79. package/components/Dropdown/dropdown.css +75 -66
  80. package/components/Dropdown/dropdown.scss +65 -56
  81. package/components/DualListSelector/dual-list-selector.css +29 -15
  82. package/components/DualListSelector/dual-list-selector.scss +30 -15
  83. package/components/EmptyState/empty-state.css +7 -4
  84. package/components/EmptyState/empty-state.scss +7 -4
  85. package/components/ExpandableSection/expandable-section.css +17 -10
  86. package/components/ExpandableSection/expandable-section.scss +15 -10
  87. package/components/FileUpload/file-upload.css +9 -15
  88. package/components/FileUpload/file-upload.scss +9 -15
  89. package/components/Form/form.css +53 -50
  90. package/components/Form/form.scss +46 -44
  91. package/components/FormControl/form-control.css +18 -9
  92. package/components/FormControl/form-control.scss +18 -9
  93. package/components/HelperText/helper-text.css +1 -1
  94. package/components/HelperText/helper-text.scss +1 -1
  95. package/components/Hint/hint.css +9 -6
  96. package/components/Hint/hint.scss +9 -6
  97. package/components/Icon/icon.css +1 -1
  98. package/components/Icon/icon.scss +1 -1
  99. package/components/InlineEdit/inline-edit.css +4 -4
  100. package/components/InlineEdit/inline-edit.scss +4 -4
  101. package/components/InputGroup/input-group.css +12 -6
  102. package/components/InputGroup/input-group.scss +11 -5
  103. package/components/InputGroup/themes/dark/input-group.scss +1 -1
  104. package/components/JumpLinks/jump-links.css +27 -24
  105. package/components/JumpLinks/jump-links.scss +26 -24
  106. package/components/Label/label-group.css +13 -10
  107. package/components/Label/label-group.scss +13 -10
  108. package/components/Label/label.css +9 -9
  109. package/components/Label/label.scss +9 -9
  110. package/components/List/list.css +9 -9
  111. package/components/List/list.scss +9 -9
  112. package/components/LogViewer/log-viewer.css +14 -14
  113. package/components/LogViewer/log-viewer.scss +14 -14
  114. package/components/Login/login.css +36 -27
  115. package/components/Login/login.scss +36 -27
  116. package/components/Masthead/masthead.css +68 -125
  117. package/components/Masthead/masthead.scss +123 -153
  118. package/components/Menu/menu.css +79 -65
  119. package/components/Menu/menu.scss +80 -68
  120. package/components/MenuToggle/menu-toggle.css +89 -99
  121. package/components/MenuToggle/menu-toggle.scss +92 -108
  122. package/components/ModalBox/modal-box.css +19 -19
  123. package/components/ModalBox/modal-box.scss +20 -20
  124. package/components/MultipleFileUpload/multiple-file-upload.css +11 -8
  125. package/components/MultipleFileUpload/multiple-file-upload.scss +11 -8
  126. package/components/Nav/nav.css +162 -133
  127. package/components/Nav/nav.scss +162 -135
  128. package/components/Nav/themes/dark/nav.scss +2 -2
  129. package/components/NotificationBadge/notification-badge.css +66 -85
  130. package/components/NotificationBadge/notification-badge.scss +72 -103
  131. package/components/NotificationDrawer/notification-drawer.css +32 -19
  132. package/components/NotificationDrawer/notification-drawer.scss +30 -19
  133. package/components/NumberInput/number-input.css +2 -2
  134. package/components/NumberInput/number-input.scss +2 -2
  135. package/components/OptionsMenu/options-menu.css +43 -31
  136. package/components/OptionsMenu/options-menu.scss +43 -31
  137. package/components/OverflowMenu/overflow-menu.css +2 -2
  138. package/components/OverflowMenu/overflow-menu.scss +2 -2
  139. package/components/Page/page.css +230 -271
  140. package/components/Page/page.scss +178 -231
  141. package/components/Pagination/pagination.css +27 -17
  142. package/components/Pagination/pagination.scss +25 -17
  143. package/components/Panel/panel.css +13 -7
  144. package/components/Panel/panel.scss +13 -7
  145. package/components/Popover/popover.css +72 -40
  146. package/components/Popover/popover.scss +95 -75
  147. package/components/Progress/progress.css +9 -7
  148. package/components/Progress/progress.scss +12 -7
  149. package/components/ProgressStepper/progress-stepper.css +26 -20
  150. package/components/ProgressStepper/progress-stepper.scss +25 -19
  151. package/components/Radio/radio.css +3 -3
  152. package/components/Radio/radio.scss +3 -3
  153. package/components/Select/select.css +56 -47
  154. package/components/Select/select.scss +56 -47
  155. package/components/Sidebar/sidebar.css +11 -5
  156. package/components/Sidebar/sidebar.scss +11 -5
  157. package/components/SimpleList/simple-list.css +10 -4
  158. package/components/SimpleList/simple-list.scss +10 -4
  159. package/components/Skeleton/skeleton.css +6 -5
  160. package/components/Skeleton/skeleton.scss +4 -5
  161. package/components/SkipToContent/skip-to-content.css +3 -3
  162. package/components/SkipToContent/skip-to-content.scss +3 -3
  163. package/components/Slider/slider.css +47 -26
  164. package/components/Slider/slider.scss +56 -28
  165. package/components/Switch/switch.css +9 -5
  166. package/components/Switch/switch.scss +10 -6
  167. package/components/TabContent/tab-content.css +4 -1
  168. package/components/TabContent/tab-content.scss +4 -1
  169. package/components/Table/table-grid.css +264 -203
  170. package/components/Table/table-grid.scss +61 -47
  171. package/components/Table/table-scrollable.css +4 -4
  172. package/components/Table/table-scrollable.scss +6 -4
  173. package/components/Table/table-tree-view.css +112 -105
  174. package/components/Table/table-tree-view.scss +38 -33
  175. package/components/Table/table.css +181 -158
  176. package/components/Table/table.scss +181 -164
  177. package/components/Tabs/tabs.css +76 -48
  178. package/components/Tabs/tabs.scss +74 -48
  179. package/components/TextInputGroup/text-input-group.css +15 -15
  180. package/components/TextInputGroup/text-input-group.scss +15 -15
  181. package/components/Tile/tile.css +10 -10
  182. package/components/Tile/tile.scss +10 -10
  183. package/components/ToggleGroup/toggle-group.css +14 -11
  184. package/components/ToggleGroup/toggle-group.scss +14 -11
  185. package/components/Toolbar/toolbar.css +48 -43
  186. package/components/Toolbar/toolbar.scss +29 -23
  187. package/components/Tooltip/tooltip.css +60 -28
  188. package/components/Tooltip/tooltip.scss +76 -56
  189. package/components/TreeView/tree-view.css +48 -27
  190. package/components/TreeView/tree-view.scss +50 -28
  191. package/components/Truncate/truncate.css +9 -0
  192. package/components/Truncate/truncate.scss +16 -3
  193. package/components/Wizard/wizard.css +57 -36
  194. package/components/Wizard/wizard.scss +57 -36
  195. package/docs/components/Alert/examples/Alert.md +1 -1
  196. package/docs/components/Button/examples/Button.css +2 -2
  197. package/docs/components/Button/examples/Button.md +15 -3
  198. package/docs/components/Card/examples/Card.md +15 -15
  199. package/docs/components/Check/examples/Check.md +71 -59
  200. package/docs/components/Chip/examples/Chip.md +1 -1
  201. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +106 -0
  202. package/docs/components/CodeEditor/examples/CodeEditor.md +3 -3
  203. package/docs/components/DragDrop/examples/DragDrop.css +2 -2
  204. package/docs/components/Dropdown/deprecated/Dropdown.css +1 -1
  205. package/docs/components/DualListSelector/examples/DualListSelector.md +64 -16
  206. package/docs/components/Label/examples/Label.md +1 -1
  207. package/docs/components/LogViewer/examples/LogViewer.css +2 -2
  208. package/docs/components/LogViewer/examples/LogViewer.md +120 -30
  209. package/docs/components/Masthead/examples/masthead.md +7 -54
  210. package/docs/components/Menu/examples/Menu.css +8 -0
  211. package/docs/components/Menu/examples/Menu.md +90 -73
  212. package/docs/components/MenuToggle/examples/MenuToggle.md +102 -81
  213. package/docs/components/ModalBox/examples/ModalBox.css +3 -8
  214. package/docs/components/Nav/examples/Navigation.css +3 -25
  215. package/docs/components/Nav/examples/Navigation.md +99 -0
  216. package/docs/components/NotificationBadge/examples/NotificationBadge.md +5 -7
  217. package/docs/components/OptionsMenu/deprecated/options-menu.md +12 -3
  218. package/docs/components/Page/examples/Page.css +0 -8
  219. package/docs/components/Page/examples/Page.md +22 -21
  220. package/docs/components/Popover/examples/Popover.css +4 -9
  221. package/docs/components/Radio/examples/Radio.md +63 -55
  222. package/docs/components/Select/deprecated/Select.md +184 -177
  223. package/docs/components/Table/examples/Table.css +2 -2
  224. package/docs/components/Table/examples/Table.md +2 -2
  225. package/docs/components/TextInputGroup/examples/TextInputGroup.css +1 -1
  226. package/docs/components/Tile/examples/Tile.css +1 -1
  227. package/docs/components/Toolbar/examples/Toolbar.md +525 -431
  228. package/docs/components/Tooltip/examples/Tooltip.css +4 -0
  229. package/docs/components/Tooltip/examples/Tooltip.md +3 -1
  230. package/docs/components/Truncate/examples/Truncate.md +2 -2
  231. package/docs/demos/AboutModal/examples/AboutModal.md +83 -8
  232. package/docs/demos/Alert/examples/Alert.md +249 -24
  233. package/docs/demos/BackToTop/examples/BackToTop.md +83 -8
  234. package/docs/demos/Banner/examples/Banner.md +168 -16
  235. package/docs/demos/Card/examples/Card.css +3 -3
  236. package/docs/demos/Card/examples/Card.md +26 -10
  237. package/docs/demos/CardView/examples/CardView.md +107 -28
  238. package/docs/demos/ContextSelector/examples/ContextSelector.md +332 -32
  239. package/docs/demos/Dashboard/examples/Dashboard.md +86 -11
  240. package/docs/demos/DataList/examples/DataList.md +340 -34
  241. package/docs/demos/DescriptionList/examples/DescriptionList.md +249 -24
  242. package/docs/demos/Drawer/examples/Drawer.md +415 -40
  243. package/docs/demos/JumpLinks/examples/JumpLinks.md +498 -48
  244. package/docs/demos/Masthead/examples/Masthead.md +742 -67
  245. package/docs/demos/Modal/examples/Modal.md +498 -48
  246. package/docs/demos/Nav/examples/Nav.md +664 -64
  247. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +420 -40
  248. package/docs/demos/Page/examples/Page.md +747 -72
  249. package/docs/demos/Page/examples/Penta.md +746 -0
  250. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +741 -180
  251. package/docs/demos/Skeleton/examples/Skeleton.md +90 -43
  252. package/docs/demos/Table/examples/Table.md +1581 -372
  253. package/docs/demos/Tabs/examples/Tabs.md +526 -69
  254. package/docs/demos/Toolbar/examples/Toolbar.css +5 -0
  255. package/docs/demos/Toolbar/examples/Toolbar.md +210 -60
  256. package/docs/demos/Wizard/examples/Wizard.md +747 -72
  257. package/docs/layouts/Flex/examples/Flex.md +5 -5
  258. package/docs/utilities/BoxShadow/examples/box-shadow.css +5 -5
  259. package/icons/pficons.mjs +1 -0
  260. package/layouts/Flex/flex.css +115 -43
  261. package/layouts/Flex/flex.scss +20 -8
  262. package/package.json +9 -5
  263. package/patternfly-addons.css +732 -972
  264. package/patternfly-base-no-globals-theme-dark-unversioned.css +886 -3
  265. package/patternfly-base-no-globals.css +886 -3
  266. package/patternfly-base-theme-dark-unversioned.css +899 -17
  267. package/patternfly-base.css +899 -17
  268. package/patternfly-no-globals.css +4271 -2925
  269. package/patternfly-theme-dark-unversioned.css +4284 -2939
  270. package/patternfly.css +4284 -2939
  271. package/patternfly.min.css +1 -1
  272. package/patternfly.min.css.map +1 -1
  273. package/sass-utilities/functions.scss +6 -0
  274. package/sass-utilities/mixins.scss +62 -2
  275. package/sass-utilities/scss-variables.scss +8 -8
  276. package/sass-utilities/themes/dark/mixins.scss +3 -1
  277. package/utilities/Accessibility/accessibility.css +12 -12
  278. package/utilities/Spacing/spacing.css +720 -960
  279. package/utilities/Spacing/spacing.scss +4 -8
  280. package/components/Alert/themes/dark/alert.scss +0 -17
  281. package/components/Masthead/themes/dark/masthead.scss +0 -14
  282. package/components/NotificationBadge/themes/dark/notification-badge.scss +0 -10
  283. package/components/Page/themes/dark/page.scss +0 -69
  284. 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>
@@ -275,14 +275,18 @@ cssPrefix: pf-v5-c-menu-toggle
275
275
 
276
276
  ```html
277
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">
278
+ <label
279
+ 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"
282
+ >
279
283
  <input
280
284
  class="pf-v5-c-check__input"
281
285
  type="checkbox"
286
+ id="split-button-checkbox-disabled-example-check-input"
287
+ name="split-button-checkbox-disabled-example-check-input"
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
308
  <div class="pf-v5-c-menu-toggle pf-m-split-button">
305
- <label class="pf-v5-c-check pf-m-standalone">
309
+ <label
310
+ class="pf-v5-c-check pf-m-standalone"
311
+ id="split-button-checkbox-example-check"
312
+ for="split-button-checkbox-example-check-input"
313
+ >
306
314
  <input
307
315
  class="pf-v5-c-check__input"
308
316
  type="checkbox"
309
- id="split-button-checkbox-example-input"
310
- name="split-button-checkbox-example-input"
311
- aria-label="Standalone input"
317
+ id="split-button-checkbox-example-check-input"
318
+ name="split-button-checkbox-example-check-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
337
  <div class="pf-v5-c-menu-toggle pf-m-expanded pf-m-split-button">
330
- <label class="pf-v5-c-check pf-m-standalone">
338
+ <label
339
+ 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"
342
+ >
331
343
  <input
332
344
  class="pf-v5-c-check__input"
333
345
  type="checkbox"
334
- id="split-button-checkbox-expanded-example-input"
335
- name="split-button-checkbox-expanded-example-input"
336
- aria-label="Standalone input"
346
+ id="split-button-checkbox-expanded-example-check-input"
347
+ name="split-button-checkbox-expanded-example-check-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>
@@ -359,14 +371,15 @@ cssPrefix: pf-v5-c-menu-toggle
359
371
  <div class="pf-v5-c-menu-toggle pf-m-split-button pf-m-disabled">
360
372
  <label
361
373
  class="pf-v5-c-check"
362
- for="split-button-checkbox-with-toggle-text-disabled-example-input"
374
+ id="split-button-checkbox-with-toggle-text-disabled-example-check"
375
+ for="split-button-checkbox-with-toggle-text-disabled-example-check-input"
363
376
  >
364
377
  <input
365
378
  class="pf-v5-c-check__input"
366
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"
367
382
  disabled
368
- id="split-button-checkbox-with-toggle-text-disabled-example-input"
369
- name="split-button-checkbox-with-toggle-text-disabled-example-input"
370
383
  />
371
384
  <span class="pf-v5-c-check__label pf-m-disabled">10 selected</span>
372
385
  </label>
@@ -380,7 +393,7 @@ cssPrefix: pf-v5-c-menu-toggle
380
393
  >
381
394
  <span class="pf-v5-c-menu-toggle__controls">
382
395
  <span class="pf-v5-c-menu-toggle__toggle-icon">
383
- <i class="fas fa-caret-down" aria-hidden="true"></i>
396
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
384
397
  </span>
385
398
  </span>
386
399
  </button>
@@ -389,13 +402,14 @@ cssPrefix: pf-v5-c-menu-toggle
389
402
  <div class="pf-v5-c-menu-toggle pf-m-split-button">
390
403
  <label
391
404
  class="pf-v5-c-check"
392
- for="split-button-checkbox-with-toggle-text-example-input"
405
+ id="split-button-checkbox-with-toggle-text-example-check"
406
+ for="split-button-checkbox-with-toggle-text-example-check-input"
393
407
  >
394
408
  <input
395
409
  class="pf-v5-c-check__input"
396
410
  type="checkbox"
397
- id="split-button-checkbox-with-toggle-text-example-input"
398
- name="split-button-checkbox-with-toggle-text-example-input"
411
+ id="split-button-checkbox-with-toggle-text-example-check-input"
412
+ name="split-button-checkbox-with-toggle-text-example-check-input"
399
413
  />
400
414
  <span class="pf-v5-c-check__label">10 selected</span>
401
415
  </label>
@@ -408,7 +422,7 @@ cssPrefix: pf-v5-c-menu-toggle
408
422
  >
409
423
  <span class="pf-v5-c-menu-toggle__controls">
410
424
  <span class="pf-v5-c-menu-toggle__toggle-icon">
411
- <i class="fas fa-caret-down" aria-hidden="true"></i>
425
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
412
426
  </span>
413
427
  </span>
414
428
  </button>
@@ -417,13 +431,14 @@ cssPrefix: pf-v5-c-menu-toggle
417
431
  <div class="pf-v5-c-menu-toggle pf-m-expanded pf-m-split-button">
418
432
  <label
419
433
  class="pf-v5-c-check"
420
- for="split-button-checkbox-with-toggle-text-expanded-example-input"
434
+ id="split-button-checkbox-with-toggle-text-expanded-example-check"
435
+ for="split-button-checkbox-with-toggle-text-expanded-example-check-input"
421
436
  >
422
437
  <input
423
438
  class="pf-v5-c-check__input"
424
439
  type="checkbox"
425
- id="split-button-checkbox-with-toggle-text-expanded-example-input"
426
- name="split-button-checkbox-with-toggle-text-expanded-example-input"
440
+ id="split-button-checkbox-with-toggle-text-expanded-example-check-input"
441
+ name="split-button-checkbox-with-toggle-text-expanded-example-check-input"
427
442
  />
428
443
  <span class="pf-v5-c-check__label">10 selected</span>
429
444
  </label>
@@ -436,7 +451,7 @@ cssPrefix: pf-v5-c-menu-toggle
436
451
  >
437
452
  <span class="pf-v5-c-menu-toggle__controls">
438
453
  <span class="pf-v5-c-menu-toggle__toggle-icon">
439
- <i class="fas fa-caret-down" aria-hidden="true"></i>
454
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
440
455
  </span>
441
456
  </span>
442
457
  </button>
@@ -450,14 +465,15 @@ cssPrefix: pf-v5-c-menu-toggle
450
465
  <div class="pf-v5-c-menu-toggle pf-m-split-button pf-m-disabled pf-m-primary">
451
466
  <label
452
467
  class="pf-v5-c-check"
453
- for="split-button-checkbox-primary-disabled-example-input"
468
+ id="split-button-checkbox-primary-disabled-example-check"
469
+ for="split-button-checkbox-primary-disabled-example-check-input"
454
470
  >
455
471
  <input
456
472
  class="pf-v5-c-check__input"
457
473
  type="checkbox"
474
+ id="split-button-checkbox-primary-disabled-example-check-input"
475
+ name="split-button-checkbox-primary-disabled-example-check-input"
458
476
  disabled
459
- id="split-button-checkbox-primary-disabled-example-input"
460
- name="split-button-checkbox-primary-disabled-example-input"
461
477
  />
462
478
  <span class="pf-v5-c-check__label pf-m-disabled">10 selected</span>
463
479
  </label>
@@ -471,7 +487,7 @@ cssPrefix: pf-v5-c-menu-toggle
471
487
  >
472
488
  <span class="pf-v5-c-menu-toggle__controls">
473
489
  <span class="pf-v5-c-menu-toggle__toggle-icon">
474
- <i class="fas fa-caret-down" aria-hidden="true"></i>
490
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
475
491
  </span>
476
492
  </span>
477
493
  </button>
@@ -480,13 +496,14 @@ cssPrefix: pf-v5-c-menu-toggle
480
496
  <div class="pf-v5-c-menu-toggle pf-m-split-button pf-m-primary">
481
497
  <label
482
498
  class="pf-v5-c-check"
483
- for="split-button-checkbox-primary-example-input"
499
+ id="split-button-checkbox-primary-example-check"
500
+ for="split-button-checkbox-primary-example-check-input"
484
501
  >
485
502
  <input
486
503
  class="pf-v5-c-check__input"
487
504
  type="checkbox"
488
- id="split-button-checkbox-primary-example-input"
489
- name="split-button-checkbox-primary-example-input"
505
+ id="split-button-checkbox-primary-example-check-input"
506
+ name="split-button-checkbox-primary-example-check-input"
490
507
  />
491
508
  <span class="pf-v5-c-check__label">10 selected</span>
492
509
  </label>
@@ -499,7 +516,7 @@ cssPrefix: pf-v5-c-menu-toggle
499
516
  >
500
517
  <span class="pf-v5-c-menu-toggle__controls">
501
518
  <span class="pf-v5-c-menu-toggle__toggle-icon">
502
- <i class="fas fa-caret-down" aria-hidden="true"></i>
519
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
503
520
  </span>
504
521
  </span>
505
522
  </button>
@@ -508,13 +525,14 @@ cssPrefix: pf-v5-c-menu-toggle
508
525
  <div class="pf-v5-c-menu-toggle pf-m-expanded pf-m-split-button pf-m-primary">
509
526
  <label
510
527
  class="pf-v5-c-check"
511
- for="split-button-checkbox-primary-expanded-example-input"
528
+ id="split-button-checkbox-primary-expanded-example-check"
529
+ for="split-button-checkbox-primary-expanded-example-check-input"
512
530
  >
513
531
  <input
514
532
  class="pf-v5-c-check__input"
515
533
  type="checkbox"
516
- id="split-button-checkbox-primary-expanded-example-input"
517
- name="split-button-checkbox-primary-expanded-example-input"
534
+ id="split-button-checkbox-primary-expanded-example-check-input"
535
+ name="split-button-checkbox-primary-expanded-example-check-input"
518
536
  />
519
537
  <span class="pf-v5-c-check__label">10 selected</span>
520
538
  </label>
@@ -527,7 +545,7 @@ cssPrefix: pf-v5-c-menu-toggle
527
545
  >
528
546
  <span class="pf-v5-c-menu-toggle__controls">
529
547
  <span class="pf-v5-c-menu-toggle__toggle-icon">
530
- <i class="fas fa-caret-down" aria-hidden="true"></i>
548
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
531
549
  </span>
532
550
  </span>
533
551
  </button>
@@ -541,14 +559,15 @@ cssPrefix: pf-v5-c-menu-toggle
541
559
  <div class="pf-v5-c-menu-toggle pf-m-split-button pf-m-disabled pf-m-secondary">
542
560
  <label
543
561
  class="pf-v5-c-check"
544
- for="split-button-checkbox-secondary-disabled-example-input"
562
+ id="split-button-checkbox-secondary-disabled-example-check"
563
+ for="split-button-checkbox-secondary-disabled-example-check-input"
545
564
  >
546
565
  <input
547
566
  class="pf-v5-c-check__input"
548
567
  type="checkbox"
568
+ id="split-button-checkbox-secondary-disabled-example-check-input"
569
+ name="split-button-checkbox-secondary-disabled-example-check-input"
549
570
  disabled
550
- id="split-button-checkbox-secondary-disabled-example-input"
551
- name="split-button-checkbox-secondary-disabled-example-input"
552
571
  />
553
572
  <span class="pf-v5-c-check__label pf-m-disabled">10 selected</span>
554
573
  </label>
@@ -562,7 +581,7 @@ cssPrefix: pf-v5-c-menu-toggle
562
581
  >
563
582
  <span class="pf-v5-c-menu-toggle__controls">
564
583
  <span class="pf-v5-c-menu-toggle__toggle-icon">
565
- <i class="fas fa-caret-down" aria-hidden="true"></i>
584
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
566
585
  </span>
567
586
  </span>
568
587
  </button>
@@ -571,13 +590,14 @@ cssPrefix: pf-v5-c-menu-toggle
571
590
  <div class="pf-v5-c-menu-toggle pf-m-split-button pf-m-secondary">
572
591
  <label
573
592
  class="pf-v5-c-check"
574
- for="split-button-checkbox-secondary-example-input"
593
+ id="split-button-checkbox-secondary-example-check"
594
+ for="split-button-checkbox-secondary-example-check-input"
575
595
  >
576
596
  <input
577
597
  class="pf-v5-c-check__input"
578
598
  type="checkbox"
579
- id="split-button-checkbox-secondary-example-input"
580
- name="split-button-checkbox-secondary-example-input"
599
+ id="split-button-checkbox-secondary-example-check-input"
600
+ name="split-button-checkbox-secondary-example-check-input"
581
601
  />
582
602
  <span class="pf-v5-c-check__label">10 selected</span>
583
603
  </label>
@@ -590,7 +610,7 @@ cssPrefix: pf-v5-c-menu-toggle
590
610
  >
591
611
  <span class="pf-v5-c-menu-toggle__controls">
592
612
  <span class="pf-v5-c-menu-toggle__toggle-icon">
593
- <i class="fas fa-caret-down" aria-hidden="true"></i>
613
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
594
614
  </span>
595
615
  </span>
596
616
  </button>
@@ -599,13 +619,14 @@ cssPrefix: pf-v5-c-menu-toggle
599
619
  <div class="pf-v5-c-menu-toggle pf-m-expanded pf-m-split-button pf-m-secondary">
600
620
  <label
601
621
  class="pf-v5-c-check"
602
- for="split-button-checkbox-secondary-expanded-example-input"
622
+ id="split-button-checkbox-secondary-expanded-example-check"
623
+ for="split-button-checkbox-secondary-expanded-example-check-input"
603
624
  >
604
625
  <input
605
626
  class="pf-v5-c-check__input"
606
627
  type="checkbox"
607
- id="split-button-checkbox-secondary-expanded-example-input"
608
- name="split-button-checkbox-secondary-expanded-example-input"
628
+ id="split-button-checkbox-secondary-expanded-example-check-input"
629
+ name="split-button-checkbox-secondary-expanded-example-check-input"
609
630
  />
610
631
  <span class="pf-v5-c-check__label">10 selected</span>
611
632
  </label>
@@ -618,7 +639,7 @@ cssPrefix: pf-v5-c-menu-toggle
618
639
  >
619
640
  <span class="pf-v5-c-menu-toggle__controls">
620
641
  <span class="pf-v5-c-menu-toggle__toggle-icon">
621
- <i class="fas fa-caret-down" aria-hidden="true"></i>
642
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
622
643
  </span>
623
644
  </span>
624
645
  </button>
@@ -641,7 +662,7 @@ cssPrefix: pf-v5-c-menu-toggle
641
662
  >
642
663
  <span class="pf-v5-c-menu-toggle__controls">
643
664
  <span class="pf-v5-c-menu-toggle__toggle-icon">
644
- <i class="fas fa-caret-down" aria-hidden="true"></i>
665
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
645
666
  </span>
646
667
  </span>
647
668
  </button>
@@ -658,7 +679,7 @@ cssPrefix: pf-v5-c-menu-toggle
658
679
  >
659
680
  <span class="pf-v5-c-menu-toggle__controls">
660
681
  <span class="pf-v5-c-menu-toggle__toggle-icon">
661
- <i class="fas fa-caret-down" aria-hidden="true"></i>
682
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
662
683
  </span>
663
684
  </span>
664
685
  </button>
@@ -675,7 +696,7 @@ cssPrefix: pf-v5-c-menu-toggle
675
696
  >
676
697
  <span class="pf-v5-c-menu-toggle__controls">
677
698
  <span class="pf-v5-c-menu-toggle__toggle-icon">
678
- <i class="fas fa-caret-down" aria-hidden="true"></i>
699
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
679
700
  </span>
680
701
  </span>
681
702
  </button>
@@ -700,7 +721,7 @@ cssPrefix: pf-v5-c-menu-toggle
700
721
  >
701
722
  <span class="pf-v5-c-menu-toggle__controls">
702
723
  <span class="pf-v5-c-menu-toggle__toggle-icon">
703
- <i class="fas fa-caret-down" aria-hidden="true"></i>
724
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
704
725
  </span>
705
726
  </span>
706
727
  </button>
@@ -717,7 +738,7 @@ cssPrefix: pf-v5-c-menu-toggle
717
738
  >
718
739
  <span class="pf-v5-c-menu-toggle__controls">
719
740
  <span class="pf-v5-c-menu-toggle__toggle-icon">
720
- <i class="fas fa-caret-down" aria-hidden="true"></i>
741
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
721
742
  </span>
722
743
  </span>
723
744
  </button>
@@ -736,7 +757,7 @@ cssPrefix: pf-v5-c-menu-toggle
736
757
  >
737
758
  <span class="pf-v5-c-menu-toggle__controls">
738
759
  <span class="pf-v5-c-menu-toggle__toggle-icon">
739
- <i class="fas fa-caret-down" aria-hidden="true"></i>
760
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
740
761
  </span>
741
762
  </span>
742
763
  </button>
@@ -761,7 +782,7 @@ cssPrefix: pf-v5-c-menu-toggle
761
782
  >
762
783
  <span class="pf-v5-c-menu-toggle__controls">
763
784
  <span class="pf-v5-c-menu-toggle__toggle-icon">
764
- <i class="fas fa-caret-down" aria-hidden="true"></i>
785
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
765
786
  </span>
766
787
  </span>
767
788
  </button>
@@ -778,7 +799,7 @@ cssPrefix: pf-v5-c-menu-toggle
778
799
  >
779
800
  <span class="pf-v5-c-menu-toggle__controls">
780
801
  <span class="pf-v5-c-menu-toggle__toggle-icon">
781
- <i class="fas fa-caret-down" aria-hidden="true"></i>
802
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
782
803
  </span>
783
804
  </span>
784
805
  </button>
@@ -797,7 +818,7 @@ cssPrefix: pf-v5-c-menu-toggle
797
818
  >
798
819
  <span class="pf-v5-c-menu-toggle__controls">
799
820
  <span class="pf-v5-c-menu-toggle__toggle-icon">
800
- <i class="fas fa-caret-down" aria-hidden="true"></i>
821
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
801
822
  </span>
802
823
  </span>
803
824
  </button>
@@ -819,7 +840,7 @@ cssPrefix: pf-v5-c-menu-toggle
819
840
  <span class="pf-v5-c-menu-toggle__text">Icon</span>
820
841
  <span class="pf-v5-c-menu-toggle__controls">
821
842
  <span class="pf-v5-c-menu-toggle__toggle-icon">
822
- <i class="fas fa-caret-down" aria-hidden="true"></i>
843
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
823
844
  </span>
824
845
  </span>
825
846
  </button>
@@ -837,7 +858,7 @@ cssPrefix: pf-v5-c-menu-toggle
837
858
  <span class="pf-v5-c-menu-toggle__text">Icon</span>
838
859
  <span class="pf-v5-c-menu-toggle__controls">
839
860
  <span class="pf-v5-c-menu-toggle__toggle-icon">
840
- <i class="fas fa-caret-down" aria-hidden="true"></i>
861
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
841
862
  </span>
842
863
  </span>
843
864
  </button>
@@ -858,7 +879,7 @@ cssPrefix: pf-v5-c-menu-toggle
858
879
  <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
859
880
  <span class="pf-v5-c-menu-toggle__controls">
860
881
  <span class="pf-v5-c-menu-toggle__toggle-icon">
861
- <i class="fas fa-caret-down" aria-hidden="true"></i>
882
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
862
883
  </span>
863
884
  </span>
864
885
  </button>
@@ -879,7 +900,7 @@ cssPrefix: pf-v5-c-menu-toggle
879
900
  <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
880
901
  <span class="pf-v5-c-menu-toggle__controls">
881
902
  <span class="pf-v5-c-menu-toggle__toggle-icon">
882
- <i class="fas fa-caret-down" aria-hidden="true"></i>
903
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
883
904
  </span>
884
905
  </span>
885
906
  </button>
@@ -901,7 +922,7 @@ cssPrefix: pf-v5-c-menu-toggle
901
922
  <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
902
923
  <span class="pf-v5-c-menu-toggle__controls">
903
924
  <span class="pf-v5-c-menu-toggle__toggle-icon">
904
- <i class="fas fa-caret-down" aria-hidden="true"></i>
925
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
905
926
  </span>
906
927
  </span>
907
928
  </button>
@@ -919,7 +940,7 @@ cssPrefix: pf-v5-c-menu-toggle
919
940
  <span class="pf-v5-c-menu-toggle__text">Full height</span>
920
941
  <span class="pf-v5-c-menu-toggle__controls">
921
942
  <span class="pf-v5-c-menu-toggle__toggle-icon">
922
- <i class="fas fa-caret-down" aria-hidden="true"></i>
943
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
923
944
  </span>
924
945
  </span>
925
946
  </button>
@@ -960,7 +981,7 @@ cssPrefix: pf-v5-c-menu-toggle
960
981
  >
961
982
  <span class="pf-v5-c-menu-toggle__controls">
962
983
  <span class="pf-v5-c-menu-toggle__toggle-icon">
963
- <i class="fas fa-caret-down" aria-hidden="true"></i>
984
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
964
985
  </span>
965
986
  </span>
966
987
  </button>
package/docs/components/ModalBox/examples/ModalBox.css CHANGED
@@ -1,10 +1,5 @@
1
1
  .ws-core-c-modal .ws-preview-html {
2
- position: relative;
3
- }
4
-
5
- .ws-core-c-modal .pf-v5-c-modal-box {
6
- position: absolute;
7
- top: 50%;
8
- left: 50%;
9
- transform: translate(-50%, -50%);
2
+ display: flex;
3
+ justify-content: center;
4
+ align-items: center;
10
5
  }
package/docs/components/Nav/examples/Navigation.css CHANGED
@@ -1,32 +1,10 @@
1
- #ws-core-c-navigation-default,
2
- #ws-core-c-navigation-basic,
3
- #ws-core-c-navigation-grouped,
4
- #ws-core-c-navigation-grouped-nav,
5
- #ws-core-c-navigation-grouped-nav-no-titles,
6
- #ws-core-c-navigation-expanded,
7
- #ws-core-c-navigation-expanded-with-subnav-titles,
8
- #ws-core-c-navigation-mixed,
9
- #ws-core-c-navigation-horizontal,
10
- #ws-core-c-navigation-horizontal-overflow,
11
- #ws-core-c-navigation-horizontal-subnav,
12
- #ws-core-c-navigation-horizontal-subnav-overflow,
13
- #ws-core-c-navigation-drilldown,
14
- #ws-core-c-navigation-nav-with-drilldown-menu .pf-v5-c-nav,
15
- #ws-core-c-navigation-level-2-drilldown,
16
- #ws-core-c-navigation-level-3-drilldown,
17
- #ws-core-c-navigation-nav-with-flyout .pf-v5-c-nav,
18
- #ws-core-c-navigation-grouped-nav-no-titles-no-margin-top {
1
+ .ws-core-c-navigation:not([id*="tertiary"]):not([id*="light-mode"]) .pf-v5-c-nav {
19
2
  padding: 0;
20
3
  background-color: var(--pf-v5-global--BackgroundColor--dark-300);
21
4
  }
22
5
 
23
- #ws-core-c-navigation-expandable-third-level .pf-v5-c-nav {
24
- background-color: var(--pf-v5-global--BackgroundColor--dark-300);
25
- }
26
-
27
6
  #ws-core-c-navigation-horizontal-in-masthead,
28
7
  #ws-core-c-navigation-horizontal-in-masthead-overflow {
29
- padding: 0;
30
8
  grid-template-rows: auto;
31
9
  }
32
10
 
@@ -58,6 +36,6 @@
58
36
 
59
37
  #ws-core-c-navigation-nav-with-flyout .pf-v5-c-menu.pf-m-flyout.pf-m-nav {
60
38
  position: absolute;
61
- top: 168px;
62
- left: 256px;
39
+ inset-block-start: 168px;
40
+ inset-inline-start: 256px;
63
41
  }