@patternfly/patternfly 6.0.0-alpha.8 → 6.0.0-alpha.81

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 (334) hide show
  1. package/CODE_OF_CONDUCT.md +1 -2
  2. package/assets/images/PF-Backdrop.svg +1 -0
  3. package/assets/images/PF-HorizontalLogo-Color.svg +29 -0
  4. package/assets/images/PF-HorizontalLogo-Reverse.svg +28 -0
  5. package/assets/images/PF-IconLogo-Reverse.svg +14 -0
  6. package/assets/images/PF-IconLogo-color.svg +17 -0
  7. package/assets/images/PF-IconLogo.svg +17 -0
  8. package/assets/images/logo__pf--reverse-on-md.svg +1 -1
  9. package/assets/images/pf-background.svg +22 -0
  10. package/assets/images/pf-c-brand__logo-on-lg-white.svg +32 -0
  11. package/assets/images/pf-c-brand__logo-on-md-white.svg +42 -0
  12. package/assets/images/pf-c-brand__logo-on-sm-white.svg +17 -0
  13. package/assets/images/pf-c-brand__logo-on-sm.svg +1 -1
  14. package/assets/images/pf-c-brand__logo-on-xl-white.svg +39 -0
  15. package/assets/images/pf_logo_white.hbs +35 -0
  16. package/assets/images/pf_logo_white.svg +38 -0
  17. package/base/_common.scss +8 -4
  18. package/base/_globals.scss +4 -6
  19. package/base/_variables.scss +2 -7
  20. package/base/patternfly-common.css +8 -4
  21. package/base/patternfly-globals.css +4 -3
  22. package/base/patternfly-variables.css +884 -871
  23. package/base/tokens/_tokens-charts.scss +159 -0
  24. package/base/tokens/_tokens-dark.scss +311 -287
  25. package/base/tokens/_tokens-default.scss +425 -329
  26. package/base/tokens/_tokens-font.scss +29 -36
  27. package/base/tokens/_tokens-palette.scss +71 -71
  28. package/base/tokens/_workspace-overrides.scss +7 -0
  29. package/components/AboutModalBox/about-modal-box.css +57 -94
  30. package/components/AboutModalBox/about-modal-box.scss +37 -62
  31. package/components/Accordion/accordion.css +85 -177
  32. package/components/Accordion/accordion.scss +96 -195
  33. package/components/ActionList/action-list.css +18 -17
  34. package/components/ActionList/action-list.scss +26 -16
  35. package/components/Alert/alert-group.css +20 -16
  36. package/components/Alert/alert-group.scss +20 -16
  37. package/components/Alert/alert.css +59 -84
  38. package/components/Alert/alert.scss +62 -78
  39. package/components/Avatar/avatar.css +10 -13
  40. package/components/Avatar/avatar.scss +10 -17
  41. package/components/BackToTop/back-to-top.css +17 -16
  42. package/components/BackToTop/back-to-top.scss +12 -12
  43. package/components/Backdrop/backdrop.css +6 -2
  44. package/components/Backdrop/backdrop.scss +5 -2
  45. package/components/BackgroundImage/background-image.css +5 -1
  46. package/components/BackgroundImage/background-image.scss +5 -1
  47. package/components/Badge/badge.css +23 -15
  48. package/components/Badge/badge.scss +25 -17
  49. package/components/Banner/banner.css +90 -64
  50. package/components/Banner/banner.scss +95 -32
  51. package/components/Breadcrumb/breadcrumb.css +19 -16
  52. package/components/Breadcrumb/breadcrumb.scss +18 -16
  53. package/components/Button/button.css +419 -353
  54. package/components/Button/button.scss +476 -476
  55. package/components/CalendarMonth/calendar-month.css +61 -92
  56. package/components/CalendarMonth/calendar-month.scss +68 -63
  57. package/components/Card/card.css +100 -194
  58. package/components/Card/card.scss +121 -237
  59. package/components/Check/check.css +24 -21
  60. package/components/Check/check.scss +25 -23
  61. package/components/ClipboardCopy/clipboard-copy.css +30 -33
  62. package/components/ClipboardCopy/clipboard-copy.scss +34 -26
  63. package/components/CodeBlock/code-block.css +22 -9
  64. package/components/CodeBlock/code-block.scss +22 -10
  65. package/components/CodeEditor/code-editor.css +94 -72
  66. package/components/CodeEditor/code-editor.scss +104 -82
  67. package/components/Content/content.css +7 -7
  68. package/components/Content/content.scss +7 -7
  69. package/components/DataList/data-list.css +101 -158
  70. package/components/DataList/data-list.scss +95 -154
  71. package/components/DatePicker/date-picker.css +13 -14
  72. package/components/DatePicker/date-picker.scss +12 -16
  73. package/components/DescriptionList/description-list.css +39 -34
  74. package/components/DescriptionList/description-list.scss +25 -25
  75. package/components/Divider/divider.css +91 -169
  76. package/components/Divider/divider.scss +60 -77
  77. package/components/DragDrop/drag-drop.css +18 -14
  78. package/components/DragDrop/drag-drop.scss +18 -17
  79. package/components/Drawer/drawer.css +112 -113
  80. package/components/Drawer/drawer.scss +134 -134
  81. package/components/Dropdown/dropdown.css +1 -3
  82. package/components/Dropdown/dropdown.scss +2 -6
  83. package/components/DualListSelector/dual-list-selector.css +56 -48
  84. package/components/DualListSelector/dual-list-selector.scss +57 -50
  85. package/components/EmptyState/empty-state.css +57 -34
  86. package/components/EmptyState/empty-state.scss +63 -34
  87. package/components/ExpandableSection/expandable-section.css +64 -62
  88. package/components/ExpandableSection/expandable-section.scss +73 -76
  89. package/components/FileUpload/file-upload.css +28 -34
  90. package/components/FileUpload/file-upload.scss +30 -42
  91. package/components/Form/form.css +68 -114
  92. package/components/Form/form.scss +65 -126
  93. package/components/FormControl/form-control.css +86 -111
  94. package/components/FormControl/form-control.scss +88 -92
  95. package/components/HelperText/helper-text.css +28 -34
  96. package/components/HelperText/helper-text.scss +30 -40
  97. package/components/Hint/hint.css +28 -21
  98. package/components/Hint/hint.scss +28 -24
  99. package/components/Icon/icon.css +154 -18
  100. package/components/Icon/icon.scss +187 -20
  101. package/components/InlineEdit/inline-edit.css +8 -7
  102. package/components/InlineEdit/inline-edit.scss +8 -7
  103. package/components/InputGroup/input-group.css +22 -38
  104. package/components/InputGroup/input-group.scss +21 -29
  105. package/components/JumpLinks/jump-links.css +34 -34
  106. package/components/JumpLinks/jump-links.scss +35 -36
  107. package/components/Label/label-group.css +39 -44
  108. package/components/Label/label-group.scss +39 -45
  109. package/components/Label/label.css +380 -355
  110. package/components/Label/label.scss +434 -348
  111. package/components/List/list.css +16 -16
  112. package/components/List/list.scss +17 -17
  113. package/components/Login/login.css +70 -97
  114. package/components/Login/login.scss +56 -64
  115. package/components/Masthead/masthead.css +261 -502
  116. package/components/Masthead/masthead.scss +123 -286
  117. package/components/Menu/menu.css +3 -0
  118. package/components/Menu/menu.scss +7 -3
  119. package/components/MenuToggle/menu-toggle.css +8 -8
  120. package/components/MenuToggle/menu-toggle.scss +8 -10
  121. package/components/ModalBox/modal-box.css +59 -52
  122. package/components/ModalBox/modal-box.scss +57 -53
  123. package/components/MultipleFileUpload/multiple-file-upload.css +77 -50
  124. package/components/MultipleFileUpload/multiple-file-upload.scss +82 -53
  125. package/components/Nav/nav.css +240 -918
  126. package/components/Nav/nav.scss +300 -1082
  127. package/components/NotificationBadge/notification-badge.css +56 -81
  128. package/components/NotificationBadge/notification-badge.scss +60 -97
  129. package/components/NotificationDrawer/notification-drawer.css +104 -115
  130. package/components/NotificationDrawer/notification-drawer.scss +106 -116
  131. package/components/NumberInput/number-input.css +8 -8
  132. package/components/NumberInput/number-input.scss +7 -12
  133. package/components/OverflowMenu/overflow-menu.css +17 -47
  134. package/components/OverflowMenu/overflow-menu.scss +27 -65
  135. package/components/Page/page.css +56 -164
  136. package/components/Page/page.scss +60 -154
  137. package/components/Pagination/pagination.css +57 -124
  138. package/components/Pagination/pagination.scss +40 -128
  139. package/components/Panel/panel.css +27 -23
  140. package/components/Panel/panel.scss +29 -26
  141. package/components/Popover/popover.css +42 -53
  142. package/components/Popover/popover.scss +46 -55
  143. package/components/Progress/progress.css +31 -45
  144. package/components/Progress/progress.scss +36 -55
  145. package/components/ProgressStepper/progress-stepper.css +72 -69
  146. package/components/ProgressStepper/progress-stepper.scss +65 -65
  147. package/components/Radio/radio.css +27 -20
  148. package/components/Radio/radio.scss +28 -22
  149. package/components/Sidebar/sidebar.css +20 -9
  150. package/components/Sidebar/sidebar.scss +23 -11
  151. package/components/SimpleList/simple-list.css +35 -52
  152. package/components/SimpleList/simple-list.scss +41 -51
  153. package/components/Skeleton/skeleton.css +18 -20
  154. package/components/Skeleton/skeleton.scss +17 -21
  155. package/components/SkipToContent/skip-to-content.css +6 -3
  156. package/components/SkipToContent/skip-to-content.scss +8 -6
  157. package/components/Slider/slider.css +34 -30
  158. package/components/Slider/slider.scss +46 -43
  159. package/components/Spinner/spinner.css +17 -34
  160. package/components/Spinner/spinner.scss +19 -47
  161. package/components/Switch/switch.css +42 -38
  162. package/components/Switch/switch.scss +48 -43
  163. package/components/TabContent/tab-content.css +17 -11
  164. package/components/TabContent/tab-content.scss +18 -14
  165. package/components/Table/table-grid.css +29 -45
  166. package/components/Table/table-grid.scss +40 -53
  167. package/components/Table/table-scrollable.css +6 -6
  168. package/components/Table/table-scrollable.scss +8 -8
  169. package/components/Table/table-tree-view.css +76 -74
  170. package/components/Table/table-tree-view.scss +44 -39
  171. package/components/Table/table.css +67 -93
  172. package/components/Table/table.scss +83 -105
  173. package/components/Tabs/tabs.css +143 -175
  174. package/components/Tabs/tabs.scss +159 -217
  175. package/components/Tile/tile.css +40 -81
  176. package/components/Tile/tile.scss +38 -84
  177. package/components/Timestamp/timestamp.css +12 -9
  178. package/components/Timestamp/timestamp.scss +11 -10
  179. package/components/Title/title.css +70 -19
  180. package/components/Title/title.scss +90 -20
  181. package/components/ToggleGroup/toggle-group.css +54 -48
  182. package/components/ToggleGroup/toggle-group.scss +62 -50
  183. package/components/Toolbar/toolbar.css +2527 -1031
  184. package/components/Toolbar/toolbar.scss +233 -520
  185. package/components/Tooltip/tooltip.css +16 -18
  186. package/components/Tooltip/tooltip.scss +20 -24
  187. package/components/TreeView/tree-view.css +76 -97
  188. package/components/TreeView/tree-view.scss +82 -113
  189. package/components/Truncate/truncate.css +4 -0
  190. package/components/Truncate/truncate.scss +3 -0
  191. package/docs/components/AboutModalBox/examples/AboutModalBox.md +2 -2
  192. package/docs/components/Accordion/examples/Accordion.md +614 -416
  193. package/docs/components/ActionList/examples/ActionList.md +73 -22
  194. package/docs/components/Alert/examples/Alert.md +3 -3
  195. package/docs/components/Avatar/examples/Avatar.md +5 -19
  196. package/docs/components/BackgroundImage/examples/BackgroundImage.md +1 -1
  197. package/docs/components/Badge/examples/Badge.md +21 -0
  198. package/docs/components/Banner/examples/Banner.md +48 -25
  199. package/docs/components/Brand/examples/Brand.css +12 -0
  200. package/docs/components/Brand/examples/Brand.md +51 -32
  201. package/docs/components/Breadcrumb/examples/Breadcrumb.md +1 -1
  202. package/docs/components/Button/examples/Button.css +4 -0
  203. package/docs/components/Button/examples/Button.md +1419 -93
  204. package/docs/components/CalendarMonth/examples/CalendarMonth.md +48 -224
  205. package/docs/components/Card/examples/Card.md +550 -133
  206. package/docs/components/Check/examples/Check.md +1 -0
  207. package/docs/components/CodeBlock/examples/CodeBlock.md +4 -4
  208. package/docs/components/CodeEditor/examples/CodeEditor.md +144 -132
  209. package/docs/components/Content/examples/Content.md +5 -5
  210. package/docs/components/DatePicker/examples/DatePicker.md +5 -2
  211. package/docs/components/Divider/examples/Divider.css +3 -1
  212. package/docs/components/Divider/examples/Divider.md +30 -5
  213. package/docs/components/DragDrop/examples/DragDrop.css +1 -1
  214. package/docs/components/Drawer/examples/Drawer.md +294 -256
  215. package/docs/components/EmptyState/examples/EmptyState.md +45 -1
  216. package/docs/components/ExpandableSection/examples/ExpandableSection.md +49 -28
  217. package/docs/components/FileUpload/examples/FileUpload.md +112 -53
  218. package/docs/components/Form/examples/Form.md +134 -89
  219. package/docs/components/Icon/examples/Icon.md +82 -11
  220. package/docs/components/InlineEdit/examples/InlineEdit.md +3 -1
  221. package/docs/components/JumpLinks/examples/JumpLinks.md +280 -168
  222. package/docs/components/Label/examples/Label.css +4 -0
  223. package/docs/components/Label/examples/Label.md +3090 -703
  224. package/docs/components/LogViewer/examples/LogViewer.md +180 -180
  225. package/docs/components/Login/examples/Login.md +10 -5
  226. package/docs/components/Masthead/examples/masthead.md +443 -65
  227. package/docs/components/Menu/examples/Menu.md +507 -473
  228. package/docs/components/MenuToggle/examples/MenuToggle.md +106 -114
  229. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +9 -9
  230. package/docs/components/Nav/examples/Navigation.css +1 -23
  231. package/docs/components/Nav/examples/Navigation.md +209 -356
  232. package/docs/components/NotificationBadge/examples/NotificationBadge.md +5 -7
  233. package/docs/components/Page/examples/Page.css +0 -8
  234. package/docs/components/Page/examples/Page.md +22 -21
  235. package/docs/components/Pagination/examples/Pagination.md +663 -637
  236. package/docs/components/Panel/examples/Panel.md +12 -0
  237. package/docs/components/Popover/examples/Popover.md +1 -1
  238. package/docs/components/ProgressStepper/examples/ProgressStepper.md +15 -14
  239. package/docs/components/Radio/examples/Radio.md +1 -1
  240. package/docs/components/Sidebar/examples/Sidebar.md +19 -0
  241. package/docs/components/SimpleList/examples/SimpleList.md +3 -3
  242. package/docs/components/TabContent/examples/TabContent.md +10 -10
  243. package/docs/components/Table/examples/Table.md +8 -8
  244. package/docs/components/Tabs/examples/Tabs.css +1 -1
  245. package/docs/components/Tabs/examples/Tabs.md +1025 -826
  246. package/docs/components/TextInputGroup/examples/TextInputGroup.md +9 -9
  247. package/docs/components/Tile/examples/Tile.md +264 -144
  248. package/docs/components/Title/examples/Title.md +18 -0
  249. package/docs/components/Toolbar/examples/Toolbar.css +20 -15
  250. package/docs/components/Toolbar/examples/Toolbar.md +985 -3355
  251. package/docs/components/TreeView/examples/TreeView.md +7 -57
  252. package/docs/components/Truncate/examples/Truncate.css +2 -2
  253. package/docs/demos/AboutModal/examples/AboutModal.md +104 -31
  254. package/docs/demos/Alert/examples/Alert.md +330 -87
  255. package/docs/demos/BackToTop/examples/BackToTop.md +102 -29
  256. package/docs/demos/Banner/examples/Banner.md +211 -60
  257. package/docs/demos/Card/examples/Card.md +2 -2
  258. package/docs/demos/CardView/examples/CardView.md +241 -187
  259. package/docs/demos/ContextSelector/examples/ContextSelector.md +377 -94
  260. package/docs/demos/Dashboard/examples/Dashboard.md +102 -29
  261. package/docs/demos/DataList/examples/DataList.md +999 -938
  262. package/docs/demos/DescriptionList/examples/DescriptionList.md +306 -87
  263. package/docs/demos/Drawer/examples/Drawer.md +640 -251
  264. package/docs/demos/Form/examples/BasicForms.md +138 -84
  265. package/docs/demos/JumpLinks/examples/JumpLinks.md +917 -385
  266. package/docs/demos/Masthead/examples/Masthead.md +786 -342
  267. package/docs/demos/Modal/examples/Modal.md +645 -198
  268. package/docs/demos/Nav/examples/Nav.md +691 -902
  269. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +515 -145
  270. package/docs/demos/Page/examples/Page.md +942 -273
  271. package/docs/demos/Page/examples/Penta.md +66 -26
  272. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +13 -9
  273. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +44 -32
  274. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +1183 -832
  275. package/docs/demos/Skeleton/examples/Skeleton.md +102 -29
  276. package/docs/demos/Table/examples/Table.md +3811 -3456
  277. package/docs/demos/Tabs/examples/Tabs.md +636 -194
  278. package/docs/demos/Toolbar/examples/Toolbar.css +10 -0
  279. package/docs/demos/Toolbar/examples/Toolbar.md +1316 -1478
  280. package/docs/demos/Wizard/examples/Wizard.md +918 -261
  281. package/docs/layouts/Flex/examples/Flex.md +11 -11
  282. package/package.json +32 -32
  283. package/patternfly-base-no-globals-theme-dark-unversioned.css +897 -880
  284. package/patternfly-base-no-globals.css +897 -880
  285. package/patternfly-base-theme-dark-unversioned.css +890 -872
  286. package/patternfly-base.css +890 -872
  287. package/patternfly-no-globals.css +8107 -8027
  288. package/patternfly-theme-dark-unversioned.css +8111 -8030
  289. package/patternfly.css +8111 -8030
  290. package/patternfly.min.css +1 -1
  291. package/patternfly.min.css.map +1 -1
  292. package/sass-utilities/mixins.scss +18 -0
  293. package/base/themes/dark/_variables.scss +0 -102
  294. package/components/AboutModalBox/themes/dark/about-modal-box.scss +0 -7
  295. package/components/Accordion/themes/dark/accordion.scss +0 -9
  296. package/components/Alert/themes/dark/alert.scss +0 -17
  297. package/components/Badge/themes/dark/badge.scss +0 -9
  298. package/components/Banner/themes/dark/banner.scss +0 -14
  299. package/components/Button/themes/dark/button.scss +0 -51
  300. package/components/CalendarMonth/themes/dark/calendar-month.scss +0 -37
  301. package/components/Card/themes/dark/card.scss +0 -20
  302. package/components/ClipboardCopy/themes/dark/clipboard-copy.scss +0 -19
  303. package/components/CodeEditor/themes/dark/code-editor.scss +0 -14
  304. package/components/DataList/themes/dark/data-list.scss +0 -10
  305. package/components/DatePicker/themes/dark/date-picker.scss +0 -8
  306. package/components/DragDrop/themes/dark/drag-drop.scss +0 -7
  307. package/components/Drawer/themes/dark/drawer.scss +0 -13
  308. package/components/DualListSelector/themes/dark/dual-list-selector.scss +0 -9
  309. package/components/Form/themes/dark/form.scss +0 -7
  310. package/components/FormControl/themes/dark/form-control.scss +0 -24
  311. package/components/HelperText/themes/dark/helper-text.scss +0 -7
  312. package/components/Hint/themes/dark/hint.scss +0 -8
  313. package/components/InputGroup/themes/dark/input-group.scss +0 -22
  314. package/components/Label/themes/dark/label.scss +0 -53
  315. package/components/Login/themes/dark/login.scss +0 -12
  316. package/components/Masthead/themes/dark/masthead.scss +0 -14
  317. package/components/ModalBox/themes/dark/modal-box.scss +0 -7
  318. package/components/NotificationBadge/themes/dark/notification-badge.scss +0 -10
  319. package/components/NotificationDrawer/themes/dark/notification-drawer.scss +0 -14
  320. package/components/Page/themes/dark/page.scss +0 -69
  321. package/components/Pagination/themes/dark/pagination.scss +0 -7
  322. package/components/Panel/themes/dark/panel.scss +0 -7
  323. package/components/Popover/themes/dark/popover.scss +0 -11
  324. package/components/Progress/themes/dark/progress.scss +0 -9
  325. package/components/SimpleList/themes/dark/simple-list.scss +0 -14
  326. package/components/Skeleton/themes/dark/skeleton.scss +0 -10
  327. package/components/Switch/themes/dark/switch.scss +0 -11
  328. package/components/Tabs/themes/dark/tabs.scss +0 -10
  329. package/components/Tile/themes/dark/tile.scss +0 -10
  330. package/components/ToggleGroup/themes/dark/toggle-group.scss +0 -12
  331. package/components/Tooltip/themes/dark/tooltip.scss +0 -8
  332. package/components/TreeView/themes/dark/tree-view.scss +0 -8
  333. package/docs/components/Avatar/examples/Avatar.css +0 -3
  334. package/docs/components/NotificationBadge/examples/NotificationBadge.css +0 -3
package/docs/components/MenuToggle/examples/MenuToggle.md CHANGED
@@ -274,17 +274,17 @@ 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">
277
+ <div
278
+ class="pf-v5-c-menu-toggle pf-m-split-button pf-m-disabled"
279
+ id="split-button-checkbox-disabled-example"
280
+ >
278
281
  <label
279
282
  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"
283
+ for="split-button-checkbox-disabled-example-input"
282
284
  >
283
285
  <input
284
286
  class="pf-v5-c-check__input"
285
287
  type="checkbox"
286
- id="split-button-checkbox-disabled-example-check-input"
287
- name="split-button-checkbox-disabled-example-check-input"
288
288
  aria-label="Standalone check"
289
289
  disabled
290
290
  />
@@ -305,17 +305,17 @@ cssPrefix: pf-v5-c-menu-toggle
305
305
  </button>
306
306
  </div>
307
307
  &nbsp;
308
- <div class="pf-v5-c-menu-toggle pf-m-split-button">
308
+ <div
309
+ class="pf-v5-c-menu-toggle pf-m-split-button"
310
+ id="split-button-checkbox-example"
311
+ >
309
312
  <label
310
313
  class="pf-v5-c-check pf-m-standalone"
311
- id="split-button-checkbox-example-check"
312
- for="split-button-checkbox-example-check-input"
314
+ for="split-button-checkbox-example-input"
313
315
  >
314
316
  <input
315
317
  class="pf-v5-c-check__input"
316
318
  type="checkbox"
317
- id="split-button-checkbox-example-check-input"
318
- name="split-button-checkbox-example-check-input"
319
319
  aria-label="Standalone check"
320
320
  />
321
321
  </label>
@@ -334,17 +334,17 @@ cssPrefix: pf-v5-c-menu-toggle
334
334
  </button>
335
335
  </div>
336
336
  &nbsp;
337
- <div class="pf-v5-c-menu-toggle pf-m-expanded pf-m-split-button">
337
+ <div
338
+ class="pf-v5-c-menu-toggle pf-m-expanded pf-m-split-button"
339
+ id="split-button-checkbox-expanded-example"
340
+ >
338
341
  <label
339
342
  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"
343
+ for="split-button-checkbox-expanded-example-input"
342
344
  >
343
345
  <input
344
346
  class="pf-v5-c-check__input"
345
347
  type="checkbox"
346
- id="split-button-checkbox-expanded-example-check-input"
347
- name="split-button-checkbox-expanded-example-check-input"
348
348
  aria-label="Standalone check"
349
349
  />
350
350
  </label>
@@ -368,20 +368,16 @@ cssPrefix: pf-v5-c-menu-toggle
368
368
  ### Split button (checkbox with toggle text)
369
369
 
370
370
  ```html
371
- <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
+ >
372
375
  <label
373
376
  class="pf-v5-c-check"
374
- id="split-button-checkbox-with-toggle-text-disabled-example-check"
375
- for="split-button-checkbox-with-toggle-text-disabled-example-check-input"
377
+ for="split-button-checkbox-with-toggle-text-disabled-example-input"
376
378
  >
377
- <input
378
- class="pf-v5-c-check__input"
379
- type="checkbox"
380
- id="split-button-checkbox-with-toggle-text-disabled-example-check-input"
381
- name="split-button-checkbox-with-toggle-text-disabled-example-check-input"
382
- disabled
383
- />
384
- <span class="pf-v5-c-check__label pf-m-disabled">10 selected</span>
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>
385
381
  </label>
386
382
  <button
387
383
  class="pf-v5-c-menu-toggle__button"
@@ -399,19 +395,16 @@ cssPrefix: pf-v5-c-menu-toggle
399
395
  </button>
400
396
  </div>
401
397
  &nbsp;
402
- <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
+ >
403
402
  <label
404
403
  class="pf-v5-c-check"
405
- id="split-button-checkbox-with-toggle-text-example-check"
406
- for="split-button-checkbox-with-toggle-text-example-check-input"
404
+ for="split-button-checkbox-with-toggle-text-example-input"
407
405
  >
408
- <input
409
- class="pf-v5-c-check__input"
410
- type="checkbox"
411
- id="split-button-checkbox-with-toggle-text-example-check-input"
412
- name="split-button-checkbox-with-toggle-text-example-check-input"
413
- />
414
- <span class="pf-v5-c-check__label">10 selected</span>
406
+ <input class="pf-v5-c-check__input" type="checkbox" />
407
+ <label class="pf-v5-c-check__label" for="-input">10 selected</label>
415
408
  </label>
416
409
  <button
417
410
  class="pf-v5-c-menu-toggle__button"
@@ -428,19 +421,16 @@ cssPrefix: pf-v5-c-menu-toggle
428
421
  </button>
429
422
  </div>
430
423
  &nbsp;
431
- <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
+ >
432
428
  <label
433
429
  class="pf-v5-c-check"
434
- id="split-button-checkbox-with-toggle-text-expanded-example-check"
435
- for="split-button-checkbox-with-toggle-text-expanded-example-check-input"
430
+ for="split-button-checkbox-with-toggle-text-expanded-example-input"
436
431
  >
437
- <input
438
- class="pf-v5-c-check__input"
439
- type="checkbox"
440
- id="split-button-checkbox-with-toggle-text-expanded-example-check-input"
441
- name="split-button-checkbox-with-toggle-text-expanded-example-check-input"
442
- />
443
- <span class="pf-v5-c-check__label">10 selected</span>
432
+ <input class="pf-v5-c-check__input" type="checkbox" />
433
+ <label class="pf-v5-c-check__label" for="-input">10 selected</label>
444
434
  </label>
445
435
  <button
446
436
  class="pf-v5-c-menu-toggle__button"
@@ -462,20 +452,16 @@ cssPrefix: pf-v5-c-menu-toggle
462
452
  ### Split button, primary
463
453
 
464
454
  ```html
465
- <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
+ >
466
459
  <label
467
460
  class="pf-v5-c-check"
468
- id="split-button-checkbox-primary-disabled-example-check"
469
- for="split-button-checkbox-primary-disabled-example-check-input"
461
+ for="split-button-checkbox-primary-disabled-example-input"
470
462
  >
471
- <input
472
- class="pf-v5-c-check__input"
473
- type="checkbox"
474
- id="split-button-checkbox-primary-disabled-example-check-input"
475
- name="split-button-checkbox-primary-disabled-example-check-input"
476
- disabled
477
- />
478
- <span class="pf-v5-c-check__label pf-m-disabled">10 selected</span>
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>
479
465
  </label>
480
466
  <button
481
467
  class="pf-v5-c-menu-toggle__button"
@@ -493,19 +479,16 @@ cssPrefix: pf-v5-c-menu-toggle
493
479
  </button>
494
480
  </div>
495
481
  &nbsp;
496
- <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
+ >
497
486
  <label
498
487
  class="pf-v5-c-check"
499
- id="split-button-checkbox-primary-example-check"
500
- for="split-button-checkbox-primary-example-check-input"
488
+ for="split-button-checkbox-primary-example-input"
501
489
  >
502
- <input
503
- class="pf-v5-c-check__input"
504
- type="checkbox"
505
- id="split-button-checkbox-primary-example-check-input"
506
- name="split-button-checkbox-primary-example-check-input"
507
- />
508
- <span class="pf-v5-c-check__label">10 selected</span>
490
+ <input class="pf-v5-c-check__input" type="checkbox" />
491
+ <label class="pf-v5-c-check__label" for="-input">10 selected</label>
509
492
  </label>
510
493
  <button
511
494
  class="pf-v5-c-menu-toggle__button"
@@ -522,19 +505,16 @@ cssPrefix: pf-v5-c-menu-toggle
522
505
  </button>
523
506
  </div>
524
507
  &nbsp;
525
- <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
+ >
526
512
  <label
527
513
  class="pf-v5-c-check"
528
- id="split-button-checkbox-primary-expanded-example-check"
529
- for="split-button-checkbox-primary-expanded-example-check-input"
514
+ for="split-button-checkbox-primary-expanded-example-input"
530
515
  >
531
- <input
532
- class="pf-v5-c-check__input"
533
- type="checkbox"
534
- id="split-button-checkbox-primary-expanded-example-check-input"
535
- name="split-button-checkbox-primary-expanded-example-check-input"
536
- />
537
- <span class="pf-v5-c-check__label">10 selected</span>
516
+ <input class="pf-v5-c-check__input" type="checkbox" />
517
+ <label class="pf-v5-c-check__label" for="-input">10 selected</label>
538
518
  </label>
539
519
  <button
540
520
  class="pf-v5-c-menu-toggle__button"
@@ -556,20 +536,16 @@ cssPrefix: pf-v5-c-menu-toggle
556
536
  ### Split button, secondary
557
537
 
558
538
  ```html
559
- <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
+ >
560
543
  <label
561
544
  class="pf-v5-c-check"
562
- id="split-button-checkbox-secondary-disabled-example-check"
563
- for="split-button-checkbox-secondary-disabled-example-check-input"
545
+ for="split-button-checkbox-secondary-disabled-example-input"
564
546
  >
565
- <input
566
- class="pf-v5-c-check__input"
567
- type="checkbox"
568
- id="split-button-checkbox-secondary-disabled-example-check-input"
569
- name="split-button-checkbox-secondary-disabled-example-check-input"
570
- disabled
571
- />
572
- <span class="pf-v5-c-check__label pf-m-disabled">10 selected</span>
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>
573
549
  </label>
574
550
  <button
575
551
  class="pf-v5-c-menu-toggle__button"
@@ -587,19 +563,16 @@ cssPrefix: pf-v5-c-menu-toggle
587
563
  </button>
588
564
  </div>
589
565
  &nbsp;
590
- <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
+ >
591
570
  <label
592
571
  class="pf-v5-c-check"
593
- id="split-button-checkbox-secondary-example-check"
594
- for="split-button-checkbox-secondary-example-check-input"
572
+ for="split-button-checkbox-secondary-example-input"
595
573
  >
596
- <input
597
- class="pf-v5-c-check__input"
598
- type="checkbox"
599
- id="split-button-checkbox-secondary-example-check-input"
600
- name="split-button-checkbox-secondary-example-check-input"
601
- />
602
- <span class="pf-v5-c-check__label">10 selected</span>
574
+ <input class="pf-v5-c-check__input" type="checkbox" />
575
+ <label class="pf-v5-c-check__label" for="-input">10 selected</label>
603
576
  </label>
604
577
  <button
605
578
  class="pf-v5-c-menu-toggle__button"
@@ -616,19 +589,16 @@ cssPrefix: pf-v5-c-menu-toggle
616
589
  </button>
617
590
  </div>
618
591
  &nbsp;
619
- <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
+ >
620
596
  <label
621
597
  class="pf-v5-c-check"
622
- id="split-button-checkbox-secondary-expanded-example-check"
623
- for="split-button-checkbox-secondary-expanded-example-check-input"
598
+ for="split-button-checkbox-secondary-expanded-example-input"
624
599
  >
625
- <input
626
- class="pf-v5-c-check__input"
627
- type="checkbox"
628
- id="split-button-checkbox-secondary-expanded-example-check-input"
629
- name="split-button-checkbox-secondary-expanded-example-check-input"
630
- />
631
- <span class="pf-v5-c-check__label">10 selected</span>
600
+ <input class="pf-v5-c-check__input" type="checkbox" />
601
+ <label class="pf-v5-c-check__label" for="-input">10 selected</label>
632
602
  </label>
633
603
  <button
634
604
  class="pf-v5-c-menu-toggle__button"
@@ -650,7 +620,10 @@ cssPrefix: pf-v5-c-menu-toggle
650
620
  ### Split button (action)
651
621
 
652
622
  ```html
653
- <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
+ >
654
627
  <button class="pf-v5-c-menu-toggle__button" type="button" disabled>Action</button>
655
628
  <button
656
629
  class="pf-v5-c-menu-toggle__button"
@@ -668,7 +641,10 @@ cssPrefix: pf-v5-c-menu-toggle
668
641
  </button>
669
642
  </div>
670
643
  &nbsp;
671
- <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
+ >
672
648
  <button class="pf-v5-c-menu-toggle__button" type="button">Action</button>
673
649
  <button
674
650
  class="pf-v5-c-menu-toggle__button"
@@ -685,7 +661,10 @@ cssPrefix: pf-v5-c-menu-toggle
685
661
  </button>
686
662
  </div>
687
663
  &nbsp;
688
- <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
+ >
689
668
  <button class="pf-v5-c-menu-toggle__button" type="button">Action</button>
690
669
  <button
691
670
  class="pf-v5-c-menu-toggle__button"
@@ -709,6 +688,7 @@ cssPrefix: pf-v5-c-menu-toggle
709
688
  ```html
710
689
  <div
711
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"
712
692
  >
713
693
  <button class="pf-v5-c-menu-toggle__button" type="button" disabled>Action</button>
714
694
  <button
@@ -727,7 +707,10 @@ cssPrefix: pf-v5-c-menu-toggle
727
707
  </button>
728
708
  </div>
729
709
  &nbsp;
730
- <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
+ >
731
714
  <button class="pf-v5-c-menu-toggle__button" type="button">Action</button>
732
715
  <button
733
716
  class="pf-v5-c-menu-toggle__button"
@@ -746,6 +729,7 @@ cssPrefix: pf-v5-c-menu-toggle
746
729
  &nbsp;
747
730
  <div
748
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"
749
733
  >
750
734
  <button class="pf-v5-c-menu-toggle__button" type="button">Action</button>
751
735
  <button
@@ -770,6 +754,7 @@ cssPrefix: pf-v5-c-menu-toggle
770
754
  ```html
771
755
  <div
772
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"
773
758
  >
774
759
  <button class="pf-v5-c-menu-toggle__button" type="button" disabled>Action</button>
775
760
  <button
@@ -788,7 +773,10 @@ cssPrefix: pf-v5-c-menu-toggle
788
773
  </button>
789
774
  </div>
790
775
  &nbsp;
791
- <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
+ >
792
780
  <button class="pf-v5-c-menu-toggle__button" type="button">Action</button>
793
781
  <button
794
782
  class="pf-v5-c-menu-toggle__button"
@@ -807,6 +795,7 @@ cssPrefix: pf-v5-c-menu-toggle
807
795
  &nbsp;
808
796
  <div
809
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"
810
799
  >
811
800
  <button class="pf-v5-c-menu-toggle__button" type="button">Action</button>
812
801
  <button
@@ -950,7 +939,10 @@ cssPrefix: pf-v5-c-menu-toggle
950
939
  ### Typeahead
951
940
 
952
941
  ```html
953
- <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
+ >
954
946
  <div class="pf-v5-c-text-input-group pf-m-plain">
955
947
  <div class="pf-v5-c-text-input-group__main">
956
948
  <span class="pf-v5-c-text-input-group__text">
package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md CHANGED
@@ -194,7 +194,7 @@ cssPrefix: pf-v5-c-multiple-file-upload
194
194
  type="button"
195
195
  aria-label="Remove from list"
196
196
  >
197
- <i class="fas fa-times-circle" aria-hidden="true"></i>
197
+ <i class="fas fa-times" aria-hidden="true"></i>
198
198
  </button>
199
199
  </div>
200
200
  </li>
@@ -243,7 +243,7 @@ cssPrefix: pf-v5-c-multiple-file-upload
243
243
  type="button"
244
244
  aria-label="Remove from list"
245
245
  >
246
- <i class="fas fa-times-circle" aria-hidden="true"></i>
246
+ <i class="fas fa-times" aria-hidden="true"></i>
247
247
  </button>
248
248
  </div>
249
249
  </li>
@@ -292,7 +292,7 @@ cssPrefix: pf-v5-c-multiple-file-upload
292
292
  type="button"
293
293
  aria-label="Remove from list"
294
294
  >
295
- <i class="fas fa-times-circle" aria-hidden="true"></i>
295
+ <i class="fas fa-times" aria-hidden="true"></i>
296
296
  </button>
297
297
  </div>
298
298
  </li>
@@ -393,7 +393,7 @@ cssPrefix: pf-v5-c-multiple-file-upload
393
393
  type="button"
394
394
  aria-label="Remove from list"
395
395
  >
396
- <i class="fas fa-times-circle" aria-hidden="true"></i>
396
+ <i class="fas fa-times" aria-hidden="true"></i>
397
397
  </button>
398
398
  </div>
399
399
  </li>
@@ -442,7 +442,7 @@ cssPrefix: pf-v5-c-multiple-file-upload
442
442
  type="button"
443
443
  aria-label="Remove from list"
444
444
  >
445
- <i class="fas fa-times-circle" aria-hidden="true"></i>
445
+ <i class="fas fa-times" aria-hidden="true"></i>
446
446
  </button>
447
447
  </div>
448
448
  </li>
@@ -491,7 +491,7 @@ cssPrefix: pf-v5-c-multiple-file-upload
491
491
  type="button"
492
492
  aria-label="Remove from list"
493
493
  >
494
- <i class="fas fa-times-circle" aria-hidden="true"></i>
494
+ <i class="fas fa-times" aria-hidden="true"></i>
495
495
  </button>
496
496
  </div>
497
497
  </li>
@@ -592,7 +592,7 @@ cssPrefix: pf-v5-c-multiple-file-upload
592
592
  type="button"
593
593
  aria-label="Remove from list"
594
594
  >
595
- <i class="fas fa-times-circle" aria-hidden="true"></i>
595
+ <i class="fas fa-times" aria-hidden="true"></i>
596
596
  </button>
597
597
  </div>
598
598
  </li>
@@ -641,7 +641,7 @@ cssPrefix: pf-v5-c-multiple-file-upload
641
641
  type="button"
642
642
  aria-label="Remove from list"
643
643
  >
644
- <i class="fas fa-times-circle" aria-hidden="true"></i>
644
+ <i class="fas fa-times" aria-hidden="true"></i>
645
645
  </button>
646
646
  </div>
647
647
  </li>
@@ -690,7 +690,7 @@ cssPrefix: pf-v5-c-multiple-file-upload
690
690
  type="button"
691
691
  aria-label="Remove from list"
692
692
  >
693
- <i class="fas fa-times-circle" aria-hidden="true"></i>
693
+ <i class="fas fa-times" aria-hidden="true"></i>
694
694
  </button>
695
695
  </div>
696
696
  </li>
package/docs/components/Nav/examples/Navigation.css CHANGED
@@ -1,25 +1,3 @@
1
- .ws-core-c-navigation:not([id*="tertiary"]):not([id*="light-mode"]) .pf-v5-c-nav {
2
- padding: 0;
3
- background-color: var(--pf-v5-global--BackgroundColor--dark-300);
4
- }
5
-
6
- #ws-core-c-navigation-horizontal-in-masthead,
7
- #ws-core-c-navigation-horizontal-in-masthead-overflow {
8
- grid-template-rows: auto;
9
- }
10
-
11
- #ws-core-c-navigation-horizontal-in-masthead .pf-v5-c-page__header,
12
- #ws-core-c-navigation-horizontal-in-masthead-overflow .pf-v5-c-page__header {
13
- min-height: 0;
14
- }
15
-
16
- @media screen and (min-width: 1200px) {
17
- #ws-core-c-navigation-horizontal-in-masthead .pf-v5-c-page__header,
18
- #ws-core-c-navigation-horizontal-in-masthead-overflow .pf-v5-c-page__header {
19
- min-height: var(--pf-v5-c-page__header--MinHeight);
20
- }
21
- }
22
-
23
1
  #ws-core-c-navigation-horizontal-in-masthead .pf-v5-c-page__header-nav,
24
2
  #ws-core-c-navigation-horizontal-in-masthead-overflow .pf-v5-c-page__header-nav {
25
3
  grid-row: 1;
@@ -27,7 +5,7 @@
27
5
 
28
6
  #ws-core-c-navigation-nav-with-flyout .ws-preview-html,
29
7
  [id^="ws-core-c-navigation-nav-with-drilldown-menu"] .ws-preview-html {
30
- width: 260px;
8
+ width: 280px;
31
9
  }
32
10
 
33
11
  #ws-core-c-navigation-nav-with-flyout .ws-preview-html {